/*
 * Gestaltung von BeatWerk Studio.
 *
 * ## Woran sich die Entscheidungen halten
 *
 * Das hier ist kein Verwaltungsprogramm fuer einen Schreibtisch mit zwei
 * Bildschirmen. Es ist das Werkzeug einer Musikschule: oft im Stehen bedient,
 * oft zwischen zwei Unterrichtsstunden, manchmal mit einem Stock in der Hand.
 * Daraus folgt alles Weitere.
 *
 * - **Grosse Klickflaechen.** Nichts unter 2,5 Zeilenhoehen.
 * - **Wenige Farben mit Bedeutung, klar belegt.** Kupfer markiert eine
 *   Handlung, Rot einen Fehler, Gruen eine Bestaetigung, Grau eine
 *   Auskunft. Wo eine Farbe etwas **bedeutet**, bleibt es bei diesen vieren -
 *   mehr hiesse raten muessen.
 * - **Ruhiger Grund, klare Karten.** Der Inhalt steht auf hellen Flaechen mit
 *   Rand; der Hintergrund ist leicht getoent. Ohne diesen Unterschied
 *   verschwimmt eine lange Seite zu einer Flaeche.
 * - **Keine Schrift von aussen.** Systemschriften laden sofort und sind ohne
 *   Netz da - beides zaehlt in einem Programm, das offline arbeiten soll
 *   (Entwurf 11.4). Die Anmutung kommt deshalb aus Farbe, Form und
 *   Zeichenabstand, nicht aus einer geladenen Schriftdatei.
 *
 * ## Woher die Anmutung kommt (Feinschliff, September 2026; zweiter
 * Durchgang nach Christophers Ruecklauf, "wenig ansprechend, wenig
 * kinderfreundlich")
 *
 * Kupfer ist die Farbe eines Schlagzeugkessels; der leise Punktraster am
 * Kopf zitiert den Kranz der Spannschrauben am Kesselrand; das gekreuzte
 * Stockpaar im Kopf ist das Bildzeichen der Anwendung.
 *
 * Der erste Durchgang (E-126, E-131, E-132) hielt sich eng an "wenige
 * Farben, klar belegt" und blieb dabei zu nah an einer Verwaltungsseite -
 * das war Christophers berechtigter Einwand. Die Antwort darauf ist
 * **nicht**, die Regel fuer Bedeutungsfarben aufzugeben (Rot bleibt Fehler,
 * Gruen bleibt bestaetigt), sondern eine zweite, rein schmueckende Farbe
 * danebenzustellen: Gold, die Farbe von Becken und Beschlaegen. Gold traegt
 * **nie** eine Bedeutung, die man erraten muesste - es steht nur dort, wo
 * ohnehin klar ist, worum es geht (Kopfzeile, Anmeldung, ein besonderer
 * Moment wie die hoechste Bewertungsstufe), nie in einer Tabelle oder einem
 * Formular. Dazu: grosszuegigere Rundung (weicher, weniger Amtsstube),
 * kraeftigere Schatten (mehr Abstand zur Flaeche, mehr Spiel), und Reiter
 * als volle Kapseln statt Browser-Karteireiter.
 *
 * Die Farbwerte sind bewusst benannt und nicht verstreut: Wer die Anmutung
 * aendern will, aendert sie oben und nicht an vierzig Stellen.
 */

:root {
  /*
   * Freundliche Unterrichtsfarben (Christopher, 15. September 2026: "in
   * freundlichen Farben"). Warmes Hellweiss als Grund, Petrol fuer alles, was
   * man anklickt, Sonnengelb, Koralle, Himmelblau, Mint und Beere als
   * Akzente - so bekommt jede Art von Inhalt eine eigene, frohe Farbe.
   * Kontraste: Weiss auf Petrol ca. 4,9:1; die `-dunkel`-Fassungen sind die
   * Textfarben auf hellem Grund (jeweils ueber 4,5:1).
   */
  --petrol: #177a86;
  --petrol-dunkel: #0f5d67;
  --petrol-hell: #e0f2f3;
  --sonne: #f5b53d;
  --sonne-dunkel: #8a5a00;
  --sonne-hell: #fff3d6;
  --koralle: #e8664a;
  --koralle-dunkel: #b0432c;
  --koralle-hell: #fde6df;
  --himmel: #3f8fd2;
  --himmel-dunkel: #245f94;
  --himmel-hell: #e3effa;
  --mint: #3f9e6e;
  --mint-dunkel: #2a6e4b;
  --mint-hell: #e3f4ea;
  --beere: #8a5cc6;
  --beere-dunkel: #62379c;
  --beere-hell: #efe6fa;

  /*
   * Die frueheren Materialnamen bleiben als Aliase, damit bestehende Regeln
   * (auch `musikwissen.css`) die neue Palette ohne Einzelaenderung erben.
   */
  --fell: #fffaf1;
  --fell-dunkel: #efe4cf;
  --holz: var(--petrol-dunkel);
  --holz-hell: var(--petrol);
  --holz-dunkel: #0b4850;
  --messing: var(--sonne);
  --messing-hell: #ffd98a;
  --kirsch: var(--koralle-dunkel);
  --tinte: #2b2724;

  --grund: #fdf8ef;
  --flaeche: #ffffff;
  --flaeche-leise: #f7f1e5;
  --rand: #eadfca;
  /*
   * Begrenzung von Bedienelementen, deshalb 3:1 Pflicht (WCAG 1.4.11).
   * Vorher #d5c3a0: gerechnet 1,73:1 auf der Karte, 1,63:1 auf dem Grund,
   * 1,54:1 auf der leisen Flaeche - und ausgerechnet ein unbetonter Knopf
   * hat keine eigene Fuellung gegen die Seite (weiss auf #fdf8ef sind
   * 1,08:1), der Rand ist dort die einzige Begrenzung ueberhaupt. Jetzt
   * 3,65 / 3,45 / 3,25:1 auf denselben drei Flaechen.
   */
  --rand-stark: #9a8354;
  --schrift: var(--tinte);
  --schrift-leise: #6e6457;

  /* Petrol: die Betonung mit Bedeutung - hier wird gehandelt. */
  --betont: var(--petrol);
  --betont-dunkel: var(--petrol-dunkel);
  --betont-hell: var(--petrol-hell);

  --gold: var(--sonne);
  --gold-dunkel: var(--sonne-dunkel);
  --gold-hell: var(--sonne-hell);

  --fehler: #b3261e;
  --fehler-hell: #fdecea;
  --gut: var(--mint-dunkel);
  --gut-hell: var(--mint-hell);

  --rundung: 16px;
  --schatten: 0 1px 2px rgb(43 39 36 / 6%), 0 8px 24px rgb(43 39 36 / 7%);

  /*
   * Abstands-, Schrift- und Rundungsskala (E-224).
   *
   * Vorher gab es 40 Farbmarken, aber keine einzige Abstandsmarke - und
   * entsprechend 56 verschiedene Abstandswerte, 82 verschiedene
   * Schriftgroessen (sieben davon zwischen 0,84 und 0,88 rem) und 32
   * Rundungswerte im Bestand; auf "Heute" rendern dadurch 30 verschiedene
   * berechnete Schriftgroessen gleichzeitig. Das ist die technische Ursache
   * fuer den unruhigen Gesamteindruck, nicht die Farbwahl.
   *
   * Die Werte sind so gewaehlt, dass sie den Bestand treffen und nicht
   * verschieben: 4/8/12/16/24/32 px deckt die weit ueberwiegende Mehrheit der
   * vorhandenen Abstaende, die Schriftstufen liegen auf den heute schon
   * dominierenden Groessen. Rein additiv - bestehende Regeln aendern sich
   * durch diese Marken nicht, sie werden Datei fuer Datei darauf gezogen.
   */
  --abstand-1: 0.25rem;
  --abstand-2: 0.5rem;
  --abstand-3: 0.75rem;
  --abstand-4: 1rem;
  --abstand-5: 1.5rem;
  --abstand-6: 2rem;

  --text-xs: 0.8rem;
  --text-s: 0.875rem;
  --text-m: 1rem;
  --text-l: 1.125rem;
  --text-xl: 1.375rem;
  --text-xxl: 1.875rem;

  /* Karte/Feld: `--rundung`. Kleinteiliges: `-klein`. Chips und Knopfgruppen: `-pille`. */
  --rundung-klein: 8px;
  --rundung-pille: 999px;

  /*
   * Mindestgroesse einer Klickflaeche (WCAG 2.5.8 verlangt 24 px, die
   * Handbedienung auf dem Tablet im Proberaum deutlich mehr).
   */
  --klickflaeche: 44px;

  /* Lokal ausgelieferte Schriften (web/fremd/schriften/schriften.css). */
  --schrift-anzeige: "Fraunces", Georgia, "Times New Roman", serif;
  --schrift-text: "Karla", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --schrift-mono: "Space Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /*
   * Breite des Arbeitsbereichs. Erst 78rem, dann 112rem - auf breiten
   * Bildschirmen blieben trotzdem links und rechts breite leere Raender, und
   * der eigentliche Inhalt wurde zu klein ("Meist bleiben riesen breite
   * Raender", Christopher, 15. September 2026). Die Verwaltung ist eine
   * Arbeitsflaeche, kein Lesetext: Sie nutzt die ganze Breite, nur mit
   * einem mitwachsenden Mindestabstand zum Rand (`--rand-abstand`).
   * Lange Fliesstexte begrenzen sich dort, wo sie stehen, selbst.
   */
  --inhaltsbreite: none;
  --rand-abstand: clamp(0.75rem, 1.4vw, 1.75rem);
}

* { box-sizing: border-box; }

/*
 * `[hidden]` bedeutet hier immer versteckt - unabhaengig davon, was eine
 * spaetere Regel fuer dasselbe Element an `display` setzt.
 *
 * Im Browser gefunden (E-115), nicht durch Lesen: Der Grund war keine
 * Spezifitaetsfrage im ueblichen Sinn. Eine normale Autor-Regel schlaegt die
 * Browser-Vorgabe `[hidden] { display: none }` immer, **unabhaengig von
 * ihrer eigenen Spezifitaet** - Ursprung (Browser- gegen Autor-Stylesheet)
 * entscheidet vor Spezifitaet, und der Browser-Ursprung verliert dort immer.
 * Ein einzelnes `button { display: inline-flex }` genuegte also bereits, um
 * jeden per Rolle versteckten Reiter (`Preise`, `Zugaenge`, `Abrechnung`,
 * `Geraet`) fuer ein Eltern- oder Schuelerkonto sichtbar **und anklickbar**
 * zu lassen - nicht nur die zwei Dialoge im Notenarbeitsplatz.
 *
 * Das ist "nur" Bequemlichkeit und keine Absicherung (der Server weist jede
 * unzulaessige Anfrage ohnehin ab, siehe die Kommentare an den einzelnen
 * Routen) - aber eine Bequemlichkeit, die niemals gewirkt hat, ist ein
 * Fehler und keine Kleinigkeit: Ein Elternkonto sah einen klickbaren
 * "Abrechnung"-Reiter, der ihm nicht zusteht.
 *
 * `!important` ist hier bewusst und die einzige Stelle im Projekt: Es soll
 * jede kuenftige Regel schlagen, die `display` setzt, ohne dass jede neue
 * Klasse einzeln an `[hidden]` denken muss.
 */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font: 16px/1.55 var(--schrift-text);
}

