/*
 * :le und la - oeffentliche Website (U13)
 *
 * Eine Datei, kein Build-Schritt, kein Framework, kein CDN, kein
 * Schriftdienst. Strato liefert statische Dateien und PHP; alles andere
 * waere ein Versprechen, das die Umgebung nicht halten kann. Ausser dem
 * Showreel-Rahmen auf einer Detailseite stellt diese Seite keine
 * einzige fremde Anfrage.
 *
 * HALTUNG
 *
 * Der freigegebene Entwurf: warmer Papiergrund, sehr dunkle Tinte, ein
 * einziges Gelb. Links steht eine ruhige Spalte, die auf jeder Seite
 * gleich bleibt - Wortmarke, Navigation, sonst nichts. Rechts laeuft der
 * Inhalt in grosszuegigen Abschnitten. Keine Karten, keine Schatten, keine
 * Rahmen: getrennt wird mit Haarlinien und mit Luft. Gross ist auf dieser
 * Seite nur zweierlei, die Ueberschriften und die Gesichter.
 *
 * DAS GELB
 *
 * #F2CE00 auf Papier hat 1,5:1. Als Text ist es damit unlesbar, und zwar
 * auch dann, wenn es im Entwurf hübsch aussieht. Es ist hier deshalb
 * ausschliesslich FLAECHE und LINIE: der Balken über dem Aufmacher, die
 * Unterstreichung eines Verweises, der gefuellte Knopf mit Tinte darauf
 * (12:1), der Punkt vor einem Navigationseintrag. Buchstaben in Gelb gibt
 * es nirgends. Dieselbe Regel wie im internen Designsystem, nur mit einer
 * anderen Farbe.
 *
 * SCHRIFT
 *
 * Hanken Grotesk, aus public/assets/schriften/ und nicht von Google (die
 * Begruendung steht dort in LIESMICH.md). Zwei variable Dateien, 54 KB
 * zusammen. Faellt die Schrift aus, traegt die Systemgrotesk denselben
 * Satz - die enge Laufweite ist am Text notiert, nicht an der Schrift.
 *
 * NUR HELL
 *
 * Diese Datei kennt kein dunkles Schema. Der Entwurf ist ein heller
 * Entwurf; das Gelb, die Haarlinien und der schwarze Aufmacher sind auf
 * Papier gerechnet. Ein dunkler Satz waere eine Erfindung, die niemand
 * freigegeben hat - lieber gar keiner als ein halber.
 *
 * Reihenfolge: Schrift, Marken, Grundwerte, Geruest, Seitenleiste,
 * Aufmacher, Startseite, Raster, Abteilung, Detailseite, Vita, Galerie,
 * Vergroesserung, Fliesstext, Leerzustand, Fusszeile, Telefon, Bewegung,
 * Druck.
 */

/* ---------------------------------------------------------------- Schrift */

/*
 * Ein Bereich statt fuenf Schnitten: die Datei ist variabel, der Browser
 * interpoliert 300 bis 700 selbst. unicode-range trennt die beiden
 * Zeichenvorraete, damit latin-ext nur laedt, wenn ein Name es braucht.
 */
