/* ═══════════════════════════════════════════
   Brühwerk Homepage — schlankes Stylesheet
   ───────────────────────────────────────────
   Die Startseite wird vollständig serverseitig
   in front-page.php (Child) gerendert — keine
   versteckten Sektionen, keine Text-Hacks mehr.
   Hier liegen nur noch:
   1. Trustpilot-Pill im Hero (Markup verlässt
      sich auf das ::before — nicht anfassen!)
   2. Scroll-Reveal-Utility (rein CSS, progressiv)
   ═══════════════════════════════════════════ */

/* ── 1. Trustpilot-Pill (Hero) ──
   Injiziert "★ Trustpilot" via ::before und
   zentriert die Pill. EXAKT so belassen. */
.bw-hero__trust-tp-logo {
  display: none !important;
}
.bw-hero__trust-inner {
  justify-content: center !important;
}
.bw-hero__trust-inner::before {
  content: "\2605  Trustpilot" !important;
  color: #00b67a !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  white-space: nowrap !important;
  margin-right: var(--bw-s-1) !important;
}
.bw-hero__trust {
  display: flex !important;
  justify-content: center !important;
}

/* Pill-Hintergrund & Abstand */
.bw-hero__trust {
  margin-top: var(--bw-s-8) !important;
}
.bw-hero__trust-inner {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 999px !important;
  padding: 10px 24px !important;
  display: inline-flex !important;
  gap: 8px !important;
  align-items: center !important;
}

/* ── 2. Scroll-Reveal für Sektionen ──
   Sanftes Einblenden beim Scrollen, rein per CSS
   (animation-timeline: view()). Browser ohne
   Support überspringen den @supports-Block und
   sehen alles ganz normal — kein JS, kein FOUC.
   prefers-reduced-motion wird respektiert. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :is(.bw-topseller-section, .bw-spotlight, .bw-pricetiers, .bw-brands, .bw-why, .bw-testimonials, .bw-cta) {
      animation: bw-section-reveal ease-out both;
      animation-timeline: view();
      /* Nur beim Eintritt in den Viewport animieren */
      animation-range: entry 0% entry 55%;
    }
  }
}

@keyframes bw-section-reveal {
  from {
    opacity: 0.35;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}