/*
 * Ueberschriften in der Anzeigeschrift (Fraunces). Die kleinen Versal-
 * Zwischenzeilen (h3, Gruppentitel der Seitenleiste) bleiben bewusst in der
 * Textschrift - gesperrte Versalien einer Serifenschrift lesen sich in
 * Tabellen und Listen schlecht.
 */
h1,
h2 {
  font-family: var(--schrift-anzeige);
  text-wrap: balance;
}
.reiter-gruppe-titel { font-family: var(--schrift-text); }

/* --- Sprunglink --------------------------------------------------------- */

/*
 * Erster Tabstopp der Seite, sichtbar nur bei Tastaturfokus (WCAG 2.4.1).
 * Ohne ihn fuehrt der Weg zum Inhalt ueber alle 19 Bereichsknoepfe der
 * Seitenleiste. `fixed`, damit er auch bei gescrollter Seite oben erscheint;
 * bewusst ohne Uebergang, damit er sofort steht und keine Bewegung erzeugt.
 */
.sprunglink {
  position: fixed;
  top: -4rem;
  left: 0.75rem;
  z-index: 60;
  padding: 0.6rem var(--abstand-4);
  border-radius: var(--rundung);
  background: var(--flaeche);
  color: var(--betont-dunkel);
  font-family: var(--schrift-text);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--schatten);
}
.sprunglink:focus-visible { top: 0.75rem; }

/* --- Kopf --------------------------------------------------------------- */

/* Heller, freundlicher Kopf; die Farben der Anwendung als Streifen darunter. */
header {
  position: relative;
  background: var(--flaeche);
  color: var(--schrift);
  padding: 0.7rem var(--rand-abstand) 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: linear-gradient(
    90deg,
    var(--petrol) 0 20%,
    var(--sonne) 20% 40%,
    var(--koralle) 40% 60%,
    var(--himmel) 60% 80%,
    var(--mint) 80% 100%
  );
}

/* Trommel mit Stockpaar - das Bildzeichen der Anwendung. */
.marke {
  position: relative;
  flex: none;
}

header hgroup {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

header h1 {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.15;
}
header h1 b { font-weight: 900; color: var(--petrol); }

header .hinweis {
  color: var(--schrift-leise);
  margin: 0;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

main {
  max-width: var(--inhaltsbreite);
  margin: 0 auto;
  padding: var(--abstand-4) var(--rand-abstand) var(--abstand-5);
}

/* --- Anzeigename mit Initialen-Avatar ------------------------------------ */

/*
 * Ersetzt rohe Kennungen ("konto-christopher", "demo-schueler-anna") durch
 * echte Anzeigenamen mit einem kleinen Kreis aus ein bis zwei
 * Grossbuchstaben (E-147) - dieselbe Kupfer-Betonung wie der Rest der
 * Oberflaeche, keine zusaetzliche Farbe. `nameVon()`/`initialenVon()` in
 * `namen.js` entscheiden allein ueber den Rueckfall auf die Kennung; dieses
 * Stylesheet zeichnet nur, was sie liefern. Die Kreisflaeche traegt selbst
 * keine Information (`aria-hidden`, siehe `namen.js`) - der Name daneben
 * genuegt fuer einen Screenreader.
 */
.avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--betont-hell);
  color: var(--betont-dunkel);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0;
}

.namens-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2);
  max-width: 100%;
}

/*
 * Bewusst OHNE `min-width: 0`/`overflow-wrap: anywhere`: Eine fruehere
 * Fassung hatte genau das, und in der Kontenverwaltung (mehrere Namen je
 * Zeile in einer schmalen Tabellenspalte) liess das die Tabellenspalte auf
 * beliebig schmal schrumpfen - jeder Name brach dann Buchstabe fuer
 * Buchstabe um, mit turmhohen Zeilen als Folge (im Browser gefunden, nicht
 * vermutet). `white-space: nowrap` haelt den Namen als ein Stueck zusammen,
 * genau wie der reine Text vorher - eine sehr lange Kombination lässt im
 * schlimmsten Fall die Tabelle selbst breiter werden bzw. (unter 640px
 * ohnehin schon vorgesehen) waagerecht scrollen.
 */
.namens-chip .name { white-space: nowrap; }

/* --- Karten ------------------------------------------------------------- */

/*
 * Was eine Karte ist, und was nicht.
 *
 * Nur die grossen Behaelter: der Anmeldebereich, der Arbeitsbereich, jede
 * Tafel und jedes Aufklapp-Element. **Nicht** jede beliebige Schachtel -
 * sonst entstehen Karten in Karten in Karten, und die Abstufung, die eine
 * Karte erzeugen soll, ist wieder weg.
 */
section,
.tafel,
details,
.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  box-shadow: var(--schatten);
}

section { padding: var(--abstand-5); margin-bottom: 1.25rem; }
.tafel { padding: 1.25rem; }

/* Der Arbeitsbereich ist der Rahmen um die Tafeln und braucht selbst keine
   eigene Flaeche - sonst liegt eine Karte auf einer Karte. */
#arbeitsbereich {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Kopfzeile: wer angemeldet ist, links; was man tun kann, rechts. */
.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--abstand-4);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  box-shadow: var(--schatten);
  padding: 0.9rem 1.25rem;
  margin-bottom: 1.25rem;
}
.kopf p { margin: 0; }
.kopf > div { display: flex; gap: var(--abstand-2); flex-wrap: wrap; }

/* Aufklapp-Elemente liegen **in** einer Tafel und bekommen deshalb nur einen
   Rand, keinen zweiten Schatten. */
.tafel details { box-shadow: none; background: var(--flaeche-leise); }

h2 { margin: 0 0 var(--abstand-4); font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.005em; }
h3 {
  margin: 1.75rem 0 0.6rem;
  font-size: var(--text-s);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--schrift-leise);
}

/* --- Seitenleiste --------------------------------------------------------- */

/*
 * Gruppierte linke Seitenleiste statt der horizontalen Kapselleiste (E-147,
 * nach einem von Christopher bestaetigten Gestaltungsentwurf - "Das ist die
 * Richtung!"). Vorherige Durchgaenge blieben eine einzelne, nur zufaellig
 * umbrechende Zeile: E-131/E-132 haengten eine "Einrichtung"-Gruppe ans
 * Zeilenende, E-135 machte daraus volle Kapseln statt Browser-Karteireiter.
 * Drei feste Gruppen ("Dein Arbeitsplatz", "Deine Musik", "Verwaltung")
 * stehen jetzt dauerhaft untereinander, nicht nur bei ausreichender Breite.
 *
 * `#reiter` bleibt dieselbe Kennung, an die sich `app.js` ausschliesslich
 * per `querySelectorAll('button[data-ziel]')`/`querySelectorAll('button')`
 * haelt - das findet jeden Knopf unabhaengig von seiner Verschachtelung in
 * `.reiter-gruppe-block`. Diese Umstellung aendert deshalb keine einzige
 * Zeile der Klick-, Sichtbarkeits- oder Rollenlogik in `app.js`; sie ordnet
 * nur dieselben siebzehn Knoepfe neu an.
 */
.arbeitsflaeche {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-5);
}

nav.seitenleiste {
  flex: 0 0 14.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding: var(--abstand-4) var(--abstand-3);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  box-shadow: var(--schatten);
  /* Bleibt beim Scrollen einer langen Tafel in Sicht - der Sinn einer
     Seitenleiste, die zwischen Bereichen springt. */
  position: sticky;
  top: 1rem;
}

.reiter-gruppe-block {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.reiter-gruppe-titel {
  margin: 0 0 0.35rem 0.7rem;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--schrift-leise);
}

/*
 * Auch fuer `<a>`: "Wissen & Tipps" verlinkt auf eine eigene Seite
 * (`wissen.html`, keine Kachel dieser Ein-Seiten-Anwendung) und ist deshalb
 * bewusst kein `<button data-ziel>` wie die anderen Reiter - ohne eigene
 * Regel blieb er als einziger Eintrag blau, unterstrichen und nicht
 * vollbreit (Browser-Grundformatierung eines Links), auffaellig anders als
 * der Rest der Leiste. Beide Elemente teilen sich deshalb dieselbe Form.
 */
nav.seitenleiste button,
nav.seitenleiste a {
  background: none;
  border: none;
  padding: 0.6rem 0.9rem;
  font: inherit;
  font-weight: 600;
  color: var(--schrift-leise);
  cursor: pointer;
  border-radius: 999px;
  text-align: left;
  width: 100%;
  text-decoration: none;
  box-sizing: border-box;
  display: block;
}

nav.seitenleiste button:hover,
nav.seitenleiste a:hover { background: var(--flaeche-leise); color: var(--schrift); }

/* Der aktive Reiter traegt die Betonung. Ohne sie muss man suchen, wo man ist. */
nav.seitenleiste button.aktiv {
  color: #fff;
  background: var(--betont);
  box-shadow: 0 2px 8px rgb(15 93 103 / 25%), inset 4px 0 0 var(--sonne);
}
nav.seitenleiste button.aktiv:hover { background: var(--betont-dunkel); color: #fff; }

.inhaltsbereich { flex: 1 1 auto; min-width: 0; }

/*
 * Einklappbare Seitenleiste. Eingeklappt bleibt nur ein schmaler Streifen mit
 * dem Umschaltknopf - der Inhalt bekommt die Breite. Im Unterrichtsmodus
 * klappt `unterricht.js` sie selbst ein und stellt den vorherigen Zustand
 * danach wieder her.
 */
.leiste-umschalten {
  justify-content: flex-start;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.4rem 0.8rem;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--schrift-leise);
  font-size: var(--text-s);
  font-weight: 600;
}
nav.seitenleiste .leiste-umschalten:hover { background: var(--flaeche-leise); color: var(--schrift); }
.leiste-symbol { font-size: var(--text-l); line-height: 1; }
.arbeitsflaeche.leiste-zu nav.seitenleiste {
  flex-basis: 3.25rem;
  padding: var(--abstand-2) 0.3rem;
  gap: 0;
}
.arbeitsflaeche.leiste-zu .reiter-gruppe-block,
.arbeitsflaeche.leiste-zu .leiste-text { display: none; }
.arbeitsflaeche.leiste-zu .leiste-umschalten { justify-content: center; padding: 0.4rem; }

/*
 * Schmalere Bildschirme: Die Seitenleiste wird wieder zu einer waagerechten,
 * umbrechenden Zeile ueber dem Inhalt statt daneben - dieselbe Kapsel-Optik,
 * nur horizontal. `display: contents` loest `.reiter-gruppe-block` optisch
 * auf, ohne die Knoepfe aus `#reiter` zu entfernen: `app.js` findet sie
 * unveraendert, `position: sticky` wird sinnlos und deshalb hier zurueckgesetzt.
 */
