/* =============================================================
   Designsystem — Grundlage
   Farben, Schriften, Abstände, Grundtypografie, Seitenraster.

   Die Richtung heißt „Aushang“: das Plakat am Schwarzen Brett im
   Stadtteil, im Risographen gedruckt. Zwei Druckfarben (Signal und
   Kobalt), ein Leuchtmarker, schwarze Tinte auf Recyclingpapier.
   Laut in den Überschriften, ruhig im Text.

   Farbregeln (alle Kontraste gerechnet, WCAG AA oder besser):
   - Signal ist eine FLÄCHE, nie Schriftfarbe auf Papier (2,7:1).
     Tinte auf Signal: 5,8:1. Für kleine rote Schrift: --signal-text.
   - Kobalt ist Linkfarbe (7:1 auf Papier) und dunkle Fläche.
   - Gelb ist nur Marker hinter dunkler Schrift (13:1).
   Das ausführliche Konzept steht in docs/design-konzept.md.
   ============================================================= */

:root {
	/* --- Farben --- */
	--papier:       #F3F0E8;   /* Grundfläche, Recyclingpapier */
	--putz:         #E7E1D3;   /* zweite Fläche */
	--tinte:        #16161D;   /* Text, Linien, Schatten */
	--tinte-2:      #4B4A55;   /* Nebentext */
	--signal:       #FF5B2E;   /* Druckfarbe 1 — nur als Fläche */
	--signal-text:  #C2360E;   /* Signal, dunkel genug für kleine Schrift */
	--kobalt:       #2B3BD1;   /* Druckfarbe 2 — Links, dunkle Flächen */
	--kobalt-tief:  #1E2A9E;
	--gelb:         #FFD84A;   /* Leuchtmarker */
	--linie:        #CFC8B8;   /* dekorative Linien */
	--auf-dunkel:   #F3F0E8;   /* Text auf Kobalt und Tinte */

	/* --- Schriften --- */
	--schrift-anzeige: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
	--schrift-akzent:  "Instrument Serif", "Iowan Old Style", Georgia, serif;
	--schrift-text:    "Ziffern", "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;

	/* --- Größen, fließend zwischen 380px und 1200px Fensterbreite --- */
	--gr-hero:  clamp(3.1rem, 1.2rem + 7.4vw, 6.4rem);
	--gr-h1:    clamp(2.2rem, 1.2rem + 4.2vw, 4rem);
	--gr-h2:    clamp(1.8rem, 1.1rem + 2.9vw, 3.1rem);
	--gr-h3:    clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
	--gr-lead:  clamp(1.1rem, 1.02rem + 0.35vw, 1.3rem);
	--gr-text:  1rem;
	--gr-klein: 0.88rem;
	--gr-etikett: 0.74rem;

	/* --- Abstände --- */
	--r1: 0.35rem;
	--r2: 0.7rem;
	--r3: 1.15rem;
	--r4: 1.9rem;
	--r5: 3rem;
	--r6: 4.75rem;
	--abschnitt: clamp(3.5rem, 1.5rem + 7vw, 7rem);

	/* --- Formen --- */
	--rand-stark: 2px solid var(--tinte);
	--schatten: 5px 5px 0 var(--tinte);          /* harter Druckschatten, kein Weichzeichner */
	--schatten-klein: 3px 3px 0 var(--tinte);
	--radius: 4px;
	--rund: 999px;

	--bahn-breit: 1240px;
	--bahn-schmal: 760px;
	--rand: clamp(1.15rem, 4vw, 2.75rem);

	/* Risograph-Körnung: ein winziges Rauschen als Daten-URI, keine Anfrage. */
	--koernung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .3 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}

/* --- Grundlegendes ------------------------------------------------ */

*,
*::before,
*::after { box-sizing: border-box; }

html {
	font-size: 18px;               /* bewusst größer als 16 — die Leserschaft ist altersgemischt */
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--papier);
	color: var(--tinte);
	font-family: var(--schrift-text);
	font-size: var(--gr-text);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img,
svg,
video { max-width: 100%; height: auto; }

img { display: block; }

::selection { background: var(--gelb); color: var(--tinte); }

/* --- Typografie --------------------------------------------------- */

