/* ═══════════════════════════════════════════════════════════════════════════
   wetter.bymw.de — Held (aktuelle Lage), Stundenband, Tageskarten, Einigkeit.
   Tokens und Ebenen-Leiter kommen aus wetter.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Held ──────────────────────────────────────────────────────────────────
   Die Fläche, auf der die Wetteranimation läuft. Der Text liegt darüber und
   bekommt einen eigenen Verlauf als Lesbarkeits-Unterlage — die Animation ist
   Stimmung, kein Hintergrundbild, das den Kontrast raten darf. */
.wx-held {
  position: relative; overflow: hidden;
  margin-top: var(--sp-16);
  border-radius: var(--r-24);
  background: linear-gradient(165deg, #1b3570 0%, #112450 52%, #0a1430 100%);
  box-shadow: var(--sh-3), var(--sh-saum);
  min-height: 250px;
  isolation: isolate;          /* eigener Stapelraum: --z-fx wirkt nur hier drin */
}
/* ⚠️ Im Hellmodus bleibt der Held dunkel — die Animation braucht einen Himmel,
   auf dem weiße Tropfen und Flocken überhaupt sichtbar sind. Er darf aber nicht
   wie ein Loch in der hellen Seite wirken: ein sattes, lebendiges Blau liest
   sich als bewusste Himmelskarte, ein Fast-Schwarz als Fremdkörper.
   Weiß auf #2f6fc4 misst 5,06:1 — mehr als AA für kleinen Text. */
:root[data-theme="light"] .wx-held {
  background: linear-gradient(165deg, #2f6fc4 0%, #24559f 55%, #1a3f77 100%);
}
@media (min-width: 1000px) { .wx-held { min-height: 300px; } }

.wx-held-fx { position: absolute; inset: 0; z-index: var(--z-fx); }
/* Lesbarkeits-Unterlage. Oben bewusst schwach: Dort steht nur der Ortsname in
   großer, fetter Schrift, und eine kräftige Abdunklung nähme dem Himmel genau
   die Farbe, die ihn ausmacht. */
.wx-held::after {
  content: ""; position: absolute; inset: 0; z-index: var(--z-fx); pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 11, 30, .06) 0%, rgba(6, 11, 30, .42) 62%, rgba(6, 11, 30, .72) 100%);
}

.wx-held-in {
  position: relative; z-index: var(--z-inhalt);
  display: flex; flex-direction: column; gap: var(--sp-12);
  padding: var(--sp-20);
  min-height: inherit;
}
@media (min-width: 1000px) { .wx-held-in { padding: var(--sp-24) var(--sp-32); } }

/* ── Desktop: zwei Spalten ────────────────────────────────────────────────
   Bis 1000 px steht alles untereinander. Darüber blieb die rechte Hälfte des
   Helden LEER — auf 1440 px rund 600 px ungenutzte Fläche, während links alles
   zusammenklebte. Jetzt: links die Lage (Ort, Temperatur, Symbol), rechts die
   Kennzahlen und die Modell-Einigkeit. Der Held füllt damit seine Breite,
   ohne dass irgendetwas auseinandergezogen wirkt. */
