/* Website/stil.css — Vorgang S Schritt 4.
   Gebaut nach DOKUMENTATION/ARCHITEKTUR/LOMOME_DESIGN_MASTER.md und nach dem
   Quelltext der Schueler-PWA, aus dem die Werte stammen:
     Farb-Tokens          Master Abschnitt 3 und 17
     Schriftrollen        Master Abschnitt 2, Werte aus App/Desktop/src/index.css
     Modulfarben          Master Abschnitt 3.8
     Kachel               App/Desktop/src/screens/HomeScreen.tsx, Zeilen 529-558
     Karte                App/Desktop/src/screens/HomeScreen.module.css, .cardCompanion

   Ordnung der Startseite: LEISTE LINKS.
     Die Kacheln stehen buendig untereinander am linken Rand und fuehren die
     ganze Seite hinunter — wie die Modulauswahl im Programm. Rechts davon,
     hinter einer durchgehenden feinen Linie, laeuft der Inhalt: Auftakt,
     Gruende, Nachsatz. Die Linie ist die Gliederung; sie macht aus zwei
     Spalten eine Seite.

   Diese Datei ist in EINEM Durchgang geschrieben. Die frueheren Fassungen
   hatten vier aufeinander gestapelte Korrekturbloecke, die einander
   ueberschrieben — deshalb blieben Regeln wirkungslos (Falle 51).

   🔴 Kein Papier als Untergrund: Papier steht im Haus dafuer, dass das Kind
   selbst schreibt (Heft und Arbeitsblatt). Eine Website schreibt nichts —
   sie gehoert auf die Tafel. Papier erscheint nur dort, wo eine Probe aus
   dem Programm gezeigt wird. */

@import url('./schriften/schriften.css');

/* ══ 1 · Tokens ═══════════════════════════════════════════════════════ */
:root {
  --tafel:      #2F4538;
  --creme:      #F5F5DC;
  --kreide:     #F4F1E4;
  --marken:     #98D8AA;
  --glow-creme: 0 0 8px rgba(245,245,220,0.4);

  --font-titel: 'Manrope', sans-serif;
  --font-body:  'Manrope', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-label: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Inter, sans-serif;

  --mode: #98D8AA;

  /* Satzspiegel: waechst mit dem Fenster, bis 88rem. Auf einem 27-Zoll-Schirm
     (2560 logische Punkte) sind das 1680 Punkte statt 1312 — der tote Rand
     rechts und links schrumpft, ohne dass die Zeilen zu lang werden. */
  --breite: min(90vw, 84rem);
  --spalte: 16.5rem;    /* Breite der Leiste */
  --graben: 3.4rem;     /* Leiste ↔ Linie ↔ Inhalt */
  --linie:  1px solid rgba(245,245,220,0.10);
}

/* EIN Regler fuer die ganze Seite: alle Masse stehen in rem, also waechst
   mit der Grundschrift auch jede Kachel, jeder Abstand und jeder Titel
   gleichmaessig mit. 16 px auf schmalen Schirmen, 20 px ab etwa 1850 px.
   In Media-Queries bleibt 1rem = 16px, die Umbruchpunkte wandern also nicht. */
html { font-size: clamp(16px, 0.62vw + 8.5px, 20px); }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--creme);
  background-color: var(--tafel);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(152,216,170,0.03) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 90% 100%, rgba(0,0,0,0.28) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  background-attachment: fixed;
}

.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 1.6rem; }

/* ══ 2 · Kopf ═════════════════════════════════════════════════════════
   Logo und Wortmarke stehen links in der Flucht der Leiste; rechts steht
   in zwei kleinen Zeilen, worum es geht. Eine Linie schliesst den Kopf ab —
   sie ist die Waagerechte zu der Senkrechten weiter unten. */
header.kopf { padding: 2.1rem 0 0; }
header.kopf .huelle { padding-bottom: 1.5rem; border-bottom: var(--linie); }
.kopfzeile {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 0.8rem 2rem; flex-wrap: wrap;
}
.markenblock { display: flex; align-items: center; gap: 1.1rem; }
.markenblock img { width: 84px; height: 84px; border-radius: 20px; flex-shrink: 0; }

