/* Textregister — die Bibliothek in Reinform: eine Spalte, keine Bilder,
   Satzbreite kurz genug zum Lesen. Übernimmt Titel- und Beziehungs-Satz
   der Werkseite, damit beide Register zusammengehören. */
.seite {
    padding: calc(var(--bar-height) + 3rem) 1.25rem 6rem;
    max-width: 64rem;
    margin: 0 auto;
}

/* Der Textsatz bleibt vor der Rail stehen.

   Zwei Dinge ragen von rechts herein: die Rail selbst und ihr 26rem breiter
   Schleier (.rail::before), der sie über Bildern lesbar hält. Über Text
   gelegt sieht der Schleier aus, als graue die Schrift nach rechts hin aus —
   und zwar bis etwa 110rem Fensterbreite, nicht nur in einem schmalen
   Bereich.

   Der Schleier wird hier deshalb abgeschaltet: Die Textregister haben keinen
   Bildgrund, über dem die Rail verschwinden könnte, der Schatten an der Rail
   trägt auf einfarbigem Grund allein. Bleibt die Rail selbst — für die hält
   der Satz Platz frei, indem er schmaler wird statt einseitig eingerückt.
   Lange Zeilen brechen dann früher um, statt unter dem Menü zu enden. */
.register-seite .rail::before { display: none; }

@media (min-width: 60rem) {
    .seite { max-width: min(64rem, calc(100vw - 24rem)); }
}

/* Garamond wie alle Titel; die Hierarchie macht die Größe, nicht die
   Farbe. Rot heißt auf dieser Seite „hier bist du gerade" — als
   Überschriftenfarbe würde es diese Bedeutung verbrauchen. */
.seite-titel {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.2rem, 3.5vw, 3.3rem);
    line-height: 1.2;
    text-wrap: balance;
}

.seite-lede {
    margin-top: 0.75rem;
    max-width: 38rem;
    font-size: 1rem;
    letter-spacing: 0.03em;
    color: var(--ash);
}

.seite-text {
    margin-top: 2.5rem;
    max-width: 38rem;
}

.seite-text p + p { margin-top: 1rem; }

.seite-text p {
    font-size: 1rem;
    line-height: 1.7;
}

.seite-text a { text-decoration: underline; text-underline-offset: 0.2em; }
.seite-text a:hover { color: var(--blood); }

.seite-block { margin-top: 3rem; }

/* Abschnittsköpfe überall gleich: Mono, klein, gesperrt — wie auf der Werkseite */
.seite-block h2 {
    font: 500 0.85rem var(--font-ui);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ash);
    margin-bottom: 0.75rem;
}

/* Eine Zeile, ein Satz. Vorher hatte jede Liste ihre eigene Auszeichnung —
   Werke kursiv in Times, Texte fett-versal in Grotesk, daneben graue
   Angaben. Gleichartiger Inhalt, drei Schnitte: das liest sich als Zufall,
   nicht als System. Jetzt trägt allein die Farbe den Unterschied. */
.seite-liste li,
.seite .werk-beziehungen li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 1.25rem;
    align-items: baseline;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(234, 229, 217, 0.14);
}

.seite .sl-titel,
.seite .werk-beziehungen a {
    font-family: var(--font-ui);
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: 0;
    text-transform: none;
    margin-right: 0;
    color: var(--bone);
}

.seite .sl-titel:hover,
.seite .werk-beziehungen a:hover { color: var(--blood); }

.seite .werk-beziehungen { margin-top: 3rem; }

/* Porträt: schmal gesetzt, links wie der Text — kein Aufmacher über die
   volle Breite, die Seite bleibt eine Textseite. Gilt schmal immer und breit
   für ein Porträt als Block im Fluss. */
.seite-portrait {
    margin: 0 0 1.5rem;
    max-width: 22rem;
}

.seite-portrait img { width: 100%; height: auto; }

.seite-portrait figcaption { margin-top: 0.5rem; }

/* Breit steht ein Porträt als Aufmacher links neben dem Text und bleibt beim
   Scrollen stehen. Hochkant und unbeschnitten: bei der Nassplatte ist der
   Plattenrand Teil des Bildes. Höher als der Bildschirm wird es nicht, sonst
   stünde die Unterschrift unter der Kante. */
@media (min-width: 60rem) {
    .seite--mit-portrait {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: 4rem;
        align-items: start;
        max-width: min(84rem, calc(100vw - 24rem));
    }

    .seite--mit-portrait > .seite-portrait {
        position: sticky;
        top: calc(var(--bar-height) + 3rem);
        max-width: none;
        margin: 0;
    }

    .seite--mit-portrait > .seite-portrait img {
        width: auto;
        max-width: 100%;
        max-height: calc(100dvh - var(--bar-height) - 8rem);
    }
}

/* Verweise nach außen sehen aus wie die Listen daneben, reagieren aber */
.seite-liste a.sl-titel:hover { color: var(--blood); }

/* ---- Termine ----
   Kein eigenes Raster und keine Karten: die Terminliste ist derselbe Satz wie
   „Education" oder „Writing", nur mit einem Datum davor. Ein zweites
   Listenbild auf derselben Seite läse sich als zweite Website.

   Grid statt umbrechendem Flex, weil die Zeile zwei verschiedene Formen hat:
   breit eine Zeile mit Spalten in Flucht, schmal ein kleiner Block, in dem
   jeder Teil seine eigene Zeile bekommt. Mit Flex entschied der Zufall der
   Textlänge, wo umbrochen wird — das sah aus wie ein Versehen. */
.termin-liste { list-style: none; }

