/* =====================================================================
   Spenglerei Herr – Design-Tokens (Schwarz / Weiß · Metall-Grautöne)
   Zentrale Variablen. Jede Section bringt ihr eigenes CSS mit.
   ===================================================================== */
:root {
    /* ---- Kern-Palette (Schwarz/Weiß) ---- */
    --white: #ffffff;
    --black: #0c0c0c;        /* Haupt-Ink / dunkle Flächen */
    --primary: #ffffff;      /* Seiten-Hintergrund / helle Flächen */
    --secondary: #111111;    /* Akzent: solides Schwarz (Buttons, Rahmen, Hover) */
    --dark: #5a5a5a;         /* gedämpfter Fließtext */
    --bg-light: #f1f1f1;     /* helles Grau (Flächen, feine Rahmen) */

    /* ---- Metall-Grautöne (für Hero & Deko – bleibt Graustufe) ---- */
    --ink: #0c0c0c;
    --ink-2: #161616;
    --steel-100: #e9e9e9;
    --steel-200: #cfcfcf;
    --steel-300: #a6a6a6;
    --steel-400: #757575;
    --line: rgba(0, 0, 0, 0.10);
    --line-strong: rgba(0, 0, 0, 0.22);

    /* Gebürsteter Stahl-Verlauf (Hero-Akzente) */
    --metal: linear-gradient(135deg, #f4f4f4 0%, #c9c9c9 22%, #8f8f8f 50%, #c9c9c9 78%, #f4f4f4 100%);
    --metal-soft: linear-gradient(180deg, #ffffff, #d8d8d8);

    /* ---- 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: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    --font-display: 'Segoe UI', Roboto, Helvetica, Arial, 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(--black);
    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; }
}