/* MINIMAL CITY - Seite: schwarz/weiss, Versalien fuer Beschriftungen, scharfe Kanten (wie die Werkseiten), Signalfarben nur
   fuer Bedeutung (gelb Ankommende, pink Problem, gruen besser, violett Eingriff, orange Bus).
   0.1.2: Aufbau wie eine Karten-App - eine Kopfleiste (Menue, Uhr, Coach, Hauptwert), unten ein Dock, alles Weitere auf
   Abruf (Kennzahlen, Eingriffe, Karte). Alles Bedienbare wird einmal angelegt und nur in Zustand und Inhalt geaendert. */
:root { --gelb: #FFC300; --pink: #FF2E88; --gruen: #9FFF00; --violett: #8C5CFF; --orange: #FF9300; --mint: #00FFAB; --cyan: #00CFFF;
	--grund: #07080b; --glas: rgba(10, 11, 15, 0.74); --linie: rgba(255, 255, 255, 0.14); --leise: rgba(255, 255, 255, 0.62); }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: var(--grund); color: #fff;
	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	touch-action: none; overscroll-behavior: none; -webkit-user-select: none; user-select: none;
	-webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
#buehne { position: fixed; inset: 0; overflow: hidden; --u: max(11px, min(0.95vw, 1.75vh)); }
#spiel { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; cursor: grab; }
#spiel.zieht { cursor: grabbing; }
.weg { display: none !important; }
.text { font-size: var(--u); letter-spacing: 0.14em; font-weight: 600; text-transform: uppercase; }
body.cjk .text { letter-spacing: 0.04em; }
.klein { font-size: calc(var(--u) * 0.82); }
.zahl { font-size: calc(var(--u) * 1.9); font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
p { margin: 0; line-height: 1.55; }
h2, h3 { margin: 0; }
.glas { background: var(--glas); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--linie); }

/* ------------------------------------------------ Beschriftungen ueber der Stadt (Lage aus dem Spiel) */
#beschriftung { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lb { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); white-space: nowrap; pointer-events: none;
	font-size: calc(var(--u) * 0.7); letter-spacing: 0.12em; font-weight: 600; text-transform: uppercase; text-shadow: 0 0 6px #000, 0 0 2px #000; }
.lb.ziel { color: var(--gelb); }
.lb.ziel b { font-weight: 800; margin-left: 0.5em; color: #fff; }
.lb.ziel.senke { color: var(--cyan); }
.lb.marke { color: rgba(255, 255, 255, 0.6); font-size: calc(var(--u) * 0.62); }
.lb.marke.fern, .lb.bau.fern { display: none; }
.lb.quelle { color: #fff; font-size: calc(var(--u) * 0.82); }
.lb.bau { color: var(--orange); }
.lb.eingriff { pointer-events: auto; cursor: pointer; transform: translate(-50%, -50%); width: calc(var(--u) * 2.0); height: calc(var(--u) * 2.0);
	border-radius: 50%; border: 2px solid var(--violett); background: rgba(10, 11, 15, 0.7); color: #fff; display: flex; align-items: center;
	justify-content: center; font-size: calc(var(--u) * 0.82); text-shadow: none; box-shadow: 0 0 0 4px rgba(140, 92, 255, 0.18); }
.lb.eingriff.geaendert { border-color: var(--gruen); box-shadow: 0 0 0 4px rgba(159, 255, 0, 0.16); }
.lb.eingriff.an { background: #fff; color: var(--grund); border-color: #fff; }
body.tisch .lb.eingriff, body.touch .lb.eingriff { width: 44px; height: 44px; }
body.ohneHud #beschriftung, body.ohneHud #anzeige, body:not(.spielt) #beschriftung { display: none !important; }

/* ------------------------------------------------ Spielanzeige */
#anzeige { position: absolute; inset: 0; pointer-events: none; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#anzeige button, #anzeige a, #karte, #schublade, #kzPanel, #lage { pointer-events: auto; }

/* Kopfleiste: Verlauf statt Kasten, darin vier Dinge */
#kopf { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 5.4); display: grid;
	grid-template-columns: auto auto 1fr auto; align-items: center; gap: calc(var(--u) * 1.2); padding: 0 calc(var(--u) * 1.3);
	background: linear-gradient(rgba(7, 8, 11, 0.86), rgba(7, 8, 11, 0.55) 70%, rgba(7, 8, 11, 0)); }
#ortBlock { display: grid; grid-template-columns: auto auto; column-gap: calc(var(--u) * 1.1); row-gap: 2px; align-items: baseline; min-width: calc(var(--u) * 8); }
#ortName { grid-column: 1 / 3; color: var(--leise); white-space: nowrap; }
#uhr { font-size: calc(var(--u) * 1.75); line-height: 1; }
#fortschritt { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 0.6); height: 2px; background: rgba(255, 255, 255, 0.14); }
#fortschritt b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255, 255, 255, 0.8); }
#wellenMarken { position: absolute; inset: 0; }
#wellenMarken s { position: absolute; top: -3px; width: 2px; height: 8px; background: var(--gelb); }
#coach { justify-self: center; display: grid; justify-items: center; gap: 6px; max-width: min(84ch, 58vw); text-align: center; }
#coachText { font-size: calc(var(--u) * 1.02); line-height: 1.35; transition: opacity 0.35s; }
#coachText.hinweis { color: var(--gelb); }
#coachPunkte { display: flex; gap: 6px; }
#coachPunkte i { width: 18px; height: 3px; background: rgba(255, 255, 255, 0.25); }
#coachPunkte i.fertig { background: var(--gruen); }
#coachPunkte i.jetzt { background: var(--violett); }
#welle { color: var(--gelb); opacity: 0.85; white-space: nowrap; }

/* Hauptwert (Puenktlich) als Knopf, klappt die uebrigen Kennzahlen auf */
#kzKnopf { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 10px; align-items: baseline; border: 0;
	padding: 6px 22px 6px 10px; min-height: 0; text-align: right; background: none; }
#kzKnopf em { grid-column: 1 / 3; font-style: normal; color: var(--leise); justify-self: end; }
#kzKnopf b { color: var(--gelb); font-size: calc(var(--u) * 1.75); line-height: 1; }
#kzKnopf i { font-style: normal; justify-self: start; }
#kzKnopf .pfeil { position: absolute; right: 4px; top: calc(50% + 2px); width: 7px; height: 7px; border-right: 2px solid var(--leise); border-bottom: 2px solid var(--leise);
	transform: rotate(45deg); transition: transform 0.2s; }
#kzKnopf[aria-expanded="true"] .pfeil { transform: rotate(225deg); }
@media (hover: hover) { #kzKnopf:hover { background: rgba(255, 255, 255, 0.06); color: #fff; } }
.kz i.gut { color: var(--gruen); }
.kz i.schlecht { color: var(--pink); }
#kzPanel { position: absolute; right: calc(var(--u) * 1.3); top: calc(var(--u) * 5.6); display: grid; grid-template-columns: repeat(3, auto); gap: 1px;
	background: var(--linie); border: 1px solid var(--linie); }
#kzPanel .kz { display: grid; gap: 2px; padding: calc(var(--u) * 0.55) calc(var(--u) * 0.8); background: var(--glas); -webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px); min-width: calc(var(--u) * 7); }
#kzPanel em { font-style: normal; color: var(--leise); }
#kzPanel b { font-size: calc(var(--u) * 1.3); }
#kzPanel i { font-style: normal; min-height: 1.2em; }
.kz.warn b { color: var(--pink); }

/* Meldungen und Vergleich: unter der Kopfleiste in der Mitte */
#meldung { position: absolute; left: 50%; top: calc(var(--u) * 7.2); transform: translate(-50%, -6px); background: var(--glas); border: 1px solid var(--linie);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 8px 16px; opacity: 0; transition: opacity 0.35s, transform 0.35s;
	white-space: nowrap; max-width: 90vw; overflow: hidden; text-overflow: ellipsis; }
