/* ============================================================
   Listimo Academy v2 — Design-System (ergänzt doc.css)
   Seiten werden von tools/build-academy.mjs generiert.
   Track-Farben über body[data-ak-track], Effekte respektieren
   prefers-reduced-motion.
   ============================================================ */

:root {
  --ak-blau: #0071e3;
  --ak-gruen: #1d8a3e;
  --ak-amber: #b45309;
  --ak-akzent: var(--ak-blau);
  --ak-akzent-tinte: rgba(0, 113, 227, .09);
  --ak-tinte-weich: rgba(0, 113, 227, .045);
  --ak-karte: #ffffff;
  --ak-rand: rgba(15, 23, 42, .08);
  --ak-schatten: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
  --ak-schatten-hover: 0 2px 4px rgba(15, 23, 42, .05), 0 18px 44px rgba(15, 23, 42, .12);
  --ak-radius: 20px;
}
body[data-ak-track="listing"] { --ak-akzent: var(--ak-gruen); --ak-akzent-tinte: rgba(29, 138, 62, .10); --ak-tinte-weich: rgba(29, 138, 62, .05); }
body[data-ak-track="wachstum"] { --ak-akzent: var(--ak-amber); --ak-akzent-tinte: rgba(180, 83, 9, .10); --ak-tinte-weich: rgba(180, 83, 9, .05); }

main.doc { max-width: 920px; }
main.doc.ak-breit { max-width: 1100px; }

/* ---------- Lese-Fortschrittsbalken (Lektionen) ---------- */
.ak-leseprogress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: transparent; pointer-events: none; }
.ak-leseprogress > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--ak-akzent), color-mix(in srgb, var(--ak-akzent) 55%, #7cc4ff)); transition: width .12s linear; }

/* ---------- Einblende-Effekte ---------- */
@media (prefers-reduced-motion: no-preference) {
  .ak-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-std), transform .6s var(--ease-std); }
  .ak-reveal.sichtbar { opacity: 1; transform: none; }
  .ak-reveal-zoom { opacity: 0; transform: scale(.96); transition: opacity .55s var(--ease-std), transform .55s var(--ease-std); }
  .ak-reveal-zoom.sichtbar { opacity: 1; transform: none; }
}

/* ---------- Hero ---------- */
.ak-hero {
  position: relative; overflow: hidden;
  border-radius: 28px; margin: 8px 0 34px;
  background:
    radial-gradient(900px 420px at 85% -10%, var(--ak-akzent-tinte), transparent 60%),
    radial-gradient(700px 380px at -10% 110%, var(--ak-tinte-weich), transparent 55%),
    linear-gradient(180deg, #fff, #fbfbfd);
  border: 1px solid var(--ak-rand);
  box-shadow: var(--ak-schatten);
  padding: clamp(28px, 5vw, 56px);
}
.ak-hero-innen { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
.ak-hero-innen.ohne-bild { grid-template-columns: 1fr; }
.ak-hero h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); letter-spacing: -.025em; line-height: 1.06; margin: 14px 0 14px; }
.ak-hero .hero-sub { color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.13rem); line-height: 1.65; max-width: 60ch; }
.ak-hero .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.ak-hero-bild { position: relative; }
.ak-hero-bild img {
  width: 100%; height: auto; display: block; border-radius: 20px;
  box-shadow: 0 16px 48px rgba(15, 23, 42, .14);
  transform: rotate(1.2deg);
}
@media (prefers-reduced-motion: no-preference) {
  .ak-hero-bild img { transition: transform .6s var(--ease-std); }
  .ak-hero:hover .ak-hero-bild img { transform: rotate(0deg) scale(1.015); }
}
@media (max-width: 860px) {
  .ak-hero-innen { grid-template-columns: 1fr; }
  .ak-hero-bild { order: -1; max-width: 420px; margin: 0 auto; }
}

.ak-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .78rem; font-weight: 650; letter-spacing: .02em;
  color: var(--ak-akzent); background: var(--ak-akzent-tinte);
  border: 1px solid color-mix(in srgb, var(--ak-akzent) 25%, transparent);
  border-radius: 980px; padding: 5px 13px;
}
.ak-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ak-akzent); }

/* ---------- Statistik-Zeile (Hub) ---------- */
.ak-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 34px; }
@media (max-width: 700px) { .ak-stats { grid-template-columns: repeat(2, 1fr); } }
.ak-stat { background: var(--ak-karte); border: 1px solid var(--ak-rand); border-radius: 16px; padding: 18px 16px; text-align: center; box-shadow: var(--ak-schatten); }
.ak-stat .zahl { font-size: 1.7rem; font-weight: 750; letter-spacing: -.02em; color: var(--ak-akzent); }
.ak-stat .label { font-size: .82rem; color: var(--muted); margin-top: 2px; }

/* ---------- Abschnitts-Überschriften ---------- */
.ak-abschnitt { margin: 44px 0 18px; }
.ak-abschnitt h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); letter-spacing: -.02em; }
.ak-abschnitt .unter { color: var(--muted); margin-top: 4px; }

/* ---------- Schritt-Karten („So funktioniert's“) ---------- */
.ak-schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 820px) { .ak-schritte { grid-template-columns: 1fr; } }
.ak-schritt { background: var(--ak-karte); border: 1px solid var(--ak-rand); border-radius: var(--ak-radius); padding: 22px; box-shadow: var(--ak-schatten); }
.ak-schritt .nr { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: var(--ak-akzent-tinte); color: var(--ak-akzent); font-weight: 750; margin-bottom: 12px; }
.ak-schritt h3 { font-size: 1.02rem; margin-bottom: 6px; }
.ak-schritt p { color: var(--muted); font-size: .92rem; margin: 0; }

