/* ============================================================
   MOTION - eine Bewegungssprache fuer die gesamte Seite

   Diese Datei wird bewusst als LETZTES Stylesheet im <head>
   geladen, nach dem seiteneigenen <style>. Sie ist damit die
   eine Stelle, an der Bewegung entschieden wird, und kann
   aeltere Einzelregeln ueberschreiben, ohne dass irgendwo
   !important noetig waere.

   Grundhaltung: ruhig und edel. Kurze Wege, klare Kurven,
   nichts, das sich beim zweiten Besuch in den Weg stellt.
   Animiert werden ausschliesslich transform, opacity und
   clip-path - alles andere loest Layout oder Paint aus.
   ============================================================ */

:root{
  /* Kurven. Die eingebauten CSS-Easings sind zu weich, ihnen
     fehlt die Absicht. ease-in kommt hier nirgends vor: es
     verzoegert genau den Moment, den das Auge am staerksten
     beobachtet, und laesst die Seite traege wirken. */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);   /* Ein-/Austritt, Press */
  --ease-soft:   cubic-bezier(0.16, 1, 0.3, 1);    /* lange, ruhige Wege */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* Bewegung auf dem Schirm */

  /* Dauern. Alles, was auf eine Eingabe antwortet, bleibt unter
     300ms. Nur Scroll-Reveals duerfen laenger sein, weil sie
     niemanden warten lassen. */
  --dur-press:  160ms;
  --dur-quick:  200ms;
  --dur-ui:     260ms;
  --dur-reveal: 700ms;
  --dur-media:  1000ms;

  /* Ruhiger Grundton: kurzer Weg, kleiner Versatz. */
  --reveal-shift: 18px;
  --reveal-step:  60ms;

  /* Abstand, den Ankersprünge zur schwebenden Nav-Pille halten. */
  --anchor-offset: clamp(5.5rem, 9vw, 7.5rem);
}

/* ── Scroll ──────────────────────────────────────────────────
   Nativer Smooth-Scroll als Fallback fuer den Fall, dass Lenis
   nicht laedt. Sobald Lenis laeuft, setzt es die Klasse .lenis
   auf <html>; dann muss das Browser-Smoothing weichen, sonst
   kaempfen zwei Systeme um dieselbe Scrollposition. */
html{ scroll-behavior:smooth; }
html.lenis, html.lenis body{ scroll-behavior:auto; }
html.lenis body{ height:auto; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }

/* Ankerziele stehen sonst unter der fixierten Pille. */
section[id], [id].scroll-target{ scroll-margin-top:var(--anchor-offset); }

/* ── Scroll-Fortschritt ──────────────────────────────────────
   Eine Haarlinie am oberen Rand. Sie erklaert die Laenge der
   Seite, ohne sich in den Vordergrund zu spielen. Wird von
   motion.js eingehaengt, damit alle Seiten sie ohne Markup
   bekommen. */
.crw-progress{
  position:fixed;
  top:0; left:0; right:0;
  height:2px;
  z-index:70;
  pointer-events:none;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg,
              rgba(191,91,53,.55) 0%,
              rgba(191,91,53,1)  100%);
  opacity:0;
  transition:opacity var(--dur-ui) var(--ease-out);
}
.crw-progress.is-active{ opacity:.9; }

/* ── Scroll-Reveal ───────────────────────────────────────────
   Reveals laufen als Keyframes mit animation-fill-mode:backwards,
   nicht als Transition. Das ist hier die richtige Wahl, weil
   viele der beteiligten Elemente bereits eigene transition- und
   transform-Regeln tragen (Akkordeonkarten, Produktkarten mit
   Hover-Lift). Eine Transition-Deklaration wuerde die ersetzen;
   ein Keyframe laesst sie unberuehrt. Und weil backwards statt
   forwards gefuellt wird, gibt das Element nach dem Reveal die
   Kontrolle ueber transform vollstaendig zurueck - der
   Hover-Lift funktioniert danach wieder wie zuvor.

   Reveals sind einmalig und nicht unterbrechbar. Genau der Fall,
   fuer den Keyframes gemacht sind. */
@keyframes crw-reveal-in{
  from{
    opacity:0;
    transform:translate3d(var(--reveal-x, 0), var(--reveal-y, var(--reveal-shift)), 0)
              scale(var(--reveal-scale, 1));
  }
  to{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
  }
}

/* Die Klassennamen bleiben die bisherigen, damit vorhandenes
   Markup unveraendert weiterlaeuft. */
.animate-on-scroll-hidden{ opacity:0; }
.animate-on-scroll-visible{
  opacity:1;
  animation:crw-reveal-in var(--dur-reveal) var(--ease-soft) backwards;
}

/* Richtungsvarianten. Seitliche Wege sind bewusst kuerzer als
   der vertikale: horizontale Bewegung faellt staerker auf. */
