/* =====================================================================
   lab - werkzeuge/deutschblatt/app.css
   Deutsch-Übungsblatt: Eingaben links, druckfertige Blätter rechts
   (Vorbild Rechenblatt-Ersteller). Konventionen (AGENTS.md §5):
     - Alle Klassen mit Prefix .lab_ (hier .lab_db_ für Deutschblatt)
     - Keine harten Farben, nur Variablen aus css/colors.css
     - Das Blatt bleibt in beiden Modi weiß (--lab-tv-blatt) und trägt
       dunkle Tinte (--lab-tv-blatt-text); der Akzent (--lab-tv-blatt-
       akzent) bleibt im S/W-Druck ein deutliches Mittelgrau.
   ===================================================================== */

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

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

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

.lab_db_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_db_titelfeld {
  display: block;
  margin: 1rem 0 0.3rem;
  font-weight: 600;
  font-size: 0.92rem;
}

.lab_db_titeleingabe {
  font-weight: 600;
}

/* ---------- Lehrplan-Vorlagen (oberhalb der Blatt-Arten) ---------- */

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

.lab_db_vorlagen_kopf {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.45rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--bt-color);
}

.lab_db_vorlagen_kopf .lab_icon { flex: none; }

.lab_db_vorlagen select { width: 100%; }

.lab_db_vorlagen_hinweis {
  margin: 0.45rem 0 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--grey600-color);
}

.lab_db_vorlagen_bezug {
  margin: 0.35rem 0 0;
  padding-left: 0.55rem;
  border-left: 2px solid var(--lab-border-color);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--grey600-color);
}

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

.lab_db_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_db_tab:hover { color: var(--blk-color); }

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

.lab_db_tab .lab_icon { flex: none; }

/* Gruppierte Optionen */

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

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

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

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

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

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

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

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

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

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

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

.lab_db_optionen { margin-top: 0.9rem; }

.lab_db_meldung { margin-top: 0.9rem; }

/* ---------- KI & Austausch ---------- */

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

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

.lab_db_ki_text {
  width: 100%;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.8rem;
  margin-top: 0.6rem;
  resize: vertical;
}

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

/* Wortkasten: jedes Wort ein Knopf, Lücke per aria-pressed */

.lab_db_wortkasten {
  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_db_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_db_wort:hover { border-color: var(--bt-color); }

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

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

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

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

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

.lab_db_leiste_frei { flex: 1 1 auto; }

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

.lab_db_leiste_hinweis { flex-basis: 100%; }

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

/* Pult: graue Unterlage für die Blätter (wie im Rechenblatt) */

.lab_db_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;
}

/* ---------- Die Blattseiten (Vorbild Rechenblatt) ----------
   Der Stapel selbst ist transparent - JEDER Seite ist eigenes Papier
   in A4-Proportion. Kurzer Inhalt bekommt die volle Blatthoehe, langer
   Inhalt waechst darueber hinaus. Gilt nur der Vorschau: Druck und
   Exporte verteilen die Seiten selbst. */

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

.lab_db_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_db_seite + .lab_db_seite { margin-top: 1.4rem; }

.lab_db_seite { break-after: page; }

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

/* Fortsetzungskopf auf Folgeseiten: kleiner Akzent-Strich + Titel,
   Blatt und Seitenzahl (Muster Rechenblatt). */

.lab_db_fortsetzung {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0 0 1.1rem;
}

.lab_db_fortsetzung::before {
  content: "";
  flex: 0 0 auto;
  width: 1.7rem;
  height: 4px;
  border-radius: 2px;
  background: var(--lab-tv-blatt-akzent);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* Auch die Lösungsseite ist ein eigenes Blatt. */

.lab_db_loesung {
  margin-top: 1.4rem;
  min-height: 20rem;
  break-before: page;
}

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

/* Blattkopf: helle Waschung mit Akzent-Kante, Titel links, Meta rechts.
     Die Waschung ist bewusst sehr hell - im S/W-Druck bleibt sie ein
     feines Grau und stoert nicht; Titel und Akzent bleiben dunkel. */

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

.lab_db_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_db_kopfreihen {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.2rem;
  flex-wrap: wrap;
}

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

.lab_db_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_db_untertitel {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: var(--lab-tv-blatt-text);
  opacity: 0.68;
}

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

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

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

/* ---------- 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 (Muster der Rätsel-Werkstatt). ---------- */

/* Linie: Titel auf einer kräftigen Grundlinie, keine Waschung. */
.lab_db_kopf_linie .lab_db_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_db_kopf_band .lab_db_kopfbox {
  background: var(--lab-tv-blatt-akzent);
  border-left: 0;
  border-radius: 10px;
  padding: 0.85rem 1.2rem 0.8rem;
}

.lab_db_kopf_band .lab_db_titel,
.lab_db_kopf_band .lab_db_fachklasse {
  color: var(--lab-tv-blatt);
  opacity: 1;
}

.lab_db_kopf_band .lab_db_untertitel {
  color: var(--lab-tv-blatt);
  opacity: 0.85;
}

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

/* Schlicht: nur Schrift, keine Flaeche, keine Kante. */
.lab_db_kopf_schlicht .lab_db_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_db_kopf_karte .lab_db_kopfbox {
  background: none;
  border: 1.25px solid var(--lab-tv-blatt-text);
  border-radius: 10px;
  padding: 1rem 1.2rem 0.95rem;
  position: relative;
}

.lab_db_kopf_karte .lab_db_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_db_kopf_balken .lab_db_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_db_kopf_doppellinie .lab_db_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_db_kopf_doppellinie .lab_db_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_db_kopf_kopfkasten .lab_db_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_db_rahmenseite an der Blattseite, gesetzt in
   blattBauen), der Kopf selbst bleibt schriftlich wie "Schlicht". */
