/* ============================================================
   Sustainabim Kurse — Mitgliederbereich „Der Weg“ (erlebnis.css)
   08.10.2026: Eigene Stildatei für die Mitgliederseiten (/kurse,
   /kurs/:slug, /lektion/:id, /). Wird nur in den Bereichen „kurse“
   und „schaufenster“ geladen (view.php) und greift ausschließlich
   unter .kb-seite — Verwaltung, Community und Kasse bleiben
   unverändert. kurse.css (?v=23) bleibt unberührt.

   Aufbau:
     1. Schrift (Geist kursiv)
     2. Tokens unter .kb-seite
     3. Grundtypografie und Hilfsklassen
     4. Knöpfe (.kb-btn)
     5. Hero (Tinte, Lichtkegel) und Schlussblatt
     6. Kennzahl, Fakten, Balken
     7. Deckblatt
     8. Weiter-bei-Karte
     9. Karte (Weg mit Knoten)
    10. Pille
    11. Regal und Kachel
    12. Nächste Schritte (Zellen, Zeile, Band)
    13. Lehrplan (Abschnitte, Lektionszeilen)
    14. Lektion (Krume, Abschluss, Blättern, Leiste)
    15. Meilenstein-Band
    16. Vorverkaufs-Band, Kasse, Unterlagen, Werkzeuge
    17. Start-Ideen (08.10.2026): Brücke, Stand-Zeile, Drei Sätze,
        Begleitwort, Drei Dinge, Mappe, Termin, Schlussblatt-Links,
        Einstieg nach Lage
    17 b. Bewertungskarte „Ihre Stimme“ (10.10.2026)
    18. Reveal
    19. Bewegung (Keyframes, nur ohne reduced-motion und mit JS)
    20. Reduced-motion

   08.10.2026 (Start-Ideen): Abschnitt 17 neu eingefügt, die drei
   folgenden Abschnitte dadurch um eins weitergezählt (nur Nummern,
   keine Regeln verändert). Version in view.php: ?v=3.
   10.10.2026: Abschnitt 17 b (Bewertungskarte, src/bewertungen.php)
   eingefügt, ohne die folgenden Nummern zu ändern; in Abschnitt 20
   die Sterne ergänzt. Version in view.php: ?v=4 (mit erlebnis.js).
   10.10.2026 (Prüfung, noch vor dem Hochladen, deshalb weiter ?v=4):
   Token --warn-text (Abschnitt 2), Vorschau der Sterne voll gefüllt,
   mitlaufender Kopf ab 980px, kompakte Ansicht als <details>,
   Knopf „Einwilligung widerrufen“, Zusätze ohne Umbruch.
   ============================================================ */


/* ------------------------------------------------------------
   1. Schrift — Geist kursiv 400/500 (Ordnungszahlen, Zitate,
   Teilworte). Pfade relativ wie in kurse.css:7-12.
   ------------------------------------------------------------ */
