/* Buehne. Besitzer: UI Designer. Kaskadenposition 3 von 6.
   .tafel, .buehne, .leiste, .seitenspalte, Chat-Layout — und ALLE
   @media(min-width|max-width) im Projekt, ausnahmslos (Spec §5.2). Wer ein
   Layout uebersteuern muss, das ihm nicht gehoert, hat eine Luecke im
   Fundamentvertrag gefunden und meldet sie, statt hier eine weitere Regel
   anzuhaengen. */

/* --- Buehnen-Vertrag: --leiste-h ----------------------------------------
   FEHLERKORREKTUR (Gate-Befund): hier stand 3.875rem/62px, gemessen bevor
   die Zeitschiene (Aufgabe 8, rueckmeldung.css) in .leiste dazukam. Real
   gemessen jetzt: 73px (dichte.js: zeitschiene.bottom=73). Nachgezogen.
   --leiste-h bleibt trotzdem Vertrag fuer Aufgabe 8 (Sticky-Offset der
   Seitenspalte unten nutzt ihn auch) — aber .buehne selbst haengt seine
   Hoehe NICHT mehr an dieser von Hand gepflegten Zahl auf (s.u.): ein
   gemessener Wert, der bei jeder Aenderung an .leiste erneut veralten kann,
   ist als einzige Rechengrundlage zu zerbrechlich — das war exakt der Fehler. */
#spiel{--leiste-h:4.5625rem;background:var(--rolle-grund);
  display:flex;flex-direction:column;min-height:100dvh;}

/* --- Rahmen: Karten, Formulare, Knoepfe ---------------------------------
   .tafel traegt Start-, Beitreten-, Warteraum- und (als .tafel--breit,
   Task 12) die Auswertungsscreen. Immer dieselbe Kartenoptik wie index.html:
   Flaeche --surface, Lichtkante oben, Kontaktschatten, Radius --r. */
.tafel{max-width:26rem;margin:8vh auto;padding:2rem 1.75rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--edge),var(--sh-2);}
.tafel h1{margin-bottom:.6rem;font-size:var(--tx-2xl);}
.tafel h2{margin-bottom:.5rem;font-size:var(--tx-xl);}
.lead{color:var(--text-2);margin:0 0 1.4rem;}

/* --- Start/Beitreten/Warteraum: die Buehne bekommt einen Raum (Spec §2.4,
   Aufgabe-5-Punkt 1) ------------------------------------------------------
   #start/#beitreten/#warteraum SIND .tafel (dieselbe Section, kein
   Wrapper-div im gefrorenen Markup) — display:grid;place-items:center
   direkt auf .tafel wuerde die Karte selbst auf 100dvh strecken (eine
   Luecke im Fundament: der Plan-Wortlaut geht von einem separaten
   Hintergrund-Element aus, das es im Markup nicht gibt). Stattdessen
   uebernimmt BODY die Zentrierung als Grid mit einem einzigen, auf 100dvh
   gezwungenen Track; die drei Karten bekommen darin align/justify-self, was
   sie klein und mittig haelt, ohne zu strecken. #spiel/#auswertung bleiben
   unangetastet (kein align-self -> Default "stretch" bzw. "start", siehe
   unten), Markup bleibt unveraendert. */
body{
  display:grid;
  grid-template-rows:minmax(100dvh,1fr);
  align-items:start;   /* #spiel/#auswertung: natuerliche Hoehe, kein Stretch */
}
#start,#beitreten,#warteraum{
  align-self:center; justify-self:center;
  position:relative; isolation:isolate;
}
/* Das geteilte Feld: links kuehl (--handbuch), rechts warm (--geraet), Naht
   in der Mitte. EIN Pseudoelement, zwei Verlaeufe (Seam-Linie + Farbfeld).
   position:fixed statt absolute: das Element ist Kind einer schmalen
   26rem-Karte, soll aber den ganzen Viewport decken — fixed sizt sich am
   Viewport, nicht am (kleinen) Erzeuger. z-index:-1 haelt es innerhalb der
   eigenen Stapelkontext (isolation:isolate oben) hinter der Kartenflaeche,
   sodass es nur AUSSERHALB der Karte sichtbar wird. */
