/* bunte.studio – Platzhalterseite
   Farben aus dem Logo (Entwurf 4, Pult mit Equalizer): Vinyl-Schwarz, Faderkappe,
   LED-Grün/-Gelb/-Rot. Die Seite ist bewusst nur dunkel: Hintergrund ist eine
   Veranstaltung aus Sicht des Tontechnikers, der Inhalt liegt auf dunklem Glas. */

@font-face {
	font-family: "Michroma";
	src: url("schriften/michroma-400.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "IBM Plex Sans";
	src: url("schriften/ibm-plex-sans-var.woff2") format("woff2");
	font-weight: 100 700;
	font-display: swap;
}

:root {
	--grund: #111010;
	--flaeche: #191716;
	--linie: #2E2A27;
	--text: #ECE8E2;
	--leise: #A39B93;
	--kappe: #CFC9BF;
	--gruen: #3FA45B;
	--gelb: #E9A93A;
	--rot: #C8321F;
	color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--grund); }

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: transparent;   /* sonst deckt der Body die Szene (z-index -1) zu */
	color: var(--text);
	font: 400 17px/1.65 "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	padding-inline: clamp(16px, 5vw, 48px);
	-webkit-text-size-adjust: 100%;
}

a { color: var(--text); text-decoration-color: var(--gelb); text-underline-offset: 3px; }
a:hover { color: var(--gelb); }
a:focus-visible { outline: 2px solid var(--gelb); outline-offset: 3px; border-radius: 2px; }

.buehne {
	flex: 1;
	width: 100%;
	max-width: 1080px;
	margin-inline: auto;
	padding-block: clamp(8px, 3vh, 32px) 56px;
	display: grid;
	gap: 48px;
	align-content: start;
}

/* Hintergrund: Szene, abgedunkelt, darüber der Analyser */
.szene {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	background: var(--grund);
}
/* Bild und Analyser liegen in einer gemeinsamen Ebene, damit der Analyser beim
   Parallax mitwandert. Ohne Skript (oder mit "Bewegung reduzieren") steht die
   Ebene unten bündig und deckt den Bildschirm ab. Das Skript setzt dann Größe
   und Lage selbst (Klasse .parallax). */
.szene-bild {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: max(100vw, 178.4vh);
	height: max(100vh, 56.04vw);
	transform: translateX(-50%);
	will-change: transform;
}
.szene-bild.parallax { left: 0; bottom: auto; top: 0; }
.szene-bild img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* Oberkante weich in den dunklen Grund auslaufen lassen */
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%);
	mask-image: linear-gradient(180deg, transparent 0, #000 14%);
}
.szene::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 9, 9, 0.5) 0%, rgba(10, 9, 9, 0.12) 45%, rgba(10, 9, 9, 0.18) 100%);
	pointer-events: none;
}
/* Die Hinterkante des Pults liegt bei 47,3 % der Bildhöhe von unten
   (foto.py: KANTE = 0,527 von oben) - dort sitzt der Analyser auf.
   Oben im Canvas bleibt Platz für das Leuchten der hohen Balken. */
.analyser {
	position: absolute;
	left: 7%;
	bottom: 47.3%;
	width: 86%;
	height: 24%;
	opacity: 0.4;
	mix-blend-mode: screen;
}

/* Dunkles Glas: heller Lichtrand oben, dunkler unten, sanfter Verlauf in der
   Scheibe. Der Reflex liegt hinter dem Text (isolation + z-index -1). */
