/* weather.css — das oeffentliche Aussen-Dashboard (NEUBAU_PLAN 6.2).
 *
 * Nur Farben, Abstaende und Geometrie fuer Warn-Banner, aktuelles Wetter,
 * Luftqualitaet und die 7-Tage-Prognose. Die Wetter-Icon-Farbe selbst
 * (--app-wx-day/--app-wx-night) steht in base.css, weil auch Rueckseiten wie
 * die Raum-Kacheln sie kennen muessen.
 *
 * Pfade in url() sind relativ zu DIESER Datei — siehe base.css Kopf.
 */

/* --- Warn-Banner ------------------------------------------------------- */

.app-alerts {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-bottom: var(--app-gap);
}

.app-alert {
    border-radius: var(--app-radius-lg);
    border-left: 4px solid var(--alert-color, var(--app-warm));
    background: color-mix(in srgb, var(--alert-color, var(--app-warm)) 14%, var(--app-surface));
    overflow: hidden;
}

/* **Die Skala beginnt bei Gelb, nicht bei Blau.** Stufe 1 stand hier
 * versehentlich auf `--app-cold` — das ist die Farbe der Luftfeuchte, und eine
 * amtliche Warnung sah damit aus wie ein Hinweis. Dieselben vier Toene wie in
 * der Altfassung (CLAUDE.md 9.1) und dieselbe Richtung wie die AQI-Skala
 * (10.4): gelb, orange, rot, dunkelrot. */
.app-alert--level1 { --alert-color: var(--app-aqi-yellow); }
.app-alert--level2 { --alert-color: var(--app-warm); }
.app-alert--level3 { --alert-color: var(--app-hot); }
.app-alert--level4 { --alert-color: var(--app-aqi-maroon); }

.app-alert > summary {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    cursor: pointer;
    list-style: none;   /* Firefox */
}

/* Das Standard-Dreieck weicht dem eigenen Chevron rechts. */
.app-alert > summary::-webkit-details-marker { display: none; }

/* Ohne Rumpf gibt es nichts aufzuklappen — dann ist die Zeile auch kein
 * Bedienelement. Das kommt vor: NINA-Warnungen ohne Detailabruf tragen
 * gelegentlich nur eine Schlagzeile (CLAUDE.md 5.4). */
.app-alert[data-nobody] > summary { cursor: default; }

.app-alert-icon {
    flex-shrink: 0;
    display: flex;
    color: var(--alert-color, var(--app-warm));
}

.app-alert-main {
    flex: 1 1 auto;
    min-width: 0;
}

.app-alert-main strong {
    display: block;
    line-height: 1.32;
}

.app-alert-meta {
    display: block;
    margin-top: .1rem;
    font-size: .78rem;
    color: var(--app-text-mute);
}

.app-alert-chevron {
    flex-shrink: 0;
    display: flex;
    color: var(--app-text-mute);
    transition: transform .15s ease;
}

.app-alert[open] .app-alert-chevron { transform: rotate(180deg); }

.app-alert-body {
    padding: .75rem 1rem .9rem;
    border-top: 1px solid var(--app-border);
    font-size: .9rem;
    line-height: 1.55;
}

.app-alert-body p { margin: 0 0 .5rem; }
.app-alert-body p:last-child { margin-bottom: 0; }

/* Die Handlungsanweisung steht gedaempft unter der Beschreibung — sie ist die
 * Folgerung, nicht die Meldung. */
.app-alert-instr { color: var(--app-text-mute); }

/* --- Das Kachelraster (CLAUDE.md 9i) --------------------------------------
 *
 * Zwei Haelften nebeneinander, jede mit eigenem Innenleben: links die beiden
 * grossen Kacheln untereinander (jetzt, dann die sieben Tage), rechts das
 * Raster der Detailkacheln.
 *
 * **Das war zuerst ein einziges Raster aus vier Spuren**, in dem die beiden
 * grossen je zwei Spuren und ein bis drei Zeilen belegten. Das sieht auf dem
 * Papier sparsamer aus und hinterlaesst im Bild Loecher: die Tages-Kachel ist
 * so hoch wie ihre sieben Zeilen, die Zeile, die sie belegt, so hoch wie die
 * hoechste Detailkachel daneben — und dazwischen bleibt Flaeche stehen, die
 * kein `dense` fuellen kann, weil sie mitten in einer belegten Zelle liegt.
 * Zwei ineinandergeschachtelte Raster kennen dieses Problem nicht.
 */

.app-wx-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.app-wx-main,
.app-wx-details {
    display: grid;
    gap: 1rem;
    align-items: start;
    min-width: 0;
}

/* `stretch` und nicht `start` wie beim Raster darueber: zwei Kacheln
 * nebeneinander sind verschieden hoch (die Luftfeuchte traegt Skala, Taupunkt
 * und absolute Feuchte, das Gefuehlt-Feld eine Zeile), und die kuerzere liess
 * darunter ein Loch stehen, weil die Zeile so hoch ist wie die hoehere. Auf
 * gleiche Hoehe gezogen wandert stattdessen der Fuss der kuerzeren nach unten
 * — `.app-tile-body { flex: 1 }` sorgt von selbst dafuer. Das Raster der
 * beiden Haelften bleibt `start`, sonst zoege sich die kuerzere Haelfte ueber
 * die ganze Seitenhoehe. */
.app-wx-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

/* --- Der Wetterbericht als Fliesstext (Spezifikation 9i.17) ---------------
 *
 * Der Bericht steht als **Vorspann im Kopf der Vorschaukachel**, ueber den
 * Tageszeilen. Bis 0.11.0 stand er zwischen zwei Kacheln, abgesetzt durch
 * eine Akzentlinie links — das war eine Randnotiz-Geste, und sie war falsch:
 * er sagt in Worten, was die Zeilen darunter in Zahlen sagen, und gehoert
 * deshalb in dieselbe Karte und an ihren Anfang.
 *
 * **Keine zweite Kante.** Er sitzt jetzt in einer Karte und braucht darin
 * keinen eigenen Rahmen, keinen eigenen Grund und keine Randlinie — sonst
 * steht ein Kasten im Kasten. Getrennt wird er von den Zeilen nur durch die
 * Haarlinie unten, dieselbe, die auch den Kachelfuss absetzt.
 *
 * Etwas groesser als der Kacheltext und mit weiterer Zeilenhoehe: er ist der
 * einzige Fliesstext auf dieser Seite und wird als Ganzes gelesen, nicht wie
 * eine Zahl ueberflogen.
 *
 * Eine eigene Dunkelfassung braucht der Block nicht — `--app-text` und
 * `--app-border` fuehrt `base.css` bereits in beiden Schemata (CLAUDE.md
 * Regel 6 greift nur fuer selbst gesetzte Farbwerte).
 */
