/* ============================================================
   beirat Akademie — Komponenten (Spec §5/§9, Praefix bak-)
   Regeln: NUR Bestandstokens (theme.css remappt sie dark), keine
   Hex-Literale, Karten 1px Border ohne Shadow, Gold nur als
   Haarlinie/Badge (nie Text auf hellen Flaechen), Motion gated auf
   html[data-motion] (Cinema-Konvention) + prefers-reduced-motion.
   Budget: <= 90 KB unkomprimiert (V2.5 R-11, vorher 60 KB SCHOOL-V2 §3).
   ============================================================ */

/* ---------- Wrapper + Grundlayout ---------- */

.bak-wrap {
  max-width: var(--page-max-width, 1200px);
  margin: 0 auto;
  padding: 2.5rem 24px 4rem;
  font-family: var(--font-body);
  color: var(--text-primary);
}
.bak-wrap > * { max-width: var(--content-max-width, 720px); margin-left: auto; margin-right: auto; }
.bak-wrap > .bak-kursgrid,
.bak-wrap > .bak-modul,
.bak-wrap > .bak-quizkarte { max-width: 960px; }

.bak-kicker {
  font-family: var(--font-ui);
  font-size: var(--fs-micro, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-primary);
  margin: 0 0 0.5rem;
}
.bak-hero { margin-bottom: var(--space-lg, 40px); }
.bak-hero h1 {
  font-family: var(--font-serif-display);
  font-size: var(--fs-h1);
  line-height: 1.15;
  margin: 0 0 0.5rem;
}
.bak-hero-sub {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  margin: 0 0 0.75rem;
}
.bak-kursmeta {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.bak-voraussetzung { font-family: var(--font-ui); font-size: 0.85rem; color: var(--text-secondary); }
/* Kursbeschrieb auf dem Kurs-Hub (Erratum 9): Lesetext, oeffentlich + indexierbar. */
.bak-kursintro { max-width: 68ch; margin: 0 0 var(--space-lg, 40px); }
.bak-kursintro p { margin: 0 0 0.9rem; }
.bak-kursintro p:last-child { margin-bottom: 0; }
.bak-fussnote {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
  padding-top: var(--space-sm, 16px);
  margin-top: var(--space-lg, 40px);
}
.bak-inarbeit {
  font-family: var(--font-ui);
  color: var(--text-secondary);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-md, 24px);
}
.bak-brotkrumen {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-md, 24px);
}
.bak-brotkrumen a { color: var(--text-secondary); text-decoration: none; }
.bak-brotkrumen a:hover, .bak-brotkrumen a:focus { color: var(--accent-primary); text-decoration: underline; }

/* Fokus-Ringe (WCAG, sichtbar, tokenbasiert) */
.bak-wrap :is(a, button, summary, input, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 4px);
}

/* ---------- Buttons ---------- */

.bak-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; /* Touchziel R-8 (P1/C1) — Site-Standard wie .btn in beirat.css */
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--accent-primary);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.bak-btn--primary { background: var(--accent-primary); color: var(--bg-base); }
.bak-btn--primary:hover, .bak-btn--primary:focus { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--bg-base); }
.bak-btn--ghost { background: transparent; color: var(--accent-primary); }
.bak-btn--ghost:hover, .bak-btn--ghost:focus { background: var(--accent-primary); color: var(--bg-base); }
.bak-btn--next { background: transparent; color: var(--accent-primary); }
.bak-btn--next:hover, .bak-btn--next:focus { border-color: var(--accent-hover); color: var(--accent-hover); }
.bak-btn--next.ist-bereit { background: var(--accent-primary); color: var(--bg-base); }
.bak-btn--next.ist-bereit:hover, .bak-btn--next.ist-bereit:focus { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--bg-base); }
/* V2.6 P2 (CHROME-08): vor dem Abschluss ist «Lektion abschliessen» der klare Fokus der
   Ansicht: Bordeaux-Border + -Text auf --bg-elevated (kein Fill; der Fill bleibt dem
   ist-bereit-Next vorbehalten). Nach dem Abschluss (ist-fertig) wird er wieder still. */
.bak-btn--done { background: var(--bg-elevated); color: var(--accent-primary); border-color: var(--accent-primary); }
.bak-btn--done:hover, .bak-btn--done:focus { background: var(--accent-primary); border-color: var(--accent-primary); color: var(--bg-base); }
.bak-btn--done.ist-fertig {
  background: transparent;
  border-color: var(--gold);
  color: var(--text-primary);
  cursor: default;
}
.bak-btn--done.ist-fertig svg { vertical-align: -0.15em; margin-right: 0.35em; }
/* P1/C2: zentraler Disabled-Zustand (Messlatte §5.1) — pointer-events neutralisiert Hover */
.bak-btn:disabled, .bak-btn[disabled] { opacity: 0.55; cursor: default; pointer-events: none; }
/* P1/C6: dezentes Druck-Feedback (active) fuer alle Akademie-Buttons */
.bak-btn:active:not(:disabled), .bak-int-btn:active:not([disabled]), .bak-quiz-option:active { transform: translateY(1px); } /* + QUIZ-09 */
html[data-motion="calm"] .bak-btn:active, html[data-motion="calm"] .bak-int-btn:active, html[data-motion="calm"] .bak-quiz-option:active { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .bak-btn:active, .bak-int-btn:active, .bak-quiz-option:active { transform: none; }
}

/* ---------- Niveau-Badges (Spec §9) ---------- */

.bak-badge {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.bak-badge--einsteiger { background: var(--bg-base); color: var(--accent-primary); border-color: var(--accent-primary); }
.bak-badge--fortgeschritten { background: var(--accent-primary); color: var(--bg-base); border-color: var(--accent-primary); }
.bak-badge--profi { background: var(--bg-deep); color: var(--text-on-dark, #F5F1EA); border-color: var(--gold); }
.bak-badge--bald { background: var(--bg-elevated); color: var(--text-secondary); }

/* ---------- Hub: Kurskarten ---------- */

.bak-kursgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md, 24px);
  margin-bottom: var(--space-lg, 40px);
}
.bak-kurskarte {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-elevated);
  padding: var(--space-md, 24px);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: flex-start;
}
.bak-kurskarte h2 {
  font-family: var(--font-serif-display);
  font-size: var(--fs-h3);
  margin: 0;
}
.bak-kursclaim { font-size: 0.95rem; color: var(--text-secondary); margin: 0; flex-grow: 1; }
.bak-kurskarte .bak-btn { margin-top: 0.4rem; }

.bak-so h2, .bak-modul-titel, .bak-quizkarte h2 {
  font-family: var(--font-serif-display);
  font-size: var(--fs-h2);
  margin: var(--space-lg, 40px) 0 var(--space-sm, 16px);
}
.bak-basics-verweis { margin-top: var(--space-lg, 40px); color: var(--text-secondary); }

/* ---------- V2.6 P2: Voll-Hub (HUB-01..06) ---------- */
.bak-hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--space-sm, 16px); }
.bak-hero-note { font-family: var(--font-ui); font-weight: 600; color: var(--accent-primary); margin: 0.5rem 0 0; }
.bak-kurs-fertig { font-family: var(--font-ui); font-size: 0.85rem; color: var(--text-secondary); margin: 0.35rem 0 0; }
.bak-kurs-fertig a { color: var(--accent-primary); }
.bak-flow--so { margin-top: var(--space-sm, 16px); }
.bak-flow--so .bak-flow-box { text-align: left; display: flex; flex-direction: column; gap: 0.3rem; align-self: stretch; }
.bak-flow--so .bak-flow-box strong { font-family: var(--font-ui); font-weight: 600; }
.bak-flow--so .bak-flow-box span { font-family: var(--font-ui); font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; }
.bak-newsletter-verweis { margin-top: var(--space-sm, 16px); color: var(--text-secondary); }
/* Site-FAQ-Komponente im Akademie-Layout: buendig zur Inhaltsspalte, ohne Schatten (R-6);
   Spezifitaet 0,2,0 schlaegt die spaeter geladenen Inline-Styles aus beirat-faq.php (0,1,0) */
.bak-wrap .beirat-faq { max-width: var(--content-max-width, 720px); padding-left: 0; padding-right: 0; margin-top: var(--space-lg, 40px); }
.bak-wrap .beirat-faq-item { box-shadow: none; }
html[data-motion="calm"] .bak-wrap .beirat-faq-summary::after { transition: none; }

/* ---------- Kurs-Hub: Module + Lektionskarten ---------- */

.bak-modul-nr {
  font-family: var(--font-ui);
  font-size: var(--fs-micro, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-primary);
  display: block;
  margin-bottom: 0.25rem;
}
.bak-lektionsliste { list-style: none; margin: 0; padding: 0; }
.bak-lektionskarte {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-elevated);
  padding: 0 1rem; /* V2.6 KURS-09: vertikales Padding traegt der Link (Touchziel >= 44px) */
  margin-bottom: 0.5rem;
}
.bak-lek-nr {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-secondary);
  min-width: 1.6rem;
  text-align: right;
}
.bak-lek-link {
  font-family: var(--font-ui);
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  flex-grow: 1;
  padding: 0.85rem 0; /* V2.6 KURS-09: Touchziel >= 44px (27px Padding + Zeilenhoehe) */
}
a.bak-lek-link:hover, a.bak-lek-link:focus { color: var(--accent-primary); text-decoration: underline; }
.bak-lek-link--inaktiv { color: var(--text-secondary); }
.bak-lek-zeit { font-family: var(--font-ui); font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; }
.bak-lek-haken { color: var(--accent-primary); display: inline-flex; width: 1.1rem; justify-content: center; }
/* V2.6 KURS-05: display ueberschreibt [hidden] — Spalte fest reservieren, Inhalt via visibility */
.bak-lek-haken[hidden] { visibility: hidden; }
.bak-lek-haken svg { width: 1.1rem; height: 1.1rem; }

