/* /erklaer/ — Scrollytelling-Layout.
   Jede Szene: min-height 100vh, Illustration + Text vertikal gestapelt.
   Kein Scroll-Hijacking: nativer Scroll, IntersectionObserver triggert
   .is-visible-Klasse bei 50%-Coverage.
*/

.v4-erklaer{
  --scene-pad-y: clamp(3rem, 8vh, 6rem);
  --text-max: 60ch;
  max-width:none;
  margin:0;
  padding:0;
}

/* === Intro === */
.v4-sc-intro{
  min-height:85vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--scene-pad-y) 1.25rem;
  background:var(--white);
  border-bottom:1px solid var(--gray-200);
}
.v4-sc-intro-inner{
  max-width:var(--mw-narrow);
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:.8rem;
  align-items:center;
}
.v4-sc-kicker{
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--gray-500);
  font-weight:600;
}
.v4-sc-intro-inner h1{
  font-size:clamp(2.2rem,6vw,4rem);
  line-height:1.08;
  letter-spacing:-.022em;
  max-width:14ch;
}
.v4-sc-intro-lede{
  font-size:var(--fs-lg);
  line-height:1.55;
  color:var(--gray-700);
  max-width:44ch;
}
.v4-sc-intro-hint{
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--gray-400);
  margin-top:2rem;
  animation:v4-hint-bounce 2.2s ease-in-out infinite;
}
@keyframes v4-hint-bounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(4px)}
}

/* === Szenen-Grundgerüst === */
.v4-sc{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--scene-pad-y) 1.25rem;
  scroll-margin-top:60px; /* fürs Keyboard-Scrolling unter der Topbar */
}
.v4-sc:nth-of-type(even){background:var(--gray-50)}
.v4-sc-inner{
  max-width:var(--mw);
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
@media (max-width:820px){
  .v4-sc-inner{grid-template-columns:1fr;gap:2rem}
}
.v4-sc-text{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  max-width:var(--text-max);
}
.v4-sc-n{
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--gray-400);
  font-weight:700;
  letter-spacing:.18em;
}
.v4-sc-text h2{
  font-size:clamp(1.6rem,4vw,2.5rem);
  line-height:1.15;
  letter-spacing:-.02em;
}
.v4-sc-text p{
  font-size:var(--fs-lg);
  line-height:1.6;
  color:var(--gray-800);
}
.v4-sc-text p strong{color:var(--black);font-weight:700}

.v4-sc-illustration{
  position:relative;
  min-height:320px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Unscaled base state: Elemente starten unsichtbar / versetzt.
   Nach .is-visible werden sie eingeblendet. */
.v4-sc:not(.is-visible) .v4-sc-illustration > *{opacity:0}
.v4-sc.is-visible .v4-sc-illustration > *{
  opacity:1;
  transition:opacity .6s ease .1s;
}

/* ===================================================== */
/* SZENE 1 — Das Grundproblem                            */
/* ===================================================== */
.v4-sc-1-value{
  position:relative;
  font-family:var(--font-d);
  display:flex;
  flex-direction:column;
  gap:.3rem;
  align-items:center;
  padding:2rem 3rem;
  border:1px solid var(--gray-200);
  background:var(--white);
}
.v4-sc-1-label{
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--gray-500);
}
.v4-sc-1-number{
  font-size:clamp(2rem,6vw,3.2rem);
  font-weight:700;
  color:var(--black);
  position:relative;
  display:inline-block;
}
.v4-sc-1-note{
  font-size:var(--fs-xs);
  color:var(--gray-500);
  text-transform:uppercase;
  letter-spacing:.12em;
}
.v4-sc:not(.is-visible) .v4-sc-1-number{animation:none}
.v4-sc.is-visible .v4-sc-1-number{
  animation:v4-wiggle 1s ease-in-out 1s 3;
}
.v4-sc-1-strike{
  position:absolute;
  left:10%;right:10%;
  top:50%;
  height:2px;
  background:var(--danger);
  transform-origin:center;
  transform:scaleX(0) rotate(-4deg);
  transition:transform .5s ease-out 2.5s;
}
.v4-sc.is-visible .v4-sc-1-strike{transform:scaleX(1) rotate(-4deg)}
@keyframes v4-wiggle{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-3px) rotate(-1deg)}
  40%{transform:translateX(3px) rotate(1deg)}
  60%{transform:translateX(-2px)}
  80%{transform:translateX(2px)}
}

