/* ==========================================================================
   Kapitelseite v2 (kp-*). Nur Tokens aus ui-base.css.
   ========================================================================== */
.kp-page { padding-block: 1rem 3rem; }

/* ---------- Kapitelkopf ---------- */
.kp-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: center;
  padding: 1.25rem;
  background: var(--ui-card);
  border: 2px solid var(--ui-line);
  border-radius: var(--ui-r-card);
  box-shadow: var(--ui-shadow-card);
  animation: ui-pop-in .5s var(--ui-spring) both;
}
.kp-hero-art {
  display: grid;
  place-items: center;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 38% 62% 55% 45% / 45% 40% 60% 55%;
  background: linear-gradient(135deg, var(--ui-sun), var(--ui-orange));
  box-shadow: 0 6px 0 var(--ui-orange-deep);
  font-size: 3.2rem;
  line-height: 1;
  animation: ui-float 4s ease-in-out infinite;
}
.kp-hero-body { display: grid; gap: .45rem; min-width: 0; }
.kp-hero-body > * { margin: 0; }
.kp-title { margin: 0; font: 800 clamp(1.7rem, 4.5vw, 2.3rem)/1.1 var(--ui-font-display); color: var(--ui-ink); text-wrap: balance; }
.kp-hero-progress { display: grid; gap: .3rem; max-width: 26rem; }
.kp-hero-progress small { color: var(--ui-ink-soft); font-weight: 700; font-size: .875rem; }
.kp-done {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  padding: .7rem 1rem;
  border-radius: 14px;
  background: var(--ui-mint-soft);
  color: var(--ui-mint-deep);
  font: 800 1.1rem var(--ui-font-display);
  animation: ui-pop-in .5s var(--ui-spring) .2s both;
}
@media (max-width: 560px) {
  .kp-hero { grid-template-columns: 1fr; justify-items: start; }
  .kp-hero-art { width: 4.8rem; height: 4.8rem; font-size: 2.4rem; }
}

