/* Die Bühne des Fantasy Board.
 *
 * Die Datei gehört zum Board-Paket, die Seite drumherum ist eine gewöhnliche
 * Next-Seite der Website (`web/app/ki-beirat/page.tsx`). Deshalb steht hier kein
 * Reset, keine Schrifteinbindung und keine Regel ohne `.board-stage`: alles
 * darunter gehört der Bühne, alles darüber der Website. Was hier global
 * stünde, fiele der Navigation und der Fußzeile in den Rücken.
 */

/* Die Palette kommt aus `web/app/globals.css`, der einzigen Token-Quelle des
   Monorepos: die Seite liefert sie als `--color-*` aus, hier bekommen sie nur
   die kurzen Namen, unter denen die Bühne sie kennt. Eigene Farbwerte stehen
   allein für das eine dunkle Möbel im Raum. */
.board-stage {
  --surface: var(--color-surface); --surface-muted: var(--color-surface-muted); --surface-sunken: var(--color-surface-sunken);
  --ink: var(--color-ink); --ink-muted: var(--color-ink-muted); --ink-subtle: var(--color-ink-subtle);
  --brand: var(--color-brand); --brand-light: var(--color-brand-light); --brand-dark: var(--color-brand-dark);
  --anchor: var(--color-anchor); --anchor-light: var(--color-anchor-light); --anchor-dark: var(--color-anchor-dark);
  --border: var(--color-border); --border-strong: var(--color-border-strong); --ok: var(--color-success);
  --brand-tint: color-mix(in oklab, var(--brand) 12%, var(--surface));
  --anchor-tint: color-mix(in oklab, var(--anchor) 12%, var(--surface));

  /* Der Tisch: dunkles, warmes Holz, das einzige schwere Möbelstück im Raum. */
  --wood-hi: #4A4137; --wood: #2A241D; --wood-lo: #14110D; --wood-edge: #0B0907;
  --ivory: #F3EEE1;
  --display: var(--font-display); --body: var(--font-sans); --mono: var(--font-mono);
  --r: var(--radius-card); --shadow: 0 1px 2px rgba(30,26,22,.04), 0 5px 16px -12px rgba(30,26,22,.15);

  /* Der Durchmesser eines Medaillons. Er steht an einer Stelle, weil vier
     Dinge daran hängen: Bildgröße, Rand des Tisches, der Abstand des Namens
     und die Höhe, auf der die Sprechbalken sitzen. Jede Tischgröße setzt ihn
     neu (Sitzung, Ende, die drei Breakpunkte), sonst nichts. */
  --medal: 74px;

  /* Höhe der Kopfzeile der Website: `h-24` (6rem) plus die Trennlinie darunter
     (`components/layout/Navigation.tsx`). Sie klebt oben (`sticky top-0`) und
     liegt mit `z-40` über der Bühne, belegt also auf jeder Scrollhöhe dieselben
     obersten Pixel. Alles, was hier fest im Bild steht, fängt darunter an. */
  --site-header: calc(6rem + 1px);

  color: var(--ink);
  font-family: var(--body);
  line-height: 1.55;
}

.board-stage *, .board-stage *::before, .board-stage *::after { box-sizing: border-box; }
.board-stage button { cursor: pointer; }

/* Die Breite gibt der Seitenrahmen vor, nicht mehr die Bühne. */
.board-stage .room { display: flex; flex-direction: column; }

/* ---------- Werkzeugleiste über dem Tisch */
/* Die Kopfzeile der Bühne. Einzeln stehende Schalter lasen sich zwischen
   Brotkrümeln und Überschrift wie dort vergessene Bedienelemente; deshalb
   sitzen die drei in einer gemeinsamen Schiene, die rechts bündig steht und
   nur so breit ist wie ihr Inhalt. Sie erscheint erst, wenn ein Schalter da
   ist, sonst stünde dort eine leere Pille. */
.board-stage .stage-bar { align-self: flex-end; display: flex; align-items: center; gap: 3px; padding: 4px; border-radius: 999px; }
/* Oben steht die Trennlinie der Brotkrümel: ohne den Abstand klebt die Pille
   daran, als hinge sie an der Kopfzeile statt an der Bühne. */
