/*
 * Die Seite „Sonne & Mond" (Spezifikation 9k).
 *
 * Eigene Datei und nicht in `weather.css`: die Seite teilt mit dem Dashboard
 * nur die Karte und den Sonnenbogen, alles Uebrige gehoert ihr allein — 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 {
    /* Die vier Daemmerungsstufen, von Tag nach Nacht. */
    --app-tw-day:    #ffd88a;
    --app-tw-civil:  #f0a868;
    --app-tw-naut:   #6f7fc0;
    --app-tw-astro:  #3b4472;
    --app-tw-blue:   #4a6bd0;
    --app-tw-gold:   #e8a33d;

    /*
     * **Gold als Text braucht einen eigenen Wert.** Die Toene darueber sind
     * Signalfarben fuer die Randstreifen der Daemmerungsliste — dort stehen
     * sie als Flaeche, und ihr Kontrast ist unkritisch. Als Schrift auf
     * hellem Grund taugt `--app-tw-gold` nicht: gemessen am 2026-08-23
     * erreicht #e8a33d auf der getoenten Wendezeile (#f2f6fd) nur
     * **1,99 : 1**. Dieser Wert kommt auf **4,86 : 1** und auf weissem Grund
     * auf 5,27 — beides ueber den 4,5, die 12-px-Text braucht. Im
     * Dunkelmodus bleibt es beim hellen Gold, das dort 6,48 erreicht.
     */
    --app-tw-gold-text: #96601a;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="hell"]) {
        --app-tw-day:    #d9a94f;
        --app-tw-civil:  #c07b46;
        --app-tw-naut:   #5763a0;
        --app-tw-astro:  #2b3358;
        --app-tw-blue:   #5f7ede;
        --app-tw-gold:   #d99a3c;
        --app-tw-gold-text: #d99a3c;
    }
}

:root[data-theme="dunkel"] {
    --app-tw-day:    #d9a94f;
    --app-tw-civil:  #c07b46;
    --app-tw-naut:   #5763a0;
    --app-tw-astro:  #2b3358;
    --app-tw-blue:   #5f7ede;
    --app-tw-gold:   #d99a3c;
    --app-tw-gold-text: #d99a3c;
}

/* Zwei Spalten, sobald Platz ist. Die Bruchbreite ist gemessen und nicht
   geschaetzt: unter 56rem stehen die Faktenlisten so eng, dass Bezeichnung und
   Wert in derselben Zeile umbrechen. */
.app-sky-grid {
    display: grid;
    gap: var(--app-gap);
    grid-template-columns: 1fr;
}

/*
 * **Ohne diese Zeile ist die Seite auf dem Telefon 672 px breit.** Ein
 * Grid-Element hat `min-width: auto` und waechst damit auf seine
 * Min-Content-Breite — und die wird hier vom Phasenband des Monats bestimmt,
 * das mit dreissig Scheiben 799 px misst. Dass das Band `overflow-x: auto`
 * traegt, hilft nicht: es scrollt dann zwar in sich, gibt seine Inhaltsbreite
 * aber trotzdem an die Karte weiter, weil es selbst kein Grid-Element ist.
 *
 * Gemessen bei 393 px Fensterbreite: vorher `scrollWidth` 692 gegen
 * `clientWidth` 393, danach beide 393.
 */
.app-sky-grid > * {
    min-width: 0;
}

/* Aus demselben Grund: die Tabellen der 16 Tage duerfen in ihrer Karte
   scrollen, nicht die Seite breit machen. */
.app-sky-list,
.app-sky-sunlist {
    overflow-x: auto;
}

@media (min-width: 56rem) {
    /*
     * **Eine Spalte je Gestirn.** Links alles zur Sonne, rechts alles zum
     * Mond — wer wissen will, wann es hell wird, liest eine Spalte von oben
     * nach unten und muss nicht zwischen den Seiten wechseln.
     *
     * Die frueheren Plaetze („mond sonne / zyklus sonne / naechte naechte /
     * sliste liste") ordneten nach Hoehe statt nach Thema: die Sonnenkarte
     * stand rechts oben, ihre 16-Tage-Liste aber links unten, und dazwischen
     * lag quer die Naechteliste. Im Bild las sich das als Durcheinander,
     * obwohl jede Karte fuer sich richtig sass.
     *
     * Die Sonnenkarte ist mit Bogen, Daemmerung und Lichtstunden rund
     * dreimal so hoch wie Mond oder Phasen; sie steht deshalb allein in der
     * ersten Zeile, waehrend rechts Mond und Phasen uebereinander auf
     * ungefaehr dieselbe Hoehe kommen.
     *
     * **Die Naechte stehen in der Mondspalte**, nicht quer unter beiden. Sie
     * verrechnen zwar beide Welten — astronomische Nacht, Mondstand,
     * Bewoelkung —, ihre Frage ist aber eine Mondfrage: wann ist es dunkel
     * *und* mondlos. Quer gestellt brauchten sie die volle Breite fuer eine
     * Liste, die mit der halben auskommt, und liessen neben der laengeren
     * Sonnenliste ein Loch von rund 370 px stehen.
     */
    .app-sky-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "sonne  mond"
            "sonne  zyklus"
            "sliste liste"
            "sliste naechte";
        align-items: start;
    }

    .app-sky-moon    { grid-area: mond; }
    .app-sky-cycle   { grid-area: zyklus; }
    .app-sky-sun     { grid-area: sonne; }
    .app-sky-nights  { grid-area: naechte; }
    .app-sky-sunlist { grid-area: sliste; }
    .app-sky-list    { grid-area: liste; }
}

