/* =====================================================================
   spez.css: Spezialisierungen (Hub und Vertiefungsseiten).
   Ergaenzt stil.min.css, ueberschreibt dort nichts Globales. Alle
   Klassen beginnen mit spez- oder haengen an .erzaehlung.

   Grundsatz: Ohne JavaScript steht alles da. Die Buehne zeigt dann ihre
   vier Ebenen als Uebersicht (2 x 2), die Kapitel stehen als Liste.
   Erst spez.js setzt html.spez-an (nur breit, nur ohne reduzierte
   Bewegung), dann wird die Buehne angeheftet und blendet um.
   ===================================================================== */

/* ---------- Seitenkopf ------------------------------------------------- */
.spez-kopf h1 em { font-style: italic; color: var(--cyan); }
.spez-kopf .spez-belege {
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
  margin-top: 1.4rem; font-size: .95rem; color: var(--auf-nacht-still);
}
.spez-kopf .spez-belege b { color: var(--auf-nacht); font-weight: 600; }
.spez-kopf .spez-belege a { color: var(--auf-nacht); display: inline-flex; align-items: center; min-height: 2.75rem; }
.spez-tun { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }

/* ---------- Erzaehlung: Buehne und Kapitel ----------------------------- */
.erzaehlung {
  display: grid; gap: 2.5rem;
  padding-block: clamp(1rem, 3vw, 2rem) var(--luft);
}
.buehne { min-width: 0; }
.buehne-rahmen {
  border: 1px solid var(--nacht-linie);
  background: var(--nacht-2);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 60px -40px rgba(41, 89, 196, .7);
}
.buehne-leiste {
  display: flex; align-items: center; gap: .35rem;
  padding: .6rem .85rem;
  border-bottom: 1px solid var(--nacht-linie);
  background: rgba(255, 255, 255, .03);
}
.buehne-leiste i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--feld-linie); flex: 0 0 auto; }
.buehne-leiste em {
  font: 500 .74rem/1 var(--schrift); font-style: normal;
  color: var(--auf-nacht-still); margin-left: .5rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.buehne-fortschritt { display: none; height: 2px; background: var(--nacht-linie); }
.buehne-fortschritt i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--koenig), var(--cyan));
  transform: scaleX(0); transform-origin: left center;
}