@media (max-width: 64rem) {
  /*
   * `.arbeitsflaeche`s Grundregel (oben) traegt `align-items: flex-start` -
   * richtig fuer die nebeneinander stehende Desktop-Spalte (die Seitenleiste
   * soll nicht auf Inhaltshoehe gestreckt werden), aber genau das liess
   * `.inhaltsbereich` hier, in der uebereinander gestapelten Spalte, auf
   * seine eigene Inhaltsbreite schrumpfen/wachsen statt auf die volle
   * verfuegbare Breite - der eigentliche Grund fuer den bei Befund 8 der
   * a11y-Pruefung gemeldeten horizontalen Seitenueberlauf (E-173): Nicht nur
   * `.stueckwahl`s feste `min-width` allein war die Ursache, sondern dieser
   * fehlende Breitenzwang der gesamten Inhaltsspalte, der jede darin
   * liegende Mindestbreite ungebremst durchgereicht hat. `align-items:
   * stretch` ist der CSS-Grundwert und macht daraus wieder eine echte
   * Blockspalte in voller Breite.
   */
  .arbeitsflaeche { flex-direction: column; align-items: stretch; }
  nav.seitenleiste {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.35rem;
    width: 100%;
    position: static;
  }
  .reiter-gruppe-block { display: contents; }
  /*
   * Jede Gruppe faengt eine neue Zeile an (E-228). Vorher floss der
   * Gruppentitel mitten in die umbrechende Knopfreihe - im Bild stand
   * "Kalender Schueler Stunden Hausaufgaben" und danach erst "NOTEN & MUSIK",
   * sodass die Ueberschrift zur vorigen statt zur folgenden Gruppe zu gehoeren
   * schien. `flex-basis: 100%` zwingt den Umbruch VOR dem Titel, die Gruppe
   * steht danach geschlossen darunter.
   */
  .reiter-gruppe-titel {
    display: flex;
    align-items: center;
    flex-basis: 100%;
    margin: var(--abstand-2) 0 var(--abstand-1);
    padding-left: 0;
    border-left: none;
  }
  /* Der erste Titel braucht keinen Abstand nach oben - er steht ohnehin oben. */
  .reiter-gruppe-block:first-of-type .reiter-gruppe-titel { margin-top: 0; }
  nav.seitenleiste button,
  nav.seitenleiste a { width: auto; text-align: center; }
}

/* --- Formulare ---------------------------------------------------------- */

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

label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: var(--text-s);
  font-weight: 700;
  color: var(--schrift-leise);
  letter-spacing: 0.01em;
}

/*
 * Anzeigefilter oberhalb der Listen mit mehreren Schuelern (Stunden,
 * Termine, Hausaufgaben, Setlisten). Bewusst quer statt gestapelt wie ein
 * gewoehnliches Formularfeld - er gehoert zur Tabelle darunter, nicht zu
 * einem Formular, und soll sich auch optisch nicht wie ein Pflichtfeld
 * anfuehlen.
 */
.tafel-filter {
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
}
/* 2.75rem = 44 Bildpunkte bei 16px Grundschrift - dieselbe Richtgroesse wie
   `noten.css`s `.werkzeug button` (dort nur als Vergleichswert gelesen).
   Vorher 2.2rem (35.2px), unter der Mindestflaeche fuer Touch-Bedienung
   (Befund 11 der a11y-Pruefung, E-173). */
.tafel-filter select { min-width: 10rem; min-height: 2.75rem; padding: 0.35rem 0.6rem; }

/* Mehrere Filter (Schueler, Status) nebeneinander statt gestapelt. */
.tafel-filterzeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem var(--abstand-5);
  margin-bottom: 0.6rem;
}

input,
select,
textarea {
  font: inherit;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--rand-stark);
  border-radius: 6px;
  background: var(--flaeche);
  color: var(--schrift);
  min-width: 11rem;
  /* 2.75rem = 44 Bildpunkte, dieselbe Richtgroesse wie `noten.css`s
     `.werkzeug button` (Befund 12 der a11y-Pruefung, E-173; vorher 2.6rem =
     41.6px). */
  min-height: 2.75rem;
}

/* Ankreuzfelder tragen kein Kupfer/Creme - naiv gerendert bleiben sie
   systemblau, ausserhalb der obigen Regel (Ankreuzfelder wollen keine
   11rem-Mindestbreite). `accent-color` reicht, ohne die native Bedienung
   per Tastatur/Screenreader zu verlieren. */
input[type="checkbox"],
input[type="radio"] {
  min-width: 0;
  min-height: 0;
  accent-color: var(--betont);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--betont);
  outline-offset: 2px;
}

/* --- Knoepfe ------------------------------------------------------------ */

button,
a.knopf {
  font: inherit;
  font-weight: 700;
  padding: 0.6rem 1.1rem;
  /* 2.75rem = 44 Bildpunkte, dieselbe Richtgroesse wie `noten.css`s
     `.werkzeug button` (Befund 12 der a11y-Pruefung, E-173; vorher 2.6rem =
     41.6px). */
  min-height: 2.75rem;
  border: 1px solid var(--rand-stark);
  border-radius: 8px;
  background: var(--flaeche);
  color: var(--schrift);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

button:hover,
a.knopf:hover { background: var(--flaeche-leise); border-color: var(--schrift-leise); }

/*
 * Genau ein betonter Knopf je Ansicht.
 *
 * Wenn alles betont ist, ist nichts betont - und der Blick sucht dann
 * dieselbe Zeit, die die Betonung sparen sollte.
 */
button[type="submit"],
button.betont,
a.knopf.betont {
  background: var(--betont);
  border-color: var(--betont-dunkel);
  color: #fff;
}

button[type="submit"]:hover,
button.betont:hover,
a.knopf.betont:hover { background: var(--betont-dunkel); }

button.leise,
a.knopf.leise {
  background: none;
  border-color: transparent;
  color: var(--schrift-leise);
  font-weight: 600;
}
button.leise:hover,
a.knopf.leise:hover { background: var(--flaeche-leise); color: var(--schrift); }

/*
 * Fuer eine endgueltige Aktion (E-211: "Termin loeschen") - anders als
 * "Absagen" (`.leise`, umkehrbar) nicht rueckgaengig zu machen. Dieselbe
 * Bedeutungsfarbe wie `.fehler`: Rot steht in dieser Anwendung fuer "das
 * hier ist ernst", nicht nur fuer einen Fehlerzustand.
 */
button.gefahr {
  background: none;
  border-color: var(--fehler);
  color: var(--fehler);
  font-weight: 600;
}
button.gefahr:hover { background: var(--fehler); border-color: var(--fehler); color: #fff; }

/*
 * Fuer eine folgenreiche, aber UMKEHRBARE Aktion (SEC-R12) - anders als
 * `.gefahr`, das nach dessen eigenem Kommentar ausdruecklich Endgueltigem
 * vorbehalten bleibt. "Ein Konto sperren" beendet sofort alle Sitzungen,
 * laesst sich aber jederzeit wieder aufheben - dieselbe Warnfarbe wie
 * `.feldwarnung`, nicht die Fehlerfarbe.
 */
button.warnung {
  background: none;
  border-color: var(--sonne-dunkel);
  color: var(--sonne-dunkel);
  font-weight: 600;
}
button.warnung:hover { background: var(--sonne); border-color: var(--sonne-dunkel); color: #fff; }

/*
 * Kleiner Knopf, wie ihn `knopf()` in app.js fuer Tabellenzeilen baut
 * ("Bearbeiten", "Absagen", ein Sprung zu einer gefilterten Liste, ...).
 *
 * Bisher stand die Klasse nur im Skript, nie im Stylesheet - sie sah nur
 * innerhalb von `td.aktionen` klein aus, weil diese Zelle selbst ihre
 * Knoepfe verkleinert (siehe unten), nicht wegen `.klein` selbst. Ausserhalb
 * einer Aktionsspalte (etwa in einer Zahlenzelle) blieb ein "kleiner" Knopf
 * bislang in voller Groesse - gefunden beim Ergaenzen der Sprungziele in der
 * Schuelerliste.
 */
button.klein {
  padding: 0.35rem 0.7rem;
  min-height: 2.1rem;
  font-size: var(--text-s);
}

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

table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--abstand-2) 0 var(--abstand-4);
  overflow: hidden;
}

/* Die Seite selbst darf nicht in die Breite gehen, nur die Tabelle.
   `display: block` auf dem Tabellenelement macht sie zum eigenen
   Scrollcontainer, ohne dass jede Aufrufstelle einen Wrapper-Div braucht.

   Bis zum 22. September 2026 galt das nur unterhalb von 80rem (1280 px).
   Das war ein Trugschluss: Nicht die FENSTERbreite entscheidet, sondern der
   Platz neben der Seitenleiste. Gemessen bei 1440 px (Befund M-04 der
   Pre-Release-Pruefung): Die Zugaengeliste ragte 163 px aus dem Fenster, die
   Aktionsknoepfe rechts waren abgeschnitten; bei 1280 px und 1920 px trat es
   nicht auf. Deshalb gilt die Regel jetzt immer. */
table { display: block; max-width: 100%; overflow-x: auto; }

thead th {
  text-align: left;
  font-size: var(--text-s);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--schrift-leise);
  background: var(--flaeche-leise);
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--rand);
}

tbody td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--rand);
  vertical-align: top;
}

/* Zebrastreifen: In einer Zeile mit acht Spalten verrutscht sonst der Blick. */
tbody tr:nth-child(even) { background: var(--flaeche-leise); }
tbody tr:hover { background: var(--betont-hell); }
tbody tr:last-child td { border-bottom: none; }

/* Zahlen rechtsbuendig und mit gleicher Ziffernbreite - sonst kann man
   Betraege nicht uebereinander lesen. */
