/* wasser.uimaranta.com – Konzept «Pegellatte»: Messlatte, Wasserlinie, Pegeltafel.
   Farben von uimaranta.com. Keine Randlinien: Trennung über Flächen, Schatten, Abstand. */
:root{
  --teal:#00838f; --teal2:#0097a7; --teal3:#00acc1; --deep:#006064; --abyss:#00363d;
  --sky:#e6f5fe; --sky2:#4fc3f7; --foam:#f4fbff;
  --text:#37474f; --text2:#546e7a; --muted:#78909c; --white:#fff;
  --green:#2e7d32; --low:#e65100; --high:#c62828;
  --sh:0 6px 18px rgba(0,54,61,.08); --sh2:0 14px 40px rgba(0,54,61,.14);
  --r:18px; --gap:clamp(40px,7vw,72px);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--text);background:var(--foam);line-height:1.8;font-size:17px;overflow-x:hidden}
a{color:var(--teal);text-underline-offset:3px}
a:hover{color:var(--deep)}
img,svg{max-width:100%}
.num,.big,.tafel-v,.strip-v{font-variant-numeric:tabular-nums}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Kopf */
.kopf{background:var(--sky)}
.kopf-in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px 4px;max-width:1200px;margin:0 auto}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--abyss)}
.logo-crop{display:block;width:118px;height:50px;overflow:hidden}
.logo-crop img{display:block;width:118px;height:118px;margin-top:-19px}
.logo-tag{font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--teal);background:var(--white);padding:4px 10px;border-radius:99px;box-shadow:var(--sh)}
.kopf-such{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;text-decoration:none;color:var(--deep);background:var(--white);padding:8px 14px;border-radius:99px;box-shadow:var(--sh)}
.nav{max-width:1200px;margin:0 auto;display:flex;gap:6px;overflow-x:auto;padding:8px 16px 12px;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{flex:0 0 auto;font-size:14px;font-weight:700;color:var(--text);text-decoration:none;padding:6px 14px;border-radius:99px;background:rgba(255,255,255,.65)}
.nav a:hover,.nav a[aria-current]{background:var(--teal);color:var(--white)}

/* Brotkrumen */
.krumen{font-size:13px;color:var(--muted);padding:14px 0 0}
.krumen ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px 8px}
.krumen li+li::before{content:"›";margin-right:8px;color:var(--sky2)}
.krumen a{color:rgba(255,255,255,.85);text-decoration:none}
.krumen [aria-current]{color:rgba(255,255,255,.65)}