.bak-quizkarte {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-elevated);
  padding: var(--space-md, 24px);
  margin-top: var(--space-lg, 40px);
}
.bak-quizkarte h2 { margin-top: 0; }

/* ---------- Fortschritt: Sticky-Leiste + Ring ---------- */

.bak-progress {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 3px;
  background: var(--border);
  border-radius: 999px;
  margin-bottom: var(--space-md, 24px);
}
/* V2.6 P2 (CHROME-01): kompakte Ablese-Zeile (Position + Prozent) rechtsbuendig unter der
   Leiste, stickt mit; Pill auf --bg-base + 1px-Border, damit sie ueber Inhalt lesbar bleibt.
   overflow:hidden entfaellt dafuer am Container; der Fill ist selbst gerundet (999px). */
.bak-progress-label {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  line-height: 1;
  color: var(--text-secondary);
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  white-space: nowrap;
}
/* V2.6 P2 (CHROME-05): Abstand Pfeil/Titel via gap; die sr-only-Spans sind position:absolute
   und damit keine Flex-Items (kein Doppel-gap) */
.bak-lesson-nav-links .bak-btn { gap: 0.35em; }
.bak-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent-primary);
  border-radius: 999px;
}
.bak-progress-fill.ist-animiert { transition: width 0.4s ease; }

.bak-ring-slot { min-height: 0; }
/* P1/C5 (PERF-01): Server reserviert die Ringhoehe, wenn eingeloggt Fortschritt existiert —
   der deferred JS-Ring faellt dann in reservierten Raum statt Inhalt zu verschieben (CLS) */
.bak-ring-slot--reserviert { min-height: 44px; }
.bak-ring {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.bak-ring svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.bak-ring circle { fill: none; stroke-width: 4; }
.bak-ring .bak-ring-bg { stroke: var(--border); }
.bak-ring .bak-ring-wert { stroke: var(--accent-primary); stroke-linecap: round; }
.bak-ring.ist-animiert .bak-ring-wert { transition: stroke-dashoffset 0.6s ease; }

/* ---------- Lektion: Kopf, Nav ---------- */

.bak-lek-kopf { margin-bottom: var(--space-md, 24px); }
.bak-lek-kopf h1 {
  font-family: var(--font-serif-display);
  font-size: var(--fs-h1);
  line-height: 1.15;
  margin: 0 0 0.4rem;
}
.bak-lek-meta { font-family: var(--font-ui); font-size: 0.85rem; color: var(--text-secondary); }

.bak-lektion { font-size: var(--fs-body); line-height: 1.7; }
.bak-lektion h2 {
  font-family: var(--font-serif-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  margin: var(--space-lg, 40px) 0 var(--space-sm, 16px);
}
.bak-lektion h3 {
  font-family: var(--font-ui);
  font-size: var(--fs-h3);
  font-weight: 700;
  margin: var(--space-md, 24px) 0 var(--space-xs, 8px);
}

.bak-lesson-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm, 16px);
  border-top: 1px solid var(--border);
  margin-top: var(--space-lg, 40px);
  padding-top: var(--space-md, 24px);
}
.bak-lesson-nav-links { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* ---------- Flip-Cards ---------- */

.bak-flipcards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm, 16px);
  margin: var(--space-md, 24px) 0;
}
@media (min-width: 640px) { .bak-flipcards { grid-template-columns: 1fr 1fr; } }
.bak-flipcard {
  position: relative;
  min-height: 170px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  perspective: 900px;
  text-align: left;
  font: inherit;
  color: inherit;
}
.bak-flipcard-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}
.bak-flipcard[aria-pressed="true"] .bak-flipcard-inner { transform: rotateY(180deg); }
.bak-flipcard-front, .bak-flipcard-back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  backface-visibility: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-elevated);
  padding: var(--space-sm, 16px) var(--space-md, 24px);
}
.bak-flipcard-front {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.05rem;
}
.bak-flipcard-front::after {
  content: 'Umdrehen';
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
}
.bak-flipcard-back {
  transform: rotateY(180deg);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  line-height: 1.55;
  border-left: 3px solid var(--gold);
}
.bak-flipcard-back ul { margin: 0; padding-left: 1.1rem; }
/* reduced-motion: Crossfade statt 3D (Spec A9) */
@media (prefers-reduced-motion: reduce) {
  .bak-flipcard-inner { transition: none; transform: none !important; }
  .bak-flipcard-front, .bak-flipcard-back { transition: opacity 0.2s ease; backface-visibility: visible; transform: none; }
  .bak-flipcard .bak-flipcard-back { opacity: 0; pointer-events: none; }
  .bak-flipcard[aria-pressed="true"] .bak-flipcard-back { opacity: 1; pointer-events: auto; }
  .bak-flipcard[aria-pressed="true"] .bak-flipcard-front { opacity: 0; }
}

/* ---------- Accordion (details/summary, Basics-Muster) ---------- */

.bak-accordion { margin: var(--space-md, 24px) 0; }
.bak-accordion details {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-elevated);
  margin-bottom: 0.5rem;
}
.bak-accordion summary {
  font-family: var(--font-ui);
  font-weight: 600;
  padding: 0.85rem 1rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.bak-accordion summary::-webkit-details-marker { display: none; }
.bak-accordion summary::after {
  content: '';
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--accent-primary);
  border-bottom: 2px solid var(--accent-primary);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.bak-accordion details[open] summary::after { transform: rotate(225deg); }
.bak-accordion details > *:not(summary) { padding: 0 1rem; }
.bak-accordion details > *:last-child { padding-bottom: 1rem; }

/* ---------- Tabs ---------- */

.bak-tabs { margin: var(--space-md, 24px) 0; }
.bak-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.bak-tab {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.9rem;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-sm, 4px) var(--radius-sm, 4px) 0 0;
  padding: 0.6rem 1rem;
  cursor: pointer;
}
.bak-tab[aria-selected="true"] {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
}
.bak-tabpanel {
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px);
  background: var(--bg-elevated);
  padding: var(--space-sm, 16px) var(--space-md, 24px);
}

/* ---------- Wissens-Check ---------- */

.bak-check {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-elevated);
  padding: var(--space-sm, 16px) var(--space-md, 24px);
  margin: var(--space-md, 24px) 0;
}
.bak-check-frage { font-family: var(--font-ui); font-weight: 600; margin-top: 0; }
.bak-check-antworten { display: flex; flex-direction: column; gap: 0.5rem; }
.bak-check-antwort {
  font-family: var(--font-ui);
  font-size: 0.92rem;
  text-align: left;
  background: var(--bg-base);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 4px);
  padding: 0.6rem 0.9rem;
  cursor: pointer;
}
.bak-check-antwort:hover:not(:disabled) { border-color: var(--accent-primary); }
.bak-check-antwort.ist-richtig {
  border-color: var(--gold);
  box-shadow: inset 3px 0 0 var(--gold);
  font-weight: 600;
}
.bak-check-antwort.ist-gewaehlt { border-color: var(--accent-soft); }
.bak-check-erklaerung, .bak-check-korrektur {
  font-size: 0.92rem;
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
  padding-top: 0.6rem;
  margin-bottom: 0;
  animation: bak-fade 0.2s ease;
}

/* ---------- Prompt-Vorlage ---------- */

.bak-prompt {
  position: relative;
  margin: var(--space-md, 24px) 0;
}
.bak-prompt pre {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.6;
  background: var(--bg-deep);
  color: var(--text-on-dark, #F5F1EA);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-sm, 16px) var(--space-md, 24px);
  padding-top: 2.4rem;
  overflow-x: auto;
  white-space: pre-wrap;
  margin: 0;
}
.bak-prompt-copy {
  position: absolute;
  top: 0.55rem;
  right: 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  background: transparent;
  color: var(--text-on-dark, #F5F1EA);
  border: 1px solid var(--text-secondary);
  border-radius: var(--radius-sm, 4px);
  padding: 0.25rem 0.7rem;
  cursor: pointer;
}
.bak-prompt-copy:hover, .bak-prompt-copy:focus { border-color: var(--gold); }
.bak-prompt-copy.ist-kopiert { border-color: var(--gold); color: var(--gold); }
.bak-prompt-hinweis { font-family: var(--font-ui); font-size: 0.85rem; color: var(--text-secondary); margin: 0.4rem 0 0; }

/* ---------- Vorher/Nachher-Vergleich ---------- */

.bak-compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm, 16px);
  margin: var(--space-md, 24px) 0;
}
@media (min-width: 640px) { .bak-compare { grid-template-columns: 1fr 1fr; } }
.bak-compare-spalte {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-elevated);
  padding: var(--space-sm, 16px) var(--space-md, 24px);
}
.bak-compare-kopf {
  font-family: var(--font-ui);
  font-size: var(--fs-micro, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
  margin: 0 0 0.5rem;
}
.bak-compare-spalte--stark { border-left: 3px solid var(--gold); }
.bak-compare-spalte--stark .bak-compare-kopf { color: var(--accent-primary); }

/* ---------- Callouts ---------- */

.bak-callout {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-elevated);
  padding: var(--space-sm, 16px) var(--space-md, 24px);
  margin: var(--space-md, 24px) 0;
  font-size: 0.95rem;
}
.bak-callout-titel {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-micro, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 0.4rem;
  color: var(--text-secondary);
}
.bak-callout--merksatz { border-left: 3px solid var(--gold); font-family: var(--font-serif-display); font-size: 1.05rem; }
.bak-callout--merksatz .bak-callout-titel { color: var(--accent-primary); }
.bak-callout--praxis { border-left: 3px solid var(--accent-soft); }
.bak-callout--warnung { border-left: 3px solid var(--warning, currentColor); }
.bak-callout--recht { border-left: 3px solid var(--text-secondary); }

