/* ==========================================================================
   FOB WEBDESIGN – ANIMATIONEN
   --------------------------------------------------------------------------
   Diese Datei enthält ausschließlich Bewegung. Layout und Farben stehen in
   styles.css. Dadurch lässt sich die gesamte Animation an einer Stelle
   anpassen oder notfalls komplett abschalten.

   Aufbau:
     01  Grundlagen und Zeitkurven
     02  Seitenübergänge
     03  Scroll-Einblendungen (data-reveal)
     04  Wortweise Überschriften (data-split)
     05  Hero-Choreografie
     06  Kennzahlen
     07  Schaltflächen
     08  Karten
     09  Navigation
     10  Steigleitung im Ablauf
     11  Akkordeon
     12  Fortschrittsbalken und Sprung nach oben
     13  Bilder
     14  Dekorative Hintergrundbewegung
     15  Reduzierte Bewegung

   WICHTIG: Abschnitt 15 schaltet alles ab, sobald im Betriebssystem
   „Bewegung reduzieren" aktiviert ist. Bitte beim Erweitern beibehalten.
   ========================================================================== */


/* ==========================================================================
   01  GRUNDLAGEN UND ZEITKURVEN
   ========================================================================== */

:root {
  /* Weiche Kurve für Einblendungen – startet zügig, läuft sanft aus */
  --ease-out-soft:  cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Leichtes Überschwingen für spielerische Elemente */
  --ease-back:      cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Gleichmäßig, für Dauerbewegungen */
  --ease-inout:     cubic-bezier(0.65, 0.05, 0.36, 1);

  --dur-fast:   180ms;
  --dur-base:   420ms;
  --dur-slow:   760ms;
  --dur-slower: 1100ms;
}

/* Elemente, die animiert werden, bekommen eine eigene Ebene.
   Das verhindert Flackern und entlastet den Hauptprozess. */
[data-reveal],
[data-split] .wort span,
.hero__zeile > span {
  will-change: transform, opacity;
}

/* Sobald die Animation gelaufen ist, wird die Ebene wieder freigegeben. */
[data-reveal].ist-sichtbar {
  will-change: auto;
}


/* ==========================================================================
   02  SEITENÜBERGÄNGE
   --------------------------------------------------------------------------
   Moderne Browser blenden den Wechsel zwischen zwei Seiten selbst weich über.
   Ältere Browser bekommen die Ersatzlösung darunter (Klasse .verlaesst).
   ========================================================================== */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: seiteRaus 220ms var(--ease-out-soft) both;
}

::view-transition-new(root) {
  animation: seiteRein 380ms var(--ease-out-soft) both;
}

/* Die Kopfleiste bleibt beim Wechsel stehen, statt mitzublenden */
.site-header {
  view-transition-name: kopfleiste;
}

@keyframes seiteRaus {
  to { opacity: 0; transform: translateY(-8px); }
}

@keyframes seiteRein {
  from { opacity: 0; transform: translateY(12px); }
}

/* --- Ersatzlösung ohne View Transitions --------------------------------- */

body {
  animation: inhaltRein var(--dur-base) var(--ease-out-soft) both;
}

body.verlaesst {
  animation: inhaltRaus 200ms var(--ease-out-soft) both;
}

@keyframes inhaltRein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes inhaltRaus {
  to { opacity: 0; transform: translateY(-6px); }
}

/* Unterstützt der Browser View Transitions, ist die Ersatzlösung überflüssig */
@supports (view-transition-name: none) {
  body,
  body.verlaesst {
    animation: none;
  }
}


/* ==========================================================================
   03  SCROLL-EINBLENDUNGEN
   --------------------------------------------------------------------------
   Verwendung im HTML:
     <div data-reveal>                 einfaches Aufblenden von unten
     <div data-reveal="links">         kommt von links herein
     <div data-reveal="rechts">        kommt von rechts herein
     <div data-reveal="skalieren">     wächst leicht auf
     <div data-reveal="vorhang">       wird von unten aufgedeckt
     <div data-reveal="kippen">        kippt nach vorn
     <ul data-stagger>                 Kinder erscheinen nacheinander
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transition-property: opacity, transform, clip-path;
  transition-duration: var(--dur-slow);
  transition-timing-function: var(--ease-out-soft);
}

[data-reveal=""],
[data-reveal="hoch"] { transform: translateY(38px); }
[data-reveal="links"]      { transform: translateX(-46px); }
[data-reveal="rechts"]     { transform: translateX(46px); }
[data-reveal="skalieren"]  { transform: scale(0.92); }
[data-reveal="kippen"]     { transform: perspective(900px) rotateX(10deg) translateY(30px); }

[data-reveal="vorhang"] {
  clip-path: inset(100% 0 0 0);
  transform: translateY(24px);
}

/* Endzustand: alles zurück auf Normalstellung.

   ACHTUNG, HIER LAG EIN FEHLER: Früher stand hier zusätzlich
   clip-path: inset(0 0 0 0). Das ist kein Nichtstun, sondern beschneidet
   das Element auf seinen eigenen Rahmen – und schnitt damit alles ab, was
   übersteht. Beim empfohlenen Paket verschwand so die obere Hälfte des
   Abzeichens "Meine Empfehlung". Der Zuschnitt gehört nur zur
   Vorhang-Variante und steht deshalb jetzt allein bei dieser. */
[data-reveal].ist-sichtbar {
  opacity: 1;
  transform: none;
}

[data-reveal="vorhang"].ist-sichtbar {
  clip-path: inset(0 0 0 0);
}

/* Nacheinander erscheinende Kinder. Die Verzögerung setzt script.js,
   damit sie sich nicht über beliebig viele Stufen aufsummiert. */
[data-stagger] > * {
  transition-delay: var(--verzug, 0ms);
}


/* ==========================================================================
   04  WORTWEISE ÜBERSCHRIFTEN
   --------------------------------------------------------------------------
   script.js zerlegt Überschriften mit data-split in einzelne Wörter.
   Jedes Wort steigt einzeln von unten ins Bild.
   ========================================================================== */

[data-split] .wort {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* Unterlängen wie bei g oder p dürfen nicht abgeschnitten werden */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

[data-split] .wort > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform var(--dur-slow) var(--ease-out-soft);
  transition-delay: var(--verzug, 0ms);
}

