/* Lehrkraft-Bereich: schlicht und gut lesbar am PC */

:root {
  --grund: #f6f4ef;
  --flaeche: #ffffff;
  --schrift: #24303f;
  --leise: #5d6878;
  --linie: #d9d4c7;
  --akzent: #3f7458;
  --akzent-schrift: #ffffff;
  --schlecht: #a8452a;
  --schlecht-grund: #f8e3d8;
  --gut: #2f7d53;
  --gut-grund: #dff0e3;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--grund); color: var(--schrift); font: 16px/1.5 "Segoe UI", system-ui, sans-serif; }
a { color: var(--akzent); }
h1 { font-size: 1.6rem; margin: 0 0 1rem; }
code { background: #ece8dd; padding: .1em .35em; border-radius: 4px; }

.kopfzeile {
  display: flex; align-items: center; gap: 1.5rem; padding: .7rem 1.5rem;
  background: var(--flaeche); border-bottom: 1px solid var(--linie);
}
.kopfzeile .marke { font-weight: 600; font-size: 1.1rem; color: var(--schrift); text-decoration: none; }
.kopfzeile nav { display: flex; gap: 1rem; flex: 1; }
.kopfzeile form { margin: 0; }

main { max-width: 60rem; margin: 2rem auto; padding: 0 1.5rem; }

.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 1.5rem; }
.karte.schmal { max-width: 24rem; margin: 3rem auto; }

h2 { font-size: 1.2rem; margin: 0 0 .8rem; }
.karte + .karte, .karte + .hinweis { margin-top: 1.2rem; }
textarea {
  width: 100%; padding: .55rem .7rem; font: inherit; color: inherit; resize: vertical;
  border: 1px solid #a9a393; border-radius: 6px; background: #fff;
}
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.5rem; padding: .5rem 0; border-top: 1px solid var(--linie); }
.liste li:first-child { border-top: 0; }
.zeile { display: flex; gap: .6rem; margin: 0; flex: 1; min-width: 16rem; }
.zeile input { max-width: 18rem; }
.zeile button { margin: 0; white-space: nowrap; }
.loeschen summary { cursor: pointer; color: var(--schlecht); }
.loeschen form { margin: .4rem 0 0; }
.loeschen form > button { margin: 0; }
button.gefahr { background: var(--schlecht); border-color: var(--schlecht); }
main > .meldung { margin: 0 0 1rem; }

.titelzeile { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.titelzeile h1 { margin: 0; }
a.knopf {
  display: inline-block; padding: .55rem 1.1rem; border-radius: 6px; text-decoration: none;
  border: 1px solid var(--akzent); background: var(--akzent); color: var(--akzent-schrift);
}
a.knopf.schlicht { background: transparent; color: var(--schrift); border-color: var(--linie); }
.aktionen { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .6rem 1rem; }
.aktionen form { margin: 0; }
.aktionen button { margin: 0; }
.aktionen.unten { margin-top: 1.2rem; }
.beschreibung { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--leise); }