.board-stage .stage-bar:has(.tab:not([hidden])) { background: var(--surface-muted); border: 1px solid var(--border); margin: 16px 0 18px; }
.board-stage .tab { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; border-radius: 999px; padding: 6px 13px; color: var(--ink-muted); font-size: 13px; line-height: 1.3; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.board-stage .tab:hover { color: var(--ink); background: #fff; }
.board-stage .tab.active { color: var(--ink); background: #fff; box-shadow: 0 0 0 1px var(--brand-light), 0 1px 2px rgba(30,26,22,.06); }
/* Die Zählung ist eine Angabe zum Reiter, kein Teil seines Namens. */
.board-stage .tab > span + span { font-family: var(--mono); font-size: 10.5px; color: var(--ink-subtle); border: 1px solid var(--border); border-radius: 999px; padding: 1px 6px; }
.board-stage .tab:hover > span + span, .board-stage .tab.active > span + span { color: var(--ink-muted); border-color: var(--border-strong); }
/* Der Neustart öffnet keine Schublade, er verwirft die Sitzung: der einzige
   gefüllte Knopf in der Schiene, damit er nicht als dritter Reiter gelesen
   wird. */
.board-stage #new-session { margin-left: 3px; padding: 6px 14px; border: 0; border-radius: 999px; background: var(--ink); color: var(--surface); font-size: 13px; }
.board-stage #new-session:hover { background: var(--brand); }

/* ---------- Hero */
.board-stage .hero { text-align: center; margin: 18px auto 12px; max-width: 780px; min-height: 0; transition: opacity .45s ease, margin .5s ease, max-height .5s ease; overflow: hidden; max-height: 260px; }
.board-stage .hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 3.05vw, 38px); line-height: 1.12; letter-spacing: -.015em; margin: 0 0 9px; }
.board-stage .hero .sub { font-family: var(--display); font-style: italic; color: var(--ink-muted); font-size: 16px; line-height: 1.45; margin: 0 auto; max-width: 640px; }
.board-stage .room.session .hero { max-height: 0; opacity: 0; margin: 8px 0 0; }

.board-stage .topic-line { text-align: center; margin: 12px auto 32px; max-width: 900px; animation: rise .5s ease both; }
.board-stage .topic-line .label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-subtle); margin-bottom: 5px; }
.board-stage .topic-line #stage-topic { font-family: var(--display); font-size: 21px; line-height: 1.3; }
.board-stage .cast-why { max-width: 700px; margin: 8px auto 0; font-family: var(--display); font-style: italic; font-size: 14.5px; line-height: 1.45; color: var(--ink-subtle); }
.board-stage .cast-why-label { font-family: var(--mono); font-style: normal; font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--brand); }

/* ================= Der Tisch ================= */
.board-stage .table-wrap { position: relative; width: 100%; height: 424px; margin: 0 auto; flex: none; transition: height .6s cubic-bezier(.4,0,.2,1); }
/* `display: block` steht hier gegen Tailwind: die Website schreibt aus dem
   Klassennamen `table` im Markup der Bühne eine Utility `.table { display:
   table }`, und ein absolut positionierter Tisch mit `display: table` schrumpft
   auf seinen Inhalt zusammen, also auf nichts. */
.board-stage .table {
  display: block;
  position: absolute; left: 6%; right: 6%; top: 11%; bottom: 11%; border-radius: 50%;
  background:
    radial-gradient(120% 150% at 50% 12%, var(--wood-hi) 0%, var(--wood) 42%, var(--wood-lo) 78%, var(--wood-edge) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(243,238,225,.13),
    inset 0 3px 26px rgba(0,0,0,.55),
    0 44px 72px -46px rgba(30,26,22,.75), 0 4px 14px -8px rgba(30,26,22,.3);
  transition: left .8s cubic-bezier(.3,.9,.25,1), right .8s cubic-bezier(.3,.9,.25,1), top .8s cubic-bezier(.3,.9,.25,1), bottom .8s cubic-bezier(.3,.9,.25,1);
  animation: table-in 1s cubic-bezier(.2,.8,.2,1) both;
}
/* Weniger Mitglieder, engerer Tisch. Oben und unten steht mehr Rand als
   nötig aussieht: die Namensschilder hängen außerhalb des Tisches und liefen
   sonst in die Frage über dem Tisch und in die Wortmeldung darunter. */
.board-stage .room.session .table { left: 11%; right: 11%; top: 13%; bottom: 13%; }
.board-stage .room.ended .table { top: 11%; bottom: 11%; }
/* Eingravierte Intarsie im Rand */
.board-stage .table::before { content: ""; position: absolute; inset: 26px 34px; border-radius: 50%; border: 1px solid rgba(243,238,225,.09); }
.board-stage .table::after { content: ""; position: absolute; inset: 32px 42px; border-radius: 50%; border: 1px solid rgba(243,238,225,.05); }
/* Eingraviertes Messingschild am unteren Tischrand */
/* Erscheint erst, wenn der Tisch leer genug dafür ist, also in der Sitzung. */
/* Das Messingschild ist die Signatur des Tisches und war als kaum sichtbare
   Gravur nicht zu lesen: jetzt in Elfenbein und eine Spur größer. */
.board-stage .plate { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-family: var(--mono); font-size: 15px; letter-spacing: .3em; text-transform: uppercase; color: var(--ivory); pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,.6); opacity: 0; transition: opacity .6s ease; }

