/* Tokens + Grundgerüst. Fast keine Farbe — das Material ist die Farbe.
   Drei Stimmen: Garamond für Titel, System-Grotesk für alles Gelesene und
   Bediente, Courier für Kennungen und Zähler.

   Ein einziger Webfont, und nur für die Titel: Aneta wünschte sich mehr
   Eleganz und Ruhe, eine klassische Serife als Kontrast zur rauen Bildwelt
   (Mail 22.09.2026). Cormorant Garamond, Schnitt 500: die leichteren Schnitte
   haben Haarstriche, die über bewegtem Bild zerfallen. Kleine Mittellänge —
   deshalb stehen die Titel größer als eine Grotesk gleicher Wirkung.
   Selbst gehostet (SIL Open Font License, assets/fonts/OFL.txt) — geladen
   wird nichts von Dritten, ein Cookie-Banner bleibt unnötig. Latin und
   Latin-Extended getrennt: der Browser holt das Zweite nur, wenn ein Titel
   ł, ż oder ń enthält.
   (Libre Baskerville war zuerst drin, wirkte in Titelgröße aber schwer.) */
@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/cormorant-garamond-latin-500-normal.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: "Cormorant Garamond";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/cormorant-garamond-latin-ext-500-normal.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;
}

@font-face {
    font-family: "Cormorant Garamond";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/cormorant-garamond-latin-500-italic.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: "Cormorant Garamond";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/cormorant-garamond-latin-ext-500-italic.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;
}

@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/cormorant-garamond-latin-600-normal.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: "Cormorant Garamond";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/cormorant-garamond-latin-ext-600-normal.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;
}

:root {
    --ink-black: #100e0c;
    --bone: #eae5d9;
    --ash: #8f887a;
    --blood: #c9354d;
    --font-display: "Cormorant Garamond", Garamond, "Times New Roman", serif;
    --font-ui: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono: "Courier New", Courier, monospace;
    --bar-height: 3.5rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background: var(--ink-black);
    color: var(--bone);
    font-family: var(--font-ui);
    font-size: 1rem;
    line-height: 1.6;
}

/* Keine Scrollbalken, wie schon in der Slide-Strecke. Auf den Textseiten
   ist die zentrierte Spalte sonst je nach Seitenlänge unterschiedlich weit
   links — der Balken nimmt Breite weg, und beim Wechsel von der Startseite
   springt das Layout. Gescrollt wird weiter mit Rad, Trackpad und Tastatur. */
html {
    scrollbar-width: none;
}

html::-webkit-scrollbar { display: none; }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--blood); outline-offset: 3px; }
img, video { display: block; max-width: 100%; }
ul { list-style: none; }

/* ---- Kopfleiste: die einzige permanente UI ---- */
.site-bar {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--bar-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.25rem;
    z-index: 20;
    /* Verlauf statt mix-blend-mode: difference — über bewegtem Bild wechselte
       die Schriftfarbe sonst mit jedem Frame. Der Scrim trägt den Text auch
       auf hellen Slides (Rauch, Bühnenlicht), ohne das Bild zuzudecken. */
    text-shadow: 0 1px 10px rgba(16, 14, 12, 0.9);
}

.site-bar::before, .rail::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.site-bar::before {
    inset: 0 0 auto 0;
    height: calc(var(--bar-height) * 2);
    background: linear-gradient(rgba(16, 14, 12, 0.8), rgba(16, 14, 12, 0));
}

/* Auf der Startseite ohne Verlauf: die Bilder sollen unverändert stehen
   (01.10.2026). Den Namen trägt dort allein der Textschatten. */
.home .site-bar::before { content: none; }