/* ---------- Lernpfad ---------- */
.kp-path-wrap { overflow-x: auto; margin: 0 -.25rem; padding: .25rem .25rem .5rem; scrollbar-width: thin; }
.kp-path {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(14rem, 1fr);
  gap: var(--ui-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.kp-path-item { position: relative; display: grid; min-width: 0; }
.kp-path-item + .kp-path-item::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 50%;
  width: calc(100% + var(--ui-gap));
  height: .45rem;
  border-radius: var(--ui-r-pill);
  background: var(--ui-line);
  transform: translateY(-50%);
}
.kp-path-item.is-done + .kp-path-item::before { background: var(--ui-mint); }
.kp-path-item.is-open + .kp-path-item::before { background: var(--ui-line-deep); }
.kp-path-item.just-unlocked::before { background: var(--ui-mint); animation: ui-fill-line .8s var(--ui-ease-out); }
.kp-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  column-gap: calc(var(--ui-gap) * .65);
  row-gap: calc(var(--ui-gap) * .2);
  width: 100%;
  padding: calc(var(--ui-gap) * .6);
  border: 0;
  border-radius: var(--ui-r-panel);
  background: var(--ui-card);
  color: var(--ui-ink);
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.kp-step-dot {
  display: grid;
  grid-row: 1 / 3;
  place-items: center;
  width: 3.3rem;
  height: 3.3rem;
  border-radius: 50%;
  background: var(--ui-card);
  border: 3px solid var(--ui-line-deep);
  box-shadow: 0 5px 0 var(--ui-line-deep);
  font: 800 1.3rem var(--ui-font-display);
  transition: transform .15s, box-shadow .15s;
}
.kp-step:active .kp-step-dot { transform: translateY(3px); box-shadow: 0 2px 0 var(--ui-line-deep); }
.kp-step-name {
  min-width: 0;
  max-height: 2.4em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  font: 800 .95rem/1.2 var(--ui-font-display);
}
.kp-step-state { font-size: .875rem; font-weight: 700; color: var(--ui-ink-soft); }
.is-done .kp-step-dot { background: var(--ui-mint); border-color: var(--ui-mint-deep); box-shadow: 0 5px 0 var(--ui-mint-deep); color: #fff; }
.is-current .kp-step-dot { background: var(--ui-brand); border-color: var(--ui-brand-deep); box-shadow: 0 5px 0 var(--ui-brand-deep); color: #fff; --ui-accent: var(--ui-brand); --ui-accent-deep: var(--ui-brand-deep); animation: ui-halo 2s ease-out infinite; }
.is-open .kp-step-dot { border-color: var(--ui-brand); color: var(--ui-brand-deep); }
.is-locked .kp-step { cursor: not-allowed; }
.is-locked .kp-step-dot { background: var(--ui-paper); color: var(--ui-ink-soft); }
.is-locked .kp-step-name { color: var(--ui-ink-soft); }
.is-viewing .kp-step-dot { outline: 4px solid color-mix(in srgb, var(--ui-brand) 25%, transparent); outline-offset: 3px; }
.is-viewing .kp-step-name { color: var(--ui-brand-deep); }
.kp-path-item.is-wiggle .kp-step-dot { animation: ui-shake .45s ease; }
.kp-path-item.unlock-anim .kp-step-dot { animation: ui-unlock .9s var(--ui-spring); }
@media (min-width: 744px) {
  .kp-step-dot { width: 3.8rem; height: 3.8rem; }
}

/* ---------- Tab-Panel ---------- */
.kp-tab { display: grid; gap: 1.25rem; }
.kp-tab.is-in { animation: ui-slide-in .4s var(--ui-ease-out); }
.kp-split { display: grid; gap: 1.25rem; align-items: start; }
.kp-content .ui-card-head { margin-bottom: .9rem; }
.kp-quiz-hinweis {
  display: inline-flex;
  justify-self: start;
  width: fit-content;
  align-items: center;
  gap: .4rem;
  min-height: 2.75rem;
  margin-bottom: .9rem;
  padding: .35rem .95rem;
  border-radius: var(--ui-r-pill);
  border: 2px solid color-mix(in srgb, var(--ui-sun) 55%, transparent);
  background: var(--ui-sun-soft);
  color: var(--ui-ink);
  font-weight: 800;
  font-size: .95rem;
  text-decoration: none;
}
.kp-texts { display: grid; gap: 1rem; }
.kp-texts > .is-in { animation: ui-rise .35s var(--ui-ease-out); }
.kp-lang { flex: none; }
.kp-translation { display: grid; gap: .6rem; padding: 1rem; border-radius: var(--ui-r-panel); background: var(--ui-paper); border: 2px dashed var(--ui-line-deep); }
.kp-translation-label { margin: 0; font: 800 1rem var(--ui-font-display); color: var(--ui-ink-soft); }
.kp-text-hint { margin: 0; }

/* ---------- Material ---------- */
.kp-materialordner-inhalt { padding: var(--ui-gap-lg); }
.kp-materialordner-gruppen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--ui-gap-lg); align-items: start; }
/* Unter dem Infotext statt daneben; Dateien und Lernspiele teilen sich auf breiten Bildschirmen die Zeile. */
.kp-materials { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; }
.kp-mat { display: grid; gap: .6rem; padding: 1rem; border-radius: var(--ui-r-panel); border: 2px solid var(--ui-line); background: var(--ui-card); box-shadow: 0 6px 0 var(--ui-line); }
.kp-mat-title { display: flex; align-items: center; gap: .45rem; margin: 0; font: 800 1.1rem var(--ui-font-display); color: var(--ui-ink); }
.kp-mat-link {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 3.2rem;
  padding: .55rem .8rem;
  border-radius: 14px;
  background: var(--ui-paper);
  border: 2px solid var(--ui-line);
  box-shadow: 0 4px 0 var(--ui-line);
  color: var(--ui-ink);
  font-weight: 800;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: transform .12s, box-shadow .12s, border-color .15s;
}
.kp-mat-link:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ui-line-deep); }
.kp-mat-link small { display: block; color: var(--ui-ink-soft); font-weight: 700; font-size: .875rem; }
.kp-mat-icon { display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 12px; font-size: 1.3rem; background: var(--ui-brand-soft); }
.kp-mat-icon--pdf { background: var(--ui-coral-soft); }
.kp-mat-icon--game { background: var(--ui-grape-soft); }
.kp-mat-icon--link { background: var(--ui-sun-soft); }
.kp-mat-icon--video { background: var(--ui-mint-soft); }

