/* Einblendungen des Bereichs Privatkredit.

   DIESE DATEI IST GEGENUEBER DER PV-FASSUNG STARK GEKUERZT. Dort standen Regeln fuer
   .saeule, .satz, .schritte, .band-h2 und [data-zaehler] — Elemente, die es auf dieser
   Seite nicht gibt. Sie mitzuschleppen kostet nicht nur Bytes: Ihre Dauern lagen zwischen
   0,5 s und 1,4 s und rissen damit das Bewegungs-Regelwerk (R7: hoechstens 0,4 s, eine
   Kurve). Wer eine solche Datei kopiert und nur ueberfliegt, uebernimmt die Verstoesse mit.

   GENAU DAS WAR AM 11.08.2026 DIE GEFAHR, als die Beleg-Bank aus dem Hero der Hauptseite
   hierher kam: Dort laeuft sie mit 0,7 s, ihr Akzentstrich mit 0,9 s und die drei Belege
   mit 0,55/0,65/0,75 s Verzug — zusammen ueber eine Sekunde. Uebernommen wurde die
   Anordnung, NICHT die Zeit. Unten steht sie mit 0,3 s und 40 ms Stagger.

   ES BLEIBEN FUENF DINGE, und alle halten R1/R7:
     · .reveal / .enthuellen  — 0,3 s, 8 px Versatz, eine Kurve
     · .abschnitt::before     — die Haarlinie am Abschnittsanfang (keine Bewegung)
     · .abschnitt::after      — der Akzentstrich, der beim Erscheinen aufzieht
     · .kicker::before        — der Punkt vor der Dachzeile
     · .bank                  — die Beleg-Bank im Hero, samt ihren drei Belegen

   ZWEI GRUNDSAETZE, die alles hier bestimmen:
     1. Nur transform und opacity animieren — sie laufen auf dem Compositor.
     2. EINE Kurve fuer alles: cubic-bezier(.25, 1, .5, 1). Bewegung ist sofort da und
        laeuft weich aus. `ease` startet langsam und fuehlt sich traege an.

   Der Basiszustand ist SICHTBAR. Versteckt wird nur unter html.js — ohne JavaScript,
   fuer Crawler und im Lesemodus steht alles da. */

/* ------------------------------------------------------------------ Grundeinblendung */

.reveal,
.enthuellen { opacity: 1; }

html.js .reveal:not(.ist-sichtbar),
html.js .enthuellen:not(.ist-sichtbar) {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1) var(--verzug, 0s),
              transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) var(--verzug, 0s);
}
html.js .reveal.ist-sichtbar,
html.js .enthuellen.ist-sichtbar {
  opacity: 1;
  transform: none;
  transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1) var(--verzug, 0s),
              transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) var(--verzug, 0s);
}

/* ------------------------------------------------------------------ Abschnittsanfang */

.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);
}
/* Der Akzentstrich. Er nimmt --akzent und NICHT die Signalfarbe direkt — das ist seit
   dem Wechsel auf die Hausmarke (11.08.2026) der Unterschied zwischen sichtbar und
   unsichtbar: Das alte Signalorange lag auf Papier bei 3,66:1 und war als Grafik
   zulaessig, Sonnengelb liegt bei 1,33:1. Ueber --akzent ist der Strich auf Papier
   Indigo und auf den dunklen Baendern Gelb — der Untergrund entscheidet, so wie es
   css/tokens.css vorgibt. Ein `background: var(--gelb)` waere hier ein weisser Strich. */
.abschnitt::after {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  width: 64px;
  height: 3px;
  background: var(--akzent);
  transform-origin: left center;
}
/* 0,3 s statt der 0,7 s aus der Vorlage: R7 deckelt bei 0,4 s. Ein Strich, der eine
   Dreiviertelsekunde aufzieht, ist keine Rueckmeldung mehr, sondern Dekoration. */
html.js .abschnitt::after {
  transform: scaleX(0);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) 0.05s;
}
html.js .abschnitt.ist-sichtbar::after { transform: scaleX(1); }

/* Auf einem dunklen Band trennt der Farbwechsel — dort waere eine Haarlinie ein Fehler.
   Und die Sektion DIREKT DANACH braucht ebenfalls keine: Sie grenzt an eine harte
   Farbkante. Ohne diese Regel klebt ihr Akzentstrich unten am Band. */
.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 gilt fuer den Abschnitt direkt nach der Butter-Flaeche des Rueckwegs:
   auch dort trennt schon ein Farbwechsel. */
.flaeche-butter + .abschnitt::before,
.flaeche-butter + .abschnitt::after { content: none; }

/* ------------------------------------------------------------------ Kicker-Punkt */

/* Der Punkt vor der Dachzeile faehrt aus der Mitte auf. 0,25 s statt 0,5 s — er ist
   10 px gross, laenger sieht niemand hin. */
html.js .kicker.enthuellen::before {
  transform: scale(0);
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1) 0.1s;
}
html.js .kicker.enthuellen.ist-sichtbar::before { transform: scale(1); }

/* ------------------------------------------------------------------ Beleg-Bank

   Sie steht beim Laden schon im Bild und wird deshalb nicht beobachtet, sondern nach dem
   ersten Bildaufbau geschaltet (js/reveal.js). Werte nach R1: 0,3 s, 8 px, eine Kurve.
   Der Stagger der drei Belege liegt bei 40 ms und endet damit nach 80 ms — die
   Obergrenze aus R1 (gesamt 150 ms) bleibt unterschritten. */
html.js .bank {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
html.js .bank.ist-sichtbar { opacity: 1; transform: none; }

html.js .bank::before {
  transform: scaleX(0);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) 0.05s;
}
html.js .bank.ist-sichtbar::before { transform: scaleX(1); }

html.js .bank .trust-item,
html.js .bank .rechtsnote {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1) var(--verzug, 0s),
              transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) 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(2) { --verzug: 0.04s; }
html.js .bank .rechtsnote { --verzug: 0.08s; }

/* ------------------------------------------------------------------ Drei Signale */

/* Wichtig bei reduced-motion: Ein Block, der nur die Dauer auf 0 setzt, reicht nicht —
   dann bliebe der Startzustand opacity: 0 stehen und diese Nutzer saehen gar nichts.
   Deshalb werden opacity und transform ausdruecklich zurueckgesetzt. */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal,
  html.js .enthuellen,
  html.js .bank,
  html.js .bank .trust-item,
  html.js .bank .rechtsnote {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html.js .abschnitt::after { transform: scaleX(1) !important; transition: none !important; }
  html.js .kicker::before { transform: scale(1) !important; transition: none !important; }
  html.js .bank::before { transform: scaleX(1) !important; transition: none !important; }
}