@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("schriften/hanken-grotesk-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
        U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("schriften/hanken-grotesk-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

/* ----------------------------------------------------------------- Marken */

html {
    /*
     * DER PLATZ FUER DIE BILDLAUFLEISTE WIRD IMMER FREIGEHALTEN (U64).
     *
     * Ohne das gerät eine Seite, deren Inhalt fast genau so hoch ist wie
     * das Fenster, in eine Schleife: Inhalt etwas zu hoch -> Leiste
     * erscheint -> Fenster schmaler -> das Raster wird schmaler -> die
     * Kacheln werden kuerzer -> Inhalt passt -> Leiste weg -> von vorn.
     * Die Seite flackert, und zwar endlos.
     *
     * Gefunden hat es der Pruefstand: `locator.click` lief dreissig
     * Sekunden in „element is not stable" und gab auf. Ein Mensch haette
     * es als Zappeln gesehen und nicht gewusst, woran es liegt.
     *
     * Seit dem Wegfall des `min-height: 100vh` am Hauptteil ist die
     * Seitenhoehe inhaltsgetrieben, und damit liegt sie oefter genau auf
     * dieser Kante.
     */
    scrollbar-gutter: stable;
}

:root {
    color-scheme: light;

    /*
     * ======================================================================
     * NEUTRAL, NICHT WARM (U64)
     * ======================================================================
     *
     * Hier standen warme Toene: Papier #fbfaf6, Schrift #16150f, Grau
     * #6e6a61 - alle mit einem Gelbstich. `Klassisch.dc.html` ist neutral
     * und steht auf REINEM WEISS: `html, body { background: #fff; color:
     * #2f2f2f }`.
     *
     * Das ist der Unterschied, den man sieht, bevor man irgendeine
     * einzelne Flaeche anschaut, und er lag quer ueber der ganzen Seite.
     * Alle Masze der Navigation stimmten mit dem Entwurf ueberein -
     * Schriftgrad, Gewicht, Sperrung, Abstand, Randabstaende, sogar die
     * Logohoehen; verschieden war allein die Temperatur.
     *
     * ----------------------------------------------------------------------
     * WAS NICHT UEBERNOMMEN WIRD, UND WARUM
     * ----------------------------------------------------------------------
     *
     * Die hellsten Graus des Entwurfs fallen durch die Kontrastpruefung:
     * #9a9a9a auf Weiss sind 2,8:1, #a8a8a8 sind 2,4:1 - AA verlangt 4,5:1
     * fuer Fliesstext und 3:1 fuer grosze Schrift. Uebernommen wird darum
     * der HUE, nicht die Helligkeit: die Stufen sind neutral wie im
     * Entwurf und hell genug, um lesbar zu bleiben.
     *
     * Auf Weiss: Tinte 18,9:1 - Fliess 8,6:1 - Leise 5,3:1.
     */

    /* Flaechen */
    --papier:      #ffffff;
    --papier-tief: #f4f4f4;
    --kachel:      #e6e6e6;
    --kachel-tief: #dcdcdc;
    --nacht:       #1b1b1b;
    --nacht-hoch:  #262626;

    /* Schrift, drei Stufen. */
    --tinte:  #111111;
    --fliess: #4a4a4a;
    --leise:  #6f6f6f;

    /* Linien. Haarlinie zum Gliedern, Rand fuer Bedienelemente. */
    --linie: #ececec;
    --rand:  #8a8a8a;


    --grotesk: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI",
               "Helvetica Neue", Arial, sans-serif;
    --mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    /*
     * DIE SCHRIFT DES BILDNACHWEISES (U86).
     *
     * Er stand in `--mono`, und eine Monospace ist per Bauart die
     * breiteste Schrift, die eine Seite hat: jedes `i` beansprucht so viel
     * Platz wie ein `m`. Unter einem Portrait wirkte der Nachweis dadurch
     * wie eine Dateiangabe und nicht wie eine Namensnennung.
     *
     * Barlow ist eine schmale Grotesk, sie liegt bereits unter
     * `assets/schriften/` (vier Schnitte, selbst ausgeliefert - diese
     * Seite laedt nichts von fremden Servern, R63), und sie unterscheidet
     * sich deutlich von der Lauf­schrift Hanken Grotesk. Genau das war die
     * Bitte: eine ANDERE Schrift, und schmaler.
     */
    --nachweis-schrift: "Barlow", "Hanken Grotesk", system-ui, sans-serif;

    /* Mass der Seitenleiste - auch die Umbruchschwelle haengt daran. */
    --leiste: 20rem;

    /*
     * ======================================================================
     * DER EINZUG DER GANZEN WEBSITE (U87)
     * ======================================================================
     *
     * Die Agentur hat zwei Dinge gesagt, und es ist dasselbe Ding: das
     * Zeichen oben sei zu klein, und der Einzug muesse „auf allen Seiten
     * gleich" sein - das erste Foto einer Abteilung solle dort anfangen,
     * wo oben „AGENTUR" anfaengt.
     *
     * Vorher hatte jede Flaeche ihren eigenen linken Rand: die Wand fing
     * bei 0 an, der Abteilungstitel bei 32 px, das Profil bei 216 px, die
     * redaktionellen Seiten je nach Breite bei 216 oder 376. Fuenf Kanten
     * auf einer Website, von denen keine die der Kopfzeile war.
     *
     * Jetzt gibt es EINE Kante, und sie wird nicht geschaetzt, sondern
     * gerechnet: linker Rand der Kopfzeile + Breite des Zeichens + die
     * Spalte dazwischen. Genau dort faengt die Navigation an, weil sie
     * aus denselben drei Zahlen entsteht. Wer das Zeichen groesser zieht,
     * verschiebt beides zusammen - deshalb steht die Hoehe des Zeichens
     * hier oben und nicht unten bei `.kopf__zeichen`.
     *
     * 121x168 ist das echte Mass von `logo-mark.png`; aus der Hoehe folgt
     * die Breite, weil das Bild `width: auto` traegt.
     */
    --zeichen-hoehe:  clamp(4.25rem, 6vw, 6.5rem);
    --zeichen-breite: calc(var(--zeichen-hoehe) * 121 / 168);
    --kopf-rand:      clamp(1.25rem, 5vw, 4rem);
    --kopf-spalte:    clamp(1.25rem, 4vw, 3rem);
    --einzug:         calc(var(--kopf-rand) + var(--zeichen-breite) + var(--kopf-spalte));

    /* Ränder und Luft. Der Entwurf: 64 px links, 72 px rechts, 88/110 hoch. */
    --rand-links:  clamp(1.25rem, 4.4vw, 4rem);
    --rand-rechts: clamp(1.25rem, 4.4vw, 4.5rem);
    --luft-oben:   clamp(2.5rem, 5.5vw, 5.5rem);
    --luft:        clamp(3rem, 7vw, 6.9rem);

    /* Breiten der Textkoerper, wie im Entwurf notiert. */
    --breit:  67.5rem;
    /*
     * 70rem = 1120 px, das Mass des Entwurfs fuer Profil, Freunde und
     * die Kontaktkarte (U65). Hier standen 72,5rem - vierzig Pixel
     * daneben, was allein nicht auffaellt und neben einer Flaeche, die
     * es richtig macht, sehr wohl.
     */
    --mittel: 70rem;
    --schmal: 50rem;

    --ruhig: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ------------------------------------------------------------- Grundwerte */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--papier);
    color: var(--tinte);
    font-family: var(--grotesk);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /*
     * Ohne das trennt der Browser lange Namen nicht und schiebt schmale
     * Kacheln auseinander. Bei 375 px ist genau das der Unterschied
     * zwischen einer Seite und einer Seite, die seitlich scrollt.
     */
    overflow-wrap: break-word;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

/*
 * `<picture>` HAT KEINEN EIGENEN KASTEN (U78)
 *
 * Seit die Bilder in zwei Formaten vorliegen, steht um jedes `<img>` ein
 * `<picture>`, das dem Browser WebP und JPEG anbietet. Alle Bildregeln
 * dieses Stylesheets greifen auf Nachfahren (`.kachel__rahmen img`), nicht
 * auf direkte Kinder - sie treffen das Bild also weiter.
 *
 * Eine Stelle traefe es trotzdem: wo der Rahmen `grid` oder `flex` ist, war
 * bisher das BILD das Element im Raster. Mit einem `<picture>` darum waere
 * es plötzlich das `<picture>`, und das Bild darin hinge in einem Kasten,
 * den niemand bemasst hat - Seitenverhaeltnis, `object-fit` und
 * `object-position` liefen ins Leere. Das sind genau die drei Schrauben, an
 * denen der Aufmacher und jede Kachel haengen.
 *
 * `display: contents` nimmt dem `<picture>` seinen Kasten vollstaendig. Das
 * Bild ist wieder selbst das Element im Raster, und die Umstellung auf zwei
 * Formate ist damit nachweislich ohne Wirkung auf die Gestaltung - statt
 * „sieht gleich aus" ein Grund, warum es gleich sein MUSS.
 */
picture {
    display: contents;
}

h1, h2, h3 {
    margin: 0;
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -0.035em;
}

p {
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

::selection {
    background: var(--klang-hauch);
    color: var(--tinte);
}

:focus-visible {
    outline: 2px solid var(--tinte);
    outline-offset: 3px;
    border-radius: 1px;
}

.sprungmarke {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 20;
    padding: 0.7rem 1.1rem;
    background: var(--tinte);
    color: var(--papier);
    font-weight: 600;
}

.sprungmarke:focus {
    left: 0.5rem;
    top: 0.5rem;
}

/*
 * Die Zeile ueber jedem Abschnitt: "03 - SCHAUSPIELER:INNEN". Sie
 * nummeriert die Seite und gibt dem Auge einen Anfang.
 */
.kicker {
    margin: 0;
    font: 500 0.6875rem/1 var(--mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--leise);
}

/* Verweis mit farbiger Unterstreichung - der einzige Textschmuck. */
.strich {
    display: inline-flex;
    font-weight: 600;
    border-bottom: 2px solid var(--klang);
    padding-bottom: 2px;
    transition: border-color 0.3s var(--ruhig);
}

.strich:hover {
    border-bottom-color: var(--tinte);
}

/* Knöpfe. Gelb gefüllt, dunkel gefüllt, oder nur umrandet. */
.knopf {
    display: inline-flex;
    align-items: center;
    padding: 0.875rem 1.5rem;
    border: 1px solid transparent;
    border-radius: 100px;
    background: var(--klang);
    color: var(--papier);
    font-size: 1rem;
    font-weight: 600;
    transition: background-color 0.3s var(--ruhig), color 0.3s var(--ruhig),
                border-color 0.3s var(--ruhig);
}

.knopf:hover {
    background: var(--tinte);
    color: var(--papier);
}

.knopf--tinte {
    background: var(--tinte);
    color: var(--papier);
}

.knopf--tinte:hover {
    background: var(--klang-tief);
    color: var(--papier);
}

.knopf--rand {
    background: transparent;
    border-color: var(--rand);
    color: var(--tinte);
}

.knopf--rand:hover {
    background: var(--tinte);
    border-color: var(--tinte);
    color: var(--papier);
}

.knopfreihe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

/* ---------------------------------------------------------------- Geruest */

/*
 * Eine SPALTE seit U62, nicht mehr zwei nebeneinander: der Kopf steht
 * mittig darueber (siehe `.kopf`), der Inhalt darunter.
 */
.seite {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/*
 * Spalte, damit die Fusszeile auch auf einer kurzen Seite unten steht und
 * nicht mitten im Papier haengt.
 */
/*
 * KEIN `min-height: 100vh` HIER (U64).
 *
 * Es stand hier, und zwar zusaetzlich zu dem an `.seite`. Der Kopf steht
 * aber UEBER dem Hauptteil, nicht darin: `.seite` war damit immer
 * mindestens Kopfhoehe + 100vh hoch, und der Fuss landete auf jeder
 * einzelnen Seite unter der Falz - hinter einem leeren Streifen, durch
 * den man erst scrollen musste.
 *
 * Der Fuss war also nie weg, er war nur nie zu sehen. Gemessen auf der
 * Startseite: Sichtfenster 1099 px, Fussoberkante bei 2091 px.
 *
 * `flex: 1` genuegt vollstaendig - der Hauptteil nimmt den Rest der
 * Seitenhoehe, und `.hauptteil > main { flex: 1 }` schiebt den Fuss darin
 * nach unten.
 */
.hauptteil {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.hauptteil > main {
    flex: 1;
}

.block {
    padding: var(--luft-oben) var(--rand-rechts) var(--luft) var(--einzug);
}

/*
 * ==========================================================================
 * LINKSBUENDIG, UND ZWAR ALLE (U87)
 * ==========================================================================
 *
 * Hier stand seit U65 `margin-inline: auto`, und die Begruendung war
 * richtig: vorher standen die Flaechen in zwei Ausrichtungen nebeneinander,
 * mittig und links. Jetzt stehen sie wieder in einer - nur in der anderen.
 *
 * Der Grund ist die Kopfzeile. Sie steht seit U74 LINKS, auf jeder Seite,
 * und sie ist das Erste, was man sieht. Ein mittiger Textkoerper darunter
 * hat damit auf keinem Bildschirm dieselbe Kante wie die Navigation
 * darueber, und je breiter der Schirm, desto weiter laufen die beiden
 * auseinander: bei 1440 px waren es 58 px, bei 1920 px 300.
 *
 * Die Agentur hat genau das beschrieben - „der Einzug sollte auf allen
 * Seiten gleich sein", und das erste Foto solle dort anfangen, wo oben
 * „AGENTUR" anfaengt. Das geht nur linksbuendig.
 *
 * `max-width` zaehlt den Einzug und den rechten Rand MIT, weil die Bloecke
 * `border-box` rechnen: innen bleiben damit genau die 50 bzw. 70 rem des
 * Entwurfs stehen, und auf einem schmalen Schirm greift die Breite gar
 * nicht erst.
 */
.block--eng {
    max-width: calc(var(--einzug) + var(--schmal) + var(--rand-rechts));
    margin-inline: 0;
}

.block--weit {
    max-width: calc(var(--einzug) + var(--mittel) + var(--rand-rechts));
    margin-inline: 0;
}

/* --------------------------------------------------------- Seitenleiste */

/*
 * 20rem sind die 320 px des Entwurfs. In rem notiert, weil eine feste
 * Pixelbreite sich der Schriftgroesse des Systems verweigert - und weil
 * sie sonst als einzige Zahl im Stylesheet stuende, die nicht mitwaechst.
 */
/*
 * ==========================================================================
 * DER KOPF (U62)
 * ==========================================================================
 *
 * Bis U62 stand hier eine Spalte links: Wortmarke, Navigation, Ortsangabe,
 * klebend ueber die ganze Hoehe. Der Entwurf `Klassisch.dc.html` stellt
 * statt dessen alles MITTIG ueber den Inhalt - und das ist keine
 * Geschmacksfrage, sondern folgt daraus, was die Seite zeigt: ganzflaechige
 * Portraits. Eine Spalte links nimmt ihnen ein Fuenftel der Breite und
 * halbiert das Quadrat, um das der Entwurf gebaut ist.
 */

/*
 * ==========================================================================
 * DIE KOPFZEILE STEHT LINKS - AUF JEDER SEITE (U74)
 * ==========================================================================
 *
 * Sie stand mittig, und auf dem Vollbild-Aufmacher links: zwei Seiten
 * derselben Website, auf denen die Navigation an verschiedenen Stellen
 * anfing. Wer von der Startseite auf eine Abteilung klickt, sah die Zeile
 * springen.
 *
 * Jetzt links, und der Sonderfall faellt weg. Ob mittig irgendwann wieder
 * waehlbar wird, entscheidet die Agentur; dann gehoert es neben Palette
 * und Schrift unter Gestaltung und nicht in diese Datei.
 *
 * Der seitliche Rand ist derselbe wie beim Aufmacher (`clamp`), damit
 * Zeichen und Navigation auf beiden in einer Flucht stehen.
 */
.kopf {
    padding: 1.625rem var(--rand-rechts) 0 var(--kopf-rand);
    text-align: left;
    /*
     * ZEICHEN UND NAVIGATION IN EINER ZEILE (U74).
     *
     * Bis dahin stand das Zeichen oben und die Navigation darunter - zwei
     * Zeilen Kopf, ueber jeder Seite. Nebeneinander ist es eine, und der
     * Aufmacher bekommt die andere.
     *
     * `baseline` und nicht `center`: das Zeichen ist ein Bild mit
     * kraeftiger Grundlinie, die Navigation Versalien. Auf der Mitte
     * ausgerichtet saehe das Zeichen zu hoch aus; auf der Grundlinie
     * sitzen beide so, wie man es von einem Briefkopf kennt.
     *
     * `wrap` fuer das Telefon: dort passt beides nicht nebeneinander, und
     * dann steht die Navigation wieder darunter - von selbst, ohne zweite
     * Regel.
     */
    display: flex;
    /*
     * ==================================================================
     * AUF DEM GROSSEN BILDSCHIRM BRICHT DIESE ZEILE NICHT UM (U87)
     * ==================================================================
     *
     * Hier stand `wrap`, und das war bis U87 harmlos: die Navigation
     * rutschte unter das Zeichen, wenn es eng wurde, und nichts hing
     * daran. Seit U87 haengt die linke Kante der ganzen Website daran
     * (`--einzug` = Rand + Zeichen + Spalte) - und die stimmt nur,
     * solange die Navigation NEBEN dem Zeichen steht.
     *
     * Umgebrochen hat sie nicht erst auf dem Telefon, sondern schon bei
     * rund 1100 px, also auf jedem kleineren Laptop. Dort stand die
     * Leiste dann ganz links und der Inhalt darunter neunzig Pixel
     * weiter innen - genau der Versatz, den diese Aenderung abschaffen
     * soll. Und wo er umbricht, kann niemand ausrechnen: die Zahl der
     * Eintraege steht in der Datenbank.
     *
     * `nowrap` nimmt die Frage weg. Die Navigation hat ihr eigenes
     * `wrap` und legt sich bei Enge in ZWEI Reihen neben das Zeichen -
     * die Kopfzeile wird hoeher, aber ihre linke Kante bleibt, wo sie
     * ist. `min-width: 0` daneben, weil ein Flex-Element sonst nicht
     * unter seine Inhaltsbreite schrumpfen darf und stattdessen
     * hinausragte.
     *
     * Auf dem Telefon gilt wieder `wrap` - siehe die Regel bei 61.99rem,
     * wo auch `--einzug` wieder zum blossen Rand wird.
     */
    flex-wrap: nowrap;
    align-items: baseline;
    /*
     * Die Spalte zwischen Zeichen und Navigation steht seit U87 als
     * Variable in `:root`: aus ihr und der Breite des Zeichens rechnet
     * sich `--einzug`, also die linke Kante der ganzen Website. Steht die
     * Zahl zweimal da, laufen Kopf und Inhalt beim naechsten Mal
     * auseinander.
     */
    gap: 0.875rem var(--kopf-spalte);
}

/* Siehe `.kopf`: sonst schrumpft die Navigation nicht und ragt hinaus. */
.kopf > .navigation {
    min-width: 0;
}


/*
 * Die Marke sind zwei Bilder nebeneinander, unten buendig (U64).
 *
 * Der Entwurf: `align-items: flex-end`, 14 px Abstand, das Zeichen 42 px
 * hoch, die Unterzeile 15 px und drei Pixel tiefer sitzend. Die Maße
 * stehen hier in `rem`, damit sie mit der Schriftgroesse des Geraets
 * mitgehen - 42 px sind bei 16 px Grundschrift 2.625rem.
 *
 * `flex-end` und nicht `baseline`: es sind Bilder, und ein Bild hat keine
 * Grundlinie. Bei `baseline` haengte der Browser beide an ihrer Unterkante
 * auf - was hier zufaellig richtig aussaehe und beim naechsten Bild mit
 * Rand nicht mehr.
 */
.kopf__marke {
    display: inline-flex;
    /* Gibt nichts her, wenn es eng wird: ein Bild mit festem Verhaeltnis. */
    flex: none;
    align-items: flex-end;
    gap: 0.875rem;
    transition: opacity 0.2s var(--ruhig);
}

.kopf__marke:hover,
.kopf__marke:focus-visible {
    opacity: 0.62;
}

.kopf__zeichen {
    display: block;
    /*
     * GROESSER, IN VIER STUFEN (2.625 -> 3.25 -> 4.75 -> jetzt bis 6.5rem).
     *
     * „Das geht gerade voll unter, finde ich" - und das stimmte: 64 px
     * auf einem 1440er Schirm, neben einer Navigation, die ueber 900 px
     * breit lief. Das Zeichen traegt die Marke allein, seit die
     * Unterzeile in U76 weggefallen ist; es ist damit das einzige, was
     * oben links sagt, auf wessen Website man ist.
     *
     * Jetzt 86 px bei 1440 und bis 104 px auf einem breiten Schirm, also
     * rund ein Drittel mehr. Weiter zu gehen ginge auf Kosten der Zeile:
     * das Zeichen ist 1,4-mal so hoch wie breit, und ab etwa 7rem schiebt
     * es die Navigation auf einem 13-Zoll-Bildschirm in die zweite Reihe.
     *
     * DIE HOEHE STEHT IN `:root`, nicht hier: an ihr haengt seit U87 die
     * linke Kante der ganzen Website (siehe `--einzug`). Hier steht nur
     * noch, dass sie gilt.
     *
     * `width: auto` bleibt: das Bild ist 121x168, und eine feste Breite
     * dazu verzerrte es.
     */
    height: var(--zeichen-hoehe);
    width: auto;
}


/*
 * Der Rahmen selbst ist die Zeile (U62): darin die Liste der Wege UND das
 * Suchfeld. Ohne das steht das Formular als Geschwister unter der Liste -
 * die Liste ist zwar mittig, das Feld aber faengt am linken Rand an.
 */
.navigation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem 1.375rem;
    /*
     * Kein Abstand nach oben mehr: die Navigation steht seit U74 NEBEN
     * dem Zeichen, nicht darunter. Bricht die Zeile auf dem Telefon um,
     * holt `row-gap` der Kopfzeile den Abstand zurueck.
     */
    margin-top: 0;
}

.navigation > ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem 1.375rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.navigation a {
    display: inline-block;
    padding: 0.25rem 0;
    font-family: var(--lauf);
    font-size: 0.84375rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--leise);
    transition: color 0.18s var(--ruhig);
}

.navigation a:hover,
.navigation a:focus-visible {
    color: var(--klang);
}

/*
 * Wo man steht, steht im Klang des Hauses. Der Entwurf faerbt genau so -
 * und anders als bei der alten Leiste geht das hier auf: Graphit haelt
 * gegen Papier 15,8:1, weit ueber AA.
 */
.navigation a.ist-aktiv {
    color: var(--klang);
}

/* ------------------------------------------------- Die Namen einer Abteilung */

/*
 * DAS AUSKLAPPMENUE OHNE EINE ZEILE JAVASCRIPT.
 *
 * Der Entwurf haelt es in einem Zustand und faehrt es auf `onMouseEnter`
 * aus. Hier steht die Liste im Markup und CSS entscheidet, ob man sie
 * sieht. `:focus-within` steht dabei gleichberechtigt neben `:hover` und
 * ist nicht die Zugabe: wer mit der Tabulatortaste geht, faehrt durch die
 * Namen, ohne je einen Zeiger zu bewegen.
 *
 * `visibility` statt `display`, damit der Uebergang laeuft und die
 * Namen fuer Vorlesesoftware nicht erst beim Aufklappen entstehen.
 */
.navigation__abteilung {
    position: relative;
}

.navigation__leute {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 70;
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    width: max-content;
    /*
     * 16rem standen hier, solange die Tafel keinen Innenabstand hatte -
     * da war die Mindestbreite das Einzige, was sie vor einem Streifen
     * bewahrte. Jetzt tragen die 2.5rem links und rechts das, und die
     * Mindestbreite darf kleiner sein als der laengste Name plus Abstand.
     * So steht links wie rechts derselbe Rand; mit 16rem blieb rechts
     * eine zufaellige Luecke stehen.
     */
    min-width: 12rem;
    max-width: 78vw;
    /*
     * ======================================================================
     * DIESE LISTE RAEUMT SELBST AUF (U76)
     * ======================================================================
     *
     * `list-style` und `margin` standen bis U76 in einer Sammelregel
     * `.navigation ul`, und dort stand auch `padding: 0`. Zwei Klassen
     * gegen eine: die Sammelregel GEWANN gegen die Zeile darunter, und
     * der Innenabstand dieser Tafel war in Wahrheit null. Die Namen
     * klebten am weissen Rand - zu sehen war es nur, wenn man genau
     * hinsah, und die Zeile stand ja da.
     *
     * Die Sammelregel ist weg. `.navigation > ul` raeumt die oberste
     * Liste auf, diese Regel diese - jede Liste ihre eigene, und keine
     * greift der anderen in den Abstand.
     */
    list-style: none;
    margin: 0;
    padding: 1.25rem 2.5rem 1.5rem;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 1.125rem 2.75rem rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.24s var(--ruhig), visibility 0.24s;
}

.navigation__abteilung:hover > .navigation__leute,
.navigation__abteilung:focus-within > .navigation__leute {
    opacity: 1;
    visibility: visible;
}

.navigation__leute a {
    padding: 0.125rem 0;
    font-size: 0.78125rem;
    letter-spacing: 0.08em;
    color: var(--leise);
}

/*
 * ==========================================================================
 * WESSEN SEITE OFFEN IST, STEHT IM KLANG DES HAUSES (U87)
 * ==========================================================================
 *
 * Die Leiste fuehrt seit U85 auch die Menschen selbst. In dieser Liste war
 * nichts hervorgehoben: wer sie aufklappte, sah fuenfundzwanzig gleich
 * aussehende Namen - darunter den, auf dessen Seite er gerade stand.
 *
 * Dieselbe Farbe wie bei den Wegen darueber, aus demselben Grund: wo man
 * steht, steht im Klang. Dazu eine Linie, und die ist nicht Zierrat - der
 * Klang ist in der Vorgabe Graphit, und Graphit gegen Leise ist ein
 * Helligkeitsunterschied. Wer ihn nicht sieht, sieht die Linie. Dieselbe
 * Vorsicht wie bei den zwei Gruentoenen auf la-casting.de.
 *
 * `.navigation a.ist-aktiv` greift hier ohnehin schon (zwei Klassen gegen
 * eine); diese Regel setzt nur die Linie dazu.
 */
.navigation__leute a.ist-aktiv {
    color: var(--klang);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
}

/*
 * Auf dem Telefon klappt nichts aus: es gibt kein Schweben, und ein Menue,
 * das sich nur mit dem Finger oeffnen laesst, verdeckt beim ersten Tippen
 * den Weg, den man eigentlich wollte. Dort fuehrt der Eintrag einfach in
 * die Abteilung - die Namen stehen dann im Raster, wo sie hingehoeren.
 */
@media (hover: none), (max-width: 40rem) {
    .navigation__leute {
        display: none;
    }
}

/* -------------------------------------------------------------- Aufmacher */

.aufmacher {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: min(100vh, 46rem);
    padding: var(--luft) var(--rand-rechts) 5.25rem var(--rand-links);
    overflow: hidden;
    background: var(--nacht);
    color: var(--papier);
}

.aufmacher :focus-visible {
    outline-color: var(--papier);
}

.aufmacher__bild {
    position: absolute;
    inset: 0;
}

.aufmacher__bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 28%;
}

/*
 * Ohne Bild bleibt der Aufmacher trotzdem ein Aufmacher: dieselbe
 * Schraffur, die der Entwurf fuer noch nicht gesetzte Bilder benutzt,
 * nur in Nacht statt in Papier. Kein leerer Kasten, keine Luecke.
 */
.aufmacher__bild--leer {
    background: repeating-linear-gradient(122deg,
        var(--nacht-hoch) 0 0.75rem, var(--nacht) 0.75rem 1.5rem);
}

.aufmacher__schleier {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top,
            rgba(10, 10, 7, 0.82) 0%, rgba(10, 10, 7, 0.35) 42%, rgba(10, 10, 7, 0) 72%),
        linear-gradient(88deg,
            rgba(10, 10, 7, 0.88) 0%, rgba(10, 10, 7, 0.5) 46%, rgba(10, 10, 7, 0.1) 100%);
}

.aufmacher__text {
    position: relative;
    max-width: 57.5rem;
}

.aufmacher__balken {
    width: 3.25rem;
    height: 0.375rem;
    margin-bottom: 1.75rem;
    background: var(--klang);
}

.aufmacher h1 {
    font-size: clamp(2.125rem, 5.4vw, 3.75rem);
    line-height: 1.03;
    letter-spacing: -0.037em;
    /*
     * balance statt pretty: die Zeile soll wie im Entwurf nach dem Komma
     * brechen. Ein hartes <br> waere auf dem Telefon falsch.
     */
    text-wrap: balance;
}

.aufmacher__satz {
    margin-top: 1.5rem;
    max-width: 34rem;
    font-size: clamp(1rem, 1.4vw, 1.1875rem);
    line-height: 1.55;
    color: rgba(251, 250, 246, 0.82);
    text-wrap: pretty;
}

.aufmacher .knopf--rand {
    border-color: rgba(251, 250, 246, 0.45);
    color: var(--papier);
}

.aufmacher .knopf--rand:hover {
    background: var(--papier);
    border-color: var(--papier);
    color: var(--tinte);
}

/* ------------------------------------------------------------- Kennzahlen */

/*
 * Drei Zahlen in einem Raster, dessen 1-px-Fugen die Haarlinie
 * durchscheinen lassen. Ein Rahmen waere lauter und saehe nach Tabelle aus.
 */
.kennzahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: 1px;
    max-width: var(--breit);
    background: var(--linie);
}

.kennzahl {
    background: var(--papier);
    padding: 1.875rem 1.75rem 2rem;
}

.kennzahl__wert {
    font-size: clamp(2rem, 3.6vw, 2.625rem);
    font-weight: 600;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.kennzahl__text {
    margin-top: 0.375rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--leise);
}

/* -------------------------------------------------------------- Abteilung */

/* Kopfzeile eines Abschnitts: Titel links, Verweis rechts, Linie darunter. */
.abteilung + .abteilung {
    margin-top: var(--luft);
}

.kicker + .abteilung__kopf,
.kicker + .abteilung {
    margin-top: 1.125rem;
}

.kennzahlen + * {
    margin-top: var(--luft);
}

.abteilung__titel {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
}

.abteilung__kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--linie);
}

.abteilung__kopf h1 {
    font-size: clamp(1.875rem, 4vw, 2.75rem);
    line-height: 1;
}

.abteilung__kopf h2 {
    font-size: clamp(1.375rem, 2.6vw, 1.75rem);
    letter-spacing: -0.025em;
}

.abteilung__zahl {
    font: 500 0.6875rem/1 var(--mono);
    letter-spacing: 0.1em;
    color: var(--leise);
    white-space: nowrap;
}

