/* Dein Code, dein Spiel: Schritte, Eingabefelder, Befunde und Spielbühne (STILBUCH.md, „Schritte“ und „Spielbühne“).
   Tafel, Buttons, Links und Fuß kommen aus stilbuch.css. */
.schritte { max-width: 860px; display: grid; gap: var(--raum-5); padding: 0; list-style: none; }
.schritt, .hilfe { display: grid; gap: var(--raum-2); min-width: 0; }
.hilfe { max-width: 860px; margin-top: var(--raum-6); }
.schritt-titel { display: flex; align-items: center; gap: var(--raum-2); font-size: clamp(1.5rem, 2.4vw, 1.875rem); line-height: 1.1; }
.schritt-nr { width: 1.6em; height: 1.6em; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--kreide); background: var(--tafel); font-size: .8em; line-height: 1; }
.schritt-text { color: var(--tinte-leise); }

.feld-titel { font-weight: 700; }
.feld { width: 100%; min-height: 48px; padding: var(--raum-2); border: 2px solid var(--tinte-leise); border-radius: 0; color: var(--tinte); background: var(--grund); font: inherit; font-size: 1rem; line-height: 1.45; resize: vertical; }
.feld::placeholder { color: var(--tinte-leise); opacity: 1; }
/* Code: Systemschrift in fester Breite, keine Umbrüche; das Feld scrollt selbst, die Seite nie. 16 px gegen den iOS-Zoom. */
.code { min-height: 10rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; overflow-wrap: normal; overflow: auto; tab-size: 2; }

.knoepfe { display: flex; flex-wrap: wrap; gap: var(--raum-2); }
.knoepfe [hidden] { display: none; }
.kuerzel { display: grid; gap: var(--raum-1); justify-items: start; }
.kuerzel-feld { width: 12em; max-width: 100%; }
/* Gespeichertes Spiel laden: Nebenweg in eigener Zeile unter den Buttons, im Stil eines Textlinks (Klickfläche 48 px).
   Das Dateifeld bleibt bedienbar (Tab, Leertaste); sichtbar ist nur sein Label. */
.laden { position: relative; }
.datei-wahl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; }
.laden-link { min-height: 48px; display: inline-flex; align-items: center; color: var(--tafel); font-weight: 700; text-decoration: underline; text-decoration-thickness: max(1px, .0625rem); text-underline-offset: .15em; cursor: pointer; }
.laden-link:hover { text-decoration-thickness: max(3px, .1875rem); }
.datei-wahl:focus-visible + .laden-link { outline: 3px solid var(--tafel); outline-offset: 3px; }

.status { color: var(--tafel); font-weight: 700; overflow-wrap: anywhere; }
/* Leere Rückmeldung bleibt als Live-Region im Baum, nimmt aber keinen Platz ein. */
.status:empty { margin-top: calc(-1 * var(--raum-2)); }
.manuell { display: grid; gap: var(--raum-1); }
.manuell[hidden], .spielfehler[hidden] { display: none; }
.ki-wege { padding: 0; list-style: none; color: var(--tinte-leise); }
.ki-wege strong { color: var(--tinte); font-weight: 700; }
.ki-wege a { min-height: var(--ziel); display: inline-flex; align-items: center; font-weight: 700; }

.befunde { display: grid; gap: var(--raum-1); padding: 0; list-style: none; }
.befunde li { padding-left: var(--raum-2); border-left: 3px solid var(--linie); color: var(--tinte-leise); overflow-wrap: anywhere; }
.befunde li.problem { border-left-color: var(--tafel); color: var(--tinte); font-weight: 600; }
.spielfehler { padding-left: var(--raum-3); border-left: 3px solid var(--tafel); }
.spielfehler ul { margin-top: var(--raum-1); padding-left: 1.2em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--gr-klein); overflow-wrap: anywhere; }
.kopierhilfe { position: fixed; top: 0; left: -9999px; }

/* Werkstatt: Stationen als Knopfreihe (wie Filter), Code und Vorschau; ab 740 px (iPad hochkant) nebeneinander. Eine Station passt
   auf ein 16:9-Board (1280×720 und größer) ohne Scrollen. */
.werkstatt { display: grid; gap: var(--raum-2); margin-top: var(--raum-6); }
.werkstatt-station { display: grid; gap: var(--raum-2); min-width: 0; }
.werkstatt-station[hidden], .werkstatt-merke[hidden] { display: none; }
.stationen { display: flex; flex-wrap: wrap; gap: var(--raum-2); }
.werkstatt-aufgabe { font-weight: 700; }
.werkstatt-merke { color: var(--tinte-leise); }
.werkstatt :is(.werkstatt-aufgabe, .werkstatt-merke) code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--tinte); }
.werkstatt-arbeit { display: grid; gap: var(--raum-3); min-width: 0; }
.werkstatt-code, .werkstatt-vorschau { display: flex; flex-direction: column; gap: var(--raum-1); min-width: 0; }
.zeichenleiste { display: flex; flex-wrap: wrap; gap: var(--raum-1); }
.zeichenleiste .zeichen { min-width: 48px; padding: 0 var(--raum-2); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.25rem; }
.werkstatt-feld { height: 14rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
.werkstatt-rahmen-box { flex: 1 1 auto; display: flex; min-height: 12rem; border: 2px solid var(--tinte-leise); }
.werkstatt-rahmen { flex: 1 1 auto; display: block; width: 100%; min-height: 12rem; border: 0; background: var(--kreide); }
@media (min-width: 740px) {
  .werkstatt-arbeit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .werkstatt-vorschau .feld-titel { min-height: 48px; display: flex; align-items: center; }
}

/* Spielbühne: deckt das ganze Fenster ab (auch ohne Vollbild-API), oben die Leiste mit „Zurück“. */
.spielbuehne { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: var(--tafel-tief); }
.spielbuehne[hidden] { display: none; }
.tafel.spielleiste { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-1) var(--raum-3); padding: max(var(--raum-1), env(safe-area-inset-top)) max(var(--raum-2), env(safe-area-inset-right)) var(--raum-1) max(var(--raum-2), env(safe-area-inset-left)); }
.tafel .zurueck { min-height: 56px; gap: var(--raum-1); padding: 0 26px 0 20px; font-size: 1.25rem; }
.tafel .zurueck svg { width: 1em; height: 1em; flex: none; }
.tafel .spielname { flex: 1 1 8em; min-width: 0; color: var(--kreide); font-family: var(--schrift-titel); font-size: var(--gr-kachel); font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.tafel .spielmeldung { color: var(--kreide-leise); font-weight: 600; }
.tafel .spielmeldung:empty, .tafel .fehler-knopf[hidden] { display: none; }
.spielrahmen { flex: 1 1 auto; display: block; width: 100%; min-height: 0; border: 0; background: var(--grund); }
.spielrahmen:focus { outline: none; }
html.spiel-offen, html.spiel-offen body { overflow: hidden; }

@media (max-width: 680px) {
  .schritte { gap: var(--raum-4); }
  .hilfe, .werkstatt { margin-top: var(--raum-5); }
}