[data-split].ist-sichtbar .wort > span {
  transform: translateY(0);
}


/* ==========================================================================
   05  HERO-CHOREOGRAFIE
   --------------------------------------------------------------------------
   Beim ersten Aufbau der Startseite laufen die Bestandteile nacheinander ein.
   ========================================================================== */

.hero__eyebrow,
.hero__subtitle,
.hero__actions,
.factbar {
  opacity: 0;
  animation: heroTeil var(--dur-slow) var(--ease-out-soft) forwards;
}

.hero__eyebrow  { animation-delay: 120ms; }
.hero__subtitle { animation-delay: 620ms; }
.hero__actions  { animation-delay: 760ms; }
.factbar        { animation-delay: 900ms; }

@keyframes heroTeil {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* Goldener Strich unter der Überschrift wird gezeichnet */
.hero__strich {
  display: block;
  width: 0;
  height: 3px;
  margin-top: var(--space-5);
  background: linear-gradient(90deg, var(--gold), rgba(200, 168, 95, 0));
  animation: strichZiehen var(--dur-slower) var(--ease-out-soft) 900ms forwards;
}

@keyframes strichZiehen {
  to { width: min(280px, 60%); }
}

/* Sanft schwebender Lichtschein im Hero */
.hero::before {
  animation: schweben 14s var(--ease-inout) infinite alternate;
}

@keyframes schweben {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-4%, 5%, 0) scale(1.12); }
}


/* ==========================================================================
   06  KENNZAHLEN
   ========================================================================== */

.kennzahl__wert {
  font-variant-numeric: tabular-nums;   /* Zahlen springen beim Zählen nicht */
}

/* Kurzer goldener Puls, wenn der Zählvorgang endet */
.kennzahl.ist-fertig .kennzahl__wert {
  animation: zahlPuls 620ms var(--ease-back);
}

@keyframes zahlPuls {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); color: var(--gold); }
  100% { transform: scale(1); }
}


/* ==========================================================================
   07  SCHALTFLÄCHEN
   ========================================================================== */

.btn {
  position: relative;
  overflow: hidden;
  /* Wird von der magnetischen Steuerung in script.js gesetzt */
  transform: translate3d(var(--mx, 0), var(--my, 0), 0);
  transition: background-color var(--dur-fast) var(--ease-out-soft),
              border-color var(--dur-fast) var(--ease-out-soft),
              color var(--dur-fast) var(--ease-out-soft),
              transform 260ms var(--ease-out-soft),
              box-shadow var(--dur-fast) var(--ease-out-soft);
}

/* Lichtreflex, der beim Überfahren durchläuft */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
              transparent 35%,
              rgba(255, 255, 255, 0.32) 50%,
              transparent 65%);
  transform: translateX(-120%);
  transition: transform 620ms var(--ease-out-soft);
  pointer-events: none;
}

.btn:hover::after,
.btn:focus-visible::after {
  transform: translateX(120%);
}

.btn--accent:hover {
  box-shadow: 0 8px 24px rgba(200, 168, 95, 0.35);
}

/* Auf Berührungsgeräten stört der Reflex, dort bleibt er aus */
@media (hover: none) {
  .btn::after { display: none; }
}


/* ==========================================================================
   08  KARTEN
   --------------------------------------------------------------------------
   Die Neigung berechnet script.js und schreibt sie in --neigeX / --neigeY.
   ========================================================================== */

.card,
.price-card,
.care-card {
  transform: perspective(1000px)
             rotateX(var(--neigeX, 0deg))
             rotateY(var(--neigeY, 0deg))
             translateY(var(--hebung, 0));
  transform-style: preserve-3d;
  transition: transform 320ms var(--ease-out-soft),
              border-color var(--dur-fast) var(--ease-out-soft),
              box-shadow 320ms var(--ease-out-soft);
}

/* Goldener Lichtpunkt folgt dem Zeiger über die Karte */
.card::before,
.care-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--zx, 50%) var(--zy, 50%),
              rgba(200, 168, 95, 0.16), transparent 62%);
  opacity: 0;
  transition: opacity 320ms var(--ease-out-soft);
  pointer-events: none;
}

.card:hover::before,
.care-card:hover::before {
  opacity: 1;
}

.card,
.care-card {
  position: relative;
}

/* Das Symbol dreht sich beim Überfahren leicht mit */
.card__icon {
  transition: transform 420ms var(--ease-back),
              background-color var(--dur-fast) var(--ease-out-soft);
}

.card:hover .card__icon {
  transform: rotate(-8deg) scale(1.08);
}

@media (hover: none) {
  .card::before,
  .care-card::before { display: none; }
}


/* ==========================================================================
   09  NAVIGATION
   ========================================================================== */

/* Goldener Strich wächst unter dem Menüpunkt auf */
.nav__link::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 6px;
  height: 2px;
  background-color: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease-out-soft);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Im mobilen Menü erscheinen die Punkte nacheinander */
.nav.is-open .nav__list > li {
  animation: menueEintrag 420ms var(--ease-out-soft) both;
}

.nav.is-open .nav__list > li:nth-child(1) { animation-delay:  40ms; }
.nav.is-open .nav__list > li:nth-child(2) { animation-delay:  90ms; }
.nav.is-open .nav__list > li:nth-child(3) { animation-delay: 140ms; }
.nav.is-open .nav__list > li:nth-child(4) { animation-delay: 190ms; }
.nav.is-open .nav__list > li:nth-child(5) { animation-delay: 240ms; }
.nav.is-open .nav__list > li:nth-child(6) { animation-delay: 290ms; }
.nav.is-open .nav__list > li:nth-child(7) { animation-delay: 340ms; }

@keyframes menueEintrag {
  from { opacity: 0; transform: translateX(-22px); }
  to   { opacity: 1; transform: none; }
}

/* Die Kopfleiste rückt beim Scrollen enger zusammen */
.site-header {
  transition: box-shadow var(--dur-fast) var(--ease-out-soft),
              background-color var(--dur-fast) var(--ease-out-soft);
}

.site-header__inner {
  transition: min-height 320ms var(--ease-out-soft);
}

.site-header.is-scrolled .site-header__inner {
  min-height: 60px;
}

