/* Bühne im Einstieg: fünf Abläufe von Brokr, die sich abwechseln.
   Alle Szenen liegen in derselben Rasterzelle, damit die Bühne so hoch ist wie die höchste und nichts springt.
   Unter «Bewegung reduzieren» wechselt nichts von selbst und jede Szene steht fertig da. */

.buehne { position: relative; background: #1C1C23; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 14px; color: var(--graphite); }
.buehne-ohne-skript { margin: 0; padding: 24px; color: var(--hell-auf-dunkel); }
.b-fenster { background: var(--soft); border-radius: 12px; overflow: hidden; }
.b-leiste { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--weiss); border-bottom: 1px solid var(--linie); }
.b-leiste i { width: 9px; height: 9px; border-radius: 50%; background: var(--linie-stark); }
.b-leiste span { margin-left: 8px; font-size: 12px; color: var(--text-2); }
.b-szenen { display: grid; }
.b-szene { grid-area: 1 / 1; padding: 20px clamp(14px, 2.4vw, 24px) 22px; visibility: hidden; opacity: 0; transition: opacity .35s ease, visibility 0s linear .35s; min-width: 0; }
.b-szene.aktiv { visibility: visible; opacity: 1; transition: opacity .35s ease; }
.b-titel { margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.b-titel strong { font: 800 22px/1.1 var(--schrift-titel); letter-spacing: -0.03em; }
.b-titel .marke { font-size: 12px; }

/* Schritt für Schritt einblenden */
.b-szene .ein { opacity: 0; transform: translateY(6px); }
.b-szene.aktiv .ein { animation: b-ein .45s ease forwards; animation-delay: calc(var(--i, 0) * 0.45s + 0.3s); }
@keyframes b-ein { to { opacity: 1; transform: none; } }

/* 1 Police aus PDF */
.b-pdf { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 16px; align-items: start; }
.b-blatt { position: relative; aspect-ratio: 3 / 4; background: var(--weiss); border: 1px solid var(--linie); border-radius: 8px; padding: 12px; overflow: hidden; }
.b-blatt .z { height: 6px; border-radius: 3px; background: var(--linie); margin-bottom: 7px; }
.b-blatt .z.k { width: 55%; } .b-blatt .z.m { width: 80%; } .b-blatt .z.kopf { height: 10px; width: 45%; background: #C9C9D2; margin-bottom: 12px; }
.b-blatt .datei { position: absolute; left: 10px; right: 10px; bottom: 10px; font-size: 11px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-scan { position: absolute; left: 0; right: 0; top: -20%; height: 18%; background: linear-gradient(to bottom, rgba(120,80,255,0), rgba(120,80,255,.28), rgba(120,80,255,0)); }
.b-szene.aktiv .b-scan { animation: b-scan 1.8s ease-in-out .2s 2 forwards; }
@keyframes b-scan { from { top: -20%; } to { top: 100%; } }
.b-felder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.b-felder li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; padding: 8px 10px; background: var(--weiss); border: 1px solid var(--linie); border-radius: 8px; font-size: 13px; }
.b-felder li span { color: var(--text-2); }
.b-felder li b { font-weight: 600; }
.b-fuss { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 12px; font-size: 13px; color: var(--text-2); }
.b-knopf { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 8px; background: var(--violett); color: var(--weiss); font-weight: 600; font-size: 13px; }

/* 2 Mandat */
.b-papier { background: var(--weiss); border: 1px solid var(--linie); border-radius: 8px; padding: 18px 20px; font-size: 13px; line-height: 1.5; }
.b-papier h4 { margin: 0 0 10px; font: 800 18px/1.1 var(--schrift-titel); letter-spacing: -0.02em; }
.b-papier p { margin: 0 0 6px; }
.b-papier .feld { background: var(--marke-violett-grund); color: var(--marke-violett); padding: 0 4px; border-radius: 3px; font-weight: 600; }
.b-unterschriften { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 50px; } /* Platz für die Unterschrift über der Linie */
.b-unterschriften div { border-top: 1px solid var(--graphite); padding-top: 4px; font-size: 11px; color: var(--text-2); position: relative; }
.b-unterschriften svg { position: absolute; left: 4px; bottom: calc(100% + 4px); width: min(110px, 100%); height: 38px; color: var(--violett-tief); }
.b-unterschriften path { stroke-dasharray: 300; stroke-dashoffset: 300; }
.b-szene.aktiv .b-unterschriften path { animation: b-zug 1.4s ease 1.1s forwards; }
@keyframes b-zug { to { stroke-dashoffset: 0; } }

/* 3 Mandat melden */
.b-anhang { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 8px; background: var(--graphite); color: var(--weiss); font-size: 13px; margin-bottom: 12px; max-width: 100%; }
.b-anhang svg { color: var(--gelb); flex: 0 0 auto; }
.b-anhang span { min-width: 0; overflow-wrap: anywhere; }
.b-mails { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.b-mails li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; background: var(--weiss); border: 1px solid var(--linie); border-radius: 10px; font-size: 13px; }
.b-mails li .wer { flex: 1 1 160px; min-width: 0; }
.b-mails li .wer b { display: block; font-weight: 600; }
.b-mails li .wer span { color: var(--text-2); }
.b-mails .zustand { position: relative; }
.b-mails .zustand .marke { transition: opacity .3s; }
.b-mails .zustand .gesendet { position: absolute; right: 0; top: 0; opacity: 0; }
.b-szene.aktiv .b-mails .zustand .gesendet { animation: b-ein .3s ease forwards; animation-delay: calc(var(--i, 0) * 0.5s + 1.6s); }
.b-szene.aktiv .b-mails .zustand .entwurf { animation: b-aus .2s ease forwards; animation-delay: calc(var(--i, 0) * 0.5s + 1.6s); }
@keyframes b-aus { to { opacity: 0; } }

/* 4 Kommandozentrale */
.b-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.b-kachel { background: var(--weiss); border: 1px solid var(--linie); border-radius: 10px; padding: 10px; min-width: 0; }
.b-kachel span { display: block; font-size: 11px; color: var(--text-2); line-height: 1.25; }
.b-kachel b { display: block; margin-top: 4px; font: 800 26px/1 var(--schrift-titel); }
.b-kachel--dunkel { background: var(--graphite); border-color: var(--graphite); }
.b-kachel--dunkel span { color: var(--hell-auf-dunkel); }
.b-kachel--dunkel b { color: var(--gelb); }
.b-zeilen { list-style: none; margin: 0; padding: 0; background: var(--weiss); border: 1px solid var(--linie); border-radius: 10px; }
.b-zeilen li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; justify-content: space-between; padding: 9px 12px; border-top: 1px solid var(--linie); font-size: 13px; }
.b-zeilen li:first-child { border-top: 0; }
.b-zeilen li > span:first-child { flex: 1 1 160px; min-width: 0; }

/* 5 Auswertung */
.b-auswertung { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 16px; align-items: center; }
.b-ring { position: relative; width: 100%; max-width: 190px; aspect-ratio: 1; margin: 0 auto; }
.b-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.b-ring circle.teil { transition: stroke-dasharray 1s ease; }
.b-ring .mitte { position: absolute; inset: 22%; display: grid; place-content: center; text-align: center; min-width: 0; }
.b-ring .mitte b { font: 800 22px/1.05 var(--schrift-titel); letter-spacing: -0.02em; white-space: nowrap; }
.b-ring .mitte span { font-size: 11px; color: var(--text-2); }
.b-legende { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.b-legende li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.b-legende i { width: 12px; height: 12px; border-radius: 3px; }
.b-legende b { font-variant-numeric: tabular-nums; }

/* Reiter unter der Bühne */
.b-reiter { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; }
.b-reiter button { position: relative; overflow: hidden; min-height: 40px; padding: 0 12px; border: 0; border-radius: 9px; background: rgba(255,255,255,.07); color: var(--hell-auf-dunkel); font: 500 13px/1.2 var(--schrift); cursor: pointer; }
.b-reiter button:hover { color: var(--weiss); background: rgba(255,255,255,.12); }
.b-reiter button[aria-selected="true"] { color: var(--weiss); font-weight: 600; }
.b-reiter button .fortschritt { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--gelb); }
.b-reiter button[aria-selected="true"] .fortschritt { width: 100%; }
.buehne.laeuft .b-reiter button[aria-selected="true"] .fortschritt { width: 0; animation: b-fort var(--dauer, 7s) linear forwards; }
.buehne.pause .b-reiter button[aria-selected="true"] .fortschritt { animation-play-state: paused; }
@keyframes b-fort { to { width: 100%; } }
.b-reiter :focus-visible { outline-color: var(--gelb); }

/* Auf dem Telefon ist die Bühne so hoch wie die gezeigte Szene, sonst bliebe unter kurzen Szenen eine Lücke */
@media (max-width: 40rem) {
  .b-szene { display: none; }
  .b-szene.aktiv { display: block; animation: b-ein .35s ease; }
  .b-ring .mitte b { font-size: 20px; }
}
@media (max-width: 30rem) {
  .b-pdf, .b-auswertung { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .b-blatt { max-width: 150px; aspect-ratio: 4 / 3; }
  .b-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-ring { max-width: 180px; }
}

@media (prefers-reduced-motion: reduce) {
  .b-szene .ein { opacity: 1; transform: none; }
  .b-unterschriften path { stroke-dashoffset: 0; }
  .b-mails .zustand .gesendet { opacity: 1; }
  .b-mails .zustand .entwurf { opacity: 0; }
  .b-scan { display: none; }
}