/* ---- Lokale Schriften ----
   Archivo und IBM Plex Mono sind selbst OFL-lizenziert (SIL Open Font
   License) — freie Nutzung war nie das Problem. Das Problem war die
   Auslieferung über fonts.googleapis.com: dabei geht die IP jedes
   Besuchers an Google, was mehrere deutsche Gerichte als DSGVO-Verstoß
   gewertet haben (u. a. LG München I, 3 O 17493/20). Selbst hosten löst
   das vollständig — Lizenz und Auslieferung sind getrennte Fragen. */
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/archivo-400.woff2") format("woff2");
}
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fonts/archivo-500.woff2") format("woff2");
}
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/archivo-600.woff2") format("woff2");
}
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/archivo-700.woff2") format("woff2");
}
@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:800; font-display:swap;
  src:url("fonts/archivo-800.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/plexmono-400.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap;
  src:url("fonts/plexmono-500.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/plexmono-600.woff2") format("woff2");
}

/* ============================================================
   Höhenprofil Wien
   Mobile first. Base styles = phone. Media queries scale up.
   Kontrast: Fließtext ≥ 7:1, UI-Text ≥ 4.5:1 (WCAG AA/AAA).
   ============================================================ */

:root{
  /* --- Flächen --- */
  --paper:      #F1F3F1;
  --card:       #FFFFFF;
  --card-2:     #F7F8F6;
  --line:       #D6DAD5;
  --line-hard:  #9AA29A;

  /* --- Schrift --- */
  --ink:        #101619;   /* 17.9:1 auf card */
  --ink-2:      #3D464C;   /*  9.6:1 */
  --ink-3:      #5E686F;   /*  5.6:1 — nur Labels/UI */

  /* --- Höhenlagen: kalt oben, warm unten --- */
  --ridge:      #0B4F8F;   /* Kamm  · 7.9:1 */
  --valley:     #2C6A1E;   /* Tal   · 6.1:1 */
  --city:       #A93A12;   /* Stadt · 5.7:1 */
  --ridge-bg:   #E2ECF7;
  --valley-bg:  #E7F0E2;
  --city-bg:    #F9E7DE;

  /* --- Zustände --- */
  --inv:        #0B4F8F;  --inv-bg:   #DDE9F6;
  --mix:        #9A3D06;  --mix-bg:   #FAE6D6;
  --calm:       #3D464C;  --calm-bg:  #E9ECE8;

  --focus:      #0B4F8F;

  --r: 4px;
  --sh:    0 1px 2px rgba(16,22,25,.06), 0 2px 8px rgba(16,22,25,.06);
  --sh-lg: 0 2px 4px rgba(16,22,25,.06), 0 12px 28px rgba(16,22,25,.10);
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:      #0D1316;
    --card:       #161E23;
    --card-2:     #1D262C;
    --line:       #2C373E;
    --line-hard:  #55636B;

    --ink:        #EDF2F4;   /* 14.6:1 auf card */
    --ink-2:      #B4C0C7;   /*  8.4:1 */
    --ink-3:      #8A979F;   /*  5.2:1 */

    --ridge:      #74B6F5;
    --valley:     #8DCC6E;
    --city:       #F79165;
    --ridge-bg:   #14283A;
    --valley-bg:  #1B2C18;
    --city-bg:    #33200F;

    --inv:        #74B6F5;  --inv-bg:  #14283A;
    --mix:        #F79165;  --mix-bg:  #33200F;
    --calm:       #B4C0C7;  --calm-bg: #222B31;

    --focus:      #74B6F5;

    --sh:    0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.30);
    --sh-lg: 0 2px 4px rgba(0,0,0,.35), 0 12px 28px rgba(0,0,0,.45);
  }
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Archivo", system-ui, -apple-system, sans-serif;
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  padding:0 0 env(safe-area-inset-bottom);
  min-height:100dvh;
}
.wrap{max-width:760px;margin:0 auto;padding:14px 14px 32px;display:flex;flex-direction:column;gap:14px}

.mono{font-family:"IBM Plex Mono", ui-monospace, monospace}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
svg{display:block}

:focus-visible{outline:2.5px solid var(--focus);outline-offset:2px;border-radius:2px}

/* ---------- Kopf ---------- */
header{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding-bottom:12px;border-bottom:1.5px solid var(--line);
}
h1{font-size:19px;font-weight:800;letter-spacing:-.022em;line-height:1.1}
.sites{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  margin-top:5px;display:flex;align-items:center;gap:5px;flex-wrap:wrap;
}
.sites .d{width:7px;height:7px;border-radius:50%;flex:none}
.sites .sep{color:var(--line-hard)}

