/* Website/karten.css — die Vokabelkarte auf der Tafel, mit Kreidenotizen.
   Gebaut am 06.09.2026 nach den Bildschirmaufnahmen aus schueler.lomome.app
   und nach der Skizze: Strich von der Stelle zum Hinweiskasten daneben.

   Farben und Rezepte aus DOKUMENTATION/ARCHITEKTUR/LOMOME_DESIGN_MASTER.md
   (2, 3.1, 3.2, 3.4, 3.7, 17, 18.2, 18.5, 18.7) — dazu der Akzent-Marker
   `#FFA23D` aus `App/Desktop/src/components/lernkarte/Lernkarte.module.css`
   Zeile 594: ein Akzentfehler traegt Orange, damit er nicht aussieht wie ein
   fehlender Buchstabe. (Code gilt vor Dokument.)

   AUFBAU: Die Karte IST das Gitter. Spalte 1 und 3 tragen die Hinweiskaesten,
   Spalte 2 die Kartenzeilen — Notiz und Zeile liegen in DERSELBEN Gitterzeile,
   deshalb zeigt der Strich bei jeder Fensterbreite genau auf seine Stelle,
   ohne ein Skript, das nachmisst.

   Diese Datei ergaenzt stil.css und ueberschreibt keine ihrer Regeln.
   Alle Klassen tragen das Praefix .kk. */

/* ══ 1 · Tokens ═══════════════════════════════════════════════════════ */
:root {
  --kk-papier:  #F5F2E8;
  --kk-ink:     #1C3A7A;
  --kk-de:      rgba(28,58,122,0.58);
  --kk-stift:   #6B6358;
  --kk-rand:    rgba(184,176,144,0.35);
  --kk-zeile:   rgba(160,190,210,0.40);

  --kk-ok:      #AEEF94;   /* richtig */
  --kk-err:     #FFA6C6;   /* falsch / fehlend */
  --kk-acc:     #FFA23D;   /* nur der Akzent war falsch */
  --kk-mktext:  #1C1810;

  --kk-falsch:  #C0463A;
  --kk-richtig: #3FA25A;

  --kk-kreide:  #F4F1E4;   /* Kreide-Schrift, Master 3.1 */
}

/* ══ 2 · Das Brett: Karte in der Mitte, Notizen links und rechts ══════ */
.kkBrett {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) minmax(0, 11rem);
  grid-template-rows: repeat(8, auto);
  column-gap: 2.4rem; align-items: center;
  margin: 0 0 2.4rem;
}
/* 🔴 JEDE Zeile wird ausdruecklich gesetzt (.r1 … .r8). Nur ausdruecklich
   gesetzte Felder duerfen einander ueberlappen — das Papier liegt unter den
   Kartenzeilen und muss dieselben Zeilen belegen. Bei automatischer Verteilung
   weicht jede Zeile dem Papier aus, das Papier bleibt leer und schrumpft auf
   null; die Karte stand dann nackt auf der Tafel (gemessen am 06.09.2026). */
.kkBrett > .r1 { grid-row: 1; }
.kkBrett > .r2 { grid-row: 2; }
.kkBrett > .r3 { grid-row: 3; }
.kkBrett > .r4 { grid-row: 4; }
.kkBrett > .r5 { grid-row: 5; }
.kkBrett > .r6 { grid-row: 6; }
.kkBrett > .r7 { grid-row: 7; }
.kkBrett > .r8 { grid-row: 8; }
.kkBrett > .papier {
  grid-column: 2; grid-row: 1 / -1; z-index: 0; align-self: stretch;
  background: var(--kk-papier);
  border: 1px solid var(--kk-rand); border-radius: 6px;
  box-shadow: 9px 10px 0 0 #DDD7C5, 17px 18px 0 0 #CFC8B2, 0 4px 22px rgba(0,0,0,0.40);
}
.kkBrett > .z {
  grid-column: 2; position: relative; z-index: 1;
  padding: 0 1.4rem; color: var(--kk-ink);
  font-family: var(--font-body); font-size: 0.98rem; line-height: 1.5;
}
.kkBrett > .z.oben  { padding-top: 1.15rem; }
.kkBrett > .z.unten { padding-bottom: 1.2rem; }
.kkBrett > .z > *:last-child { margin-bottom: 0; }

/* Der Hinweiskasten neben der Karte — Kreideweiss, mit Pfeil zur Stelle.
   Master 3.1: Kreide-Schrift `#F4F1E4`. */
.kkNotiz {
  position: relative; margin: 0; max-width: none;
  color: #F4F1E4; font-size: 0.98rem; line-height: 1.3;
  padding: 0.55rem 0.85rem; border-radius: 12px;
  border: 1.5px solid rgba(244,241,228,0.38);
  background: rgba(244,241,228,0.06);
}
.kkNotiz.li { grid-column: 1; }
.kkNotiz.re { grid-column: 3; }
/* 🔴 Der Strich endet GENAU am Fuss der Spitze, nicht darunter hindurch.
   Spitze = 14px breit (2 x 7px Rand), Abstand zur Karte = 2.4rem. Der Strich
   ist deshalb `2.4rem - 14px` lang und beginnt hinter der Spitze. Sonst lief
   er ueber die Spitze hinaus, und auf dem Papier war sie nicht zu sehen
   (gemessen am 06.09.2026). */
.kkNotiz::before {
  content: ""; position: absolute; top: 50%; width: calc(2.4rem - 7px); height: 1.5px;
  margin-top: -0.75px; background: rgba(244,241,228,0.6);
}
/* die Pfeilspitze, zeigt auf die Stelle */
.kkNotiz::after {
  content: ""; position: absolute; top: 50%; margin-top: -7px;
  width: 0; height: 0; border: 7px solid transparent;
}
/* 🔴 Die Spitze endet AM Rand der Karte, nicht darauf: Kreideweiss auf
   cremefarbenem Papier waere unsichtbar (gemessen am 06.09.2026). Der Versatz
   ist deshalb genauso gross wie der Strich lang ist. */
/* Spitze: das Feld ist 14px breit, die Spitze sitzt in seiner Mitte.
   `-2.4rem - 7px` schiebt sie so weit hinaus, dass die Spitze genau auf
   `-2.4rem` liegt — dort, wo die Karte beginnt. Der Strich setzt 7px
   dahinter an und laeuft bis zum Kasten. */