td.zahl, th.zahl, .summe {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.summe { font-weight: 800; font-size: var(--text-l); margin-top: 0.5rem; }

/* --- Aufklappbares ------------------------------------------------------ */

details { margin: var(--abstand-4) 0; padding: 0; }

details > summary {
  cursor: pointer;
  padding: 0.8rem var(--abstand-4);
  font-weight: 700;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  border-radius: var(--rundung);
}

details[open] > summary {
  border-bottom: 1px solid var(--rand);
  border-radius: var(--rundung) var(--rundung) 0 0;
  background: var(--flaeche-leise);
}

details > summary::before {
  content: "▸";
  color: var(--betont);
  transition: transform 0.12s;
}
details[open] > summary::before { content: "▾"; }
details > summary::-webkit-details-marker { display: none; }

details > *:not(summary) { padding: 0 var(--abstand-4); }
details > form { padding: var(--abstand-4); }
details > p:last-child { padding-bottom: 1rem; }

/* --- Meldungen ---------------------------------------------------------- */

.hinweis {
  color: var(--schrift-leise);
  font-size: var(--text-s);
  line-height: 1.5;
}

.feldwarnung {
  color: var(--sonne-dunkel);
  background: var(--sonne-hell);
  border-left: 4px solid var(--sonne);
  border-radius: 6px;
  padding: var(--abstand-2) var(--abstand-3);
  margin: 0.4rem 0 0;
  font-size: var(--text-s);
  width: 100%;
}

.fehler {
  color: var(--fehler);
  background: var(--fehler-hell);
  border: 1px solid #f0c8c2;
  border-left: 4px solid var(--fehler);
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
  margin: var(--abstand-3) 0;
  font-size: var(--text-s);
}

.gut {
  color: var(--gut);
  background: var(--gut-hell);
  border: 1px solid #cbe3c7;
  border-left: 4px solid var(--gut);
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
  margin: var(--abstand-3) 0;
}

p.hinweis.rolle {
  background: var(--betont-hell);
  border: 1px solid #eccda3;
  border-left: 4px solid var(--betont);
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
  color: var(--schrift);
}

/* --- Bewertungsdialog ---------------------------------------------------- */

/*
 * Ersetzt zwei aufeinanderfolgende `prompt()`-Fenster (E-130): Ein `<dialog>`
 * bleibt genauso schnell bedienbar, sieht aber wie ein Teil von BeatWerk
 * Studio aus statt wie ein Systemfenster des Browsers.
 */
.bewertungsdialog {
  border: 1px solid var(--rand-stark);
  border-radius: var(--rundung);
  box-shadow: var(--schatten);
  padding: 0;
  max-width: 32rem;
  width: calc(100% - 2rem);
  color: var(--schrift);
  background: var(--flaeche);
}

.bewertungsdialog::backdrop {
  background: rgb(42 33 22 / 55%);
}

/*
 * `nowrap` ist hier keine Kosmetik: Mit dem geerbten `flex-wrap: wrap` misst
 * der Browser die Hoehe eines Rasters (.feldgruppe) bei schmaler Breite -
 * mehr Zeilen - und behaelt diese Hoehe. Im echten Browser gemessen: 150 px
 * hohe Beschriftungen fuer 65 px Inhalt.
 */
.bewertungsdialog form {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.9rem;
  padding: 1.25rem;
}

.bewertungsdialog h3 {
  margin: 0;
  font-family: var(--schrift-anzeige);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--schrift);
}

.stufenwahl {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.stufenwahl legend {
  font-size: var(--text-s);
  font-weight: 700;
  color: var(--schrift-leise);
  letter-spacing: 0.01em;
  padding: 0;
}

#bewertung-stufen {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

#bewertung-stufen .stufe {
  justify-content: flex-start;
  min-height: 2.4rem;
  font-weight: 500;
  background: var(--flaeche);
}

#bewertung-stufen .stufe.gewaehlt {
  background: var(--betont-hell);
  border-color: var(--betont);
  color: var(--betont-dunkel);
  font-weight: 700;
}

/*
 * Die hoechste Stufe bekommt Gold statt Kupfer, wenn sie gewaehlt ist - ein
 * besonderer Moment, nicht nur eine von fuenf gleich wichtigen Optionen
 * (siehe Farb-Kommentar am Kopf dieser Datei: Gold ist hier eindeutig, was
 * es bedeutet, nicht erraten).
 */
#bewertung-stufen .stufe.hoechststufe.gewaehlt {
  background: var(--gold-hell);
  border-color: var(--gold);
  color: var(--gold-dunkel);
}

.bewertungsdialog textarea { width: 100%; min-height: 4.5rem; resize: vertical; }

.bewertungsdialog-knoepfe {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
}
.bewertungsdialog-knoepfe button { white-space: nowrap; }

/* --- Kacheln der Uebersicht --------------------------------------------- */

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.9rem;
  margin-bottom: 1.25rem;
}

/*
 * Jede Kachel ist ein Knopf und kein `<div>` mehr (E-131): Sie springt beim
 * Klick in ihren Reiter, dieselbe Bequemlichkeit wie die Zahlen in der
 * Schuelerliste (E-127). Deshalb hier ein eigener Rueckbau der
 * Knopf-Grundregel (`button { border, padding, ... }` aus dem Abschnitt
 * "Knoepfe" weiter oben) statt sie zu erben - eine Kachel soll wie eine
 * Kachel aussehen, nicht wie ein Formularknopf mit einer Zahl darin.
 */
.kacheln .kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-height: 0;
  font: inherit;
  text-align: left;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  padding: var(--abstand-4) 1.1rem 1.1rem;
  box-shadow: var(--schatten);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.kacheln .kachel:hover {
  transform: translateY(-2px);
  border-color: var(--betont);
  box-shadow: 0 4px 16px rgb(42 33 22 / 14%), 0 1px 3px rgb(42 33 22 / 10%);
}

.kacheln .kachel:focus-visible {
  outline: 2px solid var(--betont);
  outline-offset: 2px;
}

/* Ein Viertelkreis in der Ecke - der Rand eines Kesselfells, nicht mehr. */
.kacheln .kachel::before {
  content: "";
  position: absolute;
  top: -1.4rem;
  right: -1.4rem;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  border: 2px solid var(--betont-hell);
}

.kacheln .symbol {
  position: relative;
  display: flex;
  color: var(--betont);
  margin-bottom: 0.5rem;
}

.kacheln .zahl {
  position: relative;
  display: block;
  font-size: var(--text-xxl);
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--betont-dunkel);
  text-align: left;
}

.kacheln .beschriftung {
  position: relative;
  display: block;
  font-size: var(--text-s);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--schrift-leise);
  margin-top: 0.25rem;
}

/*
 * Musikwissen des Tages und Groove des Tages: Gestaltung liegt vollstaendig in
 * `musikwissen.css`, zusammen mit dem Baustein, der sie zeichnet.
 *
 * Eine kurze, eigene Zeile je Reiter statt eines nackten Labels - die Copy
 * traegt hier einen Teil der Persoenlichkeit.
 */
.reiter-spruch { color: var(--schrift-leise); font-style: italic; margin: -0.4rem 0 var(--abstand-4); }

/* --- Anmeldeseite (bestaetigter Gestaltungsentwurf) ---------------------- */

.anmeldeseite { padding-block: clamp(0.5rem, 3vw, 2.5rem); }

.anmeldebuehne {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 4vw, 4.5rem);
  align-items: center;
  max-width: 76rem;
  margin: 0 auto clamp(2.5rem, 6vw, 4.5rem);
}
@media (max-width: 58rem) { .anmeldebuehne { grid-template-columns: 1fr; } }

.augenbraue {
  margin: 0 0 var(--abstand-3);
  font-size: var(--text-s);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kirsch);
}

.schlagzeile {
  margin: 0 0 1.1rem;
  font-size: clamp(2.5rem, 5.4vw, 4.1rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.schlagzeile em { font-style: italic; font-weight: 400; color: var(--gold-dunkel); }

.anschlag {
  margin: 0 0 1.75rem;
  max-width: 46ch;
  font-size: var(--text-l);
  line-height: 1.55;
  color: var(--schrift-leise);
}

.anmeldekarte {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.85rem;
  max-width: 27rem;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  box-shadow: var(--schatten);
  padding: 1.35rem 1.4rem 1.2rem;
}
.anmeldekarte input { width: 100%; min-width: 0; font-size: var(--text-m); }
.knopf-anmelden {
  justify-content: center;
  padding: 0.8rem var(--abstand-4);
  font-size: var(--text-l);
  border-radius: 10px;
  margin-top: 0.2rem;
}
.knopf-einloesen { justify-content: center; font-weight: 600; }
.anmeldehilfe { margin: 0.1rem 0 0; background: none; border: none; box-shadow: none; }
.anmeldehilfe > summary { padding: 0.3rem 0; font-size: var(--text-s); font-weight: 600; color: var(--schrift-leise); }
.anmeldehilfe[open] > summary { background: none; border-bottom: none; }
.anmeldehilfe > p { padding: 0; margin: 0.45rem 0 0; font-size: var(--text-s); line-height: 1.5; color: var(--schrift-leise); }
.anmelde-groove { min-width: 0; }
.anmelde-wissen { max-width: 76rem; margin: 0 auto; }

/* --- Gemeinsame Bausteine ------------------------------------------------- */

/*
 * Der Bausteinsatz, aus dem jede Seite gebaut wird (E-225).
 *
 * Anlass war eine Bestandsaufnahme mit unangenehm eindeutigen Zahlen: 8 von
 * 18 Tafeln hatten einen Seitenkopf und 10 nur eine nackte Ueberschrift; 110
 * Regeln bauten eine eigene gerahmte, gerundete Flaeche (allein 54 davon in
 * `schueler.css`); es gab fuenf verschiedene Pillenleisten und acht
 * verschiedene Meldungsklassen. Nicht die Farben machen die Oberflaeche
 * unruhig, sondern dass dieselbe Sache ueberall anders gebaut ist.
 *
 * Die bisherigen Namen bleiben als Zweitnamen bestehen (`.tafel-kopfzeile`,
 * `.ansichtswahl`): Bestandsseiten funktionieren unveraendert weiter, neue
 * und umgestellte Stellen benutzen den gemeinsamen Namen. So laesst sich Seite
 * fuer Seite umstellen, statt alles auf einmal anzufassen.
 */

/* Seitenkopf: Augenbraue, Titel, Kontextzeile, genau EINE betonte Hauptaktion. */
.seitenkopf,
.tafel-kopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--abstand-3) var(--abstand-5);
  margin-bottom: var(--abstand-4);
}
.seitenkopf h1,
.seitenkopf h2,
.tafel-kopfzeile h2 { margin-bottom: 0.2rem; }
.seitenkopf .reiter-spruch,
.tafel-kopfzeile .reiter-spruch { margin: 0; }
/* Die Kontextzeile sagt in einem Satz, was dieser Bereich ist - sie ersetzt
   die frueheren, teils mehrzeiligen Erklaerabsaetze am Seitenanfang. */
.seitenkopf .kopf-kontext {
  margin: 0;
  max-width: 62ch;
  color: var(--schrift-leise);
}
/* Die Textseite darf schrumpfen, die Aktionen nicht - sonst brechen
   Knopfbeschriftungen um, waehrend daneben Platz frei bleibt. */
.seitenkopf > :first-child { flex: 1 1 18rem; min-width: 0; }
.seitenkopf-aktionen,
.tafel-kopfaktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2); }

/*
 * Abschnittskopf INNERHALB einer Karte. Traegt bewusst keinen eigenen Rahmen
 * und keine eigene Flaeche: Die Karte ist schon der Behaelter.
 */
.abschnitt-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--abstand-2) var(--abstand-4);
  margin-bottom: var(--abstand-3);
}
.abschnitt-kopf > h2,
.abschnitt-kopf > h3 { margin: 0; }
.abschnitt-kopf .kopf-kontext { margin: 0; font-size: var(--text-s); color: var(--schrift-leise); }

/*
 * Untergliederung ohne zweiten Rahmen - die Antwort auf "Karte in der Karte
 * in der Karte". Hebt sich allein ueber Flaeche und Abstand ab.
 */
.karte-innen {
  padding: var(--abstand-3) var(--abstand-4);
  background: var(--flaeche-leise);
  border-radius: var(--rundung-klein);
}

/*
 * Ein Meldungsbaustein in vier Arten statt acht Einzelklassen. Die Farbe
 * traegt die Bedeutung nie allein: Der farbige Balken links steht zusaetzlich
 * zum Text, und `role="status"`/`role="alert"` gehoert ins Markup.
 */