.lab_db_kopf_rahmen .lab_db_kopfbox {
  background: none;
  border-left: 0;
  border-radius: 0;
  padding: 0.1rem 0 0;
}

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

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

.lab_db_kopf_mitte .lab_db_kopfreihen {
  flex-direction: column;
  align-items: center;
}

.lab_db_kopf_mitte .lab_db_fachklasse { margin-top: 0.15rem; }

/* Kopfzeile: kleine Grossbuchstaben-Zeile ueber dem Titel
     (Schulname, Thema, ...). Auf dem Farbband hell statt gruen. */
.lab_db_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_db_kopf_band .lab_db_kopfzeile { color: var(--lab-tv-blatt); }

/* ---------- Fliesstext mit Lücken und Eintrag-Kästchen ---------- */

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

/* Wort-Lücke mit Nummer (Lückentext, Fälle) - Akzent-Rand wie die
   Aufgaben-Kreise im Rechenblatt, im S/W-Druck bleibt die Umrandung. */

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

/* Eintrag-Kästchen (Satzzeichen, erster Buchstabe): kleines Kästchen
   zum Eintragen, dunkle Umrandung - bleibt im S/W-Druck klar sichtbar. */

.lab_db_zeichen {
  display: inline-block;
  min-width: 1.5rem;
  height: 1.25rem;
  margin: 0 0.12rem;
  vertical-align: -0.15rem;
  border: 1.2px solid var(--lab-tv-blatt-text);
  border-radius: 4px;
  background: var(--lab-tv-blatt-flaeche);
}

/* HTML-Export: die Kästchen und Lücken werden zu Eingabefeldern -
   die schmalen Kästchen brauchen ihre eigene Breite zurück (die
   Export-Regel .bef_seite input steht später und würde sonst win). */

.lab_db_blatt .lab_db_zeichen input {
  width: 1.8rem;
  text-align: center;
  padding: 0;
}

.lab_db_blatt .lab_db_luecke input {
  width: 5rem;
  text-align: center;
  padding: 0;
}

/* Antwortlinie zum Eintragen (Vorschau und Exporte) */

.lab_db_antwort {
  display: block;
  min-width: 6rem;
  border-bottom: 1.5px solid var(--lab-tv-blatt-text);
  min-height: 1.6rem;
  margin-top: 0.35rem;
}

/* Lösungen: Treffer in der Akzentfarbe - im S/W-Druck ein deutliches
   Mittelgrau, auf dem Blatt klar vom Aufgabentext unterschieden. */

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

.lab_db_loesungswort {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.lab_db_treffer { font-weight: 700; }

/* Wortkasten und Listen-Abschnitte als Block mit Überschrift */

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

.lab_db_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-text);
}

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

