/* Shopbefund, Bewegung.
   Zusatzschicht ueber basis.css und start.css. Keine Bibliothek, kein fremder
   Host, nichts, was die Kopfzeilen der Seite verbietet. Alles greift erst,
   wenn das Skript die Klasse js gesetzt hat, damit ohne JavaScript nichts
   unsichtbar bleibt. Bei prefers-reduced-motion faellt die ganze Schicht weg. */

/* ---------- Grund der Seite, wechselt beim Scrollen ---------- */

body {
  background-color: var(--grund, var(--canvas));
  transition: background-color 900ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Abschnitte tragen ihren Grund selbst, damit der Wechsel Kanten hat,
   an denen man ihn merkt, ohne dass er auffaellt. */
.grund-tief   { --abschnitt-grund: #000000; }
.grund-warm   { --abschnitt-grund: #050806; }
.grund-kuehl  { --abschnitt-grund: #05060a; }
.grund-hell   { --abschnitt-grund: #0a0a0b; }

section[class*="grund-"] {
  background-color: var(--abschnitt-grund);
  transition: background-color 900ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Fortschritt, damit der lange Scroll ein Mass bekommt ---------- */

.fortschritt {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 30;
  pointer-events: none;
  background: transparent;
}
.fortschritt i {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--anteil, 0));
  background: linear-gradient(90deg, var(--brand-muted), var(--brand));
  transition: transform 90ms linear;
}
.js .fortschritt { background: var(--hairline-soft); }

/* ---------- Einblenden beim Erreichen ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js .auf {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity 620ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }
  .js .auf.da {
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  /* Reihen in einem Raster laufen versetzt ein, nicht alle gleichzeitig */
  .js .auf-reihe > * {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity 560ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 560ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .js .auf-reihe.da > * { opacity: 1; transform: none; }
  .js .auf-reihe.da > :nth-child(1) { transition-delay: 0ms; }
  .js .auf-reihe.da > :nth-child(2) { transition-delay: 70ms; }
  .js .auf-reihe.da > :nth-child(3) { transition-delay: 140ms; }
  .js .auf-reihe.da > :nth-child(4) { transition-delay: 210ms; }
  .js .auf-reihe.da > :nth-child(5) { transition-delay: 280ms; }
  .js .auf-reihe.da > :nth-child(6) { transition-delay: 350ms; }
}

/* ---------- Der Messschrieb zeichnet sich, wenn man ihn erreicht ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* Die Zeilen steuert jetzt die Aufzeichnung weiter unten. */

  /* Der rote Punkt oben pulst, solange die Messung laeuft, und wird dann still */
  .js .scope .scope-dot { animation: puls 1.5s ease-in-out 3; }
  @keyframes puls {
    0%, 100% { box-shadow: 0 0 0 3px var(--fund-soft); }
    50%      { box-shadow: 0 0 0 7px rgba(255, 54, 33, 0.05); }
  }

  /* Die Zeitangabe laeuft mit, waehrend die Zeile einlaeuft */
  .js .scope .ms { transition: color 300ms ease-out; }
}

/* ---------- Zahlen zaehlen einmal hoch ---------- */

.zahl-lauf { font-variant-numeric: tabular-nums; }

/* ---------- Karten heben sich beim Zeigen minimal ---------- */

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .card, .card-el {
    transition: border-color 220ms ease-out, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .fund-karte:hover, .plan:hover, .stimme:hover {
    border-color: var(--hairline-strong);
    transform: translateY(-2px);
  }
}

/* ---------- Belege: was der Kunde tatsaechlich bekommt ---------- */

.belege-grid {
  display: grid;
  gap: 16px;
}
@media (min-width: 860px) {
  .belege-grid { grid-template-columns: 1.15fr 0.85fr; align-items: start; }
}

.beleg {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.beleg-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
  background: var(--graphite);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--mute);
}
.beleg-bild {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
}
.beleg-fuss {
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ash);
}
.beleg-fuss b { color: var(--body); font-weight: 500; }

/* Zwei Seiten nebeneinander, leicht versetzt, damit es nach Stapel aussieht */
.beleg-stapel { position: relative; padding: 18px 16px 0; background: var(--elevated); }
.beleg-stapel img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
  border-radius: 2px 2px 0 0;
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.55);
}
.beleg-stapel::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 90px;
  background: linear-gradient(to bottom, transparent, var(--surface));
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .js .beleg-stapel img {
    transform: translateY(14px);
    opacity: 0;
    transition: transform 760ms cubic-bezier(0.16, 1, 0.3, 1), opacity 620ms ease-out;
  }
  .js .beleg.da .beleg-stapel img { transform: none; opacity: 1; }
}

/* ==========================================================================
   Zweite Schicht, 26.08.2026
   Messschrieb als Aufzeichnung, Kapitelmarke am Rand, Tiefe bei den Belegen,
   Einlauf im Hero. Alles weiterhin ohne Bibliothek und ohne fremden Host.
   ========================================================================== */

/* ---------- Messschrieb: Uhr und Zeitachse ---------- */

.scope-clock {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ash);
  font-variant-numeric: tabular-nums;
}
.scope-achse {
  height: 2px;
  background: var(--hairline-soft);
  position: relative;
  overflow: hidden;
}
.scope-achse i {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--lauf, 1));
  background: linear-gradient(90deg, var(--brand-muted), var(--fund));
}
.scope-ende {
  padding: 11px 16px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--fund);
  background: var(--fund-soft);
  border-bottom: 1px solid var(--hairline-soft);
}

