/* Bausteine. Besitzer: UI Designer. Kaskadenposition 2 von 6.
   Knoepfe, Felder, Karten, Chips, Marken, Segmente, Tabellen — plus die
   Anrufer- und Supportbereiche und die Auswertungs-Bausteine, die inhaltlich
   hierher gehoeren. Layout und Breakpoints liegen in buehne.css, nicht hier
   (Spec §5.2). */

.feld{display:block;margin-bottom:1.1rem;}
.feld>span{display:block;font-size:var(--tx-xs);color:var(--text-2);margin-bottom:.4rem;
  font-weight:500;}
.feld input{width:100%;padding:.8rem 1rem;border-radius:var(--r-s);
  background:#08090C;border:1px solid var(--line-2);color:var(--text);font:inherit;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.55);}
.feld input:focus-visible{outline-offset:0;border-color:var(--accent);}

.knopfreihe{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:.4rem;}
.knopfreihe .btn{flex:1 1 auto;}

/* Knoepfe: identisch zu index.html — Lichtkante oben, Kontaktschatten,
   Radius 9px, kein Farbverlauf, kein dauerhafter farbiger Schatten. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--ui);font-size:var(--tx-s);font-weight:600;letter-spacing:-.005em;
  padding:.78rem 1.35rem;border-radius:var(--r-btn);border:1px solid transparent;
  cursor:pointer;transition:background var(--t-hover) var(--ease-ui),
  border-color var(--t-hover) var(--ease-ui),box-shadow var(--t-hover) var(--ease-ui),
  transform var(--t-hover) var(--ease-ui);}
.btn--primary{background:var(--accent);color:var(--accent-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),var(--sh-1);}
.btn--primary:hover{background:var(--accent-2);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),var(--sh-2);}
.btn--primary:active{transform:translateY(0) scale(.994);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.32),0 1px 1px rgba(0,0,0,.4);}
.btn--ghost{background:rgba(255,255,255,.045);border-color:var(--line-2);color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
.btn--ghost:hover{background:rgba(255,255,255,.085);border-color:var(--line-3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),var(--sh-1);}
.btn--ghost:active{transform:translateY(0);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.3);transition-duration:60ms;}
.btn--quiet{background:transparent;border-color:var(--line-2);color:var(--text-2);}
.btn--quiet:hover{color:var(--text);border-color:var(--line-3);}
.btn--quiet:active{background:rgba(255,255,255,.07);transition-duration:60ms;}
.btn[disabled]{opacity:.38;cursor:not-allowed;transform:none!important;box-shadow:none;}

.zurueck{background:none;border:0;color:var(--text-3);font:inherit;font-size:var(--tx-s);
  cursor:pointer;padding:0;margin-bottom:1.2rem;}
.zurueck:hover{color:var(--text-2);}

.hinweis{color:var(--text-3);font-size:var(--tx-xs);margin:1rem 0 0;}
/* Fehlerkorrektur (Gate-Befund): .hinweis traegt nur margin-top, .feld nur
   margin-bottom — folgt ein .feld direkt auf einen .hinweis (Start:
   Payoff-Zeile "Dasselbe Ding. Zwei Sprachen..." vor dem Namensfeld), war
   der Abstand dazwischen 0px, obendrueber 18px. Der Satz, der die
   Produktthese ausspricht, klappte damit als Bildunterschrift des
   Formularlabels statt als eigene Zeile. Gezielt auf diese Nachbarschaft
   beschraenkt, damit kein anderer .hinweis (der vor Knoepfen oder am Ende
   eines Containers steht) mitgetroffen wird. */
.hinweis + .feld{margin-top:1.1rem;}
.fehler{color:var(--schlecht);font-size:var(--tx-s);min-height:1.1em;margin:.6rem 0 0;}

/* Kleines Kennzeichnungs-Chip, an mehreren Stellen wiederverwendet: Host-
   Marke im Warteraum, "Offen"/Anrufnummer im Support, "Schicht" in der
   Leiste. Einmal definiert, ueberall gleich. */
/* Mono, unabhaengig von der Rolle (Spec §2.2, Aufgabe-4-Messpunkt 2): eine
   Marke ist immer ein Stempel/Etikett, nie Fliesstext — die Apparat-Stimme
   passt auf beiden Seiten des Tisches. */
/* Farbe ist --text-2, nicht --text-3: die Marke sitzt auf ihrer eigenen
   aufgehellten Flaeche (rgba(255,255,255,.06)), nicht auf --surface. Auf
   diesem helleren Untergrund kam --text-3 bei 11px nur auf 3,73:1
   (Einfuehrungs-Schrittpanel) bzw. 4,23:1 (.marke "Offen" im Spiel) und
   riss damit die 4,5:1 aus Spec §0.6. Rollenvarianten (einfuehrung.css)
   setzen ihre Farbe ohnehin selbst und bleiben unberuehrt. */
.marke{font-family:var(--mono);font-size:var(--tx-2xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-2);background:rgba(255,255,255,.06);
  padding:.2rem .5rem;border-radius:5px;display:inline-block;}

.mitglieder{list-style:none;margin:0 0 1.3rem;padding:0;display:flex;
  flex-direction:column;gap:.5rem;}
.mitglied{display:flex;align-items:center;gap:.6rem;padding:.6rem .9rem;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-s);
  font-size:var(--tx-s);}