[data-reveal="left"]  { --reveal-x:calc(var(--reveal-shift) * -0.8); --reveal-y:0; }
[data-reveal="right"] { --reveal-x:calc(var(--reveal-shift) *  0.8); --reveal-y:0; }
[data-reveal="scale"] { --reveal-y:0; --reveal-scale:.975; }
/* Fuer Elemente, die sich nur beruhigen sollen, ohne Weg. */
[data-reveal="fade"]  { --reveal-y:0; }

/* Stagger: die Kinder kommen nacheinander statt als Block.
   Die Verzoegerung setzt motion.js einmalig als Inline-Style,
   damit die Zahl der Kinder nicht in CSS gedeckelt ist. */
/* Der Startzustand haengt an .motion-ready, das motion.js setzt.
   Ohne JavaScript wird hier nichts versteckt, was niemand wieder
   sichtbar machen koennte. */
html.motion-ready [data-reveal-stagger] > *{ opacity:0; }
/* html.motion-ready muss hier mitlaufen: sonst haette die
   versteckende Regel die hoehere Spezifitaet und der Reveal
   wuerde nie sichtbar. */
html.motion-ready [data-reveal-stagger].is-revealed > *{
  opacity:1;
  animation:crw-reveal-in var(--dur-reveal) var(--ease-soft) backwards;
}

/* ── Bild-Reveal ─────────────────────────────────────────────
   Kein harter Schnitt: das Bild kommt minimal zu gross herein
   und legt sich auf seine Groesse. Bewusst ohne clip-path,
   damit gerundete Ecken und overflow-Container unangetastet
   bleiben. Der Container muss overflow:hidden tragen. */
@keyframes crw-media-in{
  from{ opacity:0; transform:scale(1.06); }
  to  { opacity:1; transform:scale(1); }
}
.reveal-media{ overflow:hidden; }
html.motion-ready .reveal-media > img,
html.motion-ready .reveal-media > picture > img,
html.motion-ready .reveal-media > video{ opacity:0; }
html.motion-ready .reveal-media.is-revealed > img,
html.motion-ready .reveal-media.is-revealed > picture > img,
html.motion-ready .reveal-media.is-revealed > video{
  opacity:1;
  animation:crw-media-in var(--dur-media) var(--ease-soft) backwards;
}

/* ── Parallax ────────────────────────────────────────────────
   Nur fuer dekorative Ebenen (weiche Farbverlaeufe, Texturen).
   Der Weg ist absichtlich klein: sichtbar wird er erst, wenn
   er fehlt. */
[data-parallax]{ will-change:transform; }

/* ── Press-Feedback ──────────────────────────────────────────
   Jede druckbare Flaeche antwortet. Ohne das fuehlt sich eine
   Oberflaeche an, als haette sie den Klick nicht gehoert. */
.crw-btn{
  transition:background-color var(--dur-quick) ease,
             color var(--dur-quick) ease,
             border-color var(--dur-quick) ease,
             transform var(--dur-press) var(--ease-out);
}
.crw-btn:active,
.crw-nav-cta:active,
.nav-cta:active{ transform:scale(.97); }

.topic-pill:active,
.ansatz-tab:active,
.faq-trigger:active,
.crw-nav-back:active,
.crw-brand:active{ transform:scale(.975); }

.crw-nav-back,
.crw-brand{ transition:transform var(--dur-press) var(--ease-out),
                       color var(--dur-quick) ease,
                       background-color var(--dur-quick) ease; }
.faq-trigger{ transition:transform var(--dur-press) var(--ease-out),
                         color var(--dur-quick) ease; }

/* ── Hover nur dort, wo es einen Zeiger gibt ─────────────────
   Auf Touch loest ein Tap den Hover aus und laesst ihn kleben,
   bis woanders getippt wird. */
@media (hover:hover) and (pointer:fine){
  .crw-nav-links a:hover{ color:var(--nav-truffle); }
  .crw-nav-cta:hover{ background:var(--nav-rose-deep); transform:translateY(-1px); }
  .crw-nav-back:hover{ color:var(--nav-cream); background:var(--nav-truffle); border-color:var(--nav-truffle); }
  .mobile-menu-link:hover{ color:var(--color-rose-deep); }
}
/* Auf Touch bleibt der Hover nach dem Tap haengen, also zeigt er
   dort nichts an. */
@media not all and (hover:hover){
  .crw-nav-cta:hover{ background:var(--nav-truffle); transform:none; }
  .crw-nav-back:hover{
    color:rgba(var(--nav-truffle-rgb),.82);
    background:transparent;
    border-color:rgba(var(--nav-truffle-rgb),.16);
  }
}