.marke {
  display: inline-block; text-decoration: none;
  font-family: var(--font-titel); font-weight: 800; font-size: 3.1rem;
  letter-spacing: -0.015em; color: var(--creme); text-shadow: var(--glow-creme);
  line-height: 1;
}
.marke .zusatz {
  display: block; margin-top: 7px;
  font-family: var(--font-label); font-size: 12px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(245,245,220,0.5); text-shadow: none;
}
.kopfsatz {
  margin: 0 0 0.35rem; max-width: none; text-align: right;
  font-family: var(--font-label); font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(245,245,220,0.45);
}
.kopfsatz span { display: block; color: rgba(245,245,220,0.30); }

/* ══ 3 · Die Seite: Leiste links, Inhalt rechts ═══════════════════════ */
main { padding: 1.9rem 0 2.2rem; }

.seite {
  display: grid; grid-template-columns: var(--spalte) 1fr;
  gap: 0 var(--graben); align-items: start;
}
.leiste { min-width: 0; }
.inhalt { min-width: 0; border-left: var(--linie); padding-left: var(--graben); }

/* ══ 4 · Kacheln — die Modulauswahl aus dem Programm ══════════════════
   Werte aus App/Desktop/src/screens/HomeScreen.tsx (ModuleTile, 529-558)
   und Design-Master 17a: bei Beruehrung nimmt die Kachel die Modulfarbe an,
   `0 0 0 1px var(--m), 0 14px 34px -14px var(--m)`. In Ruhe bleibt sie
   grau — wie im Lehrer-Dashboard. */
.kachelreihe { padding: 0; }
.aufschrift {
  font-family: var(--font-label); font-size: 11px; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: rgba(245,245,220,0.35); margin: 0 0 0.8rem; max-width: none;
}
.kacheln {
  display: grid; grid-template-columns: 1fr; gap: 0.6rem;
  margin: 0 0 2rem; padding: 0; list-style: none;
}
.kacheln:last-child { margin-bottom: 0; }
.kacheln li { max-width: none; margin: 0; }

.kachel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.55rem; width: 100%; min-height: 5.3rem; padding: 1rem 0.6rem;
  text-decoration: none; border-radius: 14px;
  border: 1.5px solid rgba(245,245,220,0.13);
  background: rgba(255,255,255,0.035);
  color: rgba(245,245,220,0.38);
  transition: all 0.18s ease;
}
.kachel svg.symbol { width: 28px; height: 28px; }
.kachel .name {
  font-family: var(--font-titel); font-weight: 700; font-size: 0.92rem;
  color: var(--creme); text-align: center; line-height: 1.25;
}
.kachel:hover, .kachel:focus-visible, .kachel[aria-current="page"] {
  border-color: var(--m);
  background: color-mix(in srgb, var(--m) 16%, transparent);
  color: var(--m);
  box-shadow: 0 0 0 1px var(--m), 0 14px 34px -14px var(--m);
  transform: translateY(-2px);
}
.kachel:hover .name, .kachel:focus-visible .name, .kachel[aria-current="page"] .name { color: var(--m); }

/* Unter den Kacheln steht das Angebot als ruhige Notiz — kein dritter Knopf,
   sondern die Angabe, die man beim Lesen der Gruende noch einmal braucht.
   Sie traegt zugleich die Leiste bis in die untere Haelfte der Seite. */
.notiz {
  margin-top: 2rem; padding: 16px 18px; border-radius: 16px;
  border: 1px solid rgba(245,245,220,0.12);
  background: rgba(255,255,255,0.03);
}
.notiz .aufschrift { margin-bottom: 0.6rem; }
.notiz p { margin: 0 0 0.55rem; max-width: none; font-size: 0.9rem; line-height: 1.5;
  color: rgba(245,245,220,0.6); }
.notiz p:last-child { margin-bottom: 0; }
.notiz strong { display: block; margin-bottom: 2px; font-family: var(--font-titel);
  font-weight: 700; font-size: 1rem; color: var(--creme); }

