/* Der Grundstil von scampy.
 *
 * QUELLE IST docs/scumpy-mockup.html, und zwar wörtlich: Die Klassennamen,
 * die Farben, die Abmessungen und die Schriftgrössen sind von dort
 * übernommen, nicht nachempfunden. Das Mockup ist Vorgabe (CLAUDE.md
 * Rangordnung, Punkt 2) und handgeschriebenes CSS - es liess sich direkt
 * übernehmen, statt es in Utility-Klassen zu übersetzen und wieder
 * zurück.
 *
 * WAS HIER DAZUKOMMT, und warum es nicht im Mockup steht: Das Mockup zeigt
 * fünf Bildschirme in einem Zustand. Die gebaute Anwendung hat acht
 * Bildschirme und jeder davon vier Zustände (lädt, da, anmelden, Fehler),
 * fünf Eingabearten und eine geschlossene Runde, die sichtbar anders
 * aussehen muss. Alles Zusätzliche steht unten unter eigener Überschrift
 * und benutzt dieselben Marken.
 *
 * KEIN BAUSCHRITT. Diese Datei wird so ausgeliefert, wie sie dasteht -
 * kein Tailwind, kein PostCSS, kein Node. Wer sie ändert, sieht die
 * Wirkung beim Neuladen.
 */

/* ---------- Schriften, lokal (R8) ------------------------------------ */
/*
 * Keine externe Schrift-CDN im Produktivbau (R8). Die Dateien liegen in
 * ``fonts/`` im Repo - SIL Open Font License, die Lizenztexte daneben. Das
 * Mockup lädt sie von Google Fonts; das ist für ein Mockup in Ordnung und
 * für die Anwendung nicht.
 *
 * ``font-display: swap``: Lieber sofort in der Ersatzschrift lesbar als
 * dreihundert Millisekunden leer.
 */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Marken (docs/03 Abschnitt 3) ----------------------------- */
:root {
  --ink: #16233b;
  --ink-soft: #4b5b76;
  --plaster: #e7ece3;
  --plaster-hi: #f5f8f2;
  --cobalt: #2a4fd7;
  --chalk: #f5c93f;
  --moss: #3e7b4f;
  --plum: #7c3a5e;
  --hairline: rgba(22, 35, 59, 0.16);
  --r: 14px;

  /* Flächen, die im Mockup als rohe Hexwerte stehen. Sie bekommen hier
     einen Namen, damit acht Bildschirme nicht acht eigene Grautöne
     erfinden. */
  --track: #d7ded2;
  --track-soft: #cbd3c6;
  --room-done: #dce8dd;
  --room-locked: #dfe3db;
  --quiet: #dfe4dc;
  --sky-low: #dce4da;
  --sky-high: #eef2ea;

  /* Das Urteil nach einer Antwort (V74.7). Richtig nimmt das Grün, das
     schon «sicher, geschafft» heisst; für falsch gab es in docs/03 keine
     Farbe, und das Pflaumenrot ist der Check. Also ein eigenes Ziegelrot -
     eine angeordnete Ergänzung der Palette, nicht ihr Ersatz. Die hellen
     Flächen tragen Tintenschrift, weit über 4.5:1. */
  --brick: #b0432f;
  --moss-hell: #dfeee2;
  --brick-hell: #f7e1db;

  /* Die Blüte einer Blume zum Zählen (V157). Ein Rosa, das im Produkt sonst
     nichts sagt - weder Grün noch Ziegelrot, die beiden sind das Urteil. */
  --bluete: #ef86ad;

  /* DIE GESCHLOSSENE RUNDE IST GEDÄMPFT, ABER NICHT TRIST (V103),
     angeordnet am 28.09.2026: «die Prüfungen und tests sollen auch freundlich
     wirken. aktuell sind diese grau und trist».

     ``docs/03`` Zeile 89 verlangt «gedämpfter Untergrund, kein Gelb» - und
     Abschnitt 3 gibt dem Check eine eigene FARBE, `--plum`. Gebaut war
     stattdessen ein Grau-Grün, und die Farbe trug nur die kleine Pille.
     Jetzt gehört der ganze Bildschirm ihr: gedämpft bleibt er, warm wird er.

     Die Töne sind alle aus dem Pflaumenrot gemischt und nicht frei erfunden:
     ein Untergrund und eine helle Fläche für Feld und Karten.
     Tintenschrift liegt auf beiden weit über 4.5:1.

     Ein dritter stand hier, `--plum-spur` (#cdb9c4), für die Punktreihe. Er
     ist mit V105 fort: Er lag nur zwei Stufen über dem Untergrund, und die
     Regel, die ihn setzte, hat den Fortschritt ganz zugedeckt - die
     Punktreihe nimmt seither den hinteren Hügel. */
  --plum-grund: #e3d5dc;
  --plum-hell: #f4ecf0;
  /* Die Hügel der geschlossenen Runde (V105): dieselbe Zeichnung wie in der
     Werkstatt, dieselbe Familie wie der Untergrund darunter. Zwei Reihen,
     die hintere dunkler, und eine Linie darüber - gerade so viel Abstand vom
     Untergrund, dass ein Umriss entsteht und kein Muster. */
  --plum-hang: #d3bdc9;
  --plum-hang-tief: #c0a4b4;
  --plum-linie: #9d7a8e;

  /* DIE FÜNF REGALE DER ÜBERSICHT (V93). Eigene Töne und NICHT die der
     Palette: moss heisst «sicher, geschafft», brick heisst «falsch», chalk
     ist das Aufgabenfeld, plum der Check und cobalt die offene Tür - eine
     Gruppe damit zu markieren, hiesse ihre Bedeutung zu verbrauchen. Es sind
     Flächen wie --room-done und --sky-low, hell genug für Tintenschrift weit
     über 4.5:1, und je ein kräftigerer Ton fürs Band und den Balken. */
  --ton-sprachen: #dde3f4;
  --ton-sprachen-tief: #3b4f8a;
  --ton-rechnen: #f2e6c9;
  --ton-rechnen-tief: #7a6224;
  --ton-forschen: #d9e8dd;
  --ton-forschen-tief: #35674a;
  --ton-welt: #f0e0d6;
  --ton-welt-tief: #8a5334;
  --ton-machen: #e9dde8;
  --ton-machen-tief: #6c4068;
  --ton-uebrig: #e2e6df;
  --ton-uebrig-tief: #4b5b76;

  /* DIE KULISSEN (V97). Eigene Töne, und mit Absicht ohne Bedeutung: Eine
     Kulisse steht hinter dem Inhalt, und eine Farbe, die dort etwas heisst,
     sagt es am falschen Ort. ``kulisse-linie`` ist die Kontur - Tinte hätte
     hinter dem Inhalt mit ihm um den Blick gestritten. Die Hügel sind
     heller als alles davor, das Holz der Werkbank ist das einzige Braun
     im Haus, und alles zusammen bleibt blass genug, dass die Schrift davor
     ihre 4.5:1 behält. */
  --kulisse-linie: #a3b1a2;
  --kulisse-hang: #cfdcc9;
  --kulisse-hang-tief: #bdcbb6;
  --kulisse-sonne: #f3dd9e;
  --kulisse-wolke: #f7faf4;
  --kulisse-holz: #d8c2a0;

  /* DIE SPIELAUTOMATEN (V185): je Rolle eine Marke, und hier das Aussehen
     des Platzhalters - ein Gehäuse in tiefem Blau, ein warmes Licht im
     Leuchtkasten, Streifen und Knöpfe in Rosa und Gelb. Ein Spiel setzt die
     Marken für seinen Automaten neu (``[data-aussehen="…"]``, seit V187 Memory,
     ``app/web/automat.py``). Kein Grün und kein Ziegelrot: Die beiden sind
     das Urteil (R6, R9), und ein Automat urteilt nicht. */
  --automat-gehaeuse: #34406b;
  --automat-gehaeuse-tief: #262f52;
  --automat-glanz: rgba(255, 255, 255, 0.13);
  --automat-leuchte: #fff0c2;
  --automat-schrift: #34406b;
  --automat-rahmen: #141a31;
  --automat-schirm: #1f2a4d;
  --automat-schirmbild: #8fd8f0;
  --automat-schirmglanz: rgba(255, 255, 255, 0.07);
  --automat-streifen: #f58fb5;
  --automat-pult: #4a5788;
  --automat-knopf-a: #f58fb5;
  --automat-knopf-b: #f5c93f;
  --automat-licht: rgba(255, 255, 255, 0.55);
  --automat-tuer: #2b3459;
  --automat-schlitz: #f5c93f;
  --automat-schloss: #f5c93f;
  --automat-schatten: rgba(22, 35, 59, 0.16);

  color-scheme: light;

  /* Zahlen springen nie - weder im Ausweis noch in der Aufgabe
     (docs/03 Abschnitt 3). Global gesetzt, damit es niemand vergisst. */
  font-variant-numeric: tabular-nums;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/*
 * ``hidden`` HEISST HIER AUCH VERSTECKT.
 *
 * Der Browser bringt dafür ``[hidden] { display: none }`` mit - aber als
 * Regel des Browsers, und jede Regel aus diesem Stilblatt schlägt sie. Ein
 * ``.btn`` trägt ``display: inline-flex``, also stand der Weiter-Knopf der
 * Runde als leerer gelber Balken da, obwohl er ``hidden`` war. Gefunden an
 * einem Bildschirmfoto: Kein Test schaut nach, ob etwas Unsichtbares wirklich
 * unsichtbar ist.
 *
 * ``!important``, weil es sonst von jeder späteren ``display``-Regel wieder
 * ausgehebelt würde - und der nächste Knopf, der das trifft, fällt
 * genauso wenig auf wie dieser.
 */
[hidden] {
  display: none !important;
}
html,
body {
  height: 100%;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  background: var(--plaster);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
}

/*
 * KEIN RAND AUF DEM TELEFON. Das Mockup setzt hier ``padding: 24px 16px`` -
 * dort schwebt ein Telefon auf einer Seite, und der Rand ist der Tisch, auf
 * dem es liegt. Auf einem wirklichen Telefon ist er 16 px, die niemandem
 * gehören: Der Rahmen soll das Fenster füllen (siehe ``.frame`` darunter),
 * und mit dem Rand tut er es nicht.
 *
 * ES GING UM MEHR ALS UM DAS AUSSEHEN, und aufgefallen ist es einem
 * Browsertest: Bei 360 px Fensterbreite blieben der Aufgabenspalte dadurch
 * 288 statt 320 px. Gemessen über alle 2930 Aufgabentexte wurde der
 * schlimmste Fall damit 294 px hoch statt 262 - die Schwellen in
 * ``app/web/aufgabentext.py`` sind für eine breitere Spalte gemessen.
 */
@media (min-width: 640px) {
  body {
    padding: 24px 16px;
  }
}

/* Sichtbarer Tastaturfokus auf allem Bedienbaren. Nie ``outline:none`` ohne
   Ersatz - wo eine andere Farbe nötig ist (heller Text auf cobalt oder
   plum), setzt die Stelle sie selbst. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}

/* ---------- Rahmen ---------------------------------------------------- */
/*
 * OHNE FESTE MAXIMALBREITE AUF DEM TELEFON, mit ihr auf dem Schreibtisch:
 * Das Mockup zeigt ein Telefon in einem Rahmen, damit man es am Bildschirm
 * ansehen kann. Auf einem wirklichen Telefon wäre der Rahmen eine
 * Verschwendung - dort füllt die Anwendung das Fenster.
 */
.frame {
  width: 100%;
  height: 100dvh;
  background: var(--plaster-hi);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media (min-width: 640px) {
  .frame {
    max-width: 412px;
    height: min(860px, 94vh);
    border: 1.5px solid var(--ink);
    border-radius: 26px;
    box-shadow: 10px 10px 0 rgba(22, 35, 59, 0.1);
  }
}
/* DER CHECK HAT SEINE EIGENE FARBE, UND JETZT TRÄGT SIE DEN BILDSCHIRM
   (V103). Bis dahin stand hier `--quiet`, ein Grau-Grün - und `--plum` kam
   nur auf der Pille vor. Die Trennung zur Übung, die ``docs/03`` Zeile 90
   «Teil des Integritätsversprechens» nennt, bleibt dieselbe: Der Untergrund
   ist ein anderer, gedämpfter, und Gelb kommt nirgends vor. Er ist nur nicht
   mehr grau.

   `--quiet` bleibt, wo es hingehört: an den Fenstern der gebauten Stockwerke
   (``app/web/schmuck.py``). Ein Name, den zwei Dinge teilen, färbt beim
   nächsten Mal das falsche mit. */
/* EINE REGEL STATT EINER AUFZÄHLUNG. Der geschlossene Rahmen definiert die
   beiden FLÄCHENMARKEN neu, und jede Fläche darunter zieht mit - das
   Aufgabenbild, das Antwortfeld, die Karten, die Pille, alles. Sie einzeln
   aufzuzählen hiesse, die nächste zu vergessen; genau das ist die Lehre aus
   V21.5 und V26.1, nur hier in Farbe. Nachgemessen auf dem Bildschirmfoto:
   Vorher blieben das Aufgabenbild und das Antwortfeld grün stehen, während
   der Rest schon warm war. */
.frame.quiet {
  --plaster: var(--plum-grund);
  --plaster-hi: var(--plum-hell);
  background: var(--plum-grund);
}
/* DIE PUNKTREIHE HAT IHRE EIGENE SPUR - UND NUR DIE SPUR (V105).

   Hier stand `.frame.quiet .dots i { background: … }`, und das war die
   Behebung, die den Fortschritt abgeschafft hat: Der Selektor wiegt 0-3-1,
   `.dots i.ok` nur 0-2-1. Damit gewann die Spur gegen JEDEN Zustand, und in
   der geschlossenen Runde sahen alle Striche gleich aus - erledigt,
   aktuell und offen in einer Farbe. Gesehen hat es der Auftraggeber, nicht
   der Test von V103: Der fragte nach KÜHLEN Marken, und `--plum-spur` ist
   warm.

   Jetzt wird die MARKE umdefiniert und nicht die Fläche - dieselbe Bauform
   wie beim Untergrund darüber. Die Zustandsregeln bleiben damit die
   spezifischeren und ziehen. */
.frame.quiet .dots {
  /* Eine Spur, die man SIEHT. Der alte Ton lag nur zwei Stufen über dem
     Untergrund - Striche, die man suchen muss, sind kein Fortschritt
     (V105). Jetzt dieselbe Farbe wie der hintere Hügel: deutlich genug, um
     die Reihe zu erkennen, und ruhig genug, um nicht zu rufen. */
  --track-soft: var(--plum-hang-tief);
}
/* DIE HÜGEL NEHMEN DIE FARBE DES CHECKS (V105), und zwar über dieselben drei
   Marken, die sie in der Werkstatt lesen. Eine zweite Zeichnung in Pflaume
   wäre dieselbe Kulisse ein zweites Mal - und die zweite veraltet. */
.frame.quiet {
  --kulisse-hang: var(--plum-hang);
  --kulisse-hang-tief: var(--plum-hang-tief);
  --kulisse-linie: var(--plum-linie);
}
/* SIE STEHEN AM FUSS UND HINTER ALLEM. `docs/03` Abschnitt 4 will hier «eine
   grosse Aufgabe, ein grosses Eingabefeld» - die Hügel drängen sich nicht
   dazwischen, sondern geben dem Bildschirm einen Boden. Ohne eigene Höhe im
   Fluss: Sie liegen absolut am unteren Rand des Körpers und schieben nichts. */
.frame.quiet .body {
  position: relative;
}
.ruhehang {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  z-index: 0;
  pointer-events: none;
}
.ruhehang .kulisse {
  width: 100%;
  height: 100%;
}
/* Was im Kasten steht, gehört davor - sonst läge die Aufgabe hinter den
   Hügeln, sobald die Seite kurz ist. */
.frame.quiet .pad {
  position: relative;
  z-index: 1;
}
/* DER PRÜFEN-KNOPF IST GEFÜLLT UND NICHT LEER. Beim Üben ist er gelb; hier
   war er ein blosser Umriss, und damit sah der wichtigste Knopf des
   Bildschirms aus wie der Nebenausgang. Jetzt trägt er das Pflaumenrot -
   kein Gelb, wie ``docs/03`` Zeile 89 es verlangt, und Weiss darauf liegt
   bei 8:1. Gezielt über ``data-pruefen`` und nicht über ``.btn.still``:
   «Doch nicht jetzt» und «Nochmals anmelden» bleiben still, wie sie sollen. */
.frame.quiet [data-pruefen] {
  background: var(--plum);
  color: #fff;
  border-color: var(--plum);
}

/* ---------- Kopfzeile ------------------------------------------------- */
/*
 * DIE STATUSLEISTE DES TELEFONS LIEGT NICHT ÜBER DER KOPFZEILE (V74.5).
 * Der Rahmen setzt ``viewport-fit=cover``: Die Seite darf bis an den Rand
 * des Bildschirms, auch unter die Aussparung der Kamera. Im Browser merkt
 * man davon nichts - als Web-App vom Startbildschirm geöffnet aber lag die
 * Statusleiste mit Uhr und Akku über dem Gruss, und der Scampy daneben war
 * halb weg. ``env(safe-area-inset-*)`` ist der Abstand, den das Telefon
 * selbst belegt; überall sonst ist er null, am Schreibtisch und in einem
 * Browser mit eigener Leiste auch.
 */
.top {
  padding: calc(18px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px))
    12px max(20px, env(safe-area-inset-left, 0px));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
}
/* Der Scampy neben dem Gruss (V39). */
.kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.kopf .zeichen {
  flex-shrink: 0;
}
.hello {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 21px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  min-width: 0;
  /* EIN NAME OHNE LEERZEICHEN BRICHT UM, STATT ABGESCHNITTEN ZU WERDEN
     (V30, U11). «Hallo Superkrassermathekönig2015ausderSchweiz» lief über
     den Rand, und der Rahmen schneidet ab, was hinausragt - vierzig Zeichen
     sind erlaubt, also muss die Kopfzeile sie auch zeigen können. */
  overflow-wrap: anywhere;
}
.hello span {
  display: block;
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-weight: 400;
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-top: 4px;
  letter-spacing: 0;
}
.streak {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-shrink: 0;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 6px 11px 5px;
  background: var(--chalk);
}
.streak b {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.streak i {
  font-style: normal;
  font-size: 11.5px;
}

/* ---------- scrollender Inhalt ---------------------------------------- */
.body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.pad {
  padding: 18px 20px 26px;
}
/* Ohne Navigation - in der Runde - ist der Inhalt das Letzte im Rahmen, und
   dann hält er selbst den Abstand zum unteren Rand (V74.5). */
.body:last-child .pad {
  padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px));
}

h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.sub {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.45;
}

/* ---------- Kulissen (V97) --------------------------------------------- */
/*
 * Angeordnet am 28.09.2026: «es muss alles viel spielerischer sein, mit sehr
 * viel graphischen Elementen». Gezeichnet sind sie in app/web/schmuck.py; hier
 * steht nur, wie gross sie sind und wo.
 *
 * WARUM DIE HÖHE HIER STEHT UND NICHT IM SVG: Die Kulissen tragen
 * ``preserveAspectRatio: slice``, skalieren also auf die Breite und schneiden
 * ab, was nicht in diese Höhe passt. Damit bleibt die Sonne rund, gleich wie
 * breit das Fenster ist - und der Kasten bleibt gleich hoch, statt mit der
 * Breite zu wachsen.
 *
 * DAS GILT AUF DEM TELEFON. Ab 640 px tragen Himmel und Hügel im Bild der
 * Anmeldung das Verhältnis ihrer Zeichnung, und am Fuss einer Runde stehen
 * ab 1024 px nur die Kuppen (V127): Ein Kasten von fester Höhe auf einem
 * breiten Band schnitt die Sonne mitten durch. Die Bühne der Werkstatt, auf
 * der sie bis V130 hinter den Türmen standen, gibt es nicht mehr.
 *
 * SIE FANGEN NICHTS AB. ``pointer-events: none`` an jeder Kulisse: Was hinter
 * dem Inhalt liegt, darf ihm keinen Fingertipp wegnehmen.
 */
.kulisse {
  display: block;
  pointer-events: none;
}
/* Die Werkbank auf den leeren Seiten: nicht dahinter, sondern an der Stelle,
   an der sonst nichts wäre. Eine leere Seite ist eine Einladung
   (docs/03 Abschnitt 5) - und eine Bank mit Werkzeug darauf sagt das, ohne
   dass ein Satz es behaupten muss. */
.leerbild {
  display: flex;
  justify-content: center;
  margin: 10px 0 2px;
}
.leerbild .kulisse {
  width: 180px;
  height: 122px;
}

.ende-zeichen,
.leer-zeichen {
  display: flex;
  justify-content: center;
  margin: 6px 0 12px;
}
/* DIE LAGE IST ZUFÄLLIG (V74.4): links, in der Mitte oder rechts auf den
   leeren Seiten und am Ende einer Runde, vor oder nach dem Gruss in der
   Kopfzeile. Die Mitte und «vorn» sind die gewöhnliche Anordnung und
   brauchen keine eigene Regel. */
.ende-zeichen.lage-links,
.leer-zeichen.lage-links {
  justify-content: flex-start;
  padding-left: 10px;
}
.ende-zeichen.lage-rechts,
.leer-zeichen.lage-rechts {
  justify-content: flex-end;
  padding-right: 10px;
}
.kopf.lage-hinten {
  flex-direction: row-reverse;
}
/* ---------- der Vorschlag oben ---------------------------------------- */
.next {
  border: 1.5px solid var(--ink);
  border-radius: var(--r);
  background: var(--cobalt);
  color: #fff;
  padding: 16px 17px;
  margin-bottom: 14px;
}
.next .eyebrow {
  font-size: 12px;
  opacity: 0.82;
}
.next h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 19px;
  font-weight: 700;
  margin: 5px 0 3px;
  letter-spacing: -0.015em;
}
.next p {
  font-size: 13px;
  opacity: 0.86;
  line-height: 1.45;
}
.next .row {
  display: flex;
  gap: 9px;
  margin-top: 14px;
}

/* ---------- eine Stufe ist fertig (V130) ------------------------------- */
/*
 * DER EINE MOMENT, SEIT DIE TÜRME FORT SIND. Bis V130 wuchs dafür ein
 * Stockwerk aus dem Gerüst; jetzt steht die Karte oben in der Werkstatt, mit
 * dem Band der Stufen, und das eben fertige Feld wächst darin einmal in die
 * Höhe (die Bewegung steht unten bei den anderen, nur ohne den Wunsch nach
 * weniger Bewegung). Hell und nicht cobalt: Cobalt ist der Vorschlag
 * darunter, und zwei gleich laute Kästen stritten um den Blick.
 */
.geschafft {
  border: 1.5px solid var(--ink);
  border-radius: var(--r);
  background: var(--plaster-hi);
  padding: 16px 17px 18px;
  margin-bottom: 14px;
}
.geschafft .vorschlagsfach {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}
.geschafft-titel {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 8px 0 10px;
}
.geschafft .stockwerkband {
  display: block;
  width: 100%;
  height: 34px;
}
.geschafft .hinweis {
  margin: 8px 0 0;
}
.geschafft .btn {
  margin-top: 14px;
}

/* ---------- Knöpfe ---------------------------------------------------- */
/*
 * VIER VARIANTEN, und die vierte ist jünger als das Mockup:
 *
 *   .btn          gelb, die Haupthandlung
 *   .btn.still    durchsichtig auf hellem Untergrund, die Nebenhandlung
 *   .btn.ghost    durchsichtig auf cobalt oder plum, heller Text
 *   .btn.gewaehlt cobalt, die getroffene Wahl in der GESCHLOSSENEN Runde
 *
 * ``gewaehlt`` gibt es, weil docs/03 Abschnitt 4 für die geschlossene Runde
 * «kein Gelb» verlangt (OPEN_QUESTIONS W6 hat den Widerspruch zum Mockup
 * zugunsten dieses Satzes entschieden). Eine Wahl muss trotzdem sichtbar
 * bleiben - ohne Markierung wüsste ein Kind nicht, was es angetippt hat.
 * Weiss auf cobalt liegt bei 6.57:1, nachgerechnet.
 */
.btn {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 14px;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  padding: 11px 15px;
  background: var(--chalk);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  text-decoration: none;
}
.btn:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
.btn.still {
  background: transparent;
}
.btn.ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.62);
}
.btn.ghost:focus-visible {
  outline-color: #fff;
}
.btn.gewaehlt {
  background: var(--cobalt);
  color: #fff;
}
.btn.gewaehlt:focus-visible {
  outline-color: #fff;
}
.btn.wide {
  width: 100%;
  text-align: center;
}
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---------- Fächer in der Werkstatt --------------------------------------- */
/* Die Klassen ``towers`` und ``tower`` stammen aus der Zeit der Türme (bis
   V130); sie tragen heute die Zeilen der Fächer und heissen weiter so, weil
   jede Umbenennung Vorlage, Stilblatt und Prüfer zugleich anfasst. */
/*
 * DIE FÜNF REGALE DER ÜBERSICHT (V93), angeordnet am 28.09.2026.
 *
 * Ein ``details`` und kein Skript: Es klappt ohne JavaScript auf, ist mit der
 * Tastatur bedienbar und braucht keinen Zustand auf dem Server. Der
 * Aufklapper des Browsers ist weg - stattdessen dreht sich ein eigener Pfeil,
 * damit das Regal in der Handschrift des Hauses bleibt.
 *
 * TIPPZIEL 44 px (docs/03 Abschnitt 6): Die Zusammenfassung ist die ganze
 * Zeile, nicht nur der Text.
 */
.regal {
  --ton: var(--ton-uebrig);
  --ton-tief: var(--ton-uebrig-tief);
  border: 1.5px solid var(--ink);
  border-radius: var(--r);
  background: var(--ton);
  box-shadow: 4px 4px 0 var(--hairline);
  margin-bottom: 12px;
  overflow: hidden;
}
.regal.ton-sprachen {
  --ton: var(--ton-sprachen);
  --ton-tief: var(--ton-sprachen-tief);
}
.regal.ton-rechnen {
  --ton: var(--ton-rechnen);
  --ton-tief: var(--ton-rechnen-tief);
}
.regal.ton-forschen {
  --ton: var(--ton-forschen);
  --ton-tief: var(--ton-forschen-tief);
}
.regal.ton-welt {
  --ton: var(--ton-welt);
  --ton-tief: var(--ton-welt-tief);
}
.regal.ton-machen {
  --ton: var(--ton-machen);
  --ton-tief: var(--ton-machen-tief);
}
.regal > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}
.regal > summary::-webkit-details-marker {
  display: none;
}
.regal > summary:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: -3px;
}
/* DER EIGENE PFEIL. Er dreht sich beim Aufklappen - Bewegung als Antwort auf
   eine Handlung, wie docs/03 Abschnitt 3 es verlangt, und unter
   ``prefers-reduced-motion`` springt er ohne Übergang. */
.regal > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-left: auto;
  border-right: 2.5px solid var(--ton-tief);
  border-bottom: 2.5px solid var(--ton-tief);
  transform: rotate(45deg);
  transform-origin: 60% 60%;
}
.regal[open] > summary::after {
  transform: rotate(225deg);
}
@media (prefers-reduced-motion: no-preference) {
  .regal > summary::after {
    transition: transform 0.18s ease-out;
  }
}
/* DIE ZEICHEN DER FÄCHER, leicht überlappend - ein Stapel Karten, an dem man
   sieht, was im Regal steht, ohne es zu öffnen. Für Vorlesehilfen still: Die
   Namen stehen drinnen, einer je Fach. */
.regal-zeichen {
  display: inline-flex;
  flex: 0 0 auto;
}
.regal-zeichen > * + * {
  margin-left: -7px;
}
.regal-nm {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.regal-nm strong {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.regal-nm small {
  font-size: 12px;
  color: var(--ink-soft);
}
.regal-nm .bar {
  background: rgba(22, 35, 59, 0.1);
  border-color: var(--ton-tief);
}
.regal-nm .bar i {
  background: var(--ton-tief);
}
/* Drinnen steht die Liste auf hellem Grund, damit die Fächer dieselbe Fläche
   haben wie überall sonst. */
.regal > .towers {
  background: var(--plaster-hi);
  border-top: 1.5px solid var(--ink);
  padding: 10px;
  margin: 0;
}

.towers {
  /* Eine Liste, aber ohne Punkte: Ein Vorleseprogramm sagt «14 Einträge»,
     und den Punkt davor, den der Browser mitbringt, braucht niemand. */
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.tower {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
  border: 1.5px solid var(--ink);
  border-radius: var(--r);
  background: var(--plaster-hi);
  padding: 12px 14px;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
.tower:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.tower .nm {
  flex: 1;
  min-width: 0;
}
.tower .nm strong {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 15px;
  display: block;
  letter-spacing: -0.01em;
}
.tower .nm small {
  font-size: 12px;
  color: var(--ink-soft);
}
.bar {
  /* BLOCK, WEIL ES EIN ``span`` IST. Das Mockup schreibt hier ein ``div``;
     in der Vorlage steht ein ``span``, weil es in einem ``a`` liegt und ein
     ``div`` dort bis HTML 4 nicht erlaubt war. Ein ``span`` ist inline, und
     inline heisst: ``height`` und ``margin`` wirken nicht. Der Balken stand
     als senkrechter Strich neben «Stufe 1» - gefunden an einem
     Bildschirmfoto. */
  display: block;
  height: 7px;
  background: var(--track);
  border: 1.2px solid var(--ink);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 6px;
}
.bar i {
  display: block;
  height: 100%;
  background: var(--moss);
}
.pct {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

/* ---------- Räume: das Fach ------------------------------------------ */
.floorhead {
  border: 1.5px solid var(--ink);
  border-radius: var(--r);
  padding: 14px 15px;
  margin-bottom: 14px;
  background: var(--plaster-hi);
}
.floorhead .lvl {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.floorhead .lvl small {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink-soft);
  letter-spacing: 0;
}
/*
 * DAS BAND DER STOCKWERKE (V98). Gezeichnet in app/web/schmuck.py; hier steht
 * nur, wie hoch es ist. ``xMinYMid meet`` heisst: linksbündig, nie verzerrt -
 * ein Fach mit neun Stockwerken füllt die Breite, eines mit weniger hört
 * früher auf, statt seine Kästen breitzuziehen.
 */
.floorhead .stockwerkband {
  display: block;
  width: 100%;
  height: 26px;
  margin: 8px 0 4px;
}
.floorhead .fach {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  display: block;
}
.rooms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.room {
  position: relative;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  padding: 12px 12px 11px;
  background: var(--plaster-hi);
  min-height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
}

/*
 * DIE TÜR. Sie ist nicht erfunden: ``docs/03`` Abschnitt 3 nennt unter
 * «Bewegung» als Beispiel «eine Tür, die aufgeht», und die Farbtabelle
 * darüber definiert ``--cobalt`` wörtlich als «Aktion, offene Türen». Im
 * Produkt gab es bis zum 18.09.2026 keine.
 *
 * WARUM EIN PSEUDO-ELEMENT UND KEIN MARKUP: Eine Tür ist Material, kein
 * Bedienelement. Als eigenes Element wäre sie ein zweites Tippziel in einer
 * Kachel, die schon eines ist, und im schlimmsten Fall ein Fokusstopp, der
 * nichts tut - genau die Barriere, die das Mockup einmal mit seinen fertigen
 * Räumen hatte. ``content: ""`` trägt keinen Text, also liest sie auch keine
 * Vorlesehilfe vor.
 *
 * SIE STEHT AUF DEM BODEN, unten rechts, gegenüber dem Etikett. Dieselbe
 * Handschrift wie alles andere: 1.5 px Kontur in ink, kein Schatten, kein
 * Verlauf (``docs/03`` Abschnitt 3).
 */
.room::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 0;
  width: 19px;
  height: 32px;
  border: 1.5px solid var(--ink);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: var(--plaster);
  transform-origin: left bottom;
}

/* Der Knauf. Drei Pixel, und ohne ihn sieht die Tür aus wie ein Pfeiler. */
.room::before {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 14px;
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: var(--ink);
  z-index: 1;
}
.room:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
/*
 * DAS BILD DES RAUMS (V98): oben rechts, still, ohne Tippziel. Es steht
 * ABSOLUT, damit es der Kachel keine Höhe nimmt - sie ist bei zwei Spalten
 * auf 360 px knapp, und ein Bild im Fluss hätte den Titel in eine dritte
 * Zeile gedrückt. Der Titel hält rechts Platz frei dafür.
 */
.room .kulisse {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 26px;
  height: 26px;
}
.room strong {
  font-size: 13.5px;
  line-height: 1.3;
  font-weight: 700;
  /* Platz für das Bild in der Ecke. DER PREIS STEHT DAZU: Ein Titel, der
     vorher knapp auf eine Zeile passte, bricht jetzt in zwei, und die Kachel
     wird eine Zeile höher. Gemessen auf dem Bildschirmfoto bei 390 px an
     «Zählen bis zwanzig». Getragen, weil das Bild das ist, was angeordnet
     war - und weil eine zweite Zeile nichts unlesbar macht. */
  padding-right: 30px;
}
.room .tag {
  font-size: 11px;
  padding: 3px 7px;
  border: 1.2px solid var(--ink);
  border-radius: 99px;
  align-self: flex-start;
}
.room.done {
  background: var(--room-done);
}
.room.done .tag {
  background: var(--moss);
  color: #fff;
  border-color: var(--moss);
}
/* DURCH DIESE TÜR IST MAN SCHON GEGANGEN: moss, wie das Etikett daneben.
   **IM RUHEZUSTAND STEHT SIE GERADE**, und das ist nachgesehen, nicht
   entschieden: Eine perspektivisch gedrehte Fläche von 19 px liest sich auf
   dem Bildschirmfoto als Schmierer und nicht als Tür. Gedreht wird nur beim
   Antippen - was `docs/03` Abschnitt 3 ohnehin verlangt: Bewegung als
   Antwort auf eine Handlung. */
.room.done::after {
  background: var(--moss);
}
.room.now {
  background: var(--chalk);
}
/* HIER WIRD GERADE GEBAUT: cobalt, die Farbe, die docs/03 «Aktion, offene
   Türen» nennt. */
.room.now::after {
  background: var(--cobalt);
}
/* Ein dunkler Knauf auf einer dunklen Tür ist keiner - auf moss und cobalt
   wird er hell. Gesehen auf dem Bildschirmfoto, nicht ausgerechnet. */
.room.done::before,
.room.now::before {
  background: var(--plaster-hi);
}
.room.locked {
  background: var(--room-locked);
  color: var(--ink-soft);
  cursor: not-allowed;
  border-style: dashed;
}
/* ZU HEISST ZU. Die Kontur ist durchgezogen und nur blasser - **gestrichelt
   war sie zuerst, und bei 19 px Breite wurde daraus ein Gekrissel**, gesehen
   auf dem Bildschirmfoto. Die Kachel selbst ist gestrichelt und sagt es
   damit schon. Kein Knauf: Es gibt nichts zu greifen. */
.room.locked::after {
  border-color: var(--ink-soft);
  background: var(--room-locked);
}
.room.locked::before {
  display: none;
}
.room.locked strong {
  font-weight: 400;
}

.jump {
  margin-top: 14px;
  border: 1.5px dashed var(--ink);
  border-radius: var(--r);
  padding: 14px 15px;
  background: transparent;
  /* Die Leiter links, der Text rechts daneben (V98). Ein Raster und kein
     Flex-Fluss, damit der Knopf darunter über die ganze Breite geht: Er ist
     das Tippziel, und ein Tippziel wird nicht schmaler, weil ein Bild
     danebensteht. */
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: start;
}
.jump .leiter {
  grid-row: 1 / span 2;
}
.jump .leiter .kulisse {
  width: 38px;
  height: 51px;
}
.jump h3,
.jump p {
  grid-column: 2;
}
.jump .btn {
  grid-column: 1 / -1;
}
.jump h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 15px;
  margin-bottom: 4px;
}
.jump p {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.45;
  margin-bottom: 12px;
}

/* ---------- die Runde -------------------------------------------------- */
.dots {
  display: flex;
  gap: 5px;
  margin-bottom: 22px;
}
/* EIN STRICH JE AUFGABE, und sie müssen aus einem Meter Abstand
   sagen, wie weit die Runde ist (V105). Fünf Pixel hoch war das eine Linie.
   Der Auftraggeber hat den Fortschritt nicht gefunden, und daran war
   zweierlei schuld: eine Regel, die ihn zudeckte, und eine Spur, die zu fein
   war. Neun Pixel liegen zwischen «Linie» und «Balken»; mehr wäre ein Balken
   und stünde der Aufgabe im Weg. */
.dots i {
  flex: 1;
  height: 9px;
  background: var(--track-soft);
  border-radius: 99px;
}
/* RICHTIG UND FALSCH WIEGEN GLEICH (V92, R6, R9): dasselbe Stück, dieselbe
   Höhe, dieselbe Form - nur die Farbe wechselt, und es sind die Farben des
   Urteilskastens aus V74.7. Bis V92 war jede beantwortete Aufgabe moss, auch
   die falsche: Die Reihe las, wie WEIT die Runde ist, und malte, wie sie
   LIEF. `getan` ist der ehrliche dritte Fall - beantwortet, und dieser
   Bildschirm weiss nicht, wie es lief (app/web/static/aufgabe.js). */
.dots i.ok {
  background: var(--moss);
}
.dots i.fehl {
  background: var(--brick);
}
.dots i.getan {
  background: var(--ink-soft);
}
.dots i.now {
  background: var(--ink);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1.5px solid var(--ink);
  border-radius: 99px;
  padding: 6px 12px;
  font-size: 12px;
  margin-bottom: 20px;
  background: var(--plaster-hi);
}
.pill.quiet {
  background: var(--plum);
  color: #fff;
  border-color: var(--plum);
}

/*
 * DIE AUFGABE. Das Mockup zeichnet ``.q`` (15 px, die Anweisung) und
 * ``.expr`` (52 px, der Term). Gebaut ist nur ``.expr``, und die Vorlagen
 * liefern ganze Fragesätze statt blosser Terme - in 52 px sind das gemessen
 * bis zu 780 px Höhe, und dann steht das Eingabefeld unter der Falz.
 *
 * Darum vier Grössen statt einer. Welche gilt, entscheidet die Länge;
 * die Schwellen sind in Chromium gemessen (app/web/aufgabentext.py). Die
 * volle Stufe trägt heute 30 px und nicht die 52 des Mockups - zweimal
 * angeordnet kleiner, V39 und V91. Hier stand bis V91, ein kurzer Term
 * stehe «unverändert in den 52 px des Mockups»; das galt seit V39 nicht
 * mehr. Warum das ``.q`` weiterhin fehlt, steht in OPEN_QUESTIONS V8.1 -
 * und seit V30 (U15) auch seine Regel: Sie stand hier, ohne dass ein
 * Element die Klasse je trug.
 */
.expr {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
  /* EIN LANGES WORT BRICHT AN EINER SILBE, NICHT MITTEN DRIN. In der
     Anzeigegrösse passt «zusammengehören» auf 320 px nicht in eine Zeile,
     und ``break-word`` allein trennte es zu «zusammengehör/en» - gesehen auf
     einem Bildschirmfoto. ``lang="de-CH"`` steht am ``html``, also weiss der
     Browser, wo die Silben liegen. */
  hyphens: auto;
  /* KLEINER SEIT V39, angeordnet am 25.09.2026: «die fragen sind zu gross
     geschrieben». Vorher 52, 40, 32 und 26 px - die Grössen des Mockups für
     einen blossen Term, und die Vorlagen schreiben ganze Sätze. SEIT V91
     die oberen drei nochmals: 30, 25, 21 und weiterhin 19. Die unterste
     Stufe bleibt, wo sie war - sie trägt die längsten Fragen, und
     dieselbe Anordnung wollte die kleinen Schriften grösser. Die
     Schwellen in app/web/aufgabentext.py bleiben: Bei kleinerer Schrift
     passen sie mit Reserve. */
  font-size: 30px;
  line-height: 1.1;
  margin-bottom: 18px;
}
.expr.md {
  font-size: 25px;
  line-height: 1.15;
}
.expr.sm {
  font-size: 21px;
  line-height: 1.2;
}
.expr.xs {
  font-size: 19px;
  line-height: 1.25;
}

.answer {
  width: 100%;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: var(--plaster-hi);
  padding: 16px 18px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 27px;
  color: var(--ink);
  text-align: center;
}
.answer:focus {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}

/* Die fünf Eingabearten. ``zahl`` ist ``.answer`` oben; die vier anderen
   brauchen eigene Anordnungen. Jede ist mit der Tastatur allein bedienbar -
   das ist ein Akzeptanzkriterium aus docs/04 M3, kein Feinschliff. */
.wahl {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
/* Eine Auswahl aus Bildern oder Ziffern (V35): Kacheln statt Zeilen. Ein
   Emoji braucht Platz, um erkannt zu werden, und keinen, um gelesen zu werden. */
.wahl.bildwahl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.wahl.bildwahl .btn {
  font-size: 30px;
  min-height: 76px;
}
/* Der Knopf zum Anhören (V35) - über dem Bild, gross genug für einen Daumen. */
.hoeren {
  margin-bottom: 14px;
}
.hoeren .btn {
  font-size: 18px;
  min-height: 56px;
}
.felder {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.feld-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
}
.feld-zeile label {
  flex: 1;
  font-size: 13.5px;
}
.feld-zeile input {
  width: 8ch;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  background: var(--plaster-hi);
  padding: 10px 12px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  color: var(--ink);
}
.karten {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.karte-knopf {
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: var(--plaster-hi);
  min-height: 44px;
  min-width: 48px;
  padding: 10px 13px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.karte-knopf.wartet {
  background: var(--chalk);
}
/* KEIN GELB IN DER GESCHLOSSENEN RUNDE (docs/03 Abschnitt 4). Die wartende
   Karte braucht trotzdem ein eigenes Aussehen, sonst ist nicht zu sehen, was
   angetippt wurde: dann ink statt chalk - dunkel, und vom Cobalt des
   gelegten Paars klar zu trennen. Weiss auf ink liegt bei 15.7:1.

   EINE VERBUNDENE KARTE GIBT ES SEIT V102 NICHT MEHR: Wer ein Paar legt,
   nimmt beide Karten aus den Spalten heraus - sie stehen oben als Paar. */
.frame.quiet .karte-knopf.wartet {
  background: var(--ink);
  color: #fff;
}

/* ---------- Das Bild auf einer Karte (V15) ----------------------------- */

/* ALLES IN currentColor, UND DAS IST DER GANZE TRICK. Eine Karte ist offen
   dunkel auf hell, verbunden weiss auf cobalt, und im zweispaltigen Zuordnen
   wieder anders. Ein fest eingetragener Strich müsste jede dieser Lagen
   einzeln kennen; currentColor folgt der Schrift, die dort ohnehin schon
   stimmt - und mit ihr dem Kontrast, der dafür gemessen wurde. */
.kartenbild {
  width: 44px;
  height: 44px;
  display: block;
  /* Der Strich soll bei jeder Grösse gleich dick aussehen, auch wenn das
     SVG skaliert: Ohne dies rechnet der Browser ihn mit. */
  vector-effect: non-scaling-stroke;
}
.kartenbild .rand {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}
/* DAS AUSGEMALTE STÜCK IST NICHT VOLL DECKEND. Bei einer verbundenen Karte
   liegt weiss auf cobalt; ein volles Weiss verschluckte die Teilungsstriche,
   die darunter durchlaufen, und damit das, was ein Kind abzählen soll. */
.kartenbild .teil {
  fill: currentColor;
  fill-opacity: 0.55;
  stroke: none;
}
.kartenbild .teilung line {
  stroke: currentColor;
  stroke-width: 1.1;
}
.kartenbild .zeiger {
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.kartenbild .nabe {
  fill: currentColor;
}
.karte-knopf:has(.kartenbild) {
  position: relative;
}

/* ---------- Ein gelegtes Paar steht als EIN Stück da (V102) ------------ */

/* Angeordnet am 28.09.2026: «die kleinen zahlen bei den Zuweisung aufgaben
   müssen weg». Vorher trug jedes Kärtchen seine Nummer vor der Aufschrift,
   und die verbundene Zahl zeigte mit derselben Ziffer darauf - bei einer
   Aufgabe über Zahlen kaum zu lesen («1  0 Zehner, 9 Einer»).

   Die Ziffer fällt nicht einfach weg: Die beiden Karten verlassen ihre
   Spalten und stehen zusammen. Was zusammengehört, steht beieinander - das
   sagt dasselbe ohne ein Zeichen, das mitgelesen werden muss. */
.paarreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.paar-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 7px 12px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--cobalt);
  color: #fff;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}
.paar-chip .seite {
  display: inline-flex;
  align-items: center;
}
/* DAS BAND ZWISCHEN DEN BEIDEN SEITEN - ein Strich und kein Pfeil: Die
   Zuordnung hat keine Richtung, sie gilt in beide. */
.paar-chip .band {
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.75;
  flex: none;
}
.paar-chip .kartenbild {
  width: 34px;
  height: 34px;
}
/* IN DER GESCHLOSSENEN RUNDE KEIN COBALT-BLAU AUF GELB, sondern ink -
   dieselbe Regel wie bei der wartenden Karte darüber. */
.frame.quiet .paar-chip {
  background: var(--ink);
}

/* ---------- Memory: ein richtiges Spiel (V104) ------------------------- */

/* VIER KARTEN NEBENEINANDER AUF 360 px, der schmalsten Breite aus docs/04 M3.
   Bei höchstens sechs Paaren (``app/web/memory.HOECHSTENS_PAARE``) sind das drei
   Reihen - so viel überblickt ein Kind auf einmal. */
.memory {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.memory-karte {
  /* 44 px wären die Untergrenze aus docs/03 Abschnitt 6; eine Spielkarte
     darf grosszügiger sein, und der Daumen trifft sie besser. */
  min-height: 68px;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  /* HOLZ AUF DER RÜCKSEITE: Eine verdeckte Karte ist ein Gegenstand und kein
     leeres Feld. Das Muster darauf zeichnet der Server (``schmuck.py``). */
  background: var(--kulisse-holz);
  color: transparent;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 17px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* DIE RÜCKSEITE IST EINE ZEICHNUNG UND KEIN VERLAUF (V104). Bis dahin lag
   dort ein Streifenmuster aus dem Stilblatt; gezeichnet wird in dieser
   Anwendung sonst überall in Python, und dort ist es geprüft
   (``app/web/schmuck.KARTENRUECKEN``). */
.memory-karte .kulisse {
  /* 46 PUNKTE UND NICHT DIE GANZE KARTE: Um 45 Grad gedreht misst das Muster
     65 Punkte in der Diagonale und bleibt damit in einer Karte von 68. */
  width: 46px;
  height: 46px;
}
/* BIS V259 STAND HIER DIE SORTE AUF DER RÜCKSEITE - dieselbe Raute, um 45
   Grad gedreht. Seither sieht jede verdeckte Karte gleich aus, angeordnet:
   «hintergrund der karten gleich, egal was auf der karte drauf ist». Die
   Rückseite steht im Abschnitt dazu am Ende dieses Stilblatts. */
/* AUFGEDECKT HEISST PUTZ UND KEIN GELB. Gelb ist in diesem Produkt die Farbe
   der Aktion (``docs/03`` Abschnitt 3) und in der geschlossenen Runde
   ausdrücklich verboten - eine aufgedeckte Karte ist keine Aktion, sondern ein
   Stück Papier, das jetzt zu lesen ist. */
.memory-karte.offen {
  background: var(--plaster-hi);
  color: var(--ink);
}
/* EINE ZAHL IST KURZ, EIN KÄRTCHEN NICHT. «0 Zehner, 6 Einer» füllt die
   Karte bei 17 px randvoll - gesehen auf 412 px, nicht geschätzt. Der Text
   darf umbrechen und wird kleiner, sobald er mehr als eine Zeile braucht. */
.memory-karte.offen {
  font-size: 14px;
  line-height: 1.15;
  padding: 4px;
  text-wrap: balance;
}
/* EIN GEFUNDENES PAAR LIEGT BEISEITE, ES WIRD NICHT GEFEIERT (R6). Kein
   Haken, kein Gelb, keine zweite Farbe - die Karte bleibt lesbar und tritt
   zurück. Ein gefülltes Kobaltblau stand hier bis V104 und war die Marke für
   ein VORGESCHLAGENES Paar; jetzt ist es ein richtiges, und gerade deshalb
   darf es nicht wie eine Auszeichnung aussehen. */
.memory-karte.gefunden {
  border-color: var(--cobalt);
  background: var(--plaster);
  cursor: default;
}
/* ZWEI KARTEN, DIE NICHT ZUSAMMENGEHÖREN, liegen kurz offen und drehen sich
   dann zu. Sie bekommen einen kräftigeren Rand in derselben Tinte und kein
   Rot: Rot heisst in diesem Produkt «falsch beantwortet» (V74.7), und ein Zug
   im Spiel ist keine Antwort.

   KEINE BLASSE KARTE UND KEIN GRAU: Was ein Kind gerade lesen soll, muss
   lesbar sein - die eineinhalb Sekunden sind das Spiel und nicht eine
   Nebenbemerkung. */
.memory-karte.daneben {
  border-width: 3px;
  border-color: var(--ink);
}
/* EINE KARTE MIT BILD IST KEINE KARTE MIT TEXT: Die Zeilenhöhe und das
   Umbrechen von oben tun dort nichts, die Grösse des Bildes schon. 40 px
   lassen bei 68 px Kartenhöhe oben und unten Luft - ein Bild, das den Rand
   berührt, sieht aus wie abgeschnitten. */
.memory-karte .kartenbild {
  width: 40px;
  height: 40px;
}

/* ---------- Rückmeldung, Tipp, Hinweis -------------------------------- */
.card {
  border: 1.5px solid var(--ink);
  border-radius: var(--r);
  background: var(--plaster-hi);
  padding: 16px;
  margin-bottom: 12px;
}
/*
 * DER SCAMPY GIBT DEN TIPP (V94), angeordnet am 28.09.2026: «der scampy soll
 * die tipps geben». Er steht links, der Tipp in einer Blase daneben - er
 * REICHT ihn, statt ihn zu kommentieren, und der Text ist unverändert der des
 * Servers. Die Blase hat einen kleinen Zipfel zu ihm hin, damit man sieht,
 * von wem sie kommt; gebaut aus zwei gedrehten Rändern, ohne Bild.
 */
.tipp {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
}
.tipp > .wer {
  flex: 0 0 auto;
  display: inline-flex;
  margin-top: 4px;
}
.tipp > .blase {
  position: relative;
  flex: 1;
  min-width: 0;
  border: 1.5px solid var(--ink);
  border-radius: var(--r);
  background: var(--plaster-hi);
  padding: 13px 15px;
  box-shadow: 3px 3px 0 var(--hairline);
}
.tipp > .blase::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 15px;
  width: 11px;
  height: 11px;
  background: var(--plaster-hi);
  border-left: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg);
  border-bottom-left-radius: 3px;
}
.tipp .kopf {
  font-size: 12px;
  color: var(--ink-soft);
}
.tipp p {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.45;
}
/*
 * DAS BEISPIEL (V42): eine andere Aufgabe derselben Art, vorgerechnet. Die
 * Schritte erscheinen nacheinander - ``--nr`` setzt das Skript -, das
 * Ergebnis zuletzt. Ein Einblenden als Antwort auf den Knopfdruck, kein
 * Hüpfen und kein Dauerlauf (docs/03 Abschnitt 3). Gestrichelt, damit es
 * nicht wie die Aufgabe aussieht, die gerade gestellt ist.
 */
.beispiel {
  border: 1.5px dashed var(--ink);
  border-radius: var(--r);
  background: var(--plaster-hi);
  padding: 13px 15px;
  margin-top: 16px;
}
.beispiel .kopf {
  font-size: 12px;
  color: var(--ink-soft);
}
.beispiel-frage {
  margin-top: 3px;
  font-size: 15px;
  line-height: 1.4;
}
.beispiel-schritte {
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.5;
}
.beispiel-ergebnis {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 700;
}

.meldung {
  margin-top: 11px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.45;
  min-height: 1.45em;
}

/*
 * DAS URTEIL, DEUTLICH (V74.7). Bis zum 26.09.2026 stand es als kleiner
 * blasser Satz in ``.meldung`` - derselben Zeile, in der auch «Einen Moment.»
 * steht. Angeordnet: «ob richtig oder falsch muss viel deutlicher sein».
 * Eine angeordnete Abweichung von docs/03 Abschnitt 3, wo ausser dem
 * wachsenden Stockwerk alles ruhig bleibt.
 *
 * GLEICH GROSS FÜR BEIDE: derselbe Kasten, dasselbe Wort in derselben
 * Grösse, dieselbe Bewegung - nur Zeichen und Farbe unterscheiden sie, und
 * das Wort sagt es auch ohne Farbe. Ein grösseres «Richtig» wäre Lob (R6),
 * ein lauteres «Falsch» ein Tadel (R9).
 */
/*
 * DER SCAMPY GIBT DAS URTEIL (V94), angeordnet am 28.09.2026: «auch feedback
 * und sich auch bewegen».
 *
 * ER SIEHT BEI RICHTIG UND FALSCH GLEICH AUS, und das ist keine Sparsamkeit,
 * sondern die Regel: Ein froher Scampy wäre das Lob, das R6 verbietet, ein
 * trauriger der Tadel aus R9. Es gibt deshalb EINE Regel für ihn und keine
 * unter ``.ist-richtig`` oder ``.ist-falsch``. Was unterscheidet, sind Wort
 * und Farbe des Kastens - wie seit V74.7.
 *
 * ``.wer`` ist er, ``.was`` ist das Urteil: Das Gitter von V74.7 steht jetzt
 * in ``.was``, damit seine Regeln für das Häkchen nicht die Figur treffen.
 */
.urteil {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 2px solid var(--ink);
  border-radius: var(--r);
  background: var(--plaster-hi);
  box-shadow: 4px 4px 0 rgba(22, 35, 59, 0.12);
}
.urteil > .wer {
  flex: 0 0 auto;
  display: inline-flex;
}
.urteil > .was {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 12px;
  row-gap: 3px;
  flex: 1;
  min-width: 0;
}
.urteil .was > svg {
  grid-row: span 2;
  width: 42px;
  height: 42px;
}
.urteil .was > svg path {
  fill: none;
  stroke: #fff;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.urteil strong {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 25px;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
/* Ohne Satz darunter steht das Wort mittig neben dem Zeichen. */
.urteil strong:last-child {
  grid-row: span 2;
}
.urteil-satz {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
}
/* Die Lösung (V231): eine Zeile unter dem Wort, nach richtig wie nach
   falsch gleich - dieselbe Schrift, kein eigener Ton. */
.urteil-satz,
.urteil-loesung {
  grid-column: 2;
}
.urteil-loesung {
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.urteil-loesung-wort {
  font-weight: 700;
}
.urteil.ist-richtig {
  border-color: var(--moss);
  background: var(--moss-hell);
}
.urteil.ist-richtig circle {
  fill: var(--moss);
}
.urteil.ist-falsch {
  border-color: var(--brick);
  background: var(--brick-hell);
}
.urteil.ist-falsch circle {
  fill: var(--brick);
}
/* Das Feld der Antwort färbt sich mit - bei einer Zahl oder einem Wort ist
   es das, worauf der Blick gerade liegt. */
.nach-richtig .answer {
  border: 2.5px solid var(--moss);
  background: var(--moss-hell);
}
.nach-falsch .answer {
  border: 2.5px solid var(--brick);
  background: var(--brick-hell);
}
@media (prefers-reduced-motion: no-preference) {
  .urteil:not([hidden]) {
    animation: urteil-einrasten 0.22s ease-out;
  }
}
@keyframes urteil-einrasten {
  from {
    transform: scale(0.96);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.hinweis {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.45;
}

/*
 * EINE LISTE IN DER HANDSCHRIFT DES HAUSES.
 *
 * Die sechs Zeilen der Datenschutzerklärung standen als gewöhnliches ``ul``
 * da - mit dem Punkt und dem Einzug, die der Browser mitbringt. In einem
 * Entwurf, der sonst nirgends eine Vorgabe stehen lässt, liest sich das wie
 * ein Stück, das jemand vergessen hat; gesehen auf einem Bildschirmfoto.
 * «Aufzählungspunkte» stehen schon einmal in der Liste der fünf Befunde vom
 * 16.09.2026 (``CLAUDE.md`` Abschnitt 3) - diese hier hat der Durchgang
 * damals nicht erwischt.
 *
 * Der Marker ist ein Strich in ink-soft, keine Kugel: ``docs/03`` Abschnitt 3
 * kennt Linien und Flächen, keine Verzierung. Der Einzug hängt, damit eine
 * zweite Zeile unter dem Text beginnt und nicht unter dem Strich.
 */
ul.hinweis {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.hinweis li {
  position: relative;
  padding-left: 16px;
}
ul.hinweis li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.62em;
  width: 8px;
  height: 1.5px;
  background: var(--ink-soft);
}
.fehler {
  font-size: 13px;
  color: var(--plum);
  line-height: 1.45;
}

/*
 * DER KNOPF «FEEDBACK» (V40) - nur bei einem Supervisor, für alle anderen
 * steht er gar nicht da. Klein in der Schrift und still in der Farbe, damit
 * er beim Gegenlesen nicht mitliest; als Tippziel trotzdem 44 px hoch
 * (docs/03 Abschnitt 6). Rechts unten, nach dem Inhalt der Seite.
 */
.feedback {
  margin-top: 22px;
  text-align: right;
}
.feedback summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--hairline);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  list-style: none;
}
.feedback summary::-webkit-details-marker {
  display: none;
}
.feedback[open] summary {
  border-color: var(--ink);
  color: var(--ink);
}
.feedback form {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  text-align: left;
}
.feedback label {
  font-size: 13px;
  color: var(--ink-soft);
}
.feedback textarea {
  min-height: 96px;
  resize: vertical;
  font-size: 15px;
  line-height: 1.4;
}
/* Der Dank nach dem Absenden ohne Skript: Die Umleitung endet auf
   ``#feedback-danke``, und nur dann steht er da. */
.feedback-danke {
  display: none;
  margin-top: 8px;
  font-size: 13px;
  color: var(--moss);
  text-align: right;
}
.feedback-danke:target {
  display: block;
}

/* ---------- Ausweis ---------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hairline);
  border: 1.5px solid var(--ink);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 14px;
}
.stat {
  background: var(--plaster-hi);
  padding: 14px 15px;
}
/* Das Zeichen über der Zahl (V99). Es steht IM Fluss und nicht in der Ecke:
   Eine Kachel des Ausweises ist gross genug, und oben links gelesen sagt es,
   worum es in dieser Kachel geht, bevor die Zahl dasteht. */
.stat .kulisse {
  width: 28px;
  height: 28px;
  margin-bottom: 6px;
}
.stat b {
  display: block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.stat span {
  font-size: 12px;
  color: var(--ink-soft);
}
.srow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline);
}
.srow:last-child {
  border-bottom: 0;
}
.srow .l strong {
  font-size: 14px;
  display: block;
}
.srow .l small {
  font-size: 12px;
  color: var(--ink-soft);
}
.srow .r {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.srow .r small {
  display: block;
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-size: 11.5px;
  color: var(--ink-soft);
}
.veri {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-top: 6px;
}

/* ---------- Formularzeilen: «Du» --------------------------------------- */
.eingabe {
  width: 100%;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  background: var(--plaster-hi);
  padding: 12px 14px;
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-size: 15px;
  color: var(--ink);
}

/* ---------- Die Anmeldung ---------------------------------------------- */
/*
 * DER ERSTE BILDSCHIRM, UND DAS MOCKUP ZEICHNET IHN NICHT. Es zeigt Hof,
 * Fach, Runde, Check und Ausweis - wer noch kein Konto hat, kommt darin nicht
 * vor. Gebaut ist er deshalb im Register von docs/03 Abschnitt 3, nicht frei:
 * durchgezogene Kontur, zwei Schriftfamilien, keine weichen Schatten.
 *
 * UND OHNE MASKOTTCHEN. docs/03 Abschnitt 2 ist da eindeutig - «Kein
 * Maskottchen. Keine sprechende Figur, die kommentiert. Das Gebäude selbst
 * ist die Rückmeldung.» Einladend wird der Bildschirm durch das, was er
 * zeigt: eine Tür in einer Landschaft, dieselbe wie an den Räumen dahinter.
 * Bis V130 stand hier ein angefangener Turm.
 *
 * DER SCAMPY IST KEINE AUSNAHME DAVON, sondern etwas anderes: die Marke
 * neben dem Namen, klein, stumm, in keiner Runde. OPEN_QUESTIONS.md V17
 * hält die angeordnete Abweichung fest, tests/test_logo.py hält sie eng.
 */
.willkommen {
  text-align: center;
  padding: 10px 0 4px;
}
.willkommen svg {
  display: block;
  width: 132px;
  height: auto;
  margin: 0 auto 14px;
}
/*
 * DIE TÜR DER ANMELDUNG STEHT IN EINER LANDSCHAFT (V99, seit V130 eine Tür
 * statt eines Turms). Derselbe Himmel und dieselben Hügel wie in den Runden,
 * in einem kleinen Kasten.
 *
 * Die Kulissen liegen dahinter und tragen ihre eigene Grösse - die Regel
 * darüber gilt der Tür und würde sie sonst auf 132 px blasen.
 */
.willkommenbild {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky-low) 0%, var(--sky-high) 62%, var(--sky-high) 100%);
  border: 1.5px solid var(--ink);
  border-radius: var(--r);
  padding: 10px 0 6px;
  margin-bottom: 14px;
}
.willkommenbild .kulisse {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 0;
  /* Ohne Abstand: ``.willkommen svg`` gibt jedem Bild darin 14 px nach
     unten, und die Hügel schwebten damit über einem hellen Streifen am
     Boden des Kastens - bis V127 auf jedem Bildschirm. */
  margin: 0;
}
.willkommenbild [data-kulisse="himmel"] {
  top: 0;
  height: 62px;
}
.willkommenbild [data-kulisse="huegel"] {
  bottom: 0;
  height: 38px;
}
.willkommenbild .anfang {
  position: relative;
  z-index: 1;
  margin: 0 auto;
}
/* Zeichen und Name als ein Block. Das Zeichen behält seine eigene Grösse -
   die Regel darüber gilt der Tür und würde es sonst auf 132px blasen. */
.zeichnung {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 6px;
}
.zeichnung .zeichen {
  display: block;
  flex: none;
  width: 40px;
  height: 40px;
  margin: 0;
}
.marke {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0;
}
.willkommen p {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 28ch;
  margin: 0 auto;
}

/* Ein Schritt der Anmeldung: Beschriftung, Erklärung, Feld, Knopf. Die
   Abstände stehen hier und nicht als Leerzeile in der Vorlage. */
.schritt {
  margin-top: 22px;
}
.schritt label {
  display: block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.schritt .hinweis {
  margin-bottom: 10px;
}
.schritt .eingabe {
  margin-bottom: 12px;
}
.schritt + .schritt {
  margin-top: 12px;
}

/* ---------- Navigation ------------------------------------------------- */
/* Unten dasselbe wie oben (V74.5): Der Strich, mit dem man eine Web-App
   schliesst, liegt sonst über den Tippzielen der Navigation. */
.nav {
  display: flex;
  border-top: 1.5px solid var(--ink);
  background: var(--plaster-hi);
  flex-shrink: 0;
  padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px)
    env(safe-area-inset-left, 0px);
}
.nav a {
  flex: 1;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 11px 4px 13px;
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-size: 11.5px;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border-right: 1px solid var(--hairline);
  text-decoration: none;
}
.nav a:last-child {
  border-right: 0;
}
.nav a.on {
  color: var(--ink);
  background: var(--chalk);
}
.nav a:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: -3px;
}
.nav svg {
  width: 21px;
  height: 21px;
}

/* ---------- nur für Hilfsmittel --------------------------------------- */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Bewegung ---------------------------------------------------- */
/*
 * WIE VIEL BEWEGUNG, UND WARUM NICHT MEHR.
 *
 * ``docs/03`` Abschnitt 2 begründet die Zurückhaltung, und die Begründung
 * trägt: «Der übliche Fehler ist eine Kinderästhetik mit Kulleraugen, die
 * eine Vierzehnjährige sofort peinlich findet und wegwischt.» Und weiter:
 * «Kein Maskottchen. Keine sprechende Figur, die kommentiert. Das Gebäude
 * selbst ist die Rückmeldung.»
 *
 * Einladend wird es darum über MATERIAL und BEWEGUNG, nicht über Figuren:
 * Räume mit Türen, Stufen mit Gewicht, eine fertige wächst sichtbar heraus.
 * Bis V130 standen dafür Türme im Licht. Das trägt vom Achtjährigen bis zur
 * Fünfzehnjährigen - Bausysteme sind laut docs/03 genau darum das gewählte
 * Genre.
 *
 * ``docs/03`` Abschnitt 3: «Ein einziger mutiger Moment: wenn eine Stufe
 * fertig wird, wächst das Stockwerk sichtbar aus dem Gerüst heraus und der
 * Turm wird höher. Das ist die Belohnung.» EIN Moment - alles andere bleibt
 * ruhig. Kein Einblenden beim Scrollen, kein Hüpfen, kein Konfetti. Seit
 * V130 ohne Turm: Es wächst das Feld der fertigen Stufe im Band
 * (``.stockwerkband .neu``).
 */
@media (prefers-reduced-motion: no-preference) {
  /* Die kleinste Bewegung im Interface: eine Antwort auf eine Berührung. */
  .room,
  .tower,
  .btn,
  .karte-knopf,
  .memory-karte {
    transition:
      transform 0.12s ease,
      background-color 0.12s ease;
  }
  .room:active,
  .tower:active,
  .btn:active,
  .karte-knopf:active {
    transform: translateY(1px);
  }
  /* DIE FERTIGE STUFE WÄCHST (V130): einmal, von unten, wenn die Karte
     dasteht - der eine Moment. Gedehnt wird die Gruppe um ihre eigene
     Fläche (``fill-box``), sonst um die Ecke des ganzen Bands. */
  .stockwerkband .neu {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: stufe-waechst 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s both;
  }
  /* DAS UMDREHEN EINER KARTE (V104): eine Vierteldrehung, 180 ms, und sie
     antwortet auf einen Fingertipp - genau die Bewegung, die docs/03
     Abschnitt 3 erlaubt. Kein Hüpfen, kein Nachwippen, und sie läuft einmal:
     Eine Karte, die sich im Takt weiterdreht, wäre Dekoration. */
  .memory-karte.offen:not(.gefunden) {
    animation: karte-auf 0.18s ease-out;
  }

  /* DIE TÜR GEHT AUF - als Antwort auf eine Handlung, nicht von selbst
     (``docs/03`` Abschnitt 3). 140 ms, dieselbe Grössenordnung wie der
     Bildschirmwechsel; sie schwingt einmal und bleibt, solange der Finger
     liegt. Kein Dauerlauf, kein Hüpfen, kein zweiter mutiger Moment - der
     eine bleibt das wachsende Stockwerk. */
  .room::after {
    transition: transform 0.14s ease-out;
  }
  .room:active::after {
    transform: perspective(70px) rotateY(-42deg);
  }

  /* DER EINE ORCHESTRIERTE MOMENT steht seit V130 weiter oben: Das Feld der
     fertigen Stufe wächst im Band (``.stockwerkband .neu``). Bis dahin wuchs
     ein Stockwerk auf dem Canvas des Turms, und davor gab es hier eine Regel
     ``.waechst`` aus der Zeit des SVG-Turms, die kein Element mehr traf
     (V30, U15). */

  /* Der Bildschirmwechsel. Kein Wischen, kein Schieben - der neue Inhalt
     steht einfach da und fängt sich. 140 ms, damit es nicht wie Warten
     wirkt. */
  .body > .pad {
    animation: eintreten 0.14s ease-out 1;
  }
  @keyframes eintreten {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  /* Die gewählte Antwort setzt sich, statt umzuspringen. */
  .paar-chip,
  .btn.gewaehlt {
    transition:
      background-color 0.18s ease,
      color 0.18s ease;
  }
}

/*
 * DER SCAMPY BEWEGT SICH (V39), angeordnet am 25.09.2026: «scampy logo
 * öfters irgendwo einblenden mit animationen». Eine angeordnete Abweichung
 * von ``docs/03`` Abschnitt 3, wo Bewegung nur als Antwort auf eine Handlung
 * vorkommt - und deshalb so ruhig wie möglich: Er schwebt und die Fühler
 * wippen; bis V130 schwamm er dazu in der Werkstatt am Fuss der Türme.
 * **Kein Hüpfen**, das verbietet dieselbe Stelle ausdrücklich, und der eine
 * mutige Moment bleibt die fertige Stufe. Nichts davon hängt an einer
 * Antwort (R6), und in der geschlossenen Runde steht er still.
 */
@media (prefers-reduced-motion: no-preference) {
  .zeichen .fuehler {
    transform-box: fill-box;
    transform-origin: 0% 100%;
    animation: fuehler-wippen 3.6s ease-in-out infinite;
  }
  .zeichen .fuehler + .fuehler {
    animation-delay: -1.2s;
  }
  .kopf .zeichen,
  .willkommen .zeichen,
  .leer-zeichen .zeichen,
  .ende-zeichen .zeichen {
    animation: zeichen-schweben 6s ease-in-out infinite;
  }
  /* DIE BEWEGUNG IST ZUFÄLLIG (V74.4): eine von sechs, mit eigenem Takt und
     Einsatz, gezogen beim Zeichnen der Seite (``app/web/logo.py``). Alle
     bleiben bei wenigen Pixeln und Grad - kein Hüpfen. */
  .zeichen.bewegung-schweben {
    animation: zeichen-schweben var(--takt, 6s) ease-in-out var(--einsatz, 0s) infinite;
  }
  .zeichen.bewegung-wiegen {
    animation: zeichen-wiegen var(--takt, 6s) ease-in-out var(--einsatz, 0s) infinite;
  }
  .zeichen.bewegung-kreisen {
    animation: zeichen-kreisen var(--takt, 6s) linear var(--einsatz, 0s) infinite;
  }
  .zeichen.bewegung-atmen {
    animation: zeichen-atmen var(--takt, 6s) ease-in-out var(--einsatz, 0s) infinite;
  }
  .zeichen.bewegung-nicken {
    animation: zeichen-nicken var(--takt, 6s) ease-in-out var(--einsatz, 0s) infinite;
  }
  .zeichen.bewegung-treiben {
    animation: zeichen-treiben var(--takt, 6s) ease-in-out var(--einsatz, 0s) infinite;
  }
  .frame.quiet .zeichen,
  .frame.quiet .zeichen .fuehler {
    animation: none;
  }
}

@keyframes fuehler-wippen {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-7deg);
  }
}

@keyframes zeichen-schweben {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-2px) rotate(-3deg);
  }
}

@keyframes zeichen-wiegen {
  0%,
  100% {
    transform: rotate(-6deg);
  }
  50% {
    transform: rotate(6deg);
  }
}

@keyframes zeichen-kreisen {
  0%,
  100% {
    transform: translate(2px, 0);
  }
  25% {
    transform: translate(0, 2px);
  }
  50% {
    transform: translate(-2px, 0);
  }
  75% {
    transform: translate(0, -2px);
  }
}

@keyframes zeichen-atmen {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

@keyframes zeichen-nicken {
  0%,
  60%,
  100% {
    transform: rotate(0deg);
  }
  72% {
    transform: rotate(-10deg);
  }
  84% {
    transform: rotate(3deg);
  }
}

@keyframes zeichen-treiben {
  0%,
  100% {
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    transform: translateX(3px) rotate(2deg);
  }
}

@keyframes stufe-waechst {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

/* Das Beispiel rechnet sich vor (V42): Schritt um Schritt, als Antwort auf
   den Knopf. Bei reduzierter Bewegung steht alles sofort da - dieser Block
   greift dann gar nicht. */
@media (prefers-reduced-motion: no-preference) {
  .beispiel:not([hidden]) .beispiel-schritte li,
  .beispiel:not([hidden]) .beispiel-ergebnis {
    opacity: 0;
    animation: beispiel-erscheinen 0.4s ease-out forwards;
    animation-delay: calc(var(--nr, 0) * 0.9s + 0.3s);
  }
}

@keyframes beispiel-erscheinen {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Wer weniger Bewegung will, bekommt keine. Ausnahmslos - auch die
   fertige Stufe, die im Band wächst, auch der Scampy. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*
 * ZWEI TIPPZIELE IN EINER KACHEL (OPEN_QUESTIONS V6.1). Ein Raum, an dem
 * gerade gebaut wird, trägt unter dem gewöhnlichen Weg einen zweiten:
 * «Kannst du das schon?» führt in eine geschlossene Runde auf dieses eine
 * Thema. Beide über 44 px hoch (docs/03 Abschnitt 6), der obere bleibt der
 * grössere - er ist der gewöhnliche Weg.
 */
.raumpaar {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.raumpaar .room {
  flex: 1;
}
.raumcheck {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 12px;
  border: 1.5px dashed var(--ink);
  border-radius: 12px;
  background: var(--plaster-hi);
  color: var(--ink);
  font-size: 12px;
  text-align: center;
  text-decoration: none;
}
.raumcheck:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}

/* ---------- die Runde: Knöpfe, Tipp, Bild --------------------------------
 *
 * Das Mockup zeichnet den Runden-Bildschirm mit einem Knopf; gebaut sind
 * zwei (Prüfen und Tipp) und darunter der Weg weiter. Beide über 44 px
 * hoch (docs/03 Abschnitt 6), der Prüfen-Knopf bleibt der grössere - er
 * ist die Haupthandlung.
 */
.knoepfe {
  display: flex;
  gap: 9px;
  margin-top: 16px;
}
.knoepfe .btn[type="submit"] {
  flex: 1;
}

/*
 * DAS BILD ZUR AUFGABE - der Teil der Frage, der nicht im Text steht.
 * Ein Rahmen für jede Bildart, damit es als EIN Ding liest.
 */
.aufgabenbild {
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: var(--plaster);
  padding: 14px 12px;
  margin-bottom: 18px;
}
/* Ein einzelnes grosses Zeichen und ein Lesetext (V35). */
.zeichen {
  margin: 0;
  font-size: 64px;
  line-height: 1.1;
  text-align: center;
}
.lesetext p {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.45;
}
.lesetext p:last-child {
  margin-bottom: 0;
}
.reihen {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
/* EINE REIHE BLEIBT EINE ZEILE (V157). Gefragt wird nach der oberen und der
   unteren Reihe; bräche eine um, sähe das Kind drei. Bis V157 brach sie mit
   `wrap` erst ab zehn Dingen um, und es kommen höchstens neun - seit die
   Dinge 26 px messen, passten neun bei 360 px nicht mehr. Jetzt werden sie
   kleiner, wo der Platz nicht reicht, statt umzubrechen. */
.reihe {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 6px;
}
/* DIE DINGE ZUM ZÄHLEN (V157): gezeichnet als das, was die Frage nennt -
   Punkt, Stern, Blume oder Ball, sonst ein Kreis wie bis dahin
   (`app/web/bildmarkup._ding`). Bis dahin lagen für jedes Ding dieselben
   gelben Kreise da. Die Farben sagen nichts: kein Grün und kein Ziegelrot,
   weil die beiden das Urteil sind (R6, R9); Gelb darf auch im Check stehen,
   weil es hier der Gegenstand der Aufgabe ist (V8.3). Still, ohne Bewegung. */
/* Beide Reihen tragen dieselbe Grösse, auch wo der Platz knapp ist: Sie
   richtet sich nach neun Dingen, der längsten Reihe, die die Vorlage legt -
   nicht nach der eigenen Länge, sonst stünden oben grosse und unten kleine
   Dinge da. Darüber hinaus wird geschrumpft, nicht umgebrochen. */
.reihe .ding {
  flex: 0 1 auto;
  width: min(26px, calc((100% - 8 * 6px) / 9));
  min-width: 0;
  height: auto;
  aspect-ratio: 1 / 1;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.ding .koerper {
  fill: var(--chalk);
}
.ding.punkt .koerper {
  fill: var(--ink);
}
.ding.blume .blatt {
  fill: var(--bluete);
}
.ding.blume .ohne,
.ding.ball .streifen,
.ding.ball .glanz {
  stroke: none;
}
.ding.blume .mitte {
  fill: var(--chalk);
}
.ding.ball .koerper {
  fill: var(--cobalt);
}
.ding.ball .streifen,
.ding.ball .glanz {
  fill: #fff;
}
.ding.ball .rand {
  fill: none;
}
.figur {
  display: block;
  width: 132px;
  height: 132px;
  margin: 0 auto;
  fill: var(--chalk);
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.strahlreihe {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px;
  overflow-x: auto;
}
.strahlreihe .marke {
  display: flex;
  flex: 1;
  min-width: 26px;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.strahlreihe .marke b {
  display: flex;
  height: 30px;
  width: 100%;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  background: var(--plaster-hi);
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 14px;
}
.strahlreihe .marke.leer b {
  border-style: dashed;
}
.strahlreihe .marke i {
  width: 1px;
  height: 7px;
  background: var(--ink);
}
.strahl {
  position: relative;
  padding: 22px 4px 4px;
}
.strahl .zeiger {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  color: var(--cobalt);
}
.strahl .linie {
  position: relative;
  display: block;
  height: 26px;
  border-bottom: 1px solid var(--ink);
}
.strahl .linie i {
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 7px;
  background: var(--ink);
  transform: translateX(-50%);
}
.strahl .linie i.rand {
  height: 11px;
}
.strahl .enden {
  display: flex;
  justify-content: space-between;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 12px;
  color: var(--ink-soft);
}
.saeulen {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
}
.saeulen .saeule {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.saeulen .saeule i {
  width: 100%;
  border: 1.5px solid var(--ink);
  border-radius: 3px 3px 0 0;
  background: var(--cobalt);
}
.saeulen .saeule b {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 12px;
}
.saeulen .saeule small {
  font-size: 11px;
  color: var(--ink-soft);
}
.kartenbild {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}
.kartenbild > span {
  display: flex;
  min-height: 44px;
  min-width: 52px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: var(--plaster-hi);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
}
.zuordnungsbild {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.zuordnungsbild .kartenbild {
  flex-direction: column;
  flex: 1;
}
/* Ein Kärtchen: so viele Zehnerstangen, so viele Einerwürfel. */
.kaertchen {
  display: flex;
  align-items: flex-end;
  gap: 5px;
}
.kaertchen .zehner {
  display: block;
  width: 7px;
  height: 30px;
  background: var(--cobalt);
}
.kaertchen .einerfeld {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  max-width: 34px;
}
.kaertchen .einer {
  display: block;
  width: 7px;
  height: 7px;
  border: 1.2px solid var(--ink);
  background: var(--chalk);
}

/* ---------- Der Adminbereich ------------------------------------------ */
/*
 * DIESELBEN MARKEN, EINE ANDERE ANORDNUNG. Die Farben, die Kontur und die
 * zwei Schriftfamilien aus docs/03 Abschnitt 3 bleiben - der Adminbereich
 * soll erkennbar zu scampy gehören. Was nicht bleibt, ist das Telefon:
 * Hier stehen Tabellen mit sechs Spalten, und die brauchen Breite.
 *
 * WARUM NICHT IN EINER EIGENEN DATEI: Zwei Stilblätter heissen zwei Orte,
 * an denen dieselbe Farbe steht - und auseinander läuft das, was niemand
 * liest. Der Präfix ``sca-`` reicht, um sie auseinanderzuhalten.
 *
 * SEIT V135 IN DER HANDSCHRIFT DES PRODUKTS (angeordnet am 03.10.2026:
 * «admin bereich ausbauen. schöner, …»): Karten mit Kontur und geradem
 * Schatten, Knöpfe mit einer Kante aus Tinte, die sich drücken lassen (V127),
 * eine Navigation, die den offenen Bereich zeigt, Etiketten für Zustände und
 * Stufen, eine Leiste zum Filtern über jeder Liste. Ein Etikett nennt einen
 * Zustand der Anwendung und nie einen Menschen (R9).
 *
 * Der Adminbereich steht ausserhalb des V1-Umfangs (OPEN_QUESTIONS V11).
 */
body.sca {
  display: block;
  padding: 0;
  min-height: 100%;
  background: var(--plaster);
}
.sca-kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px 18px;
  flex-wrap: wrap;
  padding: 8px 22px;
  background: var(--flaeche);
  border-bottom: 1.5px solid var(--ink);
  box-shadow: 0 3px 0 rgba(22, 35, 59, 0.08);
}
.sca-marke {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
/* Ein Stück Kreide vor dem Namen: die Farbe der Marke, ohne Bild. */
.sca-marke::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 5px;
  border: 1.5px solid var(--ink);
  background: var(--chalk);
}
.sca-nav {
  display: flex;
  gap: 4px;
  flex: 1;
  flex-wrap: wrap;
}
.sca-nav a,
.sca-raus {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 13px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--ink-soft);
  text-decoration: none;
}
.sca-nav a:hover,
.sca-raus:hover {
  color: var(--ink);
  background: var(--plaster);
}
.sca-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 700;
  background: var(--chalk);
  border-color: var(--ink);
}
.sca-raus {
  border-color: var(--hairline);
}
.sca-nav a:focus-visible,
.sca-raus:focus-visible,
.sca-marke:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.sca-inhalt {
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 22px 48px;
}
.sca-seitenkopf {
  margin-bottom: 14px;
}
.sca-h1 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.sca-h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 16px;
  font-weight: 700;
  margin: 26px 0 8px;
}
/* Die Zahl neben einer Überschrift: wie viele, und bei einem Filter, von wie
   vielen. */
.sca-zaehler {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 10px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--plaster-hi);
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink-soft);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.sca-leise {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 8px;
}
.sca-zurueck {
  font-size: 13px;
  margin-bottom: 12px;
}
.sca-zurueck a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 0 var(--ink);
}
/* Wenn nichts dasteht: ein ruhiger Kasten statt einer leeren Stelle. */
.sca-leer {
  padding: 22px 18px;
  margin: 6px 0 16px;
  border: 1.5px dashed var(--track-soft);
  border-radius: var(--r-gross);
  background: var(--flaeche);
  color: var(--ink-soft);
  font-size: 14px;
  text-align: center;
}

/* Eine Karte: Kontur, gerader Schatten, helle Fläche - wie im Produkt. */
.sca-karte {
  margin: 0 0 16px;
  padding: 16px 18px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-gross);
  background: var(--flaeche);
  box-shadow: var(--schatten);
}
.sca-karte > .sca-h2:first-child {
  margin-top: 0;
}
.sca-kartenkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.sca-kartenkopf .sca-h2,
.sca-kartenkopf .sca-leise {
  margin: 0;
}

/* Die Kacheln der Übersicht. Eine Kachel, hinter der etwas wartet, trägt
   Pflaume: «hier ist etwas zu tun», nicht «hier stimmt etwas nicht». */
.sca-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin: 8px 0 24px;
}
.sca-kachel {
  display: block;
  padding: 14px 16px 16px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-gross);
  background: var(--flaeche);
  box-shadow: 0 3px 0 var(--ink);
  color: var(--ink);
  text-decoration: none;
}
.sca-kachel b {
  display: block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 30px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.sca-kachel span {
  font-size: 12.5px;
  color: var(--ink-soft);
}
.sca-kachel.ist-offen {
  border-color: var(--plum);
  background: var(--plum-hell);
  box-shadow: 0 3px 0 var(--plum);
}
.sca-kachel.ist-offen b {
  color: var(--plum);
}
.sca-kachel:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ink);
}
.sca-kachel:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}

/* Die Leiste zum Filtern über einer Liste (V135). Jedes Feld mit seinem
   Namen darüber; die Knöpfe stehen auf der Linie der Felder. */
.sca-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-gross);
  background: var(--flaeche);
  box-shadow: var(--schatten);
}
.sca-feld {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
}
.sca-feld > span {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.sca-feld-breit {
  flex: 1 1 260px;
}
.sca-feld select,
.sca-feld input {
  min-height: 44px;
  padding: 9px 12px;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  background: var(--plaster-hi);
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-size: 14px;
  color: var(--ink);
}
.sca-feld select:focus-visible,
.sca-feld input:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 1px;
}
.sca-filterknoepfe {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
/* Die Zustände der Kontoliste als Reiter: Wege, die in der Adresse stehen. */
.sca-reiter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 12px;
}
.sca-reiter a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--hairline);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--ink);
  font-size: 13.5px;
  text-decoration: none;
}
.sca-reiter a[aria-current="page"] {
  border-color: var(--ink);
  background: var(--chalk);
  font-weight: 700;
}

/* Tabellen. Sie sind der Kern dieses Bereichs. Im Rahmen scrollen sie zur
   Seite, statt die Seite breiter zu machen. */
.sca-tabellenrahmen {
  overflow-x: auto;
  margin: 0 0 16px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r);
  background: var(--flaeche);
  box-shadow: var(--schatten);
}
.sca-tabelle {
  width: 100%;
  border-collapse: collapse;
  border: 1.5px solid var(--ink);
  background: var(--flaeche);
  font-size: 13.5px;
}
.sca-tabellenrahmen > .sca-tabelle {
  border: 0;
}
.sca-tabelle th,
.sca-tabelle td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.sca-tabelle th {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 12.5px;
  background: var(--plaster-hi);
  border-bottom: 1.5px solid var(--ink);
  white-space: nowrap;
}
.sca-tabelle tbody tr:nth-child(even) td {
  background: rgba(22, 35, 59, 0.025);
}
.sca-tabelle tbody tr:hover td {
  background: var(--sky-high);
}
.sca-tabelle tr:last-child td {
  border-bottom: 0;
}
.sca-zahl {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.sca-zeit {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sca-klein {
  font-size: 12px;
  color: var(--ink-soft);
  word-break: break-word;
}

/* Ein Etikett nennt einen Zustand: an, aus, leak, die Stufe einer Zeile. */
.sca-etikett {
  display: inline-flex;
  align-items: center;
  padding: 1px 9px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--plaster-hi);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.sca-etikett.an {
  border-color: var(--moss);
  background: var(--moss-hell);
  color: var(--moss);
}
.sca-etikett.aus,
.sca-etikett.stufe-debug {
  color: var(--ink-soft);
}
.sca-etikett.leak {
  border-color: var(--plum);
  background: var(--plum-hell);
  color: var(--plum);
}
.sca-etikett.stufe-info {
  border-color: var(--ton-sprachen-tief);
  background: var(--ton-sprachen);
  color: var(--ton-sprachen-tief);
}
.sca-etikett.stufe-warning {
  border-color: var(--ton-rechnen-tief);
  background: var(--ton-rechnen);
  color: var(--ton-rechnen-tief);
}
.sca-etikett.stufe-error,
.sca-etikett.stufe-critical {
  border-color: var(--brick);
  background: var(--brick-hell);
  color: var(--brick);
}

.sca-liste {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
}
/* Ein Eintrag fliesst wie ein Satz und bricht auch so um - als Flexkasten
   zerfiel er auf einem schmalen Schirm in seine Stücke (V135). */
.sca-liste li {
  line-height: 1.5;
}
.sca-liste li > .sca-punkt {
  margin-right: 8px;
  vertical-align: -1px;
}

/* Knöpfe. Dieselbe Untergrenze wie im Produkt: 44 px - und seit V135
   dieselbe Kante aus Tinte, auf die sie beim Drücken sinken (V127). */
.sca-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 9px 14px;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  background: var(--chalk);
  box-shadow: 0 2px 0 var(--ink);
  color: var(--ink);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none;
  cursor: pointer;
}
.sca-knopf:active:not([disabled]) {
  transform: translateY(2px);
  box-shadow: none;
}
.sca-knopf:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.sca-knopf.still {
  background: var(--flaeche);
}
/* Das Löschen ist endgültig, also sieht es auch so aus. */
.sca-knopf.gefahr {
  background: var(--plum);
  border-color: var(--plum);
  color: #fff;
}
/* Kopiert: einen Moment lang grün, dann wieder wie vorher (scadmin.js). */
.sca-knopf.kopiert {
  border-color: var(--moss);
  background: var(--moss-hell);
  box-shadow: 0 2px 0 var(--moss);
  color: var(--moss);
}
.sca-knoepfe {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sca-leiste {
  margin: 0 0 10px;
}

.sca-formular {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 460px;
}
.sca-formular label {
  font-size: 13px;
  font-weight: 700;
}
.sca-formular input,
.sca-formular textarea,
.sca-zeile input,
.sca-zeile select {
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  background: var(--plaster-hi);
  padding: 10px 12px;
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-size: 14px;
  color: var(--ink);
  min-height: 44px;
}
.sca-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0;
  font-size: 13.5px;
}
.sca-schalter {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sca-schalter form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 13.5px;
}
.sca-schalter form:last-child {
  border-bottom: 0;
}
.sca-schaltername {
  flex: 1 1 220px;
}
.sca-punkt {
  width: 10px;
  height: 10px;
  border-radius: 99px;
  border: 1.5px solid var(--ink);
  display: inline-block;
  flex-shrink: 0;
}
.sca-punkt.an {
  background: var(--moss);
}
.sca-punkt.aus {
  background: transparent;
}

.sca-expr {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin: 6px 0 12px;
  overflow-wrap: break-word;
}
.sca-code {
  font-size: 12.5px;
  background: var(--plaster-hi);
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  padding: 10px;
  overflow-x: auto;
}
/* Ein Eintrag im Fehlerprotokoll (V36) oder im Feedback (V40) - seit V135
   eine Karte -, und sein Text zum Kopieren. Das Feld ist nur lesbar und in
   Festbreite: ein Verlauf ist Code, keine Prosa. */
.sca-fehlereintrag .sca-h2 {
  margin: 0;
}
.sca-kopie {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 4px 0 8px;
  font-family: ui-monospace, monospace;
  font-size: 12.5px;
  background: var(--plaster-hi);
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  padding: 10px;
  color: var(--ink);
  resize: vertical;
}
/* «Als Text»: dieselbe Liste zum Markieren, aufgeklappt nur auf Wunsch. */
.sca-alstext {
  margin: 4px 0 10px;
}
.sca-alstext > summary {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
}
/* Der Text eines Feedbacks (V40): so, wie er geschrieben wurde, mit seinen
   Zeilenumbrüchen. */
.sca-feedbacktext {
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.5;
  margin: 6px 0 8px;
}
.sca-schritte {
  font-size: 13.5px;
  padding-left: 20px;
  line-height: 1.6;
}
/* Ein Hinweis, der etwas verlangt - nicht ein Vorwurf an jemanden (R9). */
.sca-warnung,
.sca-fehler {
  font-size: 13px;
  border: 1.5px solid var(--plum);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  color: var(--ink);
  background: var(--plum-hell);
}
/* Eine Rückmeldung nach einer Handlung im Adminbereich - gebaut wie der
   Kasten für Fehler, nur mit dem neutralen Rand. */
.sca-hinweis {
  font-size: 13px;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  color: var(--ink);
  background: var(--flaeche);
}
.sca-marke-warn {
  font-size: 12.5px;
  color: var(--plum);
}
.sca-fuss {
  border-top: 1px solid var(--hairline);
  padding: 16px 22px 28px;
  font-size: 12px;
  color: var(--ink-soft);
  max-width: 1180px;
  margin: 0 auto;
}
/* Auf einem schmalen Schirm: die Navigation in einer eigenen Zeile, die zur
   Seite scrollt, statt neben der Marke eine Säule zu bilden - und jedes Feld
   einer Filterleiste über die ganze Breite. */
@media (max-width: 760px) {
  .sca-kopf {
    position: static;
    padding: 6px 14px;
  }
  .sca-nav {
    order: 3;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .sca-nav a {
    flex: none;
  }
  .sca-raus {
    margin-left: auto;
  }
  .sca-inhalt {
    padding: 18px 14px 40px;
  }
  .sca-feld,
  .sca-feld-breit {
    flex: 1 1 100%;
  }
}

/* ---------- Die Zeichen der Fächer ------------------------------------ */
/*
 * Eines je Fach, angeordnet am 26.09.2026: «jedes fach soll ein
 * ansprechendes logo haben». Gezeichnet wird in app/web/fachzeichen.py -
 * hier steht nur, wo es sitzt. Die Grösse trägt das SVG selbst; diese
 * Regeln sorgen dafür, dass es in einer Zeile nicht zusammengedrückt wird
 * und keinen Abstand unter der Grundlinie mitbringt.
 *
 * KEINE BEWEGUNG. Das Zeichen ist Schmuck neben dem Namen und antwortet auf
 * nichts - docs/03 Abschnitt 3 lässt Bewegung nur als Antwort auf eine
 * Handlung zu. Der Scampy ist die angeordnete Ausnahme (V39), dieses
 * Zeichen nicht.
 */
.fachzeichen {
  display: block;
  flex-shrink: 0;
}

/* Im Kopfkasten des Fachs: das Zeichen links neben dem Namen. Die Zeile
   mit der Stufe darunter behält die ganze Breite. */
.fachkopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.fachkopf .fach {
  min-width: 0;
}

/* Im Ausweis: das Zeichen vor Name und Stand - die Zeile bleibt zweiteilig,
   links das Fach, rechts die Stufe. */
.srow-fach {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* Im Kennzeichen der Übung: Es ist höher als die Zeile und ragt in den
   Innenrand der Pille, statt sie höher zu machen. */
.pill .fachzeichen {
  margin: -4px 0 -4px -6px;
}

/* Im Vorschlag der Werkstatt: welches Fach (V75). Seit der Vorschlag das
   Fach wechselt, gehört es dazu - und es ist die Antwort auf «wo?», also
   nicht gedämpft wie der Satz darunter. */
.next .vorschlagsfach {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 700;
  opacity: 1;
}

/* Die Vierteldrehung beim Aufdecken - siehe ``.memory-karte.offen``. */
@keyframes karte-auf {
  from {
    transform: perspective(360px) rotateY(82deg);
  }
  to {
    transform: perspective(360px) rotateY(0);
  }
}

/* ==========================================================================
 * DIE OBERFLÄCHE VOM 03.10.2026 (V127)
 *
 * Angeordnet am 03.10.2026: «scampy muss noch viel ansprechender werden.
 * auf desktop soll es den gesamten Bildschirm nutzen. mehr grafik.
 * verspielter, professioneller.» Dazu: sich von verbreiteten Lernkarten und
 * Lern-Apps anregen lassen, ohne etwas zu übernehmen (CLAUDE.md Abschnitt 2).
 * Übernommen ist nichts: keine Farbe, kein Bild, kein Bauteil und keine
 * Anordnung eines anderen Produkts. Was hier steht, ist aus den eigenen
 * Marken gebaut - Tinte, Kreide, Kobalt, Moos, Pflaume -, und es bleibt bei
 * der Handschrift des Mockups: Kontur in Tinte, dazu jetzt Tiefe.
 *
 * WAS SICH ÄNDERT, IN DREI SCHICHTEN:
 *   1. Der Rahmen füllt jedes Fenster. Ab 1024 px steht die Navigation als
 *      Seitenleiste links, und jeder Bildschirm legt ein eigenes Raster an.
 *   2. Die Bauteile bekommen Tiefe: Knöpfe, die sich drücken lassen, Karten
 *      mit Schatten, grössere Rundungen.
 *   3. Mehr Bild: die Fächerwand mit grossen Zeichen und dem Band der
 *      Stockwerke, die Aufgabe als Lernkarte auf einem Stapel, Flächen mit
 *      ruhigen Farbflecken.
 *
 * WAS BLEIBT, und es ist nicht verhandelbar: Richtig und falsch wiegen
 * gleich (R6, R9), nichts vergleicht (R7), die geschlossene Runde bleibt
 * gedämpft und ohne Gelb (docs/03 Abschnitt 4), jede Bewegung antwortet auf
 * eine Handlung und fällt bei reduzierter Bewegung weg, Tippziele bleiben
 * mindestens 44 px hoch, Schrift bleibt über 4.5:1.
 * ========================================================================== */

/* ---------- Marken, dazu ------------------------------------------------- */
:root {
  /* Die Fläche einer Karte: eine Spur heller als plaster-hi, damit Karten
     auf dem Untergrund stehen statt in ihm. */
  --flaeche: #fbfcf9;
  --r-gross: 20px;
  --r-karte: 16px;
  /* Der Schatten der Handschrift: gerade nach unten, ohne Unschärfe - wie
     ein Stück Karton, das auf dem Tisch liegt. */
  --schatten: 0 4px 0 rgba(22, 35, 59, 0.13);
  --schatten-hoch: 0 7px 0 rgba(22, 35, 59, 0.13);
  /* Die Kante eines Knopfs, der sich drücken lässt. */
  --kante: 0 3px 0 var(--ink);
  --kante-gedrueckt: 0 1px 0 var(--ink);
  --seite: 264px;
}

/* ---------- 1. Der Rahmen füllt jedes Fenster ---------------------------- */
/*
 * BIS V127 STAND HIER AB 640 PX EIN TELEFON AUF DEM TISCH: 412 px breit, mit
 * Kontur und Schatten, und ringsum leere Fläche. Jetzt füllt der Rahmen das
 * Fenster, wie auf dem Telefon - das Mockup zeigt ein Telefon, damit man es
 * ansehen kann, und keine Vorgabe für den Schreibtisch.
 */
@media (min-width: 640px) {
  body {
    padding: 0;
  }
  .frame {
    max-width: none;
    height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}
.frame {
  background: var(--plaster);
}
.top,
.nav {
  background: var(--plaster-hi);
}
.seitenmarke,
.seitenbild {
  display: none;
}

/* Zwischen Telefon und Schreibtisch: eine lesbare Spalte in der Mitte. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .pad {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 28px 36px;
  }
}

/* DER SCHREIBTISCH: Seitenleiste links, Kopf oben, Inhalt im Raster. */
@media (min-width: 1024px) {
  .frame {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .frame.mit-nav {
    grid-template-columns: var(--seite) minmax(0, 1fr);
    grid-template-areas:
      "marke top"
      "nav body";
  }
  .frame.mit-nav > .top {
    grid-area: top;
  }
  .frame.mit-nav > .body {
    grid-area: body;
  }
  .frame.mit-nav > .nav {
    grid-area: nav;
  }

  /* Die Marke oben links: der Scampy und der Name. */
  .seitenmarke {
    grid-area: marke;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: env(safe-area-inset-top, 0px) 24px 0 max(24px, env(safe-area-inset-left, 0px));
    background: var(--plaster-hi);
    border-right: 1.5px solid var(--ink);
    border-bottom: 1px solid var(--hairline);
    color: var(--ink);
    text-decoration: none;
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 800;
    font-size: 27px;
    letter-spacing: -0.035em;
  }
  .seitenmarke:focus-visible {
    outline-offset: -4px;
  }
  /* Der Scampy steht dann bei der Marke - in der Kopfzeile wäre er zweimal.
     Seit V426 bleibt er dort, wo er der Weg zu den Meldungen ist
     (``.kopf-meldungen``, am Ende des Stilblatts). */
  .frame.mit-nav .kopf .zeichen {
    display: none;
  }

  /* Die Navigation als Seitenleiste. */
  .frame.mit-nav > .nav {
    flex-direction: column;
    gap: 8px;
    padding: 18px 16px env(safe-area-inset-bottom, 0px) max(16px, env(safe-area-inset-left, 0px));
    border-top: 0;
    border-right: 1.5px solid var(--ink);
    overflow: hidden;
  }
  .frame.mit-nav > .nav a {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    min-height: 52px;
    padding: 12px 16px;
    border: 1.5px solid transparent;
    border-radius: var(--r-karte);
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: var(--ink);
  }
  .frame.mit-nav > .nav a:last-of-type {
    border-right: 1.5px solid transparent;
  }
  .frame.mit-nav > .nav a:hover {
    background: var(--plaster);
  }
  .frame.mit-nav > .nav a.on {
    background: var(--chalk);
    border-color: var(--ink);
    box-shadow: var(--kante);
  }
  .frame.mit-nav > .nav a:focus-visible {
    outline-offset: 2px;
  }
  .frame.mit-nav > .nav svg {
    width: 24px;
    height: 24px;
  }
  /* Die Werkbank unten in der Leiste: Schmuck, der den Platz füllt, den die
     drei Ziele lassen. */
  .seitenbild {
    display: flex;
    justify-content: center;
    margin-top: auto;
    padding: 24px 0 28px;
    opacity: 0.9;
  }
  /* Die Regel für die Zeichen der Ziele trifft jedes SVG in der Leiste -
     die Werkbank braucht deshalb die genauere. */
  .frame.mit-nav > .nav .seitenbild svg.kulisse {
    width: 150px;
    height: 104px;
  }

  /* Die Kopfzeile: mehr Luft, grösserer Gruss - und derselbe Abstand zu
     dem, was das Gerät selbst belegt, wie auf dem Telefon (V74.5): Ein
     Tablett, das scampy als Web-App öffnet, legt seine Statusleiste auch
     über 1024 px breite Seiten. */
  .top {
    padding: calc(20px + env(safe-area-inset-top, 0px)) max(40px, env(safe-area-inset-right, 0px))
      18px max(40px, env(safe-area-inset-left, 0px));
    align-items: center;
  }
  .hello {
    font-size: 25px;
  }
  .hello span {
    font-size: 14.5px;
  }

  /* Der Inhalt: ein Raster mit Rand, auf einem Untergrund mit ruhigen
     Farbflecken - Kobalt oben rechts, Kreide unten links. Sie stehen still
     und tragen keine Bedeutung. */
  .body {
    background:
      radial-gradient(640px 360px at 100% 0%, rgba(42, 79, 215, 0.07), transparent 70%),
      radial-gradient(560px 320px at 0% 100%, rgba(245, 201, 63, 0.14), transparent 70%),
      var(--plaster);
  }
  .frame.quiet .body {
    background:
      radial-gradient(640px 360px at 100% 0%, rgba(124, 58, 94, 0.08), transparent 70%),
      var(--plaster);
  }
  .pad {
    max-width: 1320px;
    margin: 0 auto;
    padding: 32px 44px 56px;
  }
  h2,
  .sub {
    font-size: 15px;
  }
}

/* ---------- 2. Bauteile mit Tiefe --------------------------------------- */
/*
 * EIN KNOPF, DER SICH DRÜCKEN LÄSST: eine Kante aus Tinte darunter, und beim
 * Drücken sinkt er auf sie. Die Bewegung antwortet auf die Handlung und auf
 * nichts sonst (docs/03 Abschnitt 3). Ein abgeschalteter Knopf hat keine
 * Kante - er lässt sich nicht drücken, also sieht er nicht danach aus.
 */
.btn {
  border-radius: 12px;
  box-shadow: var(--kante);
}
.btn:active:not([disabled]) {
  transform: translateY(2px);
  box-shadow: var(--kante-gedrueckt);
}
.btn[disabled],
.btn[aria-disabled="true"] {
  box-shadow: none;
}
.btn.still {
  background: var(--flaeche);
}
/* Was unter einem Knopf steht, hält Abstand zu seiner Kante - sonst klebt
   der Satz an ihr, und zwei Knöpfe untereinander werden einer. */
.btn + .hinweis,
form + .hinweis {
  margin-top: 10px;
}
.b-zwischen .pad > form + .btn,
.b-zwischen .pad > .btn + .btn,
.b-zwischen .pad > form + form {
  margin-top: 12px;
}
.btn.ghost {
  box-shadow: 0 3px 0 rgba(255, 255, 255, 0.45);
}
@media (hover: hover) {
  .btn:hover:not([disabled]) {
    filter: brightness(1.03);
  }
}

/* Karten: grössere Rundung, gerader Schatten, hellere Fläche. */
.card,
.floorhead,
.regal,
.tower,
.jump,
.geschafft,
.stats,
.willkommenbild,
.beispiel {
  border-radius: var(--r-gross);
}
.card,
.floorhead,
.tower,
.stats,
.geschafft {
  box-shadow: var(--schatten);
}
.card,
.floorhead,
.tower,
.stat {
  background: var(--flaeche);
}
.regal {
  box-shadow: var(--schatten);
}
.room {
  border-radius: var(--r-karte);
  box-shadow: var(--schatten);
}
.room.locked {
  box-shadow: none;
}
.tipp > .blase,
.urteil {
  border-radius: var(--r-karte);
  box-shadow: var(--schatten);
}
.tipp > .blase {
  background: var(--flaeche);
}
.answer,
.eingabe,
.feld-zeile input {
  border-radius: 14px;
  background: var(--flaeche);
}
.aufgabenbild {
  border-radius: var(--r-karte);
}
.pill {
  background: var(--flaeche);
}
.bar {
  height: 9px;
}
.dots i {
  height: 10px;
}

/* DER VORSCHLAG: Kobalt mit drei ruhigen Ringen in der Ecke - Schmuck ohne
   Aussage. Ein Gelb mit Durchsicht wurde auf Kobalt grau; Weiss mit
   Durchsicht bleibt hell. Die Schrift darauf bleibt weiss und weit über
   4.5:1. */
.next {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-gross);
  box-shadow: var(--schatten);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.16) 0 56px, transparent 57px),
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.09) 0 104px, transparent 105px),
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.05) 0 156px, transparent 157px),
    var(--cobalt);
}
.next h2 {
  font-size: 21px;
}

/* ---------- 3. Die Werkstatt -------------------------------------------- */
.faecherwand,
.nur-breit {
  display: none;
}
@media (min-width: 1024px) {
  /* DER VORSCHLAG ALS STREIFEN über die ganze Breite: links, was dran ist,
     rechts die beiden Zeiten. Bis V130 stand darüber die Skyline mit den
     Türmen. Die Karte einer fertigen Stufe steht als eigener Streifen
     davor. */
  .werkstatt-buehne {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    margin-bottom: 34px;
  }
  .werkstatt-buehne .geschafft {
    margin: 0;
    padding: 24px 32px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 32px;
    align-items: center;
  }
  .werkstatt-buehne .geschafft > :not(.btn) {
    grid-column: 1;
  }
  .werkstatt-buehne .geschafft > .btn {
    grid-column: 2;
    grid-row: 1 / span 4;
  }
  .werkstatt-buehne .geschafft .stockwerkband {
    max-width: 420px;
  }
  .werkstatt-buehne .next {
    margin: 0;
    padding: 26px 32px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 32px;
    align-items: center;
  }
  .werkstatt-buehne .next > :not(.row) {
    grid-column: 1;
  }
  .werkstatt-buehne .next > .row {
    grid-column: 2;
    grid-row: 1 / span 4;
    margin: 0;
  }
  .werkstatt-buehne .next h2 {
    font-size: 30px;
    letter-spacing: -0.03em;
    margin: 10px 0 6px;
  }
  .werkstatt-buehne .next p {
    font-size: 15px;
  }
  .werkstatt-buehne .next .btn {
    font-size: 16px;
    padding: 13px 22px;
  }
  .b-werkstatt h2.sub {
    font-size: 22px;
    color: var(--ink);
    margin-bottom: 4px;
  }
  .b-werkstatt h2.sub + .hinweis {
    margin-bottom: 18px;
  }

  /* Unter 1024 px die Regale zum Aufklappen, darüber die Wand. */
  .regale,
  .nur-schmal {
    display: none;
  }
  .nur-breit {
    display: block;
  }
  .faecherwand {
    display: block;
    columns: 3 320px;
    column-gap: 22px;
  }
}
.wandregal {
  --ton: var(--ton-uebrig);
  --ton-tief: var(--ton-uebrig-tief);
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  margin-bottom: 22px;
  padding: 16px 16px 18px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-gross);
  background: var(--ton);
  box-shadow: var(--schatten);
}
.wandregal.ton-sprachen {
  --ton: var(--ton-sprachen);
  --ton-tief: var(--ton-sprachen-tief);
}
.wandregal.ton-rechnen {
  --ton: var(--ton-rechnen);
  --ton-tief: var(--ton-rechnen-tief);
}
.wandregal.ton-forschen {
  --ton: var(--ton-forschen);
  --ton-tief: var(--ton-forschen-tief);
}
.wandregal.ton-welt {
  --ton: var(--ton-welt);
  --ton-tief: var(--ton-welt-tief);
}
.wandregal.ton-machen {
  --ton: var(--ton-machen);
  --ton-tief: var(--ton-machen-tief);
}
.wandregal-kopf {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ton-tief);
  margin: 0 4px 12px;
}
.fachkacheln {
  list-style: none;
  display: grid;
  gap: 10px;
}
.fachkachel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  row-gap: 10px;
  padding: 14px 16px 14px 14px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-karte);
  background: var(--flaeche);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--schatten);
}
.fachkachel:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.fachkachel-zeichen {
  display: flex;
}
.fachkachel-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.fachkachel-text strong {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 18px;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.fachkachel-text small {
  font-size: 13px;
  color: var(--ink-soft);
}
.fachkachel .stockwerkband {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: 24px;
}

/* ---------- 4. Das Fach --------------------------------------------------- */
/*
 * ZWEI ANORDNUNGEN, NACH DER BREITE. Bis 1280 px stehen Kopfkasten und
 * Sprung-Check oben nebeneinander und der Grundriss darunter über die ganze
 * Breite - rechts neben einer Spalte von 400 px blieb für die Räume nur
 * noch eine schmale, und zwölf Räume standen einzeln untereinander. Ab
 * 1280 px ist rechts Platz für zwei und drei Räume nebeneinander, und der
 * Grundriss steht dort, neben dem, was ihn erklärt.
 */
@media (min-width: 1024px) {
  .b-fach .pad {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
  }
  .b-fach .pad > * {
    grid-column: 1 / -1;
  }
  .b-fach .pad > .steuer {
    grid-row: 1;
  }
  .b-fach .pad > .floorhead {
    grid-column: 1;
    grid-row: 2;
    align-self: stretch;
  }
  .b-fach .pad > .jump {
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
  }
  .b-fach .pad > .grundriss {
    grid-row: 3;
    margin-top: 20px;
  }
}
@media (min-width: 1280px) {
  .b-fach .pad {
    grid-template-columns: minmax(330px, 400px) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: 32px;
  }
  .b-fach .pad > .floorhead,
  .b-fach .pad > .jump {
    grid-column: 1;
    align-self: start;
  }
  .b-fach .pad > .steuer {
    grid-column: 1;
  }
  .b-fach .pad > .jump {
    grid-row: 3;
  }
  .b-fach .pad > .grundriss {
    grid-column: 2;
    grid-row: 1 / span 4;
    margin-top: 0;
  }
}
@media (min-width: 1024px) {
  .b-fach .floorhead {
    padding: 22px 22px 20px;
  }
  .b-fach .floorhead .fach,
  .b-fach .floorhead .lvl {
    font-size: 30px;
  }
  .b-fach .floorhead .stockwerkband {
    height: 34px;
    margin: 12px 0 6px;
  }
  .b-fach .jump {
    margin-top: 0;
    padding: 20px;
    box-shadow: var(--schatten);
    background: var(--flaeche);
  }
  .grundriss h2.sub {
    font-size: 22px;
    color: var(--ink);
  }
  .grundriss > .hinweis {
    margin-bottom: 16px;
  }
  .rooms {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
  }
  .room {
    min-height: 120px;
    padding: 16px 16px 14px;
  }
  .room strong {
    font-size: 15.5px;
  }
}

/* ---------- 5. Die Runde: die Aufgabe als Lernkarte ---------------------- */
/*
 * EINE KARTE AUF EINEM STAPEL. Die Aufgabe, ihr Bild und die Eingabe liegen
 * auf einer Karte, und hinter ihr zwei weitere - die Aufgaben, die noch
 * kommen. Gezeichnet mit Schatten und nicht mit eigenen Elementen: Ein
 * Schatten trägt keinen Fokus und nimmt keinen Platz. Die Karte sagt nichts
 * über eine Antwort; sie liegt da, ob die letzte richtig war oder nicht
 * (R6, R9).
 */
.lernkarte {
  position: relative;
  margin: 2px 0 16px;
  padding: 20px 18px 18px;
  border: 1.5px solid var(--ink);
  border-radius: 22px;
  background: var(--flaeche);
  box-shadow:
    5px 6px 0 -1.5px var(--plaster-hi),
    5px 6px 0 0 var(--ink),
    10px 12px 0 -1.5px var(--plaster-hi),
    10px 12px 0 0 var(--ink);
}
/* Ist die Aufgabe fort - am Ende der Runde, oder wenn im Check nur noch das
   Einsenden fehlt -, geht die leere Karte mit. */
.lernkarte:has(> [data-aufgabe][hidden]) {
  display: none;
}
.lernkarte .expr {
  margin-bottom: 16px;
}
.lernkarte .knoepfe {
  margin-top: 18px;
}
.frame.quiet .lernkarte {
  box-shadow:
    5px 6px 0 -1.5px var(--plaster-hi),
    5px 6px 0 0 var(--plum-linie),
    10px 12px 0 -1.5px var(--plaster-hi),
    10px 12px 0 0 var(--plum-linie);
}
@media (min-width: 1024px) {
  .b-runde .pad,
  .b-check .pad {
    max-width: 880px;
    padding-top: 28px;
  }
  .lernkarte {
    padding: 34px 36px 30px;
    margin-bottom: 28px;
    box-shadow:
      8px 9px 0 -1.5px var(--plaster-hi),
      8px 9px 0 0 var(--ink),
      16px 18px 0 -1.5px var(--plaster-hi),
      16px 18px 0 0 var(--ink);
  }
  .frame.quiet .lernkarte {
    box-shadow:
      8px 9px 0 -1.5px var(--plaster-hi),
      8px 9px 0 0 var(--plum-linie),
      16px 18px 0 -1.5px var(--plaster-hi),
      16px 18px 0 0 var(--plum-linie);
  }
  .lernkarte .wahl:not(.bildwahl) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .lernkarte .wahl .btn {
    min-height: 58px;
    font-size: 16px;
  }
  .lernkarte .answer {
    font-size: 30px;
    padding: 20px 22px;
  }
  .lernkarte .knoepfe .btn {
    min-height: 52px;
    font-size: 16px;
  }
  .b-runde .dots,
  .b-check .dots {
    margin-bottom: 18px;
  }
  /* Die Dinge zum Zählen (V157): Auf der breiten Lernkarte standen sie mit
     26 px verloren in ihrem Rahmen. */
  .lernkarte .reihe .ding {
    width: min(34px, calc((100% - 8 * 6px) / 9));
  }
}
/* Der Satz über den Karten hält Abstand: Der Fokusring der ersten Karte
   ragt fünf Pixel über sie hinaus und strich ihn sonst durch. */
.lernkarte [data-felder] > .hinweis {
  margin-bottom: 12px;
}
/* ZUORDNEN IN ZWEI SPALTEN, AUF JEDER BREITE. Der Satz dazu sagt «Tipp
   links eine Karte an, dann rechts die passende» - und bis V127 standen die
   beiden Seiten untereinander, jede als Fluss von Karten, der umbrach. Wo
   die linke Seite aufhörte und die rechte anfing, war nicht zu sehen: vier
   Fragen und vier Antworten lagen als acht Karten da. Jetzt stehen sie
   wirklich links und rechts, jede Karte über die ganze Spalte, und ein
   langer Satz bricht in seiner Karte um statt aus ihr heraus. */
.lernkarte .felder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
  align-items: start;
}
.lernkarte .felder > .karten {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 8px;
}
.lernkarte .felder .karte-knopf {
  justify-content: flex-start;
  text-align: left;
  padding: 10px 11px;
  font-size: 14px;
  line-height: 1.25;
}
@media (min-width: 720px) {
  .lernkarte .felder {
    column-gap: 28px;
  }
  .lernkarte .felder > .karten {
    gap: 10px;
  }
  .lernkarte .felder .karte-knopf {
    min-height: 52px;
    padding: 12px 16px;
    font-size: 15px;
  }
}

/* Die Hügel am Fuss der Übungsrunde (V127): dieselbe Bauform wie in der
   geschlossenen Runde, also derselbe Boden und dieselbe Reihenfolge. */
.b-runde .body {
  position: relative;
}
.b-runde .pad {
  position: relative;
  z-index: 1;
}
/* AUF DEM SCHREIBTISCH IM EIGENEN VERHÄLTNIS, UND NUR DIE KUPPEN. Die
   Zeichnung ist 320 zu 44; ein Streifen von 96 px über die ganze Breite
   schnitt mit ``slice`` den Fuss der Hügel heraus, und übrig blieben zwei
   Bögen, die nach nichts aussahen. Ganz gezeigt wurden sie zu gross - ein
   Viertel des Bildschirms voller Hügel. Jetzt hat die Zeichnung ihr
   Verhältnis, steht oben im Streifen, und der Streifen schneidet unten ab:
   übrig bleibt der Horizont. Auch in der geschlossenen Runde, in ihren
   eigenen Tönen. */
@media (min-width: 1024px) {
  .ruhehang {
    height: clamp(104px, 9vw, 150px);
    overflow: hidden;
  }
  .ruhehang .kulisse {
    display: block;
    height: auto;
    aspect-ratio: 320 / 44;
  }
}

/* ---------- 6. Ausweis, Du, Lesen, Zwischenseiten ------------------------ */
@media (min-width: 1024px) {
  .b-ausweis .pad {
    max-width: 1120px;
  }
  .b-ausweis .stats {
    grid-template-columns: repeat(4, 1fr);
  }
  .b-ausweis .stat {
    padding: 20px 20px 18px;
  }
  .b-ausweis .stat .kulisse {
    width: 40px;
    height: 40px;
  }
  .b-ausweis .stat b {
    font-size: 32px;
  }
  .b-ausweis .card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 44px;
    padding: 22px 26px;
  }
  .b-ausweis .card > :not(.srow) {
    grid-column: 1 / -1;
  }
  .b-ausweis .pad > .btn.wide {
    width: auto;
    padding: 14px 28px;
    margin: 6px 0 12px;
  }

  .b-du .pad {
    max-width: 1120px;
    columns: 2 420px;
    column-gap: 24px;
  }
  .b-du .pad > * {
    break-inside: avoid;
  }
  .b-du .card {
    display: inline-block;
    width: 100%;
    padding: 20px 22px;
  }

  .b-lesen .pad {
    max-width: 820px;
  }
  /* Die Zwischenseiten - vor einem Check, nach einem Ergebnis, wenn nichts
     zu üben ist - stehen als eine Karte in der Mitte. */
  .b-zwischen .pad {
    max-width: 640px;
    margin: 56px auto;
    padding: 34px 40px 36px;
    border: 1.5px solid var(--ink);
    border-radius: 24px;
    background: var(--flaeche);
    box-shadow: var(--schatten-hoch);
  }
  .b-zwischen .pad > h1.sub {
    font-size: 24px;
    color: var(--ink);
    margin-bottom: 6px;
  }
  .b-zwischen .pad > .hinweis {
    font-size: 15px;
    margin-bottom: 18px;
  }
}

/* ---------- 7. Die Anmeldung: zwei Hälften ------------------------------- */
@media (min-width: 1024px) {
  .b-anmelden .pad {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 440px);
    column-gap: 72px;
    align-content: center;
    align-items: start;
    max-width: 1180px;
    min-height: 100%;
  }
  .b-anmelden .pad > * {
    grid-column: 2;
  }
  .b-anmelden .pad > .willkommen {
    grid-column: 1;
    grid-row: 1 / span 12;
    align-self: center;
    padding: 0;
  }
  .b-anmelden .willkommenbild {
    padding: 34px 0 10px;
    margin-bottom: 26px;
    box-shadow: var(--schatten-hoch);
  }
  /* Himmel und Hügel im Verhältnis ihrer Zeichnung: Mit fester Höhe
     schnitt der Himmel die Wolken neben der Tür mitten durch. */
  .b-anmelden .willkommenbild [data-kulisse="himmel"] {
    height: auto;
    aspect-ratio: 320 / 84;
  }
  .b-anmelden .willkommenbild [data-kulisse="huegel"] {
    height: auto;
    aspect-ratio: 320 / 44;
  }
  .b-anmelden .willkommenbild .anfang {
    width: 300px;
    height: auto;
  }
  .b-anmelden .marke {
    font-size: 48px;
  }
  .b-anmelden .zeichnung .zeichen {
    width: 64px;
    height: 64px;
  }
  .b-anmelden .willkommen p {
    font-size: 16px;
    max-width: 34ch;
  }
  /* Der Schritt, der gerade dran ist, steht auf einer Karte. */
  .b-anmelden .pad > .schritt {
    margin-top: 0;
    margin-bottom: 16px;
    padding: 26px 26px 24px;
    border: 1.5px solid var(--ink);
    border-radius: var(--r-gross);
    background: var(--flaeche);
    box-shadow: var(--schatten-hoch);
  }
  .b-anmelden .pad > .schritt label {
    font-size: 18px;
  }
  .b-anmelden .pad > .schritt .eingabe {
    font-size: 17px;
    padding: 14px 16px;
  }
  .b-anmelden .pad > .schritt .btn {
    min-height: 50px;
    font-size: 16px;
  }
}

/* ---------- Bewegung: nur als Antwort, nur wenn erwünscht ---------------- */
@media (prefers-reduced-motion: no-preference) {
  .btn,
  .fachkachel,
  .room,
  .tower {
    transition:
      transform 0.08s ease-out,
      box-shadow 0.08s ease-out,
      filter 0.12s ease-out;
  }
  @media (hover: hover) {
    .fachkachel:hover,
    .tower:hover,
    .room:not(.locked):hover {
      transform: translateY(-2px);
      box-shadow: var(--schatten-hoch);
    }
  }
  .fachkachel:active,
  .tower:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 rgba(22, 35, 59, 0.13);
  }
}

/* ==========================================================================
 * DIE LERNKARTEN (V128)
 *
 * Angeordnet am 03.10.2026: «baue die lernkarten zusätzlich zu jeder stufe
 * für jedes fach wo es sinn macht ... so schöne bilder ... was man wusste
 * ist gut, was nicht wird in die kartei zur Wiederholung gelegt».
 *
 * Gebaut aus den eigenen Marken, wie V127: Kontur in Tinte, gerade Schatten,
 * die Töne der Regale (V93). Eine Karte ist ein Stück Karton auf dem Tisch,
 * ein Stapel sind mehrere übereinander - gezeichnet mit Schatten und mit
 * ::before und ::after, nicht mit Elementen, die einen Fokus tragen könnten.
 *
 * GLEICHES GEWICHT (R6, R9): «Gewusst» und «Noch nicht» sind derselbe
 * Knopf. Keine Farbe für richtig und falsch - es wird nichts bewertet.
 * Bewegt wird nur, was antwortet: Die neue Karte rutscht vom Stapel, die
 * umgedrehte dreht sich auf - und bei reduzierter Bewegung gar nichts.
 * ========================================================================== */

/* Der Ton des Regals, je Fach - dieselben Marken wie in der Werkstatt. */
.kartenkopf,
.stapel,
.karteikarte,
.kartenfachweg {
  --ton: var(--ton-uebrig);
  --ton-tief: var(--ton-uebrig-tief);
}
:is(.kartenkopf, .stapel, .karteikarte, .kartenfachweg).ton-sprachen {
  --ton: var(--ton-sprachen);
  --ton-tief: var(--ton-sprachen-tief);
}
:is(.kartenkopf, .stapel, .karteikarte, .kartenfachweg).ton-rechnen {
  --ton: var(--ton-rechnen);
  --ton-tief: var(--ton-rechnen-tief);
}
:is(.kartenkopf, .stapel, .karteikarte, .kartenfachweg).ton-forschen {
  --ton: var(--ton-forschen);
  --ton-tief: var(--ton-forschen-tief);
}
:is(.kartenkopf, .stapel, .karteikarte, .kartenfachweg).ton-welt {
  --ton: var(--ton-welt);
  --ton-tief: var(--ton-welt-tief);
}
:is(.kartenkopf, .stapel, .karteikarte, .kartenfachweg).ton-machen {
  --ton: var(--ton-machen);
  --ton-tief: var(--ton-machen-tief);
}

/* ---------- Ein Stapel als Bild ------------------------------------------ */
/* Drei Karten übereinander: die oberste gerade, die beiden darunter leicht
   verdreht. Das Zeichen des Fachs liegt obenauf. */
.kartenstapel {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: 72px;
  height: 58px;
  margin: 6px 8px 4px 2px;
}
.kartenstapel::before,
.kartenstapel::after,
.kartenstapel-oben {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  background: var(--flaeche);
}
.kartenstapel::before {
  background: var(--ton);
  transform: rotate(-9deg) translate(-3px, 3px);
}
.kartenstapel::after {
  background: var(--plaster-hi);
  transform: rotate(6deg) translate(3px, 1px);
}
.kartenstapel-oben {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 0 rgba(22, 35, 59, 0.13);
}
.kartenstapel.klein {
  width: 48px;
  height: 38px;
  margin: 4px 6px 2px 2px;
}
.kartenstapel.klein .kartenstapel-oben::after {
  content: "";
  width: 60%;
  height: 4px;
  border-radius: 2px;
  background: var(--ton-tief);
  box-shadow: 0 8px 0 var(--track);
  transform: translateY(-4px);
}

/* ---------- Die Übersicht ------------------------------------------------ */
.kartenkopf {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  margin-bottom: 16px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-gross);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.5) 0 46px, transparent 47px),
    var(--ton);
  box-shadow: var(--schatten);
}
.kartenkopf h1 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
}
.kartenkopf h1 span {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ton-tief);
  margin-top: 2px;
}
.kartenkopf p {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
  margin-top: 6px;
}

.kartenruhe {
  border: 1.5px dashed var(--ink-soft);
  border-radius: var(--r-karte);
  padding: 14px 16px;
  margin: 8px 0 16px;
  background: var(--flaeche);
  font-size: 14.5px;
  line-height: 1.45;
}

.richtung {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.richtung .btn {
  padding: 10px 8px;
  font-size: 13.5px;
  text-align: center;
}

.kartenfaecher {
  display: grid;
  gap: 14px;
  margin-bottom: 22px;
}
.kartenfach {
  position: relative;
  padding: 16px 16px 16px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-gross);
  background: var(--flaeche);
  box-shadow: var(--schatten);
}
.kartenfach h2 {
  font-size: 18px;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
  padding-right: 64px;
}
.kartenfach p {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-bottom: 12px;
  padding-right: 64px;
}
.kartenfach p:last-child {
  margin-bottom: 0;
}
.kartenfach .btn {
  margin-top: 2px;
}
/* DER KARTEIKASTEN: ein Kasten mit drei Reitern, oben rechts. */
.karteikasten,
.kartenfaecher-bild {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 52px;
  height: 40px;
}
.karteikasten {
  border: 1.5px solid var(--ink);
  border-top-width: 0;
  border-radius: 0 0 8px 8px;
  background: var(--kulisse-holz);
}
.karteikasten i {
  position: absolute;
  bottom: 12px;
  width: 30px;
  height: 22px;
  border: 1.5px solid var(--ink);
  border-radius: 4px 4px 0 0;
  border-bottom: 0;
  background: var(--flaeche);
}
.karteikasten i:nth-child(1) {
  left: 3px;
  bottom: 16px;
  background: var(--ton-sprachen);
}
.karteikasten i:nth-child(2) {
  left: 10px;
  bottom: 13px;
  background: var(--chalk);
}
.karteikasten i:nth-child(3) {
  left: 17px;
  bottom: 10px;
}
/* ALLE BIS HIER: drei Karten nebeneinander aufgefächert. */
.kartenfaecher-bild i {
  position: absolute;
  bottom: 0;
  left: 14px;
  width: 26px;
  height: 36px;
  border: 1.5px solid var(--ink);
  border-radius: 5px;
  background: var(--flaeche);
  transform-origin: 50% 100%;
}
.kartenfaecher-bild i:nth-child(1) {
  transform: rotate(-18deg);
  background: var(--ton-sprachen);
}
.kartenfaecher-bild i:nth-child(2) {
  background: var(--chalk);
}
.kartenfaecher-bild i:nth-child(3) {
  transform: rotate(18deg);
}

.b-lernkarten h2.sub {
  margin-bottom: 10px;
}
.stapelreihe {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 14px;
  margin-bottom: 18px;
}
/* EIN STAPEL JE STUFE: eine Karte mit zwei weiteren dahinter, wie die
   Lernkarte der Runde (V127). Die Nummer steht auf einem Reiter im Ton des
   Fachs; die Stufe, an der gebaut wird, trägt ihn in Kreide. */
.stapel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 12px 12px 12px 12px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-karte);
  background: var(--flaeche);
  color: inherit;
  text-decoration: none;
  box-shadow:
    4px 5px 0 -1.5px var(--plaster-hi),
    4px 5px 0 0 var(--ink),
    8px 10px 0 -1.5px var(--plaster-hi),
    8px 10px 0 0 var(--ink);
}
.stapel:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 3px;
}
.stapel-nummer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: var(--ton);
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 19px;
  font-weight: 800;
}
.stapel.dran .stapel-nummer {
  background: var(--chalk);
}
.stapel-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.stapel-text strong {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.stapel-text small {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.3;
}
@media (hover: hover) {
  .stapel:hover {
    transform: translateY(-1px);
  }
}

/* ---------- Der Weg im Fach --------------------------------------------- */
.kartenfachweg {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  margin: 0 0 18px;
  padding: 12px 16px 12px 12px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-gross);
  background: var(--flaeche);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--schatten);
}
.kartenfachweg:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.kartenfachweg-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.kartenfachweg-text strong {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 17px;
}
.kartenfachweg-text small {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.35;
}
.kartenfachweg::after {
  content: "→";
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--ton-tief);
}

/* ---------- Die Karte ---------------------------------------------------- */
.b-lernkarte .body {
  position: relative;
}
.b-lernkarte .pad {
  position: relative;
  z-index: 1;
}
.stapelstand {
  margin-bottom: 14px;
}
.stapelstand p {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
  margin-bottom: 7px;
  font-size: 13px;
  color: var(--ink-soft);
}
.stapelstand strong {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 15px;
  color: var(--ink);
}
.kartentisch {
  perspective: 1200px;
  margin: 0 12px 26px 0;
}
.karteikarte {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 300px;
  padding: 46px 22px 28px;
  border: 1.5px solid var(--ink);
  border-top: 12px solid var(--ton-tief);
  border-radius: 22px;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 33px,
      rgba(42, 79, 215, 0.07) 33px 34px
    ),
    var(--flaeche);
  text-align: center;
  box-shadow:
    5px 6px 0 -1.5px var(--ton),
    5px 6px 0 0 var(--ink),
    10px 12px 0 -1.5px var(--plaster-hi),
    10px 12px 0 0 var(--ink);
}
.karteikarte.hinten {
  background: var(--flaeche);
}
.karte-ecke {
  position: absolute;
  top: 10px;
  left: 12px;
  display: flex;
  opacity: 0.95;
}
.karte-marke {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 9px;
  border: 1.2px solid var(--ink);
  border-radius: 99px;
  background: var(--plaster-hi);
  font-size: 11.5px;
  font-weight: 700;
}
.karte-etikett {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ton-tief);
}
.karte-bild {
  font-size: 76px;
  line-height: 1.05;
}
.karte-text {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.18;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.karte-text.kurz {
  font-size: 40px;
}
.karte-text.viel {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.35;
}
.karte-frage {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.karte-vorher {
  align-self: stretch;
  padding-bottom: 12px;
  margin-bottom: 6px;
  border-bottom: 1.5px dashed var(--hairline);
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--ink-soft);
}
.karte-vorher span[aria-hidden] {
  font-size: 22px;
  vertical-align: -3px;
}
.karte-auch {
  font-size: 13.5px;
  color: var(--ink-soft);
}
.karteikarte .anhoeren {
  position: relative;
  z-index: 2;
  margin-top: 8px;
  min-width: 150px;
}

/* DIE KARTE DREHT SICH UM (V158): «Man soll auf die Lernkarten klicken
   können, um sie umzudrehen (animiert).» Vorne ist die ganze Karte der Weg
   zur Rückseite (`.karte-flaeche` über der Karte, nur der Ton liegt
   darüber). Hinten stehen beide Seiten im selben Feld, Rücken an Rücken, und
   `.karte-innen` dreht sie: beim Laden einmal von vorne nach hinten, danach
   auf jeden Fingertipp über das Kästchen davor. Die Seite, die gerade
   wegschaut, ist unsichtbar und nimmt keinen Fingertipp an. */
.karte-innen {
  display: grid;
  transform-style: preserve-3d;
}
.karte-innen > .karteikarte {
  grid-area: 1 / 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.karte-innen > .karteikarte.hinten,
.karte-innen.umgedreht {
  transform: rotateY(180deg);
}
.karte-schalter {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.karte-schalter:checked + .karte-innen {
  transform: none;
}
.karte-innen.umgedreht > .vorne,
.karte-schalter:checked + .karte-innen > .hinten {
  pointer-events: none;
}
.karte-schalter:checked + .karte-innen > .vorne {
  pointer-events: auto;
}
.karte-flaeche {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.umdrehen {
  min-height: 54px;
  font-size: 16px;
}
.umdrehen + .hinweis {
  text-align: center;
}
.selbsturteil-frage {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 10px;
}
/* GLEICH GROSS, GLEICH GEWICHTET: zwei Hälften einer Zeile, derselbe Knopf. */
.selbsturteil-knoepfe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.selbsturteil-knoepfe .btn {
  min-height: 56px;
  font-size: 16px;
  gap: 8px;
}
.selbsturteil .hinweis {
  text-align: center;
  margin-top: 12px;
}

.kartenende {
  text-align: center;
}
.kartenende h1.sub {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 23px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 8px;
}
.kartenende p {
  font-size: 14.5px;
  line-height: 1.5;
  margin-bottom: 8px;
}
.kartenende .btn {
  margin-top: 10px;
}
.kartenende .kartenruhe {
  text-align: left;
}

/* DIE NEUE KARTE RUTSCHT VOM STAPEL, DIE UMGEDREHTE DREHT SICH UM. Beides
   antwortet auf einen Fingertipp, und beides fällt bei reduzierter Bewegung
   weg (docs/03 Abschnitt 3) - dann steht die Rückseite einfach da, und das
   Zurückwenden springt. Bis V158 drehte sich nur die Rückseite aus der Kante
   herein; jetzt sieht man die Vorderseite wegdrehen. Beim Antippen gibt die
   Karte vorne ein wenig nach, damit der Finger merkt, dass er sie getroffen
   hat, bevor die Seite der Rückseite da ist. */
@media (prefers-reduced-motion: no-preference) {
  .karte-innen:not(.umgedreht) > .karteikarte.vorne {
    animation: karte-vom-stapel 0.32s ease-out both;
  }
  .karte-innen {
    transition: transform 0.55s cubic-bezier(0.45, 0.05, 0.3, 1);
  }
  .karte-innen.umgedreht {
    animation: karte-wenden 0.7s cubic-bezier(0.45, 0.05, 0.3, 1) 0.06s backwards;
  }
  .karte-innen:not(.umgedreht):has(.karte-flaeche:active) {
    transform: scale(0.985);
    transition-duration: 0.08s;
  }
}
@keyframes karte-vom-stapel {
  from {
    transform: translate(10px, 12px) rotate(1.5deg);
    opacity: 0.35;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes karte-wenden {
  from {
    transform: none;
  }
  50% {
    transform: rotateY(90deg) scale(1.03);
  }
  to {
    transform: rotateY(180deg);
  }
}

/* ---------- Breitere Fenster -------------------------------------------- */
@media (min-width: 640px) {
  .kartenfaecher {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stapelreihe {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
  .karteikarte {
    min-height: 340px;
  }
}
@media (min-width: 1024px) {
  .b-lernkarten .pad {
    max-width: 1120px;
  }
  .kartenkopf {
    padding: 22px 26px;
    gap: 24px;
  }
  .kartenkopf h1 {
    font-size: 30px;
  }
  .kartenkopf h1 span {
    font-size: 16px;
  }
  .kartenkopf p {
    font-size: 15px;
    max-width: 640px;
  }
  .kartenstapel {
    width: 96px;
    height: 76px;
  }
  .richtung {
    display: flex;
    max-width: 640px;
  }
  .richtung .btn {
    flex: 1;
    font-size: 15px;
  }
  .kartenfach {
    padding: 20px 22px;
  }
  .stapelreihe {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 22px 20px;
  }
  .stapel {
    min-height: 88px;
    padding: 16px;
  }

  .b-lernkarte .pad {
    max-width: 780px;
    padding-top: 28px;
  }
  .karteikarte {
    min-height: 420px;
    padding: 56px 40px 36px;
    box-shadow:
      8px 9px 0 -1.5px var(--ton),
      8px 9px 0 0 var(--ink),
      16px 18px 0 -1.5px var(--plaster-hi),
      16px 18px 0 0 var(--ink);
  }
  .kartentisch {
    margin: 0 16px 34px 0;
  }
  .karte-bild {
    font-size: 104px;
  }
  .karte-text {
    font-size: 40px;
  }
  .karte-text.kurz {
    font-size: 58px;
  }
  .karte-text.viel {
    font-size: 23px;
  }
  .karte-frage {
    font-size: 16px;
  }
  .umdrehen,
  .selbsturteil-knoepfe .btn {
    min-height: 58px;
    font-size: 17px;
  }

  /* IM FACH: Bis 1280 px steht der Weg zu den Karten über die ganze Breite
     zwischen den beiden Kästen und dem Grundriss - darunter stünde er hinter
     zwölf Räumen. Ab 1280 px links unter dem Sprung-Check. */
  .b-fach .pad > .fachwege {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 18px 0 0;
  }
  .b-fach .pad > .grundriss {
    grid-row: 4;
  }
}
@media (min-width: 1280px) {
  .b-fach .pad > .fachwege {
    grid-column: 1;
    grid-row: 4;
    align-self: start;
  }
  .b-fach .pad > .grundriss {
    grid-row: 1 / span 4;
  }
}

/* ==========================================================================
 * DIE STUFENWAHL IM FACH (V131)
 *
 * Angeordnet am 03.10.2026: «man soll aber auch stufen unterhalb nochmals
 * wählen können.» Über dem Grundriss steht eine Leiste mit jeder Stufe des
 * Fachs, in derselben Sprache wie die Räume darunter: eine fertige trägt
 * einen Haken in moss, eine offene die kleine Tür in cobalt, und eine, die
 * noch zu ist, steht gestrichelt und ohne Weg da. Die gezeigte Stufe ist
 * eingedrückt, wie ein Knopf, den man gerade drückt (V127).
 *
 * Wartet in einer Stufe eine Wiederholung, trägt ihr Feld einen Punkt in
 * cobalt - der Farbe, die docs/03 «Aktion» nennt. Ein Punkt und keine Zahl
 * und kein Rot: Eine Wiederholung ist kein Rückstand.
 *
 * Gebaut aus den eigenen Marken, ohne Bild oder Bauteil eines anderen
 * Produkts. Auf dem Telefon zu fünf Feldern je Zeile, damit jedes deutlich
 * über 44 px breit bleibt; ab 640 px alle in einer Reihe.
 * ========================================================================== */
.stufenwahl {
  margin: 0 0 16px;
}
.stufenwahl ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.stufenfeld {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: var(--flaeche);
  color: var(--ink);
  text-decoration: none;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  box-shadow: var(--kante);
}
a.stufenfeld:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.stufenfeld.fertig {
  background: var(--room-done);
}
.stufenfeld.offen {
  background: var(--chalk);
}
.stufenfeld.zu {
  background: var(--room-locked);
  color: var(--ink-soft);
  border-color: var(--ink-soft);
  border-style: dashed;
  box-shadow: none;
  font-weight: 400;
}
/* DIE GEZEIGTE STUFE IST EINGEDRÜCKT: Sie sitzt auf ihrer Kante, wie ein
   Knopf unter dem Finger, und ihre Kontur ist kräftiger. Zwei Merkmale und
   nicht eine Farbe allein - die Farbe sagt schon, ob die Stufe fertig ist. */
.stufenfeld[aria-current="page"] {
  transform: translateY(2px);
  box-shadow: var(--kante-gedrueckt);
  border-width: 2.5px;
}
/* Darunter ein Strich in Tinte: Er bleibt sichtbar, wo die Fläche allein
   nichts sagt - zwischen zwei fertigen Stufen etwa. */
.stufenfeld[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 32%;
  right: 32%;
  bottom: -7px;
  height: 3px;
  border-radius: 2px;
  background: var(--ink);
}
/* Das Zeichen in der Ecke: ein Haken für fertig, eine kleine Tür für offen.
   Gezeichnet aus Rändern und nicht als Schriftzeichen - die gebündelten
   Schriften sind Teilmengen, und ein Haken fiele dort auf eine Systemschrift
   zurück. */
.stufenfeld-zeichen {
  position: absolute;
}
.stufenfeld.fertig .stufenfeld-zeichen {
  top: 8px;
  right: 7px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--moss);
  border-bottom: 2px solid var(--moss);
  transform: rotate(-45deg);
}
.stufenfeld.offen .stufenfeld-zeichen {
  top: 6px;
  right: 7px;
  width: 7px;
  height: 11px;
  border: 1.5px solid var(--ink);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  background: var(--cobalt);
}
/* Der Punkt einer wartenden Wiederholung, oben links. Ein heller Rand trennt
   ihn von jeder Fläche darunter. */
.stufenfeld.faellig::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--flaeche);
  background: var(--cobalt);
}

/* EIN RAUM, DESSEN WIEDERHOLUNG FÄLLIG IST: die Fläche eines sicheren Raums,
   dazu Etikett und Tür in cobalt - hier geht gleich etwas auf. */
.room.faellig .tag {
  background: var(--cobalt);
  border-color: var(--cobalt);
  color: #fff;
}
.room.faellig::after {
  background: var(--cobalt);
}
/* Der Satz über den Räumen trägt denselben Punkt wie das Feld der Stufe. */
.wiederholung-hinweis {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
}
.wiederholung-hinweis::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cobalt);
  transform: translateY(1px);
}

/* DER WEG ZU EINER WIEDERHOLUNG IN EINER ANDEREN STUFE: ein Streifen mit
   dem Punkt vorn und einem Pfeil hinten, über ganze Breite antippbar. */
.anderswo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 10px 0 14px;
  padding: 8px 14px;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: var(--flaeche);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.35;
  text-decoration: none;
  box-shadow: var(--schatten);
}
.anderswo::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cobalt);
}
.anderswo .steuersymbol {
  flex: none;
  margin-left: auto;
  color: var(--cobalt);
}
.anderswo:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}

@media (min-width: 640px) {
  .stufenwahl ol {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
}
@media (min-width: 1024px) {
  .stufenfeld {
    min-height: 54px;
    font-size: 21px;
  }
  .stufenwahl {
    margin-bottom: 22px;
  }
  /* Zwei Sätze unter der Überschrift stehen beieinander; der Abstand zu den
     Räumen gehört dem letzten (``.grundriss > .hinweis`` setzt ihn sonst
     unter jeden). */
  .grundriss > .hinweis:has(+ .wiederholung-hinweis) {
    margin-bottom: 0;
  }
}

/* ==========================================================================
 * DER LADEBALKEN (V133)
 *
 * Angeordnet am 03.10.2026: «loading bar mit scampy animation über
 * einbauen». Oben über allem eine Spur, die sich füllt, und an ihrer Spitze
 * sitzt der Scampy auf einer runden Plakette. Sichtbar nur, solange ``laden.js`` die Klasse
 * ``laedt`` an die Seite setzt: nach einem Fingertipp auf einen Link oder ein
 * Formular und während eine Runde länger auf den Server wartet.
 *
 * DIE FÜLLUNG WEISS NICHT, WIE WEIT DER SERVER IST, und sie behauptet es
 * nicht: Sie läuft schnell an und wird immer langsamer, ohne je anzukommen -
 * angekommen ist, wenn die neue Seite dasteht. Ein Balken, der bei 100
 * stehen bleibt, während nichts passiert, sagte etwas Falsches.
 *
 * RUHIG, WIE JEDER AUFTRITT DES SCAMPY (V39): Er wiegt sich um acht Grad
 * und einen Pixel, er hüpft nicht. In der geschlossenen Runde
 * steht er still und der Balken ist pflaumenfarben, ohne Gelb; bei
 * reduzierter Bewegung steht beides still, halb gefüllt.
 *
 * Fest am oberen Rand, unter dem, was das Telefon dort selbst belegt
 * (V74.5), und ohne Platz im Fluss: Er deckt nichts zu und fängt keinen
 * Fingertipp ab.
 * ========================================================================== */
.ladebalken {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  height: 38px;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0s linear 0.2s;
}
html.laedt .ladebalken {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.12s ease;
}
.ladebalken-spur {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--track);
  box-shadow: 0 1px 0 var(--hairline);
  overflow: hidden;
}
.ladebalken-fuellung {
  position: absolute;
  inset: 0;
  background: var(--cobalt);
  transform-origin: 0 50%;
  transform: scaleX(0.5);
}
/* Der Schwimmer ist so breit wie die Spur; der Scampy steht auf einer
   runden Plakette an seinem linken Rand. Verschoben wird der ganze
   Schwimmer, um so viel, wie die Füllung lang ist - so sitzt die Plakette
   an ihrer Spitze, wie der Knopf eines Schiebers auf seiner Schiene. */
.ladebalken-schwimmer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(50%);
}
.ladebalken-plakette {
  position: absolute;
  top: 1px;
  left: -16px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--plaster-hi);
  border: 1.5px solid var(--ink);
  box-shadow: 0 2px 0 var(--ink);
}
.ladebalken-plakette .zeichen {
  display: block;
}
/* In der geschlossenen Runde Pflaume statt Kobalt, und die Plakette mit
   Linien in Pflaume statt Tinte - wie die Lernkarte dort (V127). */
.frame.quiet .ladebalken-spur {
  background: var(--plum-hang);
}
.frame.quiet .ladebalken-fuellung {
  background: var(--plum);
}
.frame.quiet .ladebalken-plakette {
  border-color: var(--plum-linie);
  box-shadow: 0 2px 0 var(--plum-linie);
}

@media (prefers-reduced-motion: no-preference) {
  html.laedt .ladebalken-fuellung {
    animation: laden-fuellen 9s cubic-bezier(0.08, 0.7, 0.2, 1) both;
  }
  html.laedt .ladebalken-schwimmer {
    animation: laden-schwimmen 9s cubic-bezier(0.08, 0.7, 0.2, 1) both;
  }
  html.laedt .ladebalken-plakette .zeichen {
    animation: laden-wiegen 1.1s ease-in-out infinite;
  }
  .frame.quiet .ladebalken-plakette .zeichen {
    animation: none;
  }
}

@keyframes laden-fuellen {
  from {
    transform: scaleX(0.04);
  }
  to {
    transform: scaleX(0.92);
  }
}
@keyframes laden-schwimmen {
  from {
    transform: translateX(4%);
  }
  to {
    transform: translateX(92%);
  }
}
/* Kein Hüpfen: ein Pixel und acht Grad, innerhalb dessen, was die anderen
   Bewegungen des Scampy dürfen (``tests/test_logo.py`` misst die seinen). */
@keyframes laden-wiegen {
  0%,
  100% {
    transform: translateY(0) rotate(-8deg);
  }
  50% {
    transform: translateY(1px) rotate(8deg);
  }
}

/* ==========================================================================
 * DIE KNÖPFE, DIE STEUERN (V134)
 *
 * Angeordnet am 03.10.2026: «einfache links zur steuerung der Applikation
 * mit ansprechenden buttons ersetzen». Was bis dahin ein unterstrichener Satz
 * in kleiner grauer Schrift war - «Zurück in die Werkstatt», «Abbrechen»,
 * «Check verlassen», «Von vorne anfangen» -, ist ein Knopf: dieselbe Kante
 * aus Tinte wie jeder andere (V127), er lässt sich drücken, und ein Symbol
 * sagt die Richtung - ein Pfeil zurück, einer weiter, ein Kreuz hinaus.
 *
 * KLEINER ALS EIN KNOPF, DER ETWAS TUT, UND HELL: Ein Steuerknopf führt weg
 * von dem, worum es auf dem Bildschirm geht. In der Runde ist er der eine
 * benannte Ausgang (docs/03 Abschnitt 4) und soll neben der Aufgabe nicht
 * auffallen; als Tippziel trotzdem 44 px hoch (docs/03 Abschnitt 6). Er
 * steht so breit wie sein Wort, auch in einem Raster.
 * ========================================================================== */
.btn.steuer {
  gap: 7px;
  margin-bottom: 16px;
  padding: 8px 16px 8px 12px;
  font-size: 14px;
  background: var(--flaeche);
  justify-self: start;
  align-self: flex-start;
}
/* Das Symbol hinter dem Wort: der Weg weiter. */
.btn.steuer.nach {
  padding: 8px 12px 8px 16px;
}
.btn.steuer .steuersymbol {
  flex: none;
  display: block;
}
/* Unter seinem Satz, auf der Anmeldung: nah genug, dass beide zusammen
   gelesen werden. */
.hinweis + .btn.steuer {
  margin-top: 4px;
}
/* In einem Absatz ist der Absatz der Abstand. */
p > .btn.steuer {
  margin-bottom: 0;
}

/* ==========================================================================
 * BILDER UND SYMBOLE AUS ZWEI FREIEN BIBLIOTHEKEN (V136)
 *
 * Angeordnet am 03.10.2026: «prüfe ob du freie etablierte libraries nutzen
 * musst, um das look & feels professionell zu machen. aktuell ist es nicht
 * ansprechend». Entschieden in OPEN_QUESTIONS.md V136: die Bilder aus
 * Microsoft Fluent Emoji (MIT, Stil «3D»), die Symbole aus Phosphor Icons
 * (MIT) - beide vom eigenen Server (R8), die Lizenzen unter static/lizenzen/.
 * KEIN RAHMENWERK FÜR DAS STILBLATT: Es brächte einen fremden Look, einen
 * Bauschritt und Regeln, die gegen die eigenen stehen.
 *
 * Hier steht nur, wo die Bilder sitzen und wie gross sie sind. Welches Bild
 * wofür steht, sagen app/web/bilder.py und app/web/symbole.py.
 *
 * STILL: Kein Bild und kein Symbol bewegt sich - der Scampy bleibt die
 * einzige angeordnete Ausnahme (V39).
 * ========================================================================== */

/* Ein Bild: in seiner Grösse und ohne Abstand unter der Grundlinie. */
.bild {
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

/* ---------- Das Bild eines Fachs auf seiner Kachel ---------------------- */
/* Die Kachel trägt den Ton ihres Regals (V93) - dieselben fünf Töne wie in
   der Werkstatt und keine Farbe mit einer Bedeutung. Darauf das Bild und bei
   einer Sprache der Gruss in der Sprechblase. Die Grösse kommt als
   --bildkante aus app/web/bilder.py. */
.fachbild {
  --ton: var(--ton-uebrig);
  --ton-tief: var(--ton-uebrig-tief);
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--bildkante);
  height: var(--bildkante);
  border-radius: calc(var(--bildkante) * 0.3);
  background: var(--ton);
  box-shadow: inset 0 0 0 1px rgba(22, 35, 59, 0.1);
}
.fachbild.ton-sprachen {
  --ton: var(--ton-sprachen);
  --ton-tief: var(--ton-sprachen-tief);
}
.fachbild.ton-rechnen {
  --ton: var(--ton-rechnen);
  --ton-tief: var(--ton-rechnen-tief);
}
.fachbild.ton-forschen {
  --ton: var(--ton-forschen);
  --ton-tief: var(--ton-forschen-tief);
}
.fachbild.ton-welt {
  --ton: var(--ton-welt);
  --ton-tief: var(--ton-welt-tief);
}
.fachbild.ton-machen {
  --ton: var(--ton-machen);
  --ton-tief: var(--ton-machen-tief);
}
.fachbild > * {
  grid-area: 1 / 1;
}
.fachbild-bild {
  width: 80%;
  height: 80%;
  object-fit: contain;
}
/* Der Gruss sitzt in der Blase. Sie liegt im Bild etwas über der Mitte, der
   Zipfel zeigt nach unten - daher der kleine Versatz nach oben. Ein kurzes
   Wort steht grösser als ein langes, und keines ragt aus der Blase. */
.fachbild .gruss {
  translate: 0 calc(var(--bildkante) * -0.055);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: min(calc(var(--bildkante) * 0.26), calc(var(--bildkante) * 0.86 / var(--laenge)));
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ton-tief);
  white-space: nowrap;
}
/* Im Kennzeichen der Übung ragt die Kachel in den Innenrand der Pille,
   statt sie höher zu machen - wie zuvor das gezeichnete Zeichen. */
.pill .fachbild {
  margin: -4px 0 -4px -7px;
}
/* Im Regal liegen die Kacheln übereinander: ein heller Rand trennt sie. */
.regal-zeichen .fachbild {
  box-shadow:
    0 0 0 2px var(--plaster-hi),
    inset 0 0 0 1px rgba(22, 35, 59, 0.1);
}
/* Auf dem Stapel der Lernkarten und in der Ecke einer Karte steht die
   Kachel auf Papier - ohne eigenen Rand. */
.kartenstapel-oben .fachbild,
.karte-ecke .fachbild {
  box-shadow: none;
}

/* ---------- Die Bilder an ihren Orten ----------------------------------- */
/* Auf den leeren Seiten: der Werkzeugkasten. */
.leerbild .bild {
  width: 112px;
  height: 112px;
}
/* Am Sprung-Check: die Rakete, links neben dem Satz. */
.jump .leiter .bild {
  width: 48px;
  height: 48px;
}
/* Über den vier Zahlen des Ausweises. */
.stat .bild {
  width: 36px;
  height: 36px;
  margin-bottom: 6px;
}
/* Der Weg zu den Lernkarten im Fach. */
.kartenfachweg-bild {
  width: 44px;
  height: 44px;
}
/* Kartei und «Alle bis hier»: oben rechts im Fach, wo bis V136 ein
   gezeichneter Kasten stand. */
.kartenfach-bild {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 52px;
  height: 52px;
}
/* Unten in der Seitenleiste (ab 1024 px). */
.seitenbild .bild {
  width: 112px;
  height: 112px;
}

/* ---------- Die Symbole -------------------------------------------------- */
/* Sie erben die Farbe der Schrift und stehen ohne Abstand darunter. */
.symbol,
.navsymbol,
.raumsymbol,
.steuersymbol,
.sca-symbol {
  display: block;
  flex-shrink: 0;
}
/* Das Symbol eines Raums: oben rechts, wie zuvor sein Bild (V98). Die Farbe
   sagt dasselbe wie das Etikett - moss heisst «sicher», cobalt «Aktion»; zu
   und dran bleiben in Tinte. */
.room .raumsymbol {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  color: var(--ink-soft);
}
.room.now .raumsymbol {
  color: var(--ink);
}
.room.done .raumsymbol {
  color: var(--moss);
}
.room.done.faellig .raumsymbol {
  color: var(--cobalt);
}
/* Im Adminbereich: das Symbol vor dem Wort. */
.sca-nav a,
.sca-raus {
  gap: 7px;
}
.sca-kopierknopf .sca-symbol {
  margin-left: -2px;
}

/* ==========================================================================
 * DIE GESTALTUNG, ERNEUERT (V137)
 *
 * Angeordnet am 03.10.2026: «prüfe ob du freie etablierte libraries nutzen
 * musst, um das look & feels professionell zu machen. aktuell ist es nicht
 * ansprechend». V136 hat dafür Bilder und Symbole aus zwei Bibliotheken
 * geholt; hier wird die Gestaltung selbst erneuert, ohne Rahmenwerk
 * (OPEN_QUESTIONS.md V137).
 *
 * WAS SICH ÄNDERT, IN EINEM SATZ: Aus der Handschrift mit Kontur aus Tinte,
 * hartem Schatten und Strichlinien wird eine ruhige, helle Fläche mit weissen
 * Karten, weichen Schatten und feinen Linien. Im Einzelnen:
 *   - Untergrund hell und kühl, Karten weiss, Linien fein statt Tinte.
 *   - Schatten weich statt gerade nach unten.
 *   - Knöpfe lassen sich weiter drücken, aber ihre Kante trägt die Farbe des
 *     Knopfs - Gelb ein dunkleres Gelb, Weiss ein Grau, Pflaume Pflaume.
 *   - Keine Strichlinien mehr für «zu» oder «ein Angebot»: Was zu ist, ist
 *     grau und trägt ein Schloss (V136); ein Angebot ist leicht getönt.
 *   - Die Kulissen verlieren ihre Kontur und werden helle Wellen.
 *
 * WAS BLEIBT, und es ist nicht verhandelbar: Richtig und falsch wiegen
 * gleich (R6, R9), nichts vergleicht (R7), die geschlossene Runde bleibt
 * gedämpft und ohne Gelb (docs/03 Abschnitt 4), Bewegung nur als Antwort und
 * nicht bei reduzierter Bewegung, Tippziele mindestens 44 px, Schrift über
 * 4.5:1. Die Türen der Räume bleiben, wie sie sind («die türen sind super»),
 * und die Anzeigen auch - Stufe, Anteil, Balken, Band (V130).
 *
 * WARUM AM ENDE UND NICHT IN DEN REGELN DARÜBER: So steht an einem Ort, was
 * V137 geändert hat, und es lässt sich lesen und zurücknehmen, ohne vierzig
 * Stellen zu suchen. Dieselbe Bauform wie V127.
 * ========================================================================== */

/* ---------- 1. Die Marken -------------------------------------------------- */
:root {
  /* Der Untergrund: hell und kühl, damit weisse Karten darauf stehen. */
  --plaster: #f1f4f9;
  --plaster-hi: #ffffff;
  --flaeche: #ffffff;
  /* Linien: fein für Karten, kräftiger für Felder, in die man schreibt. */
  --linie: rgba(22, 35, 59, 0.1);
  --linie-stark: rgba(22, 35, 59, 0.24);
  --hairline: rgba(22, 35, 59, 0.1);
  /* Flächen, die bis V136 ins Grüne gingen. */
  --track: #e2e7ef;
  --track-soft: #d2d9e5;
  --room-done: #e4f2e8;
  --room-locked: #eef1f6;
  --quiet: rgba(255, 255, 255, 0.6);
  --sky-low: #dbe7fb;
  --sky-high: #f5f8ff;
  /* Weiche Schatten statt gerader. */
  --schatten: 0 1px 2px rgba(22, 35, 59, 0.05), 0 6px 18px rgba(22, 35, 59, 0.07);
  --schatten-hoch: 0 2px 4px rgba(22, 35, 59, 0.06), 0 14px 32px rgba(22, 35, 59, 0.11);
  /* Die Kanten der Knöpfe, je in der Farbe ihres Knopfs. */
  --chalk-tief: #d6a312;
  --cobalt-tief: #1c37a1;
  --plum-tief: #5b2643;
  --grau-kante: rgba(22, 35, 59, 0.16);
  --kante: 0 4px 0 var(--chalk-tief);
  --kante-gedrueckt: 0 1px 0 var(--chalk-tief);
  /* Etwas grössere Rundungen. */
  --r: 16px;
  --r-gross: 22px;
  --r-karte: 18px;
  /* Die Kulissen: helle Wellen ohne Kontur. */
  --kulisse-linie: transparent;
  --kulisse-hang: #e3eaf8;
  --kulisse-hang-tief: #d2ddf3;
  --kulisse-sonne: #f8cd45;
  --kulisse-wolke: #ffffff;
}
/* Die geschlossene Runde behält ihre Pflaume - nur ohne Kontur. */
.frame.quiet {
  --kulisse-linie: transparent;
  --linie: rgba(91, 38, 67, 0.14);
  --linie-stark: rgba(91, 38, 67, 0.3);
}
body {
  background: var(--plaster);
}

/* ---------- 2. Karten: weiss, fein umrandet, weich beschattet --------------- */
.card,
.floorhead,
.regal,
.tower,
.stats,
.geschafft,
.wandregal,
.fachkachel,
.lernkarte,
.kartenkopf,
.kartenfach,
.stapel,
.kartenfachweg,
.karteikarte,
.anderswo,
.willkommenbild,
.streak,
.pill,
.tipp > .blase,
.aufgabenbild,
.room {
  border: 1px solid var(--linie);
}
.regal > .towers {
  border-top: 1px solid var(--linie);
}
/* Zwischenseiten und der Schritt der Anmeldung stehen erst ab 1024 px auf
   einer Karte (V127) - darunter bleiben sie ohne Rand. */
@media (min-width: 1024px) {
  .b-zwischen .pad,
  .b-anmelden .pad > .schritt {
    border: 1px solid var(--linie);
  }
}
/* Der Vorschlag ist eine Fläche in Kobalt und braucht keinen Rand. */
.next {
  border-color: transparent;
  box-shadow: var(--schatten-hoch);
}
.tipp > .blase::before {
  border-left-color: var(--linie);
  border-bottom-color: var(--linie);
}
.pill.quiet {
  border-color: var(--plum);
}
/* Die Aufgabe liegt weiter auf einem Stapel (V127) - die Karten dahinter
   sind jetzt weisse Blätter mit weichem Schatten statt Umrisse in Tinte. */
.lernkarte,
.frame.quiet .lernkarte {
  box-shadow:
    0 1px 2px rgba(22, 35, 59, 0.06),
    0 10px 26px rgba(22, 35, 59, 0.08),
    6px 7px 0 -1px var(--flaeche),
    6px 7px 0 0 var(--linie),
    12px 14px 0 -1px var(--flaeche),
    12px 14px 0 0 var(--linie);
}
@media (min-width: 1024px) {
  .lernkarte,
  .frame.quiet .lernkarte {
    box-shadow:
      0 2px 4px rgba(22, 35, 59, 0.06),
      0 16px 36px rgba(22, 35, 59, 0.09),
      8px 9px 0 -1px var(--flaeche),
      8px 9px 0 0 var(--linie),
      16px 18px 0 -1px var(--flaeche),
      16px 18px 0 0 var(--linie);
  }
}
.urteil {
  box-shadow: var(--schatten);
}
.fachkachel:active,
.tower:active {
  box-shadow: var(--schatten);
}
.kartenstapel::before,
.kartenstapel::after,
.kartenstapel-oben {
  border: 1px solid var(--linie);
}
.kartenstapel-oben {
  box-shadow: var(--schatten);
}
/* Die Stapel der Lernkarten und die Karteikarte selbst: Blätter mit feinem
   Rand statt Umrissen in Tinte. Das farbige Band oben auf der Karteikarte
   bleibt - es ist der Ton des Fachs (V128). */
.stapel {
  box-shadow:
    var(--schatten),
    4px 5px 0 -1px var(--flaeche),
    4px 5px 0 0 var(--linie),
    8px 10px 0 -1px var(--flaeche),
    8px 10px 0 0 var(--linie);
}
.stapel-nummer {
  border: 1px solid var(--linie);
}
.karteikarte {
  border-top: 10px solid var(--ton-tief);
  box-shadow:
    0 1px 2px rgba(22, 35, 59, 0.06),
    0 10px 26px rgba(22, 35, 59, 0.08),
    6px 7px 0 -1px var(--ton),
    6px 7px 0 0 var(--linie),
    12px 14px 0 -1px var(--flaeche),
    12px 14px 0 0 var(--linie);
}
@media (min-width: 1024px) {
  .karteikarte {
    box-shadow:
      0 2px 4px rgba(22, 35, 59, 0.06),
      0 16px 36px rgba(22, 35, 59, 0.09),
      8px 9px 0 -1px var(--ton),
      8px 9px 0 0 var(--linie),
      16px 18px 0 -1px var(--flaeche),
      16px 18px 0 0 var(--linie);
  }
}

/* ---------- 3. Felder, in die man schreibt -------------------------------- */
.answer,
.feld-zeile input,
.eingabe {
  border: 1.5px solid var(--linie-stark);
  background: var(--flaeche);
}
.answer:focus,
.feld-zeile input:focus,
.eingabe:focus {
  border-color: var(--cobalt);
  outline: 3px solid rgba(42, 79, 215, 0.22);
  outline-offset: 0;
}

/* ---------- 4. Knöpfe, die sich drücken lassen ----------------------------- */
/* Die Kante trägt die Farbe des Knopfs. Jede Art setzt ``--knopf-kante``,
   und die Regel darunter zeichnet sie - so bekommt kein weisser Knopf eine
   gelbe Kante, und in der geschlossenen Runde gibt es kein Gelb. */
.btn {
  --knopf-kante: var(--chalk-tief);
  border-color: transparent;
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--knopf-kante);
}
.btn:active:not([disabled]) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--knopf-kante);
}
.btn.still,
.btn.steuer {
  --knopf-kante: var(--grau-kante);
  background: var(--flaeche);
  border-color: var(--linie-stark);
}
.btn.gewaehlt {
  --knopf-kante: var(--cobalt-tief);
}
.btn.ghost {
  --knopf-kante: rgba(10, 20, 70, 0.28);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.72);
}
.frame.quiet [data-pruefen] {
  --knopf-kante: var(--plum-tief);
  border-color: var(--plum);
}
.btn[disabled],
.btn[aria-disabled="true"] {
  box-shadow: none;
}
.btn:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 3px;
}
/* Karten zum Antippen in einer Aufgabe: weiss mit feiner Linie und einer
   grauen Kante; die gewählte gelb, wie bisher - in der geschlossenen Runde
   Tinte (docs/03 Abschnitt 4). */
.karte-knopf {
  border: 1.5px solid var(--linie-stark);
  border-radius: 14px;
  background: var(--flaeche);
  box-shadow: 0 3px 0 var(--grau-kante);
}
.karte-knopf.wartet {
  border-color: var(--chalk-tief);
  box-shadow: 0 3px 0 var(--chalk-tief);
}
.frame.quiet .karte-knopf.wartet {
  border-color: var(--ink);
  box-shadow: 0 3px 0 var(--ink);
}
.paar-chip {
  border-color: transparent;
  box-shadow: 0 3px 0 var(--cobalt-tief);
}
.memory-karte {
  border: 1.5px solid var(--linie-stark);
  border-radius: 14px;
  box-shadow: 0 3px 0 var(--grau-kante);
}

/* ---------- 5. Die Navigation ----------------------------------------------- */
.top,
.nav {
  background: var(--plaster-hi);
}
.nav {
  border-top: 1px solid var(--linie);
  box-shadow: 0 -6px 20px rgba(22, 35, 59, 0.05);
}
.nav a {
  border-right: 0;
  color: var(--ink-soft);
}
/* Der offene Punkt: das Symbol auf einer gelben Pille und das Wort in Tinte -
   statt eines gelben Blocks über die ganze Breite. */
.nav a.on {
  background: transparent;
  color: var(--ink);
  font-weight: 700;
}
.nav a .navsymbol {
  box-sizing: content-box;
  padding: 4px 16px;
  border-radius: 999px;
}
.nav a.on .navsymbol {
  background: var(--chalk);
}
@media (min-width: 1024px) {
  .seitenmarke {
    border-right: 1px solid var(--linie);
    border-bottom: 1px solid var(--linie);
  }
  .frame.mit-nav > .nav {
    border-right: 1px solid var(--linie);
    box-shadow: none;
  }
  .frame.mit-nav > .nav a {
    color: var(--ink-soft);
  }
  .frame.mit-nav > .nav a.on {
    background: var(--chalk);
    border-color: transparent;
    color: var(--ink);
    box-shadow: 0 4px 0 var(--chalk-tief);
  }
  .frame.mit-nav > .nav a .navsymbol {
    padding: 0;
  }
  .frame.mit-nav > .nav a.on .navsymbol {
    background: none;
  }
}

/* ---------- 6. Was zu ist, was ein Angebot ist ------------------------------ */
/* Keine Strichlinien mehr: Zu ist grau und trägt ein Schloss (V136), ein
   Angebot ist leicht in Kobalt getönt - die Farbe, die docs/03 «Aktion»
   nennt. */
.room.locked {
  border-style: solid;
  box-shadow: none;
}
.room.locked::after {
  border-color: rgba(22, 35, 59, 0.22);
}
.room .tag {
  border-color: transparent;
  background: rgba(22, 35, 59, 0.07);
  font-weight: 700;
}
.room.now .tag {
  background: rgba(22, 35, 59, 0.1);
}
.jump,
.beispiel {
  border: 1px solid rgba(42, 79, 215, 0.2);
  background: linear-gradient(180deg, #e7eeff, #f4f7ff);
}
.raumcheck {
  border: 1px solid var(--linie);
  background: var(--flaeche);
  font-weight: 700;
  box-shadow: 0 3px 0 var(--grau-kante);
}
.kartenruhe {
  border: 1px solid var(--linie);
  background: var(--room-locked);
}
.bar {
  border: 0;
  background: var(--track);
}

/* ---------- 7. Die Stufen: Band und Leiste ---------------------------------- */
/* DAS BAND BLEIBT, WIE ES IST - nur ohne Strichlinie (V130: «diese anzeigen
   wie jetzt sind gut»). Gezeichnet wird es in app/web/schmuck.py mit festen
   Farbmarken; hier bekommen die drei Zustände ihr neues Aussehen über die
   Attribute, die das Band ohnehin trägt: gebaut moss, im Bau gelb, offen hell. */
.stockwerkband path[stroke-dasharray] {
  stroke-dasharray: none;
  stroke: var(--linie-stark);
}
.stockwerkband path[fill="var(--plaster-hi)"] {
  fill: var(--moss);
  stroke: var(--moss);
}
.stockwerkband path[fill="var(--chalk)"] {
  stroke: var(--chalk-tief);
}
.stufenfeld {
  --knopf-kante: var(--grau-kante);
  border: 1px solid var(--linie-stark);
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--knopf-kante);
}
.stufenfeld.fertig {
  --knopf-kante: #b9d9c3;
}
.stufenfeld.offen {
  --knopf-kante: var(--chalk-tief);
  border-color: transparent;
}
.stufenfeld.zu {
  border-style: solid;
  border-color: var(--linie);
}
.stufenfeld[aria-current="page"] {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--knopf-kante);
  border-width: 2px;
  border-color: var(--ink);
}
.stufenfeld.offen .stufenfeld-zeichen {
  border-color: var(--cobalt-tief);
}

/* ---------- 8. Die Kulissen: helle Wellen ----------------------------------- */
/* Die Anmeldung trägt ihren Himmel jetzt in Blau; Sonne und Wolken stehen
   ohne Kontur darin, und die Tür bleibt, wie sie ist. */
.willkommenbild {
  background: linear-gradient(180deg, var(--sky-low), var(--sky-high));
  box-shadow: var(--schatten);
}

/* ---------- 9. Der Adminbereich, in derselben Handschrift ------------------- */
.sca-kopf {
  border-bottom: 1px solid var(--linie);
  box-shadow: 0 1px 12px rgba(22, 35, 59, 0.04);
}
.sca-karte,
.sca-kachel,
.sca-filter,
.sca-tabellenrahmen,
.sca-hinweis {
  border: 1px solid var(--linie);
  box-shadow: var(--schatten);
}
.sca-tabelle {
  border: 0;
}
.sca-tabelle th {
  border-bottom: 1px solid var(--linie-stark);
}
.sca-kachel:active {
  box-shadow: var(--schatten);
}
.sca-kachel.ist-offen {
  border-color: rgba(124, 58, 94, 0.32);
  box-shadow: var(--schatten);
  background: #fbf6f9;
}
.sca-feld select,
.sca-feld input,
.sca-formular input,
.sca-formular textarea,
.sca-zeile input,
.sca-zeile select,
.sca-kopie,
.sca-code {
  border: 1.5px solid var(--linie-stark);
}
.sca-knopf {
  --knopf-kante: var(--chalk-tief);
  border-color: transparent;
  box-shadow: 0 3px 0 var(--knopf-kante);
}
.sca-knopf.still {
  --knopf-kante: var(--grau-kante);
  background: var(--flaeche);
  border-color: var(--linie-stark);
}
.sca-knopf.kopiert {
  --knopf-kante: var(--moss);
}
.sca-knopf.gefahr {
  --knopf-kante: var(--plum-tief);
}
.sca-zurueck a {
  border: 1px solid var(--linie-stark);
  box-shadow: 0 3px 0 var(--grau-kante);
}
.sca-leer {
  border: 1px solid var(--linie);
}
.sca-nav a[aria-current="page"] {
  border-color: transparent;
  box-shadow: 0 3px 0 var(--chalk-tief);
}

/* ==========================================================================
 * DIE FARBE DES CHECKS: IRIS STATT PFLAUME (V138)
 *
 * Angeordnet am 03.10.2026: «die farbe bei den checks ist nicht schön».
 * Das Pflaumenrot aus docs/03 Abschnitt 3, seit V103 der ganze Bildschirm
 * der geschlossenen Runde, wird ein Blauviolett - Iris. Gewählt aus vier
 * Proben im Browser (OPEN_QUESTIONS.md V138.2), und zwar aus einem Grund
 * über den Geschmack hinaus: Gegen Iris stehen Grün und Ziegelrot gleich
 * weit weg. Auf Pflaume ging das Rot unter und das Grün sprang heraus, auf
 * Petrol wäre es umgekehrt - und das Urteil muss für richtig und
 * falsch gleich wiegen (R6, R9).
 *
 * WIE: Die Marken der Pflaume werden IN DER GESCHLOSSENEN RUNDE umgesetzt,
 * nicht jede Regel einzeln - dieselbe Bauform wie V103 und V105 («Wer eine
 * Fläche umfärbt, setzt die Marke um und nicht die Eigenschaft»). Untergrund,
 * Kopfzeile, Pille, Knopf, Punktreihe, Hügel und Ladebalken ziehen damit mit,
 * auch auf den Seiten nach dem Check (check-zu, check-ergebnis).
 *
 * WAS BLEIBT: gedämpft, kein Gelb, getrennt von der Übung (docs/03
 * Abschnitt 4). Ausserhalb der Runde bleibt `--plum`, was es war - der
 * Schwanz des Scampy, die Fehlermeldung, der Adminbereich.
 * ========================================================================== */

:root {
  /* Iris: Weiss darauf 6.2:1, Iris auf ihrem Untergrund 5.2:1. */
  --iris: #5b4bd5;
  --iris-tief: #3e30a8;
  --iris-grund: #ebe9fc;
  --iris-hell: #f6f5ff;
  --iris-hang: #dcd8f8;
  --iris-hang-tief: #c9c3f2;
  --iris-linie: #8f87dc;
  /* Der Scampy behält seine Farben, auch im Check (V17, V39). */
  --scampi-pflaume: #7c3a5e;
}
.frame.quiet,
.pill.quiet {
  --plum: var(--iris);
  --plum-tief: var(--iris-tief);
  --plum-grund: var(--iris-grund);
  --plum-hell: var(--iris-hell);
  --plum-hang: var(--iris-hang);
  --plum-hang-tief: var(--iris-hang-tief);
  --plum-linie: var(--iris-linie);
}
.frame.quiet {
  --linie: rgba(62, 48, 168, 0.14);
  --linie-stark: rgba(62, 48, 168, 0.3);
}
.frame.quiet .zeichen {
  --plum: var(--scampi-pflaume);
}
@media (min-width: 1024px) {
  .frame.quiet .body {
    background:
      radial-gradient(640px 360px at 100% 0%, rgba(91, 75, 213, 0.1), transparent 70%),
      var(--plaster);
  }
}

/* DAS ANGEBOT TRÄGT DIE FARBE DESSEN, WOHIN ES FÜHRT. Der Sprung-Check im Fach
   war seit V137 leicht in Kobalt getönt, sein Knopf gelb - wer ihn drückte,
   landete in einer Iris-Runde. Jetzt sagt die Farbe vorher, was kommt: eine
   Prüfung. Gelb bleibt die Farbe fürs Bauen, Kobalt die der Türen und der
   Wahl. */
.jump {
  border: 1px solid rgba(91, 75, 213, 0.22);
  background: linear-gradient(180deg, #efedff, #f8f7ff);
}
@media (min-width: 1024px) {
  .b-fach .jump {
    background: linear-gradient(180deg, #efedff, #fbfaff);
  }
}
.jump .btn {
  --knopf-kante: var(--iris-tief);
  background: var(--iris);
  border-color: var(--iris);
  color: #fff;
}
.jump .btn:focus-visible,
.raumcheck:focus-visible {
  outline-color: var(--iris);
}
/* «Kannst du das schon?» unter einem Raum - dieselbe Sprache, leiser. */
.raumcheck {
  border-color: rgba(91, 75, 213, 0.28);
  color: var(--iris-tief);
  box-shadow: 0 3px 0 var(--iris-hang-tief);
}

/* ==========================================================================
 * DIE ZWISCHENSEITEN: EINE KARTE MIT BILD (V139)
 *
 * Zur Anordnung vom 03.10.2026: «das gesamtbild muss sich verbessern».
 * Vor einem Check, nach einem Ergebnis, wenn nichts zu üben ist oder ein
 * Fach fehlt, standen bis dahin eine kleine graue Überschrift, ein Satz und
 * Knöpfe - und darunter eine leere Fläche. Auf dem Telefon sah es aus wie
 * vergessen. Jetzt steht alles auf einer Karte in der Mitte, auf jeder
 * Breite: oben ein Bild (V136), darunter eine richtige Überschrift, der Satz
 * und die Knöpfe. Ein Steuerknopf «Zurück» bleibt über der Karte, wo jeder
 * Steuerknopf steht (V134).
 *
 * WAS DAS BILD NICHT TUT: Es sagt nichts über ein Ergebnis. Nach einem
 * Check steht für jedes Ergebnis dieselbe Stoppuhr da - ein anderes Bild für
 * bestanden wäre Lob, eines für nicht bestanden Tadel (R6, R9).
 * ========================================================================== */

/* Der Inhalt der Seite ist schmal und mittig; die Karte ist ``.zwischenkarte``
   und nicht mehr ``.pad`` selbst (V127 und V137 zeichneten ``.pad`` ab
   1024 px als Karte). */
.b-zwischen .pad {
  max-width: 600px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .b-zwischen .pad {
    margin: 32px auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
}
.zwischenkarte {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-top: 6px;
  padding: 26px 20px 22px;
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  background: var(--flaeche);
  box-shadow: var(--schatten-hoch);
  text-align: center;
}
.b-zwischen .pad > .btn.steuer + .zwischenkarte {
  margin-top: 16px;
}
.zwischenbild,
.zwischenkarte .leerbild {
  display: flex;
  justify-content: center;
  margin: 0 0 10px;
}
.zwischenbild .bild,
.zwischenkarte .leerbild .bild {
  width: 96px;
  height: 96px;
}
.zwischenkarte .leer-zeichen {
  margin: -6px 0 6px;
}
.zwischenkarte h1.sub {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}
.zwischenkarte > .hinweis,
.zwischenkarte > p:not(.expr) {
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 18px;
}
/* Ein Satz ÜBER der Überschrift (das Ergebnis nach abgelaufener Zeit) ist
   eine Zeile Zusammenhang und kein Absatz. */
.zwischenkarte > .hinweis:has(+ h1) {
  font-size: 14px;
  margin-bottom: 6px;
}
.zwischenkarte > .expr.sm {
  margin: 0 0 18px;
}
.zwischenkarte > form + .btn,
.zwischenkarte > .btn + .btn,
.zwischenkarte > form + form {
  margin-top: 12px;
}
@media (min-width: 1024px) {
  .zwischenkarte {
    padding: 36px 48px 34px;
  }
  .zwischenkarte h1.sub {
    font-size: 30px;
  }
  .zwischenbild .bild,
  .zwischenkarte .leerbild .bild {
    width: 112px;
    height: 112px;
  }
}
/* DER KNOPF, DER IN EINE PRÜFUNG FÜHRT, TRÄGT IHRE FARBE (V138). Und auf den
   Seiten, die selbst zur geschlossenen Runde gehören («Gerade nicht.», das
   Ergebnis), gibt es kein Gelb (docs/03 Abschnitt 4) - dort ist der Weg
   hinaus Iris statt Gelb. */
.pruefstart,
.frame.quiet .zwischenkarte .btn:not(.still) {
  --knopf-kante: var(--iris-tief);
  background: var(--iris);
  border-color: var(--iris);
  color: #fff;
}
.pruefstart:focus-visible,
.frame.quiet .zwischenkarte .btn:focus-visible {
  outline-color: var(--iris);
}

/* ==========================================================================
 * SCHRIFT, ZIFFERN UND DAS ENDE EINER RUNDE (V140)
 *
 * Zur Anordnung vom 03.10.2026: «das gesamtbild muss sich verbessern».
 * Drei Dinge, die über jeden Bildschirm gehen:
 *
 * 1. DIE NULL OHNE STRICH. Atkinson Hyperlegible zeichnet die Null mit einem
 *    Schrägstrich, als Hilfe für Menschen, die schlecht sehen - und damit
 *    stand überall «Ø % gebaut» und «Ø von 45 Stufen». Ein Kind schreibt die
 *    Null ohne Strich, und die Schrift hat keine Variante dafür (im Browser
 *    nachgesehen: ss01, ss02, salt und zero ändern nichts). Die zehn Ziffern
 *    kommen deshalb aus der zweiten Schrift des Hauses, Bricolage Grotesque,
 *    über `unicode-range` - ein späterer @font-face mit demselben Namen
 *    gewinnt für die Zeichen, die er abdeckt. Feste Breiten bleiben
 *    (tabular-nums, im Browser gemessen: 0000, 1111 und 8888 gleich breit).
 *
 * 2. ÜBERSCHRIFTEN UND LESETEXT. Gemessen auf sechs Bildschirmen: Die
 *    Überschrift einer Seite stand in 13 px Grau («Dein Ausweis», «Das bist
 *    du»), die eines Abschnitts ebenso, und über hundert Texte lagen
 *    zwischen 11 und 13 px. Jetzt eine Stufenfolge: Seite 22 px
 *    (Schreibtisch 30), Abschnitt 17 px (20), Lesetext 14 px (15), Angaben
 *    wie «Stufe 1 · 0 % gebaut» 13 px (14). Die Aufgabe selbst bleibt, wie
 *    V91 und V100 sie gemessen haben.
 *
 * 3. DAS ENDE EINER RUNDE ist eine Karte wie die Zwischenseiten (V139): mit
 *    dem Scampy beim Üben, einer grossen Überschrift und den Zahlen. Beim
 *    Check war der Weg hinaus gelb - in der geschlossenen Runde gibt es kein
 *    Gelb (docs/03 Abschnitt 4), jetzt ist er Iris. Die Karte sieht für
 *    jedes Ergebnis gleich aus (R6, R9); was dasteht, sagt der Server.
 * ========================================================================== */

/* ---------- 1. Die Null ohne Strich -------------------------------------- */
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0030-0039;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0030-0039;
}

/* ---------- 2. Überschriften und Lesetext -------------------------------- */
h1.sub,
h2.sub {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
}
h1.sub {
  font-size: 22px;
  line-height: 1.15;
  margin-bottom: 4px;
}
h2.sub {
  font-size: 17px;
  line-height: 1.2;
  margin-bottom: 3px;
}
.hinweis {
  font-size: 14px;
}
.next .eyebrow {
  font-size: 13px;
}
.next h2 + p {
  font-size: 14px;
}
.regal-nm small,
.tower .nm small,
.fachkachel-text small,
.srow .l small,
.srow .r small,
.stapel-text small,
.kartenfachweg-text small {
  font-size: 13px;
}
.stat span {
  font-size: 13.5px;
}
.veri {
  font-size: 13px;
}
.room .tag {
  font-size: 12px;
}
.raumcheck {
  font-size: 13.5px;
}
.jump p {
  font-size: 14px;
}
.pill {
  font-size: 13px;
}
.nav a {
  font-size: 12.5px;
}
@media (min-width: 1024px) {
  h1.sub {
    font-size: 30px;
    margin-bottom: 6px;
  }
  h2.sub {
    font-size: 20px;
  }
  .hinweis {
    font-size: 15px;
  }
  .regal-nm small,
  .tower .nm small,
  .fachkachel-text small,
  .srow .l small,
  .srow .r small,
  .stapel-text small,
  .kartenfachweg-text small {
    font-size: 14px;
  }
  .stat span {
    font-size: 14.5px;
  }
  .veri {
    font-size: 14px;
  }
  .jump p {
    font-size: 15px;
  }
  .raumcheck {
    font-size: 14px;
  }
}

/* ---------- 3. Das Ende einer Runde: eine Karte -------------------------- */
[data-ende]:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-top: 8px;
  padding: 24px 20px 22px;
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  background: var(--flaeche);
  box-shadow: var(--schatten-hoch);
  text-align: center;
}
[data-ende] .ende-zeichen {
  margin-top: 0;
}
[data-ende] h2.sub {
  font-size: 26px;
  line-height: 1.15;
  margin: 0 0 8px;
}
[data-ende] > p {
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 12px;
}
/* Die Zahlen der Übung («5 von 7 gestimmt.») in der Schrift der Aufgabe -
   gross genug, um sie zu sehen, und gleich gross bei jedem Ergebnis. */
[data-ende] > [data-ende-zahlen] {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 18px;
}
/* Ist die Runde zu Ende, führt die Karte hinaus - «Abbrechen» und der Satz
   über das Üben oder den Check stehen dann nur noch im Weg. Seit V159 auch
   die ganze Seite der Aufgabe: Bis dahin stand das Urteil der letzten
   Antwort über dem Ende, «Falsch» oder «Richtig» - und das Ende sieht für
   jedes Ergebnis gleich aus (V140, R6, R9). */
.pad:has(> [data-ende]:not([hidden])) > .btn.steuer,
.pad:has(> [data-ende]:not([hidden])) > .hinweis,
.pad:has(> [data-ende]:not([hidden])) > .rundenseite {
  display: none;
}
.frame.quiet [data-ende] .btn:not(.still) {
  --knopf-kante: var(--iris-tief);
  background: var(--iris);
  border-color: var(--iris);
  color: #fff;
}
@media (min-width: 1024px) {
  [data-ende]:not([hidden]) {
    max-width: 600px;
    width: 100%;
    margin: 24px auto 0;
    padding: 34px 48px 32px;
  }
  [data-ende] h2.sub {
    font-size: 32px;
  }
}

/* ==========================================================================
 * KÖPFE MIT BILD (V141)
 *
 * Zur Anordnung vom 03.10.2026: «das gesamtbild muss sich verbessern». Die
 * Bilder der Fächer gefallen (V138.1) - und standen an den beiden Orten,
 * an denen ein Fach am meisten zählt, klein in der Ecke: im Vorschlag der
 * Werkstatt mit 28 px neben dem Namen, im Kopf des Fachs mit 52 px auf
 * Weiss. Jetzt trägt der Vorschlag das Bild gross, und der Kopf des Fachs
 * steht im Ton seines Regals (V93) - dieselben fünf Töne wie in der
 * Werkstatt, keiner mit einer Bedeutung (moss, brick, chalk, Iris, cobalt
 * bleiben frei).
 * ========================================================================== */

/* ---------- 1. Der Vorschlag: das Fach im Bild -------------------------- */
.next .vorschlagsbild {
  position: absolute;
  top: 16px;
  right: 16px;
  line-height: 0;
}
.next .vorschlagsbild .fachbild {
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.35),
    0 8px 18px rgba(10, 20, 70, 0.28);
}
/* Die Zeilen neben dem Bild lassen ihm Platz; der Satz darunter und die
   Knöpfe gehen wieder über die ganze Breite. */
.next > .eyebrow,
.next > .vorschlagsfach,
.next > h2 {
  padding-right: 88px;
}
.next .vorschlagsfach {
  margin-top: 6px;
}
@media (min-width: 1024px) {
  .werkstatt-buehne .next {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .werkstatt-buehne .next > :not(.row):not(.vorschlagsbild) {
    grid-column: 2;
  }
  .werkstatt-buehne .next > .row {
    grid-column: 3;
  }
  .werkstatt-buehne .next > .vorschlagsbild {
    position: static;
    grid-column: 1;
    grid-row: 1 / span 4;
  }
  /* Die Grösse kommt als --bildkante aus app/web/bilder.py und steht im
     Markup; auf dem Schreibtisch wird sie hier überschrieben - darum das
     ``!important``, das sonst nirgends nötig ist. */
  .werkstatt-buehne .next > .vorschlagsbild .fachbild {
    --bildkante: 108px !important;
  }
  .next > .eyebrow,
  .next > .vorschlagsfach,
  .next > h2 {
    padding-right: 0;
  }
}

/* ---------- 2. Der Kopf des Fachs im Ton seines Regals ------------------ */
.floorhead.ton-sprachen {
  --ton: var(--ton-sprachen);
  --ton-tief: var(--ton-sprachen-tief);
}
.floorhead.ton-rechnen {
  --ton: var(--ton-rechnen);
  --ton-tief: var(--ton-rechnen-tief);
}
.floorhead.ton-forschen {
  --ton: var(--ton-forschen);
  --ton-tief: var(--ton-forschen-tief);
}
.floorhead.ton-welt {
  --ton: var(--ton-welt);
  --ton-tief: var(--ton-welt-tief);
}
.floorhead.ton-machen {
  --ton: var(--ton-machen);
  --ton-tief: var(--ton-machen-tief);
}
.floorhead[class*="ton-"] {
  background: linear-gradient(180deg, var(--ton) 0%, var(--flaeche) 82%);
}
/* Die Kachel des Bildes steht auf dem Ton - ein heller Rand hebt sie ab. */
.floorhead[class*="ton-"] .fachbild {
  box-shadow:
    0 0 0 3px var(--flaeche),
    0 4px 12px rgba(22, 35, 59, 0.12);
}

/* ========================================================================
 * V142 - «MEINE LERNWERKSTATT» (angeordnet am 03.10.2026: «benenne
 * werkstatt in meine Lernwerkstatt um»)
 *
 * Der Name ist länger als «Werkstatt». Auf einem schmalen Telefon bricht er
 * in der Navigation auf zwei Zeilen, und die stehen in der Mitte wie das
 * Symbol darüber - linksbündig sah es aus wie ein Versehen. Ab 1024 px ist
 * die Seitenleiste so breit, dass er auf einer Zeile steht: 264 px liessen
 * ihm 158 px, er braucht gut 170.
 * ===================================================================== */
.nav a {
  text-align: center;
  line-height: 1.15;
}
@media (min-width: 1024px) {
  :root {
    --seite: 288px;
  }
  .frame.mit-nav > .nav a {
    text-align: left;
  }
}

/* ========================================================================
 * V143 - DIE SPEZIALKURSE (angeordnet am 03.10.2026)
 *
 * Nur ein Konto, dem der Admin einen Kurs zugewiesen hat, sieht ihn - seit
 * V162 auf der Seite «Kurse» mit ihrem eigenen Punkt in der Navigation (bis
 * dahin in der Lernwerkstatt unter «Deine Spezialkurse») und auf seiner
 * eigenen Seite. Der Weg dorthin sieht aus wie der Weg zu den Lernkarten
 * (V128), die Seite hat den Kopf eines Fachs (V141) und darunter die Karte
 * der Zwischenseiten (V139). Das Wort «Spezialkurs» mit dem Doktorhut
 * unterscheidet einen Kurs vom Fach gleichen Namens.
 * ===================================================================== */
.kursliste {
  list-style: none;
  margin: 14px 0 18px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.kursliste .kartenfachweg {
  margin: 0;
}
.kursweg .fachbild {
  flex-shrink: 0;
}
.kursmarke {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.kursmarke-symbol {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--ton-tief, var(--ink-soft));
}
@media (min-width: 1024px) {
  .kursliste {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

/* Die Seite eines Kurses: schmal und mittig, wie eine Zwischenseite. Die
   Seite «Kurse» (V162) ebenso, nur breiter: Auf dem Schreibtisch stehen die
   Kurse dort in zwei Spalten. */
.b-kurs .pad {
  max-width: 680px;
  margin: 0 auto;
}
.b-kurse .pad {
  max-width: 760px;
  margin: 0 auto;
}
.b-kurse .kursweg .kartenfachweg-text strong {
  font-size: 19px;
}
@media (min-width: 1024px) {
  .b-kurse .pad {
    margin: 32px auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .b-kurs .pad {
    margin: 32px auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
}
.b-kurs .pad > .btn.steuer {
  margin-bottom: 16px;
}
.kurskopf .fachkopf {
  margin-bottom: 0;
}
.kurstitel {
  min-width: 0;
}
.kurstitel .kursmarke {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
}
.kurskopf h1.fach {
  margin: 0;
  font-size: 28px;
  overflow-wrap: anywhere;
}
/* Eine Beschreibung aus dem Adminbereich darf Zeilen tragen. */
.kursbeschreibung {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-line;
}
.kursleer {
  margin-top: 18px;
}
.kursleer h2.sub {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 8px;
}
.kursleer > .hinweis {
  margin-bottom: 4px;
}
@media (min-width: 1024px) {
  .kurskopf h1.fach {
    font-size: 34px;
  }
  .kursleer h2.sub {
    font-size: 26px;
  }
}

/* ========================================================================
 * V144 - DER INHALT DER SPEZIALKURSE (angeordnet am 03.10.2026)
 *
 * Der Kurs Englisch hat Inhalt: eine Kategorie («DD») mit fünf Gruppen, eine
 * je hochgeladene Datei. Angeordnet: «sehr wichtigt sind die kodierungen und
 * zu welchen kategorie die daten gehören» - also steht die Kategorie als
 * Überschrift da und jede Gruppe mit ihrer Kodierung («DD1_U1») über ihrem
 * Code («DD1 Unit 1»). Je Gruppe zwei Wege: Lernkarten (V128) und Memory
 * (V104). Gezeichnet mit den Marken von V137: weisse Karten, feine Linie,
 * weiche Schatten, der Ton des Regals als Fläche im Kopf.
 * ===================================================================== */
:is(.kurskategorie, .memorykopf, .kurstext-karte, .dossierkopf) {
  --ton: var(--ton-uebrig);
  --ton-tief: var(--ton-uebrig-tief);
}
:is(.kurskategorie, .memorykopf, .kurstext-karte, .dossierkopf).ton-sprachen {
  --ton: var(--ton-sprachen);
  --ton-tief: var(--ton-sprachen-tief);
}
:is(.kurskategorie, .memorykopf, .kurstext-karte, .dossierkopf).ton-rechnen {
  --ton: var(--ton-rechnen);
  --ton-tief: var(--ton-rechnen-tief);
}
:is(.kurskategorie, .memorykopf, .kurstext-karte, .dossierkopf).ton-forschen {
  --ton: var(--ton-forschen);
  --ton-tief: var(--ton-forschen-tief);
}
:is(.kurskategorie, .memorykopf, .kurstext-karte, .dossierkopf).ton-welt {
  --ton: var(--ton-welt);
  --ton-tief: var(--ton-welt-tief);
}
:is(.kurskategorie, .memorykopf, .kurstext-karte, .dossierkopf).ton-machen {
  --ton: var(--ton-machen);
  --ton-tief: var(--ton-machen-tief);
}

/* Die Seite des Kurses: die Richtung und die Kartei wie bei den Lernkarten. */
.b-kurs .richtung {
  margin-top: 18px;
}
.kurskartei {
  margin-bottom: 18px;
}

/* ---------- Eine Kategorie ---------------------------------------------- */
.kurskategorie {
  margin: 0 0 18px;
  padding: 0 0 14px;
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  background: var(--flaeche);
  box-shadow: var(--schatten);
  overflow: hidden;
}
.kurskategorie-kopf {
  padding: 14px 16px 12px;
  background: linear-gradient(180deg, var(--ton) 0%, var(--flaeche) 100%);
}
.kurskategorie-etikett {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ton-tief);
}
.kurskategorie h2 {
  margin: 2px 0 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
}
.kurskategorie-zahl {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--ink-soft);
}
/* Zwei Wege nebeneinander, gleich breit. */
.kurswege {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.kurskategorie > .kurswege {
  padding: 2px 16px 12px;
}
.kurswege .btn {
  justify-content: center;
  text-align: center;
}

/* ---------- Die Gruppen ------------------------------------------------- */
.kursgruppen {
  list-style: none;
  margin: 0;
  padding: 0 12px;
  display: grid;
  gap: 10px;
}
.kursgruppe {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--linie);
  border-radius: var(--r-karte);
  background: var(--flaeche);
}
.kursgruppe-text {
  min-width: 0;
}
/* DIE KODIERUNG DES DATEINAMENS, als Marke im Ton des Regals - die Gruppe,
   so wie sie hochgeladen wurde. Gleich breite Ziffern, damit U1 bis U5
   untereinander gleich aussehen. */
.kursgruppe-kodierung {
  display: inline-block;
  margin: 0 0 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ton);
  color: var(--ton-tief);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.kursgruppe h3 {
  margin: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.kursgruppe-zahl {
  margin: 2px 0 0;
  font-size: 13.5px;
  color: var(--ink-soft);
}
/* Ein anderer Code, den das Blatt einzelnen Karten gibt (V145): so, wie er
   dasteht, und etwas kräftiger als die Zahl davor. */
.kursgruppe-code {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.kursgruppe-wege {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.kursgruppe-wege .btn {
  justify-content: center;
  padding-top: 9px;
  padding-bottom: 9px;
  font-size: 14px;
}
@media (min-width: 640px) {
  .kursgruppen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Die Kategorien zum Aufklappen (V149) ------------------------ */
/* Mit vier Kategorien und fast fünfzig Gruppen ist jede Kategorie ein
   ``details`` wie die Regale der Lernwerkstatt (V93): Der Kopf ist die ganze
   Zusammenfassung, mit einem eigenen Pfeil, der sich beim Aufklappen dreht -
   Bewegung als Antwort auf eine Handlung, unter ``prefers-reduced-motion``
   ohne Übergang. Tippziel 44 px: Der ganze Kopf klappt. */
.kurskategorie:not([open]) {
  padding-bottom: 0;
}
.kurskategorie > summary {
  position: relative;
  display: block;
  min-height: 44px;
  padding-right: 48px;
  cursor: pointer;
  list-style: none;
}
.kurskategorie > summary::-webkit-details-marker {
  display: none;
}
.kurskategorie > summary:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: -3px;
}
.kurskategorie > summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  border-right: 2.5px solid var(--ton-tief);
  border-bottom: 2.5px solid var(--ton-tief);
  transform: rotate(45deg);
  transform-origin: 60% 60%;
}
.kurskategorie[open] > summary::after {
  transform: rotate(225deg);
}
@media (prefers-reduced-motion: no-preference) {
  .kurskategorie > summary::after {
    transition: transform 0.18s ease-out;
  }
}
.kurskategorie[open] > summary {
  margin-bottom: 12px;
}
.kurskategorie-etikett,
.kurskategorie-zahl {
  display: block;
}
/* Ein Weg allein - Lernkarten ohne Memory, wo nichts auf eine Spielkarte
   passt - steht über die ganze Breite und nicht als halber Knopf. */
:is(.kurswege, .kursgruppe-wege) > .btn:only-child {
  grid-column: 1 / -1;
}

/* ---------- Eine Lernkarte mit zwei Zeilen ------------------------------ */
/* Eine Sprechblase mit Frage und Antwort steht auf zwei Zeilen (V144). Nur
   Karten eines Kurses tragen einen Zeilenumbruch; jede andere Karte sieht
   aus wie bisher. */
.karteikarte .karte-text,
.karteikarte .karte-vorher > span {
  white-space: pre-line;
}

/* ---------- Das Memory -------------------------------------------------- */
/* Die Hügel am Fuss liegen hinter allem, wie bei den Lernkarten (V128):
   Ohne das lag «Nochmals spielen» auf einem kleinen Telefon unter ihnen -
   gesehen auf dem Bildschirmfoto bei 360 px. */
.b-kursmemory .body {
  position: relative;
}
.b-kursmemory .pad {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .b-kursmemory .pad {
    margin: 32px auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
}
.b-kursmemory .pad > .btn.steuer {
  margin-bottom: 16px;
}
.memorykopf {
  margin-bottom: 12px;
  padding: 14px 16px;
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  background: linear-gradient(180deg, var(--ton) 0%, var(--flaeche) 100%);
  box-shadow: var(--schatten);
}
.memorykopf-etikett {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ton-tief);
}
.memorykopf h1 {
  margin: 2px 0 6px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.memorykopf p:last-child {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
}
.memory-satz {
  min-height: 1.5em;
  margin: 0 0 10px;
  text-align: center;
}
/* DREI SPALTEN AUF DEM TELEFON, NICHT VIER. Hier liegen Wörter und keine
   Zahlen: «ein Badezimmer» ragte bei 390 px über den Rand, und ein Umbruch
   mitten im Wort machte aus «seventeen» ein «seventee-n» - beides gesehen
   auf dem Bildschirmfoto. Bei drei Spalten passt das längste Wort aus DD1
   («Schlafzimmer», «telefonieren») ganz auf eine Karte; zwölf Karten sind
   dann vier Reihen. Was trotzdem nicht passt, wird erst kleiner (V145,
   darunter) und erst dann getrennt - nach Silben, wo der Browser die
   Sprache kennt (``lang`` setzt das Skript beim Aufdecken). */
.kursmemory {
  --karte-innen: 4px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kursmemory .memory-karte.offen {
  font-size: 14px;
  padding: var(--karte-innen);
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}
/* EIN LANGES WORT WIRD KLEINER UND NIE ABGESCHNITTEN (V145). «eine
   Vogelscheuche», «Sommerferien» und seit V144 «ein Schlafzimmer» ragten bei
   360 px über die Karte, und ``overflow: hidden`` schnitt ab, was nicht
   passte: Als Flex-Element wird ein Text nie schmaler als sein längstes
   Wort, da hilft auch ``overflow-wrap`` nicht. Ein Raster mit einer Spalte
   von fester Breite lässt ihn umbrechen. Vorher macht ``kursmemory.js`` ein
   solches Wort kleiner, bis es ganz passt - umgebrochen wird erst unter
   11 px. */
.kursmemory .memory-karte.offen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  text-align: center;
}
/* SO MISST DAS SKRIPT: Kein Wort darf umbrechen, sonst ragte nie eines.
   Und der ganze Innenabstand steht vorn, zwei Pixel mehr dazu, hinten keiner,
   der Text links: Was über den Rand ragt, zählt der Browser in
   ``scrollWidth`` erst, wenn es über den Innenabstand hinaus ragt, und dann
   in ganzen Pixeln. Mit dem Abstand auf beiden Seiten passte «Sommerferien»
   gemessen und stand gezeigt als «Sommerferie» und darunter «n». */
.kursmemory .memory-karte.misst {
  padding-inline: calc(2 * var(--karte-innen) + 2px) 0;
  text-align: start;
  overflow-wrap: normal;
  -webkit-hyphens: manual;
  hyphens: manual;
}
@media (min-width: 560px) {
  .kursmemory {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 640px) {
  .kursmemory {
    --karte-innen: 6px;
    gap: 10px;
  }
  .kursmemory .memory-karte {
    min-height: 92px;
  }
  .kursmemory .memory-karte.offen {
    font-size: 16px;
  }
}
.memory-ende {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
}
.memory-wege {
  margin-top: 14px;
}
/* Ein Code eines Spezialkurses steht, wie er hochgeladen wurde: «DD1 Unit 1»
   und nicht in Grossbuchstaben wie das Etikett einer Karte eines Fachs. */
.karte-etikett.wie-geschrieben {
  text-transform: none;
  letter-spacing: 0.01em;
}

/* ========================================================================
 * V152 - EIN TEXT ZUM LESEN IN EINEM SPEZIALKURS (angeordnet am 04.10.2026)
 *
 * «wenn es nicht mit karten oder memory zu üben ist, anders anbieten»: Das
 * Blatt zum Material des Kurses Italienisch hat kein Wort mit einer
 * Übersetzung daneben, also steht es als Text da - auf einer Karte mit dem
 * Kopf eines Memorys, darunter der Text mit seinen Zeilen, Absätzen und
 * Einzügen, wie er kam. Schmal und mittig wie die Seite des Kurses, die
 * Hügel am Fuss hinter allem. Der Ton des Regals kommt über die Liste oben
 * (``:is(.kurskategorie, .memorykopf, .kurstext-karte, .dossierkopf)``).
 * ===================================================================== */
.b-kurstext .body {
  position: relative;
}
.b-kurstext .pad {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .b-kurstext .pad {
    margin: 32px auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
}
.b-kurstext .pad > .btn.steuer {
  margin-bottom: 16px;
}
.kurstext-karte {
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  background: var(--flaeche);
  box-shadow: var(--schatten);
  overflow: hidden;
}
.kurstext-kopf {
  padding: 14px 16px 12px;
  background: linear-gradient(180deg, var(--ton) 0%, var(--flaeche) 100%);
}
.kurstext-kopf h1 {
  margin: 2px 0 6px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.kurstext-kopf p:last-child {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
}
/* DER TEXT, WIE ER KAM: Zeilen, Leerzeilen und Einzüge bleiben stehen, und
   nur eine Zeile, die breiter ist als der Bildschirm, bricht um. Eine Stufe
   grösser als der Lesetext der übrigen Seiten (V140) - hier wird gelesen und
   nicht überflogen. */
.kurstext {
  margin: 0;
  padding: 4px 16px 18px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
@media (min-width: 1024px) {
  .kurstext-kopf {
    padding: 18px 24px 14px;
  }
  .kurstext-kopf h1 {
    font-size: 30px;
  }
  .kurstext {
    padding: 8px 24px 24px;
    font-size: 17px;
  }
}

/* ========================================================================
 * V153 - DIE DOSSIERS DES SPEZIALKURSES MATHEMATIK (angeordnet am 04.10.2026)
 *
 * «aufgaben so beibehalten wie sie sind. mit abbildungen. oft sind auch die
 * lösungen dabei»: Ein Dossier steht als Folge seiner Seiten da, jede Seite
 * ein Bild auf einer weissen Karte, darunter ihre Lösung zum Aufklappen.
 * Oben ein Kopf im Ton des Regals wie beim Text zum Lesen (V152) - der Ton
 * kommt über die Liste oben (``:is(..., .dossierkopf)``) - und eine Reihe von
 * Seitenzahlen zum Springen. Breiter als die Seite des Kurses, weil auf einer
 * Seite gelesen und gerechnet wird; auf dem Telefon füllt sie die Breite.
 * ===================================================================== */

/* Auf der Seite des Kurses: Bereiche einer Kategorie als Zwischentitel. */
.kursabschnitt {
  margin: 4px 16px 10px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ton-tief);
}
.kursgruppen + .kursabschnitt {
  margin-top: 20px;
}
.kursgruppe h4 {
  margin: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}
/* Die Kodierung eines Dossiers ist ein langer Dateiname: Sie darf brechen. */
.kursgruppe-dossier .kursgruppe-kodierung {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.b-kursdossier .body {
  position: relative;
}
.b-kursdossier .pad {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .b-kursdossier .pad {
    margin: 32px auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
}
.b-kursdossier .pad > .btn.steuer {
  margin-bottom: 16px;
}
.dossierkopf {
  padding: 14px 16px 16px;
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  background: linear-gradient(180deg, var(--ton) 0%, var(--flaeche) 120px);
  box-shadow: var(--schatten);
}
.dossierkopf .kursgruppe-kodierung {
  max-width: 100%;
  overflow-wrap: anywhere;
  background: var(--flaeche);
}
.dossierkopf h1 {
  margin: 2px 0 6px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
}
.dossierkopf-angaben,
.dossierkopf-zahl {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.dossierkopf-angaben {
  font-weight: 700;
}
.dossierkopf .kurswege {
  margin-top: 12px;
}
/* DER SPRUNG ZU EINER SEITE: jede Seitenzahl ein Ziel von 44 px, eine Seite
   mit Lösung trägt unten einen Strich im Ton des Regals. */
.dossiersprung {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.dossiersprung a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 6px;
  border: 1px solid var(--linie);
  border-radius: 10px;
  background: var(--flaeche);
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.dossiersprung a.mit-loesung {
  box-shadow: inset 0 -3px 0 var(--ton-tief);
}
.dossiersprung a:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

/* EINE SEITE: ihr Titel und das Bild auf einer weissen Karte. Ein Antippen
   öffnet das Bild allein, dort lässt es sich zoomen. */
.dossierseite {
  margin-top: 22px;
  scroll-margin-top: 16px;
}
.dossierseite-titel {
  margin: 0 0 8px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
}
.dossierbild {
  display: block;
  border: 1px solid var(--linie);
  border-radius: var(--r-karte);
  background: #fff;
  box-shadow: var(--schatten);
  overflow: hidden;
}
.dossierbild img {
  display: block;
  width: 100%;
  height: auto;
}
.dossierbild:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
/* DIE LÖSUNG ZUM AUFKLAPPEN: ein ``details`` ohne Skript, der Kopf ein
   Ziel über die ganze Breite, mit demselben Pfeil wie die Kategorien. */
.dossierloesung {
  margin-top: 10px;
  border: 1px solid var(--linie);
  border-radius: var(--r-karte);
  background: var(--flaeche);
}
.dossierloesung > summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 48px 10px 14px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: var(--ink);
}
.dossierloesung > summary::-webkit-details-marker {
  display: none;
}
.dossierloesung > summary:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: -3px;
}
.dossierloesung > summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2.5px solid var(--ink-soft);
  border-bottom: 2.5px solid var(--ink-soft);
  transform: rotate(45deg);
  transform-origin: 60% 60%;
}
.dossierloesung[open] > summary::after {
  transform: rotate(225deg);
}
@media (prefers-reduced-motion: no-preference) {
  .dossierloesung > summary::after {
    transition: transform 0.18s ease-out;
  }
}
.dossierloesung[open] > summary {
  border-bottom: 1px solid var(--linie);
}
.dossierloesung > .dossierbild {
  margin: 10px;
}
.dossierloesung-zu {
  margin: 14px 14px 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-soft);
}
.dossierloesung-alle {
  margin-top: 28px;
}
@media (min-width: 1024px) {
  .dossierkopf {
    padding: 18px 24px 20px;
  }
  .dossierkopf h1 {
    font-size: 30px;
  }
  .dossierseite-titel {
    font-size: 19px;
  }
}

/* ========================================================================
 * V154 - ERKLÄRUNGEN SCHRITT FÜR SCHRITT (angeordnet am 05.10.2026)
 *
 * «jetzt die step by step erklärungen bauen» - zu den Dossiers des Kurses
 * Mathematik, selbst geschrieben. Eine Erklärung ist eine Folge von Karten:
 * oben der Kopf im Ton des Regals mit dem Kern und dem Merksatz, darunter die
 * Beispiele, ein anderer Denkweg, die Stolperstellen und Aufgaben zum
 * Selbstprobieren. Die Schritte decken sich ohne Skript auf: Jeder weitere
 * steckt in einem ``details`` im Schritt davor.
 *
 * Die Bilder zeichnet ``app/web/erklaerbild.py`` - ihre Farben sind die
 * Marken hier: helle Flächen zum Füllen, Linien in den Farben der Palette.
 * Gleich gewichtet bleibt, was richtig und falsch ist: Ein häufiger Fehler
 * steht nicht lauter da als das Richtige (R6, R9).
 * ===================================================================== */
:root {
  --ebild-blau-hell: #dde5fb;
  --ebild-gelb: #a97d0b;
  --ebild-gelb-hell: #fcefc4;
  --ebild-grau-hell: #e8ecf2;
  --ebild-gitter: rgba(22, 35, 59, 0.11);
}

/* Die Schreibweise für Mathematik: Brüche übereinander, Wurzeln mit Strich. */
.bruch {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  margin: 0 0.12em;
  line-height: 1.12;
  font-size: 0.92em;
}
.bruch-z {
  padding: 0 0.18em 0.06em;
  border-bottom: 0.09em solid currentColor;
}
.bruch-n {
  padding: 0.06em 0.18em 0;
}
.wurzel {
  display: inline-flex;
  align-items: flex-start;
  white-space: nowrap;
}
.wurzel-zeichen {
  margin-right: -0.05em;
}
.wurzel-inhalt {
  padding: 0 0.12em;
  border-top: 0.09em solid currentColor;
  margin-top: 0.08em;
}
.wurzel-index {
  font-size: 0.6em;
  margin-right: -0.35em;
  align-self: flex-start;
}
.b-kurserklaerung mark {
  padding: 0 0.15em;
  border-radius: 4px;
  background: var(--ebild-gelb-hell);
  box-shadow: inset 0 -2px 0 var(--chalk);
  color: inherit;
}

/* Die Seite: schmal und mittig wie das Dossier, die Hügel am Fuss. */
.b-kurserklaerung .body {
  position: relative;
}
.b-kurserklaerung .pad {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .b-kurserklaerung .pad {
    margin: 32px auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
}
.b-kurserklaerung .pad > .btn.steuer {
  margin-bottom: 16px;
}

/* Der Kopf: Ton des Regals, Titel, Kern, Merksatz. */
.ekopf {
  --ton: var(--ton-uebrig);
  --ton-tief: var(--ton-uebrig-tief);
  padding: 14px 16px 16px;
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  background: linear-gradient(180deg, var(--ton) 0%, var(--flaeche) 130px);
  box-shadow: var(--schatten);
}
.ekopf.ton-rechnen {
  --ton: var(--ton-rechnen);
  --ton-tief: var(--ton-rechnen-tief);
}
.ekopf-marke {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ton-tief);
}
.ekopf h1 {
  margin: 4px 0 8px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
}
.ekern {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}
.emerke {
  margin: 12px 0 4px;
  padding: 12px 14px;
  border-radius: var(--r-karte);
  background: var(--ebild-gelb-hell);
  box-shadow: inset 4px 0 0 var(--chalk);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}
.emerke-etikett {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ebild-gelb);
}
.ekopf-wege {
  margin: 14px 0 0;
}

/* Die Karten darunter: Beispiele, Denkweg, Stolperstellen, Probieren. */
.ekarte {
  margin-top: 18px;
  padding: 14px 16px 16px;
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  background: var(--flaeche);
  box-shadow: var(--schatten);
  scroll-margin-top: 16px;
}
.ekarte-etikett {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ekarte h2 {
  margin: 4px 0 8px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
}
.ekarte > p {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.55;
}
.eaufgabe {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: var(--r-karte);
  background: var(--plaster);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--ink);
}

/* Die Schritte: eine Nummer, der Text, die Rechnung. */
.eschritte {
  margin-top: 4px;
}
.eschritt {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  padding: 10px 0 6px;
}
.eschritt-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--cobalt);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
}
.eschritt-inhalt {
  min-width: 0;
}
.eschritt-text {
  margin: 4px 0 8px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}
.erechnung {
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--plaster);
  overflow-x: auto;
}
.ezeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  min-height: 36px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
}
.ezeile-umformung {
  margin-left: auto;
  color: var(--cobalt);
  font-weight: 700;
  white-space: nowrap;
}
.etabelle-rahmen {
  margin: 0 0 8px;
  overflow-x: auto;
}
.etabelle {
  border-collapse: collapse;
  font-size: 16px;
}
.etabelle th,
.etabelle td {
  min-width: 44px;
  padding: 6px 10px;
  border: 1px solid var(--linie);
  text-align: center;
}
.etabelle th {
  background: var(--plaster);
  font-weight: 700;
}
.ebild-rahmen {
  margin: 4px 0 10px;
  padding: 8px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--linie);
  overflow-x: auto;
}
/* Ein Bild steht in seiner natürlichen Breite (``width`` im SVG) und wird
   nur kleiner, wo der Platz fehlt - so wird ein kleiner Kreis auf dem
   Telefon nicht riesig und ein breites Diagramm nicht abgeschnitten. */
.ebild {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  font-family: "Atkinson Hyperlegible", sans-serif;
}
.ebild-schriftlich {
  margin-left: 0;
}
/* Auf dem Telefon nimmt ein Bild in einem Schritt die ganze Breite der Karte,
   auch unter der Nummer: Ein breites Diagramm würde sonst so klein, dass seine
   Beschriftung unter 10 px fällt. */
@media (max-width: 639.98px) {
  .ebild-rahmen {
    padding: 4px;
  }
  .eschritt-inhalt .ebild-rahmen {
    margin-left: -40px;
  }
}
.ehinweis {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin: 0 0 6px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.ehinweis > .symbol {
  margin-top: 2px;
  color: var(--ebild-gelb);
}
/* Der Text des Hinweises ist EIN Stück im Flex: Ein Bruch darin bliebe sonst
   eine eigene Spalte. */
.ehinweis-text {
  min-width: 0;
}

/* «WEITER»: ein ``details``, der Kopf ein Knopf, solange er zu ist. Offen
   ist er nur noch die Überschrift des Schritts, der darunter steht. */
.eweiter > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 6px 0 4px 40px;
  padding: 8px 16px;
  border: 1.5px solid var(--cobalt);
  border-radius: 999px;
  background: var(--flaeche);
  box-shadow: 0 3px 0 var(--cobalt);
  color: var(--cobalt);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.eweiter > summary::-webkit-details-marker {
  display: none;
}
.eweiter > summary:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
.eweiter > summary:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--cobalt);
}
.eweiter-offen {
  display: none;
}
.eweiter[open] > summary {
  min-height: 0;
  margin: 8px 0 0;
  padding: 2px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink-soft);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.eweiter[open] > summary .eweiter-zu {
  display: none;
}
.eweiter[open] > summary .eweiter-offen {
  display: inline;
}
.eergebnis {
  margin: 6px 0 2px;
  padding: 12px 14px;
  border-radius: var(--r-karte);
  background: var(--ebild-blau-hell);
  box-shadow: inset 4px 0 0 var(--cobalt);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--ink);
}
@media (prefers-reduced-motion: no-preference) {
  .eweiter[open] > .eschritt,
  .eweiter[open] > .eergebnis {
    animation: eschritt-erscheinen 0.3s ease-out;
  }
}
@keyframes eschritt-erscheinen {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* PASS AUF: Fehler und Richtiges gleich gross, nebeneinander lesbar. */
.efehler-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}
.efehler-eintrag + .efehler-eintrag {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--linie);
}
.efehler-falsch,
.efehler-richtig {
  margin: 0 0 6px;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 17px;
  line-height: 1.5;
}
.efehler-falsch {
  background: var(--brick-hell);
}
.efehler-richtig {
  background: var(--moss-hell);
}
.efehler-etikett {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.efehler-warum {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}

/* SELBST PROBIEREN: die Aufgabe, darunter die Lösung zum Aufklappen. */
.eprobier-liste {
  margin: 0;
  padding-left: 22px;
}
.eprobier-liste > li + li {
  margin-top: 14px;
}
.eprobier-aufgabe {
  margin: 0 0 6px;
  font-size: 17px;
  line-height: 1.5;
}
.eprobier-loesung > p {
  margin: 0;
  padding: 10px 14px 12px;
  font-size: 16px;
  line-height: 1.5;
}

/* Weiter im Kurs: die Dossiers und die Nachbarn im Themenfeld. */
.eweg .ekarte-etikett + .kurswege,
.eweg .ekarte-etikett + .enachbarn {
  margin-top: 8px;
}
.eweg .kurswege + .ekarte-etikett {
  margin-top: 16px;
}
.enachbarn {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Auf der Seite des Kurses: die Erklärungen nach Themenfeld. */
.kurserklaerungen {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin: 0 16px 6px;
  padding: 0;
  list-style: none;
}
.kurserklaerungen a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: var(--flaeche);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.kurserklaerungen a:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
@media (min-width: 640px) {
  .kurserklaerungen {
    grid-template-columns: 1fr 1fr;
  }
}
/* Eine Erklärung mit Simulation sagt es im Weg dorthin (V267). */
.kurserklaerungen a {
  flex-wrap: wrap;
  gap: 2px 8px;
}
.kurssim {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--ebild-blau-hell);
  color: var(--cobalt);
  font-size: 12.5px;
}

/* Im Kopf eines Dossiers: die Erklärungen, die zu ihm passen. */
.dossiererklaert {
  margin-top: 14px;
  padding: 10px 12px 12px;
  border-radius: var(--r-karte);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  scroll-margin-top: 16px;
}
.dossiererklaert-titel {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ton-tief);
}
.dossiererklaert-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dossiererklaert-liste a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 12px;
  border: 1.5px solid var(--cobalt);
  border-radius: 999px;
  color: var(--cobalt);
  font-weight: 700;
  text-decoration: none;
}
.dossiererklaert-liste a:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

@media (min-width: 1024px) {
  .ekopf {
    padding: 18px 24px 20px;
  }
  .ekopf h1 {
    font-size: 32px;
  }
  .ekarte {
    padding: 18px 24px 20px;
  }
  .ekarte h2 {
    font-size: 23px;
  }
  .ekern,
  .ekarte > p,
  .eschritt-text {
    font-size: 17px;
  }
}

/* ==========================================================================
 * DAS FACHLICHE GEGENLESEN (V155, seit V161 eine Bestätigung).
 *
 * V155, angeordnet am 05.10.2026: «kennzeichne alle einträge mit einem
 * speziellen zeichen neben dem feedback button, wenn jemand supervisor ist».
 * V161, am selben Tag: «fachliches gegenlesen nur als das markieren wo du das
 * auch forderst. nicht bei jedem feedback. das ist nicht feedback, sondern
 * bestätigt diese aufgabe oder seite als gegengelesen.»
 *
 * Die Brille im Kreis steht jetzt in einer eigenen Zeile über dem Knopf
 * «Feedback», und nur, wo die Fragerunde ein Gegenlesen anfordert: Sie sagt,
 * was hier gegenzulesen ist, und trägt den Knopf, der es bestätigt. Der Knopf
 * «Feedback» darunter ist wieder gewöhnliches Feedback, wie vor V155.
 *
 * In Petrol, einer Farbe, die im Produkt sonst nichts sagt: nicht Gelb
 * (bauen), nicht Iris (prüfen), nicht Grün und Ziegelrot (das Urteil, R6 und
 * R9), nicht Kobalt (die Türen). Bestätigt sieht die Zeile ruhiger aus, nicht
 * grüner - sie ist ein Vermerk, kein Lob.
 * ========================================================================== */
:root {
  --gegenlesen: #0d6670;
  --gegenlesen-tief: #084a51;
  --gegenlesen-grund: #e0f2f3;
}
.feedback-zeile {
  margin-top: 22px;
}
.feedback-zeile .feedback {
  margin-top: 0;
}
.gegenlesen-zeile {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 22px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--gegenlesen-grund);
  box-shadow: inset 0 0 0 1.5px rgba(13, 102, 112, 0.35);
}
.gegenlesen-zeile[hidden] {
  display: none;
}
.gegenlesen-zeile.ist-bestaetigt {
  background: var(--flaeche);
}
.gegenlesen {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--flaeche);
  color: var(--gegenlesen);
  box-shadow: inset 0 0 0 1.5px var(--gegenlesen);
}
.gegenlesen-text {
  display: grid;
  justify-items: start;
  gap: 6px;
  min-width: 0;
  margin: 0;
}
.gegenlesen-titel {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--gegenlesen);
}
.gegenlesen-satz {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
}
.btn.gegenlesen-knopf {
  min-height: 44px;
  margin-top: 2px;
  padding: 0 16px;
  font-size: 15px;
}
.btn.gegenlesen-knopf:not(.still) {
  --knopf-kante: var(--gegenlesen-tief);
  background: var(--gegenlesen);
  border-color: var(--gegenlesen);
  color: #fff;
}
/* Im Adminbereich: dieselbe Brille vor dem Wort. */
.sca-etikett.gegenlesen-etikett {
  gap: 5px;
  border-color: var(--gegenlesen);
  background: var(--gegenlesen-grund);
  color: var(--gegenlesen);
}

/* ==========================================================================
 * BREIT UND NIEDRIG: EIN TABLET QUER (V159)
 *
 * Angeordnet am 05.10.2026: «Auf dem tablet muss man scrollen im landscape
 * ansicht. hochweg ist gut, aber wenn breit, dann muss man scrollen um alles
 * zu sehen, das soll nicht sein.» Hochkant ist ein Tablet schmaler als
 * 1024 px und hoch genug; quer gilt das Raster des Schreibtischs (V127), und
 * das rechnete mit einem hohen Fenster. Gemessen bei 1024 x 694 (Safari mit
 * Leiste) bis 1280 x 712: Auf der Lernkarte lagen «Umdrehen» und «Gewusst»
 * unter dem Rand, und nach einer Antwort in der Runde schob der Fokus auf
 * «Weiter» die Aufgabe nach oben aus dem Bild.
 *
 * WAS SICH ÄNDERT, NUR WO ES BREIT UND NIEDRIG IST: Der Kopf wird
 * schmaler, und die Bildschirme mit einer Sache - Runde, Check, Lernkarte -
 * stellen neben die Karte, was darunter stand: Tipp, Beispiel, Urteil und
 * «Weiter» in der Runde, «Umdrehen» oder «Gewusst» bei der Lernkarte. Was
 * eine Liste ist - die Lernwerkstatt, ein Fach, ein Kurs -, scrollt weiter,
 * wie hochkant auch. Bis 860 px Höhe, damit ein Schreibtisch mit hohem
 * Fenster bleibt, wie er war.
 * ========================================================================== */
@media (min-width: 1024px) and (max-height: 860px) {
  .top {
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    padding-bottom: 10px;
  }
  .hello {
    font-size: 22px;
  }
  .hello span {
    margin-top: 2px;
  }
  .b-runde .pad,
  .b-check .pad,
  .b-lernkarte .pad {
    padding-top: 18px;
    padding-bottom: 28px;
  }
  /* Das Memory hält seinen Abstand oben als Rand; unten genügt das Polster,
     das jeder letzte Abschnitt ohnehin trägt. */
  .b-kursmemory .pad {
    margin: 14px auto 0;
  }

  /* DIE RUNDE UND DER CHECK: links die Karte, rechts ihre Seite. Oben in
     einer Zeile der Ausgang und das Kennzeichen, darunter die Punktreihe. */
  .b-runde .pad,
  .b-check .pad {
    display: grid;
    max-width: 1180px;
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
    column-gap: 32px;
    align-items: start;
  }
  :is(.b-runde, .b-check) .pad > * {
    grid-column: 1 / -1;
  }
  :is(.b-runde, .b-check) .pad > .btn.steuer {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }
  :is(.b-runde, .b-check) .pad > .pill {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    margin: 0;
  }
  :is(.b-runde, .b-check) .pad > .dots {
    grid-row: 2;
    margin-top: 12px;
  }
  :is(.b-runde, .b-check) .pad > .lernkarte {
    grid-column: 1;
    grid-row: 3;
    margin-bottom: 0;
  }
  :is(.b-runde, .b-check) .pad > .rundenseite {
    grid-column: 2;
    grid-row: 3;
  }
  .rundenseite > :first-child .tipp {
    margin-top: 0;
  }
  /* Ist die Runde zu Ende, steht nur noch ihr Ende da - in einer Spalte. */
  :is(.b-runde, .b-check) .pad:has(> [data-ende]:not([hidden])) {
    display: block;
  }

  /* DIE LERNKARTE: links die Karte, rechts, was man mit ihr tut. Die Karte
     ist so hoch, wie das Fenster es zulässt, und nie höher als bisher. */
  .b-lernkarte .pad {
    display: grid;
    max-width: 1080px;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
    column-gap: 40px;
    align-items: center;
  }
  .b-lernkarte .pad > * {
    grid-column: 1 / -1;
  }
  .b-lernkarte .pad > .kartentisch {
    grid-column: 1;
    margin-bottom: 18px;
  }
  .b-lernkarte .pad > .kartenzug {
    grid-column: 2;
  }
  .b-lernkarte .karteikarte {
    min-height: clamp(250px, calc(100dvh - 290px), 420px);
    padding: 44px 32px 28px;
  }
}


/* ==========================================================================
 * DER WERKZEUGKASTEN ZUM ANTIPPEN (V160)
 *
 * Angeordnet am 05.10.2026: «Auf den Koffer unten muss man klicken
 * können..einmal kippt er um, oder fällt auseinander, ein anderesmal öffnet
 * er sich und scampy schaut heraus usw». Unten in der Seitenleiste, ab
 * 1024 px. Sechs Bewegungen, gezogen von ``koffer.js``: Er kippt um und
 * steht wieder auf, er fällt auseinander und setzt sich wieder zusammen, der
 * Deckel geht auf und der Scampy schaut heraus, es rumpelt darin, der
 * Scampy schwimmt eine Schleife, der Deckel fliegt hoch und landet wieder.
 * SEIT V439 ZWÖLF, angeordnet am 06.11.2026: «neue animationen zusätzlich
 * wenn man auf den koffer klickt» - die sechs neuen stehen in einem eigenen
 * Abschnitt am Ende dieses Teils.
 *
 * DREI TEILE AUS EINEM BILD. Griff, Deckel und Boden sind dasselbe Bild,
 * je auf seinen Streifen zugeschnitten: der Griff bis 31 % der Höhe, der
 * Deckel bis zur Naht bei 54 %, der Boden darunter - gemessen am Bild. Weil
 * jeder Teil das ganze Feld belegt, rechnen alle Drehpunkte im selben Mass.
 * Der Deckel reicht oben und unten ein Pixel über seinen Schnitt hinaus:
 * Zwei Kanten, die sich genau treffen, liessen beim Glätten eine helle Linie
 * stehen. Nicht der Griff - über ihm läge der Rand des Deckels, und der
 * flöge als feiner Strich mit.
 *
 * EINE ANGEORDNETE ABWEICHUNG VON docs/03 Abschnitt 3 («Ein einziger mutiger
 * Moment … Alles andere bleibt ruhig», «kein Hüpfen») - so eng wie möglich:
 * nur auf einen Fingertipp, nur dieser eine Kasten in der Seitenleiste, nie
 * in einer Runde, nie als Antwort auf eine Antwort (R6), ohne Ton, und nur
 * unter ``no-preference``. Bei reduzierter Bewegung steht für dieselbe Dauer
 * ein stilles Bild da - der Kasten liegt, ist auseinander oder steht offen
 * -, so wie sich die Lernkarte dann ohne Drehung wendet (V158). Dauer und
 * Richtung kommen aus dem Skript (``--dauer``, ``--richtung``).
 *
 * DER SCAMPY HÜPFT NICHT (V39): Er steigt aus dem Kasten, schaut sich um und
 * taucht wieder ab, oder er schwimmt eine Schleife. Bis er gebraucht wird,
 * wartet er unsichtbar hinter dem Boden.
 * ========================================================================== */
.koffer {
  position: relative;
  display: block;
  width: 112px;
  height: 112px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.koffer:disabled {
  cursor: default;
}
.koffer-innen,
.koffer-oben,
.koffer-teil {
  position: absolute;
  inset: 0;
  display: block;
}
.koffer-griff {
  clip-path: inset(0 0 69% 0);
  transform-origin: 50% 24%;
}
.koffer-deckel {
  clip-path: inset(calc(31% - 1px) 0 calc(46% - 1px) 0);
  transform-origin: 50% 42.5%;
}
.koffer-boden {
  clip-path: inset(54% 0 0 0);
  transform-origin: 50% 93%;
}
/* DAS INNERE: dunkel, hinter Deckel und Boden. Zu sehen ist es nur, wo der
   Deckel fehlt - sonst läge hinter einem gehobenen Deckel die Leiste, und
   der Kasten sähe aus wie zerschnitten. */
:root {
  --koffer-hohl: #8a1d44;
  --koffer-hohl-tief: #4f0d29;
}
.koffer-hohl {
  position: absolute;
  top: 40%;
  bottom: 44%;
  left: 11%;
  right: 11%;
  display: block;
  border-radius: 8px 8px 2px 2px;
  background: linear-gradient(var(--koffer-hohl-tief), var(--koffer-hohl));
}
/* Der Scampy wartet hinter dem Boden: oben an der Naht, unsichtbar. */
.koffer-scampi {
  position: absolute;
  top: 57%;
  left: calc(50% - 23px);
  display: block;
  width: 46px;
  height: 46px;
  visibility: hidden;
  transform-origin: 50% 100%;
}
/* Die Regel für die Zeichen der Ziele trifft jedes SVG in der Leiste -
   der Scampy im Kasten braucht deshalb die genauere. */
.frame.mit-nav > .nav .koffer-scampi .zeichen {
  display: block;
  width: 46px;
  height: 46px;
}
/* Wo eine Bewegung ihn braucht, ist er da - ob sie läuft oder still steht. */
:is(.koffer-gucken, .koffer-wackeln, .koffer-schwimmen, .koffer-tauchen) .koffer-scampi {
  visibility: visible;
}
/* Der Deckel klappt an der Seite auf, die der Richtung gegenüberliegt, und
   der Scampy steht auf der offenen Seite. */
:is(.koffer-gucken, .koffer-schwimmen, .koffer-blasen, .koffer-tauchen, .koffer-gaehnen)
  .koffer-oben {
  transform-origin: calc(50% - var(--richtung, 1) * 43%) 54%;
}
:is(.koffer-gucken, .koffer-schwimmen, .koffer-tauchen) .koffer-scampi {
  left: calc(50% - 23px + var(--richtung, 1) * 10px);
}
.koffer-kippen .koffer-innen {
  transform-origin: calc(50% + var(--richtung, 1) * 43%) 93%;
}
/* Der fliegende Deckel dreht sich um seine eigene Mitte, samt Griff, und der
   schwimmende Scampy um seine. */
.koffer-fliegen .koffer-oben {
  transform-origin: 50% 36%;
}
.koffer-schwimmen .koffer-scampi {
  transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: no-preference) {
  .koffer:not(:disabled):active .koffer-innen {
    transform: scale(0.97);
  }
  .koffer-kippen .koffer-innen {
    animation: koffer-kippen var(--dauer, 2.6s) linear both;
  }
  .koffer-zerfallen .koffer-innen {
    animation: koffer-zittern var(--dauer, 3s) linear both;
  }
  .koffer-zerfallen .koffer-griff {
    animation: koffer-griff-fort var(--dauer, 3s) linear both;
  }
  .koffer-zerfallen .koffer-deckel {
    animation: koffer-deckel-fort var(--dauer, 3s) linear both;
  }
  .koffer-zerfallen .koffer-boden {
    animation: koffer-boden-fort var(--dauer, 3s) linear both;
  }
  .koffer-gucken .koffer-oben {
    animation: koffer-aufklappen var(--dauer, 3.8s) linear both;
  }
  .koffer-gucken .koffer-scampi {
    animation: koffer-scampi-gucken var(--dauer, 3.8s) linear both;
  }
  .koffer-gucken .koffer-innen {
    animation: koffer-zuklappen var(--dauer, 3.8s) linear both;
  }
  .koffer-wackeln .koffer-innen {
    animation: koffer-rumpeln var(--dauer, 2s) linear both;
  }
  .koffer-wackeln .koffer-oben {
    animation: koffer-deckel-klappern var(--dauer, 2s) linear both;
  }
  .koffer-wackeln .koffer-scampi {
    animation: koffer-scampi-fuehler var(--dauer, 2s) linear both;
  }
  .koffer-schwimmen .koffer-oben {
    animation: koffer-weit-auf var(--dauer, 3.6s) linear both;
  }
  .koffer-schwimmen .koffer-scampi {
    animation: koffer-scampi-schleife var(--dauer, 3.6s) linear both;
  }
  .koffer-fliegen .koffer-oben {
    animation: koffer-deckel-flug var(--dauer, 2.2s) linear both;
  }
  .koffer-fliegen .koffer-boden {
    animation: koffer-boden-ruck var(--dauer, 2.2s) linear both;
  }
}

/* STILL, BEI REDUZIERTER BEWEGUNG: dasselbe Bild, ohne den Weg dorthin. */
@media (prefers-reduced-motion: reduce) {
  .koffer-kippen .koffer-innen {
    transform: rotate(calc(var(--richtung, 1) * 90deg));
  }
  .koffer-zerfallen .koffer-griff {
    transform: translate(calc(var(--richtung, 1) * -62px), 68px)
      rotate(calc(var(--richtung, 1) * -180deg));
  }
  .koffer-zerfallen .koffer-deckel {
    transform: translate(calc(var(--richtung, 1) * 58px), 6px)
      rotate(calc(var(--richtung, 1) * 68deg));
  }
  :is(.koffer-gucken, .koffer-schwimmen) .koffer-oben {
    transform: rotate(calc(var(--richtung, 1) * -40deg));
  }
  :is(.koffer-gucken, .koffer-schwimmen) .koffer-scampi {
    transform: translateY(-34px);
  }
  .koffer-wackeln .koffer-oben {
    transform: translateY(-14px);
  }
  .koffer-wackeln .koffer-scampi {
    transform: translateY(-11px);
  }
  .koffer-fliegen .koffer-oben {
    transform: translateY(-40px);
  }
}

/* 1. Er kippt um, liegt kurz und steht wieder auf. */
@keyframes koffer-kippen {
  0% {
    transform: rotate(0deg);
    animation-timing-function: ease-out;
  }
  10% {
    transform: rotate(calc(var(--richtung, 1) * 12deg));
    animation-timing-function: ease-in-out;
  }
  19% {
    transform: rotate(calc(var(--richtung, 1) * 5deg));
    animation-timing-function: ease-in;
  }
  37% {
    transform: rotate(calc(var(--richtung, 1) * 90deg));
    animation-timing-function: ease-out;
  }
  42% {
    transform: rotate(calc(var(--richtung, 1) * 83deg));
    animation-timing-function: ease-in;
  }
  47%,
  66% {
    transform: rotate(calc(var(--richtung, 1) * 90deg));
    animation-timing-function: ease-in-out;
  }
  84% {
    transform: rotate(0deg);
    animation-timing-function: ease-out;
  }
  90% {
    transform: rotate(calc(var(--richtung, 1) * 4deg));
    animation-timing-function: ease-in-out;
  }
  95%,
  100% {
    transform: rotate(0deg);
  }
}

/* 2. Er fällt auseinander: Erst zittert er, dann fliegt der Griff zur einen
   Seite und der Deckel zur anderen, der Boden sackt kurz ein. Nach einer
   Weile springt alles an seinen Platz zurück und rastet ein. */
@keyframes koffer-zittern {
  0%,
  13% {
    transform: none;
  }
  2% {
    transform: translateX(-1.5px) rotate(-1.5deg);
  }
  4% {
    transform: translateX(1.5px) rotate(1.5deg);
  }
  6% {
    transform: translateX(-1.5px) rotate(-1.5deg);
  }
  8% {
    transform: translateX(1.5px) rotate(1deg);
  }
  10% {
    transform: translateX(-1px) rotate(-0.5deg);
  }
  90% {
    transform: none;
    animation-timing-function: ease-out;
  }
  94% {
    transform: scale(1.04, 0.95);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: none;
  }
}
@keyframes koffer-griff-fort {
  0%,
  14% {
    transform: none;
    animation-timing-function: ease-out;
  }
  30% {
    transform: translate(calc(var(--richtung, 1) * -18px), -28px)
      rotate(calc(var(--richtung, 1) * -60deg));
    animation-timing-function: ease-in;
  }
  48% {
    transform: translate(calc(var(--richtung, 1) * -60px), 68px)
      rotate(calc(var(--richtung, 1) * -175deg));
    animation-timing-function: ease-out;
  }
  53% {
    transform: translate(calc(var(--richtung, 1) * -61px), 65px)
      rotate(calc(var(--richtung, 1) * -178deg));
    animation-timing-function: ease-in;
  }
  58%,
  74% {
    transform: translate(calc(var(--richtung, 1) * -62px), 68px)
      rotate(calc(var(--richtung, 1) * -180deg));
    animation-timing-function: ease-in-out;
  }
  90%,
  100% {
    transform: none;
  }
}
@keyframes koffer-deckel-fort {
  0%,
  14% {
    transform: none;
    animation-timing-function: ease-out;
  }
  28% {
    transform: translate(calc(var(--richtung, 1) * 10px), -18px)
      rotate(calc(var(--richtung, 1) * 14deg));
    animation-timing-function: ease-in;
  }
  46% {
    transform: translate(calc(var(--richtung, 1) * 58px), 6px)
      rotate(calc(var(--richtung, 1) * 68deg));
    animation-timing-function: ease-out;
  }
  51% {
    transform: translate(calc(var(--richtung, 1) * 57px), 3px)
      rotate(calc(var(--richtung, 1) * 64deg));
    animation-timing-function: ease-in;
  }
  56%,
  74% {
    transform: translate(calc(var(--richtung, 1) * 58px), 6px)
      rotate(calc(var(--richtung, 1) * 68deg));
    animation-timing-function: ease-in-out;
  }
  90%,
  100% {
    transform: none;
  }
}
@keyframes koffer-boden-fort {
  0%,
  14% {
    transform: none;
    animation-timing-function: ease-out;
  }
  20% {
    transform: scale(1.04, 0.93);
    animation-timing-function: ease-in-out;
  }
  28%,
  44% {
    transform: none;
    animation-timing-function: ease-out;
  }
  48% {
    transform: rotate(calc(var(--richtung, 1) * -3deg));
    animation-timing-function: ease-in-out;
  }
  54%,
  100% {
    transform: none;
  }
}

/* 3. Der Deckel geht auf, der Scampy steigt heraus, schaut nach links und
   nach rechts und taucht wieder ab; dann klappt der Deckel zu. */
@keyframes koffer-aufklappen {
  0% {
    transform: none;
    animation-timing-function: ease-out;
  }
  12% {
    transform: rotate(calc(var(--richtung, 1) * -45deg));
    animation-timing-function: ease-in-out;
  }
  17%,
  76% {
    transform: rotate(calc(var(--richtung, 1) * -40deg));
    animation-timing-function: ease-in;
  }
  86%,
  100% {
    transform: none;
  }
}
@keyframes koffer-scampi-gucken {
  0%,
  12% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  28% {
    transform: translateY(-34px);
    animation-timing-function: ease-in-out;
  }
  36% {
    transform: translateY(-34px) rotate(-10deg);
    animation-timing-function: ease-in-out;
  }
  44% {
    transform: translateY(-34px) rotate(0deg) scaleX(1);
    animation-timing-function: ease-in-out;
  }
  50% {
    transform: translateY(-34px) rotate(0deg) scaleX(-1);
    animation-timing-function: ease-in-out;
  }
  57% {
    transform: translateY(-34px) rotate(-10deg) scaleX(-1);
    animation-timing-function: ease-in-out;
  }
  63% {
    transform: translateY(-34px) rotate(0deg) scaleX(1);
    animation-timing-function: ease-in;
  }
  76%,
  100% {
    transform: translateY(0);
  }
}
@keyframes koffer-zuklappen {
  0%,
  85% {
    transform: none;
    animation-timing-function: ease-out;
  }
  89% {
    transform: scale(1.03, 0.96);
    animation-timing-function: ease-in-out;
  }
  94%,
  100% {
    transform: none;
  }
}

/* 4. Es rumpelt darin: Der Kasten wackelt, der Deckel klappert, und zum
   Schluss hebt er sich einen Spalt - zwei Fühler schauen heraus. */
@keyframes koffer-rumpeln {
  0%,
  44%,
  100% {
    transform: none;
  }
  4% {
    transform: rotate(-4deg);
  }
  9% {
    transform: rotate(4deg);
  }
  14% {
    transform: rotate(-3.5deg);
  }
  19% {
    transform: rotate(3.5deg);
  }
  24% {
    transform: rotate(-2.5deg);
  }
  29% {
    transform: rotate(2.5deg);
  }
  34% {
    transform: rotate(-1.5deg);
  }
  39% {
    transform: rotate(1deg);
  }
}
@keyframes koffer-deckel-klappern {
  0%,
  100% {
    transform: none;
  }
  6% {
    transform: translateY(-4px) rotate(-3deg);
  }
  11% {
    transform: none;
  }
  16% {
    transform: translateY(-4px) rotate(3deg);
  }
  21% {
    transform: none;
  }
  27% {
    transform: translateY(-3px) rotate(-2deg);
  }
  32%,
  48% {
    transform: none;
    animation-timing-function: ease-out;
  }
  56%,
  80% {
    transform: translateY(-14px);
    animation-timing-function: ease-in;
  }
  88% {
    transform: none;
  }
}
@keyframes koffer-scampi-fuehler {
  0%,
  54% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  62%,
  76% {
    transform: translateY(-11px);
    animation-timing-function: ease-in;
  }
  84%,
  100% {
    transform: translateY(0);
  }
}

/* 5. Der Deckel geht weit auf, der Scampy schwimmt eine Schleife über dem
   Kasten und taucht wieder ein. */
@keyframes koffer-weit-auf {
  0% {
    transform: none;
    animation-timing-function: ease-out;
  }
  12%,
  80% {
    transform: rotate(calc(var(--richtung, 1) * -40deg));
    animation-timing-function: ease-in;
  }
  90%,
  100% {
    transform: none;
  }
}
@keyframes koffer-scampi-schleife {
  0%,
  10% {
    transform: translate(0, 0) rotate(0deg);
    animation-timing-function: ease-out;
  }
  24% {
    transform: translate(0, -50px) rotate(calc(var(--richtung, 1) * -20deg));
    animation-timing-function: ease-in-out;
  }
  36% {
    transform: translate(calc(var(--richtung, 1) * 24px), -72px)
      rotate(calc(var(--richtung, 1) * 70deg));
    animation-timing-function: ease-in-out;
  }
  48% {
    transform: translate(calc(var(--richtung, 1) * 4px), -92px)
      rotate(calc(var(--richtung, 1) * 180deg));
    animation-timing-function: ease-in-out;
  }
  60% {
    transform: translate(calc(var(--richtung, 1) * -20px), -70px)
      rotate(calc(var(--richtung, 1) * 270deg));
    animation-timing-function: ease-in-out;
  }
  70% {
    transform: translate(0, -48px) rotate(calc(var(--richtung, 1) * 360deg));
    animation-timing-function: ease-in;
  }
  80%,
  100% {
    transform: translate(0, 0) rotate(calc(var(--richtung, 1) * 360deg));
  }
}

/* 6. Der Deckel fliegt hoch, dreht sich einmal und landet wieder. */
@keyframes koffer-deckel-flug {
  0% {
    transform: none;
    animation-timing-function: ease-out;
  }
  34% {
    transform: translateY(-52px) rotate(calc(var(--richtung, 1) * 180deg));
    animation-timing-function: ease-in;
  }
  66% {
    transform: translateY(0) rotate(calc(var(--richtung, 1) * 360deg));
    animation-timing-function: ease-out;
  }
  72% {
    transform: translateY(-5px) rotate(calc(var(--richtung, 1) * 360deg));
    animation-timing-function: ease-in;
  }
  78%,
  100% {
    transform: translateY(0) rotate(calc(var(--richtung, 1) * 360deg));
  }
}
@keyframes koffer-boden-ruck {
  0% {
    transform: none;
    animation-timing-function: ease-out;
  }
  6% {
    transform: scale(1.04, 0.94);
    animation-timing-function: ease-in-out;
  }
  14%,
  64% {
    transform: none;
    animation-timing-function: ease-out;
  }
  69% {
    transform: scale(1.04, 0.95);
    animation-timing-function: ease-in-out;
  }
  76%,
  100% {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
 * DIE SECHS BEWEGUNGEN SEIT V439, angeordnet am 06.11.2026: «neue animationen
 * zusätzlich wenn man auf den koffer klickt». Dieselben Teile und dieselben
 * Grenzen wie die ersten sechs: nur auf einen Fingertipp, ohne Ton, nur unter
 * ``no-preference`` und sonst ein stilles Bild für dieselbe Dauer. Dazu drei
 * Blasen, die aus dem Spalt unter dem Deckel steigen - in der Farbe des
 * Checks, rund und hell, und bis eine Bewegung sie braucht, nicht da.
 * -------------------------------------------------------------------------- */
.koffer-blasenfeld {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}
.koffer-blase {
  position: absolute;
  top: 44%;
  left: calc(50% - 6px + var(--richtung, 1) * 14px);
  display: block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(42, 79, 215, 0.75);
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 30%,
    #ffffff 0 22%,
    rgba(42, 79, 215, 0.18) 30% 100%
  );
  visibility: hidden;
}
.koffer-blase:nth-child(2) {
  left: calc(50% - 5px + var(--richtung, 1) * 4px);
  width: 10px;
  height: 10px;
}
.koffer-blase:nth-child(3) {
  left: calc(50% - 9px + var(--richtung, 1) * 24px);
  width: 18px;
  height: 18px;
}
.koffer-blasen .koffer-blase {
  visibility: visible;
}
/* Wer sich dreht, hüpft oder gähnt, tut es um seinen Boden; wer wirbelt, um
   seine Mitte, und der tauchende Scampy um seine. */
:is(.koffer-drehen, .koffer-huepfen, .koffer-gaehnen) .koffer-innen {
  transform-origin: 50% 93%;
}
.koffer-wirbeln .koffer-innen {
  transform-origin: 50% 58%;
}
.koffer-tauchen .koffer-scampi {
  transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: no-preference) {
  .koffer-drehen .koffer-innen {
    animation: koffer-drehen var(--dauer, 2s) linear both;
  }
  .koffer-huepfen .koffer-innen {
    animation: koffer-huepfen var(--dauer, 2.2s) linear both;
  }
  .koffer-huepfen .koffer-oben {
    animation: koffer-deckel-hopp var(--dauer, 2.2s) linear both;
  }
  .koffer-blasen .koffer-oben {
    animation: koffer-spalt var(--dauer, 3.4s) linear both;
  }
  .koffer-blasen .koffer-blase {
    animation: koffer-blase calc(var(--dauer, 3.4s) * 0.5) linear both;
    animation-delay: calc(var(--dauer, 3.4s) * 0.12);
  }
  .koffer-blasen .koffer-blase:nth-child(2) {
    animation-delay: calc(var(--dauer, 3.4s) * 0.24);
  }
  .koffer-blasen .koffer-blase:nth-child(3) {
    animation-delay: calc(var(--dauer, 3.4s) * 0.36);
  }
  .koffer-tauchen .koffer-oben {
    animation: koffer-tauch-deckel var(--dauer, 3.6s) linear both;
  }
  .koffer-tauchen .koffer-scampi {
    animation: koffer-scampi-tauchen var(--dauer, 3.6s) linear both;
  }
  .koffer-tauchen .koffer-innen {
    animation: koffer-tauch-zu var(--dauer, 3.6s) linear both;
  }
  .koffer-wirbeln .koffer-innen {
    animation: koffer-wirbeln var(--dauer, 2.2s) linear both;
  }
  .koffer-gaehnen .koffer-oben {
    animation: koffer-gaehnen-deckel var(--dauer, 3s) linear both;
  }
  .koffer-gaehnen .koffer-innen {
    animation: koffer-gaehnen-strecken var(--dauer, 3s) linear both;
  }
}

/* STILL, BEI REDUZIERTER BEWEGUNG: dasselbe Bild, ohne den Weg dorthin. */
@media (prefers-reduced-motion: reduce) {
  .koffer-drehen .koffer-innen {
    transform: scaleX(-1);
  }
  .koffer-huepfen .koffer-innen {
    transform: translateY(-24px);
  }
  :is(.koffer-blasen, .koffer-tauchen) .koffer-oben {
    transform: rotate(calc(var(--richtung, 1) * -14deg));
  }
  .koffer-blasen .koffer-blase {
    transform: translateY(-40px);
  }
  .koffer-blasen .koffer-blase:nth-child(2) {
    transform: translateY(-64px);
  }
  .koffer-blasen .koffer-blase:nth-child(3) {
    transform: translateY(-86px);
  }
  .koffer-tauchen .koffer-scampi {
    transform: translateY(-40px) rotate(calc(var(--richtung, 1) * -90deg))
      scaleX(calc(var(--richtung, 1) * -1));
  }
  .koffer-wirbeln .koffer-innen {
    transform: rotate(180deg);
  }
  .koffer-gaehnen .koffer-oben {
    transform: rotate(calc(var(--richtung, 1) * -58deg));
  }
}

/* 7. Er hebt sich, dreht sich einmal um sich selbst - zuerst die Kante, dann
   die Rückseite, wieder die Kante - und landet mit einem kleinen Stauchen. */
@keyframes koffer-drehen {
  0% {
    transform: none;
    animation-timing-function: ease-out;
  }
  12% {
    transform: translateY(-12px);
    animation-timing-function: ease-in;
  }
  30% {
    transform: translateY(-16px) scaleX(0.06);
    animation-timing-function: ease-out;
  }
  48% {
    transform: translateY(-16px) scaleX(-1);
    animation-timing-function: ease-in;
  }
  66% {
    transform: translateY(-16px) scaleX(0.06);
    animation-timing-function: ease-out;
  }
  80% {
    transform: translateY(-8px);
    animation-timing-function: ease-in;
  }
  88% {
    transform: scale(1.05, 0.94);
    animation-timing-function: ease-in-out;
  }
  94% {
    transform: scale(0.99, 1.01);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: none;
  }
}

/* 8. Er duckt sich und hüpft zweimal, der zweite Sprung kleiner; bei jeder
   Landung staucht er sich, und der Deckel klappert einmal nach. */
@keyframes koffer-huepfen {
  0% {
    transform: none;
    animation-timing-function: ease-out;
  }
  9% {
    transform: scale(1.08, 0.88);
    animation-timing-function: ease-out;
  }
  23% {
    transform: translateY(-38px) scale(0.94, 1.08) rotate(calc(var(--richtung, 1) * -4deg));
    animation-timing-function: ease-in;
  }
  37% {
    transform: scale(1.1, 0.86);
    animation-timing-function: ease-out;
  }
  45% {
    transform: none;
    animation-timing-function: ease-out;
  }
  51% {
    transform: scale(1.06, 0.9);
    animation-timing-function: ease-out;
  }
  63% {
    transform: translateY(-20px) scale(0.97, 1.04) rotate(calc(var(--richtung, 1) * 4deg));
    animation-timing-function: ease-in;
  }
  75% {
    transform: scale(1.07, 0.9);
    animation-timing-function: ease-out;
  }
  85% {
    transform: translateY(-3px) scale(0.99, 1.01);
    animation-timing-function: ease-in-out;
  }
  93%,
  100% {
    transform: none;
  }
}
@keyframes koffer-deckel-hopp {
  0%,
  37%,
  52%,
  75%,
  90%,
  100% {
    transform: none;
    animation-timing-function: ease-out;
  }
  42% {
    transform: translateY(-7px) rotate(calc(var(--richtung, 1) * 3deg));
    animation-timing-function: ease-in;
  }
  80% {
    transform: translateY(-4px) rotate(calc(var(--richtung, 1) * -2deg));
    animation-timing-function: ease-in;
  }
}

/* 9. Der Deckel hebt sich einen Spalt, drei Blasen steigen auf, wiegen sich
   und vergehen oben; dann fällt der Deckel zu. */
@keyframes koffer-spalt {
  0% {
    transform: none;
    animation-timing-function: ease-out;
  }
  10%,
  80% {
    transform: rotate(calc(var(--richtung, 1) * -14deg));
    animation-timing-function: ease-in;
  }
  88% {
    transform: none;
    animation-timing-function: ease-out;
  }
  92% {
    transform: translateY(-3px);
    animation-timing-function: ease-in;
  }
  96%,
  100% {
    transform: none;
  }
}
@keyframes koffer-blase {
  0% {
    transform: translate(0, 4px) scale(0.3);
    opacity: 0;
    animation-timing-function: ease-out;
  }
  14% {
    transform: translate(0, -10px) scale(0.75);
    opacity: 1;
    animation-timing-function: ease-in-out;
  }
  40% {
    transform: translate(5px, -38px) scale(0.9);
    animation-timing-function: ease-in-out;
  }
  65% {
    transform: translate(-4px, -64px) scale(1);
    opacity: 1;
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: translate(2px, -96px) scale(1.18);
    opacity: 0;
  }
}

/* 10. Der Scampy schwimmt von oben heran, auf der Seite, wo der Deckel
   aufgeht, dreht sich mit dem Kopf nach unten und taucht in den Kasten; der
   Deckel klappt zu. */
@keyframes koffer-tauch-deckel {
  0%,
  22% {
    transform: none;
    animation-timing-function: ease-out;
  }
  32%,
  70% {
    transform: rotate(calc(var(--richtung, 1) * -42deg));
    animation-timing-function: ease-in;
  }
  80%,
  100% {
    transform: none;
  }
}
@keyframes koffer-scampi-tauchen {
  0% {
    transform: translate(calc(var(--richtung, 1) * 70px), -104px)
      rotate(calc(var(--richtung, 1) * 10deg)) scaleX(calc(var(--richtung, 1) * -1));
    opacity: 0;
    animation-timing-function: ease-out;
  }
  10% {
    opacity: 1;
    animation-timing-function: ease-in-out;
  }
  30% {
    transform: translate(calc(var(--richtung, 1) * 34px), -96px)
      rotate(calc(var(--richtung, 1) * -4deg)) scaleX(calc(var(--richtung, 1) * -1));
    animation-timing-function: ease-in-out;
  }
  44% {
    transform: translate(calc(var(--richtung, 1) * 8px), -80px)
      rotate(calc(var(--richtung, 1) * -45deg)) scaleX(calc(var(--richtung, 1) * -1));
    animation-timing-function: ease-in-out;
  }
  54% {
    transform: translate(0, -56px) rotate(calc(var(--richtung, 1) * -90deg))
      scaleX(calc(var(--richtung, 1) * -1));
    animation-timing-function: ease-in;
  }
  64% {
    transform: translate(0, -14px) rotate(calc(var(--richtung, 1) * -90deg))
      scaleX(calc(var(--richtung, 1) * -1));
    opacity: 1;
    animation-timing-function: ease-in;
  }
  /* Im Kasten: weg, bevor ein Fühler unter dem Boden hervorschaut. */
  72%,
  100% {
    transform: translate(0, 4px) rotate(calc(var(--richtung, 1) * -90deg))
      scaleX(calc(var(--richtung, 1) * -1));
    opacity: 0;
  }
}
@keyframes koffer-tauch-zu {
  0%,
  79% {
    transform: none;
    animation-timing-function: ease-out;
  }
  84% {
    transform: scale(1.03, 0.96);
    animation-timing-function: ease-in-out;
  }
  90%,
  100% {
    transform: none;
  }
}

/* 11. Er holt aus, wirbelt einmal im Kreis, hebt sich dabei ein wenig und
   pendelt aus. */
@keyframes koffer-wirbeln {
  0% {
    transform: none;
    animation-timing-function: ease-in-out;
  }
  12% {
    transform: rotate(calc(var(--richtung, 1) * -14deg));
    animation-timing-function: ease-in;
  }
  55% {
    transform: translateY(-14px) rotate(calc(var(--richtung, 1) * 340deg)) scale(1.06);
    animation-timing-function: ease-out;
  }
  68% {
    transform: rotate(calc(var(--richtung, 1) * 372deg));
    animation-timing-function: ease-in-out;
  }
  78% {
    transform: rotate(calc(var(--richtung, 1) * 354deg));
    animation-timing-function: ease-in-out;
  }
  87% {
    transform: rotate(calc(var(--richtung, 1) * 363deg));
    animation-timing-function: ease-in-out;
  }
  94%,
  100% {
    transform: rotate(calc(var(--richtung, 1) * 360deg));
  }
}

/* 12. Er gähnt: Der Deckel geht langsam weit auf, der Kasten streckt sich,
   und nach einer Weile klappt der Deckel müde zu. */
@keyframes koffer-gaehnen-deckel {
  0% {
    transform: none;
    animation-timing-function: ease-in-out;
  }
  36% {
    transform: rotate(calc(var(--richtung, 1) * -56deg));
    animation-timing-function: ease-in-out;
  }
  58% {
    transform: rotate(calc(var(--richtung, 1) * -62deg));
    animation-timing-function: ease-in-out;
  }
  82% {
    transform: none;
    animation-timing-function: ease-out;
  }
  86% {
    transform: translateY(-3px);
    animation-timing-function: ease-in;
  }
  90%,
  100% {
    transform: none;
  }
}
@keyframes koffer-gaehnen-strecken {
  0% {
    transform: none;
    animation-timing-function: ease-in-out;
  }
  36% {
    transform: scale(0.97, 1.07);
    animation-timing-function: ease-in-out;
  }
  58% {
    transform: scale(0.97, 1.08);
    animation-timing-function: ease-in-out;
  }
  82% {
    transform: scale(1.04, 0.95);
    animation-timing-function: ease-in-out;
  }
  90%,
  100% {
    transform: none;
  }
}

/* ========================================================================
 * V163, V164, V170, V185 - DIE GAMES (angeordnet am 05.10.2026: «zudem ein
 * neuer navigationseitrag Ganes»)
 *
 * Ein Punkt in der Navigation. V163 legte dahinter je Fach ein Memory, V166
 * bis V169 die Klick-Karten; ihre Regeln sind mit ihnen gegangen - die
 * Klick-Karten gehören zum Lernen in den Stufen (V170).
 *
 * SEIT V185 DIE SPIELAUTOMATEN, angeordnet am 07.10.2026: «sie sollen wie
 * arcade automaten aussehen. je nach spiel das drauf ist, soll der automat
 * danach aussehen.» Die Halle ist eine Karte in einem hellen Lila - ein Ton,
 * der nur hier steht und nichts bedeutet -, darin die Automaten, heute der
 * Platzhalter. Die Farben eines Automaten setzen die Marken ``--automat-``
 * (unter ``:root`` der Platzhalter, je Spiel ``[data-aussehen]``), die
 * Zeichnung steht in ``app/web/automat.py``. Daneben, wie es geht: Coins
 * sammeln, freischalten, spielen. Auf dem Schreibtisch zwei Spalten.
 *
 * STILL (docs/03 Abschnitt 3): Kein Automat blinkt, keiner bewegt sich.
 * ===================================================================== */
.b-games .pad {
  max-width: 760px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .b-games .pad {
    width: calc(100% - 48px);
    max-width: 940px;
    margin: 32px auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
}
.gamesleitsatz {
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.5;
}
.spielplatz {
  display: grid;
  gap: 14px;
}
.spielhalle {
  background: #f1f2fb;
}
.automaten {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.automat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(220px, 64vw);
}
.automat-bild {
  display: block;
  width: 100%;
}
.automat-zeichnung {
  display: block;
  width: 100%;
  height: auto;
}
.automat-schrift {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
/* ZWEI WÖRTER, ZWEI ZEILEN (V224): Die englischen Namen der Automaten stehen
   je Wort auf einer Zeile, für alle in derselben Grösse - das längste Wort,
   «LANTERN», füllt den Leuchtkasten zwischen den beiden Sternen. */
.automat-schrift.zweizeilig {
  font-size: 20px;
  letter-spacing: 0.03em;
}
.automat-schild {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.automat-schild b {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 17px;
}
.automat-zustand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--ink-soft);
  font-size: 13.5px;
}
.automat-zustand .symbol {
  flex: 0 0 auto;
}
.automat-satz {
  color: var(--ink-soft);
  font-size: 14px;
}
.spielweg-coins {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 16px;
}
.spielweg-coins .bild {
  flex: 0 0 auto;
}
.spielweg-coins b {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 22px;
  font-weight: 800;
}
@media (min-width: 1024px) {
  .gamesleitsatz {
    font-size: 16px;
  }
  .spielplatz {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 20px;
  }
  .automat {
    width: 250px;
  }
  .spielweg .coinschritte li {
    font-size: 15px;
  }
}

/* ========================================================================
 * V166 - DIE KLICK-KARTEN: KARTEN IN KISTEN (angeordnet am 06.10.2026)
 *
 * Wenige Kisten oben, die Karten darunter: eine Karte antippen, dann ihre
 * Kiste (`klickkarten.js`). Die Kisten sind Holzkisten in der Farbe der
 * Werkbank - ein Ton der Kulissen, der nichts bedeutet. Ist eine Karte
 * gewählt, laden die Kisten mit einem Rand in Kobalt ein, der Farbe der Wahl.
 *
 * RICHTIG UND FALSCH WIEGEN GLEICH (R6, R9, V74.7): Eine Karte, die
 * einrastet, und eine, die zurückgleitet, bewegen sich gleich weit und gleich
 * lang, und keine wird grün oder rot. Bewegung nur auf eine Handlung hin und
 * nur unter `prefers-reduced-motion: no-preference` (docs/03 Abschnitt 3).
 * ===================================================================== */
.kistenbrett {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kisten-satz {
  margin: 0;
}
.kisten {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* DREI KISTEN NEBENEINANDER, AUCH AUF 360 px: Jede ist dann rund 100 px
   breit - genug für «Adjektiv» und zwei, drei Wörter darin. Bei fünf
   Kisten stehen drei oben und zwei unten, jede so breit, wie die Reihe es
   hergibt. */
.kiste {
  flex: 1 1 calc((100% - 16px) / 3);
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--linie-stark);
  border-radius: 14px;
  background: var(--flaeche);
  box-shadow: 0 3px 0 var(--grau-kante);
  overflow: hidden;
}
.kisten.paarweise .kiste {
  flex-basis: calc((100% - 8px) / 2);
}
.kiste-knopf {
  min-height: 44px;
  width: 100%;
  border: 0;
  border-bottom: 1.5px solid var(--linie-stark);
  background: var(--kulisse-holz);
  color: var(--ink);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 8px 6px;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.kiste-knopf:disabled {
  cursor: default;
}
/* EINE GEWÄHLTE KARTE MACHT DIE KISTEN ZU ZIELEN: ein Rand in Kobalt um jede
   Kiste, die sie aufnehmen kann. Ohne gewählte Karte stehen sie still. */
.kistenbrett:has(.karte-knopf.wartet):not(:has(.grosswahl)) .kiste {
  border-color: var(--cobalt);
  box-shadow: 0 3px 0 var(--cobalt-tief);
}
/* STEHT DER GROSSE ANFANGSBUCHSTABE AUS, ist nur noch die eine Kiste dran,
   in die die Karte gehört: sie in Tinte, die anderen still. */
.kiste.fragt {
  border-color: var(--ink);
  box-shadow: 0 3px 0 var(--ink);
}
.kiste-inhalt {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 4px;
  min-height: 52px;
  padding: 6px;
}
.kiste-karte {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 3px 8px;
  border: 1px solid var(--linie-stark);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 14px;
  overflow-wrap: anywhere;
}
/* OHNE PRÜFUNG LÄSST SICH EINE KARTE WIEDER HERAUSNEHMEN - dann ist sie ein
   Knopf und braucht die Höhe eines Knopfs (docs/03 Abschnitt 6). */
button.kiste-karte {
  min-height: 44px;
  cursor: pointer;
}
/* DER GROSSE ANFANGSBUCHSTABE (V165.3): zwei Schreibweisen desselben Worts,
   gross genug, dass man den einen Buchstaben sieht, um den es geht. */
.grosswahl {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.grosswahl-knopf {
  min-width: 112px;
  min-height: 52px;
  font-size: 22px;
}
.kistenstapel {
  justify-content: center;
}
@media (prefers-reduced-motion: no-preference) {
  .karte-knopf.zurueck {
    animation: kiste-zurueck 360ms ease-out;
  }
  .kiste-karte.neu {
    animation: kiste-hinein 360ms ease-out;
  }
}
/* ZURÜCK AUF DEN STAPEL: Die Karte kommt von oben, wo die Kisten stehen,
   und setzt sich an ihren Platz. Gleich weit und gleich lang wie das
   Einrasten darunter - keine der beiden Bewegungen ist die grössere. */
@keyframes kiste-zurueck {
  0% {
    transform: translateY(-12px);
    opacity: 0.35;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
@keyframes kiste-hinein {
  0% {
    transform: translateY(12px);
    opacity: 0.35;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
@media (min-width: 1024px) {
  .kiste-knopf {
    font-size: 16px;
  }
  .kiste-inhalt {
    min-height: 64px;
  }
}

/* ========================================================================
 * V167 - DER SATZZUG: SATZGLIEDER ALS WAGEN (angeordnet am 06.10.2026)
 *
 * Vorn die Lok, dahinter die Wagen, die schon hängen, und die Plätze, die
 * noch frei sind; darunter der Abstellplatz mit den Wagen, die noch kommen
 * (`klickkarten.js`). Jedes Stück steht auf seinem Stück Gleis, ohne Lücke
 * dazwischen - so läuft die Schiene auch unter einer zweiten Reihe weiter.
 * Schiene und Schwellen tragen die Töne der Kulissen, die nichts bedeuten.
 * Die freien Plätze tragen ihre Nummer, damit «an zweiter Stelle» etwas zum
 * Zeigen hat.
 *
 * RICHTIG UND FALSCH WIEGEN GLEICH (R6, R9, V74.7): Ein Wagen, der anhängt,
 * und einer, der zurückgleitet, bewegen sich gleich weit und gleich lang,
 * und keiner wird grün oder rot. Bewegung nur auf eine Handlung hin und nur
 * unter `prefers-reduced-motion: no-preference` (docs/03 Abschnitt 3).
 * ===================================================================== */
.zugbrett {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.zug-satz,
.zug-auch {
  margin: 0;
}
.zug {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  row-gap: 12px;
  padding: 10px 8px 8px;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--flaeche);
}
/* EIN STÜCK GLEIS: unten die Schiene, darüber die Schwellen aus Holz. */
.gleisstueck {
  display: inline-flex;
  align-items: flex-end;
  padding: 0 2px 11px;
  border-bottom: 3px solid var(--ink-soft);
  background: repeating-linear-gradient(
      90deg,
      var(--kulisse-holz) 0 5px,
      transparent 5px 11px
    )
    left bottom / 100% 5px no-repeat;
}
.lok-stueck {
  padding-bottom: 1px;
}
.zug-lok {
  display: block;
  width: 56px;
  height: 56px;
}
.wagen {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 40px;
  padding: 6px 10px;
  border: 1.5px solid var(--linie-stark);
  border-radius: 10px 10px 5px 5px;
  background: #fff;
  color: var(--ink);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
/* ZWEI RÄDER UNTER JEDEM WAGEN, auf der Schiene. */
.wagen::before,
.wagen::after {
  content: "";
  position: absolute;
  bottom: -11px;
  width: 11px;
  height: 11px;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  background: var(--flaeche);
  box-sizing: border-box;
}
.wagen::before {
  left: 7px;
}
.wagen::after {
  right: 7px;
}
/* DER PUNKT IST EIN KLEINER WAGEN mit einem grossen Punkt darauf. */
.wagen.ist-punkt {
  min-width: 44px;
  font-size: 26px;
  line-height: 1;
  padding-top: 0;
}
/* EIN FREIER PLATZ: blass, mit seiner Nummer, ohne Strichlinie (V137). */
.wagen.frei {
  min-width: 40px;
  border-color: transparent;
  background: var(--track);
  color: var(--ink-soft);
  font-size: 13px;
}
.wagen.frei::before,
.wagen.frei::after {
  border-color: var(--track-soft);
}
/* OHNE PRÜFUNG LÄSST SICH EIN WAGEN WIEDER ABHÄNGEN - dann ist er ein Knopf
   und braucht die Höhe eines Knopfs (docs/03 Abschnitt 6). */
button.wagen {
  min-height: 44px;
  cursor: pointer;
}
.zugstapel {
  justify-content: center;
}
.wagen-knopf.ist-punkt {
  min-width: 52px;
  font-size: 26px;
  line-height: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .wagen.neu {
    animation: wagen-an 360ms ease-out;
  }
}
/* ANHÄNGEN: Der Wagen rollt von rechts heran und hält. Gleich weit und
   gleich lang wie das Zurückgleiten auf den Abstellplatz (`kiste-zurueck`). */
@keyframes wagen-an {
  0% {
    transform: translateX(12px);
    opacity: 0.35;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
@media (min-width: 1024px) {
  .zug {
    padding: 14px 12px 10px;
  }
  .zug-lok {
    width: 64px;
    height: 64px;
  }
  .wagen {
    font-size: 16px;
    min-height: 44px;
  }
}

/* ========================================================================
 * V168 - DER ZAHLEN-ZERLEGER: ZAHLEN IN DIE FELDER EINER RECHNUNG
 * (angeordnet am 06.10.2026)
 *
 * Oben die Rechnung mit ihren Feldern, darunter - nur mit Prüfung - das Bild
 * dazu, ganz unten die Zahlenkarten des Felds, das dran ist
 * (`klickkarten.js`). Das Feld, das dran ist, trägt den Rand in Kobalt, der
 * Farbe der Wahl; ein leeres steht blass da, ohne Strichlinie (V137).
 *
 * DAS BILD SAGT NICHTS ÜBER DAS KIND: Im Zwanzigerfeld liegt die erste Zahl
 * in Tinte und, was dazukommt, im Ton des Regals «Rechnen» (V93) - einem Ton
 * ohne Bedeutung, kein Grün und kein Ziegelrot (R6, R9). Gleiche Teile stehen
 * als Gruppen in einem Rahmen.
 *
 * RICHTIG UND FALSCH WIEGEN GLEICH (R6, R9, V74.7): Eine Zahl, die ins Feld
 * kommt, und eine Karte, die zurückgleitet (`kiste-zurueck`), bewegen sich
 * gleich weit und gleich lang. Bewegung nur auf eine Handlung hin und nur
 * unter `prefers-reduced-motion: no-preference` (docs/03 Abschnitt 3).
 * ===================================================================== */
.zerlegbrett {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.zerleg-satz,
.zerleg-auch {
  margin: 0;
}
/* DIE RECHNUNG BRICHT ZWISCHEN IHREN ZEILEN UM, nie mitten in einer: Auf
   dem Telefon steht «8 + 5 =» über «8 + ? + ? = ?», auf dem Schreibtisch
   alles in einer Reihe. */
.zerleg-rechnung {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 12px;
  padding: 14px 10px;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--flaeche);
}
.zerleg-zeile {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.zerleg-zahl,
.zerleg-zeichen {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  line-height: 1;
}
.zerleg-zahl {
  font-size: 28px;
  color: var(--ink);
}
.zerleg-zeichen {
  font-size: 24px;
  color: var(--ink-soft);
}
.zerleg-feld {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  padding: 0 6px;
  border: 2px solid var(--linie-stark);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
}
.zerleg-feld.ist-leer {
  border-color: transparent;
  background: var(--track);
}
.zerleg-feld.ist-dran {
  border-color: var(--cobalt);
  box-shadow: 0 3px 0 var(--cobalt-tief);
}
/* OHNE PRÜFUNG LÄSST SICH EIN FELD WIEDER LEEREN - dann ist es ein Knopf. */
button.zerleg-feld {
  cursor: pointer;
}
.zerleg-stapel {
  justify-content: center;
}
.zahlkarte {
  min-width: 52px;
  font-size: 20px;
}
/* DAS ZWANZIGERFELD: zwei Reihen zu zehn, nach der fünften eine Lücke, damit
   man fünf und fünf sieht, ohne zu zählen. */
.zwanzigerfeld {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.zwanzigerreihe {
  display: flex;
  gap: 3px;
}
.feldpunkt {
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--track-soft);
  border-radius: 50%;
  box-sizing: border-box;
}
.zwanzigerreihe .feldpunkt:nth-child(5) {
  margin-right: 7px;
}
.feldpunkt.ist-voll {
  border-color: var(--ink-soft);
  background: var(--ink-soft);
}
.feldpunkt.ist-dazu {
  border-color: var(--ton-rechnen-tief);
  background: var(--ton-rechnen-tief);
}
/* GLEICHE TEILE: je Teil ein Rahmen, darin höchstens fünf Punkte in einer
   Reihe - so passen auch zehn Teile zu zehn auf ein Telefon. */
.gruppenbild {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.gruppe-rahmen {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  max-width: calc(5 * 12px + 4 * 3px + 2 * 6px + 3px);
  padding: 6px;
  border: 1.5px solid var(--linie-stark);
  border-radius: 10px;
  background: var(--flaeche);
}
.gruppe-rahmen .feldpunkt {
  width: 12px;
  height: 12px;
}
@media (prefers-reduced-motion: no-preference) {
  .zerleg-feld.neu {
    animation: kiste-hinein 360ms ease-out;
  }
}
@media (min-width: 1024px) {
  .zerleg-rechnung {
    padding: 18px 14px;
  }
  .zerleg-zahl {
    font-size: 32px;
  }
  .zerleg-feld {
    min-width: 56px;
    height: 56px;
    font-size: 30px;
  }
  .feldpunkt {
    width: 26px;
    height: 26px;
  }
  .gruppe-rahmen .feldpunkt {
    width: 14px;
    height: 14px;
  }
  .gruppe-rahmen {
    max-width: calc(5 * 14px + 4 * 3px + 2 * 6px + 3px);
  }
}

/* ========================================================================
 * V169 - DER KREIS DES LEBENS: STATIONEN IM KREIS (angeordnet am 06.10.2026)
 *
 * Oben der Satz, was dran ist, darunter der Kreis mit seinen Plätzen und den
 * Pfeilen dazwischen, ganz unten die Karten, die noch nicht im Kreis liegen
 * (`klickkarten.js`). Der erste Platz ist oben, jeder weitere folgt im
 * Uhrzeigersinn; der Platz, der dran ist, trägt den Rand in Kobalt, der Farbe
 * der Wahl, und ein freier steht blass da, ohne Strichlinie (V137). Wo ein
 * Platz liegt, rechnet das Skript (`--x`, `--y`), damit drei, vier und fünf
 * Stationen dieselbe Regel haben; mit fünf sind die Plätze schmaler
 * (`ist-eng`).
 *
 * DER RING SAGT NICHTS ÜBER DAS KIND: Ein Pfeil wird dunkel, sobald auf
 * beiden Seiten eine Karte liegt, und ist der Kreis geschlossen, wird der
 * ganze Ring dunkel, in Tinte. Nicht im Ton des Regals «Forschen»: Der ist
 * grün, und ein Ring, der beim Schliessen grün wird, wäre Lob (R6) - kein
 * Grün und kein Ziegelrot.
 *
 * RICHTIG UND FALSCH WIEGEN GLEICH (R6, R9, V74.7): Eine Karte, die in den
 * Kreis kommt (`kiste-hinein`), und eine, die zurückgleitet
 * (`kiste-zurueck`), bewegen sich gleich weit und gleich lang. Bewegung nur
 * auf eine Handlung hin und nur unter `prefers-reduced-motion:
 * no-preference` (docs/03 Abschnitt 3). Der Platz steht über `translate`
 * an seiner Stelle und nicht über `transform` - so verschiebt die Bewegung
 * ihn nicht.
 * ===================================================================== */
.kreisbrett {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kreis-satz {
  margin: 0;
}
/* DER KREIS IST SEIN EIGENER MASSSTAB: Die Schrift der Plätze richtet sich
   nach seiner Breite (`cqi`), so passt ein langes Wort auf jeder Breite. */
.kreis {
  position: relative;
  width: min(100%, 22rem);
  aspect-ratio: 1;
  margin: 0 auto;
  container-type: inline-size;
}
.kreis-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.kreis-ring circle {
  fill: none;
  stroke: var(--track);
  stroke-width: 1.4;
}
.kreis-pfeil {
  fill: var(--track-soft);
}
.kreis-pfeil.ist-gelegt {
  fill: var(--ink-soft);
}
.kreis.ist-geschlossen .kreis-ring circle {
  stroke: var(--ink-soft);
  stroke-width: 1.8;
}
.kreis.ist-geschlossen .kreis-pfeil {
  fill: var(--ink-soft);
}
/* EIN PLATZ IST ETWA EIN DRITTEL SO BREIT WIE DER KREIS: Mit drei und vier
   Stationen berühren sich die Plätze auch so nicht, und neben dem linken und
   dem rechten bleibt ein Rand; mit fünf werden sie schmaler (`ist-eng`). */
.kreis-platz {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  width: 34%;
  min-height: 76px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  border: 1.5px solid var(--linie-stark);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 3px 0 var(--grau-kante);
  font: inherit;
}
.kreis.ist-eng .kreis-platz {
  width: 30%;
}
.kreis-platz.ist-frei {
  border-color: transparent;
  background: var(--track);
  box-shadow: none;
}
.kreis-platz.ist-dran {
  border: 2px solid var(--cobalt);
  background: #fff;
  box-shadow: 0 3px 0 var(--cobalt-tief);
}
/* OHNE PRÜFUNG LÄSST SICH EINE KARTE WIEDER WEGNEHMEN - dann ist sie ein Knopf. */
button.kreis-platz {
  cursor: pointer;
}
.station-bild {
  display: block;
  width: 40px;
  height: 40px;
}
.station-wort {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
  hyphens: manual;
}
.kreis-platz .station-wort {
  font-size: clamp(12px, 4.1cqi, 15px);
}
.kreisstapel {
  justify-content: center;
}
.station-knopf {
  flex-direction: column;
  gap: 2px;
  min-width: 88px;
  padding: 6px 10px 8px;
}
@media (prefers-reduced-motion: no-preference) {
  .kreis-platz.neu {
    animation: kiste-hinein 360ms ease-out;
  }
}
@media (min-width: 1024px) {
  .kreis {
    width: min(100%, 26rem);
  }
  .kreis-platz {
    min-height: 92px;
  }
  .station-bild {
    width: 52px;
    height: 52px;
  }
  .station-knopf {
    min-width: 104px;
  }
  .station-knopf .station-wort {
    font-size: 15px;
  }
}
/* BREIT UND NIEDRIG (V159): Die Karten stehen in einer Spalte neben dem
   Kreis statt darunter, je mit dem Bild vor dem Wort, und der Kreis wird
   etwas kleiner - so passt die Runde ins Fenster, ohne zu scrollen. Der Satz,
   was dran ist, bleibt über beiden. */
@media (min-width: 1024px) and (max-height: 860px) {
  .kreisbrett {
    display: grid;
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    column-gap: 18px;
    align-items: center;
  }
  .kreis-satz {
    grid-column: 1 / -1;
  }
  .kreis {
    width: 100%;
    margin: 0;
  }
  .kreis-platz {
    min-height: 70px;
  }
  .kreis-platz .station-bild {
    width: 36px;
    height: 36px;
  }
  .kreisstapel {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 6px;
  }
  .station-knopf {
    flex-direction: row;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    min-height: 44px;
    padding: 4px 10px;
  }
  .station-knopf .station-bild {
    width: 30px;
    height: 30px;
  }
  .station-knopf .station-wort {
    font-size: 14px;
    text-align: left;
  }
}

/* ========================================================================
 * V171 - DER MAGNET: DAS VERB NACH «WEIL» AN DEN SCHLUSS
 * (angeordnet am 06.10.2026)
 *
 * Oben der Satz, was dran ist, darunter die Zeile: der erste Satz, das
 * Bindewort mit dem Magneten, die Wörter des zweiten und der Punkt, mit einer
 * Lücke vor, zwischen und nach ihnen; ganz unten das Verb (`klickkarten.js`).
 * Eine Lücke ist ein schmaler Strich in einem Feld, das sich antippen lässt,
 * 44 px hoch (docs/03 Abschnitt 6). Ist das Verb gewählt, stehen die Striche
 * in Kobalt, der Farbe der Wahl; ein Strich ohne Strichlinie (V137).
 *
 * DER MAGNET SAGT NICHTS ÜBER DAS KIND: Er steht am Bindewort von Anfang an
 * und ändert sich nie - er leuchtet bei keinem Zug auf, weder rot noch grün
 * (R6, R9). Auch das Verb in der Zeile trägt keine eigene Farbe.
 *
 * RICHTIG UND FALSCH WIEGEN GLEICH (R6, R9, V74.7): Ein Verb, das einrastet
 * (`kiste-hinein`), und eines, das zurückgleitet (`kiste-zurueck`), bewegen
 * sich gleich weit und gleich lang. Bewegung nur auf eine Handlung hin und nur
 * unter `prefers-reduced-motion: no-preference` (docs/03 Abschnitt 3).
 * ===================================================================== */
.magnetbrett {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.magnet-satz {
  margin: 0;
}
.magnet-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 4px;
  padding: 10px 8px;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--flaeche);
  color: var(--ink);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
}
/* DIE ZEILE BEKOMMT DEN FOKUS, wenn das Verb eingerastet ist - damit eine
   Vorlesehilfe den ganzen Satz liest. Ein Rahmen nur für die Tastatur. */
.magnet-zeile:focus {
  outline: none;
}
.magnet-zeile:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.magnet-vorn {
  padding: 0 8px 0 4px;
}
/* EIN GLIED DER ZEILE: eine Lücke und ihr Wort, das letzte samt Punkt - es
   bricht nie in sich um. */
.magnet-glied {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.magnet-bindewort,
.magnet-wort {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 4px 9px;
  border: 1.5px solid var(--linie-stark);
  border-radius: 10px;
  background: #fff;
  overflow-wrap: anywhere;
}
.magnet-bindewort {
  gap: 5px;
  padding-left: 5px;
}
.magnet-bild {
  display: block;
  width: 28px;
  height: 28px;
}
.magnet-punkt {
  padding: 0 2px;
  font-size: 22px;
}
/* OHNE PRÜFUNG LÄSST SICH DAS VERB WIEDER HERAUSNEHMEN - dann ist es ein
   Knopf und braucht die Höhe eines Knopfs (docs/03 Abschnitt 6). */
button.magnet-wort {
  min-height: 44px;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
/* EINE LÜCKE: ein Strich in einem Feld zum Antippen, ohne Rand. */
.magnet-luecke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}
.magnet-luecke::before {
  content: "";
  width: 4px;
  height: 28px;
  border-radius: 2px;
  background: var(--track);
}
.magnet-luecke:hover::before,
.magnet-luecke:focus-visible::before,
.magnetbrett:has(.magnet-verb.wartet) .magnet-luecke::before {
  background: var(--cobalt);
}
.magnetstapel {
  justify-content: center;
}
.magnet-verb {
  min-width: 88px;
  font-size: 17px;
}
@media (prefers-reduced-motion: no-preference) {
  .magnet-wort.neu {
    animation: kiste-hinein 360ms ease-out;
  }
}
@media (min-width: 1024px) {
  .magnet-zeile {
    padding: 14px 12px;
    font-size: 19px;
  }
  .magnet-wort,
  .magnet-bindewort {
    min-height: 44px;
  }
  .magnet-bild {
    width: 32px;
    height: 32px;
  }
  .magnet-luecke {
    min-width: 40px;
  }
  .magnet-verb {
    font-size: 18px;
  }
}

/* ========================================================================
 * V172 - WORT FLICKEN: DIE FALSCHE STELLE UND WAS DORT HINGEHÖRT
 * (angeordnet am 06.10.2026)
 *
 * Oben der Satz, was dran ist, darunter das Wort als Buchstaben - beim Suchen
 * ist jeder ein Knopf, 48 px hoch (docs/03 Abschnitt 6) -, und ist die Stelle
 * gefunden, darunter die Karten, wie man dort schreiben könnte
 * (`klickkarten.js`). Die Buchstaben teilen sich die Breite, damit ein langes
 * Wort auch auf dem Telefon auf einer Zeile steht.
 *
 * DIE STELLE TRÄGT KOBALT, DIE FARBE DER WAHL - kein Grün und kein Ziegelrot
 * (R6, R9). Auch das geflickte Wort trägt keine Farbe: Die neuen Buchstaben
 * setzen sich mit derselben Bewegung wie eine Karte in ihre Kiste.
 *
 * RICHTIG UND FALSCH WIEGEN GLEICH (R6, R9, V74.7): Eine Stelle, die stimmt,
 * und eine Karte, die nicht passt, bewegen sich wie eine, die einrastet -
 * gleich weit und gleich lang. Bewegung nur auf eine Handlung hin und nur unter
 * `prefers-reduced-motion: no-preference` (docs/03 Abschnitt 3).
 * ===================================================================== */
.flickbrett {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.flick-satz {
  margin: 0;
}
.flickwort {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 12px 8px;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--flaeche);
}
.flickwort:focus {
  outline: none;
}
.flickwort:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.flick-buchstabe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  max-width: 48px;
  min-height: 48px;
  padding: 0;
  border: 1.5px solid var(--linie-stark);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
}
button.flick-buchstabe {
  cursor: pointer;
}
button.flick-buchstabe:hover {
  border-color: var(--cobalt);
}
/* DIE STELLE, DIE NICHT STIMMT: ein Rand in Kobalt, wie eine Kiste, die eine
   Karte aufnehmen kann. */
.flick-buchstabe.ist-stelle {
  border-color: var(--cobalt);
  box-shadow: 0 3px 0 var(--cobalt-tief);
}
.flickkarten {
  justify-content: center;
}
.flick-karte {
  min-width: 64px;
  font-size: 22px;
}
@media (prefers-reduced-motion: no-preference) {
  .flick-buchstabe.daneben {
    animation: kiste-zurueck 360ms ease-out;
  }
  .flick-buchstabe.neu {
    animation: kiste-hinein 360ms ease-out;
  }
}
@media (min-width: 1024px) {
  .flickwort {
    padding: 16px 12px;
    gap: 6px;
  }
  .flick-buchstabe {
    max-width: 56px;
    min-height: 56px;
    font-size: 30px;
  }
  .flick-karte {
    min-width: 76px;
    font-size: 24px;
  }
}

/* ========================================================================
 * V173 - DER ZEITFORMEN-BAUKASTEN: DEN BAUSTEIN TAUSCHEN, DER NICHT MEHR PASST
 * (angeordnet am 06.10.2026)
 *
 * Oben der Satz, was dran ist, darunter der französische Satz, und in ihm die
 * Verbform als Bausteine in einer Schale - jeder ein Knopf, mindestens 44 px
 * hoch (docs/03 Abschnitt 6). Wo Stamm und Endung ein Wort sind, stossen die
 * Bausteine aneinander. Ist ein Baustein offen, liegen darunter die Karten,
 * die hineinpassen könnten (`klickkarten.js`).
 *
 * DER OFFENE BAUSTEIN TRÄGT KOBALT, DIE FARBE DER WAHL - kein Grün und kein
 * Ziegelrot (R6, R9). Der alte Baustein, der nicht mehr passt, sieht aus wie
 * jeder andere: Nichts blinkt, nichts färbt sich (V165.2). Auch das Subjekt
 * trägt keine Farbe; der Satz darüber sagt, was gewechselt hat.
 *
 * RICHTIG UND FALSCH WIEGEN GLEICH (R6, R9, V74.7): Ein Baustein, der
 * einrastet, eine Karte, die zurückgleitet, und ein Baustein, der doch passt,
 * bewegen sich gleich weit und gleich lang. Bewegung nur auf eine Handlung hin
 * und nur unter `prefers-reduced-motion: no-preference` (docs/03 Abschnitt 3).
 * ===================================================================== */
.baukasten {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bau-kopf {
  margin: 0;
}
.bausatz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 6px;
  padding: 14px 10px;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--flaeche);
  color: var(--ink);
  font-size: 20px;
  line-height: 1.25;
}
.bausatz:focus {
  outline: none;
}
.bausatz:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
/* SUBJEKT UND VERBFORM BLEIBEN BEIEINANDER - mit «j'» ohne Lücke. */
.bau-kern {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bau-kern.elidiert {
  gap: 0;
}
.bau-subjekt {
  font-weight: 700;
}
/* DIE SCHALE: die Verbform als ein Stück, aus Bausteinen gebaut. */
.bau-form {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: 13px;
  background: var(--plaster);
}
.bau-form.verbunden {
  gap: 0;
}
.bau-stein {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border: 1.5px solid var(--linie-stark);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
}
/* STAMM UND ENDUNG STOSSEN ANEINANDER: ein Wort aus zwei Bausteinen. */
.bau-form.verbunden .bau-stein:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.bau-form.verbunden .bau-stein:last-child {
  margin-left: -1.5px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
button.bau-stein {
  cursor: pointer;
}
button.bau-stein:hover {
  border-color: var(--cobalt);
}
/* DER OFFENE BAUSTEIN: ein Rand in Kobalt, wie eine Kiste, die eine Karte
   aufnehmen kann. */
.bau-stein.ist-offen {
  border-color: var(--cobalt);
  box-shadow: 0 3px 0 var(--cobalt-tief);
}
.baukarten {
  justify-content: center;
}
.bau-karte {
  min-width: 64px;
  font-size: 20px;
}
@media (prefers-reduced-motion: no-preference) {
  .bau-stein.daneben {
    animation: kiste-zurueck 360ms ease-out;
  }
  .bau-stein.neu {
    animation: kiste-hinein 360ms ease-out;
  }
}
@media (min-width: 1024px) {
  .bausatz {
    gap: 10px 8px;
    padding: 18px 14px;
    font-size: 24px;
  }
  .bau-stein {
    min-height: 52px;
    padding: 0 14px;
    font-size: 24px;
  }
  .bau-karte {
    min-width: 76px;
    font-size: 22px;
  }
}

/* ========================================================================
 * V174 - DER UMSCHALTER: EIN ENGLISCHER SATZ WIRD ZU EINEM NEIN
 * (angeordnet am 06.10.2026)
 *
 * Oben der Satz, was dran ist, darunter der englische Satz und unter ihm die
 * Karten: zuerst «not» allein, dann die Hilfswörter, dann die Formen des
 * Verbs (`klickkarten.js`). Nach dem Umschalten steht «not» in einer Schale
 * vor dem Verb, davor die Lücke für das Hilfswort; Hilfswort und Verb sind
 * Steine wie beim Baukasten, mindestens 44 px hoch (docs/03 Abschnitt 6).
 *
 * WAS EINE KARTE AUFNIMMT, TRÄGT KOBALT, DIE FARBE DER WAHL - erst die Lücke,
 * dann das Verb. Kein Grün und kein Ziegelrot (R6, R9), nichts blinkt
 * (V165.2), und «not» selbst bleibt still.
 *
 * RICHTIG UND FALSCH WIEGEN GLEICH (R6, R9, V74.7): Was einrastet, und eine
 * Karte, die zurückgleitet, bewegen sich gleich weit und gleich lang. Bewegung
 * nur auf eine Handlung hin und nur unter `prefers-reduced-motion:
 * no-preference` (docs/03 Abschnitt 3).
 * ===================================================================== */
.umschalter {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.schalt-kopf {
  margin: 0;
}
.schaltsatz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 6px;
  padding: 14px 10px;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--flaeche);
  color: var(--ink);
  font-size: 20px;
  line-height: 1.25;
}
.schaltsatz:focus {
  outline: none;
}
.schaltsatz:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.schalt-subjekt {
  font-weight: 700;
}
/* DAS NEIN: in einer Schale wie die Verbform des Baukastens - es kam dazu. */
.schalt-nein {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  background: var(--plaster);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
}
.schalt-stein,
.schalt-luecke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border: 1.5px solid var(--linie-stark);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
}
/* DIE LÜCKE: leer und so breit wie ein kurzes Wort, damit «does» hineinpasst,
   ohne dass der Satz springt. */
.schalt-luecke {
  min-width: 64px;
  background: var(--plaster);
}
/* WAS EINE KARTE AUFNIMMT: ein Rand in Kobalt, wie der offene Baustein. */
.schalt-luecke.ist-offen,
.schalt-stein.ist-offen {
  border-color: var(--cobalt);
  box-shadow: 0 3px 0 var(--cobalt-tief);
}
.schalt-luecke.ist-offen {
  background: #fff;
}
.schaltkarten {
  justify-content: center;
}
.schalt-karte {
  min-width: 64px;
  font-size: 20px;
}
@media (prefers-reduced-motion: no-preference) {
  .schalt-stein.neu,
  .schalt-luecke.neu,
  .schalt-nein.neu {
    animation: kiste-hinein 360ms ease-out;
  }
}
@media (min-width: 1024px) {
  .schaltsatz {
    gap: 10px 8px;
    padding: 18px 14px;
    font-size: 24px;
  }
  .schalt-stein,
  .schalt-luecke {
    min-height: 52px;
    padding: 0 14px;
    font-size: 24px;
  }
  .schalt-luecke {
    min-width: 76px;
  }
  .schalt-nein {
    min-height: 42px;
  }
  .schalt-karte {
    min-width: 76px;
    font-size: 22px;
  }
}

/* ========================================================================
 * V175 - DAS KLEINE WORT: VOR DAS VERB ODER HINTEN AN DIE GRUNDFORM
 * (angeordnet am 06.10.2026)
 *
 * Oben der Satz, was dran ist, darunter die Frage, auf die der Satz antwortet,
 * der italienische Satz und unter ihm die Karten: zuerst das kleine Wort,
 * dann, wo es hinten an der Grundform hängt, ihre Formen (`klickkarten.js`).
 * Vor und hinter dem Verb liegt je eine Lücke - ein schmaler Strich wie beim
 * Magneten, als Knopf 44 px hoch (docs/03 Abschnitt 6). Hängt das Wort hinten
 * an, stehen Verb und Wort ohne Zwischenraum beisammen, wie man es schreibt.
 *
 * WAS EINE KARTE AUFNIMMT, TRÄGT KOBALT, DIE FARBE DER WAHL - die Lücken,
 * solange das Wort gewählt ist, dann das Verb. Kein Grün und kein Ziegelrot
 * (R6, R9), nichts blinkt (V165.2).
 *
 * RICHTIG UND FALSCH WIEGEN GLEICH (R6, R9, V74.7): Was einrastet, und eine
 * Karte, die zurückgleitet, bewegen sich gleich weit und gleich lang. Bewegung
 * nur auf eine Handlung hin und nur unter `prefers-reduced-motion:
 * no-preference` (docs/03 Abschnitt 3).
 * ===================================================================== */
.andocken {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.andock-kopf {
  margin: 0;
}
.andock-frage {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  text-align: center;
}
.andocksatz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 6px;
  padding: 14px 10px;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--flaeche);
  color: var(--ink);
  font-size: 20px;
  line-height: 1.25;
}
.andocksatz:focus {
  outline: none;
}
.andocksatz:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
/* DAS VERB MIT SEINEN LÜCKEN UND DEM PUNKT bricht nie auseinander. */
.andock-kern,
.andock-paar {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.andock-kern {
  gap: 2px;
}
.andock-verb,
.andock-wort {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 10px;
  border: 1.5px solid var(--linie-stark);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
}
/* DAS KLEINE WORT kam dazu: in einer Schale wie das Nein des Umschalters. */
.andock-wort {
  border-color: transparent;
  background: var(--plaster);
}
.andock-kern > .andock-wort {
  margin-right: 4px;
}
/* HINTEN ANGEHÄNGT: Verb und Wort teilen eine Kante, wie ein Wort. */
.andock-paar > .andock-verb {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.andock-paar > .andock-wort {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.andock-verb.ist-offen {
  border-color: var(--cobalt);
  box-shadow: 0 3px 0 var(--cobalt-tief);
}
.andock-punkt {
  margin-left: 2px;
}
.andock-luecke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}
.andock-luecke::before {
  content: "";
  width: 4px;
  height: 28px;
  border-radius: 2px;
  background: var(--track);
}
.andock-luecke:hover::before,
.andock-luecke:focus-visible::before,
.andocksatz.wartet .andock-luecke::before {
  background: var(--cobalt);
}
.andock-luecke:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 1px;
}
.andockkarten {
  justify-content: center;
}
.andock-karte {
  min-width: 64px;
  font-size: 20px;
}
@media (prefers-reduced-motion: no-preference) {
  .andock-verb.neu,
  .andock-wort.neu {
    animation: kiste-hinein 360ms ease-out;
  }
}
@media (min-width: 1024px) {
  .andock-frage {
    font-size: 19px;
  }
  .andocksatz {
    gap: 10px 8px;
    padding: 18px 14px;
    font-size: 24px;
  }
  .andock-verb,
  .andock-wort {
    min-height: 52px;
    padding: 0 14px;
    font-size: 24px;
  }
  .andock-luecke {
    min-width: 40px;
  }
  .andock-karte {
    min-width: 76px;
    font-size: 22px;
  }
}

/* ========================================================================
 * V176 - DIE GLEICHUNG: AUS EINER TEXTAUFGABE DIE GLEICHUNG LEGEN
 * (angeordnet am 06.10.2026)
 *
 * Oben der Satz, was dran ist, darunter die Geschichte - sie steht hier und
 * nicht noch einmal über der Karte (`aufgabe.js`). Ihre Zahlen sind Knöpfe,
 * 44 px hoch (docs/03 Abschnitt 6), solange sie gesucht werden; eine
 * gebrauchte steht danach in einer Schale, wie das Nein des Umschalters. Dann
 * die Gleichung, so weit sie liegt, mit einer Lücke für die nächste Karte, und
 * unter ihr die Karten: die Zahlen und x, dann die Rechenzeichen
 * (`klickkarten.js`).
 *
 * WAS EINE KARTE AUFNIMMT, TRÄGT KOBALT, DIE FARBE DER WAHL - die Lücke der
 * Gleichung. Kein Grün und kein Ziegelrot (R6, R9), nichts blinkt (V165.2).
 *
 * RICHTIG UND FALSCH WIEGEN GLEICH (R6, R9, V74.7): Was einrastet, und eine
 * Karte oder Zahl, die zurückgleitet, bewegen sich gleich weit und gleich
 * lang. Bewegung nur auf eine Handlung hin und nur unter
 * `prefers-reduced-motion: no-preference` (docs/03 Abschnitt 3).
 * ===================================================================== */
.formel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.formel-kopf {
  margin: 0;
}
.formel-geschichte {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--flaeche);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
}
.formel-geschichte:focus {
  outline: none;
}
.formel-geschichte:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
/* EINE ZAHL ZUM ANTIPPEN: ein kleiner Stein mitten im Satz. */
.formel-zahl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: 2px 1px;
  padding: 0 8px;
  border: 1.5px solid var(--linie-stark);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 0 var(--grau-kante);
  color: var(--ink);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  vertical-align: middle;
}
button.formel-zahl {
  cursor: pointer;
}
button.formel-zahl:hover,
button.formel-zahl:focus-visible {
  border-color: var(--cobalt);
}
button.formel-zahl:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 1px;
}
/* GEFUNDEN: in einer Schale, wie ein Wort, das dazukam - kein Knopf mehr. */
.formel-zahl.ist-gefunden {
  border-color: transparent;
  background: var(--plaster);
  box-shadow: none;
}
.formel-x {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
}
.formel-unbekannte {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 17px;
}
.formel-gleichung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 4px;
  min-height: 72px;
  padding: 12px 10px;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--flaeche);
  color: var(--ink);
}
.formel-gleichung:focus {
  outline: none;
}
.formel-gleichung:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
/* SO SCHMAL, DASS DIE LÄNGSTE GLEICHUNG - «102 = 162 − x · 12» - AUF EINEM
   TELEFON VON 360 PX IN EINER ZEILE STEHT. */
.formel-stein,
.formel-luecke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 44px;
  padding: 0 7px;
  border: 1.5px solid var(--linie-stark);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
}
/* EIN RECHENZEICHEN IST KEIN STEIN, sondern steht zwischen ihnen - gross
   genug, dass auch der Malpunkt zu sehen ist. */
.formel-stein.ist-zeichen {
  min-width: 14px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  font-size: 26px;
}
/* «12x»: x hängt an der Zahl davor, wie man es schreibt. */
.formel-stein.dicht {
  margin-left: -4px;
}
.formel-luecke {
  border-color: var(--cobalt);
  box-shadow: 0 3px 0 var(--cobalt-tief);
}
.formelkarten,
.formelzeichen {
  justify-content: center;
}
.formel-bereit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 14px;
  background: var(--plaster);
  color: var(--ink);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 20px;
}
.formel-karte {
  min-width: 56px;
  font-size: 22px;
}
/* FÜNF RECHENZEICHEN IN EINER REIHE, auch auf 360 px. */
.formel-karte.ist-zeichen {
  min-width: 48px;
  padding: 6px 8px;
  font-size: 28px;
}
@media (prefers-reduced-motion: no-preference) {
  .formel-zahl.neu,
  .formel-bereit.neu,
  .formel-stein.neu {
    animation: kiste-hinein 360ms ease-out;
  }
  .formel-zahl.zurueck {
    animation: kiste-zurueck 360ms ease-out;
  }
}
@media (min-width: 1024px) {
  .formel-geschichte {
    padding: 14px 18px;
    font-size: 19px;
  }
  .formel-zahl {
    font-size: 20px;
  }
  .formel-x {
    font-size: 16px;
  }
  .formel-gleichung {
    gap: 10px 8px;
    padding: 14px;
  }
  .formel-stein,
  .formel-luecke {
    min-width: 48px;
    min-height: 52px;
    padding: 0 12px;
    font-size: 26px;
  }
  .formel-stein.ist-zeichen {
    min-width: 20px;
    padding: 0 2px;
    font-size: 32px;
  }
  .formel-karte {
    min-width: 64px;
    font-size: 24px;
  }
  .formel-karte.ist-zeichen {
    min-width: 56px;
    font-size: 30px;
  }
}

/* ========================================================================
 * V177 - DIE KETTE VON URSACHE UND WIRKUNG (angeordnet am 06.10.2026)
 *
 * Oben das Bild der Kette und der Satz, was dran ist, darunter die Kette: die
 * gelegten Karten von oben nach unten, zwischen ihnen ein Pfeil, und unter der
 * letzten der Platz, der dran ist, mit dem Rand in Kobalt, der Farbe der Wahl
 * - nur einer, und ohne Strichlinie (V137). Ganz unten die Karten, die noch
 * nicht in der Kette liegen (`klickkarten.js`). Jede Karte trägt einen Satz
 * und ist mindestens 44 px hoch (docs/03 Abschnitt 6); ein langer Satz bricht
 * in seiner Karte um.
 *
 * DIE KETTE SAGT NICHTS ÜBER DAS KIND: Ein Pfeil wird dunkel, in Tinte,
 * sobald unter ihm eine Karte liegt, und eine fertige Kette trägt keine eigene
 * Farbe - kein Grün und kein Ziegelrot (R6, R9). Keine Linie zeigt auf eine
 * Karte, die noch nicht liegt: Sie wäre die Antwort (V165.3).
 *
 * RICHTIG UND FALSCH WIEGEN GLEICH (R6, R9, V74.7): Eine Karte, die an die
 * Kette kommt (`kiste-hinein`), und eine, die zurückgleitet
 * (`kiste-zurueck`), bewegen sich gleich weit und gleich lang. Bewegung nur
 * auf eine Handlung hin und nur unter `prefers-reduced-motion:
 * no-preference` (docs/03 Abschnitt 3).
 * ===================================================================== */
.kettenbrett {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kette-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
}
.kette-bild {
  flex: none;
  width: 40px;
  height: 40px;
}
.kette-satz {
  margin: 0;
}
.kette-satz:focus,
.kette:focus {
  outline: none;
}
.kette-satz:focus-visible,
.kette:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.kette {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kette-glied {
  position: relative;
  display: flex;
}
/* DER PFEIL STEHT IM ABSTAND ZWISCHEN ZWEI GLIEDERN, über dem unteren. */
.kette-pfeil {
  position: absolute;
  left: 50%;
  top: -16px;
  width: 14px;
  height: 14px;
  translate: -50% 0;
  color: var(--track);
}
.kette-pfeil.ist-gelegt {
  color: var(--ink-soft);
}
.kette-pfeil-strich {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.kette-pfeil-spitze {
  fill: currentColor;
}
/* EIN GLIED SIEHT AUS WIE DIE KARTE, DIE ES WAR - nur liegt es jetzt fest. */
.kette-stein {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 44px;
  box-sizing: border-box;
  margin: 0;
  padding: 8px 12px;
  border: 1.5px solid var(--linie-stark);
  border-radius: 14px;
  background: var(--flaeche);
  box-shadow: 0 3px 0 var(--grau-kante);
  color: var(--ink);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  text-align: left;
}
button.kette-stein {
  cursor: pointer;
}
button.kette-stein:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.kette-stein.ist-frei {
  border: 2px solid var(--cobalt);
  box-shadow: 0 3px 0 var(--cobalt-tief);
}
.kettenstapel {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
}
.kette-karte {
  justify-content: flex-start;
  padding: 8px 12px;
  line-height: 1.3;
  text-align: left;
}
@media (prefers-reduced-motion: no-preference) {
  .kette-glied.neu .kette-stein {
    animation: kiste-hinein 360ms ease-out;
  }
}
@media (min-width: 1024px) {
  .kette-bild {
    width: 48px;
    height: 48px;
  }
  .kette-stein,
  .kette-karte {
    min-height: 48px;
    font-size: 16px;
  }
}
/* BREIT UND NIEDRIG (V159): kleinere Karten, damit Kette, Karten und
   «Prüfen» ohne Scrollen ins Fenster passen. Ein gelegtes Glied ist kein
   Knopf und darf dort niedriger sein als 44 px; eine Karte zum Antippen
   nicht (docs/03 Abschnitt 6). */
@media (min-width: 1024px) and (max-height: 860px) {
  .kettenbrett {
    gap: 8px;
  }
  .kette-bild {
    width: 28px;
    height: 28px;
  }
  .kette {
    gap: 12px;
  }
  .kette-pfeil {
    top: -11px;
    width: 10px;
    height: 10px;
  }
  .kette-stein,
  .kette-karte {
    min-height: 34px;
    padding: 5px 10px;
    font-size: 14px;
  }
  button.kette-stein,
  .kette-karte {
    min-height: 44px;
  }
  .kettenstapel {
    gap: 5px;
  }
}

/* ========================================================================
 * V178 - URSACHE UND FOLGE: DAS KISTENBRETT MIT EINEM EREIGNIS
 * (angeordnet am 06.10.2026)
 *
 * Oben die Kiste «Ursache», in der Mitte das Ereignis, unten die Kiste
 * «Folge», darunter die Karten (`klickkarten.js`, `brett`). Ein Pfeil über
 * und einer unter dem Ereignis zeigen, wie die Zeit läuft: von dem, was dazu
 * führte, zu dem, was daraus folgte. Die Karten sind Sätze und stehen darum in
 * voller Breite, in der Kiste wie auf dem Stapel.
 *
 * DAS EREIGNIS SAGT NICHTS ÜBER DAS KIND: weiss mit einem Rand in Tinte, kein
 * Grün und kein Ziegelrot (R6, R9), und kein Knopf - in die Mitte legt man
 * nichts. Was einrastet und was zurückgleitet, bewegt sich wie bei den
 * Wortarten (V166).
 * ===================================================================== */
.kisten.um-ereignis {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 20px;
}
.kisten.um-ereignis .kiste {
  flex: none;
}
.kisten.um-ereignis .kiste-inhalt {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  min-height: 0;
}
/* EINE LEERE KISTE IST NUR IHR NAME: kein Polster, das nach Platz aussähe. */
.kisten.um-ereignis .kiste-inhalt:empty {
  padding: 0;
}
.kistenbrett.mit-ereignis .kiste-karte {
  display: block;
  padding: 6px 10px;
  font-size: 14px;
  line-height: 1.3;
  text-align: left;
}
.ereignis {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 3px 0 var(--ink);
}
/* DIE ZEIT LÄUFT VON OBEN NACH UNTEN: ein Pfeil von der Kiste der Ursachen
   zum Ereignis, einer vom Ereignis zur Kiste der Folgen. */
.ereignis::before,
.ereignis::after {
  content: "";
  position: absolute;
  left: 50%;
  translate: -50% 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--ink-soft);
}
.ereignis::before {
  top: -16px;
}
.ereignis::after {
  bottom: -19px;
}
.ereignis-bild {
  flex: none;
  width: 36px;
  height: 36px;
}
.ereignis-text {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ereignis-etikett {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
}
.ereignis-satz {
  color: var(--ink);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
}
.kistenbrett.mit-ereignis .kistenstapel {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
}
.kistenbrett.mit-ereignis .kistenstapel .karte-knopf {
  justify-content: flex-start;
  padding: 8px 12px;
  line-height: 1.3;
  text-align: left;
}
@media (min-width: 1024px) {
  .ereignis-bild {
    width: 44px;
    height: 44px;
  }
  .ereignis-satz {
    font-size: 18px;
  }
  .kistenbrett.mit-ereignis .kiste-karte {
    font-size: 15px;
  }
  .kistenbrett.mit-ereignis .kistenstapel .karte-knopf {
    min-height: 48px;
    font-size: 16px;
  }
}
/* BREIT UND NIEDRIG (V159): das Ereignis über beiden Kisten, die Kisten
   nebeneinander, die Karten darunter in zwei Spalten - untereinander passte
   es samt «Prüfen» nicht ins Fenster, und in einer schmalen Spalte brach jeder
   Satz in drei Zeilen. Links die Ursache, rechts die Folge: Die Zeit läuft
   hier von links nach rechts, die Pfeile fallen weg. */
@media (min-width: 1024px) and (max-height: 860px) {
  .kistenbrett.mit-ereignis {
    gap: 8px;
  }
  .kisten.um-ereignis {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px 12px;
    align-items: start;
  }
  .kisten.um-ereignis .ereignis {
    grid-column: 1 / -1;
    grid-row: 1;
    padding: 6px 10px;
  }
  .kisten.um-ereignis .kiste {
    grid-row: 2;
  }
  .ereignis::before,
  .ereignis::after {
    display: none;
  }
  .ereignis-bild {
    width: 28px;
    height: 28px;
  }
  /* DAS WORT «EREIGNIS» IN DER ZEILE DES SATZES: Eine eigene Zeile dafür
     schob «Prüfen» bei 1024 x 694 unter den Rand. */
  .ereignis-text {
    display: block;
  }
  .ereignis-etikett {
    margin-right: 6px;
  }
  .ereignis-satz {
    font-size: 15px;
  }
  /* EINE GELEGTE KARTE IST KLEINER als eine auf dem Stapel: Sie wird nur noch
     gelesen, nicht mehr angetippt, und drei lange Sätze in einer Kiste
     schoben «Prüfen» sonst unter den Rand. */
  .kistenbrett.mit-ereignis .kiste-karte {
    min-height: 0;
    padding: 3px 8px;
    font-size: 12.5px;
    line-height: 1.25;
  }
  .kistenbrett.mit-ereignis .kistenstapel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px 12px;
  }
  .kistenbrett.mit-ereignis .kistenstapel .karte-knopf {
    min-height: 44px;
    padding: 6px 10px;
    font-size: 14px;
  }
}

/* ========================================================================
 * V181 - DIE WEICHE: BLEIBT DAS VERB, ODER WECHSELT ES IN DEN SUBJUNTIVO?
 * (angeordnet am 06.10.2026)
 *
 * Oben der Satz, was dran ist, darunter der spanische Satz und unter ihm die
 * Karten: zuerst die beiden Stellungen der Weiche, dann die Formen für die
 * Lücke (`klickkarten.js`). Die Lücke trägt die Grundform, bis ihre Form
 * gewählt ist, und darunter das Schild der Weiche, sobald sie steht -
 * mindestens 44 px hoch (docs/03 Abschnitt 6).
 *
 * DER ANFANG DES SATZES TRÄGT NICHTS (V165.3): keine Farbe, keinen Rand, kein
 * Leuchten - ob er das Verb wechseln lässt, ist die Frage. Was eine Karte
 * aufnimmt, trägt Kobalt, die Farbe der Wahl; das Schild steht in Tinte, für
 * beide Stellungen gleich. Kein Grün und kein Ziegelrot (R6, R9), nichts
 * blinkt (V165.2).
 *
 * RICHTIG UND FALSCH WIEGEN GLEICH (R6, R9, V74.7): Was einrastet, und eine
 * Karte, die zurückgleitet, bewegen sich gleich weit und gleich lang. Bewegung
 * nur auf eine Handlung hin und nur unter `prefers-reduced-motion:
 * no-preference` (docs/03 Abschnitt 3).
 * ===================================================================== */
.weiche {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.weiche-kopf {
  margin: 0;
}
.weichensatz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 6px;
  padding: 14px 10px;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--flaeche);
  color: var(--ink);
  font-size: 20px;
  line-height: 1.25;
}
.weichensatz:focus {
  outline: none;
}
.weichensatz:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.weiche-subjekt {
  font-weight: 700;
}
/* DIE LÜCKE: so breit wie ein kurzes Wort, damit eine Form hineinpasst, ohne
   dass der Satz springt. Das Schild steht unter der Form, nicht daneben. */
.weiche-luecke {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 72px;
  min-height: 44px;
  padding: 4px 10px;
  border: 1.5px solid var(--linie-stark);
  border-radius: 10px;
  background: var(--plaster);
  line-height: 1;
}
.weiche-form {
  color: var(--ink-soft);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 20px;
}
/* WAS EINE KARTE AUFNIMMT: ein Rand in Kobalt, wie die Lücke des Umschalters. */
.weiche-luecke.ist-offen {
  border-color: var(--cobalt);
  background: #fff;
  box-shadow: 0 3px 0 var(--cobalt-tief);
}
.weiche-luecke.ist-voll {
  background: #fff;
}
.weiche-luecke.ist-voll .weiche-form {
  color: var(--ink);
}
/* DAS SCHILD DER WEICHE: in Tinte, für beide Stellungen gleich. */
.weiche-schild {
  padding: 2px 6px;
  border: 1px solid var(--linie-stark);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
}
.weichenkarten {
  justify-content: center;
}
.weiche-karte {
  min-width: 64px;
  font-size: 20px;
}
/* DIE BEIDEN STELLUNGEN: Name und ein kurzer Satz dazu, gleich gross. */
.weiche-stellung {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 136px;
}
.weiche-stellung-name {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 19px;
}
.weiche-stellung-satz {
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 400;
}
@media (prefers-reduced-motion: no-preference) {
  .weiche-luecke.neu,
  .weiche-schild.neu {
    animation: kiste-hinein 360ms ease-out;
  }
}
@media (min-width: 1024px) {
  .weichensatz {
    gap: 10px 8px;
    padding: 18px 14px;
    font-size: 24px;
  }
  .weiche-luecke {
    min-width: 84px;
    min-height: 52px;
    padding: 5px 14px;
  }
  .weiche-form {
    font-size: 24px;
  }
  .weiche-karte {
    min-width: 76px;
    font-size: 22px;
  }
  .weiche-stellung {
    min-width: 156px;
  }
  .weiche-stellung-name {
    font-size: 21px;
  }
}

/* ==========================================================================
 * DIE SERIE IM EINZELNEN (V183), angeordnet am 07.10.2026: «der zähler der
 * tage an denen man immer dran war, soll anklickbar sein und details
 * anzeigen». Die Pille in der Kopfzeile ist seither ein Weg, und dahinter
 * steht ``/serie`` (``app/web/dranbleiben.py``).
 *
 * DIE PILLE BLEIBT, WIE SIE AUSSAH - nur hoch genug für einen Finger (44 px,
 * docs/03 Abschnitt 6) und mit dem Fokusring jedes Wegs. Sie sagt dasselbe
 * wie vorher und nichts mehr: kein Glanz, kein Wackeln (R6).
 * ========================================================================== */
a.streak {
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
a.streak:hover {
  border-color: var(--ink-soft);
}
a.streak:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}

/* Der Kopf der Seite: das Bild, die Zahl und was heute gilt. */
.serienkopf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "bild zahl"
    "bild heute";
  align-items: center;
  column-gap: 16px;
  row-gap: 4px;
  margin-bottom: 14px;
}
.serienkopf-bild {
  grid-area: bild;
  display: inline-flex;
}
.serienkopf-zahl {
  grid-area: zahl;
  margin: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.1;
}
.serienkopf-zahl b {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.serienkopf-heute {
  grid-area: heute;
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
}
/* Drei Kacheln auf zwei Spalten: die dritte über die ganze Breite. */
.seriendaten .stat:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.serienliste {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.5;
}
.serienliste li + li {
  margin-top: 8px;
}
@media (min-width: 1024px) {
  .b-serie .pad {
    max-width: 760px;
  }
  .seriendaten {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .seriendaten .stat:last-child:nth-child(odd) {
    grid-column: auto;
  }
  .serienliste {
    font-size: 15px;
  }
}

/* ==========================================================================
 * DIE COINS (V184), angeordnet am 07.10.2026: «immer wenn 10 min effektive
 * lernzeit erreicht sind, gibt es oben neben den anzahl tagen, eine kleine
 * animation und die neuen coins werden dazu adiert und die lernzeit
 * zurückgesetzt und neu gemessen.»
 *
 * DIE PILLE steht neben der Serie: eine Münze in einem Ring, der zeigt, wie
 * weit die laufenden zehn Minuten sind, und die Zahl der Coins. Der Ring ist
 * gelb wie alles, was gebaut wird; die Münze ist ein Bild aus Fluent Emoji.
 *
 * DIE BEWEGUNG kommt nur, wenn Coins dazukommen (``coins.js``): Die Münze
 * dreht sich einmal, «+10» steigt auf und vergeht, die Zahl wird kurz
 * grösser, der Ring füllt sich und fängt leer neu an. Kein Hüpfen, kein Ton,
 * und bei reduzierter Bewegung steht nur kurz «+10» da. Sie sagt nichts über
 * eine Antwort (R6) - sie kommt für Lernzeit.
 * ========================================================================== */
.kopfzahlen {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
a.coins {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 3px 12px 3px 4px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--ink);
  text-decoration: none;
}
a.coins:hover {
  border-color: var(--ink-soft);
}
a.coins:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
a.coins b {
  display: inline-block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.coins-ring {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
}
.coins-ring svg {
  position: absolute;
  inset: 0;
  /* Der Ring fängt oben an, wie eine Uhr. */
  transform: rotate(-90deg);
}
.coins-spur,
.coins-fuellung {
  fill: none;
  stroke-width: 3.5;
}
.coins-spur {
  stroke: var(--track);
}
.coins-fuellung {
  stroke: var(--chalk);
  stroke-linecap: round;
}
.coins-ring .bild {
  position: relative;
  width: 22px;
  height: 22px;
}
.coins-plus {
  position: absolute;
  top: -8px;
  right: 4px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--ton-rechnen-tief);
  opacity: 0;
  pointer-events: none;
}
a.coins.coins-neu .coins-plus {
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .coins-fuellung {
    transition: stroke-dasharray 600ms ease-out;
  }
  a.coins.coins-sofort .coins-fuellung {
    transition: none;
  }
  a.coins.coins-neu .coins-ring .bild {
    animation: coin-drehen 900ms ease-in-out;
  }
  a.coins.coins-neu .coins-plus {
    animation: coins-steigen 1800ms ease-out forwards;
  }
  a.coins.coins-neu b {
    animation: coins-zahl 600ms ease-out;
  }
}
@keyframes coin-drehen {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}
@keyframes coins-steigen {
  0% {
    opacity: 0;
    transform: translateY(3px);
  }
  15% {
    opacity: 1;
    transform: translateY(0);
  }
  70% {
    opacity: 1;
    transform: translateY(-5px);
  }
  100% {
    opacity: 0;
    transform: translateY(-6px);
  }
}
@keyframes coins-zahl {
  0%,
  100% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.08);
  }
}
/* Auf einem schmalen Telefon rücken die beiden Pillen zusammen. */
@media (max-width: 380px) {
  .kopfzahlen {
    gap: 6px;
  }
  a.coins {
    padding-right: 10px;
  }
}

/* DER NACHDENKLICHE SCAMPY (V184): «einfach weiterklicken bei lernkarten
   z.b. soll eine kleine scampy animation anzeigen wo der scampy nachdenklich
   und fragend schaut». Er steht neben dem Satz, der ohnehin dasteht, legt
   den Kopf langsam schief, hin und her, und neben ihm steht ein
   Fragezeichen. Wenige Grad, kein Hüpfen; bei reduzierter Bewegung steht er
   still und schief. Kein Rot, kein Wort dazu (R9). */
.hinweis.denkend {
  display: flex;
  align-items: center;
  gap: 14px;
}
.denkscampi {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  padding: 6px 10px 0 0;
}
.zeichen.bewegung-gruebeln {
  transform: rotate(-6deg);
  transform-origin: 50% 70%;
}
.denkblase {
  position: absolute;
  top: -4px;
  right: -6px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--linie);
  border-radius: 50%;
  background: var(--flaeche);
  color: var(--ink);
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .zeichen.bewegung-gruebeln {
    animation: zeichen-gruebeln 3.4s ease-in-out infinite;
  }
  .denkblase {
    animation: denkblase 3.4s ease-in-out infinite;
  }
}
@keyframes zeichen-gruebeln {
  0%,
  100% {
    transform: rotate(-8deg);
  }
  40%,
  60% {
    transform: rotate(7deg);
  }
}
@keyframes denkblase {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.85;
  }
  50% {
    transform: translateY(-2px);
    opacity: 1;
  }
}

/* Die Seite /coins (V184): der Ring gross, darunter drei Schritte - lernen,
   zehn Minuten, spielen - und was als Lernzeit zählt. */
.coinkopf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "ring zahl"
    "ring zeit";
  align-items: center;
  column-gap: 18px;
  row-gap: 4px;
  margin-bottom: 14px;
}
.coinkopf-ring {
  grid-area: ring;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 96px;
  height: 96px;
}
.coinkopf-ring svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}
.coinkopf-ring .coins-spur,
.coinkopf-ring .coins-fuellung {
  stroke-width: 3;
}
.coinkopf-ring .bild {
  position: relative;
  width: 52px;
  height: 52px;
}
.coinkopf-zahl {
  grid-area: zahl;
  margin: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.1;
}
.coinkopf-zahl b {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.coinkopf-zeit {
  grid-area: zeit;
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
}
.coinschritte {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  counter-reset: schritt;
}
.coinschritte li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
}
.coinschritte li + li {
  margin-top: 12px;
}
.coinschritt-bild {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
}
.coinschritt-symbol {
  border-radius: 12px;
  background: var(--ton-rechnen);
  color: var(--ton-rechnen-tief);
}
@media (min-width: 1024px) {
  .b-coins .pad {
    max-width: 760px;
  }
  .coinschritte li,
  .b-coins .serienliste {
    font-size: 15px;
  }
}

/* ========================================================================
 * V187 - DER ERSTE SPIELAUTOMAT: MEMORY (angeordnet am 07.10.2026: «auf dem
 * ersten gibt es memory. kaufen für 10 coins. 1 spiel kostet 1 coin ...
 * wählt man den arcade kasten, startet man mit dem einwerfen des coins.
 * dann zoom zum bildschirm mit startscreen und musik. wie ein arcade
 * kasten. mach es gut und detalliert»)
 *
 * DAS AUSSEHEN DES AUTOMATEN: ein Gehäuse in Violett, Türkis und Pink an
 * Streifen und Knöpfen, ein kühles Licht im Leuchtkasten und Karten in Gelb
 * auf dem Schirm. Gesetzt über die Marken aus V185 und nicht über die
 * Zeichnung - als Datenattribut, damit auch die Kopie beim Zoom und der
 * Schirm selbst die Farben tragen. Kein Grün und kein Ziegelrot: Die beiden
 * sind das Urteil (R6, R9).
 *
 * DIE SEITE DES AUTOMATEN: der Automat gross, an der Tür die Anzeige der
 * Credits, daneben das Pult der Seite. Auf dem Telefon untereinander, mit
 * dem Knopf «Coin einwerfen» gleich unter dem Automaten; ab 1024 px
 * nebeneinander.
 *
 * DER SCHIRM: eine Ebene über allem, in der Farbe des Schirms, mit feinen
 * Zeilen wie eine Röhre. Die Schrift aus Pixeln (``app/web/pixel.py``), die
 * Karten quadratisch, ihre Grösse rechnet ``spielhalle.js`` aus Fenster und
 * Zahl der Karten. Die Farben dort sind die des Spiels und sagen im Produkt
 * nichts.
 *
 * BEWEGUNG nur als Antwort auf eine Handlung, und nur unter
 * ``prefers-reduced-motion: no-preference`` (``docs/03`` Abschnitt 3). Das
 * Startbild bewegt sich, weil ein Coin es angeschaltet hat.
 * ===================================================================== */
[data-aussehen="memory"] {
  --automat-gehaeuse: #4a2c8f;
  --automat-gehaeuse-tief: #331e66;
  --automat-glanz: rgba(255, 255, 255, 0.14);
  --automat-leuchte: #d2f6ff;
  --automat-schrift: #3a1f7a;
  --automat-rahmen: #140b2e;
  --automat-schirm: #1a1140;
  --automat-schirmbild: #ffd23f;
  --automat-schirmglanz: rgba(255, 255, 255, 0.08);
  --automat-streifen: #33d3d0;
  --automat-pult: #5c3aa8;
  --automat-knopf-a: #ff6ec0;
  --automat-knopf-b: #33d3d0;
  --automat-licht: rgba(255, 255, 255, 0.6);
  --automat-tuer: #2c1a5c;
  --automat-schlitz: #ffd23f;
  --automat-schloss: #ffd23f;
  --automat-schatten: rgba(22, 35, 59, 0.18);
}

/* ---------- In der Halle ----------------------------------------------- */
.automat-bild {
  position: relative;
}
.automat-weg {
  display: block;
  border-radius: 18px;
}
.automat-weg:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 4px;
}
.automat-anzeige {
  position: absolute;
  display: grid;
  place-items: center;
  color: #ffd23f;
  pointer-events: none;
}
.automat-anzeige .pixeltext {
  display: block;
  width: auto;
  height: 52%;
  filter: drop-shadow(0 0 2px rgba(255, 210, 63, 0.75));
}
.automat-zustand.ist-offen {
  border-color: #cdbdf7;
  background: #f1ebff;
  color: #3a1f7a;
}
.automat-zustand .bild {
  flex: 0 0 auto;
}
.automat-schild .btn {
  gap: 8px;
  margin-top: 4px;
}
.automat-fehlt {
  font-weight: 700;
}

/* ---------- Die Seite des Automaten ------------------------------------ */
.b-automat .pad {
  max-width: 980px;
  margin: 0 auto;
}
.automatenplatz {
  display: grid;
  gap: 16px;
}
.automatenbuehne {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 4px 0;
}
.kasten {
  position: relative;
  width: min(264px, 68vw, calc((100dvh - 340px) * 220 / 372));
  min-width: 180px;
  aspect-ratio: 220 / 372;
}
/* Auf der Rückfrage vor dem Kauf zählt der Knopf, nicht der Automat. */
.kasten.klein {
  width: min(190px, 50vw);
  min-width: 150px;
}
.automatenbuehne .automat-knoepfe,
.automatenbuehne .automat-kein-skript {
  width: min(100%, 360px);
}
.kasten .automat-zeichnung {
  display: block;
  width: 100%;
  height: 100%;
}
.kasten-schlitz {
  position: absolute;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}
.kasten-schlitz:disabled {
  cursor: default;
}
.kasten-schlitz:not(:disabled):hover {
  box-shadow: 0 0 0 3px rgba(255, 210, 63, 0.6);
}
.kasten-schirm {
  position: absolute;
  pointer-events: none;
}
.automatenpult h1 {
  margin-top: 0;
}
.automat-neu {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f1ebff;
  color: #3a1f7a;
  font-weight: 700;
}
.automat-leitsatz {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.5;
}
.automat-kasse {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}
.automat-kasse div {
  padding: 8px 10px;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: var(--flaeche);
}
.automat-kasse dt {
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.3;
}
.automat-kasse dd {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 14px;
}
.automat-kasse dd b {
  font-size: 22px;
  font-weight: 800;
}
@media (max-width: 420px) {
  .automat-kasse dd .bild {
    display: none;
  }
}
.automat-knoepfe {
  display: grid;
  gap: 10px;
}
.automat-knoepfe .btn {
  gap: 10px;
  min-height: 52px;
  font-size: 16px;
}
.automat-meldung {
  margin: 0;
  text-align: center;
}
.automat-meldung:empty {
  display: none;
}
.automat-kein-skript {
  margin: 0 0 12px;
  font-weight: 700;
}
.automat-kaufform {
  margin: 0 0 10px;
}
.automat-kaufform .btn {
  gap: 10px;
  min-height: 52px;
  font-size: 16px;
}
.spielregeln {
  margin: 6px 0 0;
  padding-left: 1.2em;
  font-size: 14px;
  line-height: 1.55;
}
.spielregeln li + li {
  margin-top: 4px;
}
@media (min-width: 1024px) {
  .automatenplatz {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 28px;
  }
  .automatenbuehne {
    position: sticky;
    top: 0;
  }
  .kasten {
    width: min(360px, calc((100dvh - 300px) * 220 / 372));
  }
  .kasten.klein {
    width: min(300px, calc((100dvh - 220px) * 220 / 372));
  }
}

/* ---------- Der Coin im Flug und der Zoom ------------------------------ */
.flugcoin {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 48px;
  height: 48px;
  pointer-events: none;
}
.flugcoin .bild {
  display: block;
  width: 48px;
  height: 48px;
}
.zoomebene {
  position: fixed;
  inset: 0;
  z-index: 70;
  overflow: hidden;
  pointer-events: none;
}
.kasten.zoomkopie {
  position: absolute;
  min-width: 0;
  margin: 0;
  transform-origin: 0 0;
  will-change: transform;
}

/* ---------- Der Schirm ------------------------------------------------- */
.schirm {
  /* Die Farben der Schrift auf dem Schirm, je Automat (V188): hell, zart, leise. */
  --schirm-text: #f3eeff;
  --schirm-zart: #b9a8ff;
  --schirm-leise: #ddd4ff;
  --schirm-schein: rgba(130, 100, 255, 0.24);
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  background: var(--automat-schirm);
  color: var(--schirm-text);
  opacity: 0;
  color-scheme: dark;
}
.schirm.ist-an {
  opacity: 1;
}
.schirm-glas {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
    env(safe-area-inset-left);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 35%, var(--schirm-schein), transparent 62%),
    radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.5) 100%),
    var(--automat-schirm);
}
/* Die Zeilen einer Röhre, fein genug, dass sie nichts verdecken. */
.schirm-glas::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.035) 0,
    rgba(255, 255, 255, 0.035) 1px,
    transparent 1px,
    transparent 3px
  );
}
.schirm .pixeltext,
.schirm .pixelsymbol,
.schirm .pixeltitel {
  display: block;
  width: auto;
}
.schirm-leiste {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 12px 0;
}
.schirmknopf {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.32);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
}
.schirmknopf .pixelsymbol {
  height: 16px;
}
.schirmknopf:hover {
  background: rgba(255, 255, 255, 0.14);
}
.schirmknopf:focus-visible {
  outline: 3px solid #ffd23f;
  outline-offset: 2px;
}
.schirmknopf-an,
.schirmknopf-aus {
  display: grid;
}
.schirmknopf-aus,
.schirmknopf.ist-stumm .schirmknopf-an {
  display: none;
}
.schirmknopf.ist-stumm .schirmknopf-aus {
  display: grid;
}
.schirmbild {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 0;
  padding: 8px 16px 22px;
  text-align: center;
}

/* Knöpfe aus Pixeln: gelb mit Kante, oder still mit Rahmen. */
.pixelknopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 14px 22px;
  border: 0;
  border-radius: 6px;
  background: #ffd23f;
  color: #1b1633;
  box-shadow:
    0 0 0 3px #1b1633,
    0 6px 0 3px #1b1633;
  cursor: pointer;
}
.pixelknopf .pixeltext,
.pixelknopf .pixelsymbol {
  height: 16px;
}
.pixelknopf.gross {
  padding: 16px 28px;
}
.pixelknopf.gross .pixeltext,
.pixelknopf.gross .pixelsymbol {
  height: 22px;
}
.pixelknopf.still {
  background: transparent;
  color: var(--schirm-text);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}
.pixelknopf:active {
  transform: translateY(4px);
  box-shadow:
    0 0 0 3px #1b1633,
    0 2px 0 3px #1b1633;
}
.pixelknopf.still:active {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);
}
.pixelknopf:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 6px;
}
.schirm-knoepfe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-top: 6px;
}

/* Das Startbild. */
.titel-scampi .motiv {
  width: clamp(56px, 13vw, 92px);
  height: auto;
}
.titel-schrift .pixeltitel {
  height: clamp(46px, 11vw, 104px);
}
.titel-zeile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
}
.titel-zeile .pixeltext {
  height: 13px;
}
.titel-credit,
.titel-best {
  color: var(--schirm-zart);
}
.titelbild {
  display: flex;
  justify-content: center;
}
.titel-karten {
  --seite: clamp(46px, 11vw, 66px);
  display: flex;
  gap: 12px;
}
.titel-hilfe,
.titel-meldung,
.pause-satz,
.ende-best,
.ende-hinweis {
  max-width: 36ch;
  margin: 0;
  color: var(--schirm-leise);
  font-size: 15px;
  line-height: 1.5;
}
.titel-meldung,
.ende-hinweis {
  color: #ffe9a6;
  font-weight: 700;
}
.titel-meldung:empty,
.ende-hinweis:empty,
.ende-best:empty {
  display: none;
}

/* Das Spiel: Uhr, Runde und Paare oben, darunter das Brett. */
.ansicht-spiel {
  justify-content: flex-start;
  gap: 10px;
  padding-top: 0;
}
.hud {
  display: flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 760px;
}
.hud-feld {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 76px;
  padding: 8px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12);
}
.hud-name {
  color: var(--schirm-zart);
}
.hud-name .pixeltext {
  height: 9px;
}
.hud-wert .pixeltext {
  height: 22px;
}
.hud-zeit .hud-wert {
  color: #ffd23f;
}
.hud-zeit.knapp .hud-wert {
  color: #ff8f33;
}
.hud-sprung {
  position: absolute;
  top: -6px;
  right: -10px;
  opacity: 0;
}
.hud-sprung .pixeltext {
  height: 14px;
}
.hud-sprung.plus {
  color: #b0f7f2;
}
.hud-sprung.minus {
  color: #ffc58c;
}
.hud-sprung.springt {
  opacity: 1;
}
.zeitbalken {
  width: 100%;
  max-width: 760px;
  height: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}
.zeitbalken span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #ffd23f, #ff8f33);
  transform-origin: left center;
}
.brett {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  min-height: 0;
}
/* Das Brett des Memorys: ein Raster aus Quadraten. */
.brett-memory {
  display: grid;
  grid-template-columns: repeat(var(--spalten, 4), var(--seite, 64px));
  grid-auto-rows: var(--seite, 64px);
  align-content: center;
  justify-content: center;
  gap: var(--fuge, 8px);
}

/* Die Karten: quadratisch, vorne das Bild, hinten das Fragezeichen. */
.mkarte {
  position: relative;
  display: block;
  width: var(--seite, 64px);
  height: var(--seite, 64px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  perspective: 700px;
}
.mkarte-innen {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.mkarte.offen .mkarte-innen {
  transform: rotateY(180deg);
}
.mkarte-rueck,
.mkarte-bild {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 12%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.mkarte-rueck {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.07) 0 8%, transparent 8% 16%),
    #5b3fd0;
  box-shadow:
    inset 0 0 0 3px #8b72ff,
    inset 0 0 0 6px #3b2499,
    0 4px 0 #22125a;
}
.mkarte-rueck .motiv {
  width: 62%;
  height: 62%;
}
.mkarte-bild {
  background: #f7f3ff;
  box-shadow:
    inset 0 0 0 3px #d9ccff,
    0 4px 0 #8f7ad6;
  transform: rotateY(180deg);
}
.mkarte-bild .motiv {
  width: 78%;
  height: 78%;
}
.mkarte:focus-visible {
  outline: 3px solid #ffd23f;
  outline-offset: 3px;
  border-radius: 14%;
}
.mkarte.gefunden {
  cursor: default;
}
.mkarte.gefunden .mkarte-bild {
  background: #e4dbff;
  box-shadow: inset 0 0 0 3px #c3b2ff;
  opacity: 0.6;
}
.mkarte.tauscht {
  z-index: 2;
}
.mkarte.tauscht .mkarte-rueck {
  box-shadow:
    inset 0 0 0 3px #ffd23f,
    inset 0 0 0 6px #3b2499,
    0 0 0 3px #ffd23f;
}
.mkarte.verpasst .mkarte-bild {
  opacity: 0.55;
}

/* Zwischen zwei Runden, Pause und Ende. */
.zwischen-gross {
  margin: 0;
  color: #ffd23f;
}
.zwischen-gross .pixeltext {
  height: clamp(30px, 7.5vw, 58px);
}
.zwischen-zeile {
  margin: 0;
  color: var(--schirm-zart);
}
.zwischen-zeile .pixeltext {
  height: 16px;
}
.zwischen-neu {
  max-width: 34ch;
  margin: 4px 0 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--schirm-text);
  font-size: 17px;
  line-height: 1.45;
}
.ende-zahlen {
  display: flex;
  gap: 14px;
  margin: 0;
}
.ende-zahlen div {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 96px;
  padding: 12px 16px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12);
}
.ende-zahlen dt {
  color: var(--schirm-zart);
}
.ende-zahlen dt .pixeltext {
  height: 10px;
}
.ende-zahlen dd {
  margin: 0;
}
.ende-zahlen dd .pixeltext {
  height: 30px;
}

/* Breit und niedrig - ein Tablet oder Telefon quer: der Titel kleiner. */
@media (max-height: 560px) {
  .schirmbild {
    gap: 8px;
    padding-bottom: 12px;
  }
  .titel-scampi,
  .titel-hilfe,
  .titelbild {
    display: none;
  }
  .titel-schrift .pixeltitel {
    height: 44px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .schirm {
    transition: opacity 0.28s ease;
  }
  .mkarte-innen {
    transition: transform 0.32s cubic-bezier(0.3, 0.7, 0.35, 1.25);
  }
  .mkarte.daneben {
    animation: mkarte-daneben 0.4s ease-in-out;
  }
  .mkarte.gefunden {
    animation: mkarte-gefunden 0.45s ease-out;
  }
  .mkarte.gefunden .mkarte-bild {
    transition: opacity 0.6s ease 0.35s;
  }
  .brett.runde-geschafft .mkarte {
    animation: mkarte-geschafft 0.6s ease-out;
  }
  .titel-scampi .motiv {
    animation: titel-scampi 2.6s ease-in-out infinite;
  }
  .titel-schrift .titel-buchstabe {
    animation: titel-buchstabe 2.2s ease-in-out infinite;
  }
  .ansicht-titel [data-start] {
    animation: start-puls 1.8s ease-in-out infinite;
  }
  .hud-zeit.knapp .hud-wert {
    animation: zeit-knapp 1s steps(2, jump-none) infinite;
  }
  .hud-sprung.springt {
    animation: zeit-sprung 0.9s ease-out forwards;
  }
  .automat-anzeige.leuchtet {
    animation: anzeige-leuchtet 0.8s ease-out;
  }
}
@keyframes mkarte-daneben {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(4px);
  }
  75% {
    transform: translateX(-2px);
  }
}
@keyframes mkarte-gefunden {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes mkarte-geschafft {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
}
@keyframes titel-scampi {
  0%,
  100% {
    transform: translateY(0) rotate(-3deg);
  }
  50% {
    transform: translateY(-6px) rotate(3deg);
  }
}
@keyframes titel-buchstabe {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.6px);
  }
}
@keyframes start-puls {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
@keyframes zeit-knapp {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.55;
  }
}
@keyframes zeit-sprung {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(0.8);
  }
  15% {
    opacity: 1;
    transform: translateY(0) scale(1.12);
  }
  70% {
    opacity: 1;
    transform: translateY(-8px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-16px);
  }
}
@keyframes anzeige-leuchtet {
  0% {
    filter: brightness(2.2) drop-shadow(0 0 8px #ffd23f);
  }
  100% {
    filter: none;
  }
}

/* ========================================================================
 * V188 - DER ZWEITE SPIELAUTOMAT: PLÄTTLI (angeordnet am 07.10.2026:
 * «nächster automat ist [der Name eines Spiels]. wenn das geschützt ist,
 * muss es anders heissen und etwas anders sein. kosten für den arcade
 * automat ist 20. kosten pro spiel ist 1 coin»)
 *
 * DAS AUSSEHEN DES AUTOMATEN: ein Gehäuse in Orange mit Streifen, Tür und
 * Schrift in Mitternachtsblau, ein warmes Licht im Leuchtkasten und ein
 * kleiner Stapel in Creme auf dem Schirm - neben dem violetten Memory gut
 * zu unterscheiden. Gesetzt über die Marken aus V185, wie dort. Kein Grün
 * und kein Ziegelrot: Die beiden sind das Urteil (R6, R9).
 *
 * DER SCHIRM: Mitternachtsblau mit einem warmen Schein, die Schrift in Creme
 * und Apricot (``--schirm-…``, die Marken aus V188 am Schirm).
 *
 * DIE PLÄTTLI: quadratisch, eine glasierte Fläche in Creme mit dem Bild
 * darauf und einer Kante unten rechts, damit man sieht, was worauf liegt. Je
 * Schicht rückt ein Plättli um die Kante nach oben links; wo es liegt, sagen
 * ``--x``, ``--y`` und ``--z`` in halben Plättli, wie gross es ist, ``--t`` und
 * ``--k`` am Stapel (``spielhalle-plaettli.js``). Was festliegt, ist dunkler -
 * solange die Runde Licht hat. Gewählt hebt es sich und trägt einen gelben
 * Rand, die Lupe lässt ein Paar leuchten. Die Farben der Bilder sind die des
 * Spiels und sagen im Produkt nichts.
 *
 * BEWEGUNG nur als Antwort auf eine Handlung und nur unter
 * ``prefers-reduced-motion: no-preference`` (``docs/03`` Abschnitt 3).
 * ===================================================================== */
[data-aussehen="plaettli"] {
  --automat-gehaeuse: #f08a24;
  --automat-gehaeuse-tief: #c2621a;
  --automat-glanz: rgba(255, 255, 255, 0.2);
  --automat-leuchte: #fff1d6;
  --automat-schrift: #1d2b5c;
  --automat-rahmen: #10162e;
  --automat-schirm: #12204a;
  --automat-schirmbild: #ffe2a8;
  --automat-schirmglanz: rgba(255, 255, 255, 0.08);
  --automat-streifen: #1d2b5c;
  --automat-pult: #f7a54a;
  --automat-knopf-a: #2fc7d6;
  --automat-knopf-b: #ffd23f;
  --automat-licht: rgba(255, 255, 255, 0.6);
  --automat-tuer: #1d2b5c;
  --automat-schlitz: #ffd23f;
  --automat-schloss: #ffd23f;
  --automat-schatten: rgba(22, 35, 59, 0.18);
}
.schirm[data-aussehen="plaettli"] {
  --schirm-text: #fff6ea;
  --schirm-zart: #ffcf9a;
  --schirm-leise: #ffe9cf;
  --schirm-schein: rgba(255, 160, 80, 0.2);
}

/* ---------- Das Brett und der Stapel ----------------------------------- */
.brett-plaettli {
  display: grid;
  place-items: center;
  overflow: hidden;
}
.steinstapel {
  --t: 56px;
  --k: 6px;
  --hoch: 0;
  position: relative;
  flex: 0 0 auto;
}
.steinstapel.vorbei {
  filter: saturate(0.7);
}
.stein {
  position: absolute;
  left: calc(var(--x) * var(--t) / 2 + (var(--hoch) - var(--z)) * var(--k));
  top: calc(var(--y) * var(--t) / 2 + (var(--hoch) - var(--z)) * var(--k));
  width: calc(var(--t) - 2px);
  height: calc(var(--t) - 2px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.stein.fest,
.steinstapel.vorbei .stein {
  cursor: default;
}
.stein.weg {
  pointer-events: none;
}
.stein-flaeche {
  /* Die Kante in drei Stufen, damit sie auch an den Ecken geschlossen ist. */
  --kanten:
    calc(var(--k) * 0.34) calc(var(--k) * 0.34) 0 #e2c99e,
    calc(var(--k) * 0.67) calc(var(--k) * 0.67) 0 #d3b385, var(--k) var(--k) 0 #c19c69,
    calc(var(--k) + 1px) calc(var(--k) + 2px) 5px rgba(8, 12, 36, 0.5);
  position: absolute;
  inset: 0 var(--k) var(--k) 0;
  display: grid;
  place-items: center;
  border-radius: 16%;
  background: linear-gradient(150deg, #fffdf7 0%, #fbf1dc 68%, #f2dfbb 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.9),
    var(--kanten);
}
.stein-flaeche .motiv {
  width: 74%;
  height: 74%;
}
.steinstapel.mitlicht .stein.fest .stein-flaeche {
  filter: brightness(0.55) saturate(0.6);
}
.stein.gewaehlt .stein-flaeche {
  outline: 3px solid #ffd23f;
  outline-offset: 1px;
  transform: translate(-2px, -3px);
}
.stein.gezeigt .stein-flaeche {
  outline: 3px solid #fff6ea;
  outline-offset: 2px;
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.9),
    var(--kanten),
    0 0 18px 6px rgba(255, 210, 63, 0.75);
}
.stein:focus-visible {
  outline: none;
}
.stein:focus-visible .stein-flaeche {
  outline: 3px solid #2fc7d6;
  outline-offset: 2px;
}
.stein.gewaehlt:focus-visible .stein-flaeche {
  outline-color: #ffd23f;
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.9),
    var(--kanten),
    0 0 0 6px #2fc7d6;
}

/* Das Startbild: ein kleiner Stapel, das Paar oben leuchtet ab und zu. */
.titel-stapel .steinstapel {
  --t: clamp(40px, 11vw, 60px);
  --k: 4px;
  width: calc(3 * var(--t) + var(--k));
  height: calc(2 * var(--t) + var(--k));
}

/* Die Lupe im Kopf des Spiels: gelb wie die Knöpfe des Schirms. */
.hud-knopf {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  min-width: 60px;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: #ffd23f;
  color: #1b1633;
  box-shadow:
    0 0 0 2px #1b1633,
    0 4px 0 2px #1b1633;
  cursor: pointer;
}
.hud-knopf[hidden] {
  display: none;
}
.hud-knopf .pixelsymbol {
  height: 18px;
}
.hud-knopf-preis .pixeltext {
  height: 9px;
}
.hud-knopf:active {
  transform: translateY(3px);
  box-shadow:
    0 0 0 2px #1b1633,
    0 1px 0 2px #1b1633;
}
.hud-knopf:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

/* Die Halle auf dem Schreibtisch: Seit es zwei Automaten und den Platzhalter
   gibt, stehen sie nebeneinander über die ganze Breite, und wie es geht,
   steht darunter - in zwei Spalten. Seit V192 sind es sieben Kästen: so viele
   nebeneinander, wie die Breite fasst, der Rest in der nächsten Reihe. */
@media (min-width: 1024px) {
  .spielplatz {
    grid-template-columns: minmax(0, 1fr);
  }
  .automaten {
    gap: 28px;
  }
  .spielweg .coinschritte {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px 28px;
  }
  .spielweg .coinschritte li + li {
    margin-top: 0;
  }
}

/* Auf einem schmalen Telefon haben vier Felder im Kopf sonst keinen Platz. */
@media (max-width: 400px) {
  .hud {
    gap: 6px;
  }
  .hud-feld {
    min-width: 62px;
    padding: 8px;
  }
  .hud-wert .pixeltext {
    height: 19px;
  }
  .hud-knopf {
    min-width: 52px;
    padding: 8px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .stein-flaeche {
    transition:
      transform 0.12s ease,
      filter 0.3s ease;
  }
  .stein.daneben .stein-flaeche {
    animation: mkarte-daneben 0.4s ease-in-out;
  }
  .stein.weg .stein-flaeche {
    animation: stein-weg 0.34s ease-in forwards;
  }
  .stein.gezeigt .stein-flaeche {
    animation: stein-gezeigt 0.6s ease-in-out infinite alternate;
  }
}
@keyframes stein-weg {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  40% {
    opacity: 1;
    transform: translateY(-6px) scale(1.12);
  }
  100% {
    opacity: 0;
    transform: translateY(-16px) scale(0.3);
  }
}
@keyframes stein-gezeigt {
  from {
    filter: brightness(1);
  }
  to {
    filter: brightness(1.2);
  }
}

/* ========================================================================
 * V189 - DER DRITTE SPIELAUTOMAT: CHLÖTZLI (angeordnet am 07.10.2026:
 * «nächster automat ist [der Name eines Spiels]. kosten 30 coins, 1 coin
 * pro spiel. muss anders heissen. … [das Spiel] so ändern dass keine
 * Copyright probleme geben kann»)
 *
 * DAS AUSSEHEN DES AUTOMATEN: ein Gehäuse aus hellem Holz, Streifen, Tür und
 * Schrift in Himmelblau, ein Stapel Klötzli in Butter auf dem Schirm - neben
 * dem violetten Gspänli und den orangen Plättli gut zu unterscheiden.
 * Gesetzt über die Marken aus V185, wie dort. Kein Grün und kein Ziegelrot:
 * Die beiden sind das Urteil (R6, R9).
 *
 * DER SCHIRM: ein tiefes Nachtblau mit einem warmen Schein wie von einer
 * Lampe über einer Werkbank.
 *
 * DIE KLÖTZLI: Holz zum Bauen, jede Form in ihrer Farbe - mit einer Maserung,
 * einer hellen Kante oben links und einer dunklen unten rechts, damit jedes
 * Klötzli als Klotz dasteht und nicht als Fläche. Die Farben sind die eines
 * Spielzeugs und sagen nichts. Eine volle Reihe leuchtet kurz hell, der
 * Stapel kippt mit einem Purzeln.
 *
 * BEWEGUNG nur als Antwort auf eine Handlung und nur unter
 * ``prefers-reduced-motion: no-preference`` (``docs/03`` Abschnitt 3).
 * ===================================================================== */
[data-aussehen="chloetzli"] {
  --automat-gehaeuse: #d9a066;
  --automat-gehaeuse-tief: #a8703f;
  --automat-glanz: rgba(255, 255, 255, 0.22);
  --automat-leuchte: #e3f3ff;
  --automat-schrift: #1f5fa8;
  --automat-rahmen: #1a1a2e;
  --automat-schirm: #142243;
  --automat-schirmbild: #ffe08a;
  --automat-schirmglanz: rgba(255, 255, 255, 0.08);
  --automat-streifen: #3d8fe0;
  --automat-pult: #e6b47e;
  --automat-knopf-a: #3d8fe0;
  --automat-knopf-b: #ffd23f;
  --automat-licht: rgba(255, 255, 255, 0.6);
  --automat-tuer: #1f5fa8;
  --automat-schlitz: #ffd23f;
  --automat-schloss: #ffd23f;
  --automat-schatten: rgba(22, 35, 59, 0.18);
}
.schirm[data-aussehen="chloetzli"] {
  --schirm-text: #f6f1e6;
  --schirm-zart: #9cc8f5;
  --schirm-leise: #dbe9f7;
  --schirm-schein: rgba(255, 190, 110, 0.18);
}

/* ---------- Das Feld und die Klötzli ---------------------------------- */
.brett-chloetzli {
  display: grid;
  place-items: center;
  overflow: hidden;
}
.klotzfeld {
  --seite: 28px;
  display: grid;
  grid-template-columns: repeat(var(--breite, 8), var(--seite));
  grid-auto-rows: var(--seite);
  padding: 4px;
  border-radius: 6px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 4px 4px / var(--seite)
      var(--seite),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 4px 4px / var(--seite)
      var(--seite),
    rgba(0, 0, 0, 0.32);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.14),
    0 0 0 3px #0b1226;
  transform-origin: 50% 100%;
}
.klotzfeld.vorbei {
  filter: saturate(0.6) brightness(0.85);
}
.zelle {
  display: block;
  border-radius: 14%;
}
/* Jede Form ihre Holzfarbe - die eines Spielzeugs, ohne Bedeutung. */
.zelle[data-form] {
  --holz: #e9b872;
  background:
    repeating-linear-gradient(
      102deg,
      rgba(70, 35, 0, 0.09) 0 1.5px,
      transparent 1.5px 5px,
      rgba(70, 35, 0, 0.05) 5px 6px,
      transparent 6px 11px
    ),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--holz) 62%, #fff) 0%,
      var(--holz) 48%,
      color-mix(in srgb, var(--holz) 78%, #3a2410) 100%
    );
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.45),
    inset -2px -2px 0 rgba(40, 20, 0, 0.35),
    0 0 0 1px rgba(20, 10, 0, 0.55);
}
.zelle[data-form="wuerfel"] {
  --holz: #e9b872;
}
.zelle[data-form="zweier"] {
  --holz: #4b84f7;
}
.zelle[data-form="dreier"] {
  --holz: #ffd23f;
}
.zelle[data-form="winkel"] {
  --holz: #ff8f33;
}
.zelle[data-form="kreuz"] {
  --holz: #a06af4;
}
.zelle[data-form="bruecke"] {
  --holz: #33d3d0;
}
.zelle[data-form="treppe"] {
  --holz: #ff6ec0;
}
.zelle.voll {
  filter: brightness(1.6) saturate(0.4);
}

/* Das Startbild: ein kleiner Stapel, und ein Kreuz fällt in seine Lücke. */
.titel-klotzbild {
  --s: clamp(18px, 5.4vw, 30px);
  position: relative;
  width: calc(6 * var(--s));
  height: calc(5 * var(--s));
}
.titel-klotzbild .zelle {
  position: absolute;
  left: calc(var(--x) * var(--s));
  top: calc(var(--y) * var(--s));
  width: var(--s);
  height: var(--s);
}
.titel-faellt {
  position: absolute;
  inset: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .zelle.voll {
    transition: filter 0.12s ease;
  }
  .klotzfeld.kippt {
    animation: klotzfeld-kippt 0.85s ease-in forwards;
  }
  .titel-faellt {
    animation: titel-faellt 2.6s steps(1, end) infinite;
  }
}
@keyframes klotzfeld-kippt {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-4deg);
  }
  45% {
    transform: rotate(7deg);
  }
  100% {
    transform: rotate(16deg) translateY(30%);
    opacity: 0;
  }
}
/* Das Kreuz fällt Feld für Feld, wie im Spiel - kein Gleiten. */
@keyframes titel-faellt {
  0% {
    transform: translateY(calc(-3 * var(--s)));
  }
  18% {
    transform: translateY(calc(-2 * var(--s)));
  }
  36% {
    transform: translateY(calc(-1 * var(--s)));
  }
  54%,
  100% {
    transform: translateY(0);
  }
}

/* ========================================================================
 * V190 - DER VIERTE SPIELAUTOMAT: CHRÜMELI (angeordnet am 07.10.2026:
 * «nächster automat ist [der Name eines Spiels]. kosten 20 coins, 1 coin
 * pro spiel. muss anders heissen und aussehen oder? rechtlich»)
 *
 * DAS AUSSEHEN DES AUTOMATEN: ein Gehäuse in Meerblau mit Streifen in Sand,
 * Tür und Schrift in tiefem Blau, ein Krebs in Sand auf dem Schirm - neben
 * dem violetten Gspänli, den orangen Plättli und den hölzernen Chlötzli gut
 * zu unterscheiden. Gesetzt über die Marken aus V185, wie dort. Kein Grün
 * und kein Ziegelrot: Die beiden sind das Urteil (R6, R9).
 *
 * DAS RIFF: Wasser von oben, Fels in Blaugrau und Korallen in Rosa als
 * Wände, rund, wo sie an Wasser stossen (``data-ecken``) - keine Linien auf
 * Schwarz. Die Chrümeli sind Sandkörner, der Seestern atmet leise, und die
 * Löcher der Krebse sind dunkle Mulden in den Ecken.
 *
 * DIE FIGUREN liegen über dem Riff und gleiten von Feld zu Feld; wo sie
 * stehen, setzt ``spielhalle-chruemeli.js``. Der Scampy schaut, wohin er
 * schwimmt; ein Krebs trippelt seitwärts, schläft mit einem «Z» und
 * blinzelt, bevor er aufwacht. Zwickt er, blinkt der Scampy - nichts wird
 * rot.
 *
 * BEWEGUNG nur als Antwort auf eine Handlung und nur unter
 * ``prefers-reduced-motion: no-preference`` (``docs/03`` Abschnitt 3).
 * ===================================================================== */
[data-aussehen="chruemeli"] {
  --automat-gehaeuse: #2a7fc4;
  --automat-gehaeuse-tief: #1c5d93;
  --automat-glanz: rgba(255, 255, 255, 0.2);
  --automat-leuchte: #fff3d1;
  --automat-schrift: #12406b;
  --automat-rahmen: #0b1a2e;
  --automat-schirm: #08294a;
  --automat-schirmbild: #ffcf7a;
  --automat-schirmglanz: rgba(255, 255, 255, 0.08);
  --automat-streifen: #f2cc85;
  --automat-pult: #3a93d8;
  --automat-knopf-a: #ff9fb6;
  --automat-knopf-b: #ffd23f;
  --automat-licht: rgba(255, 255, 255, 0.6);
  --automat-tuer: #12406b;
  --automat-schlitz: #ffd23f;
  --automat-schloss: #ffd23f;
  --automat-schatten: rgba(22, 35, 59, 0.18);
}
.schirm[data-aussehen="chruemeli"] {
  --schirm-text: #eef8ff;
  --schirm-zart: #8fd0ff;
  --schirm-leise: #d3ecfb;
  --schirm-schein: rgba(90, 190, 255, 0.2);
}

/* ---------- Das Riff ---------------------------------------------------- */
.brett-chruemeli {
  display: grid;
  place-items: center;
  overflow: hidden;
  /* Wischen steuert den Scampy und schiebt nicht die Seite. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.riff {
  --seite: 24px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--spalten, 13), var(--seite));
  grid-auto-rows: var(--seite);
  padding: 4px;
  border-radius: 10px;
  background:
    radial-gradient(ellipse 80% 45% at 30% 0%, rgba(140, 215, 255, 0.22), transparent 70%),
    radial-gradient(ellipse 70% 40% at 80% 100%, rgba(255, 220, 150, 0.1), transparent 70%),
    linear-gradient(#11558a, #0b3a66 55%, #082d52);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.12),
    0 0 0 3px #04182b;
}
.riff.vorbei {
  filter: saturate(0.6) brightness(0.85);
}
.riff-feld {
  position: relative;
  display: block;
}
/* Fels: Blaugrau, mit hellen und dunklen Körnern. */
.riff-feld[data-wand="fels"] {
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.18) 0 11%, transparent 12%),
    radial-gradient(circle at 70% 66%, rgba(10, 20, 40, 0.18) 0 13%, transparent 14%),
    #6f84a6;
}
/* Korallen: Rosa, mit hellen Polypen. */
.riff-feld[data-wand="koralle"] {
  background:
    radial-gradient(circle at 28% 32%, #ffd6e2 0 11%, transparent 12%),
    radial-gradient(circle at 70% 58%, #ffd6e2 0 9%, transparent 10%),
    radial-gradient(circle at 42% 78%, rgba(120, 20, 60, 0.25) 0 10%, transparent 11%),
    #ec7d9e;
}
.riff-feld[data-ecken~="ol"] {
  border-top-left-radius: 46%;
}
.riff-feld[data-ecken~="or"] {
  border-top-right-radius: 46%;
}
.riff-feld[data-ecken~="ul"] {
  border-bottom-left-radius: 46%;
}
.riff-feld[data-ecken~="ur"] {
  border-bottom-right-radius: 46%;
}
/* Ein Chrümeli: ein Sandkorn in der Mitte des Felds. */
.riff-feld.chruemeli::after,
.titel-krume::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22%;
  height: 22%;
  border-radius: 30%;
  background: #ffe6a8;
  box-shadow: 0 1px 0 rgba(90, 50, 0, 0.45);
  transform: translate(-50%, -50%);
}
.riff-feld.seestern .pixelfigur {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
}
/* Das Loch eines Krebses: eine dunkle Mulde im Sand. */
.riff-feld.loch::before {
  content: "";
  position: absolute;
  inset: 22% 8% 6%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 40%,
    #021220 0 52%,
    rgba(2, 18, 32, 0.45) 68%,
    transparent 71%
  );
}

/* ---------- Der Scampy und die Krebse ---------------------------------- */
.riff-figur {
  position: absolute;
  top: 4px;
  left: 4px;
  width: var(--seite);
  height: var(--seite);
  pointer-events: none;
  will-change: transform;
}
.figur-bild {
  position: absolute;
  inset: 0;
  display: block;
}
.figur-bild .pixelfigur,
.titel-riffbild .pixelfigur {
  display: block;
  width: 100%;
  height: 100%;
}
.figur-scampi {
  z-index: 3;
}
.figur-krebs {
  z-index: 2;
}
/* Der Scampy schaut, wohin er schwimmt - gezeichnet ist er nach rechts. */
.figur-scampi[data-blick="links"] .figur-bild {
  transform: scaleX(-1);
}
.figur-scampi[data-blick="hoch"] .figur-bild {
  transform: rotate(-90deg);
}
.figur-scampi[data-blick="runter"] .figur-bild {
  transform: rotate(90deg);
}
.figur-scampi.gezwickt .figur-bild {
  opacity: 0.45;
}
/* Ein Krebs im Loch zeigt nur Augen und Scheren. */
.figur-krebs.im-loch .figur-bild {
  clip-path: inset(0 0 52% 0);
  transform: translateY(42%);
}
.krebs-schlaf,
.krebs-zzz,
.figur-krebs.schlaeft .krebs-wach {
  display: none;
}
.figur-krebs.schlaeft .krebs-schlaf {
  display: block;
}
.figur-krebs.schlaeft .krebs-zzz {
  position: absolute;
  top: -34%;
  right: -10%;
  display: block;
  color: #e9f6ff;
}
.krebs-zzz .pixeltext {
  height: calc(var(--seite) * 0.38);
}
/* Kurz vor dem Aufwachen: die Augen offen - ohne Bewegung bleibt es dabei. */
.figur-krebs.blinzelt .krebs-wach {
  display: block;
}
.figur-krebs.blinzelt .krebs-schlaf,
.figur-krebs.blinzelt .krebs-zzz {
  display: none;
}

/* ---------- Das Startbild ---------------------------------------------- */
/* Der Scampy sammelt eine Reihe Chrümeli, schnappt den Seestern, und der
   Krebs vor seinem Loch schläft ein. */
.titel-riffbild {
  --s: clamp(24px, 6.4vw, 38px);
  position: relative;
  width: calc(9 * var(--s));
  height: calc(1.5 * var(--s));
}
.titel-krumen {
  position: absolute;
  top: calc(0.25 * var(--s));
  left: var(--s);
  display: flex;
  width: calc(6 * var(--s));
  height: var(--s);
}
.titel-krume {
  position: relative;
  flex: 1;
}
.titel-stern,
.titel-schwimmer,
.titel-krebs {
  position: absolute;
  top: calc(0.25 * var(--s));
  width: var(--s);
  height: var(--s);
}
.titel-schwimmer {
  left: 0;
}
.titel-stern {
  left: calc(7 * var(--s));
}
.titel-krebs {
  left: calc(8 * var(--s));
}
.titel-zzz {
  position: absolute;
  top: calc(-0.25 * var(--s));
  left: calc(8.7 * var(--s));
  color: #e9f6ff;
  opacity: 0;
}
.titel-zzz .pixeltext {
  height: calc(0.4 * var(--s));
}

@media (prefers-reduced-motion: no-preference) {
  .figur-scampi.schwimmt .figur-bild .pixelfigur {
    animation: scampi-schwimmt 0.34s ease-in-out infinite alternate;
  }
  .figur-scampi.gezwickt .figur-bild {
    opacity: 1;
    animation: scampi-gezwickt 0.9s steps(1, end);
  }
  .figur-krebs.laeuft .krebs-wach {
    animation: krebs-trippelt 0.24s steps(2, jump-none) infinite alternate;
  }
  .figur-krebs.blinzelt .krebs-schlaf {
    display: block;
    animation: krebs-blinzelt 0.5s steps(1, end) infinite;
  }
  .figur-krebs.schlaeft .krebs-zzz .pixeltext {
    animation: krebs-zzz 1.6s ease-in-out infinite;
  }
  .riff-feld.seestern .pixelfigur {
    animation: seestern-atmet 1.4s ease-in-out infinite alternate;
  }
  .brett-chruemeli.runde-geschafft .riff {
    animation: riff-geschafft 1.2s ease-out;
  }
  .titel-schwimmer {
    animation: titel-schwimmer 4s linear infinite;
  }
  .titel-krumen {
    animation: titel-krumen 4s linear infinite;
  }
  .titel-stern {
    animation: titel-stern 4s steps(1, end) infinite;
  }
  .titel-zzz {
    animation: titel-zzz 4s steps(1, end) infinite;
  }
  .titel-krebs .pixelfigur {
    animation: krebs-trippelt 0.3s steps(2, jump-none) infinite alternate;
  }
}
@keyframes scampi-schwimmt {
  from {
    transform: rotate(-5deg);
  }
  to {
    transform: rotate(5deg);
  }
}
/* Gezwickt: Der Scampy blinkt ein paar Mal, ohne Farbe. */
@keyframes scampi-gezwickt {
  0%,
  33%,
  66% {
    opacity: 0.2;
  }
  16%,
  50%,
  83% {
    opacity: 1;
  }
}
/* Seitwärts, wie Krebse laufen. */
@keyframes krebs-trippelt {
  from {
    transform: translateX(-5%);
  }
  to {
    transform: translateX(5%);
  }
}
@keyframes krebs-blinzelt {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@keyframes krebs-zzz {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-30%);
    opacity: 1;
  }
}
@keyframes seestern-atmet {
  from {
    transform: scale(0.9) rotate(-6deg);
  }
  to {
    transform: scale(1) rotate(6deg);
  }
}
@keyframes riff-geschafft {
  0%,
  100% {
    filter: brightness(1);
  }
  30% {
    filter: brightness(1.3) saturate(1.2);
  }
}
@keyframes titel-schwimmer {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  72%,
  96% {
    transform: translateX(calc(7 * var(--s)));
    opacity: 1;
  }
  100% {
    transform: translateX(calc(7 * var(--s)));
    opacity: 0;
  }
}
/* Die Chrümeli verschwinden, wo der Scampy vorbeikommt. */
@keyframes titel-krumen {
  0%,
  1% {
    clip-path: inset(0 0 0 0);
  }
  63%,
  100% {
    clip-path: inset(0 0 0 100%);
  }
}
@keyframes titel-stern {
  0% {
    opacity: 1;
  }
  69% {
    opacity: 0;
  }
}
@keyframes titel-zzz {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  97% {
    opacity: 0;
  }
}

/* =====================================================================
 * V191 - DER FÜNFTE SPIELAUTOMAT: CHÖRNLI (angeordnet am 07.10.2026:
 * «nächster automat ist [der Name eines Spiels]. kosten 20 coins, 1 coin
 * pro spiel, anders nennen anders aussehen wenn es Copyright ist»)
 *
 * DAS AUSSEHEN DES AUTOMATEN: ein Gehäuse in Erdbraun mit Streifen in
 * Weizengold, und auf dem Schirm ein Ameisli, das sein Chörnli trägt -
 * neben dem violetten Gspänli, den orangen Plättli, den hölzernen
 * Chlötzli und den meerblauen Chrümeli gut zu unterscheiden. Gesetzt über
 * die Marken aus V185, wie dort. Kein Grün und kein Ziegelrot: Die beiden
 * sind das Urteil (R6, R9).
 *
 * DER GARTEN: oben ein Stoppelfeld, darunter ein Bach im Herbst, ein
 * Streifen Kies, ein Gartenweg aus Sand und unten Erde mit dem
 * Ameisenhaufen - keine Strasse, kein Fluss mit Stämmen und kein Schwarz.
 * Jede Runde liegt ein anderes Licht darüber (``data-licht``), vom Morgen
 * bis zum Mondschein.
 *
 * DIE FIGUREN legt ``spielhalle-choernli.js``: Was auf den Spuren unterwegs
 * ist, ist nach rechts gezeichnet und gespiegelt, wenn es nach links geht;
 * das Ameisli dreht sich in die Richtung, in die es hüpft, und trägt sein
 * Chörnli vorn. Ein Schubs lässt es wackeln, ein Platsch zieht Ringe -
 * nichts wird rot.
 *
 * BEWEGUNG nur als Antwort auf eine Handlung und nur unter
 * ``prefers-reduced-motion: no-preference`` (``docs/03`` Abschnitt 3).
 * ===================================================================== */
[data-aussehen="choernli"] {
  --automat-gehaeuse: #7b4a28;
  --automat-gehaeuse-tief: #5a3319;
  --automat-glanz: rgba(255, 255, 255, 0.16);
  --automat-leuchte: #fff1c9;
  --automat-schrift: #5a3319;
  --automat-rahmen: #1f1108;
  --automat-schirm: #24150b;
  --automat-schirmbild: #ffd36b;
  --automat-schirmglanz: rgba(255, 255, 255, 0.08);
  --automat-streifen: #f2c14e;
  --automat-pult: #94603a;
  --automat-knopf-a: #f2c14e;
  --automat-knopf-b: #6fb7ff;
  --automat-licht: rgba(255, 255, 255, 0.6);
  --automat-tuer: #4a2a14;
  --automat-schlitz: #ffe08a;
  --automat-schloss: #ffe08a;
  --automat-schatten: rgba(60, 35, 10, 0.2);
}
.schirm[data-aussehen="choernli"] {
  --schirm-text: #fff6e0;
  --schirm-zart: #ffd98a;
  --schirm-leise: #f3e6c8;
  --schirm-schein: rgba(255, 200, 90, 0.2);
}

/* ---------- Der Garten -------------------------------------------------- */
.brett-choernli {
  display: grid;
  place-items: center;
  overflow: hidden;
  /* Wischen lässt das Ameisli hüpfen und schiebt nicht die Seite. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.garten {
  --seite: 32px;
  position: relative;
  width: calc(var(--spalten, 9) * var(--seite));
  height: calc(var(--zeilen, 11) * var(--seite));
  overflow: hidden;
  border-radius: 10px;
  background: #8a5a35;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.12),
    0 0 0 3px #1f1108;
}
.garten.vorbei {
  filter: saturate(0.6) brightness(0.85);
}
.garten-streifen {
  position: absolute;
  top: calc(var(--zeile) * var(--seite));
  left: 0;
  right: 0;
  height: var(--seite);
}
/* Das Stoppelfeld: Weizengold mit schrägen Stoppeln. */
.garten-streifen[data-streifen="feld"],
.titel-reihe[data-streifen="feld"] {
  background:
    repeating-linear-gradient(100deg, rgba(122, 78, 22, 0.3) 0 2px, transparent 2px 7px),
    linear-gradient(#e9c86e, #d4ab4b);
}
/* Der Bach: Herbstblau, mit Lichtern, die stehen bleiben - das Wasser ist ruhig. */
.garten-streifen[data-streifen="bach"],
.titel-reihe[data-streifen="bach"] {
  background:
    radial-gradient(ellipse 30% 9% at 25% 38%, rgba(255, 255, 255, 0.22) 0 70%, transparent 72%),
    radial-gradient(ellipse 22% 8% at 72% 72%, rgba(255, 255, 255, 0.16) 0 70%, transparent 72%),
    linear-gradient(#4392d4, #3780c1);
  background-size:
    calc(var(--seite) * 3) 100%,
    calc(var(--seite) * 2.5) 100%,
    100% 100%;
}
/* Die Ufer: oben ein Schatten unter der Kante, unten ein heller Saum. */
.garten-streifen[data-streifen="bach"].streifen-anfang {
  box-shadow: inset 0 calc(var(--seite) * 0.12) 0 rgba(20, 50, 80, 0.3);
}
.garten-streifen[data-streifen="bach"].streifen-ende {
  box-shadow: inset 0 calc(var(--seite) * -0.08) 0 rgba(255, 255, 255, 0.18);
}
/* Der Kies: helle und dunkle Steinchen auf Beige. */
.garten-streifen[data-streifen="kies"],
.titel-reihe[data-streifen="kies"] {
  background:
    radial-gradient(circle at 25% 30%, #8f8576 0 9%, transparent 10%),
    radial-gradient(circle at 70% 65%, #e6dcca 0 8%, transparent 9%),
    radial-gradient(circle at 55% 18%, #a39883 0 7%, transparent 8%),
    #c4b8a0;
  background-size: calc(var(--seite) / 2) calc(var(--seite) / 2);
}
/* Der Gartenweg: Sand, mit einer feinen Linie zwischen den Spuren. */
.garten-streifen[data-streifen="weg"],
.titel-reihe[data-streifen="weg"] {
  background:
    radial-gradient(circle at 30% 60%, rgba(120, 82, 45, 0.25) 0 6%, transparent 7%),
    radial-gradient(circle at 78% 30%, rgba(255, 240, 210, 0.4) 0 5%, transparent 6%),
    #dcbd8e;
  background-size: calc(var(--seite) * 1.5) var(--seite);
  box-shadow: inset 0 -1px 0 rgba(120, 82, 45, 0.22);
}
.garten-streifen[data-streifen="weg"].streifen-ende {
  box-shadow: none;
}
/* Die Erde um den Ameisenhaufen. */
.garten-streifen[data-streifen="bau"] {
  background:
    radial-gradient(circle at 20% 40%, rgba(255, 220, 170, 0.2) 0 6%, transparent 7%),
    radial-gradient(circle at 65% 75%, rgba(30, 15, 5, 0.3) 0 7%, transparent 8%),
    #8a5a35;
  background-size: calc(var(--seite) * 1.2) var(--seite);
}

/* ---------- Was im Garten liegt und unterwegs ist ----------------------- */
.garten-ding,
.garten-bau,
.garten-chorn,
.garten-ameisli,
.garten-ring {
  position: absolute;
  top: 0;
  left: 0;
  height: var(--seite);
  pointer-events: none;
}
.garten-ding {
  z-index: 1;
  width: calc(var(--laenge, 1) * var(--seite));
  will-change: transform;
}
.garten-ding .pixelfigur,
.garten-bau .pixelfigur,
.garten-chorn .pixelfigur,
.garten-ameisli .pixelfigur,
.titel-gartenbild .pixelfigur {
  display: block;
  width: 100%;
  height: 100%;
}
/* Gezeichnet ist alles nach rechts unterwegs. */
.garten-ding.nach-links .pixelfigur {
  transform: scaleX(-1);
}
.garten-bau {
  z-index: 1;
  width: calc(3 * var(--seite));
}
.garten-chorn {
  z-index: 2;
  width: var(--seite);
}
.garten-chorn[hidden] {
  display: none;
}

/* ---------- Das Ameisli ------------------------------------------------- */
.garten-ameisli {
  z-index: 3;
  width: var(--seite);
  will-change: transform;
}
/* Ein heller Saum, damit es auf dem dunklen Haufen und bei Nacht zu sehen ist. */
.ameisli-koerper > .pixelfigur {
  filter: drop-shadow(0 0 1px #fff4d6) drop-shadow(0 0 1px #fff4d6);
}
.ameisli-dreh,
.ameisli-koerper {
  position: absolute;
  inset: 0;
  display: block;
}
/* Gezeichnet schaut es nach oben. */
.garten-ameisli[data-blick="rechts"] .ameisli-dreh {
  transform: rotate(90deg);
}
.garten-ameisli[data-blick="runter"] .ameisli-dreh {
  transform: rotate(180deg);
}
.garten-ameisli[data-blick="links"] .ameisli-dreh {
  transform: rotate(-90deg);
}
/* Das Chörnli trägt es vorn, zwischen den Fühlern. */
.ameisli-chorn {
  position: absolute;
  top: -22%;
  left: 27%;
  display: none;
  width: 46%;
  height: 46%;
}
.garten-ameisli.traegt .ameisli-chorn {
  display: block;
}
/* Geschubst oder ins Wasser gefallen: ohne Bewegung nur blasser, nie rot. */
.garten-ameisli.geschubst .ameisli-koerper,
.garten-ameisli.platscht .ameisli-koerper {
  opacity: 0.45;
}
.garten-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
  opacity: 0;
}
.garten-ring {
  z-index: 2;
  width: var(--seite);
}

/* Das Licht der Tageszeit liegt über allem, ohne etwas zu verdecken. */
.garten-licht {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.garten[data-licht="morgen"] .garten-licht {
  background: rgba(255, 196, 186, 0.35);
}
.garten[data-licht="vormittag"] .garten-licht {
  background: rgba(255, 246, 225, 0.2);
}
.garten[data-licht="nachmittag"] .garten-licht {
  background: rgba(255, 214, 140, 0.3);
}
.garten[data-licht="abend"] .garten-licht {
  background: rgba(255, 152, 98, 0.38);
}
.garten[data-licht="daemmerung"] .garten-licht {
  background: rgba(160, 120, 205, 0.45);
}
.garten[data-licht="nacht"] .garten-licht {
  background: rgba(62, 82, 165, 0.52);
}

/* ---------- Das Startbild ----------------------------------------------- */
/* Laub treibt im Bach, ein Käfer krabbelt über den Weg, und dazwischen auf
   dem Kies hüpft das Ameisli mit seinem Chörnli. */
.titel-gartenbild {
  --s: clamp(24px, 6.4vw, 38px);
  --seite: var(--s);
  position: relative;
  width: calc(9 * var(--s));
  height: calc(3 * var(--s));
  overflow: hidden;
  border-radius: 8px;
}
.titel-reihe {
  display: block;
  height: var(--s);
}
.titel-blatt,
.titel-kaefer,
.titel-ameisli,
.titel-chorn {
  position: absolute;
}
.titel-blatt {
  top: 0;
  left: calc(1 * var(--s));
  width: calc(2 * var(--s));
  height: var(--s);
}
.titel-kaefer {
  top: calc(2 * var(--s));
  left: calc(6 * var(--s));
  width: var(--s);
  height: var(--s);
}
.titel-kaefer .pixelfigur {
  transform: scaleX(-1);
}
.titel-ameisli {
  top: var(--s);
  left: calc(4 * var(--s));
  width: var(--s);
  height: var(--s);
}
.titel-chorn {
  top: calc(0.78 * var(--s));
  left: calc(4.27 * var(--s));
  width: calc(0.46 * var(--s));
  height: calc(0.46 * var(--s));
}

@media (prefers-reduced-motion: no-preference) {
  .ameisli-dreh {
    transition: transform 0.08s linear;
  }
  .garten-ameisli.geschubst .ameisli-koerper {
    opacity: 1;
    animation: ameisli-wackelt 0.8s ease-in-out;
  }
  .garten-ameisli.platscht .ameisli-koerper {
    opacity: 1;
    animation: ameisli-platscht 0.8s ease-in forwards;
  }
  .garten-ring::after {
    animation: garten-ring 0.9s ease-out forwards;
  }
  .garten-bau.bekommt .pixelfigur {
    transform-origin: 50% 100%;
    animation: bau-nickt 0.5s ease-out;
  }
  .garten-chorn .pixelfigur {
    animation: chorn-wiegt 1.6s ease-in-out infinite alternate;
  }
  .brett-choernli.runde-geschafft .garten {
    animation: garten-geschafft 1.2s ease-out;
  }
  .titel-blatt {
    animation: titel-blatt 6s linear infinite;
  }
  .titel-kaefer {
    animation: titel-kaefer 5s linear infinite;
  }
  .titel-ameisli,
  .titel-chorn {
    animation: titel-hupf 1.4s ease-in-out infinite;
  }
}
/* Geschubst: Das Ameisli wackelt ein paar Mal hin und her, ohne Farbe. */
@keyframes ameisli-wackelt {
  0%,
  100% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(-18deg);
  }
  35% {
    transform: rotate(14deg);
  }
  55% {
    transform: rotate(-10deg);
  }
  75% {
    transform: rotate(6deg);
  }
}
/* Ins Wasser: Es wird klein und verschwindet, wo die Ringe sind. */
@keyframes ameisli-platscht {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.35);
    opacity: 0;
  }
}
@keyframes garten-ring {
  0% {
    transform: scale(0.3);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
/* Ein Chörnli ist daheim: Der Haufen nickt einmal. */
@keyframes bau-nickt {
  0%,
  100% {
    transform: scaleY(1);
  }
  40% {
    transform: scaleY(1.12);
  }
}
@keyframes chorn-wiegt {
  from {
    transform: rotate(-8deg);
  }
  to {
    transform: rotate(8deg);
  }
}
@keyframes garten-geschafft {
  0%,
  100% {
    filter: brightness(1);
  }
  30% {
    filter: brightness(1.25) saturate(1.2);
  }
}
@keyframes titel-blatt {
  from {
    transform: translateX(calc(-3 * var(--s)));
  }
  to {
    transform: translateX(calc(8 * var(--s)));
  }
}
@keyframes titel-kaefer {
  from {
    transform: translateX(calc(3 * var(--s)));
  }
  to {
    transform: translateX(calc(-7 * var(--s)));
  }
}
@keyframes titel-hupf {
  0%,
  55%,
  100% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(calc(-0.22 * var(--s)));
  }
}

/* =====================================================================
 * V192 - DER SECHSTE SPIELAUTOMAT: AUTÖLI (angeordnet am 07.10.2026:
 * «nächster automat ist ein auto renn spiel. kosten 40 coins, 1 coin pro
 * spiel / arbeite ein richtig gutes renngame aus der vogelperspektive»)
 *
 * DAS AUSSEHEN DES AUTOMATEN: ein Gehäuse in Anthrazit wie Asphalt, mit
 * Streifen in Renngelb, und auf dem Schirm ein Autöli von oben - neben dem
 * violetten Gspänli, den orangen Plättli, den hölzernen Chlötzli, den
 * meerblauen Chrümeli und den erdbraunen Chörnli gut zu unterscheiden.
 * Gesetzt über die Marken aus V185, wie dort. Kein Grün und kein
 * Ziegelrot: Die beiden sind das Urteil (R6, R9).
 *
 * DIE RENNBAHN ist eine Leinwand, die ``spielhalle-autoeli.js`` bei jedem
 * Bild neu zeichnet; hier steht, was über ihr liegt: der Platz oben links,
 * die Ampel vor dem Start, eine Meldung in der Mitte und der Hinweis, wenn
 * das Autöli falsch herum fährt. Die kleine Karte der Strecke zeichnet das
 * Skript selbst. Die Ampel leuchtet orange und beim Los hell - nicht rot
 * und nicht grün.
 *
 * DIE KNÖPFE stehen wie an einem Lenkrad: links lenkt nach links, rechts
 * nach rechts, in der Mitte die Bremse - wie die beiden Hälften der
 * Strecke, auf die ein Finger auch tippen kann. Breit genug, liegen sie in
 * den Ecken über der Strecke, wo die Daumen sind.
 *
 * BEWEGUNG nur als Antwort auf eine Handlung und nur unter
 * ``prefers-reduced-motion: no-preference`` (``docs/03`` Abschnitt 3).
 * ===================================================================== */
[data-aussehen="autoeli"] {
  --automat-gehaeuse: #2f3340;
  --automat-gehaeuse-tief: #1f222c;
  --automat-glanz: rgba(255, 255, 255, 0.12);
  --automat-leuchte: #fff4cf;
  --automat-schrift: #1f222c;
  --automat-rahmen: #0e1016;
  --automat-schirm: #15181f;
  --automat-schirmbild: #ffcf3d;
  --automat-schirmglanz: rgba(255, 255, 255, 0.07);
  --automat-streifen: #ffcf3d;
  --automat-pult: #3d4251;
  --automat-knopf-a: #ffcf3d;
  --automat-knopf-b: #f2f3f6;
  --automat-licht: rgba(255, 255, 255, 0.6);
  --automat-tuer: #252832;
  --automat-schlitz: #ffe08a;
  --automat-schloss: #ffe08a;
  --automat-schatten: rgba(14, 16, 22, 0.22);
}
.schirm[data-aussehen="autoeli"] {
  --schirm-text: #f6f6f2;
  --schirm-zart: #ffd96b;
  --schirm-leise: #e6e8ee;
  --schirm-schein: rgba(255, 210, 80, 0.14);
}

/* ---------- Die Rennbahn ----------------------------------------------- */
.brett-autoeli {
  position: relative;
  /* Ein Finger auf der Strecke lenkt und schiebt nicht die Seite. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.rennbahn {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #3b3f49;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.12),
    0 0 0 3px #0e1016;
}
.renn-leinwand {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.brett-autoeli.vorbei .rennbahn {
  filter: saturate(0.6) brightness(0.85);
}

/* Der Platz: gross die Zahl, klein «/4», oben links auf dunklem Grund. Im
   Ziel bekommt er einen Rahmen in Gelb - für jeden Platz denselben. */
.renn-platz {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  padding: 8px 10px 7px;
  border-radius: 8px;
  background: rgba(10, 12, 24, 0.58);
  color: #fff;
  pointer-events: none;
}
.renn-platz-zahl .pixeltext {
  height: 30px;
}
.renn-platz-von {
  color: var(--schirm-zart);
}
.renn-platz-von .pixeltext {
  height: 12px;
}
.renn-platz.im-ziel {
  box-shadow: inset 0 0 0 2px #ffd23f;
}

/* Die Beulen des eigenen Autos (V255): ein Schraubenschlüssel und fünf Felder,
   die sich in Bernstein füllen - kein Rot, kein Grün, nur wie verbeult es ist. */
.renn-schaden {
  position: absolute;
  top: 66px;
  left: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(10, 12, 24, 0.58);
  pointer-events: none;
  transition: opacity 0.4s;
}
.renn-schaden.heil {
  opacity: 0.55;
}
.renn-schaden-zeichen {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background:
    radial-gradient(circle at 30% 30%, transparent 2.5px, #d7d9e0 2.6px 4.4px, transparent 4.5px),
    linear-gradient(45deg, transparent 44%, #d7d9e0 45% 60%, transparent 61%);
}
.renn-schaden-feld {
  width: 9px;
  height: 12px;
  border-radius: 2px;
  background: #3a3d48;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35);
}
.renn-schaden-feld.voll {
  background: #ffb347;
  box-shadow:
    0 0 6px rgba(255, 179, 71, 0.6),
    inset 0 -2px 0 rgba(0, 0, 0, 0.2);
}
/* Ein Totalschaden (V284): alle Felder voll, dunkel wie Russ, ohne Leuchten - kein Rot. */
.renn-schaden.wrack .renn-schaden-feld.voll {
  background: #55575d;
  box-shadow: inset 0 0 0 1px #ffb347;
}

/* Die Ampel: drei Lampen, eine nach der anderen orange, beim Los alle hell. */
.renn-ampel {
  position: absolute;
  top: 16%;
  left: 50%;
  z-index: 2;
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #15171f;
  box-shadow:
    0 0 0 3px #0e1016,
    0 6px 0 3px rgba(0, 0, 0, 0.35);
  transform: translateX(-50%);
  pointer-events: none;
}
.renn-ampel[hidden] {
  display: none;
}
.renn-lampe {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #3a3d48;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.35);
}
.renn-lampe.an {
  background: #ff9f43;
  box-shadow:
    0 0 14px rgba(255, 159, 67, 0.8),
    inset 0 -3px 0 rgba(0, 0, 0, 0.2);
}
.renn-ampel.los .renn-lampe.an {
  background: #fff3b0;
  box-shadow: 0 0 18px rgba(255, 236, 140, 0.95);
}

/* Eine Meldung mitten auf der Strecke: «Noch 2 Runden», «Ziel! Platz 1». */
.renn-meldung,
.renn-richtung {
  position: absolute;
  left: 50%;
  z-index: 2;
  margin: 0;
  border-radius: 8px;
  background: rgba(10, 12, 24, 0.62);
  white-space: nowrap;
  pointer-events: none;
}
.renn-meldung {
  top: 34%;
  padding: 10px 16px;
  color: #fff;
  transform: translate(-50%, -50%);
}
.renn-meldung .pixeltext {
  height: clamp(15px, 4.6vw, 22px);
}
/* Falsch herum: ein Hinweis unten, still - er sagt nur, was zu tun ist. */
.renn-richtung {
  bottom: 12%;
  padding: 8px 12px;
  color: var(--schirm-zart);
  transform: translateX(-50%);
}
.renn-richtung .pixeltext {
  height: clamp(12px, 3.6vw, 18px);
}
.renn-meldung[hidden],
.renn-richtung[hidden] {
  display: none;
}

/* ---------- Das Startbild ---------------------------------------------- */
/* Ein Stück Strasse mit der Ziellinie, und zwei Autöli fahren auf sie zu -
   das eigene mit dem Scampy zieht vorbei. */
.titel-rennbild {
  --s: clamp(24px, 6.4vw, 38px);
  position: relative;
  width: calc(9 * var(--s));
  height: calc(2.3 * var(--s));
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 0 0 3px #0e1016;
}
.titel-strasse {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(#f4f1ea 0 5%, transparent 5% 95%, #f4f1ea 95%),
    linear-gradient(transparent 48.5%, rgba(244, 241, 234, 0.8) 48.5% 51.5%, transparent 51.5%),
    #55565f;
}
/* Die Mittellinie ist gestrichelt: helle Stücke, dazwischen Asphalt. */
.titel-strasse::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 calc(0.5 * var(--s)),
    #55565f calc(0.5 * var(--s)) calc(1 * var(--s))
  );
  clip-path: inset(48% 0 48% 0);
}
.titel-ziellinie {
  position: absolute;
  top: 5%;
  bottom: 5%;
  right: calc(1.4 * var(--s));
  width: calc(0.5 * var(--s));
  background: conic-gradient(#f4f1ea 25%, #1b1633 0 50%, #f4f1ea 0 75%, #1b1633 0) 0 0 /
    calc(0.25 * var(--s)) calc(0.25 * var(--s));
}
.titel-auto {
  position: absolute;
  width: var(--s);
  height: var(--s);
}
/* Gezeichnet schaut ein Autöli nach oben; hier fährt es nach rechts. */
.titel-auto .pixelfigur {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(90deg);
}
.titel-auto-gegner {
  top: calc(0.12 * var(--s));
  left: calc(4.4 * var(--s));
}
.titel-auto-eigenes {
  top: calc(1.18 * var(--s));
  left: calc(5.6 * var(--s));
}

@media (prefers-reduced-motion: no-preference) {
  .renn-meldung.zeigt {
    animation: renn-meldung 0.45s cubic-bezier(0.3, 0.7, 0.35, 1.3);
  }
  .renn-ampel.los {
    animation: renn-ampel-los 0.7s ease-in forwards;
  }
  .renn-lampe {
    transition:
      background-color 0.12s ease,
      box-shadow 0.12s ease;
  }
  .brett-autoeli.runde-geschafft .rennbahn {
    animation: rennbahn-geschafft 1.2s ease-out;
  }
  /* Beide fahren von links ins Bild und rechts hinaus, das eigene schneller. */
  .titel-auto-gegner,
  .titel-auto-eigenes {
    left: 0;
  }
  .titel-auto-gegner {
    animation: titel-fahrt 3.4s linear infinite;
  }
  .titel-auto-eigenes {
    animation: titel-fahrt 2.6s linear -1.2s infinite;
  }
}
@keyframes renn-meldung {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}
@keyframes renn-ampel-los {
  0%,
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rennbahn-geschafft {
  0%,
  100% {
    filter: brightness(1);
  }
  30% {
    filter: brightness(1.22) saturate(1.15);
  }
}
/* Die Autöli fahren von links nach rechts über die Strasse und wieder von vorn. */
@keyframes titel-fahrt {
  from {
    transform: translateX(calc(-1.2 * var(--s)));
  }
  to {
    transform: translateX(calc(9.2 * var(--s)));
  }
}

/* =====================================================================
 * V193 - DER SIEBTE SPIELAUTOMAT: CHÜGELI (angeordnet am 08.10.2026:
 * «nächster automat ist ein flipper. kosten 40 coins, 1 coin pro spiel»)
 *
 * DAS AUSSEHEN DES AUTOMATEN: ein Gehäuse in Kobaltblau mit Streifen in
 * Silber und Knöpfen in Pink, und auf dem Schirm eine Kugel zwischen zwei
 * Armen - neben dem violetten Gspänli, den orangen Plättli, den hölzernen
 * Chlötzli, den meerblauen Chrümeli, den erdbraunen Chörnli und den
 * Autöli in Anthrazit gut zu unterscheiden. Gesetzt über die Marken aus
 * V185, wie dort. Kein Grün und kein Ziegelrot: Die beiden sind das Urteil
 * (R6, R9).
 *
 * DER FLIPPERTISCH ist eine Leinwand, die ``spielhalle-chuegeli.js`` bei
 * jedem Bild neu zeichnet; hier steht, was über ihr liegt: eine Meldung in
 * der Mitte und der Hinweis auf den Abschuss über seiner Rinne.
 *
 * DIE KNÖPFE stehen wie an einem Flipper: aussen die Arme, in der Mitte
 * der Abschuss. Breit genug, liegen sie in den Ecken neben dem Tisch, wo
 * die Daumen sind.
 *
 * BEWEGUNG nur als Antwort auf eine Handlung und nur unter
 * ``prefers-reduced-motion: no-preference`` (``docs/03`` Abschnitt 3).
 * ===================================================================== */
[data-aussehen="chuegeli"] {
  --automat-gehaeuse: #2a4bb8;
  --automat-gehaeuse-tief: #1b3285;
  --automat-glanz: rgba(255, 255, 255, 0.16);
  --automat-leuchte: #ffe3f2;
  --automat-schrift: #1b1d5c;
  --automat-rahmen: #0f1640;
  --automat-schirm: #0f1238;
  --automat-schirmbild: #ff6ec0;
  --automat-schirmglanz: rgba(255, 255, 255, 0.08);
  --automat-streifen: #d9dcec;
  --automat-pult: #22409e;
  --automat-knopf-a: #ff6ec0;
  --automat-knopf-b: #d9dcec;
  --automat-licht: rgba(255, 255, 255, 0.6);
  --automat-tuer: #1f3a94;
  --automat-schlitz: #ffd1ea;
  --automat-schloss: #ffd1ea;
  --automat-schatten: rgba(15, 22, 64, 0.24);
}
.schirm[data-aussehen="chuegeli"] {
  --schirm-text: #f6f6fb;
  --schirm-zart: #ff9fd4;
  --schirm-leise: #e4e7f6;
  --schirm-schein: rgba(255, 110, 192, 0.14);
}

/* ---------- Der Flippertisch ------------------------------------------- */
.brett-chuegeli {
  position: relative;
  /* Ein Finger auf dem Tisch schlägt und schiebt nicht die Seite. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.flippertisch {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.flipper-leinwand {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.brett-chuegeli.vorbei .flippertisch {
  filter: saturate(0.6) brightness(0.85);
}

/* Eine Meldung mitten auf dem Tisch: «Alle an!», «Kugel weg», «Gerettet!». */
.flipper-meldung {
  position: absolute;
  top: 38%;
  left: 50%;
  z-index: 2;
  margin: 0;
  padding: 10px 16px;
  border-radius: 8px;
  background: rgba(10, 12, 40, 0.66);
  color: #fff;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.flipper-meldung .pixeltext {
  height: clamp(15px, 4.6vw, 22px);
}
/* Seit V249: Was viel zählt - Jackpot, Multiball, Hurry-up, Supernova -,
   steht grösser da, mit einem Rand aus Licht. Neon und Gold, nie Rot oder
   Grün (R6, R9). */
.flipper-meldung.gross {
  padding: 12px 20px;
  background: linear-gradient(160deg, rgba(40, 14, 70, 0.9), rgba(10, 12, 40, 0.86));
  box-shadow:
    0 0 0 2px #ff5fd2,
    0 0 18px rgba(255, 95, 210, 0.75),
    0 0 36px rgba(255, 207, 63, 0.35);
  color: #ffe066;
}
.flipper-meldung.gross .pixeltext {
  height: clamp(20px, 6.4vw, 30px);
}
/* Der Hinweis auf den Abschuss: still über seiner Rinne, solange die Kugel
   dort wartet. Das Skript setzt, wo er steht. */
.flipper-hinweis {
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 5px 7px;
  border-radius: 6px;
  background: rgba(10, 12, 40, 0.66);
  color: var(--schirm-zart);
  white-space: nowrap;
  transform: translateX(-80%);
  pointer-events: none;
}
.flipper-hinweis .pixeltext {
  height: clamp(10px, 2.8vw, 13px);
}
.flipper-meldung[hidden],
.flipper-hinweis[hidden] {
  display: none;
}

/* ---------- Das Startbild ---------------------------------------------- */
/* Ein Stück Tisch: zwei Pilze oben, zwei Arme unten, der Scampy dazwischen,
   und die Kugel springt zwischen Armen und Pilzen hin und her. */
.titel-flipperbild {
  --s: clamp(22px, 6vw, 34px);
  position: relative;
  width: calc(7 * var(--s));
  height: calc(4.4 * var(--s));
  overflow: hidden;
  border-radius: calc(3.5 * var(--s)) calc(3.5 * var(--s)) 8px 8px;
  background: linear-gradient(#3a3f8f, #0f1238);
  box-shadow: 0 0 0 3px #d9dcec;
}
.titel-flipperpilz {
  position: absolute;
  top: calc(0.9 * var(--s));
  width: var(--s);
  height: var(--s);
  border: calc(0.12 * var(--s)) solid #fff6cf;
  border-radius: 50%;
  background: #ffd23f;
  box-shadow: 0 0 0 2px #1b1633;
}
.titel-flipperpilz-links {
  left: calc(1.4 * var(--s));
}
.titel-flipperpilz-rechts {
  right: calc(1.4 * var(--s));
}
.titel-flipperarm {
  position: absolute;
  bottom: calc(0.5 * var(--s));
  width: calc(2 * var(--s));
  height: calc(0.4 * var(--s));
  border-radius: calc(0.2 * var(--s));
  background: #fff7e3;
  box-shadow:
    0 0 0 2px #1b1633,
    inset 0 0 0 2px #ff6ec0;
}
.titel-flipperarm-links {
  left: calc(1.2 * var(--s));
  transform-origin: calc(0.2 * var(--s)) 50%;
  transform: rotate(24deg);
}
.titel-flipperarm-rechts {
  right: calc(1.2 * var(--s));
  transform-origin: calc(1.8 * var(--s)) 50%;
  transform: rotate(-24deg);
}
.titel-chuegeli {
  position: absolute;
  left: calc(3.2 * var(--s));
  bottom: calc(1.1 * var(--s));
  width: calc(0.6 * var(--s));
  height: calc(0.6 * var(--s));
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff, #c9ccdc 45%, #5d6177);
}
.titel-flipperscampi {
  position: absolute;
  left: calc(2.75 * var(--s));
  top: calc(0.75 * var(--s));
  width: calc(1.5 * var(--s));
  height: calc(1.5 * var(--s));
}
.titel-flipperscampi .pixelfigur {
  display: block;
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .flipper-meldung.zeigt {
    animation: flipper-meldung 0.45s cubic-bezier(0.3, 0.7, 0.35, 1.3);
  }
  .flipper-meldung.gross.zeigt {
    animation:
      flipper-meldung-gross 0.6s cubic-bezier(0.3, 0.7, 0.35, 1.4),
      flipper-meldung-leuchten 0.5s ease-in-out 0.6s 3 alternate;
  }
  .brett-chuegeli.runde-geschafft .flippertisch {
    animation: flippertisch-geschafft 1.2s ease-out;
  }
  /* Die Kugel steigt auf, fällt zurück, und die Arme schlagen sie wieder hinauf. */
  .titel-chuegeli {
    animation: titel-chuegeli 1.8s cubic-bezier(0.35, 0, 0.65, 1) infinite;
  }
  .titel-flipperarm-links {
    animation: titel-arm-links 1.8s ease-out infinite;
  }
  .titel-flipperarm-rechts {
    animation: titel-arm-rechts 1.8s ease-out 0.9s infinite;
  }
}
@keyframes flipper-meldung {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}
@keyframes flipper-meldung-gross {
  0% {
    transform: translate(-50%, -50%) scale(0.3) rotate(-6deg);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, -50%) scale(1.18) rotate(2deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0);
  }
}
@keyframes flipper-meldung-leuchten {
  to {
    box-shadow:
      0 0 0 2px #ffe066,
      0 0 26px rgba(255, 224, 102, 0.85),
      0 0 48px rgba(255, 95, 210, 0.45);
  }
}
@keyframes flippertisch-geschafft {
  0%,
  100% {
    filter: brightness(1);
  }
  30% {
    filter: brightness(1.22) saturate(1.15);
  }
}
@keyframes titel-chuegeli {
  0%,
  100% {
    transform: translate(calc(-1.2 * var(--s)), 0);
  }
  25% {
    transform: translate(calc(-0.6 * var(--s)), calc(-2.3 * var(--s)));
  }
  50% {
    transform: translate(calc(1.2 * var(--s)), 0);
  }
  75% {
    transform: translate(calc(0.6 * var(--s)), calc(-2.3 * var(--s)));
  }
}
@keyframes titel-arm-links {
  0%,
  10%,
  100% {
    transform: rotate(24deg);
  }
  3% {
    transform: rotate(-18deg);
  }
}
@keyframes titel-arm-rechts {
  0%,
  10%,
  100% {
    transform: rotate(-24deg);
  }
  3% {
    transform: rotate(18deg);
  }
}

/* =====================================================================
 * V194 - DIE EINFACHEN SPIELAUTOMATEN, DER ERSTE: GLÖGGLI (angeordnet am
 * 08.10.2026: «baue anschliessend noch 10 einfache arcade kasten.
 * geschützes nicht nehmen bzw ändern so dass es rechtlich keine probleme
 * geben kann»)
 *
 * DAS AUSSEHEN DES AUTOMATEN: ein Gehäuse in tiefem Nachtblau mit Messing,
 * wie ein Glockenstuhl am Abend, und auf dem Schirm drei Glöggli an einem
 * Balken. Kein Grün und kein Ziegelrot (R6, R9).
 *
 * DIE GLÖGGLI hängen an einem Balken aus Holz, links das grösste und
 * tiefste, rechts das kleinste und höchste, jedes in seiner Farbe. Klingt
 * eines, schwingt es - bei reduzierter Bewegung leuchtet es nur auf. Ein
 * falsches wackelt kurz, ohne Farbe. Darüber steht, wer dran ist, darunter
 * ein Punkt je Ton der Melodie.
 * ===================================================================== */
[data-aussehen="gloeggli"] {
  --automat-gehaeuse: #1d3557;
  --automat-gehaeuse-tief: #132540;
  --automat-glanz: rgba(255, 255, 255, 0.14);
  --automat-leuchte: #fff1cc;
  --automat-schrift: #132540;
  --automat-rahmen: #0b1628;
  --automat-schirm: #0e1a30;
  --automat-schirmbild: #f2c14e;
  --automat-schirmglanz: rgba(255, 255, 255, 0.07);
  --automat-streifen: #f2c14e;
  --automat-pult: #24426b;
  --automat-knopf-a: #f2c14e;
  --automat-knopf-b: #f6efe0;
  --automat-licht: rgba(255, 255, 255, 0.6);
  --automat-tuer: #1a3050;
  --automat-schlitz: #ffe39a;
  --automat-schloss: #ffe39a;
  --automat-schatten: rgba(11, 22, 40, 0.24);
}
.schirm[data-aussehen="gloeggli"] {
  --schirm-text: #f6f6fb;
  --schirm-zart: #f7d27a;
  --schirm-leise: #e4e7f6;
  --schirm-schein: rgba(242, 193, 78, 0.14);
}

/* Die Farben der Glöggli, eine je Ton. */
:is(.gloeggli, .titel-glocke)[data-farbe="gelb"] {
  --farbe: #ffd23f;
}
:is(.gloeggli, .titel-glocke)[data-farbe="blau"] {
  --farbe: #4f8dff;
}
:is(.gloeggli, .titel-glocke)[data-farbe="violett"] {
  --farbe: #a07bff;
}
:is(.gloeggli, .titel-glocke)[data-farbe="orange"] {
  --farbe: #ff9a3d;
}
:is(.gloeggli, .titel-glocke)[data-farbe="pink"] {
  --farbe: #ff6ec0;
}
:is(.gloeggli, .titel-glocke)[data-farbe="tuerkis"] {
  --farbe: #33d3d0;
}

/* ---------- Der Balken mit den Glöggli ------------------------------------ */
.brett-gloeggli {
  display: grid;
  place-items: center;
  user-select: none;
  -webkit-user-select: none;
}
.gloeggli-buehne {
  display: grid;
  justify-items: center;
  gap: clamp(14px, 3vh, 28px);
  width: min(100%, 760px);
}
.gloeggli-hinweis,
.gloeggli-punkte {
  min-height: 22px;
  margin: 0;
  color: var(--schirm-zart);
}
.gloeggli-hinweis .pixeltext {
  height: clamp(15px, 4.4vw, 22px);
}
.gloeggli-hinweis[data-wer="dran"] {
  color: var(--schirm-text);
}
.gloeggli-balken {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(4px, 1.6vw, 14px);
  width: 100%;
  padding: 10px 10px 0;
  border-top: 12px solid #8a5a2b;
  border-radius: 6px 6px 0 0;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.18);
}
.gloeggli {
  --groesse: 1;
  display: grid;
  place-items: start center;
  /* So gross, wie es geht: sechs Glöggli passen auch auf ein schmales Telefon. */
  width: calc(min(150px, (100vw - 40px) / var(--anzahl, 3) - 10px) * var(--groesse));
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.gloeggli:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
  border-radius: 8px;
}
.glocke-bild {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transform-origin: 50% 5%;
}
.glocke-haken {
  fill: none;
  stroke: #c9a24a;
  stroke-width: 2.4;
}
.glocke-koerper {
  fill: var(--farbe);
  stroke: #1b1633;
  stroke-width: 2;
  stroke-linejoin: round;
}
.glocke-glanz {
  fill: none;
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 2.4;
  stroke-linecap: round;
}
.glocke-kloeppel {
  fill: #1b1633;
}
.gloeggli.klingt .glocke-koerper {
  filter: brightness(1.35);
}
.gloeggli[aria-disabled="true"] {
  cursor: default;
}
.gloeggli-punkte {
  display: flex;
  gap: 8px;
}
.gloeggli-punkte .punkt {
  width: 12px;
  height: 12px;
  border: 2px solid var(--schirm-zart);
  border-radius: 50%;
}
.gloeggli-punkte .punkt.voll {
  background: var(--schirm-zart);
}

/* ---------- Das Startbild ------------------------------------------------- */
.titel-balken {
  --s: clamp(46px, 12vw, 74px);
  display: flex;
  gap: calc(0.25 * var(--s));
  padding-top: 8px;
  border-top: 8px solid #8a5a2b;
  border-radius: 4px 4px 0 0;
}
.titel-glocke {
  width: var(--s);
}
.titel-glocke .glocke-bild {
  display: block;
  width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .gloeggli.klingt .glocke-bild,
  .titel-glocke.klingt .glocke-bild {
    animation: glocke-schwingt 0.6s ease-out;
  }
  .gloeggli.daneben .glocke-bild {
    animation: glocke-wackelt 0.4s ease-in-out;
  }
  .titel-glocke.klingt .glocke-koerper {
    filter: brightness(1.35);
  }
}
@keyframes glocke-schwingt {
  0%,
  100% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(14deg);
  }
  45% {
    transform: rotate(-10deg);
  }
  70% {
    transform: rotate(5deg);
  }
}
@keyframes glocke-wackelt {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}

/* =====================================================================
 * V195 - DIE EINFACHEN SPIELAUTOMATEN, DER ZWEITE: CHRIESI
 *
 * DAS AUSSEHEN DES AUTOMATEN: ein Gehäuse aus dunklem Nussbaum mit Gold,
 * wie eine Kiste auf dem Markt, und auf dem Schirm zwei Chriesi an einem
 * Stiel. Kein Grün und kein Ziegelrot (R6, R9).
 *
 * DIE CHÖRBLI sind geflochten, acht nebeneinander, jedes ein Knopf mit sechs
 * Löchern. Die Chriesi des Kinds sind golden, die des Scampy dunkel violett,
 * beide mit einem braunen Stiel. Vier in einer Reihe bekommen einen hellen
 * Ring, für beide gleich; ein volles Chörbli wackelt, wenn man es antippt.
 * Darüber steht, wer dran ist.
 * ===================================================================== */
[data-aussehen="chriesi"] {
  --automat-gehaeuse: #5b3a24;
  --automat-gehaeuse-tief: #3f2717;
  --automat-glanz: rgba(255, 255, 255, 0.12);
  --automat-leuchte: #fff0c4;
  --automat-schrift: #3f2717;
  --automat-rahmen: #24150b;
  --automat-schirm: #1d1426;
  --automat-schirmbild: #ffc93c;
  --automat-schirmglanz: rgba(255, 255, 255, 0.07);
  --automat-streifen: #ffc93c;
  --automat-pult: #6b462c;
  --automat-knopf-a: #ffc93c;
  --automat-knopf-b: #f6efe0;
  --automat-licht: rgba(255, 255, 255, 0.6);
  --automat-tuer: #4c301d;
  --automat-schlitz: #ffe39a;
  --automat-schloss: #ffe39a;
  --automat-schatten: rgba(36, 21, 11, 0.26);
}
.schirm[data-aussehen="chriesi"] {
  --schirm-text: #f8f3ea;
  --schirm-zart: #ffd770;
  --schirm-leise: #eadff0;
  --schirm-schein: rgba(255, 201, 60, 0.13);
}

/* ---------- Die Chörbli ---------------------------------------------------- */
.brett-chriesi {
  display: grid;
  place-items: center;
  user-select: none;
  -webkit-user-select: none;
}
.chriesi-tisch {
  display: grid;
  justify-items: center;
  gap: clamp(10px, 2.4vh, 20px);
}
.chriesi-zug {
  min-height: 22px;
  margin: 0;
  color: var(--schirm-zart);
}
.chriesi-zug .pixeltext {
  height: clamp(15px, 4.4vw, 22px);
}
.chriesi-zug[data-wer="dran"] {
  color: var(--schirm-text);
}
.chriesi-feld {
  /* So gross, wie es geht: acht Chörbli passen auch auf ein schmales Telefon. */
  --zelle: min(66px, (100vw - 84px) / var(--spalten, 8), (100dvh - 250px) / var(--zeilen, 6));
  display: flex;
  gap: calc(0.1 * var(--zelle));
  padding: calc(0.12 * var(--zelle));
  border-radius: 12px;
  background: #2a1a10;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.1);
}
.chriesi-spalte {
  display: flex;
  flex-direction: column;
  gap: calc(0.06 * var(--zelle));
  padding: calc(0.08 * var(--zelle)) calc(0.06 * var(--zelle));
  border: 0;
  border-radius: 6px 6px 12px 12px;
  /* Geflochten: zwei Lagen Streifen über Kreuz. */
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0 3px, transparent 3px 8px),
    repeating-linear-gradient(0deg, #b07a43 0 5px, #9a6534 5px 10px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.chriesi-spalte:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
.chriesi-loch {
  display: grid;
  place-items: center;
  width: calc(0.88 * var(--zelle));
  height: calc(0.88 * var(--zelle));
  border-radius: 50%;
  background: #24150b;
  box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.5);
}
.chriesi {
  display: block;
  width: 92%;
}
.chriesi svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.chriesi-stiel {
  fill: none;
  stroke: #8a5a2b;
  stroke-width: 3;
  stroke-linecap: round;
}
.chriesi-frucht {
  stroke: #1b1633;
  stroke-width: 2;
}
.chriesi[data-wer="kind"] .chriesi-frucht {
  fill: #ffc93c;
}
.chriesi[data-wer="scampi"] .chriesi-frucht {
  fill: #5b2f86;
}
.chriesi-glanz {
  fill: rgba(255, 255, 255, 0.62);
}
.chriesi-loch.vier {
  box-shadow:
    inset 0 3px 4px rgba(0, 0, 0, 0.5),
    0 0 0 3px #fff8e1;
}

/* ---------- Das Startbild ------------------------------------------------- */
.titel-chriesikiste {
  --zelle: clamp(46px, 12vw, 72px);
  display: flex;
  gap: calc(0.14 * var(--zelle));
  padding: calc(0.14 * var(--zelle));
  border-radius: 10px;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0 3px, transparent 3px 8px),
    repeating-linear-gradient(0deg, #b07a43 0 5px, #9a6534 5px 10px);
}
/* Was ins Startbild fällt, kommt aus seinem Loch und fliegt über keinen Text. */
.titel-chriesikiste .chriesi-loch {
  width: calc(0.88 * var(--zelle));
  height: calc(0.88 * var(--zelle));
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .chriesi-spalte.voll {
    animation: glocke-wackelt 0.4s ease-in-out;
  }
  .chriesi-loch.vier .chriesi {
    animation: chriesi-hebt 0.5s ease-out 2;
  }
}
@keyframes chriesi-hebt {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
  }
}

/* =====================================================================
 * V196 - DIE EINFACHEN SPIELAUTOMATEN, DER DRITTE: MÜHLI
 *
 * DAS AUSSEHEN DES AUTOMATEN: ein Gehäuse in Schiefer mit hellem Ahorn, wie
 * ein Spielbrett auf einem Steintisch, und auf dem Schirm das Brett aus drei
 * Quadraten. Kein Grün und kein Ziegelrot (R6, R9).
 *
 * DAS BRETT ist aus hellem Holz mit dunklen Linien. Die Steine des Kinds
 * sind hell wie Ahorn, die des Scampy dunkel wie Nussbaum. Eine Mühle
 * leuchtet für beide gleich hell auf; ein gewählter Stein hebt sich, Ziele
 * tragen einen kleinen Punkt, und was man nehmen darf, einen hellen Ring.
 * ===================================================================== */
[data-aussehen="muehli"] {
  --automat-gehaeuse: #3d4652;
  --automat-gehaeuse-tief: #2a3039;
  --automat-glanz: rgba(255, 255, 255, 0.12);
  --automat-leuchte: #fbefd5;
  --automat-schrift: #2a3039;
  --automat-rahmen: #171b21;
  --automat-schirm: #1d1a16;
  --automat-schirmbild: #e9c98f;
  --automat-schirmglanz: rgba(255, 255, 255, 0.07);
  --automat-streifen: #e9c98f;
  --automat-pult: #4a5562;
  --automat-knopf-a: #e9c98f;
  --automat-knopf-b: #f6efe0;
  --automat-licht: rgba(255, 255, 255, 0.6);
  --automat-tuer: #343c46;
  --automat-schlitz: #ffe39a;
  --automat-schloss: #ffe39a;
  --automat-schatten: rgba(23, 27, 33, 0.26);
}
.schirm[data-aussehen="muehli"] {
  --schirm-text: #f8f3ea;
  --schirm-zart: #edd3a2;
  --schirm-leise: #eae2d4;
  --schirm-schein: rgba(233, 201, 143, 0.13);
}

/* ---------- Das Brett ----------------------------------------------------- */
.brett-muehli {
  display: grid;
  place-items: center;
  user-select: none;
  -webkit-user-select: none;
}
.muehli-tisch {
  display: grid;
  justify-items: center;
  gap: clamp(8px, 2vh, 18px);
}
.muehli-zug {
  min-height: 22px;
  margin: 0;
  color: var(--schirm-zart);
}
.muehli-zug .pixeltext {
  height: clamp(15px, 4.4vw, 22px);
  /* V435: «Springe mit einem Stein» braucht auf 320 px fast die ganze Breite;
     wo sie fehlt, wird die Schrift kleiner, wie bei den Pixelknöpfen (V433). */
  max-width: 100%;
}
.muehli-zug[data-wer="dran"],
.muehli-zug[data-wer="nehmen"] {
  color: var(--schirm-text);
}
.muehli-brett {
  --seite: min(92vw, 100dvh - 280px, 560px);
  position: relative;
  width: var(--seite);
  height: var(--seite);
  border-radius: 14px;
  background:
    repeating-linear-gradient(97deg, rgba(120, 72, 30, 0.08) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, #e2bf87, #c9995b);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.35),
    0 6px 0 #8a5a2b;
}
.muehli-linien {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.muehli-linien rect,
.muehli-linien line {
  fill: none;
  stroke: #5b3a1e;
  stroke-width: 0.06;
}
.muehli-punkt {
  --punkt: calc(var(--seite) / 7 * 0.82);
  position: absolute;
  display: grid;
  place-items: center;
  width: var(--punkt);
  height: var(--punkt);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  transform: translate(-50%, -50%);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.muehli-brett[data-groesse="klein"] .muehli-punkt,
.titel-muehlibrett .muehli-punkt {
  --punkt: calc(var(--seite) / 5 * 0.7);
}
.muehli-punkt::before {
  content: "";
  position: absolute;
  width: 22%;
  height: 22%;
  border-radius: 50%;
  background: #5b3a1e;
}
.muehli-punkt:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 1px;
}
.muehli-stein {
  position: relative;
  width: 84%;
  height: 84%;
  border-radius: 50%;
  border: 2px solid #1b1633;
}
.muehli-stein[data-wer="kind"] {
  background: radial-gradient(circle at 35% 30%, #fffaf0, #f0dcb4 60%, #d9bd8a);
}
.muehli-stein[data-wer="scampi"] {
  background: radial-gradient(circle at 35% 30%, #8a6a52, #4a3020 60%, #2c1c12);
}
.muehli-punkt.gewaehlt .muehli-stein {
  box-shadow: 0 0 0 4px #fff;
  transform: translateY(-6%);
}
.muehli-punkt.ziel::before {
  width: 34%;
  height: 34%;
  background: #fff;
  box-shadow: 0 0 0 2px #5b3a1e;
}
.muehli-punkt.nehmbar .muehli-stein {
  box-shadow: 0 0 0 4px #fff8e1;
}
.muehli-punkt.muehle .muehli-stein {
  box-shadow: 0 0 0 4px #fff8e1;
}
.muehli-hand {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  width: min(92vw, 100dvh - 280px, 560px);
  min-height: 20px;
}
.muehli-handreihe {
  display: flex;
  gap: 4px;
}
.muehli-handreihe .muehli-stein {
  width: 16px;
  height: 16px;
  border-width: 1.5px;
}

/* ---------- Das Startbild ------------------------------------------------- */
.titel-muehlibrett {
  --seite: clamp(150px, 34vw, 210px);
}

@media (prefers-reduced-motion: no-preference) {
  .muehli-stein.neu {
    animation: muehli-setzt 0.22s ease-out;
  }
  .muehli-stein.weg {
    animation: muehli-weg 0.26s ease-in forwards;
  }
  .muehli-punkt.nein {
    animation: glocke-wackelt 0.4s ease-in-out;
  }
  .muehli-punkt.muehle .muehli-stein {
    animation: chriesi-hebt 0.5s ease-out 2;
  }
  .muehli-punkt.gewaehlt .muehli-stein,
  .muehli-punkt.nehmbar .muehli-stein {
    transition:
      transform 0.15s ease-out,
      box-shadow 0.15s ease-out;
  }
}
@keyframes muehli-setzt {
  from {
    transform: scale(1.35);
    opacity: 0.4;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes muehli-weg {
  to {
    transform: scale(0.4);
    opacity: 0;
  }
}

/* =====================================================================
 * V197 - DIE EINFACHEN SPIELAUTOMATEN, DER VIERTE: SCHIEBLI
 *
 * DAS AUSSEHEN DES AUTOMATEN: ein Gehäuse in Petrol mit Birke, und auf dem
 * Schirm ein Rahmen mit acht Plättchen und einer Lücke. Kein Grün und kein
 * Ziegelrot (R6, R9).
 *
 * DAS BRETT ist ein Rahmen aus Holz; jedes Plättchen zeigt seinen Ausschnitt
 * des Bildes auf hellem Grund. Ein fertiges Bild schliesst sich: Die Fugen
 * verschwinden, ohne dass etwas aufleuchtet.
 * ===================================================================== */
[data-aussehen="schiebli"] {
  --automat-gehaeuse: #1f6f78;
  --automat-gehaeuse-tief: #154f56;
  --automat-glanz: rgba(255, 255, 255, 0.14);
  --automat-leuchte: #f4ecdc;
  --automat-schrift: #154f56;
  --automat-rahmen: #0f2a2e;
  --automat-schirm: #102326;
  --automat-schirmbild: #f2deb3;
  --automat-schirmglanz: rgba(255, 255, 255, 0.07);
  --automat-streifen: #f2deb3;
  --automat-pult: #237f89;
  --automat-knopf-a: #f2deb3;
  --automat-knopf-b: #ffb84d;
  --automat-licht: rgba(255, 255, 255, 0.6);
  --automat-tuer: #1a5d65;
  --automat-schlitz: #ffe39a;
  --automat-schloss: #ffe39a;
  --automat-schatten: rgba(15, 42, 46, 0.26);
}
.schirm[data-aussehen="schiebli"] {
  --schirm-text: #f8f3ea;
  --schirm-zart: #f2deb3;
  --schirm-leise: #dcebec;
  --schirm-schein: rgba(242, 222, 179, 0.12);
}

/* ---------- Das Brett ----------------------------------------------------- */
.brett-schiebli {
  display: grid;
  place-items: center;
  user-select: none;
  -webkit-user-select: none;
}
.schiebli-tisch {
  display: grid;
  justify-items: center;
  gap: clamp(10px, 2.4vh, 22px);
}
.schiebli-rahmen {
  --seite: min(86vw, 100dvh - 330px, 520px);
  padding: clamp(6px, 1.6vw, 12px);
  border-radius: 14px;
  background:
    repeating-linear-gradient(97deg, rgba(120, 72, 30, 0.1) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, #c9995b, #9c6a35);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    0 6px 0 #6e4520;
}
.schiebli-brett {
  position: relative;
  width: var(--seite);
  height: var(--seite);
  overflow: hidden;
  border-radius: 6px;
  background: #3a2716;
}
.schiebli-plaettchen {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% / var(--n));
  height: calc(100% / var(--n));
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 5px;
  background: #f7f1e6;
  box-shadow:
    inset 0 0 0 1.5px rgba(58, 39, 22, 0.55),
    inset 0 2px 0 rgba(255, 255, 255, 0.7);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.schiebli-plaettchen:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -4px;
  z-index: 1;
}
.schiebli-bild {
  position: absolute;
  width: calc(var(--n) * 100%);
  height: calc(var(--n) * 100%);
  pointer-events: none;
}
.schiebli-bild .motiv {
  display: block;
  width: 100%;
  height: 100%;
}
.schiebli-zahl {
  position: absolute;
  top: 4px;
  left: 5px;
  min-width: 1.4em;
  padding: 0 3px;
  border-radius: 6px;
  background: rgba(15, 42, 46, 0.78);
  color: #f8f3ea;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(11px, 2.6vw, 15px);
  font-weight: 700;
  line-height: 1.4;
  pointer-events: none;
}
.schiebli-brett.geloest .schiebli-plaettchen {
  border-radius: 0;
  box-shadow: none;
}
.schiebli-brett.geloest .schiebli-zahl {
  opacity: 0;
}
.schiebli-letztes {
  cursor: default;
}
.schiebli-vorlage {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin: 0;
  color: var(--schirm-zart);
  font-size: 13.5px;
}
.schiebli-vorlage .motiv {
  width: clamp(54px, 14vw, 84px);
  height: clamp(54px, 14vw, 84px);
  padding: 5px;
  border-radius: 8px;
  background: #f7f1e6;
}

@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .schiebli-tisch {
    grid-auto-flow: column;
    align-items: center;
    gap: 32px;
  }
  .schiebli-rahmen {
    --seite: min(56vw, 100dvh - 220px, 560px);
  }
  .schiebli-vorlage .motiv {
    width: 120px;
    height: 120px;
  }
}

/* ---------- Das Startbild ------------------------------------------------- */
.titel-schieblibrett {
  --seite: clamp(132px, 30vw, 190px);
  padding: 5px;
  box-sizing: content-box;
  background: #9c6a35;
}

@media (prefers-reduced-motion: no-preference) {
  .schiebli-brett:not(.ruhig) .schiebli-plaettchen,
  .titel-schieblibrett .schiebli-plaettchen {
    transition: transform 0.14s ease-out;
  }
  .schiebli-brett:not(.ruhig) .schiebli-plaettchen {
    transition:
      transform 0.14s ease-out,
      border-radius 0.4s ease-out,
      box-shadow 0.4s ease-out;
  }
  .schiebli-plaettchen.nein {
    animation: schiebli-wackelt 0.4s ease-in-out;
  }
  .schiebli-letztes {
    animation: schiebli-kommt 0.4s ease-out;
  }
}
@keyframes schiebli-kommt {
  from {
    opacity: 0;
  }
}
/* Das Plättchen steht über ``transform`` an seinem Platz, also wackelt es
 * über ``translate`` - sonst spränge es dabei in die Ecke. */
@keyframes schiebli-wackelt {
  0%,
  100% {
    translate: 0;
  }
  25% {
    translate: -4px 0;
  }
  75% {
    translate: 4px 0;
  }
}

/* =====================================================================
 * V198 - DIE EINFACHEN SPIELAUTOMATEN, DER FÜNFTE: LIECHTLI
 *
 * DAS AUSSEHEN DES AUTOMATEN: ein Gehäuse in Aubergine mit Bernstein, wie
 * ein Abend mit Laternen, und auf dem Schirm fünf Laternen in einem Kreuz.
 * Kein Grün und kein Ziegelrot (R6, R9).
 *
 * DAS BRETT ist ein Abendhimmel; jede Laterne hängt an einem Haken. Eine
 * brennende leuchtet in Bernstein, eine dunkle ist nur ein Umriss. Ein
 * helles Brett sieht aus wie eines, auf dem alle brennen, und sonst nichts.
 * ===================================================================== */
[data-aussehen="liechtli"] {
  --automat-gehaeuse: #4b2342;
  --automat-gehaeuse-tief: #33172d;
  --automat-glanz: rgba(255, 255, 255, 0.12);
  --automat-leuchte: #fff1d1;
  --automat-schrift: #33172d;
  --automat-rahmen: #1e0e1b;
  --automat-schirm: #161328;
  --automat-schirmbild: #ffc24d;
  --automat-schirmglanz: rgba(255, 255, 255, 0.07);
  --automat-streifen: #ffc24d;
  --automat-pult: #5c2c51;
  --automat-knopf-a: #ffc24d;
  --automat-knopf-b: #fff1d1;
  --automat-licht: rgba(255, 255, 255, 0.6);
  --automat-tuer: #43203b;
  --automat-schlitz: #ffe39a;
  --automat-schloss: #ffe39a;
  --automat-schatten: rgba(30, 14, 27, 0.28);
}
.schirm[data-aussehen="liechtli"] {
  --schirm-text: #fff6e5;
  --schirm-zart: #ffd98a;
  --schirm-leise: #e9e2f2;
  --schirm-schein: rgba(255, 194, 77, 0.12);
}

/* ---------- Das Brett ----------------------------------------------------- */
.brett-liechtli {
  display: grid;
  place-items: center;
  user-select: none;
  -webkit-user-select: none;
}
.liechtli-tisch {
  display: grid;
  justify-items: center;
  gap: clamp(12px, 2.4vh, 22px);
}
.liechtli-brett {
  --seite: min(88vw, 100dvh - 300px, 520px);
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  grid-template-rows: repeat(var(--n), 1fr);
  width: var(--seite);
  height: var(--seite);
  padding: clamp(6px, 1.6vw, 12px);
  box-sizing: border-box;
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 255, 255, 0.5) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 22%, rgba(255, 255, 255, 0.4) 0 1px, transparent 2px),
    radial-gradient(circle at 46% 84%, rgba(255, 255, 255, 0.3) 0 1px, transparent 2px),
    linear-gradient(170deg, #2a2147, #161328);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.06),
    0 6px 0 #0d0b1a;
}
.liechtli-laterne {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.liechtli-laterne:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -4px;
}
.liechtli-glas {
  position: relative;
  width: 52%;
  height: 62%;
  margin-top: 12%;
  border: 2px solid #5b5478;
  border-radius: 34% 34% 24% 24%;
  background: #24203b;
}
/* Der Deckel und der Haken: still, in jeder Lage gleich. */
.liechtli-glas::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: -16%;
  height: 14%;
  border-radius: 4px 4px 1px 1px;
  background: #3b3555;
}
.liechtli-glas::after {
  content: "";
  position: absolute;
  left: 40%;
  width: 20%;
  top: -34%;
  height: 20%;
  border: 2px solid #5b5478;
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
}
.liechtli-laterne.an .liechtli-glas {
  border-color: #8a4b12;
  background: radial-gradient(circle at 50% 42%, #fff8de, #ffc24d 55%, #e0861e);
  box-shadow:
    0 0 18px 4px rgba(255, 190, 80, 0.45),
    inset 0 -4px 0 rgba(140, 70, 10, 0.25);
}
.liechtli-vonvorn {
  min-height: 44px;
  padding: 0 18px;
  border: 2px solid var(--schirm-zart);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--schirm-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.liechtli-vonvorn:disabled {
  opacity: 0.4;
  cursor: default;
}
.liechtli-vonvorn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .liechtli-brett {
    --seite: min(60vw, 100dvh - 230px, 560px);
  }
}

/* ---------- Das Startbild ------------------------------------------------- */
.titel-liechtlibrett {
  --seite: clamp(132px, 30vw, 190px);
}

@media (prefers-reduced-motion: no-preference) {
  .liechtli-brett:not(.ruhig) .liechtli-laterne.schaltet .liechtli-glas {
    animation: liechtli-schwingt 0.32s ease-out;
  }
  .liechtli-glas {
    transition:
      background 0.2s ease-out,
      box-shadow 0.2s ease-out,
      border-color 0.2s ease-out;
  }
}
@keyframes liechtli-schwingt {
  0% {
    transform: rotate(0);
  }
  35% {
    transform: rotate(-6deg);
  }
  70% {
    transform: rotate(4deg);
  }
  100% {
    transform: rotate(0);
  }
}

/* =====================================================================
 * V199 - DIE EINFACHEN SPIELAUTOMATEN, DER SECHSTE: STÄCKLI
 *
 * DAS AUSSEHEN DES AUTOMATEN: ein Gehäuse in Senf mit dunklem Nussbaum, und
 * auf dem Schirm ein Kreuz aus Stäckli, in der Mitte fehlt eines. Kein Grün
 * und kein Ziegelrot (R6, R9).
 *
 * DAS BRETT ist aus dunklem Nussbaum, die Löcher sind gebohrt, und ein
 * Stäckli trägt einen Kopf aus hellem Holz. Ein gewähltes hebt sich, die
 * Löcher, in die es springen kann, tragen einen hellen Ring.
 * ===================================================================== */
[data-aussehen="staeckli"] {
  --automat-gehaeuse: #b8892a;
  --automat-gehaeuse-tief: #8a6418;
  --automat-glanz: rgba(255, 255, 255, 0.16);
  --automat-leuchte: #fff4d6;
  --automat-schrift: #4a3110;
  --automat-rahmen: #3a2710;
  --automat-schirm: #1f170d;
  --automat-schirmbild: #f2cf8a;
  --automat-schirmglanz: rgba(255, 255, 255, 0.07);
  --automat-streifen: #4a3110;
  --automat-pult: #c69836;
  --automat-knopf-a: #4a3110;
  --automat-knopf-b: #fff4d6;
  --automat-licht: rgba(255, 255, 255, 0.6);
  --automat-tuer: #a77c22;
  --automat-schlitz: #ffe39a;
  --automat-schloss: #ffe39a;
  --automat-schatten: rgba(58, 39, 16, 0.28);
}
.schirm[data-aussehen="staeckli"] {
  --schirm-text: #fff8ea;
  --schirm-zart: #f2cf8a;
  --schirm-leise: #eee4d2;
  --schirm-schein: rgba(242, 207, 138, 0.12);
}

/* ---------- Das Brett ----------------------------------------------------- */
.brett-staeckli {
  display: grid;
  place-items: center;
  user-select: none;
  -webkit-user-select: none;
}
.staeckli-tisch {
  display: grid;
  justify-items: center;
  gap: clamp(12px, 2.4vh, 22px);
}
.staeckli-brett {
  --seite: min(90vw, 100dvh - 300px, 540px);
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  grid-template-rows: repeat(var(--n), 1fr);
  width: var(--seite);
  height: var(--seite);
  padding: clamp(8px, 2vw, 16px);
  box-sizing: border-box;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.03) 0 3px, transparent 3px 9px),
    radial-gradient(circle at 40% 32%, #6b4424, #3f2714 72%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.18),
    0 6px 0 #24160a;
}
.staeckli-loch {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.staeckli-loch::before {
  content: "";
  position: absolute;
  width: 46%;
  height: 46%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #120b05, #2a1a0c);
  box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.6);
}
.staeckli-loch:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
}
.staeckli-kopf {
  position: relative;
  width: 72%;
  height: 72%;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.6);
}
.staeckli-loch.steht .staeckli-kopf {
  opacity: 1;
  transform: none;
  background: radial-gradient(circle at 36% 30%, #fff1cf, #f0c77e 45%, #c98a3d);
  box-shadow:
    0 3px 0 #7a4c1e,
    0 4px 6px rgba(0, 0, 0, 0.45);
}
.staeckli-loch.gewaehlt .staeckli-kopf {
  transform: translateY(-8%);
  box-shadow:
    0 0 0 4px #fff,
    0 6px 0 #7a4c1e,
    0 8px 10px rgba(0, 0, 0, 0.5);
}
.staeckli-loch.ziel::before {
  box-shadow:
    0 0 0 3px #fff8e1,
    inset 0 3px 4px rgba(0, 0, 0, 0.6);
}
.staeckli-leiste {
  display: flex;
  gap: 12px;
}
.staeckli-knopf {
  min-height: 44px;
  padding: 0 18px;
  border: 2px solid var(--schirm-zart);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--schirm-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.staeckli-knopf:disabled {
  opacity: 0.4;
  cursor: default;
}
.staeckli-knopf:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .staeckli-brett {
    --seite: min(60vw, 100dvh - 230px, 580px);
  }
}

/* ---------- Das Startbild ------------------------------------------------- */
.titel-staecklibrett {
  --seite: clamp(132px, 30vw, 190px);
  padding: 8px;
}

@media (prefers-reduced-motion: no-preference) {
  .staeckli-brett:not(.ruhig) .staeckli-kopf,
  .titel-staecklibrett .staeckli-kopf {
    transition:
      opacity 0.18s ease-out,
      transform 0.18s ease-out,
      box-shadow 0.15s ease-out;
  }
  .staeckli-brett:not(.ruhig) .staeckli-loch.landet .staeckli-kopf {
    animation: staeckli-landet 0.3s ease-out;
  }
  .staeckli-loch.nein .staeckli-kopf {
    animation: glocke-wackelt 0.4s ease-in-out;
  }
}
@keyframes staeckli-landet {
  0% {
    transform: translateY(-30%) scale(1.15);
  }
  70% {
    transform: translateY(4%) scale(0.96);
  }
  100% {
    transform: none;
  }
}

/* =====================================================================
 * V200 - DIE EINFACHEN SPIELAUTOMATEN, DER SIEBTE: TÜRMLI
 *
 * DAS AUSSEHEN DES AUTOMATEN: ein Gehäuse in Taubenblau mit Creme und
 * Orange, und auf dem Schirm drei Stäbe mit einem Turm auf dem linken.
 * Kein Grün und kein Ziegelrot (R6, R9).
 *
 * DAS BRETT: ein Sockel aus Holz mit drei Stäben, auf einem ein Fähnli. Die
 * Scheiben tragen je Grösse eine eigene Farbe, die nichts sagt als die
 * Grösse; eine gehobene schwebt über ihrem Stab.
 * ===================================================================== */
[data-aussehen="tuermli"] {
  --automat-gehaeuse: #4f6a86;
  --automat-gehaeuse-tief: #384d63;
  --automat-glanz: rgba(255, 255, 255, 0.14);
  --automat-leuchte: #fff6e5;
  --automat-schrift: #384d63;
  --automat-rahmen: #1c2633;
  --automat-schirm: #151c26;
  --automat-schirmbild: #ffcf7a;
  --automat-schirmglanz: rgba(255, 255, 255, 0.07);
  --automat-streifen: #f39a3c;
  --automat-pult: #5c7a99;
  --automat-knopf-a: #f39a3c;
  --automat-knopf-b: #fff6e5;
  --automat-licht: rgba(255, 255, 255, 0.6);
  --automat-tuer: #465f78;
  --automat-schlitz: #ffe39a;
  --automat-schloss: #ffe39a;
  --automat-schatten: rgba(28, 38, 51, 0.28);
}
.schirm[data-aussehen="tuermli"] {
  --schirm-text: #fff8ea;
  --schirm-zart: #ffcf7a;
  --schirm-leise: #e3ebf3;
  --schirm-schein: rgba(255, 207, 122, 0.12);
}

/* ---------- Das Brett ----------------------------------------------------- */
.brett-tuermli {
  display: grid;
  place-items: center;
  user-select: none;
  -webkit-user-select: none;
}
.tuermli-tisch {
  display: grid;
  justify-items: center;
}
.tuermli-brett {
  --breite: min(94vw, (100dvh - 260px) * 1.5, 720px);
  --dicke: calc(66% / (var(--n) + 1));
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: var(--breite);
  height: calc(var(--breite) / 1.5);
}
.tuermli-stab {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tuermli-stab:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
}
.tuermli-stab.gehoben {
  background: rgba(255, 255, 255, 0.05);
}
.tuermli-stange {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 5%;
  min-width: 6px;
  height: 70%;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(90deg, #c49155, #e8c48c 50%, #a5733c);
  transform: translateX(-50%);
}
.tuermli-fahne {
  position: absolute;
  left: 50%;
  bottom: 78%;
  width: 20%;
  height: 12%;
}
.tuermli-fahne::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3px;
  height: 100%;
  background: #e8c48c;
}
.tuermli-fahne::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  width: 85%;
  height: 62%;
  background: #ffcf3a;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.tuermli-sockel {
  position: absolute;
  left: 1%;
  right: 1%;
  bottom: 0;
  height: 8%;
  border-radius: 8px;
  background:
    repeating-linear-gradient(97deg, rgba(120, 72, 30, 0.12) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #c9995b, #9c6a35);
  box-shadow: 0 5px 0 #5e3d1c;
  pointer-events: none;
}
.tuermli-scheibe {
  position: absolute;
  left: 50%;
  bottom: calc(8% + var(--h) * var(--dicke));
  width: calc(26% + (var(--g) + 1) * 70% / var(--n));
  height: calc(var(--dicke) - 3px);
  border-radius: 999px;
  background: var(--farbe);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.35),
    inset 0 -3px 0 rgba(0, 0, 0, 0.18);
  transform: translateX(-50%);
  pointer-events: none;
}
.tuermli-scheibe[data-groesse="0"] {
  --farbe: #f2c230;
}
.tuermli-scheibe[data-groesse="1"] {
  --farbe: #f39a3c;
}
.tuermli-scheibe[data-groesse="2"] {
  --farbe: #d0569b;
}
.tuermli-scheibe[data-groesse="3"] {
  --farbe: #8a5cd6;
}
.tuermli-scheibe[data-groesse="4"] {
  --farbe: #3b74d6;
}
.tuermli-scheibe[data-groesse="5"] {
  --farbe: #2aa3c8;
}
.tuermli-scheibe.gehoben {
  bottom: 84%;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.35),
    inset 0 -3px 0 rgba(0, 0, 0, 0.18),
    0 10px 14px rgba(0, 0, 0, 0.45);
}

/* ---------- Das Startbild ------------------------------------------------- */
.titel-tuermlibrett {
  --breite: clamp(180px, 46vw, 260px);
}

@media (prefers-reduced-motion: no-preference) {
  .tuermli-brett:not(.ruhig) .tuermli-scheibe {
    transition: bottom 0.16s ease-out;
  }
  .tuermli-brett:not(.ruhig) .tuermli-scheibe.legt {
    animation: tuermli-legt 0.22s ease-out;
  }
  .tuermli-stab.nein .tuermli-stange {
    animation: tuermli-wackelt 0.4s ease-in-out;
  }
}
@keyframes tuermli-legt {
  from {
    transform: translate(-50%, -60%);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes tuermli-wackelt {
  0%,
  100% {
    translate: 0;
  }
  25% {
    translate: -4px 0;
  }
  75% {
    translate: 4px 0;
  }
}

/* =====================================================================
 * V201 - DIE EINFACHEN SPIELAUTOMATEN, DER ACHTE: SCHLÖSSLI
 *
 * DAS AUSSEHEN DES AUTOMATEN: ein Gehäuse in Indigo mit Messing, und auf
 * dem Schirm ein Schlössli mit seinem Schlüsselloch. Kein Grün und kein
 * Ziegelrot (R6, R9).
 *
 * DAS BRETT: oben das Schlössli aus Messing mit Fenstern für den Code,
 * darunter die Versuche, je mit Punkten und Ringen in Creme, dann die Reihe
 * zum Legen und die Bilder zur Wahl. Ein offenes Schlössli hebt seinen
 * Bügel; eines, das zu bleibt, zeigt seinen Code und sonst nichts.
 * ===================================================================== */
[data-aussehen="schloessli"] {
  --automat-gehaeuse: #3b3f8f;
  --automat-gehaeuse-tief: #2a2d6a;
  --automat-glanz: rgba(255, 255, 255, 0.14);
  --automat-leuchte: #fff4d6;
  --automat-schrift: #2a2d6a;
  --automat-rahmen: #16173a;
  --automat-schirm: #12132b;
  --automat-schirmbild: #e8c35c;
  --automat-schirmglanz: rgba(255, 255, 255, 0.07);
  --automat-streifen: #e8c35c;
  --automat-pult: #4a4fa3;
  --automat-knopf-a: #e8c35c;
  --automat-knopf-b: #fff4d6;
  --automat-licht: rgba(255, 255, 255, 0.6);
  --automat-tuer: #343883;
  --automat-schlitz: #ffe39a;
  --automat-schloss: #ffe39a;
  --automat-schatten: rgba(22, 23, 58, 0.28);
}
.schirm[data-aussehen="schloessli"] {
  --schirm-text: #fff8ea;
  --schirm-zart: #e8c35c;
  --schirm-leise: #e4e5f5;
  --schirm-schein: rgba(232, 195, 92, 0.12);
}

/* ---------- Das Brett ----------------------------------------------------- */
.brett-schloessli {
  display: grid;
  place-items: center;
  user-select: none;
  -webkit-user-select: none;
}
.schloessli-tisch {
  --feld: min(56px, (92vw - 96px) / (var(--l) + 1.4));
  display: grid;
  justify-items: center;
  gap: clamp(8px, 1.6vh, 14px);
  width: min(94vw, 520px);
}
.schloessli-schloss {
  position: relative;
  display: grid;
  justify-items: center;
  padding-top: calc(var(--feld) * 0.62);
}
.schloessli-buegel {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--feld) * 1.5);
  height: calc(var(--feld) * 1.05);
  border: calc(var(--feld) * 0.2) solid #b8913a;
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  transform: translateX(-50%);
}
.schloessli-schloss.offen .schloessli-buegel {
  transform: translate(-50%, -30%);
}
.schloessli-koerper {
  position: relative;
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(170deg, #f2d27a, #c99a3a 70%, #a77c24);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.45),
    0 5px 0 #6e5216;
}
.schloessli-codefeld {
  display: grid;
  place-items: center;
  width: calc(var(--feld) * 0.8);
  height: calc(var(--feld) * 0.8);
  border-radius: 8px;
  background: #2a2112;
  color: #e8c35c;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: calc(var(--feld) * 0.4);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.6);
}
.schloessli-codefeld .motiv {
  width: 78%;
  height: 78%;
}
.schloessli-verlauf {
  display: grid;
  gap: 4px;
  width: 100%;
  max-height: calc(100dvh - 520px);
  min-height: 34px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}
.schloessli-zeile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 3px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}
.schloessli-reihe {
  display: flex;
  gap: 4px;
}
.schloessli-klein {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #f7f1e6;
}
.schloessli-klein .motiv {
  width: 22px;
  height: 22px;
}
.schloessli-antwort {
  display: grid;
  grid-template-columns: repeat(2, 10px);
  gap: 3px;
}
.schloessli-punkt {
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
}
.schloessli-punkt.voll {
  border-color: #fff4d6;
  background: #fff4d6;
}
.schloessli-punkt.ring {
  border: 2.5px solid #fff4d6;
}
.schloessli-eingabe {
  display: flex;
  align-items: center;
  gap: 6px;
}
.schloessli-feld,
.schloessli-wahl {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--feld);
  height: var(--feld);
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: #f7f1e6;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.schloessli-feld.leer {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
}
.schloessli-feld .motiv,
.schloessli-wahl .motiv {
  width: 72%;
  height: 72%;
}
.schloessli-wahl {
  box-shadow: 0 4px 0 #b9ad96;
}
.schloessli-zahl {
  position: absolute;
  right: 3px;
  bottom: 1px;
  color: #6b5a3c;
  font-size: 11.5px;
  font-weight: 700;
}
.schloessli-feld:focus-visible,
.schloessli-wahl:focus-visible,
.schloessli-pruefen:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
.schloessli-palette {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.schloessli-pruefen {
  min-height: 44px;
  margin-left: 6px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: #e8c35c;
  color: #2a2112;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.schloessli-pruefen:disabled {
  opacity: 0.35;
  cursor: default;
}
.schloessli-rest {
  margin: 0;
  color: var(--schirm-leise);
  font-size: 13.5px;
}

@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .schloessli-verlauf {
    max-height: calc(100dvh - 470px);
  }
}

/* ---------- Das Startbild ------------------------------------------------- */
.titel-schloesslischloss {
  --feld: clamp(40px, 11vw, 56px);
}

@media (prefers-reduced-motion: no-preference) {
  .schloessli-tisch:not(.ruhig) .schloessli-buegel,
  .titel-schloesslischloss .schloessli-buegel {
    transition: transform 0.3s ease-out;
  }
  .schloessli-tisch:not(.ruhig) .schloessli-zeile:last-child {
    animation: schloessli-kommt 0.25s ease-out;
  }
}
@keyframes schloessli-kommt {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* =====================================================================
 * V202 - DIE EINFACHEN SPIELAUTOMATEN, DER NEUNTE: WÖRMLI
 *
 * DAS AUSSEHEN DES AUTOMATEN: ein Gehäuse in Himbeerrosa mit Erdbraun, und
 * auf dem Schirm ein Wurm, der sich windet. Kein Grün und kein Ziegelrot
 * (R6, R9).
 *
 * DAS FELD: Erde in zwei Brauntönen, graue Steine, goldene Öpfeli und ein
 * rosa Regenwurm - gezeichnet auf einer Leinwand. Ein Anstoss lässt den
 * Wurm blinken und färbt nichts.
 * ===================================================================== */
[data-aussehen="woermli"] {
  --automat-gehaeuse: #b34d7a;
  --automat-gehaeuse-tief: #873559;
  --automat-glanz: rgba(255, 255, 255, 0.16);
  --automat-leuchte: #fff1e2;
  --automat-schrift: #5e2a40;
  --automat-rahmen: #2f1a12;
  --automat-schirm: #20140d;
  --automat-schirmbild: #f08fb0;
  --automat-schirmglanz: rgba(255, 255, 255, 0.07);
  --automat-streifen: #6b4a2e;
  --automat-pult: #c25f8b;
  --automat-knopf-a: #f2c230;
  --automat-knopf-b: #fff1e2;
  --automat-licht: rgba(255, 255, 255, 0.6);
  --automat-tuer: #9c416a;
  --automat-schlitz: #ffe39a;
  --automat-schloss: #ffe39a;
  --automat-schatten: rgba(47, 26, 18, 0.28);
}
.schirm[data-aussehen="woermli"] {
  --schirm-text: #fff6ee;
  --schirm-zart: #f5b2c9;
  --schirm-leise: #f0e2d6;
  --schirm-schein: rgba(240, 143, 176, 0.12);
}

/* ---------- Das Feld ------------------------------------------------------ */
.brett-woermli {
  display: grid;
  place-items: center;
  overflow: hidden;
  /* Wischen steuert das Wörmli und schiebt nicht die Seite. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.woermli-feld {
  display: grid;
  justify-items: center;
  gap: 6px;
}
.woermli-leinwand {
  display: block;
  border-radius: 10px;
  box-shadow:
    0 0 0 3px #3a2414,
    0 6px 0 #21140a;
}
.woermli-hinweis {
  min-height: 20px;
  margin: 0;
  color: var(--schirm-zart);
  font-size: 13.5px;
}

/* ---------- Das Startbild ------------------------------------------------- */
.titel-woermlireihe {
  --g: clamp(18px, 5vw, 26px);
  display: flex;
  align-items: center;
  gap: 1px;
  height: calc(var(--g) * 2);
}
.titel-woermliglied {
  width: var(--g);
  height: var(--g);
  border-radius: 50%;
  background: #e7809f;
}
.titel-woermliglied.kopf {
  position: relative;
  background: #f08fb0;
}
.titel-woermliglied.kopf::after {
  content: "";
  position: absolute;
  top: 26%;
  right: 18%;
  width: 22%;
  height: 22%;
  border-radius: 50%;
  background: #2a1a10;
  box-shadow: 0 0 0 2px #fff;
}
.titel-woermliapfel {
  width: var(--g);
  height: var(--g);
  margin-left: calc(var(--g) * 0.8);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #fff1b0 0 16%, #f2c230 18%);
}

@media (prefers-reduced-motion: no-preference) {
  .titel-woermliglied {
    animation: woermli-windet 1.1s ease-in-out infinite;
    animation-delay: calc(var(--i) * -0.18s);
  }
}
@keyframes woermli-windet {
  0%,
  100% {
    transform: translateY(-22%);
  }
  50% {
    transform: translateY(22%);
  }
}

/* =====================================================================
 * V203 - DIE EINFACHEN SPIELAUTOMATEN, DER ZEHNTE: MÜRLI
 *
 * DAS AUSSEHEN DES AUTOMATEN: ein Gehäuse in Lavendelgrau mit Sandstein, und
 * auf dem Schirm eine Mauer, ein Ball und das Brättli. Kein Grün und kein
 * Ziegelrot (R6, R9).
 *
 * DAS FELD: ein Abend in Schiefergrau, eine Mauer aus Sandstein mit dunklen
 * Granitsteinen, die zwei Treffer brauchen, ein Brättli aus Holz und ein
 * Ball in Creme - gezeichnet auf einer Leinwand.
 * ===================================================================== */
[data-aussehen="muerli"] {
  --automat-gehaeuse: #6b5b95;
  --automat-gehaeuse-tief: #4e4170;
  --automat-glanz: rgba(255, 255, 255, 0.14);
  --automat-leuchte: #fff4e2;
  --automat-schrift: #4e4170;
  --automat-rahmen: #201a30;
  --automat-schirm: #1a202b;
  --automat-schirmbild: #d8b98a;
  --automat-schirmglanz: rgba(255, 255, 255, 0.07);
  --automat-streifen: #d8b98a;
  --automat-pult: #7a6aa6;
  --automat-knopf-a: #d8b98a;
  --automat-knopf-b: #fff4e2;
  --automat-licht: rgba(255, 255, 255, 0.6);
  --automat-tuer: #5e4f85;
  --automat-schlitz: #ffe39a;
  --automat-schloss: #ffe39a;
  --automat-schatten: rgba(32, 26, 48, 0.28);
}
.schirm[data-aussehen="muerli"] {
  --schirm-text: #fff8ee;
  --schirm-zart: #e3c99e;
  --schirm-leise: #e6e2f0;
  --schirm-schein: rgba(216, 185, 138, 0.12);
}

/* ---------- Das Feld ------------------------------------------------------ */
.brett-muerli {
  display: grid;
  place-items: center;
  overflow: hidden;
  /* Ziehen schiebt das Brättli und nicht die Seite. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.muerli-feld {
  display: grid;
  justify-items: center;
  gap: 6px;
}
.muerli-leinwand {
  display: block;
  border-radius: 10px;
  box-shadow:
    0 0 0 3px #3a3550,
    0 6px 0 #15121f;
}
.muerli-hinweis {
  min-height: 20px;
  margin: 0;
  color: var(--schirm-zart);
  font-size: 13.5px;
}

/* ---------- Das Startbild ------------------------------------------------- */
.titel-muerlibild {
  --s: clamp(18px, 5vw, 26px);
  position: relative;
  display: grid;
  justify-items: center;
  gap: calc(var(--s) * 0.5);
  width: calc(var(--s) * 9);
  height: calc(var(--s) * 4.6);
}
.titel-muerlimauer {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
  width: 100%;
}
.titel-muerlistein {
  height: calc(var(--s) * 0.5);
  border-radius: 2px;
  background: #d8b98a;
}
.titel-muerlistein.hart {
  background: #6f7480;
}
.titel-muerliball {
  width: calc(var(--s) * 0.42);
  height: calc(var(--s) * 0.42);
  border-radius: 50%;
  background: #fff4d6;
}
.titel-muerlibrett {
  position: absolute;
  bottom: 0;
  width: calc(var(--s) * 2.4);
  height: calc(var(--s) * 0.36);
  border-radius: 5px;
  background: #c9995b;
}

@media (prefers-reduced-motion: no-preference) {
  .titel-muerliball {
    animation: muerli-huepft 1s ease-in-out infinite alternate;
  }
}
@keyframes muerli-huepft {
  from {
    transform: translate(-120%, calc(var(--s) * 1.7));
  }
  to {
    transform: translate(120%, 0);
  }
}

/* =====================================================================
 * V204 - DER FUSSBALL: TSCHUTTLI
 *
 * DAS AUSSEHEN DES AUTOMATEN: ein Gehäuse in Stadionblau mit Streifen in
 * Kreide und Knöpfen in Gold, und auf dem Schirm ein Feld von oben mit zwei
 * Toren und dem Ball. Kein Grün und kein Ziegelrot am Gehäuse (R6, R9).
 *
 * DAS FELD: ein Hallenfeld in gedämpftem Rasen mit Kreidelinien, einer Bande
 * in Blau ringsum und Toren mit Netz; das eigene Team in Gold, das des Scampy
 * in Violett - gezeichnet auf einer Leinwand. Der Rasen ist ein Ort und kein
 * Urteil: Ein Tor ist für beide Teams dasselbe Wort.
 * ===================================================================== */
[data-aussehen="tschuttli"] {
  --automat-gehaeuse: #24406b;
  --automat-gehaeuse-tief: #182c4b;
  --automat-glanz: rgba(255, 255, 255, 0.14);
  --automat-leuchte: #fff7e0;
  --automat-schrift: #182c4b;
  --automat-rahmen: #0f1b2e;
  --automat-schirm: #16263d;
  --automat-schirmbild: #f4f1e6;
  --automat-schirmglanz: rgba(255, 255, 255, 0.07);
  --automat-streifen: #f4f1e6;
  --automat-pult: #2f5182;
  --automat-knopf-a: #f2c14e;
  --automat-knopf-b: #f4f1e6;
  --automat-licht: rgba(255, 255, 255, 0.6);
  --automat-tuer: #1f3860;
  --automat-schlitz: #ffe39a;
  --automat-schloss: #ffe39a;
  --automat-schatten: rgba(15, 27, 46, 0.3);
}
.schirm[data-aussehen="tschuttli"] {
  --schirm-text: #fff8ee;
  --schirm-zart: #f2d78e;
  --schirm-leise: #e2e8f2;
  --schirm-schein: rgba(242, 193, 78, 0.12);
}

/* ---------- Das Feld ------------------------------------------------------ */
.brett-tschuttli {
  display: grid;
  place-items: center;
  overflow: hidden;
  /* Ziehen führt den Spieler und nicht die Seite. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.tschuttli-feld {
  display: grid;
  justify-items: center;
  gap: 4px;
}
.tschuttli-leinwand {
  display: block;
  border-radius: 10px;
  box-shadow:
    0 0 0 3px #1c2c44,
    0 6px 0 #0d1626;
}
.tschuttli-stand {
  margin: 0;
  padding: 3px 14px;
  border-radius: 6px;
  /* Die Anzeigetafel des Stadions (V254): dunkel, mit Leuchtschrift. */
  background: #0e1828;
  box-shadow:
    inset 0 0 0 1px rgba(242, 193, 78, 0.35),
    0 2px 0 #070d17;
  color: #f2c14e;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.tschuttli-hinweis {
  min-height: 20px;
  margin: 0;
  color: var(--schirm-zart);
  font-size: 13.5px;
  text-align: center;
}

/* ---------- Das Startbild ------------------------------------------------- */
.titel-tschuttlibild {
  --s: clamp(18px, 5vw, 26px);
  position: relative;
  width: calc(var(--s) * 9);
  height: calc(var(--s) * 5);
  border-radius: 8px;
  background: repeating-linear-gradient(180deg, #5d8c4c 0 calc(var(--s) * 0.6), #568445 calc(var(--s) * 0.6) calc(var(--s) * 1.2));
  box-shadow: inset 0 0 0 2px rgba(244, 241, 230, 0.8);
  overflow: hidden;
}
.titel-tschuttlitor {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--s) * 3.2);
  height: calc(var(--s) * 0.8);
  transform: translateX(-50%);
  border: 2px solid #f4f1e6;
  border-top: 0;
  background:
    repeating-linear-gradient(90deg, rgba(244, 241, 230, 0.35) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(0deg, rgba(244, 241, 230, 0.35) 0 1px, transparent 1px 6px);
}
.titel-tschuttlihueter,
.titel-tschuttlischuetze {
  position: absolute;
  width: calc(var(--s) * 0.7);
  height: calc(var(--s) * 0.7);
  border-radius: 50%;
}
.titel-tschuttlihueter {
  top: calc(var(--s) * 1);
  left: 46%;
  background: #4f7fc0;
  box-shadow: 0 0 0 2px #2c4b78;
}
.titel-tschuttlischuetze {
  bottom: calc(var(--s) * 0.6);
  left: 30%;
  background: #f2c14e;
  box-shadow: 0 0 0 2px #9c7417;
}
.titel-tschuttliball {
  position: absolute;
  bottom: calc(var(--s) * 1.2);
  left: 38%;
  width: calc(var(--s) * 0.38);
  height: calc(var(--s) * 0.38);
  border-radius: 50%;
  background: #fbfbf6;
  box-shadow: 0 0 0 1px #3a3a3a;
}

@media (prefers-reduced-motion: no-preference) {
  .titel-tschuttliball {
    animation: tschuttli-schuss 1.8s ease-out infinite;
  }
  .titel-tschuttlihueter {
    animation: tschuttli-hechtet 1.8s ease-in-out infinite;
  }
}
@keyframes tschuttli-schuss {
  0%,
  25% {
    transform: translate(0, 0);
  }
  70%,
  100% {
    transform: translate(calc(var(--s) * 2.6), calc(var(--s) * -3.6));
  }
}
@keyframes tschuttli-hechtet {
  0%,
  35% {
    transform: translateX(0);
  }
  75%,
  100% {
    transform: translateX(calc(var(--s) * -1));
  }
}

/* ---------------------------------------------- V205: Coins am Ende --
 * Ein fertiger Check bringt fünf Coins, gleich wie er ausging (R6). Die Zeile
 * steht unter den Zahlen, als ruhiges Etikett - in der geschlossenen Runde in
 * Iris und ohne Gelb, wie alles dort (docs/03 Abschnitt 4).
 */
.ende-coins {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--iris-grund, #ebe9fc);
  color: var(--iris-tief, #3e30a8);
  font-weight: 700;
  font-size: 14px;
}
.ende-coins::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid currentColor;
  flex: none;
}
.ende-coins[hidden] {
  display: none;
}

/* Vor dem Check (V205): ein Satz mit der Münze, wie viel ein fertiger Check
 * bringt. Hier läuft noch keine Runde, also darf die Münze golden sein. */
.zwischencoins {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--ink-soft, #4a4a4a);
}
.zwischencoins img {
  flex: none;
}

/* ----------------------------------------- V209: «So geht's» und V208 --
 * Die Seite eines Raums, Schritt für Schritt: dieselben Bausteine wie die
 * Erklärungen des Kurses (V154). Dazu die anderen Wege zum Ergebnis, jeder
 * zum Aufklappen, und dieselbe Liste unter dem Beispiel und nach einer
 * richtigen Antwort beim Üben. Kein Grün und kein Rot: Ein Weg ist kein Urteil.
 */
.ekopf.ton-sprachen { --ton: var(--ton-sprachen); --ton-tief: var(--ton-sprachen-tief); }
.ekopf.ton-forschen { --ton: var(--ton-forschen); --ton-tief: var(--ton-forschen-tief); }
.ekopf.ton-welt { --ton: var(--ton-welt); --ton-tief: var(--ton-welt-tief); }
.ekopf.ton-machen { --ton: var(--ton-machen); --ton-tief: var(--ton-machen-tief); }
.b-sogehts .ekopf-wege {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sogehts-frage {
  font-size: 19px;
}
.b-sogehts .sogehts-zu {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 14px;
}
.sogehts-gehoert {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
}
.sogehts-bild {
  margin: 12px 0 4px;
}
.sogehts-wege,
.wege-liste {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--linie);
}
.sogehts-weg,
.wege-liste details {
  margin: 8px 0 0;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--flaeche);
}
.sogehts-weg > summary,
.wege-liste details > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.sogehts-weg > summary::-webkit-details-marker,
.wege-liste details > summary::-webkit-details-marker {
  display: none;
}
.sogehts-weg > summary::before,
.wege-liste details > summary::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
.sogehts-weg[open] > summary::before,
.wege-liste details[open] > summary::before {
  transform: rotate(45deg);
}
.sogehts-wegschritte,
.wege-liste ol {
  margin: 0;
  padding: 0 16px 12px 38px;
  line-height: 1.5;
}
.sogehts-wegschritte li + li,
.wege-liste li + li {
  margin-top: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .sogehts-weg > summary::before,
  .wege-liste details > summary::before {
    transition: none;
  }
}

/* «So geht's» unter jedem Raum (V209): leise, wie ein Hinweis, und doch
 * gross genug für einen Finger. Gelb gehört dem Bauen, Iris dem Prüfen -
 * dieser Weg trägt die Tinte. */
.raumhilfe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 12px;
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}
.raumhilfe:hover {
  background: rgba(22, 35, 59, 0.05);
  color: var(--ink);
}
.raumhilfe:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
.raumpaar {
  gap: 4px;
}

/* ------------------------------------------------ V210: das Gesamtbild --
 * Angeordnet am 08.10.2026: «verbessere das look & feel. mach es
 * professioneller.» und «grafisch muss es noch viel professioneller werden.»
 * Was hier steht, richtet aus, was nicht bündig war, und gibt den Flächen
 * gleiche Abstände - in einem Abschnitt, damit es sich in einem Zug
 * zurücknehmen lässt, wie V127 und V137.
 */

/* Die Regale auf dem Telefon: der Name links bündig, die Zeichen als Stapel
 * rechts vor dem Pfeil. Bis dahin schob die Zahl der Zeichen den Namen nach
 * rechts, und kein Regal stand unter dem anderen. */
.regal > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "nm zeichen pfeil";
  column-gap: 12px;
  padding: 14px 16px;
}
.regal-nm {
  grid-area: nm;
}
.regal-zeichen {
  grid-area: zeichen;
  align-items: center;
  justify-content: flex-end;
}
.regal-zeichen > * + * {
  margin-left: -9px;
}
.regal > summary::after {
  grid-area: pfeil;
  margin-left: 0;
}
.regal-mehr {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--flaeche, #fff);
  box-shadow:
    0 0 0 2px var(--plaster-hi),
    inset 0 0 0 1px rgba(22, 35, 59, 0.12);
  color: var(--ton-tief);
  font-size: 12px;
  font-weight: 700;
}
.regal-nm .bar {
  margin-top: 6px;
}

/* Die Karten auf «Du»: gleiche Abstände zwischen Satz, Feld und Knopf.
 * Bis dahin stand der Knopf direkt am Satz darüber. */
.b-du .card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.b-du .card > form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.b-du .card > *,
.b-du .card > form > * {
  margin-top: 0;
  margin-bottom: 0;
}
.b-du .card .hinweis {
  line-height: 1.5;
}
.b-du .card > h2.sub {
  margin-bottom: -4px;
}
/* «Dein Name» ist die Überschrift seiner Karte wie die anderen auch - als
 * Beschriftung des Felds stand sie klein und grau da. */
.b-du label.sub {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: -4px;
}
@media (min-width: 1024px) {
  .b-du label.sub {
    font-size: 20px;
  }
}

/* Ein einzelner Stapel Lernkarten geht über die ganze Reihe - auf dem
 * Telefon stand er als halbe Karte neben einer leeren Spalte. */
.stapelreihe > li:only-child {
  grid-column: 1 / -1;
}

/* Der Satz zu den Coins vor einem Check: ein Kasten mit der Münze links und
 * dem Satz bündig daneben. Zentriert stand die Münze allein am Rand, weit
 * weg von ihrem Satz. Ohne Gelb - der Weg führt in eine Prüfung (V138). */
.zwischencoins {
  justify-content: flex-start;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(22, 35, 59, 0.04);
  text-align: left;
  line-height: 1.45;
}

/* Die Preise der Automaten auf «Coins» als Tafel: je Automat eine Kachel mit
 * Name und Preis, jede ein Weg zu ihm. Die Münze ist golden, wie in der
 * Pille oben - hier ist keine Prüfung. */
.b-coins .card > h2.sub {
  margin-bottom: 12px;
}
.preistafel-titel {
  margin: 4px 0 8px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.preistafel {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
}
.preistafel a {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--linie, rgba(22, 35, 59, 0.12));
  border-radius: 12px;
  background: var(--flaeche, #fff);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.preistafel a > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.preistafel b {
  font-variant-numeric: tabular-nums;
}
.preistafel img {
  flex: none;
}
.preistafel a:hover {
  border-color: rgba(22, 35, 59, 0.3);
}
.preistafel a:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
@media (min-width: 640px) {
  .preistafel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Der Schritt der Anmeldung steht auch auf dem Telefon auf einer Karte - wie
 * auf dem Schreibtisch und wie jeder andere Bildschirm seine Teile zeigt.
 * Bis dahin stand das Feld frei auf dem Untergrund. */
@media (max-width: 1023.98px) {
  .b-anmelden .pad > .schritt {
    margin-bottom: 14px;
    padding: 18px 18px 16px;
    border: 1px solid var(--linie);
    border-radius: var(--r-gross);
    background: var(--flaeche);
    box-shadow: var(--schatten-hoch);
  }
}


/* ==========================================================================
 * SCHRITT FÜR SCHRITT AN WEITEREN ORTEN (V213)
 *
 * Angeordnet am 08.10.2026: «biete schritt für schritt erklärungen überall
 * an, wo es geht.» «So geht's» steht seither auch am Ende einer Runde, auf
 * der Seite, wenn nichts zu üben ist, und nach einer liegengebliebenen
 * Prüfung - leise, unter dem Weg hinaus, mit der Glühbirne wie unter jedem
 * Raum. Auf der Rückseite einer Lernkarte der Mathematik steht der Weg zur
 * Antwort zum Aufklappen, im Kleid der Wege von «So geht's».
 * ========================================================================== */
.ende-sogehts {
  gap: 8px;
  margin-top: 10px;
}
.kartenweg {
  margin: 0 0 14px;
  text-align: left;
}
.kartenweg .sogehts-wegschritte {
  font-size: 15px;
}


/* ==========================================================================
 * DAS GESAMTBILD, ZWEITER DURCHGANG (V214)
 *
 * Angeordnet am 08.10.2026, zum zweiten Mal: «verbessere das look & feel.
 * mach es professioneller.» und «grafisch muss es noch viel professioneller
 * werden.» Jeder Bildschirm auf Telefon, Tablet quer und Schreibtisch
 * angesehen; was hier steht, behebt, was dabei aufgefallen ist. Ein
 * Abschnitt wie V127, V137 und V210: in einem Zug zurückzunehmen.
 * ========================================================================== */

/* DIE HÜGEL BLEIBEN AM FUSS. Sie standen absolut im Teil, der scrollt, also
 * am unteren Rand des ersten Bildschirms - und auf einer langen Seite mitten
 * hinter dem Beispiel oder «So geht's». Jetzt stehen sie im Fluss nach dem
 * Inhalt und kleben am unteren Rand des Fensters: Auf einer kurzen Seite
 * liegen sie unten, auf einer langen bleiben sie dort, hinter allem. */
.body:has(> .ruhehang) {
  display: flex;
  flex-direction: column;
}
.body:has(> .ruhehang) > .pad {
  flex: 0 0 auto;
  width: 100%;
  position: relative;
  z-index: 1;
}
.body > .ruhehang {
  position: sticky;
  left: auto;
  right: auto;
  bottom: 0;
  flex: none;
  width: 100%;
  margin-top: auto;
}

/* NACH DER ANTWORT ZUERST DAS URTEIL UND «WEITER». Mit offenem Tipp und
 * Beispiel stapelten sich vier Kästen, und das Urteil rutschte unter den
 * Rand - auf einem Tablet quer auch «Weiter». Jetzt stehen die Meldung, das
 * Urteil und der Weg weiter zuoberst in der Seite der Aufgabe; Tipp,
 * Beispiel und «So geht's» darunter. Vor der Antwort ist das Urteil gar
 * nicht da, also ändert sich dann nichts. Seit V278 stehen Urteil und
 * «Weiter» auf der Lernkarte (`.nachantwort`), nicht mehr hier - ihre Regeln
 * hier trafen nichts mehr und sind mit V410 gestrichen; geordnet werden die
 * Meldung und «Nochmals anmelden». */
.rundenseite {
  display: flex;
  flex-direction: column;
}
.rundenseite > .meldung {
  order: -4;
}
.rundenseite > [data-anmelden] {
  order: -2;
}
/* Richtig und falsch gleich gross (R6, R9): Der Kasten zu «Falsch» war
 * höher, weil sein Wort ein anderes ist - jetzt haben beide dieselbe Höhe. */
.urteil {
  min-height: 74px;
}

/* JEDER RAUM MIT EINER FUSSZEILE. «Kannst du das schon?» unter einem Raum,
 * an dem gebaut wird, zog seinen Nachbarn in die Länge, und darunter
 * schwebten zwölf lose «So geht's». Jetzt trägt jeder Raum eine Zeile von
 * 44 px, und alle Räume einer Reihe sind gleich hoch. */
.raumpaar {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.raumpaar > .room {
  flex: 1 1 auto;
}
.raumfuss {
  display: flex;
  gap: 6px;
  min-height: 44px;
}
.raumfuss > .raumhilfe:not(.nur-symbol) {
  flex: 1;
}
.raumfuss > .raumcheck {
  flex: 1;
  min-width: 0;
  padding: 0 8px;
  line-height: 1.15;
}
.raumhilfe.nur-symbol {
  flex: 0 0 44px;
  width: 44px;
  padding: 0;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  color: var(--ink);
  box-shadow: 0 3px 0 var(--grau-kante);
}
@media (max-width: 639.98px) {
  .raumfuss > .raumcheck {
    font-size: 12px;
  }
}

/* WO ES WEITERGEHT. Acht gleich gelbe Räume sagten nicht, wo anfangen. Der
 * Raum, den die Lernwerkstatt vorschlägt, bleibt ganz gelb und heisst «hier
 * weiter»; die anderen, an denen gebaut wird, sind weiss mit einer gelben
 * Kante. Gibt es keinen solchen Raum, bleiben alle, wie sie waren. */
.rooms:has(.room.now.naechster) .room.now:not(.naechster) {
  background: var(--flaeche);
  box-shadow:
    inset 6px 0 0 var(--chalk),
    var(--schatten);
}

/* EIN EINLEITUNGSSATZ HÄLT ABSTAND zum Block darunter: In der Lernwerkstatt,
 * auf dem Ausweis und auf «Du» klebte er mit 0 px daran. */
main .pad > p.hinweis:not(:last-child) {
  margin-bottom: 14px;
}

/* DER PLATZHALTER IST KEINE ANTWORT. Er stand so gross und fett da wie eine
 * eingetippte Zahl, im Grau des Browsers. Jetzt kleiner, leichter, in der
 * Farbe der Nebensätze. */
.answer::placeholder {
  font-size: 17px;
  font-weight: 500;
  color: var(--ink-soft);
  opacity: 0.75;
}

/* DIE ZAHLENREIHE SIEHT AUS WIE ZAHLEN AUF EINEM STRAHL, nicht wie
 * Formularfelder: Auf einem breiten Bildschirm waren die Felder 95 px breit
 * und 30 px hoch, die Ziffern 14 px. */
.strahlreihe .marke b {
  border-radius: 8px;
}
@media (min-width: 640px) {
  .strahlreihe {
    justify-content: center;
  }
  .strahlreihe .marke {
    flex: 0 1 64px;
  }
  .strahlreihe .marke b {
    height: 44px;
    font-size: 20px;
  }
}

/* DAS BAND DER STUFEN BEGINNT UNTER DEM NAMEN, nicht unter dem Bild: So
 * gehören Name und Band sichtbar zusammen, und die Kachel wird ruhiger. */
.fachkachel .stockwerkband {
  grid-column: 2;
}
.fachkachel {
  padding: 12px 16px;
}

/* DIE ZEICHEN IM REGAL überlappen weniger, und ein leerer Balken steht nicht
 * da: Bei null fertigen Stufen sagt die Zeile darüber schon alles. */
.regal-zeichen > * + * {
  margin-left: -6px;
}
.regal-nm .bar:has(> i[style="width: 0%"]),
.tower .nm .bar:has(> i[style="width: 0%"]) {
  display: none;
}

/* SYMBOLE STATT SCHRIFTZEICHEN (V214): «Anhören», «Noch nicht» und
 * «Gewusst» tragen dasselbe Zeichen wie jede andere Bedienung. */
.btn.anhoeren {
  gap: 8px;
}
.karteikarte {
  padding-top: 58px;
}
/* Die Mathematik in Bernstein statt einem trüben Oliv - nur am Band der
 * Karte, wo das tiefe Braun des Regals wie Schmutz aussah. */
.karteikarte.ton-rechnen {
  border-top-color: #d3a43a;
}

/* DIE RICHTUNG IST EINE WAHL, KEINE ZWEI HANDLUNGEN: zwei Hälften einer
 * Spur, die gewählte weiss und erhaben. Darunter bleibt es bei zwei Wegen
 * ohne Skript (``aria-current``), nur sieht es nicht mehr aus wie zwei
 * Knöpfe, die etwas tun. */
.richtung {
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--track);
}
.richtung .btn,
.richtung .btn.still {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  box-shadow: none;
}
.richtung .btn[aria-current="true"] {
  background: var(--flaeche);
  color: var(--ink);
  box-shadow:
    0 1px 2px rgba(22, 35, 59, 0.12),
    0 3px 10px rgba(22, 35, 59, 0.08);
}
.richtung .btn:active:not([disabled]) {
  transform: none;
}

/* EIN EINZELNER STAPEL wird nicht über die ganze Breite gezogen: Auf dem
 * Schreibtisch stand «Stufe 1» in 13 px über 1032 px. */
@media (min-width: 1024px) {
  .stapelreihe > li:only-child {
    grid-column: auto;
  }
}

/* WAS GERADE RUHT, STEHT AUF EINER KARTE MIT BILD, wie die Zwischenseiten
 * (V139): die Stoppuhr, weil es nach dem Check wieder geht. Bis hierhin war
 * es eine graue Zeile. Der Weg zurück steht als Steuerknopf darüber. */
.kartenruhe[role="status"] {
  display: grid;
  justify-items: center;
  gap: 12px;
  max-width: 560px;
  margin: 18px auto;
  padding: 26px 24px 28px;
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  background: var(--flaeche);
  box-shadow: var(--schatten);
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
}
.kartenruhe[role="status"]::before {
  content: "";
  width: 88px;
  height: 88px;
  background: url("bilder/stopwatch.webp") center / contain no-repeat;
}

/* «DU»: JEDE KARTE MIT IHREM ZEICHEN, Schalter statt Sätzen, und das Konto
 * zuletzt in einer Karte (V214). Sieben gleiche Textkarten mit sieben
 * gleichen weissen Knöpfen sagten nicht, was wo steht. */
.du-titel {
  display: flex;
  align-items: center;
  gap: 10px;
}
.du-titel > .symbol {
  flex: none;
  box-sizing: content-box;
  padding: 7px;
  border-radius: 999px;
  background: var(--plaster-hi);
  color: var(--ink);
}
.b-du .card > h2.sub.du-trenner {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--linie);
}
.du-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.du-konto form .btn.steuer {
  align-self: flex-start;
}
@media (min-width: 1024px) {
  .b-du .pad > h1,
  .b-du .pad > p.hinweis {
    column-span: all;
  }
}

/* EIN SCHALTER: der Name links, rechts das Wort und die Spur. Ein Knopf
 * bleibt er - abgeschickt wird ein Formular oder, bei den Tönen, ein Klick -,
 * nur sagt er jetzt, wie es steht, statt was er tun wird. An ist Kobalt, die
 * Farbe der Wahl, nicht Grün: Grün ist das Urteil «richtig» (R6). */
.btn.schalter {
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 10px 12px 10px 16px;
  font-size: 15px;
}
.schalter-name {
  margin-right: auto;
}
.schalter-wort {
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.btn.schalter::after {
  content: "";
  flex: none;
  width: 52px;
  height: 32px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 16px 50%, #fff 0 11px, transparent 11.5px),
    var(--track);
  box-shadow: inset 0 0 0 1px rgba(22, 35, 59, 0.12);
}
.btn.schalter[aria-checked="true"]::after {
  background:
    radial-gradient(circle at 36px 50%, #fff 0 11px, transparent 11.5px),
    var(--cobalt);
}
@media (prefers-reduced-motion: no-preference) {
  .btn.schalter::after {
    transition: background 0.18s ease;
  }
}

/* DIE ANMELDUNG, DER ERSTE EINDRUCK (V214): keine leere Kopfzeile «Hallo /
 * Anmelden» mehr, die Marke über dem Bild statt darunter, und der erste
 * Schritt mit einem Titel. Den Abstand zur Statusleiste des Telefons hält
 * dann der Inhalt selbst (V74.5). */
.b-anmelden > .top {
  display: none;
}
.b-anmelden > .body {
  padding-top: env(safe-area-inset-top, 0px);
}
.b-anmelden .willkommen {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.b-anmelden .willkommen > .zeichnung {
  order: -1;
  margin: 6px 0 14px;
}
.b-anmelden .willkommenbild {
  align-self: stretch;
  margin-bottom: 14px;
}
.schritt-titel {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 12px;
}
.b-anmelden .eingabe::placeholder {
  color: var(--ink-soft);
  opacity: 0.6;
}
@media (min-width: 1024px) {
  .frame.b-anmelden {
    grid-template-rows: minmax(0, 1fr);
  }
  .b-anmelden .pad {
    align-items: center;
  }
  .b-anmelden .pad > .schritt {
    align-self: center;
  }
  .schritt-titel {
    font-size: 28px;
  }
}

/* DIE HALLE (V214): Auf dem Telefon stand ein Automat je Reihe - neunzehn
 * Bildschirme Scrollen -, auf dem Schreibtisch kam «So gehen die Automaten»
 * erst nach über 4000 px. Jetzt zwei je Reihe auf dem Telefon, auf dem
 * Schreibtisch so viele, wie Platz haben, und die Erklärung steht rechts
 * daneben und bleibt stehen. Satz und Knopf stehen in jeder Reihe auf
 * derselben Höhe. */
.automaten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 12px;
}
.automat {
  width: auto;
  height: 100%;
}
.automat-schild {
  flex: 1;
  width: 100%;
}
.automat-schild > .btn {
  margin-top: auto;
}
.automat-satz {
  min-height: calc(2 * 1.4em);
  line-height: 1.4;
}
.automat-zustand {
  max-width: 100%;
  font-size: 12.5px;
  line-height: 1.3;
}
@media (max-width: 639.98px) {
  .automat-schild .btn {
    padding: 10px 8px;
    font-size: 13.5px;
  }
  .automat-satz {
    font-size: 13px;
  }
}
@media (min-width: 640px) {
  .automaten {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }
}
@media (min-width: 1024px) {
  .b-games .pad {
    max-width: 1240px;
  }
  .spielplatz {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
  }
  .automaten {
    grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
    gap: 28px 18px;
  }
  .spielweg {
    position: sticky;
    top: 24px;
  }
  .spielweg .coinschritte {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* DER AUTOMAT PASST MIT SEINEN KNÖPFEN INS FENSTER (V214): Auf 1440 × 900
 * lagen «Coin einwerfen» und «Spielen» unter dem Rand. Wartet ein Credit,
 * steht «Spielen» vorn. */
.automat-knoepfe {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.automat-knoepfe.mit-credit > [data-spielen] {
  order: -1;
}
@media (min-width: 1024px) {
  .kasten {
    width: min(340px, calc((100dvh - 420px) * 220 / 372));
    min-width: 200px;
  }
}

/* Die Kennzahlen eines Automaten: die Zahl zuerst, die Beschriftung darunter,
 * wie auf dem Ausweis. Bricht eine Beschriftung um, stehen die Zahlen
 * trotzdem auf einer Linie. */
.automat-kasse > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 4px;
}
.automat-kasse dd {
  margin: 0;
}

/* «WAS SCAMPY SPEICHERT» LIEST SICH (V214): Die Absätze standen ohne Abstand,
 * die Zeilen waren rund 110 Zeichen lang, und die verbindliche Liste stand
 * als gewöhnliche Aufzählung da. Jetzt Luft zwischen den Absätzen, eine
 * Zeile von rund 68 Zeichen und vor jedem Punkt der Liste ein Kreuz. */
.b-lesen .card > .hinweis + .hinweis {
  margin-top: 10px;
}
.b-lesen .card .hinweis {
  max-width: 68ch;
  line-height: 1.6;
}
.b-lesen .card > ul.hinweis {
  list-style: none;
  display: grid;
  gap: 6px;
  margin: 10px 0;
  padding: 0;
}
.b-lesen .card > ul.hinweis > li {
  position: relative;
  padding-left: 30px;
  color: var(--ink);
}
.b-lesen .card > ul.hinweis > li::before {
  content: "×";
  position: absolute;
  left: 0;
  top: 50%;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 999px;
  background: var(--plaster-hi);
  border: 1px solid var(--linie);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  color: var(--ink-soft);
}
@media (min-width: 1024px) {
  .b-lesen .card {
    padding: 24px 28px;
  }
}

/* DER SCAMPY SCHWEBT NICHT LOSE (V214): Auf einer Karte, deren Inhalt in der
 * Mitte steht, stand er bündig links oder rechts zwischen Bild und Titel und
 * sah verloren aus. Jetzt sitzt er am Bild - an seiner linken oder rechten
 * unteren Ecke, wie die Lage es zieht (V74.4) - und ohne Bild über dem
 * Titel, um wenig von der Mitte versetzt. Zufällig bleibt die Lage, nur
 * nicht mehr am Rand. */
.leerbild + .leer-zeichen {
  justify-content: center;
  margin-top: -40px;
  margin-bottom: 8px;
  padding: 0;
  position: relative;
  z-index: 1;
  transform: translateX(54px);
}
.leerbild + .leer-zeichen.lage-links {
  transform: translateX(-54px);
}
:is(.zwischenkarte, [data-ende], .kartenende, .rundenende) .ende-zeichen {
  justify-content: center;
  padding: 0;
}
:is(.zwischenkarte, [data-ende], .kartenende, .rundenende) .ende-zeichen.lage-links {
  transform: translateX(-28px);
}
:is(.zwischenkarte, [data-ende], .kartenende, .rundenende) .ende-zeichen.lage-rechts {
  transform: translateX(28px);
}

/* DIE ZWISCHENSEITE STEHT IN DER MITTE des Fensters, nicht oben mit 60 %
 * Leere darunter. */
@media (min-width: 1024px) {
  .b-zwischen .pad {
    margin-top: max(32px, calc((100dvh - 86px - 520px) / 2));
  }
}

/* DIE STUFENLEISTE IST LEICHTER (V214): Acht gesperrte Felder sahen aus wie
 * acht Knöpfe. Eine Stufe, die zu ist, steht jetzt nur als Umriss da, ohne
 * Fläche und ohne Kante - sie ist kein Weg. Und im Kopf des Fachs fehlt der
 * leere Balken bei null sicheren Räumen: Der Satz daneben sagt es schon, und
 * das Band der Stufen steht darüber. */
.stufenfeld.zu {
  background: transparent;
  border: 1px solid var(--linie);
  color: rgba(75, 91, 118, 0.75);
  font-size: 17px;
}
.floorhead .bar:has(> i[style="width: 0%"]) {
  display: none;
}

/* DER CHECK AUF EINEM TABLET QUER (V214): Rechts neben der Karte stand vor
 * der ersten Antwort nur eine Notiz in 13 px, und 470 px blieben leer. Die
 * Notiz steht jetzt als ruhige Tafel da - sie gehört zum Check und sagt, wie
 * er läuft. Die Karte springt deshalb nicht, wenn das Urteil dazukommt. */
@media (min-width: 1024px) and (max-height: 860px) {
  .b-check .rundenseite > p.hinweis {
    margin: 0;
    padding: 16px 18px;
    border: 1px solid var(--linie);
    border-radius: var(--r-karte);
    background: var(--flaeche);
    font-size: 14.5px;
    line-height: 1.55;
  }
}

/* DIE AKTUELLE AUFGABE IN DER PUNKTREIHE: Beantwortet (graublau) und dran
 * (Tinte) waren kaum zu unterscheiden. Dran trägt jetzt einen Ring, in der
 * geschlossenen Runde in ihrer Farbe. */
.dots i.now {
  box-shadow: 0 0 0 1.5px var(--flaeche), 0 0 0 3px var(--ink);
}
.frame.quiet .dots i.now {
  box-shadow: 0 0 0 1.5px var(--flaeche), 0 0 0 3px var(--iris, #5b4bd5);
}

/* EINE FARBE ALS FELD (V214), gesetzt von aufgabe.js statt eines Emoji, das
 * jedes Gerät anders zeichnete. Ein Rand hält auch Weiss sichtbar. */
.farbfeld {
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 1px rgba(22, 35, 59, 0.22),
    0 1px 2px rgba(22, 35, 59, 0.12);
}
.btn.gewaehlt .farbfeld {
  box-shadow:
    0 0 0 3px #fff,
    inset 0 0 0 1px rgba(22, 35, 59, 0.22);
}

/* EIN STIL FÜR DIE KLEINEN ETIKETTEN (V214): «Tipp», «Ein Beispiel», «So
 * geht's» und «Anders gerechnet» standen in 11 px Grau, andere Etiketten in
 * Versalien - vier Fassungen für dieselbe Aufgabe. Jetzt eine, die der
 * Lernkarten (``.karte-etikett``), in der Farbe der Nebensätze. */
.tipp .kopf,
.beispiel .kopf,
.wege-liste > .kopf {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* NACH DER ANTWORT kommen die Schritte rascher als im Beispiel: Dort rechnet
 * sich etwas vor, hier steht der Weg zum Nachlesen - und mit 0,9 s je
 * Schritt stand der Kasten lange halb leer da. */
@media (prefers-reduced-motion: no-preference) {
  .sogehts-kasten:not([hidden]) .beispiel-schritte li {
    animation-duration: 0.3s;
    animation-delay: calc(var(--nr, 0) * 0.25s + 0.1s);
  }
}

/* ZWEI SPALTEN FÜR DEN SCHREIBTISCH, BÜNDIG MIT DER KOPFZEILE (V214). Bis
 * hierhin hatte fast jede Seite ihre eigene Breite - 1320, 1120, 980, 940,
 * 820, 760 px -, und die schmaleren standen in der Mitte: Beim Wechsel
 * sprang der Inhalt hin und her. Jetzt beginnt jede Seite dort, wo der Gruss
 * in der Kopfzeile beginnt, und ist entweder breit (Listen, Raster) oder
 * lesbar schmal (Text). In der Mitte stehen nur, was eine Sache für sich ist:
 * die Runde, der Check, eine Lernkarte, das Memory, die Zwischenseiten und
 * die Anmeldung. */
@media (min-width: 1024px) {
  :root {
    --spalte-breit: 1180px;
    --spalte-lesen: 808px;
  }
  :is(
      .b-ausweis,
      .b-du,
      .b-lernkarten,
      .b-kurse,
      .b-kurs,
      .b-kursdossier,
      .b-games,
      .b-automat,
      .b-lesen,
      .b-serie,
      .b-coins,
      .b-kurstext,
      .b-kurserklaerung
    )
    .pad {
    width: auto;
    margin: 0 auto 0 0;
    padding: 32px 44px 56px;
  }
  :is(.b-ausweis, .b-du, .b-lernkarten, .b-kurse, .b-kurs, .b-kursdossier, .b-games, .b-automat)
    .pad {
    max-width: var(--spalte-breit);
  }
  :is(.b-lesen, .b-serie, .b-coins, .b-kurstext, .b-kurserklaerung) .pad {
    max-width: var(--spalte-lesen);
  }
}

/* Der Ring der Coins bei null: ohne runde Kappe, sonst stand ein gelber
 * Stummel da, als wäre schon etwas gezählt. */
.coins-fuellung.leer {
  stroke-linecap: butt;
}

/* ORDNEN, MIT PLÄTZEN (V214): Oben stehen die nummerierten Plätze und füllen
 * sich, darunter liegen die Karten, gross genug für einen Daumen. Eine
 * gelegte Karte bleibt unten stehen, blass, und lässt sich mit einem Tipp
 * zurücknehmen; die kleine Nummer davor braucht es mit den Plätzen nicht. */
.ordnungsplaetze {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 14px;
}
.ordnungsplatz {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 64px;
  min-height: 60px;
  padding: 14px 10px 6px;
  border: 1.5px solid var(--linie);
  border-radius: 14px;
  background: var(--plaster-hi);
}
.ordnungsplatz small {
  position: absolute;
  top: 4px;
  left: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-soft);
}
.ordnungsplatz b {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.1;
}
.ordnungsplatz.belegt {
  border-color: var(--ink);
  background: var(--flaeche);
}
.karten.ordnung {
  gap: 10px;
}
.karten.ordnung .karte-knopf {
  min-width: 64px;
  min-height: 56px;
  font-size: 16px;
}
.ordnungsplaetze.kurz .ordnungsplatz b,
.karten.ordnung.kurz .karte-knopf {
  font-size: 22px;
}
.karten.ordnung .karte-knopf .platz {
  display: none;
}
.karten.ordnung .karte-knopf[aria-pressed="true"] {
  opacity: 0.45;
  box-shadow: none;
}

/* ---------- Ausweis: das Bild als Vorschau (V214) ------------------------
   Das Bild selbst unter dem Stand pro Fach, vor dem Knopf, der es sichert.
   Es trägt seinen eigenen Grund (--plaster) und seine Karte mit Schatten,
   also hier weder Rahmen noch Schatten: Auf dem Grund der Seite steht die
   Karte des Bilds wie jede andere Karte. Die Vorlage hält es mit
   style="max-width: 100%; height: auto" in der Spalte, auch ohne diese
   Regel - deshalb setzt sie nur die Breite und nie max-width. */
.ausweisvorschau-titel {
  margin: 22px 0 4px;
}
.ausweisvorschau {
  display: block;
  width: 100%;
  margin: 0 0 8px;
}
@media (min-width: 1024px) {
  .ausweisvorschau-titel {
    margin-top: 30px;
  }
  /* Auf dem Schreibtisch nicht über die ganze Spalte: Ein Ausweis, der
     1100 Pixel breit ist, liest sich wie ein Plakat. */
  .ausweisvorschau {
    width: 600px;
    /* Das Bild hat 20 von 720 Punkten eigenen Grund um seine Karte; um
       so viel nach links, damit die Karte unter der Überschrift beginnt. */
    margin: 0 0 10px calc(-600px * 20 / 720);
  }
}

/* ---------- Zwei Zeilen statt eines Umbruchs (V214.5) --------------------
   Was V214.3 offen liess. Die Stufe im Kopf des Fachs trägt den Stand der
   Räume auf ihrer eigenen Zeile, auf jeder Breite: Daneben brach er auf einem
   Telefon um, sobald die Zahlen zweistellig wurden. Die Unterzeile eines
   Regals hat zwei Teile, und keiner bricht in sich um; unter 640 px steht
   jeder auf seiner Zeile, in jedem Regal gleich, ohne den Punkt. */
.floorhead .lvl small {
  display: block;
  margin-top: 7px;
  line-height: 1.3;
}
.regal-unter > span {
  white-space: nowrap;
}
@media (max-width: 639.98px) {
  .regal-unter > span {
    display: block;
  }
  .regal-unter > .regal-punkt {
    display: none;
  }
}

/* ---------- Die Bereiche der Mathematik (V219) ----------------------------
   «unter mathematik sollte es ja arithmetik, algebra, geometrie usw geben».
   Im Fach eine Reihe von Feldern unter der Stufenleiste - «Alle» und je
   Bereich eines, mit der Zahl seiner Räume in den erreichten Stufen: wie
   viele, nicht wie gut (R6, R7). Gewählt ist eingedrückt, wie eine Stufe, in hellem
   Kobalt - Gelb bleibt das Bauen.
   Die Felder laufen auf dem Telefon um, statt die Seite seitwärts zu
   schieben. In der Lernwerkstatt unter der Mathematik dieselben Bereiche
   als kleine Wege; im Raum ein Etikett mit seinem Bereich. Kobalt, weil ein
   Bereich eine Tür ins Fach ist - keine Farbe des Urteils. */
.bereichswahl {
  margin: -4px 0 18px;
}
.bereichswahl ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bereichsfeld {
  --knopf-kante: var(--grau-kante);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 3px 0 var(--knopf-kante);
}
.bereichsfeld:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.bereichsfeld-zahl {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--sky-low);
  color: var(--cobalt-tief);
  font-size: 12.5px;
  text-align: center;
}
.bereichsfeld[aria-current="page"] {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--knopf-kante);
  border: 2px solid var(--cobalt-tief);
  background: var(--sky-low);
}
.bereichsfeld[aria-current="page"] .bereichsfeld-zahl {
  background: var(--flaeche);
}
.bereichsstufe {
  margin: 22px 0 10px;
  font-size: 15px;
  color: var(--ink-soft);
}
.bereichsstufe:first-of-type {
  margin-top: 6px;
}
.raumbereich {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
.werkbereiche {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 4px;
}
.werkbereich {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--cobalt-tief);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 700;
}
.werkbereich:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
@media (pointer: coarse) {
  .werkbereich {
    min-height: 44px;
  }
}

/* ---------- Der Scampy erklärt die Coins (V220) ---------------------------
   «wenn man coins bekommt, soll scampy das auch erklären, auch warum» - und
   wenn keine kommen, obwohl man sie erwartet. Drei Orte: die Blase unter der
   Pille, wenn Coins dazukommen (`coins.js`); die Zeile am Ende eines Checks
   mit dem Satz des Servers; und ein leiser Hinweis auf Seiten, die keine
   Lernzeit zählen. Kein Rot und kein Grün - die Blase sagt wofür, nicht ob
   etwas richtig war (R6, R9). */
.coinmeldung {
  position: fixed;
  z-index: 40;
  top: calc(env(safe-area-inset-top, 0px) + 70px);
  right: 12px;
  left: 12px;
  margin: 0 auto;
  max-width: 420px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--linie-stark);
  border-radius: 18px;
  background: var(--flaeche);
  box-shadow: 0 12px 32px rgba(22, 35, 59, 0.18);
}
.coinmeldung[hidden] {
  display: none;
}
.coinmeldung-scampi {
  grid-row: span 2;
  display: inline-flex;
}
.coinmeldung-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
}
.coinmeldung-text strong {
  display: block;
  margin-bottom: 2px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 18px;
  color: var(--cobalt-tief);
}
.coinmeldung .coinmeldung-zu {
  justify-self: end;
  grid-column: 2;
}
@media (min-width: 1024px) {
  .coinmeldung {
    left: auto;
    right: 24px;
    top: 84px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .coinmeldung.offen {
    animation: coinmeldung-rein 0.32s ease-out;
  }
}
@keyframes coinmeldung-rein {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.ende-coinsgrund {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  text-align: left;
}
.ende-coinsgrund[hidden] {
  display: none;
}
.ende-coinsgrund-scampi {
  flex: none;
  display: inline-flex;
}
.ende-coinsgrund p {
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--sky-low);
  font-size: 14px;
  line-height: 1.4;
}
.frame.quiet .ende-coinsgrund p {
  background: var(--iris-grund, #ebe9fc);
}
.frame.quiet .ende-coinsgrund-scampi * {
  animation: none !important;
}
.coinsgrund {
  display: block;
  margin-bottom: 4px;
  font-weight: 700;
}
.denkscampi.ruhig .zeichen.bewegung-gruebeln,
.denkscampi.ruhig .denkblase {
  animation: none;
}
.keinecoins {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 24px 0 8px;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.keinecoins-scampi {
  flex: none;
  display: inline-flex;
}

/* ---------- Lernkarten in drei Gruppen (V221) -----------------------------
   «es soll auch gut sichtbar sein, wieviele karten pro stapel noch offen
   sind, wieviele noch zu üben sind und wieviele man weiss.» Ein Balken in
   drei Teilen und darunter je Gruppe ein Weg mit seiner Zahl. Offen ist
   hell, «noch üben» trägt Gelb wie die Stufe, an der gebaut wird, «gewusst» das Moos eines
   sicheren Raums - keine Farbe eines Urteils, und kein Teil ist grösser als
   seine Zahl (R6, R9). Zurücksetzen steht leise darunter, hinter einer
   Rückfrage. */
.kartenstand {
  margin-top: 10px;
}
.gruppenbalken {
  display: flex;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--linie);
}
.gruppenbalken i {
  display: block;
  height: 100%;
}
.gruppenbalken .g-offen {
  background: #d9dee8;
}
.gruppenbalken .g-noch {
  background: var(--chalk);
}
.gruppenbalken .g-gewusst {
  background: var(--moss);
}
.gruppenwege {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gruppenweg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px 0 6px;
  border: 1px solid var(--linie-stark);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--ink);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 700;
}
@media (pointer: coarse) {
  .gruppenweg {
    min-height: 44px;
  }
}
.gruppenweg b {
  min-width: 28px;
  padding: 2px 7px;
  border-radius: 999px;
  text-align: center;
  font-size: 13px;
}
.gruppenweg.g-offen b {
  background: #e4e8f0;
}
.gruppenweg.g-noch b {
  background: var(--chalk);
}
.gruppenweg.g-gewusst b {
  background: var(--moss);
  color: #fff;
}
.gruppenweg.leer {
  border-style: dashed;
  color: var(--ink-soft);
  font-weight: 600;
}
a.gruppenweg:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.zuruecksetzen {
  margin-top: 8px;
  font-size: 13.5px;
}
.zuruecksetzen summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px; /* wie jedes Tippziel (V410); bis dahin 36 px */
  cursor: pointer;
  color: var(--ink-soft);
  font-weight: 600;
}
.zuruecksetzen form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 4px;
}
.zuruecksetzen form p {
  margin: 0;
}
.stapelkarte {
  padding: 4px 0 14px;
}
.kartei-gewusst {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.karte-marke.gewusst {
  background: var(--moss);
  color: #fff;
}
.kartenhinweis {
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--sky-low);
  color: var(--ink);
}
/* Mit den Gruppen darunter braucht ein Stapel die Breite: auf dem Telefon
   einer je Zeile, ab 640 px zwei, ab 1024 px drei. */
.stapelreihe {
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .stapelreihe {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .stapelreihe {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* Die Gruppen einer ganzen Kategorie stehen eingerückt wie ihre Wege. */
.kurskategorie > .kartenstand {
  margin: 0 16px 14px;
}

/* ---------- Die Merkliste (V222) ------------------------------------------
   «die spiele die man mag soll man markieren können ... ebenso soll man
   übungen markieren können». Ein Herz an jedem Spielautomaten und ein
   Lesezeichen unter jedem Raum, beide als Formular ohne Skript; gemerkt in
   Kobalt, sonst in Tinte - kein Gelb und keine Farbe des Urteils. Die
   Übersichten: «Lieblinge» unter «Games», «Gemerkt zum Üben» in der
   Lernwerkstatt. */
.merkform,
.herzform {
  display: flex;
  margin: 0;
}
.raumfuss > .merkform {
  flex: 0 0 44px;
}
button.raumhilfe.merken {
  cursor: pointer;
  font: inherit;
}
.raumhilfe.merken.an {
  color: var(--cobalt-tief);
  border-color: var(--cobalt-tief);
  background: var(--sky-low);
}
li.automat {
  position: relative;
}
.herzform {
  position: absolute;
  z-index: 1;
  top: 4px;
  right: 4px;
}
.herz {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--linie-stark);
  border-radius: 50%;
  background: var(--flaeche);
  color: var(--ink-soft);
  cursor: pointer;
}
.herz.an {
  color: #c2367a;
  border-color: #c2367a;
}
.herz:focus-visible,
button.raumhilfe.merken:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.hallenwahl {
  margin: 4px 0 16px;
}
.hallenwahl .btn {
  gap: 6px;
}
.lieblingeleer {
  margin: 0 0 16px;
}
.gemerkt {
  margin: 4px 0 22px;
}
.gemerkt .sub {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gemerkt .sub svg {
  color: var(--cobalt-tief);
}
.gemerkt-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
@media (min-width: 1024px) {
  .gemerkt-liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.gemerkt-raum {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gemerkt-weg {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 12px;
  border: 1px solid var(--linie);
  border-radius: 16px;
  background: var(--flaeche);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 3px 0 var(--grau-kante);
}
.gemerkt-weg:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.gemerkt-text {
  flex: 1;
  min-width: 0;
  display: grid;
}
.gemerkt-text small {
  color: var(--ink-soft);
}
.gemerkt-los {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--cobalt-tief);
  font-weight: 700;
  font-size: 14px;
}
.gemerkt-raum .merkform {
  flex: 0 0 44px;
}
.gemerkt-raum .merkform button {
  height: 56px;
}

/* V226: Tile Temple ohne Uhr. Neben der Lupe das Mischen, beide mit der Zahl, die
   noch übrig ist; was aufgebraucht ist, steht blass da. Liegt kein Paar mehr frei,
   lockt das Mischen mit einem hellen Rand - und, wo Bewegung erwünscht ist, mit
   einem ruhigen Puls. Kein Rot, kein Grün (R6, R9). */
.hud-knopf.hud-mischen {
  background: #7fe3e0;
}
.hud-knopf.leer {
  opacity: 0.45;
}
.hud-knopf.lockt {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: no-preference) {
  .hud-knopf.lockt {
    animation: mischen-lockt 1.1s ease-in-out infinite;
  }
}
@keyframes mischen-lockt {
  50% {
    transform: translateY(-2px) scale(1.06);
  }
}

/* =====================================================================
 * V227 - NOVA PINBALL, MASSIV AUSGEBAUT (angeordnet am 09.10.2026:
 * «flipper massiv ausbauen, wie ein richtiger flipper mit coolem
 * hintergrund usw»)
 *
 * DIE ANZEIGE über dem Tisch, wie die Punktmatrix an einem Flipper:
 * dunkel, mit Zeilen in Bernstein - welche Mission läuft, wie weit sie
 * ist und was bereit ist. Breit genug, steht sie links neben dem Tisch.
 * Das Skript setzt, wo sie steht. Bernstein ist kein Urteil (R6, R9).
 *
 * DER HINTERGRUND - Weltall, Nebel, Planeten, das Gehäuse und das Bild
 * auf dem Feld - ist auf der Leinwand gemalt; hier steht nur, was über
 * ihr liegt. Das Startbild bekommt einen Planeten und das Blau der Nacht.
 * ===================================================================== */
.flipper-anzeige {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 4px;
  box-sizing: border-box;
  margin: 0;
  padding: 6px 10px;
  border-radius: 6px;
  background:
    radial-gradient(circle, rgba(255, 170, 60, 0.07) 1px, transparent 1.2px) 0 0 / 3px 3px,
    #0c0710;
  box-shadow:
    0 0 0 2px #3a2a12,
    0 0 0 4px #120a20,
    0 0 18px rgba(255, 150, 40, 0.18);
  color: #ffb547;
  pointer-events: none;
}
.flipper-anzeige-zeile {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  filter: drop-shadow(0 0 3px rgba(255, 160, 50, 0.65));
}
.flipper-anzeige-zeile .pixeltext {
  height: 11px;
  max-width: 100%;
}
.flipper-anzeige-stand {
  color: #ffd98a;
}
.flipper-anzeige.seitlich {
  gap: 8px;
  padding: 12px 12px;
}
.flipper-anzeige.seitlich .flipper-anzeige-zeile {
  white-space: normal;
}
.flipper-anzeige.seitlich .pixeltext {
  height: 13px;
}
.brett-chuegeli .flipper-meldung {
  background: rgba(12, 7, 16, 0.82);
  box-shadow:
    0 0 0 2px #3a2a12,
    0 0 22px rgba(255, 95, 210, 0.4);
  color: #ffb547;
}

/* Das Startbild: ein Stück Tisch im Weltall, mit einem Planeten. */
.titel-flipper .titel-flipperbild {
  background:
    radial-gradient(circle at 20% 30%, rgba(143, 107, 255, 0.55), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(255, 95, 210, 0.35), transparent 50%),
    linear-gradient(#1d1458, #070420);
  box-shadow:
    0 0 0 3px #d9dcec,
    0 0 18px rgba(143, 107, 255, 0.6);
}
.titel-flipperplanet {
  position: absolute;
  left: 50%;
  top: calc(0.4 * var(--s));
  width: calc(1.9 * var(--s));
  height: calc(1.9 * var(--s));
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe2b8, #ff8a5c 55%, #4b1747);
  transform: translateX(-50%);
  opacity: 0.6;
}
.titel-flipper .titel-flipperpilz {
  border-color: #c9f7ff;
  background: radial-gradient(circle at 40% 35%, #9ff9ff, #1b8fb3);
}
.titel-flipper .titel-flipperarm {
  background: #f6f3ff;
  box-shadow:
    0 0 0 2px #1b1633,
    inset 0 0 0 2px #ff5fd2;
}
/* Der längste Name, «Nova Pinball», ragte auf dem Telefon über den Schirm:
   Der Titel wird höchstens so breit wie der Schirm, und seine Buchstaben
   werden dafür kleiner (V227). */
.titel-schrift {
  max-width: 100%;
}
.titel-schrift .pixeltitel {
  max-width: calc(100vw - 32px);
}

/* ---------- Das Bild einer Lernkarte (V228) ----------------------------- */
/* Ein Bild aus Fluent Emoji statt des Zeichens, das jedes Gerät anders
   zeichnet. So gross wie bisher das Zeichen: eine Zeile der Schrift, die
   .karte-bild und .karte-vorher setzen. */
.karte-bild img.kartenbild {
  display: block;
  width: 1.05em;
  height: 1.05em;
  margin: 0 auto;
}
.karte-vorher img.kartenbild {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
}


/* ---------- Die Post des Scampy (V230) ----------------------------------
   «dass der scampy eine nachricht anzeigt wenn man online ist ... der scampy
   soll ein geschenk zeigen. wenn man draufklickt kommen die coins animiert
   raus». Oben auf jeder Seite mit Navigation: der Scampy links, daneben
   seine Blase mit dem Satz und «Gut» oder dem Geschenk. Kein Rot und kein
   Grün - ein Geschenk ist kein Urteil (R6, R9). Das Geschenk bewegt sich
   nur auf eine Handlung hin: angetippt oder unter dem Zeiger (`docs/03`
   Abschnitt 3); die fliegenden Coins zeichnet `geschenk.js`. */
/* Über dem Inhalt, mit dessen Rand: Manche Bildschirme legen `.pad` in ein
   festes Raster, und ein Stück mehr darin rutschte ans Ende. */
.postfach {
  padding: 18px 20px 0;
}
.postfach + .pad {
  padding-top: 0;
}
@media (min-width: 640px) {
  .postfach {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 28px 0;
  }
}
@media (min-width: 1024px) {
  .postfach {
    max-width: 1320px;
    padding: 32px 44px 0;
  }
}
.scampipost {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: end;
  margin: 0 0 16px;
}
.scampipost-blasen {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.scampipost-scampi {
  display: inline-flex;
  padding-bottom: 4px;
}
.scampipost-blase {
  position: relative;
  padding: 12px 14px;
  border: 1px solid var(--linie-stark);
  border-radius: 18px 18px 18px 6px;
  background: var(--flaeche);
  box-shadow: 0 8px 22px rgba(22, 35, 59, 0.12);
}
.scampipost-text {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.scampipost-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
}
.scampipost-blase:not(.ist-geschenk) .scampipost-form {
  justify-content: flex-end;
}
.scampipost-hinweis {
  margin: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cobalt-tief);
}
.scampipost-blase.ist-geschenk {
  background: linear-gradient(135deg, var(--flaeche) 55%, var(--sky-low));
}
button.geschenk {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  min-height: 96px;
  padding: 4px;
  border: 0;
  border-radius: 22px;
  background: transparent;
  cursor: pointer;
}
button.geschenk:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.geschenk-bild {
  display: inline-flex;
  filter: drop-shadow(0 6px 10px rgba(22, 35, 59, 0.22));
}
.geschenk-bild .bild {
  width: 84px;
  height: 84px;
}
@media (prefers-reduced-motion: no-preference) {
  button.geschenk:hover .geschenk-bild,
  button.geschenk:focus-visible .geschenk-bild {
    animation: geschenk-wackeln 0.6s ease-in-out;
  }
  .scampipost-blase.ist-offen button.geschenk .geschenk-bild {
    animation: geschenk-auf 0.5s ease-out forwards;
  }
}
.scampipost-blase.ist-offen .scampipost-hinweis {
  visibility: hidden;
}
@keyframes geschenk-wackeln {
  0%,
  100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-7deg) scale(1.04);
  }
  75% {
    transform: rotate(7deg) scale(1.04);
  }
}
@keyframes geschenk-auf {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.18) rotate(-6deg);
  }
  100% {
    transform: scale(0.6) translateY(-10px);
    opacity: 0;
  }
}
/* Die Coins, die aus dem Geschenk springen - eine Ebene über allem, damit
   sie bis zur Pille fliegen können. `geschenk.js` legt sie an und bewegt
   sie; danach sind sie fort. */
.flugcoin {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  pointer-events: none;
  will-change: transform, opacity;
}
.flugcoin .bild {
  width: 30px;
  height: 30px;
}
.scampipost-plus {
  position: fixed;
  z-index: 61;
  top: 0;
  left: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 30px;
  font-weight: 800;
  color: var(--cobalt-tief);
  text-shadow: 0 2px 0 #fff;
  pointer-events: none;
}
@media (min-width: 1024px) {
  .scampipost {
    max-width: 720px;
  }
}
/* Die Wahl «an alle» oder «an diese Adressen» auf der Seite «Post» (V230). */
.sca-wahl {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0 0;
  padding: 0;
  border: 0;
}
.sca-wahl legend {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 700;
}
.sca-wahl label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  font-weight: 400;
}
.sca-formular .sca-wahl input {
  min-height: 0;
  width: 18px;
  height: 18px;
  padding: 0;
}

/* ===================================================================== */
/* DIE STUFEN EINES SPEZIALKURSES (V232): «die spezialkurse auch aufbauend
   und nicht gleich alles zugänglich». Je Gruppe ihre Stufe als kleine
   Marke; geschafft in Moos wie ein sicherer Raum (V136), noch zu gedämpft
   mit einem Schloss - ohne Rot und ohne Wertung (R6, R9). */
.kursstufe {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 6px 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--plaster-hi);
  border: 1px solid var(--linie);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.kursstufe.ist-geschafft {
  border-color: var(--moss);
  color: var(--moss);
}
.kursstufe-symbol {
  flex: 0 0 auto;
}
.kursstufe-satz {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.kursgruppe-zu {
  background: var(--plaster);
  border-style: solid;
}
.kursgruppe-zu .kursgruppe-kodierung,
.kursgruppe-zu h3,
.kursgruppe-zu h4,
.kursgruppe-zu .kursgruppe-zahl {
  opacity: 0.62;
}
.kursgruppe-zu .kursgruppe-wege {
  display: none;
}
.kursstufen-hinweis,
.kursstufe-geschafft {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.kursstufen-hinweis .kursstufe-symbol,
.kursstufe-geschafft .kursstufe-symbol {
  margin-top: 2px;
}
.kursabschluss {
  margin: 20px 0 8px;
  padding: 16px;
  border: 1px solid var(--linie);
  border-radius: var(--r-karte);
  background: var(--flaeche);
  box-shadow: var(--schatten);
}
.kursabschluss .kursstufe {
  margin-left: 0;
  font-size: 14px;
}
.kursabschluss form {
  margin-top: 10px;
}
.kursabschluss .btn {
  gap: 8px;
}

/* «NOCHMALS» HÄLT IMMER DENSELBEN ABSTAND (V233, gemeldet am 06.10.2026:
   «Der Button "Nochmals" klebt beim erstmaligen Erscheinen am darüber
   liegenden Rahmen»). Der Knopf hatte keinen eigenen Abstand nach oben und
   lieh sich den des Stücks darüber: unter den Spalten einer Zuordnung
   keinen, unter den gelegten Paaren 14 px. Als Block mit eigener Breite
   fällt sein Abstand mit dem des Stücks darüber zusammen, statt sich zu
   ihm zu zählen - wo darüber schon Abstand ist, bleibt es dabei. */
[data-felder] > [data-fokus="nochmals"] {
  display: flex;
  width: fit-content;
  margin-top: 14px;
}

/* BUCHSTABEN ZUM ANTIPPEN (V233): Auf der ersten Stufe wird ein Wort aus
   Kacheln gelegt, statt getippt. Oben die Zeile mit dem Wort, so weit es
   liegt - jeder Buchstabe darin lässt sich wieder wegnehmen -, darunter die
   Kacheln. Gross genug für einen Finger, und eine benutzte Kachel bleibt als
   blasser Platz stehen, damit die anderen nicht springen. Weiss und nicht
   gelb: Gelb ist das Bauen, und die Kacheln stehen auch im Check. */
.wortzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 64px;
  padding: 8px 10px;
  border: 1.5px solid var(--linie-stark);
  border-radius: 14px;
  background: var(--flaeche);
  margin-bottom: 14px;
}
.wortzeichen,
.buchstabe {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  min-width: 44px;
  min-height: 48px;
  padding: 0 8px;
  border-radius: 10px;
  color: var(--ink);
  cursor: pointer;
}
.wortzeichen {
  border: 0;
  border-bottom: 3px solid var(--ink);
  border-radius: 6px 6px 0 0;
  background: transparent;
  min-width: 34px;
}
.wortzeichen.leer {
  border-bottom-style: dotted;
}
.wortplatz {
  display: inline-block;
  width: 30px;
  height: 40px;
  border-bottom: 3px dashed var(--linie-stark);
}
.buchstaben {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.buchstabe {
  border: 1.5px solid var(--linie-stark);
  background: var(--flaeche);
  box-shadow: 0 3px 0 var(--grau-kante);
}
.buchstabe:active:not([disabled]) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--grau-kante);
}
.buchstabe[disabled] {
  opacity: 0.25;
  box-shadow: none;
  cursor: default;
}
.wortzeichen:focus-visible,
.buchstabe:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .buchstabe:active:not([disabled]) {
    transform: none;
  }
}

/* KONFETTI NACH DEM KAUF EINES AUTOMATEN (V235): 28 Schnipsel fallen einmal
   über die Seite und sind dann fort - gezeichnet nur mit dem Stilblatt, die
   Lage je Schnipsel steht in der Vorlage. Die Farben sind die der Spielhalle
   und sagen nichts: kein Grün und kein Ziegelrot, die das Urteil sind
   (R6, R9). Bei reduzierter Bewegung gibt es keines; der Satz und der Ton
   bleiben. */
.konfetti {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 40;
}
.konfetti i {
  position: absolute;
  top: -24px;
  left: var(--x);
  width: 9px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  transform: rotate(var(--r));
  animation: konfetti-fall var(--d) cubic-bezier(0.3, 0.6, 0.6, 1) var(--v) 1 forwards;
}
.konfetti .f0 { background: #f5c93f; }
.konfetti .f1 { background: #2a4fd7; }
.konfetti .f2 { background: #7b5cf0; }
.konfetti .f3 { background: #ff8ac2; }
.konfetti .f4 { background: #26b3c6; }
@keyframes konfetti-fall {
  0% { opacity: 1; transform: translate(0, 0) rotate(var(--r)); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--s), 105vh) rotate(calc(var(--r) + 540deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .konfetti { display: none; }
}

/* DIE DREI BESTEN AM ENDE (V235): eine kurze Liste auf dem Schirm, das eben
   gespielte Spiel hell und mit «eben». Nur die eigenen, auf diesem Gerät -
   keine Liste mit anderen (R7). */
.ende-bestenliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  min-width: min(260px, 100%);
  color: var(--schirm-leise);
  font-size: 15px;
  line-height: 1.4;
}
.ende-bestenliste li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 10px;
  border-radius: 8px;
}
.ende-bestenliste li.jetzt {
  background: rgba(255, 255, 255, 0.12);
  color: #ffe9a6;
  font-weight: 700;
}
.ende-platz {
  min-width: 2ch;
  font-variant-numeric: tabular-nums;
}
.ende-jetzt {
  margin-left: auto;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ==========================================================================
 * DIE ZUSATZÜBUNGEN DER SPRACHEN (V250)
 *
 * Angeordnet am 10.10.2026: «in den Sprachen zusatzübungen anbieten die immer
 * wählbar sind». Im Fach stehen Lernkarten und Zusatzübungen als zwei Wege in
 * einer Hülle (.fachwege), auf der eigenen Seite je Übung eine Karte mit
 * ihren beiden Längen. Kein Schloss und keine Farbe für einen Zustand: Jede
 * Übung ist immer offen.
 * ========================================================================== */
.fachwege {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
}
.fachwege > .kartenfachweg {
  margin: 0;
}
@media (min-width: 640px) {
  .fachwege {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}
.zusatzkopf {
  margin-top: 14px;
}
.zusatzkopf-bild {
  flex: none;
  display: grid;
}
.zusatzliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
@media (min-width: 640px) {
  .zusatzliste {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}
.zusatz {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.zusatz-titel {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
}
.zusatz-satz {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
}
.zusatz-stufen {
  font-size: 13px;
  color: var(--ink-soft);
}
.zusatz-zeiten {
  margin-top: auto;
  padding-top: 8px;
}

/* ==========================================================================
 * DER BESCHEID ZU DEN COINS (V251)
 *
 * Angeordnet am 10.10.2026: «sag immer wenn man coins erhält oder nicht und
 * weshalb». Nach jeder Antwort einer Runde und nach jeder Lernkarte steht ein
 * Satz mit der Münze: was die Handlung an Lernzeit gebracht hat, ob Coins
 * dazukamen, und wenn nichts, warum nicht. Ruhig, in Tinte und ohne Farbe
 * eines Urteils (R6, R9) - nach einer richtigen Antwort wie nach einer
 * falschen.
 * ========================================================================== */
.coinbescheid {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: var(--r-karte);
  background: var(--flaeche);
  border: 1px solid var(--linie, rgba(0, 0, 0, 0.08));
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink);
}
.coinbescheid > img,
.coinbescheid > picture,
.coinbescheid > svg {
  flex: none;
  margin-top: 1px;
}
.frame.quiet .coinbescheid > img {
  filter: grayscale(1);
}

/* ==========================================================================
 * WAS AUF DEM SCHIRM IST (V252)
 *
 * Angeordnet am 10.10.2026: «beschreibe in der Anleitung der spiele, was das
 * spielfeld für knöpfe und anzeigen hat». Unter «So geht …» je Teil des
 * Schirms eine kurze Liste: der Name, wie er dort steht, davor das Zeichen
 * des Knopfs auf dunklem Grund wie auf dem Schirm, und was er tut.
 * ========================================================================== */
.schirmteile-titel {
  margin: 14px 0 6px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.schirmteile {
  display: grid;
  gap: 8px;
  margin: 0;
}
.schirmteile > div {
  display: grid;
  gap: 2px;
}
.schirmteile dt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
}
.schirmteile dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.schirmteil-symbol {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #1d1a33;
  color: #fff;
}
.schirmteil-symbol svg {
  width: 16px;
  height: 16px;
}
.spielregeln + h2.sub {
  margin-top: 20px;
}

/* ===================================================================== */
/* DIE EFFEKTE DER SPIELHALLE (V256): eine Leinwand über dem Spielfeld,   */
/* die nichts fängt, und ein kurzes Beben des Bretts. Die Teilchen        */
/* zeichnet spielhalle-effekt.js; bei reduzierter Bewegung gibt es keine.  */
/* ===================================================================== */
.effektebene {
  position: absolute;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .brett.bebt {
    animation: brett-beben 0.4s ease-out;
  }
}
@keyframes brett-beben {
  0%,
  100% {
    translate: 0 0;
  }
  15% {
    translate: calc(var(--beben, 4px) * -1) 1px;
  }
  35% {
    translate: var(--beben, 4px) -1px;
  }
  55% {
    translate: calc(var(--beben, 4px) * -0.6) 0;
  }
  75% {
    translate: calc(var(--beben, 4px) * 0.35) 0;
  }
}

/* ==========================================================================
   DIE RÜCKSEITE DER MEMORY-KARTEN (V259), angeordnet am 11.10.2026:
   «verbessere das memory beim lernen. hintergrund der karten gleich, egal was
   auf der karte drauf ist. schönere kartenhintergründe».

   JEDE VERDECKTE KARTE SIEHT GLEICH AUS - beim Üben (``aufgabe.js``) und im
   Spezialkurs (``kursmemory.js``). Bis dahin trug die Rückseite die Sorte als
   gedrehte Raute (V104); jetzt verrät sie nichts, auch der Vorlesehilfe nicht.

   WIE EINE SPIELKARTE: Nachtblau mit einem feinen Gitter aus Rauten, ein
   heller Rahmen innen und in der Mitte ein Medaillon mit dem Scampy
   (``memory.kartenruecken``). Kein Grün und kein Ziegelrot (R6, R9); ein
   Memory gibt es nie in der geschlossenen Runde (V104).

   AUFGEDECKT IST JEDE KARTE WEISS, gleich, ob ein Wort, eine Zahl oder ein Bild
   daraufsteht; ein gefundenes Paar tritt mit einem Rand in Kobalt zurück, ohne
   eine andere Fläche zu bekommen.

   Alles in diesem einen Abschnitt, in einem Zug umkehrbar wie V127 und V137.
   ========================================================================== */
:root {
  --karte-ruecken: #23336b;
  --karte-ruecken-tief: #17224d;
  --karte-ruecken-gitter: rgba(255, 255, 255, 0.09);
  --karte-ruecken-rahmen: rgba(255, 246, 228, 0.78);
  --karte-medaillon: #eef2ff;
}
.memory-karte:not(.offen) {
  position: relative;
  border-color: var(--karte-ruecken-tief);
  background-color: var(--karte-ruecken);
  background-image:
    radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, 0.16), transparent 68%),
    repeating-linear-gradient(45deg, var(--karte-ruecken-gitter) 0 1.5px, transparent 1.5px 10px),
    repeating-linear-gradient(-45deg, var(--karte-ruecken-gitter) 0 1.5px, transparent 1.5px 10px);
  /* DER RAHMEN INNEN: zuerst ein Streifen in der Farbe der Karte, der das
     Gitter am Rand verdeckt, dann eine helle Linie - wie bei einer
     Spielkarte. Ein Schatten nach innen nimmt keinen Platz. */
  box-shadow:
    inset 0 0 0 4px var(--karte-ruecken),
    inset 0 0 0 5.5px var(--karte-ruecken-rahmen),
    0 3px 0 var(--karte-ruecken-tief);
}
.memory-karte:not(.offen):hover {
  background-color: #2a3d7e;
}
.memory-karte:not(.offen):focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.kartenruecken {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--karte-medaillon);
  box-shadow:
    0 0 0 2px var(--karte-ruecken-rahmen),
    0 0 0 5px rgba(255, 255, 255, 0.08);
}
.kartenruecken .zeichen {
  width: 30px;
  height: 30px;
}
/* AUFGEDECKT: weiss für jede Karte, mit einer feinen Linie - ein Stück Karton. */
.memory-karte.offen {
  border-color: var(--linie-stark);
  background: var(--plaster-hi);
  box-shadow: 0 3px 0 var(--grau-kante);
}
.memory-karte.gefunden {
  border-color: var(--cobalt);
  background: var(--plaster-hi);
  box-shadow: inset 0 0 0 1.5px var(--cobalt);
}
.memory-karte.daneben {
  border-color: var(--ink);
}
@media (min-width: 640px) {
  .kursmemory .kartenruecken {
    width: 52px;
    height: 52px;
  }
  .kursmemory .kartenruecken .zeichen {
    width: 38px;
    height: 38px;
  }
}


/* ======================================================================
 * V260 - «verschönere und verbessere die komplette Applikation gründlich»
 *
 * Nach einem Durchgang durch jeden Bildschirm auf Telefon und Schreibtisch:
 * was dabei schief, eng oder kaputt aussah. Alles in diesem Abschnitt, in
 * einem Zug umkehrbar wie V127, V137, V210 und V214.
 * ====================================================================== */

/* «COINS» SCROLLTE ÜBER DIE NAVIGATION HINAUS: Die Ansage für Vorlesehilfen
 * in jeder Kachel der Preistafel ist absolut gesetzt, und ohne einen
 * gesetzten Vorfahren hing sie am Fenster statt an ihrer Kachel - 400 px
 * leere Seite unter der Navigation, auf dem Telefon wie auf dem
 * Schreibtisch. Jetzt bleibt sie in ihrer Kachel. */
.preistafel a {
  position: relative;
}

/* DAS HERZ NEBEN DEM NAMEN: Es lag oben rechts über dem Leuchtkasten und
 * deckte auf dem Telefon den letzten Buchstaben des Namens zu. Jetzt steht
 * es in der Zeile des Namens - dasselbe Formular, dieselben 44 px. */
.automat-kopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 44px;
}
.automat-kopf > b {
  min-width: 0;
  line-height: 1.2;
}
.automat-kopf > .herzform {
  position: static;
  flex: none;
}
.automat-kopf .herz {
  border-color: transparent;
  background: transparent;
}
.automat-kopf .herz:hover {
  border-color: var(--linie-stark);
  background: var(--flaeche);
}
.automat-kopf .herz.an {
  border-color: transparent;
}
/* Der Zustand bricht auf dem Telefon in zwei Zeilen um; eine Pille mit zwei
 * Zeilen sah aus wie ein Fehler, ein Schild mit runden Ecken nicht. */
@media (max-width: 639.98px) {
  .automat-zustand {
    justify-content: center;
    border-radius: 12px;
    padding: 5px 10px;
  }
}

/* DAS BAND DER LERNKARTE: Ein Rand von 10 px oben mit runden Ecken zeichnete
 * an jeder Ecke eine Sichel, als läge die Karte schief auf einem blauen
 * Blatt. Jetzt ist das Band ein Streifen im Hintergrund, die Ecken schneiden
 * ihn sauber, und unten ist er gerade. Seine Farbe bleibt die des Regals. */
.karteikarte {
  --band: var(--ton-tief);
  border-top: 1px solid var(--linie);
  background:
    linear-gradient(var(--band), var(--band)) top / 100% 10px no-repeat,
    repeating-linear-gradient(
      to bottom,
      transparent 0 33px,
      rgba(42, 79, 215, 0.07) 33px 34px
    ),
    var(--flaeche);
}
.karteikarte.hinten {
  background:
    linear-gradient(var(--band), var(--band)) top / 100% 10px no-repeat,
    var(--flaeche);
}
.karteikarte.ton-rechnen {
  --band: #d3a43a;
  border-top-color: var(--linie);
}
/* Das Band liegt jetzt im Hintergrund statt im Rand - Ecke und Marke rücken
 * um seine Breite hinunter, damit sie nicht an ihm kleben. */
.karte-ecke {
  top: 20px;
}
.karte-marke {
  top: 22px;
}

/* DIE BEREICHE DER MATHEMATIK AUF DEM TELEFON: Sieben Felder brachen auf
 * vier Zeilen um, bevor der erste Raum kam. Jetzt eine Reihe, die sich
 * seitwärts wischen lässt; die Seite selbst scrollt nicht seitwärts. */
@media (max-width: 639.98px) {
  .bereichswahl {
    margin-left: -16px;
    margin-right: -16px;
  }
  .bereichswahl ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 4px 16px 8px;
    scroll-padding: 0 16px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 14px,
      #000 calc(100% - 24px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 14px,
      #000 calc(100% - 24px),
      transparent 100%
    );
  }
  .bereichswahl ul::-webkit-scrollbar {
    display: none;
  }
  .bereichswahl li {
    flex: none;
  }
  .bereichsfeld {
    white-space: nowrap;
  }
}

/* «KANNST DU DAS SCHON?» IN DREI ZEILEN: Neben zwei Knöpfen mit Zeichen
 * blieben auf dem Telefon 75 px für den Satz. Jetzt steht er dort auf einer
 * eigenen Zeile über den beiden, in voller Breite und in einer. */
@media (max-width: 639.98px) {
  .raumfuss:has(> .raumcheck) {
    flex-wrap: wrap;
  }
  .raumfuss > .raumcheck {
    flex: 1 1 100%;
    min-height: 44px;
    font-size: 13px;
  }
  .raumfuss:has(> .raumcheck) > .raumhilfe.nur-symbol,
  .raumfuss:has(> .raumcheck) > .merkform {
    flex: 1 1 0;
  }
  .raumfuss:has(> .raumcheck) > .merkform > .raumhilfe {
    flex: 1 1 auto;
    width: auto;
  }
}

/* DAS TABLET HOCHKANT: Zwischen 640 und 1024 px stand die Liste des
 * Telefons, jedes Fach eine Zeile über 700 px mit dem Prozent am anderen
 * Ende. Jetzt zwei Spalten; ein Regal mit einem einzigen Fach behält die
 * ganze Breite. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .regal > .towers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  }
}

/* ======================================================================
 * V261 - «mach weiter bis alles fertig ist»: der zweite Teil des Durchgangs
 * aus V260, über das Ende einer Runde, die Spezialkurse und den
 * Adminbereich. Wie V260 in einem Zug umkehrbar.
 * ====================================================================== */

/* DIE STUFE EINER KURSGRUPPE klebte an ihrer Kodierung: Ihr Abstand stand
 * links, wo nichts ist, und rechts, wo die Kodierung folgt, fehlte er. */
.kursstufe {
  margin: 0 6px 6px 0;
}

/* DIE TABELLEN DES ADMINBEREICHS AUF DEM TELEFON. Sieben standen ohne den
 * Rahmen, in dem sie zur Seite scrollen (V135), und schoben die Seite
 * breiter als das Fenster - jetzt steht jede in ihm. Und eine Spalte mit
 * Lesetext brach Buchstabe für Buchstabe um, weil ``word-break`` sie auf
 * einen Buchstaben schmal machen durfte: Im Rahmen ist eine Tabelle mit
 * drei und mehr Spalten mindestens so breit, dass ein Satz eine Zeile
 * bleibt, und scrollt dafür zur Seite. */
.sca-tabelle .sca-klein {
  word-break: normal;
  overflow-wrap: break-word;
}
@media (max-width: 639.98px) {
  .sca-tabellenrahmen > .sca-tabelle:has(thead th:nth-child(3)) {
    min-width: 620px;
  }
}

/* EINE ÜBERSCHRIFT, DIE DEN FOKUS BEKOMMT, TRÄGT KEINEN RING: Am Ende einer
 * Runde setzt das Skript den Fokus auf «Runde fertig.», damit eine
 * Vorlesehilfe dort weiterliest. Ein dicker blauer Rahmen um eine
 * Überschrift, mit der man nichts tun kann, sah aus wie ein Feld. Knöpfe
 * und Felder behalten ihren Ring. */
:is(h1, h2, h3)[tabindex="-1"]:focus-visible {
  outline: none;
}

/* ============================================================== V262 ====
 * DAS DESIGN, PROFESSIONELLER
 *
 * Angeordnet am 11.10.2026: «verschönere die komplette Applikation
 * gründlich, mach das design professioneller». V260 und V261 haben
 * behoben, was nicht stimmte; hier geht es um die Handschrift: ruhigere
 * Kanten, Karten aus einem Stück, eine Seitenleiste, die zeigt statt ruft,
 * und Schrift, die sauber umbricht. Alles in einem Abschnitt, in einem Zug
 * umkehrbar wie V127, V137, V210, V214, V260 und V261. Nichts davon
 * urteilt (R6, R9), die geschlossene Runde bleibt in Iris, und jedes
 * Tippziel bleibt 44 px.
 * ======================================================================== */

/* SCHRIFT: glatt gezeichnet, Überschriften ausgewogen umbrochen und
 * Lesetext ohne einzelnes Wort auf der letzten Zeile. */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1,
h2,
h3 {
  text-wrap: balance;
}
p,
li,
.hinweis {
  text-wrap: pretty;
}

/* DIE BEREICHE DER MATHEMATIK SCHOBEN DIE SEITE ZUR SEITE: In der Reihe zum
 * Wischen (V260) stand die Ansage für Vorlesehilfen jedes Felds absolut -
 * gemessen an der Seite statt an der Reihe -, und auf dem Telefon liess sich
 * das ganze Fach 600 px nach rechts schieben. Die Reihe ist jetzt der Rahmen,
 * an dem sie misst. */
.bereichswahl ul {
  position: relative;
}

/* KNÖPFE: eine feinere Kante. Vier Pixel lasen sich wie Spielzeug; drei
 * tragen das Drücken genauso, und der Knopf sinkt um zwei statt drei. */
.btn {
  box-shadow: 0 3px 0 var(--knopf-kante);
}
.btn:active:not([disabled]) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--knopf-kante);
}

/* EINE ANTWORT AUF DEN ZEIGER, wo es einen gibt: Was man anklicken kann,
 * wird beim Darüberfahren eine Spur heller oder bekommt eine kräftigere
 * Linie und einen höheren Schatten. Keine Bewegung - nur Farbe und Licht.
 * Ein weisser Knopf wird hellgrau; in der geschlossenen Runde und als Wahl
 * ist ein «stiller» Knopf aber gefüllt, und dort wird er nur heller - sonst
 * stünde weisse Schrift auf Weiss. */
@media (hover: hover) and (pointer: fine) {
  .btn,
  .bereichsfeld,
  .gruppenweg,
  .raumhilfe,
  .raumcheck,
  .fachkachel,
  .kartenfachweg,
  .stapel,
  a.room {
    transition:
      background-color 0.15s ease,
      border-color 0.15s ease,
      box-shadow 0.15s ease,
      filter 0.15s ease,
      transform 0.12s ease;
  }
  .btn:not(.still):not(.steuer):not(.ghost):not([disabled]):hover,
  .frame.quiet .btn.still:not([disabled]):hover {
    filter: brightness(1.04) saturate(1.04);
  }
  .btn.still:not([disabled]):not(.gewaehlt):not(.frame.quiet .btn):hover,
  .btn.steuer:hover,
  .bereichsfeld:not([aria-current]):hover,
  a.gruppenweg:hover,
  .raumhilfe.nur-symbol:hover {
    background: #f6f8fc;
    border-color: rgba(22, 35, 59, 0.34);
  }
  .fachkachel:hover,
  .kartenfachweg:hover,
  a.stapel:hover,
  a.room.done:hover {
    border-color: rgba(22, 35, 59, 0.2);
    box-shadow: var(--schatten-hoch);
  }
  a.room.now:hover {
    filter: brightness(1.03);
  }
  /* In einer Wahl aus zwei (``.richtung``) ist der andere Teil durchsichtig
     und ohne Linie - dort wird er nur halb weiss, ohne Rand. Der Wähler
     ist so lang wie der obere, damit er ihn schlägt. */
  .richtung .btn.still:not([disabled]):not(.gewaehlt):not(.frame.quiet .btn):hover {
    background: rgba(255, 255, 255, 0.6);
    border-color: transparent;
  }
  .richtung .btn[aria-current]:hover {
    filter: none;
  }
}

/* DIE SEITENLEISTE ZEIGT, STATT ZU RUFEN: Der offene Punkt war ein gelber
 * Block mit Kante, so laut wie der Knopf, der eine Runde startet. Jetzt
 * eine helle gelbe Fläche mit einem Strich links - man sieht, wo man ist,
 * und das Gelb bleibt das, was etwas baut. */
@media (min-width: 1024px) {
  .frame.mit-nav > .nav a {
    position: relative;
    min-height: 48px;
    padding: 11px 16px;
    font-size: 16px;
  }
  .frame.mit-nav > .nav a:hover {
    background: #f4f6fa;
    color: var(--ink);
  }
  .frame.mit-nav > .nav a.on {
    background: #fdf2cc;
    box-shadow: none;
    color: var(--ink);
  }
  .frame.mit-nav > .nav a.on::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--chalk-tief);
  }
  .frame.mit-nav > .nav a.on .navsymbol {
    color: #8a6400;
  }
}

/* EIN RAUM IST EINE KARTE AUS EINEM STÜCK: Darunter hingen «Kannst du das
 * schon?», die Glühbirne und das Lesezeichen als lose Knöpfe, und unter den
 * Räumen, die zu sind, schwebte «So geht's». Jetzt ist die Fusszeile eine
 * Leiste, die am Raum hängt - dieselbe Linie, dieselbe Rundung, ein
 * Schatten für beide. Die Tür steht auf der Kante dazwischen. */
.raumpaar {
  gap: 0;
  border-radius: var(--r-karte);
  box-shadow: var(--schatten);
}
.raumpaar:has(> .room.locked) {
  box-shadow: none;
}
.raumpaar > .room {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: none;
}
.rooms:has(.room.now.naechster) .raumpaar > .room.now:not(.naechster) {
  box-shadow: inset 6px 0 0 var(--chalk);
}
.raumpaar > .raumfuss {
  padding: 6px;
  border: 1px solid var(--linie);
  border-top: 0;
  border-radius: 0 0 var(--r-karte) var(--r-karte);
  background: #f8fafd;
}
.raumpaar:has(> .room.locked) > .raumfuss {
  background: var(--flaeche);
}
.raumfuss > .raumcheck,
.raumfuss > .raumhilfe.nur-symbol,
.raumfuss > .merkform > .raumhilfe {
  box-shadow: none;
}
.raumfuss > .raumhilfe:not(.nur-symbol) {
  border-radius: 12px;
}

/* DIE LEEREN GRUPPEN EINES STAPELS: gestrichelt sahen sie aus wie etwas,
 * das noch nicht fertig gebaut ist (V137 hat die Strichlinien sonst schon
 * genommen). Jetzt eine blasse, durchgezogene Linie auf grauem Grund. */
.gruppenweg.leer {
  border-style: solid;
  border-color: var(--linie);
  background: var(--plaster);
}

/* DIE REGALE DER FÄCHERWAND: Eine ganze Fläche im Ton des Regals, darauf
 * weisse Karten mit Schatten, war zweimal Gewicht übereinander. Jetzt trägt
 * der Kopf des Regals den Ton, und er läuft nach unten in eine helle Fläche
 * aus - die Karten stehen ruhiger, und welches Regal es ist, sagt der Kopf.
 * Ein Browser ohne color-mix() behält die volle Fläche. */
.wandregal {
  background: var(--ton);
  background: linear-gradient(
    180deg,
    var(--ton) 0,
    color-mix(in srgb, var(--ton) 30%, var(--flaeche)) 180px
  );
  box-shadow: 0 1px 2px rgba(22, 35, 59, 0.04);
}

/* ============================================================== V263 ====
 * DIE REKORDE DER SPIELAUTOMATEN
 *
 * Angeordnet am 11.10.2026: «die rekorde der games sollen angezeigt werden
 * bei den arcade kasten» und als Karte beim Ausweis. Die Rekorde stehen nur
 * im Browser; ``rekorde.js`` schreibt sie hin. Keine Farbe des Urteils, kein
 * Pokal - ein Rekord ist eine Zahl aus einem Spiel (R6, R9).
 * ======================================================================== */

/* In der Halle: ein kleines Schild unter dem Namen des Automaten - oben
 * klein, wofür es steht, darunter der Rekord auf einer Zeile. */
.automat-rekord {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  max-width: 100%;
  padding: 5px 12px 6px;
  border-radius: 12px;
  background: var(--sky-low);
  color: var(--cobalt-tief);
  line-height: 1.25;
}
.automat-rekord[hidden] {
  display: none;
}
.automat-rekord-wort {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.85;
}
.automat-rekord-wort svg {
  flex: none;
}
.automat-rekord b {
  font-size: 13.5px;
  font-weight: 800;
}

/* Auf der Seite eines Automaten: die drei besten als kleine Liste. */
.automat-rekorde {
  margin: 4px 0 18px;
}
.automat-rekorde[hidden] {
  display: none;
}
.rekordliste {
  margin: 8px 0 8px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.rekordliste li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--linie);
  border-radius: 12px;
  background: var(--flaeche);
  font-size: 14.5px;
}
.rekordliste li:first-child {
  border-color: rgba(42, 79, 215, 0.3);
  background: var(--sky-high);
  font-weight: 700;
}
.rekord-platz {
  min-width: 1.6em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* Auf dem Ausweis: alle Rekorde und der Knopf zur Karte. */
.rekordkarte {
  margin-top: 22px;
}
.rekordkarte-titel {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rekordtafel {
  margin: 12px 0 14px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.rekordtafel[hidden],
.rekordform[hidden] {
  display: none;
}
.rekordtafel li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--plaster);
}
.rekordtafel b {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 15.5px;
  color: var(--ink);
}
.rekordtafel span {
  color: var(--ink-soft);
  font-size: 13.5px;
}
.rekordform .btn {
  gap: 8px;
}
.rekordform .hinweis {
  margin-top: 8px;
}

/* ===================================================================
   DER KURS KI (V266) - Bilder, die sich bewegen.

   Angeordnet am 12.10.2026: «erkläre ml und ki und llm und zeige wie es
   genau funktioniert auch mit animationen». Die Bilder der Erklärungen
   (``app/web/erklaerbild.py``) tragen Klassen mit ``ki-`` vorn; bewegt
   wird nur hier und nur bei ``prefers-reduced-motion: no-preference``
   (``docs/03`` Abschnitt 3). Ohne Bewegung steht jedes Bild in seinem
   Endzustand da: Pulse sind unsichtbar, die Kugel liegt im Tal, die Linie
   trennt, alles ist gezeichnet.

   - ``ki-puls``: ein Signal läuft eine Verbindung entlang. Jede Schicht
     später als die davor (``animation-delay`` am Teil), alle fünf Sekunden.
   - ``ki-glimm``: ein Neuron leuchtet kurz auf, wenn das Signal ankommt.
   - ``ki-folge``: eine Folge in zehn Takten zu je 0,8 Sekunden - ein Teil
     ist in den Takten sichtbar, in denen sein ``--o0`` bis ``--o9`` 1 ist.
     So springt die Kugel Schritt für Schritt bergab, und eine Linie sucht
     Versuch für Versuch ihren Platz.
   - ``ki-auf``, ``ki-wachsen``: einmal, wenn das Bild erscheint - auch
     wenn sich ein Schritt mit «Weiter» öffnet.
   - ``ki-zeichnen``: ein Bogen zeichnet sich, wie die Aufmerksamkeit
     von Wort zu Wort geht.
   - ``ki-zeile``, ``ki-spalte``: ein Fenster gleitet über ein Bild aus
     Pixeln, Zeile für Zeile.

   Nichts davon urteilt: kein Rot und kein Grün (R6, R9), und keine
   Bewegung antwortet auf eine Antwort.
   =================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .ki-puls {
    animation: ki-puls 5s linear infinite;
  }
  .ki-glimm {
    animation: ki-glimm 5s ease-out infinite;
  }
  .ki-folge {
    animation: ki-folge 8s linear infinite;
  }
  .ki-auf {
    animation: ki-auf 0.45s ease-out both;
  }
  .ki-wachsen {
    transform-box: fill-box;
    transform-origin: left center;
    animation: ki-wachsen 0.7s ease-out both;
  }
  .ki-zeichnen {
    stroke-dasharray: 100;
    animation: ki-zeichnen 5s ease-in-out infinite backwards;
  }
  .ki-zeile {
    animation: ki-zeile var(--t) steps(var(--r)) infinite;
  }
  .ki-spalte {
    animation: ki-spalte calc(var(--t) / var(--r)) steps(var(--c)) infinite;
  }
}
@keyframes ki-puls {
  0% {
    stroke-dashoffset: 12;
    opacity: 1;
  }
  16% {
    stroke-dashoffset: -100;
    opacity: 1;
  }
  16.1%,
  100% {
    stroke-dashoffset: -100;
    opacity: 0;
  }
}
@keyframes ki-glimm {
  0% {
    opacity: 0;
  }
  4% {
    opacity: 0.9;
  }
  22%,
  100% {
    opacity: 0;
  }
}
@keyframes ki-folge {
  0%,
  9% {
    opacity: var(--o0, 0);
  }
  10%,
  19% {
    opacity: var(--o1, 0);
  }
  20%,
  29% {
    opacity: var(--o2, 0);
  }
  30%,
  39% {
    opacity: var(--o3, 0);
  }
  40%,
  49% {
    opacity: var(--o4, 0);
  }
  50%,
  59% {
    opacity: var(--o5, 0);
  }
  60%,
  69% {
    opacity: var(--o6, 0);
  }
  70%,
  79% {
    opacity: var(--o7, 0);
  }
  80%,
  89% {
    opacity: var(--o8, 0);
  }
  90%,
  100% {
    opacity: var(--o9, 0);
  }
}
@keyframes ki-auf {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes ki-wachsen {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes ki-zeichnen {
  0% {
    stroke-dashoffset: 100;
    opacity: 1;
  }
  30%,
  85% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
@keyframes ki-zeile {
  to {
    transform: translateY(var(--dy));
  }
}
@keyframes ki-spalte {
  to {
    transform: translateX(var(--dx));
  }
}

/* ===================================================================
   DIE SIMULATIONEN DES KURSES KI (V266) - Regler, und das Bild folgt.

   Angeordnet am 12.10.2026: «baue im ki spezialkurs auch Simulationen wo
   man Parameter verändern kann und sieht was sich ändert.» Eine Karte am
   Ende einer Erklärung: das Bild, darunter in einem Satz, was es zeigt,
   die Regler und die Knöpfe. Gezeichnet von ``ki-simulation.js`` in den
   Farben der Erklärungen; die Teile tragen Klassen mit ``ki-s-`` vorn.
   Nichts bewegt sich von selbst - das Bild antwortet auf einen Regler.
   Ein positives Gewicht ist blau, ein negatives gelb, ein Punkt auf der
   falschen Seite trägt einen Ring in Gelb: kein Rot und kein Grün (R6, R9).
   =================================================================== */
.esim h2 {
  margin-bottom: 6px;
}
.esim-ohne {
  margin: 8px 0 0;
  color: var(--ink-soft);
}
.ki-sim {
  margin-top: 10px;
}
.ki-sim-bild {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
  justify-content: center;
  padding: 10px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--linie);
  overflow-x: auto;
}
.ki-sim-eigen:empty {
  display: none;
}
.ki-sim-svg {
  flex: 1 1 260px;
  min-width: 0;
}
.ki-s {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  font-family: "Atkinson Hyperlegible", sans-serif;
}
.ki-sim-ergebnis {
  min-height: 2.6em;
  margin: 10px 0 4px;
  font-size: 15px;
  line-height: 1.45;
}
.ki-sim-regler {
  display: grid;
  gap: 4px 18px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin: 6px 0 4px;
}
.ki-regler {
  display: flex;
  flex-direction: column;
  min-height: 44px;
  font-size: 14px;
}
.ki-regler-kopf {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.ki-regler-name {
  color: var(--ink-soft);
}
.ki-regler-wert {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ki-regler input[type="range"] {
  width: 100%;
  min-height: 32px;
  margin: 0;
  accent-color: var(--cobalt);
}
.ki-wahl select {
  min-height: 40px;
  margin-top: 2px;
  padding: 0 10px;
  border: 1px solid var(--linie);
  border-radius: 10px;
  background: #fff;
  font: inherit;
}
.ki-sim-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.esim-auftraege-titel {
  margin: 16px 0 6px;
  font-size: 16px;
}
.esim-auftraege {
  margin: 0;
  padding-left: 20px;
  line-height: 1.5;
}
.esim-auftraege li + li {
  margin-top: 4px;
}

/* Die Teile des Bildes. */
.ki-s-text {
  fill: var(--ink);
  font-size: 14px;
}
.ki-s-klein {
  fill: var(--ink-soft);
  font-size: 12.5px;
}
.ki-s-gross {
  fill: var(--ink);
  font-size: 19px;
  font-weight: 700;
}
.ki-s-hell {
  fill: #fff;
}
.ki-s-achsname {
  fill: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
}
.ki-s-gitter line {
  stroke: var(--ebild-gitter);
  stroke-width: 1;
}
.ki-s-achse {
  stroke: var(--ink);
  stroke-width: 1.6;
}
.ki-s-kasten {
  fill: var(--ebild-grau-hell);
  stroke: var(--ink);
  stroke-width: 1.4;
}
.ki-s-pos {
  stroke: var(--cobalt);
}
.ki-s-neg {
  stroke: var(--ebild-gelb);
}
.ki-s-pos-text {
  fill: var(--cobalt);
}
.ki-s-neg-text {
  fill: var(--ebild-gelb);
}
.ki-s-gewicht {
  font-size: 13.5px;
  font-weight: 700;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 4px;
}
.ki-s-summe {
  fill: var(--ebild-blau-hell);
  stroke: var(--ink);
  stroke-width: 1.6;
}
.ki-s-ausgabe {
  fill: var(--cobalt);
  stroke: var(--ink);
  stroke-width: 1.6;
}
.ki-s-pfeil {
  stroke: var(--ink);
  stroke-width: 1.8;
}
.ki-s-kurve {
  fill: none;
  stroke: var(--cobalt);
  stroke-width: 2.4;
}
.ki-s-kurve-gross {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.4;
}
.ki-s-punkt {
  fill: var(--ink);
}
.ki-s-punkt-neu {
  fill: var(--cobalt);
}
.ki-s-spur {
  fill: none;
  stroke: var(--cobalt);
  stroke-width: 1.6;
  stroke-dasharray: 5 4;
}
.ki-s-kugel {
  fill: var(--ebild-gelb);
  stroke: var(--ink);
  stroke-width: 1.6;
}
.ki-s-linie {
  stroke: var(--cobalt);
  stroke-width: 3;
  stroke-linecap: round;
}
.ki-s-rest {
  stroke: var(--ebild-gelb);
  stroke-width: 2;
  stroke-dasharray: 4 3;
}
.ki-s-quadrat {
  fill: var(--ebild-gelb-hell);
  fill-opacity: 0.7;
  stroke: var(--ebild-gelb);
  stroke-width: 1;
}
.ki-s-seite {
  fill: var(--ebild-blau-hell);
  fill-opacity: 0.55;
}
.ki-s-gruppe-a {
  fill: var(--ebild-blau-hell);
  stroke: var(--cobalt);
  stroke-width: 2;
}
.ki-s-gruppe-b {
  fill: var(--ebild-gelb-hell);
  stroke: var(--ebild-gelb);
  stroke-width: 2;
}
.ki-s-ring {
  fill: none;
  stroke: var(--ebild-gelb);
  stroke-width: 2.4;
}
.ki-s-satz {
  fill: var(--ink);
  font-size: 16px;
}
.ki-s-fett {
  font-weight: 700;
}
.ki-s-luecke {
  fill: var(--ebild-gelb-hell);
  stroke: var(--ink);
  stroke-width: 1.4;
  stroke-dasharray: 5 4;
}
.ki-s-wort {
  fill: var(--ink);
  font-size: 15px;
}
.ki-s-balken-leer {
  fill: var(--ebild-grau-hell);
}
.ki-s-balken {
  fill: var(--ebild-blau-hell);
  stroke: var(--cobalt);
  stroke-width: 1.5;
}
.ki-s-zelle-pos {
  fill: var(--cobalt);
  stroke: #fff;
}
.ki-s-zelle-neg {
  fill: var(--ebild-gelb);
  stroke: #fff;
}
.ki-s-zelle-null {
  fill: var(--ebild-grau-hell);
  stroke: #fff;
}
.ki-s-zellwert {
  fill: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

/* Das Bild aus Pixeln zum Antippen: ein Knopf je Feld, 44 px auf dem Telefon. */
.ki-s-raster-titel {
  margin: 0 0 6px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.ki-s-raster {
  display: grid;
  grid-template-columns: repeat(var(--spalten, 7), 34px);
  gap: 2px;
}
.ki-s-pixel {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--linie);
  border-radius: 4px;
  background: #fff;
  color: var(--ink-soft);
  font: 700 12px/1 "Atkinson Hyperlegible", sans-serif;
  cursor: pointer;
}
.ki-s-pixel[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
}
.ki-s-pixel:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 1px;
}
@media (pointer: coarse) {
  .ki-s-raster {
    grid-template-columns: repeat(var(--spalten, 7), minmax(30px, 40px));
  }
  .ki-s-pixel {
    width: auto;
    height: auto;
    aspect-ratio: 1;
  }
}
/* Auf dem Telefon steht das Neuron bei gut der Hälfte seiner Breite da, und
   seine Beschriftungen wären kaum sieben Pixel hoch - also grösser
   gesetzt; die anderen Bilder sind schmaler und kommen mit wenig mehr aus. */
@media (max-width: 600px) {
  .ki-sim-neuron .ki-s-klein {
    font-size: 19px;
  }
  .ki-sim-neuron .ki-s-gross {
    font-size: 25px;
  }
  .ki-sim-neuron .ki-s-gewicht {
    font-size: 18px;
  }
  .ki-sim-gefaelle .ki-s-klein,
  .ki-sim-trennen .ki-s-klein,
  .ki-sim-gerade .ki-s-klein {
    font-size: 14.5px;
  }
}

/* ======================================================================
   SPIELERISCHER (V269), angeordnet am 12.10.2026: «finde heraus wie [ein
   verbreitetes Lernprodukt] das lernen interessant macht und lass dich davon
   inspirieren. es ist spielerischer». Genommen sind Ideen, die vielen
   Lernprodukten gemeinsam sind und keinem gehören - kleine Ziele für den
   Tag, ein Ende, das sich wie ein Ende anfühlt, ein Fortschritt, der lebt.
   ÜBERNOMMEN IST NICHTS: keine Farbe, kein Bild, kein Bauteil und keine
   Anordnung; gebaut aus den eigenen Marken und Fluent Emoji (V136).
   NUR FÜR DAS TUN (R6, R9): Nichts hier unterscheidet richtig und falsch.
   Ein Abschnitt, in einem Zug umkehrbar wie V127, V137, V210 und V260.
   ====================================================================== */

/* Die Ziele für heute in der Lernwerkstatt. */
.tagesziele {
  margin: 4px 0 22px;
  padding: 14px 16px 16px;
  border: 1px solid var(--linie);
  border-radius: 20px;
  background: var(--flaeche);
  box-shadow: 0 3px 0 var(--grau-kante);
}
.tagesziele.alle {
  border-color: rgba(42, 79, 215, 0.45);
  box-shadow: 0 3px 0 rgba(42, 79, 215, 0.35);
}
.ziele-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ziele-kopf .sub {
  margin: 0;
}
.ziele-kopf .hinweis {
  margin: 2px 0 0;
}
.ziele-rakete {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: #eef1fd;
}
.ziele-liste {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.tagesziel {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px 12px 8px 8px;
  border-radius: 16px;
  background: #f4f6fa;
}
.ziel-bild {
  display: grid;
  place-items: center;
}
.ziel-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.ziel-text b {
  font-size: 15px;
  line-height: 1.25;
}
.ziel-text small {
  font-size: 12.5px;
  color: var(--ink-soft);
}
.ziel-balken {
  display: block;
  height: 10px;
  margin-top: 5px;
  border-radius: 99px;
  background: var(--track);
  overflow: hidden;
}
.ziel-balken i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--chalk);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.1), inset 0 2px 0 rgba(255, 255, 255, 0.45);
}
.ziel-stand {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-soft);
  min-width: 40px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Geschafft: ein Haken in Kobalt, nicht in Grün - Grün ist das Urteil über
   eine Antwort (R9). Der Balken wird kobaltblau voll. */
.tagesziel.erreicht {
  background: #eef1fd;
}
.tagesziel.erreicht .ziel-balken i {
  background: var(--cobalt);
}
.tagesziel.erreicht .ziel-stand {
  display: grid;
  place-items: center;
  justify-self: end;
  width: 34px;
  min-width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cobalt);
  color: #fff;
}
@media (min-width: 1024px) {
  .ziele-liste {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (prefers-reduced-motion: no-preference) {
  .ziel-balken i {
    animation: ziel-fuellen 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) 0.15s backwards;
  }
  .tagesziele.feiert .ziele-rakete img {
    animation: rakete-start 1.6s cubic-bezier(0.5, 0, 0.3, 1) 0.2s 1;
  }
}
@keyframes ziel-fuellen {
  from { width: 0; }
}
@keyframes rakete-start {
  0% { transform: translate(0, 0) rotate(0); }
  12% { transform: translate(-1px, 2px) rotate(-4deg); }
  24% { transform: translate(1px, 1px) rotate(4deg); }
  55% { transform: translate(26px, -60px) rotate(8deg); opacity: 0; }
  56% { transform: translate(-26px, 50px); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}

/* Die Kacheln am Ende einer Übung: Aufgaben, Tage am Stück, Ziele heute. */
.ende-kacheln {
  list-style: none;
  margin: 14px 0 8px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.ende-kachel {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 10px 4px 9px;
  border: 1px solid var(--linie);
  border-radius: 16px;
  background: var(--flaeche);
  box-shadow: 0 3px 0 var(--grau-kante);
  text-align: center;
}
.ende-kachel b {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 26px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.ende-kachel small {
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--ink-soft);
}
/* Diese Runde hat den Tag geöffnet: Die Flamme leuchtet, in Orange - eine
   Farbe, die im Produkt kein Urteil ist. */
.ende-kachel-serie.neu {
  border-color: rgba(232, 128, 30, 0.55);
  background: #fff5e8;
  box-shadow: 0 3px 0 rgba(232, 128, 30, 0.35);
}
[data-ende] .ende-serie-neu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 2px 0 12px;
  font-weight: 700;
  color: #8a4a06;
}
[data-ende] .ende-serie-neu[hidden] {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .ende-kachel {
    animation: kachel-ein 0.45s cubic-bezier(0.3, 1.4, 0.5, 1) backwards;
  }
  .ende-kachel:nth-child(2) { animation-delay: 0.12s; }
  .ende-kachel:nth-child(3) { animation-delay: 0.24s; }
  .ende-kachel-serie.neu .ende-kachel-bild img {
    animation: flamme 0.7s ease-in-out 0.5s 3;
  }
  /* Der Scampy dreht sich einmal, wenn die Runde fertig ist - für das
     Fertigmachen, gleich, wie sie lief (``runde_fertig``, R6). */
  [data-ende]:not([hidden]) .ende-zeichen svg {
    animation: ende-wirbel 0.9s cubic-bezier(0.4, 0, 0.3, 1) 0.1s 1;
  }
  /* Ein Punkt der Reihe ploppt, wenn seine Aufgabe beantwortet ist - jede
     gleich, richtig wie falsch. */
  .dots i.ok,
  .dots i.fehl,
  .dots i.getan {
    animation: punkt-plopp 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
  }
}
@keyframes kachel-ein {
  from { opacity: 0; transform: translateY(10px) scale(0.92); }
}
@keyframes flamme {
  0%, 100% { transform: scale(1) rotate(0); }
  50% { transform: scale(1.18) rotate(-6deg); }
}
@keyframes ende-wirbel {
  0% { transform: rotate(0) scale(1); }
  45% { transform: rotate(200deg) scale(1.12); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes punkt-plopp {
  0% { transform: scaleY(1); }
  45% { transform: scaleY(1.6); }
  100% { transform: scaleY(1); }
}

/* ======================================================================
   DREI SPIELERISCHE LERNMETHODEN (V269), angeordnet am 12.10.2026: «nicht
   das system, die einzelnen lernmethoden. eher spielerisch. inspirieren
   lassen, nicht Kopieren». Paare antippen, die Wortbank und das Gespräch -
   Ideen, die vielen Sprach-Apps gemeinsam sind; gestaltet aus den eigenen
   Marken: Kacheln mit einer Kante in Tinte, eine Linie wie im Schulheft,
   der Scampy in der Blase. Kein Rot und kein Grün für einen Zug (R6, R9);
   was gewählt ist, ist Kobalt wie jede Wahl (V214).
   ====================================================================== */

/* Paare antippen: zwei Spalten, alles offen. */
.paarlauf-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.paarlauf-kopf .hinweis {
  margin: 0;
}
.paarlauf-zaehler {
  flex: none;
  padding: 3px 10px;
  border-radius: 99px;
  background: #eef1fd;
  color: var(--cobalt-tief);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.paarlauf {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.paarlauf-spalte {
  display: grid;
  align-content: start;
  gap: 9px;
}
.paarlauf-titel {
  margin: 0 0 -2px;
  font-size: 12.5px;
  color: var(--ink-soft);
  text-align: center;
}
.paarkarte {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 54px;
  padding: 8px 10px;
  border: 1.5px solid var(--linie);
  border-radius: 14px;
  background: var(--flaeche);
  box-shadow: 0 4px 0 var(--grau-kante);
  color: var(--ink);
  font: inherit;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.paarkarte:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--grau-kante);
}
.paarkarte img,
.paarkarte svg {
  max-width: 40px;
  max-height: 40px;
}
.paarkarte.gewaehlt {
  border-color: var(--cobalt);
  background: #eef1fd;
  box-shadow: 0 4px 0 rgba(42, 79, 215, 0.45);
  color: var(--cobalt-tief);
}
/* Gefunden: blass und still, damit die Spalten nicht springen. */
.paarkarte.gefunden {
  opacity: 0.32;
  box-shadow: none;
  border-style: dashed;
  cursor: default;
}
.paarkarte:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}

/* Die Wortbank: eine Linie wie im Heft, darunter die Kacheln. */
.wortbank-linie {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  min-height: 108px;
  margin: 10px 0 14px;
  padding: 8px 2px 14px;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 49px,
    var(--track) 49px 51px
  );
}
.wortbank {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 4px;
}
.wortkachel {
  min-height: 44px;
  padding: 8px 13px;
  border: 1.5px solid var(--linie);
  border-radius: 12px;
  background: var(--flaeche);
  box-shadow: 0 4px 0 var(--grau-kante);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.wortkachel:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--grau-kante);
}
.wortkachel:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.wortkachel.gelegt {
  border-color: rgba(42, 79, 215, 0.35);
  box-shadow: 0 4px 0 rgba(42, 79, 215, 0.3);
}
/* Wo eine Kachel lag, bleibt ihr Umriss - die Bank springt nicht. */
.wortkachel.leer {
  border-style: dashed;
  background: var(--track);
  box-shadow: none;
  color: transparent;
  cursor: default;
}

/* Das Gespräch: der Scampy fragt, die Antwort steht gegenüber. */
.gespraech {
  display: grid;
  gap: 10px;
  margin: 4px 0 14px;
}
.gespraech-zeile {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.gespraech-zeile.antwort {
  justify-content: flex-end;
}
.gespraech-wer {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
}
.gespraech-blase {
  position: relative;
  max-width: 78%;
  margin: 0;
  padding: 11px 15px;
  border: 1.5px solid var(--linie);
  border-radius: 18px 18px 18px 6px;
  background: var(--flaeche);
  box-shadow: 0 3px 0 var(--grau-kante);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.gespraech-zeile.antwort .gespraech-blase {
  border-radius: 18px 18px 6px 18px;
}
.gespraech-blase.leer {
  min-width: 70px;
  border-style: dashed;
  background: transparent;
  box-shadow: none;
  color: var(--ink-soft);
  text-align: center;
  letter-spacing: 0.2em;
}
.gespraech-blase.gewaehlt {
  border-color: var(--cobalt);
  background: #eef1fd;
  color: var(--cobalt-tief);
}
.wahl.antworten .btn {
  border-radius: 18px;
}

@media (prefers-reduced-motion: no-preference) {
  .paarkarte.neu {
    animation: paar-plopp 0.45s cubic-bezier(0.3, 1.5, 0.5, 1);
  }
  .paarkarte.wackelt {
    animation: paar-wackeln 0.42s ease-in-out;
  }
  .wortkachel.gelegt.neu {
    animation: kachel-springt 0.32s cubic-bezier(0.3, 1.5, 0.5, 1);
  }
  .gespraech-zeile.frage .gespraech-blase {
    animation: blase-auf 0.35s cubic-bezier(0.3, 1.4, 0.5, 1) backwards;
  }
  .gespraech-blase.gewaehlt {
    animation: blase-auf 0.3s cubic-bezier(0.3, 1.4, 0.5, 1);
  }
}
@keyframes paar-plopp {
  0% { transform: scale(1); opacity: 1; }
  40% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes paar-wackeln {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px) rotate(-1.5deg); }
  45% { transform: translateX(5px) rotate(1.5deg); }
  70% { transform: translateX(-3px); }
}
@keyframes kachel-springt {
  from { transform: translateY(26px) scale(0.85); opacity: 0.4; }
}
@keyframes blase-auf {
  from { transform: scale(0.8) translateY(6px); opacity: 0; }
}

/* ======================================================================
   NOCH MEHR IN DIESE RICHTUNG (V271): die Lücke im Satz, «Passt das?»,
   Bilder statt Zeichen bei der Bildwahl. Gestaltet aus den eigenen Marken;
   was gewählt ist, ist Kobalt, nie Grün oder Rot (R6, R9).
   ====================================================================== */

/* Die Lücke im Satz: ein Feld, in dem gleich steht, was gewählt ist. */
.lueckenfeld {
  display: inline-block;
  min-width: 3.2em;
  margin: 0 0.15em;
  padding: 0 0.35em;
  border-bottom: 3px dashed rgba(42, 79, 215, 0.55);
  border-radius: 8px 8px 0 0;
  line-height: 1.25;
  text-align: center;
  white-space: pre;
}
.lueckenfeld.voll {
  border-bottom-style: solid;
  border-bottom-color: var(--cobalt);
  background: #eef1fd;
  color: var(--cobalt-tief);
}

/* Passt das? Das Bild gross, das Wort darunter, zwei Knöpfe nebeneinander. */
.passt-karte {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin: 2px auto 14px;
  padding: 14px 18px 16px;
  max-width: 280px;
  border: 1.5px solid var(--linie);
  border-radius: 22px;
  background: var(--flaeche);
  box-shadow: 0 4px 0 var(--grau-kante);
}
.passt-bildfeld {
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  border-radius: 20px;
  background: #f1f4fa;
}
.passt-bildfeld .passt-bild {
  width: 104px;
  height: 104px;
}
.passt-wort {
  margin: 4px 0 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}
.wahl.passt-wahl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.wahl.passt-wahl .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  font-size: 16px;
}
.passt-zeichen {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Bilder statt Zeichen bei der Bildwahl. */
.wahl.bildwahl.mit-bildern .btn {
  padding: 8px;
}
.wahl.bildwahl.mit-bildern .wahlbild {
  width: 64px;
  height: 64px;
}

@media (prefers-reduced-motion: no-preference) {
  .lueckenfeld.voll {
    animation: luecke-voll 0.3s cubic-bezier(0.3, 1.5, 0.5, 1);
  }
  .passt-karte {
    animation: blase-auf 0.35s cubic-bezier(0.3, 1.4, 0.5, 1) backwards;
  }
}
@keyframes luecke-voll {
  0% { transform: scale(0.85); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ======================================================================
   NOCH MEHR (V272): das Gespräch zum Hören - in der Blase des Scampy ein
   Lautsprecher statt der Frage.
   ====================================================================== */
.gespraech-blase.hoerblase {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  color: var(--cobalt-tief);
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}
.gespraech-blase.hoerblase svg {
  width: 24px;
  height: 24px;
}
.gespraech-blase.hoerblase:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}

/* ======================================================================
   UND NOCH MEHR (V273): das falsche Wort antippen, «Passt die
   Übersetzung?» und «Passt das?» zum Hören. Was gewählt ist, ist Kobalt.
   ====================================================================== */
.fehlersatz {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 6px;
}
.fehlerwort {
  /* 44 px auch in der Breite (V410): «Il», «y» und «a» standen 35 bis 39 px breit. */
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1.5px solid var(--linie);
  border-radius: 12px;
  background: var(--flaeche);
  box-shadow: 0 3px 0 var(--grau-kante);
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}
.fehlerwort.gewaehlt {
  border-color: var(--cobalt);
  background: #eef1fd;
  box-shadow: 0 3px 0 rgba(42, 79, 215, 0.45);
  color: var(--cobalt-tief);
  text-decoration: underline wavy rgba(42, 79, 215, 0.6);
  text-underline-offset: 5px;
}
.fehlerwort:focus-visible,
.passt-hoeren:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.passt-wort.satz {
  font-size: 20px;
  line-height: 1.3;
}
.passt-deutsch {
  margin: 4px 0 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: #f1f4fa;
  color: var(--ink-soft);
  font-size: 16px;
  text-align: center;
}
.passt-hoeren {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-top: 6px;
  border: 1.5px solid var(--linie);
  border-radius: 50%;
  background: #eef1fd;
  box-shadow: 0 3px 0 rgba(42, 79, 215, 0.35);
  color: var(--cobalt-tief);
  cursor: pointer;
}
.passt-hoeren svg {
  width: 30px;
  height: 30px;
}
@media (prefers-reduced-motion: no-preference) {
  .fehlerwort.gewaehlt {
    animation: luecke-voll 0.3s cubic-bezier(0.3, 1.5, 0.5, 1);
  }
}

/* ======================================================================
   ANTIPPEN STATT TIPPEN (V274): die Marke am Zahlenstrahl und alle Karten,
   die passen. Was gewählt ist, ist Kobalt, wie jede Wahl; nichts urteilt.
   ====================================================================== */
.strahl-tippen {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--marken, 7), minmax(0, 1fr));
  margin: 14px 0 6px;
}
/* Der Strahl selbst: von der Mitte der ersten bis zur Mitte der letzten
   Marke, mit einer Spitze nach rechts. */
.strahl-tippen::before {
  content: "";
  position: absolute;
  top: 37px;
  left: calc(100% / var(--marken, 7) / 2);
  right: calc(100% / var(--marken, 7) / 2 - 14px);
  height: 3px;
  border-radius: 2px;
  background: var(--ink);
}
.strahl-tippen::after {
  content: "";
  position: absolute;
  top: 32px;
  right: calc(100% / var(--marken, 7) / 2 - 16px);
  border: 6.5px solid transparent;
  border-left: 10px solid var(--ink);
  border-right: 0;
}
.strahl-marke {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 84px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.strahl-nadel {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: transparent;
}
.strahl-strich {
  width: 3px;
  height: 22px;
  margin-top: 4px;
  border-radius: 2px;
  background: var(--ink);
}
.strahl-marke:not(.beschriftet) .strahl-strich {
  height: 16px;
  margin-top: 7px;
  background: var(--ink-soft);
}
.strahl-zahl {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}
.strahl-marke:hover .strahl-nadel {
  background: rgba(42, 79, 215, 0.18);
}
.strahl-marke.gewaehlt .strahl-nadel {
  background: var(--cobalt);
}
.strahl-marke.gewaehlt .strahl-strich {
  background: var(--cobalt);
}
.strahl-marke:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}

.alle-ereignis {
  margin: 6px 0 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: #f1f4fa;
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  text-align: center;
}
.alle-karten {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 4px;
}
.alle-karten.mittel {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.alle-karten.lang {
  grid-template-columns: 1fr;
}
.strahl-tippen:focus,
.alle-karten:focus {
  outline: none;
}
.alle-karte {
  min-height: 52px;
  padding: 8px 6px;
  border: 1.5px solid var(--linie);
  border-radius: 14px;
  background: var(--flaeche);
  box-shadow: 0 3px 0 var(--grau-kante);
  color: var(--ink);
  font: inherit;
  font-size: 19px;
  font-weight: 700;
  hyphens: auto;
  cursor: pointer;
}
.alle-karten.lang .alle-karte {
  padding: 10px 14px;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
}
.alle-karte.gewaehlt {
  border-color: var(--cobalt);
  background: #eef1fd;
  box-shadow: 0 3px 0 rgba(42, 79, 215, 0.45);
  color: var(--cobalt-tief);
}
.alle-karte:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.alle-zahl {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
}
@keyframes strahl-nadel {
  0% { transform: translateY(-10px) rotate(-45deg); opacity: 0; }
  100% { transform: rotate(-45deg); opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .strahl-marke.gewaehlt .strahl-nadel {
    animation: strahl-nadel 0.25s cubic-bezier(0.3, 1.5, 0.5, 1);
  }
  .alle-karte.gewaehlt {
    animation: luecke-voll 0.3s cubic-bezier(0.3, 1.5, 0.5, 1);
  }
}

/* ======================================================================
   FÜLLEN UND ENTSCHEIDEN (V275): die Wertetabelle mit Feldern mitten in
   der Tabelle, und vier Aussagen mit «Stimmt» und «Stimmt nicht». Was
   gewählt ist, ist Kobalt, wie jede Wahl; nichts urteilt, und beide Knöpfe
   einer Zeile wiegen gleich (R6, R9).
   ====================================================================== */
.werte-rahmen {
  max-width: 100%;
  margin: 10px 0 4px;
  overflow-x: auto;
}
.werte-tabelle {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1.5px solid var(--linie);
  border-radius: 14px;
  overflow: hidden;
  background: var(--flaeche);
  table-layout: fixed;
}
.werte-tabelle th,
.werte-tabelle td {
  height: 56px;
  padding: 4px 3px;
  border-right: 1px solid var(--linie);
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.werte-tabelle tr:first-child th,
.werte-tabelle tr:first-child td {
  border-bottom: 1.5px solid var(--linie);
}
.werte-tabelle th {
  width: 27%;
  padding: 4px 8px;
  background: #f1f4fa;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  hyphens: auto;
  overflow-wrap: break-word;
}
.werte-tabelle td:last-child {
  border-right: 0;
}
.werte-tabelle td.luecke-feld {
  padding: 4px;
}
.werte-feld {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 2px;
  border: 1.5px dashed var(--ink-soft);
  border-radius: 10px;
  background: #fffdf5;
  color: var(--ink);
  font: inherit;
  font-size: 19px;
  font-weight: 700;
  text-align: center;
}
.werte-feld:focus {
  border: 2px solid var(--cobalt);
  outline: none;
  background: #fff;
}
.frame.quiet .werte-feld {
  background: #fff;
}

.stimmt-liste {
  display: grid;
  gap: 8px;
  margin: 8px 0 4px;
}
.stimmt-liste:focus {
  outline: none;
}
.stimmt-zeile {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1.5px solid var(--linie);
  border-radius: 14px;
  background: var(--flaeche);
}
.stimmt-zeile.entschieden {
  border-color: #c9d2ee;
}
.stimmt-text {
  margin: 0;
  color: var(--ink);
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.stimmt-knoepfe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.stimmt-knopf {
  min-height: 44px;
  padding: 6px 8px;
  border: 1.5px solid var(--linie);
  border-radius: 12px;
  background: var(--flaeche);
  box-shadow: 0 3px 0 var(--grau-kante);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.stimmt-knopf.gewaehlt {
  border-color: var(--cobalt);
  background: #eef1fd;
  box-shadow: 0 3px 0 rgba(42, 79, 215, 0.45);
  color: var(--cobalt-tief);
}
.stimmt-knopf:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
@media (min-width: 640px) {
  .stimmt-zeile {
    grid-template-columns: minmax(0, 1fr) 260px;
    align-items: center;
  }
}

/* ======================================================================
   LESEN, UM ETWAS DAMIT ZU TUN (V276) - der Steckbrief: oben der Text, den
   ein Kind über sich schreibt, als Zettel mit Linien, darunter seine Karte
   mit einer Zeile je Angabe und drei Antworten zur Wahl. Die Wahl in Kobalt
   wie jede andere; nichts urteilt (R6, R9), und die Farben sind die der
   Fläche, also auch in der geschlossenen Runde ohne Gelb.
   ====================================================================== */
.brief-text {
  margin: 8px 0 12px;
  padding: 12px 16px 10px;
  border: 1.5px solid var(--linie);
  border-radius: 14px;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 33px,
      rgba(42, 79, 215, 0.12) 33px,
      rgba(42, 79, 215, 0.12) 34px
    ),
    var(--flaeche);
  background-position: 0 10px;
}
.brief-text p {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 34px;
  overflow-wrap: anywhere;
}
.brief-karte {
  display: grid;
  gap: 8px;
  margin: 0 0 4px;
  padding: 0 12px 12px;
  border: 1.5px solid var(--linie);
  border-radius: 16px;
  background: var(--flaeche);
  box-shadow: 0 3px 0 var(--grau-kante);
}
.brief-karte:focus {
  outline: none;
}
.brief-kopf {
  margin: 0 -12px 4px;
  padding: 8px 12px;
  border-bottom: 1.5px solid var(--linie);
  border-radius: 14px 14px 0 0;
  background: #eef1fd;
  color: var(--cobalt-tief);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.brief-zeile {
  display: grid;
  gap: 6px;
}
.brief-frage {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 700;
}
.brief-optionen {
  /* Ein Knopf ist so breit wie sein Wort und bricht es nie: Drei passen
     nicht immer in eine Reihe («im Schwimmbad»), dann rutscht einer in die
     nächste. */
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.brief-option {
  min-height: 44px;
  padding: 6px 6px;
  border: 1.5px solid var(--linie);
  border-radius: 12px;
  background: var(--flaeche);
  box-shadow: 0 3px 0 var(--grau-kante);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  flex: 1 1 auto;
  min-width: 28%;
  overflow-wrap: normal;
  hyphens: manual;
  cursor: pointer;
}
.brief-option.gewaehlt {
  border-color: var(--cobalt);
  background: #eef1fd;
  box-shadow: 0 3px 0 rgba(42, 79, 215, 0.45);
  color: var(--cobalt-tief);
}
.brief-option:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
@media (min-width: 640px) {
  .brief-zeile {
    grid-template-columns: 110px minmax(0, 1fr);
    align-items: center;
  }
}

/* ==========================================================================
 * NACH DER ANTWORT (V278)
 *
 * Angeordnet am 13.10.2026: «nachdem prüfen geklickt wurde, sollen alle
 * buttons wie tipps und beispiele usw verschwinden und der weiter button ist
 * da platziert wo prüfen war. direkt oberhalb des weiter buttons kommt
 * richtig oder falsch. war es falsch, kommt neben dem weiter button noch ein
 * button Lösung.» Das Urteil und die Knöpfe danach stehen auf der Karte
 * (``.nachantwort``); die Reihe «Prüfen», «Tipp», «Beispiel» geht weg
 * (``aufgabe.js``). «Weiter» ist so breit wie «Prüfen» war, «Lösung» steht
 * daneben wie «Tipp» - ruhig, ohne Farbe eines Urteils (R6, R9).
 * ========================================================================== */
.nachantwort .urteil {
  margin-top: 18px;
}
.nach-knoepfe {
  margin-top: 12px;
}
.nach-knoepfe:not(:has(> .btn:not([hidden]))) {
  display: none;
}
.nach-knoepfe > [data-weiter] {
  flex: 1;
}
.nachantwort .coinbescheid {
  margin-top: 12px;
}
/* «Nochmals» auf einem Brett gehört zum Antworten und geht mit. */
:is(.nach-richtig, .nach-falsch) [data-fokus="nochmals"] {
  display: none;
}

/* ==========================================================================
 * DAS LEVEL EINES FACHS (V285)
 *
 * Angeordnet am 13.10.2026: «erstelle pro fach einen level für alle tests die
 * man bestanden hat». Seit jede Stufe offen ist, sagt das Level, wie weit
 * jemand ist: eins plus jeder bestandene Test. Ein Schild in Kobalt im Kopf
 * des Fachs, wie die Türen und die Wahl - keine Farbe des Urteils (R6, R9),
 * kein Pokal, und still.
 * ========================================================================== */
.floorhead .fachlevel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 10px 0 12px;
}
.fachlevel-zahl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 9px;
  border-radius: 999px;
  background: var(--cobalt);
  color: #fff;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.fachlevel-zahl svg {
  fill: currentColor;
}
.fachlevel small {
  font-size: 13.5px;
  color: var(--ink-soft);
}

/* ==========================================================================
 * DIE GRAFIKEN ZUR AUFGABE (V289)
 *
 * Was eine Aufgabe der Mathematik bis dahin in Worten beschrieb, steht jetzt
 * als Bild da: Strichliste, Raster mit Punkten, Wegen und Spiegelachse,
 * Winkel, Liniendiagramm und Punktwolke, Baumdiagramm, Würfelbau, Netze und
 * eine Uhr (`app/web/bildmarkup._grafik`). Gezeichnet in den eigenen Marken:
 * Tinte für Linien und Schrift, Kobalt für Wege und Figuren, Gelb für Bogen
 * und Plättchen. Kein Grün und kein Ziegelrot - die beiden sind das Urteil
 * (R6, R9). Still, ohne Bewegung. Das Bild wird schmaler, wo der Platz fehlt,
 * nie breiter als gezeichnet; die Schrift darin wächst und schrumpft mit.
 * ========================================================================== */
.grafikbild {
  --gr-hell: #dbe3fa;
  --gr-dunkel: #6f86d9;
  --gr-wuerfel-oben: #ffffff;
  --gr-wuerfel-vorn: #d3dcf6;
  --gr-wuerfel-seite: #a8b7e8;
}
.grafikbild .grafik {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  overflow: visible;
}
.grafik text {
  font-family: "Atkinson Hyperlegible", sans-serif;
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--plaster);
  stroke-width: 3px;
  stroke-linejoin: round;
}
/* Die Mitte gilt nur, wo das Bild keine Seite nennt: Eine Regel hier schlüge
   das Attribut `text-anchor` der Zeichnung. */
.grafik text:not([text-anchor]) {
  text-anchor: middle;
}
.grafik text.gr-links {
  text-anchor: end;
}
.gr-zahl {
  font-size: 12px;
}
.gr-name {
  font-size: 15px;
  font-weight: 700;
}
.gr-achsname,
.gr-gruppe,
.gr-winkelname,
.gr-knotentext,
.gr-plantext,
.gr-netztext,
.gr-uhrzahl {
  font-size: 13px;
  font-weight: 700;
}
.gr-text,
.gr-flaechentext,
.gr-winkeltext,
.gr-marke {
  font-size: 12px;
}
.gr-flaechentext,
.gr-winkeltext {
  font-size: 14px;
  font-weight: 700;
}
.gr-gitter line {
  stroke: var(--hairline);
  stroke-width: 1;
}
.gr-fuenfer {
  stroke: var(--ink);
  stroke-width: 2;
}
.gr-achse {
  stroke: var(--ink);
  stroke-width: 1.6;
}
.gr-hilfslinie {
  stroke: var(--hairline);
  stroke-width: 1;
}
.gr-spiegel {
  stroke: var(--ink);
  stroke-width: 2;
  stroke-dasharray: 6 4;
}
.gr-figur {
  fill: var(--cobalt);
  fill-opacity: 0.16;
  stroke: var(--cobalt);
  stroke-width: 2;
  stroke-linejoin: round;
}
/* Die zweite Figur ist das Bild der ersten: gelb statt blau, damit beide
   auseinanderzuhalten sind - ohne dass eine Farbe etwas urteilt. */
.gr-figur-2 {
  fill: var(--chalk);
  fill-opacity: 0.3;
  stroke: var(--ton-rechnen-tief);
}
.gr-weg {
  fill: none;
  stroke: var(--cobalt);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.gr-punkt,
.gr-scheitel {
  fill: var(--ink);
}
.gr-stein {
  fill: var(--chalk);
  stroke: var(--ink);
  stroke-width: 1.4;
}
.gr-feld-a {
  fill: var(--gr-hell);
  stroke: var(--ink);
  stroke-width: 1;
}
.gr-feld-b {
  fill: var(--gr-dunkel);
  stroke: var(--ink);
  stroke-width: 1;
}
.gr-flaeche {
  fill: var(--gr-hell);
  stroke: var(--ink);
  stroke-width: 1.6;
}
/* Die Strichliste: Name links, die Striche rechts, jede Zeile gleich gemessen. */
.gr-strichliste {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  gap: 6px 12px;
}
.gr-strichzeile {
  display: contents;
}
.gr-strichzeile > span {
  font-size: 15px;
  font-weight: 700;
}
.gr-strichzeile .grafik {
  margin: 0;
}
.gr-striche line {
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
}
/* Winkel: zwei Schenkel aus Tinte, der Bogen gelb - er sagt «hier», nicht «gut». */
.gr-schenkel {
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
}
.gr-bogen {
  fill: var(--chalk);
  fill-opacity: 0.7;
  stroke: var(--ink);
  stroke-width: 1;
}
.gr-ast {
  stroke: var(--ink);
  stroke-width: 1.4;
}
.gr-knoten {
  fill: var(--flaeche, #fff);
  stroke: var(--cobalt);
  stroke-width: 1.4;
}
.grafik .gr-knotentext {
  font-size: 12px;
  font-weight: 400;
}
/* Würfel: oben hell, vorn und seitlich in zwei Tönen von Kobalt. */
.gr-wuerfel-oben,
.gr-wuerfel-vorn,
.gr-wuerfel-seite,
.gr-ansicht,
.gr-planfeld,
.gr-netzfeld {
  stroke: var(--ink);
  stroke-width: 1.3;
  stroke-linejoin: round;
}
.gr-wuerfel-oben {
  fill: var(--gr-wuerfel-oben);
}
.gr-wuerfel-vorn,
.gr-ansicht,
.gr-netzfeld {
  fill: var(--gr-wuerfel-vorn);
}
.gr-wuerfel-seite {
  fill: var(--gr-wuerfel-seite);
}
.gr-planfeld {
  fill: var(--flaeche, #fff);
}
/* Mehrere Bilder nebeneinander (Würfelbau und Plan, Ansichten, Netze), umbrechend. */
.gr-reihe {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 10px 18px;
}
.gr-reihe .grafik {
  width: auto;
  flex: 0 1 auto;
  margin: 0;
}
.gr-reihe .gr-wuerfel {
  width: min(100%, 220px);
}
.gr-reihe .gr-netz {
  width: min(44%, 130px);
}
.gr-reihe .gr-netz:only-child {
  width: min(100%, 200px);
}
.gr-reihe .gr-ansicht {
  width: min(28%, 90px);
}
.gr-reihe .gr-plan {
  width: min(40%, 100px);
}
/* Die Uhr: Zahlen und Striche aus Tinte, der kleine Zeiger breit, der grosse lang. */
.gr-uhr {
  max-width: 180px !important;
}
.gr-zifferblatt {
  fill: var(--flaeche, #fff);
  stroke: var(--ink);
  stroke-width: 2.4;
}
.gr-uhrstrich {
  stroke: var(--ink-soft);
  stroke-width: 1;
}
.gr-uhrstrich.gross {
  stroke: var(--ink);
  stroke-width: 2;
}
.gr-zeiger-klein,
.gr-zeiger-gross {
  stroke: var(--ink);
  stroke-linecap: round;
}
.gr-zeiger-klein {
  stroke-width: 5;
}
.gr-zeiger-gross {
  stroke: var(--cobalt);
  stroke-width: 3;
}

/* ===== Grafiken der Sach- und Sprachfächer: Diagramme, Karten, Pläne (V289) ===== */
/* (grafik_sach) */
/* Säulen, Klimadiagramm, Pyramide, Zeitstrahl, Karte, Höhenlinien, Windrose,
   Schema, Kurven, Bilddiagramm und Strahlengang - selbst gezeichnet, still.
   Kobalt und Gelb unterscheiden nur Dinge (Niederschlag und Temperatur,
   die beiden Seiten der Pyramide), Wasser ist hellblau, Wald ist Tinte auf hellem Grund:
   kein Grün und kein Ziegelrot, die das Urteil sind (R6, R9). */
.grafikbild {
  --gs-wasser: #bcd0f5;
  --gs-gelb-tief: #b8901c;
}
.gs-achstext,
.gs-legende,
.gs-wert {
  font-size: 11.5px;
}
.gs-legende {
  font-size: 12.5px;
}
.gs-wert {
  font-weight: 700;
}
.gs-titel,
.gs-bildname,
.gs-planname {
  font-size: 13px;
  font-weight: 700;
}
.gs-saeule,
.gs-regen,
.gs-maenner {
  fill: var(--cobalt);
  fill-opacity: 0.55;
  stroke: var(--cobalt);
  stroke-width: 1.2;
}
.gs-frauen {
  fill: var(--chalk);
  stroke: var(--gs-gelb-tief);
  stroke-width: 1.2;
}
.gs-temperatur {
  fill: none;
  stroke: var(--gs-gelb-tief);
  stroke-width: 2.6;
  stroke-linejoin: round;
}
.gs-temppunkt {
  fill: var(--gs-gelb-tief);
}
.grafik .gs-temptext {
  fill: var(--gs-gelb-tief);
  font-size: 12px;
  font-weight: 700;
}
.grafik .gs-regentext {
  fill: var(--cobalt);
  font-size: 12px;
  font-weight: 700;
}
/* Der Zeitstrahl: eine Linie mit Pfeil, Ereignisse als Punkte mit Stiel. */
.gs-strahl {
  stroke: var(--ink);
  stroke-width: 2.4;
}
.gs-strahlspitze,
.gs-nordspitze,
.gs-schemaspitze,
.gs-blickspitze {
  fill: var(--ink);
}
.gs-stiel {
  stroke: var(--ink-soft);
  stroke-width: 1;
}
.gs-ereignis {
  fill: var(--cobalt);
  stroke: var(--flaeche, #fff);
  stroke-width: 1.5;
}
.gs-ereignistext {
  font-size: 11.5px;
}
.grafik .gs-frage {
  font-size: 16px;
  font-weight: 700;
  fill: var(--cobalt);
}
.gs-fragekasten,
.gs-kasten-frage {
  fill: var(--flaeche, #fff);
  stroke: var(--cobalt);
  stroke-width: 1.6;
  stroke-dasharray: 4 3;
}
/* Die Karte: heller Grund, Planquadrate fein, Zeichen in Tinte. */
.gs-kartengrund {
  fill: #fbf8ef;
}
.gs-kartenrand {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
}
.gs-planlinie {
  stroke: var(--ink-soft);
  stroke-opacity: 0.45;
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.gs-z {
  fill: var(--flaeche, #fff);
  stroke: var(--ink);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.gs-z .gs-strich,
.gs-strich {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.gs-dick {
  stroke-width: 2.6 !important;
}
.gs-baum {
  fill: #e4dcc4;
}
.gs-dunkel {
  fill: var(--ink-soft);
}
.gs-blau {
  fill: var(--cobalt);
}
.gs-fahne {
  fill: var(--chalk);
  stroke: var(--ink);
  stroke-width: 1;
}
.gs-wasser {
  fill: var(--gs-wasser);
  stroke: var(--cobalt);
  stroke-width: 1.2;
}
.grafik .gs-zbuchstabe {
  font-size: 11px;
  font-weight: 700;
  stroke: none;
}
.grafik .gs-hell {
  fill: #fff;
}
.gs-linie-strasse {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gs-linie-fluss {
  fill: none;
  stroke: var(--gs-wasser);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gs-linie-bahn {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-dasharray: 8 4;
}
.gs-linie-weg {
  fill: none;
  stroke: var(--gs-gelb-tief);
  stroke-width: 2;
  stroke-dasharray: 2 4;
  stroke-linecap: round;
}
.gs-posten {
  fill: none;
  stroke: var(--plum);
  stroke-width: 2.4;
}
.grafik .gs-postennummer {
  font-size: 11px;
  font-weight: 700;
  fill: var(--plum);
  stroke: none;
}
.gs-blickpunkt {
  fill: var(--chalk);
  stroke: var(--ink);
  stroke-width: 2;
}
.gs-blick {
  stroke: var(--ink);
  stroke-width: 2.4;
}
.gs-nordpfeil {
  stroke: var(--ink);
  stroke-width: 2.4;
}
.gs-massstab {
  fill: var(--ink);
}
.gs-massstab-hell {
  fill: var(--flaeche, #fff);
  stroke: var(--ink);
  stroke-width: 1;
}
/* Höhenlinien und Profile. */
.gs-hoehenlinie {
  fill: none;
  stroke: #9a7a3c;
  stroke-width: 1.5;
}
.grafik .gs-hoehenzahl {
  font-size: 10.5px;
  fill: #6e5426;
}
.gs-gipfel {
  fill: var(--ink);
}
.gs-profillinie {
  stroke: var(--cobalt);
  stroke-width: 1.8;
  stroke-dasharray: 6 4;
}
.gs-profilrahmen {
  fill: var(--flaeche, #fff);
  stroke: var(--hairline);
}
.gs-profil {
  fill: #e4dcc4;
  stroke: #6e5426;
  stroke-width: 1.6;
  stroke-linejoin: round;
}
/* Die Windrose. */
.gs-rose {
  fill: var(--flaeche, #fff);
  stroke: var(--ink);
  stroke-width: 2;
}
.gs-rosebuchstabe {
  font-size: 16px;
  font-weight: 700;
}
.gs-rosezeiger {
  stroke: var(--cobalt);
  stroke-width: 4;
  stroke-linecap: round;
}
.gs-rosespitze {
  fill: var(--cobalt);
}
/* Das Schema: Kästen mit Pfeilen. */
.gs-kasten,
.gs-kasten-blatt {
  fill: var(--flaeche, #fff);
  stroke: var(--cobalt);
  stroke-width: 1.4;
}
.gs-kasten-blatt {
  fill: #fdf3cf;
  stroke: var(--gs-gelb-tief);
}
.gs-kastentext {
  font-size: 11px;
}
.gs-schemapfeil {
  stroke: var(--ink);
  stroke-width: 1.4;
}
.gs-pfeiltext {
  font-size: 11px;
  font-weight: 700;
}
.gs-nummer {
  fill: var(--ink);
}
.grafik .gs-nummertext {
  font-size: 10.5px;
  font-weight: 700;
  fill: #fff;
  stroke: none;
}
/* Kurven: die erste blau, die zweite gelb, die dritte Tinte. */
.gs-kurve {
  fill: none;
  stroke: var(--cobalt);
  stroke-width: 2.6;
  stroke-linecap: round;
}
.gs-kurve-1 {
  stroke: var(--gs-gelb-tief);
  stroke-dasharray: 7 4;
}
.gs-kurve-2 {
  stroke: var(--ink);
}
.gs-marke {
  stroke: var(--ink);
  stroke-width: 1.4;
  stroke-dasharray: 4 3;
}
.gs-kurvenname {
  font-size: 12px;
  font-weight: 700;
}
.grafik .gs-kurvenname-0 {
  fill: var(--cobalt);
}
.grafik .gs-kurvenname-1 {
  fill: var(--gs-gelb-tief);
}
/* Bilddiagramm und Strahlengang. */
.gs-symbol {
  fill: var(--cobalt);
}
.gs-medium-oben {
  fill: var(--flaeche, #fff);
}
.gs-medium-unten {
  fill: var(--gs-wasser);
  fill-opacity: 0.6;
}
.gs-glas {
  fill: #d9dee8;
}
.gs-grenze {
  stroke: var(--ink);
  stroke-width: 2;
}
.gs-lot {
  stroke: var(--ink-soft);
  stroke-width: 1.4;
  stroke-dasharray: 5 4;
}
.gs-strahl-licht {
  stroke: var(--gs-gelb-tief);
  stroke-width: 3;
  stroke-linecap: round;
}
.gs-strahl-zurueck {
  stroke-dasharray: 7 4;
}
.gs-lichtspitze {
  fill: var(--gs-gelb-tief);
}

/* ===== Grafiken der Sach- und Sprachfächer: Musik, Bildfolgen, Gestalten (V289) ===== */
/* (grafik_kunst) */
/* Notenzeile: Linien und Noten in Tinte, eine markierte Note in Kobalt. */
.gk-linie {
  stroke: var(--ink);
  stroke-width: 1.2;
}
.gk-schluessel {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gk-voll {
  fill: var(--ink);
}
.gk-leer {
  fill: #fff;
  stroke: var(--ink);
  stroke-width: 1.8;
}
.gk-hals,
.gk-taktstrich,
.gk-vorzeichen line,
.gk-vorzeichen path {
  stroke: var(--ink);
  stroke-width: 1.5;
  fill: none;
}
.gk-vorzeichen .gk-dick {
  stroke-width: 3;
}
.gk-fahne,
.gk-pausenstrich {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gk-schlussstrich {
  stroke: var(--ink);
  stroke-width: 4;
}
.gk-voll.gk-mark {
  fill: var(--cobalt);
}
.gk-leer.gk-mark {
  stroke: var(--cobalt);
}
.gk-hals.gk-mark,
.gk-fahne.gk-mark,
.gk-pausenstrich.gk-mark {
  stroke: var(--cobalt);
}
.gk-markgrund {
  fill: var(--gr-hell);
}
.grafik .gk-takt {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 22px;
  font-weight: 800;
}
/* Tastatur: weiss und schwarz, gedrückt in hellem Kobalt mit einem Punkt. */
.gk-weiss {
  fill: #fff;
  stroke: var(--ink);
  stroke-width: 1.3;
}
.gk-schwarz {
  fill: var(--ink);
}
.gk-weiss.gk-gedrueckt {
  fill: var(--gr-hell);
}
.gk-schwarz.gk-gedrueckt {
  fill: #2a3c78;
}
.gk-tastenmarke {
  fill: var(--cobalt);
  stroke: #fff;
  stroke-width: 1.5;
}
.grafik .gk-tastennummer {
  font-size: 11px;
  font-weight: 700;
  fill: #fff;
  stroke: none;
}
.grafik .gk-tastenname {
  font-size: 12px;
  font-weight: 700;
}
/* Pattern: ein Raster wie in einem Musikprogramm. */
.gk-schritt {
  fill: var(--flaeche, #fff);
  stroke: var(--hairline);
  stroke-width: 1;
}
.gk-schritt-b {
  fill: var(--gr-hell);
}
.gk-schlag {
  fill: var(--cobalt);
}
.grafik .gk-schrittzahl {
  font-size: 10px;
  fill: var(--ink-soft);
}
.grafik .gk-spurname {
  font-size: 13px;
  font-weight: 700;
}
/* Verlauf: eine Linie oder ein Keil über der Zeit, Abschnitte mit Buchstaben. */
.gk-flaeche {
  fill: var(--flaeche, #fff);
  stroke: var(--hairline);
  stroke-width: 1;
}
.gk-kurve {
  fill: none;
  stroke: var(--cobalt);
  stroke-width: 3.5;
  stroke-linecap: round;
}
.gk-keil {
  fill: var(--gr-dunkel);
  fill-opacity: 0.55;
  stroke: var(--cobalt);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.gk-abschnittlinie {
  stroke: var(--ink-soft);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}
.grafik .gk-abschnitt,
.grafik .gk-feldname {
  font-size: 15px;
  font-weight: 700;
}
.grafik .gk-achswort {
  font-size: 12px;
  fill: var(--ink-soft);
}
.gk-zeitpfeil {
  stroke: var(--ink-soft);
  stroke-width: 1.4;
}
.gk-pfeilspitze {
  fill: var(--ink-soft);
}
.gk-notation {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gk-ring {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.4;
}
/* Aufstellung: Tanzende von oben, abwechselnd blau und gelb - ohne Bedeutung. */
.gk-hand {
  stroke: var(--ink-soft);
  stroke-width: 2.4;
  stroke-linecap: round;
}
.gk-tanz {
  stroke: var(--ink);
  stroke-width: 1.4;
}
.gk-tanz-a {
  fill: var(--gr-dunkel);
}
.gk-tanz-b {
  fill: var(--chalk);
}
.gk-nase {
  fill: var(--ink);
}
/* Musterfelder: Striche und Punkte in Tinte auf weissem Grund. */
.gk-feldgrund {
  fill: #fff;
}
.gk-feldrand {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.4;
}
.gk-strich {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.4;
}
/* Zahnräder: zwei Töne, die nichts urteilen; die Kette in Tinte. */
.gk-rad {
  stroke: var(--ink);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.gk-rad-a {
  fill: var(--gr-hell);
}
.gk-rad-b {
  fill: var(--chalk);
}
.gk-achse {
  fill: #fff;
  stroke: var(--ink);
  stroke-width: 1.4;
}
.gk-kette {
  stroke: var(--ink);
  stroke-width: 3;
  stroke-dasharray: 5 3;
}
.gk-drehung {
  fill: none;
  stroke: var(--cobalt);
  stroke-width: 2.6;
}
.gk-drehung + .gk-pfeilspitze {
  fill: var(--cobalt);
}
.grafik .gk-zaehne {
  font-size: 13px;
  font-weight: 700;
}
/* Bildfolge: Felder wie ein Comicstreifen, Bilder aus Fluent Emoji. */
.gk-folge {
  display: grid;
  grid-template-columns: repeat(var(--gk-spalten, 4), minmax(0, 1fr));
  gap: 8px;
  max-width: 520px;
  margin: 0 auto;
}
.gk-folge-2 {
  --gk-spalten: 2;
}
.gk-folge-3 {
  --gk-spalten: 3;
}
.gk-folge-5 {
  --gk-spalten: 3;
}
@media (max-width: 420px) {
  .gk-folge-4 {
    --gk-spalten: 2;
  }
}
.gk-feld {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-height: 112px;
  padding: 26px 6px 8px;
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
}
.gk-marke {
  position: absolute;
  top: 4px;
  left: 6px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  color: var(--ink);
}
.gk-szene {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 2px;
}
.gk-emoji {
  width: 44px;
  height: 44px;
}
.gk-szene-1 .gk-emoji {
  width: 56px;
  height: 56px;
}
.gk-szene-3 .gk-emoji {
  width: 34px;
  height: 34px;
}
.gk-blase {
  position: relative;
  align-self: stretch;
  padding: 4px 6px;
  font-size: 13px;
  line-height: 1.25;
  text-align: center;
  background: var(--plaster-hi);
  border: 1.2px solid var(--ink);
  border-radius: 10px;
  overflow-wrap: anywhere;
}
.gk-blase::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 9px;
  height: 9px;
  background: var(--plaster-hi);
  border-right: 1.2px solid var(--ink);
  border-bottom: 1.2px solid var(--ink);
  transform: translateX(-50%) rotate(45deg);
}
/* Inschrift: ein Stein, die Buchstaben wie eingemeisselt. */
.gk-stein {
  fill: #e6dfcf;
  stroke: var(--ink);
  stroke-width: 1.6;
}
.gk-steinfeld {
  fill: none;
  stroke: #b3a888;
  stroke-width: 1.2;
}
.grafik .gk-gravur {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 1.5px;
  fill: #5b5240;
  stroke: #f4efe2;
  stroke-width: 1px;
}
/* Fundstück: ein Umriss in Tinte auf hellem Ton. */
.gk-fund {
  fill: #ead6bf;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linejoin: round;
}
.gk-fundlinie {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gk-flamme {
  fill: var(--chalk);
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

/* ===== Grafiken der Mathematik: Feinschliff, Umrisse, kurze Bilder (V290) ===== */
/* (V290 Mathematik) */
/* Auf dem Telefon wird ein breites Raster oder Diagramm stark verkleinert, und
   seine Schrift mit ihm. Der Server rechnet je Bild einen Faktor
   (`--gr-mass`, `bildmarkup._telefonmass`), und nur unter 640 px wachsen
   Zahlen, Namen und Punkte um ihn - auf dem Schreibtisch bleibt alles, wie es
   war. Die Namen der Punkte und die Aufschriften an Knicken setzt der Server
   dorthin, wo sie mit dieser Grösse nichts überdecken. */
@media (max-width: 639.98px) {
  .gr-raster .gr-zahl,
  .gr-linien .gr-zahl,
  .gr-linien .gr-marke {
    font-size: calc(12px * var(--gr-mass, 1));
  }
  .gr-raster .gr-name {
    font-size: calc(15px * var(--gr-mass, 1));
  }
  .gr-raster .gr-achsname,
  .gr-linien .gr-achsname {
    font-size: calc(13px * var(--gr-mass, 1));
  }
  .gr-raster .gr-punkt {
    r: calc(4.5px * var(--gr-mass, 1));
  }
}
/* Umrisse, die sich überdecken (V290): jede Form in ihrer eigenen Farbe, die
   Fläche fast durchsichtig, damit ein Umriss auch unter einem anderen zu sehen
   bleibt. Kein Grün und kein Ziegelrot - die beiden sind das Urteil. */
.grafikbild {
  --gr-u0: var(--cobalt);
  --gr-u1: #a8740f;
  --gr-u2: #7a3fb0;
  --gr-u3: var(--ink);
  --gr-u4: #c2557f;
  --gr-u5: #4f6b8a;
}
.gr-umriss {
  fill-opacity: 0.05;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}
.gr-umriss-0 { fill: var(--gr-u0); stroke: var(--gr-u0); }
.gr-umriss-1 { fill: var(--gr-u1); stroke: var(--gr-u1); }
.gr-umriss-2 { fill: var(--gr-u2); stroke: var(--gr-u2); }
.gr-umriss-3 { fill: var(--gr-u3); stroke: var(--gr-u3); }
.gr-umriss-4 { fill: var(--gr-u4); stroke: var(--gr-u4); }
.gr-umriss-5 { fill: var(--gr-u5); stroke: var(--gr-u5); }
.gr-ukasten {
  fill: var(--flaeche, #fff);
  stroke: var(--ink);
  stroke-width: 2;
}
.gr-upunkt {
  fill: var(--ink);
}

/* EIN BILD, DAS NUR KURZ BLEIBT (V290): nach `--gr-kurz` Sekunden blendet das
   Stilblatt es aus, ohne Skript, und an seine Stelle tritt ein zweites Bild
   oder der Satz «Das Bild ist weg.». Beide liegen im selben Feld des Rasters,
   damit nichts springt. Bei reduzierter Bewegung kürzt die allgemeine Regel
   oben die Dauer, die Verzögerung bleibt - das Bild ist nach derselben Zeit
   weg, nur ohne Übergang. Nur beim Üben (`nur_ueben`). */
.gr-kurz-satz {
  margin: 0 0 10px;
  text-align: center;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink-soft);
}
.gr-kurz-buehne {
  display: grid;
}
.gr-kurz-buehne > * {
  grid-area: 1 / 1;
}
.gr-kurz-bild {
  animation: gr-kurz-weg 0.45s ease-in var(--gr-kurz, 3s) forwards;
}
.gr-kurz-danach {
  align-self: center;
  opacity: 0;
  visibility: hidden;
  animation: gr-kurz-da 0.45s ease-out var(--gr-kurz, 3s) forwards;
}
.gr-kurz-weg {
  margin: 0;
  text-align: center;
  font-size: 16px;
  color: var(--ink-soft);
}
@keyframes gr-kurz-weg {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes gr-kurz-da {
  to {
    opacity: 1;
    visibility: visible;
  }
}
/* (V290 Mathematik Ende) */
/* ===== Grafiken der Sach- und Sprachfächer: Stadtplan, Essensbild, Schrittbilder, Partitur (V290) ===== */
/* (V290 Sach und Sprachen) */
/* Ein Stadtplan mit Häuserblöcken und Strassen, ein Essensbild als
   Stufenpyramide, ein leeres Feld mit Fragezeichen in einer Bildfolge, ein
   Bild mit Titel und Partituren mit mehreren Zeilen - selbst gezeichnet,
   still. Kein Grün und kein Ziegelrot (R6, R9); ein Ziel ist nie markiert. */
.gs-stadt {
  --gs-strasse: 16px;
  --gs-strassenfarbe: #cfd6e3;
  max-width: 460px;
  margin: 0 auto;
}
.gs-plan {
  display: grid;
  background: var(--gs-strassenfarbe);
  border-radius: 10px 10px 4px 4px;
}
.gs-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 74px;
  padding: 6px 3px;
  background: #fff;
  border: 1.2px solid var(--ink);
  border-radius: 7px;
}
.gs-block-leer {
  background: var(--plaster-hi);
}
.gs-hausbild {
  width: 38px;
  height: 38px;
}
.gs-gebaeude {
  max-width: 100%;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
}
@media (max-width: 420px) {
  .gs-stadt {
    --gs-strasse: 12px;
  }
  .gs-block {
    padding: 6px 1px;
  }
  .gs-gebaeude {
    font-size: 11.5px;
    letter-spacing: -0.2px;
  }
}
.gs-unterkante {
  display: grid;
  grid-template-rows: 18px auto;
}
.gs-startweg {
  grid-row: 1;
  background: var(--gs-strassenfarbe);
}
.gs-start {
  grid-row: 2;
  justify-self: center;
  width: max-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--cobalt);
}
.gs-startpfeil {
  font-size: 15px;
}
/* Essensbild: Stockwerke, unten breit, oben schmal. */
.gs-essensbild {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-width: 440px;
  margin: 0 auto;
}
.gs-stockwerk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 6px;
  box-sizing: border-box;
  min-height: 44px;
  padding: 4px 6px;
  background: #fbf0c8;
  border: 1.4px solid var(--ink);
  border-radius: 8px;
}
.gs-stockwerk:nth-child(even) {
  background: #e3e9fb;
}
.gs-stockwerk.gs-stockwerk-frage {
  background: var(--plaster-hi);
}
.gs-stockbilder {
  display: flex;
  gap: 2px;
}
.gs-essbild {
  width: 30px;
  height: 30px;
}
.gs-stockname {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}
.gs-stockfrage {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}
/* Bildfolge: ein Titel darüber, und ein leeres Feld mit Fragezeichen. */
.gk-folgetitel {
  grid-column: 1 / -1;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
@media (min-width: 640px) {
  .gk-folge-5 {
    --gk-spalten: 5;
    max-width: 640px;
  }
}
.gk-feld.gk-feld-frage {
  justify-content: center;
  background: var(--plaster-hi);
}
.gk-fragezeichen {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}
/* Ein Bild mit Titel: ein Schild, darunter die Szene. */
.gk-titelbild {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 340px;
  margin: 0 auto;
  padding: 10px 10px 12px;
  background: linear-gradient(#e3e9fb, #ffffff);
  border: 1.5px solid var(--ink);
  border-radius: 12px;
}
.gk-titelschild {
  padding: 3px 12px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 17px;
  font-weight: 700;
  background: #f1e7d0;
  border: 1.4px solid var(--ink);
  border-radius: 6px;
}
.gk-titelszene {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
}
.gk-titelemoji {
  width: 62px;
  height: 62px;
}
/* Partitur: der Name über jeder Zeile, eine Klammer links. */
.grafik .gk-stimme {
  font-size: 14px;
  font-weight: 700;
}
.gk-klammer {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.4;
}
/* (V290 Sach und Sprachen Ende) */

/* (V291 Mathematik) */
/* ==========================================================================
 * Ein einzelner Winkel zum Schätzen und Einordnen (`bildmarkup._g_winkel_einer`):
 * gross, in immer demselben Massstab, ohne Zahl. Die Schenkel etwas kräftiger,
 * damit ihre Richtung auch auf einem Telefon klar ist; der Bogen gelb wie bei
 * jedem Winkel - er sagt «hier», nicht «gut». Kein Grün, kein Ziegelrot.
 * ========================================================================== */
.gr-einzelwinkel .gr-schenkel {
  stroke-width: 3.2;
}
.gr-einzelwinkel .gr-bogen {
  stroke-width: 1.4;
}
/* (V291 Mathematik Ende) */

/* ===== Grafiken der Sachfächer: Ortsbild, Ruine, Weltkarte (V291) ===== */
/* (V291 Sach) */
/* Dieselbe Stelle früher und heute, der Rest eines Bauwerks mit vier ganzen
   zur Wahl und eine schematische Weltkarte - selbst gezeichnet, still. Stein
   und Land in Sand, Wasser in Blau, hervorgehoben wird in Kobalt; kein Grün
   und kein Ziegelrot (R6, R9). */
.gs-ortsbild {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 4px;
  max-width: 520px;
  margin: 0 auto;
}
.gs-ort {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 6px 5px 7px;
  border: 1.4px solid var(--ink);
  border-radius: 10px;
}
.gs-ort-frueher {
  background: #f3e6c6;
}
.gs-ort-heute {
  background: #e3e9fb;
}
.gs-ortzeit {
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.gs-ortfeld {
  display: grid;
  grid-template-columns: repeat(var(--gs-ortspalten, 2), minmax(0, 1fr));
  gap: 4px;
}
.gs-ortplatz {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
  padding: 4px 1px 3px;
  background: #fff;
  border: 1px solid var(--ink-soft);
  border-radius: 7px;
}
.gs-ortplatz.gs-ortring {
  outline: 3px solid var(--cobalt);
  outline-offset: 1px;
}
.gs-ortbild {
  width: 34px;
  height: 34px;
}
.gs-ortname {
  max-width: 100%;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  overflow-wrap: anywhere;
  hyphens: manual;
}
.gs-ortpfeil {
  align-self: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-soft);
}
@media (max-width: 420px) {
  .gs-ortsbild {
    gap: 2px;
  }
  .gs-ort {
    padding: 5px 3px 6px;
  }
  .gs-ortfeld {
    gap: 3px;
  }
  .gs-ortname {
    font-size: 11px;
    letter-spacing: -0.2px;
  }
}
@media (min-width: 640px) {
  .gs-ortbild {
    width: 44px;
    height: 44px;
  }
  .gs-ortname {
    font-size: 12.5px;
  }
}
/* Ruine: Stein in Sand, Bögen und Fenster als Luft, Grundrisse auf hellem Grund. */
.gs-rfeld {
  fill: #fff;
  stroke: var(--ink-soft);
  stroke-width: 1.2;
}
.gs-rfeld.gs-rfeld-rest {
  fill: #f6efe0;
}
.grafik .gs-rtitel {
  font-size: 13px;
  font-weight: 700;
}
.gs-rstein,
.gs-rbrocken {
  fill: #e6d6b4;
  stroke: var(--ink);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.gs-rbrocken {
  fill: #d5c39b;
}
.gs-rdach {
  fill: #c9b48a;
  stroke: var(--ink);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.gs-rl {
  fill: #fff;
  stroke: var(--ink);
  stroke-width: 1;
}
.gs-rboden {
  stroke: var(--ink);
  stroke-width: 1.4;
}
.gs-rfuge {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 0.9;
}
.gs-rsand {
  fill: #f7ecd0;
  stroke: var(--ink);
  stroke-width: 1;
}
.gs-rgrund {
  fill: #f8f4ea;
}
.gs-rmauer {
  fill: none;
  stroke: #b49d72;
  stroke-width: 6;
  stroke-linejoin: round;
}
.gs-rwand {
  stroke: #b49d72;
  stroke-width: 4;
}
.gs-rinnen {
  fill: #f8f4ea;
  stroke: var(--ink);
  stroke-width: 1;
}
.gs-rsaeule {
  fill: var(--ink-soft);
}
.gs-rdachchen {
  fill: #c9b48a;
  stroke: var(--ink);
  stroke-width: 0.8;
}
.gs-rwasser {
  fill: var(--gs-wasser, #bcd0f5);
}
.gs-rmarke {
  fill: #fff;
  stroke: var(--ink);
  stroke-width: 1.4;
}
.grafik .gs-rbuchstabe {
  font-size: 14px;
  font-weight: 800;
}
/* Weltkarte: Meer in Blau, Land in Sand, ein Kontinent in Kobalt. */
.gs-wmeer {
  fill: var(--gs-wasser, #bcd0f5);
}
.gs-wrand {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.4;
}
.gs-wland {
  fill: #ecdcb4;
  stroke: var(--ink-soft);
  stroke-width: 1.1;
  stroke-linejoin: round;
}
.gs-wland.gs-wland-hervor {
  fill: var(--cobalt);
  stroke: var(--ink);
  stroke-width: 1.6;
}
.gs-wfragering {
  fill: #fff;
  stroke: var(--cobalt);
  stroke-width: 2;
}
.grafik .gs-wfrage {
  font-size: 16px;
  font-weight: 800;
  fill: var(--cobalt);
}
/* (V291 Sach Ende) */

/* ------------------------------------------------------------------------
   (V292) Die Spielhalle ist erst offen, wenn die Ziele für heute geschafft
   sind. Angeordnet am 14.10.2026: «die arcade spielhalle ist nur geöffnet,
   wenn alle drei ziele für heute geschaft sind». Die Karte oben auf «Games»
   zeigt dieselben Ziele wie die Lernwerkstatt; die Automaten stehen gedämpft
   da, ohne Weg hinein. Kein Grün und kein Ziegelrot (R6, R9): zu ist ein
   Zustand und kein Urteil.
   ------------------------------------------------------------------------ */
.hallezu {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
}
.hallezu-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hallezu-kopf .sub {
  margin: 0;
}
.hallezu-kopf .hinweis {
  margin: 2px 0 0;
}
.hallezu-bild {
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: #eef1fd;
}
.hallezu .ziele-liste {
  margin: 0;
}
.automat.halle-zu .automat-bild {
  filter: saturate(0.45) brightness(0.92);
}
.automat-heutezu {
  font-weight: 700;
  color: var(--ink-soft);
}
.ziele-halle {
  margin-top: 12px;
}
/* (V292 Ende) */

/* ======================================================================
   (V294) STIMMT DIE ANTWORT? Eine Zeile von «Stimmt oder stimmt nicht»
   (V275) trägt hier eine Frage und darunter die Antwort, die jemand gegeben
   hat. Die Frage steht etwas kleiner als eine Aussage, weil sie länger ist;
   die Antwort auf einem hellen Feld in Tinte, für jede Zeile gleich - sie
   ist das, worüber entschieden wird, und sagt nichts darüber, ob sie stimmt
   (R6, R9). Auf dem Schreibtisch stehen die Knöpfe neben beiden.
   ====================================================================== */
.stimmt-zeile.mit-antwort .stimmt-text {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}
.stimmt-antwort {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid var(--linie);
  border-radius: 10px;
  /* Grau und nicht Kobalt: Kobalt ist die Wahl (V275), und die Antwort ist
     keine. */
  background: #f4f6fa;
  color: var(--ink);
}
.stimmt-antwort-wort {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.stimmt-antwort-wert {
  font-size: 18px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.frame.quiet .stimmt-antwort {
  background: #fff;
}
@media (min-width: 640px) {
  .stimmt-zeile.mit-antwort {
    grid-template-columns: minmax(0, 1fr) 260px;
  }
  .stimmt-zeile.mit-antwort .stimmt-text,
  .stimmt-zeile.mit-antwort .stimmt-antwort {
    grid-column: 1;
  }
  .stimmt-zeile.mit-antwort .stimmt-knoepfe {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}
/* (V294 Ende) */

/* ======================================================================
   (V295) IM BILD ANTIPPEN. Der Server zeichnet die Stellen zum Antippen
   ins Bild (`tippziel` in `app/web/bildmarkup.py`): Kontinente, Kreise in
   den Meeren, Punkte an der Windrose, Tasten, Felder einer Karte und
   Gitterpunkte. `aufgabe.js` macht Knöpfe daraus. Gewählt ist in Kobalt
   wie jede Wahl; die Lösung nach einer falschen Antwort hat einen
   gestrichelten Rand in Tinte - kein Grün und kein Ziegelrot (R6, R9).
   Ein Bild zum Antippen steht so breit, wie die Karte es zulässt, damit
   eine Stelle unter einen Finger passt.
   ====================================================================== */
.grafikbild:has(.tippziel) svg.grafik {
  width: 100%;
  max-width: min(100%, 460px) !important;
}
.grafik .tippziel {
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.grafik .tippflaeche {
  pointer-events: all;
  transition: fill 0.15s ease, stroke 0.15s ease;
}
.grafik .tippmarke {
  fill: var(--cobalt);
  opacity: 0;
  pointer-events: none;
}
.grafik .tippziel.gewaehlt .tippmarke {
  opacity: 1;
}
.grafik .tippziel:focus-visible .tippflaeche {
  stroke: var(--cobalt);
  stroke-width: 3.5;
}
@media (hover: hover) {
  .grafik .tippziel:hover .tippflaeche {
    stroke: var(--cobalt);
    stroke-width: 2.5;
  }
}
/* Kreise, Punkte und Gitterpunkte: durchsichtig, nur der Rand zeigt sie. */
.grafik .gs-kartenziel,
.gr-raster .tippflaeche {
  fill: transparent;
  stroke: none;
}
.grafik .gs-wring,
.grafik .gs-rosepunkt {
  fill: rgba(255, 255, 255, 0.9);
  stroke: var(--ink-soft);
  stroke-width: 2;
}
/* Gewählt. */
.grafik .tippziel.gewaehlt .gs-wland {
  fill: #a9b8f0;
  stroke: var(--cobalt);
  stroke-width: 2.5;
}
.grafik .tippziel.gewaehlt .gs-kartenziel {
  fill: rgba(42, 79, 215, 0.26);
  stroke: var(--cobalt);
  stroke-width: 3;
}
.grafik .tippziel.gewaehlt .gk-weiss {
  stroke: var(--cobalt);
  stroke-width: 2.5;
}
.grafik .gk-tippring {
  fill: none;
  stroke: var(--cobalt);
  stroke-width: 3.5;
}
.grafik .gk-tippring-hell {
  stroke: #fff;
  stroke-width: 2.5;
}
.grafik .tippziel.gewaehlt .gs-wring,
.grafik .tippziel.gewaehlt .gs-rosepunkt {
  stroke: var(--cobalt);
  stroke-width: 3;
}
/* Die Lösung nach einer falschen Antwort, auf «Lösung» hin (V278). */
.grafik .tippziel.ist-loesung .tippflaeche {
  stroke: var(--ink);
  stroke-width: 4;
  stroke-dasharray: 7 4;
}
.gr-raster .tippziel.ist-loesung .tippflaeche {
  stroke-width: 3;
  stroke-dasharray: 4 3;
}
/* Auf einer schwarzen Taste wäre Tinte unsichtbar. */
.grafik .tippziel.ist-loesung .gk-schwarz {
  stroke: #fff;
  stroke-width: 3;
}
/* (V295 Ende) */

/* ======================================================================
   (V296) MIT DINGEN HANTIEREN. Münzen auf einen Tisch legen und eine Uhr
   stellen. Die Münzen sind schlichte Scheiben mit ihrem Wert - kein Bild
   einer echten Münze -, die Franken grösser als die Rappen, der Fünfräppler
   golden. Die Uhr ist ein eigenes Zifferblatt; der Zeiger, der gerade
   gestellt wird, und die Zahl, auf die er zeigt, stehen in Kobalt wie jede
   Wahl. Kein Rot und kein Grün (R6, R9), jedes Tippziel mindestens 44 px.
   ====================================================================== */
.muenz-tisch {
  margin: 8px 0 10px;
  padding: 10px 12px 12px;
  border: 1.5px solid var(--linie);
  border-radius: 16px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(140, 104, 62, 0.06) 0,
      rgba(140, 104, 62, 0.06) 22px,
      transparent 22px,
      transparent 44px
    ),
    #f7f1e6;
}
.muenz-titel {
  margin: 0 0 8px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
}
.muenz-reihe,
.muenz-vorrat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 52px;
}
.muenz-vorrat {
  justify-content: center;
  margin: 4px 0 8px;
}
.muenz-vorrat:focus {
  outline: none;
}
.muenz-leer {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
}
.muenze {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid #8d96a6;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fbfcfd 0, #dfe3e9 55%, #c3c9d3 100%);
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.55),
    0 2px 0 #9aa2b1;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.muenze-500 {
  width: 66px;
  height: 66px;
  font-size: 15px;
}
.muenze-200 {
  width: 58px;
  height: 58px;
  font-size: 14px;
}
.muenze-100 {
  width: 50px;
  height: 50px;
  font-size: 13px;
}
.muenze-20 {
  width: 46px;
  height: 46px;
}
.muenze-5 {
  border-color: #b08f2e;
  background: radial-gradient(circle at 35% 30%, #fff6cf 0, #ecd17a 55%, #d2ad45 100%);
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.5),
    0 2px 0 #b08f2e;
}
.muenze:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
@media (hover: hover) {
  .muenze:hover {
    border-color: var(--cobalt);
  }
}

.uhr-wahl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 8px 0 6px;
}
.uhr-zeigerwahl {
  min-height: 44px;
  padding: 6px 8px;
  border: 1.5px solid var(--linie);
  border-radius: 12px;
  background: var(--flaeche);
  box-shadow: 0 3px 0 var(--grau-kante);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.uhr-zeigerwahl.gewaehlt {
  border-color: var(--cobalt);
  background: #eef1fd;
  box-shadow: 0 3px 0 rgba(42, 79, 215, 0.45);
  color: var(--cobalt-tief);
}
.uhr-zeigerwahl:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.uhr-feld {
  display: grid;
  place-items: center;
}
.uhr-blatt {
  display: block;
  width: min(100%, 300px);
  height: auto;
}
.uhr-rand {
  fill: #fff;
  stroke: var(--ink);
  stroke-width: 3;
}
.uhr-strich {
  stroke: var(--ink-soft);
  stroke-width: 1.2;
}
.uhr-strich.lang {
  stroke: var(--ink);
  stroke-width: 2.6;
}
.uhr-zeiger {
  stroke: var(--ink);
  stroke-linecap: round;
}
.uhr-zeiger.klein {
  stroke-width: 7;
}
.uhr-zeiger.gross {
  stroke-width: 4.5;
}
.uhr-zeiger.aktiv {
  stroke: var(--cobalt);
}
.uhr-mitte {
  fill: var(--ink);
}
.uhr-zahl {
  cursor: pointer;
  outline: none;
}
.uhr-ziel {
  fill: transparent;
  stroke: transparent;
  stroke-width: 2.5;
  pointer-events: all;
}
.uhr-zahl.gewaehlt .uhr-ziel {
  fill: #eef1fd;
  stroke: var(--cobalt);
}
.uhr-zahl:focus-visible .uhr-ziel {
  stroke: var(--cobalt);
  stroke-width: 3.5;
}
@media (hover: hover) {
  .uhr-zahl:hover .uhr-ziel {
    stroke: var(--cobalt);
  }
}
.uhr-ziffer {
  fill: var(--ink);
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 21px;
  font-weight: 700;
  text-anchor: middle;
  pointer-events: none;
}
.frame.quiet .uhr-rand,
.frame.quiet .muenz-tisch {
  background-color: #fff;
}
/* (V296 Ende) */

/* ======================================================================
   (V298) KÄSTCHEN FÄRBEN. Ein Raster wie im karierten Heft: Was schon
   gefärbt ist, steht in Schiefer, was das Kind färbt, in Kobalt wie jede
   Wahl, und was nicht zum Färben ist, ist Papier. Eine Spiegellinie ist ein
   Strich in Tinte zwischen zwei Kästchen. Kein Rot und kein Grün (R6, R9),
   und jedes Kästchen ist mindestens 44 px gross - darum hat ein Raster
   höchstens sechs Spalten.
   ====================================================================== */
.faerb-raster {
  display: grid;
  grid-template-columns: repeat(var(--spalten), minmax(0, 1fr));
  gap: 1px;
  width: min(100%, calc(var(--spalten) * 56px + 4px));
  margin: 10px auto 6px;
  border: 2px solid var(--ink-soft);
  border-radius: 6px;
  overflow: hidden;
  background: #c9d1c4;
}
/* Der Fokus beginnt beim Raster und nicht bei einem Kästchen (wie beim
   Zahlenstrahl, V274) - ein Ring um das ganze Raster sähe aus wie eine Wahl. */
.faerb-raster:focus {
  outline: none;
}
.faerb-feld {
  position: relative;
  display: block;
  aspect-ratio: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  font: inherit;
}
/* Was sich färben lässt, trägt einen hellen Rand in Kobalt - so steht eine
   Lücke im Muster oder die leere Seite der Linie sichtbar da. */
.faerb-feld.frei {
  box-shadow: inset 0 0 0 2px #c3cdf3;
  cursor: pointer;
}
/* Wo jedes Kästchen frei ist, braucht keines den Rand. */
.faerb-raster.alle-frei .faerb-feld.frei {
  box-shadow: none;
}
.faerb-feld.papier {
  background: var(--plaster);
}
.faerb-feld.fest {
  background: #7b89a6;
}
.faerb-feld.gewaehlt {
  background: var(--cobalt);
}
.faerb-raster .faerb-feld.frei:focus-visible {
  z-index: 1;
  outline: 3px solid var(--cobalt);
  outline-offset: -3px;
  box-shadow: inset 0 0 0 5px #fff;
}
@media (hover: hover) {
  .faerb-feld.frei:not(.gewaehlt):hover {
    background: #eef1fd;
  }
}
/* Die Spiegellinie: ein Strich zwischen zwei Kästchen, über die Fuge hinweg. */
.faerb-feld.linie-rechts::before,
.faerb-feld.linie-links::before {
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 3px;
  background: var(--ink);
  content: "";
}
.faerb-feld.linie-rechts::before {
  right: -1px;
}
.faerb-feld.linie-links::before {
  left: -1px;
}
.faerb-feld.linie-unten::after,
.faerb-feld.linie-oben::after {
  position: absolute;
  right: -1px;
  left: -1px;
  height: 3px;
  background: var(--ink);
  content: "";
}
.faerb-feld.linie-unten::after {
  bottom: -1px;
}
.faerb-feld.linie-oben::after {
  top: -1px;
}
/* Die Lösung, auf «Lösung» hin (V278): umrandet, wie die Stelle im Bild. */
.faerb-feld.ist-loesung {
  outline: 3px dashed var(--ink);
  outline-offset: -7px;
}
.faerb-feld.gewaehlt.ist-loesung {
  outline-color: #fff;
}
/* BREIT UND NIEDRIG (V159): Ein Tablet quer zeigt die Aufgabe ohne Scrollen.
   Das Raster richtet sich nach der Höhe des Fensters, und der Satz darunter
   und «Nochmals» stehen daneben statt darunter. */
@media (min-width: 1024px) and (max-height: 860px) {
  [data-felder]:has(> .faerb-raster) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 18px;
    align-items: end;
  }
  [data-felder]:has(> .faerb-raster) > .faerb-raster {
    grid-row: span 2;
    width: min(
      calc(var(--spalten) * 56px + 4px),
      calc((100dvh - 400px) * var(--spalten) / var(--zeilen) + 4px)
    );
    min-width: calc(var(--spalten) * 40px + 4px);
    margin: 4px 0 0;
  }
  [data-felder]:has(> .faerb-raster) > .alle-zahl,
  [data-felder]:has(> .faerb-raster) > .btn {
    justify-self: start;
    margin: 0;
  }
}
/* (V298 Ende) */

/* ======================================================================
   (V299) ZWISCHEN DIE BUCHSTABEN TIPPEN. Die Buchstaben stehen gross
   nebeneinander, und zwischen je zwei liegt eine Lücke mit einem kleinen
   Punkt; angetippt steht dort ein Strich in Kobalt wie jede Wahl. Die
   Lücke ist schmal, ihr Tippziel aber 44 px breit - es reicht über die
   Buchstaben daneben, die selbst nichts fangen. Kein Rot und kein Grün
   (R6, R9).
   ====================================================================== */
.trenn-reihe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 4px;
  margin: 12px 0 6px;
  padding: 8px 4px;
  border: 1.5px solid var(--linie);
  border-radius: 14px;
  background: #fff;
}
.trenn-reihe:focus {
  outline: none;
}
.trenn-stueck {
  display: inline-flex;
  align-items: stretch;
}
.trenn-buchstabe {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 52px;
  color: var(--ink);
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 28px;
  font-weight: 700;
  pointer-events: none;
}
.trenn-luecke {
  position: relative;
  width: 22px;
  height: 52px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
/* Das Tippziel: 44 px breit, über die Buchstaben links und rechts. */
.trenn-luecke::before {
  position: absolute;
  inset: 0 -11px;
  content: "";
}
/* Der Punkt sagt, dass hier eine Lücke ist; gesetzt wird er ein Strich. */
.trenn-luecke::after {
  position: absolute;
  bottom: 9px;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: #c3cdf3;
  content: "";
}
.trenn-luecke.gewaehlt::after {
  top: 6px;
  bottom: 6px;
  width: 4px;
  height: auto;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--cobalt);
}
.trenn-luecke:focus-visible {
  border-radius: 6px;
  outline: 3px solid var(--cobalt);
  outline-offset: -2px;
}
@media (hover: hover) {
  .trenn-luecke:not(.gewaehlt):hover::after {
    background: var(--cobalt);
  }
}
/* BREIT UND NIEDRIG (V159): Ein Tablet quer zeigt die Aufgabe ohne Scrollen.
   Das Bild über den Buchstaben wird kleiner, und Satz und «Nochmals» teilen
   sich eine Zeile. */
@media (min-width: 1024px) and (max-height: 860px) {
  [data-bild]:has(+ form .trenn-reihe) .aufgabenbild {
    padding: 4px 12px;
    margin-bottom: 10px;
  }
  [data-bild]:has(+ form .trenn-reihe) .zeichen {
    font-size: 40px;
  }
  [data-felder]:has(> .trenn-reihe) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
  }
  [data-felder]:has(> .trenn-reihe) > .trenn-reihe {
    flex-basis: 100%;
    margin: 0 0 2px;
  }
  [data-felder]:has(> .trenn-reihe) > .alle-zahl {
    flex: 1 1 0;
    margin: 0;
  }
}
/* (V299 Ende) */

/* ======================================================================
   (V300) EIN SÄULENDIAGRAMM ZEICHNEN. Eine Achse mit ihren Zahlen, feine
   Linien auf jeder Stufe, und jede Säule ein Regler: Was das Kind
   hochzieht, steht in Kobalt wie jede Wahl. Eine Säule ist so breit wie
   ihr Platz, also immer breiter als 44 px. Kein Rot und kein Grün (R6, R9).
   ====================================================================== */
.saeulen-diagramm {
  --stufe: 28px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  max-width: 420px;
  margin: 12px auto 4px;
}
.saeulen-achse {
  position: relative;
  height: calc(var(--stufen) * var(--stufe));
}
.saeulen-achse span {
  position: absolute;
  right: 6px;
  bottom: calc(var(--k) / var(--stufen) * 100%);
  transform: translateY(50%);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.saeulen-flaeche {
  display: grid;
  grid-template-columns: repeat(var(--saeulen), minmax(0, 1fr));
  gap: 10px;
  height: calc(var(--stufen) * var(--stufe));
  padding: 0 8px;
  border-bottom: 2px solid var(--ink);
  border-left: 2px solid var(--ink);
  background-image: repeating-linear-gradient(
    to top,
    transparent 0,
    transparent calc(var(--stufe) - 1px),
    #d5dbe6 calc(var(--stufe) - 1px),
    #d5dbe6 var(--stufe)
  );
  background-color: #fff;
}
.saeulen-spalte {
  position: relative;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  touch-action: manipulation;
}
.saeulen-spalte:focus {
  outline: none;
}
.saeulen-spalte:focus-visible {
  box-shadow: 0 0 0 3px var(--cobalt);
}
@media (hover: hover) {
  .saeulen-spalte:hover {
    background: rgba(42, 79, 215, 0.06);
  }
}
.saeulen-balken {
  position: absolute;
  right: 3px;
  bottom: 0;
  left: 3px;
  border-radius: 6px 6px 0 0;
  background: var(--cobalt);
}
.saeulen-namen {
  display: grid;
  grid-column: 2;
  grid-template-columns: repeat(var(--saeulen), minmax(0, 1fr));
  gap: 10px;
  padding: 6px 8px 0;
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}
/* BREIT UND NIEDRIG (V159): Ein Tablet quer zeigt die Aufgabe ohne Scrollen -
   die Stufen werden niedriger, die Säulen bleiben breit. */
@media (min-width: 1024px) and (max-height: 860px) {
  .saeulen-diagramm {
    --stufe: 15px;
    flex: 0 0 100%;
    max-width: none;
    margin-top: 2px;
  }
  /* Die Strichliste darüber wird niedriger: Ihre Striche behalten ihre Form. */
  [data-bild]:has(+ form .saeulen-diagramm) .aufgabenbild {
    padding: 6px 12px;
    margin-bottom: 8px;
  }
  [data-bild]:has(+ form .saeulen-diagramm) .gr-strichliste {
    gap: 2px 12px;
  }
  [data-bild]:has(+ form .saeulen-diagramm) .gr-strichzeile .grafik {
    width: auto;
    height: 24px;
  }
  [data-felder]:has(> .saeulen-diagramm) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
  }
  [data-felder]:has(> .saeulen-diagramm) > .alle-zahl {
    flex: 1 1 0;
    margin: 0;
  }
}
/* (V300 Ende) */

/* ======================================================================
   (V301) EIN LÜCKENTEXT MIT WORTKASTEN. Oben der Kasten mit den Wörtern als
   Kacheln, darunter die Sätze, nummeriert, mit einer Lücke als Knopf. Die
   gewählte leere Lücke trägt einen Rand in Kobalt wie jede Wahl, eine volle
   steht mit ihrem Wort da; ein eingesetztes Wort bleibt blass im Kasten
   stehen, damit der Kasten nicht springt. Kein Rot und kein Grün (R6, R9).
   ====================================================================== */
.lt-kasten {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 12px;
  padding: 10px 8px;
  border: 1.5px solid var(--linie);
  border-radius: 14px;
  background: #f4f6fd;
}
.lt-wort {
  min-height: 44px;
  padding: 8px 13px;
  border: 1.5px solid var(--linie);
  border-radius: 12px;
  background: var(--flaeche);
  box-shadow: 0 4px 0 var(--grau-kante);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.lt-wort:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--grau-kante);
}
/* Eingesetzt: blass und flach, aber an seinem Platz - antippen holt es zurück. */
.lt-wort.benutzt {
  opacity: 0.35;
  box-shadow: none;
}
.lt-wort:focus-visible,
.lt-luecke:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.lt-saetze {
  display: grid;
  gap: 10px;
  margin: 0 0 8px;
  padding: 0 0 0 26px;
  color: var(--ink);
  font-size: 17px;
  line-height: 2.1;
}
.lt-kasten:focus {
  outline: none;
}
.lt-satz::marker {
  color: var(--ink-soft);
  font-weight: 700;
}
.lt-luecke {
  display: inline-block;
  min-width: 64px;
  min-height: 44px;
  margin: 0 3px;
  padding: 4px 10px;
  border: 0;
  border-bottom: 3px solid var(--ink);
  border-radius: 8px 8px 0 0;
  background: #eef1fd;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  line-height: 1.6;
  vertical-align: middle;
  cursor: pointer;
}
.lt-luecke.gewaehlt {
  border-bottom-color: var(--cobalt);
  background: #dfe5fb;
  box-shadow: inset 0 0 0 2px var(--cobalt);
}
.lt-luecke.voll {
  background: var(--flaeche);
  color: var(--cobalt-tief);
}
.lt-hinweis {
  color: var(--ink-soft);
  font-size: 15px;
}
@media (hover: hover) {
  .lt-luecke:not(.gewaehlt):hover {
    background: #dfe5fb;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lt-wort:active {
    transform: none;
  }
}
/* BREIT UND NIEDRIG (V159): Ein Tablet quer zeigt die Aufgabe ohne Scrollen.
   Die Sätze rücken enger, und der Satz unter ihnen fällt weg. */
@media (min-width: 1024px) and (max-height: 860px) {
  .lt-kasten {
    margin: 6px 0 8px;
    padding: 8px;
  }
  .lt-saetze {
    gap: 4px;
    line-height: 1.9;
  }
  [data-felder]:has(> .lt-saetze) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
  }
  [data-felder]:has(> .lt-saetze) > .lt-kasten,
  [data-felder]:has(> .lt-saetze) > .lt-saetze {
    flex-basis: 100%;
  }
  /* Was der Satz sagt, sagt schon die Aufgabe darüber; hier zählt die Höhe. */
  [data-felder]:has(> .lt-saetze) > .alle-zahl {
    display: none;
  }
}
/* (V301 Ende) */

/* ======================================================================
   (V302) ZWEI KREISE, DIE SICH ÜBERSCHNEIDEN. Ein Rahmen mit zwei Kreisen
   und einem Streifen «in keinem Kreis», darunter die Karten. Auf dem
   Telefon stehen die Kreise übereinander, damit jede Gegend die ganze Breite
   hat; ab 640 px nebeneinander. Der eine Kreis in Kobalt, der andere im Rosa
   der Blüte (V157), das im Produkt sonst nichts sagt - kein Grün, kein
   Ziegelrot und kein Gelb, weil das Diagramm auch in eine Prüfung darf
   (R6, R9). Die gewählte Karte trägt einen Rand in Kobalt wie jede Wahl.
   ====================================================================== */
.venn-brett {
  --venn-a: var(--cobalt);
  --venn-b: #c4517f;
}
.venn-brett:focus {
  outline: none;
}
.venn-rahmen {
  margin: 10px 0 12px;
  padding: 8px 8px 0;
  border: 1.5px solid var(--linie);
  border-radius: 16px;
  background: var(--flaeche);
}
.venn {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  aspect-ratio: 1 / 1.1;
}
.venn-kreis {
  position: absolute;
  left: 0;
  right: 0;
  height: 62%;
  border: 2px solid;
  border-radius: 50%;
}
.venn-kreis-a {
  top: 0;
  border-color: color-mix(in srgb, var(--venn-a) 70%, transparent);
  background: color-mix(in srgb, var(--venn-a) 11%, transparent);
}
.venn-kreis-b {
  bottom: 0;
  border-color: color-mix(in srgb, var(--venn-b) 75%, transparent);
  background: color-mix(in srgb, var(--venn-b) 14%, transparent);
}
.venn-name {
  position: absolute;
  left: 15%;
  right: 15%;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  pointer-events: none;
}
.venn-name-a {
  top: 5%;
}
.venn-name-b {
  bottom: 5%;
}
.venn-feld {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 4px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.venn-feld:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: -3px;
}
.venn-a {
  top: 13%;
  height: 24%;
  left: 13%;
  right: 13%;
}
.venn-m {
  top: 40%;
  height: 20%;
  left: 17%;
  right: 17%;
}
.venn-b {
  bottom: 13%;
  height: 24%;
  left: 13%;
  right: 13%;
}
.venn-liegen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}
.venn-chip {
  padding: 2px 9px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--cobalt-tief);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
/* Was in keinem Kreis liegt: ein Streifen unter den Kreisen, im Rahmen. */
.venn-n {
  position: static;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px 8px;
  width: calc(100% + 16px);
  min-height: 52px;
  margin: 6px -8px 0;
  padding: 6px 12px;
  border-top: 1.5px solid var(--linie);
  border-radius: 0 0 15px 15px;
}
.venn-aussen-name {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
}
.venn-n .venn-liegen {
  justify-content: flex-start;
}
.venn-stapel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 8px;
}
.venn-karte {
  min-height: 44px;
  padding: 8px 13px;
  border: 1.5px solid var(--linie);
  border-radius: 12px;
  background: var(--flaeche);
  box-shadow: 0 4px 0 var(--grau-kante);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.venn-karte:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--grau-kante);
}
.venn-karte.gewaehlt {
  background: #dfe5fb;
  box-shadow: inset 0 0 0 2px var(--cobalt), 0 4px 0 var(--grau-kante);
}
/* Gelegt: blass und flach, aber an seinem Platz - antippen holt sie zurück. */
.venn-karte.benutzt {
  opacity: 0.35;
  box-shadow: none;
}
.venn-karte:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.venn-stapel > .venn-nochmals {
  min-height: 44px;
  margin: 0;
}
@media (hover: hover) {
  .venn-feld.bereit:hover {
    background: rgba(255, 255, 255, 0.45);
  }
}
@media (prefers-reduced-motion: reduce) {
  .venn-karte:active {
    transform: none;
  }
}
/* Ab 640 px stehen die Kreise nebeneinander, und die Mitte ist ein Streifen
   von oben nach unten. */
@media (min-width: 640px) {
  .venn {
    max-width: 640px;
    aspect-ratio: 2 / 1;
  }
  .venn-kreis {
    top: 0;
    bottom: 0;
    width: 60%;
    height: auto;
  }
  .venn-kreis-a {
    left: 0;
    right: auto;
  }
  .venn-kreis-b {
    left: auto;
    right: 0;
  }
  .venn-name {
    top: 7%;
    bottom: auto;
    width: 30%;
  }
  .venn-name-a {
    left: 6%;
    right: auto;
  }
  .venn-name-b {
    left: auto;
    right: 6%;
  }
  .venn-a,
  .venn-b {
    top: 26%;
    bottom: 12%;
    width: 31%;
    height: auto;
  }
  .venn-a {
    left: 6%;
    right: auto;
  }
  .venn-b {
    left: auto;
    right: 6%;
  }
  .venn-m {
    top: 14%;
    bottom: 14%;
    left: 40%;
    right: 40%;
    height: auto;
  }
}
/* BREIT UND NIEDRIG (V159): Ein Tablet quer zeigt die Aufgabe ohne Scrollen.
   Das Diagramm wird flacher, und der Satz unter ihm fällt weg. */
@media (min-width: 1024px) and (max-height: 860px) {
  .venn-rahmen {
    margin: 4px 0 8px;
    padding-top: 4px;
  }
  .venn {
    aspect-ratio: 3 / 1;
  }
  .venn-n {
    min-height: 44px;
    margin-top: 2px;
    padding: 2px 12px;
  }
  .venn-stapel {
    gap: 6px;
    margin: 0;
  }
  .venn-karte {
    padding: 6px 12px;
    font-size: 15px;
  }
  /* Was der Satz sagt, sagt schon die Aufgabe darüber; hier zählt die Höhe. */
  [data-felder]:has(> .venn-brett) > .alle-zahl {
    display: none;
  }
}
/* (V302 Ende) */

/* ======================================================================
   (V303) WORTARTEN IM SATZ MARKIEREN. Oben die Stifte, darunter der Satz,
   jedes Wort ein Knopf. Ein markiertes Wort trägt die Farbe seines Stifts als
   Fläche und dicken Strich darunter und sein Kürzel darüber - die Farbe ist
   nie das einzige Zeichen. Seit V304 in den Farben der Wortarten, wie sie in
   der Schweiz verbreitet sind (darunter). Der gewählte Stift trägt einen Rand
   in Kobalt wie jede Wahl.
   ====================================================================== */
.mk-brett:focus {
  outline: none;
}
/* DIE FARBEN DER WORTARTEN, WIE SIE IN DER SCHWEIZ IM UNTERRICHT VERBREITET
   SIND (V304), angeordnet am 15.10.2026: «nimm die standard farben für die
   wortarten zum markieren». Verb blau, Nomen braun, Adjektiv gelb, Pronomen
   orange; der Artikel gehört dort zu den Pronomen und trägt ein helleres
   Orange derselben Familie. Gelb steht damit auch in einer Prüfung - eine
   angeordnete Abweichung von docs/03 Abschnitt 4; Grün und Ziegelrot, die
   das Urteil sind (R6, R9), kommen nicht vor. Auf Gelb und Orange steht das
   Kürzel in Tinte, auf Blau und Braun in Weiss. */
.mk-brett [data-stift="n"] {
  --stift: #8a5a2b;
  --stift-schrift: #fff;
}
.mk-brett [data-stift="v"] {
  --stift: #2a5bd7;
  --stift-schrift: #fff;
}
.mk-brett [data-stift="a"] {
  --stift: #f2c12e;
  --stift-schrift: var(--ink);
}
.mk-brett [data-stift="r"] {
  --stift: #f6b36b;
  --stift-schrift: var(--ink);
}
.mk-brett [data-stift="p"] {
  --stift: #e3791c;
  --stift-schrift: var(--ink);
}
.mk-stifte {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 14px;
}
.mk-stift {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 6px 12px 6px 7px;
  border: 1.5px solid var(--linie);
  border-radius: 999px;
  background: var(--flaeche);
  box-shadow: 0 3px 0 var(--grau-kante);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.mk-stift .mk-kurz {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 26px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--stift);
  color: var(--stift-schrift, #fff);
  font-size: 12px;
  font-weight: 800;
}
.mk-stift.gewaehlt {
  background: #dfe5fb;
  box-shadow: inset 0 0 0 2px var(--cobalt), 0 3px 0 var(--grau-kante);
}
.mk-satz {
  margin: 0 0 10px;
  padding: 18px 8px 6px;
  border: 1.5px solid var(--linie);
  border-radius: 14px;
  background: var(--flaeche);
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  line-height: 2.6;
  text-align: center;
}
.mk-wort {
  position: relative;
  min-height: 44px;
  margin: 0 1px;
  padding: 2px 5px;
  border: 0;
  border-bottom: 4px solid transparent;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  line-height: 1.6;
  vertical-align: middle;
  cursor: pointer;
}
.mk-wort[data-stift] {
  border-bottom-color: var(--stift);
  background: color-mix(in srgb, var(--stift) 20%, transparent);
}
/* Das Kürzel steht über dem Wort, damit die Zeile nicht springt. */
.mk-wort .mk-kurz {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, 2px);
  padding: 0 5px;
  border-radius: 999px;
  background: var(--stift);
  color: var(--stift-schrift, #fff);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.5;
  white-space: nowrap;
}
.mk-stift:focus-visible,
.mk-wort:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
@media (hover: hover) {
  .mk-wort:not([data-stift]):hover {
    background: #eef1fd;
  }
}
/* BREIT UND NIEDRIG (V159): Ein Tablet quer zeigt die Aufgabe ohne Scrollen,
   der Satz unter dem Satz fällt weg. */
@media (min-width: 1024px) and (max-height: 860px) {
  .mk-stifte {
    margin: 6px 0 8px;
  }
  [data-felder]:has(> .mk-brett) > .alle-zahl {
    display: none;
  }
}
/* (V303 Ende) */

/* ======================================================================
   (V305) WÖRTER IM GITTER SUCHEN. Ein Gitter aus Buchstaben, daneben die
   deutschen Wörter und die markierten Strecken. Der Anfang trägt einen Ring
   in Kobalt wie jede Wahl, eine markierte Strecke eine Fläche in Kobalt -
   gleich, ob sie stimmt; das sagt erst «Prüfen». Kein Grün, kein Ziegelrot
   (R6, R9). Ab 640 px stehen Gitter und Wörter nebeneinander.
   ====================================================================== */
.ws-brett {
  display: grid;
  gap: 12px;
  margin: 10px 0 12px;
}
.ws-brett:focus {
  outline: none;
}
.ws-gitter {
  display: grid;
  grid-template-columns: repeat(var(--spalten), minmax(0, 1fr));
  gap: 3px;
  width: 100%;
  max-width: calc(var(--spalten) * 46px);
  margin: 0 auto;
  padding: 6px;
  border: 1.5px solid var(--linie);
  border-radius: 14px;
  background: var(--flaeche);
}
.ws-feld {
  aspect-ratio: 1;
  min-width: 0;
  min-height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #f1f3f8;
  color: var(--ink);
  font: inherit;
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.ws-feld.markiert {
  background: color-mix(in srgb, var(--cobalt) 22%, #fff);
  color: var(--cobalt-tief);
}
.ws-feld.start {
  box-shadow: inset 0 0 0 3px var(--cobalt);
  background: #dfe5fb;
}
.ws-feld:focus-visible,
.ws-strecke:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 1px;
}
.ws-titel {
  margin: 0 0 4px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 700;
}
.ws-hinweise {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
}
.ws-gefunden {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ws-strecke {
  min-height: 44px;
  padding: 6px 12px;
  border: 1.5px solid var(--linie);
  border-radius: 999px;
  background: color-mix(in srgb, var(--cobalt) 12%, #fff);
  color: var(--cobalt-tief);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.ws-gefunden > .ws-nochmals {
  min-height: 44px;
  margin: 0;
}
@media (hover: hover) {
  .ws-feld:not(.start):hover {
    background: #e3e8f6;
  }
}
@media (min-width: 640px) {
  .ws-brett {
    grid-template-columns: auto 1fr;
    align-items: start;
  }
  .ws-gitter {
    width: calc(var(--spalten) * 44px);
  }
  .ws-hinweise {
    flex-direction: column;
  }
}
/* BREIT UND NIEDRIG (V159): Ein Tablet quer zeigt die Aufgabe ohne Scrollen -
   ein kleineres Gitter, und der Satz unter ihm fällt weg. */
@media (min-width: 1024px) and (max-height: 860px) {
  .ws-brett {
    margin: 4px 0 8px;
  }
  .ws-gitter {
    width: calc(var(--spalten) * 41px);
    padding: 4px;
  }
  .ws-feld {
    min-height: 36px;
    font-size: 17px;
  }
  [data-felder]:has(> .ws-brett) > .alle-zahl {
    display: none;
  }
}
/* (V305 Ende) */

/* ======================================================================
   (V306) EIN ZAUBERQUADRAT FÜLLEN. Drei mal drei Felder: die vorgegebenen
   grau und still, die leeren als Knöpfe, ein belegtes in Kobalt. Darunter die
   Kärtchen; das gewählte trägt einen Rand in Kobalt wie jede Wahl, ein
   gelegtes bleibt blass an seinem Platz. Nichts sagt, ob eine Zeile stimmt -
   das rechnet das Kind (R6, R9).
   ====================================================================== */
.zq-brett {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin: 10px 0 12px;
}
.zq-brett:focus {
  outline: none;
}
.zq-quadrat {
  display: grid;
  grid-template-columns: repeat(3, 72px);
  grid-auto-rows: 72px;
  gap: 6px;
  padding: 8px;
  border: 1.5px solid var(--linie);
  border-radius: 16px;
  background: var(--flaeche);
}
.zq-feld {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 0;
  border: 1.5px solid var(--linie);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.zq-feld.fest {
  border-color: transparent;
  background: #e6e9f1;
  color: var(--ink-soft);
}
button.zq-feld {
  cursor: pointer;
}
.zq-feld.leer {
  background: #f4f6fd;
}
.zq-feld.belegt {
  border-color: color-mix(in srgb, var(--cobalt) 45%, transparent);
  background: color-mix(in srgb, var(--cobalt) 12%, #fff);
  color: var(--cobalt-tief);
}
.zq-kaertchen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.zq-karte {
  min-width: 52px;
  min-height: 48px;
  padding: 8px 12px;
  border: 1.5px solid var(--linie);
  border-radius: 12px;
  background: var(--flaeche);
  box-shadow: 0 4px 0 var(--grau-kante);
  color: var(--ink);
  font: inherit;
  font-size: 19px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.zq-karte.gewaehlt {
  background: #dfe5fb;
  box-shadow: inset 0 0 0 2px var(--cobalt), 0 4px 0 var(--grau-kante);
}
.zq-karte.benutzt {
  opacity: 0.35;
  box-shadow: none;
}
.zq-kaertchen > .zq-nochmals {
  min-height: 48px;
  margin: 0;
}
.zq-feld:focus-visible,
.zq-karte:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
@media (hover: hover) {
  .zq-feld.leer:hover {
    background: #e3e8f6;
  }
}
/* Ab 640 px stehen Quadrat und Kärtchen nebeneinander. */
@media (min-width: 640px) {
  .zq-brett {
    grid-template-columns: auto minmax(0, 260px);
    align-items: center;
    justify-content: center;
  }
  .zq-kaertchen {
    justify-content: flex-start;
  }
}
/* BREIT UND NIEDRIG (V159): Ein Tablet quer zeigt die Aufgabe ohne Scrollen. */
@media (min-width: 1024px) and (max-height: 860px) {
  .zq-brett {
    margin: 4px 0 8px;
  }
  .zq-quadrat {
    grid-template-columns: repeat(3, 62px);
    grid-auto-rows: 62px;
  }
  [data-felder]:has(> .zq-brett) > .alle-zahl {
    display: none;
  }
}
/* (V306 Ende) */

/* ======================================================================
   (V307) EIN KREUZWORTRÄTSEL LÖSEN. Ein Gitter aus Feldern ohne schwarze
   Kästchen - wo kein Wort liegt, bleibt der Grund frei -, die Nummern klein
   oben links, daneben die Hinweise. Das Wort, das dran ist, trägt eine
   helle Fläche in Kobalt, das Feld mit dem Fokus einen Ring in Kobalt wie
   jede Wahl - gleich, ob ein Buchstabe stimmt; das sagt erst «Prüfen». Kein
   Grün, kein Ziegelrot (R6, R9). Ab 640 px stehen Gitter und Hinweise
   nebeneinander.
   ====================================================================== */
.kw-brett {
  display: grid;
  gap: 10px;
  margin: 10px 0 12px;
}
.kw-brett:focus {
  outline: none;
}
.kw-aktiv {
  min-height: 24px;
  margin: 0;
  color: var(--cobalt-tief);
  font-size: 16px;
  font-weight: 800;
  text-align: center;
}
.kw-gitter {
  display: grid;
  grid-template-columns: repeat(var(--spalten), minmax(0, 1fr));
  gap: 3px;
  width: 100%;
  max-width: calc(var(--spalten) * 48px);
  margin: 0 auto;
}
.kw-zelle {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  min-height: 40px;
  border: 1.5px solid var(--grau-kante);
  border-radius: 7px;
  background: #fff;
}
.kw-zelle.im-wort {
  border-color: color-mix(in srgb, var(--cobalt) 45%, #fff);
  background: color-mix(in srgb, var(--cobalt) 12%, #fff);
}
.kw-zelle:has(> .kw-feld:focus) {
  border-color: var(--cobalt);
  box-shadow: 0 0 0 2px var(--cobalt);
  background: #dfe5fb;
}
.kw-frei {
  min-width: 0;
}
.kw-nr {
  position: absolute;
  top: 2px;
  left: 4px;
  color: var(--ink-soft);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}
.kw-feld {
  width: 100%;
  height: 100%;
  padding: 6px 0 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--ink);
  caret-color: transparent;
  font: inherit;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}
.kw-feld:focus {
  outline: none;
}
.kw-feld::selection {
  background: transparent;
}
.kw-seite {
  display: grid;
  gap: 8px;
  align-content: start;
}
.kw-block {
  display: grid;
  gap: 4px;
}
.kw-titel {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 700;
}
.kw-hinweis {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 44px;
  padding: 6px 12px;
  border: 1.5px solid var(--linie);
  border-radius: 12px;
  background: var(--flaeche);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.kw-hinweis.aktiv {
  border-color: var(--cobalt);
  background: color-mix(in srgb, var(--cobalt) 12%, #fff);
  color: var(--cobalt-tief);
}
.kw-hinweis-nr {
  min-width: 1.4em;
  color: var(--cobalt-tief);
  font-weight: 800;
}
.kw-hinweis:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 1px;
}
.kw-seite > .kw-nochmals {
  justify-self: start;
  min-height: 44px;
  margin: 0;
}
@media (hover: hover) {
  .kw-hinweis:not(.aktiv):hover {
    background: #eef1f8;
  }
}
@media (min-width: 640px) {
  .kw-brett {
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: 18px;
  }
  .kw-aktiv {
    grid-column: 1 / -1;
  }
  .kw-gitter {
    width: calc(var(--spalten) * 46px);
  }
}
/* BREIT UND NIEDRIG (V159): Ein Tablet quer zeigt die Aufgabe ohne Scrollen -
   kleinere Felder, die Hinweise enger, und der Satz unter dem Brett fällt weg.
   Ebenso die Zeile mit dem Wort, das dran ist: Daneben ist sein Hinweis
   hervorgehoben. */
@media (min-width: 1024px) and (max-height: 860px) {
  .kw-brett {
    margin: 4px 0 8px;
    gap: 6px;
  }
  .kw-aktiv {
    display: none;
  }
  .kw-seite {
    gap: 5px;
  }
  .kw-block {
    gap: 3px;
  }
  .kw-gitter {
    width: calc(var(--spalten) * 40px);
  }
  .kw-zelle {
    min-height: 36px;
  }
  .kw-feld {
    font-size: 18px;
  }
  .kw-hinweis {
    min-height: 38px;
    padding: 3px 10px;
    font-size: 15px;
  }
  [data-felder]:has(> .kw-brett) > .alle-zahl {
    display: none;
  }
}
/* (V307 Ende) */

/* ==========================================================================
   (V308) DEN ROBOTER PROGRAMMIEREN. Ein Raster mit dem Roboter, dem Schlüssel
   und Steinen aus Fluent Emoji, darunter das Programm und die Befehle. Ein
   gelegter Befehl ist Kobalt wie jede Wahl; ob das Programm der kürzeste Weg
   ist, sagt erst «Prüfen». Beim Üben fährt der Roboter auf «Los» ab: Die Spur
   steht als nummerierte Punkte in Kobalt da und taucht nur ohne den Wunsch
   nach weniger Bewegung nacheinander auf. Wer an einen Stein stösst, wackelt
   - ohne Farbe. Kein Grün, kein Ziegelrot (R6, R9).
   ====================================================================== */
.pg-brett {
  display: grid;
  gap: 10px;
  margin: 10px 0 12px;
}
.pg-brett:focus {
  outline: none;
}
.pg-raster {
  display: grid;
  grid-template-columns: repeat(var(--spalten), minmax(0, 1fr));
  gap: 3px;
  width: 100%;
  max-width: calc(var(--spalten) * 54px);
  margin: 0 auto;
  padding: 5px;
  border: 1.5px solid var(--linie);
  border-radius: 12px;
  background: var(--flaeche);
}
.pg-feld {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-width: 0;
  border-radius: 7px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--grau-kante);
}
.pg-feld.stein {
  background: #eceef2;
}
.pg-feld.ziel {
  background: #fdf4dc;
}
.pg-feld > .pg-bild,
.pg-roboter > .pg-bild {
  width: 76%;
  height: 76%;
  object-fit: contain;
}
.pg-feld > * {
  grid-area: 1 / 1;
}
.pg-roboter {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.pg-roboter.pg-geist {
  opacity: 0.32;
}
/* Wohin der Roboter schaut: ein Dreieck am Rand seines Felds. */
.pg-blick {
  position: absolute;
  width: 14px;
  height: 11px;
  background: var(--cobalt);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.pg-blick[data-blick="o"] {
  top: -1px;
  left: calc(50% - 7px);
}
.pg-blick[data-blick="u"] {
  bottom: -1px;
  left: calc(50% - 7px);
  transform: rotate(180deg);
}
.pg-blick[data-blick="r"] {
  top: calc(50% - 5.5px);
  right: -2px;
  transform: rotate(90deg);
}
.pg-blick[data-blick="l"] {
  top: calc(50% - 5.5px);
  left: -2px;
  transform: rotate(-90deg);
}
.pg-spur {
  z-index: 1;
  place-self: start;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  margin: 3px;
  border-radius: 50%;
  background: var(--cobalt);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.pg-programm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-height: 56px;
  padding: 5px;
  border: 1.5px solid var(--linie);
  border-radius: 12px;
  background: var(--flaeche);
}
.pg-leer {
  padding: 0 8px;
  color: var(--ink-soft);
  font-size: 15px;
}
.pg-chip {
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1.5px solid var(--cobalt);
  border-radius: 9px;
  background: #fff;
  color: var(--cobalt-tief);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}
.pg-befehle {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.pg-befehle.drehen {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pg-befehl {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  min-height: 58px;
  padding: 4px 2px;
  border: 1.5px solid var(--grau-kante);
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 2px 0 var(--grau-kante);
}
.pg-befehl:disabled {
  opacity: 0.45;
}
.pg-zeichen {
  color: var(--cobalt-tief);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}
.pg-wort {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.15;
}
.pg-befehl:focus-visible,
.pg-chip:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 1px;
}
.pg-steuer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pg-steuer > .btn {
  min-height: 44px;
  margin: 0;
}
.pg-satz {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
}
@media (hover: hover) {
  .pg-befehl:not(:disabled):hover,
  .pg-chip:hover {
    background: #eef1f8;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .pg-spur,
  .pg-ende {
    animation: pg-auftauchen 0.28s ease-out both;
    animation-delay: calc(var(--k) * 0.22s);
  }
  .pg-ende.angestossen {
    animation:
      pg-auftauchen 0.28s ease-out both calc(var(--k) * 0.22s),
      pg-stoss 0.42s ease-in-out calc(var(--k) * 0.22s + 0.3s);
  }
}
@keyframes pg-auftauchen {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}
@keyframes pg-stoss {
  25% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
}
/* AB 640 PX steht das Raster links und daneben, was man tut - Programm,
   Befehle, «Los» -, damit auch ein langes Programm das Raster nicht nach oben
   aus dem Fenster schiebt. */
@media (min-width: 640px) {
  .pg-brett {
    grid-template-columns: auto minmax(0, 1fr);
    /* Vier Zeilen für Programm, Befehle, «Los» und den Satz; die fünfte nimmt
       auf, was das Raster höher ist - sonst rückten sie auseinander. */
    grid-template-rows: repeat(4, auto) 1fr;
    align-items: start;
    column-gap: 16px;
  }
  .pg-raster {
    grid-row: 1 / span 5;
    width: calc(var(--spalten) * 48px);
  }
  .pg-brett > :not(.pg-raster) {
    grid-column: 2;
  }
  .pg-befehle,
  .pg-befehle.drehen {
    grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));
  }
}
/* BREIT UND NIEDRIG (V159): Ein Tablet quer zeigt die Aufgabe ohne Scrollen -
   kleinere Felder, die Befehle in einer Zeile, und der Satz unter dem Brett
   fällt weg. */
@media (min-width: 1024px) and (max-height: 860px) {
  .pg-brett {
    margin: 4px 0 8px;
    gap: 6px 12px;
  }
  .pg-raster {
    width: calc(var(--spalten) * 38px);
    padding: 3px;
  }
  .pg-programm {
    gap: 4px;
    min-height: 50px;
    padding: 3px;
  }
  .pg-steuer {
    flex-wrap: nowrap;
    gap: 6px;
  }
  .pg-steuer > .btn {
    padding: 0 12px;
    font-size: 15px;
  }
  .pg-satz {
    font-size: 15px;
  }
  .pg-befehle {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .pg-befehle.drehen {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .pg-befehl {
    grid-auto-flow: column;
    gap: 6px;
    min-height: 44px;
  }
  /* Die Pfeile sagen selbst, wohin; ihr Wort hört die Vorlesehilfe weiter. */
  .pg-befehle:not(.drehen) .pg-wort {
    display: none;
  }
  [data-felder]:has(> .pg-brett) > .alle-zahl {
    display: none;
  }
}
/* (V308 Ende) */

/* ==========================================================================
   (V309) PLÄTTCHEN IN DER STELLENWERTTAFEL. Eine Spalte je Stelle, oben ihr
   Kürzel, darin die Plättchen in Zehnerfeldern - ein leeres Feld zeigt seine
   zehn Plätze -, darunter «−» und «+». Ein Plättchen ist Kobalt wie jede
   Wahl; welche Zahl daliegt, sagt kein Wert, und ob sie stimmt, erst
   «Prüfen». Vor den Zehnteln steht das Komma. Kein Grün, kein Ziegelrot
   (R6, R9).
   ====================================================================== */
.sw-tafel {
  --gross: 13px;
  --breit: 5;
  display: grid;
  grid-template-columns: repeat(var(--spalten), minmax(0, 1fr));
  gap: 4px;
  margin: 10px 0 6px;
  padding: 4px;
  border: 1.5px solid var(--linie);
  border-radius: 12px;
  background: var(--flaeche);
}
.sw-tafel:focus {
  outline: none;
}
.sw-tafel[data-spalten="2"] {
  --gross: 18px;
  gap: 8px;
}
/* Vier und fünf Spalten sind schmal: dort stehen die zehn Plätze in fünf
   Reihen zu zwei, wie ein Zehnerfeld hochkant. */
.sw-tafel[data-spalten="4"],
.sw-tafel[data-spalten="5"] {
  --breit: 2;
}
.sw-spalte {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px 2px;
  border-radius: 9px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--grau-kante);
}
/* Das Komma steht zwischen den Einern und den Zehnteln. */
.sw-spalte.nach-komma::before {
  content: ",";
  position: absolute;
  top: 0;
  left: -6px;
  color: var(--ink);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}
.sw-tafel:has(.nach-komma) {
  column-gap: 7px;
}
.sw-tafel:has(.nach-komma) .sw-spalte {
  padding-inline: 1px;
}
.sw-kopf {
  color: var(--cobalt-tief);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
}
.sw-feld {
  display: grid;
  align-content: start;
  gap: 6px;
}
.sw-zehn {
  display: grid;
  grid-template-columns: repeat(var(--breit), var(--gross));
  gap: 3px;
}
.sw-plaettchen,
.sw-platz {
  width: var(--gross);
  height: var(--gross);
  border-radius: 50%;
}
.sw-plaettchen {
  background: radial-gradient(circle at 35% 30%, #7d98e3, var(--cobalt) 70%);
  box-shadow: 0 1px 0 var(--cobalt-tief);
}
.sw-platz {
  box-shadow: inset 0 0 0 1.5px var(--grau-kante);
}
.sw-knoepfe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
}
.sw-weg,
.sw-dazu {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid var(--grau-kante);
  border-radius: 11px;
  background: #fff;
  color: var(--cobalt-tief);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 0 var(--grau-kante);
}
.sw-weg:disabled,
.sw-dazu:disabled {
  opacity: 0.4;
}
.sw-weg:focus-visible,
.sw-dazu:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 1px;
}
.sw-summe {
  margin: 0 0 6px;
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 700;
}
@media (hover: hover) {
  .sw-weg:not(:disabled):hover,
  .sw-dazu:not(:disabled):hover {
    background: #eef1f8;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .sw-plaettchen {
    animation: sw-hinlegen 0.18s ease-out;
  }
}
@keyframes sw-hinlegen {
  from {
    transform: scale(0.6);
  }
}
/* AB 640 PX ist Platz: grössere Plättchen, und auch fünf Spalten tragen ihre
   Zehnerfelder in zwei Reihen zu fünf. */
@media (min-width: 640px) {
  .sw-tafel {
    --gross: 17px;
    gap: 8px;
    padding: 6px;
  }
  .sw-tafel[data-spalten="2"] {
    --gross: 21px;
  }
  .sw-tafel[data-spalten="4"],
  .sw-tafel[data-spalten="5"] {
    --gross: 12px;
    --breit: 5;
  }
}
/* BREIT UND NIEDRIG (V159): Ein Tablet quer zeigt die Aufgabe ohne Scrollen -
   die Spalten niedriger, und die Hilfe unter der Tafel fällt weg. */
@media (min-width: 1024px) and (max-height: 860px) {
  .sw-tafel {
    margin: 4px 0;
  }
  .sw-spalte {
    gap: 4px;
    padding: 4px 3px;
  }
  .sw-knoepfe {
    flex-wrap: nowrap;
  }
  .sw-summe {
    font-size: 14px;
  }
  [data-felder]:has(> .sw-tafel) > .alle-zahl {
    display: none;
  }
}
/* (V309 Ende) */

/* ==========================================================================
   (V310) DOMINO LEGEN. Steine mit zwei Hälften und einem Strich dazwischen:
   links eine Antwort, rechts eine Frage. Oben die Kette, angefangen beim
   Startstein, darunter die Steine, die noch zu legen sind. Ein gelegter Stein
   trägt einen Rand in Kobalt wie jede Wahl; ob die Kette stimmt, sagt erst
   «Prüfen». Kein Grün, kein Ziegelrot (R6, R9).
   ====================================================================== */
.dom-brett {
  display: grid;
  gap: 10px;
  margin: 10px 0 8px;
}
.dom-brett:focus {
  outline: none;
}
.dom-kette,
.dom-vorrat,
.dom-seite {
  display: grid;
  gap: 6px;
  align-content: start;
}
.dom-seite {
  gap: 10px;
}
.dom-nochmals {
  justify-self: start;
  margin: 0;
}
.dom-kette {
  padding: 6px;
  border: 1.5px solid var(--linie);
  border-radius: 12px;
  background: var(--flaeche);
}
.dom-stein {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 48px;
  padding: 0;
  border: 1.5px solid var(--grau-kante);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 2px 0 var(--grau-kante);
}
.dom-stein.gelegt {
  border-color: var(--cobalt);
  box-shadow: 0 2px 0 var(--cobalt);
}
.dom-start {
  background: #f5f7fc;
  box-shadow: none;
}
.dom-haelfte {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 6px 8px;
  overflow-wrap: anywhere;
}
/* Der Strich in der Mitte eines Steins. */
.dom-haelfte.links {
  border-right: 2px solid var(--grau-kante);
}
.dom-start .dom-haelfte.links,
.dom-haelfte.ziel {
  color: var(--cobalt-tief);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.dom-platz {
  display: grid;
  place-items: center;
  min-height: 44px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1.5px var(--grau-kante);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 700;
}
.dom-stein:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 1px;
}
@media (hover: hover) {
  button.dom-stein:hover {
    background: #eef1f8;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .dom-stein.gelegt:last-of-type {
    animation: dom-anlegen 0.2s ease-out;
  }
}
@keyframes dom-anlegen {
  from {
    transform: translateY(6px);
    opacity: 0.4;
  }
}
/* AB 640 PX steht die Kette links und daneben, was noch zu legen ist. */
@media (min-width: 640px) {
  .dom-brett {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 12px;
  }
}
/* BREIT UND NIEDRIG (V159): Ein Tablet quer zeigt die Aufgabe ohne Scrollen -
   die Steine niedriger, und die Hilfe unter dem Brett fällt weg. */
@media (min-width: 1024px) and (max-height: 860px) {
  .dom-brett {
    margin: 4px 0;
  }
  .dom-kette,
  .dom-vorrat {
    gap: 4px;
  }
  .dom-stein {
    min-height: 44px;
    font-size: 15px;
  }
  .dom-haelfte {
    padding: 4px 6px;
  }
  .dom-platz {
    min-height: 40px;
  }
  [data-felder]:has(> .dom-brett) > .alle-zahl {
    display: none;
  }
}
/* (V310 Ende) */

/* ==========================================================================
   (V311) RECHENZEICHEN EINSETZEN. Drei Zeilen mit Zahlen und Lücken dazwischen,
   darunter die Zeichen. Die Lücke, die dran ist, trägt einen Rand in Kobalt,
   ein gesetztes Zeichen steht in Kobalt wie jede Wahl; ob es stimmt, sagt erst
   «Prüfen». Kein Grün, kein Ziegelrot (R6, R9).
   ====================================================================== */
.rz-brett {
  display: grid;
  gap: 8px;
  margin: 10px 0 8px;
}
.rz-brett:focus {
  outline: none;
}
.rz-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1.5px solid var(--linie);
  border-radius: 12px;
  background: var(--flaeche);
  color: var(--ink);
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rz-zahl {
  white-space: nowrap;
}
.rz-bruch {
  display: inline-grid;
  justify-items: center;
  font-size: 20px;
  line-height: 1.05;
}
.rz-bruch > span:first-child {
  padding: 0 4px 1px;
  border-bottom: 2px solid currentColor;
}
.rz-gleich {
  color: var(--ink-soft);
}
.rz-luecke {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1.5px solid var(--grau-kante);
  border-radius: 10px;
  background: #fff;
  color: var(--cobalt-tief);
  font: inherit;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}
.rz-luecke.dran {
  border: 2.5px solid var(--cobalt);
  box-shadow: 0 0 0 3px #dfe6f7;
}
.rz-tasten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.rz-taste {
  width: 54px;
  height: 52px;
  padding: 0;
  border: 1.5px solid var(--grau-kante);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 3px 0 var(--grau-kante);
}
/* Der Malpunkt ist in jeder Schrift klein - er bekommt mehr Grösse. */
.rz-taste[data-zeichen="x"],
.rz-luecke[data-zeichen="x"] {
  font-size: 40px;
}
.rz-taste:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--grau-kante);
}
.rz-nochmals {
  margin: 0 0 0 4px;
}
.rz-luecke:focus-visible,
.rz-taste:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
@media (hover: hover) {
  .rz-luecke:hover,
  .rz-taste:hover {
    background: #eef1f8;
  }
}
/* AB 640 PX stehen die Zahlen grösser. */
@media (min-width: 640px) {
  .rz-zeile {
    gap: 8px;
    font-size: 28px;
  }
  .rz-bruch {
    font-size: 23px;
  }
}
/* BREIT UND NIEDRIG (V159): Ein Tablet quer zeigt die Aufgabe ohne Scrollen -
   die Zeilen niedriger, und die Hilfe unter dem Brett fällt weg. */
@media (min-width: 1024px) and (max-height: 860px) {
  .rz-brett {
    gap: 6px;
    margin: 4px 0;
  }
  .rz-zeile {
    padding: 3px 8px;
    font-size: 24px;
  }
  .rz-bruch {
    font-size: 19px;
  }
  .rz-luecke {
    width: 44px;
    height: 44px;
  }
  .rz-taste {
    height: 46px;
  }
  [data-felder]:has(> .rz-brett) > .alle-zahl {
    display: none;
  }
}
/* (V311 Ende) */

/* ==========================================================================
 * DIE PRÜFUNGSVORBEREITUNG (V317)
 *
 * Angeordnet am 16.10.2026: «für jedes fach, auch in den spezialkursen muss
 * man eine prüfungsvorbereitung haben … diese muss man suchen können und dann
 * im resultat einfach anwählen auf der einen seite damit sie in die
 * prüfungsvorbereitung kommen oder auf der anderen seite, damit sie aus der
 * prüfungsvorbereitung.» Die Übersicht trägt drei Teile - Übungen, Tests,
 * Lernkarten -, die Suche zwei Seiten: links hinein, rechts heraus. Ein Test
 * trägt die Farbe der Prüfung (V138), eine Wahl Kobalt; kein Rot und kein
 * Grün (R6, R9).
 * ========================================================================== */
.vorbereitung-meldung {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: var(--r-karte);
  background: var(--flaeche);
  border: 1px solid var(--linie, rgba(0, 0, 0, 0.08));
  font-size: 14px;
  color: var(--ink);
}
.vorbereitung-suchen {
  margin: 14px 0 4px;
  gap: 8px;
}
.vorbereitung-leer {
  margin-top: 14px;
}
.vorbereitung-leer h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 6px;
}
.vorbereitung-leer p {
  font-size: 14px;
  line-height: 1.45;
  margin: 0 0 12px;
}
.vorbereitung-leer .row {
  flex-wrap: wrap;
  gap: 8px;
}
.vorbereitung-teil {
  margin-top: 22px;
}
.vorbereitung-teilkopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.vorbereitung-teilkopf h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0;
}
.vorbereitung-zahl {
  display: inline-block;
  min-width: 26px;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--flaeche);
  border: 1px solid var(--linie, rgba(0, 0, 0, 0.08));
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  color: var(--ink-soft);
  vertical-align: 2px;
}
.vorbereitung-dazu {
  font-size: 14px;
  font-weight: 700;
  color: var(--cobalt, #2f5bd3);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.vorbereitung-mischung {
  margin: 0 0 10px;
}
.vorbereitung-mischung p {
  font-size: 14px;
  line-height: 1.45;
  margin: 0 0 10px;
}
.vorbereitung-mischung .row {
  gap: 8px;
}
.vorbereitung-liste,
.vb-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.vorbereitung-eintrag {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-karte);
  background: #fff;
  border: 1px solid var(--linie, rgba(0, 0, 0, 0.08));
}
.vorbereitung-text,
.vb-wahl-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  text-align: left;
}
.vorbereitung-text strong,
.vb-wahl-text strong {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.vorbereitung-text small,
.vb-wahl-text small {
  font-size: 13px;
  color: var(--ink-soft);
}
.vorbereitung-eintrag .btn {
  flex: none;
  gap: 6px;
}
.btn.pruefen {
  --knopf-kante: var(--iris-tief);
  background: var(--iris);
  border-color: var(--iris);
  color: #fff;
}
.btn.pruefen:focus-visible {
  outline-color: var(--iris);
}
.vorbereitung-keine {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 4px 0 0;
}
.vorbereitung-karten .btn.wide {
  gap: 8px;
  margin-bottom: 12px;
}
.vorbereitung-leeren {
  margin-top: 26px;
}

/* Die Suche. */
.vorbereitung-suchtitel {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 14px 0 10px;
}
.vorbereitung-arten {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin: 0 0 12px;
}
.vorbereitung-art {
  flex: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--linie, rgba(0, 0, 0, 0.12));
  background: #fff;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
}
.vorbereitung-art.aktiv {
  background: var(--cobalt, #2f5bd3);
  border-color: var(--cobalt, #2f5bd3);
  color: #fff;
}
.vorbereitung-suche {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}
.vorbereitung-feld {
  flex: 1 1 220px;
  display: flex;
}
.vorbereitung-feld input,
.vorbereitung-stufe select {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--linie, rgba(0, 0, 0, 0.18));
  background: #fff;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
}
.vorbereitung-stufe {
  flex: 0 1 160px;
  display: flex;
}
.vorbereitung-suche .btn {
  gap: 6px;
}
.vorbereitung-seiten {
  display: grid;
  gap: 18px;
  margin-top: 18px;
  scroll-margin-top: 80px;
}
@media (min-width: 1024px) {
  .vorbereitung-seiten {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}
.vorbereitung-seite {
  padding: 12px;
  border-radius: var(--r-karte);
  background: var(--flaeche);
  border: 1px solid var(--linie, rgba(0, 0, 0, 0.08));
}
.vorbereitung-seite-drin {
  background: #eef2fd;
  border-color: rgba(47, 91, 211, 0.22);
}
.vorbereitung-seite h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 17px;
  font-weight: 800;
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vorbereitung-seite h2 small {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}
.vb-liste form {
  margin: 0;
}
.vb-wahl {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--linie, rgba(0, 0, 0, 0.1));
  background: #fff;
  font: inherit;
  cursor: pointer;
}
.vb-wahl:focus-visible {
  outline: 3px solid var(--cobalt, #2f5bd3);
  outline-offset: 2px;
}
.vb-wahl-zeichen {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}
.vb-wahl-hinein .vb-wahl-zeichen {
  background: var(--cobalt, #2f5bd3);
  color: #fff;
}
.vb-wahl-heraus {
  border-color: rgba(47, 91, 211, 0.35);
}
.vb-wahl-heraus .vb-wahl-zeichen {
  background: #fff;
  border: 1.5px solid var(--ink-soft);
  color: var(--ink);
}
@media (hover: hover) {
  .vb-wahl:hover {
    border-color: var(--cobalt, #2f5bd3);
  }
}
.vorbereitung-alle {
  margin-top: 12px;
}

/* ========================================================================
 * V318 - DIE PRÜFUNGSVORBEREITUNG EINES SPEZIALKURSES UND SEIN WÖRTERTEST
 *
 * «für jedes fach, auch in den spezialkursen muss man eine
 * prüfungsvorbereitung haben»: dieselben Seiten wie im Fach (V317), dazu
 * eine Übung mit mehreren Wegen - Lernkarten, Paare finden, Lesen, Ansehen
 * - und der Wörtertest: die Bedeutung auf einer Karte, darunter ein Feld für
 * das Wort. Richtig und falsch tragen den Kasten jeder Runde (V74.7), kein
 * eigenes Lob und kein eigener Tadel (R6, R9).
 * ======================================================================== */
.vorbereitung-eintrag:has(.vorbereitung-knoepfe) {
  flex-wrap: wrap;
}
.vorbereitung-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: none;
}
.vorbereitung-knoepfe .btn {
  gap: 6px;
}
@media (max-width: 639.98px) {
  .vorbereitung-eintrag:has(.vorbereitung-knoepfe) .vorbereitung-text {
    flex-basis: 100%;
  }
}
.kursvorbereitung {
  margin-top: 4px;
}

.kurstest-karte {
  --ton: var(--ton-uebrig);
  --ton-tief: var(--ton-uebrig-tief);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 14px 0 12px;
  padding: 22px 18px 26px;
  border: 1px solid var(--linie, rgba(0, 0, 0, 0.08));
  border-top: 6px solid var(--ton);
  border-radius: var(--r-karte);
  background: #fff;
  box-shadow: var(--schatten);
  text-align: center;
}
.kurstest-karte.ton-sprachen {
  --ton: var(--ton-sprachen);
  --ton-tief: var(--ton-sprachen-tief);
}
.kurstest-karte.ton-rechnen {
  --ton: var(--ton-rechnen);
  --ton-tief: var(--ton-rechnen-tief);
}
.kurstest-karte.ton-forschen {
  --ton: var(--ton-forschen);
  --ton-tief: var(--ton-forschen-tief);
}
.kurstest-karte.ton-welt {
  --ton: var(--ton-welt);
  --ton-tief: var(--ton-welt-tief);
}
.kurstest-karte.ton-machen {
  --ton: var(--ton-machen);
  --ton-tief: var(--ton-machen-tief);
}
.kurstest-karte .karte-bild {
  font-size: 64px;
}
.kurstest-frage {
  margin: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 27px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.kurstest-frage.lang {
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
}
.kurstest-eingabe {
  display: block;
  margin-bottom: 12px;
}
.kurstest-feld {
  width: 100%;
  min-height: 56px;
  padding: 10px 16px;
  border: 2px solid var(--ink);
  border-radius: var(--r);
  background: #fff;
  font: inherit;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
}
.kurstest-feld:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.kurstest .btn {
  gap: 8px;
}
.kurstest-urteil {
  margin-bottom: 4px;
}
.kurstest-loesung summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  cursor: pointer;
}
.kurstest-loesung[open] summary {
  min-height: 0;
  margin-bottom: 2px;
}
.kurstest-loesung span {
  font-weight: 700;
}
.kurstest-ende .btn + .btn {
  margin-top: 8px;
}
@media (min-width: 1024px) {
  .b-kurstest .pad {
    max-width: 720px;
    margin-inline: auto;
  }
  .kurstest-frage {
    font-size: 34px;
  }
}
/* ZWEI SEITEN (V439), angeordnet am 06.11.2026: «mach den knopf im wörtertest
 * auf dem tablet sichtbar». Ab 1024 px steht links die Frage samt dem Urteil
 * über die davor, rechts das Feld, Tastatur oder Handschrift und «Prüfen» - so
 * liegt der Knopf auch mit dem Kästchen der Handschrift im Fenster, auf jedem
 * Tablet quer. Schmaler bleibt alles untereinander, in derselben Folge. */
@media (min-width: 1024px) {
  .b-kurstest .pad:has(> .kurstest) {
    max-width: 980px;
  }
  .kurstest {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;
  }
  /* Das Feld beginnt auf der Höhe der Karte, nicht über ihrem Rand. */
  .kurstest-rechts {
    padding-top: 14px;
  }
}


/* ==========================================================================
 * MEIN LERNMATERIAL (V319, seit V321 im Konto)
 *
 * Angeordnet am 16.10.2026: «Mein Lernmaterial auf dem server speichern, so
 * dass es im account immer verfügbar ist. nur png, jpg, pdf können
 * hochgeladen werden. max 5mb pro datei und maximal 30mb pro konto.» Ein
 * Kasten sagt, wo es liegt und wie viel der 30 MB belegt ist; welcher Teil
 * des Formulars zur gewählten Art gehört, zeigt ``:has`` - ohne Skript.
 * Gelernt wird mit derselben Karte wie jede Lernkarte (V128, V158). Eine Wahl
 * ist Kobalt, kein Rot und kein Grün (R6, R9).
 * ========================================================================== */
.lm {
  display: grid;
  gap: 16px;
}
.lm > .btn.steuer {
  justify-self: start;
}
.lm-meldung {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--r-karte);
  background: var(--flaeche);
  border: 1px solid var(--linie, rgba(0, 0, 0, 0.08));
  border-left: 4px solid var(--cobalt);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink);
}
/* Was nicht geht: dieselbe Zeile, in Tinte und fett - eine Auskunft, kein Rot. */
.lm-fehler {
  border-left-color: var(--ink);
  font-weight: 700;
}

/* Der Kopf: Bild, Name, Satz und der Weg zu neuem Material. */
.lm-kopf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px 16px;
}
.lm-kopf-bild {
  display: flex;
}
.lm-kopf-text h1.sub {
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}
.lm-kopf-text p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.lm-kopf .lm-neu,
.lm-kopf .lm-voll {
  grid-column: 1 / -1;
  gap: 8px;
}
.lm-kopf .lm-voll {
  margin: 0;
}

/* WO ES LIEGT: im Konto, mit dem Balken der 30 MB. */
.lm-platz {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-karte);
  background: var(--sky-low);
  border: 1px solid var(--linie, rgba(0, 0, 0, 0.08));
}
.lm-platz-symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--cobalt);
}
.lm-platz h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 17px;
  font-weight: 800;
  margin: 2px 0 4px;
}
.lm-platz p {
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
}
.lm-platz .lm-platz-mehr {
  margin-top: 8px;
  color: var(--ink-soft);
}
.lm-platzbalken {
  display: block;
  height: 8px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--flaeche);
  overflow: hidden;
}
.lm-platzbalken i {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: 999px;
  background: var(--cobalt);
}

/* Was von früher noch im Browser liegt (V319) - das Skript zeigt es. */
.lm-alt {
  display: grid;
  gap: 10px;
}
.lm-alt p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}
.lm-alt .btn {
  justify-self: start;
  gap: 6px;
}

/* Die Liste. */
.lm-teil h2.sub {
  margin-bottom: 10px;
}
.lm-zahl {
  display: inline-block;
  min-width: 26px;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--flaeche);
  border: 1px solid var(--linie, rgba(0, 0, 0, 0.08));
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  color: var(--ink-soft);
  vertical-align: 2px;
}
.lm-liste {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.lm-eintrag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  border-radius: var(--r-karte);
  background: var(--flaeche);
  border: 1px solid var(--linie, rgba(0, 0, 0, 0.08));
  box-shadow: 0 1px 2px rgba(22, 35, 59, 0.06);
}
.lm-eintrag-weg {
  flex: 1 1 240px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.lm-eintrag-weg:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 3px;
  border-radius: 10px;
}
.lm-eintrag-bild {
  display: flex;
  flex: 0 0 auto;
}
.lm-eintrag-bild img {
  width: 44px;
  height: 44px;
}
.lm-eintrag-text {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.lm-eintrag-text b {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 16px;
  overflow-wrap: anywhere;
}
.lm-eintrag-mehr {
  font-size: 13px;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}
.lm-eintrag-pfeil {
  display: flex;
  color: var(--ink-soft);
}
.lm-eintrag-lernen {
  gap: 6px;
}
.lm-leer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.lm-leer h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 18px;
  margin: 2px 0 4px;
}
.lm-leer p {
  font-size: 14px;
  line-height: 1.45;
  margin: 0 0 12px;
}
.lm-leer .btn {
  gap: 8px;
}

/* «Neues Lernmaterial» und «Bearbeiten»: Schritt für Schritt. */
.lm-neu-form {
  display: grid;
  gap: 14px;
}
.lm-schritt {
  display: grid;
  gap: 10px;
  border: 1px solid var(--linie, rgba(0, 0, 0, 0.08));
  margin: 0;
  min-width: 0;
}
fieldset.lm-schritt {
  padding-top: 14px;
}
.lm-schritt .hinweis {
  margin: 0;
}
.lm-titel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
}
.lm-nummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--cobalt);
  color: #fff;
  font-size: 14px;
}
.lm-arten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.lm-art {
  position: relative;
  display: flex;
}
.lm-art input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.lm-art-karte {
  flex: 1;
  display: grid;
  justify-items: start;
  gap: 4px;
  padding: 12px;
  border-radius: 14px;
  border: 2px solid var(--linie, rgba(0, 0, 0, 0.1));
  background: var(--flaeche);
  cursor: pointer;
  min-height: 44px;
}
.lm-art-karte b {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 15.5px;
}
.lm-art-karte > span:last-child {
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-soft);
}
.lm-art-karte img {
  width: 40px;
  height: 40px;
}
.lm-art input:checked + .lm-art-karte {
  border-color: var(--cobalt);
  box-shadow: 0 0 0 2px var(--cobalt) inset;
}
.lm-art input:focus-visible + .lm-art-karte {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}

/* WELCHER TEIL ZUR GEWÄHLTEN ART GEHÖRT (V321), ohne Skript: Ist keine Art
   gewählt, steht nur die Datei da; ist eine gewählt, nur, was zu ihr gehört.
   Ein Browser ohne ``:has`` zeigt alles, und der Server nimmt nur, was passt. */
.lm-neu-form:not(:has(input[name="art"]:checked)) :is(.lm-teil-notiz, .lm-teil-karten),
.lm-neu-form:not(:has(input[name="art"]:checked)) [data-fuer]:not([data-fuer="keine"]),
.lm-neu-form:has(input[name="art"]:checked) :is(.lm-teil-datei, .lm-teil-notiz, .lm-teil-karten, [data-fuer]) {
  display: none;
}
.lm-neu-form:has(input[value="bild"]:checked) .lm-teil-datei,
.lm-neu-form:has(input[value="dokument"]:checked) .lm-teil-datei,
.lm-neu-form:has(input[value="lernkarten"]:checked) .lm-teil-datei,
.lm-neu-form:has(input[value="notiz"]:checked) .lm-teil-notiz,
.lm-neu-form:has(input[value="lernkarten"]:checked) .lm-teil-karten {
  display: grid;
}
.lm-neu-form:has(input[value="bild"]:checked) [data-fuer="bild"],
.lm-neu-form:has(input[value="dokument"]:checked) [data-fuer="dokument"],
.lm-neu-form:has(input[value="lernkarten"]:checked) [data-fuer="lernkarten"] {
  display: revert;
}

.lm-datei {
  position: relative;
  justify-self: start;
  gap: 8px;
  max-width: 100%;
}
.lm-datei span {
  overflow-wrap: anywhere;
}
.lm-datei:focus-within {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.lm-vorschau {
  max-width: 100%;
  max-height: 260px;
  justify-self: start;
  border-radius: 12px;
  border: 1px solid var(--linie, rgba(0, 0, 0, 0.08));
}
.lm-holen {
  display: grid;
  gap: 8px;
}
.lm-holen .btn {
  justify-self: start;
  gap: 8px;
}
.lm-arbeit {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.lm-notiz,
.lm-kartentext {
  min-height: 160px;
  resize: vertical;
  line-height: 1.45;
}
.lm-kartentext {
  tab-size: 12;
}
.lm-unter {
  font-size: 14px;
  font-weight: 700;
}
.lm-haken {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 14.5px;
}
.lm-haken input {
  width: 22px;
  height: 22px;
  accent-color: var(--cobalt);
}
.lm-sprachen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}
.lm-sprachen label {
  display: grid;
  gap: 4px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-soft);
}
.lm-sprachen select {
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1.5px solid var(--hairline);
  background: var(--flaeche);
  font: inherit;
  font-weight: 400;
  color: var(--ink);
}
.lm-speichern {
  display: grid;
  gap: 6px;
}
.lm-speichern .btn {
  gap: 8px;
}
.lm-speichern .hinweis {
  margin: 0;
}

/* Die Zeilen beim Bearbeiten: vorne, hinten und «Löschen». */
.lm-zeilen {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lm-zeile {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  grid-template-areas:
    "nr vorne weg"
    "nr hinten weg";
  gap: 6px 8px;
  align-items: center;
  padding: 8px;
  border-radius: 12px;
  background: var(--flaeche);
  border: 1px solid var(--linie, rgba(0, 0, 0, 0.08));
}
.lm-zeile-nr {
  grid-area: nr;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft);
  text-align: center;
}
.lm-zeile label:nth-of-type(1) {
  grid-area: vorne;
}
.lm-zeile label:nth-of-type(2) {
  grid-area: hinten;
}
.lm-zeile .eingabe {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  font-size: 14.5px;
}
.lm-zeile.halb .eingabe:placeholder-shown {
  border-style: dashed;
  border-color: var(--cobalt);
}
.lm-zeile-weg {
  grid-area: weg;
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 44px;
  min-height: 44px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
}
.lm-zeile-weg input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--ink);
}
.lm-zeile:has(.lm-zeile-weg input:checked) .eingabe {
  text-decoration: line-through;
  opacity: 0.55;
}

/* Ein Material ansehen. */
.lm-ansehen-kopf .lm-kopf-bild img {
  width: 56px;
  height: 56px;
}
.lm-bild {
  margin: 0;
  display: flex;
  justify-content: center;
  padding: 10px;
}
.lm-bild img {
  max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 10px;
}
.lm-dokument,
.lm-notizteil,
.lm-stapel {
  display: grid;
  gap: 12px;
}
.lm-datei-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0;
  font-size: 15px;
  overflow-wrap: anywhere;
}
.lm-datei-zeile span:last-child {
  color: var(--ink-soft);
  font-size: 13.5px;
}
.lm-notiztext {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-size: 15px;
  line-height: 1.55;
}
.lm-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lm-knoepfe .btn {
  gap: 6px;
}
.lm-stapel-zahl {
  margin: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 18px;
  font-weight: 800;
}
.lm-stapel .lm-lernen {
  gap: 8px;
  min-height: 52px;
  font-size: 16px;
}
.lm-stapel .lm-umgekehrt {
  justify-self: start;
  gap: 6px;
}
.lm-stapel .keinecoins,
.lm-stapel .hinweis {
  margin: 0;
}
.lm-kartenliste {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lm-kartenliste li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px 14px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--flaeche);
  border: 1px solid var(--linie, rgba(0, 0, 0, 0.08));
  font-size: 14.5px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.lm-kartenliste .lm-vorne {
  font-weight: 700;
}
.lm-kartenliste li.halb {
  border-style: dashed;
  border-color: var(--cobalt);
}
.lm-kartenliste li.halb span:last-child {
  color: var(--ink-soft);
  font-style: italic;
}
.lm-vorlage {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 13.5px;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}
.lm-vorlage a {
  color: var(--cobalt);
  font-weight: 700;
}
.lm-verwalten {
  display: grid;
  gap: 8px;
}
.lm-verwalten > .btn {
  justify-self: start;
  gap: 6px;
}
.lm-verwalten p {
  font-size: 14px;
  margin: 6px 0 8px;
}

@media (min-width: 640px) {
  .lm-kopf {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .lm-kopf .lm-neu,
  .lm-kopf .lm-voll {
    grid-column: auto;
  }
  .lm-arten {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lm-zeile {
    grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas: "nr vorne hinten weg";
  }
}
@media (min-width: 1024px) {
  .b-lernmaterial .pad {
    max-width: 1040px;
  }
  .lm-liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Ein Punkt der Navigation mit kurzem Namen (V319): unten auf dem Telefon
   steht «Lern-material», die Vorlesehilfe hört den ganzen Namen; in der
   Seitenleiste steht er ganz. */
.nav .nav-ganz {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.nav .nav-kurz {
  hyphens: manual;
}
@media (min-width: 1024px) {
  .frame.mit-nav > .nav .nav-ganz {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
  .frame.mit-nav > .nav .nav-kurz {
    display: none;
  }
}

/* Der Name eines Fachs oder Kurses im Lesetext steht kursiv (V322), damit
   man sieht, dass er eine Bezeichnung ist. Eine kursive Schrift ist nicht
   gebündelt; der Browser neigt die gerade. */
.fachname {
  font-style: italic;
}

/* ======================================================================
   FÜNF WEITERE SPIELERISCHE ÜBUNGEN (V323)
   Die Zahlenmauer, die Rechenkette, Linien ziehen, das Lückenwort und «Was
   passt nicht?». Gezeichnet mit den eigenen Marken; nichts davon urteilt -
   eine Wahl ist Kobalt, kein Grün und kein Ziegelrot (R6, R9). Ein Feld
   bleibt 44 px gross, auch auf einem Telefon von 360 px.
   ====================================================================== */

/* Die Zahlenmauer: Reihe für Reihe von oben, jeder Stein zwischen den beiden
   darunter - die Reihen sind zentriert, und ihre Steine gleich breit. */
.zahlenmauer {
  --stein: min(84px, calc((100% - 18px) / 4));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 12px 0 6px;
}
.mauer-reihe {
  display: flex;
  justify-content: center;
  gap: 6px;
  width: 100%;
}
.mauer-stein {
  flex: 0 0 var(--stein);
  width: var(--stein);
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.mauer-stein.gegeben {
  background: #f3e3d3;
  border: 1.5px solid #b98a62;
  box-shadow: inset 0 -3px 0 rgba(120, 72, 36, 0.18);
}
.mauer-stein.leer {
  background: var(--flaeche);
  border: 1.5px dashed var(--ink-soft);
  padding: 3px;
}
.mauer-feld,
.kette-feld {
  width: 100%;
  min-width: 0;
  height: 44px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 19px;
  font-weight: 700;
  text-align: center;
}
.mauer-feld:focus,
.kette-feld:focus {
  outline: 2px solid var(--cobalt);
  outline-offset: 1px;
  background: #fff;
}
.frame.quiet .mauer-stein.gegeben {
  background: #ece9f6;
  border-color: #8a86b8;
  box-shadow: inset 0 -3px 0 rgba(60, 56, 120, 0.14);
}

/* Die Rechenkette: Perlen und Pfeile. Ein Schritt ist ein Pfeil mit seiner
   Perle; auf einem schmalen Schirm bricht die Kette nach einem Schritt um. */
.rechenkette {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 12px;
  margin: 12px 0 6px;
}
.kette-schritt {
  display: flex;
  align-items: center;
}
.kette-pfeil {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 0 14px 16px 6px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--cobalt);
  white-space: nowrap;
}
.kette-pfeil::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 6px;
  height: 2px;
  background: var(--cobalt);
}
.kette-pfeil::before {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 2px;
  border: 5px solid transparent;
  border-left: 8px solid var(--cobalt);
  border-right: 0;
}
.kette-perle {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.kette-perle.gegeben {
  background: #fde9a8;
  border: 2px solid #c9a227;
}
.kette-perle.leer {
  background: var(--flaeche);
  border: 2px dashed var(--ink-soft);
  padding: 6px;
}
.kette-perle.ziel.gegeben {
  background: #dde6fb;
  border-color: var(--cobalt);
}
/* Kein Gelb in der geschlossenen Runde (docs/03 Abschnitt 4). */
.frame.quiet .kette-perle.gegeben {
  background: #ece9f6;
  border-color: #8a86b8;
}

/* Linien ziehen: zwei Spalten mit Platz dazwischen, und die Linien liegen
   darüber, ohne einen Fingertipp zu fangen. */
.linien {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 44px;
  margin: 10px 0 6px;
}
.linien-spalte {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.linien-karte {
  width: 100%;
  position: relative;
  z-index: 1;
  text-align: center;
  line-height: 1.25;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.linien-karte.verbunden {
  border-color: var(--cobalt);
  background: #eef2ff;
}
.linien-karte.wartet {
  outline: 3px solid var(--cobalt);
  outline-offset: 1px;
}
.linien-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
.linien-bild line {
  stroke: var(--cobalt);
  stroke-width: 3;
  stroke-linecap: round;
}
.linien-bild circle {
  fill: var(--cobalt);
}

/* Das Lückenwort: die festen Buchstaben stehen da, eine Lücke ist ein
   Kästchen mit gestrichelter Linie, eine gefüllte trägt Kobalt. */
.wortzeile.lueckenwort {
  justify-content: center;
}
.wortzeichen.fest {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}
.wortzeichen.loch {
  display: inline-block;
  min-width: 40px;
  min-height: 48px;
  border: 2px dashed var(--ink-soft);
  border-radius: 8px;
  background: #fffdf5;
}
.wortzeichen.gefuellt {
  border: 2px solid var(--cobalt);
  border-radius: 8px;
  background: #eef2ff;
  color: var(--cobalt);
}

/* Was passt nicht?: vier Karten, zwei und zwei, jede gleich gross. */
.wahl.ausreisser {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.wahl.ausreisser .btn {
  min-height: 84px;
  padding: 12px 10px;
  border-radius: 16px;
  font-size: 17px;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
  box-shadow: 0 4px 0 var(--grau-kante);
}
.wahl.ausreisser .btn:nth-child(odd) {
  transform: rotate(-1deg);
}
.wahl.ausreisser .btn:nth-child(even) {
  transform: rotate(1deg);
}
@media (prefers-reduced-motion: reduce) {
  .wahl.ausreisser .btn:nth-child(odd),
  .wahl.ausreisser .btn:nth-child(even) {
    transform: none;
  }
}
@media (min-width: 640px) {
  .zahlenmauer {
    --stein: 96px;
  }
  .kette-perle {
    width: 72px;
    height: 72px;
    font-size: 20px;
  }
  .linien {
    column-gap: 72px;
  }
}

/* ======================================================================
   (V324) TAUSCH FINDEN UND KOMMAS SETZEN. Karten untereinander mit ihrem
   Platz davor, zwei gewählte stehen getauscht da; und Sätze Wort für Wort
   mit einer Lücke zwischen je zwei Wörtern, in der ein Komma stehen kann.
   Eine Wahl ist Kobalt, kein Grün und kein Ziegelrot (R6, R9); jedes
   Tippziel bleibt 44 px gross.
   ====================================================================== */
.tausch-liste {
  display: grid;
  gap: 8px;
  margin: 12px 0 6px;
}
.tausch-liste:focus {
  outline: none;
}
.tausch-karte {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 8px 14px 8px 8px;
  border: 1.5px solid var(--linie);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.tausch-nummer {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--flaeche);
  color: var(--ink-soft);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tausch-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.tausch-karte.gewaehlt {
  border-color: var(--cobalt);
  background: #eef2ff;
  box-shadow: inset 0 0 0 1.5px var(--cobalt);
}
.tausch-karte.gewaehlt .tausch-nummer {
  background: var(--cobalt);
  color: #fff;
}
.tausch-karte:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  /* Eine gewählte Karte rückt kurz zur Seite - die Antwort auf den Tipp. */
  .tausch-karte.gewaehlt {
    animation: tausch-ruck 0.28s ease-out;
  }
  @keyframes tausch-ruck {
    from {
      transform: translateX(6px);
    }
    to {
      transform: none;
    }
  }
}
@media (hover: hover) {
  .tausch-karte:not(.gewaehlt):hover {
    border-color: var(--cobalt);
  }
}

/* Kommas setzen: jedes Wort für sich, dazwischen eine schmale Lücke mit
   einem Punkt; angetippt steht dort ein Komma in Kobalt. Das Tippziel reicht
   über die Wörter daneben, die selbst nichts fangen. */
.komma-saetze {
  display: grid;
  gap: 8px;
  margin: 12px 0 6px;
}
.komma-saetze:focus {
  outline: none;
}
.komma-satz {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  row-gap: 2px;
  margin: 0;
  padding: 8px 10px;
  border: 1.5px solid var(--linie);
  border-radius: 14px;
  background: #fff;
}
.komma-stueck {
  display: inline-flex;
  align-items: stretch;
}
.komma-wort {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-size: 19px;
  pointer-events: none;
}
.komma-luecke {
  position: relative;
  width: 18px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cobalt);
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
/* Das Tippziel: 44 px breit, über die Wörter links und rechts. */
.komma-luecke::before {
  position: absolute;
  inset: 0 -13px;
  content: "";
}
/* Der Punkt sagt, dass hier eine Lücke ist. */
.komma-luecke:not(.gewaehlt)::after {
  position: absolute;
  bottom: 12px;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: #c3cdf3;
  content: "";
}
/* Das Komma steht dicht am Wort davor, wie man es schreibt. */
.komma-luecke.gewaehlt {
  text-align: left;
  padding-top: 6px;
}
.komma-luecke:focus-visible {
  border-radius: 6px;
  outline: 3px solid var(--cobalt);
  outline-offset: -2px;
}
@media (hover: hover) {
  .komma-luecke:not(.gewaehlt):hover::after {
    background: var(--cobalt);
  }
}
/* BREIT UND NIEDRIG (V159): Ein Tablet quer zeigt die Sätze enger. */
@media (min-width: 1024px) and (max-height: 860px) {
  .komma-saetze,
  .tausch-liste {
    gap: 6px;
    margin-top: 6px;
  }
  .komma-satz {
    padding: 4px 10px;
  }
  .tausch-karte {
    min-height: 46px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
}
/* (V324 Ende) */

/* ======================================================================
   (V325) WO STEHT DAS? UND SATZZEICHEN SETZEN. Ein Lesetext Zeile für Zeile,
   jede Zeile zum Antippen; und Sätze mit Lücken, in die ein Zeichen gehört,
   mit den Zeichen als Tasten darunter. Eine Wahl ist Kobalt, kein Grün und
   kein Ziegelrot (R6, R9); jedes Tippziel bleibt 44 px gross.
   ====================================================================== */
.ts-text {
  display: grid;
  gap: 6px;
  margin: 12px 0 6px;
  padding: 10px;
  border: 1.5px solid var(--linie);
  border-radius: 16px;
  background: #fffdf7;
}
.ts-text:focus {
  outline: none;
}
.ts-zeile {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 9px 12px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  line-height: 1.35;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.ts-zeile.gewaehlt {
  border-color: var(--cobalt);
  background: #eef2ff;
  box-shadow: inset 0 0 0 1.5px var(--cobalt);
}
.ts-zeile:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 1px;
}
/* Die Lösung, auf «Lösung» hin (V278): umrandet, wie die Stelle im Bild. */
.ts-zeile.ist-loesung {
  outline: 3px dashed var(--ink);
  outline-offset: -4px;
}
@media (hover: hover) {
  .ts-zeile:not(.gewaehlt):hover {
    border-color: #c3cdf3;
    background: #f7f8ff;
  }
}

/* Satzzeichen setzen: die Teile eines Satzes in einer Zeile, die umbricht,
   und eine Lücke, wo ein Zeichen fehlen kann. Am Satzende ist sie gross; um
   eine wörtliche Rede liegt zwischen je zwei Teilen eine schmale. */
.sz-brett {
  display: grid;
  gap: 8px;
  margin: 12px 0 6px;
}
.sz-brett:focus {
  outline: none;
}
.sz-satz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 2px;
  margin: 0;
  padding: 6px 10px;
  border: 1.5px solid var(--linie);
  border-radius: 14px;
  background: #fff;
}
.sz-teil {
  margin-right: 0.3em;
  color: var(--ink);
  font-size: 19px;
  line-height: 44px;
}
/* Ein Satzzeichen klebt am Teil davor, wie man es schreibt. */
.sz-zeichen {
  margin-left: -0.3em;
}
.sz-luecke {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  min-height: 44px;
  margin: 0 0.15em 0 -0.15em;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--cobalt);
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
/* Das Tippziel: 44 px breit, über die Teile links und rechts. */
.sz-luecke::before {
  position: absolute;
  inset: 0 -13px;
  content: "";
}
/* Ein Punkt sagt, dass hier eine Lücke ist. */
.sz-luecke.leer::after {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c3cdf3;
  content: "";
}
/* Zwischen zwei schmalen Lücken steht jeder Teil mindestens 26 px breit, ein
   Satzzeichen auch: Sonst lägen die beiden Tippziele übereinander, und die
   Lücke vor einem Komma liesse sich nicht antippen. */
.sz-luecke:not(.gross) + .sz-teil {
  display: inline-block;
  min-width: 26px;
  margin-left: 0;
  text-align: center;
}
.sz-luecke.dran {
  background: #eef2ff;
  box-shadow: inset 0 0 0 2px var(--cobalt);
}
.sz-luecke.dran.leer::after {
  background: var(--cobalt);
}
/* Am Satzende ist die Lücke ein Kästchen, das ein Zeichen erwartet. */
.sz-luecke.gross {
  min-width: 40px;
  margin: 0 0 0 2px;
  border: 1.5px solid var(--linie);
}
.sz-luecke.gross::before {
  inset: 0;
}
.sz-luecke.gross.dran {
  border-color: var(--cobalt);
}
.sz-luecke:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 1px;
}
.sz-tasten {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.sz-taste {
  min-width: 56px;
  min-height: 48px;
  margin: 0;
  padding: 0 12px;
  border: 1.5px solid var(--linie);
  border-bottom-width: 3px;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 26px;
  font-weight: 800;
  cursor: pointer;
}
.sz-taste:disabled {
  opacity: 0.45;
  cursor: default;
}
.sz-taste:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.sz-nochmals {
  margin-left: auto;
}
@media (hover: hover) {
  .sz-taste:not(:disabled):hover {
    border-color: var(--cobalt);
  }
  .sz-luecke.leer:hover::after {
    background: var(--cobalt);
  }
}
/* BREIT UND NIEDRIG (V159): Ein Tablet quer zeigt Text und Sätze enger. */
@media (min-width: 1024px) and (max-height: 860px) {
  .ts-text,
  .sz-brett {
    gap: 4px;
    margin-top: 6px;
  }
  .ts-zeile {
    min-height: 40px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .sz-satz {
    padding: 3px 10px;
  }
}
/* (V325 Ende) */

/* ======================================================================
   (V326) KALENDERBLATT UND SKALA ZUM ANTIPPEN (`app/web/grafik_mess.py`).
   Ein Monat als Blatt: jeder Tag ein Feld, «heute» mit einem dunklen
   Kreis, der Sonntag wie jeder andere Tag - Rot wäre hier ein Urteil.
   Lineal, Waage, Messbecher und Thermometer mit Strichen; was das Kind
   wählt, zeigt das Bild selbst in Kobalt wie jede Wahl: Der Stab, der
   Zeiger, das Wasser oder die Säule reicht bis zum Strich. Die Lösung nach
   einer falschen Antwort umrandet wie bei jedem Bild zum Antippen (V295).
   Kein Grün und kein Ziegelrot (R6, R9).
   ====================================================================== */
.grafik .gm-monat {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 16px;
  font-weight: 700;
}
.grafik .gm-kopf {
  font-size: 13px;
  font-weight: 700;
  fill: var(--ink-soft);
  stroke: none;
}
.gm-feld {
  fill: var(--flaeche, #fff);
  stroke: var(--hairline);
  stroke-width: 1;
}
.gm-leer {
  fill: var(--plaster-hi);
  stroke: var(--hairline);
  stroke-width: 1;
}
.grafik .gm-tag {
  font-size: 17px;
  font-weight: 700;
  stroke: none;
}
.gm-heute {
  fill: var(--ink);
}
.grafik .gm-tag-heute {
  fill: #fff;
}
.grafik .gm-tagziel,
.grafik .gm-ziel {
  fill: transparent;
  stroke: none;
}
.grafik .tippziel.gewaehlt .gm-tagziel {
  fill: rgba(42, 79, 215, 0.26);
  stroke: var(--cobalt);
  stroke-width: 3;
}
/* Die Skalen. */
.gm-strich {
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.grafik .gm-zahl {
  font-size: 13px;
  font-weight: 700;
}
.grafik .gm-einheit {
  font-size: 13px;
  fill: var(--ink-soft);
}
.gm-lineal {
  fill: var(--kulisse-holz);
  fill-opacity: 0.55;
  stroke: var(--ink);
  stroke-width: 1.4;
}
.gm-marke {
  fill: var(--ink);
}
.grafik .tippziel .gm-stab {
  fill: var(--cobalt);
}
.gm-waage-sockel {
  fill: var(--ink-soft);
  fill-opacity: 0.18;
  stroke: var(--ink);
  stroke-width: 1.4;
}
.gm-waage-blatt {
  fill: var(--flaeche, #fff);
  stroke: var(--ink);
  stroke-width: 1.6;
}
.gm-zeiger-ruhe {
  stroke: var(--ink-soft);
  stroke-width: 3;
  stroke-linecap: round;
}
.grafik .tippziel .gm-zeiger {
  fill: var(--cobalt);
}
.gm-nabe {
  fill: var(--ink);
}
.gm-glas {
  fill: #eef3fb;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.gm-henkel {
  fill: none;
  stroke: var(--ink);
  stroke-width: 6;
  stroke-linecap: round;
}
.grafik .tippziel.gewaehlt .gm-wasser {
  opacity: 0.42;
}
.gm-rohr {
  fill: var(--flaeche, #fff);
  stroke: var(--ink);
  stroke-width: 1.6;
}
.gm-kugel {
  fill: var(--flaeche, #fff);
  stroke: var(--ink);
  stroke-width: 1.6;
}
.gm-saeule {
  fill: var(--ink-soft);
  fill-opacity: 0.55;
}
.grafik .tippziel .gm-saeule-wahl {
  fill: var(--cobalt);
}
/* Eine Skala, die hoch ist, steht so hoch, wie das Fenster es zulässt, und
   nicht so breit wie die Karte - sonst wüchse sie auf dem Telefon weit über
   den Bildschirm hinaus. */
.grafikbild:has(.tippziel) svg.grafik.gr-skala-hoch {
  width: auto;
  max-width: 100% !important;
  height: min(400px, 58vh);
}
/* AUF DEM TELEFON DIE GANZE BREITE DER KARTE: Sieben Tage nebeneinander
   brauchen Platz, damit jeder Tag unter einen Finger passt, und ein Lineal
   und eine Waage ebenso jeder Strich. Das Bild verlässt dafür den Rand
   seines Kastens. */
@media (max-width: 639.98px) {
  .aufgabenbild:has(.gr-kalender, .gr-skala:not(.gr-skala-hoch)) {
    margin-right: -16px;
    margin-left: -16px;
    padding-right: 0;
    padding-left: 0;
  }
}
/* BREIT UND NIEDRIG (V159): Ein Tablet quer zeigt die Aufgabe ohne Scrollen -
   das Blatt, die Waage und eine hohe Skala richten sich nach der Höhe des
   Fensters, wie das Raster zum Färben (V298). */
@media (min-width: 1024px) and (max-height: 860px) {
  .grafikbild:has(.tippziel) svg.grafik.gr-kalender,
  .grafikbild:has(.tippziel) svg.grafik.gr-skala-rund,
  .grafikbild:has(.tippziel) svg.grafik.gr-skala-hoch {
    width: auto;
    max-width: 100% !important;
    height: max(250px, calc(100dvh - 400px));
  }
  /* Der Kasten um das Bild wird enger, und der Satz unter dem Bild fällt weg:
     Was gewählt ist, zeigt das Bild selbst. */
  .aufgabenbild:has(.gr-kalender, .gr-skala) {
    margin-bottom: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .lernkarte:has(.gr-kalender, .gr-skala) [data-felder] > .alle-zahl {
    display: none;
  }
}
/* Grossbuchstaben setzen: jedes Wort ein Knopf, mindestens 44 px, klein in
   Tinte; angetippt beginnt es gross und steht in Kobalt wie jede Wahl. */
.gross-saetze {
  display: grid;
  gap: 8px;
  margin: 12px 0 6px;
}
.gross-saetze:focus {
  outline: none;
}
.gross-satz {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  padding: 6px 8px;
  border: 1.5px solid var(--linie);
  border-radius: 14px;
  background: #fff;
}
.gross-wort {
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 6px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-size: 19px;
  cursor: pointer;
}
.gross-wort.gewaehlt {
  background: rgba(42, 79, 215, 0.1);
  color: var(--cobalt);
  font-weight: 700;
}
.gross-wort:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: -2px;
}
@media (hover: hover) {
  .gross-wort:not(.gewaehlt):hover {
    background: rgba(42, 79, 215, 0.06);
  }
}
@media (min-width: 1024px) and (max-height: 860px) {
  .gross-saetze {
    gap: 6px;
    margin-top: 6px;
  }
  .gross-satz {
    padding: 3px 8px;
  }
}
/* (V326 Ende) */

/* ==========================================================================
   (V327) BINGO. Oben der Scampy mit dem Ruf, der dran ist, und die Rufe als
   runde Knöpfe, darunter die Karten in drei Spalten. Eine markierte Karte
   trägt einen Stempel mit der Nummer ihres Rufs, in Kobalt wie jede Wahl; ob
   sie stimmt, sagt erst «Prüfen». Kein «Bingo!» für eine volle Reihe, kein
   Grün, kein Ziegelrot (R6, R9), und auch in einer Prüfung kein Gelb.
   ====================================================================== */
.bingo-brett {
  display: grid;
  gap: 10px;
  margin: 8px 0 6px;
}
.bingo-brett:focus {
  outline: none;
}
.bingo-kopf {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.bingo-blase {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  min-height: 72px;
  margin: 0;
  padding: 9px 14px 11px;
  border: 1.5px solid var(--linie);
  border-radius: 18px 18px 18px 6px;
  background: var(--flaeche);
  box-shadow: 0 3px 0 var(--grau-kante);
}
.bingo-zaehler {
  grid-column: 1;
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bingo-ruftext {
  grid-column: 1;
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.bingo-ruftext.fertig {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-soft);
}
.bingo-bildfeld {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
}
.bingo-bildfeld img {
  width: 52px;
  height: 52px;
}
.bingo-rufe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-left: 52px;
}
.bingo-rufknopf {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 2px dashed var(--grau-kante);
  border-radius: 50%;
  background: #fff;
  color: var(--ink-soft);
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
}
.bingo-rufknopf.markiert {
  border-style: solid;
  border-color: var(--cobalt);
  background: var(--cobalt);
  color: #fff;
}
.bingo-rufknopf.dran {
  border-style: solid;
  border-color: var(--cobalt);
  color: var(--cobalt-tief);
  box-shadow: 0 0 0 3px rgba(42, 79, 215, 0.22);
}
.bingo-rufknopf.markiert.dran {
  color: #fff;
}
.bingo-karten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border: 1.5px solid var(--linie);
  border-radius: 16px;
  background:
    repeating-linear-gradient(45deg, rgba(42, 79, 215, 0.035) 0 8px, transparent 8px 16px),
    var(--flaeche);
}
.bingo-karte {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 64px;
  margin: 0;
  padding: 8px 6px;
  border: 1.5px solid var(--grau-kante);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 3px 0 var(--grau-kante);
  cursor: pointer;
}
.bingo-kartentext {
  overflow-wrap: anywhere;
  hyphens: auto;
}
.bingo-karte.markiert {
  border-color: var(--cobalt);
  background: #eef1fd;
  color: var(--cobalt-tief);
  box-shadow: 0 3px 0 var(--cobalt);
}
.bingo-karte.dran {
  box-shadow:
    0 0 0 3px rgba(42, 79, 215, 0.22),
    0 3px 0 var(--cobalt);
}
/* Der Stempel: rund, in Kobalt, mit der Nummer des Rufs - wie ein Klecks
   des Bingostifts, aber ohne Urteil. */
.bingo-stempel {
  position: absolute;
  top: -8px;
  right: -6px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--cobalt);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.bingo-nochmals {
  margin: 0 0 0 auto;
}
.bingo-karte:focus-visible,
.bingo-rufknopf:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
@media (hover: hover) {
  .bingo-karte:not(.markiert):hover {
    background: #f3f5fc;
  }
  .bingo-rufknopf:not(.markiert):hover {
    background: #f3f5fc;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .bingo-stempel {
    animation: bingo-stempeln 0.28s cubic-bezier(0.3, 1.6, 0.5, 1);
  }
  .bingo-ruftext:not(.fertig) {
    animation: blase-auf 0.3s cubic-bezier(0.3, 1.4, 0.5, 1) backwards;
  }
}
@keyframes bingo-stempeln {
  from {
    transform: scale(1.8);
    opacity: 0;
  }
}
/* AUF EINEM SCHMALEN TELEFON rücken die Rufe nicht ein, und ein langes Wort
   wird kleiner, statt mitten durch zu brechen. */
@media (max-width: 639.98px) {
  .bingo-rufe {
    gap: 6px;
    padding-left: 0;
  }
  .bingo-karten {
    gap: 6px;
    padding: 6px;
  }
  .bingo-karte {
    padding: 8px 4px;
  }
  .bingo-karte.lang {
    font-size: 14px;
  }
  .bingo-karte.sehr-lang {
    font-size: 12.5px;
  }
}
/* AB 640 PX bleibt die Karte so breit, dass sich drei Spalten noch lesen
   lassen wie eine Karte und nicht wie eine Tabelle. */
@media (min-width: 640px) {
  .bingo-brett {
    max-width: 620px;
  }
  .bingo-karte {
    min-height: 72px;
    font-size: 17px;
  }
}
/* BREIT UND NIEDRIG (V159): Ein Tablet quer zeigt die Karte ohne Scrollen -
   Ruf und Rufe nebeneinander, die Karten niedriger, und die Hilfe darunter
   fällt weg. */
@media (min-width: 1024px) and (max-height: 860px) {
  .bingo-brett {
    gap: 6px;
    margin: 4px 0;
  }
  .bingo-blase {
    min-height: 56px;
    padding: 6px 12px 8px;
  }
  .bingo-ruftext {
    font-size: 19px;
  }
  .bingo-bildfeld,
  .bingo-bildfeld img {
    width: 40px;
    height: 40px;
  }
  .bingo-karten {
    gap: 6px;
    padding: 6px;
  }
  .bingo-karte {
    min-height: 48px;
    padding: 4px 6px;
    font-size: 15px;
  }
  [data-felder]:has(> .bingo-brett) > .alle-zahl {
    display: none;
  }
}
/* (V327 Ende) */

/* ==========================================================================
   (V328) BINGO ZUM HÖREN UND MIT BILDERN. In der Blase steht beim Hören ein
   Lautsprecher statt des Worts; eine Karte mit Bild zeigt nur das Bild, so
   gross, wie die Karte es zulässt. Kein Urteil in Farbe (R6, R9).
   ====================================================================== */
.bingo-anhoeren {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 4px 0 0;
  padding: 0 16px;
  font-size: 16px;
}
.bingo-anhoeren svg {
  width: 20px;
  height: 20px;
}
.bingo-karte.mit-bild {
  padding: 6px;
}
.bingo-kartenbild {
  display: grid;
  place-items: center;
  font-size: 34px;
  line-height: 1;
}
.bingo-kartenbild img {
  width: 52px;
  height: 52px;
}
.bingo-karte.markiert .bingo-kartenbild img {
  opacity: 0.85;
}
@media (min-width: 640px) {
  .bingo-kartenbild img {
    width: 60px;
    height: 60px;
  }
}
@media (min-width: 1024px) and (max-height: 860px) {
  .bingo-anhoeren {
    margin-top: 2px;
  }
  .bingo-kartenbild img {
    width: 38px;
    height: 38px;
  }
  .bingo-kartenbild {
    font-size: 26px;
  }
}
/* (V328 Ende) */

/* ==========================================================================
   (V329) DAS BILDERRÄTSEL. Zeilen aus Bildern und Rechenzeichen, jede mit
   ihrem Ergebnis, darunter jedes Bild mit einem Feld für seinen Wert und
   zuletzt, wo es eine gibt, die Zeile mit dem Feld statt des Ergebnisses.
   Eine Zeile bricht nie um - sie ist eine Gleichung -, also werden die
   Bilder auf einem schmalen Telefon kleiner. Ein Feld bleibt 44 px hoch,
   und nichts urteilt: kein Grün und kein Ziegelrot (R6, R9).
   ====================================================================== */
.bilderraetsel {
  --raetselbild: clamp(30px, 8.6vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 12px 0 6px;
}
.raetsel-zeilen {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 100%;
}
.raetsel-zeile {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 10px;
  background: var(--plaster);
}
.raetsel-teil {
  display: inline-grid;
  place-items: center;
  flex: 0 0 var(--raetselbild);
  width: var(--raetselbild);
  height: var(--raetselbild);
  font-size: calc(var(--raetselbild) * 0.8);
  line-height: 1;
}
.raetsel-teil img {
  display: block;
  width: 100%;
  height: 100%;
}
.raetsel-zeichen,
.raetsel-ergebnis {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 21px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}
.raetsel-zeichen {
  flex: 0 0 auto;
  min-width: 12px;
  text-align: center;
}
.raetsel-ergebnis {
  min-width: 2ch;
  padding-left: 2px;
}
.raetsel-werte {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
}
.raetsel-wert {
  display: flex;
  align-items: center;
  gap: 4px;
}
.raetsel-feld {
  flex: 0 0 auto;
  width: 76px;
  height: 44px;
  border: 1.5px dashed var(--ink-soft);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.raetsel-feld:focus {
  outline: 2px solid var(--cobalt);
  outline-offset: 1px;
  border-style: solid;
}
.raetsel-zeile.frage {
  margin-top: 2px;
  padding: 4px 6px 4px 10px;
  background: transparent;
  border: 1.5px solid var(--linie-stark);
}
.raetsel-zeile.frage .raetsel-feld {
  width: 62px;
}
@media (min-width: 640px) {
  .bilderraetsel {
    --raetselbild: 52px;
  }
  .raetsel-zeile {
    gap: 6px;
    padding: 4px 14px;
  }
  .raetsel-zeichen,
  .raetsel-ergebnis {
    font-size: 24px;
  }
  .raetsel-zeile.frage .raetsel-feld {
    width: 76px;
  }
}
/* Ein Tablet quer (V159): «Prüfen» steht ohne Scrollen da, auch bei vier
   Bildern in vier Zeilen und zwei Reihen Felder - die Zeilen werden flacher,
   die Felder bleiben 44 px hoch. */
@media (min-width: 1024px) and (max-height: 860px) {
  .bilderraetsel {
    --raetselbild: 30px;
    gap: 6px;
    margin-top: 2px;
  }
  .raetsel-zeilen {
    gap: 3px;
  }
  .raetsel-zeile {
    gap: 4px;
    padding: 1px 12px;
  }
  .raetsel-zeile.frage {
    padding: 0 4px 0 12px;
  }
  .raetsel-zeichen,
  .raetsel-ergebnis {
    font-size: 20px;
  }
  .raetsel-werte {
    gap: 6px 16px;
  }
}
/* (V329 Ende) */

/* ======================================================================
   (V331) EIN STÜCK AUS DER HUNDERTERTAFEL. Ein Raster in der Form des
   Stücks: die Zahl, die dasteht, auf Papier, jedes andere Feld gestrichelt
   wie die Steine der Zahlenmauer, und wo das Stück nicht hinreicht, nichts.
   Die Zellen richten sich nach der Breite der Karte (``cqw``), die Schrift
   nach den Zellen - «100'000» passt auch auf einem Telefon von 360 px.
   Darunter die Legende mit den Pfeilen. Kein Grün und kein Ziegelrot.
   ====================================================================== */
.tafel {
  container-type: inline-size;
  margin: 12px 0 6px;
}
.tafel-raster {
  --zelle: min(84px, calc((100cqw - 18px) / 4));
  display: grid;
  grid-template-columns: repeat(var(--spalten), var(--zelle));
  grid-auto-rows: minmax(52px, auto);
  gap: 6px;
  justify-content: center;
}
.tafel-zelle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  border-radius: 6px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: min(19px, calc(var(--zelle) * 0.24));
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.tafel-zelle.gegeben {
  background: #f4f0e4;
  border: 1.5px solid #bfb08a;
  box-shadow: inset 0 -3px 0 rgba(110, 90, 40, 0.14);
}
.tafel-zelle.leer {
  background: var(--flaeche);
  border: 1.5px dashed var(--ink-soft);
  padding: 3px;
}
.tafel-feld {
  width: 100%;
  min-width: 0;
  height: 44px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: center;
}
.tafel-feld:focus {
  outline: 2px solid var(--cobalt);
  outline-offset: 1px;
  background: #fff;
}
.tafel-legende {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 18px;
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}
.tafel-regel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tafel-pfeil {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.frame.quiet .tafel-zelle.gegeben {
  background: #ece9f6;
  border-color: #8a86b8;
  box-shadow: inset 0 -3px 0 rgba(60, 56, 120, 0.14);
}
@media (min-width: 640px) {
  .tafel-raster {
    --zelle: min(96px, calc((100cqw - 18px) / 4));
    grid-auto-rows: minmax(56px, auto);
  }
}
/* AUF DEM TABLET QUER (V159): flachere Zeilen, damit «Prüfen» bei vier
   Zeilen ohne Scrollen dasteht. */
@media (min-width: 1024px) and (max-height: 860px) {
  .tafel {
    margin: 6px 0 2px;
  }
  .tafel-raster {
    grid-auto-rows: 50px;
    gap: 4px;
  }
  .tafel-legende {
    margin-top: 6px;
  }
}
/* (V331 Ende) */

/* ======================================================================
   (V332) DER FEHLER AUF DER QUITTUNG. Ein Zettel wie aus der Kasse: Kopf,
   je Zeile Menge und Ware, Preis für eines und Betrag, ein Strich und das
   Total. Jede Zeile ist ein Knopf, gewählt in Kobalt wie jede Wahl; die
   Ziffern stehen in festen Breiten, damit die Beträge untereinander stehen.
   Kein Grün und kein Ziegelrot.
   ====================================================================== */
.quittung {
  max-width: 380px;
  margin: 12px auto 6px;
  padding: 12px 10px 14px;
  background: #fffdf7;
  border: 1px solid #e3dccb;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(40, 30, 10, 0.08);
  font-variant-numeric: tabular-nums;
}
.qt-kopf {
  margin: 0 0 8px;
  text-align: center;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.qt-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 10px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 6px 8px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.qt-ware {
  overflow-wrap: anywhere;
}
.qt-preis {
  color: var(--ink-soft);
  font-size: 14px;
  white-space: nowrap;
}
.qt-betrag {
  min-width: 4.2em;
  text-align: right;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  white-space: nowrap;
}
.qt-zeile.qt-total {
  margin-top: 6px;
  border-top: 2px dashed #cfc6b0;
  border-radius: 0 0 8px 8px;
  font-weight: 700;
}
.qt-zeile.gewaehlt {
  border-color: var(--cobalt);
  border-style: solid;
  background: #eef2ff;
  box-shadow: inset 0 0 0 1.5px var(--cobalt);
}
.qt-zeile:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 1px;
}
@media (min-width: 640px) {
  .qt-zeile {
    font-size: 16px;
  }
}
@media (min-width: 1024px) and (max-height: 860px) {
  .quittung {
    margin: 6px auto 2px;
    padding: 8px 10px 10px;
  }
  .qt-kopf {
    margin-bottom: 4px;
  }
  /* WIE DIE ZEILEN BEI «WO STEHT DAS?» (V325): 40 px, damit «Prüfen» bei
     fünf Zeilen und dem Total ohne Scrollen dasteht. */
  .qt-zeile {
    min-height: 40px;
    padding: 3px 8px;
  }
}
/* (V332 Ende) */

/* ==========================================================================
   (V333) WARUM DIE SPIELHALLE ZU IST, AN JEDEM AUTOMATEN. Angeordnet am
   18.10.2026: «es muss klarer sein bei den spielkasten, warum die spielhalle
   geschlossen ist». Am Schirm hängt ein Schild «Heute zu» wie an einer
   Ladentür, darunter der Grund und der Stand der drei Ziele als drei Felder.
   Gedämpft ist nur die Zeichnung, das Schild bleibt klar. In Creme und Tinte,
   still, ohne Rot und ohne Grün (R6, R9): Zu ist ein Zustand, kein Urteil.
   ====================================================================== */
.automat.halle-zu .automat-bild {
  filter: none;
}
.automat.halle-zu .automat-zeichnung,
.automat.halle-zu .automat-anzeige {
  filter: saturate(0.45) brightness(0.92);
}
.automat-zuschild {
  position: absolute;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.automat-zutafel {
  position: relative;
  padding: 5px 10px 6px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--automat-leuchte);
  box-shadow: 0 3px 0 rgba(22, 35, 59, 0.35);
  color: var(--ink);
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-6deg);
}
/* Die Schnur, an der das Schild hängt. */
.automat-zutafel::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 50%;
  width: 28px;
  height: 13px;
  border: 2px solid var(--ink);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  transform: translateX(-50%);
}
.halle-zu-zustand {
  border-color: var(--ink);
  background: var(--automat-leuchte);
  color: var(--ink);
  font-weight: 800;
}
.automat-schild .automat-heutezu {
  min-height: 0;
  color: var(--ink);
}
.automat-zielstand {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
}
.automat-zielstand i {
  width: 18px;
  height: 8px;
  border: 1.5px solid var(--ink-soft);
  border-radius: 4px;
  background: #fff;
}
.automat-zielstand i.an {
  border-color: var(--cobalt);
  background: var(--cobalt);
}
.automat-zielstand span {
  margin-left: 3px;
}
.automat-schild .automat-preis {
  min-height: 0;
  font-size: 13px;
}
.hallezu {
  scroll-margin-top: 12px;
}
.hallezu-gewollt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: var(--automat-leuchte);
  color: var(--ink);
  font-size: 15px;
}
.hallezu-gewollt .bild {
  flex: none;
}
@media (min-width: 640px) {
  .automat-zutafel {
    font-size: 18px;
  }
}
/* DER RUF DES BINGOS BLEIBT IM BLICK (V333), angeordnet: «auf dem handy sieht
   man beim bingo keine aufgabe». Wer auf einem Telefon zu den Karten scrollt,
   sah den Ruf nicht mehr - oben stand er, unten wurde markiert. Jetzt bleibt
   der Scampy mit seiner Blase am oberen Rand stehen, solange die Karte zu
   sehen ist; die Karten gleiten darunter durch. Auf dem Schreibtisch und
   einem Tablet quer passt alles ins Fenster, dort bleibt er, wo er ist. */
@media (max-width: 1023.98px), (max-height: 520px) {
  .bingo-kopf {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: -6px -4px 0;
    padding: 6px 4px 6px;
    border-radius: 0 0 16px 16px;
    background: var(--flaeche);
  }
}
/* «NOCHMALS» (V333): ab 640 px rechts neben den Rufen, auf einem Telefon
   unter den Karten - so verschiebt er nie eine Karte. Ohne Marke ist er
   ausgeschaltet und steht trotzdem da. */
.bingo-brett {
  grid-template-columns: minmax(0, 1fr) auto;
}
.bingo-kopf,
.bingo-karten {
  grid-column: 1 / -1;
}
.bingo-rufe {
  grid-column: 1;
}
.bingo-nochmals {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  margin: 0;
}
.bingo-nochmals:disabled {
  opacity: 0.45;
  cursor: default;
}
@media (max-width: 639.98px) {
  .bingo-rufe {
    grid-column: 1 / -1;
  }
  .bingo-nochmals {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: end;
  }
}
/* (V333 Ende) */

/* ==========================================================================
   (V336) PRÜFUNG DES PROJEKTS, DRITTER TEIL - DIE OBERFLÄCHE. Ein langer Name
   im Lernmaterial schiebt die Seite nicht mehr zur Seite, und was zum
   Antippen da ist und unter 44 px lag, ist so gross, wie docs/03 Abschnitt 6
   es verlangt - gemessen als die Fläche, die einen Fingertipp fängt.
   ========================================================================== */

/* EIN LANGER NAME: Ein Name aus 80 Zeichen ohne Leerschlag machte die Spalte
   des Rasters so breit wie sein längstes Wort - auf «Bearbeiten» schob sich
   die Seite bei 360 px um 579 px zur Seite, beim Lernen um 305 px. */
.lm {
  grid-template-columns: minmax(0, 1fr);
}
.lm .sub,
.stapelstand strong {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* In der Kopfzeile der Lernkarte steht der Name höchstens auf zwei Zeilen;
   ganz steht er über dem Stapel. */
.b-lernkarte .hello span {
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* KLEINE KARTEN UND LÜCKEN: Eine Karte mit einer Ziffer, ein Wort wie «a»
   oder «Ein» und die Lücken des Magneten und des kleinen Worts waren 32 bis
   40 px breit. */
.venn-karte,
.wortkachel,
.mk-wort,
.magnet-luecke,
.andock-luecke {
  min-width: 44px;
}

/* AUF DEM TELEFON DIE GANZE BREITE DER KARTE, wie seit V326 Kalender, Lineal
   und Waage: für jedes Bild zum Antippen - die Punkte der Windrose lagen bei
   41 px -, für die Gitter mit sieben Feldern nebeneinander - Suchsel,
   Kreuzwort- und Kreuzzahlrätsel -, den Zahlenstrahl mit sieben Marken und
   die Wertetabelle. Eine hohe Skala bleibt, wie V326 sie stellt. Die
   Gitter tun es nur so weit, wie ihre Spalten es brauchen. */
@media (max-width: 639.98px) {
  .aufgabenbild:has(.tippziel):not(:has(.gr-skala-hoch)) {
    margin-right: -16px;
    margin-left: -16px;
    padding-right: 0;
    padding-left: 0;
  }
  .strahl-tippen,
  .werte-rahmen {
    margin-right: -16px;
    margin-left: -16px;
  }
  .werte-rahmen {
    max-width: none;
  }
  /* Ein Gitter reicht nur so weit hinaus, wie es braucht, und ein kleineres
     bleibt in der Mitte; die Wörter und Hinweise darunter bleiben im Rand. */
  .ws-gitter,
  .kw-gitter {
    width: auto;
  }
  .ws-gitter {
    margin-right: max(-16px, calc((100% - var(--spalten) * 46px) / 2));
    margin-left: max(-16px, calc((100% - var(--spalten) * 46px) / 2));
  }
  .kw-gitter {
    margin-right: max(-16px, calc((100% - var(--spalten) * 48px) / 2));
    margin-left: max(-16px, calc((100% - var(--spalten) * 48px) / 2));
  }
}
/* Auf einem schmalen Telefon fängt jedes Feld eines Gitters den Tipp bis an
   sein Nachbarfeld: Die Felder stehen ohne Lücke, und was sie trennt, ist ein
   heller Rand in ihnen. Die Wertetabelle gibt ihren Namen in der ersten
   Spalte etwas Breite ab. */
@media (max-width: 399px) {
  .ws-gitter {
    gap: 0;
    padding: 0;
  }
  .ws-feld {
    box-shadow: inset 0 0 0 2px var(--flaeche);
  }
  .kw-gitter {
    gap: 0;
  }
  /* Das Feld eines Buchstabens reicht über den Rand seines Kästchens, der
     durchscheint: So fängt auch der Rand den Tipp. */
  .kw-feld {
    width: calc(100% + 3px);
    height: calc(100% + 3px);
    margin: -1.5px;
  }
  .werte-tabelle th {
    width: 20%;
    padding: 4px 5px;
    font-size: 13px;
  }
  .werte-tabelle td.luecke-feld {
    padding: 4px 2px;
  }
}

/* SATZZEICHEN UND KOMMAS: Das Kästchen am Satzende ist 44 statt 40 px
   breit, und ein Wort zwischen zwei Lücken für ein Komma mindestens 26 px -
   wie die Teile bei den Satzzeichen seit V325: Nach «gibt» vor «es» lagen
   die beiden Tippziele übereinander, und das erste fing nur noch 37 px. */
.sz-luecke.gross {
  min-width: 44px;
}
.komma-wort {
  justify-content: center;
  min-width: 26px;
}

/* EINE FANGFLÄCHE IM BILD (V336): unsichtbar und doch zum Antippen - um
   einen kleinen Kontinent, unter dem Band aus Eis, um die Kreise in den
   Meeren und die Punkte der Windrose. Hervorgehoben wird weiter nur, was man
   sieht (`.tippflaeche`). */
.grafik .tippfang {
  fill: transparent;
  stroke: none;
  pointer-events: all;
}

/* «0 % gebaut» bleibt auf dem Ausweis eine Zeile, auch neben einem langen
   Fachnamen wie «Räume, Zeiten, Gesellschaften». */
.b-ausweis .srow .r small {
  white-space: nowrap;
}

/* DIE KÖRBCHEN VON CHERRY DROP auf einem Telefon hochkant: Acht zu je 44 px
   passen nur über die ganze Breite, also verlässt das Feld den Rand des
   Schirms. Die Körbchen stehen ohne Lücke, und was sie trennt, ist ein
   durchsichtiger Rand, der den Tipp mitfängt - bei 360 px 44 statt 34 px. */
@media (max-width: 479px) {
  .chriesi-feld {
    --zelle: min(66px, (100vw - 8px) / 8.8, (100dvh - 250px) / var(--zeilen, 6));
    gap: 0;
    padding: 3px;
    margin-right: calc(50% - 50vw + 1px);
    margin-left: calc(50% - 50vw + 1px);
  }
  .chriesi-spalte {
    border: calc(0.05 * var(--zelle)) solid transparent;
    background-clip: padding-box;
  }
}
/* (V336 Ende) */

/* ========================================================================
 * V338 - WÖRTER AUS DEN WORTLISTEN, UND DIE AUSWAHL NEBENEINANDER
 *
 * «beim eigenen Lernmaterial muss man auch aus bestehenden wortlisten
 * aussuchen können. / verbessere die wortlisten auswahl so, dass die auch auf
 * mobile nebeneinander sind und nicht untereinander, also die suchresultate
 * und die gewählten» (18.10.2026). Bis dahin standen «Gefunden» und «In der
 * Vorbereitung» erst ab 1024 px nebeneinander (V317). Jetzt auf jeder Breite
 * - für die Prüfungsvorbereitung der Fächer und der Kurse und für die
 * Auswahl im Lernmaterial, die dieselben Bauteile trägt. Auf dem Telefon
 * werden die Einträge schmaler: kleinere Schrift, das Zeichen oben rechts,
 * ein langes Wort getrennt statt abgeschnitten. Jedes Tippziel bleibt
 * mindestens 44 px hoch.
 * ======================================================================== */
.vorbereitung-seiten {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}
@media (min-width: 640px) {
  .vorbereitung-seiten {
    gap: 14px;
  }
}
@media (min-width: 1024px) {
  .vorbereitung-seiten {
    gap: 18px;
  }
}
@media (max-width: 639.98px) {
  .vorbereitung-seite {
    padding: 8px;
  }
  .vorbereitung-seite h2 {
    font-size: 15px;
    margin-bottom: 8px;
  }
  .vorbereitung-seite h2 small {
    font-size: 12px;
    line-height: 1.3;
  }
  .vorbereitung-seite .vb-liste {
    gap: 6px;
  }
  .vorbereitung-seite .vb-wahl {
    align-items: flex-start;
    gap: 6px;
    min-height: 48px;
    padding: 7px 6px 7px 9px;
  }
  .vorbereitung-seite .vb-wahl-text strong {
    font-size: 14px;
    hyphens: auto;
  }
  .vorbereitung-seite .vb-wahl-text small {
    font-size: 12px;
    line-height: 1.3;
  }
  .vorbereitung-seite .vb-wahl-zeichen {
    width: 24px;
    height: 24px;
    font-size: 18px;
  }
  .vorbereitung-seite :is(.vorbereitung-keine, .kartenruhe) {
    font-size: 13px;
  }
  .vorbereitung-alle .btn {
    min-height: 44px;
    padding-inline: 8px;
    font-size: 14px;
    white-space: normal;
    text-align: center;
  }
}

/* Die Auswahl im Lernmaterial: Fach und Stufe nebeneinander, darunter Wort
   und Knopf. */
.lm-woerter-satz {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0 0 12px;
}
.lm-woerter-filter {
  flex: 1 1 100%;
  display: flex;
  gap: 8px;
}
.lm-woerter-filter .vorbereitung-stufe {
  flex: 1 1 0;
  min-width: 0;
}
.lm-woerter-suche .vorbereitung-feld {
  flex: 1 1 150px;
}
@media (min-width: 640px) {
  .lm-woerter-filter {
    flex: 0 1 420px;
  }
}
/* Die Rückseite unter der Vorderseite. */
.vb-wahl-hinten {
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: anywhere;
}
@media (max-width: 639.98px) {
  .vorbereitung-seite .vb-wahl-hinten {
    font-size: 13.5px;
    hyphens: auto;
  }
}

/* Im Lernmaterial der Weg dorthin - auf der Seite eines Materials und beim
   Anlegen, wo «Speichern und Wörter wählen» nur zu Lernkarten gehört. */
.lm-woerter-weg {
  justify-self: start;
  gap: 8px;
}
.lm-wortlisten {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--flaeche);
  font-size: 14px;
  line-height: 1.45;
}
.lm-wortlisten > span:first-child {
  flex: none;
}
.lm-speichern .lm-teil-woerter {
  gap: 8px;
}
.lm-neu-form:not(:has(input[value="lernkarten"]:checked)) .lm-teil-woerter {
  display: none;
}
/* (V338 Ende) */

/* ==========================================================================
   (V340) LANGSAMER ANHÖREN, UND WAS GERADE SPIELT. Neben «Anhören» steht
   «Langsamer» - dieselbe Aufnahme mit drei Vierteln des Tempos. Was spielt,
   trägt `spielt`: ein Rand und ein Hauch Kobalt, das Zeichen wiegt sich,
   ohne den Wunsch nach weniger Bewegung. Kein Urteil in Farbe (R6, R9).
   ====================================================================== */
.hoeren {
  display: flex;
  gap: 10px;
}
.hoeren .btn.wide {
  flex: 1 1 auto;
}
.hoeren .btn.langsamer {
  flex: none;
  padding: 0 18px;
}
.anhoeren-zeile {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  position: relative;
  z-index: 2;
}
.karteikarte .anhoeren-zeile .anhoeren {
  margin-top: 8px;
}
.karteikarte .anhoeren-zeile .langsamer {
  min-width: 0;
  padding: 0 16px;
}
.anhoeren-zeile [hidden] {
  display: none;
}
.btn.anhoeren.spielt {
  border-color: var(--cobalt);
  background: color-mix(in srgb, var(--cobalt) 10%, #fff);
}
@media (prefers-reduced-motion: no-preference) {
  .btn.anhoeren.spielt svg {
    animation: anhoeren-wiegen 0.9s ease-in-out infinite alternate;
  }
}
@keyframes anhoeren-wiegen {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.15);
  }
}
@media (max-width: 359px) {
  .hoeren .btn.langsamer {
    padding: 0 12px;
  }
}
/* (V340 Ende) */

/* ==========================================================================
   (V342) WEITER ÜBEN OBEN IM FACH. Der Raum, der als Nächstes drankommt, ein
   Fingertipp im Kopf des Fachs - in Gelb wie jeder Knopf, der etwas anfängt.
   ====================================================================== */
.floorhead .weiter-ueben {
  gap: 8px;
  margin-top: 12px;
  font-size: 15px;
  text-align: left;
}
.floorhead .weiter-ueben span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.floorhead .weiter-ueben strong {
  font-weight: 800;
}
/* (V342 Ende) */

/* ==========================================================================
   (V344) DIE FEHLERJAGD. Drei Sätze wie auf den Linien eines Hefts, vorn ihre
   Nummer, jedes Wort ein Knopf von mindestens 44 px. Ein eingekreistes Wort
   trägt einen Ring in Kobalt wie jede Wahl - der Kreis, mit dem man im Heft
   einen Fehler markiert, kein Urteil: ob er stimmt, sagt erst «Prüfen». Kein
   Grün, kein Ziegelrot (R6, R9), und auch in einer Prüfung kein Gelb.
   ====================================================================== */
.fj-saetze {
  display: grid;
  gap: 8px;
  margin: 12px 0 6px;
}
.fj-saetze:focus {
  outline: none;
}
.fj-satz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 6px 10px 6px 6px;
  border: 1.5px solid var(--linie);
  border-radius: 14px;
  background:
    linear-gradient(to bottom, transparent calc(100% - 6px), rgba(42, 79, 215, 0.08) 0) #fff;
}
.fj-nummer {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--plaster-hi, #eef1f6);
  color: var(--ink-soft, #5b6475);
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 14px;
  font-weight: 700;
}
.fj-wort {
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 7px;
  border: 2.5px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-size: 19px;
  cursor: pointer;
}
.fj-wort.gewaehlt {
  border-color: var(--cobalt);
  background: rgba(42, 79, 215, 0.08);
  color: var(--cobalt);
  font-weight: 700;
}
.fj-wort:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 1px;
}
.fj-hinweis {
  margin-left: 6px;
  color: var(--ink-soft, #5b6475);
  font-size: 15px;
  font-style: italic;
}
@media (hover: hover) {
  .fj-wort:not(.gewaehlt):hover {
    background: rgba(42, 79, 215, 0.06);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .fj-wort.gewaehlt {
    animation: fj-kreis 0.22s ease-out;
  }
}
@keyframes fj-kreis {
  from {
    transform: scale(0.92);
  }
  to {
    transform: scale(1);
  }
}
@media (max-width: 380px) {
  .fj-wort {
    padding: 0 5px;
    font-size: 18px;
  }
}
@media (min-width: 1024px) and (max-height: 860px) {
  .fj-saetze {
    gap: 4px;
    margin-top: 4px;
  }
  .fj-satz {
    gap: 0;
    padding: 0 8px 0 4px;
  }
  .fj-wort {
    padding: 0 5px;
    font-size: 17.5px;
  }
  .fj-hinweis {
    font-size: 14px;
  }
  .lernkarte:has(.fj-saetze) [data-felder] > .alle-zahl {
    display: none;
  }
}
/* (V344 Ende) */

/* ==========================================================================
   (V345) GRUPPEN FINDEN. Oben die Gruppen als Zeilen mit ihren Plätzen, unten
   die freien Karten. Die Gruppe, die dran ist, trägt einen Rand in Kobalt, eine
   volle eine helle Fläche in Kobalt - wie jede Wahl; ob sie stimmt, sagt erst
   «Prüfen». Kein Grün, kein Ziegelrot (R6, R9), auch in einer Prüfung kein Gelb.
   ====================================================================== */
.gp-brett {
  display: grid;
  gap: 12px;
  margin: 12px 0 6px;
}
.gp-brett:focus {
  outline: none;
}
.gp-gruppen {
  display: grid;
  gap: 8px;
}
.gp-gruppe {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 6px 8px 8px;
  border: 1.5px solid var(--linie);
  border-radius: 14px;
  background: #fff;
}
.gp-gruppe.dran {
  border-color: var(--cobalt);
  box-shadow: 0 0 0 1px var(--cobalt);
}
.gp-gruppe.voll {
  background: rgba(42, 79, 215, 0.06);
}
.gp-titel {
  color: var(--ink-soft);
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 13.5px;
  font-weight: 700;
}
.gp-plaetze {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.gp-plaetze > * {
  flex: 1 1 72px;
  min-width: 0;
}
.gp-platz {
  min-height: 44px;
  border: 1.5px solid var(--linie);
  border-radius: 10px;
  background: rgba(42, 79, 215, 0.04);
}
.gp-vorrat {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
}
.gp-karte {
  min-height: 48px;
  margin: 0;
  padding: 6px 8px;
  border: 1.5px solid var(--linie);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-family: "Atkinson Hyperlegible", sans-serif;
  font-size: 17px;
  line-height: 1.2;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  cursor: pointer;
}
.gp-karte.gelegt {
  flex: 1 1 auto;
  min-height: 44px;
  font-size: 15.5px;
  border-color: var(--cobalt);
  color: var(--cobalt);
  font-weight: 700;
}
.gp-karte:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 1px;
}
@media (hover: hover) {
  .gp-karte:not(.gelegt):hover {
    background: rgba(42, 79, 215, 0.06);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .gp-karte.gelegt {
    animation: gp-ein 0.2s ease-out;
  }
}
@keyframes gp-ein {
  from {
    transform: translateY(6px);
    opacity: 0.6;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@media (min-width: 1024px) and (max-height: 860px) {
  .gp-brett {
    gap: 8px;
    margin-top: 6px;
  }
  .gp-gruppen {
    gap: 6px;
  }
  /* Breit und niedrig (V159): die Gruppen links, die freien Karten rechts,
     damit «Prüfen» ohne Scrollen dasteht; der Satz darunter fällt weg. */
  .gp-brett {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: start;
  }
  .gp-gruppe {
    padding: 4px;
  }
  /* Die Nummer einer Gruppe steht dort nur für Vorlesehilfen: Der Rahmen sagt,
     was eine Gruppe ist, und die Zeile bleibt eine Zeile hoch. */
  .gp-titel {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .gp-plaetze {
    flex-wrap: nowrap;
  }
  .gp-plaetze > * {
    flex: 1 1 0;
  }
  .gp-karte {
    min-height: 44px;
    padding: 3px 5px;
    font-size: 14.5px;
  }
  .gp-karte.gelegt {
    font-size: 14px;
  }
  .gp-vorrat {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  .lernkarte:has(.gp-brett) [data-felder] > .alle-zahl {
    display: none;
  }
}
/* (V345 Ende) */

/* ======================================================================
   (V346) EIN BILD BESCHRIFTEN. Das Bild ist eines zum Antippen (V295),
   darunter stehen Namen. Ein Name ist gewählt, in Kobalt wie jede Wahl,
   und ein Tipp auf seine Stelle im Bild legt ihn dorthin: Dort steht er als
   Schild, an dem Punkt, den der Server für die Stelle angibt. Die Schilder
   stehen in einer Fläche genau über dem Bild (`bs-flaeche`) und fangen
   keinen Finger - ein Tipp trifft die Stelle darunter. Die Lösung zeigt die
   richtigen Schilder gestrichelt in Tinte. Kein Grün und kein Ziegelrot
   (R6, R9), jedes Tippziel mindestens 44 px.
   ====================================================================== */
.bs-flaeche {
  position: relative;
  max-width: min(100%, 460px);
  margin: 0 auto;
}
.bs-schild {
  position: absolute;
  z-index: 1;
  transform: translate(-50%, -50%);
  padding: 2px 7px;
  border: 2px solid var(--cobalt);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(23, 28, 48, 0.22);
  color: var(--ink);
  font: 700 13px/1.25 "Atkinson Hyperlegible", sans-serif;
  white-space: nowrap;
  pointer-events: none;
  animation: bs-auflegen 0.18s ease-out;
}
.bs-schild.ist-loesung {
  border-style: dashed;
  border-color: var(--ink);
  animation: none;
}
@keyframes bs-auflegen {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
}
@media (prefers-reduced-motion: reduce) {
  .bs-schild {
    animation: none;
  }
}
/* Eine Stelle, auf der ein Name liegt, ist leicht getönt - damit man sieht,
   wohin das Schild gehört, auch wo es über den Rand ragt. */
.grafik .tippziel.beschriftet .gs-wland {
  fill: #c9d3f6;
}
.grafik .tippziel.beschriftet .gs-kartenziel {
  fill: rgba(42, 79, 215, 0.14);
}
.grafik .tippziel.beschriftet .gs-wring,
.grafik .tippziel.beschriftet .gs-rosepunkt {
  stroke: var(--cobalt);
}
.bs-namen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 8px;
}
.bs-name {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 13px;
  border: 1.5px solid var(--linie);
  border-radius: 12px;
  background: var(--flaeche);
  box-shadow: 0 4px 0 var(--grau-kante);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.bs-name:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--grau-kante);
}
.bs-name.gewaehlt {
  background: #dfe5fb;
  box-shadow: inset 0 0 0 2px var(--cobalt), 0 4px 0 var(--grau-kante);
}
/* Gelegt: blass und flach - antippen holt ihn zurück. */
.bs-name.benutzt {
  opacity: 0.35;
  box-shadow: none;
}
.bs-name:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.bs-namen > .bs-nochmals {
  min-height: 44px;
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .bs-name:active {
    transform: none;
  }
}
/* BREIT UND NIEDRIG (V159): Bild und Namen nebeneinander, damit «Prüfen» im
   Fenster bleibt - das Bild links, so hoch, wie das Fenster es zulässt. */
@media (min-width: 1024px) and (max-height: 860px) {
  .lernkarte:has(.bs-namen) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    column-gap: 16px;
    align-items: start;
  }
  .lernkarte:has(.bs-namen) > * {
    grid-column: 1 / -1;
  }
  .lernkarte:has(.bs-namen) > .expr {
    grid-row: 1;
  }
  .lernkarte:has(.bs-namen) > .hoeren {
    grid-row: 2;
  }
  .lernkarte:has(.bs-namen) > [data-bild] {
    grid-row: 3;
    grid-column: 1;
  }
  .lernkarte:has(.bs-namen) > form {
    grid-row: 3;
    grid-column: 2;
  }
  /* Das Bild so hoch, wie das Fenster es zulässt: Die Fläche wird schmaler,
     im Verhältnis des Bilds (`--bs-seiten`, gesetzt von `aufgabe.js`), und
     das Bild füllt sie ganz - so bleibt jedes Schild über seiner Stelle. */
  .lernkarte:has(.bs-namen) .bs-flaeche {
    width: min(100%, calc(max(220px, 100dvh - 330px) * var(--bs-seiten, 1.5)));
  }
  .lernkarte:has(.bs-namen) .aufgabenbild {
    margin: 0;
    padding: 4px;
  }
  .lernkarte:has(.bs-namen) .grafikbild:has(.tippziel) svg.grafik {
    max-width: 100% !important;
  }
  .lernkarte:has(.bs-namen) [data-felder] > .alle-zahl {
    display: none;
  }
  /* Rechts die Namen untereinander, darunter «Prüfen». */
  .bs-namen {
    flex-direction: column;
    align-items: stretch;
    margin: 0 0 8px;
  }
  .bs-name {
    padding: 6px 10px;
    font-size: 15px;
  }
  .lernkarte:has(.bs-namen) .knoepfe {
    flex-direction: column;
    align-items: stretch;
  }
}
/* (V346 Ende) */

/* ======================================================================
   (V347) WER BIN ICH? Oben die Hinweise, mit denen sich eine Zahl
   vorstellt, darunter zwölf Karten der Grösse nach. Eine gestrichene Karte
   ist grau mit einem Strich quer darüber, die letzte, die übrig ist, trägt
   Kobalt wie jede Wahl; ein abgehakter Hinweis bekommt einen Haken. Nichts
   davon urteilt - kein Grün und kein Ziegelrot (R6, R9). Jedes Tippziel ist
   mindestens 44 px hoch.
   ====================================================================== */
.st-brett {
  display: grid;
  gap: 10px;
  margin: 8px 0 4px;
}
.st-brett:focus {
  outline: none;
}
.st-hinweise {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 6px;
  border: 1.5px solid var(--linie);
  border-radius: 14px;
  background: #f6f7fb;
  list-style: none;
}
.st-hinweis {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 4px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}
.st-hinweis:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 1px;
}
.st-marke {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--cobalt);
  border-radius: 50%;
  background: #fff;
  color: var(--cobalt-tief);
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 15px;
  font-weight: 700;
}
.st-hinweis.erledigt .st-marke {
  background: var(--cobalt);
  color: #fff;
}
.st-hinweis.erledigt .st-satz {
  color: var(--ink-soft);
}
.st-karten {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.st-karte {
  position: relative;
  min-height: 52px;
  margin: 0;
  padding: 6px 4px;
  border: 1.5px solid var(--linie);
  border-radius: 14px;
  background: var(--flaeche);
  box-shadow: 0 3px 0 var(--grau-kante);
  color: var(--ink);
  font: inherit;
  font-size: 19px;
  font-weight: 700;
  cursor: pointer;
}
.st-karte:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.st-karte.gestrichen {
  border-color: #dfe2ea;
  background: #eef0f4;
  box-shadow: none;
  color: #8a91a3;
  transform: translateY(3px);
}
.st-karte.gestrichen::after {
  position: absolute;
  top: 50%;
  right: 12%;
  left: 12%;
  height: 2.5px;
  border-radius: 2px;
  background: #7b8296;
  content: "";
  transform: rotate(-14deg);
}
.st-karte.bleibt {
  border-color: var(--cobalt);
  background: #eef1fd;
  box-shadow: 0 3px 0 rgba(42, 79, 215, 0.45);
  color: var(--cobalt-tief);
}
.st-nochmals {
  margin-top: 10px;
}
@media (prefers-reduced-motion: no-preference) {
  .st-karte {
    transition: transform 0.15s ease, background-color 0.15s ease;
  }
  .st-karte.gestrichen::after {
    animation: st-strich 0.22s ease-out;
  }
}
@keyframes st-strich {
  0% { right: 88%; }
  100% { right: 12%; }
}
@media (min-width: 640px) {
  .st-karten {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
/* BREIT UND NIEDRIG (V159): die Hinweise links, die Karten rechts, damit
   «Prüfen» im Fenster bleibt. */
@media (min-width: 1024px) and (max-height: 860px) {
  .st-brett {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  .st-karten {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .st-karte {
    min-height: 46px;
    font-size: 17px;
  }
  .st-hinweis {
    font-size: 15px;
  }
}
/* (V347 Ende) */

/* (V348) WÖRTER STATT ZAHLEN: Ein Wort hat bis zu zehn Buchstaben - auf dem
   Telefon zwei Spalten, breiter vier, also acht Wörter in zwei Reihen. Etwas
   kleiner als eine Zahl, damit es nie abgeschnitten ist. */
.st-karten.woerter {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.st-karten.woerter .st-karte {
  font-size: 17px;
  overflow-wrap: anywhere;
}
@media (min-width: 640px) {
  .st-karten.woerter {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* Breit und niedrig (V159) stehen die Karten in der halben Breite: zwei
   Spalten, damit «Prüfen» im Fenster bleibt. */
@media (min-width: 1024px) and (max-height: 860px) {
  .st-karten.woerter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .st-karten.woerter .st-karte {
    font-size: 16px;
  }
}
/* (V348 Ende) */

/* ======================================================================
   (V349) DER ZAHLENPFAD: ein Gitter aus Rechnungen oder Zahlen, oben links
   der Start, unten rechts das Ziel. Der Weg ist Kobalt wie jede Wahl, jedes
   Feld mit der Zahl seines Schritts, das letzte mit einem Ring. Nichts davon
   urteilt - kein Grün und kein Ziegelrot (R6, R9). Jedes Feld ist mindestens
   44 px hoch.
   ====================================================================== */
.pf-brett {
  display: grid;
  grid-template-columns: repeat(var(--pf-spalten, 4), minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0 4px;
}
.pf-brett:focus {
  outline: none;
}
.pf-feld {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  margin: 0;
  padding: 15px 3px 6px;
  border: 1.5px solid var(--linie);
  border-radius: 12px;
  background: var(--flaeche);
  box-shadow: 0 3px 0 var(--grau-kante);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
  cursor: pointer;
}
.pf-feld:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.pf-text {
  text-wrap: balance;
}
.pf-text.lang {
  font-size: 14px;
}
.pf-feld.auf-weg {
  border-color: var(--cobalt);
  background: #eef1fd;
  box-shadow: 0 3px 0 rgba(42, 79, 215, 0.45);
  color: var(--cobalt-tief);
}
.pf-feld.zuletzt {
  box-shadow:
    0 0 0 3px rgba(42, 79, 215, 0.28),
    0 3px 0 rgba(42, 79, 215, 0.45);
}
.pf-nr {
  position: absolute;
  top: 3px;
  right: 6px;
  color: var(--cobalt-tief);
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 12px;
  font-weight: 700;
}
.pf-marke {
  position: absolute;
  top: 3px;
  left: 6px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
}
.pf-feld.auf-weg .pf-marke {
  color: var(--cobalt-tief);
}
.pf-fuss {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  margin-top: 6px;
}
.pf-fuss .alle-zahl {
  margin: 0;
}
.pf-nochmals {
  flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .pf-feld {
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }
}
@media (min-width: 640px) {
  .pf-brett {
    gap: 8px;
  }
  .pf-feld {
    font-size: 17px;
  }
  .pf-text.lang {
    font-size: 16px;
  }
}
/* BREIT UND NIEDRIG (V159): flachere Felder, damit «Prüfen» im Fenster
   bleibt. */
@media (min-width: 1024px) and (max-height: 860px) {
  .pf-brett {
    gap: 4px;
  }
  .pf-feld {
    min-height: 44px;
    padding: 12px 3px 3px;
    font-size: 15px;
  }
}
/* (V349 Ende) */

/* ==========================================================================
   (V351) DAS PULT. Angeordnet am 18.10.2026: «joystick und buttons zum spielen
   implementieren … so wie in richtigen arcade spielen». Unter dem Spielfeld
   ein Pult in der Farbe des Automaten: links ein Joystick mit Kugel, rechts
   runde Knöpfe in seinen beiden Farben, darunter ihr Wort. Am Flipper stehen
   die Knöpfe der Arme aussen. Ab 640 px quer liegen die beiden Hälften über
   den unteren Ecken des Spielfelds, wo die Daumen sind - so bekommt das Feld
   die ganze Höhe. Kein Grün und kein Ziegelrot (R6, R9).
   ====================================================================== */
.arcadepult {
  --pult-farbe: var(--automat-pult, #4a5788);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 760px;
  margin-top: 2px;
  padding: 10px 18px 12px;
  border-radius: 20px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--pult-farbe) 80%, #fff) 0,
      var(--pult-farbe) 22%,
      color-mix(in srgb, var(--pult-farbe) 72%, #000) 100%
    );
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.2),
    inset 0 -3px 0 rgba(0, 0, 0, 0.3),
    0 5px 0 rgba(0, 0, 0, 0.35);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.arcadepult:not(:has(.pult-stick)),
.arcadepult:not(:has(.pultknopf)) {
  justify-content: center;
}
.pult-knoepfe {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}
.pult-flipper .pult-knoepfe {
  justify-content: space-between;
  width: 100%;
}

/* Der Joystick: ein Sockel mit Kerben, ein Kragen, die Stange zur Kugel. */
.pult-stick {
  position: relative;
  flex: none;
  width: 108px;
  height: 108px;
}
.stick-sockel {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #2c3040 0 34%, #15171f 66%, #0b0c11 100%);
  box-shadow:
    inset 0 4px 8px rgba(0, 0, 0, 0.65),
    0 0 0 3px rgba(0, 0, 0, 0.4),
    0 2px 0 3px rgba(255, 255, 255, 0.12);
  cursor: grab;
  touch-action: none;
}
.pult-stick.gedrueckt .stick-sockel {
  cursor: grabbing;
}
.stick-kerbe {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7);
  transform: translate(-50%, -50%);
}
.stick-kerbe-quer {
  width: 72%;
  height: 14px;
}
.stick-kerbe-hoch {
  width: 14px;
  height: 72%;
}
.stick-kragen {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #5a6070, #1c1f28 70%);
  transform: translate(-50%, -50%);
}
.stick-stange {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(180deg, #e3e6ee, #8a909e 55%, #565b68);
  transform: translateY(-50%);
  transform-origin: 0 50%;
}
.stick-kugel {
  --kugel: var(--automat-knopf-a, #f58fb5);
  position: absolute;
  left: calc(50% - 26px);
  top: calc(50% - 26px);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 36% 30%,
    color-mix(in srgb, var(--kugel) 45%, #fff) 0 16%,
    var(--kugel) 46%,
    color-mix(in srgb, var(--kugel) 62%, #000) 100%
  );
  box-shadow:
    0 6px 10px rgba(0, 0, 0, 0.45),
    inset 0 -3px 5px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

/* Die Knöpfe: eine runde Kappe mit Ring, die sich drücken lässt. */
.pultknopf {
  --kappe: var(--automat-knopf-a, #f58fb5);
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.88);
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.pultknopf.pult-b {
  --kappe: var(--automat-knopf-b, #f5c93f);
}
.pultknopf-kappe {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 36% 30%,
    color-mix(in srgb, var(--kappe) 45%, #fff) 0 16%,
    var(--kappe) 48%,
    color-mix(in srgb, var(--kappe) 66%, #000) 100%
  );
  box-shadow:
    0 0 0 4px rgba(0, 0, 0, 0.45),
    0 0 0 8px color-mix(in srgb, var(--kappe) 30%, #1b1d26),
    0 7px 0 8px rgba(0, 0, 0, 0.45);
}
.pultknopf.gedrueckt .pultknopf-kappe {
  transform: translateY(4px);
  box-shadow:
    0 0 0 4px rgba(0, 0, 0, 0.45),
    0 0 0 8px color-mix(in srgb, var(--kappe) 30%, #1b1d26),
    0 3px 0 8px rgba(0, 0, 0, 0.45);
  filter: brightness(1.12);
}
.pultknopf-wort .pixeltext {
  height: 9px;
}
.pultknopf:focus-visible {
  outline: none;
}
.pultknopf:focus-visible .pultknopf-kappe {
  outline: 3px solid #fff;
  outline-offset: 10px;
}
/* Am Flipper sind die Arme die grossen Knöpfe. */
.pult-flipper .pultknopf:not(.pult-b) .pultknopf-kappe {
  width: 72px;
  height: 72px;
}

/* Ein schmales Telefon: alles etwas kleiner, das Feld braucht die Höhe. */
@media (max-width: 380px), (max-height: 700px) and (max-aspect-ratio: 5/4) {
  .arcadepult {
    padding: 8px 14px 10px;
  }
  .pult-stick {
    width: 92px;
    height: 92px;
  }
  .stick-kugel {
    left: calc(50% - 22px);
    top: calc(50% - 22px);
    width: 44px;
    height: 44px;
  }
  .pultknopf-kappe {
    width: 54px;
    height: 54px;
  }
  .pult-knoepfe {
    gap: 12px;
  }
}

/* Quer und breit genug: die beiden Hälften über den unteren Ecken des Felds,
   jede auf einer eigenen kleinen Platte - die Ecken des Felds, nicht die des
   Schirms, denn das Brett ist höchstens 1100 px breit. */
@media (min-width: 640px) and (min-aspect-ratio: 5/4) {
  .arcadepult {
    position: absolute;
    right: max(18px, env(safe-area-inset-right), calc(50% - 540px));
    bottom: max(20px, env(safe-area-inset-bottom));
    left: max(18px, env(safe-area-inset-left), calc(50% - 540px));
    z-index: 3;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
    pointer-events: none;
  }
  .pult-stick,
  .pult-knoepfe {
    pointer-events: auto;
    opacity: 0.94;
  }
  /* Der Joystick auf einer runden Platte, die Knöpfe auf einer langen. */
  .pult-stick {
    margin: 10px;
    border-radius: 50%;
    box-shadow:
      0 0 0 10px color-mix(in srgb, var(--pult-farbe) 72%, transparent),
      0 4px 0 10px rgba(0, 0, 0, 0.3);
  }
  .pult-knoepfe {
    padding: 10px;
    border-radius: 22px;
    background: color-mix(in srgb, var(--pult-farbe) 72%, transparent);
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, 0.16),
      0 4px 0 rgba(0, 0, 0, 0.3);
  }
  .pult-flipper .pult-knoepfe {
    width: auto;
    padding: 0;
    background: none;
    box-shadow: none;
  }
  .pult-flipper .pultknopf {
    padding: 10px;
    border-radius: 22px;
    background: color-mix(in srgb, var(--pult-farbe) 72%, transparent);
  }
  .arcadepult.pult-flipper .pult-knoepfe {
    flex: 1;
    justify-content: space-between;
  }
}
/* Mit Maus und Tastatur ist das Pult kleiner - die Pfeile tun dasselbe. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .pult-stick {
    width: 88px;
    height: 88px;
  }
  .stick-kugel {
    left: calc(50% - 21px);
    top: calc(50% - 21px);
    width: 42px;
    height: 42px;
  }
  .pultknopf-kappe {
    width: 52px;
    height: 52px;
  }
  .pult-flipper .pultknopf:not(.pult-b) .pultknopf-kappe {
    width: 60px;
    height: 60px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .pultknopf-kappe {
    transition: transform 0.05s ease-out;
  }
  .stick-kugel,
  .stick-stange {
    transition: transform 0.04s linear, width 0.04s linear;
  }
}
/* (V351 Ende) */

/* ---------- V357: Zehner und Einer im Ruf des Bingos ----------------- */
/*
 * Ein Ruf im Raum «Zehner und Einer» zeigt neben seinem Text das Kärtchen,
 * wie auf den Kärtchen desselben Raums: Stangen und Würfel. Das Feld wird
 * so breit, wie zwei Stangen es brauchen.
 */
.bingo-bildfeld:has(.kaertchen) {
  width: auto;
  min-width: 52px;
}
.bingo-bildfeld .kaertchen .zehner {
  width: 9px;
  height: 40px;
}
.bingo-bildfeld .kaertchen .einerfeld {
  max-width: 44px;
}
.bingo-bildfeld .kaertchen .einer {
  width: 9px;
  height: 9px;
}

/* ======================================================================
   DER WEG DER RUNDE (V368), angeordnet am 20.10.2026: «mach das üben
   interaktiv und interessant für kinder und jugendliche». Beim Üben ist die
   Punktreihe ein Weg: Über dem Strich der Aufgabe, die dran ist, steht der
   Scampy, und mit jeder beantworteten schwimmt er ein Stück weiter, bis zur
   Flagge am Ende. Richtig und falsch bringen ihn gleich weit (R6, R9); die
   Striche behalten ihre Farben aus V92. Die Lage setzt aufgabe.js als
   Anteil (--weg), bewegt wird er nur bei prefers-reduced-motion:
   no-preference. In der geschlossenen Runde gibt es keinen Weg.
   ====================================================================== */
.dots.mit-weg {
  --weg: 0;
  --weg-figur: 30px;
  --weg-ziel: 34px;
  position: relative;
  /* Platz für den Scampy über den Strichen und für die Flagge am Ende. */
  padding-top: 24px;
  padding-right: var(--weg-ziel);
  margin-bottom: 14px;
}
.weg-scampi {
  position: absolute;
  top: 0;
  /* Die Mitte des Scampy über der Mitte seines Strichs; am Ziel bei der
     Flagge. */
  left: calc((100% - var(--weg-ziel)) * var(--weg) - var(--weg-figur) / 2);
  width: var(--weg-figur);
  height: var(--weg-figur);
  pointer-events: none;
  z-index: 1;
}
.dots.mit-weg.am-ziel .weg-scampi {
  left: calc(100% - var(--weg-ziel) - var(--weg-figur) + 4px);
}
.weg-figur {
  display: block;
  width: var(--weg-figur);
  height: var(--weg-figur);
}
.weg-figur svg {
  display: block;
  width: 100%;
  height: 100%;
}
.weg-ziel {
  position: absolute;
  right: 0;
  bottom: -6px;
  width: 30px;
  height: 30px;
  pointer-events: none;
}
.weg-ziel img {
  display: block;
  width: 30px;
  height: 30px;
}
/* Was der Scampy auf dem Weg sagt: eine kleine Blase neben ihm, auf der Höhe
   der Striche. Kein Grün und kein Ziegelrot - sie sagt, wo die Runde steht,
   nicht wie sie läuft. */
.weg-blase {
  position: absolute;
  top: 2px;
  left: calc(100% + 6px);
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--ink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(20, 30, 50, 0.18);
}
.weg-blase.links {
  left: auto;
  right: calc(100% + 6px);
}
.weg-blase[hidden] {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  /* Er schwimmt zur nächsten Aufgabe - und wiegt sich dabei ein wenig. */
  .weg-scampi {
    transition: left 0.75s cubic-bezier(0.45, 0, 0.25, 1);
  }
  .weg-figur {
    animation: weg-schweben 3.2s ease-in-out infinite;
  }
  .weg-scampi.schwimmt .weg-figur {
    animation: weg-schwimmen 0.75s ease-in-out 1;
  }
  .weg-blase:not([hidden]) {
    animation: weg-blase 2.4s ease-out both;
  }
  .dots.mit-weg.am-ziel .weg-ziel img {
    animation: weg-flagge 0.9s ease-in-out 0.6s 2;
    transform-origin: 20% 90%;
  }
}
@keyframes weg-schweben {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes weg-schwimmen {
  0% { transform: translateY(0) rotate(0); }
  30% { transform: translateY(-3px) rotate(-8deg); }
  70% { transform: translateY(-1px) rotate(4deg); }
  100% { transform: translateY(0) rotate(0); }
}
@keyframes weg-blase {
  0% { opacity: 0; transform: translateY(4px) scale(0.9); }
  12% { opacity: 1; transform: translateY(0) scale(1); }
  82% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes weg-flagge {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(-10deg); }
}
/* Breit und niedrig (V159) zählt jede Zeile: Der Scampy ist dort kleiner, und
   der Abstand über dem Weg geht an ihn. */
@media (min-width: 1024px) and (max-height: 860px) {
  :is(.b-runde, .b-check) .pad > .dots.mit-weg {
    --weg-figur: 26px;
    padding-top: 20px;
    margin-top: 2px;
  }
}
/* (V368 Ende) */

/* ======================================================================
   EIN ZIEL FÜR HEUTE, EBEN GESCHAFFT (V369), angeordnet am 20.10.2026:
   «mach das üben interaktiv und interessant für kinder und jugendliche».
   Hat eine Antwort oder das Ende einer Übung ein Ziel für heute erreicht
   (V269), steht es gleich da: das Bild des Ziels, sein Titel und der Satz,
   was noch bis zur Spielhalle fehlt. In den Farben der Ziele in der
   Lernwerkstatt - Kobalt für geschafft, nie Grün und nie Ziegelrot, denn mit
   einer Antwort hat es nichts zu tun (R6, R9).
   ====================================================================== */
.zielmeldung {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 14px 10px 10px;
  border: 1px solid rgba(42, 79, 215, 0.35);
  border-radius: 16px;
  background: #eef1fd;
  text-align: left;
}
.zielmeldung[hidden] {
  display: none;
}
.zielmeldung p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-soft);
}
.zielmeldung strong {
  display: block;
  font-size: 14.5px;
  line-height: 1.3;
  color: var(--ink);
}
.zielmeldung-bild {
  display: block;
  width: 40px;
  height: 40px;
}
.zielmeldung.alle {
  border-color: rgba(42, 79, 215, 0.6);
  box-shadow: 0 3px 0 rgba(42, 79, 215, 0.3);
}
/* Am Ende: unter dem Satz der Weg in die Spielhalle, über die ganze Breite. */
.ende-ziel {
  margin: 4px 0 14px;
}
.ende-ziel .ende-halle {
  grid-column: 1 / -1;
  margin-top: 4px;
}
.ende-ziel .ende-halle[hidden] {
  display: none;
}
.ende-halle img {
  margin-right: 8px;
  vertical-align: -5px;
}
@media (prefers-reduced-motion: no-preference) {
  .zielmeldung:not([hidden]) {
    animation: ziel-melden 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) both;
  }
  .zielmeldung:not([hidden]) .zielmeldung-bild {
    animation: ziel-bild 0.8s ease-in-out 0.35s 1;
  }
}
@keyframes ziel-melden {
  from { opacity: 0; transform: translateY(8px) scale(0.94); }
}
@keyframes ziel-bild {
  0%, 100% { transform: rotate(0) scale(1); }
  40% { transform: rotate(-10deg) scale(1.15); }
  70% { transform: rotate(6deg) scale(1.05); }
}
/* (V369 Ende) */

/* ======================================================================
   DIE KARTE WECHSELT, DAS URTEIL KOMMT (V370), angeordnet am 20.10.2026:
   «mach das üben interaktiv und interessant für kinder und jugendliche».
   Nach «Weiter» gleitet die beantwortete Lernkarte zur Seite, und die
   nächste kommt vom Stapel, wie beim Austeilen (runde.js setzt geht und
   kommt). Das Urteil springt auf, und sein Zeichen - Haken oder Kreuz -
   zeichnet sich in einem Zug: FÜR RICHTIG UND FALSCH DIESELBE BEWEGUNG,
   gleich lang und gleich gross (R6, R9, V74.7). Alles nur als Antwort auf
   eine Handlung und nur ohne den Wunsch nach weniger Bewegung; in der
   geschlossenen Runde wechselt die Karte still.
   ====================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .lernkarte.geht {
    animation: karte-geht 0.23s cubic-bezier(0.5, 0, 0.75, 0) both;
    pointer-events: none;
  }
  .lernkarte.kommt {
    animation: karte-kommt 0.36s cubic-bezier(0.2, 0.8, 0.3, 1) both;
  }
  .urteil:not([hidden]) {
    animation: urteil-springt 0.34s cubic-bezier(0.3, 1.5, 0.5, 1) both;
  }
  .urteil:not([hidden]) .was > svg path {
    stroke-dasharray: 32;
    animation: urteil-zeichnet 0.32s ease-out 0.12s both;
  }
  .urteil:not([hidden]) .was > svg {
    animation: urteil-zeichen 0.34s cubic-bezier(0.3, 1.6, 0.5, 1) both;
  }
}
@keyframes karte-geht {
  to {
    transform: translate(-36px, 6px) rotate(-4deg);
    opacity: 0;
  }
}
@keyframes karte-kommt {
  from {
    transform: translate(14px, 16px) rotate(2deg) scale(0.97);
    opacity: 0.3;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes urteil-springt {
  0% { transform: scale(0.9); opacity: 0; }
  60% { transform: scale(1.02); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes urteil-zeichnet {
  from { stroke-dashoffset: 32; }
  to { stroke-dashoffset: 0; }
}
@keyframes urteil-zeichen {
  0% { transform: scale(0.6) rotate(-20deg); }
  100% { transform: none; }
}
/* (V370 Ende) */

/* ======================================================================
   TASTENKÜRZEL BEIM WÄHLEN (V371), angeordnet am 20.10.2026: «mach das üben
   interaktiv und interessant für kinder und jugendliche». Mit Maus und
   Tastatur steht auf jeder Antwort zum Wählen klein ihre Ziffer - wer sie
   drückt, wählt sie, und Enter prüft (aufgabe.js, bindeZiffern). Auf dem
   Telefon und dem Tablet ohne Tastatur steht nichts davon. Für Vorlesehilfen
   still: Die Ziffer ist ein Schmuck des Stilblatts, kein Text.
   ====================================================================== */
@media (hover: hover) and (pointer: fine) {
  .wahl .btn[data-taste] {
    position: relative;
  }
  .wahl .btn[data-taste]::after {
    content: attr(data-taste);
    position: absolute;
    top: 6px;
    left: 8px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 1px solid var(--linie);
    border-radius: 5px;
    background: var(--flaeche);
    color: var(--ink-soft);
    font-family: "Bricolage Grotesque", sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
  }
  .wahl .btn.gewaehlt[data-taste]::after {
    border-color: rgba(255, 255, 255, 0.6);
    background: transparent;
    color: inherit;
  }
}
/* (V371 Ende) */

/* ======================================================================
   KOMPAKTER (V372), angeordnet am 20.10.2026: «mach alles etwas kompakter,
   so dass es weniger platz braucht. die aufgaben texte usw. müssen nicht so
   gross und fett sein». Gemessen bei 390, 1024 × 694 und 1280 px:
   - Der Aufgabentext steht kleiner und mittel statt fett (500 statt 700) -
     Bricolage ist eine variable Schrift und hat jede Stufe dazwischen. Die
     Schwellen in app/web/aufgabentext.py bleiben: Kleiner passt mit mehr
     Reserve.
   - Antwortfeld, Antworten zum Wählen, Sprechblasen, Bingo und die
     Lernkarte zum Umdrehen: kleiner und halbfett (600). Fett bleiben die
     Knöpfe, die handeln - Prüfen, Weiter, Tipp.
   - Weniger Luft um die Karte, im Rand der Seite, unter Überschriften und
     in Räumen, Zielen und Vorschlag.
   - Jedes Tippziel bleibt mindestens 44 px. Das Urteil bleibt für richtig
     und falsch gleich gross (R6, R9).
   Alles in diesem Abschnitt, in einem Zug umkehrbar wie V127, V137, V260.
   ====================================================================== */

/* Der Rand der Seite. */
.pad {
  padding: 14px 16px 22px;
}
.body:last-child .pad {
  padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .pad {
    padding: 20px 24px 30px;
  }
}
@media (min-width: 1024px) {
  .pad {
    padding: 24px 36px 44px;
  }
}

/* Überschriften: eine Stufe kleiner. */
h1.sub {
  font-size: 20px;
  margin-bottom: 3px;
}
h2.sub {
  font-size: 16px;
}
/* Die Überschrift einer Zwischenseite und am Ende eines Stapels ebenso. */
.zwischenkarte h1.sub {
  font-size: 21px;
}
.kartenende h1.sub {
  font-size: 21px;
  font-weight: 700;
}
@media (min-width: 1024px) {
  h1.sub {
    font-size: 25px;
    margin-bottom: 4px;
  }
  h2.sub {
    font-size: 18px;
  }
  .zwischenkarte h1.sub {
    font-size: 25px;
  }
}

/* DER AUFGABENTEXT: kleiner, und mittel statt fett - 500 statt 700. */
.expr {
  font-weight: 500;
  letter-spacing: -0.01em;
  font-size: 24px;
  line-height: 1.15;
  margin-bottom: 12px;
}
.expr.md {
  font-size: 21px;
  line-height: 1.2;
}
.expr.sm {
  font-size: 18.5px;
  line-height: 1.25;
}
.expr.xs {
  font-size: 17px;
  line-height: 1.3;
}
.lernkarte .expr {
  margin-bottom: 12px;
}
@media (min-width: 1024px) {
  .expr {
    font-size: 26px;
  }
  .expr.md {
    font-size: 22.5px;
  }
  .expr.sm {
    font-size: 20px;
  }
  .expr.xs {
    font-size: 18px;
  }
}

/* Das Antwortfeld und was man wählt. */
.answer {
  padding: 11px 14px;
  font-size: 22px;
  font-weight: 600;
}
.feld-zeile input {
  font-size: 18px;
  font-weight: 600;
}
/* Was man auf der Karte wählt, legt oder antippt, halbfett; die Knöpfe
   darunter - Prüfen, Tipp, Beispiel - bleiben fett, weil sie handeln. */
.lernkarte .btn,
.gespraech-blase,
.bingo-karte {
  font-weight: 600;
}
.lernkarte .knoepfe .btn {
  font-weight: 700;
}
.gespraech-blase {
  padding: 9px 13px;
  font-size: 16px;
}
.bingo-blase {
  min-height: 62px;
}
.bingo-ruftext {
  font-size: 19px;
  font-weight: 600;
}

/* DIE KARTE: weniger Luft innen und darunter. */
.lernkarte {
  margin-bottom: 12px;
  padding: 16px 15px 15px;
}
.lernkarte .knoepfe {
  margin-top: 14px;
}
@media (min-width: 1024px) {
  .lernkarte {
    padding: 26px 28px 24px;
    margin-bottom: 20px;
  }
  .lernkarte .wahl .btn {
    min-height: 50px;
    font-size: 15px;
  }
  .lernkarte .answer {
    font-size: 24px;
    padding: 14px 18px;
  }
  .lernkarte .knoepfe .btn {
    min-height: 46px;
    font-size: 15px;
  }
  .b-runde .dots,
  .b-check .dots {
    margin-bottom: 12px;
  }
}

/* Über der Karte: der Weg hinaus, die Pille und die Punkte rücken auf. */
.btn.steuer {
  margin-bottom: 12px;
}
:is(.b-runde, .b-check) .pad > .pill {
  margin-bottom: 12px;
}

/* DAS URTEIL: gleich deutlich, weniger hoch - für richtig und falsch
   dieselben Masse. */
.urteil {
  min-height: 60px;
  margin-top: 12px;
  padding: 10px 14px;
}
.urteil .was > svg {
  width: 34px;
  height: 34px;
}
.urteil strong {
  font-size: 21px;
}

/* DIE LERNKARTE ZUM UMDREHEN: kleiner und nicht mehr so fett. */
.karteikarte {
  min-height: 250px;
  padding: 40px 18px 22px;
}
.kartentisch {
  margin-bottom: 18px;
}
.karte-bild {
  font-size: 64px;
}
.karte-text {
  font-size: 25px;
  font-weight: 600;
}
.karte-text.kurz {
  font-size: 32px;
}
.karte-text.viel {
  font-size: 17.5px;
  font-weight: 600;
}
@media (min-width: 640px) {
  .karteikarte {
    min-height: 290px;
  }
}
@media (min-width: 1024px) {
  .karteikarte {
    min-height: 340px;
    padding: 46px 34px 30px;
  }
  .karte-bild {
    font-size: 84px;
  }
  .karte-text {
    font-size: 32px;
  }
  .karte-text.kurz {
    font-size: 44px;
  }
  .karte-text.viel {
    font-size: 20px;
  }
  .umdrehen,
  .selbsturteil-knoepfe .btn {
    min-height: 50px;
    font-size: 16px;
  }
}

/* Die Lernwerkstatt und das Fach: Vorschlag, Ziele und Räume enger. */
.next {
  padding: 14px 15px;
  margin-bottom: 12px;
}
.tagesziel {
  min-height: 54px;
  padding: 6px 10px 6px 6px;
}
.floorhead {
  padding: 12px 13px;
  margin-bottom: 12px;
}
.floorhead .fach,
.floorhead .lvl {
  font-size: 21px;
  font-weight: 700;
}
.room {
  min-height: 76px;
  padding: 10px 11px 10px;
}
@media (min-width: 1024px) {
  .next {
    padding: 22px 26px;
  }
  .b-fach .floorhead {
    padding: 18px 18px 16px;
  }
  .b-fach .floorhead .fach,
  .b-fach .floorhead .lvl {
    font-size: 25px;
  }
  .room {
    min-height: 100px;
    padding: 13px 14px 12px;
  }
}
/* (V372 Ende) */

/* ==========================================================================
 * DIE WEGE IM FACH ALS SYMBOLE (V373)
 *
 * Angeordnet am 20.10.2026: «auf mobile, lernkarten, zusatzübungen und
 * Prüfungsvorbereitung nur die icons und auf einer zeile». Unter 640 px
 * stehen die zwei oder drei Wege eines Fachs nebeneinander, gleich breit,
 * jeder nur mit seinem Bild. Name und Satz bleiben im Markup und sind der
 * Name des Wegs für eine Vorlesehilfe - versteckt wie ``.nur-vorlesen``,
 * nicht mit ``display: none``. Ab 640 px stehen sie wie bisher, mit Text.
 * Jede Kachel ist 56 px hoch, also über den 44 px eines Tippziels.
 * ========================================================================== */
@media (max-width: 639.98px) {
  .fachwege {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 8px;
    margin-bottom: 14px;
  }
  .fachwege > .kartenfachweg {
    position: relative;
    justify-content: center;
    gap: 0;
    min-height: 56px;
    padding: 6px;
  }
  .fachwege > .kartenfachweg::after {
    content: none;
  }
  .fachwege .kartenfachweg-bild {
    width: 40px;
    height: 40px;
  }
  .fachwege .kartenfachweg-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}
/* (V373 Ende) */

/* ==========================================================================
 * SCAMPY UNTERRICHT (V374)
 *
 * Angeordnet am 20.10.2026: «… implementiere diese in den korrekten kursen im
 * korrekten semester … als Scampy Unterricht». Im Fach steht der Weg dorthin
 * als erster in .fachwege; auf der eigenen Seite je Bereich von Stufen ein
 * ``details`` mit den Gruppen und ihren Lektionen. Die Lektion selbst ist eine
 * eigene Seite mit eigenem Stilblatt (app/web/unterricht.py) - hier steht nur
 * die Liste. Kein Schloss und keine Farbe für einen Zustand: Jede Lektion ist
 * offen, und keine zählt für etwas (R6).
 * ========================================================================== */
.unterrichtkopf {
  margin-top: 14px;
}
.unterrichtkopf-bild {
  flex: none;
  display: grid;
}
.unterrichtsabschnitt {
  margin: 0 0 12px;
  padding: 0;
  overflow: hidden;
}
.unterrichtsabschnitt > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-height: 52px;
  padding: 12px 44px 12px 16px;
  position: relative;
  cursor: pointer;
  list-style: none;
}
.unterrichtsabschnitt > summary::-webkit-details-marker {
  display: none;
}
.unterrichtsabschnitt > summary::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -7px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
}
.unterrichtsabschnitt[open] > summary::after {
  margin-top: -2px;
  transform: rotate(-135deg);
}
.unterrichtsabschnitt > summary:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: -3px;
}
.unterrichtsabschnitt-titel {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.unterricht-deine {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--sky-low);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
}
.unterrichtsabschnitt-zahl {
  font-size: 13.5px;
  color: var(--ink-soft);
}
.unterricht-gruppe {
  margin: 12px 16px 8px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}
.lektionen {
  list-style: none;
  margin: 0;
  padding: 0 12px 12px;
  display: grid;
  gap: 8px;
}
@media (min-width: 640px) {
  .lektionen {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}
.lektion {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  height: 100%;
  padding: 10px 12px;
  border: 1px solid var(--linie-stark);
  border-radius: var(--r-karte);
  background: var(--flaeche);
  color: var(--ink);
  text-decoration: none;
}
.lektion:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.lektionen > li:target > .lektion {
  border-color: var(--cobalt);
  box-shadow: 0 0 0 2px var(--cobalt);
}
@media (hover: hover) {
  .lektion:hover {
    border-color: var(--cobalt);
    box-shadow: var(--schatten);
  }
}
.lektion-bild {
  flex: none;
  display: grid;
  width: 56px;
  height: 56px;
}
.lektion-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lektion-text strong {
  font-size: 15px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.lektion-text small {
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-soft);
}
.unterricht-zaehlt {
  margin: 16px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}
/* (V374 Ende) */

/* ================================================================== */
/* Spalten aus Bild und PDF (V381)                                     */
/* ================================================================== */
/*
 * Angeordnet am 22.10.2026: «lese z.b. kolonnen so ein wie sie im scan, bild
 * oder dokument sind. dann kann man aussuchen, welche kolonne rückseite und
 * welche vorderseite ist.» Die Tabelle legt lernmaterial.js hin; sie scrollt
 * in ihrem Rahmen, nie die Seite. Die Vorderseite trägt einen Hauch Kobalt,
 * die Rückseite einen Hauch Sand - beides sagt nur, wohin eine Spalte kommt,
 * kein Urteil (R6, R9). Was weggelassen wird, ist blass.
 */
.lm-spalten {
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--linie, rgba(0, 0, 0, 0.08));
  background: var(--plaster-hi);
}
.lm-spalten .hinweis {
  margin: 0;
}
.lm-tabelle-rahmen {
  overflow: auto;
  max-height: 60vh;
  border-radius: 10px;
  border: 1px solid var(--linie, rgba(0, 0, 0, 0.08));
  background: var(--flaeche, #ffffff);
  overscroll-behavior: contain;
  /* (V386) Ohne das schob ein Auswahlfeld in der Tabelle die ganze Seite
     bei 390 px um 18 px zur Seite, obwohl der Rahmen scrollt. */
  contain: paint;
}
.lm-tabelle {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink);
}
.lm-tabelle th,
.lm-tabelle td {
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--linie, rgba(0, 0, 0, 0.08));
}
.lm-tabelle td {
  min-width: 5.5em;
  max-width: 16em;
  overflow-wrap: anywhere;
}
.lm-tabelle td[data-rolle="weg"] {
  min-width: 2.5em;
}
.lm-tabelle thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--flaeche, #ffffff);
}
.lm-tabelle thead label {
  display: grid;
  gap: 4px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-soft);
}
.lm-tabelle select {
  min-height: 44px;
  min-width: 5.5em;
  padding: 0 8px;
  border-radius: 10px;
  border: 2px solid var(--linie-stark, rgba(0, 0, 0, 0.18));
  background: var(--flaeche, #ffffff);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.lm-tabelle th[data-rolle="vorne"] select {
  border-color: var(--cobalt);
}
.lm-tabelle th[data-rolle="hinten"] select {
  border-color: #b8873a;
}
.lm-tabelle td[data-rolle="vorne"] {
  background: rgba(42, 79, 215, 0.07);
}
.lm-tabelle td[data-rolle="hinten"] {
  background: rgba(196, 150, 70, 0.12);
}
.lm-tabelle td[data-rolle="weg"] {
  color: var(--ink-soft);
  opacity: 0.5;
}
/*
 * (V386) Vor jeder Zeile: «Neu», «Dazu» oder «Weg». Eine Zeile mit «Dazu»
 * gehört zur Karte darüber - zwischen ihr und der Zeile darüber steht keine
 * Linie, und ein Pfeil zeigt hinauf. «Weg» ist blass.
 */
.lm-tabelle .lm-zeilen-spalte {
  width: 1%;
  padding: 4px 6px;
  white-space: nowrap;
  vertical-align: middle;
}
.lm-tabelle thead th.lm-zeilen-spalte {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-soft);
  vertical-align: bottom;
}
.lm-tabelle .lm-zeilen-spalte select {
  min-width: 4.6em;
}
.lm-tabelle td.lm-zeilen-spalte[data-zeile="dazu"] select {
  border-style: dashed;
}
.lm-tabelle tr.lm-aus td:not(.lm-zeilen-spalte) {
  opacity: 0.35;
}
.lm-tabelle tr:has(+ tr.lm-dazu) td {
  border-bottom-color: transparent;
}
.lm-tabelle tr.lm-dazu td:nth-child(2)::before {
  content: "↳ ";
  color: var(--ink-soft);
}
.lm-unsicher {
  text-decoration: underline dotted;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--ink-soft);
  text-underline-offset: 4px;
}
.lm-spalten-zahl {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.lm-spalten-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.lm-spalten-knoepfe .btn {
  gap: 8px;
}
/* (V381 Ende) */

/* ==========================================================================
   (V383) AUS SCAMPY INS LERNMATERIAL, UND DAS LERNMATERIAL IN DIE
   PRÜFUNGSVORBEREITUNG. Angeordnet am 23.10.2026: «bei den eigenen
   lernmaterialien soll man von den übungen, tests und karten aus allen (wo
   man berechtigt ist) auch aussuchen können. diese lernmaterialien kann man
   dann auch für prüfungsvorbereitungen nutzen.» Die Auswahl nimmt die
   Bausteine der Prüfungsvorbereitung (V317) und steht nebeneinander wie dort
   (V338); hier steht nur, was neu ist. Kein Grün und kein Ziegelrot (R6, R9).
   ========================================================================== */

/* Eine Sammlung braucht beim Anlegen nur einen Satz. */
.lm-neu-form .lm-teil-sammlung {
  display: none;
}
.lm-neu-form:has(input[value="sammlung"]:checked) .lm-teil-sammlung {
  display: grid;
}

.sm-einleitung {
  margin: 4px 0 14px;
}

/* Woraus wählst du? Ein Weg je Fach oder Kurs, mit seinem Bild. */
.sm-bereiche {
  display: grid;
  gap: 12px;
}
.sm-bereichsliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 8px;
}
.sm-bereich {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 12px;
  border-radius: 14px;
  border: 1.5px solid var(--linie, rgba(0, 0, 0, 0.12));
  background: #fff;
  color: var(--ink);
  text-decoration: none;
}
.sm-bereich:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
@media (hover: hover) {
  .sm-bereich:hover {
    border-color: var(--cobalt);
  }
}
.sm-bereich-text {
  display: grid;
  min-width: 0;
}
.sm-bereich-text b {
  overflow-wrap: anywhere;
}
.sm-bereich-text small {
  color: var(--ink-soft);
  font-size: 13px;
}

/* Fach oder Kurs zuerst in der Suche, dann Wort und Filter. */
.sm-bereichswahl {
  flex: 1 1 100%;
}
@media (min-width: 640px) {
  .sm-bereichswahl {
    flex: 0 1 240px;
  }
}

/* Auf der Seite eines Materials: je Fach oder Kurs ein Block. */
.sm-teil {
  scroll-margin-top: 80px;
}
.sm-teil > .vorbereitung-teilkopf {
  margin-bottom: 8px;
}
.sm-block {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.sm-block-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 18px;
  overflow-wrap: anywhere;
}
.sm-art {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
}
.sm-block .vorbereitung-liste {
  margin: 0;
}
.sm-mehr {
  justify-self: start;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.sm-leer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.sm-leer p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.45;
}
.sm-leer .btn,
.sm-vb-form .btn {
  gap: 8px;
}

/* In welchen Prüfungsvorbereitungen es liegt, und wohin es noch kann. */
.sm-vorbereitung {
  display: grid;
  gap: 12px;
}
.sm-vorbereitung .vorbereitung-liste {
  margin: 0;
}
.sm-vb-name {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sm-vorbereitung .vorbereitung-knoepfe form {
  display: contents;
}
.sm-vb-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sm-vb-form label {
  flex: 1 1 200px;
  display: flex;
}
.sm-vb-form select {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--linie, rgba(0, 0, 0, 0.18));
  background: #fff;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
}
/* (V383 Ende) */

/* =====================================================================
 * DINO PINBALL (V391): der zweite Flipper, in der Urzeit.
 *
 * Er spielt auf dem Spielwerk von Nova Pinball, also gilt hier alles, was
 * dort für ``.brett-chuegeli`` steht; anders sind nur die Farben des
 * Automaten, des Schirms, der Meldungen und das Startbild. Ocker und
 * dunkles Braun am Gehäuse, Lava in Orange und Knochen als Knöpfe - kein
 * Grün und kein Ziegelrot, die beide das Urteil sind (R6, R9).
 *
 * BEWEGUNG nur unter ``prefers-reduced-motion: no-preference`` - das
 * Startbild bewegt sich wie das von Nova.
 * ===================================================================== */
[data-aussehen="dinoeli"] {
  --automat-gehaeuse: #8a5a2b;
  --automat-gehaeuse-tief: #5e3b1a;
  --automat-glanz: rgba(255, 240, 210, 0.16);
  --automat-leuchte: #ffe6b8;
  --automat-schrift: #3a1f0b;
  --automat-rahmen: #2a160a;
  --automat-schirm: #1c1009;
  --automat-schirmbild: #ffb547;
  --automat-schirmglanz: rgba(255, 255, 255, 0.08);
  --automat-streifen: #f1e4c8;
  --automat-pult: #6e4521;
  --automat-knopf-a: #ff8a2a;
  --automat-knopf-b: #f1e4c8;
  --automat-licht: rgba(255, 255, 255, 0.6);
  --automat-tuer: #633e1d;
  --automat-schlitz: #ffd59a;
  --automat-schloss: #ffd59a;
  --automat-schatten: rgba(42, 22, 10, 0.24);
}
.schirm[data-aussehen="dinoeli"] {
  --schirm-text: #fbf3e4;
  --schirm-zart: #ffc773;
  --schirm-leise: #efe2c9;
  --schirm-schein: rgba(255, 138, 42, 0.14);
}
.brett-chuegeli[data-welt="urzeit"] .flipper-meldung {
  box-shadow:
    0 0 0 2px #3a2a12,
    0 0 22px rgba(255, 138, 42, 0.45);
}

/* Das Startbild: ein Stück Tisch in der Abenddämmerung, hinter allem ein
   Vulkan, aus dessen Krater es glüht. */
.titel-urzeit .titel-flipperbild {
  background:
    radial-gradient(circle at 50% 110%, rgba(255, 138, 42, 0.5), transparent 55%),
    linear-gradient(#ffcf8a, #f08c3c 30%, #5b3a5e 70%, #20142a);
  box-shadow:
    0 0 0 3px #f1e4c8,
    0 0 18px rgba(255, 138, 42, 0.55);
}
.titel-urzeitvulkan {
  position: absolute;
  left: 50%;
  top: 0;
  width: calc(3.2 * var(--s));
  height: calc(1.5 * var(--s));
  background:
    radial-gradient(ellipse at 50% 6%, #ffd36b 0 10%, rgba(255, 138, 42, 0.8) 18%, transparent 32%),
    linear-gradient(#4a2c1a, #1c0f08);
  clip-path: polygon(0 100%, 40% 6%, 60% 6%, 100% 100%);
  transform: translateX(-50%);
  opacity: 0.9;
}
.titel-urzeit .titel-flipperpilz {
  border-color: #f1e4c8;
  background:
    radial-gradient(circle, #ffb547 0 18%, transparent 19%),
    repeating-conic-gradient(#d9b47a 0 12deg, #b98a4e 12deg 24deg);
}
.titel-urzeit .titel-flipperarm {
  background: #fbf3e4;
  box-shadow:
    0 0 0 2px #2a160a,
    inset 0 0 0 2px #ff8a2a;
}
@media (prefers-reduced-motion: no-preference) {
  /* Der Krater glüht auf und wird wieder dunkler, wie ein Vulkan, der atmet. */
  .titel-urzeitvulkan {
    animation: titel-urzeitvulkan 2.4s ease-in-out infinite alternate;
  }
}
@keyframes titel-urzeitvulkan {
  to {
    filter: brightness(1.25);
  }
}
/* (V391 Ende) */

/* =====================================================================
 * V395 - WANDER OFF (Schlüssel «tierli»): ein Logik-Puzzle, ruhig und weich.
 *
 * DAS AUSSEHEN DES AUTOMATEN: ein Gehäuse in Pfirsich mit Himmelblau, und auf
 * dem Schirm ein Hasengesicht. Kein Grün und kein Ziegelrot (R6, R9).
 *
 * DAS BRETT: ein Gitter aus weichen Kacheln in den Farben seiner Welt - Wiese,
 * Strand, Schnee, Nacht -, darauf die Tiere, jedes in seine Richtung gedreht
 * (`rotate`, damit eine Bewegung, die `transform` setzt, die Drehung nicht
 * schluckt). Ein Tier und eine Spur stehen über ihre Marken am Platz:
 * `--z` die Zeile, `--s` die Spalte, `--n` die Seite des Bretts.
 *
 * DIE VORSCHAU: Pfötchen in Creme bis zum Rand, ein gestrichelter Ring um das
 * Tier, an das eines stossen würde, ein Bogen über dem, das der Hase
 * überspringt, und Pfeile um die, die der Scampy dreht - hell, nie rot.
 *
 * DER HINWEIS: ein weicher Schein in Gold um das Tier, das gerade frei ist.
 * Bewegt nur ohne den Wunsch nach weniger Bewegung, und auf einem ruhigen
 * Brett gar nicht (`.ruhig`, gesetzt vom Skript).
 * ===================================================================== */
[data-aussehen="tierli"] {
  --automat-gehaeuse: #f2a97e;
  --automat-gehaeuse-tief: #d98a5f;
  --automat-glanz: rgba(255, 255, 255, 0.2);
  --automat-leuchte: #fff6ea;
  --automat-schrift: #5b3a6e;
  --automat-rahmen: #3b2a4d;
  --automat-schirm: #1e1a33;
  --automat-schirmbild: #ffd9a8;
  --automat-schirmglanz: rgba(255, 255, 255, 0.07);
  --automat-streifen: #7cc6e6;
  --automat-pult: #f6bd98;
  --automat-knopf-a: #7cc6e6;
  --automat-knopf-b: #fff1d6;
  --automat-licht: rgba(255, 255, 255, 0.6);
  --automat-tuer: #e59b70;
  --automat-schlitz: #fff1d6;
  --automat-schloss: #fff1d6;
  --automat-schatten: rgba(59, 42, 77, 0.28);
}
.schirm[data-aussehen="tierli"] {
  --schirm-text: #fff8f0;
  --schirm-zart: #ffd9a8;
  --schirm-leise: #e9e2f2;
  --schirm-schein: rgba(255, 217, 168, 0.12);
}

/* ---------- Der Tisch ----------------------------------------------------- */
.brett-tierli {
  /* Der Schirm hält 16 px Rand; das Brett nimmt davon 15 px zurück, damit acht
   * Felder auch auf einem Telefon von 360 px Breite je 44 px gross sind. */
  width: calc(100% + 30px);
  margin-inline: -15px;
  display: grid;
  place-items: center;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.tierli-tisch {
  /* Die Seite des Bretts: so gross, wie das Fenster es zulässt - bei acht
   * Feldern auf einem Telefon von 360 px Breite 44 px je Feld. */
  --seite: min(100vw - 2px, 100dvh - 356px, 560px);
  display: grid;
  justify-items: center;
  gap: clamp(8px, 1.8vh, 16px);
}
.tierli-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: var(--seite);
  min-height: 28px;
}
.tierli-herzen {
  display: flex;
  gap: 5px;
}
.tierli-herz {
  display: block;
  width: 24px;
  height: 22px;
  color: var(--schirm-leise);
}
.tierli-herz svg {
  display: block;
  width: 100%;
  height: 100%;
}
.tierli-welt {
  color: var(--schirm-zart);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: right;
}

/* ---------- Der Rahmen und der Boden je Welt ------------------------------ */
.tierli-rahmen {
  --kachel-a: #b5dc8e;
  --kachel-b: #a6d27f;
  --rand: #b9824c;
  --rand-tief: #8a5a2f;
  position: relative;
  width: var(--seite);
  height: var(--seite);
  padding: 3px;
  box-sizing: border-box;
  border-radius: 16px;
  background: var(--rand);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.28),
    0 5px 0 var(--rand-tief),
    0 10px 24px rgba(0, 0, 0, 0.35);
}
.tierli-rahmen[data-welt="strand"] {
  --kachel-a: #f6e3b4;
  --kachel-b: #efd7a0;
  --rand: #57b3c6;
  --rand-tief: #2f7f93;
}
.tierli-rahmen[data-welt="schnee"] {
  --kachel-a: #f3f7fd;
  --kachel-b: #e2ebf7;
  --rand: #9fb6d6;
  --rand-tief: #6c84a8;
}
.tierli-rahmen[data-welt="nacht"] {
  --kachel-a: #343d78;
  --kachel-b: #2c3469;
  --rand: #1c2048;
  --rand-tief: #0f1230;
}
.tierli-feld {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 13px;
  isolation: isolate;
  -webkit-touch-callout: none;
}
.tierli-boden {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  grid-template-rows: repeat(var(--n), 1fr);
  background: var(--kachel-a);
}
.tierli-boden > span {
  background: var(--kachel-a);
}
.tierli-boden > span.anders {
  background: var(--kachel-b);
}
/* Wiese: ein Hauch Gras auf jeder Kachel. */
.tierli-rahmen[data-welt="wiese"] .tierli-boden > span {
  background-image: radial-gradient(
    circle at 30% 72%,
    rgba(255, 255, 255, 0.22) 0 6%,
    transparent 7%
  );
}
/* Strand: ein paar Sandkörner. */
.tierli-rahmen[data-welt="strand"] .tierli-boden > span {
  background-image:
    radial-gradient(circle at 24% 30%, rgba(176, 134, 70, 0.22) 0 3%, transparent 4%),
    radial-gradient(circle at 70% 64%, rgba(176, 134, 70, 0.18) 0 2.5%, transparent 3.5%);
}
/* Schnee: ein Glitzern. */
.tierli-rahmen[data-welt="schnee"] .tierli-boden > span {
  background-image: radial-gradient(circle at 68% 28%, rgba(255, 255, 255, 0.95) 0 4%, transparent 5%);
}
/* Nacht: kleine Sterne. */
.tierli-rahmen[data-welt="nacht"] .tierli-boden > span {
  background-image:
    radial-gradient(circle at 22% 26%, rgba(255, 244, 196, 0.75) 0 2.5%, transparent 3.5%),
    radial-gradient(circle at 74% 70%, rgba(255, 244, 196, 0.5) 0 2%, transparent 3%);
}

/* ---------- Ein Platz auf dem Brett --------------------------------------- */
.tierli-platz {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% / var(--n));
  height: calc(100% / var(--n));
  transform: translate(calc(var(--s) * 100%), calc(var(--z) * 100%));
}
.tierli-spur {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.tierli-spur > .tierli-platz {
  width: calc(100% / var(--n));
  height: calc(100% / var(--n));
}

/* ---------- Die Tiere ----------------------------------------------------- */
.tierli-tier {
  z-index: 2;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 22%;
  background: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.tierli-tier:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
}
/* Im Schnee und in der Nacht ein Kissen unter jedem Tier: ein weisser Fuchs
 * auf Schnee und eine dunkle Katze in der Nacht sähe man sonst kaum. */
.tierli-rahmen[data-welt="schnee"] .tierli-tier::before,
.tierli-rahmen[data-welt="nacht"] .tierli-tier::before {
  content: "";
  position: absolute;
  inset: 7%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(126, 150, 196, 0.3), rgba(126, 150, 196, 0.08) 72%);
}
.tierli-rahmen[data-welt="nacht"] .tierli-tier::before {
  background: radial-gradient(circle at 50% 45%, rgba(255, 244, 214, 0.42), rgba(255, 244, 214, 0.1) 72%);
}
.tierli-rahmen[data-welt="schnee"] .tierli-tier:focus-visible {
  outline-color: #3b2a4d;
}
.tierli-tier:disabled {
  cursor: default;
}
.tierli-tier.geht {
  z-index: 4;
  pointer-events: none;
}
.tierli-figur {
  display: grid;
  place-items: center;
  width: 88%;
  height: 88%;
  rotate: var(--grad, 0deg);
  pointer-events: none;
}
.tierli-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Der Scampy sitzt auf einem Polster und dreht sich nicht mit. */
.tierli-scampy {
  position: relative;
  rotate: none;
}
.tierli-polster {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 34%, #fff8ff, #e6d9f6 62%, #cbb8ea);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.7),
    0 3px 0 rgba(91, 58, 110, 0.35);
}
.tierli-scampy > svg {
  position: relative;
  width: 80%;
  height: 80%;
}

/* Der Hinweis: ein Schein in Gold, der atmet. */
.tierli-tier.hinweis::after {
  content: "";
  position: absolute;
  inset: 4%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 222, 120, 0.85), rgba(255, 210, 90, 0) 70%);
  box-shadow: 0 0 0 3px rgba(255, 226, 140, 0.95);
}

/* ---------- Die Vorschau -------------------------------------------------- */
.tierli-tapse {
  z-index: 1;
  display: grid;
  place-items: center;
  color: rgba(255, 248, 232, 0.92);
}
.tierli-rahmen[data-welt="schnee"] .tierli-tapse {
  color: rgba(91, 112, 150, 0.7);
}
.tierli-rahmen[data-welt="strand"] .tierli-tapse {
  color: rgba(150, 108, 52, 0.55);
}
.tierli-tapse .tierli-svg {
  width: 44%;
  height: 44%;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.18));
}
.tierli-tapse.schritt .tierli-svg {
  width: 56%;
  height: 56%;
}
.tierli-hupf {
  z-index: 3;
}
.tierli-hupf::before {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: -6%;
  height: 46%;
  border: 3px dashed #fff8e8;
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
}
.tierli-prall {
  z-index: 3;
}
.tierli-prall::before {
  content: "";
  position: absolute;
  inset: 6%;
  border: 3px dashed #fff8e8;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(59, 42, 77, 0.45);
}
.tierli-dreht {
  z-index: 3;
  display: grid;
  place-items: center;
  color: #fff;
}
.tierli-dreht .tierli-svg {
  width: 58%;
  height: 58%;
  filter: drop-shadow(0 0 1.5px #3b2a4d) drop-shadow(0 1px 1px rgba(59, 42, 77, 0.6));
}

/* ---------- Perfekt ------------------------------------------------------- */
.tierli-perfekt {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  margin: 0;
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(30, 26, 51, 0.82);
  box-shadow: 0 0 0 3px #ffd9a8;
  color: #ffe9a6;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.tierli-perfekt[hidden] {
  display: none;
}
.tierli-perfekt .pixeltext {
  display: block;
  height: 22px;
  width: auto;
}

/* ---------- Die Knöpfe unter dem Brett ------------------------------------ */
.tierli-leiste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 16px);
}
.tierli-knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 2px solid var(--schirm-zart);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--schirm-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.tierli-knopf b {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 999px;
  background: #ffd9a8;
  color: #3b2a4d;
  font-size: 14px;
}
.tierli-knopf:disabled {
  opacity: 0.4;
  cursor: default;
}
.tierli-knopf:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* Ein Telefon, das nicht hoch ist: Herzen und Level stehen schon in der
 * Anzeige darüber, also geht der Kopf, und das Brett bekommt seinen Platz. */
@media (max-height: 820px) {
  .tierli-kopf {
    display: none;
  }
  .tierli-tisch {
    --seite: min(100vw - 2px, 100dvh - 310px, 560px);
  }
}
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .tierli-tisch {
    --seite: min(62vw, 100dvh - 290px, 600px);
  }
}
@media (min-width: 900px) and (min-aspect-ratio: 5/4) and (max-height: 820px) {
  .tierli-tisch {
    --seite: min(62vw, 100dvh - 250px, 600px);
  }
}
/* Breit und niedrig (V159), ein Telefon quer: die Knöpfe links neben dem
 * Brett, untereinander, über dem Joystick. */
@media (max-height: 560px) {
  .tierli-tisch {
    --seite: min(100dvh - 124px, 100vw - 360px, 420px);
    grid-template-columns: auto auto;
    grid-template-areas: "leiste rahmen";
    align-items: start;
    gap: 12px;
  }
  .tierli-rahmen {
    grid-area: rahmen;
  }
  .tierli-leiste {
    grid-area: leiste;
    flex-direction: column;
    align-items: stretch;
    width: auto;
  }
  .tierli-knopf {
    justify-content: center;
    padding: 0 14px;
  }
}
/* Ein Telefon quer (V399): Die Höhe ist das Mass des Bretts, also steht
 * darüber nichts. Die Anzeige geht in die linke Spalte über den Joystick, die
 * Knöpfe Hinweis, Zurück und Von vorn in die rechte unter die Knöpfe des
 * Schirms und über die des Pults, und das Brett steht dazwischen, so hoch wie
 * das Fenster. Bis dahin standen Knöpfe und Anzeige darüber, und ein Feld war
 * auf 844 × 390 gut 32 px gross, auf 667 × 375 deckte «Los» eine Ecke zu. */
@media (max-height: 560px) and (min-width: 640px) and (min-aspect-ratio: 5/4) {
  .schirm[data-aussehen="tierli"] .schirm-glas:has(> .ansicht-spiel:not([hidden])) > .schirm-leiste {
    position: absolute;
    top: env(safe-area-inset-top);
    right: env(safe-area-inset-right);
  }
  .schirm[data-aussehen="tierli"] .ansicht-spiel {
    --links: calc(max(18px, env(safe-area-inset-left)) + 138px);
    --rechts: calc(max(18px, env(safe-area-inset-right)) + 176px);
    padding: 0;
  }
  .schirm[data-aussehen="tierli"] .hud {
    position: absolute;
    top: 10px;
    left: max(18px, env(safe-area-inset-left));
    flex-direction: column;
    gap: 6px;
    width: 128px;
  }
  .schirm[data-aussehen="tierli"] .hud-feld {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    padding: 6px 10px;
  }
  .schirm[data-aussehen="tierli"] .hud-name .pixeltext {
    height: 8px;
  }
  .schirm[data-aussehen="tierli"] .hud-wert .pixeltext {
    height: 17px;
  }
  .tierli-tisch {
    --seite: min(
      100dvh - 2px - env(safe-area-inset-top) - env(safe-area-inset-bottom),
      100vw - var(--links) - var(--rechts) - 16px,
      560px
    );
    display: block;
  }
  .tierli-rahmen {
    left: calc((var(--links) - var(--rechts)) / 2);
  }
  .tierli-leiste {
    position: absolute;
    top: 62px;
    right: max(18px, env(safe-area-inset-right));
    z-index: 3;
    width: 164px;
  }
}

/* ---------- Das Startbild ------------------------------------------------- */
.tierli-titelbrett {
  --feld: clamp(44px, 12vw, 64px);
  display: grid;
  grid-template-columns: repeat(3, var(--feld));
  grid-auto-rows: var(--feld);
  gap: 6px;
  padding: 8px;
  border-radius: 16px;
  background: #b9824c;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.28);
}
.tierli-titeltier {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #b5dc8e;
}
.tierli-titeltier:nth-child(2n) {
  background: #a6d27f;
}
.tierli-titeltier .tierli-svg {
  width: 86%;
  height: 86%;
  rotate: var(--grad, 0deg);
}
.tierli-titeltier.art-scampy .tierli-polster {
  inset: 8%;
}
.tierli-titeltier.art-scampy > svg {
  position: relative;
  width: 74%;
  height: 74%;
}

@media (prefers-reduced-motion: no-preference) {
  .tierli-rahmen:not(.ruhig) .tierli-tier {
    transition: transform 0.24s cubic-bezier(0.3, 1.3, 0.5, 1);
  }
  .tierli-rahmen:not(.ruhig) .tierli-figur {
    transition: rotate 0.36s cubic-bezier(0.3, 1.25, 0.5, 1);
  }
  .tierli-rahmen:not(.ruhig) .tierli-tier:active:not(:disabled) .tierli-figur {
    scale: 0.92;
  }
  .tierli-rahmen:not(.ruhig) .tierli-figur.wackelt {
    animation: tierli-wackelt 0.42s ease-in-out;
  }
  .tierli-rahmen:not(.ruhig) .tierli-figur.wirbelt {
    animation: tierli-wirbelt 0.55s ease-in-out;
  }
  .tierli-rahmen:not(.ruhig) .tierli-tier.hinweis::after {
    animation: tierli-schein 1.4s ease-in-out infinite;
  }
  .tierli-rahmen:not(.ruhig) .tierli-tapse {
    animation: tierli-tapst 0.3s ease-out both;
  }
  /* Die Pfötchen kommen eines nach dem anderen, wie ein Weg. */
  .tierli-rahmen:not(.ruhig) .tierli-tapse:nth-child(2) {
    animation-delay: 45ms;
  }
  .tierli-rahmen:not(.ruhig) .tierli-tapse:nth-child(3) {
    animation-delay: 90ms;
  }
  .tierli-rahmen:not(.ruhig) .tierli-tapse:nth-child(4) {
    animation-delay: 135ms;
  }
  .tierli-rahmen:not(.ruhig) .tierli-tapse:nth-child(5) {
    animation-delay: 180ms;
  }
  .tierli-rahmen:not(.ruhig) .tierli-tapse:nth-child(n + 6) {
    animation-delay: 225ms;
  }
  .tierli-rahmen:not(.ruhig) .tierli-dreht .tierli-svg {
    animation: tierli-kreist 2.4s linear infinite;
  }
  .tierli-rahmen:not(.ruhig) .tierli-perfekt.zeigt {
    animation: tierli-perfekt 0.6s cubic-bezier(0.3, 1.4, 0.5, 1);
  }
  .tierli-titeltier.hopst .tierli-svg,
  .tierli-titeltier.hopst > svg {
    animation: tierli-hopst 0.7s ease-out;
  }
}
@keyframes tierli-wackelt {
  0%,
  100% {
    transform: none;
  }
  25% {
    transform: translateX(-7%) rotate(-6deg);
  }
  50% {
    transform: translateX(6%) rotate(5deg);
  }
  75% {
    transform: translateX(-3%) rotate(-2deg);
  }
}
@keyframes tierli-wirbelt {
  0% {
    transform: none;
  }
  50% {
    transform: rotate(200deg) scale(1.12);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes tierli-schein {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.94);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}
@keyframes tierli-tapst {
  from {
    opacity: 0;
    transform: translate(calc(var(--s) * 100%), calc(var(--z) * 100%)) scale(0.6);
  }
  to {
    opacity: 1;
    transform: translate(calc(var(--s) * 100%), calc(var(--z) * 100%));
  }
}
@keyframes tierli-kreist {
  to {
    transform: rotate(360deg);
  }
}
@keyframes tierli-perfekt {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}
@keyframes tierli-hopst {
  0%,
  100% {
    transform: none;
  }
  40% {
    transform: translateY(-14%) scale(1.05);
  }
  70% {
    transform: translateY(2%) scale(0.98);
  }
}
/* (V395 Ende) */

/* ==========================================================================
 * V400 - WANDER OFF: GROSSE TIERE. Dackel und Schlange liegen zwei und drei
 * Felder lang, der Elefant zwei mal zwei. Ein Tier steht in seinem Rechteck
 * (--w, --h in Feldern); die Figur eines grossen ist zur Blickrichtung oben
 * gezeichnet und dreht sich in ihr Rechteck hinein (--fw, --fh). Für die
 * Tiere auf einem Feld ändert sich nichts: --w und --h sind dort 1.
 * ========================================================================== */
.tierli-platz {
  width: calc(100% / var(--n) * var(--w, 1));
  height: calc(100% / var(--n) * var(--h, 1));
  transform: translate(calc(var(--s) * 100% / var(--w, 1)), calc(var(--z) * 100% / var(--h, 1)));
}
.tierli-tier.gross {
  border-radius: 16% / 16%;
}
.tierli-figur.gross {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--fw, 94%);
  height: var(--fh, 94%);
  translate: -50% -50%;
}
.tierli-rahmen[data-welt="schnee"] .tierli-tier.gross::before,
.tierli-rahmen[data-welt="nacht"] .tierli-tier.gross::before {
  inset: 5%;
  border-radius: 28% / 28%;
}
.tierli-tier.gross.hinweis::after {
  inset: 3%;
  border-radius: 28% / 28%;
}
/* (V400 Ende) */

/* ==========================================================================
   V401 - Ab dem höchsten Level beginnen
   «man soll dann immer wählen können zwischen neuem spiel oder bei dem level
   beginnen wo man den höchsten erreicht hat»: Unter START, das dann «Neues
   Spiel» heisst, steht ein zweiter Knopf mit dem höchsten Level auf diesem
   Gerät. Beide gelb und gleich hoch - keiner ist die richtige Wahl.
   ========================================================================== */
.titel-start {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 18px;
}
.titel-start [data-ablevel] {
  min-height: 54px;
}
/* Tower Swap trägt seit V401 bis sieben Scheiben; die siebte in Schieferblau. */
.tuermli-scheibe[data-groesse="6"] {
  --farbe: #5a6fa8;
}
/* (V401 Ende) */

/* ===================================================================
   V402 - Die ganze Kiste nimmt die Karte an.
   Ist eine Karte gewählt, ist jede Kiste ein Ziel, nicht nur ihr Name.
   =================================================================== */
.kistenbrett:has(.karte-knopf.wartet):not(:has(.grosswahl)) .kiste {
  cursor: pointer;
}

/* ===================================================================
   V403 - Die Strömung am Rand eines Riffs (Reef Runner).
   Hell wie Wasser, das fliesst, mit Wellen, die zum Rand hinausziehen.
   Ein Scampy, der über den Rand getragen wird, ist ausserhalb des Riffs
   nicht zu sehen. Kein Grün und kein Ziegelrot (R6, R9).
   =================================================================== */
.riff {
  overflow: hidden;
}
.riff-feld.stroemung {
  background:
    repeating-linear-gradient(
      90deg,
      rgba(200, 245, 255, 0.5) 0 2px,
      transparent 2px 7px
    ),
    linear-gradient(#2a86c0, #1a6aa3);
  background-size: 7px 100%, 100% 100%;
}
.riff-feld.stroemung::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 34%;
  height: 34%;
  border: solid #e9fbff;
  border-width: 0 0 2px 2px;
  opacity: 0.85;
}
.riff-feld.stroemung[data-seite="links"]::after {
  left: 28%;
  transform: translateY(-50%) rotate(45deg);
}
.riff-feld.stroemung[data-seite="rechts"]::after {
  right: 28%;
  transform: translateY(-50%) rotate(-135deg);
}
@media (prefers-reduced-motion: no-preference) {
  .riff-feld.stroemung[data-seite="links"] {
    animation: stroemung-links 1.4s linear infinite;
  }
  .riff-feld.stroemung[data-seite="rechts"] {
    animation: stroemung-rechts 1.4s linear infinite;
  }
}
@keyframes stroemung-links {
  to {
    background-position: -7px 0, 0 0;
  }
}
@keyframes stroemung-rechts {
  to {
    background-position: 7px 0, 0 0;
  }
}

/* =====================================================================
 * GRUPPEN, AUFGABEN UND KALENDER (V404), angeordnet am 29.10.2026: «neu gibt
 * es für lehrer, eltern usw die möglichkeit ein abo abzuschliessen … hat man
 * ein abo, kann man gruppen erstellen.» Ein Abschnitt für sich, wie V127.
 *
 * DER STAND EINER AUFGABE URTEILT NICHT (R6, R9): kein Grün und kein
 * Ziegelrot, die das Urteil einer Antwort sind. Nicht angefangen ist eine
 * Linie, in Arbeit Kobalt hell, erledigt Tinte mit Haken, überfällig ein
 * warmer Ocker, gestrichelt - eine Frist, kein Vorwurf. Jeder Stand trägt
 * sein Wort; die Farbe ist nie das einzige Zeichen.
 *
 * Jedes Tippziel mindestens 44 px (docs/03 Abschnitt 6), auch die kleinen
 * Knöpfe.
 * ===================================================================== */
:root {
  --stand-ueberfaellig: #fbe8cf;
  --stand-ueberfaellig-tief: #8a4b10;
  --stand-arbeit: #dfe6fb;
}
.grp {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.grp .btn.klein {
  min-height: 44px;
  padding: 8px 12px;
  font-size: 14.5px;
}
.grp-kopf {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 16px;
  align-items: center;
}
.grp-kopf-text {
  min-width: 0;
}
.grp-kopf-text h1,
.grp-kopf-text p {
  margin: 0;
  overflow-wrap: anywhere;
}
.grp-kopf-text p {
  margin-top: 4px;
  color: var(--ink-soft);
}
.grp-kopf-wege {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.grp-teil {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.grp-teil > h2,
.grp-teil > .sub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.grp-ruht {
  border-left: 4px dashed var(--stand-ueberfaellig-tief);
  padding-left: 12px;
}
.grp-liste,
.grp-aufgaben,
.grp-mitglieder,
.grp-freigaben,
.grp-treffer,
.grp-meine,
.grp-freiliste,
.grp-startwahl,
.grp-ereignisse,
.grp-jestand,
.grp-namen,
.kal-liste,
.kal-tage {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.grp-eintrag,
.grp-aufgabe,
.grp-startweg {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 14px;
  border-radius: var(--r);
  background: #fff;
  border: 1px solid var(--hairline);
  color: var(--ink);
  text-decoration: none;
}
.grp-eintrag:hover,
.grp-aufgabe:hover,
.grp-startweg:hover {
  border-color: var(--cobalt);
}
.grp-eintrag-text,
.grp-aufgabe-text,
.grp-startweg-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.grp-eintrag-text b,
.grp-aufgabe-text b,
.grp-startweg-text b {
  overflow-wrap: anywhere;
}
.grp-eintrag-text small,
.grp-aufgabe-text small,
.grp-startweg-text small {
  color: var(--ink-soft);
}
.grp-eintrag-pfeil {
  color: var(--ink-soft);
  flex: none;
}
.grp-aufgabe {
  flex-wrap: wrap;
}
.grp-neu,
.nav-zahl,
.du-neu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: var(--cobalt);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
}
.nav-zahl {
  position: absolute;
  top: 2px;
  right: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11.5px;
}
.nav a {
  position: relative;
}
@media (min-width: 1024px) {
  .nav-zahl {
    position: static;
    margin-left: auto;
  }
}
/* Die Stände: Wort, Zeichen und Fläche. */
.grp-staende {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.grp-stand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--hairline);
  background: #fff;
  color: var(--ink);
  white-space: nowrap;
}
.grp-stand.st-arbeit {
  background: var(--stand-arbeit);
  border-color: transparent;
  color: var(--cobalt);
}
.grp-stand.st-erledigt {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.grp-stand.st-erledigt::before {
  content: "✓";
}
.grp-stand.st-ueberfaellig {
  background: var(--stand-ueberfaellig);
  border: 1px dashed var(--stand-ueberfaellig-tief);
  color: var(--stand-ueberfaellig-tief);
}
/* Was neu ist, steht zuoberst und hebt sich ab. */
.grp-neuigkeiten.mit-neuem {
  padding: 14px;
  border-radius: var(--r);
  background: var(--stand-arbeit);
  border: 1px solid var(--cobalt);
}
.grp-ereignis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--hairline);
}
.grp-ereignis small {
  color: var(--ink-soft);
  margin-left: auto;
}
.grp-ereignis.neu {
  border-left: 4px solid var(--cobalt);
}
.grp-ereignis-zeichen {
  color: var(--cobalt);
  display: inline-flex;
}
.grp-frueher summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--ink-soft);
}
.grp-mitglied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 14px;
  border-radius: var(--r);
  background: #fff;
  border: 1px solid var(--hairline);
}
.grp-mitglied-name {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.grp-mitglied-wege {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}
.grp-entfernen[open],
.grp-loeschen[open] {
  flex-basis: 100%;
}
.grp-entfernen summary,
.grp-loeschen summary {
  list-style: none;
  cursor: pointer;
}
.grp-entfernen summary::-webkit-details-marker,
.grp-loeschen summary::-webkit-details-marker {
  display: none;
}
.grp-entfernen form,
.grp-loeschen form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border-radius: 10px;
  background: var(--plaster-hi);
}
.grp-entfernen p,
.grp-loeschen p {
  margin: 0;
}
.grp-haken {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
.grp-haken input {
  width: 22px;
  height: 22px;
}
.grp-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.grp-zeile form {
  margin: 0;
}
.grp-formular {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.grp-feld {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
}
.grp-feld input,
.grp-feld select,
.grp-feld textarea {
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: #fff;
  font: inherit;
  font-weight: 400;
  color: var(--ink);
  max-width: 100%;
  box-sizing: border-box;
}
.grp-link {
  width: 100%;
  font-family: ui-monospace, monospace;
  font-size: 13.5px;
}
.grp-arten {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.grp-arten legend {
  font-weight: 600;
  margin-bottom: 6px;
}
.grp-art {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: #fff;
  cursor: pointer;
}
.grp-art small {
  color: var(--ink-soft);
}
.grp-art:has(input:checked) {
  border: 2px solid var(--cobalt);
  background: var(--stand-arbeit);
}
.grp-art input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.grp-art:has(input:focus-visible) {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.grp-wahl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.grp-suche {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  align-items: end;
}
.grp-gewaehlt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 2px solid var(--cobalt);
}
.grp-gewaehlt-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.grp-gewaehlt-text small {
  color: var(--ink-soft);
}
.grp-freigabe {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 12px;
  border-radius: var(--r);
  background: #fff;
  border: 1px solid var(--hairline);
}
.grp-freigabe.an {
  border-color: var(--cobalt);
}
.grp-freigabe-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.grp-freigabe-text small {
  color: var(--ink-soft);
}
.grp-freigabe form {
  margin: 0;
}
.grp-meine-aufgabe {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r);
  background: #fff;
  border: 1px solid var(--hairline);
}
.grp-meine-aufgabe.st-ueberfaellig {
  border: 1px dashed var(--stand-ueberfaellig-tief);
}
.grp-meine-aufgabe.st-erledigt {
  opacity: 0.8;
}
.grp-meine-kopf {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.grp-meine-kopf small {
  color: var(--ink-soft);
}
.grp-hinweistext {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.grp-angaben {
  margin: 0;
  display: grid;
  gap: 8px;
}
.grp-angaben div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
}
.grp-angaben dt {
  color: var(--ink-soft);
}
.grp-angaben dd {
  margin: 0;
  font-weight: 600;
}
.grp-punkte {
  margin: 0;
  padding-left: 20px;
}
.grp-abohinweis {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.grp-abohinweis h2,
.grp-abohinweis p {
  margin: 0 0 8px;
}
.grp-startweg {
  min-height: 84px;
}
.grp-start-eigene {
  border-width: 2px;
}
.grp-stand-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.grp-jestand-teil h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.grp-namen {
  flex-direction: row;
  flex-wrap: wrap;
}
.grp-namen li {
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--hairline);
}
.grp-beitreten {
  text-align: center;
}
.grp-beitreten .grp-zeile {
  justify-content: center;
}
/* Der Kalender: ein Blatt mit sieben Spalten, ab 360 px je mindestens 44 px. */
.kal-eintrag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  border-radius: var(--r);
  background: #fff;
  border: 1px solid var(--hairline);
}
.kal-eintrag.st-erledigt .kal-eintrag-text b {
  text-decoration: line-through;
  color: var(--ink-soft);
}
.kal-eintrag-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.kal-eintrag-text a {
  color: var(--ink);
}
.kal-eintrag-text small,
.kal-eintrag-text small a {
  color: var(--ink-soft);
}
.kal-eintrag form {
  margin: 0;
}
.kal-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.kal-kopf h2 {
  margin: 0;
}
.kal-heute-weg {
  align-self: center;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.kal-tabelle {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
  table-layout: fixed;
}
.kal-tabelle th {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 4px 0;
}
.kal-tabelle td {
  height: 44px;
  text-align: center;
  padding: 0;
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
.kal-tabelle td > a,
.kal-tabelle td > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
.kal-tabelle td.mit {
  background: var(--stand-arbeit);
}
.kal-tabelle td.heute {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
  font-weight: 700;
}
.kal-punkt {
  font-size: 11px;
  line-height: 1;
  min-width: 16px;
  padding: 2px 4px;
  border-radius: 8px;
  background: var(--cobalt);
  color: #fff;
}
.kal-tage {
  margin-top: 6px;
}
.kal-tage h3 {
  margin: 4px 0 6px;
  font-size: 15px;
}
.kal-ueberfaellig {
  padding: 12px;
  border-radius: var(--r);
  background: var(--stand-ueberfaellig);
  border: 1px dashed var(--stand-ueberfaellig-tief);
}
@media (min-width: 1024px) {
  .grp {
    max-width: 860px;
  }
  .grp-kopf {
    grid-template-columns: auto 1fr auto;
  }
  .grp-kopf-wege {
    grid-column: auto;
    justify-content: flex-end;
  }
}
/* SIEBEN PUNKTE AUF DEM TELEFON (V404): Mit «Gruppen» und «Kurse» stehen
   sieben Punkte unten, und mit der Pille aus V262 passten bei 360 px nur
   sechs. Die Pille wird schmaler und das Wort kleiner - jeder Punkt bleibt
   44 px hoch und gut 50 px breit. */
@media (max-width: 1023.98px) {
  .nav:has(> a:nth-of-type(7)) a {
    min-width: 0;
    padding-left: 1px;
    padding-right: 1px;
    font-size: 10.5px;
  }
  .nav:has(> a:nth-of-type(7)) a .navsymbol {
    padding: 4px 8px;
  }
}
.kal > h1 {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* =====================================================================
   V407 - WAS DIE PRÜFUNG DER OBERFLÄCHE FAND, gemessen in Chromium bei
   360 px. In einem Zug umkehrbar wie V127 und V260.
   ===================================================================== */
/* Die Räume eines Fachs: Ein langes Wort im Titel («Auseinandergefaltet»)
   gab der linken Spalte ihre Mindestbreite, und die rechte ragte bis 18 px
   aus dem Bildschirm, samt «Kannst du das schon?». */
.rooms {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.room strong {
  overflow-wrap: anywhere;
  hyphens: auto;
}
/* Sechs Punkte in der Navigation: «Du» stand bei 360 px 9 px über dem
   Rand. Die schmalere Fassung aus V404 gilt schon ab sechs. */
@media (max-width: 1023.98px) {
  .nav:has(> a:nth-of-type(6)) a {
    min-width: 0;
    padding-left: 1px;
    padding-right: 1px;
    font-size: 10.5px;
  }
  .nav:has(> a:nth-of-type(6)) a .navsymbol {
    padding: 4px 8px;
  }
}
/* Der grosse Titel am Ende eines Spiels: «KEINE HERZEN MEHR!» war auf dem
   Telefon links und rechts abgeschnitten - die Breite folgte der Höhe. */
.zwischen-gross .pixeltext {
  max-width: 100%;
}
/* Ein Eintrag im Kalender: Ohne Grundbreite brach der Titel Wort für Wort
   um, neben Etikett und Knopf. */
.kal-eintrag-text {
  flex: 1 1 14em;
}
/* «Prüfungsvorbereitung» ragte aus ihrer Karte. */
.kartenkopf h1 {
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* ==========================================================================
   V408 - GRUPPEN STEUERN: deaktivierte Mitglieder, Beitrittsstopp, Links
   für eine Adresse und die Gesperrten. Kein Rot und kein Grün (R6, R9):
   deaktiviert ist blasser, gesperrt und gestoppt tragen ein Schloss.
   ========================================================================== */
.grp-mitglied.grp-deaktiviert .grp-mitglied-name b {
  color: var(--ink-soft);
}
.grp-marke {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border: 1px dashed currentColor;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}
.grp-mitglied-wege form {
  margin: 0;
}
.grp-stopp {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  border-left: 4px solid var(--cobalt);
  background: var(--plaster-hi);
  border-radius: var(--r);
}
.grp-stopp svg {
  flex: 0 0 auto;
  margin-top: 2px;
}
.grp-einladungsliste {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.grp-einladungsliste li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  background: #fff;
}
.grp-einladung-mail {
  grid-column: 1 / -1;
  overflow-wrap: anywhere;
}
.grp-einladungsliste .grp-feld {
  min-width: 0;
}
.grp-einladungsliste form {
  margin: 0;
}
@media (max-width: 639.98px) {
  .grp-einladungsliste li {
    grid-template-columns: minmax(0, 1fr);
  }
  .grp-einladungsliste form {
    justify-self: start;
  }
}

/* ---------- Die Suche im Fach (V412) --------------------------------------
 * Das Feld auf dem Fach-Bildschirm nimmt die Form der Suche in der
 * Prüfungsvorbereitung; die Treffer stehen in Gruppen, jeder Treffer ein
 * Weg mit 44 px und, wo es mehr als einen gibt, seinen Knöpfen daneben. */
/* Seit V413 steht die Suche als Lupe in der Reihe der Wege (fachsuche-weg,
 * kurssuche): das Symbol der Suche in der Grösse eines Bildes, zentriert. */
.kartenfachweg-symbol {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  color: var(--cobalt-tief, var(--ink));
}
.kartenfachweg-symbol svg {
  fill: currentColor;
}

/* ---------- Der Kopfkasten des Fachs, kompakter (V413) ----------------------
 * Angeordnet am 31.10.2026: Level und bestandene Tests direkt unter dem Namen,
 * neben dem Bild; der Satz der Räume in Klammern hinter der Stufe. */
.fachtitel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fachkopf .fachlevel {
  margin: 0;
}
.b-fach .fachkopf {
  margin-bottom: 6px;
}
.b-fach .floorhead .lvl small {
  display: inline;
  margin: 0 0 0 4px;
}
.fs-stand {
  margin: 14px 0 0;
  color: var(--ink-soft);
}
.fs-gruppen {
  display: grid;
  gap: 18px;
  margin-top: 8px;
}
.fs-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.fs-treffer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 8px 12px;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--flaeche);
}
.fs-haupt {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  min-height: 44px;
  justify-content: center;
  text-decoration: none;
  color: var(--ink);
}
.fs-haupt small {
  color: var(--ink-soft);
}
.fs-wege {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
@media (min-width: 1024px) {
  .fs-gruppen {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* ==========================================================================
 * V414 - WANDER OFF: HINDERNISSE. Ab Level 31 stehen Steinmauern und Wasser
 * auf dem Brett: fest auf ihrem Feld, über dem Boden und unter den Tieren,
 * kein Knopf. Die Pfötchen durch das Wasser sind blau getönt (der Elefant
 * geht hindurch), der Bogen über einer Mauer ist der des Sprungs (der Hase
 * springt darüber); ein Wasser, an dem ein Tier anhält oder durch das der
 * Elefant geht, schwappt kurz. Kein Grün und kein Ziegelrot (R6, R9).
 * ========================================================================== */
.tierli-hindernis {
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.tierli-hindernis .tierli-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 1px rgba(27, 20, 48, 0.25));
}
.tierli-rahmen[data-welt="nacht"] .tierli-hindernis.art-mauer .tierli-svg {
  filter: drop-shadow(0 1px 1px rgba(27, 20, 48, 0.25)) brightness(0.86);
}
.tierli-tapse.nass {
  color: rgba(226, 244, 255, 0.95);
}
.tierli-rahmen:not(.ruhig) .tierli-hindernis.platscht .tierli-svg {
  animation: tierli-platscht 0.46s ease-out;
}
@keyframes tierli-platscht {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(0.93);
  }
  70% {
    transform: scale(1.04);
  }
  100% {
    transform: scale(1);
  }
}
/* (V414 Ende) */

/* ==========================================================================
 * V416 - DIE SUCHE LIEST DEN TEXT DER LEKTIONEN. Steht der Begriff nur im
 * Text einer Lektion, zeigt der Treffer die Fundstelle unter dem Titel, leise
 * und kursiv, um das Wort herum gekürzt.
 * ========================================================================== */
.fs-haupt .fs-fund {
  margin-top: 3px;
  font-size: 14px;
  font-style: italic;
  color: var(--ink-soft);
}
/* (V416 Ende) */

/* ==========================================================================
 * V418 - DREI MELDUNGEN.
 *
 * DIE ZELLEN DER ERKANNTEN TABELLE LASSEN SICH BERICHTIGEN: Jede Zelle ist
 * ein Feld zum Tippen, so gross wie die Zelle und mindestens 44 px hoch; der
 * Rahmen zeigt, welche gerade offen ist. Der Pfeil einer Zeile «Dazu» steht
 * jetzt im Feld, sonst stünde er über ihm.
 *
 * AUF «DU» STEHT DIE ADRESSE DER ANMELDUNG, auch eine lange ohne Rollbalken.
 *
 * IN EINER GRUPPE sagt ein Lernmaterial, in dem nichts zu sehen ist, das in
 * einem Satz - ohne Knopf darunter.
 * ========================================================================== */
.lm-tabelle td:has(> .lm-zelle) {
  padding: 0;
}
.lm-tabelle .lm-zelle {
  display: block;
  box-sizing: border-box;
  min-height: 44px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: text;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.lm-tabelle .lm-zelle:hover {
  background: rgba(255, 255, 255, 0.6);
}
.lm-tabelle .lm-zelle:focus {
  outline: 3px solid var(--cobalt);
  outline-offset: -3px;
  background: var(--flaeche, #ffffff);
}
.lm-tabelle tr.lm-dazu td:nth-child(2):has(> .lm-zelle)::before {
  content: none;
}
.lm-tabelle tr.lm-dazu td:nth-child(2) > .lm-zelle::before {
  content: "↳ ";
  color: var(--ink-soft);
}

.du-anmeldung .hinweis {
  margin-bottom: 8px;
}
.du-mail {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.sm-leer.sm-leer-satz {
  align-items: center;
}
.sm-leer.sm-leer-satz p {
  margin: 0;
}
/* (V418 Ende) */

/* ==========================================================================
 * V419 - DIE KARTEN EINES STAPELS ANSEHEN. Unter dem Stand eines Stapels
 * steht «Karten ansehen»; die Seite dahinter zeigt die Karten nach ihrer
 * Gruppe, mit derselben Farbe wie die Zahl im Stand - eine Auskunft, kein
 * Urteil. Eine Zeile je Karte: vorne, darunter hinten.
 * ========================================================================== */
.kartenstand-liste {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cobalt);
  text-decoration: none;
}
.kartenstand-liste:hover {
  text-decoration: underline;
}
.kartenliste {
  display: grid;
  gap: 14px;
}
.kartenliste > .sub {
  margin: 0;
}
.kartenliste > .hinweis {
  margin: 0;
}
.kartenliste-teil {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--flaeche, #ffffff);
}
.kartenliste-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 18px;
}
.kartenliste-kopf b {
  min-width: 32px;
  padding: 2px 8px;
  border-radius: 999px;
  text-align: center;
  font-size: 14px;
  background: #e4e8f0;
}
.kartenliste-teil.g-noch .kartenliste-kopf b {
  background: var(--chalk);
}
.kartenliste-teil.g-gewusst .kartenliste-kopf b {
  background: var(--moss);
  color: #fff;
}
.kartenliste-karten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.kartenliste-karten li {
  display: grid;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px solid var(--linie, rgba(0, 0, 0, 0.08));
  overflow-wrap: anywhere;
  white-space: pre-line;
}
.kartenliste-karten li:last-child {
  border-bottom: 0;
}
.kartenliste-karten .kl-vorne {
  font-weight: 700;
  color: var(--ink);
}
.kartenliste-karten .kl-hinten {
  color: var(--ink-soft);
}
.kartenliste-zu summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft);
}
.kartenliste-teil > .btn {
  justify-self: start;
  gap: 8px;
}
/* (V419 Ende) */

/* ==========================================================================
 * V420 - DER WÖRTERTEST ZEIGT AM ENDE, WAS RICHTIG UND WAS FALSCH WAR. Jede
 * Frage eine Zeile: das Urteil als kleines Schild in den Farben des Urteils
 * über einer Frage (Moos und Ziegel, gleich gewichtet), die Bedeutung und die
 * Lösung darunter.
 * ========================================================================== */
.kurstest-uebersicht {
  display: grid;
  gap: 8px;
  width: 100%;
  text-align: left;
}
.kurstest-uebersicht > .sub {
  margin: 4px 0 0;
  font-size: 18px;
}
.kurstest-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.kurstest-liste li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 2px;
  align-items: baseline;
  padding: 8px 10px;
  border: 1px solid var(--linie, rgba(0, 0, 0, 0.08));
  border-radius: 12px;
  background: var(--flaeche, #ffffff);
  overflow-wrap: anywhere;
}
.kurstest-liste .kt-urteil {
  grid-row: span 2;
  align-self: center;
  min-width: 4.8em;
  text-align: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
}
.kurstest-liste li.ist-richtig .kt-urteil {
  border: 1.5px solid var(--moss);
  background: var(--moss-hell);
}
.kurstest-liste li.ist-falsch .kt-urteil {
  border: 1.5px solid var(--brick);
  background: var(--brick-hell);
}
.kurstest-liste .kt-frage {
  font-size: 14px;
  color: var(--ink-soft);
}
.kurstest-liste .kt-loesung {
  font-weight: 700;
  color: var(--ink);
}
/* (V420 Ende) */

/* =====================================================================
 * V421: SCHREIBEN STATT UMDREHEN, UND DIE HANDSCHRIFT
 *
 * Angeordnet am 03.11.2026: «alle lernkarten müssen zusätzlich die
 * Möglichkeit haben, dass man die antwort schreiben kann, statt umzudrehen …
 * baue dafür eine zusätzliche Handschrift erkennung ein die überall wo
 * geschrieben werden kann, gewählt werden kann oder dann Tastatur wählbar.»
 *
 * DER UMSCHALTER ÜBER DER KARTE (`.kartenmodus`) und der zwischen Tastatur
 * und Handschrift (`.schreibart`) sind die Spur der Richtung (`.richtung`):
 * zwei Hälften, die gewählte weiss und erhaben.
 *
 * DIE FLÄCHE ZUM SCHREIBEN ist eine Reihe Kästchen mit vier Linien - die
 * Grundlinie kräftiger, die übrigen gestrichelt. Was gelesen ist, wird grau
 * und trägt oben links den Buchstaben in Kobalt, der Farbe der Wahl: kein
 * Grün und kein Ziegelrot, denn gelesen ist kein Urteil (R6, R9).
 * `touch-action: none`, damit ein Strich die Seite nicht verschiebt.
 * ===================================================================== */
.kartenmodus {
  margin: 0 0 12px;
}
.kartenmodus .btn,
.schreibart .btn {
  gap: 6px;
}
.schreibart .btn[aria-pressed="true"] {
  background: var(--flaeche, #ffffff);
  color: var(--ink);
  box-shadow:
    0 1px 2px rgba(22, 35, 59, 0.12),
    0 3px 10px rgba(22, 35, 59, 0.08);
}
.kartenmodus-satz {
  margin: 0 0 8px;
}
.schreibkarte {
  display: grid;
  gap: 10px;
}
.schreibkarte .kurstest-eingabe {
  margin-bottom: 0;
}
.kartenurteil {
  margin-bottom: 10px;
}
.kartenurteil-auch {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-soft);
}

.handschrift {
  display: grid;
  gap: 10px;
  margin: 4px 0 10px;
}
.handschrift .schreibart {
  margin-bottom: 0;
}
.hs-flaeche {
  display: grid;
  gap: 8px;
}
/* EIN KÄSTCHEN FÜR EINEN BUCHSTABEN (V438): so hoch wie bis dahin die Reihe
 * und etwas breiter als hoch, in der Mitte - Platz für ein «M» oder ein «W».
 * Die Höhe steht in --hs-hoehe, und die Breite folgt ihr. */
.hs-blatt {
  --hs-hoehe: 176px;
  display: block;
  justify-self: center;
  width: min(100%, calc(var(--hs-hoehe) * 1.25));
  height: var(--hs-hoehe);
  border-radius: var(--r);
  background: var(--plaster-hi);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: crosshair;
}
.hs-kaestchen {
  fill: #ffffff;
  stroke: var(--hairline);
  stroke-width: 1;
}
.hs-linie {
  stroke: rgba(22, 35, 59, 0.22);
  stroke-width: 1;
  stroke-dasharray: 4 5;
}
.hs-linie.hs-grund {
  stroke: rgba(22, 35, 59, 0.5);
  stroke-width: 1.5;
  stroke-dasharray: none;
}
.hs-strich {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* WAS GELESEN IST, VERBLASST (V438), und das Kästchen ist frei: grau, wie
 * vorher das Gelesene, und ohne Bewegung gleich weg. */
.hs-verblasst {
  opacity: 0;
}
.hs-verblasst .hs-strich {
  stroke: rgba(22, 35, 59, 0.28);
}
@media (prefers-reduced-motion: no-preference) {
  .hs-verblasst {
    animation: hs-verblassen 0.3s ease-out forwards;
  }
}
@keyframes hs-verblassen {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.hs-satz {
  margin: 0;
}
.hs-unten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.hs-wahl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}
.hs-wahl-satz {
  font-size: 13px;
  color: var(--ink-soft);
}
.hs-zeichen,
.hs-taste {
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
}
.hs-zeichen {
  font-size: 20px;
  font-weight: 700;
}
.hs-zeichen[aria-pressed="true"] {
  border-color: var(--cobalt);
  color: var(--cobalt);
}
.hs-tasten {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
@media (min-width: 720px) {
  .hs-blatt {
    --hs-hoehe: 200px;
  }
}
/* BREIT UND NIEDRIG (V159, V422): Auf einem Tablet quer steht die Fläche
 * rechts neben der Karte, und «Prüfen» soll ins Fenster passen - also wird
 * sie mit der Höhe des Fensters niedriger, nie unter 130 px, und der Satz
 * darunter kleiner. */
@media (min-width: 1024px) and (max-height: 860px) {
  .b-lernkarte .hs-blatt,
  .b-kurstest .hs-blatt {
    --hs-hoehe: clamp(130px, calc(100dvh - 580px), 200px);
  }
  .b-lernkarte .handschrift,
  .b-kurstest .handschrift {
    gap: 6px;
    margin-bottom: 6px;
  }
  .b-lernkarte .hs-satz,
  .b-kurstest .hs-satz {
    font-size: 13px;
    line-height: 1.35;
  }
}
/* (V421 Ende) */
/* PRÜFUNGEN EINER GRUPPE (V423), angeordnet am 03.11.2026: «baue ein, dass
 * ein gruppen owner prüfungen erstellen kann». Im Formular stehen die beiden
 * Zahlen - Aufgaben und Minuten - nebeneinander, wo Platz ist; die Räume sind
 * dieselben Wahlfelder wie die Art (.grp-art), nur als Häkchen. Auf der Karte
 * vor dem Start steht eine Zeile mit Fach, Aufgaben und Minuten. */
.grp-zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.grp-pruefzahlen {
  margin: 0;
  font-weight: 600;
}
/* (V423 Ende) */
/* EIN ABO LÖSEN (V424), angeordnet am 03.11.2026: «dann können user selber
 * abos lösen. abo Bedingungen und preise müssen im adminbereich konfiguriert
 * werden können.» Die Angebote stehen als Karten nebeneinander, wo Platz ist,
 * der Preis gross und ohne Farbe; die Bedingungen behalten ihre Zeilen, wie
 * der Betrieb sie geschrieben hat. Nichts davon urteilt. */
.abo-angebote {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.abo-angebot {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.abo-angebot .btn {
  margin-top: auto;
}
.abo-name {
  margin: 0;
  font-size: 18px;
}
.abo-preis {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.abo-eintrag + .abo-eintrag {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.abo-bedingungstext {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.abo-bedingungen summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.abo-formular {
  display: grid;
  gap: 12px;
}
.abo-einverstanden {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-height: 44px;
  cursor: pointer;
}
.abo-einverstanden input {
  width: 22px;
  height: 22px;
  flex: none;
  margin: 2px 0 0;
}
.abo-test {
  border-style: dashed;
}
/* (V424 Ende) */
/* JEDE KARTE BEHÄLT IHREN PLATZ (V425), aus dem Feedback vom 03.11.2026: «Die
 * karten sollen den platz beibehalten. Wird eine karte gewählt, bleibt dessen
 * platz dann leer/frei.» Im Vorrat von «Gruppen finden» lässt eine gelegte
 * Karte einen leeren Platz zurück, so gross wie sie - ihr Text steht
 * unsichtbar darin -, mit gestricheltem Rand und ohne Fläche. Nichts daran
 * urteilt: Ob das Paar stimmt, sagt erst «Prüfen». */
.gp-karte.gp-leer {
  border-style: dashed;
  background: transparent;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}
.gp-leer-inhalt {
  visibility: hidden;
}
@media (hover: hover) {
  .gp-karte.gp-leer:hover {
    background: transparent;
  }
}
/* (V425 Ende) */
/* DIE MELDUNGEN (V426), angeordnet am 03.11.2026: «wenn man zu einer gruppe
 * eingeladen wird muss das deutlich sichtbar sein. ... vlt ein badge mit
 * anzahl Meldungen beim scumpy wo man die Meldungen sehen kann. auch die vom
 * scumpy direkt.» Der Scampy in der Kopfzeile ist ein Weg, mindestens 44 px
 * gross, und trägt die Zahl als Plakette in Kobalt mit weissem Rand, wie die
 * Zahl am Punkt «Gruppen». Kein Rot: Eine Zahl ist kein Alarm und kein Urteil
 * (R9). Eine Einladung oben trägt den Rand in Kobalt, wie die Gruppe, die
 * dran ist (V345). */
.kopf-meldungen {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  margin: -7px;
  border-radius: 50%;
  color: inherit;
  text-decoration: none;
}
.kopf-meldungen:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 0;
}
.meldungen-zahl {
  position: absolute;
  top: 1px;
  right: -3px;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 11px;
  box-sizing: border-box;
  background: var(--cobalt);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.scampipost-blase.ist-einladung {
  border-color: var(--cobalt);
  box-shadow:
    0 0 0 1px var(--cobalt),
    0 8px 22px rgba(22, 35, 59, 0.12);
}
.scampipost-blase.ist-einladung .scampipost-hinweis {
  margin: 0 0 4px;
}
.scampipost-wahl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.scampipost-wahl form {
  margin: 0;
}
.scampipost-wahl .btn.steuer {
  margin-bottom: 0;
}
/* Die Seite «Meldungen»: was wartet, dann alles, das Jüngste zuerst. */
.meldungen-block {
  margin: 20px 0 0;
}
.meldungen-titel {
  margin: 0 0 10px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}
.meldungen-liste {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.meldung {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--linie);
  border-radius: 16px;
  background: var(--flaeche);
}
.meldung.ist-neu,
.meldung.ist-einladung,
.meldung.ist-geschenk {
  border-color: var(--cobalt);
  box-shadow: 0 0 0 1px var(--cobalt);
}
.meldung.ist-geschenk {
  grid-template-columns: minmax(0, 1fr) auto;
  background: linear-gradient(135deg, var(--flaeche) 55%, var(--sky-low));
}
.meldung-bild {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  color: var(--cobalt);
}
.meldung-bild .bild {
  width: 36px;
  height: 36px;
}
.meldung.ist-einladung .meldung-bild .bild {
  width: 40px;
  height: 40px;
}
.meldung-titel {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.meldung-satz {
  margin: 3px 0 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.meldung-wann {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}
.meldung-neu {
  display: inline-flex;
  align-items: center;
  height: 20px;
  margin-left: 4px;
  padding: 0 8px;
  border-radius: 10px;
  background: var(--cobalt);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  vertical-align: 2px;
}
.meldung-wahl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.meldung-wahl form {
  margin: 0;
}
.meldung-weg.btn.steuer {
  margin-bottom: 0;
  align-self: center;
}
.meldung-geschenk {
  margin: 0;
}
.meldung-geschenk button.geschenk {
  min-width: 72px;
  min-height: 72px;
}
.meldung-geschenk .geschenk-bild .bild {
  width: 64px;
  height: 64px;
}
@media (prefers-reduced-motion: no-preference) {
  .meldung.ist-offen button.geschenk .geschenk-bild {
    animation: geschenk-auf 0.5s ease-out forwards;
  }
}
/* Auf dem schmalen Telefon steht «Ansehen» unter dem Text. */
@media (max-width: 479px) {
  .meldung {
    grid-template-columns: 40px minmax(0, 1fr);
  }
  .meldung-weg.btn.steuer {
    grid-column: 2;
    justify-self: start;
  }
}
.grp-ablehnen {
  margin: 10px 0 0;
}
@media (min-width: 1024px) {
  /* Auf dem Schreibtisch steht der Scampy sonst nur bei der Marke (V127) -
     als Weg zu den Meldungen bleibt er auch in der Kopfzeile, an derselben
     Stelle wie auf dem Telefon, mit seiner Plakette. */
  .frame.mit-nav .kopf .kopf-meldungen .zeichen {
    display: block;
  }
  .b-meldungen .pad {
    width: auto;
    max-width: var(--spalte-lesen);
    margin: 0 auto 0 0;
    padding: 32px 44px 56px;
  }
}
/* (V426 Ende) */

/* =====================================================================
 * V428 - DIE ANMELDUNG ERKLÄRT SICH, UND DER SCAMPY SCHWIMMT; DIE
 * SPEZIALKURSE IN DER LERNWERKSTATT; DIE ANGEBOTE UNTER «GRUPPEN»
 *
 * Angeordnet am 04.11.2026. Alles in diesem Abschnitt, in einem Zug
 * umkehrbar wie die übrigen am Ende dieses Blatts.
 * ===================================================================== */

/* DER SCHWIMMER (V428): im Himmel des Bilds der Anmeldung, auf einem Weg
   aus sechs Punkten, den der Server bei jedem Aufruf zieht
   (``logo.anmeldeweg``): ``--x0`` bis ``--x5`` und ``--y0`` bis ``--y5``
   in Prozent des Bilds, ``--r0`` bis ``--r5``, wohin er auf jedem Abschnitt
   schaut, und ``--dauer``. Vor der Tür und den Wolken, nie über den Rand. */
.anmelde-schwimmer {
  position: absolute;
  z-index: 2;
  left: var(--x0, 12%);
  top: var(--y0, 10%);
  width: 44px;
  height: 44px;
  pointer-events: none;
}
/* ``.willkommen svg`` gibt jedem Bild darin 132 px und einen Abstand -
   der Scampy behält seine eigene Grösse. */
.willkommen .anmelde-schwimmer .zeichen {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
}
@media (min-width: 1024px) {
  .anmelde-schwimmer {
    width: 64px;
    height: 64px;
  }
}
/* Gleiten, nie hüpfen (docs/03 Abschnitt 3, V39): An jedem Punkt eine
   kurze Pause, dann, wenn der nächste auf der anderen Seite liegt, eine
   Wende, dann gleitet er hin. Je Abschnitt ein Sechstel der Dauer. Bei
   reduzierter Bewegung steht er an seinem ersten Punkt. */
@media (prefers-reduced-motion: no-preference) {
  .anmelde-schwimmer {
    animation: anmelde-schwimmen var(--dauer, 36s) linear infinite;
  }
}
@keyframes anmelde-schwimmen {
  0% {
    left: var(--x0);
    top: var(--y0);
    transform: scaleX(var(--r5));
  }
  3% {
    left: var(--x0);
    top: var(--y0);
    transform: scaleX(var(--r5));
    animation-timing-function: ease-in-out;
  }
  4.5% {
    left: var(--x0);
    top: var(--y0);
    transform: scaleX(var(--r0));
    animation-timing-function: ease-in-out;
  }
  16.667% {
    left: var(--x1);
    top: var(--y1);
    transform: scaleX(var(--r0));
  }
  19.667% {
    left: var(--x1);
    top: var(--y1);
    transform: scaleX(var(--r0));
    animation-timing-function: ease-in-out;
  }
  21.167% {
    left: var(--x1);
    top: var(--y1);
    transform: scaleX(var(--r1));
    animation-timing-function: ease-in-out;
  }
  33.333% {
    left: var(--x2);
    top: var(--y2);
    transform: scaleX(var(--r1));
  }
  36.333% {
    left: var(--x2);
    top: var(--y2);
    transform: scaleX(var(--r1));
    animation-timing-function: ease-in-out;
  }
  37.833% {
    left: var(--x2);
    top: var(--y2);
    transform: scaleX(var(--r2));
    animation-timing-function: ease-in-out;
  }
  50% {
    left: var(--x3);
    top: var(--y3);
    transform: scaleX(var(--r2));
  }
  53% {
    left: var(--x3);
    top: var(--y3);
    transform: scaleX(var(--r2));
    animation-timing-function: ease-in-out;
  }
  54.5% {
    left: var(--x3);
    top: var(--y3);
    transform: scaleX(var(--r3));
    animation-timing-function: ease-in-out;
  }
  66.667% {
    left: var(--x4);
    top: var(--y4);
    transform: scaleX(var(--r3));
  }
  69.667% {
    left: var(--x4);
    top: var(--y4);
    transform: scaleX(var(--r3));
    animation-timing-function: ease-in-out;
  }
  71.167% {
    left: var(--x4);
    top: var(--y4);
    transform: scaleX(var(--r4));
    animation-timing-function: ease-in-out;
  }
  83.333% {
    left: var(--x5);
    top: var(--y5);
    transform: scaleX(var(--r4));
  }
  86.333% {
    left: var(--x5);
    top: var(--y5);
    transform: scaleX(var(--r4));
    animation-timing-function: ease-in-out;
  }
  87.833% {
    left: var(--x5);
    top: var(--y5);
    transform: scaleX(var(--r5));
    animation-timing-function: ease-in-out;
  }
  100% {
    left: var(--x0);
    top: var(--y0);
    transform: scaleX(var(--r5));
  }
}

/* DIE EINLEITUNG (V428), unter dem Mailfeld: eine ruhige Fläche, leiser als
   die Karte des Formulars darüber - zuerst kommt die Anmeldung. */
.einleitung {
  margin: 18px 0 8px;
  padding: 16px 16px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-gross);
  background: rgba(255, 255, 255, 0.62);
  text-align: left;
}
.einleitung-titel {
  margin: 0 0 10px;
}
.einleitung-punkte {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.einleitung-punkte li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.einleitung-bild {
  flex: none;
  width: 40px;
  height: 40px;
}
.einleitung-bild img,
.einleitung-bild svg {
  display: block;
  width: 40px;
  height: 40px;
}
.einleitung-punkte b {
  display: block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 15px;
  line-height: 1.25;
}
.einleitung-punkte small {
  display: block;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.einleitung-fuss {
  margin: 4px 0 0;
  font-size: 12.5px;
}
.einleitung-fuss a {
  color: var(--cobalt);
  font-weight: 600;
}
@media (min-width: 1024px) {
  .b-anmelden .pad > .einleitung {
    margin-top: 0;
  }
}

/* DIE SPEZIALKURSE IN DER LERNWERKSTATT (V428), unter den Fächern - die
   Liste von der früheren Seite «Kurse», mit Luft nach oben. */
.werk-kurse {
  margin-top: 26px;
}
.werk-kurse h2.sub {
  display: flex;
  align-items: center;
  gap: 8px;
}
.werk-kurse .kursweg .kartenfachweg-text strong {
  font-size: 18px;
}

/* DIE ANGEBOTE UNTER «GRUPPEN» (V428), für ein Konto ohne Abo: je ein Weg
   zum Lösen, im Aussehen der Gruppen darüber. */
.grp-angebote {
  list-style: none;
  margin: 4px 0 12px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.grp-angebot {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 12px;
  border-radius: var(--r);
  background: #fff;
  border: 1px solid var(--hairline);
  color: var(--ink);
  text-decoration: none;
}
.grp-angebot:hover {
  border-color: var(--cobalt);
}
.grp-angebot b {
  flex: 1 1 auto;
}
.grp-angebot small {
  color: var(--ink-soft);
  white-space: nowrap;
}
/* (V428 Ende) */

/* =====================================================================
 * V429 - LÖSUNGSWEGE MIT THEORIE IN DEN DOSSIERS
 *
 * Angeordnet am 04.11.2026: «wo nur aufgaben sind, lösungen hinzufügen.
 * wichtig ist, dass der lösungsweg und theorie auch dabei sind.» Unter einer
 * Seite steht ein zweites ``details``: je Aufgabe die Theorie, die Schritte
 * und die Lösung, in den Bausteinen der Erklärungen (V154). Alles in diesem
 * Abschnitt, in einem Zug umkehrbar.
 * ===================================================================== */

/* Die Lösungen kurz, wo die Unterlage keine Lösungsseite mitbrachte. */
.dossierkurz {
  margin: 0;
  padding: 10px 14px 12px;
}
.dossierkurz dt {
  margin-top: 10px;
  font-weight: 700;
  color: var(--ink);
}
.dossierkurz dt:first-child {
  margin-top: 0;
}
.dossierkurz dd {
  margin: 2px 0 0 12px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}

/* Ein Lösungsweg: Titel, Theorie, Schritte, Lösung - eine Aufgabe je Karte,
   getrennt durch eine feine Linie. */
.lweg {
  padding: 14px 14px 16px;
  scroll-margin-top: 16px;
}
.lweg + .lweg {
  border-top: 1px solid var(--linie);
}
.lweg-titel {
  margin: 0 0 10px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink);
}
.lweg-etikett {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.lweg-theorie {
  margin: 0 0 12px;
  padding: 10px 12px 12px;
  border-radius: var(--r-karte);
  background: var(--plaster);
}
.lweg-theorie > p:not(.lweg-etikett):not(.emerke) {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}
.lweg-theorie .emerke {
  margin-bottom: 0;
}
.lweg-schritte {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}
.lweg-schritte .eschritt {
  padding-top: 6px;
}
/* Eine Tabelle mit vier Spalten passt so auf ein Telefon von 390 px. */
.lweg .etabelle th,
.lweg .etabelle td {
  padding: 6px 7px;
}
.lweg-loesung > p:not(.lweg-etikett) {
  margin: 0;
}
.lweg-loesung > p + p {
  margin-top: 4px;
}
.lweg-mehr {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.lweg-mehr a {
  color: var(--cobalt);
  font-weight: 700;
}
.b-kursdossier mark {
  padding: 0 0.15em;
  border-radius: 4px;
  background: var(--ebild-gelb-hell);
  box-shadow: inset 0 -2px 0 var(--chalk);
  color: inherit;
}
/* Auf dem Telefon nimmt ein Bild im Schritt die ganze Breite, wie in der
   Erklärung (V154) - nur ist die Karte hier um den Rand des ``details``
   schmaler. */
@media (max-width: 639.98px) {
  .lweg {
    padding: 12px 10px 14px;
  }
}
/* (V429 Ende) */

/* ==========================================================================
 * V430 - JEDE SUCHE SUCHT ÜBERALL, WO DAS KONTO BERECHTIGT IST.
 *
 * «AUCH GEFUNDEN IN» unter den Treffern einer Suche in einem Fach oder Kurs:
 * je Bereich, in dem das Wort etwas findet, ein Weg mit dem Zeichen des
 * Fachs - ein Knopf von 44 px, der umbricht, wo die Reihe zu lang wird. Dazu
 * die Fundstelle einer Lektion in einem Knopf zum Wählen, leise und kursiv
 * wie in der Suche im Fach (V416).
 * ========================================================================== */
.auchin {
  margin: 14px 0 0;
  padding: 10px 12px 12px;
  border-radius: var(--r-karte);
  background: var(--plaster);
}
.auchin-titel {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft);
}
.auchin-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.auchin-weg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--linie, rgba(0, 0, 0, 0.12));
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.auchin-weg > span:first-child {
  display: inline-flex;
  flex: none;
}
.auchin-alle {
  color: var(--cobalt);
}
.auchin-weg:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
@media (hover: hover) {
  .auchin-weg:hover {
    border-color: var(--cobalt);
  }
}
.vb-wahl-text .vb-fund {
  font-style: italic;
}
/* EIN WORT OHNE LÜCKE BRICHT UM: Eine Gruppe eines Kurses heisst nach ihrer
   Kodierung, einem Wort mit Unterstrichen, und in der Suche über alles steht
   sie neben den Fächern - in der schmalen Spalte des Telefons drückte sie
   sonst jeden Knopf über den Rand. */
.vb-wahl-text small {
  overflow-wrap: anywhere;
}
/* (V430 Ende) */

/* ==========================================================================
 * V431 - DER HINWEIS NENNT DIE PRÜFUNG, FÜHRT ZU IHR UND BRICHT SIE AB.
 *
 * Unter dem Satz, dass etwas während einer Prüfung ruht, steht je laufende
 * Prüfung, welche es ist und bis wann sie läuft, «Zur Prüfung» und «Prüfung
 * abbrechen» hinter einer Rückfrage - ein ``details`` wie «Stapel
 * zurücksetzen» (V221). Jedes Tippziel 44 px. Auf dem Ergebnis danach ein
 * zweiter Weg, «Zurück, wo du warst».
 * ========================================================================== */
.pruefungsruhe {
  display: grid;
  gap: 10px;
}
.pruefungsruhe > p {
  margin: 0;
}
.pr-pruefung {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--linie, rgba(0, 0, 0, 0.1));
}
.pr-satz {
  margin: 0;
  font-weight: 700;
  color: var(--ink);
}
.pr-wege {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 12px;
}
.pr-wege form {
  margin: 0;
}
.pruefungsruhe .btn {
  min-height: 44px;
  padding: 8px 14px;
  font-size: 14.5px;
  gap: 6px;
}
.pr-abbrechen {
  font-size: 14px;
}
.pr-abbrechen summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  cursor: pointer;
  color: var(--ink-soft);
  font-weight: 600;
}
.pr-abbrechen summary:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 2px;
}
.pr-abbrechen form {
  display: grid;
  gap: 8px;
  margin-top: 4px;
  max-width: 52ch;
}
.pr-abbrechen form p {
  margin: 0;
}
.pr-abbrechen .btn {
  justify-self: start;
}
.ende-zurueck {
  margin-top: 10px;
}
/* (V431 Ende) */

/* ------------------------------------------------------------------------
   V433: Ein Pixelknopf passt auf jedes Telefon.
   Seit eine Spielmünze zehn Coins kostet, steht am Ende eines Spiels
   «Nochmal · 10 Coins» und «Weiter · 10 Coins» - auf 320 px ragten die
   Knöpfe über den Schirm hinaus, und schon «Nochmal · 1 Coin» passte dort
   knapp nicht. Jetzt wird die Schrift kleiner, wo der Platz fehlt: Der Knopf
   ist höchstens so breit wie sein Platz, und die Schrift aus Pixeln
   schrumpft mit ihrem Seitenverhältnis (viewBox), statt hinauszuragen.
   ------------------------------------------------------------------------ */
.pixelknopf {
  max-width: 100%;
  min-width: 0;
}
.pixelknopf-schrift {
  display: flex;
  min-width: 0;
}
.pixelknopf .pixeltext {
  max-width: 100%;
}
/* (V433 Ende) */