:root {
  color-scheme: light;
  --grund: #f6f7f9;
  --flaeche: #ffffff;
  --rand: #dfe3e8;
  --text: #1d2229;
  --text-leise: #5d6773;
  --akzent: #1f5f8b;
  --akzent-leise: #e8f1f8;
  --gut: #1f7a4d;
  --gut-leise: #e6f4ec;
  --warn: #8a5a00;
  --warn-leise: #fdf2dc;
  --fehler: #a12a2a;
  --fehler-leise: #fbeaea;
  /* Bloecke, deren Platz feststeht: feste Termine und die beiden Evaluationen. Ein warmer
     Ton, weil der uebrige Plan kuehl blau ist -- der Unterschied muss auch im Ausdruck in
     Graustufen bleiben, deshalb ist der feste Ton zugleich der dunklere. */
  --fest: #8a5a00;
  --fest-leise: #f6ecd8;
  /* Die Zeile, in der gerade getippt wird. Kraeftiger als der Ton der abgeleiteten und
     der Reservezeilen, damit sie sich auch auf diesen abhebt. */
  --zeile-aktiv: #cfe2f0;
  --radius: 10px;
  /* Wie breit die Seite hoechstens wird. Auf schmaleren Bildschirmen greift der Deckel
     nicht, dann zaehlt die Fensterbreite: Die breiten Tabellen bekommen so viel Platz,
     wie da ist, und der Querschieber bleibt kurz oder verschwindet ganz. */
  --seitenbreite: 118rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1.25rem 3rem;
  background: var(--grund);
  color: var(--text);
  font: 16px/1.55 "Segoe UI", system-ui, sans-serif;
}

main { max-width: var(--seitenbreite); margin: 0 auto; }

.kopf {
  max-width: var(--seitenbreite);
  margin: 0 auto;
  padding: 2rem 0 1.25rem;
}

.kopf h1 {
  margin: 0;
  font-size: 1.9rem;
  letter-spacing: -0.01em;
}

.untertitel {
  margin: 0.15rem 0 0;
  color: var(--text-leise);
}

/* Titel links, Handbuch rechts. */
.kopfzeile {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Der Knopf zum Handbuch. Kraeftiger als die Reiter und abseits von ihnen: Hilfe soll
   auffallen, wenn man sie sucht, und nicht mitgezaehlt werden, wenn man sie nicht sucht. */
.knopf-handbuch {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--flaeche);
  color: var(--akzent);
  border: 1px solid var(--akzent);
  border-radius: var(--radius);
  padding: 0.5rem 0.9rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  margin-top: 0.4rem;
}

.knopf-handbuch:hover { background: var(--akzent-leise); }

.knopf-handbuch.aktiv {
  background: var(--akzent);
  color: #fff;
}

/* Das Fragezeichen im Kreis — die Marke, nach der man sucht. */
.fragezeichen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--akzent);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
}

.knopf-handbuch.aktiv .fragezeichen {
  background: #fff;
  color: var(--akzent);
}

.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.25rem;
}

.karte h2 {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
}

.karte h3 {
  margin: 1.4rem 0 0.3rem;
  font-size: 1rem;
}

.hinweis {
  margin: 0 0 1rem;
  color: var(--text-leise);
  font-size: 0.92rem;
  max-width: 52rem;
}

.formular {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: flex-end;
}

.feld { display: flex; flex-direction: column; gap: 0.25rem; }
.feld.schmal { max-width: 11rem; }

.feld label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-leise);
}

.optional { font-weight: 400; }

input {
  font: inherit;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--rand);
  border-radius: 7px;
  background: var(--flaeche);
  color: var(--text);
}

input:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 1px;
}

button {
  font: inherit;
  cursor: pointer;
  border-radius: 7px;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
}

.knopf {
  background: var(--akzent);
  color: #fff;
  font-weight: 600;
}

.knopf-zweit {
  background: var(--akzent-leise);
  color: var(--akzent);
  border-color: #cfe0ee;
  font-weight: 600;
}

