/* Fahrschule Silas – Entwurf 2026, Thema "Geheimagent"
 *
 * Kein Framework: Das Aussehen ist durchgehend eigen, Bootstrap brächte vor
 * allem Komponenten mit, die hier nicht vorkommen. Layout mit Grid/Flex,
 * Farben und Abstände als Variablen am Anfang – dort wird umgefärbt.
 *
 * Aufbau: 1 Variablen · 2 Schriften · 3 Grundlagen · 4 Bausteine ·
 *         5 Abschnitte (in Seitenreihenfolge) · 6 Intro · 7 Bewegung aus
 */

/* 1 Variablen ------------------------------------------------------------ */

:root {
	--schwarz: #07080a;
	--nacht: #0e1014;
	--graphit: #161920;
	--stahl: #232833;
	--linie: rgba(255, 255, 255, 0.12);
	--linie-stark: rgba(255, 255, 255, 0.28);
	--weiss: #f4f2ee;
	--grau: #a3a8b1;
	--rot: #e1101e;
	--rot-hell: #ff3341;
	--rot-dunkel: #7c0911;

	--f-titel: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
	--f-text: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--f-akte: "Courier Prime", "Courier New", monospace;

	--breite: 1240px;
	--rand: clamp(16px, 4vw, 40px);
	--abschnitt: clamp(72px, 11vw, 140px);
	--radius: 4px;
	--kopf-hoehe: 72px;
}

/* 2 Schriften (liegen im Projekt, kein Abruf bei Google) ----------------- */

@font-face {
	font-family: "Bebas Neue";
	src: url("../fonts/bebas-neue-400.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Manrope";
	src: url("../fonts/manrope-variabel.woff2") format("woff2");
	font-weight: 200 800;
	font-display: swap;
}
@font-face {
	font-family: "Courier Prime";
	src: url("../fonts/courier-prime-400.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Courier Prime";
	src: url("../fonts/courier-prime-700.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}

/* 3 Grundlagen ----------------------------------------------------------- */

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--kopf-hoehe);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--schwarz);
	color: var(--weiss);
	font-family: var(--f-text);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
.intro-aktiv, .intro-aktiv body { overflow: hidden; }

/* Filmkorn über allem – rein dekorativ, fängt keine Klicks */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 90;
	opacity: 0.05;
	background-image: 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1; }
ul { padding-left: 1.2em; }
::selection { background: var(--rot); color: #fff; }

:focus-visible {
	outline: 2px solid var(--rot-hell);
	outline-offset: 3px;
}

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

.nur-vorleser {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* 4 Bausteine ------------------------------------------------------------ */

/* Kleine Schreibmaschinen-Zeile über Überschriften: "// 02 · Missionen" */
.akte-label {
	font-family: var(--f-akte);
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--grau);
	margin: 0 0 0.9rem;
}
.akte-label b { color: var(--rot-hell); font-weight: 700; }

.abschnitt { padding-block: var(--abschnitt); position: relative; }
.abschnitt + .abschnitt { border-top: 1px solid var(--linie); }

.abschnitt-kopf { max-width: 760px; margin-bottom: clamp(36px, 6vw, 64px); }
.abschnitt-kopf h2 {
	font-family: var(--f-titel);
	font-size: clamp(2.8rem, 7vw, 5.4rem);
	letter-spacing: 0.02em;
	line-height: 0.92;
}
.abschnitt-kopf h2 em { font-style: normal; color: var(--rot); }
.abschnitt-kopf p { color: var(--grau); margin-top: 1.1rem; font-size: 1.05rem; }

/* Die rote Laserlinie unter jedem Abschnittstitel zieht sich beim Erscheinen auf */
.laser {
	display: block;
	height: 2px;
	width: 120px;
	margin-top: 1.4rem;
	background: linear-gradient(90deg, var(--rot), var(--rot-hell) 60%, transparent);
	box-shadow: 0 0 12px var(--rot);
	transform-origin: left;
	transform: scaleX(0);
	transition: transform 1.1s cubic-bezier(.2, .7, .2, 1) 0.2s;
}
.sichtbar .laser, .laser.sichtbar { transform: scaleX(1); }

.knopf {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.95em 1.6em;
	border-radius: var(--radius);
	font-family: var(--f-akte);
	font-weight: 700;
	font-size: 0.86rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.knopf:hover { transform: translateY(-2px); }
.knopf-rot { background: var(--rot); color: #fff; box-shadow: 0 8px 28px -10px var(--rot); }
.knopf-rot:hover { background: var(--rot-hell); box-shadow: 0 12px 34px -8px var(--rot); }
.knopf-linie { border-color: var(--linie-stark); color: var(--weiss); background: transparent; }
.knopf-linie:hover { border-color: var(--weiss); }
.knopf .pfeil { transition: transform 0.25s; }
.knopf:hover .pfeil { transform: translateX(4px); }

/* Stempel "Streng geheim" – knallt beim Erscheinen auf die Karte */
.stempel {
	position: absolute;
	bottom: 22px;
	right: 18px;
	padding: 0.25em 0.6em 0.15em;
	border: 3px double currentColor;
	color: var(--rot);
	font-family: var(--f-titel);
	font-size: 1.35rem;
	letter-spacing: 0.08em;
	line-height: 1;
	transform: rotate(-9deg) scale(1);
	opacity: 0.9;
	background: rgba(7, 8, 10, 0.55);
	pointer-events: none;
}
.akte-bild ~ .stempel { bottom: auto; top: 18px; }
.ort .stempel { bottom: auto; top: 22px; }
/* Schmal: unten ist kein Platz neben dem Knopf – dann oben, und die Zeile weicht aus */
@media (max-width: 520px) {
	.akte > .stempel { bottom: auto; top: 16px; right: 12px; font-size: 1.1rem; }
	.akte > .akte-label { padding-right: 118px; }
}
.erscheint .stempel { opacity: 0; transform: rotate(-22deg) scale(2.4); }
.erscheint.sichtbar .stempel {
	animation: stempeln 0.45s cubic-bezier(.5, 0, .75, 0) 0.5s forwards;
}
@keyframes stempeln {
	0% { opacity: 0; transform: rotate(-22deg) scale(2.4); }
	70% { opacity: 1; transform: rotate(-9deg) scale(0.94); }
	100% { opacity: 0.9; transform: rotate(-9deg) scale(1); }
}

/* Die gelbe Marke "Bild vorläufig" und die gelb hinterlegten Platzhalter sind
 * am 21.09.2026 aus der Ansicht genommen worden – die Seite soll fertig
 * aussehen. Die Klasse .platzhalter steht weiter im Markup: Sie ist das
 * Verzeichnis dessen, was noch offen ist, und
 *     grep -rn 'platzhalter' app/seiten
 * muss vor dem Veröffentlichen leer sein. Wieder sichtbar machen: die vier
 * Zeilen unten einkommentieren. */
.platzhalter {
	/* background: rgba(255, 214, 0, 0.14); */
	/* outline: 1px dashed rgba(255, 214, 0, 0.7); */
	/* padding: 0 0.3em; */
	/* color: #ffe066; */
}

/* Beim Hereinscrollen: leicht von unten einblenden */
.erscheint {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.2, .7, .2, 1);
}
.erscheint.sichtbar { opacity: 1; transform: none; }
.erscheint[data-verzoegerung="1"] { transition-delay: 0.1s; }
.erscheint[data-verzoegerung="2"] { transition-delay: 0.2s; }
.erscheint[data-verzoegerung="3"] { transition-delay: 0.3s; }

/* 5 Abschnitte ----------------------------------------------------------- */

/* 5.1 Kopfzeile */
.kopf {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	height: var(--kopf-hoehe);
	transition: background 0.35s, border-color 0.35s, backdrop-filter 0.35s;
	border-bottom: 1px solid transparent;
}
.kopf.gescrollt {
	background: rgba(7, 8, 10, 0.82);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom-color: var(--linie);
}
.kopf .huelle {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.marke {
	display: flex;
	align-items: center;
	text-decoration: none;
	line-height: 1;
	flex-shrink: 0;
}
/* Logo (assets/img/00silas_logo.svg, direkt eingebunden): In der Datei ist die
 * "00" fast schwarz – auf dem dunklen Kopf wird sie hell. */
.logo { display: block; height: 46px; width: auto; aspect-ratio: 698.43 / 212.33; overflow: visible; }
.logo .cls-1 { fill: var(--weiss); }
.logo .cls-2 { fill: #e52721; }
@media (max-width: 520px) {
	.logo { height: 38px; }
}
.marke small {
	font-family: var(--f-akte);
	font-size: 0.66rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--grau);
	margin-left: 0.8em;
}

.navi ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.8vw, 28px);
}
.navi a {
	position: relative;
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--grau);
	transition: color 0.2s;
}
.navi a:not(.knopf)::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -6px;
	height: 2px;
	background: var(--rot);
	transform: scaleX(0);
	transition: transform 0.3s;
}
.navi a:hover, .navi a.aktiv { color: var(--weiss); }
.navi a.aktiv::after, .navi a:not(.knopf):hover::after { transform: scaleX(1); }
.navi .knopf { padding: 0.7em 1.2em; color: #fff; }

/* Schalter für die Hintergrundmusik. "margin-left: auto" schluckt den freien
 * Platz der Kopfzeile – so steht die Marke links, alles Übrige rechts.
 * Der Knopf ist auf jeder Bildschirmbreite sichtbar, auch neben dem
 * Menü-Knopf; die Musik soll man überall abschalten können. */
.musik-knopf {
	margin-left: auto;
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--linie-stark);
	border-radius: var(--radius);
	background: transparent;
	color: var(--grau);
	cursor: pointer;
	transition: color 0.3s, border-color 0.3s;
}
/* "display: grid" oben schlägt das hidden-Attribut des Browsers – site.js
 * blendet den Knopf aber aus, wenn die Tondatei nicht spielbar ist. */
