/*
 * Base styles. Evening-friendly dark palette — the app is used at the table
 * for hours at a time.
 */

:root {
  --bg: #16151a;
  --bg-raised: #1e1d24;
  --bg-sunken: #121116;
  /* Was die Spielleitung erzählt. Eine Spur wärmer als eine Blase, nicht mehr —
     die Erzählung soll sich vom Gesagten abheben, ohne lauter zu werden. */
  --bg-narration: color-mix(in oklab, #1e1d24 93%, #c9a227);
  --border: #322f3b;
  --text: #e6e2dc;
  --text-muted: #9b95a3;
  --accent: #c9a227;
  --accent-soft: #3a3120;
  --danger: #d4736a;
  --radius: 6px;
  --font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

/* Die Regelseite und die Welt haben ein Inhaltsverzeichnis mit Ankern. Ohne
   diese Zeile landet die angesprungene Überschrift genau unter der klebenden
   Leiste — man klickt auf einen Abschnitt und sieht seine Überschrift nicht. */
html { scroll-padding-top: 4rem; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.page {
  max-width: 62rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

/* Top bar --------------------------------------------------------------- */

/* **Klebend, weil der Verlauf endlos ist.** Eine Kampagne, die einen Abend
   gelaufen ist, füllt mehrere Bildschirmhöhen, und die Seite steht beim Öffnen
   ganz unten — bis zur Navigation wäre es sonst jedes Mal der ganze Weg nach
   oben.

   `sticky` und nicht `fixed`: Die Leiste bleibt damit im Fluss, die Höhe des
   Dokuments ändert sich nicht. Genau darauf rechnen `chat_controller`
   (`scrollHeight - innerHeight - scrollY`, „hängt der Blick unten?") und
   `history_controller` (Höhendifferenz nach dem Nachladen älterer Beiträge).
   Mit `fixed` bliebe die Rechnung zwar richtig, aber der erste Beitrag läge
   unter der Leiste.

   `z-index` ist nicht Zierde: **jede Blase im Chat ist `position: relative`**
   (`.bubble`), und positionierte Geschwister ohne Stapelwert werden nach
   Dokumentreihenfolge gemalt. Ohne diese Zeile schöbe sich jeder Beitrag beim
   Vorbeiscrollen über die Leiste. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  /* Undurchsichtig — der Verlauf läuft darunter hindurch. */
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border);
}

.topbar__brand {
  font-family: var(--font);
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  color: var(--text);
}

.topbar__nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.9rem;
}

/* Typography ------------------------------------------------------------ */

h1, h2, h3 { font-family: var(--font); font-weight: 600; line-height: 1.25; }
h1 { font-size: 1.75rem; margin: 0 0 0.5rem; }
h2 { font-size: 1.3rem; margin: 2rem 0 0.75rem; }
h3 { font-size: 1.05rem; margin: 1.5rem 0 0.5rem; }

.muted { color: var(--text-muted); }
.small { font-size: 0.85rem; }

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* Cards and lists ------------------------------------------------------- */

.card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
}

.card__title { font-family: var(--font); font-size: 1.1rem; margin: 0 0 0.25rem; }

.empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
}

/* Tables ---------------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); }
th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 600; }
tbody tr:last-child td { border-bottom: none; }

.table-wrap { overflow-x: auto; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); }

/* Eine Lücke, keine Auszeichnung: gestrichelt und still, damit sie beim
   Überfliegen einer Spalte auffällt, ohne die Zeile an sich zu ziehen. */
.mark {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border: 1px dashed var(--border);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.mark:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* Forms ----------------------------------------------------------------- */

.form { max-width: 34rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; margin-bottom: 0.3rem; font-size: 0.85rem; color: var(--text-muted); }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], textarea, select {
  width: 100%;
  padding: 0.55rem 0.7rem;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
}

input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.field--check { display: flex; align-items: center; gap: 0.5rem; }
.field--check label { margin: 0; color: var(--text); }
.field--check input { width: auto; }

.hint { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; }

/* Buttons --------------------------------------------------------------- */

