/* ── Leipzig Sans Font ── */
/* Zwei Fassungen je Schnitt, woff2 zuerst. Der Browser nimmt die erste, die er
   versteht, und laedt genau eine Datei - woff2 ist rund ein Fuenftel kleiner.
   Das alte woff bleibt als Rueckfall stehen, damit ein betagter Rechner in der
   Verwaltung nicht ohne Hausschrift dasteht. */
@font-face {
  font-family: "Leipzig Sans";
  src: url("/fonts/LeipzigSans-Regular.woff2") format("woff2"),
       url("/fonts/LeipzigSans-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Leipzig Sans";
  src: url("/fonts/LeipzigSans-Medium.woff2") format("woff2"),
       url("/fonts/LeipzigSans-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Leipzig Sans";
  src: url("/fonts/LeipzigSans-Bold.woff2") format("woff2"),
       url("/fonts/LeipzigSans-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Reset & Base (Leipzig.de Design System) ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Leipzig Blue Theme */
  --lpz-dark: #001551;
  --lpz-base: #0e3ab6;
  --lpz-subtle: #2758c5;
  --lpz-light: #c3e7ff;
  --lpz-light-brand: #8ad0ff;
  --lpz-lightest: #f1f9ff;

  /* Leipzig Gold */
  --lpz-gold: #ffe500;
  --lpz-gold-light: #fffbda;
  --lpz-gold-subtle: #fff6a6;

  /* Leipzig Green */
  --lpz-green: #006647;
  --lpz-green-light: #c5ece0;
  --lpz-green-lightest: #f3fbf9;

  /* Leipzig Orange */
  --lpz-orange: #f07e26;
  --lpz-orange-light: #f9db9d;
  /* Zwischenton: der Kopf-Timer soll heller sein als der Abschnitts-Timer */
  --lpz-orange-mid: #f7a45c;
  /* Schriftfarbe AUF einer gefuellten Akzentflaeche. Im Hellmodus weiss,
     im Dunkelmodus dunkel: dort sind die Akzentfarben hell, und weiss
     darauf verschwindet (#fff auf #58a6ff sind 2,5:1). */
  --auf-akzent: #ffffff;
  --lpz-orange-lightest: #fef8eb;
  /* Orange als SCHRIFTFARBE. Die Markenfarbe #f07e26 ist auf Weiss 2,7:1 und
     damit als Text unlesbar; als Flaeche und als Rahmen bleibt sie unberuehrt.
     Diese Variante hat 5,4:1 auf Weiss und 5,1:1 auf dem hellen Orangeton,
     also ueberall ueber den 4,5:1, die die WCAG fuer normalen Text verlangt. */
  --lpz-orange-text: #a85207;

  /* Leipzig Danger */
  --lpz-danger: #cf0000;
  --lpz-danger-light: #f6d3cf;

  /* Neutrals */
  --bg: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --surface: #ffffff;
  --surface-hover: #f1f9ff;
  --border: #dee2e6;
  --border-light: #e9ecef;
  --text: #212529;
  --text-secondary: #495057;
  /* 4,79:1 auf dem grauen Seitengrund. Der frühere Ton #6c757d lag mit 4,45:1
     knapp darunter und fiel damit durch, obwohl er kaum anders aussieht. */
  --text-muted: #677077;

  /* Semantic */
  --primary: var(--lpz-base);
  --primary-light: var(--lpz-lightest);
  --success: var(--lpz-green);
  --success-light: var(--lpz-green-lightest);
  --warning: var(--lpz-orange);
  --warning-light: var(--lpz-orange-lightest);
  --danger: var(--lpz-danger);
  --danger-light: #fef2f2;

  --radius: 12px;
  --radius-sm: 10px;
  --radius-lg: 16px;
  --transition: .25s cubic-bezier(.4, 0, .2, 1);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow: 0 2px 8px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.1);
}

html { font-size: 16px; }
body {
  font-family: "Leipzig Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg-secondary);
  color: var(--text);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Participant Layout ── */
.participant-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Nicht "center": bei großer Schrift schnitte das Zentrieren den oberen Teil
     ab. Mit flex-start plus auto-Rändern am Kind bleibt es mittig, wenn Platz
     ist, und wird scrollbar, wenn nicht. */
  justify-content: flex-start;
  min-height: 100dvh;
  padding: calc(24px + 2.8rem) 24px 24px;
  text-align: center;
  background: var(--bg-secondary);
}

/* ── Screens (fade transition) ── */
.screen {
  width: 100%;
  max-width: 440px;
  /* Zentriert, solange Platz ist; darüber hinaus wird gescrollt */
  margin-block: auto;
  animation: fadeUp .4s ease-out;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.screen.exit {
  animation: fadeOut .25s ease-in forwards;
}

@keyframes fadeOut {
  to { opacity: 0; transform: translateY(-12px); }
}

/* ── Header ── */
.app-header {
  margin-bottom: 28px;
}

.app-header h1 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--lpz-base);
  letter-spacing: -.01em;
}

.app-header p {
  font-size: .875rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Der Name des Use Case auf dem Goldband. Feste dunkle Schrift und keine
   Variable: das Gold ist in beiden Schemata dasselbe #ffe500, also braucht es
   in beiden dieselbe dunkle Schrift.
   Der Selektor nennt zusaetzlich .app-header, weil .app-header p mit seiner
   hoeheren Spezifitaet sonst --text-muted durchsetzt - im dunklen Schema waren
   das 2,4:1 auf dem Gold. */
.usecase-name-badge,
.app-header .usecase-name-badge {
  display: inline-block;
  background: var(--lpz-gold);
  color: #212529;
  font-weight: 700;
  font-size: .9rem;
  padding: 6px 16px;
  border-radius: 999px;
  margin-top: 8px;
}

/* ── Question Card ── */
.question-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-light);
}

.question-number {
  display: inline-block;
  background: var(--lpz-base);
  color: white;
  font-size: .7rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.question-text {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 8px;
  color: var(--text);
}

.question-description {
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 24px;
}

/* ── Buttons ── */
.btn-row {
  display: flex;
  gap: 12px;
}

.btn {
  flex: 1;
  padding: 14px 28px;
  border: none;
  border-radius: 999px;
  font-family: "Leipzig Sans", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.btn:focus-visible {
  outline: 3px solid var(--lpz-base);
  outline-offset: 2px;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: white;
  opacity: 0;
  transition: opacity .15s;
}

.btn:active::after {
  opacity: .15;
}

.btn-yes {
  background: var(--lpz-green);
  color: white;
}
.btn-yes:hover { background: #005538; }

.btn-no {
  background: var(--lpz-danger);
  color: white;
}
.btn-no:hover { background: #b00000; }

/* ── Choice Buttons (Q7) ── */
.choice-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-choice {
  width: 100%;
  padding: 18px 24px;
  background: var(--bg-secondary);
  border: 2px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
  font-family: "Leipzig Sans", sans-serif;
}

.btn-choice:focus-visible {
  outline: 3px solid var(--lpz-base);
  outline-offset: 2px;
}

.btn-choice:hover {
  border-color: var(--lpz-base);
  background: var(--lpz-lightest);
}

.btn-choice .choice-label {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.btn-choice .choice-sublabel {
  font-size: .8rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ── Waiting / Result States ── */
.waiting-screen, .result-screen {
  text-align: center;
}

.waiting-icon {
  font-size: 2.5rem;
  margin-bottom: 16px;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: .5; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.08); }
}

.waiting-text {
  font-size: .95rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.result-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: var(--radius);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 16px;
  animation: popIn .5s cubic-bezier(.175, .885, .32, 1.275);
}

@keyframes popIn {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: scale(1); }
}

.result-badge .icon { font-size: 1.4rem; }

.result-description {
  font-size: .9rem;
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 360px;
  margin: 0 auto;
}

.digitalisierung-badge {
  margin-top: 16px;
  padding: 10px 18px;
  /* Neutrales Grau statt Gelb, siehe .digi-pill im Presenter */
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .85rem;
  color: var(--text-secondary);
}

.digitalisierung-badge strong {
  color: var(--text);
}

/* ── Connection Indicator ── */
.connection-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}
.connection-dot.connected { background: var(--lpz-green); }
.connection-dot.disconnected { background: var(--lpz-danger); }

/* Ohne Verbindung ist der Bildschirm nur noch ein eingefrorenes Bild. Das muss
   man sehen, sonst tippt man auf Knöpfe, die nichts mehr auslösen. */
/* html davor, damit die Regel auch das dunkle Schema schlaegt: dort setzt
   :root:not([data-theme="light"]) .status-bar spaeter im Stylesheet einen
   dunklen Grund. Ohne das blieb die Leiste dunkel, waehrend die Schrift schon
   auf die Farbe FUER den roten Grund umgestellt war - dunkel auf dunkel,
   1:1 Kontrast, und der wichtigste Satz der Seite unlesbar. */
html body.keine-verbindung .status-bar {
  background: var(--lpz-danger);
  color: var(--auf-akzent);
}
html body.keine-verbindung .status-bar .connection-dot { background: var(--auf-akzent); }
/* Der Spitzname traegt sonst sein Blau weiter, auf Rot sind das 1,6:1. */
html body.keine-verbindung .status-bar .status-nick { color: var(--auf-akzent); }
body.keine-verbindung #app {
  opacity: .45;
  pointer-events: none;
}
body.keine-verbindung::after {
  content: "Keine Verbindung zum Server. Diese Seite ist eingefroren.";
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translateX(-50%);
  z-index: 3000;
  max-width: 90vw;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--lpz-danger);
  color: var(--auf-akzent);
  font-size: .82rem;
  font-weight: 600;
  text-align: center;
}

.status-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  /* Feste Größe, damit größere Inhaltsschrift die Leiste nicht aufbläht */
  font-size: 12px;
  color: var(--text-muted);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-light);
  z-index: 100;
}

/* ═══════════════════════════════════════════════════
   PRESENTER VIEW
   ═══════════════════════════════════════════════════ */

.presenter-app {
  min-height: 100vh;
  padding: 24px 36px;
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
}

/* ── Der Kopf ── ──
   So flach wie moeglich: er traegt nur noch den Namen und rechts zwei Knoepfe.
   Alles, was zu einem laufenden Workshop gehoert, steht auf dessen eigener
   Seite - siehe .workshop-leiste. */
.presenter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Nicht umbrechen: der Kopf ist eine Leiste. Bricht er um, ist er zwei -
     und dann ist er nicht mehr "so schmal wie moeglich". */
  flex-wrap: nowrap;
  gap: 20px;
  /* Bleibt beim Scrollen stehen: Zeit und Teilnehmerzahl sind immer im Blick */
  position: sticky;
  top: 0;
  z-index: 200;
  /* Ein Streifen in der Farbe der Seite unter dem Kopf: ein Schlagschatten ohne
     Weichzeichnung. Er gehoert zum Kopf und wird mit ihm gezeichnet, deckt also
     ab, was darunter durchscrollt. Ohne ihn lief die naechste Zeile bis an die
     Schrift des Kopfes heran und verschwand auf halber Hoehe dahinter. */
  box-shadow: 0 14px 0 var(--bg-secondary);
  margin: 0 -36px 24px;
  /* Der Hintergrund läuft über die volle Breite, der Inhalt bleibt aber in
     derselben 1000er-Spalte wie die Abschnitte darunter. Sonst wirkt der
     zentrierte Titel gegenüber der Kopfleiste nach rechts verrutscht. */
  /* Die 36px gleichen das negative Margin oben aus: der Prozentwert rechnet
     gegen den Elternbereich, nicht gegen die herausgezogene eigene Breite. */
  padding: 8px max(36px, calc((100% - 1800px) / 2 + 36px));
  /* Weiss mit einer Linie darunter, wie im Entwurf. Vorher war er so grau wie
     die Seite und verschwamm mit den Karten; jetzt ist oben eine Leiste und
     darunter der Inhalt. */
  /* Dieselbe Flaeche wie die Seite darunter, nicht weiss.
     Weiss ergab eine harte Kante quer ueber den Bildschirm, und darunter fing
     unvermittelt der graue Inhalt an: zusammen mit der weissen Spalte links
     sah es aus, als laege der Inhalt in einem grauen Kasten. Jetzt ist oben und
     unten dieselbe Flaeche, und weiss traegt nur, was wirklich obenauf liegt -
     die Karten und die ausgefahrene Leiste. */
  background: var(--bg-secondary);
}

/* Projektname und die Rubrik, in welchem Teil man steht, in einer Reihe: der
   Name traegt, die Rubrik ordnet ihn ein. Die Sitzungsangabe steht nicht mehr
   hier, sondern als eigene Zeile darunter. */
.kopf-titelzeile {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
}
/* Die linke Kopfhaelfte darf schrumpfen. Ohne min-width:0 nimmt ein Flex-Kind
   mindestens die Breite seines Inhalts, und weil die rechte Haelfte auf
   schmalen Fenstern bewusst nicht umbricht, schob der Titel die ganze
   Kopfleiste ueber den Bildschirmrand - bei 719 px auf 747 px, und die Seite
   liess sich seitlich schieben. */
.kopf-links {
  min-width: 0; max-width: 100%;
  /* Projektname oben, Sitzungsangabe darunter: eine Unterzeile, keine zweite
     gleichrangige Angabe neben dem Namen. */
  display: flex; flex-direction: column; align-items: flex-start;
}
/* Der Teil, in dem man steht. Klein und gesperrt gesetzt wie eine Rubrik, nicht
   wie eine zweite Ueberschrift: der Projektname traegt, das hier ordnet ein. */
