/* ============================================================
   ll-anim.css — Zentrale Animations-/Interaktions-Ebene (LocalLoop)
   ------------------------------------------------------------
   EIGENES CSS für ALLE Seiten. Wird zusammen mit ll-anim.js geladen,
   damit jede Seite dieselben Animationen/Hover hat. Greift NICHT in
   Framer-Styles ein — nur additive Effekte über eigene Klassen bzw.
   klar abgegrenzte Selektoren.
   Reihenfolge: nach nav.css / angebote.css einbinden.
   ============================================================ */

/* ------------------------------------------------------------
   1) Scroll-Reveals (nur aktiv, wenn ll-anim.js .js-anim auf <html>
      setzt — passiert nur auf Seiten mit den ang-Strukturen).
   ------------------------------------------------------------ */
.js-anim .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.7, 0.2, 1),
              transform 0.7s cubic-bezier(0.22, 0.7, 0.2, 1);
  transition-delay: var(--rd, 0ms);
  will-change: opacity, transform;
}
.js-anim .reveal.is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------
   2) Sanftes Schweben des Hintergrund-Glows (Angebot-Seiten)
   ------------------------------------------------------------ */
@keyframes ang-float {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(0, -22px); }
}
.ang-blob.glow { animation: ang-float 9s ease-in-out infinite; }

/* ------------------------------------------------------------
   3) Card-Hover: sanftes Anheben (monochrom, rundungsfreundlich)
   ------------------------------------------------------------ */
.ang-fcard, .ang-card, .ang-tier,
.js-anim .ang-fcard, .js-anim .ang-card, .js-anim .ang-tier {
  position: relative;
  transition: opacity 0.6s cubic-bezier(0.22, 0.7, 0.2, 1),
              transform 0.4s cubic-bezier(0.22, 0.7, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.22, 0.7, 0.2, 1);
  will-change: transform;
}
.ang-fcard:hover, .ang-card:hover, .ang-tier:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px -14px rgba(0, 0, 0, 0.22);
}

/* Nummerierte Reihen — Titel wandert leicht nach rechts */
.ang-row { transition: border-color 0.25s ease; }
.ang-row h3 { transition: transform 0.25s cubic-bezier(0.22, 0.7, 0.2, 1); }
.ang-row:hover { border-top-color: rgba(23, 23, 23, 0.4); }
.ang-row:hover h3 { transform: translateX(8px); }

/* „Andere Angebote"-Karten — Pfeil schiebt sich vor */
.ang-card .go { display: inline-block; transition: transform 0.22s ease; }
.ang-card:hover .go { transform: translateX(6px); }

/* FAQ-Zeilen */
.ang-faq summary { transition: opacity 0.15s ease; }
.ang-faq summary:hover { opacity: 0.6; }
.ang-faq details.closing summary::after { transform: translateY(-50%) rotate(0deg) !important; }

/* Spots im Phone-Mockup */
.ll-spot { transition: transform 0.2s ease, background 0.2s ease; }
.ll-spot:hover { transform: translateX(4px); }

/* ------------------------------------------------------------
   4) Buttons & Kontakt-Links — seitenübergreifend
      (Framer-CTAs + Tel/Mail-Links, z. B. Contact/About/Footer)
   ------------------------------------------------------------ */
button[data-framer-name="Default"] {
  transition: transform 0.22s cubic-bezier(0.22, 0.7, 0.2, 1),
              box-shadow 0.22s ease, filter 0.22s ease;
}
button[data-framer-name="Default"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 22px rgba(23, 23, 23, 0.18) !important;
  filter: brightness(1.05);
}
button[data-framer-name="Default"]:active {
  transform: translateY(0) !important;
  box-shadow: 0 3px 8px rgba(23, 23, 23, 0.16) !important;
}
a[href^="tel:"],
a[href^="mailto:"] {
  transition: color 0.2s ease, opacity 0.2s ease !important;
}
a[href^="tel:"]:hover,
a[href^="mailto:"]:hover {
  opacity: 0.6;
}

/* ------------------------------------------------------------
   5) Scroll-Ink: Text färbt sich beim Durchscrollen von Grau zu
      Schwarz. Die Farbe setzt ll-anim.js pro Scroll-Frame als
      Inline-Style (überschreibt Framers Inline-Farbe direkt) —
      daher hier bewusst KEIN color, nur ein weicher Übergang.
   ------------------------------------------------------------ */
.ll-ink { transition: color 0.12s linear; }
.ll-ink .ll-w { transition: color 0.3s ease; }

/* ------------------------------------------------------------
   5b) Block-Reveals für Framer-Seiten (About): ganze Blöcke
       tauchen beim Scrollen auf. Gate: .js-rev auf <html>.
       Nur auf Elemente ohne eigenes Transform (Bilder, Portraits,
       Stats-Band) bzw. Fade-only (Überschriften) → Framer-Layout
       bleibt intakt.
   ------------------------------------------------------------ */
.js-rev .ll-rev-up {
  opacity: 0; transform: translateY(42px);
  transition: opacity 0.8s cubic-bezier(0.22,0.7,0.2,1), transform 0.8s cubic-bezier(0.22,0.7,0.2,1);
  transition-delay: var(--rd, 0ms);
}
.js-rev .ll-rev-left {
  opacity: 0; transform: translateX(-64px);
  transition: opacity 0.8s cubic-bezier(0.22,0.7,0.2,1), transform 0.8s cubic-bezier(0.22,0.7,0.2,1);
  transition-delay: var(--rd, 0ms);
}
.js-rev .ll-rev-fade {
  opacity: 0;
  transition: opacity 0.9s ease;
  transition-delay: var(--rd, 0ms);
}
.js-rev .ll-rev-up.in, .js-rev .ll-rev-left.in, .js-rev .ll-rev-fade.in {
  opacity: 1; transform: none;
}

/* ------------------------------------------------------------
   6) Reduced Motion: alles ruhig stellen
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ang-blob.glow { animation: none; }
  .ang-fcard, .ang-tier, .ang-row h3, .ang-card .go, .ll-spot { transition: none; }
  .ang-fcard::before, .ang-tier::before, .ang-card::before { transition: none; }
  button[data-framer-name="Default"],
  a[href^="tel:"], a[href^="mailto:"] { transition: none; }
  button[data-framer-name="Default"]:hover,
  button[data-framer-name="Default"]:active { transform: none !important; }
  .ll-ink, .ll-ink .ll-w { transition: none; }
  .js-rev .ll-rev-up, .js-rev .ll-rev-left, .js-rev .ll-rev-fade {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}