.marke-aus { font-size: .8rem; font-weight: normal; padding: .1rem .5rem; border-radius: 999px; background: var(--schlecht-grund); color: var(--schlecht); border: 1px solid var(--schlecht); vertical-align: middle; }
.meldung.hinweis-kasten { background: #f4efdc; border-color: #b9a55c; color: #5c4f1c; }

/* QR-Code einer Übung */
.qr-blatt { text-align: center; padding: 1rem 0 1.5rem; }
.qr-bild svg { display: block; margin: 0 auto; width: min(22rem, 80vw); height: auto; aspect-ratio: 1; }
.qr-adresse { font-family: Consolas, monospace; color: var(--leise); word-break: break-all; }

/* Tabellen (Auswertung) */
.filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem 1rem; margin: 0 0 1.2rem; }
.filter label { margin: 0 0 .2rem; font-size: .9rem; }
.filter button { margin: 0; }
.filter select { max-width: 16rem; }
input[type=date] { font: inherit; padding: .4rem .6rem; border: 1px solid #a9a393; border-radius: 6px; background: #fff; }
.titelzeile .hinweis { margin: 0; }
.tabelle { width: 100%; border-collapse: collapse; background: var(--flaeche); }
.tabelle th, .tabelle td { padding: .45rem .7rem; border: 1px solid var(--linie); text-align: left; vertical-align: top; }
.tabelle th { background: #efece3; font-weight: 600; }
.tabelle .zahl { text-align: right; white-space: nowrap; }

/* Übersicht: die Bereiche als Kacheln */
.kachelfeld { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.kachelfeld .karte { margin: 0; }
a.karte.bereich { display: block; text-decoration: none; color: var(--schrift); }
a.karte.bereich:hover { border-color: var(--akzent); }
a.karte.bereich h2 { color: var(--akzent); }
a.karte.bereich p { margin: 0; color: var(--leise); }
[hidden] { display: none !important; }

/* Seite „Daten“ */
.abstand-oben { margin-top: 1rem; }
.kaestchen.untereinander { flex-direction: column; }
.gefahrenbereich { border-color: var(--schlecht); }
.gefahrenbereich h2 { color: var(--schlecht); }
.gefahrenbereich input[type=text], .gefahrenbereich input[type=password] { max-width: 20rem; }
input[type=radio] { width: 1.1rem; height: 1.1rem; accent-color: var(--akzent); }

/* Fortschritts-Übersicht */
.legende { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; padding: 0; margin: 0 0 1.2rem; }
.fortschritt-tabelle { margin-bottom: 1.6rem; overflow-x: auto; }
.tabelle.fortschritt th, .tabelle.fortschritt td { padding: .35rem .5rem; white-space: nowrap; }
.tabelle.fortschritt tbody th { background: var(--flaeche); font-weight: normal; }
.tabelle .mitte { text-align: center; }
.stufe { font-weight: 700; }
td.stufe-3 { background: #dff0e3; }
td.stufe-2 { background: #f6eecb; }
td.stufe-1 { background: var(--schlecht-grund); }
.stufe-3 .stufe, .stufe.stufe-3 { color: var(--gut); }
.stufe-2 .stufe, .stufe.stufe-2 { color: #8a6d00; }
.stufe-1 .stufe, .stufe.stufe-1 { color: var(--schlecht); }
td.wenig { color: var(--leise); font-size: .9rem; }

/* Auswertungsbogen */
.bogen { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 1.5rem; margin-bottom: 1.2rem; }
.bogen-art { margin: 0; color: var(--leise); text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; }
.bogen h1 { font-size: 1.9rem; margin: 0 0 .8rem; }
.merkmale { display: grid; grid-template-columns: max-content 1fr; gap: .15rem 1.2rem; margin: 0; }
.merkmale dt { color: var(--leise); }
.merkmale dd { margin: 0; }
.bogen .ergebnis { margin: 1.2rem 0; padding: .8rem 1rem; border: 1px solid var(--linie); border-radius: 8px; }
.bogen .ergebnis p { margin: .2rem 0; }
.hauptzahl { font-size: 1.3rem; }
.hauptzahl .prozent { margin-left: .8rem; padding: .1rem .6rem; border: 1px solid var(--schrift); border-radius: 999px; font-weight: 600; }
/* Fassung für Eltern: Feld für Datum und Unterschrift */
.unterschrift { margin-top: 2rem; break-inside: avoid; }
.unterschrift .linien { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; margin-top: 2.6rem; }
.unterschrift .linie { display: block; border-top: 1px solid var(--schrift); margin-bottom: .3rem; }
.unterschrift .linien div { font-size: .9rem; color: var(--leise); }
.uebersicht { margin-top: 1.2rem; }
.neue-seite { margin-top: 1.2rem; }
.nicht-beendet { font-weight: 600; color: var(--schlecht); }
.aufgaben .rechnung { white-space: nowrap; font-variant-numeric: tabular-nums; }
.aufgaben .zeichen { text-align: center; font-weight: 700; width: 2.2rem; }
.aufgaben .bemerkung { color: var(--leise); font-size: .92rem; }
/* Richtig dezent grün, falsch deutlich rot – zusätzlich immer ✓ oder ✗ */
.aufgaben tr.richtig td { background: #f1f8f3; }
.aufgaben tr.richtig .zeichen { color: var(--gut); }
.aufgaben tr.falsch td { background: var(--schlecht-grund); }
.aufgaben tr.falsch .zeichen, .aufgaben tr.falsch td:nth-child(3) { color: var(--schlecht); font-weight: 700; }

/* QR-Karten der Kinder zum Ausschneiden */
.qr-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0; }
.qr-karte { border: 1px dashed #8d8778; padding: .8rem; text-align: center; background: #fff; break-inside: avoid; }
.qr-karte svg { display: block; margin: 0 auto; width: 100%; max-width: 11rem; height: auto; aspect-ratio: 1; }
.qr-name { font-size: 1.3rem; font-weight: 600; margin-bottom: .3rem; overflow-wrap: anywhere; }

/* Beim Drucken (A4) bleibt nur das Blatt übrig: der QR-Code oder der Auswertungsbogen */
@media print {
  @page { size: A4; margin: 1.6cm; }
  body { background: #fff; font-size: 11pt; }
  .kopfzeile, .nicht-drucken, main > .meldung { display: none !important; }
  main { margin: 0; max-width: none; padding: 0; }
  .bogen { border: 0; padding: 0; margin: 0; }
  .neue-seite { break-before: page; }
  .qr-karten { grid-template-columns: repeat(3, 1fr); }  /* drei Karten nebeneinander auf A4 */
  .qr-karte svg { max-width: 4.5cm; }
  .bogen, .tabelle th, .tabelle td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }  /* Farben mitdrucken */
  .tabelle.fortschritt { font-size: 9pt; }
  .fortschritt-tabelle { break-inside: avoid; overflow: visible; }
  .aufgaben tr { break-inside: avoid; }
  .aufgaben thead { display: table-header-group; }  /* Kopfzeile auf jeder Seite wiederholen */
  .aufgaben th, .aufgaben td { padding: .2rem .5rem; }
  .qr-blatt h1 { font-size: 28pt; margin-bottom: 1cm; }
  .qr-bild svg { width: 12cm; }
  .qr-adresse { font-size: 11pt; color: #000; }
}

/* Stand eines Tests in der Übungsliste */
.stand { margin: 0 0 .4rem; }
.offen-bei { margin: 0 0 .9rem; color: var(--leise); }
.offen-bei summary { cursor: pointer; }
.offen-bei p { margin: .3rem 0 0; }

/* Formular für eine Übung */
.feld { border: 0; border-top: 1px solid var(--linie); margin: 0; padding: .9rem 0 .6rem; }
.feld:first-of-type { border-top: 0; padding-top: 0; }
.feld legend { font-weight: 600; padding: 0; float: left; width: 100%; margin-bottom: .4rem; }
.feld legend small { font-weight: normal; color: var(--leise); }
.feld > * { clear: both; }
.kaestchen { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.kaestchen label, label.wahl { font-weight: normal; margin: 0; display: flex; align-items: center; gap: .4rem; }
label.wahl { margin-top: .6rem; padding: .35rem .6rem; background: #f1eee4; border-radius: 6px; width: fit-content; }
input[type=checkbox] { width: 1.1rem; height: 1.1rem; accent-color: var(--akzent); }
select { font: inherit; padding: .45rem .6rem; border: 1px solid #a9a393; border-radius: 6px; background: #fff; }
input.zahl { max-width: 14rem; }
.klein { font-size: .9rem; margin: .4rem 0 0; }
.leise { color: var(--leise); }

label { display: block; font-weight: 600; margin-bottom: .3rem; }
input[type=text], input[type=password], input[type=number] {
  width: 100%; padding: .55rem .7rem; font: inherit; color: inherit;
  border: 1px solid #a9a393; border-radius: 6px; background: #fff;
}
input:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid #8fb8a2; outline-offset: 2px; }
button {
  font: inherit; cursor: pointer; padding: .55rem 1.1rem; border-radius: 6px;
  border: 1px solid var(--akzent); background: var(--akzent); color: var(--akzent-schrift);
}
form > button { margin-top: 1rem; }
button.schlicht { background: transparent; color: var(--schrift); border-color: var(--linie); }

.hinweis { color: var(--leise); }
.meldung { padding: .6rem .9rem; border-radius: 6px; border: 1px solid; }
.meldung.fehler { background: var(--schlecht-grund); border-color: var(--schlecht); color: var(--schlecht); }
.meldung.erfolg { background: var(--gut-grund); border-color: var(--gut); color: var(--gut); }

/* Verwalten: breite Tabellen dürfen auf schmalen Bildschirmen seitlich rollen */
.tabelle-rahmen { overflow-x: auto; }
.loeschen > button { margin: .4rem 0 0; }
.filter .auswahl { display: flex; align-items: center; gap: .4rem; margin: 0 0 .5rem; font-size: 1rem; }
.gefahrenbereich h3 { margin: 1.4rem 0 .3rem; font-size: 1.05rem; }
.gefahrenbereich form select { max-width: 24rem; }

/* 1×1-Pass: Steuerzentrale (die breite Tabelle bekommt mehr Platz) */
main:has(.passtabelle) { max-width: 76rem; }
.reiter { display: flex; gap: .4rem; margin: 0 0 1.2rem; border-bottom: 1px solid var(--linie); }
.reiter a { padding: .45rem 1rem; text-decoration: none; color: var(--schrift); border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; }
.reiter a[aria-current] { background: var(--flaeche); border-color: var(--linie); font-weight: 600; margin-bottom: -1px; }
.nur-drucken { display: none; }
.passtabelle th, .passtabelle td { padding: .15rem; white-space: nowrap; vertical-align: middle; }
.passtabelle tbody th { padding: .15rem .6rem; background: var(--flaeche); font-weight: 600; }
.passtabelle form, .abfrageliste form { margin: 0; }
.passknopf {
  width: 100%; min-width: 3.6rem; padding: .35rem .3rem; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--schrift); font-variant-numeric: tabular-nums;
}
.passknopf.leise { color: var(--leise); }
.passknopf:hover { border-color: var(--akzent); background: #f1f6f3; }
.passknopf.bereit { background: var(--gut-grund); border-color: var(--gut); color: var(--gut); font-weight: 600; }
.passknopf.geschafft { background: #e6e7f4; border-color: #5a63a8; color: #3c4386; font-weight: 600; }
.passknopf.geschafft:hover { background: var(--schlecht-grund); border-color: var(--schlecht); color: var(--schlecht); }
.passzeichen-stempel { color: #3c4386; }
.abfrage-felder { display: flex; flex-wrap: wrap; gap: .4rem; }
.passknopf.abfrage { width: auto; padding: .35rem .9rem; }
@media print {
  .nur-drucken { display: block; margin: 0 0 .6rem; color: var(--leise); }
  .passtabelle { font-size: 9pt; }
  .passtabelle th, .passtabelle td { padding: .1rem .2rem; }
  .passknopf { padding: .1rem; min-width: 0; border: 0; }
  .passknopf, .passknopf.bereit, .passknopf.geschafft { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .passtabelle tr { break-inside: avoid; }
  /* Abfrageliste: ein Kästchen zum Abhaken vor jeder Reihe */
  .passknopf.abfrage { background: none; border: 0; color: #000; font-weight: normal; }
  .passknopf.abfrage::before { content: "☐ "; font-size: 1.2em; }
  .abfrageliste tr { break-inside: avoid; }
}

/* Abfrage-Modus fürs Handy: große Tippflächen */
.handy { max-width: 34rem; margin: 0 auto; }
.handy-namen { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .6rem; margin: 1rem 0; }
.handy-name {
  display: flex; flex-direction: column; gap: .15rem; padding: .8rem .9rem; border-radius: 10px;
  background: var(--flaeche); border: 1px solid var(--linie); color: var(--schrift); text-decoration: none;
}
.handy-name span { font-size: 1.15rem; font-weight: 600; }
.handy-name small { color: var(--leise); }
.handy-name.bereit { border-color: var(--gut); background: var(--gut-grund); }
.handy-name.bereit b { color: var(--gut); }
.handy-felder { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: 1rem 0; }
.handy-felder form { margin: 0; }
.handy-felder form.breit { grid-column: 1 / -1; }
.handyfeld {
  width: 100%; min-height: 4.6rem; padding: .5rem; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .1rem; border-radius: 12px; background: var(--flaeche); border: 2px solid var(--linie); color: var(--schrift);
}
.handyfeld-name { font-size: 1.35rem; font-weight: 600; }
.handyfeld-stand { font-size: .9rem; color: var(--leise); }
.handyfeld.bereit { border-color: var(--gut); background: var(--gut-grund); }
.handyfeld.bereit .handyfeld-stand { color: var(--gut); font-weight: 600; }
.handyfeld.geschafft { border-color: #5a63a8; background: #e6e7f4; }
.handyfeld.geschafft .handyfeld-stand { color: #3c4386; font-weight: 600; }
.handyfeld:active { transform: scale(.97); }

/* Schmale Bildschirme (Handy): Kopfzeile und Menü brechen um */
@media (max-width: 720px) {
  .kopfzeile { flex-wrap: wrap; gap: .4rem 1rem; padding: .6rem 1rem; }
  .kopfzeile nav { order: 3; flex-basis: 100%; flex-wrap: wrap; gap: .2rem .9rem; font-size: .95rem; }
  main { margin: 1rem auto; padding: 0 1rem; }
  .titelzeile { flex-wrap: wrap; }
}

/* QR-Code zum Abfrage-Modus (im 1×1-Pass) */
.handy-qr { margin-top: 1.5rem; }
.handy-qr summary { cursor: pointer; font-weight: 600; }
.handy-qr-inhalt { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 1rem; }
.handy-qr .qr-bild svg { width: 12rem; }
.handy-qr ol { margin: 0; padding-left: 1.2rem; max-width: 30rem; }
.handy-qr .qr-adresse { flex-basis: 100%; margin: 0; font-size: .85rem; }