/* =====================================================================
   lab - werkzeuge/raetsel/app.css
   Rätsel-Werkstatt: Eingabe links, druckfertige Blätter auf dem Pult
   rechts. Konventionen (AGENTS.md §5, Blatt-Look wie Rechenblatt):
     - Alle Klassen mit Prefix .lab_ (hier .lab_ra_ für Rätsel-Werkstatt)
     - Keine harten Farben, nur Variablen aus css/colors.css
     - Die Blätter bleiben weißes Papier (--lab-tv-blatt) mit dunkler
       Tinte (--lab-tv-blatt-text); Akzent ist das Schulgrün
       (--lab-tv-blatt-akzent, in beiden Modi gleich, druckt als
       deutliches Grau - S/W-Druck bleibt lesbar).
     - Jede Blattseite ist eigenes Papier in A4-Proportion (nur
       Vorschau; Druck und Exporte verteilen die Seiten selbst).
   ===================================================================== */

.lab_ra_layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin-top: 1.25rem;
}

@media (min-width: 64rem) {
  .lab_ra_layout {
    grid-template-columns: 26rem minmax(0, 1fr);
    align-items: start;
  }
}

/* ---------- Eingabeseite ---------- */

.lab_ra_formular {
  background: var(--ct-color);
  border: var(--lab-border);
  border-radius: 12px;
  padding: 1.1rem 1.2rem 1.25rem;
  box-shadow: var(--lab-shadow-1);
}

.lab_ra_titelfeld {
  display: block;
  margin: 1rem 0 0.3rem;
  font-weight: 600;
  font-size: 0.92rem;
}

.lab_ra_titeleingabe {
  font-weight: 600;
}

.lab_ra_tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  border-bottom: 1px solid var(--lab-border-color);
  padding-bottom: 0.6rem;
}

.lab_ra_tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--grey600-color);
  padding: 0.38rem 0.75rem;
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
}

.lab_ra_tab:hover { color: var(--blk-color); }

.lab_ra_tab[aria-selected="true"] {
  background: var(--div-color);
  border-color: var(--lab-border-color);
  color: var(--blk-color);
  font-weight: 600;
}

.lab_ra_tab .lab_icon { flex: none; }

/* Gruppierte Optionen */

.lab_ra_gruppe {
  border: 1px solid var(--lab-border-color);
  border-radius: 10px;
  padding: 0.75rem 0.9rem 0.85rem;
  margin: 0.9rem 0 0;
}

.lab_ra_gruppe legend {
  padding: 0 0.4rem;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  color: var(--grey600-color);
}

.lab_ra_gruppe label[for] {
  display: block;
  margin: 0.45rem 0 0.25rem;
  font-size: 0.9rem;
  color: var(--grey600-color);
}

.lab_ra_gruppe select { width: auto; max-width: 100%; }

.lab_ra_zaehler {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--grey600-color);
}

.lab_ra_wahl {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.92rem;
  margin: 0.3rem 1.1rem 0.15rem 0;
}

.lab_ra_zeile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.lab_ra_zeile label { margin: 0; font-size: 0.9rem; color: var(--grey600-color); }

.lab_ra_zeile input[type="number"] { width: 4.2rem; }

.lab_ra_zeilentext { font-size: 0.9rem; color: var(--grey600-color); }

.lab_ra_zeile .lab_btn { margin-top: 0.4rem; }

.lab_ra_meldung { margin-top: 0.9rem; }

/* ---------- KI & Austausch (rein lokal, wie Deutschblatt) ---------- */

.lab_ra_ki summary {
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  color: var(--grey600-color);
  cursor: pointer;
}

.lab_ra_ki textarea {
  width: 100%;
  margin-top: 0.6rem;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.82rem;
  background: var(--bd-color);
  color: var(--blk-color);
  border: var(--lab-border);
  border-radius: 8px;
  padding: 0.6rem;
}

.lab_ra_ki_knopfzeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.lab_ra_ki .lab_hinweis { margin-bottom: 0; }

/* Wortkasten des Lückentexts */

.lab_ra_lk_woerter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.7rem;
  max-height: 13rem;
  overflow-y: auto;
  border: var(--lab-border);
  border-radius: 8px;
  padding: 0.6rem;
  background: var(--bd-color);
}

