/* Babyphony - die Nacht.

   WARUM EINE EIGENE DATEI: Der Webspace nimmt ueber FTP nur Dateien bis
   rund 15 000 Byte an (siehe web/README.md). Die Grenze gilt je Datei,
   nicht in Summe. Drei kleine Dateien statt einer grossen heisst: Ein
   gescheiterter Upload nimmt der Seite hoechstens einen Abschnitt, nie die
   gesamte Gestaltung. Eingebunden in functions.php, abhaengig von
   'babyphony', damit die Reihenfolge stimmt.

   WAS HIER PASSIERT: Das ist der eine mutige Moment der Seite. Ueberall
   sonst ist sie hell, ruhig und zurueckhaltend; an dieser Stelle kippt sie
   randlos in die Nacht - weil genau dann das Produkt benutzt wird. Ein
   Telefon liegt im Kinderzimmer, eines am Bett der Eltern, dazwischen
   liegt eine Wohnung. Diese Entfernung ist hier keine Behauptung im Text,
   sondern die Anordnung: zwei Geraete an den beiden Enden des Bildes, und
   nichts dazwischen ausser einer Linie.

   Danach wird es wieder hell. Ein zweiter dunkler Abschnitt anderswo naehme
   diesem seine Wirkung. */

/* Der Abschnitt bricht aus der Bahn aus - nicht ueber negative
   Aussenabstaende, sondern indem er im Raster von .inhalt ueber alle drei
   Spalten laeuft. So kann dabei kein waagerechter Ueberlauf entstehen. */
.inhalt > .nacht {
    grid-column: voll-anfang / voll-ende;
    margin-top: clamp(4.5rem, 12vh, 8rem);
    background: var(--nacht);
    color: var(--himmel);
}

/* Daemmerung und Morgen.

   Ein Farbverlauf als Schmuck hat auf dieser Seite nichts zu suchen. Diese
   beiden sind kein Schmuck, sondern der Uebergang selbst: Die Seite faellt
   nicht mit einer Kante in die Nacht, sie daemmert hinein und wieder
   heraus. Ohne sie waere der Wechsel ein Bruch, mit ihnen ist er eine
   Tageszeit. */
.nacht::before,
.nacht::after {
    content: "";
    display: block;
    height: clamp(7rem, 18vh, 13rem);
}

/* Der Weg geht ueber das Periwinkle, nicht geradewegs von Creme nach
   Nachtblau: Zwischen den beiden Endpunkten liegt sonst ein grauer Bereich,
   den es am Himmel nicht gibt. Mit der Zwischenstufe ist es der Farbverlauf
   eines Abends. */
.nacht::before {
    background: linear-gradient(var(--wolke), var(--himmel) 42%, var(--nacht));
}

.nacht::after {
    background: linear-gradient(var(--nacht), var(--himmel) 58%, var(--wolke));
}

/* In der Nacht traegt die Tinte nicht - der Fokusrahmen bekommt das
   Periwinkle, damit die Tastaturbedienung auch hier sichtbar bleibt. */
.nacht a:focus-visible { outline-color: var(--himmel); }

/* ===== Die angeheftete Szene =====
   .szenenlauf ist der hohe Traeger, .szene bleibt darin stehen. Solange
   .szenenlauf den Bildschirm vollstaendig ausfuellt, haengt die Szene fest -
   und genau ueber diese Strecke waechst die Verbindungslinie. */

.szene { padding-block: 1.5rem; }

.szene-innen {
    /* width: 100% ist kein Fuellwert. Sobald die Szene angeheftet ist, wird
       .szene zu einem Raster - und ein Rasterelement mit margin-inline: auto
       schrumpft auf seine Inhaltsbreite, statt die Spalte auszufuellen. Die
       beiden Telefone ruecken dann zusammen, und die Entfernung, um die es
       hier geht, waere dahin. */
    width: 100%;
    max-width: 76rem;
    margin-inline: auto;
    padding-inline: var(--rand);
}

.szene-titel {
    margin: 0 0 clamp(2rem, 5vh, 3.5rem);
    max-width: 18ch;
    color: var(--wolke);
}

/* Die Anordnung ist eine Reihe: Telefon - Linie - Telefon. Schmal wird
   daraus eine Spalte, und die Linie steht senkrecht. In beiden Faellen
   stimmt die Lesereihenfolge im Quelltext mit der sichtbaren ueberein.

   --bild ist die Hoehe der Aufnahmen. Sie richtet sich nach der
   Bildschirmhoehe, damit die angeheftete Szene auch auf flachen Fenstern
   vollstaendig hineinpasst. Die Breite rechnet sich daraus ueber das
   Seitenverhaeltnis der Aufnahmen (540 zu 1212). Das ist der Grund, warum
   sie ausgerechnet wird und nicht einfach "auto" bleibt: So ist die Spalte
   genau so breit wie das Telefon - und die Linie setzt Kante an Kante an,
   statt in der Luft zu enden. */

/* Die Hoehe der Aufnahme; die Breite folgt daraus (540:1212). 48svh waren zu
   wenig: Auf einem 1440er Bildschirm ergab das 185 Pixel breite Telefone in
   einer 1120 Pixel breiten Buehne - zwei Briefmarken mit viel Leere dazwischen.
   Die Aufnahmen sind der Beleg dieser Seite, nicht ihre Dekoration. */
.szene { --bild: min(72svh, 40rem); }

.geraete {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Die beiden Aufnahmen standen an den aeusseren Raendern einer 1120 Pixel
   breiten Buehne, die Verbindungslinie dazwischen war ein Stummel in viel
   Leere. Enger gestellt wird aus dem Stummel eine Strecke - und die ist der
   Sinn des Bildes: Diese beiden Telefone sprechen miteinander. */
@media (min-width: 48rem) {
    .geraete { max-width: 46rem; margin-inline: auto; }
}

.geraet img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid rgb(194 204 235 / .22);
    border-radius: 1.15rem;
}

