/* ============================================
   Scroll-Dramaturgie der Startseite (assets/story.js)
   Rhythmus: hell (Spannung) -> Karten (Stimmen) -> dunkel (Wendepunkt)
   ... -> hell (alte Rechnung faellt) -> CTA
   ============================================ */
:root {
  --story-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --story-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* ---------- Ueberschriften: steigen unscharf auf, zweite Zeile folgt ---------- */
.reveal .section-head h2,
.vc-head.reveal h2 {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .8s var(--story-ease), filter .8s var(--story-ease), transform .45s var(--story-ease);
}
.reveal .section-head h2 em,
.vc-head.reveal h2 em {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.2em);
  transition: opacity .8s var(--story-ease) .25s, transform .45s var(--story-ease) .25s;
}
.reveal.seen .section-head h2,
.vc-head.reveal.seen h2 { opacity: 1; filter: none; transform: none; }
.reveal.seen .section-head h2 em,
.vc-head.reveal.seen h2 em { opacity: 1; transform: none; }

/* ---------- gemeinsame Buehne ---------- */
.gs, .st, .eq { position: relative; }
.gs-sticky, .st-sticky, .eq-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
}
.gs-stage, .st-stage, .eq-stage { width: 100%; padding-top: 64px; }

/* ============ 02 · Marktlage ============ */
.gs { height: 200vh; background: var(--paper); border-bottom: 1px solid var(--rule); }
.gs-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(34px, min(5.6vw, 8.4vh), 84px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 clamp(28px, 5vh, 56px);
  text-wrap: balance;
}
.gs-t1, .gs-t2 { display: block; }
.gs-t2 {
  font-style: italic;
  color: var(--accent);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--story-ease), filter .7s var(--story-ease), transform .9s var(--story-ease);
}
.gs.is-turn .gs-t2 { opacity: 1; filter: none; transform: none; }

.gs-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 6vw, 96px);
  padding-top: clamp(24px, 4vh, 40px);
  border-top: 1px solid var(--rule);
}
.gs-stat { transition: opacity .6s var(--story-ease); }
.gs-stat-a { opacity: calc(0.25 + var(--a, 1) * 0.75); }
.gs.is-dim .gs-stat-a { opacity: 0.42; }
.gs-stat-b { opacity: calc(0.12 + var(--b, 1) * 0.88); }
.gs-num {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(60px, min(11vw, 16vh), 168px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.gs-num small { font-size: 0.4em; letter-spacing: 0; margin-left: 4px; color: var(--ash); }
.gs-stat-b .gs-num { color: var(--accent); font-style: italic; }
.gs-bar {
  position: relative;
  height: 6px;
  margin-top: clamp(16px, 3vh, 28px);
  background: var(--rule);
  border-radius: 99px;
}
.gs-bar > span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  border-radius: inherit;
  background: var(--ink);
  transform-origin: left;
  transform: scaleX(calc(var(--a, 1) * 0.95));
}
.gs-stat-b .gs-bar > span { background: var(--accent); transform: scaleX(calc(var(--b, 1) * 0.03)); }
/* Die Luecke zwischen 3 und 95: schraffiert, waechst nach dem zweiten Wert */
.gs-hole {
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: 3%;
  width: 92%;
  border-radius: 99px;
  border: 1px dashed color-mix(in oklab, var(--accent) 70%, transparent);
  background: repeating-linear-gradient(-45deg, var(--accent-tint2) 0 6px, transparent 6px 12px);
  transform-origin: left;
  transform: scaleX(var(--gap, 1));
  opacity: var(--gap, 1);
}
.gs-hole b {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-deep);
  white-space: nowrap;
}
.gs-stat p {
  margin: clamp(14px, 2.4vh, 22px) 0 0;
  font-size: clamp(15px, min(1.4vw, 2.3vh), 20px);
  line-height: 1.4;
  color: var(--quill);
  max-width: 24ch;
}
.gs-line {
  margin: clamp(32px, 6vh, 64px) 0 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(20px, min(2.6vw, 4vh), 36px);
  line-height: 1.25;
  color: var(--ink);
  max-width: 36ch;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .8s var(--story-ease), filter .8s var(--story-ease), transform .45s var(--story-ease);
}
.gs-line em { font-style: italic; color: var(--accent); }
.gs.is-line .gs-line { opacity: 1; filter: none; transform: none; }

