/* ══════════════════════════════════════════════════════════════════
   v15/studio-motion.css — Begleit-Styles zum Studio-Motion-System.
   Transform gehoert GSAP (studio-motion.js) — hier nur Schatten,
   Fades und Fokus-Zustaende. Dezent, eine Handschrift.
   ══════════════════════════════════════════════════════════════════ */

/* Weicher Fade beim Seitenwechsel (Klasse setzt studio-motion.js) */
body { transition: opacity 0.2s ease; }
body.sm-leave { opacity: 0; }

/* Karten: Schatten vertieft sich beim Hover — das 3D-Kippen macht GSAP.
   transform hier bewusst NICHT anfassen. */
.leistung-card, .prozess-step, .pkg-card, .why-card,
.ki-tool-card, .partner-card, .team-card, .stelle-card,
.ansatz-block, .story-card, [data-sm-card] {
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}
@media (pointer: fine) {
  .leistung-card:hover, .pkg-card:hover, .why-card:hover,
  .ki-tool-card:hover, .partner-card:hover, .team-card:hover,
  .stelle-card:hover, .ansatz-block:hover, .story-card:hover,
  [data-sm-card]:hover {
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  }
}

/* Fokus sichtbar halten (Tastatur), im Markenton */
.btn:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gold-l, #C9A84C);
  outline-offset: 3px;
}

/* Reduced Motion: alle Studio-Zusaetze neutralisieren
   (das JS steigt ohnehin frueh aus — das hier ist der CSS-Gurt) */
@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
  body.sm-leave { opacity: 1; }
}