/* ---------- Track-Karten (Hub) ---------- */
.track-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 6px 0 10px; }
@media (max-width: 960px) { .track-karten { grid-template-columns: 1fr; } }
.track-karte {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--ak-karte); border: 1px solid var(--ak-rand);
  border-radius: 24px; box-shadow: var(--ak-schatten);
  transition: transform var(--dur-hover) var(--ease-std), box-shadow var(--dur-hover) var(--ease-std), border-color var(--dur-hover) var(--ease-std);
}
.track-karte:hover { transform: translateY(-5px); box-shadow: var(--ak-schatten-hover); border-color: color-mix(in srgb, var(--tk-farbe, var(--ak-blau)) 35%, transparent); }
.track-karte .bild { aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--tk-farbe, var(--ak-blau)) 14%, #fff), #f5f5f7); }
.track-karte .bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease-std); }
.track-karte:hover .bild img { transform: scale(1.045); }
.track-karte .inhalt { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 24px; }
.track-karte .stufe { font-size: .74rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--tk-farbe, var(--ak-blau)); margin-bottom: 8px; }
.track-karte h2 { font-size: 1.28rem; letter-spacing: -.015em; margin: 0 0 8px; }
.track-karte > .inhalt > p { color: var(--muted); font-size: .92rem; margin-bottom: 14px; }
.track-karte .fakten { list-style: none; margin: 0 0 20px; }
.track-karte .fakten li { padding-left: 26px; position: relative; font-size: .88rem; margin-bottom: 7px; }
.track-karte .fakten li::before { content: "✓"; position: absolute; left: 2px; color: var(--tk-farbe, var(--ak-blau)); font-weight: 750; }
.track-karte .ak-btn { margin-top: auto; background: var(--tk-farbe, var(--ak-blau)); }
.track-karte .ak-btn:hover { filter: brightness(1.07); }
.tk-start { --tk-farbe: var(--ak-blau); }
.tk-listing { --tk-farbe: var(--ak-gruen); }
.tk-wachstum { --tk-farbe: var(--ak-amber); }