.meldung,
.warnung {
  margin: 0;
  padding: var(--abstand-3) var(--abstand-4);
  border-left: 4px solid var(--rand-stark);
  border-radius: var(--rundung-klein);
  background: var(--flaeche-leise);
  color: var(--schrift);
  font-size: var(--text-s);
}
.meldung.art-gut { background: var(--mint-hell); border-left-color: var(--mint); color: var(--mint-dunkel); }
/* `.warnung` ist der Bestandsname derselben Sache (frueher eigens in
   `schueler.css` definiert, E-229). */
.meldung.art-warnung,
.warnung { background: var(--sonne-hell); border-left-color: var(--sonne); color: var(--sonne-dunkel); }
.meldung.art-fehler { background: var(--fehler-hell); border-left-color: var(--fehler); color: var(--fehler); }
.meldung.art-info { background: var(--betont-hell); border-left-color: var(--betont); color: var(--betont-dunkel); }

/* Segmentumschalter (Woche/Monat/Liste, Filterschalter der Portale, ...). */
.segmentwahl,
.ansichtswahl {
  display: inline-flex;
  gap: 0.15rem;
  padding: 0.2rem;
  background: var(--flaeche-leise);
  border: 1px solid var(--rand);
  border-radius: var(--rundung-pille);
}
.segmentwahl button,
.ansichtswahl button {
  min-height: 2.4rem;
  padding: 0.35rem var(--abstand-4);
  border: none;
  border-radius: var(--rundung-pille);
  background: none;
  font-weight: 600;
  color: var(--schrift-leise);
}
.segmentwahl button:hover,
.ansichtswahl button:hover { background: var(--flaeche); color: var(--schrift); }
.segmentwahl button[aria-pressed="true"],
.ansichtswahl button[aria-pressed="true"] { background: var(--holz); color: var(--fell); }

/*
 * Huelle fuer breite Tabellen. Bisher rollte `table` selbst unterhalb von
 * 80rem - eine Schwelle ohne Bezug zur tatsaechlichen Tabellenbreite, weshalb
 * `#schuelerliste` mit 1325 px auch auf dem Desktop seitlich rollte, ohne dass
 * man es kommen sah. Die Huelle rollt genau dann, wenn es noetig ist.
 */
.tabelle-huelle { overflow-x: auto; }
.tabelle-huelle > table { margin: 0; }

/*
 * Nebenspalten treten auf schmaleren Bildschirmen zurueck.
 *
 * Gemessen: Die vier Zaehlspalten der Schuelerliste (Stunden, Termine,
 * Hausaufgaben, Setlisten) brauchten zusammen 396 px. Die Tabelle wollte damit
 * 1103 px, waehrend der Inhaltsbereich bei 1280 px Fensterbreite nur 946 px
 * breit ist - sie rollte deshalb bei JEDER geprueften Fensterbreite seitlich,
 * auch auf dem Desktop. Es sind Sprungzahlen, keine Angaben, nach denen man
 * eine Schuelerliste durchsieht; ab 90rem stehen sie wieder da.
 */
@media (max-width: 90rem) {
  .nebenspalte { display: none; }
}

/*
 * Persoenlich ausgeblendete Spalten (E-230). Das Merkmal traegt die Tabelle,
 * gesetzt aus dem Fachobjekt `viewpref` - dadurch gilt die Entscheidung fuer
 * das KONTO und nicht fuer das Geraet.
 */
#schuelerliste[data-versteckt~="stunden"] .spalte-stunden,
#schuelerliste[data-versteckt~="termine"] .spalte-termine,
#schuelerliste[data-versteckt~="hausaufgaben"] .spalte-hausaufgaben,
#schuelerliste[data-versteckt~="setlisten"] .spalte-setlisten { display: none; }

/*
 * Ansichtsmenue: dieselbe Aufklappmechanik wie das Aktionsmenue, aber in der
 * Filterzeile. Bewusst schmal gehalten - es gibt hier nichts zu gestalten,
 * nur ein paar Spalten an- und abzuwaehlen.
 */
.ansichtsmenue { position: relative; background: none; border: none; box-shadow: none; }
.ansichtsmenue > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--klickflaeche);
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--rand-stark);
  border-radius: var(--rundung-klein);
  background: var(--flaeche);
  font-weight: 600;
  cursor: pointer;
}
.ansichtsmenue > summary::-webkit-details-marker { display: none; }
.ansichtsmenue > summary:hover { background: var(--flaeche-leise); }
.ansichtsmenue-inhalt {
  position: absolute;
  left: 0;
  z-index: 5;
  min-width: 15rem;
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2);
  margin-top: var(--abstand-1);
  padding: var(--abstand-4);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--rundung-klein);
  box-shadow: var(--schatten);
}
.ansichtsmenue-inhalt label {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  font-weight: 500;
}
/* 1.5rem = 24 px: die Mindestgroesse aus WCAG 2.5.8. Mit 1.15rem (18 px) hat
   das Messwerkzeug diese Kaestchen sofort als zu klein gemeldet. */
.ansichtsmenue-inhalt input[type="checkbox"] { width: 1.5rem; height: 1.5rem; }
.ansichtsmenue-titel {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--schrift-leise);
}

/* --- Kalender -------------------------------------------------------------- */

/*
 * Farben tragen den Zustand, aber nie allein: Jeder Termin nennt ihn auch im
 * Text (aria-label, Auswahl, Liste), und "abgesagt" ist zusaetzlich
 * durchgestrichen.
 */
.kalender { --stunde-hoehe: 3.5rem; margin: var(--abstand-1) 0 var(--abstand-4); }

.kalender-steuerung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-2) 1.25rem;
  margin-bottom: 0.75rem;
}
.kalender-blaettern { display: inline-flex; gap: var(--abstand-1); }
.kalender-blaettern button { justify-content: center; min-width: 2.75rem; font-size: var(--text-l); }
/*
 * Schneller Sprung zu einer beliebigen Woche/einem beliebigen Monat, ohne
 * einzeln durchzuklicken (z. B. September -> Dezember). Ergaenzt, aendert
 * `kal-zurueck`/`kal-vor`/`kal-heute` nicht.
 */
.kal-sprung {
  flex-direction: row;
  align-items: center;
  gap: var(--abstand-2);
  font-size: var(--text-s);
  font-weight: 700;
  color: var(--schrift-leise);
}
.kal-sprung input { min-width: 9.5rem; }
.kalender-titel { margin: 0; font-family: var(--schrift-anzeige); font-size: var(--text-xl); font-weight: 600; }
.kalender-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem var(--abstand-4);
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
  font-size: var(--text-s);
  color: var(--schrift-leise);
}
.kalender-legende li { display: inline-flex; align-items: center; gap: 0.4rem; }
.punkt { display: inline-block; width: 0.85rem; height: 0.85rem; border-radius: 3px; }
/* Ring in `--himmel-dunkel`: `--himmel` auf `--himmel-hell` waren gerechnet
   2,96:1 und damit unter den 3:1 fuer ein Bedeutungszeichen (WCAG 1.4.11);
   jetzt 5,73:1. */
.punkt.ferien { background: var(--himmel-hell); box-shadow: inset 0 0 0 2px var(--himmel-dunkel); }

.punkt.geplant,
.kal-termin.geplant,
.kal-chip.geplant { background: var(--gold-hell); box-shadow: inset 4px 0 0 var(--messing); color: var(--schrift); }
.punkt.erledigt,
.kal-termin.erledigt,
.kal-chip.erledigt { background: var(--gut-hell); box-shadow: inset 4px 0 0 var(--gut); color: #1f4a22; }
.punkt.abgesagt,
.kal-termin.abgesagt,
.kal-chip.abgesagt {
  background: repeating-linear-gradient(135deg, var(--flaeche-leise) 0 6px, var(--flaeche) 6px 12px);
  box-shadow: inset 4px 0 0 var(--rand-stark);
  color: var(--schrift-leise);
}
.kal-termin.abgesagt .kal-termin-name,
.kal-chip.abgesagt { text-decoration: line-through; }

/* Woche */
/*
 * `--tage` setzt `zeichneWoche()` (7 breit, 3 schmal, siehe `tageImBlick()`).
 * Die Mindestbreite von 6.5rem je Spalte ergab bei sieben Tagen 782 px feste
 * Sollbreite - die einzige Ansicht der Anwendung ganz ohne Bereichsabfrage,
 * und der Grund, warum bei 320 px nur ein einziger Tag sichtbar war. Unten
 * darf die Spalte deshalb beliebig schmal werden (`minmax(0, 1fr)`), oben
 * bleibt sie lesbar breit.
 */
.kalender-raster.ansicht-woche {
  display: grid;
  grid-template-columns: 3.4rem repeat(var(--tage, 7), minmax(6.5rem, 1fr));
  max-height: 74vh;
  overflow: auto;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
}
@media (max-width: 64rem) {
  .kalender-raster.ansicht-woche {
    grid-template-columns: 2.6rem repeat(var(--tage, 3), minmax(0, 1fr));
  }
}
.kal-ecke,
.kal-tagkopf {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
}
.kal-tagkopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.45rem var(--abstand-1);
  border-left: 1px solid var(--rand);
}
.kal-wochentag {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--schrift-leise);
}
.kal-tagnummer {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  font-family: var(--schrift-anzeige);
  font-size: var(--text-xl);
  font-weight: 600;
}
.kal-tagkopf.heute .kal-tagnummer { background: var(--holz); color: var(--fell); }
.kal-tagkopf.ferien { background: var(--himmel-hell); }
.kal-tagkopf.ferien small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--petrol-dunkel); }

.kal-zeitleiste { display: flex; flex-direction: column; }
.kal-zeitleiste span {
  height: var(--stunde-hoehe);
  padding-right: 0.45rem;
  font-family: var(--schrift-mono);
  font-size: var(--text-xs);
  text-align: right;
  color: var(--schrift-leise);
  transform: translateY(-0.5em);
}
.kal-zeitleiste span:first-child { transform: none; }

.kal-tag {
  position: relative;
  height: calc(var(--stunden) * var(--stunde-hoehe));
  border-left: 1px solid var(--rand);
  background-image:
    linear-gradient(to bottom, var(--rand) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(234 223 202 / 45%) 1px, transparent 1px);
  background-size: 100% var(--stunde-hoehe), 100% calc(var(--stunde-hoehe) / 2);
  cursor: cell;
}
.kal-tag.heute { background-color: rgb(255 243 214 / 60%); }

.kal-termin {
  position: absolute;
  top: calc(var(--start) * var(--stunde-hoehe) + 1px);
  left: calc(var(--spur) * (100% / var(--spuren)) + 3px);
  width: calc(100% / var(--spuren) - 6px);
  height: calc(var(--dauer) * var(--stunde-hoehe) - 3px);
  min-height: 0;
  padding: var(--abstand-1) 0.45rem var(--abstand-1) 0.65rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  overflow: hidden;
  border: none;
  border-radius: 8px;
  text-align: left;
  font-size: var(--text-s);
  line-height: 1.25;
  cursor: pointer;
}
.kal-termin:hover { filter: brightness(0.96); }
.kal-termin-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.kal-termin-lehrerpunkt {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.3rem;
  border-radius: 50%;
  background: var(--lehrerfarbe, currentColor);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 20%);
  vertical-align: middle;
}
.kal-termin-zeit { font-family: var(--schrift-mono); font-size: var(--text-xs); font-weight: 400; }

