/* MINIMAL WATER - Seite: schwarz/weiss, Versalien, scharfe Kanten (wie die anderen Minimal-Spiele). Alles Bedienbare wird
   einmal angelegt und nur in Zustand und Inhalt geaendert (kein Neubau im Takt).
   0.1.3 "ruhig": wenige Flaechen aus dunklem Glas statt Rahmen; sichtbar ist nur, was die Aufgabe gerade braucht -
   oben Zeit und zwei Kennzahlen, links die Aufgabe, unten die Anlagen des Schritts, rechts unten die Karte.
   Farben der Bedienplaetze: 1 Einspeisung/Pumpen orange, 2 Speicher cyan, 3 Verteilnetz violett, 4 Verbraucher gelb. */
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #07080c; 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(10px, min(0.95vw, 1.75vh)); --rand: calc(var(--u) * 1.4);
	--s1: #ff9f1c; --s2: #4cc9f0; --s3: #c77dff; --s4: #ffd60a; --ok: #7bd389; --warn: #ffb703; --rot: #ff5a5f; --wasser: #5ee7ff;
	--glas: rgba(9, 11, 17, 0.66); --glasDicht: rgba(9, 11, 17, 0.86); --kante: rgba(255, 255, 255, 0.10); --linie: rgba(255, 255, 255, 0.22);
	--leise: rgba(255, 255, 255, 0.55); }
#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; }
.klein { font-size: calc(var(--u) * 0.82); }
.gedimmt { opacity: 0.62; }
.zahl { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.01em; }
h1, h2, h3 { margin: 0; }

/* Knoepfe: Geisterknopf 2 px fuer Seiten und Tafeln, flach (ohne Rahmen) fuer die Werkzeuge im Spiel */
button, .knopf { font-family: inherit; color: #fff; background: none; border: 2px solid #fff; border-radius: 0; cursor: pointer;
	padding: calc(var(--u) * 0.62) calc(var(--u) * 1.2); min-height: 40px; touch-action: manipulation; text-decoration: none;
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; box-sizing: border-box; }
button:hover, button:focus-visible, .knopf:hover, .knopf:focus-visible { background: #fff; color: #07080c; outline: none; }
button.gross { border-width: 4px; padding: calc(var(--u) * 0.9) calc(var(--u) * 2.2); font-size: calc(var(--u) * 1.15); }
button.an { background: #fff; color: #07080c; }
button:disabled { opacity: 0.35; cursor: default; }
.gruppe { display: flex; }
.gruppe button { margin-left: -2px; min-width: 40px; }
.gruppe button:first-child { margin-left: 0; }
.knoepfe { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 0.8); justify-content: center; }
.knoepfe.senkrecht { flex-direction: column; min-width: calc(var(--u) * 20); }
.glas { background: var(--glas); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }

#hud { position: absolute; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
#hud button:not(.gross) { border: none; min-height: 36px; }
#hud .gruppe button { margin-left: 0; }
#hud button:hover, #hud button:focus-visible { background: rgba(255, 255, 255, 0.16); color: #fff; }
#hud button.an, #hud button.an:hover { background: #fff; color: #07080c; }

/* Kopfleiste: Name, Zeit, zwei Kennzahlen, Menue */
#oben { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: calc(var(--u) * 2.2);
	padding: calc(var(--u) * 0.9) var(--rand); padding-top: max(calc(var(--u) * 0.9), env(safe-area-inset-top));
	background: linear-gradient(rgba(7, 8, 12, 0.86), rgba(7, 8, 12, 0.5) 60%, rgba(7, 8, 12, 0)); pointer-events: none; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7); }
#oben > * { pointer-events: auto; }
#marke { display: grid; line-height: 1.15; cursor: default; }
#marke b { font-size: calc(var(--u) * 1.1); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }
#marke span { font-size: calc(var(--u) * 0.74); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; }
#zeit { display: flex; align-items: center; gap: calc(var(--u) * 0.5); }
#uhr { display: grid; line-height: 1.0; min-width: calc(var(--u) * 6.2); }
#uhrZeit { font-size: calc(var(--u) * 2.1); }
#uhrInfo { opacity: 0.6; white-space: nowrap; font-size: calc(var(--u) * 0.68); margin-top: 0.25em; }
#uhrInfo:empty { display: none; }
#uhrInfo.warn { color: var(--warn); opacity: 1; }
#pauseKnopf { width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2); min-width: 40px; min-height: 40px; padding: 0; border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.1); }
#pauseKnopf i { display: block; width: 0.8em; height: 0.9em; border-left: 0.26em solid currentColor; border-right: 0.26em solid currentColor; box-sizing: border-box; }
#pauseKnopf.steht i { width: 0; height: 0; border: none; border-left: 0.8em solid currentColor; border-top: 0.5em solid transparent; border-bottom: 0.5em solid transparent; margin-left: 0.2em; }
#pauseKnopf.steht { background: #fff; color: #07080c; }
#tempoKnopf { padding: 0 calc(var(--u) * 0.8); gap: 0.4em; white-space: nowrap; color: rgba(255, 255, 255, 0.8); }
#tempoKnopf i { font-style: normal; font-size: 1.3em; line-height: 1; opacity: 0.7; }
#kpi { display: flex; gap: calc(var(--u) * 1.8); margin-left: auto; }
.kpi { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 0.7em; line-height: 1.1; }
.kpi span { opacity: 0.6; font-size: calc(var(--u) * 0.72); }
.kpi b { font-size: calc(var(--u) * 1.45); text-align: right; min-width: 3.2em; }
.kpi u { grid-column: span 2; display: block; height: 3px; background: rgba(255, 255, 255, 0.16); margin-top: 0.45em; text-decoration: none; }
.kpi u s { display: block; height: 100%; width: 0; background: #fff; transition: width 0.4s linear, background 0.4s; }
.kpi.warn b { color: var(--warn); }
.kpi.warn u s { background: var(--warn); }
.kpi.rot b { color: var(--rot); }
.kpi.rot u s { background: var(--rot); }
#menueKnopf { gap: 0.7em; padding: 0 calc(var(--u) * 0.9); }
.striche { display: block; width: 1.25em; height: 0.85em; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; position: relative; box-sizing: border-box; }
.striche::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid currentColor; transform: translateY(-50%); }

