/* Alptechflow Wetter — Gestaltung nach Brand Guide V1.0
   Void Black als Fläche, Toxic Lime als knapper Akzent, Montserrat für
   Überschriften in Grossbuchstaben, Inter für alles andere.
   Leitsatz aus dem Guide: Wirkung durch Präzision und Weissraum. */

@font-face{font-family:Montserrat;src:url(../fonts/montserrat-800.woff2) format('woff2');
  font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url(../fonts/montserrat-600.woff2) format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-400.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-500.woff2) format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-600.woff2) format('woff2');
  font-weight:600;font-style:normal;font-display:swap}

:root{
  /* Markenfarben */
  --void:#0D0D0F;
  --lime:#7CE404;          /* Toxic Lime — nur auf dunklem Grund */
  --lime-dim:rgba(124,228,4,.13);
  --grey:#9a9aa0;          /* Alpine Grey */
  --white:#ffffff;

  /* Abgeleitete Flächen */
  --bg:var(--void);
  --bg-tief:#08080a;
  --flaeche:rgba(255,255,255,.032);
  --flaeche2:rgba(255,255,255,.06);
  --linie:rgba(255,255,255,.065);
  --linie2:rgba(255,255,255,.13);
  --txt:#f2f2f4;
  --txt2:var(--grey);
  --txt3:#63636b;

  /* Datenfarben — bewusst nicht die Markenfarben, damit Lime Akzent bleibt */
  --wasser:#3d8fd6;
  --warm:#e8a33c;
  --heiss:#e2603a;
  --kalt:#5aa9e6;
  --violett:#8f7ae0;
  --rot:#e0483f;

  --r:22px;
  --r-klein:14px;
  --tab-h:calc(58px + env(safe-area-inset-bottom));
  --top-h:calc(54px + env(safe-area-inset-top));
  --ease:cubic-bezier(.32,.72,0,1);
  --luft:14px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overscroll-behavior:none}
body{
  background:var(--bg); color:var(--txt);
  font:400 16px/1.5 Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums; touch-action:manipulation;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3{margin:0}
/* Überschriften: Montserrat ExtraBold, immer Grossbuchstaben, mit Sperrung */
.eyebrow,h2.eyebrow,.card-h h2{
  font-family:Montserrat,system-ui,sans-serif;font-weight:800;text-transform:uppercase;
  font-size:11.5px;letter-spacing:.15em;color:var(--txt2)}
.ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- Startbild ---------- */
.boot{position:fixed;inset:0;z-index:200;background:var(--void);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transition:opacity .5s var(--ease)}
.boot.gone{opacity:0;pointer-events:none}
.boot-mark img{width:64px;height:64px}
.boot-name{font-family:Montserrat,system-ui,sans-serif;font-weight:800;letter-spacing:.26em;
  font-size:11px;color:var(--txt3);text-transform:uppercase}
.boot-name span{color:var(--lime)}
.boot-bar{width:120px;height:2px;background:rgba(255,255,255,.07);overflow:hidden;border-radius:2px}
.boot-bar i{display:block;height:100%;width:32%;background:var(--lime);animation:sl 1.2s var(--ease) infinite}
@keyframes sl{0%{transform:translateX(-110%)}100%{transform:translateX(330%)}}
.boot-msg{font-size:12px;color:var(--txt3);min-height:18px;letter-spacing:.01em}

/* ---------- Kopfleiste ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--top-h);
  padding:env(safe-area-inset-top) 14px 0 14px;display:flex;align-items:center;gap:8px;
  background:linear-gradient(180deg,rgba(13,13,15,.94),rgba(13,13,15,.72) 68%,transparent);
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%)}
.topbar .spacer{flex:1}
.place{display:flex;align-items:center;gap:7px;padding:9px 14px 9px 11px;border-radius:999px;
  background:var(--flaeche);border:1px solid var(--linie);font-weight:500;font-size:15px;max-width:58vw}
.place span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.place .chev{width:15px;height:15px;color:var(--txt3)}
.place:active{background:var(--flaeche2)}
.iconbtn{width:40px;height:40px;display:grid;place-items:center;border-radius:999px;
  background:var(--flaeche);border:1px solid var(--linie);color:var(--txt2);transition:.15s var(--ease)}
.iconbtn:active{background:var(--flaeche2);transform:scale(.94)}
.iconbtn.round{font-weight:600;font-size:16px;font-family:Inter}
.iconbtn.on{background:var(--lime-dim);border-color:rgba(124,228,4,.4);color:var(--lime)}

/* ---------- Grundraster ---------- */
#main{position:fixed;inset:0}
.view{position:absolute;inset:0;display:none}
.view.is-on{display:block}
.scroll{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:calc(var(--top-h) + 6px) 14px calc(var(--tab-h) + 30px)}
@media (min-width:820px){
  .scroll{padding-left:max(20px,calc((100% - 940px)/2));padding-right:max(20px,calc((100% - 940px)/2))}
}
.card{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);
  padding:20px;margin-bottom:var(--luft)}
