/*
 * 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"
            "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; }
    .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;
}

/* --- 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: #fff;
}

/* 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;
}