.board-stage .table-center {
  position: absolute; left: 22%; right: 22%; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  /* Auf dunklem Holz aus zwei Metern Abstand: groß genug, hell genug. */
  font-family: var(--display); font-style: italic; color: rgba(243,238,225,.88); font-size: clamp(17px, 1.7vw, 21px); line-height: 1.4;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
.board-stage .table-center.show { opacity: 1; }
.board-stage .table-center .think { display: none; }
.board-stage .table-center.busy .think { display: inline-flex; }
.board-stage .table-center .think i { background: rgba(243,238,225,.5); }

/* ---------- Das Papier in der Mitte: hier liegt die Frage */
.board-stage .paper {
  position: absolute; left: 50%; top: 50%; width: min(600px, 62%); transform: translate(-50%, -50%) rotate(-.35deg);
  background: linear-gradient(#FEFCF6, #F6F2E6); border-radius: 3px;
  padding: 12px 18px 12px; display: flex; flex-direction: column;
  box-shadow: 0 26px 44px -20px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.9);
  transition: opacity .4s ease, transform .55s cubic-bezier(.5,0,.75,0);
  animation: paper-in .7s .55s cubic-bezier(.2,.8,.2,1) both;
}
.board-stage .paper:focus-within { box-shadow: 0 30px 50px -20px rgba(0,0,0,.75), 0 0 0 2px var(--brand-light), inset 0 1px 0 rgba(255,255,255,.9); }
.board-stage .paper-head { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-subtle); padding-bottom: 7px; border-bottom: 1px solid var(--border); }
.board-stage .paper textarea { width: 100%; border: 0; outline: 0; resize: none; background: transparent; font-family: var(--display); font-size: 20px; line-height: 1.35; padding: 11px 0 9px; min-height: 64px; }
.board-stage .paper textarea::placeholder { color: var(--ink-subtle); font-style: italic; }
.board-stage .paper-foot { display: flex; align-items: center; gap: 12px; padding-top: 8px; border-top: 1px solid var(--border); }
.board-stage .paper-foot .kbd { margin-left: auto; }
.board-stage .linkbtn { background: none; border: 0; padding: 0; font-size: 12.5px; color: var(--ink-muted); border-bottom: 1px solid var(--border-strong); line-height: 1.3; }
.board-stage .linkbtn:hover { color: var(--brand); border-color: var(--brand-light); }
.board-stage .room.session .paper { opacity: 0; transform: translate(-50%, 40px) rotate(-.35deg) scale(.97); pointer-events: none; animation: none; }

/* ---------- Sitze */
.board-stage .seat { position: absolute; width: 0; height: 0; transform: translate(-50%, -50%); z-index: 2; }
/* Alle Sitze liegen auf derselben Ebene, also gewann der spätere im Markup:
   die Namensschilder der Nachbarn standen über der aufgeschlagenen Karte. Wer
   angefasst wird, kommt nach vorn. */
.board-stage .seat:hover { z-index: 8; }
.board-stage .medal {
  position: absolute; left: 50%; top: 50%; width: var(--medal); height: var(--medal);
  margin: calc(var(--medal) / -2) 0 0 calc(var(--medal) / -2); padding: 0;
  border: 0; border-radius: 50%; background: linear-gradient(160deg, #FBF7EC, #E7E0CE);
  display: grid; place-items: center;
  box-shadow: 0 0 0 1px rgba(30,26,22,.55), 0 6px 14px -6px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.9);
  opacity: 0; scale: .4;
  transition: scale .35s cubic-bezier(.2,.9,.3,1.5), opacity .35s ease, box-shadow .25s ease, filter .35s ease;
}
.board-stage .seat.in .medal { opacity: 1; scale: 1; }
.board-stage .medal .ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.board-stage .medal .ring .r1 { fill: none; stroke: rgba(30,26,22,.30); stroke-width: 1; }
.board-stage .medal .ring .r2 { fill: none; stroke: rgba(30,26,22,.14); stroke-width: .6; }
.board-stage .medal .ring .teeth { stroke: rgba(30,26,22,.22); stroke-width: 1.1; }
.board-stage .medal .ring .arc { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; opacity: 0; transform: rotate(-90deg); transform-origin: 50% 50%; }
/* Porträt im Medaillon: Duotone in Ink/Creme, damit Fotos aus vier Jahrhunderten
   als ein System lesen, der geprägte Rändelrand liegt darüber. */
.board-stage .medal .portrait { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  filter: grayscale(1) contrast(1.14) sepia(.42) saturate(.75) brightness(1.04); mix-blend-mode: multiply;
  user-select: none; -webkit-user-drag: none; }
/* Gezeichnete Bilder (die Vorsitzende) stehen schon in der Hauspalette: die
   Duotone-Behandlung der Fotos würde ihre helle Prägung auf dem dunklen Grund
   wegmultiplizieren. */
.board-stage .medal .portrait[src*=".svg"], .board-stage .arc-face img[src*=".svg"] { filter: none; mix-blend-mode: normal; }
.board-stage .medal.has-photo .face { display: none; }
/* Das Monogramm wächst mit dem Medaillon, statt an jeder Tischgröße noch
   einmal genannt zu werden. */