/* ============ Stimmen: gestapelte Karten ============ */
.vc { padding-bottom: 40px; }
.vc-head {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 48px;
}
.vc-head h2 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.028em;
  color: var(--ink);
  margin: 0;
}
.vc-head h2 em { font-style: italic; color: var(--accent); }
.vc-stack { list-style: none; margin: 0; padding: 0 0 8vh; }
.vc-card {
  --stick: calc(96px + var(--i) * 22px);
  position: sticky;
  top: var(--stick);
  min-height: min(40vh, 340px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(28px, 4vw, 56px);
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: 28px;
  box-shadow: 0 30px 60px -40px rgba(20, 16, 10, 0.35);
  transform-origin: 50% 0;
  transform: scale(calc(1 - var(--cover, 0) * 0.02));
  will-change: transform;
}
.vc-card + .vc-card { margin-top: 16vh; }
.vc-card:nth-child(even) { background: var(--paper-2); }
.vc-card:last-child { background: var(--ink); border-color: var(--ink); }
.vc-card:last-child blockquote { color: var(--paper); }
.vc-card:last-child .vc-tag { color: var(--vellum); border-color: rgba(255,255,255,.14); }
.vc-n {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--accent);
  font-weight: 500;
}
.vc-card blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-style: italic;
  font-size: clamp(26px, 3.2vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 22ch;
  text-wrap: balance;
}
.vc-tag {
  align-self: flex-start;
  font-size: 14px;
  color: var(--ash);
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  min-width: 220px;
}