/* Monat */
.kalender-raster.ansicht-monat {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--rand);
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
}
.kal-monatkopf {
  padding: 0.4rem;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--schrift-leise);
  background: var(--flaeche-leise);
}
.kal-monatstag {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-height: 7rem;
  padding: 0.3rem;
  background: var(--flaeche);
}
.kal-monatstag.fremd { background: var(--flaeche-leise); }
.kal-monatstag.ferien { background: color-mix(in srgb, var(--himmel-hell) 64%, var(--flaeche)); }
.kal-ferien-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); font-weight: 800; color: var(--petrol-dunkel); }
.kal-monatsnummer {
  align-self: flex-end;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0.1rem 0.4rem;
  border: none;
  border-radius: 999px;
  background: none;
  font-family: var(--schrift-anzeige);
  font-weight: 600;
}
.kal-monatstag.fremd .kal-monatsnummer { color: var(--schrift-leise); }
.kal-monatstag.heute .kal-monatsnummer { background: var(--holz); color: var(--fell); }
.kal-chip {
  display: block;
  width: 100%;
  /* Gemessen 23,1 px hoch und damit knapp unter den 24 px aus WCAG 2.5.8
     (`tools/quality/oberflaeche-messen.mjs` meldete vier solche Kacheln je
     Monatsansicht). Die Kachel wird dadurch nicht sichtbar groesser. */
  min-height: 24px;
  padding: 0.18rem 0.4rem 0.18rem 0.6rem;
  overflow: hidden;
  border: none;
  border-radius: 6px;
  font-size: var(--text-s);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.kal-mehr { padding-left: 0.4rem; font-size: var(--text-xs); color: var(--schrift-leise); }
.ferien-zentrale { margin: 0.8rem 0; }
.ferien-zentrale > summary { cursor: pointer; font-weight: 800; }
.ferien-paket { margin: 0.65rem 0; padding: var(--abstand-3); border: 1px solid var(--rand); border-radius: 10px; background: var(--flaeche); }
.ferien-paket h3 { margin: 0 0 0.3rem; }
.ferien-paket ul { margin: var(--abstand-1) 0 0.65rem; padding-left: 1.35rem; }
#ferien-formular { display: grid; gap: 0.7rem; margin-top: 0.8rem; }
#ferien-formular[hidden] { display: none; }
#ferien-formular > label { max-width: 28rem; }
#ferien-formular > button { justify-self: start; }
@media (max-width: 52rem) {
  .kal-monatstag { min-height: 4.5rem; }
  .kal-chip { font-size: var(--text-xs); }
}

/* Auswahl eines Termins */
.kalender-auswahl {
  margin-top: 0.9rem;
  padding: var(--abstand-4) 1.2rem;
  background: var(--flaeche);
  border: 1px solid var(--rand-stark);
  border-left: 4px solid var(--messing);
  border-radius: var(--rundung);
  box-shadow: var(--schatten);
}
.kalender-auswahl h3 {
  margin: 0 0 0.6rem;
  font-family: var(--schrift-anzeige);
  font-size: var(--text-l);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--schrift);
}
.kalender-auswahl dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.3rem var(--abstand-4);
  margin: 0 0 0.9rem;
}
.kalender-auswahl dt { font-size: var(--text-s); font-weight: 700; color: var(--schrift-leise); }
.kalender-auswahl dd { margin: 0; white-space: pre-line; }
.kal-auswahl-knoepfe { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }

/* --- Dialoge: Stunde erfassen, Hausaufgabe senden --------------------------- */

.bewertungsdialog.dialog-breit { max-width: 46rem; }
.dialoginhalt { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.25rem; }
.dialoginhalt h3 {
  margin: 0;
  font-family: var(--schrift-anzeige);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--schrift);
}
.feldgruppe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  align-items: start;
  gap: var(--abstand-3);
}
.feldgruppe label,
.feldgruppe input,
.feldgruppe select { min-width: 0; }
.bewertungsdialog label > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--abstand-2); }
.feldhinweis {
  padding: 0.05rem var(--abstand-2);
  border-radius: 999px;
  background: var(--flaeche-leise);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--schrift-leise);
}
.hausaufgabe-gleich {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-3);
  margin: 0;
  padding: 0.6rem 0.9rem 0.9rem;
  background: var(--gold-hell);
  border: 1px solid var(--rand);
  border-radius: 10px;
}
.hausaufgabe-gleich legend { padding: 0 0.3rem; }

/*
 * Ferienzeitraeume einer Terminserie ("Serie planen"/"Serie bearbeiten"):
 * vorher ein einzelnes Textfeld mit einer selbst erfundenen Kodierung
 * ("Name:JJJJ-MM-TT..JJJJ-MM-TT", mehrere durch Komma getrennt) - von Hand
 * fehleranfaellig zu tippen und ohne jede Eingabepruefung im Feld selbst.
 * Jetzt eine Zeile je Zeitraum mit echten Datumsfeldern.
 */
.ferien-fieldset legend {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
}
.ferienliste {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2);
}
.ferienzeile {
  display: grid;
  grid-template-columns: minmax(8rem, 1.4fr) minmax(7rem, 1fr) minmax(7rem, 1fr) auto;
  gap: var(--abstand-2);
  align-items: end;
}
.ferienzeile input,
.ferienzeile label { min-width: 0; }
.ferienzeile > button { white-space: nowrap; }
@media (max-width: 40rem) {
  .ferienzeile { grid-template-columns: 1fr; }
}
label.ankreuzen {
  flex-direction: row;
  align-items: center;
  gap: var(--abstand-2);
  font-size: var(--text-s);
  color: var(--schrift);
}
.hinweisliste { display: grid; gap: 0.3rem; margin: 0; padding-left: 1.2rem; }
.zugangskarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--abstand-3);
}
.zugangskarte {
  padding: 0.9rem var(--abstand-4);
  background: var(--gold-hell);
  border: 1px dashed var(--messing);
  border-radius: 10px;
}
.zugangskarte h4 { margin: 0 0 var(--abstand-2); font-family: var(--schrift-anzeige); font-size: var(--text-l); }
.zugangskarte dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--abstand-1) var(--abstand-3); margin: 0; }
.zugangskarte dt { font-size: var(--text-s); color: var(--schrift-leise); }
.zugangskarte dd { margin: 0; font-family: var(--schrift-mono); overflow-wrap: anywhere; }
.zugangskarte dd.code { font-size: var(--text-l); font-weight: 700; letter-spacing: 0.04em; }
.zugangskarte-qr {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  margin-top: 0.6rem;
}
.zugangskarte-qr svg {
  width: 7.5rem;
  height: 7.5rem;
  background: #fff;
  border-radius: 6px;
  padding: var(--abstand-1);
}
.zugangskarte-qr p { margin: 0; max-width: 12rem; }
.zugangskarte button { margin-top: 0.6rem; }
.zugangskarte .bedienungsanleitung {
  margin-top: var(--abstand-4);
  padding-top: var(--abstand-3);
  border-top: 1px dashed var(--messing);
}
.bedienungsanleitung h5 {
  margin: 0 0 var(--abstand-3);
  font-size: var(--text-s);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kirsch);
}
.bedienungsanleitung > p { margin: 0 0 var(--abstand-2); }
.bedienungsanleitung-titel {
  margin: var(--abstand-4) 0 0.3rem;
  padding-left: var(--abstand-2);
  border-left: 4px solid var(--petrol);
  font-family: var(--schrift-anzeige);
  font-size: var(--text-l);
  color: var(--petrol-dunkel);
}
.bedienungsanleitung-titel:first-of-type { margin-top: var(--abstand-2); }
.bedienungsanleitung ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.3rem; }
.bedienungsanleitung li { font-size: var(--text-s); line-height: 1.5; }

/*
 * Farbige Kaesten (Beispiel/Für-Eltern/Hilfe) - Christophers Auftrag "in der
 * BeatWerk Studio Optik gestalten": drei Bedeutungen, drei Markenfarben,
 * jeweils dieselbe Kastenform wie andere Hinweiskaesten der Anwendung
 * (heller Grund, farbige Randlinie), nur mit eigener Farbe je Bedeutung.
 */
.bedienungsanleitung-kasten {
  margin: 0 0 var(--abstand-3);
  padding: var(--abstand-3);
  border-radius: var(--rundung-klein);
  font-size: var(--text-s);
  line-height: 1.5;
}
.bedienungsanleitung-beispiel {
  background: var(--mint-hell);
  border: 1px solid var(--mint);
  color: var(--mint-dunkel);
}
.bedienungsanleitung-eltern {
  background: var(--koralle-hell);
  border: 1px solid var(--koralle);
  color: var(--koralle-dunkel);
}
.bedienungsanleitung-hilfe {
  background: var(--petrol-hell);
  border: 1px solid var(--petrol);
  color: var(--petrol-dunkel);
}

/*
 * Markenkopf einer gedruckten Seite (`baueMarkenkopf()` in
 * bedienungsanleitung.js) - dieselbe Trommel-Marke und derselbe fuenffarbige
 * Streifen wie im Kopf jeder Seite (`header::after` oben), damit ein
 * ausgedrucktes/als PDF gespeichertes Dokument erkennbar BeatWerk Studio ist.
 */
.bedienungsanleitung-marke {
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  margin-bottom: var(--abstand-4);
  padding-bottom: var(--abstand-3);
  position: relative;
}
.bedienungsanleitung-marke::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--petrol) 0 20%,
    var(--sonne) 20% 40%,
    var(--koralle) 40% 60%,
    var(--himmel) 60% 80%,
    var(--mint) 80% 100%
  );
}
.bedienungsanleitung-marke h1 {
  margin: 0;
  font-family: var(--schrift-anzeige);
  font-size: var(--text-xxl);
  color: var(--schrift);
}
.bedienungsanleitung-marke h1 b { color: var(--petrol); }
.bedienungsanleitung-untertitel {
  margin: 0.1rem 0 0;
  color: var(--schrift-leise);
  font-size: var(--text-m);
}
td.inhalt { min-width: 16rem; white-space: pre-line; }

/* --- Kopfleiste und Heute-Seite ------------------------------------------------ */

.kopf .begruessung { display: flex; flex-direction: column; gap: 0.05rem; }
.kopf .begruessung strong { font-size: var(--text-l); }
.kopf .begruessung .hinweis { font-size: var(--text-s); }

.heute-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--abstand-4) var(--abstand-6);
  margin-bottom: 1.25rem;
}
.heute-kopf .augenbraue { margin-bottom: 0.2rem; color: var(--petrol-dunkel); }
.heute-kopf h2 { margin: 0 0 0.2rem; font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 800; }
.heute-kopf .reiter-spruch { margin: 0; font-style: normal; }