.site-name {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.15rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ---- Side-Rail: kleine permanente Navigation am rechten Rand ---- */
.rail {
    position: fixed;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    text-align: right;
    text-shadow: 0 1px 10px rgba(16, 14, 12, 0.9);
}

/* radial, nicht linear: ein seitlicher Verlauf bräche oben und unten
   mit sichtbarer Kante ab. Ein großer Kreis, dessen Mitte weit rechts
   außerhalb des Bildschirms liegt: Ins Bild reicht nur sein flacher Rand,
   dunkel genug für die Schrift, ohne als Fleck ins Bild zu greifen
   (Felix, 03.10.2026). */
.rail::before {
    /* Fläche größer als der Kreis, Kreis mit fester Größe: er muss in der
       Fläche ganz auslaufen, sonst schneidet ihre Kante ihn sichtbar ab. */
    inset: -24rem -20rem -24rem auto;
    width: 36rem;
    background: radial-gradient(34rem 28rem at right center,
        rgba(16, 14, 12, 0.85) 0%, rgba(16, 14, 12, 0.55) 40%, rgba(16, 14, 12, 0) 100%);
}

.rail-gruppe {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: lowercase;
}

.rail-gruppe a:hover { color: var(--blood); }

/* Aktiver Eintrag nur über Farbe. Ein Kasten müsste mit dem Register die
   Richtung wechseln — Rot trägt auf beiden Gründen und ist ohnehin die
   Markierungsfarbe im Index. */
.rail-gruppe a.aktiv { color: var(--blood); }
.rail-tot span { opacity: 0.4; }

/* Mobil: Rail wird zum Menü oben rechts.

   Drei Haarlinien statt eines Schriftzeichens (≡): dessen Striche sind fett und
   eng, das sah neben der schmalen Schrift der Seite nach Werkzeugleiste aus.
   Gezeichnet lässt sich die Stärke bestimmen — 1px, weit gesetzt.

   Ohne zusätzliches Markup: die mittlere Linie ist der Hintergrund des
   Buttons, die äußeren sind ::before und ::after. Beim Öffnen wandern die
   beiden in die Mitte und kreuzen sich, die mittlere verschwindet. */
.rail-toggle {
    display: none;
    position: relative;

    /* Die Fläche ist 2,75rem im Quadrat, das Zeichen darin nur 1,5rem breit:
       gezeichnet sind drei Haarlinien, gedrückt wird ein Feld, das man mit
       dem Daumen trifft. Vorher war der Knopf so groß wie seine Zeichnung,
       24 auf 14 Pixel — zum Öffnen reichte das gerade, zum Schließen traf
       man daneben und das Menü schien zu klemmen.
       Der negative Rand rechts hält das Zeichen am selben Platz wie zuvor,
       trotz der breiteren Fläche. */
    width: 2.75rem;
    height: 2.75rem;
    margin-right: -0.625rem;
    padding: 0;
    border: none;
    cursor: pointer;
    color: inherit;

    /* Die Füllung muss ausdrücklich weg: ein <button> bringt vom Browser eine
       helle Fläche mit, und background-image allein überschreibt sie nicht. */
    background-color: transparent;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 1.5rem 1px;
    background-position: center;
    background-repeat: no-repeat;
    /* Derselbe Schatten wie an der Rail: sonst verschwinden die Linien auf
       einem hellen Startbild. */
    filter: drop-shadow(0 1px 10px rgba(16, 14, 12, 0.9));
}

/* Die äußeren Linien sitzen an der Mitte, nicht am Rand des Knopfes: die
   Fläche darf wachsen, ohne dass das Zeichen auseinanderläuft. */
.rail-toggle::before,
.rail-toggle::after {
    content: "";
    position: absolute;
    left: 0.625rem;
    right: 0.625rem;
    height: 1px;
    background: currentColor;
    transition: transform 0.18s ease;
}

.rail-toggle::before { top: calc(50% - 0.425rem); }
.rail-toggle::after { bottom: calc(50% - 0.425rem); }

/* Geschlossen zu offen: die äußeren Linien in die Mitte und über Kreuz. Die
   Mitte wird ausgeblendet, sonst läge unter dem × noch ein Strich. */
.rail-toggle[aria-expanded="true"] { background-image: none; }

/* scaleX(0.78): eine gedrehte Linie über die volle Breite ergibt eine
   Diagonale, die länger ist als der Strich vorher — das × wirkte größer als
   der Burger. Gekürzt stehen beide Zeichen gleich groß im Balken. */
.rail-toggle[aria-expanded="true"]::before {
    transform: translateY(calc(0.425rem - 0.5px)) rotate(45deg) scaleX(0.78);
}

.rail-toggle[aria-expanded="true"]::after {
    transform: translateY(calc(-0.425rem + 0.5px)) rotate(-45deg) scaleX(0.78);
}

@media (prefers-reduced-motion: reduce) {
    .rail-toggle::before,
    .rail-toggle::after { transition: none; }
}

@media (max-width: 44rem) {
    .rail-toggle { display: block; }

    .rail { display: none; }

    /* Das offene Menü bringt seinen eigenen Farbraum mit: dunkler Grund,
       helle Schrift — unabhängig davon, ob darunter das dunkle Register oder
       der weiße Index liegt. Ohne die Farbe erbte es im Index das Tintenblau
       der Tabelle und stand dunkel auf dunklem Grund. Und ohne volle Deckung
       schien die weiße Tabelle durch: beides zusammen war unlesbar. */
    .rail.offen {
        display: flex;
        inset: 0;
        top: 0;
        right: 0;
        transform: none;
        justify-content: center;
        padding: var(--bar-height) 1.25rem 2rem;
        background: var(--ink-black);
        color: var(--bone);
        mix-blend-mode: normal;
        z-index: 15;
    }

    /* Das Kreuz liegt auf demselben dunklen Grund und darf die Farbe des
       Registers darunter ebenfalls nicht erben. */
    .rail-toggle[aria-expanded="true"] { color: var(--bone); }

    .rail.offen .rail-gruppe { font-size: 1.6rem; gap: 0.6rem; }
}

/* Metazeile, überall gleich gesetzt */
.wz-meta {
    font-size: 0.9rem;
    color: var(--ash);
    letter-spacing: 0.04em;
}

/* Die Werkform vor dem Titel, in der Liste „Exists as" der Komplexseite.
   Gesetzt wie die Abschnittsköpfe: Grotesk, klein, gesperrt, in Asche. Rot
   war auf dem dunklen Grund in dieser Größe schlecht zu lesen, und Rot heißt
   auf der Seite ohnehin „hier geht es weiter". */
.kf-form {
    font: 500 0.8rem var(--font-ui);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ash);
}