.musik-knopf[hidden] { display: none; }
.musik-knopf:hover { color: var(--weiss); border-color: var(--weiss); }
.musik-knopf.spielt { color: var(--rot-hell); border-color: rgba(225, 16, 30, 0.6); }
/* Drei Balken wie an einer Anzeige – sie zappeln nur, solange etwas läuft.
 * Ist die Musik aus, stehen sie still und grau: der Zustand ist ablesbar. */
.musik-balken { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.musik-balken i { width: 3px; height: 4px; background: currentColor; }
.musik-balken i:nth-child(2) { height: 8px; }
.musik-balken i:nth-child(3) { height: 5px; }
.musik-knopf.spielt .musik-balken i { animation: pegel 0.9s ease-in-out infinite alternate; }
.musik-knopf.spielt .musik-balken i:nth-child(2) { animation-delay: 0.25s; }
.musik-knopf.spielt .musik-balken i:nth-child(3) { animation-delay: 0.5s; }
@keyframes pegel { from { height: 3px; } to { height: 16px; } }
/* Das <audio> selbst hat keine Bedienelemente und darf nichts einnehmen */
audio:not([controls]) { display: none; }

.menue-knopf {
	display: none;
	width: 46px;
	height: 46px;
	border: 1px solid var(--linie-stark);
	border-radius: var(--radius);
	background: transparent;
	color: var(--weiss);
	cursor: pointer;
	position: relative;
}
.menue-knopf span,
.menue-knopf span::before,
.menue-knopf span::after {
	position: absolute;
	left: 50%;
	width: 20px;
	height: 2px;
	margin-left: -10px;
	background: currentColor;
	transition: transform 0.3s, opacity 0.3s;
}
.menue-knopf span { top: 50%; margin-top: -1px; }
.menue-knopf span::before, .menue-knopf span::after { content: ""; left: 0; margin-left: 0; }
.menue-knopf span::before { transform: translateY(-6px); }
.menue-knopf span::after { transform: translateY(6px); }
.menue-offen .menue-knopf span { background: transparent; }
.menue-offen .menue-knopf span::before { transform: rotate(45deg); background: var(--weiss); }
.menue-offen .menue-knopf span::after { transform: rotate(-45deg); background: var(--weiss); }

@media (max-width: 1080px) {
	.menue-knopf { display: block; }
	.navi {
		position: fixed;
		inset: var(--kopf-hoehe) 0 0;
		background: rgba(7, 8, 10, 0.97);
		backdrop-filter: blur(10px);
		padding: 32px var(--rand);
		transform: translateX(100%);
		transition: transform 0.4s cubic-bezier(.2, .7, .2, 1);
		overflow-y: auto;
	}
	.menue-offen .navi { transform: none; }
	.navi ul { flex-direction: column; align-items: stretch; gap: 0; }
	.navi li { border-bottom: 1px solid var(--linie); }
	.navi a:not(.knopf) {
		display: block;
		padding: 16px 0;
		font-family: var(--f-titel);
		font-size: 2rem;
		font-weight: 400;
		letter-spacing: 0.03em;
	}
	.navi a:not(.knopf)::after { display: none; }
	.navi li:last-child { border: 0; padding-top: 24px; }
	.marke small { display: none; }
}

/* 5.2 Held (Startbild) */
.held {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: center;
	padding-top: calc(var(--kopf-hoehe) + 40px);
	padding-bottom: 80px;
	overflow: hidden;
	--mx: 70%;
	--my: 45%;
	background:
		radial-gradient(600px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.07), transparent 60%),
		radial-gradient(900px circle at 85% 30%, rgba(225, 16, 30, 0.16), transparent 60%),
		var(--schwarz);
}
/* Die Züge eines Laufs, ganz blass im Hintergrund */
.held::before {
	content: "";
	position: absolute;
	width: min(120vh, 1100px);
	aspect-ratio: 1;
	right: -18%;
	top: 50%;
	translate: 0 -50%;
	border-radius: 50%;
	background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.045) 0 7deg, transparent 7deg 22.5deg);
	-webkit-mask: radial-gradient(circle, transparent 28%, #000 29%, #000 69%, transparent 70%);
	mask: radial-gradient(circle, transparent 28%, #000 29%, #000 69%, transparent 70%);
	animation: drehen 90s linear infinite;
}
@keyframes drehen { to { rotate: 360deg; } }

.held .huelle {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(24px, 4vw, 64px);
}
.held-titel {
	font-family: var(--f-titel);
	font-size: clamp(3.8rem, 10.5vw, 9.2rem);
	line-height: 0.86;
	letter-spacing: 0.01em;
	margin-bottom: 1.6rem;
}
.held-titel span { display: block; }
.held-titel span + span { color: var(--rot); }
.held-text { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: #d4d6db; max-width: 34em; }
.held-knoepfe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2rem; }

/* Jede Filiale eine eigene Zeile: die Unterrichtszeiten sind verschieden. */
.held-fakten {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 3rem 0 0;
	padding-top: 1.6rem;
	border-top: 1px solid var(--linie);
}
.held-fakten > div {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 18px;
}
.held-fakten dt {
	font-family: var(--f-akte);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--grau);
	min-width: 8.5em;
}
.held-fakten dd { margin: 0; font-family: var(--f-titel); font-size: 1.55rem; letter-spacing: 0.03em; }
/* Gross stehen die Tage - die unterscheiden die Filialen. Die Zeiten sind in
 * beiden gleich und stehen klein darunter, sonst erschlaegt der Block den Held. */
.held-fakten dd small {
	display: block;
	margin-top: 5px;
	font-family: var(--f-text);
	font-size: 0.82rem;
	letter-spacing: 0.01em;
	line-height: 1.55;
	color: var(--grau);
}