.knopf-still {
  background: transparent;
  color: var(--text-leise);
  border-color: var(--rand);
}

button:hover { filter: brightness(0.96); }

.aktionen {
  display: flex;
  gap: 0.7rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.marken {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0;
  margin: 0.9rem 0 0;
}

.marken li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--akzent-leise);
  border: 1px solid #cfe0ee;
  border-radius: 999px;
  padding: 0.2rem 0.3rem 0.2rem 0.75rem;
  font-size: 0.88rem;
}

.marken button {
  border: 0;
  background: transparent;
  color: var(--text-leise);
  padding: 0 0.35rem;
  font-size: 1.05rem;
  line-height: 1;
}

.marken button:hover { color: var(--fehler); }

.leer {
  color: var(--text-leise);
  font-size: 0.88rem;
  margin: 0.9rem 0 0;
  font-style: italic;
}

.meldung {
  border-left: 4px solid var(--akzent);
  font-size: 0.95rem;
}

.meldung.gut { border-left-color: var(--gut); background: var(--gut-leise); }
.meldung.warnung { border-left-color: var(--warn); background: var(--warn-leise); }
.meldung.fehler { border-left-color: var(--fehler); background: var(--fehler-leise); }

.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.8rem;
  margin-bottom: 1.25rem;
}

.kennzahl {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.kennzahl .wert {
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.kennzahl .etikett {
  font-size: 0.8rem;
  color: var(--text-leise);
}

.kennzahl.hervor .wert { color: var(--warn); }

.woche {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin-bottom: 0.7rem;
}

.woche-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}

.woche-titel { font-weight: 650; }

.woche-zahl { font-size: 0.85rem; color: var(--text-leise); }

.woche.verkuerzt { border-left: 4px solid var(--warn); }
.woche.verkuerzt .woche-zahl { color: var(--warn); font-weight: 600; }

.tage {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.tag {
  border: 1px solid var(--rand);
  border-radius: 8px;
  padding: 0.4rem 0.65rem;
  font-size: 0.85rem;
  min-width: 7.5rem;
}

.tag .name { font-weight: 600; display: block; }
.tag .datum { color: var(--text-leise); }
.tag .bloecke { color: var(--text-leise); font-size: 0.8rem; }

.tag.fehlt {
  border-style: dashed;
  background: var(--warn-leise);
  color: var(--warn);
}

.tabelle-huelle { overflow-x: auto; }

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9rem;
}

th, td {
  text-align: left;
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid var(--rand);
  white-space: nowrap;
}

th { color: var(--text-leise); font-weight: 600; }

.fuss {
  max-width: var(--seitenbreite);
  margin: 2rem auto 0;
  color: var(--text-leise);
  font-size: 0.85rem;
}

[hidden] { display: none !important; }

.hinweisliste {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.hinweisliste li {
  background: var(--warn-leise);
  border-left: 3px solid var(--warn);
  border-radius: 0 7px 7px 0;
  padding: 0.5rem 0.8rem;
  font-size: 0.9rem;
  color: var(--warn);
}

.hinweisliste:empty { display: none; }

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

.navigation {
  display: flex;
  gap: 0.4rem;
  margin-top: 1.1rem;
  border-bottom: 1px solid var(--rand);
}

.reiter {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0.5rem 0.9rem;
  color: var(--text-leise);
  font-weight: 600;
}

.reiter:hover { color: var(--text); }

.reiter.aktiv {
  color: var(--akzent);
  border-bottom-color: var(--akzent);
}

/* ---------------------------------------------------------------- Stammdaten */

select {
  font: inherit;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--rand);
  border-radius: 7px;
  background: var(--flaeche);
  color: var(--text);
}

/* Waechst mit der Seite, aber nicht ins Uferlose: Ein Auswahlfeld ueber die halbe
   Bildschirmbreite liest sich nicht besser, es steht nur verloren da. */
.feld.breit { flex: 1 1 22rem; max-width: 34rem; }

.ankreuz {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}

.ankreuz input { width: 1rem; height: 1rem; }

.knopf-still.klein {
  padding: 0.2rem 0.55rem;
  font-size: 0.82rem;
}

.knopf-still.loeschen:hover {
  color: var(--fehler);
  border-color: var(--fehler);
}

.zeilenaktionen {
  display: flex;
  gap: 0.35rem;
  justify-content: flex-end;
}

tr.beachten td { background: var(--warn-leise); }

/* Ein Hinweis, der nicht uebersehen werden darf -- etwa beim Abrufen, wenn der Block
   nicht in den Turnus dieser Klasse passt. Gleiche Gestalt wie die Hinweisliste, damit
   beides als dieselbe Art von Auskunft zu erkennen ist. */
p.beachten {
  background: var(--warn-leise);
  border-left: 3px solid var(--warn);
  border-radius: 0 7px 7px 0;
  padding: 0.5rem 0.8rem;
  color: var(--warn);
}

/* ------------------------------------------------------------------ Breite Tabellen

   Die erste Spalte bleibt beim Querscrollen stehen.

   Zwölf Spalten passen auf keinen Bildschirm. Wer in der Vorgabentabelle den Pädagogen
   einträgt, hat die Lerneinheit dann längst aus dem Bild geschoben und trägt ihn bei der
   falschen ein. In der Pädagogenliste verschwindet ebenso das Kürzel, während rechts die
   Knöpfe "Ändern" und "Löschen" stehen — und wer die sucht, weiß hinterher nicht mehr,
   zu wem sie gehören.

   Gilt für alle Tabellen in einer scrollenden Hülle. Passt eine hinein, fällt die Regel
   nicht auf: Ohne Überlauf gibt es nichts, wovor etwas stehen bleiben müsste.

   Der eigene Hintergrund ist nicht Zierde: Ohne ihn scheinen die scrollenden Spalten
   durch die stehende hindurch. */
.tabelle-huelle th:first-child,
.tabelle-huelle td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--flaeche);
  /* Die Kante zeigt, dass hier etwas stehen bleibt und der Rest daran vorbeizieht. */
  box-shadow: 1px 0 0 var(--rand);
}

