/* Fairfinanz — Einblendungen.
 *
 * Zwei Regeln, die das Ganze sicher machen:
 * 1. Versteckt wird NUR unter html.js. Ohne JavaScript ist alles sofort sichtbar —
 *    ein Beobachter, der nie auslöst, kann die Seite dann nicht leer lassen.
 * 2. Bei prefers-reduced-motion wird hier explizit opacity/transform zurückgesetzt.
 *    Der globale Block in tokens.css killt nur die DAUER, nicht den Anfangszustand —
 *    ohne diesen Block bliebe für diese Nutzer alles unsichtbar.
 */

html.js .enthuellen {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease var(--verzug, 0s),
              transform 0.6s ease var(--verzug, 0s);
}
html.js .enthuellen.ist-sichtbar {
  opacity: 1;
  transform: none;
}

/* ---------- Trennlinien: der Goldstrich zeichnet sich ein ----------
   Die Hairline bleibt, was sie war. Neu ist nur der kurze Goldbalken an ihrem linken
   Ende, der beim Eintritt der Sektion aufwächst — der Strich hört auf, bloß eine
   Trennung zu sein, und wird zum Zeichen. Er zitiert dieselbe 68°-Geste wie der Kicker. */
.abschnitt {
  position: relative;
  border-top: 0;                 /* ersetzt durch ::before, damit ::after darauf sitzen kann */
}
.abschnitt::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--linie);
}
.abschnitt::after {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  width: 64px;
  height: 3px;
  background: var(--akzent);
  transform-origin: left center;
}
html.js .abschnitt::after {
  transform: scaleX(0);
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s;
}
html.js .abschnitt.ist-sichtbar::after { transform: scaleX(1); }

/* Auf einem dunklen Band trennt der Farbwechsel — dort wäre eine Hairline ein Fehler.
   Und die Sektion DIREKT DANACH braucht ebenfalls keine: Sie grenzt an eine harte
   Farbkante. Ohne diese Regel klebt ihr Goldstrich unten am Band und sieht aus,
   als wäre er hineingerutscht. */
.abschnitt.band-navy::before,
.abschnitt.band-navy::after,
.abschnitt.band-navy-tief::before,
.abschnitt.band-navy-tief::after,
.band-navy + .abschnitt::before,
.band-navy + .abschnitt::after,
.band-navy-tief + .abschnitt::before,
.band-navy-tief + .abschnitt::after { content: none; }

/* Dasselbe Problem am Hero, nur andersherum: Die Beleg-Bank sitzt bündig auf dessen
   Unterkante (site.css, `bottom: 0`), und der Akzentstrich der Folgesektion beginnt in
   derselben Spalte wie deren Text. Er las sich dadurch als Unterstreichung der Bank —
   „auf vier Plattformen", 64 px Strich darunter — statt als Auftakt von „Fünf Sätze".
   Die Hairline bleibt: die Sektionskante selbst ist echt. */
.hero + .abschnitt::after { content: none; }

/* ---------- Kicker: der Schrägstrich wächst von unten ---------- */
html.js .enthuellen .kicker::before,
html.js .kicker.enthuellen::before {
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s;
}
html.js .ist-sichtbar .kicker::before,
html.js .kicker.enthuellen.ist-sichtbar::before { transform: scaleY(1); }

/* ---------- Navy-Band: die Überschrift läuft zeilenweise ein ----------
   Die Überschrift selbst wird NICHT als Block eingeblendet — sonst addierten sich
   ihre 16 px Versatz und die 14 px der Zeilen zu einem Sprung von 30 px. */
html.js .band-h2.enthuellen {
  opacity: 1;
  transform: none;
}
html.js .band-h2 span {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
html.js .band-h2.ist-sichtbar span { opacity: 1; transform: none; }
html.js .band-h2.ist-sichtbar span:nth-child(2) { transition-delay: 0.14s; }

/* ---------- Säulen: die drei Goldlinien laufen versetzt ein ---------- */
html.js .saeule {
  border-top-color: transparent;
  background-image: linear-gradient(var(--akzent), var(--akzent));
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 0 2px;
  transition: background-size 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) var(--verzug, 0s);
}
html.js .saeule.ist-sichtbar { background-size: 100% 2px; }

/* ---------- Fünf Sätze: erst die Frage, dann die Antwort ----------
   Die Antwort kommt 180 ms nach dem Kundensatz. Das ist die ganze Idee der Sektion —
   jemand sagt etwas, Frank antwortet. Vorher standen beide gleichzeitig da. */
html.js .satz dd {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s ease calc(var(--verzug, 0s) + 180ms),
              transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) calc(var(--verzug, 0s) + 180ms);
}
html.js .satz.ist-sichtbar dd { opacity: 1; transform: none; }
/* Der Goldbalken wächst mit der Antwort auf. */
html.js .satz dd::before {
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) calc(var(--verzug, 0s) + 260ms);
}
html.js .satz.ist-sichtbar dd::before { transform: scaleY(1); }

/* ---------- Ablauf: die Goldlinie wächst von 01 nach 04 ----------
   Sie liegt auf der Liste, nicht auf den Schritten — deshalb läuft sie über die Lücken
   hinweg und ist wirklich EINE Linie. Sie ist der Bewegungsanker des Bandes. */
html.js .schritte::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s;
}
html.js .schritte.ist-sichtbar::before { transform: scaleX(1); }

/* Einspaltig steht die Linie senkrecht — dann muss sie auch senkrecht wachsen. */
@media (max-width: 1079px) {
  html.js .schritte::before {
    transform: scaleY(0);
    transform-origin: top center;
  }
  html.js .schritte.ist-sichtbar::before { transform: scaleY(1); }
}

/* ---------- Beleg-Bank: schwebt herein, hebt ab ----------
   translate (die Parallaxe aus js/reveal.js) und transform (die Einblendung hier) sind
   getrennte Eigenschaften — sie überschreiben sich nicht. Genau deshalb steht die
   Parallaxe in `translate` und nicht im transform. */
html.js .bank {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease 0.35s, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s;
}
html.js .bank.ist-sichtbar {
  opacity: 1;
  transform: none;
}
/* Die Goldkante zieht sich von links durch. */
html.js .bank::before {
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.5s;
}
html.js .bank.ist-sichtbar::before { transform: scaleX(1); }
/* Die drei Belege kommen nacheinander, nicht als Block. */
html.js .bank .trust-item,
html.js .bank .rechtsnote {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease var(--verzug, 0s), transform 0.5s ease var(--verzug, 0s);
}
html.js .bank.ist-sichtbar .trust-item,
html.js .bank.ist-sichtbar .rechtsnote { opacity: 1; transform: none; }
html.js .bank .trust-item:nth-child(1) { --verzug: 0.55s; }
html.js .bank .trust-item:nth-child(2) { --verzug: 0.65s; }
html.js .bank .rechtsnote { --verzug: 0.75s; }

@media (prefers-reduced-motion: reduce) {
  html.js .enthuellen,
  html.js .bank,
  html.js .bank .trust-item,
  html.js .bank .rechtsnote,
  html.js .band-h2 span,
  html.js .satz dd {
    opacity: 1 !important;
    transform: none !important;
  }
  html.js .abschnitt::after { transform: scaleX(1) !important; }
  html.js .bank::before { transform: scaleX(1) !important; }
  html.js .schritte::before { transform: none !important; }
  html.js .satz dd::before { transform: scaleY(1) !important; }
  html.js .kicker::before { transform: scaleY(1) !important; }
  html.js .saeule { background-size: 100% 2px !important; }
  .band-schein { animation: none !important; }
}