/* ---------- Fachbegriff-Tooltip ---------- */

.bak-term {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted var(--accent-soft);
}
.bak-term-tip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  z-index: 50;
  min-width: 220px;
  max-width: 300px;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.5;
  background: var(--bg-deep);
  color: var(--text-on-dark, #F5F1EA);
  border-radius: var(--radius-sm, 4px);
  padding: 0.5rem 0.75rem;
  animation: bak-fade 0.2s ease;
}

/* ---------- Schrittfolge ---------- */

.bak-steps {
  list-style: none;
  counter-reset: bak-schritt;
  margin: var(--space-md, 24px) 0;
  padding: 0;
}
.bak-steps > li {
  counter-increment: bak-schritt;
  position: relative;
  padding: 0 0 var(--space-md, 24px) 3rem;
}
.bak-steps > li::before {
  content: counter(bak-schritt);
  position: absolute;
  left: 0;
  top: -0.15rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent-primary);
  border: 1px solid var(--accent-primary);
  border-radius: 50%;
  background: var(--bg-base);
}
.bak-steps > li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(1rem - 1px);
  top: 2.1rem;
  bottom: 0.2rem;
  width: 1px;
  background: var(--border);
}

/* ---------- Quiz ---------- */

.bak-quiz { font-family: var(--font-ui); min-height: 16rem; /* QUIZ-05: reserviert auch VOR dem JS-Boot (Panel-min-height greift erst nach Injektion) */ }
.bak-quiz-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-elevated);
  padding: var(--space-md, 24px);
  min-height: 16rem; /* P1/C5 (PERF-03/RAND-08): daempft Panel-Hoehenspruenge Intro/Laden/Frage/Ergebnis */
  animation: bak-fade 0.2s ease;
}
.bak-quiz-regeln { padding-left: 1.2rem; }
.bak-quiz-punkte {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: var(--space-sm, 16px);
}
.bak-quiz-punkt {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--border);
}
.bak-quiz-punkt.ist-aktiv { background: var(--accent-primary); }
.bak-quiz-punkt.ist-beantwortet { background: var(--accent-soft); }
.bak-quiz-frage h2 { font-family: var(--font-ui); font-size: 1.15rem; margin: 0 0 0.35rem; }
.bak-quiz-multi-hinweis { font-size: 0.8rem; color: var(--text-secondary); margin: 0 0 0.75rem; }
.bak-quiz-optionen { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: var(--space-sm, 16px); }
.bak-quiz-option {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  text-align: left;
  background: var(--bg-base);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 4px);
  padding: 0.7rem 1rem;
  cursor: pointer;
}
.bak-quiz-option:hover { border-color: var(--accent-primary); }
.bak-quiz-option[aria-pressed="true"] {
  border-color: var(--accent-primary);
  box-shadow: inset 3px 0 0 var(--accent-primary);
  font-weight: 600;
}
.bak-quiz-score {
  font-family: var(--font-serif-display);
  font-size: var(--fs-h2);
  margin: 0 0 0.5rem;
}
/* QUIZ-01 (V2.6): Ergebnis nach Modul — schlanke Token-Balken (Zahl traegt die Info,
   Balken dekorativ/aria-hidden; ist-voll = Gold als Auszeichnung, R-6) */
.bak-quiz-module { border-top: 1px solid var(--border); margin-top: var(--space-sm, 16px); padding-top: var(--space-sm, 16px); }
.bak-quiz-module h3 { font-family: var(--font-ui); font-size: 1rem; margin: 0 0 0.5rem; }
.bak-quiz-modul {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) minmax(4rem, 11rem) auto;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}
.bak-quiz-modul-name { color: var(--text-primary); }
.bak-quiz-modul-zahl { color: var(--text-secondary); font-variant-numeric: tabular-nums; text-align: right; }
.bak-quiz-balken {
  display: block;
  height: 0.45rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-base);
  overflow: hidden;
}
.bak-quiz-balken-wert { display: block; height: 100%; background: var(--accent-primary); }
.bak-quiz-balken-wert.ist-voll { background: var(--gold); }
.bak-quiz-falsch { border-top: 1px solid var(--border); margin-top: var(--space-sm, 16px); padding-top: var(--space-sm, 16px); }
.bak-quiz-falsch h3 { font-family: var(--font-ui); font-size: 1rem; margin: 0 0 0.5rem; }
.bak-quiz-falsch-item { margin-bottom: var(--space-sm, 16px); font-size: 0.92rem; }
.bak-quiz-falsch-item p { margin: 0.2rem 0; }
.bak-quiz-falsch-item .bak-quiz-erkl { color: var(--text-secondary); }
.bak-quiz-aktionen { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: var(--space-sm, 16px); }
/* QUIZ-02 (V2.6): sichtbarer Disabled-Grund am Weiter-Button; visibility statt display
   haelt die Hoehe reserviert (kein CLS), :not(:disabled) blendet ihn CSS-only aus */
.bak-quiz-weiter-grund {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0.4rem 0 0;
  min-height: 1.3em;
}
.bak-quiz-panel .bak-btn:not(:disabled) + .bak-quiz-weiter-grund { visibility: hidden; }

/* ---------- Zertifikatsformular ---------- */

.bak-cert-form { border-top: 1px solid var(--gold); margin-top: var(--space-md, 24px); padding-top: var(--space-md, 24px); }
.bak-cert-form h3 { font-family: var(--font-serif-display); font-size: var(--fs-h3); margin: 0 0 0.75rem; }
.bak-feld { margin-bottom: var(--space-sm, 16px); }
/* P1/C7 (AUTH-09/DASH-07): Auth-Markup ist label.bak-feld > span — Beschriftung bekommt
   dieselbe Label-Typo; label.bak-feld selbst wird block, damit der Feld-Rhythmus greift
   (Checkbox-Varianten behalten ihr Flex-Layout) */
.bak-feld label, label.bak-feld > span { display: block; font-family: var(--font-ui); font-weight: 600; font-size: 0.9rem; margin-bottom: 0.25rem; }
label.bak-feld:not(.bak-feld--check):not(.bak-feld--consent) { display: block; }
.bak-feld input[type="text"], .bak-feld input[type="email"], .bak-feld input[type="password"] {
  width: 100%;
  min-height: 44px;
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--text-primary);
  background: var(--bg-base);
  /* P1/C7 (A11Y-04): Feldgrenze >= 3:1 (WCAG 1.4.11) — --border lag bei 1.27:1/1.47:1 */
  border: 1px solid var(--text-secondary);
  border-radius: var(--radius-sm, 4px);
  padding: 0.5rem 0.75rem;
}
.bak-feld input:focus { border-color: var(--accent-primary); outline: none; }
/* P1/C7: Feld-bezogene Inline-Fehler (Muster fuer blur-Validierung, Verdrahtung P3) */
.bak-feld input[aria-invalid="true"] { border-color: var(--error); }
.bak-feld-fehler { font-family: var(--font-ui); font-size: 0.85rem; color: var(--error); margin: 0.25rem 0 0; }
.bak-feld-hinweis { font-size: 0.8rem; color: var(--text-secondary); margin: 0.25rem 0 0; }
.bak-feld--consent { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.88rem; }
.bak-feld--consent input { margin-top: 0.25rem; width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
/* Honeypot: fuer Menschen unsichtbar, fuer Bots ein normales Feld */
.bak-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.bak-form-fehler {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--error, inherit);
  border: 1px solid var(--border);
  border-left: 3px solid var(--error, currentColor);
  border-radius: var(--radius-sm, 4px);
  padding: 0.6rem 0.9rem;
  margin-top: 0.75rem;
}
/* P1/C7 (TEAS-05/QUIZ-12/AUTH-15): Fehler IMMER mit Marker koppeln (beirat.css Regel 3,
   Site-Muster .kontakt-status--error) — nie nur Farbe */
.bak-form-fehler:not(:empty)::before { content: "! "; font-weight: 700; }
.bak-form-erfolg h3 { font-family: var(--font-serif-display); margin-top: 0; }

