/*
 * Die Seite „Klima & Rekorde" (Spezifikation 9l).
 *
 * Eigene Datei und nicht in `weather.css`: die Seite teilt mit dem Dashboard
 * nur die Karte, und `weather.css` laedt auf jeder Dashboard-Ansicht mit.
 *
 * Die dunklen Werte stehen zweimal (CLAUDE.md 3.6): einmal hinter
 * `prefers-color-scheme` mit `:root:not([data-theme="hell"])`, einmal hinter
 * `:root[data-theme="dunkel"]`. CSS kann das nicht zusammenfassen;
 * `tests/test_ansicht.php` haelt beide Bloecke gegeneinander.
 */

:root {
    /* Das Klimaband und seine Mittellinie. Bewusst blass: es ist der
       Hintergrund, gegen den die eigenen Werte gelesen werden, nicht der
       Gegenstand. */
    --app-clim-band:  rgba(74, 168, 255, .20);
    --app-clim-mean:  #2f6fd0;
    --app-clim-own:   #d97757;
    --app-clim-now:    #8b93a1;
    --app-clim-accent: #8b93a1;
    --app-clim-grid:  rgba(93, 107, 149, .18);
    /* Die beiden Richtungen der Abweichung. Nicht `--app-hot`/`--app-cold`:
       die stehen fuer eine Temperatur, hier steht eine Differenz. */
    --app-clim-warm:  #c2410c;
    --app-clim-cool:  #1d68c4;
    /* Die Mitte der Abweichungsskala und die Schraffur der nicht
       aufgezeichneten Tage — beide gehoeren zum Jahresraster (9l.9). */
    --app-clim-zero:   #e9edf3;
    --app-clim-luecke: rgba(93, 107, 149, .18);
}

/*
 * Zwei Kurznamen fuer dieselben zwei Farben. Sie stehen **nur hier** und
 * brauchen keine dunkle Zweitfassung: eine Custom Property wird erst an ihrer
 * Verwendungsstelle aufgeloest, `var(--hm-w)` liefert also von selbst den Wert
 * von `--app-clim-warm`, der im jeweiligen Schema gilt.
 *
 * Der Grund ist die Groesse: jedes Feld des Jahresrasters traegt diesen Namen
 * zweimal inline. Ueber 366 Felder sind das mit den langen Namen rund 6 KB
 * mehr HTML.
 */
:root {
    --hm-w: var(--app-clim-warm);
    --hm-k: var(--app-clim-cool);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="hell"]) {
        --app-clim-band:  rgba(110, 168, 255, .16);
        --app-clim-mean:  #6ea8ff;
        --app-clim-own:   #f0906a;
        --app-clim-now:    #98a2b3;
        --app-clim-accent: #98a2b3;
        --app-clim-grid:  rgba(152, 162, 179, .20);
        --app-clim-warm:  #f59e6b;
        --app-clim-cool:  #7cb2ff;
        --app-clim-zero:   #2c3341;
        --app-clim-luecke: rgba(152, 162, 179, .18);
    }
}

:root[data-theme="dunkel"] {
    --app-clim-band:  rgba(110, 168, 255, .16);
    --app-clim-mean:  #6ea8ff;
    --app-clim-own:   #f0906a;
    --app-clim-now:    #98a2b3;
    --app-clim-accent: #98a2b3;
    --app-clim-grid:  rgba(152, 162, 179, .20);
    --app-clim-warm:  #f59e6b;
    --app-clim-cool:  #7cb2ff;
    --app-clim-zero:   #2c3341;
    --app-clim-luecke: rgba(152, 162, 179, .18);
}

.app-clim-grid {
    display: grid;
    gap: var(--app-gap);
    grid-template-columns: 1fr;
}

/*
 * Dieselbe Falle wie auf der Himmelseite: ein Grid-Element hat
 * `min-width: auto` und waechst auf seine Min-Content-Breite. Hier setzt sie
 * die Vergleichstabelle, die mit drei Spalten und langen Ueberschriften
 * („Mittel 1991–2020") deutlich ueber 393 px misst. Ohne diese Zeile schiebt
 * die Karte das Dokument breiter als den Viewport.
 */
.app-clim-grid > * {
    min-width: 0;
}

/* Ab hier ist Platz fuer zwei Spalten. Gemessen: darunter bricht die
   Kenntage-Tabelle in der Kopfzeile um. */
