/* 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: die Notiz steht unter ihrer
   Zeile, der Strich entfaellt. */
@media (max-width: 68rem) {
  .kkBrett { grid-template-columns: 1fr; column-gap: 0; }
  .kkBrett > .papier { grid-column: 1; }
  .kkBrett > .z { grid-column: 1; }
  .kkNotiz.li, .kkNotiz.re { grid-column: 1; margin: 1.5rem 1.4rem 0.4rem; }
  .kkNotiz::before {
    top: calc(-1.5rem + 7px); left: 1.6rem; right: auto;
    width: 1.5px; height: calc(1.5rem - 7px); margin: 0;
  }
  .kkNotiz::after {
    top: calc(-1.5rem - 7px); left: calc(1.6rem - 7px); right: auto; margin: 0;
    border-color: transparent; border-bottom-color: #F4F1E4;
  }
}
@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; }
}

/* ══ 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; }
}