/* Tokens + Grundgerüst. Bewusst KEINE Webfonts — die Browser-Defaults
   als Anti-Design: das Material bekommt allen Glanz, die Typo verweigert
   ihn. Fast keine Farbe — das Material ist die Farbe.
   Drei Stimmen: Times für Titel, System-Grotesk für alles Gelesene,
   Courier nur noch im Index — dort ist die Tabellenanmutung das Argument. */
:root {
    --ink-black: #100e0c;
    --bone: #eae5d9;
    --ash: #8f887a;
    --blood: #c9354d;
    --font-display: "Times New Roman", Times, serif;
    --font-ui: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono: "Courier New", Courier, monospace;
    --bar-height: 3.5rem;

    /* Zweites Register: der Index ist hell und kalt, der Raum warm und dunkel.
       Deshalb ein eigenes Schwarz — --ink-black zieht ins Braune und wirkt auf
       Papier muffig. */
    --papier: #ffffff;
    --ink-kalt: #0e1114;
    --ink-leise: #6a7075;
    --linie-hell: rgba(14, 17, 20, 0.16);
}

* { 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));
}

.site-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    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 */
.rail::before {
    inset: -8rem -3rem -8rem auto;
    width: 26rem;
    background: radial-gradient(ellipse at right center,
        rgba(16, 14, 12, 0.8) 0%, rgba(16, 14, 12, 0.5) 45%, rgba(16, 14, 12, 0) 72%);
}

.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 */
.rail-toggle {
    display: none;
    font: 500 1rem var(--font-ui);
    text-transform: lowercase;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

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

    .rail { display: none; }

    .rail.offen {
        display: flex;
        inset: 0;
        top: 0;
        right: 0;
        transform: none;
        justify-content: center;
        padding: var(--bar-height) 1.25rem 2rem;
        background: rgba(16, 14, 12, 0.94);
        mix-blend-mode: normal;
        z-index: 15;
    }

    .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;
}

/* ---- Index: zwei Sichten auf denselben Bestand ---- */
/* Der Umschalter ist die Überschrift des Index, nicht Bedienkram daneben:
   seit „complexes“ aus der Rail raus ist, führt hier der einzige Weg in die
   gruppierte Sicht. Deshalb Display-Schrift in Größe der Komplex-Titel —
   zwei gleichwertige Zugänge zum selben Bestand, nebeneinandergestellt. */
.index-schalter {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
}

.index-schalter button {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ash);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0 0 0.35rem;
    cursor: pointer;
    transition: color 0.15s ease;
}

.index-schalter button:hover { color: var(--bone); }

.index-schalter button.aktiv {
    color: var(--bone);
    border-bottom-color: var(--blood);
}

/* Gruppierte Sicht: die Klammer trägt als Überschrift, die Werke stehen
   darunter im selben Raster wie die flache Tabelle. Nur die Komplex-Spalte
   fehlt — sie ist hier die Überschrift. */
.kl-gruppe { margin-bottom: 2.5rem; }

.kl-kopf {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    margin-bottom: 0.5rem;
}

.kl-titel {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.kl-meta {
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--ash);
}

.kl-kopf:hover .kl-titel { color: var(--blood); }

/* „No complex" ist kein Ziel, nur eine Überschrift */
.kl-kopf-tot .kl-titel { color: var(--ash); font-weight: 500; }

/* Die Werkform vor dem Titel — genutzt von der Komplexseite im dunklen
   Register, wo sie kein Raster hat, sondern frei vor dem Titel steht. */
.kf-form {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--blood);
}

/* Tabellarisch: ein Datenblatt, kein Schaufenster. Durchgehend Grotesk und
   klein — Courier gab der Tabelle einen Bastel-Ton, und große fette Versalien
   ließen fünfzehn Zeilen wie ein Plakat wirken. Harte Haarlinien an jeder
   Zelle: das Raster ist die Ordnung, nicht der Weißraum. */
.index-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.8125rem;
}

