/* Lumoria im Browser: Spielfläche füllt den Bildschirm; davor die Kontoseite im Stil der Spiel-Textboxen.
   Hochkant am Handy liegt das Spielbild in einer Konsole mit wechselbaren Looks (Abschnitt „Konsolen-Looks“). */
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: #101018;
	color: #f8f8f8;
	overflow: hidden;
	font-family: -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
	-webkit-text-size-adjust: 100%;
}

#canvas {
	/* fest wie Steuerung und Konsolen-Hülle: ein absolut gesetztes Spielbild zählt zur Seitenbreite. Beim Zurückdrehen
	   auf hochkant stand es noch quer (852 breit im 393 breiten Fenster); Safari zoomt eine zu breite Seite heraus und
	   bleibt so (Lukas 18.10.: „hochkant geht danach nicht mehr richtig“, tools/web_drehen_test.py) */
	position: fixed;
	z-index: 1; /* über der Konsolen-Hülle (#konsole) */
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	image-rendering: pixelated;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

#canvas:focus {
	outline: none;
}

#konto, #laden {
	position: fixed;
	inset: 0;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
		max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
	background: radial-gradient(circle at 50% 30%, #2a3a68 0%, #1c2440 45%, #101018 100%);
	overflow-y: auto;
	box-sizing: border-box;
}

#konto[hidden], #laden[hidden], #feld-wiederholen[hidden], #info[hidden], #nochmal[hidden], #vergessen[hidden],
#laden-nochmal[hidden], #laden-technik[hidden], #laden-balken[hidden] {
	display: none;
}

/* Kontoseite: zentriert, solange Platz ist, sonst oben anfangen und scrollen. Mit „justify-content: center“ ragte im
   flachen Querformat („Konto erstellen“) der obere Teil mit den Reitern über den Rand und war nicht erreichbar. */
#konto {
	justify-content: flex-start;
}

#konto > h1 {
	margin-top: auto;
}

#konto > .tipp {
	margin-bottom: auto;
}

h1 {
	margin: 0;
	font-size: 2.2rem;
	letter-spacing: 0.25em;
	color: #f8d870;
	text-shadow: 3px 3px 0 #c08820, 6px 6px 0 #303c58;
}

.unter {
	margin: 0.3rem 0 1.2rem;
	color: #c8d4f0;
}

.reiter {
	display: flex;
	gap: 0.4rem;
	width: 100%;
	max-width: 22rem;
}

.reiter button {
	flex: 1;
	padding: 0.6rem;
	border: 3px solid #303c58;
	border-bottom: none;
	border-radius: 0.6rem 0.6rem 0 0;
	background: #2a3450;
	color: #c8d4f0;
	font-size: 1rem;
	font-weight: 600;
	touch-action: manipulation;
}

.reiter button.aktiv {
	background: #f8f8f8;
	color: #383840;
}

form {
	width: 100%;
	max-width: 22rem;
	box-sizing: border-box;
	padding: 1rem;
	background: #f8f8f8;
	color: #383840;
	border: 3px solid #303c58;
	border-radius: 0 0 0.6rem 0.6rem;
	box-shadow: inset 0 0 0 3px #e85838;
}

label {
	display: block;
	margin: 0.5rem 0 0.2rem;
	font-weight: 600;
}

input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.6rem;
	font-size: 16px; /* iOS zoomt sonst beim Antippen hinein */
	border: 2px solid #8890a8;
	border-radius: 0.4rem;
	background: #fff;
	color: #202028;
}

input:focus {
	outline: none;
	border-color: #e85838;
}

.leise {
	font-weight: 400;
	color: #6a7088;
	font-size: 0.85em;
}

.hinweis {
	margin: 0.5rem 0 0;
	font-size: 0.85rem;
	color: #5a6078;
}

#meldung {
	min-height: 1.2em;
	margin: 0.6rem 0;
	color: #c03028;
	font-weight: 600;
}

#los {
	width: 100%;
	padding: 0.75rem;
	font-size: 1.05rem;
	font-weight: 700;
	color: #fff;
	background: #e85838;
	border: 3px solid #a83020;
	border-radius: 0.5rem;
	touch-action: manipulation;
}

#los:disabled {
	opacity: 0.6;
}

.tipp {
	max-width: 22rem;
	margin: 1rem 0 0;
	font-size: 0.85rem;
	color: #a8b4d0;
	text-align: center;
}

#laden-text {
	margin: 0 0 0.8rem;
	color: #c8d4f0;
}

#laden-balken {
	width: min(18rem, 70vw);
}

.info {
	margin: 0 0 0.6rem;
	padding: 0.5rem 0.6rem;
	border-radius: 0.4rem;
	background: #e4ecfa;
	color: #2a3a68;
	font-size: 0.9rem;
	font-weight: 600;
}

#nochmal, #laden-nochmal {
	display: block;
	width: 100%;
	margin: 0 0 0.6rem;
	padding: 0.6rem;
	font-size: 1rem;
	font-weight: 700;
	color: #383840;
	background: #f8d870;
	border: 3px solid #c08820;
	border-radius: 0.5rem;
	touch-action: manipulation;
}

#laden-nochmal {
	width: min(18rem, 70vw);
	margin: 0.9rem 0 0;
}

.technik {
	margin: 0.6rem 0 0;
	max-width: min(22rem, 85vw);
	font-size: 0.75rem;
	color: #8890a8;
	text-align: center;
	overflow-wrap: anywhere;
}

.vergessen {
	margin: 0.7rem 0 0;
	font-size: 0.85rem;
	color: #5a6078;
	text-align: center;
}

/* ---------------------------------------------------------------- Touch-Steuerung */
#steuerung {
	position: fixed;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

#steuerung[hidden] {
	display: none;
}

#kreuz, .knopf, #stick-zone {
	position: absolute;
	pointer-events: auto;
	touch-action: none;
}

/* Sichere Ränder (Kamera-Aussparung, Home-Balken) messbar machen */
#sicher {
	position: fixed;
	visibility: hidden;
	pointer-events: none;
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.knopf {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #fff;
	font-weight: 800;
}

.knopf .symbol {
	display: none;
}

/* ---- Querformat: modern, halbdurchsichtig über dem Spielbild ---- */
#steuerung.quer #kreuz {
	display: none;
}

#steuerung.quer .knopf {
	font-size: 1.45rem;
	background: rgba(16, 20, 36, 0.32);
	border: 2px solid rgba(255, 255, 255, 0.55);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
	transition: transform 60ms ease-out, background-color 60ms ease-out;
}

#steuerung.quer #knopf-b {
	font-size: 1.2rem;
}

#steuerung.quer .knopf.an {
	transform: scale(0.92);
	background: rgba(248, 216, 112, 0.5);
	border-color: rgba(255, 255, 255, 0.85);
}

#steuerung.quer #knopf-start .text {
	display: none;
}

#steuerung.quer #knopf-start .symbol {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

#knopf-ton svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: #fff;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

#knopf-ton .lautsprecher {
	fill: #fff;
}

#knopf-ton .kreuz, #knopf-ton.aus .wellen {
	display: none;
}

#knopf-ton.aus .kreuz {
	display: inline;
}

/* SELECT quer: Kartensymbol statt Schrift (wie ☰ bei START) */
#steuerung.quer #knopf-select .text {
	display: none;
}

#steuerung.quer #knopf-select .symbol {
	display: flex;
}

#knopf-select svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: #fff;
	stroke-width: 2;
	stroke-linejoin: round;
}

#knopf-start .symbol i {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 1px;
	background: #fff;
}

#stick {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	background: rgba(16, 20, 36, 0.18);
	border: 2px solid rgba(255, 255, 255, 0.28);
	opacity: 0.55;
	transition: opacity 120ms ease-out;
}

#stick.aktiv {
	opacity: 1;
	background: rgba(16, 20, 36, 0.28);
	border-color: rgba(255, 255, 255, 0.5);
}

#stick-knauf {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 46%;
	height: 46%;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	background: rgba(255, 255, 255, 0.55);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

#steuerung.hoch #stick, #steuerung.hoch #stick-zone {
	display: none;
}


/* ================================================================ Konsolen-Looks im Hochformat (17.10.2026)
   docs/30_ui_stil.md; übernommen aus dem Prototyp run/design/konsole.css (Branch design-hochformat), Lukas' Wahl:
   sieben Grund-Looks immer frei, sechs verrückte zum Freischalten (das Spiel entscheidet, core/konsolen.gd), Kompakt
   später. Aufbau: (1) Hülle und Lage (CSS-Variablen aus anordnenHoch() in lumoria.js), (2) Bedienelemente im
   Konsolen-Stil, (3) Einblendung beim Wechseln, (4) die Looks – je ein Satz Farb-Variablen an body[data-konsole].
   Alles gilt nur hochkant am Handy (html[data-ansicht="hoch"]); quer und am Computer bleibt die Seite wie zuvor.
   Bilder: nur das Spielbild und vorhandene KI-Bilder (Kampfbilder der Lumons, Emblem aus dem App-Symbol),
   tools/web_bauen.sh legt sie als konsole_*.png neben die Seite. */

:root {
	/* Lage (Startwerte; anordnenHoch() überschreibt sie) */
	--bild-x: 35px; --bild-y: 73px; --bild-b: 320px; --bild-h: 213.333px;
	--rahmen-o: 14px; --rahmen-u: 34px; --rahmen-s: 14px; --rahmen-unten: 321px;
	--oben: 47px; --unten: 34px; --breite: 390px; --hoehe: 844px;
	--kreuz-x: 105px; --kreuz-y: 530px; --kreuz-d: 150px;
	--a-x: 325px; --a-y: 500px; --b-x: 244px; --b-y: 561px; --ab-d: 68px;
	--ab-laenge: 190px; --ab-winkel: -0.64rad;
	--pillen-y: 770px; --laut-b: 64px; --laut-l-x: 30px; --laut-r-x: 296px;
	--lumon-x: 290px; --lumon-y: 290px; --lumon-b: 78px; --lumon-h: 73px;
	--schrift-familie: "Avenir Next", "Avenir", -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Farben, die beim Wechseln weich überblenden (registriert, damit auch Verläufe mitlaufen) */
@property --huelle { syntax: '<color>'; inherits: true; initial-value: #24205e; }
@property --huelle-hell { syntax: '<color>'; inherits: true; initial-value: #3a347f; }
@property --huelle-dunkel { syntax: '<color>'; inherits: true; initial-value: #120f38; }
@property --rahmen { syntax: '<color>'; inherits: true; initial-value: #15143a; }
@property --knopf { syntax: '<color>'; inherits: true; initial-value: #f2b83a; }
@property --kreuz { syntax: '<color>'; inherits: true; initial-value: #17163f; }

html:not([data-ansicht="hoch"]) #konsole, html:not([data-ansicht="hoch"]) #schriftzug,
html:not([data-ansicht="hoch"]) #einblendung {
	display: none;
}

/* Hochkant: die Hülle füllt alles, auch hinter der Statusleiste (black-translucent) */
html[data-ansicht="hoch"] body {
	background: var(--grund, var(--huelle-dunkel));
	-webkit-tap-highlight-color: transparent;
}

body.bereit {
	transition: --huelle 0.35s ease, --huelle-hell 0.35s ease, --huelle-dunkel 0.35s ease, --rahmen 0.35s ease,
		--knopf 0.35s ease, --kreuz 0.35s ease;
}

/* Schmuck-Ebene in Bildschirmgröße: so bleibt sie Bezugsrahmen ihrer Teile, auch wenn sie sich bewegt (Glibber) */
#konsole {
	position: fixed;
	inset: 0;
}

#konsole, #konsole * {
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

#konsole > div, #konsole > i, .innenleben > * {
	position: absolute;
	box-sizing: border-box;
}

/* Hülle: Grundfarbe, Licht von oben links, Kante rundum (wie ein Spritzguss-Gehäuse) */
#konsole .huelle {
	inset: 0;
	background:
		radial-gradient(130% 55% at 12% -5%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 60%),
		linear-gradient(168deg, var(--huelle-hell) 0%, var(--huelle) 42%, var(--huelle-dunkel) 100%);
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.22), inset 2px 0 0 rgba(255, 255, 255, 0.08),
		inset -2px 0 0 rgba(0, 0, 0, 0.12), inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}

/* Glanzstreifen: schräger, weicher Lichtreflex auf dem Kunststoff */
#konsole .huelle::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(112deg, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, var(--glanz, 0.07)) 16%,
			rgba(255, 255, 255, 0) 30%),
		linear-gradient(112deg, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, calc(var(--glanz, 0.07) * 0.6)) 76%,
			rgba(255, 255, 255, 0) 84%);
}

/* Kopfband hinter der Statusleiste: bei hellen Hüllen dunkel, damit Uhrzeit und Akku (weiß) lesbar bleiben */
#konsole .kopfband {
	left: 0;
	right: 0;
	top: 0;
	height: var(--oben);
	background: var(--kopf, transparent);
	box-shadow: var(--kopf-kante, none);
}

/* Rahmen ums Display */
#konsole .rahmen {
	left: calc(var(--bild-x) - var(--rahmen-s));
	top: calc(var(--bild-y) - var(--rahmen-o));
	width: calc(var(--bild-b) + 2 * var(--rahmen-s));
	height: calc(var(--bild-h) + var(--rahmen-o) + var(--rahmen-u));
	border-radius: calc(min(var(--rahmen-s), 12px) + 6px) calc(min(var(--rahmen-s), 12px) + 6px)
		calc(min(var(--rahmen-s), 12px) + 12px) calc(min(var(--rahmen-s), 12px) + 12px);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 22%),
		var(--rahmen-flaeche, var(--rahmen));
	box-shadow: 0 0 0 1.5px var(--rahmen-kante), inset 0 1px 0 rgba(255, 255, 255, 0.16),
		0 4px 10px rgba(0, 0, 0, 0.28), var(--rahmen-glow, 0 0 0 transparent);
	overflow: hidden;
}

/* Fenster direkt ums Spielbild: dunkler Einschnitt, das Display liegt etwas tiefer */
#konsole .rahmen .glas {
	position: absolute;
	left: calc(var(--rahmen-s) - 3px);
	top: calc(var(--rahmen-o) - 3px);
	width: calc(var(--bild-b) + 6px);
	height: calc(var(--bild-h) + 6px);
	border-radius: 4px;
	background: var(--glas, #07070f);
	box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* Betriebs-LED mit Aufdruck, links im unteren Rahmenteil */
#konsole .rahmen .led {
	position: absolute;
	left: calc(var(--rahmen-s) + 12px);
	top: calc(var(--rahmen-o) + var(--bild-h) + var(--rahmen-u) / 2 - 4px);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff 0, var(--led) 45%, var(--led-tief, var(--led)) 100%);
	box-shadow: 0 0 4px 1px var(--led), 0 0 12px 3px var(--led-schein, rgba(255, 255, 255, 0.25));
}