.board-stage .medal .face { font-family: var(--display); font-size: calc(var(--medal) * .33); letter-spacing: .01em; color: var(--ink); line-height: 1; padding-bottom: 1px; }
.board-stage .medal .face.long { font-size: calc(var(--medal) * .26); }
.board-stage .seat.chair .medal { background: linear-gradient(160deg, #2E2721, #14110D); box-shadow: 0 0 0 1px rgba(243,238,225,.5), 0 6px 16px -6px rgba(0,0,0,.8); }
.board-stage .seat.chair .face { color: var(--ivory); }
.board-stage .seat.chair .ring .r1, .board-stage .seat.chair .ring .teeth { stroke: rgba(243,238,225,.35); }
.board-stage .seat.chair .ring .r2 { stroke: rgba(243,238,225,.16); }

.board-stage .seat-name { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) translate(var(--lx, 0), var(--ly, 22px)); white-space: nowrap; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--ink-muted); transition: color .2s, opacity .3s; pointer-events: none; }

/* Hover: Ressort und Herkunft */
.board-stage .seat-card { position: absolute; left: 50%; transform: translate(-50%, 4px); top: 34px; width: 210px; padding: 8px 11px; background: #fff; border: 1px solid var(--border-strong); border-radius: 9px; box-shadow: 0 14px 28px -14px rgba(30,26,22,.5); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; z-index: 6; text-align: center; }
.board-stage .seat.up .seat-card { top: auto; bottom: 34px; transform: translate(-50%, -4px); }
.board-stage .seat-card b { display: block; font-family: var(--display); font-weight: 400; font-size: 15px; }
.board-stage .seat-card span { display: block; font-size: 11.5px; color: var(--ink-muted); line-height: 1.35; margin-top: 2px; }
.board-stage .seat-card em { display: block; font-family: var(--mono); font-style: normal; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); margin-top: 4px; }
.board-stage .seat:hover .seat-card { opacity: 1; transform: translate(-50%, 0); }
.board-stage .seat:hover .seat-name { opacity: 0; }
.board-stage .seat:hover .medal { box-shadow: 0 0 0 1px var(--brand), 0 0 0 5px rgba(169,87,58,.18), 0 8px 18px -6px rgba(0,0,0,.7); }

/* Stimmprobe / aktiver Sprecher */
.board-stage .medal.playing, .board-stage .seat.speaking .medal { box-shadow: 0 0 0 2px var(--brand), 0 0 0 9px rgba(169,87,58,.16), 0 10px 22px -6px rgba(0,0,0,.7); scale: 1.12; }
.board-stage .medal.playing .ring .arc { opacity: 1; }
.board-stage .seat.murmur .medal { box-shadow: 0 0 0 1px var(--anchor), 0 0 0 7px rgba(82,116,136,.16), 0 8px 18px -6px rgba(0,0,0,.6); scale: 1.07; }
.board-stage .seat.speaking .seat-name, .board-stage .seat.murmur .seat-name { opacity: 0; }

/* Wer spricht, trägt die Balken als Plakette auf der Unterkante des
   Medaillons: freistehend unter den Köpfen standen sie dort, wo bei den
   anderen der Name steht, und gehörten optisch zu niemandem. */
.board-stage .bars {
  /* .56 statt .5: wer spricht, dessen Medaillon steht auf 1.12 vergrößert. */
  position: absolute; left: 50%; top: calc(var(--medal) * .56 - 4px); transform: translate(-50%, -50%);
  display: none; gap: 2.5px; align-items: center; height: 17px; padding: 0 8px; border-radius: 999px;
  background: var(--surface); box-shadow: 0 0 0 1px var(--brand), 0 5px 12px -6px rgba(30,26,22,.65); z-index: 4;
}
.board-stage .seat.speaking .bars, .board-stage .seat .medal.playing ~ .bars { display: flex; }
.board-stage .bars i { width: 2.5px; height: 10px; background: var(--brand); border-radius: 2px; animation: bar .7s ease-in-out infinite; }
.board-stage .bars i:nth-child(2) { height: 13px; animation-delay: .12s; }
.board-stage .bars i:nth-child(3) { height: 8px; animation-delay: .24s; }
.board-stage .bars i:nth-child(4) { height: 12px; animation-delay: .36s; }

