/* Eye-Tracking-Overlay fuer das Hero-Bild auf index.php.
   Ersetzt <img src="cover.jpg"> innerhalb von .video-panel durch:

   <div class="kfeye-stage">
     <div class="kfeye-white kfeye-white--links"><img src="eye/kugel-links.webp" alt=""></div>
     <div class="kfeye-white kfeye-white--rechts"><img src="eye/kugel-rechts.webp" alt=""></div>
     <div class="kfeye-iris kfeye-iris--links"><img src="eye/iris-links.webp" alt=""></div>
     <div class="kfeye-iris kfeye-iris--rechts"><img src="eye/iris-rechts.webp" alt=""></div>
     <img class="kfeye-face" src="eye/face.webp" alt="KI-Influencer">
   </div>

   Alle Prozentwerte sind relativ zu face.webp (1672x941 px), genau wie
   .video-panel selbst im 16:9-Format ist -- deckt sich 1:1.

   WICHTIG: includes/site.css schreibt JEDE Regel unter dem Namensraum
   "body.page-index" (z.B. "body.page-index .video-panel img{...z-index:1...}").
   Das ist Spezifitaet (0 IDs, 2 Klassen, 2 Elementtypen) -- staerker als eine
   einfache Klassen-Kette wie ".kfeye-stage .kfeye-face" (2 Klassen, 0 Typen).
   Dadurch hat die alte Regel beim ersten Versuch weiterhin gewonnen und das
   Gesichtsbild (die Maske) auf z-index:1 runtergezogen, obwohl hier z-index:3
   stand -- die Iris lag dann ueber der Maske statt darunter und ist beim
   Verfolgen sichtbar ueber den Lidrand gerutscht.

   Fix: alle Selektoren hier beginnen jetzt genauso mit "body.page-index",
   plus ".kfeye-stage" als zusaetzliche Klasse obendrauf -- das schlaegt
   jede Regel aus site.css garantiert, unabhaengig von der Ladereihenfolge. */

body.page-index .kfeye-stage{
  position:absolute;
  inset:0;
  z-index:1; /* gleiche Ebene wie vorher das <img src="cover.jpg"> */
}

body.page-index .kfeye-stage .kfeye-face{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  z-index:3;
  pointer-events:none;
}

body.page-index .kfeye-stage .kfeye-iris{
  position:absolute;
  transform:translate(-50%,-50%);
  pointer-events:none;
  overflow:visible;
  z-index:2;
  perspective:800px;
}
body.page-index .kfeye-stage .kfeye-iris img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:2;
  transition:transform .08s ease-out;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  filter: drop-shadow(0 0 2px #666) drop-shadow(0 0 2px #666);
  opacity:.90;
  will-change:transform;
}
body.page-index .kfeye-stage .kfeye-iris--links{   left:28.8%;  top:36.45%; width:2.691%; height:4.782%; }
body.page-index .kfeye-stage .kfeye-iris--rechts{  left:42.97%; top:36.72%; width:2.91%; height:5.17%; }

body.page-index .kfeye-stage .kfeye-white{
  position:absolute;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:1;
}
body.page-index .kfeye-stage .kfeye-white img{ position:static; width:100%; height:100%; display:block; object-fit:cover; z-index:auto; }
body.page-index .kfeye-stage .kfeye-white--links{   left:28.8%;  top:36.45%; width:5.988%;  height:10.527%; }
body.page-index .kfeye-stage .kfeye-white--rechts{  left:42.97%; top:36.72%; width:5.789%;  height:10.179%; }