/* ---------- Animationen ---------- */

@keyframes bak-fade { from { opacity: 0; } to { opacity: 1; } }

/* Haken-Draw-on (0.3s, Spec §9) */
.bak-haken-svg path {
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bak-haken-svg.ist-neu path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: bak-haken 0.3s ease forwards;
}
@keyframes bak-haken { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .bak-wrap *, .bak-wrap *::before, .bak-wrap *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Zertifikat: Urkunde (Spec §7) ---------- */

.bak-wrap--zert > * { max-width: 1000px; }

/* Urkunde: A4-Querformat-Blatt, doppelter Goldrahmen, Kompass-Siegel, Gruender-
   Signaturen. Gold nur fuer Rahmen/Siegel/Linien (Regel 2), Text bleibt Ink/Bordeaux. */
.bak-urkunde {
  position: relative;
  aspect-ratio: 297 / 210;               /* wirkt wie ein A4-Blatt (quer) */
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 3.2rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  background:
    radial-gradient(130% 90% at 50% -12%, rgba(181, 144, 78, 0.07) 0%, rgba(181, 144, 78, 0) 58%),
    var(--bg-elevated);
  border: 1.5px solid var(--gold);
  border-radius: 3px;
  box-shadow: 0 22px 60px -30px rgba(34, 26, 28, 0.45);
  overflow: hidden;
}
/* innere Goldlinie -> Doppelrahmen (Border druckt zuverlaessig, anders als box-shadow) */
.bak-urkunde::before {
  content: "";
  position: absolute;
  inset: clamp(7px, 1.1vw, 12px);
  border: 1px solid rgba(181, 144, 78, 0.5);
  border-radius: 2px;
  pointer-events: none;
}
.bak-urkunde-wz {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(58%, 440px);
  transform: translate(-50%, -50%);
  color: var(--gold);
  opacity: 0.05;
  pointer-events: none;
  line-height: 0;
}
.bak-urkunde-wz svg { width: 100%; height: auto; }
.bak-urkunde-ecke {
  position: absolute;
  width: clamp(20px, 2.8vw, 32px);
  height: clamp(20px, 2.8vw, 32px);
  color: var(--gold);
  opacity: 0.85;
  pointer-events: none;
  line-height: 0;
}
.bak-urkunde-ecke svg { width: 100%; height: 100%; }
.bak-urkunde-ecke--tl { top: clamp(14px, 2vw, 22px); left: clamp(14px, 2vw, 22px); }
.bak-urkunde-ecke--tr { top: clamp(14px, 2vw, 22px); right: clamp(14px, 2vw, 22px); transform: scaleX(-1); }
.bak-urkunde-ecke--bl { bottom: clamp(14px, 2vw, 22px); left: clamp(14px, 2vw, 22px); transform: scaleY(-1); }
.bak-urkunde-ecke--br { bottom: clamp(14px, 2vw, 22px); right: clamp(14px, 2vw, 22px); transform: scale(-1, -1); }

.bak-urkunde-inner { position: relative; z-index: 1; width: 100%; max-width: 660px; }

.bak-urkunde-siegel {
  width: clamp(56px, 8vw, 84px);
  height: clamp(56px, 8vw, 84px);
  margin: 0 auto clamp(0.5rem, 1.6vw, 1rem);
  display: grid;
  place-items: center;
  color: var(--gold);
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px var(--bg-elevated), inset 0 0 0 4px rgba(181, 144, 78, 0.42);
}
.bak-urkunde-siegel svg { width: 56%; height: 56%; }
.bak-urkunde-marke {
  font-family: var(--font-serif-display);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.55rem;
}
.bak-urkunde-zeile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  font-family: var(--font-ui);
  font-size: clamp(0.68rem, 1.1vw, 0.78rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--accent-primary);
  margin: 0 0 clamp(0.9rem, 2.4vw, 1.5rem);
}
.bak-urkunde-zeile span { padding-left: 0.32em; }
.bak-urkunde-zeile::before,
.bak-urkunde-zeile::after {
  content: "";
  width: clamp(26px, 6vw, 58px);
  height: 1px;
  background: linear-gradient(90deg, rgba(181, 144, 78, 0) 0%, var(--gold) 100%);
}
.bak-urkunde-zeile::after { transform: scaleX(-1); }
.bak-urkunde-intro,
.bak-urkunde-abschluss {
  font-family: var(--font-ui);
  font-size: clamp(0.82rem, 1.35vw, 0.95rem);
  color: var(--text-secondary);
  margin: 0;
}
.bak-urkunde-abschluss { margin-top: 0.55rem; }
.bak-urkunde-name {
  position: relative;
  display: inline-block;
  font-family: var(--font-serif-display);
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 600;
  line-height: 1.05;
  color: var(--text-primary);
  margin: 0.5rem auto 0;
  padding-bottom: 0.4rem;
}
.bak-urkunde-name::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(181, 144, 78, 0) 0%, var(--gold) 22%, var(--gold) 78%, rgba(181, 144, 78, 0) 100%);
}
.bak-urkunde-kurs {
  font-family: var(--font-serif-display);
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.2;
  color: var(--accent-primary);
  margin: 0.7rem 0 clamp(0.9rem, 2.2vw, 1.4rem);
}
.bak-urkunde-emotion {
  font-family: var(--font-serif-display);
  font-size: clamp(0.98rem, 1.7vw, 1.22rem);
  font-style: italic;
  line-height: 1.4;
  color: var(--text-primary);
  max-width: 34ch;
  margin: 0 auto clamp(0.9rem, 2.2vw, 1.4rem);
}
.bak-urkunde-details {
  font-family: var(--font-ui);
  font-size: clamp(0.74rem, 1.2vw, 0.88rem);
  color: var(--text-secondary);
  margin: 0 0 clamp(1.1rem, 2.8vw, 1.9rem);
}
.bak-urkunde-sign {
  display: flex;
  justify-content: center;
  gap: clamp(2rem, 8vw, 5rem);
  margin: 0 auto clamp(0.7rem, 1.8vw, 1.1rem);
}
.bak-urkunde-sign-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: clamp(120px, 20vw, 180px);
}
.bak-urkunde-sign-name {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}
.bak-urkunde-sign-linie {
  width: 100%;
  height: 1px;
  background: var(--text-secondary);
  opacity: 0.45;
  margin-bottom: 0.35rem;
}
.bak-urkunde-sign-rolle {
  font-family: var(--font-ui);
  font-size: clamp(0.6rem, 1vw, 0.7rem);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
}
.bak-urkunde-fuss {
  font-family: var(--font-mono);
  font-size: clamp(0.62rem, 1vw, 0.72rem);
  color: var(--text-secondary);
  margin: 0;
  letter-spacing: 0.01em;
}
@media (max-width: 640px) {
  .bak-urkunde { aspect-ratio: auto; }
  .bak-urkunde-sign { flex-direction: column; gap: 1.4rem; }
}
/* Aktionen unter der Urkunde: ein ruhiges, gruppiertes Panel statt loser Buttons. */
.bak-zert-aktionen {
  margin-top: var(--space-lg, 32px);
  padding-top: var(--space-md, 24px);
  border-top: 1px solid var(--border);
  text-align: center;
}
.bak-zert-aktionen-titel {
  font-family: var(--font-ui);
  font-size: var(--fs-micro, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  margin: 0 0 var(--space-sm, 16px);
}
.bak-zert-btngruppe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}
/* Zweite Reihe (Link/Post/Drucken) unter der LinkedIn-Reihe, dezenter Abstand. */
.bak-zert-btngruppe + .bak-zert-btngruppe { margin-top: 0.6rem; }
/* Icon + Label buendig; Icon skaliert mit der Schrift, bricht nie um. */
.bak-btn--mit-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.bak-btn--mit-icon svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}
@media (max-width: 500px) {
  .bak-zert-btngruppe { flex-direction: column; }
  .bak-zert-btngruppe .bak-btn { justify-content: center; }
}

/* Print: nur die Urkunde, GARANTIERT EINE Seite. Der «Drucken»-Button (akademie.js)
   klont die Urkunde in einen body-DIREKTEN Container .bak-print-root und setzt
   body.bak-printing. So werden nur GESCHWISTER ausgeblendet (> :not(.bak-print-root)),
   NIE ein Vorfahre der Urkunde — das fruehere display:none auf einem Cinema-/Theme-
   Wrapper blendete die Urkunde mit aus (leere Seite). print-color-adjust:exact erzwingt
   Hintergrund + Gold; feste Farben neutralisieren die Dark-Mode-Tokens (sonst hell-auf-hell). */
