/* AC/DC: Bewegung (vom Kunden gewählte Fassung, 01.10.2026).
   Regeln nach Emil Kowalski (Skill emilkowal-animations):
   - jede Animation hat einen Zweck (Orientierung, Aufmerksamkeit, Rückmeldung)
   - Marketingseite: Einblendungen 600–900 ms erlaubt; Knöpfe/Hover 150–200 ms
   - nur transform, opacity und clip-path; Kurven statt Standard-Easing
   - Einblendung erst 100 px im Viewport, nur einmal (bewegung.js)
   - Hover nur bei echtem Zeiger; bei "Bewegung reduzieren" nur sanfte Überblendung
   Ohne JavaScript ist alles sofort sichtbar: versteckt wird nur unter html.bewegung, das der
   Seitenkopf setzt und nach 2,5 s zurücknimmt, wenn der Hero bis dahin nicht eingeblendet ist. */

:root {
  --aus: cubic-bezier(0.23, 1, 0.32, 1);        /* kräftiges ease-out: Einblenden */
  --durch: cubic-bezier(0.77, 0, 0.175, 1);     /* ease-in-out: Bewegung auf der Fläche */
  --einblenden: 700ms;
}

/* ---------- Einblenden beim Scrollen (Orientierung: was gehört zusammen) ----------
   Der Ausgangszustand steht hier statisch, nicht im Skript: so ist er schon beim ersten
   Bildaufbau gesetzt und nichts flackert, auch nicht im ersten Bildausschnitt. */
.bewegung :is(.ac-eyebrow, .ac-titel, .ac-intro, .ac-need__text p, .ac-eisberg__text, .ac-cases__unter,
  .ac-kontakt__text, .ac-kontakt__wege, .ac-raster > *, .ac-vergleich__raster > *, .ac-ergebnis__raster > *,
  .ac-kontakt__personen > *, .ac-faq__liste > *, .ac-fragen__satz, .ac-fragen__liste li, .ac-fragen__fazit,
  .ac-warum__buehne, .ac-hero__titel, .ac-hero__lead, .ac-hero__aktionen) {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--einblenden) var(--aus), transform var(--einblenden) var(--aus);
  transition-delay: var(--verzug, 0ms);
}
.bewegung :is(.ac-eyebrow, .ac-titel, .ac-intro, .ac-need__text p, .ac-eisberg__text, .ac-cases__unter,
  .ac-kontakt__text, .ac-kontakt__wege, .ac-raster > *, .ac-vergleich__raster > *, .ac-ergebnis__raster > *,
  .ac-kontakt__personen > *, .ac-faq__liste > *, .ac-fragen__satz, .ac-fragen__liste li, .ac-fragen__fazit,
  .ac-warum__buehne, .ac-hero__titel, .ac-hero__lead, .ac-hero__aktionen).ist-sichtbar { opacity: 1; transform: none; }

/* Kennzahlen: Zahl erst zeigen, wenn sie bei 0 steht – sonst blitzt kurz der Endwert auf */
.bewegung .ac-stat__num { opacity: 0; transition: opacity 300ms var(--aus); transition-delay: var(--verzug, 0ms); }
.bewegung .ac-stat.ist-sichtbar .ac-stat__num { opacity: 1; }

/* Hero: Hintergrund setzt sich leicht, damit der Blick auf dem Text landet */
.bewegung .ac-hero__bild { transform: scale(1.04); transition: transform 1600ms var(--aus); }
.bewegung .ac-hero.ist-sichtbar .ac-hero__bild { transform: none; }

/* Kennzahlen: Icon erscheint vor der Zahl, die dann hochzählt (bewegung.js) */
.bewegung .ac-stat__icon { opacity: 0; transform: scale(.9); transition: opacity 500ms var(--aus), transform 500ms var(--aus); transition-delay: var(--verzug, 0ms); }
.bewegung .ac-stat.ist-sichtbar .ac-stat__icon { opacity: 1; transform: none; }

/* "3": wächst von unten aus der Fläche, dann folgen die drei Fragen einzeln */
.bewegung .ac-fragen__drei { clip-path: inset(100% 0 0 0); transition: clip-path 900ms var(--durch); }
.bewegung .ac-fragen.ist-sichtbar .ac-fragen__drei { clip-path: inset(0 0 0 0); }

