/* ═══════════════════════════════════════════════════════════════════════════
   Powerkapsel — Zustände, die im Original als inline-style im HTML standen.

   WARUM DAS HIER STEHT UND NICHT IM HTML
       Die Live-Seite trug an 114 Stellen `style="opacity:0; transform:…"`
       direkt im Element. React hat diese Werte beim Scrollen überschrieben.
       Das hat zwei Nachteile: die Seite ist ohne JavaScript LEER, und
       dieselbe Angabe steht dutzendfach im Dokument.

       Hier steht sie einmal. Und die Reihenfolge ist umgedreht: sichtbar ist
       der Normalfall, unsichtbar wird erst gesetzt, wenn JavaScript da ist
       und das Einblenden auch wirklich übernehmen kann.

   ⛔ Gestaltung gehört NICHT hierher, die steht vollständig in
      `pk-original.css`. Hier stehen nur Zustände.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Einblenden beim Erscheinen ───────────────────────────────────────────
   `rv-aus` setzt das Skript, sobald es läuft. Ohne Skript passiert nichts
   und der Abschnitt bleibt sichtbar. */
[data-rv].rv-aus{
  opacity:0;
  transform:translateY(28px);
  will-change:opacity, transform;
}
[data-rv].rv-aus.rv-an{
  opacity:1;
  transform:none;
  /* Kurve und Dauer wie im Original (framer-motion ease [.22,1,.36,1]) */
  transition:opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1);
}
[data-rv].rv-an{ will-change:auto }          /* nach dem Einblenden wieder freigeben */
[data-rv][data-rv-scale].rv-aus{ transform:scale(.9) }   /* Original: scale .9 */
[data-rv][data-rv-x].rv-aus{ transform:translateX(20px) }

/* Gestaffelt, damit Karten nacheinander erscheinen statt alle auf einmal */
[data-rv-verzug="1"].rv-an{ transition-delay:.07s }
[data-rv-verzug="2"].rv-an{ transition-delay:.14s }
[data-rv-verzug="3"].rv-an{ transition-delay:.21s }
[data-rv-verzug="4"].rv-an{ transition-delay:.28s }

/* ── Flip-Karte ───────────────────────────────────────────────────────────
   Am Zeigergerät dreht sie beim Überfahren, auf Touch beim Antippen. */
[data-flip]{ cursor:pointer }
[data-flip].ist-gedreht ._flipInner_mm51f_53{ transform:rotateY(180deg) }
[data-flip]:focus-visible{ outline:2px solid #dabe73; outline-offset:6px; border-radius:18px }

/* ── Der Weg in vier Schritten ────────────────────────────────────────────
   OHNE Skript stehen alle vier Karten untereinander und sind lesbar.
   Erst `weg-mit-js` macht daraus einen Umschalter. */
[data-weg-karte]{ margin-bottom:14px }
.weg-mit-js [data-weg-karte]{
  margin-bottom:0;
  transition:opacity .3s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.22,1,.36,1);
}
/* Das Skript setzt .karte-ein, erzwingt einen Reflow und nimmt sie wieder weg —
   die Karte gleitet dadurch mit 0.3 s herein (Original: opacity 0, y 12). */
.weg-mit-js [data-weg-karte].karte-ein{ opacity:0; transform:translateY(12px); transition:none }
[data-weg-punkt]{ cursor:pointer; background:none; border:0; font:inherit }
[data-weg-punkt]:focus-visible{ outline:2px solid #dabe73; outline-offset:4px; border-radius:10px }

/* ── Häufige Fragen ───────────────────────────────────────────────────────
   OHNE Skript sind alle Antworten offen und die Seite vollständig lesbar.
   Erst `faq-mit-js` klappt sie zusammen. */
[data-frage-koerper]{ overflow:hidden }
.faq-mit-js [data-frage-koerper]{
  height:0;
  opacity:0;
  transition:height .34s cubic-bezier(.22,1,.36,1), opacity .34s cubic-bezier(.22,1,.36,1);
}
[data-frage-kopf]{ cursor:pointer; background:none; border:0; width:100%; text-align:left }
[data-frage-kopf]:focus-visible{ outline:2px solid #dabe73; outline-offset:-2px; border-radius:10px }

/* ── Fortschrittsbalken und Zeiger-Leuchten ───────────────────────────── */
[data-fortschritt]{ transform:scaleX(0) }
[data-leuchten]{ opacity:0 }

/* ── Pflichtblock, immer am Ende (Effekt-Bibliothek Teil D) ───────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  [data-rv].rv-aus{ opacity:1; transform:none }
  [data-leuchten]{ display:none }
}