/* Kids-Admin-Portal — eigenes Stylesheet, keine fremden Quellen.

   Neu gefasst am 15.08.2026. Anlass: Der Betreiber hat die Oberflaeche
   zurueckgewiesen — "Das sieht aus wie Word-Dokumente, aber nicht wie eine
   Programm-Oberflaeche" — und den Neubau der Darstellung freigegeben:
   "Es darf sich alles aendern, wenn es dann nachher professioneller nach
   einer App aussieht."

   WAS SICH GEGENUEBER DER ERSTEN FASSUNG AENDERT
   1. Abgestufte Schrift statt einem Grad fuer fast alles. Das ist der
      groesste Einzelgewinn fuer den Eindruck "Programm statt Dokument" —
      und er kostet keine einzige fremde Quelle.
   2. Ein durchgehendes Mass-System (Abstaende, Radien, Schatten) statt
      Einzelwerten pro Stelle.
   3. Antippflaechen von rechnerisch rund 37 auf mindestens 44 Punkte.
      Begruendung: review/plans/audit/recherche_oberflaeche_vorgaben_20260815.md
      Abschnitt 2.5. WCAG 2.2 nennt 24 als Untergrenze, Apple 44, Material 48 —
      24 ist die Grenze zum Durchfallen, nicht der gute Wert, und bedient wird
      auf Tablets.
   4. Kleine Bildschirme, bisher der blinde Fleck: Vor dieser Fassung gab es
      NULL @media-Regeln und NULL Tabellen mit eigenem Schieberahmen. Eine
      breite Tabelle schob die ganze Seite zur Seite.
   5. Kacheln fuer die Startseite (nur dort — siehe Entwurf Abschnitt 0).

   WAS SICH NICHT AENDERT
   * Kein CDN, keine fremde Schriftart, kein Baukasten von aussen. Die
     Sicherheitsregel des Browsers (`style-src 'self'`) laesst nur eigene
     Dateien zu — und ein `style="..."` am Element wuerde verworfen.
   * Farbe ist NIE der einzige Traeger einer Information. Jede farbige Marke
     traegt ihr Wort.
   * Alle bisherigen Klassennamen bleiben gueltig. 14 Vorlagen haengen daran.
*/

/* ==========================================================================
   1. Die Farben — alle an EINER Stelle

   Der Betreiber am 15.08.2026: "momentan gibt es noch keine Farben. Wir
   muessen erstmal mit was anfangen, das koennen wir spaeter noch aendern."
   Genau deshalb steht hier alles beisammen: Ein spaeterer Wechsel ist ein
   Zeilentausch, kein Umbau.
   ========================================================================== */

:root {
  /* --- Leitfarbe: ein tiefes, ruhiges Blau ------------------------------- */
  --ton-akzent:          #1b4f9c;
  --ton-akzent-dunkel:   #143b76;   /* gedrueckter Zustand */
  --ton-akzent-hell:     #eaf1fb;   /* Hinterlegung, aktiver Menuepunkt */

  /* --- Neutrale Skala, sieben Stufen statt drei -------------------------- */
  --ton-text:            #16202e;   /* Fliesstext, Ueberschriften */
  --ton-text-leise:      #56637a;   /* Nebeninfo, Tabellenkoepfe */
  --ton-linie:           #dde3ec;   /* Trennlinien, Raender */
  --ton-linie-stark:     #c3ccdb;   /* Raender, die auffallen sollen */
  --ton-flaeche:         #ffffff;   /* Kacheln, Kaesten, Tabellen */
  --ton-flaeche-leise:   #f7f9fc;   /* Innentabellen, gedaempfte Flaechen */
  --ton-grund:           #eef2f7;   /* Seitenhintergrund */

  /* --- Die fuenf Zustaende ----------------------------------------------
     Uebernommen von GOV.UK (Complete multiple tasks), ins Deutsche gebracht.
     Jeder erscheint IMMER mit seinem Wort — die Farbe ist die Zugabe. */
  --ton-fertig:          #1d6b45;
  --ton-fertig-flaeche:  #e6f4ec;
  --ton-laeuft:          #1b4f9c;
  --ton-laeuft-flaeche:  #e8f0fb;
  --ton-offen:           #8a5200;
  --ton-offen-flaeche:   #fdf2e2;
  --ton-problem:         #a3261a;
  --ton-problem-flaeche: #fceceb;
  --ton-matt:            #6b7688;   /* "Noch nicht moeglich" */
  --ton-matt-flaeche:    #f0f2f6;

  /* Altnamen aus der ersten Fassung. Bleiben, weil Vorlagen sie benutzen. */
  --ton-schwach:         var(--ton-text-leise);
  --ton-warnung:         var(--ton-offen);
  --ton-warnung-flaeche: var(--ton-offen-flaeche);

  /* --- Masse: eine Leiter statt Einzelwerten ----------------------------- */
  --mass-1: 0.25rem;
  --mass-2: 0.5rem;
  --mass-3: 0.75rem;
  --mass-4: 1rem;
  --mass-5: 1.5rem;
  --mass-6: 2rem;
  --mass-7: 3rem;

  --radius:       8px;
  --radius-klein: 5px;

  /* Schatten sehr sparsam: nur, wo etwas anklickbar ueber der Flaeche liegt.
     NN/g nennt den leichten Schlagschatten einen Hinweis auf Klickbarkeit. */
  --schatten:      0 1px 2px rgba(22, 32, 46, 0.06);
  --schatten-hoch: 0 4px 12px rgba(22, 32, 46, 0.12);

  /* --- Die drei Schritte des Ablaufs, je eine eigene Farbe -----------
     FASSUNG 2 vom 15.08.2026, 17:30, auf Betreiber-Vorgabe: "vorbereiten
     ist halt blau, betreuen ist gruen und abschliessen ist rot. Du kannst
     ruhig ein bisschen vollere Farben nehmen, nicht diese blassen Farben."

     Die erste Fassung hatte Indigo/Teal/Pflaume gewaehlt, ausdruecklich um
     Gruen und Rot fuer die Zustaende (fertig / Problem) freizuhalten. Der
     Betreiber will es anders, und das ist seine Entscheidung. Der Konflikt
     wird deshalb ENTSCHAERFT statt ignoriert:

     * Das Rot ist ein tiefes WEINROT (#9c2f35), kein Signalrot. Es liest
       sich als endgueltig, nicht als Fehler. Das Problem-Rot der Zustaende
       (#a3261a) bleibt heller und waermer — die beiden sind unterscheidbar.
     * Die Ampel kommt auf der Startseite gar nicht vor. Sie steht auf
       "Welle abschliessen", wo es keine Spaltenfarben gibt. Die beiden
       Systeme treffen sich nirgends auf einem Bildschirm.
     * Jede Spalte traegt ihren NAMEN im Kopf. Die Farbe ist nie der
       einzige Traeger — sonst waeren die drei Spalten fuer jemanden, der
       Rot und Gruen nicht unterscheidet, drei graue Kaesten.

     Alle Kontraste nachgerechnet, nicht geschaetzt (Rechnung im
     Sitzungsprotokoll vom 15.08.2026):
       weisse Schrift auf der vollen Farbe  7,9 / 6,1 / 7,3 : 1  (noetig 4,5)
       Farbe als Schrift auf Weiss          dieselben Werte
       Farbe als Rand gegen den Seitengrund 7,0 / 5,4 / 6,5 : 1  (noetig 3,0)
       gedrueckt, weisse Schrift            9,3 / 8,0 / 9,2 : 1
     Der dritte Wert ist der, an dem kraeftige Farben sonst scheitern: dunkel
     genug fuer Schrift und trotzdem zu nah am getoenten Seitengrund. */
  --schritt-1:          #1a4fa0;   /* Vorbereiten — Blau */
  --schritt-1-dunkel:   #17458c;   /* gedrueckt */
  --schritt-1-flaeche:  #dce7f8;   /* beim Zeigen */
  --schritt-2:          #12704a;   /* Betreuen — Gruen */
  --schritt-2-dunkel:   #0e5c3c;
  --schritt-2-flaeche:  #d8efe2;
  --schritt-3:          #9c2f35;   /* Abschliessen — Weinrot */
  --schritt-3-dunkel:   #84262b;
  --schritt-3-flaeche:  #f6dfe0;

  /* --- Antippflaeche: die Zahl steht hier, damit sie nur einmal existiert - */
  --tippflaeche: 44px;
}

* { box-sizing: border-box; }

/* ==========================================================================
   2. Grundlage und Schriftabstufung
   ========================================================================== */

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ton-text);
  background: var(--ton-grund);
  /* Ziffern gleich breit: Zaehler wie "5 von 9" springen sonst beim
     Auffrischen, weil die 1 schmaler ist als die 8. */
  font-variant-numeric: tabular-nums;
}