.head-right{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:none}
.age{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:500;
  letter-spacing:.05em;color:var(--ink-3);text-align:right;white-space:nowrap;
}
.age b{color:var(--ink-2);font-weight:600}
.age.stale b{color:var(--mix)}

/* ---------- Verdikt (Signature 1) ---------- */
.verdict{
  border-radius:var(--r);padding:16px 16px 15px;
  border-left:5px solid var(--calm);background:var(--calm-bg);
  box-shadow:var(--sh);
}
.verdict.inv{border-left-color:var(--inv);background:var(--inv-bg)}
.verdict.mix{border-left-color:var(--mix);background:var(--mix-bg)}
.v-eyebrow{
  font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px;
}
.v-head{font-size:22px;font-weight:800;letter-spacing:-.025em;line-height:1.12;color:var(--calm)}
.verdict.inv .v-head{color:var(--inv)}
.verdict.mix .v-head{color:var(--mix)}
.v-body{margin-top:7px;font-size:14.5px;line-height:1.5;color:var(--ink-2);max-width:52ch}
.v-body b{color:var(--ink);font-weight:600}
.v-src{
  margin-top:10px;padding-top:9px;border-top:1px solid var(--line);
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;line-height:1.55;
  color:var(--ink-3);letter-spacing:.03em;max-width:56ch;
}
.v-src b{color:var(--ink-2);font-weight:600}

/* ---------- Höhensäule (Signature 2) ---------- */
.column{
  background:var(--card);border-radius:var(--r);box-shadow:var(--sh);
  overflow:hidden;
}
.col-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 14px;border-bottom:1.5px solid var(--line);background:var(--card-2);
}
.col-head .k{
  font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
}

.stn{
  display:grid;
  grid-template-columns:52px 1fr auto;
  align-items:center;
  gap:11px;
  padding:14px 14px 14px 0;
  position:relative;
}
.stn + .stn{border-top:1.5px solid var(--line)}

/* Höhenachse links: Zahl + Tick. Reihenfolge im DOM = Höhenordnung. */
.axis{
  position:relative;height:100%;min-height:60px;
  display:flex;flex-direction:column;align-items:flex-end;justify-content:center;
  padding-right:11px;
}
.axis .m{
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:600;
  color:var(--ink-2);font-variant-numeric:tabular-nums;line-height:1;
}
.axis .u{font-family:"IBM Plex Mono",monospace;font-size:9px;color:var(--ink-3);margin-top:2px;letter-spacing:.06em}
.axis::after{ /* Tick */
  content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:5px;height:2.5px;background:currentColor;
}
/* Durchgehende Vertikale = die Höhenachse selbst */
.stn::before{
  content:"";position:absolute;left:51px;top:0;bottom:0;width:2px;
  background:var(--line);
}
.stn:first-of-type::before{top:50%}
.stn:last-of-type::before{bottom:50%}

.stn.ridge  .axis{color:var(--ridge)}
.stn.valley .axis{color:var(--valley)}
.stn.city   .axis{color:var(--city)}

.body-col{min-width:0}
.tag{
  display:inline-flex;align-items:center;gap:5px;
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;
  padding:2.5px 6px;border-radius:2px;margin-bottom:5px;
}
.ridge  .tag{color:var(--ridge); background:var(--ridge-bg)}
.valley .tag{color:var(--valley);background:var(--valley-bg)}
.city   .tag{color:var(--city);  background:var(--city-bg)}
.site{font-size:12px;font-weight:500;color:var(--ink-3);margin-bottom:2px}

.temp{
  font-size:38px;font-weight:800;letter-spacing:-.035em;line-height:1;
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:1px;
}
.temp .deg{font-size:.44em;font-weight:600;color:var(--ink-3);letter-spacing:0}
.ridge  .temp{color:var(--ridge)}
.valley .temp{color:var(--valley)}
.city   .temp{color:var(--city)}