/* Die Kategorien stehen mittig über der Tabelle — sie gehören ihr, nicht
   dem Seitenrand. Das Suchfeld sitzt rechts in derselben Zeile. */
.filter-kategorien {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.1rem;
}

.filter-suche {
    grid-column: 3;
    justify-self: end;
    width: min(14rem, 100%);
    font: inherit;
    font-family: var(--font-ui);
    color: inherit;
    background: none;
    border: 0;
    border-bottom: 1px solid currentColor;
    padding: 0.15rem 0;
    -webkit-appearance: none;
    appearance: none;
}

.filter-suche::placeholder { color: currentColor; opacity: 0.5; }

.werk-tabelle {
    font-family: var(--font-ui);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--ink-kalt);
    border-bottom: 0;
}

.wt-kopf, .werk-zeile {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr) 11rem 13rem 4.5rem;
    align-items: stretch;
    border-bottom: 1px solid var(--ink-kalt);
}

/* Haarlinie an jeder Zelle statt Abständen zwischen den Spalten */
.wt-kopf > *, .werk-zeile > * {
    padding: 0.35rem 0.6rem;
    border-right: 1px solid var(--ink-kalt);
}

.wt-kopf > :last-child, .werk-zeile > :last-child { border-right: 0; }

/* Ohne Komplex-Spalte — die steht in der gruppierten Sicht als Überschrift */
.werk-tabelle-gruppe .werk-zeile {
    grid-template-columns: 7.5rem minmax(0, 1fr) 13rem 4.5rem;
}

.wt-kopf {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

.wt-kopf [data-sort] { cursor: pointer; }

/* Sortierpfeile: leise, bis die Spalte dran ist */
.wt-kopf i {
    font-style: normal;
    margin-left: 0.4em;
    opacity: 0.35;
}

.wt-kopf [data-sort]:hover i, .wt-kopf [data-sort].sortiert i { opacity: 1; }

/* display:grid würde das hidden-Attribut des Filters überschreiben */
.werk-zeile[hidden] { display: none; }

/* Titel kursiv und normal stark — der Titel trägt über die Schräge,
   nicht über Fettung. */
.wz-titel { font-style: italic; }

.wz-jahr { text-align: right; }

@media (max-width: 60rem) {
    .wt-kopf { display: none; }

    .wt-kopf, .werk-zeile,
    .werk-tabelle-gruppe .werk-zeile { grid-template-columns: 7.5rem minmax(0, 1fr) 4.5rem; }

    .wz-komplex, .wz-themen { display: none; }
}

/* 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: 600;
    font-size: 1.05rem;
    margin-right: 1rem;
}

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

/* Herkunftsnachweis: im Dummy wichtiger als im späteren Theme —
   zeigt, welcher Text belegt ist und welcher nicht. */
.seite-quelle {
    margin-top: 4rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(234, 229, 217, 0.14);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: var(--ash);
}

/* ---- Index als helles Register ----------------------------------------
   Der Raum ist warm und dunkel, die Bibliothek kalt und hell. Der Umschlag
   passiert im Scrollen und ist der eigentliche Registerwechsel — deshalb
   liegt hier alles gescoped auf .slide-index statt in globalen Tokens. */
.slide-index {
    background-color: var(--papier);
    color: var(--ink-kalt);
}

/* Korn auf dem Papier: das reine Weiß wirkt sonst wie ein leeres Dokument.
   Als Hintergrundbild, nicht als filter — es liegt unter dem Inhalt und
   rührt die Schrift nicht an. */
.slide-index::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
}

/* Inhalt über das Korn heben */
.slide-index > * { position: relative; z-index: 1; }

.slide-index .kl-meta,
.slide-index .wt-kopf,
.slide-index .wz-komplex,
.slide-index .wz-jahr,
.slide-index .wz-themen,
.slide-index .filter-kategorien a,
.slide-index .index-schalter button { color: var(--ink-leise); }