/* ---------- Freischalt-Hinweis ---------- */
.kp-gate {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .9rem;
  align-items: center;
  padding: .9rem 1.1rem;
  border-radius: var(--ui-r-panel);
  background: var(--ui-grape-soft);
  border: 2px solid color-mix(in srgb, var(--ui-grape) 35%, transparent);
  color: var(--ui-ink);
}
.kp-gate.is-open { background: var(--ui-mint-soft); border-color: var(--ui-mint); }
.kp-gate.is-opening { animation: ui-tada 1s ease; }
.kp-gate-emo { font-size: 2rem; line-height: 1; }
.kp-gate-body { display: grid; gap: .35rem; }
.kp-gate-body p { margin: 0; font-weight: 700; }
.kp-gate-stars { display: flex; flex-wrap: wrap; gap: .3rem; }
.kp-gate-star { font-size: 1.4rem; filter: grayscale(1); opacity: .35; transition: filter .3s, opacity .3s, transform .3s var(--ui-spring); }
.kp-gate-star.is-on { filter: none; opacity: 1; transform: scale(1.15); }
.kp-gate-meter { display: flex; align-items: center; gap: .6rem; }
.kp-gate-meter .ui-meter { flex: 1; max-width: 18rem; }
.kp-gate-meter small { font-size: .875rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- Quizze & Tab-Fuß ---------- */
.kp-quizzes { display: grid; gap: 1.5rem; scroll-margin-top: calc(5rem + env(safe-area-inset-top, 0px)); border-radius: var(--ui-r-card); }
.kp-quizzes:focus { outline: none; }
.kp-quizzes:focus-visible { outline: 3px solid var(--ui-brand); outline-offset: 4px; }
.kp-quiz-slot:empty { display: none; }
.qz-skeleton { padding: 1.25rem; border-radius: var(--ui-r-card); border: 2px solid var(--ui-line); background: var(--ui-card); }
.kp-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.kp-foot-info, .kp-next-kurz { display: none; }
.kp-next .ui-btn[data-kp-unlocked].is-unlocking { animation: ui-tada 1s ease; }
.kp-selbst { display: grid; gap: calc(var(--ui-gap) / 2); justify-items: start; }
.kp-selbst-frage { margin: 0; font-weight: 800; }

/* ---------- Rückmeldekarte am Kapitelende ---------- */
.kp-rueckmeldung { gap: var(--ui-gap); }
.kp-rueckmeldung.is-fertig { background: var(--ui-mint-soft); border-color: var(--ui-mint); }
.kp-rueckmeldung-dank { margin: 0; font: 800 1.1rem var(--ui-font-display); color: var(--ui-mint-deep); }
.kp-wahl { display: grid; gap: .5rem; justify-self: stretch; min-width: 0; margin: 0; padding: 0; border: 0; }
.kp-wahl > legend { margin-bottom: .5rem; padding: 0; }
.kp-wahl-hinweis { display: block; font-size: .875rem; font-weight: 700; color: var(--ui-ink-soft); }
.kp-wahl-optionen { display: flex; flex-wrap: wrap; gap: .5rem; }
.kp-wahl-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.75rem;
  padding: .35rem .9rem;
  border: 2px solid var(--ui-line);
  border-radius: var(--ui-r-pill);
  background: var(--ui-card);
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
}
/* Das Feld liegt unsichtbar über der ganzen Kachel: antippbar, fokussierbar und für required erreichbar. */
.kp-wahl-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.kp-wahl-option:has(input:checked) { border-color: var(--ui-brand); background: var(--ui-brand-soft); color: var(--ui-brand-deep); box-shadow: inset 0 0 0 1px var(--ui-brand); }
.kp-wahl--gefuehl .kp-wahl-optionen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 30rem; }
.kp-wahl--gefuehl .kp-wahl-option { flex-direction: column; justify-content: center; gap: .15rem; padding: .5rem .4rem; border-radius: var(--ui-r-chip); text-align: center; }
.kp-wahl-emo { font-size: 1.6rem; line-height: 1; }
.kp-wahl-option:has(input:focus-visible) { outline: 3px solid var(--ui-brand); outline-offset: 2px; }