.bak-print-root { display: none; }
@media print {
  @page { size: A4 landscape; margin: 12mm; }
  /* Weisses Papier erzwingen: die theme-abhaengige body-Hintergrundfarbe UND der
     Cinema-Kosmos (body::before, position:fixed, cinema.css) wuerden sonst hinter der
     Urkunde mitdrucken (Charles: «Website-Hintergrund, nicht nur das Zertifikat»). Die
     Urkunde bleibt bewusst immer hell (Papier), unabhaengig vom Bildschirm-Theme. */
  html, body.bak-printing {
    background: #ffffff !important;
    background-image: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html::before, html::after,
  body.bak-printing::before, body.bak-printing::after {
    display: none !important;
    background: none !important;
    content: none !important;
  }
  body.bak-printing > *:not(.bak-print-root) { display: none !important; }
  body.bak-printing .bak-print-root {
    display: block !important;
    background: #ffffff !important;
    /* Licht-Tokens im Druck erzwingen -> die ganze Urkunde-Teilbaum rendert hell,
       egal welches Bildschirm-Theme aktiv ist (keine Einzelfarb-Overrides noetig). */
    --bg-elevated: #FAF8F4;
    --text-primary: #221A1C;
    --text-secondary: #5E544E;
    --accent-primary: #7A2A38;
    --gold: #B5904E;
    --border: #E5DDD3;
  }
  body.bak-printing .bak-urkunde {
    width: 100% !important;
    height: 178mm !important;            /* fuellt A4 quer (12mm-Rand) auf EINER Seite */
    aspect-ratio: auto !important;
    margin: 0 !important;
    box-shadow: none !important;         /* Schatten drucken nicht; Rahmen ist Border */
    background: #FAF8F4 !important;
    -webkit-print-color-adjust: exact;   /* erbt an Kinder: Gold-Rahmen, Siegel, Linien */
    print-color-adjust: exact;
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 500px) {
  .bak-wrap { padding: 1.5rem 16px 3rem; }
  .bak-lesson-nav { flex-direction: column; align-items: stretch; }
  .bak-lesson-nav .bak-btn { text-align: center; }
  .bak-quiz-aktionen { flex-direction: column; }
  .bak-quiz-aktionen .bak-btn { text-align: center; }
  /* QUIZ-01: Modul-Name in die eigene Zeile, Balken + Zahl darunter */
  .bak-quiz-modul { grid-template-columns: 1fr auto; }
  .bak-quiz-modul-name { grid-column: 1 / -1; margin-bottom: 0.1rem; }
}

/* ---------- Konto / Auth (SCHOOL-V2 §7, Phase P1) ---------- */
.bak-konto { max-width: 32rem; margin: 0 auto var(--space-md, 24px); }
.bak-konto--resend { border-top: 1px solid var(--border); margin-top: var(--space-md, 24px); padding-top: var(--space-md, 24px); }
.bak-tab-nav { display: flex; gap: 0.4rem; border-bottom: 1px solid var(--border); margin-bottom: var(--space-sm, 16px); }
.bak-tab-btn {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.9rem;
  background: transparent;
  color: var(--text-secondary);
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0.6rem 1rem;
  min-height: 44px;
  cursor: pointer;
}
.bak-tab-btn:hover:not([aria-selected="true"]) { color: var(--accent-primary); } /* P1/C6 */
/* V2.6 P3 (AUTH-06): Zustand aus aria-selected (initTabs) statt is-aktiv */
.bak-tab-btn[aria-selected="true"] { color: var(--accent-primary); border-bottom-color: var(--accent-primary); }
.bak-feld--check { display: flex; gap: 0.5rem; align-items: center; font-size: 0.9rem; font-weight: 400; }
.bak-feld--check input { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
.bak-form-erfolg {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-primary);
  border-radius: var(--radius-sm, 4px);
  padding: 0.6rem 0.9rem;
  margin: 0.75rem 0;
}
.bak-form-hinweis {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 4px);
  padding: 0.6rem 0.9rem;
  margin: 0 0 var(--space-sm, 16px);
}
.bak-form-msg { font-size: 0.9rem; margin: 0.6rem 0 0; min-height: 1.35em; /* P1/C5: reservierte Zeile gegen Feedback-Sprung */ }
/* V2.6 P3 (AUTH-03): Passwort-Sichtbarkeits-Toggle im Feld (44px, reine Darstellung) */
.bak-pw-wrap { position: relative; display: block; }
.bak-feld .bak-pw-wrap input { padding-right: 6rem; }
.bak-pw-toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.75rem;
  border: 0;
  background: transparent;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--accent-primary);
  cursor: pointer;
}
.bak-pw-toggle:hover { text-decoration: underline; }

/* ---------- Lernziel-Zeile (CL1-Übergabe, §11.2) ---------- */
.bak-lernziel {
  font-family: var(--font-ui);
  font-size: 1rem;
  background: var(--bg-elevated);
  border-left: 3px solid var(--accent-primary);
  border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
  padding: 0.7rem 1rem;
  margin: 0 0 var(--space-md, 24px);
}
.bak-lernziel strong { color: var(--accent-primary); }

/* ---------- Dashboard (SCHOOL-V2 §8, Blöcke 1-5 komplett ab P4) ---------- */
.bak-dash-block { margin: 0 0 var(--space-lg, 40px); }
.bak-dash-block > h2 {
  font-family: var(--font-serif-display);
  font-size: var(--fs-h3);
  margin: 0 0 var(--space-sm, 16px);
}
.bak-dash-karte {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-elevated);
  padding: var(--space-sm, 16px) var(--space-md, 24px);
}
.bak-dash-karte h3 { font-family: var(--font-serif-display); font-size: 1.15rem; margin: 0.3rem 0 0.5rem; }
.bak-dash-weiter-karte { border-left: 3px solid var(--accent-primary); }
.bak-dash-kurslabel { font-family: var(--font-ui); font-size: 0.8rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin: 0; }
.bak-dash-meta { font-family: var(--font-ui); font-size: 0.85rem; color: var(--text-secondary); margin: 0.5rem 0; }
.bak-dash-kursgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm, 16px); }
.bak-dash-bar { height: 8px; background: var(--bg-base); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin: 0.6rem 0; }
.bak-dash-bar-fill { display: block; height: 100%; background: var(--accent-primary); border-radius: 999px; }
.bak-dash-zertliste { list-style: none; margin: 0; padding: 0; }
.bak-dash-zertliste li { display: flex; gap: 0.75rem; align-items: baseline; padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.bak-dash-abmelden { margin-top: var(--space-md, 24px); }

@media (max-width: 700px) {
  .bak-dash-kursgrid { grid-template-columns: 1fr; }
}

/* Block 3: Rang + XP (§8) */
.bak-rang-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.4rem; }
.bak-rang-name { font-family: var(--font-serif-display); font-size: 1.3rem; }
.bak-rang-xp { font-family: var(--font-ui); font-weight: 700; color: var(--accent-primary); }
.bak-dash-rang .bak-dash-bar { margin: 0.4rem 0 0.5rem; }