.tabelle-huelle tr.beachten td:first-child { background: var(--warn-leise); }

.tabelle-huelle { margin-top: 1.2rem; }

.tabelle-huelle:has(table tbody:empty) { display: none; }

/* ------------------------------------------------------------------ Vorgaben */

.auszug {
  background: #1d2229;
  color: #e7ebf0;
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  font: 12.5px/1.5 "Cascadia Mono", Consolas, monospace;
  overflow-x: auto;
  max-height: 32rem;
  margin: 0;
}

.eingabezeile {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.55rem;
  background: var(--grund);
}

.eingabezeile .feld label { font-size: 0.75rem; }

tr.abgeleitet td {
  color: var(--text-leise);
  font-style: italic;
  background: var(--akzent-leise);
}

input[type="file"] {
  padding: 0.35rem 0.5rem;
  background: var(--flaeche);
}

.zeilenauswahl {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.15rem 0.3rem;
  border: 1px solid var(--rand);
  border-radius: 6px;
  background: var(--flaeche);
  color: var(--text);
  min-width: 5.5rem;
}

.zeilenauswahl.fehlt {
  border-color: var(--warn);
  background: var(--warn-leise);
}

.knopf-zweit.klein {
  padding: 0.2rem 0.6rem;
  font-size: 0.82rem;
}

.zeileneingabe {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.15rem 0.35rem;
  border: 1px solid var(--rand);
  border-radius: 6px;
  background: var(--flaeche);
  color: var(--text);
  max-width: 9rem;
}

.zeileneingabe.schmal { max-width: 4.5rem; }

tr.reserve td {
  background: var(--akzent-leise);
}

tr.reserve td:first-child { font-style: italic; }

/* ------------------------------------------------------------------- Plan */

.ankreuzreihe {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  padding: 0.35rem 0;
}