.card-h{display:flex;align-items:center;gap:12px;margin-bottom:16px;min-height:16px}
.src{margin-left:auto;font-size:10.5px;color:var(--txt3);letter-spacing:.04em;text-align:right;
  text-transform:uppercase;font-weight:500}
.hint{margin:0 0 14px;font-size:13.5px;color:var(--txt2);line-height:1.6}
.foot{font-size:11px;color:var(--txt3);line-height:1.75;padding:2px 6px 10px;letter-spacing:.005em}
.foot a{color:var(--txt2)}
.skel{height:72px;border-radius:var(--r-klein);
  background:linear-gradient(90deg,rgba(255,255,255,.025),rgba(255,255,255,.065),rgba(255,255,255,.025));
  background-size:220% 100%;animation:sh 1.4s linear infinite}
@keyframes sh{to{background-position:-220% 0}}

/* ---------- Ortsleiste ---------- */
.orte{display:flex;gap:8px;overflow-x:auto;padding:2px 0 14px;-webkit-overflow-scrolling:touch}
.orte::-webkit-scrollbar{height:0}
.ort{flex:none;display:flex;flex-direction:column;gap:3px;padding:10px 15px;border-radius:var(--r-klein);
  background:var(--flaeche);border:1px solid var(--linie);min-width:96px;transition:.16s var(--ease)}
.ort b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.ort span{font-size:17px;font-weight:400;color:var(--txt2);letter-spacing:-.02em}
.ort.on{background:var(--lime-dim);border-color:rgba(124,228,4,.38)}
.ort.on b{color:var(--lime)} .ort.on span{color:var(--txt)}
.ort.plus{align-items:center;justify-content:center;min-width:52px;color:var(--txt3);font-size:22px;font-weight:300}

/* ---------- Jetzt ---------- */
.now{padding:26px 22px 22px}
.now-main{display:flex;align-items:center;gap:6px}
.now-ico{width:82px;height:82px;flex:none;margin-left:-8px}
.now-ico svg{width:100%;height:100%}
.now-temp{font-size:78px;font-weight:200;letter-spacing:-.055em;line-height:.86;display:flex;
  align-items:flex-start;margin-left:auto}
.now-temp i{font-size:28px;font-style:normal;font-weight:300;color:var(--txt3);margin-top:6px}
.now-txt{margin-top:18px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.now-desc{font-weight:600;font-size:17px;letter-spacing:-.01em}
.now-feel{font-size:13.5px;color:var(--txt2)}
.now-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:1px;margin-top:22px;
  background:var(--linie);border:1px solid var(--linie);border-radius:var(--r-klein);overflow:hidden}
.nv{background:var(--bg);padding:12px 13px}
.nv b{display:block;font-size:17px;font-weight:500;letter-spacing:-.015em;white-space:nowrap}
.nv b u{text-decoration:none;font-size:10.5px;color:var(--txt3);font-weight:400;margin-left:2px}
.nv small{display:block;font-family:Montserrat,system-ui,sans-serif;font-weight:600;font-size:9px;
  color:var(--txt3);text-transform:uppercase;letter-spacing:.13em;margin-bottom:5px}

/* ---------- Stundenband ---------- */
.h24-scroll{display:flex;gap:1px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:var(--linie);border:1px solid var(--linie);border-radius:var(--r-klein);overflow-y:hidden}
.h24-scroll::-webkit-scrollbar{height:0}
.hr{flex:none;width:68px;background:var(--bg);padding:12px 6px 11px;text-align:center}
.hr.now{background:rgba(124,228,4,.07)}
.hr.now .t{color:var(--lime)}
.hr .t{font-size:11px;color:var(--txt3);font-weight:500;letter-spacing:.03em}
.hr .i{width:32px;height:32px;margin:7px auto 5px}
.hr .i svg{width:100%;height:100%}
.hr .d{font-size:17px;font-weight:400;letter-spacing:-.02em}
.hr .p{font-size:10px;color:var(--wasser);min-height:14px;font-weight:500;margin-top:2px}
.hr .w{font-size:10px;color:var(--txt3);margin-top:1px}