@font-face { font-family:'Geist'; font-style:italic; font-weight:400; font-display:swap;
  src:url('fonts/geist-italic-latin-64addf.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Geist'; font-style:italic; font-weight:400; font-display:swap;
  src:url('fonts/geist-italic-latin-ext-a831c9.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Geist'; font-style:italic; font-weight:500; font-display:swap;
  src:url('fonts/geist-italic-latin-64addf.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Geist'; font-style:italic; font-weight:500; font-display:swap;
  src:url('fonts/geist-italic-latin-ext-a831c9.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }


/* ------------------------------------------------------------
   2. Tokens — nur unter .kb-seite (Werte aus styles.css:155-187).
   Überschrieben gegenüber kurse.css: --text-faint (Kontrast 5,4:1
   statt 3,4:1), --gut, --warn, --radius. Alles andere ergänzt.
   ------------------------------------------------------------ */
.kb-seite {
  --ink:#17140f; --ink-soft:#2b251d;
  --paper:#f7f2ea; --paper-2:#eee4d3;
  --mauve:#9c6b56; --mauve-deep:#7c4f3d;
  --mauve-lesbar:#8a5a47;           /* Akzenttext auf Papier, 5,19:1 */
  --mauve-hell:#ab7a64;             /* Akzenttext auf Tinte, 4,98:1 */
  --line:rgba(23,20,15,0.13); --line-strong:rgba(23,20,15,0.22);
  --line-on-dark:rgba(247,242,234,0.24);
  --text:#1c1811; --text-soft:#5c5346; --text-faint:#6b6255;
  --on-dark:#f7f2ea; --on-dark-soft:rgba(247,242,234,0.72); --on-dark-faint:rgba(247,242,234,0.5);
  --gut:#3f6b4a; --gut-hell:#8fb79a; --warn:#9a6b1f; --schlecht:#9a3b32;
  --warn-text:#7d5617;              /* 10.10.2026: Warnton für kleinen Text auf Papier, 5,86:1 (--warn hat nur 4,19:1) */
  --radius:3px; --radius-pill:999px;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --gap:clamp(1.25rem,2.5vw,2.5rem);
  --kb-knopf-grund:#8f5f4b;
  --kb-licht:rgba(156,107,86,0.36);
  --kb-schatten-gegenstand:0 18px 50px -28px rgba(23,20,15,0.5);
  --kb-schatten-deckblatt-dunkel:drop-shadow(0 18px 34px rgba(0,0,0,0.55));
  --kb-schatten-deckblatt-hell:drop-shadow(0 18px 30px rgba(23,20,15,0.32));
  --kb-schatten-knopf:0 8px 20px rgba(124,79,61,0.32);
  --kb-abschnitt:clamp(2.5rem,6vw,4rem);     /* Abstand zwischen Seitenblöcken */
  --kb-grund:var(--paper);                   /* Grundfarbe der jeweiligen Fläche (Halo der Knoten) */
  --kb-wrap:clamp(2.5rem,6vw,4.5rem);        /* = .wrap padding-block in kurse.css:103 */
  display:flex; flex-direction:column; gap:var(--kb-abschnitt);
  color:var(--text);
}
/* Dunkle Flächen setzen ihre Grundfarbe für Halos und Umrisse um. */
.kb-hero, .kb-zelle--tinte, .kb-band--persoenlich { --kb-grund:var(--ink); }


/* ------------------------------------------------------------
   3. Grundtypografie und Hilfsklassen
   ------------------------------------------------------------ */
.kb-seite h1, .kb-seite h2, .kb-seite h3, .kb-seite h4,
.kb-seite .kb-h1, .kb-seite .kb-h2, .kb-seite .kb-h3 {
  font-family:var(--font-display); font-weight:500; line-height:1.08; margin:0; text-wrap:balance;
}
.kb-seite .kb-h1 { font-size:clamp(2.2rem,5vw,3.4rem); letter-spacing:-0.022em; max-width:22ch; }
.kb-seite .kb-h2 { font-size:clamp(1.9rem,4vw,2.6rem); letter-spacing:-0.018em; max-width:24ch; }
.kb-seite .kb-h3 { font-size:clamp(1.15rem,2.2vw,1.45rem); }
@media (max-width:559px) { .kb-seite .kb-h1 { font-size:clamp(2rem,8.5vw,2.6rem); } }

.kb-seite em, .kb-em, .kb-nr, .kb-zitat, .kb-weiter-nr {
  font-family:var(--font-display); font-style:italic; font-weight:400;
}
.kb-em { color:var(--mauve-lesbar); }
.kb-nr { color:var(--mauve-lesbar); font-size:0.92em; letter-spacing:0; }
.kb-eyebrow {
  display:block; font-family:var(--font-body); font-size:0.72rem; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--mauve-deep); margin:0;
}
.kb-lede { color:var(--text-soft); font-size:clamp(1.02rem,1.6vw,1.2rem); line-height:1.55; max-width:46ch; }
.kb-seite .tabular, .kb-kennzahl, .kb-balken, .kb-krume-stand { font-variant-numeric:tabular-nums; }

/* Sichtbar für Screenreader, unsichtbar auf dem Bildschirm. */
.kb-sr {
  position:absolute; width:1px; height:1px; overflow:hidden; margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* Textlink mit Pfeil */
.kb-link {
  color:var(--mauve-lesbar); font-weight:600; font-size:0.92rem; text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.kb-link:hover { color:var(--mauve-deep); border-bottom-color:currentColor; }
.kb-pfeil { display:inline-block; transition:transform 0.2s var(--ease); }
a:hover > .kb-pfeil, .kb-btn:hover .kb-pfeil { transform:translateX(3px); }

/* Fokus: überall sichtbar, auf dunklen Flächen in Papier (Mauve auf Tinte wäre zu schwach). */
.kb-seite a:focus-visible, .kb-seite button:focus-visible, .kb-seite summary:focus-visible,
.kb-seite .btn:focus-visible, .kb-seite .kb-lektion:focus-visible {
  outline:2px solid var(--mauve); outline-offset:3px;
}
.kb-hero a:focus-visible, .kb-hero button:focus-visible,
.kb-zelle--tinte a:focus-visible, .kb-band--persoenlich a:focus-visible,
.kb-hero .btn:focus-visible, .kb-zelle--tinte .btn:focus-visible { outline-color:var(--on-dark); }

.kb-hinweis { font-size:0.95rem; color:var(--text-soft); }
.kb-hinweis a { color:var(--mauve-lesbar); font-weight:600; text-decoration:none; }
.kb-hinweis a:hover { text-decoration:underline; text-underline-offset:3px; }
.kb-leer {
  border:1px dashed var(--line-strong); padding:2rem 1.5rem; text-align:center;
  color:var(--text-soft); font-size:0.97rem; max-width:none;
}
.kb-seite .page-head { margin-bottom:0; }
.kb-seite .page-head h1 { font-weight:500; }
/* 08.10.2026 (Korrektur): Eyebrows als h2 (Regal, Lehrplan) behalten die Eyebrow-Schrift — .kb-seite h2 ist spezifischer als .kb-eyebrow. */
.kb-seite h2.kb-eyebrow { font-family:var(--font-body); font-weight:600; line-height:1.4; }
/* Trefferfläche eigenständiger Textlinks auf 24px (WCAG 2.5.8), ohne das Layout zu verschieben. */
.kb-krume-zurueck, .kb-band-zeilen a, .kb-link { display:inline-block; padding-block:0.2rem; margin-block:-0.2rem; }


/* ------------------------------------------------------------
   4. Knöpfe — Hub, Schatten, Haken (.kb-btn nur hier)
   ------------------------------------------------------------ */
.kb-btn {
  position:relative; white-space:nowrap;
  transition:background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease),
             transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
/* 08.10.2026 (Korrektur): In Zellen, Band, Weiter-Karte und Kachel bricht ein langer Knopf („Kostenloses Erstgespräch (20 Min.) →“)
   um, statt über die Fuge zu ragen oder in der Tinte-Zelle abgeschnitten zu werden (2/3 Spalten ab 760/980px). */
.kb-zelle .kb-btn, .kb-band .kb-btn, .kb-weiter .kb-btn, .kb-kachel-aktion .kb-btn { white-space:normal; text-align:center; max-width:100%; }
.kb-zelle-knoepfe > .kb-btn, .kb-band-knoepfe > .kb-btn { max-width:100%; }
/* Ein Primärknopf-Grund auf der ganzen Seite (auch Kaufkasten, Werkzeuge): der Website-Grund #8f5f4b statt Mauve (4,06:1). */
.kb-seite .btn-primary { background-color:var(--kb-knopf-grund); }
.kb-seite .btn-primary:hover { background-color:var(--mauve-deep); }
.kb-btn.btn-primary { background-color:var(--kb-knopf-grund); color:var(--paper); }
.kb-btn.btn-primary:hover { background-color:var(--mauve-deep); transform:translateY(-1px); box-shadow:var(--kb-schatten-knopf); }
.kb-btn.btn-ghost { border-color:var(--line-strong); color:var(--text); background-color:transparent; }
.kb-btn.btn-ghost:hover { border-color:var(--ink); background-color:rgba(23,20,15,0.045); transform:translateY(-1px); }
.kb-btn[disabled], .kb-btn[disabled]:hover { opacity:0.5; cursor:not-allowed; transform:none; box-shadow:none; }
/* Ghost-Knopf auf Tinte (Gast-Hero „Zum Kaufkasten ↓“) */
.kb-seite .btn-ghost.on-dark { border-color:var(--line-on-dark); color:var(--on-dark); background-color:transparent; }
.kb-seite .btn-ghost.on-dark:hover { border-color:var(--on-dark); background-color:rgba(247,242,234,0.08); }
@media (max-width:559px) { .kb-seite .kb-btn { width:100%; white-space:normal; } }

/* Abschließen-Knopf: Haken statt Pfeil, sobald er „fertig“ ist oder arbeitet. */
.kb-knopf-fertig { gap:0.6rem; }
.kb-knopf-haken {
  display:inline-block; width:0; height:0; flex:none; overflow:hidden; position:relative;
  transition:width 0.24s var(--ease), opacity 0.24s var(--ease), transform 0.24s var(--ease);
  opacity:0; transform:scale(0.6);
}
.kb-knopf-haken::before {
  content:''; position:absolute; left:2px; top:1px; width:11px; height:6px;
  border-left:2.2px solid currentColor; border-bottom:2.2px solid currentColor; transform:rotate(-45deg);
}
.kb-knopf-fertig.ist-fertig, .kb-knopf-fertig[aria-busy="true"] { background-color:var(--ink); color:var(--paper); }
.kb-knopf-fertig.ist-fertig:hover, .kb-knopf-fertig[aria-busy="true"]:hover { background-color:var(--ink); transform:none; box-shadow:none; }
.kb-knopf-fertig.ist-fertig .kb-knopf-haken, .kb-knopf-fertig[aria-busy="true"] .kb-knopf-haken {
  width:16px; height:12px; opacity:1; transform:scale(1); color:var(--gut-hell);
}
.kb-knopf-fertig.ist-fertig .kb-pfeil, .kb-knopf-fertig[aria-busy="true"] .kb-pfeil { display:none; }
.kb-knopf-text { display:inline-block; transition:opacity 0.2s var(--ease); }
.kb-knopf-fertig[aria-busy="true"] .kb-knopf-text { opacity:0.9; }


/* ------------------------------------------------------------
   5. Hero — Tinte, ein Lichtkegel, Inhalt im Container.
   Liegt als erstes Kind in .kb-seite und wird per negativem Rand
   an den Containerrand und nach oben an den Kopf gezogen.
   ------------------------------------------------------------ */
.kb-hero {
  position:relative; overflow:hidden; isolation:isolate;
  background-color:var(--ink); color:var(--on-dark);
  margin-inline:calc(var(--gut-x) * -1);
  padding:clamp(3rem,7vw,5.5rem) var(--gut-x) clamp(3.5rem,8vw,6rem);
  /* 08.10.2026 (Korrektur): Vollbreit wie .page-hero der Website — die Tinte läuft über den 1180-px-Container hinaus
     (ab ≈1240px sonst ein Kasten mit Papierrand). Schatten mit Spread statt 50vw-Rändern: kein Scrollbalken-Versatz,
     kein horizontales Scrollen, Inhalt bleibt am Container ausgerichtet. clip-path begrenzt den Schatten senkrecht. */
  box-shadow:0 0 0 100vmax var(--ink);
  clip-path:inset(0 -100vmax);
}
.kb-seite > .kb-hero:first-child { margin-top:calc(var(--kb-wrap) * -1); }
.kb-hero::before {
  content:''; position:absolute; inset:-20% -10% auto auto; width:70%; aspect-ratio:1; z-index:-1;
  background:radial-gradient(circle at center, var(--kb-licht) 0%, rgba(156,107,86,0.12) 38%, rgba(156,107,86,0) 68%);
  opacity:0.9; pointer-events:none;
}
.kb-hero::after {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(247,242,234,0.03), rgba(247,242,234,0) 40%);
}
.kb-hero-inhalt { position:relative; display:flex; flex-direction:column; gap:1.5rem; max-width:1180px; margin-inline:auto; }
.kb-hero-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(2.25rem,5vw,4rem); align-items:start; }
.kb-hero-text { display:flex; flex-direction:column; gap:1.1rem; min-width:0; }
.kb-hero-seite { display:flex; flex-direction:column; gap:2rem; min-width:0; }
@media (min-width:980px) {
  .kb-hero-grid { grid-template-columns:1.05fr 0.95fr; }
  .kb-hero-seite { align-items:flex-start; }
}

.kb-hero .kb-eyebrow { color:var(--on-dark); opacity:0.85; }
.kb-hero .kb-h1 { color:var(--on-dark); }
.kb-hero .kb-em { color:var(--mauve-hell); }
.kb-hero .kb-lede { color:var(--on-dark-soft); }
.kb-hero .kb-nr { color:var(--mauve-hell); }
.kb-hero-kurstitel { font-family:var(--font-display); font-style:italic; font-size:0.98rem; color:var(--on-dark-soft); margin-bottom:-0.4rem; }
.kb-hero--kurse .kb-h1 { font-size:clamp(2.05rem,4.6vw,3.35rem); }
@media (max-width:559px) { .kb-hero--kurse .kb-h1 { font-size:clamp(2rem,8.5vw,2.6rem); } }
.kb-hero .kb-link { color:var(--on-dark); }
.kb-hero .kb-link:hover { color:var(--on-dark); border-bottom-color:var(--mauve-hell); }

/* Anrechnungszeile im Gast-Hero: kursiv, leise */
.kb-hero .kb-anrechnung, .kb-hero .kb-hero-anrechnung, .kb-hero .kb-hero-text > em { color:var(--on-dark-soft); font-size:0.98rem; }
.kb-hero .kb-hero-anrechnung .kb-em { color:var(--on-dark-soft); }

/* Varianten: Kursseite (Lichtkegel rechts oben beim Deckblatt), Gast (nur Ghost-Knopf
   und Deckblatt rechts), Vorverkauf (Balken ohne Füllung, Zahl in Mauve). */
/* 08.10.2026 (Korrektur): Der Kegel liegt hinter dem Deckblatt (unten rechts), nicht hinter der Weiter-bei-Karte —
   dort drückte er den Kontrast der Marke in --mauve-hell auf ≈3,2:1. */
.kb-hero--kurs::before, .kb-hero--kurse::before { inset:auto -10% -35% auto; }
.kb-hero--gast .kb-hero-seite { gap:1.25rem; }
.kb-hero--gast .kb-hero-seite .btn { align-self:flex-start; }
.kb-hero--vorverkauf .kb-balken-fuell { width:0; }
.kb-hero--vorverkauf .kb-hero-seite .kb-weiter-marke { color:var(--on-dark); opacity:0.85; }

/* Kurs abgeschlossen: der Lichtkegel wird grün-warm, der Kopf trägt das Schlussblatt. */
.kb-hero--fertig::before { background:radial-gradient(circle at center, rgba(63,107,74,0.42) 0%, rgba(63,107,74,0.14) 38%, rgba(63,107,74,0) 68%); }
.kb-hero--fertig .kb-eyebrow { color:var(--gut-hell); opacity:1; }
.kb-hero--fertig .kb-kennzahl-zahl { color:var(--gut-hell); }
.kb-hero--fertig .kb-balken-fuell { background-color:var(--gut); }

/* Zelle „Ihr nächster Schritt“ als Hero-Karte (Stufe C): Papier auf Tinte, ein Gegenstand. */
.kb-hero .kb-zelle {
  width:100%; max-width:28rem;
  background-color:var(--paper); color:var(--text); border:1px solid rgba(23,20,15,0.28);
  box-shadow:var(--kb-schatten-gegenstand);
}
.kb-hero .kb-zelle.kb-zelle--tinte { background-color:var(--ink-soft); color:var(--on-dark); border-color:var(--line-on-dark); }
/* 08.10.2026: Papierkarte im Hero — die Tinte-Regeln des Heros (Link in Papier, Em in --mauve-hell, Fokus in Papier)
   gelten hier nicht, sonst wären Nebenlink und Fokusring auf Papier unsichtbar (Spezifität 0,3,0 schlägt .kb-hero .kb-link). */
.kb-hero .kb-zelle:not(.kb-zelle--tinte) .kb-link { color:var(--mauve-lesbar); }
.kb-hero .kb-zelle:not(.kb-zelle--tinte) .kb-link:hover { color:var(--mauve-deep); border-bottom-color:currentColor; }
.kb-hero .kb-zelle:not(.kb-zelle--tinte) .kb-em { color:var(--mauve-lesbar); }
.kb-hero .kb-zelle:not(.kb-zelle--tinte) .kb-zelle-marke { color:var(--mauve-deep); }
.kb-hero .kb-zelle:not(.kb-zelle--tinte) a:focus-visible,
.kb-hero .kb-zelle:not(.kb-zelle--tinte) .btn:focus-visible { outline-color:var(--mauve); }

/* Schlussblatt */
.kb-schlussblatt {
  display:grid; grid-template-columns:72px minmax(0,1fr); gap:0.4rem 1.25rem; align-items:start;
  margin:0.75rem 0 0; padding-top:1.5rem; border-top:1px solid var(--line-on-dark); max-width:40rem;
}
.kb-schlussblatt-portrait {
  grid-row:1 / span 2; width:72px; height:72px; border-radius:50%; object-fit:cover; display:block;
  border:1px solid var(--line-on-dark); background-color:var(--ink-soft);
}
.kb-zitat { margin:0; font-size:clamp(1.08rem,1.9vw,1.28rem); line-height:1.55; color:var(--on-dark); }
.kb-zitat p { margin:0; }
.kb-zitat-name { font-size:0.82rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--on-dark-soft); }
@media (max-width:559px) {
  .kb-schlussblatt { grid-template-columns:56px minmax(0,1fr); gap:0.35rem 0.9rem; }
  .kb-schlussblatt-portrait { width:56px; height:56px; }
}


/* ------------------------------------------------------------
   6. Kennzahl, Fakten, Balken
   ------------------------------------------------------------ */
.kb-kennzahl { display:flex; flex-wrap:wrap; align-items:baseline; gap:0 0.6rem; margin-top:0.75rem; }
.kb-kennzahl-zahl {
  font-family:var(--font-display); font-weight:500; font-size:clamp(2.6rem,6vw,3.6rem); line-height:1;
  letter-spacing:-0.03em; color:var(--on-dark); min-width:1.2ch;
}
.kb-kennzahl-von { font-size:1rem; color:var(--on-dark-soft); }
.kb-kennzahl-unter { flex-basis:100%; font-size:0.88rem; color:var(--on-dark-soft); margin-top:0.35rem; }
.kb-kennzahl--tage .kb-kennzahl-zahl { color:var(--mauve-hell); }
@media (max-width:559px) { .kb-kennzahl-zahl { font-size:2.2rem; } }

/* Fakten-Pillen (Gast-Hero) */
.kb-fakten { list-style:none; margin:0.5rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:0.5rem; }
.kb-fakten li {
  font-size:0.78rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--on-dark-soft); border:1px solid var(--line-on-dark); border-radius:var(--radius-pill); padding:0.32rem 0.75rem;
}

/* Balken: 7px, Füllung aus --kb-bis. Die Breite steht serverseitig als
   Variable im style-Attribut; JS verschiebt nur --kb-bis (Übergang 700 ms). */
.kb-balken {
  --kb-von:0%; --kb-bis:0%;
  display:block; position:relative; width:100%; height:7px; border-radius:var(--radius-pill);
  background-color:rgba(247,242,234,0.14); overflow:hidden; margin-top:0.25rem;
}
.kb-balken-fuell {
  display:block; height:100%; width:var(--kb-bis); border-radius:inherit;
  background-color:var(--mauve); transition:width 0.7s var(--ease);
}
.kb-balken[data-fortschritt="100"] .kb-balken-fuell { background-color:var(--gut); }
.kb-balken--klein { height:5px; margin-top:0; }
.kb-balken--mini { height:4px; width:140px; margin-top:0; }
/* Auf Papier (Kacheln, Krume, Leiste) ist der Grund --paper-2. */
.kb-kachel .kb-balken, .kb-krume .kb-balken, .kb-leiste .kb-balken, .kb-zelle:not(.kb-zelle--tinte) .kb-balken { background-color:var(--paper-2); }
.kb-minibalken {
  --kb-bis:0%;
  display:inline-block; width:64px; height:3px; border-radius:var(--radius-pill); background-color:var(--paper-2); overflow:hidden; vertical-align:middle;
}
.kb-minibalken > span { display:block; height:100%; width:var(--kb-bis); background-color:var(--mauve); transition:width 0.7s var(--ease); }
.kb-abschnitt.ist-fertig .kb-minibalken > span { background-color:var(--gut); }


/* ------------------------------------------------------------
   7. Deckblatt — ein Gegenstand mit zwei Blättern dahinter
   (Muster .lm-cover der Website, styles.css:1351)
   ------------------------------------------------------------ */
.kb-deckblatt {
  position:relative; width:clamp(150px,16vw,210px); aspect-ratio:1 / 1.414; margin:0.5rem 1.25rem 1.5rem 0.5rem;
  transform:rotate(-3deg); filter:var(--kb-schatten-deckblatt-dunkel); flex:none;
  transition:transform 0.6s var(--ease), filter 0.6s var(--ease);
}
.kb-deckblatt-blatt {
  position:absolute; inset:0; background-color:var(--paper-2); border:1px solid rgba(23,20,15,0.2);
  transform:rotate(7deg) translate(11px,7px);
}
.kb-deckblatt-blatt-2 { transform:rotate(3.5deg) translate(5px,3px); background-color:#e6dac6; }
.kb-deckblatt img, .kb-deckblatt-ersatz {
  position:relative; display:block; width:100%; height:100%; object-fit:cover;
  border:1px solid rgba(23,20,15,0.28); background-color:var(--ink-soft);
}
.kb-deckblatt-ersatz {
  color:var(--on-dark); display:flex; flex-direction:column; justify-content:flex-end; gap:0.4rem;
  padding:0.85rem 0.8rem; text-align:left; overflow:hidden;
}
.kb-deckblatt-ersatz::before { content:''; position:absolute; inset:7px; border:1px solid var(--line-on-dark); }
.kb-deckblatt-ersatz b { position:relative; font-family:var(--font-display); font-style:italic; font-weight:400; font-size:0.92rem; line-height:1.25; }
.kb-deckblatt-ersatz span { position:relative; font-size:0.56rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--on-dark-faint); }
/* Im Hero erst ab 980px — auf dem Telefon zählt der Stand, nicht das Bild. */
.kb-hero .kb-deckblatt { display:none; }
@media (min-width:980px) { .kb-hero .kb-deckblatt { display:block; width:clamp(170px,17vw,230px); margin-top:1rem; align-self:center; } }
/* Miniatur in Kacheln: kleiner, hellerer Schatten, bei Angeboten grau. */
.kb-deckblatt--mini { width:clamp(96px,28%,124px); margin:0.4rem 0.9rem 1rem 0.4rem; filter:var(--kb-schatten-deckblatt-hell); }
.kb-deckblatt--mini .kb-deckblatt-ersatz { padding:0.6rem 0.55rem; }
.kb-deckblatt--mini .kb-deckblatt-ersatz b { font-size:0.74rem; }
.kb-deckblatt--mini .kb-deckblatt-ersatz span { font-size:0.48rem; }
.kb-deckblatt.ist-grau { filter:var(--kb-schatten-deckblatt-hell) grayscale(1); }
.kb-kachel:hover .kb-deckblatt.ist-grau, .kb-kachel:focus-within .kb-deckblatt.ist-grau { filter:var(--kb-schatten-deckblatt-hell) grayscale(0); }
.kb-kachel:hover .kb-deckblatt, .kb-kachel:focus-within .kb-deckblatt { transform:rotate(-3deg) scale(1.04); }


/* ------------------------------------------------------------
   8. Weiter-bei-Karte — auf Tinte, Rand aus Licht
   ------------------------------------------------------------ */
.kb-weiter {
  display:flex; flex-direction:column; gap:0.3rem; width:100%; max-width:28rem;
  padding:1.4rem 1.5rem 1.6rem; border:1px solid var(--line-on-dark);
  /* 08.10.2026 (Korrektur): eigener Gegenstand auf Tinte statt 5-%-Schleier — so gilt für --mauve-hell wieder 4,97:1,
     auch wenn der Lichtkegel dahinter liegt; der Lichtrand bleibt über den Rand sichtbar. */
  background-color:var(--ink); color:var(--on-dark);
}
.kb-weiter-kurs { font-size:0.82rem; color:var(--on-dark-soft); margin-bottom:0.3rem; }
.kb-weiter-marke { font-size:0.7rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--mauve-hell); }
.kb-weiter-nr { font-size:clamp(2.4rem,5vw,3.2rem); line-height:1; color:var(--mauve-hell); margin:0.2rem 0 0.1rem; }
.kb-weiter-titel { font-family:var(--font-display); font-weight:500; font-size:1.25rem; line-height:1.25; text-wrap:balance; }
.kb-weiter-meta { font-size:0.84rem; color:var(--on-dark-soft); }
.kb-weiter .kb-btn { align-self:flex-start; margin-top:1rem; }
.kb-weiter.ist-vorschau .kb-weiter-marke { color:var(--on-dark); opacity:0.85; }
.kb-weiter.ist-fertig .kb-weiter-nr { display:none; }
.kb-weiter.ist-fertig .kb-weiter-marke { color:var(--gut-hell); }
.kb-weiter.ist-fertig .kb-link { align-self:flex-start; margin-top:0.9rem; }
@media (max-width:559px) { .kb-weiter { padding:1.2rem 1.1rem 1.3rem; max-width:none; } .kb-weiter .kb-btn { align-self:stretch; } }


/* ------------------------------------------------------------
   9. Karte — der Weg als Linie mit Knoten.
   Unter 720px senkrecht (Linie links, Muster .gg-zeit der Website),
   ab 720px waagerecht mit gleich breiten Knoten. Die Linie besteht
   aus zwei Hälften je Knoten (::before vor, ::after nach dem Punkt);
   gefüllt sind beide Hälften fertiger Knoten und die Hälfte, die in
   den aktuellen Knoten führt — so endet die Füllung genau in der
   Mitte des aktuellen Punkts. --kb-fuell (vom Server) ist die
   Zielgröße der Animation (Abschnitt 19), nicht die Geometrie.
   ------------------------------------------------------------ */
/* 08.10.2026 (Korrektur): overflow:visible — der Ring des aktuellen Punkts (left/top 0) und die Fokus-Outline des ersten
   Knotentitels wurden am Rand abgeschnitten. Seitlich läuft nichts über: Knoten flex:1 1 0, min-width:0, overflow-wrap:anywhere. */
.kb-karte { --kb-fuell:0%; --kb-linie:var(--line); --kb-linie-voll:var(--mauve); list-style:none; margin:0.75rem 0 0; padding:0; position:relative; display:flex; flex-direction:column; overflow:visible; }
.kb-hero .kb-karte { --kb-linie:var(--line-on-dark); --kb-linie-voll:var(--mauve-hell); }
.kb-karte.ist-komplett { --kb-linie-voll:var(--gut); }
.kb-knoten { position:relative; display:flex; flex-direction:column; gap:0.15rem; padding:0 0 1.6rem 1.9rem; min-width:0; }
.kb-knoten:last-child { padding-bottom:0; }
.kb-knoten::before, .kb-knoten::after {
  content:''; position:absolute; left:6px; width:2px; background-color:var(--kb-linie);
}
.kb-knoten::before { top:0; height:9px; }
.kb-knoten::after { top:9px; bottom:0; }
.kb-knoten:first-child::before, .kb-knoten:last-child::after { display:none; }
.kb-knoten.ist-fertig::before, .kb-knoten.ist-fertig::after, .kb-knoten.ist-aktuell::before,
.kb-karte.ist-komplett .kb-knoten::before, .kb-karte.ist-komplett .kb-knoten::after { background-color:var(--kb-linie-voll); }
.kb-knoten-punkt {
  position:absolute; left:0; top:2px; width:14px; height:14px; border-radius:50%; z-index:1;
  border:1.5px solid var(--line-strong); background-color:var(--kb-grund); box-sizing:border-box;
  transition:background-color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.4s var(--ease);
}
.kb-hero .kb-knoten-punkt { border-color:var(--on-dark-faint); }
.kb-knoten-punkt::after {
  content:''; position:absolute; left:3px; top:2.5px; width:6px; height:3.5px;
  border-left:1.5px solid var(--paper); border-bottom:1.5px solid var(--paper); transform:rotate(-45deg) scale(0.6); opacity:0;
  transition:opacity 0.24s var(--ease), transform 0.24s var(--ease);
}
.kb-knoten.ist-fertig .kb-knoten-punkt { background-color:var(--gut); border-color:var(--gut); }
.kb-knoten.ist-fertig .kb-knoten-punkt::after { opacity:1; transform:rotate(-45deg) scale(1); }
.kb-knoten.ist-aktuell .kb-knoten-punkt {
  background-color:var(--mauve); border-color:var(--mauve);
  box-shadow:0 0 0 4px var(--kb-grund), 0 0 0 5px var(--mauve);
}
.kb-knoten.ist-offen .kb-knoten-punkt { background-color:var(--kb-grund); border-color:var(--line-strong); }
.kb-hero .kb-knoten.ist-offen .kb-knoten-punkt { border-color:var(--on-dark-faint); }
.kb-knoten.ist-kuenftig .kb-knoten-punkt, .kb-knoten.ist-gesperrt .kb-knoten-punkt { border-style:dashed; }
/* Gerade erreicht (Modulabschluss mit Marker): Ring plus weicher Halo außen. */
.kb-knoten.ist-gerade-erreicht .kb-knoten-punkt { box-shadow:0 0 0 4px var(--kb-grund), 0 0 0 5px var(--mauve), 0 0 0 9px rgba(156,107,86,0.35); }
/* Gesamtkarte auf der Startseite: liegt im Hero, Knoten tragen Kurstitel als Link. */
.kb-karte--kurse .kb-knoten-titel { font-size:1.06rem; }
.kb-karte--kurse .kb-knoten-titel a:hover { text-decoration-color:var(--mauve-hell); }
.kb-karte--kurse .kb-knoten-meta .preis-alt { color:var(--on-dark-faint); }
.kb-knoten-marke { font-family:var(--font-display); font-style:italic; font-size:0.9rem; color:var(--mauve-lesbar); line-height:1.1; }
.kb-hero .kb-knoten-marke { color:var(--mauve-hell); }
.kb-knoten-titel { font-family:var(--font-display); font-weight:500; font-size:1.02rem; line-height:1.25; hyphens:auto; overflow-wrap:anywhere; }
.kb-knoten-titel a { color:inherit; text-decoration:none; }
.kb-knoten-titel a:hover { text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--mauve); }
.kb-knoten-meta { font-size:0.8rem; color:var(--text-faint); font-variant-numeric:tabular-nums; }
.kb-hero .kb-knoten-meta { color:var(--on-dark-soft); }
.kb-knoten.ist-kuenftig, .kb-knoten.ist-gesperrt { color:var(--text-faint); }
.kb-hero .kb-knoten.ist-kuenftig, .kb-hero .kb-knoten.ist-gesperrt { color:var(--on-dark-soft); }
.kb-knoten.ist-aktuell .kb-knoten-titel { color:inherit; }
/* Endknoten der Gesamtkarte: Ziel (nächster Kurs) und Persönlich. */
.kb-knoten--ziel .kb-knoten-marke, .kb-knoten--persoenlich .kb-knoten-marke { color:var(--on-dark-faint); }
.kb-knoten--persoenlich .kb-knoten-punkt { border-radius:2px; transform:rotate(45deg) scale(0.9); }
.kb-knoten--persoenlich.ist-aktuell .kb-knoten-punkt { box-shadow:0 0 0 3px var(--kb-grund), 0 0 0 4px var(--mauve); }

