/* 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); pointer-events: auto; cursor: pointer; }
.lb.marke.top { color: #fff; font-size: calc(var(--u) * 0.74); letter-spacing: 0.14em; }
.lb.marke.top::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; background: var(--gelb); vertical-align: 1px; }
.lb.marke.fern, .lb.bau.fern, .lb.bahn.fern { display: none; }
/* Bahnhof: U/S-Zeichen wie an der Strasse, Name hell; in den Ebenen immer zu sehen und antippbar */
.lb.bahn { color: rgba(255, 255, 255, 0.85); font-size: calc(var(--u) * 0.62); pointer-events: auto; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.lb.bahn i { font-style: normal; font-weight: 800; color: #fff; width: 1.45em; height: 1.45em; display: inline-flex; align-items: center; justify-content: center;
	letter-spacing: 0; font-size: 0.95em; text-shadow: none; }
.lb.bahn i.u { background: #6E5CFF; }
.lb.bahn i.s { background: #1FAE5E; border-radius: 50%; }
.lb.bahn i.t { background: #9C7BE8; border-radius: 3px; }
body.untergrund .lb.bahn.fern { display: inline-flex !important; }
body.untergrund .lb.bahn { font-size: calc(var(--u) * 0.7); color: #fff; }
/* Zugkarte: ohne Verlaufslinie und Umkreis-Hinweis */
#ortKarte.zugKarte .ortlinie, #ortKarte.zugKarte .quelle { display: none; }
#ortKarte.zugKarte #ortArt { color: #B9AEFF; }
#ortKarte.zugKarte .kachel b { font-size: calc(var(--u) * 1.1); }
/* Abfahrtstafel im Bahnhof: Zeichen, Richtung, Minuten (Minuten rechts, gelb) */
.abfahrt { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-top: 1px solid var(--linie); padding-top: 6px; }
.abfahrt li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; font-size: calc(var(--u) * 0.78); }
.abfahrt li i { font-style: normal; font-weight: 800; width: 1.5em; height: 1.5em; display: inline-flex; align-items: center; justify-content: center; font-size: 0.85em; color: #fff; }
.abfahrt li i.u { background: #6E5CFF; }
.abfahrt li i.s { background: #1FAE5E; border-radius: 50%; }
.abfahrt li i.t { background: #9C7BE8; border-radius: 3px; }
.abfahrt li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(255, 255, 255, 0.86); }
.abfahrt li b { color: var(--gelb); font-variant-numeric: tabular-nums; white-space: nowrap; }
.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; }
body:not(.spielt) #brennpunkte, body.untergrund #brennpunkte { 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, #stadtRegler, #ortKarte { 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 */
.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; right: calc(var(--u) * 1.3); top: calc(var(--u) * 6.4); bottom: calc(var(--u) * 6.4); width: min(28vw, calc(var(--u) * 22));
	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; } }
@keyframes reglerEin { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

/* Stadt-Regler links: fuenf Hebel mit farbiger Leiste, Marke "normal" und kurzer Wirkung */
#stadtRegler { position: absolute; left: calc(var(--u) * 1.3); top: calc(var(--u) * 6.4); width: min(26vw, calc(var(--u) * 21)); 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.55); max-height: calc(100% - var(--u) * 12.8); overflow: auto; animation: reglerEin 0.35s ease-out; pointer-events: auto; }
#reglerListe { display: grid; gap: calc(var(--u) * 0.55); }
.regelzeile { display: grid; gap: 4px; cursor: pointer; }
.regelzeile .rk { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.regelzeile .rn { font-size: calc(var(--u) * 0.86); font-weight: 700; }
.regelzeile .rw { font-style: normal; font-size: calc(var(--u) * 0.8); color: var(--leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
.regelzeile.veraendert .rw { color: var(--farbe); }
.regelzeile .rh { color: rgba(255, 255, 255, 0.5); font-size: calc(var(--u) * 0.66); line-height: 1.35; max-height: 0; opacity: 0; overflow: hidden;
	transition: max-height 0.25s ease, opacity 0.25s ease; }
/* Erklaerung erst bei Beruehrung (Maus darueber, Fokus, Ziehen): das Blatt bleibt ruhig und kurz */
.regelzeile:hover .rh, .regelzeile:focus-within .rh, .regelzeile.aktiv .rh { max-height: 3.2em; opacity: 1; }
.reglerGruppe { grid-column: 1 / -1; color: rgba(255, 255, 255, 0.42); font-size: calc(var(--u) * 0.6); letter-spacing: 0.16em; padding-top: calc(var(--u) * 0.35);
	border-top: 1px solid var(--linie); margin-top: 2px; }
.reglerGruppe:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.regelzeile input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.regelzeile input[type=range]::-webkit-slider-runnable-track { height: 6px; background:
	linear-gradient(90deg, transparent calc(var(--normal) - 1px), rgba(255, 255, 255, 0.85) calc(var(--normal) - 1px), rgba(255, 255, 255, 0.85) calc(var(--normal) + 1px), transparent calc(var(--normal) + 1px)),
	linear-gradient(90deg, var(--farbe) var(--anteil, 40%), rgba(255, 255, 255, 0.12) var(--anteil, 40%)); }
.regelzeile input[type=range]::-moz-range-track { height: 6px; background:
	linear-gradient(90deg, transparent calc(var(--normal) - 1px), rgba(255, 255, 255, 0.85) calc(var(--normal) - 1px), rgba(255, 255, 255, 0.85) calc(var(--normal) + 1px), transparent calc(var(--normal) + 1px)),
	linear-gradient(90deg, var(--farbe) var(--anteil, 40%), rgba(255, 255, 255, 0.12) var(--anteil, 40%)); }
.regelzeile input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: #fff;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12), 0 0 12px var(--farbe); }
.regelzeile input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12), 0 0 12px var(--farbe); }
#reglerNormal { align-self: flex-start; border: 1px solid var(--linie); padding: 6px 12px; min-height: 34px; font-size: calc(var(--u) * 0.66); }
.reglerzeichen { display: inline-flex; flex-direction: column; justify-content: space-between; gap: 2px; width: 12px; height: 11px; margin-right: 7px; vertical-align: -1px; }
.reglerzeichen i { height: 2px; background: currentColor; position: relative; }
.reglerzeichen i::after { content: ""; position: absolute; top: -2px; width: 4px; height: 6px; background: currentColor; }
.reglerzeichen i:nth-child(1)::after { left: 2px; }
.reglerzeichen i:nth-child(2)::after { left: 7px; }
.reglerzeichen i:nth-child(3)::after { left: 4px; }
#reglerKnopf.an { background: #fff; color: var(--grund); }

/* Stadtpuls: Tacho Stadt-Index, Zeilen mit Wert, Abweichung, Verlaufslinie */
.indexBox { display: grid; grid-template-columns: calc(var(--u) * 9.5) 1fr; align-items: center; gap: calc(var(--u) * 0.8); }
canvas.tacho { width: 100%; height: calc(var(--u) * 5.6); display: block; }
.indexText { display: grid; gap: 3px; }
.indexText em { font-style: normal; color: var(--leise); }
.indexText i { font-style: normal; font-weight: 700; font-size: calc(var(--u) * 0.9); }
.indexText small { color: rgba(255, 255, 255, 0.42); font-size: calc(var(--u) * 0.62); line-height: 1.35; }
.gut { color: var(--gruen); }
.schlecht { color: var(--pink); }
#pulsListe { display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
.puls { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 8px; background: rgba(10, 11, 15, 0.92);
	padding: calc(var(--u) * 0.35) calc(var(--u) * 0.6); position: relative; }
.puls span { color: var(--leise); font-size: calc(var(--u) * 0.6); }
.puls b { grid-column: 1; font-size: calc(var(--u) * 1.05); font-variant-numeric: tabular-nums; white-space: nowrap; }
.puls i { grid-column: 2; grid-row: 1; font-style: normal; font-size: calc(var(--u) * 0.62); color: rgba(255, 255, 255, 0.45); text-align: right; white-space: nowrap; }
.puls i.gut { color: var(--gruen); }
.puls i.schlecht { color: var(--pink); }
.puls canvas { grid-column: 2; grid-row: 2; width: calc(var(--u) * 7); height: calc(var(--u) * 1.5); align-self: end; }

/* Ortskarte (Klick in die Stadt) unten links */
#ortKarte { position: absolute; left: calc(var(--u) * 1.3); bottom: calc(var(--u) * 6.4); width: min(26vw, calc(var(--u) * 21)); box-sizing: border-box;
	background: rgba(10, 11, 15, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--linie);
	padding: calc(var(--u) * 0.9) calc(var(--u) * 1.0); display: grid; gap: calc(var(--u) * 0.45); pointer-events: auto; animation: reglerEin 0.3s ease-out; z-index: 2; }
#ortArt { color: var(--gelb); }
#ortTitel { margin: 0; font-size: calc(var(--u) * 1.2); line-height: 1.2; padding-right: 30px; }
#ortUnter { margin: 0; color: var(--leise); }
.kacheln.drei { grid-template-columns: 1fr 1fr 1fr; }
canvas.ortlinie { width: 100%; height: calc(var(--u) * 2.6); display: block; }
body.reglerOffen.ortOffen #stadtRegler { max-height: calc(100% - var(--u) * 12.8 - 230px); }
/* Stadtmodus: keine Einzel-Eingriffe mehr im Bild */
.lb.eingriff { display: none !important; }
.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;
	overflow: hidden; text-overflow: ellipsis; }
.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: none; }
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); }
/* rechts unten eine Spalte: Ton, Kamera-Leiste (nur Touch), Uebersicht */
#rechts { position: absolute; right: calc(var(--u) * 1.3 + env(safe-area-inset-right)); bottom: calc(var(--u) * 1.1 + 5px + env(safe-area-inset-bottom));
	display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
#rechts > * { pointer-events: auto; }
#kamera { display: none; flex-direction: column; background: var(--glas); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	border: 1px solid var(--linie); border-radius: 22px; overflow: hidden; }
body.handy #kamera { display: flex; }
#kameraGruppe { display: none; }
body.touchGeraet:not(.handy) #kameraGruppe, body.touch:not(.handy) #kameraGruppe { display: flex; }
#dock #kameraGruppe button { width: 42px; min-width: 42px; padding: 0; }
#dock #kameraGruppe button.halt { background: rgba(255, 255, 255, 0.16); }
/* breites Bild: der Stadtpuls endet ueber Ton und Uebersicht */
#lage { bottom: max(calc(var(--u) * 6.4), calc(var(--u) * 1.1 + 110px + env(safe-area-inset-bottom))); }
#kamera button { width: 42px; height: 42px; min-height: 0; padding: 0; border: 0; display: flex; align-items: center; justify-content: center; }
#kamera button + button { border-top: 1px solid var(--linie); }
#kamera button.halt { background: rgba(255, 255, 255, 0.16); }
.plus, .minus { position: relative; width: 14px; height: 14px; display: block; }
.plus::before, .minus::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: #fff; }
.plus::after { content: ""; position: absolute; top: 0; bottom: 0; left: 6px; width: 2px; background: #fff; }
.drehpfeil { position: relative; width: 14px; height: 14px; border: 2px solid #fff; border-left-color: transparent; border-radius: 50%; box-sizing: border-box; display: block; }
.drehpfeil::after { content: ""; position: absolute; left: -4px; top: -1px; border: 4px solid transparent; border-top-color: #fff; border-bottom: 0; transform: rotate(-30deg); }
.neigezeichen { width: 16px; height: 9px; border: 2px solid #fff; box-sizing: border-box; transform: perspective(30px) rotateX(48deg); display: block; }
/* Ton an/aus: Lautsprecher (aus = durchgestrichen) */
.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; }
/* 0.9: Tageszeit - Sonne (Tag), halbe Scheibe ueber dem Horizont (Abend), Mondsichel (Nacht) */
.zeitzeichen { position: relative; width: 16px; height: 16px; display: block; border-radius: 50%; background: #fff; box-sizing: border-box; }
.zeitzeichen::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px dotted rgba(255, 255, 255, 0.75); }
#zeitKnopf.abend .zeitzeichen { background: var(--orange); clip-path: inset(0 0 45% 0); width: 18px; height: 18px; }
#zeitKnopf.abend .zeitzeichen::after { inset: auto -2px 7px -2px; height: 2px; border: 0; border-radius: 0; background: #fff; }
#zeitKnopf.nacht .zeitzeichen { background: transparent; box-shadow: inset -5px 2px 0 0 #DDE6FF; transform: rotate(-20deg); }
#zeitKnopf.nacht .zeitzeichen::after { display: none; }
/* 0.8: Stufe "Musik + Stadt" mit kleiner Note oben rechts */
#tonKnopf.musik::before { content: ""; position: absolute; right: 7px; top: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--mint);
	box-shadow: 3px -5px 0 -1.5px var(--mint); }
#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; }

/* Ebenen-Leiste (Ansicht "Ebenen"): Regler fuer die Stadt, Schalter je Schicht mit Farbpunkt */
#ebenenLeiste { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; background: var(--glas);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--linie); padding: 6px 10px; pointer-events: auto; max-width: 96vw; box-sizing: border-box; }
#ebenenLeiste .oberwelt { display: flex; align-items: center; gap: 8px; color: var(--leise); }
#ebenenLeiste .oberwelt b { color: #fff; min-width: 3.6em; text-align: right; font-variant-numeric: tabular-nums; }
#ebenenLeiste input[type=range] { -webkit-appearance: none; appearance: none; width: 140px; height: 26px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
#ebenenLeiste input[type=range]::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(90deg, #fff var(--anteil, 20%), rgba(255, 255, 255, 0.14) var(--anteil, 20%)); }
#ebenenLeiste input[type=range]::-moz-range-track { height: 6px; background: linear-gradient(90deg, #fff var(--anteil, 20%), rgba(255, 255, 255, 0.14) var(--anteil, 20%)); }
#ebenenLeiste input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14); }
#ebenenLeiste input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: #fff; }
.ebChips { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.ebChips .chip { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 4px 11px; opacity: 0.55; }
.ebChips .chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--f); box-shadow: 0 0 8px var(--f); opacity: 0.35; }
.ebChips .chip.an { opacity: 1; background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.ebChips .chip.an::before { opacity: 1; }

/* Gesten-Hinweis (Touch, einmal): Karte in der Mitte, verschwindet beim ersten Griff */
#gesten { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; gap: 10px; padding: 16px 20px 14px;
	background: rgba(10, 11, 15, 0.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--linie);
	width: min(84vw, 340px); box-sizing: border-box; pointer-events: none; animation: gestenEin 0.4s ease-out; z-index: 3; }
#gesten.aus { opacity: 0; transition: opacity 0.5s; }
@keyframes gestenEin { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }
.geste { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 12px; font-size: 13px; line-height: 1.35; }
.geste svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.geste svg circle { fill: rgba(255, 195, 0, 0.9); stroke: none; }
.geste svg circle.ring { fill: none; stroke: var(--gelb); stroke-width: 1.5; }
#gesten p { color: var(--leise); text-align: center; margin-top: 2px; }

/* Wirkung im Regler-Blatt (nur Handy) */
.miniPuls { display: none; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
body.handy .miniPuls { display: grid; }
.miniPuls span { display: grid; background: rgba(10, 11, 15, 0.92); padding: 5px 7px; min-width: 0; }
.miniPuls em { font-style: normal; color: var(--leise); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.miniPuls b { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.miniPuls i { font-style: normal; font-size: 9.5px; color: rgba(255, 255, 255, 0.45); white-space: nowrap; min-height: 1.2em; }
.miniPuls i.gut { color: var(--gruen); }
.miniPuls i.schlecht { color: var(--pink); }

/* Bedienung in der Pause: Geste/Taste links, Wirkung rechts */
.steuerung { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; text-align: left; font-size: calc(var(--u) * 0.82); color: var(--leise);
	border-top: 1px solid var(--linie); padding-top: calc(var(--u) * 0.9); max-width: min(92vw, 52ch); }
.steuerung:empty { display: none; }
.steuerung b { color: #fff; font-weight: 600; white-space: nowrap; }
.steuerung .kopf { grid-column: 1 / -1; color: rgba(255, 255, 255, 0.45); text-transform: uppercase; letter-spacing: 0.14em; font-size: calc(var(--u) * 0.7); }
#reglerKnopf.lockt { animation: lockt 1.6s ease-in-out infinite; }
@keyframes lockt { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(140, 92, 255, 0.4); } 50% { box-shadow: inset 0 0 0 2px var(--violett), 0 0 14px rgba(140, 92, 255, 0.7); } }

/* ------------------------------------------------ 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: flex-start;
	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; }
/* mittig, aber bei wenig Hoehe von oben an rollbar (justify-content: center schneidet den Anfang ab) */
.seite:not(#titelSeite) > :first-child { margin-top: auto; }
.seite:not(#titelSeite) > :last-child { margin-bottom: auto; }
.seite > * { flex-shrink: 0; }
.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 #rechts, body.aufnahme #menueKnopf { opacity: 0; }

/* ------------------------------------------------ schmale Bildschirme */
@media (max-width: 860px) {
	body.karteOffen #rechts, body.listeOffen #rechts, body.lageOffen #rechts, body.reglerOffen #rechts, body.ortOffen #rechts { 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; }
	#stadtRegler, #ortKarte { left: 8px; right: 8px; width: auto; top: auto; bottom: calc(14px + env(safe-area-inset-bottom)); max-height: 62vh; animation: none; }
	body.reglerOffen #unten, body.ortOffen #unten { display: none; }
	.regelzeile .rh { display: none; }
	#ortName { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
	#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; }
	/* rechte Spalte sitzt immer ueber dem Dock (Hoehe wechselt mit Legende und Netzanzeige, --untenH aus start.js) */
	#rechts { right: calc(10px + env(safe-area-inset-right)); bottom: calc(var(--untenH, 100px) + var(--u) * 1.1 + 12px + env(safe-area-inset-bottom)); }
	#dock button { min-width: 40px; }
	#dock button.sym { min-width: 44px; }
	#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; }
	/* Handy hochkant: Auftrag mit Startknopf gleich unter dem Titel, die Staedte darunter (die Liste ist lang) */
	.titelSpalte { display: contents; }
	.titelKopf { order: 0; }
	#missionBox { order: 1; }
	#staedte { order: 2; }
	.titelLinks { order: 3; }
	#titelSeite .fuss { order: 4; }
	.seite h1 { font-size: calc(var(--u) * 3.4); }
}

/* ------------------------------------------------ Handy quer (wenig Hoehe): Kopf eine Zeile mit Coach, Dock eine Zeile,
   Blaetter links ueber die volle Hoehe, rechts die Kamera-Spalte. Ueberschreibt die Regeln fuer schmale Bildschirme. */
@media (max-height: 500px) and (orientation: landscape) {
	#buehne { --u: max(10px, min(1.2vw, 2.6vh)); }
	#kopf { grid-template-columns: auto auto 1fr auto; height: calc(var(--u) * 4.4); gap: calc(var(--u) * 1.0);
		padding: 0 calc(var(--u) * 1.0 + env(safe-area-inset-right)) 0 calc(var(--u) * 1.0 + env(safe-area-inset-left)); }
	#coach { position: static; left: auto; right: auto; top: auto; background: none; border: 0; padding: 0; max-width: none; justify-self: center; gap: 3px; }
	#coachText { font-size: calc(var(--u) * 0.88); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	#coachPunkte i { width: 12px; height: 2px; }
	#welle { display: none; }
	#ortName { max-width: 24vw; overflow: hidden; text-overflow: ellipsis; }
	#uhr { font-size: calc(var(--u) * 1.5); }
	#meldung { top: calc(var(--u) * 5.0); }
	#vergleichBanner { top: calc(var(--u) * 4.7); }
	#kzPanel { left: auto; right: 8px; top: calc(var(--u) * 4.6); grid-template-columns: repeat(3, auto); }
	#unten { left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 130px);
		bottom: calc(14px + env(safe-area-inset-bottom)); }
	#dock { flex-wrap: nowrap; width: auto; padding: 3px; gap: 4px; }
	#dock button { min-height: 36px; min-width: 36px; padding: 0 8px; font-size: 10px; letter-spacing: 0.08em; }
	#dock button.sym { width: 38px; min-width: 38px; }
	.gruppe + .gruppe, #extraGruppe { width: auto; padding: 0 0 0 4px; border-top: 0; border-left: 1px solid var(--linie); }
	#legende { gap: 10px; padding: 4px 10px; font-size: 9.5px; }
	#rechts { right: calc(8px + env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); gap: 7px; }
	#rechts .rund { width: 36px; height: 36px; min-height: 36px; }
	#kamera button { width: 38px; height: 36px; }
	#fussnote { left: 50%; right: auto; transform: translateX(-50%); bottom: 1px; max-width: none; white-space: nowrap; font-size: 8px; text-align: center; }
	/* Blaetter (Regler, Stadtpuls, Ort, Karte) links ueber die volle Hoehe; die Stadt bleibt rechts frei */
	#stadtRegler, #lage, #ortKarte, #karte, #schublade { left: calc(8px + env(safe-area-inset-left)); right: auto; width: min(48vw, 420px); top: calc(var(--u) * 4.6);
		bottom: auto; height: auto; max-height: calc(100% - var(--u) * 4.6 - 10px - env(safe-area-inset-bottom)); animation: reglerEin 0.3s ease-out; }
	#lage { bottom: calc(10px + env(safe-area-inset-bottom)); }
	body.karteOffen #unten, body.listeOffen #unten, body.lageOffen #unten, body.reglerOffen #unten, body.ortOffen #unten { display: none; }
	body.karteOffen #rechts, body.listeOffen #rechts, body.lageOffen #rechts, body.reglerOffen #rechts, body.ortOffen #rechts { display: flex; }
	.regelzeile .rh { display: none; }
	/* Regler-Blatt passt ohne Rollen in die Hoehe */
	#stadtRegler { gap: 6px; padding-bottom: 8px; }
	/* 1.1: neun Regler in drei Gruppen - je Gruppe eine Reihe mit drei Spalten, das Blatt etwas breiter */
	#stadtRegler { width: min(68vw, 600px); }
	/* 1.2: Reiter und Voreinstellungen flach, Kennzahlen ohne Vergleichszeile, Namen einzeilig */
	#stadtRegler .reiter { margin: 0 0 3px; }
	#stadtRegler .reiter button { padding: 2px 6px; font-size: 9.5px; min-height: 0; }
	#stadtRegler .vorgaben { margin: 0 0 3px; }
	#stadtRegler .vorgaben button { padding: 2px 4px; min-height: 0; }
	#stadtRegler .lageKopf { margin-bottom: 0; }
	#stadtRegler .miniPuls i { display: none; }
	#stadtRegler .regelzeile .rn { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	#stadtRegler .reglerGruppe { padding-top: 2px; }
	#reglerListe { gap: 3px 14px; grid-template-columns: 1fr 1fr 1fr; }
	.regelzeile .rn { font-size: 12px; }
	.regelzeile .rw { font-size: 11px; }
	.regelzeile { gap: 0; }
	.regelzeile input[type=range] { height: 24px; }
	.miniPuls span { padding: 3px 6px; }
	.miniPuls b { font-size: 13px; }
	#reglerNormal { min-height: 30px; padding: 4px 10px; }
	#gesten { width: min(60vw, 420px); grid-template-columns: 1fr 1fr; padding: 12px 16px; }
	#gesten p { grid-column: 1 / -1; }
	.geste { font-size: 12px; }
	/* Titel: links Stadtliste, rechts Auftrag, beide fuer sich rollbar */
	#titelSeite { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: 4vw; row-gap: 4px;
		align-items: stretch; padding: 3vh calc(4vw + env(safe-area-inset-right)) 2vh calc(4vw + env(safe-area-inset-left)); overflow: hidden;
		background: linear-gradient(90deg, rgba(7, 8, 11, 0.92), rgba(7, 8, 11, 0.7)); }
	.titelSpalte { display: grid; overflow: auto; align-content: start; gap: 10px; min-height: 0; width: auto; }
	.seite h1 { font-size: calc(var(--u) * 2.6); }
	.unter { font-size: 11px; }
	#staedte { grid-template-columns: 1fr 1fr; }
	#missionBox { overflow: auto; align-self: start; max-height: 100%; min-height: 0; padding: 14px 16px; gap: 8px; width: auto; }
	#missionBox h2 { font-size: calc(var(--u) * 1.6); }
	#missionText, #missionSchritte { font-size: 12px; }
	#titelSeite .fuss { font-size: 9px; }
	.seite { gap: 10px; padding: 3vh 5vw; }
	.knoepfe.senkrecht { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-width: min(80vw, 520px); }
	.steuerung { grid-template-columns: auto 1fr auto 1fr; max-width: 90vw; font-size: 11px; }
}

/* 1.0 Selbstlauf (Museum): die Stadt erzaehlt von allein - Bedienung ausgeblendet, unten ein Band mit dem, was zu sehen
   ist, und der Einladung zum Mitspielen */
#selbstlauf { display: none; position: absolute; left: 50%; bottom: calc(var(--u) * 2.2 + env(safe-area-inset-bottom)); transform: translateX(-50%);
	width: min(calc(100vw - 32px), calc(var(--u) * 46)); box-sizing: border-box; padding: calc(var(--u) * 1.1) calc(var(--u) * 1.8);
	background: var(--glas); border: 1px solid var(--linie); text-align: center; pointer-events: none; }
body.selbstlauf #selbstlauf { display: block; }
#slTitel { display: block; color: var(--gelb); font-size: calc(var(--u) * 0.85); letter-spacing: 0.14em; }
#slText { margin: calc(var(--u) * 0.45) 0 calc(var(--u) * 0.7); font-size: calc(var(--u) * 1.25); line-height: 1.35; }
#slEinladung { display: inline-flex; align-items: center; gap: 0.6em; font-style: normal; font-size: calc(var(--u) * 0.72); color: var(--leise); letter-spacing: 0.12em; }
#slEinladung::before { content: ""; width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--mint); animation: slPuls 1.6s ease-in-out infinite; }
@keyframes slPuls { 0%, 100% { opacity: 0.35; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }
#selbstlauf.neu #slText, #selbstlauf.neu #slTitel { animation: slNeu 0.7s ease-out; }
@keyframes slNeu { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
body.selbstlauf #unten, body.selbstlauf #rechts, body.selbstlauf #stadtRegler, body.selbstlauf #lage,
body.selbstlauf #ortKarte, body.selbstlauf #karte, body.selbstlauf #gesten, body.selbstlauf #schublade, body.selbstlauf #kzPanel, body.selbstlauf #ebenenLeiste,
body.selbstlauf #legende, body.selbstlauf #meldung, body.selbstlauf #fussnote { display: none !important; }
body.selbstlauf #coach, body.selbstlauf #menueKnopf { visibility: hidden; }
body.selbstlauf.kiosk { cursor: none; }
@media (max-width: 859px) { #slText { font-size: calc(var(--u) * 1.05); } }

/* 1.0 Gefuehrte erste Minute: Lichtring am Bedienelement, Blase mit dem Schritt (die Stadt bleibt bedienbar) */
#fuehrRing { position: fixed; z-index: 60; border: 2px solid var(--gelb); border-radius: 10px; pointer-events: none; box-sizing: border-box;
	box-shadow: 0 0 0 4px rgba(255, 195, 0, 0.18), 0 0 26px rgba(255, 195, 0, 0.45); animation: fuehrPuls 1.4s ease-in-out infinite;
	transition: left 0.35s ease, top 0.35s ease, width 0.35s ease, height 0.35s ease; }
@keyframes fuehrPuls { 0%, 100% { box-shadow: 0 0 0 3px rgba(255, 195, 0, 0.15), 0 0 18px rgba(255, 195, 0, 0.35); } 50% { box-shadow: 0 0 0 7px rgba(255, 195, 0, 0.22), 0 0 32px rgba(255, 195, 0, 0.55); } }
#fuehrBlase { position: fixed; z-index: 61; box-sizing: border-box; padding: 14px 16px 10px; background: rgba(10, 11, 15, 0.92); border: 1px solid var(--gelb);
	transition: left 0.35s ease, top 0.35s ease; }
#fuehrText { margin: 0 0 10px; font-size: 16px; line-height: 1.4; }
.fuehrFuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#fuehrPunkte { display: flex; gap: 5px; }
#fuehrPunkte i { width: 16px; height: 3px; background: rgba(255, 255, 255, 0.2); }
#fuehrPunkte i.fertig { background: rgba(255, 195, 0, 0.55); }
#fuehrPunkte i.jetzt { background: var(--gelb); }
#fuehrWeg { background: none; border: 0; color: var(--leise); padding: 6px 0 6px 10px; cursor: pointer; }
body.fuehrung #coach { visibility: hidden; }

/* 1.1 Stadtfragen: Brennpunkte ueber der Stadt (Schild mit Farbe des Themas), Linsen in der Analyse, Stadtbilanz */
#brennpunkte { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bp { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 5px 9px 6px;
	background: rgba(10, 11, 15, 0.86); border: 0; border-left: 3px solid var(--c, #fff); color: #fff; text-align: left; white-space: nowrap;
	pointer-events: auto; cursor: pointer; font: inherit; box-shadow: 0 0 16px rgba(0, 0, 0, 0.35); margin-top: -10px; touch-action: manipulation; }
.bp::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 2px; height: 8px; background: var(--c, #fff); transform: translateX(-50%); }
.bp.weg { display: none; }
.bp b { font-size: calc(var(--u) * 0.6); letter-spacing: 0.14em; color: var(--c, #fff); }
.bp span { font-size: calc(var(--u) * 0.78); font-weight: 600; max-width: 22em; overflow: hidden; text-overflow: ellipsis; }
.bp em { font-style: normal; font-size: calc(var(--u) * 0.68); color: var(--leise); }
#legende { flex-direction: column; gap: 6px; }
#linsenText { color: var(--leise); text-align: center; }
#bilanz { margin: 10px 0 12px; }
#bilanz .kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#bilanz .kachel { border: 1px solid var(--linie); padding: 7px 9px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#bilanz .kachel em { font-style: normal; color: var(--leise); font-size: 10px; letter-spacing: 0.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bilanz .kachel b { font-size: 19px; line-height: 1.1; }
#bilanz .kachel i { font-style: normal; font-size: 11px; color: var(--leise); min-height: 1.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#bilanz .kachel i.gut { color: var(--gruen); }
#bilanz .kachel i.schlecht { color: var(--pink); }
#bilanz .split { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
#bilanz .split > em { font-style: normal; color: var(--leise); font-size: 10px; letter-spacing: 0.12em; }
.splitZeile { display: grid; grid-template-columns: 4.2em 1fr; align-items: center; gap: 8px; font-size: 10px; color: var(--leise); }
.splitZeile .bar { display: flex; height: 12px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.splitZeile.normal .bar { height: 6px; opacity: 0.6; }
.splitZeile .bar i, .splitLeg i { display: block; height: 100%; transition: width 0.6s ease; }
.split .a { background: #9AA3B2; }
.split .o { background: #8C7CFF; }
.split .f { background: #FFC300; }
.splitLeg { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--leise); }
.splitLeg li { display: flex; align-items: center; gap: 6px; }
.splitLeg i { width: 9px; height: 9px; }
.splitLeg b { color: #fff; font-weight: 600; }

/* 1.2 Leben: Reiter der Regler, Voreinstellungen, Teilwerte, Wirkungen, Angebote, Filter, Angebot in der Ortskarte */
.reiter { display: flex; gap: 4px; margin: 2px 0 8px; }
.reiter button { flex: 1; border: 1px solid var(--linie); background: transparent; color: var(--leise); padding: 7px 8px; font: inherit;
	font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.reiter button.an { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.vorgaben { display: none; gap: 4px; margin: 0 0 8px; }
#stadtRegler.leben .vorgaben { display: flex; }
.vorgaben button { flex: 1; border: 1px solid var(--linie); background: transparent; color: #fff; padding: 6px 4px; cursor: pointer; }
.vorgaben button:hover { border-color: rgba(255, 255, 255, 0.5); }
#reglerListe .weg { display: none !important; }
#reglerPuls .leben { display: none; }
#stadtRegler.leben #reglerPuls .leben { display: flex; }
#stadtRegler.leben #reglerPuls [data-k="co2"], #stadtRegler.leben #reglerPuls [data-k="wartezeit"] { display: none; }
#teilwerte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0 4px; }
#teilwerte > div { border: 1px solid var(--linie); padding: 6px 8px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#teilwerte em { font-style: normal; color: var(--leise); font-size: 10px; letter-spacing: 0.1em; }
#teilwerte b { font-size: 20px; line-height: 1.1; }
#teilwerte i { font-style: normal; font-size: 11px; color: var(--leise); white-space: nowrap; }
#teilwerte i.gut { color: var(--gruen); }
#teilwerte i.schlecht { color: var(--pink); }
#wirkungen { margin: 8px 0 4px; }
#wirkungen > em { font-style: normal; color: var(--leise); font-size: 10px; letter-spacing: 0.12em; }
#wirkungen ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
#wirkungen li { display: flex; justify-content: space-between; gap: 10px; }
#wirkungen li span { color: var(--leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#wirkungen li b.gut { color: var(--gruen); }
#wirkungen li b.schlecht { color: var(--pink); }
#angebote { margin: 10px 0 12px; }
#angebote > em { font-style: normal; color: var(--leise); font-size: 10px; letter-spacing: 0.12em; }
.anListe { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.anZeile { display: grid; grid-template-columns: 9.5em 1fr 4.6em; align-items: center; gap: 8px; font-size: 12px; }
.anZeile .anName { display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.anZeile .anName i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--f); box-shadow: 0 0 6px var(--f); }
.anZeile .anBar { display: flex; height: 9px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.anZeile .anBar i, .anLeg i { display: block; height: 100%; transition: width 0.5s ease; }
.anZeile .anZahl { text-align: right; color: var(--leise); font-variant-numeric: tabular-nums; }
#angebote .g { background: #7CFF4F; }
#angebote .k { background: #FFC300; }
#angebote .l { background: #FF2E88; }
#angebote .z { background: #4A4E57; }
.anLeg { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 10.5px; color: var(--leise); }
.anLeg li { display: flex; align-items: center; gap: 5px; }
.anLeg i { width: 8px; height: 8px; }
#angebotFilter .chip.zustand { margin-left: 8px; }
#ortAngebot { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin: 6px 0 10px; padding: 8px 10px;
	border: 1px solid var(--linie); background: rgba(255, 255, 255, 0.03); }
#ortAngebot.weg { display: none; }
#oaPunkt { width: 10px; height: 10px; border-radius: 50%; background: var(--f, #fff); box-shadow: 0 0 8px var(--f, #fff); }
#ortAngebot span { display: flex; flex-direction: column; min-width: 0; }
#oaName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#oaZustand { font-style: normal; color: var(--leise); }
#oaZustand.gut { color: var(--gruen); }
#oaZustand.schlecht { color: var(--pink); }
#oaKnopf { border: 1px solid rgba(255, 255, 255, 0.4); background: transparent; color: #fff; padding: 6px 10px; cursor: pointer; }

/* ------------------------------------------------ 1.3 Klarer: der Stadt-Index gross oben in der Mitte, die Coach-Zeile kurz
   darunter (blendet aus), Stadtpuls in drei Reitern, Einfuehrung 1-4 (Index oben, Regler links, Informationen rechts,
   Ansicht unten). Jede Seite des Bildschirms hat eine Aufgabe. */
#kopf { grid-template-columns: auto auto auto 1fr; }
#welle, #coachPunkte { display: none !important; }
#introKnopf b { font-size: 17px; font-weight: 700; line-height: 1; }
#kzKnopf { position: absolute; left: 50%; top: calc(var(--u) * 0.55 + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 3;
	display: grid; grid-template-columns: auto auto auto; align-items: center; column-gap: calc(var(--u) * 1.15); text-align: left; min-height: 0;
	padding: calc(var(--u) * 0.4) calc(var(--u) * 1.3) calc(var(--u) * 0.4) calc(var(--u) * 0.45); background: rgba(10, 11, 15, 0.88) !important;
	border: 1px solid var(--linie) !important; color: #fff !important;
	--ix: var(--gelb); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 6px 26px rgba(0, 0, 0, 0.35); transition: box-shadow 0.6s; }
#kzKnopf.gut { --ix: var(--gruen); }
#kzKnopf.schlecht { --ix: var(--pink); }
#kzKnopf.ixPulst { animation: ixPuls 0.9s ease-out; }
@keyframes ixPuls { 0% { box-shadow: 0 0 0 0 var(--ix), 0 6px 26px rgba(0, 0, 0, 0.35); } 100% { box-shadow: 0 0 0 14px transparent, 0 6px 26px rgba(0, 0, 0, 0.35); } }
@media (hover: hover) { #kzKnopf:hover { border-color: rgba(255, 255, 255, 0.45) !important; } }
#kzKnopf[aria-expanded="true"] { border-color: rgba(255, 255, 255, 0.5) !important; }
.ixRing { position: relative; width: calc(var(--u) * 4.5); height: calc(var(--u) * 4.5); display: block; }
.ixRing svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ixRing circle { fill: none; stroke-width: 8; }
.ixRing .spur { stroke: rgba(255, 255, 255, 0.1); }
.ixRing .wert { stroke: var(--ix); stroke-linecap: butt; stroke-dasharray: 0 264; filter: drop-shadow(0 0 4px var(--ix)); transition: stroke-dasharray 0.8s ease, stroke 0.6s; }
.ixRing .normal { stroke: #fff; stroke-width: 2.5; transform-origin: 50px 50px; transition: transform 0.8s ease; }
.ixRing b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(var(--u) * 2.05); color: #fff; letter-spacing: -0.03em; }
.ixKopf { display: grid; gap: 3px; }
.ixKopf em { font-style: normal; color: var(--leise); }
.ixKopf i { font-style: normal; font-size: calc(var(--u) * 0.98); color: var(--ix); white-space: nowrap; }
.ixTeile { display: grid; grid-template-columns: repeat(3, calc(var(--u) * 7.6)); gap: calc(var(--u) * 0.9); padding-left: calc(var(--u) * 1.1);
	border-left: 1px solid var(--linie); }
.ixTeile > span { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 3px 4px; }
.ixTeile em { font-style: normal; color: var(--leise); font-size: calc(var(--u) * 0.58); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
	overflow: hidden; text-overflow: ellipsis; }
.ixTeile b { font-size: calc(var(--u) * 1.05); font-variant-numeric: tabular-nums; }
.ixTeile s { grid-column: 1 / -1; display: block; height: 3px; background: rgba(255, 255, 255, 0.1); text-decoration: none; position: relative; }
.ixTeile u { position: absolute; left: 0; top: 0; bottom: 0; width: 0; text-decoration: none; transition: width 0.8s ease; }
.ixTeile [data-tw="besucher"] u { background: var(--cyan); }
.ixTeile [data-tw="parken"] u { background: var(--orange); }
.ixTeile [data-tw="laeden"] u { background: #7CFF4F; }
.ixTeile b.gut { color: var(--gruen); }
.ixTeile b.schlecht { color: var(--pink); }
/* Coach und Wirkung eines Reglers: eine Zeile unter dem Index, blendet nach einigen Sekunden aus */
#coach { position: absolute; left: 50%; top: calc(var(--u) * 6.25 + env(safe-area-inset-top)); transform: translateX(-50%); max-width: min(70ch, 56vw);
	background: rgba(10, 11, 15, 0.66); border: 0; padding: 5px 14px; opacity: 0; transition: opacity 0.6s; pointer-events: none; }
#coach.zeigt { opacity: 1; }
#coachText { font-size: calc(var(--u) * 0.86); }
#coachText.wirkung { color: #fff; }
#coachText.wirkung b { font-weight: 700; margin-left: 0.4em; }
#coachText.wirkung b.gut { color: var(--gruen); }
#coachText.wirkung b.schlecht { color: var(--pink); }
#meldung { top: calc(var(--u) * 8.4); }
#vergleichBanner { top: calc(var(--u) * 6.3); }
/* Stadtpuls: Reiter */
#lageReiter { margin: 0 0 2px; }
.lTab { display: none; flex-direction: column; gap: calc(var(--u) * 0.7); }
.lTab.an { display: flex; }
#lageVerkehr .split { display: flex; flex-direction: column; gap: 5px; }
.split > em { font-style: normal; color: var(--leise); font-size: 10px; letter-spacing: 0.12em; }
#wirkungen ul { font-size: 13px; gap: 5px; }
#wohnTeile > em { font-style: normal; color: var(--leise); font-size: 10px; letter-spacing: 0.12em; }
.wtListe { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 14px; margin-top: 6px; }
.wtZeile { display: grid; grid-template-columns: 1fr auto; gap: 3px 6px; font-size: 11px; color: var(--leise); min-width: 0; }
.wtZeile span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wtZeile b { color: #fff; font-variant-numeric: tabular-nums; font-weight: 600; }
.wtZeile b.gut { color: var(--gruen); }
.wtZeile b.schlecht { color: var(--pink); }
.wtZeile s { grid-column: 1 / -1; display: block; height: 4px; background: rgba(255, 255, 255, 0.08); position: relative; text-decoration: none; }
.wtZeile s u { position: absolute; left: 0; top: 0; bottom: 0; background: #7CFF4F; text-decoration: none; transition: width 0.6s ease; }
.wtZeile s i { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #fff; opacity: 0.8; }

/* Einfuehrung: Licht auf einen Bereich, der Rest gedimmt; Nummern an allen vier Bereichen, Karte mit dem Schritt */
#intro { position: fixed; inset: 0; z-index: 70; pointer-events: auto; cursor: pointer; }
#introLicht { position: fixed; left: 50%; top: 50%; width: 0; height: 0; border-radius: 10px; pointer-events: none;
	box-shadow: 0 0 0 200vmax rgba(4, 5, 8, 0.72), 0 0 0 2px var(--gelb), 0 0 34px 6px rgba(255, 195, 0, 0.4);
	transition: left 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
#introMarken i { position: fixed; left: -100px; top: -100px; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; display: flex;
	align-items: center; justify-content: center; font-style: normal; font-weight: 800; font-size: 15px; color: #fff; background: rgba(10, 11, 15, 0.92);
	border: 2px solid rgba(255, 255, 255, 0.55); transition: width 0.35s, height 0.35s, font-size 0.35s, background 0.35s, color 0.35s, left 0.4s, top 0.4s;
	pointer-events: none; z-index: 1; }
#introMarken i.fertig { border-color: var(--gelb); color: var(--gelb); }
#introMarken i.jetzt { width: 56px; height: 56px; font-size: 30px; background: var(--gelb); color: var(--grund); border-color: var(--gelb);
	box-shadow: 0 0 26px rgba(255, 195, 0, 0.75); z-index: 2; }
#introKarte { position: fixed; left: 50%; top: 50%; z-index: 3; width: min(440px, calc(100vw - 32px)); box-sizing: border-box; cursor: default;
	display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; padding: 16px 18px 12px; background: rgba(10, 11, 15, 0.95); border: 1px solid var(--gelb);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); transition: left 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
#introNr { font-size: 46px; line-height: 0.9; color: var(--gelb); font-weight: 800; font-variant-numeric: tabular-nums; }
.introInhalt { display: grid; gap: 6px; align-content: start; }
#introTitel { color: var(--gelb); font-size: 15px; }
#introText { font-size: 16px; line-height: 1.45; }
#introKarte.neu .introInhalt { animation: slNeu 0.5s ease-out; }
.introFuss { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin-top: 4px; }
#introPunkte { display: flex; gap: 5px; margin-right: auto; }
#introPunkte i { width: 18px; height: 3px; background: rgba(255, 255, 255, 0.2); }
#introPunkte i.fertig { background: rgba(255, 195, 0, 0.55); }
#introPunkte i.jetzt { background: var(--gelb); }
#introWeg { background: none; border: 0; color: var(--leise); padding: 6px 4px; min-height: 36px; }
#introWeiter { background: #fff; color: var(--grund); border: 0; padding: 6px 16px; min-height: 36px; }
body.intro #coach { visibility: hidden; }

/* Tastatur: sichtbarer Fokus auf allem Bedienbaren (auch Regler, Reiter, Chips, Staedte, Schilder) */
#anzeige :focus-visible, .seite :focus-visible, #intro :focus-visible, #fuehrBlase :focus-visible { outline: 3px solid var(--gelb) !important; outline-offset: 2px; }
.regelzeile input[type=range]:focus-visible { outline: 2px solid var(--gelb) !important; outline-offset: 4px; }
#spiel:focus-visible { outline: none; box-shadow: inset 0 0 0 3px rgba(255, 195, 0, 0.55); }

/* schmal (Handy hochkant): Index rechts in der Kopfzeile, ohne Teilwerte; Coach als Zeile unter der Kopfleiste */
@media (max-width: 860px) {
	#kopf { grid-template-columns: auto auto 1fr; gap: 8px; }
	#introKnopf { width: 34px; height: 34px; min-height: 34px; }
	#kzKnopf { left: auto; right: 8px; transform: none; top: calc(6px + env(safe-area-inset-top)); grid-template-columns: auto auto; column-gap: 8px; padding: 4px 10px 4px 4px; }
	.ixRing { width: 50px; height: 50px; }
	.ixRing b { font-size: 21px; }
	.ixKopf em { font-size: 9px; }
	.ixKopf i { font-size: 11px; }
	.ixTeile { display: none; }
	#ortName { max-width: 34vw; }
	#coach { left: 8px; right: 8px; transform: none; top: calc(var(--u) * 5.0 + 8px + env(safe-area-inset-top)); max-width: none; text-align: center; }
	#coachText { font-size: 12px; }
	#introKarte { padding: 12px 14px 10px; gap: 6px 12px; }
	#introNr { font-size: 36px; }
	#introText { font-size: 14px; }
}
/* Handy quer: Index klein in der Mitte, Teilwerte ohne Balken */
@media (max-height: 500px) and (orientation: landscape) {
	#kzKnopf { left: 50%; right: auto; transform: translateX(-50%); top: calc(4px + env(safe-area-inset-top)); grid-template-columns: auto auto auto; padding: 3px 12px 3px 3px; }
	.ixRing { width: 42px; height: 42px; }
	.ixRing b { font-size: 18px; }
	.ixTeile { display: grid; grid-template-columns: repeat(3, auto); gap: 10px; padding-left: 10px; }
	.ixTeile s { display: none; }
	.ixTeile em { font-size: 8px; }
	.ixTeile b { font-size: 13px; }
	#coach { left: 50%; right: auto; transform: translateX(-50%); top: calc(var(--u) * 4.6); max-width: 60vw; }
	#introKarte { width: min(400px, 60vw); }
}

/* 1.3.1: keine Stunde, keine Mission - kein Fortschrittsbalken; Startkasten mit Stadtname gross */
#fortschritt { display: none !important; }
#missionBox h2 { text-transform: uppercase; letter-spacing: 0.06em; }
#missionStadt { color: var(--leise); }

/* 1.3.1 Layout fuer alle Groessen (tools/layout_pruef.mjs, 16 Fenstergroessen): Ort/Uhr nur so breit wie der Text */
#ortBlock { justify-self: start; min-width: 0; }
/* breite Bildschirme: die Informationen enden ueber der rechten Spalte (Ton, Tageszeit, Uebersicht) und ueber Dock und
   Legende (--untenH = Hoehe des Docks samt Legende, start.js); Regler und Ortskarte ebenso ueber Dock und Legende */
@media (min-width: 861px) and (min-height: 501px) {
	#lage { bottom: max(calc(var(--untenH, 52px) + var(--u) * 1.1 + 14px + env(safe-area-inset-bottom)), calc(var(--u) * 1.1 + 164px + env(safe-area-inset-bottom))); }
	#stadtRegler { max-height: calc(100% - var(--u) * 6.4 - var(--untenH, 52px) - var(--u) * 1.1 - 14px - env(safe-area-inset-bottom)); }
	#ortKarte { bottom: calc(var(--untenH, 52px) + var(--u) * 1.1 + 14px + env(safe-area-inset-bottom)); }
	body.reglerOffen.ortOffen #stadtRegler { max-height: calc(100% - var(--u) * 6.4 - var(--untenH, 52px) - var(--u) * 1.1 - 260px); }
}
/* Handy quer: Tafeln unter dem Index, Coach weg, solange eine Tafel offen ist; Dock darf umbrechen statt in die rechte
   Spalte zu laufen; schmal ohne Teilwerte am Index */
@media (max-height: 500px) and (orientation: landscape) {
	#stadtRegler, #lage, #ortKarte, #karte, #schublade { top: calc(56px + env(safe-area-inset-top)); max-height: calc(100% - 66px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
	body.reglerOffen #coach, body.lageOffen #coach, body.ortOffen #coach, body.karteOffen #coach { display: none; }
	#unten { max-width: calc(100vw - 140px); }
	#dock { flex-wrap: wrap; justify-content: center; }
}
@media (max-height: 500px) and (orientation: landscape) and (max-width: 760px) {
	.ixTeile { display: none !important; }
}

/* MINIMAL MALL */
.fehlt { display: none !important; }
.diag canvas.funkeGross { display: block; width: 100%; height: 84px; }
.diag canvas.balken { display: block; width: 100%; height: 132px; }
.ladenListe { margin: 12px 0 0; }
.ladenListe > em { display: block; margin-bottom: 6px; opacity: 0.7; font-style: normal; }
.ladenListe ul { list-style: none; margin: 0; padding: 0; }
.ladenListe li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 26px; font-size: 13px; }
.ladenListe li i { width: 10px; height: 10px; background: var(--f, #fff); }
.ladenListe li span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ladenListe li b { font-variant-numeric: tabular-nums; }
.ladenListe li b.gut { color: #7CFF4F; }
.ladenListe li b.schlecht { color: #FF2E88; }
@media (max-width: 379px) {
	/* kleine Handys: Tempo und Ansicht bleiben in einer Zeile, sonst ueberdeckt das Dock die rechte Spalte */
	#dock button { padding: 0 4px; min-width: 34px; letter-spacing: 0.04em; }
}
@media (max-width: 480px) {
	/* lange Zentrennamen laufen sonst unter die Umsatzanzeige */
	#ortName { max-width: 25vw; white-space: nowrap; }
}