/* ===================================================== */
/* SZENE 2 — Punktwolke                                  */
/* ===================================================== */
.v4-sc-2-illo{
  width:100%;
  max-width:720px;
}
.v4-sc-2-illo canvas{
  width:100%;
  height:auto;
  display:block;
  background:var(--white);
  border:1px solid var(--gray-200);
}
.v4-sc-2-fallback{
  display:none;
}
/* Reduced-Motion: zeige nur einen statischen Dots-Platzhalter */
@media (prefers-reduced-motion: reduce){
  .v4-sc-2-illo canvas{display:none}
  .v4-sc-2-fallback{
    display:block;
    width:100%;
    aspect-ratio:12/7;
    background:
      radial-gradient(circle at 50% 50%, var(--gray-300) 2px, transparent 3px) 0 0/12px 12px,
      var(--white);
    border:1px solid var(--gray-200);
  }
}

/* ===================================================== */
/* SZENE 3 — Icons um das Modell                         */
/* ===================================================== */
.v4-sc-3-illo{
  position:relative;
  width:100%;
  max-width:520px;
  aspect-ratio:1/1;
}
.v4-sc-3-center{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:140px;height:140px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.v4-sc-3-ring{
  position:absolute;
  inset:0;
  border:1px dashed var(--gray-300);
  border-radius:50%;
}
.v4-sc-3-core{
  font-family:var(--font-d);
  font-size:var(--fs-sm);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  background:var(--black);
  color:var(--white);
  padding:.6rem 1rem;
  z-index:1;
}
.v4-sc-3-icons{
  position:absolute;
  inset:0;
}
.v4-sc-3-icon{
  position:absolute;
  width:110px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.4rem;
  color:var(--gray-700);
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:600;
  transition:transform .5s ease-out, opacity .5s ease-out;
  transition-delay:calc(0.3s + var(--i) * 0.12s);
  opacity:0;
  transform:scale(.5);
}
.v4-sc-3-icon svg{
  width:46px;height:46px;
  padding:.55rem;
  background:var(--white);
  border:1px solid var(--gray-300);
  fill:var(--black);
}
.v4-sc.is-visible .v4-sc-3-icon{opacity:1;transform:scale(1)}
.v4-sc-3-icon:nth-child(1){top:0;      left:50%; transform:translateX(-50%) scale(.5)}
.v4-sc.is-visible .v4-sc-3-icon:nth-child(1){transform:translateX(-50%) scale(1)}
.v4-sc-3-icon:nth-child(2){top:50%;    right:0;  transform:translateY(-50%) scale(.5)}
.v4-sc.is-visible .v4-sc-3-icon:nth-child(2){transform:translateY(-50%) scale(1)}
.v4-sc-3-icon:nth-child(3){bottom:0;   left:50%; transform:translateX(-50%) scale(.5)}
.v4-sc.is-visible .v4-sc-3-icon:nth-child(3){transform:translateX(-50%) scale(1)}
.v4-sc-3-icon:nth-child(4){top:50%;    left:0;   transform:translateY(-50%) scale(.5)}
.v4-sc.is-visible .v4-sc-3-icon:nth-child(4){transform:translateY(-50%) scale(1)}

/* ===================================================== */
/* SZENE 4 — Density-Bar                                 */
/* ===================================================== */
.v4-sc-4-illo{
  width:100%;
  max-width:560px;
}
.v4-sc-4-density{
  position:relative;
  width:100%;
  min-height:260px;
}
/* Density-Bar-Styles kommen aus density-bar.css */

/* ===================================================== */
/* SZENE 5 — Backtest-Scatter                            */
/* ===================================================== */
.v4-sc-5-illo{
  width:100%;
  max-width:640px;
}
.v4-sc-5-scatter{
  position:relative;
  width:100%;
  min-height:300px;
  aspect-ratio:16/10;
  background:var(--white);
  border:1px solid var(--gray-200);
}
.v4-sc-5-fallback{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.3rem;
}
.v4-sc-5-number{
  font-family:var(--font-d);
  font-size:clamp(3rem,6vw,5rem);
  font-weight:700;
  letter-spacing:-.03em;
  color:var(--black);
}
.v4-sc-5-label{
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--gray-500);
  text-align:center;
  max-width:20ch;
}
/* Nach Commit 3 wird der Scatter gerendert, Fallback wird entfernt */

