/* Fade-up on scroll */
.fade-up { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-up.visible { opacity: 1; transform: none; }

/* Nav scrolled */
.nav.scrolled { box-shadow: 0 4px 40px rgba(0,0,0,0.4); }

/* Glow pulse */
@keyframes glowPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.05); }
}
.glow-pulse { animation: glowPulse 4s ease-in-out infinite; }

/* === Gestaffeltes Einblenden ===
   Der Index kommt aus main.js als --stagger; ersetzt die alten
   nth-child-Regeln, die nur bis zum vierten Element reichten. */
.fade-up { transition-delay: calc(var(--stagger, 0) * 70ms); }

/* === Zahlen zaehlen hoch === */
.count-up { font-variant-numeric: tabular-nums; }

/* === Bewegungssprache ===
   Leichtes Ueberschwingen beim Ankommen, ruhiges Zuruecklaufen. Rein ist
   schneller als raus — das laesst die Seite reaktiv statt schwammig wirken. */
:root {
  --ease-feder: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dauer-rein: 0.16s;
  --dauer-raus: 0.3s;
}

/* === Karten heben sich beim Zeigen ===
   Nur auf Geraeten mit echtem Zeiger, damit auf dem Handy nichts haengt. */
@media (hover: hover) {
  .service-card, .team-card, .value-item, .info-item, .gallery-item, .produkt-tag,
  .format-card {
    transition: transform var(--dauer-raus) var(--ease-feder),
                border-color var(--dauer-raus) ease,
                box-shadow var(--dauer-raus) ease;
  }
  .service-card:hover, .team-card:hover, .value-item:hover, .info-item:hover,
  .gallery-item:hover, .produkt-tag:hover, .format-card:hover {
    transition-duration: var(--dauer-rein);
  }
  .service-card:hover, .team-card:hover, .value-item:hover, .info-item:hover,
  .format-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0,212,232,0.35);
    box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  }
  .produkt-tag:hover { transform: translateY(-2px); border-color: rgba(255,0,144,0.4); color: var(--white); }
  .gallery-item:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,0.4); }
}

/* === Lichtkegel unter dem Zeiger ===
   --mx/--my setzt main.js in Prozent, solange der Zeiger ueber der Karte ist;
   --spot faehrt die Deckkraft hoch und runter. Die Karte selbst bewegt sich
   dabei kaum — das Licht macht die Arbeit, nicht das Layout.
   .card bringt position/overflow schon mit, die uebrigen bekommen sie hier. */
@media (hover: hover) {
  .team-card, .value-item, .info-item, .format-card {
    position: relative;
    overflow: hidden;
  }
  .card::after, .team-card::after, .value-item::after, .info-item::after,
  .format-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: var(--spot, 0);
    transition: opacity var(--dauer-raus) ease;
    background: radial-gradient(
      320px circle at var(--mx, 50%) var(--my, 50%),
      rgba(0,212,232,0.22),
      rgba(0,212,232,0.08) 40%,
      transparent 70%
    );
  }
  .card:hover::after, .team-card:hover::after,
  .value-item:hover::after, .info-item:hover::after, .format-card:hover::after {
    transition-duration: var(--dauer-rein);
  }
  /* Im hellen Modus wuerde Cyan auf Weiss ausbleichen — dort Magenta, schwaecher. */
  [data-theme="light"] .card::after, [data-theme="light"] .team-card::after,
  [data-theme="light"] .value-item::after, [data-theme="light"] .info-item::after,
  [data-theme="light"] .format-card::after {
    background: radial-gradient(
      280px circle at var(--mx, 50%) var(--my, 50%),
      rgba(255,0,144,0.05),
      rgba(255,0,144,0.02) 40%,
      transparent 70%
    );
  }
}

/* === Pfeil wandert, Text bleibt stehen ===
   Der Pfeil steckt im ::after, damit er sich unabhaengig bewegen kann.
   Er reagiert auf die ganze Karte, nicht nur auf den Link selbst. */
.service-link::after {
  content: '→';
  display: inline-block;
  margin-left: 0.4em;
  transition: transform var(--dauer-raus) var(--ease-feder);
}
@media (hover: hover) {
  .service-card:hover .service-link::after,
  .service-link:hover::after {
    transform: translateX(5px);
    transition-duration: var(--dauer-rein);
  }
}

/* === Wer weniger Bewegung will, bekommt weniger Bewegung === */
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
  .card::after, .team-card::after, .value-item::after, .info-item::after,
  .format-card::after { display: none; }
  .service-link::after { transition: none; }
  .top-line { animation: none; }
  .glow-blob, .glow-pulse { animation: none !important; }
  * { scroll-behavior: auto !important; }
}