/* Tablet im Stil C2: Schaltzentrale. Quer zuerst, hochkant gestapelt. Keine Taste unter 44 px. */
:root {
  --tinte: #17191b;
  --tinte-2: #4a4e52;
  --flaeche: #f3f3f2;
  --rand: rgba(23, 25, 27, 0.12);
  --akzent: #1f5f74;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; }
/* Spalte: das Warnband steht oben im Fluss und schiebt alles nach unten, statt es zu verdecken */
body { display: flex; flex-direction: column; }
body {
  font-family: 'Archivo', system-ui, sans-serif; color: var(--tinte);
  background: radial-gradient(ellipse 80% 90% at 35% 25%, #e6e7e8 0%, #d3d5d7 60%, #c3c5c8 100%);
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
[hidden] { display: none !important; }
button {
  font: inherit; color: inherit; border: 1px solid var(--rand); background: var(--flaeche);
  border-radius: 14px; cursor: pointer; touch-action: manipulation;
  transition: background 0.2s, color 0.2s, opacity 0.2s, transform 0.08s;
}
button:active:not(:disabled) { transform: scale(0.98); }
button.an { background: var(--akzent); color: #fff; border-color: var(--akzent); }
button:disabled { opacity: 0.38; cursor: default; }

/* ---------- Code-Eingabe ---------- */
.kopplung { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; padding: 24px; overflow-y: auto; }
.kopplung-innen { width: min(520px, 100%); display: flex; flex-direction: column; align-items: center; }
.kopplung h1 { font-size: 30px; font-weight: 600; letter-spacing: -0.01em; }
.anzeige { display: flex; gap: 14px; margin: 26px 0 10px; }
.anzeige span {
  width: 84px; height: 104px; display: grid; place-items: center; font-size: 64px; font-weight: 600;
  background: rgba(255, 255, 255, 0.6); border: 1px solid var(--rand); border-radius: 16px;
}
.anzeige span.aktiv { border: 2px solid var(--akzent); }
.meldung { min-height: 30px; font-size: 20px; color: #8a2a1c; text-align: center; }
.ziffern { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.ziffern button { height: clamp(64px, 9vh, 88px); font-size: 34px; font-weight: 500; }
.ziffern .leise, .ziffern .ok { font-size: 20px; }
.ziffern .ok { background: var(--akzent); color: #fff; border-color: var(--akzent); }

/* ---------- Schaltzentrale ----------
   Messlatte: alles lesbar ohne Scrollen bei 1400x690 (echtes Tablet mit Chrome-Leiste), ebenso 1280x720,
   1180x820, im Vollbild 1400x840 und hochkant 800x1200. Oben Status und Stationen (flach), links die große
   Vorschau mit Werkzeugzeile, rechts Reiter in Unterrichtsreihenfolge, unten der Ablauf. */
:root { --taste: 44px; --reihe: 44px; }
.fern {
  flex: 1 1 auto; min-height: 0; padding: 6px 10px; display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 34px 40px minmax(0, 1fr) 58px;
}
.fern button { min-height: var(--taste); }
.kopf { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; min-height: 0; position: relative; }
.fortschritt { position: absolute; left: 0; right: 0; bottom: -3px; height: 4px; border-radius: 2px; background: rgba(23, 25, 27, 0.12); overflow: hidden; }
.fortschritt i { display: block; height: 100%; width: 0; background: var(--akzent); transition: width 0.4s; }
.status { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--tinte-2); white-space: nowrap; }
.punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--akzent); flex: none; }
.punkt.weg { background: #a8442f; }
.code b { font-size: 16px; color: var(--tinte); font-weight: 600; letter-spacing: 0.25em; margin-left: 6px; }
.wo { font-size: 17px; font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.status .neu { min-height: 0 !important; height: 30px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.status .neu.sicher { background: #a8442f; color: #fff; border-color: #a8442f; }

/* Stationsleiste: flach, eine Reihe, waagerecht wischbar, die aktive Station bleibt sichtbar. */
.leiste {
  display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 28px), transparent 100%);
  padding: 0 14px; margin: 0 -10px; touch-action: pan-x;
}
.leiste::-webkit-scrollbar { display: none; }
.leiste button {
  flex: 0 0 auto; max-width: 260px; min-width: 96px; height: 40px; min-height: 0 !important; scroll-snap-align: center;
  display: flex; align-items: center; gap: 8px; text-align: left; padding: 2px 12px 2px 10px; font-size: 14px; line-height: 1.1;
}
.leiste button b { font-size: 18px; font-weight: 600; min-width: 1.3em; text-align: center; font-variant-numeric: tabular-nums; }
.leiste button span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Zwei Spalten: links Organ, rechts Reiter */
.haupt { display: grid; grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); gap: 8px; min-height: 0; overflow: hidden; }
.vorne, .rechts { min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.gruppe { background: rgba(255, 255, 255, 0.5); border: 1px solid var(--rand); border-radius: 14px; padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 8px; flex: none; }
.gruppe h2 { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinte-2); }

/* Vorschau füllt die linke Spalte bis zur Werkzeugzeile. Ist sie schmaler als 16:9, zeigt sie den
   mittleren Ausschnitt des Boards (--w = Anteil der Boardbreite, tablet.js setzt ihn). Hochkant
   bleibt sie 16:9. Der Zeigepunkt rechnet den Ausschnitt in Boardkoordinaten um. */
.vorschau {
  --w: 1;
  position: relative; flex: 1 1 0; width: 100%; min-height: 150px;
  border-radius: 12px; overflow: hidden; touch-action: none;
  background: radial-gradient(ellipse 80% 90% at 35% 25%, #e8e9ea 0%, #cfd1d4 100%); border: 1px solid var(--rand);
}
.vorschau canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vorschau .tipp { position: absolute; left: 8px; bottom: 6px; font-size: 12px; color: var(--tinte-2); pointer-events: none; background: rgba(243, 243, 242, 0.7); padding: 2px 8px; border-radius: 8px; }
.vorschau .tipp:empty { display: none; }
.v-text { position: absolute; left: 3%; top: 7%; width: 25%; pointer-events: none; font-size: 11px; line-height: 1.2; transition: opacity 0.3s; }
.v-text b { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; display: block; }
.v-text ul { list-style: none; margin-top: 6px; }
.v-text li { padding: 4px 0; border-top: 1px solid var(--rand); opacity: 0.12; transition: opacity 0.3s; }
.v-text li.da { opacity: 1; }
.vorschau.ohne-text .v-text { opacity: 0; }
/* Im Ausschnitt läge die Textspalte des Boards außerhalb: Spiegel weglassen, der Reiter Notiz hat den Text. */
.vorschau.zugeschnitten .v-text { display: none; }
.laser {
  position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; pointer-events: none;
  background: #ff3b30; box-shadow: 0 0 0 3px #fff, 0 0 14px 5px rgba(255, 59, 48, 0.5); opacity: 0; transition: opacity 0.25s;
}
.laser.an { opacity: 1; }
.dunkel { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(14, 16, 18, 0.78); color: #fff; font-size: 18px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity 0.4s; }
.vorschau.ist-dunkel .dunkel { opacity: 1; }

/* Werkzeugzeile unter der Vorschau: vier Tasten und der Zoom in einer Reihe */
.werkzeuge { display: flex; align-items: center; gap: 6px; flex: none; }
.werkzeuge button { flex: 0 0 auto; font-size: 15px; padding: 0 10px; }
.werkzeuge .regler { flex: 1 1 140px; min-width: 120px; margin-left: 4px; }
.regler { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; min-height: var(--taste); font-size: 15px; color: var(--tinte-2); }
.regler input { width: 100%; height: var(--taste); accent-color: var(--akzent); }
.regler input:disabled { opacity: 0.35; }

/* Reiter rechts, in Unterrichtsreihenfolge */
.tabs { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tabs button { min-height: 48px !important; font-size: 17px; font-weight: 500; padding: 0 4px; }
.pane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.pane > * { flex: none; }
.pane > .notiz-feld, .pane > .wissen, .pane > .fallpanel { flex: 1 1 auto; }

/* Bühne und Organ: große Tasten */
.modi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.modi button { font-size: 19px; font-weight: 500; min-height: 52px !important; }
.drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.schichten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.herkunft { margin: 10px 2px 0; font-size: 14px; }
.herkunft a { color: inherit; opacity: 0.7; }
.drei button, .schichten button { font-size: 16px; line-height: 1.1; padding: 2px 6px; min-height: 50px !important; }
.zwei-drei { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 8px; }
.zwei-drei button { font-size: 16px; line-height: 1.1; padding: 2px 8px; min-height: 52px !important; }
.zwei-drei .gross { font-size: 18px; font-weight: 600; }
.chips, .teile { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.chips button, .teile button { min-height: 46px !important; padding: 2px 14px; font-size: 16px; }
.chips button.aus { background: transparent; color: var(--tinte-2); text-decoration: line-through; opacity: 0.8; }
.teile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.teile button { padding: 2px 6px; line-height: 1.1; min-height: 50px !important; }

/* Notiz */
.notiz-feld { min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; background: #f6f6f5; border: 1px solid var(--rand); border-radius: 14px; overflow-y: auto; }
.merksatz { flex: none; font-size: 19px; line-height: 1.3; font-weight: 600; color: var(--akzent); border-left: 4px solid var(--akzent); padding: 2px 0 2px 12px; }
.stand { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tinte-2); }
.notiz { font-size: 18px; line-height: 1.45; user-select: text; -webkit-user-select: text; }
.notiz p + p { margin-top: 10px; }
.notiz b { font-weight: 600; }
.kennzahl { font-size: 17px; line-height: 1.3; font-weight: 600; }
.kennzahl:empty { display: none; }
.quelle { font-size: 13px; line-height: 1.3; color: var(--tinte-2); }

/* Wissen: Unterreiter Hintergrund, Fragen, Fehler, Karten */
.wissen { min-height: 0; display: flex; flex-direction: column; gap: 8px; background: #f6f6f5; border: 1px solid var(--rand); border-radius: 14px; padding: 10px 12px; }
#wissen .merksatz { display: none; }
.reiter { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.reiter button { min-height: 44px !important; font-size: 16px; padding: 0 6px; }
.wissen-flaeche { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; user-select: text; -webkit-user-select: text; }
.wissen-inhalt .fliess { font-size: 18px; line-height: 1.45; }
@media (max-height: 740px) { .wissen-inhalt .fliess { font-size: 17px; line-height: 1.36; } }
.wissen-inhalt .klein, .wissen .klein { font-size: 12px; line-height: 1.28; color: var(--tinte-2); margin-top: 6px; display: block; }
.wissen .leer { margin: 0; }
.wissen-inhalt .liste { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.wissen-inhalt .liste li { font-size: 17px; line-height: 1.4; padding: 8px 12px; border-left: 3px solid #a8442f; background: rgba(255, 255, 255, 0.7); border-radius: 6px; }
.wissen-inhalt .zeile { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 10px 14px; margin-bottom: 8px; min-height: 48px; }
.wissen-inhalt .frage { font-size: 17px; font-weight: 600; line-height: 1.3; }
.wissen-inhalt .antwort { font-size: 17px; line-height: 1.4; font-weight: 400; color: var(--tinte); border-top: 1px solid var(--rand); padding-top: 6px; width: 100%; }
.wissen-inhalt .tipp-hinweis { font-size: 13px; color: var(--tinte-2); }

/* Ablauf: immer am unteren Rand, links und rechts in Daumenreichweite. */
.unten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 6px; }
.unten button { height: 58px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1px; padding: 0 8px; }
.unten button span { font-size: 20px; font-weight: 600; }
.unten button small { font-size: 13px; color: var(--tinte-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unten .punkt-weiter { background: #fff; border: 2px solid var(--akzent); }
.unten .punkt-weiter span { color: var(--akzent); }
.unten .punkt-weiter:disabled { border-color: var(--rand); }
.unten button.an small { color: rgba(255, 255, 255, 0.85); }

/* Vollbild groß auf der Kopplungsseite */
.vollbild-gross { margin-top: 18px; width: 100%; min-height: 64px; font-size: 22px; font-weight: 600; background: #fff; border: 2px solid var(--akzent); color: var(--akzent); }
.vollbild-gross.an { background: var(--akzent); color: #fff; }

/* Hochkant: Vorschau oben, Werkzeugzeile, darunter Reiter und Fläche */
@media (orientation: portrait) {
  .haupt { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 6px; }
  .vorschau { flex: none; aspect-ratio: 16 / 9; min-height: 0; width: min(100%, calc(30vh * 16 / 9)); align-self: center; }
  .vorne { align-items: stretch; }
  .vorne .vorschau { align-self: center; }
  .werkzeuge .regler { flex-basis: 100px; min-width: 90px; }
  .tabs button { font-size: 16px; }
}

/* ---------- Regie: Betriebsart, Ablauf, Schalter am Organ, Erklärfenster ---------- */
.ablauf-feld { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.rg-kopf { font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tinte-2); }
.rg-kopf b { font-weight: 600; color: var(--tinte); }
.rg-block { background: #f6f6f5; border: 1px solid var(--rand); border-radius: 14px; padding: 8px 14px 10px; display: flex; flex-direction: column; gap: 4px; }
.rg-block h3, .rg-vertiefen h3 { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinte-2); }
.rg-text { font-size: 17px; line-height: 1.35; user-select: text; -webkit-user-select: text; }
.rg-text.gross { font-size: 24px; line-height: 1.32; font-weight: 500; }
.rg-jetzt-zeile, .rg-nach-zeile { font-size: 15px; line-height: 1.3; color: var(--tinte-2); padding: 0 4px; }
.rg-jetzt-zeile { border-left: 4px solid var(--akzent); padding-left: 10px; color: var(--tinte); }
.rg-jetzt-zeile b, .rg-nach-zeile b { font-weight: 600; }
.rg-sagt { background: #fff; gap: 6px; }
.rg-sprech { display: flex; flex-direction: column; gap: 6px; }
.rg-mehr summary { font-size: 14px; font-weight: 600; color: var(--akzent); cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.rg-mehr[open] summary { margin-bottom: 4px; }
.rg-uebergabe { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; font-size: 18px; line-height: 1.3; }
.rg-uebergabe dt { font-weight: 600; color: var(--akzent); min-width: 1.4em; }
.rg-frageblock { background: rgba(31, 95, 116, 0.08); border-color: var(--akzent); box-shadow: inset 5px 0 0 var(--akzent); }
.rg-frage-klein { font-size: 15px; color: var(--tinte-2); line-height: 1.3; }
.rg-antwort { color: var(--tinte); }
.rg-liste { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.rg-liste li { font-size: 21px; line-height: 1.3; padding: 4px 8px 4px 12px; border-left: 4px solid var(--akzent); background: rgba(243, 243, 242, 0.8); border-radius: 4px; user-select: text; -webkit-user-select: text; }
.rg-fallraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; max-height: none; }
.rg-fallraster .rg-chip { width: 100%; }
.rg-vertiefen { display: flex; flex-direction: column; gap: 4px; }
.rg-reihe { display: flex; flex-wrap: wrap; gap: 8px; }
.rg-chip { min-height: 46px !important; padding: 2px 14px; font-size: 16px; font-weight: 500; background: #fff; border: 2px solid var(--akzent); color: var(--akzent); text-align: left; line-height: 1.15; }
.rg-chip.kurz { border-color: var(--rand); color: var(--tinte); }
.rg-organ { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.gruppe.rg-organ { padding: 8px 10px; }
.rg-schalt { min-height: 48px !important; padding: 2px 10px; font-size: 16px; font-weight: 500; line-height: 1.15; }
.neugierig summary { font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinte-2); cursor: pointer; min-height: 40px; display: flex; align-items: center; }
.neugierig[open] summary { margin-bottom: 8px; }
.neugierig .teile { margin-top: 6px; }

.erklaer {
  position: fixed; right: 14px; top: 90px; width: min(460px, 46vw); max-height: calc(100% - 170px); overflow-y: auto; z-index: 30;
  background: #fff; border: 1px solid var(--rand); border-radius: 16px; box-shadow: 0 10px 36px rgba(0, 0, 0, 0.28); padding: 14px 16px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.erklaer h2 { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.erklaer .fach { font-size: 14px; font-style: italic; color: var(--tinte-2); }
.erklaer h3 { margin-top: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinte-2); }
.erklaer p { font-size: 17px; line-height: 1.38; user-select: text; -webkit-user-select: text; }
.erklaer p.quelle { font-size: 12px; margin-top: 6px; }
.erklaer.ohne-text h3 { display: none; }
.erklaer .knoepfe { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 8px; margin-top: 10px; }
.erklaer .knoepfe button { min-height: 52px; font-size: 18px; font-weight: 600; }
.erklaer .knoepfe .gross { background: var(--akzent); color: #fff; border-color: var(--akzent); }
@media (orientation: portrait) { .erklaer { top: auto; bottom: 74px; right: 10px; left: 10px; width: auto; max-height: 55vh; } }

/* ---------- Klassenspiel (spiel.js) ---------- */
.sp-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
.sp-kopf .gross { flex: 1 1 100%; min-height: 64px; font-size: 22px; font-weight: 600; }
.sp-hinweis { flex: 1 1 100%; font-size: 17px; line-height: 1.3; color: var(--tinte-2); }
.sp-spieler { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; max-height: 132px; overflow-y: auto; }
.sp-person { display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border: 1px solid var(--linie, #3a4a5a); border-radius: 999px; font-size: 15px; }
.sp-person.weg .sp-name { opacity: 0.5; }
.sp-raus { min-height: 36px; padding: 0 12px; border-radius: 999px; font-size: 14px; }
.sp-pin-feld { flex: 1 1 180px; min-height: 56px; font-size: 24px; letter-spacing: 0.3em; text-align: center; }
.sp-pin .gross { flex: 1 1 180px; }
.sp-pin-fehler { flex: 1 1 100%; color: #ff8a80; font-size: 16px; }
.sp-status { font-size: 16px; color: var(--tinte-2); flex: 1 1 auto; }
.sp-status b { color: var(--akzent); font-size: 20px; letter-spacing: 0.06em; }
#spiel-ende { padding: 0 14px; font-size: 15px; }
#spiel-ende.sicher { background: #a8382a; color: #fff; border-color: #a8382a; }
.sp-mitte { display: grid; grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); gap: 8px; min-height: 0; flex: 1 1 auto; }
.sp-liste { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; min-height: 0; max-height: 100%; scrollbar-width: thin; }
.sp-zeile { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 6px; text-align: left; padding: 4px 8px; min-height: 44px; font-size: 14px; line-height: 1.15; flex: none; }
.sp-zeile b { color: var(--akzent); font-size: 15px; }
.sp-zeile.an b { color: #fff; }
.sp-zeile.offen { box-shadow: inset 4px 0 0 #a8382a; }
.sp-leer { font-size: 15px; color: var(--tinte-2); padding: 8px; }
.sp-detail { overflow-y: auto; min-height: 0; padding: 8px 12px; background: #f6f6f5; border: 1px solid var(--rand); border-radius: 14px; display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin; }
.sp-frage { font-size: 17px; font-weight: 600; line-height: 1.22; }
.sp-ant { list-style: none; display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.2; }
.sp-ant li.richtig { color: var(--akzent); font-weight: 600; }
.sp-ant li b { display: inline-block; width: 18px; }
.sp-erk { font-size: 14px; line-height: 1.28; }
.sp-erk.klein { color: var(--tinte-2); }
.sp-quelle { font-size: 12px; color: var(--tinte-2); }
.sp-steuer { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); gap: 6px; align-items: stretch; flex: none; }
.sp-steuer > button { min-height: 52px; font-size: 16px; font-weight: 600; padding: 0 6px; }
.sp-cd { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--tinte-2); }
.sp-cd button { min-width: 44px; padding: 0 6px; font-size: 14px; }
.sp-cd span { margin-right: 2px; }
/* Spielleiste im Ablauf */
.sp-block { background: #fff; border: 2px solid var(--akzent); border-radius: 14px; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
.sp-block.ohne-pin { border-color: var(--rand); }
/* Ruhezustand: eine Zeile, Text links, ein Knopf rechts */
.sp-block.kompakt { flex-direction: row; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; }
.sp-block.kompakt .spb-status { flex: 1 1 auto; }
.sp-block.kompakt .gross { flex: 0 0 auto; min-height: 48px; font-size: 18px; padding: 0 22px; }
.spb-kopf { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.spb-kopf .spb-status { flex: 1 1 auto; }
.spb-kopf button { padding: 0 14px; }
.spb-kopf button.sicher { background: #a8382a; color: #fff; border-color: #a8382a; }
.sp-block .sp-pin { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-block .sp-pin-feld { min-height: 48px; font-size: 20px; flex: 1 1 140px; }
.sp-block .sp-pin .gross { flex: 2 1 200px; min-height: 48px; font-size: 18px; }
.spb-status { font-size: 13px; color: var(--tinte-2); }
.spb-status b { color: var(--akzent); letter-spacing: 0.04em; text-transform: uppercase; font-size: 12px; }
.spb-text { font-size: 15px; line-height: 1.25; }
.spb-zaehler { font-size: 17px; }
.spb-zaehler b { font-size: 28px; color: var(--akzent); font-variant-numeric: tabular-nums; }
.sp-block .gross { min-height: 56px; font-size: 20px; font-weight: 600; }
.sp-block button:not(.gross) { min-height: 44px; font-size: 16px; }
/* Hinweis (Toast) */
.toast { position: fixed; z-index: 30; left: 50%; top: 10px; transform: translateX(-50%); max-width: min(92vw, 640px); background: #a8382a; color: #fff; font-size: 17px; font-weight: 600; padding: 10px 18px; border-radius: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); pointer-events: none; }
.toast.alt { background: var(--tinte); }

.spiel-feld { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; }

/* ---------- Lebenszeichen: Quittung des Boards und Warnband ---------- */
.quittung { font-size: 14px; font-weight: 600; color: var(--akzent); overflow: hidden; text-overflow: ellipsis; max-width: 42ch; }
.quittung.warte { color: var(--tinte-2); font-weight: 400; }
.quittung.fehler { color: #a8442f; }
.warnband {
  position: static; order: -1; flex: none; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 18px;
  min-height: 56px; padding: 6px 16px; background: #a8442f; color: #fff; font-size: 18px; font-weight: 600; text-align: center;
}
.warnband[hidden] { display: none; }
.warnband button { min-height: 44px; padding: 0 20px; background: #fff; color: #a8442f; border-color: #fff; font-size: 18px; font-weight: 600; }

/* Anleitung: kleiner Verweis in der Kopfzeile und auf der Kopplungsseite */
.status a.neu { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; font-size: 13px; border-radius: 10px; color: var(--tinte); text-decoration: none; background: rgba(255, 255, 255, 0.7); border: 1px solid var(--rand); }
.anleitung-hinweis { margin: 18px 0 0; font-size: 17px; }
.anleitung-hinweis a { color: var(--akzent); font-weight: 500; }