/* Die drei Abteilungen als Reiter, wie im Entwurf. */
.reiter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.reiter a {
    padding: 0.5625rem 1.125rem;
    border: 1px solid var(--rand);
    border-radius: 100px;
    font-size: 0.9375rem;
    font-weight: 600;
    transition: background-color 0.25s var(--ruhig), color 0.25s var(--ruhig);
}

.reiter a:hover {
    border-color: var(--tinte);
}

.reiter a.ist-aktiv {
    background: var(--tinte);
    border-color: var(--tinte);
    color: var(--papier);
}

/* --------------------------------------------------------------- Raster */

/*
 * Bild und Name, sonst nichts. Die alte Seite macht es so, und sie hat
 * recht: wer hier ist, vergleicht Gesichter.
 *
 * minmax(min(11rem, 100%), 1fr) statt minmax(11rem, 1fr) - die
 * min()-Variante kann nie breiter werden als die Spalte selbst und ist
 * damit der Grund, warum bei 375 px nichts seitlich hinausragt.
 */
.raster {
    list-style: none;
    margin: 2.25rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
    column-gap: clamp(0.75rem, 1.6vw, 1.5rem);
    row-gap: clamp(1.5rem, 3vw, 2rem);
    max-width: var(--breit);
}

/*
 * Auf dem Telefon zwei Spalten statt einer. Eine Spalte hiesse: ein
 * Gesicht pro Bildschirm und hundertfuenfzig Wischer bis ans Ende - wer
 * vergleichen will, braucht zwei nebeneinander.
 */
@media (max-width: 40rem) {
    .raster {
        grid-template-columns: repeat(auto-fill, minmax(min(8.5rem, 100%), 1fr));
    }
}

.kachel__link {
    display: block;
}

.kachel__rahmen {
    display: block;
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--kachel);
}

.kachel__rahmen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    transition: transform 0.9s var(--ruhig);
}

.kachel__name {
    display: block;
    margin-top: 0.6875rem;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.3;
    position: relative;
    padding-bottom: 0.1875rem;
}

/* Die Linie unter dem Namen zieht sich beim Ueberfahren von links auf. */
.kachel__name::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: var(--klang);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s var(--ruhig);
}

.kachel__link:hover .kachel__rahmen img,
.kachel__link:focus-visible .kachel__rahmen img {
    transform: scale(1.04);
}

.kachel__link:hover .kachel__name::after,
.kachel__link:focus-visible .kachel__name::after {
    transform: scaleX(1);
}

/*
 * Steht kein Foto zur Verfuegung, bleibt die Kachel eine Kachel: gleiche
 * Flaeche, gleiche Proportion, die Schraffur des Entwurfs und die
 * Initialen darin.
 */
.platzhalter {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    padding: 0.875rem;
    font: 500 0.625rem/1 var(--mono);
    letter-spacing: 0.14em;
    color: var(--leise);
    background: repeating-linear-gradient(122deg,
        var(--kachel-tief) 0 0.75rem, var(--kachel) 0.75rem 1.5rem);
}

/* ------------------------------------------------------------ Detailseite */

.zurueck {
    display: inline-flex;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--leise);
    transition: color 0.25s var(--ruhig);
}

.zurueck:hover {
    color: var(--tinte);
}

.profil__oben {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    margin-top: 1.875rem;
    align-items: start;
}

@media (min-width: 55rem) {
    .profil__oben {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    }
}

.portraet {
    margin: 0;
}

/*
 * Der Rahmen traegt das Format, nicht die <figure> selbst: sonst schnitte
 * das overflow:hidden des Ausschnitts den Bildnachweis mit ab.
 */
.portraet__rahmen {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--kachel);
}

.portraet__rahmen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
}

.portraet--leer {
    aspect-ratio: 3 / 4;
}

.nachweis {
    margin-top: 0.625rem;
    /*
     * Etwas groesser als vorher (0,75 statt 0,6875 rem): Barlow laeuft
     * schmaler als die Monospace, und bei gleicher Groesse waere der
     * Nachweis kleiner GEWORDEN, obwohl nur die Schrift wechseln sollte.
     */
    font: 500 0.75rem/1.5 var(--nachweis-schrift);
    /*
     * Und weniger Sperrung: 0,06em waren fuer eine Monospace gesetzt, die
     * ohnehin viel Luft hat. In einer schmalen Grotesk sieht dieselbe
     * Sperrung aus wie ein Versehen.
     */
    letter-spacing: 0.02em;
    color: var(--leise);
}

.profil__name {
    font-size: clamp(2rem, 4.4vw, 2.625rem);
    line-height: 1.02;
}

.profil__abteilung {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--leise);
}

/*
 * Die Kurzangaben als zweispaltige Liste mit Haarlinien: Beschriftung
 * leise, Wert in Tinte. Im Entwurf ist das die ruhigste Flaeche der Seite.
 */
.merkmale {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 1.75rem;
    margin: 1.875rem 0 0;
    font-size: 1.0625rem;
}

.merkmal {
    display: contents;
}

.merkmal dt {
    padding: 0.6875rem 0;
    border-top: 1px solid var(--linie);
    color: var(--leise);
}

.merkmal dd {
    margin: 0;
    padding: 0.6875rem 0;
    border-top: 1px solid var(--linie);
}

.merkmal:last-child dt,
.merkmal:last-child dd {
    border-bottom: 1px solid var(--linie);
}

/* ------------------------------------------------------------ Im Netz

   Die freigegebenen Social-Media-Auftritte, direkt unter den Kurzangaben.

   ZWEI DINGE, DIE HIER KEINE GESTALTUNG SIND

   Die Markenzeichen sind einfarbig in `currentColor` und bekommen KEINE
   Markenfarbe. Ein rot eingefaerbtes Instagram-Zeichen waere eine
   Veraenderung einer fremden Marke; die Einfarb-Variante ist die, die die
   Markenrichtlinien selbst vorsehen (src/Shared/symbole/social/LIESMICH.md).
   Auf dieser Seite passt das ohnehin: sie kennt Tinte, Papier und ein Gelb,
   das nur Flaeche ist - sieben Fremdfarben waeren der einzige Ort, an dem
   der Entwurf bunt wuerde.

   Neben dem Zeichen steht das HANDLE als sichtbarer Text. Nicht als Zugabe:
   ein Verweis, der nur ein Bild ist, hat keinen Namen, und eine Reihe aus
   sieben namenlosen Verweisen ist fuer ein Lesegeraet eine Reihe aus sieben
   „Link".
*/

.social {
    margin-top: 1.875rem;
}

.social__reihe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.social__verweis {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--fliess);
    text-decoration: none;
    font-size: 0.9375rem;
}

/*
   Die Unterstreichung ist dieselbe wie bei jedem Verweis im
   Fliesstext - die Hausfarbe ist hier Linie und niemals Schrift.
*/
.social__verweis:hover .social__handle,
.social__verweis:focus-visible .social__handle {
    box-shadow: inset 0 -0.4em 0 var(--klang);
}

.social__zeichen {
    display: inline-flex;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--tinte);
}

.social__zeichen svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/*
   Sichtbar nur fuer Lesegeraete. Das interne Designsystem hat diese Klasse
   seit U17; hier stand sie bislang nicht, weil die oeffentliche Seite ohne
   sie ausgekommen ist - jeder Verweis trug seinen Text.
*/
.nur-lesegeraet {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* -------------------------------------------------------------- Showreel */

.showreel,
.vita,
.galerie {
    margin-top: 2.75rem;
}

.showreel h2,
.vita h2,
.galerie h2 {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--leise);
    margin-bottom: 0.75rem;
}

/*
 * 5 / 4 UND NICHT 16 / 9.
 *
 * Das BILD ist 16:9, der Player ist es nicht: oben sitzt ein Titelbalken
 * („Name / Showreel"), unten die Kapitelleiste mit den Teilen. Filmmakers
 * gibt dafuer in seiner eigenen Einbindeanleitung
 * (`/de/actors/<slug>/showreels/<id>/iframe`) `padding-top: 80%` vor -
 * dasselbe Verhaeltnis, nur in der aelteren Schreibweise. Die 23,75
 * Prozentpunkte Unterschied sind genau diese beiden Leisten.
 *
 * Mit 16 / 9 war der Rahmen zu niedrig: das Bild unten angeschnitten, die
 * Kapitelleiste ausserhalb - und damit das weg, wofuer `playlist=h`
 * ueberhaupt gesetzt ist, naemlich der Weg zu Teil zwei und drei.
 *
 * Der Wert ist KONSTANT, nicht nach Teilzahl zu rechnen: an Showreels mit
 * einem, zwei und drei Teilen nachgesehen, ueberall 80 %.
 */
/*
 * DER HINTERGRUND GEHOERT ZUM PARAMETER - ZWEI PAARUNGEN, NICHT EINE.
 *
 * `background_color` ist bei Filmmakers keine Farbangabe, sondern ein
 * SCHALTER fuer das Thema des Players. Nachgemessen am `<body>` der
 * eingebetteten Seite:
 *
 *     ?…&background_color=none    ->  background: none   helles Thema,
 *                                     Schrift rgb(40,40,40)
 *     ?…  (ohne den Parameter)    ->  background: #000   dunkles Thema,
 *                                     Schrift weiss
 *     ?…&background_color=white   ->  background: #000   (ebenso; eine
 *                                     eigene Farbe nimmt er NICHT an)
 *
 * Gueltig sind darum genau zwei Paarungen: `none` auf hellem Grund - so
 * steht es hier - ODER gar kein Parameter auf schwarzem Grund. Nur die
 * Kreuzung geht nicht, und genau die stand hier: `none` auf
 * `var(--nacht)`. Dunkelgraue Schrift auf fast schwarzem Grund, Name,
 * Kapitelleiste und Bedienleiste unsichtbar - und bei einem Band, das auf
 * einem dunklen Bild beginnt, sah der ganze Rahmen LEER aus. Zwei Profile
 * habe ich deswegen fuer kaputt gehalten und fast bei Filmmakers
 * reklamiert.
 *
 * Wer hier spaeter einen dunklen Rahmen will, muss also nicht auf
 * Filmmakers warten: `background_color=none` aus der Adresse nehmen
 * (`Shared\Showreel::PLAYER`) und hier `--nacht` setzen. Beides zusammen,
 * oder keines von beidem.
 */
.showreel__rahmen {
    position: relative;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    background: var(--papier);
}

.showreel__rahmen iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/*
 * DAS SCHLOSS STATT DES RAHMENS (U79)
 *
 * Bei Minderjaehrigen steht hier kein Video, sondern ein Satz und ein
 * Knopf. Dieselbe FLAECHE wie der Rahmen - `aspect-ratio: 5 / 4`, wie
 * oben -, damit die Seite beim Wechsel zwischen einem geschuetzten und
 * einem offenen Profil nicht springt: der Abschnitt ist in beiden
 * Faellen gleich hoch.
 *
 * Kein Schlosssymbol. Ein Zeichen muesste von einem fremden Server
 * kommen (R63) oder als Schrift eingebaut werden, und beides waere viel
 * Aufwand fuer eine Auskunft, die der Satz schon gibt. Die Schraffur ist
 * dieselbe, mit der `platzhalter()` ein fehlendes Foto anzeigt - sie
 * sagt „hier ist etwas, das man nicht sieht", und das ist genau richtig.
 */
.showreel__schloss {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    aspect-ratio: 5 / 4;
    padding: 1.5rem;
    text-align: center;
    background: var(--papier);
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 7px,
        rgb(0 0 0 / 0.045) 7px,
        rgb(0 0 0 / 0.045) 14px
    );
    border: 1px solid var(--linie);
}

.showreel__schloss p {
    margin: 0;
    max-width: 28rem;
}

/*
 * ===================================================================
 * DIE PASSWORTFRAGE STEHT IM SCHLOSS (U8x)
 * ===================================================================
 *
 * Vorher sass hier ein Knopf, der auf eine eigene Seite fuehrte - ein
 * Seitenwechsel fuer ein einziges Feld. Jetzt steht das Feld an der
 * Stelle, an der gleich das Video laeuft.
 *
 * `aspect-ratio` wird zu `min-height`: die Schraffur hielt die Form des
 * Videos, solange nur zwei Zeilen darin standen. Mit Satz, Feld, Knopf
 * und Hinweis wuerde ein fester Seitenverhaeltnis-Kasten den Inhalt
 * abschneiden, sobald die Spalte schmal wird. Die Form bleibt die
 * Untergrenze, nicht die Vorschrift.
 */
.showreel__schloss {
    aspect-ratio: auto;
    min-height: min(26rem, 80vw);
    gap: 1.25rem;
}

.showreel__satz {
    font-size: 0.9375rem;
    line-height: 1.55;
}

/*
 * Feld und Knopf in EINER Zeile, solange der Platz reicht - es ist eine
 * einzige Eingabe, und zwei Zeilen machten aus einem Handgriff ein
 * Formular. `flex-wrap` bricht sie auf schmalen Spalten umeinander:
 * dasselbe Schloss steht auch neben einer Vita, und dort ist es eng.
 */
.showreel__formular {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    max-width: 26rem;
}

.showreel__feld {
    flex: 1 1 11rem;
    min-width: 0;
    padding: 0.75rem 0.875rem;
    background: var(--papier);
    border: 1px solid var(--rand);
    border-radius: 2px;
    color: var(--tinte);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
}

.showreel__feld:focus {
    border-color: var(--tinte);
    outline: none;
}

/*
 * Der Knopf ist hier kein `<a class="knopf">`, sondern ein
 * `<button class="knopf">` - nur der schickt ein Formular ohne
 * JavaScript ab. `button.knopf` setzt darum weiter oben schon Schrift
 * und Zeiger; hier kommt nur dazu, dass er nicht schrumpft.
 */
.showreel__formular .knopf {
    flex: 0 0 auto;
    justify-content: center;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}

/*
 * Die Meldung traegt FETTE Tinte und keine Signalfarbe - wie im
 * Kontaktformular. Farbe als einzige Auskunft waere WCAG 1.4.1; und wer
 * sich vertippt hat, braucht keinen roten Alarm, sondern einen Satz.
 */
.showreel__fehler {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--tinte);
}

.showreel__hinweis {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--tinte);
    opacity: 0.7;
}

/*
 * Dieselbe Frage auf der eigenen Seite (der Nebenweg: alte Links,
 * Lesezeichen, kein Passwort hinterlegt). Dort steht sie nicht in der
 * Schraffur, sondern im normalen Textfluss - darum hier nur die Breite,
 * damit das Feld nicht ueber die ganze Spalte laeuft.
 */
.seite--showreel .showreel__formular--seite {
    justify-content: flex-start;
    margin-top: 1.5rem;
}

.seite--showreel .showreel__hinweis {
    max-width: 34rem;
}

/* ----------------------------------------------------------------- Vita */

.vita__gruppe + .vita__gruppe {
    margin-top: 1.75rem;
}

.vita__gruppe h3 {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin-bottom: 0.25rem;
}

.eintraege {
    list-style: none;
    margin: 0;
    padding: 0;
}

.eintrag {
    display: grid;
    /* 3.75rem tragen auch eine Jahresspanne wie "2022-2023" ohne Umbruch. */
    grid-template-columns: 3.75rem minmax(0, 1fr);
    gap: 0 1.125rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--linie);
}

.eintrag__jahr {
    font: 500 0.75rem/1.6 var(--mono);
    color: var(--leise);
    white-space: nowrap;
}

.eintrag__titel {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.45;
}

.eintrag__rolle {
    font-weight: 400;
    color: var(--fliess);
}

.eintrag__meta {
    margin-top: 0.125rem;
    font-size: 0.9375rem;
    color: var(--leise);
}

/* -------------------------------------------------------------- Galerie */

.profil__bild .galerie {
    margin-top: 0.625rem;
}