.mitglied--weg{opacity:.5;}
.mitglied .wer{flex:1;}

/* Dauer-Segmentregler — dieselbe Mechanik wie .seg in index.html, nur ueber
   eine "an"-Klasse statt aria-pressed geschaltet (siehe lobby.js). */
.segment{display:flex;gap:.2rem;padding:.25rem;background:#08090C;
  border-radius:var(--r-s);box-shadow:inset 0 1px 2px rgba(0,0,0,.35);}
.segment button{flex:1;padding:.55rem .4rem;border:0;border-radius:7px;
  background:transparent;color:var(--text-2);font:inherit;font-size:var(--tx-xs);
  font-weight:600;cursor:pointer;transition:background var(--t-hover) var(--ease-ui),
  color var(--t-hover) var(--ease-ui);}
.segment button:hover{color:var(--text);background:rgba(255,255,255,.04);}
.segment button.an{background:var(--surface-3);color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11),var(--sh-1);}

/* --- Anrufer -----------------------------------------------------------
   Warm getoent. Der Support sieht kalt — die Trennung soll man sehen,
   bevor man sie liest. Deshalb beziehen Rollenband, Aufmacher, Beobachtung,
   Abschnittsnummer und Massnahme-Hover ihre Farbe aus var(--rolle) bzw.
   var(--rolle-kante)/var(--rolle-flaeche) (Spec §2.1/§4.1, Aufgabe-4-Punkt 4)
   statt aus eigenen Farbliteralen — EINE Regel, warm beim Anrufer, kalt beim
   Support, je nachdem was #spiel[data-rolle] gerade ist. Die frueheren
   Modifikatoren .rollenband--geraet/--handbuch bleiben als Klassennamen in
   Gebrauch (ansicht-anrufer.js/ansicht-support.js setzen sie weiterhin —
   keine Umbenennung), bekommen aber keine eigene Farbregel mehr. */
.rollenband{font-size:var(--tx-2xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;padding:.34rem .58rem;
  border-radius:5px;display:inline-block;margin-bottom:1rem;
  color:var(--rolle);background:var(--rolle-flaeche);
  border:1px solid var(--rolle-kante);}
/* Mono nur im Handbuchkontext, wie bei .spaltentitel (buehne.css) — "der
   Anrufer bekommt keine Mono, seine Sprache ist Menschensprache" (Aufgabe-4-
   Punkt 2) gilt auch fuer sein eigenes Rollenband. */
#spiel[data-rolle="support"] .rollenband{font-family:var(--mono);}
.geraet-name{font-size:var(--tx-2xl);font-weight:800;}
.aufmacher{font-size:var(--tx-l);line-height:1.6;color:var(--text);
  border-left:2px solid var(--rolle);padding-left:1rem;margin:1.2rem 0;}
.anleitung{color:var(--text-3);font-size:var(--tx-s);margin-bottom:1.6rem;}
.spots{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.6rem;}
.spot{position:relative;padding:.7rem 1.1rem;border-radius:var(--r-btn);cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--text);
  box-shadow:var(--edge),var(--sh-1);font:inherit;font-size:var(--tx-s);
  transition:border-color var(--t-hover) var(--ease-ui);}
.spot:hover{border-color:var(--line-3);}
/* .spot--start: ruhige Betonung, KEINE Bewegung — der Puls ist Aufgabe 9
   (bewegung.css, Whimsy Injector). Hier nur die statische Grundlage, auf der
   die Animation spaeter aufsetzt (Spec §0.5/§4.1). */
.spot--start{background:var(--rolle-flaeche);border-color:var(--rolle-kante);}
/* .spot--gesehen: erledigt, nicht deaktiviert (Spec §4.1). Volle
   Textdeckkraft, gedaempfte Flaeche statt opacity, Haekchen per ::after. */
.spot--gesehen{background:var(--surface);border-color:var(--line);
  padding-right:2.3rem;}
.spot--gesehen::after{content:"✓";position:absolute;right:.9rem;top:50%;
  transform:translateY(-50%);color:var(--ok);font-weight:700;}
.beobachtung{background:var(--surface-2);border:1px solid var(--rolle-kante);
  border-radius:var(--r-s);padding:.9rem 1.1rem;margin-bottom:.6rem;
  box-shadow:var(--eben-2);}
/* text-2 statt text-3: .beobachtung liegt jetzt auf --surface-2 (--eben-2,
   s.o.), dort faellt text-3 auf 4.39:1 — unter die 4,5:1-Grenze aus Spec
   §0.6/Aufgabe-4-Punkt 7. text-2 haelt 7.38:1 auf demselben Grund. */