#konsole .rahmen .led-text {
	position: absolute;
	left: calc(var(--rahmen-s) + 25px);
	top: calc(var(--rahmen-o) + var(--bild-h) + var(--rahmen-u) / 2 - 4.5px);
	font: 700 7px/9px var(--schrift-familie);
	letter-spacing: 0.22em;
	color: var(--rahmen-leise, rgba(255, 255, 255, 0.45));
}


/* Schriftzug LUMORIA: gedruckt auf den Rahmen, zugleich Knopf zum Wechseln */
#schriftzug {
	position: absolute;
	z-index: 2;
	box-sizing: border-box;
	padding-top: calc((var(--rahmen-u) - 15px) / 2);
	text-align: center;
	font: italic 800 14px/15px var(--schrift-familie);
	letter-spacing: 0.34em;
	text-indent: 0.34em;
	color: var(--schrift);
	background: var(--schrift-verlauf, none);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: var(--schrift-fuellung, currentColor);
	text-shadow: var(--schrift-schatten, none);
	touch-action: none;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	transition: opacity 80ms ease-out;
}

#schriftzug.an {
	opacity: 0.6;
}

/* Mulden (flache Vertiefungen) unter Steuerkreuz und A/B */
#konsole .mulde {
	border-radius: 50%;
	background: radial-gradient(circle at 50% 38%, var(--mulde-mitte, rgba(0, 0, 0, 0.16)), var(--mulde, rgba(0, 0, 0, 0.10)) 72%);
	box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.10),
		0 1px 0 rgba(255, 255, 255, var(--mulde-licht, 0.18));
}

#konsole .m-kreuz {
	left: calc(var(--kreuz-x) - var(--kreuz-d) * 0.6);
	top: calc(var(--kreuz-y) - var(--kreuz-d) * 0.6);
	width: calc(var(--kreuz-d) * 1.2);
	height: calc(var(--kreuz-d) * 1.2);
}

#konsole .m-ab {
	left: calc((var(--a-x) + var(--b-x)) / 2 - var(--ab-laenge) / 2);
	top: calc((var(--a-y) + var(--b-y)) / 2 - var(--ab-d) * 0.66);
	width: var(--ab-laenge);
	height: calc(var(--ab-d) * 1.32);
	border-radius: 999px;
	transform: rotate(var(--ab-winkel));
}

/* Lautsprecher: Schlitze (6 Rillen) – je Look als Rillen, Löcher oder Ringe */
#konsole .lautsprecher {
	top: calc(var(--pillen-y) - 22px);
	width: var(--laut-b);
	height: 44px;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	padding: 2px 4px;
	transform: rotate(var(--laut-winkel, 0deg));
}

#konsole .l-links { left: var(--laut-l-x); }
#konsole .l-rechts { left: var(--laut-r-x); }

#konsole .lautsprecher i {
	display: block;
	width: 5px;
	border-radius: 3px;
	background: var(--gitter);
	box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, var(--gitter-licht, 0.25));
}

/* Lumon der Edition (KI-Kampfbild, nur skaliert) und sein Schatten auf der Hülle */
#konsole .lumon {
	display: none;
	z-index: 1;
	left: var(--lumon-x);
	top: var(--lumon-y);
	width: var(--lumon-b);
	height: var(--lumon-h);
	background: var(--lumon-bild) no-repeat 0 0 / 100% 100%;
	image-rendering: pixelated;
	filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35));
}

#konsole .lumon-schatten {
	display: none;
	left: calc(var(--lumon-x) + var(--lumon-b) * 0.1);
	top: calc(var(--lumon-y) + var(--lumon-h) * 0.9);
	width: calc(var(--lumon-b) * 0.8);
	height: calc(var(--lumon-h) * 0.18);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0));
}

body[data-konsole="funzel"] #konsole .lumon, body[data-konsole="platschi"] #konsole .lumon,
body[data-konsole="moosbara"] #konsole .lumon, body[data-konsole="lumi"] #konsole .lumon,
body[data-konsole="funzel"] #konsole .lumon-schatten, body[data-konsole="platschi"] #konsole .lumon-schatten,
body[data-konsole="moosbara"] #konsole .lumon-schatten, body[data-konsole="lumi"] #konsole .lumon-schatten {
	display: block;
}

#konsole .lumon.hopp {
	animation: hopp 0.5s cubic-bezier(0.3, 1.5, 0.5, 1);
}

@keyframes hopp {
	0% { transform: translateY(18px) scaleY(0.85); opacity: 0; }
	45% { transform: translateY(-10px) scaleY(1.04); opacity: 1; }
	100% { transform: translateY(0) scaleY(1); }
}

#konsole .lumon.hopp-standbild {
	transform: translateY(-10px);
}

/* Innenleben (nur im Look „Transparent“ zu sehen) */
#konsole .innenleben {
	display: none;
	position: absolute;
	inset: 0;
}

/* ---------------------------------------------------------------- (2) Bedienelemente im Konsolen-Stil (hochkant) */
/* Steuerkreuz: ein Stück aus fünf Teilen; der Verlauf läuft über alle Teile durch (gleiche Größe und Lage) */
#steuerung.hoch #kreuz {
	filter: drop-shadow(0 3px 0 var(--kreuz-kante)) drop-shadow(0 6px 5px rgba(0, 0, 0, 0.28));
}

#kreuz .arm, #kreuz .mitte {
	position: absolute;
	background-image:
		radial-gradient(circle at 38% 30%, var(--kreuz-hell) 0%, var(--kreuz) 46%, var(--kreuz-tief, var(--kreuz)) 100%);
	background-size: var(--kreuz-d) var(--kreuz-d);
}

#kreuz .arm.o, #kreuz .arm.u { left: 34%; width: 32%; height: 37%; }
#kreuz .arm.l, #kreuz .arm.r { top: 34%; height: 32%; width: 37%; }
#kreuz .arm.o { top: 3%; border-radius: 7px 7px 0 0; background-position: calc(var(--kreuz-d) * -0.34) calc(var(--kreuz-d) * -0.03); }
#kreuz .arm.u { bottom: 3%; border-radius: 0 0 7px 7px; background-position: calc(var(--kreuz-d) * -0.34) calc(var(--kreuz-d) * -0.60); }
#kreuz .arm.l { left: 3%; border-radius: 7px 0 0 7px; background-position: calc(var(--kreuz-d) * -0.03) calc(var(--kreuz-d) * -0.34); }
#kreuz .arm.r { right: 3%; border-radius: 0 7px 7px 0; background-position: calc(var(--kreuz-d) * -0.60) calc(var(--kreuz-d) * -0.34); }
#kreuz .mitte { left: 34%; top: 34%; width: 32%; height: 32%; background-position: calc(var(--kreuz-d) * -0.34) calc(var(--kreuz-d) * -0.34); }

/* Mulde in der Mitte des Kreuzes */
#kreuz .mitte::after {
	content: '';
	position: absolute;
	left: 22%;
	top: 22%;
	width: 56%;
	height: 56%;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 60%, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.22));
	box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* geprägte Pfeile auf den Armen */
#kreuz .arm::after {
	content: '';
	position: absolute;
	width: 30%;
	height: 22%;
	background: var(--kreuz-pfeil, rgba(255, 255, 255, 0.16));
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

#kreuz .arm.o::after { left: 35%; top: 16%; width: 30%; height: 18%; }
#kreuz .arm.u::after { left: 35%; bottom: 16%; width: 30%; height: 18%; transform: rotate(180deg); }
#kreuz .arm.l::after { left: 16%; top: 35%; width: 18%; height: 30%; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
#kreuz .arm.r::after { right: 16%; top: 35%; width: 18%; height: 30%; clip-path: polygon(100% 50%, 0 0, 0 100%); }

/* gedrückte Richtung: Arm taucht ab (dunkler), Pfeil leuchtet in der Akzentfarbe */
#kreuz.an-o .arm.o, #kreuz.an-u .arm.u, #kreuz.an-l .arm.l, #kreuz.an-r .arm.r {
	background-image: linear-gradient(rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.28)),
		radial-gradient(circle at 38% 30%, var(--kreuz-hell) 0%, var(--kreuz) 46%, var(--kreuz-tief, var(--kreuz)) 100%);
	background-size: 100% 100%, var(--kreuz-d) var(--kreuz-d);
}

#kreuz.an-o .arm.o::after, #kreuz.an-u .arm.u::after, #kreuz.an-l .arm.l::after, #kreuz.an-r .arm.r::after {
	background: var(--akzent);
}

/* A und B: gewölbte Knöpfe mit Glanzpunkt und Rand („Stufe“) darunter */
#steuerung.hoch #knopf-a, #steuerung.hoch #knopf-b {
	font: 800 24px/1 var(--schrift-familie);
	color: var(--knopf-text);
	text-shadow: 0 1px 0 var(--knopf-praegung, rgba(255, 255, 255, 0.35));
	background: radial-gradient(circle at 34% 28%, var(--knopf-glanz, #fff) 0, var(--knopf-hell) 16%, var(--knopf) 52%,
		var(--knopf-tief) 100%);
	box-shadow: 0 4px 0 var(--knopf-kante), 0 8px 10px rgba(0, 0, 0, 0.30), inset 0 -3px 5px rgba(0, 0, 0, 0.16),
		inset 0 2px 1px rgba(255, 255, 255, 0.35);
	transition: transform 50ms ease-out, box-shadow 50ms ease-out;
}

#steuerung.hoch #knopf-a.an, #steuerung.hoch #knopf-b.an {
	transform: translateY(3px);
	box-shadow: 0 1px 0 var(--knopf-kante), 0 3px 5px rgba(0, 0, 0, 0.30), inset 0 -2px 4px rgba(0, 0, 0, 0.22),
		inset 0 2px 1px rgba(255, 255, 255, 0.25);
	filter: brightness(0.94);
}

/* START und Ton: schräge Gummi-Pillen; Aufdruck darunter. Das Element selbst ist nur die Trefferfläche. */
#steuerung.hoch .knopf.klein {
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	padding-top: 9px;
	gap: 7px;
	border-radius: 12px;
	background: none;
	box-shadow: none;
	color: var(--aufdruck);
	transform: rotate(-25deg);
}

#steuerung.hoch .knopf.klein::before {
	content: '';
	display: block;
	width: 44px;
	height: 13px;
	border-radius: 7px;
	background: linear-gradient(180deg, var(--pille-hell), var(--pille) 60%, var(--pille-tief, var(--pille)));
	box-shadow: 0 2.5px 0 var(--pille-kante), 0 4px 5px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.30);
	transition: transform 50ms ease-out, box-shadow 50ms ease-out;
}

#steuerung.hoch .knopf.klein.an::before {
	transform: translateY(2px);
	box-shadow: 0 0.5px 0 var(--pille-kante), 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

#steuerung.hoch #knopf-start .text, #steuerung.hoch #knopf-select .text {
	font: 800 9px/10px var(--schrift-familie);
	letter-spacing: 0.2em;
	text-indent: 0.2em;
}

/* SELECT (Karte): hochkant eine Pille wie START mit Aufdruck, quer ein Karten-Symbol neben dem Ton-Knopf */
#knopf-select[hidden] {
	display: none;
}

#knopf-select svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: #fff;
	stroke-width: 2;
	stroke-linejoin: round;
}

#steuerung.hoch #knopf-select svg, #steuerung.quer #knopf-select .text {
	display: none;
}


#steuerung.hoch #knopf-ton svg {
	width: 15px;
	height: 15px;
	margin-top: -2px;
	stroke: var(--aufdruck);
	stroke-width: 2.4;
}

#steuerung.hoch #knopf-ton .lautsprecher { fill: var(--aufdruck); }

/* ---------------------------------------------------------------- (3) Einblendung beim Wechseln */
#einblendung {
	position: fixed;
	z-index: 3;
	left: 50%;
	top: calc(var(--rahmen-unten) + 12px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 8px 16px 9px;
	border-radius: 16px;
	background: rgba(14, 14, 30, 0.80);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	font: 700 15px/1.1 var(--schrift-familie);
	letter-spacing: 0.02em;
	white-space: nowrap;
	opacity: 0;
	transform: translate(-50%, 6px);
	transition: opacity 0.18s ease-out, transform 0.18s ease-out;
	pointer-events: none;
}

#einblendung.sichtbar {
	opacity: 1;
	transform: translate(-50%, 0);
}

#einblendung .punkte {
	display: flex;
	gap: 5px;
}

#einblendung .punkte i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.32);
}

#einblendung .hinweis {
	font: 600 11px/1.2 var(--schrift-familie);
	color: #ffd0a0;
}

#einblendung .hinweis:empty {
	display: none;
}

#einblendung .punkte i.an {
	background: var(--akzent);
	box-shadow: 0 0 6px var(--akzent);
}

/* ---------------------------------------------------------------- (4) Die Looks */