.profil__bild .galerie h2 {
    /*
     * Die Bildreihe braucht im Entwurf keine Ueberschrift - eine
     * Vorlesesoftware schon, sonst haengen drei Verweise ohne Zusammenhang
     * im Dokument. Sie steht also da, nur leise.
     */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/*
 * Drei Spalten, 3/4 hoch, zwei Pixel Fuge (U64).
 *
 * Der Entwurf setzt hier ein festes 3er-Raster und keine `auto-fill`-
 * Reihe. Der Unterschied ist nicht nur Geschmack: `auto-fill` mit
 * `minmax(8rem)` zeigte je nach Spaltenbreite mal drei, mal vier, mal
 * zwei Bilder - dieselbe Person sah auf zwei Bildschirmen verschieden
 * aus. Drei sind drei.
 *
 * Die Fuge ist mit 2 px so schmal, dass die Bilder fast aneinander
 * stoszen - dieselbe Sprache wie die Wand einer Abteilung, nur enger.
 */
/*
 * HIER STAND EINE ZWEITE FASSUNG VON `.galerie__raster` (aufgeraeumt U73).
 *
 * Spaltenzahl, Fuge und Seitenmass standen an zwei Stellen in dieser
 * Datei, und die weiter unten gewann - wer hier etwas aenderte, sah
 * nichts passieren. Die Masze stehen jetzt nur noch unten, bei den
 * uebrigen Regeln des Steckbriefs. Was hier bleibt, ist die Blende beim
 * Zeigen; sie steht nirgends sonst.
 */
.galerie__bild img {
    transition: opacity 0.4s var(--ruhig);
}

.galerie__bild a:hover img,
.galerie__bild a:focus-visible img {
    opacity: 0.82;
}

/*
 * Die Knopfreihe des Entwurfs steht OBEN in der rechten Spalte, vor den
 * Kurzangaben - nicht unter der Vita. Wer ein Profil oeffnet, um eine
 * Anfrage zu schicken, soll den Knopf sehen, ohne achtzig Vita-Zeilen zu
 * scrollen.
 */
.profil__text .knopfreihe--oben {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.375rem;
}

.profil__text .knopfreihe--oben .knopf {
    padding: 0.4375rem 0.8125rem;
    border-radius: 0;
    font-size: 0.78125rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* ------------------------------------------------------- Vergroesserung */

/*
 * Die Vergroesserung eines Fotos - die einzige dunkle Flaeche dieser
 * Website, und die einzige, die ein Skript braucht.
 *
 * Sie ist dunkel, weil ein Foto es verlangt und nicht, weil hier doch
 * noch ein dunkles Schema anfaengt: der Grund verschwindet, damit das
 * Bild uebrigbleibt. Auf Papier waere ein grosses Portrait von einem
 * hellen Rand umgeben, der genauso hell ist wie das Bild - und dann sieht
 * man den Rand.
 *
 * Ohne Skript wird von diesem Abschnitt nichts gebraucht: es gibt dann
 * kein <dialog> im Dokument, und die Fotos bleiben Verweise auf ihre
 * grosse Datei.
 */

.grossbild {
    display: block;
    cursor: zoom-in;
}

/*
 * Der Verweis steht zwischen dem Ausschnitt und dem Bild. Ohne diese
 * Zeile faende das `height: 100%` des Bildes keine Hoehe mehr, an der es
 * sich messen koennte, und das Portrait fiele in seine Eigenhoehe
 * zusammen.
 */
.portraet__rahmen .grossbild {
    height: 100%;
}

.lupe {
    /*
     * Zwei Werte fuer Schrift auf der dunklen Flaeche, aus den Marken
     * gemischt statt neu erfunden. Der leise Ton hat auf `--nacht` rund
     * 7:1 - `--leise` selbst haette dort 1,4:1 und waere unlesbar.
     */
    --auf-nacht:       var(--papier);
    --auf-nacht-leise: color-mix(in srgb, var(--papier) 62%, var(--nacht));

    /* Der Dialog ist die ganze Flaeche; der Browser gibt ihm sonst
       Rahmen, Innenabstand und eine Hoehe nach Inhalt. */
    position: fixed;
    inset: 0;
    max-width: 100vw;
    max-height: 100dvh;
    width: 100vw;
    height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--auf-nacht);
    overflow: hidden;
}

.lupe::backdrop {
    background: color-mix(in srgb, var(--nacht) 94%, transparent);
}

.lupe__buehne {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    /* Luft fuer die Knoepfe oben und die Zeile unten. */
    padding: 4rem 1.25rem 3.5rem;
}

.lupe__bild {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    /* Kein object-fit: cover wie im Raster - hier wird nichts mehr
       beschnitten, das ganze Bild ist der Punkt. */
    object-fit: contain;
}

.lupe__fuss {
    position: absolute;
    inset: auto 1.25rem 1.1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    font: 500 0.6875rem/1.5 var(--mono);
    letter-spacing: 0.06em;
    color: var(--auf-nacht-leise);
}

/*
 * Die Knoepfe liegen auf der Scheibe und nicht daneben, und das ist keine
 * Zier: ein Hochformat fuellt ein Telefon in der Breite ganz aus, die
 * Pfeile stehen dann MITTEN AUF DEM FOTO. Ein helles Zeichen auf einem
 * hellen Bild ist unsichtbar, und zwar unvorhersehbar - es haengt am Foto.
 *
 * Die Scheibe ist Flaeche, kein Kaertchen und kein Schatten: dieselbe
 * Unterscheidung, die das Stylesheet oben fuer das Gelb trifft. Sie hebt
 * nichts hervor, sie sorgt nur dafuer, dass ein Bedienelement in jedem
 * Fall zu sehen ist.
 */
.lupe__knopf {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--nacht) 55%, transparent);
    color: var(--auf-nacht);
    font: 400 1.5rem/1 var(--grotesk);
    cursor: pointer;
}

.lupe__knopf:hover {
    background: var(--nacht);
    color: var(--papier);
}

/*
 * Die Umrandung des Fokus muss hier hell sein. Die Regel der Seite setzt
 * `--tinte`, und die ist auf dieser Flaeche praktisch unsichtbar - der
 * Fokus waere genau dort verloren, wo es nur Tastatur und Knoepfe gibt.
 *
 * SIE WAR DARUM GELB, UND DAS WAR EIN UMWEG (U64). „Hell" heisst nicht
 * „gelb" - es heisst hell. `--papier` ist in JEDER Palette die hellste
 * Marke des Hauses und steht auf `--nacht` bei rund 18:1. Das Gelb war
 * die einzige helle Farbe, die es hier gab, und hat darum jahrelang
 * ausgesehen wie eine Entscheidung.
 */
.lupe :focus-visible {
    outline: 2px solid var(--papier);
    outline-offset: 2px;
}

.lupe__knopf--zu {
    inset: 0.75rem 0.75rem auto auto;
}

.lupe__knopf--zurueck {
    inset: 50% auto auto 0.5rem;
    translate: 0 -50%;
}

.lupe__knopf--vor {
    inset: 50% 0.5rem auto auto;
    translate: 0 -50%;
}

/* ----------------------------------------------------------- Fliesstext */

/*
 * `:not(.seitentitel)` (U67): der Seitentitel bringt seine Groesse selbst
 * mit und soll sie behalten.
 *
 * Ohne das gewann diese Regel - `.fliesstext h1` ist ein Element MEHR als
 * `.seitentitel` und damit spezifischer. Die News-Seite steht nicht im
 * Fliesstext und bekam ihre 58 px, Freunde und Kontakt blieben bei 44:
 * dieselbe Klasse, dieselbe Absicht, zwei Groessen. Genau die Sorte
 * Unterschied, die man sieht, ohne sie benennen zu koennen.
 *
 * Fuer eine Ueberschrift IM Text - eine, die aus dem CMS-Markdown kommt -
 * gilt die Regel unveraendert weiter.
 */
.fliesstext h1:not(.seitentitel) {
    margin: 1.125rem 0 2.375rem;
    font-size: clamp(1.875rem, 4vw, 2.75rem);
    line-height: 1.05;
    max-width: 20ch;
}

.fliesstext p,
.fliesstext li {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--fliess);
    max-width: 38rem;
    text-wrap: pretty;
}

.fliesstext p {
    margin: 0 0 1.5rem;
}

.fliesstext p:last-child {
    margin-bottom: 0;
}

/*
 * Die Auszeichnung, die der interne Editor kennt: "# " wird h2, "## "
 * wird h3, "- " eine Liste. Die Agentur schreibt Klartext - wie er
 * aussieht, entscheidet sich hier und nicht beim Tippen.
 */
.fliesstext h2 {
    margin: 2.75rem 0 0.75rem;
    font-size: 1.5rem;
    letter-spacing: -0.025em;
}

.fliesstext h3 {
    margin: 2rem 0 0.5rem;
    font-size: 1.125rem;
    letter-spacing: -0.015em;
}

.fliesstext h2:first-of-type {
    margin-top: 0;
}

.fliesstext ul {
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--linie);
    max-width: 38rem;
}

.fliesstext li {
    padding: 0.6875rem 0;
    border-bottom: 1px solid var(--linie);
}

/*
 * Der Verweis traegt den KLANG des Hauses (U62). Duenner als frueher:
 * zwei Pixel Gelb waren eine Markierung, zwei Pixel in der Hausfarbe
 * waeren ein Balken.
 *
 * Das Gelb selbst ist mit U64 ganz gegangen - der Entwurf kennt keines.
 * Die letzte Verwendung, der Fokusring in der Vergroesserung, brauchte
 * nie Gelb, sondern nur etwas HELLES; das ist jetzt `--papier`.
 */
.fliesstext a {
    border-bottom: 1px solid var(--klang);
}

.fliesstext a:hover,
.fliesstext a:focus-visible {
    border-bottom-color: var(--klang-tief);
}

/* --------------------------------------------------------- Kontaktformular */

/*
 * Das einzige Formular dieser Website (U52). Es steht unter dem
 * redaktionellen Text der Kontaktseite und hat denselben Satzspiegel wie
 * er - es ist ein Teil der Seite und kein Kasten, der darauf liegt.
 *
 * Keine Rahmen, keine Schatten, keine Karten: getrennt wird mit
 * Haarlinien und mit Luft, wie ueberall hier. Ein Eingabefeld ist darum
 * eine Flaeche auf tiefem Papier mit einer Linie darunter, und die Linie
 * ist beim Hineinspringen die Tinte selbst.
 */
.kontakt {
    margin-top: 3rem;
    padding-top: 2.75rem;
    border-top: 1px solid var(--linie);
    max-width: 34rem;
}

.kontakt h2 {
    font-size: 1.5rem;
    letter-spacing: -0.02em;
}

.kontakt__vorspann {
    margin: 0.75rem 0 0;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--fliess);
}

.kontakt__formular {
    margin-top: 1.75rem;
}

.kontakt__feld {
    margin-top: 1.375rem;
}

.kontakt__feld label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.9375rem;
    font-weight: 600;
}

.kontakt__feld input,
.kontakt__feld textarea {
    display: block;
    width: 100%;
    padding: 0.75rem 0.875rem;
    background: var(--papier-tief);
    border: 1px solid var(--rand);
    border-radius: 2px;
    color: var(--tinte);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
}

.kontakt__feld textarea {
    resize: vertical;
    min-height: 9rem;
}

.kontakt__feld input:focus,
.kontakt__feld textarea:focus {
    border-color: var(--tinte);
}

/*
 * Ein beanstandetes Feld traegt einen kraeftigen Rand UND einen Satz
 * darunter. Der Rand allein waere Farbe als einzige Auskunft (WCAG
 * 1.4.1); die Tinte ist zusaetzlich dicker, damit der Unterschied auch
 * ohne Farbwahrnehmung zu sehen ist.
 */
.kontakt__feld.ist-fehlerhaft input,
.kontakt__feld.ist-fehlerhaft textarea {
    border-width: 2px;
    border-color: var(--tinte);
}

.kontakt__fehler {
    margin: 0.4375rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--tinte);
    font-weight: 600;
}

/*
 * Die Sammelmeldung ueber dem Formular - Kadenzsperre, Honigtopf,
 * abgelaufenes Formular. Sie traegt den Balken der Tafel, weil sie
 * dasselbe tut: sie sagt, was los ist, und was man stattdessen tun kann.
 */
.kontakt__warnung {
    margin-top: 1.5rem;
    padding: 1.125rem 1.25rem;
    background: var(--papier-tief);
    border-left: 6px solid var(--klang);
}

.kontakt__warnung p {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--fliess);
}

.kontakt__warnung p + p {
    margin-top: 0.5rem;
}

.kontakt__hinweis {
    margin-top: 1.5rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--leise);
}

.kontakt__knopfreihe {
    margin-top: 1.75rem;
}

/*
 * `.knopf` war bis U52 immer ein <a>. Ein <button> erbt die Schrift des
 * Systems statt der der Seite und traegt keinen Zeiger - beides sieht
 * man erst auf einem fremden Rechner. Der Knopf hier ist trotzdem ein
 * <button type="submit"> und kein aufgehuebschter Verweis: nur er
 * schickt ein Formular ohne JavaScript ab.
 */
button.knopf {
    font-family: inherit;
    cursor: pointer;
}

/*
 * DER HONIGTOPF.
 *
 * `display: none` und nichts anderes. Ein Feld, das mit `left: -9999px`
 * nur aus dem Bild geschoben waere, bliebe im Zugaenglichkeitsbaum und in
 * der Tabulatorreihenfolge - eine Vorlesesoftware laese es vor, und wer
 * sich durch das Formular tabbt, landete darin, ohne es zu sehen. Genau
 * die Falle, die einem Programm gestellt ist, wuerde dann Menschen
 * treffen, die auf die Tastatur angewiesen sind.
 *
 * Die Regel steht hier und nicht als style-Attribut am Feld: ein Programm,
 * das das Markup liest, sieht dem Feld dann nichts an. Wer das Stylesheet
 * auswertet, erkennt die Falle ohnehin - dagegen hilft kein Versteck,
 * sondern nur der unauffaellige Feldname.
 */
.honigtopf {
    display: none;
}

/* ------------------------------------------------------------ Leerzustand */

/*
 * Der wichtigste Zustand dieser Seite, solange niemand veroeffentlicht
 * ist: die Tafel mit dem farbigen Balken. Sie sagt, dass hier nichts steht,
 * und sagt im selben Atemzug, was man stattdessen tun kann. Ein leerer
 * Abschnitt sieht nach Fehler aus - dieser hier nicht.
 */
.tafel {
    max-width: 44rem;
    margin-top: 2.25rem;
    padding: 2.25rem 2.375rem 2.5rem;
    background: var(--papier-tief);
    border-left: 6px solid var(--klang);
}

.tafel h2 {
    font-size: 1.4375rem;
    letter-spacing: -0.02em;
}

.tafel p,
p.leer {
    margin: 0.625rem 0 0;
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--fliess);
    max-width: 32rem;
}

.tafel .knopfreihe {
    margin-top: 1.5rem;
}

/* ------------------------------------------------------------- Fusszeile */

/*
 * Der Fuss ist im Entwurf eine ZEILE (U62), keine Leiste: mittig, klein,
 * und alles nebeneinander. Vorher standen Zeile und Navigation an den
 * gegenueberliegenden Raendern und zogen ueber die ganze Breite eine
 * zweite Aufmerksamkeit auf sich. Unten gehoert niemandem mehr etwas -
 * dort steht, was stehen muss.
 */
.fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem 0.875rem;
    margin-top: 2.625rem;
    padding: 0.6875rem 1.25rem 0.8125rem;
    border-top: 1px solid var(--linie);
    font-size: 0.625rem;
    line-height: 1.4;
    text-align: center;
    color: var(--leise);
}

.fuss p {
    margin: 0;
}

.fussnavigation {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 0.875rem;
}

.fussnavigation a {
    font-size: 0.625rem;
}

.fussnavigation a:hover {
    color: var(--tinte);
}

/* --------------------------------------------------------------- Telefon */

/*
 * Unter 62rem hat die Seitenleiste keinen Platz mehr - 20rem Spalte neben
 * einem Raster geht sich auf einem Telefon nicht aus. Sie wird darum nicht
 * eingeklappt, sondern aufgeschlagen: Wortmarke, Unterzeile, danach die
 * Navigation als zweispaltiges Inhaltsverzeichnis ueber dem Text. Das
 * kostet eine Bildschirmhoehe und spart jedes Menue - und damit jedes
 * Skript. Ein Aufklapper ohne JavaScript ist entweder ein <details>, das
 * sich auf dem grossen Bildschirm nicht sicher offen halten laesst, oder
 * ein Kniff mit einer Checkbox, den kein Screenreader richtig ansagt.
 * Beides ist schlechter als zehn sichtbare Verweise.
 */
@media (max-width: 61.99rem) {
    /*
     * Der Kopf braucht hier nichts mehr (U62): er ist auf jeder Breite
     * mittig, und die Navigation bricht von selbst um. Frueher stand hier
     * die Umstellung der linken Spalte auf eine Zeile oben - eine zweite
     * Fassung desselben Kopfes, die es jetzt nicht mehr gibt.
     */
    .kopf {
        padding-top: 1.25rem;
        /*
         * Hier darf sie umbrechen: unter dem Zeichen ist mehr Platz als
         * daneben, und `--einzug` wird gleich unten wieder zum blossen
         * Rand - Leiste und Inhalt bleiben also auch so in einer Flucht.
         */
        flex-wrap: wrap;
    }

    /*
     * Auf dem Telefon bleibt das Zeichen klein - dort steht die Navigation
     * UNTER ihm, und eine zweite Zeile Kopf kostet den halben ersten
     * Anblick. 2.75rem statt 2.125rem: mitgewachsen wie oben, nur in dem
     * Mass, das diese Breite hergibt.
     */
    .kopf__zeichen {
        height: 2.75rem;
    }

    /*
     * ======================================================================
     * HIER IST DER EINZUG WIEDER DER RAND (U87)
     * ======================================================================
     *
     * `--einzug` ist die Breite des Zeichens plus die Spalte daneben - er
     * stimmt genau so lange, wie die Navigation NEBEN dem Zeichen steht.
     * Auf dieser Breite bricht die Kopfzeile um, die Navigation faengt
     * wieder ganz links an, und derselbe Einzug schoebe den Inhalt um ein
     * Bild weiter nach innen als die Leiste darueber.
     *
     * Die Umbruchstelle selbst kann hier niemand ausrechnen: sie haengt
     * daran, wie viele Menschen und Seiten in der Leiste stehen, und das
     * steht in der Datenbank. 62rem ist die Schwelle, an der diese Seite
     * ohnehin vom grossen Bildschirm auf das Telefon umstellt; zwischen
     * ihr und dem tatsaechlichen Umbruch bleibt ein schmaler Streifen
     * Fensterbreiten, in dem die Kante ein paar Pixel neben der
     * Navigation liegt. Das ist der guenstigere der beiden Fehler.
     */
    :root {
        --einzug: var(--kopf-rand);
    }


    .aufmacher {
        min-height: min(88vh, 34rem);
        padding-bottom: 3rem;
    }

    /*
     * Nur wo Reiter im Kopf stehen: Titel darueber, Reiter darunter.
     * Nebeneinander blieben fuer den Titel zwei Wortbreiten, und die
     * Reiter braechen trotzdem um. Der Abschnittskopf der Startseite
     * (Titel und "Alle ansehen") passt dagegen in eine Zeile.
     */
    .abteilung__kopf:has(.reiter) {
        display: block;
    }

    .abteilung__kopf .reiter {
        margin-top: 1rem;
    }

    /* Auf dem Telefon steht das Jahr ueber dem Titel, nicht daneben. */
    .eintrag {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.125rem;
    }

    .merkmale {
        font-size: 1rem;
        gap: 0 1rem;
    }
}