@media (min-width:720px) {
  .kb-karte { flex-direction:row; align-items:flex-start; margin-top:1.25rem; }
  .kb-knoten { flex:1 1 0; padding:1.6rem 0.6rem 0 0; text-align:left; }
  .kb-knoten:last-child { padding-top:1.6rem; padding-right:0; }
  .kb-knoten::before, .kb-knoten::after { left:auto; top:6px; width:auto; height:2px; }
  .kb-knoten::before { left:0; right:calc(100% - 7px); }
  .kb-knoten::after { left:7px; right:0; }   /* bis zum Rand: dort beginnt der nächste Punkt */
  .kb-knoten:last-child::after { display:none; }
  .kb-knoten-punkt { top:0; }
}


/* ------------------------------------------------------------
   10. Pille
   ------------------------------------------------------------ */
.kb-pille {
  display:inline-flex; align-items:center; gap:0.35rem; align-self:flex-start; white-space:nowrap;
  font-size:0.72rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  padding:0.3rem 0.7rem; border-radius:var(--radius-pill); border:1px solid transparent; line-height:1.2;
}
.kb-pille--umriss { border-color:currentColor; color:var(--text-soft); }
.kb-hero .kb-pille--umriss { color:var(--on-dark); }
.kb-pille--gut { background-color:var(--gut); color:var(--paper); }
.kb-pille--tinte { background-color:var(--ink); color:var(--paper); }
.kb-pille--grau { background-color:var(--paper-2); color:var(--text-soft); }
@media (max-width:559px) { .kb-pille { white-space:normal; } }


/* ------------------------------------------------------------
   11. Regal und Kachel
   ------------------------------------------------------------ */
.kb-regal { display:flex; flex-direction:column; gap:1.25rem; }
.kb-regal-raster { display:grid; gap:1.25rem; grid-template-columns:minmax(0,1fr); }
@media (min-width:760px) { .kb-regal-raster { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px) { .kb-regal--angebot .kb-regal-raster { grid-template-columns:repeat(3,minmax(0,1fr)); } }

.kb-kachel {
  position:relative; display:flex; flex-direction:column; min-width:0;
  border:1px solid var(--line); background-color:var(--paper); overflow:hidden;
  transition:border-color 0.3s var(--ease);
}
.kb-kachel::before {
  content:''; position:absolute; left:0; right:0; top:0; height:2px; background-color:var(--mauve); z-index:2;
  transform:scaleX(0); transform-origin:left; transition:transform 0.4s var(--ease);
}
.kb-kachel:hover::before, .kb-kachel:focus-within::before { transform:scaleX(1); }
.kb-kachel:hover { border-color:var(--line-strong); }
.kb-kachel-cover {
  display:grid; place-items:center; padding:1.25rem 1rem 0.75rem;
  background-color:var(--paper-2); border-bottom:1px solid var(--line); overflow:hidden; text-decoration:none;
}
.kb-kachel-cover .kb-deckblatt { margin-bottom:1.4rem; }
.kb-kachel-body { display:flex; flex-direction:column; gap:0.7rem; padding:1.4rem 1.5rem 1.6rem; flex:1; }
.kb-kachel-titel { font-size:1.25rem; line-height:1.2; }
.kb-kachel-titel a { color:inherit; text-decoration:none; }
.kb-kachel-titel a:hover { text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--mauve); }
.kb-kachel-ziel { color:var(--text-soft); font-size:0.94rem; }
.kb-kachel-zeile { font-size:0.9rem; color:var(--text-soft); }
.kb-kachel-klein { font-size:0.82rem; color:var(--text-faint); }
.kb-kachel-preis { font-family:var(--font-display); font-size:1.35rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:0.4rem; }
.kb-kachel-preis .badge-zusatz { font-family:var(--font-body); font-size:0.8rem; color:var(--text-faint); white-space:nowrap; }
.kb-kachel-preis .preis-alt { font-size:0.95rem; }
.kb-kachel-aktion { margin-top:auto; padding-top:0.7rem; display:flex; flex-wrap:wrap; align-items:center; gap:0.75rem 1.25rem; }
.kb-kachel.ist-aktiv .kb-pille--umriss { color:var(--mauve-lesbar); }
.kb-kachel.ist-angebot .kb-kachel-cover { background-color:var(--paper); }
.kb-kachel.ist-angebot:hover .kb-kachel-cover, .kb-kachel.ist-angebot:focus-within .kb-kachel-cover { background-color:var(--paper-2); transition:background-color 0.6s var(--ease); }
.kb-kachel.ist-fertig .kb-balken-fuell { background-color:var(--gut); }
.kb-kachel.ist-pausiert .kb-deckblatt { filter:var(--kb-schatten-deckblatt-hell) grayscale(1); opacity:0.85; }
.kb-kachel.ist-pausiert .kb-kachel-zeile { color:var(--text); }
.kb-kachel.ist-vorverkauf .kb-balken-fuell { width:0; }
@media (max-width:559px) { .kb-kachel-body { padding:1.2rem 1.1rem 1.3rem; } }


/* ------------------------------------------------------------
   12. Nächste Schritte — Zellen im 1-px-Fugenraster, eine Tinte-
   Zelle je Seite; leise Zeile; Band mit Porträt (Stufe C)
   ------------------------------------------------------------ */