/* Ohne JS: Uebersicht aller vier Ebenen */
.ebenen { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--nacht-linie); }
@media (max-width: 22rem) { .ebenen { grid-template-columns: 1fr; } }
.ebene {
  background: var(--nacht-2);
  padding: .95rem .9rem 1.1rem;
  display: flex; flex-direction: column; gap: .55rem;
  min-width: 0;
}
.ebene-nr { font: 600 .7rem/1 var(--schrift); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.ebene-titel { font-family: var(--anzeige); font-size: 1.15rem; line-height: 1.1; color: var(--auf-nacht); }

/* Bausteine in den Ebenen (alle dekorativ, aria-hidden auf der Buehne) */
.spez-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.spez-chips span {
  font: 500 .74rem/1.2 var(--schrift); color: var(--auf-nacht);
  border: 1px solid var(--feld-linie); border-radius: 999px; padding: .32rem .6rem;
}
.spez-chips span b { color: var(--cyan); font-weight: 600; }
.spez-bildchen { border: 1px solid var(--nacht-linie); overflow: hidden; background: var(--nacht); }
.spez-bildchen img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.spez-bildchen small { display: block; padding: .4rem .55rem; font-size: .72rem; color: var(--auf-nacht-still); }
.spez-leiter { display: grid; gap: .32rem; }
.spez-leiter div { display: grid; grid-template-columns: 4.6rem 1fr; align-items: center; gap: .5rem; font-size: .76rem; color: var(--auf-nacht-still); }
.spez-leiter b { font: 600 .8rem/1 var(--schrift); color: var(--auf-nacht); font-variant-numeric: tabular-nums; }
.spez-leiter i { display: block; height: .42rem; background: linear-gradient(90deg, var(--koenig), var(--cyan)); border-radius: 2px; }
.spez-status { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.spez-status li {
  display: flex; align-items: center; gap: .5rem;
  font-size: .78rem; color: var(--auf-nacht);
  border: 1px solid var(--nacht-linie); padding: .42rem .55rem; background: var(--nacht);
}
.spez-status li::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%; flex: 0 0 auto;
  background: var(--cyan); box-shadow: 0 0 0 3px rgba(108, 231, 250, .18);
}
.spez-maske { display: grid; gap: .4rem; }
.spez-maske span {
  display: flex; justify-content: space-between; gap: .5rem;
  font-size: .76rem; color: var(--auf-nacht-still);
  border-bottom: 1px solid var(--feld-linie); padding: .3rem 0;
}
.spez-maske span b { color: var(--auf-nacht); font-weight: 500; }
.spez-maske .spez-knopf {
  justify-content: center; border: 0; margin-top: .3rem; padding: .5rem;
  background: linear-gradient(96deg, #35B6E6 0%, #6CE7FA 100%); color: #041018; font-weight: 600;
}
.spez-suche {
  border: 1px solid var(--feld-linie); border-radius: 999px;
  padding: .4rem .75rem; font-size: .78rem; color: var(--auf-nacht);
}
.spez-treffer { display: grid; gap: .2rem; padding: .5rem .55rem; border: 1px solid var(--nacht-linie); background: var(--nacht); }
.spez-treffer b { font-size: .82rem; color: var(--auf-nacht); font-weight: 600; }
.spez-treffer span { font-size: .72rem; color: var(--auf-nacht-still); }

/* Kapitel */
.kapitel-liste { display: grid; gap: 1.6rem; min-width: 0; }
.kapitel {
  border-left: 2px solid var(--nacht-linie);
  padding: .2rem 0 .2rem 1.25rem;
  transition: border-color .4s ease;
}
.kapitel .nr { display: block; font: 600 .76rem/1 var(--schrift); letter-spacing: .15em; color: var(--cyan); margin-bottom: .7rem; }
.kapitel h2, .kapitel h3 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem); margin-bottom: .75rem; color: var(--auf-nacht); }
.kapitel p { color: var(--auf-nacht-still); max-width: 34rem; transition: color .4s ease; }
.kapitel p + p { margin-top: .7rem; }
.kapitel ul { margin: .8rem 0 0; padding: 0; list-style: none; display: grid; gap: .4rem; color: var(--auf-nacht-still); max-width: 34rem; }
.kapitel li { padding-left: 1.1rem; position: relative; }
.kapitel li::before { content: "/"; position: absolute; left: 0; color: var(--cyan); }

@media (min-width: 60rem) {
  .erzaehlung { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(3rem, 6vw, 5.5rem); align-items: start; }
  .buehne { order: 2; position: sticky; top: max(9.5rem, calc(50vh - 15rem)); }
  .kapitel-liste { order: 1; }

  html.spez-an .buehne-fortschritt { display: block; }
  html.spez-an .ebenen { display: block; position: relative; height: clamp(21rem, 56vh, 30rem); background: var(--nacht-2); }
  html.spez-an .ebene {
    position: absolute; inset: 0;
    padding: clamp(1.6rem, 3vw, 2.8rem);
    justify-content: center; gap: 1.1rem;
    opacity: 0; visibility: hidden;
  }
  html.spez-an .ebene.ist-aktiv { opacity: 1; visibility: visible; }
  html.spez-an .ebene-titel { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); }
  html.spez-an .spez-chips span { font-size: .86rem; padding: .45rem .8rem; }
  html.spez-an .spez-leiter div { font-size: .86rem; grid-template-columns: 5.6rem 1fr; }
  html.spez-an .spez-leiter b { font-size: .95rem; }
  html.spez-an .spez-leiter i { height: .6rem; }
  html.spez-an .spez-status li, html.spez-an .spez-maske span { font-size: .9rem; }
  html.spez-an .spez-bildchen img { aspect-ratio: 16 / 9; }

  html.spez-an .kapitel-liste { gap: 0; }
  html.spez-an .kapitel { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; }
  html.spez-an .kapitel:first-child { min-height: 62vh; justify-content: flex-start; padding-top: 2rem; }
  html.spez-an .kapitel.ist-aktiv { border-left-color: var(--cyan); }
  html.spez-an .kapitel.ist-aktiv p, html.spez-an .kapitel.ist-aktiv ul { color: var(--auf-nacht); }
}