.app-sky h1,
.app-sky h2 {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1rem;
    font-size: 1.05rem;
}

.app-sky h3 {
    margin: 1.5rem 0 .6rem;
    font-size: .875rem;
    color: var(--app-text-mute);
    font-weight: 600;
}

/* --- Die Mondscheibe ------------------------------------------------------ */

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

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

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

.app-sky-moon-now {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.app-sky-phase {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
}

.app-sky-lit {
    margin: .25rem 0 0;
    font-size: 1.05rem;
}

.app-sky-lit span,
.app-sky-age {
    color: var(--app-text-mute);
    font-size: .875rem;
}

.app-sky-age {
    margin: .35rem 0 0;
}

/* --- Faktenlisten --------------------------------------------------------- */

.app-sky-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: .9rem 1.25rem;
    margin: 1.25rem 0 0;
}

.app-sky-facts div {
    min-width: 0;
}

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

.app-sky-facts dd {
    margin: .2rem 0 0;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.app-sky-facts small {
    display: block;
    margin-top: .15rem;
    color: var(--app-text-mute);
    font-size: .75rem;
    letter-spacing: 0;
    text-transform: none;
}

/* --- Die naechsten Phasen ------------------------------------------------- */

.app-sky-phases {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .75rem;
}

.app-sky-phases li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .75rem;
}

.app-sky-phase-name {
    font-weight: 600;
}

.app-sky-phase-time {
    color: var(--app-text-mute);
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/*
 * Das Phasenband des Monats — es **bricht um**, statt zu scrollen.
 *
 * Zuerst war es ein Scroll-Container. Im Bild sah man dann auch am Desktop nur
 * zwei Drittel des Monats: dreissig Scheiben brauchen rund 800 px, die Karte
 * hat 560. Ein Verlauf, dessen Ende man wegwischen muss, beantwortet die Frage
 * „wie sieht der Mond in zwei Wochen aus" nicht mehr. Umgebrochen steht der
 * ganze Monat da, auf dem Telefon eben in drei Reihen.
 */
.app-sky-band {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .3rem;
}

.app-sky-band li {
    flex: none;
    text-align: center;
    opacity: .75;
}

.app-sky-band li.is-today {
    opacity: 1;
}

.app-sky-band li.is-today .app-moon-disc {
    outline: 2px solid var(--app-accent);
    outline-offset: 2px;
    border-radius: 50%;
}

.app-sky-band span {
    display: block;
    margin-top: .2rem;
    font-size: .6875rem;
    color: var(--app-text-mute);
    font-variant-numeric: tabular-nums;
}

/* --- Daemmerung und Lichtstunden ------------------------------------------ */

.app-sky-twilight,
.app-sky-light {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .25rem;
}

.app-sky-twilight li,
.app-sky-light li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .4rem .6rem;
    border-radius: var(--app-radius-sm);
    background: var(--app-surface-2);
    font-size: .875rem;
    border-left: 3px solid var(--app-border);
}

.app-sky-twilight li span:last-child,
.app-sky-light li span:last-child {
    color: var(--app-text-mute);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.app-sky-tw--day          { border-left-color: var(--app-tw-day); }
.app-sky-tw--civil_am,
.app-sky-tw--civil_pm     { border-left-color: var(--app-tw-civil); }
.app-sky-tw--nautical_am,
.app-sky-tw--nautical_pm  { border-left-color: var(--app-tw-naut); }
.app-sky-tw--astronomical_am,
.app-sky-tw--astronomical_pm { border-left-color: var(--app-tw-astro); }

.app-sky-light--blue_am,
.app-sky-light--blue_pm     { border-left-color: var(--app-tw-blue); }
.app-sky-light--golden_am,
.app-sky-light--golden_pm   { border-left-color: var(--app-tw-gold); }

/* --- Die naechsten Naechte ------------------------------------------------ */

.app-sky-night-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .6rem;
}