.kb-schritte { display:flex; flex-direction:column; gap:1.5rem; scroll-margin-top:84px; }
.kb-schritte-kopf { display:flex; flex-direction:column; gap:0.5rem; }
.kb-zellen { display:grid; gap:1px; background-color:var(--line); border:1px solid var(--line); grid-template-columns:minmax(0,1fr); }
@media (min-width:760px) {
  .kb-zellen { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kb-zellen[data-zellen="1"] { grid-template-columns:minmax(0,1fr); }
  .kb-zellen[data-zellen="3"] .kb-zelle:last-child { grid-column:1 / -1; }
}
@media (min-width:980px) {
  .kb-zellen[data-zellen="3"] { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .kb-zellen[data-zellen="3"] .kb-zelle:last-child { grid-column:auto; }
}
.kb-zelle {
  position:relative; display:flex; flex-direction:column; gap:0.75rem; min-width:0;
  background-color:var(--paper); color:var(--text); padding:clamp(1.75rem,3vw,2.25rem);
  transition:background-color 0.3s var(--ease);
}
.kb-zelle--kurs:not(.kb-zelle--tinte):hover { background-color:var(--paper-2); }
.kb-zelle-marke { font-size:0.7rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--kb-marke, var(--mauve-deep)); }
/* Arten: Weiter/Kurs/Persönlich tragen die Mauve-Marke, Nebenzellen eine leisere. */
.kb-zelle--weiter .kb-zelle-titel { font-style:normal; }
.kb-zelle--weiter .kb-nr { font-size:1.6em; line-height:1; display:block; margin-bottom:0.3rem; }
.kb-zelle--sprechstunde, .kb-zelle--community, .kb-zelle--verschenken, .kb-zelle--vorschau { --kb-marke:var(--text-faint); }
.kb-zelle--vorschau .kb-zelle-text { font-style:normal; }
/* Stufen: V (Vorverkauf) und B ohne Tinte, A mit Kurs-Zelle, C (Abschluss) mit grünem Eyebrow. */
.kb-schritte--stufe-v .kb-zelle-marke { --kb-marke:var(--text-soft); }
.kb-schritte--stufe-a .kb-zelle--kurs:not(.kb-zelle--tinte) { border-left:3px solid var(--mauve); }
.kb-schritte--stufe-b .kb-zellen { max-width:48rem; }
.kb-schritte--stufe-c .kb-schritte-kopf .kb-eyebrow { color:var(--gut); }
.kb-zelle-titel { font-size:clamp(1.15rem,2.2vw,1.45rem); line-height:1.2; }
.kb-zelle-text { color:var(--text-soft); font-size:0.95rem; line-height:1.55; max-width:48ch; }
.kb-zelle-preis { display:flex; flex-wrap:wrap; align-items:baseline; gap:0.5rem; margin-top:0.25rem; }
.kb-preis { font-family:var(--font-display); font-weight:500; font-size:1.6rem; line-height:1; }
.kb-preis .preis-alt { font-size:1rem; }
.kb-preis-klein { font-size:0.82rem; color:var(--text-faint); }
.kb-zelle-klein { font-size:0.84rem; color:var(--text-soft); line-height:1.5; }
.kb-zelle-klein a { color:var(--mauve-lesbar); }
.kb-zelle-fakten { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:0.4rem 1.25rem; font-size:0.86rem; color:var(--text-soft); }
.kb-zelle-fakten li { position:relative; padding-left:0.9rem; }
.kb-zelle-fakten li::before { content:''; position:absolute; left:0; top:0.62em; width:5px; height:5px; border-radius:50%; background-color:var(--mauve); }
.kb-zelle-knoepfe { display:flex; flex-wrap:wrap; align-items:center; gap:0.9rem 1.5rem; margin-top:auto; padding-top:0.75rem; }
.kb-zelle-ausweg { font-size:0.82rem; color:var(--text-faint); border-top:1px solid var(--line); padding-top:0.9rem; margin-top:0.25rem; }
/* Tinte-Zelle: dunkel, schwacher Lichtkegel */
.kb-zelle--tinte { background-color:var(--ink); color:var(--on-dark); overflow:hidden; isolation:isolate; }
.kb-zelle--tinte::before {
  content:''; position:absolute; right:-25%; top:-35%; width:85%; aspect-ratio:1; z-index:-1; pointer-events:none;
  /* 08.10.2026 (Korrektur): Glow auf 0,14 gesenkt, damit die Marke in --mauve-hell auch über dem Kegel 4,5:1 hält. */
  background:radial-gradient(circle at center, rgba(156,107,86,0.14), rgba(156,107,86,0) 66%);
}
.kb-zelle--tinte .kb-zelle-marke { color:var(--mauve-hell); }
.kb-zelle--tinte .kb-em { color:var(--mauve-hell); }
.kb-zelle--tinte .kb-zelle-text, .kb-zelle--tinte .kb-zelle-klein, .kb-zelle--tinte .kb-zelle-fakten { color:var(--on-dark-soft); }
.kb-zelle--tinte .kb-preis-klein, .kb-zelle--tinte .kb-zelle-ausweg { color:var(--on-dark-faint); }
.kb-zelle--tinte .kb-zelle-ausweg { border-top-color:var(--line-on-dark); }
.kb-zelle--tinte .kb-zelle-fakten li::before { background-color:var(--mauve-hell); }
.kb-zelle--tinte .kb-link, .kb-zelle--tinte .kb-zelle-klein a { color:var(--on-dark); }
.kb-zelle--tinte .kb-link:hover { border-bottom-color:var(--mauve-hell); }
.kb-zelle--tinte .kb-btn.btn-ghost { border-color:var(--line-on-dark); color:var(--on-dark); }
.kb-zelle--tinte .kb-btn.btn-ghost:hover { border-color:var(--on-dark); background-color:rgba(247,242,234,0.08); }
.kb-zelle--tinte .preis-alt { color:var(--on-dark-faint); }
/* Porträt in der Persönlich-Zelle (nur Stufe C; PHP schreibt .kb-zelle-portrait, 48px rund) */
.kb-zelle--persoenlich .kb-band-portrait, .kb-zelle-portrait {
  width:48px; height:48px; border-radius:50%; object-fit:cover; display:block; margin-bottom:0.25rem;
  border:1px solid var(--line-on-dark); background-color:var(--ink-soft);
}
/* Zeilen „Sprechstunde“ / „Kurs verschenken“ unter den Zellen auf Papier (Stufe C ohne Band) */
.kb-schritte > .kb-band-zeilen { border-top-color:var(--line); margin-top:0; }
.kb-schritte > .kb-band-zeilen a { color:var(--text-soft); }
.kb-schritte > .kb-band-zeilen a:hover { color:var(--text); }

/* Leise Zeile (Stufe B) */
.kb-zeile {
  font-size:0.95rem; color:var(--text-soft); line-height:1.6; max-width:64ch;
  border-top:1px solid var(--line); padding-top:1.25rem;
}
.kb-zeile--persoenlich { border-left:3px solid var(--mauve); border-top:0; padding:0.25rem 0 0.25rem 1rem; }

/* Band (Stufe C): Tinte mit Porträt, durch Papierabstand vom Hero getrennt. */
.kb-band {
  position:relative; overflow:hidden; isolation:isolate;
  background-color:var(--ink); color:var(--on-dark); padding:clamp(1.75rem,3.5vw,2.5rem);
  display:grid; grid-template-columns:48px minmax(0,1fr); gap:0.5rem 1.25rem; align-items:start;
}
.kb-band::before {
  content:''; position:absolute; right:-15%; top:-40%; width:60%; aspect-ratio:1; z-index:-1; pointer-events:none;
  background:radial-gradient(circle at center, rgba(156,107,86,0.24), rgba(156,107,86,0) 66%);
}
.kb-band > * { grid-column:2; min-width:0; }
.kb-band-portrait { grid-column:1; grid-row:1; width:48px; height:48px; border-radius:50%; object-fit:cover; display:block; border:1px solid var(--line-on-dark); }
/* 08.10.2026 (Integration): PHP schreibt im Band eigene Klassen (.kb-band-text als Textspalte, -marke, -titel, -satz,
   -fakten, -knoepfe) — sie bekommen dieselben Regeln wie die Zellen-Teile. */
.kb-band-text { display:flex; flex-direction:column; gap:0.75rem; min-width:0; }
.kb-band .kb-zelle-marke, .kb-band-marke { font-size:0.7rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--mauve-hell); }
.kb-band .kb-zelle-titel, .kb-band .kb-h3, .kb-band-titel, .kb-band .kb-band-titel.kb-h2 { color:var(--on-dark); font-size:clamp(1.3rem,2.6vw,1.8rem); max-width:none; }
.kb-band .kb-em { color:var(--mauve-hell); }
.kb-band .kb-zelle-text, .kb-band-satz { color:var(--on-dark-soft); font-size:0.95rem; line-height:1.55; max-width:56ch; }
.kb-band .kb-zelle-fakten, .kb-band-fakten { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:0.4rem 1.25rem; font-size:0.86rem; color:var(--on-dark-soft); }
.kb-band .kb-zelle-fakten li, .kb-band-fakten li { position:relative; padding-left:0.9rem; }
.kb-band .kb-zelle-fakten li::before, .kb-band-fakten li::before { content:''; position:absolute; left:0; top:0.62em; width:5px; height:5px; border-radius:50%; background-color:var(--mauve-hell); }
.kb-band .kb-zelle-knoepfe, .kb-band-knoepfe { display:flex; flex-wrap:wrap; align-items:center; gap:0.9rem 1.5rem; padding-top:0.5rem; }
.kb-band .kb-link { color:var(--on-dark); }
.kb-band .kb-link:hover { border-bottom-color:var(--mauve-hell); }
.kb-band-zeilen {
  grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:0.5rem 2rem; margin-top:0.75rem;
  padding-top:1rem; border-top:1px solid var(--line-on-dark); font-size:0.9rem;
}
.kb-band-zeilen a { color:var(--on-dark-soft); text-decoration:none; }
.kb-band-zeilen a:hover { color:var(--on-dark); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:559px) {
  .kb-band { grid-template-columns:minmax(0,1fr); }
  .kb-band > *, .kb-band-portrait { grid-column:1; grid-row:auto; }
}


/* ------------------------------------------------------------
   13. Lehrplan — Abschnitte je Modul, Lektionen als ruhige Zeilen
   ------------------------------------------------------------ */
.kb-lehrplan { display:flex; flex-direction:column; gap:clamp(2rem,4vw,2.75rem); }
.kb-lehrplan-kopf { display:flex; flex-direction:column; gap:0.5rem; }
.kb-abschnitt { display:flex; flex-direction:column; gap:0.75rem; scroll-margin-top:84px; }
.kb-abschnitt-kopf { display:flex; flex-wrap:wrap; align-items:baseline; gap:0.4rem 0.9rem; }
.kb-abschnitt-kopf .kb-nr { font-size:1.2rem; }
.kb-abschnitt-titel { font-size:clamp(1.5rem,3vw,2rem); flex:1 1 auto; min-width:0; }
.kb-abschnitt-stand { font-size:0.82rem; color:var(--text-faint); margin-left:auto; white-space:nowrap; }
.kb-abschnitt-summary { color:var(--text-soft); font-size:0.95rem; max-width:64ch; }
.kb-abschnitt.ist-kuenftig .kb-abschnitt-titel { color:var(--text-soft); }
.kb-abschnitt.ist-kuenftig .kb-nr { color:var(--text-faint); }
.kb-abschnitt.ist-fertig .kb-abschnitt-stand { color:var(--gut); }
@media (max-width:559px) { .kb-abschnitt-stand { margin-left:0; flex-basis:100%; } }

.kb-lektionen { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.kb-lektion {
  position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:0.35rem 0.9rem;
  padding:0.95rem 0.75rem 0.95rem 0.85rem; border-bottom:1px solid var(--line);
  text-decoration:none; color:inherit; font-size:0.97rem;
  transition:background-color 0.2s var(--ease);
}
a.kb-lektion:hover { background-color:var(--paper-2); }
a.kb-lektion:hover .kb-lektion-nr { color:var(--mauve-deep); }
a.kb-lektion:hover .kb-lektion-meta::after { opacity:1; transform:translateX(0); }
.kb-lektion::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background-color:var(--mauve);
  transform:scaleY(0); transform-origin:top; transition:transform 0.4s var(--ease);
}
.kb-lektion.ist-weiter, .kb-lektion.ist-aktuell { background-color:var(--paper-2); }
.kb-lektion.ist-weiter::before, .kb-lektion.ist-aktuell::before { transform:scaleY(1); }
.kb-lektion-zustand {
  flex:none; position:relative; width:22px; height:22px; border-radius:50%; box-sizing:border-box;
  border:1px solid var(--line-strong); background-color:transparent;
  transition:background-color 0.24s var(--ease), border-color 0.24s var(--ease);
}
.kb-lektion-zustand::after {
  content:''; position:absolute; left:5px; top:5px; width:11px; height:6px;
  border-left:2px solid var(--paper); border-bottom:2px solid var(--paper);
  transform:rotate(-45deg) scale(0.6); opacity:0; transition:opacity 0.24s var(--ease), transform 0.24s var(--ease);
}
.kb-lektion.ist-fertig .kb-lektion-zustand, .ist-fertig > .kb-lektion-zustand { background-color:var(--gut); border-color:var(--gut); }
.kb-lektion.ist-fertig .kb-lektion-zustand::after, .ist-fertig > .kb-lektion-zustand::after { opacity:1; transform:rotate(-45deg) scale(1); }
.kb-lektion.ist-weiter .kb-lektion-zustand, .kb-lektion.ist-aktuell .kb-lektion-zustand { border-color:var(--mauve); box-shadow:inset 0 0 0 3px var(--paper-2); background-color:var(--mauve); }
.kb-lektion.ist-aktuell.ist-fertig .kb-lektion-zustand { box-shadow:none; background-color:var(--gut); border-color:var(--gut); }
.kb-lektion-nr { flex:none; font-size:0.82rem; color:var(--text-faint); min-width:1.6em; transition:color 0.2s var(--ease); }
.kb-lektion-titel { flex:1 1 12rem; min-width:0; line-height:1.4; }
.kb-lektion-material { display:inline-block; margin-left:0.6rem; font-size:0.74rem; letter-spacing:0.04em; color:var(--mauve-lesbar); white-space:nowrap; }
.kb-lektion-marke {
  flex:none; font-size:0.68rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--mauve-deep); border:1px solid currentColor; border-radius:var(--radius-pill); padding:0.18rem 0.55rem; white-space:nowrap;
}
.kb-lektion.ist-vorschau .kb-lektion-marke { color:var(--text-soft); }
/* 08.10.2026 (Korrektur): --mauve-deep statt --mauve als Grund — Papier auf #9c6b56 hatte nur 4,06:1 bei 10,9px Versalien; #7c4f3d gibt 6,2:1. */
.kb-lektion.ist-weiter .kb-lektion-marke { color:var(--paper); background-color:var(--mauve-deep); border-color:var(--mauve-deep); font-size:0.72rem; }
.kb-lektion-meta { flex:none; margin-left:auto; font-size:0.8rem; color:var(--text-faint); white-space:nowrap; display:inline-flex; align-items:center; gap:0.35rem; }
a.kb-lektion .kb-lektion-meta::after { content:'→'; opacity:0; transform:translateX(-4px); transition:opacity 0.2s var(--ease), transform 0.2s var(--ease); }
.kb-lektion.ist-gesperrt { color:var(--text-faint); cursor:not-allowed; }
.kb-lektion.ist-gesperrt .kb-lektion-zustand { border-style:dashed; }
.kb-lektion.ist-gesperrt .kb-lektion-titel { color:var(--text-faint); }
.kb-lektion.ist-fertig .kb-lektion-titel { color:var(--text-soft); }
.kb-lektion.ist-aktuell .kb-lektion-titel, .kb-lektion.ist-weiter .kb-lektion-titel { color:var(--text); font-weight:600; }
@media (max-width:559px) {
  .kb-lektion { padding-inline:0.6rem 0.5rem; gap:0.3rem 0.7rem; }
  .kb-lektion-titel { flex-basis:60%; }
  .kb-lektion-meta { margin-left:auto; }
}


