/* Lehrkraft-Anwendung. Zielgerät: MacBook, Maus und Tastatur. */

:root {
  --stufe: #16506B;
  --grund: #f4f6f8;
  --flaeche: #ffffff;
  --linie: #d8dee4;
  --text: #1b2733;
  --text-leise: #5a6b7b;
  --gut: #2f7d4f;
  --mittel: #b8791c;
  --offen: #8a5a5a;
  --warnung: #a5342f;
  --radius: 12px;
  --schatten: 0 1px 3px rgb(20 40 60 / 12%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #12181e; --flaeche: #1c242c; --linie: #33404c;
    --text: #e8eef4; --text-leise: #9fb0c0;
    --gut: #6cc08c; --mittel: #e0a94e; --offen: #c99a9a; --warnung: #ef8078;
    --schatten: 0 1px 3px rgb(0 0 0 / 40%);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

h1 { font-size: 1.35rem; line-height: 1.25; }
h2 {
  font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-leise); margin: 1.75rem 0 0.6rem;
}

.lang { color: var(--text-leise); }
.hinweis { font-size: 0.9rem; color: var(--text-leise); }
.fehler { color: var(--warnung); font-weight: 600; }
.ladefehler { padding: 2rem; }
.leer { color: var(--text-leise); padding: 1.5rem 0; }
.leer:has(.leer-bild) { text-align: center; }
/* Freigestelltes Motiv ueber einem Leer- oder Fertig-Text. Rein schmueckend:
   Die Aussage steht immer auch als Text daneben, das Bild traegt sie nie allein. */
.leer-bild {
  display: block;
  width: auto;
  max-width: 11rem;
  max-height: 7.5rem;
  margin: 0 auto 0.9rem;
  object-fit: contain;
}
@media (prefers-reduced-motion: no-preference) {
  .leer-bild { animation: leer-bild-auf 0.4s ease-out both; }
}
@keyframes leer-bild-auf {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}


/* ---------- Einstieg ---------- */

.einstieg {
  position: fixed; inset: 0; z-index: 10;
  display: grid;
  justify-items: center;
  /* `safe`: Wird die Karte höher als das Fenster, wäre der obere Überstand bei
     zentriertem Ausrichten nicht wegscrollbar. Siehe schueler/stil.css. */
  align-items: safe center;
  padding: 1.5rem;
  background: var(--grund); overflow-y: auto;
}

/* Dieselbe Breite wie die Startkarte der Schüleranwendung -- beide sind das,
   was man als Erstes sieht. */
.einstieg-karte {
  width: min(52rem, 100%);
  background: var(--flaeche);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 1.75rem;
  overflow: hidden; /* damit das Kopfbild die Rundung mitnimmt */
}

/* Kopfband der Einstiegskarte -- gleicher Aufbau wie in der Schüleranwendung.
   Die negativen Ränder heben das Padding der Karte auf, damit das Bild randlos
   sitzt (3.5rem sind zweimal 1.75rem). */
.karten-kopf {
  position: relative;
  width: calc(100% + 3.5rem);
  margin: -1.75rem -1.75rem 1.5rem;
}

/* `aspect-ratio` und `max-height` vertragen sich nicht: Die beiden ziehen auch
   die Breite mit, und rechts bliebe ein weisser Streifen. Deshalb allein das
   Verhältnis -- 4:1 ist das Verhältnis, in dem `header.jpg` vorliegt, es wird
   also gar nicht beschnitten. */
.karten-bild {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 1;
  object-fit: cover;
  object-position: center bottom;
}

/* Abschlussband unten. Die negativen Ränder wie beim Kopf, nur andersherum;
   die Rundung unten kommt vom `overflow: hidden` der Karte.
   6:1 mit `center 30%` ist gerechnet: Auf der 832 px breiten Karte bleiben
   davon die Bildzeilen 120 bis 320 von 600 übrig -- Kompass, Tasse und Karte
   sind ganz drin, Lineal und Bleistift fallen unten heraus. Ein Band, das
   abschließt, statt ein zweiter Kopf zu sein. */
.karten-fuss {
  display: block;
  width: calc(100% + 3.5rem);
  height: auto;
  margin: 1.75rem -1.75rem -1.75rem;
  aspect-ratio: 6 / 1;
  object-fit: cover;
  object-position: center 30%;
}

/* Logo oben rechts im Bild -- dieselbe Stelle wie in der Schüleranwendung. */
/* Anleitung und Material: zwei Wege, die von der Klasse wegführen und zum
   Nachschlagen da sind. Sie teilen sich deshalb dasselbe Aussehen -- leise
   Fläche, dünner Rahmen, linksbündig und fett wie das `summary` -- und heben
   sich damit von den drei Knöpfen darüber ab, ohne laut zu werden. */
/* Der Satz unter der Überschrift passt so auf eine Zeile. Gemessen: Bei
   0,92 rem kippt er auf 832 px Kartenbreite um -- 0,9 rem lässt Luft für
   Systeme, die etwas breiter setzen. */
.einstieg-karte > .lang { font-size: 0.9rem; }

.einstieg-mehr { display: grid; gap: 0.6rem; margin-top: 1.5rem; }

.anleitung-kurz,
.knopf-verweis {
  margin: 0;
  padding: 0.85rem 1rem;
  font-weight: 600;
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: 10px; /* stand vorher nur auf `button`, das <a> blieb eckig */
}

/* Das schwarze Dreieck des <details> weg -- es war das einzige schwarze
   Zeichen auf der Karte. Stattdessen rechts ein leiser Winkel, passend zum
   Pfeil des Verweises darunter: Beide sagen „hier geht es weiter", ohne sich
   vorzudrängen. `list-style` und der WebKit-Marker müssen beide dran, sonst
   bleibt das Dreieck in Safari stehen. */
.anleitung-kurz summary { list-style: none; }
.anleitung-kurz summary::-webkit-details-marker { display: none; }
.anleitung-kurz summary::after {
  content: "▾"; float: right; color: var(--text-leise); font-weight: 400;
}
.anleitung-kurz[open] summary::after { content: "▴"; }

.knopf-verweis { display: block; color: var(--text); text-decoration: none; }
.knopf-verweis::after { content: "→"; float: right; color: var(--text-leise); font-weight: 400; }
.knopf-verweis em {
  font-style: normal; font-weight: 400; font-size: 0.9rem; color: var(--text-leise);
}
.knopf-verweis:hover,
.anleitung-kurz:hover { border-color: var(--stufe); }
.knopf-verweis:focus-visible { outline: 3px solid var(--stufe); outline-offset: 2px; }

/* Die beiden Nebenwege auf der breiten Karte nebeneinander. */
.einstieg-reihe { margin-top: 0.6rem; gap: 0.6rem; }
.einstieg-reihe .knopf-leise { height: 100%; }

.dateiname {
  padding: 0.6rem 0.8rem; margin: 0 0 1rem;
  background: var(--grund); border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9rem;
}

/* ---------- Formular ---------- */

.feld { display: block; margin: 1rem 0; }
.feld > span { display: block; font-weight: 600; margin-bottom: 0.35rem; }

input[type="text"], input[type="password"], input[type="date"] {
  width: 100%; padding: 0.6rem 0.7rem; font: inherit;
  color: var(--text); background: var(--grund);
  border: 2px solid var(--linie); border-radius: 8px;
}
input:focus-visible { outline: 3px solid var(--stufe); outline-offset: 1px; }

.zaehler { display: block; margin-top: 0.3rem; font-size: 0.85rem; color: var(--text-leise); }
.zaehler[data-stufe="schwach"] { color: var(--warnung); }
.zaehler[data-stufe="mittel"] { color: var(--mittel); }
.zaehler[data-stufe="gut"] { color: var(--gut); }

button { font: inherit; cursor: pointer; border-radius: 8px; }

/* Nur fuer Screenreader. Steht global, weil es an mehreren Stellen gebraucht
   wird: Wortmarken der Skala, Bedeutung der Zahlen in den Auswahlknoepfen. */
.nur-lesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}