/* 1 Lichtkapsel: Nachtblau-Violett mit Gold, wie das App-Symbol; das Display strahlt wie die Kapsel-Sonne */
body[data-konsole="lichtkapsel"] {
	--huelle: #2a2468; --huelle-hell: #433a8c; --huelle-dunkel: #120f3a;
	--rahmen: #141236; --rahmen-kante: #d8a63c; --rahmen-leise: rgba(247, 214, 120, 0.55);
	--rahmen-glow: 0 0 34px 2px rgba(255, 210, 90, 0.16);
	--schrift: #f7d66a;
	--schrift-verlauf: linear-gradient(180deg, #fff2b0 0%, #f7d066 45%, #d39a2e 100%);
	--schrift-fuellung: transparent;
	--led: #ffd85a; --led-tief: #e08a1a; --led-schein: rgba(255, 200, 80, 0.45);
	--kreuz: #1a1846; --kreuz-hell: #3a3784; --kreuz-tief: #0d0c2c; --kreuz-kante: #08071c;
	--kreuz-pfeil: rgba(247, 214, 106, 0.45);
	--knopf: #f2b63a; --knopf-hell: #ffe089; --knopf-tief: #c97d1b; --knopf-kante: #7d4a10; --knopf-text: #2a2160;
	--knopf-praegung: rgba(255, 240, 190, 0.6);
	--pille: #3b357c; --pille-hell: #554ea0; --pille-kante: #17143f;
	--aufdruck: #e8c768;
	--gitter: #08071f; --gitter-licht: 0.12;
	--mulde: rgba(8, 6, 30, 0.22); --mulde-mitte: rgba(8, 6, 30, 0.34); --mulde-licht: 0.10;
	--akzent: #ffd85a;
	--glanz: 0.06;
}

/* Lautsprecher der Lichtkapsel: runde Lochfelder wie eine kleine Sonne */
body[data-konsole="lichtkapsel"] #konsole .lautsprecher,
body[data-konsole="lumi"] #konsole .lautsprecher {
	height: var(--laut-b);
	top: calc(var(--pillen-y) - var(--laut-b) / 2);
	border-radius: 50%;
	transform: none;
	background: radial-gradient(circle, var(--gitter) 0 2.1px, transparent 2.7px) 50% 50% / 8px 8px;
	-webkit-mask: radial-gradient(circle, #000 0 58%, transparent 70%);
	mask: radial-gradient(circle, #000 0 58%, transparent 70%);
}

body[data-konsole="lichtkapsel"] #konsole .lautsprecher i,
body[data-konsole="lumi"] #konsole .lautsprecher i {
	display: none;
}

/* 2 Klassik: warmes Hellgrau, violette Knöpfe, violettes Kopfband */
body[data-konsole="klassik"] {
	--huelle: #d8d2c6; --huelle-hell: #ebe6dc; --huelle-dunkel: #bdb5a7;
	--kopf: linear-gradient(180deg, #5d4ea0, #4f4390);
	--kopf-kante: 0 2px 0 rgba(255, 255, 255, 0.35), 0 3px 0 rgba(0, 0, 0, 0.08);
	--rahmen: #5a5966; --rahmen-kante: rgba(0, 0, 0, 0.12); --rahmen-leise: rgba(235, 230, 255, 0.55);
	--rahmen-flaeche: linear-gradient(180deg, #62616f, #4f4e5b);
	--schrift: #efeaff;
	--schrift-schatten: 0 1px 0 rgba(0, 0, 0, 0.35);
	--led: #ff4a3a; --led-tief: #b51a10; --led-schein: rgba(255, 70, 50, 0.45);
	--kreuz: #34333b; --kreuz-hell: #56545f; --kreuz-tief: #222127; --kreuz-kante: #19181d;
	--kreuz-pfeil: rgba(255, 255, 255, 0.14);
	--knopf: #6b52c4; --knopf-hell: #9d88ec; --knopf-tief: #46348f; --knopf-kante: #30236a; --knopf-text: #f3efff;
	--knopf-praegung: rgba(0, 0, 0, 0.25);
	--pille: #8f897e; --pille-hell: #a8a296; --pille-kante: #6b665c;
	--aufdruck: #4a3f8c;
	--gitter: #9c9486; --gitter-licht: 0.55;
	--mulde: rgba(80, 70, 50, 0.07); --mulde-mitte: rgba(80, 70, 50, 0.13); --mulde-licht: 0.55;
	--akzent: #9d88ec;
	--glanz: 0.18;
	}

/* Klassik: waagrechte Rillen statt schräger Schlitze */
body[data-konsole="klassik"] #konsole .lautsprecher,
{
	flex-direction: column;
	transform: none;
	padding: 4px 2px;
	height: 46px;
	top: calc(var(--pillen-y) - 23px);
}

body[data-konsole="klassik"] #konsole .lautsprecher i,
{
	width: auto;
	height: 4px;
	margin: 0 calc(var(--rille, 0) * 1px);
}

body[data-konsole="klassik"] #konsole .lautsprecher i:nth-child(1),
body[data-konsole="klassik"] #konsole .lautsprecher i:nth-child(6),
{ margin: 0 12px; }
body[data-konsole="klassik"] #konsole .lautsprecher i:nth-child(2),
body[data-konsole="klassik"] #konsole .lautsprecher i:nth-child(5),
{ margin: 0 4px; }

/* 3 Transparent: türkis durchscheinend; darunter Platine, Kontakte, Schrauben und Lautsprecher-Membran */
body[data-konsole="transparent"] {
	--grund: #0b3436;
	--huelle: rgba(56, 196, 186, 0.50); --huelle-hell: rgba(120, 236, 222, 0.48); --huelle-dunkel: rgba(14, 112, 116, 0.62);
	--rahmen: rgba(6, 34, 38, 0.74); --rahmen-kante: rgba(190, 255, 244, 0.40); --rahmen-leise: rgba(200, 255, 245, 0.55);
	--schrift: rgba(228, 255, 250, 0.95);
	--schrift-schatten: 0 0 8px rgba(120, 255, 230, 0.35);
	--led: #74ffd6; --led-tief: #12b58a; --led-schein: rgba(120, 255, 214, 0.5);
	--kreuz: rgba(12, 46, 50, 0.70); --kreuz-hell: rgba(70, 140, 140, 0.70); --kreuz-tief: rgba(4, 26, 28, 0.78);
	--kreuz-kante: rgba(2, 20, 22, 0.75); --kreuz-pfeil: rgba(170, 255, 240, 0.30);
	--knopf: rgba(146, 84, 220, 0.72); --knopf-hell: rgba(204, 168, 255, 0.78); --knopf-tief: rgba(88, 40, 160, 0.82);
	--knopf-kante: rgba(54, 20, 110, 0.85); --knopf-text: #fbf6ff; --knopf-praegung: rgba(0, 0, 0, 0.25);
	--pille: rgba(14, 58, 62, 0.75); --pille-hell: rgba(60, 120, 120, 0.75); --pille-kante: rgba(2, 24, 26, 0.8);
	--aufdruck: rgba(214, 255, 248, 0.90);
	--gitter: rgba(4, 30, 32, 0.62); --gitter-licht: 0.18;
	--mulde: rgba(255, 255, 255, 0.05); --mulde-mitte: rgba(255, 255, 255, 0.08); --mulde-licht: 0.22;
	--akzent: #74ffd6;
	--glanz: 0.12;
}

body[data-konsole="transparent"] #konsole .innenleben {
	display: block;
}

body[data-konsole="transparent"] #konsole .huelle {
	box-shadow: inset 0 2px 0 rgba(200, 255, 245, 0.45), inset 2px 0 0 rgba(200, 255, 245, 0.18),
		inset -2px 0 0 rgba(0, 40, 40, 0.3), inset 0 -3px 0 rgba(0, 40, 40, 0.35),
		inset 0 0 0 7px rgba(140, 240, 228, 0.10);
}

/* Platine (grün, durch das Türkis gesehen). Leiterbahnen als Teilstücke: je Bahn eine Hintergrund-Ebene mit
   Lage und Größe, ausgerichtet an Kreuz, Knöpfen und Chips (Koordinaten relativ zur Platine). */
.innenleben .platine {
	--p-o: calc(var(--rahmen-unten) + 26px);
	--bahn: rgba(236, 200, 112, 0.42);
	left: 18px;
	right: 18px;
	top: var(--p-o);
	bottom: calc(var(--unten) + 8px);
	border-radius: 22px;
	background:
		/* Kreuz → mittlerer Chip (x relativ zur Platine: absolut − 18 px) */
		linear-gradient(var(--bahn), var(--bahn)) calc(var(--kreuz-x) - 18px) calc(var(--kreuz-y) - var(--p-o) + 10px) / calc(var(--breite) / 2 - var(--kreuz-x)) 2px no-repeat,
		linear-gradient(var(--bahn), var(--bahn)) calc(var(--kreuz-x) - 18px) calc(var(--kreuz-y) - var(--p-o) + 22px) / calc(var(--breite) / 2 - var(--kreuz-x)) 2px no-repeat,
		/* Knöpfe → mittlerer Chip */
		linear-gradient(var(--bahn), var(--bahn)) calc(var(--breite) / 2 - 4px) calc(var(--b-y) - var(--p-o) - 1px) / calc(var(--b-x) - var(--breite) / 2 - 14px) 2px no-repeat,
		linear-gradient(var(--bahn), var(--bahn)) calc(var(--b-x) - 18px) calc(var(--a-y) - var(--p-o) + 4px) / 2px calc(var(--b-y) - var(--a-y) - 4px) no-repeat,
		linear-gradient(var(--bahn), var(--bahn)) calc(var(--b-x) - 18px) calc(var(--a-y) - var(--p-o) + 4px) / calc(var(--a-x) - var(--b-x)) 2px no-repeat,
		/* oberer Chip → mittlerer Chip */
		linear-gradient(var(--bahn), var(--bahn)) calc(var(--breite) / 2 - 28px) 78px / 2px calc(var(--kreuz-y) - var(--p-o) - 74px) no-repeat,
		linear-gradient(var(--bahn), var(--bahn)) calc(var(--breite) / 2 - 10px) 78px / 2px calc(var(--kreuz-y) - var(--p-o) - 74px) no-repeat,
		/* zu Pillen und Lautsprecher */
		linear-gradient(var(--bahn), var(--bahn)) calc(var(--breite) / 2 - 78px) calc(var(--pillen-y) - var(--p-o) - 34px) / 120px 2px no-repeat,
		linear-gradient(var(--bahn), var(--bahn)) calc(var(--breite) / 2 + 40px) calc(var(--pillen-y) - var(--p-o) - 34px) / calc(var(--laut-r-x) - var(--breite) / 2 - 20px) 2px no-repeat,
		/* Lötstopplack: feine Schraffur */
		repeating-linear-gradient(135deg, rgba(160, 255, 200, 0.05) 0 1px, transparent 1px 7px),
		linear-gradient(160deg, #16604c, #0b3f35);
	box-shadow: inset 0 0 0 2px rgba(236, 200, 112, 0.22), inset 0 0 0 5px rgba(0, 0, 0, 0.12),
		0 0 0 1px rgba(0, 0, 0, 0.25);
	opacity: 0.9;
}

/* Kondensatoren (von oben gesehen) */
.innenleben .kondensator {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background:
		linear-gradient(90deg, transparent 62%, rgba(255, 255, 255, 0.35) 62% 76%, transparent 76%),
		radial-gradient(circle at 40% 35%, #6f8fa8, #2c4458 75%);
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
	opacity: 0.85;
}

.innenleben .n1 { left: calc(50% + 40px); top: calc(var(--rahmen-unten) + 70px); }
.innenleben .n2 { left: calc(var(--kreuz-x) + var(--kreuz-d) * 0.52); top: calc(var(--kreuz-y) + var(--kreuz-d) * 0.42); }

/* Flachbandkabel von der Platine hinauf zum Display */
.innenleben .flachband {
	left: calc(var(--bild-x) + var(--bild-b) * 0.5 - 34px);
	width: 68px;
	top: calc(var(--rahmen-unten) - 30px);
	height: 70px;
	background: repeating-linear-gradient(90deg, rgba(240, 170, 70, 0.55) 0 2px, rgba(120, 70, 20, 0.45) 2px 4px);
	border-radius: 2px;
	opacity: 0.8;
}

.innenleben .chip {
	background: linear-gradient(160deg, #23302e, #121a19);
	border: 2px dashed rgba(220, 225, 205, 0.45);
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
	opacity: 0.85;
}

.innenleben .c1 { left: calc(50% - 30px); top: calc(var(--rahmen-unten) + 60px); width: 60px; height: 44px; }
.innenleben .c2 { left: calc(50% - 14px); top: calc(var(--kreuz-y) + 4px); width: 28px; height: 28px; }
.innenleben .c3 { left: calc(var(--kreuz-x) - 24px); top: calc(var(--kreuz-y) + var(--kreuz-d) * 0.62 + 6px); width: 48px; height: 18px; }

/* Kontaktflächen unter Kreuz und Knöpfen (vergoldete Ringe) */
.innenleben .kontakt {
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 0, 0, 0) 0 34%, rgba(240, 205, 120, 0.55) 35% 41%, rgba(0, 0, 0, 0) 42% 56%,
		rgba(240, 205, 120, 0.40) 57% 61%, rgba(0, 0, 0, 0) 62%);
}

.innenleben .k-kreuz { left: calc(var(--kreuz-x) - var(--kreuz-d) * 0.5); top: calc(var(--kreuz-y) - var(--kreuz-d) * 0.5); width: var(--kreuz-d); height: var(--kreuz-d); }
.innenleben .k-a { left: calc(var(--a-x) - var(--ab-d) * 0.62); top: calc(var(--a-y) - var(--ab-d) * 0.62); width: calc(var(--ab-d) * 1.24); height: calc(var(--ab-d) * 1.24); }
.innenleben .k-b { left: calc(var(--b-x) - var(--ab-d) * 0.62); top: calc(var(--b-y) - var(--ab-d) * 0.62); width: calc(var(--ab-d) * 1.24); height: calc(var(--ab-d) * 1.24); }

/* Lautsprecher-Membran unter dem rechten Gitter */
.innenleben .membran {
	left: calc(var(--laut-r-x) + var(--laut-b) / 2 - 30px);
	top: calc(var(--pillen-y) - 30px);
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: radial-gradient(circle, #2c3a39 0 16%, #5d6c69 17% 22%, #1d2928 23% 60%, #6f7f7c 61% 64%, #263231 65%);
	opacity: 0.7;
}

.innenleben .schraube {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background:
		linear-gradient(45deg, transparent 44%, rgba(40, 50, 50, 0.9) 44% 56%, transparent 56%),
		linear-gradient(-45deg, transparent 44%, rgba(40, 50, 50, 0.9) 44% 56%, transparent 56%),
		radial-gradient(circle at 35% 30%, #e8eeee, #8c9a99 70%);
	box-shadow: 0 0 0 3px rgba(10, 60, 60, 0.35);
	opacity: 0.85;
}

.innenleben .s1 { left: 26px; top: calc(var(--oben) + 18px); }
.innenleben .s2 { right: 26px; top: calc(var(--oben) + 18px); }
.innenleben .s3 { left: 12px; bottom: calc(var(--unten) + 2px); }
.innenleben .s4 { right: 12px; bottom: calc(var(--unten) + 2px); }

/* 4 Funzel-Edition: Rotpanda-Rot, Gesicht-Creme, die LED glimmt wie seine Schweif-Laterne */
body[data-konsole="funzel"] {
	--huelle: #d24f2b; --huelle-hell: #ec7543; --huelle-dunkel: #9c2e18;
	--rahmen: #35140f; --rahmen-kante: #f7a33a; --rahmen-leise: rgba(255, 220, 180, 0.55);
	--rahmen-flaeche: linear-gradient(180deg, #43190f, #2e100b);
	--schrift: #fff1da;
	--led: #ffa531; --led-tief: #e0461a; --led-schein: rgba(255, 150, 40, 0.65);
	--kreuz: #3a120c; --kreuz-hell: #6a241a; --kreuz-tief: #22090a; --kreuz-kante: #190507;
	--kreuz-pfeil: rgba(255, 190, 120, 0.30);
	--knopf: #fff2dc; --knopf-hell: #ffffff; --knopf-tief: #e8cfa8; --knopf-kante: #a77b4f; --knopf-text: #ad2919;
	--knopf-praegung: rgba(255, 255, 255, 0.8);
	--pille: #6d1d10; --pille-hell: #8c2c19; --pille-kante: #3e0c06;
	--aufdruck: #ffe6c8;
	--gitter: #7d2312; --gitter-licht: 0.22;
	--mulde: rgba(60, 10, 0, 0.12); --mulde-mitte: rgba(60, 10, 0, 0.22); --mulde-licht: 0.22;
	--akzent: #ffb13a;
	--lumon-bild: url("konsole_lumon_funzel.png");
	--glanz: 0.10;
}

body[data-konsole="funzel"] #konsole .rahmen .led {
	animation: glimmen 2.6s ease-in-out infinite;
}

/* Funzel: Rillen wie eine Glut (Mitte am höchsten) */
body[data-konsole="funzel"] #konsole .lautsprecher {
	align-items: flex-end;
}

body[data-konsole="funzel"] #konsole .lautsprecher i:nth-child(1),
body[data-konsole="funzel"] #konsole .lautsprecher i:nth-child(6) { height: 46%; }
body[data-konsole="funzel"] #konsole .lautsprecher i:nth-child(2),
body[data-konsole="funzel"] #konsole .lautsprecher i:nth-child(5) { height: 72%; }
body[data-konsole="funzel"] #konsole .lautsprecher i:nth-child(3),
body[data-konsole="funzel"] #konsole .lautsprecher i:nth-child(4) { height: 100%; }

@keyframes glimmen {
	0%, 100% { box-shadow: 0 0 4px 1px var(--led), 0 0 12px 3px var(--led-schein); }
	35% { box-shadow: 0 0 5px 2px var(--led), 0 0 18px 6px var(--led-schein); }
	55% { box-shadow: 0 0 3px 1px var(--led), 0 0 10px 2px var(--led-schein); }
	75% { box-shadow: 0 0 5px 2px var(--led), 0 0 16px 5px var(--led-schein); }
}

/* 5 Platschi-Edition: Wasserblau, gelbe Knöpfe wie Schnabel und Füße, Wellenringe im Lautsprecher */
body[data-konsole="platschi"] {
	--huelle: #2e9db3; --huelle-hell: #5cc4cf; --huelle-dunkel: #1a6c86;
	--rahmen: #103e57; --rahmen-kante: #ffd23a; --rahmen-leise: rgba(200, 245, 255, 0.55);
	--schrift: #e8fbff;
	--led: #70f1ff; --led-tief: #1aa5c0; --led-schein: rgba(110, 240, 255, 0.55);
	--kreuz: #0f3b54; --kreuz-hell: #24607e; --kreuz-tief: #072538; --kreuz-kante: #041a29;
	--kreuz-pfeil: rgba(160, 240, 255, 0.30);
	--knopf: #ffc61a; --knopf-hell: #ffe77c; --knopf-tief: #e48a0a; --knopf-kante: #9c5a08; --knopf-text: #0f3b54;
	--knopf-praegung: rgba(255, 245, 200, 0.7);
	--pille: #f7efc5; --pille-hell: #fffbe6; --pille-kante: #b9ad7c;
	--aufdruck: #0d3a50;
	--gitter: #12536a; --gitter-licht: 0.30;
	--mulde: rgba(0, 30, 50, 0.10); --mulde-mitte: rgba(0, 30, 50, 0.18); --mulde-licht: 0.25;
	--akzent: #70f1ff;
	--lumon-bild: url("konsole_lumon_platschi.png");
	--glanz: 0.12;
}

body[data-konsole="platschi"] #konsole .lautsprecher {
	height: var(--laut-b);
	top: calc(var(--pillen-y) - var(--laut-b) / 2);
	transform: none;
	border-radius: 50%;
	background: repeating-radial-gradient(circle, var(--gitter) 0 2px, transparent 2px 6px);
	-webkit-mask: radial-gradient(circle, #000 0 64%, transparent 65%);
	mask: radial-gradient(circle, #000 0 64%, transparent 65%);
}

body[data-konsole="platschi"] #konsole .lautsprecher i {
	display: none;
}

/* LED sendet Wellenringe aus (Platschi klopft aufs Wasser) */
body[data-konsole="platschi"] #konsole .rahmen .led::after {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	border: 1.5px solid var(--led);
	animation: welle 2.4s ease-out infinite;
}

@keyframes welle {
	0% { transform: scale(0.6); opacity: 0.9; }
	100% { transform: scale(2.6); opacity: 0; }
}

/* 6 Moosbara-Edition: Moosgrün, Rahmen aus Holz, Knöpfe im Fellton, die LED treibt wie ein Setzling */
body[data-konsole="moosbara"] {
	--huelle: #5f9a34; --huelle-hell: #85c04f; --huelle-dunkel: #3f6e22;
	--rahmen: #6a4428; --rahmen-kante: #d69c73; --rahmen-leise: rgba(255, 235, 200, 0.6);
	--rahmen-flaeche:
		repeating-linear-gradient(176deg, rgba(255, 220, 170, 0) 0 5px, rgba(255, 220, 170, 0.07) 5px 6px, rgba(0, 0, 0, 0) 6px 11px,
			rgba(40, 20, 5, 0.12) 11px 12px),
		linear-gradient(180deg, #7a4f2e, #5c3a22);
	--schrift: #f8e9d0;
	--schrift-schatten: 0 1px 0 rgba(40, 20, 5, 0.6);
	--led: #b5ef42; --led-tief: #3d9a1a; --led-schein: rgba(170, 240, 60, 0.55);
	--kreuz: #3b281a; --kreuz-hell: #644530; --kreuz-tief: #24170e; --kreuz-kante: #170e08;
	--kreuz-pfeil: rgba(255, 220, 170, 0.25);
	--knopf: #d69c73; --knopf-hell: #f2c79f; --knopf-tief: #b56b42; --knopf-kante: #6f3c22; --knopf-text: #3b281a;
	--knopf-praegung: rgba(255, 235, 210, 0.6);
	--pille: #2f5a1a; --pille-hell: #44762a; --pille-kante: #1c3a0e;
	--aufdruck: #1f3d12;
	--gitter: #36611d; --gitter-licht: 0.30;
	--mulde: rgba(20, 50, 0, 0.10); --mulde-mitte: rgba(20, 50, 0, 0.18); --mulde-licht: 0.25;
	--akzent: #b5ef42;
	--lumon-bild: url("konsole_lumon_moosbara.png");
	--glanz: 0.10;
}

body[data-konsole="moosbara"] #konsole .lautsprecher {
	height: 48px;
	top: calc(var(--pillen-y) - 24px);
	transform: none;
	border-radius: 14px;
	background: radial-gradient(circle, var(--gitter) 0 2.2px, transparent 2.8px) 0 0 / 9px 9px;
	-webkit-mask: radial-gradient(ellipse at 50% 50%, #000 0 52%, transparent 70%);
	mask: radial-gradient(ellipse at 50% 50%, #000 0 52%, transparent 70%);
}

body[data-konsole="moosbara"] #konsole .lautsprecher i {
	display: none;
}

/* 7 Lumi-Edition: Creme und Gold, goldenes Kopfband; die LED trägt einen Lichtfunken (Leuchtmal) */
body[data-konsole="lumi"] {
	--huelle: #f3e8cf; --huelle-hell: #fffaf0; --huelle-dunkel: #dccaa3;
	--kopf: linear-gradient(180deg, #b98426, #a2721c);
	--kopf-kante: 0 2px 0 rgba(255, 246, 214, 0.6), 0 3px 0 rgba(120, 80, 20, 0.12);
	--rahmen: #7a5426; --rahmen-kante: #f2cf63; --rahmen-leise: rgba(255, 238, 190, 0.6);
	--rahmen-flaeche: linear-gradient(180deg, #876029, #6c4a20);
	--schrift: #ffe9a6;
	--schrift-verlauf: linear-gradient(180deg, #fffbe6 0%, #ffe48a 50%, #f0b848 100%);
	--schrift-fuellung: transparent;
	--led: #fff1a0; --led-tief: #f0b230; --led-schein: rgba(255, 220, 110, 0.7);
	--kreuz: #8b6b48; --kreuz-hell: #b8966c; --kreuz-tief: #6a4f33; --kreuz-kante: #4d3822;
	--kreuz-pfeil: rgba(255, 240, 200, 0.35);
	--knopf: #f1c54a; --knopf-hell: #fff1a6; --knopf-tief: #d6972c; --knopf-kante: #93611a; --knopf-text: #7b4a19;
	--knopf-praegung: rgba(255, 250, 220, 0.7);
	--pille: #deb58c; --pille-hell: #ecd0b0; --pille-kante: #a9845e;
	--aufdruck: #9a6a2a;
	--gitter: #cdb588; --gitter-licht: 0.7;
	--mulde: rgba(120, 90, 30, 0.06); --mulde-mitte: rgba(120, 90, 30, 0.12); --mulde-licht: 0.7;
	--akzent: #ffd34a;
	--lumon-bild: url("konsole_lumon_lumi.png");
	--glanz: 0.30;
}

/* Lichtfunke an der LED: zwei feine Lichtstrahlen (Blendenstern) */
body[data-konsole="lumi"] #konsole .rahmen .led::before {
	content: '';
	position: absolute;
	left: -9px;
	top: -9px;
	width: 26px;
	height: 26px;
	background:
		linear-gradient(90deg, transparent 0, rgba(255, 246, 200, 0.95) 50%, transparent 100%) 50% 50% / 100% 1.5px no-repeat,
		linear-gradient(0deg, transparent 0, rgba(255, 246, 200, 0.95) 50%, transparent 100%) 50% 50% / 1.5px 100% no-repeat;
	animation: funkeln 3s ease-in-out infinite;
}

@keyframes funkeln {
	0%, 100% { transform: rotate(0deg) scale(0.8); opacity: 0.7; }
	50% { transform: rotate(45deg) scale(1.1); opacity: 1; }
}


/* ================================================================ Verrückte Looks (Entwurf 2, freizuschalten)
   Regeln: Animiert wird nur transform und opacity (Compositor, kein Neuzeichnen), jede Daueranimation hat lange
   Ruhephasen oder ist sehr langsam. Alles liegt in der Effekt-Ebene unter Rahmen und Leinwand, also nie über dem
   Spielbild. Bei „Bewegung reduzieren“ steht alles still (unten). */

#konsole .effekte {
	display: none;
	position: absolute;
	inset: 0;
	overflow: hidden;
}

body[data-konsole="amtsschimmel"] #konsole .effekte, body[data-konsole="aquarium"] #konsole .effekte,
body[data-konsole="glibber"] #konsole .effekte, body[data-konsole="sternatem"] #konsole .effekte,
body[data-konsole="glitch"] #konsole .effekte, body[data-konsole="gold"] #konsole .effekte {
	display: block;
}

#konsole .effekte > * {
	display: none;
	position: absolute;
	box-sizing: border-box;
}

/* Bildplätze f1–f3: KI-Bilder, ganzzahlig vergrößert (Größe und Bild setzt anordnenHoch) */
#konsole .effekte .figur {
	background: no-repeat 0 0 / 100% 100%;
	image-rendering: pixelated;
}

#konsole .effekte .f1 { width: var(--f1-b); height: var(--f1-h); background-image: var(--f1-bild); }
#konsole .effekte .f2 { width: var(--f2-b); height: var(--f2-h); background-image: var(--f2-bild); }
#konsole .effekte .f3 { width: var(--f3-b); height: var(--f3-h); background-image: var(--f3-bild); }

/* Aufdrucke (kleine Texte auf der Hülle) */
#konsole .effekte .aufdruck {
	left: 0;
	right: 0;
	text-align: center;
	white-space: pre-line;
	font: 600 9px/1.3 var(--schrift-familie);
	letter-spacing: 0.06em;
	color: var(--aufdruck);
}