#meldung.an { opacity: 1; transform: translate(-50%, 0); }
#vergleichBanner { position: absolute; left: 50%; top: calc(var(--u) * 5.5); transform: translateX(-50%); background: var(--gelb); color: var(--grund); padding: 5px 14px; }

/* Infokarte und Schublade rechts (Handy: unten) */
#karte, #schublade { position: absolute; right: calc(var(--u) * 1.3); top: calc(var(--u) * 6.4); bottom: calc(var(--u) * 6.4); width: min(32vw, calc(var(--u) * 26));
	box-sizing: border-box; background: rgba(10, 11, 15, 0.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--linie);
	padding: calc(var(--u) * 1.2); display: flex; flex-direction: column; gap: calc(var(--u) * 0.8); overflow: auto; height: max-content; max-height: calc(100% - var(--u) * 12.8); }
#karteArt { color: var(--violett); }
#karte h3 { font-size: calc(var(--u) * 1.35); letter-spacing: 0.01em; font-weight: 700; line-height: 1.2; padding-right: 30px; }
.zu { position: absolute; right: 6px; top: 6px; border: 0; font-size: 22px; padding: 4px 10px; min-height: 40px; opacity: 0.7; }
#karteZustand { display: grid; grid-template-columns: 1fr auto auto; gap: 4px calc(var(--u) * 0.9); font-size: calc(var(--u) * 0.85); align-items: baseline; }
#karteZustand:empty { display: none; }
#karteZustand .k { color: var(--leise); }
#karteZustand .w { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
#karteZustand .b { color: rgba(255, 255, 255, 0.45); text-align: right; font-variant-numeric: tabular-nums; }
#karteZustand .kopf { color: rgba(255, 255, 255, 0.4); font-size: calc(var(--u) * 0.68); text-transform: uppercase; letter-spacing: 0.12em; }
#karteZustand .gut { color: var(--gruen); }
#karteZustand .schlecht { color: var(--pink); }
#karteOptionen { display: grid; gap: 6px; }
#karteOptionen:empty, #karteRegler:empty, #karteVorschau:empty { display: none; }
.opt { display: grid; grid-template-columns: 1fr auto; gap: 3px calc(var(--u) * 0.6); text-align: left; text-transform: none; letter-spacing: 0;
	padding: calc(var(--u) * 0.6) calc(var(--u) * 0.75); border: 1px solid var(--linie); font-size: calc(var(--u) * 0.9); font-weight: 600; }
