/* VitaQM · Schulungsseite — Motion-Fix (11.08.2026)
   Problem: Die Einblende-Animationen des Schulungsportals (framer-motion,
   opacity + transform/translateY/scale) heben große Inhaltsbereiche in eine
   eigene GPU-Compositing-Ebene. Auf manchen Touch-Displays und bei Browser-/
   OS-Zoom (gebrochene Pixeldichte) wird diese Ebene nicht (vollständig)
   gerastert -> der Schulungsinhalt bleibt teilweise oder ganz leer, bis ein
   Repaint (Scrollen/Resize) ihn zurückholt.
   Fix: Auf der Schulungsseite die Transform-Ebene auflösen und Sichtbarkeit
   erzwingen. Wirkung ausschließlich über sp-*/Schulungs-Container — der Rest
   der App behält seine Animationen.
   Rein additiv, keine Fachlogik berührt. */

/* 1) Animierte Kacheln der Übersicht — klassenbasiert (funktioniert ohne :has) */
.sp-kurs,
.sp-erfolg { opacity: 1 !important; transform: none !important; }

/* 2) Sicherheitsnetz: der eigentliche Schulungsinhalt ist immer sichtbar */
.sp-willkommen,
.sp-lesen { opacity: 1 !important; }

/* 3) Die framer-motion „Fade"-Wrapper der Schulungsseite (unbenannte
      motion.div-Hüllen) über :has() ansprechen und die Transform-Ebene
      auflösen. Getrennt vom obigen Block, damit ältere Engines ohne :has()
      die klassenbasierten Regeln trotzdem anwenden. */
div:has(> .sp-willkommen),
div:has(> .card .sp-lesen),
div:has(> .card.sp-quiz),
div:has(> .card.sp-ergebnis) {
  transform: none !important;
  opacity: 1 !important;
  will-change: auto !important;
}