/* Design-Tokens. Farben, Schriftmaße, Abstände, Dauern und Kurven gehören
   ausschließlich hierher. Im übrigen CSS (site.css, modules/*.css) steht kein
   Hex-Wert, keine Millisekundenzahl und keine `cubic-bezier`-Klammer.

   Herkunft: Jeder Wert ist aus den Prototypen des Design-Handoffs abgelesen
   (`designs/*.dc.html`, Inline-Styles und der <style>-Block am Anfang) und
   unter einem sprechenden Namen abgelegt. Die Namen sind Vertrag (PLAN.md,
   Abschnitt 5): Module bauen auf sie, umbenannt wird nicht. Ergänzungen, die
   das Design braucht, der Plan aber nicht nennt, stehen jeweils am Ende eines
   Abschnitts unter „Ergänzt". */

:root {

	/* ---------- Farben: Palette ---------- */
	--bg: #faf9f6;                   /* warmes Weiß, Seitengrund */
	--ink: #1a1917;                  /* Text, dunkle Buttons, Sticky CTA */
	--dunkel: #0e0d0b;               /* dunkle Sektionen, Hero-Grund, mobiles Menü */
	--hell: #f1efe8;                 /* Text auf --dunkel */
	--gold: #96803f;                 /* Akzent auf hellem Grund: Hover, Unterstriche, Nummern */
	--gold-hell: #c3a55e;            /* Akzent auf dunklem Grund, goldener Schlusspunkt */
	/* Einzige Farbe außerhalb der Palette: Fehlertexte im Formular. Warmes
	   Dunkelrot, damit es neben Gold nicht schreit, aber eindeutig Fehler heißt. */
	--fehler: #9a3b2e;
	--weiss: #ffffff;

	/* ---------- Farben: Text auf hellem Grund (--ink mit Deckkraft) ----------
	   Das Design stuft Text nicht über Grautöne, sondern über die Deckkraft der
	   Tinte ab — so bleibt der warme Unterton auf dem warmen Grund erhalten. */
	--text-78: rgba(26, 25, 23, 0.78);   /* Fließtext */
	--text-75: rgba(26, 25, 23, 0.75);   /* Einleitung Anfrage */
	--text-72: rgba(26, 25, 23, 0.72);   /* Kartentext */
	--text-65: rgba(26, 25, 23, 0.65);   /* Nav-Links (solide), Footer-Links, Formularhinweis */
	--text-60: rgba(26, 25, 23, 0.60);   /* Unterzeilen, Kachel-Beschriftung */
	--text-55: rgba(26, 25, 23, 0.55);   /* Kicker, Standortzeile */
	--text-50: rgba(26, 25, 23, 0.50);   /* Zitatquelle, Formular-Labels */
	--text-45: rgba(26, 25, 23, 0.45);   /* Footer-Überschriften, Bottom-Bar, Bildunterschrift */

	/* ---------- Farben: Text auf dunklem Grund (--bg mit Deckkraft) ---------- */
	--invers-95: rgba(250, 249, 246, 0.95);  /* aktive Sprache über dem Hero */
	--invers-85: rgba(250, 249, 246, 0.85);  /* Nav-Links und Hero-Text über dem Bild */
	--invers-70: rgba(250, 249, 246, 0.70);  /* Hero-Kicker, Bewertung, Faktenzeile */
	--invers-55: rgba(250, 249, 246, 0.55);  /* inaktive Sprache */
	--invers-40: rgba(250, 249, 246, 0.40);  /* Trennpunkt DE · EN */
	--hell-85: rgba(241, 239, 232, 0.85);    /* Fließtext auf --dunkel */
	--hell-55: rgba(241, 239, 232, 0.55);    /* Zitatquelle auf --dunkel */

	/* ---------- Farben: Linien ---------- */
	--linie-35: rgba(26, 25, 23, 0.35);  /* Oberkante Karten und Ablaufschritte */
	--linie-30: rgba(26, 25, 23, 0.30);  /* Formularfelder, Text-Links */
	--linie-14: rgba(26, 25, 23, 0.14);  /* FAQ */
	--linie-12: rgba(26, 25, 23, 0.12);  /* Sektionstrenner */
	--linie-10: rgba(26, 25, 23, 0.10);  /* Kopfzeile (solide), Footer, Laufband */
	--linie-08: rgba(26, 25, 23, 0.08);  /* Bottom-Bar im Footer */
	--linie-invers-20: rgba(250, 249, 246, 0.2); /* Faktenzeile im Hero */
	/* Ergänzt: */
	--linie-20: rgba(26, 25, 23, 0.20);         /* Unterstrich des Credit-Links im Footer */
	--gold-hell-50: rgba(195, 165, 94, 0.5);    /* Rahmen der Bewertungs-Pille auf --dunkel */

	/* ---------- Flächen und Verläufe ---------- */
	/* Kopfzeile über dem Hero: nur ein Schatten von oben, damit weiße Links auf
	   jedem Bild lesbar bleiben, ohne eine sichtbare Leiste zu bilden. */
	--nav-dunkel: linear-gradient(180deg, rgba(10, 10, 9, 0.55), rgba(10, 10, 9, 0));
	/* Solide Kopfzeile: fast deckend; der Rest kommt über backdrop-filter. */
	--nav-hell: rgba(250, 249, 246, 0.94);
	/* Hero: oben leicht, Mitte offen, unten kräftig — der Text steht unten. */
	--hero-verlauf: linear-gradient(180deg, rgba(14, 13, 11, 0.35) 0%, rgba(14, 13, 11, 0.15) 40%, rgba(14, 13, 11, 0.82) 100%);
	/* Die Nacht / Stimmen: oben und unten fast deckend, damit die Sektion in
	   den hellen Grund davor und danach nicht „ausfranst". */
	--nacht-verlauf: linear-gradient(180deg, rgba(14, 13, 11, 0.85) 0%, rgba(14, 13, 11, 0.35) 45%, rgba(14, 13, 11, 0.92) 100%);

	/* ---------- Bildlook ----------
	   Der S/W-Look ist CSS, kein Bildbestandteil: Kacheln werden beim Hover
	   farbig, und Redaktion lädt Originale hoch. */
	--bw: grayscale(1) sepia(0.12) contrast(1.05) brightness(1.01);
	--bw-video: grayscale(1) sepia(0.1) contrast(1.06);
	--bw-nacht: grayscale(1) sepia(0.1) brightness(0.42) contrast(1.1);

	/* ---------- Typografie ----------
	   Eine Familie, variabel (Gewicht 550 kommt vor). */
	--sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

	/* H1: Das Maximum liegt dort, wo der Container (1140 px) ausgewachsen ist
	   (gut 1440 px Fenster). Darüber wüchse nur die Schrift, nicht die Spalte —
	   bei 1920 px brach „Euer Hochzeits-DJ für die Hochzeit im Ausland." sonst
	   in fünf Zeilen. Prototyp: 96 / 88 px (Feinschliff, PLAN.md §12). */
	--fs-h1: clamp(44px, 5.8vw, 84px);           /* Hero Startseite */
	--fs-h1-landing: clamp(42px, 5.4vw, 78px);   /* Hero Landingpages */
	--fs-h2: clamp(30px, 3.4vw, 46px);
	--fs-h2-gross: clamp(34px, 4.6vw, 68px);     /* dunkle Sektionen */
	--fs-h3: 18px;                               /* Karten, Ablauf */
	--fs-h3-gross: 19px;                         /* Zwischenüberschrift im Fließtext */
	--fs-text: 16.5px;
	--fs-text-dunkel: clamp(15.5px, 1.3vw, 17.5px);
	--fs-hero-text: clamp(16px, 1.25vw, 18px);
	--fs-karte: 15px;
	--fs-klein: 13.5px;                          /* Standortzeile, Formularhinweis */
	--fs-meta: 13px;                             /* Bewertung */
	--fs-label: 12px;                            /* Kicker, Nav-Links, Faktenzeile */
	--fs-label-klein: 11px;                      /* Formular-Labels, Footer-Überschriften */
	--fs-label-mini: 11.5px;                     /* Quelle unter dem großen Zitat */
	--fs-button: 12.5px;
	--fs-footer: 14px;
	--fs-zitat: clamp(22px, 2.4vw, 32px);
	--fs-zitat-klein: clamp(17px, 1.5vw, 20px);
	--fs-nummer: 12px;                           /* 01–06 im Ablauf */

	--fw-leicht: 300;    /* kleine Zitate */
	--fw-normal: 400;
	--fw-label: 500;     /* Kicker, Labels, Nav */
	--fw-h: 550;         /* H1, H2 */
	--fw-h3: 600;        /* H3, Buttons, Footer-Überschriften */

	--lh-h1: 1.02;
	--lh-h2: 1.12;
	--lh-h2-gross: 1.06;
	--lh-text: 1.7;
	--lh-text-dunkel: 1.8;
	--lh-zitat: 1.4;
	--lh-zitat-klein: 1.6;

	--ls-h1: -0.025em;
	--ls-h2: -0.02em;
	--ls-zitat: -0.01em;
	--ls-label: 0.26em;
	--ls-label-klein: 0.2em;
	--ls-label-mini: 0.2em;     /* Feinschliff: wie --ls-label-klein (eine Sperrung je Größe) */
	--ls-nav: 0.16em;
	--ls-button: 0.16em;
	--ls-sprache: 0.12em;

	/* ---------- Raster ---------- */
	--container: 1140px;                         /* Inhaltsbreite ohne Seitenrand */
	--container-schmal: 820px;                   /* Zitat, Text-Modul */
	--pad-x: clamp(20px, 4vw, 64px);             /* Seitenrand, überall gleich */

	--sektion-y: clamp(80px, 11vw, 150px);
	--sektion-y-klein: clamp(70px, 10vw, 130px);
	--sektion-y-gross: clamp(90px, 12vw, 160px);
	--kopf-abstand: clamp(44px, 6vw, 72px);      /* Trennlinie → Kicker */
	--raster-abstand: clamp(36px, 5vw, 60px);    /* Sektionskopf → Raster */

	--grid-gap: clamp(20px, 3vw, 36px);
	--grid-gap-ablauf: clamp(24px, 3.5vw, 48px);
	--spalten-gap: clamp(32px, 5vw, 80px);
	--kachel-gap: clamp(14px, 2vw, 24px);

	/* Kopfzeile: 16 px + Logo 38 px + 16 px = 70 px am Desktop. Mobil bleibt
	   die Höhe, das Logo schrumpft auf 30 px. Sprungmarken rechnen mit --nav-h
	   (scroll-margin), deshalb ist die Höhe fix und nicht aus dem Inhalt. */
	--nav-h: 70px;
	--nav-pad-y: 16px;
	--logo-h: 38px;
	--logo-h-mobil: 30px;

	--sticker: 112px;
	--sticker-mobil: 84px;
	/* Feinschliff: auf der Kante des Seitenrands, bündig mit DE · EN. */
	--sticker-abstand: var(--pad-x);
	/* Der einzige Schatten der Website. */
	--schatten-sticker: 0 14px 40px rgba(0, 0, 0, 0.28);

	/* Keine Rundungen — außer Sticky CTA und Bewertungs-Pille. */
	--radius: 0;
	--radius-rund: 999px;

	/* Ergänzt: Stapelordnung. Hier, damit Module sich einordnen können, ohne
	   die Zahlen der Kopfzeile zu kennen. */
	--z-menue: 45;       /* mobiles Menü liegt unter der Kopfzeile (Schließen-Knopf) */
	--z-nav: 50;
	--z-sticker: 60;
	--z-skip: 100;


	/* Ergänzt nach dem Modulbau (D1/D2): Werte, die nur in einzelnen Modulen
	   vorkommen, aber als Zahl nicht ins Modul-CSS gehören. */
	--sektion-y-dunkel: clamp(90px, 13vw, 180px); /* Die Nacht / Stimmen */
	--kopf-gap: clamp(28px, 4vw, 64px);           /* zweispaltiger Modulkopf */
	--raster-abstand-klein: clamp(30px, 4vw, 48px);
	--zitate-gap: clamp(28px, 5vw, 64px);
	--zitate-abstand: clamp(50px, 7vw, 90px);
	--zitate-abstand-klein: clamp(50px, 7vw, 80px);
	--bewertung-abstand: clamp(36px, 5vw, 56px);
	--fs-zitat-gross: clamp(24px, 2.8vw, 40px);  /* Hauptzitat „Stimmen" */
	--lh-zitat-gross: 1.3;
	--ls-zitat-gross: -0.015em;
	--fs-h3-klein: 17px;
	--fs-h3-kachel: 20px;
	--fs-karte-klein: 14.5px;
	--fs-unterzeile: 17px;
	--fs-faq: clamp(17px, 1.5vw, 20px);
	--fs-faq-antwort: 15.5px;


	/* Ergänzt im typografischen Feinschliff (PLAN.md §12). */

	/* Zeilenlängen. `ch` ist die Breite der Null (0,56 em); ein Durchschnitts-
	   zeichen misst 0,5 em — 62ch ergeben also rund 70 Zeichen je Zeile. */
	--mass-text: 62ch;      /* Fließtext: 55–75 Zeichen */
	--mass-lead: 50ch;      /* Einleitungen neben großen Überschriften (Hero, Anfrage, 404): ~56 Zeichen */
	--mass-kurz: 40ch;      /* Kurztexte in Köpfen (Kacheln-Übersicht) */

	/* Vertikaler Rhythmus im Sektionskopf: Kicker → Überschrift → Text → Aktion. */
	--abstand-kicker: 18px;        /* Kicker → H2 */
	--abstand-kicker-gross: 20px;  /* Kicker → H2 groß (dunkle Sektionen) */
	--abstand-titel: 24px;         /* H2 → erster Absatz */
	--abstand-titel-gross: 28px;   /* H2 groß → erster Absatz */
	--abstand-absatz: 16px;        /* Absatz → Absatz */
	--abstand-aktion: 28px;        /* letzter Absatz → Button, Link, Kontakt */

	/* Hängende Anführungszeichen links bündiger Zitate: das öffnende Zeichen
	   steht im Rand, die Buchstaben auf der Satzkante (Breite „ bzw. “). */
	--haengend-de: -0.39em;
	--haengend-en: -0.44em;

	/* Unterlänge der H1 (Grundlinie bis Unterkante der Zeilenbox, gemessen):
	   Die rechte Hero-Spalte endet auf der Grundlinie, nicht auf der Box. */
	--h1-unterlaenge: 0.16;   /* Faktor der Schriftgröße */

	/* ---------- Bewegung ----------
	   Dauern stehen nur hier; site.js liest sie über getComputedStyle. */
	--dur-schnell: 200ms;    /* Linkfarbe */
	--dur-ui: 250ms;         /* Buttons */
	--dur-nav: 300ms;        /* Kopfzeile hell/dunkel, Sticker, Menü */
	--dur-bild: 500ms;       /* S/W → Farbe bei Kacheln */
	--dur-reveal: 750ms;     /* Scroll-Reveal */
	--dur-hero: 800ms;       /* Einstieg im Hero */
	--dur-marquee: 42s;      /* ein Durchlauf des Laufbands */
	--dur-sticker: 14s;      /* eine Umdrehung des Ringtexts */
	--dur-sticker-hover: 6s; /* schneller, solange der Zeiger darauf liegt */

	/* Eine Kurve für alles: schnell los, weich aus. */
	--ease-aus: cubic-bezier(0.2, 0.7, 0.2, 1);

	--reveal-shift: 18px;    /* Weg beim Einblenden */
	--parallax: 5%;          /* Ausschlag des Nachtbilds nach oben und unten */
	--hero-zoom: 1.08;       /* Bild-Hero beim Herausscrollen */
	/* Ergänzt: Das Nachtbild ist vergrößert, damit beim Verschieben keine
	   Kante sichtbar wird (Design: scale 1.12). */
	--parallax-zoom: 1.12;
}

/*
 * Reduzierte Bewegung, zentral. Was erzählt (Reveal, Parallax, Zoom, Laufband,
 * Ringtext), steht still; was antwortet (Hover, Menü), blendet nur kurz über —
 * ein harter Schnitt ist für manche schwerer zu verfolgen als eine ruhige
 * Überblendung.
 *
 * `0s` bei Laufband und Sticker schaltet die Endlos-Animation ab: Eine
 * Animation ohne Dauer hat keine aktive Phase und zeigt nichts. Die Nullwerte
 * tragen Einheiten (`0px`, `0%`), weil sie in calc() und translateY() landen;
 * eine nackte 0 würde dort zur Zahl und die ganze Deklaration ungültig machen.
 * site.js fragt dieselbe Einstellung ab und startet weder Video noch Parallax.
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-schnell: 150ms;
		--dur-ui: 150ms;
		--dur-nav: 150ms;
		--dur-bild: 150ms;
		--dur-reveal: 1ms;
		--dur-hero: 1ms;
		--dur-marquee: 0s;
		--dur-sticker: 0s;
		--dur-sticker-hover: 0s;

		--ease-aus: linear;

		--reveal-shift: 0px;
		--parallax: 0%;
		--hero-zoom: 1;
	}
}