.opt small { grid-column: 1 / -1; font-weight: 400; color: var(--leise); font-size: calc(var(--u) * 0.78); line-height: 1.4; display: none; }
.opt.gewaehlt small { display: block; }
.opt .kost { color: var(--leise); font-size: calc(var(--u) * 0.75); }
.opt.gewaehlt { border-color: var(--violett); box-shadow: inset 3px 0 0 var(--violett); }
.opt.aktiv { border-color: rgba(159, 255, 0, 0.6); }
.opt.aktiv .kost::before { content: "● "; color: var(--gruen); }
.regler { display: grid; gap: 4px; font-size: calc(var(--u) * 0.82); }
.regler label { display: flex; justify-content: space-between; color: var(--leise); }
.regler label b { color: #fff; }
.regler input[type=range] { width: 100%; accent-color: var(--violett); height: 28px; touch-action: pan-x; }
/* Touch: Gesten auf Marken und Bedienleisten bewegen nie die ganze Seite (kein Browser-Zoom); Felder rollen nur senkrecht */
.lb, #anzeige button, #anzeige .chip { touch-action: none; }
#karte, #schublade, #lage, #karte *, #schublade *, #lage * { touch-action: pan-y; }
#karte .regler input[type=range] { touch-action: pan-x; }
#karteVorschau { color: var(--leise); }
.kartenFuss { display: grid; gap: 8px; margin-top: auto; }
#karteAnwenden { background: #fff; color: var(--grund); border-color: #fff; }
#karteMeldung { min-height: 1.2em; color: var(--leise); }
#karteMeldung.gut { color: var(--gruen); }
#karteMeldung.schlecht { color: var(--pink); }
#schublade .kopfzeile { color: var(--leise); }
#eingriffListe { display: grid; gap: 4px; }
.eintrag { display: grid; grid-template-columns: calc(var(--u) * 1.9) 1fr auto; align-items: center; gap: calc(var(--u) * 0.6); text-align: left;
	border: 1px solid var(--linie); padding: calc(var(--u) * 0.45) calc(var(--u) * 0.6); text-transform: none; letter-spacing: 0;
	font-size: calc(var(--u) * 0.88); font-weight: 600; min-height: 44px; }
.eintrag .nr { width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.6); border-radius: 50%; border: 2px solid var(--violett); display: flex;
	align-items: center; justify-content: center; font-size: calc(var(--u) * 0.75); }
.eintrag .nm small { display: block; color: var(--leise); font-weight: 400; font-size: calc(var(--u) * 0.72); text-transform: uppercase; letter-spacing: 0.1em; }
.eintrag .st { font-size: calc(var(--u) * 0.68); color: var(--gruen); text-transform: uppercase; letter-spacing: 0.1em; }
.eintrag.geaendert .nr { border-color: var(--gruen); color: var(--gruen); }
.eintrag.an { background: #fff; color: var(--grund); }

/* Unten: Dock in einer Zeile, darueber bei Bedarf Ebenen bzw. Legende */
#unten { position: absolute; left: 50%; bottom: calc(var(--u) * 1.1 + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex;
	flex-direction: column; align-items: center; gap: 8px; width: max-content; max-width: 96vw; }