button, .button, input[type="submit"] {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  color: var(--accent);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

button:hover, .button:hover, input[type="submit"]:hover { background: var(--accent); color: #16151a; text-decoration: none; }

.button--quiet { background: transparent; border-color: var(--border); color: var(--text-muted); }
.button--quiet:hover { background: var(--bg-raised); color: var(--text); border-color: var(--text-muted); }
.button--danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.button--danger:hover { background: var(--danger); color: #16151a; }

.linkish {
  padding: 0; background: none; border: none; color: var(--accent);
  font: inherit; font-size: 0.9rem; cursor: pointer;
}
.linkish:hover { background: none; color: var(--accent); text-decoration: underline; }

/* `wrap`, weil fünf Knöpfe nebeneinander auf einem Telefon die ganze Seite
   quer ziehen — dann steht der Verlauf halb außerhalb des Bildschirms. */
.actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; }
.actions--inline { margin: 0; }

/* Flash ----------------------------------------------------------------- */

.flash {
  padding: 0.7rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-raised);
  margin-bottom: 1.25rem;
}
.flash--alert { border-color: var(--danger); color: var(--danger); }
.flash--notice { border-color: var(--accent); }

/* Errors ---------------------------------------------------------------- */

.errors {
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  color: var(--danger);
}
.errors ul { margin: 0.25rem 0 0; padding-left: 1.2rem; }

/* Chat ------------------------------------------------------------------ */

.chat { display: flex; flex-direction: column; gap: 0.75rem; }

.chat__log {
  display: flex;
  flex-direction: column;
  min-height: 12rem;
}

#messages { display: flex; flex-direction: column; gap: 1.15rem; }

/* Ein Zwiegespräch liest sich als Zwiegespräch, wenn die Sprecher einander
   gegenüberstehen — Portrait links, Text rechts, beim Wechsel gespiegelt.
   Erzähltext läuft über die volle Breite und kippt nichts. */

.message {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.7rem 1rem;
}

.message--dialogue {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  background: none;
  border: none;
  padding: 0;
}
.message--dialogue.message--left { flex-direction: row; }
.message--dialogue.message--right { flex-direction: row-reverse; }

.portrait {
  flex: 0 0 auto;
  width: 76px;
  display: grid;
  place-items: center;
  background: var(--bg-sunken);
  border: 2px solid var(--border);
  border-radius: 3px;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.6);
}
/* Die Höhe folgt dem Bild — es wird nur verkleinert, nie beschnitten. */
.portrait img { display: block; width: 100%; height: auto; }
/* Ohne Bild bleibt der Rahmen quadratisch, damit die Zeile ihre Form behält. */
.portrait:not(:has(img)) { aspect-ratio: 1; }
.portrait__initial { font-family: var(--font); font-size: 2rem; color: var(--accent); opacity: 0.75; }

.bubble {
  position: relative;
  max-width: 78%;
  padding: 0.55rem 0.9rem 0.7rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

/* Der kleine Sporn zum Portrait hin — die Blase zeigt, wer spricht. */
.bubble::before {
  content: "";
  position: absolute;
  top: 22px;
  width: 0;
  height: 0;
  border: 8px solid transparent;
}
.message--left .bubble::before { left: -17px; border-right-color: var(--border); }
.message--right .bubble::before { right: -17px; border-left-color: var(--border); }
.message--right .message__head { flex-direction: row-reverse; }
.message--right .message__time { margin-left: 0; margin-right: auto; }

/* Beisammensitzen am Tisch, nicht in der Rolle: leiser und ohne Rahmen. */
.message--dialogue.message--ooc .bubble { background: transparent; border-style: dashed; }

.message__head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
}
.message__author { font-weight: 600; color: var(--accent); }
.message__kind, .message__time { color: var(--text-muted); }
.message__time { margin-left: auto; }

.message__body { font-family: var(--font); font-size: 1.02rem; }
.message__body .plain { white-space: pre-wrap; }

/* Erzähltext trägt den goldenen Streifen und den wärmeren Grund. Beides
   zusammen, damit man die Erzählung auch dort erkennt, wo der Streifen unter
   dem Porträt fast verschwindet. */
.message--narration {
  border-left: 3px solid var(--accent);
  background: var(--bg-narration);
}

/* Erzählt eine Figur, kippt der Streifen mit ihr. An der linken Kante einer
   rechts stehenden Zeile stünde er im Leeren — quer über die Blase hinweg,
   weit weg von dem Bild, zu dem er gehört. */
.message--dialogue.message--right.message--narration {
  border-left: none;
  border-right: 3px solid var(--accent);
}

/* Und die Farbe hängt dann an der Blase, nicht an der Zeile: die Zeile ist im
   Zwiegespräch nur ein Gerüst und reicht über die ganze Breite. */
.message--dialogue.message--narration { background: none; }
.message--dialogue.message--narration .bubble { background: var(--bg-narration); }

.message--ooc { background: transparent; border-style: dashed; }
.message--note, .message--roll, .message--system {
  background: var(--bg-sunken);
  font-size: 0.92rem;
}

.message__picture { margin: 0; }
.message__picture img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.message__picture figcaption {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
}