/* ---------- Meteogramm ---------- */
.mg-wrap{position:relative;margin-top:18px;touch-action:pan-y}
#meteogramm{width:100%;display:block}
.mg-lupe{position:absolute;top:0;left:0;pointer-events:none;background:rgba(13,13,15,.94);
  border:1px solid var(--linie2);border-radius:12px;padding:9px 12px;font-size:11.5px;line-height:1.65;
  white-space:nowrap;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 8px 30px rgba(0,0,0,.7);z-index:5}
.mg-lupe b{font-family:Montserrat;font-weight:800;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt3);display:block;margin-bottom:4px}
.mg-lupe i{font-style:normal;color:var(--txt3);display:inline-block;width:82px}
.legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;font-size:11px;color:var(--txt2);
  letter-spacing:.01em}
.legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:0}
.mg-tabs{display:flex;gap:7px;margin-top:14px;flex-wrap:wrap}

/* ---------- Woche ---------- */
.week{display:flex;flex-direction:column}
.wd{display:grid;grid-template-columns:56px 34px 1fr 92px;gap:12px;align-items:center;
  padding:13px 2px;border-top:1px solid var(--linie)}
.wd:first-child{border-top:0;padding-top:2px}
.wd .n{font-weight:600;font-size:14px}
.wd .n small{display:block;font-weight:400;font-size:10.5px;color:var(--txt3);margin-top:1px}
.wd .i svg{width:30px;height:30px;display:block}
.wd .bar{position:relative;height:4px;border-radius:4px;background:rgba(255,255,255,.07)}
.wd .bar i{position:absolute;top:0;bottom:0;border-radius:4px;
  background:linear-gradient(90deg,#3d8fd6,#5aa9e6 30%,#e8a33c 72%,#e2603a)}
.wd .tt{display:flex;justify-content:space-between;font-size:14.5px;font-weight:500}
.wd .tt em{font-style:normal;color:var(--txt3);font-weight:400}
.wd .pr{grid-column:3/5;font-size:10.5px;color:var(--wasser);margin-top:-6px;letter-spacing:.01em}

.sun{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:1px;
  background:var(--linie);border:1px solid var(--linie);border-radius:var(--r-klein);overflow:hidden}
.sunv{background:var(--bg);padding:13px 14px}
.sunv small{display:block;font-family:Montserrat;font-weight:600;font-size:9px;color:var(--txt3);
  text-transform:uppercase;letter-spacing:.13em;margin-bottom:5px}
.sunv b{font-size:17px;font-weight:500}
.sunv em{display:block;font-style:normal;font-size:10.5px;color:var(--txt3);margin-top:3px}

.models{display:flex;flex-direction:column}
.mrow{display:flex;align-items:center;gap:11px;font-size:13.5px;padding:12px 2px;
  border-top:1px solid var(--linie)}
.mrow:first-child{border-top:0}
.mrow b{margin-left:auto;font-size:15px;font-weight:500}
.mrow .dot{width:6px;height:6px;border-radius:99px;flex:none}
.mrow small{color:var(--txt3);font-size:10.5px;display:block;margin-top:1px}

/* ---------- Windlage ---------- */
.lage{display:flex;align-items:center;gap:16px}
.lage-pfeil{width:62px;height:62px;flex:none;line-height:0}
.lage-pfeil svg{width:62px;height:62px;display:block}
.lage-txt b{display:block;font-family:Montserrat;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;font-size:17px}
.lage-txt span{font-size:13px;color:var(--txt2);display:block;margin-top:3px;line-height:1.5}
.dp{margin-top:16px;padding-top:16px;border-top:1px solid var(--linie)}
.dp-bar{height:5px;border-radius:5px;background:rgba(255,255,255,.07);position:relative;margin:11px 0 7px}
.dp-bar i{position:absolute;top:-3px;width:11px;height:11px;border-radius:99px;background:var(--lime);
  box-shadow:0 0 0 3px var(--void)}
.dp-bar u{position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(255,255,255,.2)}
.dp-marks{display:flex;justify-content:space-between;font-size:10px;color:var(--txt3)}

/* ---------- Karte ---------- */
#map{position:absolute;inset:0;background:#05060a}
.maplibregl-ctrl-attrib{font-size:9.5px !important;background:rgba(0,0,0,.42) !important;
  border-radius:8px 0 0 0 !important}
.maplibregl-ctrl-attrib a{color:#7a7a82 !important}
.maplibregl-ctrl-bottom-right{bottom:calc(var(--tab-h) + 128px) !important}
.maptop{position:absolute;top:var(--top-h);left:0;right:0;z-index:20;padding:4px 0 12px;
  background:linear-gradient(180deg,rgba(13,13,15,.5),transparent);pointer-events:none}
.chiprow{display:flex;gap:7px;overflow-x:auto;padding:2px 14px 4px;pointer-events:auto;
  -webkit-overflow-scrolling:touch}
.chiprow::-webkit-scrollbar{height:0}
.chiprow.tight{flex-wrap:wrap;overflow:visible;padding:0}
.chip{flex:none;display:flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;
  font-size:13px;font-weight:500;letter-spacing:.005em;
  background:rgba(20,20,24,.8);border:1px solid var(--linie);color:var(--txt2);white-space:nowrap;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:.16s var(--ease)}
.chip:active{transform:scale(.95)}
.chip.on{background:var(--lime-dim);border-color:rgba(124,228,4,.42);color:var(--lime)}
.chip .ic{width:15px;height:15px}
.chip small{color:var(--txt3);font-size:11px}

.mapside{position:absolute;right:14px;bottom:calc(var(--tab-h) + 205px);z-index:20;
  display:flex;flex-direction:column;gap:8px}
.mapside .iconbtn{background:rgba(20,20,24,.8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}

.mapbottom{position:absolute;left:0;right:0;bottom:var(--tab-h);z-index:20;padding:0 14px 12px;
  margin:0 auto;max-width:780px;
  background:linear-gradient(0deg,rgba(13,13,15,.9),rgba(13,13,15,.5) 62%,transparent)}
.timeline{background:rgba(20,20,24,.86);border:1px solid var(--linie);border-radius:20px;
  padding:12px 14px 9px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.tl-head{display:flex;align-items:center;gap:12px;margin-bottom:2px}
.playbtn{width:38px;height:38px;border-radius:999px;background:var(--lime);color:#0b2200;
  display:grid;place-items:center;flex:none}
.playbtn .ic{stroke:none;fill:currentColor;width:22px;height:22px}
.playbtn .pause{display:none;stroke:currentColor;fill:none;stroke-width:2.2}
.playbtn.playing .play{display:none}
.playbtn.playing .pause{display:block}
.tl-time{line-height:1.2}
.tl-time b{font-size:17px;font-weight:500;display:block;letter-spacing:-.01em}
.tl-time span{font-size:11px;color:var(--txt3)}
.ghostbtn{margin-left:auto;padding:9px 14px;border-radius:999px;border:1px solid var(--linie);
  background:var(--flaeche);font-size:12.5px;font-weight:500;color:var(--txt2)}
.ghostbtn.on{background:var(--lime-dim);border-color:rgba(124,228,4,.42);color:var(--lime)}
#tlRange{width:100%;-webkit-appearance:none;appearance:none;background:transparent;height:30px;margin:0}
#tlRange::-webkit-slider-runnable-track{height:3px;border-radius:4px;
  background:linear-gradient(90deg,rgba(255,255,255,.26) 0 var(--pp,50%),rgba(255,255,255,.08) var(--pp,50%) 100%)}
#tlRange::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:99px;
  background:var(--lime);margin-top:-8.5px;box-shadow:0 2px 12px rgba(0,0,0,.7)}
#tlRange::-moz-range-track{height:3px;border-radius:4px;background:rgba(255,255,255,.14)}
#tlRange::-moz-range-thumb{width:18px;height:18px;border-radius:99px;background:var(--lime);border:0}
.tl-marks{display:flex;justify-content:space-between;font-size:9.5px;color:var(--txt3);
  padding:0 2px;margin-top:-3px;letter-spacing:.04em}
.scalebar{margin-top:9px;display:flex;border-radius:7px;overflow:hidden;height:20px;font-size:9px;
  align-items:center;color:#08080a;font-weight:600;opacity:.92}
.scalebar div{flex:1;text-align:center;line-height:20px}
.readout{position:absolute;left:14px;right:14px;bottom:calc(var(--tab-h) + 172px);z-index:22;
  background:rgba(20,20,24,.94);border:1px solid var(--linie2);border-radius:18px;padding:15px 17px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);font-size:13.5px;
  max-width:520px;margin:0 auto}
.readout h3{font-family:Montserrat;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  font-size:13px;margin-bottom:5px}
.readout .rg{display:grid;grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:1px;margin-top:12px;
  background:var(--linie);border-radius:11px;overflow:hidden}
.readout .rg div{background:#141418;padding:8px 10px}
.readout .rg small{display:block;font-size:9px;color:var(--txt3);text-transform:uppercase;
  letter-spacing:.11em;font-family:Montserrat;font-weight:600;margin-bottom:3px}
.readout .rg b{font-size:15px;font-weight:500}
.maplade{position:absolute;top:calc(var(--top-h) + 54px);left:50%;transform:translateX(-50%);z-index:25;
  display:flex;align-items:center;gap:9px;background:rgba(20,20,24,.9);border:1px solid var(--linie);
  border-radius:999px;padding:8px 16px;font-size:12px;color:var(--txt2);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.maplade i{width:12px;height:12px;border-radius:99px;border:1.8px solid rgba(124,228,4,.25);
  border-top-color:var(--lime);animation:dr .7s linear infinite;flex:none}
@keyframes dr{to{transform:rotate(360deg)}}

/* ---------- Webcams ---------- */
.camgrid{display:grid;grid-template-columns:1fr;gap:var(--luft)}
@media(min-width:640px){.camgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.camgrid{grid-template-columns:1fr 1fr 1fr}}
.cam{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);overflow:hidden}
.cam .ph{position:relative;aspect-ratio:16/9;background:#101014;display:block;width:100%;overflow:hidden}
.cam .ph img{width:100%;height:100%;object-fit:cover;display:block}
.cam .ph .ld{position:absolute;inset:0;display:grid;place-items:center;color:var(--txt3);font-size:11.5px}
.cam .meta{padding:13px 16px;display:flex;align-items:center;gap:10px}
.cam .meta b{font-size:14px;font-weight:600}
.cam .meta small{display:block;font-size:10.5px;color:var(--txt3);margin-top:2px}
.cam .meta .t{margin-left:auto;font-size:10.5px;color:var(--txt3);text-align:right}

/* ---------- Stationen ---------- */
.search{width:100%;padding:13px 16px;border-radius:var(--r-klein);background:rgba(255,255,255,.03);
  border:1px solid var(--linie);color:var(--txt);font-size:16px;margin-top:12px;font-family:inherit}
.search::placeholder{color:var(--txt3)}
.search:focus{outline:none;border-color:rgba(124,228,4,.4)}
.statlist{display:flex;flex-direction:column;gap:1px;background:var(--linie);
  border:1px solid var(--linie);border-radius:var(--r);overflow:hidden}
.st{display:flex;align-items:center;gap:14px;background:var(--bg);padding:14px 17px}
.st .nm{min-width:0;flex:1}
.st .nm b{display:block;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.st .nm small{font-size:10.5px;color:var(--txt3)}
.st .val{font-size:20px;font-weight:400;letter-spacing:-.025em}
.st .val em{font-style:normal;font-size:11px;color:var(--txt3);margin-left:3px}

/* ---------- Tableiste ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:70;height:var(--tab-h);
  padding-bottom:env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(5,1fr);
  background:rgba(13,13,15,.88);backdrop-filter:blur(26px) saturate(150%);
  -webkit-backdrop-filter:blur(26px) saturate(150%);border-top:1px solid var(--linie)}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:var(--txt3);font-family:Montserrat,system-ui,sans-serif;font-weight:600;font-size:9px;
  letter-spacing:.11em;text-transform:uppercase;transition:color .18s}
.tab .ic{width:22px;height:22px;stroke-width:1.4}
.tab.is-on{color:var(--lime)}
.tab:active{opacity:.55}

/* ---------- Blatt / Meldung ---------- */
.sheet{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end}
.sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.66);backdrop-filter:blur(4px);animation:fi .25s}
@keyframes fi{from{opacity:0}}
.sheet-panel{position:relative;width:100%;max-height:88vh;background:#141418;border-radius:26px 26px 0 0;
  border-top:1px solid var(--linie2);animation:up .36s var(--ease);display:flex;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom)}
@media(min-width:760px){.sheet{align-items:center;justify-content:center}
  .sheet-panel{max-width:560px;border-radius:26px;border:1px solid var(--linie2)}}
@keyframes up{from{transform:translateY(100%)}}
.sheet-grab{height:26px;display:grid;place-items:center;flex:none}
.sheet-grab::after{content:"";width:36px;height:4px;border-radius:9px;background:rgba(255,255,255,.2)}
.sheet-body{overflow-y:auto;padding:6px 22px 28px}
.sheet-body h3{font-family:Montserrat;font-weight:800;text-transform:uppercase;letter-spacing:.09em;
  font-size:15px;margin-bottom:14px}
.sheet-body h4{font-family:Montserrat;font-weight:600;font-size:9.5px;color:var(--txt3);
  text-transform:uppercase;letter-spacing:.14em;margin:22px 0 10px}
.sheet-body p{font-size:13.5px;color:var(--txt2);line-height:1.7;margin:0 0 11px}
.sheet-body a{color:var(--lime)}
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 16px;
  border-radius:var(--r-klein);background:rgba(255,255,255,.035);border:1px solid var(--linie);
  margin-bottom:8px;font-size:15px}
.opt:active{background:var(--flaeche2)}
.opt b{font-weight:500}
.opt small{display:block;font-size:11px;color:var(--txt3);margin-top:2px}
.opt .ok{margin-left:auto;color:var(--lime)}
.opt .del{margin-left:auto;color:var(--txt3);padding:4px 8px}
.opt.haupt{justify-content:center;background:var(--lime);border-color:var(--lime);color:#0b2200}
.opt.haupt b{font-weight:600}
.diag{font-size:12.5px}
.diag div{display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--linie);padding:9px 0}
.diag .s{width:7px;height:7px;border-radius:9px;flex:none}
.diag .s.ok{background:var(--lime)} .diag .s.no{background:var(--rot)} .diag .s.wait{background:var(--warm)}
.diag em{margin-left:auto;font-style:normal;color:var(--txt3);font-size:10.5px;text-align:right}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tab-h) + 20px);z-index:150;
  background:rgba(24,24,28,.96);border:1px solid var(--linie2);border-radius:14px;padding:12px 20px;
  font-size:13px;box-shadow:0 14px 44px rgba(0,0,0,.7);animation:up2 .3s var(--ease);
  max-width:86vw;text-align:center}
