/*
 * Gestaltungswerte.
 *
 * Alle Farben sind gegen die Kontrastschwellen gerechnet, nicht geschätzt; die
 * Rechnung steht in docs/farben-und-kontrast.md. Der wichtigste Griff ist die
 * Trennung von --rot und --rot-text: das Logorot trägt als Textfarbe auf keinem
 * dunklen Grund die geforderten 4,5:1, als Fläche dagegen schon.
 */

:root {
	/* --- Flächen. Drei Dunkelstufen, mehr nicht. --- */
	--grund:            #000000;   /* Seite. Der Betrieb wollte ausdrücklich Schwarz */
	--grund-wechsel:    #0E0F10;   /* alternierende Sektionen, Fuß */
	--flaeche:          #1A1B1D;   /* hellste zulässige Fläche: Eingabefelder, Menüfeld.
	                                  Nicht heller: darüber fällt Rot unter 3:1 */
	--schleier:         rgba(0, 0, 0, .72);
	--schleier-stark:   rgba(0, 0, 0, .88);

	/* --- Schrift --- */
	--text:             #FFFFFF;   /* 21:1 auf --grund */
	--text-leise:       #B3B4B3;   /* 10,1:1 auf --grund, 8,2:1 auf --flaeche */
	--text-invers:      #101112;

	/* --- Marke. Ein Akzent, zwei Aufgaben. --- */
	--rot:              #E00E13;   /* nur Fläche, Rahmen, Piktogramm */
	--rot-text:         #FF5A5C;   /* nur Text, Verweise, dünne Linien. 6,9:1 auf --grund */
	--rot-tief:         #C41217;   /* große Flächen, Weiß darauf 6,1:1 */
	--rot-hauch:        rgba(224, 14, 19, .14);

	/* --- Linien --- */
	--linie:            rgba(255, 255, 255, .12);  /* dekorative Fugen */
	--linie-fest:       #757575;   /* Feldrahmen, Zustände. 4,6:1 auf --grund */
	--inaktiv:          #6E6F6E;

	/* --- Zustände --- */
	--fokus:            #FFFFFF;   /* trägt auf Dunkel UND auf der roten Fläche */
	--fehler:           #FF6B6D;
	--fehler-rahmen:    #E00E13;
	--bestaetigt:       #7ED9A6;

	/* --- Bildbehandlung --- */
	--bild-referenz:    grayscale(.85) contrast(1.05) brightness(.92);
	--bild-portrait:    grayscale(1) contrast(1.08);
	--bild-artdesign:   none;      /* die einzige farbige Sektion der Seite */

	/* --- Schriftfamilien --- */
	--schrift-breit: "Archivo Expanded", "Archivo", "Helvetica Neue", Arial, sans-serif;
	--schrift:       "Archivo", "Helvetica Neue", Arial, sans-serif;

	/* --- Schriftgrößen. Eng gestuft, mit genau einem Ausreißer im Kopf. --- */
	--gr-hero:   clamp(2.25rem, 8.4vw, 7.5rem);
	--gr-h1:     clamp(1.75rem, 1.35rem + 1.3vw, 2.125rem);
	--gr-h2:     clamp(1.5rem, 1.28rem + .8vw, 1.75rem);
	--gr-h3:     clamp(1.25rem, 1.14rem + .45vw, 1.375rem);
	--gr-h4:     clamp(1.0625rem, 1.01rem + .25vw, 1.1875rem);
	--gr-lead:   clamp(1.125rem, 1.05rem + .32vw, 1.25rem);
	--gr-text:   clamp(1rem, .97rem + .14vw, 1.0625rem);
	--gr-klein:  .875rem;
	--gr-marke:  .8125rem;
	--gr-ui:     .8125rem;

	/* --- Zeilenhöhen --- */
	--zh-hero: .94;
	--zh-kopf: 1.18;
	--zh-lead: 1.5;
	--zh-text: 1.65;
	--zh-ui:   1.2;

	/* --- Laufweiten. Gesperrt wird nur Kleinsttext. --- */
	--lw-hero:  -.015em;
	--lw-kopf:  -.005em;
	--lw-ui:     .12em;
	--lw-marke:  .3em;

	/* --- Abstände. Grundeinheit 12, Sektionsrhythmus in 36er-Schritten. --- */
	--a-3xs: 4px;  --a-2xs: 8px;   --a-xs: 12px;  --a-sm: 18px;
	--a-md: 24px;  --a-lg: 36px;   --a-xl: 48px;  --a-2xl: 72px;
	--a-3xl: 108px; --a-4xl: 144px;

	--sek-y:      clamp(72px, 8vw, 144px);
	--sek-y-eng:  clamp(56px, 6vw, 108px);
	--sek-x:      clamp(20px, 5.5vw, 144px);   /* die großen Außenabstände tragen die Wirkung */
	--fuge:       clamp(20px, 2.4vw, 36px);
	--fuge-weit:  clamp(28px, 4vw, 72px);

	/* --- Breiten --- */
	--b-seite:    1680px;
	--b-text:     62ch;
	--b-menuefeld: 300px;

	/* --- Überlappungen als Gestaltungsmittel --- */
	--versatz-ueberlappung: clamp(-96px, -6vw, -48px);
	--versatz-marke:        clamp(-56px, -4vw, -28px);

	/* --- Kanten. Durchgehend eckig. --- */
	--radius: 0;
	--rand-haar: 1px;
	--rand-taste: 2px;

	--schatten-hebung: 0 32px 80px rgba(0, 0, 0, .55);
	--schatten-bild:   0 18px 48px rgba(0, 0, 0, .45);

	/* --- Bewegung --- */
	--t-schnell: 160ms;
	--t-mittel:  240ms;
	--t-langsam: 600ms;
	--kurve:        cubic-bezier(.2, .6, .2, 1);
	--kurve-enthuellen: cubic-bezier(.16, 1, .3, 1);
	--enthuellen-versatz: 24px;
	--enthuellen-stufe:   90ms;

	/* --- Kopfleiste --- */
	--kopf-h:        96px;
	--kopf-h-fest:   68px;
	--logo-h:        44px;
	--logo-h-fest:   32px;
	--logo-art-h:    22px;

	--z-kopf: 1000; --z-menuefeld: 1010; --z-overlay: 1020; --z-sprung: 1100;

	/* --- Piktogramme --- */
	--icon-raster:      72px;
	--icon-raster-klein: 56px;
	--icon-zeile:       24px;
	--icon-strich:      1.5px;
	--icon-strich-zeile: 1.25px;

	--klickflaeche: 44px;
	--sprungrand:   calc(var(--kopf-h-fest) + 24px);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--t-schnell: 0ms;
		--t-mittel:  0ms;
		--t-langsam: 0ms;
		--enthuellen-versatz: 0px;
		--enthuellen-stufe:   0ms;
	}
}