/* Tafeln */
.tafel { position: absolute; background: var(--glas); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
	border: 1px solid var(--kante); box-sizing: border-box; padding: calc(var(--u) * 1.3); overflow: auto; max-height: calc(100% - var(--u) * 17); }
.tafel .kopf { display: flex; justify-content: space-between; align-items: center; gap: 1em; margin-bottom: calc(var(--u) * 0.5); }
.tafel h3 { font-size: calc(var(--u) * 1.45); font-weight: 750; line-height: 1.15; margin: 0.15em 0 0.35em; }
.tafel p { font-size: calc(var(--u) * 1.0); line-height: 1.45; margin: 0.4em 0; opacity: 0.92; }

/* Aufgabe */
#missionTafel { left: var(--rand); top: calc(var(--u) * 6.4); width: calc(var(--u) * 27); }
#missionTitel { opacity: 0.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hud #schrittNr { min-height: 0; padding: 0.2em 0.4em; margin: -0.2em -0.4em; opacity: 0.6; white-space: nowrap; font-size: calc(var(--u) * 0.72); }
#punkte { display: flex; gap: 4px; margin: calc(var(--u) * 0.2) 0 calc(var(--u) * 0.9); cursor: pointer; padding: 4px 0; outline: none; }
#punkte i { flex: 1; height: 4px; background: rgba(255, 255, 255, 0.18); transition: background 0.4s; }
#punkte i.fertig { background: var(--ok); }
#punkte i.jetzt { background: #fff; }
#schrittTitel { font-size: calc(var(--u) * 2.0); line-height: 1.08; margin: 0 0 0.3em; letter-spacing: -0.005em; }
#schrittText { font-size: calc(var(--u) * 1.12); line-height: 1.45; opacity: 0.86; margin: 0; }
.balken { position: relative; height: 4px; background: rgba(255, 255, 255, 0.16); margin: calc(var(--u) * 2.0) 0 calc(var(--u) * 0.4); }
.balken b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--wasser); transition: width 0.3s linear; }
.balken span { position: absolute; left: 0; bottom: calc(100% + 0.5em); opacity: 0.7; font-size: calc(var(--u) * 0.7); white-space: nowrap; }
#lageText { margin: calc(var(--u) * 0.9) 0 0; padding: calc(var(--u) * 0.5) calc(var(--u) * 0.75); border-left: 3px solid currentColor;
	background: rgba(255, 255, 255, 0.05); font-size: calc(var(--u) * 0.98); line-height: 1.4; }
#lageText.warn { color: var(--warn); }
#lageText.rot { color: var(--rot); }
#hilfeKnopf { margin-top: calc(var(--u) * 1.0); padding: 0.3em 0.7em 0.3em 0.3em; margin-left: -0.3em; gap: 0.65em; opacity: 0.85; }
#hilfeKnopf i { font-style: normal; width: 1.7em; height: 1.7em; border-radius: 50%; border: 2px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; letter-spacing: 0; }
#hilfeKnopf.offen { display: none; }
#hilfeText { list-style: none; margin: calc(var(--u) * 1.0) 0 0; padding: 0; display: grid; gap: calc(var(--u) * 0.45); }
#hilfeText:empty { display: none; }
#hilfeText li { font-size: calc(var(--u) * 0.95); line-height: 1.4; padding: calc(var(--u) * 0.55) calc(var(--u) * 0.75); background: rgba(255, 255, 255, 0.07); cursor: pointer; }
#hilfeText li b { display: block; font-size: calc(var(--u) * 0.68); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; margin-bottom: 0.25em; }
#hilfeText li.mehr { background: none; padding: 0.2em 0; opacity: 0.7; font-size: calc(var(--u) * 0.78); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }
#schrittListe { list-style: none; margin: 0 0 calc(var(--u) * 1.0); padding: 0 0 calc(var(--u) * 0.9); display: grid; gap: calc(var(--u) * 0.3); border-bottom: 1px solid var(--kante); }
#schrittListe li { display: grid; grid-template-columns: 1.6em 1fr; opacity: 0.45; }
#schrittListe li.fertig { opacity: 0.75; }
#schrittListe li.jetzt { opacity: 1; }
#schrittListe li::before { content: '○'; }
#schrittListe li.fertig::before { content: '✓'; color: var(--ok); }
#schrittListe li.jetzt::before { content: '●'; }