.slide-index .kl-kopf { border-bottom-color: rgba(14, 17, 20, 0.32); }

.slide-index .filter-kategorien a:hover,
.slide-index .index-schalter button:hover,
.slide-index .index-schalter button.aktiv { color: var(--ink-kalt); }

/* Werkform als gefüllter Chip — die einzige Farbe im Register, und sie
   trägt Information: sechs Formen, sechs Töne. Der Wert kommt über
   data-form von der Zeile, damit beide Sichten dieselbe Regel benutzen. */
.slide-index [data-form="Opera"]        { --form-farbe: #d81b4a; }
.slide-index [data-form="Film"]         { --form-farbe: #1f6feb; }
.slide-index [data-form="Installation"] { --form-farbe: #00a0a0; }
.slide-index [data-form="Text"]         { --form-farbe: #6d4aff; }
.slide-index [data-form="Programme"]    { --form-farbe: #1b1f24; }
.slide-index [data-form="Photo series"] { --form-farbe: #f5a300; --form-text: var(--ink-kalt); }

/* Die Kategorie ist eine ausgefüllte Zelle über die volle Zeilenhöhe —
   so liest sich die Spalte als Farbband und nicht als Reihe von Aufklebern. */
.slide-index .wz-form {
    background: var(--form-farbe, var(--ink-leise));
    color: var(--form-text, #fff);
    white-space: nowrap;
}

/* In der gruppierten Sicht bleibt es ein schmales Etikett: dort steht die
   Form nicht in einem Raster, sondern vor dem Titel. */
.slide-index .kf-form {
    justify-self: start;
    white-space: nowrap;
    padding: 0.05em 0.5em;
    background: var(--form-farbe, var(--ink-leise));
    color: var(--form-text, #fff);
}

/* Hover nüchtern wie im dunklen Register: nur Farbe, keine Größenspiele */
.slide-index .werk-zeile:hover .wz-titel,
.slide-index .kl-kopf:hover .kl-titel,
.slide-index .filter-kategorien a.aktiv,
.slide-index .wt-kopf [data-sort].sortiert { color: var(--blood); }

.slide-index .werk-zeile:hover { background: rgba(14, 17, 20, 0.05); }

.slide-index .werk-zeile:hover .wz-komplex,
.slide-index .werk-zeile:hover .wz-jahr,
.slide-index .werk-zeile:hover .wz-themen { color: var(--ink-kalt); }

.slide-index .kl-kopf-tot .kl-titel { color: var(--ink-leise); }

/* Kopfzeile und Rail liegen fest über allem — auf Papier müssen sie kippen,
   sonst stünde helle Schrift auf hellem Grund. Geschaltet von dummy.js. */
.register-hell .site-bar,
.register-hell .rail,
.register-hell .slide-counter { color: var(--ink-kalt); text-shadow: none; }

/* Kein Scrim auf Papier: er existiert, damit die Leisten sich gegen bewegtes
   Bild behaupten — auf flachem Grund legt er sich nur über die Tabelle und
   bleicht die Spalten aus, die zufällig hinter der Rail liegen. */
.register-hell .site-bar::before,
.register-hell .rail::before { display: none; }

.register-hell .rail-tot span { opacity: 0.35; }

/* Bildvorschau am Cursor: ein Foto zur Zeile, hart gerahmt, ohne Schatten
   und ohne Animation. Die Tabelle bleibt eine Tabelle — das Bild ist eine
   Fußnote, keine Spalte. Position und Ecke setzt dummy.js. */
.index-vorschau {
    position: fixed;
    z-index: 30;
    width: 22rem;
    max-width: 40vw;
    margin: 0;
    pointer-events: none;
    visibility: hidden;
}

.index-vorschau.sichtbar { visibility: visible; }

.index-vorschau img {
    width: 100%;
    height: auto;
    background: var(--ink-kalt);
}

/* 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); }

/* Auf Papier trägt die helle Schrift nicht */
.register-hell .legal { color: var(--ink-kalt); text-shadow: none; }