#konsole .effekte .a1 { top: calc(var(--oben) + 12px); }
#konsole .effekte .a3 { top: calc(var(--pillen-y) - 52px); }

/* LED-Aufschrift je Look (statt „LICHT“) */
body[data-konsole="amtsschimmel"] #konsole .led-text, body[data-konsole="aquarium"] #konsole .led-text,
body[data-konsole="glibber"] #konsole .led-text, body[data-konsole="sternatem"] #konsole .led-text,
body[data-konsole="glitch"] #konsole .led-text, body[data-konsole="gold"] #konsole .led-text {
	font-size: 0;
}

#konsole .led-text::after {
	content: var(--led-aufschrift);
	font-size: 7px;
}

/* ---------------------------------------------------------------- 9 Amtsschimmel */
body[data-konsole="amtsschimmel"] {
	--huelle: #ddd7c4; --huelle-hell: #ece7d8; --huelle-dunkel: #c4bca6;
	--kopf: linear-gradient(180deg, #5b6656, #4f5a4c);
	--kopf-kante: 0 2px 0 rgba(255, 255, 255, 0.4), 0 3px 0 rgba(0, 0, 0, 0.08);
	--rahmen: #4c5549; --rahmen-flaeche: linear-gradient(180deg, #56604f, #444c41);
	--rahmen-kante: rgba(0, 0, 0, 0.18); --rahmen-leise: rgba(240, 236, 220, 0.65);
	--schrift: #f1ecdc;
	--led: #ffb52e; --led-tief: #c77a0a; --led-schein: rgba(255, 180, 50, 0.5); --led-aufschrift: "IN BEARB.";
	--kreuz: #5d6164; --kreuz-hell: #80858a; --kreuz-tief: #43474a; --kreuz-kante: #2c2f31;
	--knopf: #8a5a34; --knopf-hell: #b98455; --knopf-tief: #5e3a1f; --knopf-kante: #3a2312; --knopf-text: #f4e7cf;
	--knopf-glanz: #e0b98c; --knopf-praegung: rgba(0, 0, 0, 0.35);
	--pille: #8f8b7f; --pille-hell: #a9a598; --pille-kante: #6b675d;
	--aufdruck: #3a4150;
	--gitter: #a8a08a; --gitter-licht: 0.6;
	--mulde: rgba(60, 50, 30, 0.06); --mulde-mitte: rgba(60, 50, 30, 0.12); --mulde-licht: 0.6;
	--akzent: #2f7d3a;
	--glanz: 0.12;
	--schreibmaschine: "American Typewriter", "Courier New", Courier, monospace;
}

/* Papier: Formularlinien und doppelter Heftrand */
body[data-konsole="amtsschimmel"] #konsole .huelle {
	background:
		linear-gradient(90deg, transparent 27px, rgba(196, 70, 60, 0.35) 27px 28px, transparent 28px 31px,
			rgba(196, 70, 60, 0.35) 31px 32px, transparent 32px),
		repeating-linear-gradient(180deg, transparent 0 23px, rgba(90, 110, 140, 0.15) 23px 24px),
		radial-gradient(130% 55% at 12% -5%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 60%),
		linear-gradient(168deg, var(--huelle-hell) 0%, var(--huelle) 42%, var(--huelle-dunkel) 100%);
}

body[data-konsole="amtsschimmel"] #schriftzug {
	font: 700 14px/15px var(--schreibmaschine);
	letter-spacing: 0.3em;
	text-indent: 0.3em;
}