.kopf-teil {
  font-size: .7rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted); white-space: nowrap;
}
.kopf-teil:empty { display: none; }
.kopf-sitzung {
  background: transparent; border: none; padding: 0; cursor: pointer;
  /* Feste Zeichenbreite: Datum und Organisation sind Angaben, keine Prosa, und
     eine Laufschrift laesst sie wie eine zweite Ueberschrift aussehen. */
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem; font-weight: 500; letter-spacing: .08em;
  /* --text-muted lag im Dunkelmodus auf 3,8:1. Die Zeile sagt, welche Sitzung
     laeuft - die darf man von hinten im Raum nicht erraten muessen. */
  color: var(--text-secondary); white-space: nowrap;
  /* Drei Angaben werden lang. Statt die Kopfleiste zu weiten, endet die Zeile
     mit Auslassungspunkten - der Klick fuehrt ohnehin zu den vollen Feldern. */
  display: block; max-width: 100%; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; text-align: left;
  transition: color .15s;
}
.kopf-sitzung:hover { color: var(--lpz-base); }

.presenter-header h1 {
  /* Klein genug, dass der Kopf eine Leiste bleibt und keine Ueberschrift. Wer
     den Namen gross braucht, findet ihn auf der Startseite. */
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--lpz-base);
  margin: 0;
}
/* Der Name ist ein Knopf, sieht aber nicht danach aus: er oeffnet den
   Infokasten und tut sonst nichts. Nur der Zeiger und die Fokusmarke verraten,
   dass man darauf klicken kann. */
.kopf-titel-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit;
}
.kopf-titel-btn:hover { color: var(--lpz-dark); }

/* Der Kopf steht nicht mehr im Weg: die Rubrik verschwindet. Das Element bleibt,
   weil das Skript es fuellt. */
.kopf-teil { display: none; }

/* ── Der Bereich neben dem Projektnamen ── ──
   Beim Scrollen wandert der Seitenkopf aus dem Bild. Damit dann nicht nur
   "EUDI-Plattform" dasteht, tritt hier der Name des Bereichs daneben - erst
   das Projekt, dann der Unterpunkt. Ungescrollt bleibt er weg: oben steht er
   ohnehin gross auf der Seite. */
.kopf-bereich {
  font-size: .95rem; font-weight: 600; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 0; opacity: 0;
  transition: max-width .28s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
}
.presenter-header.kompakt .kopf-bereich { max-width: 44ch; opacity: 1; }
/* Ein Mittelpunkt trennt die beiden, aber nur wenn beides dasteht. */
.presenter-header.kompakt .kopf-bereich::before {
  content: "·"; margin: 0 10px; color: var(--text-muted); font-weight: 400;
}
.kopf-bereich:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
  .kopf-bereich { transition: none; }
}

.kopf-rechts {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.kopf-icon-btn {
  background: transparent; border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 12px; cursor: pointer;
  font-family: "Leipzig Sans", sans-serif; font-size: .78rem; font-weight: 700;
  color: var(--text-secondary); transition: var(--transition);
  white-space: nowrap;
}
.kopf-icon-btn:hover { border-color: var(--lpz-base); color: var(--lpz-base); }

/* ── Der Infokasten unter dem Namen ── */
.kopf-info {
  position: sticky; top: 0; z-index: 199;
  margin: 0 -36px 20px;
  padding: 16px max(36px, calc((100% - 1800px) / 2 + 36px));
  /* Der einzige Block, der sich absetzen darf: er ist ein Einschub und kein
     Rahmen. */
  background: var(--lpz-lightest);
}
.kopf-info[hidden] { display: none; }
.kopf-info p {
  margin: 0; max-width: 62ch;
  font-size: .92rem; line-height: 1.65; color: var(--text);
}

/* ── Die Leiste des laufenden Workshops ── */
.workshop-leiste {
  /* Alles linksbuendig. Vorher stand die Sitzung links und die Bedienung
     rechts, mit einer leeren Mitte dazwischen - auf breiten Fenstern lagen
     zwischen "Leistenprobe" und "0 Teilnehmende" mehrere hundert Pixel Nichts.
     Angaben zur selben Sitzung gehoeren an dieselbe Kante. */
  display: flex; align-items: center; justify-content: flex-start;
  gap: 8px 20px; flex-wrap: wrap;
  /* Getrennt durch Abstand, nicht durch einen Strich. */
  margin-bottom: 28px;

  /* ── Bleibt waehrend des Workshops stehen ── ──
     Datum, Kommune, Veranstaltung, Teilnehmerzahl und die Uhren muessen
     jederzeit ablesbar sein - wer vorne steht, scrollt durch den Ablauf und
     darf dabei nicht aus den Augen verlieren, wie lange der Abschnitt noch
     laeuft.
     Sie haftet unter der Kopfleiste, also an derselben Stelle, an der der
     Seitenkopf beim Scrollen zusammenfaehrt. Solange der noch offen ist, liegt
     er davor (hoeherer z-index); ist er zusammengefahren, steht hier die
     Sitzung. */
  position: sticky; top: var(--kopfhoehe, 44px); z-index: 148;
  background: var(--bg-secondary);
  padding: 10px 0 12px;
}
/* Die Angaben zur Sitzung stehen links, die Bedienung rechts - in einer Zeile.
   Die Regel weiter unten gibt .presenter-controls auf schmalen Fenstern die
   volle Breite; im Kopf war das richtig, hier reisst es die Leiste
   auseinander und laesst eine leere Haelfte stehen. */
.workshop-leiste .presenter-controls {
  width: auto; flex: 0 0 auto; justify-content: flex-start;
}
/* "hidden" allein reicht hier nicht: die Regel darueber setzt ueber
   .presenter-controls ein display, und jedes display schlaegt das display:none,
   das der Browser dem hidden-Attribut mitgibt. Ohne diese Zeile blieb die Uhr
   bei den To Do's stehen, obwohl sie ausgeblendet war. */
.workshop-leiste .presenter-controls[hidden] { display: none; }
/* Teilnehmerzahl und Zeiten nebeneinander statt uebereinander: die Leiste ist
   eine Zeile und kein Stapel. */
.workshop-leiste .time-stack {
  flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap;
}
.workshop-leiste .time-stack .people-row { align-self: center; }
/* Die Sitzungszeile nimmt den Platz, die Teilnehmerzahl steht an deren
   rechtem Ende - beide in einer Zeile. Die Uhren fallen darunter und beginnen
   wieder links. */
.leiste-zeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; width: 100%;
}
.leiste-zeile .kopf-sitzung { flex: 0 1 auto; min-width: 0; }
.leiste-zeile .people-row { flex: 0 0 auto; }
/* Die Uhren beginnen eine neue Zeile, damit sie nicht neben der Teilnehmerzahl
   nach rechts wandern. */
.workshop-leiste .presenter-controls { flex-basis: 100%; }
/* Die Knoepfe behalten ihre Breite. Auf schmalen Fenstern zieht eine Regel
   weiter unten die Zeit-Plakette auf volle Breite - im alten Kopf war das
   sinnvoll, hier wird daraus ein Balken quer durch die Seite. */
.workshop-leiste .time-stack .total-time-badge,
.workshop-leiste .time-stack .section-time-badge {
  width: auto; align-self: center; padding: 7px 16px;
}
.workshop-leiste .time-stack .people-row {
  width: auto; align-self: center; justify-content: flex-start;
}
.workshop-leiste[hidden] { display: none; }

/* ── Gescrollter Kopf ──
   Der Projektname bleibt oben stehen, denn er sagt, wo man ist. Beim Scrollen
   tritt er zurueck: kleiner, ohne Abstand, ohne Zeilenumbruch. So bleibt er
   lesbar, nimmt aber dem Inhalt nicht die halbe Hoehe weg. Der Umschaltpunkt
   liegt im Skript, nicht an einer Scrollhoehe im CSS: gemessen wird, ob wirklich
   gescrollt wurde. */
.presenter-header.kompakt { padding-top: 8px; padding-bottom: 8px; }
.presenter-header.kompakt h1 {
  font-size: 1.05rem;
  margin-bottom: 0;
  letter-spacing: 0;
  white-space: nowrap;
}
/* Die Sitzungszeile bleibt auch im schmalen Kopf unter dem Titel - sie gehoert
   zu ihm wie eine Unterzeile, und neben ihm sass sie schon bei drei Angaben
   nur noch selten in einer Zeile. Sie wird stattdessen kleiner. */
.presenter-header.kompakt .kopf-titelzeile { gap: 12px; }
.presenter-header.kompakt .kopf-sitzung { font-size: .74rem; }

/* Auch rechts wird es schmal: der QR-Code kleiner, die beiden Zeitangaben
   nebeneinander statt uebereinander. Beides bleibt bedienbar, nimmt aber nur
   noch eine Zeile Hoehe. Ohne das blieb der Kopf trotz kleinem Titel hoch,
   weil rechts der Stapel die Hoehe vorgab. */
.presenter-header.kompakt .time-stack { flex-direction: row; align-items: center; gap: 8px; }
.presenter-header.kompakt .time-stack .people-row { align-self: center; }
.presenter-header.kompakt .time-stack .total-time-badge,
.presenter-header.kompakt .time-stack .section-time-badge {
  width: auto; padding: 5px 12px; font-size: .78rem;
}
/* Die Teilnehmerzahl steht im schmalen Kopf neben den Zeiten und braucht
   ihre eigene Zeile nicht mehr. */
.presenter-header.kompakt .participant-counter { font-size: .78rem; }

/* ── Kopf ohne Sitzungsangaben ──
   Im informativen Teil, in den Einstellungen und im Ueber-Teil steuert niemand
   eine Sitzung. Datum, Organisation, QR-Code, Teilnehmerzahl und Zeit sind dort
   nur Beiwerk, das die Kopfleiste hoch macht und Fragen aufwirft, die der
   Abschnitt nicht beantwortet. Der Projektname bleibt: er sagt, wo man ist. */
.presenter-header.nur-titel .session-setup,
.presenter-header.nur-titel .session-name-preview,
.presenter-header.nur-titel .kopf-sitzung,
.presenter-header.nur-titel .presenter-controls { display: none; }
.presenter-header.nur-titel { padding-top: 12px; padding-bottom: 12px; }

.presenter-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.presenter-controls button {
  padding: 10px 24px;
  border: none;
  border-radius: 999px;
  font-family: "Leipzig Sans", sans-serif;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  letter-spacing: .02em;
}

.presenter-controls button:focus-visible {
  outline: 3px solid var(--lpz-base);
  outline-offset: 2px;
}

/* Diese drei Knöpfe stehen auch außerhalb von .presenter-controls, etwa unter
   den Abstimmungsbalken. Sie bringen ihre runde Form deshalb selbst mit. */
.btn-start, .btn-next, .btn-reset {
  padding: 10px 24px;
  border: none;
  border-radius: 999px;
  font-family: "Leipzig Sans", sans-serif;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  letter-spacing: .02em;
}

.btn-start {
  background: var(--lpz-gold);
  color: #000;
}
.btn-start:hover { background: #e6ce00; }

.btn-next {
  background: var(--lpz-gold);
  color: #000;
}
.btn-next:hover { background: #e6ce00; }

.btn-reset {
  background: transparent;
  color: var(--text);
  border: 2px solid var(--text) !important;
}
.btn-reset:hover { background: var(--bg-tertiary); }

.btn-disabled {
  opacity: .4;
  pointer-events: none;
}

/* Reiner Text, keine Pille. Die Zahl steht neben einer orangen Pille (der Zeit)
   und einem Knopf; eine dritte gefuellte Form daneben machte aus der Kopfzeile
   eine Reihe konkurrierender Knoepfe. */
.participant-counter {
  background: transparent;
  border: none;
  padding: 6px 4px;
  font-size: .92rem;
  font-weight: 700;
  color: var(--lpz-base);
}

.participant-counter strong {
  color: var(--lpz-base);
  font-size: .92rem;
}

/* ── Main Grid ── */
.presenter-main {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  flex: 1;
}

/* ── Tree Visualization ── */
.tree-container {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 28px;
  overflow: auto;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}

.tree-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  min-width: fit-content;
}

.tree-node {
  position: relative;
  background: var(--bg-secondary);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 20px;
  text-align: center;
  min-width: 260px;
  max-width: 380px;
  transition: var(--transition);
}

.tree-node.active {
  border-color: var(--lpz-base);
  background: var(--lpz-lightest);
  box-shadow: 0 0 0 3px rgba(14, 58, 182, .12);
}

.tree-node.passed {
  opacity: .55;
}

.tree-node .node-label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--lpz-base);
  margin-bottom: 4px;
}

.tree-node .node-text {
  font-size: .8rem;
  line-height: 1.4;
  color: var(--text);
}

.tree-node .node-votes {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 8px;
  font-size: .75rem;
}

.vote-yes { color: var(--lpz-green); font-weight: 700; }
.vote-no  { color: var(--lpz-danger); font-weight: 700; }

.tree-connector {
  width: 2px;
  height: 20px;
  background: var(--border);
}

.tree-connector.active {
  background: var(--lpz-base);
}

/* ── Exit nodes ── */
.tree-row {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  justify-content: center;
}

.exit-badge {
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(16px);
  transition: var(--transition);
}

.exit-badge.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── Sidebar ── */
.presenter-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sidebar-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}

.sidebar-card h3 {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: 14px;
}

/* ── Result Bars ── */
.result-bar-item {
  margin-bottom: 12px;
}

.result-bar-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: .8rem;
}