@media (min-width: 56rem) {
    .app-clim-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /*
         * **`align-items: start` ist hier kein Feinschliff.** Ohne die Zeile
         * streckt Grid jede Karte auf die Hoehe ihrer Zeile — und weil die
         * linke Spalte die Balkenliste der naechsten sechzehn Tage traegt,
         * standen „Der Jahresgang" und „Eigene Rekorde" als Karten mit
         * mehreren hundert Pixeln Leere darunter. Im Bild sofort zu sehen und
         * in keiner Pruefung; gemessen am 2026-08-20 bei 1512 px.
         */
        align-items: start;
        /*
         * **Der Jahresgang bekommt die ganze Breite, und das ist kein
         * Geschmack.** Er traegt 366 Tage: in einer halben Spalte (556 px)
         * liegen 1,5 px auf einem Tag, und die eigenen Tagesmittel
         * verschmelzen zu einem Band. Ueber die volle Breite (1232 px) sind es
         * 3,4 px — dieselben Punkte werden zu einer Wolke, in der man einzelne
         * Tage sieht. Gemessen am 2026-08-20 bei 1512 px Fensterbreite.
         *
         * Die Ueberschrift der Seite bleibt trotzdem oben links: ein Diagramm
         * ueber der `h1` waere ein Titelbild, und das ist diese Seite nicht.
         */
        grid-template-areas:
            "today   days"
            "degree  degree"
            "skill   skill"
            "year    year"
            "raster  raster"
            "cast    records"
            "history history";
    }

    .app-clim-today      { grid-area: today; }
    .app-clim-year-card  { grid-area: year; }
    /* Volle Breite aus demselben Grund wie der Jahresgang: einunddreissig
       Spalten in einer halben Spalte (556 px) ergaeben 17 px breite Felder,
       ueber die volle Breite (1232 px) sind es 38. */
    .app-clim-hm-card    { grid-area: raster; }
    .app-clim-days       { grid-area: days; }
    /* Volle Breite direkt unter den Kenntagen, die Heizjahre darin
       nebeneinander. Ohne eigenes Feld landete die Karte in einer neuen
       letzten Zeile unten links, 2700 px von den Kenntagen entfernt und mit
       einer leeren rechten Spalte daneben (Sichtung 2026-09-29, 1512 px). */
    .app-clim-degree     { grid-area: degree; }
    /* Jede neue Karte braucht hier ein Feld — ohne faellt sie in eine neue
       letzte Zeile unten links (Befund zur Gradtag-Karte, 2026-09-29). */
    .app-clim-skill      { grid-area: skill; }
    .app-clim-degree-years,
    .app-clim-skill-body {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--app-gap);
        align-items: start;
    }
    .app-clim-forecast   { grid-area: cast; }
    .app-clim-records    { grid-area: records; }
    .app-clim-history    { grid-area: history; }
}

.app-clim-sub {
    margin: -.25rem 0 var(--app-gap);
    color: var(--app-text-mute);
    font-size: .875rem;
}

.app-clim-source {
    margin: var(--app-gap) 0 0;
    color: var(--app-text-mute);
    font-size: .8125rem;
    line-height: 1.5;
}

/* --- Der Urteilsblock ------------------------------------------------------ */

.app-clim-verdict {
    border-left: 3px solid var(--app-clim-accent);
    padding: .1rem 0 .1rem .75rem;
    margin: 0 0 var(--app-gap);
}

.app-clim-delta {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 650;
    line-height: 1.3;
}

.app-clim-rank {
    margin: .15rem 0 0;
    color: var(--app-text-mute);
    font-size: .875rem;
}

.app-clim--high,
.app-clim--record-high { --app-clim-accent: var(--app-clim-warm); }
.app-clim--low,
.app-clim--record-low  { --app-clim-accent: var(--app-clim-cool); }

.app-clim--high .app-clim-delta,
.app-clim--record-high .app-clim-delta { color: var(--app-clim-warm); }
.app-clim--low .app-clim-delta,
.app-clim--record-low .app-clim-delta  { color: var(--app-clim-cool); }

/* Der Rekordfall bekommt zusaetzlich Gewicht — er ist die einzige Stufe, die
   ausserhalb der dreissig Jahre liegt und damit wirklich eine Nachricht. */
.app-clim--record-high .app-clim-rank,
.app-clim--record-low .app-clim-rank {
    font-weight: 600;
    color: var(--app-text);
}