.facts{
  margin-top:6px;display:flex;flex-wrap:wrap;gap:3px 10px;
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.facts .lb{color:var(--ink-3)}
.facts b{font-weight:600;color:var(--ink)}

.right-col{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none;width:56px}
.wx{width:34px;height:34px;color:var(--ink-2)}
.hilo{
  font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;
  color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:center;
}
.hilo .lo{color:var(--ink-3);font-weight:400}

/* Wärmeinsel-Fußzeile der Säule */
.uhi{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 14px;border-top:1.5px solid var(--line);background:var(--card-2);
  font-size:12.5px;color:var(--ink-2);line-height:1.4;
}
.uhi .val{
  font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;
  color:var(--city);background:var(--city-bg);padding:2px 7px;border-radius:2px;
  font-variant-numeric:tabular-nums;flex:none;
}

/* ---------- Heute ---------- */
.today{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;
  background:var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);
}
.tcell{background:var(--card);padding:11px 12px 12px;min-width:0}
.tcell .k{
  display:flex;align-items:center;gap:5px;
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px;
}
.tcell .k svg{width:13px;height:13px;flex:none}
.tcell .v{
  font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.15;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.tcell .v small{font-size:.62em;font-weight:500;color:var(--ink-3);margin-left:1px}
.tcell .s{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--ink-3);margin-top:3px;font-variant-numeric:tabular-nums}

/* ---------- Tabs + Panel ---------- */
.tabs{
  display:grid;grid-template-columns:repeat(2,1fr);gap:2px;
  background:var(--line);padding:2px;border-radius:var(--r);
}
.tab{
  appearance:none;border:none;background:transparent;color:var(--ink-3);
  font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;
  letter-spacing:.05em;padding:9px 4px;cursor:pointer;border-radius:2px;
  transition:background .14s, color .14s;
  min-height:38px;
}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{background:var(--card);color:var(--ink);box-shadow:var(--sh)}

/* Quelle: die wichtigere Entscheidung, etwas größer und mit Abstand darunter */
.tabs.src{margin-bottom:10px}
.tabs.src .tab{font-size:12.5px;padding:11px 4px;min-height:42px}

/* Ansicht innerhalb einer Quelle: kompakter, sitzt direkt über dem Panel */
.tabs.sub{margin-bottom:8px;background:transparent;padding:0}
.tabs.sub .tab{
  background:var(--card-2);border:1.5px solid var(--line);
  box-shadow:none;font-size:10.5px;
}
.tabs.sub .tab[aria-selected="true"]{
  background:var(--card);border-color:var(--line-hard);box-shadow:var(--sh);
}

.panel{
  background:var(--card);border-radius:var(--r);box-shadow:var(--sh);
  padding:14px 12px 12px;
}
.p-note{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;line-height:1.5;
  color:var(--ink-3);padding-top:10px;margin-top:10px;border-top:1.5px solid var(--line);
}
.p-note b{color:var(--ink-2);font-weight:600}

/* Messwert-Tabelle */
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
caption{text-align:left;
  font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);padding-bottom:9px}
th,td{padding:9px 4px;text-align:right;font-size:13px}
th:first-child,td:first-child{text-align:left;padding-left:2px}
thead th{
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  border-bottom:2px solid var(--line);padding-bottom:7px;
}
thead th.ridge{color:var(--ridge)} thead th.valley{color:var(--valley)} thead th.city{color:var(--city)}
tbody tr + tr{border-top:1px solid var(--line)}
tbody th{font-weight:500;color:var(--ink-2);font-size:12.5px}
tbody th .u{font-family:"IBM Plex Mono",monospace;font-size:9.5px;color:var(--ink-3);margin-left:4px}
tbody td{font-family:"IBM Plex Mono",monospace;font-weight:500;color:var(--ink-2);font-size:12.5px}
tbody td.lead{font-weight:600;color:var(--ink)}
tbody td .sub{display:block;font-size:9.5px;color:var(--ink-3);font-weight:400;margin-top:1px}

/* Chart */
.chart{width:100%;height:auto;overflow:visible}
.legend{
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;
  font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:500;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);
  padding-top:11px;margin-top:2px;
}
.legend .li{display:flex;align-items:center;gap:5px}
.legend .sw{width:14px;height:3px;border-radius:2px;flex:none}
.legend .bx{width:10px;height:10px;border-radius:2px;flex:none;border:1.5px solid}

/* ---------- Tagesliste (10 Tage) ---------- */
.seg{
  display:inline-grid;grid-template-columns:1fr 1fr;gap:2px;
  background:var(--line);padding:2px;border-radius:var(--r);margin-bottom:12px;
}
.seg button{
  appearance:none;border:none;background:transparent;color:var(--ink-3);cursor:pointer;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;letter-spacing:.06em;
  padding:6px 14px;border-radius:2px;min-height:32px;transition:background .14s,color .14s;
}
.seg button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:var(--sh)}

.list-key{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;line-height:1.5;
  color:var(--ink-3);letter-spacing:.04em;margin-bottom:9px;
}
.list-key b{color:var(--ink-2);font-weight:600}
.days{display:flex;flex-direction:column;gap:6px}