.logo__mark {
  transition: transform 420ms var(--ease-back);
}

.logo:hover .logo__mark {
  transform: rotate(-6deg) scale(1.06);
}


/* ==========================================================================
   10  STEIGLEITUNG IM ABLAUF
   --------------------------------------------------------------------------
   Die senkrechte Linie wird beim Scrollen von oben nach unten gezeichnet.
   ========================================================================== */

.step:not(:last-child)::before {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-slower) var(--ease-out-soft);
}

.step.ist-sichtbar:not(:last-child)::before {
  transform: scaleY(1);
}

/* Der Knotenpunkt springt kurz auf, wenn er erreicht wird */
.step__num {
  transform: scale(0.6);
  opacity: 0;
  transition: transform 560ms var(--ease-back),
              opacity 420ms var(--ease-out-soft),
              box-shadow 420ms var(--ease-out-soft);
}

.step.ist-sichtbar .step__num {
  transform: scale(1);
  opacity: 1;
}

.step:hover .step__num {
  box-shadow: 0 0 0 8px rgba(200, 168, 95, 0.16);
}


/* ==========================================================================
   11  AKKORDEON
   ========================================================================== */

.faq__item {
  transition: border-color var(--dur-fast) var(--ease-out-soft),
              box-shadow var(--dur-fast) var(--ease-out-soft);
}

.faq__item[open] {
  box-shadow: var(--shadow-sm);
}

/* Die Antwort fährt aus, statt zu springen.
   Das Raster von 0fr auf 1fr lässt sich weich animieren. */
.faq__huelle {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 380ms var(--ease-out-soft);
}

.faq__item[open] .faq__huelle {
  grid-template-rows: 1fr;
}

.faq__answer {
  overflow: hidden;
  opacity: 0;
  transition: opacity 300ms var(--ease-out-soft) 80ms;
}

.faq__item[open] .faq__answer {
  opacity: 1;
}

.faq__icon::before,
.faq__icon::after {
  transition: transform 320ms var(--ease-back);
}

.faq__item[open] .faq__icon::before {
  transform: translate(-50%, -50%) rotate(180deg);
}


/* ==========================================================================
   12  FORTSCHRITTSBALKEN UND SPRUNG NACH OBEN
   ========================================================================== */

.lesefortschritt {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 120;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  transform: scaleX(var(--fortschritt, 0));
  transform-origin: left;
  pointer-events: none;
}

.nach-oben {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 110;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  background-color: var(--navy-900);
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  color: var(--gold);
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px) scale(0.85);
  pointer-events: none;
  transition: opacity 320ms var(--ease-out-soft),
              transform 320ms var(--ease-back),
              background-color var(--dur-fast) var(--ease-out-soft);
}

.nach-oben.ist-sichtbar {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.nach-oben:hover {
  background-color: var(--navy-800);
}

.nach-oben svg {
  width: 20px;
  height: 20px;
  position: relative;
  z-index: 1;
}

/* Ring zeigt die gelesene Strecke an */
.nach-oben__ring {
  position: absolute;
  inset: -1px;
  width: 54px;
  height: 54px;
  transform: rotate(-90deg);
}

.nach-oben__ring circle {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-dasharray: 163;      /* Umfang bei Radius 26 */
  stroke-dashoffset: calc(163 - 163 * var(--fortschritt, 0));
  transition: stroke-dashoffset 120ms linear;
}


/* ==========================================================================
   13  BILDER
   ========================================================================== */

/* Das Porträt wird beim Erscheinen von unten aufgedeckt */
.photo-frame {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-slower) var(--ease-out-soft);
}

.photo-frame.ist-sichtbar {
  clip-path: inset(0 0 0 0);
}

/* Beim Überfahren zoomt das Bild ganz leicht */
.photo-frame__img {
  transition: transform 900ms var(--ease-out-soft);
}

.photo-frame:hover .photo-frame__img {
  transform: scale(1.04);
}


/* ==========================================================================
   14  DEKORATIVE HINTERGRUNDBEWEGUNG
   ========================================================================== */

/* Hinweis: Die bewegten Hintergründe dunkler Abschnitte stehen jetzt in
   Abschnitt 16 und werden über das Attribut data-hg gesteuert. */

/* Element, das beim Scrollen langsamer mitläuft.
   Den Wert setzt script.js in --versatz. */
[data-parallax] {
  transform: translate3d(0, var(--versatz, 0), 0);
  will-change: transform;
}


/* ==========================================================================
   15  REDUZIERTE BEWEGUNG
   --------------------------------------------------------------------------
   Wer im Betriebssystem „Bewegung reduzieren" eingestellt hat, sieht die
   Seite vollständig, aber ohne Animation. Das ist keine Einschränkung des
   Inhalts, sondern nur der Darstellung.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-delay: 0ms !important;
  }

  [data-reveal],
  [data-reveal].ist-sichtbar {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  [data-split] .wort > span { transform: none !important; }

  .hero__eyebrow,
  .hero__subtitle,
  .hero__actions,
  .factbar {
    opacity: 1 !important;
    animation: none !important;
  }

  .hero__strich { width: min(280px, 60%) !important; animation: none !important; }

  .step__num { opacity: 1 !important; transform: none !important; }
  .step:not(:last-child)::before { transform: scaleY(1) !important; }

  .photo-frame { clip-path: none !important; }

  .card, .price-card, .care-card { transform: none !important; }

  .hero::before { animation: none !important; }

  [data-parallax] { transform: none !important; }
}


/* ==========================================================================
   OHNE JAVASCRIPT
   Bleibt JavaScript aus, darf nichts unsichtbar sein.
   ========================================================================== */

html.no-js [data-reveal],
html.no-js [data-split] .wort > span,
html.no-js .hero__eyebrow,
html.no-js .hero__subtitle,
html.no-js .hero__actions,
html.no-js .factbar,
html.no-js .step__num {
  opacity: 1;
  transform: none;
  clip-path: none;
  animation: none;
}

html.no-js .photo-frame { clip-path: none; }
html.no-js .step:not(:last-child)::before { transform: scaleY(1); }