#dock { display: flex; gap: 6px; padding: 5px; background: var(--glas); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border: 1px solid var(--linie); pointer-events: auto; }
.gruppe { display: flex; }
.gruppe + .gruppe { padding-left: 6px; border-left: 1px solid var(--linie); }
#dock button { border: 0; min-height: 40px; padding: 0 calc(var(--u) * 0.95); font-size: calc(var(--u) * 0.78); letter-spacing: 0.12em; font-weight: 600;
	text-transform: uppercase; color: rgba(255, 255, 255, 0.78); }
#dock button.an { background: #fff; color: var(--grund); }
#dock button.sym { width: 44px; padding: 0; }
.pausezeichen { display: inline-block; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
#vergleichKnopf.an { background: var(--gelb) !important; color: var(--grund) !important; }
#listeKnopf b { margin-left: 8px; display: inline-flex; min-width: 18px; height: 18px; border-radius: 9px; background: var(--violett); color: #fff;
	align-items: center; justify-content: center; font-size: 10px; letter-spacing: 0; padding: 0 4px; box-sizing: border-box; }
#listeKnopf.an b { background: var(--grund); }
#legende { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; pointer-events: auto; }
.chip { border: 1px solid var(--linie); background: transparent; padding: 4px 10px; min-height: 32px; font-size: calc(var(--u) * 0.68); letter-spacing: 0.12em;
	text-transform: uppercase; font-weight: 600; opacity: 0.6; position: relative; }