h1 {
  font-size: 1.6rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 var(--mass-2);
}

h2 {
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0 0 var(--mass-2);
}

h3 {
  font-size: 1rem;
  margin: 0 0 var(--mass-1);
}

p { margin: 0 0 var(--mass-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--ton-akzent); }

/* Sichtbare Tastatur-Spur. Ohne sie ist die Seite mit der Tabulatortaste
   nicht bedienbar — und das ist eine Barrierefreiheits-Anforderung, keine
   Feinheit. */
:focus-visible {
  outline: 3px solid var(--ton-akzent);
  outline-offset: 2px;
  border-radius: var(--radius-klein);
}

/* ==========================================================================
   3. Der Seitenrahmen
   ========================================================================== */

/* Die Kopfzeile traegt die Leitfarbe. Vorher war sie weiss wie alles
   andere — dann hat eine Seite keinen Kopf, sondern faengt einfach an. */
.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mass-4);
  flex-wrap: wrap;
  padding: var(--mass-3) var(--mass-5);
  background: var(--ton-akzent);
  color: #fff;
}
.kopf .kopf-untertitel { color: rgba(255, 255, 255, 0.78); }
.kopf .nutzer { color: rgba(255, 255, 255, 0.78); }
.kopf .rueckweg { color: #fff; }

.kopf-titel { display: flex; align-items: center; gap: var(--mass-2); }
.kopf-titel strong { font-size: 1.05rem; letter-spacing: -0.01em; }

.kopf-untertitel {
  color: var(--ton-text-leise);
  font-size: 0.95rem;
}

.kopf-rechts {
  display: flex;
  align-items: center;
  gap: var(--mass-4);
  font-size: 0.9rem;
}

.nutzer { color: var(--ton-text-leise); }

.rueckweg {
  display: inline-flex;
  align-items: center;
  gap: var(--mass-1);
  min-height: var(--tippflaeche);
  padding: 0 var(--mass-2);
  color: var(--ton-akzent);
  text-decoration: none;
  font-weight: 600;
}
.rueckweg:hover { text-decoration: underline; }

/* --- Hauptnavigation ------------------------------------------------------
   Waagerecht und nicht als Seitenleiste — Begruendung im Entwurf,
   Abschnitt 0, Entscheidung 2: Eine Seitenleiste braucht auf schmalen
   Geraeten JavaScript zum Ein- und Ausklappen, und jede Funktion muss auch
   ohne JavaScript gehen. */
/* Betreiber am 15.08.2026: 'Man erkennt gar nicht, dass das ein Menü ist.'
   Stimmt — eine Reihe Textlinks mit Unterstrich sieht aus wie ein
   Fliesstext mit Verweisen. Ein Menue erkennt man an drei Dingen:
   Es sitzt in einem eigenen Band, seine Punkte haben eine sichtbare
   Flaeche, und der aktive Punkt hebt sich deutlich ab. Alle drei fehlten.
   Dazu Symbole: Sie machen aus Woertern Bedienelemente. */
.navi {
  background: var(--ton-flaeche);
  border-bottom: 1px solid var(--ton-linie-stark);
  box-shadow: var(--schatten);
  /* Auf schmalen Geraeten waagerecht schiebbar statt in vier Zeilen
     umgebrochen — ein Menue, das die halbe Seite frisst, ist keins. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.navi-inhalt {
  display: flex;
  gap: var(--mass-1);
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--mass-2) var(--mass-5);
}

.navi-punkt {
  display: inline-flex;
  align-items: center;
  gap: var(--mass-2);
  min-height: var(--tippflaeche);
  padding: 0 var(--mass-3);
  border-radius: var(--radius-klein);
  color: var(--ton-text-leise);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
}
.navi-punkt:hover {
  background: var(--ton-flaeche-leise);
  color: var(--ton-text);
}

/* Der aktive Punkt ist gefuellt, nicht unterstrichen. Ein Unterstrich
   ist zu leise, um auf einen Blick zu sagen, wo man ist. */
.navi-punkt.aktiv {
  background: var(--ton-akzent);
  color: #fff;
}
.navi-punkt.aktiv:hover { background: var(--ton-akzent-dunkel); color: #fff; }

.symbol-navi { width: 18px; height: 18px; stroke-width: 2; }

.inhalt {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--mass-5) var(--mass-5) var(--mass-7);
}

.fuss {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--mass-4) var(--mass-5) var(--mass-6);
  color: var(--ton-text-leise);
  font-size: 0.85rem;
}

/* ==========================================================================
   4. Kacheln — NUR auf der Startseite

   Warum nur dort: Die Nielsen Norman Group nennt Karten ausdruecklich
   "less scannable than lists" und ungeeignet fuer gleichartige Sammlungen
   und fuer Vergleiche. Auf der Startseite stehen sechs VERSCHIEDENARTIGE
   Aufgaben nebeneinander — genau der Fall, fuer den sie empfohlen werden.
   Schulliste, Statusliste und Gruppenauswahl bleiben deshalb Tabellen.
   ========================================================================== */

.abschnitt { margin: 0 0 var(--mass-4); }

.abschnitt-titel {
  display: flex;
  align-items: center;
  gap: var(--mass-3);
  margin: 0 0 var(--mass-2);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ton-text-leise);
}
/* Die Linie hinter der Abschnittsueberschrift traegt keine Information,
   deshalb aria-hidden — sie ist reine Gliederung fuers Auge. */
.abschnitt-titel::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ton-linie);
}

/* Drei bis vier Kacheln nebeneinander statt zwei. Bei zwei Spalten wird
   jede Kachel so breit, dass sechs Stueck nicht mehr auf einen Bildschirm
   passen — dann muss man scrollen, um zu sehen, was man tun kann. Das ist
   der Zweck einer Startseite und darf nicht am Layout scheitern. */
/* ==========================================================================
   Die Startseite: drei Spalten, eine je Schritt

   Betreiber am 15.08.2026, 17:30: "die erste Spalte ist vorbereiten, die
   zweite ist betreuen, die dritte ist abschliessen, das macht es dann ein
   wenig einfacher".

   Er hat recht, und der Grund ist mehr als Geschmack: Die Reihenfolge des
   Ablaufs laeuft jetzt von LINKS NACH RECHTS, und innerhalb einer Spalte von
   oben nach unten. Vorher lief sie von oben nach unten und sprang dabei
   zwischen den Reihen — man musste die Nummern lesen, um sie zu erkennen.
   Jetzt sieht man sie.

   Und sie waechst richtig: Ein siebter Punkt kommt in die Spalte, in die er
   fachlich gehoert, und verlaengert sie um eine Kachel. Kein Raster muss neu
   gedacht werden.
   ========================================================================== */

.spalten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mass-4);
  align-items: start;
  margin: 0 0 var(--mass-6);
  max-width: 62rem;
}

.spalte {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--kachel-ton);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ton-flaeche);
  box-shadow: var(--schatten);
}

/* Der Spaltenkopf traegt die volle Farbe und weisse Schrift.
   Gemessen: 7,9 / 6,1 / 7,3 : 1 — noetig waeren 4,5. */
.spalte-kopf {
  display: flex;
  align-items: center;
  gap: var(--mass-2);
  padding: var(--mass-3) var(--mass-4);
  background: var(--kachel-ton);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 680;
  letter-spacing: 0.01em;
}
.spalte-zahl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
  border-radius: 50%;
  /* Weiss auf der Vollfarbe, leicht durchscheinend — der Ring bleibt
     erkennbar, ohne dem Namen die Aufmerksamkeit zu nehmen. */
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.55);
  font-size: 0.82rem;
  font-weight: 700;
}

.spalte-inhalt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--ton-linie);   /* wird zur Trennlinie zwischen Kacheln */
  padding: 1px 0 0;
}

/* Unter dem Kopf kommt keine Ueberschrift mehr, sondern gleich die
   Kacheln. Sie sind hier breiter als hoch — in einer Spalte gestapelt
   waeren hochkante Kacheln eine sehr lange Saeule. */
.kacheln { display: contents; }

@media (max-width: 56rem) {
  .spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 34rem) {
  .spalten { grid-template-columns: 1fr; }
}

/* Eine Kachel in ihrer Spalte.

   WAAGERECHT statt hochkant: In einer Spalte gestapelt waeren hochkante
   Kacheln eine sehr lange, sehr schmale Saeule. Symbol links, Name rechts —
   so bleibt die Spalte kurz und die Namen sind in einer Zeile lesbar.

   Kein eigener Rahmen, kein eigener Schatten: Den traegt die Spalte. Zwei
   Rahmen ineinander sehen aus wie ein Fehler. Getrennt werden die Kacheln
   durch eine Haarlinie (der 1px-Abstand in .spalte-inhalt auf der
   Linienfarbe). */
.kachel {
  display: flex;
  align-items: center;
  gap: var(--mass-3);
  padding: var(--mass-4);
  background: var(--ton-flaeche);
  color: inherit;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}