/* Vor dem Start liegt die Achse bei null und die Zeilen sind noch nicht da.
   Nur mit JavaScript, sonst steht der Kasten fertig da. */
.js .scope-achse i { transform: scaleX(var(--lauf, 0)); }
.js .scope .row { opacity: 0; }
.js .scope-ende {
  opacity: 0;
  transition: opacity 420ms ease-out;
}
.js .scope.fertig .scope-ende { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  /* Die Zeilen erscheinen zu ihrer gemessenen Zeit, nicht von oben nach unten.
     Deshalb hier keine gestaffelte Verzoegerung mehr, das macht das Skript. */
  .js .scope .row {
    transform: translate3d(-10px, 0, 0);
    transition: opacity 300ms ease-out, transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .js .scope .row.an { opacity: 1; transform: none; }
  .js .scope.da .row:nth-child(n) { transition-delay: 0ms; }

  /* Die Zeile blitzt kurz auf, wenn sie eintrifft */
  .js .scope .row.an { animation: eintreffen 700ms ease-out 1; }
  @keyframes eintreffen {
    0%   { background: rgba(255, 255, 255, 0.06); }
    100% { background: transparent; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .scope .row { opacity: 1; }
  .js .scope-achse i { transform: scaleX(1); }
  .js .scope-ende { opacity: 1; }
}

/* ---------- Kapitelmarke am linken Rand ---------- */

.kapitel {
  position: fixed;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
  display: none;
  flex-direction: column;
  gap: 14px;
}
@media (min-width: 1240px) {
  .js .kapitel { display: flex; }
}
.kapitel a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ash);
  padding: 2px 0;
}
.kapitel .punkt {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 999px;
  background: var(--hairline-strong);
  transition: background-color 300ms ease-out, box-shadow 300ms ease-out,
              transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.kapitel .name {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 300ms ease-out, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.kapitel a:hover .punkt { background: var(--mute); }
.kapitel a:hover .name,
.kapitel a:focus-visible .name { opacity: 1; transform: none; }
.kapitel a.hier .punkt {
  background: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-soft);
  transform: scale(1.15);
}
.kapitel a.hier .name { opacity: 1; transform: none; color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .kapitel .punkt, .kapitel .name { transition: none; }
}

/* ---------- Belege bekommen Tiefe ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* Das linke Bild und der rechte Stapel wandern gegenlaeufig, damit die
     beiden Belege nicht auf derselben Ebene liegen. Die Verschiebung sitzt am
     Stapel-Container, nicht am Bild darin, weil das Bild schon eine eigene
     Einblendung hat und zwei Bewegungen auf einer Eigenschaft sich beissen. */
  .js .beleg-bild, .js .beleg-stapel { will-change: transform; }
  .js .beleg-bild  { transform: translate3d(0, calc(var(--par, 0) *  7px), 0); }
  .js .beleg-stapel { transform: translate3d(0, calc(var(--par, 0) * -11px), 0); }
}

/* ---------- Hero laeuft beim Laden ein ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js .hero-copy > *,
  .js .hero .scope {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .js .hero .scope { transform: translate3d(16px, 0, 0); }
  .js.bereit .hero-copy > *,
  .js.bereit .hero .scope { opacity: 1; transform: none; }
  .js.bereit .hero-copy > :nth-child(1) { transition-delay: 60ms; }
  .js.bereit .hero-copy > :nth-child(2) { transition-delay: 150ms; }
  .js.bereit .hero-copy > :nth-child(3) { transition-delay: 240ms; }
  .js.bereit .hero-copy > :nth-child(4) { transition-delay: 330ms; }
  .js.bereit .hero .scope { transition-delay: 300ms; }

  /* Unter dem hervorgehobenen Wort zieht sich einmal ein Strich durch */
  .js .hero h1 em { position: relative; }
  .js .hero h1 em::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1) 820ms;
  }
  .js.bereit .hero h1 em::after { transform: scaleX(1); }
}

/* ---------- Die Marke an der hervorgehobenen Karte wandert ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js .plan-featured::after { animation: marke 3.6s linear infinite; }
  @keyframes marke {
    from { background-position: 0 0; }
    to   { background-position: 8px 0; }
  }
}

/* ---------- Portraet im Abschnitt "Wer prueft" ---------- */

.portraet {
  display: block;
  width: 100%;
  max-width: min(340px, 80vw);
  height: auto;
  margin-top: 24px;
  border-radius: var(--r-lg);
  background: #000;
}
@media (min-width: 900px) {
  .portraet { max-width: 440px; margin-top: 26px; }
}

/* ---------- Musterbefund, Band unter den Belegen, 29.08.2026 ----------
   Steht bewusst nach den beiden Abbildungen: erst zeigen, was ankommt, dann
   der Weg zum ganzen Bericht. Auf schmalen Schirmen untereinander, damit der
   Knopf nicht neben einem zweizeiligen Absatz klemmt. */
.muster-band {
  margin-top: 22px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 22px;
  display: grid;
  gap: 18px;
  align-items: center;
}
.muster-band .lede { margin-top: 8px; }
.muster-band .btn { justify-self: start; white-space: nowrap; }
@media (min-width: 860px) {
  .muster-band { grid-template-columns: 1fr auto; gap: 28px; }
  .muster-band .btn { justify-self: end; }
}