.ankreuzreihe .ankreuz { font-size: 0.85rem; }

.planraster { font-size: 0.82rem; table-layout: fixed; }

.planraster th:first-child {
  width: 7.5rem;
  font-weight: 500;
  color: var(--text-leise);
  white-space: nowrap;
}

.planraster td {
  border: 1px solid var(--rand);
  height: 2.6rem;
  vertical-align: top;
  padding: 0.25rem 0.4rem;
  white-space: normal;
}

.planraster td.belegt { background: var(--akzent-leise); }

/* ------------------------------------------------------------------- Handbuch */

/* Das Handbuch im Reiter "Hilfe". Schmaler als der Rest der Anwendung: Fliesstext ueber
   die volle Breite einer Tabellenseite liest sich nicht. */
.handbuch { max-width: 62rem; line-height: 1.55; }

.handbuch h1 { font-size: 1.6rem; margin: 0 0 0.3rem; }
.handbuch h2 {
  font-size: 1.15rem;
  margin: 2rem 0 0.6rem;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid var(--akzent);
  scroll-margin-top: 1rem;
}
.handbuch h3 { font-size: 1rem; color: var(--akzent); margin: 1.4rem 0 0.4rem; }
.handbuch h4 { font-size: 0.95rem; margin: 1.1rem 0 0.3rem; }
.handbuch h1, .handbuch h3, .handbuch h4 { scroll-margin-top: 1rem; }

.handbuch p { margin: 0 0 0.7rem; }
.handbuch hr { border: 0; border-top: 1px solid var(--rand); margin: 1.6rem 0; }
.handbuch ul, .handbuch ol { margin: 0 0 0.8rem; padding-left: 1.4rem; }
.handbuch li { margin-bottom: 0.25rem; }
.handbuch li > ul { margin: 0.25rem 0 0.3rem; }

.handbuch code {
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.88em;
  background: var(--grund);
  padding: 0.1em 0.3em;
  border-radius: 3px;
}

.handbuch table { margin: 0.4rem 0 1rem; }
.handbuch th { background: var(--akzent-leise); }
.handbuch th, .handbuch td { vertical-align: top; }

/* Die Merksaetze im Handbuch tragen denselben warmen Ton wie die festen Termine im Plan:
   Was hervorgehoben ist, sieht in der ganzen Anwendung gleich aus. */
