/* StudySwiss — Seitenaufbau der Website
   ==================================================================
   Die App ist für den Daumen gebaut: Tab-Leiste unten, eine Spalte,
   Seitenrand 24. Ein Laptop hat aber 1400 px und eine Tastatur — wer
   dort die Telefon-Ansicht zeigt, lässt zwei Drittel des Bildschirms
   leer und zwingt zum Rollen, wo nichts zu rollen wäre.

   Darum wächst die Seite mit: Unter 900 px ist sie die App, darüber
   wird die Tab-Leiste zur Kopfzeile, die Spalte breiter und der
   Lesetext steht neben der Frage statt darüber.                       */

/* --- Kopfzeile ---------------------------------------------------- */
.kopf{position:sticky;top:0;z-index:40;background:rgba(251,245,234,.92);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)}
.kopf-innen{max-width:var(--spalte);margin:0 auto;padding:0 var(--rand);
  height:68px;display:flex;align-items:center;gap:28px}
.logo{display:flex;align-items:center;gap:10px;flex:none}
.logo:hover{text-decoration:none}
.logo svg{height:30px;width:auto;display:block}
/* Die Wortmarke traegt den Namen selbst; ein zweiter, getippter
   Schriftzug daneben waere die Marke zweimal. */
.logo b{font:700 20px/1 'Bitter',Georgia,serif;letter-spacing:-.02em;color:var(--ink)}
.logo b i{font-style:normal;color:var(--tan)}
.hauptnav{display:flex;gap:4px;margin-left:auto}
.hauptnav a{padding:9px 14px;border-radius:10px;font:600 14px 'Nunito Sans';
  color:var(--ink5)}
.hauptnav a:hover{background:var(--tan1);color:var(--ink);text-decoration:none}
.hauptnav a[aria-current=page]{background:var(--tan1);color:var(--ink)}
.kopf .btn.klein{margin-left:8px}
.menuknopf{display:none;margin-left:auto;width:44px;height:44px;border:none;
  background:transparent;border-radius:10px;cursor:pointer;color:var(--ink7)}
.menuknopf:hover{background:var(--tan1)}

/* --- Inhaltsbreiten ------------------------------------------------ */
.band{padding:64px var(--rand)}
.band.schmal{padding:44px var(--rand)}
.band.dunkelband{background:var(--ink);color:var(--cream);
  background-image:none}
.band.dunkelband h2,.band.dunkelband h3{color:var(--cream)}
.band.dunkelband .bd,.band.dunkelband .bd14{color:var(--tan1)}
.band.dunkelband .eyebrow{color:var(--tan3)}
.innen{max-width:var(--spalte);margin:0 auto}
.innen.lese{max-width:var(--lesespalte)}
.innen.mittel{max-width:860px}

/* --- Raster --------------------------------------------------------
   `auto-fit` mit `minmax` statt fester Spaltenzahl: Die Karten ordnen
   sich selbst um, und niemand muss für Tablet, Laptop und grossen
   Bildschirm je eine Regel schreiben. */
/* `min(280px,100%)` statt `280px` — und das ist kein Feinschliff.
   Ein Grid mit `minmax(340px,1fr)` schrumpft NICHT unter 340 px: Wird
   der Platz enger, laeuft die Spalte seitlich aus dem Bild, und die
   ganze Seite bekommt einen waagrechten Rollbalken. Gerechnet:
   Seitenrand 24 links und rechts, also bleiben bei 390 px Bildschirm
   342 px — zwei Pixel Luft. Auf einem 360-px-Android sind es 312, auf
   einem 320-px-Geraet 272. Dort lief `.raster.zwei` ueber.
   `min(…,100%)` erlaubt der Spalte, unter ihr Wunschmass zu gehen,
   sobald weniger Platz da ist; oberhalb aendert sich nichts. */