.glas {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: linear-gradient(160deg, rgba(34, 31, 28, 0.62) 0%, rgba(14, 13, 12, 0.56) 45%, rgba(10, 9, 9, 0.64) 100%);
	-webkit-backdrop-filter: blur(20px) saturate(1.35);
	backdrop-filter: blur(20px) saturate(1.35);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 12px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.14),
		inset 0 -1px 0 rgba(0, 0, 0, 0.35),
		0 18px 50px rgba(0, 0, 0, 0.38);
}
.glas::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0, transparent 38%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.glas { background: rgba(14, 13, 12, 0.9); }
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Hero: das große Logo ohne Glas ganz oben im dunklen Bereich, die Punkte zentriert darunter */
.kopf-oben-start {
	flex-direction: column;
	justify-content: flex-start;
	gap: clamp(18px, 3vh, 30px);
	padding-block: clamp(20px, 5vh, 56px) clamp(28px, 7vh, 72px);
}
.held-marke { width: 100%; max-width: 1080px; }
.karte { display: grid; gap: 16px; padding: clamp(24px, 4.5vw, 44px); }
.karte p { margin: 0; color: var(--leise); max-width: 58ch; }

/* Kippschalter zum Anhalten des Analysers - senkrecht und in einer Flucht mit dem
   Seitenregler: Beschriftung EQ, darunter die Betriebslampe, darunter der Hebel.
   Die Breite entspricht der Faderbahn, dadurch stehen beide auf derselben Achse. */
.pegel-knopf {
	position: fixed;
	right: clamp(18px, 2.5vw, 40px);
	bottom: clamp(14px, 4vh, 40px);
	z-index: 4;
	width: 36px;
	display: grid;
	justify-items: center;
	gap: 9px;
	padding: 10px 0 12px;
	border-radius: 12px;
	color: var(--text);
	font: 400 10px/1 "Michroma", sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}
.pegel-knopf:focus-visible { outline: 2px solid var(--gelb); outline-offset: 3px; }
.pegel-text { color: var(--leise); }
.pegel-knopf:hover .pegel-text { color: var(--gelb); }
.pegel-lampe {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--gruen);
	box-shadow: 0 0 10px rgba(63, 164, 91, 0.8);
	transition: background 0.15s, box-shadow 0.15s;
}
.pegel-knopf[aria-checked="false"] .pegel-lampe { background: #3A3531; box-shadow: none; }
.schalter {
	display: grid;
	justify-items: center;
	gap: 2px;
	font-size: 7.5px;
	letter-spacing: 0.12em;
	color: var(--leise);
}
.kippschalter { display: block; overflow: visible; }
/* Kippen: der Hebel klappt um die Mutter herum nach unten. Von vorn gesehen
   wird er dabei kurz ganz kurz (zeigt auf den Betrachter) und wächst dann nach unten. */
.kipp-hebel {
	transform-box: view-box;
	transform-origin: 20px 28px;
	transition: transform 0.16s cubic-bezier(0.5, 1.6, 0.5, 1);
}
.pegel-knopf[aria-checked="false"] .kipp-hebel { transform: scaleY(-1); }
.pegel-knopf[aria-checked="true"] .schalter-an,
.pegel-knopf[aria-checked="false"] .schalter-aus { color: var(--text); }
@media (prefers-reduced-motion: reduce) {
	.kipp-hebel, .pegel-lampe { transition: none; }
}

/* Logo */
.marke { display: block; color: var(--text); text-decoration: none; }
.marke svg { display: block; width: 100%; height: auto; }
.marke:focus-visible { outline-offset: 8px; }

/* Einleitung */
.einleitung { display: grid; gap: 16px; max-width: 58ch; }
.einleitung p { margin: 0; color: var(--leise); }

h1 {
	margin: 0;
	font: 600 clamp(26px, 4.2vw, 36px)/1.2 "IBM Plex Sans", system-ui, sans-serif;
	letter-spacing: -0.005em;
	text-wrap: balance;
	color: var(--text);
}

/* Signallampe: gelb = in Arbeit, rot = kein Signal (404) */
.status {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font: 400 11px/1 "Michroma", sans-serif;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.status i {
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--gelb);
	box-shadow: 0 0 0 3px rgba(233, 169, 58, 0.16), 0 0 14px rgba(233, 169, 58, 0.55);
}
.status-rot i {
	background: var(--rot);
	box-shadow: 0 0 0 3px rgba(200, 50, 31, 0.18), 0 0 14px rgba(200, 50, 31, 0.6);
}

/* Kontakt als Kanalzüge: Beschriftung oben wie auf dem Pult */
.kanaele {
	margin: 0;
	display: grid;
}
.kanal {
	display: grid;
	gap: 10px;
	align-content: start;
	padding: 18px 22px 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.kanal:first-child { border-top: 0; }
.kanal dt {
	font: 400 10.5px/1 "Michroma", sans-serif;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--leise);
}
.kanal dd { margin: 0; font-size: 17px; overflow-wrap: anywhere; }

@media (min-width: 720px) {
	.kanaele { grid-template-columns: repeat(3, 1fr); }
	.kanal { border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.08); }
	.kanal:first-child { border-left: 0; }
}