/* -------------------------------------------------------------- Bewegung */

/*
 * Vier Bewegungen, alle klein: die Kacheln steigen beim Laden gestaffelt
 * auf, der Aufmacher blendet auf, beim Ueberfahren waechst ein Bild kaum
 * merklich in seinem Ausschnitt, und die Vergroesserung blendet auf statt
 * zu erscheinen. Wer im System "weniger Bewegung" gewaehlt hat, bekommt
 * nichts davon - und verpasst nichts, weil keine Information darin steckt.
 */
@media (prefers-reduced-motion: no-preference) {
    .kachel,
    .galerie__bild {
        animation: auftauchen 0.65s var(--ruhig) backwards;
        animation-delay: calc(var(--i, 0) * 30ms);
    }

    .aufmacher__text,
    .profil__oben {
        animation: auftauchen 0.7s var(--ruhig) backwards;
        animation-delay: 60ms;
    }

    /*
     * Beim Oeffnen, nicht beim Blaettern: der Sprung von der Seite in die
     * dunkle Flaeche ist gross genug, dass er einen Moment braucht. Ein
     * Foto weiter ist kein Sprung und blendet darum nicht noch einmal auf.
     */
    .lupe[open],
    .lupe[open]::backdrop {
        animation: aufblenden 0.25s var(--ruhig);
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

@keyframes auftauchen {
    from {
        opacity: 0;
        transform: translateY(0.75rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes aufblenden {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ----------------------------------------------------------------- Druck */

@media print {
    .navigation,
    .fussnavigation,
    .sprungmarke,
    .showreel,
    .knopfreihe {
        display: none;
    }

    .seite {
        display: block;
    }

    body {
        background: #fff;
        color: #000;
    }
}

/* ==========================================================================
 * DIE STARTSEITE (U62)
 * ========================================================================== */

.start {
    max-width: 53.75rem;
    margin: 1.875rem auto 0;
    padding: 0 1.25rem;
}

/* ------------------------------------------------------------- Das Band */

/*
 * Ein QUADRAT, und das ist die tragende Entscheidung des Entwurfs: es
 * bindet die Startseite an dasselbe Format, in dem die Portraits ueberall
 * sonst stehen. Ein Breitband haette die Gesichter beschnitten.
 */
.band {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: #111;
}

/*
 * Ein Bild je Anblick, und es fuellt das Quadrat (U64).
 *
 * Vorher standen zweieinhalb Kacheln nebeneinander - eine angeschnittene
 * dritte sollte sagen „hier geht es weiter". Der Entwurf macht es anders
 * und besser: EIN Portraet, quadratisch, das ganze Feld. Ein Gesicht auf
 * 860 px wirkt; ein Drittel eines Gesichts ist ein Streifen.
 *
 * DIE RECHNUNG, damit sie niemand neu herleiten muss. `--anzahl` ist die
 * Zahl der Menschen im Band; W ist die Breite des Quadrats:
 *
 *   Lauf    = anzahl * 200%  von `.band`      = 2 * anzahl * W
 *   Reihe   = 50%            vom Lauf         = anzahl * W
 *   Kachel  = 100%/anzahl    von der Reihe    = W          <- ein Quadrat
 *
 * Die Bewegung geht um 50% des Laufs, also um genau eine Reihe. Weil die
 * Liste zweimal dasteht, sieht der Sprung an ihrem Ende aus wie keiner.
 */
.band__lauf {
    position: absolute;
    inset: 0;
    display: flex;
    width: calc(var(--anzahl, 1) * 200%);
    /*
     * DIE DAUER HAENGT AN DER ANZAHL (U64).
     *
     * Der Entwurf setzt feste 44 s fuer den ganzen Zug. Das ist dort
     * richtig, weil seine Demo zehn Gesichter hat - viereinhalb Sekunden
     * je Bild. Hier sind es fuenfundzwanzig, und dieselben 44 s machten
     * daraus knapp zwei Sekunden: ein Flackern, kein Vorstellen.
     *
     * Neun Sekunden je Gesicht. Lange genug, um einen Menschen
     * anzusehen, und noch kurz genug, dass sichtbar bleibt, dass es
     * weitergeht. Bei fuenfundzwanzig Personen laeuft der Zug damit
     * dreieinhalb Minuten - das sieht niemand zu Ende, und das soll auch
     * niemand.
     */
    animation: band-zug calc(var(--anzahl, 1) * 9s) linear infinite;
}

.band__reihe {
    display: flex;
    flex: 0 0 50%;
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
 * ======================================================================
 * EINE KACHEL IST NIE SCHWARZ (U70)
 * ======================================================================
 *
 * Sie hatte keinen eigenen Hintergrund, und darunter liegt `.band` mit
 * `#111`. Solange ein Bild nicht gezeichnet ist, sah man also
 * Beinahe-Schwarz - und zwar in zwei ganz verschiedenen Faellen, die
 * gleich aussehen:
 *
 *   WAEHREND DES LADENS   Die Kachel steht im Layout, das Bild ist noch
 *                         unterwegs. Das ist der haeufige Fall: die
 *                         Bilder sind `lazy`, und in einem Band, das
 *                         sich per `transform` bewegt, beginnt der
 *                         Browser erst zu laden, wenn die Kachel
 *                         sichtbar wird.
 *   WENN ES FEHLSCHLAEGT  Das Bild kommt gar nicht. Dann bleibt es
 *                         schwarz, fuer immer.
 *
 * Der erste Fall ist normal und darf nicht aussehen wie der zweite. Ein
 * helles Feld sagt „gleich da"; ein schwarzes sagt „kaputt".
 *
 * `--kachel` ist dieselbe Marke, die `platzhalter()` benutzt, wenn ein
 * Mensch gar kein Foto hat. Eine leere Flaeche sieht damit ueberall auf
 * der Seite gleich aus, egal warum sie leer ist.
 */
.band__kachel {
    position: relative;
    flex: 0 0 calc(100% / var(--anzahl, 1));
    background: var(--kachel);
}

.band__kachel a {
    display: block;
    width: 100%;
    height: 100%;
}

.band__kachel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
    transition: filter 0.4s var(--ruhig);
}

.band__kachel a:hover img,
.band__kachel a:focus-visible img {
    filter: brightness(1.08);
}

.band__name {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.875rem 1.25rem 1.25rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
    font-family: var(--auszug);
    font-size: clamp(0.8125rem, 1.6vw, 1.25rem);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
}

/*
 * Die halbe Breite in 44 s. Weil die Liste zweimal dasteht, steht bei -50 %
 * die zweite Haelfte genau dort, wo die erste anfing - der Sprung zurueck
 * auf 0 ist damit unsichtbar.
 */
@keyframes band-zug {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/*
 * Steht das Band still (weil jemand wenig Bewegung will), soll man es
 * trotzdem durchsehen koennen. Ohne das waeren die hinteren Gesichter
 * unerreichbar.
 */
@media (prefers-reduced-motion: reduce) {
    .band__lauf {
        position: static;
        width: 100%;
        overflow-x: auto;
    }

    .band__reihe[aria-hidden="true"] {
        display: none;
    }

    .band__reihe {
        flex: 1;
    }
}

.band__schleier {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0) 62%);
}

.band__leer {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(135deg, #1b1b1b 0 0.75rem, #161616 0.75rem 1.5rem);
}

/*
 * Der Ruf sitzt hoeher als im Entwurf (14 % statt 7 %), weil unter ihm die
 * Namen der Gesichter laufen. Im Entwurf gibt es dieses Gedraenge nicht -
 * dort heisst die dritte Abteilung „Junge Schauspieler". Hier heisst sie
 * „Junge Schauspieler:innen", und das sind fuenf Zeichen mehr, die den
 * Satz sonst in die Namen schieben.
 */
.band__ruf {
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 14%;
    margin: 0;
    pointer-events: none;
    text-align: right;
}

/*
 * Der Grad haengt an der BREITE DES KASTENS und nicht am Fenster: `cqw`
 * misst den Container, `vw` das Fenster. Bei 860 px Kastenbreite in einem
 * 1600 px breiten Fenster rechnet `vw` mit dem Fenster und laeuft ueber -
 * genau das ist beim ersten Anlauf passiert, „SCHAUSPIELER:INNEN" stand
 * zweizeilig in den Namen.
 *
 * Die Rueckfallebene mit `vw` steht davor: ein Browser ohne
 * Container-Anfragen bekommt den knapperen Wert und damit eher zu klein
 * als zu gross.
 */
.band {
    container-type: inline-size;
}

.band__ruf span {
    display: block;
    font-family: var(--auszug);
    font-weight: 400;
    font-size: clamp(1.125rem, 4.4vw, 2.75rem);
    font-size: clamp(1.125rem, 6.6cqw, 3.25rem);
    line-height: 0.98;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: #fff;
    text-wrap: balance;
}

/* ------------------------------------------------------------- Die Wege */

.wege {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    margin-top: 2.5rem;
    font-family: var(--auszug);
    font-size: clamp(0.9375rem, 2vw, 1.5625rem);
    text-transform: uppercase;
}

.wege a {
    color: var(--klang);
    transition: color 0.18s var(--ruhig), transform 0.18s var(--ruhig);
}

.wege a:hover,
.wege a:focus-visible {
    color: var(--klang-tief);
    transform: translateY(-2px);
}

.wege__strich {
    color: var(--klang);
}

/* ------------------------------------------------------------- Das Wort */

.wort {
    max-width: 32.5rem;
    margin: 4rem auto 0;
    text-align: center;
}

.wort h2 {
    margin: 0 0 0.875rem;
    font-family: var(--auszug);
    font-weight: 400;
    font-size: clamp(1.25rem, 2.6vw, 1.875rem);
    text-transform: uppercase;
    color: var(--leise);
}

.wort p {
    margin: 0;
    font-size: 0.96875rem;
    line-height: 1.5;
    color: var(--fliess);
}

/*
 * Der hervorgehobene Satz (U71).
 *
 * Frueher trug er eine eigene Klasse, weil die Ansicht vier getrennte
 * Zeichenketten setzte. Jetzt schreibt die Redaktion einen gewoehnlichen
 * Absatz und macht ihn **fett** - `:has(strong)` erkennt ihn daran.
 *
 * Das ist die einzige Regel, die jemand lernen muss, um diesen Abschnitt
 * zu setzen, und sie steht im Hinweis unter dem Textfeld.
 */
.wort p:has(strong) {
    margin-top: 1.375rem;
    font-family: var(--auszug);
    font-size: 0.9375rem;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--klang);
}

.wort p:has(strong) strong {
    font-weight: inherit;
}

/* Absaetze untereinander brauchen Luft; der erste nicht. */
.wort p + p {
    margin-top: 0.875rem;
}

/* ==========================================================================
 * DIE WAND: eine Abteilung als Raster ohne Fugen (U62)
 * ========================================================================== */

.abteilung__titel {
    max-width: calc(var(--einzug) + 67.5rem + var(--rand-rechts));
    margin: 1.375rem 0 0.875rem;
    padding: 0 var(--rand-rechts) 0 var(--einzug);
    font-family: var(--lauf);
    font-weight: 300;
    font-size: clamp(1.5rem, 3.4vw, 2.5rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--leise);
}

/*
 * ==========================================================================
 * DAS RUBRIKWORT UEBER DER WAND: WEG, UND NICHT GRUEN (U87)
 * ==========================================================================
 *
 * Die Agentur hat zwei Moeglichkeiten in einem Satz genannt - die Woerter
 * KINDER / JUGENDLICHE / JUNGE SCHAUSPIELER:INNEN weglassen, „oder
 * vielleicht dasselbe Gruen wie bei LA CASTING?!" - und sich fuer keine
 * entschieden. Beide sind gebaut und nebeneinander angesehen worden.
 *
 * DAS GRUEN FAELLT ZWEIMAL DURCH.
 *
 *   Als FARBE: `#8ed874`, das Gruen der Marke LA CASTING, haelt auf
 *   Papier 1,7:1. Das ist keine Farbe, sondern eine Stelle, an der einmal
 *   Text war - die Zeile verschwindet auf dem Bildschirm fast ganz, und
 *   auf einem Laptop in der Sonne vollstaendig. Lesbar waere nur das
 *   tiefere `#3f7d2c` (4,6:1), und das ist dann eben NICHT das Gruen, das
 *   gemeint war.
 *
 *   Als AUSSAGE: es ist die Farbe der anderen Marke. `:le und la` und
 *   LA CASTING teilen sich ein CMS und sonst nichts - eigene Adresse,
 *   eigene Gestaltung, eigenes Stylesheet. Ein gruenes Wort auf der
 *   Agenturseite sagt „hier ist LA CASTING", und zwar ueber einer Flaeche,
 *   auf der die Agentur ihre Schauspieler:innen zeigt.
 *
 * DAS WORT WEGZULASSEN gewinnt auch ohne diese zwei Gruende. Es steht
 * dreimal auf demselben Bildschirm: im Reiter des Browsers, in der Leiste
 * (dort seit U87 hervorgehoben) und noch einmal gross darunter. Ohne es
 * faengt die Wand unmittelbar unter der Navigation an, und genau das ist
 * die Aussage dieser Seite: die Gesichter, sonst nichts.
 *
 * WER ES ZURUECKHOLEN WILL, loescht diese eine Regel. Die Ueberschrift
 * steht weiterhin im Markup und bekommt dann wieder ihren Platz; soll sie
 * dabei gruen sein, ist `#3f7d2c` die einzige Stufe, die durch die
 * Kontrastpruefung geht.
 */
/*
 * NACH `.abteilung__titel` UND NICHT DAVOR - das ist hier kein
 * Geschmack, sondern der Unterschied zwischen wirksam und unwirksam.
 *
 * Beide Regeln haben eine Klasse, also entscheidet die Reihenfolge. Stand
 * dieser Block oben, setzte `.abteilung__titel` das `padding: 0` wieder
 * auf den Einzug zurueck: die Ueberschrift war dann ein 224 px breiter,
 * 1 px hoher Streifen statt des 1x1-Punktes, den dieses Verstecken
 * verlangt. Zu SEHEN war davon nichts - `clip-path` deckt auch den
 * Streifen ab -, und genau darum hat es niemand bemerkt, bis
 * `kante.weg.mjs` die Flaeche gemessen hat. Dieser Weg haelt die
 * Reihenfolge jetzt fest.
 */
.abteilung__titel--rubrik {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/*
 * `auto-fill` und nicht `auto-fit`: bei drei Personen soll die Zeile drei
 * Quadrate zeigen und den Rest frei lassen - `auto-fit` zoege sie auf
 * Bildschirmbreite auseinander, und aus drei Portraits wuerden drei
 * Plakate.
 */
/*
 * ==========================================================================
 * DIE WAND FAENGT UNTER DER NAVIGATION AN (U87)
 * ==========================================================================
 *
 * Sie lief bis U87 von Kante zu Kante - das erste Foto klebte am linken
 * Bildschirmrand, waehrend die Navigation darueber einen halben Daumen
 * weiter innen begann. Die Agentur wollte „das Foto von Lino buendig mit
 * der Navigationsleiste oben".
 *
 * NUR LINKS, nicht rechts: die Aussage dieser Flaeche ist, dass die
 * Gesichter eine Wand bilden und aus dem Bild laufen. Ein Rand auf beiden
 * Seiten machte daraus eine Galerie mit Passepartout; ein Rand links
 * allein gibt ihr einen Anfang und laesst ihr das Ende offen.
 */
.wand {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.75rem), 1fr));
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0 0 0 var(--einzug);
}

/*
 * Die Luft nach oben steckte bis U87 im Aussenabstand des Rubrikworts.
 * Das steht auf der Abteilungsseite nicht mehr da (siehe
 * `.abteilung__titel--rubrik`), und ohne diese Zeile klebte die erste
 * Reihe Gesichter an der Navigation.
 *
 * Nur NACH dem versteckten Wort: auf der Suchseite steht ueber derselben
 * Wand eine sichtbare Zeile, die ihren Abstand selbst mitbringt. Beides
 * zusammen waere eine Luecke.
 */
.abteilung__titel--rubrik + .wand {
    margin-top: 2.25rem;
}

/*
 * ==========================================================================
 * AUF DEM TELEFON LAEUFT DIE WAND VON KANTE ZU KANTE
 * ==========================================================================
 *
 * Auf dem grossen Bildschirm faengt sie eingerueckt an, buendig mit der
 * Navigation - das ist U87 und bleibt so. Auf dem Telefon steht nur noch
 * EIN Foto je Reihe, und dann ist der Einzug kein Anfang mehr, sondern
 * ein weisser Streifen links, dem rechts nichts entspricht. Gemessen bei
 * 375 px: `.wand__kachel` von 20 bis 375 - zwanzig Pixel Papier links,
 * null rechts.
 *
 * Hier zaehlt die andere Haelfte derselben Aussage: die Gesichter bilden
 * eine Wand und laufen aus dem Bild. Auf dieser Breite nach beiden Seiten.
 *
 * DIESE REGEL STEHT HINTER `.wand` UND NICHT IM GROSSEN TELEFON-BLOCK
 * WEITER OBEN. Dort stand sie zuerst - und wirkte nicht: die Kurzform
 * `padding: 0 0 0 var(--einzug)` kommt im Stylesheet SPAETER und gewinnt
 * bei gleicher Spezifitaet. Gemessen: `.wand__kachel` blieb bei left 20.
 *
 * `--einzug` selbst bleibt unangetastet - daran haengt der Textsatz der
 * ganzen Seite.
 */
@media (max-width: 61.99rem) {
    .wand {
        padding-left: 0;
    }
}

.wand__kachel {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: #1b1b1b;
}

.wand__kachel a {
    display: block;
    width: 100%;
    height: 100%;
}

.wand__kachel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
    transition: filter 0.3s var(--ruhig), transform 0.5s var(--ruhig);
}

.wand__kachel a:hover img,
.wand__kachel a:focus-visible img {
    filter: saturate(1.08) contrast(1.04);
    transform: scale(1.015);
}

.wand__name {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.375rem 0.75rem 1.125rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
    font-family: var(--auszug);
    font-size: clamp(0.875rem, 1.4vw, 1.1875rem);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
}

@media (prefers-reduced-motion: no-preference) {
    .wand__kachel {
        animation: auftauchen 0.5s var(--ruhig) backwards;
        animation-delay: calc(var(--i, 0) * 30ms);
    }
}

/* ==========================================================================
 * DAS PROFIL (U62)
 * ========================================================================== */

.profil__aufmacher {
    margin: 0 0 2.5rem;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #1b1b1b;
}

/*
 * Derselbe Fokuspunkt wie der Vollbild-Aufmacher (U74).
 *
 * 16:10 aus einem 3:4-Bild heisst: rund vier Zehntel der Hoehe fallen weg.
 * Das ist nach der Startseite der schaerfste Beschnitt dieser Website, und
 * es ist DASSELBE Foto - das Titelbild der Person. Zwei feste Zahlen fuer
 * dieselbe Frage an demselben Bild waeren genau der Zustand, den U74
 * abschafft.
 *
 * Der Rueckfall bleibt die bisherige Zahl: wo kein Punkt im Markup steht,
 * sieht die Seite aus wie vorher.
 */
.profil__aufmacher img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--fokus, 50% 20%);
}