#start::before,#beitreten::before,#warteraum::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg,transparent calc(50% - 1px),var(--line-2) 50%,transparent calc(50% + 1px)),
    linear-gradient(90deg,
      color-mix(in srgb,var(--handbuch) 4%,var(--bg)) 50%,
      color-mix(in srgb,var(--geraet) 4%,var(--bg)) 50%);
}
/* #start bekommt ab 560px mehr Breite als .tafel's 26rem-Standard: die
   Gegenuebersstellung (Frontend Developer, einfuehrung.css, .ein-gegenueber)
   ist als Flex-Wrap gebaut und nutzt automatisch die zweispaltige Anordnung,
   sobald der Rahmen sie zulaesst — in 26rem passen die zwei Seiten nie
   nebeneinander, der Effekt (warm gegen kalt, EIN Blick) geht verloren.
   Nur #start, nicht #beitreten/#warteraum: die brauchen die Breite nicht
   und sollen nicht sinnlos leer wirken. Unter 560px bleibt es bei 26rem —
   dort stapelt der Kollege ohnehin, das ist dort richtig so. */
@media(min-width:560px){
  #start{max-width:44rem;}
}

.banner{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);
  background:var(--surface-3);border:1px solid color-mix(in srgb,var(--schlecht) 35%,transparent);
  color:var(--schlecht);padding:.7rem 1.1rem;border-radius:var(--r-s);
  box-shadow:var(--edge),var(--sh-2);font-size:var(--tx-s);z-index:100;
  max-width:92vw;text-align:center;}

/* --- Leiste und Seitenspalte ------------------------------------------- */
.leiste{display:flex;align-items:center;gap:1rem;padding:.7rem 1rem;
  background:rgba(10,11,13,.72);backdrop-filter:blur(24px) saturate(170%);
  border-bottom:1px solid var(--line);box-shadow:var(--edge),var(--sh-2);
  position:sticky;top:0;z-index:50;}
.uhr{font-family:var(--mono);font-size:var(--tx-uhr);letter-spacing:.04em;}
.uhr--knapp{color:var(--accent);}
.leiste-raum{margin-left:auto;font-family:var(--mono);font-size:var(--tx-xs);
  color:var(--text-3);letter-spacing:.045em;}

/* .buehne bekommt einen unteren Anschlag (Spec §2.4/Aufgabe-5-Punkt 2):
   der Bildschirm ist nicht mehr zur Haelfte schwarz. Arbeitsspalte auf
   Lesemass begrenzt (Punkt 3) — heute lief der Handbuchtext ueber 856px.

   FEHLERKORREKTUR (Gate-Befund): min-height:calc(100dvh - var(--leiste-h))
   plus die eigene Polsterung (2 * 1.5rem) ergaben zusammen mit dem
   veralteten --leiste-h 1059px Dokumenthoehe bei 1000px Viewport — Scroll,
   wo keiner sein sollte. flex:1 auf #spiel (s.o.) macht .buehne EXAKT so
   hoch wie der tatsaechliche Rest nach .leiste, ohne dass hier zusaetzlich
   eine zweite, von Hand nachgefuehrte Rechnung existiert, die erneut
   veralten kann. Die eigene Polsterung ist in dieser Groesse automatisch
   mit drin (box-sizing:border-box, Aufgabe 1). */
.buehne{display:grid;grid-template-columns:minmax(0,1fr) minmax(22rem,28rem);
  gap:1.5rem;padding:1.5rem;max-width:1440px;margin:0 auto;align-items:start;
  flex:1 1 auto;min-height:0;
  position:relative;isolation:isolate;}
#ansichtAnrufer,#ansichtSupport{max-width:62ch;}