.result-bar-label { font-weight: 600; }
.result-bar-count { color: var(--text-muted); }

.result-bar-track {
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 999px;
  overflow: hidden;
}

.result-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
  min-width: 0;
}

/* ── QR Card ── */
.qr-card {
  text-align: center;
}

.qr-card svg {
  width: 140px;
  height: 140px;
  margin: 0 auto 10px;
  background: white;
  border-radius: var(--radius);
  padding: 8px;
  border: 1px solid var(--border-light);
}

.qr-url {
  font-size: .78rem;
  color: var(--text-muted);
  word-break: break-all;
}

/* ── Current question display ── */
.current-question-display {
  background: var(--lpz-lightest);
  border: 1px solid var(--lpz-light);
  border: 1px solid var(--lpz-light);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin-bottom: 16px;
}

.current-question-display .cq-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--lpz-base);
  margin-bottom: 6px;
}

.current-question-display .cq-text {
  font-size: .95rem;
  line-height: 1.4;
  color: var(--text);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .presenter-main {
    grid-template-columns: 1fr;
  }
  .presenter-app {
    padding: 16px;
  }
}

/* ── Empty State ── */
.empty-state {
  text-align: center;
  padding: 32px;
  color: var(--text-muted);
}
.empty-state .icon {
  font-size: 2rem;
  margin-bottom: 10px;
}

/* ── Theme Toggle ── */
/* Wort statt Sonne und Mond. Emoji sehen auf jedem System anders aus, in der
   Projektion oft grob gerastert, und ein Wort ist ohnehin eindeutiger. Der
   Knopf ist deshalb keine Scheibe mehr, sondern eine schmale Pille. */
.theme-toggle {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  cursor: pointer;
  font-family: "Leipzig Sans", sans-serif;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-secondary);
  line-height: 1;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.theme-toggle:focus-visible {
  outline: 3px solid var(--lpz-gold);
  outline-offset: 2px;
}
.theme-toggle:hover {
  background: var(--bg-tertiary);
}
.status-bar .theme-toggle {
  margin-left: auto;
  width: 28px;
  height: 28px;
  font-size: .85rem;
}

/* ═══════════════════════════════════════════════════
   BARRIEREFREIHEIT
   Regeln, die fuer alle drei Seiten gelten. Sie stehen hier und nicht in den
   Seiten, damit sie nicht dreimal gepflegt werden muessen.
   ═══════════════════════════════════════════════════ */

/* Nur fuer die Vorlesesoftware. Nicht display:none und nicht visibility:hidden
   - beides nimmt den Text auch dem Screenreader weg. Ein Pixel, ausgeschnitten
   und aus dem Fluss genommen, bleibt lesbar und ist unsichtbar. */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Sprungmarke: der erste Tabulator-Halt jeder Seite. Wer mit der Tastatur
   arbeitet, muss sonst durch den ganzen Kopf und die Navigation, und in der
   Regie durch die halbe Leiste, bevor der Inhalt kommt. Sichtbar wird sie nur,
   wenn sie den Fokus hat. */
.zum-inhalt {
  position: fixed; top: -100px; left: 12px; z-index: 4000;
  padding: 10px 16px; border-radius: 0 0 10px 10px;
  /* --auf-akzent und nicht #fff: im dunklen Schema ist --lpz-base ein helles
     Blau, auf dem weisse Schrift nur 2,5:1 erreicht. */
  background: var(--lpz-base); color: var(--auf-akzent);
  font-family: "Leipzig Sans", sans-serif; font-size: .9rem; font-weight: 700;
  text-decoration: none;
  transition: top .15s ease;
}
.zum-inhalt:focus { top: 0; }

/* Grundregel fuer den Fokus. Einzelne Bauteile bringen eigene Rahmen mit, die
   gewinnen durch ihre Spezifitaet; alles andere hatte bisher gar keinen. Ohne
   sichtbaren Fokus ist eine Tastaturbedienung ein Blindflug.
   :focus-visible und nicht :focus - sonst bekommt jeder Mausklick einen Rahmen,
   und den will niemand sehen. */
:focus-visible {
  outline: 3px solid var(--lpz-base);
  outline-offset: 2px;
}