/* Das Fahrzeug mit HUD der Q-Abteilung */
.held-bild {
	position: relative;
	margin: 0;
	aspect-ratio: 1;
}
.held-bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	mix-blend-mode: lighten;
	-webkit-mask: radial-gradient(closest-side, #000 72%, transparent);
	mask: radial-gradient(closest-side, #000 72%, transparent);
	animation: auftauchen 2.2s ease 0.3s both;
}
@keyframes auftauchen {
	from { opacity: 0; filter: brightness(0.2) blur(6px); transform: scale(1.05); }
	to { opacity: 1; filter: none; transform: none; }
}
.hud { position: absolute; inset: 8%; pointer-events: none; }
.hud-ecke {
	position: absolute;
	width: 34px;
	height: 34px;
	border: 2px solid var(--rot);
	opacity: 0.9;
}
.hud-ecke:nth-child(1) { top: 0; left: 0; border-width: 2px 0 0 2px; }
.hud-ecke:nth-child(2) { top: 0; right: 0; border-width: 2px 2px 0 0; }
.hud-ecke:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.hud-ecke:nth-child(4) { bottom: 0; right: 0; border-width: 0 2px 2px 0; }
.hud-scan {
	position: absolute;
	left: 0; right: 0;
	height: 2px;
	top: 0;
	background: linear-gradient(90deg, transparent, var(--rot-hell), transparent);
	box-shadow: 0 0 18px 2px rgba(225, 16, 30, 0.6);
	animation: scannen 3.8s ease-in-out 1s infinite;
	opacity: 0;
}
@keyframes scannen {
	0% { top: 0; opacity: 0; }
	10% { opacity: 1; }
	50% { top: 100%; opacity: 1; }
	60%, 100% { top: 100%; opacity: 0; }
}
.hud-daten {
	position: absolute;
	right: -4%;
	top: 16%;
	font-family: var(--f-akte);
	font-size: 0.72rem;
	line-height: 1.8;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--grau);
	border-left: 1px solid var(--rot);
	padding-left: 10px;
	background: rgba(7, 8, 10, 0.55);
}
.hud-daten b { color: var(--weiss); font-weight: 700; }
.hud-daten .an { color: #46e08a; }
.hud-ziel {
	position: absolute;
	left: 6%;
	bottom: 12%;
	font-family: var(--f-akte);
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	color: var(--rot-hell);
	text-transform: uppercase;
	animation: blinken 1.2s steps(2) infinite;
}
@keyframes blinken { 50% { opacity: 0.25; } }

.runter {
	position: absolute;
	left: 50%;
	bottom: 26px;
	translate: -50% 0;
	width: 26px;
	height: 42px;
	border: 2px solid var(--linie-stark);
	border-radius: 14px;
}
.runter::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 8px;
	width: 4px;
	height: 8px;
	margin-left: -2px;
	border-radius: 2px;
	background: var(--rot);
	animation: runter 1.8s ease-in-out infinite;
}
@keyframes runter { 60% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

@media (max-width: 860px) {
	.held .huelle { grid-template-columns: 1fr; }
	.held-bild { max-width: 460px; width: 100%; margin-inline: auto; order: -1; margin-bottom: 0; }
	.hud-daten { right: 0; top: 6%; font-size: 0.64rem; }
	.runter { display: none; }
}

/* 5.3 Laufband (später aus dem Backend) */
.laufband {
	overflow: hidden;
	background: var(--rot);
	color: #fff;
	border-block: 1px solid var(--rot-hell);
	font-family: var(--f-akte);
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}
.laufband-spur { display: flex; width: max-content; animation: laufen 40s linear infinite; }
.laufband:hover .laufband-spur { animation-play-state: paused; }
.laufband ul { display: flex; margin: 0; padding: 0; list-style: none; }
.laufband li { padding: 12px 0; }
.laufband li::after { content: "+++"; margin: 0 1.4em; opacity: 0.7; }
@keyframes laufen { to { transform: translateX(-50%); } }

/* 5.4 Lageberichte (News) */
.lageberichte {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 22px;
}
.akte {
	position: relative;
	display: flex;
	flex-direction: column;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 40%),
		var(--nacht);
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	padding: 30px 26px 26px;
	overflow: hidden;
	transition: border-color 0.3s, transform 0.3s;
}
.akte:hover { border-color: var(--linie-stark); transform: translateY(-4px); }
/* Reiter der Aktenmappe */
.akte::before {
	content: "";
	position: absolute;
	top: 0; left: 26px;
	width: 70px;
	height: 4px;
	background: var(--rot);
}
.akte h3 {
	font-family: var(--f-titel);
	font-size: 2.1rem;
	letter-spacing: 0.02em;
	line-height: 0.95;
	margin: 0.2rem 0 1rem;
}
.akte p { color: #cfd1d6; }
.akte .knopf { align-self: flex-start; margin-top: auto; }
.akte-bild { margin: -30px -26px 22px; aspect-ratio: 16 / 9; overflow: hidden; }
.akte-bild img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); transition: filter 0.5s, transform 0.8s; }
.akte:hover .akte-bild img { filter: none; transform: scale(1.04); }

.countdown {
	display: flex;
	gap: 10px;
	margin: 0.4rem 0 1.4rem;
}
.countdown div {
	flex: 1;
	text-align: center;
	background: var(--schwarz);
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	padding: 10px 4px 8px;
}
.countdown b {
	display: block;
	font-family: var(--f-titel);
	font-size: 2.2rem;
	line-height: 1;
	color: var(--rot-hell);
	font-weight: 400;
	font-variant-numeric: tabular-nums;
}
.countdown span {
	font-family: var(--f-akte);
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--grau);
}
.countdown-fertig { display: none; }
.erreicht .countdown { display: none; }
.erreicht .countdown-fertig { display: block; }

/* 5.5 Missionen (Führerscheinklassen) */
.reiter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 32px;
	border-bottom: 1px solid var(--linie);
}
.reiter button {
	position: relative;
	background: none;
	border: 0;
	color: var(--grau);
	padding: 12px 18px 16px;
	font-family: var(--f-titel);
	font-size: 1.7rem;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: color 0.2s;
}
.reiter button::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 3px;
	background: var(--rot);
	transform: scaleX(0);
	transition: transform 0.3s;
}
.reiter button:hover { color: var(--weiss); }
.reiter button[aria-selected="true"] { color: var(--weiss); }
.reiter button[aria-selected="true"]::after { transform: scaleX(1); }

.reiter-feld[hidden] { display: none; }
@media (max-width: 520px) {
	.reiter { flex-wrap: nowrap; overflow-x: auto; gap: 0; scrollbar-width: none; }
	.reiter button { font-size: 1.4rem; padding: 10px 12px 14px; flex-shrink: 0; }
}
.reiter-feld { animation: einblenden 0.5s ease; }
@keyframes einblenden { from { opacity: 0; transform: translateY(12px); } }
.reiter-hinweis {
	font-family: var(--f-akte);
	color: var(--grau);
	border-left: 3px solid var(--rot);
	padding: 4px 0 4px 14px;
	margin-bottom: 26px;
}