/* --- Tabellen -------------------------------------------------------------- */

.app-clim-compare td,
.app-clim-daytable td {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/*
 * **Die Spaltenkoepfe muessen mit ihren Werten fluchten.** `.app-table th`
 * setzt links aus, die Werte stehen rechts — dadurch stand „Aufgezeichnet"
 * ueber dem linken Rand seiner Spalte und die 65 am rechten, mit rund 250 px
 * dazwischen. Im Bild sah das aus, als gehoerten Kopf und Zahl nicht zusammen.
 * Der Zeilenkopf (`th[scope="row"]`) bleibt links: er beschriftet die Zeile
 * und ist Text, keine Zahl.
 */
.app-clim-compare thead th,
.app-clim-daytable thead th {
    text-align: right;
}

.app-clim-daytable th small,
.app-clim-daytable th[scope="row"] small,
.app-clim-daytable td small {
    display: block;
    color: var(--app-text-mute);
    font-size: .75rem;
    font-weight: 400;
    /*
     * **Die Kleinschrift darf umbrechen, der Rest der Tabelle nicht.**
     * `.app-table` setzt `white-space: nowrap` fuer jede Zelle — richtig fuer
     * Zahlen, die man nicht in zwei Zeilen lesen will. „im ganzen Jahr 23,8"
     * ist aber ein Satz, und ungebrochen hielt er seine Spalte allein auf
     * 127 px.
     *
     * Aufgefallen mit der vierten Spalte (Spezifikation 9l.4): auf dem iPhone
     * brauchte die Tabelle 400 px bei 351 verfuegbaren, und „Erwartet" stand
     * vollstaendig ausserhalb des Bildes. Ohne die vierte Spalte reichte es
     * knapp — die Regel war die ganze Zeit zu streng, nur fiel es an nichts
     * auf.
     */
    white-space: normal;
}

.app-clim-daytable td b {
    font-size: 1.05rem;
}

/* --- Heizgradtage (Spezifikation 9l.10) ------------------------------------ */

/* Je Heizjahr eine Tabelle; der Titel steht links wie eine Zwischenueberschrift. */
.app-clim-degree-years,
.app-clim-skill-body {
    display: grid;
    gap: var(--app-gap);
}

/* Gemessen traegt fett plus Kleinschrift, Monat und Erwartet oft nur eine
   Zeile — mittig ausgerichtet sass „6 Kd" sichtbar hoeher als „Juli". */
.app-clim-degree th,
.app-clim-degree td {
    vertical-align: baseline;
}

.app-clim-degree caption,
.app-clim-skill caption {
    caption-side: top;
    text-align: left;
    font-weight: 600;
    padding: 0 .35rem .35rem;
}

/* Die Summe hebt sich durch Flaeche und Strich ab, nicht durch Gewicht: die
   Messwerte sind in jeder Zeile schon fett, und eine Linie in der Farbe der
   Zeilentrenner las sich im Dunkeln nicht als Summenstrich. */
/* --- Prognosegüte (Spezifikation 9l.11) ------------------------------------ */

.app-clim-skill-leads {
    margin: .6rem 0 0;
    color: var(--app-text-mute);
    font-size: .875rem;
}

/* Zwei Spalten mit je „vorhergesagt 15,8" darunter liefen auf dem iPhone zu
   einer Wortkette zusammen (Sichtung 2026-09-29) — mehr Luft links je Wert. */
.app-clim-daytable.app-clim-skill-days td {
    /* Doppelte Klasse: das allgemeine Polster der Tagestabellen steht weiter
       unten und gewann sonst bei gleicher Spezifitaet. */
    padding-left: 1.25rem;
}

.app-clim-degree-sum th,
.app-clim-degree-sum td {
    border-top: 2px solid var(--app-text-mute);
    background: var(--app-surface-2);
    font-weight: 600;
}

/* --- Der Jahresgang -------------------------------------------------------- */

/*
 * Nur noch die Hoehe der Zeichenflaeche — gezeichnet wird in
 * `assets/js/klima.js` ueber `chart.js`.
 *
 * **Hier standen bis 0.15.0 zehn von Hand gemessene Media-Query-Stufen**: fuenf
 * fuer die Achsenschrift, fuenf fuer den Punktradius. Das Diagramm war
 * serverseitiges SVG mit festem Koordinatensystem, ueber `width: 100%` auf die
 * Kartenbreite gezogen — dabei skalierte alles mit, und die Stufen hielten
 * Schrift und Punkte dagegen. `chart.js` zeichnet in echten Pixeln und misst
 * nach jeder Groessenaenderung neu; die Stufen sind ersatzlos entfallen, und
 * mit ihnen die SVG-Klassen `.app-clim-band`, `-mean`, `-own`, `-rule`,
 * `-month`, `-now` und `-axis`. Die **Farbvariablen** bleiben: `klima.js`
 * reicht sie als `var(--app-clim-…)` an das Diagramm weiter, und die Legende
 * darunter benutzt dieselben.
 *
 * **Die Hoehe waechst mit der Breite.** Die Karte nimmt die volle Breite ein;
 * mit den 240 px aus `--app-chart-h` waere der Jahresgang dort ein flacher
 * Streifen, in dem die eigenen Tagespunkte im Band verschwimmen — und genau
 * die zu unterscheiden ist der Zweck der Karte.
 */
.app-clim-year {
    height: clamp(15rem, 24vw, 26rem);
}

/* --- Das Jahresraster (9l.9) ------------------------------------------------
 *
 * Zwoelf Zeilen, einunddreissig Spalten, ein Feld je Tag. **Alle vier
 * Ansichten stecken zugleich im HTML** — als Custom Properties am Feld —, und
 * umgeschaltet wird ueber zwei `data`-Attribute am Abschnitt. Kein JavaScript
 * rechnet dabei eine Farbe: die Temperaturskala hat genau eine Umsetzung, und
 * die steht in PHP (`wx_temp_blend()`, geprueft in `pruefen.sh` Schritt 9).
 * Ohne Skript bleibt die serverseitig gesetzte Vorgabe stehen — Tageshoch als
 * Messwert.
 */

/*
 * Die Jahre sind **Links** und keine Knoepfe — sie fuehren auf dieselbe Seite
 * mit anderem Jahr. `.app-pills` gestaltet nur `button`; die drei Zeilen hier
 * geben den Links dieselbe Form, damit die Leiste nicht aus zwei verschiedenen
 * Bauteilen besteht.
 */
.app-clim-hm-jahre {
    margin-bottom: .75rem;
}

.app-clim-hm-jahre a {
    display: inline-block;
    padding: .3rem .75rem;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    color: var(--app-text-mute);
    font-size: .85rem;
    text-decoration: none;
}

.app-clim-hm-jahre a[aria-current="page"] {
    background: var(--app-accent);
    border-color: var(--app-accent);
    color: var(--app-on-accent);
}

/* Bezugsrahmen des Tooltips. Er haengt am **Abschnitt** und nicht am
   Scroll-Container: dessen `overflow-x` schnitte ihn oben ab. */
.app-clim-hm-card {
    position: relative;
}

.app-clim-hm-tools {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.5rem;
    margin-bottom: .75rem;
}

/*
 * **Kein `min-width` auf dem Raster.** Genau daran ist der Jahresgang schon
 * einmal gescheitert: mit `min-width` in einem Scroll-Container endete er auf
 * dem Telefon im August, ohne sichtbares Zeichen dafuer. Die Felder schrumpfen
 * stattdessen mit — auf 303 px Kartenbreite bleiben rund 8 px je Tag, und das
 * Muster ist damit noch zu lesen. Der Container bleibt trotzdem scrollfaehig,
 * falls eine Schriftgroesse die Monatsspalte breiter macht als gedacht.
 */
.app-clim-hm-scroll {
    overflow-x: auto;
}

.app-clim-hm {
    display: grid;
    grid-template-columns: auto repeat(31, minmax(0, 1fr));
    gap: 2px;
    align-items: center;
}

.app-clim-hm-tagnr,
.app-clim-hm-monat {
    color: var(--app-text-mute);
    font-size: .625rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.app-clim-hm-tagnr {
    text-align: center;
}

/*
 * Unter 60 rem bleibt nur jede fuenfte Tageszahl stehen. Gemessen bei 393 px
 * Fensterbreite: 303 px Karte, davon rund 8 px je Spalte — einunddreissig
 * zweistellige Zahlen brauchten das Dreifache. `visibility` und nicht
 * `display`, damit die Spalte ihre Breite behaelt.
 */
@media (max-width: 60rem) {
    .app-clim-hm-tagnr--fein {
        visibility: hidden;
    }
}

.app-clim-hm-monat {
    padding-right: .35rem;
    text-align: right;
    white-space: nowrap;
}

/* Ein Feld ist quadratisch — dieselbe Flaeche fuer jeden Tag, egal wie breit
   die Karte ist. Die Hoehe des Rasters ergibt sich daraus von selbst.

   Die drei Zustaende teilen sich diese Regel, tragen aber **keine** gemeinsame
   Zusatzklasse: ein `app-clim-hm-zelle ` mehr je Feld waren ueber 372 Felder
   7,4 KB HTML, und die Seite wird unkomprimiert ausgeliefert. */
.app-clim-hm-feld,
.app-clim-hm-luecke,
.app-clim-hm-kein {
    aspect-ratio: 1;
    border-radius: 2px;
}

/*
 * **Drei Zustaende, drei Darstellungen.** Ein Tag ohne Aufzeichnung darf weder
 * wie ein Messwert aussehen (dann log das Raster) noch wie ein Tag, den es
 * nicht gibt. Die Schraffur ist als Muster erkennbar und traegt trotzdem keine
 * Farbe der Skala.
 */
.app-clim-hm-kein {
    background: none;
}

/*
 * Die Schraffur ist bewusst **leise**. In der ersten Sichtung trug sie
 * rgba(…,.28) bei 1 px auf 4 px und fuellte damit neun der zwoelf Zeilen so
 * kraeftig, dass das Auge sie als Inhalt las — die 127 aufgezeichneten Tage
 * standen daneben wie ein Nachtrag. Sie muss erkennbar sein und sonst nichts.
 */
.app-clim-hm-luecke {
    background: repeating-linear-gradient(45deg,
        var(--app-clim-luecke) 0 1px, transparent 1px 5px);
}

/* Vier Regeln, vier Ansichten. Die Reihenfolge ist Absicht: die spezifischeren
   Kombinationen stehen hinten. */
.app-clim-hm-feld {
    background: var(--m1, var(--app-clim-zero));
}

.app-clim-hm-card[data-groesse="min"] .app-clim-hm-feld {
    background: var(--m2, var(--app-clim-zero));
}

.app-clim-hm-card[data-skala="abw"] .app-clim-hm-feld {
    background: color-mix(in srgb, var(--f1, var(--hm-w)) var(--p1, 0%), var(--app-clim-zero));
}

.app-clim-hm-card[data-skala="abw"][data-groesse="min"] .app-clim-hm-feld {
    background: color-mix(in srgb, var(--f2, var(--hm-w)) var(--p2, 0%), var(--app-clim-zero));
}

/* --- Die beiden Legenden --------------------------------------------------- */

.app-clim-hm-legende {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .75rem;
    color: var(--app-text-mute);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}

.app-clim-hm-balken {
    flex: 1;
    height: .5rem;
    border-radius: 999px;
}

/* Divergierend um die Mitte — eine andere Skala als die der Messwerte, und das
   ist kein Geschmack: eine Differenz hat eine Richtung, eine Temperatur nicht. */
.app-clim-hm-balken--abw {
    background: linear-gradient(90deg,
        var(--hm-k), var(--app-clim-zero) 50%, var(--hm-w));
}

/* Es steht immer genau eine Legende da — die zum eingestellten Massstab. */
.app-clim-hm-card[data-skala="wert"] [data-hm-legende="abw"],
.app-clim-hm-card[data-skala="abw"] [data-hm-legende="wert"] {
    display: none;
}

/* --- Der Tooltip am Feld ----------------------------------------------------
 *
 * Er ersetzt den `title`-Tooltip des Browsers, sobald `klima.js` laeuft: der
 * kommt erst nach einer Sekunde, laesst sich nicht gestalten und erscheint auf
 * einem Telefon ueberhaupt nicht. Ohne Skript bleibt der `title` stehen und
 * damit die Auskunft — nur langsamer.
 *
 * Farben aus `chart.css`: es ist derselbe Tooltip wie im Jahresgang darueber,
 * und zwei verschiedene Tooltips auf einer Seite waeren eine Behauptung ueber
 * einen Unterschied, den es nicht gibt.
 */
.app-clim-hm-tip {
    position: absolute;
    z-index: 2;
    padding: .35rem .55rem;
    border-radius: 8px;
    background: var(--app-chart-tip-bg);
    color: var(--app-chart-tip-fg);
    box-shadow: var(--app-shadow);
    font-size: .8rem;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    /* Der Tooltip darf den Zeiger nicht abfangen, sonst flackert er unter der
       Maus zwischen sichtbar und unsichtbar. */
    pointer-events: none;
}

/* Die Zeile, die zur eingestellten Groesse gehoert. Der Tooltip nennt Hoch und
   Tief immer beide — das Fettgedruckte sagt, welches gerade gefaerbt ist. */
.app-clim-hm-tip .is-aktiv {
    font-weight: 600;
}

.app-clim-hm-zeichen {
    margin-top: .5rem;
}

.app-clim-hm-zeichen li.app-clim-hm-zeichen--luecke::before {
    background: repeating-linear-gradient(45deg,
        var(--app-clim-luecke) 0 1px, transparent 1px 5px);
    border: 1px solid var(--app-border);
}

.app-clim-legend {
    list-style: none;
    margin: .75rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    font-size: .8125rem;
    color: var(--app-text-mute);
}

.app-clim-legend li {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.app-clim-legend li::before {
    content: "";
    width: .9rem;
    height: .55rem;
    border-radius: 2px;
    flex: none;
    background: currentColor;
}

/*
 * **Der Klassenname allein genuegt hier nicht.** `.app-clim-legend li::before`
 * oben hat zwei Klassen plus ein Element und schlaegt damit jedes
 * `.app-clim-legend--own::before` — in der ersten Sichtung standen alle vier
 * Legendenfarben als dasselbe graublaue Rechteck da, obwohl im Stylesheet vier
 * verschiedene Regeln stehen. Im Bild sofort zu sehen, in keiner Pruefung.
 */
.app-clim-legend li.app-clim-legend--band::before  { background: var(--app-clim-band); border: 1px solid var(--app-clim-mean); }
.app-clim-legend li.app-clim-legend--mean::before  { background: var(--app-clim-mean); height: .18rem; }
.app-clim-legend li.app-clim-legend--own::before   { background: var(--app-clim-own); width: .55rem; height: .55rem; border-radius: 50%; }
.app-clim-legend li.app-clim-legend--today::before { background: var(--app-clim-now); width: .18rem; height: .8rem; }
.app-clim-legend li.app-clim-legend--none::before  { display: none; }

.app-clim-legend--own span {
    color: inherit;
}

/* --- Die Abweichungsbalken ------------------------------------------------- */

.app-clim-bars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.app-clim-bars li {
    display: grid;
    grid-template-columns: 3.2rem 1fr 4.2rem;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
}

.app-clim-bar-day {
    color: var(--app-text-mute);
}

/*
 * Die Nulllinie liegt in der **Mitte** der Spur, und die Balken wachsen von
 * dort nach rechts oder links. Ein Balken, der links am Rand begaenne, machte
 * aus „zwei Kelvin zu kalt" optisch dasselbe wie aus „zwei Kelvin zu warm".
 */
.app-clim-bar-track {
    position: relative;
    display: block;
    height: .7rem;
    border-radius: var(--app-radius-sm);
    background: var(--app-surface-2);
    overflow: hidden;
}

.app-clim-bar-track::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--app-clim-grid);
}

.app-clim-bar-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    background: var(--app-clim-warm);
    border-radius: 0 var(--app-radius-sm) var(--app-radius-sm) 0;
}