body[data-konsole="amtsschimmel"] #konsole .aufdruck,
body[data-konsole="amtsschimmel"] #konsole .led-text::after {
	font-family: var(--schreibmaschine);
}

body[data-konsole="amtsschimmel"] #konsole .a1,
body[data-konsole="amtsschimmel"] #konsole .a2,
body[data-konsole="amtsschimmel"] #konsole .a3,
body[data-konsole="amtsschimmel"] #konsole .t1,
body[data-konsole="amtsschimmel"] #konsole .t2 {
	display: block;
}

body[data-konsole="amtsschimmel"] #konsole .a1::before {
	content: "FORMULAR 7b · Antrag auf Spielbetrieb (Hochformat)";
}

body[data-konsole="amtsschimmel"] #konsole .a3::before {
	content: "Az. L-7b/0815 · Bearbeitungszeit: Dämmerung · Seite 1 von 1";
	font-size: 8px;
}

/* Eingangsstempel mit dem heutigen Datum (aus konsole.js) */
body[data-konsole="amtsschimmel"] #konsole .a2 {
	left: calc(var(--bild-x) + 4px);
	right: auto;
	top: calc(var(--luecke-o) + 10px);
	padding: 3px 7px;
	border: 2px solid rgba(40, 78, 168, 0.6);
	border-radius: 3px;
	transform: rotate(-7deg);
	font: 700 9.5px/1.35 var(--schreibmaschine);
	letter-spacing: 0.08em;
	color: rgba(40, 78, 168, 0.6);
	text-align: left;
}

body[data-konsole="amtsschimmel"] #konsole .a2::before {
	content: var(--eingang) "\A" "Antrag Nr. 7b-2026-000001";
}

/* Lochung am linken Rand */
body[data-konsole="amtsschimmel"] #konsole .t1,
body[data-konsole="amtsschimmel"] #konsole .t2 {
	left: 8px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 40%, #9d9682, #c4bca6 75%);
	box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.6);
}

body[data-konsole="amtsschimmel"] #konsole .t1 { top: 40%; }
body[data-konsole="amtsschimmel"] #konsole .t2 { top: 64%; }

/* Die LED blinkt behördlich: zweimal je Zyklus umschalten, sonst nichts */
body[data-konsole="amtsschimmel"] #konsole .rahmen .led {
	animation: amt-blinken 2.4s steps(1) infinite;
}

@keyframes amt-blinken {
	0% { opacity: 1; }
	50% { opacity: 0.25; }
}

/* A und B sind Stempel: Griff von oben, Aufdruck darunter, beim Drücken landet ein Abdruck auf dem Papier */
body[data-konsole="amtsschimmel"] #steuerung.hoch #knopf-a,
body[data-konsole="amtsschimmel"] #steuerung.hoch #knopf-b {
	font-family: var(--schreibmaschine);
}

body[data-konsole="amtsschimmel"] #steuerung.hoch #knopf-a::before,
body[data-konsole="amtsschimmel"] #steuerung.hoch #knopf-b::before {
	position: absolute;
	top: calc(100% + 9px);
	left: 50%;
	transform: translateX(-50%);
	font: 700 8px/1 var(--schreibmaschine);
	letter-spacing: 0.12em;
	color: var(--aufdruck);
	white-space: nowrap;
}

body[data-konsole="amtsschimmel"] #steuerung.hoch #knopf-a::before { content: "GENEHMIGT"; }
body[data-konsole="amtsschimmel"] #steuerung.hoch #knopf-b::before { content: "ABGELEHNT"; }

body[data-konsole="amtsschimmel"] #steuerung.hoch #knopf-a::after,
body[data-konsole="amtsschimmel"] #steuerung.hoch #knopf-b::after {
	position: absolute;
	padding: 3px 7px 2px;
	border: 3px double currentColor;
	border-radius: 4px;
	font: 700 13px/1.1 var(--schreibmaschine);
	letter-spacing: 0.12em;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
}

body[data-konsole="amtsschimmel"] #steuerung.hoch #knopf-a::after {
	content: "GENEHMIGT";
	right: 70%;
	bottom: 108%;
	color: rgba(36, 120, 52, 0.9);
}

body[data-konsole="amtsschimmel"] #steuerung.hoch #knopf-b::after {
	content: "ABGELEHNT";
	right: 18%;
	top: 152%;
	color: rgba(178, 36, 30, 0.9);
}

body[data-konsole="amtsschimmel"] #steuerung.hoch #knopf-a.nachklang::after,
body[data-konsole="amtsschimmel"] #steuerung.hoch #knopf-b.nachklang::after {
	animation: stempeln 1.2s ease-out forwards;
}

@keyframes stempeln {
	0% { opacity: 0; transform: rotate(-11deg) scale(1.9); }
	10% { opacity: 0.95; transform: rotate(-11deg) scale(0.94); }
	17% { transform: rotate(-11deg) scale(1); }
	80% { opacity: 0.9; transform: rotate(-11deg) scale(1); }
	100% { opacity: 0; transform: rotate(-11deg) scale(1); }
}

/* ---------------------------------------------------------------- 10 Aquarium */
body[data-konsole="aquarium"] {
	--grund: #0a3a5c;
	--huelle: #2c93b8; --huelle-hell: #74d8e6; --huelle-dunkel: #0b3f68;
	--rahmen: #0e3550; --rahmen-kante: #7fe3f0; --rahmen-leise: rgba(190, 245, 255, 0.6);
	--schrift: #dff8ff;
	--led: #8ff3ff; --led-tief: #1aa5c0; --led-schein: rgba(140, 240, 255, 0.55); --led-aufschrift: "PUMPE";
	--kreuz: #0d3c5a; --kreuz-hell: #2a6e93; --kreuz-tief: #072a40; --kreuz-kante: #041b2b;
	--kreuz-pfeil: rgba(160, 240, 255, 0.35);
	--knopf: #3fb0d4; --knopf-hell: #c8f6ff; --knopf-tief: #1b6f96; --knopf-kante: #0d4766; --knopf-text: #ffffff;
	--knopf-praegung: rgba(0, 40, 60, 0.35);
	--pille: #e7d3a0; --pille-hell: #f6e8c4; --pille-kante: #a88c52;
	--aufdruck: #5e4519;
	--gitter: #8a6d36; --gitter-licht: 0.4;
	--mulde: rgba(0, 30, 60, 0.12); --mulde-mitte: rgba(0, 30, 60, 0.2); --mulde-licht: 0.25;
	--akzent: #8ff3ff;
	--glanz: 0.1;
}

/* Wasser von hell (oben) nach tief, unten Sand; die Kante wirkt wie dickes Aquarienglas */
body[data-konsole="aquarium"] #konsole .huelle {
	background:
		linear-gradient(180deg, transparent calc(var(--pillen-y) - 62px), rgba(222, 200, 150, 0.85) calc(var(--pillen-y) - 34px),
			#d6bd86 calc(var(--pillen-y) - 10px), #c4a66b 100%),
		radial-gradient(120% 35% at 50% 0%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 65%),
		linear-gradient(180deg, #74d8e6 0%, #2c93b8 32%, #156a98 62%, #0b4a72 100%);
	box-shadow: inset 0 0 0 3px rgba(220, 255, 255, 0.35), inset 6px 0 14px rgba(255, 255, 255, 0.18),
		inset -6px 0 14px rgba(0, 30, 60, 0.3);
}

body[data-konsole="aquarium"] #konsole .s1, body[data-konsole="aquarium"] #konsole .s2,
body[data-konsole="aquarium"] #konsole .s3, body[data-konsole="aquarium"] #konsole .t,
body[data-konsole="aquarium"] #konsole .figur, body[data-konsole="aquarium"] #konsole .a1 {
	display: block;
}

body[data-konsole="aquarium"] #konsole .t9, body[data-konsole="aquarium"] #konsole .t10 {
	display: none;
}

body[data-konsole="aquarium"] #konsole .a1::before {
	content: "Bitte nicht ans Glas klopfen.";
	font-style: italic;
	color: rgba(10, 60, 90, 0.75);
}

/* Lichtstrahlen von oben, wiegen sich langsam */
body[data-konsole="aquarium"] #konsole .streifen {
	top: -40px;
	height: 75%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0));
	transform-origin: 50% 0;
	animation: strahl 11s ease-in-out infinite alternate;
}

body[data-konsole="aquarium"] #konsole .s1 { left: 12%; width: 54px; --winkel: 14deg; }
body[data-konsole="aquarium"] #konsole .s2 { left: 46%; width: 80px; --winkel: 6deg; animation-delay: -4s; }
body[data-konsole="aquarium"] #konsole .s3 { left: 74%; width: 40px; --winkel: -8deg; animation-delay: -7s; }

@keyframes strahl {
	from { transform: rotate(calc(var(--winkel) - 4deg)); opacity: 0.6; }
	to { transform: rotate(calc(var(--winkel) + 4deg)); opacity: 1; }
}

/* Luftblasen steigen vom Grund bis unter den Rahmen */
body[data-konsole="aquarium"] #konsole .t {
	top: calc(var(--pillen-y) - 30px);
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.7);
	background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.85) 0 18%, rgba(255, 255, 255, 0.08) 32%);
	opacity: 0;
	animation: blase 9s linear infinite;
	--steigen: calc(var(--luecke-o) - var(--pillen-y) + 10px);
}

body[data-konsole="aquarium"] #konsole .t1 { left: 7%; animation-delay: -1s; }
body[data-konsole="aquarium"] #konsole .t2 { left: 9%; width: 6px; height: 6px; animation-delay: -5.5s; animation-duration: 10s; }
body[data-konsole="aquarium"] #konsole .t3 { left: 47%; width: 11px; height: 11px; animation-delay: -3s; animation-duration: 11s; }
body[data-konsole="aquarium"] #konsole .t4 { left: 51%; width: 6px; height: 6px; animation-delay: -8s; }
body[data-konsole="aquarium"] #konsole .t5 { left: 88%; animation-delay: -2s; animation-duration: 12s; }
body[data-konsole="aquarium"] #konsole .t6 { left: 91%; width: 7px; height: 7px; animation-delay: -7s; animation-duration: 10s; }
body[data-konsole="aquarium"] #konsole .t7 { left: 63%; width: 5px; height: 5px; animation-delay: -4s; animation-duration: 13s; }
body[data-konsole="aquarium"] #konsole .t8 { left: 30%; width: 8px; height: 8px; animation-delay: -9.5s; animation-duration: 12s; }

@keyframes blase {
	0% { transform: translate(0, 0); opacity: 0; }
	6% { opacity: 0.9; }
	25% { transform: translate(5px, calc(var(--steigen) * 0.25)); }
	50% { transform: translate(-4px, calc(var(--steigen) * 0.5)); }
	75% { transform: translate(4px, calc(var(--steigen) * 0.75)); }
	92% { opacity: 0.8; }
	100% { transform: translate(0, var(--steigen)); opacity: 0; }
}

/* Zappelfisch schwimmt in der Lücke unter dem Rahmen hin und her (dreht am Ende um) */
body[data-konsole="aquarium"] #konsole .f1 {
	left: calc(var(--bild-x) + 4px);
	top: calc(var(--luecke-o) + (var(--luecke-u) - var(--luecke-o) - var(--f1-h)) / 2);
	--weg: calc(var(--bild-b) - var(--f1-b) - 8px);
	animation: schwimmen 18s ease-in-out infinite;
}

@keyframes schwimmen {
	0% { transform: translate(0, 0) scaleX(-1); }
	22% { transform: translate(calc(var(--weg) * 0.5), -6px) scaleX(-1); }
	45% { transform: translate(var(--weg), 0) scaleX(-1); }
	50% { transform: translate(var(--weg), 0) scaleX(1); }
	72% { transform: translate(calc(var(--weg) * 0.5), 5px) scaleX(1); }
	95% { transform: translate(0, 0) scaleX(1); }
	100% { transform: translate(0, 0) scaleX(-1); }
}

/* Muschelchen sitzt im Sand (statt des linken Lautsprechers) und klappert ab und zu */
body[data-konsole="aquarium"] #konsole .l-links { display: none; }

body[data-konsole="aquarium"] #konsole .f2 {
	left: calc(var(--laut-l-x) + (var(--laut-b) - var(--f2-b)) / 2);
	top: calc(var(--pillen-y) - var(--f2-h) / 2 + 4px);
	transform-origin: 50% 100%;
	animation: klappern 7s ease-in-out infinite;
}

@keyframes klappern {
	0%, 88%, 100% { transform: scale(1, 1); }
	90% { transform: scale(1.06, 0.86); }
	92% { transform: scale(1, 1); }
	94% { transform: scale(1.06, 0.86); }
	96% { transform: scale(1, 1); }
}

/* Selten: der Tiefendrache stapft weit hinten über den Grund (er kann nicht schwimmen) */
body[data-konsole="aquarium"] #konsole .f3 {
	left: var(--breite);
	top: calc(var(--pillen-y) - var(--f3-h) + 16px);
	opacity: 0;
	filter: brightness(0.6) saturate(0.7);
	animation: tiefgang 40s linear infinite;
}

@keyframes tiefgang {
	0%, 54% { transform: translateX(0); opacity: 0; }
	56% { opacity: 0.55; }
	94% { opacity: 0.55; }
	96%, 100% { transform: translateX(calc(-1 * (var(--breite) + var(--f3-b) + 20px))); opacity: 0; }
}

/* ---------------------------------------------------------------- 11 Glibber */
body[data-konsole="glibber"] {
	--grund: #2a0f52;
	--huelle: #8a4fd8; --huelle-hell: #b07cf0; --huelle-dunkel: #3e1874;
	--rahmen: #3b1670; --rahmen-kante: rgba(220, 190, 255, 0.6); --rahmen-leise: rgba(235, 215, 255, 0.6);
	--schrift: #f6eaff;
	--led: #a6f05a; --led-tief: #4aa31a; --led-schein: rgba(170, 240, 90, 0.55); --led-aufschrift: "GELIERT";
	--kreuz: #4b1c86; --kreuz-hell: #8a55d0; --kreuz-tief: #2e0f5c; --kreuz-kante: #1d0640;
	--kreuz-pfeil: rgba(230, 210, 255, 0.35);
	--knopf: #9be15d; --knopf-hell: #e2ffb8; --knopf-tief: #5ea52a; --knopf-kante: #3b7414; --knopf-text: #2e0f5c;
	--knopf-praegung: rgba(255, 255, 255, 0.5);
	--pille: #9be15d; --pille-hell: #c8f79a; --pille-kante: #4f8f22;
	--aufdruck: #f1e2ff;
	--gitter: #3e1874; --gitter-licht: 0.25;
	--mulde: rgba(30, 0, 60, 0.15); --mulde-mitte: rgba(30, 0, 60, 0.25); --mulde-licht: 0.2;
	--akzent: #a6f05a;
	--glanz: 0.18;
	--rund: "Arial Rounded MT Bold", "SF Pro Rounded", var(--schrift-familie);
}