/* Eisberg: von oben nach unten aufdecken – erst über, dann unter der Wasserlinie */
.bewegung .ac-eisberg__bild { clip-path: inset(0 0 100% 0); transition: clip-path 1200ms var(--durch); }
.bewegung .ac-eisberg__bild.ist-sichtbar { clip-path: inset(0 0 0 0); }

/* Ablauf: Doppelpfeile schieben in Leserichtung nach, das zeigt die Abfolge */
.bewegung .ac-schritt::after { opacity: 0; transform: translateX(-14px); transition: opacity 600ms var(--aus), transform 600ms var(--aus); transition-delay: calc(var(--verzug, 0ms) + 200ms); }
.bewegung .ac-schritt.ist-sichtbar::after { opacity: .18; transform: none; }

/* Querbalken (Shared foundation, Across both, Impact): legen sich von links an */
.bewegung .ac-vergleich__fuss, .bewegung .ac-ergebnis__fuss, .bewegung .ac-case__impact {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 800ms var(--durch);
  transition-delay: var(--verzug, 0ms);
}
.bewegung .ac-vergleich__fuss.ist-sichtbar, .bewegung .ac-ergebnis__fuss.ist-sichtbar,
.bewegung .ac-case.ist-sichtbar .ac-case__impact { clip-path: inset(0 0 0 0); }
.bewegung .ac-case.ist-sichtbar .ac-case__impact { transition-delay: calc(var(--verzug, 0ms) + 250ms); }

/* ---------- Rückmeldung bei Interaktion ---------- */
.ac-btn { transition: background-color 200ms var(--aus), transform 150ms var(--aus); }
.ac-btn:active { transform: scale(.97); }
.ac-btn span, .ac-link span { display: inline-block; transition: transform 200ms var(--aus); }

@media (hover: hover) and (pointer: fine) {
  .ac-btn:hover span, .ac-link:hover span:not(:empty) { transform: translateX(3px); }
  .ac-link[href="#how"]:hover span { transform: translateY(3px); }
  .ac-foto img { transition: transform 700ms var(--aus); }
  .ac-foto:hover img { transform: scale(1.03); }
  .ac-case { transition: transform 250ms var(--aus); }
  .ac-case:hover { transform: translateY(-3px); }
}

/* FAQ: Antwort klappt weich auf statt zu springen (Chrome/Edge ab 131, sonst wie bisher) */
@supports (interpolate-size: allow-keywords) {
  .ac-faq { interpolate-size: allow-keywords; }
  .ac-faq__eintrag::details-content {
    height: 0; overflow: clip;
    transition: height 300ms var(--aus), content-visibility 300ms allow-discrete;
  }
  .ac-faq__eintrag[open]::details-content { height: auto; }
}

/* ---------- Bewegung reduzieren: nichts bewegt sich, Übergänge bleiben als Überblendung ---------- */
@media (prefers-reduced-motion: reduce) {
  .bewegung :is(.ac-eyebrow, .ac-titel, .ac-intro, .ac-need__text p, .ac-eisberg__text, .ac-cases__unter,
    .ac-kontakt__text, .ac-kontakt__wege, .ac-raster > *, .ac-vergleich__raster > *, .ac-ergebnis__raster > *,
    .ac-kontakt__personen > *, .ac-faq__liste > *, .ac-fragen__satz, .ac-fragen__liste li, .ac-fragen__fazit,
    .ac-warum__buehne, .ac-hero__titel, .ac-hero__lead, .ac-hero__aktionen) { transform: none; transition: opacity 250ms ease-out; transition-delay: 0ms; }
  .bewegung .ac-hero__bild { transform: none; transition: none; }
  .bewegung .ac-stat__icon { transform: none; transition: opacity 250ms ease-out; }
  .bewegung .ac-fragen__drei, .bewegung .ac-eisberg__bild,
  .bewegung .ac-vergleich__fuss, .bewegung .ac-ergebnis__fuss, .bewegung .ac-case__impact { clip-path: none; transition: none; }
  .bewegung .ac-schritt::after { transform: none; transition: opacity 250ms ease-out; }
  .ac-btn:active { transform: none; }
  .ac-foto:hover img, .ac-case:hover { transform: none; }
}