/* Wer im Betriebssystem weniger Bewegung eingestellt hat, hat dafuer einen
   Grund: Schwindel, Migraene, Konzentration. Die Einstellung wird respektiert
   statt uebergangen. Ganz auf null geht nicht, weil transitionend-Ereignisse
   sonst ausbleiben, an denen Code haengen kann. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto !important; }
}

/* ═══════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Leipzig tints (dark) */
    --lpz-lightest: #0d2444;
    --lpz-light: #1a3a5c;
    --lpz-gold-light: #2d2800;
    --lpz-gold-subtle: #3d3500;
    --lpz-green-light: #0d3326;
    --lpz-green-lightest: #0a2219;
    --lpz-orange-light: #3d2e10;
    --lpz-orange-mid: #b25c14;
    --auf-akzent: #0d1117;
    --lpz-orange-lightest: #2d2210;
    /* Hier andersherum: auf dunklem Grund muss die Textvariante heller sein
       als die Markenfarbe. 8,6:1 auf dem Seitengrund. */
    --lpz-orange-text: #f0a860;
    --lpz-danger-light: #3d1818;

    /* Neutrals (dark) */
    --bg: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #21262d;
    --surface: #161b22;
    --surface-hover: #1c2633;
    --border: #30363d;
    --border-light: #21262d;
    --text: #e6edf3;
    --text-secondary: #8b949e;
    --text-muted: #8d95a0;

    /* Semantic (dark) */
    --danger-light: #2d1515;

    /* Shadows (dark) */
    --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
    --shadow: 0 2px 8px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.4);

    /* Brand colors (brighter for dark-mode text readability) */
    --lpz-base: #58a6ff;
    --lpz-green: #3fb950;
    --lpz-danger: #f85149;

    color-scheme: dark;
  }

  :root:not([data-theme="light"]) .status-bar {
    background: rgba(13,17,23,.92);
  }

  /* Dark-mode: keep solid darker bg for white-text badge elements */
  :root:not([data-theme="light"]) .question-number,
  :root:not([data-theme="light"]) .ranking-position,
  :root:not([data-theme="light"]) .prio-card-check { background: #1f6feb; }
  :root:not([data-theme="light"]) .btn-yes { background: #238636; }
  :root:not([data-theme="light"]) .btn-yes:hover { background: #1a7f37; }
  :root:not([data-theme="light"]) .btn-no { background: #da3633; }
  :root:not([data-theme="light"]) .btn-no:hover { background: #b62324; }
  :root:not([data-theme="light"]) .participant-counter strong { color: #79b8ff; }
}

[data-theme="dark"] {
  /* Leipzig tints (dark) */
  --lpz-lightest: #0d2444;
  --lpz-light: #1a3a5c;
  --lpz-gold-light: #2d2800;
  --lpz-gold-subtle: #3d3500;
  --lpz-green-light: #0d3326;
  --lpz-green-lightest: #0a2219;
  --lpz-orange-light: #3d2e10;
  --lpz-orange-mid: #b25c14;
  --auf-akzent: #0d1117;
  --lpz-orange-lightest: #2d2210;
  --lpz-orange-text: #f0a860;
  --lpz-danger-light: #3d1818;

  /* Neutrals (dark) */
  --bg: #0d1117;
  --bg-secondary: #161b22;
  --bg-tertiary: #21262d;
  --surface: #161b22;
  --surface-hover: #1c2633;
  --border: #30363d;
  --border-light: #21262d;
  --text: #e6edf3;
  --text-secondary: #8b949e;
  --text-muted: #8d95a0;

  /* Semantic (dark) */
  --danger-light: #2d1515;

  /* Shadows (dark) */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
  --shadow: 0 2px 8px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.4);

  /* Brand colors (brighter for dark-mode text readability) */
  --lpz-base: #58a6ff;
  --lpz-green: #3fb950;
  --lpz-danger: #f85149;

  color-scheme: dark;
}

[data-theme="dark"] .status-bar {
  background: rgba(13,17,23,.92);
}

/* Dark-mode: keep solid darker bg for white-text badge elements */
[data-theme="dark"] .question-number,
[data-theme="dark"] .ranking-position,
[data-theme="dark"] .prio-card-check { background: #1f6feb; }
[data-theme="dark"] .btn-yes { background: #238636; }
[data-theme="dark"] .btn-yes:hover { background: #1a7f37; }
[data-theme="dark"] .btn-no { background: #da3633; }
[data-theme="dark"] .btn-no:hover { background: #b62324; }
[data-theme="dark"] .participant-counter strong { color: #79b8ff; }

/* ═══════════════════════════════════════════════════
   PRIORITIZATION (Participant)
   ═══════════════════════════════════════════════════ */

.prio-counter {
  text-align: center;
  font-size: .9rem;
  color: var(--text-secondary);
  margin-bottom: 16px;
  padding: 10px;
  background: var(--lpz-lightest);
  border-radius: var(--radius-sm);
  border: 1px solid var(--lpz-light);
}
.prio-counter strong {
  color: var(--lpz-base);
  font-size: 1.1rem;
}
.prio-remaining {
  font-size: .8rem;
  color: var(--text-muted);
}

.prio-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.prio-card {
  position: relative;
  width: 100%;
  padding: 16px;
  background: var(--bg-secondary);
  border: 2px solid var(--border);
  border-radius: 16px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
  font-family: "Leipzig Sans", sans-serif;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.prio-card:focus-visible {
  outline: 3px solid var(--lpz-gold);
  outline-offset: 2px;
}
.prio-card:hover {
  border-color: var(--lpz-subtle);
  background: var(--surface-hover);
}
.prio-card.selected {
  border-color: var(--lpz-base);
  background: var(--lpz-lightest);
  box-shadow: 0 0 0 3px rgba(14, 58, 182, .12);
}

.prio-card-name {
  font-size: .95rem;
  font-weight: 600;
  flex: 1;
}

.prio-card-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  color: white;
  white-space: nowrap;
  flex-shrink: 0;
}

.prio-card-check {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 24px;
  height: 24px;
  background: var(--lpz-base);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 800;
  animation: popIn .3s cubic-bezier(.175, .885, .32, 1.275);
}

/* ── Ranking (Participant Final View) ── */
.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ranking-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-secondary);
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
  transition: var(--transition);
}

.ranking-position {
  width: 32px;
  height: 32px;
  background: var(--lpz-base);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  font-weight: 800;
  flex-shrink: 0;
}

.ranking-item:first-child .ranking-position {
  background: var(--lpz-gold);
  color: #000;
}
.ranking-item:nth-child(2) .ranking-position {
  background: var(--lpz-subtle);
}
.ranking-item:nth-child(3) .ranking-position {
  background: var(--lpz-light-brand);
  color: var(--lpz-dark);
}

.ranking-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ranking-name {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
}

.ranking-votes {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--lpz-base);
  text-align: right;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════
   ADDITIONAL RESPONSIVE
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Der Kopf bleibt eine Zeile, auch auf schmalen Fenstern. Frueher stellte er
     sich hier hochkant: Titel oben, die Knoepfe darunter - aus einer Leiste
     wurden zwei, und die Knoepfe standen ploetzlich links. Sie gehoeren nach
     rechts, in jeder Breite. Platz macht der Titel, nicht die Bedienung. */
  .presenter-header { gap: 10px; }
  .presenter-header h1 {
    font-size: 1rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .kopf-icon-btn { padding: 4px 9px; font-size: .72rem; }
  /* Die Bedienung stand hier am rechten Rand, weil sie im alten Kopf dorthin
     gehoerte. Sie steht jetzt in der Workshop-Leiste, und dort sind alle
     Angaben linksbuendig. */
  .presenter-controls {
    width: 100%;
    justify-content: flex-start;
  }
  .presenter-app {
    /* Links bleibt Platz fuer den eingeklappten Ruecken der Leiste - sonst
       liegt der Inhalt darunter und die ersten 48 Pixel jeder Zeile sind
       nicht anklickbar. */
    padding: 12px 12px 12px 60px;
  }
  .presenter-main {
    gap: 16px;
  }
  .tree-container {
    overflow-x: auto;
    padding: 16px;
  }
  .sidebar-card {
    padding: 14px;
  }
}

/* ═══════════════════════════════════════════════════
   PRÄSENTATIONS-IDLE (Teilnehmende warten)
   ═══════════════════════════════════════════════════ */

.idle-screen { padding: 12px 0; }
.idle-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 8px 0 28px;
}
.idle-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--lpz-base);
  animation: idlePulse 1.4s ease-in-out infinite;
}
.idle-dots span:nth-child(2) { animation-delay: .2s; }
.idle-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes idlePulse {
  0%, 100% { opacity: .3; transform: scale(.8); }
  50%      { opacity: 1;  transform: scale(1.15); }
}
/* Welcher Workshop das hier ist. Klein und unaufdringlich: es soll nicht die
   Aufmerksamkeit ziehen, aber wer den falschen QR-Code erwischt hat, soll es
   lesen koennen, bevor er eine halbe Stunde in der falschen Sitzung sitzt. */
.sitzung-hinweis {
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.idle-msg {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
  max-width: 420px;
  margin: 0 auto;
  min-height: 3.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .35s ease;
}
/* ── Restzeit auf dem Teilnehmenden-Bildschirm ── */
.p-clock {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 18px auto 0;
  padding: 10px 22px;
  border-radius: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
}
.p-clock.over { background: var(--lpz-orange-lightest); border-color: var(--lpz-orange); }
.p-clock.paused { opacity: .6; }
.p-clock-time {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.p-clock.over .p-clock-time { color: var(--lpz-orange-text); }
.p-clock-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════
   GESPIEGELTE PRESENTER-ANSICHT
   Der Presenter schickt seine Ansicht auf die Geräte.
   Zum Mitlesen, nicht zum Bedienen: vorne wird geführt.
   ═══════════════════════════════════════════════════ */

.mir-card { text-align: center; }
.mir-body { margin-top: 18px; }
/* Steht der Inhalt allein - beim Entscheidungsbaum, wo die Leitfrage selbst die
   Ueberschrift ist -, bekommt er den Kasten, den sonst die Frage darueber hat.
   Sonst klebte der Text ohne Rahmen unter der Kopfzeile. */
.mir-body-solo {
  margin-top: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}

/* Zeitschiene */
/* Eine Zeitschiene soll aussehen wie eine Zeitschiene: eine durchgehende Linie
   mit einem Punkt je Station, und der Text daneben. Vorher waren es Karten mit
   farbigem Balken links - das sagt "Liste mit Kategorien", nicht "Verlauf". Die
   Linie traegt die Farbe des Zustands, der Punkt setzt die Station. */
.mir-tl {
  position: relative;
  display: flex; flex-direction: column;
  padding-left: 26px;
  text-align: left;
}
/* Die durchgehende Linie. Sie endet am letzten Punkt und laeuft nicht ins
   Leere - sonst sieht es aus, als fehle noch eine Station. */
.mir-tl::before {
  content: "";
  position: absolute; left: 5px; top: 8px; bottom: 8px;
  width: 2px; border-radius: 2px;
  background: var(--border);
}
.mir-tl-item { position: relative; padding: 0 0 22px 0; }
.mir-tl-item:last-child { padding-bottom: 0; }
/* Der Punkt sitzt auf der Linie, mit Ring in der Hintergrundfarbe, damit die
   Linie ihn nicht durchschneidet. */
.mir-tl-item::before {
  content: "";
  position: absolute; left: -26px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--border);
  box-shadow: 0 0 0 4px var(--bg);
}
.mir-tl-item.done::before { background: var(--lpz-green); }
.mir-tl-item.upcoming::before { background: var(--lpz-base); }
/* Die aktuelle Station bekommt einen groesseren Punkt mit Hof: sie ist die
   einzige, die man auf einem Handy sofort finden soll. */
.mir-tl-item.urgent::before {
  background: var(--lpz-orange);
  width: 16px; height: 16px; left: -28px; top: 2px;
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 7px var(--lpz-orange-lightest);
}
.mir-tl-item.future::before { background: var(--bg); box-shadow: 0 0 0 2px var(--border), 0 0 0 6px var(--bg); }
.mir-tl-date {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.mir-tl-item.urgent .mir-tl-date { color: var(--lpz-orange-text); }
.mir-tl-title { font-size: .98rem; font-weight: 700; margin-top: 2px; }
.mir-tl-desc { font-size: .85rem; line-height: 1.5; color: var(--text-secondary); margin-top: 4px; }
/* Vergangene Stationen treten zurueck, ohne unlesbar zu werden */
.mir-tl-item.done .mir-tl-title { color: var(--text-secondary); }
.mir-tl-item.future .mir-tl-title, .mir-tl-item.future .mir-tl-desc { color: var(--text-muted); }

/* Schritt-Listen: To Do's und Entscheidungsbaum */
.mir-steps { display: flex; flex-direction: column; gap: 12px; }
.mir-step {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 12px 14px;
  /* Linksbuendig, nicht zentriert. Der uebrige Teilnehmenden-Bildschirm ist
     mittig gesetzt, und das erbte diese Karte mit: jede Zeile begann an einer
     anderen Stelle, "Ranking erstellen" weiter rechts als die Zeile darueber.
     Eine Checkliste liest man an einer Kante ab, sonst sucht das Auge jede
     Zeile neu - und die Einrueckung der Punkte sah man ueberhaupt nicht. */
  text-align: left;
}
.mir-step-head { display: flex; align-items: center; gap: 8px; }
.mir-step-num {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--lpz-base);
  color: var(--auf-akzent);
  font-size: .72rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.mir-step-title { flex: 1; font-size: .95rem; font-weight: 700; line-height: 1.35; }
.mir-step-progress { flex: 0 0 auto; font-size: .72rem; color: var(--text-muted); }

/* Eingerueckt bis unter den Titel: der Ziffernkreis ist 22px breit, dazu 8px
   Abstand aus .mir-step-head. Ohne das begannen die Punkte am linken Rand der
   Karte, also weiter links als die Ueberschrift, zu der sie gehoeren. */
.mir-todo-list { list-style: none; margin: 10px 0 0; padding: 0 0 0 30px; }
.mir-todo-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .85rem;
  line-height: 1.5;
  padding: 4px 0;
  color: var(--text-secondary);
}
.mir-todo-list li.comm { color: var(--text); }
.mir-todo-list li.done { color: var(--text-muted); text-decoration: line-through; }
.mir-todo-box {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  margin-top: 2px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: .7rem;
  line-height: 15px;
  text-align: center;
  color: var(--lpz-green);
}


/* Zusammenfassung */
.mir-meta { font-size: .78rem; color: var(--text-muted); text-align: center; margin-bottom: 10px; }
.mir-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.mir-stat { border: 1px solid var(--border-light); border-radius: 12px; padding: 10px; text-align: center; }
.mir-stat-num { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.mir-stat-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.mir-line { font-size: .82rem; color: var(--text-secondary); text-align: center; margin: 12px 0; }

/* Gespiegelte Leitfrage des Entscheidungsbaums. Sie ist der einzige Inhalt auf
   dem Schirm und darf deshalb gross stehen. pre-wrap, weil der Presenter dort
   mehrere Fragen und den Tagesfokus untereinander schreibt. */
.mir-leit {
  white-space: pre-wrap;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--text);
  text-align: left;
}
.mir-rank { display: flex; flex-direction: column; gap: 6px; }
.mir-rank-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 8px 10px;
}
.mir-rank-pos { flex: 0 0 auto; font-size: .78rem; font-weight: 700; color: var(--text-muted); min-width: 16px; }
.mir-rank-name { flex: 1; font-size: .88rem; font-weight: 600; line-height: 1.3; }
.mir-rank-note { display: block; font-size: .7rem; font-weight: 600; color: var(--text-muted); }
.mir-rank-votes { flex: 0 0 auto; font-size: .78rem; color: var(--text-muted); }
.mir-pill {
  flex: 0 0 auto;
  font-size: .68rem;
  font-weight: 700;
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
}

/* ═══════════════════════════════════════════════════
   ABLAUF-SCHRITT (Teilnehmende sehen, was vorne dran ist)
   ═══════════════════════════════════════════════════ */

.agenda-step-hint {
  margin: 4px 0 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
  transition: opacity .35s ease;
}
.agenda-step-list {
  margin: 10px 0 0;
  padding-left: 20px;
  font-size: .95rem;
  line-height: 1.65;
  color: var(--text-secondary);
}
.agenda-step-list li { margin-bottom: 6px; }
.agenda-step-meta {
  margin: 14px 0 0;
  font-size: .78rem;
  color: var(--text-muted);
}
.nickname-line {
  margin-top: 22px;
  text-align: center;
  font-size: .82rem;
  color: var(--text-muted);
}
.nickname-line strong { color: var(--lpz-base); }
.quiz-joker-note {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--lpz-orange-lightest);
  color: var(--text);
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════
   PUBLIKUMSJOKER UND MESSAGEJOKER (Teilnehmende)
   ═══════════════════════════════════════════════════ */

.publikum-p-card, .msg-joker-card {
  margin-top: 16px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  background: var(--bg-secondary);
}
.publikum-p-badge, .msg-joker-badge {
  display: inline-block;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lpz-base);
}
.publikum-p-title, .msg-joker-title {
  margin: 8px 0 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
}
.publikum-p-count, .msg-joker-count {
  margin: 10px 0 0;
  font-size: .78rem;
  color: var(--text-muted);
}
.publikum-p-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.publikum-p-opt {
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
}
.publikum-p-opt:hover { border-color: var(--lpz-base); }
.publikum-p-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: .85rem; }
.publikum-p-row.mine .publikum-p-label { color: var(--lpz-base); font-weight: 700; }
.publikum-p-label { flex: 1; color: var(--text-secondary); }
.publikum-p-track { width: 72px; height: 6px; border-radius: 999px; background: var(--border-light); overflow: hidden; flex-shrink: 0; }
.publikum-p-bar { display: block; height: 100%; background: var(--lpz-gold); }
.publikum-p-pct { width: 38px; text-align: right; color: var(--text-muted); font-size: .78rem; flex-shrink: 0; }

.msg-joker-card.asked { border-color: var(--lpz-orange); background: var(--lpz-orange-lightest); }
.msg-joker-card.asked .msg-joker-badge { color: var(--lpz-orange-text); }
.msg-joker-card.answered { border-color: var(--lpz-green); background: var(--lpz-green-lightest); }
.msg-joker-card.answered .msg-joker-badge { color: var(--lpz-green); }
.msg-joker-picks { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.msg-joker-pick {
  width: 100%;
  text-align: left;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}
.msg-joker-pick:hover { border-color: var(--lpz-base); color: var(--lpz-base); }
.msg-joker-cancel {
  margin-top: 10px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
}
.msg-joker-cancel:hover { color: var(--text); }
/* Sieht aus wie die übrigen Joker-Knöpfe: gleiche Form, gleiche Farbe */
.msg-joker-btn {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--lpz-base);
  background: var(--bg-secondary);
  color: var(--lpz-base);
  font-family: "Leipzig Sans", sans-serif;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}
.msg-joker-btn:hover { background: var(--lpz-lightest); }
.msg-joker-btn:disabled { opacity: .45; cursor: not-allowed; border-color: var(--border); color: var(--text-muted); }

/* ═══════════════════════════════════════════════════
   WISSENS-QUIZ (Teilnehmende)
   ═══════════════════════════════════════════════════ */

.quiz-p-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.quiz-p-opt {
  position: relative;
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-secondary);
  border: 2px solid var(--border);
  border-radius: 16px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: var(--transition);
  font-family: "Leipzig Sans", sans-serif;
  font-size: .92rem;
  font-weight: 600;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.quiz-p-opt:hover:not(:disabled) {
  border-color: var(--lpz-subtle);
  background: var(--surface-hover);
}
.quiz-p-opt:disabled { cursor: default; }
.quiz-p-opt.picked { border-color: var(--lpz-base); background: var(--lpz-lightest); }
.quiz-p-opt.correct { border-color: var(--lpz-green); background: var(--lpz-green-lightest); }
.quiz-p-opt.wrong { border-color: var(--lpz-danger); background: var(--lpz-danger-light); }
.quiz-p-opt.struck { opacity: .45; }
.quiz-p-opt.struck .quiz-p-opt-label { text-decoration: line-through; }
.quiz-p-opt-label { position: relative; z-index: 1; }
.quiz-p-opt-pct { position: relative; z-index: 1; font-size: .8rem; color: var(--text-muted); white-space: nowrap; }
.quiz-p-bar {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 0;
  background: var(--lpz-lightest);
  transition: width .3s ease;
}
.quiz-p-opt.correct .quiz-p-bar { background: var(--lpz-green-light); }
.quiz-p-opt.wrong .quiz-p-bar { background: var(--lpz-danger-light); }

.quiz-p-status {
  margin-top: 16px;
  font-size: .95rem;
  font-weight: 700;
  text-align: center;
  color: var(--text-secondary);
}
.quiz-p-status.correct { color: var(--lpz-green); }
.quiz-p-status.wrong { color: var(--lpz-danger); }

.quiz-stats-list { margin-top: 16px; text-align: left; }
.quiz-stats-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px dashed var(--border-light); font-size: .88rem;
}
.quiz-stats-row:last-child { border-bottom: none; }
.quiz-stats-q { color: var(--text-secondary); }
.quiz-stats-pct { font-weight: 700; color: var(--lpz-green); }

/* ═══════════════════════════════════════════════════
   IDEEN-SAMMLUNG ("Ausweise")
   ═══════════════════════════════════════════════════ */

/* ── Mitmach-Aktion: Regeln und die Auflösung ── */
.mmp-rules-title {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted);
  margin: 18px 0 8px; text-align: left;
}
.mmp-rules {
  margin: 0; padding-left: 22px; text-align: left;
}
.mmp-rules li {
  font-size: .92rem; line-height: 1.7; color: var(--text);
}
/* Steht über den Spielregeln, sobald etwas aufgelöst wurde */
.mmp-rows:not(:empty) { margin-bottom: 20px; }
.mmp-rows-title {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted); margin-bottom: 10px;
}
.mmp-row {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
  text-align: left;
  animation: fadeUp .4s ease-out;
}
.mmp-erf {
  font-size: .8rem; font-weight: 700; color: var(--text-muted);
  margin-bottom: 4px;
}
.mmp-titel { font-size: .98rem; font-weight: 700; color: var(--lpz-base); margin-bottom: 4px; }
.mmp-text { font-size: .88rem; line-height: 1.6; color: var(--text-secondary); }

/* ── Kurzfragen unter dem Feedback: ein Klick genügt ── */
.pulse-block {
  margin-top: 18px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  text-align: left;
}
.pulse-title {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted); margin-bottom: 14px;
}
.pulse-row { margin-bottom: 16px; }
.pulse-row:last-child { margin-bottom: 0; }
.pulse-q { font-size: .9rem; line-height: 1.45; color: var(--text); margin-bottom: 8px; }
.pulse-opts { display: flex; gap: 8px; }
.pulse-btn {
  flex: 1;
  padding: 9px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-family: "Leipzig Sans", sans-serif;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}