.app-clim-bar-fill--neg {
    left: auto;
    right: 50%;
    background: var(--app-clim-cool);
    border-radius: var(--app-radius-sm) 0 0 var(--app-radius-sm);
}

.app-clim-bar-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--app-text-mute);
}

.app-clim--high .app-clim-bar-value,
.app-clim--record-high .app-clim-bar-value { color: var(--app-clim-warm); }
.app-clim--low .app-clim-bar-value,
.app-clim--record-low .app-clim-bar-value  { color: var(--app-clim-cool); }

/* --- Rekorde --------------------------------------------------------------- */

.app-clim-record-list {
    display: grid;
    gap: var(--app-gap);
    grid-template-columns: 1fr;
}

@media (min-width: 34rem) {
    .app-clim-record-list {
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    }
}

.app-clim-record h3 {
    margin: 0 0 .15rem;
    font-size: 1rem;
}

.app-clim-facts {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.app-clim-facts > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    border-bottom: 1px solid var(--app-border);
    padding-bottom: .35rem;
}

.app-clim-facts > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.app-clim-facts dt {
    color: var(--app-text-mute);
    font-size: .8125rem;
}

.app-clim-facts dd {
    margin: 0;
    text-align: right;
    font-size: .875rem;
}

.app-clim-facts dd small {
    display: block;
    color: var(--app-text-mute);
    font-size: .75rem;
}