/* ------------------------------------------------------------
   14. Lektion — Krume, Titel, Abschluss, Blättern, Leiste
   ------------------------------------------------------------ */
.kb-krume {
  display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem 1.25rem; font-size:0.86rem;
  padding-bottom:1rem; border-bottom:1px solid var(--line);
}
.kb-krume-zurueck { color:var(--text-soft); text-decoration:none; transition:color 0.2s var(--ease); }
.kb-krume-zurueck:hover { color:var(--text); text-decoration:underline; text-underline-offset:3px; }
.kb-krume-stand { color:var(--text-faint); margin-left:auto; white-space:nowrap; }
.kb-krume .kb-balken--mini { display:none; flex:none; }
@media (min-width:760px) { .kb-krume .kb-balken--mini { display:block; } }
.kb-seite .lesson-layout { gap:2rem; }
/* 08.10.2026 (Korrektur): Die Hauptspalte darf unter ihren Inhalt schrumpfen, lange Zeichenketten (URL, Dateiname) brechen um —
   sonst scrollt die ganze Seite bei 360/390px waagerecht. */
.kb-seite .lesson-layout > div { min-width:0; }
.kb-lektion-h1 { font-size:clamp(1.5rem,3vw,2rem); margin-top:1.75rem; }
.kb-lektion-h1 .kb-nr { font-size:0.85em; margin-right:0.2em; }
.kb-beschreibung { color:var(--text-soft); line-height:1.7; max-width:68ch; margin-top:0.9rem; white-space:pre-line; overflow-wrap:anywhere; }
.kb-material { margin-top:1.75rem; }

/* Abschlusszeile — Zustand links, Formular rechts; ohne JS ein normaler POST. */
.kb-abschluss {
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem;
  margin-top:2rem; padding:1.25rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.kb-abschluss-zustand { display:inline-flex; align-items:center; gap:0.6rem; font-size:0.9rem; color:var(--text-soft); margin:0; }
.kb-abschluss-zustand.ist-fertig { color:var(--gut); font-weight:600; }
.kb-abschluss-zustand .kb-lektion-zustand { transition:background-color 0.24s var(--ease), border-color 0.24s var(--ease); }
.kb-abschluss-form { display:flex; flex-wrap:wrap; align-items:center; gap:0.75rem; margin-left:auto; }
.kb-abschluss .kb-hinweis { flex:1 1 20rem; }
@media (max-width:559px) {
  .kb-abschluss-form { margin-left:0; width:100%; flex-direction:column; align-items:stretch; }
}

.kb-blaettern { display:flex; flex-direction:column; gap:0.75rem; margin-top:1.5rem; }
.kb-blaettern a[rel="next"] { margin-left:auto; }
@media (min-width:560px) { .kb-blaettern { flex-direction:row; justify-content:space-between; } }
.kb-blaettern a:only-child[rel="next"] { margin-left:auto; }

/* Leiste: <details>, serverseitig offen. Unter 980px zuklappbar, ab 980px statischer Kopf. */
.kb-leiste { border:1px solid var(--line); background-color:var(--paper); min-width:0; }
.kb-leiste-summary {
  display:flex; align-items:center; justify-content:space-between; gap:1rem; cursor:pointer; list-style:none;
  padding:1rem 1.25rem; font-size:0.72rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-faint);
  border-bottom:1px solid var(--line); transition:background-color 0.2s var(--ease);
}
.kb-leiste-summary::-webkit-details-marker { display:none; }
.kb-leiste-summary::after {
  content:''; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); margin-left:0.25rem; transition:transform 0.25s var(--ease); flex:none;
}
.kb-leiste-summary .tabular { margin-left:auto; color:var(--text-soft); }
.kb-leiste[open] > .kb-leiste-summary::after { transform:rotate(-135deg); }
.kb-leiste:not([open]) > .kb-leiste-summary { border-bottom-color:transparent; }
.kb-leiste-summary:hover { background-color:var(--paper-2); }
.kb-leiste-inhalt { display:flex; flex-direction:column; gap:1.25rem; padding:1rem 0 1.25rem; }
.kb-leiste-inhalt > .kb-balken { width:auto; margin:0 1.25rem; }
.kb-leiste-gruppe { display:flex; flex-direction:column; gap:0.25rem; }
.kb-leiste-modul {
  display:flex; align-items:baseline; flex-wrap:wrap; gap:0.3rem 0.5rem; padding:0 1.25rem 0.5rem;
  font-size:0.95rem; font-weight:500; line-height:1.3;
}
.kb-leiste-stand { margin-left:auto; font-size:0.76rem; color:var(--text-faint); font-weight:400; white-space:nowrap; }
.kb-leiste-gruppe.ist-fertig .kb-leiste-stand { color:var(--gut); }
.kb-leiste-gruppe.ist-kuenftig .kb-leiste-modul { color:var(--text-soft); }
.kb-lektionen--leiste { border-top:1px solid var(--line); }
.kb-lektionen--leiste .kb-lektion { padding:0.7rem 1.25rem 0.7rem 1.1rem; font-size:0.9rem; gap:0.3rem 0.7rem; }
.kb-lektionen--leiste .kb-lektion-zustand { width:18px; height:18px; }
.kb-lektionen--leiste .kb-lektion-zustand::after { left:3.5px; top:3.5px; width:9px; height:5px; }
.kb-lektionen--leiste .kb-lektion-titel { flex-basis:8rem; }
.kb-lektionen--leiste .kb-lektion-nr { min-width:1.4em; }
.kb-lektionen--leiste li:last-child .kb-lektion { border-bottom:0; }
.kb-leiste-persoenlich, .kb-leiste-danach {
  margin:0.25rem 1.25rem 0; padding:1rem 1.1rem 1.1rem; background-color:var(--paper-2);
  font-size:0.9rem; line-height:1.55; color:var(--text-soft); display:flex; flex-direction:column; gap:0.5rem;
}
.kb-leiste-persoenlich p, .kb-leiste-danach p { margin:0; }
.kb-leiste-danach { border-left:3px solid var(--gut); }
.kb-leiste-persoenlich .kb-link { align-self:flex-start; }
@media (min-width:980px) {
  .kb-leiste { position:sticky; top:84px; }
  /* 08.10.2026 (Korrektur): Die klebende Leiste bekommt einen eigenen Scrollbereich (Inhalt unter dem Kopf, ≈3,5rem) —
     sonst bleibt ihr unterer Teil bei 1024×768/1440×900 unerreichbar; so greift auch erlebnis.js (aufgabeLeiste) und
     bringt die aktuelle Zeile in Sicht. Ab 980px (iPad quer, Desktop) ist overflow:auto unkritisch. */
  .kb-leiste-inhalt { max-height:calc(100vh - 84px - 1rem - 3.5rem); max-height:calc(100dvh - 84px - 1rem - 3.5rem); overflow-y:auto; overscroll-behavior:contain; }
  /* Statischer Kopf: Maus klappt nichts zu; den Tabstopp nimmt erlebnis.js (tabindex -1 ab 980px). */
  .kb-leiste-summary { pointer-events:none; cursor:default; }
  .kb-leiste-summary::after { display:none; }
  .kb-leiste-summary:hover { background-color:transparent; }
}


/* ------------------------------------------------------------
   15. Meilenstein-Band — sagt, was gerade erreicht wurde.
   Endzustände sind die Grundwerte; die Keyframes (Abschnitt 19)
   spielen nur mit JS und ohne reduced-motion.
   ------------------------------------------------------------ */
.kb-meilenstein {
  display:flex; align-items:center; gap:1rem; margin:0; padding:0.9rem 1.25rem 0.9rem 1rem;
  border-left:3px solid var(--mauve); background-color:var(--paper-2); color:var(--text); font-size:0.95rem; line-height:1.45;
}
.kb-meilenstein strong { font-weight:600; }
.kb-meilenstein-haken {
  flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background-color:var(--gut); color:var(--paper);
}
.kb-meilenstein-haken svg { display:block; }
.kb-haken-pfad { stroke-dasharray:24; stroke-dashoffset:0; }
.kb-meilenstein-text { min-width:0; }
/* Stufen: Lektion schlicht, Modul mit Ring in Mauve, Kurs mit grünem Ring. */
.kb-meilenstein--lektion .kb-meilenstein-haken { box-shadow:none; }
.kb-meilenstein--modul .kb-meilenstein-haken { box-shadow:0 0 0 3px var(--kb-grund), 0 0 0 4px var(--mauve); }
.kb-meilenstein--modul { border-left-color:var(--mauve-deep); }
.kb-meilenstein--kurs .kb-meilenstein-haken { background-color:var(--gut); box-shadow:0 0 0 3px var(--kb-grund), 0 0 0 4px var(--gut); }
.kb-meilenstein--kurs { border-left-color:var(--gut); }
/* Auf Tinte (Kursseite, Hero) */
.kb-hero .kb-meilenstein { background-color:rgba(247,242,234,0.07); color:var(--on-dark); border-left-color:var(--mauve-hell); max-width:40rem; }
.kb-hero .kb-meilenstein-haken { box-shadow:0 0 0 4px rgba(63,107,74,0.25); }
/* In .kb-seite (Flex, gap = Abschnittsabstand) rücken Krume, Band und Inhalt enger zusammen: 1.5rem statt des Blockabstands. */
.kb-seite > .kb-krume { margin-bottom:calc(1.5rem - var(--kb-abschnitt)); }
.kb-seite > .kb-krume + .kb-meilenstein { margin-bottom:calc(1.5rem - var(--kb-abschnitt)); }
@media (max-width:559px) { .kb-meilenstein { gap:0.75rem; padding:0.8rem 0.9rem 0.8rem 0.8rem; } .kb-meilenstein-haken { width:38px; height:38px; } }


/* ------------------------------------------------------------
   16. Vorverkaufs-Band, Kasse, Unterlagen, Werkzeuge
   ------------------------------------------------------------ */
.kb-band-termin {
  display:flex; flex-direction:column; gap:0.5rem; align-items:flex-start;
  border:1px solid var(--line); border-left:3px solid var(--mauve); padding:1.2rem 1.4rem 1.3rem; background-color:var(--paper);
}
.kb-band-termin .kb-pille { margin-bottom:0.25rem; color:var(--mauve-lesbar); }
.kb-band-termin-titel { font-family:var(--font-display); font-weight:500; font-size:1.2rem; line-height:1.25; }
.kb-band-termin-text { font-size:0.92rem; color:var(--text-soft); max-width:64ch; line-height:1.55; }
.kb-band-termin-text a { color:var(--mauve-lesbar); }

/* Kasse: Preisteil links, Formular rechts (ab 900px). Inhalte unverändert (pages.php). */
.kb-kasse { display:grid; grid-template-columns:minmax(0,1fr); gap:2rem; margin-bottom:0; box-shadow:var(--kb-schatten-gegenstand); scroll-margin-top:84px; }
.kb-kasse-links { display:flex; flex-direction:column; gap:0.6rem; min-width:0; }
.kb-kasse > form { min-width:0; }
@media (min-width:900px) { .kb-kasse { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,4vw,3rem); align-items:start; } }