.pulse-btn:hover { border-color: var(--lpz-base); color: var(--lpz-base); }
.pulse-btn.on { background: var(--lpz-base); border-color: var(--lpz-base); color: var(--auf-akzent); }

/* QR-Code auf dem Vorbereitungs-Bildschirm */
.ready-p-qr {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 10px;
  margin: 0 auto 14px;
  width: 168px;
  height: 168px;
}
.ready-p-qr svg { width: 100%; height: 100%; display: block; }

/* ── Frage-Pinnwand bei den Teilnehmenden ── */
.q-p-list { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.q-p-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; background: var(--surface);
  border: 1px solid var(--border-light); border-radius: 14px;
  text-align: left;
}
.q-p-item.answered { opacity: .5; }
.q-p-item.answered .q-p-text { text-decoration: line-through; }
.q-p-text { flex: 1; font-size: .92rem; line-height: 1.5; color: var(--text); word-break: break-word; }
.q-p-vote { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; }
.q-p-btn {
  width: 34px; height: 28px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-secondary);
  color: var(--text-muted); font-size: .8rem; cursor: pointer;
  transition: var(--transition);
}
.q-p-btn:hover { border-color: var(--lpz-base); color: var(--lpz-base); }
.q-p-btn.on { background: var(--lpz-base); border-color: var(--lpz-base); color: var(--auf-akzent); }
.q-p-score { font-size: .82rem; font-weight: 800; color: var(--text); }
/* Die eigene Frage steht ohne Bewertungsknöpfe da */
.q-p-item.mine { border-color: var(--lpz-light); background: var(--lpz-lightest); }
.q-p-own {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: var(--lpz-light); color: var(--lpz-base);
  font-size: .66rem; font-weight: 700; vertical-align: middle;
}

/* ── Vorbereitungs-Bildschirm: groß, damit sich alle vorbereiten können ── */
.ready-screen { text-align: center; }
.ready-p-dots { display: flex; justify-content: center; gap: 12px; margin-bottom: 24px; }
.ready-p-dots span {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--lpz-base);
  animation: idlePulse 1.4s ease-in-out infinite;
}
.ready-p-dots span:nth-child(2) { animation-delay: .2s; }
.ready-p-dots span:nth-child(3) { animation-delay: .4s; }
.ready-p-head {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 0;
}
.ready-p-sub {
  font-size: 1.05rem;
  color: var(--text-secondary);
  margin: 12px 0 0;
}
.ready-p-join {
  margin-top: 28px;
  padding: 18px 20px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ready-p-label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-muted);
}
.ready-p-url {
  display: inline-block;
  font-size: 1.05rem; font-weight: 800; color: var(--lpz-base); word-break: break-all;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ready-p-url:hover { color: var(--lpz-dark); }
.ready-p-hint { font-size: .82rem; color: var(--text-muted); line-height: 1.5; }

/* ── Abschluss: großes Danke über der Feedback-Pinnwand ── */
.thanks-hero {
  text-align: center;
  margin-bottom: 28px;
  animation: fadeUp .5s ease-out;
}
.thanks-big {
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--lpz-green);
}
.thanks-sub {
  margin-top: 10px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ── Statusleiste: Spitzname und Schriftgröße ── */
.status-nick {
  margin-left: 4px;
  font-weight: 700;
  font-size: 12px;
  color: var(--lpz-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40vw;
}
.status-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.status-bar .status-actions .theme-toggle { margin-left: 0; }
.font-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  height: 28px;
  min-width: 32px;
  padding: 0 8px;
  flex-shrink: 0;
  font-family: "Leipzig Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
}
.font-btn:hover { background: var(--bg-tertiary); color: var(--text); }

/* ── Quiz: Antwort gesendet, prominenter ── */
.quiz-p-sent {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 16px;
  background: var(--lpz-green-lightest);
  border: 1px solid var(--lpz-green-light);
  border: 1px solid var(--lpz-green-light);
  color: var(--lpz-green);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
}
.quiz-p-sent-check {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--lpz-green);
  color: var(--auf-akzent);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
}

/* Abgelaufene Antwortzeit: dieselbe Zeile, nur gedeckt statt gruen. Kein Rot -
   niemand hat etwas falsch gemacht, die Zeit war einfach um. */
.quiz-p-sent.zeit-um {
  background: var(--bg-secondary);
  border-color: var(--border);
  color: var(--text-muted);
}
.quiz-p-sent.zeit-um .quiz-p-sent-check {
  background: var(--text-muted);
}

/* Countdown ueber den Antworten. Die Zeit laeuft hier auf dem Geraet, deshalb
   steht sie da, wo entschieden wird - und nicht klein am Rand. */
.quiz-p-count {
  margin: 0 0 12px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.quiz-p-count.knapp { color: var(--lpz-danger); }

/* ── Persönliche Joker ── */
.my-joker-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.my-joker-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-right: 2px;
}
.my-joker-btn {
  padding: 7px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--lpz-base);
  border-radius: 999px;
  color: var(--lpz-base);
  font-family: "Leipzig Sans", sans-serif;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}
.my-joker-btn:hover:not(:disabled) { background: var(--lpz-lightest); }
.my-joker-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  border-color: var(--border);
  color: var(--text-muted);
}
/* Publikums-Tipp wird noch gesammelt */
.my-publikum-wait {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .84rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.my-publikum-wait-dots { display: inline-flex; gap: 5px; flex-shrink: 0; }
.my-publikum-wait-dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lpz-base);
  animation: idlePulse 1.3s ease-in-out infinite;
}
.my-publikum-wait-dots span:nth-child(2) { animation-delay: .18s; }
.my-publikum-wait-dots span:nth-child(3) { animation-delay: .36s; }

.my-publikum {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  text-align: left;
}
.my-publikum-title {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.my-publikum-row {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px;
  margin-bottom: 4px;
  background: var(--bg);
  font-size: .82rem;
  color: var(--text);
  overflow: hidden;
}
.my-publikum-opt { position: relative; z-index: 1; }
.my-publikum-pct { position: relative; z-index: 1; font-weight: 700; color: var(--lpz-base); }
.my-publikum-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--lpz-lightest);
  z-index: 0;
}

/* ── Ergebniskarte: farbiger Kopf, Name groß, Details ruhig darunter ── */
.result-card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
  text-align: left;
  animation: popIn .45s cubic-bezier(.175, .885, .32, 1.275);
}
.result-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  color: #fff;
}
.result-card-icon { font-size: 1.5rem; line-height: 1; }
.result-card-label {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.result-card-body { padding: 22px 24px 24px; }
.result-card-eyebrow {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.result-card-name {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 0;
}
.result-card-body .digitalisierung-badge {
  display: inline-block;
  margin-top: 16px;
}
.result-legend-box {
  margin-top: 18px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  text-align: left;
}
.result-legend-box summary {
  cursor: pointer;
  padding: 14px 18px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--text-secondary);
  list-style: none;
}
.result-legend-box summary::-webkit-details-marker { display: none; }
.result-legend-box summary::after {
  content: "▾";
  float: right;
  color: var(--text-muted);
  transition: transform .2s;
}
.result-legend-box[open] summary::after { transform: rotate(180deg); }
.result-legend-box .result-legend {
  margin: 0;
  border: none;
  background: none;
  padding: 0 18px 16px;
  max-width: none;
}
.result-next { margin-top: 20px; font-size: .85rem; }

/* ── Ergebnis-Legende: was Umsetzung, Prüfphase usw. bedeuten ── */
.result-legend {
  margin: 24px auto 0;
  max-width: 420px;
  padding: 16px 18px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  text-align: left;
}
.result-legend-title {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.result-legend-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: 7px;
}
.result-legend-row:last-child { margin-bottom: 0; }
.result-legend-row strong { color: var(--text); }
.rl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

/* ═══════════════════════════════════════════════════
   FEEDBACK-TOOL (Teilnehmenden-Formular)
   ═══════════════════════════════════════════════════ */

.fbp-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.fbp-chip {
  flex: 1;
  min-width: 90px;
  padding: 12px 10px;
  background: var(--bg-secondary);
  border: 2px solid var(--border);
  color: var(--text-secondary);
  font-family: "Leipzig Sans", sans-serif;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  border-radius: 999px;
}
.fbp-chip:hover { border-color: var(--text-muted); }
.fbp-chip.sel {
  border-color: var(--lpz-base);
  background: var(--lpz-lightest);
  color: var(--lpz-base);
}
.fbp-text {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: "Leipzig Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  resize: vertical;
}
.fbp-text:focus {
  outline: none;
  border-color: var(--lpz-base);
  box-shadow: 0 0 0 3px rgba(14, 58, 182, .12);
}
.fbp-text::placeholder { color: var(--text-muted); }
.fbp-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.fbp-count { font-size: .8rem; color: var(--text-muted); }
.fbp-foot .btn { flex: 0 0 auto; padding: 12px 26px; font-size: .98rem; }
.fbp-thanks {
  display: none;
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--lpz-green-lightest);
  border: 1px solid var(--lpz-green-light);
  color: var(--lpz-green);
  font-size: .88rem;
  font-weight: 600;
}
.fbp-thanks.show { display: block; animation: fadeUp .35s ease-out; }

.idea-input-row {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}
.idea-input {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  border: 2px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text);
  font-family: "Leipzig Sans", sans-serif;
  font-size: 1rem;
}
.idea-input:focus {
  outline: none;
  border-color: var(--lpz-base);
  box-shadow: 0 0 0 3px rgba(14, 58, 182, .12);
}
.idea-input::placeholder { color: var(--text-muted); }
.idea-add-btn {
  flex: 0 0 auto;
  padding: 0 22px;
  border: none;
  background: var(--lpz-gold);
  color: #000;
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition);
  border-radius: 999px;
}
.idea-add-btn:hover:not(:disabled) { background: #e6ce00; }
.idea-add-btn:disabled { opacity: .4; cursor: not-allowed; }

.idea-hint {
  font-size: .78rem;
  min-height: 1.1em;
  margin-bottom: 4px;
  text-align: left;
}
.idea-hint.err { color: var(--lpz-danger); }
.idea-hint.ok  { color: var(--lpz-green); }

.idea-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 20px;
}
.idea-card {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 12px 14px;
  text-align: left;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
  box-shadow: var(--shadow-sm);
  animation: fadeUp .4s ease-out;
}
.idea-board-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-muted);
  font-size: .9rem;
  padding: 28px 12px;
}
.idea-count {
  font-size: .8rem;
  color: var(--text-muted);
  margin-top: 16px;
  text-align: center;
}

/* Safe area insets for notch phones */
@supports (padding-top: env(safe-area-inset-top)) {
  .status-bar {
    padding-top: calc(8px + env(safe-area-inset-top));
  }
  .participant-app {
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
    padding-left: calc(24px + env(safe-area-inset-left));
    padding-right: calc(24px + env(safe-area-inset-right));
  }
}

/* Bauzeit der Papier-Wallet auf den Geräten */
.mmp-clock-wrap { text-align: center; margin: 4px 0 18px; }
.mmp-clock {
  font-size: 3.2rem; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.mmp-clock.idle { color: var(--text-muted); }
.mmp-clock.hot { color: var(--lpz-danger); animation: mmp-pulse .9s ease-in-out infinite; }
.mmp-clock.done { color: var(--lpz-danger); }
.mmp-clock-label { margin-top: 6px; font-size: .82rem; color: var(--text-muted); }
@keyframes mmp-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* Eine Spielregel groß auf dem eigenen Gerät, solange der Presenter darauf zeigt */
.mmp-focus {
  position: fixed; inset: 0; z-index: 900;
  /* Reine Anzeige: soll nichts anklickbar verdecken */
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  padding: 8vh 7vw; text-align: center;
  background: var(--bg);
  animation: mmp-focus-in .18s ease-out;
}
.mmp-focus-num {
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lpz-base); margin-bottom: 18px;
}
.mmp-focus-text {
  font-size: clamp(1.6rem, 7vw, 3rem); font-weight: 800; line-height: 1.18;
  letter-spacing: -.02em; color: var(--text);
}
.mmp-focus-regel {
  font-size: clamp(.92rem, 3vw, 1.15rem); font-weight: 600;
  color: var(--text-muted); margin-bottom: 16px;
}
.mmp-focus-erklaerung {
  margin-top: 18px; font-size: clamp(.95rem, 3.4vw, 1.2rem);
  line-height: 1.5; color: var(--text-secondary);
}
.mmp-focus-inner { max-width: 900px; }
@keyframes mmp-focus-in { from { opacity: 0; } to { opacity: 1; } }

/* "Regeln verstanden": alle bestätigen, bevor die Bauzeit startet */
.mmp-ready { margin-top: 22px; text-align: center; }
.mmp-ready-btn {
  padding: 13px 30px; border-radius: 999px; border: none;
  background: var(--lpz-base); color: var(--auf-akzent);
  font-family: "Leipzig Sans", sans-serif; font-size: 1rem; font-weight: 700;
  cursor: pointer; transition: var(--transition);
}
.mmp-ready-btn:hover { opacity: .9; }
.mmp-ready-done {
  padding: 12px 20px; border-radius: var(--radius);
  background: var(--lpz-green-lightest); color: var(--lpz-green); font-weight: 700;
}
.mmp-ready-count { margin-top: 8px; font-size: .8rem; color: var(--text-muted); }