.day{
  background:var(--card-2);border:1.5px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:border-color .14s;
}
.day:has(.d-btn[aria-expanded="true"]){border-color:var(--line-hard)}

.d-btn{
  appearance:none;width:100%;background:transparent;border:none;cursor:pointer;
  display:grid;
  grid-template-columns:1fr 40px 28px;
  grid-template-areas:
    "hdr  wx   chev"
    "body body body";
  gap:0 10px;align-items:center;
  padding:11px 11px 12px 13px;text-align:left;color:inherit;
}

/* Kopf: Zeitraum und Beschreibung sauber getrennt, nichts bricht mehr ineinander */
.d-hdr{grid-area:hdr;min-width:0}
.d-when{
  display:block;
  font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.d-meta{
  display:block;margin-top:2px;font-size:12.5px;color:var(--ink-2);line-height:1.35;
}
.d-meta .tm{
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3);
  letter-spacing:.04em;margin-right:5px;
}

.d-wx{grid-area:wx;width:38px;height:38px;color:var(--ink-2);justify-self:center}
.d-chev{
  grid-area:chev;width:26px;height:26px;border-radius:50%;justify-self:end;
  display:grid;place-items:center;color:var(--ink-2);
  background:var(--card);border:1.5px solid var(--line);
}
.d-chev svg{width:13px;height:13px;transition:transform .18s ease}
.d-btn[aria-expanded="true"] .d-chev svg{transform:rotate(180deg)}

/* Körper */
.d-body{
  grid-area:body;margin-top:10px;padding-top:10px;border-top:1.5px solid var(--line);
  display:grid;grid-template-columns:auto 1fr;
  grid-template-areas:"temp spread" "stats stats";
  gap:8px 12px;align-items:center;
}

.d-t{
  grid-area:temp;
  font-size:25px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  display:flex;align-items:center;gap:6px;
}
.d-t .dot{width:7px;height:7px;border-radius:50%;background:var(--city);flex:none}
.d-t .lo{font-size:.6em;font-weight:600;color:var(--ink-3)}

/* Die Zeile, die diese App von jeder anderen unterscheidet */
.d-spread{
  grid-area:spread;justify-self:end;
  display:flex;flex-wrap:wrap;gap:2px 10px;justify-content:flex-end;
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;
  font-variant-numeric:tabular-nums;text-align:right;
}
.d-spread .sp{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;color:var(--ink-3)}
.d-spread .sp i{width:6px;height:6px;border-radius:50%;flex:none}
.d-spread .sp b{font-weight:600}
.d-spread .sp.h b{color:var(--ridge)}
.d-spread .sp.v b{color:var(--valley)}
.d-spread .sp.f b{color:var(--ink-2)}

.d-stats{
  grid-area:stats;
  display:grid;grid-template-columns:auto auto 1fr;gap:6px 14px;align-items:start;
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.st{display:flex;align-items:center;gap:5px;white-space:nowrap;min-width:0}
.st svg{width:14px;height:14px;color:var(--ink-3);flex:none}
.st b{font-weight:600;color:var(--ink)}
.st .un{color:var(--ink-3)}
.st.dim b, .st.dim .un, .st.dim svg{color:var(--ink-3);font-weight:500}
.st.wet b{color:var(--ridge)}

.st.wind{flex-direction:column;align-items:flex-end;gap:1px;justify-self:end;text-align:right}
.st.wind .l1,.st.wind .l2{display:flex;align-items:center;gap:4px;white-space:nowrap}
.st.wind .l2{color:var(--ink-3)}
.st.wind .l2 b{color:var(--ink-2);font-weight:600}
.st.wind.gust .l2 b{color:var(--mix)}
.wa{flex:none;color:var(--ink-3)}

/* Aufgeklappt */
.d-more{padding:0 13px 13px;border-top:1.5px solid var(--line);background:var(--card)}
.d-more .hd{
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:11px 0 8px;
}
.d-st{
  display:grid;
  grid-template-columns:4px 1fr auto;
  grid-template-areas:
    "bar nm nm"
    "bar tt gg";
  column-gap:10px; row-gap:5px; align-items:center;
  padding:9px 0;font-variant-numeric:tabular-nums;
}
.d-st + .d-st{border-top:1px solid var(--line)}
.d-st .bar{grid-area:bar;width:4px;align-self:stretch;border-radius:2px}
.d-st .nm{grid-area:nm;font-size:12.5px;font-weight:600;color:var(--ink)}
.d-st .nm .el{
  display:block;font-family:"IBM Plex Mono",monospace;font-size:9.5px;
  font-weight:400;color:var(--ink-3);letter-spacing:.05em;
}
.d-st .tt{grid-area:tt;font-family:"IBM Plex Mono",monospace;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap}
.d-st .tt .lo{color:var(--ink-3);font-weight:400}
.d-st .gg{grid-area:gg;font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink-2);white-space:nowrap;text-align:right;justify-self:end}
.d-st .gg .lb{color:var(--ink-3);font-size:11px}
.d-st .gg b{font-weight:600;color:var(--ink)}