/* A picture on its way. Deliberately quiet — the waiting should be visible
   but not louder than the story around it. */
.message__pending {
  margin: 0;
  padding: 1.5rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
}

.message__explains {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Die Bitte der Spielleitung, etwas zu werfen. Sie sieht bewusst nicht aus
   wie ein Ergebnis: hier steht noch nichts fest, hier wird etwas verlangt. */
.message--roll_request {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
}
.message--roll_request .message__body {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.95rem;
}

/* Drafts are ephemeral: never stored, never sent to Claude, and they have to
   look unmistakably unfinished. */
.chat__drafts:empty { display: none; }
.draft {
  margin: 0 0 0.3rem;
  padding: 0.3rem 0.6rem;
  border-left: 2px solid var(--border);
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.9rem;
  white-space: pre-wrap;
}
.draft__author { font-style: normal; font-weight: 600; }
.draft__author::after { content: " tippt:"; font-weight: 400; }

.compose {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
}
.compose__label { display: block; margin-bottom: 0.35rem; font-size: 0.85rem; color: var(--text-muted); }
.compose__row { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.6rem; flex-wrap: wrap; }
.compose__as { display: flex; gap: 0.5rem; margin-right: auto; flex-wrap: wrap; }
.compose__select { width: auto; }
.compose__preview {
  padding: 0.7rem 1rem;
  background: var(--bg-sunken);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 1.02rem;
  white-space: pre-wrap;
  min-height: 3rem;
}

/* Import: was ein Bündel täte -------------------------------------------- */

.action {
  display: inline-block;
  min-width: 6.5em;
  padding: 0.1rem 0.5rem;
  border-radius: 3px;
  border: 1px solid var(--border);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.action--created { border-color: var(--accent); color: var(--accent); }
.action--updated { border-color: var(--accent); color: var(--text); }
.action--removed { border-color: var(--danger); color: var(--danger); }

.form--inline { display: flex; gap: 1rem; align-items: flex-end; max-width: none; }
.form--inline .field { margin-bottom: 0; }

/* Der obere Rand des Verlaufs ------------------------------------------- */

.chat__older {
  display: grid;
  place-items: center;
  min-height: 2.5rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}
/* Der Hinweis erscheint erst, während wirklich geladen wird — sonst steht über
   jedem Chat dauerhaft „lädt", obwohl nichts läuft. */
.chat__older-label { opacity: 0; transition: opacity 150ms; }
.chat__older--loading .chat__older-label { opacity: 1; }

/* Auf der Staff-Spur wird von Hand nachgeladen — sie springt beim Öffnen nicht
   ans Ende, dort stünde der Merker sofort im Bild. */
.chat__older--manual { min-height: 0; margin-bottom: 0.75rem; }
.chat__older--manual button { font-size: 0.8rem; padding: 0.3rem 0.7rem; }
.chat__older--manual.chat__older--loading button { opacity: 0.5; }

.chat__beginning {
  margin: 0 0 0.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
  text-align: center;
  font-family: var(--font);
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Der eigene Bogen als Overlay ------------------------------------------
   Die Leiste sitzt unter dem Beitragsfeld, weil der Verlauf ohnehin am Ende
   hängt — dort ist der Knopf, ohne dass etwas über dem Text klebt. */

.sheetbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
}
.sheetbar__who:empty { display: none; }

.sheet {
  width: min(46rem, 100vw - 2rem);
  max-height: 85dvh;
  margin: auto;
  padding: 0;
  overflow: hidden;
  flex-direction: column;
  background: var(--bg-raised);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
/* Nur am offenen Dialog. Eine Autorenregel schlägt die Vorgabe des Browsers,
   also stünde der Bogen bei schlichtem `display: flex` auch im geschlossenen
   Zustand offen in der Seite. */
.sheet[open] { display: flex; }
.sheet::backdrop { background: rgb(0 0 0 / 0.65); }

.sheet__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border);
  /* Der Kopf liegt außerhalb des rollenden Bereichs: auf dem Telefon ist der
     Schließen-Knopf sonst nach dem ersten Wischen unerreichbar. */
  flex: none;
}
.sheet__title { margin: 0; margin-right: auto; font-size: 1.05rem; }
.sheet__body {
  padding: 0.9rem 1rem 1.2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.sheet__panel[hidden] { display: none; }
.sheet__panel > *:first-child { margin-top: 0; }

/* Die Attributtabelle eines KULT-Bogens hat fünf Spalten. Ohne Mindestbreite
   quetscht `table { width: 100% }` sie auf dem Telefon zu einer Wortsäule
   zusammen, statt überzulaufen — also erst breit machen, dann rollen lassen. */
.table-scroll { overflow-x: auto; }
.sheet__body table { min-width: 30rem; }

@media (max-width: 40rem) {
  .sheet {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    border: none;
    border-radius: 0;
  }
}

/* Staff track: story left, machinery right. */
.tracks { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 60rem) {
  .tracks { grid-template-columns: 3fr 2fr; align-items: start; }
}
.tracks__story, .tracks__technical { display: flex; flex-direction: column; }
.tracks__story h2, .tracks__technical h2 { margin-top: 0; }
.tracks__story > div, .tracks__technical > div { display: flex; flex-direction: column; gap: 0.75rem; }

/* Rendered Markdown ----------------------------------------------------- */

.prose > *:first-child { margin-top: 0; }
.prose > *:last-child { margin-bottom: 0; }
.prose { font-family: var(--font); font-size: 1.02rem; }
.prose h1, .prose h2, .prose h3, .prose h4 { margin: 1.25rem 0 0.5rem; }
.prose p, .prose ul, .prose ol { margin: 0 0 0.75rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: 0.2rem; }
.prose code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.9em;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.05em 0.3em;
}
.prose pre {
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  overflow-x: auto;
}
.prose pre code { background: none; border: none; padding: 0; }
.prose blockquote {
  margin: 0 0 0.75rem;
  padding-left: 1rem;
  border-left: 3px solid var(--accent);
  color: var(--text-muted);
  font-style: italic;
}
.prose table { margin-bottom: 0.75rem; }
.prose hr { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }

/* The state block is maintained by the storyteller, not by the player — it
   has to read as something other than the sheet above it. */
.state {
  background: var(--bg-sunken);
  border-left: 3px solid var(--accent);
}

/* A ruling sits inside the section it bends, visibly apart from it. */
.ruling {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.ruling__head {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
}
.ruling .prose { font-size: 0.95rem; }

code.token {
  display: inline-block;
  padding: 0.4rem 0.6rem;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.9rem;
  word-break: break-all;
}

ul.plain { list-style: none; padding: 0; margin: 0 0 0.5rem; }
ul.plain li { margin-bottom: 0.3rem; }

.form--wide { max-width: none; }
.form--wide textarea { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.9rem; line-height: 1.55; }

/* Auth screens ---------------------------------------------------------- */

.auth {
  max-width: 24rem;
  margin: 4rem auto;
}
.auth h1 { font-size: 1.4rem; text-align: center; }
.auth__links { margin-top: 1.5rem; text-align: center; font-size: 0.85rem; }
.auth__links a { display: block; margin-top: 0.4rem; }

.portrait-preview {
  display: block;
  width: 90px;
  height: auto;
  border: 2px solid var(--border);
  border-radius: 3px;
}

/* Kopfzeile einer Figur: Bild neben Name und Angaben. */
.figure-head { display: flex; align-items: flex-start; gap: 1rem; }

/* Breadcrumb: wo bin ich, und wie komme ich zurück. */
.breadcrumb { margin-bottom: 1.25rem; font-size: 0.85rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.breadcrumb li { display: flex; align-items: center; gap: 0.5rem; color: var(--text-muted); }
.breadcrumb li + li::before { content: "›"; color: var(--border); }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb [aria-current="page"] span { color: var(--text); }

/* Abenteuerkarte -------------------------------------------------------- */

/* Der Knotenbaum. Eine Linie links statt Aufzählungspunkten: bei fünfzig
   Knoten über vier Ebenen sagt die Einrückung mehr als jedes Zeichen. */
.tree { list-style: none; margin: 0; padding: 0; }
.tree .tree {
  margin: 0.5rem 0 0.75rem 0.35rem;
  padding-left: 1rem;
  border-left: 1px solid var(--border);
}
.node { margin-bottom: 0.75rem; }
.node__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin: 0; }
.node__head code { font-size: 0.8rem; }
.node p { margin: 0.15rem 0; }

/* Die Marken einer Zeile. `wrap`, sonst zieht die Reihe auf dem Telefon
   die ganze Seite quer. */
.marks { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.35rem 0 0; }
.marks:empty { display: none; }

/* Besetzung: Bild neben Namen und Marken. */
.cast { list-style: none; margin: 0; padding: 0; }
.cast-member {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}
.cast-member:last-child { border-bottom: none; }
.cast-member > div { min-width: 0; }
.portrait--small { width: 48px; }
.portrait--small .portrait__initial { font-size: 1.2rem; }

/* Handouts als Bild, nicht als Dateiname. */
.handouts { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.handouts img { display: block; max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: 3px; }