/* ═══════════════════════════════════════════════
   Paket A – Quick Win Enhancements
   1. Scroll-Reveal (kein Library, IntersectionObserver)
   2. Count-Up-Stats
   3. Emoji → SVG (Helper)
   4. Button-Fill-Hover-Animation
   ═══════════════════════════════════════════════ */

/* ─── 1. SCROLL REVEAL ─── */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1),
              transform .7s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
[data-reveal="fade"]    { transform: none; }
[data-reveal="scale"]   { transform: scale(.96); }
[data-reveal="left"]    { transform: translateX(-32px); }
[data-reveal="right"]   { transform: translateX(32px); }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal-delay="4"] { transition-delay: .32s; }
[data-reveal-delay="5"] { transition-delay: .40s; }
[data-reveal-delay="6"] { transition-delay: .48s; }

/* ─── 2. COUNT-UP STAT ─── */
.stat-block { position: relative; }
.stat-number { font-variant-numeric: tabular-nums; }
.stat-number.is-counting { color: var(--red3); transition: color .4s; }

/* ─── 3. SVG ICON HELPER ─── */
.svg-icon {
  width: 1em; height: 1em;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  display: inline-block;
  vertical-align: -.125em;
  flex-shrink: 0;
}

.sc-icon .svg-icon { width: 26px; height: 26px; color: var(--red); }
.cert-pill-icon .svg-icon { width: 18px; height: 18px; color: #ff8a8a; }
.fci .svg-icon { width: 16px; height: 16px; color: var(--red3); margin-top: .2rem; }
.ext-link .svg-icon { width: 14px; height: 14px; color: var(--red); vertical-align: -2px; margin-right: .4rem; }

/* ─── 4. BUTTON FILL HOVER ─── */
.btn-red-solid,
.btn-white,
.nav-cta {
  position: relative;
  overflow: hidden;
  z-index: 0;
  isolation: isolate;
}
.btn-red-solid::after,
.btn-white::after,
.nav-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--red3);
  transform: translateX(-101%);
  transition: transform .4s cubic-bezier(.22,1,.36,1);
  z-index: -1;
}
.btn-red-solid:hover::after,
.btn-white:hover::after,
.nav-cta:hover::after {
  transform: translateX(0);
}
.btn-white::after { background: var(--off); }
.nav-cta::after    { background: var(--red3); }

/* reduced motion – Keine Animationen */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}