@font-face{font-family:"Barlow Condensed";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%}

/* Wetter – herausgelöst aus „Zählerstände E10“ (Wetteransicht), erweitert um Modellvergleich */
:root{
  --bg:#f3f4f2; --surface:#ffffff; --surface-2:#eceeeb; --line:#d6dad5; --fg:#1d2321; --muted:#5f6864;
  --accent:#24507a; --accent-fg:#ffffff;
  --m0:#24507a; --m1:#c8561f; --m2:#2f7d4a; --m3:#7048c4; --m4:#c8326f; --m5:#0e8f7e; --m6:#a98400; --m7:#2563d4; --m8:#8a4f9e; --m9:#d97400; --m10:#4f8a10; --m11:#6b7280; --m12:#b4471f;
  --band:rgba(36,80,122,.13); --band-chip:rgba(36,80,122,.3); --nacht:rgba(29,43,100,.05);
  --gas:#c8561f; --strom:#a98400; --wasser:#2a6fa8;
  --good:#2f7d4a; --warn:#b4471f;
  --meter-bg:#1d2321; --meter-fg:#f3f4f2;
  --temp:#8a4f9e; --netatmo:#d6336c; --sun:#e8a317; --moon:#e9e4d4; --moon-dark:#3a3f4a; --wx-cloud:#ffffff; --wx-cloud-edge:#aab3bd; --wx-snow:#8fb8e0; --blaue-stunde:#3f5fbf; --blau-tief:#1d2b64; --gold-hell:#f6cd6b; --gold-tief:#f08a3c; --regen1:#a9cbe8; --regen2:#2a6fa8; --regen3:#4b3aa8; --wind:#3c8a7a; --w1:#e6c200; --w2:#f08a00; --w3:#d6332a; --w4:#a3238f; --y0:#7048c4; --y1:#0e8f7e; --y2:#2563d4; --y3:#c8326f; --y4:#d97400; --y5:#4f8a10;
  --f-display:"Barlow Condensed","Arial Narrow",sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#141917; --surface:#1c2220; --surface-2:#232b28; --line:#333d39; --fg:#e7ebe8; --muted:#9aa5a0;
  --accent:#7fb2e5; --accent-fg:#0e1513;
  --m0:#7fb2e5; --m1:#ec8a55; --m2:#6cc48a; --m3:#a98bf0; --m4:#f2709f; --m5:#3cc9b4; --m6:#e2bf3c; --m7:#6fa3ff; --m8:#c99be0; --m9:#ffa53d; --m10:#9bd157; --m11:#9aa5a0; --m12:#f08a62;
  --band:rgba(127,178,229,.16); --band-chip:rgba(127,178,229,.4); --nacht:rgba(0,0,0,.18);
  --gas:#ec8a55; --strom:#e2bf3c; --wasser:#6bb0e6;
  --good:#6cc48a; --warn:#f08a62;
  --meter-bg:#0b0e0d; --meter-fg:#e7ebe8; --temp:#c99be0; --netatmo:#ff7aa2; --sun:#f5bd3c; --moon:#f1ead2; --moon-dark:#2a2f38; --wx-cloud:#3a4450; --wx-cloud-edge:#8a96a3; --wx-snow:#cfe3f7; --blaue-stunde:#8ea6ff; --blau-tief:#26346f; --gold-hell:#f6cd6b; --gold-tief:#f08a3c; --regen1:#3d6f99; --regen2:#6bb0e6; --regen3:#b18cff; --wind:#6cc4b0; --w1:#ffe14d; --w2:#ffa640; --w3:#ff6b5e; --w4:#e07ad0; --y0:#a98bf0; --y1:#3cc9b4; --y2:#6fa3ff; --y3:#f2709f; --y4:#ffa53d; --y5:#9bd157; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141917; --surface:#1c2220; --surface-2:#232b28; --line:#333d39; --fg:#e7ebe8; --muted:#9aa5a0;
  --accent:#7fb2e5; --accent-fg:#0e1513;
  --m0:#7fb2e5; --m1:#ec8a55; --m2:#6cc48a; --m3:#a98bf0; --m4:#f2709f; --m5:#3cc9b4; --m6:#e2bf3c; --m7:#6fa3ff; --m8:#c99be0; --m9:#ffa53d; --m10:#9bd157; --m11:#9aa5a0; --m12:#f08a62;
  --band:rgba(127,178,229,.16); --band-chip:rgba(127,178,229,.4); --nacht:rgba(0,0,0,.18);
  --gas:#ec8a55; --strom:#e2bf3c; --wasser:#6bb0e6;
  --good:#6cc48a; --warn:#f08a62;
  --meter-bg:#0b0e0d; --meter-fg:#e7ebe8; --temp:#c99be0; --netatmo:#ff7aa2; --sun:#f5bd3c; --moon:#f1ead2; --moon-dark:#2a2f38; --wx-cloud:#3a4450; --wx-cloud-edge:#8a96a3; --wx-snow:#cfe3f7; --blaue-stunde:#8ea6ff; --blau-tief:#26346f; --gold-hell:#f6cd6b; --gold-tief:#f08a3c; --regen1:#3d6f99; --regen2:#6bb0e6; --regen3:#b18cff; --wind:#6cc4b0; --w1:#ffe14d; --w2:#ffa640; --w3:#ff6b5e; --w4:#e07ad0; --y0:#a98bf0; --y1:#3cc9b4; --y2:#6fa3ff; --y3:#f2709f; --y4:#ffa53d; --y5:#9bd157; color-scheme:dark}

[hidden]{display:none!important}
.wrap>*{min-width:0}
.swap .field,.fields .field{min-width:0}
.field input:not([type=checkbox]){width:100%;box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:15px;line-height:1.5}
.wrap{max-width:1180px;margin:0 auto;padding-inline:20px;padding-block:28px 64px;display:flex;flex-direction:column;gap:36px}
h1,h2,h3{font-family:var(--f-display);font-weight:600;letter-spacing:.01em;margin:0;text-wrap:balance}
h1{font-size:2.6rem;line-height:1}
h2{font-size:1.65rem;line-height:1.1}
h3{font-size:1.2rem}
.eyebrow{font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:500}
.muted{color:var(--muted)}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
button{font:inherit;cursor:pointer}
.btn{border:1px solid var(--line);background:var(--surface);color:var(--fg);padding:.5rem .9rem;border-radius:6px;font-weight:500}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.small{padding:.25rem .55rem;font-size:.85rem}
.btn.danger{color:var(--warn);border-color:var(--warn)}
.btn:disabled{opacity:.45;cursor:not-allowed}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

header.top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
header.top .meta{display:flex;flex-direction:column;gap:6px}
.controls{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
select,input{font:inherit;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:.45rem .6rem}
input[type=number]{font-family:var(--f-mono)}
.status{font-size:.85rem;color:var(--muted)}
.status.err{color:var(--warn)}

/* Grafiken */
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px}
.chart-box{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px;min-width:0;display:flex;flex-direction:column;gap:8px}
.chart-box.wide{grid-column:1/-1}
.chart-box .cv{position:relative;height:240px}
.chart-box.wide .cv{height:280px}
.section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:14px}