/* DIE GANZE Kachel ist der Klick, nicht nur der Name.
   NN/g: "clicking or tapping anywhere on the card" — das vergroessert die
   Trefferflaeche erheblich und ist der wichtigste Einzelgewinn fuer die
   Bedienung mit dem Finger.

   Drei Zustaende, alle nachgerechnet. Der Betreiber hat ausdruecklich nach
   "Mouse Over und Aktivierung" bei allen Farben gefragt. */

/* ZEIGEN: die helle Flaeche der Spalte. Text darauf 13,2 / 13,6 / 12,9 : 1. */
a.kachel:hover {
  background: var(--kachel-flaeche);
  color: var(--ton-text);
}
a.kachel:hover .kachel-symbol {
  background: var(--kachel-ton);
  color: #fff;
}
a.kachel:hover .kachel-titel { color: var(--kachel-ton); }

/* DRUECKEN: die volle Farbe, weisse Schrift. Gemessen 9,3 / 8,0 / 9,2 : 1.
   Ohne diesen Zustand wirkt eine Beruehrung auf dem Tablet folgenlos — und
   man tippt ein zweites Mal. */
a.kachel:active {
  background: var(--kachel-dunkel, var(--kachel-ton));
  color: #fff;
}
a.kachel:active .kachel-titel { color: #fff; }
a.kachel:active .kachel-symbol {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* TASTATUR: Der Fokusrahmen liegt INNEN. Aussen wuerde ihn das
   `overflow: hidden` der Spalte an drei Seiten abschneiden — die Kachel
   waere fokussiert und man saehe es nicht. */
a.kachel:focus-visible {
  outline: 3px solid var(--kachel-ton);
  outline-offset: -3px;
  background: var(--kachel-flaeche);
}

@media (prefers-reduced-motion: reduce) {
  .kachel { transition: none; }
}

/* Die farbige Flaeche hinter dem Symbol traegt den Ton des Schrittes und
   macht die Zugehoerigkeit sichtbar, bevor man ein Wort gelesen hat. */
.kachel-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 10px;
  background: var(--kachel-flaeche, var(--ton-akzent-hell));
  color: var(--kachel-ton, var(--ton-akzent));
  transition: background 0.12s ease, color 0.12s ease;
}

.kachel-titel {
  font-size: 1rem;
  font-weight: 640;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Die Marke "Noch nicht moeglich" sitzt rechts und nimmt dem Namen keinen
   Platz weg. */
.kachel-fuss { margin-left: auto; }

/* Die Zuordnung Schritt -> Farbe steht an EINER Stelle. Die Kachel kennt
   ihren Ton nicht; sie erbt ihn von ihrer Spalte. */
.spalte-1 { --kachel-ton: var(--schritt-1); --kachel-flaeche: var(--schritt-1-flaeche); --kachel-dunkel: var(--schritt-1-dunkel); }
.spalte-2 { --kachel-ton: var(--schritt-2); --kachel-flaeche: var(--schritt-2-flaeche); --kachel-dunkel: var(--schritt-2-dunkel); }
.spalte-3 { --kachel-ton: var(--schritt-3); --kachel-flaeche: var(--schritt-3-flaeche); --kachel-dunkel: var(--schritt-3-dunkel); }

/* Die Zahl ist der eigentliche Grund, warum eine Kachel besser ist als ein
   Menuepunkt. Eine Kachel ohne Zahl ist nur ein huebscherer Link. */
.kachel-zahl {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.kachel-text {
  color: var(--ton-text-leise);
  font-size: 0.92rem;
  flex: 1;
}

.kachel-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mass-2);
}

/* Eine Kachel, deren Voraussetzung fehlt, ist kein Link — sie ist ein
   Hinweis. Deshalb im Markup ein <div> statt <a>: Was nicht geht, soll man
   auch nicht anklicken koennen (Heuristik 5, Fehler vermeiden statt melden). */
.kachel-gesperrt {
  background: var(--ton-matt-flaeche);
  border-style: dashed;
  box-shadow: none;
}
.kachel-gesperrt .kachel-titel,
.kachel-gesperrt .kachel-zahl { color: var(--ton-matt); }

/* --- Die Zustandsmarke --------------------------------------------------- */

.marke-zustand {
  display: inline-flex;
  align-items: center;
  gap: var(--mass-1);
  padding: var(--mass-1) var(--mass-2);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 650;
  white-space: nowrap;
}

.marke-fertig  { background: var(--ton-fertig-flaeche);  color: var(--ton-fertig); }
.marke-laeuft  { background: var(--ton-laeuft-flaeche);  color: var(--ton-laeuft); }
.marke-offen   { background: var(--ton-offen-flaeche);   color: var(--ton-offen); }
.marke-problem { background: var(--ton-problem-flaeche); color: var(--ton-problem); }
.marke-matt    { background: var(--ton-matt-flaeche);    color: var(--ton-matt); }

/* --- Die Symbole ---------------------------------------------------------
   Selbst gezeichnet, auf Betreiber-Wunsch vom 15.08.2026. Keine fremde
   Bibliothek: damit gibt es keine Lizenzfrage und keine fremde Quelle.
   `currentColor` heisst: Sie nehmen die Textfarbe an und ueberleben damit
   jeden spaeteren Farbwechsel, ohne angefasst zu werden. */
.symbol {
  flex: none;
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.symbol-gross { width: 22px; height: 22px; }

/* In der Zustandsmarke sitzt das Symbol neben Text von 0.8rem — 24px
   waeren dort ein Klotz. Die Attribute am Element geben 24 vor; diese
   Regel zieht sie auf das passende Mass herunter. */
.symbol-marke { width: 14px; height: 14px; stroke-width: 2.5; }

/* --- Kennzahlen ---------------------------------------------------------
   Betreiber am 15.08.2026: "wenn ich in eine App komme und dann habe ich
   diese Kaesten, 9 Schulen, 18 Gruppen, jetzt auffrischen, das kann man
   besser darstellen, in mehreren Spalten zum Beispiel".

   Er hat recht. Eine Zeile aus Zahlen mit Trennpunkten dazwischen ist
   eine Textzeile, keine Anzeige. Als Reihe eigener Felder liest man jede
   Zahl fuer sich, und das Auge findet sie beim zweiten Mal am selben Ort.

   Die Zahl steht GROSS und ueber der Beschriftung, nicht dahinter: Beim
   Ueberfliegen sucht man den Wert, nicht das Wort. */
.kennzahlen {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  background: var(--ton-linie);
  border: 1px solid var(--ton-linie);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0 0 var(--mass-5);
}

/* Der 1px-Abstand oben plus diese Flaeche ergeben die Trennlinien —
   ohne dass an jedem Feld ein Rand sitzt, der sich an den Ecken
   verdoppelt. */
.kennzahl {
  display: flex;
  flex-direction: column;
  gap: var(--mass-1);
  padding: var(--mass-3) var(--mass-4);
  background: var(--ton-flaeche);
}

.kennzahl-wert {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

/* '4' laut, '/9' leise: Der Zaehler ist die Nachricht, der Nenner der
   Bezugsrahmen. Gleich gross gesetzt konkurrieren sie miteinander. */
.kennzahl-von {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ton-text-leise);
}

.kennzahl-name {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ton-text-leise);
}

/* Ein Wert, der Aufmerksamkeit braucht, wird nicht nur farbig — er
   bekommt auch einen Balken. Farbe ist nie der einzige Traeger. */
.kennzahl-achtung .kennzahl-wert { color: var(--ton-offen); }
.kennzahl-achtung { box-shadow: inset 0 3px 0 var(--ton-offen); }
.kennzahl-gut .kennzahl-wert { color: var(--ton-fertig); }
.kennzahl-gut { box-shadow: inset 0 3px 0 var(--ton-fertig); }

/* ==========================================================================
   5. Kaesten, Erklaerungen, Hinweise
   ========================================================================== */

.kasten {
  background: var(--ton-flaeche);
  border: 1px solid var(--ton-linie);
  border-radius: var(--radius);
  padding: var(--mass-4) var(--mass-5);
  margin: 0 0 var(--mass-4);
  box-shadow: var(--schatten);
}

/* Ein erledigter Schritt. Gruen, aber gedeckt — eine Quittung, kein Jubel. */
.kasten-fertig {
  background: var(--ton-fertig-flaeche);
  border-color: #a9d4be;
}

.kasten-warnung {
  background: var(--ton-offen-flaeche);
  border-color: #f0cd9a;
  color: var(--ton-offen);
}

.kasten-pruefung {
  background: var(--ton-laeuft-flaeche);
  border-color: #b8ceec;
}

/* Ein Schritt, der noch nicht dran ist. Er bleibt sichtbar — wer ihn nicht
   sieht, weiss nicht, dass er kommt, und sucht ihn. */
.kasten-matt {
  background: var(--ton-matt-flaeche);
  border-style: dashed;
}

/* Der Erklaerkasten: immer an derselben Stelle, direkt unter der
   Ueberschrift, nach festem Muster — wofuer ist diese Seite, was kann ich
   hier tun, was passiert danach. Vor dem 15.08.2026 gab es davon NULL. */
.erklaerung {
  border-left: 4px solid var(--ton-akzent);
  background: var(--ton-akzent-hell);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--mass-3) var(--mass-4);
  margin: 0 0 var(--mass-5);
  font-size: 0.95rem;
}
.erklaerung p:last-child { margin-bottom: 0; }
.erklaerung strong { color: var(--ton-akzent-dunkel); }