.app-wx-report {
    margin: 0 0 .85rem;
    padding: 0 0 .85rem;
    border-bottom: 1px solid var(--app-border);
    font-size: .95rem;
    line-height: 1.7;
    color: var(--app-text);
    /* Verhindert eine letzte Zeile aus einem einzelnen Wort. Wo der Browser
     * es nicht kennt, bricht er wie bisher — nichts geht dabei verloren. */
    text-wrap: pretty;
}

/* Tablet: die grossen Kacheln ueber die volle Breite, die Details darunter
 * weiter zu zweit. Eine halbe Tabletbreite traegt weder den Stundenstreifen
 * noch sieben Tageszeilen mit Balken. */
@media (max-width: 68.75rem) {
    .app-wx-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Telefon: alles untereinander. */
@media (max-width: 34rem) {
    .app-wx-details { grid-template-columns: minmax(0, 1fr); }
}

/* --- Die Kachel selbst: Kopf, Rumpf, Fuss --------------------------------- */

.app-tile {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1.05rem 1.15rem;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-sm);
}

/* Der Kopf ist bewusst klein und leise: er benennt die Kachel, er ist nicht
 * ihr Inhalt. Die Zahl darunter traegt die Aussage. */
.app-tile-head {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 .7rem;
    color: var(--app-text-mute);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/*
 * Das Symbolplaettchen — das einzige gestalterische Element, das aus den drei
 * Vorlagen uebernommen ist, und das mit Abstand wirksamste.
 *
 * Vorher stand im Kopf ein 15px-Symbol in derselben gedaempften Farbe wie die
 * Beschriftung daneben. Es war damit ein zweites, kleineres Stueck Text und
 * gab der Kachel keinen Anfang. Auf einer getoenten Flaeche liest es sich als
 * Marke der Kachel: die Zeile bekommt einen Anker links, und zehn Kacheln
 * nebeneinander bekommen einen gemeinsamen Rhythmus.
 *
 * **Einfarbig, nicht je Messgroesse verschieden.** Die Vorlagen faerben ihre
 * Plaettchen bunt durch, weil dort nichts anderes Farbe traegt. Hier tut es
 * der Inhalt: unmittelbar darunter liegen Temperaturfarbe, Feuchte- und
 * AQI-Skala. Ein zweiter Farbklang im Kopf konkurrierte mit Werten, die etwas
 * bedeuten — CLAUDE.md 9b.3 zieht dieselbe Grenze fuer die Wetter-Icons.
 *
 * `box-sizing: content-box` ist hier keine Feinheit: die globale Regel setzt
 * `border-box`, und der Innenabstand wuerde dann von den 15px des Symbols
 * abgezogen statt um sie herumgelegt. Das Symbol schrumpfte auf ein Drittel,
 * ohne dass irgendetwas meldet.
 */
.app-tile-head .app-icon {
    box-sizing: content-box;
    padding: .42rem;
    border-radius: 10px;
    background: var(--app-accent-soft);
    color: var(--app-accent);
    vertical-align: middle;
}

.app-tile-body {
    flex: 1;
    min-width: 0;
}

/* Der Fuss sitzt am unteren Rand der Kachel und traegt die volle Breite —
 * eine Trennlinie darueber, damit er nicht wie eine weitere Textzeile des
 * Rumpfes aussieht. Er ist ein Knopf und kein Link: es folgt kein
 * Seitenwechsel, sondern ein Dialog. */
.app-tile-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    /* Die drei Masse haengen an der Polsterung der Kachel: der Fuss zieht sich
     * ueber ihre volle Breite bis an den Rand. Wer `.app-tile { padding }`
     * aendert, aendert sie mit — sonst steht der Fuss eingerueckt in der
     * Kachel statt an ihrem Grund. */
    width: calc(100% + 2.3rem);
    margin: .9rem -1.15rem -1.05rem;
    padding: .6rem 1.15rem;
    border: 0;
    border-top: 1px solid var(--app-border);
    border-radius: 0 0 var(--app-radius-lg) var(--app-radius-lg);
    background: transparent;
    color: var(--app-text-mute);
    font: inherit;
    font-size: .85rem;
    text-align: left;
    cursor: pointer;
}

.app-tile-foot:hover {
    background: var(--app-surface-2);
    color: var(--app-text);
}

/* Das Zeichen zeigt nach rechts statt nach unten — es oeffnet keinen
 * Aufklapper, sondern eine eigene Ansicht. */
.app-tile-foot .app-icon {
    transform: rotate(-90deg);
}

/* Fuehrt der Fuss auf eine eigene Seite, ist er ein `<a>` und keine
 * Schaltflaeche (Spezifikation 9k) — ohne diese Zeile traegt er als einziger
 * Kachelfuss eine Unterstreichung. Im Bild nebeneinander gesehen. */
a.app-tile-foot {
    text-decoration: none;
}

