@charset "UTF-8";
/* =========================================================
   ADKRU LP — Animations
   Reveals laufen nur wenn html.adkru-anim-ready gesetzt ist
   (JS-Ready-Marker). Ohne JS oder bei prefers-reduced-motion
   bleibt der Marker aus -> alle Blöcke sofort sichtbar.

   Tonalität: ADKRU = "richtig Bewegung". Reveals haben
   spürbare Distanzen + leichten Back-Out-Overshoot. Loops
   sind kontinuierlich und deutlich sichtbar, nicht zaghaft.

   Loops laufen auf [data-anim-loop="loop-*"].is-loop-active.
   Das Gating verhindert Konflikt mit Reveal-Transform: erst wenn
   view.js die Klasse setzt (sofort beim Mount wenn kein Reveal,
   sonst nach Reveal-transitionend) startet die animation-Property.

   Scroll-Scrub via @supports (animation-timeline: view()) als
   Progressive Enhancement; Safari fällt auf statisch zurück.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* === Reveals (one-shot on intersection) === */
  /* Easing: cubic-bezier(.34, 1.56, .64, 1) = "back.out" — sanftes Overshoot für Präsenz. */
  html.adkru-anim-ready [data-anim=fade-in],
  html.adkru-anim-ready [data-anim=fly-left],
  html.adkru-anim-ready [data-anim=fly-right],
  html.adkru-anim-ready [data-anim=fly-up] {
    opacity: 0;
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: opacity, transform;
  }
  html.adkru-anim-ready [data-anim=fade-in] {
    transform: translateY(48px) scale(0.94);
  }
  html.adkru-anim-ready [data-anim=fly-left] {
    transform: translateX(-160px) scale(0.96);
  }
  html.adkru-anim-ready [data-anim=fly-right] {
    transform: translateX(160px) scale(0.96);
  }
  html.adkru-anim-ready [data-anim=fly-up] {
    transform: translateY(120px) scale(0.96);
  }
  html.adkru-anim-ready [data-anim=expand] {
    transform: scale(0.35);
    transform-origin: center;
  }
  /* Mobile: kürzere Reveal-Distanzen, damit Initial-State nicht
     so weit out-of-viewport schiebt (war wesentlicher Mitverursacher
     des horizontal Overflow vor dem clip-Sicherheitsnetz). */
}
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  html.adkru-anim-ready [data-anim=fade-in] {
    transform: translateY(28px) scale(0.96);
  }
  html.adkru-anim-ready [data-anim=fly-left] {
    transform: translateX(-60px) scale(0.98);
  }
  html.adkru-anim-ready [data-anim=fly-right] {
    transform: translateX(60px) scale(0.98);
  }
  html.adkru-anim-ready [data-anim=fly-up] {
    transform: translateY(60px) scale(0.98);
  }
  html.adkru-anim-ready [data-anim=expand] {
    transform: scale(0.6);
  }
}
@media (prefers-reduced-motion: no-preference) {
  html.adkru-anim-ready [data-anim=fade-in].is-anim-in,
  html.adkru-anim-ready [data-anim=fly-left].is-anim-in,
  html.adkru-anim-ready [data-anim=fly-right].is-anim-in,
  html.adkru-anim-ready [data-anim=fly-up].is-anim-in,
  html.adkru-anim-ready [data-anim=expand].is-anim-in {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  /* === Stagger-Up: Parent triggert, direkte Kinder gestaffelt rein === */
  html.adkru-anim-ready [data-anim=stagger-up] > * {
    opacity: 0;
    transform: translateY(70px) scale(0.94);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
  html.adkru-anim-ready [data-anim=stagger-up] > * {
    transform: translateY(36px) scale(0.96);
  }
}
@media (prefers-reduced-motion: no-preference) {
  html.adkru-anim-ready [data-anim=stagger-up].is-anim-in > * {
    opacity: 1;
    transform: none;
  }
  html.adkru-anim-ready [data-anim=stagger-up].is-anim-in > *:nth-child(1) {
    transition-delay: 0ms;
  }
  html.adkru-anim-ready [data-anim=stagger-up].is-anim-in > *:nth-child(2) {
    transition-delay: 140ms;
  }
  html.adkru-anim-ready [data-anim=stagger-up].is-anim-in > *:nth-child(3) {
    transition-delay: 280ms;
  }
  html.adkru-anim-ready [data-anim=stagger-up].is-anim-in > *:nth-child(4) {
    transition-delay: 420ms;
  }
  html.adkru-anim-ready [data-anim=stagger-up].is-anim-in > *:nth-child(5) {
    transition-delay: 560ms;
  }
  html.adkru-anim-ready [data-anim=stagger-up].is-anim-in > *:nth-child(6) {
    transition-delay: 700ms;
  }
  html.adkru-anim-ready [data-anim=stagger-up].is-anim-in > *:nth-child(n+7) {
    transition-delay: 840ms;
  }
}
@media (prefers-reduced-motion: no-preference) {
  /* === Loops (gated durch .is-loop-active, view.js setzt es) === */
  /* Wobble: deutliches Hin-und-Her-Wiegen, klar sichtbar */
  @keyframes adkru-wobble {
    0%, 100% {
      transform: rotate(0deg);
    }
    20% {
      transform: rotate(-7deg);
    }
    40% {
      transform: rotate(5deg);
    }
    60% {
      transform: rotate(-5deg);
    }
    80% {
      transform: rotate(6deg);
    }
  }
  [data-anim-loop=loop-wobble].is-loop-active {
    animation: adkru-wobble 2.4s ease-in-out infinite;
    transform-origin: center;
  }
  /* Shake: kontinuierliches schnelles Zittern mit größerem Hub.
     Pulst mit 2.2s Cycle (1s zittern, 1.2s ruhig) damit's nicht
     nervt aber klar auf sich aufmerksam macht. */
  @keyframes adkru-shake-pulse {
    0%, 45%, 100% {
      transform: translate(0, 0) rotate(0);
    }
    47% {
      transform: translate(-6px, 1px) rotate(-3deg);
    }
    50% {
      transform: translate(6px, -1px) rotate(3deg);
    }
    53% {
      transform: translate(-5px, 2px) rotate(-2.5deg);
    }
    56% {
      transform: translate(5px, -2px) rotate(2.5deg);
    }
    59% {
      transform: translate(-4px, 1px) rotate(-2deg);
    }
    62% {
      transform: translate(4px, -1px) rotate(2deg);
    }
    65% {
      transform: translate(-3px, 0) rotate(-1deg);
    }
    68% {
      transform: translate(2px, 0) rotate(1deg);
    }
  }
  [data-anim-loop=loop-shake].is-loop-active {
    animation: adkru-shake-pulse 2.2s ease-in-out infinite;
    transform-origin: center;
  }
  /* Pulse: sanftes Atmen-Skalieren. Subtiler als Bounce, ohne
     Y-Verschiebung. Gut für Hero-CTAs/Logos die "atmen" sollen. */
  @keyframes adkru-pulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.06);
    }
  }
  [data-anim-loop=loop-pulse].is-loop-active {
    animation: adkru-pulse 2s ease-in-out infinite;
    transform-origin: center;
  }
  /* Bounce: kräftiger Sprung mit Squash-Andeutung am Bodenpunkt */
  @keyframes adkru-bounce {
    0%, 100% {
      transform: translateY(0) scaleY(1);
    }
    5% {
      transform: translateY(0) scaleY(0.92);
    }
    45% {
      transform: translateY(-30px) scaleY(1.04);
    }
    55% {
      transform: translateY(-30px) scaleY(1.04);
    }
    95% {
      transform: translateY(0) scaleY(0.92);
    }
  }
  [data-anim-loop=loop-bounce].is-loop-active {
    animation: adkru-bounce 1.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: center bottom;
  }
  /* Drift: deutliche schwebende Bewegung, ausladender Pfad */
  @keyframes adkru-drift {
    0%, 100% {
      transform: translate(0, 0) rotate(0);
    }
    25% {
      transform: translate(8px, -10px) rotate(1.5deg);
    }
    50% {
      transform: translate(-6px, -16px) rotate(-1deg);
    }
    75% {
      transform: translate(-10px, -6px) rotate(2deg);
    }
  }
  [data-anim-loop=loop-drift].is-loop-active {
    animation: adkru-drift 6s ease-in-out infinite;
  }
  /* === Scroll-Scrub (Chrome/Firefox; Safari = statisch via @supports-Fallback) === */
  @supports (animation-timeline: view()) {
    @keyframes adkru-rotate-scroll {
      from {
        transform: rotate(-35deg);
      }
      to {
        transform: rotate(35deg);
      }
    }
    [data-anim=scroll-rotate] {
      animation: adkru-rotate-scroll linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
      transform-origin: center;
    }
    @keyframes adkru-parallax-scroll {
      from {
        transform: translateY(120px);
      }
      to {
        transform: translateY(-120px);
      }
    }
    [data-anim=scroll-parallax] {
      animation: adkru-parallax-scroll linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    /* Tablet + Mobile: kleinere Rotations-/Translations-Amplituden,
       damit die transformierte Bounding-Box nicht ueber den Viewport
       ragt. Greift bis 1023px (alles unter Desktop). */
    @media (prefers-reduced-motion: no-preference) and (max-width: 1023px) {
      @keyframes adkru-rotate-scroll-mobile {
        from {
          transform: rotate(-10deg);
        }
        to {
          transform: rotate(10deg);
        }
      }
      [data-anim=scroll-rotate] {
        animation-name: adkru-rotate-scroll-mobile;
      }
      @keyframes adkru-parallax-scroll-mobile {
        from {
          transform: translateY(40px);
        }
        to {
          transform: translateY(-40px);
        }
      }
      [data-anim=scroll-parallax] {
        animation-name: adkru-parallax-scroll-mobile;
      }
    }
  }
  /* === Diagramm-Aufbau (chart-build) ===
     Wirkt nicht auf den Block, sondern auf die Teile des inline
     gerenderten SVG. Sie tragen Klassen, die beim Aufbereiten der Datei
     gesetzt wurden: .chart-bar waechst von links, .chart-dot ploppt auf,
     .chart-line wird von links freigelegt.

     Animiert wird die Huelle, nicht das Element selbst: die Teile der
     Grafik tragen eigene transform="translate(...)"-Attribute, und das ist
     fuer den Browser dieselbe Property wie ein CSS-transform. Ein Zugriff
     direkt auf das Element wuerde die Position ueberschreiben und die
     Grafik zerlegen. Beim Aufbereiten der Datei bekommt deshalb jedes
     animierte Teil eine <g> als Huelle, die selbst kein transform traegt.

     transform-box: fill-box, damit sich transform-origin auf die eigene
     Bounding-Box bezieht und nicht auf das SVG-Koordinatensystem. */
  html.adkru-anim-ready [data-anim=chart-build] .chart-bar,
  html.adkru-anim-ready [data-anim=chart-build] .chart-dot,
  html.adkru-anim-ready [data-anim=chart-build] .chart-line {
    transform-box: fill-box;
    will-change: transform, opacity, clip-path;
  }
  html.adkru-anim-ready [data-anim=chart-build] .chart-bar {
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  }
  html.adkru-anim-ready [data-anim=chart-build] .chart-dot {
    transform-origin: center;
    transform: scale(0);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s linear;
  }
  html.adkru-anim-ready [data-anim=chart-build] .chart-line {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  }
  html.adkru-anim-ready [data-anim=chart-build] .chart-label {
    opacity: 0;
    transform-origin: center;
    transform: scale(0.6);
    transition: opacity 0.35s linear, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  html.adkru-anim-ready [data-anim=chart-build].is-anim-in .chart-bar {
    transform: scaleX(1);
  }
  html.adkru-anim-ready [data-anim=chart-build].is-anim-in .chart-dot {
    transform: scale(1);
    opacity: 1;
  }
  html.adkru-anim-ready [data-anim=chart-build].is-anim-in .chart-line {
    clip-path: inset(0 0 0 0);
  }
  html.adkru-anim-ready [data-anim=chart-build].is-anim-in .chart-label {
    opacity: 1;
    transform: scale(1);
  }
  html.adkru-anim-ready [data-anim=chart-build].is-anim-in {
    /* Staffelung ueber explizite Schritt-Klassen statt nth-of-type.
       Die Reihenfolge im SVG folgt der Zeichenreihenfolge des Programms,
       nicht der Leserichtung: im Balkendiagramm steht der orange Balken
       vor dem roten und der gelbe zuletzt, obwohl gelb oben liegt. Die
       Klasse wird beim Aufbereiten der Datei gesetzt und sagt, an welcher
       Stelle das Element aufbauen soll. */
  }
  html.adkru-anim-ready [data-anim=chart-build].is-anim-in .chart-step-1 {
    transition-delay: 0ms;
  }
  html.adkru-anim-ready [data-anim=chart-build].is-anim-in .chart-step-2 {
    transition-delay: 150ms;
  }
  html.adkru-anim-ready [data-anim=chart-build].is-anim-in .chart-step-3 {
    transition-delay: 300ms;
  }
  html.adkru-anim-ready [data-anim=chart-build].is-anim-in .chart-step-4 {
    transition-delay: 450ms;
  }
  html.adkru-anim-ready [data-anim=chart-build].is-anim-in .chart-step-5 {
    transition-delay: 600ms;
  }
  html.adkru-anim-ready [data-anim=chart-build].is-anim-in .chart-step-6 {
    transition-delay: 750ms;
  }
  html.adkru-anim-ready [data-anim=chart-build].is-anim-in .chart-step-7 {
    transition-delay: 900ms;
  }
  html.adkru-anim-ready [data-anim=chart-build].is-anim-in .chart-step-8 {
    transition-delay: 1050ms;
  }
}