.knopf-gross {
  display: block; width: 100%; padding: 0.8rem; margin-top: 1rem;
  font-weight: 600; color: #fff; background: var(--stufe); border: 0; min-height: 46px;
}
.knopf-leise {
  display: block; width: 100%; padding: 0.7rem; margin-top: 0.6rem;
  color: var(--text-leise); background: transparent;
  border: 2px solid var(--linie); min-height: 42px;
}
.knopf-klein {
  padding: 0.45rem 0.8rem; color: var(--text);
  background: var(--flaeche); border: 1px solid var(--linie);
}

/* ---------- Kopf und Leiste ---------- */

.kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.5rem; background: var(--stufe); color: #fff;
}
.kopf-oben { margin: 0 0 0.15rem; font-size: 0.8rem; letter-spacing: 0.06em;
             text-transform: uppercase; opacity: 0.85; }
.kopf-name { margin: 0; }
.kopf-logo-feld {
  flex: none; display: block; padding: 0.4rem 0.55rem;
  background: #fff; border-radius: 9px; box-shadow: 0 1px 4px rgb(0 0 0 / 18%);
}
.kopf-logo-feld img { display: block; width: 132px; height: auto; }

.leiste {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.5rem 1.5rem; background: var(--flaeche);
  border-bottom: 1px solid var(--linie); font-size: 0.9rem;
}
.marke {
  font-weight: 700; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: #fff; background: var(--stufe); border-radius: 6px; padding: 0.15rem 0.5rem;
}
.leiste-status { color: var(--text-leise); }
.leiste-fuell { flex: 1; }
.gesichert { font-size: 0.85rem; color: var(--text-leise); }
.gesichert[data-zustand="offen"] { color: var(--mittel); }

/* Sichern von Hand: solange Änderungen offen sind, ist der Knopf farbig und
   nennt ihre Zahl. Ist alles gesichert, sieht er aus wie die Statusanzeige
   daneben -- dann gibt es nichts zu tun. */
.jetzt-sichern {
  font: inherit; font-size: 0.85rem; cursor: pointer;
  padding: 0.25rem 0.7rem; border-radius: 8px;
  color: #fff; background: var(--stufe); border: 1px solid transparent;
}
.jetzt-sichern:disabled {
  cursor: default; color: var(--text-leise);
  background: none; border-color: transparent;
}