/* Block 4: Badges (§9.3) */
.bak-badgegrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm, 16px); }
.bak-badge-kachel {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-elevated);
  padding: var(--space-sm, 16px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.bak-badge-icon { line-height: 0; }
.bak-badge-kachel.ist-erreicht { border-color: var(--gold); }
.bak-badge-kachel.ist-erreicht .bak-badge-icon { color: var(--gold); }
.bak-badge-kachel.ist-gesperrt { border-style: dashed; }
.bak-badge-kachel.ist-gesperrt .bak-badge-name { color: var(--text-secondary); }
.bak-badge-kachel.ist-gesperrt .bak-badge-icon { color: var(--text-secondary); }
.bak-badge-name { font-family: var(--font-ui); font-weight: 600; font-size: 0.95rem; }
.bak-badge-status { font-family: var(--font-ui); font-size: 0.78rem; color: var(--accent-primary); }
.bak-badge-hinweis { font-family: var(--font-ui); font-size: 0.78rem; color: var(--text-secondary); line-height: 1.4; }
@media (max-width: 700px) { .bak-badgegrid { grid-template-columns: 1fr 1fr; } }

/* ---------- Momente (§9.4): dezentes Overlay + XP-Chip ---------- */
.bak-moment {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(12px);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  max-width: min(92vw, 420px);
}
.bak-moment.ist-sichtbar { opacity: 1; transform: translateX(-50%) translateY(0); }
.bak-moment-box {
  background: var(--bg-deep);
  color: var(--text-on-dark, #F5F1EA);
  border: 1px solid var(--gold);
  border-radius: var(--radius-md, 8px);
  padding: 1rem 1.25rem;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.bak-moment-titel { font-family: var(--font-serif-display); font-size: 1.1rem; margin: 0; color: var(--gold); }
.bak-moment-text { font-family: var(--font-ui); font-size: 0.9rem; margin: 0; color: var(--text-on-dark, #F5F1EA); }
.bak-moment-zu { align-self: flex-start; margin-top: 0.4rem; }
.bak-moment .bak-btn--ghost { color: var(--gold); border-color: var(--gold); }
.bak-moment .bak-btn--ghost:hover, .bak-moment .bak-btn--ghost:focus { background: var(--gold); color: var(--bg-deep); }

.bak-btn--done.ist-fertig { position: relative; }
.bak-xp-chip {
  position: absolute;
  left: 50%;
  top: -1.4rem;
  transform: translateX(-50%);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold);
  background: var(--bg-deep);
  border: 1px solid var(--gold);
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
  animation: bak-xp-float 0.8s ease-out forwards;
}
@keyframes bak-xp-float {
  0% { opacity: 0; transform: translateX(-50%) translateY(6px); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
  .bak-moment { transition: none; transform: translateX(-50%); }
  .bak-moment.ist-sichtbar { transform: translateX(-50%); }
  .bak-xp-chip { animation: none; opacity: 1; }
}

/* ---------- Rätsel-Engines (Spec §10, P5: bak-orbit + bak-sequenz) ---------- */
.bak-puzzle { margin: var(--space-md, 24px) 0; }
.bak-puzzle-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-elevated);
  padding: var(--space-md, 24px);
  min-height: 13rem; /* P1/C5 (PUZ-09): daempft Zustandswechsel-Spruenge Intro/Laden/Spielflaeche */
}
.bak-puzzle-kicker { font-family: var(--font-ui); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-primary); margin: 0 0 0.5rem; }
.bak-puzzle-intro { font-family: var(--font-ui); color: var(--text-secondary); margin: 0 0 1rem; }
.bak-puzzle-titel { font-family: var(--font-serif-display); font-size: 1.2rem; margin: 0 0 0.4rem; }
.bak-puzzle-auftrag { font-family: var(--font-ui); color: var(--text-secondary); margin: 0 0 1rem; }
.bak-puzzle-status { font-family: var(--font-ui); font-size: 0.85rem; color: var(--text-secondary); margin: 0.8rem 0; }

/* orbit (Zuordnung) */
.bak-orbit { display: flex; flex-direction: column; gap: var(--space-sm, 16px); }
.bak-orbit-pool {
  list-style: none; margin: 0; padding: 0.6rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem; min-height: 2.6rem;
  border: 1px dashed var(--border); border-radius: var(--radius-sm, 4px); background: var(--bg-base);
}
.bak-orbit-el {
  font-family: var(--font-ui); font-size: 0.9rem; text-align: left;
  min-height: 44px; /* P1/C1 (PUZ-01): Touchziel R-8 */
  padding: 0.5rem 0.75rem; border: 1px solid var(--accent-primary); border-radius: var(--radius-sm, 4px);
  background: var(--bg-elevated); color: var(--text-primary); cursor: grab;
  transition: border-color 0.2s, background 0.2s, color 0.2s; /* P1/C6 (PUZ-04) */
}
.bak-orbit-el:hover:not(.ist-gewaehlt) { background: var(--bg-base); }
.bak-orbit-el.ist-gewaehlt { background: var(--accent-primary); color: var(--bg-base); }
.bak-orbit-bahnen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; }
.bak-orbit-bahnen.hat-auswahl .bak-orbit-ziel { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.bak-orbit-bahn { border: 1px solid var(--border); border-radius: var(--radius-sm, 4px); background: var(--bg-base); display: flex; flex-direction: column; }
.bak-orbit-bahn.ist-ueber { border-color: var(--gold); }
.bak-orbit-ziel {
  font-family: var(--font-ui); font-weight: 600; text-align: center; width: 100%;
  min-height: 44px; /* P1/C1 (PUZ-01): Touchziel R-8 */
  padding: 0.55rem 0.5rem; border: none; border-bottom: 1px solid var(--border);
  background: transparent; color: var(--text-primary); cursor: pointer;
  transition: color 0.2s, background 0.2s; /* P1/C6 (PUZ-04) */
}
.bak-orbit-ziel:hover { color: var(--accent-primary); }
.bak-orbit-bahn-liste { list-style: none; margin: 0; padding: 0.4rem; display: flex; flex-direction: column; gap: 0.35rem; min-height: 1rem; }
.bak-orbit-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%;
  text-align: left; font-family: var(--font-ui); font-size: 0.85rem;
  min-height: 44px; /* P1/C1 (PUZ-01/A11Y-07): Touchziel R-8 */
  padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm, 4px);
  background: var(--bg-elevated); color: var(--text-primary); cursor: pointer;
  transition: border-color 0.2s; /* P1/C6 (PUZ-04) */
}
.bak-orbit-chip:hover { border-color: var(--accent-primary); }
.bak-orbit-chip-weg { color: var(--text-secondary); font-weight: 700; flex: 0 0 auto; }

/* sequenz (Reihenfolge) */
.bak-seq { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.bak-seq-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm, 4px);
  background: var(--bg-elevated); cursor: grab;
}
.bak-seq-item.ist-ueber { border-color: var(--gold); }
.bak-seq-nr { font-family: var(--font-ui); font-weight: 700; color: var(--accent-primary); min-width: 1.5rem; text-align: center; }
.bak-seq-text { flex: 1; font-family: var(--font-ui); font-size: 0.9rem; }
.bak-seq-ctrl { display: flex; gap: 0.25rem; flex: 0 0 auto; }
.bak-seq-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; /* P1/C1 (PUZ-01/A11Y-07): 44px-Touchziel statt 32px */
  border: 1px solid var(--border); border-radius: var(--radius-sm, 4px);
  background: var(--bg-base); color: var(--accent-primary); cursor: pointer;
  transition: border-color 0.2s, background 0.2s; /* P1/C6 (PUZ-04) */
}
.bak-seq-btn:hover:not(:disabled) { border-color: var(--accent-primary); background: var(--bg-elevated); }
.bak-seq-btn:disabled { opacity: 0.35; cursor: default; }

/* Feedback, V2.6 P2 (PUZ-03): kanonisiert auf die V2.5-Semantik richtig=Bordeaux,
   falsch=Gold (wie .bak-fb--ok/--nein und .bak-int-btn.ist-richtig/.ist-falsch derselben
   Lektionsseite). Die fruehere V2-Wahl (richtig=Gold) war bewusst, wird aber gedreht:
   die V2.5-Komponenten sind auf der Seite in der Ueberzahl. Icon bleibt Zweitcodierung. */
.bak-puzzle-ergebnis { font-family: var(--font-serif-display); font-size: 1.15rem; margin: 0 0 0.5rem; }
.bak-puzzle-feedback { list-style: none; margin: 0.75rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.bak-puzzle-fb {
  display: flex; gap: 0.6rem; padding: 0.6rem 0.75rem;
  border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius-sm, 4px); background: var(--bg-base);
}
.bak-puzzle-fb.ist-richtig { border-left-color: var(--accent-primary); }
.bak-puzzle-fb.ist-falsch { border-left-color: var(--gold); }
.bak-puzzle-fb-mark { flex: 0 0 auto; line-height: 0; margin-top: 0.15rem; }
.bak-puzzle-fb.ist-richtig .bak-puzzle-fb-mark { color: var(--accent-primary); }
.bak-puzzle-fb.ist-falsch .bak-puzzle-fb-mark { color: var(--gold); }
.bak-puzzle-fb-text { display: flex; flex-direction: column; gap: 0.15rem; }
.bak-puzzle-fb-el { font-family: var(--font-ui); font-weight: 600; font-size: 0.9rem; }
.bak-puzzle-fb-erkl { font-family: var(--font-ui); font-size: 0.85rem; color: var(--text-secondary); }

@media (max-width: 600px) {
  .bak-orbit-bahnen { grid-template-columns: 1fr; }
  .bak-orbit-el, .bak-seq-text { font-size: 0.88rem; }
}

/* V2.6 P2 (PUZ-02/PUZ-10): XP-Pille (Klasse war CSS-los, wirkt auch im Quiz),
   Abschlusskarte im Panel, Einblenden nur bei echten Panelwechseln. */
.bak-quiz-xp {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold);
  background: var(--bg-deep);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 0.15rem 0.65rem;
  margin: 0.35rem 0 0;
}
.bak-puzzle-karte { margin-top: 0; }
.bak-puzzle-panel.bak-fade-ein { animation: bak-fade 0.2s ease; }
html[data-motion="calm"] .bak-puzzle-panel.bak-fade-ein { animation: none; }

/* Content-Tabellen in Lektionen auf Phones scrollbar (P5-Übergabe CL3/CL4: rohe <table>) */
@media (max-width: 640px) {
  .bak-lektion table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
}

/* ---------- Coming-Soon-Teaser (§14.5, P6) ---------- */
.bak-teaser-kostenlos {
  font-family: var(--font-ui); font-weight: 600; color: var(--accent-primary);
  margin: 0.5rem 0 0;
}
/* V2.6 P5 (TEAS-06): Daempfung via Token statt Karten-Opacity — 0.85 drueckte
   Sekundaertext unter AA 4.5:1; Titel gedaempft, Claim/Module behalten volle Deckkraft. */
.bak-kurskarte--gesperrt { cursor: default; border-style: dashed; }
.bak-kurskarte--gesperrt h2 { color: var(--text-secondary); }
.bak-kurskarte--gesperrt .bak-badge--bald { align-self: flex-start; }
.bak-teaser-module {
  list-style: none; margin: 0.4rem 0 0; padding: 0;
  font-family: var(--font-ui); font-size: 0.85rem; color: var(--text-secondary);
  display: flex; flex-direction: column; gap: 0.2rem;
}
.bak-teaser-module li { padding-left: 0.9rem; position: relative; }
.bak-teaser-module li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
.bak-teaser-notify {
  border: 1px solid var(--border); border-radius: var(--radius-md, 8px);
  background: var(--bg-elevated); padding: var(--space-md, 24px); margin: var(--space-lg, 40px) 0;
}
.bak-teaser-notify h2 { font-family: var(--font-serif-display); font-size: var(--fs-h3); margin: 0 0 0.4rem; }
.bak-teaser-form { margin-top: var(--space-sm, 16px); max-width: 440px; display: flex; flex-direction: column; gap: 0.75rem; }
.bak-teaser-form .bak-btn { align-self: flex-start; }