/* ============ Wendepunkt: dunkler Satz ============ */
.st { height: 260vh; background: var(--ink); color: var(--paper); }
.st-sticky { background: var(--ink); }
.st-kicker {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(24px, 4vh, 40px);
  font-size: 11px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--accent-soft);
  font-weight: 500;
}
.st-kicker .rule { width: 36px; height: 1px; background: var(--accent-soft); }
.st-text {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(34px, 5.4vw, 82px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 20ch;
}
.st-w {
  display: inline-block;
  color: #F6F2EB;
  opacity: clamp(0.14, calc(var(--w, 999) - var(--i)), 1);
  transform: translateY(calc((1 - clamp(0, var(--w, 999) - var(--i), 1)) * 0.12em));
}
.st-w.acc { font-style: italic; color: var(--accent-soft); }
.st-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: clamp(32px, 6vh, 56px);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--story-ease), transform .9s var(--story-ease);
}
.st.is-done .st-cta { opacity: 1; transform: none; }
.st .st-btn { background: #F6F2EB; color: #0E0E0E; }
.st .st-btn:hover { background: #fff; }
.st .st-btn .btn-icon { background: rgba(0,0,0,.08); }
.st-note { font-size: 15px; color: #BDB5A8; }

/* ============ Die alte Rechnung ============ */
.eq { height: 280vh; background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.eq-stage { display: grid; }
.eq-group, .eq-close { grid-area: 1 / 1; align-self: center; }
.eq-group { transition: opacity .7s var(--story-ease), filter .7s var(--story-ease), transform .8s var(--story-ease); }
.eq.is-out .eq-group { opacity: 0; transform: translateY(-12px); }
.eq-kicker {
  margin: 0 0 clamp(20px, 4vh, 40px);
  font-size: 12px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 500;
}
.eq-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(8px, 2vh, 18px); }
.eq-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .35em;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(32px, 5.2vw, 78px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .62s var(--story-ease), filter .62s var(--story-ease), transform .7s var(--story-ease);
}
.eq-line.is-in { opacity: 1; filter: none; transform: none; }
.eq-line .ar { color: var(--accent); }
.eq-line .v { position: relative; font-style: italic; transition: color .46s var(--story-ease); }
.eq-line .v::after {
  content: "";
  position: absolute;
  left: -0.04em;
  top: 54%;
  height: 0.06em;
  width: 0;
  background: var(--accent);
  transition: width .46s var(--story-ease);
}
.eq-line.is-struck .v { color: var(--bone); }
.eq-line.is-struck .v::after { width: calc(100% + 0.08em); }
.eq-close {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .7s var(--story-ease), transform .8s var(--story-ease);
}
.eq.is-close .eq-close { opacity: 1; filter: none; transform: none; }
.eq-close h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(40px, 6.4vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--ink);
  max-width: 14ch;
}
.eq-close h2 em { font-style: italic; color: var(--accent); }
.eq-close p {
  margin: clamp(20px, 4vh, 32px) 0 0;
  max-width: 46ch;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--quill);
}

/* ============ Mobil ============ */
@media (max-width: 760px) {
  .gs { height: 200vh; }
  .gs-stats { grid-template-columns: 1fr; gap: 22px; }
  .gs-num { font-size: clamp(60px, 19vw, 96px); }
  .gs-stat p { margin-top: 10px; font-size: 15px; }
  .gs-hole b { font-size: 10px; }
  .gs-line { margin-top: 26px; font-size: 21px; }
  .gs-stage, .st-stage, .eq-stage { padding-top: 56px; }
  .vc-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; }
  .vc-card { --stick: calc(84px + var(--i) * 14px); min-height: 50vh; border-radius: 22px; }
  .vc-card + .vc-card { margin-top: 14vh; }
  .vc-tag { min-width: 0; }
  .st-br { display: none; }
  .st-text { font-size: clamp(32px, 9vw, 44px); }
}
@media (max-width: 760px) and (max-height: 720px) {
  .gs-title { font-size: 30px; margin-bottom: 16px; }
  .gs-num { font-size: 56px; }
  .gs-stats { gap: 14px; padding-top: 16px; }
  .gs-line { margin-top: 16px; font-size: 18px; }
}
@media (max-height: 700px) and (min-width: 761px) {
  .gs-title { font-size: clamp(34px, 4.4vw, 60px); margin-bottom: 20px; }
  .gs-num { font-size: clamp(64px, 8vw, 112px); }
  .gs-line { margin-top: 24px; }
}

/* ============ Ohne Bewegung: Endzustand, nichts gepinnt ============ */
.gs.is-still, .st.is-still, .eq.is-still { height: auto; }
.is-still .gs-sticky, .is-still .st-sticky, .is-still .eq-sticky { position: static; height: auto; padding: 96px 0; }
.eq.is-still .eq-stage { gap: 64px; }
.eq.is-still .eq-group, .eq.is-still .eq-close { grid-area: auto; }
.eq.is-still .eq-line, .eq.is-still .eq-close { opacity: 1; filter: none; transform: none; }
.eq.is-still .eq-line .v { color: var(--bone); }
.eq.is-still .eq-line .v::after { width: calc(100% + 0.08em); }
.vc.is-still .vc-card { position: relative; top: auto; transform: none; filter: none; }
.vc.is-still .vc-card + .vc-card { margin-top: 20px; }
@media (prefers-reduced-motion: reduce) {
  .reveal .section-head h2, .reveal .section-head h2 em,
  .vc-head.reveal h2, .vc-head.reveal h2 em { opacity: 1; filter: none; transform: none; transition: none; }
}

/* =====================================================================
   Choreografie der Unterseiten (assets/story.js · initChoreo)
   Teile eines Abschnitts kommen nacheinander statt alle auf einmal.
   Bewusst ueber "translate"/"scale" statt "transform", damit Hover-
   Transforms der Karten nicht ueberschrieben werden.
   ===================================================================== */

/* Weniger Kleinkram ueber den Ueberschriften: kein "01 — Label" mehr */
.section-num,
.fcta-copy > .eyebrow,
.section .container-narrow > div > .eyebrow { display: none !important; }