/* ---------- Buttons ---------- */
.ak-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; cursor: pointer; text-decoration: none; text-align: center;
  border-radius: 980px; font-weight: 650; letter-spacing: -.01em;
  background: var(--ak-akzent); color: #fff; padding: 12px 26px; font-size: .95rem;
  font-family: inherit; box-shadow: 0 6px 18px color-mix(in srgb, var(--ak-akzent) 30%, transparent);
  transition: transform var(--dur-hover) var(--ease-std), box-shadow var(--dur-hover) var(--ease-std), filter var(--dur-hover) var(--ease-std);
}
.ak-btn:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 10px 26px color-mix(in srgb, var(--ak-akzent) 38%, transparent); text-decoration: none; }
/* doc.css färbt .doc a mit Akzentfarbe — Buttons müssen gewinnen: */
.doc a.ak-btn, main.doc a.ak-btn { color: #fff; }
.doc a.ak-btn-zweit, main.doc a.ak-btn-zweit { color: var(--ink); }
.ak-btn:active { transform: translateY(0); }
.ak-btn:disabled { opacity: .5; cursor: default; transform: none; }
.ak-btn-zweit { background: #f0f0f3; color: var(--ink); box-shadow: none; }
.ak-btn-zweit:hover { background: #e6e6ea; filter: none; }

/* ---------- Brotkrumen + Lektionskopf ---------- */
.ak-crumbs { font-size: .84rem; color: var(--muted); margin-bottom: 16px; }
.ak-crumbs a { color: var(--muted); }
.ak-crumbs a:hover { color: var(--ak-akzent); text-decoration: none; }
.ak-crumbs .sep { margin: 0 7px; opacity: .55; }

.lk-kopf {
  background:
    radial-gradient(700px 300px at 90% -20%, var(--ak-akzent-tinte), transparent 60%),
    linear-gradient(180deg, #fff, #fbfbfd);
  border: 1px solid var(--ak-rand); border-radius: 24px;
  box-shadow: var(--ak-schatten);
  padding: clamp(24px, 4vw, 40px); margin-bottom: 26px;
}
.lk-kopf .oben { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.lk-icon {
  width: 52px; height: 52px; flex: none; border-radius: 16px;
  display: grid; place-items: center;
  background: var(--ak-akzent-tinte); color: var(--ak-akzent);
  border: 1px solid color-mix(in srgb, var(--ak-akzent) 22%, transparent);
}
.lk-icon svg { width: 26px; height: 26px; }
.lk-kopf h1 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); letter-spacing: -.022em; line-height: 1.12; margin: 0 0 10px; }
.ak-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ak-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; color: var(--muted); background: #f5f5f7;
  border: 1px solid var(--ak-rand); border-radius: 980px; padding: 5px 12px;
}
.ak-chip b { color: var(--ink); font-weight: 650; }

/* ---------- Lernziele ---------- */
.ak-ziele {
  background: linear-gradient(180deg, var(--ak-tinte-weich), transparent 140%);
  border: 1px solid color-mix(in srgb, var(--ak-akzent) 18%, transparent);
  border-radius: var(--ak-radius); padding: 20px 24px; margin: 0 0 26px;
}
.ak-ziele .kopf { font-weight: 750; font-size: .9rem; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.ak-ziele .kopf::before { content: "🎯"; }
.ak-ziele ul { margin: 0; list-style: none; }
.ak-ziele li { font-size: .94rem; margin-bottom: 7px; padding-left: 26px; position: relative; }
.ak-ziele li::before { content: "→"; position: absolute; left: 2px; color: var(--ak-akzent); font-weight: 700; }

/* ---------- Inhalt ---------- */
.ak-inhalt {
  background: var(--ak-karte); border: 1px solid var(--ak-rand);
  border-radius: 24px; padding: clamp(24px, 4.5vw, 46px);
  box-shadow: var(--ak-schatten);
  font-size: 1.02rem; line-height: 1.75;
}
.ak-inhalt h2 {
  font-size: 1.42rem; letter-spacing: -.018em; margin: 38px 0 14px;
  padding-top: 10px; position: relative;
}
.ak-inhalt h2::before { content: ""; position: absolute; top: 0; left: 0; width: 44px; height: 4px; border-radius: 980px; background: linear-gradient(90deg, var(--ak-akzent), color-mix(in srgb, var(--ak-akzent) 40%, transparent)); }
.ak-inhalt h2:first-child { margin-top: 0; }
.ak-inhalt h3 { font-size: 1.08rem; margin: 24px 0 8px; }
.ak-inhalt p { margin-bottom: 14px; }
.ak-inhalt ul, .ak-inhalt ol { margin: 0 0 16px 24px; font-size: .98rem; }
.ak-inhalt li { margin-bottom: 8px; }
.ak-inhalt li::marker { color: var(--ak-akzent); }

/* Tabellen */
.ak-tabelle { overflow-x: auto; margin: 18px 0 22px; border: 1px solid var(--ak-rand); border-radius: 14px; }
.ak-tabelle table { border-collapse: collapse; width: 100%; font-size: .92rem; min-width: 520px; }
.ak-tabelle th, .ak-tabelle td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--ak-rand); vertical-align: top; }
.ak-tabelle thead th, .ak-tabelle tr:first-child th { background: #fafafc; font-weight: 700; font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ak-tabelle tr:last-child td { border-bottom: 0; }
.ak-tabelle tbody tr { transition: background var(--dur-hover) var(--ease-std); }
.ak-tabelle tbody tr:hover { background: var(--ak-tinte-weich); }

/* ---------- Hinweis-Boxen ---------- */
.box { border-radius: 16px; padding: 18px 20px 16px; margin: 20px 0 22px; font-size: .95rem; border: 1px solid; }
.box .kopf { display: flex; align-items: center; gap: 8px; font-weight: 750; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 8px; }
.box .kopf::before { font-size: 1rem; }
.box p:last-child { margin-bottom: 0; }
.box-tipp     { background: rgba(29,138,62,.06);  border-color: rgba(29,138,62,.25); }
.box-tipp .kopf { color: var(--ok); } .box-tipp .kopf::before { content: "💡"; }
.box-warnung  { background: rgba(201,59,59,.05);  border-color: rgba(201,59,59,.25); }
.box-warnung .kopf { color: var(--warn); } .box-warnung .kopf::before { content: "⚠️"; }
.box-fehler   { background: rgba(201,59,59,.05);  border-color: rgba(201,59,59,.25); }
.box-fehler .kopf { color: var(--warn); } .box-fehler .kopf::before { content: "🚫"; }
.box-story    { background: var(--ak-tinte-weich); border-color: color-mix(in srgb, var(--ak-akzent) 25%, transparent); }
.box-story .kopf { color: var(--ak-akzent); } .box-story .kopf::before { content: "💬"; }
.box-beispiel { background: #fafafc; border-color: var(--ak-rand); }
.box-beispiel .kopf { color: var(--muted); } .box-beispiel .kopf::before { content: "🧪"; }

/* ---------- Interaktive Checkliste ---------- */
.checkliste { background: var(--ak-karte); border: 1.5px dashed color-mix(in srgb, var(--ak-akzent) 45%, transparent); border-radius: 18px; padding: 22px 26px; margin: 26px 0; }
.checkliste .kopf { font-weight: 750; font-size: 1rem; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.checkliste .kopf::before { content: "📋"; }
.checkliste .cl-stand { font-size: .8rem; color: var(--muted); margin-bottom: 12px; }
.checkliste ul { list-style: none; margin: 0; }
.checkliste li { padding: 7px 0 7px 34px; position: relative; font-size: .94rem; cursor: pointer; border-radius: 10px; transition: background var(--dur-hover) var(--ease-std), color .25s var(--ease-std); }
.checkliste li:hover { background: var(--ak-tinte-weich); }
.checkliste li::before {
  content: ""; position: absolute; left: 6px; top: 10px; width: 17px; height: 17px;
  border: 2px solid color-mix(in srgb, var(--ak-akzent) 65%, transparent); border-radius: 6px;
  transition: background var(--dur-hover) var(--ease-pop), border-color var(--dur-hover) var(--ease-std);
}
.checkliste li.erledigt { color: var(--muted); }
.checkliste li.erledigt::before { background: var(--ak-akzent); border-color: var(--ak-akzent); }
.checkliste li.erledigt::after {
  content: ""; position: absolute; left: 10px; top: 13px; width: 9px; height: 5px;
  border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg);
}
@media (prefers-reduced-motion: no-preference) {
  .checkliste li.erledigt::before { animation: cl-pop .3s var(--ease-pop); }
  @keyframes cl-pop { 50% { transform: scale(1.25); } }
}

/* ---------- FAQ (Lektion + Hub) ---------- */
.ak-faq { margin-top: 26px; }
.ak-faq details {
  background: var(--ak-karte); border: 1px solid var(--ak-rand); border-radius: 16px;
  padding: 16px 20px; margin-bottom: 10px; box-shadow: var(--ak-schatten);
  transition: border-color var(--dur-hover) var(--ease-std);
}
.ak-faq details[open] { border-color: color-mix(in srgb, var(--ak-akzent) 35%, transparent); }
.ak-faq summary { cursor: pointer; font-weight: 650; font-size: .97rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ak-faq summary::-webkit-details-marker { display: none; }
.ak-faq summary::after { content: "+"; font-size: 1.35rem; line-height: 1; color: var(--ak-akzent); font-weight: 400; flex: none; transition: transform .3s var(--ease-std); }
.ak-faq details[open] summary::after { transform: rotate(45deg); }
.ak-faq details p { color: var(--muted); font-size: .93rem; margin: 10px 0 0; line-height: 1.65; }

/* ============================================================
   QUIZ — Frage-für-Frage-Stepper
   ============================================================ */
.quiz {
  background: var(--ak-karte); border: 1px solid var(--ak-rand);
  border-radius: 24px; padding: clamp(22px, 4vw, 38px);
  box-shadow: var(--ak-schatten); margin-top: 26px;
  position: relative; overflow: hidden;
}
.quiz::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--ak-akzent), color-mix(in srgb, var(--ak-akzent) 45%, #9bd0ff)); }
.quiz > h2, .quiz .quiz-kopf h2 { margin: 4px 0 4px; font-size: 1.35rem; letter-spacing: -.015em; display: flex; align-items: center; gap: 10px; }
.quiz .quiz-kopf h2::before { content: "🧠"; font-size: 1.2rem; }
.quiz .quiz-sub { color: var(--muted); font-size: .9rem; margin-bottom: 20px; }

.quiz-fortschritt { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.quiz-punkte { display: flex; gap: 6px; flex-wrap: wrap; }
.quiz-punkt { width: 26px; height: 6px; border-radius: 980px; background: #e8e8ed; transition: background .3s var(--ease-std), transform .3s var(--ease-pop); }
.quiz-punkt.aktiv { background: var(--ak-akzent); transform: scaleY(1.4); }
.quiz-punkt.richtig { background: var(--ok); }
.quiz-punkt.falsch { background: var(--warn); }
.quiz-zaehler { font-size: .82rem; color: var(--muted); white-space: nowrap; }

.quiz-buehne { position: relative; }
.quiz-frage { display: none; }
.quiz-frage.aktiv { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .quiz-frage.aktiv { animation: qf-rein .4s var(--ease-std); }
  @keyframes qf-rein { from { opacity: 0; transform: translateX(26px); } }
}
.quiz-frage .f { font-weight: 700; margin-bottom: 14px; font-size: 1.05rem; line-height: 1.5; }
.quiz-optionen { display: grid; gap: 10px; }
.quiz-optionen label {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  border: 1.5px solid var(--ak-rand); border-radius: 14px; padding: 13px 16px;
  font-size: .95rem; line-height: 1.5; background: #fff;
  transition: border-color var(--dur-hover) var(--ease-std), background var(--dur-hover) var(--ease-std), transform var(--dur-hover) var(--ease-std);
}
.quiz-optionen label:hover { border-color: var(--ak-akzent); background: var(--ak-tinte-weich); transform: translateX(3px); }
.quiz-optionen .buchstabe {
  flex: none; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center;
  background: #f0f0f3; color: var(--muted); font-weight: 700; font-size: .8rem; margin-top: 1px;
  transition: background var(--dur-hover) var(--ease-std), color var(--dur-hover) var(--ease-std);
}
.quiz-optionen label:hover .buchstabe { background: var(--ak-akzent); color: #fff; }
.quiz-optionen input { position: absolute; opacity: 0; pointer-events: none; }
.quiz-frage.beantwortet .quiz-optionen label { cursor: default; transform: none; }
.quiz-frage.beantwortet .quiz-optionen label:hover { border-color: var(--ak-rand); background: #fff; }
.quiz-frage label.richtig { border-color: var(--ok) !important; background: rgba(29,138,62,.07) !important; }
.quiz-frage label.richtig .buchstabe { background: var(--ok); color: #fff; }
.quiz-frage label.falsch { border-color: var(--warn) !important; background: rgba(201,59,59,.06) !important; }
.quiz-frage label.falsch .buchstabe { background: var(--warn); color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .quiz-frage label.falsch { animation: qf-schuettel .4s var(--ease-std); }
  @keyframes qf-schuettel { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
  .quiz-frage label.richtig { animation: qf-puls .45s var(--ease-pop); }
  @keyframes qf-puls { 40% { transform: scale(1.015); } }
}
.quiz-erklaerung {
  display: none; margin-top: 14px; font-size: .92rem; line-height: 1.6;
  background: #fafafc; border: 1px solid var(--ak-rand); border-left: 4px solid var(--ak-akzent);
  border-radius: 12px; padding: 13px 16px;
}
.quiz-frage.beantwortet .quiz-erklaerung { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .quiz-frage.beantwortet .quiz-erklaerung { animation: qf-rein-oben .35s var(--ease-std); }
  @keyframes qf-rein-oben { from { opacity: 0; transform: translateY(-8px); } }
}
.quiz-steuer { display: flex; justify-content: flex-end; margin-top: 18px; min-height: 46px; }

/* Ergebnis-Bildschirm */
.quiz-ergebnis { display: none; text-align: center; padding: 10px 0 4px; }
.quiz-ergebnis.sichtbar { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .quiz-ergebnis.sichtbar { animation: qf-rein .45s var(--ease-std); }
}
.quiz-ring { width: 150px; height: 150px; margin: 6px auto 14px; position: relative; }
.quiz-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.quiz-ring .spur { fill: none; stroke: #eef0f4; stroke-width: 11; }
.quiz-ring .wert { fill: none; stroke: var(--ak-akzent); stroke-width: 11; stroke-linecap: round; transition: stroke-dashoffset 1.1s var(--ease-std), stroke .4s; }
.quiz-ring.gut .wert { stroke: var(--ok); }
.quiz-ring.naja .wert { stroke: var(--ak-amber); }
.quiz-ring.schlecht .wert { stroke: var(--warn); }
.quiz-ring .mitte { position: absolute; inset: 0; display: grid; place-items: center; }
.quiz-ring .mitte .p { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; }
.quiz-ring .mitte .l { font-size: .72rem; color: var(--muted); margin-top: -4px; }
.quiz-ergebnis h3 { font-size: 1.3rem; margin-bottom: 6px; }
.quiz-ergebnis .qe-text { color: var(--muted); font-size: .94rem; max-width: 46ch; margin: 0 auto 18px; }
.quiz-ergebnis .qe-hinweis { display: block; font-size: .84rem; color: var(--muted); margin-top: 10px; }
.quiz-ergebnis .qe-aktionen { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.quiz-falschliste { text-align: left; max-width: 560px; margin: 14px auto 0; font-size: .9rem; color: var(--muted); }
.quiz-falschliste li { margin-bottom: 6px; }

/* Konfetti-Punkte beim Bestehen */
.quiz-konfetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.quiz-konfetti span { position: absolute; top: -12px; width: 8px; height: 8px; border-radius: 2px; opacity: .9; }
@media (prefers-reduced-motion: no-preference) {
  .quiz-konfetti span { animation: konfetti-fall linear forwards; }
  @keyframes konfetti-fall { to { transform: translateY(120vh) rotate(540deg); opacity: 0; } }
}

/* ---------- Weiter/Zurück-Karten ---------- */
.ak-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.ak-navigation a {
  background: var(--ak-karte); border: 1px solid var(--ak-rand); border-radius: 18px;
  padding: 18px 22px; text-decoration: none; color: var(--ink);
  box-shadow: var(--ak-schatten);
  transition: transform var(--dur-hover) var(--ease-std), box-shadow var(--dur-hover) var(--ease-std), border-color var(--dur-hover) var(--ease-std);
}
.ak-navigation a:hover { transform: translateY(-3px); box-shadow: var(--ak-schatten-hover); border-color: color-mix(in srgb, var(--ak-akzent) 35%, transparent); text-decoration: none; }
.ak-navigation .richtung { display: block; font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ak-akzent); margin-bottom: 5px; }
.ak-navigation .titel { font-weight: 650; font-size: .94rem; line-height: 1.4; }
.ak-navigation .weiter { text-align: right; grid-column: 2; }
@media (max-width: 620px) { .ak-navigation { grid-template-columns: 1fr; } .ak-navigation .weiter { grid-column: 1; text-align: left; } }

/* ---------- Autor-Box ---------- */
.autor-box { display: flex; gap: 16px; align-items: flex-start; background: var(--ak-karte); border: 1px solid var(--ak-rand); border-radius: 18px; padding: 20px 24px; margin-top: 26px; box-shadow: var(--ak-schatten); }
.autor-box .avatar { flex: none; width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, var(--ak-blau), #4aa3ff); color: #fff; display: grid; place-items: center; font-weight: 750; font-size: 1.15rem; box-shadow: 0 6px 16px rgba(0,113,227,.3); }
.autor-box .name { font-weight: 750; font-size: .98rem; }
.autor-box .rolle { color: var(--muted); font-size: .84rem; margin-bottom: 6px; }
.autor-box p { font-size: .9rem; margin: 0; color: var(--ink); }

/* ---------- CTA-Box ---------- */
.ak-cta {
  position: relative; overflow: hidden;
  background:
    radial-gradient(560px 240px at 100% 0%, var(--ak-akzent-tinte), transparent 60%),
    linear-gradient(180deg, #fff, #fbfbfd);
  border: 1px solid color-mix(in srgb, var(--ak-akzent) 25%, transparent);
  border-radius: 20px; padding: 26px 28px; margin: 28px 0 0;
}
.ak-cta .kopf { font-weight: 750; font-size: 1.1rem; margin-bottom: 6px; }
.ak-cta p { font-size: .94rem; margin-bottom: 16px; color: var(--ink); }
/* Werkzeug-Box am Lektionsende (Listing-Check / Generator / Ratgeber) */
.ak-werkzeug-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.ak-werkzeug-mehr { margin: 14px 0 0; font-size: .92rem; }
.ak-werkzeug-mehr a { font-weight: 650; }

/* ---------- Track-Seiten ---------- */
.fortschritt { display: none; background: var(--ak-karte); border: 1px solid var(--ak-rand); border-radius: 16px; padding: 16px 20px; margin: 0 0 22px; box-shadow: var(--ak-schatten); }
.fortschritt.sichtbar { display: block; }
.fortschritt .zeile { display: flex; justify-content: space-between; font-size: .85rem; color: var(--muted); margin-bottom: 8px; }
.fortschritt .zeile b { color: var(--ink); }
.fortschritt .balken { height: 9px; border-radius: 980px; background: #eef0f4; overflow: hidden; }
.fortschritt .balken > div { height: 100%; width: 0; border-radius: 980px; background: linear-gradient(90deg, var(--ak-akzent), color-mix(in srgb, var(--ak-akzent) 55%, #9bd0ff)); transition: width var(--dur-gross) var(--ease-std); }

.lektion-liste { display: grid; gap: 12px; margin-top: 8px; }
.lektion-karte {
  display: flex; gap: 16px; align-items: center;
  background: var(--ak-karte); border: 1px solid var(--ak-rand); border-radius: 18px;
  padding: 16px 20px; text-decoration: none; color: var(--ink);
  box-shadow: var(--ak-schatten);
  transition: transform var(--dur-hover) var(--ease-std), box-shadow var(--dur-hover) var(--ease-std), border-color var(--dur-hover) var(--ease-std);
}
.lektion-karte:hover { transform: translateX(5px); box-shadow: var(--ak-schatten-hover); border-color: color-mix(in srgb, var(--ak-akzent) 35%, transparent); text-decoration: none; }
.lektion-karte .lk-icon { width: 46px; height: 46px; border-radius: 14px; }
.lektion-karte .lk-icon svg { width: 23px; height: 23px; }
.lektion-karte .nr { font-size: .72rem; font-weight: 750; letter-spacing: .05em; color: var(--ak-akzent); text-transform: uppercase; }
.lektion-karte .titel { font-weight: 650; font-size: .98rem; margin: 1px 0 2px; }
.lektion-karte .teaser { color: var(--muted); font-size: .86rem; line-height: 1.45; }
.lektion-karte .rechts { flex: none; margin-left: auto; display: flex; align-items: center; gap: 12px; }
.lektion-karte .zeit { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.lektion-karte .haken { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #e2e4ea; display: grid; place-items: center; font-size: .7rem; color: transparent; transition: all .3s var(--ease-pop); }
.lektion-karte.fertig .haken { background: var(--ok); border-color: var(--ok); color: #fff; }
.lektion-karte .pfeil { color: var(--muted); transition: transform var(--dur-hover) var(--ease-std), color var(--dur-hover) var(--ease-std); }
.lektion-karte:hover .pfeil { transform: translateX(3px); color: var(--ak-akzent); }
@media (max-width: 640px) {
  .lektion-karte { flex-wrap: wrap; }
  .lektion-karte .rechts { width: 100%; margin-left: 62px; margin-top: -6px; }
}

/* ---------- Zertifikat ---------- */
.zertifikat {
  position: relative; background: linear-gradient(180deg, #fff, #fbfbfd);
  border: 1px solid var(--ak-rand); border-radius: 24px;
  padding: clamp(30px, 6vw, 60px); text-align: center; margin: 20px 0;
  box-shadow: var(--ak-schatten);
  overflow: hidden;
}
.zertifikat::before { content: ""; position: absolute; inset: 10px; border: 2px solid color-mix(in srgb, var(--ak-blau) 25%, transparent); border-radius: 18px; pointer-events: none; }
.zertifikat .siegel { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--ak-blau), #4aa3ff); color: #fff; font-size: 1.6rem; box-shadow: 0 10px 26px rgba(0,113,227,.35); }
.zertifikat .ueber { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.zertifikat .fuer { color: var(--muted); font-size: .95rem; margin: 12px 0 4px; }
.zertifikat .name { font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 12px; }
.zertifikat .kurs { font-size: 1.12rem; font-weight: 700; color: var(--ak-blau); margin-bottom: 18px; }
.zertifikat .details { color: var(--muted); font-size: .85rem; position: relative; }
.zertifikat .code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #f5f5f7; border-radius: 8px; padding: 2px 8px; }
@media print {
  nav.site-nav, footer.doc-foot, .kein-druck, #cookieBanner, .ak-leseprogress { display: none !important; }
  body { background: #fff; }
  main.doc { padding: 0; max-width: none; }
  .zertifikat { box-shadow: none; margin: 0; }
}

/* ---------- Rechner ---------- */
.rechner { background: var(--ak-karte); border: 1px solid var(--ak-rand); border-radius: 24px; padding: clamp(22px, 4vw, 38px); box-shadow: var(--ak-schatten); }
.rechner-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); gap: clamp(20px, 3.5vw, 36px); align-items: start; }
@media (max-width: 820px) { .rechner-layout { grid-template-columns: 1fr; } }
.rechner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
@media (max-width: 560px) { .rechner-grid { grid-template-columns: 1fr; } }
.rechner-feld label { display: block; font-size: .82rem; font-weight: 650; margin-bottom: 5px; }
.rechner-feld .hinweis { font-weight: 400; color: var(--muted); }
.rechner-feld input, .rechner-feld select {
  width: 100%; border: 1.5px solid var(--ak-rand); border-radius: 12px; padding: 10px 13px;
  font-size: .96rem; font-family: inherit; background: #fff; color: var(--ink);
  transition: border-color var(--dur-hover) var(--ease-std), box-shadow var(--dur-hover) var(--ease-std);
}
.rechner-feld input:focus, .rechner-feld select:focus { outline: none; border-color: var(--ak-akzent); box-shadow: 0 0 0 3px var(--ak-akzent-tinte); }
.rechner-ergebnis { position: sticky; top: 70px; background: #fafafc; border: 1px solid var(--ak-rand); border-radius: 18px; padding: 20px 22px; }
.rechner-ergebnis .re-titel { font-size: .78rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.rechner-ergebnis .zeile { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: .92rem; }
.rechner-ergebnis .zeile.klein { color: var(--muted); font-size: .85rem; }
.rechner-ergebnis .zeile.gross { font-size: 1.35rem; font-weight: 800; border-top: 1px solid var(--ak-rand); margin-top: 10px; padding-top: 16px; letter-spacing: -.01em; }
.rechner-ergebnis .wert { font-variant-numeric: tabular-nums; transition: color .3s var(--ease-std); }
.rechner-ergebnis .wert.gut { color: var(--ok); }
.rechner-ergebnis .wert.schlecht { color: var(--warn); }
.rechner-kennzahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.rechner-kennzahlen .kz { background: #fff; border: 1px solid var(--ak-rand); border-radius: 12px; padding: 10px 8px; text-align: center; }
.rechner-kennzahlen .kz .w { font-weight: 750; font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.rechner-kennzahlen .kz .l { font-size: .68rem; color: var(--muted); margin-top: 2px; }

/* ---------- Kleinkram ---------- */
.ak-hinweis-klein { color: var(--muted); font-size: .8rem; margin-top: 14px; }
.ak-bild { border-radius: 18px; overflow: hidden; margin: 20px 0; box-shadow: var(--ak-schatten); }
.ak-bild img { width: 100%; height: auto; display: block; }

/* ============================================================
   ABSCHNITTE — Lektion in aufklappbare Sektionen zerlegt
   ============================================================ */
.ak-intro {
  background: var(--ak-karte); border: 1px solid var(--ak-rand); border-radius: 20px;
  padding: 20px 24px; margin-bottom: 14px; box-shadow: var(--ak-schatten);
  font-size: 1.01rem; line-height: 1.7;
}
.ak-intro p:last-child { margin-bottom: 0; }

.sektion-nav {
  position: sticky; top: 52px; z-index: 40;
  display: flex; align-items: center; gap: 8px;
  background: rgba(245,245,247,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 8px 2px; margin: 0 0 14px; border-radius: 0 0 14px 14px;
}
.sn-spur { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 2px; flex: 1; scroll-behavior: smooth; }
.sn-spur::-webkit-scrollbar { display: none; }
.sn-chip {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--ak-rand); background: var(--ak-karte); color: var(--ink);
  border-radius: 980px; padding: 7px 13px 7px 7px; font-size: .8rem; font-weight: 600;
  cursor: pointer; font-family: inherit; max-width: 240px;
  transition: border-color var(--dur-hover) var(--ease-std), background var(--dur-hover) var(--ease-std), color var(--dur-hover) var(--ease-std);
}
.sn-chip:hover { border-color: var(--ak-akzent); background: var(--ak-tinte-weich); }
.sn-chip.aktiv { background: var(--ak-akzent); border-color: var(--ak-akzent); color: #fff; }
.sn-chip .sn-nr { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ak-akzent-tinte); color: var(--ak-akzent); font-size: .72rem; font-weight: 750; }
.sn-chip.aktiv .sn-nr { background: rgba(255,255,255,.22); color: #fff; }
.sn-chip .sn-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-alle { flex: none; border: 0; background: none; color: var(--ak-akzent); font-size: .78rem; font-weight: 650; cursor: pointer; font-family: inherit; padding: 6px 8px; border-radius: 8px; white-space: nowrap; }
.sn-alle:hover { background: var(--ak-akzent-tinte); }

.ak-sektionen { display: grid; gap: 10px; }
.ak-sektion {
  background: var(--ak-karte); border: 1px solid var(--ak-rand); border-radius: 18px;
  box-shadow: var(--ak-schatten); overflow: hidden;
  transition: border-color var(--dur-hover) var(--ease-std);
}
.ak-sektion[open] { border-color: color-mix(in srgb, var(--ak-akzent) 32%, transparent); }
.ak-sektion summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; min-height: 56px;
  font-weight: 700; font-size: 1.05rem; letter-spacing: -.012em;
  transition: background var(--dur-hover) var(--ease-std);
}
.ak-sektion summary:hover { background: var(--ak-tinte-weich); }
.ak-sektion summary::-webkit-details-marker { display: none; }
.ak-sektion summary::after { content: none !important; } /* doc.css hängt sonst sein „+“ an jede summary */
.ak-sektion .s-nr {
  flex: none; width: 32px; height: 32px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--ak-akzent-tinte); color: var(--ak-akzent); font-size: .88rem; font-weight: 750;
  transition: background var(--dur-hover) var(--ease-std), color var(--dur-hover) var(--ease-std);
}
.ak-sektion[open] .s-nr { background: var(--ak-akzent); color: #fff; }
.ak-sektion.gelesen:not([open]) .s-nr { background: var(--ok); color: #fff; }
.ak-sektion .s-titel { flex: 1; line-height: 1.35; }
.ak-sektion .s-pfeil { flex: none; width: 18px; height: 18px; color: var(--muted); transition: transform .3s var(--ease-std); }
.ak-sektion[open] .s-pfeil { transform: rotate(180deg); }
.ak-sektion .s-inhalt {
  padding: 4px 22px 20px 22px;
  font-size: 1.01rem; line-height: 1.72;
  border-top: 1px solid var(--ak-rand);
}
@media (prefers-reduced-motion: no-preference) {
  .ak-sektion[open] .s-inhalt { animation: s-auf .35s var(--ease-std); }
  @keyframes s-auf { from { opacity: 0; transform: translateY(-6px); } }
}
.ak-sektion .s-inhalt > :first-child { margin-top: 14px; }
.ak-sektion h3 { font-size: 1.05rem; margin: 20px 0 8px; }
.ak-sektion p { margin-bottom: 13px; }
.ak-sektion ul, .ak-sektion ol { margin: 0 0 14px 22px; font-size: .97rem; }
.ak-sektion li { margin-bottom: 7px; }
.ak-sektion li::marker { color: var(--ak-akzent); }
.s-fuss { display: flex; justify-content: flex-end; margin-top: 16px; }
.s-weiter {
  border: 1px solid color-mix(in srgb, var(--ak-akzent) 35%, transparent);
  background: var(--ak-tinte-weich); color: var(--ak-akzent);
  border-radius: 980px; padding: 10px 18px; font-size: .86rem; font-weight: 650;
  cursor: pointer; font-family: inherit; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background var(--dur-hover) var(--ease-std), color var(--dur-hover) var(--ease-std);
}
.s-weiter:hover { background: var(--ak-akzent); color: #fff; }

/* „Einfach gesagt“-Box (Verständlichkeit) */
.box-einfach { background: rgba(0,113,227,.05); border-color: rgba(0,113,227,.22); }
.box-einfach .kopf { color: var(--ak-blau); }
.box-einfach .kopf::before { content: "🧩"; }

/* ============================================================
   MOBILE-FEINSCHLIFF (die meisten Besucher kommen per Handy)
   ============================================================ */
@media (max-width: 700px) {
  main.doc { padding: 20px 14px 48px; }
  .ak-hero { border-radius: 20px; padding: 22px 18px; margin-bottom: 22px; }
  .ak-hero h1 { font-size: 1.72rem; margin: 10px 0 10px; }
  .ak-hero .hero-sub { font-size: .95rem; }
  .ak-hero .hero-cta { margin-top: 18px; }
  .ak-hero .hero-cta .ak-btn { flex: 1 1 auto; padding: 12px 16px; font-size: .9rem; }
  .ak-hero-bild { max-width: 300px; }
  .ak-hero-bild img { transform: none; }
  .ak-stats { gap: 8px; margin-bottom: 24px; }
  .ak-stat { padding: 13px 10px; border-radius: 13px; }
  .ak-stat .zahl { font-size: 1.35rem; }
  .ak-stat .label { font-size: .72rem; }
  .ak-abschnitt { margin: 30px 0 14px; }
  .lk-kopf { border-radius: 18px; padding: 18px 16px; margin-bottom: 16px; }
  .lk-kopf h1 { font-size: 1.42rem; }
  .lk-icon { width: 42px; height: 42px; border-radius: 13px; }
  .lk-icon svg { width: 21px; height: 21px; }
  .ak-chip { font-size: .74rem; padding: 4px 10px; }
  .ak-ziele { padding: 16px 16px; margin-bottom: 16px; border-radius: 16px; }
  .ak-ziele li { font-size: .9rem; }
  .ak-intro { padding: 16px 16px; font-size: .96rem; }
  .sektion-nav { top: 52px; padding: 6px 0; }
  .ak-sektion summary { padding: 14px 14px; gap: 11px; font-size: .98rem; }
  .ak-sektion .s-nr { width: 28px; height: 28px; font-size: .8rem; border-radius: 9px; }
  .ak-sektion .s-inhalt { padding: 2px 15px 16px; font-size: .96rem; line-height: 1.68; }
  .ak-sektion ul, .ak-sektion ol { margin-left: 18px; font-size: .93rem; }
  .s-fuss { justify-content: stretch; }
  .s-weiter { width: 100%; text-align: center; }
  .box { padding: 14px 14px 12px; font-size: .9rem; border-radius: 13px; }
  .ak-tabelle { margin: 14px 0 16px; }
  .ak-tabelle table { font-size: .84rem; min-width: 440px; }
  .ak-tabelle th, .ak-tabelle td { padding: 8px 10px; }
  .checkliste { padding: 16px 16px; border-radius: 15px; }
  .quiz { padding: 18px 14px; border-radius: 18px; }
  .quiz .quiz-kopf h2 { font-size: 1.15rem; }
  .quiz-frage .f { font-size: .98rem; }
  .quiz-optionen label { padding: 12px 12px; font-size: .9rem; border-radius: 12px; }
  .quiz-punkt { width: 18px; }
  .quiz-ring { width: 124px; height: 124px; }
  .ak-navigation { gap: 10px; }
  .ak-navigation a { padding: 14px 16px; }
  .autor-box { padding: 16px 16px; gap: 12px; }
  .autor-box .avatar { width: 46px; height: 46px; font-size: 1rem; }
  .ak-cta { padding: 20px 18px; border-radius: 16px; }
  .ak-cta .ak-btn { width: 100%; }
  .ak-faq details { padding: 13px 15px; }
  .ak-faq summary { font-size: .92rem; }
  .track-karte .inhalt { padding: 18px 16px 20px; }
  .lektion-karte { padding: 13px 14px; gap: 12px; }
  .lektion-karte .lk-icon { width: 40px; height: 40px; }
  .lektion-karte .titel { font-size: .93rem; }
  .lektion-karte .teaser { font-size: .82rem; }
  .lektion-karte .rechts { margin-left: 52px; }
  .rechner { padding: 18px 14px; }
  .rechner-ergebnis { position: static; }
  .zertifikat { padding: 24px 16px; }
  .ak-schritt { padding: 18px 16px; }
}
/* Sehr schmale Geräte */
@media (max-width: 380px) {
  .ak-hero h1 { font-size: 1.5rem; }
  .lk-kopf h1 { font-size: 1.28rem; }
  .sn-chip .sn-titel { display: none; }
  .sn-chip { padding: 6px; }
}

/* ---------- Geführter Kapitel-Wizard ----------
   JS setzt .ak-wizard auf .ak-sektionen: dann ist immer nur das .aktiv-Kapitel
   sichtbar (kein Stapel untereinander), die Überschrift ist reine Kopfzeile und
   „Weiter"/„Zurück" blättern an Ort und Stelle. Ohne JS greift nichts davon —
   native <details> untereinander bleiben bedienbar (Googlebot/noscript). */
.ak-wizard .ak-sektion { display: none; }
.ak-wizard .ak-sektion.aktiv { display: block; }
.ak-wizard .ak-sektion.aktiv > summary { cursor: default; }
.ak-wizard .s-pfeil { display: none; }
.s-fuss { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.s-zurueck {
  flex: 0 0 auto;
  border: 1.5px solid rgba(0, 0, 0, .16); background: #fff; color: #333;
  border-radius: 99px; padding: 10px 18px; font: inherit; font-weight: 650; font-size: .92rem;
  cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.s-zurueck:hover { background: rgba(0, 0, 0, .04); border-color: rgba(0, 0, 0, .28); }
.s-fuss .s-weiter { margin-left: auto; }
@media (max-width: 700px) {
  .s-fuss { flex-direction: column-reverse; align-items: stretch; }
  .s-zurueck { width: 100%; text-align: center; }
  .s-fuss .s-weiter { margin-left: 0; }
}
.sn-chip.gesperrt { opacity: .38; cursor: not-allowed; }
.sn-chip.gesperrt .sn-nr { background: rgba(0, 0, 0, .07); color: #8a8a8e; }
.sn-chip.gelesen:not(.aktiv) .sn-nr { background: rgba(29, 138, 62, .12); color: #1d8a3e; }
.sn-chip.gelesen:not(.aktiv) .sn-nr::before { content: "✓"; font-size: .72em; margin-right: 1px; }
.ak-sektion.gesperrt > summary { cursor: not-allowed; opacity: .5; }
.ak-sektion.gesperrt > summary .s-pfeil { visibility: hidden; }
@keyframes ak-wackeln {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.wackeln { animation: ak-wackeln .28s ease 2; }
@media (prefers-reduced-motion: reduce) { .wackeln { animation: none; } }
.quiz-sperre {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 4px; padding: 14px 16px;
  border-radius: 14px; border: 1.5px dashed rgba(0, 0, 0, .18);
  background: rgba(0, 0, 0, .035); color: #555; font-size: .95rem;
}
.quiz-sperre[hidden] { display: none; }
.quiz-sperre .qs-schloss { font-size: 1.15rem; }
.quiz[data-gesperrt] .quiz-fortschritt,
.quiz[data-gesperrt] .quiz-buehne,
.quiz[data-gesperrt] .quiz-steuer,
.quiz[data-gesperrt] .quiz-ergebnis { display: none; }

/* ---------- Konto-Gate (Soft-Gate ab Lektion 4 je Track) ----------
   html.ak-gast setzt das Mini-Script im <head> (kein Supabase-Token) und wird von
   academy.js nach der echten Session-Prüfung bestätigt oder entfernt. Der Inhalt
   steht komplett im HTML — verdeckt wird nur für Gäste. */
.ak-gate-box { display: none; }
/* !important: gewinnt bewusst auch gegen .ak-wizard .ak-sektion.aktiv — ein Gast
   darf NIE ein Konto-Kapitel sehen, egal welchen Stand sein localStorage trägt. */
html.ak-gast .ak-konto-inhalt { display: none !important; }
html.ak-gast .ak-gate-box {
  display: block;
  margin: 26px 0;
  padding: 26px 24px 24px;
  border-radius: 20px;
  border: 1.5px solid color-mix(in srgb, var(--ak-akzent) 30%, transparent);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--ak-akzent) 9%, transparent), transparent 55%),
    linear-gradient(180deg, #fff, color-mix(in srgb, var(--ak-akzent) 4%, #fff));
  box-shadow: 0 12px 34px rgba(0, 0, 0, .07);
  text-align: center;
}
.ak-gate-box .gate-schloss {
  width: 54px; height: 54px; margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.55rem; border-radius: 50%;
  background: color-mix(in srgb, var(--ak-akzent) 12%, #fff);
  border: 1.5px solid color-mix(in srgb, var(--ak-akzent) 28%, transparent);
}
.ak-gate-box .gate-kopf { font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; margin: 0 0 6px; }
.ak-gate-box .gate-sub { margin: 0 auto 16px; max-width: 520px; color: #444; }
.ak-gate-box .gate-rest {
  margin: 0 auto 16px; max-width: 460px; text-align: left;
  background: rgba(255, 255, 255, .75); border: 1px solid rgba(0, 0, 0, .07);
  border-radius: 14px; padding: 14px 16px;
}
.ak-gate-box .gate-rest .kopf { font-weight: 700; font-size: .88rem; margin-bottom: 8px; }
.ak-gate-box .gate-rest ul { margin: 0; padding: 0; list-style: none; }
.ak-gate-box .gate-rest li { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; font-size: .93rem; color: #333; }
.ak-gate-box .gate-rest .nr {
  flex: 0 0 auto; min-width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  font-size: .74rem; font-weight: 700; border-radius: 50%;
  background: color-mix(in srgb, var(--ak-akzent) 12%, #fff); color: var(--ak-akzent);
}
.ak-gate-box .gate-vorteile { margin: 0 auto 18px; padding: 0; list-style: none; max-width: 460px; text-align: left; }
.ak-gate-box .gate-vorteile li { padding: 3px 0 3px 26px; position: relative; font-size: .95rem; }
.ak-gate-box .gate-vorteile li::before { content: "✓"; position: absolute; left: 2px; font-weight: 800; color: var(--ak-akzent); }
.ak-gate-box .gate-aktionen { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* Gäste: Chips zu gesperrten Abschnitten dezent, „Alle öffnen" ausblenden (führt ins Leere) */
html.ak-gast body[data-ak-gate] .sn-chip:not(:first-child) { opacity: .5; }
html.ak-gast body[data-ak-gate] .sn-alle { display: none; }
/* Track-Karten: „Gratis-Konto"-Badge nur für Gäste */
.karte-konto {
  font-size: .7rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  padding: 3px 8px; border-radius: 99px;
  color: var(--ak-akzent); background: color-mix(in srgb, var(--ak-akzent) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--ak-akzent) 25%, transparent);
}
html:not(.ak-gast) .karte-konto { display: none; }
@media (max-width: 700px) {
  html.ak-gast .ak-gate-box { padding: 20px 14px 18px; border-radius: 16px; }
  .ak-gate-box .gate-aktionen { flex-direction: column; }
  .ak-gate-box .gate-aktionen .ak-btn { width: 100%; }
}