@keyframes up2{from{opacity:0;transform:translate(-50%,12px)}}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}

/* Wichtig: display in einer Regel schlägt das hidden-Merkmal.
   Ohne diese Zeile liegt ein unsichtbares Blatt über der Bedienung. */
[hidden]{display:none !important}

/* ==========================================================================
   Feinschliff und neue Bauteile
   ========================================================================== */

/* ---- Reiterwechsel: ein Blättern, kein Schnitt ---- */
.view.is-on.von-rechts{animation:hereinR .32s var(--ease)}
.view.is-on.von-links{animation:hereinL .32s var(--ease)}
@keyframes hereinR{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes hereinL{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}

/* ---- Karten kommen gestaffelt herein ---- */
.scroll > .card, .scroll > .camgrid > .cam, .scroll > .statlist, .scroll > .pws{
  animation:auftauchen .42s var(--ease) both}
.scroll > .card:nth-child(1){animation-delay:.02s}
.scroll > .card:nth-child(2){animation-delay:.06s}
.scroll > .card:nth-child(3){animation-delay:.10s}
.scroll > .card:nth-child(4){animation-delay:.14s}
.scroll > .card:nth-child(5){animation-delay:.18s}
.scroll > .card:nth-child(6){animation-delay:.22s}
@keyframes auftauchen{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* ---- Ziehen zum Aktualisieren ---- */
.ptr{position:absolute;top:calc(var(--top-h) + 4px);left:50%;transform:translateX(-50%);
  z-index:40;width:32px;height:32px;display:grid;place-items:center;pointer-events:none;
  opacity:clamp(0,var(--z,0),1);transition:transform .3s var(--ease),opacity .2s}
.ptr i{width:20px;height:20px;border-radius:99px;border:2px solid rgba(255,255,255,.12);
  border-top-color:var(--lime);display:block;
  transform:rotate(calc(var(--z,0) * 300deg));transition:transform .1s linear}
.ptr.laeuft{opacity:1}
.ptr.laeuft i{animation:dr .7s linear infinite}

/* ---- Himmel in der Jetzt-Karte, folgt dem Sonnenstand ---- */
.now{position:relative;overflow:hidden;isolation:isolate}
.now::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--himmel,linear-gradient(165deg,rgba(74,159,224,.10),transparent 62%));
  transition:background 1.2s var(--ease)}
