/* ─────────────────────────────────────────────────────────────
   Digitflow Enhancement Layer — Interaktion & Mikro-Animationen
   Wird beim Export injiziert. Guards: Touch + reduced-motion.
   ───────────────────────────────────────────────────────────── */

/* ── Scroll-Progress ── */
#df-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: #E8443A; transform: scaleX(0); transform-origin: 0 50%;
  z-index: 99997; pointer-events: none;
}

/* ── Studio-Cursor (nur pointer:fine + ohne reduced-motion, via JS aktiviert) ── */
body.df-cursor, body.df-cursor a, body.df-cursor button,
body.df-cursor .brxe-button, body.df-cursor #refs-slider { cursor: none !important; }
#df-dot {
  position: fixed; top: 0; left: 0; width: 7px; height: 7px; border-radius: 50%;
  background: #E8443A; z-index: 99999; pointer-events: none;
  transform: translate(-50%, -50%);
}
#df-ring {
  position: fixed; top: 0; left: 0; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.55); z-index: 99998; pointer-events: none;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  font: 500 9px/1 'Inter', sans-serif; letter-spacing: .12em; color: #fff;
  transition: width .25s ease, height .25s ease, border-color .25s ease, background .25s ease;
}
#df-ring.df-hover { width: 52px; height: 52px; border-color: #E8443A; }
#df-ring.df-drag  { width: 64px; height: 64px; border-color: #E8443A; background: rgba(232,68,58,.12); }
#df-dot.df-down   { transform: translate(-50%, -50%) scale(2.2); transition: transform .12s; }

/* ── 3D-Tilt-Karten + Licht-Glare ── */
.df-tilt {
  position: relative;
  transition: transform .35s cubic-bezier(.2,.8,.3,1), border-color .3s ease;
  will-change: transform; transform-style: preserve-3d;
}
.df-tilt::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(440px circle at var(--gx,50%) var(--gy,50%),
              rgba(255,255,255,.09), transparent 46%);
  opacity: 0; transition: opacity .35s ease; pointer-events: none; z-index: 4;
}
.df-tilt:hover::after { opacity: 1; }
.df-tilt:hover { border-color: rgba(232,68,58,.45) !important; }

/* ── Magnetische Buttons ── */
.df-mag { transition: transform .18s cubic-bezier(.3,1.4,.5,1); will-change: transform; }

/* ── Stats-Strip (Warum-Sektion) ── */
#df-stats {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;
  margin: 8px 0 40px; grid-column: 1 / -1; width: 100%;
}
.df-stat {
  flex: 1 1 180px; max-width: 260px; text-align: center;
  padding: 22px 18px; border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.df-stat b {
  display: block; font-size: clamp(28px, 4vw, 38px); font-weight: 600;
  color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.df-stat b i { font-style: normal; color: #E8443A; }
.df-stat em {
  display: block; margin-top: 6px; font-style: normal;
  font-size: 13px; letter-spacing: .02em; color: rgba(255,255,255,.55);
}

/* ── Hero-Headline Wort-Reveal ── */
.df-w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.df-w > span {
  display: inline-block; transform: translateY(112%);
  transition: transform .7s cubic-bezier(.2,.75,.25,1);
}
.df-w.df-in > span { transform: translateY(0); }

/* ── Nav-Underline-Sweep ── */
#wb-nav a[href^="#"]:not(.bricks-button) { position: relative; }
#wb-nav a[href^="#"]:not(.bricks-button)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
  background: #E8443A; border-radius: 0;
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
#wb-nav a[href^="#"]:not(.bricks-button):hover::after {
  transform: scaleX(1); transform-origin: 0 50%;
}

/* ── Reduced Motion: alles Bewegte aus ── */
@media (prefers-reduced-motion: reduce) {
  .df-tilt, .df-mag, .df-w > span { transition: none !important; transform: none !important; }
  .df-w > span { transform: translateY(0) !important; }
  #df-dot, #df-ring { display: none !important; }
}