/* Rateschutz: Textstelle, zu der ein Quiz nach einer falschen Antwort springt (qz-core.js, zeigeTextstelle). */
.kp-textstelle { border-radius: var(--ui-r-chip); background: var(--ui-sun-soft); box-shadow: 0 0 0 calc(var(--ui-gap) / 3) var(--ui-sun-soft); scroll-margin-block: calc(var(--ui-gap) * 4); }

/* ---------- Schmale Bildschirme: Text und Quiz zuerst, feste Fußleiste ---------- */
@keyframes kp-einblenden { from { opacity: 0; } }
@media (max-width: 700px) {
  .kp-page { padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); }
  /* Material rückt hinter Text und Quizze; Abschluss und Fußleiste bleiben am Ende */
  .kp-page > .kp-materialordner { order: 1; }
  .kp-split { display: contents; }
  .kp-tab .kp-materials { order: 1; }   /* über .kp-split hinweg, das hier keine eigene Box hat */
  .kp-tab > .kp-finish { order: 2; }
  /* transform am Panel würde die feste Fußleiste während der Animation an das Panel binden */
  .kp-tab.is-in { animation-name: kp-einblenden; }

  /* Spezifität über ui-ruhe.css (.kp-finish .kp-foot), das als letztes Stylesheet lädt */
  .kp-page .kp-finish .kp-foot:has(.ui-btn) {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem;
    padding: .6rem 16px calc(.6rem + env(safe-area-inset-bottom, 0px));
    border-top: 2px solid var(--ui-line);
    background: var(--ui-card);
    box-shadow: 0 -12px 24px -20px color-mix(in srgb, var(--ui-ink) 60%, transparent);
  }
  .kp-foot:has(.ui-btn) .kp-foot-info {
    display: block;
    grid-column: 2;
    overflow: hidden;
    color: var(--ui-ink-soft);
    font-size: .875rem;
    font-weight: 700;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .kp-foot:has(.ui-btn) > .kp-next, .kp-foot:has(.ui-btn) > .ui-btn--next, .kp-foot:has(.ui-btn) > .ui-btn--soft { grid-column: 3; }
  .kp-foot .ui-btn { white-space: nowrap; }
  .kp-foot .kp-next-lang { display: none; }
  .kp-foot .kp-next-kurz { display: inline; }
  .kp-foot .ui-btn:disabled .kp-next-pfeil { display: none; }
  /* Rückmeldungen nicht über der Fußleiste */
  body:has(.kp-foot .ui-btn) .ui-toast { bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* SVG-Player (fach/js/svg-player.js): animierte SVG-Bilder mit Pause/Weiter und Neu starten */
.kp-svg-player { display: grid; gap: .5rem; margin-block: var(--ui-gap); }
.ui-prose .kp-svg-player iframe { aspect-ratio: var(--kp-svg-verhaeltnis, 16 / 9); }
.kp-svg-player-leiste { display: flex; flex-wrap: wrap; gap: .5rem; }

@media (hover: hover) {
  .kp-step:hover .kp-step-dot { transform: translateY(-2px); }
  .kp-mat-link:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ui-line-deep); border-color: var(--ui-brand); }
  .kp-quiz-hinweis:hover { border-color: var(--ui-sun-deep); }
  .kp-wahl-option:hover { border-color: var(--ui-brand); }
}