.board-stage .badge { position: absolute; top: -3px; right: -3px; width: 22px; height: 22px; border-radius: 50%; display: none; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; border: 2px solid var(--surface); scale: 0; transition: scale .3s cubic-bezier(.2,.9,.3,1.4); }
.board-stage .badge.yes { background: var(--ok); color: #fff; display: flex; scale: 1; }
.board-stage .badge.no { background: var(--brand); color: #fff; display: flex; scale: 1; }
.board-stage .badge.abstain { background: var(--border-strong); color: var(--ink); display: flex; scale: 1; }

/* Manuelle Besetzung: nicht gewählte Mitglieder treten zurück */
.board-stage .room.picking .seat:not(.picked):not(.chair) .medal { filter: grayscale(1); opacity: .38; }
.board-stage .seat.picked .medal { box-shadow: 0 0 0 2px var(--ink), 0 6px 14px -6px rgba(0,0,0,.7); }

/* Sitzung: alle, die nicht besetzt sind, verlassen den Tisch */
.board-stage .seat.off { pointer-events: none; }
.board-stage .seat.off .medal { opacity: 0; scale: .5; }
.board-stage .seat.off .seat-name { opacity: 0; }
.board-stage .room.session .seat { transition: left .9s cubic-bezier(.3,.9,.25,1), top .9s cubic-bezier(.3,.9,.25,1); }
/* Am besetzten Tisch sitzen fünf statt vierundzwanzig: mehr Platz je Kopf. */
.board-stage .room.session { --medal: 96px; }
.board-stage .room.session .seat-name { font-size: 11.5px; }
.board-stage .room.session #seats.live .seat:not(.speaking):not(.off) .medal { filter: saturate(.4) brightness(.9); }

/* ---------- Untertitel / Zitatzeile, dieselbe Zeile für alles Gesprochene */
.board-stage .caption { max-width: 940px; margin: 22px auto 0; min-height: 88px; text-align: center; }
.board-stage .caption-who { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 16px; }
.board-stage .caption-who span:first-child { font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--brand); }
.board-stage .phase-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); }
.board-stage .phase-tag:empty, .board-stage .caption-who span:first-child:empty { display: none; }
.board-stage .caption-text { margin: 5px 0 0; font-family: var(--display); font-size: 22px; line-height: 1.35; color: var(--ink); }
.board-stage .caption-text.quiet { font-style: italic; color: var(--ink-subtle); font-size: 17px; }
.board-stage .caption-text.quote { font-style: italic; color: var(--ink-muted); font-size: 20px; }
.board-stage .caption.swap .caption-text { animation: swap .35s ease both; }

.board-stage .transport { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 14px auto 0; }
.board-stage .transport button { background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 4px 13px; font-family: var(--mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-muted); }
.board-stage .transport button:hover { border-color: var(--brand-light); color: var(--brand-dark); background: var(--brand-tint); }
.board-stage .transport button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
/* Abbrechen ist die einzige Taste mit Folgen, sie steht abgesetzt und in der Hausfarbe. */
.board-stage .transport button.stop { margin-left: 6px; color: var(--brand-dark); border-color: var(--brand-light); }
.board-stage .transport button.stop:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
/* Die Tastenkürzel stehen als eigene Zeile unter den Knöpfen und nennen, was
   sie tun: „Leertaste · →" saß in der Reihe wie ein vierter Schalter und ließ
   offen, wofür die Zeichen gut sind. */
.board-stage .transport .kbd { flex-basis: 100%; margin: 3px 0 0; text-align: center; letter-spacing: .03em; }
.board-stage .room.ended .transport { display: none; }

.board-stage .phases { list-style: none; display: flex; justify-content: center; gap: 6px; margin: 10px auto 0; padding: 0; }
.board-stage .phases li { font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-subtle); padding: 4px 12px; border-radius: 999px; border: 1px solid transparent; transition: all .25s; }
.board-stage .phases li.done { color: var(--ink-muted); }
.board-stage .phases li.active { background: var(--ink); color: var(--surface); border-color: var(--ink); }

/* ---------- Unter dem Tisch: Beispiele, Optionen, Status */
.board-stage .deck { max-width: 1000px; margin: 10px auto 0; width: 100%; transition: opacity .35s ease; }
.board-stage .room.session .deck { display: none; }
.board-stage .deck-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
/* Ohne das stehen die Schaltflächen zweier Reihen genauso eng wie die einer
   Reihe, und die Zeilen verschmelzen zu einem Block. */
.board-stage .deck-row + .deck-row { margin-top: 12px; }
.board-stage .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-subtle); }
.board-stage .chip { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 5px 12px; font-size: 12.5px; color: var(--ink-muted); }
.board-stage .chip:hover { border-color: var(--brand-light); color: var(--brand-dark); background: var(--brand-tint); }
.board-stage .options { margin-top: 14px; padding: 14px 16px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--r); animation: rise .3s ease both; }
.board-stage .opt-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.board-stage .segn { display: inline-flex; background: #fff; border: 1px solid var(--border); border-radius: 9px; padding: 3px; gap: 2px; }
.board-stage .segn button { border: 0; background: none; border-radius: 7px; padding: 5px 11px; color: var(--ink-muted); font-size: 12.5px; white-space: nowrap; }
.board-stage .segn button.on { background: var(--ink); color: var(--surface); }
.board-stage .ctx { display: block; margin-top: 12px; }
.board-stage .ctx .lbl { display: block; margin-bottom: 5px; text-transform: none; letter-spacing: .02em; font-family: var(--body); font-size: 12.5px; color: var(--ink-muted); }
.board-stage .ctx .lbl i { font-family: var(--mono); font-style: normal; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); }
.board-stage .ctx textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-input); background: #fff; font-size: 14px; resize: vertical; }
.board-stage .ctx textarea:focus { outline: 0; border-color: var(--anchor); box-shadow: 0 0 0 3px var(--anchor-tint); }
.board-stage .hint { color: var(--ink-subtle); font-size: 12.5px; margin: 10px 0 0; text-align: center; }
.board-stage .statusline { display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; font-family: var(--mono); font-size: 10px; letter-spacing: .05em; color: var(--ink-subtle); margin-top: 12px; }
.board-stage .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
.board-stage .dot.ok { background: var(--ok); } .board-stage .dot.bad { background: var(--brand); }
.board-stage .statusline[hidden] { display: none; }
.board-stage .error { color: var(--brand-dark); background: var(--brand-tint); border: 1px solid var(--brand-light); border-radius: 9px; padding: 8px 12px; font-size: 13.5px; margin: 12px auto 0; max-width: 560px; text-align: center; }