/* Rollen-Schimmer (Spec §2.3): ein grosser, sehr schwacher Radialverlauf
   hinter der Arbeitsspalte, oben verankert. Kein filter/backdrop-filter —
   laeuft auf Schulrechnern. z-index:-1 in der eigenen Stapelkontext
   (isolation:isolate an .buehne) haelt ihn hinter dem Inhalt. */
.buehne::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(60rem 34rem at 20% -8%,var(--rolle-schimmer),transparent 70%);
}

/* --- Seitenspalte: sticky, Chat bekommt die Mitte (Spec §2.4/Aufgabe-5-
   Punkt 4). #tafelAnrufe (Warteschlange, auto) | #chat (dehnt sich) ->
   darin .chatzeilen (waechst+scrollt) | .chatform (unten fest).

   GESTALTUNGSENTSCHEIDUNG, mit Messung geprueft (Gate-Befund, offene Frage
   "wem gehoert der Raum zwischen Handbuchliste und Chatzeile"): erst mit
   max-height statt height versucht, damit die Spalte bei kurzer
   Chathistorie auf ihre natuerliche Groesse schrumpft, statt einen
   inhaltslosen Bereich ueber die volle Breite aufzuspannen. Gemessen
   (dichte.js, 1280x1000, aktueller Aufnahme-Stand mit 1 Chatzeile): die
   Luecke wurde dadurch NICHT kleiner, sondern von 489px auf 535px
   groesser — ohne die Eingabe als Anker am unteren Rand verschiebt sich nur
   die Grenze, es entsteht kein einziges Element mehr. dichte.js zaehlt nur
   echte Blattelemente mit Inhalt als "belegt"; eine leere, wenn auch schoen
   eingefaerbte Flaeche zaehlt nicht. Zurueckgedreht auf height (mit jetzt
   korrekt abgezogener Buehnen-Polsterung, s.u.): die Eingabe bleibt unten
   verankert, die Luecke bleibt kleiner (489px) und liegt zwischen echtem
   Text oben und echter Eingabe unten, statt frei zu schweben. Unter 200px
   kommt sie damit bei diesem Aufnahme-Stand (1 Anruf, 1 Chatzeile) nicht —
   das ist ab hier eine Frage des Spielstand-Inhalts, nicht der Rechnung
   mehr, siehe Ergebnisbericht. */
.seitenspalte{display:flex;flex-direction:column;gap:1.5rem;min-width:0;
  position:sticky;top:var(--leiste-h);
  height:calc(100dvh - var(--leiste-h) - 3rem);}
#tafelAnrufe{flex:0 0 auto;min-height:0;}
#chat{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:.6rem;}

/* .spaltentitel wird nur im Handbuchkontext (Rolle = Support) zur
   Apparat-Stimme — die Rolle faerbt nicht nur die Buehne, sie faerbt auch,
   wie ihre Beschriftungen klingen (Spec §2.2 "im Handbuchkontext", §2.1
   Leitidee 1). Beim Anrufer bleibt dieselbe Ueberschrift Menschensprache. */
.spaltentitel{font-size:var(--tx-2xs);letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-3);margin:1.2rem 0 .5rem;font-family:var(--ui);font-weight:600;}
#spiel[data-rolle="support"] .spaltentitel{font-family:var(--mono);}

/* .anrufzeile: liegend (--eben-1, Punkt 3). .anrufdauer war bisher tot (kein
   Rendering-Haken) — jetzt Apparat-Stimme wie .anrufnr, gedaempft weil
   sekundaer zur Nummer (Punkt 2: Aufgabe-4-Messpunkt, aber die Klasse lebt
   hier neben .anrufnr/.anrufgeraet in derselben Zeile). */
.anrufzeile{display:flex;gap:.7rem;align-items:baseline;padding:.5rem .7rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xs);
  margin-bottom:.35rem;font-size:var(--tx-s);box-shadow:var(--eben-1);}