/* Anlagentafel */
#anlageTafel { right: var(--rand); top: calc(var(--u) * 6.4); width: calc(var(--u) * 26); border-top: 3px solid var(--farbe, #fff); }
#anlageTafel .kopf { color: var(--farbe, #fff); }
#anlageTyp { opacity: 0.9; }
#hud #anlageZu { min-height: 34px; min-width: 34px; padding: 0; font-size: 20px; margin: -6px -8px 0 0; }
#anlageName { margin-top: 0; }
#anlageFunktion { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; opacity: 0.7 !important; font-size: calc(var(--u) * 0.92) !important; }
#anlageWerte { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 0.6) calc(var(--u) * 1.0); margin: calc(var(--u) * 0.9) 0; }
.wert { display: grid; }
.wert span { font-size: calc(var(--u) * 0.68); letter-spacing: 0.13em; text-transform: uppercase; opacity: 0.55; }
.wert span:empty { display: none; }
.wert b { font-size: calc(var(--u) * 1.3); font-variant-numeric: tabular-nums; }
.wert b small { font-size: 0.6em; opacity: 0.7; margin-left: 0.2em; font-weight: 600; }
.wert.gross { grid-column: span 2; }
.wert.gross b { font-size: calc(var(--u) * 2.2); line-height: 1.1; }
.wert.ok b { color: var(--ok); }
.wert.warn b { color: var(--warn); }
.wert.rot b { color: var(--rot); }
.pegel { grid-column: span 2; height: 6px; background: rgba(255, 255, 255, 0.14); position: relative; }
.pegel b { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #1d6fbf, var(--wasser)); transition: width 0.25s linear; }
#hud #wirkungKnopf { min-height: 30px; padding: 0.3em 0; margin-top: calc(var(--u) * 0.4); opacity: 0.6; }
#hud #wirkungKnopf:hover { background: none; opacity: 1; }
#anlageWirkung { opacity: 0.75; margin-top: 0 !important; }
#anlageZustaendig:empty { display: none; }

/* Drehregler: Kreisbogen ueber 270 Grad, ziehen, Tasten, Knoepfe */
.regler-block { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * 1.2); align-items: center; margin: calc(var(--u) * 0.6) 0; }
.drehknopf { width: calc(var(--u) * 9.2); height: calc(var(--u) * 9.2); min-width: 112px; min-height: 112px; position: relative; touch-action: none; cursor: grab; outline: none; color: var(--farbe, #fff); }
.drehknopf:focus-visible { outline: 2px dashed var(--farbe, #fff); outline-offset: 4px; }
.drehknopf svg { width: 100%; height: 100%; display: block; }
.drehknopf .wertText { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; color: #fff; }
.drehknopf .wertText b { font-size: calc(var(--u) * 1.55); font-variant-numeric: tabular-nums; }
.drehknopf .wertText span { font-size: calc(var(--u) * 0.66); letter-spacing: 0.13em; text-transform: uppercase; opacity: 0.6; }
.regler-knoepfe { display: grid; gap: calc(var(--u) * 0.45); }
#hud .regler-knoepfe button, #hud .schalter button { border: 1px solid var(--linie); min-height: 46px; flex: 1; padding-left: 0.4em; padding-right: 0.4em; }
#hud .regler-knoepfe .gruppe button + button, #hud .schalter button + button { border-left: none; }
.schalter { display: flex; gap: 0; }
#hud .schalter button.an.ein { background: var(--farbe, #fff); border-color: var(--farbe, #fff); }
.optionen { display: grid; gap: calc(var(--u) * 0.5); margin: calc(var(--u) * 0.6) 0; }
#hud .optionen button { display: grid; justify-items: start; justify-content: stretch; text-align: left; gap: 0.2em; padding: calc(var(--u) * 0.7) calc(var(--u) * 0.9);
	min-height: 56px; border: 1px solid var(--linie); }
.optionen button b { font-size: calc(var(--u) * 1.05); letter-spacing: 0.06em; }
.optionen button span { font-size: calc(var(--u) * 0.8); letter-spacing: 0.08em; opacity: 0.8; text-transform: none; font-weight: 500; }
#hud .optionen button.verboten { border-color: var(--rot); color: var(--rot); }
#hud .optionen button.lang { border-color: var(--warn); color: var(--warn); }
#hud .optionen button.gebaut { background: var(--ok); color: #07080c; border-color: var(--ok); }

/* Dock unten: die Anlagen des Schritts; "Alle Anlagen" klappt die Bedienplaetze auf */
#unten { position: absolute; left: var(--rand); bottom: calc(var(--u) * 1.2); bottom: max(calc(var(--u) * 1.2), env(safe-area-inset-bottom));
	right: calc(var(--u) * 32); display: grid; gap: calc(var(--u) * 0.55); justify-items: start; pointer-events: none; }
#unten > * { pointer-events: auto; }
#dockKopf { display: flex; align-items: center; gap: calc(var(--u) * 1.0); min-height: 22px; }
#dockTitel { opacity: 0.6; font-size: calc(var(--u) * 0.7); }
#dockTitel:empty { display: none; }
#stationen { background: var(--glasDicht); }
#stationen button { gap: 0.6em; color: rgba(255, 255, 255, 0.75); min-height: 38px; }
#stationen button i { font-style: normal; font-weight: 800; color: var(--sf); }
#stationen button[data-station="1"] { --sf: var(--s1); }
#stationen button[data-station="2"] { --sf: var(--s2); }
#stationen button[data-station="3"] { --sf: var(--s3); }
#stationen button[data-station="4"] { --sf: var(--s4); }
#hud #stationen button.an { background: var(--sf); color: #07080c; }
#stationen button.an i { color: #07080c; }
#dockZeile { display: flex; align-items: flex-end; gap: calc(var(--u) * 0.5); max-width: 100%; }
#chips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 0.5); min-width: 0; }
#chips:empty { display: none; }
#hud button.chip { display: grid; justify-items: start; align-content: center; gap: 0.2em; padding: calc(var(--u) * 0.5) calc(var(--u) * 0.95) calc(var(--u) * 0.5) calc(var(--u) * 0.8);
	min-height: 52px; border: none; border-left: 3px solid var(--sf, #fff); background: var(--glasDicht); text-align: left; }
.chip b { font-size: calc(var(--u) * 0.85); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.chip span { font-size: calc(var(--u) * 0.8); opacity: 0.75; font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0.02em; white-space: nowrap; }
#hud button.chip.gewaehlt, #hud button.chip.gewaehlt:hover { background: var(--sf, #fff); color: #07080c; }
.chip.gewaehlt .punkt { outline: 1px solid rgba(7, 8, 12, 0.6); }
.chip .punkt { display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.4em; vertical-align: 0; background: #666; border-radius: 50%; }
.chip .punkt.ok { background: var(--ok); }
.chip .punkt.warn { background: var(--warn); }
.chip .punkt.rot { background: var(--rot); }
#hud #alleKnopf { background: rgba(9, 11, 17, 0.5); color: rgba(255, 255, 255, 0.7); min-height: 52px; padding: 0 calc(var(--u) * 1.0); white-space: nowrap; }
#hud #alleKnopf:hover { color: #fff; background: rgba(255, 255, 255, 0.16); }

/* Karte: Ansicht und Kamera rechts unten */
#karteKnoepfe { position: absolute; right: var(--rand); bottom: calc(var(--u) * 1.2); bottom: max(calc(var(--u) * 1.2), env(safe-area-inset-bottom));
	display: grid; justify-items: end; gap: 6px; }
#karteKnoepfe .zeile { display: flex; gap: 6px; }
#karteKnoepfe .gruppe { background: var(--glasDicht); }
#ansichten button, #analysen button { min-height: 44px; padding: 0 calc(var(--u) * 1.0); color: rgba(255, 255, 255, 0.75); }
#kameraKnoepfe button { min-width: 44px; min-height: 44px; padding: 0; font-size: 18px; }
#kameraKnoepfe .dreh { display: none; }
@media (pointer: coarse) and (min-width: 981px) { #kameraKnoepfe .dreh { display: inline-flex; } }
body.kiosk #kameraKnoepfe .dreh { display: inline-flex; }

/* Beschriftungen an der Karte: nur, was die Aufgabe braucht */
#marken { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.marke { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); pointer-events: auto; cursor: pointer; white-space: nowrap;
	padding: 4px 9px 5px 8px; background: var(--glasDicht); border-left: 3px solid var(--mf, #fff); font-size: calc(var(--u) * 0.76);
	letter-spacing: 0.1em; text-transform: uppercase; font-weight: 650; line-height: 1.25; will-change: transform; }
.marke small { display: block; font-size: 0.95em; letter-spacing: 0.03em; text-transform: none; opacity: 0.8; font-variant-numeric: tabular-nums; font-weight: 600; }
.marke.klein { padding: 2px 6px 3px; font-size: calc(var(--u) * 0.64); opacity: 0.8; }
.marke.gewaehlt { background: var(--mf, #fff); color: #07080c; }
.marke.fokus { font-size: calc(var(--u) * 0.86); }
.marke.warn small { color: var(--warn); opacity: 1; }
.marke.rot small { color: var(--rot); opacity: 1; }
.marke.gewaehlt small { color: #07080c; }

/* Meldungen: schmal oben in der Mitte */
#meldungen { position: absolute; left: 50%; top: calc(var(--u) * 6.4); transform: translateX(-50%); display: grid; gap: 6px; justify-items: center; pointer-events: none;
	width: min(46vw, 640px); }
.meldung { background: var(--glasDicht); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-left: 3px solid #fff;
	padding: calc(var(--u) * 0.6) calc(var(--u) * 1.1); font-size: calc(var(--u) * 0.98); line-height: 1.4; text-align: left; animation: einblenden 0.35s ease-out; }
.meldung.ok { border-left-color: var(--ok); }
.meldung.warn { border-left-color: var(--warn); }
.meldung.rot { border-left-color: var(--rot); }
.meldung.gross { font-size: calc(var(--u) * 1.25); font-weight: 700; letter-spacing: 0.01em; padding: calc(var(--u) * 0.8) calc(var(--u) * 1.3); }
.meldung.raus { opacity: 0; transition: opacity 0.6s; }
@keyframes einblenden { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
#vorfuehrMarke { position: absolute; left: 50%; top: calc(var(--u) * 1.5); transform: translateX(-50%); padding: 0.5em 1em; background: var(--glasDicht); border-left: 3px solid var(--wasser); }

/* Seiten */
.seite { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 1.4);
	background: rgba(7, 8, 12, 0.72); padding: 4vh 4vw; box-sizing: border-box; text-align: center; overflow: auto; }
#titelSeite { background: linear-gradient(rgba(7, 8, 12, 0.05), rgba(7, 8, 12, 0.25) 45%, rgba(7, 8, 12, 0.85)); justify-content: flex-end; padding-bottom: 7vh; }
.titelBlock { display: grid; gap: calc(var(--u) * 0.6); }
.seite h1 { font-size: calc(var(--u) * 5.6); font-weight: 850; letter-spacing: -0.03em; line-height: 0.95; text-transform: uppercase; }
.seite h2 { font-size: calc(var(--u) * 2.0); letter-spacing: 0.18em; }
.unter { margin: 0; font-size: calc(var(--u) * 1.3); }
.vorschau { margin: 0; opacity: 0.7; }
.fuss { max-width: 90ch; opacity: 0.55; line-height: 1.5; margin: 0; }
.karten { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.0); justify-content: center; max-width: 1600px; }
.karte { border: 2px solid var(--linie); background: rgba(7, 8, 12, 0.6); padding: calc(var(--u) * 1.2); width: calc(var(--u) * 21); min-width: 230px; text-align: left; display: grid; gap: calc(var(--u) * 0.5); align-content: start; }
.karte h3 { font-size: calc(var(--u) * 1.25); text-transform: uppercase; letter-spacing: 0.06em; }
.karte p { margin: 0; line-height: 1.5; opacity: 0.85; font-size: calc(var(--u) * 0.98); }
.karte .nr { font-size: calc(var(--u) * 2.6); font-weight: 800; opacity: 0.35; line-height: 1; }
.karte svg { width: 100%; height: auto; max-height: calc(var(--u) * 9); display: block; }
.karte.spielbar { border-color: #fff; cursor: pointer; }
.karte.spielbar:hover { background: rgba(255, 255, 255, 0.08); }
.karte .status { font-size: calc(var(--u) * 0.72); letter-spacing: 0.14em; text-transform: uppercase; }
.karte .status.ok { color: var(--ok); }
.regler { display: grid; gap: calc(var(--u) * 0.7); min-width: min(92vw, calc(var(--u) * 36)); }
.reihe { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1em; text-align: left; }
.reihe .gruppe button { padding-left: 0.9em; padding-right: 0.9em; }
#tonKnopf.aus { text-decoration: line-through; opacity: 0.6; }
#endeBlock { display: grid; gap: calc(var(--u) * 0.7); justify-items: center; }
#endeSterne { display: flex; gap: calc(var(--u) * 0.6); }
#endeSterne i { width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); border: 3px solid #fff; display: block; font-style: normal; }
#endeSterne i.voll { background: #fff; }
#endeZahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 0.8); min-width: min(92vw, calc(var(--u) * 54)); }
#endeZahlen .feld { border: 2px solid var(--linie); padding: calc(var(--u) * 0.8); text-align: left; display: grid; gap: 0.35em; }
#endeZahlen .feld.ok { border-color: var(--ok); }
#endeZahlen .feld.nein { border-color: var(--warn); }
#endeZahlen .feld b { font-size: calc(var(--u) * 1.6); font-variant-numeric: tabular-nums; }
#endeZahlen .feld span { font-size: calc(var(--u) * 0.75); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }
#endeZahlen .feld small { font-size: calc(var(--u) * 0.85); opacity: 0.8; line-height: 1.4; }
#angebot { border: 4px solid #fff; padding: calc(var(--u) * 1.2) calc(var(--u) * 1.6); max-width: 70ch; }
#angebot h3 { font-size: calc(var(--u) * 1.6); text-transform: uppercase; letter-spacing: 0.04em; }
#angebot p { line-height: 1.5; margin: 0.6em 0 0; }
#endeSeite { background: rgba(7, 8, 12, 0.55); }
#nochDa { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1em; background: rgba(7, 8, 12, 0.8); z-index: 20; text-align: center; }
#lade { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #07080c; z-index: 50; }
#lade h1 { font-size: 48px; font-weight: 850; letter-spacing: -0.03em; text-transform: uppercase; margin: 0; }
#lade p { letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; opacity: 0.7; }
body.ohneHud #hud, body.ohneHud #marken { display: none !important; }
body.aufnahme #spiel { cursor: none; }
body.seiteOffen #hud, body.seiteOffen #marken { display: none !important; }
body.kiosk #buehne { --u: max(12px, min(1.12vw, 2.05vh)); }

/* mittlere Breiten: Kennzahlen ohne Beschriftung, Aufgabe etwas schmaler */
@media (max-width: 1400px) and (min-width: 981px) {
	#marke span { display: none; }
	#missionTafel { width: calc(var(--u) * 25); }
	#unten { right: calc(var(--u) * 28); }
}

/* schmale und hohe Bildschirme (Handy): Aufgabe oben als Leiste, Anlagen unten zum Wischen, Tafel als Blatt von unten */
@media (max-width: 980px), (max-aspect-ratio: 4/5) {
	#buehne { --u: max(11px, min(2.9vw, 1.6vh)); --rand: 10px; }
	#oben { gap: 10px; padding: 8px 10px 16px; padding-top: max(8px, env(safe-area-inset-top)); background: linear-gradient(rgba(7, 8, 12, 0.92), rgba(7, 8, 12, 0.75) 70%, rgba(7, 8, 12, 0)); }
	#marke { display: none; }
	#uhr { min-width: 0; }
	#uhrZeit { font-size: calc(var(--u) * 1.75); }
	#pauseKnopf { width: 40px; height: 40px; }
	#tempoKnopf { padding: 0 6px; }
	#kpi { gap: 14px; }
	.kpi { grid-template-columns: auto; }
	.kpi span { font-size: 9px; letter-spacing: 0.1em; }
	.kpi b { font-size: calc(var(--u) * 1.2); text-align: left; min-width: 0; }
	.kpi u { grid-column: auto; margin-top: 0.3em; }
	#menueKnopf span { display: none; }
	#missionTafel { left: 8px; right: 8px; width: auto; top: calc(56px + env(safe-area-inset-top)); max-height: 38vh; padding: 12px 14px; }
	#schrittTitel { font-size: calc(var(--u) * 1.5); }
	#schrittText { font-size: calc(var(--u) * 1.0); }
	#missionTafel .balken { margin-top: calc(var(--u) * 1.6); }
	#hilfeKnopf { margin-top: 6px; }
	#unten { left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); }
	#dockZeile { width: 100%; }
	#chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; }
	#chips::-webkit-scrollbar { display: none; }
	#stationen button span { display: none; }
	#stationen button { min-width: 48px; }
	#hud #alleKnopf { padding: 0 10px; }
	#karteKnoepfe { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 52px + 34px); right: 8px; }
	#ansichten button, #analysen button { min-height: 40px; padding: 0 10px; }
	#anlageTafel { left: 0; right: 0; width: auto; top: auto; bottom: 0; max-height: 58vh; z-index: 3; background: var(--glasDicht);
		border: none; border-top: 3px solid var(--farbe, #fff); padding-bottom: max(14px, env(safe-area-inset-bottom)); }
	body.tafelOffen #missionTafel { display: none; }
	body.tafelOffen #karteKnoepfe { display: none; }
	#meldungen { width: calc(100vw - 16px); top: calc(60px + env(safe-area-inset-top)); }
	#endeZahlen { grid-template-columns: 1fr 1fr; }
}

/* Titelseite: Missionen als Knoepfe, alles andere als ruhige Textlinks */
#titelSeite .knoepfe:not(#missionKnoepfe) { gap: calc(var(--u) * 0.4); }
#titelSeite .knoepfe:not(#missionKnoepfe) button { border-color: transparent; opacity: 0.72; padding-left: calc(var(--u) * 0.9); padding-right: calc(var(--u) * 0.9); }
#titelSeite .knoepfe:not(#missionKnoepfe) button:hover, #titelSeite .knoepfe:not(#missionKnoepfe) button:focus-visible { opacity: 1; background: rgba(255, 255, 255, 0.14); color: #fff; }

/* 0.1.4 Daten: Tagesgang rechts unten, Diagramme-Knopf, Verlauf in der Anlagentafel, Mini-Balken an den Beschriftungen */
#tagesgang { width: calc(var(--u) * 19); min-width: 280px; box-sizing: border-box; padding: calc(var(--u) * 0.8) calc(var(--u) * 0.9) calc(var(--u) * 0.7);
	background: var(--glas); border: 1px solid var(--kante); display: grid; gap: calc(var(--u) * 0.4); }
#tagesgang .kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; }
#tagesgang .kopf .text { opacity: 0.65; font-size: calc(var(--u) * 0.7); }
#tgWerte { font-size: calc(var(--u) * 0.8); opacity: 0.9; white-space: nowrap; }
#tgWerte b { color: var(--wasser); font-weight: 700; }
#tgBild { width: 100%; height: calc(var(--u) * 6.2); min-height: 76px; display: block; overflow: visible; }
#tgAchse { display: flex; justify-content: space-between; opacity: 0.45; font-size: calc(var(--u) * 0.62); letter-spacing: 0.08em; margin-top: -0.2em; }
#tgLegende { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3em 0.9em; font-size: calc(var(--u) * 0.66); opacity: 0.8; letter-spacing: 0.05em; }
#tgLegende li { display: flex; align-items: center; gap: 0.4em; }
.lg { display: inline-block; width: 1.4em; height: 0.7em; box-sizing: border-box; }
.lg.geliefert { background: rgba(94, 231, 255, 0.45); border-top: 2px solid #5ee7ff; }
.lg.bedarf { height: 0; border-top: 2px solid #fff; }
.lg.erwartet { height: 0; border-top: 2px dashed rgba(255, 255, 255, 0.6); }
.lg.reserve { height: 0; border-top: 2px solid #4c7cf0; }
.lg.spitze { background: rgba(255, 183, 3, 0.25); }
#tgWuerfel { margin: 0; opacity: 0.55; font-size: calc(var(--u) * 0.64); line-height: 1.4; }
#tgWuerfel:empty { display: none; }
#hud #diagrammKnopf { background: var(--glasDicht); min-height: 44px; padding: 0 calc(var(--u) * 0.9); gap: 0.6em; color: rgba(255, 255, 255, 0.6); }
#hud #diagrammKnopf.an { background: var(--glasDicht); color: #fff; box-shadow: inset 0 -2px 0 var(--wasser); }
.ikonBalken { display: inline-flex; align-items: flex-end; gap: 2px; height: 0.95em; }
.ikonBalken b { width: 3px; background: currentColor; display: block; }
.ikonBalken b:nth-child(1) { height: 45%; }
.ikonBalken b:nth-child(2) { height: 100%; }
.ikonBalken b:nth-child(3) { height: 70%; }
#diagrammKnopf.an .ikonBalken b { background: var(--wasser); }
body.ohneDiagramme #tagesgang { display: none; }
#anlageVerlauf { display: grid; gap: 0.3em; margin: 0 0 calc(var(--u) * 0.6); }
#anlageVerlauf span { font-size: calc(var(--u) * 0.66); opacity: 0.55; }
#anlageVerlauf svg { width: 100%; height: calc(var(--u) * 3.2); min-height: 38px; display: block; background: rgba(255, 255, 255, 0.04); }
#anlageVerlauf .linie { stroke: var(--farbe, #fff); }
#anlageVerlauf .flaeche { fill: var(--farbe, #fff); opacity: 0.18; }
.marke .mini { display: block; height: 3px; margin-top: 3px; background: rgba(255, 255, 255, 0.18); }
.marke .mini s { display: block; height: 100%; width: 0; background: var(--wasser); transition: width 0.4s linear; }
.marke.warn .mini s { background: var(--warn); }
.marke.rot .mini s { background: var(--rot); }
.marke.klein .mini { display: none; }
@media (max-width: 980px), (max-aspect-ratio: 4/5) {
	#tagesgang { display: none; }
	#diagrammKnopf span { display: none; }
}
@media (max-height: 760px) and (min-width: 981px) { #tgLegende, #tgWuerfel { display: none; } }
body.ohneDiagramme .marke .mini { display: none; }

/* 0.2.0 Stadtwasser: Ebenen-Wahl, Ebenen-Karten (Abwasser, Regen, Grauwasser, Kreislauf), Querschnitt Haus und Strasse */
#unten { right: calc(var(--u) * 38); }
#ebenen { background: var(--glasDicht); }
#ebenen button { min-height: 42px; padding: 0 calc(var(--u) * 0.75); gap: 0.5em; color: rgba(255, 255, 255, 0.75); font-size: calc(var(--u) * 0.72); }
#hud #ebenen button.an { background: rgba(255, 255, 255, 0.14); color: #fff; box-shadow: inset 0 -3px 0 var(--ef, #fff); }
.ep { display: inline-block; width: 0.75em; height: 0.75em; border-radius: 50%; background: var(--ef, #fff); }
[data-ebene="0"] { --ef: #5ee7ff; }
[data-ebene="1"] { --ef: #d99a4e; }
[data-ebene="2"] { --ef: #9cc4ea; }
[data-ebene="3"] { --ef: #cfd8e2; }
[data-ebene="4"] { --ef: #7bd389; }
.ep.kreis { background: conic-gradient(#5ee7ff 0 25%, #d99a4e 0 50%, #9cc4ea 0 75%, #7bd389 0); }
#hud #schnittKnopf { background: var(--glasDicht); min-height: 44px; padding: 0 calc(var(--u) * 0.9); gap: 0.6em; color: rgba(255, 255, 255, 0.75); }
#hud #schnittKnopf.an { color: #fff; box-shadow: inset 0 -2px 0 #fff; }
.ikonSchnitt { display: inline-block; width: 1em; height: 0.9em; border: 2px solid currentColor; border-top-width: 0; position: relative; box-sizing: border-box; }
.ikonSchnitt::before { content: ""; position: absolute; left: -2px; right: -2px; top: 35%; border-top: 2px solid currentColor; }
.ebenekarte { width: calc(var(--u) * 21); min-width: 300px; box-sizing: border-box; padding: calc(var(--u) * 0.8) calc(var(--u) * 0.9) calc(var(--u) * 0.7);
	background: var(--glas); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--kante); display: grid; gap: calc(var(--u) * 0.5); }
#ebeneKreislauf { width: calc(var(--u) * 30); min-width: 440px; }
.ebenekarte .kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; }
.ebenekarte .kopf .text { opacity: 0.65; font-size: calc(var(--u) * 0.7); }
.ebenekarte .kopf .zahl { font-size: calc(var(--u) * 0.8); white-space: nowrap; }
.kennbalken { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0.2em 1em; }
.kennbalken span { opacity: 0.7; }
.kennbalken b { font-size: calc(var(--u) * 1.2); }
.kennbalken u { grid-column: span 2; position: relative; display: block; height: 5px; background: rgba(255, 255, 255, 0.12); text-decoration: none; }
.kennbalken u s { display: block; height: 100%; width: 0; background: #d99a4e; transition: width 0.4s linear; }
.kennbalken u i { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #fff; left: 50%; }
.kennbalken.rot b { color: var(--rot); }
.kennbalken.gruen b { color: var(--ok); }
.verlaufKlein { width: 100%; height: calc(var(--u) * 3.4); min-height: 44px; display: block; background: rgba(255, 255, 255, 0.04); }
.legende { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3em 0.9em; font-size: calc(var(--u) * 0.66); opacity: 0.8; }
.legende li { display: flex; align-items: center; gap: 0.4em; }
.lg.kanal { height: 0; border-top: 3px solid #d99a4e; }
.lg.wohnen { width: 0.8em; height: 0.8em; border-radius: 50%; background: #ffe7b8; }
.lg.gewerbe { width: 0.8em; height: 0.8em; border-radius: 50%; background: #ff9f45; }
.lg.oeff { width: 0.8em; height: 0.8em; border-radius: 50%; background: #c79bff; }
.lg.heb { width: 0.8em; height: 0.8em; background: #ff9f1c; }
.erklaerung { margin: 0; opacity: 0.6; font-size: calc(var(--u) * 0.68); line-height: 1.45; }
.erklaerung:empty { display: none; }
#hud #regenKnopf { justify-self: start; border: 1px solid #9cc4ea; color: #cfe3f6; gap: 0.6em; min-height: 40px; padding: 0 calc(var(--u) * 1.0); }
#hud #regenKnopf:hover { background: rgba(156, 196, 234, 0.2); }
#hud #regenKnopf.an { background: #9cc4ea; color: #07080c; }
.tropfen { display: inline-block; width: 0.6em; height: 0.6em; background: currentColor; border-radius: 0 50% 50% 50%; transform: rotate(45deg); }
#grListe { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
#grListe li { display: grid; grid-template-columns: 8.5em 1fr 4.2em; align-items: center; gap: 0.6em; font-size: calc(var(--u) * 0.7); }
#grListe li u { display: block; height: 8px; background: rgba(255, 255, 255, 0.08); text-decoration: none; }
#grListe li u s { display: block; height: 100%; background: #9a6a3c; }
#grListe li.grau u s { background: #cfd8e2; }
#grListe li b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
#kkBild { width: 100%; height: auto; display: block; }
#kkBild text { fill: #fff; font-size: 10px; font-family: inherit; letter-spacing: 0.04em; }
body.qsOffen #missionTafel { display: none; }
#kkBild text.wert { font-variant-numeric: tabular-nums; opacity: 0.7; font-size: 10px; }
#kkBild rect { fill: rgba(255, 255, 255, 0.85); }
.marke.klaer { --mf: #d99a4e; }

/* Querschnitt: Haus und Strasse (typische Tiefen, Verbrauch je Person und Tag nach BDEW, Werte live) */
#querschnitt { left: var(--rand); top: calc(var(--u) * 6.4); width: min(calc(100vw - var(--u) * 4), calc(var(--u) * 52)); z-index: 4;
	background: var(--glasDicht); max-height: calc(100% - var(--u) * 9); }
#hud #qsZu { min-height: 34px; min-width: 34px; padding: 0; font-size: 20px; margin: -6px -8px 0 0; }
#qsBild { width: 100%; height: auto; display: block; }
#qsBild text { fill: rgba(255, 255, 255, 0.82); font-size: 12px; font-family: inherit; letter-spacing: 0.04em; }
#qsBild .raum text { fill: rgba(255, 255, 255, 0.5); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; }
#qsBild .werte text { font-size: 11.5px; font-variant-numeric: tabular-nums; }
#qsBild .bau polygon, #qsBild .bau rect, #qsBild .bau line { fill: none; stroke: rgba(255, 255, 255, 0.32); stroke-width: 1.5; }
#qsBild .bau polygon { fill: rgba(255, 255, 255, 0.03); }
#qsBild .bau .keller { fill: rgba(255, 255, 255, 0.025); stroke-dasharray: 4 4; }
#qsBild .geraet rect, #qsBild .geraet circle, #qsBild .geraet path { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.3; }
#qsBild .geraet .tropf { stroke: #5ee7ff; stroke-dasharray: 2 3; }
#qsBild .rohr { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#qsBild .fluss { fill: none; stroke-width: 3; stroke-dasharray: 5 13; animation: qsFluss 1.4s linear infinite; stroke-linecap: round; }
@keyframes qsFluss { to { stroke-dashoffset: -18; } }
#qsBild .trink .rohr { stroke: rgba(94, 231, 255, 0.55); }
#qsBild .trink .fluss { stroke: #e6fbff; }
#qsBild .zaehler { fill: #07080c; stroke: #5ee7ff; stroke-width: 2; }
#qsBild .ab .rohr { stroke: rgba(217, 154, 78, 0.6); stroke-width: 4; }
#qsBild .ab .fluss { stroke: #ffd9a8; animation-duration: 2.2s; }
#qsBild .grau .rohr { stroke: rgba(207, 216, 226, 0.5); stroke-dasharray: 3 5; stroke-width: 2; }
#qsBild .grau .box { fill: rgba(207, 216, 226, 0.08); stroke: rgba(207, 216, 226, 0.6); stroke-width: 1.2; }
#qsBild .grau text { fill: rgba(207, 216, 226, 0.85); font-size: 10.5px; }
#qsBild .regen .rohr { stroke: rgba(156, 196, 234, 0.45); stroke-width: 2.5; }
#qsBild .regen .fluss { stroke: #d6ecff; opacity: 0.25; }
#qsBild .regen .fluss.an { opacity: 1; animation-duration: 0.7s; }
#qsBild .strom { fill: #5c6270; }
#qsBild .gas { fill: #8a8458; }
#qsBild .trinkRohr { fill: rgba(94, 231, 255, 0.25); stroke: #5ee7ff; stroke-width: 2; }
#qsBild .kanalRohr { fill: rgba(217, 154, 78, 0.08); stroke: #d99a4e; stroke-width: 2.5; }
#qsBild .kanalWasser { fill: rgba(217, 154, 78, 0.55); }
#qsBild .tiefe line { stroke: rgba(255, 255, 255, 0.4); stroke-width: 1; }
#qsBild .tiefe text { font-size: 10.5px; fill: rgba(255, 255, 255, 0.5); }
#qsBild .beschrift text { font-size: 11.5px; }
#qsBild .blau { fill: #8ff0ff !important; }
#qsBild .braun { fill: #f0b878 !important; }
#qsBild .hellblau { fill: #bcd9f4 !important; }
#qsBild .gross { font-size: 15px !important; font-weight: 700; }
@media (max-width: 1500px) and (min-width: 981px) {
	#schnittKnopf span, #diagrammKnopf span { display: none; }
	#ebenen button { padding: 0 calc(var(--u) * 0.55); }
	#unten { right: calc(var(--u) * 33); }
}
@media (max-width: 980px), (max-aspect-ratio: 4/5) {
	.ebenekarte { display: none !important; }
	#ebenen span, #schnittKnopf span { display: none; }
	#ebenen button { min-width: 40px; padding: 0 10px; }
	#karteKnoepfe { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 52px + 34px); }
	#querschnitt { top: calc(56px + env(safe-area-inset-top)); width: calc(100vw - 16px); max-height: 70vh; }
}