.lab_ra_lk_wort {
  border: 1px solid var(--lab-border-color);
  border-radius: 6px;
  background: var(--ct-color);
  color: var(--blk-color);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.12rem 0.5rem;
  cursor: pointer;
}

.lab_ra_lk_wort:hover { border-color: var(--bt-color); }

.lab_ra_lk_wort[aria-pressed="true"] {
  background: var(--bt-color);
  border-color: var(--bt-color);
  color: var(--bt-f-color);
  font-weight: 600;
}

.lab_ra_lk_wort[disabled] {
  color: var(--grey600-color);
  opacity: 0.55;
  cursor: default;
}

/* ---------- Vorschau: Leiste und Pult ---------- */

.lab_ra_leiste {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}

.lab_ra_leiste .lab_btn { display: inline-flex; align-items: center; gap: 0.45rem; }

.lab_ra_leiste_frei { flex: 1 1 auto; }

.lab_ra_leiste_text { font-size: 0.88rem; color: var(--grey600-color); }

.lab_ra_leiste_hinweis { flex-basis: 100%; }

.lab_ra_leiste label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--grey600-color);
}

.lab_ra_leiste select { width: auto; }

.lab_ra_leiste [aria-pressed="true"] {
  border-color: var(--bt-color);
  color: var(--bt-color);
}