.raster{display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.raster.zwei{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.raster.vier{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.zweispalt{display:grid;gap:44px;grid-template-columns:1.05fr .95fr;align-items:center}
.stapel>*+*{margin-top:14px}
.stapel.weit>*+*{margin-top:24px}
.stapel.eng>*+*{margin-top:8px}

/* --- Aufmacher ----------------------------------------------------- */
.aufmacher{padding:76px var(--rand) 64px}
.aufmacher h1{max-width:15ch}
.aufmacher .bd{font-size:17px;max-width:52ch;margin-top:16px}
.knopfreihe{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
/* Kennzahlen auf der Startseite.
   Sie hiessen «beleg» wie das Rechnungsblatt in `beleg.css` und erbten
   von dort `background:#fff`, `color:#111`, `max-width:210mm` und ein
   `overflow:hidden`. Einen Innenabstand erbten sie NICHT — der steht an
   `.beleg-innen`, das es hier nicht gibt. Ergebnis: eine weisse Karte,
   deren Text am Rand abgeschnitten wurde.

   Die Flaeche ist jetzt `--tan1`, dieselbe warme Toenung wie die
   Icon-Flaechen (§5.3) — sichtbar auf dem Papier, ohne eine neue Farbe
   zu erfinden. Kein Schatten (§5.3), nur eine Linie. */
.kennzahlen{display:flex;gap:20px;flex-wrap:wrap;margin-top:36px}
.kennzahl{background:var(--tan1);border:1px solid var(--tan3);
  border-radius:var(--r-karte);padding:16px 22px}
.kennzahl .num2{color:var(--ink)}
.kennzahl .sm{margin-top:2px}

/* --- Fusszeile ----------------------------------------------------- */
.fuss{background:var(--ink);color:var(--tan1);padding:56px var(--rand) 36px;
  background-image:none}
.fuss .innen{display:grid;gap:32px;grid-template-columns:1.4fr 1fr 1fr 1fr}
.fuss h4{color:var(--cream);font-size:14px;margin-bottom:12px}
.fuss a{display:block;color:var(--tan1);padding:5px 0;font-size:14px}
.fuss a:hover{color:var(--cream)}
.fuss .schluss{grid-column:1/-1;border-top:1px solid rgba(228,203,169,.22);
  padding-top:22px;margin-top:10px;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;color:var(--ink3);font-size:12px}

/* --- Schritte einer Strecke ----------------------------------------
   Offerte → Bestellung → Bestätigung → Rechnung. Wer eine Bestellung
   für eine Gemeinde ausfüllt, will jederzeit sehen, wie viel noch
   kommt — sonst bricht er in der Mitte ab. */
.schritte{display:flex;gap:0;margin-bottom:36px;flex-wrap:wrap}
.schritt{display:flex;align-items:center;gap:10px;padding-right:18px}
.schritt .kugel{width:28px;height:28px;border-radius:14px;flex:none;
  background:var(--tan1);color:var(--tan6);display:flex;align-items:center;
  justify-content:center;font:700 13px 'Bitter',Georgia,serif}
.schritt span{font:600 13px 'Nunito Sans';color:var(--ink3);white-space:nowrap}
.schritt.jetzt .kugel{background:var(--ink);color:var(--cream)}
.schritt.jetzt span{color:var(--ink)}
.schritt.fertig .kugel{background:var(--green);color:#fff}
.schritt.fertig span{color:var(--ink5)}
.schritt+.schritt::before{content:"";width:22px;height:1px;background:var(--line);
  margin-right:18px;flex:none}

/* --- Preistafel ----------------------------------------------------- */
.preiskarte{position:relative;display:flex;flex-direction:column}
.preiskarte.empfohlen{border-color:var(--tan);box-shadow:0 0 0 1px var(--tan)}
/* Das Abzeichen der empfohlenen Karte hiess «marke» — genauso wie die
   winzige Fortschrittsmarke der Aufgabenuebersicht weiter unten
   (`.marke{width:14px;height:6px}`). Diese Regel hier setzt Position,
   Farbe, Schrift und Innenabstand, aber NICHT Breite und Hoehe; die kamen
   darum von der Fortschrittsmarke. Das Abzeichen wurde auf 14 × 6 Pixel
   gezwaengt, der Text lief heraus und brach quer ueber die Kartenlinie.
   Ein Klassenname, zwei Bedeutungen — und die kleinere gewinnt. */
.preiskarte .empfehlung{position:absolute;top:-11px;left:20px;background:var(--tan);
  color:var(--ink);font:700 11px/1 'Nunito Sans';letter-spacing:.06em;
  text-transform:uppercase;padding:6px 10px;border-radius:7px;
  white-space:nowrap}
.preiskarte ul{list-style:none;margin:18px 0 0;padding:0}
.preiskarte li{display:flex;gap:10px;padding:7px 0;font:400 14px/1.45 'Nunito Sans';
  color:var(--ink5)}
.preiskarte li svg{flex:none;margin-top:2px;color:var(--green)}
.preiskarte .btn{margin-top:auto}
.preiskarte .preis{display:flex;align-items:baseline;gap:8px;margin:14px 0 2px}

/* --- Rechner --------------------------------------------------------- */
.rechner{display:grid;gap:32px;grid-template-columns:1fr 380px;align-items:start}
.schieber{width:100%;accent-color:var(--ink);height:34px;cursor:pointer}
.staffel{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.staffel .chip{cursor:default}
.summe dt{font:400 14px 'Nunito Sans';color:var(--ink5)}
.summe dd{margin:0;font:600 14px 'Bitter',Georgia,serif;font-variant-numeric:tabular-nums}
.summe div{display:flex;justify-content:space-between;gap:16px;padding:7px 0}
.summe div.total{border-top:2px solid var(--ink);margin-top:8px;padding-top:12px}
.summe div.total dt{font:700 15px 'Nunito Sans';color:var(--ink)}
.summe div.total dd{font:700 22px 'Bitter',Georgia,serif}

/* --- Lernbereich: Seitenleiste statt Tab-Leiste ----------------------
   In der App sind die fünf Tabs unten, weil dort der Daumen liegt. Am
   Laptop liegt dort nichts — die Navigation gehört an den Rand, wo sie
   immer sichtbar bleibt und keinen Platz vom Inhalt nimmt. */
.werkflaeche{display:grid;grid-template-columns:248px minmax(0,1fr);
  gap:0;min-height:calc(100vh - 68px);max-width:var(--spalte);margin:0 auto}
.seitenleiste{border-right:1px solid var(--line);padding:28px 18px 28px var(--rand);
  position:sticky;top:68px;align-self:start;max-height:calc(100vh - 68px);
  overflow-y:auto}
.seitenleiste nav a{display:flex;align-items:center;gap:12px;padding:11px 12px;
  border-radius:11px;color:var(--ink5);font:600 14px 'Nunito Sans'}
.seitenleiste nav a:hover{background:var(--tan1);color:var(--ink);text-decoration:none}
.seitenleiste nav a[aria-current=page]{background:var(--ink);color:var(--cream)}
.seitenleiste nav a[aria-current=page] svg{color:var(--cream)}
.seitenleiste nav a svg{flex:none;color:var(--ink7)}
.arbeitsflaeche{padding:28px var(--rand) 64px}

/* Beim Textverständnis stehen Lesetext und Frage nebeneinander, sobald
   Platz da ist. Auf dem Telefon schöbe der Text die Frage aus dem Bild —
   dort bleibt er einklappbar darüber. */
.mit-lesetext{display:grid;gap:28px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start}
.lesetext{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:22px;max-height:calc(100vh - 160px);overflow-y:auto;
  font:400 15px/1.68 'Nunito Sans';color:var(--ink5)}
/* `pre-wrap` stand hier, solange der Text roh ausgegeben wurde. Jetzt
   kommen echte Absätze aus `lesetextHtml`, und pre-wrap risse die
   Zeilenumbrüche der Vorlage mit ins Layout. */
.lesetext h4{margin-bottom:4px;color:var(--ink)}
.lesetext p{margin:0 0 10px}
/* Der Abschnittsbuchstabe steht fett in einer schmalen Spalte links,
   wie auf dem Prüfungsblatt. */
.lt-abschnitt{display:flex;gap:10px;margin-bottom:6px}
.lt-buchstabe{flex:none;width:16px;font:700 15px 'Bitter',Georgia,serif;
  color:var(--ink)}

/* --- Selbsttest, Standortbestimmung und Aufsatz -----------------------
   Bauteile, die es nur im Lernbereich gibt. Alle Werte kommen aus den
   Tokens; keine Farbe steht hier als Zahl (§5.3).                     */

/* Die Uhr. Sie liegt neben dem Stand «3 von 12» und wird in den letzten
   fünf Minuten rot — wer den Blick auf der Aufgabe hat, soll die Zeit am
   Rand bemerken, ohne hinzusehen. */
.uhr{font:700 14px/1 'Bitter',Georgia,serif;font-variant-numeric:tabular-nums;
  background:var(--tan1);color:var(--ink);border:1px solid var(--line);
  border-radius:9px;padding:5px 9px;margin-left:10px;display:inline-block}
.uhr.knapp{background:var(--red1);border-color:var(--red);color:var(--red)}

/* Ein schwaches Oberthema im Selbsttest-Ergebnis: weniger als die Hälfte.
   Die Farbe ist die Aussage, nicht Schmuck. */
.bar>i.schwach{background:var(--red)}

.raster.drei{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

/* Die Teilaufträge eines Aufsatzthemas zum Abhaken. Nicht `.haken`: Das
   ist das Kästchen der Formulare und trägt ein echtes <input>. Zwei
   Regeln unter demselben Namen heben sich früher oder später auf. */
.teilhaken{display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;
  background:none;border:0;padding:6px 0;cursor:pointer;
  font:400 14px/1.45 'Nunito Sans';color:var(--ink5)}
.teilhaken .kasten{width:20px;height:20px;flex:none;border:1.5px solid var(--ink3);
  border-radius:5px;display:flex;align-items:center;justify-content:center;
  color:var(--cream);margin-top:1px}
.teilhaken.an .kasten{background:var(--ink);border-color:var(--ink)}
.teilhaken.an{color:var(--ink)}

/* Die Stufe eines Korrektur-Kriteriums. Beschreibend, nie eine Ziffer:
   Eine Note sagt einer Vierzehnjährigen, wo sie steht, aber nicht, was
   sie tun soll (§9). */
.stufe{display:inline-block;margin-top:10px;border-radius:8px;padding:4px 10px;
  font:700 12px/1.3 'Nunito Sans'}
.stufe-rot{background:var(--red1);color:var(--red)}
.stufe-gelb{background:var(--gelb1);color:var(--gelb)}
.stufe-gruen{background:var(--green1);color:var(--green)}

.kuerzel{width:26px;height:26px;flex:none;border-radius:50%;background:var(--tan1);
  display:flex;align-items:center;justify-content:center;
  font:700 12px/1 'Nunito Sans';color:var(--tan6)}

/* Der bessere Vorschlag zu einer Textstelle. Grün, weil er das Richtige
   zeigt — dieselbe Bedeutung wie bei einer richtigen Antwort. */
.besser{background:var(--green1);border-radius:10px;padding:12px;margin-top:10px;
  font:400 14px/1.55 'Nunito Sans';color:var(--ink)}

/* Die Wochenlinie des Lernpfads: eine senkrechte Linie von heute bis zur
   Prüfung. Die laufende Woche ist markiert, vergangene treten zurück —
   aber sie werden nicht durchgestrichen: Es gibt keinen Rückstand
   aufzuholen (§5.5). */
.wochenlinie{border-left:2px solid var(--line);padding-left:20px;
  display:flex;flex-direction:column;gap:16px}
.woche{position:relative}
.woche::before{content:"";position:absolute;left:-27px;top:6px;width:11px;height:11px;
  border-radius:50%;background:var(--tan1);border:2px solid var(--line)}
.woche.jetzt::before{background:var(--ink);border-color:var(--ink)}
.woche.vorbei{opacity:.55}

/* Verbesserungen, Punkt 17: Ein Aufgabenset innerhalb einer Woche ist
   anklickbar und führt in genau diese Übung. Vorher startete nur der eine
   Knopf oben eine vorgegebene — innerhalb der Woche entscheidet die
   Schülerin selbst, womit sie anfängt. Es ist ein `button`, kein `div`:
   sonst erreicht ihn die Tastatur nicht. */
.pfadthema{display:flex;align-items:flex-start;gap:8px;width:100%;
  margin-top:8px;padding:4px 2px;background:none;border:0;cursor:pointer;
  color:var(--ink5);text-align:left;font:inherit}
.pfadthema:hover{color:var(--ink)}
.pfadthema:focus-visible{outline:2px solid var(--tan6);outline-offset:2px;border-radius:8px}
.pfadpunkt{flex:none;width:4px;height:4px;margin-top:9px;border-radius:50%;
  background:var(--tan)}
.pfadpunkt.fertig{background:var(--green)}

.liste{margin:0;padding-left:20px}
.liste li{font:400 14px/1.6 'Nunito Sans';color:var(--ink5);margin-bottom:8px}

/* Eine Wahlkarte im Selbsttest und in der Standortbestimmung. `.wahl`
   kommt aus der Antwortfläche; hier steht ein ganzer Block darin, darum
   oben ausgerichtet statt mittig. */
.stapel .wahl{align-items:flex-start}

/* --- Schmale Ansicht: die App ---------------------------------------- */
@media (max-width:900px){
  .hauptnav{display:none;position:absolute;top:68px;left:0;right:0;
    background:var(--card);border-bottom:1px solid var(--line);flex-direction:column;
    padding:8px 12px 14px;gap:2px}
  .hauptnav.offen{display:flex}
  .hauptnav a{padding:13px 14px}
  .menuknopf{display:flex;align-items:center;justify-content:center}
  .kopf .btn.klein{display:none}
  .kopf-innen{gap:0}
  .band{padding:44px var(--rand)}
  .aufmacher{padding:44px var(--rand) 36px}
  h1{font-size:29px;letter-spacing:-.6px}
  h2{font-size:23px}
  .zweispalt,.rechner{grid-template-columns:1fr;gap:28px}
  .fuss .innen{grid-template-columns:1fr 1fr}
  .werkflaeche{grid-template-columns:1fr;min-height:0}
  .seitenleiste{position:static;max-height:none;border-right:none;
    border-bottom:1px solid var(--line);padding:12px var(--rand)}
  .seitenleiste nav{display:flex;gap:4px;overflow-x:auto}
  .seitenleiste nav a{flex-direction:column;gap:4px;padding:8px 12px;font-size:11px;
    white-space:nowrap}
  .arbeitsflaeche{padding:20px var(--rand) 48px}
  .mit-lesetext{grid-template-columns:1fr}
  .lesetext{max-height:220px}
  .feldpaar{grid-template-columns:1fr}
  .btn{width:100%}
  .knopfreihe .btn{width:auto;flex:1 1 auto;min-width:180px}
  .schritt span{display:none}
  .schritt+.schritt::before{width:14px;margin-right:10px}
  .schritt{padding-right:10px}
}
@media (max-width:560px){
  .fuss .innen{grid-template-columns:1fr}
  .belege{gap:20px}
}

/* --- Vorschau-Streifen -----------------------------------------------
   Nur im Betrieb ohne Server. Er sitzt über allem, weil eine
   Musterrechnung, die man für echt hält, teuer wird. */
.demostreifen{display:flex;align-items:center;gap:10px;
  background:var(--gelb1);color:var(--gelb8);padding:9px var(--rand);
  font:400 13px/1.45 'Nunito Sans';border-bottom:1px solid var(--demo-linie)}
.demostreifen b{color:var(--demo-text)}
.demostreifen svg{flex:none}
@media print{.demostreifen{display:none}}

/* --- Unternavigation --------------------------------------------------
   Innerhalb einer Seite, etwa in der Schulverwaltung. Sie sieht aus wie
   die Hauptnavigation, ist aber keine: Die wird auf schmalen Schirmen
   zum Menü, diese bleibt und rollt notfalls waagrecht. */
.unternav{display:flex;gap:4px;margin:32px 0 22px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;padding-bottom:2px}
.unternav a{padding:9px 14px;border-radius:10px;font:600 14px 'Nunito Sans';
  color:var(--ink5);white-space:nowrap}
.unternav a:hover{background:var(--tan1);color:var(--ink);text-decoration:none}
.unternav a[aria-current=page]{background:var(--ink);color:var(--cream)}

/* --- Rechtstexte -----------------------------------------------------
   Aus Markdown erzeugt. Eine ruhige Spalte, weil hier niemand etwas
   sucht, sondern liest. */
.rechtstext h1{font-size:29px;margin-bottom:6px}
.rechtstext h2{font-size:23px;margin:36px 0 10px}
.rechtstext h3{font-size:17px;margin:26px 0 8px}
.rechtstext p,.rechtstext li{font:400 15px/1.68 'Nunito Sans';color:var(--ink5)}
.rechtstext p{margin:0 0 14px}
.rechtstext ul,.rechtstext ol{margin:0 0 16px;padding-left:22px}
.rechtstext li{margin-bottom:6px}
.rechtstext b,.rechtstext strong{color:var(--ink)}
.rechtstext code{background:var(--tan1);padding:1px 6px;border-radius:5px;
  font:400 13px 'Nunito Sans';color:var(--ink7)}
.rechtstext blockquote{border-left:3px solid var(--tan3);margin:0 0 16px;
  padding:2px 0 2px 16px;color:var(--ink5)}
.rechtstext table{width:100%;border-collapse:collapse;margin:0 0 20px;
  font:400 14px/1.5 'Nunito Sans'}
.rechtstext th{text-align:left;font:700 11px/1.25 'Nunito Sans';letter-spacing:.06em;
  text-transform:uppercase;color:var(--tan6);padding:0 12px 9px 0;
  border-bottom:1px solid var(--line)}
.rechtstext td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);
  color:var(--ink5);vertical-align:top}

/* Die beanstandete Stelle in der Aufsatzkorrektur. Rot ist die
   Fehlerfarbe (§5.3); kursiv allein hob sie zu wenig ab. */
.fehlerstelle{margin-top:10px;font-style:italic;color:var(--red);
  background:var(--red1);border-radius:8px;padding:8px 10px}

/* --- Rückmeldungen Phase 1 -------------------------------------------
   Navigation (A), Lauf (G3), Tipps (B), Lesetext (G4, G5), Brüche (F),
   Fehler (I), Eltern (J), Korrektur (K), Bild (L). Nur Tokens.         */
.mehrleiste{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.mehrleiste .eyebrow{padding:0 12px}
.mehrleiste a{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:11px;
  color:var(--ink5);font:600 13px 'Nunito Sans'}
.mehrleiste a:hover{background:var(--tan1);color:var(--ink);text-decoration:none}
.mehrleiste a[aria-current=page]{background:var(--tan1);color:var(--ink)}
.mehrleiste a svg{flex:none;color:var(--ink7)}
.zurueckpfeil{padding-left:0;margin-bottom:10px}
/* In einem Lauf gibt es keine Tabs (A). */
.werkflaeche.im-lauf{grid-template-columns:minmax(0,1fr)}
.werkflaeche.im-lauf .seitenleiste{display:none}
.kreuzknopf{width:44px;height:44px;padding:0;justify-content:center}

/* Die Aufgabenübersicht: Balken 14 × 6, Radius 3, Abstand 4. */
.marken{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 4px}
.marke{width:14px;height:6px;border-radius:3px;border:0;padding:0;background:var(--tan1)}
.marke.jetzt{background:var(--ink)}
.marke.bearbeitet{background:var(--tan)}
.marke.uebersprungen{background:var(--red)}
.marke:not([disabled]){cursor:pointer}

/* Die Blätter im Lauf. Einzige Stelle mit Schatten (§5.3). */
.blatthintergrund{position:fixed;inset:0;background:rgba(58,29,10,.18);z-index:60}
.blatt{position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--card);
  border-radius:20px 20px 0 0;padding:14px var(--rand) 28px;max-width:640px;margin:0 auto;
  box-shadow:0 -12px 24px rgba(58,29,10,.07)}
.blatt .griff{width:40px;height:5px;border-radius:3px;background:var(--tan3);margin:0 auto 16px}

/* Tipp-Karte mit Blättern. */
.tippkarte{background:var(--gelb1);border:1px solid var(--gelb);border-radius:14px;
  padding:14px 16px;margin:0 0 18px}
.tippkarte .eyebrow{color:var(--gelb)}
.tippknopf{background:var(--gelb1);border:1px solid var(--gelb);color:var(--ink);padding:0 14px}
.pfeilknopf{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);
  background:var(--card);color:var(--ink7);cursor:pointer;font:700 17px/1 'Bitter',Georgia,serif;
  display:inline-flex;align-items:center;justify-content:center;padding:0}
.pfeilknopf[disabled]{color:var(--tan3);cursor:default}

/* Lesetext-Karte. */
.lt-kopf{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;
  padding:0 0 10px;cursor:pointer;text-align:left;font:inherit;color:inherit}
.lt-pfeil{display:inline-flex;transition:transform .15s;color:var(--ink3)}
.lt-pfeil.offen{transform:rotate(90deg)}
.lt-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 12px}
.lt-leiste .chip{cursor:pointer}
.lt-punkt{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);cursor:pointer;padding:0}
.lt-punkt.an{border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--card)}
.lt-wort{border-radius:3px}
.markiermodus .lt-wort{cursor:pointer}
.markiermodus .lt-wort:hover{outline:1px dashed var(--tan3)}

/* Brüche zweizeilig (F). */
.bruch{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;
  line-height:1.05;margin:0 2px;font-size:.9em}
.bruch i{font-style:normal;border-bottom:1.5px solid currentColor;padding:0 3px}
.bruch b{font-weight:inherit;padding:0 3px}

/* Meine Fehler (I). */
.chipreihe{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chipreihe .chip{cursor:pointer;height:34px}
.fehlergruppe{padding:0;overflow:hidden}
.gruppenkopf{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;
  padding:16px;cursor:pointer;font:inherit;color:inherit}
.zahlabzeichen{min-width:28px;height:24px;border-radius:12px;background:var(--red1);color:var(--red);
  font:700 12px/24px 'Nunito Sans';text-align:center;padding:0 8px}
.gruppeninhalt{border-top:1px solid var(--line);padding:4px 16px 12px}
.fehlereintrag{padding:14px 0;border-bottom:1px solid var(--line)}
.fehlereintrag:last-child{border-bottom:0}
.erklaerung{background:var(--paper);border-radius:10px;padding:10px 12px;margin-top:8px;
  font:400 13px/1.5 'Nunito Sans';color:var(--ink5)}
.zeilenlink{display:flex!important;align-items:center;justify-content:space-between;gap:12px}

/* Eltern-Report (J). */
.kz-details{border-top:1px solid var(--line);margin-top:12px;padding-top:10px}
.kz-zeile{margin-bottom:6px}

/* Korrektur (K) und Bild (L). */
.korrekturtext{white-space:pre-wrap;font:400 15px/1.65 'Nunito Sans';color:var(--ink)}
/* Eine Stelle trägt den Leuchtstift ihrer Fehlerart (Inline-Stil aus
   STELLENFARBE); der Text bleibt dunkel und lesbar. */
.stelle{background:var(--line);border:0;padding:0 1px;border-radius:3px;font:inherit;
  color:var(--ink);cursor:pointer}
/* Ein Tipp ist kein Fehler: kein Leuchtstift, nur gepunktet unterstrichen
   in der Farbe seiner Art (zweite Rückmeldung Oktober 2026). */
.stelle.tipp{background:transparent;border-radius:0;border-bottom:2px dotted var(--line)}
.stellefeld{margin-top:14px;border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--paper)}
.bildkarte{padding:0;overflow:hidden;margin-top:12px}
.bildkarte img{display:block;width:100%;height:auto}

/* Am Telefon liegt die Tab-Leiste unten, beim Daumen (§5.6). */
@media (max-width:900px){
  .werkflaeche .seitenleiste{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:50;
    background:var(--card);border-top:1px solid var(--line);border-bottom:0;padding:8px 8px 14px}
  .seitenleiste .tableiste{display:flex;justify-content:space-around;gap:0;overflow:visible}
  .seitenleiste .tableiste a{flex:1;flex-direction:column;gap:4px;padding:8px 2px;font-size:11px;
    white-space:nowrap}
  .seitenleiste .tableiste a[aria-current=page]{background:transparent;color:var(--ink)}
  .seitenleiste .tableiste a[aria-current=page] svg{color:var(--ink)}
  .mehrleiste{display:none}
  .werkflaeche:not(.im-lauf) .arbeitsflaeche{padding-bottom:110px}
}


/* ======================================================================
   Auf dem Telefon zuerst
   ======================================================================
   Gemessen an 320 px, der schmalsten Breite, die noch vorkommt (iPhone SE
   im Hochformat). Bei 24 px Seitenrand bleiben 272 px fuer den Inhalt.
   Was hier steht, sind die Stellen, an denen die Seite darueber hinaus
   ging — nicht Kosmetik, sondern seitwaerts scrollende Seiten und halbe
   Eingabefelder.                                                       */

/* Lange Wortketten sprengen sonst die Spalte: Adressen wie
   info@studyswiss.ch, Zugangscodes, Aufgabenkennungen wie
   `rabatt-rueckwaerts:8812`. Bricht eine davon nicht um, scrollt die
   GANZE Seite seitwaerts, und niemand sieht, woran es liegt. */
body{overflow-wrap:break-word}

@media (max-width:560px){
  /* `.btn` traegt `white-space:nowrap`, damit eine Beschriftung nicht
     mitten im Wort bricht. Auf 272 px ist das die falsche Wahl:
     «Unterbrochene Standortbestimmung fortsetzen» ist breiter als das
     Geraet, und der Knopf schiebt die Seite auf. Hier darf er umbrechen
     und dafuer hoeher werden; 54 px bleibt die Mindesthoehe, damit das
     Ziel fuer einen Daumen gross genug ist. */
  .btn{white-space:normal;height:auto;min-height:54px;padding:14px 18px;
    line-height:1.3;text-align:center}
  .knopfreihe{flex-direction:column;align-items:stretch}
  .knopfreihe .btn{min-width:0;width:100%}

  /* Zwei Felder nebeneinander sind auf einem Telefon zwei halbe Felder.
     Eine PLZ mag hineinpassen, ein Ortsname nicht. */
  .feldpaar,.feldpaar.schmal-breit{grid-template-columns:1fr;gap:0}

  /* Eine Tabelle bricht nicht um. Statt die Seite zu verbreitern,
     scrollt die Tabelle fuer sich: `display:block` macht sie zu einem
     eigenen Kasten mit eigenem Scrollbalken. Die Seite bleibt ruhig. */
  table,table.t{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
    max-width:100%}

  /* Chips standen in einer Zeile und schoben sich hinaus. */
  .reihe{flex-wrap:wrap}

  /* Ein Chip darf umbrechen, wenn er einen ganzen Satz traegt.

     `white-space:nowrap` ist fuer einen Chip richtig — «3 von 8» soll
     nicht auf zwei Zeilen fallen. Auf dem Themenschirm traegt er aber
     «0 von 15 Themen · 18 Punkte in der Pruefung», und das sind 265 px
     Mindestbreite. Auf einem iPhone SE (320 px) bleiben nach Seitenrand
     und Kartenpolster 272 px: Die Karte fordert 305, das Raster gibt
     nach, und die ganze SEITE wird 355 breit — man muss waagrecht
     schieben, auf jedem Schirm des Lernbereichs.

     Gemessen mit einem echten Browser am 21. September 2026. Kein Grund,
     den Satz zu kuerzen: Die Punktzahl gehoert dorthin (§6, Screen 24).
     Er darf nur umbrechen. */
  .chip{white-space:normal;height:auto;min-height:28px;padding-top:4px;
    padding-bottom:4px}
  /* Die Ausnahme von der Ausnahme: Wo ein Chip ein Bedienelement ist,
     bleibt er einzeilig — eine Wahlmoeglichkeit, die die Hoehe wechselt,
     verschiebt beim Antippen alles darunter. */
  .lt-leiste .chip,.zeilenoptionen .chip,.chipreihe .chip{white-space:nowrap}
}

/* Das iPad im Hochformat (768 px) faellt unter dieselbe Regel wie ein
   Telefon: Bedient wird beides mit dem Finger, und die Tab-Leiste unten
   ist dort der kuerzere Weg als eine Seitenleiste am Rand. Im Querformat
   (1024 px) greift wieder der Schreibtisch-Aufbau. */


/* ---------------------------------------------------------------------
   Reiter auf der Kontoseite

   Zwei Wege hinein, und der eine gilt für ein Kind mit einem Zettel, der
   andere für alle übrigen. Untereinander gestellt müsste das Kind an
   vier Anmeldekästen vorbeiscrollen, bis seiner kommt.

   Die Höhe ist 48 px: Das ist die kleinste Fläche, die ein Daumen auf
   einem Tablet zuverlässig trifft. Darunter verfehlt man sie, und ein
   Kind, das sich anmelden könnte, scheitert an der Bedienung (§4.5).
   --------------------------------------------------------------------- */
.reiter{display:flex;gap:6px;background:var(--tan1);border:1px solid var(--line);
  border-radius:var(--r-knopf);padding:4px}
.reiter button{flex:1 1 0;min-height:48px;border:0;border-radius:calc(var(--r-knopf) - 4px);
  background:transparent;color:var(--ink3);font:700 14px 'Nunito Sans';cursor:pointer;
  transition:background .15s ease,color .15s ease}
.reiter button:hover{color:var(--ink)}
.reiter button.an{background:var(--card);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.reiter button:focus-visible{outline:2px solid var(--tan6);outline-offset:2px}

/* Ein Wort soll nicht mitten im Wort brechen, und eine Überschrift soll
   nicht mit einem einzelnen Wort auf der zweiten Zeile enden. Das ändert
   KEINE Schriftgrösse — die stehen im Design-System und bleiben (§5.3);
   es ändert nur, wo umgebrochen wird. */
h1,h2,h3,.eyebrow{text-wrap:balance}
p,li,.bd,.bd14,.sm{text-wrap:pretty}

/* «Hilfe / Fehler melden» — auf jeder Seite unten rechts (21. September
   2026). Am Telefon im Lernbereich liegt dort die Tab-Leiste; der Knopf
   rückt darüber. Das Blatt ist dasselbe wie im Lauf (`.blatt`). */
.hilfeknopf{position:fixed;right:16px;bottom:16px;z-index:55;display:inline-flex;align-items:center;
  gap:8px;height:44px;padding:0 16px;border-radius:22px;border:1px solid var(--tan3);
  background:var(--card);color:var(--ink);font:700 13px/1 'Nunito Sans';cursor:pointer}
.hilfeknopf svg{color:var(--tan6)}
.blatt.hilfeblatt{max-height:88vh;overflow:auto}
@media (max-width:900px){
  .hilfeknopf{padding:0;width:44px;justify-content:center}
  .hilfeknopf span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
@media print{.hilfeknopf{display:none}}

/* Ziehen über mehrere Wörter: der Bereich, der gleich markiert wird. */
.markiermodus{user-select:none;-webkit-user-select:none}
.lt-wort.lt-zug{outline:2px solid var(--tan);outline-offset:0}

/* Fortschritt: Zehnerblöcke nebeneinander, zwei je Zeile. */
.zehnerbloecke{margin-top:12px;display:flex;flex-wrap:wrap;column-gap:16px;row-gap:4px;
  max-width:328px}   /* zwei Blöcke à 156 px; passt es nicht, bricht der zweite um */
.zehnerblock{display:grid;grid-template-columns:repeat(10,13px);gap:5px;align-content:start}

/* Kanton und Schule oben rechts im Lernbereich: klein wie der Hilfe-Knopf. */
.kantonchip{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px 0 8px;
  margin-left:8px;border:1px solid var(--tan3);border-radius:18px;background:var(--card);
  color:var(--ink);font:700 12px/1 'Nunito Sans';cursor:pointer;white-space:nowrap;flex:none}
.kantonchip:hover{background:var(--tan1)}
.kantonchip .wappen{width:20px;height:20px;border-radius:4px}
.kantonchip .kc-schule{color:var(--tan6)}
.kantonchip .kc-kanton+.kc-schule::before{content:"·";margin-right:6px;color:var(--ink3)}
body:has(.werkflaeche.im-lauf) .kantonchip{display:none}
@media (max-width:900px){
  .kantonchip{height:34px;padding:0 10px 0 6px}
  .kantonchip .kc-kanton{display:none}          /* am Telefon: Wappen und Schule */
  .kantonchip .kc-kanton+.kc-schule::before{content:none}
}
@media print{.kantonchip{display:none}}

/* Übersicht für Schulen: das Druckblatt mit den Codes zum Zerschneiden. */
.nur-druck{display:none}
@media print{
  body.druckt .kopf, body.druckt .fuss, body.druckt .hilfeknopf,
  body.druckt main > :not(#druckblatt), body.druckt .band{display:none !important}
  body.druckt #druckblatt{display:block !important}
}

/* Grundbaustein hinter «Diese Aufgabe ist mir zu schwer». Die Wahlzeilen
   im Blatt sind ganze Knöpfe, mindestens 54 hoch — ein Daumen trifft sie. */
.zuschwer-wahl{display:flex;width:100%;text-align:left;min-height:54px;align-items:center;
  border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin:0 0 8px;
  background:var(--card);color:var(--ink);font:inherit;cursor:pointer}
.zuschwer-wahl:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.blatt[data-blatt="zuschwer"]{max-height:85vh;overflow-y:auto}
.merkkasten{background:var(--tan1);border-radius:16px;padding:16px}
.merkkasten .bd14{color:var(--ink);margin:0 0 6px}
.fremd{font-weight:700;color:var(--ink)}
/* Rückmeldung Oktober 2026: Auf der dunklen Karte «Wozu du das brauchst»
   stand «avoir» und «être» in Dunkelbraun auf Dunkelbraun und war kaum zu
   sehen. Auf dunklem Grund trägt eine fremdsprachige Stelle die helle
   Schrift ihrer Umgebung und hebt sich nur durch das Fett ab. */
.dunkel .fremd,.band.dunkelband .fremd{color:var(--cream)}
/* Das Fach eines Vorschlags, oben rechts (Rückmeldung Oktober 2026). */
.fachetikett{flex:none;font:700 11px/1 'Nunito Sans',sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);background:var(--tan1);border:1px solid var(--tan3);
  border-radius:9px;padding:6px 9px;white-space:nowrap}

/* Grundbausteine: Satzbausteine, Zeichnungen, Tutor, Akzent-Leiste.
   Die Satzbausteine tragen die vier Markierfarben (§5.3) und darunter
   ihren Namen — die Bedeutung hängt nie allein an der Farbe. */
.gb-satz{display:flex;flex-wrap:wrap;gap:8px 6px;align-items:flex-start;margin:0;
  font:500 17px/1.3 'Bitter',Georgia,serif;color:var(--ink)}
.gb-baustein{display:inline-flex;flex-direction:column;align-items:center;border-radius:9px;padding:6px 9px 4px}
.gb-baustein small{font:700 10px/1.3 'Nunito Sans',sans-serif;letter-spacing:.06em;color:var(--ink5);margin-top:2px}
.gb-baustein.gb-rest{padding:6px 2px 4px}
.gb-endung{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.gb-satz-de{font:400 13px/1.45 'Nunito Sans',sans-serif;color:var(--ink3);margin:6px 0 0}
.gb-zeichnung{display:flex;justify-content:center;overflow-x:auto}
.gb-zeichnung svg,.gb-bild{max-width:100%;height:auto}
.gb-zeichnung [data-stueck]:focus{outline:2px solid var(--ink)}
.gb-pizzen{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.gb-pizza-klein{margin:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.gb-pizza-klein figcaption{font:700 12px 'Nunito Sans',sans-serif;color:var(--ink5)}
.tutorkarte{background:var(--card);border:1px solid var(--tan);border-radius:16px;padding:12px 14px}
.akzentleiste{display:flex;flex-wrap:wrap;gap:6px}
.akzent{min-width:44px;height:44px;border-radius:9px;border:1px solid var(--line);background:var(--card);
  color:var(--ink);font:600 18px 'Bitter',Georgia,serif;cursor:pointer}
.akzent:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* «Zu schwer?» oben rechts neben «Tipp»: in den Brauntönen der Marke, so
   gross wie der Tipp-Knopf, mit einem Puzzleteil statt eines Fragezeichens
   (das trägt schon «Hilfe»). */
.kopfknoepfe{display:flex;gap:8px;align-items:center}
.zuschwer-knopf{background:var(--tan1);border:1.6px solid var(--tan);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 12px}
.zuschwer-knopf:hover{background:var(--tan3)}

/* Eine Klappkarte: Titel mit Pfeil rechts, der Inhalt klappt darunter auf
   (Rückmeldung Oktober 2026, Präsentation und Wortschatz). Der Pfeil zeigt
   nach rechts und dreht sich beim Öffnen nach unten. */
details.klappe > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  min-height:28px}
details.klappe > summary::-webkit-details-marker{display:none}
details.klappe .klappe-pfeil{flex:none;display:inline-flex;transition:transform .15s;color:var(--ink5)}
details.klappe[open] .klappe-pfeil{transform:rotate(90deg)}
details.klappe[open] > summary{margin-bottom:6px}

/* Grundbaustein, Rückmeldung Oktober 2026: kurze Abschnitte mit je einer
   Darstellung, Rechnung, Tabelle, Konjugation, Regler und der Merkkasten
   als Aufzählung. Dieselben Klassen in Vorschau und Website. */
.gb-absatz + .gb-absatz{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.gb-absatz-text{margin:0;font:400 15px/1.6 'Nunito Sans',sans-serif;color:var(--ink5);white-space:pre-line}
.gb-absatz .gb-zeichnung{margin-top:10px}
.gb-rechnung{display:inline-flex;flex-direction:column;gap:4px;background:var(--paper);border:1px solid var(--line);
  border-radius:12px;padding:10px 16px;font:500 16px/1.4 'Bitter',Georgia,serif;color:var(--ink);
  font-variant-numeric:tabular-nums;max-width:100%}
.gb-rz{white-space:normal}
/* Zweite Rückmeldung Oktober 2026: Rechnungen mit Weissraum — jede Zeile ein
   Schritt, Brüche untereinander, Luft um Zahlen und Zeichen. */
.gb-rechnung{gap:12px;padding:14px 22px;line-height:1.8}
.gb-rechnung .bruch{font-size:.95em;margin:0 .2em}
.gb-umformung{display:block;margin:6px 0}
/* «So kommst du hin» Zeile für Zeile (Rückmeldung Oktober 2026). */
.rechenweg{margin-top:8px}
.rw-schritt{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px}
.rw-schritt:last-child{margin-bottom:0}
.rw-nr{width:22px;height:22px;border-radius:50%;background:var(--tan1);flex:none;display:flex;
  align-items:center;justify-content:center;font:700 11px 'Nunito Sans',sans-serif;color:var(--tan6)}
.rw-inhalt{flex:1;min-width:0}
.rw-rechnung{display:flex;margin-top:8px;padding:10px 14px;gap:8px;font-size:15px;max-width:100%}
.rw-rechnung .gb-rz{white-space:nowrap}
.rw-bild{margin-top:10px}
.rw-bild svg{max-width:100%;height:auto}
.gb-rz-ergebnis{font-weight:700;border-top:1.5px solid var(--ink);padding-top:4px;margin-top:2px}
.gb-tabelle{border-collapse:collapse;font:400 14px/1.4 'Nunito Sans',sans-serif;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.gb-tabelle th{font:700 11px 'Nunito Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--tan6);
  text-align:left;padding:8px 12px;border-bottom:1.5px solid var(--tan3)}
.gb-tabelle td{padding:7px 12px;border-bottom:1px solid var(--line)}
.gb-tabelle tr:last-child td{border-bottom:0}
.gb-konjugation{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 16px;min-width:220px}
.gb-k-kopf{font:600 17px 'Bitter',Georgia,serif;color:var(--ink);margin-bottom:6px}
.gb-k-kopf .sm{font:400 13px 'Nunito Sans',sans-serif;color:var(--ink3)}
.gb-k-tabelle{border-collapse:collapse;font:500 17px/1.55 'Bitter',Georgia,serif;color:var(--ink)}
.gb-k-person{color:var(--ink5);padding:2px 14px 2px 0;text-align:right;font-weight:400}
.gb-k-endung{background:#CFE0F2;border-radius:4px;padding:0 3px;margin-left:1px;font-weight:700;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.gb-vorlesen{margin-top:10px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;
  border-radius:9px;border:1px solid var(--tan3);background:var(--card);color:var(--ink);
  font:700 13px 'Nunito Sans',sans-serif;cursor:pointer}
.gb-regler{width:100%;max-width:460px;border:1px solid var(--tan3);border-radius:14px;padding:12px 14px;background:var(--card)}
.gb-regler .gb-zeichnung{margin:0}
.gb-regler-text{font:400 14px/1.55 'Nunito Sans',sans-serif;color:var(--ink5);margin:8px 0 0}
.gb-regler-text b{color:var(--ink)}
.gb-regler-zeile{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;margin-top:10px;
  font:700 13px 'Nunito Sans',sans-serif;color:var(--ink)}
.gb-regler-zeile input{grid-column:1/-1;width:100%;accent-color:#3A1D0A;min-height:28px;margin:0}
.gb-regler-zeile output{font:600 14px 'Bitter',Georgia,serif;color:var(--ink)}
.gb-regler-hilfe{font:400 12px/1.45 'Nunito Sans',sans-serif;color:var(--ink3);margin:8px 0 0}
.gb-merkliste{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:10px}
.gb-merkliste li{font:400 14px/1.5 'Nunito Sans',sans-serif;color:var(--ink)}
.gb-merkpunkt > summary{list-style:none;cursor:pointer;display:flex;gap:8px;align-items:flex-start}
.gb-merkpunkt > summary::-webkit-details-marker{display:none}
.gb-merk-text{flex:1;min-width:0}
.gb-merk-pfeil{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--tan3);display:inline-flex;
  align-items:center;justify-content:center;transition:transform .15s;font:700 16px/1 'Nunito Sans',sans-serif;
  color:var(--ink5);background:var(--card)}
.gb-merkpunkt[open] .gb-merk-pfeil{transform:rotate(90deg)}
.gb-merkpunkt .gb-zeichnung{margin-top:8px}
.gb-merk-hilfe{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gb-satz-zeichnung{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px}

/* Rückmeldung Oktober 2026, Punkte 18 und 21: die deutsche Übersetzung
   unter einem englischen oder französischen Checklistenpunkt. */
.teilhaken small.uebersetzung{display:block;font-size:12px;line-height:1.45;color:var(--ink3);margin-top:2px}

/* Französisch mündlich in fünf Hauptbereichen (zweite Rückmeldung Oktober
   2026). Hauptbereich → Unterbereich → Inhalt, jede Ebene klappt auf. */
.ml-haupt > summary{gap:14px}
.ml-nr{font:600 24px/1 'Bitter',Georgia,serif;color:var(--tan6);flex:none}
.ml-inhalt{padding-top:10px}
.ml-haupt .ml-inhalt > .stapel > details{margin-top:8px}
.ml-thema,.ml-bild{border-top:1px solid var(--line);padding-top:8px;margin-top:8px}
.ml-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px;
  border-top:1px solid var(--line);padding-top:8px}
.ml-zeile .ml-de{flex:1 1 140px;min-width:0}
.ml-zeile .ml-fr{flex:1 1 160px;min-width:0;color:var(--ink)}
/* Zwei Spalten erst ab 420 px (§3.1.1); darunter steht Deutsch über der Fremdsprache. */
@media (max-width:420px){.ml-zeile .ml-de,.ml-zeile .ml-fr{flex-basis:100%}}
.ml-stand{width:30px;height:30px;flex:none;border-radius:50%;border:1.5px solid var(--line);background:var(--card);
  font:600 15px/1 'Nunito Sans',sans-serif;cursor:pointer;color:var(--ink3)}
.ml-stand.ueben{color:var(--gelb7);border-color:var(--gelb);background:var(--gelb1)}
.ml-stand.kann{color:var(--green);border-color:var(--green);background:var(--green1)}
.ml-merk{color:var(--ink3)}
.ml-merk.an{color:var(--tan6)}
.ml-kann{margin-top:4px}
.ml-ablauf{margin:10px 0;padding-left:22px}
.ml-ablauf li{margin-bottom:4px}

/* Der Lerntrainer: eine Karte zum Umdrehen, ein Raster zum Zuordnen. */
.karteikarte{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;
  min-height:180px;margin-top:10px;padding:28px 20px;border-radius:var(--r-karte);border:1px solid var(--line);
  background:var(--card);cursor:pointer;text-align:center}
.karteikarte.um{background:var(--tan1);border-color:var(--tan3)}
.karteikarte-text{font:600 22px/1.35 'Bitter',Georgia,serif;color:var(--ink)}
.zuordnen-raster{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.zuordnen-raster .wahl{min-height:54px;padding:10px 12px;font-size:15px}
.wahl.fertig{border-color:var(--green);background:var(--green1);color:var(--green);cursor:default}
.wahl.daneben{border-color:var(--red);background:var(--red1)}

/* Mündliche Simulation: die Übersetzung erst auf Wunsch (zweite Rückmeldung
   Oktober 2026). Ein leiser Knopf neben dem Satz, das Deutsche darunter. */
.btn.uebersetzen{height:auto;padding:2px 6px;font-size:12px;font-weight:600;color:var(--tan6);vertical-align:baseline}
#muendlichInhalt small.uebersetzung{display:block;font-size:13px;line-height:1.45;color:var(--ink3);margin-top:4px}

/* Fortschritt (zweite Rückmeldung Oktober 2026): Fachname doppelt so gross
   wie die Themenbereiche, dunkelbraun; Kreise statt Kästchen; eine Klappe
   «Themenbereiche anzeigen» mit ▸ zu und ▾ offen. */
.fs-fach{font:600 30px/1.15 'Bitter',Georgia,serif;color:var(--ink);margin:0}
.zehnerblock .themenkreis{width:13px;height:13px}
details.fs-klappe > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  font:700 14px 'Nunito Sans',sans-serif;color:var(--ink);padding:8px 0;min-height:44px}
details.fs-klappe > summary::-webkit-details-marker{display:none}
details.fs-klappe .fs-pfeil::before{content:'▸';display:inline-block;width:14px;color:var(--tan6)}
details.fs-klappe[open] .fs-pfeil::before{content:'▾'}