/* Ankommen: "Ich bin bereit" auf dem Bereithalten-Bild */

/* Kurzes Aufblitzen, wenn vorne die Aufmerksamkeit zurückgeholt wird */
.participant-app.aufmerksam { animation: aufmerksam .9s ease-out; }
@keyframes aufmerksam {
  0%, 100% { background: var(--bg); }
  25% { background: var(--lpz-lightest); }
  60% { background: var(--bg); }
}

/* Wallets vorstellen: die ausgelosten Personen auf dem eigenen Gerät */
.mmp-vorstellen-box {
  margin-bottom: 18px; padding: 16px 18px; border-radius: var(--radius-lg);
  background: var(--bg-secondary); border: 1px solid var(--border-light);
}
.mmp-vorstellen-box.dran {
  background: var(--lpz-lightest); border-color: var(--lpz-base);
}
.mmp-vorstellen-titel { font-size: .95rem; font-weight: 700; color: var(--text); }
.mmp-vorstellen-box.dran .mmp-vorstellen-titel { color: var(--lpz-base); }
.mmp-vorstellen-namen { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.mmp-vorstellen-name { font-size: .86rem; color: var(--text-secondary); }

/* ── Hinweis bei zweitem Fenster und beim Herausnehmen ── */
/* Deckt den Bildschirm ab, weil weitermachen hier gerade schaedlich waere:
   wer zweimal mitmacht, verfaelscht jede Abstimmung. */
.doppel-overlay {
  position: fixed; inset: 0; z-index: 5000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(15, 23, 42, .72);
}
.doppel-box {
  max-width: 460px; width: 100%; text-align: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 30px 26px 26px;
  box-shadow: var(--shadow-lg);
}
.doppel-box h2 { font-size: 1.25rem; font-weight: 800; color: var(--text); margin-bottom: 12px; }
.doppel-box p { font-size: .92rem; line-height: 1.55; color: var(--text-secondary); margin-bottom: 12px; }
.doppel-tun { color: var(--text) !important; }
.doppel-btn {
  margin-top: 8px; padding: 11px 22px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent;
  font-family: inherit; font-size: .85rem; font-weight: 700;
  color: var(--text-muted); cursor: pointer;
}
.doppel-btn:hover { border-color: var(--lpz-base); color: var(--lpz-base); }

/* Der Abschnitts-Bildschirm auf den Geraeten folgt derselben Ordnung wie die
   Wand: Nummer, Hauptfrage, Erklaerung, Ladepunkte, dann die zwei Saetze. */
.agenda-step-screen .ready-p-dots { margin: 22px 0 0; }
.agenda-step-screen .agenda-step-hint {
  font-size: 1rem; line-height: 1.5; color: var(--text); text-align: center; margin: 0;
}
.agenda-step-los {
  margin-top: 8px; font-size: .9rem; color: var(--text-muted); text-align: center;
}

/* ── Spielregeln vor dem Quiz ── */
/* Sie stehen auf dem Geraet, bevor die erste Frage kommt. Linksbuendig, weil
   man eine Regelliste an einer Kante abliest. */
.quiz-regeln {
  margin: 20px auto 0; max-width: 460px; text-align: left;
  background: var(--surface); border: 1px solid var(--border-light);
  border-radius: 14px; padding: 16px 18px;
}
.quiz-regeln-titel {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--lpz-base); margin-bottom: 10px;
}
.quiz-regeln ul { list-style: none; margin: 0; padding: 0; }
.quiz-regeln li {
  font-size: .88rem; line-height: 1.5; color: var(--text-secondary);
  padding: 6px 0; border-bottom: 1px dashed var(--border-light);
}
.quiz-regeln li:last-child { border-bottom: none; }
.quiz-regeln li strong { color: var(--text); }

/* ── Stups-Fenster: jemand fragt mich per Nachrichtenjoker ── */
.stups-overlay { z-index: 5200; }
.stups-box { max-width: 520px; text-align: left; }
.stups-von {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--lpz-orange-text); margin-bottom: 8px;
}
.stups-box h2 { text-align: left; margin-bottom: 10px; }
.stups-zeit {
  font-size: .82rem; font-weight: 700; color: var(--lpz-orange-text);
  font-variant-numeric: tabular-nums; margin-bottom: 14px !important;
}
.stups-opts { display: flex; flex-direction: column; gap: 8px; }
.stups-opt {
  width: 100%; text-align: left; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--bg);
  font-family: inherit; font-size: .9rem; line-height: 1.4; color: var(--text);
  cursor: pointer;
}
.stups-opt:hover { border-color: var(--lpz-base); background: var(--surface-hover); }
.stups-hinweis {
  margin-top: 14px !important; font-size: .78rem; color: var(--text-muted) !important;
}

/* ── Gespiegelt: das Grundprinzip ── */
.mir-ssi { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.mir-ssi-rolle {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border-light);
  border-radius: 12px; padding: 12px 14px;
}
.mir-ssi-num {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: var(--lpz-base); color: var(--auf-akzent);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700;
}
.mir-ssi-titel { font-size: .98rem; font-weight: 700; color: var(--text); }
/* Der englische Fachname neben dem deutschen. In jeder Spezifikation und in
   jedem Angebot steht Issuer, Holder, Verifier - wer nur die deutschen Woerter
   kennt, findet sich dort sonst nicht zurecht. */
.mir-ssi-en {
  margin-left: 7px; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--lpz-base);
}
.mir-ssi-wer {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted); margin: 1px 0 4px;
}
.mir-ssi-text { font-size: .85rem; line-height: 1.5; color: var(--text-secondary); }
.mir-ssi-kern {
  background: var(--lpz-lightest); border: 1px solid var(--lpz-light);
  border-radius: 12px; padding: 12px 14px;
  font-size: .88rem; line-height: 1.5; color: var(--text);
}

