/* ──────────────────────────────────────────────────────────────────────────
   Finberatung Dynamik — Animations-Layer
   Leichte, dezente Bewegung: Scroll-Reveals, Hero-Entrance,
   Hover-Mikrointeraktionen. Rein additiv zu site.css.
   Ohne JS (oder bei prefers-reduced-motion) bleibt alles sichtbar.
   ────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {

  /* ── Scroll-Reveal-Basis ───────────────────────────────────────────────
     dynamik.js setzt html.dyn + [data-dyn] auf die Ziel-Elemente.
     Sichtbarer Endzustand ist der Normalzustand — animiert wird NUR
     aus dem versteckten Zustand heraus. */
  html.dyn [data-dyn]{
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity .7s ease,
      transform .7s cubic-bezier(.22, .61, .21, 1);
    transition-delay: var(--dyn-delay, 0ms);
  }
  html.dyn [data-dyn="fade"]{ transform: none; }
  html.dyn [data-dyn="rise-lg"]{ transform: translateY(30px); }
  html.dyn [data-dyn="scale"]{ transform: scale(.965) translateY(12px); }
  html.dyn [data-dyn="left"]{ transform: translateX(-22px); }
  html.dyn [data-dyn="right"]{ transform: translateX(22px); }

  html.dyn [data-dyn].dyn-in{
    opacity: 1;
    transform: none;
  }

  /* ── Header: weicher Schatten beim Scrollen ───────────────────────────── */
  .site-header{
    transition: box-shadow .35s ease, background .35s ease;
  }
  .site-header.is-scrolled{
    box-shadow: 0 10px 34px -22px rgba(31, 76, 59, 0.35);
  }

  /* ── Nav: einheitliche Hover-Bewegung für ALLE Menüpunkte ─────────────── */
  .primary-nav > li > a,
  .primary-nav .has-dropdown > button{
    transition:
      background .2s ease,
      color .2s ease,
      transform .25s cubic-bezier(.22, .61, .21, 1);
  }
  .primary-nav > li > a:hover,
  .primary-nav .has-dropdown > button:hover,
  .primary-nav .has-dropdown.open > button{
    transform: translateY(-2px);
  }

  /* Dropdowns aller Menüpunkte: weiches Aufklappen */
  .primary-nav .has-dropdown.open > .dropdown{
    animation: dyn-dropdown .28s cubic-bezier(.22, .61, .21, 1);
  }
  @keyframes dyn-dropdown{
    from{ opacity: 0; transform: translateX(-50%) translateY(-10px); }
    to{   opacity: 1; transform: translateX(-50%) translateY(0); }
  }
  /* Großes Panel (Versicherungen): kürzerer Weg, etwas mehr Zeit —
     wirkt dadurch optisch genauso schnell wie die schmalen Menüs */
  .primary-nav .has-dropdown.open > .dropdown--wide{
    animation: dyn-dropdown-wide .34s cubic-bezier(.22, .61, .21, 1);
  }
  @keyframes dyn-dropdown-wide{
    from{ opacity: 0; transform: translateX(-50%) translateY(-6px); }
    to{   opacity: 1; transform: translateX(-50%) translateY(0); }
  }

  /* ── Buttons: sanfter Lift + Press ─────────────────────────────────────── */
  .btn{
    transition:
      transform .25s cubic-bezier(.22, .61, .21, 1),
      box-shadow .25s ease,
      background .25s ease,
      color .25s ease,
      border-color .25s ease;
  }
  .btn--primary:hover{
    box-shadow: 0 14px 28px -16px rgba(219, 106, 74, 0.55);
  }
  .btn:active{
    transform: translateY(0) scale(.975);
    transition-duration: .1s;
  }

  /* ── Karten: weicher Hover-Lift ────────────────────────────────────────── */
  .service-card,
  .review,
  .review-card,
  .topic,
  .reviews-widget,
  .kfz-rechner-cta{
    transition:
      transform .35s cubic-bezier(.22, .61, .21, 1),
      box-shadow .35s ease,
      border-color .35s ease,
      background .35s ease;
  }
  .service-card:hover{ transform: translateY(-4px); }
  .review-card:hover,
  .review:hover{ transform: translateY(-3px); }
  .topic:hover{ transform: translateY(-2px); }

  /* Pfeile in Karten-CTAs rutschen beim Hover leicht nach rechts */
  .service-card__cta span,
  .btn--link span{
    display: inline-block;
    transition: transform .25s cubic-bezier(.22, .61, .21, 1);
  }
  .service-card:hover .service-card__cta span,
  .btn--link:hover span{
    transform: translateX(4px);
  }

  /* ── Bilder: ruhiger Ken-Burns-Hover ──────────────────────────────────── */
  .hero__visual img,
  .promise-grid__visual img,
  .contact-form-image img{
    transition: transform 1.1s cubic-bezier(.22, .61, .21, 1);
  }
  .hero__visual:hover img,
  .promise-grid__visual:hover img,
  .contact-form-image:hover img{
    transform: scale(1.035);
  }

  /* ── Hero-Badge: sehr leichtes Schweben ───────────────────────────────── */
  html.dyn .hero__badge{
    animation: dyn-float 5.5s ease-in-out infinite alternate;
  }
  @keyframes dyn-float{
    from{ transform: translateY(0); }
    to{   transform: translateY(-6px); }
  }

  /* ── FAQ: sanftes Öffnen ──────────────────────────────────────────────── */
  .faq details[open] > *:not(summary){
    animation: dyn-faq .3s ease;
  }
  @keyframes dyn-faq{
    from{ opacity: 0; transform: translateY(-4px); }
    to{   opacity: 1; transform: translateY(0); }
  }

  /* ── Footer-Links: kleiner Schub nach rechts ──────────────────────────── */
  .site-footer .footer-grid a{
    transition: color .2s ease, transform .25s cubic-bezier(.22, .61, .21, 1);
    display: inline-block;
  }
  .site-footer .footer-grid a:hover{
    transform: translateX(3px);
  }
}