.now::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 70% at var(--sonne-x,70%) var(--sonne-y,120%),
    var(--sonne-farbe,rgba(232,163,60,.16)), transparent 62%);
  transition:all 1.2s var(--ease)}

/* ---- Modelle: Urteil und Streuung ---- */
.urteil{display:flex;align-items:flex-start;gap:13px}
.urteil .punkt{width:9px;height:9px;border-radius:99px;flex:none;margin-top:6px;
  box-shadow:0 0 0 4px rgba(255,255,255,.05)}
.urteil b{display:block;font-family:Montserrat;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;font-size:15px}
.urteil span{display:block;font-size:13px;color:var(--txt2);margin-top:4px;line-height:1.6}
.sp-liste{margin-top:18px;display:flex;flex-direction:column}
.sp-zeile{display:grid;grid-template-columns:46px 1fr 78px 52px;gap:10px;align-items:center;
  padding:9px 0;border-top:1px solid var(--linie);font-size:12.5px}
.sp-zeile:first-child{border-top:0}
.sp-h{color:var(--txt3);font-weight:500}
.sp-bar{height:4px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden}
.sp-bar i{display:block;height:100%;border-radius:4px;transition:width .5s var(--ease)}
.sp-w{text-align:right;color:var(--txt2)}
.sp-d{text-align:right;font-weight:500}