h1, h2, h3, h4 {
	font-family: var(--schrift-anzeige);
	font-weight: 800;
	font-stretch: 100%;
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin: 0 0 var(--r3);
	text-wrap: balance;
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Die großen Zeilen sind Plakatzeilen: schmal, schwer, in Versalien. */
h1,
h2 {
	font-stretch: 72%;
	font-weight: 850;
	text-transform: uppercase;
	line-height: 0.98;
	letter-spacing: -0.005em;
}

h1 { font-size: var(--gr-h1); }
h2 { font-size: var(--gr-h2); }
h3 { font-size: var(--gr-h3); font-stretch: 88%; }
h4 { font-size: 1.05rem; }

/*
 * Betonte Wörter in Überschriften.
 * Im Backend schreibt man *so* — daraus wird eine Kursive aus einer
 * zweiten, weichen Schrift. Das ist der Moment, in dem das Plakat lächelt.
 */
h1 em,
h2 em,
.hero__titel em {
	font-family: var(--schrift-akzent);
	font-style: italic;
	font-weight: 400;
	font-stretch: 100%;
	text-transform: none;
	letter-spacing: -0.01em;
	font-size: 1.08em;
}

p { margin: 0 0 var(--r3); }

a {
	color: var(--kobalt);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
a:hover {
	color: var(--tinte);
	background: var(--gelb);
	text-decoration-color: var(--tinte);
}

strong { font-weight: 700; }

mark {
	background: var(--gelb);
	color: var(--tinte);
	padding: 0 0.15em;
}

ul, ol { margin: 0 0 var(--r3); padding-left: 1.2rem; }
li { margin-bottom: 0.35rem; }
li::marker { color: var(--signal-text); }

blockquote {
	margin: var(--r4) 0;
	padding-left: var(--r3);
	border-left: 6px solid var(--signal);
	font-family: var(--schrift-akzent);
	font-size: calc(var(--gr-lead) * 1.35);
	font-style: italic;
	line-height: 1.3;
}

hr {
	border: 0;
	border-top: var(--rand-stark);
	margin: var(--r5) 0;
}

.klein { font-size: var(--gr-klein); color: var(--tinte-2); }

/* Kleine Versalzeile über Überschriften — wie ein Stempel. */
.etikett {
	display: inline-block;
	font-family: var(--schrift-anzeige);
	font-size: var(--gr-etikett);
	font-weight: 700;
	font-stretch: 110%;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* --- Tastaturbedienung -------------------------------------------- */

:focus-visible {
	outline: 3px solid var(--kobalt);
	outline-offset: 3px;
	border-radius: 2px;
}

.sprungmarke {
	position: absolute;
	left: var(--rand);
	top: -100px;
	z-index: 100;
	background: var(--gelb);
	color: var(--tinte);
	border: var(--rand-stark);
	padding: var(--r2) var(--r3);
	font-weight: 700;
	text-decoration: none;
	transition: top 0.15s ease;
}
.sprungmarke:focus {
	top: var(--r2);
	color: var(--tinte);
}

/* Nur für Screenreader */
.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- Seitenraster -------------------------------------------------- */

.bahn {
	width: 100%;
	max-width: var(--bahn-breit);
	margin-inline: auto;
	padding-inline: var(--rand);
}

.bahn--schmal { max-width: calc(var(--bahn-schmal) + 2 * var(--rand)); }

.abschnitt { padding-block: var(--abschnitt); position: relative; }

.abschnitt--putz { background: var(--putz); }

/* Farbflächen tragen die Risograph-Körnung. */
.abschnitt--dunkel,
.abschnitt--signal {
	background-image: var(--koernung);
	background-blend-mode: multiply;
}

.abschnitt--dunkel {
	background-color: var(--kobalt);
	color: var(--auf-dunkel);
}
.abschnitt--dunkel a { color: var(--auf-dunkel); }
.abschnitt--dunkel a:hover { color: var(--tinte); }
.abschnitt--dunkel h2,
.abschnitt--dunkel h3 { color: var(--auf-dunkel); }
.abschnitt--dunkel h2 em { color: var(--gelb); }

.abschnitt--signal {
	background-color: var(--signal);
	color: var(--tinte);
}
.abschnitt--signal a { color: var(--tinte); }

.abschnitt__titel { font-size: var(--gr-h2); margin-bottom: var(--r4); }

.abschnitt__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--r3);
	margin-bottom: var(--r4);
}
.abschnitt__kopf .abschnitt__titel { margin-bottom: 0; }

/* --- Handgezeichneter Trenner -------------------------------------- */

.trenner {
	display: block;
	width: 100%;
	height: 12px;
	color: var(--tinte);
	margin-block: 0;
}
.trenner path {
	stroke: currentColor;
	stroke-width: 2.2;
	fill: none;
	stroke-linecap: round;
}

/* --- Einblenden beim Scrollen ---------------------------------------
   Wird nur aktiv, wenn JavaScript die Klasse setzt — ohne JavaScript
   ist alles sofort sichtbar.
   -------------------------------------------------------------------- */

.js-einblenden .abschnitt > .bahn {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.55s ease, transform 0.55s ease;
}
.js-einblenden .abschnitt.ist-sichtbar > .bahn {
	opacity: 1;
	transform: none;
}

/* --- Bewegung sparsam ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.js-einblenden .abschnitt > .bahn { opacity: 1; transform: none; }
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}