@media (min-width: 1000px) {
  .wx-held-in {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
    grid-template-rows: auto 1fr;
    align-items: start;
    column-gap: var(--sp-32);
  }
  .wx-ort         { grid-column: 1; grid-row: 1; justify-self: start; }
  .wx-jetzt       { grid-column: 1; grid-row: 2; align-self: center; justify-self: start; margin-top: 0; }
  .wx-held-rechts { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
.wx-held-rechts { display: flex; flex-direction: column; gap: var(--sp-12); }

/* Der Held ist IMMER dunkel (die Animation braucht einen dunklen Himmel), also
   feste helle Textfarben statt Theme-Token — sonst wäre der Text im Hellmodus
   unsichtbar. Dasselbe Prinzip wie --dark-ink in Kellerkind. */
.wx-held-in, .wx-held-in h1 { color: #ffffff; }
.wx-held-leise { color: rgba(255, 255, 255, .78); }
/* ⚠️ Links im Helden brauchen EIGENE Farben. `var(--acc)` ist auf die helle
   bzw. dunkle Seitenfläche abgestimmt — auf dem blauen Himmel wäre Blau auf
   Blau, im Hellmodus sogar unlesbar. Weiß mit Unterstreichung trägt hier. */
.wx-held-in a { color: #ffffff; text-decoration: underline; text-underline-offset: 2px; }
.wx-held-in a:hover { text-decoration-thickness: 2px; }

/* ── Textschirm ───────────────────────────────────────────────────────────
   ⚠️ Ortsname, Untertitel und Temperatur stehen als EINZIGE direkt auf der
   Animation — alles andere im Helden sitzt auf Glas. Gemessen (qa/wetter-
   kontrast.mjs, Schrift durchsichtig geschaltet) stand der Untertitel über der
   Sonne bei 1,97:1 und die Temperatur hinter Schneeflocken bei 1,78:1. Ein
   Schlagschatten hätte das optisch gemildert, aber nicht messbar behoben.

   Deshalb ein lokaler Schirm: eine weiche, nach außen auslaufende Abdunklung
   GENAU hinter dem Text. Als Form ist sie unsichtbar (kein Kasten, keine
   Kante), sie garantiert aber einen dunklen Untergrund, egal was die Animation
   gerade dorthin schiebt. Nachgerechnet: Der hellste je gemessene Untergrund
   (Blitz, rgb(235,235,237)) landet damit bei 5,1:1 statt 1,19:1.

   Bewusst NICHT die ganze Fläche abdunkeln — das nähme dem Himmel die Farbe,
   die ihn ausmacht, und die Animation wäre nur noch zu erahnen.

   ⚠️ Als VERLAUF gebaut war der Schirm auf dem Handy als dunkler Balken zu
   sehen — der Held ist dort nur rund 340 px breit, die Ellipse füllte ihn fast
   ganz aus und ihre Kante wurde sichtbar. Jetzt: eine weiche Fläche, die per
   `filter: blur()` ausläuft. Sie hat damit überhaupt keine Kante mehr, die
   auffallen könnte, und ist als statische Ebene einmalig zu zeichnen.

   ⚠️ Der Schirm muss so breit sein wie der TEXT, nicht wie die Spalte. Ohne
   `align-self`/`justify-self: start` sind `.wx-ort` und `.wx-jetzt` als Flex-
   bzw. Rasterkinder volle Spaltenbreite — der Schirm deckte damit auf dem
   Desktop die halbe Heldenfläche ab, und im Hellmodus wirkte die linke Hälfte
   fast schwarz, während rechts der blaue Himmel stand. Der Held sah aus, als
   bestünde er aus zwei verschiedenen Karten. */
.wx-ort, .wx-jetzt { position: relative; align-self: flex-start; max-width: 100%; }
.wx-ort::before, .wx-jetzt::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -4px -20px;
  border-radius: var(--r-pill);
  background: rgba(5, 10, 28, .58);
  filter: blur(20px);
}

.wx-ort { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.wx-ort h1 { font-size: var(--fs-24); font-weight: 700; }
.wx-ort .wx-ort-sub { font-size: var(--fs-13); color: rgba(255, 255, 255, .88); }
.wx-ort-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px var(--sp-8); border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .16); font-size: var(--fs-12); font-weight: 600;
  color: #ffffff;
}
.wx-ort-badge svg { width: 12px; height: 12px; }

.wx-jetzt { display: flex; align-items: center; gap: var(--sp-16); flex-wrap: wrap; margin-top: auto; }
.wx-jetzt-sym { width: 76px; height: 76px; flex: 0 0 auto; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35)); }
@media (min-width: 1000px) { .wx-jetzt-sym { width: 96px; height: 96px; } }
.wx-jetzt-temp {
  font-size: var(--fs-64); font-weight: 300; line-height: .95; letter-spacing: -.04em;
  color: #ffffff;
}
.wx-jetzt-temp sup { font-size: .42em; font-weight: 400; vertical-align: super; letter-spacing: 0; }
.wx-jetzt-text { display: flex; flex-direction: column; gap: 2px; }
.wx-jetzt-lage { font-size: var(--fs-18); font-weight: 600; color: #ffffff; }
.wx-jetzt-spanne { font-size: var(--fs-14); color: rgba(255, 255, 255, .82); }

/* Kennzahlenreihe unter der Temperatur. */
.wx-kennzahlen {
  display: flex; flex-wrap: wrap; gap: var(--sp-8);
}
/* ⚠️ ECHTES GLAS, nicht nur ein Schleier. Ein Chip mit 13 % Weiß über einer
   ANIMIERTEN Fläche ist nur so lesbar wie das, was gerade darunter durchzieht —
   und als die Sonne hinter die Kennzahlen wanderte, stand weißer Text auf einer
   fast weißen Scheibe. `backdrop-filter` verwischt den Untergrund, statt ihn
   bloß zu dämpfen: Die Animation bleibt sichtbar, aber sie kann keine harten
   hellen Kanten mehr unter den Text schieben. `saturate` hält dabei die Farbe,
   sonst wirkt das Glas grau und billig. Der Rückfall ohne backdrop-filter ist
   eine deutlich deckendere Fläche — lieber weniger Effekt als unlesbar. */
.wx-kz {
  display: inline-flex; align-items: center; gap: var(--sp-6);
  padding: var(--sp-6) var(--sp-10); border-radius: var(--r-pill);
  background: rgba(10, 20, 48, .42);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  font-size: var(--fs-12); color: #ffffff; white-space: nowrap;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .wx-kz {
    background: rgba(255, 255, 255, .10);
    /* `brightness` ist der entscheidende Teil: Weichzeichnen allein macht einen
       hellen Untergrund nicht dunkler — über der Sonnenscheibe stünde weiterhin
       weißer Text auf Fast-Weiß. Erst das Abdunkeln GARANTIERT den Kontrast,
       egal was die Animation gerade darunter schiebt. */
    backdrop-filter: blur(12px) saturate(140%) brightness(.55);
    -webkit-backdrop-filter: blur(12px) saturate(140%) brightness(.55);
  }
}
.wx-kz svg { width: 15px; height: 15px; opacity: .9; }
.wx-kz b { font-weight: 700; }