.anrufzeile--wartet{opacity:.6;}
.anrufnr{font-family:var(--mono);color:var(--accent-2);font-size:var(--tx-xs);}
.anrufgeraet{color:var(--text-2);flex:1;}
.anrufdauer{font-family:var(--mono);color:var(--text-3);font-size:var(--tx-xs);}
.verloren{color:var(--schlecht);font-size:var(--tx-xs);margin-top:.6rem;}

/* --- Chat ----------------------------------------------------------------
   Der Chat ist kein Beiwerk: die Spieler sitzen an verschiedenen Orten und
   koennen sich nur hier verstaendigen. Er bekommt deshalb echten Platz —
   flex:1 im #chat-Wrapper statt einer festen vh-Deckelung, damit er wirklich
   "dehnbar" ist (Spec §2.4 Punkt 4), nicht nur grosszuegig geschaetzt. */
.chatzeilen{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;
  flex-direction:column;gap:.35rem;}
/* Chatzeilen des Gegenuebers etwas groesser (--tx-l, Spec §2.2-Tabelle) — man
   soll die Worte des anderen leichter lesen als die eigenen. Eigene und
   System-Zeilen bleiben bei --tx-s. */
.chatzeile{background:var(--surface);border-left:2px solid var(--line-3);
  padding:.45rem .7rem;border-radius:0 var(--r-xs) var(--r-xs) 0;
  font-size:var(--tx-s);margin:0;}
.chatzeile:not(.chatzeile--ich):not(.chatzeile--system){font-size:var(--tx-l);}
.chatzeile b{display:block;font-size:var(--tx-2xs);letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-3);}
.chatzeile--ich{border-left-color:var(--rolle);}
.chatzeile--system{color:var(--text-3);font-style:italic;border-left-color:transparent;}
.chatform{display:flex;gap:.5rem;flex:0 0 auto;}
.chatform input{flex:1;padding:.6rem .8rem;border-radius:var(--r-btn);
  background:#08090C;border:1px solid var(--line-2);color:var(--text);font:inherit;}

/* --- Breakpoints: 560 / 900 / 1200, vereinheitlicht (Spec §2.4/Aufgabe-5-
   Punkt 5) --------------------------------------------------------------
   Vorher verstreut auf 480/700/900. buehne.css ist die einzige Datei mit
   @media (Spec §5.2, stil-schnitt.test.js erzwingt das) — deshalb steht
   hier auch die Regel, die frueher direkt bei .anrufliste in Aufgabe 1
   stand (die Klasse selbst bleibt in bausteine.css). Absteigend sortiert:
   je schmaler, desto spaeter im Kaskadenverlauf, desto mehr gewinnt sie. */

@media(max-width:1199px){
  .buehne{grid-template-columns:minmax(0,1fr) minmax(19rem,22rem);}
}

@media(max-width:899px){
  .anrufliste{display:block;overflow-x:auto;}
  /* Einspaltig. Reihenfolge per grid-order gedreht, nicht im Markup
     (stoerungsannahme.html ist eingefroren): Arbeitsspalte, Chatverlauf,
     Warteschlange, Eingabe fest unten (Punkt 6). */
  .buehne{grid-template-columns:1fr;}
  #ansichtAnrufer,#ansichtSupport{order:1;max-width:none;}
  .seitenspalte{order:2;position:static;height:auto;}
  #chat{order:-1;}
  #tafelAnrufe{order:1;}
  /* Warteschlange kompakter: einzeilig statt mit Baseline-Abstand. */
  .anrufzeile{padding:.4rem .6rem;gap:.5rem;}
  .mitglied{padding:.45rem .7rem;}
  /* Eingabe klebt am unteren Rand — das Feld, ueber das geredet wird, ist
     das Spiel (Spec §0.3) und muss ohne Scrollen erreichbar sein. */
  .chatform{position:sticky;bottom:0;background:var(--rolle-grund);
    padding:.6rem 0 .2rem;margin-top:0;}
}

@media(max-width:559px){
  .tafel{margin:4vh auto;padding:1.5rem 1.25rem;}
  .buehne{padding:1rem;gap:1rem;}
}