.einleitung {
  color: var(--ton-text-leise);
  max-width: 46rem;
  margin-bottom: var(--mass-4);
}

.hinweis {
  color: var(--ton-text-leise);
  font-size: 0.9rem;
}

.warnhinweis {
  background: var(--ton-problem-flaeche);
  border-left: 4px solid var(--ton-problem);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  color: var(--ton-problem);
  padding: var(--mass-3) var(--mass-4);
  margin: var(--mass-3) 0;
}

/* ==========================================================================
   6. Schaltflaechen und Formulare

   Die wichtigste Zahl dieses Abschnitts ist --tippflaeche (44px). Vorher
   waren es rechnerisch rund 37 — mit dem Finger trifft man daneben.
   ========================================================================== */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mass-2);
  min-height: var(--tippflaeche);
  padding: 0 var(--mass-4);
  border: 1px solid var(--ton-linie-stark);
  border-radius: var(--radius-klein);
  background: var(--ton-flaeche);
  color: var(--ton-text);
  font-size: 0.95rem;
  font-family: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.knopf:hover { border-color: var(--ton-akzent); color: var(--ton-akzent); }

.knopf-haupt {
  background: var(--ton-akzent);
  border-color: var(--ton-akzent);
  color: #fff;
}
.knopf-haupt:hover {
  background: var(--ton-akzent-dunkel);
  border-color: var(--ton-akzent-dunkel);
  color: #fff;
}

/* Zerstoererische Aktionen sehen anders aus als harmlose. */
.knopf-ernst {
  background: var(--ton-problem);
  border-color: var(--ton-problem);
  color: #fff;
}
.knopf-ernst:hover { background: #8c1f15; border-color: #8c1f15; color: #fff; }

.knopf-klein {
  min-height: 36px;
  padding: 0 var(--mass-3);
  font-size: 0.88rem;
  font-weight: 600;
}

button[disabled], .knopf[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mass-2);
  align-items: center;
}

.reihe { display: inline-block; margin-right: var(--mass-2); }
p .reihe { display: inline-block; }

/* --- Eingabefelder -------------------------------------------------------- */

input[type="text"], input[type="search"], input[type="date"],
input[type="number"], select, textarea {
  min-height: var(--tippflaeche);
  padding: 0 var(--mass-3);
  border: 1px solid var(--ton-linie-stark);
  border-radius: var(--radius-klein);
  background: var(--ton-flaeche);
  color: var(--ton-text);
  font-family: inherit;
  font-size: 0.95rem;
}
textarea { padding: var(--mass-2) var(--mass-3); line-height: 1.5; }

input[type="file"] {
  min-height: var(--tippflaeche);
  padding: var(--mass-2);
  border: 1px dashed var(--ton-linie-stark);
  border-radius: var(--radius-klein);
  background: var(--ton-flaeche-leise);
  font-family: inherit;
}

.filterleiste {
  display: flex;
  gap: var(--mass-4);
  align-items: flex-end;
  flex-wrap: wrap;
}
.filterleiste label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ton-text-leise);
}
.filterleiste select,
.filterleiste input[type="date"],
.filterleiste input[type="search"] {
  display: block;
  margin-top: var(--mass-1);
}

/* --- Ankreuzfelder --------------------------------------------------------
   USWDS: "Users should be able to select either the text label or the
   checkbox." Die Beschriftung mitklickbar zu machen vergroessert die
   Trefferflaeche um ein Vielfaches — der billigste Gewinn ueberhaupt.
   Und: untereinander, nie nebeneinander ("Horizontal listings can make it
   difficult to tell which label pertains to which checkbox"). */
.ankreuz {
  display: flex;
  align-items: center;
  gap: var(--mass-2);
  min-height: var(--tippflaeche);
  cursor: pointer;
}

input[type="checkbox"], input[type="radio"] {
  width: 22px;
  height: 22px;
  flex: none;
  accent-color: var(--ton-akzent);
  cursor: pointer;
}

/* Eine Gruppe zusammengehoeriger Ankreuzfelder bekommt einen Rahmen mit
   Ueberschrift. Vorleseprogramme sagen dann "Berlin, Kontrollkaestchen
   Grundschule Am Lindenweg" statt nur "Kontrollkaestchen". */
.ankreuzgruppe {
  border: 1px solid var(--ton-linie-stark);
  border-radius: var(--radius);
  background: var(--ton-flaeche);
  /* Oben KEIN Innenabstand: Die Kopfzeile soll bis an die Kante der Box
     reichen und sie ausfuellen, nicht in ihr schwimmen. */
  padding: 0 0 var(--mass-3);
  margin: 0 0 var(--mass-4);
  box-shadow: var(--schatten);
  /* Damit die farbige Kopfzeile die runden Ecken der Box uebernimmt. */
  overflow: hidden;
}

/* --- Die Kopfzeile des Bundeslands --------------------------------------
   Sie sitzt IN der Box als deren erste Zeile, nicht auf ihrem Rand. Die
   ganze Herleitung steht in portal/templates/stapel.html an der Stelle,
   an der sie gesetzt wird.

   Die Farbe ist die Leitfarbe, hell hinterlegt — dieselbe wie beim
   Tabellenkopf. Zwei verschiedene Toene fuer dieselbe Aussage ("hier
   beginnt ein Abschnitt") waeren zwei Sprachen fuer eine Sache. */
.landkopf {
  display: flex;
  align-items: center;
  gap: var(--mass-3);
  flex-wrap: wrap;
  padding: var(--mass-2) var(--mass-4);
  background: var(--ton-akzent-hell);
  border-bottom: 2px solid var(--ton-akzent);
  margin-bottom: var(--mass-3);
}
.landkopf .hinweis { font-weight: 400; margin: 0; }

/* DER KRITISCHE PUNKT: das LEERE Kaestchen auf der getoenten Leiste.
   Ein Kaestchen mit dem hellgrauen Standardrand verschwindet auf
   #eaf1fb — man sieht nur noch die angekreuzten und haelt die leeren fuer
   gar nicht vorhanden. Der angekreuzte Zustand ist unkritisch: Ihn faerbt
   `accent-color` kraeftig ein.

   Deshalb hier ein eigener, dunkler Rand. Gemessen: #1b4f9c auf #eaf1fb
   ergibt rund 7:1 — die Vorgabe war mindestens 3:1.

   `appearance: auto` bleibt: Das Kaestchen ist ein echtes Kaestchen des
   Systems, kein nachgebautes. Ein nachgebautes verliert auf fremden
   Geraeten seine Bedienbarkeit, und genau das darf hier nicht passieren. */
.landkopf input[type="checkbox"] {
  outline: 2px solid var(--ton-akzent);
  outline-offset: -1px;
  border-radius: 3px;
}
/* Der Tastatur-Fokusrahmen muss sich vom Kontrastrand oben unterscheiden —
   sonst sieht man auf der Leiste nicht, wo man gerade steht. */
.landkopf input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--ton-akzent-dunkel);
  outline-offset: 2px;
}

/* Auf schmalen Geraeten bricht die Kopfzeile in zwei Zeilen, statt in den
   Rand zu laufen. */
@media (max-width: 30rem) {
  .landkopf { padding: var(--mass-2) var(--mass-3); }
  .landkopf .hinweis { flex-basis: 100%; }
}

/* Nur fuer Vorleseprogramme. NICHT `display: none` — das naehme die
   Beschriftung auch dem Vorleseprogramm, und dann hiesse die Gruppe wieder
   gar nichts. */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Die Ebenen: Bundesland > Schule > Gruppe. Der Einzug macht die
   Zugehoerigkeit sichtbar, ohne dass man sie erklaeren muss. */
.ebene-schule  { margin-left: var(--mass-5); }
.ebene-gruppe  { margin-left: var(--mass-7); }

/* ==========================================================================
   7. Tabellen

   Gleichartige Eintraege, die man vergleicht, gehoeren in eine Tabelle —
   nicht in Kacheln. Siehe Kommentar bei Abschnitt 4.
   ========================================================================== */