.beobachtung-wo{display:block;font-size:var(--tx-2xs);letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-2);margin-bottom:.35rem;}

/* --- Support -----------------------------------------------------------
   Kalt getoent, Systemschrift fuer die Abschnittsnummern. Ein Handbuch soll
   sich nach Handbuch anfuehlen: nuechtern, nummeriert, ohne Freude.
   .rollenband--handbuch bekommt bewusst keine eigene Regel mehr — die Farbe
   kommt jetzt aus der Basisklasse .rollenband ueber var(--rolle) (s.o.). */
.suche{width:100%;padding:.8rem 1rem;border-radius:var(--r-s);
  background:#08090C;border:1px solid var(--line-2);color:var(--text);
  font:inherit;box-shadow:inset 0 1px 2px rgba(0,0,0,.55);}
.abschnitte{margin-top:1.2rem;display:flex;flex-direction:column;gap:.4rem;
  max-height:52vh;overflow-y:auto;}
/* .abschnitt: liegend (--eben-1 = kein Schlagschatten, Spec §2.3 Punkt 3).
   .abschnitt--offen: gehoben (--eben-2 + --rolle-kante) — was gerade offen
   ist, ist "deins jetzt", genau wie eine uebernommene Beobachtung. */
.abschnitt{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-s);overflow:hidden;box-shadow:var(--eben-1);}
.abschnitt--offen{background:var(--surface-2);border-color:var(--rolle-kante);
  box-shadow:var(--eben-2);}
.abschnitt-kopf{display:flex;gap:.9rem;align-items:baseline;width:100%;
  padding:.75rem 1rem;background:none;border:0;color:inherit;font:inherit;
  text-align:left;cursor:pointer;}
.abschnitt-nr{font-family:var(--mono);font-size:var(--tx-xs);color:var(--rolle);
  flex:0 0 auto;}
.abschnitt-titel{font-size:var(--tx-s);color:var(--text-2);}
.abschnitt-koerper{display:none;padding:0 1rem 1rem;border-top:1px solid var(--line);}
.abschnitt--offen .abschnitt-koerper{display:block;}
.abschnitt--offen .abschnitt-titel{color:var(--text);}
.massnahmen{display:flex;flex-direction:column;gap:.4rem;margin-top:.8rem;}
.massnahme{text-align:left;padding:.6rem .9rem;border-radius:var(--r-btn);
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--text);
  font:inherit;font-size:var(--tx-s);cursor:pointer;}
.massnahme:hover{border-color:var(--rolle);}
.bewertung{margin-top:1rem;padding:.7rem 1rem;border-radius:var(--r-s);
  font-size:var(--tx-s);min-height:1px;}
.bewertung--gut{background:color-mix(in srgb,var(--ok) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--ok) 30%,transparent);color:var(--ok);}
.bewertung--schlecht{background:color-mix(in srgb,var(--schlecht) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--schlecht) 30%,transparent);color:var(--schlecht);}
.meinAnruf{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.3rem;}
.freieAnrufe{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start;}
.freieAnrufe .marke{margin-bottom:.2rem;}

/* --- Auswertung: eine Folie, die niemand hinterfragt hat ---------------- */
.tafel--breit{max-width:64rem;}
.folie-kopf{font-size:var(--tx-2xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:.4rem;}
.kennzahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  gap:.7rem;margin:1.5rem 0;}
.kennzahl{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-s);padding:.9rem 1rem;box-shadow:var(--edge);}
.kennzahl--warnung{border-color:color-mix(in srgb,var(--schlecht) 30%,transparent);}
.kennzahl-was{display:block;font-size:var(--tx-2xs);letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:.3rem;}
.kennzahl-wert{font-family:var(--mono);font-size:var(--tx-xl);}
.fazit{border-left:2px solid var(--accent);padding-left:1rem;
  font-size:var(--tx-m);color:var(--text-2);margin:1.5rem 0;}
.anrufliste{width:100%;border-collapse:collapse;font-size:var(--tx-s);margin-bottom:1.5rem;}
.anrufliste th{text-align:left;font-size:var(--tx-2xs);letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-3);padding:.5rem .6rem;
  border-bottom:1px solid var(--line-2);font-weight:600;}
.anrufliste td{padding:.55rem .6rem;border-bottom:1px solid var(--line);
  color:var(--text-2);}
.zeile--gut td:nth-child(5){color:var(--ok);}
.zeile--schlecht td:nth-child(5){color:var(--schlecht);}
.loesungszelle{color:var(--text);}
/* .anrufliste bekommt ihren einzigen Breakpoint in buehne.css (dort jetzt
   bei 899px, vereinheitlicht mit den uebrigen Breakpoints aus Aufgabe 5 —
   urspruenglich 700px in stil.css:262) — alle @media stehen nur dort
   (Spec §5.2, stil-schnitt.test.js). Deshalb hier NICHT wiederholt. */