/* ---------- Kontolöschung (§13.2, P7) ---------- */
.bak-btn--danger { background: transparent; color: var(--accent-primary); border-color: var(--accent-primary); }
.bak-btn--danger:hover, .bak-btn--danger:focus { background: var(--accent-primary); color: var(--bg-base); }
.bak-konto-loeschen summary { font-family: var(--font-ui); font-weight: 600; cursor: pointer; color: var(--accent-primary); }
.bak-konto-loeschen[open] summary { margin-bottom: 0.6rem; }
.bak-konto-loeschen form { max-width: 420px; display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.6rem; }
.bak-konto-loeschen .bak-btn--danger { align-self: flex-start; }

/* ============================================================
   V2.5 Interaktions-Komponenten (AKAD-INT P1)
   12 formative Komponenten: kein Server-Call, kein XP (R-10).
   Feedback-Basisklassen .bak-fb*, Panel-Muster geteilt von
   hotspot/zeitachse/schaetzen. Mobile-Queries + reduced-motion
   lokal am Sektionsende (Muster-0-sicher: Basis vor Query).
   ============================================================ */

/* ---------- Gemeinsames: Feedback, No-JS, Komponenten-Karte ---------- */
.bak-int {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-elevated);
  padding: var(--space-md, 24px);
  margin: var(--space-md, 24px) 0;
}
.bak-int-titel {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-body);
  margin: 0 0 var(--space-sm, 16px);
}
.bak-int-kicker {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-primary);
  margin: 0 0 0.35rem;
}
.bak-fb { margin-top: var(--space-sm, 16px); padding: 0.6rem 0.85rem; border-left: 2px solid var(--border); font-size: 0.95em; }
.bak-fb--ok { border-left-color: var(--accent-primary); }
.bak-fb--nein { border-left-color: var(--gold); }
.bak-int noscript p { color: var(--text-secondary); font-size: var(--fs-micro); margin: 0.5rem 0 0; }
.bak-int-btn {
  font-family: var(--font-ui);
  font-size: 0.95em;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-base);
  color: var(--text-primary);
  padding: 0.55rem 0.9rem;
  min-height: 44px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.bak-int-btn:hover { border-color: var(--accent-primary); }
.bak-int-btn[aria-pressed="true"], .bak-int-btn.ist-gewaehlt {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  /* P1/C8 (A11Y-02): bg-base statt text-on-dark — im Dark-Remap (accent #CE8B99) sonst 2.20:1;
     mit bg-base: dark 6.86:1, light 8.93:1 (AA) */
  color: var(--bg-base);
}
.bak-int-btn[disabled] { opacity: 0.55; cursor: default; }
.bak-int-btn.ist-richtig { border-color: var(--accent-primary); box-shadow: none; }
.bak-int-btn.ist-falsch { border-color: var(--gold); }

/* ---------- bak-flow (Muster 1: HTML-Boxen, CSS-only) ---------- */
.bak-flow-wrap { margin: var(--space-md, 24px) 0; }
.bak-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
}
.bak-flow-box {
  flex: 1 1 0;
  min-width: 8.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-elevated);
  padding: 0.7rem 0.85rem;
  font-family: var(--font-ui);
  font-size: 0.95em;
  text-align: center;
  align-self: center;
}
.bak-flow-box--akzent { border-color: var(--accent-primary); }
.bak-flow-conn { align-self: center; color: var(--text-secondary); font-family: var(--font-ui); }
.bak-flow-conn::before { content: "\2192"; }

/* ---------- bak-entscheid + bak-szenario (Verzweigungs-Engine) ---------- */
.bak-ent-knoten { margin: 0; }
.bak-ent-frage { font-weight: 600; margin: 0 0 var(--space-sm, 16px); }
.bak-ent-optionen { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.bak-ent-optionen li { margin: 0; }
.bak-ent-ergebnis {
  border-left: 2px solid var(--gold);
  padding: 0.6rem 0.85rem;
  margin-top: var(--space-sm, 16px);
}
.bak-ent-fuss { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: var(--space-sm, 16px); }
.bak-ent-pfad { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; list-style: none; margin: 0; padding: 0; font-size: var(--fs-micro); color: var(--text-secondary); }
.bak-ent-pfad li {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-family: var(--font-ui);
}
/* Ohne JS: alle Knoten sichtbar untereinander, Nummern-Labels zeigen die Struktur. */
.bak-entscheid:not(.ist-js) .bak-ent-knoten + .bak-ent-knoten,
.bak-szenario:not(.ist-js) .bak-ent-knoten + .bak-ent-knoten { border-top: 1px solid var(--border); margin-top: var(--space-sm, 16px); padding-top: var(--space-sm, 16px); }
.bak-sz-marke {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  color: var(--text-secondary);
  margin-left: 0.5rem;
  vertical-align: middle;
}
.bak-sz-debrief { border-left: 2px solid var(--gold); padding: 0.6rem 0.85rem; margin-top: var(--space-sm, 16px); }

/* ---------- bak-zuordnen (Tap-Tap + Drag) ---------- */
.bak-zu-pool { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0 0 var(--space-sm, 16px); padding: 0; }
.bak-zu-pool li { margin: 0; }
.bak-zu-ziele { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-sm, 16px); }
.bak-zu-kat {
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm, 4px);
  padding: 0.7rem 0.85rem;
  min-height: 5.5rem;
}
.bak-zu-kat.ist-ziel { border-color: var(--accent-primary); border-style: solid; }
.bak-zu-kat h4 { font-family: var(--font-ui); font-size: 0.95em; margin: 0 0 0.5rem; }
.bak-zu-kat ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.bak-zu-kat ul li { display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.95em; }
.bak-zu-status { font-size: var(--fs-micro); color: var(--text-secondary); margin-top: var(--space-sm, 16px); min-height: 1.2em; }

/* ---------- bak-schaetzen / bak-hotspot / bak-zeitachse (Panel-Muster) ---------- */
.bak-sch-optionen, .bak-hs-punkte { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0 0 var(--space-sm, 16px); padding: 0; }
.bak-sch-optionen li, .bak-hs-punkte li { margin: 0; }
.bak-panel { border-top: 1px solid var(--border); padding-top: var(--space-sm, 16px); margin-top: var(--space-sm, 16px); }
.bak-panel[hidden] { display: none; }
.bak-hs-flaeche { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 var(--space-sm, 16px); }
.bak-hs-flaeche .bak-int-btn { flex: 1 1 0; min-width: 6.5rem; }
.bak-zeitachse { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0 0 var(--space-sm, 16px); padding: 0; counter-reset: bak-za; }
.bak-zeitachse > li { margin: 0; flex: 1 1 0; min-width: 8rem; display: flex; align-items: center; gap: 0.5rem; }
.bak-zeitachse > li + li::before { content: "\2192"; color: var(--text-secondary); font-family: var(--font-ui); }
.bak-zeitachse .bak-int-btn { flex: 1 1 auto; width: 100%; }
.bak-za-stand { font-size: var(--fs-micro); color: var(--text-secondary); margin-top: var(--space-sm, 16px); }

/* ---------- bak-luecke (Auswahl-Chips) ---------- */
.bak-lu-satz { font-size: 1.05em; line-height: 1.7; }
.bak-lu-slot {
  display: inline-block;
  min-width: 6.5rem;
  border-bottom: 2px solid var(--accent-primary);
  text-align: center;
  font-family: var(--font-ui);
  font-weight: 600;
  padding: 0 0.3rem;
}
.bak-lu-slot.ist-gefuellt { border-bottom-color: var(--border); }
.bak-lu-gruppe { margin-top: var(--space-sm, 16px); }
.bak-lu-gruppe > span { display: block; font-size: var(--fs-micro); color: var(--text-secondary); margin: 0 0 0.35rem; font-family: var(--font-ui); }
.bak-lu-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.bak-lu-chips li { margin: 0; }

/* ---------- bak-sortier-tabelle (progressives Enhancement, Muster 2) ---------- */
.bak-sortier-tabelle table { width: 100%; }
.bak-st-sort {
  all: inherit;
  display: inline;
  cursor: pointer;
  padding: 0;
  margin: 0;
}
.bak-sortier-tabelle th[aria-sort] .bak-st-sort::after { content: "\2195"; margin-left: 0.3rem; color: var(--text-secondary); }
.bak-sortier-tabelle th[aria-sort="ascending"] .bak-st-sort::after { content: "\2191"; color: var(--accent-primary); }
.bak-sortier-tabelle th[aria-sort="descending"] .bak-st-sort::after { content: "\2193"; color: var(--accent-primary); }
.bak-st-hinweis { font-size: var(--fs-micro); color: var(--text-secondary); margin: 0.35rem 0 0; }

/* ---------- bak-praxis-mission ---------- */
.bak-praxis-mission { border-color: var(--accent-primary); }
.bak-pm-kriterium { color: var(--text-secondary); font-size: 0.95em; margin: var(--space-sm, 16px) 0 0; }
.bak-pm-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: var(--space-sm, 16px); }
.bak-pm-status { font-family: var(--font-ui); font-size: 0.95em; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 0.35rem; }
.bak-pm-status .bak-haken-svg { stroke: var(--accent-primary); fill: none; stroke-width: 2.5; }