/* Der Schieberahmen. Ohne ihn schiebt eine breite Tabelle auf einem Telefon
   die GANZE SEITE zur Seite. Vor dem 15.08.2026 gab es davon null.

   Er ist zugleich der sichtbare Rahmen der Tabelle: Die Tabelle selbst
   bekommt KEINEN Aussenrand, sondern der Rahmen bekommt ihn — sonst laege
   an der Scrollkante eine doppelte Linie. `overflow: hidden` an der Waagerechten
   geht nicht mit `overflow-x: auto`; deshalb sitzt die Rundung zusaetzlich an
   der ersten und letzten Kopfzelle (unten). */
.tabellenrahmen {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--ton-linie-stark);
  border-radius: var(--radius);
  background: var(--ton-flaeche);
  box-shadow: var(--schatten);
  margin: 0 0 var(--mass-5);
}
.tabellenrahmen > table { margin: 0; }

table {
  border-collapse: collapse;
  width: 100%;
  background: var(--ton-flaeche);
  font-variant-numeric: tabular-nums;   /* Zahlen stehen untereinander */
}

th, td {
  text-align: left;
  padding: var(--mass-3);
  border-bottom: 1px solid var(--ton-linie);
}

/* --- Der Beschriftungsbalken -------------------------------------------
   Der Betreiber am 15.08.2026: "wenn du mit den Tabellen auch mit
   andersfarbig gearbeitet haettest. Das bezieht sich auf alle Seiten, alle
   Unterseiten, dass die Tabellen schoener aussehen, auch vom
   Beschriftungsbalken abgetrennt."

   Bis dahin war der Kopf nur eine Spur heller als der Rest und durch eine
   1-Punkt-Linie getrennt — auf einem Tablet aus einem halben Meter
   Entfernung sieht man das schlicht nicht. Jetzt traegt er eine eigene
   Farbe (die Leitfarbe, hell hinterlegt), seine Schrift ist die Leitfarbe
   selbst, und darunter liegt eine 2-Punkt-Kante in voller Saettigung. Das
   ist ein Balken, kein Farbverlauf.

   `position: sticky` haelt ihn beim Rollen innerhalb des Rahmens oben —
   bei der Statusliste mit vielen Schulen ist das der Unterschied zwischen
   "welche Spalte war das nochmal?" und Lesen. */
thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--ton-akzent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--ton-akzent-hell);
  border-bottom: 2px solid var(--ton-akzent);
  white-space: nowrap;
}
.tabellenrahmen > table > thead > tr > th:first-child {
  border-top-left-radius: calc(var(--radius) - 1px);
}
.tabellenrahmen > table > thead > tr > th:last-child {
  border-top-right-radius: calc(var(--radius) - 1px);
}

/* --- Wechselnde Zeilenfarbe --------------------------------------------
   Der klassische Grund: Das Auge verliert bei breiten Tabellen die Zeile.
   Der Ton ist bewusst sehr schwach (--ton-flaeche-leise, ein Hauch Blau) —
   ein kraeftiger Wechsel macht die Tabelle unruhig statt lesbar.

   Die Farbe sitzt auf der ZELLE, nicht auf der Zeile: Sonst gewaenne die
   Zeilenfarbe gegen jede Zellenfarbe, die eine Ampel setzt. */
tbody tr:nth-child(even) > td { background: var(--ton-flaeche-leise); }

/* Zeile unter dem Zeiger. Auf dem Tablet unsichtbar, am Schreibtisch die
   billigste Lesehilfe, die es gibt. */
@media (hover: hover) {
  tbody tr:hover > td { background: var(--ton-akzent-hell); }
}

tbody tr:last-child td { border-bottom: none; }

/* Zahlenspalten rechtsbuendig — Ziffern vergleicht man an der Einerstelle. */
td.zahl, th.zahl { text-align: right; }

.statustabelle { font-size: 0.94rem; }
.statustabelle td { vertical-align: top; }
.statustabelle th:nth-child(2), .statustabelle th:nth-child(3),
.statustabelle th:nth-child(4) { width: 3rem; }

/* Die Statusliste hat je Schule ZWEI Zeilen (Daten + Aufklapper). Ein
   `nth-child`-Wechsel wuerde die beiden auseinanderreissen und der
   Detailzeile eine andere Farbe geben als ihrer Schule. Deshalb steht dort
   jede Schule in einem eigenen <tbody>, und der Wechsel laeuft ueber die
   Bloecke. */
.bloecke tbody tr:nth-child(even) > td { background: transparent; }
.bloecke tbody:nth-of-type(even) > tr > td { background: var(--ton-flaeche-leise); }
.bloecke tbody + tbody > tr:first-child > td {
  border-top: 1px solid var(--ton-linie-stark);
}
@media (hover: hover) {
  .bloecke tbody:hover > tr > td { background: var(--ton-akzent-hell); }
}

/* Die Detailzeile gehoert zur Zeile darueber und soll nicht wie ein eigener
   Datensatz aussehen. */
.detailzeile td {
  border-bottom: 1px solid var(--ton-linie);
  padding-top: 0;
}
.detailzeile summary {
  cursor: pointer;
  color: var(--ton-akzent);
  font-size: 0.9rem;
  font-weight: 600;
  min-height: var(--tippflaeche);
  display: flex;
  align-items: center;
}
.detailzeile details[open] summary { margin-bottom: var(--mass-3); }

.innentabelle {
  margin: 0 0 var(--mass-3);
  font-size: 0.9rem;
  background: var(--ton-flaeche);
  border: 1px solid var(--ton-linie);
  border-radius: var(--radius-klein);
}
.innentabelle th, .innentabelle td { padding: var(--mass-2) var(--mass-3); }

.spalte-zeile   { width: 6rem; }
.spalte-ankreuz { width: 3rem; }

/* ==========================================================================
   8. Marken, Punkte, Kleinteile
   ========================================================================== */

/* Ein Code, ein Pseudonym, eine Kennung — alles, was man abtippt oder
   vergleicht, in gleichbreiter Schrift. Dann sieht man 0 und O. */