/* === Backtest-Scatter-Styles (Commit 3) === */
.v4-bs-svg{
  width:100%;
  height:auto;
  display:block;
}
.v4-bs-axis{
  font-family:var(--font-d);
  font-size:10px;
  fill:var(--gray-500);
  font-variant-numeric:tabular-nums;
}
.v4-bs-note{
  font-family:var(--font-d);
  font-size:10px;
  fill:var(--gray-600);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.v4-bs-tooltip{
  position:absolute;
  pointer-events:none;
  background:var(--white);
  border:1px solid var(--gray-300);
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  padding:.6rem .8rem;
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  line-height:1.55;
  color:var(--gray-800);
  max-width:260px;
  z-index:10;
  border-radius:2px;
  font-variant-numeric:tabular-nums;
}
.v4-bs-tt-head{
  font-weight:700;
  color:var(--black);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:.15rem;
}
.v4-bs-tt-dim{color:var(--gray-500)}

/* ===================================================== */
/* SZENE 6 — Was wir NICHT machen                        */
/* ===================================================== */
.v4-sc-6-illo{
  width:100%;
  max-width:420px;
  display:flex;
  flex-direction:column;
  gap:.9rem;
}
.v4-sc-6-item{
  background:var(--white);
  border:1px solid var(--gray-200);
  padding:.5rem 1rem;
  opacity:0;
  transform:translateX(-12px);
  transition:opacity .5s ease-out, transform .5s ease-out;
  transition-delay:calc(0.2s + var(--i) * 0.18s);
}
.v4-sc.is-visible .v4-sc-6-item{opacity:1;transform:none}
.v4-sc-6-svg{
  width:100%;
  height:auto;
  max-height:56px;
}
.v4-sc-6-text{
  font-family:var(--font-d);
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  fill:var(--gray-700);
}
.v4-sc-6-svg line{
  stroke:var(--danger);
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-dasharray:60;
  stroke-dashoffset:60;
  transition:stroke-dashoffset .6s ease-out;
  transition-delay:calc(0.5s + var(--i) * 0.18s);
}
.v4-sc.is-visible .v4-sc-6-svg line{stroke-dashoffset:0}

/* ===================================================== */
/* SZENE 7 — CTAs                                        */
/* ===================================================== */
.v4-sc-7-inner{
  grid-template-columns:1fr !important;
  text-align:center;
  justify-items:center;
  gap:2rem !important;
}
.v4-sc-7-inner .v4-sc-text{align-items:center;text-align:center}
.v4-sc-7-ctas{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  justify-content:center;
}
.v4-sc-cta{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.9rem 1.3rem;
  border:1px solid var(--black);
  background:var(--white);
  color:var(--black);
  font-family:var(--font-d);
  font-size:var(--fs-sm);
  text-transform:uppercase;
  letter-spacing:.09em;
  font-weight:700;
  text-decoration:none;
  transition:background var(--tr-fast), color var(--tr-fast);
}
.v4-sc-cta:hover{background:var(--black);color:var(--white);text-decoration:none}

/* === Reduced motion: kein Animation-Zoo === */
@media (prefers-reduced-motion: reduce){
  .v4-sc-intro-hint{animation:none}
  .v4-sc:not(.is-visible) .v4-sc-illustration > *,
  .v4-sc.is-visible .v4-sc-illustration > *{transition:none;opacity:1}
  .v4-sc-1-number{animation:none}
  .v4-sc-1-strike{transform:scaleX(1) rotate(-4deg);transition:none}
  .v4-sc-3-icon{opacity:1;transform:none;transition:none}
  .v4-sc-3-icon:nth-child(1){transform:translateX(-50%)}
  .v4-sc-3-icon:nth-child(2){transform:translateY(-50%)}
  .v4-sc-3-icon:nth-child(3){transform:translateX(-50%)}
  .v4-sc-3-icon:nth-child(4){transform:translateY(-50%)}
  .v4-sc-6-item{opacity:1;transform:none;transition:none}
  .v4-sc-6-svg line{stroke-dashoffset:0;transition:none}
  .v4-sc-cta{transition:none}
}