/* ══ 5 · Der Auftakt: Tafel links, Heft rechts ════════════════════════ */
.buehne {
  display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 3rem;
  align-items: center; padding: 0.2rem 0 2.6rem;
}
.buehne .text { text-align: left; }
.buehne .zeile {
  font-family: var(--font-label); font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #FFB6C1; margin: 0 0 0.95rem;
}
.buehne h1 {
  font-size: 2.95rem; line-height: 1.07; margin: 0 0 1rem; max-width: 13ch;
  color: var(--creme); text-shadow: var(--glow-creme);
}
.buehne .claim {
  font-size: 1.12rem; line-height: 1.58; color: rgba(245,245,220,0.78);
  margin: 0 0 1.6rem; max-width: 36ch;
}

/* Der Blattstapel — zwei Karten wie in der Zeichnung des Logos: eine rosa
   dahinter, das Heftblatt davor. */
.blattstapel { position: relative; }
.blattstapel::before {
  content: ""; position: absolute; inset: 1.5rem -1rem -1rem 1.3rem;
  border-radius: 18px; background: linear-gradient(135deg, #FFDDE8, #FFB6C1);
  opacity: 0.5; transform: rotate(3.5deg);
  box-shadow: 0 18px 44px -22px rgba(0,0,0,0.6);
}

/* Das Heftblatt — Werte aus Master 3.1, 3.2, 3.7 und 18.2 */
.blatt {
  position: relative;
  background: var(--papier, #F5F2E8); color: #1C1810;
  border-radius: 16px; padding: 28px 30px 30px;
  box-shadow: 0 22px 50px -20px rgba(0,0,0,0.6);
  transform: rotate(-1.4deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23p)' opacity='0.025'/%3E%3C/svg%3E");
}
.blatt .kopf2 { font-family: var(--font-label); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #3D5235; margin: 0 0 0.9rem; }
.blatt .frage { font-size: 1.4rem; font-weight: 700; margin: 0 0 0.2rem; color: #1C1810; }
.blatt .de { font-size: 0.95rem; color: #6B6358; margin: 0 0 1.1rem; }
.blatt .zeileHeft { border-bottom: 1px solid rgba(160,190,210,0.40); padding-bottom: 6px;
  margin-bottom: 1.1rem; font-size: 1.35rem; }
.blatt .anm { font-size: 0.88rem; color: #6B6358; margin: 0; }
.blatt .loesung { color: #1C3A7A; font-weight: 700; }
.blatt .pfeil { color: rgba(28,58,122,0.45); }

/* Buchstabengenau heisst: nur die falsche Stelle traegt Rosa, das Richtige
   traegt Gruen — genau wie auf der Vokabelkarte im Programm. Kein Polster,
   damit die gruenen Stuecke nahtlos aneinander stossen. */
.mk-ok, .mk-err {
  color: #1C1810; mix-blend-mode: multiply;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.zeileHeft { letter-spacing: 0.01em; }
.mk-ok  { background: linear-gradient(to bottom, transparent 6%, #AEEF94 16%, #AEEF94 84%, transparent 96%); }
.mk-err { background: linear-gradient(to bottom, transparent 6%, #FFA6C6 16%, #FFA6C6 84%, transparent 96%); font-weight: 700; }
.zeileHeft .mk-ok, .zeileHeft .mk-err { padding: 0; border-radius: 0; }
.zeileHeft .mk-ok:first-child { border-radius: 3px 0 0 3px; }
.zeileHeft .mk-ok:last-of-type { border-radius: 0 3px 3px 0; }
.blatt .loesung u, .probe .loesung u { text-decoration: none; border-bottom: 2px solid rgba(28,58,122,0.5); }

/* ══ 6 · Knopf — Master 17a: keine durchgaengig tuerkise Flaeche ══════ */
.knopf {
  display: inline-block;
  font-family: var(--font-titel); font-weight: 700; font-size: 1.04rem;
  color: var(--kreide); background: transparent;
  border: 1.5px solid rgba(244,241,228,0.55);
  text-decoration: none; padding: 14px 30px; border-radius: 12px;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.knopf:hover { color: var(--kreide); background: rgba(244,241,228,0.10);
  border-color: rgba(244,241,228,0.85); transform: translateY(-2px); }
.knopf .klein { display: block; font-family: var(--font-label); font-size: 11px;
  font-weight: 600; letter-spacing: 0.06em; color: rgba(245,245,220,0.55); margin-top: 3px; }

/* ══ 7 · Die Gruende — Korrekturhaken statt Kaesten ═══════════════════ */
.warum { border-top: var(--linie); padding-top: 2.1rem; margin: 0; }
.warum h2 {
  font-size: 1.5rem; text-align: left; margin: 0 0 1.5rem;
  color: var(--creme); border: 0; padding: 0;
}
.gruende {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 3rem;
  margin: 0; padding: 0; list-style: none;
}
.gruende li { max-width: none; margin: 0; position: relative; padding: 0 0 0 2rem; }
.gruende li::before {
  content: ""; position: absolute; left: 0; top: 0.15rem;
  width: 1.1rem; height: 0.62rem;
  border-left: 2.5px solid #AEEF94; border-bottom: 2.5px solid #AEEF94;
  transform: rotate(-45deg);
}
.gruende b { display: block; font-family: var(--font-titel); font-weight: 700;
  font-size: 1.02rem; color: var(--creme); margin-bottom: 0.25rem; }
.abschluss { text-align: left; margin: 2.2rem 0 0; }

/* Der Schlussabsatz: kein Kasten, damit die Seite mit Ruhe endet. */
.nachsatz {
  border-top: var(--linie); margin: 2.3rem 0 0; padding-top: 1.5rem; max-width: none;
  font-size: 0.97rem; color: rgba(245,245,220,0.6);
}
.nachsatz strong { color: rgba(245,245,220,0.85); font-weight: 600; }

/* ══ 8 · Unterseiten: Karten auf der Tafel ════════════════════════════
   .cardCompanion aus HomeScreen.module.css */
.karte {
  background: rgba(255,255,255,0.04);
  -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px);
  border: 1px solid rgba(245,245,220,0.12);
  border-radius: 20px; padding: 24px 26px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  margin-bottom: 1.3rem;
}
h1 {
  font-family: var(--font-titel); font-weight: 800;
  font-size: 2.1rem; line-height: 1.18; margin: 0 0 0.9rem;
  color: var(--mode);
  text-shadow: 0 0 10px color-mix(in srgb, var(--mode) 32%, transparent);
}
h1 .modulzeichen { color: var(--mode); vertical-align: -6px; margin-right: 0.6rem; }
h2 {
  font-family: var(--font-titel); font-weight: 700;
  font-size: 1.2rem; margin: 0 0 0.6rem; color: var(--creme);
}
/* Master 3.8: Modal-, Sektions- und Blatt-Titel folgen der Modulfarbe. */
body:not(.m-marke) .karte { border-color: color-mix(in srgb, var(--mode) 26%, rgba(245,245,220,0.12)); }
body:not(.m-marke) h2 { color: var(--mode); }
body:not(.m-marke) .hinweis {
  background: color-mix(in srgb, var(--mode) 6%, transparent);
  border-color: color-mix(in srgb, var(--mode) 45%, transparent);
}
body:not(.m-marke) th { color: color-mix(in srgb, var(--mode) 70%, rgba(245,245,220,0.42)); }

p, li { max-width: 40rem; }
p { margin: 0 0 0.8rem; }
.vorspann { font-size: 1.08rem; color: rgba(245,245,220,0.72); }
ul, ol { margin: 0.4rem 0 0.2rem; padding-left: 1.2rem; }
li { margin-bottom: 0.35rem; }

a { color: var(--marken); }
a:hover { color: var(--creme); }
a:focus-visible { outline: 2px solid var(--mode); outline-offset: 3px; border-radius: 4px; }

table { border-collapse: collapse; width: 100%; margin: 0.6rem 0 0.2rem; font-size: 0.95rem; }
th, td { border-bottom: 1px solid rgba(245,245,220,0.12); padding: 0.6rem 0.6rem 0.6rem 0;
  text-align: left; vertical-align: top; }
th { font-family: var(--font-label); font-size: 11px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: rgba(245,245,220,0.42); }
td:first-child { color: var(--creme); }

.hinweis {
  background: rgba(152,216,170,0.06);
  border: 1.5px dashed rgba(152,216,170,0.45);
  border-radius: 20px; padding: 22px 24px; margin-bottom: 1.3rem;
}
.hinweis p:last-child { margin-bottom: 0; }

.zurueck {
  display: inline-flex; align-items: center; gap: 0.5rem; margin: 1.4rem 0 0;
  font-family: var(--font-label); font-size: 13px; font-weight: 600;
  color: rgba(245,245,220,0.6); text-decoration: none;
  padding: 9px 16px; border-radius: 11px;
  border: 1.5px solid rgba(245,245,220,0.14);
  background: rgba(255,255,255,0.04);
}
.zurueck:hover { color: var(--mode); border-color: color-mix(in srgb, var(--mode) 45%, transparent); }

/* ══ 9 · Popup — die Modul-Auswahl aus dem Programm ═══════════════════
   Master 17a: Overlay `linear-gradient(165deg, rgba(47,69,56,0.97),
   rgba(40,63,49,0.97))` mit `blur(8px)`, darauf eine gefrostete Flaeche
   `rgba(255,255,255,0.04)` + `blur(40px)`, Rand `rgba(245,245,220,0.10)`,
   Radius 24. Geoeffnet ueber die Adresse (:target) — ohne ein Skript. */
.popup {
  position: fixed; inset: 0; z-index: 50;
  display: none; align-items: center; justify-content: center;
  padding: 2rem 1.2rem;
  background: linear-gradient(165deg, rgba(47,69,56,0.97), rgba(40,63,49,0.97));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  overflow-y: auto;
}
.popup:target { display: flex; }
.popup .flaeche {
  position: relative; width: 100%; max-width: 40rem;
  background: rgba(255,255,255,0.04);
  -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px);
  border: 1px solid rgba(245,245,220,0.10);
  border-radius: 24px; padding: 30px 32px 34px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.45);
}
.popup .kopfzeichen {
  width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--p); color: var(--p);
  background: color-mix(in srgb, var(--p) 16%, transparent);
  margin-bottom: 1rem;
}
.popup h2 {
  font-family: var(--font-titel); font-weight: 800; font-size: 1.55rem;
  color: var(--p); margin: 0 0 0.8rem; border: 0; padding: 0;
}
.popup ul { margin: 0 0 1rem; padding-left: 1.15rem; }
.popup li { margin-bottom: 0.5rem; max-width: none; }
.popup .zu {
  position: absolute; top: 16px; right: 18px;
  font-family: var(--font-label); font-size: 22px; line-height: 1;
  color: rgba(245,245,220,0.5); text-decoration: none;
  padding: 6px 10px; border-radius: 10px;
}
.popup .zu:hover { color: var(--p); background: rgba(255,255,255,0.06); }
.popup .mehr {
  display: inline-block; margin-top: 0.3rem;
  font-family: var(--font-label); font-size: 13px; font-weight: 600;
  color: var(--p); text-decoration: none;
  padding: 9px 16px; border-radius: 11px;
  border: 1.5px solid color-mix(in srgb, var(--p) 45%, transparent);
  background: color-mix(in srgb, var(--p) 12%, transparent);
}
.popup .mehr:hover { background: color-mix(in srgb, var(--p) 22%, transparent); }

/* Das kleine Blatt im Popup */
.probe {
  background: #F5F2E8; color: #1C1810;
  border-radius: 12px; padding: 16px 18px; margin: 0 0 1.1rem;
  box-shadow: 0 12px 30px -14px rgba(0,0,0,0.6);
  font-size: 0.95rem; line-height: 1.5;
}
.probe .kopf2 { font-family: var(--font-label); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: #3D5235; margin: 0 0 0.55rem; }
.probe p { margin: 0 0 0.35rem; max-width: none; }
.probe p:last-child { margin-bottom: 0; }
.probe .anm { font-size: 0.83rem; color: #6B6358; }
.probe .zeileHeft { border-bottom: 1px solid rgba(160,190,210,0.40); padding-bottom: 5px; margin-bottom: 0.6rem; }
.probe .loesung { color: #1C3A7A; font-weight: 700; }
.probe .pfeil { color: rgba(28,58,122,0.45); }
.probe .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0.2rem 0 0.6rem; }
.probe .chip { font-family: var(--font-label); font-size: 10.5px; font-weight: 600;
  color: #3D5235; border: 1px solid rgba(61,82,53,0.35); border-radius: 999px; padding: 3px 9px; }
.probe .balken { display: grid; grid-template-columns: 8.5rem 1fr 2.6rem; align-items: center; gap: 8px; margin-bottom: 6px; }
.probe .balken span:first-child { font-size: 0.86rem; color: #6B6358; }
.probe .spur { height: 8px; border-radius: 999px; background: rgba(28,24,16,0.10); overflow: hidden; }
.probe .spur i { display: block; height: 100%; background: #3FA25A; border-radius: 999px; }
.probe .balken .wert { font-size: 0.82rem; color: #6B6358; text-align: right; }

/* ══ 10 · Fuss, Symbole, Modulfarben ══════════════════════════════════ */
footer.fuss { padding: 1.4rem 0 3rem; font-size: 0.85rem; color: rgba(245,245,220,0.42); }
footer.fuss .huelle { border-top: var(--linie); padding-top: 1.4rem; }
footer.fuss nav { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin-bottom: 0.8rem; }
footer.fuss a { color: rgba(245,245,220,0.5); text-decoration: none; white-space: nowrap; }
footer.fuss a:hover { color: var(--marken); }
footer.fuss p { margin: 0; max-width: none; }

svg.symbol {
  width: 26px; height: 26px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
h1 svg.symbol { width: 30px; height: 30px; }

/* Modulfarben je Seite — Master Abschnitt 3.8 */
body.m-marke      { --mode: #98D8AA; }
body.m-vokabeln   { --mode: #98D8AA; }
body.m-grammatik  { --mode: #C97B5A; }
body.m-hoeren     { --mode: #4A90B8; }
body.m-lesen      { --mode: #9B72CF; }
body.m-schreiben  { --mode: #F0D080; }  /* Schreiben, Gold */
body.m-fortschritt{ --mode: #C4A8D4; }  /* Statistik, aus HomeScreen.tsx STAT_ITEM */

/* ══ 11 · Schmale Schirme ═════════════════════════════════════════════
   Unter 74rem (1184 px) faellt die Leiste nach oben und wird wieder eine Reihe:
   darunter blieben fuer den Auftakt in zwei Spalten je 350 px — zu wenig. */
@media (max-width: 74rem) {
  /* Die Leiste steht im Quelltext vor dem Inhalt, damit sie auf breiten
     Schirmen links laufen kann. Gestapelt gehoert der Auftakt aber nach
     oben: `display: contents` loest den Kasten .inhalt auf, seine Teile
     werden selbst zu Feldern des Rasters und lassen sich ordnen —
     Auftakt, Kacheln, Gruende, Nachsatz. */
  .seite { grid-template-columns: 1fr; gap: 2.4rem; }
  .inhalt { display: contents; }
  .buehne  { order: 1; }
  .leiste  { order: 2; }
  .warum   { order: 3; }
  .nachsatz{ order: 4; }
  .leiste .kacheln { grid-template-columns: repeat(3, 1fr); margin-bottom: 1.2rem; }
  .buehne { grid-template-columns: 1fr; gap: 2.2rem; padding: 0 0 0.4rem; }
  .blattstapel { max-width: 34rem; }
  .buehne h1 { font-size: 2.3rem; max-width: none; }
  .buehne .claim { max-width: none; }
  .kopfsatz { text-align: left; }
}
@media (max-width: 44rem) {
  .gruende { grid-template-columns: 1fr; }
  .marke { font-size: 2.4rem; }
  .markenblock img { width: 68px; height: 68px; }
  .blatt { transform: none; }
  .blattstapel::before { display: none; }
}
@media (max-width: 40rem) {
  .leiste .kacheln { grid-template-columns: repeat(2, 1fr); }
  .buehne h1 { font-size: 2rem; }
}