:root{--bg:#0b1015;--panel:#0e141bdb;--rand:#94b2d229;--text:#dfe8f2;--gedimmt:#8fa3b8;--leise:#61748a;--akzent:#5eb0ef;color-scheme:dark}*{box-sizing:border-box}html,body,#root{background:var(--bg);height:100%;color:var(--text);-webkit-font-smoothing:antialiased;margin:0;font:13px/1.5 ui-sans-serif,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}.app{width:100%;height:100%;position:relative}canvas{touch-action:none;display:block}.kopf{pointer-events:none;text-shadow:0 1px 12px #000c;max-width:300px;position:absolute;top:14px;left:18px}.kopf h1{letter-spacing:.01em;margin:0;font-size:19px;font-weight:600}.kopf p{color:var(--gedimmt);margin:2px 0 0;font-size:12px}.panel{background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--rand);border-radius:10px;position:absolute;overflow:hidden;box-shadow:0 8px 32px #00000073}.panel.status{flex-direction:column;width:336px;max-height:calc(100vh - 92px);display:flex;top:64px;right:14px}.panel.controls{flex-direction:column;width:320px;max-height:calc(100vh - 140px);display:flex;bottom:14px;left:14px}.panelKopf{width:100%;color:var(--text);font:inherit;cursor:pointer;text-align:left;background:0 0;border:0;align-items:center;gap:8px;padding:10px 12px;display:flex}.panelKopf.statisch{cursor:default}.panelKopf .titel{flex:1;font-size:13px;font-weight:600}.panelKopf .zahl{font-variant-numeric:tabular-nums;color:var(--gedimmt);font-size:12px}.panelKopf .pfeil{color:var(--leise);font-size:11px}.panelInhalt{scrollbar-width:thin;padding:4px 12px 12px;overflow-y:auto}.balken{background:#ffffff12;flex:none;height:3px}.balkenFuellung{background:linear-gradient(90deg,#4ade80,#fbbf24);height:100%;transition:width .4s}.legende{color:var(--gedimmt);gap:12px;padding:8px 0 10px;font-size:11px;display:flex}.legende span{align-items:center;gap:5px;display:flex}.legende i,.status li i{border-radius:50%;flex:none;width:7px;height:7px;display:inline-block}.status section{margin-bottom:12px}.status h3{text-transform:uppercase;letter-spacing:.07em;color:var(--leise);align-items:baseline;gap:6px;margin:0 0 5px;font-size:11px;font-weight:600;display:flex}.gruppeZahl{font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0;font-weight:400}.status ul{margin:0;padding:0;list-style:none}.status li{align-items:flex-start;gap:8px;padding:3px 0;display:flex}.status li i{margin-top:6px}.status li.geplant{color:var(--leise)}.featureTitel{font-size:12px;display:block}.nachweis{color:var(--leise);margin-top:1px;font-size:11px;display:block}.regler{margin-bottom:12px;display:block}.reglerKopf{justify-content:space-between;align-items:baseline;margin-bottom:4px;font-size:12px;display:flex}.reglerKopf b{font-variant-numeric:tabular-nums;color:var(--akzent);font-weight:600}.regler input[type=range]{appearance:none;background:#ffffff21;border-radius:2px;outline:none;width:100%;height:3px}.regler input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--akzent);cursor:pointer;border:2px solid #0b1015;border-radius:50%;width:13px;height:13px}.hinweis{color:var(--leise);margin-top:3px;font-size:10.5px;line-height:1.4;display:block}.schalter{flex-direction:column;gap:7px;margin:14px 0;font-size:12px;display:flex}.schalter label{cursor:pointer;color:var(--gedimmt);align-items:flex-start;gap:7px;display:flex}.schalter input{accent-color:var(--akzent);margin:2px 0 0}.kennzahlen{border-top:1px solid var(--rand);padding-top:10px}.kennzahlen h3{text-transform:uppercase;letter-spacing:.07em;color:var(--leise);margin:0 0 6px;font-size:11px;font-weight:600}.kennzahlen dl{grid-template-columns:1fr auto;gap:3px 10px;margin:0;font-size:11.5px;display:grid}.kennzahlen dt{color:var(--gedimmt)}.kennzahlen dd{text-align:right;font-variant-numeric:tabular-nums;margin:0}.quelle{color:var(--leise);margin:8px 0 0;font-size:10px;line-height:1.45}.ladeanzeige{text-align:center;background:radial-gradient(#16212c 0%,#0b1015 70%);flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:40px;display:flex;position:absolute;inset:0}.ladeanzeige h2{margin:0;font-size:22px;font-weight:600}.ladeanzeige p{max-width:520px;color:var(--gedimmt);margin:0}.ladeanzeige .fehler{color:#f87171;font-family:ui-monospace,monospace;font-size:12px}.ladeanzeige code{background:#ffffff14;border-radius:4px;padding:1px 5px;font-size:11.5px}.fps{position:absolute!important;inset:auto 6px 6px auto!important}.panel.zeit{width:420px;padding:10px 12px 8px;top:14px;left:50%;transform:translate(-50%)}.zeitKopf{justify-content:space-between;align-items:center;gap:12px;display:flex}.zeitDatum{flex-direction:column;line-height:1.25;display:flex}.zeitDatum b{font-variant-numeric:tabular-nums;font-size:15px}.zeitDatum span{color:var(--leise);font-variant-numeric:tabular-nums;font-size:11px}.zeitKnoepfe{gap:5px;display:flex}.zeitKnoepfe button,.faktoren button{border:1px solid var(--rand);color:var(--text);font:inherit;cursor:pointer;background:#ffffff12;border-radius:6px;padding:5px 10px;font-size:12px;transition:background .12s}.zeitKnoepfe button:hover:not(:disabled),.faktoren button:hover{background:#ffffff24}.zeitKnoepfe button:disabled{opacity:.35;cursor:default}.zeitKnoepfe button.aktiv,.faktoren button.aktiv{background:var(--akzent);border-color:var(--akzent);color:#06121d;font-weight:600}.zeitBalken{background:#ffffff14;border-radius:2px;height:3px;margin:8px 0;overflow:hidden}.zeitFuellung{background:var(--akzent);height:100%;transition:width .2s linear}.faktoren{gap:5px;display:flex}.faktoren button{font-variant-numeric:tabular-nums;flex:1}.wetter{grid-template-columns:auto 1fr auto 1fr;gap:2px 8px;margin:9px 0 0;font-size:11px;display:grid}.wetter dt{color:var(--gedimmt)}.wetter dd{font-variant-numeric:tabular-nums;margin:0}.zeitFuss{border-top:1px solid var(--rand);justify-content:space-between;margin-top:8px;padding-top:7px;font-size:11px;display:flex}.zeitFuss .leise{color:var(--leise)}.simMeldung{color:var(--leise);margin-top:6px;font-size:10.5px}.panel.controls.zu,.panel.status.zu{width:auto;min-width:168px}.panel.controls{top:auto}.szenarien{gap:5px;margin-bottom:6px;display:flex}.szenarien button{border:1px solid var(--rand);color:var(--gedimmt);font:inherit;cursor:pointer;background:#ffffff12;border-radius:6px;flex:1;padding:4px 8px;font-size:11px}.szenarien button:hover{background:#ffffff24}.szenarien button.aktiv{border-color:var(--akzent);color:var(--text);background:#5eb0ef2e;font-weight:600}.quellenWahl{border-bottom:1px solid var(--rand);margin-bottom:12px;padding:8px 0 12px}.quellenTitel{text-transform:uppercase;letter-spacing:.07em;color:var(--leise);margin-bottom:6px;font-size:11px;font-weight:600;display:block}.quellenKnoepfe{gap:5px;display:flex}.quellenKnoepfe button{border:1px solid var(--rand);color:var(--gedimmt);font:inherit;cursor:pointer;background:#ffffff12;border-radius:6px;flex:1;padding:5px 8px;font-size:11.5px}.quellenKnoepfe button:hover{background:#ffffff24}.quellenKnoepfe button.aktiv{border-color:var(--akzent);color:var(--text);background:#5eb0ef2e;font-weight:600}.regler.gesperrt{opacity:.45}.regler.gesperrt input[type=range]{cursor:not-allowed}.regler.gesperrt .reglerKopf b{color:var(--gedimmt)}.zeitDatum .uhr{font-variant-numeric:tabular-nums;color:var(--akzent);margin-left:9px;font-weight:400}.faktoren button{padding:5px 4px;font-size:11px}.faktorErklaerung{color:var(--leise);text-align:center;margin-top:5px;font-size:10.5px}.faktorWahl{align-items:center;gap:8px;font-size:12px;display:flex}.faktorWahl>span{color:var(--gedimmt);flex:none}.faktorWahl select{border:1px solid var(--rand);min-width:0;color:var(--text);font:inherit;cursor:pointer;background:#ffffff12;border-radius:6px;flex:1;padding:5px 8px;font-size:12px}.faktorWahl select:focus{outline:1px solid var(--akzent)}.faktorErklaerung{color:var(--leise);margin-top:5px;font-size:10.5px}.zeitDatum .uhr.gemittelt{color:var(--leise)}.zeitDatum .uhr em{color:var(--akzent);cursor:help;margin-left:4px;font-style:normal}.mobil{--sicher-oben:env(safe-area-inset-top,0px);--sicher-unten:env(safe-area-inset-bottom,0px);--leiste-h:58px;pointer-events:none;font:13px/1.45 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;position:absolute;inset:0}.mobil>*{pointer-events:auto}.mStatus{top:calc(var(--sicher-oben) + 8px);border:1px solid var(--rand);-webkit-backdrop-filter:blur(18px)saturate(1.25);min-height:48px;color:var(--text);text-align:left;font:inherit;background:#0a0f159e;border-radius:15px;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:7px 13px;display:grid;position:absolute;left:8px;right:8px;box-shadow:0 6px 22px #0006}.mStatusZeit{flex-direction:column;line-height:1.15;display:flex}.mStatusZeit b{font-variant-numeric:tabular-nums;letter-spacing:.01em;font-size:14px}.mStatusZeit small{color:var(--gedimmt);font-variant-numeric:tabular-nums;font-size:11px}.mStatusMitte{color:var(--akzent);font-variant-numeric:tabular-nums;justify-content:center;align-items:center;gap:7px;font-size:12px;font-weight:600;display:flex}.mLaeuft{background:#58d68d;border-radius:50%;width:7px;height:7px;animation:1.9s ease-in-out infinite mPuls;box-shadow:0 0 9px #58d68d}@keyframes mPuls{0%,to{opacity:1}50%{opacity:.28}}@media (prefers-reduced-motion:reduce){.mLaeuft{animation:none}.mBlatt{transition:none!important}}.mStatusRechts{flex-direction:column;align-items:flex-end;line-height:1.1;display:flex}.mStatusRechts b{font-variant-numeric:tabular-nums;font-size:15px}.mStatusRechts small{color:var(--leise);text-transform:uppercase;letter-spacing:.05em;font-size:9.5px}.mSpielKnopf{right:16px;bottom:calc(var(--sicher-unten) + var(--leiste-h) + 18px);-webkit-backdrop-filter:blur(14px);width:62px;height:62px;color:var(--akzent);background:#142a3ed1;border:1px solid #5eb0ef73;border-radius:50%;font-size:21px;line-height:1;transition:transform .14s,background .14s;position:absolute;box-shadow:0 8px 26px #0000007a}.mSpielKnopf:active{transform:scale(.93)}.mSpielKnopf.laeuft{color:#58d68d;background:#163628d6;border-color:#58d68d80}.mBlatt{left:0;right:0;bottom:calc(var(--sicher-unten) + var(--leiste-h));border-top:1px solid var(--rand);-webkit-backdrop-filter:blur(24px)saturate(1.2);pointer-events:none;background:#0b1016ed;border-radius:20px 20px 0 0;flex-direction:column;max-height:66vh;transition:transform .26s cubic-bezier(.32,.72,0,1);display:flex;position:absolute;transform:translateY(102%);box-shadow:0 -10px 34px #00000080}.mBlatt.offen{pointer-events:auto;transform:translateY(0)}.mGriff{background:0 0;border:0;flex:none;place-items:center;width:100%;height:44px;padding:0;display:grid}.mGriff span{background:#94b2d266;border-radius:2px;width:42px;height:4px}.mBlattInhalt{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;flex-direction:column;flex:1;gap:15px;padding:2px 16px 20px;display:flex;overflow-y:auto}.mLeiste{height:calc(var(--leiste-h) + var(--sicher-unten));padding-bottom:var(--sicher-unten);border-top:1px solid var(--rand);-webkit-backdrop-filter:blur(22px);background:#090d12e6;grid-template-columns:repeat(5,1fr);display:grid;position:absolute;bottom:0;left:0;right:0}.mLeiste button{color:var(--leise);font:inherit;background:0 0;border:0;flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:0 2px;transition:color .12s;display:flex}.mLeiste button.aktiv{color:var(--akzent)}.mLeiste .mIcon{font-size:17px;line-height:1}.mLeiste .mLabel{letter-spacing:.02em;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:9.5px;overflow:hidden}.mZeitAnzeige{padding:4px 0 2px}.mDatum{font-variant-numeric:tabular-nums;font-size:19px;font-weight:600}.mUhr{color:var(--akzent);font-variant-numeric:tabular-nums;letter-spacing:.01em;font-size:27px;font-weight:300;line-height:1.15}.mBalken{background:#94b2d224;border-radius:3px;height:5px;margin:11px 0 6px;overflow:hidden}.mBalkenFuellung{background:linear-gradient(90deg, #3d7fb8, var(--akzent));border-radius:3px;height:100%;transition:width .2s linear}.mLauf{color:var(--gedimmt);font-variant-numeric:tabular-nums;font-size:11.5px}.mZeitKnoepfe{grid-template-columns:1fr auto auto;gap:8px;display:grid}.mZeitKnoepfe button,.mFaktoren button,.mAuswahl{border:1px solid var(--rand);min-height:46px;color:var(--text);font:inherit;white-space:nowrap;background:#94b2d212;border-radius:11px;padding:0 13px;font-size:12.5px}.mZeitKnoepfe button:disabled{opacity:.34}.mZeitKnoepfe button:active,.mFaktoren button:active{background:#94b2d229}.mHauptKnopf{font-weight:600;color:var(--akzent)!important;background:#1c3e5c99!important;border-color:#5eb0ef6b!important}.mGruppe{border:1px solid var(--rand);background:#94b2d209;border-radius:13px;flex-direction:column;gap:8px;padding:12px;display:flex}.mGruppeTitel{color:var(--gedimmt);text-transform:uppercase;letter-spacing:.07em;font-size:10px;font-weight:600}.mFaktoren{grid-template-columns:repeat(auto-fit,minmax(56px,1fr));gap:6px;display:grid}.mFaktoren.zwei{grid-template-columns:1fr 1fr}.mFaktoren button{font-variant-numeric:tabular-nums;padding:0 6px}.mFaktoren button.aktiv{color:var(--akzent);background:#1c3e5c9e;border-color:#5eb0ef80;font-weight:600}.mAuswahl{appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--gedimmt) 50%), linear-gradient(135deg, var(--gedimmt) 50%, transparent 50%);background-position:calc(100% - 17px),calc(100% - 12px);background-repeat:no-repeat;background-size:5px 5px,5px 5px;width:100%;padding-right:34px}.mReglerZeile{flex-direction:column;gap:7px;display:flex}.mReglerZeile.gesperrt{opacity:.42}.mReglerKopf{justify-content:space-between;align-items:baseline;gap:10px;font-size:12.5px;display:flex}.mReglerKopf b{color:var(--akzent);font-variant-numeric:tabular-nums;white-space:nowrap}.mReglerZeile input[type=range]{appearance:none;background:0 0;width:100%;height:28px;margin:0}.mReglerZeile input[type=range]::-webkit-slider-runnable-track{background:#94b2d22e;border-radius:3px;height:5px}.mReglerZeile input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--akzent);border:2px solid #0b1016e6;border-radius:50%;width:28px;height:28px;margin-top:-11.5px;box-shadow:0 2px 8px #00000073}.mReglerZeile input[type=range]::-moz-range-track{background:#94b2d22e;border-radius:3px;height:5px}.mReglerZeile input[type=range]::-moz-range-thumb{background:var(--akzent);border:2px solid #0b1016e6;border-radius:50%;width:26px;height:26px}.mSchalter{border:1px solid var(--rand);min-height:54px;color:var(--text);font:inherit;text-align:left;background:#94b2d209;border-radius:13px;justify-content:space-between;align-items:center;gap:12px;padding:10px 13px;display:flex}.mSchalter.aktiv{background:#1c3e5c66;border-color:#5eb0ef61}.mSchalterText{flex-direction:column;gap:2px;min-width:0;display:flex}.mSchalterText b{font-size:13px;font-weight:500}.mSchalterText small{color:var(--leise);font-size:10.5px;line-height:1.35}.mSchalterKnopf{background:#94b2d233;border-radius:13px;flex:none;width:44px;height:26px;transition:background .16s;position:relative}.mSchalterKnopf:after{content:"";background:#93a8bd;border-radius:50%;width:20px;height:20px;transition:transform .16s,background .16s;position:absolute;top:3px;left:3px}.mSchalter.aktiv .mSchalterKnopf{background:#5eb0ef6b}.mSchalter.aktiv .mSchalterKnopf:after{background:var(--akzent);transform:translate(18px)}.mKennzahlen{grid-template-columns:repeat(4,1fr);gap:7px;display:grid}.mKennzahlen>div{border:1px solid var(--rand);background:#94b2d209;border-radius:11px;flex-direction:column;align-items:center;gap:2px;padding:11px 4px;display:flex}.mKennzahlen b{font-variant-numeric:tabular-nums;font-size:17px}.mKennzahlen small{color:var(--leise);text-align:center;font-size:9px;line-height:1.25}.mEreignisListe{flex-direction:column;gap:1px;margin:0;padding:0;list-style:none;display:flex}.mEreignisListe li{border-bottom:1px solid #94b2d212;grid-template-columns:9px 1fr auto auto;align-items:center;gap:9px;padding:9px 2px;font-size:11.5px;display:grid}.mEreignisListe li:last-child{border-bottom:0}.mEreignisListe .punkt{border-radius:50%;width:9px;height:9px}.punkt.setzungsfliessen{background:#ff4720}.punkt.boeschungsbruch{background:#b83ddb}.punkt.ufererosion{background:#f2c72e}.mEreignisZone{letter-spacing:.03em;font-weight:600}.mEreignisTag,.mEreignisVol{color:var(--gedimmt);font-variant-numeric:tabular-nums}.quality{flex-direction:column;gap:12px;display:flex}.qualityStufen{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.qualityStufen button{border:1px solid var(--rand);min-height:54px;color:var(--text);font:inherit;background:#94b2d20d;border-radius:11px;flex-direction:column;align-items:center;gap:3px;padding:9px 3px;display:flex}.qualityStufen button.aktiv{color:var(--akzent);background:#1c3e5c9e;border-color:#5eb0ef80}.qualityStufen b{font-size:12px;font-weight:600}.qualityStufen small{color:var(--leise);font-variant-numeric:tabular-nums;font-size:9.5px}.qualityStufen button.aktiv small{color:#5eb0efbf}.qualityDetails{grid-template-columns:1fr 1fr;gap:7px;margin:0;display:grid}.qualityDetails>div{border:1px solid var(--rand);background:#94b2d208;border-radius:9px;padding:8px 10px}.qualityDetails dt{color:var(--leise);text-transform:uppercase;letter-spacing:.06em;font-size:9px}.qualityDetails dd{font-variant-numeric:tabular-nums;margin:2px 0 0;font-size:11.5px}.mobilAktiv .panel,.mobilAktiv .kopf,.mobilAktiv .zeitBalken{display:none}@media (orientation:landscape) and (height<=520px){.mobil{--leiste-h:48px}.mBlatt{max-height:82vh}.mLeiste .mLabel{display:none}.mLeiste .mIcon{font-size:19px}.mDatum{font-size:16px}.mUhr{font-size:21px}}.mFps{color:var(--gedimmt);font-variant-numeric:tabular-nums;background:#94b2d21f;border-radius:6px;padding:2px 6px;font-size:10px;font-weight:500}.mFps.knapp{color:#e8a06a;background:#e07a3c2e}