/* ── Modell-Einigkeit ──────────────────────────────────────────────────────
   Das ist der Markenkern dieser Seite — sie stand als dünne Zeile ganz unten
   und sah aus wie eine Fußnote. Jetzt eine eigene Fläche mit Zahl, Balken UND
   dem Stufenwort: „58 %" allein sagt niemandem, ob das viel oder wenig ist.

   ⚠️ Heißt in der Oberfläche IMMER „Modell-Einigkeit", nie „Trefferquote":
   Ensemblespreizung ist keine kalibrierte Trefferwahrscheinlichkeit. */
.wx-einig {
  padding: var(--sp-12) var(--sp-16);
  border-radius: var(--r-14);
  /* Dieselbe Glas-Begründung wie bei .wx-kz — hier trägt die Fläche sogar
     Fließtext, also muss sie mehr decken. */
  background: rgba(10, 20, 48, .48);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .wx-einig {
    background: rgba(255, 255, 255, .10);
    backdrop-filter: blur(16px) saturate(140%) brightness(.5);
    -webkit-backdrop-filter: blur(16px) saturate(140%) brightness(.5);
  }
}
/* ⚠️ `white-space: nowrap` an Zahl UND Beschriftung: Auf einem 390-px-Gerät ist
   die Karte rund 300 px breit, und ohne die Sperre brach „58 %" zwischen Zahl
   und Prozentzeichen um — die wichtigste Zahl der Seite stand zweizeilig da.
   Die Stufen-Pille rutscht bei Platzmangel in eine eigene Zeile (`flex-wrap`),
   statt die Zahl zu quetschen. */
.wx-einig-kopf {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px var(--sp-8);
  margin-bottom: var(--sp-8);
}
.wx-einig-kopf b {
  font-size: var(--fs-20); font-weight: 700; color: #fff; line-height: 1;
  white-space: nowrap;
}
.wx-einig-lab { font-size: var(--fs-13); color: rgba(255, 255, 255, .82); white-space: nowrap; }
/* ⚠️ EIGENE, DECKENDE Fläche statt einer durchsichtigen Tönung. Als
   `rgba(255,179,71,.22)` hing der Kontrast der Pille daran, was das Glas
   darunter gerade durchließ — gemessen landete sie bei 4,50:1 gegen geforderte
   4,5:1, also exakt auf der Grenze, und auf WebKit fiel sie darunter. Mit einem
   eigenen dunklen Grund ist der Wert unabhängig von der Animation: schlechtester
   Fall nachgerechnet 4,9:1. Die Farbcodierung trägt jetzt die SCHRIFT. */
