/* ==========================================================================
   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; }
.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: .78rem; 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-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 ---------- */
/* 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: .82rem; }
.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-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- Quizze & Tab-Fuß ---------- */
.kp-quizzes { display: grid; gap: 1.5rem; }
.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-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; }
.kp-selbst-wahl { flex-wrap: wrap; }

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

@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); }
}