/* ---------- Beschluss */
.board-stage .card { background: #fff; border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow); }
.board-stage .btn { border: 1px solid var(--ink); border-radius: var(--radius-btn); background: var(--ink); color: var(--surface); padding: 7px 14px; font-size: 13.5px; white-space: nowrap; line-height: 1.3; }
.board-stage .btn.ghost { background: #fff; color: var(--ink); border-color: var(--border-strong); }
.board-stage .btn.ghost:hover { background: var(--surface-muted); }
.board-stage .btn.brand { background: var(--brand); border-color: var(--brand); color: #fff; padding: 9px 20px; font-size: 14.5px; }
.board-stage .btn.brand:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.board-stage .btn:disabled { opacity: .4; cursor: default; }
.board-stage .kbd { font-family: var(--mono); font-size: 10px; color: var(--ink-subtle); }
.board-stage .h { font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-muted); margin: 0; }
.board-stage .think { display: inline-flex; gap: 5px; align-items: center; }
.board-stage .think i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-subtle); animation: tb 1.2s ease-in-out infinite; }
.board-stage .think i:nth-child(2) { animation-delay: .15s; } .board-stage .think i:nth-child(3) { animation-delay: .3s; }

.board-stage .decision { max-width: 900px; margin: 26px auto 0; width: 100%; border-left: 3px solid var(--brand); animation: rise .45s ease both; }
.board-stage .decision-head { font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--brand); margin-bottom: 8px; }
.board-stage .decision > p { margin: 0; font-family: var(--display); font-size: 21px; line-height: 1.35; }
.board-stage .tally { display: flex; gap: 14px; margin-top: 10px; font-family: var(--mono); font-size: 11px; color: var(--ink-subtle); }
.board-stage .tally b { color: var(--ink); font-weight: 400; }
.board-stage .resolution { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 24px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.board-stage .res-block { font-size: 13.5px; line-height: 1.5; }
.board-stage .res-head { font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 6px; }
.board-stage .res-block ol, .board-stage .res-block ul { margin: 0; padding-left: 18px; }
.board-stage .res-block li { margin-bottom: 4px; }
.board-stage .res-block p { margin: 0; font-size: 13.5px; }
.board-stage .res-hint { color: var(--ink-subtle); font-size: 11.5px; margin-top: 8px !important; }
.board-stage .followup { display: flex; gap: 9px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); align-items: center; }
.board-stage .followup input { flex: 1; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-input); background: #fff; font-size: 14.5px; }
.board-stage .followup input:focus { outline: 0; border-color: var(--anchor); box-shadow: 0 0 0 3px var(--anchor-tint); }
.board-stage .send { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--ink); color: var(--surface); display: grid; place-items: center; flex: none; }
.board-stage .send svg { width: 17px; height: 17px; }
.board-stage .send:disabled { opacity: .35; }

/* ---------- Protokoll */
/* Die Schublade beginnt unter der Kopfzeile der Website, nicht am Bildrand:
   sonst liegen ihre Überschrift und der Schließen-Knopf dahinter, und wer sie
   geöffnet hat, bekommt sie nicht wieder zu. */