.chartbox{position:relative}
.chartbox canvas{width:100%;display:block}
.mchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.mchip{display:flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;
  background:rgba(255,255,255,.035);border:1px solid var(--linie);font-size:11.5px;
  font-weight:500;color:var(--txt2);transition:.15s var(--ease)}
.mchip i{width:7px;height:7px;border-radius:99px;flex:none}
.mchip small{color:var(--txt3);font-size:10px}
.mchip.on{background:rgba(255,255,255,.09);border-color:var(--linie2);color:var(--txt)}
.mchip:active{transform:scale(.95)}

/* ---- Niederschlagsmatrix ---- */
.mx{font-size:11.5px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.mx::-webkit-scrollbar{height:0}
.mx-kopf,.mx-zeile{display:grid;grid-template-columns:82px repeat(5,minmax(44px,1fr));gap:3px;
  align-items:center;min-width:340px}
.mx-kopf{margin-bottom:5px}
.mx-kopf span{text-align:center;font-family:Montserrat;font-weight:600;font-size:9px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--txt3)}
.mx-kopf em{display:block;font-style:normal;font-size:9px;color:var(--txt3);
  letter-spacing:0;margin-top:1px;font-family:Inter}
.mx-zeile{margin-bottom:3px}
.mx-n{display:flex;align-items:center;gap:6px;color:var(--txt2);font-size:11px;
  white-space:nowrap;overflow:hidden}