/* ── Gespiegelt: PID ── */
.mir-pid { text-align: left; }
.mir-pid-was { font-size: .9rem; line-height: 1.5; color: var(--text); margin-bottom: 14px; }
.mir-pid-block { margin-bottom: 12px; }
.mir-pid-titel {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--lpz-base); margin-bottom: 6px;
}
.mir-pid-felder { display: flex; flex-wrap: wrap; gap: 5px; }
.mir-pid-felder code {
  padding: 3px 9px; border-radius: 999px;
  background: var(--bg-tertiary); color: var(--text);
  font-size: .74rem; font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* ── Gespiegelt: Video ── */
.mir-video { background: #000; border-radius: 12px; overflow: hidden; }
.mir-video video { width: 100%; display: block; }

/* Weg zur oeffentlichen Infothek, unter dem Spitznamen auf jedem Bildschirm.
   Dezent: er soll da sein, wenn man ihn braucht, und sonst nicht stoeren. */
.infothek-line { margin-top: 6px; text-align: center; }
.infothek-line a {
  /* --text-muted lag bei dieser Groesse auf 4,45:1 - knapp unter der Grenze. */
  font-size: .78rem; color: var(--text-secondary); text-decoration: none;
  border-bottom: 1px dotted var(--border);
}
.infothek-line a:hover { color: var(--lpz-base); border-bottom-color: var(--lpz-base); }

/* ── Wallet-Playground auf den Geraeten ──
   Linksbuendig, obwohl der uebrige Teilnehmenden-Bildschirm mittig steht: das
   hier ist eine Wallet-Oberflaeche und eine Feldliste. Eine Liste liest man an
   einer Kante ab, sonst sucht das Auge jede Zeile neu. */
.pg-buehne { text-align: left; display: flex; flex-direction: column; gap: 16px; }

.pg-angebot-kopf, .pg-anfrage-titel { font-size: 1rem; font-weight: 700; color: var(--text); line-height: 1.4; }
.pg-anfrage-kopf { display: flex; align-items: center; gap: 12px; }
.pg-anfrage-rolle { margin-top: 2px; font-size: .82rem; color: var(--text-secondary); }

/* Die Karte: das Bild, an das man sich erinnert. Farbe kommt aus den Daten,
   damit Ausweis und Fuehrerschein nicht verwechselt werden. */
.pg-karte {
  border-radius: 14px; padding: 16px 18px; color: #fff;
  background: linear-gradient(135deg, var(--pg-farbe) 0%, color-mix(in srgb, var(--pg-farbe) 70%, #000) 100%);
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .5);
}
.pg-karte-kopf { display: flex; align-items: center; gap: 12px; }
.pg-karte-titel { font-size: 1.1rem; font-weight: 800; }
.pg-karte-unter { font-size: .78rem; opacity: .85; }
.pg-karte-aussteller { margin-top: 12px; font-size: .78rem; opacity: .85; }

.pg-liste { border-radius: 12px; border: 1px solid var(--border-light); background: var(--surface); padding: 12px 14px; }
.pg-liste-kopf {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-secondary); padding-bottom: 8px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
/* Zwei Farben, eine Aussage: was hinausgeht, sticht hervor; was bleibt, ist
   ruhig. Das ist die ganze Lehre des Werkzeugs in zwei Kaesten. */
.pg-liste.pg-raus { background: #fef3c7; border-color: #f59e0b66; }
.pg-liste.pg-bleibt { background: var(--bg-secondary); }
.pg-liste.pg-raus .pg-liste-kopf, .pg-liste.pg-bleibt .pg-liste-kopf { color: var(--text); }
/* Der gelbe Kasten bleibt gelb, auch im Dunkelmodus - sonst waere der Text
   darauf weiss auf hellgelb. */
.pg-liste.pg-raus, .pg-liste.pg-raus .pg-zeile-label,
.pg-liste.pg-raus .pg-zeile-wert, .pg-liste.pg-raus .pg-zeile-feld,
.pg-liste.pg-raus .pg-liste-kopf { color: #422006; }
.pg-liste.pg-raus .pg-zeile { border-bottom-color: #f59e0b44; }

.pg-zeile {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-bottom: 1px dashed var(--border-light);
}
.pg-zeile:last-child { border-bottom: none; }
.pg-zeile-links { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pg-zeile-label { font-size: .9rem; font-weight: 700; color: var(--text); }
.pg-zeile-feld { font-size: .72rem; color: var(--text-muted); }
.pg-zeile-wert { font-size: .9rem; color: var(--text); text-align: right; word-break: break-word; }
/* Was nicht hinausgeht, wird auch nicht gezeigt. Punkte statt Wert: das Feld
   existiert, aber der Pruefer sieht es nicht - und hier eben auch nicht. */
.pg-zeile-punkte { font-size: .9rem; color: var(--text-muted); letter-spacing: .1em; }

.pg-knoepfe { display: flex; flex-direction: column; gap: 10px; }
.pg-btn {
  width: 100%; padding: 15px 20px; border-radius: 999px; border: none;
  /* --auf-akzent statt weiss: im Dunkelmodus ist --lpz-base ein helles Blau,
     und weiss darauf kam auf 2,5:1. Der Wert dreht mit dem Modus. */
  background: var(--lpz-base); color: var(--auf-akzent);
  font-family: "Leipzig Sans", sans-serif; font-size: 1rem; font-weight: 700;
  cursor: pointer; transition: var(--transition);
}
.pg-btn:hover { background: var(--lpz-dark); }
.pg-btn.pg-btn-zweit { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); }
.pg-btn.pg-btn-zweit:hover { border-color: var(--lpz-base); color: var(--lpz-base); background: transparent; }

.pg-status {
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  padding: 8px 14px; border-radius: 999px; align-self: flex-start;
}
.pg-status.gut { background: var(--lpz-lightest); color: var(--lpz-base); }
.pg-status.abgelehnt { background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border); }

.pg-text { font-size: .92rem; line-height: 1.6; color: var(--text); }
.pg-warte { font-size: .88rem; color: var(--text-muted); }
/* Ohne Seitenlinie. Der Absatz steht ohnehin fuer sich, und ein farbiger
   Balken davor macht aus einem Satz ein Zitat, das es nicht ist. Dieselbe
   Regel steht auch im Presenter, beide Seiten zeigen den Playground. */
.pg-lehre {
  font-size: .95rem; line-height: 1.65; color: var(--text);
}
/* Der Simulationshinweis steht auf jedem Schirm des Werkzeugs. Klein, aber
   nicht versteckt: wer danach im Amt entscheidet, muss wissen, was er gesehen
   hat und was nicht. */
.pg-sim {
  /* --text-muted lag bei dieser Groesse auf 3,8:1. Der Hinweis ist der wichtigste
     Satz auf dem Schirm - er darf klein sein, aber nicht schlecht lesbar. */
  font-size: .78rem; line-height: 1.55; color: var(--text-secondary);
  padding-top: 12px; border-top: 1px dashed var(--border);
}

.pg-bilanz { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pg-bilanz-teil { border-radius: 12px; padding: 18px 14px; text-align: center; border: 1px solid var(--border-light); }
.pg-bilanz-teil.pg-raus { background: #fef3c7; border-color: #f59e0b66; color: #422006; }
.pg-bilanz-teil.pg-bleibt { background: var(--bg-secondary); }
.pg-bilanz-zahl { font-size: 2.4rem; font-weight: 800; line-height: 1; }
.pg-bilanz-label { margin-top: 6px; font-size: .8rem; line-height: 1.35; }
.pg-bilanz-teil.pg-bleibt .pg-bilanz-zahl { color: var(--text); }
.pg-bilanz-teil.pg-bleibt .pg-bilanz-label { color: var(--text-secondary); }

/* ── Leichte Sprache: die Schrift-Regeln ──
   Das Regelwerk (Netzwerk Leichte Sprache, DIN SPEC 33429) verlangt nicht nur
   kurze Saetze, sondern auch eine bestimmte Darstellung. Die Saetze stehen in
   leichte-sprache.js, die Darstellung hier.

   Was hier fehlt und im Regelwerk steht: Bild-Zeichen neben dem Text und die
   Pruefung durch die Zielgruppe. Naeheres im Kopf von leichte-sprache.js. */
body.leichte-sprache {
  /* Groessere Schrift. Nicht ueber font-size am Element, sondern hier, damit
     die Schriftgroessen-Knoepfe der Teilnehmenden weiter darauf aufsetzen. */
  font-size: 1.15em;
  line-height: 1.75;
}
/* Linksbuendig, kein Blocksatz. Der Teilnehmenden-Bildschirm ist sonst mittig
   gesetzt; mittiger Text hat fuer jede Zeile einen anderen Anfang, und genau
   das erschwert das Wiederfinden der Zeile. */
body.leichte-sprache .screen,
body.leichte-sprache .app-header,
body.leichte-sprache .waiting-screen,
body.leichte-sprache .idle-screen { text-align: left; }
body.leichte-sprache p,
body.leichte-sprache li,
body.leichte-sprache .question-text,
body.leichte-sprache .question-description { text-align: left; text-wrap: pretty; }

/* Ein Satz pro Zeile. Die Umbrueche stehen als \n in den Texten; pre-line macht
   sie sichtbar. Bewusst nur auf diesen Elementen und nicht auf dem body: im
   Markup stehen Zeilenumbrueche zur Einrueckung, und die wuerden sonst als
   Leerzeilen erscheinen. Diese Elemente enthalten nur den uebersetzten Text. */
body.leichte-sprache .idle-msg,
body.leichte-sprache .waiting-text,
body.leichte-sprache .agenda-step-los,
body.leichte-sprache .nickname-line,
body.leichte-sprache .question-text,
body.leichte-sprache .question-description,
body.leichte-sprache .idea-board-empty,
body.leichte-sprache .pulse-title,
body.leichte-sprache .mmp-rows-title,
body.leichte-sprache .ready-p-hint,
body.leichte-sprache .q-p-own,
body.leichte-sprache .mir-line,
body.leichte-sprache .mir-leit,
body.leichte-sprache .mir-pid-was,
body.leichte-sprache .pg-text,
body.leichte-sprache .pg-warte,
body.leichte-sprache .pg-sim,
body.leichte-sprache .pg-lehre,
body.leichte-sprache .pg-angebot-kopf,
body.leichte-sprache .pg-bilanz-label,
body.leichte-sprache .my-publikum-title,
body.leichte-sprache .publikum-p-title,
body.leichte-sprache .msg-joker-title,
body.leichte-sprache .stups-hinweis { white-space: pre-line; }

/* Keine Kursive: schraege Schrift ist schwerer zu lesen. Das Regelwerk nennt
   sie ausdruecklich. */
body.leichte-sprache em,
body.leichte-sprache i,
body.leichte-sprache .mir-tl-datum,
body.leichte-sprache [style*="italic"] { font-style: normal !important; }

/* Mehr Luft zwischen den Bloecken: dichter Text ist schwerer zu ordnen. */
body.leichte-sprache .screen > * + * { margin-top: 1.1em; }

/* ── Begruessung beim Oeffnen ──
   Vier Stufen: Titel, Willkommen, Erklaerung, Knopf. Die ersten drei laufen von
   selbst an, dann steht die Schicht still und wartet.

   Sie legt sich nicht mehr nach knapp sechs Sekunden selbst weg. Eine Schicht,
   die von allein verschwindet, zwingt zum Mitlesen im Takt der Animation: wer
   langsamer liest, verliert den Text, und wer schneller ist, wartet. Jetzt
   entscheidet der Besucher, wann er hineingeht - mit dem Knopf darunter. */
.intro {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 24px;
  /* Auf schmalen und niedrigen Fenstern passt der Text nicht immer: dann wird
     gescrollt, statt dass der Knopf unten aus dem Bild faellt. */
  overflow: auto;
  background: var(--bg);
  /* Weggeklickt heisst weg: erst durchsichtig, dann aus dem Weg. visibility
     wechselt ohne Uebergang, deshalb steht die Dauer der Verzoegerung hier - so
     bleibt die Schicht sichtbar, bis sie ausgeblendet ist. */
  opacity: 1; visibility: visible;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.intro.weg {
  opacity: 0; visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
/* Solange die Begruessung steht, scrollt die Seite darunter nicht mit: sonst
   liegt nach dem Betreten ein anderer Ausschnitt vor einem als der Anfang. */
body.intro-offen { overflow: hidden; }
/* width:100% und min-width:0: ohne beides nimmt der Kasten die Breite seines
   laengsten Wortes und schiebt sich auf schmalen Fenstern zur Haelfte aus dem
   Bild - mitsamt dem Knopf. */
.intro-inner { width: 100%; min-width: 0; max-width: 620px; text-align: left; }
.intro-titel { overflow-wrap: break-word; }
.intro-titel, .intro-willkommen, .intro-text, .intro-knoepfe {
  opacity: 0;
  transform: translateY(10px);
  animation: intro-auf .6s ease-out forwards;
}
.intro-titel {
  font-size: clamp(1.9rem, 7vw, 3rem); font-weight: 800; line-height: 1.1;
  letter-spacing: -.02em; color: var(--lpz-base);
  animation-delay: .15s;
}
.intro-willkommen {
  margin-top: 18px; font-size: clamp(1.1rem, 4vw, 1.4rem); font-weight: 700;
  color: var(--text);
  animation-delay: .7s;
}
.intro-text {
  margin-top: 10px; font-size: clamp(.95rem, 3.4vw, 1.05rem); line-height: 1.65;
  color: var(--text-secondary);
  animation-delay: 1.25s;
}
/* Titel, Willkommen, Erklaerung, Knoepfe - in dieser Reihenfolge, eines nach
   dem anderen.

   Die Knoepfe standen zwischendurch von der ersten Sekunde an da. Grund war ein
   frueherer Anlauf mit 2,7 Sekunden Verzoegerung: so lange war der Ausgang
   unsichtbar, waehrend jemand die Seite zum ersten Mal ansieht. Die Reihenfolge
   stimmt jetzt trotzdem, weil der ganze Anlauf kuerzer ist - nach knapp zwei
   Sekunden steht alles.

   Zwei Netze darunter: .intro-fertig setzt das Skript nach zweieinhalb Sekunden
   und macht alles sichtbar, falls die Animation gar nicht erst laeuft - in einem
   Tab im Hintergrund tut sie das naemlich nicht. Und wer weniger Bewegung
   eingestellt hat, sieht ohnehin sofort alles. */
body.intro-fertig .intro-titel,
body.intro-fertig .intro-willkommen,
body.intro-fertig .intro-text,
body.intro-fertig .intro-knoepfe {
  opacity: 1; transform: none;
}
.intro-btn {
  margin-top: 30px;
  padding: 14px 32px;
  /* Pille, wie jeder andere Knopf. */
  border: none; border-radius: 999px;
  background: var(--lpz-base); color: var(--auf-akzent);
  font-family: "Leipzig Sans", sans-serif;
  font-size: 1rem; font-weight: 700; letter-spacing: .01em;
  cursor: pointer;
  transition: filter .18s, transform .18s;
}
/* Beim Zeigen etwas dunkler, nicht in einer anderen Farbe: --lpz-dark bleibt im
   Dunkelmodus dunkel, und die Schrift auf dem Knopf ist dort ebenfalls dunkel -
   der Knopf waere beim Zeigen unlesbar. brightness arbeitet mit beiden Schemata,
   weil es von der Farbe ausgeht, die gerade da ist. */
.intro-btn:hover { filter: brightness(.92); transform: translateY(-1px); }
.intro-btn:active { transform: none; }
.intro-btn:focus-visible { outline: 3px solid var(--lpz-base); outline-offset: 3px; }
@keyframes intro-auf {
  to { opacity: 1; transform: translateY(0); }
}

/* Weniger Bewegung eingestellt: derselbe Text, ohne Fahrt. Er steht sofort da
   und geht nach zweieinhalb Sekunden weg - lesen kann man ihn in der Infothek
   jederzeit wieder. */
/* Weniger Bewegung eingestellt: derselbe Text und derselbe Knopf, ohne Fahrt.
   Alles steht sofort da. Auf eine Ausnahme von der globalen Regel kommt es hier
   nicht mehr an - die Schicht wartet ohnehin auf den Knopf und laeuft nicht
   gegen eine Uhr. */
@media (prefers-reduced-motion: reduce) {
  .intro-titel, .intro-willkommen, .intro-text, .intro-knoepfe {
    opacity: 1; transform: none; animation: none;
  }
}

/* ── Leiste der Landeseite ──
   Dieselbe Regel wie die Regie-Leiste: im Ruhezustand ein duenner, dezenter
   Streifen am linken Rand, beim Ueberfahren geht sie auf. Sie nimmt der Seite
   so keine Breite weg und steht doch bereit, wenn man zwischen den beiden
   Teilen wechseln will. */
.seiten-rail {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 14px; z-index: 300;
  background: var(--lpz-base); opacity: .16;
  display: flex; flex-direction: column;
  transition: width .25s ease, opacity .2s ease, box-shadow .25s ease;
  overflow: hidden;
}
.seiten-rail:hover, .seiten-rail:focus-within {
  width: 236px; opacity: 1;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  border-right: 1px solid var(--border);
}
.seiten-rail-inner {
  opacity: 0; pointer-events: none;
  padding: 26px 22px; height: 100%; box-sizing: border-box;
  display: flex; flex-direction: column;
  transition: opacity .2s ease;
}
.seiten-rail:hover .seiten-rail-inner,
.seiten-rail:focus-within .seiten-rail-inner { opacity: 1; pointer-events: auto; }
.seiten-rail-titel {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--text-secondary); margin-bottom: 14px;
}
/* Als <a> geschrieben, damit der Anker auch ohne Skript funktioniert - dadurch
   greift aber die allgemeine Linkfarbe, und die kam im Dunkelmodus auf 2,1:1.
   Deshalb hier ausdruecklich und fuer alle Zustaende gesetzt. */
a.seiten-rail-punkt,
a.seiten-rail-punkt:link,
a.seiten-rail-punkt:visited {
  display: block; padding: 9px 0; margin-bottom: 2px;
  font-size: 1rem; font-weight: 600; color: var(--text-secondary);
  text-decoration: none; line-height: 1.35;
  transition: color .15s;
}
a.seiten-rail-punkt:hover,
a.seiten-rail-punkt:focus-visible { color: var(--lpz-base); }
/* Solange die Begruessung liegt, hat die Leiste nichts zu tun: darunter ist
   noch nichts zu erreichen. */
body.intro-offen .seiten-rail { display: none; }
/* Die Sprungziele sollen nicht unter der Kopfleiste kleben. */
#informativ, #interaktiv { scroll-margin-top: 24px; }

/* Zwei Knoepfe in der Begruessung: nebeneinander, auf schmalen Schirmen
   untereinander. Der zweite ist umrandet statt gefuellt - beide gefuellt
   waeren zwei gleich laute Angebote, und die Wahl faellt schwerer. */
.intro-knoepfe {
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px;
  animation-delay: 1.8s;
}
.intro-knoepfe .intro-btn { margin-top: 0; }
.intro-btn.intro-btn-zweit {
  background: transparent; color: var(--lpz-base);
  box-shadow: inset 0 0 0 2px var(--lpz-base);
}
.intro-btn.intro-btn-zweit:hover { filter: none; background: var(--lpz-lightest); }

/* ═══════════════════════════════════════════════════
   LEISTE DER OEFFENTLICHEN SEITEN
   ═══════════════════════════════════════════════════

   Dieselbe Bedienung wie in der Regie: eingeklappt ein schmaler Ruecken, auf
   Klick faehrt sie aus und schiebt den Inhalt nach rechts. Der Unterschied
   liegt im Inhalt - hier sind die Punkte echte Links, weil jeder Bereich eine
   eigene Seite ist.

   Sie ersetzt die Chip-Reihe, die frueher unter dem Titel stand. Die war eine
   zweite Navigation neben der der Regie und sagte dasselbe in anderer Form. */

.oeff-rail {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 48px; z-index: 300;
  background: var(--surface);
  display: flex; flex-direction: column; overflow: hidden;
  transition: width .28s cubic-bezier(.4, 0, .2, 1), box-shadow .28s ease;
}
.oeff-rail.offen {
  width: 272px;
  box-shadow: 1px 0 0 var(--border-light), 12px 0 32px -8px rgba(0, 21, 81, .18);
}
[data-theme="dark"] .oeff-rail.offen {
  box-shadow: 1px 0 0 var(--border), 12px 0 32px -8px rgba(0, 0, 0, .6);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .oeff-rail.offen {
    box-shadow: 1px 0 0 var(--border), 12px 0 32px -8px rgba(0, 0, 0, .6);
  }
}

/* Der Griff ist die ganze Flaeche des eingeklappten Ruckens. Kein Zeichen
   darauf: dass dort eine Leiste ist, sieht man an ihrem eigenen Ton. */
.oeff-griff {
  position: absolute; inset: 0; width: 48px;
  background: transparent; border: none; padding: 0; cursor: pointer; z-index: 2;
  transition: background-color .2s ease;
}
.oeff-griff:hover { background: var(--surface-hover); }
.oeff-rail.offen .oeff-griff { display: none; }

.oeff-rail-inner {
  opacity: 0; pointer-events: none;
  padding: 28px 20px 22px 26px; height: 100%; box-sizing: border-box;
  display: flex; flex-direction: column;
  transform: translateX(-8px);
  transition: opacity .22s ease, transform .28s cubic-bezier(.4, 0, .2, 1);
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
}
.oeff-rail.offen .oeff-rail-inner { opacity: 1; pointer-events: auto; transform: none; }

.oeff-rail-titel {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-muted); font-weight: 700; margin: 0 0 12px;
}
.oeff-rail-titel:not(:first-child) { margin-top: 30px; }
/* Eingerueckt, ohne Fuehrungslinie: die Einrueckung sagt schon, was Unterpunkt
   ist - die Seite kommt ohne Linien in Kaesten aus. */
.oeff-rail-gruppe { display: flex; flex-direction: column; padding-left: 15px; }
/* Die unteren Punkte werden nach unten gedrueckt, solange Platz da ist. */
/* Ein Strich ueber den unteren drei. Er trennt zwei verschiedene Dinge: die
   Bereiche der Plattform von dem, was man drumherum braucht. */
.oeff-rail-unten {
  margin-top: auto; padding-top: 18px; display: flex; flex-direction: column;
  border-top: 1px solid var(--border);
}

.oeff-nav {
  display: block; width: 100%; text-align: left;
  padding: 8px 0; margin-bottom: 1px;
  color: var(--text-secondary); text-decoration: none;
  font-family: "Leipzig Sans", sans-serif; font-size: .97rem; font-weight: 600;
  line-height: 1.35; word-break: break-word;
  transition: color .15s, transform .15s cubic-bezier(.4, 0, .2, 1);
}
.oeff-nav:hover { color: var(--lpz-base); transform: translateX(2px); }
/* Wo man steht: fett, und davor ein Punkt. Er sagt es auf einen Blick, ohne
   die Zeile zu verschieben - deshalb liegt er absolut in der Einrueckung und
   nicht im Textfluss. Ein Strich waere hier wieder eine Linie; ein Punkt ist
   eine Marke. */
.oeff-nav { position: relative; }
.oeff-nav.aktiv { color: var(--text); font-weight: 800; }
.oeff-nav.aktiv::before {
  content: ""; position: absolute; left: -11px; top: 50%;
  width: 5px; height: 5px; margin-top: -2px; border-radius: 50%;
  background: var(--lpz-base);
}
/* Die drei unten sind nicht der Inhalt der Plattform, sondern das, was man
   drumherum braucht: Einstellungen, Impressum, Rueckmeldung. Sie stehen
   kleiner, leichter und enger als die Bereiche darueber - so tragen sie sich
   nicht so laut vor wie News oder Glossar, bleiben aber lesbar. */
/* ── Schriftgroesse: ein Zeichen, dahinter drei Wege ──
   Vorher standen A- und A+ nebeneinander im Kopf, und Zuruecksetzen gab es
   nicht. Jetzt oeffnet ein Zeichen ein kleines Feld darunter - das spart im
   schmalen Kopf zwei Plaetze, und die Groesse ist ohnehin nichts, was man
   waehrend des Lesens staendig anfasst. */
.schrift-halter { position: relative; display: inline-flex; }

/* Ein zusammenhaengender Schalter, keine drei Kaestchen. Vorher hatte jeder
   Knopf seinen eigenen Rahmen und seine eigene Groesse, und der Stand stand
   ohne Rahmen dazwischen - drei verschiedene Gewichte fuer eine Sache. Jetzt
   eine Flaeche mit Haarlinien darin: die Teile gehoeren sichtbar zusammen, und
   der Stand ist die Mitte und nicht ein vergessenes Stueck Text. */
.schrift-menue {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  display: grid; grid-template-columns: 46px minmax(58px, 1fr) 46px;
  /* Ein Gewicht fuer alles darin. Vorher war A- fett, der Stand fett und
     "Zuruecksetzen" halbfett - drei Abstufungen fuer vier Felder, die
     gleichrangig sind. Wo alles wichtig aussieht, ist nichts wichtig. */
  font-weight: 400;
  border-radius: 10px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 10px 28px -12px rgba(0, 21, 81, .35);
}
.schrift-menue[hidden] { display: none; }

.schrift-btn {
  border: 0; background: transparent; padding: 11px 0; cursor: pointer;
  font-family: inherit; font-size: .92rem; color: var(--text);
  line-height: 1; transition: background-color .12s ease, color .12s ease;
}
.schrift-btn:hover:not(:disabled) { background: var(--surface-hover); color: var(--lpz-base); }
.schrift-btn:disabled { opacity: .32; cursor: default; }

/* Die Trennlinien sitzen innen und nicht als Rahmen an den Knoepfen: ein
   Rahmen doppelt sich an jeder Beruehrung, eine innere Linie nicht. */
.schrift-menue > .schrift-btn:first-child  { box-shadow: inset -1px 0 0 var(--border); }
.schrift-menue > .schrift-btn:nth-child(3) { box-shadow: inset  1px 0 0 var(--border); }

.schrift-stand {
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; color: var(--text-secondary);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Ueber die ganze Breite, durch eine Linie abgesetzt und leiser: es ist der
   Rueckweg und nicht die dritte Richtung. */
.schrift-null {
  grid-column: 1 / -1; padding: 10px 0;
  border-top: 1px solid var(--border);
  font-size: .78rem; color: var(--text-secondary);
}

/* ── Impressum und Datenschutz auf dem Geraet der Teilnehmenden ──
   Unter dem Bild, klein und leise. Die Anwendung darueber ist mindestens einen
   Bildschirm hoch, diese Zeile steht also ausserhalb dessen, was waehrend einer
   Frage zu sehen ist - und ist trotzdem mit einem Wisch erreichbar. */
.tn-recht {
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  display: flex; justify-content: center; gap: 10px;
  font-size: .78rem; color: var(--text-muted);
}
.tn-recht a { color: var(--text-muted); text-decoration: underline; }
.tn-recht a:hover { color: var(--lpz-base); }

/* Die zweite Linie in der Regie-Leiste, unter "Ueber dieses Projekt". Enger
   als die erste und die Punkte darunter noch eine Stufe leiser: es ist eine
   Abstufung und kein zweiter, gleichrangiger Block. */
.pres-nav-sep-recht {
  margin: 10px 0 8px;
}
.pres-nav.pres-nav-recht {
  font-size: .78rem; opacity: .8;
}
.pres-nav.pres-nav-recht:hover { opacity: 1; }

/* ── Impressum und Datenschutz ──
   Durch eine Linie abgesetzt und leiser gesetzt als die Bereiche darueber: sie
   gehoeren zur Seite, aber nicht zum Inhalt. Wer sie braucht, sucht sie unten
   und findet sie an der Linie. */
.oeff-rail-recht {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px;
}
.oeff-rail-recht .oeff-nav {
  font-size: .78rem; font-weight: 600; color: var(--text-muted);
}
.oeff-rail-recht .oeff-nav:hover { color: var(--lpz-base); }

.oeff-rail-unten .oeff-nav {
  padding: 3px 0;
  font-size: .73rem; font-weight: 500; letter-spacing: .015em;
  line-height: 1.5; color: var(--text-muted); opacity: .85;
}
.oeff-rail-unten .oeff-nav:hover { opacity: 1; }
.oeff-rail-unten .oeff-nav:hover { color: var(--lpz-base); }
.oeff-rail-unten .oeff-nav.aktiv {
  font-weight: 600; color: var(--text-secondary); opacity: 1;
}
.oeff-rail-unten .oeff-nav.aktiv::before { width: 4px; height: 4px; margin-top: -2px; }

/* Der Inhalt haelt Abstand zum Ruecken und rueckt mit, wenn die Leiste aufgeht.
   Unter 768px ueberlagert sie: dort waere Schieben kein Gewinn, sondern der
   Rest der Seite. */
body.hat-oeff-rail .plattform-kopf,
body.hat-oeff-rail .page-app,
body.hat-oeff-rail .it-wrap {
  padding-left: 84px;
  transition: padding-left .28s cubic-bezier(.4, 0, .2, 1);
}
body.oeff-rail-offen .plattform-kopf,
body.oeff-rail-offen .page-app,
body.oeff-rail-offen .it-wrap { padding-left: 296px; }
@media (max-width: 768px) {
  body.hat-oeff-rail .plattform-kopf,
  body.hat-oeff-rail .page-app,
  body.hat-oeff-rail .it-wrap { padding-left: 60px; }
  body.oeff-rail-offen .plattform-kopf,
  body.oeff-rail-offen .page-app,
  body.oeff-rail-offen .it-wrap { padding-left: 60px; }
  .oeff-rail.offen { width: min(265px, 82vw); }
}

/* Die Gruppen der oeffentlichen Leiste klappen beim Zeigen auf - wie in der
   Regie. Titel und Punkte stecken in einem gemeinsamen Block, damit die Gruppe
   nicht zufaellt, sobald der Zeiger vom Titel zu einem Punkt wandert.
   Ohne Maus gibt es kein Zeigen: dort oeffnet die Tastatur ueber den Fokus. */
.oeff-block .oeff-rail-gruppe {
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .26s cubic-bezier(.4, 0, .2, 1), opacity .18s ease;
}
.oeff-block:hover .oeff-rail-gruppe,
.oeff-block:focus-within .oeff-rail-gruppe {
  max-height: 30rem; opacity: 1;
}
.oeff-block .oeff-rail-titel { cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .oeff-block .oeff-rail-gruppe { transition: none; }
}

/* ═══════════════════════════════════════════════════
   KOPF DER OEFFENTLICHEN SEITEN
   ═══════════════════════════════════════════════════

   Derselbe Kopf wie in der Regie: links der Projektname, rechts Schriftgroesse
   und Farbschema, sonst nichts. Er wird von leiste.js gebaut, damit er nicht auf
   jeder Seite noch einmal im Markup steht - drei Seiten trugen ihn bisher in
   leicht verschiedener Form. */

.plattform-kopf {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: nowrap; gap: 10px;
  position: sticky; top: 0; z-index: 200;
  padding: 8px 24px;
  background: var(--bg-secondary);
  box-shadow: 0 14px 0 var(--bg-secondary);
}
body.hat-plattform-kopf { background: var(--bg-secondary); }
.plattform-kopf .pk-links {
  display: flex; align-items: baseline; min-width: 0;
}
.plattform-kopf h1 {
  font-size: 1.15rem; font-weight: 800; line-height: 1.2;
  letter-spacing: -.01em; color: var(--lpz-base); margin: 0;
}
.pk-titel {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit;
}
.pk-titel:hover { color: var(--lpz-dark); }
.plattform-kopf .pk-rechts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* Der Bereich tritt neben den Namen, sobald der Titelblock weggefahren ist. */
.pk-bereich {
  font-size: .95rem; font-weight: 600; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 0; opacity: 0;
  transition: max-width .28s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
}
.plattform-kopf.kompakt .pk-bereich { max-width: 44ch; opacity: 1; }
.plattform-kopf.kompakt .pk-bereich::before {
  content: "·"; margin: 0 10px; color: var(--text-muted); font-weight: 400;
}
.pk-bereich:empty { display: none; }

/* ── Der Titelblock faehrt beim Scrollen zusammen ── ──
   Auf jeder Seite derselbe Ablauf wie in der Regie: der Block haftet unter dem
   Kopf und schrumpft, statt aus dem Bild zu rutschen. Was bleibt, steht oben -
   Projekt, dann Bereich. */
/* Keine Bewegung. Eine Animation der Hoehe sieht weich aus und ist es nicht:
   der Block waechst in einem Dutzend Schritten, und bei jedem rutscht der
   gesamte Inhalt darunter ein Stueck. Wer gleichzeitig hochscrollt, sieht die
   Seite unter den Augen wandern. In der Regie waren es gemessen sechzehn
   Hoehenaenderungen je Scrollbewegung; ohne Animation ist es eine. */
.it-kopf, .rm-kopf, .page-hero {
  max-height: 40rem; overflow: hidden;
}
/* Zusammengefahren, aber nicht ganz weg: unten bleibt ein schmaler Streifen in
   der Farbe der Seite stehen. Er haftet weiter unter dem Kopf und ist die Kante,
   an der der Inhalt aufhoert - ohne ihn lief die naechste Zeile bis an die
   Schrift des Kopfes heran und verschwand auf halber Hoehe dahinter. */
body.kopf-klein .it-kopf,
body.kopf-klein .rm-kopf,
body.kopf-klein .page-hero {
  max-height: 0; margin-top: 0; margin-bottom: 0;
  padding-top: 0; padding-bottom: 0;
}
/* Der Name des Abschnitts steht dann schon oben im Kopf, in Grau neben dem
   Projektnamen - die blaue Ueberzeile waere dasselbe Wort ein zweites Mal. Sie
   geht sofort weg und nicht erst mit der Bewegung: waehrend der Titelblock
   zusammenfaehrt, ist sie die letzte Zeile, die uebrigbleibt. */
body.kopf-klein .it-overline,
body.kopf-klein .rm-overline,
body.kopf-klein .page-hero-overline { display: none; }
@media (prefers-reduced-motion: reduce) {
  .pk-bereich { transition: none; }
}
@media (max-width: 768px) {
  .plattform-kopf h1 { font-size: 1rem; }
  .plattform-kopf .kopf-icon-btn { padding: 4px 9px; font-size: .72rem; }
}