/* Ergänzungen zum übernommenen Aussehen. Nur was das Telefon braucht und was
   das Bestandswerkzeug nicht kannte (Platz am Gerät, Wartezustände). */

.zeile { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.zwischen { justify-content: space-between; }
.dehnt { flex: 1 1 auto; }
.weg { display: none !important; }

.platz-marke {
  background: var(--ocean-blue); color: #fff; border-radius: 999px;
  padding: .2rem .7rem; font-size: .8rem; font-weight: 700; white-space: nowrap;
}

.zustand { color: var(--text-medium); font-size: .95rem; }
.zustand-fehler {
  background: rgba(254, 18, 48, .07); border-left: 4px solid var(--chili-red);
  padding: 1rem 1.25rem; border-radius: 0 .5rem .5rem 0; color: var(--text-dark);
}
.gross { font-size: 1.15rem; }
.mitte { text-align: center; }
.haken { font-size: 2.5rem; line-height: 1; color: var(--success-green); }

/* Der Knopf, der zählt, ist der größte. Auf dem Telefon über die ganze Breite. */
.btn-breit { width: 100%; }

/* Kopfzeile: bricht am Handy nicht mehr auseinander */
.kopf { gap: .75rem; flex-wrap: wrap; }
.kopf .zustand { white-space: nowrap; }

@media (max-width: 560px) {
  .card { padding: 1.5rem 1.25rem; }
  .kopf { align-items: flex-start; }
  .kopf .btn-leise { width: auto; flex: 0 0 auto; }
  .card-title { font-size: 1.4rem; }
  .main-container { margin: 1rem auto; padding: 0 .75rem 2rem; }
  .header { padding: .75rem 1rem; }
  .btn { width: 100%; }
  .btn-schmal { width: auto; }
}

/* Das Pult: zwei Spalten am Rechner, eine auf dem Telefon */
.pult-raster { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
/* Die Vorschau braucht eine Mindestbreite, sonst wird die Gästeseite darin so
   schmal, dass man sie nicht mehr beurteilen kann — und beurteilen ist ihr
   ganzer Zweck. */
@media (min-width: 1100px) { .pult-raster { grid-template-columns: minmax(0, 1.3fr) minmax(430px, .7fr); } }
/* Nachgemessen statt geschätzt: die Karte um das Vorschau-Fenster hat 2,5rem
   Polster auf jeder Seite. Bei 425 Punkten Spaltenbreite blieben dem Fenster
   345 — schmaler als ein echtes Telefon (390). Also weniger Polster genau hier. */
.nur-am-rechner .card { padding: 1.25rem; }
/* Die Rundenzeile: am Rechner eine Zeile, am Handy ein Block. Eine Struktur,
   zwei Formen — damit im Raum der Schalt-Knopf der größte ist. */
/* Die Frage steht OBEN und über die ganze Breite, in beiden Formen. Vorher
   stand sie am Rechner in derselben Zeile wie Nummer, Anzahl und Knopf — und war
   auf „Wo e" zusammengequetscht. Am Rechner wird das Pult projiziert, da muss
   die Frage lesbar sein; darunter die Zustandszeile mit dem Knopf. */
.runden-zeile {
  display: grid; gap: .55rem .9rem; align-items: center; padding: .9rem 0;
  border-bottom: 1px solid var(--border-light);
  grid-template-columns: 1fr auto;
  grid-template-areas: "frage frage" "kopf knopf";
}
.runden-zeile:last-child { border-bottom: none; }
.rz-kopf   { grid-area: kopf; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.rz-frage  { grid-area: frage; }
.rz-knopf  { grid-area: knopf; white-space: nowrap; padding: .55rem 1.2rem; font-size: .92rem; }
/* Genau EIN Knopf ist laut: der, der als Nächstes dran ist. Die anderen bleiben
   erreichbar, aber sie schreien nicht mit. Sonst stehen im Raum drei gleich
   große rote Knöpfe und der falsche wird gedrückt. */
/* Der laute Knopf ist GEFÜLLT, in beiden Zuständen. Vorher war "Runde
   schließen" ein blasser Rahmen und die beiden leisen "Runde öffnen" hatten
   blaue Ränder und blaue Schrift — die sahen klickbarer aus als der, der dran
   war. Fläche allein macht keine Hierarchie, Farbe schon. */
.rz-knopf.dran { padding: 1rem 1.75rem; font-size: 1.05rem; border: none; }
.rz-knopf.dran.zumachen { background: var(--text-dark); color: #fff; }
.rz-knopf.dran.zumachen:hover { filter: brightness(1.25); }
/* Und die nicht dran sind, sind wirklich leise: grau, klein, kein Blau. */
.rz-knopf.leise {
  background: transparent; color: var(--text-light);
  border: 1px solid var(--border-light); font-weight: 600;
}
.rz-knopf.leise:hover { color: var(--text-dark); border-color: var(--text-medium); }
/* Die seltenen Knöpfe sind leise. Der oft gedrückte ist laut — sonst ist der
   größte Knopf der, den man am 22.09. genau einmal braucht. */
.btn-leise { padding: .5rem 1.1rem !important; font-size: .9rem !important; font-weight: 600; }
.rz-nr     { font-weight: 600; }
.rz-zahl   { color: var(--text-medium); font-size: .9rem; }
.runden-zeile.ist-offen {
  background: rgba(16, 185, 129, .06);
  border-radius: .75rem; padding: .8rem; margin: .3rem -.8rem;
  border-bottom-color: transparent;
}

/* Im Raum, mit dem Handy in der Hand: die Frage oben, darunter der Zustand,
   und der Schalt-Knopf über die ganze Breite und groß. */
/* ── Die Form ist umschaltbar ───────────────────────────────────────────────
   Nicht mehr an der Bildschirmbreite festgemacht, sondern an einer Klasse, die
   ein Schalter im Kopf setzt (und die beim ersten Besuch aus der Breite kommt).
   Grund, Nicos Wortlaut 26.08.: „Ich würde wahrscheinlich als Augmented
   Facilitator eher immer am Notebook arbeiten, aber wenn ich mal unterwegs bin
   und rumlaufe, könnte ich das ja auch mit dem Handy nutzen."
   Nebengewinn, der genauso zählt: am Laptop war die Handy-Form vorher gar
   nicht ansehbar — man musste das Fenster schmal ziehen. */
.form-handy .runden-zeile {
  grid-template-columns: 1fr;
  grid-template-areas: "frage" "kopf" "knopf";
  padding: 1rem 0;
}
.form-rechner .rz-frage { font-size: 1.1rem; padding: .8rem 1rem; }
/* Das übernommene .main-container deckelt auf 800 Punkte. Für die einspaltige
   Gästeseite ist das richtig (Textbreite), fürs zweispaltige Pult zu eng: die
   Vorschau wurde dadurch 310 Punkte schmal und war nicht mehr beurteilbar.
   Deshalb nur DORT weiter, und nur in der Rechner-Form. */
.form-rechner .main-container.weit { max-width: 1240px; }
.form-handy .runden-zeile.ist-offen { padding: 1rem; margin: .4rem -1rem; }
/* 44 Punkte ist die Grenze, unter der ein Knopf mit dem Daumen fummelig wird.
   Das gilt auch fuer die leisen — im Raum wird auch mal einer davon gedrueckt. */
.form-handy .rz-knopf { width: 100%; padding: .7rem; font-size: .95rem; min-height: 46px; }
.form-handy .rz-knopf.dran { padding: 1.1rem; font-size: 1.1rem; min-height: 56px; }
.form-handy .rz-frage { font-size: 1.05rem; }
/* Die Vorschau der Gästeseite hat auf einem Telefon keinen Sinn — ein Telefon
   in einem Telefon. Sie wird nicht kleiner gemacht, sondern weg. */
.form-handy .nur-am-rechner { display: none !important; }
/* Und wenn die Handy-Form auf einem breiten Schirm läuft, wird sie auch schmal —
   sonst ist es keine Vorschau, sondern eine auseinandergezogene Handy-Form. */
.form-handy .main-container { max-width: 26rem; }

/* Der Schalter selbst: klein, im Kopf, und man sieht, wo man steht. */
.form-schalter { display: inline-flex; border: 1px solid var(--border-light); border-radius: 999px; overflow: hidden; }
.form-schalter button {
  border: none; background: transparent; color: var(--text-medium);
  padding: .35rem .85rem; font-size: .85rem; font-weight: 600; cursor: pointer;
  min-height: 34px;
}
.form-schalter button[aria-pressed="true"] { background: var(--ocean-blue); color: #fff; }

.lampe { width: 10px; height: 10px; border-radius: 50%; background: var(--border-light); flex: 0 0 auto; }
.lampe-offen { background: var(--success-green); box-shadow: 0 0 0 4px rgba(16,185,129,.18); }
.zahl { font-size: 2.5rem; font-weight: 700; color: var(--ocean-blue); line-height: 1; }
.vorschau {
  width: 100%; height: 520px; border: 1px solid var(--border-light);
  border-radius: .75rem; background: #fff;
}

/* Die Schalter-Liste im Pult. Ein Schalter zeigt seinen Zustand im Wort, nicht
   nur in einer Farbe — im Raum wird auf eine Leinwand geschaut, nicht auf ein
   Detail. */
.schalter-zeile {
  display: grid; grid-template-columns: 1fr auto; gap: .5rem .9rem;
  align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--border-light);
}
.schalter-zeile:last-child { border-bottom: none; }
.schalter-name { font-weight: 600; }
.schalter-was { color: var(--text-medium); font-size: .9rem; grid-column: 1 / -1; margin-top: -.35rem; }
.schalter-knopf {
  border: 1px solid var(--border-light); background: transparent; cursor: pointer;
  border-radius: 999px; padding: .45rem 1rem; font: inherit; font-size: .9rem;
  font-weight: 600; color: var(--text-light); min-height: 40px; white-space: nowrap;
}
.schalter-knopf[aria-pressed="true"] {
  background: var(--success-green); border-color: var(--success-green); color: #fff;
}
.schalter-zeile.nicht-gebaut .schalter-name { color: var(--text-light); }
.schalter-zeile.nicht-gebaut .schalter-knopf { opacity: .55; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════════════════════
   R1 · Das Raumbild. Wird PROJIZIERT, nicht bedient.
   Deshalb anders als alle anderen Seiten hier: keine Karten, kein Polster um
   nichts, eine Sache groß in der Mitte — und nichts, was scrollt. Wer aus der
   letzten Reihe schaut, soll die Zahl lesen können, ohne sich vorzubeugen.
   Nicos Randbedingung 26.08.: „vielleicht hat man da keinen Beamer" — deshalb
   trägt dasselbe Layout auch ein Telefon, ohne zweite Fassung.
   ═════════════════════════════════════════════════════════════════════════ */

.rb-body {
  /* dvh statt vh: auf dem Telefon rechnet vh die Adressleiste mit und die
     Seite scrollt einen Zentimeter — genau das, was hier nie passieren soll. */
  height: 100dvh; min-height: 100dvh; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--card-white);
}

.rb-kopf {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem clamp(1rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--border-light);
}
.rb-marke { font-weight: 700; color: var(--text-light); font-size: clamp(.9rem, 1.3vw, 1.2rem); }

/* Der Puls: der Blick von hinten. Solange er schlägt, lebt die Verbindung. */
.rb-puls { width: 12px; height: 12px; border-radius: 50%; background: var(--border-light); flex: 0 0 auto; }
.rb-puls-gut     { background: var(--success-green); }
.rb-puls-wartet  { background: var(--border-light); }
.rb-puls-weg     { background: var(--chili-red); }
@keyframes rb-schlagen {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.55); }
  100% { box-shadow: 0 0 0 14px rgba(16,185,129,0); }
}
.rb-puls.rb-schlag { animation: rb-schlagen 1.4s ease-out; }
/* Wer Bewegung nicht will, bekommt sie nicht — der Zustand steht auch in der Farbe. */
@media (prefers-reduced-motion: reduce) { .rb-puls.rb-schlag { animation: none; } }

.rb-buehne {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vh, 3rem) clamp(1.25rem, 5vw, 4rem);
}
/* 60rem waren auf einem 1920er Beamer zu eng: „Was nehmen Sie mit?" brach in
   zwei Zeilen, obwohl daneben Platz war. Gemessen am Screenshot, nicht geschätzt. */
.rb-sicht { width: 100%; max-width: min(76rem, 88vw); text-align: center; }

/* Die Frage. Schrumpft mit der Fläche, statt umzubrechen bis zum Scrollen —
   und bei einer sehr langen Frage bricht sie um, ohne die Zahl zu verdrängen.
   Getestet mit einem Satz über 200 Zeichen (Prüfmatrix R1). */
/* 🔴 Die Hierarchie war zuerst falsch, und der Prüfer war trotzdem grün:
   die Zahl stand mit 176px über einer 48px-Frage. Gefunden hat es nicht der
   Prüfer, sondern das Ansehen des Screenshots. Auf der Projektion trägt die
   FRAGE die Aufgabe an den Raum — die Zahl ist ein Lebenszeichen, kein Zweck.
   Also: Frage groß, Zahl deutlich, aber untergeordnet. Der Prüfer vergleicht
   die beiden Größen jetzt, damit sich das nicht zurückdreht. */
.rb-frage {
  font-size: clamp(1.75rem, 4.6vw, 5rem); font-weight: 700; line-height: 1.12;
  color: var(--text-dark); margin: 0 0 clamp(1.25rem, 5vh, 3rem);
  text-wrap: balance;
  /* Läuft eine Frage trotzdem über, wird sie abgeschnitten statt die Seite zu
     sprengen. Vier Zeilen sind viel mehr, als eine gute Frage braucht. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  overflow: hidden;
}

/* Zahl und Einheit als ein Block, mittig — nicht auf einer gemeinsamen
   Grundlinie. Bei so unterschiedlichen Schriftgrößen klebte „Einträge" sonst
   unten am Fuß der Zahl und sah aus wie ein Versehen. */
.rb-zaehler { display: flex; align-items: center; justify-content: center; gap: .75rem; flex-wrap: wrap; }
.rb-zahl {
  font-size: clamp(1.6rem, 3vw, 3.25rem); font-weight: 700; line-height: 1;
  color: var(--ocean-blue); font-variant-numeric: tabular-nums;
  transition: color .3s ease;
}
/* Sichtbar veraltet ist besser als still falsch: die Zahl wird grau, sobald
   die Verbindung weg ist, und darunter steht warum. */
.rb-zahl-alt { color: var(--text-light); }
.rb-einheit { font-size: clamp(1rem, 1.9vw, 1.7rem); font-weight: 600; color: var(--text-medium); }

.rb-ruhig { font-size: clamp(1.2rem, 2.6vw, 2.1rem); color: var(--text-medium); font-weight: 600; }
.rb-klein { font-size: clamp(.9rem, 1.4vw, 1.15rem); color: var(--text-light); margin-top: 1.25rem; }

/* ── R6 · Das Bild an der Wand ────────────────────────────────────────────
   Wenn eine Verdichtung vorliegt, führt SIE. Die Frage rückt nach oben und
   wird klein, die Zahl in die Fußzeile — sie bleibt aber sichtbar, weil im
   Raum weiter eingetragen werden kann und der Raum das sehen soll.
   Anders als die Zahl kann das Bild lang werden. Es darf trotzdem nicht
   scrollen (es wird projiziert, niemand bedient es): also schrumpft die
   Schrift mit der Fläche und läuft im Notfall in eine begrenzte Zeilenzahl. */
.rb-oben {
  font-size: clamp(.95rem, 1.5vw, 1.35rem); font-weight: 600;
  color: var(--text-light); margin: 0 0 clamp(.75rem, 2.5vh, 1.5rem);
}
.rb-bild {
  font-size: clamp(1.1rem, 2.1vw, 2.1rem); font-weight: 600; line-height: 1.35;
  color: var(--text-dark); text-align: left; white-space: pre-wrap;
  max-height: 62vh; overflow: hidden;
}
/* Ein Ergebnis kommt oft als Liste mit „- " am Zeilenanfang. Aus dem Modell
   kommt Text, kein Markup — also wird hier nur der Umbruch respektiert
   (pre-wrap oben) und die Zeilen bekommen Luft. */
.rb-bild { --nichts: 0; }
.rb-sicht #bild-fuss { text-align: center; }

/* ── R6 · Der Durchlauf im Pult ──────────────────────────────────────────── */
.dl-zug {
  display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
  width: 100%; text-align: left; margin-bottom: .55rem; white-space: normal;
}
.dl-zug-titel { font-weight: 700; }
.dl-zug-was { font-size: .85rem; font-weight: 500; opacity: .8; }
/* Der erste Zug ist der laute. Dieselbe Regel wie bei den Runden-Knöpfen:
   vier gleich große Knöpfe heißen im Raum, dass geraten wird. */
.dl-zug.dran { padding: .95rem 1.25rem; }
.dl-zug.leise { padding: .7rem 1.25rem; }

/* Solange ein Durchlauf läuft, sind die Züge sichtbar stumm — nicht nur
   technisch gesperrt. Sonst drückt man den nächsten, weil nichts passiert. */
.dl-beschaeftigt #dl-zuege, .dl-beschaeftigt #dl-frei-block { opacity: .4; pointer-events: none; }

.dl-laeuft {
  display: flex; align-items: center; gap: .7rem; margin-top: 1rem;
  padding: .9rem 1.1rem; border-radius: .6rem;
  background: rgba(0, 97, 247, .07); color: var(--text-dark); font-weight: 600;
}
.dl-dreher {
  width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%;
  border: 3px solid rgba(0, 97, 247, .25); border-top-color: var(--ocean-blue);
  animation: dl-drehen .9s linear infinite;
}
@keyframes dl-drehen { to { transform: rotate(360deg); } }
/* Wer Bewegung nicht will, sieht trotzdem, dass es läuft — der Text sagt es. */
@media (prefers-reduced-motion: reduce) { .dl-dreher { animation: none; } }

.dl-ergebnis {
  margin-top: 1rem; padding: 1rem 1.1rem; border-radius: .6rem;
  background: rgba(16, 185, 129, .07); border-left: 4px solid var(--success-green);
  line-height: 1.5;
}
/* Zeilen wie an der Wand (Anlage.bildSetzen), also kein pre-wrap. */
#dl-ergebnis-text .rb-satz  { margin-bottom: .45em; }
#dl-ergebnis-text .rb-punkt { display: flex; gap: .55em; margin-bottom: .35em; align-items: baseline; }
#dl-ergebnis-text .rb-marke-punkt { color: var(--success-green); flex: 0 0 auto; font-weight: 700; }

/* ── R6 · Das Bild auf den Telefonen ─────────────────────────────────────── */
/* Nicos Randbedingung 26.08.: „vielleicht hat man da keinen Beamer." Dann ist
   das Telefon die Wand, und das Ergebnis muss dort genauso ankommen. */
.gast-bild {
  margin-top: 1.25rem; padding: 1rem 1.1rem; border-radius: .6rem;
  background: rgba(0, 97, 247, .06); border-left: 4px solid var(--ocean-blue);
  line-height: 1.5;
}
/* Dieselbe Zeilen-Form wie auf der Wand (Anlage.bildSetzen baut sie auf),
   deshalb hier kein pre-wrap: das würde die Umbrüche verdoppeln. */
#gastbild-text .rb-satz  { margin-bottom: .5em; }
#gastbild-text .rb-punkt { display: flex; gap: .55em; margin-bottom: .4em; align-items: baseline; }
#gastbild-text .rb-marke-punkt { color: var(--ocean-blue); flex: 0 0 auto; font-weight: 700; }
.gast-bild-titel { font-weight: 700; margin-bottom: .4rem; }

/* Das Bild wird aus Zeilen aufgebaut, nicht als Rohtext gesetzt (siehe
   raumbild.js). Deshalb hier die Form der Zeilen statt pre-wrap. */
.rb-bild { white-space: normal; }
.rb-satz  { margin-bottom: .5em; }
.rb-punkt { display: flex; gap: .6em; margin-bottom: .45em; align-items: baseline; }
.rb-marke-punkt { color: var(--ocean-blue); flex: 0 0 auto; font-weight: 700; }

/* ── R2 · Die Einträge im Wortlaut, an der Wand ───────────────────────────
   Kacheln, keine Liste: dreissig Sätze als Absätze wären eine Textwand.
   Die Schriftgröße sinkt mit der Anzahl — nachgerechnet an drei Stufen, nicht
   geschätzt: bei 1080 Punkten Höhe passen sechs Kacheln in Lesegröße, vierzehn
   in mittlerer, darüber wird es klein und dafür zweispaltig. */
.rb-texte { display: grid; gap: .6rem; text-align: left; max-height: 68vh; overflow: hidden; }
.rb-kachel {
  background: var(--bg-slate); border-left: 3px solid var(--ocean-blue);
  border-radius: 0 .5rem .5rem 0; padding: .7rem .9rem; color: var(--text-dark);
}
.rb-texte-wenig  { grid-template-columns: 1fr; }
.rb-texte-wenig  .rb-kachel { font-size: clamp(1rem, 1.9vw, 1.75rem); }
.rb-texte-mittel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rb-texte-mittel .rb-kachel { font-size: clamp(.85rem, 1.3vw, 1.2rem); }
.rb-texte-viel   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rb-texte-viel   .rb-kachel { font-size: clamp(.75rem, 1vw, .95rem); padding: .5rem .7rem; }
/* Auf einem Telefon ist Mehrspaltigkeit unlesbar — dort immer eine Spalte. */
@media (max-width: 700px) {
  .rb-texte-mittel, .rb-texte-viel { grid-template-columns: 1fr; }
  .rb-texte { max-height: 60vh; overflow-y: auto; }
}

/* Einpassen statt abschneiden (siehe raumbild.js → einpassen()).
   Die Frage bekommt eine Höhengrenze, damit gemessen werden kann — aber KEIN
   line-clamp mehr: vorher endete eine lange Frage nach vier Zeilen mitten im
   Wort, und das war genau das Element, das die Aufgabe an den Raum trägt. */
.rb-frage { -webkit-line-clamp: unset; max-height: 46vh; }
/* Passt es selbst in der kleinsten Schrift nicht, wird gekürzt — dann aber
   sichtbar, mit einem weichen Auslauf und einer Zeile darunter, die es sagt.
   Ein stummer Schnitt ist im Raum schlimmer als ein kleiner Text. */
.rb-gekuerzt {
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}
.rb-kurz {
  font-size: clamp(.85rem, 1.2vw, 1.05rem); color: var(--chili-red);
  font-weight: 600; margin-top: .8rem; text-align: center;
}