/* ---------- Karten im Hub --------------------------------------------- */
.spez-gitter { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .spez-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .spez-gitter { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.spez-karte { display: flex; flex-direction: column; min-width: 0; }
.spez-karte .fenster img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.spez-karte .spez-symbol {
  display: flex; align-items: center; justify-content: center;
  margin: .9rem 1.4rem 0; height: 7.2rem;
  border: 1px solid var(--nacht-linie);
  background: linear-gradient(150deg, var(--ton, var(--koenig)) 0%, transparent 78%);
}
.spez-karte .spez-symbol svg { width: 3rem; height: 3rem; stroke: var(--auf-nacht); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.spez-karte .in { flex: 1; display: flex; flex-direction: column; gap: .55rem; }
.spez-karte h3 { font-size: 1.55rem; color: var(--auf-nacht); }
.spez-karte .nutzen { font-size: .97rem; color: var(--auf-nacht-still); }
.spez-karte .anker { margin-top: .2rem; font-size: .95rem; color: var(--auf-nacht); }
.spez-karte .anker b { font-weight: 600; }
.spez-karte .zur-demo { font-size: .92rem; display: inline-flex; align-items: center; min-height: 2.75rem; }
.spez-karte .taste { margin-top: auto; align-self: stretch; }
.spez-karte .vertieft {
  align-self: flex-start;
  font: 600 .68rem/1 var(--schrift); letter-spacing: .14em; text-transform: uppercase;
  color: #041018; background: var(--cyan); padding: .35rem .55rem; border-radius: 2px;
}

/* ---------- Bewertung ------------------------------------------------- */
.spez-bewertung {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem;
  border: 1px solid var(--papier-linie); background: var(--papier-2);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.spez-bewertung .wert-zahl { font-family: var(--anzeige); font-size: clamp(3rem, 2rem + 4vw, 4.6rem); line-height: 1; color: var(--tinte); }
.spez-bewertung .sterne { color: var(--akzent-text); font-size: 1.2rem; letter-spacing: .12em; }
.spez-bewertung p { color: var(--auf-papier-still); max-width: 32rem; }
.spez-bewertung p b { color: var(--tinte); }
.spez-bewertung a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* ---------- Preise auf Vertiefungsseiten ------------------------------ */
/* Kontextunabhaengig eingefaerbt (Falle 7a in CLAUDE.md): die Karten
   stehen ohnehin in teil--hell, die Farben sind hier trotzdem gesetzt. */
.spez-preise .paket { color: var(--tinte); }
.spez-preise .paket--stern { color: var(--auf-nacht); }
@media (min-width: 58rem) { .spez-preise .preise { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.spez-zusatz { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 46rem) { .spez-zusatz { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.spez-zusatz div { border: 1px solid var(--papier-linie); padding: 1.2rem 1.25rem; background: var(--papier); color: var(--tinte); }
.spez-zusatz h3 { font-size: 1.35rem; margin-bottom: .45rem; color: var(--tinte); }
.spez-zusatz p { color: var(--auf-papier-still); font-size: .95rem; }
.spez-zusatz b { color: var(--tinte); }
.spez-zusatz a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* ---------- Demo-Block auf Vertiefungsseiten -------------------------- */
.spez-demo { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 58rem) { .spez-demo { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.spez-demo .demo { max-width: 40rem; }
.spez-demo .fenster img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.spez-demo ul { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: .55rem; color: var(--auf-nacht-still); }
.spez-demo li { padding-left: 1.2rem; position: relative; }
.spez-demo li::before { content: "/"; position: absolute; left: 0; color: var(--cyan); }
.spez-demo li b { color: var(--auf-nacht); font-weight: 600; }

/* ---------- Bewegung reduziert ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .kapitel, .kapitel p { transition: none; }
}