/*
 * Die Spaltenvorlage stand frueher hier - und wirkte nie: `unterricht.css`
 * wird nach `stil.css` geladen und setzt fuer `.heute-raster` eigene Spalten
 * UND Bereiche (`grid-template-areas`), ebenso eine eigene 75rem-Abfrage.
 * Toter Code, der beim Lesen zwei widersprechende Wahrheiten ergab; entfernt
 * mit E-229. Was hier bleibt, wird tatsaechlich gebraucht.
 *
 * `minmax(0, 1fr)` und `min-width: 0` (drueben wie hier): Die Eintraege
 * kuerzen lange Namen mit "..." (nowrap). Ohne diese Grenze wuechse die Spalte
 * stattdessen auf die Textbreite - bei 400 px Handybreite im Browser gemessen
 * 538 px Seitenbreite.
 */
.heute-raster {
  display: grid;
  gap: var(--abstand-4);
  margin-bottom: var(--abstand-5);
}
.heute-karte { min-width: 0; }

.heute-karte {
  padding: var(--abstand-4);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  /*
   * Ein neutraler Kopfstreifen fuer alle drei Karten (E-229). Vorher trugen
   * "Dein Unterrichtstag", "Hausaufgaben im Blick" und "Die naechsten Tage"
   * Petrol, Koralle und Himmelblau - drei Bedeutungsfarben nebeneinander fuer
   * drei gleichrangige Bereiche. Dieselbe Entscheidung wie bei den
   * Kennzahlkacheln der Portale (E-225): Farbe sagt in dieser Anwendung etwas
   * ueber den Zustand, sie sortiert keine Ueberschriften.
   */
  border-top: 4px solid var(--rand-stark);
  border-radius: var(--rundung);
  box-shadow: var(--schatten);
}
.heute-karte h3 { margin: 0 0 0.8rem; color: var(--schrift); }

.heute-liste { display: flex; flex-direction: column; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.heute-eintrag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-2) 0.8rem;
  padding: 0.6rem var(--abstand-3);
  background: var(--flaeche-leise);
  border-radius: 12px;
}
.heute-zeit {
  min-width: 3.3rem;
  font-family: var(--schrift-mono);
  font-size: var(--text-l);
  font-weight: 700;
  color: var(--petrol-dunkel);
}
.heute-text { display: flex; flex: 1 1 10rem; flex-direction: column; min-width: 0; }
.heute-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.heute-text span { overflow: hidden; font-size: var(--text-s); color: var(--schrift-leise); text-overflow: ellipsis; white-space: nowrap; }
.heute-leer { color: var(--schrift-leise); line-height: 1.5; }

/*
 * Ein Chip, eine Definition (E-229). `schueler.css` hatte eine zweite Fassung
 * mit eigener Flaeche, eigenem Rand und `font-size: 0.72em` - auf den
 * Portalseiten galten dadurch beide gemischt: Hintergrund aus der einen Datei
 * (weil `.chip.geplant` staerker bindet), Rand und Schriftgroesse aus der
 * anderen. Der Rand gehoert jetzt zur Grundform; er hilft auch dem Kontrast,
 * weil ein Chip sonst allein ueber seine Flaeche erkennbar waere.
 */
.chip {
  display: inline-block;
  padding: 0.12rem 0.6rem;
  border-radius: var(--rundung-pille);
  background: var(--flaeche-leise);
  border: 1px solid var(--rand-stark);
  color: var(--schrift);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}
.chip.geplant { background: var(--sonne-hell); color: var(--sonne-dunkel); }
.chip.erledigt { background: var(--mint-hell); color: var(--mint-dunkel); }
.chip.rueckfrage { background: var(--himmel-hell); color: var(--himmel-dunkel); }
.chip.begonnen { background: var(--gold-hell); color: var(--gold-dunkel); }
.chip.geuebt { background: var(--petrol-hell); color: var(--petrol-dunkel); }
.chip.ueberfaellig { background: var(--koralle-hell); color: var(--koralle-dunkel); }

.kacheln.kacheln-klein { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
/* Auf dem Handy zwei Zaehler nebeneinander statt fuenf volle Zeilen. */
@media (max-width: 40rem) {
  .kacheln.kacheln-klein { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Der Auftrag ist der eigentliche Inhalt einer Hausaufgabe - nicht Wort fuer Wort umbrechen. */
#hausaufgaben td:nth-child(3) { min-width: 18rem; }
#hausaufgabenformular label:has(#h-auftrag) { flex: 1 1 22rem; }
#hausaufgabenformular #h-auftrag { width: 100%; }
#hausaufgabenformular + .bausteine { margin: 0.6rem 0 0; }

/*
 * Ein Kontrollkaestchen steht neben seinem Text, nicht darueber. Das
 * allgemeine `label` ist eine Spalte (Beschriftung ueber dem Feld) - fuer ein
 * Haekchen liest sich das wie ein verlorenes Kaestchen.
 */
label:has(> input[type="checkbox"]:first-child) {
  flex-direction: row;
  align-items: center;
  gap: var(--abstand-2);
  color: var(--schrift);
}

/* Preisformular: Haekchen und die Vereinszeilen je in einer eigenen, vollen Zeile. */
#satzformular #sv-saetze,
#satzformular label:has(> input[type="checkbox"]:first-child) { flex: 1 1 100%; }
#satzformular #sv-saetze { display: flex; flex-direction: column; gap: var(--abstand-2); }

/* --- Bausteine: typische Inhalte mit einem Klick ------------------------------ */

.bausteine { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: -0.35rem; }
.bausteine button {
  min-height: 2rem;
  padding: 0.2rem var(--abstand-3);
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--flaeche-leise);
  color: var(--schrift);
  font-size: var(--text-s);
  font-weight: 600;
}
.bausteine button::before { content: "+ "; color: var(--petrol); font-weight: 800; }
.bausteine button:hover { background: var(--petrol-hell); border-color: var(--petrol); }
.bausteine-hausaufgabe button:hover { background: var(--sonne-hell); border-color: var(--sonne); }

/*
 * Der Sprungknopf in einer Zahlenspalte (Schuelerliste, E-127): sichtbar als
 * eigenes Ziel, nicht nur als Zahl, die zufaellig in einer Zelle steht.
 * `button.leise` (fast unsichtbar, fuer Zeilenaktionen gedacht) passte hier
 * nicht - eine Zahl, die man anklicken kann, muss danach aussehen.
 */
button.zahl-sprung {
  background: none;
  border-color: transparent;
  padding: 0.1rem 0.4rem;
  /* Gemessen 23x27 px - eine einstellige Zahl wurde zu SCHMAL, nicht zu
     niedrig, und blieb damit unter den 24 px aus WCAG 2.5.8. Die Zahl in der
     Schuelerzeile bleibt optisch gleich, die Trefferflaeche waechst. */
  min-height: 24px;
  min-width: 24px;
  color: var(--betont-dunkel);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--rand-stark);
  text-underline-offset: 0.15em;
}
button.zahl-sprung:hover {
  background: var(--betont-hell);
  text-decoration-color: var(--betont);
}

/* --- Code, Beispielwerte, Tastenkombinationen ---------------------------- */

code {
  background: var(--flaeche-leise);
  border: 1px solid var(--rand);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  font-size: var(--text-s);
  font-family: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Consolas, monospace;
}

pre {
  background: var(--flaeche-leise);
  border: 1px solid var(--rand);
  border-radius: 6px;
  padding: 0.9rem;
  overflow-x: auto;
  font-size: var(--text-s);
}

kbd {
  background: var(--flaeche-leise);
  border: 1px solid var(--rand-stark);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-size: var(--text-s);
  font-family: inherit;
}

footer {
  max-width: 78rem;
  margin: 0 auto;
  padding: var(--abstand-4) var(--abstand-5) 2.5rem;
}

.grenzen summary {
  cursor: pointer;
  font-size: var(--text-s);
  font-weight: 600;
  color: var(--schrift-leise);
  list-style: none;
}
.grenzen summary::-webkit-details-marker { display: none; }
.grenzen summary::before { content: "▸ "; }
.grenzen[open] summary::before { content: "▾ "; }
.grenzen summary:hover { color: var(--schrift); }
.grenzen p { margin-top: 0.5rem; }

/* --- Pedal --------------------------------------------------------------
   Die Zeile, die gerade angelernt wird, muss ins Auge fallen: Wer tritt,
   schaut nicht auf den Bildschirm. */

#pedalbelegung td.lernt {
  font-weight: 700;
  color: var(--betont-dunkel);
  background: var(--betont-hell);
}

.probe {
  border: 2px dashed var(--rand-stark);
  border-radius: var(--rundung);
  padding: var(--abstand-5);
  text-align: center;
  color: var(--schrift-leise);
  background: var(--flaeche-leise);
}
.probe:focus {
  border-color: var(--betont);
  outline: none;
  /*
   * Nur der Farbwechsel des ohnehin duennen gestrichelten Rands war ein zu
   * schwacher Fokus-Ersatz (Befund 7 der a11y-Pruefung, E-173) - ein
   * zusaetzlicher Ring bleibt sichtbar, unabhaengig davon, ob die
   * Randfarbaenderung selbst wahrgenommen wird. `--betont-dunkel` gegen den
   * hellen `--flaeche-leise`-Hintergrund dieses Elements: Kontrastverhaeltnis
   * rechnerisch rund 5,26:1, deutlich ueber der 3:1-Mindestanforderung fuer
   * Bedienelemente (WCAG 1.4.11) - siehe `docs/DECISIONS.md` E-173 fuer die
   * Rechnung.
   */
  box-shadow: 0 0 0 3px var(--betont-dunkel);
}

#pedalprotokoll {
  white-space: pre-line;
  font-variant-numeric: tabular-nums;
}

/* --- Schmale Bildschirme ------------------------------------------------ */

@media (max-width: 40rem) {
  main, footer { padding: var(--abstand-4); }
  section { padding: var(--abstand-4); }
  form { flex-direction: column; align-items: stretch; }
  label, input, select { min-width: 0; width: 100%; }
  nav.seitenleiste { gap: 0; }
  nav.seitenleiste button,
  nav.seitenleiste a { flex: 1 1 auto; padding: 0.6rem var(--abstand-2); font-size: var(--text-s); }
  header .marke { width: 32px; height: 32px; }
}

/* --- Klassen, die die Oberflaeche im Betrieb vergibt --------------------- */

/*
 * Sie stehen hier unten, weil sie nicht zum Aufbau der Seite gehoeren,
 * sondern erst beim Anzeigen entstehen. Wer die Gestaltung liest, soll den
 * Aufbau nicht mit dem Zustand vermischt bekommen.
 */

/*
 * Eine Zustaendigkeitszeile in der Kontenverwaltung (E-147): Avatar-Chip,
 * die Art in Klammern und der "entziehen"-Knopf nebeneinander statt
 * gestapelt - mehrere davon untereinander bleiben trotzdem als Liste lesbar,
 * weil jede Zeile fuer sich ein eigenes `<div>` bleibt.
 */
.beziehungszeile {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0;
}