/* Die Aufnahmen bekommen keinen aufgemalten Telefonrahmen: Sie bringen
   ihre eigene Statusleiste mit, ein fremdes Gehaeuse drumherum waere eine
   kleine Unwahrheit auf einer Seite, die davon lebt, keine zu erzaehlen.
   Die Haarlinie ist nur die Kante des Bildschirms. */

.beschriftung {
    margin: 1.1rem 0 0;
    color: var(--dunst);
    font-size: .9375rem;
    line-height: 1.5;
    text-align: center;
    text-wrap: pretty;
}

.beschriftung b {
    display: block;
    color: var(--himmel);
}

/* ===== Die Verbindungslinie =====
   Grundzustand: Sie ist da. Ohne Bewegung, ohne JavaScript, in jedem
   Browser. Alles Weitere ist Zugabe - wer reduzierte Bewegung verlangt,
   sieht die fertige Linie und verliert keine Aussage. */

.strecke i {
    display: block;
    background: var(--himmel);
}

@media (min-width: 48rem) {
    .geraete {
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
    }

    .geraet { width: calc(var(--bild) * 540 / 1212); }

    /* Kein Abstand zu den Telefonen: Die Linie soll sie beruehren. Sie
       waechst in die gesamte Luecke hinein - je breiter das Fenster, desto
       weiter liegen die beiden Zimmer auseinander. */
    .strecke {
        flex: 1 1 4rem;
        height: 1px;
        margin-top: calc(var(--bild) / 2);
    }

    .strecke i { height: 1px; transform-origin: left center; }
}

@media (max-width: 47.999rem) {
    /* Schmal stehen die Telefone uebereinander - und die Linie laeuft
       senkrecht. Zwei Aufnahmen nebeneinander waeren je rund 130 Pixel
       breit; von der Oberflaeche, die sie zeigen sollen, bliebe nichts. */
    .geraet { width: min(14rem, 100%); }

    .strecke {
        width: 1px;
        height: 4.5rem;
        margin: 1.75rem 0;
    }

    .strecke i { width: 1px; height: 100%; transform-origin: center top; }
}

@media (prefers-reduced-motion: no-preference) {
    /* Rueckfall fuer Browser ohne scrollgesteuerte Animation: Die Linie
       zeichnet sich einmal beim Laden. */
    .strecke i { animation: strecke-quer 1.2s .4s ease-out both; }

    @media (max-width: 47.999rem) {
        .strecke i { animation-name: strecke-hoch; }
    }

    /* Ab hier ist Platz fuer das Anheften. Der Traeger ist knapp zwei
       Bildschirme hoch; die Szene steht darin fest, waehrend die Linie
       waechst. 190svh waren zu viel: Der Abschnitt wurde ueber fuenf
       Bildschirme hoch und bestand groesstenteils aus leerer Flaeche. Auf schmalen Geraeten und bei reduzierter Bewegung bleibt es
       beim gewoehnlichen Fluss - eine Szene, die einen Bildschirm lang
       stillsteht, ohne dass sich etwas tut, waere nur Wartezeit. */
    @media (min-width: 48rem) {
        .szenenlauf { height: 108svh; }

        .szene {
            position: sticky;
            top: 0;
            min-height: 100svh;
            display: grid;
            align-content: center;
        }

        @supports (animation-timeline: view()) {
            .szenenlauf { view-timeline: --lauf block; }

            /* 'contain' ist genau die Strecke, auf der der Traeger den
               Bildschirm vollstaendig ausfuellt - also genau die Strecke,
               auf der die Szene angeheftet steht. Die Linie waechst mit
               dem Daumen und ist fertig, wenn die Szene sich loest. */
            .strecke i {
                animation-name: strecke-quer;
                animation-duration: auto;
                animation-delay: 0s;
                animation-timing-function: linear;
                animation-fill-mode: both;
                animation-timeline: --lauf;
                animation-range: contain;
            }
        }
    }
}

@keyframes strecke-quer { from { transform: scaleX(0); } }
@keyframes strecke-hoch { from { transform: scaleY(0); } }

/* ===== Was in der Nacht noch gesagt wird ===== */

.nachtwort {
    max-width: var(--bahn);
    margin-inline: auto;
    padding-inline: var(--rand);
    padding-top: clamp(3rem, 9vh, 6rem);
}

.nachtwort h2 { color: var(--wolke); }
.nachtwort p { color: var(--dunst); }
.nachtwort p b { color: var(--himmel); }

.nacht-quelle {
    max-width: 48ch;
    font-size: .875rem;
}

/* ===== Drei Schritte =====
   Ziffern, weil es hier tatsaechlich eine Abfolge gibt: Erst die Rolle,
   dann der Code, dann steht die Verbindung. Nirgends sonst auf der Seite
   stehen Nummern. */

.schritte {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    margin: 2.5rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: schritt;
}

.schritte li {
    counter-increment: schritt;
    margin: 0;
    color: var(--dunst);
    font-size: .9375rem;
    line-height: 1.55;
}

.schritte li b {
    display: block;
    color: var(--himmel);
    font-size: 1.0625rem;
    margin: .5rem 0 .3rem;
}

.schritte li::before {
    content: counter(schritt);
    display: block;
    padding-bottom: .6rem;
    border-bottom: 1px solid rgb(194 204 235 / .25);
    color: var(--wolke);
    font-size: 1.4rem;
    font-weight: 620;
    letter-spacing: -.02em;
}