/* Wackelpudding: Glanzlichter, Tiefe nach innen, dunkle Ränder */
body[data-konsole="glibber"] #konsole .huelle {
	background:
		radial-gradient(55% 14% at 30% 5%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%),
		radial-gradient(10% 26% at 94% 48%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 70%),
		radial-gradient(90% 70% at 50% 46%, rgba(200, 150, 255, 0.5), rgba(120, 60, 200, 0) 70%),
		linear-gradient(170deg, #a46be6 0%, #7a3fcf 40%, #4c1e8c 100%);
	box-shadow: inset 0 0 44px rgba(40, 0, 80, 0.6), inset 0 3px 0 rgba(255, 255, 255, 0.45);
}

body[data-konsole="glibber"] #schriftzug {
	font: 800 15px/15px var(--rund);
	letter-spacing: 0.24em;
	text-indent: 0.24em;
}

body[data-konsole="glibber"] #konsole .figur, body[data-konsole="glibber"] #konsole .t1,
body[data-konsole="glibber"] #konsole .t2, body[data-konsole="glibber"] #konsole .t3,
body[data-konsole="glibber"] #konsole .t4, body[data-konsole="glibber"] #konsole .t5,
body[data-konsole="glibber"] #konsole .t6, body[data-konsole="glibber"] #konsole .a3 {
	display: block;
}

body[data-konsole="glibber"] #konsole .a3::before {
	content: "Nicht zum Verzehr geeignet. Meistens.";
	font-family: var(--rund);
	font-style: italic;
}

/* Glibbeeren stecken im Pudding: vorne kräftig, hinten blasser und unscharf (Tiefe) */
body[data-konsole="glibber"] #konsole .figur {
	animation: schweben 7s ease-in-out infinite alternate;
}

body[data-konsole="glibber"] #konsole .f1 {
	left: calc(var(--bild-x) + 10px);
	top: calc(var(--luecke-o) + (var(--luecke-u) - var(--luecke-o) - var(--f1-h)) / 2);
	opacity: 0.95;
}

body[data-konsole="glibber"] #konsole .f2 {
	left: calc(var(--breite) / 2 - var(--f2-b) / 2);
	top: calc(var(--steuer-u) + (var(--pillen-y) - 26px - var(--steuer-u) - var(--f2-h)) / 2);
	opacity: 0.7;
	filter: blur(0.5px);
	animation-delay: -3s;
}

body[data-konsole="glibber"] #konsole .f3 {
	left: calc(var(--bild-x) + var(--bild-b) - var(--f3-b) - 40px);
	top: calc(var(--luecke-o) + 14px);
	opacity: 0.4;
	filter: blur(1px);
	animation-delay: -5s;
}

@keyframes schweben {
	from { transform: translate(0, 0) rotate(-3deg); }
	to { transform: translate(3px, -5px) rotate(3deg); }
}

/* Luftblasen im Pudding (stehen still) */
body[data-konsole="glibber"] #konsole .t {
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.75) 0 20%, rgba(255, 255, 255, 0.12) 45%,
		rgba(255, 255, 255, 0.05) 70%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

body[data-konsole="glibber"] #konsole .t1 { left: 14%; top: 22%; width: 14px; height: 14px; }
body[data-konsole="glibber"] #konsole .t2 { left: 80%; top: calc(var(--luecke-o) + 8px); width: 9px; height: 9px; }
body[data-konsole="glibber"] #konsole .t3 { left: 6%; top: 77%; width: 11px; height: 11px; }
body[data-konsole="glibber"] #konsole .t4 { left: 90%; top: 70%; width: 16px; height: 16px; }
body[data-konsole="glibber"] #konsole .t5 { left: 58%; top: calc(var(--steuer-u) + 18px); width: 7px; height: 7px; }
body[data-konsole="glibber"] #konsole .t6 { left: 37%; top: calc(var(--oben) + 12px); width: 8px; height: 8px; }

/* Jeder Druck: die ganze Hülle wabbelt nach (das Spielbild bleibt ruhig), der Knopf quetscht sich */
body[data-konsole="glibber"].wabbeln #konsole {
	transform-origin: 50% 62%;
	animation: wabbeln 0.75s ease-out;
}

@keyframes wabbeln {
	0% { transform: scale(1, 1); }
	18% { transform: scale(1.012, 0.988); }
	40% { transform: scale(0.992, 1.008); }
	62% { transform: scale(1.005, 0.995); }
	82% { transform: scale(0.998, 1.002); }
	100% { transform: scale(1, 1); }
}

body[data-konsole="glibber"] #steuerung.hoch .knopf.nachklang,
body[data-konsole="glibber"] #steuerung.hoch #kreuz.nachklang {
	animation: quetschen 0.6s ease-out;
}

@keyframes quetschen {
	0% { transform: scale(1, 1); }
	20% { transform: scale(1.12, 0.86); }
	45% { transform: scale(0.93, 1.07); }
	70% { transform: scale(1.03, 0.97); }
	100% { transform: scale(1, 1); }
}

body[data-konsole="glibber"] #steuerung.hoch #knopf-a, body[data-konsole="glibber"] #steuerung.hoch #knopf-b {
	font-family: var(--rund);
	background: radial-gradient(circle at 34% 26%, #ffffff 0, var(--knopf-hell) 14%, rgba(155, 225, 93, 0.92) 50%,
		rgba(94, 165, 42, 0.95) 100%);
}

/* ---------------------------------------------------------------- 12 Sternatem */
body[data-konsole="sternatem"] {
	--grund: #06071c;
	--huelle: #141043; --huelle-hell: #2a1d6e; --huelle-dunkel: #06071c;
	--rahmen: #0b0b2a; --rahmen-kante: rgba(200, 210, 255, 0.55); --rahmen-leise: rgba(210, 220, 255, 0.55);
	--rahmen-glow: 0 0 30px 2px rgba(150, 170, 255, 0.18);
	--schrift: #e8ecff;
	--led: #cfe0ff; --led-tief: #6d86ff; --led-schein: rgba(170, 190, 255, 0.55); --led-aufschrift: "ATEM";
	--kreuz: #1a1a4a; --kreuz-hell: #3a3a86; --kreuz-tief: #0c0c2c; --kreuz-kante: #050518;
	--kreuz-pfeil: rgba(200, 210, 255, 0.35);
	--knopf: #dfe6ff; --knopf-hell: #ffffff; --knopf-tief: #a9b6e8; --knopf-kante: #5c67a6; --knopf-text: #23205e;
	--knopf-praegung: rgba(255, 255, 255, 0.8);
	--pille: #2a2868; --pille-hell: #403d8c; --pille-kante: #121040;
	--aufdruck: #c9d2ff;
	--gitter: rgba(200, 210, 255, 0.4); --gitter-licht: 0.05;
	--mulde: rgba(150, 160, 255, 0.05); --mulde-mitte: rgba(150, 160, 255, 0.08); --mulde-licht: 0.08;
	--akzent: #cfe0ff;
	--glanz: 0.04;
}

/* Nachthimmel mit Milchstraße */
body[data-konsole="sternatem"] #konsole .huelle {
	background:
		linear-gradient(118deg, transparent 30%, rgba(160, 140, 255, 0.1) 42%, rgba(220, 200, 255, 0.14) 48%,
			rgba(160, 140, 255, 0.08) 55%, transparent 66%),
		radial-gradient(80% 50% at 80% 100%, rgba(120, 40, 160, 0.35), transparent 70%),
		linear-gradient(180deg, #06071c 0%, #141043 45%, #2a1458 100%);
}

body[data-konsole="sternatem"] #konsole .s1, body[data-konsole="sternatem"] #konsole .s2,
body[data-konsole="sternatem"] #konsole .t, body[data-konsole="sternatem"] #konsole .glanz {
	display: block;
}

/* Zwei Sternfelder, die sehr langsam ziehen (je genau eine Kachel weit: nahtlos) */
body[data-konsole="sternatem"] #konsole .streifen {
	inset: -180px;
}

body[data-konsole="sternatem"] #konsole .s1 {
	background:
		radial-gradient(circle at 12px 18px, rgba(255, 255, 255, 0.95) 0 0.8px, transparent 1.5px),
		radial-gradient(circle at 51px 44px, rgba(255, 255, 255, 0.7) 0 0.7px, transparent 1.4px),
		radial-gradient(circle at 73px 9px, rgba(200, 212, 255, 0.85) 0 0.9px, transparent 1.6px),
		radial-gradient(circle at 30px 60px, rgba(255, 240, 210, 0.7) 0 0.6px, transparent 1.3px);
	background-size: 89px 67px;
	animation: ziehen1 150s linear infinite;
}

body[data-konsole="sternatem"] #konsole .s2 {
	background:
		radial-gradient(circle at 40px 30px, rgba(255, 255, 255, 1) 0 1.2px, rgba(190, 205, 255, 0.35) 2px, transparent 4px),
		radial-gradient(circle at 120px 95px, rgba(220, 230, 255, 0.95) 0 1.1px, rgba(190, 205, 255, 0.3) 2px, transparent 3.5px),
		radial-gradient(circle at 95px 12px, rgba(255, 230, 200, 0.9) 0 1px, transparent 2.5px);
	background-size: 157px 131px;
	animation: ziehen2 240s linear infinite;
}

@keyframes ziehen1 { to { transform: translate(-89px, -67px); } }
@keyframes ziehen2 { to { transform: translate(-157px, -131px); } }

/* Funkelsterne (Blendensterne) an festen Plätzen */
body[data-konsole="sternatem"] #konsole .t {
	width: 18px;
	height: 18px;
	background:
		radial-gradient(circle, rgba(255, 255, 255, 1) 0 1.4px, rgba(200, 215, 255, 0.4) 2.5px, transparent 5px),
		linear-gradient(90deg, transparent, rgba(220, 230, 255, 0.9) 50%, transparent) 50% 50% / 100% 1px no-repeat,
		linear-gradient(0deg, transparent, rgba(220, 230, 255, 0.9) 50%, transparent) 50% 50% / 1px 100% no-repeat;
	opacity: 0.3;
	animation: funkeln-stern 6s ease-in-out infinite;
}

body[data-konsole="sternatem"] #konsole .t1 { left: 8%; top: calc(var(--oben) + 10px); }
body[data-konsole="sternatem"] #konsole .t2 { left: 84%; top: calc(var(--oben) + 24px); animation-delay: -2s; animation-duration: 7s; }
body[data-konsole="sternatem"] #konsole .t3 { left: 18%; top: calc(var(--luecke-o) + 30px); animation-delay: -4s; }
body[data-konsole="sternatem"] #konsole .t4 { left: 72%; top: calc(var(--luecke-o) + 12px); animation-delay: -1s; animation-duration: 8s; }
body[data-konsole="sternatem"] #konsole .t5 { left: 46%; top: calc(var(--steuer-u) + 30px); animation-delay: -3.5s; }
body[data-konsole="sternatem"] #konsole .t6 { left: 4%; top: 62%; animation-delay: -5s; animation-duration: 9s; }
body[data-konsole="sternatem"] #konsole .t7 { left: 90%; top: 58%; animation-delay: -6s; animation-duration: 7.5s; }
body[data-konsole="sternatem"] #konsole .t8 { left: 60%; top: calc(var(--luecke-o) + 46px); width: 12px; height: 12px; animation-delay: -2.5s; }
body[data-konsole="sternatem"] #konsole .t9 { left: 30%; top: calc(var(--oben) + 30px); width: 12px; height: 12px; animation-delay: -4.5s; }
body[data-konsole="sternatem"] #konsole .t10 { left: 92%; top: 88%; width: 12px; height: 12px; animation-delay: -1.5s; }

@keyframes funkeln-stern {
	0%, 100% { opacity: 0.25; transform: scale(0.7) rotate(0deg); }
	50% { opacity: 1; transform: scale(1.1) rotate(45deg); }
}

/* Sternschnuppe: alle 12 s einmal, kurz */
body[data-konsole="sternatem"] #konsole .glanz {
	left: 62%;
	top: calc(var(--oben) + 6px);
	width: 130px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(200, 215, 255, 0.4) 30%, rgba(255, 255, 255, 0));
	opacity: 0;
	animation: schnuppe 12s ease-in infinite;
}

@keyframes schnuppe {
	0%, 84% { opacity: 0; transform: translate(0, 0) rotate(-150deg); }
	86% { opacity: 1; }
	95% { opacity: 0.9; transform: translate(-200px, 110px) rotate(-150deg); }
	98%, 100% { opacity: 0; transform: translate(-230px, 128px) rotate(-150deg); }
}

/* Der Schriftzug glimmt wie Atem (Leuchtkopie darüber, nur die Deckkraft ändert sich) */
body[data-konsole="sternatem"] #schriftzug::after {
	content: "LUMORIA";
	position: absolute;
	inset: 0;
	padding-top: inherit;
	color: #dfe6ff;
	-webkit-text-fill-color: #dfe6ff;
	text-shadow: 0 0 6px rgba(190, 205, 255, 0.95), 0 0 16px rgba(150, 170, 255, 0.8);
	opacity: 0.15;
	animation: atem 7s ease-in-out infinite;
}

@keyframes atem {
	0%, 100% { opacity: 0.12; }
	50% { opacity: 1; }
}

/* ---------------------------------------------------------------- 13 GL1TCH */
/* Der Look-Wechsel ist hängen geblieben: oben Lichtkapsel, unten Klassik, dazwischen ein Riss. Alle 8 s
   verrutschen kurz Streifen und Pixel (0,4 s, nur kleine Flächen – kein Blitzen des ganzen Bildschirms). */
body[data-konsole="glitch"] {
	--grund: #1c1850;
	--huelle: #2a2468; --huelle-hell: #433a8c; --huelle-dunkel: #bdb5a7;
	--rahmen: #141236; --rahmen-kante: #d8a63c; --rahmen-leise: rgba(247, 214, 120, 0.55);
	--schrift: #f7d66a;
	--led: #ff4a3a; --led-tief: #b51a10; --led-schein: rgba(255, 70, 50, 0.5); --led-aufschrift: "LICHT?";
	--kreuz: #34333b; --kreuz-hell: #56545f; --kreuz-tief: #1a1846; --kreuz-kante: #19181d;
	--kreuz-pfeil: rgba(255, 255, 255, 0.14);
	--knopf: #6b52c4; --knopf-hell: #9d88ec; --knopf-tief: #46348f; --knopf-kante: #30236a; --knopf-text: #f3efff;
	--pille: #8f897e; --pille-hell: #a8a296; --pille-kante: #6b665c;
	--aufdruck: #4a3f8c;
	--gitter: #9c9486; --gitter-licht: 0.55;
	--mulde: rgba(80, 70, 50, 0.07); --mulde-mitte: rgba(80, 70, 50, 0.13); --mulde-licht: 0.55;
	--akzent: #ff3df0;
	--riss: calc(var(--luecke-o) + (var(--luecke-u) - var(--luecke-o)) * 0.55);
}