/* --- Derselbe Kalendertag frueherer Jahre ---------------------------------- */

.app-clim-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.app-clim-history-list li {
    background: var(--app-surface-2);
    border-radius: var(--app-radius-sm);
    padding: .45rem .7rem;
    display: flex;
    flex-direction: column;
    min-width: 5rem;
}

.app-clim-history-list span {
    color: var(--app-text-mute);
    font-size: .75rem;
}

.app-clim-history-list b {
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.app-clim-history-list small {
    color: var(--app-text-mute);
    font-size: .7rem;
}

/*
 * Der Standortversatz. Abgesetzt und nicht als `app-tile-note`: er ist keine
 * Fussnote zur Tabelle, sondern die Bedingung, unter der man sie lesen darf.
 */
.app-clim-offset {
    margin: var(--app-gap) 0 0;
    padding: .6rem .75rem;
    border-radius: var(--app-radius-sm);
    background: var(--app-surface-2);
    color: var(--app-text-mute);
    font-size: .8125rem;
    line-height: 1.55;
}

/*
 * **`.app-table` setzt `white-space: nowrap` auf jede Zelle.** Fuer eine
 * Tabelle mit kurzen Werten ist das richtig; hier stehen in den Kopfzeilen
 * ganze Wendungen („Mittel 1991–2020", „Tageshoch ab 25 °C"), und die machten
 * die Tabelle unumbrechbar breit.
 *
 * Gemessen bei 393 px Fensterbreite: die Vergleichstabelle mass 383 px in einer
 * 353 px breiten Karte, das Dokument wurde dadurch 443 px breit. Ein
 * Scroll-Container waere fuer dreissig Pixel die falsche Antwort — die
 * Ueberschrift darf schlicht umbrechen. Die **Werte** behalten `nowrap`: eine
 * umgebrochene Zahl mit Einheit ist schwerer zu lesen als eine schmale Spalte.
 */
.app-clim-compare th,
.app-clim-daytable th {
    white-space: normal;
}

.app-clim-compare th,
.app-clim-compare td,
.app-clim-daytable th,
.app-clim-daytable td {
    padding-left: .35rem;
    padding-right: .35rem;
}

/*
 * **Die vierte Spalte macht das Telefon eng — hier und sonst nirgends.**
 *
 * Nachgemessen am iPhone (393 px, Karteninneres 305 px): mit „Modell" braucht
 * die Tabelle 318 px und steht 13 px über den Kartenrand hinaus. **Der
 * Überlauf-Check sah das nicht** — 390 px passen noch unter die 393 des
 * Fensters, nichts scrollt, und abgeschnitten wird erst am Rand der Karte. Zu
 * sehen war es allein im Bild; genau die Fehlerklasse aus CLAUDE.md 11.
 *
 * Zwei Schritte, beide nachgerechnet: die Kopfschrift von .92rem auf .82rem
 * (die drei Wortköpfe schrumpfen zusammen um rund 25 px) und das Polster von
 * .35rem auf .25rem (vier Spalten, zwei Seiten, rund 13 px). Das reicht mit
 * Luft, ohne die Zahlen kleiner zu machen — **die Werte behalten ihre Größe**,
 * sie sind der Inhalt der Tabelle.
 *
 * Die Grenze liegt bei 26rem und nicht höher: schon das iPad hat Platz im
 * Überfluss, und eine Stufe, die auch dort greift, verengt ohne Not.
 *
 * **Diese Regeln müssen hinter dem Block darüber stehen.** In der ersten
 * Fassung standen sie zweihundert Zeilen weiter oben — gleiche Spezifität,
 * frühere Stelle, also wirkungslos. Die gemessene Breite blieb dabei exakt
 * dieselbe, was der einzige Hinweis war.
 */
.app-clim-daytable-wrap {
    overflow-x: auto;
}

@media (max-width: 26rem) {
    .app-clim-daytable thead th {
        font-size: .82rem;
    }

    .app-clim-compare th,
    .app-clim-compare td,
    .app-clim-daytable th,
    .app-clim-daytable td {
        padding-left: .25rem;
        padding-right: .25rem;
    }
}

.app-clim-daytable th[scope="row"] small {
    white-space: normal;
}