/* Impressum und Datenschutz */
.text { gap: 20px; }
.text article { padding: clamp(24px, 4.5vw, 44px); }
.text article > * { max-width: 70ch; }
.text h1 { font-size: clamp(26px, 3.6vw, 32px); margin-bottom: 8px; }
.text h2 {
	margin: 36px 0 10px;
	font: 400 11.5px/1.3 "Michroma", sans-serif;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--kappe);
}
.text p { margin: 0 0 14px; }
.rechtsgrund { color: var(--leise); font-size: 15px; }

.angaben {
	margin: 28px 0 0;
	display: grid;
	grid-template-columns: minmax(0, 12em) minmax(0, 1fr);
	gap: 14px 24px;
}
.angaben dt { color: var(--leise); }
.angaben dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
	.angaben { grid-template-columns: 1fr; gap: 2px; }
	.angaben dd { margin-bottom: 14px; }
}

/* Noch offene Angaben – nur in der Vorschau sichtbar, der Live-Bau lässt sie nicht zu */
.luecke {
	background: rgba(233, 169, 58, 0.14);
	color: var(--gelb);
	outline: 1px dashed var(--gelb);
	outline-offset: 1px;
	padding: 0 4px;
	border-radius: 2px;
}

/* Fußzeile: breiter, mit dem ganzen Logo */
.fuss {
	width: 100%;
	max-width: 1080px;
	margin: 24px auto 28px;
	padding: clamp(24px, 4vw, 44px);
	display: grid;
	gap: 28px;
	font-size: 14px;
	color: var(--leise);
}
.fuss-marke { max-width: 620px; }
.fuss-zeile {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.fuss nav { display: flex; gap: 22px; }
.fuss a { color: var(--leise); }
.fuss a:hover { color: var(--gelb); }

.pegel-knopf[hidden] { display: none; }

/* Auf dem Handy Platz lassen, damit der feste Pegel-Knopf die Fußzeile nicht verdeckt */
@media (max-width: 720px) {
	.fuss { margin-bottom: 80px; }
}

/* Platzhalter-Kästen (nur Vorschau) */
.platzhalter { padding: clamp(24px, 4.5vw, 40px); display: grid; gap: 12px; min-height: 34vh; align-content: start; }
.platzhalter h2 { margin: 0; font: 600 clamp(22px, 3vw, 28px)/1.25 "IBM Plex Sans", system-ui, sans-serif; }
.platzhalter p { margin: 0; color: var(--leise); max-width: 58ch; }
.status-aus i { background: #6B645D; box-shadow: none; }

/* Kopf oben: ohne Glas, scrollt mit dem Inhalt weg. */
.kopf-oben {
	width: 100%;
	max-width: 1080px;
	margin-inline: auto;
	padding-block: 22px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.kopf-oben nav, .kopfleiste nav { display: flex; gap: clamp(16px, 3vw, 30px); font-size: 15px; }
.kopf-oben nav a, .kopfleiste nav a { color: var(--leise); text-decoration: none; }
.kopf-oben nav a:hover, .kopfleiste nav a:hover { color: var(--gelb); }
.kopf-marke {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--text);
	text-decoration: none;
	font: 400 13px/1 "Michroma", sans-serif;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}
.kopf-zeichen { width: 34px; height: 34px; flex: none; }

/* Kopfleiste mit Glas: erst wenn der obere Kopf aus dem Bild ist, und nur beim
   Hinaufscrollen (pegel.js setzt .da). Mit Tastatur immer erreichbar. */
.kopfleiste {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 5;
	padding: 12px clamp(16px, 5vw, 48px) 0;
	transform: translateY(-130%);
	transition: transform 0.35s ease;
}
.kopfleiste.da, .kopfleiste:focus-within { transform: none; }
.kopfleiste-innen {
	max-width: 1080px;
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 18px 9px 10px;
	border-radius: 12px;
}
#kontakt { scroll-margin-top: 96px; }
@media (max-width: 480px) {
	.kopf-marke span { font-size: 11px; letter-spacing: 0.16em; }
}

/* Sprunglink für Tastatur und Screenreader */
.sprung {
	position: fixed;
	left: 12px;
	top: -80px;
	z-index: 10;
	padding: 10px 16px;
	border-radius: 8px;
	background: var(--gelb);
	color: #111010;
	font-weight: 600;
	text-decoration: none;
}
.sprung:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
	.kopfleiste { transition: none; }
}

/* Punkte unter dem Hero-Logo: liegen über den hellen Bühnenlichtern, daher heller,
   in der Gerätefront-Schrift und mit dunklem Schein für die Lesbarkeit */
.kopf-oben-start nav { gap: clamp(22px, 4vw, 44px); }
.kopf-oben-start nav a {
	color: var(--text);
	font: 400 11.5px/1 "Michroma", sans-serif;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 16px rgba(0, 0, 0, 0.85);
}
.kopf-oben-start nav a:hover { color: var(--gelb); }

/* ------------------------------------------------------------------------
   Scroll-Effekte (pegel.js). Ohne Skript oder mit "Bewegung reduzieren"
   greift nichts davon: die Karten stehen einfach da, die LED-Linien leuchten ruhig. */

/* 2. Signal an: LED-Linie an der Oberkante der Inhaltskarten */
.karte::before, .kanaele::before, .platzhalter::before, .geschenk-karte::before, .text article::before, .fuss::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(63, 164, 91, 0.2), var(--gruen) 12%, var(--gruen) 88%, rgba(63, 164, 91, 0.2));
	box-shadow: 0 0 10px rgba(63, 164, 91, 0.75), 0 0 2px rgba(63, 164, 91, 0.9);
	opacity: 0.5;
	transform-origin: 0 50%;
}
.bereit .karte::before, .bereit .kanaele::before, .bereit .platzhalter::before, .bereit .geschenk-karte::before,
.bereit .text article::before, .bereit .fuss::before { transform: scaleX(0); }
.bereit .signal-an::before { animation: signal-an 1.3s ease-out forwards; }
@keyframes signal-an {
	0% { transform: scaleX(0); opacity: 1; }
	65% { transform: scaleX(1); opacity: 1; }
	100% { transform: scaleX(1); opacity: 0.5; }
}