.chip.an { opacity: 1; background: #fff; color: var(--grund); border-color: #fff; }
.chip.jetzt { opacity: 1; }
.chip[data-netz="1"].jetzt { border-color: #3A86FF; color: #3A86FF; box-shadow: 0 0 10px rgba(58, 134, 255, 0.4); }
.chip[data-netz="2"].jetzt { border-color: var(--gelb); color: var(--gelb); box-shadow: 0 0 10px rgba(255, 195, 0, 0.35); }
.chip[data-netz="4"].jetzt { border-color: #00FFEF; color: #00FFEF; box-shadow: 0 0 10px rgba(0, 255, 239, 0.35); }
.chip[data-netz="7"].jetzt { border-color: #fff; color: #fff; }
#legende { background: var(--glas); border: 1px solid var(--linie); padding: 6px 12px; gap: 16px; font-size: calc(var(--u) * 0.75); color: var(--leise); }
#legende > span { display: flex; align-items: center; gap: 6px; }
.lg { width: 16px; height: 4px; display: inline-block; }
.lg.gelb { background: var(--gelb); }
.lg.pink { background: var(--pink); }
.lg.ring { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--gelb); }
.lg.saeule { width: 5px; height: 14px; background: linear-gradient(var(--pink), var(--gelb)); box-shadow: 0 0 6px var(--pink); }
.lg.saeule.ziel { background: var(--gelb); box-shadow: 0 0 6px var(--gelb); }

/* Lagebild links: Diagramme zum Verkehr bzw. zu den Versorgungsnetzen (Handy: Blatt von unten) */
#lage { position: absolute; left: calc(var(--u) * 1.3); top: calc(var(--u) * 6.4); bottom: calc(var(--u) * 6.4); width: min(30vw, calc(var(--u) * 24));
	box-sizing: border-box; background: linear-gradient(160deg, rgba(14, 16, 22, 0.92), rgba(8, 9, 12, 0.86)); -webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px); border: 1px solid var(--linie); padding: calc(var(--u) * 0.9) calc(var(--u) * 1.0) calc(var(--u) * 1.0);
	display: flex; flex-direction: column; gap: calc(var(--u) * 0.7); overflow: auto; scrollbar-width: thin; animation: lageEin 0.35s ease-out; }
@keyframes lageEin { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.lageKopf { display: flex; align-items: center; gap: 8px; padding: calc(var(--u) * 0.9) calc(var(--u) * 1.0 + 34px) calc(var(--u) * 0.5) calc(var(--u) * 1.0);
	margin: calc(var(--u) * -0.9) calc(var(--u) * -1.0) 0; color: var(--leise);
	position: sticky; top: calc(var(--u) * -0.9); z-index: 2; background: #0d0f14; }
.lageKopf b { color: #fff; margin-left: auto; font-weight: 700; }
.lageKopf .zu { top: 50%; right: 4px; transform: translateY(-50%); }
.live { width: 7px; height: 7px; border-radius: 50%; background: var(--gruen); box-shadow: 0 0 8px var(--gruen); animation: live 1.6s ease-in-out infinite; }
@keyframes live { 50% { opacity: 0.25; } }
#lage section { display: flex; flex-direction: column; gap: calc(var(--u) * 0.7); }
.kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
.kachel { background: rgba(10, 11, 15, 0.92); padding: calc(var(--u) * 0.4) calc(var(--u) * 0.65); display: grid; gap: 0; min-width: 0; }
.kachel em { font-style: normal; color: var(--leise); font-size: calc(var(--u) * 0.62); }
.kachel b { font-size: calc(var(--u) * 1.35); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; }
.kachel i { font-style: normal; font-size: calc(var(--u) * 0.66); color: rgba(255, 255, 255, 0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kachel i.gut { color: var(--gruen); }
.kachel i.schlecht { color: var(--pink); }
#lageVerkehr .kachel[data-k="pu"] b { color: var(--gelb); }
.diag { margin: 0; display: grid; gap: 4px; }
.diag figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--leise); }
.diag figcaption .text { font-size: calc(var(--u) * 0.62); }
.diag canvas { width: 100%; display: block; }
canvas.linie { height: calc(var(--u) * 5.2); }
canvas.balken { height: calc(var(--u) * 5.6); }
canvas.balken.hoch { height: calc(var(--u) * 6.6); }
canvas.balken.flach { height: calc(var(--u) * 3.9); }
canvas.saeulen { height: calc(var(--u) * 5.6); }
.diag.paar { grid-template-columns: calc(var(--u) * 7.2) 1fr; align-items: center; column-gap: calc(var(--u) * 0.9); }
.diag.paar figcaption { grid-column: 1 / -1; }
canvas.ringbild { height: calc(var(--u) * 6.4); }
.leg { display: flex; align-items: center; gap: 5px; font-size: calc(var(--u) * 0.6); text-transform: uppercase; letter-spacing: 0.08em; }
.leg .l { width: 12px; height: 2px; background: var(--gelb); display: inline-block; margin-left: 4px; }
.leg .l.pink { background: var(--pink); }
.leg .l.ohne { background: none; border-top: 1px dashed rgba(255, 255, 255, 0.7); height: 0; }
.leg .l.grau { background: #9AA3B2; }
.leg .l.strich { width: 2px; height: 10px; background: #fff; }
.leg2 { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: calc(var(--u) * 0.72); }
.leg2 li { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 7px; }
.leg2 i { width: 8px; height: 8px; border-radius: 50%; }
.leg2 span { color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leg2 b { font-variant-numeric: tabular-nums; }
.leer { color: var(--leise); margin: 0; }
#netzModus { display: flex; flex-wrap: wrap; gap: 4px; }
#netzKopf { display: flex; align-items: center; gap: 10px; }
#netzFarbe { width: 26px; height: 4px; }
#netzName { font-size: calc(var(--u) * 1.0); }
#netzInhalt { display: flex; flex-direction: column; gap: calc(var(--u) * 0.7); }
#netzInhalt.wechsel { animation: netzWechsel 0.5s ease-out; }
@keyframes netzWechsel { from { opacity: 0.15; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.quelle { color: rgba(255, 255, 255, 0.42); margin: 0; line-height: 1.4; font-size: calc(var(--u) * 0.66); }
.diagrammzeichen { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; margin-right: 7px; vertical-align: -1px; }
.diagrammzeichen i { width: 3px; background: currentColor; }
.diagrammzeichen i:nth-child(1) { height: 5px; }
.diagrammzeichen i:nth-child(2) { height: 11px; }
.diagrammzeichen i:nth-child(3) { height: 8px; }
#lageKnopf.an { background: #fff; color: var(--grund); }
body.untergrund .lb.eingriff, body.untergrund .lb.bau { display: none; }
#netzAnzeige { display: none; align-items: center; gap: 8px; border: 1px solid var(--linie); background: var(--glas); padding: 4px 12px; min-height: 32px;
	font-size: calc(var(--u) * 0.7); letter-spacing: 0.12em; text-transform: uppercase; }
body.untergrund #netzAnzeige { display: inline-flex; }
body.untergrund.lageOffen #netzAnzeige { display: none; }
#netzAnzeige i { width: 18px; height: 3px; }
#netzAnzeige span { color: var(--leise); font-weight: 400; }
.rund { position: relative; width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--linie) !important;
	background: var(--glas); display: inline-flex; align-items: center; justify-content: center; }
.burger, .burger::before, .burger::after { display: block; width: 16px; height: 2px; background: #fff; position: relative; content: ""; }
.burger::before { position: absolute; top: -5px; }
.burger::after { position: absolute; top: 5px; }
.haus { width: 12px; height: 12px; border: 2px solid #fff; box-sizing: border-box; transform: rotate(45deg); }
#uebersichtKnopf { position: absolute; right: calc(var(--u) * 1.3); bottom: calc(var(--u) * 1.1 + 5px + env(safe-area-inset-bottom)); }
/* Ton an/aus: Lautsprecher (aus = durchgestrichen) ueber dem Uebersichtsknopf */
#tonKnopf { position: absolute; right: calc(var(--u) * 1.3); bottom: calc(var(--u) * 1.1 + 55px + env(safe-area-inset-bottom)); }
.lautsprecher { position: relative; width: 14px; height: 14px; display: block; }
.lautsprecher::before { content: ""; position: absolute; left: 0; top: 4px; width: 5px; height: 6px; background: #fff; }
.lautsprecher::after { content: ""; position: absolute; left: 3px; top: 1px; border: 6px solid transparent; border-right-color: #fff; border-left: 0; height: 0; width: 0;
	transform: translateX(2px); }
#tonKnopf::after { content: ""; position: absolute; right: 8px; top: 13px; width: 6px; height: 14px; border: 2px solid #fff; border-left: 0; border-radius: 0 10px 10px 0; opacity: 0.85; }
#tonKnopf.aus::after { width: 2px; height: 22px; border: 0; background: var(--pink); border-radius: 0; right: 18px; top: 9px; transform: rotate(45deg); opacity: 1; }
#fussnote { position: absolute; left: calc(var(--u) * 1.3); bottom: calc(var(--u) * 0.6 + env(safe-area-inset-bottom)); color: rgba(255, 255, 255, 0.42);
	font-size: calc(var(--u) * 0.66); max-width: 24vw; line-height: 1.4; }

/* ------------------------------------------------ Knoepfe allgemein */
button, .knopf { font-family: inherit; color: #fff; background: none; border: 2px solid #fff; border-radius: 0; cursor: pointer; text-decoration: none;
	padding: calc(var(--u) * 0.75) calc(var(--u) * 1.4); min-height: 44px; touch-action: manipulation; position: relative; display: inline-flex;
	align-items: center; justify-content: center; }
@media (hover: hover) { button:hover, .knopf:hover { background: #fff; color: var(--grund); } #dock button:hover:not(.an) { background: rgba(255, 255, 255, 0.1); color: #fff; } }
button:focus-visible, .knopf:focus-visible { outline: 3px solid var(--violett); outline-offset: 2px; }
button.gross, .knopf.gross { border-width: 2px; padding: calc(var(--u) * 0.9) calc(var(--u) * 2.2); font-size: calc(var(--u) * 1.05); }
button:disabled { opacity: 0.35; cursor: default; }
button.link { border: 0; padding: 6px 0; min-height: 36px; color: var(--leise); font-size: calc(var(--u) * 0.78); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }
@media (hover: hover) { button.link:hover { background: none; color: #fff; } }
.knoepfe { display: flex; gap: calc(var(--u) * 0.8); flex-wrap: wrap; justify-content: center; }
.knoepfe.senkrecht { flex-direction: column; min-width: calc(var(--u) * 18); }

/* ------------------------------------------------ Seiten */
.seite { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: calc(var(--u) * 1.2); background: rgba(7, 8, 11, 0.74); padding: 4vh 4vw; box-sizing: border-box; text-align: center; overflow: auto; pointer-events: auto; }
.seite h1 { margin: 0; font-size: calc(var(--u) * 4.4); font-weight: 800; letter-spacing: -0.02em; line-height: 0.95; text-transform: uppercase; }
.seite h2 { font-size: calc(var(--u) * 1.8); letter-spacing: 0.12em; text-transform: uppercase; }
.unter { color: var(--leise); max-width: 46ch; font-size: calc(var(--u) * 0.95); }
.lang { max-width: 62ch; line-height: 1.6; font-size: calc(var(--u) * 0.95); }
.fuss { color: rgba(255, 255, 255, 0.45); }

/* Titel: links Stadtliste, rechts Mission */
#titelSeite { display: grid; grid-template-columns: minmax(280px, 30vw) minmax(320px, 520px); grid-template-rows: 1fr auto; column-gap: 6vw;
	align-items: center; justify-content: start; text-align: left; padding: 6vh 6vw 3vh;
	background: linear-gradient(90deg, rgba(7, 8, 11, 0.92), rgba(7, 8, 11, 0.6) 55%, rgba(7, 8, 11, 0.15)); }
.titelSpalte { display: grid; gap: calc(var(--u) * 2.0); align-content: center; }
.titelKopf { display: grid; gap: calc(var(--u) * 0.8); }
#staedte { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; }
.gruppeKopf { grid-column: 1 / -1; color: var(--leise); font-size: calc(var(--u) * 0.62); padding: calc(var(--u) * 0.6) 0 calc(var(--u) * 0.2); border-bottom: 1px solid var(--linie); margin-bottom: 2px; }
.gruppeKopf:first-child { padding-top: 0; }
.stadt { display: grid; grid-template-columns: 1fr; align-items: baseline; gap: 1px; text-align: left; padding: calc(var(--u) * 0.38) calc(var(--u) * 0.7);
	border: 0; border-left: 3px solid transparent; background: none; text-transform: none; letter-spacing: 0; min-height: 0; }
.stadt b { font-size: calc(var(--u) * 0.98); text-transform: uppercase; letter-spacing: 0.07em; line-height: 1.15; }
.stadt i:empty { display: none; }
.stadt span { grid-column: 1; font-size: calc(var(--u) * 0.72); color: var(--leise); }
.stadt i { grid-column: 1; grid-row: auto; font-style: normal; font-size: calc(var(--u) * 0.62); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gelb); }
.stadt.an { border-left-color: #fff; background: rgba(255, 255, 255, 0.07); }
@media (hover: hover) { .stadt:hover:not(:disabled) { background: rgba(255, 255, 255, 0.07); color: #fff; } }
.titelLinks { display: flex; gap: calc(var(--u) * 1.4); flex-wrap: wrap; }
#missionBox { background: rgba(10, 11, 15, 0.86); border: 1px solid var(--linie); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	padding: calc(var(--u) * 1.8); display: grid; gap: calc(var(--u) * 0.9); text-align: left; }
#missionStadt { color: var(--gelb); }
#missionBox h2 { letter-spacing: 0.03em; font-size: calc(var(--u) * 2.0); }
#missionText { font-size: calc(var(--u) * 1.0); }
#missionSchritte { margin: 0; padding-left: 1.3em; display: grid; gap: 4px; color: var(--leise); font-size: calc(var(--u) * 0.86); }
#startKnopf { justify-self: start; background: #fff; color: var(--grund); }
#missionDaten { color: rgba(255, 255, 255, 0.4); }
#titelSeite .fuss { grid-column: 1 / -1; align-self: end; }
.reihe { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1em; text-align: left; }
.reihe .wahl { display: flex; flex-wrap: wrap; justify-content: flex-end; }
.reihe .wahl button { border-width: 1px; margin-left: -1px; padding: calc(var(--u) * 0.45) calc(var(--u) * 0.8); opacity: 0.6; min-height: 40px; }
.reihe .wahl button.an { background: #fff; color: var(--grund); opacity: 1; }
#regler, #personalInhalt { display: grid; gap: calc(var(--u) * 0.7); min-width: min(90vw, calc(var(--u) * 34)); }

/* Ergebnis */
#sterne { display: flex; gap: 10px; }
#sterne i { width: calc(var(--u) * 2.0); height: calc(var(--u) * 2.0); border: 2px solid #fff; box-sizing: border-box; }
#sterne i.voll { background: var(--gelb); border-color: var(--gelb); }
#ergebnisUnter { color: var(--leise); max-width: 70ch; }
#vergleichTabelle { display: grid; grid-template-columns: auto auto auto auto; gap: 4px calc(var(--u) * 1.6); text-align: right; font-variant-numeric: tabular-nums;
	border: 1px solid var(--linie); padding: calc(var(--u) * 0.9) calc(var(--u) * 1.3); background: rgba(10, 11, 15, 0.85); }
#vergleichTabelle .k { text-align: left; color: var(--leise); }
#vergleichTabelle .kopf { color: rgba(255, 255, 255, 0.45); font-size: calc(var(--u) * 0.7); text-transform: uppercase; letter-spacing: 0.12em; }
#vergleichTabelle .gut { color: var(--gruen); }
#vergleichTabelle .schlecht { color: var(--pink); }
#verlaufBild svg { width: min(80vw, calc(var(--u) * 40)); height: auto; display: block; }
#ortListe { display: grid; gap: 3px; font-size: calc(var(--u) * 0.82); max-width: min(92vw, 70ch); text-align: left; }
#ortListe .o { display: grid; grid-template-columns: 1fr auto auto; gap: calc(var(--u) * 1.2); }
#ortListe .gut { color: var(--gruen); }
#ortListe .schlecht { color: var(--pink); }
#einsatzKarten { display: flex; gap: calc(var(--u) * 1); flex-wrap: wrap; justify-content: center; }
.ekarte { width: min(80vw, calc(var(--u) * 16)); border: 1px solid var(--linie); padding: calc(var(--u) * 1); display: grid; gap: 8px; text-align: left; background: rgba(10, 11, 15, 0.8); }
.ekarte svg { width: 100%; height: auto; }
.ekarte span { font-size: calc(var(--u) * 0.85); color: var(--leise); line-height: 1.45; }
#pauseAuftrag { color: var(--leise); }

#ruhe { position: absolute; inset: 0; background: rgba(7, 8, 11, 0.86); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; pointer-events: auto; z-index: 5; }
#ruhe .zahl { font-size: calc(var(--u) * 5); }
#marke { position: absolute; right: calc(var(--u) * 1.4); top: calc(var(--u) * 1.4); width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4);
	background: url(cube4dev.png) center / contain no-repeat; opacity: 0.85; }
body.spielt #marke, body.kiosk #marke { display: none; }
#lade { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--grund); z-index: 10; }
#lade h1 { font-size: 40px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; margin: 0 0 14px; }
#lade p { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; }

/* Kiosk/Museum: groesser */
body.kiosk #buehne { --u: max(14px, min(1.2vw, 2.1vh)); }
body.kiosk #listeKnopf, body.kiosk .titelLinks button[data-oeffne="einsatzSeite"] { display: none; }
body.aufnahme #fussnote, body.aufnahme #unten, body.aufnahme #uebersichtKnopf, body.aufnahme #menueKnopf, body.aufnahme #tonKnopf { opacity: 0; }

/* ------------------------------------------------ schmale Bildschirme */
@media (max-width: 860px) {
	body.karteOffen #uebersichtKnopf, body.listeOffen #uebersichtKnopf, body.karteOffen #tonKnopf, body.listeOffen #tonKnopf, body.lageOffen #tonKnopf { display: none; }
	#buehne { --u: max(11px, min(2.9vw, 2.0vh)); }
	#kopf { grid-template-columns: auto 1fr auto; height: calc(var(--u) * 5.0); }
	#coach { position: absolute; left: 8px; right: 8px; top: calc(var(--u) * 5.2); max-width: none; justify-self: stretch; background: var(--glas);
		border: 1px solid var(--linie); padding: 8px 10px; }
	#coachText { font-size: calc(var(--u) * 0.9); }
	#welle { display: none; }
	#kzPanel { left: 8px; right: 8px; top: calc(var(--u) * 5.2); grid-template-columns: repeat(3, 1fr); z-index: 2; }
	#kzPanel .kz { min-width: 0; }
	#meldung { top: calc(var(--u) * 9.2); }
	#karte, #schublade { left: 8px; right: 8px; width: auto; top: auto; bottom: calc(14px + env(safe-area-inset-bottom)); max-height: 70vh; }
	body.karteOffen #unten, body.listeOffen #unten, body.lageOffen #unten { display: none; }
	#lage { left: 8px; right: 8px; width: auto; top: auto; bottom: calc(14px + env(safe-area-inset-bottom)); max-height: 58vh; animation: none; }
	body.lageOffen #uebersichtKnopf { display: none; }
	#lageKnopf .diagrammzeichen { margin-right: 4px; }
	#unten { left: 8px; right: 8px; transform: none; width: auto; max-width: none; }
	#dock { flex-wrap: wrap; justify-content: center; width: 100%; box-sizing: border-box; }
	#dock button { padding: 0 calc(var(--u) * 0.6); font-size: 10.5px; letter-spacing: 0.08em; }
	.gruppe + .gruppe { padding-left: 0; border-left: 0; }
	#extraGruppe { width: 100%; justify-content: center; border-top: 1px solid var(--linie); padding-top: 4px; }
	#uebersichtKnopf { right: 10px; bottom: calc(118px + env(safe-area-inset-bottom)); }
	#tonKnopf { right: 10px; bottom: calc(168px + env(safe-area-inset-bottom)); }
	#fussnote { max-width: none; left: 8px; right: 8px; bottom: 2px; text-align: center; font-size: 9px; }
	#titelSeite { display: flex; flex-direction: column; justify-content: flex-start; padding: 5vh 5vw; gap: 2vh; background: rgba(7, 8, 11, 0.78); }
	.titelSpalte { gap: 2vh; width: 100%; }
	#staedte { grid-template-columns: 1fr; }
	#missionBox { width: 100%; box-sizing: border-box; }
	.seite h1 { font-size: calc(var(--u) * 3.4); }
}