.profil__aufmacher--leer {
    display: grid;
    place-items: center;
}

.profil__aufmacher .nachweis {
    margin-top: 0.5rem;
}

/*
 * Zwei Spalten, und die linke ist die schwerere: dort stehen der Name und
 * die weiteren Fotos. Rechts die Angaben - im Entwurf eine schmale Spalte
 * aus Versalien, die neben dem Namen steht statt unter ihm.
 */
.profil__oben {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 2.125rem;
    align-items: start;
}

.profil__name {
    margin: 0 0 1.625rem;
    font-family: var(--auszug);
    font-weight: 400;
    font-size: clamp(1.625rem, 3.6vw, 2.625rem);
    letter-spacing: 0.02em;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--tinte);
}

.profil__abteilung {
    margin: -1.125rem 0 1.625rem;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--leise);
}

/*
 * ==========================================================================
 * DIE WEITEREN FOTOS: QUADRATISCH, UND SO BREIT WIE NOETIG (U73)
 * ==========================================================================
 *
 * Hier stand „Hochformat, weil Setcard-Fotos hochformatig sind und ein
 * quadratischer Zuschnitt Koepfe abschneidet". Die Agentur will das
 * Quadrat - und der Einwand ist damit nicht erledigt, sondern beantwortet:
 * `object-position` nimmt den Beschnitt UNTEN weg, nicht oben. Was
 * verlorengeht, ist Schulter und Hintergrund, nicht das Gesicht.
 *
 * Das Quadrat passt ausserdem zu allem anderen: die Wand einer Abteilung,
 * das Band der Startseite und der Aufmacher sind quadratisch. Die Galerie
 * war die einzige Flaeche im Hochformat.
 *
 * ZUR SPALTENZAHL. Feste drei Spalten liessen bei zwei Fotos ein Drittel
 * der Zeile leer stehen - im Entwurf war das ein voller Kontaktbogen, im
 * Bestand sind es zwei bis vier Bilder. `auto-fit` laesst leere Spuren
 * zusammenfallen: zwei Fotos teilen sich die Breite, vier ruecken
 * zusammen. Die 7 rem Mindestbreite sind dabei die Obergrenze - mehr als
 * vier Spalten entstehen in dieser Spalte nicht.
 */
.galerie__raster {
    display: grid;
    /*
     * ZWEI JE ZEILE, FEST (U74).
     *
     * Hier stand `auto-fit`, und das ergab auf einem breiten Bildschirm
     * drei Spalten - bei vier Fotos also eine Reihe zu dritt und ein
     * Waisenkind darunter. Die Agentur will zwei je Zeile; bei vier
     * Bildern ist das ein sauberes Quadrat, bei drei zwei plus eines.
     *
     * Zwei feste Spalten brauchen kein `min(100%, ...)`: ihre Breite ist
     * immer die halbe Spalte, nie eine feste Zahl, die breiter werden
     * koennte als der Platz. Auf 375 px sind es 167 px je Kachel -
     * nachgemessen, kein seitliches Scrollen.
     */
    grid-template-columns: repeat(2, 1fr);
    gap: 0.125rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.galerie__bild {
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--kachel);
}

/*
 * DER BESCHNITT GEHT VOLLSTAENDIG NACH UNTEN WEG.
 *
 * Ein 3:4-Bild verliert auf dem Quadrat ein Viertel seiner Hoehe. Bei
 * `center 20%` kaemen davon fuenf Prozent OBEN weg - nachgesehen, und bei
 * zwei von vier Fotos war das genau der Scheitel. Mit `top` ist
 * ausgeschlossen, dass ein Kopf angeschnitten wird; was fehlt, ist
 * Huefte und Boden, und die traegt ein Portrait nicht.
 */
.galerie__bild img {
    object-position: center top;
}

/*
 * `grossbild()` legt das Bild in ein `<a>`. Ohne diese Regel misst die
 * Hoehe des Bildes gegen ein Element mit automatischer Hoehe, und
 * `height: 100%` bleibt wirkungslos: die Kachel steht in ihrem Seitenmass,
 * das Bild fuellt sie nur zu drei Vierteln, und darunter klafft die
 * Hintergrundfarbe. Genau so ist es aufgetreten.
 */
.profil__aufmacher > a,
.galerie__bild > a {
    display: block;
    width: 100%;
    height: 100%;
}

.galerie__bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * Die Angaben rechts: Versalien, eng gesetzt, Beschriftung in Tinte.
 *
 * NUR die Schrift, nicht der Aufbau. `.merkmale` ist ein Raster und
 * `.merkmal` ein `display: contents` - zusammen ergeben sie zwei Spalten,
 * in denen Beschriftung und Wert aneinander ausgerichtet stehen. Beim
 * ersten Anlauf habe ich das Raster auf `display: block` gestellt und
 * damit nur den Elternteil umgestellt: das Kind blieb `contents`, und
 * saemtliche Zeilen liefen zu einem Absatz zusammen
 * („18-27 JAHREGROESSE: 180 CMHAARFARBE: ...").
 */
.profil__text .merkmale {
    gap: 0 1.125rem;
    margin: 0;
    font-size: 0.90625rem;
    line-height: 1.55;
    text-transform: uppercase;
    color: var(--fliess);
}

.profil__text .merkmal dt,
.profil__text .merkmal dd {
    padding: 0.1875rem 0;
    border-top: 0;
}

.profil__text .merkmal dt {
    font-weight: 600;
    color: var(--tinte);
}

.profil__text .merkmal dt::after {
    content: ":";
}

.profil__text .koennen {
    margin-top: 1.625rem;
}

.koennen__liste {
    margin: 1.25rem 0 0;
    font-size: 0.90625rem;
    line-height: 1.55;
    text-transform: uppercase;
    color: var(--fliess);
}

.koennen__gruppe {
    margin-bottom: 0.375rem;
}

.koennen__gruppe dt {
    font-weight: 600;
    color: var(--tinte);
}

.koennen__gruppe dd {
    margin: 0;
}

.bio {
    margin: 2.75rem 0 1.25rem;
    max-width: 78ch;
}

.bio h2,
.koennen h2 {
    margin: 0 0 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--klang);
}

.bio p {
    margin: 0 0 0.75rem;
    font-size: 0.96875rem;
    line-height: 1.62;
    color: var(--fliess);
}

.zurueck {
    display: inline-block;
    margin: 1.875rem 0;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--klang);
    transition: opacity 0.18s var(--ruhig);
}

.zurueck:hover,
.zurueck:focus-visible {
    opacity: 0.6;
}

/* ==========================================================================
 * FREUNDE: die Linkliste des Entwurfs (U62)
 * ==========================================================================
 *
 * Im CMS ist das gewoehnlicher Markdown - `## Name`, Notiz, Adresse. Der
 * Entwurf zeigt daraus Spalten mit kleinen Ueberschriften und Verweisen
 * mit Pfeil. Beides dieselbe Quelle: die Agentur pflegt eine Liste, das
 * Stylesheet macht daraus die Ansicht.
 */

/*
 * Die eigene Breite ist mit U87 weggefallen: `block--weit` gibt sie jeder
 * redaktionellen Seite, und zwei Stellen fuer dieselbe Zahl waeren genau
 * der Zustand, den U87 abschafft. Was hier bleibt, ist die Spaltigkeit.
 */


/*
 * Spalten statt Raster: die Liste ist EINE Folge von Eintraegen, und
 * `columns` laesst sie umbrechen, ohne dass jemand sie im CMS in Gruppen
 * teilen muesste. Ein Eintrag wird dabei nie zerrissen.
 */
.seite--freunde .fliesstext__inhalt,
.seite--freunde > :is(h3, p) {
    break-inside: avoid;
}

@media (min-width: 40rem) {
    .seite--freunde {
        columns: 2;
        column-gap: 2.5rem;
    }

    .seite--freunde > h1,
    .seite--freunde > .kicker {
        column-span: all;
    }
}

.seite--freunde h3 {
    margin: 1.375rem 0 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--linie);
    font-size: 0.71875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--klang);
}

/*
 * JEDER Absatz mit einem Verweis ist eine Zeile der Liste - nicht nur
 * der erste einer Gruppe (U64).
 *
 * Hier stand `h3 + p`, und das trifft genau einen Absatz je Gruppe: den
 * unmittelbar folgenden. Eine Gruppe mit drei Haeusern bekam damit eine
 * gestaltete Zeile und zwei nackte. Der Fehler faellt erst auf, wenn
 * jemand die zweite Adresse eintraegt - im CMS, lange nach diesem
 * Stylesheet.
 *
 * `:has(a)` unterscheidet die Zeilen der Liste vom Eingangstext, ohne
 * dass die Redaktion irgendetwas auszeichnen muesste: ein Absatz mit
 * Verweis ist ein Eintrag, einer ohne ist Text.
 */
.seite--freunde p:has(a) {
    margin: 0 0 0.625rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--leise);
}

/*
 * Der Pfeil sitzt am ABSATZ und nicht am Verweis (U64).
 *
 * Am `a::before` waere er Teil des zugaenglichen Namens - eine
 * Vorlesesoftware sagte „Pfeil nach rechts oben, TASK Theaterakademie".
 * Dieselbe Falle wie beim Personenverweis in U63. Am Absatz gehoert er
 * zu keinem Bedienelement und bleibt, was er ist: ein Zeichen dafuer,
 * dass diese Zeile aus der Seite hinausfuehrt.
 */
.seite--freunde p:has(a)::before {
    content: "↗";
    margin-right: 0.4375rem;
    font-size: 0.6875rem;
    color: var(--rand);
}

.seite--freunde p:has(a) a {
    display: inline-block;
    font-size: 0.90625rem;
    color: var(--tinte);
    word-break: break-word;
}

.seite--freunde p:has(a) a:hover,
.seite--freunde p:has(a) a:focus-visible {
    color: var(--klang);
}

/* Der Eingangstext: breiter, dunkler, mit Luft darunter. */
.seite--freunde p:not(:has(a)) {
    max-width: 56ch;
    margin: 0 0 2.5rem;
    font-size: 0.96875rem;
    line-height: 1.6;
    color: var(--fliess);
}

@media (min-width: 40rem) {
    .seite--freunde > p:not(:has(a)) {
        column-span: all;
    }
}

/* ==========================================================================
 * KONTAKT: Wort und Formular nebeneinander (U62)
 * ==========================================================================
 *
 * Der Entwurf stellt beides in zwei Spalten auf eine Flaeche in der
 * Hausfarbe: links, was die Agentur sagt, rechts das Formular auf hellem
 * Grund. Untereinander - so stand es bis U62 - liest man erst sechs
 * Absaetze und findet das Formular erst danach.
 *
 * Der Markdown im CMS bleibt unveraendert. Nur `seite--kontakt` weiss,
 * dass diese eine Seite zwei Spalten hat.
 */

/*
 * KEINE FARBFLAECHE MEHR HINTER DER KONTAKTSEITE (U67).
 *
 * Sie stand auf einem randlosen Feld in der Hausfarbe, mit weisser Karte
 * darauf - so zeigt es der Entwurf, und so war es auch richtig gebaut.
 * Neben News und Freunde gestellt war es trotzdem der Ausreisser: zwei
 * Flaechen auf Papier, eine auf Farbe; zwei Ueberschriften links in der
 * Hausfarbe, eine mittig in Weiss.
 *
 * Eine Website, deren Seiten verschieden gebaut sind, wirkt an der
 * auffaelligsten Stelle unfertig - und das ist hier die Kontaktseite,
 * also die, auf der jemand eine Anfrage schreibt.
 *
 * Das Formular behaelt seinen hellen Grund: er trennt es vom Text
 * daneben, und das tut er auch ohne Farbe drumherum.
 */

@media (min-width: 56rem) {
    .seite--kontakt > .seite__karte {
        display: grid;
        grid-template-columns: 1fr minmax(18rem, 24rem);
        gap: 0 2.5rem;
        align-items: start;
    }

    /*
     * Das Formular in die zweite Spalte, und zwar ueber alle Zeilen: der
     * redaktionelle Text ist laenger, und ohne `grid-row` rutschte das
     * Formular unter seinen ersten Absatz.
     */
    .seite--kontakt .kontakt {
        grid-column: 2;
        grid-row: 1 / span 99;
        margin-top: 0;
    }
}

/*
 * Das Formular behaelt seinen hellen Grund - er trennt es vom Text
 * daneben. Die negativen Aussenabstaende sind mit der Farbflaeche
 * weggefallen: sie zogen die Karte ueber ihren eigenen Innenabstand
 * hinaus, und den gibt es jetzt nicht mehr.
 */
.seite--kontakt .kontakt {
    margin-top: 2.5rem;
    padding: 2.5rem 2.125rem;
    background: var(--papier-tief);
}



/*
 * Das Formular bekommt eine eigene Flaeche - im Entwurf hebt es sich
 * hell vom farbigen Grund ab. Hier andersherum: die Seite ist Papier,
 * also steht das Formular eine Spur tiefer.
 */
.seite--kontakt > .kontakt {
    padding: 1.75rem;
    background: var(--papier-tief);
}

.seite--kontakt > .kontakt h2 {
    margin-top: 0;
    font-family: var(--auszug);
    font-weight: 400;
    font-size: 1.1875rem;
    text-transform: uppercase;
    color: var(--tinte);
}

.seite--kontakt .kontakt__vorspann {
    font-size: 0.84375rem;
    line-height: 1.55;
    color: var(--leise);
}

/* ==========================================================================
 * DAS SUCHFELD IN DER NAVIGATION (U62)
 * ========================================================================== */

/*
 * Nur fuer Vorlesesoftware. Die Beschriftung des Feldes darf nicht fehlen -
 * ein Eingabefeld, das nur einen Platzhaltertext hat, ist fuer sie
 * namenlos, und der Platzhalter verschwindet beim ersten Zeichen.
 */