.lab_ra_pult {
  background: var(--div-color);
  border: var(--lab-border);
  border-radius: 14px;
  padding: clamp(0.8rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

/* ---------- Blattvorschau: der Stapel selbst ist transparent - JEDER
     Seite ist eigenes Papier in A4-Proportion (wie Rechenblatt und
     Textverarbeitung). Kurzer Inhalt bekommt die volle Blatthoehe,
     langer Inhalt (große Gitter) waechst darueber hinaus. Gilt nur der
     Vorschau: Druck und Exporte verteilen die Seiten selbst. ---------- */

.lab_ra_blatt {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  min-height: 0;
  width: min(100%, 49rem);
}

.lab_ra_seite {
  background: var(--lab-tv-blatt);
  color: var(--lab-tv-blatt-text);
  border: var(--lab-border);
  border-radius: 10px;
  box-shadow: var(--lab-shadow-1);
  padding: 1.7rem 1.9rem;
  min-height: 20rem;
  aspect-ratio: 0.707;
}

.lab_ra_seite + .lab_ra_seite { margin-top: 1.4rem; }

/* Eine Blattseite pro Variante (im Druck mit Seitenumbruch). */

.lab_ra_seite { break-after: page; }

.lab_ra_seite:last-of-type { break-after: auto; }

.lab_ra_blatt_leer {
  color: var(--grey600-color);
  text-align: center;
  padding: 5rem 1rem;
}

.lab_ra_blatt_leer .lab_icon {
  opacity: 0.45;
  margin-bottom: 0.8rem;
}

/* Blattkopf: helle Waschung mit Akzent-Kante, Titel links, Fach/Klasse
     rechts (wie Rechenblatt). Die Waschung ist bewusst sehr hell - im
     S/W-Druck bleibt sie ein feines Grau und stoert nicht. */

.lab_ra_blattkopf {
  margin: 0 0 1.3rem;
  text-align: left;
}

.lab_ra_kopfbox {
  background: var(--lab-tv-blatt-akzent-zart);
  border-left: 4px solid var(--lab-tv-blatt-akzent);
  border-radius: 10px;
  padding: 1rem 1.2rem 0.95rem;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.lab_ra_kopfreihen {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.2rem;
  flex-wrap: wrap;
}

.lab_ra_titel {
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin: 0;
}

.lab_ra_variante {
  display: inline-block;
  border: 1.5px solid var(--lab-tv-blatt-akzent);
  color: var(--lab-tv-blatt-akzent);
  background: var(--lab-tv-blatt);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.12rem 0.7rem;
  margin-left: 0.55rem;
  vertical-align: 0.25em;
  white-space: nowrap;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.lab_ra_untertitel {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: var(--lab-tv-blatt-text);
  opacity: 0.68;
}

.lab_ra_fachklasse {
  margin: 0;
  font-size: 0.92rem;
  color: var(--lab-tv-blatt-text);
  opacity: 0.68;
  white-space: nowrap;
}

.lab_ra_namedatum {
  display: flex;
  justify-content: space-between;
  gap: 2.5rem;
  font-size: 0.95rem;
  margin: 0.9rem 0 0.2rem;
  text-align: left;
}

.lab_ra_namedatum span { flex: 1; border-bottom: 1.5px solid var(--lab-tv-blatt-text); padding: 0 0.4rem 0.18rem; }

/* Fach und Klasse unter dem Blatt-Titel (nur wenn ausgefuellt). */
.lab_ra_fachklasse {
  margin: 0.3rem 0 0;
  font-size: 0.9rem;
  color: var(--lab-tv-blatt-text);
  opacity: 0.75;
}

/* ---------- Kopf-Stile: Waschung (Vorgabe) und weitere Varianten,
     modern (Akzentfarbe) und klassisch (reine Tinte). Alle Varianten
     behalten die Struktur (blattkopf > kopfbox > kopfreihen mit
     titel + fachklasse, untertitel) - nur die Optik der Kopfbox
     bzw. der Seite aendert sich. Papier bleibt weiss - im S/W-Druck
     bleibt alles lesbar. ---------- */

/* Linie: Titel auf einer kräftigen Grundlinie, keine Waschung. */
.lab_ra_kopf_linie .lab_ra_kopfbox {
  background: none;
  border-left: 0;
  border-radius: 0;
  padding: 0.1rem 0 0.55rem;
  border-bottom: 2.5px solid var(--lab-tv-blatt-akzent);
}

/* Farbband: durchgehende Akzent-Flaeche, helle Schrift darauf. */
.lab_ra_kopf_band .lab_ra_kopfbox {
  background: var(--lab-tv-blatt-akzent);
  border-left: 0;
  border-radius: 10px;
  padding: 0.85rem 1.2rem 0.8rem;
}

.lab_ra_kopf_band .lab_ra_titel,
.lab_ra_kopf_band .lab_ra_fachklasse {
  color: var(--lab-tv-blatt);
  opacity: 1;
}

.lab_ra_kopf_band .lab_ra_untertitel {
  color: var(--lab-tv-blatt);
  opacity: 0.85;
}

.lab_ra_kopf_band .lab_ra_variante {
  border-color: var(--lab-tv-blatt);
  color: var(--lab-tv-blatt);
  background: transparent;
}

/* Schlicht: nur Schrift, keine Flaeche, keine Kante. */
.lab_ra_kopf_schlicht .lab_ra_kopfbox {
  background: none;
  border-left: 0;
  border-radius: 0;
  padding: 0.1rem 0 0;
}

/* Karte (modern): weisse Karte mit feiner Tinten-Kante und kurzem
   Akzent-Strich oben - klar und flach. */
.lab_ra_kopf_karte .lab_ra_kopfbox {
  background: none;
  border: 1.25px solid var(--lab-tv-blatt-text);
  border-radius: 10px;
  padding: 1rem 1.2rem 0.95rem;
  position: relative;
}

.lab_ra_kopf_karte .lab_ra_kopfbox::before {
  content: "";
  position: absolute;
  top: -1.25px;
  left: 1.2rem;
  width: 3.2rem;
  height: 4px;
  background: var(--lab-tv-blatt-akzent);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* Balken (modern): kraeftige Akzent-Leiste ueber dem Titel. */
.lab_ra_kopf_balken .lab_ra_kopfbox {
  background: none;
  border-left: 0;
  border-radius: 0;
  border-top: 7px solid var(--lab-tv-blatt-akzent);
  padding: 0.6rem 0 0.35rem;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* Doppellinie (klassisch): dicke Tintenlinie mit feiner Linie
   darunter - die klassische Schulbuch-Grundlinie. */
.lab_ra_kopf_doppellinie .lab_ra_kopfbox {
  background: none;
  border-left: 0;
  border-radius: 0;
  border-bottom: 3px solid var(--lab-tv-blatt-text);
  padding: 0.1rem 0 0.45rem;
  position: relative;
}

.lab_ra_kopf_doppellinie .lab_ra_kopfbox::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1.5px;
  background: var(--lab-tv-blatt-text);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* Kopfkasten (klassisch): Kopf im Doppelrahmen. */
.lab_ra_kopf_kopfkasten .lab_ra_kopfbox {
  background: none;
  border: 4px double var(--lab-tv-blatt-text);
  border-radius: 0;
  padding: 0.7rem 1.1rem 0.65rem;
}

/* Seitenrahmen (klassisch): feiner Doppelrahmen um die GANZE Seite
   (Klasse lab_ra_rahmenseite an der Blattseite, gesetzt in
   blattBauen), der Kopf selbst bleibt schriftlich wie "Schlicht". */
.lab_ra_kopf_rahmen .lab_ra_kopfbox {
  background: none;
  border-left: 0;
  border-radius: 0;
  padding: 0.1rem 0 0;
}

.lab_ra_rahmenseite {
  border: 4px double var(--lab-tv-blatt-text);
  border-radius: 0;
}

/* Titel-Ausrichtung Mitte: Kopfreihe stapelt, alles zentriert. */
.lab_ra_kopf_mitte { text-align: center; }

.lab_ra_kopf_mitte .lab_ra_kopfreihen {
  flex-direction: column;
  align-items: center;
}

.lab_ra_kopf_mitte .lab_ra_fachklasse { margin-top: 0.15rem; }

/* Kopfzeile: kleine Grossbuchstaben-Zeile ueber dem Titel
     (Schulname, Thema, ...). Auf dem Farbband hell statt gruen. */
.lab_ra_kopfzeile {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lab-tv-blatt-akzent);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.lab_ra_kopf_band .lab_ra_kopfzeile { color: var(--lab-tv-blatt); }

/* Richtungshinweis der Wortsuche und Uebrig-Zeile des Kreuzgitters. */
.lab_ra_richtungen {
  text-align: center;
  font-size: 0.85rem;
  color: var(--lab-tv-blatt-text);
  opacity: 0.75;
  margin: 0.7rem 0 0;
}

.lab_ra_uebrig {
  text-align: center;
  font-size: 0.85rem;
  color: var(--lab-tv-blatt-text);
  opacity: 0.75;
  margin: 0.7rem auto 0;
  max-width: 40rem;
}

/* Rahmen um Rätsel-Gitter */

.lab_ra_rahmen {
  display: inline-block;
  border: 2px solid var(--lab-tv-blatt-text);
  border-radius: 10px;
  padding: 7px;
}

.lab_ra_rahmen_mitte { text-align: center; }

/* Sehr große Gitter dürfen bei schmalen Schirmen seitlich scrollen,
   statt die Seite aufzuweiten. */
.lab_ra_rahmen_mitte { overflow-x: auto; max-width: 100%; }

@media (max-width: 30rem) {
  .lab_ra_pult { padding: 0.6rem; }

  .lab_ra_seite { padding: 1rem 1rem 1.2rem; min-height: 14rem; }

  .lab_ra_woerterliste { columns: 2; column-gap: 1.2rem; }

  .lab_ra_ws_gitter td,
  .lab_ra_kz_gitter td {
    width: 1.3rem;
    height: 1.3rem;
    min-width: 1.3rem;
    font-size: 0.78rem;
  }

  .lab_ra_rahmen { padding: 4px; border-radius: 8px; }
}

/* Wortsuche */

.lab_ra_ws_gitter {
  border-collapse: collapse;
  margin: 0 auto;
  font-variant-numeric: tabular-nums;
}

.lab_ra_ws_gitter td {
  width: 1.7rem;
  height: 1.7rem;
  text-align: center;
  vertical-align: middle;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid var(--lab-tv-blatt-linie);
  padding: 0;
}

/* Treffer auf der Lösungsseite: helle Akzent-Waschung, Buchstabe in
   der Akzentfarbe - im S/W-Druck ein deutliches Grau auf Hellgrau. */

.lab_ra_ws_treffer {
  background: var(--lab-tv-blatt-akzent-zart);
  color: var(--lab-tv-blatt-akzent);
  font-weight: 700;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* Blocks mit Überschrift auf dem Blatt (Wortliste, Hinweise, Sammlung) */

.lab_ra_block {
  margin: 1.5rem auto 0;
  max-width: 40rem;
}

.lab_ra_block h3 {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
  color: var(--lab-tv-blatt-akzent);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.lab_ra_woerterliste {
  columns: 3;
  column-gap: 1.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.98rem;
}

.lab_ra_woerterliste li {
  break-inside: avoid;
  padding-left: 0.9rem;
  position: relative;
  margin-bottom: 0.25rem;
}

.lab_ra_woerterliste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.45rem;
  height: 2px;
  background: var(--lab-tv-blatt-akzent);
  opacity: 0.8;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* Kreuzgitter: gefuehrte Zeilen - zwei Felder (Wort, Hinweis) statt
     WORT|Hinweis-Syntax. Die Zeilen schreiben dieselbe Textarea und
     damit denselben Stand wie vorher; der Text-Kasten bleibt hinter
     einem Aufklapper fuer Einfuegen und Massenbearbeitung. */

.lab_ra_kz_zeilen {
  display: grid;
  gap: 0.4rem;
}

.lab_ra_kz_zeile {
  display: grid;
  grid-template-columns: minmax(6.5rem, 9.5rem) minmax(0, 1fr) auto;
  gap: 0.4rem;
  align-items: center;
}

.lab_ra_kz_zeile input { margin: 0; }

.lab_ra_kz_wort {
  font-weight: 600;
  text-transform: uppercase;
}

.lab_ra_kz_weg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--grey600-color);
  padding: 0.32rem;
  cursor: pointer;
}

.lab_ra_kz_weg:hover {
  color: var(--blk-color);
  border-color: var(--lab-border-color);
  background: var(--div-color);
}

.lab_ra_kz_zeile_neu { margin-top: 0.55rem; }

.lab_ra_kz_text { margin-top: 0.7rem; }

.lab_ra_kz_text summary {
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--grey600-color);
}

.lab_ra_kz_text textarea { width: 100%; margin-top: 0.55rem; }

/* Kreuzgitter - vier Gitter-Stile (Wahl im Formular, Klasse auf der
   Tabelle). Grundgedanke: Raezelzellen klar vom Leerraum trennen, damit
   das Gitter auf einen Blick lesbar ist.
     felder  (Vorgabe)  nur Raezelzellen mit Rahmen, Leerraum unsichtbar
     heft               Leerraum schwarz gefuellt (Raetselheft-Look)
     schreib            Raezelzellen mit grauer Schreibflaeche
     raster             ganzer Kasten mit feinen Linien (Hilfsraster)   */

.lab_ra_kz_gitter {
  border-collapse: collapse;
  margin: 0 auto;
}

.lab_ra_kz_gitter td {
  width: 1.9rem;
  height: 1.9rem;
  min-width: 1.9rem;
  border: 1px solid transparent;
  text-align: center;
  vertical-align: middle;
  font-weight: 600;
  font-size: 1.05rem;
  padding: 0;
  position: relative;
}

/* 2px statt 1px - wichtig gegen Loecher in den Rahmen: bei
   border-collapse entscheiden gleichbreite Kanten nach Baumordnung,
   die transparente 1px-Kante eines leeren Nachbarn gewann also gegen
   die dunkle Zellkante (jede vierte Kante war weg); 1.4px rundete Chrome
   auf 1px und der Gleichstand blieb. Im Kollaps gewinnt die BREITERE
   Kante - 2px ziehen damit garantiert und bleiben druckklar. */
.lab_ra_kz_zelle {
  border: 2px solid var(--lab-tv-blatt-text) !important;
  background: var(--lab-tv-blatt);
}

/* Schreibfelder: zarte graue Flaeche als Schreibhilfe in der Zelle. */
.lab_ra_kz_stil_schreib .lab_ra_kz_zelle { background: var(--lab-tv-blatt-flaeche); }

/* Raetselheft: Leerraum in Tinte gefuellt; die Raezelzellen bleiben
   weiss. print-color-adjust haelt die schwarzen Bloecke auch im Druck. */
.lab_ra_kz_stil_heft .lab_ra_kz_aus {
  background: var(--lab-tv-blatt-text);
  border-color: var(--lab-tv-blatt-text);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* Hilfsraster: alle Zellen mit feiner Linie (fruehere Darstellung). */
.lab_ra_kz_stil_raster td { border-color: var(--lab-tv-blatt-linie); }

/* Loesungszellen behalten die Akzent-Waschung in allen Stilen. */
.lab_ra_kz_gitter .lab_ra_kz_zelle.lab_ra_ws_treffer {
  background: var(--lab-tv-blatt-akzent-zart);
}

/* Ohne Hilfsraster bleibt vom Rahmen-Span nichts sichtbar - die
   Raezelzellen stehen frei im Leerraum. */
.lab_ra_kz_rahmen_ohne {
  border-color: transparent;
  border-radius: 0;
  padding: 0;
}

.lab_ra_kz_nr {
  position: absolute;
  top: 0;
  left: 1.5px;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--lab-tv-blatt-text);
}

.lab_ra_kz_spalten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.2rem 2rem;
  max-width: 44rem;
  margin: 0 auto;
}

@media (max-width: 40rem) {
  .lab_ra_kz_spalten { grid-template-columns: 1fr; }
}

.lab_ra_kz_spalten h3 { margin-top: 0.6rem; }

.lab_ra_kz_liste {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
}

.lab_ra_kz_liste li {
  padding-left: 1.9rem;
  position: relative;
  margin-bottom: 0.4rem;
  break-inside: avoid;
}

/* Die Nummer kommt aus dem Blatt (span) und ist DIESELBE wie die in
   der Startzelle des Gitters - waagrecht und senkrecht teilen sie sich
   wie in jedem Kreuzwortraetsel. */
.lab_ra_kz_listnr {
  position: absolute;
  left: 0;
  top: 0.08em;
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 0.15rem;
  border: 1.5px solid var(--lab-tv-blatt-akzent);
  border-radius: 999px;
  color: var(--lab-tv-blatt-akzent);
  background: var(--lab-tv-blatt);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.lab_ra_kz_buchstaben {
  color: var(--lab-tv-blatt-text);
  opacity: 0.6;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* Lückentext */

.lab_ra_lk_text {
  font-size: 1.02rem;
  line-height: 2;
  max-width: 42rem;
  margin: 0 auto;
}

.lab_ra_l_luecke {
  display: inline-block;
  min-width: 4.6rem;
  border-bottom: 1.5px solid var(--lab-tv-blatt-text);
  background: var(--lab-tv-blatt-flaeche);
  border-radius: 4px 4px 0 0;
  text-align: center;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0 0.35rem;
}

.lab_ra_l_nr {
  color: var(--lab-tv-blatt-akzent);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* Lösungswort der Lösungsseite: in der Akzentfarbe unterstrichen -
   im S/W-Druck hebt sich der Unterstrich als dunkles Grau. */

.lab_ra_l_loesungswort {
  font-weight: 700;
  color: var(--lab-tv-blatt-akzent);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.lab_ra_chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
  margin: 0;
}

.lab_ra_chip {
  border: 1px solid var(--lab-tv-blatt-text);
  border-radius: 999px;
  padding: 0.16rem 0.75rem;
  font-size: 0.92rem;
  font-weight: 600;
}

/* ---------- Blattfuss ---------- */

.lab_ra_blattfuss {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--lab-tv-blatt-linie);
  margin-top: 1.8rem;
  padding-top: 0.45rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--lab-tv-blatt-text);
  opacity: 0.55;
}

/* ---------- Lösungsseite ---------- */

/* Die Lösungsseite ist eine eigene Blattseite (eigenes Papier in der
   Vorschau, Seitenumbruch im Druck); der "Lösung zeigen"-Knopf steuert
   die Sichtbarkeit in der Vorschau, die Checkbox "Lösung drucken" den
   Druck. Auf ihr steht der Blattkopf als Waschung mit dem Untertitel
   "Lösung" - kein gesonderter Titel mehr. */

.lab_ra_vorschau_aus { display: none; }

/* ---------- Druck: A4 mit druckerfreundlichen Rändern ----------
     15 mm an allen Seiten bleiben auch bei Tintenstrahl- und
     Kopierern knapp ausserhalb des Papiervorschubs. */

@page {
  size: A4;
  margin: 15mm;
}

@media print {
  .lab_kopf,
  .lab_ra_formular,
  .lab_ra_ki,
  .lab_ra_leiste { display: none !important; }

  /* Die Plattform-Hülle legt keinen Zusatzrand über den Papierrand:
     der Satzspiegel kommt allein aus der @page-Regel (15 mm). Die
     Kette wird zwingend auf die Papierbreite gestreckt - einzelne
     Druck-Engines behalten sonst Vorschau-Masse bei (Falle aus dem
     Rechenblatt: ohne feste Breite schrumpft das Blatt auf ~130 mm). */
  .lab_main,
  .lab_shell,
  .lab_ra_layout,
  .lab_ra_vorschau,
  .lab_ra_pult {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .lab_ra_layout { display: block; margin: 0; }

  .lab_ra_pult {
    border: 0;
    border-radius: 0;
    padding: 0;
    background: none;
    display: block;
  }

  /* Papier-Optik und feste Blatthoehe sind nur Vorschau: im Druck
     liefert die Seite die Raender. Die Breite steht in Millimetern
     (180 mm = A4 minus 15 mm Rand), weil die Druckpipeline prozentuale
     oder auto-Breiten im zentrierten Pult-Raster schrumpfen laesst. */
  .lab_ra_blatt,
  .lab_ra_seite {
    width: 180mm !important;
    max-width: none !important;
  }

  .lab_ra_seite {
    background: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    min-height: 0;
    aspect-ratio: auto;
  }

  /* Seitenrahmen-Stil: den Doppelrahmen im Druck mitnehmen (die
     Basis-Regel darueber loescht alle Seiten-Rahmen); das innere
     Polster haelt den Inhalt vom Rahmen fern, die Mindesthoehe
     schliesst den Rahmen am unteren Satzend (2 mm Luft gegen
     Rundungs-Aufseiten). */
  .lab_ra_seite.lab_ra_rahmenseite {
    border: 4px double var(--lab-tv-blatt-text);
    border-radius: 0;
    padding: 2mm 3mm;
    min-height: 265mm;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .lab_ra_blatt_leer { display: none; }

  /* Lösungsseite nur im Druck, wenn gewünscht; in der Vorschau steuert
     der "Lösung zeigen"-Knopf die Sichtbarkeit (die Regel gewinnt auch
     gegen lab_ra_vorschau_aus). */
  .lab_ra_loesungsseite { display: none; }
  .lab_ra_mit_loesung .lab_ra_loesungsseite {
    display: block;
    break-before: page;
  }
}

/* Blatt-Hilfe: mit dem App-CSS auch in HTML/PDF verfügbar. */
.lab_bh_gruppe { min-width: 0; margin: 0 0 1rem; padding: .8rem; border: 1px solid var(--lab-border-color); border-radius: .6rem; }
.lab_bh_gruppe select, .lab_bh_gruppe textarea { width: 100%; min-width: 0; max-width: 100%; }
.lab_bh_gruppe label { display: block; margin-top: .5rem; }
.lab_bh_hinweis { font-size: .8rem; color: var(--grey600-color); margin: .5rem 0; }
.lab_bh_eigene { margin-top: .7rem; }
.lab_bh_zeile { font-size: .85em; line-height: 1.5; margin: .25em 0 .65em; color: var(--lab-tv-blatt-text); font-style: normal; font-weight: normal; white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: isolate; }
.lab_bh_zeile[dir="rtl"] { text-align: right; }
.lab_bh_zeile[hidden], .lab_bh_eigene[hidden] { display: none; }
@media print { .lab_bh_gruppe { display: none; } }
/* Lange Fachnamen und Papier-Ränder dürfen die mobile Blattansicht
   nicht über den Bildschirm schieben. Druckmaße bleiben unberührt. */
.lab_gs_fachklasse { white-space: normal; overflow-wrap: anywhere; }
.lab_gs_titel_zeile { flex-wrap: wrap; }
.lab_tb_gruppe, .lab_tb_karte { min-width: 0; }
.lab_tb_formular select, .lab_tb_formular input, .lab_tb_formular textarea { max-width: 100%; }
.lab_gs_kopfbox, .lab_geo_kopfbox { background: var(--lab-tv-blatt-flaeche); }
@media screen and (max-width: 40rem) {
  .lab_gs_seite, .lab_geo_seite { padding: 1rem; }
  .lab_gs_namedatum { gap: .5rem; flex-wrap: wrap; }
  .lab_rb_seite, .lab_sa_seite, .lab_gb_seite, .lab_uh_seite,
  .lab_db_seite, .lab_en_seite, .lab_tb_seite, .lab_ra_seite {
    aspect-ratio: auto; height: auto; display: flow-root;
  }
  .lab_rb_aufgaben, .lab_sa_aufgaben, .lab_db_aufgaben, .lab_en_aufgaben { column-count: 1 !important; }
  .lab_rb_blattfuss, .lab_sa_blattfuss, .lab_gb_blattfuss, .lab_uh_blattfuss,
  .lab_db_blattfuss, .lab_en_blattfuss, .lab_tb_blattfuss, .lab_ra_blattfuss { position: static; }
}