/* Unterlagen: Blätter als Gegenstände */
.kb-unterlagen { display:flex; flex-direction:column; gap:0.5rem; }
.kb-unterlagen .kb-h2 { margin-bottom:1rem; }
.kb-blaetter { list-style:none; margin:0; padding:0; display:grid; gap:1rem; grid-template-columns:minmax(0,1fr); }
@media (min-width:560px) { .kb-blaetter { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:980px) { .kb-blaetter { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.kb-blatt {
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:0.2rem 0.9rem; align-items:center;
  padding:1rem 1.1rem; border:1px solid var(--line-strong); background-color:var(--paper); text-decoration:none; color:inherit;
  box-shadow:var(--kb-schatten-gegenstand); transition:transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.kb-blatt:hover { transform:translateY(-2px); border-color:var(--mauve); }
.kb-blatt-typ {
  grid-row:1 / span 2; display:grid; place-items:center; width:44px; height:56px;
  border:1px solid var(--line-strong); background-color:var(--paper-2); font-size:0.62rem; font-weight:600; letter-spacing:0.08em; color:var(--text-soft);
}
.kb-blatt-titel { font-family:var(--font-display); font-weight:500; font-size:1.02rem; line-height:1.25; overflow-wrap:anywhere; }
.kb-blatt-meta { font-size:0.8rem; color:var(--text-faint); }

/* Werkzeuge (wz_kurs_kasten) nur umhüllt */
.kb-werkzeuge { display:block; }
.kb-werkzeuge:empty { display:none; }
/* 08.10.2026: Inline-Abstand des Werkzeug-Kastens (werkzeug.php, style="margin-bottom:2.5rem") neutralisiert —
   der Abstand kommt aus .kb-seite (gap), sonst doppelte Luft genau vor der Modul-Karte. !important ist der einzige Weg
   über ein Inline-Style; werkzeug.php bleibt unberührt. */
.kb-werkzeuge > .panel { margin-bottom:0 !important; }


/* ------------------------------------------------------------
   17. Start-Ideen (08.10.2026) — Markup aus dem Umsetzungsplan 1.7 a–h.
   (a) Brücke „Dazu im Cockpit“ unter den drei Sätzen der Lektion
   (b) Stand-Zeile im Hero
   (c) Drei Sätze je Lektion (dl) und (d) Begleitwort je Modul
   (e) Drei Dinge bis zum Start (Papier-Zelle, Zelle auf /kurse)
   (f) Mappe mit Zugangszeile
   (g) Termin-Zelle, Leisten-Zelle mit Termin, Schlussblatt-Links
   (h) Einstieg nach Lage (natives <details>, Lagen im Fugenraster)
   Kein Skript nötig; Reveal (Abschnitt 18) greift für die Blöcke
   mit .kb-reveal (section, Zellen, li.kb-blatt). Tokens und Maße:
   Spezifikation Kap. 7 (Eyebrow 0.72rem/600/0.16em, Kleintext
   0.82–0.88rem, Zeilen 0.97rem, Meta 0.8rem --text-faint, Geist
   kursiv für Nummern und Zitate, Fugenraster gap:1px + --line,
   kein Radius an Zellen). Kontrast (gerechnet, scratchpad/umsetzung/
   kontrast.js): --text-faint #6b6255 5,4:1 auf Papier und 4,8:1 auf
   --paper-2, --mauve-deep 6,2:1, --mauve-lesbar 5,2:1 auf Papier,
   --on-dark-faint nur in .kb-hero-geprueft (4,9:1 auf Tinte).
   ------------------------------------------------------------ */

/* (a) Brücke — eine schmale graue Zeile im Textfluss (kein Flex: so bleibt „Heizlast-Schätzer · Workbook Seite 6“
   zusammen und bricht bei 360px wie Text um). Marke in Eyebrow-Schrift, Pfeil und Hover über .kb-link. */
.kb-bruecke {
  margin:1.25rem 0 0; padding-top:0.85rem; border-top:1px solid var(--line);
  font-size:0.9rem; line-height:1.6; color:var(--text-soft); max-width:68ch; overflow-wrap:anywhere;
}
.kb-bruecke-marke {
  display:inline-block; margin-right:0.45rem; font-family:var(--font-body); font-size:0.72rem; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--mauve-deep); line-height:1.4; vertical-align:baseline;
}
.kb-bruecke .kb-link { font-size:0.9rem; }
.kb-bruecke-meta { color:var(--text-faint); font-size:0.85rem; font-variant-numeric:tabular-nums; }
.kb-bruecke-trenner { color:var(--text-faint); margin:0 0.35rem; }
.kb-bruecke-satz { display:inline; margin-left:0.35rem; }
/* Vorverkauf: ohne Links, ohne Satz; Marke und Name leise, der Name trägt trotzdem Gewicht (wie der Link, nur ohne Farbe). */
.kb-bruecke.ist-kuenftig .kb-bruecke-marke { color:var(--text-faint); }
.kb-bruecke-name { font-weight:600; color:var(--text); }
@media (max-width:559px) {
  /* 08.10.2026: Auf dem Telefon steht die Marke in einer eigenen Zeile, der Satz ebenfalls — die Werkzeuge dazwischen brechen frei um. */
  .kb-bruecke-marke { display:block; margin:0 0 0.25rem; }
  .kb-bruecke-satz { display:block; margin:0.25rem 0 0; }
}

/* (b) Stand-Zeile im Hero — leise, unter der Lede. --on-dark-faint ist hier der einzige Einsatz für Text (0.8rem, ≈5,0:1). */
.kb-hero-geprueft { font-size:0.8rem; color:var(--on-dark-faint); margin-top:-0.35rem; letter-spacing:0.01em; font-variant-numeric:tabular-nums; }

/* (c) Drei Sätze — dt in Eyebrow-Schrift, dd als ruhige Zeile; „Heute am Haus“ trägt den 3px-Mauve-Balken (der Handgriff),
   „Was diese Lektion nicht leistet“ steht in --text-faint. Ersetzt .kb-beschreibung, wenn Marken vorhanden sind. */
.kb-saetze { display:flex; flex-direction:column; gap:1rem; margin:1.1rem 0 0; max-width:68ch; }
.kb-satz { margin:0; min-width:0; }
.kb-satz dt {
  font-family:var(--font-body); font-size:0.72rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--mauve-deep); line-height:1.4; margin:0 0 0.2rem;
}
.kb-satz dd { margin:0; font-size:0.97rem; line-height:1.6; color:var(--text-soft); white-space:pre-line; overflow-wrap:anywhere; }
.kb-satz--haus { border-left:3px solid var(--mauve); padding-left:0.9rem; }
.kb-satz--haus dd { color:var(--text); }
.kb-satz--grenze dt, .kb-satz--grenze dd { color:var(--text-faint); }
.kb-saetze + .kb-beschreibung { margin-top:1.1rem; }

/* (d) Begleitwort — Porträt 40px rund, Text Geist kursiv (wie .kb-zitat, kleiner), Unterschrift „— Thomas“. Liegt im
   .kb-abschnitt an der Stelle der Kurzbeschreibung. */
.kb-begleitwort {
  display:grid; grid-template-columns:40px minmax(0,1fr); gap:0.3rem 0.9rem; align-items:start;
  margin:0.15rem 0 0.25rem; max-width:64ch;
}
.kb-begleitwort-portrait {
  grid-row:1 / span 2; width:40px; height:40px; border-radius:50%; object-fit:cover; display:block;
  border:1px solid var(--line-strong); background-color:var(--paper-2);
}
.kb-begleitwort-text {
  margin:0; font-family:var(--font-display); font-style:italic; font-weight:400; font-size:0.98rem; line-height:1.55; color:var(--text-soft);
}
.kb-begleitwort-text p { margin:0; }
.kb-begleitwort-name { font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-faint); }
.kb-abschnitt.ist-kuenftig .kb-begleitwort-portrait { filter:grayscale(1); opacity:0.85; }

/* (e) Drei Dinge — Papier-Zelle mit 1px-Rand, Polster wie .kb-zelle; Nummern in Geist-Kursive --mauve-deep; keine Häkchen.
   Der Titel nimmt die Abschnittsgröße (nicht die große Seiten-h2), weil er in einer Zelle steht. */
.kb-dinge {
  display:flex; flex-direction:column; gap:0.75rem; min-width:0; scroll-margin-top:84px;
  border:1px solid var(--line); background-color:var(--paper); padding:clamp(1.75rem,3vw,2.25rem);
}
.kb-dinge .kb-h2 { font-size:clamp(1.5rem,3vw,2rem); max-width:26ch; }
.kb-dinge-satz { color:var(--text-soft); font-size:0.97rem; line-height:1.55; max-width:60ch; }
.kb-dinge-liste { list-style:none; margin:0.5rem 0 0; padding:0; display:flex; flex-direction:column; }
.kb-ding {
  display:grid; grid-template-columns:2.6rem minmax(0,1fr); gap:0.2rem 0.9rem; align-items:start;
  padding:1rem 0; border-top:1px solid var(--line);
}
.kb-ding:last-child { border-bottom:1px solid var(--line); }
.kb-ding-nr {
  grid-row:1 / span 2; font-family:var(--font-display); font-style:italic; font-weight:400; font-size:2rem; line-height:1;
  color:var(--mauve-deep); margin-top:-0.05em;
}
.kb-ding-titel { font-family:var(--font-display); font-weight:500; font-size:1.1rem; line-height:1.3; text-wrap:balance; }
.kb-ding-text { font-size:0.92rem; color:var(--text-soft); line-height:1.55; max-width:60ch; }
.kb-dinge-blaetter { display:flex; flex-direction:column; gap:0.9rem; margin-top:0.75rem; }
/* .kb-seite h3 setzt Schrift und Gewicht — die Blätter-Überschrift ist ein Eyebrow, deshalb mit .kb-seite davor (0,2,0 > 0,1,1). */
.kb-seite .kb-dinge-blaetter-titel {
  font-family:var(--font-body); font-size:0.72rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--text-faint); line-height:1.4;
}
/* In der Zelle höchstens zwei Blätter nebeneinander (die Seiten-Regel erlaubt drei ab 980px). */
@media (min-width:980px) { .kb-blaetter--dinge { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:48rem; } }
.kb-blaetter--dinge .kb-blatt-meta { white-space:normal; line-height:1.45; }
@media (max-width:559px) {
  .kb-ding { grid-template-columns:1.6rem minmax(0,1fr); gap:0.15rem 0.7rem; }
  .kb-ding-nr { font-size:1.6rem; }
}
/* Zelle „Drei Dinge“ auf /kurse: vorhandenes Zellen-Markup; Marke wie --weiter (Mauve über den Grundwert von --kb-marke). */
.kb-zelle--dinge .kb-zelle-titel { font-style:normal; }
.kb-zelle--dinge .kb-zelle-text { max-width:52ch; }

/* (f) Mappe — an der Stelle der Unterlagen; Teile „Aus den Lektionen“, „Zum Ausdrucken“, „Ihr Bonus“ untereinander,
   die Blätter darin im vorhandenen Raster (1/2/3 Spalten). Zugangszeile mit 5px-Punkt in --gut. */
.kb-mappe { display:flex; flex-direction:column; gap:0.5rem; scroll-margin-top:84px; min-width:0; }
.kb-mappe .kb-h2 { margin-bottom:0.25rem; }
.kb-zugang {
  position:relative; padding-left:1rem; font-size:0.95rem; line-height:1.5; color:var(--text);
  font-variant-numeric:tabular-nums; max-width:64ch;
}
.kb-zugang::before { content:''; position:absolute; left:0; top:0.6em; width:5px; height:5px; border-radius:50%; background-color:var(--gut); }
.kb-mappe-teil { display:flex; flex-direction:column; gap:0.75rem; margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--line); min-width:0; }
.kb-mappe-titel { font-size:1.2rem; line-height:1.25; }
.kb-mappe-satz { color:var(--text-soft); font-size:0.95rem; line-height:1.55; max-width:64ch; }
.kb-mappe .kb-blaetter { margin-top:0.25rem; }
/* In der Mappe darf die Meta-Zeile eines Blatts mehrzeilig sein (der „wofür und wann“-Satz). */
.kb-mappe .kb-blatt-meta { white-space:normal; line-height:1.45; }
.kb-mappe .kb-blatt { align-items:start; }
.kb-mappe .kb-blatt-typ { align-self:center; }
.kb-mappe-teil--bonus .kb-mappe-titel { color:var(--mauve-deep); }

/* (g) Termin — Zelle im vorhandenen Markup (Marke wie --persoenlich; auf Tinte greifen die Regeln von .kb-zelle--tinte).
   Die Fakten sind Mitbringsel: untereinander statt nebeneinander, Datum mit Tabellenziffern. */
.kb-zelle--termin .kb-zelle-text { font-variant-numeric:tabular-nums; }
.kb-zelle--termin .kb-zelle-fakten { flex-direction:column; gap:0.35rem; }
.kb-zelle--termin .kb-zelle-fakten li::before { background-color:var(--gut); }
.kb-zelle--termin.kb-zelle--tinte .kb-zelle-fakten li::before { background-color:var(--gut-hell); }
/* 08.10.2026: Als Hero-Karte auf Tinte (Stufe C, Grund --ink-soft) hätte die Marke in --mauve-hell nur 4,1:1 — dort wie das
   Hero-Eyebrow in Papier mit opacity 0.85 (gilt für jede Tinte-Karte im Hero, also auch die Persönlich-Zelle). */
.kb-hero .kb-zelle.kb-zelle--tinte .kb-zelle-marke { color:var(--on-dark); opacity:0.85; }
/* Leisten-Zelle mit Termin: Mauve-Balken links, erste Zeile (Datum) in --text, Mitbringen klein. */
.kb-leiste-persoenlich.ist-termin { border-left:3px solid var(--mauve); color:var(--text); }
.kb-leiste-persoenlich.ist-termin > p:first-of-type { font-weight:500; font-variant-numeric:tabular-nums; }
.kb-leiste-klein { font-size:0.82rem; color:var(--text-soft); line-height:1.5; }
/* Schlussblatt-Links: dritte Zeile der figure (Spalte 2 neben dem Porträt), Text --on-dark-soft, Links in Papier wie .kb-hero a. */
.kb-schlussblatt-links {
  grid-column:2; margin:0.6rem 0 0; font-size:0.9rem; line-height:1.6; color:var(--on-dark-soft); max-width:52ch;
  display:flex; flex-wrap:wrap; gap:0.35rem 1.25rem; align-items:baseline;
}
.kb-schlussblatt-links .kb-link { color:var(--on-dark); flex:none; }
.kb-schlussblatt-links .kb-link:hover { color:var(--on-dark); border-bottom-color:var(--mauve-hell); }

/* (h) Einstieg nach Lage — natives <details>, zugeklappt; summary ohne Marker, eigener Pfeil (::after, dreht bei [open]);
   Fokus-Outline kommt aus der allgemeinen Regel für summary:focus-visible (Abschnitt 3, wie .kb-leiste-summary). */