body[data-konsole="glitch"] #konsole .huelle {
	background:
		repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 3px),
		linear-gradient(180deg, #2a2468 0%, #433a8c 9%, #2a2468 40%, #221d5c var(--riss), #d8d2c6 var(--riss),
			#ebe6dc calc(var(--riss) + 6px), #d8d2c6 75%, #bdb5a7 100%);
}

/* A golden wie die Lichtkapsel, B violett wie Klassik: halb so, halb so */
body[data-konsole="glitch"] #steuerung.hoch #knopf-a {
	color: #2a2160;
	background: radial-gradient(circle at 34% 28%, #fff 0, #ffe089 16%, #f2b63a 52%, #c97d1b 100%);
	box-shadow: 0 4px 0 #7d4a10, 0 8px 10px rgba(0, 0, 0, 0.3), inset 0 -3px 5px rgba(0, 0, 0, 0.16);
}

/* Kreuz: obere Hälfte Nachtblau, untere Grau – mit hartem Schnitt */
body[data-konsole="glitch"] #kreuz .arm, body[data-konsole="glitch"] #kreuz .mitte {
	background-image: linear-gradient(180deg, #2c2a6e 0 50%, #3a3942 50% 100%);
}

body[data-konsole="glitch"] #konsole .streifen, body[data-konsole="glitch"] #konsole .t1,
body[data-konsole="glitch"] #konsole .t2, body[data-konsole="glitch"] #konsole .t3,
body[data-konsole="glitch"] #konsole .t4, body[data-konsole="glitch"] #konsole .t5,
body[data-konsole="glitch"] #konsole .t6, body[data-konsole="glitch"] #konsole .a3 {
	display: block;
}

body[data-konsole="glitch"] #konsole .a3::before {
	content: "Look-Wechsel hängt. Bitte nicht ausschalten.\A AKT 1 UND 2 DURCHGESPIELT.";
	font-family: "Menlo", "Courier New", monospace;
	font-size: 8px;
	letter-spacing: 0.08em;
}

/* Verrutschte Streifen am Riss (stehen schief, springen bei jedem Aussetzer) */
body[data-konsole="glitch"] #konsole .streifen {
	left: 0;
	right: 0;
	animation: aussetzer 8s steps(1) infinite;
}

body[data-konsole="glitch"] #konsole .s1 {
	top: calc(var(--riss) - 12px);
	height: 10px;
	left: 22%;
	right: 40%;
	background: #221d5c;
	--ruck: 16px;
}

body[data-konsole="glitch"] #konsole .s2 {
	top: calc(var(--riss) + 4px);
	height: 7px;
	left: 48%;
	right: 6%;
	background: linear-gradient(90deg, #d8d2c6, #ebe6dc);
	--ruck: -22px;
}

body[data-konsole="glitch"] #konsole .s3 {
	top: calc(var(--bild-y) - var(--rahmen-o) - 14px);
	height: 6px;
	background: rgba(255, 61, 240, 0.35);
	opacity: 0;
	--ruck: 30px;
	animation-name: aussetzer-blitz;
}

@keyframes aussetzer {
	0% { transform: translateX(0); }
	70% { transform: translateX(var(--ruck)); }
	71.5% { transform: translateX(calc(var(--ruck) * -0.6)); }
	73% { transform: translateX(calc(var(--ruck) * 1.4)); }
	74.5% { transform: translateX(0); }
}

@keyframes aussetzer-blitz {
	0% { opacity: 0; transform: translateX(0); }
	70% { opacity: 1; transform: translateX(var(--ruck)); }
	72% { opacity: 0; }
	73% { opacity: 0.8; transform: translateX(calc(var(--ruck) * -1)); }
	74.5% { opacity: 0; transform: translateX(0); }
}

/* Verrutschte Pixel: kleine Farbblöcke, nur während des Aussetzers sichtbar */
body[data-konsole="glitch"] #konsole .t {
	width: 10px;
	height: 10px;
	opacity: 0;
	animation: pixel-aussetzer 8s steps(1) infinite;
}

body[data-konsole="glitch"] #konsole .t1 { left: 14%; top: calc(var(--luecke-o) + 8px); background: #ff3df0; }
body[data-konsole="glitch"] #konsole .t2 { left: 15.5%; top: calc(var(--luecke-o) + 18px); width: 20px; background: #3df0ff; }
body[data-konsole="glitch"] #konsole .t3 { left: 81%; top: calc(var(--riss) + 14px); width: 14px; height: 6px; background: #b6ff3d; }
body[data-konsole="glitch"] #konsole .t4 { left: 70%; top: calc(var(--oben) + 20px); width: 8px; height: 8px; background: #ffd23d; }
body[data-konsole="glitch"] #konsole .t5 { left: 6%; top: calc(var(--steuer-u) + 24px); width: 16px; height: 8px; background: #3df0ff; }
body[data-konsole="glitch"] #konsole .t6 { left: 88%; top: calc(var(--steuer-u) + 10px); width: 8px; height: 14px; background: #ff3df0; }

@keyframes pixel-aussetzer {
	0% { opacity: 0; }
	70% { opacity: 1; }
	72% { opacity: 0; }
	73% { opacity: 1; }
	74.5% { opacity: 0; }
}

/* Schriftzug mit Farbversatz: zwei Geisterkopien in Magenta und Cyan */
body[data-konsole="glitch"] #schriftzug::before,
body[data-konsole="glitch"] #schriftzug::after {
	content: "LUMORIA";
	position: absolute;
	inset: 0;
	padding-top: inherit;
	opacity: 0.55;
	animation: geist 8s steps(1) infinite;
}

body[data-konsole="glitch"] #schriftzug::before {
	color: #ff3df0;
	-webkit-text-fill-color: #ff3df0;
	transform: translateX(-1.5px);
	--ruck: -5px;
}

body[data-konsole="glitch"] #schriftzug::after {
	color: #3df0ff;
	-webkit-text-fill-color: #3df0ff;
	transform: translateX(1.5px);
	--ruck: 6px;
}

@keyframes geist {
	0% { transform: translateX(calc(var(--ruck) * 0.3)); opacity: 0.5; }
	70% { transform: translateX(var(--ruck)); opacity: 0.95; }
	73% { transform: translateX(calc(var(--ruck) * -0.8)); }
	74.5% { transform: translateX(calc(var(--ruck) * 0.3)); opacity: 0.5; }
}

/* LED: an, nur beim Aussetzer kurz weg */
body[data-konsole="glitch"] #konsole .rahmen .led {
	animation: led-aussetzer 8s steps(1) infinite;
}

@keyframes led-aussetzer {
	0% { opacity: 1; }
	70% { opacity: 0.1; }
	71.5% { opacity: 1; }
	72.5% { opacity: 0.1; }
	74.5% { opacity: 1; }
}

/* ---------------------------------------------------------------- 14 Goldene Lichtkapsel */
body[data-konsole="gold"] {
	--grund: #3a2706;
	--huelle: #c9962f; --huelle-hell: #ffe9a0; --huelle-dunkel: #6e4c0f;
	--rahmen: #5a3d0b; --rahmen-flaeche: linear-gradient(180deg, #6b4a10, #4a3108);
	--rahmen-kante: #ffe28a; --rahmen-leise: rgba(255, 233, 160, 0.75);
	--rahmen-glow: 0 0 26px 2px rgba(255, 220, 120, 0.3);
	--schrift: #ffe9a6;
	--schrift-verlauf: linear-gradient(180deg, #fffbe6 0%, #ffd25a 55%, #c98d1e 100%);
	--schrift-fuellung: transparent;
	--led: #ffffff; --led-tief: #ffe9a0; --led-schein: rgba(255, 240, 190, 0.85); --led-aufschrift: "24 KARAT";
	--kreuz: #9a6d18; --kreuz-hell: #f6d985; --kreuz-tief: #5a3d0b; --kreuz-kante: #3a2706;
	--kreuz-pfeil: rgba(255, 245, 210, 0.55);
	--knopf: #b3001b; --knopf-hell: #ff8fa0; --knopf-tief: #6d0010; --knopf-kante: #4a3108; --knopf-text: #fff4f4;
	--pille: #b8862b; --pille-hell: #ffe9a0; --pille-kante: #6e4c0f;
	--aufdruck: #4a3108;
	--gitter: #6e4c0f; --gitter-licht: 0.5;
	--mulde: rgba(80, 50, 0, 0.14); --mulde-mitte: rgba(80, 50, 0, 0.22); --mulde-licht: 0.5;
	--akzent: #ffe28a;
	--glanz: 0.2;
}

/* Gebürstetes Gold mit mehreren Lichtkanten */
body[data-konsole="gold"] #konsole .huelle {
	background:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, rgba(0, 0, 0, 0.035) 1px 2px, transparent 2px 3px),
		linear-gradient(160deg, #7a5512 0%, #f7df86 14%, #c9962f 30%, #ffefb0 46%, #a8761c 62%, #f0cf6c 78%, #6e4c0f 100%);
}

body[data-konsole="gold"] #konsole .glanz, body[data-konsole="gold"] #konsole .f1,
body[data-konsole="gold"] #konsole .a1, body[data-konsole="gold"] #konsole .a3 {
	display: block;
}

body[data-konsole="gold"] #konsole .a1::before {
	content: "LIMITIERTE AUFLAGE · 1 STÜCK";
	letter-spacing: 0.22em;
}

body[data-konsole="gold"] #konsole .a3::before {
	content: "* vergoldet. Innen hohl.";
	font-style: italic;
}

/* Wandernder Glanz: alle 7 s einmal quer über die Hülle */
body[data-konsole="gold"] #konsole .glanz {
	left: 0;
	top: 0;
	width: 45%;
	height: 100%;
	background: linear-gradient(105deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.55) 48%, rgba(255, 255, 255, 0) 76%);
	transform: translateX(-130%);
	animation: glanzlauf 7s ease-in-out infinite;
}

@keyframes glanzlauf {
	0% { transform: translateX(-130%); }
	20%, 100% { transform: translateX(340%); }
}

/* Emblem: die Lichtkapsel aus dem App-Symbol (KI-Bild, freigestellt) */
body[data-konsole="gold"] #konsole .f1 {
	left: calc(var(--breite) / 2 - var(--f1-b) / 2);
	top: calc(var(--luecke-o) + (var(--luecke-u) - var(--luecke-o) - var(--f1-h)) / 2);
	filter: drop-shadow(0 0 5px rgba(255, 245, 200, 0.8)) drop-shadow(0 2px 0 rgba(90, 60, 10, 0.5));
}

/* A Rubin, B Saphir, in Gold gefasst */
body[data-konsole="gold"] #steuerung.hoch #knopf-a, body[data-konsole="gold"] #steuerung.hoch #knopf-b {
	box-shadow: 0 0 0 3px #f2d27a, 0 0 0 4.5px #6e4c0f, 0 5px 0 #4a3108, 0 9px 10px rgba(0, 0, 0, 0.3),
		inset 0 2px 1px rgba(255, 255, 255, 0.4);
}

body[data-konsole="gold"] #steuerung.hoch #knopf-a {
	background:
		radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.9) 0 7%, rgba(255, 255, 255, 0) 22%),
		conic-gradient(from 20deg, #ff5a6e, #b3001b, #ff8fa0, #7a0012, #ff3352, #b3001b, #ff7b8c, #7a0012, #ff5a6e);
}

body[data-konsole="gold"] #steuerung.hoch #knopf-b {
	background:
		radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.9) 0 7%, rgba(255, 255, 255, 0) 22%),
		conic-gradient(from 10deg, #5a8bff, #0a2a8a, #9bb8ff, #061a5c, #3f6dff, #0a2a8a, #7fa2ff, #061a5c, #5a8bff);
}

body[data-konsole="gold"] #steuerung.hoch #knopf-a.an, body[data-konsole="gold"] #steuerung.hoch #knopf-b.an {
	box-shadow: 0 0 0 3px #f2d27a, 0 0 0 4.5px #6e4c0f, 0 2px 0 #4a3108, 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Bling: Lichtfunke beim Drücken */
body[data-konsole="gold"] #steuerung.hoch .knopf.nachklang::after,
body[data-konsole="gold"] #steuerung.hoch #kreuz.nachklang::after {
	content: '';
	position: absolute;
	right: -8px;
	top: -10px;
	width: 26px;
	height: 26px;
	background:
		radial-gradient(circle, #fff 0 2px, rgba(255, 245, 200, 0.6) 3px, transparent 6px),
		linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95) 50%, transparent) 50% 50% / 100% 2px no-repeat,
		linear-gradient(0deg, transparent, rgba(255, 255, 255, 0.95) 50%, transparent) 50% 50% / 2px 100% no-repeat;
	opacity: 0;
	animation: bling 0.7s ease-out;
}

@keyframes bling {
	0% { opacity: 0; transform: scale(0.2) rotate(0deg); }
	30% { opacity: 1; transform: scale(1.2) rotate(30deg); }
	100% { opacity: 0; transform: scale(0.6) rotate(90deg); }
}

/* ---------------------------------------------------------------- Freischalten: Einblendung */
#einblendung .punkte i.zu {
	background: transparent;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

#einblendung .punkte i.zu.an {
	background: rgba(255, 255, 255, 0.35);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);
}

#einblendung.gesperrt .name {
	font-size: 18px;
	letter-spacing: 0.3em;
	text-indent: 0.3em;
}

#einblendung.gesperrt .hinweis, #einblendung.neu .hinweis {
	max-width: 250px;
	white-space: normal;
	text-align: center;
	color: #e8e4ff;
}

#einblendung.neu {
	background: linear-gradient(180deg, rgba(60, 40, 10, 0.92), rgba(30, 20, 5, 0.92));
	box-shadow: 0 0 0 1.5px #ffd65a, 0 0 22px rgba(255, 214, 90, 0.45), 0 4px 14px rgba(0, 0, 0, 0.35);
	color: #fff3c4;
}

/* Freischalt-Moment: die LED funkelt dreimal */
body.neu-look #konsole .rahmen .led {
	animation: neu-funkeln 0.5s ease-in-out 3;
}

@keyframes neu-funkeln {
	50% { transform: scale(1.9); }
}