.inhalt { max-width: 60rem; margin: 0 auto; padding: 1.25rem 1.5rem 0.5rem; }
/* Fuer das eine, was in dieser App wirklich unumkehrbar ist: ein vergessenes
   Passwort. Bewusst auffaelliger als `.hinweis` -- als leiser Grautext stand
   die Warnung schon da und wurde ueberlesen. */
.warnfeld {
  margin: 0.75rem 0; padding: 0.7rem 0.9rem;
  font-size: 0.92rem; line-height: 1.5;
  background: var(--flaeche); border-left: 4px solid var(--warnung);
  border-radius: 8px; box-shadow: var(--schatten);
}

.werkzeuge { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
/* Umbenennen/Entfernen stehen unter dem Coaching-Knopf und sollen ihm nicht
   die Aufmerksamkeit nehmen -- deshalb Abstand nach oben und schmal. */
.werkzeuge-kind { margin-top: 1rem; flex-wrap: wrap; }

/* ---------- Klassenliste ---------- */

/* Ein <button>, deshalb die Zuruecksetzer: Ohne sie zieht der Browser die Karte
   auf Knopfbreite zusammen und zentriert den Namen. */
.kind {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1rem;
  width: 100%; text-align: left; color: inherit;
  padding: 0.7rem 0.9rem; margin-bottom: 0.45rem;
  background: var(--flaeche);
  border: 0; border-left: 5px solid var(--farbe);
  border-radius: 10px; box-shadow: var(--schatten);
}
.kind-name { font-weight: 600; }
.kind-stufe { font-size: 0.88rem; color: var(--farbe); font-weight: 600; }
.kind-punkte { display: flex; gap: 0.25rem; }

/* Je Punkt ein Zeitraum des Blocks. Die drei Zustaende unterscheiden sich
   bewusst in der *Form*, nicht nur in der Farbe -- vorher waren sie
   gruen/orange/grau gefuellt und damit bei Rot-Gruen-Schwaeche nicht zu
   trennen. Jetzt: leerer Ring / halb gefuellt / voll. */
.punkt {
  width: 12px; height: 12px; border-radius: 50%;
  background: transparent; border: 2px solid var(--linie);
}
.punkt.halb {
  border-color: var(--mittel);
  background: linear-gradient(90deg, var(--mittel) 50%, transparent 50%);
}
.punkt.beide { border-color: var(--gut); background: var(--gut); }

.punktlegende {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem;
  margin: 0 0 0.9rem; font-size: 0.85rem; color: var(--text-leise);
}
.punktlegende .punkt { flex: none; margin-left: 0.35rem; }
.punktlegende .punkt:first-child { margin-left: 0; }

/* ---------- Import ---------- */

.ablage {
  padding: 1.5rem; text-align: center;
  background: var(--flaeche); border: 2px dashed var(--linie); border-radius: var(--radius);
}
.ablage.bereit { border-color: var(--stufe); background: var(--grund); }
.ablage p { margin: 0 0 0.5rem; }
.ablage .lang { margin: 0 auto 1rem; }

.meldungen { display: grid; gap: 0.35rem; }
.meldung {
  margin: 0; padding: 0.55rem 0.8rem; border-radius: 8px;
  background: var(--flaeche); border-left: 4px solid var(--linie); box-shadow: var(--schatten);
}
.meldung.gut { border-left-color: var(--gut); }
.meldung.warnung { border-left-color: var(--mittel); }
.meldung.fehler { border-left-color: var(--warnung); }
.meldung.offen { border-left-color: var(--linie); color: var(--text-leise); }

/* ---------- Fremdeinschätzung ---------- */

.moduswahl { display: inline-flex; gap: 0.2rem; padding: 0.2rem;
             background: var(--grund); border: 1px solid var(--linie); border-radius: 10px; }
.modus { padding: 0.4rem 0.9rem; color: var(--text-leise); background: transparent; border: 0; }
.modus.aktiv { color: var(--text); background: var(--flaeche); font-weight: 600;
               box-shadow: var(--schatten); }

.wahlleiste { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0 1.25rem; }
.wahl {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.75rem; text-align: left; font-size: 0.9rem;
  color: var(--text-leise); background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 20px;
}
.wahl.aktiv { color: #fff; background: var(--stufe); border-color: var(--stufe); font-weight: 600; }
.wahl-stand {
  font-size: 0.78rem; font-variant-numeric: tabular-nums;
  padding: 0.05rem 0.35rem; border-radius: 5px;
  background: var(--grund); color: var(--text-leise);
}
.wahl.aktiv .wahl-stand { background: rgb(255 255 255 / 22%); color: #fff; }
.wahl.fertig:not(.aktiv) .wahl-stand { background: var(--gut); color: #fff; }

/* Zahl der gefuehrten Gespraeche im Coaching-Bereich. Bewusst anders als
   `.wahl-stand`: kein Feld, nur eine leise Zahl -- sie zaehlt nichts ab,
   sondern erzaehlt eine Vorgeschichte. */
.wahl-marke { font-size: 0.78rem; font-variant-numeric: tabular-nums; opacity: 0.7; }
.wahl.aktiv .wahl-marke { opacity: 0.85; }

.rastertitel { margin: 0 0 0.6rem; color: var(--text-leise); }
.rastertitel strong { color: var(--text); margin-right: 0.5rem; }

/* Der meistgenutzte Handgriff der App: Kriterium lesen, rechts antippen.
   Ueber die volle Fensterbreite lagen dazwischen auf 1440 px ueber 1000 px --
   der Blick muss dann bei jeder Zeile einmal quer. Die Bremse gilt fuer
   Legende und Raster gemeinsam, damit beide buendig bleiben. */
.skalenlegende, #fremd-raster { max-width: 60rem; }
.skalenlegende { margin: 0 0 0.6rem; text-align: right; }

.rasterzeile {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem;
  min-height: 3.4rem;
  padding: 0.5rem 0.9rem; margin-bottom: 0.35rem;
  background: var(--flaeche); border-radius: 10px; box-shadow: var(--schatten);
}
.rasterzeile-name { font-weight: 500; }
.rasterskala { display: flex; gap: 0.3rem; }

.rasterskala label {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 2.4rem; font-weight: 700;
  color: var(--text-leise); background: var(--grund);
  border: 2px solid transparent; border-radius: 8px; cursor: pointer;
}
.rasterskala input { position: absolute; opacity: 0; pointer-events: none; }
.rasterskala label:has(input:focus-visible) { outline: 3px solid var(--stufe); outline-offset: 2px; }
.rasterskala label.gewaehlt { color: #fff; }
.rasterskala label.gewaehlt[data-wert="erreicht"]  { background: var(--gut); }
.rasterskala label.gewaehlt[data-wert="teilweise"] { background: var(--mittel); }
.rasterskala label.gewaehlt[data-wert="nicht"]     { background: var(--offen); }

/* ---------- Navigation ---------- */

.navigation {
  position: fixed; inset: auto 0 0; display: flex; justify-content: center; gap: 0.5rem;
  padding: 0.5rem; background: var(--flaeche); border-top: 1px solid var(--linie);
}
.navigation button {
  padding: 0.5rem 1.1rem; color: var(--text-leise);
  background: transparent; border: 0; min-height: 40px;
}
.navigation button.aktiv { color: var(--stufe); font-weight: 600; background: var(--grund); }

/* ---------- Zuordnung unbekannter Namen ---------- */

.zuordnen {
  padding: 0.8rem 0.9rem; margin-bottom: 0.5rem;
  background: var(--flaeche); border-left: 4px solid var(--mittel);
  border-radius: 10px; box-shadow: var(--schatten);
}
.zuordnen-name { margin: 0 0 0.6rem; }
.zuordnen-zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin-bottom: 0.6rem; font-size: 0.9rem; color: var(--text-leise);
}
.zuordnen select {
  padding: 0.4rem 0.6rem; font: inherit; color: var(--text);
  background: var(--grund); border: 1px solid var(--linie); border-radius: 8px;
}
.zuordnen .knopf-klein + .knopf-klein { margin-left: 0.4rem; }
.knopf-klein.leise { color: var(--text-leise); border-color: transparent; }
.knopf-klein.sammel {
  display: block; margin-bottom: 0.6rem; font-weight: 600;
  color: #fff; background: var(--stufe); border-color: var(--stufe);
}

/* ---------- Beispielmodus ---------- */

.beispielleiste {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 1.5rem; font-size: 0.88rem;
  color: #3a2f12; background: #f3c14b;
}
.beispiel-marke {
  font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: #f3e2b8; background: #3a2f12; border-radius: 5px; padding: 0.1rem 0.45rem;
}
.beispielleiste button {
  padding: 0.2rem 0.6rem; font: inherit; font-size: 0.85rem;
  color: #3a2f12; background: rgb(255 255 255 / 55%);
  border: 1px solid rgb(58 47 18 / 25%); border-radius: 6px;
}
#beispiel-oeffnen em { font-style: normal; opacity: 0.75; font-size: 0.85rem; }

/* ---------- Verlauf eines Kindes ---------- */

.kind[data-kind] { cursor: pointer; }
.kind[data-kind]:hover { background: var(--grund); }
.kind[data-kind]:focus-visible { outline: 3px solid var(--stufe); outline-offset: 2px; }

.kind-titel { margin: 1rem 0 0.25rem; }
#kind-unter { margin-top: 0; }

.band { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.band-stufe {
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.55rem 0.9rem; background: var(--flaeche);
  border-left: 5px solid var(--farbe); border-radius: 10px; box-shadow: var(--schatten);
}
.band-stufe b { color: var(--farbe); }
.band-stufe small { color: var(--text-leise); font-size: 0.8rem; }
.band-pfeil { font-size: 1.2rem; color: var(--text-leise); }
.band-pfeil.hoch { color: var(--gut); }
.band-pfeil.runter { color: var(--offen); }

.tabellenrahmen { overflow-x: auto; }
.zeitraumtabelle {
  width: 100%; border-collapse: collapse;
  background: var(--flaeche); border-radius: 10px; box-shadow: var(--schatten);
}
.zeitraumtabelle th, .zeitraumtabelle td {
  padding: 0.5rem 0.8rem; text-align: left; border-bottom: 1px solid var(--linie);
  vertical-align: top;
}
.zeitraumtabelle thead th {
  font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-leise);
}
.zeitraumtabelle tbody th { font-weight: 600; width: 9rem; }
/* Das Datum unter der Nummer -- „Zeitraum 9" allein sagt niemandem etwas. */
.zeitraum-datum { display: block; font-size: 0.78rem; font-weight: 400;
                  color: var(--text-leise); white-space: nowrap; }
.zeitraumtabelle tr:last-child td, .zeitraumtabelle tr:last-child th { border-bottom: 0; }
.beleg-spalte { color: var(--text-leise); font-style: italic; max-width: 26rem; }

.bilanz { display: inline-flex; gap: 0.45rem; font-variant-numeric: tabular-nums; }
.bilanz span { font-weight: 600; }
.b-gut { color: var(--gut); }
.b-mittel { color: var(--mittel); }
.b-offen { color: var(--offen); }
.leise { color: var(--text-leise); font-weight: 400; }

.coaching {
  padding: 0.8rem 1rem; margin-bottom: 0.5rem;
  background: var(--flaeche); border-left: 5px solid var(--linie);
  border-radius: 10px; box-shadow: var(--schatten);
}
.coaching.hoch { border-left-color: var(--gut); }
.coaching.runter { border-left-color: var(--offen); }
.coaching-kopf { margin: 0; }
.coaching-text { margin: 0.5rem 0 0; color: var(--text-leise); }
.gruende { margin: 0.5rem 0 0; padding-left: 1.1rem; color: var(--text-leise); font-size: 0.92rem; }
.marke-klein {
  margin-left: 0.4rem; padding: 0.05rem 0.4rem; font-size: 0.78rem;
  color: var(--text-leise); background: var(--grund); border-radius: 5px;
}


/* ---------- Breite Bildschirme ---------- */

@media (min-width: 60rem) {
  .inhalt { max-width: 78rem; }

  /* zwei Kinder je Reihe -- 25 Namen passen so ohne langes Scrollen */
  #klassenliste { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.5rem; }

  /* die Erfassung bleibt einspaltig: eine Spalte je Kriterium hält den Blick ruhig */
  .rasterzeile { padding: 0.55rem 1.1rem; }
}

@media (min-width: 78rem) {
  #klassenliste { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Coaching-Bogen ---------- */

.knopf-gross.schmal { width: auto; padding-inline: 1.5rem; margin: 1rem 0 0; }

.bogen { width: 100%; border-collapse: collapse; background: var(--flaeche);
         border-radius: 10px; box-shadow: var(--schatten); overflow: hidden; }
.bogen th, .bogen td { border: 1px solid var(--linie); padding: 0.4rem 0.6rem; }
.bogen thead th { background: var(--grund); font-size: 0.85rem; }
.bogen .zr { text-align: center; }
.bogen .sl { width: 2.2rem; text-align: center; font-size: 0.78rem; color: var(--text-leise); }
.bogen .kriterienspalte { text-align: left; min-width: 18rem; }
.bogen tbody th { text-align: left; font-weight: 500; vertical-align: top; }

.teilkriterien { margin: 0.35rem 0 0; padding-left: 1rem; font-size: 0.85rem;
                 color: var(--text-leise); font-weight: 400; }

.bogen .wert { width: 2.2rem; text-align: center; font-weight: 700; font-size: 1.05rem; }
.bogen .wert.erreicht { color: var(--gut); }
.bogen .wert.teilweise { color: var(--mittel); }
.bogen .wert.nicht { color: var(--offen); }
.bogen .wert.ohne { color: var(--linie); }
/* Abweichung zwischen Selbst- und Fremdsicht -- der Gesprächsstoff */
.bogen .wert.uneins { background: #fdf3d7; }
@media (prefers-color-scheme: dark) { .bogen .wert.uneins { background: #40371d; } }

.legende { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--text-leise); }

.beleg-zitat { margin: 0 0 0.5rem; padding: 0.7rem 1rem; background: var(--flaeche);
               border-left: 4px solid var(--stufe); border-radius: 0 10px 10px 0;
               box-shadow: var(--schatten); }
.beleg-zitat p { margin: 0; }
.beleg-zu { font-size: 0.82rem; color: var(--text-leise); margin-bottom: 0.25rem !important; }

/* ---------- Entscheidung ---------- */

.entscheidung { display: grid; gap: 0.5rem; margin-bottom: 1.25rem; }
@media (min-width: 52rem) { .entscheidung { grid-template-columns: repeat(3, 1fr); } }

.entscheidung-feld {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 0.85rem 1rem; background: var(--flaeche);
  border: 2px solid var(--linie); border-radius: 10px; cursor: pointer;
}
.entscheidung-feld input { position: absolute; opacity: 0; pointer-events: none; }
.entscheidung-titel { font-weight: 600; }
.entscheidung-text { font-size: 0.88rem; color: var(--text-leise); }
.entscheidung-feld.gewaehlt { border-color: var(--stufe); background: var(--grund); }
.entscheidung-feld[data-wert="runter"].gewaehlt { border-color: var(--offen); }
.entscheidung-feld:has(input:focus-visible) { outline: 3px solid var(--stufe); outline-offset: 2px; }

.gruendeliste { display: grid; gap: 0.3rem; }
.grund { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.5rem 0.7rem;
         background: var(--flaeche); border-radius: 8px; box-shadow: var(--schatten); }
.grund input { margin-top: 0.2rem; }

.zwei-spalten { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .zwei-spalten { grid-template-columns: 1fr 1fr; align-items: end; } }
.haken-feld { display: flex; align-items: center; gap: 0.6rem; }
.haken-feld > span { font-weight: 400; margin: 0; }

textarea { width: 100%; padding: 0.6rem 0.7rem; font: inherit; color: var(--text);
           background: var(--grund); border: 2px solid var(--linie); border-radius: 8px;
           resize: vertical; }
textarea:focus-visible { outline: 3px solid var(--stufe); outline-offset: 1px; }
#begruendung-pflicht { font-style: normal; font-weight: 400; color: var(--text-leise); }

/* ---------- Druck: nur der Bogen ---------- */

/* ---------- Auskunft nach Art. 15 DSGVO ----------
   Ein Blatt zum Aushaendigen: alles, was ueber ein Kind gespeichert ist.
   Auf Papier gedacht, deshalb schmale Bahn und ruhige Typografie. */

.auskunft { max-width: 52rem; margin-top: 1rem; }
.auskunft h1 { margin: 0 0 0.2rem; font-size: 1.5rem; }
.auskunft h2 {
  margin: 2rem 0 0.6rem; font-size: 1.05rem;
  padding-bottom: 0.3rem; border-bottom: 1px solid var(--linie);
}
.auskunft-unter { margin: 0 0 1.25rem; color: var(--text-leise); font-size: 0.92rem; }

.auskunft-kopf { display: grid; gap: 0.35rem; margin: 0; }
@media (min-width: 44rem) { .auskunft-kopf { grid-template-columns: 1fr 1fr; } }
.auskunft-kopf > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0.8rem; background: var(--flaeche);
  border-radius: 8px; box-shadow: var(--schatten);
}
.auskunft-kopf dt { color: var(--text-leise); }
.auskunft-kopf dd { margin: 0; font-weight: 600; text-align: right; }

.auskunft-tabelle { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.auskunft-tabelle th, .auskunft-tabelle td {
  padding: 0.4rem 0.6rem; text-align: left; border-bottom: 1px solid var(--linie);
}
.auskunft-tabelle thead th { color: var(--text-leise); font-size: 0.85rem; }

.auskunft-block {
  padding: 0.7rem 0.9rem; margin-bottom: 0.5rem;
  background: var(--flaeche); border-radius: 8px; box-shadow: var(--schatten);
  break-inside: avoid;
}
.auskunft-block p { margin: 0 0 0.4rem; font-size: 0.92rem; }
.auskunft-block p:last-child { margin-bottom: 0; }
.auskunft-block-kopf { font-weight: 600; }
.auskunft-werte { margin: 0 0 0.4rem; padding-left: 1.1rem; font-size: 0.9rem; line-height: 1.5; }
.auskunft-beleg { color: var(--text-leise); }
.auskunft-klein { font-size: 0.85rem; color: var(--text-leise); }
.auskunft-leer { color: var(--text-leise); font-style: italic; }
.auskunft-erlaeuterung { padding-left: 1.1rem; font-size: 0.9rem; line-height: 1.6; }
.auskunft-fussnote {
  margin-top: 1rem; font-size: 0.88rem; color: var(--text-leise);
  padding: 0.6rem 0.8rem; background: var(--grund); border-radius: 8px;
}

@media print {
  .beispielleiste, .leiste, .navigation, .kopf-logo-feld, .leer-bild,
  #coaching-zurueck, #coaching-drucken,
  #auskunft-zurueck, #auskunft-drucken, .hinweis { display: none !important; }

  /* Die Auskunft steht auf eigenem Papier: Der Kopf mit Klasse und Schuljahr
     gehoert nicht darueber, die Angaben stehen im Blatt selbst. */
  .auskunft { max-width: none; margin-top: 0; }
  .auskunft-kopf > div, .auskunft-block { box-shadow: none; border: 1px solid #ccc; }
  .auskunft-fussnote { border: 1px solid #ccc; }
  body { background: #fff; font-size: 11pt; }
  .kopf { background: none; color: #000; padding: 0; border-bottom: 2px solid #000; }
  .inhalt { max-width: none; padding: 0; }
  .bogen, .beleg-zitat, .entscheidung-feld, .grund { box-shadow: none; }
  .bogen .wert.uneins { background: #eee; }
  .entscheidung-feld { break-inside: avoid; }
  h2 { margin-top: 1rem; }
  /* Platz für die Unterschriften */
  #formular-coaching::after {
    content: "Unterschrift Schüler/Schülerin                    Unterschrift Klassenlehrkraft";
    display: block; margin-top: 3rem; padding-top: 0.4rem;
    border-top: 1px solid #000; font-size: 10pt; white-space: pre;
  }
}

/* ---------- Gleiche Höhen bei nebeneinanderstehenden Kästen ----------
   Grid-Kinder strecken sich per Vorgabe -- außer man setzt align-items auf
   start. Genau das hatte ich an mehreren Stellen getan, dadurch standen
   verschieden hohe Kästen nebeneinander. */

#klassenliste { align-items: stretch; }
#klassenliste .kind { margin-bottom: 0; height: 100%; }
@media (min-width: 60rem) { #klassenliste { gap: 0.5rem; } }

.entscheidung { align-items: stretch; }
.entscheidung-feld { height: 100%; }

.zwei-spalten > * { margin-top: 0; }

/* ---------- Datei-Bereich ---------- */

.knopfreihe { display: grid; gap: 0.6rem; margin-top: 1.25rem; }
.knopfreihe .knopf-gross,
.knopfreihe .knopf-leise { margin: 0; }
.knopfreihe .knopf-gross:disabled { opacity: 0.45; cursor: default; }

.angaben { display: grid; gap: 0.35rem; margin: 0; }
@media (min-width: 44rem) { .angaben { grid-template-columns: 1fr 1fr; } }
.angaben > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0.8rem; background: var(--flaeche);
  border-radius: 8px; box-shadow: var(--schatten);
}
.sicherung-liste {
  list-style: none; margin: 0.6rem 0 0; padding: 0;
  display: grid; gap: 0.2rem;
  font-size: 0.85rem; color: var(--text-leise);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.zuletzt { margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--linie); }
.zuletzt-kopf { margin: 0 0 0.4rem; font-size: 0.85rem; color: var(--text-leise); }
.zuletzt .knopf-gross { margin-top: 0; }
.zuletzt .knopf-winzig { margin-top: 0.5rem; }

.angaben dt { color: var(--text-leise); }
.angaben dd { margin: 0; font-weight: 600; text-align: right; }

/* ---------- Fußzeile: dezent, mittig, zwei Zeilen ---------- */

.fusszeile {
  max-width: 44rem;
  margin: 2.5rem auto 0;
  padding: 1.25rem 1.5rem 4.5rem;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--text-leise);
  border-top: 1px solid var(--linie);
}

.fusszeile p { margin: 0; }
.fusszeile p + p { margin-top: 0.5rem; }

.zur-startseite {
  color: var(--text-leise);
  text-decoration: none;
  border-bottom: 1px solid var(--linie);
  padding-bottom: 1px;
}
.zur-startseite::before { content: "← "; }
.zur-startseite:hover { color: var(--text); border-bottom-color: var(--text-leise); }
.zur-startseite:focus-visible { outline: 3px solid var(--stufe); outline-offset: 3px; }

/* Impressum links, „Zur Startseite" rechts auf derselben Höhe wie die letzte
   Zeile. `flex-end` richtet den Verweis am unteren Rand des Textblocks aus --
   er steht damit neben „Verantwortlich: Joscha Falck." und nicht darunter. */
.fusszeile-klein {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem;
  margin: 1.5rem 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-leise);
}
.fusszeile-klein a { flex: none; color: var(--stufe); }

@media (max-width: 34rem) {
  .fusszeile-klein { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}
@media print { .fusszeile { display: none; } }

.zeitraumwahl { display: inline-flex; align-items: center; gap: 0.4rem;
                font-size: 0.85rem; color: var(--text-leise); }
.zeitraumwahl select {
  padding: 0.15rem 0.4rem; font: inherit; font-size: 0.85rem; font-weight: 600;
  color: var(--text); background: var(--grund);
  border: 1px solid var(--linie); border-radius: 6px;
}
.knopf-winzig {
  padding: 0.15rem 0.5rem; font-size: 0.8rem; color: var(--text-leise);
  background: transparent; border: 1px solid var(--linie); border-radius: 6px;
}

/* ---------- Anleitung ---------- */

/* Fläche, Rahmen, Rundung und Innenabstand stehen weiter oben bei
   `.einstieg-mehr` -- gemeinsam mit dem Materialverweis, damit die beiden
   nicht auseinanderlaufen. */
.anleitung-kurz summary { font-weight: 600; cursor: pointer; }
.anleitung-kurz ol { margin: 0.8rem 0 0; padding-left: 1.2rem; color: var(--text-leise);
                     font-size: 0.92rem; line-height: 1.55; }
.anleitung-kurz li { margin-bottom: 0.5rem; }
.anleitung-kurz strong { color: var(--text); }
.anleitung-kurz > p { margin: 0.8rem 0 0; font-size: 0.88rem; color: var(--text-leise); }

.schritte { counter-reset: schritt; list-style: none; margin: 1.25rem 0 0; padding: 0;
            display: grid; gap: 0.6rem; }
.schritte > li {
  counter-increment: schritt; position: relative;
  padding: 1rem 1.2rem 1rem 3.6rem;
  background: var(--flaeche); border-radius: var(--radius); box-shadow: var(--schatten);
}
.schritte > li::before {
  content: counter(schritt);
  position: absolute; left: 1.1rem; top: 1rem;
  display: flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem;
  font-size: 0.9rem; font-weight: 700; color: #fff;
  background: var(--stufe); border-radius: 50%;
}
.schritte h3 { margin: 0 0 0.4rem; font-size: 1.02rem; }
.schritte p { margin: 0 0 0.5rem; color: var(--text-leise); }
.schritte p:last-child { margin-bottom: 0; }
.schritte strong { color: var(--text); }
.schritte em { font-style: normal; font-weight: 600; color: var(--text); }
code { padding: 0.1rem 0.35rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
       font-size: 0.88em; background: var(--grund); border-radius: 5px; }

/* ---------- Materialspeicher ---------- */

.materialliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
@media (min-width: 44rem) { .materialliste { grid-template-columns: 1fr 1fr; } }

.material-link {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.7rem 0.9rem 0.7rem 2.6rem;
  position: relative;
  text-decoration: none; color: inherit;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 10px; box-shadow: var(--schatten);
}
.material-link:hover { border-color: var(--stufe); }
.material-link:focus-visible { outline: 3px solid var(--stufe); outline-offset: 2px; }

/* Blattsymbol als reine Zier -- „PDF" steht als Wort in der Zeile darunter. */
.material-link::before {
  content: "";
  position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%);
  width: 1rem; height: 1.25rem;
  border: 1.5px solid var(--text-leise); border-radius: 2px;
  background:
    linear-gradient(var(--text-leise), var(--text-leise)) center 40% / 60% 1.5px no-repeat,
    linear-gradient(var(--text-leise), var(--text-leise)) center 62% / 60% 1.5px no-repeat;
}

.material-titel { font-weight: 600; }
.material-zusatz { font-size: 0.85rem; color: var(--text-leise); }

/* ---------- Rückweg aufs Kindergerät (QR) ---------- */

.stufencode {
  margin-top: 1.25rem; padding: 1.1rem 1.2rem;
  text-align: center;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: var(--schatten);
}
.stufencode h3 { margin: 0 0 0.3rem; font-size: 1.1rem; }
.stufencode .lang { margin: 0 auto 1rem; max-width: 32rem; }
.stufencode svg { width: min(18rem, 70vw); height: auto; }
/* Die Adresse steht als Rückfall darunter -- klemmt die Kamera, tippt man sie
   ab. Umbruch erzwingen, sonst schiebt sie die Karte auseinander. */
#stufencode-adresse { overflow-wrap: anywhere; margin: 0.6rem auto 0; max-width: 32rem; }
.stufencode .knopf-leise { max-width: 14rem; margin-inline: auto; }

@media print { .stufencode { display: none; } }

/* ---------- Klassen-Link (QR) und Plakat ---------- */

/* Am Bildschirm ein schlichter Kasten wie der Stufencode. Kopfband und
   Fußzeile gehören zum Plakat und bleiben hier unsichtbar. */
.klassencode {
  margin-bottom: 1rem; padding: 1.1rem 1.2rem;
  text-align: center;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: var(--schatten);
}
.klassencode-band { display: none; }
.klassencode-titel { margin: 0 0 0.2rem; font-size: 1.1rem; }
.klassencode-unter { margin: 0 0 1rem; color: var(--text-leise); }
.klassencode svg { width: min(18rem, 70vw); height: auto; }
.klassencode-anleitung { margin: 0.8rem auto 0; max-width: 32rem; }
#klassencode-adresse { overflow-wrap: anywhere; margin: 0.4rem auto 0; max-width: 32rem; }
.klassencode-fuss { display: none; }
.klassencode-knoepfe { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1rem; }

@media print {
  /* Im normalen Druck (Coaching-Bogen, Auskunft) hat der Kasten nichts verloren … */
  .klassencode { display: none; }

  /* … als Plakat ist er das Einzige auf dem Blatt. Die Klasse `plakat-druck`
     setzt der Druckknopf am Kasten und nimmt sie nach dem Druck wieder weg. */
  body.plakat-druck :is(.kopf, .werkzeuge, .punktlegende, #klassenliste) { display: none !important; }
  body.plakat-druck .klassencode {
    display: block; margin: 0; padding: 0;
    border: 0; box-shadow: none; background: none;
  }
  body.plakat-druck .klassencode-band { display: block; width: 100%; height: auto; margin-bottom: 1.2cm; }
  body.plakat-druck .klassencode-titel { font-size: 30pt; margin: 0 0 0.3cm; }
  body.plakat-druck .klassencode-unter { font-size: 15pt; margin-bottom: 1cm; }
  body.plakat-druck .klassencode svg { width: 11cm; }
  body.plakat-druck .klassencode-anleitung { font-size: 13pt; max-width: none; margin-top: 1cm; }
  /* Die Adresse zum Abtippen: die allgemeine Druckregel blendet .hinweis aus,
     auf dem Plakat soll sie stehen. */
  body.plakat-druck #klassencode-adresse { display: block !important; font-size: 10pt; }
  body.plakat-druck .klassencode-fuss { display: block; margin-top: 1.2cm; font-size: 10pt; color: #555; }
  body.plakat-druck .klassencode-knoepfe { display: none; }
}

/* Rechtliche Verweise in den Fußzeilen -- Impressum muss von jeder Seite aus
   erreichbar sein, nicht nur von der Startseite. */
.fuss-rechtliches { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; }
.fusszeile-klein .fuss-rechtliches { justify-content: flex-start; gap: 1rem; flex: none; }
.fusszeile-klein .fuss-rechtliches a { color: var(--stufe); }