/* ==========================================================================
   STEINWALD Onepager — Animations & Politur (additive Ebene)
   Progressive Enhancement: Reveal-States gelten NUR unter html.anim-ready,
   das per Inline-Script gesetzt wird — und zwar nur, wenn kein
   prefers-reduced-motion vorliegt. Ohne JS / mit reduced-motion bleibt alles
   sofort sichtbar (SEO- und Barrierefreiheits-sicher).
   Nur transform/opacity animiert (GPU, kein Layout-Shift).
   ========================================================================== */

/* ---------- Scroll-Reveal Grundzustand ---------- */
html.anim-ready [data-anim] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.16,.68,.32,1),
              transform .6s cubic-bezier(.16,.68,.32,1);
  will-change: opacity, transform;
}
html.anim-ready [data-anim].is-visible {
  opacity: 1;
  transform: none;
}
/* Sanftere Variante für das Hero-Bild (fade + leichter Scale) */
html.anim-ready .hero-figure[data-anim] { transform: translateY(22px) scale(.985); }
html.anim-ready .hero-figure[data-anim].is-visible { transform: none; }

/* ---------- Hover-Politur (nur wenn Bewegung erwünscht) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .product-card, .tool-card, .service-card, .contact-card {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .product-card { position: relative; overflow: hidden; }
  /* animierter Akzent-Balken oben an den Produktkarten */
  .product-card::after {
    content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
    background: linear-gradient(90deg, var(--color-accent), #e0567a);
    transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
  }
  .product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
  .product-card:hover::after { transform: scaleX(1); }

  .tool-card:hover, .service-card:hover {
    transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-border-strong);
  }

  .badge { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
  .badge:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--color-border-strong); }

  .software-target-list li { transition: transform .2s ease, background-color .2s ease, color .2s ease; }
  .software-target-list li:hover { transform: translateY(-2px); background: var(--color-primary); color: #fff; }

  .sender-item { transition: transform .2s ease, box-shadow .2s ease; }
  .sender-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }

  .btn { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease; }
  .btn:active { transform: translateY(0) scale(.97); }

  .download-list li { transition: transform .2s ease, box-shadow .2s ease; }
  .download-list li:hover { transform: translateX(4px); box-shadow: var(--shadow-sm); }

  /* weicher, ruhiger Glow hinter dem Hero-Bild (statisch — kein Dauer-Repaint) */
  .hero-figure { position: relative; }
  .hero-figure::before {
    content: ""; position: absolute; inset: -12% -8%; z-index: -1; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(195,20,50,.22), transparent 70%);
    filter: blur(34px); opacity: .7;
  }

  /* Eyebrow-Linie wächst beim Reveal */
  html.anim-ready .eyebrow::before { transform: scaleX(0); transform-origin: left; transition: transform .5s ease .1s; }
  html.anim-ready [data-anim].is-visible .eyebrow::before,
  html.anim-ready .eyebrow[data-anim].is-visible::before { transform: scaleX(1); }
}

/* ---------- Header: Schatten beim Scrollen ---------- */
.site-header { transition: box-shadow .25s ease, background-color .25s ease; }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(11,30,51,.12); background: rgba(255,255,255,0.96); }

/* ---------- Stats-Band (Zahlen mit Count-up) ---------- */
.stats-band {
  padding-block: clamp(2.2rem, 4vw, 3.2rem);
  background: linear-gradient(180deg, #ffffff 0%, #e9eef3 100%);
  border-bottom: 1px solid var(--color-border);
}
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; text-align: center;
}
.stat { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.4rem; position: relative; }
.stat + .stat::before {
  content: ""; position: absolute; left: -0.6rem; top: 18%; bottom: 18%; width: 1px;
  background: var(--color-border);
}
.stat-num {
  font-family: var(--font-mono); font-weight: 600; line-height: 1;
  font-size: clamp(1.9rem, 4.5vw, 2.9rem);
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.stat-num .stat-affix { color: var(--color-accent); font-size: 0.62em; }
.stat-label {
  font-size: 0.86rem; color: var(--color-ink-muted); font-weight: 500;
  letter-spacing: 0.01em;
}
@media (max-width: 620px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1rem; }
  .stat:nth-child(3)::before, .stat + .stat::before { display: none; }
}

/* ---------- Sanftes Scroll für Anker (respektiert reduced-motion via html-Regel) --- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}