.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label{font-weight:500;font-size:.9rem;display:flex;align-items:center;gap:6px}
.hint{font-size:.8rem;color:var(--muted)}
.msg{font-size:.9rem}
.msg.err{color:var(--warn)} .msg.ok{color:var(--good)}

/* Tabelle */
.table-wrap{position:relative;overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:10px}
table{border-collapse:collapse;width:100%;min-width:980px;font-size:.88rem}
th,td{padding:.55rem .7rem;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line)}
th{font-weight:500;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;vertical-align:bottom;background:var(--surface-2)}
th.grp{text-align:center;border-bottom:2px solid var(--c);color:var(--fg);font-family:var(--f-display);font-size:1rem;letter-spacing:.02em;text-transform:none}
td:first-child,th:first-child{text-align:left}
td.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--surface-2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.empty{padding:28px;text-align:center;color:var(--muted)}

@media (max-width:520px){h1{font-size:2.1rem}.meter span{font-size:1.1rem}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


.seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--surface)}
.seg button{border:0;background:none;color:var(--muted);padding:.4rem .8rem;font-weight:500}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg)}

/* Kopfzeile: Abmelden */
.logout{font-size:.85rem;color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.logout:hover{color:var(--fg)}
a.btn{text-decoration:none;display:inline-block}
/* Anmeldung */
.login{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.login form{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:28px;width:100%;max-width:380px;display:flex;flex-direction:column;gap:16px}
.login h1{font-size:2.2rem}
.login .field input{width:100%}



/* Warnungen */
.wt-warn{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.warn{border:1px solid var(--line);border-left:6px solid var(--wc);border-radius:8px;padding:12px 14px;background:var(--surface)}
.warn.w1{--wc:var(--w1)} .warn.w2{--wc:var(--w2)} .warn.w3{--wc:var(--w3)} .warn.w4{--wc:var(--w4)}
.warn-head{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.warn-stufe{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.warn-zeit{font-size:.85rem;color:var(--muted);margin-top:2px}
.warn p{margin:.5rem 0 0;font-size:.9rem;max-width:80ch}
.warn-none{margin:0;font-size:.88rem}
.warn-banner{border-radius:8px;padding:10px 14px;background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--wc);font-size:.92rem}
.warn-banner.w1{--wc:var(--w1)} .warn-banner.w2{--wc:var(--w2)} .warn-banner.w3{--wc:var(--w3)} .warn-banner.w4{--wc:var(--w4)}
.warn-banner a{color:var(--accent);margin-left:6px}

.chart-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
.seg-small button{padding:.25rem .6rem;font-size:.8rem}

/* ===== Wetteransicht (puristisch) ===== */
.wx{display:flex;flex-direction:column;gap:22px}
.wx-ort{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.wx-ort-btn{font:inherit;font-size:.9rem;padding:.4rem .9rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--fg);cursor:pointer}
.wx-ort-btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
#wxOrtSuche{width:100%;box-sizing:border-box;border-radius:999px;padding:.4rem .9rem}
.wx-ort-btn{display:inline-flex;align-items:center;gap:6px}
.wx-such{position:relative;flex:0 1 22rem;min-width:14rem}
.wx-treffer{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);margin:0;padding:4px;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:20rem;overflow:auto}
.wx-treffer button{display:flex;flex-direction:column;align-items:flex-start;width:100%;text-align:left;font:inherit;background:none;border:0;border-radius:8px;padding:.45rem .6rem;color:var(--fg);cursor:pointer}
.wx-treffer button:hover,.wx-treffer button:focus-visible{background:var(--bg);outline:none}
.wx-treffer .muted{font-size:.8rem}
.wx-treffer .leer{padding:.5rem .6rem;font-size:.85rem}
@media (max-width:560px){.wx-such{flex:1 1 100%}}
#wxOrtSuche:not(:placeholder-shown){border-color:var(--accent)}
.wx-hero{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;padding-block:8px 4px}
.wx-now{display:flex;align-items:center;gap:22px}
.wx-temp{font-family:var(--f-display);font-weight:600;font-size:clamp(4rem,12vw,7.5rem);line-height:.9;letter-spacing:-.02em}
.wx-temp span{font-size:.35em;color:var(--muted);margin-left:.15em;vertical-align:.95em}
.wx-cond{font-family:var(--f-display);font-size:1.6rem;margin-top:6px}
.wx-meta{font-size:.9rem;color:var(--muted);margin-top:4px}
.wx-today{text-align:right}
.wx-date{font-family:var(--f-display);font-size:1.3rem}
.wx-minmax{font-family:var(--f-mono);font-size:1.8rem;display:flex;gap:6px;justify-content:flex-end;align-items:baseline}
.wx-minmax .hi,.wx-mm .hi{color:var(--fg)} .wx-minmax .lo,.wx-mm .lo{color:var(--muted)}
.wx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.wx-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 20px;min-width:0}
.wx-card h3{font-size:1.15rem;margin-bottom:6px}
.wx-arc{width:100%;height:auto;max-height:150px;display:block}
.wx-sunrow{display:flex;justify-content:space-between;gap:12px;margin-top:6px}
.wx-sunrow div{display:flex;flex-direction:column;gap:2px}
.wx-sunrow .mid{text-align:center;align-items:center}
.wx-sunrow div:last-child{text-align:right;align-items:flex-end}
.wx-sunrow .lab,.wx-light dt{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.wx-sunrow strong{font-family:var(--f-mono);font-size:1.25rem;font-weight:500}
.wx-sunrow .muted{font-size:.78rem}
.wx-hint{margin:.7rem 0 0;font-size:.9rem}
.wx-light{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:.8rem 0 0;font-size:.88rem}
.wx-light dd{margin:0;font-family:var(--f-mono)}
.wx-moonbox{display:flex;align-items:center;gap:18px;margin:6px 0 4px}
.wx-moonname{font-family:var(--f-display);font-size:1.5rem}
.wx-phasen{margin-top:1rem;border-top:1px solid var(--line);padding-top:.8rem}
.wx-phasen .lab{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.wx-prow{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:.6rem}
.wx-ph{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.wx-anim .wx-ph{animation:vEin .5s ease both}
.wx-ph .nm{font-size:.78rem;line-height:1.2}
.wx-ph .dt{font-family:var(--f-mono);font-size:.8rem;color:var(--muted)}
.wx-hrow{display:flex;gap:4px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity}
.wx-h{scroll-snap-align:start}
.wx-h.neu{border-left:1px solid var(--line);padding-left:4px}
.wx-h{flex:1 0 58px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.85rem}
.wx-h strong{font-family:var(--f-mono);font-weight:500}
.wx-h .rain{font-size:.72rem;color:var(--wasser);min-height:1em}
.wx-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
@media (max-width:820px){.wx-days{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}}
.wx-day{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.wx-anim .wx-day{animation:vEin .4s ease both}
.wx-day .wd{font-family:var(--f-display);font-size:1.1rem}
.wx-day .small{font-size:.75rem}
.wx-day .storm{color:var(--warn);font-weight:600}
.wx-mm{font-family:var(--f-mono);display:flex;gap:8px;font-size:1.05rem}
.wx-src{font-size:.78rem;color:var(--muted);margin:0}
.wx-warn:empty{display:none}
.wx-warn{display:flex;flex-direction:column;gap:10px}

/* Animationen der Symbole */
.wx-icon{overflow:visible}
.wx-rays{animation:wxSpin 24s linear infinite;transform-box:fill-box;transform-origin:center}
.wx-drift{animation:wxDrift 7s ease-in-out infinite alternate}
.wx-back{opacity:.7;animation-duration:9s}
.wx-fall > *{animation:wxFall 1s linear infinite;transform-box:fill-box}
.wx-slow > *{animation-duration:2.6s}
.wx-flash{animation:wxFlash 3s ease-in-out infinite}
.wx-twinkle circle{animation:wxTwinkle 2.4s ease-in-out infinite}
.wx-twinkle circle:nth-child(2){animation-delay:.8s} .wx-twinkle circle:nth-child(3){animation-delay:1.6s}
.wx-fog line{animation:wxFog 4s ease-in-out infinite alternate}
.wx-wind path{stroke-dasharray:60;animation:wxWind 2.4s ease-in-out infinite}
.wx-glow{animation:wxGlow 5s ease-in-out infinite alternate}
@keyframes wxSpin{to{transform:rotate(360deg)}}
@keyframes wxDrift{from{transform:translateX(-2px)}to{transform:translateX(4px)}}
@keyframes wxFall{0%{transform:translate(2px,-8px);opacity:0}25%{opacity:1}100%{transform:translate(-2px,10px);opacity:0}}
@keyframes wxFlash{0%,70%,100%{opacity:1}75%,85%{opacity:.2}80%{opacity:1}}
@keyframes wxTwinkle{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes wxFog{from{transform:translateX(-3px);opacity:.6}to{transform:translateX(3px);opacity:1}}
@keyframes wxWind{0%{stroke-dashoffset:60}60%{stroke-dashoffset:0}100%{stroke-dashoffset:-60}}
@keyframes wxGlow{from{opacity:.5}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.wx-rays,.wx-drift,.wx-fall > *,.wx-flash,.wx-twinkle circle,.wx-fog line,.wx-wind path,.wx-glow,.view,.wx-day{animation:none!important}}

/* Anmeldung: Passwort anzeigen, angemeldet bleiben */
.pw-feld{position:relative}
.pw-feld input{width:100%;padding-right:2.8rem;box-sizing:border-box}
.pw-zeigen{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:2.2rem;height:2.2rem;border:0;border-radius:6px;background:none;color:var(--muted);cursor:pointer}
.pw-zeigen:hover{color:var(--fg)}
.pw-zeigen[aria-pressed="true"] .zu{display:none}
.merken{display:flex;align-items:center;gap:8px;font-size:.92rem;cursor:pointer}
.merken input{width:1.05rem;height:1.05rem;accent-color:var(--accent)}
.merken .muted{font-size:.82rem}


/* Wind: Richtung als kleiner Pfeil (zeigt, wohin der Wind weht) */
.wind-pfeil{display:inline-block;vertical-align:-1px;color:var(--wind)}
.wind-aus{white-space:nowrap;display:inline-flex;align-items:center;gap:3px}
.wx-h .wind{display:inline-flex;align-items:center;gap:3px;font-size:.78rem;color:var(--fg);margin-top:2px}
.wx-h .wind-kmh{font-size:.7rem;color:var(--muted);font-family:var(--f-mono)}

/* Goldene & Blaue Stunde als Lichtband */
.licht{margin-top:1rem;border-top:1px solid var(--line);padding-top:.8rem;display:flex;flex-direction:column;gap:12px}
.licht-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;align-items:baseline}
.licht-kopf .lab,.licht-zeile .lab{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.licht-info{font-size:.88rem}
.licht-info b{font-weight:600}
.licht-info b.gold{color:color-mix(in srgb, var(--sun) 75%, var(--fg))}
.licht-info b.blau{color:var(--blaue-stunde)}
.licht-zeile{display:flex;flex-direction:column;gap:6px}
.licht-band{position:relative;display:flex;height:10px;border-radius:999px}
.licht-band .seg{min-width:4px}
.licht-band .seg:first-child{border-radius:999px 0 0 999px}
.licht-band .seg:last-of-type{border-radius:0 999px 999px 0}
.seg.blau.morgens{background:linear-gradient(90deg,var(--blau-tief),var(--blaue-stunde))}
.seg.gold.morgens{background:linear-gradient(90deg,var(--gold-tief),var(--gold-hell))}
.seg.gold.abends{background:linear-gradient(90deg,var(--gold-hell),var(--gold-tief))}
.seg.blau.abends{background:linear-gradient(90deg,var(--blaue-stunde),var(--blau-tief))}
.licht-jetzt{position:absolute;top:-4px;bottom:-4px;width:3px;margin-left:-1.5px;border-radius:2px;background:var(--fg);box-shadow:0 0 0 2px var(--surface)}
.licht-legende{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:.88rem}
.licht-legende span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.licht-legende i{width:10px;height:10px;border-radius:50%;flex:none}
.licht-legende .blau i{background:var(--blaue-stunde)}
.licht-legende .gold i{background:var(--sun)}
.licht-legende b{font-family:var(--f-mono);font-weight:500;margin-left:2px}
.licht-legende .aktiv{font-weight:600}

/* Aktualisieren in der Wetteransicht */
.wx-neu{margin-left:auto}
.wx-neu.laeuft svg{animation:wxSpin 1s linear infinite}
.wx-neu:disabled{opacity:.7;cursor:progress}
@media (max-width:560px){.wx-neu span{display:none}.wx-neu{padding:.45rem .6rem}.wx-ort .wx-such{order:5}#wxOrtMsg{order:6}.wx-ort > .eyebrow{display:none}}

/* Regenradar-Hinweis unter dem aktuellen Wetter */
.wx-radar{font-size:.92rem;margin:.15rem 0 .3rem;color:var(--muted)}
.wx-radar.nass{color:var(--wasser);font-weight:500}

/* Wischbare Hero-Anzeige mit Regenmengen (nur wenn Regen angesagt ist) */
.wx-hero.mit-regen{display:block;padding-block:0}
.wx-slides{display:flex;align-items:flex-start;transition:height .3s ease;overflow-y:hidden;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-radius:12px}
.wx-slides::-webkit-scrollbar{display:none}
.wx-slide{flex:0 0 100%;scroll-snap-align:start;min-width:0;box-sizing:border-box}
.wx-slide-jetzt{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;padding-block:8px 4px}
.wx-slide-regen{padding:4px 2px}
.wx-dots{display:flex;justify-content:center;gap:8px;margin-top:10px}
.wx-dots button{font:inherit;font-size:.78rem;border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:999px;padding:.2rem .7rem;cursor:pointer}
.wx-dots button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.regen{display:flex;flex-direction:column;gap:14px;height:100%}
.regen-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px}
.regen-kopf h3{margin:0}
.regen-summen{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:.9rem;color:var(--muted)}
.regen-summen b{color:var(--wasser);font-family:var(--f-mono);font-weight:600;font-size:1.05rem}
.regen-teil{display:flex;flex-direction:column;gap:6px}
.regen-teil .lab{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.regen-trocken{margin:0;font-size:.92rem;color:var(--muted)}

.regen-zug{margin:0;flex:1 1 14rem;font-size:.95rem;line-height:1.45;display:flex;flex-direction:column;gap:6px}
.regen-zug small{color:var(--muted);font-size:.78rem}

/* Wind unter dem Wettersymbol */
.wx-now-icon{display:flex;flex-direction:column;align-items:center;gap:4px}


/* Radarkarte */
.regen-karte{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
.radar-karte{width:min(210px,58vw);height:auto;flex:none}
.rk-kreuz{stroke:var(--wx-cloud-edge);stroke-width:.25;opacity:.45}
.rk-ring{fill:none;stroke:var(--wx-cloud-edge);stroke-width:.3;stroke-dasharray:.8 1.4;opacity:.7}
.rz{stroke:none}
.rz.s1{fill:var(--regen1);opacity:.8}
.rz.s2{fill:var(--regen2);opacity:.85}
.rz.s3{fill:var(--regen3);opacity:.9}
.rk-n{font-size:2.9px;fill:var(--muted);text-anchor:middle;font-family:var(--f-body);font-weight:600;letter-spacing:.02em}
.rk-zug path{fill:none;stroke:var(--wind);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;animation:rkZug 2.4s ease-in-out infinite}
.rk-zug .w1{animation-delay:0s}.rk-zug .w2{animation-delay:.3s}.rk-zug .w3{animation-delay:.6s}
@keyframes rkZug{0%{transform:translateY(-1px);opacity:0}30%{opacity:1}100%{transform:translateY(2.5px);opacity:0}}
@media (prefers-reduced-motion:reduce){.rk-zug path{animation:none!important}}

/* Regen als Flächendiagramm */
.rf-wrap{position:relative}
.regen-flaeche{display:block;width:100%;height:84px;border-bottom:1px solid var(--line)}
.rf-flaeche{opacity:.85}
.rf-linie{fill:none;stroke:var(--regen2);stroke-width:1.6}
.rf-stufe{stroke:var(--line);stroke-width:.6;stroke-dasharray:3 4}
.rf-jetzt{stroke:var(--fg);stroke-width:1.5}
.rf-trocken{position:absolute;inset:0;display:grid;place-items:center;font-size:.85rem;color:var(--muted)}
.regen-zeiten span{transform:translateX(-50%)}
.regen-zeiten span:first-child{transform:none}
.regen-legende{display:flex;gap:14px;font-size:.78rem;color:var(--muted)}
.regen-legende span{display:inline-flex;align-items:center;gap:5px}
.regen-legende i{width:12px;height:8px;border-radius:2px}

/* Regenseite auf dem Smartphone */
@media (max-width:560px){
  .regen{gap:12px}
  .regen-karte{flex-direction:column;align-items:center;text-align:center;gap:8px}
  .regen-zug{flex:none;align-items:center}
  .regen-flaeche{height:70px}
  .regen-summen{gap:2px 12px;font-size:.85rem}
}
.regen-zeiten{position:relative;height:1.5em;font-size:.72rem;color:var(--muted);overflow:hidden}
.regen-zeiten span{position:absolute;white-space:nowrap;top:2px}
.regen-zeiten span:last-child:not(:first-child)[style="left:100.0%"]{transform:translateX(-100%)}

/* Regenmenge: 12 Stunden oder (per Tippen) die nächsten 2 Stunden */
.regen-tabs{display:flex;gap:6px}
.regen-tabs button{font:inherit;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;border:0;background:none;padding:0 0 2px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent}
.regen-umschalt[data-ansicht="std"] [data-zeige="std"],.regen-umschalt[data-ansicht="radar"] [data-zeige="radar"]{color:var(--fg);border-bottom-color:var(--accent)}
.regen-umschalt .regen-std,.regen-umschalt .regen-rad{cursor:pointer}
.regen-umschalt[data-ansicht="std"] .regen-rad,.regen-umschalt[data-ansicht="radar"] .regen-std{display:none}
.regen-zug{font-size:1.05rem;font-weight:500}

/* Smartphone: Tagesübersicht als ruhige Zeile unter dem aktuellen Wetter */
@media (max-width:560px){
  .wx-slide-jetzt,.wx-hero:not(.mit-regen){gap:14px}
  .wx-today{width:100%;text-align:left;display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 12px;border-top:1px solid var(--line);padding-top:10px}
  .wx-today .wx-date{font-size:1.05rem}
  .wx-today .wx-minmax{font-size:1.25rem;justify-content:flex-end}
  .wx-today .wx-meta{grid-column:1/-1}
}
.regen-zug small{font-weight:400}

/* Höchst- / Tiefstwert */
.trenn{color:var(--muted);opacity:.55;font-weight:300;margin:0 .05em}
.wx-mm{gap:3px!important}
@media (max-width:560px){.wx-today .wx-meta{text-align:right}}

/* Radarkarte: Regenfelder wie die Tropfen der Wettersymbole sanft einblenden */
@keyframes rkEin{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.radar-karte .rz{animation:none}}

.rf-marke{position:absolute;top:2px;margin-left:5px;font-size:.7rem;color:var(--muted);white-space:nowrap;pointer-events:none;background:color-mix(in srgb, var(--bg) 80%, transparent);padding:0 4px;border-radius:3px}
/* Radarwolken atmen leicht */
.radar-karte .rz{animation:rkAtem 6s ease-in-out infinite alternate}
@keyframes rkAtem{from{opacity:var(--o,.85)}to{opacity:calc(var(--o,.85) - .15)}}
@media (prefers-reduced-motion:reduce){.radar-karte .rz{animation:none}}
.rz.s1{--o:.8}.rz.s2{--o:.85}.rz.s3{--o:.9}


/* Radar als plastisches Instrument */
.radar-karte{filter:drop-shadow(0 6px 10px rgba(0,0,0,.16)) drop-shadow(0 1px 2px rgba(0,0,0,.12))}
.rk-l0{stop-color:color-mix(in srgb, #fff 70%, var(--surface))}
.rk-l1{stop-color:var(--surface-2)}
.rk-l2{stop-color:color-mix(in srgb, var(--line) 75%, var(--fg))}
.rk-g0{stop-color:color-mix(in srgb, #fff 60%, var(--wx-cloud))}
.rk-g1{stop-color:color-mix(in srgb, var(--wx-cloud-edge) 14%, var(--wx-cloud))}
.rk-g2{stop-color:color-mix(in srgb, var(--wx-cloud-edge) 32%, var(--wx-cloud))}
.rk-hier{fill:var(--accent)}
.rk-hier-ring{fill:#fff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .rk-l0{stop-color:color-mix(in srgb, #fff 18%, var(--surface))}:root:not([data-theme="light"]) .rk-g0{stop-color:color-mix(in srgb, #fff 10%, var(--wx-cloud))}:root:not([data-theme="light"]) .rk-glanz{opacity:.16}:root:not([data-theme="light"]) .radar-karte{filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))}}
:root[data-theme="dark"] .rk-l0{stop-color:color-mix(in srgb, #fff 18%, var(--surface))}
:root[data-theme="dark"] .rk-g0{stop-color:color-mix(in srgb, #fff 10%, var(--wx-cloud))}
:root[data-theme="dark"] .rk-glanz{opacity:.16}
.rk-glanz{opacity:.8}
.rk-kante{fill:none;stroke:var(--wx-cloud-edge);stroke-width:.35;opacity:.7}
.radar-karte{filter:drop-shadow(0 4px 8px rgba(0,0,0,.12)) drop-shadow(0 1px 1.5px rgba(0,0,0,.1))}

/* Regensummen: eine ruhige Zeile, kleiner als die Überschrift, auf gleicher Grundlinie */
.regen-kopf{align-items:baseline}
.regen-summen{display:flex;flex-direction:row;align-items:baseline;gap:0;font-size:.88rem;color:var(--muted);white-space:nowrap}
.regen-summen b{font-family:var(--f-mono);font-size:.95rem;font-weight:500;color:var(--wasser)}
.regen-summen .trenn{margin:0 .25em}
.regen-summen .rs-einheit{margin-left:.4em}
.regen-summen .trenn{margin:0 .45em}
@media (max-width:380px){.regen-summen{font-size:.8rem}}




/* ===================== Ergänzungen der Wetter-App ===================== */
.wrap{gap:28px}
header.top{align-items:center}
.small{font-size:.85rem}
.klein{font-family:var(--f-body);font-size:.8rem;font-weight:400;margin-left:6px}
.wx-ortname{font-size:.8rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:500;margin-bottom:4px}

/* Warnungen aufklappbar */
.warn summary{cursor:pointer;list-style:none;display:flex;flex-direction:column;gap:2px}
.warn summary::-webkit-details-marker{display:none}
.warn summary .warn-head::after{content:"Details";margin-left:auto;font-size:.78rem;color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.warn[open] summary .warn-head::after{content:"weniger"}
.warn-head{width:100%}


/* ===================== Ruhige Gestalt (Version 2) ===================== */
.wrap{max-width:1080px;gap:22px}
header.top{display:flex;align-items:center;gap:12px 24px;flex-wrap:wrap}
header.top h1{font-size:2rem}
.tabs{display:flex;gap:22px;margin-right:auto}
.tabs button{font:inherit;font-size:1rem;background:none;border:0;padding:.3rem 0;color:var(--muted);border-bottom:2px solid transparent;cursor:pointer}
.tabs button[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--fg)}
.tabs button:hover{color:var(--fg)}
.view{display:flex;flex-direction:column;gap:26px;animation:vEin .3s ease both}
@keyframes vEin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.wx-ort{margin-top:-6px}
.wx-neu{padding:.4rem .6rem}
.wx-card{border-radius:10px}
.wx-modell{margin:0;font-size:.9rem;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line)}
.wx-modell .muted{font-size:.82rem}
.linkbtn{font:inherit;font-size:.82rem;background:none;border:0;padding:0;color:var(--accent);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.wx-today .wx-p{color:var(--wasser)}

/* Nächste Stunden: ohne Kasten, nur Linien */
.wx-hours{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0}
.wx-hrow{gap:0}
.wx-h{flex:1 0 54px;gap:1px}
.wx-h .p{font-family:var(--f-mono);font-size:.78rem;color:var(--wasser);font-weight:500;min-height:1.2em}
.wx-h .rain{font-size:.68rem;color:var(--muted);min-height:1.1em;font-family:var(--f-mono)}
.wx-h .wind{font-size:.72rem;color:var(--muted);font-family:var(--f-mono);gap:2px}

/* Tage: schlichte Spalten */
.wx-days{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:0;border-bottom:1px solid var(--line);padding-bottom:12px}
@media (max-width:900px){.wx-days{grid-template-columns:repeat(5,minmax(0,1fr));row-gap:14px}}
.wx-day{background:none;border:0;border-radius:0;padding:4px 2px;gap:2px}
.wx-day .wd{font-family:var(--f-display);font-size:1.05rem}
.wx-day .dd{font-family:var(--f-body);font-size:.72rem;color:var(--muted)}
.wx-mm{gap:6px!important;font-size:1rem}
.tag-p{display:inline-flex;align-items:center;gap:3px;font-family:var(--f-mono);font-size:.85rem;color:var(--wasser);font-weight:500}
.tag-p.gering{color:var(--muted);font-weight:400}
.tag-mm{font-size:.7rem;color:var(--muted);font-family:var(--f-mono)}
.tag-boe{font-size:.7rem;color:var(--muted)}
.tag-boe.storm{color:var(--warn);font-weight:600}

/* Modelle */
.mv-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}
.mv-kopf h2{font-size:1.3rem}
.mv-sub{margin:0;font-size:.9rem}
.seg{border-radius:999px}
.seg button{padding:.3rem .85rem;font-size:.88rem}
.mt-wrap{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mt-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.mt{border-collapse:separate;border-spacing:0;min-width:0;width:max-content;font-size:.82rem}
.mt th,.mt td{padding:3px 0;border:0;text-align:center;white-space:nowrap;background:none}
.mt td{width:44px;min-width:44px;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.mt td.n{background:color-mix(in srgb, var(--fg) 3.5%, transparent)}
.mt td.ts,.mt th.ts{box-shadow:inset 1px 0 0 var(--line)}
.mt thead th{text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted);font-size:.74rem;background:var(--bg)}
.mt .mt-tage th{text-align:left;padding:8px 6px 2px;font-family:var(--f-display);font-size:.98rem;color:var(--fg)}
.mt .mt-zeit th{font-family:var(--f-mono);padding-bottom:6px}
.mt .mt-lab{position:sticky;left:0;z-index:2;background:var(--bg);text-align:left;padding:3px 12px 3px 0;min-width:96px;max-width:118px;font-family:var(--f-body);font-size:.72rem;font-weight:400;color:var(--muted);text-transform:none;letter-spacing:0;white-space:normal;line-height:1.25}
.mt tr.mt-kopf th.mt-lab{padding-top:14px}
.mt tr.mt-kopf td{border-top:1px solid var(--line)}
.mt tbody tr.mt-kopf:first-child td{border-top:0}
.mt-name{display:block;font-size:.92rem;color:var(--fg);font-weight:500}
.mt-dienst{display:block;font-size:.7rem;color:var(--muted)}
.mt-akt{display:flex;flex-wrap:wrap;gap:2px 10px;margin-top:3px}
.mt-akt .linkbtn{font-size:.7rem;color:var(--muted)}
.mt-akt .linkbtn:hover{color:var(--accent)}
.mt-akt .ist{font-size:.7rem;color:var(--accent);font-weight:600}
.mt tr.haupt .mt-name{color:var(--accent)}
.mt-ic td{height:34px}
.mt-ic .wx-icon{display:block;margin:0 auto}
.mt-t td{font-size:.9rem;color:var(--fg)}
.mt-mm td{color:var(--wasser);font-size:.76rem;height:1.4em}
.mt-pp td{color:var(--wasser);font-size:.72rem}
.mt-wind td{color:var(--muted);font-size:.7rem}
.mt-wind td.sturm{color:var(--warn);font-weight:600}
.mt-wind .wind-pfeil{color:var(--muted);margin-right:1px}
.mt-p td{padding:6px 0}
.mt-p .pz{display:inline-block;min-width:34px;padding:2px 0;border-radius:4px;color:var(--wasser);font-weight:500;background:color-mix(in srgb, var(--wasser) calc(var(--p) * .3%), transparent)}
.mt-p td.hoch .pz{color:var(--fg)}
.mt-p small,.mt-anteil small{font-size:.7em;color:var(--muted)}
.mt-anteil td{font-size:.76rem;color:var(--fg)}
.mt-anteil .null{color:var(--line)}
.mv-aus{margin:-14px 0 0;font-size:.82rem;color:var(--muted)}
.mv-aus:empty{display:none}
.mv-kurve{display:flex;flex-direction:column;gap:12px;padding-top:6px}
.mv-kurve .cv{position:relative;height:300px}
@media (max-width:560px){.mv-kurve .cv{height:240px}.mt td{width:40px;min-width:40px}.mt .mt-lab{min-width:84px}header.top h1{font-size:1.7rem}}
.mv-legende{display:flex;flex-wrap:wrap;gap:4px 6px}
.mv-chip{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;padding:.15rem .5rem;border:1px solid transparent;border-radius:999px;background:none;color:var(--fg)}
.mv-chip i{width:14px;height:3px;border-radius:2px;flex:none}
.mv-chip.aus{opacity:.4;text-decoration:line-through}
.mv-chip.haupt{border-color:var(--line);font-weight:600}
.mv-chip.mv-alle{color:var(--accent)}
.mv-note{margin:0;font-size:.78rem}
.mt tr.mt-kopf th.mt-lab{height:30px;padding:0;vertical-align:bottom;background:transparent;z-index:3}
.mt-zeile{position:absolute;left:0;bottom:4px;display:flex;align-items:baseline;gap:4px 12px;white-space:nowrap}
.mt-zeile .mt-name,.mt-zeile .mt-dienst{display:inline}
.mt-zeile .linkbtn{font-size:.72rem;color:var(--muted)}
.mt-zeile .linkbtn:hover{color:var(--accent)}
.mt-zeile .ist{font-size:.72rem;color:var(--accent);font-weight:600}
.mt td.n{background:color-mix(in srgb, var(--fg) 2.5%, transparent)}
.mt .mt-lab{min-width:64px;max-width:80px}
@media (max-width:560px){.mt .mt-lab{min-width:46px;max-width:52px;padding-right:6px}.mt td{width:38px;min-width:38px}}
.wx-day .dd{display:block;text-align:center}

/* Sternenhimmel */
.sh{gap:30px;max-width:760px}
.sh h2{font-size:1.3rem;margin-bottom:10px}
.sh-fakten{margin:0;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.sh-fakten div{display:grid;grid-template-columns:5.5rem 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.sh-fakten dt{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;padding-top:2px}
.sh-fakten dd{margin:0}
.sh-fakten .muted{font-size:.78rem}
.sh-planeten{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column}
.sh-planeten li{display:grid;grid-template-columns:5.5rem 1fr auto;gap:4px 12px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line)}
.sh-name{font-family:var(--f-display);font-size:1.1rem}
.sh-wann{font-size:.92rem}
.sh-wann .muted{font-size:.82rem}
.sh-mag{font-family:var(--f-mono);font-size:.78rem;color:var(--muted);text-align:right}
@media (max-width:560px){.sh-planeten li{grid-template-columns:4.6rem 1fr}.sh-mag{grid-column:2;text-align:left}.sh-fakten div{grid-template-columns:4.6rem 1fr}}
.sh-weg{margin:8px 0 0;font-size:.82rem;color:var(--muted)}
.sh-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.sh-liste li{display:grid;grid-template-columns:5.5rem 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.sh-liste time{font-family:var(--f-mono);font-size:.82rem;color:var(--muted);padding-top:2px}
.sh-liste strong{display:block;font-weight:500}
.sh-liste span{display:block;font-size:.84rem;color:var(--muted)}
.sh-liste .sh-meteor strong::before,.sh-liste .sh-finsternis strong::before,.sh-liste .sh-planet strong::before,.sh-liste .sh-mond strong::before,.sh-liste .sh-sonne strong::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin:0 8px 2px 0;background:var(--muted)}
.sh-liste .sh-meteor strong::before{background:var(--accent)}
.sh-liste .sh-finsternis strong::before{background:var(--fg)}
.sh-liste .sh-sonne strong::before{background:var(--sun)}
#sh-mehr{align-self:flex-start;margin-top:10px}
@media (max-width:560px){.sh-liste li{grid-template-columns:4.6rem 1fr}.tabs{gap:14px;order:3;width:100%}}

/* Himmelsscheibe: Richtung und Höhe */
.sh-scheibe{flex:none;display:block}
.sh-scheibe.leer{width:40px;height:40px}
.sh-scheibe .rand{fill:none;stroke:var(--line);stroke-width:1}
.sh-scheibe .ring{fill:none;stroke:var(--line);stroke-width:.6;stroke-dasharray:1.5 2}
.sh-scheibe .n{font-size:5px;fill:var(--muted);text-anchor:middle;font-family:var(--f-body);font-weight:600}
.sh-scheibe .strahl{stroke:var(--muted);stroke-width:1;stroke-linecap:round}
.sh-scheibe .punkt{fill:var(--accent)}
.sh-meteor .sh-scheibe .punkt{fill:var(--accent)}
.sh-sonne .sh-scheibe .punkt,.sh-finsternis .sh-scheibe .punkt{fill:var(--sun)}
.sh-liste li{grid-template-columns:5.5rem 1fr 40px;align-items:start}
.sh-planeten li{grid-template-columns:40px 4.5rem 1fr auto;align-items:center}
@media (max-width:560px){
  .sh-liste li{grid-template-columns:4.6rem 1fr 40px}
  .sh-planeten li{grid-template-columns:40px 1fr;row-gap:2px}
  .sh-planeten .sh-scheibe{grid-row:span 3}
  .sh-planeten .sh-wann,.sh-planeten .sh-mag{grid-column:2}
}