.app-tile-value {
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.app-tile-unit {
    font-size: .9rem;
    font-weight: 400;
    color: var(--app-text-mute);
}

.app-tile-note {
    margin: .45rem 0 0;
    color: var(--app-text-mute);
    font-size: .82rem;
}

/* --- Die grosse Kachel: jetzt ---------------------------------------------- */

.app-wx-now {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
}

.app-wx-now-value {
    font-size: 3rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.app-wx-now-side {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--app-text-mute);
    font-size: .95rem;
}

/* Zwei Zeilen neben dem Symbol (Spezifikation 9i.16). `align-items: center`
 * steht schon eine Regel hoeher am Flex-Container — das Symbol sitzt damit
 * mittig zu beiden Zeilen, ohne dass hier eine Hoehe gerechnet wird. */
.app-wx-now-cond {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    line-height: 1.25;
}

/* Der Niederschlag ist die Hauptauskunft, der Himmel die Ergaenzung. Die
 * Staffelung laeuft ueber die Farbe und nicht ueber die Schriftgroesse: zwei
 * Groessen dicht untereinander wirkten wie ein Fehler im Umbruch. */
.app-wx-now-cond-main {
    color: var(--app-text);
}

/* Bei einem reinen Bewoelkungscode steht hier das DWD-Wort, und das ist ein
 * klein geschriebenes Adjektiv („bedeckt", „stark bewoelkt"). Als Ueberschrift
 * der Kachel braucht es einen Grossbuchstaben — ueber `::first-letter` und
 * nicht ueber `text-transform: capitalize`, das aus „stark bewoelkt" ein
 * „Stark Bewoelkt" machte, und nicht in PHP, wo es den Satz in der
 * Bewoelkungskachel mit betraefe: dort steht dasselbe Wort mitten im Satz und
 * gehoert klein. Ein Wort, das ohnehin gross beginnt, bleibt unberuehrt. */
.app-wx-now-cond-main::first-letter {
    text-transform: uppercase;
}

.app-wx-current-meta {
    margin: .5rem 0 0;
    color: var(--app-text-mute);
    font-size: .82rem;
    line-height: 1.45;
}

/* Die Herkunftsmarke steht **nicht** hier, sondern in base.css — dort deckt
 * eine Regel `.app-climate-values b` und `.app-wx-current-meta b` gemeinsam ab.
 * Diese Datei hatte sie ein zweites Mal, wortgleich: genau die Doppelung, vor
 * der der Kommentar an der anderen Stelle warnt (CLAUDE.md 9d.8). */

/* --- Der Stundenstreifen --------------------------------------------------
 *
 * Wie viele Stunden nebeneinander stehen, entscheidet die Breite der **Kachel**
 * und nicht die des Fensters — deshalb eine Container-Abfrage und keine
 * `@media`-Regel: dieselbe Kachel ist auf dem Telefon einspaltig und auf dem
 * Monitor zwei Spuren breit, bei gleichem Viewport.
 *
 * Fuenf ist die Untergrenze aus der Vorlage; darueber kommt je nach Platz eine
 * weitere hinzu. Der Streifen scrollt trotzdem: sichtbar sind fuenf bis zehn,
 * vorhanden sind achtundvierzig.
 */

.app-tile--now { container-type: inline-size; }

.app-wx-hours {
    --wx-hours: 5;
    display: flex;
    gap: .25rem;
    margin-top: .9rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* Die duenne, eingefaerbte Scrollbar der scrollbaren Streifen
     * (CLAUDE.md 10.8). */
    scrollbar-width: thin;
    scrollbar-color: var(--app-border) transparent;
}

.app-wx-hours::-webkit-scrollbar { height: 8px; }
.app-wx-hours::-webkit-scrollbar-track { background: transparent; }
.app-wx-hours::-webkit-scrollbar-thumb { background: var(--app-border); border-radius: 999px; }
.app-wx-hours::-webkit-scrollbar-thumb:hover { background: var(--app-text-mute); }

@container (min-width: 22rem) { .app-wx-hours { --wx-hours: 6; } }
@container (min-width: 26rem) { .app-wx-hours { --wx-hours: 7; } }
@container (min-width: 30rem) { .app-wx-hours { --wx-hours: 8; } }
@container (min-width: 36rem) { .app-wx-hours { --wx-hours: 9; } }
@container (min-width: 42rem) { .app-wx-hours { --wx-hours: 10; } }

/* `position: relative` ist hier **keine Kosmetik**, sondern verhindert einen
 * Ueberlauf der ganzen Seite: die Sonnenzellen tragen einen `.app-sr`-Text, und
 * der ist `position: absolute`. Ohne positionierten Vorfahren bezieht er sich
 * auf den Wurzelblock — seine statische Position liegt aber weit rechts im
 * **gescrollten** Streifen (bei 48 Stunden gut 1500px). Damit waechst
 * `documentElement.scrollWidth`, obwohl das Kaestchen 1px gross und
 * weggeschnitten ist. Die Seite bekam so einen waagerechten Scrollbalken, den
 * kein sichtbares Element erklaerte. */
.app-wx-hour {
    position: relative;
    flex: 0 0 calc((100% - (var(--wx-hours) - 1) * .25rem) / var(--wx-hours));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    padding: .5rem .15rem;
    border-radius: var(--app-radius-sm);
    background: var(--app-surface-2);
    scroll-snap-align: start;
    font-size: .78rem;
}

/* Die laufende Stunde ist die einzige, die kein „gleich" meint. */
.app-wx-hour.is-now {
    background: color-mix(in srgb, var(--app-accent) 12%, transparent);
    color: var(--app-accent);
}

.app-wx-hour-time { color: var(--app-text-mute); }
.app-wx-hour.is-now .app-wx-hour-time { color: inherit; }

/* `min-height` aus demselben Grund wie unten bei der Regenwahrscheinlichkeit:
 * die Zellen fuer Sonnenauf- und -untergang (CLAUDE.md 9i.4) tragen hier
 * nichts, und ohne die reservierte Zeile waeren sie niedriger als ihre
 * Nachbarn — der Streifen wackelte beim Scrollen. */
.app-wx-hour-temp {
    min-height: 1.4em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Die Sonnenzelle hebt sich ab, ohne aus der Reihe zu fallen: derselbe
 * Kasten, nur warm getoent — sie meint keine Stunde, sondern einen Zeitpunkt. */
.app-wx-hour--sun {
    background: color-mix(in srgb, var(--app-warm) 14%, transparent);
}

/* Immer da, auch leer: sonst haetten Stunden mit und ohne Regenangabe
 * verschiedene Hoehen und der Streifen wuerde zeilenweise wackeln. */
.app-wx-hour-prob {
    min-height: 1em;
    color: var(--app-hum);
    font-size: .7rem;
}

/* --- Der Niederschlags-Nowcast (CLAUDE.md 9i.12) ---------------------------
 *
 * **Balken als Flex-Kinder, Linie als SVG darueber.** Das ist kein Mischmasch,
 * sondern die Antwort auf CLAUDE.md 9a.1: ein SVG, das man in die Breite
 * zieht, wird gedehnt statt neu gezeichnet. Flex-Kinder teilen die Breite von
 * selbst auf und bleiben dabei rechteckig; das SVG darueber traegt nur einen
 * Streckenzug, dessen Strichstaerke `vector-effect` festhaelt. Damit braucht
 * die Kachel kein JavaScript — die Seite kommt sonst ohne aus (9i.8).
 *
 * Die beiden waagerechten Hilfslinien (50 % und die Grundlinie) stehen als
 * Hintergrund und nicht als Markup: zwei leere `<span>` fuer zwei Striche
 * waeren Knoten ohne Aufgabe.
 */

.app-rain-plot {
    position: relative;
    height: 6.5rem;
    /* Platz fuer die beiden Achsenbeschriftungen, die ausserhalb stehen. */
    margin: .2rem 2.7rem .35rem 2.3rem;
    background-image:
        linear-gradient(var(--app-border), var(--app-border)),
        linear-gradient(var(--app-border), var(--app-border));
    background-size: 100% 1px, 100% 1px;
    background-position: 0 50%, 0 100%;
    background-repeat: no-repeat;
}

.app-rain-axis {
    position: absolute;
    color: var(--app-text-mute);
    font-size: .62rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.app-rain-axis--prob { left: -2.3rem; width: 2rem; text-align: right; }
.app-rain-axis--amt  { right: -2.7rem; width: 2.4rem; text-align: left; }

/* Auf der Linie sitzend, nicht darueber: die Beschriftung gehoert zur Marke. */
.app-rain-axis--top  { top: 0; transform: translateY(-50%); }
.app-rain-axis--mid  { top: 50%; transform: translateY(-50%); }
.app-rain-axis--zero { top: 100%; transform: translateY(-50%); }

.app-rain-bars {
    display: flex;
    align-items: flex-end;
    gap: 1px;
    height: 100%;
}

.app-rain-bar {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 2px 2px 0 0;
    background: var(--app-hum);
}

/* Schnee bleibt in Zentimetern und bekommt deshalb eine eigene Farbe — die
 * Legende sagt, welche Groesse der Balken fuehrt (CLAUDE.md 9i.7). */
.app-rain-bar--snow { background: var(--app-frost); }

.app-rain-line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.app-rain-line path {
    fill: none;
    stroke: var(--app-warm);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* **Die Marken sitzen absolut, nicht per `space-between`.** Verteilt haette
 * jede Marke ausser der mittleren einen Versatz von ihrem eigenen Zeitpunkt —
 * `justify-content` verteilt Kaesten, keine Punkte, und der Versatz waechst mit
 * der Textbreite. Eine Zeitachse, deren Marken nicht ueber ihren Zeitpunkten
 * stehen, ist genau die Art stiller Ungenauigkeit, die niemand nachmisst.
 * Die beiden aeusseren bleiben buendig: mittig gesetzt ragten sie zur Haelfte
 * aus der Kachel. */
.app-rain-ticks {
    position: relative;
    height: 1.1rem;
    margin: 0 2.7rem .5rem 2.3rem;
    color: var(--app-text-mute);
    font-size: .68rem;
    font-variant-numeric: tabular-nums;
}

.app-rain-ticks span {
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap;
}

.app-rain-ticks span:first-child { transform: none; }
.app-rain-ticks span:last-child  { transform: translateX(-100%); }

.app-rain-legend {
    margin-bottom: .35rem;
}

/* --- Die 7-Tage-Vorschau --------------------------------------------------- */

.app-wx-days {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-wx-dayrow {
    display: grid;
    grid-template-columns: 3.2rem 1.6rem 2.6rem 2.4rem minmax(2rem, 1fr) 2.4rem;
    align-items: center;
    gap: .5rem;
    padding: .55rem 0;
}

/* Die Zeile **ist** der Knopf in den Tagesdialog (CLAUDE.md 9i.14) — deshalb
 * traegt der Knopf selbst das Raster oben, statt eines um die Spalten herum.
 * Ein `<button>` bringt Rahmen, Hintergrund, eigene Schrift und eine mittige
 * Ausrichtung mit; alle vier muessen weg, damit die Zeile aussieht wie die
 * unklickbare daneben. */
.app-wx-dayrow--open {
    width: 100%;
    padding-inline: .3rem;
    margin-inline: -.3rem;
    border: 0;
    border-radius: var(--app-radius-sm);
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.app-wx-dayrow--open:hover,
.app-wx-dayrow--open:focus-visible {
    background: var(--app-surface-2);
}

.app-wx-dayrow-name { font-size: .88rem; }

.app-wx-dayrow-icon {
    display: flex;
    justify-content: center;
}

.app-wx-dayrow-prob,
.app-wx-dayrow-min,
.app-wx-dayrow-max {
    font-variant-numeric: tabular-nums;
    font-size: .88rem;
    text-align: right;
}

/* Dieselbe Farbe wie die Regenwahrscheinlichkeit im Stundenstreifen
 * (`.app-wx-hour-prob`) — nicht gedaempft grau, sondern als Regenwert erkennbar. */
.app-wx-dayrow-prob { color: var(--app-hum); font-size: .8rem; }
.app-wx-dayrow-min { color: var(--app-text-mute); }
.app-wx-dayrow-max { font-weight: 600; }

/* Der Aufklapper ueber den fernen Tagen (Spezifikation 9i.5c). In den meisten
 * Faellen reichen sieben Tage; fuenfzehn Zeilen schoben auf dem Telefon alles
 * Uebrige unter den Falz. Bauform und Idiome wie beim Warn-Banner — dasselbe
 * `<details>`, dasselbe gedrehte Chevron, kein eigenes Skript. */
.app-wx-more > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .35rem;
    padding: .5rem .3rem;
    border-top: 1px solid var(--app-border);
    color: var(--app-text-mute);
    font-size: .84rem;
    cursor: pointer;
    list-style: none;   /* Firefox */
}

.app-wx-more > summary::-webkit-details-marker { display: none; }

.app-wx-more > summary:hover,
.app-wx-more > summary:focus-visible {
    color: var(--app-text);
}

.app-wx-more-chevron {
    display: flex;
    transition: transform .15s ease;
}

.app-wx-more[open] .app-wx-more-chevron { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
    .app-alert-chevron,
    .app-wx-more-chevron {
        transition: none;
    }
}

/* Tag 8 bis 16 (Spezifikation 9i.5b). **Gedaempft, nicht ausgegraut:** die
 * Werte sind da und stimmen, sie sind nur unsicherer. Ein Grau, das nach
 * „deaktiviert" aussieht, waere die falsche Aussage.
 *
 * Die Temperaturspur behaelt ihre Farbe — sie ist die eigentliche Auskunft
 * dieser Zeilen, und ein blasser Balken waere schwerer abzulesen als ein
 * blasser Wochentag. */
.app-wx-dayrow--far .app-wx-dayrow-name,
.app-wx-dayrow--far .app-wx-dayrow-min,
.app-wx-dayrow--far .app-wx-dayrow-max {
    color: var(--app-text-mute);
    font-weight: 500;
}

.app-wx-dayrow--far .app-wx-dayrow-icon { opacity: .65; }

/* Die zweite Rasterzeile: Sonnenstunden, Wind, Regenmenge (Spezifikation
 * 9i.5a). Sie spannt ueber **alle** Spalten — drei weitere Spalten waeren bei
 * 393 px nicht unterzubringen, und eine Zeile, die auf dem Telefon umbricht,
 * zerreisst das Raster aller sieben Tage.
 *
 * `flex-wrap` statt fester Spalten, weil die Teile fehlen duerfen: an einem
 * trockenen Tag steht keine Regenmenge, und die uebrigen sollen dann
 * zusammenruecken statt eine Luecke zu lassen. */
.app-wx-dayrow-extra {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: .05rem .75rem;
    margin-top: -.2rem;
    color: var(--app-text-mute);
    font-size: .74rem;
    font-variant-numeric: tabular-nums;
}

.app-wx-dayrow-extra > span {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

/* Die Icons gedaempft: sie sind die Beschriftung des Werts, nicht der Wert. */
.app-wx-dayrow-extra svg { opacity: .7; }

/* Die Spur ist grau und traegt die gemeinsame Skala aller sieben Tage; der
 * gefuellte Abschnitt ist die Spanne dieses Tages, eingefaerbt mit der
 * Temperaturskala als **fliessendem** Verlauf (CLAUDE.md 10.1). Harte
 * Bandkanten saehen hier nach Messgrenzen aus, die es nicht gibt. */
.app-wx-dayrow-track {
    position: relative;
    height: .4rem;
    border-radius: 999px;
    background: var(--app-surface-2);
    border: 1px solid var(--app-border);
}

.app-wx-dayrow-fill {
    position: absolute;
    top: -1px;
    bottom: -1px;
    border-radius: 999px;
}

/* --- Skalenbalken mit Positionspunkt (CLAUDE.md 10.6) ---------------------
 *
 * Die Farbstopps sitzen auf der **Bandmitte**, nicht an der Bandgrenze — so
 * gehen die Baender ineinander ueber, statt an ihren Grenzen zu stossen. Nur
 * die aeussersten Enden bleiben auf kurzer Strecke flach.
 */

.app-scale {
    position: relative;
    height: .45rem;
    margin-top: .7rem;
    border-radius: 999px;
}

.app-scale-dot {
    position: absolute;
    top: 50%;
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    background: var(--app-surface);
    border: 2px solid var(--app-text);
    transform: translate(-50%, -50%);
}

/* Taupunkt und absolute Feuchte unter der Feuchte-Skala (CLAUDE.md 9i.11).
 * Die Auszeichnung selbst kommt aus base.css — hier steht nur der Abstand,
 * damit die Zeile nicht an der Skala klebt. */
.app-tile .app-climate-values {
    margin-top: .55rem;
}

/* Luftfeuchte (CLAUDE.md 10.3): sehr trocken, trocken, ideal, feucht,
 * sehr feucht. */
.app-scale--hum {
    background: linear-gradient(90deg,
        var(--app-hum-vdry) 0%, var(--app-hum-vdry) 15%,
        var(--app-warm) 35%, var(--app-good) 50%,
        var(--app-cold) 65%, var(--app-hum-vhumid) 85%, var(--app-hum-vhumid) 100%);
}

/* Luftqualitaet (CLAUDE.md 10.4), Skala 0–100 EAQI. */
.app-scale--aqi {
    background: linear-gradient(90deg,
        var(--app-good) 0%, var(--app-good) 10%,
        var(--app-aqi-yellow) 30%, var(--app-warm) 50%,
        var(--app-hot) 70%, var(--app-aqi-purple) 90%, var(--app-aqi-maroon) 100%);
}

/* UV (CLAUDE.md 10.5), Referenzwert 12 — die WHO-Farbfamilie deckt sich mit
 * den fuenf mittleren AQI-Toenen, deshalb keine eigenen Variablen. */
.app-scale--uv {
    background: linear-gradient(90deg,
        var(--app-good) 0%, var(--app-good) 12%,
        var(--app-aqi-yellow) 31%, var(--app-warm) 48%,
        var(--app-hot) 70%, var(--app-aqi-purple) 92%, var(--app-aqi-purple) 100%);
}

/* Pollenflug (Spezifikation 10.6a): drei Baender, jedes ein Drittel breit.
 *
 * Anders als bei AQI und UV traegt der Balken hier **keinen Wertebereich**,
 * sondern drei gleich breite Baender — die Schwellen sind je Pollenart
 * verschieden und spannen ueber Groessenordnungen, eine gemeinsame Werteachse
 * gibt es also gar nicht. Die Farbstopps sitzen trotzdem auf der Bandmitte
 * (17 / 50 / 83 %), damit die Uebergaenge fliessen wie bei den drei anderen
 * Skalen. Der vierte Ton der AQI-Familie fehlt bewusst: es gibt nur drei
 * belegte Stufen, und eine vierte Farbe suggerierte eine vierte Schwelle.
 */
.app-scale--pollen {
    background: linear-gradient(90deg,
        var(--app-good) 0%, var(--app-good) 17%,
        var(--app-warm) 50%,
        var(--app-hot) 83%, var(--app-hot) 100%);
}

/* Die uebrigen fliegenden Arten unter der Skala. Die staerkste steht schon in
 * der Wertzeile — hier stehen nur die weiteren, sonst doppelte die Liste die
 * Ueberschrift. */
.app-pollen-list {
    list-style: none;
    margin: .55rem 0 0;
    padding: 0;
    font-size: .78rem;
    color: var(--app-text-mute);
}

.app-pollen-list li {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    padding: .12rem 0;
}

/* Die Zahl in der Farbe des Fliesstexts, das Band gedaempft daneben: die Zahl
 * ist die Auskunft, Artname und Band sind ihre Beschriftung. */
.app-pollen-list b {
    font-weight: 600;
    color: var(--app-text);
    font-variant-numeric: tabular-nums;
}

/* Die Alltagsindizes (Paket 8.2) und der Feuerindex (Paket 8.4) haben je nach
 * Anzahl ihrer Zeilen (drei bzw. zwei) unterschiedlich viel Inhalt, aber
 * gleich hohe Kacheln (die Rasterzeile richtet sich nach der hoechsten). Bei
 * zwei Zeilen blieb sonst unten sichtbar Luft (Sichtung 2026-08-25) — zentriert
 * wirkt die kuerzere Liste absichtlich gesetzt statt angefangen. */
.app-tile-body:has(> .app-alltag-list) {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Die Alltagsindizes (Paket 8.2, Spezifikation 5.1b): drei Zeilen statt eines
 * einzelnen Werts, deshalb ohne `.app-tile-value` darueber — die Liste *ist*
 * der Kachelinhalt. */
.app-alltag-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .85rem;
}

.app-alltag-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: .3rem 0;
}

.app-alltag-list li + li {
    border-top: 1px solid var(--app-border);
}

.app-alltag-name {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--app-text-mute);
}

/* Die Stufe als Farbfläche hinter dem Text, nicht als Textfarbe (Sichtung
 * 2026-08-25): `--app-good`/`--app-warm`/`--app-hot` sind nur einmal in
 * `:root` definiert und auf die dunkle Fläche abgestimmt — als Textfarbe auf
 * hellem Grund lag der Kontrast bei 1,76:1 (Hellmodus, "mittel"), weit unter
 * lesbar. Als 26%-Beimischung hinter `var(--app-text)` liegt er in beiden
 * Schemata über 8:1 (gemessen), dasselbe Muster wie `.app-error`/`.app-notice`
 * in base.css. */
.app-alltag-stufe {
    font-weight: 600;
    padding: .1rem .5rem;
    border-radius: 999px;
}

/* Die Tagesbilanz — dieselbe Bauform in der Pollen- und in der
 * Bewoelkungskachel (Spezifikation 9i.15a und 9i.16). **Abgesetzt durch eine
 * Linie, nicht durch Farbe** — sie ist der einzige Satz der Kachel, der einen
 * anderen Zeitraum meint als alles darueber (Kalendertag gegen laufende
 * Stunde), und ohne die Trennung las er sich wie eine weitere Fussnote zum
 * aktuellen Wert.
 *
 * In der Textfarbe des Fliesstexts statt gedaempft wie `.app-tile-note`: der
 * Satz ist die Zusammenfassung, nicht die Randbemerkung. Eine eigene
 * Dunkelfassung braucht der Block nicht — beide Werte kommen aus Marken, die
 * `base.css` schon in beiden Schemata fuehrt. */
.app-tile-day {
    margin: .55rem 0 0;
    padding-top: .45rem;
    border-top: 1px solid var(--app-border);
    font-size: .82rem;
    color: var(--app-text);
}

/* Heute und morgen stehen **in einem** Block: die Trennlinie gehoert ueber das
 * Paar, nicht zwischen seine beiden Zeilen. Sie trennt „jetzt" von „die naechsten
 * beiden Tage", und das ist ein Schnitt, nicht zwei. */
.app-tile-day p {
    margin: 0;
}

/* **Beide Zeilen in derselben Farbe.** Ein gedaempftes „Morgen" haette den Tag
 * zur Fussnote gemacht — dabei ist er der Grund, warum die Zeile ueberhaupt da
 * ist: wer ein Medikament nimmt, entscheidet das am Vorabend. */
.app-tile-day p + p {
    margin-top: .2rem;
}

/* Im Winter ist die Bilanz der **einzige** Inhalt der Kachel: nichts fliegt
 * jetzt, nichts fliegt heute, „Zurzeit fliegt nichts." entfaellt als
 * Wiederholung. Dann trennte die Linie nichts mehr voneinander und stand als
 * Strich unter der Ueberschrift — im Bild sofort zu sehen, in keiner Pruefung.
 * Eine Trennlinie ohne zwei Seiten ist keine. */
.app-tile-day:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* --- Die Temperaturleiste des Tages (CLAUDE.md 9i.10) ---------------------
 *
 * Dieselbe Bauform wie die Skalen darueber — farbiger Balken, Positionspunkt —,
 * nur mit vier zusaetzlichen Marken. Die Beschriftungen stehen **ausserhalb**
 * des Balkens: die gemessenen darueber, die vorhergesagten darunter. Deshalb
 * traegt der Rahmen den Platz fuer beide Zeilen und nicht der Balken selbst.
 */
/* Die Hoehe traegt beide Beschriftungszeilen — und sie traegt sie **ungleich**:
 * oben stehen Wert **und** Uhrzeit der gemessenen Extreme, unten nur der Wert
 * der vorhergesagten (die haben keinen Zeitpunkt, CLAUDE.md 9i.10). Beide Zonen
 * sind deshalb gerechnet statt geschaetzt: Markenlaenge + Abstand +
 * Beschriftungshoehe. Der Balken sitzt entsprechend auf `--app-tr-oben` und
 * nicht auf 50 % — mittig gesetzt muesste er die groessere der beiden Zonen
 * nach unten spiegeln und liesse dort Luft stehen, die niemand braucht.
 *
 * Vorher stand hier eine feste Hoehe, in der die obere Beschriftung keinen
 * Platz hatte: sie ragte rund eine Zeile aus dem Rahmen heraus und zehrte den
 * Aussenabstand darueber vollstaendig auf. Angemeldet steht in genau dieser
 * Zeile die Standortangabe (CLAUDE.md 9i.13) — dort beruehrten sich beide.
 * Ein Fehler, den keine Zahl meldet und der nur im Bild steht. */
.app-temprange {
    /* Marke + Abstand + Beschriftung. Die Beschriftungshoehe ist die gemessene
     * Zeilenhoehe, nicht die Schriftgroesse: zwei Zeilen aus .72rem und .64rem
     * ergeben gerendert rund 2,1rem, eine Zeile rund 1,1rem. */
    --app-tr-oben: calc(1.4rem + .1rem + 2.2rem);
    --app-tr-unten: calc(1.4rem + .1rem + 1.2rem);
    position: relative;
    height: calc(var(--app-tr-oben) + var(--app-tr-unten));
    margin: .9rem 0 .2rem;
}

/* `margin-top` der Skalen wuerde den Balken hier verschieben, deshalb
 * ausdruecklich zurueckgesetzt. */
.app-temprange-bar {
    position: absolute;
    top: var(--app-tr-oben);
    left: 0;
    right: 0;
    margin: 0;
    transform: translateY(-50%);
}

.app-temprange-mark {
    position: absolute;
    top: var(--app-tr-oben);
    width: 2px;
    height: 1.4rem;
    background: var(--app-text);
    opacity: .75;
    transform: translate(-50%, -50%);
    border-radius: 1px;
}

.app-temprange-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    color: var(--app-text-mute);
    white-space: nowrap;
}

/* Gemessen steht oben, Vorhersage unten — die Marke selbst reicht dafuer nur
 * zur jeweiligen Seite ueber den Balken hinaus, sonst liesse sich nicht
 * erkennen, zu welcher Beschriftung sie gehoert. */
.app-temprange-mark--oben {
    transform: translate(-50%, -100%);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Die Uhrzeit steht unter ihrem Wert und leiser als er: sie beantwortet die
 * Rueckfrage („20 °C? jetzt sind doch 15!"), sie ist nicht die Auskunft
 * selbst. */
.app-temprange-time {
    display: block;
    font-size: .64rem;
    opacity: .8;
}

.app-temprange-mark--oben .app-temprange-label { bottom: 100%; margin-bottom: .1rem; }

.app-temprange-mark--unten {
    transform: translate(-50%, 0);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.app-temprange-mark--unten .app-temprange-label { top: 100%; margin-top: .1rem; }

/* --- Windrose -------------------------------------------------------------- */

.app-wx-compass {
    display: flex;
    justify-content: center;
}

.app-compass-svg {
    width: 100%;
    max-width: 8.5rem;
    height: auto;
}

.app-compass-ring {
    fill: none;
    stroke: var(--app-border);
    stroke-width: 1.5;
}

.app-compass-tick {
    stroke: var(--app-border);
    stroke-width: 1.5;
}

.app-compass-cd {
    fill: var(--app-text-mute);
    font-size: 9px;
}

.app-compass-arrow {
    stroke: var(--app-accent);
    stroke-width: 2;
    stroke-linecap: round;
}

.app-compass-head { fill: var(--app-accent); }

/* Die Herkunft des Windes — der kleine Punkt auf dem Ring. Gedaempft, weil
 * der Pfeil die Aussage traegt. */
.app-compass-dot {
    fill: var(--app-text-mute);
    opacity: .55;
}

.app-compass-value {
    fill: var(--app-text);
    font-size: 20px;
    font-weight: 600;
}

.app-compass-unit {
    fill: var(--app-text-mute);
    font-size: 9px;
}

/* --- Sonnenbogen ----------------------------------------------------------- */

.app-wx-sun {
    display: flex;
    justify-content: center;
}

.app-sun-svg {
    width: 100%;
    max-width: 12rem;
    height: auto;
}

.app-sun-path {
    fill: none;
    stroke: var(--app-border);
    stroke-width: 2;
    stroke-dasharray: 3 4;
}

.app-sun-ground {
    stroke: var(--app-border);
    stroke-width: 1;
}

.app-sun-dot {
    fill: var(--app-wx-day);
    stroke: var(--app-surface);
    stroke-width: 2;
}

.app-wx-sun-times {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .3rem;
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}

.app-wx-sun-times b {
    display: block;
    color: var(--app-text-mute);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* --- Die Detailansicht ----------------------------------------------------- */

.app-wx-dialog {
    width: min(46rem, calc(100vw - 2rem));
    padding: 1.25rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    background: var(--app-surface);
    color: var(--app-text);
    box-shadow: var(--app-shadow);
}

.app-wx-dialog::backdrop {
    background: rgba(8, 11, 16, .55);
}

.app-wx-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.app-wx-dialog-head h2 {
    margin: 0;
    font-size: 1.15rem;
}

.app-wx-dialog-hint {
    margin: .1rem 0 1rem;
    color: var(--app-text-mute);
    font-size: .82rem;
}

/* Die Zeichenflaeche des Dialogs ist hoeher als die der Kacheln — hier ist
 * Platz, und sieben Punkte auf 240px waeren eine flache Linie. */
.app-wx-dialog-body {
    --app-chart-h: 17rem;
}

/* Die Legende erbt Abstaende und Listen-Reset von `.app-chart-legend`
 * (base.css).
 *
 * **Zwei Bauformen mit einer Gestaltung.** Im Dialog traegt jedes `<li>` seit
 * 0.16.0 einen `<button>` — die Legende filtert dort (Spezifikation 9i.7a).
 * Die Legende der Regenkachel bleibt reine Auskunft und darum ein blosses
 * `<li>`. Beide sehen gleich aus: dass eine davon klickbar ist, sagt der
 * Zeiger und der Fokusring, nicht eine zweite Form.
 *
 * Der Knopf steht **im** `<li>`, nicht an seiner Stelle: ein `<button>` als
 * direktes Kind eines `<ul>` ist ungueltiges HTML — der Fehler, den die
 * Dashboard-Legende bis heute traegt (CLAUDE.md 10.8). */
.app-wx-dialog-legend li,
.app-wx-dialog-legend button,
.app-rain-legend li {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .6rem;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    color: var(--app-text-mute);
    font-size: .82rem;
}

/* Das `<li>` ist jetzt nur noch Huelle: Rahmen, Polster und Farbe sitzen am
 * Knopf darin, sonst laege ein Rahmen im anderen. */
.app-wx-dialog-legend li:has(> button) {
    padding: 0;
    border: 0;
}

.app-wx-dialog-legend button {
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}

/* Die abgewaehlten Reihen: durchgestrichen und gedaempft, dieselbe Sprache wie
 * am Dashboard (base.css). Sie stehen weiter da, weil sie der Weg zurueck
 * sind — ein verschwundener Eintrag liesse sich nicht wieder einschalten. */
.app-wx-dialog-legend button[aria-pressed="false"] {
    text-decoration: line-through;
    opacity: .55;
}

.app-wx-dialog-list {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-wx-dialog-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--app-border);
    font-variant-numeric: tabular-nums;
}

.app-wx-dialog-list li:last-child { border-bottom: 0; }

/* --- Der Tagesdialog (CLAUDE.md 9i.14) -------------------------------------
 *
 * Derselbe Dialog wie oben, nur breiter: er traegt sechs Diagramme statt
 * einem, und auf einem Monitor stehen zwei davon nebeneinander.
 *
 * `max-height` und `overflow: auto` sind hier Pflicht und nicht Kosmetik: der
 * Inhalt ist laenger als jeder Bildschirm, und ein `<dialog>` scrollt von
 * selbst nicht — es waere schlicht unten abgeschnitten.
 */
.app-wx-dialog--day {
    width: min(64rem, calc(100vw - 2rem));
    max-height: calc(100vh - 3rem);
    overflow: auto;
}

.app-wx-day {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.app-wx-day-head {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.app-wx-day-icon {
    display: flex;
    flex-shrink: 0;
    color: var(--app-wx-day);
}

.app-wx-day-temps {
    margin: 0;
    font-size: 1.6rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.app-wx-day-temps span {
    font-size: 1.1rem;
    opacity: .75;
}

.app-wx-day-cond {
    margin: .1rem 0 0;
    color: var(--app-text-mute);
    font-size: .85rem;
}

/* Sonne, Tageslaenge, Sonnenstunden. `auto-fit` statt einer festen Spaltenzahl,
 * weil je nach Quelle zwei oder drei Angaben dastehen — und weil eine der
 * beiden Zeilen fehlen darf, ohne dass eine Luecke bleibt. */
.app-wx-day-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
    gap: .5rem .9rem;
    margin: 0;
    padding: .7rem .9rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface-2);
}

.app-wx-day-facts dt {
    color: var(--app-text-mute);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.app-wx-day-facts dd {
    margin: .1rem 0 0;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* Die Kennzeichen. Voller Listen-Reset, weil es ein Flex-Container ist: ein
 * `<li>` behaelt sonst seinen Aufzaehlungspunkt auch als Flex-Kind, und das
 * `padding-left` des Browser-Stylesheets schiebt die ganze Reihe (CLAUDE.md
 * 10.8). */
.app-wx-day-flags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Die Farbe benennt die Art des Hinweises, nicht seine Dringlichkeit — sie
 * kommt aus den Rollen, die dieselben Groessen im Rest der Seite tragen
 * (CLAUDE.md 10.1/10.3): Regen blau wie die Luftfeuchte, Schnee und Frost im
 * Frost-Ton, heiss im Hitze-Ton. Neue Farbwerte gibt es dafuer nicht. */
.app-wx-day-flag {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    padding: .3rem .7rem;
    border: 1px solid color-mix(in srgb, var(--flag-color, var(--app-border)) 45%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--flag-color, var(--app-border)) 14%, transparent);
    font-size: .82rem;
}

.app-wx-day-flag span { color: var(--app-text-mute); }

.app-wx-day-flag--rain  { --flag-color: var(--app-hum); }
.app-wx-day-flag--snow  { --flag-color: var(--app-frost); }
.app-wx-day-flag--frost { --flag-color: var(--app-frost); }
.app-wx-day-flag--muggy { --flag-color: var(--app-hum-vhumid); }
.app-wx-day-flag--hot   { --flag-color: var(--app-hot); }
.app-wx-day-flag--cold  { --flag-color: var(--app-cold); }
.app-wx-day-flag--fog   { --flag-color: var(--app-avgline); }

/* Zwei Spalten, sobald es dafuer reicht. `min(24rem, 100%)` und nicht
 * `24rem`: eine einzelne Spur darf auf dem Telefon unter ihr bevorzugtes Mass
 * schrumpfen, sonst reisst sie die Seite waagerecht auf — genau der Fund aus
 * CLAUDE.md 9d.9. */
.app-wx-day-plots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
    gap: 1rem;
}

.app-wx-day-plot h3 {
    margin: 0 0 .3rem;
    font-size: .9rem;
    font-weight: 600;
}

/* Niedriger als die 17rem der Kachel-Ansicht: hier stehen sechs davon
 * untereinander, und vierundzwanzig Stundenwerte brauchen keine halbe Seite. */
.app-wx-day-plot .app-chart {
    --app-chart-h: 11rem;
}

.app-wx-day-plot .app-chart-legend {
    margin-bottom: .2rem;
}

.app-wx-day-plot .app-chart-legend li {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .55rem;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    color: var(--app-text-mute);
    font-size: .76rem;
}

/* --- Quellen und Fehler ---------------------------------------------------- */

.app-wx-sources {
    margin-top: var(--app-gap);
    color: var(--app-text-mute);
    font-size: .78rem;
}

.app-wx-sources p {
    margin: 0 0 .2rem;
}

.app-err {
    margin: 0 0 var(--app-gap);
    padding: .6rem .85rem;
    border-radius: var(--app-radius);
    background: color-mix(in srgb, var(--app-hot) 14%, transparent);
}

/* Der entschaerfte Fall: ein Abruf-Fehler bei vorhandenem Cache — der Bereich
 * bleibt mit den letzten bekannten Werten sichtbar (CLAUDE.md 10.10). */
.app-err.hint {
    background: color-mix(in srgb, var(--app-warm) 14%, transparent);
}

/* Die Kachel „Mond" (Spezifikation 9k). Die Scheibe kommt aus
   `himmel_scheibe_svg()`; ihre beiden Farben stehen als `--app-moon-*` in
   `base.css` — dieselbe Scheibe steht auf der Seite „Sonne & Mond", und zwei
   Definitionen derselben Farbe driften auseinander. */
.app-wx-moon {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.app-wx-moon .app-moon-disc {
    display: block;
    flex: none;
}

.app-wx-moon .app-moon-dark {
    fill: var(--app-moon-dark);
}

.app-wx-moon .app-moon-lit {
    fill: var(--app-moon-lit);
}

.app-wx-moon-lit {
    margin: 0;
}

.app-wx-moon .app-tile-note {
    margin-top: .1rem;
}