/* Alpha 4.66: Figur aus Licht (web/js/humanoid.js) - Buehne, Laborseite */

/* Buehne in der Kommandozentrale: hinter dem Inhalt des Reiters D.A.V.I.N.A. */
#humanoidBuehne{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s ease}
#humanoidBuehne.an{opacity:1}
/* nicht die Leinwaende der Kulisse: die Regel mit der ID schlug sonst deren eigene Groesse (Tiefes All 108 %), das Bild
   endete rechts und unten vor dem Rand (09.11.2026, Davids Bildschirmfoto: schwarzer Streifen rechts) */
#humanoidBuehne canvas:not(.hmKulisse canvas){display:block;width:100%;height:100%}
#humanoidBuehne>canvas,#hmLeinwand{position:relative}   /* ueber der Kulisse */

/* Laborseite */
body.hmLabor{margin:0;background:#03060b;color:#cfe6ff;font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden}
.hmBuehne{position:fixed;inset:0}
.hmBuehne canvas{display:block;width:100%;height:100%;touch-action:none}
.hmPult{position:fixed;top:12px;right:12px;bottom:12px;width:min(340px,calc(100vw - 24px));overflow:auto;
  background:rgba(6,14,24,.82);border:1px solid rgba(120,180,255,.25);border-radius:10px;padding:12px 14px;
  backdrop-filter:blur(6px)}
.hmPult.zu{display:none}
.hmPult h1{margin:0 0 6px;font-size:16px;font-weight:600;letter-spacing:.04em}
.hmStat{font:12px/1.5 ui-monospace,Consolas,monospace;color:#9fc4ee;white-space:pre-wrap;min-height:3em}
.hmGruppe{margin:12px 0 4px;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#6f98c4}
.hmZeile{display:flex;align-items:center;gap:8px;margin:4px 0}
.hmZeile label{flex:0 0 auto;min-width:96px}
.hmZeile input[type=range]{flex:1;min-width:0}
.hmZeile span{min-width:58px;text-align:right;font:12px ui-monospace,Consolas,monospace;color:#9fc4ee}
.hmZeile select{flex:1;background:#0b1828;color:inherit;border:1px solid rgba(120,180,255,.3);border-radius:6px;padding:4px}
.hmKnoepfe{flex-wrap:wrap}
.hmKnoepfe button{background:#0b1828;color:inherit;border:1px solid rgba(120,180,255,.3);border-radius:6px;padding:6px 10px;font:inherit;cursor:pointer}
.hmKnoepfe button.an{background:#16406b;border-color:#6fb2ff}
.hmHinweis{margin-top:10px;font-size:12px;color:#7d9cbd}
.hmMeldung{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);max-width:min(560px,90vw);padding:16px 18px;
  background:rgba(6,14,24,.92);border:1px solid rgba(255,160,120,.5);border-radius:10px;text-align:center}
.hmMeldung a{color:#8fd0ff}
@media (max-width:680px){
  .hmPult{top:auto;left:8px;right:8px;width:auto;max-height:46vh;bottom:8px}
}

/* Figur an: sie ersetzt die Zierkacheln des HUD (Rad, Kernstatus, Audiopegel,
   Kamera solange aus) - Magic und Wheel·Magic bleiben als eine Zeile stehen.
   Die Figur steht dann im freien Feld ueber dem Dialog (humanoidRahmen). */
body.humanoid-an #jarvis .band.hudmagic{grid-template-rows:auto}
body.humanoid-an #jarvis .band.hudmagic>.vizwheel,
body.humanoid-an #jarvis .band.hudmagic>.kernfeld,
body.humanoid-an #jarvis .band.hudmagic>.viz:has(#spec){display:none}
body.humanoid-an:not(.kamera-an) #jarvis .band.hudmagic>.vizkamera{display:none}
body.humanoid-an #jarvis .band.hudmagic>.vizwheelmagic{grid-column:1}

/* Buehne (06.11.2026, 17:51): im Gespraech nur das Wesen vor der Kulisse.
   humanoid-buehne blendet alles andere aus, humanoid-zurueck haelt den
   Uebergang beim Wiedereinblenden (humanoid_anbindung.js, humanoidBuehneSchritt). */
body.humanoid-buehne>*:not(#humanoidBuehne):not(#humanoidKameraLampe),body.humanoid-zurueck>*:not(#humanoidBuehne):not(#humanoidKameraLampe){transition:opacity .7s ease}
body.humanoid-buehne>*:not(#humanoidBuehne):not(#humanoidKameraLampe){opacity:0!important;pointer-events:none!important}
body.humanoid-buehne #humanoidBuehne{z-index:2147483000}
body.humanoid-buehne{cursor:none}

/* Kulisse der Buehne (web/js/humanoid_kulisse.js): fuenf Hintergruende und "aus" (07.11.2026).
   --mx/--my/--mh: Lage der Figur (rahmen()), --saum: Farbe des Lichtsaums, --puls: Stimme 0..1. */
.hmKulisse{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;overflow:hidden;pointer-events:none;
  --mx:50%;--my:50%;--mh:.94;--saum:120,60,220;--kern:3,1,10}
.hmKulisse.an{opacity:1}
.hmKArt{position:absolute;inset:0;transition:opacity .8s ease}
.hmKArt.neu,.hmKArt.weg{opacity:0}
.hmKArt>*{position:absolute}
.hmKArt>canvas{inset:0;width:100%;height:100%}
.hmKGrund{inset:0}
/* dunkler Kern hinter dem Wesen (sonst scheint der Hintergrund durch die Figur), Lichtsaum atmet mit der Stimme */
.hmKAura{left:var(--mx);top:var(--my);width:min(calc(var(--mh) * 89vh * var(--kernmass,1)),92vw);height:min(calc(var(--mh) * 117vh * var(--kernmass,1)),121vw);
  transform:translate(-50%,-50%) scale(calc(1 + var(--puls,0) * .08));
  /* closest-side: der Verlauf endet sicher im eigenen Kasten (vorher farthest-corner bei 45 %: oben
     abgeschnitten - eine waagrechte Kante, sobald der Kasten im Bild lag, z. B. Labor, Fernseher, Horizont) */
  background:radial-gradient(closest-side,rgba(var(--kern),.92) 0%,rgba(var(--kern),.78) 52%,rgba(var(--saum),calc(.10 + var(--puls,0) * .18)) 80%,transparent 100%);
  transition:transform .12s linear}

/* 1 Sternennebel mit Lichtsee */
[data-art=nebel] .hmKGrund{background:radial-gradient(ellipse 70% 60% at 50% 45%,#1c0d3a 0%,#0d0622 45%,#04020b 100%)}
.hmKNebel{inset:-30%;background-size:cover;background-position:center;opacity:0;transition:opacity 2.5s ease;mix-blend-mode:screen}
.hmKA.da{opacity:.5}
.hmKB.da{opacity:.32}
.hmKA{animation:hmKDreh 240s linear infinite}
.hmKB{animation:hmKTreib 150s ease-in-out infinite alternate}
.hmKSee{left:var(--mx);bottom:-7vmin;width:115vmin;height:24vmin;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 50%,rgba(200,120,255,.45) 0%,rgba(255,150,80,.16) 30%,rgba(80,40,160,.10) 55%,transparent 72%)}
.hmKSee i{position:absolute;left:50%;top:50%;width:100%;height:100%;border:2px solid rgba(220,170,255,.5);border-radius:50%;
  transform:translate(-50%,-50%) scale(.2);opacity:0;animation:hmKRing 9s linear infinite}
.hmKSee i:nth-child(2){animation-delay:3s;border-color:rgba(255,180,110,.45)}
.hmKSee i:nth-child(3){animation-delay:6s}
@keyframes hmKDreh{from{transform:rotate(0deg) scale(1.15)}to{transform:rotate(360deg) scale(1.15)}}
@keyframes hmKTreib{from{transform:translate(-6%,3%) scale(1.25) rotate(-8deg)}to{transform:translate(6%,-3%) scale(1.4) rotate(10deg)}}
@keyframes hmKRing{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}15%{opacity:.8}100%{transform:translate(-50%,-50%) scale(1.25);opacity:0}}

/* 2 Nordlicht: Vorhaenge auf einer kleinen Leinwand (weich gross gezogen), Berge als SVG */
[data-art=nordlicht]{--saum:50,210,160;--kern:1,4,8}
[data-art=nordlicht] .hmKGrund{background:linear-gradient(to bottom,#010208 0%,#020b14 40%,#05181f 72%,#020709 100%)}
.hmKNord{mix-blend-mode:screen}
.hmKBerge{left:0;right:0;bottom:0;height:46vh;background-size:100% 100%;background-repeat:no-repeat}
/* Widerschein des Nordlichts auf den Kaemmen: eigene Ebene, atmet langsam (nur Compositor) */
.hmKBergeSchein{mix-blend-mode:screen;animation:hmKWiderschein 13s ease-in-out infinite alternate}
@keyframes hmKWiderschein{from{opacity:.45}to{opacity:1}}

/* 3 Tiefsee: Flimmern der Oberflaeche, schwankende Lichtstrahlen, Teilchen auf der Leinwand */
[data-art=tiefsee]{--saum:40,170,220;--kern:1,6,12}
[data-art=tiefsee] .hmKGrund{background:linear-gradient(to bottom,#0c4d5f 0%,#07303f 14%,#041a28 40%,#020c15 70%,#010408 100%)}
.hmKFlimmer{left:0;top:0;width:160vw;height:28vh;background-size:60vw 100%;background-repeat:repeat-x;opacity:0;transition:opacity 2.5s ease;
  mix-blend-mode:screen;animation:hmKFliess 70s linear infinite;-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
.hmKFlimmer.da{opacity:.4}
.hmKStrahlen{inset:0;mix-blend-mode:screen}
.hmKStrahlen i{position:absolute;top:-8%;height:118%;width:14vw;transform-origin:50% 0;
  background:linear-gradient(to bottom,rgba(160,235,255,.24),rgba(120,210,255,.08) 45%,transparent 85%);
  clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 38%,#000 62%,transparent);mask-image:linear-gradient(to right,transparent,#000 38%,#000 62%,transparent);
  animation:hmKSchwank 17s ease-in-out infinite alternate}
.hmKStrahlen i:nth-child(1){left:4%;width:11vw;animation-duration:19s;animation-delay:-4s}
.hmKStrahlen i:nth-child(2){left:20%;width:16vw;animation-duration:23s;animation-delay:-11s}
.hmKStrahlen i:nth-child(3){left:39%;width:20vw;animation-duration:29s;animation-delay:-2s}
.hmKStrahlen i:nth-child(4){left:56%;width:13vw;animation-duration:21s;animation-delay:-15s}
.hmKStrahlen i:nth-child(5){left:68%;width:18vw;animation-duration:26s;animation-delay:-7s}
.hmKStrahlen i:nth-child(6){left:85%;width:10vw;animation-duration:18s;animation-delay:-9s}
.hmKBoden{left:0;right:0;bottom:0;height:20vh;background:radial-gradient(ellipse 60% 100% at 50% 100%,rgba(30,130,150,.16),transparent 70%)}
@keyframes hmKFliess{from{transform:translateX(0)}to{transform:translateX(-60vw)}}
@keyframes hmKSchwank{0%{transform:rotate(-5deg);opacity:.45}50%{opacity:1}100%{transform:rotate(4deg);opacity:.6}}

/* 4 Galaxie: einmal berechnetes Bild, gekippt und langsam gedreht (nur Compositor) */
[data-art=galaxie]{--saum:150,120,255;--kern:3,2,10}
[data-art=galaxie] .hmKGrund{background:radial-gradient(ellipse 80% 70% at 50% 45%,#0b0820 0%,#05040f 50%,#010103 100%)}
/* Kern rechts oben neben der Figur (sie bleibt vorn), die Arme ziehen hinter ihr durch */
.hmKGalaxie{left:calc(var(--mx) + 25vw);top:30%;width:100vmax;height:100vmax;transform:translate(-50%,-50%) perspective(2200px) rotateX(62deg) rotateZ(-24deg)}
.hmKGalaxieBild{position:absolute;inset:0;background-size:100% 100%;opacity:0;transition:opacity 2.5s ease;animation:hmKKreis 900s linear infinite}
.hmKGalaxieBild.da{opacity:.66}
.hmKKern{left:calc(var(--mx) + 25vw);top:30%;width:46vmin;height:24vmin;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,rgba(255,225,180,.30),rgba(255,180,140,.08) 45%,transparent 70%);animation:hmKAtmen 11s ease-in-out infinite alternate}
@keyframes hmKKreis{to{transform:rotate(360deg)}}
@keyframes hmKAtmen{from{opacity:.65}to{opacity:1}}

/* 5 Lichtgitter am Horizont: Abendhimmel, halb versunkene Streifensonne, Gitterboden (Leinwand) */
[data-art=horizont]{--saum:230,70,200;--kern:4,1,12;--kernmass:.82}
[data-art=horizont] .hmKGrund{background:linear-gradient(to bottom,#030110 0%,#0a0424 30%,#1c0836 50%,#3a0f4a 63.6%,#100320 64%,#05010c 100%)}
.hmKHimmel{left:0;right:0;top:0;height:64%;overflow:hidden}
.hmKHimmel>*{position:absolute}
.hmKSonne{left:var(--mx);bottom:0;width:96vmin;height:96vmin;transform:translate(-50%,54%);border-radius:50%;
  background:linear-gradient(to bottom,#ffd88a 0%,#ff9a7a 35%,#ff5aa0 62%,#b03ab0 88%);opacity:.6;
  /* Streifen nach unten breiter (sichtbar ist die obere Haelfte, Horizont bei 46 %) */
  -webkit-mask-image:linear-gradient(to bottom,#000 0 24%,transparent 24% 25.5%,#000 25.5% 29.5%,transparent 29.5% 31.5%,#000 31.5% 35%,transparent 35% 37.5%,#000 37.5% 40.5%,transparent 40.5% 43.5%,#000 43.5%);
  mask-image:linear-gradient(to bottom,#000 0 24%,transparent 24% 25.5%,#000 25.5% 29.5%,transparent 29.5% 31.5%,#000 31.5% 35%,transparent 35% 37.5%,#000 37.5% 40.5%,transparent 40.5% 43.5%,#000 43.5%);
  animation:hmKGlut 14s ease-in-out infinite alternate}
.hmKSonneSchein{left:var(--mx);bottom:0;width:130vmin;height:62vmin;transform:translate(-50%,50%);
  background:radial-gradient(ellipse at center,rgba(255,90,190,.34),rgba(140,40,180,.12) 45%,transparent 70%)}
[data-art=horizont] .hmKBerge{bottom:36%;height:13vh}
.hmKDunst{left:0;right:0;top:calc(64% - 4vh);height:8vh;background:linear-gradient(to bottom,transparent,rgba(255,80,200,.16) 50%,transparent)}
@keyframes hmKGlut{from{opacity:.5}to{opacity:.68}}

/* 6 Tiefes All (09.11.2026): einmal berechnetes Bild in voller Aufloesung, treibt kaum merklich (nur Compositor) */
[data-art=all]{--saum:120,150,255;--kern:1,2,8}
[data-art=all] .hmKGrund{background:radial-gradient(ellipse 85% 75% at 50% 48%,#05061a 0%,#03030c 55%,#000002 100%)}
.hmKArt>canvas.hmKAll{inset:-4%;width:108%;height:108%;object-fit:cover;opacity:0;transition:opacity 3s ease;animation:hmKAllTreib 360s ease-in-out infinite alternate}
.hmKArt>canvas.hmKAll.da{opacity:1}
@keyframes hmKAllTreib{from{transform:scale(1) translate(0,0) rotate(0deg)}to{transform:scale(1.05) translate(-1.2%,.8%) rotate(.6deg)}}

/* Ein- und Ausblendungen der Buehne (09.11.2026, 01:23, David: "Ueberlege Dir fancy Einblendungen und Ausblendungen").
   data-ueb an .hmKulisse (wird beschnitten) und an .hmKEffekt (Ring, Lichtlinie, Blitz, Sternstreifen daneben); .an = Einblendung,
   ohne .an = Ausblendung - die Kulisse bleibt sichtbar, bis der Effekt durch ist (opacity mit Verzoegerung).
   --hmKR: Radius der Irisblende und des Portalrings (registriert, damit er sich weich aendert) */
@property --hmKR{syntax:'<length>';inherits:true;initial-value:0px}
@property --hmKPunkt{syntax:'<length>';inherits:false;initial-value:0px}
.hmKEffekt{position:absolute;inset:0;pointer-events:none;overflow:hidden;--mx:50%;--my:50%;--saum:120,60,220}
.hmKEffekt>i{position:absolute;display:block;opacity:0}
/* Irisblende und Lichtportal: ein Kreis oeffnet sich aus der Figur und schliesst sich in sie */
.hmKulisse[data-ueb=iris],.hmKulisse[data-ueb=portal],.hmKEffekt[data-ueb=portal]{--hmKR:0px;transition:--hmKR 1.2s cubic-bezier(.7,0,.3,1),opacity 0s 1.2s}
.hmKulisse[data-ueb=iris].an,.hmKulisse[data-ueb=portal].an,.hmKEffekt[data-ueb=portal].an{--hmKR:90vmax;transition:--hmKR 1.9s cubic-bezier(.35,0,.25,1),opacity 0s}
.hmKulisse[data-ueb=iris],.hmKulisse[data-ueb=portal]{clip-path:circle(var(--hmKR) at var(--mx) var(--my))}
.hmKEffekt[data-ueb=portal] .hmKRing{left:var(--mx);top:var(--my);width:calc(var(--hmKR) * 2);height:calc(var(--hmKR) * 2);transform:translate(-50%,-50%);border-radius:50%;
  border:2px solid rgba(255,255,255,.85);box-shadow:0 0 26px 8px rgba(var(--saum),.85),inset 0 0 34px 10px rgba(var(--saum),.7);opacity:1;transition:opacity .4s ease}
.hmKEffekt[data-ueb=portal].an .hmKRing{animation:hmKRingEin 1.9s ease forwards}
.hmKEffekt[data-ueb=portal]:not(.an) .hmKRing{animation:hmKRingAus 1.2s ease forwards}
@keyframes hmKRingEin{0%{opacity:0}8%{opacity:1}70%{opacity:1}100%{opacity:0}}
@keyframes hmKRingAus{0%{opacity:0}10%{opacity:1}90%{opacity:1}100%{opacity:0}}
/* Sprung durch den Hyperraum: Sternstreifen schiessen aus der Figur, das Bild kommt aus der Tiefe - beim Ausblenden fliegt es vorbei */
.hmKulisse[data-ueb=warp]{transform-origin:var(--mx) var(--my);transform:scale(2.3);transition:transform 1.1s cubic-bezier(.55,0,1,.45),opacity .7s ease-in .4s}
.hmKulisse[data-ueb=warp].an{transform:scale(1);transition:transform 1.8s cubic-bezier(0,.55,.2,1),opacity .5s ease-out}
.hmKEffekt[data-ueb=warp] .hmKStreifen{inset:-30%;background:repeating-conic-gradient(from 3deg at var(--mx) var(--my),rgba(255,255,255,0) 0deg,rgba(200,220,255,.5) .35deg,rgba(255,255,255,0) 1.1deg,rgba(255,255,255,0) 2.7deg);
  -webkit-mask-image:radial-gradient(circle at var(--mx) var(--my),transparent 6%,#000 40%);mask-image:radial-gradient(circle at var(--mx) var(--my),transparent 6%,#000 40%);transform-origin:var(--mx) var(--my)}
.hmKEffekt[data-ueb=warp].an .hmKStreifen{animation:hmKWarpEin 1.6s cubic-bezier(.2,.6,.3,1) forwards}
.hmKEffekt[data-ueb=warp]:not(.an) .hmKStreifen{animation:hmKWarpAus 1.1s cubic-bezier(.6,0,1,.4) forwards}
.hmKEffekt[data-ueb=warp] .hmKBlitz{left:var(--mx);top:var(--my);width:120vmin;height:120vmin;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.95),rgba(var(--saum),.45) 25%,transparent 62%)}
.hmKEffekt[data-ueb=warp].an .hmKBlitz{animation:hmKBlitz 1.2s ease-out forwards}
@keyframes hmKWarpEin{0%{opacity:0;transform:scale(.4)}20%{opacity:1}100%{opacity:0;transform:scale(2.2)}}
@keyframes hmKWarpAus{0%{opacity:0;transform:scale(1)}35%{opacity:.9}100%{opacity:0;transform:scale(3)}}
@keyframes hmKBlitz{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}15%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}
/* Lichtvorhang: eine leuchtende Linie zieht von oben nach unten und zieht das Bild hinter sich auf - beim Ausblenden zurueck */
.hmKulisse[data-ueb=vorhang]{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s cubic-bezier(.6,0,.4,1),opacity 0s 1.2s}
.hmKulisse[data-ueb=vorhang].an{clip-path:inset(0 0 0 0);transition:clip-path 1.7s cubic-bezier(.4,0,.2,1),opacity 0s}
.hmKEffekt[data-ueb=vorhang] .hmKLinie{left:-5%;right:-5%;top:0;height:3px;margin-top:-1px;
  background:linear-gradient(90deg,transparent,rgba(var(--saum),1) 18%,#fff 50%,rgba(var(--saum),1) 82%,transparent);box-shadow:0 0 22px 7px rgba(var(--saum),.75),0 0 60px 18px rgba(var(--saum),.3)}
.hmKEffekt[data-ueb=vorhang].an .hmKLinie{animation:hmKLinieEin 1.7s cubic-bezier(.4,0,.2,1) forwards}
.hmKEffekt[data-ueb=vorhang]:not(.an) .hmKLinie{animation:hmKLinieAus 1.2s cubic-bezier(.6,0,.4,1) forwards}
@keyframes hmKLinieEin{0%{top:0;opacity:1}94%{opacity:1}100%{top:100%;opacity:0}}
@keyframes hmKLinieAus{0%{top:100%;opacity:1}94%{opacity:1}100%{top:0;opacity:0}}
/* Lichtpunkte: das Bild erscheint als Raster aus Punkten, die wachsen, und fuellt sich von der Figur aus */
.hmKulisse[data-ueb=raster]{--hmKR:0px;
  -webkit-mask-image:radial-gradient(circle,#000 var(--hmKPunkt),transparent calc(var(--hmKPunkt) + 1px)),radial-gradient(circle at var(--mx) var(--my),#000 var(--hmKR),transparent calc(var(--hmKR) + 25vmax));
  mask-image:radial-gradient(circle,#000 var(--hmKPunkt),transparent calc(var(--hmKPunkt) + 1px)),radial-gradient(circle at var(--mx) var(--my),#000 var(--hmKR),transparent calc(var(--hmKR) + 25vmax));
  -webkit-mask-size:22px 22px,100% 100%;mask-size:22px 22px,100% 100%;-webkit-mask-repeat:repeat,no-repeat;mask-repeat:repeat,no-repeat;
  transition:--hmKPunkt 1.1s cubic-bezier(.4,0,.6,1),--hmKR .5s cubic-bezier(.2,.6,.4,1),opacity 0s 1.15s}
.hmKulisse[data-ueb=raster].an{--hmKPunkt:12px;--hmKR:90vmax;transition:--hmKPunkt 1.2s cubic-bezier(.3,0,.3,1),--hmKR 2.2s cubic-bezier(.5,0,.3,1) .5s,opacity 0s}
/* Bewegung reduzieren: immer weich ueberblenden */
@media (prefers-reduced-motion:reduce){.hmKulisse[data-ueb]{clip-path:none!important;transform:none!important;-webkit-mask-image:none!important;mask-image:none!important}.hmKEffekt{display:none}}

/* Unschaerfe des Hintergrunds (09.11.2026, Regler): alle Ebenen ausser den funkelnden Sternen (die werden weiche
   Scheiben) und dem Tiefen All (dort eingebacken) */
.hmKulisse[data-unsch] .hmKArt>:not([data-lw=vorne]):not(.hmKAll):not(.hmKGrund){filter:blur(var(--hmKUnsch,0px))}   /* nur wenn eingestellt (kein Filter bei 0) */

/* aus: schwarz */
[data-art=aus] .hmKGrund{background:#000}
/* Koernung gegen Farbstufen (humanoid_kulisse.js kornBild): 0..3 Stufen, aufaddiert; bei "aus" nicht */
.hmKKorn{position:absolute;inset:0;mix-blend-mode:screen;background-size:192px 192px;pointer-events:none}
[data-art=aus]>.hmKKorn{display:none}

.hmKulisse:not(.an) .hmKArt *{animation-play-state:paused}
.hmKulisse.warnung{filter:hue-rotate(-60deg) saturate(1.25)}
@media (prefers-reduced-motion:reduce){.hmKArt *{animation:none!important}}

/* Fernseher (07.11.2026, humanoid_tv.js): Hintergrund im Gespraech hinter der Figur, unter der
   Buehne der Fernseh-Seite; der Dialogtext wird hell (sonst dunkle Schrift auf dunklem Grund in den
   hellen Designs). */
#tvKulisse{position:fixed;inset:0;z-index:0;pointer-events:none}
html body.tvKulisseAn #tvDialogText .antwort{color:#f3f6fb}
html body.tvKulisseAn #tvDialogText .frage{color:rgba(225,232,245,.72)}

/* Kamera-Verfolgung: Lampe unten rechts, solange die Kamera laeuft (auch auf der Buehne) */
#humanoidKameraLampe{position:fixed;right:14px;bottom:12px;z-index:2147483600;display:none;align-items:center;gap:6px;
  padding:4px 10px 4px 8px;border-radius:12px;background:rgba(20,6,10,.7);border:1px solid rgba(255,90,90,.55);
  color:#ffc9c9;font:12px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;pointer-events:auto}
#humanoidKameraLampe.an{display:flex}
#humanoidKameraLampe::before{content:"";width:8px;height:8px;border-radius:50%;background:#ff4b4b;box-shadow:0 0 8px #ff4b4b}