.handbuch blockquote {
  margin: 0.6rem 0 1rem;
  padding: 0.6rem 0.9rem;
  background: var(--fest-leise);
  box-shadow: inset 3px 0 0 var(--fest);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.handbuch blockquote p:last-child { margin-bottom: 0; }

/* Die Legende zum Raster: zwei Farbproben im Fliesstext. */
.planlegende { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }

.planprobe {
  display: inline-block;
  width: 1.15rem;
  height: 0.85rem;
  border: 1px solid var(--rand);
  border-radius: 3px;
  vertical-align: -0.1rem;
}

.planprobe.belegt { background: var(--akzent-leise); }

.planprobe.fest {
  background: var(--fest-leise);
  box-shadow: inset 3px 0 0 var(--fest);
}

/* Feste Termine und die beiden Evaluationen: Ihr Platz steht fest und ist nicht das
   Ergebnis der Verteilung. Neben der Farbe ein Strich am linken Rand -- Farbe allein
   traegt nicht, weder im Graustufenausdruck noch bei einer Farbsehschwaeche. */
.planraster td.belegt.fest {
  background: var(--fest-leise);
  box-shadow: inset 3px 0 0 var(--fest);
}

.planraster td.gibtesnicht {
  background: repeating-linear-gradient(
    45deg, transparent, transparent 4px, var(--rand) 4px, var(--rand) 5px);
  border-style: dashed;
}

.planthema { display: block; line-height: 1.25; }

.plankuerzel {
  display: block;
  font-weight: 650;
  color: var(--akzent);
}

/* Der Raum steht nur da, wo er vom Stammraum abweicht -- leiser als das Thema und das
   Kuerzel, aber lesbar: Wer den Plan abschreibt, muss ihn mitnehmen. */
.planraum {
  display: block;
  font-size: 0.82rem;
  color: var(--text-leise);
  font-style: italic;
}

.klassenplan h2 { margin-bottom: 0.2rem; }
.klassenplan .tabelle-huelle { margin-top: 0.7rem; }

@media print {
  /* Der Faltschalter traegt die Ueberschrift der Karte und darf deshalb nicht mit den
     uebrigen Knoepfen verschwinden. Sein Pfeil hat auf Papier nichts zu suchen.
     Zugeklappte Karten drucken vollstaendig: Die Regel dafuer gilt nur am Bildschirm. */
  .navigation, .kopf .untertitel, .fuss, button:not(.falter) { display: none !important; }
  .falter-pfeil { display: none !important; }
  .karte { border: 0; padding: 0; margin-bottom: 1.5rem; break-inside: avoid; }
  .klassenplan { break-before: page; }
  .klassenplan:first-of-type { break-before: auto; }

  /* Quer, nicht hoch: Fuenf Tage nebeneinander brauchen die breite Seite. Hochkant
     wurden die Themen auf zwei Zeichen je Zeile gequetscht. */
  @page { size: landscape; margin: 12mm; }

  /* Die Hintergrundfarben muessen mit aufs Papier.
     Browser lassen sie beim Drucken von sich aus weg -- das spart Toner und ist bei
     Webseiten meist richtig. Hier ist es falsch: Die Farbe ist im Plan kein Schmuck,
     sondern die Auskunft, welcher Block feststeht und welcher frei verteilt wurde. Ohne
     diese Zeilen haette man sie am Bildschirm und im PDF nicht. */
  .planraster td, .planprobe {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Der Querschieber gehoert dem Bildschirm. Auf Papier schneidet er ab, was nicht
     hineinpasst -- und das waere der Freitag. */
  .tabelle-huelle { overflow: visible !important; }

  /* Die stehende erste Spalte ebenso: Auf Papier zieht nichts vorbei. */
  .tabelle-huelle th:first-child,
  .tabelle-huelle td:first-child {
    position: static;
    box-shadow: none;
  }

  /* Eine Klassenwoche gehoert zusammen auf eine Seite. */
  .planraster { break-inside: avoid; }

  /* Das Handbuch aus dem Reiter "Hilfe" druckt hochkant und mit Seitenzahl. So laesst
     sich handbuch.pdf jederzeit aus der Anwendung heraus erneuern, ohne ein zweites
     Werkzeug: Reiter Hilfe, drucken, "Als PDF speichern". */
  .handbuch { max-width: none; }
  .handbuch h2 { break-before: page; break-after: avoid; }
  .handbuch h2:first-of-type { break-before: auto; }
  .handbuch h3, .handbuch h4 { break-after: avoid; }
  .handbuch table, .handbuch blockquote { break-inside: avoid; }
  .handbuch a { color: inherit; text-decoration: none; }
}

/* Quer fuer den Plan, hochkant fuer das Handbuch. Eine benannte Seite je Sache, damit
   sich die beiden nicht gegenseitig umstellen. */
@media print {
  .ansicht:not(#ansicht-hilfe) .karte { page: quer; }
  #ansicht-hilfe .karte { page: hoch; }

  @page quer { size: landscape; }

  @page hoch {
    size: A4 portrait;
    margin: 20mm 18mm 20mm;

    @bottom-left {
      content: "StuPlan — Benutzerhandbuch";
      font-size: 8pt;
      color: #5d6773;
    }

    @bottom-right {
      content: "Seite " counter(page) " von " counter(pages);
      font-size: 8pt;
      color: #5d6773;
    }
  }
}

.zeilenauswahl.gesetzt {
  border-color: var(--akzent);
  font-weight: 600;
}

/* Pflegekabinett: erst der Haken, dann — falls gesetzt — die Blockzahl daneben. */
.kabinettzelle {
  white-space: nowrap;
}

.kabinettzelle input[type="checkbox"] {
  margin-right: 0.35rem;
  vertical-align: middle;
}

.kabinettzelle .zeileneingabe {
  width: 3.2rem;
}

/* Gekürzte Zeilen: Die Zahl im Curriculum bleibt sichtbar, damit niemand später rätselt. */
tr.gekuerzt .zeileneingabe {
  border-color: var(--warn);
}

.gekuerzt-vorher {
  color: var(--warn);
  font-size: 0.82rem;
  margin-left: 0.3rem;
}

/* Das Fenster für den Teilfall: Was am Stück läuft und was davor und danach. */
dialog {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  max-width: 34rem;
  background: var(--flaeche);
  color: var(--text);
}

dialog::backdrop {
  background: rgb(29 34 41 / 45%);
}

dialog h3 {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
}

dialog .meldung {
  margin: 1.1rem 0 0;
  padding: 0.7rem 0.9rem;
  border-left-width: 4px;
  border-left-style: solid;
}

/* --------------------------------------------------------------- Auf- und Zuklappen

   Jede Karte laesst sich an ihrer Ueberschrift zuklappen, jeder Klassenblock an seinem
   Namen. Sonst steht auf einer Seite mehr, als auf einen Bildschirm passt, und wer unten
   etwas eintraegt, hat den Anfang laengst aus dem Bild geschoben.

   Der Stand haelt sich ueber das Neuzeichnen und ueber das Schliessen hinweg: Wer eine
   Karte zuklappt, will sie nicht nach dem naechsten Uebernehmen wieder offen sehen. */

.falter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
}

.falter:hover { color: var(--akzent); filter: none; }

.falter:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
  border-radius: 4px;
}

.falter-pfeil {
  flex: none;
  font-size: 0.75em;
  color: var(--text-leise);
  transition: transform 0.15s ease;
}

.zugeklappt > * > .falter .falter-pfeil,
.zugeklappt > * > * > .falter .falter-pfeil { transform: rotate(-90deg); }

/* Nur am Bildschirm: Auf Papier gehoert der ganze Inhalt aufs Blatt, gleich wie die
   Karte gerade steht. */
@media screen {
  .karte.zugeklappt > *:not(h2) { display: none; }
  .karte.zugeklappt > h2 { margin-bottom: 0; }

  .woche.zugeklappt > *:not(.woche-kopf) { display: none; }
  .woche.zugeklappt > .woche-kopf { margin-bottom: 0; }
}

/* Im Klassenblock steht neben dem Namen noch die Bilanz und "Weitere Zeile" -- der
   Schalter nimmt deshalb nur so viel Platz, wie der Name braucht. */
.woche-titel .falter { width: auto; }

.aktionen.knapp { margin-top: 0.5rem; }

/* ---------------------------------------------- Die vereinbarten Bloecke im Fenster

   Bewusst nicht die Vorgabentabelle: Deren erste Spalte traegt lange Themen und hat
   deshalb 13rem Mindestbreite. Im Fenster steht dort ein Datum, und die 13rem schoben
   die letzte Spalte -- den Knopf zum Entfernen -- aus dem Bild. */
.gastliste { margin-bottom: 0.9rem; }

.gastliste th,
.gastliste td {
  padding: 0.35rem 0.5rem;
}

.gastliste td:first-child { white-space: nowrap; }

.gastliste .zeileneingabe.schmal { max-width: 3.6rem; }

/* Die Knoepfe einer Zeile nebeneinander, ohne Umbruch mitten in der Beschriftung. */
.gastknoepfe {
  display: flex;
  gap: 0.4rem;
  white-space: nowrap;
}

/* ------------------------------------------------------- Vorgabentabelle je Klasse

   Zwoelf Spalten, und die erste traegt Themen wie "Menschen mit Einschraenkungen des
   Herz-Kreislauf-Systems begleiten". In einer Zeile gesetzt schiebt sie alles Uebrige
   aus dem Bild. Sie darf deshalb als einzige umbrechen: zwei kuerzere Zeilen kosten
   weniger als ein Querschieber ueber die ganze Tabelle. */
.vorgabentabelle th:first-child,
.vorgabentabelle td:first-child {
  white-space: normal;
  min-width: 13rem;
  max-width: 24rem;
}

/* ------------------------------------------------------------- Die aktive Zeile

   Wo gerade getippt wird, faerbt sich die ganze Zeile. In einer Tabelle mit zwoelf
   Spalten ist das noetig: Wer rechts den Paedagogen eintraegt, muss ohne Hinsehen
   wissen, zu welcher Lerneinheit er gehoert.

   Die erste Spalte steht beim Querschieben still und traegt dafuer einen eigenen
   Hintergrund -- sie muss eigens mitgefaerbt werden, sonst bliebe ausgerechnet die
   Spalte weiss, an der man die Zeile wiedererkennt. */
.tabelle-huelle tr:focus-within td,
.tabelle-huelle tr:focus-within th,
.tabelle-huelle tr:focus-within td:first-child,
.tabelle-huelle tr:focus-within th:first-child {
  background: var(--zeile-aktiv);
}

/* Dieselbe Auskunft fuer die Zeilenformulare, die keine Tabelle sind. */
.eingabezeile:focus-within {
  background: var(--zeile-aktiv);
  border-color: #cfe0ee;
}

/* ------------------------------------------------------- Reservezeile entfernen

   Steht in der Zeile selbst statt in einer eigenen Spalte: Eine dreizehnte Spalte
   traefe alle Zeilen, obwohl nur die Reservezeilen sie brauchen -- und die Tabelle
   passt gerade eben auf den Bildschirm. */
.reservezelle { white-space: nowrap; }

.reservezelle .zeileneingabe { max-width: 8.5rem; }

.zeilenweg {
  border: 0;
  background: transparent;
  color: var(--text-leise);
  padding: 0.1rem 0.35rem;
  margin-left: 0.25rem;
  font-size: 0.95rem;
  line-height: 1;
}

.zeilenweg:hover {
  color: var(--fehler);
  background: var(--fehler-leise);
  filter: none;
}

/* Der Hinweis zum vereinbarten Termin steht unter der Zeile, nicht neben den Feldern:
   Er gilt der ganzen Zeile und waere in der Flexreihe ein schmaler Streifen. */
.eingabezeile .eingabehinweis {
  margin: 0.6rem 0 0;
}

/* ------------------------------------------------------------- Abwesenheitsraster

   Eine Zeile je Person, eine Spalte je Unterrichtstag. Gelesen wird es in beide
   Richtungen: eine Zeile entlang, wann jemand fehlt; eine Spalte hinunter, wer an
   diesem Tag fehlt. Deshalb sind die Spalten schmal und die Marken darin kurz --
   fuenf Wochen muessen nebeneinander passen. */

.abwesenheitsraster { font-size: 0.85rem; }

.abwesenheitsraster th:first-child {
  font-weight: 650;
  white-space: nowrap;
}

.abwesenheitstag {
  text-align: center;
  padding: 0.35rem 0.3rem;
  font-weight: 500;
  line-height: 1.2;
}

.abwesenheitstag .tagname { display: block; font-weight: 650; }
.abwesenheitstag .tagdatum { display: block; font-size: 0.75rem; }

.abwesenheitszelle {
  text-align: center;
  padding: 0.3rem 0.25rem;
  vertical-align: middle;
}

/* Der Strich zeigt, wo eine neue Woche anfaengt. Ohne ihn verliert man beim
   Querlesen die Zaehlung. */
.abwesenheitsraster .wochenbeginn { border-left: 2px solid var(--rand); }

.abwesenheitssumme {
  text-align: right;
  font-weight: 650;
  white-space: nowrap;
}

/* Die Marke in der Zelle. Mehrere Eintraege an einem Tag stehen untereinander. */
.abw {
  display: block;
  border-radius: 999px;
  padding: 0.1rem 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.abw + .abw { margin-top: 0.2rem; }

.abw-weg { background: var(--warn-leise); color: var(--warn); }
.abw-da { background: var(--gut-leise); color: var(--gut); }
.abw-fest { background: var(--akzent-leise); color: var(--akzent); }

/* Die Zeichenerklaerung benutzt dieselben Marken, ist aber nichts zum Anklicken. */
.zeichenerklaerung li {
  background: transparent;
  border: 0;
  padding: 0;
  gap: 0.35rem;
  color: var(--text-leise);
  font-size: 0.85rem;
}

.zeichenerklaerung .abw { display: inline-block; }

/* --------------------------------------------------------------- Arbeit je Paedagoge

   Dasselbe Raster wie bei den Abwesenheiten, nur fuer eine Person: Zeilen sind die
   Bloecke, Spalten die Unterrichtstage, im Feld steht die Klasse. */

.abw-unterricht {
  background: var(--akzent-leise);
  color: var(--akzent);
}

/* Ein Block, den es an diesem Tag nicht gibt -- der Freitag ist kuerzer als die
   uebrigen Tage. Schraffiert wie im Klassenplan, damit es nicht wie eine Luecke im
   Stundenplan aussieht. */
.abwesenheitszelle.gibtesnicht {
  background: repeating-linear-gradient(
    45deg, transparent, transparent 4px, var(--rand) 4px, var(--rand) 5px);
}

.paedagogenblock .woche-titel { font-size: 1rem; }

/* ---------------------------------------------------------------------- Zugang

   Die Anmeldeseite, der Angemeldete im Kopf und die Benutzerverwaltung. */

/* Eine Karte in der Mitte, sonst nichts. Auf dieser Seite gibt es genau zwei Felder und
   einen Knopf; alles Weitere waere Ablenkung von der einzigen Sache, die hier zu tun
   ist. */
.anmeldeseite main {
  max-width: 26rem;
  margin: 12vh auto 0;
}

.anmeldekarte h1 {
  margin: 0;
  font-size: 1.9rem;
  letter-spacing: -0.01em;
}

.anmeldekarte .untertitel { margin: 0.15rem 0 1.4rem; }

.anmeldekarte .hinweis { margin-bottom: 0; }

.anmeldeformular {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.anmeldeformular .knopf { margin-top: 0.3rem; }

.anmeldeseite .meldung {
  margin: 1.1rem 0 0;
  padding: 0.7rem 0.9rem;
  border-left: 4px solid var(--fehler);
}

/* Oben rechts: erst wer da ist, dann das Handbuch. Untereinander, damit der Name die
   Marke nicht von ihrem Platz schiebt. */
.kopfrechts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.angemeldet {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-leise);
}

.angemeldet-name { font-weight: 600; color: var(--text); }

/* Die Rolle als Marke: Wer Zugaenge anlegen kann, soll es auch an sich selbst sehen. */
.marke-rolle {
  background: var(--akzent-leise);
  color: var(--akzent);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 650;
}

/* Im Kennwortfenster stehen drei gleichartige Felder untereinander statt nebeneinander:
   Sie gehoeren zu einem Vorgang, und nebeneinander lesen sie sich wie eine Auswahl. */
.formular.senkrecht {
  flex-direction: column;
  align-items: stretch;
  gap: 0.8rem;
}

/* Das Anfangskennwort, sichtbar genau einmal. Der warme Ton ist derselbe wie bei den
   festen Terminen: Hier steht etwas, das man jetzt mitnehmen muss. */
.kennwortausgabe {
  background: var(--fest-leise);
  border-color: var(--fest);
  margin-top: 1.2rem;
}

.kennwortausgabe h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }

.kennwortwert {
  font-family: "Cascadia Mono", "Consolas", monospace;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  margin: 0.6rem 0;

  /* Zum Abschreiben und zum Markieren mit der Maus -- beides kommt vor. */
  user-select: all;
  overflow-wrap: anywhere;
}