.mx-n i{width:6px;height:6px;border-radius:99px;flex:none}
.mx-z{text-align:center;padding:6px 2px;border-radius:6px;font-weight:500;
  font-variant-numeric:tabular-nums}
.mx-z.leer{background:rgba(255,255,255,.025);color:var(--txt3)}
.mx-mittel{margin-top:6px;padding-top:6px;border-top:1px solid var(--linie)}
.mx-mittel .mx-n{color:var(--txt);font-weight:600}

/* ---- Regenrisiko ---- */
.pw-liste{display:flex;flex-direction:column}
.pw-zeile{display:grid;grid-template-columns:52px 1fr 46px 62px;gap:10px;align-items:center;
  padding:10px 0;border-top:1px solid var(--linie);font-size:12.5px}
.pw-zeile:first-child{border-top:0}
.pw-t{color:var(--txt2);font-weight:500}
.pw-bar{position:relative;height:6px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden}
.pw-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;transition:width .6s var(--ease)}
.pw-bar u{position:absolute;left:0;top:0;bottom:0;border-radius:6px;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.5) 0 2px,transparent 2px 5px)}
.pw-p{text-align:right;font-size:15px;font-weight:500}
.pw-p em{font-style:normal;font-size:10px;color:var(--txt3);margin-left:1px}
.pw-m{text-align:right;color:var(--txt3);font-size:11.5px}

/* ---- Eigene Wetterstation ---- */
.pws{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);
  padding:20px;margin-bottom:var(--luft);position:relative;overflow:hidden}
.pws::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,228,4,.5),transparent)}
.pws-kopf{display:flex;align-items:center;gap:9px}
.pws-kopf b{font-family:Montserrat;font-weight:800;text-transform:uppercase;letter-spacing:.09em;
  font-size:12.5px}
.pws-live{width:7px;height:7px;border-radius:99px;background:var(--txt3);flex:none}
.pws-live.an{background:var(--lime);box-shadow:0 0 0 0 rgba(124,228,4,.55);animation:puls 2.4s infinite}
@keyframes puls{70%{box-shadow:0 0 0 7px rgba(124,228,4,0)}100%{box-shadow:0 0 0 0 rgba(124,228,4,0)}}
.pws-q{margin-left:auto;font-size:10px;color:var(--txt3);text-align:right}
.pws-haupt{display:flex;align-items:flex-end;gap:12px;margin-top:14px}
.pws-temp{font-size:52px;font-weight:200;letter-spacing:-.05em;line-height:.9;display:flex;
  align-items:flex-start}
.pws-temp i{font-size:17px;font-style:normal;font-weight:300;color:var(--txt3);margin-top:5px;margin-left:2px}
.pws-gef{font-size:12.5px;color:var(--txt2);padding-bottom:6px}
.pws-pfeil{margin-left:auto;line-height:0}
.pws-hinweis{font-size:12px;color:var(--txt2);margin:14px 0 0;padding:10px 12px;
  background:rgba(255,255,255,.03);border-radius:10px;border-left:2px solid rgba(124,228,4,.45)}