/* ---------- bak-checkliste (kopier-/druckbar) ---------- */
.bak-checkliste ul { list-style: none; margin: 0; padding: 0; }
.bak-checkliste ul li { position: relative; padding-left: 1.9rem; margin: 0.55rem 0; }
.bak-checkliste ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 0.95em;
  height: 0.95em;
  border: 1px solid var(--accent-primary);
  border-radius: 2px;
}
.bak-cl-aktionen { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-sm, 16px); }

/* ---------- V2.5: Mobile (Basis oben, Query danach = Muster-0-sicher) ---------- */
@media (max-width: 640px) {
  div.bak-flow { flex-direction: column; align-items: stretch; }
  div.bak-flow .bak-flow-conn { align-self: center; }
  div.bak-flow .bak-flow-conn::before { content: "\2193"; }
  ol.bak-zeitachse { flex-direction: column; }
  ol.bak-zeitachse > li + li::before { content: "\2193"; }
  .bak-zu-ziele { grid-template-columns: 1fr; }
}

/* ---------- V2.5: Motion (calm = keine Zusatzanimation, R-8) ---------- */
.bak-panel, .bak-fb { transition: opacity 0.2s; }
html[data-motion="calm"] .bak-int *, html[data-motion="calm"] .bak-panel, html[data-motion="calm"] .bak-fb { transition: none; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .bak-int *, .bak-panel, .bak-fb { transition: none !important; animation: none !important; }
}

/* ---------- V2.5: Druck (nur Checkliste als Insel, Muster Urkunde) ---------- */
@media print {
  body.bak-printing-cl > *:not(.bak-print-root) { display: none !important; }
  .bak-print-root .bak-cl-aktionen, .bak-print-root noscript { display: none; }
}

/* ---------- V2.5 P6: Engagement (§9 — Rang im Hub, Konstellation, Teaser, Modulkarte) ---------- */
.bak-hub-rang {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  margin-top: var(--space-sm, 16px);
  max-width: 26rem;
}
.bak-hub-rang .bak-dash-bar { flex: 1 1 100%; }
.bak-hub-rang-hinweis { color: var(--text-secondary); font-size: var(--fs-micro); margin-top: var(--space-sm, 16px); }

.bak-konstellation {
  margin: var(--space-md, 24px) 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-elevated);
  padding: var(--space-sm, 16px) var(--space-md, 24px);
}
.bak-konst-titel {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  color: var(--text-secondary);
  margin: 0 0 0.5rem;
}
.bak-konstellation svg { display: block; width: 100%; height: auto; }
.bak-konst-linie { stroke: var(--border); stroke-width: 1; }
.bak-konst-linie.ist-aktiv { stroke: var(--gold); }
.bak-konst-stern path {
  fill: none;
  stroke: var(--border);
  stroke-width: 1.5;
  transition: fill 0.3s, stroke 0.3s;
}
.bak-konst-stern.ist-teil path { fill: var(--gold); fill-opacity: 0.35; stroke: var(--gold); }
.bak-konst-stern.ist-voll path { fill: var(--gold); fill-opacity: 1; stroke: var(--gold); }

.bak-next-teaser {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-elevated);
  padding: var(--space-sm, 16px) var(--space-md, 24px);
  margin: var(--space-md, 24px) 0 0;
}
.bak-next-titel { font-family: var(--font-ui); font-weight: 600; margin: 0 0 0.2rem; }
.bak-next-titel a { text-decoration: none; }
.bak-next-titel a:hover { text-decoration: underline; }

.bak-modul-karte {
  border: 1px solid var(--gold);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-elevated);
  padding: var(--space-md, 24px);
  margin: var(--space-md, 24px) 0 0;
  text-align: center;
  opacity: 1;
}
.bak-modul-karte.ist-sichtbar { animation: bak-fade 0.3s ease-out; }
.bak-modul-karte-haken .bak-haken-svg { width: 36px; height: 36px; stroke: var(--gold); fill: none; stroke-width: 2.5; }
.bak-modul-karte-titel {
  font-family: var(--font-serif-display);
  font-size: var(--fs-h3);
  margin: 0.35rem 0 0.2rem;
}

/* Motion-Dial: calm = keinerlei Zusatzanimation (§9/R-8). */
html[data-motion="calm"] .bak-konst-stern path,
html[data-motion="calm"] .bak-konst-linie { transition: none; }
html[data-motion="calm"] .bak-modul-karte.ist-sichtbar { animation: none; }
html[data-motion="calm"] .bak-xp-chip { animation: none; transition: none; }
html[data-motion="calm"] .bak-quiz-panel { animation: none; } /* QUIZ-11: Panel-Fade folgt dem Dial */
@media (prefers-reduced-motion: reduce) {
  .bak-konst-stern path, .bak-konst-linie { transition: none !important; }
  .bak-modul-karte.ist-sichtbar { animation: none !important; }
}

/* ---------- V2.6 P1: Zustands-/Feedback-Fundament (AKAD-DESIGN, C1-C8) ---------- */
/* Screenreader-only (zentrale Ansage-Region, JS bakAnsage) */
.bak-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Loading-Zwischenzustand (BASE-02): bak-quiz-laedt wird von JS bereits gesetzt,
   hatte aber nie eine Regel; .bak-laedt = generisches Utility */
.bak-quiz-laedt, .bak-laedt {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin: 0;
  padding: 0.4rem 0;
  min-height: 2rem;
}
/* Hover-Vervollstaendigung Lektions-Tabs + Sortier-Buttons (C6) */
.bak-tab:hover:not([aria-selected="true"]) { color: var(--accent-primary); }
.bak-st-sort:hover { color: var(--accent-primary); }
/* Leerzustand-Utility (Messlatte 5.1): gestalteter Leerzustand mit naechstem Schritt.
   Duktus = .bak-inarbeit (dashed 1px); P2/P3 nutzen sie fuer Dashboard/Zertifikate. */
.bak-leer {
  border: 1px dashed var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-elevated);
  padding: var(--space-md, 24px);
  font-family: var(--font-ui);
}
.bak-leer p { margin: 0 0 0.75rem; color: var(--text-secondary); }
.bak-leer p:last-child { margin-bottom: 0; }

/* ---------- V2.6 P2: Kurs-Hub (AKAD-DESIGN, KURS-01..09) ---------- */
/* Start-/Resume-CTA im Hero: server-gerendert, JS stellt nur Text/Ziel um (kein CLS) */
.bak-resume-cta { min-height: 44px; margin: var(--space-sm, 16px) 0 0; }
/* Naechste Lektion: ruhige Bordeaux-Haarlinie + betonte Nummer (KURS-03) */
.bak-lektionskarte.ist-aktuell { border-color: var(--accent-primary); }
.bak-lektionskarte.ist-aktuell .bak-lek-nr { color: var(--accent-primary); font-weight: 600; }
/* Gesperrt (Ausgeloggte): gedaempfter Titel + Schloss; Link bleibt bedienbar, fuehrt zum Gate (KURS-04) */
.bak-lektionskarte--gesperrt .bak-lek-link { color: var(--text-secondary); }
.bak-lek-schloss { display: inline-flex; align-items: center; color: var(--text-secondary); }
/* Modul-Trenner: Haarlinie im Duktus der bak-fussnote (KURS-06) */
.bak-modul + .bak-modul { border-top: 1px solid var(--border); margin-top: var(--space-md, 24px); }
/* Ehrlicher Konto-Hinweis in der Quiz-Karte fuer Ausgeloggte (KURS-08) */
.bak-quiz-konto {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0 0 0.75rem;
}

/* ---------- V2.6 P2: Login-Gate (GATE-02/03/06) ---------- */
.bak-hero--gate { margin-bottom: var(--space-md, 24px); }
.bak-gate-karte {
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-elevated);
  padding: var(--space-md, 24px);
}
.bak-gate-karte .bak-lernziel { margin-bottom: var(--space-sm, 16px); }
.bak-gate-text { color: var(--text-secondary); margin: 0 0 var(--space-sm, 16px); }
/* CTA-Gruppe: definierter Abstand + Mobile-Stack (Muster .bak-lesson-nav) — auch fuer
   die Konto-Seite wiederverwendbar (AUTH-Flaeche). */
.bak-konto-ctas { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.bak-gate-zurueck {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  margin: var(--space-sm, 16px) 0 0;
}
@media (max-width: 500px) {
  .bak-konto-ctas { flex-direction: column; align-items: stretch; }
  .bak-konto-ctas .bak-btn { text-align: center; }
}

/* ---------- V2.6 P3: Dashboard (AKAD-DESIGN, DASH-02/09) ---------- */
/* Anker-Ziel des Loesch-Feedbacks: Luft beim Sprung auf #konto (DASH-02) */
.bak-dash-konto { scroll-margin-top: var(--space-md, 24px); }
/* Passwort-aendern-Zeile im Konto-Block (DASH-09) */
.bak-konto-passwort { margin: 0 0 var(--space-sm, 16px); font-family: var(--font-ui); }