.kkNotiz.li::before { right: calc(-2.4rem + 7px); }
.kkNotiz.li::after  { right: calc(-2.4rem - 7px); border-left-color: #F4F1E4; }
.kkNotiz.re::before { left: calc(-2.4rem + 7px); }
.kkNotiz.re::after  { left: calc(-2.4rem - 7px); border-right-color: #F4F1E4; }

/* ══ 3 · Kopf: Fundstelle, Urteil, Wortart ════════════════════════════ */
.kkKopf { display: flex; align-items: flex-start; gap: 0.9rem; }
.kkOrt {
  flex: 1 1 auto; min-width: 0; align-self: flex-start;
  font-family: var(--font-label);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: #3D5235;
  padding-bottom: 0.35rem;
  border-bottom: 4px double rgba(28,58,122,0.7);
}
.kkUrteil {
  flex: 0 0 auto; transform: rotate(-1.4deg);
  font-family: var(--font-label);
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.28rem 0.65rem; border-radius: 6px;
  border: 2px solid currentColor;
}
.kkUrteil.weg { color: var(--kk-falsch); }
.kkUrteil.ok  { color: var(--kk-richtig); }
.kkStempel {
  flex: 0 0 auto; transform: rotate(-1.6deg); opacity: 0.85;
  font-family: var(--font-label);
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: #C06010;
  padding: 0.2rem 0.5rem; border-radius: 4px;
  border: 1.5px solid currentColor;
  box-shadow: inset 0 0 0 2px var(--kk-papier), inset 0 0 0 3.5px currentColor;
  mix-blend-mode: multiply;
}

/* ══ 4 · Zeilen auf der Karte ═════════════════════════════════════════ */
.kkLab {
  font-family: var(--font-label);
  font-size: 0.63rem; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--kk-stift);
  margin: 0 0 0.3rem;
}
.kkReih { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.kkWort { font-family: var(--font-titel); font-size: 1.5rem; font-weight: 800;
          letter-spacing: -0.01em; margin: 0; }
.kkDe   { color: var(--kk-de); font-size: 1.08rem; margin: 0.45rem 0 0; }
.kkFr   { font-size: 1.12rem; margin: 0 0 0.15rem 1.6rem; padding-bottom: 0.34rem;
          border-bottom: 1.5px solid var(--kk-zeile); }
.kkFrDe { color: var(--kk-de); font-size: 1.04rem; margin: 0 0 0 1.6rem;
          padding: 0.3rem 0 0.34rem; border-bottom: 1.5px solid var(--kk-zeile); }
.kkFeldName {
  font-family: var(--font-label); font-size: 0.63rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--kk-stift);
  margin-right: 0.45rem;
}
.kkMelden { color: rgba(28,58,122,0.35); font-size: 0.88rem; margin: 0;
            display: inline-block; border-bottom: 1px solid rgba(28,58,122,0.2); }
.kkDoppel { height: 0; margin: 0.9rem 0 0.2rem; border: 0;
            border-top: 4px double rgba(28,58,122,0.6); }
.kkFein   { height: 1px; margin: 0.8rem 0 0; border: 0; background: rgba(28,58,122,0.14); }

.kkLuecke {
  display: inline-block; min-width: 6rem;
  color: rgba(28,58,122,0.3); letter-spacing: 0.14em;
  border-left: 2px solid rgba(28,58,122,0.45);
  margin-right: 0.35rem; padding: 0 0.35rem;
}
.kkTon {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-label); font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--kk-ink);
  padding: 0.4rem 0.75rem; border-radius: 9px;
  border: 1.5px solid rgba(28,58,122,0.4);
}
.kkTon svg { width: 15px; height: 15px; fill: none; stroke: currentColor;
             stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kkWahl { display: flex; justify-content: center; gap: 0.7rem; margin: 1rem 0 0.2rem; }
.kkWahl span {
  min-width: 4.4rem; text-align: center; font-size: 1.05rem;
  padding: 0.32rem 0.8rem; border-radius: 7px;
  border: 1.5px solid rgba(28,58,122,0.3);
}

/* ══ 5 · Marker — Master 18.2 und Lernkarte.module.css 582–594 ════════ */
.mk { color: var(--kk-mktext); mix-blend-mode: multiply; border-radius: 2px;
      padding: 0 1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mk.ok  { background: linear-gradient(to bottom, transparent 6%, var(--kk-ok)  16%, var(--kk-ok)  84%, transparent 96%); }
.mk.err { background: linear-gradient(to bottom, transparent 6%, var(--kk-err) 16%, var(--kk-err) 84%, transparent 96%); font-weight: 700; }
.mk.acc { background: linear-gradient(to bottom, transparent 6%, var(--kk-acc) 16%, var(--kk-acc) 84%, transparent 96%); font-weight: 700; }
.kkPfeil { color: rgba(28,58,122,0.45); margin: 0 0.45rem; }

/* ══ 6 · Bewertung — Textmarker-Streifen wie in der App ═══════════════ */
.kkNoten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
.kkNoten span {
  position: relative; text-align: center; font-size: 0.98rem;
  padding: 0.5rem 0.2rem; border-radius: 12px;
  border: 1.5px dashed rgba(28,58,122,0.22); color: var(--kk-mktext);
}
.kkNoten span i { position: absolute; inset: 32% 10% 30%; z-index: 0;
                  border-radius: 2px; transform: rotate(-1.6deg); mix-blend-mode: multiply; }
.kkNoten span b { position: relative; z-index: 1; font-weight: 500; }
.kkNoten .n1 i { background: linear-gradient(90deg, #FFA6C6, rgba(255,166,198,0)); }
.kkNoten .n2 i { background: linear-gradient(90deg, #FFA23D, rgba(255,162,61,0)); }
.kkNoten .n3 i { background: linear-gradient(90deg, #DCEE6A, rgba(220,238,106,0)); }
.kkNoten .n4 i { background: linear-gradient(90deg, #AEEF94, rgba(174,239,148,0)); }

/* ══ 7 · Kurze Zeilen auf der Tafel ═══════════════════════════════════ */
.kkSatz { font-size: 1.08rem; color: var(--creme); margin: 0 0 1.4rem; }
.kkSatz b { color: var(--mode); font-weight: 700; }

.kkArten { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.kkArten li {
  margin: 0; font-family: var(--font-label);
  font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.3rem 0.8rem; border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--mode) 60%, transparent);
  background: color-mix(in srgb, var(--mode) 13%, transparent);
  color: #F4F1E4;
}

.kkDrei { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
          gap: 1rem; }
.kkDrei div {
  border-radius: 14px; padding: 0.85rem 1rem;
  border: 1.5px solid color-mix(in srgb, var(--mode) 32%, transparent);
  background: rgba(255,255,255,0.04);
}
.kkDrei b { display: block; color: var(--mode); font-size: 1.02rem; margin-bottom: 0.2rem; }
.kkDrei p { margin: 0; font-size: 0.94rem; color: rgba(245,245,220,0.72); max-width: none; }

/* ══ 8 · Schmale Schirme ══════════════════════════════════════════════
   Unter 68rem faellt das Brett auf eine Spalte.

   🔴 14.09.2026 — DIE NOTIZEN LAGEN AUF DEM FENSTER.

   Am iPhone belegt (lomome.de/grammatik, 14:21 Uhr): „Drei Wege:
   nachschlagen, üben, aus den eigenen Fehlern" stand quer ueber der Zeile
   „Was möchtest du?", „Auch der Stoff früherer Jahrgangsstufen" ueber der
   Klassenleiste. Vier Kaesten, vier Ueberlappungen.

   Der Grund steckt in Abschnitt 2: JEDE Zeile traegt ihre Nummer
   ausdruecklich (`.r1 … .r8`) — auch die Notizen. Solange sie in Spalte 1
   und Spalte 3 stehen, ist das richtig und noetig; faellt das Brett aber auf
   EINE Spalte, sitzen Notiz und Fensterzeile in derselben Rasterzelle. Zwei
   Dinge in einer Zelle liegen uebereinander, das ist keine Stoerung, sondern
   die Regel des Rasters.

   Die Notiz bekommt deshalb auf schmalen Schirmen ihre Zeile vom Raster
   zugeteilt (`grid-row: auto`) statt sie einzufordern. Damit rutscht sie
   hinter die acht gesetzten Zeilen — unter das Fenster, in der Reihenfolge
   des Textes.

   ⚠ Der Pfeil entfaellt dort. Er zeigte auf eine Stelle, die nun woanders
     liegt; ein Pfeil ins Leere ist schlechter als keiner. Was bleibt, ist der
     Kasten mit dem Satz — und der traegt sich selbst. */
@media (max-width: 68rem) {
  /* `minmax(0, 1fr)` statt `1fr`: eine `1fr`-Spalte darf nicht unter ihren
     Inhalt schrumpfen. Steckt im Brett eine Tabelle oder eine lange Zeile,
     waechst die Spalte ueber den Schirm hinaus (gemessen 14.09.2026:
     /grammatik 537 px bei 375 px). Mit `minmax(0, …)` gilt der Schirm. */
  .kkBrett { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .kkBrett > .papier { grid-column: 1; }
  .kkBrett > .z { grid-column: 1; }
  .kkNotiz.li, .kkNotiz.re {
    grid-column: 1;
    grid-row: auto;
    margin: 0.9rem 0 0;
  }
  .kkNotiz::before, .kkNotiz::after { content: none; }
}
@media (max-width: 34rem) {
  .kkBrett > .z { padding: 0 1rem; font-size: 0.93rem; }
  .kkWort { font-size: 1.25rem; }
  .kkFr, .kkFrDe { margin-left: 0.7rem; }
  .kkNoten { grid-template-columns: repeat(2, 1fr); }
  .kkBrett > .papier { box-shadow: 6px 7px 0 0 #DDD7C5, 11px 12px 0 0 #CFC8B2, 0 4px 18px rgba(0,0,0,0.4); }
}

/* ══ 10 · Das Tafel-Fenster (Vorbereitung: „Vokabeln üben") ═══════════
   Master 3.1 und 10: dunkle Flaeche auf der Tafel, Titel in Markengruen
   mit Signatur-Glow, Auswahlzeilen als Umriss, die gewaehlte mit Hauch-
   Fuellung. */
.kkFenster {
  border-radius: 20px; padding: 1.5rem 1.4rem 1.4rem;
  border: 1px solid rgba(245,245,220,0.10);
  background: rgba(255,255,255,0.035);
  box-shadow: 0 10px 34px rgba(0,0,0,0.30);
}
.kkFenster h3 {
  font-family: var(--font-titel); font-weight: 800;
  font-size: 1.5rem; text-align: center; margin: 0 0 1.2rem;
  color: var(--marken); text-shadow: 0 0 10px rgba(152,216,170,0.32);
}
.kkGrp {
  font-family: var(--font-label); font-size: 0.63rem; font-weight: 800;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(245,245,220,0.45); margin: 1rem 0 0.45rem;
}
.kkGrp:first-of-type { margin-top: 0; }
.kkZwei { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.kkOpt {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.7rem;
  padding: 0.6rem 0.9rem; border-radius: 11px; margin-bottom: 0.5rem;
  border: 1.5px solid rgba(245,245,220,0.14);
  background: rgba(255,255,255,0.03);
  color: rgba(245,245,220,0.78);
}
.kkOpt.an {
  border-color: color-mix(in srgb, var(--marken) 55%, transparent);
  background: color-mix(in srgb, var(--marken) 13%, transparent);
  color: var(--marken); font-weight: 700;
}
.kkOpt .sub { font-size: 0.82rem; color: rgba(245,245,220,0.42); font-weight: 400; text-align: right; }
.kkZwei .kkOpt { justify-content: center; margin: 0; font-weight: 700; color: #F4F1E4; }
.kkZwei .kkOpt.an { color: #F4F1E4; }
.kkKnopf {
  display: block; text-align: center; margin-top: 1rem;
  padding: 0.75rem 1rem; border-radius: 13px; font-weight: 800; font-size: 1.05rem;
  color: #F4F1E4;
  border: 1.5px solid color-mix(in srgb, var(--marken) 60%, transparent);
  background: color-mix(in srgb, var(--marken) 16%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--marken) 22%, transparent);
}

/* ══ 11 · Das Arbeitsblatt (Lückentext) — Master 18.5 ═════════════════ */
.kkBlatt {
  background: var(--kk-papier);
  border: 1px solid rgba(184,176,144,0.40); border-radius: 6px;
  padding: 1.1rem 1.3rem 1.2rem;
  box-shadow: 9px 10px 0 0 #DDD7C5, 17px 18px 0 0 #CFC8B2, 0 4px 22px rgba(0,0,0,0.40);
  color: #2A2A26; font-size: 0.98rem; line-height: 1.55;
}
.kkBlattKopf { display: flex; align-items: flex-start; gap: 0.8rem; margin-bottom: 0.4rem; }
.kkBlattKopf h3 { font-family: var(--font-titel); font-size: 1.4rem; font-weight: 800;
                  margin: 0; color: #2A2A26; flex: 1 1 auto; }
.kkMeta {
  flex: 0 0 auto; font-family: var(--font-label);
  font-size: 0.63rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #6B6358; padding: 0.35rem 0.7rem; border-radius: 8px;
  border: 1px solid rgba(107,99,88,0.35);
}
.kkAufgabe { font-weight: 700; margin: 0 0 0.8rem; }
.kkPool { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 1rem;
          padding-top: 0.8rem; border-top: 1px solid rgba(107,99,88,0.25); }
.kkPool span {
  font-family: 'Patrick Hand', cursive; font-size: 1.02rem; color: var(--kk-ink);
  padding: 0.18rem 0.6rem; border-radius: 6px;
  background: rgba(28,58,122,0.06); border: 1px solid rgba(28,58,122,0.22);
}
/* Text mit Luecken auf Schreiblinien, Master 18.7 */
.kkText { line-height: 2.4; }
.kkText .luecke {
  display: inline-block; min-width: 7rem;
  border-bottom: 1.5px solid var(--kk-zeile); margin: 0 0.2rem;
}
/* Die Korrektur: Schuelerantwort in Tinte, Lehrerkorrektur in Rotstift */
.kkKorr { line-height: 2.9; }
.kkKorr .ant {
  position: relative; font-family: 'Patrick Hand', cursive; font-size: 1.06rem;
  color: var(--kk-ink); border-bottom: 1.5px solid #C0463A; padding: 0 0.1rem;
}
.kkKorr .ant .oben {
  position: absolute; left: 0; top: -1.25em; white-space: nowrap;
  font-family: 'Patrick Hand', cursive; font-size: 0.95rem; color: #C0463A;
}
.kkKorr .haken { color: #C0463A; font-family: 'Patrick Hand', cursive; }
.kkNote {
  margin: 1rem 0 0; padding-top: 0.8rem; text-align: center;
  border-top: 1px solid rgba(107,99,88,0.25);
  font-family: 'Patrick Hand', cursive; font-size: 1.15rem; color: #C0463A;
}

/* ══ 12 · Übersichten — Auswahlseite und Heftseite ════════════════════
   Modulfarbe Eisblau `#7AB8D4` (Master 3.8). */
.kkUe { --mode: #7AB8D4; }
.kkReiter { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-bottom: 0.9rem; }
.kkReiter span {
  text-align: center; padding: 0.6rem 0.8rem; border-radius: 12px;
  border: 1.5px solid rgba(122,184,212,0.35); color: rgba(245,245,220,0.72);
}
.kkReiter .an {
  border-color: rgba(122,184,212,0.75); background: rgba(122,184,212,0.16);
  color: #7AB8D4; font-weight: 700;
}
.kkGruppe {
  border: 1.5px solid rgba(122,184,212,0.35); border-radius: 14px;
  overflow: hidden; margin-bottom: 0.8rem;
}
.kkGruppe > b {
  display: block; padding: 0.6rem 0.9rem; font-size: 1.08rem; color: #7AB8D4;
  background: rgba(0,0,0,0.20);
}
.kkGruppe p {
  display: flex; justify-content: space-between; gap: 1rem; margin: 0;
  padding: 0.55rem 0.9rem; max-width: none;
  color: rgba(245,245,220,0.86); background: rgba(255,255,255,0.04);
  border-top: 1px solid rgba(245,245,220,0.08);
}
.kkGruppe p i { font-style: normal; color: rgba(245,245,220,0.40); font-size: 0.88rem; white-space: nowrap; }

/* Die Übersichten-Heftseite */
.kkHeft { }
.kkHeft .kopf { display: flex; align-items: flex-start; gap: 0.9rem; margin-bottom: 0.5rem; }
.kkHeft .kopf h3 { font-family: var(--font-titel); font-size: 1.28rem; font-weight: 800;
                   margin: 0; color: var(--kk-ink); flex: 1 1 auto; }
.kkHeft .kopf .ort {
  font-family: var(--font-label); font-size: 0.63rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: #6B6358;
  display: block; margin-bottom: 0.2rem;
}
.kkPdf { display: flex; flex-direction: column; gap: 0.35rem; flex: 0 0 auto; }
.kkPdf span, .kkErledigt {
  font-family: var(--font-label); font-size: 0.6rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--kk-ink);
  padding: 0.28rem 0.6rem; border-radius: 6px;
  border: 1.5px dashed rgba(28,58,122,0.5); text-align: center;
}
.kkErledigt { display: inline-block; margin: 0.2rem 0 0.6rem; }
.kkZeilen { border-top: 4px double rgba(28,58,122,0.6); }
.kkZeilen p {
  display: grid; grid-template-columns: minmax(7rem, 12rem) 1fr; gap: 1rem;
  margin: 0; padding: 0.6rem 0; max-width: none;
  border-bottom: 1px solid rgba(28,58,122,0.12);
}
.kkZeilen p .de  { color: var(--kk-de); }
.kkZeilen p .fr  { color: var(--kk-ink); }
.kkZeilen p .fr .luecke {
  display: inline-block; min-width: 5rem; margin: 0 0.25rem;
  border-bottom: 1.5px solid var(--kk-zeile);
  color: rgba(28,58,122,0.28); text-align: center;
}
.kkZeilen p .fr .konnte {
  font-family: var(--font-label); font-size: 0.78rem; color: rgba(28,58,122,0.55);
  padding: 0.18rem 0.55rem; border-radius: 8px; margin-left: 0.4rem;
  border: 1.5px dashed rgba(28,58,122,0.25);
}

/* Ein ganzes Bauteil in der Mittelspalte, ohne das Karten-Papier darunter
   (das Fenster und das Arbeitsblatt bringen ihre eigene Flaeche mit). */
.kkBrett > .voll { grid-column: 2; position: relative; z-index: 1; }

/* ══ 13 · Hörverstehen: Fenster, Abspieler, Arbeitsblatt ══════════════
   Modulfarbe Blau `#4A90B8` (Master 3.8). Die Bauteile stammen aus den
   Bildschirmaufnahmen vom 06.09.2026. */
.kkFenster h3.mod { color: var(--mode); text-shadow: 0 0 10px color-mix(in srgb, var(--mode) 32%, transparent); }
.kkGrp .zus { font-weight: 500; letter-spacing: 0; text-transform: none;
              color: rgba(245,245,220,0.35); margin-left: 0.4rem; }

.kkKlasse { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.6rem; }
.kkKlasse span {
  text-align: center; padding: 0.7rem 0; border-radius: 12px; font-weight: 700; color: #F4F1E4;
  border: 1.5px solid rgba(245,245,220,0.14); background: rgba(255,255,255,0.03);
}
.kkKlasse .an {
  border-color: color-mix(in srgb, var(--mode) 65%, transparent);
  background: color-mix(in srgb, var(--mode) 22%, transparent);
}

.kkPillen { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.kkPillen span {
  padding: 0.45rem 0.9rem; border-radius: 999px; font-size: 0.98rem;
  border: 1.5px solid rgba(245,245,220,0.18); color: rgba(245,245,220,0.72);
}
.kkPillen .an {
  border-color: color-mix(in srgb, var(--mode) 65%, transparent);
  background: color-mix(in srgb, var(--mode) 16%, transparent);
  color: var(--mode); font-weight: 700;
}

.kkSelect {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 0.95rem; border-radius: 12px; color: #F4F1E4;
  border: 1.5px solid color-mix(in srgb, var(--mode) 45%, transparent);
  background: rgba(255,255,255,0.03);
}
.kkSelect .pfeil { color: color-mix(in srgb, var(--mode) 80%, transparent); }
.kkAuf {
  margin-top: 0.5rem; border-radius: 14px; overflow: hidden;
  border: 1.5px solid color-mix(in srgb, var(--mode) 45%, transparent);
  background: rgba(0,0,0,0.18);
}
.kkAuf p { margin: 0; padding: 0.55rem 1rem; max-width: none; color: rgba(245,245,220,0.8); }
.kkAuf p.an { background: color-mix(in srgb, var(--mode) 18%, transparent); color: var(--mode); font-weight: 700; }

/* Der Abspieler (Tafel) */
.kkSpieler {
  border-radius: 18px; padding: 1rem 1.2rem;
  border: 1.5px solid rgba(245,245,220,0.14); background: rgba(255,255,255,0.04);
}
.kkSpieler .kopf { display: flex; align-items: center; gap: 0.9rem; }
.kkSpieler .nr {
  width: 2.6rem; height: 2.6rem; flex: 0 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
  color: #F4F1E4; border: 1.5px solid rgba(245,245,220,0.3);
}
.kkSpieler b { display: block; color: #F4F1E4; font-size: 1.05rem; }
.kkSpieler .modus {
  font-family: var(--font-label); font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,245,220,0.42);
}
.kkSpieler .zeit { margin-left: auto; color: rgba(245,245,220,0.75); }
.kkSpieler .spur { height: 4px; border-radius: 2px; background: rgba(245,245,220,0.16); margin: 0.9rem 0; }
.kkSpieler .tasten { display: flex; justify-content: center; gap: 0.8rem; }
.kkSpieler .tasten span {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; color: rgba(245,245,220,0.8);
  border: 1.5px solid rgba(245,245,220,0.25);
}
.kkSpieler .tasten .play {
  width: 3.2rem; height: 3.2rem; font-size: 1.1rem; color: #F4F1E4;
  border-color: color-mix(in srgb, var(--mode) 70%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--mode) 25%, transparent);
}

/* Das Hörverstehen-Arbeitsblatt */
.kkAnw { margin: 0 0 0.7rem; padding-left: 1.1rem; color: #4A4A42; font-style: italic; }
.kkAnw li { margin-bottom: 0.15rem; }
.kkHint { font-style: italic; color: #4A4A42; margin: 0 0 0.8rem; }
.kkKi {
  display: flex; gap: 0.6rem; margin: 0 0 1.1rem; padding: 0.7rem 0.9rem;
  border-radius: 10px; border: 1px solid rgba(107,99,88,0.3);
  background: rgba(107,99,88,0.05); color: #6B6358; font-size: 0.92rem;
}
.kkKi b { color: #4A4A42; }
.kkFrage { display: grid; grid-template-columns: 1.4rem 1fr auto; gap: 0.3rem 0.7rem; margin: 0 0 1rem; }
.kkFrage > .nr { font-weight: 700; color: #2A2A26; }
.kkFrage > .txt { color: #2A2A26; }
.kkFrage > .be { font-family: 'Patrick Hand', cursive; color: #C0463A; font-size: 1.05rem; white-space: nowrap; }
.kkFrage > .opt { grid-column: 2 / span 2; display: flex; align-items: center; gap: 0.5rem; color: #2A2A26; }
.kkFrage > .opt.zeile { display: block; }
.kkKasten {
  display: inline-block; width: 1.05rem; height: 1.05rem; border-radius: 3px;
  border: 1.5px solid rgba(42,42,38,0.45); vertical-align: -0.15rem; flex: 0 0 auto;
}
.kkKasten.x  { border-color: #C0463A; color: #C0463A; font-family: 'Patrick Hand', cursive;
               text-align: center; line-height: 0.95rem; }
.kkKasten.ok { border-color: var(--kk-ink); color: var(--kk-ink); font-family: 'Patrick Hand', cursive;
               text-align: center; line-height: 0.95rem; }
.kkFalsch { color: #C0463A; }
.kkRichtig { text-decoration: underline; text-decoration-color: #C0463A; }
.kkKorrZeile { font-family: 'Patrick Hand', cursive; color: #C0463A; font-size: 1.02rem; }
.kkLinieLeer { display: inline-block; min-width: 9rem; border-bottom: 1.5px solid var(--kk-zeile); }
.kkGesamt {
  margin: 1rem 0 0; padding-top: 0.8rem; text-align: right;
  border-top: 1px solid rgba(107,99,88,0.25);
  font-family: 'Patrick Hand', cursive; font-size: 1.15rem; color: #C0463A;
}
/* Zeitmarke neben der Aufgabe (auf der Tafel) */
.kkZeitmarke {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-label); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.06em; color: #F4F1E4;
  padding: 0.3rem 0.7rem; border-radius: 999px;
  border: 1.5px solid rgba(245,245,220,0.22); background: rgba(255,255,255,0.05);
}

/* ══ 14 · Leseverstehen: Text mit Zeilenzahlen und Vokabelhilfen ══════
   Modulfarbe Lila `#9B72CF` (Master 3.8). Aus den Aufnahmen vom 06.09.2026. */
.kkLtext { display: grid; grid-template-columns: 2.2rem 1fr; column-gap: 1.1rem; margin: 0.8rem 0 0; }
.kkLtext .z { color: rgba(107,99,88,0.5); font-size: 0.8rem; text-align: right; padding-top: 0.25rem; }
.kkLtext .t {
  margin: 0 0 0.9rem; max-width: none; color: #2A2A26;
  border-left: 1px solid rgba(107,99,88,0.25); padding-left: 1.1rem;
}
.kkVok {
  margin: 0.9rem 0 0; padding-top: 0.8rem; font-size: 0.92rem; color: #6B6358;
  border-top: 1px solid rgba(107,99,88,0.25); max-width: none;
}
.kkVok b { color: #2A2A26; }
.kkVorspann { font-style: italic; color: #4A4A42; margin: 0 0 0.6rem; }
.kkBE { font-family: var(--font-label); font-size: 0.72rem; color: #C0463A; white-space: nowrap; }
.kkBE b { font-size: 0.95rem; }

/* ══ 15 · Fenster und Blatt als Hintergrund über mehrere Zeilen ═══════
   Damit ein Strich auf EINE Zeile des Fensters (Gesprächstyp, Thema …)
   oder des Arbeitsblatts zeigen kann, muss die Flaeche darunterliegen und
   die Zeilen einzeln gesetzt sein — dieselbe Mechanik wie beim Papier der
   Karte (Abschnitt 2): `grid-template-rows`, `align-self: stretch` und
   .r1 … .r8 an jeder Zeile. */
.kkBrett > .fenster, .kkBrett > .blatt {
  grid-column: 2; grid-row: 1 / -1; z-index: 0; align-self: stretch;
}
.kkBrett > .fenster {
  border-radius: 20px; border: 1px solid rgba(245,245,220,0.10);
  background: rgba(255,255,255,0.035); box-shadow: 0 10px 34px rgba(0,0,0,0.30);
}
.kkBrett > .blatt {
  background: var(--kk-papier); border: 1px solid rgba(184,176,144,0.40); border-radius: 6px;
  box-shadow: 9px 10px 0 0 #DDD7C5, 17px 18px 0 0 #CFC8B2, 0 4px 22px rgba(0,0,0,0.40);
}
.kkBrett > .fz, .kkBrett > .bz {
  grid-column: 2; position: relative; z-index: 1; padding: 0 1.4rem;
}
.kkBrett > .fz.oben  { padding-top: 1.4rem; }
.kkBrett > .fz.unten { padding-bottom: 1.4rem; }
.kkBrett > .bz { color: #2A2A26; font-family: var(--font-body); font-size: 0.98rem; line-height: 1.55; }
.kkBrett > .bz.oben  { padding-top: 1.2rem; }
.kkBrett > .bz.unten { padding-bottom: 1.3rem; }
.kkBrett > .fz > *:last-child, .kkBrett > .bz > *:last-child { margin-bottom: 0; }

@media (max-width: 68rem) {
  .kkBrett > .fenster, .kkBrett > .blatt { grid-column: 1; }
  .kkBrett > .fz, .kkBrett > .bz { grid-column: 1; }
  /* 🔴 Diese Zeile muss HIER stehen, nicht im Block bei Abschnitt 2: die
     Grundregel `.kkBrett > .voll { grid-column: 2 }` steht weiter oben in
     dieser Datei, und eine Media Query erhoeht das Gewicht nicht — bei
     gleichem Gewicht gewinnt die spaetere Zeile. Stuende die Ausnahme
     frueher, legte das Raster weiter eine zweite Spalte an und das Brett
     waere breiter als der Schirm (gemessen 14.09.2026: /statistik 433 px
     bei 375 px). */
  .kkBrett > .voll { grid-column: 1; }
}

/* ══ 16 · Textproduktion (Schreiben) — Modulfarbe Gold `#F0D080` ══════
   Aus den Bildschirmaufnahmen vom 06.09.2026. */
.kkAuftrag { font-weight: 700; font-size: 1.06rem; margin: 0 0 0.6rem; color: #2A2A26; }
.kkSituation { font-style: italic; color: #4A4A42; margin: 0 0 0.9rem; }
.kkHilf { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }
.kkHilf span {
  font-family: 'Patrick Hand', cursive; font-size: 1.02rem; color: var(--kk-ink);
  padding: 0.22rem 0.7rem; border-radius: 8px;
  background: rgba(28,58,122,0.07); border: 1px solid rgba(28,58,122,0.22);
}
.kkZaehlZeile {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 0 0.5rem; padding-top: 0.8rem; border-top: 1px solid rgba(107,99,88,0.25);
}
.kkZaehler { font-family: 'Patrick Hand', cursive; font-size: 1.05rem; color: #6B6358; }
.kkZaehler.voll { color: #3FA25A; }
/* Schreiblinien, Master 18.7 */
.kkLinien {
  font-family: 'Patrick Hand', cursive; font-size: 1.1rem; color: var(--kk-ink);
  line-height: 2.6; margin: 0;
  background-image: repeating-linear-gradient(to bottom,
    transparent 0, transparent calc(2.6em - 1.5px),
    var(--kk-zeile) calc(2.6em - 1.5px), var(--kk-zeile) 2.6em);
}
.kkLinien .leer { color: rgba(28,58,122,0.3); font-style: italic; }
/* Verbesserung ueber dem Wort */
.kkUeber { position: relative; color: var(--kk-ink);
           border-bottom: 1.5px solid #C0463A; }
.kkUeber i {
  position: absolute; left: 0; top: -1.15em; white-space: nowrap; font-style: normal;
  font-family: 'Patrick Hand', cursive; font-size: 0.88em; color: #C0463A;
}

/* Die Korrekturabschnitte */
.kkAbschnitt {
  font-family: 'Patrick Hand', cursive; font-size: 1.7rem; color: var(--kk-ink);
  margin: 0 0 0.6rem;
}
.kkBewertung {
  font-family: 'Patrick Hand', cursive; font-size: 1.05rem; color: var(--kk-ink);
  line-height: 1.75; margin: 0 0 1rem; max-width: none;
}
.kkSpaltenKopf {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem;
  font-family: var(--font-label); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: #8A8A7E;
  padding-bottom: 0.4rem; border-bottom: 1px solid rgba(107,99,88,0.25);
}
.kkKat {
  font-family: 'Patrick Hand', cursive; font-size: 1.25rem; color: var(--kk-ink);
  margin: 1.1rem 0 0.25rem;
}
.kkKat b { color: #C0463A; font-size: 0.85rem; font-weight: 400; }
.kkRegel {
  font-family: 'Patrick Hand', cursive; font-size: 1.02rem; color: var(--kk-ink);
  opacity: 0.85; margin: 0 0 0.6rem; max-width: none;
}
.kkFehlerZeile {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; align-items: start;
  padding: 0.5rem 0; border-bottom: 1px solid rgba(107,99,88,0.16);
  font-family: 'Patrick Hand', cursive; font-size: 1.05rem; color: var(--kk-ink);
}
.kkFehlerZeile .falsch { color: #C0463A; border-bottom: 1.5px solid #C0463A; }
.kkFehlerZeile .feld {
  display: block; border-bottom: 1.5px solid rgba(28,58,122,0.35); min-height: 1.6em;
}
.kkFehlerZeile .fertig { color: var(--kk-ink); }
.kkNoteFuss {
  margin: 1.2rem 0 0; padding-top: 0.9rem; text-align: right;
  border-top: 1px solid rgba(107,99,88,0.25);
  font-family: 'Patrick Hand', cursive; font-size: 1.35rem; color: var(--kk-ink);
}
.kkNoteFuss .rechnung {
  display: block; font-family: var(--font-body); font-style: italic;
  font-size: 0.85rem; color: #6B6358; margin-top: 0.3rem;
}
.kkVorschlag { font-family: 'Patrick Hand', cursive; color: var(--kk-ink); font-size: 1.05rem; }
.kkVorschlag b { display: block; text-decoration: underline; margin-top: 0.8rem; }

/* ══ 17 · Statistik — Modulfarbe `#C4A8D4` (Master 3.8, HomeScreen STAT_ITEM)
   Die Bauteile selbst tragen die gemessenen Farben der App: Marken-Gruen fuer
   die Abschnittstitel, Ampel-Gruen/Rot fuer gewusst und nicht gewusst,
   Bernstein fuer „geht so" (Master 17, Stats-Ampel). */
.kkStat {
  border-radius: 20px; padding: 1.3rem 1.5rem;
  border: 1px solid rgba(245,245,220,0.10); background: rgba(255,255,255,0.035);
}
.kkStatTitel {
  font-family: var(--font-titel); font-weight: 800; font-size: 1.25rem;
  color: var(--marken); margin: 0 0 0.7rem; padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(152,216,170,0.25);
}
.kkStatTitel .zus { font-weight: 500; font-size: 0.92rem; color: rgba(245,245,220,0.45); margin-left: 0.5rem; }

/* Drei bis vier grosse Zahlen nebeneinander */
.kkZahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.kkZahlen > div { text-align: center; padding: 0.6rem 0.8rem; }
.kkZahlen > div + div { border-left: 1px solid rgba(245,245,220,0.12); }
.kkZahlen b {
  display: block; font-family: var(--font-titel); font-weight: 800; font-size: 2.6rem;
  color: #F5F2E8; text-shadow: 0 0 14px rgba(245,242,232,0.30); line-height: 1.1;
}
.kkZahlen b.gruen { color: #6FBF88; text-shadow: 0 0 14px rgba(111,191,136,0.35); }
.kkZahlen b.rot   { color: #D9645C; text-shadow: 0 0 14px rgba(217,100,92,0.35); }
.kkZahlen .lab {
  display: block; font-family: var(--font-label); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,245,220,0.72);
  margin-top: 0.35rem;
}
.kkZahlen .sub { display: block; font-size: 0.88rem; color: rgba(245,245,220,0.42); margin-top: 0.3rem; }

/* Balkenzeile: Fertigkeit — Balken — Prozent — Knopf */
.kkBalken {
  display: grid; grid-template-columns: minmax(7rem, 9rem) 1fr auto auto;
  gap: 0.9rem; align-items: center; padding: 0.7rem 0;
  border-bottom: 1px solid rgba(245,245,220,0.08);
}
.kkBalken .name { color: #F4F1E4; }
.kkBalken .name i { display: block; font-style: normal; font-size: 0.82rem; color: rgba(245,245,220,0.42); }
.kkBalken .spur { height: 11px; border-radius: 6px; background: rgba(245,245,220,0.12); overflow: hidden; }
.kkBalken .spur i { display: block; height: 100%; border-radius: 6px; }
.kkBalken .spur i.rot     { background: #C0554C; }
.kkBalken .spur i.bernst  { background: #DE9226; }
.kkBalken .spur i.gruen   { background: #3FA25A; }
.kkBalken .proz { color: #F4F1E4; min-width: 3.2rem; text-align: right; }
.kkBalken .zahl { font-family: var(--font-titel); font-weight: 800; font-size: 1.5rem;
                  color: #F5F2E8; min-width: 2rem; text-align: right; }
.kkBalken .knopf {
  font-size: 0.88rem; padding: 0.4rem 0.8rem; border-radius: 999px; white-space: nowrap;
  border: 1.5px solid rgba(245,245,220,0.3); color: #F4F1E4;
}
.kkBalken .knopf.an { background: #4FA46A; border-color: #4FA46A; color: #10240F; font-weight: 700; }

/* Hinweiszeile in der Statistik */
.kkHinweisZeile {
  border-radius: 12px; padding: 0.7rem 0.95rem; margin-bottom: 0.6rem;
  border: 1px solid rgba(245,245,220,0.10); background: rgba(255,255,255,0.03);
  color: rgba(245,245,220,0.86); max-width: none;
}

/* Wochenuebersicht */
.kkWoche { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; text-align: center; }
.kkWoche .tag {
  font-family: var(--font-label); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; color: rgba(245,245,220,0.45); margin-bottom: 0.4rem;
}
.kkWoche .tag.heute { color: #F4F1E4; }
.kkWoche .kreis {
  width: 2.6rem; height: 2.6rem; margin: 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(245,245,220,0.18); color: rgba(245,245,220,0.3);
}
.kkWoche .kreis.an {
  border-color: #6FBF88; color: #6FBF88; background: rgba(111,191,136,0.12);
}
.kkWoche .kreis.heute { box-shadow: 0 0 16px rgba(111,191,136,0.35); }
.kkWoche .symbole { margin-top: 0.4rem; font-size: 0.9rem; letter-spacing: 0.15em; }
.kkFreeze {
  float: right; font-size: 0.9rem; padding: 0.35rem 0.85rem; border-radius: 999px;
  border: 1.5px solid rgba(122,184,212,0.5); color: #9CC8DE;
}

/* Level und Abzeichen */
.kkLevel { display: flex; align-items: center; gap: 1.1rem; }
.kkLevel .ring {
  width: 4.2rem; height: 4.2rem; flex: 0 0 auto; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 2px solid rgba(111,191,136,0.55); color: #F4F1E4;
}
.kkLevel .ring b { font-family: var(--font-titel); font-weight: 800; font-size: 1.6rem; line-height: 1; }
.kkLevel .ring span { font-family: var(--font-label); font-size: 0.6rem; letter-spacing: 0.12em;
                      color: rgba(245,245,220,0.5); }
.kkLevel .rang { font-family: var(--font-titel); font-weight: 800; font-size: 1.3rem; color: #F4F1E4; }
.kkLevel .xp { margin-left: auto; font-family: var(--font-titel); font-weight: 800;
               font-size: 1.2rem; color: #F4F1E4; }
.kkXpSpur { height: 8px; border-radius: 4px; margin: 0.5rem 0 0.4rem;
            background: repeating-linear-gradient(90deg, rgba(245,245,220,0.18) 0 5px, transparent 5px 9px); }
.kkXpSpur i { display: block; height: 100%; border-radius: 4px; background: #F5F2E8;
              box-shadow: 0 0 10px rgba(245,242,232,0.4); }
.kkAbz { display: flex; gap: 0.8rem; margin-top: 0.6rem; }
.kkAbz span {
  width: 3.4rem; height: 3.4rem; border-radius: 12px; font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(245,245,220,0.22); background: rgba(255,255,255,0.05);
}

/* Punktreihe „wie gut du das Wort kannst" */
.kkPunkte { display: flex; align-items: center; gap: 0.35rem; }
.kkPunkte i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: rgba(245,245,220,0.25); }
.kkPunkte i.an { background: #6FBF88; }

/* Feld fuer den Elternzugang */
.kkFeldZeile { display: flex; gap: 0.7rem; margin: 0.8rem 0 0.6rem; }
.kkFeldZeile .eingabe {
  flex: 1 1 auto; padding: 0.7rem 0.95rem; border-radius: 12px;
  border: 1.5px solid rgba(245,245,220,0.22); color: rgba(245,245,220,0.4);
}
.kkFeldZeile .senden {
  padding: 0.7rem 1.4rem; border-radius: 12px; font-weight: 700; color: #F4F1E4;
  border: 1.5px solid rgba(152,216,170,0.45); background: rgba(152,216,170,0.12);
}
.kkKonto {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.6rem 0.95rem; border-radius: 12px; margin-bottom: 0.5rem;
  border: 1.5px solid rgba(245,245,220,0.14); color: #F4F1E4;
}
.kkKonto span { font-size: 0.88rem; padding: 0.3rem 0.75rem; border-radius: 8px;
                border: 1.5px solid rgba(217,100,92,0.5); color: #E08880; }

/* ══ 18 · Modulzeichen in der Überschrift — wie die Kachel in der App ══
   Abgerundetes Quadrat, Rand in der Modulfarbe, Flaeche leicht schraffiert.
   Steht nach stil.css und gewinnt deshalb bei gleicher Spezifitaet. */
h1 .modulzeichen {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; flex: 0 0 auto;
  border-radius: 16px; vertical-align: -0.8rem; margin-right: 0.75rem;
  color: var(--mode);
  border: 2px solid color-mix(in srgb, var(--mode) 55%, transparent);
  background-color: color-mix(in srgb, var(--mode) 9%, rgba(255,255,255,0.03));
  background-image: repeating-linear-gradient(45deg,
    rgba(245,245,220,0.05) 0 2px, transparent 2px 6px);
  box-shadow: 0 0 18px color-mix(in srgb, var(--mode) 14%, transparent);
  text-shadow: none;
}
h1 .modulzeichen svg.symbol { width: 26px; height: 26px; }
@media (max-width: 34rem) {
  h1 .modulzeichen { width: 2.5rem; height: 2.5rem; border-radius: 13px; vertical-align: -0.65rem; }
  h1 .modulzeichen svg.symbol { width: 22px; height: 22px; }

  /* Die Balkenzeile hat vier Spalten, die letzte traegt einen Knopf, der nie
     umbricht (`Gezielt ueben →`, 132 px). Auf 286 px Brett gehen sich Name,
     Balken, Prozent und Knopf nicht mehr aus — der Knopf stand 100 px vor der
     Flaeche (gemessen 14.09.2026). Als Flexzeile mit Umbruch nimmt der Name
     die erste Zeile, Balken, Prozent und Knopf die zweite. */
  .kkBalken { display: flex; flex-wrap: wrap; gap: 0.35rem 0.7rem; }
  .kkBalken .name { flex: 1 1 100%; }
  .kkBalken .spur { flex: 1 1 5rem; }
  .kkBalken .proz, .kkBalken .zahl { min-width: 0; }
  .kkBalken .knopf { flex: 0 0 auto; }

  /* Sieben Kreise zu 2,6 rem und sechs Luecken zu 0,5 rem brauchen 339 px.
     Die Wochenleiste hat 236. Die Kreise nehmen hier die Spaltenbreite und
     bleiben rund; ueber 2,6 rem wachsen sie nie. */
  .kkWoche { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3rem; }
  .kkWoche .kreis { width: 100%; max-width: 2.6rem; height: auto; aspect-ratio: 1; }
  .kkWoche .tag { font-size: 0.62rem; letter-spacing: 0.04em; }

  /* Die Kopfzeile des Arbeitsblatts traegt rechts ein Schild
     (`Klasse 8 · FR · 150–170 W. · 20 BE`, 246 px) mit `flex: 0 0 auto` — es
     schrumpft also nicht. Neben der Ueberschrift ragte es 64 px ueber die
     Flaeche (gemessen 14.09.2026). Hier darf die Zeile umbrechen und das
     Schild seine Breite hergeben. */
  .kkBlattKopf { flex-wrap: wrap; gap: 0.4rem; }
  .kkMeta { flex: 0 1 auto; }
}

/* ══ 19 · Grammatik — Fenster, Auswahl der Regeln, Regelbogen, Übung ══
   Modulfarbe Terrakotta `#C97B5A` (Master 3.8). Die Maße und die vier
   Marker sind aus `Grammatik Modul Planung/stil_bogen.css` gemessen
   (Design Master §6.5), nicht aus einem Dokument abgeschrieben:
   Tinte #1C3A7A · neongelb #F2F53C · neonorange #FFA23A · pink #FFA6C6.
   Neu am 10.09.2026 aus den Bildschirmaufnahmen des Grammatikmoduls. */
:root {
  --kk-gelb: #F2F53C;   /* worauf es ankommt */
  --kk-oran: #FFA23A;   /* die Form, aus der es entsteht */
}
/* Ein Marker ist ein Stück, kein Text — er bricht nie um (§6.5.1). */
.mk.gelb, .mk.oran { white-space: nowrap; }
.mk.gelb { background: linear-gradient(to bottom, transparent 6%, var(--kk-gelb) 16%, var(--kk-gelb) 84%, transparent 96%); }
.mk.oran { background: linear-gradient(to bottom, transparent 6%, var(--kk-oran) 16%, var(--kk-oran) 84%, transparent 96%); }

/* Das Fenster des Moduls: die gewählte Zeile trägt hier die Modulfarbe,
   nicht das Marken-Grün — so steht es im Dialog des Grammatikmoduls. */
.kkGram .kkOpt.an {
  border-color: color-mix(in srgb, var(--mode) 55%, transparent);
  background: color-mix(in srgb, var(--mode) 15%, transparent);
  color: var(--mode);
}
.kkGram .kkZwei .kkOpt.an { color: #F4F1E4; }
.kkKlasse.sechs { grid-template-columns: repeat(6, 1fr); }
.kkGram .kkReiter span { border-color: color-mix(in srgb, var(--mode) 35%, transparent); }
.kkGram .kkReiter .an {
  border-color: color-mix(in srgb, var(--mode) 75%, transparent);
  background: color-mix(in srgb, var(--mode) 16%, transparent);
  color: var(--mode); font-weight: 700;
}
/* Die Kapitelliste mit Kästchen */
.kgKap { display: grid; gap: 0.5rem; }
.kgKap p {
  display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.8rem; margin: 0; max-width: none;
  padding: 0.55rem 0.9rem; border-radius: 11px;
  border: 1.5px solid rgba(245,245,220,0.14); background: rgba(255,255,255,0.03);
}
.kgKap .kaestchen {
  width: 1.05rem; height: 1.05rem; border-radius: 4px; margin-top: 0.2rem;
  border: 1.5px solid rgba(245,245,220,0.30);
}
.kgKap b { display: block; font-weight: 700; color: #F5F5DC; }
.kgKap i { font-style: normal; font-size: 0.88rem; color: rgba(245,245,220,0.45); }

/* Die Auswahl der Regeln — Bände und Themen, Zeile für Zeile */
.kgSuche {
  margin: 0 0 1.1rem; max-width: none; padding: 0.5rem 0.15rem;
  border-bottom: 1.5px solid rgba(245,245,220,0.18); color: rgba(245,245,220,0.26);
}
.kgListe {
  border: 1.5px solid color-mix(in srgb, var(--mode) 42%, transparent);
  border-radius: 14px; overflow: hidden; margin-bottom: 0.7rem;
}
.kgListe > b {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.6rem 0.9rem; font-size: 1.08rem; color: #F5F5DC; background: rgba(0,0,0,0.20);
}
.kgZahl {
  font-family: var(--font-label); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--mode); white-space: nowrap; border-radius: 5px; padding: 0.15rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--mode) 40%, transparent);
  background: color-mix(in srgb, var(--mode) 15%, transparent);
}
.kgUnite {
  margin: 0; max-width: none; padding: 0.7rem 0.9rem 0.25rem;
  font-family: var(--font-label); font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--marken);
  background: rgba(255,255,255,0.04);
}
.kgZeile {
  display: grid; grid-template-columns: 8.6rem 1fr; gap: 1rem; margin: 0; max-width: none;
  padding: 0.5rem 0.9rem; background: rgba(255,255,255,0.04);
  border-top: 1px solid rgba(245,245,220,0.08);
}
.kgZeile .ref {
  font-family: var(--font-label); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em;
  color: rgba(245,245,220,0.50); white-space: nowrap;
}
.kgZeile .tit { color: #F5F5DC; }
@media (max-width: 40rem) { .kgZeile { grid-template-columns: 1fr; gap: 0.1rem; } }

/* ── Der Regelbogen auf dem Blatt ─────────────────────────────────── */
.kgKopf { display: flex; align-items: flex-start; gap: 0.9rem; }
.kgKopf .emblem { flex: 0 0 auto; color: var(--kk-ink); margin-top: 0.25rem; }
.kgLab {
  display: block; font-family: var(--font-label); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--kk-stift);
}
.kgTitel {
  font-family: var(--font-titel); font-size: 1.55rem; font-weight: 800;
  color: var(--kk-ink); margin: 0.1rem 0 0; line-height: 1.2;
}
.kgSub { font-size: 0.95rem; color: var(--kk-stift); margin: 0.15rem 0 0; max-width: none; }
.kgBuch {
  margin-left: auto; text-align: right; flex: 0 0 auto; max-width: none;
  font-family: var(--font-label); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.05em; color: var(--kk-stift);
}
.kgBuch b { display: block; font-size: 0.84rem; color: var(--kk-ink); margin-top: 0.15rem; }
.kgLinie { height: 1.5px; background: rgba(28,58,122,0.24); margin: 0.95rem 0 1.15rem; border-radius: 1px; }

.kgKasten { border-radius: 5px; padding: 0.75rem 1rem 0.85rem; background: rgba(255,255,255,0.32); }
.kgKasten.regel { border: 2px solid rgba(28,58,122,0.45); }
.kgKasten.rahmen { border: 1px solid rgba(28,58,122,0.18); padding: 0.9rem 1.2rem 1rem; }
.kgKasten + .kgKasten, .kgKasten + .kgEinheit, .kgEinheit + .kgEinheit { margin-top: 0.9rem; }
.kgKKopf { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.5rem; }
.kgKKopf .kgLab { margin-bottom: 0; }
.kgText { font-weight: 700; font-size: 1.02rem; color: var(--kk-mktext); margin: 0; max-width: none; }
.kgText b { font-weight: 800; }
.kgEinheit {
  border: 2px solid var(--kk-gelb); border-radius: 5px; overflow: hidden;
  background: color-mix(in srgb, var(--kk-gelb) 10%, rgba(255,255,255,0.3));
}
.kgEinheit .kgKasten { border: none; background: transparent; }
.kgBsp {
  padding: 0.75rem 1rem 0.85rem 1.7rem; background: rgba(255,255,255,0.42);
  border-top: 1px solid color-mix(in srgb, var(--kk-gelb) 60%, transparent);
}
.kgSatz { display: block; font-weight: 700; font-size: 1.1rem; color: var(--kk-ink); }
.kgSatz i { display: block; font-style: normal; font-weight: 400; font-size: 0.85rem;
            color: var(--kk-stift); margin-top: 0.1rem; }
.kgSatz + .kgSatz { margin-top: 0.6rem; }
.kgMitte { text-align: center; }
.kgLaut { font-weight: 400; font-size: 0.9rem; color: var(--kk-stift); }

/* Das Fragezeichen: Tintenkreis über einem Markerfleck — wissenswert, nicht nötig */
.kgFrageWrap { position: relative; display: inline-flex; margin-left: auto; flex: 0 0 auto; }
.kgFrageWrap::before {
  content: ""; position: absolute; left: -0.2rem; top: 0.35rem; width: 1.95rem; height: 1rem;
  background: var(--kk-gelb); mix-blend-mode: multiply; border-radius: 3px; transform: rotate(-5deg);
}
.kgFrage {
  position: relative; width: 1.6rem; height: 1.6rem; border: 2px solid var(--kk-ink);
  border-radius: 50%; color: var(--kk-ink); font-family: var(--font-titel);
  font-weight: 800; font-size: 0.95rem; line-height: 1.42rem; text-align: center;
}

.kgAbschnitt {
  display: flex; align-items: center; gap: 0.9rem; margin: 1.5rem 0 0.75rem;
  font-family: var(--font-label); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--kk-stift);
}
.kgAbschnitt::after { content: ""; flex: 1; height: 1px; background: rgba(28,58,122,0.14); }

/* Die Formentabelle */
.kgTab { border-collapse: collapse; margin: 0 auto; }
.kgTab th {
  font-family: var(--font-label); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--kk-stift);
  padding: 0 0.9rem 0.4rem;
}
.kgTab td {
  padding: 0.35rem 0.9rem; text-align: center; font-weight: 700; font-size: 1.05rem;
  color: var(--kk-ink); border-top: 1px solid rgba(28,58,122,0.12);
}
.kgTab td.pron {
  font-family: var(--font-label); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--kk-stift); text-align: right; font-weight: 700;
}

/* Der Auslöser-Bogen wird als ein Bild gezeichnet: nur so sitzt der Pfeil
   auf dem Wort, das die Form auslöst — ohne Skript auf der Seite. */
.kgBild { display: block; width: 100%; height: auto; }

/* Die Zeichenerklärung — sie steht unter jedem Bogen */
.kgZeichen { margin-top: 1.5rem; border-top: 1px solid rgba(184,176,144,0.6); padding-top: 0.9rem; }
.kgZeichenListe {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.5rem 1.6rem; font-size: 0.88rem; color: var(--kk-stift);
}
.kgZeichenListe span { display: block; }
.kgZeichenListe b { font-weight: 700; color: var(--kk-mktext); margin-right: 0.4rem; }
.kgProbeR { border: 2px solid rgba(28,58,122,0.45); border-radius: 4px; padding: 0 0.35rem; }
.kgProbeA { border: 2px solid var(--kk-gelb); border-radius: 4px; padding: 0 0.35rem; }

/* ── Die Übung: Fließtext mit Lücken ──────────────────────────────── */
.kgUeb { line-height: 2.5; }
.kgUeb .grund { color: var(--kk-stift); }
.kgLk { display: inline-block; min-width: 6.5rem; margin: 0 0.25rem;
        border-bottom: 1.5px solid var(--kk-zeile); }
.kgLk.end { min-width: 3.6rem; border-bottom-style: dotted; border-bottom-width: 2px; }
.kgLk.aktiv {
  min-width: 8rem; height: 2.3rem; vertical-align: -0.75rem; border-bottom: 2px solid var(--mode);
  background: rgba(255,255,255,0.55); border-radius: 3px 3px 0 0;
}
.kgFuss { font-size: 0.68rem; vertical-align: super; color: #C97B5A; }

/* ══ 20 · Elternbereich und Wochenübersicht ═══════════════════════════
   Die Farben der E-Mail sind aus der Bildschirmaufnahme vom 10.09.2026
   gemessen, nicht geschätzt: Grund #1F2E23 · Karte #344539 · Kreise und
   Label-Grün #A6D6AE · Abzeichen-Gold #EBD18B · Knopfrand #DA9B35 ·
   Knopffläche #597160. */
.kkSchalt { margin-top: 0.9rem; }
.kkSchalt .stand { font-size: 0.92rem; color: rgba(245,245,220,0.5); margin: 0.5rem 0 0.8rem; }
.kkSchaltKnopf {
  display: inline-block; padding: 0.55rem 1.3rem; border-radius: 11px;
  font-weight: 700; color: #F4F1E4;
  border: 1.5px solid rgba(245,245,220,0.28); background: rgba(255,255,255,0.03);
}

.kkMail {
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 10px 34px rgba(0,0,0,0.34);
  border: 1px solid rgba(245,245,220,0.12);
}
.kkMailKopf {
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; max-width: none;
  margin: 0; padding: 0.7rem 1.1rem; background: #FFFFFF; color: #4A5A70; font-size: 0.9rem;
}
.kkMailKopf b { color: #1C1810; font-weight: 800; }
.kkMailKopf i { margin-left: auto; font-style: normal; color: #7A8698; white-space: nowrap; }
.kkMailBody { background: #1F2E23; padding: 1.6rem 1.2rem 1.4rem; text-align: center; }
.kkMailWort {
  margin: 0; max-width: none; font-family: var(--font-titel); font-weight: 800;
  font-size: 1.7rem; letter-spacing: 0.22em; color: #F5F5DF;
}
.kkMailUnter {
  margin: 0.35rem 0 1.2rem; max-width: none;
  font-family: var(--font-label); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,245,223,0.5);
}
.kkMailKarte {
  background: #344539; border: 1px solid rgba(245,245,223,0.10); border-radius: 14px;
  padding: 1.3rem 1.1rem 1.2rem;
}
.kkMailSatz {
  margin: 0 0 1rem; max-width: none; font-family: var(--font-titel);
  font-weight: 800; font-size: 1.12rem; color: #F5F5DF;
}
.kkMailWoche { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.kkMailWoche span {
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.9rem;
  border: 1.5px solid rgba(245,245,223,0.22); color: rgba(245,245,223,0.38);
}
.kkMailWoche span.an { background: #A6D6AE; border-color: #A6D6AE; color: #1F2E23; }
.kkMailZeile { margin: 0 0 0.7rem; max-width: none; color: #CFD2BD; font-size: 0.98rem; }
.kkMailZeile b { color: #A6D6AE; font-weight: 700; }
.kkMailZeile.gold b { color: #EBD18B; }
.kkMailKnopf {
  display: inline-block; margin: 0.5rem 0 0.9rem; padding: 0.75rem 1.8rem;
  border-radius: 13px; font-weight: 800; color: #F5F5DF;
  border: 2px solid #DA9B35; background: #597160;
  box-shadow: 0 0 16px rgba(218,155,53,0.22);
}
.kkMailFuss { margin: 0; max-width: none; font-size: 0.82rem; color: rgba(245,245,223,0.42); }
.kkMailFuss u { text-decoration-color: rgba(245,245,223,0.42); }

/* ══ 21 · Sprachmittlung — Ausgangstext und Leitfragen ════════════════
   Die Kästen des Arbeitsblatts beim Aufgabentyp Mediation, nachgebaut
   nach der Bildschirmaufnahme vom 12.09.2026 (Klasse 8, FR): ein Kasten
   „Ausgangstext (DE)" mit Kopfzeile und Falt-Wort, darunter ein Kasten
   „Leitfragen". Beide sitzen auf dem Blatt, nicht auf der Tafel. */
.kkQuelle {
  border-radius: 10px; border: 1px solid rgba(107,99,88,0.3);
  background: rgba(240,208,128,0.07); overflow: hidden; margin: 0 0 1rem;
}
.kkQuelleKopf {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.5rem 0.9rem; background: rgba(240,208,128,0.2);
  font-family: var(--font-label); font-size: 0.63rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: #6B6358;
}
.kkQuelleKopf .falt {
  letter-spacing: 0; text-transform: none; font-size: 0.8rem;
  font-weight: 400; color: #8A7F6E;
}
.kkQuelleText { padding: 0.9rem 1rem; }
.kkQuelleText p { margin: 0 0 0.7rem; max-width: none; color: #2A2A26; }
.kkQuelleText p:last-child { margin-bottom: 0; }
.kkQuelleText p.titel { font-weight: 700; }
.kkQuelleText p.mehr { color: #8A7F6E; }
.kkFragen { margin: 0; padding: 0.9rem 1rem 0.9rem 2.3rem; }
.kkFragen li { margin: 0 0 0.45rem; max-width: none; color: #2A2A26; }
.kkFragen li:last-child { margin-bottom: 0; }

/* ══ 22 · Regelbogen auf der Website ══════════════════════════════════
   Der Bogen kommt unverändert aus dem Grammatikmodul; sein Stilblatt
   liegt als `bogen.css` daneben und ist beim Bauen auf `.bogenRahmen`
   eingefasst. Hier steht nur, wie der Rahmen in der Seite sitzt, und
   das Beispiel unter einer Erklärkarte. */
.bogenRahmen {
  margin: 2rem 0 2.6rem; border-radius: 14px; overflow: hidden;
}
.bogenBsp {
  font-weight: 700; color: var(--creme);
  padding: 0.7rem 0 0; margin: 0.4rem 0 0;
  border-top: 1px solid rgba(245,245,220,0.16);
}
.bogenZuordnung {
  font-family: var(--font-label);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: color-mix(in srgb, var(--mode) 78%, var(--creme));
  margin: 0 0 0.55rem;
}