.nurlesbar {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.suchfeld {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.suchfeld::before {
    content: "⌕";
    font-size: 0.9375rem;
    color: var(--rand);
}

.suchfeld input {
    width: 6.75rem;
    border: 0;
    border-bottom: 1px solid transparent;
    background: none;
    font-family: var(--lauf);
    font-size: 0.8125rem;
    font-style: italic;
    color: var(--fliess);
    transition: border-color 0.18s var(--ruhig), width 0.18s var(--ruhig);
}

.suchfeld input::placeholder {
    color: var(--leise);
}

/*
 * DAS FELD WAECHST BEIM FOKUS NICHT (U64).
 *
 * Hier stand `width: 9rem` gegen 6.75rem im Ruhezustand. Das Feld steht
 * am Ende der Navigationszeile - es zog beim Hineinklicken alles davor
 * um zwei Zentimeter nach links, und wer gerade auf einen Weg zielte,
 * traf daneben. Eine Zeile, die sich bewegt, weil man sie anfasst, ist
 * schlimmer als eine, die zu kurz aussieht.
 *
 * Der Fokus bleibt sichtbar - er faerbt die Linie darunter.
 */
.suchfeld input:focus {
    border-bottom-color: var(--klang);
    outline: none;
}

/*
 * Der Knopf ist da und wird nur nicht gezeigt: ohne ihn liesse sich das
 * Formular mit der Tastatur zwar per Eingabetaste abschicken, aber wer
 * mit Sprachsteuerung oder einer Schaltertastatur arbeitet, braucht ein
 * Ziel zum Ausloesen. Beim Fokus kommt er hervor.
 */
.suchfeld button {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
    background: none;
}

.suchfeld button:focus-visible {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
    padding: 0.25rem 0.625rem;
    background: var(--klang);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
}

/* ==========================================================================
 * NEWS: das Kachelraster des Entwurfs (U64)
 * ==========================================================================
 *
 * In U63 stand hier eine Liste. `Klassisch.dc.html` zeigt Kacheln - und
 * hat recht: eine Agenturmeldung handelt fast immer von einem Menschen,
 * und das Gesicht IST die Nachricht.
 */

/* Dieselbe linke Kante wie ueberall (U87) - siehe `--einzug`. */
.neues {
    max-width: calc(var(--einzug) + 67.5rem + var(--rand-rechts));
    margin: 0;
    padding: 1.875rem var(--rand-rechts) 0 var(--einzug);
}

.neues__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

/*
 * EINE UEBERSCHRIFT FUER ALLE FLAECHEN (U67).
 *
 * Hier standen drei Regeln fuer dieselbe Sache, mit drei verschiedenen
 * Groessen: News auf 3,625rem, Freunde auf 3,25rem, Kontakt auf 2,75rem -
 * und Kontakt zusaetzlich mittig und hell, weil es als einzige Flaeche
 * auf Farbe stand.
 *
 * Keine davon war falsch; zusammen waren sie drei Auftritte derselben
 * Website. Jetzt traegt jede Seite `seitentitel`, und wer die Groesse
 * aendert, aendert sie ueberall.
 */
.seitentitel {
    margin: 0 0 1.25rem;
    font-family: var(--auszug);
    font-weight: 400;
    font-size: clamp(1.875rem, 5vw, 3.625rem);
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--klang);
}

.neues__marke {
    padding: 0.75rem 1.25rem;
    background: var(--klang-hauch);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--klang-satt);
}

.kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.875rem), 1fr));
    gap: 0.875rem;
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
}

.kachel a {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: opacity 0.2s var(--ruhig);
}

.kachel a:hover,
.kachel a:focus-visible {
    opacity: 0.72;
}

.kachel__bild {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--kachel);
}

/*
 * Eine Meldung ohne Person traegt kein fremdes Gesicht, sondern eine
 * Flaeche (U64). Siehe `OeffentlichRepository::mitTitelbildern()`.
 */
.kachel__bild--leer {
    background: var(--klang-hauch);
}

.kachel__bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
}

.kachel__haus {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.625rem 0.625rem 0.625rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
}

.kachel__bild--leer .kachel__haus {
    background: none;
    color: var(--klang-satt);
}

.kachel__wort {
    font-size: 0.71875rem;
    line-height: 1.45;
    color: var(--fliess);
}

.kachel .meldung__datum {
    margin: 0;
    font-size: 0.78125rem;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 400;
    color: var(--leise);
}

/* ==========================================================================
 * AKTUELLES: die Meldungen (U63)
 * ==========================================================================
 *
 * Eine Liste, keine Wand. Die Abteilungen zeigen Gesichter, weil man dort
 * nach einem Gesicht sucht; hier sucht man nach einer Nachricht, und die
 * besteht aus Worten.
 *
 * `<ol>` und nicht `<ul>`: die Reihenfolge ist die Aussage - das Neueste
 * steht oben. Eine Vorlesesoftware sagt „Liste mit 12 Eintraegen, erster
 * Eintrag", und das stimmt dann auch.
 */

.meldungen {
    margin: 0;
    padding: 0;
    list-style: none;
}

.meldung {
    padding: 2rem 0;
    border-bottom: 1px solid var(--linie);
}

.meldung:first-child {
    padding-top: 0;
}

.meldung:last-child {
    border-bottom: 0;
}

.meldung__datum {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--leise);
}

.meldung__titel {
    margin: 0 0 0.625rem;
    font-family: var(--auszug);
    font-weight: 400;
    font-size: clamp(1.25rem, 2.6vw, 1.75rem);
    line-height: 1.24;
}

.meldung__titel a {
    color: inherit;
    text-decoration: none;
    transition: color 0.18s var(--ruhig);
}

.meldung__titel a:hover,
.meldung__titel a:focus-visible {
    color: var(--klang);
}

.meldung__vorspann {
    margin: 0 0 0.75rem;
    max-width: 44rem;
    font-size: 1rem;
    line-height: 1.62;
    color: var(--fliess);
}

/*
 * Der Name der Person traegt einen Pfeil, weil er woanders hinfuehrt als
 * der Titel darueber - in ein Profil und nicht in die Meldung. Ohne ihn
 * stuenden zwei Verweise untereinander, die gleich aussehen und
 * Verschiedenes tun.
 *
 * Der Pfeil steht dabei im MARKUP und nicht als `content` in einem
 * `::after` (U63). Erzeugter Text landet im zugaenglichen Namen: eine
 * Vorlesesoftware sagte dann „Mila Berger Pfeil nach rechts". Im Markup
 * traegt er `aria-hidden` und ist, was er ist - Zierrat. Dieselbe Machart
 * wie bei `.zurueck`, wo es aus demselben Grund so steht.
 */
.meldung__person {
    margin: 0;
    font-size: 0.875rem;
}

.meldung__person a {
    color: var(--klang);
    text-decoration: none;
    font-weight: 500;
}

.meldung__person a:hover,
.meldung__person a:focus-visible {
    text-decoration: underline;
}

/* Die einzelne Meldung: dieselben Bausteine, nur groesser und ohne Linie. */
.meldung--einzeln {
    display: block;
    border-bottom: 0;
    padding: 0;
}

.meldung--einzeln .meldung__titel {
    font-size: clamp(1.75rem, 4.6vw, 3.25rem);
    margin-bottom: 1rem;
}

.meldung--einzeln .meldung__vorspann {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
}

.meldung--einzeln .meldung__person {
    margin-top: 1.5rem;
}


/* ==========================================================================
 * DER VOLLBILD-AUFMACHER (U73)
 * ==========================================================================
 *
 * Die zweite Startseite. Welche gilt, entscheidet das CMS; hier steht nur,
 * wie diese aussieht. Das Band darueber bleibt unberuehrt - wer zurueck
 * will, stellt im CMS um und braucht dafuer keinen Deploy.
 *
 * ALLES HIER HAENGT AN EINEM ELEMENT, das die Seite entweder enthaelt oder
 * nicht: `.splash`. Darum braucht es keine Klasse am `<body>` und keine
 * zweite Hoelle im PHP - `:has()` fragt die Seite, was sie ist.
 * ========================================================================== */

.splash {
    position: relative;
    /*
     * DIE AUGENLINIE: auf welcher Hoehe der Buehne die Augen liegen, in
     * Prozent. Etwas ueber der Mitte - tiefer wirkt das Portrait geduckt,
     * hoeher rutscht der Kopf in die Navigationszeile. Wie aus dieser
     * einen Zahl eine Verschiebung wird, steht bei `.splash__bild img`.
     */
    --augenlinie: 38;
    /*
     * GRENZE: wie weit hoechstens in ein Bild hineingefahren werden darf,
     * um seine Augen auf die Linie zu bringen - als Vielfaches der
     * Groesse, die die Buehne gerade eben deckt.
     *
     * Ohne eine Grenze waere die Rechnung bei jedem Foto erfuellbar und
     * bei manchen absurd: sitzen die Augen auf 7 % der Bildhoehe, verlangt
     * sie das Fuenffache, und vom Portrait bliebe ein Nasenfluegel. 1.6
     * ist die Linie dazwischen - es reicht am Schreibtisch fuer alle
     * Fotos ab 12 % und auf dem Telefon fuer alle ab 24 %, und das ist bei
     * den gemessenen Fotos die grosse Mehrheit. Mehr hiesse: ein paar
     * Ausreisser richtig, und dafuer bei allen anderen die Moeglichkeit,
     * versehentlich sehr nah heranzufahren.
     */
    --grenze: 1.6;
    /*
     * `100svh` und nicht `100vh`: auf dem Telefon rechnet `vh` mit
     * ausgefahrener Adresszeile, und der Aufmacher waere beim ersten
     * Anblick genau um diese Leiste zu hoch - der Ruf stuende unter dem
     * unteren Bildrand. `svh` ist die kleine Fassung und immer sichtbar.
     */
    height: 100svh;
    min-height: 30rem;
    overflow: hidden;
    /*
     * Volle Breite, obwohl die Seite sonst in einer Spalte steht. Das ist
     * der Punkt eines Aufmachers; ohne das waere er bloss ein grosses
     * Bild in der Spaltenbreite.
     */
    margin-bottom: 3.75rem;
    background: #111;
    isolation: isolate;
    /*
     * DIE BUEHNE MISST SICH SELBST (U76).
     *
     * Darin rechnen die Bilder mit `cqw`/`cqh` - der Breite und Hoehe
     * GENAU DIESES Kastens. Mit `svw`/`svh` waere es fast dasselbe und
     * einmal falsch: `min-height: 30rem` eine Zeile weiter oben macht
     * den Aufmacher auf einem flachen Fenster hoeher als der Bildschirm,
     * und dann rechnete jede Zahl darunter mit der falschen Hoehe.
     *
     * `size` und nicht `inline-size`, weil die Hoehe gebraucht wird. Das
     * ist hier gefahrlos: Hoehe und Breite dieses Kastens stehen oben
     * fest und haengen an keinem Kind.
     */
    container-type: size;
}

.splash__stapel {
    position: absolute;
    inset: 0;
}

/*
 * Vier Bilder uebereinander, eines sichtbar.
 *
 * DIE RECHNUNG, damit sie niemand neu herleiten muss. Bei vier Bildern und
 * 32 s Umlauf hat jedes 8 s. Davon sind rund 6 s voll sichtbar und je 1 s
 * Uebergang. In Prozent des Umlaufs:
 *
 *   0 %      durchsichtig      (das vorige Bild steht noch)
 *   3 %      voll              (eingeblendet)
 *   22 %     voll              (steht)
 *   25 %     durchsichtig      (ausgeblendet)
 *   100 %    durchsichtig
 *
 * Das erste Bild muss zusaetzlich am ENDE des Umlaufs wieder da sein,
 * sonst blitzt der schwarze Grund durch, bevor es an der Reihe ist. Es
 * liegt aber ohnehin zuunterst im Stapel und ist nie ganz weg: sein
 * `opacity` faellt auf 0, das Bild darunter ist der Grund - also bekommt
 * es als einziges keine Animation, sondern steht fest. Die drei anderen
 * blenden sich darueber.
 */
.splash__bild {
    position: absolute;
    inset: 0;
    opacity: 0;
    animation: splash-blende 32s linear infinite;
    animation-delay: calc(var(--i, 0) * 8s);
    /*
     * Das Bild darin ist GROESSER als dieser Kasten und wird hier
     * beschnitten - das ist der Beschnitt, den `object-fit: cover` bis
     * U76 selbst besorgt hat. Seither rechnet die Regel darunter, und
     * dann muss jemand anders schneiden.
     */
    overflow: hidden;
    background-color: #111;
}

/*
 * ==========================================================================
 * DIE AUGENLINIE (U76) - WARUM `object-position` DAS NICHT KONNTE
 * ==========================================================================
 *
 * `object-position: 50% 28%` heisst nicht „die Augen auf 28 % der Buehne".
 * Es heisst: der Punkt auf 28 % der BILDhoehe kommt auf 28 % der
 * KASTENhoehe zu liegen. Wo die Augen landen, IST also die Zahl selbst.
 *
 * Solange fuer alle Bilder dieselbe Zahl im Stylesheet stand, war das
 * unauffaellig (und dafuer stand der Kopf mal zu hoch, mal angeschnitten).
 * Seit U74 kommt die Zahl je Foto aus dem CMS, und bei den 145 gemessenen
 * Fotos reicht sie von 7 bis 50. Also wanderten die Augen im Wechsel um
 * bis zu 43 % der Bildschirmhoehe auf und ab - genau das, was zu sehen war.
 *
 * DIE RECHNUNG STATTDESSEN. Das Bild liegt in voller Deckungsgroesse im
 * Kasten; verschoben wird es per `translate`:
 *
 *   gewuenscht:  Augen auf  `--augenlinie` % der BUEHNE
 *   vorhanden:   Augen auf  `--fokus-senkrecht` % der BILDhoehe
 *   also:        schiebe um (augenlinie% der Buehne - fokus% des Bildes)
 *
 * Und genau das steht unten: `1cqh` ist ein Prozent der Buehnenhoehe, `1%`
 * in `translate` ist ein Prozent der eigenen Bildhoehe. Zwei Einheiten,
 * zwei Bezugsgroessen, eine Subtraktion. Fuer JEDES Bild und bei JEDER
 * Fenstergroesse landen die Augen danach auf derselben Linie.
 *
 * DAS KLAMMERN. Wo die Rechnung einen Rand freilegen wuerde - bei einem
 * Foto, dessen Augen schon fast am oberen Bildrand sitzen -, gewinnt die
 * Deckung: `clamp()` haelt die Verschiebung zwischen „Bildoberkante auf
 * Buehnenoberkante" (0) und „Bildunterkante auf Buehnenunterkante"
 * (`100cqh - 100%`, immer negativ). Das ist dieselbe Klemmung, die
 * `object-position` eingebaut hat; sie geht hier nicht verloren.
 *
 * BEIDE BILDER, EINE REGEL. Das unscharfe Vorschaubild (`::before`, aus
 * `--vorschau`) und das scharfe Portrait teilen sich diesen Block. Nicht
 * aus Sparsamkeit: stuenden die Zahlen zweimal da, koennten sie
 * auseinanderlaufen, und dann SPRINGT das Bild in dem Augenblick, in dem
 * das grosse geladen ist. Das ist der Fehler, den U73 behoben hat, und er
 * bleibt behoben, weil es hier nur eine Stelle gibt.
 * ========================================================================== */