.ch {
  opacity: 0;
  transition:
    opacity .75s var(--story-ease) var(--chd, 0ms),
    translate 1s var(--story-ease) var(--chd, 0ms),
    scale 1s var(--story-ease) var(--chd, 0ms),
    filter .8s var(--story-ease) var(--chd, 0ms);
}
.ch[data-ch="rise"]  { translate: 0 40px; filter: blur(6px); }
.ch[data-ch="soft"]  { translate: 0 14px; }
.ch[data-ch="left"]  { translate: -56px 0; filter: blur(6px); }
.ch[data-ch="right"] { translate: 56px 0; filter: blur(6px); }
.ch[data-ch="scale"] { scale: .9; filter: blur(8px); }
.ch[data-ch="pop"]   { scale: .7; transition-timing-function: var(--story-spring); }
.ch.ch-in { opacity: 1; translate: none; scale: none; filter: none; }

/* Ueberschrift -> Einleitung: die Einleitung folgt, sobald die Zeile steht */
.reveal .section-head .section-lede.ch { --chd: 380ms !important; }

/* ---------- Fokus in langen Listen ----------
   Nur der Eintrag auf Lesehoehe ist voll da, der Rest tritt zurueck.
   Erledigte Schritte bleiben etwas praesenter als kommende. */
@media (min-width: 900px) and (hover: hover) {
  .has-focus > * { transition: opacity .6s var(--story-ease), filter .6s var(--story-ease); }
  .has-focus > :not(.is-now):not(.is-past) { opacity: .34; }
  .has-focus > :hover { opacity: 1; }
}

/* ---------- Programme: der Weg fuellt sich beim Scrollen ---------- */
.pg-step-dot { transition: background .5s var(--story-ease), border-color .5s var(--story-ease), color .5s var(--story-ease), scale .5s var(--story-spring); }
.pg-step-line { position: relative; overflow: hidden; }
.pg-step-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform .9s var(--story-ease);
}
.pg-step.is-past .pg-step-line::after { transform: none; }
.pg-step.is-now .pg-step-dot,
.pg-step.is-past .pg-step-dot { background: var(--accent); border-color: var(--accent); }
.pg-step.is-now .pg-step-dot { scale: 1.12; box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent) 16%, transparent); }
.pg-step.is-now .pg-step-card { border-color: color-mix(in oklab, var(--accent) 45%, var(--rule)); box-shadow: 0 30px 70px -40px rgba(20, 16, 10, 0.28); }
.pg-step.featured.is-now .pg-step-card { border-color: var(--ink); }

/* Programme-Auftakt: die alte Rechnung mit ruhiger Einleitungszeile */
.eq-lead {
  margin: 0 0 clamp(18px, 3vh, 32px);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--ash);
  animation: eqLeadIn .9s var(--story-ease) both;
}
@keyframes eqLeadIn { from { opacity: 0; translate: 0 10px; } }
.eq-open .eq-line:first-child { transition-delay: .25s; }
.eq-open .eq-line:first-child .v::after { transition-duration: .7s; }

/* Tarife: die hervorgehobene Karte kommt zuletzt und landet etwas hoeher */
.tier-grid > .tier.featured.ch { --chd: 260ms !important; }
.tier-grid > .tier.featured.ch[data-ch="rise"] { translate: 0 72px; scale: .96; }

@media (prefers-reduced-motion: reduce) {
  .ch { opacity: 1 !important; translate: none !important; scale: none !important; filter: none !important; transition: none !important; }
  .has-focus > * { opacity: 1 !important; }
}

/* Quellenangabe unter der Marktlage */
.gs-src {
  margin: clamp(18px, 3vh, 28px) 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ash);
  opacity: 0;
  transition: opacity .8s var(--story-ease);
}
.gs.is-line .gs-src, .gs.is-still .gs-src { opacity: 1; }
.gs-src a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.gs-src a:hover { color: var(--ink); }