.d-strat{
  margin-top:10px;padding:9px 11px;border-radius:2px;
  font-size:12.5px;line-height:1.45;color:var(--ink-2);
  border-left:4px solid var(--calm);background:var(--calm-bg);
}
.d-strat.inv{border-left-color:var(--inv);background:var(--inv-bg)}
.d-strat.mix{border-left-color:var(--mix);background:var(--mix-bg)}
.d-strat b{color:var(--ink);font-weight:600}

@media (min-width:600px){
  .d-btn{
    grid-template-columns:168px 44px 1fr 28px;
    grid-template-areas:"hdr wx body chev";
    align-items:center;padding:13px 13px 13px 16px;gap:0 14px;
  }
  .d-body{
    margin:0;padding:0;border:none;
    grid-template-columns:auto auto 1fr;
    grid-template-areas:"temp spread stats";
    gap:0 18px;
  }
  .d-t{font-size:27px}
  .d-spread{justify-self:start;justify-content:flex-start;text-align:left;flex-direction:column;gap:2px}
  .d-stats{grid-template-columns:auto auto 1fr;gap:0 16px;align-items:center;justify-self:end}
  .st,.d-stats{font-size:12.5px}
  .d-more{padding:0 16px 16px}
  .d-st{
    grid-template-columns:auto 1fr auto auto;
    grid-template-areas:"bar nm tt gg";
    column-gap:16px; row-gap:0;
  }
  .d-st .bar{align-self:center;height:26px}
}

.state{
  background:var(--card);border-radius:var(--r);box-shadow:var(--sh);
  padding:20px 16px;border-left:5px solid var(--line-hard);
}
.state.err{border-left-color:var(--mix)}
.state .k{
  font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;
}
.state.err .k{color:var(--mix)}
.state h2{font-size:16px;font-weight:700;letter-spacing:-.015em;margin-bottom:6px}
.state p{font-size:14px;color:var(--ink-2);line-height:1.55;max-width:56ch}
.state p + p{margin-top:8px}
.state code{
  font-family:"IBM Plex Mono",monospace;font-size:12px;
  background:var(--card-2);border:1px solid var(--line);border-radius:2px;
  padding:1px 5px;color:var(--ink-2);word-break:break-all;
}
.state button{
  appearance:none;margin-top:14px;border:1.5px solid var(--line-hard);border-radius:var(--r);
  background:var(--card);color:var(--ink);cursor:pointer;
  font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;letter-spacing:.05em;
  padding:10px 16px;min-height:42px;
}
.state button:hover{background:var(--card-2)}

.hidden{display:none !important}
.skel{color:var(--ink-3)}

footer{
  font-family:"IBM Plex Mono",monospace;font-size:10px;line-height:1.7;
  color:var(--ink-3);letter-spacing:.03em;text-align:center;padding-top:6px;
}
footer a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line-hard)}
footer a:hover{color:var(--ink)}

/* ============ Ab Tablet aufwärts ============ */
@media (min-width:600px){
  .wrap{padding:22px 22px 40px;gap:18px}
  h1{font-size:24px}
  .verdict{padding:20px 22px}
  .v-head{font-size:27px}
  .v-body{font-size:15.5px}
  .stn{grid-template-columns:62px 1fr auto;padding:18px 20px 18px 0;gap:16px}
  .stn::before{left:61px}
  .axis{padding-right:13px}
  .axis .m{font-size:13px}
  .temp{font-size:46px}
  .right-col{width:74px;flex-direction:row;gap:10px;align-items:center}
  .right-col{flex-direction:column;width:64px}
  .wx{width:38px;height:38px}
  .col-head,.uhi{padding-left:20px;padding-right:20px}
  .tcell{padding:14px 16px 15px}
  .tcell .v{font-size:22px}
  .panel{padding:18px 18px 14px}
  th,td{font-size:14px;padding:10px 6px}
  tbody th,tbody td{font-size:13.5px}
}
@media (min-width:900px){
  .wrap{max-width:880px}
  .temp{font-size:52px}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}