:root{--bg:#0B0C0E;--panel:#15181B;--line:#2A2F35;--text:#F5F6F7;--sub:#8A9097;--gut:#7CFF4F;--mittel:#FFB020;--regen:#3EC6E0;--warn:#FF5A36;--r:6px}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{background:#050506;color:var(--text);font-family:"Inter Tight",system-ui,sans-serif;font-weight:300;overflow:hidden;height:100%}
.frame{width:1280px;height:800px;background:var(--bg);position:absolute;left:50%;top:0;transform-origin:top center;overflow:hidden}
.view{position:absolute;inset:0;display:none}.view.on{display:block}
.num{font-variant-numeric:tabular-nums}
button{font:inherit;cursor:pointer}
.link{background:none;border:0;color:var(--sub);font-size:18px}
.link:hover{color:var(--text)}
.top{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;font-size:22px}
.top .ort{font-weight:500}.top .ort small{font-weight:300;color:var(--sub);font-size:18px;margin-left:12px}
.top .rechts{display:flex;gap:28px;align-items:center}.top .zeit{color:var(--sub)}
.warnbar{min-height:64px;background:var(--warn);color:#0B0C0E;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:10px 40px;font-size:22px;font-weight:500}
.warnbar small{font-weight:300;font-size:18px;white-space:nowrap}
.hero{display:grid;grid-template-columns:1fr 520px;gap:40px;padding:8px 40px 0;height:328px}
.temp{font-weight:200;font-size:176px;line-height:.9;letter-spacing:-5px}
.cond{font-size:32px;margin-top:6px}
.facts{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:14px;font-size:20px;color:var(--sub)}
.facts b{color:var(--text);font-weight:500}
.wagen{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:14px;font-size:18px;color:var(--sub);align-items:center}
.wagen b{color:var(--text);font-weight:500}
.wagen .lab{font-weight:500;color:#61676E}
.wagen i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:8px;background:var(--line)}
.wagen i.an{background:var(--mittel)}
.gassi{border-left:1px solid var(--line);padding-left:40px;display:flex;flex-direction:column;justify-content:center}
.gassi .jetzt span{font-size:38px}
.gassi .bis{font-size:22px}
.gassi .lab{font-size:18px;color:var(--sub);font-weight:500}
.jetzt{display:flex;align-items:center;gap:16px;margin-top:10px}
.sq{width:22px;height:22px;border-radius:3px;background:var(--line)}
.sq.gut{background:var(--gut)}.sq.mittel{background:var(--mittel)}.sq.schlecht{background:var(--regen)}
.jetzt span{font-size:44px;font-weight:500}
.bis{font-size:26px;margin-top:6px}.bis.nass{color:var(--regen)}
.fenster{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.gw{padding:6px 0 6px 14px;border-left:3px solid var(--line)}
.gw.trocken{border-left-color:var(--gut)}
.gw.warn{border-left-color:var(--regen);background:rgba(62,198,224,.08)}
.gk{font-size:16px;color:var(--sub);font-weight:500}.gk span{font-weight:300}
.gs{font-size:21px;font-weight:500;margin-top:2px}
.gw.trocken .gs{color:var(--gut)}.gw.unbekannt .gs{color:var(--sub)}.gw.teils .gs,.gw.nass .gs{color:var(--regen)}
.gs .gh{font-weight:300;color:var(--text)}
.gs{line-height:1.25}
.konsens{margin-top:16px;font-size:17px;color:var(--sub)}
.fb{margin-top:10px;text-align:left;font-size:16px;color:#61676E;align-self:flex-start;padding:4px 0}
.tl{margin:16px 40px 0;height:250px;background:var(--panel);border-radius:var(--r)}
.woche{display:grid;grid-template-columns:repeat(7,1fr) 200px;margin:16px 40px 0;height:96px}
.tag{border-right:1px solid var(--line);padding:6px 0 0 16px}.tag:first-child{padding-left:0}
.tag .d{font-size:17px;color:var(--sub);font-weight:500}
.tag .t{font-size:24px;margin-top:4px}.tag .t i{font-style:normal;color:var(--sub);font-size:20px;margin-left:6px}
.tag .rb{height:4px;background:var(--line);margin:10px 16px 0 0;border-radius:2px;position:relative}
.tag .rb s{position:absolute;left:0;top:0;bottom:0;background:var(--regen);border-radius:2px}
.tag .mm{font-size:15px;color:var(--sub);margin-top:6px}
.sonne{padding:6px 0 0 20px;font-size:18px;color:var(--sub);line-height:1.6}.sonne b{color:var(--text);font-weight:500}
.stand{position:absolute;left:40px;right:40px;bottom:10px;font-size:13px;color:#61676E;display:flex;justify-content:space-between}
.stand .alt{color:var(--warn)}
.overlay{position:absolute;inset:0;background:rgba(5,5,6,.8);display:flex;align-items:center;justify-content:center}
.overlay[hidden]{display:none}
.karte{width:640px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:40px}
.karte h2{font-weight:300;font-size:40px}.karte p{color:var(--sub);font-size:20px;margin-top:10px}
.knopf{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.knopf button{font-size:28px;font-weight:500;height:96px;border-radius:var(--r);border:1px solid var(--line);background:var(--bg);color:var(--text)}
.knopf .ja{border-color:var(--gut)}.knopf .nein{border-color:var(--regen)}
.spaeter{display:block;margin:20px auto 0}
.nacht{background:#000}
.nacht .zeitgross{position:absolute;left:80px;top:150px;font-weight:200;font-size:240px;color:#6E747B;letter-spacing:-8px}
.nacht .nrechts{position:absolute;right:80px;top:190px;text-align:right;color:#6E747B}
.nacht .nrechts .t{font-size:120px;font-weight:200}.nacht .nrechts .z{font-size:26px;margin-top:8px}
.nacht .unten{position:absolute;left:80px;right:80px;bottom:90px;display:flex;justify-content:space-between;font-size:28px;color:#6E747B}
.radar .kopf{display:flex;justify-content:space-between;align-items:flex-end;padding:20px 40px 0;height:96px}
.radar .kopf h2{font-weight:300;font-size:36px}.radar .kopf p{font-size:22px;color:var(--sub)}
.radar .rk{text-align:right}
.karte2{margin:12px 40px 0;height:520px;border-radius:var(--r);overflow:hidden;background:#111417;position:relative}
#r-map{position:absolute;inset:0;background:#111417}
.leaflet-container{font-family:inherit;background:#111417}
.leaflet-control-attribution{background:rgba(11,12,14,.7)!important;color:#61676E!important;font-size:11px}
.leaflet-control-attribution a{color:#8A9097!important}
.radar-ol{image-rendering:auto}
.dunkel{filter:invert(1) hue-rotate(180deg) grayscale(.6) brightness(.75) contrast(.85)}
.legende{z-index:500}
.leaflet-tooltip.ortlabel{background:#0B0C0E;color:#F5F6F7;border:0;box-shadow:none;font-size:18px;font-weight:500;padding:2px 8px;border-radius:4px}
.leaflet-tooltip.ortlabel::before{display:none}
.legende{position:absolute;right:16px;bottom:28px;background:rgba(11,12,14,.85);padding:10px 14px;border-radius:var(--r);font-size:14px;color:var(--sub);display:flex;gap:14px}
.legende i{display:inline-block;width:14px;height:10px;margin-right:6px}
.hinweis{position:absolute;left:16px;bottom:16px;font-size:13px;color:#61676E}
.scrubwrap{margin:22px 40px 0;width:1200px}
.scrub{display:block;width:100%;accent-color:#F5F6F7}
.scrublab{position:relative;height:24px;margin-top:8px;font-size:16px;color:var(--sub)}
.scrublab span{position:absolute;top:0}
.scrublab span:first-child{left:0}.scrublab span:last-child{right:0}
#r-jetzt{transform:translateX(-50%);color:var(--text)}
body.login{overflow:auto;display:flex;align-items:center;justify-content:center;min-height:100%;padding:16px;background:var(--bg)}
.loginkarte{width:100%;max-width:380px;display:flex;flex-direction:column;gap:16px}
.loginkarte img{border-radius:14px}
.loginkarte h1{font-weight:300;font-size:36px;margin-bottom:8px}
.loginkarte label{display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--sub);font-weight:500}
.loginkarte input:not([type=checkbox]){font:inherit;font-size:18px;padding:12px 14px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel);color:var(--text)}
.loginkarte input:focus{outline:2px solid var(--sub);outline-offset:1px}
.loginkarte .check{flex-direction:row;align-items:center;gap:10px;font-weight:300;color:var(--text);font-size:16px}
.loginkarte .check input{width:20px;height:20px;accent-color:var(--gut)}
.loginkarte button{font-size:18px;font-weight:500;padding:14px;border-radius:var(--r);border:0;background:var(--text);color:var(--bg);margin-top:4px}
.loginkarte .fehler{color:var(--warn);font-size:15px;min-height:20px}

/* Handy im Hochformat */
@media (max-width: 760px) {
  html,body{overflow:auto;height:auto}
  .frame{position:static;width:100%;height:auto;min-height:100vh;transform:none!important;overflow:visible}
  .view{position:static}
  .top{height:auto;padding:14px 16px;font-size:18px;flex-wrap:wrap;gap:8px}
  .top .ort small{font-size:14px;margin-left:8px}
  .top .rechts{gap:16px}.top .zeit{font-size:15px}
  .link{font-size:16px}
  .warnbar{padding:12px 16px;font-size:17px;flex-direction:column;align-items:flex-start;gap:4px}
  .warnbar small{font-size:14px}
  .hero{display:flex;flex-direction:column-reverse;gap:24px;padding:4px 16px 0;height:auto}
  .gassi{border-left:0;padding-left:0}
  .gassi .jetzt span{font-size:32px}
  .gassi .bis{font-size:20px}
  .gs{font-size:19px}
  .temp{font-size:112px;letter-spacing:-3px}
  .cond{font-size:26px}
  .facts{font-size:17px;gap:6px 18px}
  .wagen{font-size:16px;gap:6px 16px}
  .konsens{font-size:15px}
  .tl{margin:24px 16px 0;height:auto;overflow:hidden}
  .woche{display:flex;overflow-x:auto;gap:0;margin:16px 16px 0;height:auto;padding-bottom:8px}
  .tag{flex:0 0 96px;padding:4px 0 0 12px}.tag:first-child{padding-left:0}
  .tag .t{font-size:20px}.tag .t i{font-size:16px}
  .sonne{flex:0 0 140px;padding:4px 0 0 12px;font-size:15px}
  .stand{position:static;flex-direction:column;gap:4px;padding:16px 16px 24px}
  .radar .kopf{height:auto;padding:16px 16px 0;flex-direction:column;align-items:flex-start;gap:8px}
  .radar .kopf h2{font-size:28px}.radar .kopf p{font-size:16px}
  .radar .rk{text-align:left;display:flex;gap:16px;align-items:baseline;flex-direction:row-reverse;justify-content:flex-end}
  .karte2{margin:12px 16px 0;height:62vh}
  .legende{bottom:24px;right:8px;font-size:12px;gap:8px;padding:8px 10px}
  .scrubwrap{width:auto;margin:18px 16px 32px}
  .karte{width:calc(100% - 32px);padding:24px}
  .karte h2{font-size:28px}.karte p{font-size:16px}
  .knopf button{height:72px;font-size:22px}
}