/* 1. Einfaden: Karten unterhalb des Bildschirms warten unsichtbar und gleiten
   beim Hereinscrollen hoch - wie ein Fader, der hochgezogen wird. Die drei
   Kontaktfelder kommen nacheinander, wie Kanalzüge. */
.bereit .karte, .bereit .kanaele, .bereit .platzhalter, .bereit .geschenk-karte, .bereit .text article, .bereit .fuss,
.bereit .kanal {
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.bereit .warten { opacity: 0; transform: translateY(32px); }
.bereit .kanaele.warten { opacity: 1; transform: none; }
.bereit .kanaele.warten .kanal { opacity: 0; transform: translateY(24px); }
.bereit .kanal:nth-child(2) { transition-delay: 0.12s; }
.bereit .kanal:nth-child(3) { transition-delay: 0.24s; }

/* 4. Scroll-Fader mit Pegelkette am rechten Rand - nur wo neben den Karten Platz ist */
.scrollpult {
	position: fixed;
	right: clamp(18px, 2.5vw, 40px);
	top: 50%;
	z-index: 4;
	height: min(52vh, 440px);
	transform: translateY(-50%);
	display: flex;
	gap: 10px;
	align-items: stretch;
}
.scrollpult[hidden] { display: none; }
@media (max-width: 1239px) {
	.scrollpult { display: none; }
}
.scrollpult-kette {
	display: flex;
	flex-direction: column-reverse;   /* erste LED unten: gruen unten, rot oben */
	gap: 3px;
	padding-block: 11px;
}
.scrollpult-kette i {
	flex: 1;
	width: 6px;
	border-radius: 1px;
	background: rgba(236, 232, 226, 0.08);
}
.scrollpult-kette i.an { background: var(--gruen); box-shadow: 0 0 6px rgba(63, 164, 91, 0.7); }
.scrollpult-kette i.an.gelb { background: var(--gelb); box-shadow: 0 0 6px rgba(233, 169, 58, 0.7); }
.scrollpult-kette i.an.rot { background: var(--rot); box-shadow: 0 0 7px rgba(200, 50, 31, 0.8); }
.scrollpult-bahn {
	position: relative;
	width: 36px;
	cursor: pointer;
	touch-action: none;
	/* Skala links, Schlitz in der Mitte */
	background:
		linear-gradient(90deg, transparent 16px, #030303 16px, #030303 20px, transparent 20px) no-repeat,
		repeating-linear-gradient(180deg, rgba(236, 232, 226, 0.28) 0 1px, transparent 1px 22px) 4px 11px / 8px calc(100% - 22px) no-repeat;
}
.scrollpult-kappe {
	position: absolute;
	left: 3px;
	top: 0;
	width: 30px;
	height: 22px;
	border-radius: 4px;
	cursor: grab;
	background: linear-gradient(180deg, #E4DED4 0%, #CFC9BF 45%, #A8A298 100%);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.scrollpult-kappe::after {
	content: "";
	position: absolute;
	left: 4px;
	right: 4px;
	top: 10px;
	height: 2px;
	background: #161413;
}
.scrollpult-kappe:active { cursor: grabbing; }
.scrollpult-kappe:focus-visible { outline: 2px solid var(--gelb); outline-offset: 3px; }

/* ------------------------------------------------------------------------
   Geschenk-Modus (bauen.py --geschenk): Die Seite liegt verpackt unter
   Geschenkpapier, rotes Band längs und quer, Schleife in der Mitte. */
html.verpackt, html.verpackt body { overflow: hidden; }

.geschenk {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: var(--text);
	font: inherit;
	--band: clamp(46px, 6vw, 76px);
}
.geschenk:focus-visible { outline: none; }
.geschenk:focus-visible .anhaenger { outline: 2px solid var(--gelb); outline-offset: 4px; }

.geschenk-papier {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 50.2%;
	background: url("geschenkpapier.svg") 0 0 / 180px 180px repeat, #1D1A18;
	transition: transform 0.95s cubic-bezier(0.7, 0, 0.25, 1);
}
.geschenk-links { left: 0; box-shadow: inset -30px 0 40px -30px rgba(0, 0, 0, 0.6); }
/* Muster läuft über die Mitte durch */
.geschenk-rechts { right: 0; background-position: calc(-50vw) 0, 0 0; box-shadow: inset 30px 0 40px -30px rgba(0, 0, 0, 0.6); }
.geschenk-papier::after {   /* Licht auf dem Papier */
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 30%, rgba(255, 240, 220, 0.08), transparent 60%),
		linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.35));
}

