/* =====================================================================
   Herr GmbH – Design-Tokens (Marken-Navy / Teal / Anthrazit · aus Logo)
   Zentrale Variablen. Jede Section bringt ihr eigenes CSS mit.
   ===================================================================== */
:root {
    /* ---- Marken-Palette (direkt aus dem Logo) ---- */
    --navy: #11315a;         /* HERR / Haus – Primärfarbe */
    --navy-deep: #0d2746;    /* dunkler für Verläufe / Hover */
    --teal: #296e80;         /* Dachstreifen & Punkte – Akzent */
    --teal-bright: #34869b;  /* hellerer Akzent / Hover */
    --anthracite: #27333c;   /* Dach / „GmbH" / Tagline */

    /* ---- Kern-Palette (Semantik: monochrom -> Navy, Akzent -> Teal) ---- */
    --white: #ffffff;
    --black: #11315a;        /* Haupt-Ink / dunkle Flächen & Text -> Marken-Navy */
    --primary: #ffffff;      /* Seiten-Hintergrund / helle Flächen */
    --secondary: #296e80;    /* Akzent: Teal (Buttons, Highlights, Hover) */
    --dark: #51616d;         /* gedämpfter Fließtext (blaugrau) */
    --bg-light: #eef1f5;     /* helles Blaugrau (Flächen, feine Rahmen) */

    /* ---- Dunkle Flächen & Stahl-Töne (Hero & Deko – kühl/blaugrau) ---- */
    --ink: #11315a;
    --ink-2: #0d2746;
    --steel-100: #e8ecf1;
    --steel-200: #ccd4de;
    --steel-300: #97a3b2;
    --steel-400: #6a7785;
    --line: rgba(17, 49, 90, 0.10);
    --line-strong: rgba(17, 49, 90, 0.22);

    /* Gebürsteter Stahl-Verlauf (Hero-Akzente, kühl) */
    --metal: linear-gradient(135deg, #eef2f6 0%, #c2ccd7 22%, #8793a2 50%, #c2ccd7 78%, #eef2f6 100%);
    --metal-soft: linear-gradient(180deg, #ffffff, #d3dae2);

    /* ---- Form & Bewegung ---- */
    --maxw: 1200px;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --shadow-hard: 8px 8px 0 rgba(0, 0, 0, 0.12);   /* kantiger Offset-Schatten */
    --shadow-soft: 0 18px 50px rgba(0, 0, 0, 0.10);

    /* ---- Typografie (System-Stack, keine externen Fonts) ---- */
    --font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    overflow-x: clip;            /* clip statt hidden: kein Scroll-Container -> sticky Header bleibt funktionsfähig */
    max-width: 100%;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;              /* nicht 100vw – das zählt die Scrollbar mit und erzeugt X-Scroll */
    overflow-x: clip;             /* clip verhindert X-Scroll, ohne den sticky Header zu brechen */
    overflow-wrap: break-word;    /* lange Wörter/URLs umbrechen statt horizontalem Scroll */
    font-family: var(--font-body);
    color: var(--black);
    background: var(--primary);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Medien & Tabellen nie breiter als ihr Container */
img, svg, video, iframe, canvas, table { max-width: 100%; }

/* Flex-/Grid-Kinder dürfen unter ihre Inhaltsbreite schrumpfen (verhindert Überlauf durch lange Wörter) */
.sh-head, .sh-card, .sh-pcard, .faq-q, .faq-q .q-text, .tm-card, .footer-info-block, .footer-text,
.contact-text, .contact-info-item, .svc-body, .sh-pbody, .hero-content { min-width: 0; }

/* Links nie unterstrichen (Design-Vorgabe) */
a, a:hover, a:focus { text-decoration: none; }

/* Textauswahl im Marken-Look */
::selection { background: var(--black); color: var(--white); }

/* ---- Scrollbar (dezent, monochrom) ---- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-light); }
::-webkit-scrollbar-thumb { background: var(--steel-400); border: 2px solid var(--bg-light); }
::-webkit-scrollbar-thumb:hover { background: var(--black); }

/* ---- Scroll-Fortschritt (oben) ---- */
#scroll-progress {
    position: fixed; top: 0; left: 0;
    height: 3px; width: 0%;
    z-index: 3000;
    background: var(--teal);
    transition: width 0.1s linear;
    pointer-events: none;
}

/* ---- Reveal-on-Scroll (von js/site.js gesteuert) ---- */
.reveal {
    opacity: 0; transform: translateY(34px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
    will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
.reveal[data-delay="5"] { transition-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}