.wx-einig-stufe {
  margin-left: auto; padding: 2px var(--sp-8); border-radius: var(--r-pill);
  font-size: var(--fs-12); font-weight: 700; white-space: nowrap;
  background: rgba(8, 16, 40, .62);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  color: #9df0cf;
}
.wx-einig.stufe-mittel .wx-einig-stufe { color: #ffd08a; }
.wx-einig.stufe-gering .wx-einig-stufe { color: #ffb3b3; }

.wx-einig-bar {
  position: relative; height: 8px;
  border-radius: var(--r-pill); background: rgba(255, 255, 255, .18); overflow: hidden;
}
.wx-einig-bar i {
  position: absolute; inset: 0 auto 0 0; border-radius: inherit;
  background: linear-gradient(90deg, #4da3ff, #7fe9c4);
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}
.wx-einig.stufe-mittel .wx-einig-bar i { background: linear-gradient(90deg, #ffb347, #ffd88a); }
.wx-einig.stufe-gering .wx-einig-bar i { background: linear-gradient(90deg, #ff7a7a, #ffb0a0); }
@media (prefers-reduced-motion: reduce) { .wx-einig-bar i { transition: none; } }

.wx-einig-fuss {
  margin-top: var(--sp-8); font-size: var(--fs-12); color: rgba(255, 255, 255, .78);
}

/* Punktleiste in den Tageskarten — Text steht daneben, nicht nur Farbe. */
.wx-punkte { display: inline-flex; gap: 3px; align-items: center; }
.wx-punkte i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-stark); }
.wx-punkte i.an { background: var(--gut); }
.wx-punkte.stufe-mittel i.an { background: var(--warn); }
.wx-punkte.stufe-gering i.an { background: var(--schlecht); }

/* Legende im Abschnittskopf: erklärt die Punkte EINMAL, statt sie auf jeder
   Karte unerklärt zu lassen. */
.wx-legende { display: inline-flex; align-items: center; gap: var(--sp-6); white-space: nowrap; }

/* ── Stundenband ──────────────────────────────────────────────────────────*/
.wx-stunden {
  display: flex; gap: var(--sp-8);
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-bottom: var(--sp-8);
  /* Die Liste rollt in SICH — die Seite darf nie waagerecht scrollen. */
  margin-inline: calc(-1 * var(--sp-16)); padding-inline: var(--sp-16);
  scrollbar-width: thin;
}
.wx-stunden::-webkit-scrollbar { height: 6px; }
.wx-stunden::-webkit-scrollbar-thumb { background: var(--line-stark); border-radius: var(--r-pill); }

/* ⚠️ `position: relative` ist hier KEINE Kosmetik, sondern hält die Seite
   zusammen. In der Kachel steht ein `.wx-sr`-Text für Screenreader, und der ist
   `position: absolute`. Ein absolut positioniertes Element wird NUR von einem
   Vorfahren beschnitten, der selbst positioniert ist — ohne diese Zeile hängen
   die 48 Vorlesetexte an der Seite statt am Band, und die Seite wurde damit
   4255 statt 1440 Pixel breit (von qa/wetter-ui.mjs gemessen und gemeldet).
   Das Band selbst rollte dabei völlig korrekt; sichtbar war nur, dass die ganze
   Seite waagerecht schob. Gilt für JEDE Kachel mit `.wx-sr` in einem Roller. */
.wx-std {
  position: relative;
  flex: 0 0 auto; scroll-snap-align: start;
  width: 68px; padding: var(--sp-10) var(--sp-6);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-6);
  border-radius: var(--r-14); background: var(--flaeche);
  box-shadow: var(--sh-saum);
  text-align: center;
}
@media (min-width: 1000px) { .wx-std { width: 78px; } }
.wx-std.ist-jetzt { background: var(--soft); box-shadow: var(--sh-saum), var(--sh-ring-acc); }
.wx-std-zeit { font-size: var(--fs-13); color: var(--body); font-weight: 600; }
.wx-std-sym { width: 30px; height: 30px; }
.wx-std-temp { font-size: var(--fs-15); font-weight: 600; color: var(--ink); }
.wx-std-regen { font-size: var(--fs-12); color: var(--acc); min-height: 1.25em; font-weight: 600; }
.wx-std-tag {
  flex: 0 0 auto; align-self: stretch; width: 1px; background: var(--line); margin-inline: 2px;
}

/* ── Tageskarten ──────────────────────────────────────────────────────────
   Ein Raster mit sieben Spalten auf dem Desktop, eine Liste auf dem Handy.
   Das Detail-Panel ist ein Rasterkind über die VOLLE Breite und rutscht durch
   die automatische Platzierung von selbst in die Zeile unter seine Karte. */
.wx-tage {
  display: grid; gap: var(--sp-8);
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .wx-tage { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .wx-tage { grid-template-columns: repeat(7, 1fr); } }

.wx-tag {
  position: relative; text-align: left; width: 100%;
  padding: var(--sp-12);
  border-radius: var(--r-14); background: var(--flaeche); color: var(--body);
  box-shadow: var(--sh-saum);
  display: grid; align-items: center; gap: var(--sp-8);
  grid-template-columns: auto 40px 1fr auto;
  transition: background-color .16s, transform .12s, box-shadow .16s;
}
.wx-tag:hover { background: var(--soft); }
.wx-tag:active { transform: translateY(1px); }
.wx-tag[aria-expanded="true"] { background: var(--soft); box-shadow: var(--sh-saum), var(--sh-ring-acc); }

@media (min-width: 700px) {
  .wx-tag {
    grid-template-columns: 1fr; justify-items: center; text-align: center;
    padding: var(--sp-16) var(--sp-10); gap: var(--sp-6);
  }
}

.wx-tag-name { font-size: var(--fs-14); font-weight: 700; color: var(--ink); }
.wx-tag-name small { display: block; font-size: var(--fs-12); font-weight: 400; color: var(--muted); }
@media (min-width: 700px) { .wx-tag-name small { display: inline; margin-left: 4px; } }
.wx-tag-sym { width: 40px; height: 40px; }
@media (min-width: 700px) { .wx-tag-sym { width: 52px; height: 52px; } }

.wx-tag-temp { display: flex; align-items: baseline; gap: var(--sp-6); font-size: var(--fs-16); }
.wx-tag-temp b { color: var(--ink); font-weight: 700; }
.wx-tag-temp span { color: var(--muted); }

.wx-tag-meta { display: flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-12); color: var(--muted); flex-wrap: wrap; justify-content: center; }
.wx-tag-regen { color: var(--acc); font-weight: 600; }

/* Temperaturbalken: zeigt die Tagesspanne im Verhältnis zur Wochenspanne —
   der schnellste Weg zu „wird es wärmer oder kälter?".
   ⚠️ Auf dem Handy ausgeblendet, NICHT geschrumpft: Dort ist die Karte eine
   Zeile mit vier Spalten, und ein fünftes Element quetscht sich in eine paar
   Pixel breite Spalte — sichtbar war davon nichts, es verschob nur die Zeile.
   Die Kennzahlen bekommen dafür ihre eigene, volle Zeile. */
.wx-tag-bar { position: relative; width: 100%; height: 5px; border-radius: var(--r-pill); background: var(--soft); }
@media (max-width: 699px) {
  .wx-tag-bar { display: none; }
  /* Der Pfeil gehört ans Ende der ERSTEN Zeile, nicht in eine dritte: Ohne die
     ausdrückliche Zuweisung setzt ihn die automatische Platzierung hinter die
     volle Kennzahlenzeile — und die Karte wird ohne Grund eine Zeile höher. */
  .wx-tag-pfeil { grid-row: 1; grid-column: 4; }
  .wx-tag-meta { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (min-width: 700px) { .wx-tag-bar { max-width: 96px; } }
.wx-tag-bar i {
  position: absolute; top: 0; bottom: 0; border-radius: inherit;
  background: linear-gradient(90deg, #4da3ff, #ffb347);
}
:root[data-theme="light"] .wx-tag-bar { background: var(--bg-2); }

.wx-tag-pfeil { color: var(--muted); transition: transform .2s; }
.wx-tag[aria-expanded="true"] .wx-tag-pfeil { transform: rotate(180deg); }
.wx-tag-pfeil svg { width: 16px; height: 16px; }
@media (min-width: 700px) { .wx-tag-pfeil { display: none; } }

/* Tag ohne Daten — die Woche wird NICHT stillschweigend verkürzt. */
.wx-tag.ist-leer { opacity: .55; cursor: default; }
.wx-tag.ist-leer:hover { background: var(--flaeche); }