/* Nav-Links: die Linie waechst aus der Mitte, statt einfach da
   zu sein. Der Weg ist kurz genug, um beim Ueberfahren mehrerer
   Punkte nicht zu stoeren.

   Dieselbe Linie markiert auch den Abschnitt, in dem man gerade
   steht (aria-current, gesetzt in assets/js/nav.js). Auf einer
   langen Einseitenseite ist das Orientierung, keine Dekoration. */
.crw-nav-links a{ position:relative; }
.crw-nav-links a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:.15rem;
  height:1px;
  background:var(--nav-rose-deep);
  transform:scaleX(0);
  transform-origin:50% 50%;
  transition:transform var(--dur-quick) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .crw-nav-links a:hover::after{ transform:scaleX(1); }
}
.crw-nav-links a:focus-visible::after{ transform:scaleX(1); }
.crw-nav-links a[aria-current]::after{ background:var(--nav-truffle); transform:scaleX(1); }

/* ── Burger wird zum Kreuz ───────────────────────────────────
   Der Schalter zeigt, was er tut, statt es nur zu behaupten. */
.crw-burger span{
  transition:transform var(--dur-ui) var(--ease-out),
             opacity 120ms ease;
}
html.menu-open .crw-burger span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
html.menu-open .crw-burger span:nth-child(2){ opacity:0; transform:scaleX(.4); }
html.menu-open .crw-burger span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* ── Mobilmenue: Inhalte kommen nach der Flaeche ─────────────
   Erst faehrt das Panel ein, dann setzen sich die Punkte. Alles
   gleichzeitig wirkt wie ein Sprung. */
#mobile-menu .menu-link,
#mobile-menu img,
#mobile-menu .flex.gap-8{
  opacity:0;
  transform:translate3d(0,10px,0);
  transition:opacity 320ms var(--ease-out),
             transform 320ms var(--ease-out);
}
html.menu-open #mobile-menu .menu-link,
html.menu-open #mobile-menu img,
html.menu-open #mobile-menu .flex.gap-8{
  opacity:1;
  transform:translate3d(0,0,0);
}
html.menu-open #mobile-menu img{ transition-delay:180ms; }
html.menu-open #mobile-menu .menu-link:nth-of-type(1){ transition-delay:220ms; }
html.menu-open #mobile-menu .menu-link:nth-of-type(2){ transition-delay:260ms; }
html.menu-open #mobile-menu .menu-link:nth-of-type(3){ transition-delay:300ms; }
html.menu-open #mobile-menu .menu-link:nth-of-type(4){ transition-delay:340ms; }
html.menu-open #mobile-menu .menu-link:nth-of-type(5){ transition-delay:380ms; }
html.menu-open #mobile-menu .menu-link:nth-of-type(6){ transition-delay:420ms; }
html.menu-open #mobile-menu .menu-link:nth-of-type(7){ transition-delay:460ms; }
html.menu-open #mobile-menu .menu-link:nth-of-type(8){ transition-delay:500ms; }
html.menu-open #mobile-menu .flex.gap-8{ transition-delay:540ms; }

/* ── Fokus ───────────────────────────────────────────────────
   Tastaturbedienung ist auch eine Interaktion und verdient
   dieselbe Sorgfalt wie der Zeiger. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--color-rose-deep, #8A5A4E);
  outline-offset:3px;
  border-radius:3px;
}

/* ── Reduzierte Bewegung ─────────────────────────────────────
   Nicht "keine Animation", sondern "keine Bewegung": Ein- und
   Ausblenden bleibt, weil es Zusammenhang erklaert. Wege,
   Skalierungen und Parallax fallen weg. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }

  /* Kein Weg, kein Massstab - nur noch aufblenden. Das erklaert
     weiterhin, dass etwas neu dazugekommen ist. */
  @keyframes crw-reveal-in{ from{opacity:0} to{opacity:1} }
  @keyframes crw-media-in { from{opacity:0} to{opacity:1} }

  .animate-on-scroll-visible,
  html.motion-ready [data-reveal-stagger].is-revealed > *,
  html.motion-ready .reveal-media.is-revealed > img,
  html.motion-ready .reveal-media.is-revealed > picture > img,
  html.motion-ready .reveal-media.is-revealed > video{
    animation-duration:300ms !important;
    animation-timing-function:ease !important;
    animation-delay:0ms !important;
  }

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

  .crw-progress{ transition:none; }

  .crw-btn:active, .crw-nav-cta:active, .nav-cta:active,
  .topic-pill:active, .ansatz-tab:active, .faq-trigger:active,
  .crw-nav-back:active, .crw-brand:active{ transform:none; }

  .crw-nav-links a::after{ transition:none; }
  .crw-burger span{ transition:opacity 120ms ease; }

  #mobile-menu .menu-link,
  #mobile-menu img,
  #mobile-menu .flex.gap-8{
    transform:none !important;
    transition:opacity 200ms ease !important;
    transition-delay:0ms !important;
  }
}