.board-stage .protocol { position: fixed; top: var(--site-header); right: 0; bottom: 0; width: min(460px, 92vw); padding: 18px 20px; background: var(--surface); border-left: 1px solid var(--border-strong); overflow: hidden; z-index: 30; box-shadow: -16px 0 40px -24px rgba(30,26,22,.4); animation: slide .25s ease both; display: flex; flex-direction: column; }
.board-stage .protocol-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex: none; }
.board-stage .protocol-actions { display: flex; gap: 6px; }
/* Nur die Liste scrollt, Kopf und Fußleiste bleiben stehen. */
.board-stage .protocol ol { list-style: none; padding: 0 6px 0 0; margin: 0 -6px 0 0; flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.board-stage .protocol li { padding: 9px 12px; border-radius: 9px; margin-bottom: 6px; background: #fff; border: 1px solid var(--border); }
.board-stage .protocol li.playing { border-color: var(--brand-light); background: var(--brand-tint); }
.board-stage .protocol li.you { border-color: var(--anchor-light); background: var(--anchor-tint); }
/* Der Beschluss einer Runde, dort wo die Nachfrage ihn abgelöst hat. */
.board-stage .protocol li.decided { border-color: var(--brand-light); background: var(--brand-tint); }
.board-stage .protocol li.decided .who { color: var(--brand); }
.board-stage .protocol li.decided .what { font-family: var(--display); }
.board-stage .protocol li .who { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 3px; }
.board-stage .protocol li .what { font-size: 14px; color: var(--ink); line-height: 1.45; }

/* ---------- Dokumente zur Sitzung */
.board-stage .doc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.board-stage .doc-actions .btn { text-decoration: none; display: inline-block; }
.board-stage .doc-saved { font-family: var(--mono); font-size: 10px; letter-spacing: .05em; color: var(--ink-subtle); }

/* ---------- Archiv, dieselbe Schublade wie das Protokoll */
.board-stage .archive-note { flex: none; margin: 0 0 12px; font-family: var(--display); font-style: italic; font-size: 13.5px; line-height: 1.45; color: var(--ink-subtle); }
.board-stage .arc-empty { font-size: 13.5px; color: var(--ink-subtle); }
.board-stage li.arc { padding: 12px 14px; }
.board-stage li.arc:hover { border-color: var(--border-strong); }
.board-stage .arc-meta { display: flex; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); }
.board-stage .arc-marks { text-align: right; }
.board-stage .arc-topic { font-family: var(--display); font-size: 15.5px; line-height: 1.32; margin-top: 5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.board-stage .arc-decision { font-size: 13px; line-height: 1.45; color: var(--ink-muted); margin-top: 5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.board-stage .arc-faces { display: flex; margin-top: 9px; }
/* Die Besetzung als Reihe überlappender Medaillons, der Tisch im Kleinen. */
.board-stage .arc-face { width: 26px; height: 26px; border-radius: 50%; margin-right: -7px; flex: none; background: var(--surface-muted); border: 1px solid var(--surface); box-shadow: 0 0 0 1px var(--border-strong); display: grid; place-items: center; overflow: hidden; font-family: var(--display); font-size: 9.5px; color: var(--ink-muted); }
.board-stage .arc-face img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) sepia(.32) contrast(1.04); mix-blend-mode: multiply; }
/* Die drei Knöpfe sind der Fuß der Karte, nicht eine vierte Zeile Inhalt: eine
   Haarlinie setzt sie ab, dieselbe Trennung wie unter dem Beschluss. */
.board-stage .arc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border); }
.board-stage .arc-actions .chip { text-decoration: none; font-size: 12px; line-height: 1.35; padding: 6px 13px; }
/* „Nachspielen“ führt zurück in die Sitzung, „Ergebnis“ und „Protokoll“ öffnen
   nur eine Datei. Der erste Knopf trägt deshalb die Markenfarbe, die beiden
   Verweise bleiben still: drei gleich laute Knöpfe nennen keine Reihenfolge. */
.board-stage .arc-actions button.chip { border-color: var(--brand-light); color: var(--brand-dark); background: var(--brand-tint); }
.board-stage .arc-actions button.chip:hover { border-color: var(--brand); }

/* Fuß der Protokoll-Schublade: die Sitzung liegt auch als Datei vor */
.board-stage .protocol-foot { flex: none; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .05em; color: var(--ink-subtle); }
.board-stage .protocol-foot-links { display: flex; gap: 6px; }
.board-stage .protocol-foot a { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 4px 11px; font-size: 11.5px; letter-spacing: 0; font-family: var(--body); color: var(--ink-muted); text-decoration: none; }
.board-stage .protocol-foot a:hover { border-color: var(--brand-light); color: var(--brand-dark); background: var(--brand-tint); }