/* ---- Webcams: Vollbild und Bildaufblendung ---- */
.cam .ph img{opacity:0;transition:opacity .5s var(--ease)}
.cam .ph img.da{opacity:1}
.ld-ring{width:22px;height:22px;border-radius:99px;border:2px solid rgba(255,255,255,.1);
  border-top-color:rgba(255,255,255,.42);animation:dr .8s linear infinite;display:block}
.cam .ph{cursor:zoom-in}
.vollbild{position:fixed;inset:0;z-index:160;background:rgba(6,6,8,.97);display:flex;
  align-items:center;justify-content:center;opacity:0;transition:opacity .26s var(--ease);
  padding:env(safe-area-inset-top) 12px calc(env(safe-area-inset-bottom) + 12px)}
.vollbild.an{opacity:1}
.vollbild img{max-width:100%;max-height:100%;object-fit:contain;border-radius:12px;
  transform:scale(.98);transition:transform .3s var(--ease)}
.vollbild.an img{transform:none}
.vb-kopf{position:absolute;top:calc(env(safe-area-inset-top) + 14px);left:16px;right:16px}
.vb-kopf b{display:block;font-family:Montserrat;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;font-size:13px;text-shadow:0 2px 10px #000}
.vb-kopf span{font-size:11.5px;color:var(--txt2);text-shadow:0 2px 10px #000}
.vb-fuss{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 16px);left:16px;right:16px;
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.vb-fuss .ghostbtn{background:rgba(20,20,24,.9);text-decoration:none}

/* ---- Nachtdämmung ---- */
html.gedimmt body{filter:brightness(.62) saturate(.9)}
html.gedimmt .tabbar{background:rgba(9,9,11,.94)}

/* ---- Kleinkram, der den Unterschied macht ---- */
.card{transition:border-color .25s var(--ease)}
.chiprow.tight{gap:6px}
.search{transition:border-color .2s var(--ease),background .2s var(--ease)}
.opt{transition:background .16s var(--ease),transform .12s var(--ease)}
.opt:active{transform:scale(.985)}
.tab .ic{transition:transform .2s var(--ease)}
.tab.is-on .ic{transform:translateY(-1px) scale(1.06)}
.hr{transition:background .2s}
.now-temp,.pws-temp,.st .val,.nv b{font-feature-settings:"tnum" 1,"lnum" 1}
::selection{background:rgba(124,228,4,.28)}
.nv.leer{background:var(--bg)}
.sp-d em{font-style:normal;font-size:10px;color:var(--txt3);margin-left:2px}

/* ---- Webcam-Kopf: Gebiete in einer Zeile statt in einem Block ---- */
.camkopf{margin:0 0 var(--luft)}
.camkopf-z{display:flex;align-items:baseline;gap:12px;margin-bottom:12px;padding:0 2px}
.chiprow.bleed{margin:0 -14px;padding:0 14px 2px;overflow-x:auto;flex-wrap:nowrap}
.chiprow.werkzeug{margin-top:8px}
.chiprow.werkzeug .chip{background:rgba(255,255,255,.03)}
@media (min-width:820px){ .chiprow.bleed{margin:0;padding:0 0 2px} }

/* ---- Ortsleiste mit Symbol ---- */
.ort-z{display:flex;align-items:center;gap:5px}
.ort-i{width:20px;height:20px;flex:none;line-height:0;opacity:.9}
.ort-i svg{width:20px;height:20px;display:block}

/* ---- Wegweiser zum Modellreiter ---- */
.wegweiser{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  border:1px solid var(--linie);background:var(--flaeche)}
.wegweiser:active{background:var(--flaeche2)}
.ww-t{flex:1;min-width:0}
.ww-u{margin-top:8px;font-family:Montserrat;font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;font-size:15px}
.ww-u em{display:block;font-style:normal;font-family:Inter;font-weight:400;font-size:12px;
  letter-spacing:0;text-transform:none;color:var(--txt3);margin-top:4px}
.ww-s{font-size:12.5px;color:var(--txt2);margin:8px 0 0;line-height:1.5}
.ww-p{width:18px;height:18px;color:var(--txt3);flex:none}

/* ---- iOS-Feinheiten ---- */
html{-webkit-text-size-adjust:100%}
.scroll{overscroll-behavior-y:contain;scroll-behavior:smooth}
.sheet-panel{transition:transform .28s var(--ease)}
.sheet-grab{cursor:grab;touch-action:none}
.boot-mark img{animation:markEin .8s var(--ease) both}
@keyframes markEin{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.topbar .iconbtn:nth-of-type(n){flex:none}