/* Rotes Satinband */
.band { position: absolute; display: block; z-index: 1; }
.band-hoch {
	left: 50%;
	width: var(--band);
	height: 50%;
	margin-left: calc(var(--band) / -2);
	background: linear-gradient(90deg, #6E1A10 0%, #C8321F 22%, #E7644C 46%, #C8321F 70%, #6E1A10 100%);
	box-shadow: 0 0 18px rgba(0, 0, 0, 0.45);
	transition: transform 0.5s cubic-bezier(0.6, 0, 0.3, 1) 0.25s;
}
.band-oben { top: 0; }
.band-unten { bottom: 0; }
.band-quer {
	left: 0;
	right: 0;
	top: 50%;
	height: var(--band);
	margin-top: calc(var(--band) / -2);
	background: linear-gradient(180deg, #6E1A10 0%, #C8321F 22%, #E7644C 46%, #C8321F 70%, #6E1A10 100%);
	box-shadow: 0 0 18px rgba(0, 0, 0, 0.45);
}

/* Schleife und Anhänger in der Mitte */
.geschenk-mitte {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 2;
	display: block;
	width: clamp(220px, 30vw, 360px);
	transform: translate(-50%, -42%);
	transition: transform 0.45s cubic-bezier(0.5, -0.4, 0.6, 1), opacity 0.35s ease 0.1s;
}
.schleife { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55)); }
.anhaenger {
	position: absolute;
	left: 62%;
	top: 70%;
	display: grid;
	gap: 5px;
	padding: 14px 18px 14px 26px;
	background: #EFE6D3;
	color: #161413;
	border-radius: 4px 12px 12px 4px;
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
	transform: rotate(-7deg);
	transform-origin: 0 50%;
	text-align: left;
	white-space: nowrap;
}
.anhaenger::before {   /* Loch mit Faden */
	content: "";
	position: absolute;
	left: 9px;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-radius: 50%;
	background: #1D1A18;
	box-shadow: inset 0 0 0 1.5px #B9AE97;
}
.anhaenger-fuer { font: 400 13px/1 "Michroma", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; }
.anhaenger-text { font: 400 13px/1.2 "IBM Plex Sans", system-ui, sans-serif; color: #4A433D; }

.geschenk-hinweis {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(24px, 7vh, 64px);
	z-index: 2;
	display: block;
	text-align: center;
	font: 400 11px/1 "Michroma", sans-serif;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--text);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
	animation: hinweis 2.4s ease-in-out infinite;
	transition: opacity 0.3s;
}
@keyframes hinweis { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

/* Öffnen: Schleife geht auf, Band fällt nach oben und unten weg, Papier gleitet zur Seite */
.geschenk.oeffnet { cursor: default; pointer-events: none; }
.geschenk.oeffnet .geschenk-mitte { transform: translate(-50%, -42%) scale(0.2) rotate(-25deg); opacity: 0; }
.geschenk.oeffnet .geschenk-hinweis { opacity: 0; animation: none; }
.geschenk.oeffnet .band-oben { transform: translateY(-102%); }
.geschenk.oeffnet .band-unten { transform: translateY(102%); }
.geschenk.oeffnet .geschenk-links { transform: translateX(-102%); transition-delay: 0.55s; }
.geschenk.oeffnet .geschenk-rechts { transform: translateX(102%); transition-delay: 0.55s; }

@media (prefers-reduced-motion: reduce) {
	.geschenk-hinweis { animation: none; opacity: 1; }
	.geschenk, .geschenk * { transition: opacity 0.3s !important; }
	.geschenk.oeffnet { opacity: 0; }
}

/* Konfetti beim Öffnen */
.konfetti { position: fixed; inset: 0; z-index: 60; pointer-events: none; }

/* Inhalt der Geschenkseite: jedes Geschenk auf einem eigenen Kanal */
.gruss { gap: 14px; }
.status-geschenk i { background: var(--rot); box-shadow: 0 0 0 3px rgba(200, 50, 31, 0.18), 0 0 14px rgba(200, 50, 31, 0.6); }
.geschenk-karte { display: grid; gap: 14px; padding: clamp(24px, 4.5vw, 44px); }
.geschenk-karte > p, .geschenk-karte > dl, .geschenk-karte > details { margin: 0; max-width: 70ch; }
.geschenk-karte > p { color: var(--leise); }
.geschenk-karte h2 { margin: 0; font: 600 clamp(22px, 3vw, 30px)/1.2 "IBM Plex Sans", system-ui, sans-serif; text-wrap: balance; }
.kanal-nummer {
	margin: 0;
	font: 400 10.5px/1 "Michroma", sans-serif;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gelb) !important;
}
.fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px 24px; }
.fakten dt { font: 400 10px/1.4 "Michroma", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--leise); }
.fakten dd { margin: 4px 0 0; }
.logo-proben { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.probe { margin: 0; padding: 28px 24px; border-radius: 8px; }
.probe img { display: block; width: 100%; height: auto; }
.probe-hell { background: #FAF9F7; }
.probe-dunkel { background: #111010; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.downloads { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 8px 24px; }
.downloads li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.downloads span { color: var(--leise); font: 400 10px/1.8 "Michroma", sans-serif; letter-spacing: 0.1em; }
.signatur-proben { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 12px; align-items: start; }
.signatur-probe { margin: 0; background: #fff; border-radius: 8px; padding: 14px 20px 18px; }
.signatur-probe figcaption { margin-bottom: 12px; font: 400 9.5px/1 "Michroma", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: #8A837C; }
.signatur-probe iframe { display: block; width: 100%; height: 200px; border: 0; background: #fff; }
.signatur-probe-theater iframe { height: 300px; }
.anleitung summary { cursor: pointer; color: var(--text); }
.anleitung ol { margin: 10px 0 0; padding-left: 1.3em; color: var(--leise); display: grid; gap: 6px; }
.knopf {
	display: inline-block;
	padding: 10px 20px;
	border-radius: 999px;
	background: rgba(236, 232, 226, 0.1);
	border: 1px solid rgba(236, 232, 226, 0.2);
	text-decoration: none;
	font: 400 11px/1 "Michroma", sans-serif;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* Nach dem Auspacken springt der Fokus auf den Inhalt - ohne Rahmen um die ganze Seite */
#inhalt:focus { outline: none; }

/* Unterschrift unter dem Glückwunsch */
.unterschrift { color: var(--kappe) !important; font-style: italic; }

/* Coming soon: das Bühnenbild vollflächig unscharf, darüber ein einzelner Kasten */
.seite-bald .szene img { filter: blur(26px); transform: scale(1.14); }
.seite-bald .szene::after { background: linear-gradient(180deg, rgba(10, 9, 9, 0.55), rgba(10, 9, 9, 0.35)); }
.bald {
	min-height: calc(100vh - 190px);
	align-content: center;
	justify-items: center;
	padding-block: clamp(32px, 8vh, 80px);
}
.bald-karte {
	max-width: 640px;
	justify-items: center;
	text-align: center;
	gap: 22px;
	padding: clamp(28px, 5vw, 52px);
}
.bald-karte .marke { width: 100%; max-width: 430px; }
.bald-karte h1 {
	font: 400 clamp(19px, 3.2vw, 28px)/1.25 "Michroma", sans-serif;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.bald-karte p { margin: 0; }

/* Warteseite: keine Fußzeile, nur die zwei Pflichtlinks frei am unteren Rand.
   Die Seite passt damit ohne Scrollen auf den Bildschirm. */
.seite-bald { overflow: hidden; }
.seite-bald .buehne { min-height: 100svh; padding-block: clamp(24px, 6vh, 64px) clamp(64px, 12vh, 110px); }
.rechtslinks {
	position: fixed;
	left: 0;
	right: 0;
	bottom: clamp(18px, 4vh, 40px);
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 28px;
	font-size: 13px;
}
.rechtslinks a {
	color: var(--leise);
	text-decoration: none;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}
.rechtslinks a:hover { color: var(--gelb); }