/* Held: Wasser in Tiefe, Zahl gross */
.held{position:relative;color:var(--white);background:radial-gradient(120% 90% at 85% 10%,#00acc1 0%,rgba(0,172,193,0) 55%),linear-gradient(165deg,var(--abyss) 0%,var(--deep) 38%,var(--teal) 100%);padding-bottom:70px;overflow:hidden}
.held-in{display:grid;grid-template-columns:1fr auto;gap:8px 14px;align-items:start;padding-top:18px}
.held h1{font-size:clamp(24px,6vw,40px);line-height:1.25;font-weight:800;letter-spacing:-.01em;margin:14px 0 6px;grid-column:1/-1}
.held .unter{grid-column:1/-1;font-size:15px;color:rgba(255,255,255,.82);margin-bottom:6px}
.wert{min-width:0}
.big{display:flex;align-items:baseline;gap:8px;font-weight:800;line-height:.95;letter-spacing:-.04em;font-size:clamp(72px,24vw,150px)}
.big .einheit{font-size:.28em;letter-spacing:0;font-weight:700;color:rgba(255,255,255,.8)}
.big.lang{font-size:clamp(46px,14vw,104px)}
.big.leer{font-size:clamp(26px,7vw,40px);letter-spacing:0;line-height:1.3}
.trend{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-weight:700;font-size:13.5px;line-height:1.5;background:rgba(255,255,255,.14);padding:6px 14px;border-radius:99px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;line-height:1.5;font-weight:700;padding:4px 11px;border-radius:99px;background:rgba(255,255,255,.16);color:var(--white)}
.chip.low{background:#ffb74d;color:#3e2000}
.chip.high{background:#ef5350;color:#fff}
.chip.ok{background:#a5d6a7;color:#103a12}
.chip.grau{background:rgba(255,255,255,.3)}
.stand{grid-column:1/-1;font-size:14px;color:rgba(255,255,255,.85);margin-top:14px;line-height:1.7}
.stand strong{color:var(--white)}
.latte{width:138px;height:259px;align-self:start;margin-top:0;margin-right:-8px}
.latte .welle{animation:wogen 6s ease-in-out infinite alternate}
@keyframes wogen{from{transform:translateX(-14px)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.latte .welle{animation:none}}
.welle-unten{position:absolute;left:0;right:0;bottom:-2px;width:100%;height:58px;display:block}
.stale-note{display:none}
.is-stale .stale-note{display:inline}
.is-stale .lv{opacity:.55}
.warn{display:block;margin-top:12px;font-size:14px;font-weight:700;color:#3e2000;background:#ffcc80;padding:8px 14px;border-radius:12px}

/* Messwerte-Leiste unter dem Held */
.leiste{position:relative;margin-top:-46px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.kachel{background:var(--white);border-radius:16px;box-shadow:var(--sh2);padding:14px 16px;line-height:1.5}
.kachel .k{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.kachel .v{font-size:23px;font-weight:800;color:var(--abyss);margin:4px 0 2px}
.kachel .v small{white-space:nowrap;font-size:13px;font-weight:700;color:var(--text2)}
.kachel .t{font-size:12.5px;color:var(--muted)}

/* Abschnitte */
main{display:block}
.abschnitt{margin-top:var(--gap)}
.kicker{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:6px}
h2{font-size:clamp(22px,5vw,30px);line-height:1.3;color:var(--abyss);font-weight:800;letter-spacing:-.01em;margin-bottom:14px}
h3{font-size:19px;line-height:1.4;color:var(--abyss);margin:26px 0 8px}
p{margin-bottom:16px;max-width:72ch}
.fliess p,.fliess li{max-width:72ch}
.fliess ul{margin:0 0 16px 20px}
.flaeche{background:var(--white);border-radius:var(--r);box-shadow:var(--sh);padding:22px 18px}
.hinweis{font-size:14.5px;color:var(--text2);background:var(--sky);border-radius:14px;padding:14px 16px;line-height:1.8}
.quelle{font-size:13.5px;color:var(--muted);margin-top:10px;line-height:1.7}

/* Diagramm */
.diagramm{background:var(--white);border-radius:var(--r);box-shadow:var(--sh);padding:16px 10px 8px;position:relative}
.diagramm svg{display:block;width:100%;max-width:780px;margin:0 auto;height:auto;touch-action:pan-y}
.diagramm .tip{font-size:11px;font-weight:700;paint-order:stroke;stroke:#fff;stroke-width:3px}
.dia-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;color:var(--text2);padding:4px 8px 6px}

/* Kennwerte */
.kenn{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:15px}
.kenn td,.kenn th{padding:10px 12px;text-align:left;vertical-align:top;line-height:1.6}
.kenn tr{background:var(--white);box-shadow:0 2px 8px rgba(0,54,61,.05)}
.kenn tr td:first-child,.kenn tr th:first-child{border-radius:12px 0 0 12px}
.kenn tr td:last-child{border-radius:0 12px 12px 0}
.kenn .w{font-weight:800;color:var(--abyss);white-space:nowrap;text-align:right}
.kenn .e{color:var(--text2);font-size:13.5px}
.kenn .jetzt{background:#fff3e0}

/* Pegeltafel (dunkle Anzeigetafel) */
.tafel{background:linear-gradient(170deg,#00363d,#004d55);border-radius:22px;box-shadow:var(--sh2);padding:8px;color:var(--white)}
.tafel a{color:inherit;text-decoration:none}
.tafel-z{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 14px;padding:12px 14px;border-radius:14px}
.tafel-z:nth-child(odd){background:rgba(255,255,255,.05)}
.tafel-z:hover{background:rgba(79,195,247,.16)}
.tafel-n{font-weight:800;font-size:17px;line-height:1.35}
.tafel-n small{display:block;font-weight:600;font-size:12.5px;color:rgba(255,255,255,.62)}
.tafel-v{font-size:clamp(26px,7vw,34px);font-weight:800;text-align:right;line-height:1;white-space:nowrap}
.tafel-v small{font-size:13px;font-weight:700;color:rgba(255,255,255,.7);margin-left:3px}
.tafel-t{grid-column:1/-1;font-size:12px;color:rgba(255,255,255,.6);line-height:1.5}
.punkt{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:1px;background:#80deea}
.punkt.low{background:#ffb74d}.punkt.high{background:#ef5350}.punkt.ok{background:#a5d6a7}.punkt.grau{background:#90a4ae}
.tafel .is-stale .tafel-v{opacity:.5}

/* Flusslauf (Hub) */
.strom{list-style:none;position:relative;padding:4px 0}
.strom::before{content:"";position:absolute;left:31px;top:20px;bottom:20px;width:12px;border-radius:12px;background:linear-gradient(180deg,#b3e5fc,#4fc3f7 60%,#0097a7)}
.strom li{position:relative;display:grid;grid-template-columns:74px 1fr auto;align-items:center;gap:4px 12px;padding:10px 12px 10px 0;margin:4px 0;border-radius:16px}
.strom li:nth-child(even){background:rgba(230,245,254,.7)}
.strom li.top{background:var(--white);box-shadow:var(--sh)}
.km{position:relative;z-index:1;justify-self:center;display:flex;align-items:center;justify-content:center;min-width:52px;height:30px;padding:0 8px;border-radius:99px;background:var(--white);box-shadow:0 2px 8px rgba(0,54,61,.15);font-size:12px;font-weight:800;color:var(--deep)}
.strip-n{font-weight:800;color:var(--abyss);line-height:1.4}
.strip-n a{color:var(--abyss)}
.strip-n small{display:block;font-weight:600;font-size:12.5px;color:var(--muted)}
.strip-v{text-align:right;font-weight:800;font-size:22px;color:var(--abyss);white-space:nowrap;line-height:1.2}
.strip-v small{font-size:12.5px;color:var(--text2);margin-left:2px}
.strip-v .z{display:block;font-size:11.5px;font-weight:600;color:var(--muted)}
.strom .is-stale .strip-v{color:var(--muted)}

/* Karte + Suche */
.karte-box{background:var(--white);border-radius:var(--r);box-shadow:var(--sh2);overflow:hidden}
#karte-map{height:min(68vh,560px);min-height:380px;background:var(--sky)}
.mk{display:inline-block;transform:translate(-50%,-50%);white-space:nowrap;font:800 11.5px/1 var(--font);padding:5px 7px;border-radius:99px;background:var(--teal);color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.mk.low{background:#ef6c00}.mk.high{background:#c62828}.mk.temp{background:#00acc1}.mk.alt{background:#90a4ae}
.marker-cluster-small,.marker-cluster-medium,.marker-cluster-large{background:rgba(0,131,143,.25)!important}
.marker-cluster-small div,.marker-cluster-medium div,.marker-cluster-large div{background:rgba(0,131,143,.85)!important;color:#fff!important;font-weight:800}
.leaflet-popup-content{font:14px/1.6 var(--font);color:var(--text);margin:12px 14px}
.leaflet-popup-content b{color:var(--abyss)}
.leaflet-popup-content .pv{font-size:22px;font-weight:800;color:var(--abyss)}
.karte-legende{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--text2);padding:12px 16px}
.such{display:flex;gap:8px;align-items:center;background:var(--white);border-radius:99px;box-shadow:var(--sh2);padding:6px 6px 6px 18px}
.such input{flex:1;min-width:0;width:100%;font:600 17px var(--font);color:var(--abyss);background:transparent;outline:none;padding:10px 0;border:0}
.such button{font:800 14px var(--font);background:var(--teal);color:#fff;border:0;border-radius:99px;padding:11px 18px;cursor:pointer}
.treffer{list-style:none;margin-top:10px}
.treffer li{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 14px;border-radius:12px}
.treffer li:nth-child(odd){background:var(--white)}
.treffer button{font:700 15px var(--font);color:var(--teal);background:none;border:0;cursor:pointer;text-align:left;padding:0}
.treffer .tv{font-weight:800;color:var(--abyss);white-space:nowrap}
.treffer small{color:var(--muted)}

/* Raster */
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.ziel{display:block;text-decoration:none;background:var(--white);border-radius:16px;box-shadow:var(--sh);padding:16px;color:var(--text);line-height:1.6}
.ziel:hover{box-shadow:var(--sh2)}
.ziel b{display:block;color:var(--abyss);font-size:17px}
.ziel span{font-size:14px;color:var(--text2)}

/* Bäder Zürich */
.baeder{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.bad{background:var(--white);border-radius:16px;box-shadow:var(--sh);padding:14px 16px;line-height:1.55}
.bad .bn{font-weight:800;color:var(--abyss)}
.bad .bt{font-size:12.5px;color:var(--muted)}
.bad .bv{font-size:30px;font-weight:800;color:var(--abyss);margin:6px 0 2px}
.bad.alt .bv{color:var(--muted)}
.bad .bs{font-size:12.5px;color:var(--text2)}

/* Fuss */
.fuss{margin-top:var(--gap);background:linear-gradient(170deg,var(--deep),var(--abyss));color:rgba(255,255,255,.82);padding:44px 0 30px;font-size:14.5px}
.fuss a{color:#fff;text-decoration:none}
.fuss a:hover{text-decoration:underline}
.fuss-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:26px}
.fuss h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sky2);margin-bottom:8px}
.fuss ul{list-style:none;line-height:2}
.fuss-unten{margin-top:30px;font-size:12.5px;color:rgba(255,255,255,.6);line-height:1.8}

/* Suche (Combobox) */
.suche-box{position:relative}
.such svg{flex:0 0 auto;color:var(--teal)}
.such input::-webkit-search-cancel-button{cursor:pointer}
.vorschlag{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:1200;list-style:none;background:var(--white);border-radius:18px;box-shadow:0 18px 50px rgba(0,54,61,.28);padding:6px;max-height:min(60vh,430px);overflow:auto}
.vorschlag li{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;cursor:pointer;line-height:1.45;color:var(--text)}
.vorschlag li[aria-selected="true"]{background:var(--sky)}
.vorschlag li.leer{cursor:default;color:var(--muted)}
.sv-n b{display:block;color:var(--abyss);font-size:15.5px}
.sv-n small{color:var(--muted);font-size:12.5px}
.sv-v{font-weight:800;color:var(--abyss);white-space:nowrap;font-variant-numeric:tabular-nums}
.suche-box.kompakt .such{box-shadow:var(--sh);padding:4px 4px 4px 14px}
.suche-box.kompakt input{font-size:16px;padding:8px 0}
.suche-box.kompakt button{padding:9px 14px}
.such-zeile{margin-top:28px}

/* Startseite */
.start-held{padding-bottom:84px}
.start-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;padding-top:24px}
.start-grid>*{min-width:0}
.drei>*,.fkarten>*,.wissen>*{min-width:0}
.start-kopf h1{font-size:clamp(28px,7.4vw,50px);line-height:1.18;font-weight:800;letter-spacing:-.015em;margin-bottom:10px}
.start-kopf .lead{font-size:16.5px;color:rgba(255,255,255,.88);max-width:56ch;margin:0 0 18px;line-height:1.8}
.start-kopf .such{box-shadow:0 14px 40px rgba(0,0,0,.25)}
.schnell{font-size:14px;color:rgba(255,255,255,.82);margin-top:16px;line-height:2}
.schnell a{color:#fff;text-decoration-color:rgba(255,255,255,.4)}
.held .tafel{box-shadow:0 18px 50px rgba(0,0,0,.28)}
.quelle.hell{color:rgba(255,255,255,.72)}
.mini{font-size:13.5px;color:var(--muted);margin:-4px 0 10px}
.drei{display:grid;gap:22px}
.drei h3{margin-top:0}
.tafel.spalten{display:grid;grid-template-columns:1fr;gap:2px}
.karte-voll .karte-box{margin:0 16px}
.fkarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.fkarte{display:flex;flex-direction:column;text-decoration:none;color:var(--text);background:var(--white);border-radius:20px;box-shadow:var(--sh);padding:18px 18px 14px;line-height:1.55;transition:box-shadow .2s,transform .2s}
.fkarte:hover{box-shadow:var(--sh2);transform:translateY(-2px);color:var(--text)}
.fkarte .fn{font-weight:800;color:var(--abyss);font-size:18px}
.fkarte .fs{font-size:13px;color:var(--text2)}
.fkarte .fv{font-size:42px;font-weight:800;color:var(--abyss);line-height:1.1;margin:10px 0 4px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.fkarte .fv small{font-size:15px;color:var(--text2);letter-spacing:0}
.fkarte svg{display:block;width:100%;height:46px;margin:4px 0 6px}
.fkarte .fm{font-size:12.5px;color:var(--muted);margin-top:auto}
.fkarte.temp{background:linear-gradient(165deg,#fff 50%,#e0f7fa 100%)}
.fkarte.is-stale .fv{color:var(--muted)}
.wissen{display:grid;gap:16px}
.wissen h3{margin-top:0}
.fragen{display:grid;gap:10px}
.frage{background:var(--white);border-radius:16px;box-shadow:var(--sh);padding:4px 18px}
.frage summary{cursor:pointer;font-weight:800;color:var(--abyss);padding:12px 0;line-height:1.6;list-style-position:outside}
.frage p{margin:0 0 14px;color:var(--text)}
.ziel.bade b::after{content:" ↗";color:var(--teal3)}
.bad .bl{display:inline-block;margin-top:6px;font-size:13px;font-weight:700}

@media (min-width:760px){
  .drei{grid-template-columns:1fr 1fr}
  .tafel.spalten{grid-template-columns:1fr 1fr}
  .wissen{grid-template-columns:1fr 1fr}
  body{font-size:17.5px}
  .latte{width:150px;height:340px;align-self:center}
  .held-in{align-items:center}
  .diagramm svg text,.diagramm svg .tip{font-size:7px}
  .held-in{padding-top:26px}
  .flaeche{padding:28px 30px}
  .tafel{padding:12px}
  .tafel-z{grid-template-columns:1fr auto;padding:14px 20px}
  .strom li{grid-template-columns:96px 1fr auto}
  .strom::before{left:42px}
}

@media (min-width:1024px){
  .start-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start;gap:44px;padding-top:44px}
  .start-held{padding-bottom:96px}
  .drei{grid-template-columns:repeat(3,1fr)}
  .tafel.spalten{grid-template-columns:repeat(3,1fr)}
  .karte-voll .karte-box{margin:0 24px;border-radius:24px}
  .karte-voll #karte-map{height:min(76vh,720px)}
  .fragen{grid-template-columns:1fr 1fr;align-items:start}
}

/* Sprungziele aus der Suche */
.strom li,.tafel-z,.bad{scroll-margin-top:90px}
.strom li:target,.bad:target{box-shadow:0 0 0 3px #4fc3f7,var(--sh2);background:var(--white)}
.tafel-z:target{box-shadow:0 0 0 3px #4fc3f7}

.leaflet-bar{border:0!important;box-shadow:var(--sh2)!important}
iframe{border:0}

/* ═══════════ Runde 3: bewegtes Wasser, Tank, Thermometer, Karten, Diagramme ═══════════ */
.held{position:relative;isolation:isolate}
.see{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.see .glanz{position:absolute;top:-30%;left:-50%;width:45%;height:160%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.07) 42%,rgba(255,255,255,.16) 50%,rgba(255,255,255,.07) 58%,rgba(255,255,255,0));animation:glanz 13s ease-in-out infinite;will-change:transform}
@keyframes glanz{0%{transform:translateX(0) rotate(14deg)}55%,100%{transform:translateX(420%) rotate(14deg)}}
.see .licht{position:absolute;inset:0;background:radial-gradient(60% 40% at 20% 0%,rgba(178,235,242,.22),rgba(178,235,242,0) 70%),radial-gradient(50% 35% at 90% 20%,rgba(79,195,247,.22),rgba(79,195,247,0) 70%)}
.blase{position:absolute;bottom:40px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;opacity:0;background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.95),rgba(255,255,255,.35) 38%,rgba(255,255,255,.06) 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);animation:blase var(--d) linear var(--t) infinite;will-change:transform,opacity}
@keyframes blase{0%{transform:translate3d(0,0,0);opacity:0}12%{opacity:.85}50%{transform:translate3d(12px,-38vh,0)}90%{opacity:.5}100%{transform:translate3d(-8px,-80vh,0);opacity:0}}
.welle{position:absolute;left:0;bottom:-2px;width:200%;background-repeat:repeat-x;background-size:50% 100%;animation:welle var(--d) linear infinite;will-change:transform}
.welle.w1{height:110px;--d:19s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,46 Q180,18 360,46 T720,46 T1080,46 T1440,46 V100 H0 Z' fill='rgba%28255,255,255,0.07%29'/%3E%3C/svg%3E");opacity:1}
.welle.w2{height:84px;--d:13s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,52 Q120,32 240,52 T480,52 T720,52 T960,52 T1200,52 T1440,52 V100 H0 Z' fill='rgba%2879,195,247,0.20%29'/%3E%3C/svg%3E");animation-direction:reverse}
.welle.w3{height:62px;--d:24s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,58 Q180,42 360,58 T720,58 T1080,58 T1440,58 V100 H0 Z' fill='%23f4fbff'/%3E%3C/svg%3E")}
@keyframes welle{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.held.ruhe .see *,.held.ruhe .latte *{animation-play-state:paused!important}
.held .wrap{position:relative;z-index:1}
.welle-unten{display:none}

/* Tank / Thermometer */
.latte{filter:drop-shadow(0 18px 30px rgba(0,30,35,.35))}
.anstieg{animation:anstieg 2.2s cubic-bezier(.2,.9,.25,1) .25s both}
@keyframes anstieg{from{transform:translateY(var(--hub))}to{transform:translateY(0)}}
.wogen1{animation:wogen 5s ease-in-out infinite alternate}
.wogen2{animation:wogen 3.6s ease-in-out infinite alternate-reverse}
@keyframes wogen{from{transform:translateX(-18px)}to{transform:translateX(0)}}
.tblase{animation:tblase 4.5s ease-in infinite;opacity:0}
@keyframes tblase{0%{transform:translateY(0);opacity:0}15%{opacity:.8}100%{transform:translateY(-120px);opacity:0}}
.wert .big{animation:auftauchen .9s ease-out both}
@keyframes auftauchen{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .see .blase,.see .glanz{display:none}
  .welle,.anstieg,.wogen1,.wogen2,.tblase,.wert .big{animation:none!important}
}

/* Kacheln mit Icons */
.kachel{position:relative}
.kachel .ic,.ikon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:12px;background:var(--sky);color:var(--teal);flex:0 0 auto}
.kachel .ic svg,.ikon svg{width:20px;height:20px}
.kachel .kz{display:flex;align-items:center;gap:10px;margin-bottom:4px}

/* Diagramm mit Zeitraum */
.dia{background:var(--white);border-radius:22px;box-shadow:var(--sh2);padding:14px 12px 10px;margin:0}
.dia-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:2px 4px 10px}
.bereich{display:inline-flex;background:var(--sky);border-radius:99px;padding:4px;gap:2px}
.bereich button{font:700 13.5px var(--font);color:var(--deep);background:transparent;border:0;border-radius:99px;padding:7px 14px;cursor:pointer;min-height:36px}
.bereich button[aria-pressed="true"]{background:var(--teal);color:#fff;box-shadow:0 4px 12px rgba(0,131,143,.35)}
.dia-info{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--text2)}
.dia-info b{color:var(--abyss)}
.dia-flaeche{position:relative;min-height:240px}
.dia-flaeche svg{display:block;width:100%;height:auto;touch-action:pan-y}
.dia-flaeche .lade{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px}
.dia figcaption{font-size:12.5px;color:var(--muted);padding:6px 4px 0;line-height:1.7}

/* Kennwert-Skala */
.skala{background:var(--white);border-radius:22px;box-shadow:var(--sh);padding:100px 22px 64px}
.skala-bahn{position:relative;height:16px;border-radius:99px;background:linear-gradient(90deg,#ffcc80 0 var(--a),#80deea var(--a) var(--b),#ef9a9a var(--b) 100%)}
.skala-m{position:absolute;top:50%;transform:translate(-50%,-50%);width:4px;height:26px;border-radius:4px;background:#00363d}
.skala-l{position:absolute;transform:translateX(-50%);font-size:12px;font-weight:800;color:var(--abyss);white-space:nowrap;line-height:1.3;text-align:center}
.skala-l small{display:block;font-weight:600;color:var(--muted)}
.skala-l.oben{bottom:30px}.skala-l.unten{top:30px}
.skala-jetzt{position:absolute;top:50%;width:26px;height:26px;border-radius:50%;transform:translate(-50%,-50%);background:#fff;box-shadow:0 0 0 6px rgba(0,131,143,.85),0 6px 16px rgba(0,0,0,.25)}
.skala-jetzt span{position:absolute;bottom:70px;left:50%;transform:translateX(-50%);background:var(--abyss);color:#fff;font-weight:800;font-size:13px;padding:4px 10px;border-radius:99px;white-space:nowrap}

/* Mehr erfahren */
.mehr{background:var(--white);border-radius:20px;box-shadow:var(--sh);padding:4px 20px}
.mehr+.mehr{margin-top:12px}
.mehr>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:800;color:var(--abyss);padding:16px 0;line-height:1.5}
.mehr>summary::-webkit-details-marker{display:none}
.mehr>summary::after{content:"+";flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--sky);color:var(--teal);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700}
.mehr[open]>summary::after{content:"–"}
.mehr>div{padding:0 0 18px}

/* Minikarten */
.minikarte{background:var(--white);border-radius:22px;box-shadow:var(--sh2);overflow:hidden}
.minikarte .mk-map{height:min(56vh,440px);min-height:300px;background:var(--sky)}
.minikarte .karte-legende{padding:10px 16px}
.mk.haupt{font-size:14px;padding:7px 11px;box-shadow:0 0 0 4px rgba(255,255,255,.95),0 6px 14px rgba(0,0,0,.35);z-index:1000}
.leaflet-marker-icon:has(.haupt){z-index:1000!important}

/* Startseite Runde 3 */
.start-held .start-grid{padding-bottom:20px}
.live-kacheln{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.lk{position:relative;display:block;text-decoration:none;color:#fff;border-radius:20px;padding:14px 14px 12px;background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05));box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 12px 30px rgba(0,30,35,.25);overflow:hidden;line-height:1.4;backdrop-filter:blur(6px)}
.lk:hover{color:#fff;background:linear-gradient(160deg,rgba(255,255,255,.24),rgba(255,255,255,.08))}
.lk .lk-n{font-weight:800;font-size:14px}
.lk .lk-s{font-size:11.5px;color:rgba(255,255,255,.7)}
.lk .lk-v{font-size:34px;font-weight:800;letter-spacing:-.03em;margin-top:6px;font-variant-numeric:tabular-nums;line-height:1.05}
.lk .lk-v small{font-size:13px;font-weight:700;color:rgba(255,255,255,.75);letter-spacing:0;margin-left:3px}
.lk .lk-t{font-size:11px;color:rgba(255,255,255,.62);margin-top:4px}
.lk .lk-bar{position:absolute;left:0;bottom:0;height:5px;width:var(--p);background:linear-gradient(90deg,#b2ebf2,#4fc3f7);border-radius:0 99px 99px 0}
.lk.temp .lk-bar{background:linear-gradient(90deg,#4fc3f7,#ffb74d,#ef5350)}
.karte-start{margin-top:-40px;position:relative;z-index:2}
.karte-start .karte-box{border-radius:24px}
.karte-start #karte-map{height:min(72vh,680px);min-height:440px}
.filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:12px 14px;background:var(--white)}
.filter .bereich button{font-size:13.5px}
.legende-temp{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text2)}
.legende-temp i{display:block;width:120px;height:10px;border-radius:99px;background:linear-gradient(90deg,#4fc3f7,#00acc1,#26a69a,#ffb300,#ef6c00,#c62828)}
.ic-kopf{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ic-kopf h2{margin:0}
.fkarte .fk-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px}
.chip-s{display:inline-block;font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:99px;background:var(--sky);color:var(--deep)}
.chip-s.low{background:#fff3e0;color:#bf360c}.chip-s.high{background:#ffebee;color:#b71c1c}.chip-s.ok{background:#e8f5e9;color:#1b5e20}
.tbar{height:8px;border-radius:99px;background:#e1f2fb;margin:8px 0 6px;overflow:hidden}
.tbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#4fc3f7,#ffb74d 70%,#ef5350);width:var(--p)}
.bade-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.bk{display:flex;align-items:center;gap:12px;text-decoration:none;background:var(--white);border-radius:18px;box-shadow:var(--sh);padding:14px;color:var(--abyss);font-weight:800;line-height:1.4}
.bk small{display:block;font-weight:600;color:var(--muted);font-size:12px}
.bk:hover{box-shadow:var(--sh2);color:var(--abyss)}
.zwei{display:grid;gap:22px}
@media (min-width:760px){
  .live-kacheln{grid-template-columns:repeat(4,1fr)}
  .zwei{grid-template-columns:1fr 1fr}
}
@media (min-width:1024px){
  .start-held .start-grid{grid-template-columns:minmax(0,1fr);padding-top:40px}
  .start-kopf{max-width:860px}
  .karte-start #karte-map{height:min(78vh,760px)}
  .skala{padding:64px 40px}
}

.skala-jetzt.links span{left:-10px;transform:none}
.skala-jetzt.rechts span{left:auto;right:-10px;transform:none}

/* Karten kompakt auf dem Handy: zwei Spalten */
@media (max-width:759px){
  .fkarten{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .fkarte{padding:14px 12px 12px;border-radius:18px}
  .fkarte .fn{font-size:15px;line-height:1.35}
  .fkarte .fs{font-size:11.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .fkarte .fv{font-size:clamp(26px,8vw,34px);margin:6px 0 2px}
  .fkarte .fv small{font-size:12px}
  .fkarte svg{height:34px}
  .fkarte .fm{font-size:11px}
  .fkarte .ikon{width:30px;height:30px;border-radius:10px}
  .fkarte .chip-s{font-size:10px;padding:2px 7px}
  .bade-karten{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .bk{padding:12px;font-size:14px;gap:10px}
  .bk .ikon{width:30px;height:30px}
}

.start-tank{display:none}
@media (min-width:1024px){
  .start-held .start-grid{grid-template-columns:minmax(0,1fr) 300px;align-items:center}
  .start-tank{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:#fff}
  .start-tank .latte{width:240px;height:450px;margin:0}
  .start-tank span{font-size:14px;font-weight:700;color:rgba(255,255,255,.8);text-align:center;line-height:1.4}
  .start-tank b{display:block;font-size:30px;color:#fff;font-variant-numeric:tabular-nums}
}
@keyframes auftauchen{from{opacity:.3;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (min-width:1024px){
  .held-in{grid-template-columns:minmax(0,1fr) 270px;gap:8px 40px}
  .held-in .latte{width:250px;height:470px;grid-column:2;grid-row:1 / span 4;align-self:center}
  .held-in>h1,.held-in>.unter,.held-in>.stand,.held-in>.wert{grid-column:1}
  .held h1{font-size:46px}
  .big{font-size:170px}
  .big.lang{font-size:120px}
}

/* Runde 4: kein Lichtstrahl mehr; Canvas-Meer; Tankwellen nach Seegang */
.see .glanz{display:none}
.welle.w1,.welle.w2{display:none}
.welle.w3{animation:none}
.meer{position:absolute;left:0;bottom:-1px;width:100%;height:calc(130px + var(--i) * 150px);display:block}
.tw{animation:tw var(--d) linear infinite}
@keyframes tw{to{transform:translateX(var(--l))}}
.held{padding-bottom:calc(56px + var(--i, .25) * 180px)}
@media (prefers-reduced-motion:reduce){.tw{animation:none!important}}
.held.ruhe .tw{animation-play-state:paused}

/* Diagramm Runde 4 */
.dia .puls{transform-box:fill-box;transform-origin:center;animation:puls 1.8s ease-out infinite}
@keyframes puls{from{transform:scale(1);opacity:.65}to{transform:scale(3.2);opacity:0}}
.dia-area{animation:flaeche .8s ease-out both}
@keyframes flaeche{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.dia .puls,.dia-area{animation:none}}

.strip-v .z{white-space:normal;max-width:150px;margin-left:auto}
.strom li{grid-template-columns:74px minmax(0,1fr) auto}
@media (min-width:760px){.strom li{grid-template-columns:96px minmax(0,1fr) auto}}

.bade-karten>*,.fkarten>*{min-width:0}
.bk>span{min-width:0;overflow-wrap:anywhere;hyphens:auto}
.fkarte .fn{overflow-wrap:anywhere;hyphens:auto}