/* Beziehungslisten — von Werkseite und Textregistern genutzt, darum hier */
.werk-beziehungen { margin-top: 3rem; }

.werk-beziehungen h2 {
    font: 500 0.85rem var(--font-ui);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ash);
    margin-bottom: 0.75rem;
}

/* Der Komplexname im Abschnittskopf bleibt Kopfzeile, wird aber klickbar —
   ohne die Kursiv-Auszeichnung der Werktitel darunter zu erben */
.werk-beziehungen h2 a {
    font: inherit;
    color: var(--bone);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.werk-beziehungen h2 a:hover { color: var(--blood); }

.werk-beziehungen li {
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(234, 229, 217, 0.14);
}

/* Werktitel in Fließkontexten kursiv — bibliografische Zitierweise
   als die eine Kursiv-Störung */
.werk-beziehungen a {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.2rem;
    margin-right: 1rem;
}

.werk-beziehungen a:hover { color: var(--blood); }

/* Rechtszeile statt Footer: kein Balken, keine Fläche, nur die Links —
   und die erst, wenn man unten angekommen ist. Die Marke .seitenende steht
   dafür am Ende des Inhalts, dummy.js schaltet .am-ende am Body. */
.seitenende {
    display: block;
    height: 1px;
}

.legal {
    position: fixed;
    left: 1.25rem;
    bottom: 1.25rem;
    z-index: 25;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease;
    text-shadow: 0 1px 10px rgba(16, 14, 12, 0.9);
}

body.am-ende .legal {
    opacity: 0.6;
    visibility: visible;
    pointer-events: auto;
}

body.am-ende .legal:hover { opacity: 1; }

.legal a:hover { color: var(--blood); }

/* ---- Seitenübergang Strecke ↔ Werk ----
   Das Werk gleitet von rechts herein, die Strecke weicht ein Stück nach links
   und dunkelt ab — man geht einen Schritt tiefer. Zurück genau umgekehrt.
   Jeder andere Wechsel (about, news, …) blendet über Unschärfe, dieselbe
   Sprache wie der Filterwechsel auf der Strecke. Welche Bewegung, entscheidet
   assets/js/uebergang.js.

   Kopfzeile und Rail haben eigene Namen: sie stehen auf beiden Seiten und
   bleiben stehen, statt mitzufahren.

   Browser ohne seitenübergreifende View Transitions (Firefox, Stand 09/2026)
   ignorieren die Regel und laden die Seite wie bisher. */
@view-transition { navigation: auto; }

.site-bar { view-transition-name: kopf; }
.rail { view-transition-name: rail; }

html:active-view-transition-type(hinein)::view-transition-old(root) {
    animation: seite-weicht-links 0.6s cubic-bezier(0.6, 0, 0.2, 1) both;
}

html:active-view-transition-type(hinein)::view-transition-new(root) {
    animation: seite-kommt-von-rechts 0.6s cubic-bezier(0.6, 0, 0.2, 1) both;
}

/* Zurück liegt das Werk oben und fährt ab — sonst schöbe sich die Strecke
   darüber, als käme man nicht zurück, sondern woanders hin. */
html:active-view-transition-type(zurueck)::view-transition-old(root) {
    z-index: 1;
    animation: seite-geht-nach-rechts 0.6s cubic-bezier(0.6, 0, 0.2, 1) both;
}

html:active-view-transition-type(zurueck)::view-transition-new(root) {
    animation: seite-kommt-von-links 0.6s cubic-bezier(0.6, 0, 0.2, 1) both;
}

html:active-view-transition-type(wechsel)::view-transition-old(root) {
    animation: seite-verschwimmt 0.3s ease-in both;
}

/* Erst weg, dann her — wie beim Filter, sonst ergäben zwei unscharfe Seiten
   übereinander Matsch. */
html:active-view-transition-type(wechsel)::view-transition-new(root) {
    animation: seite-wird-scharf 0.45s ease-out 0.15s both;
}

@keyframes seite-verschwimmt {
    to { opacity: 0; filter: blur(20px); }
}

@keyframes seite-wird-scharf {
    from { opacity: 0; filter: blur(20px); }
}

/* Die weichende Seite fährt nur ein Drittel und dunkelt ab: zwei Seiten, die
   gleich schnell nebeneinander herlaufen, sähen aus wie ein Karussell. */
@keyframes seite-weicht-links {
    to { transform: translateX(-30%); opacity: 0.3; }
}

@keyframes seite-kommt-von-rechts {
    from { transform: translateX(100%); }
}

@keyframes seite-geht-nach-rechts {
    to { transform: translateX(100%); }
}

@keyframes seite-kommt-von-links {
    from { transform: translateX(-30%); opacity: 0.3; }
}

/* Rückweg von Werk und Komplex in die Strecke. Steht hier und nicht in
   werk.css oder komplex.css: zwei Register, eine Form — sonst driftet sie
   auseinander. Dieselbe Anmutung wie „← News" unter einem Termin. */
.zurueck-zur-strecke {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    /* Der negative obere Abstand holt die Zeile in den Raum unter der
       Kopfleiste. Sonst schöbe sie Titel und Medium um ihre ganze Höhe nach
       unten — der Rückweg ist ein Hinweis, kein Bestandteil des Satzes. */
    margin: -1rem 0 0.5rem;
}

.zurueck-zur-strecke a { color: var(--ash); }
.zurueck-zur-strecke a:hover, .zurueck-zur-strecke a:focus-visible { color: var(--blood); }