.marke {
  display: inline-block;
  padding: var(--mass-1) var(--mass-2);
  border: 1px solid var(--ton-linie);
  border-radius: var(--radius-klein);
  background: var(--ton-flaeche-leise);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

/* Farbe UND Text: Der Punkt ist eine Zugabe, nie der einzige Traeger. */
.punkt {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  margin-right: var(--mass-1);
  vertical-align: baseline;
}
.punkt-offen     { background: var(--ton-problem); }
.punkt-wartet    { background: var(--ton-offen); }
.punkt-teilweise { background: var(--ton-laeuft); }
.punkt-fertig    { background: var(--ton-fertig); }

/* --- Die Ampel -----------------------------------------------------------
   Der Betreiber am 15.08.2026: "Das auch mit einem Ampelsystem, gruen, gelb,
   rot, dass man das dahinter sieht."

   Warum es hier eine hinterlegte Marke ist und nicht nur der Punkt oben:
   Ein 0,65-rem-Punkt neben Fliesstext verschwindet in einer langen Liste.
   Die Marke traegt Flaeche, Rand und Wort — man sieht sie im Vorbeigehen,
   und sie bleibt lesbar, wenn jemand Rot und Gruen nicht unterscheiden kann.
   Genau deshalb steht das Wort IMMER drin. Eine Ampel, die nur aus Farbe
   besteht, ist fuer rund jeden zwoelften Mann keine Ampel.

   Drei Farben, wie verlangt — plus Grau fuer "steht noch nichts an":
     rot   = etwas fehlt, das da sein muesste
     gelb  = unterwegs, noch nicht vollstaendig
     gruen = vollstaendig
     grau  = nichts zu melden (keine Schulen, keine Gruppen) */
.ampel {
  display: inline-flex;
  align-items: center;
  gap: var(--mass-2);
  padding: var(--mass-1) var(--mass-3);
  border-radius: 999px;
  border: 1px solid;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.3;
  white-space: nowrap;
}
/* Der Leuchtpunkt in der Marke. Voll gesaettigt, damit er auch auf der
   hellen Flaeche der Marke traegt. */
.ampel::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.ampel-rot  { color: var(--ton-problem); background: var(--ton-problem-flaeche); border-color: #eab9b4; }
.ampel-gelb { color: var(--ton-offen);   background: var(--ton-offen-flaeche);   border-color: #e7c99a; }
.ampel-gruen{ color: var(--ton-fertig);  background: var(--ton-fertig-flaeche);  border-color: #a9d4be; }
.ampel-grau { color: var(--ton-matt);    background: var(--ton-matt-flaeche);    border-color: var(--ton-linie-stark); }

/* Der Text neben dem Punkt darf umbrechen, wenn es eng wird — die Marke
   selbst nicht in zwei Teile zerfallen. */
.ampel span { white-space: normal; }

/* Die Kurzfassung ueber der Liste: drei Ampeln nebeneinander. */
.ampelbilanz .knopfreihe { margin: var(--mass-3) 0; gap: var(--mass-3); }
.ampelbilanz .ampel { font-size: 0.9rem; padding: var(--mass-2) var(--mass-4); }

/* Die Bundesland-Ueberschrift. Der Name steckt IN der Ampel — sonst muesste
   das Auge zwischen Farbe und Wort hin- und herspringen. */
.landzeile {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mass-3);
  margin: var(--mass-6) 0 var(--mass-3);
}
.landzeile .ampel { font-size: 1rem; padding: var(--mass-2) var(--mass-4); }
.landzeile .hinweis { margin: 0; font-weight: 400; }

/* Eine gesperrte Zeile: sichtbar heruntergenommen, aber lesbar. Nicht
   ausgegraut bis zur Unkenntlichkeit — man muss ja gerade sehen koennen,
   WAS gesperrt wurde. Der Streifen links traegt die Aussage, nicht die
   Blaesse. */
.zeile-gesperrt > td:first-child { box-shadow: inset 3px 0 0 var(--ton-matt); }
.zeile-gesperrt > td { color: var(--ton-text-leise); }

/* --- Eine Aktion, die in der Tabellenzeile aufklappt ---------------------
   Sperren braucht einen Grund. Ein eigener Bildschirm dafuer waere ein
   Seitenwechsel fuer zwei Felder; ein Fenster braucht JavaScript. Ein
   <details> kann beides nicht und funktioniert ueberall — auch mit
   abgeschaltetem JavaScript, auch mit der Tastatur. */
.zeilenaktion > summary {
  list-style: none;
  display: inline-flex;
}
.zeilenaktion > summary::-webkit-details-marker { display: none; }
.zeilenaktion > summary::marker { content: ""; }
.zeilenaktion[open] > summary {
  border-color: var(--ton-akzent);
  color: var(--ton-akzent);
}
.aktionsformular {
  display: flex;
  flex-direction: column;
  gap: var(--mass-3);
  margin-top: var(--mass-3);
  padding: var(--mass-4);
  min-width: 16rem;
  background: var(--ton-flaeche-leise);
  border: 1px solid var(--ton-linie-stark);
  border-radius: var(--radius);
}
.aktionsformular .hinweis { margin: 0; }

/* In einer Knopfreihe stehen Formulare nebeneinander wie Knoepfe — ohne
   das hier setzt jedes <form> eine eigene Zeile.

   WICHTIG: `knopfreihe` gehoert NIE direkt an ein <td>. Ein <td> mit
   `display: flex` verlaesst die Tabellenberechnung, und die Zelle richtet
   sich nicht mehr an ihrer Zeile aus — im Bild vom 15.08.2026 stand die
   Knopfspalte sichtbar versetzt neben den Zeilen. Immer ein <div> IN der
   Zelle. */
.knopfreihe > form { display: inline-flex; margin: 0; }

/* Löschen ist selten und schwer — aber in einer Liste mit neun Schulen
   stuenden neun vollrote Knoepfe da, und das Lauteste auf der Seite waere
   ausgerechnet das, was man am seltensten tun soll. Deshalb hier die stille
   Fassung: rote Schrift, roter Rand, weisse Flaeche. Sie wird erst voll rot,
   wenn der Zeiger darauf steht oder die Tastatur sie erreicht — also genau
   dann, wenn jemand kurz davor ist, sie zu druecken. Die endgueltige
   Bestaetigung liegt ohnehin zwei Schritte weiter. */
.knopf-ernst-still {
  background: var(--ton-flaeche);
  border-color: #e0b6b1;
  color: var(--ton-problem);
}
.knopf-ernst-still:hover,
.knopf-ernst-still:focus-visible {
  background: var(--ton-problem);
  border-color: var(--ton-problem);
  color: #fff;
}

.symbol-klein { width: 16px; height: 16px; }

/* ==========================================================================
   13. Export-Kacheln

   Betreiber am 15.08.2026: "das muesste ein bisschen besser aufbereitet sein
   auf der Exporte-Seite, dass man das vielleicht auch in Kacheln macht fuer
   die Unterscheidung der unterschiedlichen Exportmoeglichkeiten."

   WARUM HIER KACHELN RICHTIG SIND UND IN EINER SCHULLISTE FALSCH WAEREN:
   Kacheln taugen fuer WENIGE, UNTERSCHIEDLICHE Dinge, die man auseinander
   halten will — nicht fuer viele gleichartige, die man vergleicht. Vier
   Exporte, jeder mit anderem Zweck und anderer Empfindlichkeit, sind genau
   der erste Fall. Neun Schulen mit denselben Spalten waeren der zweite; die
   stehen deshalb in einer Tabelle.

   Sie sind bewusst BREITER als die Startseiten-Kacheln und links ausgerichtet:
   Hier steht ein erklaerender Satz drin, und Fliesstext liest man nicht
   zentriert.
   ========================================================================== */

.exportkacheln {
  display: grid;
  gap: var(--mass-4);
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  margin: 0 0 var(--mass-5);
}

.exportkachel {
  display: flex;
  flex-direction: column;
  gap: var(--mass-3);
  padding: var(--mass-4) var(--mass-5) var(--mass-5);
  background: var(--ton-flaeche);
  border: 1px solid var(--ton-linie-stark);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.exportkachel-kopf {
  display: flex;
  align-items: center;
  gap: var(--mass-3);
}
.exportkachel-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 10px;
  background: var(--ton-akzent-hell);
  color: var(--ton-akzent);
}
.exportkachel-titel {
  font-size: 1.08rem;
  font-weight: 660;
  line-height: 1.25;
}
.exportkachel p { margin: 0; }
/* Der Knopf sitzt unten, auf gleicher Hoehe wie in den Nachbarkacheln —
   auch wenn der Text darueber unterschiedlich lang ist. */
.exportkachel .knopf { margin-top: auto; align-self: flex-start; }

/* --- Die Kachel mit Personendaten ---------------------------------------
   Die Kontaktliste ist die EINZIGE Ausgabe mit Lehrkraft-Namen und
   E-Mail-Adressen. Sie darf nicht gleichrangig neben den anderen stehen —
   nicht als Verbot, sondern damit niemand sie versehentlich fuer eine der
   harmlosen haelt und in einen gemeinsamen Ordner legt.

   Deshalb: eigener Abschnitt, warnender Ton, breiter Streifen an der Seite.
   Und der Knopf ist NICHT der Hauptknopf — die auffaelligste Schaltflaeche
   der Seite soll nicht die empfindlichste Datei holen. */
.exportkachel-personen {
  background: var(--ton-offen-flaeche);
  border-color: #e7c99a;
  border-left: 5px solid var(--ton-offen);
}
.exportkachel-personen .exportkachel-symbol {
  background: #f8e6c8;
  color: var(--ton-offen);
}

/* Eine Kachel, deren Datei es noch nicht gibt. Sichtbar, damit niemand sie
   sucht — aber ohne Ziel, damit niemand ins Leere klickt. */
.exportkachel-spaeter {
  background: var(--ton-matt-flaeche);
  border-style: dashed;
}
.exportkachel-spaeter .exportkachel-symbol {
  background: var(--ton-flaeche);
  color: var(--ton-matt);
}
.exportkachel-spaeter .exportkachel-titel { color: var(--ton-text-leise); }

.summe { font-size: 1.05rem; margin: 0; }
.summe strong { font-weight: 700; }

.exportliste { list-style: none; padding: 0; margin: 0; }
.exportliste li {
  display: flex;
  align-items: center;
  gap: var(--mass-3);
  flex-wrap: wrap;
  padding: var(--mass-2) 0;
  border-bottom: 1px solid var(--ton-linie);
}
.exportliste li:last-child { border-bottom: none; }
.exportliste form { margin: 0; }

.vermerkt {
  color: var(--ton-fertig);
  font-weight: 650;
  font-size: 0.9rem;
}

/* Text, der nur fuer Vorleseprogramme da ist. Sichtbar leer, aber vorhanden —
   damit eine Spalte ohne Beschriftung nicht namenlos bleibt. */
.nur-vorlese {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   9. Das Vorschau-Band

   Absichtlich auffaellig: Niemand soll eine Vorfuehrung mit erfundenen Daten
   fuer den Echtbetrieb halten. Im Echtbetrieb erscheint dieses Band nie —
   waere es dort zu sehen, waere der Zugangsschutz aus.
   ========================================================================== */

/* Das Vorfuehrungs-Band.

   LEISER GESTELLT am 15.08.2026 (Punkt N5). Vorher war es ein
   Baustellen-Schraffurband quer ueber die volle Breite, in einem kraeftigen
   Braunorange. Es war das Erste, was das Auge auf JEDER Seite traf — und das
   ist die falsche Rangfolge: Die Botschaft "das sind erfundene Daten" muss
   verlaesslich da sein, aber sie ist nicht der Inhalt der Seite.

   Was bleibt: die Warnfarbe, ein durchgehender Streifen ueber die volle
   Breite, und der Fassungsvermerk. Was geht: die Schraffur, die Grossflaeche
   und die Lautstaerke. Duenner, ruhiger, mit gedecktem Ton — sichtbar beim
   Hinsehen, nicht mehr im Weg beim Arbeiten.

   NICHT gemacht: das Band ausblendbar. Ein Warnhinweis, den man wegklicken
   kann, ist nach dem zweiten Tag weggeklickt — und dann haelt irgendwann
   jemand die Vorfuehrung fuer den Echtbetrieb. */
.vorschau-band {
  background: var(--ton-offen-flaeche);
  color: #6b4000;
  border-bottom: 2px solid var(--ton-offen);
  padding: var(--mass-1) var(--mass-5);
  font-size: 0.8rem;
  line-height: 1.5;
  text-align: center;
}
.vorschau-band strong { font-weight: 700; }

/* Der Fassungsvermerk: Datum, Zweig und Kurzkennung des Standes, aus dem
   dieses Abbild gebaut wurde. Leiser als die Warnung davor — er ist eine
   Hilfe beim Arbeiten, nicht die Botschaft des Bandes. */
.vorschau-band .fassung {
  display: inline-block;
  margin-left: var(--mass-2);
  padding: 0 var(--mass-2);
  border-radius: var(--radius-klein);
  background: rgba(122, 82, 0, 0.12);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  white-space: nowrap;
}

/* ==========================================================================
   10. Kleine Bildschirme

   DER BISHER BLINDE FLECK. Vor dieser Fassung gab es NULL @media-Regeln.
   Die Seite hatte genau ein Layout — fuer einen grossen Monitor. Gemessen
   am 15.08.2026; im Handover stand dazu ausdruecklich "nicht geprueft".
   Der Betreiber arbeitet auch mobil.
   ========================================================================== */

@media (max-width: 40rem) {
  .kopf, .navi, .inhalt, .fuss, .vorschau-band {
    padding-left: var(--mass-4);
    padding-right: var(--mass-4);
  }

  .inhalt { padding-top: var(--mass-4); }

  h1 { font-size: 1.35rem; }

  /* Zwei nebeneinander statt einer untereinander: Sechs Kacheln in einer
     Spalte sind eine sehr lange Seite, und die Kachel ist klein genug. */
  .kacheln { grid-template-columns: 1fr 1fr; }
  .kachel { min-height: 7rem; padding: var(--mass-3) var(--mass-2); }
  .kachel-titel { font-size: 0.92rem; }

  /* Kennzahlen bleiben zu zweit nebeneinander — einzeln untereinander
   waere eine sehr lange Spalte fuer sehr kleine Zahlen. */
  .kennzahlen { grid-template-columns: 1fr 1fr; }
  .kennzahl-wert { font-size: 1.5rem; }

  /* Das Menue wird waagerecht schiebbar statt umgebrochen. Vier Zeilen
     Menue auf einem Telefon sind keine Navigation, sondern eine Wand. */
  .navi-inhalt { padding: var(--mass-2) var(--mass-3); }
  .navi-punkt { padding: 0 var(--mass-2); font-size: 0.88rem; }

  /* Der Kopf bricht um, statt den Namen abzuschneiden. */
  .kopf { gap: var(--mass-2); }
  .kopf-rechts { width: 100%; justify-content: space-between; }

  /* Filter untereinander: nebeneinander sind sie auf 360 px unbenutzbar. */
  .filterleiste { flex-direction: column; align-items: stretch; }
  .filterleiste select,
  .filterleiste input[type="date"],
  .filterleiste input[type="search"] { width: 100%; }

  /* Schaltflaechen auf volle Breite — leichter zu treffen. */
  .knopfreihe { flex-direction: column; align-items: stretch; }
  .knopfreihe .knopf { width: 100%; }

  .kasten { padding: var(--mass-3) var(--mass-4); }

  /* Die Einzuege der Ankreuz-Ebenen kleiner, sonst bleibt keine Breite. */
  .ebene-schule { margin-left: var(--mass-3); }
  .ebene-gruppe { margin-left: var(--mass-5); }

  .vorschau-band .fassung {
    display: block;
    margin: var(--mass-1) 0 0;
    white-space: normal;
  }
}

/* Sehr schmal (Telefon hochkant, ab etwa 360 px). */
@media (max-width: 24rem) {
  .inhalt { padding-left: var(--mass-3); padding-right: var(--mass-3); }
  .kachel { padding: var(--mass-3); }
}

/* Beim Drucken: kein Band, keine Navigation, keine Schatten. */
@media print {
  .vorschau-band, .navi, .kopf-rechts { display: none; }
  body { background: #fff; }
  .kachel, .kasten, .tabellenrahmen { box-shadow: none; }
}

/* ==========================================================================
   11. Die Auswahl auf der QR-Seite

   Betreiber am 15.08.2026: "wenn vor jedem ein Button ist und das abgetrennt
   ist, das Bundesland, und dann sieht man eindeutig ein wenig eingerückt, das
   sind die Schulen des Bundeslands, das sind die Gruppen der Schulen, dann
   wird das übersichtlicher."

   Die Einrückung ist hier keine Zierde, sondern die einzige Angabe darüber,
   was zu wem gehört. Sie muss deshalb deutlich genug sein, um auf einen Blick
   zu wirken — und wird von einer Linie begleitet, damit sie auch bei langen
   Listen nicht verlorengeht.
   ========================================================================== */

.auswahlblock { padding-bottom: var(--mass-4); }

/* Das Bundesland: die oberste Ebene, deutlich hervorgehoben. */
.ebene-land .ebene-name {
  font-size: 1.05rem;
  font-weight: 700;
}

/* Die Schule: eingerückt, mit einer Linie, die die Zugehörigkeit trägt. */
.ebene-schule {
  margin-left: var(--mass-4);
  padding-left: var(--mass-4);
  border-left: 2px solid var(--ton-linie);
}
.ebene-schule .ebene-name { font-weight: 650; }

/* Die Gruppe: noch eine Stufe weiter, in einer Zeile mit Code und Knopf. */
.ebene-gruppe {
  display: flex;
  align-items: center;
  gap: var(--mass-3);
  flex-wrap: wrap;
  margin-left: var(--mass-4);
  padding-left: var(--mass-4);
  border-left: 2px solid var(--ton-linie);
}
.ebene-gruppe .ankreuz { flex: 1 1 14rem; }

.sammelschalter { margin: 0 0 var(--mass-4); }

/* Der Hauptknopf steht mittig und mit Luft zur Liste — beides ausdrücklich
   verlangt. Ein Auslöser, der an der letzten Zeile klebt, sieht aus wie ein
   Teil von ihr. */
.absenderleiste {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mass-2);
  margin: var(--mass-7) 0 var(--mass-6);
  padding: var(--mass-5);
  background: var(--ton-flaeche);
  border: 1px solid var(--ton-linie);
  border-radius: var(--radius);
}

.knopf-gross {
  min-height: 3.25rem;
  padding: 0 var(--mass-6);
  font-size: 1.05rem;
}

.auswahl-zaehler {
  margin: 0;
  font-weight: 650;
}
.auswahl-zaehler.auswahl-leer { color: var(--ton-text-leise); font-weight: 400; }

/* --- Erzeugen und Herunterladen in EINEM Feld ---------------------------
   Der Betreiber am 15.08.2026: "das mit den [Z]IP koennte man in das selbe
   Feld packen, wo QR-Codes erzeugen ist. Und wenn das durch ist, dann ist
   halt weiter rechts [Z]IP-Datei mit QR-Codes downloaden und dann ein
   Download-Button."

   Vorher war der Download eine Zeile in der Tabelle "Fruehere Stapel", ganz
   unten auf der Seite — der zweite Schritt einer Handlung stand raeumlich
   getrennt vom ersten und sah aus wie Archiv. Jetzt stehen beide
   nebeneinander in einem Feld, mit dem Pfeil dazwischen: erst erzeugen,
   dann herunterladen.

   Der zweite Schritt ist stumpf, solange es nichts zu holen gibt, und wird
   erst hell, wenn ein Stapel da ist. Das ist die ganze Logik von
   "gehighlighted, sobald die QR-Codes erzeugt worden sind". */
.ablaufleiste {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: var(--mass-4);
  margin: var(--mass-7) 0 var(--mass-6);
  padding: var(--mass-5);
  background: var(--ton-flaeche);
  border: 1px solid var(--ton-linie-stark);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.ablaufschritt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: var(--mass-3);
  padding: var(--mass-4);
  border-radius: var(--radius);
}
.ablaufschritt-kopf {
  display: flex;
  align-items: center;
  gap: var(--mass-2);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ton-text-leise);
}
.schrittzahl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--ton-linie);
  color: var(--ton-text-leise);
  font-size: 0.8rem;
  font-weight: 700;
}
.ablaufschritt .hinweis { margin: 0; }

/* Der aktive Schritt: Leitfarbe, hell hinterlegt. */
.ablaufschritt-aktiv {
  background: var(--ton-akzent-hell);
  outline: 1px solid #c8daf3;
}
.ablaufschritt-aktiv .ablaufschritt-kopf { color: var(--ton-akzent); }
.ablaufschritt-aktiv .schrittzahl {
  background: var(--ton-akzent);
  color: #fff;
}

/* Der Schritt, der noch nicht dran ist. Nicht versteckt — man soll sehen,
   dass er kommt, sonst sucht man ihn. */
.ablaufschritt-wartet { background: var(--ton-matt-flaeche); }
.ablaufschritt-wartet .knopf {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Der fertige Schritt: gruen hinterlegt, weil hier wirklich etwas fertig
   geworden ist — nicht als Ampel, sondern als Quittung. */
.ablaufschritt-fertig { background: var(--ton-fertig-flaeche); }
.ablaufschritt-fertig .ablaufschritt-kopf { color: var(--ton-fertig); }
.ablaufschritt-fertig .schrittzahl { background: var(--ton-fertig); color: #fff; }

.ablaufpfeil {
  display: flex;
  align-items: center;
  color: var(--ton-linie-stark);
  font-size: 1.5rem;
  line-height: 1;
}

/* Nebeneinander nur, wenn Platz ist. Darunter wird aus dem Pfeil nach rechts
   einer nach unten — sonst zeigt er ins Leere. */
@media (max-width: 42rem) {
  .ablaufleiste { grid-template-columns: 1fr; gap: var(--mass-2); }
  .ablaufpfeil { justify-content: center; transform: rotate(90deg); }
}

/* ==========================================================================
   12. Der QR-Code zum Ausprobieren
   ========================================================================== */

.qr-ansicht { max-width: 32rem; margin: 0 auto; text-align: center; }
.qr-ansicht .erklaerung { text-align: left; }
.qr-ansicht .knopfreihe { justify-content: center; }

/* Weisser Grund mit Ruhezone rundherum. Ein QR-Code ohne Rand oder auf
   farbiger Fläche wird von vielen Lesegeräten nicht erkannt — das ist eine
   Eigenschaft des Verfahrens, keine Geschmacksfrage. */
.qr-buehne {
  display: inline-block;
  padding: var(--mass-5);
  margin: var(--mass-4) 0;
  background: #fff;
  border: 1px solid var(--ton-linie);
  border-radius: var(--radius);
}
.qr-buehne img { display: block; width: 20rem; height: auto; max-width: 100%; }

.qr-code-text { font-size: 1.1rem; }

/* Das Fenster über der Liste. Es entsteht erst, wenn JavaScript läuft;
   ohne JavaScript führt derselbe Knopf auf die eigene Seite. */
.qr-fenster {
  border: none;
  border-radius: var(--radius);
  padding: 0;
  max-width: min(34rem, 92vw);
  box-shadow: 0 20px 50px rgba(22, 32, 46, 0.35);
}
.qr-fenster::backdrop { background: rgba(22, 32, 46, 0.55); }
.qr-fenster-inhalt { padding: var(--mass-5); }
.qr-fenster-inhalt h1 { font-size: 1.2rem; }
.qr-fenster-laedt { color: var(--ton-text-leise); text-align: center; }

@media (max-width: 40rem) {
  /* Auf schmalen Geräten kosten die Einzüge zu viel Breite. Die Linie bleibt
     — sie trägt die Zugehörigkeit auch bei kleinerem Abstand. */
  .ebene-schule, .ebene-gruppe {
    margin-left: var(--mass-2);
    padding-left: var(--mass-3);
  }
  .qr-buehne { padding: var(--mass-3); }
  .qr-buehne img { width: 100%; }
}

/* ==========================================================================
   14. Das Begriffslexikon (Punkt N4, 15.08.2026)

   Betreiber-Auftrag: eine Oberflaeche "fuer jemand, der keine Ahnung hat".
   Dieser Dienst benutzt rund fuenfzehn Woerter, die ausserhalb des Projekts
   nichts bedeuten — Welle, Stapel, Gruppe, Pseudonym, Zuordnungsliste. Wer
   sie nicht kennt, kann jede Seite lesen und trotzdem nicht wissen, was er
   tut.

   WARUM KEINE SPRECHBLASE BEIM UEBERFAHREN: Die gibt es auf einem Tablet
   nicht, und bedient wird hier auf Tablets. Antippen muss reichen — das war
   die ausdrueckliche Vorgabe. Ein Verweis auf einen Eintrag kann das, eine
   Sprechblase nicht.
   ========================================================================== */

/* Die Sprungleiste. Auf einer Seite mit fuenfzehn Eintraegen ist Rollen der
   langsamste Weg — auf dem Telefon der langsamste von allen. */
.sprungleiste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mass-2);
  margin: 0 0 var(--mass-5);
  padding: var(--mass-3);
  background: var(--ton-flaeche);
  border: 1px solid var(--ton-linie);
  border-radius: var(--radius);
}

.lexikon { margin: 0; }

.lexikon-eintrag {
  padding: var(--mass-4) var(--mass-5);
  margin: 0 0 var(--mass-3);
  background: var(--ton-flaeche);
  border: 1px solid var(--ton-linie-stark);
  border-left: 4px solid var(--ton-akzent);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  /* Der Sprungpunkt liegt etwas oberhalb, sonst klebt die Ueberschrift nach
     dem Sprung an der Fensterkante. */
  scroll-margin-top: var(--mass-5);
}

/* Der angesprungene Eintrag hebt sich ab — sonst weiss man nach dem Sprung
   nicht, welcher der fuenfzehn gerade gemeint ist. */
.lexikon-eintrag:target {
  background: var(--ton-akzent-hell);
  border-left-color: var(--ton-akzent-dunkel);
}

.lexikon dt {
  display: flex;
  align-items: center;
  gap: var(--mass-2);
  font-size: 1.15rem;
  font-weight: 660;
  margin: 0 0 var(--mass-2);
}
.lexikon-symbol { color: var(--ton-akzent); display: inline-flex; }

.lexikon dd { margin: 0; }
.lexikon dd p { margin: 0 0 var(--mass-2); }
.lexikon dd p:last-child { margin-bottom: 0; }

/* Der erste Satz ist die Kurzfassung: Wer nur ihn liest, hat das Wort
   verstanden. Alles Weitere ist Vertiefung. */
.lexikon-kurz { font-weight: 620; }

/* Ein Verweis auf einen Begriff, mitten im Text. Gepunktete Unterlaengung
   statt durchgezogener: Er fuehrt nicht weg, er erklaert nur. */
.begriff {
  color: var(--ton-akzent);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  /* Antippflaeche: Ein Wort im Fliesstext ist rund 20 Punkt hoch. Padding
     wuerde die Zeilen auseinanderschieben; deshalb waechst die Trefferflaeche
     nach oben und unten, ohne den Textfluss anzufassen. */
  padding: 0.35rem 0;
  margin: -0.35rem 0;
}
.begriff:hover, .begriff:focus-visible { background: var(--ton-akzent-hell); }

.fuss a { color: inherit; text-decoration: underline; margin-left: var(--mass-3); }

/* Der Merksatz: der eine Satz je Begriff, der haengenbleiben muss. Abgesetzt
   durch einen Streifen, nicht durch Fettdruck allein — in einem Absatz voller
   Fliesstext geht Fettdruck unter. */
.lexikon-merksatz {
  padding: var(--mass-2) var(--mass-3);
  border-left: 3px solid var(--ton-akzent);
  background: var(--ton-flaeche-leise);
  font-weight: 620;
}
.lexikon-eintrag:target .lexikon-merksatz { background: rgba(255, 255, 255, 0.6); }

/* Ein Abschnitt mit nur EINER Kachel. Ohne diese Regel bekaeme sie eine
   Spalte von 19rem in einem dreispaltigen Raster und stuende schmal und
   verloren links — ausgerechnet die Kachel, die am meisten Text traegt. */
.exportkacheln-einzeln { grid-template-columns: minmax(0, 34rem); }

/* Die Frage nach dem Verhaeltnis zum Bestand (Punkt A9). Sie sieht aus wie
   die Bundesland-Bloecke auf der QR-Seite — gleiche Frage-Form, gleiche
   Darstellung. Zwei Aussehen fuer dieselbe Sache waeren zwei Sprachen. */
.modusfrage { margin-bottom: var(--mass-4); }
.modusfeld { padding: 0 var(--mass-4) var(--mass-2); }
.modusfeld .hinweis { margin-top: var(--mass-2); }