.termin {
    display: grid;
    grid-template-columns: 8.5rem 6rem minmax(0, 1fr) auto;
    grid-template-areas: "datum art sache ort";
    gap: 0.2rem 1.25rem;
    align-items: baseline;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(234, 229, 217, 0.14);
}

.termin-datum { grid-area: datum; }
.termin-art   { grid-area: art; }
.termin-sache { grid-area: sache; }
.termin-ort   { grid-area: ort; }

/* Die Arbeit steht unter dem Titel, nicht hinter dem Ort: sie gehört zum
   Titel, und hinter dem Ort stünde sie bei jeder Zeile woanders. */
.termin-werk {
    grid-area: werk;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--ash);
}

.termin { grid-template-areas: "datum art sache ort" ". . werk werk"; }

/* Ziffern gleicher Laufweite: die Daten stehen untereinander wie eine Spalte,
   ohne dass es eine Tabelle sein muss. */
.termin-datum {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    color: var(--ash);
}

.termin-art {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: lowercase;
    letter-spacing: 0.08em;
    color: var(--blood);
}

.termin-titel {
    font-family: var(--font-ui);
    font-size: 1rem;
    color: var(--bone);
}

a.termin-titel:hover,
.termin-werk:hover { color: var(--blood); }

/* Vergangenes bleibt lesbar, tritt aber zurück — es ist Beleg, kein Angebot. */
.termine-vergangen .termin-titel { color: var(--ash); }
.termine-vergangen .termin-art { color: var(--ash); }

/* Der Pfeil nach außen, wenn der Titel schon nach innen führt: klein und
   ohne Beschriftung, damit er die Zeile nicht zweimal erzählt. */
.termin-extern {
    font-size: 0.85rem;
    color: var(--ash);
    padding-left: 0.4rem;
}
.termin-extern:hover { color: var(--blood); }

/* Schmal: aus der Zeile wird ein Block. Datum und Art stehen als Kopfzeile
   nebeneinander — beide sind kurz und gehören zusammen —, darunter der Titel
   in voller Breite, dann Ort und Arbeit. Nichts bricht mehr mitten im Satz. */
@media (max-width: 40rem) {
    .termin {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "datum art"
            "sache sache"
            "ort   ort"
            "werk  werk";
        gap: 0.15rem 0.9rem;
        padding: 0.9rem 0;
    }

    /* Die Kopfzeile trägt die Ausrichtung, nicht die feste Spaltenbreite */
    .termin-art { justify-self: start; }

    .termin-sache { margin-top: 0.15rem; }

    .termin-ort, .termin-werk { font-size: 0.85rem; }
}

/* ---- Terminbericht: die eigene Seite eines Termins ----
   Kopfzeile aus denselben Teilen wie die Listenzeile, nur ohne feste Spalten:
   hier steht nichts untereinander, was in Flucht müsste. */
.termin-kopf {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 1rem;
    align-items: baseline;
    margin: 0 0 0.75rem;
}
.termin-kopf .termin-datum,
.termin-kopf .termin-art { flex: 0 0 auto; }

.termin-verweise p { margin: 0.35rem 0; }

.termin-link {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--ash);
}
.termin-link:hover { color: var(--blood); }

.termin-zurueck {
    margin-top: 3rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
}
.termin-zurueck a { color: var(--ash); }
.termin-zurueck a:hover { color: var(--blood); }

/* Dateien zum Herunterladen — dieselbe Zeilenform wie die Listen darüber,
   damit ein PDF nicht wie ein Fremdkörper zwischen den Textblöcken steht. */
.seite-dateien { list-style: none; margin: 0; padding: 0; }
.seite-dateien li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(234, 229, 217, 0.14);
}
.seite-dateien a { text-decoration: underline; text-underline-offset: 0.2em; }
.seite-dateien a:hover { color: var(--blood); }

/* Einträge mit Bild — Bücher, Texte, Konferenzen. Dieselbe Zeile mit
   Trennlinie wie die Listen, nur mit Bild davor. Das Bild behält sein
   Format: ein Buchcover steht hochkant, ein Konferenzfoto quer; beschnitten
   auf ein gemeinsames Maß sähe jedes Cover falsch aus. Der Titel in Garamond
   wie ein Werktitel, die Verweise in Mono wie bei den Terminen. */
.seite-eintraege { list-style: none; margin: 0; padding: 0; }

.seite-eintrag {
    display: grid;
    --se-bildbreite: 9rem;
    grid-template-columns: var(--se-bildbreite) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(234, 229, 217, 0.14);
}
.seite-eintrag:first-child { padding-top: 0.5rem; }
.seite-eintrag--ohne-bild { grid-template-columns: minmax(0, 1fr); }

.se-bild { margin: 0; }
/* Haarlinie in der Farbe der Trennlinien: viele Cover sind schwarz und
   verlören sonst ihre Kante im Grund. */
.se-bild img {
    display: block;
    width: 100%;
    height: auto;
    box-shadow: 0 0 0 1px rgba(234, 229, 217, 0.14);
}

.se-inhalt { max-width: 38rem; }
.se-bild figcaption { margin-top: 0.4rem; }

.se-titel {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.2;
    text-wrap: balance;
}
.se-titel a:hover { color: var(--blood); }

.se-meta { margin-top: 0.3rem; }

.se-text {
    margin-top: 0.6rem;
    line-height: 1.6;
}

.se-verweise {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.25rem;
    margin-top: 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
}
.se-verweise a { color: var(--ash); }
.se-verweise a:hover { color: var(--blood); }

@media (min-width: 60rem) {
    .seite-eintrag { --se-bildbreite: 11rem; gap: 2rem; }
}

@media (max-width: 40rem) {
    .seite-eintrag { --se-bildbreite: 6rem; gap: 1rem; }
    .se-titel { font-size: 1.25rem; }
}