.dossiers {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	grid-auto-rows: 1fr; /* alle Karten so hoch wie die höchste */
	gap: 18px;
}
.dossier {
	background: var(--nacht);
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	padding: 24px;
	display: flex;
	flex-direction: column;
	transition: border-color 0.3s;
}
.dossier:hover { border-color: rgba(225, 16, 30, 0.6); }
.dossier-kopf { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
/* Kennzeichen der Klasse: ein Schild, kein Kreis. Ein Kreis wächst mit dem
 * Text zum Oval – "BEF17 / BE" passt in keinen. Rechteckig sind sie alle
 * gleich gebaut, egal wie lang der Text ist, und das Schild passt ohnehin
 * besser zur Aktenmappe ringsum. */
.dossier-code {
	flex-shrink: 0;
	min-width: 76px;
	height: 76px;
	padding: 0 14px;
	display: grid;
	place-items: center;
	border: 2px solid var(--rot);
	border-radius: var(--radius);
	font-family: var(--f-titel);
	font-size: 1.9rem;
	line-height: 1;
	letter-spacing: 0.02em;
	white-space: nowrap;
	color: var(--weiss);
	background: linear-gradient(180deg, rgba(225, 16, 30, 0.26), rgba(225, 16, 30, 0.07));
}
/* Lange Kennzeichen ("BEF17 / BE", "A1/B196"): kleinere Schrift und weniger
 * Luft, sonst drängt das Schild die Überschrift daneben aus der Karte. */
.dossier-code.lang { font-size: 1.2rem; padding: 0 10px; }
.dossier h3 { font-family: var(--f-titel); font-size: 1.8rem; letter-spacing: 0.02em; }
.dossier-kopf .akte-label { margin: 0 0 4px; font-size: 0.7rem; }
.dossier-fakten { list-style: none; padding: 0; margin: 0 0 14px; }
.dossier-fakten li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	border-bottom: 1px dashed var(--linie);
	font-size: 0.93rem;
}
.dossier-fakten li span:first-child {
	font-family: var(--f-akte);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--grau);
	white-space: nowrap;
}
.dossier-fakten li span:last-child { text-align: right; }
.dossier details { margin-top: auto; font-size: 0.93rem; color: #cfd1d6; }
.dossier summary {
	cursor: pointer;
	list-style: none;
	font-family: var(--f-akte);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--rot-hell);
	padding: 6px 0;
}
.dossier summary::-webkit-details-marker { display: none; }
.dossier summary::before { content: "▸ "; display: inline-block; transition: transform 0.2s; }
.dossier details[open] summary::before { transform: rotate(90deg); }
.dossier details[open] summary { margin-bottom: 8px; }
.dossier details ul { margin: 0.4em 0 1em; }
.dossier details p:last-child { margin-bottom: 0; }

/* Bilder der Klasse: in der Karte gar nicht – der Hintergrund bleibt ruhig.
 * Sie stehen nur im Markup, damit site.js sie ins Fenster "Akte öffnen"
 * kopieren kann; dort werden sie zur Galerie (.akte-dialog .dossier-bilder). */
.dossier { position: relative; overflow: hidden; isolation: isolate; }
.dossier-bilder { display: none; }

/* 5.6 Q-Abteilung (Fuhrpark) */
.fuhrpark-leiste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}
.filter { display: flex; flex-wrap: wrap; gap: 8px; }
.filter button, .blaettern button {
	background: transparent;
	border: 1px solid var(--linie-stark);
	color: var(--grau);
	border-radius: 999px;
	padding: 8px 16px;
	font-family: var(--f-akte);
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.2s;
}
.filter button:hover, .blaettern button:hover { color: var(--weiss); border-color: var(--weiss); }
.filter button[aria-pressed="true"] { background: var(--rot); border-color: var(--rot); color: #fff; }
.blaettern { display: flex; gap: 8px; }
.blaettern button { width: 44px; height: 44px; padding: 0; font-size: 1.1rem; }

.fuhrpark {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(250px, 300px);
	gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 18px;
	scrollbar-width: thin;
	scrollbar-color: var(--rot) var(--graphit);
}
.fahrzeug {
	scroll-snap-align: start;
	margin: 0;
	background: var(--nacht);
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	overflow: hidden;
	position: relative;
}
.fahrzeug[hidden] { display: none; }
.fahrzeug-bild { position: relative; aspect-ratio: 1; overflow: hidden; background: #000; }
.fahrzeug-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s; }
.fahrzeug:hover .fahrzeug-bild img { transform: scale(1.06); }
/* Scan beim Überfahren */
.fahrzeug-bild::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(transparent 48%, rgba(225, 16, 30, 0.7) 50%, transparent 52%) 0 -100% / 100% 200% no-repeat,
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px);
	opacity: 0;
	transition: opacity 0.3s;
}
.fahrzeug:hover .fahrzeug-bild::before { opacity: 1; animation: fahrzeug-scan 1.2s ease-in-out; }
@keyframes fahrzeug-scan { from { background-position: 0 -100%, 0 0; } to { background-position: 0 100%, 0 0; } }
.fahrzeug figcaption { padding: 16px 18px 18px; }
.fahrzeug h3 { font-family: var(--f-titel); font-size: 1.6rem; letter-spacing: 0.02em; }
.fahrzeug .akte-label { margin: 6px 0 0; font-size: 0.72rem; }
.marke-automatik {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	background: var(--rot);
	color: #fff;
	font: 700 0.68rem/1 var(--f-akte);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 6px 8px;
	border-radius: 2px;
}

/* 5.7 Trainingszentrum (Simulator) */
.simulator {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: start;
}
/* An der Stelle des früheren Einzelbilds steht jetzt die schmale Diaschau
 * (.diaschau-schmal, Abschnitt 5.14) – sie bleibt beim Scrollen stehen. */
.simulator .diaschau-schmal { position: sticky; top: calc(var(--kopf-hoehe) + 24px); }
@media (max-width: 860px) { .simulator .diaschau-schmal { position: relative; top: 0; } }
.briefing {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px 28px;
	counter-reset: briefing;
}
.briefing li { counter-increment: briefing; }
.briefing li::before {
	content: "0" counter(briefing);
	display: block;
	font-family: var(--f-titel);
	font-size: 1.6rem;
	color: var(--rot);
	line-height: 1;
	margin-bottom: 6px;
}
.briefing h3 { font-family: var(--f-text); font-weight: 700; font-size: 1rem; line-height: 1.3; margin-bottom: 6px; }
.briefing p { color: var(--grau); font-size: 0.92rem; margin: 0; }
@media (max-width: 860px) {
	.simulator { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
	.briefing { grid-template-columns: 1fr; }
}

/* 5.8 Agenten (Team) */
.agenten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 22px;
}
.agent {
	position: relative;
	background: var(--nacht);
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	overflow: hidden;
}
.agent-bild { position: relative; aspect-ratio: 4 / 4.2; overflow: hidden; margin: 0; background: #000; }
.agent-bild img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: grayscale(1) contrast(1.05); transition: transform 0.8s; }
.agent:hover .agent-bild img { transform: scale(1.04); }
/* Zielfernrohr-Rahmen, der sich beim Überfahren schließt. Weiter Kreis und
 * eher Andeutung als Abdeckung: Das Gesicht soll erkennbar bleiben.
 * (34 %/0,85 waren es bis zum 21.09.2026 – zu eng und zu dunkel.) */
