/* Bühne der Produktdemo: feste Fläche, darin die skalierte „Welt“ mit App-Fenstern, Cursor und Markierung.
   Seitenverhältnis über --kfd-verhaeltnis (Standard 16/10); Farben der Seite über die Variablen der jeweiligen Seite. */
.kfd-buehne { position: relative; overflow: hidden; aspect-ratio: var(--kfd-verhaeltnis, 16 / 10); background: #FAFAFC; isolation: isolate; contain: layout paint; }
.kfd-welt { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.kfd-seite { position: absolute; left: 0; top: 0; border: 0; background: #FAFAFC; opacity: 0; visibility: hidden; transition-property: opacity, visibility; transition-timing-function: ease; }
.kfd-seite.ist-aktiv { opacity: 1; visibility: visible; }
.kfd-schutz { position: absolute; inset: 0; z-index: 3; cursor: default; }

.kfd-cursor { position: absolute; left: 0; top: 0; z-index: 4; width: 28px; height: 28px; margin: -3px 0 0 -5px; opacity: 0; pointer-events: none; transform-origin: 5px 3px; filter: drop-shadow(0 2px 4px rgba(13, 15, 22, 0.35)); }
.kfd-cursor.ist-sichtbar { opacity: 1; }
.kfd-cursor svg { display: block; }
.kfd-cursor i { position: absolute; left: -9px; top: -11px; width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid #3B38F5; opacity: 0; }
.kfd-cursor.klickt i { animation: kfd-klick 0.5s ease-out; }
@keyframes kfd-klick { 0% { transform: scale(0.3); opacity: 0.95; } 100% { transform: scale(1.9); opacity: 0; } }

.kfd-ring { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; opacity: 0; box-shadow: 0 0 0 2.5px #3B38F5, 0 18px 50px rgba(59, 56, 245, 0.28); transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.62, 0.02, 0.24, 1), width 0.6s cubic-bezier(0.62, 0.02, 0.24, 1), height 0.6s cubic-bezier(0.62, 0.02, 0.24, 1); }
.kfd-ring.ist-sichtbar { opacity: 1; }
/* Spot: alles außerhalb der Markierung leicht abdunkeln, wie ein Scheinwerfer. */
.kfd-ring.ist-spot { box-shadow: 0 0 0 2.5px #3B38F5, 0 0 0 4000px rgba(13, 15, 22, 0.32); }

@media (prefers-reduced-motion: reduce) {
  .kfd-seite, .kfd-ring { transition: none; }
  .kfd-cursor { display: none; }
}