/* Aktionsspalte einer Tabelle: die Knoepfe stehen eng beieinander und klein. */
td.aktionen {
  white-space: nowrap;
  text-align: right;
}
td.aktionen button,
td.aktionen a.knopf {
  padding: 0.35rem 0.7rem;
  min-height: 2.1rem;
  font-size: var(--text-s);
}

/*
 * Ausnahme fuer die Kontentabelle (SEC-R12 der Sicherheitsanalyse): Ihre
 * Aktionen (Rolle aendern, sperren, Sitzungen beenden) sind seltener und
 * folgenreicher als ein "Bearbeiten" in einer dichten Fachliste - hier gilt
 * wieder der volle 44px-Klickziel-Massstab, nicht die generelle
 * Verdichtung von `td.aktionen` oben.
 */
#kontenliste td.aktionen button {
  padding: 0.6rem 1.1rem;
  min-height: var(--klickflaeche);
  font-size: var(--text-m);
}

/*
 * Aufklappmenue fuer die selteneren Zeilenaktionen (`mitAktionen`, E-226).
 * Liegt ueber der Tabelle statt in ihr, damit sich die Zeilenhoehe beim
 * Oeffnen nicht aendert und die Tabelle nicht breiter wird.
 */
.aktionsmenue { display: inline-block; position: relative; background: none; border: none; box-shadow: none; }
.aktionsmenue > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  min-height: 2.1rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--rand-stark);
  border-radius: var(--rundung-klein);
  background: var(--flaeche);
  font-size: var(--text-s);
  font-weight: 600;
  cursor: pointer;
}
.aktionsmenue > summary::-webkit-details-marker { display: none; }
.aktionsmenue > summary:hover { background: var(--flaeche-leise); }
.aktionsmenue-inhalt {
  position: absolute;
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--abstand-1);
  margin-top: var(--abstand-1);
  padding: var(--abstand-2);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--rundung-klein);
  box-shadow: var(--schatten);
}
.aktionsmenue-inhalt button,
.aktionsmenue-inhalt a.knopf { width: 100%; justify-content: flex-start; text-align: left; }

/*
 * Eine leere Tabelle sagt, dass sie leer ist.
 *
 * Ohne diese Zeile sieht eine leere Liste aus wie ein Fehler beim Laden - und
 * dann sucht jemand nach einem Fehler, den es nicht gibt.
 */
tbody tr.leer td,
td.leer {
  color: var(--schrift-leise);
  font-style: italic;
  text-align: center;
  padding: var(--abstand-5);
  background: var(--flaeche);
}
tbody tr.leer:hover td { background: var(--flaeche); }

/* --- Notenauswahl in der Setliste ---------------------------------------- */

.stueckwahl { flex: 1 1 22rem; min-width: 18rem; }

/*
 * `.stueckwahl`s feste `min-width: 18rem` (288px) reicht zusammen mit
 * `main`s, `section`s und `.tafel`s Innenabstand auf einem 360-400px breiten
 * Geraet fuer horizontalen Seitenueberlauf (Befund 8 der a11y-Pruefung,
 * E-173). Absichtlich HIER direkt nach der Grundregel ergaenzt statt in der
 * weiter oben stehenden allgemeinen "Schmale Bildschirme"-Media-Query: Bei
 * gleicher Selektor-Spezifitaet gewinnt in CSS die spaeter im Quelltext
 * stehende Regel, unabhaengig von Media Queries - eine Ergaenzung in der
 * frueheren Stelle waere von dieser Grundregel wieder ueberschrieben worden
 * (im Playwright-Test tatsaechlich so vorgefunden, nicht nur vermutet).
 *
 * `flex-basis: auto` zusaetzlich zu `min-width`/`width`: Das gestapelte
 * mobile Formular (`form { flex-direction: column }`) legt die Hauptachse
 * auf die Hoehe - ohne `flex-basis: auto` blieb `.stueckwahl` deshalb
 * erzwungen 22rem (352px) hoch, mit einer grossen leeren Flaeche unter dem
 * Suchfeld, solange keine Trefferliste gefuellt ist. Andere generische
 * Container im selben Formular (`.gewaehlt-rahmen`, `.wahlliste`,
 * `.gewaehlt`) tragen keine eigene `min-width`/feste `flex-basis` und sind
 * nicht betroffen.
 */
@media (max-width: 40rem) {
  .stueckwahl { min-width: 0; width: 100%; flex-basis: auto; }
}

.wahlliste {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  max-height: 12rem;
  overflow-y: auto;
  border: 1px solid var(--rand);
  border-radius: 6px;
  background: var(--flaeche);
}
.wahlliste:empty { display: none; }

.wahlliste li {
  padding: var(--abstand-2) 0.7rem;
  border-bottom: 1px solid var(--rand);
  cursor: pointer;
  font-size: var(--text-s);
}
.wahlliste li:last-child { border-bottom: none; }
.wahlliste li:hover { background: var(--betont-hell); }
.wahlliste li .neben { display: block; color: var(--schrift-leise); font-size: var(--text-s); }

/* Nicht lieferbare Fassungen bleiben sichtbar und sind nicht waehlbar.
   Sie auszublenden hiesse zu verschweigen, dass es sie gibt. */
.wahlliste li.nicht-lieferbar { color: var(--schrift-leise); cursor: not-allowed; }
.wahlliste li.nicht-lieferbar:hover { background: none; }

.gewaehlt-rahmen {
  flex: 1 1 100%;
  border: 1px solid var(--rand);
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
  background: var(--flaeche-leise);
}
.gewaehlt-rahmen > strong {
  font-size: var(--text-s);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--schrift-leise);
}

.gewaehlt { margin: var(--abstand-2) 0 0; padding-left: 1.4rem; }
.gewaehlt:empty::after {
  content: "Noch nichts gewählt.";
  color: var(--schrift-leise);
  font-style: italic;
  margin-left: -1.4rem;
  display: block;
}
.gewaehlt li { padding: var(--abstand-1) 0; }
.gewaehlt li button {
  padding: 0.15rem var(--abstand-2);
  min-height: auto;
  font-size: var(--text-s);
  margin-left: 0.5rem;
}

.satzzeile {
  display: flex;
  gap: var(--abstand-2);
  align-items: center;
  margin: 0.35rem 0;
}
.satzzeile input[type="text"],
.satzzeile input:not([type]),
.satzzeile input[type="number"] {
  flex: 1 1 auto;
}

/*
 * Druckansicht eines historischen Berichts (Entwurf 9.3, index.html
 * #bericht-druckbereich). Ausserhalb des Drucks unsichtbar - beim Druck
 * (window.print() aus app.js) wird stattdessen alles ANDERE ausgeblendet,
 * damit nur der Bericht auf dem Papier bzw. im PDF landet.
 *
 * `display: none` statt nur `visibility: hidden` fuer den Normalfall: Sonst
 * bliebe die leere Flaeche im Layout stehen und nach unten scrollbar,
 * obwohl niemand sie sehen soll.
 */
#bericht-druckbereich {
  display: none;
}

@media print {
  body.drucke-bericht > *:not(#bericht-druckbereich) {
    display: none !important;
  }
  body.drucke-bericht #bericht-druckbereich {
    display: block !important;
  }
}

/*
 * Chip fuer einen deaktivierten Schueler in der Schuelerliste (E-205-Folge:
 * "Deaktivieren" macht offene Vorgaenge sichtbar UND den Schueler selbst).
 * Nach der Bedeutungsfarben-Regel oben im Kopfkommentar ("Grau eine
 * Auskunft") - "inaktiv" ist weder Fehler noch Warnung, nur eine neutrale
 * Auskunft ueber den Zustand, keine neue Bedeutungsfarbe.
 */
.chip.inaktiv {
  background: var(--flaeche-leise);
  color: var(--schrift-leise);
  border: 1px solid var(--rand-stark);
}

/*
 * Kontostatus in der Kontentabelle (SEC-R11 der Sicherheitsanalyse) - ein
 * Chip fuer beide Zustaende, nicht nur eine Warnung bei "gesperrt" und
 * stilles Nichts sonst.
 */
.chip.aktiv { background: var(--mint-hell); color: var(--mint-dunkel); }
.chip.gesperrt { background: var(--koralle-hell); color: var(--koralle-dunkel); }

/*
 * Druckansicht der Zugangskarten (index.html #zk-druckbereich), derselbe Weg
 * wie #bericht-druckbereich direkt darueber - siehe dortigen Kommentar fuer
 * die Begruendung. `#zk-karten` selbst (im Dialog) bleibt fuer den
 * Bildschirm da; `#zk-druckbereich` bekommt beim Klick auf "Karten drucken"
 * (app.js) eine Kopie ohne die Knoepfe.
 */
#zk-druckbereich {
  display: none;
}

@media print {
  body.drucke-zugangskarten > *:not(#zk-druckbereich) {
    display: none !important;
  }
  body.drucke-zugangskarten #zk-druckbereich {
    display: block !important;
    /* Sonst faellt jede Hintergrundfarbe (Zugangskarte, Beispielkaesten) im Druck weg. */
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  /* Eine Zugangskarte darf nicht mitten im Codetext auf zwei Seiten reissen. */
  #zk-druckbereich .zugangskarte {
    break-inside: avoid;
  }
  #zk-druckbereich .bedienungsanleitung-kasten {
    break-inside: avoid;
  }
}

/*
 * Druckansicht der Wiederherstellungscodes (index.html #zf-druckbereich,
 * Abschnitt 4 der Kontoueberarbeitung vom 22. September 2026), derselbe Weg
 * wie #zk-druckbereich oben.
 */
#zf-druckbereich {
  display: none;
}

@media print {
  body.drucke-wiederherstellungscodes > *:not(#zf-druckbereich) {
    display: none !important;
  }
  body.drucke-wiederherstellungscodes #zf-druckbereich {
    display: block !important;
  }
}

/*
 * Selbstbedienungs-Download der Bedienungsanleitung im eigenen Zugang
 * (schueler.html/eltern.html, `bedienungsanleitung.js`s
 * `druckeEigeneBedienungsanleitung()`) - derselbe Weg wie
 * #zk-druckbereich/#bericht-druckbereich oben, nur mit eigenem Namen, weil
 * beide Portalseiten dasselbe `#ba-druckbereich` und dieselbe Klasse nutzen.
 */
#ba-druckbereich {
  display: none;
}

@media print {
  body.drucke-anleitung > *:not(#ba-druckbereich) {
    display: none !important;
  }
  body.drucke-anleitung #ba-druckbereich {
    display: block !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  #ba-druckbereich .bedienungsanleitung-kasten {
    break-inside: avoid;
  }
}

/*
 * Der gemeinsame Bausteinsatz selbst hatte, anders als schueler.css/
 * noten.css/wissen.css/unterricht.css, noch keine `prefers-reduced-motion`-
 * Behandlung (Audit vom 19. September 2026). Betrifft nur die beiden
 * `transition`-Regeln dieser Datei: den Aufklapp-Pfeil eines `<details>` und
 * den Hover-Effekt einer Kachel.
 */
@media (prefers-reduced-motion: reduce) {
  details > summary::before,
  .kacheln .kachel {
    transition: none;
  }
}