/* Bewegung reduzieren: alle Effekte stehen still; der Stempel erscheint ohne Flug */
@media (prefers-reduced-motion: reduce) {
	#konsole .effekte *, body.wabbeln #konsole, #steuerung .knopf.nachklang, #steuerung #kreuz.nachklang,
	#steuerung .knopf.nachklang::after, #steuerung #kreuz.nachklang::after, #schriftzug::before, #schriftzug::after,
	body #konsole .rahmen .led {
		animation: none !important;
	}
	body[data-konsole="amtsschimmel"] #steuerung.hoch .knopf.nachklang::after {
		opacity: 0.9;
		transform: rotate(-11deg);
	}
	body[data-konsole="aquarium"] #konsole .t, body[data-konsole="aquarium"] #konsole .f3,
	body[data-konsole="glitch"] #konsole .t, body[data-konsole="sternatem"] #konsole .glanz,
	body[data-konsole="gold"] #konsole .glanz {
		display: none;
	}
}

/* ---------------------------------------------------------------- Bewegung nur, wenn erwünscht */
@media (prefers-reduced-motion: reduce) {
	#konsole .lumon.hopp, #konsole .rahmen .led, #konsole .rahmen .led::before, #konsole .rahmen .led::after {
		animation: none !important;
	}
	body.bereit {
		transition: none;
	}
}

/* ---- Zustand des Spiels (lumoria.js, src/ui/page_bridge.gd): Joystick nur in der freien Oberwelt ---- */
#steuerung[data-zustand]:not([data-zustand="frei"]) #stick-zone {
	pointer-events: none;
}

#steuerung[data-zustand]:not([data-zustand="frei"]) #stick:not(.aktiv) {
	opacity: 0;
}

/* SELECT (Karte) wirkt nur in der Oberwelt und in der Karte selbst: in Kampf, Text, Auswahl und Namenseingabe blass */
#steuerung[data-zustand="kampf"] #knopf-select,
#steuerung[data-zustand="text"] #knopf-select,
#steuerung[data-zustand="auswahl"] #knopf-select,
#steuerung[data-zustand="name"] #knopf-select {
	opacity: 0.35;
}

/* Eine Auswahl (JA/NEIN …) liegt quer genau unter A/B: dort antippen statt drücken */
#steuerung.quer[data-zustand="auswahl"] #knopf-a,
#steuerung.quer[data-zustand="auswahl"] #knopf-b {
	visibility: hidden;
}

/* ---- Namensfeld für die Handy-Tastatur über der Namenszeile des Spiels ---- */
#name-feld,
#chat-feld {
	position: absolute;
	display: flex;
	gap: 6px;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	box-sizing: border-box;
	pointer-events: auto;
}

#name-feld[hidden],
#chat-feld[hidden] {
	display: none;
}

#name-eingabe,
#chat-eingabe {
	flex: 1;
	width: auto;
	min-width: 0;
	height: 100%;
	box-sizing: border-box;
	padding: 0 0.6rem;
	font-size: 16px; /* iOS zoomt sonst beim Antippen hinein */
	font-weight: 600;
	color: #383840;
	background: #f8f8f8;
	border: 2px solid #303c58;
	border-radius: 4px;
	-webkit-user-select: text;
	user-select: text;
	touch-action: manipulation;
}

#name-feld button,
#chat-feld button {
	height: 100%;
	padding: 0 0.9rem;
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
	background: #e85838;
	border: 2px solid #a83020;
	border-radius: 4px;
	touch-action: manipulation;
}

/* ---- Tastenzeile auf der Startseite (Computer ohne Touch) ---- */
#tasten {
	position: fixed;
	z-index: 10;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 0.5rem 16px max(0.5rem, env(safe-area-inset-bottom));
	text-align: center;
	font-size: 0.8rem;
	color: #c8d4f0;
	background: rgba(16, 16, 24, 0.92);
	pointer-events: none;
}

#tasten[hidden] {
	display: none;
}

/* Die Kontoseite endet über der Tastenzeile (sonst läge sie bei kleinen Fenstern über dem Knopf) */
body:has(#tasten:not([hidden])) #konto {
	padding-bottom: 4.5rem;
}

/* ================================================================ Saison-Look Winterleuchten (Dezember)
   Branch design-hochformat, docs/17_konsolen_looks.md: Lukas' Wahl 17.10.2026 („dazu Saison-Look Winterleuchten im
   Dezember“). Frei schaltet ihn das Spiel nach dem Kalender (core/konsolen.gd, Abschnitt „saison“ in
   data/konsolen.json); einmal je Saison legt die Konsole ihn von selbst an, am Ende geht sie zum Look davor zurück
   (ui/konsole_bridge.gd). Bilder nur aus der KI-Pipeline: Schneeflocke und Lichtkugel aus art/ki/effekte,
   zusammengesetzt bzw. umgefärbt von tools/ki/konsole_winter.py (konsole_schnee.png, konsole_kugel_<farbe>.png).
   Gleiche Regeln wie die verrückten Looks: nur transform und opacity animiert, alles unter Rahmen und Leinwand. */
body[data-konsole="winterleuchten"] {
	--grund: #0b1a33;
	--huelle: #17365e; --huelle-hell: #2b5d8f; --huelle-dunkel: #0b1a33;
	--rahmen: #0b1a33; --rahmen-flaeche: linear-gradient(180deg, #13284a, #0a1830);
	--rahmen-kante: #bfe8ff; --rahmen-leise: rgba(200, 235, 255, 0.7);
	--rahmen-glow: 0 0 26px 2px rgba(170, 225, 255, 0.22);
	--schrift: #f2fbff;
	--schrift-schatten: 0 0 6px rgba(160, 220, 255, 0.85), 0 1px 0 rgba(10, 30, 60, 0.6);
	--led: #c9f1ff; --led-tief: #4fb6e8; --led-schein: rgba(150, 225, 255, 0.6); --led-aufschrift: "FROST";
	--kreuz: #1d3b5c; --kreuz-hell: #3f6d99; --kreuz-tief: #0e2038; --kreuz-kante: #071426;
	--kreuz-pfeil: rgba(200, 235, 255, 0.4);
	--knopf: #d8343c; --knopf-hell: #ff8f8a; --knopf-tief: #8e1620; --knopf-kante: #4a0c12; --knopf-text: #fff6f2;
	--knopf-praegung: rgba(90, 0, 10, 0.35);
	--pille: #2b4f7e; --pille-hell: #4a77ab; --pille-kante: #13284a;
	--aufdruck: #1d3b5c;
	--gitter: #6f8fb3; --gitter-licht: 0.6;
	--mulde: rgba(5, 15, 35, 0.16); --mulde-mitte: rgba(5, 15, 35, 0.26); --mulde-licht: 0.14;
	--akzent: #c9f1ff;
	--glanz: 0.06;
}

/* Winternacht mit leisem Nordlicht oben, unten eine Schneewehe (dort liegen START, Ton und die Lautsprecher) */
body[data-konsole="winterleuchten"] #konsole .huelle {
	background:
		linear-gradient(180deg, transparent calc(var(--pillen-y) - 74px), rgba(232, 243, 255, 0.92) calc(var(--pillen-y) - 50px),
			#f4f9ff calc(var(--pillen-y) - 24px), #dbe8f5 100%),
		radial-gradient(90% 26% at 30% 0%, rgba(90, 230, 180, 0.16), transparent 70%),
		radial-gradient(70% 22% at 85% 4%, rgba(120, 160, 255, 0.14), transparent 70%),
		linear-gradient(180deg, #0b1a33 0%, #17365e 45%, #2b5d8f 100%);
}

body[data-konsole="winterleuchten"] #konsole .effekte {
	display: block;
}

body[data-konsole="winterleuchten"] #konsole .led-text {
	font-size: 0;
}

body[data-konsole="winterleuchten"] #konsole .streifen, body[data-konsole="winterleuchten"] #konsole .t1,
body[data-konsole="winterleuchten"] #konsole .t2, body[data-konsole="winterleuchten"] #konsole .t3,
body[data-konsole="winterleuchten"] #konsole .t4, body[data-konsole="winterleuchten"] #konsole .t5,
body[data-konsole="winterleuchten"] #konsole .t6, body[data-konsole="winterleuchten"] #konsole .t7,
body[data-konsole="winterleuchten"] #konsole .a1, body[data-konsole="winterleuchten"] #konsole .a3 {
	display: block;
}

body[data-konsole="winterleuchten"] #konsole .a1::before {
	content: "✶ Frohes Winterleuchten ✶";
	letter-spacing: 0.18em;
	color: rgba(220, 240, 255, 0.85);
}

body[data-konsole="winterleuchten"] #konsole .a3::before {
	content: "Bei Frost bitte nicht ablecken.";
	font-style: italic;
}

/* Schnee: zwei Lagen der KI-Schneekachel (96 × 64), die nahe in Spielpixel-Größe, die ferne halb so groß und blasser.
   Jede Lage rieselt genau eine Kachel weit und beginnt dann nahtlos von vorn (sehr langsam: etwa 6 bzw. 3 px/s).
   Über der Schneewehe läuft der Schnee aus (Maske), damit START und Ton ruhig bleiben. */
body[data-konsole="winterleuchten"] #konsole .s2, body[data-konsole="winterleuchten"] #konsole .s3 {
	left: 0;
	right: 0;
	background-repeat: repeat;
	image-rendering: pixelated;
	-webkit-mask: linear-gradient(180deg, #000 calc(100% - 2 * var(--fall)), transparent calc(100% - var(--fall)));
	mask: linear-gradient(180deg, #000 calc(100% - 2 * var(--fall)), transparent calc(100% - var(--fall)));
	animation: rieseln 14s linear infinite;
}

body[data-konsole="winterleuchten"] #konsole .s2 {
	--fall: calc(64 * var(--pix));
	top: calc(-1 * var(--fall));
	height: calc(var(--pillen-y) - 40px + var(--fall));
	background-image: url("konsole_schnee.png");
	background-size: calc(96 * var(--pix)) var(--fall);
	opacity: 0.9;
}

body[data-konsole="winterleuchten"] #konsole .s3 {
	--fall: calc(64 * var(--pix-klein));
	top: calc(-1 * var(--fall));
	height: calc(var(--pillen-y) - 60px + var(--fall));
	background-image: url("konsole_schnee.png");
	background-size: calc(96 * var(--pix-klein)) var(--fall);
	background-position: calc(37 * var(--pix-klein)) calc(23 * var(--pix-klein));
	opacity: 0.4;
	animation-duration: 18s;
}

@keyframes rieseln {
	from { transform: translateY(0); }
	to { transform: translateY(var(--fall)); }
}

/* Lichterkette unter dem Rahmen: ein Kabel hängt durch, daran sieben KI-Lichtkugeln, die leise glimmen */
body[data-konsole="winterleuchten"] #konsole .s1 {
	left: 9%;
	width: 82%;
	top: calc(var(--luecke-o) + 12px);
	height: 18px;
	border: 0 solid #3d6b4a;
	border-bottom-width: 2.5px;
	border-radius: 0 0 50% 50% / 0 0 100% 100%;
	box-shadow: 0 1px 0 rgba(200, 235, 255, 0.18);
}

body[data-konsole="winterleuchten"] #konsole .t {
	width: calc(10 * var(--pix-kugel));
	height: calc(10 * var(--pix-kugel));
	margin-left: calc(-5 * var(--pix-kugel));
	margin-top: calc(-3 * var(--pix-kugel));
	background: no-repeat 0 0 / 100% 100%;
	image-rendering: pixelated;
	filter: drop-shadow(0 0 4px var(--schein));
	animation: glimmen 2.6s ease-in-out infinite alternate;
}

/* Lage auf dem Bogen: x bei 1/8 … 7/8 der Kette, y = Durchhang · √(1 − (2x − 1)²) */
body[data-konsole="winterleuchten"] #konsole .t1 { left: calc(9% + 82% * 0.125); top: calc(var(--luecke-o) + 12px + 11.9px); background-image: url("konsole_kugel_rot.png"); --schein: rgba(255, 90, 90, 0.9); }
body[data-konsole="winterleuchten"] #konsole .t2 { left: calc(9% + 82% * 0.25); top: calc(var(--luecke-o) + 12px + 15.6px); background-image: url("konsole_kugel_gold.png"); --schein: rgba(255, 210, 90, 0.9); animation-delay: -0.9s; }
body[data-konsole="winterleuchten"] #konsole .t3 { left: calc(9% + 82% * 0.375); top: calc(var(--luecke-o) + 12px + 17.4px); background-image: url("konsole_kugel_gruen.png"); --schein: rgba(90, 255, 130, 0.9); animation-delay: -1.7s; }
body[data-konsole="winterleuchten"] #konsole .t4 { left: calc(9% + 82% * 0.5); top: calc(var(--luecke-o) + 12px + 18px); background-image: url("konsole_kugel_blau.png"); --schein: rgba(120, 170, 255, 0.9); animation-delay: -0.4s; }
body[data-konsole="winterleuchten"] #konsole .t5 { left: calc(9% + 82% * 0.625); top: calc(var(--luecke-o) + 12px + 17.4px); background-image: url("konsole_kugel_rot.png"); --schein: rgba(255, 90, 90, 0.9); animation-delay: -2.2s; }
body[data-konsole="winterleuchten"] #konsole .t6 { left: calc(9% + 82% * 0.75); top: calc(var(--luecke-o) + 12px + 15.6px); background-image: url("konsole_kugel_gold.png"); --schein: rgba(255, 210, 90, 0.9); animation-delay: -1.2s; }
body[data-konsole="winterleuchten"] #konsole .t7 { left: calc(9% + 82% * 0.875); top: calc(var(--luecke-o) + 12px + 11.9px); background-image: url("konsole_kugel_gruen.png"); --schein: rgba(90, 255, 130, 0.9); animation-delay: -2.5s; }

@keyframes glimmen {
	from { opacity: 0.55; }
	to { opacity: 1; }
}

/* Einblendung zum Saisonbeginn: frostig statt golden */
#einblendung.saison {
	background: linear-gradient(180deg, rgba(14, 40, 80, 0.92), rgba(8, 22, 48, 0.92));
	box-shadow: 0 0 0 1.5px #bfe8ff, 0 0 22px rgba(170, 225, 255, 0.45), 0 4px 14px rgba(0, 0, 0, 0.35);
	color: #f2fbff;
}

#einblendung.saison .hinweis {
	max-width: 250px;
	white-space: normal;
	text-align: center;
	color: #cfeeff;
}

@media (prefers-reduced-motion: reduce) {
	body[data-konsole="winterleuchten"] #konsole .streifen, body[data-konsole="winterleuchten"] #konsole .t {
		animation: none !important;
	}
}

/* Update-Nachricht: Falls der Browser die Frage nur auf einen echten Fingertipp zulässt, erscheint kurz dieser Knopf
   (lumoria.js, Push.tippZeigen). Normalerweise bleibt er unsichtbar, weil es ihn gar nicht gibt. */
.push-tipp {
	position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
	z-index: 60; padding: 12px 20px; border: 2px solid #f7d678; border-radius: 999px;
	background: #2a2468; color: #fff; font: 600 16px/1.2 var(--schrift-familie, sans-serif);
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5); cursor: pointer;
}