/* ==========================================================================
   16  BEWEGTE HINTERGRÜNDE
   --------------------------------------------------------------------------
   Die Lichtschleier aus styles.css Abschnitt 21 werden hier in Bewegung
   gesetzt. Animiert wird ausschließlich transform und opacity – beides
   übernimmt die Grafikkarte, der Hauptprozess bleibt frei.
   ========================================================================== */

/* Lichtschleier wandern langsam und ungleichmäßig */
[data-hg="aurora"]::before {
  animation: schleierWandern 26s var(--ease-inout) infinite alternate;
}

@keyframes schleierWandern {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-3%, 4%, 0) scale(1.14); }
  100% { transform: translate3d(4%, -3%, 0) scale(1.06); }
}

/* Das Raster darüber driftet gegenläufig – erzeugt räumliche Tiefe */
[data-hg="aurora"]::after {
  animation: rasterDriften 40s linear infinite;
}

@keyframes rasterDriften {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 64px 64px, 64px 64px; }
}

/* Warmer Schimmer auf hellen Flächen atmet langsam */
[data-hg="raster"]::after,
[data-hg="punkte"]::after {
  animation: schimmerAtmen 18s var(--ease-inout) infinite alternate;
}

@keyframes schimmerAtmen {
  from { transform: translate3d(0, 0, 0) scale(1);    opacity: 0.75; }
  to   { transform: translate3d(-4%, 3%, 0) scale(1.2); opacity: 1; }
}

/* Lichtkegel dreht sich sehr langsam */
[data-hg="strahlen"]::before {
  animation: kegelDrehen 48s linear infinite;
}

@keyframes kegelDrehen {
  from { transform: rotate(0deg)   scale(1.5); }
  to   { transform: rotate(360deg) scale(1.5); }
}

/* Die Körnung flackert minimal – wie echtes Filmkorn */
.koernung {
  animation: kornFlackern 700ms steps(3) infinite;
}