.splash__bild::before,
.splash__bild img {
    position: absolute;
    left: 0;
    top: 0;
    /*
     * DIE FORM DES BILDES kommt aus dem Markup (`bildform()`), weil sie
     * je Bild eine andere ist: im Bestand sind die Ableitungen fast alle
     * quadratisch, einzelne 600x760. Der Rueckfall 3:4 ist der Vorschlag
     * aus `Bildableitung::SEITENVERHAELTNIS` - er gilt fuer ein Bild, das
     * seine Masse nicht mitbringt, und fuer kein anderes.
     */
    aspect-ratio: var(--bildbreite, 3) / var(--bildhoehe, 4);
    /*
     * DECKUNG: die kleinste Hoehe, bei der dieses Bild die Buehne fuellt.
     * Entweder ist die Buehne hochkant - dann ist es ihre eigene Hoehe -,
     * oder sie ist breit, dann folgt die Hoehe aus ihrer Breite und der
     * Form.
     */
    --deckung: max(100cqh, calc(100cqw * var(--bildhoehe, 4) / var(--bildbreite, 3)));
    /*
     * REICHWEITE: wie hoch das Bild sein MUESSTE, damit die Augen die
     * Linie ueberhaupt erreichen koennen.
     *
     * Verschieben laesst sich nur, was uebersteht. Ein Bild, das genau
     * passt, hat keinen Weg; eines, dessen Augen weit oben sitzen,
     * braucht viel Weg. Die zwei Zeilen sind die beiden Grenzen, an die
     * das Schieben stoesst: oben darf die Bildkante nicht in die Buehne
     * rutschen, unten auch nicht.
     */
    --reichweite: max(
        calc(100cqh * var(--augenlinie) / var(--fokus-senkrecht, 28)),
        calc(100cqh * (100 - var(--augenlinie)) / (100 - var(--fokus-senkrecht, 28)))
    );
    /*
     * Genommen wird, was noetig ist - mindestens die Deckung, hoechstens
     * das `--grenze`-fache davon. Ein Foto, dessen Augen schon fast am
     * oberen Rand sitzen, verlangt rechnerisch das Fuenffache; dafuer
     * muesste so weit hineingefahren werden, dass vom Portrait nur noch
     * Gesicht bliebe. Es kommt dann so nah an die Linie, wie die Grenze
     * zulaesst, und das ist immer noch naeher als ohne diese Rechnung.
     */
    height: clamp(var(--deckung), var(--reichweite), calc(var(--deckung) * var(--grenze)));
    width: auto;
    /*
     * Die Grundregel `img { max-width: 100% }` haelt jedes Bild in seiner
     * Spalte - hier soll es genau das NICHT. Auf dem Telefon ist die
     * Buehne hochkant, das deckende Bild also breiter als sie, und die
     * Grundregel schnitt es auf Buehnenbreite zurueck: oben blieb ein
     * Drittel schwarz. Am Schreibtisch faellt das nie auf, weil dort
     * Buehnenbreite und Bildbreite dieselbe Zahl sind.
     */
    max-width: none;
    translate:
        clamp(calc(100cqw - 100%), calc(50cqw - var(--fokus-waagerecht, 50) * 1%), 0px)
        clamp(calc(100cqh - 100%), calc(var(--augenlinie) * 1cqh - var(--fokus-senkrecht, 28) * 1%), 0px);
    /*
     * Der Zug (unten) vergroessert das Bild um 6 %. Um welchen Punkt, sagt
     * diese Zeile - und es ist der Fokuspunkt selbst. Um die Bildmitte
     * gedreht wanderten die Augen waehrend der Fahrt mit, je nach Foto
     * verschieden weit, und die Linie waere wieder keine.
     */
    transform-origin: calc(var(--fokus-waagerecht, 50) * 1%) calc(var(--fokus-senkrecht, 28) * 1%);
}

.splash__bild::before {
    content: "";
    /*
     * Die Breite `mini`, auf volle Groesse gezogen. Kein `filter: blur()`:
     * 150 px auf 1440 gezogen ist unscharf genug, der Browser
     * interpoliert. Ohne Vorschau bleibt die schwarze Flaeche des Kastens.
     */
    background-image: var(--vorschau, none);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/*
 * Das unterste Bild steht und blendet nicht. Es ist der Grund, auf dem
 * die anderen erscheinen - ohne es waere zwischen dem letzten und dem
 * ersten Bild eine Sekunde Schwarz.
 */
.splash__bild:first-child {
    opacity: 1;
    animation: none;
}

.splash__bild img {
    /*
     * Groesse und Lage stehen im Block oben, gemeinsam mit dem
     * Vorschaubild. Hier steht nur, was dem scharfen Bild allein gehoert.
     *
     * `object-fit: cover`, obwohl die Masse schon stimmen sollten: der
     * Kasten bekommt die Form aus `fotos.breite/hoehe`, die Datei hat sie
     * auch (fuer alle 454 Ableitungen nachgeprueft). Es ist die
     * Versicherung gegen die eine Datei, bei der die beiden doch einmal
     * auseinandergehen - ohne sie waere sie verzerrt statt beschnitten.
     */
    object-fit: cover;
    display: block;
    /*
     * EIN LANGSAMER ZUG INS BILD.
     *
     * Die Ableitungen sind quadratisch zugeschnittene Portraits. Auf
     * einem breiten Bildschirm bleibt davon ein Querformat uebrig, und
     * ein stehendes Querformat aus einem Quadrat sieht nach Beschnitt
     * aus. Eine sehr langsame Fahrt macht daraus eine Einstellung.
     *
     * 1.06 und 24 s: so wenig und so langsam, dass man die Bewegung
     * nicht als Bewegung bemerkt - man merkt nur, dass das Bild lebt.
     * Alles darueber wird zur Diashow aus den Neunzigern.
     *
     * `scale` und nicht `transform: scale()`: `transform` brauchen wir
     * hier nicht, und die eigene Eigenschaft laesst sich unabhaengig
     * animieren, falls spaeter doch noch etwas dazukommt.
     */
    animation: splash-zug 24s ease-out infinite alternate;
}

@keyframes splash-zug {
    from { scale: 1; }
    to   { scale: 1.06; }
}

/*
 * ==========================================================================
 * WARUM HIER 25 UND 28,125 STEHEN UND NICHT 22 UND 25
 * ==========================================================================
 *
 * Die alten Werte liessen zwischen je zwei Bildern das UNTERSTE
 * durchblitzen. Nachgerechnet bei 32 s Umlauf und vier Bildern:
 *
 *   Bild 1 voll     8,96 s  bis  15,04 s   (22 %)
 *   Bild 1 weg     16,00 s               (25 %)
 *   Bild 2 faengt  16,00 s an einzublenden
 *
 * Zwischen 15,04 und 16,00 blendet Bild 1 also aus, waehrend Bild 2 noch
 * gar nicht da ist - und darunter liegt Bild 0, das als einziges statisch
 * auf voller Deckung steht. Eine Sekunde lang sieht man es, dann wird auf
 * das naechste geblendet. Viermal je Umlauf, immer dasselbe Gesicht.
 *
 * Genau so hat es die Agentur beschrieben: „manche Bilder kommen oefter,
 * vor allem das erste, und es wird immer kurz dazwischen geschnitten".
 *
 * Das Loch zu schliessen reichte aber nicht, und das ist der zweite Teil
 * dieser Rechnung. Blenden zwei Bilder GLEICHZEITIG - eines aus, eines
 * ein -, dann sind in der Mitte beide halb durchsichtig, und was uebrig
 * bleibt, rechnet der Browser so:
 *
 *   halb Bild 1 ueber halb Bild 2 ueber Bild 0
 *     =  0,25 x Bild 0  +  0,25 x Bild 1  +  0,5 x Bild 2
 *
 * Ein Viertel Bild 0, mitten in jeder Ueberblendung. Schwaecher als das
 * ganze Bild von vorhin, aber dasselbe Gesicht an derselben Stelle,
 * viermal je Umlauf - und damit immer noch genau das, was gemeldet war.
 *
 * ==========================================================================
 * RICHTIG IST: NUR EINS VON BEIDEN BLENDET
 * ==========================================================================
 *
 * Das kommende Bild blendet EIN, und das darunter bleibt liegen, bis es
 * fertig ist. Dann verschwindet es ohne Uebergang - es liegt ja unter
 * einem deckenden Bild, man sieht es nicht mehr. Nichts blitzt durch,
 * weil zu keinem Zeitpunkt zwei durchsichtige Schichten uebereinander
 * liegen.
 *
 *    0        %  =  0,0 s   durchsichtig
 *    3,125    %  =  1,0 s   voll      (1 s einblenden)
 *   28,125    %  =  9,0 s   voll      (haelt, bis das naechste oben liegt)
 *   28,126    %            weg       (ohne Uebergang, unsichtbar)
 *  100        %            bleibt weg
 *
 * EINMAL JE UMLAUF GEHT DAS NICHT, und zwar beim letzten Bild. Einblenden
 * setzt voraus, dass das Kommende OBEN liegt; am Ende der Folge kommt
 * aber wieder Bild 0, und das liegt zuunterst. Dort wird darum anders
 * geblendet: das letzte Bild blendet AUS und gibt den Blick auf Bild 0
 * frei, das die ganze Zeit deckend darunter steht. Auch das ist eine
 * saubere Ueberblendung - es blendet wieder nur eine Schicht, und
 * darunter ist alles deckend.
 */
@keyframes splash-blende {
    0%       { opacity: 0; }
    3.125%   { opacity: 1; }
    28.125%  { opacity: 1; }
    28.126%  { opacity: 0; }
    100%     { opacity: 0; }
}

@keyframes splash-blende-zurueck {
    0%       { opacity: 0; }
    3.125%   { opacity: 1; }
    25%      { opacity: 1; }
    28.125%  { opacity: 0; }
    100%     { opacity: 0; }
}

/*
 * Das oberste Bild im Stapel ist das letzte der Folge - es gibt Bild 0
 * wieder frei. `:not(:first-child)` ist fuer den Fall, dass es nur EIN
 * Bild gibt: dann ist dasselbe Element erstes und letztes, und es soll
 * stehenbleiben und nicht blenden.
 */
.splash__bild:last-child:not(:first-child) {
    animation-name: splash-blende-zurueck;
}

/*
 * Der Schleier. Zwei Verlaeufe, kein Kasten:
 *   - von OBEN, damit Zeichen und Navigation auf jedem Portrait stehen
 *   - von UNTEN, fuer den Ruf und den Weg nach unten
 * Die Mitte bleibt frei; dort ist das Gesicht.
 */
.splash__schleier {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /*
     * DREI STOPPS JE VERLAUF UND NICHT ZWEI.
     *
     * Mit zwei Stopps faellt die Deckung vom ersten Pixel an linear ab -
     * auf der Hoehe der Navigation (rund 15 % der Seite) waren von 55 %
     * noch 26 % uebrig, und auf einem hellen Portrait stand weisse
     * Schrift dann auf fast weissem Grund. Nachgemessen, nicht geschaetzt.
     *
     * Der mittlere Stopp haelt die Deckung ueber den Bereich, in dem
     * wirklich Schrift steht, und laesst sie erst danach los. Die Mitte
     * des Bildes bleibt unberuehrt - dort ist das Gesicht.
     */
    background:
        linear-gradient(to bottom,
            rgba(0, 0, 0, .62) 0%,
            rgba(0, 0, 0, .46) 13%,
            rgba(0, 0, 0, 0) 34%),
        linear-gradient(to top,
            rgba(0, 0, 0, .72) 0%,
            rgba(0, 0, 0, .46) 18%,
            rgba(0, 0, 0, 0) 48%);
}

/*
 * Der Ruf, unten links. Im Band steht er rechtsbuendig ueber dem Quadrat;
 * hier links, weil links auch das Zeichen steht und eine Seite nicht
 * zweimal die Richtung wechseln soll.
 *
 * AUF DEM EINZUG, NICHT AUF DEM RAND (U87). Er lag auf derselben Kante
 * wie das Zeichen. Die Navigation liegt aber auf dieser Flaeche MIT
 * darauf - Ruf und Leiste standen damit senkrecht uebereinander und
 * fingen an zwei verschiedenen Stellen an, auf dem groessten Satz der
 * Website. Jetzt teilt er die eine Kante, die alles andere auch hat.
 */
.splash__ruf {
    position: absolute;
    left: var(--einzug);
    right: var(--rand-rechts);
    bottom: 5.5rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    color: #fff;
    font-family: var(--auszeichnung);
    font-weight: var(--auszeichnung-fett, 700);
    text-transform: uppercase;
    letter-spacing: -.01em;
    line-height: .95;
    font-size: clamp(1.75rem, 6.5vw, 4.5rem);
    text-wrap: balance;
}

/* Der Weg nach unten, ganz unten links unter dem Ruf. */
.splash__weiter {
    position: absolute;
    left: var(--einzug);
    bottom: 2rem;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: #fff;
    text-decoration: none;
    font-size: .75rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .85;
}

.splash__weiter:hover,
.splash__weiter:focus-visible {
    opacity: 1;
}

/* Ein Pfeil aus zwei Strichen - kein Bild, keine Zeichenschrift. */
.splash__pfeil {
    width: .6rem;
    height: .6rem;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-.15rem) rotate(45deg);
    animation: splash-tupfer 2.4s ease-in-out infinite;
}

@keyframes splash-tupfer {
    0%, 100% { transform: translateY(-.15rem) rotate(45deg); }
    50%      { transform: translateY(.15rem) rotate(45deg); }
}

/*
 * ==========================================================================
 * DIE KOPFZEILE LIEGT AUF DEM AUFMACHER
 * ==========================================================================
 *
 * Nur auf dieser einen Seite, und `:has()` ist genau dafuer da: die Regel
 * fragt die Seite, ob sie einen Aufmacher enthaelt, statt dass das PHP
 * eine Klasse an den Koerper haengen muss, die drei Dateien weiter wieder
 * abgefragt wird.
 *
 * Faellt `:has()` in einem alten Browser aus, passiert nichts
 * Schlimmes: die Kopfzeile steht dann wie ueberall ueber dem Aufmacher,
 * schwarz auf weiss. Haesslicher, aber vollstaendig bedienbar - das ist
 * die richtige Richtung fuer einen Rueckfall.
 */
.seite:has(.splash) .kopf {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    /*
     * Links statt mittig: „Das Logo sollte oben links rein."
     *
     * Die Kopfzeile ist ein `block` mit `text-align: center` - die
     * Marke und die Navigation sind `inline-flex` und richten sich
     * danach. Es ist darum DIESE eine Eigenschaft, die beide nach
     * links holt, und nicht `align-items`, das an einem Block gar
     * nichts tut. Beim ersten Versuch stand hier `align-items` und
     * die Zeile blieb mittig.
     */
    text-align: left;
    padding-left: clamp(1.25rem, 5vw, 4rem);
    padding-right: clamp(1.25rem, 5vw, 4rem);
}

/*
 * DAS ZEICHEN WIRD WEISS - UND ZWAR GENAU WEISS.
 *
 * `logo-mark.png` ist reines Schwarz auf durchsichtigem Grund (geprueft:
 * #000000). `invert(1)` macht daraus reines Weiss und laesst die
 * Deckung in Ruhe - auch die weichen Kanten. Eine zweite Bilddatei in
 * Weiss waere ein Asset mehr, das bei jeder Logoaenderung vergessen
 * wird.
 */
.seite:has(.splash) .kopf__zeichen {
    filter: invert(1);
}

/*
 * Die Navigation steht auf dem Bild und wird darum hell.
 *
 * ABER NUR DIE OBERSTE EBENE. Hier stand `.kopf nav a`, und das traf
 * auch die Namen im Ausklappmenue - die stehen auf einer weissen
 * Flaeche (`.navigation__leute`, 97 % Weiss), und weiss auf weiss ist
 * eine leere Kachel mit Umriss. Genau so sah es aus.
 *
 * `> ul > li > a` trifft die Abteilungen, News, Freunde und Kontakt und
 * hoert vor der verschachtelten Liste auf. Die Namen darin behalten
 * damit die Farbe, die sie ueberall sonst haben.
 */
.seite:has(.splash) .kopf .navigation > ul > li > a,
.seite:has(.splash) .kopf .navigation > ul > li > a:visited {
    color: #fff;
}

.seite:has(.splash) .kopf .suche input {
    color: #fff;
    border-color: rgba(255, 255, 255, .45);
}

.seite:has(.splash) .kopf .suche input::placeholder {
    color: rgba(255, 255, 255, .7);
}

/*
 * Der Aufmacher steht ueber der Spaltenbreite, also muss `.start` seinen
 * oberen Abstand abgeben - sonst klafft zwischen Bild und Abteilungen
 * eine Luecke, die nach einem Fehler aussieht.
 */
.start--nach-vollbild {
    margin-top: 0;
}

/*
 * ==========================================================================
 * AUF DEM TELEFON BRAUCHT DER SCHLEIER MEHR WEG
 * ==========================================================================
 *
 * Die Navigation steht dort in vier Zeilen statt einer und reicht bis
 * etwa ein Viertel der Seite hinunter - beim Entwurf am Schreibtisch
 * blieb sie in der obersten Zehntel. Mit dem Verlauf von oben war das
 * Suchfeld auf einem hellen Portrait praktisch nicht mehr zu sehen
 * (nachgesehen auf 375 px, nicht geschaetzt).
 *
 * Also haelt der Verlauf hier laenger durch. Das Gesicht sitzt auf dem
 * Telefon ohnehin tiefer, weil das Bild hochkant steht - es verliert
 * dabei nichts.
 */
@media (max-width: 48rem) {
    .splash__schleier {
        background:
            linear-gradient(to bottom,
                rgba(0, 0, 0, .66) 0%,
                rgba(0, 0, 0, .52) 26%,
                rgba(0, 0, 0, 0) 46%),
            linear-gradient(to top,
                rgba(0, 0, 0, .74) 0%,
                rgba(0, 0, 0, .48) 20%,
                rgba(0, 0, 0, 0) 46%);
    }

    /*
     * Der Ruf wird auf 375 px vierzeilig. Ohne diesen Abstand stiesse er
     * an „Weiter" - zwei weisse Zeilen, die einander beruehren.
     */
    .splash__ruf {
        bottom: 4.75rem;
    }
}

/*
 * WER WENIG BEWEGUNG WILL, BEKOMMT KEINE.
 *
 * Dieselbe Regel wie beim Band. Der Stapel steht dann auf dem ersten
 * Bild - ein Portrait im Vollbild ist ein vollstaendiger Aufmacher und
 * kein Rest.
 */
@media (prefers-reduced-motion: reduce) {
    .splash__bild {
        animation: none;
    }

    .splash__bild:first-child {
        opacity: 1;
    }

    .splash__pfeil {
        animation: none;
    }

    .splash__bild img {
        animation: none;
        scale: 1;
    }
}