/* burnt. – Animationen
   Additiv: entfernt man die Einbindung im Seitenkopf, bleibt die Seite unverändert.
   Alles respektiert prefers-reduced-motion. */

/* 01 Überschriften steigen auf */
.a-split > span { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.js-anim .a-split > span > i {
  display: block; font-style: normal;
  transform: translateY(102%);
  transition: transform .95s cubic-bezier(.16,1,.3,1);
}
.a-split > span > i { display: block; font-style: normal; }
.a-split.an > span > i { transform: translateY(0); }
.a-split.an > span:nth-child(2) > i { transition-delay: .11s; }
.a-split.an > span:nth-child(3) > i { transition-delay: .22s; }
.a-split.an > span:nth-child(4) > i { transition-delay: .33s; }

/* 02 Blöcke blenden beim Scrollen auf */
.js-anim .a-rv { opacity: 0; transform: translateY(16px); filter: blur(3px);
  transition: opacity .7s ease, transform .9s cubic-bezier(.16,1,.3,1), filter .7s ease; }
.a-rv.an { opacity: 1; transform: none; filter: none; }
.a-rv.a-d1 { transition-delay: .09s; }
.a-rv.a-d2 { transition-delay: .18s; }

/* 03 Zahlen zählen hoch */
.a-num { font-variant-numeric: tabular-nums; }

/* 04 Bilder werden aufgewischt */
.js-anim .a-wipe { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s cubic-bezier(.16,1,.3,1); }
.a-wipe.an { clip-path: inset(0 0 0 0); }
.a-wipe > img { transform: scale(1.14); transition: transform 1.6s cubic-bezier(.16,1,.3,1); }
.a-wipe.an > img { transform: scale(1.08); }

/* 05 Zitat schärft sich Wort für Wort */
.js-anim .a-wort > span { opacity: .18; transition: opacity .55s ease; }
.a-wort.an > span { opacity: 1; }
.a-wort.an > span:nth-child(1) { transition-delay: 0s; }
.a-wort.an > span:nth-child(2) { transition-delay: .07s; }
.a-wort.an > span:nth-child(3) { transition-delay: .14s; }
.a-wort.an > span:nth-child(4) { transition-delay: .21s; }
.a-wort.an > span:nth-child(5) { transition-delay: .28s; }
.a-wort.an > span:nth-child(6) { transition-delay: .35s; }
.a-wort.an > span:nth-child(7) { transition-delay: .42s; }
.a-wort.an > span:nth-child(8) { transition-delay: .49s; }
.a-wort.an > span:nth-child(n+9) { transition-delay: .56s; }

/* 06 Fläche schiebt sich als Vorhang über die vorige */
.a-vorhang { position: relative; isolation: isolate; overflow: hidden; }
.js-anim .a-vorhang::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--surface-bg);
  transform: translateY(100%);
  transition: transform 1.05s cubic-bezier(.65,0,.2,1);
}
.a-vorhang.an::before { transform: translateY(0); }

/* 07 Knöpfe und Links antworten */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-hover-bg);
  transform: translateY(101%);
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.btn:hover { background-color: transparent; }
.btn:hover::before { transform: translateY(0); }

/* Unterstreichung beim Darüberfahren: schlicht, ohne Laufanimation */
.m14-item:hover .m14-title, .m05-item:hover .m05-t,
.m03-card:hover .m03-t, .m04-card:hover .m04-t,
.m21-item:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.m14-item:hover .m14-title, .m05-item:hover .m05-t,
.m03-card:hover .m03-t, .m04-card:hover .m04-t,
.m21-item:hover h3 { text-decoration: none; }

/* Abschalten */
body.ohne-anim *, body.ohne-anim *::before, body.ohne-anim *::after { transition: none !important; animation: none !important; }
body.ohne-anim .a-split > span > i { transform: none; }
body.ohne-anim .a-rv { opacity: 1; transform: none; filter: none; }
body.ohne-anim .a-wipe { clip-path: none; }
body.ohne-anim .a-wipe > img { transform: none; }
body.ohne-anim .a-wort > span { opacity: 1; }
body.ohne-anim .a-vorhang::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .a-split > span > i { transform: none; }
  .a-rv { opacity: 1; transform: none; filter: none; }
  .a-wipe { clip-path: none; }
  .a-wipe > img { transform: none; }
  .a-wort > span { opacity: 1; }
  .a-vorhang::before { display: none; }
}

/* 08 Parallax: Bilder wandern beim Scrollen langsamer als die Seite */
.a-wipe.bereit > img { transition: none; will-change: transform; }
.a-wipe.an:not(.bereit) > img { transition: transform .6s cubic-bezier(.16,1,.3,1); }
body.ohne-anim .a-wipe.bereit > img { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .a-wipe.bereit > img { transform: none !important; }
}

/* Sicherheitsnetz: Bilder und Texte bleiben sichtbar, wenn eine Animation
   nicht startet oder der Browser clip-path nicht beherrscht. */
@supports not (clip-path: inset(100% 0 0 0)) {
  .js-anim .a-wipe { clip-path: none !important; }
}
.js-anim .a-wipe > img { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js-anim .a-rv, .js-anim .a-wipe, .js-anim .a-wort > span,
  .js-anim .a-split > span > i, .js-anim .a-vorhang::before {
    opacity: 1 !important; transform: none !important;
    filter: none !important; clip-path: none !important; transition: none !important;
  }
}