.kb-einstieg { border:1px solid var(--line); background-color:var(--paper); min-width:0; scroll-margin-top:84px; }
.kb-einstieg-summary {
  display:flex; flex-wrap:wrap; align-items:baseline; gap:0.35rem 1rem; cursor:pointer; list-style:none;
  padding:1.1rem 1.25rem; transition:background-color 0.2s var(--ease);
}
.kb-einstieg-summary::-webkit-details-marker { display:none; }
.kb-einstieg-summary::after {
  content:''; width:8px; height:8px; flex:none; align-self:center; margin-left:auto; margin-top:-3px; color:var(--text-faint);
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg);
  transition:transform 0.25s var(--ease);
}
.kb-einstieg[open] > .kb-einstieg-summary::after { transform:rotate(-135deg); margin-top:3px; }
.kb-einstieg[open] > .kb-einstieg-summary { border-bottom:1px solid var(--line); }
.kb-einstieg-summary:hover { background-color:var(--paper-2); }
.kb-einstieg-summary .kb-eyebrow { flex-basis:100%; }
.kb-einstieg-frage { font-family:var(--font-display); font-weight:500; font-size:clamp(1.15rem,2.2vw,1.45rem); line-height:1.2; }
.kb-einstieg-inhalt { display:flex; flex-direction:column; gap:1rem; padding:1.25rem 1.25rem 1.25rem; }
.kb-einstieg-satz { color:var(--text-soft); font-size:0.95rem; line-height:1.55; max-width:64ch; }
/* Lagen im Fugenraster wie .kb-zellen: eine Spalte, ab 760px zwei; die persönliche Lage schließt über die volle Breite ab. */
.kb-lagen { list-style:none; margin:0; padding:0; display:grid; gap:1px; background-color:var(--line); border:1px solid var(--line); grid-template-columns:minmax(0,1fr); }
.kb-lage { display:flex; flex-direction:column; gap:0.6rem; min-width:0; background-color:var(--paper); padding:1.25rem 1.25rem 1.4rem; }
.kb-lage-titel { font-size:1.15rem; line-height:1.25; }
.kb-lage-text { color:var(--text-soft); font-size:0.92rem; line-height:1.5; max-width:48ch; }
.kb-lage-lektionen { list-style:none; margin:0.25rem 0 0; padding:0; border-top:1px solid var(--line); }
.kb-lage a:not(.kb-btn):not(.kb-link) {
  display:flex; align-items:center; gap:0.7rem; padding:0.6rem 0.5rem 0.6rem 0.4rem; border-bottom:1px solid var(--line);
  text-decoration:none; color:inherit; font-size:0.92rem; line-height:1.35; min-width:0;
  transition:background-color 0.2s var(--ease);
}
.kb-lage a:not(.kb-btn):not(.kb-link):hover { background-color:var(--paper-2); }
.kb-lage a:not(.kb-btn):not(.kb-link):hover .kb-lektion-nr { color:var(--mauve-deep); }
.kb-lage-lektion-titel { flex:1 1 8rem; min-width:0; }
.kb-lage-meta { flex:none; margin-left:auto; font-size:0.8rem; color:var(--text-faint); white-space:nowrap; font-variant-numeric:tabular-nums; }
.kb-lage-summe { font-size:0.84rem; color:var(--text-soft); }
.kb-lage .kb-btn { align-self:flex-start; margin-top:auto; }
.kb-lage--persoenlich { border-left:3px solid var(--mauve); }
.kb-lage--persoenlich .kb-link { align-self:flex-start; margin-top:auto; }
@media (min-width:760px) {
  .kb-lagen { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kb-lage--persoenlich { grid-column:1 / -1; }
  .kb-einstieg-summary .kb-eyebrow { flex-basis:auto; }
}
@media (max-width:559px) {
  .kb-einstieg-summary { padding:1rem 1rem; }
  .kb-einstieg-inhalt { padding:1rem 1rem 1.1rem; }
  .kb-lage { padding:1.1rem 1rem 1.2rem; }
  .kb-lage .kb-btn { align-self:stretch; }
}


/* ------------------------------------------------------------
   17 b. Bewertungskarte „Ihre Stimme“ (10.10.2026, src/bewertungen.php)
   Kursseite (über der Mappe, ab 980px zweispaltig: Kopf mit dem
   Satz von Thomas links, Formular rechts, Hinweis darunter) und
   letzte Lektion (.kb-bewertung--lektion, einspaltig in der
   Hauptspalte). Papier mit 1px-Rand und 3px-Mauve-Kante wie das
   Termin-Band. Ohne Skript voll bedienbar: Sterne sind eine echte
   Radio-Gruppe (Eingabe unsichtbar über dem Stern, fokussierbar,
   Pfeiltasten wie gewohnt); ohne :has() färbt sich nur der gewählte
   Stern, mit :has() alle bis zum gewählten und die Vorschau beim
   Überfahren. Satz von Thomas im Markup des Begleitworts (17 d).
   ------------------------------------------------------------ */
.kb-bewertung {
  display:grid; grid-template-columns:minmax(0,1fr); gap:1.5rem clamp(2rem,4vw,3.5rem); align-items:start; min-width:0;
  scroll-margin-top:84px; border:1px solid var(--line); border-left:3px solid var(--mauve);
  background-color:var(--paper); padding:clamp(1.5rem,3vw,2.25rem);
}
@media (min-width:980px) {
  .kb-bewertung:not(.kb-bewertung--lektion) { grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
  .kb-bewertung:not(.kb-bewertung--lektion) > .kb-bw-regeln { grid-column:1 / -1; }
  /* 10.10.2026 (Prüfung): Kopf mit dem Satz von Thomas läuft neben dem langen Formular mit (unter der Kopfleiste .top). */
  .kb-bewertung:not(.kb-bewertung--lektion) > .kb-bw-kopf { position:sticky; top:100px; }
}
.kb-bewertung--lektion { margin-top:2rem; }
.kb-bw-kopf { display:flex; flex-direction:column; gap:0.75rem; min-width:0; }
.kb-bewertung .kb-h2 { font-size:clamp(1.5rem,3vw,2rem); max-width:20ch; }
.kb-bewertung--lektion .kb-h2 { font-size:clamp(1.35rem,2.6vw,1.75rem); }
.kb-bw-wort { margin-top:0.35rem; }

/* Formular */
.kb-bw-form { display:flex; flex-direction:column; gap:1.35rem; min-width:0; }
.kb-bw-nebenform { display:none; }   /* nur Token und Kurs; abgeschickt über die Knöpfe mit form="…" */
/* 10.10.2026 (Prüfung): Zusatz hängt per &nbsp; am letzten Wort (bw_formular_html) und bricht selbst nicht um. */
.kb-bw-zusatz {
  font-family:var(--font-body); font-size:0.78rem; font-weight:400; letter-spacing:0; text-transform:none;
  color:var(--text-faint); margin-left:0.1rem; white-space:nowrap;
}
.kb-bw-nobr { white-space:nowrap; }   /* „E-Mail“ nicht am Bindestrich umbrechen */
.kb-bewertung .field label { font-size:0.9rem; font-weight:600; color:var(--text); }
.kb-bewertung textarea { min-height:8rem; }
.kb-bw-hinweis { font-size:0.8rem; line-height:1.5; color:var(--text-faint); max-width:64ch; }
.kb-bw-zaehler { font-variant-numeric:tabular-nums; }
.kb-bw-zaehler.ist-knapp { color:var(--warn-text); font-weight:600; }
.kb-bw-felder { display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; }
.kb-bw-felder-hinweis { grid-column:1 / -1; margin-top:-0.4rem; }
@media (min-width:560px) { .kb-bw-felder { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Sterne: fieldset ohne Rahmen, Legende als Frage in Display-Schrift. */
.kb-bw-sterne { border:0; margin:0; padding:0; min-width:0; }
.kb-bw-sterne legend {
  padding:0; margin-bottom:0.6rem; font-family:var(--font-display); font-weight:500; font-size:1.1rem; line-height:1.3; color:var(--text);
}
.kb-bw-sterne-wahl { display:flex; flex-wrap:wrap; gap:0.15rem; }
.kb-bw-stern {
  position:relative; display:inline-flex; flex-direction:column; align-items:center; gap:0.1rem;
  min-width:48px; padding:0.3rem 0.35rem 0.25rem; cursor:pointer; font-size:inherit; font-weight:400; color:inherit;
}
.kb-bw-stern input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.kb-bw-stern-bild {
  display:block; width:34px; height:34px; fill:transparent; stroke:var(--mauve-deep); stroke-width:1.3; stroke-linejoin:round;
  transition:fill 0.15s var(--ease), stroke 0.15s var(--ease), transform 0.15s var(--ease);
}
.kb-bw-stern-zahl { font-size:0.74rem; line-height:1.2; color:var(--text-faint); font-variant-numeric:tabular-nums; }
.kb-bw-stern input:checked + .kb-bw-stern-bild { fill:var(--mauve); stroke:var(--mauve); }
.kb-bw-stern input:checked ~ .kb-bw-stern-zahl { color:var(--mauve-deep); font-weight:600; }
.kb-bw-stern input:focus-visible + .kb-bw-stern-bild { outline:2px solid var(--mauve); outline-offset:3px; border-radius:2px; }
/* Mit :has(): alle Sterne bis zum gewählten. :where() hält die Spezifität niedrig (0,3,0), damit die Vorschau unten gewinnt. */
.kb-bw-sterne-wahl:where(:has(input[value="2"]:checked)) .kb-bw-stern:where(:nth-child(-n+2)) .kb-bw-stern-bild { fill:var(--mauve); stroke:var(--mauve); }
.kb-bw-sterne-wahl:where(:has(input[value="3"]:checked)) .kb-bw-stern:where(:nth-child(-n+3)) .kb-bw-stern-bild { fill:var(--mauve); stroke:var(--mauve); }
.kb-bw-sterne-wahl:where(:has(input[value="4"]:checked)) .kb-bw-stern:where(:nth-child(-n+4)) .kb-bw-stern-bild { fill:var(--mauve); stroke:var(--mauve); }
.kb-bw-sterne-wahl:where(:has(input[value="5"]:checked)) .kb-bw-stern:where(:nth-child(-n+5)) .kb-bw-stern-bild { fill:var(--mauve); stroke:var(--mauve); }
/* Vorschau beim Überfahren (nur mit Maus): Stern unter dem Zeiger und alle davor gefüllt wie bei der Auswahl; je Regel ein
   Selektor, damit ein Browser ohne :has() nicht die ganze Regel verwirft. 10.10.2026 (Prüfung): volle Füllung statt halber —
   vorher schlug die halbe Vorschau (Spezifität 0,5,0) die Auswahl, ein Klick blieb unter dem Zeiger ohne sichtbare Wirkung. */
@media (hover:hover) {
  .kb-bw-sterne-wahl:has(.kb-bw-stern:hover) .kb-bw-stern .kb-bw-stern-bild { fill:transparent; stroke:var(--mauve-deep); }
  .kb-bw-sterne-wahl:has(.kb-bw-stern:hover) .kb-bw-stern:hover .kb-bw-stern-bild { fill:var(--mauve); stroke:var(--mauve); }
  .kb-bw-sterne-wahl:has(.kb-bw-stern:hover) .kb-bw-stern:has(~ .kb-bw-stern:hover) .kb-bw-stern-bild { fill:var(--mauve); stroke:var(--mauve); }
  .kb-bw-stern:hover .kb-bw-stern-bild { transform:scale(1.08); }
}
.kb-bw-skala { font-size:0.8rem; color:var(--text-faint); margin-top:0.35rem; }

/* Einwilligungen: Häkchen oben bündig, Text in --text-soft, beim Überfahren dunkler. */
.kb-bw-einwilligungen { display:flex; flex-direction:column; gap:0.85rem; padding-top:1.1rem; border-top:1px solid var(--line); }
.kb-bw-einwilligung {
  display:flex; gap:0.75rem; align-items:flex-start; cursor:pointer; max-width:70ch;
  font-size:0.86rem; font-weight:400; line-height:1.55; color:var(--text-soft);
}
.kb-bw-einwilligung input { flex:none; width:1.15rem; height:1.15rem; margin:0.15rem 0 0; accent-color:var(--mauve-deep); cursor:pointer; }
.kb-bw-einwilligung input:focus-visible { outline:2px solid var(--mauve); outline-offset:2px; }
.kb-bw-einwilligung:hover > span { color:var(--text); }
/* Hinweis auf eine Zustimmung zu einem früheren Wortlaut (nur beim Bearbeiten), direkt über dem leeren Häkchen. */
.kb-bw-fassung { color:var(--text-soft); border-left:2px solid var(--line-strong); padding-left:0.75rem; max-width:70ch; }

/* Knöpfe: Abgeben (Primär), Später (Ghost), Nein, danke und Zurückziehen als leiser Textknopf (Trefferfläche 44px). */
.kb-bw-knoepfe { display:flex; flex-wrap:wrap; align-items:center; gap:0.75rem 1.25rem; }
.kb-bw-leise {
  appearance:none; background:none; border:0; margin:0; padding:0.6rem 0.2rem; min-height:44px; cursor:pointer;
  font-family:var(--font-body); font-size:0.9rem; font-weight:600; color:var(--text-soft);
  text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px;
  transition:color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
}
.kb-bw-leise:hover { color:var(--text); text-decoration-color:currentColor; }
.kb-bw-zurueck { margin:0; display:inline-flex; }

/* Rückmeldungen (Dank, Fehler, nach „Später“/„Nein, danke“) */
.kb-bw-meldung {
  margin:0; padding:0.75rem 1rem; border-left:3px solid var(--gut); background-color:var(--paper-2);
  font-size:0.92rem; line-height:1.5; color:var(--text);
}
.kb-bw-meldung.ist-fehler { border-left-color:var(--schlecht); }
.kb-bewertung--notiz { display:block; padding:1rem 1.25rem; border-left-color:var(--gut); }
.kb-bewertung--notiz .kb-bw-meldung { padding:0; border:0; background:none; }

/* Hinweis „So gehen wir mit Bewertungen um“ — klein, unter dem Formular, über die volle Breite. */
.kb-bw-regeln {
  display:flex; flex-direction:column; gap:0.35rem; padding-top:1rem; border-top:1px solid var(--line);
  font-size:0.8rem; line-height:1.55; color:var(--text-soft); min-width:0;
}
.kb-bw-regeln p { margin:0; max-width:96ch; }
.kb-seite .kb-bw-regeln-titel {
  font-family:var(--font-body); font-size:0.7rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
  line-height:1.4; color:var(--text-faint);
}
.kb-bw-regeln a { color:var(--mauve-lesbar); font-weight:600; }

/* Kompakte Ansicht „Ihre Bewertung“ — 10.10.2026 (Prüfung): natives <details> wie .kb-einstieg (17 h), zugeklappt eine Zeile
   (Eyebrow, Sterne, Datum), offen nach einer Rückmeldung. Die Meldung steht über dem Kopf, damit sie auch zugeklappt zu sehen ist. */
.kb-bewertung--kompakt { display:block; padding:0; }
.kb-bewertung--kompakt > .kb-bw-meldung { margin:1rem 1.25rem 0; }
.kb-bw-summary {
  display:flex; flex-wrap:wrap; align-items:center; gap:0.35rem 1rem; cursor:pointer; list-style:none;
  padding:1.1rem 1.25rem; transition:background-color 0.2s var(--ease);
}
.kb-bw-summary::-webkit-details-marker { display:none; }
.kb-bw-summary::after {
  content:''; width:8px; height:8px; flex:none; margin-left:auto; margin-top:-3px; color:var(--text-faint);
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg);
  transition:transform 0.25s var(--ease);
}
.kb-bw-details[open] > .kb-bw-summary::after { transform:rotate(-135deg); margin-top:3px; }
.kb-bw-details[open] > .kb-bw-summary { border-bottom:1px solid var(--line); }
.kb-bw-summary:hover { background-color:var(--paper-2); }
.kb-bw-summary:focus-visible { outline:2px solid var(--mauve); outline-offset:-2px; }
.kb-bw-summary .kb-bw-sterne-anzeige .kb-bw-stern-bild { width:18px; height:18px; }
.kb-bw-summary-text { font-size:0.86rem; color:var(--text-soft); font-variant-numeric:tabular-nums; }
.kb-bw-details > .kb-bw-stimme { padding:1.25rem; }
.kb-bw-stimme { display:flex; flex-direction:column; gap:0.75rem; min-width:0; }
.kb-bw-sterne-anzeige { display:flex; gap:0.15rem; margin:0; }
.kb-bw-sterne-anzeige .kb-bw-stern-bild { width:24px; height:24px; }
.kb-bw-sterne-anzeige .kb-bw-stern-bild.ist-voll { fill:var(--mauve); stroke:var(--mauve); }
.kb-bw-zitat {
  margin:0; font-family:var(--font-display); font-style:italic; font-weight:400; font-size:1.05rem; line-height:1.6;
  color:var(--text); max-width:64ch;
}
.kb-bw-zitat p { margin:0; white-space:pre-line; overflow-wrap:anywhere; }
.kb-bw-wer { font-size:0.82rem; color:var(--text-faint); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.kb-bw-stand {
  list-style:none; margin:0; padding:0.85rem 0 0; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:0.3rem; font-size:0.86rem; line-height:1.5; color:var(--text-soft);
}
.kb-bw-stand li { position:relative; padding-left:0.95rem; }
.kb-bw-stand li::before {
  content:''; position:absolute; left:0; top:0.62em; width:5px; height:5px; border-radius:50%; background-color:var(--line-strong);
}
.kb-bw-stand li.ist-ja::before { background-color:var(--gut); }
.kb-bw-stand a { color:var(--mauve-lesbar); }
/* „Einwilligung widerrufen“ — ein Klick je Einwilligung, als leiser Textknopf hinter der Zeile (Trefferfläche mindestens 24px). */
.kb-bw-widerruf { display:inline-flex; margin:0 0 0 0.6rem; vertical-align:baseline; }
.kb-bw-leise--klein { min-height:24px; padding:0.1rem 0.15rem; font-size:0.82rem; color:var(--mauve-lesbar); text-decoration-color:currentColor; }
.kb-bw-leise--klein:hover { color:var(--mauve-deep); }
@media (max-width:559px) {
  .kb-bewertung { padding:1.25rem 1rem 1.4rem; }
  .kb-bewertung--kompakt { padding:0; }
  .kb-bw-summary { padding:1rem; }
  .kb-bw-details > .kb-bw-stimme { padding:1rem 1rem 1.1rem; }
  .kb-bewertung--kompakt > .kb-bw-meldung { margin:1rem 1rem 0; }
  .kb-bw-widerruf { display:flex; margin:0.15rem 0 0; }
  .kb-bw-stern { min-width:44px; padding-inline:0.2rem; }
  .kb-bw-stern-bild { width:30px; height:30px; }
  /* Unter den Knöpfen in voller Breite (.kb-seite .kb-btn) steht der leise Knopf mittig darunter. */
  .kb-bw-knoepfe > .kb-bw-leise, .kb-bw-zurueck, .kb-bw-zurueck .kb-bw-leise { width:100%; justify-content:center; text-align:center; }
}


/* ------------------------------------------------------------
   18. Reveal — nur mit JS und ohne reduced-motion gedämpft;
   ohne JS sofort sichtbar.
   ------------------------------------------------------------ */
/* 08.10.2026 (Korrektur): Hover-Übergänge (Kachel-Rand, Zellen-Grund, Blatt) in die Liste aufgenommen — sonst überschreibt
   diese Regel (gleiche Spezifität, später) die Hover-Transitions und die Zustände springen.
   08.10.2026 (Start-Ideen): .kb-reveal sitzt nur an Blöcken (.kb-dinge, .kb-einstieg, .kb-zelle--dinge/--termin, li.kb-blatt),
   nie an den Zeilen darin — die Hover-Übergänge von .kb-lage a, .kb-einstieg-summary und .kb-bruecke .kb-link (Abschnitt 17)
   werden hier deshalb nicht überschrieben; für Zellen und Blätter gilt die Liste unten unverändert. */
.kb-reveal {
  transition:opacity 0.7s var(--ease), transform 0.7s var(--ease),
             background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.kb-blatt.kb-reveal { transition:opacity 0.7s var(--ease), transform 0.3s var(--ease), border-color 0.3s var(--ease); }
@media (prefers-reduced-motion:no-preference) {
  html.kb-js .kb-reveal:not(.ist-sichtbar) { opacity:0; transform:translateY(16px); }
  html.kb-js .kb-reveal.ist-sichtbar { opacity:1; transform:none; }
  /* Das 1-px-Fugenraster erst mit den Zellen einfärben — sonst steht beim Scrollen ein grauer Block, bis der Beobachter auslöst. */
  html.kb-js .kb-zellen:not(:has(.kb-reveal.ist-sichtbar)) { background-color:transparent; border-color:transparent; }
}


/* ------------------------------------------------------------
   19. Bewegung — Keyframes nur ohne reduced-motion und mit JS.
   Choreografie Kap. 6: Band 0 ms, Haken 150 ms, Balken/Kennzahl/Zeile
   250 ms, Weiter-Balken 400 ms, Linie 400 ms, Kurs: Licht 0, Linie 300,
   Schlussblatt 500, Zellen ab 700 (Reveal-Staffel aus dem JS).
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:no-preference) {
  @keyframes kb-auf { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
  @keyframes kb-zeichnen { from { stroke-dashoffset:24; } to { stroke-dashoffset:0; } }
  @keyframes kb-wachsen { from { width:var(--kb-von); } to { width:var(--kb-bis); } }
  @keyframes kb-haken-ein { from { opacity:0; transform:rotate(-45deg) scale(0.6); } to { opacity:1; transform:rotate(-45deg) scale(1); } }
  @keyframes kb-kreis-ein { from { background-color:transparent; border-color:var(--line-strong); } to { background-color:var(--gut); border-color:var(--gut); } }
  @keyframes kb-schimmer { from { background-color:var(--paper-2); } to { background-color:transparent; } }
  @keyframes kb-balken-ein { from { transform:scaleY(0); } to { transform:scaleY(1); } }
  @keyframes kb-linie { from { transform:scaleX(0); } to { transform:scaleX(1); } }
  @keyframes kb-licht { 0% { opacity:0.85; } 50% { opacity:1; } 100% { opacity:0.85; } }
  @keyframes kb-knoten-ein { from { background-color:transparent; border-color:var(--line-strong); } to { background-color:var(--gut); border-color:var(--gut); } }

  /* Akt 2 — Zielseite mit validem Marker (body.kb-ist-fertig setzt das JS). */
  html.kb-js body.kb-ist-fertig .kb-meilenstein { animation:kb-auf 0.35s var(--ease) both; }
  html.kb-js body.kb-ist-fertig .kb-haken-pfad { animation:kb-zeichnen 0.45s var(--ease) 0.15s both; }
  html.kb-js body.kb-ist-fertig .kb-balken .kb-balken-fuell { animation:kb-wachsen 0.7s var(--ease) 0.25s both; }
  html.kb-js body.kb-ist-fertig .kb-lektion.ist-gerade-fertig { animation:kb-schimmer 0.6s var(--ease) 0.25s both; }
  html.kb-js body.kb-ist-fertig .kb-lektion.ist-gerade-fertig .kb-lektion-zustand { animation:kb-kreis-ein 0.25s var(--ease) 0.25s both; }
  html.kb-js body.kb-ist-fertig .kb-lektion.ist-gerade-fertig .kb-lektion-zustand::after { animation:kb-haken-ein 0.25s var(--ease) 0.3s both; }
  html.kb-js body.kb-ist-fertig .kb-lektion.ist-weiter::before { animation:kb-balken-ein 0.4s var(--ease) 0.4s both; }
  html.kb-js body.kb-ist-fertig .kb-karte--module .kb-knoten.ist-aktuell::before { transform-origin:left; animation:kb-linie 1.2s var(--ease) 0.4s both; }
  html.kb-js body.kb-ist-fertig .kb-karte--module .kb-knoten.ist-gerade-erreicht .kb-knoten-punkt { animation:kb-auf 0.4s var(--ease) 0.4s both; }
  html.kb-js body.kb-ist-fertig .kb-karte--module .kb-knoten.ist-gerade-erreicht .kb-knoten-punkt,
  html.kb-js body.kb-ist-fertig .kb-knoten.ist-gerade-erreicht .kb-knoten-punkt { transition:box-shadow 0.4s var(--ease) 0.4s; }
  @media (max-width:719px) {
    /* Senkrechte Linie: in der Höhe wachsen (scaleY), nicht in der Breite — gilt auch für die komplette Karte beim Kursabschluss (08.10.2026, Korrektur). */
    html.kb-js body.kb-ist-fertig .kb-karte--module .kb-knoten.ist-aktuell::before,
    html.kb-js body.kb-ist-fertig .kb-karte--module.ist-komplett .kb-knoten::before,
    html.kb-js body.kb-ist-fertig .kb-karte--module.ist-komplett .kb-knoten::after { transform-origin:top; animation-name:kb-balken-ein; }
  }

  /* Kursabschluss — Lichtkegel atmet, Linie wird grün, Knoten nacheinander, Schlussblatt hebt sich. */
  html.kb-js body.kb-ist-fertig .kb-hero--fertig.ist-aufhellen::before { animation:kb-licht 1.8s var(--ease) both; }
  html.kb-js body.kb-ist-fertig .kb-karte--module.ist-komplett .kb-knoten::before,
  html.kb-js body.kb-ist-fertig .kb-karte--module.ist-komplett .kb-knoten::after { transform-origin:left top; animation:kb-linie 1.6s var(--ease) 0.3s both; }
  html.kb-js body.kb-ist-fertig .kb-karte--module.ist-komplett .kb-knoten.ist-fertig .kb-knoten-punkt { animation:kb-knoten-ein 0.3s var(--ease) 0.3s both; }
  html.kb-js body.kb-ist-fertig .kb-karte--module.ist-komplett .kb-knoten.ist-fertig .kb-knoten-punkt::after { animation:kb-haken-ein 0.3s var(--ease) 0.35s both; }
  html.kb-js body.kb-ist-fertig .kb-karte--module.ist-komplett .kb-knoten:nth-child(2) .kb-knoten-punkt,
  html.kb-js body.kb-ist-fertig .kb-karte--module.ist-komplett .kb-knoten:nth-child(2) .kb-knoten-punkt::after { animation-delay:0.42s; }
  html.kb-js body.kb-ist-fertig .kb-karte--module.ist-komplett .kb-knoten:nth-child(3) .kb-knoten-punkt,
  html.kb-js body.kb-ist-fertig .kb-karte--module.ist-komplett .kb-knoten:nth-child(3) .kb-knoten-punkt::after { animation-delay:0.54s; }
  html.kb-js body.kb-ist-fertig .kb-karte--module.ist-komplett .kb-knoten:nth-child(4) .kb-knoten-punkt,
  html.kb-js body.kb-ist-fertig .kb-karte--module.ist-komplett .kb-knoten:nth-child(4) .kb-knoten-punkt::after { animation-delay:0.66s; }
  html.kb-js body.kb-ist-fertig .kb-karte--module.ist-komplett .kb-knoten:nth-child(5) .kb-knoten-punkt,
  html.kb-js body.kb-ist-fertig .kb-karte--module.ist-komplett .kb-knoten:nth-child(5) .kb-knoten-punkt::after { animation-delay:0.78s; }
  html.kb-js body.kb-ist-fertig .kb-karte--module.ist-komplett .kb-knoten:nth-child(6) .kb-knoten-punkt,
  html.kb-js body.kb-ist-fertig .kb-karte--module.ist-komplett .kb-knoten:nth-child(6) .kb-knoten-punkt::after { animation-delay:0.9s; }
  html.kb-js body.kb-ist-fertig .kb-karte--module.ist-komplett .kb-knoten:nth-child(n+7) .kb-knoten-punkt,
  html.kb-js body.kb-ist-fertig .kb-karte--module.ist-komplett .kb-knoten:nth-child(n+7) .kb-knoten-punkt::after { animation-delay:1.02s; }
  html.kb-js body.kb-ist-fertig .kb-schlussblatt { animation:kb-auf 0.5s var(--ease) 0.5s both; }
  html.kb-js body.kb-ist-fertig .kb-hero--fertig .kb-zelle { animation:kb-auf 0.5s var(--ease) 0.6s both; }

  /* Akt 1 — Klick auf der Lektionsseite (Klassen setzt das JS, hier nur die Übergänge). */
  html.kb-js .kb-lektion.ist-gerade-fertig { animation:kb-schimmer 0.6s var(--ease) both; }
  html.kb-js .kb-abschluss-zustand.ist-fertig .kb-lektion-zustand::after { animation:kb-haken-ein 0.24s var(--ease) both; }
  html.kb-js .kb-leiste-summary .tabular, html.kb-js .kb-leiste-stand { transition:opacity 0.22s var(--ease); }
  /* Leisten-Zahlen nach dem Hochzählen: das JS setzt .ist-neu (mit Reflow), die Zahl blendet 220 ms ein. */
  @keyframes kb-neu { from { opacity:0; } to { opacity:1; } }
  html.kb-js .kb-leiste-summary .tabular.ist-neu, html.kb-js .kb-leiste-stand.ist-neu { animation:kb-neu 0.22s var(--ease) both; }
}


/* ------------------------------------------------------------
   20. Reduced-motion — zusätzlich zur globalen Regel in kurse.css:
   keine Verschiebungen, keine Haken-Zeichnung, alles steht sofort.
   08.10.2026 (Start-Ideen): die neuen Hover-Übergänge (Lagen-Zeile,
   Einstieg-Pfeil und -Kopf) ebenfalls ohne Übergang.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce) {
  .kb-reveal, .kb-btn, .kb-deckblatt, .kb-kachel::before, .kb-lektion::before, .kb-knopf-haken, .kb-pfeil, .kb-blatt,
  .kb-balken-fuell, .kb-minibalken > span, .kb-knoten-punkt, .kb-lektion-zustand, .kb-lektion-zustand::after,
  .kb-lage a, .kb-einstieg-summary, .kb-einstieg-summary::after,
  .kb-bw-stern-bild, .kb-bw-leise, .kb-bw-summary, .kb-bw-summary::after { transition:none !important; animation:none !important; }   /* 10.10.2026: Bewertungskarte (17 b) */
  .kb-btn.btn-primary:hover, .kb-btn.btn-ghost:hover, .kb-blatt:hover, .kb-bw-stern:hover .kb-bw-stern-bild { transform:none; }
  .kb-kachel:hover .kb-deckblatt, .kb-kachel:focus-within .kb-deckblatt { transform:rotate(-3deg); }
  .kb-haken-pfad { stroke-dashoffset:0; }
  .kb-hero--fertig.ist-aufhellen::before { opacity:0.9; }
}