.board-stage .arc-actions .chip:disabled { opacity: .4; cursor: default; }
.board-stage .arc-actions .chip:disabled:hover { border-color: var(--border); color: var(--ink-muted); background: #fff; }

/* ---------- Ende der Sitzung: der Tisch tritt zurück */
.board-stage .room.ended .table-wrap { height: 330px; }
.board-stage .room.ended .decision { margin-top: 34px; }
.board-stage .room.session .plate, .board-stage .room.ended .plate { opacity: 1; }
.board-stage .room.session .table-center.show ~ .plate { opacity: 0; }
.board-stage .room.ended { --medal: 72px; }
.board-stage .room.ended .caption { display: none; }
.board-stage .room.ended .phases { display: none; }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes slide { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes swap { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes table-in { from { opacity: 0; transform: scale(.9) translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes paper-in { from { opacity: 0; transform: translate(-50%, -46%) rotate(-2deg) scale(.94); } to { opacity: 1; transform: translate(-50%, -50%) rotate(-.35deg); } }
@keyframes tb { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes bar { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  .board-stage .bars i, .board-stage .think i { animation: none; }
  .board-stage .table, .board-stage .paper { animation: none; }
  .board-stage .room.session .seat { transition: none; }
}

@media (max-width: 1080px) {
  .board-stage .table-wrap { height: 400px; }
  .board-stage { --medal: 62px; }
  .board-stage .room.session { --medal: 84px; }
  .board-stage .room.ended { --medal: 62px; }
  .board-stage .paper { width: min(520px, 70%); }
  .board-stage .paper textarea { font-size: 18px; min-height: 66px; }
}
@media (max-width: 780px) {
  .board-stage .table-wrap { height: 330px; }
  /* Enger Tisch, vierundzwanzig Plätze: hier setzt der Umfang die Größe,
     nicht der Geschmack. */
  .board-stage { --medal: 44px; }
  .board-stage .room.ended { --medal: 54px; }
  .board-stage .seat-name { display: none; }
  .board-stage .seat-card { display: none; }
  .board-stage .paper { width: 74%; padding: 9px 12px; }
  .board-stage .paper textarea { font-size: 15px; min-height: 48px; }
  .board-stage .paper-head { font-size: 8.5px; }
  .board-stage .caption-text { font-size: 18px; }
  .board-stage .room.session { --medal: 64px; }
}

/* ================= Telefon =================
   Auf 375 px ist die Tischmitte kein Platz für das Papier: 22 Medaillons
   brauchen den ganzen Umfang. Der Tisch stellt sich hochkant, das Papier
   legt sich darunter. */
@media (max-width: 620px) {
  /* In der Sitzung stehen hier drei Schalter, sie müssen umbrechen dürfen,
     sonst schiebt die Reihe die Seite nach links aus dem Bild. */
  .board-stage .stage-bar { flex-wrap: wrap; row-gap: 2px; }
  .board-stage .tab { padding: 7px 9px; font-size: 12.5px; }
  .board-stage #new-session { margin-left: 8px; padding: 4px 11px; }

  /* Der Kopf gibt Höhe ab, damit die Frage nicht ganz unter die Falz rutscht. */
  .board-stage .hero { margin: 10px auto 4px; }
  .board-stage .hero h1 { font-size: 24px; margin-bottom: 7px; }
  .board-stage .hero .sub { font-size: 14px; line-height: 1.4; }

  /* Hochkant statt quer, der Umfang entscheidet, nicht die Breite: auf 375 px
     bleiben je Platz keine 45 px, mehr Medaillon hieße Überlappung. */
  .board-stage { --medal: 40px; }
  /* Am Ende wird der Tisch kürzer, der Rand also enger: hier wächst das
     Medaillon nicht mit, sonst schöben sich die Köpfe übereinander. */
  .board-stage .room.ended { --medal: 40px; }
  .board-stage .table-wrap { height: 470px; margin-bottom: 172px; }
  .board-stage .table { left: 12%; right: 12%; top: 6%; bottom: 6%; }
  .board-stage .table::before { inset: 16px 14px; }
  .board-stage .table::after { inset: 21px 19px; }
  .board-stage .room.session .table { left: 17%; right: 17%; top: 13%; bottom: 13%; }
  .board-stage .room.ended .table { top: 15%; bottom: 15%; }
  .board-stage .room.session .table-wrap { height: 400px; margin-bottom: 0; }
  .board-stage .room.ended .table-wrap { height: 340px; }

  /* Das Papier verlässt die Mitte und legt sich unter den Tisch. */
  .board-stage .paper { top: 100%; left: 0; right: 0; width: auto; padding: 11px 15px;
    transform: rotate(-.3deg); margin-top: 18px;
    animation: paper-flat .7s .55s cubic-bezier(.2,.8,.2,1) both; }
  .board-stage .paper textarea { font-size: 17px; min-height: 58px; }
  .board-stage .paper-foot { gap: 9px; }
  .board-stage .paper-foot .kbd { display: none; }
  .board-stage .room.session .paper { transform: translateY(36px) rotate(-.3deg) scale(.97); }

  .board-stage .table-center { left: 10%; right: 10%; font-size: 16px; }
  /* Hochkant ist der Tisch schmal: das Messingschild bricht sonst dreizeilig um. */
  .board-stage .plate { font-size: 9px; letter-spacing: .14em; }

  /* Vier Phasennamen passen nicht in eine Zeile. */
  .board-stage .phases { flex-wrap: wrap; row-gap: 4px; }
  .board-stage .phases li { padding: 3px 9px; font-size: 9.5px; }
  .board-stage .caption { min-height: 76px; }
  .board-stage .decision { margin-top: 20px; }
  .board-stage .doc-actions .btn { flex: 1 1 auto; text-align: center; }
  .board-stage .arc-actions .chip { flex: 1 1 auto; text-align: center; }
}

@keyframes paper-flat { from { opacity: 0; transform: rotate(-2deg) scale(.94); } to { opacity: 1; transform: rotate(-.3deg); } }

/* ---------- Herkunft der Wortmeldungen, direkt unter dem Tisch */
/* Alles auf der Bühne steht mittig, der Hinweis stand als Einziges links und
   zog dabei eine Linie über die ganze Breite: beides mittig, die Linie so
   breit wie der Satz. */
.board-stage .disclosure { margin: 44px auto 0; padding-top: 16px; border-top: 1px solid var(--border); max-width: 68ch; font-size: 12.5px; line-height: 1.5; text-align: center; color: var(--ink-subtle); }

/* Der Hinweis auf die Anmeldung steht unter dem Formular, nicht als Sperre
   davor: zuhören darf man ohne Konto. */
.board-stage #auth-gate a { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 2px; }
.board-stage #auth-gate a:hover { color: var(--brand); }