.lab_db_chip {
  border: 1px solid var(--lab-tv-blatt-akzent);
  border-radius: 999px;
  padding: 0.16rem 0.75rem;
  font-size: 0.92rem;
  font-weight: 600;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* ---------- Nummerierte Wortlisten (Groß/klein, ABC, Zuordnen) ----------
   Nummern als kleine Kreise mit Akzent-Rand - der Kreis bleibt im
   S/W-Druck als Umrandung erhalten, keine Flaeche nötig. */

.lab_db_liste {
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
  column-gap: 2.8rem;
  column-rule: 1px solid var(--lab-tv-blatt-linie);
  counter-reset: liste;
}

.lab_db_liste li {
  counter-increment: liste;
  position: relative;
  margin: 0 0 1.4rem;
  padding-left: 2.1rem;
  break-inside: avoid;
  line-height: 1.5;
  font-size: 1.04rem;
}

.lab_db_liste li::before {
  content: counter(liste);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.5rem;
  height: 1.5rem;
  border: 1.5px solid var(--lab-tv-blatt-akzent);
  border-radius: 50%;
  color: var(--lab-tv-blatt-akzent);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.5rem;
  text-align: center;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.lab_db_liste_kompakt li { margin-bottom: 1.1rem; }

/* Antwortlinien beim ABC-Ordnen: kompakter, Linie statt Wort */

.lab_db_liste_antwort li { margin-bottom: 1.7rem; }

.lab_db_liste_antwort .lab_db_antwort { margin-top: 0; }

/* Zuordnung: zwei Spalten - links die Nummern, rechts die Buchstaben */

.lab_db_zuordnung {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2.8rem;
  margin-top: 1.2rem;
}

.lab_db_zuordnung .lab_db_liste { margin-top: 0; }

/* Die rechte Spalte trägt echte Buchstaben-Plaketten (kein Zaehler),
   damit sie auch in Word/ODT ankommen. */

.lab_db_liste_rechts li::before { content: none; }

.lab_db_buchstabe {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border: 1.5px solid var(--lab-tv-blatt-akzent);
  border-radius: 50%;
  color: var(--lab-tv-blatt-akzent);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.4rem;
  text-align: center;
  margin-right: 0.55rem;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* ---------- Sätze umbauen ---------- */

.lab_db_saetze {
  margin: 1rem 0 0;
  padding: 0 0 0 1.7rem;
  column-gap: 2.6rem;
  column-rule: 1px solid var(--lab-tv-blatt-linie);
}

.lab_db_saetze li {
  margin: 0 0 1.6rem;
  break-inside: avoid;
  line-height: 1.5;
  font-size: 1.02rem;
}

.lab_db_saetze li::marker { font-weight: 700; }

.lab_db_satz { margin: 0 0 0.4rem; }

.lab_db_glied {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  margin-top: 0.35rem;
}

.lab_db_glied_name {
  flex: none;
  width: 5.5rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.lab_db_glied .lab_db_antwort { flex: 1; margin-top: 0; }

.lab_db_loesungshinweis {
  margin: 0.4rem 0 0;
  font-size: 0.92rem;
  font-style: italic;
  opacity: 0.8;
}

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

.lab_db_loesung .lab_db_saetze li { margin-bottom: 0.55rem; }

.lab_db_loesung .lab_db_liste li,
.lab_db_loesung .lab_db_liste_antwort li { margin-bottom: 0.55rem; }

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

.lab_db_vorschau_aus { display: none; }

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

/* Fusszeile an die Unterkante des Papiers heften (nur Vorschau) -
   im Druck bleibt sie im Textfluss, volle Seiten laufen weiter. */

.lab_db_seite,
.lab_db_loesung { position: relative; }

.lab_db_blattfuss {
  position: absolute;
  left: 1.9rem;
  right: 1.9rem;
  bottom: 1.7rem;

  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;
}

/* ---------- Schmale Schirme ---------- */

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

  .lab_db_seite { padding: 1.1rem 1.1rem 1.3rem; }

  .lab_db_glied_name { width: 4.6rem; }

  .lab_db_zuordnung { grid-template-columns: 1fr; gap: 1rem 0; }
}

/* ---------- Nachfrage-Dialog (statt Browser-Dialog, AGENTS.md §2.11) ---------- */

.lab_db_frage {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.55);
}

.lab_db_frage[hidden] { display: none; }

.lab_db_frage_kasten {
  width: 100%;
  max-width: 26rem;
  background: var(--ct-color);
  color: var(--blk-color);
  border: 1px solid var(--lab-border-color);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  box-shadow: var(--lab-shadow-2);
}

.lab_db_frage_kasten h2 {
  font-size: 1.05rem;
  margin: 0 0 0.4rem;
}

.lab_db_frage_kasten p { margin: 0 0 0.9rem; }

.lab_db_frage_reihe {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ---------- 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_db_seite,
  .lab_db_loesung,
  .lab_db_blattfuss { position: static; }

  .lab_kopf,
  .lab_db_formular,
  .lab_db_ki,
  .lab_db_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. */
  .lab_main,
  .lab_shell,
  .lab_db_layout,
  .lab_db_vorschau,
  .lab_db_pult {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

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

  .lab_db_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/auto-Breiten im zentrierten Pult-Raster schrumpfen
     laesst - das Blatt blieb schmal. */
  .lab_db_blatt,
  .lab_db_seite,
  .lab_db_loesung {
    width: 180mm !important;
    max-width: none !important;
  }

  .lab_db_seite,
  .lab_db_loesung {
    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_db_seite.lab_db_rahmenseite,
  .lab_db_loesung.lab_db_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_db_blatt_leer { display: none; }

  /* Lösungsseite nur im Druck, wenn gewünscht; in der Vorschau steuert
     der "Lösung zeigen"-Knopf die Sichtbarkeit. */
  .lab_db_loesung { display: none; }

  .lab_db_mit_loesung .lab_db_loesung {
    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; }
}