.app-sky-night-list li {
    display: grid;
    grid-template-columns: 4.5rem minmax(4rem, 10rem) 1fr;
    align-items: center;
    gap: .75rem;
}

.app-sky-night-day {
    font-weight: 600;
    font-size: .875rem;
}

.app-sky-night-none {
    grid-column: 2 / -1;
    color: var(--app-text-mute);
    font-size: .8125rem;
}

.app-sky-night-bar {
    display: block;
    height: .55rem;
    border-radius: 999px;
    background: var(--app-surface-2);
    overflow: hidden;
}

.app-sky-night-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--app-moon-lit);
}

.app-sky-night-values {
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
    min-width: 0;
}

.app-sky-night-values small {
    display: block;
    color: var(--app-text-mute);
    font-size: .75rem;
}

@media (max-width: 34rem) {
    .app-sky-night-list li {
        grid-template-columns: 4.5rem 1fr;
    }

    .app-sky-night-values {
        grid-column: 1 / -1;
    }
}

/* Die Zeile mit der Vorhersage darin — abgesetzt von der Astronomie darueber,
   siehe den Kommentar an ihrer Stelle in `pages/himmel.php`. */
.app-sky-night-clear {
    color: var(--app-accent);
    font-weight: 600;
}

/* --- Die 16 Tage der Sonne ------------------------------------------------ */

/* Die Aenderung gegenueber dem Vortag steht unter der Tageslaenge und nicht
   daneben: nebeneinander waere die Spalte breiter als die drei anderen
   zusammen, und auf dem Telefon begaenne die Tabelle zu scrollen. */
.app-sky-sunlist td small {
    display: block;
    color: var(--app-text-mute);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}

/*
 * **Die Koepfe duerfen umbrechen, die Werte nicht** — dasselbe Muster wie in
 * den Klimatabellen (`klima.css`). Ein umgebrochener Messwert ist schwerer zu
 * lesen als eine schmale Spalte; eine Ueberschrift dagegen darf zweizeilig
 * stehen, und der Zeilenkopf „So, 23.8.2026" bricht dann nach dem Komma.
 *
 * Gemessen am 2026-08-23: ohne diese Zeile misst die Tabelle **443 px** und
 * damit 92 px mehr, als die Karte am iPhone (351 px) hergibt — die
 * Tageslaengenspalte, also gerade die neue, lag ausserhalb und war nur per
 * Wischen zu erreichen. Der Kommentar darueber nahm an, das sei durch die
 * zweizeilige Zelle schon erledigt; das stimmte nicht.
 */
.app-sky-sunlist th {
    white-space: normal;
}

/*
 * Darunter reicht der Kopfumbruch allein nicht. Gemessen bei 393 px:
 * mit Umbruch 413 px, zusaetzlich mit engerem Innenabstand 381 px, und erst
 * mit dem kleineren Spaltenkopf sind es **351 px** — genau die Kartenbreite.
 * Die Werte behalten dabei ihre Groesse; verkleinert wird nur, was ohnehin
 * Beschriftung ist. 34rem ist der im Projekt schon verwendete Umbruchpunkt.
 *
 * **Der zweite Bereich ist kein Schreibfehler.** Die Karte wird zweimal
 * schmal: einmal im schmalen Fenster und noch einmal in dem Augenblick, in
 * dem bei 56rem das Zweispaltenraster einsetzt und ihr die halbe Breite
 * nimmt. Gemessen: bei 895 px ist die Karte 785 px breit, bei 897 px nur
 * noch 383 — und die Tabelle braucht 413. Erst ab rund 957 px traegt die
 * halbe Spalte sie von allein; 61rem laesst dafuer etwas Luft.
 */
@media (max-width: 34rem), (min-width: 56rem) and (max-width: 61rem) {
    .app-sky-sunlist th,
    .app-sky-sunlist td {
        padding: .5rem .35rem;
    }

    .app-sky-sunlist thead th {
        font-size: .75rem;
    }
}

/*
 * Der Tag der Sonnenwende. Er traegt **beides** — eine getoente Zeile und die
 * Beschriftung: die Toenung allein sagt nur „hier ist etwas", und in der
 * Sichtung war sie neben den gestreiften Zeilen einer langen Tabelle kaum vom
 * Zeilenwechsel zu unterscheiden.
 */
.app-sky-sunlist tr.is-wende {
    background: var(--app-surface-2);
}

.app-sky-sunlist tr.is-wende th small {
    display: block;
    color: var(--app-tw-gold-text);
    font-size: .75rem;
    font-weight: 600;
}