@keyframes kornFlackern {
  0%   { transform: translate3d(0, 0, 0); }
  33%  { transform: translate3d(-1.5%, 1%, 0); }
  66%  { transform: translate3d(1%, -1.5%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}


/* ==========================================================================
   17  PREISKARTEN UND ABZEICHEN
   ========================================================================== */

/* Der Lichtschein hinter der Empfehlung pulsiert ruhig */
.price-card--featured::before {
  animation: scheinPulsieren 5.5s var(--ease-inout) infinite alternate;
}

@keyframes scheinPulsieren {
  from { opacity: 0.55; transform: scale(0.97); }
  to   { opacity: 1;    transform: scale(1.03); }
}

/* Lichtreflex über das Abzeichen.

   FRÜHERE FASSUNG WAR FEHLERHAFT: Der Reflex lag als eigene Ebene ÜBER der
   Beschriftung. Dadurch wurden Schrift und Fläche gleichzeitig aufgehellt,
   der Kontrast fiel beim Durchlauf von 9,9:1 auf rund 1,7:1 und das Wort
   "Empfehlung" verschwand alle viereinhalb Sekunden.

   Jetzt ist der Reflex Teil des Hintergrundverlaufs und liegt damit HINTER
   dem Text. Die Schrift bleibt durchgehend dunkel und voll lesbar. */
.price-card__badge {
  position: absolute;
  overflow: hidden;
  background: linear-gradient(112deg,
    #B08840 0%,
    var(--gold) 26%,
    #F7E9C4 42%,
    var(--gold) 58%,
    #B08840 100%);
  background-size: 300% 100%;
  background-position: 100% 50%;
  animation: abzeichenGlanz 5s var(--ease-out-soft) infinite;
}

@keyframes abzeichenGlanz {
  0%, 55%   { background-position: 100% 50%; }
  88%, 100% { background-position:   0% 50%; }
}

/* Der Stern im Abzeichen dreht sich beim Glanz kurz mit */
.price-card__badge::before {
  animation: sternFunkeln 4.5s var(--ease-out-soft) infinite;
}

@keyframes sternFunkeln {
  0%, 60%  { transform: rotate(0deg)   scale(1); }
  72%      { transform: rotate(90deg)  scale(1.35); }
  84%, 100%{ transform: rotate(180deg) scale(1); }
}


/* ==========================================================================
   18  TERMINKALENDER
   ========================================================================== */

/* Gewählter Tag und gewählte Uhrzeit bestätigen die Auswahl kurz */
.termin__tag[aria-pressed="true"],
.termin__zeit[aria-pressed="true"] {
  animation: auswahlBestaetigen 420ms var(--ease-back);
}

@keyframes auswahlBestaetigen {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}

/* Die Uhrzeiten erscheinen gestaffelt, sobald ein Tag gewählt wurde */
.termin__zeiten .termin__zeit {
  animation: zeitErscheinen 380ms var(--ease-out-soft) both;
  animation-delay: var(--verzug, 0ms);
}

@keyframes zeitErscheinen {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Die Zusammenfassung blendet auf, sobald sie vollständig ist */
.termin__zusammenfassung.ist-bereit {
  animation: bereitAufblenden 520ms var(--ease-back);
}

@keyframes bereitAufblenden {
  0%   { box-shadow: 0 0 0 0 rgba(200, 168, 95, 0); }
  50%  { box-shadow: 0 0 0 10px rgba(200, 168, 95, 0.18); }
  100% { box-shadow: 0 0 0 0 rgba(200, 168, 95, 0); }
}


/* ==========================================================================
   19  ERGÄNZUNG ZUR REDUZIERTEN BEWEGUNG
   Alles aus den Abschnitten 16 bis 18 wird ebenfalls abgeschaltet.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  [data-hg]::before,
  [data-hg]::after,
  .koernung,
  .price-card--featured::before,
  .price-card__badge::before,
  .price-card__badge::after,
  .termin__tag,
  .termin__zeit,
  .termin__zeiten .termin__zeit,
  .termin__zusammenfassung {
    animation: none !important;
  }

  /* Der Lichtreflex auf dem Abzeichen bleibt ganz aus */
  .price-card__badge::after {
    display: none !important;
  }

  .termin__zeiten .termin__zeit {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ==========================================================================
   20  ERGÄNZENDE EFFEKTE
   --------------------------------------------------------------------------
   Dieser Abschnitt ergänzt die Abschnitte 01 bis 19, ohne sie zu ersetzen.
   Er verändert weder Farben noch Abstände, Inhalte oder Seitenaufbau –
   ausschließlich Bewegung.

   Enthalten:
     20.1  Unschärfe beim Einblenden der Überschriften
     20.2  Wandernder Farbverlauf im hervorgehobenen Wort
     20.3  Räumliche Mausbewegung im Hero-Bereich
     20.4  Weiche Kanten zwischen den Abschnitten
     20.5  Laufender Rahmen am empfohlenen Paket
     20.6  Einheitliche Hover-Effekte auf den Unterseiten

   Grundsatz wie bisher: animiert werden nur transform, opacity und filter.
   Nichts davon löst eine Neuberechnung des Seitenaufbaus aus, es gibt also
   kein Ruckeln und keine springenden Inhalte.
   ========================================================================== */


/* --------------------------------------------------------------------------
   20.1  UNSCHÄRFE BEIM EINBLENDEN DER ÜBERSCHRIFTEN

   Bisher fuhren die Wörter hinter einer harten Kante hoch. Jetzt kommt
   zusätzlich eine leichte Unschärfe dazu, die sich beim Erscheinen auflöst.
   Dafür muss die Kante weichen: eine überstehende Unschärfe würde an einer
   beschneidenden Hülle abgeschnitten und als graue Kante sichtbar werden.
   -------------------------------------------------------------------------- */

[data-split] .wort {
  overflow: visible;
}

[data-split] .wort > span {
  transform: translateY(0.42em);
  opacity: 0;
  filter: blur(9px);
  transition: transform var(--dur-slow) var(--ease-out-soft),
              opacity 520ms var(--ease-out-soft),
              filter 620ms var(--ease-out-soft);
  transition-delay: var(--verzug, 0ms);
  will-change: transform, opacity, filter;
}

[data-split].ist-sichtbar .wort > span {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
}

/* Nach dem Einblenden wird die Ebene wieder freigegeben */
[data-split].ist-sichtbar .wort > span {
  will-change: auto;
}

/* Dieselbe Handschrift für Textblöcke: eine Spur Unschärfe, deutlich
   schwächer als bei den Überschriften.

   BEWUSST NICHT auf Karten: filter erzeugt einen neuen Stapelkontext. Beim
   empfohlenen Paket liegt der Lichtschein auf z-index -1 hinter der Karte –
   der würde darin eingesperrt und wäre nicht mehr sichtbar. Ebenso bleibt
   die klebende Terminübersicht ausgenommen, weil ein Filter am Vorfahren
   deren Haftpunkt verschiebt. */
[data-reveal]:is(
  .section__head, .page-hero__text, .intro-grid__head, .intro-grid__body,
  .leistung, .grundsatz, .zeitstrahl__punkt, .benefit, .kennzahl,
  .legal__block, .pricing__note, .cta-band__text, .cta-band__actions,
  .cta-band__direkt, .faq__item, .teaser__inhalt, .about__content,
  .contact__aside, .vergleich-huelle
) {
  filter: blur(4px);
  transition-property: opacity, transform, clip-path, filter;
}

/* Auch die Schärfe wird nur dort zurückgenommen, wo überhaupt unscharf
   begonnen wurde. Ein filter – selbst blur(0) – erzeugt sonst auf jedem
   eingeblendeten Element einen eigenen Stapelkontext, den niemand braucht. */
[data-reveal].ist-sichtbar:is(
  .section__head, .page-hero__text, .intro-grid__head, .intro-grid__body,
  .leistung, .grundsatz, .zeitstrahl__punkt, .benefit, .kennzahl,
  .legal__block, .pricing__note, .cta-band__text, .cta-band__actions,
  .cta-band__direkt, .faq__item, .teaser__inhalt, .about__content,
  .contact__aside, .vergleich-huelle
) {
  filter: blur(0);
}


/* --------------------------------------------------------------------------
   20.2  WANDERNDER FARBVERLAUF IM HERVORGEHOBENEN WORT

   Die Klasse .verlaufstext hebt bereits einzelne Wörter in Gold hervor.
   Der Verlauf wird jetzt breiter angelegt und langsam durchgeschoben,
   sodass das Licht durch das Wort wandert. Farben und Text bleiben gleich.
   -------------------------------------------------------------------------- */

.verlaufstext {
  background-size: 220% 100%;
  background-position: 0% 50%;
  animation: verlaufWandern 7s var(--ease-inout) infinite alternate;
}

@keyframes verlaufWandern {
  from { background-position:   0% 50%; }
  to   { background-position: 100% 50%; }
}


/* --------------------------------------------------------------------------
   20.3  RÄUMLICHE MAUSBEWEGUNG IM HERO-BEREICH

   script.js schreibt die Zeigerposition als --maus-x und --maus-y in den
   Hero-Bereich, jeweils im Bereich -1 bis 1. Die Ebenen folgen unterschiedlich
   stark und teilweise gegenläufig – daraus entsteht der Tiefeneindruck.

   Bewusst sehr kleine Wege: Schaltflächen dürfen nicht unter dem Zeiger
   wegwandern. Bewegt werden nur das Raster und die Überschrift.
   -------------------------------------------------------------------------- */

/* Das Raster liegt hinten und folgt am stärksten.
   Sein transform ist frei, weil es über background-position animiert wird. */
.hero[data-hg="aurora"]::after {
  transform: translate3d(calc(var(--maus-x, 0) * 22px),
                         calc(var(--maus-y, 0) * 16px), 0);
  transition: transform 900ms cubic-bezier(0.16, 0.8, 0.28, 1);
}

/* Die Überschrift liegt vorn und bewegt sich gegenläufig */
.hero .hero__title {
  transform: translate3d(calc(var(--maus-x, 0) * -7px),
                         calc(var(--maus-y, 0) * -5px), 0);
  transition: transform 700ms cubic-bezier(0.16, 0.8, 0.28, 1);
}

/* Der goldene Strich folgt dazwischen */
.hero .hero__strich {
  transform: translate3d(calc(var(--maus-x, 0) * -12px), 0, 0);
  transition: transform 800ms cubic-bezier(0.16, 0.8, 0.28, 1);
}


/* --------------------------------------------------------------------------
   20.4  WEICHE KANTEN ZWISCHEN DEN ABSCHNITTEN

   Dunkle und helle Abschnitte stießen bisher hart aneinander. Ein sehr
   schwacher Lichtsaum an Ober- und Unterkante lässt den Übergang weicher
   wirken. Die Grundfarben der Abschnitte bleiben unverändert.
   -------------------------------------------------------------------------- */

[data-hg="aurora"]::before,
[data-hg="strahlen"]::before {
  /* Die bestehenden Lichtkegel bleiben, es kommt nur der Saum hinzu. */
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, transparent 15%),
    linear-gradient(0deg,   rgba(255, 255, 255, 0.035) 0%, transparent 12%),
    var(--schleier, none);
}

/* Die bestehenden Lichtkegel werden in eine Variable ausgelagert,
   damit sie zusammen mit dem Saum in einer Ebene liegen können. */
[data-hg="aurora"]::before {
  --schleier:
    radial-gradient(58% 44% at 18% 8%,  var(--schein-gold) 0%, transparent 62%),
    radial-gradient(52% 40% at 88% 22%, var(--schein-blau) 0%, transparent 66%),
    radial-gradient(70% 55% at 62% 96%, var(--schein-tief) 0%, transparent 70%);
}

[data-hg="strahlen"]::before {
  --schleier:
    conic-gradient(from 210deg at 50% -18%,
      transparent 0deg,
      rgba(200, 168, 95, 0.30) 24deg,
      transparent 52deg,
      rgba(64, 124, 196, 0.26) 78deg,
      transparent 108deg),
    radial-gradient(85% 65% at 50% 118%, rgba(26, 64, 116, 0.85) 0%, transparent 74%);
}


/* --------------------------------------------------------------------------
   20.5  LAUFENDER RAHMEN AM EMPFOHLENEN PAKET

   Der Goldrahmen des mittleren Pakets stand bisher still. Jetzt dreht sich
   der Verlauf langsam einmal um die Karte. Umgesetzt über eine registrierte
   Winkel-Eigenschaft, damit der Browser den Winkel weich interpolieren kann.

   Kennt ein Browser @property nicht, bleibt der bisherige feste Verlauf –
   die Karte sieht dann genauso aus wie vorher.
   -------------------------------------------------------------------------- */

@property --rahmenwinkel {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@supports (background: conic-gradient(from 0deg, red, blue)) {

  .price-card--featured {
    background:
      linear-gradient(var(--flaeche), var(--flaeche)) padding-box,
      conic-gradient(from var(--rahmenwinkel),
        var(--gold-ink) 0deg,
        var(--gold) 70deg,
        #F4E3BC 140deg,
        var(--gold) 210deg,
        var(--gold-ink) 300deg,
        var(--gold-ink) 360deg) border-box;
    animation: rahmenDrehen 9s linear infinite;
  }

  /* Auf dunklem Grund gilt dieselbe Drehung. Die Regel muss die höhere
     Kennzeichnung aus styles.css Abschnitt 25 erreichen, sonst würde dort
     der feste Verlauf gewinnen und der Rahmen stünde still. */
  .section--dark .price-card--featured {
    background:
      linear-gradient(158deg,
        rgba(255, 255, 255, 0.13) 0%,
        rgba(255, 255, 255, 0.05) 100%) padding-box,
      linear-gradient(var(--navy-800), var(--navy-800)) padding-box,
      conic-gradient(from var(--rahmenwinkel),
        var(--gold-ink) 0deg,
        var(--gold) 70deg,
        #F4E3BC 140deg,
        var(--gold) 210deg,
        var(--gold-ink) 300deg,
        var(--gold-ink) 360deg) border-box;
    animation: rahmenDrehen 9s linear infinite;
  }

  @keyframes rahmenDrehen {
    to { --rahmenwinkel: 360deg; }
  }
}


/* --------------------------------------------------------------------------
   20.6  EINHEITLICHE HOVER-EFFEKTE AUF DEN UNTERSEITEN

   Karten auf der Startseite heben sich beim Überfahren bereits an. Damit die
   Unterseiten sich gleich anfühlen, bekommen ihre Bausteine dieselbe, sehr
   zurückhaltende Reaktion. Größe, Farbe und Abstände bleiben unverändert.
   -------------------------------------------------------------------------- */

.leistung,
.grundsatz,
.zeitstrahl__punkt,
.kennzahl,
.benefit {
  transition: transform 320ms var(--ease-out-soft);
}

@media (hover: hover) and (pointer: fine) {

  .leistung:hover,
  .grundsatz:hover,
  .zeitstrahl__punkt:hover,
  .kennzahl:hover,
  .benefit:hover {
    transform: translateY(-3px);
  }
}

/* Die Nummer eines Grundsatzes füllt sich beim Überfahren */
.grundsatz::before {
  transition: background-color 320ms var(--ease-out-soft),
              color 320ms var(--ease-out-soft),
              transform 420ms var(--ease-back);
}

.grundsatz:hover::before {
  background-color: var(--gold);
  color: var(--ink);
  transform: scale(1.08);
}

/* Der Punkt am Zeitstrahl wächst leicht */
.zeitstrahl__punkt::before {
  transition: transform 420ms var(--ease-back),
              box-shadow 320ms var(--ease-out-soft);
}

.zeitstrahl__punkt:hover::before {
  transform: scale(1.35);
  box-shadow: 0 0 0 6px rgba(200, 168, 95, 0.18);
}

/* Die Oberkante der Vorteilsblöcke leuchtet auf */
.benefit {
  transition: transform 320ms var(--ease-out-soft),
              border-top-color 320ms var(--ease-out-soft);
}

.benefit:hover {
  border-top-color: var(--gold);
}

/* Aufklappbare Fragen heben sich ebenfalls leicht an */
.faq__item {
  transition: border-color var(--dur-fast) var(--ease-out-soft),
              box-shadow var(--dur-fast) var(--ease-out-soft),
              transform 320ms var(--ease-out-soft);
}

@media (hover: hover) and (pointer: fine) {
  .faq__item:hover {
    transform: translateY(-2px);
  }
}


/* --------------------------------------------------------------------------
   20.7  REDUZIERTE BEWEGUNG
   Alles aus Abschnitt 20 wird mit abgeschaltet.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  [data-split] .wort > span,
  [data-reveal],
  [data-reveal].ist-sichtbar {
    filter: none !important;
  }

  .verlaufstext,
  .price-card--featured {
    animation: none !important;
  }

  /* Keine Mausbewegung, keine Hover-Verschiebung */
  .hero[data-hg="aurora"]::after,
  .hero .hero__title,
  .hero .hero__strich,
  .leistung:hover,
  .grundsatz:hover,
  .zeitstrahl__punkt:hover,
  .kennzahl:hover,
  .benefit:hover,
  .faq__item:hover {
    transform: none !important;
  }

  .grundsatz:hover::before,
  .zeitstrahl__punkt:hover::before {
    transform: none !important;
  }
}


/* Ohne JavaScript darf nichts unscharf oder unsichtbar zurückbleiben */
html.no-js [data-split] .wort > span,
html.no-js [data-reveal] {
  opacity: 1;
  transform: none;
  filter: none;
}


/* ==========================================================================
   21  RÄUMLICHER HERO-BEREICH
   --------------------------------------------------------------------------
   Der Hero wird zu einer echten 3D-Bühne. Die Inhalte liegen auf
   unterschiedlichen Tiefen, und die ganze Bühne kippt der Maus entgegen.
   Weil die Ebenen verschieden weit vorn stehen, verschieben sie sich
   unterschiedlich stark – daraus entsteht der räumliche Eindruck.

   Ersetzt die flache Verschiebung aus Abschnitt 20.3. Farben, Texte,
   Schriftgrößen und Abstände bleiben unverändert.
   ========================================================================== */

/* Die Bühne: hier wird die Fluchtpunktweite festgelegt.
   Kleinere Werte wirken dramatischer, größere ruhiger. */
.hero {
  perspective: 1100px;
  perspective-origin: 50% 42%;
}

/* Die Inhaltsgruppe kippt als Ganzes und behält dabei die Tiefe ihrer Kinder */
.hero__inner {
  transform-style: preserve-3d;
  transform:
    rotateY(calc(var(--maus-x, 0) * 5deg))
    rotateX(calc(var(--maus-y, 0) * -3.5deg));
  transition: transform 900ms cubic-bezier(0.16, 0.8, 0.28, 1);
}

/* --- Tiefenstaffelung ------------------------------------------------------
   Je größer der Wert, desto weiter steht die Ebene vorn und desto stärker
   wandert sie beim Kippen. Bewusst kleine Werte: Bei 1100px Fluchtpunktweite
   entspricht 38px gerade einmal 3,5 % scheinbarer Vergrößerung, die Größen
   des bestehenden Entwurfs bleiben also praktisch unverändert.
   -------------------------------------------------------------------------- */

.hero__eyebrow  { --tiefe: 14px; }
.hero__title    { --tiefe: 38px; }
.hero__strich   { --tiefe: 30px; }
.hero__subtitle { --tiefe: 10px; }
.hero__actions  { --tiefe: 22px; }
.factbar        { --tiefe:  4px; }

/* Überschrift und Strich haben keine eigene Einlaufbewegung,
   sie bekommen ihre Tiefe direkt. */
.hero .hero__title,
.hero .hero__strich {
  transform: translateZ(var(--tiefe, 0));
  transition: none;
}

/* Die übrigen Bestandteile laufen weiterhin nacheinander ein – jetzt aber
   in ihre jeweilige Tiefe hinein statt auf die Nullebene.
   Diese Neudefinition ersetzt die Fassung aus Abschnitt 05. */
@keyframes heroTeil {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, var(--tiefe, 0)); }
}

/* Das Raster im Hintergrund liegt hinter der Bühne und wandert gegenläufig.
   Es steht außerhalb von .hero__inner, wird also nicht mitgekippt. */
.hero[data-hg="aurora"]::after {
  transform: translate3d(calc(var(--maus-x, 0) * 26px),
                         calc(var(--maus-y, 0) * 18px), 0);
  transition: transform 1100ms cubic-bezier(0.16, 0.8, 0.28, 1);
}

/* Auf Geräten ohne Maus kippt die Bühne von allein sehr langsam hin und her,
   damit der räumliche Eindruck auch dort entsteht. */
@media (hover: none) {
  .hero__inner {
    animation: buehneSchweben 18s var(--ease-inout) infinite alternate;
  }
}

@keyframes buehneSchweben {
  from { transform: rotateY(-1.8deg) rotateX( 1.0deg); }
  to   { transform: rotateY( 1.8deg) rotateX(-1.0deg); }
}


/* --- Bei reduzierter Bewegung bleibt die Bühne flach ---------------------- */

@media (prefers-reduced-motion: reduce) {

  .hero {
    perspective: none;
  }

  .hero__inner {
    transform: none !important;
    animation: none !important;
  }

  .hero .hero__title,
  .hero .hero__strich,
  .hero[data-hg="aurora"]::after {
    transform: none !important;
  }

  .hero__eyebrow,
  .hero__subtitle,
  .hero__actions,
  .factbar {
    transform: none !important;
  }
}

/* Ohne JavaScript bleibt die Bühne ebenfalls flach und vollständig sichtbar */
html.no-js .hero__inner {
  transform: none;
}


/* ==========================================================================
   22  NEUER HERO-BEREICH
   --------------------------------------------------------------------------
   Farbwechsel in der Überschrift, schwebender Laptop, wandernder Reflex auf
   dem Bildschirm und leicht auf- und abgehende Kennzeichnungen.
   ========================================================================== */


/* --- 22.1  Farbwechselndes Wort in der Überschrift -------------------------
   script.js vergibt die Klasse an das Wort, das in data-akzent steht.
   Der Verlauf ist dreimal so breit wie das Wort und wird langsam
   durchgeschoben – dadurch wandern die Goldtöne durch die Buchstaben.
   -------------------------------------------------------------------------- */

.wort__akzent {
  background-image: linear-gradient(96deg,
    #C8A85F  0%,
    #F4E3BC 14%,
    #E2C176 28%,
    #C08C2E 42%,
    #F7EDD2 56%,
    #D9B96E 70%,
    #B98F3E 84%,
    #C8A85F 100%);
  background-size: 320% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: akzentFarben 11s var(--ease-inout) infinite;
}

@keyframes akzentFarben {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

/* Kennt der Browser den Textzuschnitt nicht, bleibt das Wort schlicht golden */
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .wort__akzent {
    color: var(--gold);
    -webkit-text-fill-color: var(--gold);
    animation: none;
  }
}

/* Die Überschrift darf in der schmaleren Spalte breiter laufen */
@media (min-width: 75em) {
  .hero__title {
    max-width: none;
  }
}


/* --- 22.2  Schwebender Laptop ---------------------------------------------- */

.laptop {
  animation: laptopSchweben 9s var(--ease-inout) infinite;
}

@keyframes laptopSchweben {
  0%   { transform: rotateY(var(--neigung)) rotateX(var(--kippung)) translateY(0); }
  50%  { transform: rotateY(calc(var(--neigung) * 0.72))
                    rotateX(calc(var(--kippung) * 0.7))
                    translateY(-12px); }
  100% { transform: rotateY(var(--neigung)) rotateX(var(--kippung)) translateY(0); }
}

/* Der Lichtschein dahinter atmet mit */
.laptop::before {
  animation: geraeteSchein 7s var(--ease-inout) infinite alternate;
}

@keyframes geraeteSchein {
  from { opacity: 0.7; transform: scale(0.96); }
  to   { opacity: 1;   transform: scale(1.06); }
}

/* Reflex wandert über den Bildschirm */
.laptop__glanz {
  animation: schirmGlanz 6.5s var(--ease-out-soft) infinite;
}

@keyframes schirmGlanz {
  0%, 58%   { transform: translateX(-115%); }
  92%, 100% { transform: translateX(115%); }
}

/* Die Bühne bekommt ihre Tiefe in der 3D-Szene aus Abschnitt 21 */
.hero .hero__buehne {
  transform: translateZ(var(--tiefe, 0));
}


/* --- 22.3  Schwebende Kennzeichnungen -------------------------------------- */

.hero__chip--oben {
  animation: chipSchweben 6s var(--ease-inout) infinite alternate;
}

.hero__chip--unten {
  animation: chipSchweben 7.5s var(--ease-inout) 1.2s infinite alternate-reverse;
}

@keyframes chipSchweben {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-6px, -12px, 0); }
}

/* Die persönliche Notiz wippt kaum merklich */
.hero__notiz {
  animation: notizWippen 8s var(--ease-inout) infinite alternate;
}

@keyframes notizWippen {
  from { transform: rotate(-7deg)   translateY(0); }
  to   { transform: rotate(-5.5deg) translateY(-6px); }
}


/* --- 22.4  Goldene Lichtbögen ---------------------------------------------- */

.hero__boegen {
  animation: boegenDrehen 34s linear infinite;
}

@keyframes boegenDrehen {
  from { transform: rotate(0deg)   scale(1); }
  50%  { transform: rotate(180deg) scale(1.06); }
  to   { transform: rotate(360deg) scale(1); }
}


/* --- 22.5  Einlaufen des Hero-Bereichs ------------------------------------- */

/* Bühne, Merkmale und Notiz reihen sich in die bestehende Choreografie ein */
.hero__merkmale,
.hero__buehne {
  opacity: 0;
  animation: heroTeil var(--dur-slow) var(--ease-out-soft) forwards;
}

.hero__merkmale { animation-delay: 900ms; }
.hero__buehne   { animation-delay: 520ms; }

/* Die Kennzeichnungen erscheinen zuletzt und einzeln */
.hero__chip,
.hero__notiz {
  opacity: 0;
  animation:
    heroTeil 620ms var(--ease-out-soft) forwards,
    chipSchweben 6s var(--ease-inout) infinite alternate;
}

.hero__chip--oben  { animation-delay: 1250ms, 1900ms; }
.hero__chip--unten { animation-delay: 1420ms, 2100ms; }

.hero__notiz {
  animation:
    heroTeil 620ms var(--ease-out-soft) 1600ms forwards,
    notizWippen 8s var(--ease-inout) 2200ms infinite alternate;
}


/* --- 22.6  Reduzierte Bewegung --------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .wort__akzent,
  .laptop,
  .laptop::before,
  .laptop__glanz,
  .hero__chip,
  .hero__notiz,
  .hero__boegen,
  .hero__merkmale,
  .hero__buehne {
    animation: none !important;
  }

  .hero__merkmale,
  .hero__buehne,
  .hero__chip,
  .hero__notiz {
    opacity: 1 !important;
  }

  .laptop {
    transform: rotateY(var(--neigung)) rotateX(var(--kippung)) !important;
  }

  .laptop__glanz {
    transform: translateX(-115%) !important;
  }
}

/* Ohne JavaScript bleibt der gesamte Hero sichtbar */
html.no-js .hero__merkmale,
html.no-js .hero__buehne,
html.no-js .hero__chip,
html.no-js .hero__notiz {
  opacity: 1;
  animation: none;
}


/* ==========================================================================
   22  WEITERE EINBLENDARTEN FÜR DIE UNTERSEITEN
   --------------------------------------------------------------------------
   Damit sich die Unterseiten voneinander unterscheiden, bekommt jede eine
   eigene Bewegung. Die Varianten aus Abschnitt 03 werden hier ergänzt:

     data-reveal="aufklappen"   klappt von oben herein
     data-reveal="heranziehen"  kommt aus der Tiefe nach vorn
     data-reveal="neigen"       richtet sich aus der Schräge auf
   ========================================================================== */

[data-reveal="aufklappen"] {
  transform: perspective(900px) rotateX(-14deg) translateY(26px);
  transform-origin: 50% 0;
}

[data-reveal="heranziehen"] {
  transform: scale(1.07);
}

[data-reveal="neigen"] {
  transform: rotate(-1.8deg) translateY(28px);
  transform-origin: 20% 100%;
}

/* Alle drei enden im Normalzustand – das regelt bereits die Regel
   [data-reveal].ist-sichtbar aus Abschnitt 03. */

@media (prefers-reduced-motion: reduce) {
  [data-reveal="aufklappen"],
  [data-reveal="heranziehen"],
  [data-reveal="neigen"] {
    transform: none !important;
  }
}