.agent-bild::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background: radial-gradient(circle at 50% 42%, transparent 0 46%, rgba(7, 8, 10, 0.6) 47%);
	opacity: 0;
	transform: scale(1.35);
	transition: opacity 0.5s, transform 0.5s;
	pointer-events: none;
}
.agent:hover .agent-bild::before { opacity: 1; transform: none; }
.agent-inhalt { padding: 22px 24px 26px; }
.agent h3 { font-family: var(--f-titel); font-size: 2.2rem; letter-spacing: 0.02em; }
.agent .rolle { color: var(--rot-hell); font-weight: 700; margin: 4px 0 14px; }
.agent ul { list-style: none; padding: 0; margin: 0; font-size: 0.9rem; color: #cfd1d6; }
.agent li { padding: 6px 0 6px 22px; border-bottom: 1px dashed var(--linie); position: relative; }
.agent li::before { content: "✓"; position: absolute; left: 0; color: var(--rot); font-weight: 700; }
/* Dritte Karte: der Simulator. Das Bild ist freigestellt (Alphakanal), darf
 * also nicht beschnitten werden: "contain" statt "cover", der dunkle Grund
 * scheint ringsum durch. Grau bleibt es wie bei den Kollegen daneben, und das
 * Zielfernrohr bekommt es auch – nur mittig statt auf Kopfhöhe. */
.agent-simulator .agent-bild::before {
	background: radial-gradient(circle at 50% 50%, transparent 0 46%, rgba(7, 8, 10, 0.6) 47%);
}
.agent-simulator .agent-bild {
	background: radial-gradient(circle at 50% 60%, var(--stahl), var(--nacht) 70%);
}
.agent-simulator .agent-bild img {
	object-fit: contain;
	object-position: center;
	padding: 8%;
}
.agent-simulator .agent-inhalt .mehr { margin: 18px 0 0; }

/* 5.9 Hauptquartier (Räume, Vorteile) */
.hq {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: start;
}
.hq-bilder {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.hq-bilder figure { margin: 0; border-radius: var(--radius); overflow: hidden; }
.hq-bilder figure:first-child { grid-column: 1 / -1; }
.hq-bilder img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; filter: saturate(0.85); }
.hq-bilder figure:first-child img { aspect-ratio: 2 / 1; }
/* Hochformate aus Waibstadt: der Ausschnitt zeigt Wegweiser bzw. Tresen statt Decke */
.hq-bilder img.hq-flur { object-position: 50% 38%; }
.hq-bilder img.hq-tresen { object-position: 50% 62%; }
/* Standort-Reiter über den Bildern: kleiner als bei den Klassen */
.reiter-klein { margin-bottom: 16px; }
.reiter-klein button { font-size: 1.35rem; padding: 8px 14px 12px; }
.hq-text p { color: #d4d6db; }

/* Ausgabeliste der Q-Abteilung: Inventarnummer links, Text rechts, keine Symbole */
.ausruestung { margin-top: clamp(48px, 7vw, 88px); }
.ausruestung ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(28px, 5vw, 72px);
	border-top: 2px solid var(--rot);
}
.ausruestung li {
	display: grid;
	grid-template-columns: 5.2em minmax(0, 1fr);
	gap: 18px;
	align-items: baseline;
	padding: 22px 0;
	border-bottom: 1px dashed var(--linie-stark);
}
.inventar {
	font-family: var(--f-akte);
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.1em;
	color: var(--rot-hell);
}
.ausruestung h3 { font-family: var(--f-titel); font-size: 1.75rem; letter-spacing: 0.03em; line-height: 1; margin-bottom: 6px; }
.ausruestung p { margin: 0; color: var(--grau); font-size: 0.95rem; }
@media (max-width: 700px) {
	.ausruestung ol { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
	.hq { grid-template-columns: 1fr; }
}

/* 5.10 Einsatzorte (Standorte mit Radar) */
.orte {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 22px;
	align-items: stretch;
}
.radar {
	position: relative;
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(circle, transparent 0 24.6%, rgba(225, 16, 30, 0.35) 25%, transparent 25.4%, transparent 49.6%, rgba(225, 16, 30, 0.35) 50%, transparent 50.4%, transparent 74.6%, rgba(225, 16, 30, 0.35) 75%, transparent 75.4%),
		linear-gradient(transparent calc(50% - 0.5px), rgba(225, 16, 30, 0.25) 50%, transparent calc(50% + 0.5px)),
		linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(225, 16, 30, 0.25) 50%, transparent calc(50% + 0.5px)),
		radial-gradient(circle, #1a0507, var(--schwarz) 70%);
	border: 1px solid rgba(225, 16, 30, 0.5);
	overflow: hidden;
	align-self: center;
}
.radar-strahl {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(from 0deg, rgba(225, 16, 30, 0.55), rgba(225, 16, 30, 0) 70deg);
	animation: drehen 4s linear infinite;
}
.radar-punkt {
	position: absolute;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border-radius: 50%;
	background: var(--rot-hell);
	box-shadow: 0 0 12px var(--rot-hell);
}
.radar-punkt::after {
	content: "";
	position: absolute;
	inset: -6px;
	border: 2px solid var(--rot-hell);
	border-radius: 50%;
	animation: pulsieren 2s ease-out infinite;
}
@keyframes pulsieren { from { transform: scale(0.4); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
.radar-punkt span {
	position: absolute;
	left: 18px;
	top: -5px;
	font-family: var(--f-akte);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}
/* Waibstadt liegt rund 18 km nördlich von Eppingen, fast auf demselben Längengrad */
.radar-punkt.eppingen { left: 50%; top: 66%; }
.radar-punkt.waibstadt { left: 52%; top: 26%; }
.radar-punkt.waibstadt::after { animation-delay: 1s; }

.ort {
	position: relative;
	padding: 28px;
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	background: var(--nacht);
}
.ort .akte-label { padding-right: 80px; }
.ort h3 { font-family: var(--f-titel); font-size: 2.6rem; letter-spacing: 0.02em; margin-bottom: 12px; }
.ort address { font-style: normal; margin-bottom: 1rem; }
.ort .zeiten { color: var(--grau); }
.ort .knopf { margin-top: 0.5rem; }
.ort-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 0.5rem; }
.ort-knoepfe .knopf { margin-top: 0; }
@media (max-width: 1000px) {
	.orte { grid-template-columns: 1fr 1fr; }
	.radar { grid-column: 1 / -1; width: min(340px, 100%); margin-inline: auto; }
}
@media (max-width: 640px) {
	.orte { grid-template-columns: 1fr; }
}

/* 5.11 Kontakt / Anmeldung */
.kontakt {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	gap: clamp(28px, 5vw, 72px);
}
.formular {
	position: relative;
	background: var(--nacht);
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	padding: clamp(22px, 4vw, 40px);
}
.formular .zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.feld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.feld label {
	font-family: var(--f-akte);
	font-size: 0.76rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--grau);
}
.feld input, .feld select, .feld textarea {
	width: 100%;
	background: var(--schwarz);
	border: 1px solid var(--linie-stark);
	border-radius: var(--radius);
	color: var(--weiss);
	font: inherit;
	font-size: 1rem;
	padding: 12px 14px;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.feld textarea { min-height: 110px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
	outline: none;
	border-color: var(--rot);
	box-shadow: 0 0 0 3px rgba(225, 16, 30, 0.25);
}
.feld-honig { position: absolute; left: -9999px; }
.formular-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.formular-fuss small { color: var(--grau); flex: 1; min-width: 200px; }
.formular-meldung {
	display: none;
	margin-top: 20px;
	padding: 16px;
	border: 1px solid #46e08a;
	border-radius: var(--radius);
	font-family: var(--f-akte);
	color: #bff5d6;
	background: rgba(70, 224, 138, 0.08);
}
.formular.gesendet .formular-meldung { display: block; }
.formular .sende-balken {
	position: absolute;
	left: 0; bottom: 0;
	height: 3px;
	width: 0;
	background: var(--rot-hell);
	box-shadow: 0 0 10px var(--rot);
}
.formular.sendet .sende-balken { animation: senden 1.4s ease forwards; }
@keyframes senden { to { width: 100%; } }

.kennnummern dl { margin: 0; }
.kennnummern dl div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--linie);
}
.kennnummern dt { font-family: var(--f-akte); color: var(--grau); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; }
.kennnummern dd { margin: 0; font-weight: 700; text-align: right; }
.kennnummern a { text-decoration: none; }
.kennnummern a:hover { color: var(--rot-hell); }
@media (max-width: 860px) {
	.kontakt { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
	.formular .zeile { grid-template-columns: 1fr; gap: 0; }
}

/* 5.12 Fuß */
.fuss {
	border-top: 1px solid var(--linie);
	padding-block: 48px;
	background: #040506;
	font-size: 0.9rem;
	color: var(--grau);
}
.fuss .huelle { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.fuss a, .fuss button { color: var(--grau); text-decoration: none; }
.fuss a:hover, .fuss button:hover { color: var(--weiss); }
.fuss button { background: none; border: 0; font: inherit; cursor: pointer; padding: 0; }

/* Akte als Fenster – bis die Klassen eigene Detailseiten haben.
 * Dann wird "Akte öffnen" ein Link, und dieser Block kann weg. */
.akte-dialog {
	width: min(720px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	padding: 0;
	border: 1px solid var(--linie-stark);
	border-top: 4px solid var(--rot);
	border-radius: var(--radius);
	background: var(--nacht);
	color: var(--weiss);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
	overflow: auto;
}
.akte-dialog::backdrop { background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(4px); }
.akte-dialog[open] { animation: akte-auf 0.4s cubic-bezier(.2, .7, .2, 1); }
@keyframes akte-auf { from { opacity: 0; transform: translateY(30px) rotate(-1deg); } }
html:has(.akte-dialog[open]) { overflow: hidden; }
.akte-dialog-rahmen { position: relative; padding: clamp(24px, 5vw, 44px) clamp(24px, 5vw, 44px) 96px; }
.akte-dialog .dossier-kopf { padding-right: 48px; margin-bottom: 22px; }
.akte-dialog .dossier-kopf h3 { font-family: var(--f-titel); font-size: clamp(2rem, 5vw, 2.8rem); letter-spacing: 0.02em; }
.akte-dialog .dossier-fakten { margin-bottom: 22px; }
.akte-dialog-inhalt p, .akte-dialog-inhalt ul { color: #d4d6db; }
.akte-dialog .stempel { bottom: 28px; right: 28px; font-size: 1.5rem; }
.akte-dialog[open] .stempel { animation: stempeln 0.45s cubic-bezier(.5, 0, .75, 0) 0.35s both; }
.akte-dialog-zu {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 42px;
	height: 42px;
	border: 1px solid var(--linie-stark);
	border-radius: var(--radius);
	background: transparent;
	color: var(--weiss);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}
.akte-dialog-zu:hover { border-color: var(--weiss); }
.akte-dialog .dossier-bilder {
	position: relative;
	inset: auto;
	z-index: auto;
	pointer-events: auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 10px;
	margin: 0 0 24px;
}
/* Die Bilder der Klassen sind fast alle quadratisch (17 von 20 sind 1000x1000).
 * Deshalb 1:1 und "cover": Das lässt die Mehrheit unangetastet und beschneidet
 * die drei querformatigen nur an den Seiten.
 * WICHTIG ist das "object-fit". Ohne es gilt "fill", und dann staucht der
 * Browser jedes Bild in den erzwungenen Rahmen – aus einem quadratischen
 * Traktor wird ein breitgezogener. */
.akte-dialog .dossier-bilder img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	opacity: 1;
	filter: none;
	transform: none;
	border: 1px solid var(--linie);
	border-radius: var(--radius);
}
/* Hat eine Klasse nur ein Bild, darf es breiter stehen – aber kein Banner
 * werden: quer gezogen wäre es wieder verzerrt. */
.akte-dialog .dossier-bilder img:only-child { grid-column: span 2; }
/* Schmal: zwei kleine Spalten, sonst schieben die Bilder den Text weit nach unten */
@media (max-width: 520px) {
	.akte-dialog .dossier-bilder { grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* 5.13 Detailseiten ------------------------------------------------------
 * Muster: simulator/index.html. Jede Detailseite liegt in einem eigenen
 * Ordner, damit die Adresse /simulator/ der alten Seite erhalten bleibt. */

.detail-kopf {
	position: relative;
	overflow: hidden;
	padding-top: calc(var(--kopf-hoehe) + clamp(40px, 7vw, 96px));
	padding-bottom: clamp(40px, 6vw, 72px);
	background:
		radial-gradient(900px circle at 85% 0%, rgba(225, 16, 30, 0.18), transparent 60%),
		var(--schwarz);
}
.detail-kopf::before {
	content: "";
	position: absolute;
	width: 760px;
	aspect-ratio: 1;
	right: -260px;
	top: -200px;
	border-radius: 50%;
	background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.04) 0 7deg, transparent 7deg 22.5deg);
	-webkit-mask: radial-gradient(circle, transparent 28%, #000 29%, #000 69%, transparent 70%);
	mask: radial-gradient(circle, transparent 28%, #000 29%, #000 69%, transparent 70%);
	animation: drehen 90s linear infinite;
}
.detail-kopf .huelle { position: relative; }

.pfad { margin-bottom: 1.8rem; }
.pfad ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0;
	padding: 0;
	font-family: var(--f-akte);
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--grau);
}
.pfad li + li::before { content: "/"; margin-right: 0.5em; color: var(--rot); }
.pfad a { text-decoration: none; }
.pfad a:hover { color: var(--weiss); }
.pfad [aria-current] { color: var(--weiss); }

.detail-titel {
	font-family: var(--f-titel);
	font-size: clamp(3.4rem, 9vw, 7.5rem);
	line-height: 0.9;
	letter-spacing: 0.01em;
}
.detail-titel em { font-style: normal; color: var(--rot); }
.detail-lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: #d4d6db; max-width: 40em; margin: 1.4rem 0 0; }

.detail-banner { margin: 0; border-block: 1px solid var(--linie); }
.detail-banner img { width: 100%; max-height: 520px; object-fit: cover; }

/* 5.14 Diaschau (beide Simulatoren) --------------------------------------
 * Ohne JavaScript stehen alle Bilder untereinander – das ist der Grundzustand
 * hier im CSS. Erst site.js setzt .bereit und zeigt eines nach dem anderen. */
.diaschau { position: relative; }
.dia {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
	margin: 0 0 clamp(32px, 5vw, 56px);
}
.diaschau.bereit .dia { margin-bottom: 0; animation: dia-auf 0.45s ease both; }
/* "display: grid" oben schlägt das hidden-Attribut des Browsers */
.dia[hidden] { display: none; }
@keyframes dia-auf { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.dia-rahmen {
	position: relative;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	overflow: hidden;
	background:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 34px),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 34px),
		radial-gradient(circle at 50% 62%, var(--stahl), var(--nacht) 72%);
}
/* Die Bilder haben verschiedene Seitenverhältnisse, eines ist freigestellt:
 * "contain" zeigt beide ganz, der Rahmen bleibt gleich groß. */
.dia-rahmen img { width: 100%; height: 100%; object-fit: contain; padding: clamp(10px, 2.5%, 26px); }
/* Zielmarken in den Ecken – dasselbe Motiv wie das HUD auf der Startseite */
.dia-rahmen::before, .dia-rahmen::after {
	content: "";
	position: absolute;
	width: 26px;
	height: 26px;
	border: 2px solid var(--rot);
	pointer-events: none;
}
.dia-rahmen::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.dia-rahmen::after { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }

.dia-text h3 { font-family: var(--f-titel); font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: 0.02em; margin: 0.2rem 0 0.8rem; }
.dia-text p:last-child { color: #d4d6db; margin: 0; }

/* Schmale Fassung (Startseite): Bild über der Bildunterschrift, eine Spalte.
 * Dieselbe Mechanik, nur ein anderer Zuschnitt. */
.diaschau-schmal .dia { grid-template-columns: 1fr; gap: 14px; }
.diaschau-schmal .dia-rahmen { aspect-ratio: 4 / 3; }
.dia-bu {
	font-family: var(--f-akte);
	font-size: 0.8rem;
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: var(--grau);
}
.dia-bu b { color: var(--weiss); letter-spacing: 0.12em; text-transform: uppercase; }
.diaschau-schmal .diaschau-bedienung { margin-top: 18px; }

.diaschau-bedienung {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: clamp(24px, 3vw, 36px);
}
.diaschau-bedienung[hidden] { display: none; }
.diaschau-bedienung > button {
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border: 1px solid var(--linie-stark);
	border-radius: var(--radius);
	background: transparent;
	color: var(--weiss);
	font-size: 1.1rem;
	cursor: pointer;
	transition: border-color 0.3s, color 0.3s;
}
.diaschau-bedienung > button:hover { border-color: var(--rot); color: var(--rot-hell); }
.diaschau-punkte { display: flex; gap: 10px; }
.diaschau-punkte button {
	width: 34px;
	height: 6px;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: var(--stahl);
	cursor: pointer;
	transition: background 0.3s, width 0.3s;
}
.diaschau-punkte button[aria-current="true"] { background: var(--rot); width: 54px; }

@media (max-width: 860px) {
	.dia { grid-template-columns: 1fr; gap: 22px; }
	.dia-rahmen { aspect-ratio: 5 / 4; }
}

.spalten {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: start;
}
.fliesstext h2 { font-family: var(--f-titel); font-size: clamp(2.2rem, 4.5vw, 3.4rem); letter-spacing: 0.02em; margin-bottom: 1.2rem; }
.fliesstext p { color: #d4d6db; }
@media (max-width: 860px) {
	.spalten { grid-template-columns: 1fr; }
}

.briefing.breit { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 36px; margin-top: 0; }
.briefing.breit h3 { font-size: 1.1rem; }
.briefing.breit p { font-size: 0.97rem; }
@media (max-width: 960px) { .briefing.breit { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .briefing.breit { grid-template-columns: 1fr; } }

/* 5.14 Formular: Fehler am Feld (vom Server oder aus site.js) */
.feld.fehler input, .feld.fehler select, .feld.fehler textarea { border-color: var(--rot-hell); }
.feld-fehler { color: var(--rot-hell); font-family: var(--f-akte); font-size: 0.8rem; }
.formular-fehler {
	margin: 20px 0 0;
	padding: 14px 16px;
	border: 1px solid var(--rot-hell);
	border-radius: var(--radius);
	background: rgba(225, 16, 30, 0.1);
	color: #ffd0d4;
	font-family: var(--f-akte);
}
.formular.gesendet .formular-fehler { display: none; }
.formular .zeile-plz { grid-template-columns: minmax(0, 0.45fr) minmax(0, 1fr); }
@media (max-width: 520px) {
	.formular .zeile-plz { grid-template-columns: 1fr; }
}
/* Captcha (ALTCHA, selbst betrieben) – an das dunkle Formular angepasst */
.formular altcha-widget {
	display: block;
	--altcha-color-base: var(--schwarz);
	--altcha-color-base-content: var(--weiss);
	--altcha-border-color: var(--linie-stark);
	--altcha-color-neutral: var(--linie-stark);
	--altcha-color-neutral-content: var(--grau);
	--altcha-checkbox-border-color: var(--grau);
	--altcha-color-primary: var(--rot);
	--altcha-color-success: #1d9a57;
	--altcha-border-radius: var(--radius);
	--altcha-max-width: 100%;
}
.feld-captcha { margin-bottom: 22px; }
.abschnitt-kopf p a { color: var(--weiss); }
.abschnitt-kopf p a:hover { color: var(--rot-hell); }

/* 5.15 Lageberichte: Datum, Titel als Link, Übersicht */
.akte-datum {
	font-family: var(--f-akte);
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--grau);
	margin: -0.4rem 0 1rem;
}
.akte h3 a { text-decoration: none; }
.akte h3 a:hover { color: var(--rot-hell); }
#aktuelles .mehr { margin: 32px 0 0; }
.leer-hinweis { font-family: var(--f-akte); color: var(--grau); }

/* 5.16 Meldung als eigene Seite */
.detail-titel-lang { font-size: clamp(2.6rem, 6vw, 5rem); }
.detail-kopf .akte-datum { margin: 1.4rem 0 0; }
.meldung-text { position: relative; max-width: 46em; }
.meldung-text p { color: #d4d6db; }
.meldung-anriss p { color: var(--weiss); font-size: clamp(1.1rem, 1.7vw, 1.3rem); }
.meldung-text .stempel { position: static; display: inline-block; margin-bottom: 1.6rem; }
.meldung-text .countdown { max-width: 440px; }
.meldung-text .held-knoepfe { margin-top: 2rem; }

/* 5.17 Impressum, Datenschutz */
.rechtstext { max-width: 46em; }
.rechtstext h2 {
	font-family: var(--f-titel);
	font-size: clamp(1.7rem, 3vw, 2.2rem);
	letter-spacing: 0.02em;
	margin: 2.4rem 0 0.8rem;
}
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext p, .rechtstext li { color: #d4d6db; }
.rechtstext a { color: var(--weiss); }
.rechtstext a:hover { color: var(--rot-hell); }

/* Video erst nach Klick (Zwei-Klick-Lösung): Vorher geht keine Anfrage an Vimeo */
.video {
	position: relative;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	overflow: hidden;
	background: #000;
}
.video > img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.4) grayscale(0.3); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-start {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 20px;
	background: none;
	border: 0;
	color: var(--weiss);
	font: inherit;
	text-align: center;
	cursor: pointer;
}
.video-start .play {
	width: 84px;
	height: 84px;
	border: 2px solid var(--rot);
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(225, 16, 30, 0.2);
	box-shadow: 0 0 30px rgba(225, 16, 30, 0.35);
	transition: transform 0.3s, background 0.3s;
}
.video-start .play::before {
	content: "";
	margin-left: 6px;
	border-left: 22px solid #fff;
	border-block: 14px solid transparent;
}
.video-start:hover .play { transform: scale(1.08); background: var(--rot); }
.video-start strong { font-family: var(--f-akte); font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; }
.video-start small { max-width: 30em; font-size: 0.78rem; line-height: 1.45; color: #c3c6cc; }
.video-quelle { margin-top: 0.7rem; font-size: 0.8rem; color: var(--grau); }

/* Datenblatt der Q-Abteilung */
.datenblatt {
	position: relative;
	padding: clamp(22px, 4vw, 36px);
	border: 1px solid var(--linie);
	border-radius: var(--radius);
	background: var(--nacht);
}
.datenblatt .stempel { bottom: auto; top: -16px; right: 22px; }
.datenblatt dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 28px; }
.datenblatt dl div { padding: 14px 0; border-bottom: 1px dashed var(--linie); }
.datenblatt dt { font-family: var(--f-akte); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grau); }
.datenblatt dd { margin: 4px 0 0; font-family: var(--f-titel); font-size: 1.7rem; letter-spacing: 0.02em; }

.aufruf {
	padding: clamp(40px, 6vw, 72px) 24px;
	text-align: center;
	border: 1px solid var(--rot);
	border-radius: var(--radius);
	background:
		radial-gradient(600px circle at 50% 0, rgba(225, 16, 30, 0.22), transparent 70%),
		var(--nacht);
}
.aufruf h2 { font-family: var(--f-titel); font-size: clamp(2.4rem, 6vw, 4.2rem); letter-spacing: 0.02em; }
.aufruf p { max-width: 34em; margin: 1rem auto 1.8rem; color: var(--grau); }
.aufruf .held-knoepfe { justify-content: center; margin: 0; }

.mehr { margin-top: 2rem; }

/* 6 Intro: Blick durch den Lauf ------------------------------------------ */
/* Ablauf in zwei Teilen:
 * 1. .laeuft (ca. 3,9 s): Punkte ziehen durchs Bild → der letzte öffnet sich
 *    zum Lauf → Schriftzug im Lauf. Dort HÄLT es an und wartet.
 * 2. .oeffnet (ca. 1,5 s, erst auf Klick): Rotblende fällt von oben → die
 *    Blende öffnet sich zur Seite.
 * Der Klick ist der Türöffner: Ohne ihn darf der Browser keinen Ton abspielen
 * (Autoplay-Regel), deshalb läuft das Intro nicht mehr von selbst durch. */

@property --iris {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

.intro {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: #000;
	overflow: hidden;
	display: none;
	-webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--iris), #000 calc(var(--iris) + 1px));
	mask: radial-gradient(circle at 50% 50%, transparent var(--iris), #000 calc(var(--iris) + 1px));
}
.intro-aktiv .intro { display: block; }
.intro { cursor: pointer; }
.intro.oeffnet { animation: iris-auf 0.8s cubic-bezier(.6, 0, .3, 1) 0.7s forwards; }
.intro.weg { opacity: 0; transition: opacity 0.35s; }
@keyframes iris-auf {
	to { --iris: 110vmax; }
}

.intro-punkte i {
	position: absolute;
	top: 50%;
	left: 0;
	width: 11vmin;
	height: 11vmin;
	margin-top: -5.5vmin;
	border-radius: 50%;
	background: #fff;
	transform: translateX(-12vmin);
	box-shadow: 0 0 30px rgba(255, 255, 255, 0.4);
}
.laeuft .intro-punkte i { animation: punkt 1.25s cubic-bezier(.45, 0, .55, 1) forwards; }
.laeuft .intro-punkte i:nth-child(2) { animation-delay: 0.22s; }
.laeuft .intro-punkte i:nth-child(3) { animation-delay: 0.44s; }
.laeuft .intro-punkte i:nth-child(4) { animation: punkt-halt 1.1s cubic-bezier(.3, 0, .3, 1) 0.66s forwards; }
@keyframes punkt { to { transform: translateX(112vw); } }
@keyframes punkt-halt {
	90% { transform: translateX(calc(50vw - 5.5vmin)); opacity: 1; }
	100% { transform: translateX(calc(50vw - 5.5vmin)); opacity: 0; }
}

.intro-lauf {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 84vmin;
	height: 84vmin;
	margin: -42vmin 0 0 -42vmin;
	border-radius: 50%;
	overflow: hidden;
	background: radial-gradient(circle, #fff 0 13%, #ececec 16%, #a2a2a2 25%, #525252 37%, #1c1c1c 51%, #060606 64%, #000 70%);
	transform: scale(0.13);
	opacity: 0;
}
.laeuft .intro-lauf {
	animation:
		lauf-auf 0.7s cubic-bezier(.2, .8, .2, 1) 1.7s forwards,
		lauf-schwanken 2.4s ease-in-out 2.4s forwards;
}
@keyframes lauf-auf { from { opacity: 1; transform: scale(0.13); } to { opacity: 1; transform: scale(1); } }
@keyframes lauf-schwanken {
	0% { transform: scale(1) translateX(0); }
	35% { transform: scale(1) translateX(-4vmin); }
	70% { transform: scale(1) translateX(3vmin); }
	100% { transform: scale(1) translateX(0); }
}
.intro-zuege {
	position: absolute;
	inset: -10%;
	background:
		repeating-radial-gradient(circle, transparent 0 2.6%, rgba(0, 0, 0, 0.28) 3%, transparent 3.5%),
		repeating-conic-gradient(from 0deg, rgba(0, 0, 0, 0.62) 0deg, rgba(0, 0, 0, 0) 22deg, rgba(255, 255, 255, 0.12) 38deg, rgba(0, 0, 0, 0.62) 60deg);
	-webkit-mask: radial-gradient(circle, transparent 12%, #000 22%, #000 56%, transparent 64%);
	mask: radial-gradient(circle, transparent 12%, #000 22%, #000 56%, transparent 64%);
}
.laeuft .intro-zuege { animation: drehen 3s cubic-bezier(.3, 0, .5, 1) 1.7s both; }

.intro-schrift {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	text-align: center;
	color: #0b0b0b;
	white-space: nowrap;
	opacity: 0;
	line-height: 1;
}
/* Logo im Intro: auf dem hellen Grund bleibt die "00" dunkel wie in der Datei */
/* Höhe so, dass das breite Logo ganz im hellen Kreis bleibt – sonst verschwindet die dunkle "00" im Schwarz */
.intro-schrift .logo { height: 16vmin; margin: 0 auto; }
.intro-schrift .logo .cls-1 { fill: #0b0b0b; }
.intro-schrift small { display: block; font-family: var(--f-akte); font-size: 2.1vmin; letter-spacing: 0.4em; text-transform: uppercase; margin-top: 2.5vmin; }
.laeuft .intro-schrift { animation: schrift 1.4s ease 2.5s forwards; }
@keyframes schrift {
	from { opacity: 0; transform: translate(-50%, -50%) scale(0.7); filter: blur(4px); }
	to { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: none; }
}

/* Die Rotblende läuft von oben herab, mit Tropfen an der Kante */
.intro-rot {
	position: absolute;
	inset: 0 0 auto;
	height: 100%;
	background: linear-gradient(180deg, var(--rot-dunkel), var(--rot) 85%);
	transform: translateY(calc(-100% - 16vh));
}
.intro-rot i {
	position: absolute;
	top: 100%;
	width: 3.2vmin;
	border-radius: 0 0 2vmin 2vmin;
	background: var(--rot);
}
.intro-rot i:nth-child(1) { left: 8%; height: 9vh; }
.intro-rot i:nth-child(2) { left: 23%; height: 4vh; }
.intro-rot i:nth-child(3) { left: 41%; height: 12vh; }
.intro-rot i:nth-child(4) { left: 58%; height: 6vh; }
.intro-rot i:nth-child(5) { left: 76%; height: 10vh; }
.intro-rot i:nth-child(6) { left: 91%; height: 5vh; }
.oeffnet .intro-rot { animation: rotblende 0.85s cubic-bezier(.5, 0, .7, .4) forwards; }
@keyframes rotblende { to { transform: translateY(0); } }

/* Die Tür steht unten mittig und ist von Anfang an da – wer das Intro nicht
 * abwarten will, klickt sofort. Beim Öffnen blendet sie weg, damit nicht
 * "Eintreten" auf der fallenden Rotblende stehen bleibt. */
.intro-tuer {
	position: absolute;
	left: 50%;
	bottom: clamp(24px, 7vh, 72px);
	z-index: 2;
	transform: translateX(-50%);
	width: min(92vw, 430px);
	text-align: center;
	transition: opacity 0.3s;
}
.oeffnet .intro-tuer { opacity: 0; pointer-events: none; }
.intro-weiter {
	background: var(--rot);
	border: 1px solid var(--rot-hell);
	color: #fff;
	border-radius: var(--radius);
	padding: 14px 30px;
	font-family: var(--f-akte);
	font-weight: 700;
	font-size: 0.92rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 10px 40px rgba(225, 16, 30, 0.45);
	animation: tuer-pochen 2.4s ease-in-out infinite;
}
.intro-weiter:hover, .intro-weiter:focus-visible { background: var(--rot-hell); animation: none; }
.intro-weiter .pfeil { margin-left: 0.5em; }
@keyframes tuer-pochen {
	0%, 100% { box-shadow: 0 10px 40px rgba(225, 16, 30, 0.45); }
	50% { box-shadow: 0 10px 40px rgba(225, 16, 30, 0.85); }
}
.intro-tuer small {
	display: block;
	margin-top: 14px;
	font-family: var(--f-akte);
	font-size: 0.72rem;
	line-height: 1.6;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.62);
}

/* 7 Bewegung aus: wer das im System eingestellt hat, bekommt keine Animationen */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.erscheint { opacity: 1; transform: none; }
	.laufband-spur { animation: none; flex-wrap: wrap; width: auto; }
	.laufband ul[aria-hidden] { display: none; }
	.hud-scan { display: none; }
}