/* ===== Startbildschirm: 3D-Rechner, CD, Power ===== */
#power{position:fixed;inset:0;z-index:200000;overflow:hidden;display:flex;flex-direction:column;align-items:center;
  background:radial-gradient(ellipse at 50% 30%,#2a2f36 0,#121417 60%,#07080a 100%);color:#c8d0d8;font-family:var(--ui)}
.st-head{text-align:center;padding-top:2.5vh;flex:none;position:relative;z-index:3}
.st-head .power-title{font-size:46px;letter-spacing:5px}
.st-head .power-sub{font-size:15px;margin:2px 0 4px}
.st-head .power-slogan{margin-bottom:0;font-size:13px}
.st-stagewrap{flex:1;width:100%;position:relative;min-height:0;display:flex;align-items:center;justify-content:center}
.st-fit{position:relative;width:900px;height:560px;transform-origin:center center;flex:none}
.st-cam{position:absolute;inset:0;perspective:1400px;perspective-origin:500px -220px}
.st-stage{position:absolute;inset:0;transform-style:preserve-3d}
.st-over{position:absolute;inset:0;z-index:10;pointer-events:none}
.st-over>*{pointer-events:auto}
.st-over .st-hint{pointer-events:none}
#power.zoom .st-over{opacity:0;transition:opacity .4s}

/* Tisch */
.st-wall{position:absolute;left:-2600px;right:-2600px;top:-2200px;bottom:-2200px;transform:translateZ(-700px);background:radial-gradient(ellipse at 50% 45%,#363c44 0,#22272d 40%,#121418 75%)}
.st-desk{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.desk-top{position:absolute;left:-450px;width:1800px;top:470px;height:560px;transform-origin:50% 0;transform:translateZ(-360px) rotateX(90deg);
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='700' height='260'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.003 0.11' numOctaves='4' seed='7'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.06  0 0 0 0 0.02  3.4 0 0 0 -1.35'/></filter><rect width='100%' height='100%' filter='url(%23w)'/></svg>") 0 0/700px 260px,linear-gradient(180deg,#5e2e14,#8a4622 45%,#a65a2c);
  box-shadow:inset 0 -2px 0 rgba(255,210,170,.35)}
.desk-top::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 40% 60%,rgba(255,220,180,.18),transparent 60%),linear-gradient(180deg,rgba(0,0,0,.45),transparent 50%)}
.desk-edge{position:absolute;left:-450px;width:1800px;top:470px;height:32px;transform:translateZ(200px);
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='700' height='260'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.003 0.11' numOctaves='4' seed='7'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.06  0 0 0 0 0.02  3.4 0 0 0 -1.35'/></filter><rect width='100%' height='100%' filter='url(%23w)'/></svg>") 0 40px/700px 260px,linear-gradient(180deg,#8a4622,#5a2a10);
  box-shadow:0 1px 0 #2a1206,inset 0 2px 0 rgba(255,210,170,.25),0 12px 24px rgba(0,0,0,.55)}
.desk-leg{position:absolute;top:502px;width:56px;height:700px;transform:translateZ(185px);background:linear-gradient(90deg,#3e1a08,#6a3214 45%,#3e1a08);box-shadow:inset 0 8px 10px rgba(0,0,0,.5)}
.desk-leg.l{left:20px}.desk-leg.r{left:824px}

/* 3D-Szene */
.st-scene{position:absolute;left:60px;top:30px;width:240px;height:440px;transform-style:preserve-3d;transform:translateZ(-60px)}
.pc{position:relative;width:240px;height:440px;transform-style:preserve-3d;transform:rotateY(0deg);transition:transform .25s ease-out}
.pc .f{position:absolute;left:0;top:0}
.f-front{width:240px;height:440px;transform:translateZ(160px);transform-style:preserve-3d;
  background:linear-gradient(180deg,#efe9d6 0,#e6dfc8 55%,#ddd5bc 100%);box-shadow:inset 0 0 0 2px #f8f4e8,inset 0 0 0 3px #b8af96,inset -6px 0 10px rgba(0,0,0,.08);border-radius:6px 6px 3px 3px}
.f-back{width:240px;height:440px;transform:rotateY(180deg) translateZ(160px);background:#b7af98}
.f-right{width:320px;height:440px;left:-40px!important;transform:rotateY(90deg) translateZ(120px);
  background:linear-gradient(90deg,#c9c1a8,#d8d0b8 30%,#cfc7ae);box-shadow:inset 0 0 0 1px #a8a088}
.f-left{width:320px;height:440px;left:-40px!important;transform:rotateY(-90deg) translateZ(120px);background:#c4bca3}
.f-top{width:240px;height:320px;top:60px!important;transform:rotateX(90deg) translateZ(220px);background:linear-gradient(180deg,#e9e3cf,#dcd4bd);box-shadow:inset 0 0 0 1px #b8af96}
.f-bottom{width:240px;height:320px;top:60px!important;transform:rotateX(-90deg) translateZ(220px);background:#555}
.pc-shadow{position:absolute;left:-90px;bottom:-30px;width:420px;height:70px;background:radial-gradient(ellipse,rgba(0,0,0,.6),transparent 70%);transform:rotateX(80deg)}

/* Front-Details */
.drive{position:absolute;left:16px;top:26px;width:208px;height:46px;background:linear-gradient(180deg,#2a2a2a,#151515);border-radius:2px;box-shadow:0 0 0 2px #cfc7ae,0 1px 0 3px #f6f1e2;transform-style:preserve-3d}
.drive-logo{position:absolute;left:10px;top:28px;font:bold 8px Arial;color:#9aa;letter-spacing:1px}
.drive-led{position:absolute;right:46px;top:30px;width:6px;height:3px;background:#3a2a00}
.drive.spin .drive-led,.drive.busy .drive-led{background:#ffb000;box-shadow:0 0 4px #ffb000;animation:ledblink .25s steps(1) infinite}
.drive-eject{position:absolute;right:12px;top:27px;width:24px;height:8px;background:linear-gradient(#555,#2a2a2a);border-radius:2px;cursor:pointer;box-shadow:0 1px 0 #000}
.drive-eject:active{transform:translateY(1px)}
.tray{position:absolute;left:14px;top:8px;width:140px;height:13px;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.5,0,.4,1)}
.tray-front{position:absolute;inset:0;background:linear-gradient(180deg,#333,#1d1d1d);border-top:1px solid #444;border-bottom:1px solid #000}
.tray-deck{position:absolute;left:0;top:0;width:140px;height:128px;transform-origin:top center;transform:rotateX(-90deg);background:linear-gradient(180deg,#2c2c2c,#1a1a1a);display:flex;align-items:center;justify-content:center}
.tray-deck::before{content:"";width:112px;height:112px;border-radius:50%;background:#111;box-shadow:inset 0 0 0 2px #333}
.tray-disc{position:absolute;width:108px;height:108px;border-radius:50%;opacity:0;transition:opacity .2s}
.pc.has-disc .tray-disc{opacity:1}
.pc.open .tray{transform:translateZ(118px)}
.bay{position:absolute;left:16px;width:208px;height:38px;background:linear-gradient(180deg,#ebe5d1,#ddd6bf);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #b0a78e,0 0 0 1px #c8bfa6}
.bay.b2{top:84px}.bay.b3{top:128px}
.bay.b3::after{content:"";position:absolute;left:96px;top:15px;width:7px;height:7px;border-radius:50%;background:#2a2a2a}
.floppy{position:absolute;left:36px;top:180px;width:168px;height:28px;background:linear-gradient(180deg,#e2dcc6,#d6cfb6);border-radius:3px;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #a9a087}
.floppy::before{content:"";position:absolute;left:24px;top:11px;width:110px;height:5px;background:#333;border-radius:2px}
.floppy::after{content:"";position:absolute;right:12px;top:9px;width:14px;height:8px;background:#c8c0a8;border-radius:2px;box-shadow:0 1px 0 #8a826a}
.badge-st{position:absolute;left:22px;top:250px;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#9cc8ff 45%,#1c4a9c);box-shadow:0 0 0 1px #666;font:bold 6px/30px Arial;color:#fff;text-align:center}
.pwr-plate{position:absolute;left:96px;top:232px;width:48px;height:92px;border-radius:24px;background:linear-gradient(90deg,#9aa0a6,#e6eaee 45%,#a6acb2);box-shadow:inset 0 0 0 1px #6a7076,0 1px 0 #fff}
.pwr-btn{position:absolute;left:9px;top:10px;width:30px;height:30px;border-radius:50%;cursor:pointer;background:radial-gradient(circle at 35% 30%,#fff,#c9cdd2 55%,#8a9096);box-shadow:0 2px 0 #5a6066,inset 0 0 0 1px #777}
.pwr-btn::after{content:"⏻";position:absolute;inset:0;font:14px/30px Arial;color:#55606a;text-align:center}
.pwr-btn:active{transform:translateY(2px);box-shadow:0 0 0 #5a6066,inset 0 0 0 1px #777}
.pc.ready .pwr-btn{animation:pwrglow 1.1s ease-in-out infinite}
@keyframes pwrglow{50%{box-shadow:0 2px 0 #5a6066,0 0 0 6px rgba(70,255,120,.45),0 0 18px 6px rgba(70,255,120,.55)}}
.rst-btn{position:absolute;left:19px;top:60px;width:10px;height:10px;border-radius:50%;background:#7a8086;box-shadow:inset 0 1px 1px #000}
.leds{position:absolute;left:62px;top:262px;display:flex;flex-direction:column;gap:8px}
.leds i{width:9px;height:5px;background:#2a3a2a;border-radius:1px;box-shadow:inset 0 0 0 1px #555}
.pc.on .leds .l-pw{background:#3cff6a;box-shadow:0 0 6px #3cff6a}
.pc.on .leds .l-hd{background:#ffb000;box-shadow:0 0 6px #ffb000;animation:ledblink .18s steps(1) infinite}
@keyframes ledblink{50%{opacity:.2}}
.vents{position:absolute;left:30px;right:30px;top:372px;height:44px;border-radius:12px 12px 4px 4px;background:repeating-linear-gradient(90deg,#1a1a1a 0 5px,#3a3a3a 5px 9px);box-shadow:inset 0 2px 4px #000,0 0 0 2px #cfc7ae}
.side-vent{position:absolute;right:30px;top:280px;width:90px;height:80px;background:repeating-linear-gradient(0deg,#b0a88f 0 3px,transparent 3px 8px);border-radius:4px;opacity:.7}

/* CD */
.st-cd{position:absolute;left:452px;bottom:10px;width:140px;height:140px;border-radius:50%;cursor:grab;z-index:5;touch-action:none;
  transform:perspective(700px) rotateX(64deg) rotateZ(-14deg);transition:transform .25s,filter .25s;filter:drop-shadow(0 18px 10px rgba(0,0,0,.6))}
.st-cd:hover{transform:perspective(700px) rotateX(55deg) rotateZ(-10deg) translateZ(14px)}
.st-cd.drag{cursor:grabbing;transition:none;transform:perspective(700px) rotateX(20deg) scale(1.05)}
.st-cd.fly{transition:none;cursor:default;filter:drop-shadow(0 26px 14px rgba(0,0,0,.45))}
.st-cd.gone{display:none}
.cd-face,.tray-disc{background:
  radial-gradient(circle,transparent 0 9%,#d8dde2 9.5% 15%,#9aa 15.5% 16%,transparent 16.5%),
  conic-gradient(from 20deg,#c9d3dc,#fff4c0,#ffc0e0,#c0e0ff,#d9ffd0,#c9d3dc,#ffe0b0,#d0c0ff,#c9d3dc);border-radius:50%}
.cd-face{position:absolute;inset:0;box-shadow:inset 0 0 0 2px #8a9096}
.cd-label{position:absolute;left:14%;right:14%;top:13%;height:29%;border-radius:60px 60px 0 0;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font:bold 15px "Comic Sans MS","Marker Felt",cursive;color:#1030c0;line-height:1.1;transform:rotate(-4deg)}
.cd-label small{font-size:10px;color:#c00000}
.st-hint{position:absolute;font:bold 13px var(--ui);color:#ffe066;text-shadow:0 1px 2px #000;pointer-events:none;white-space:nowrap;animation:hintbob 1.2s ease-in-out infinite}
@keyframes hintbob{50%{transform:translateY(-6px)}}
.st-hint.h-cd{left:604px;bottom:58px}
.st-hint.h-pw{left:110px;top:212px}
.st-bubble{position:absolute;z-index:20;left:330px;top:120px;background:#ffffe1;color:#000;border:1px solid #000;padding:6px 10px;font-size:12px;border-radius:6px;box-shadow:2px 2px 0 rgba(0,0,0,.4);animation:bubpop .2s steps(3)}
@keyframes bubpop{from{transform:scale(.6)}}

/* Schritte & Knöpfe */
.st-bottom{flex:none;position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;padding-bottom:2.5vh}
.st-steps{display:flex;gap:26px;font-size:14px}
.st-steps div{opacity:.55;display:flex;align-items:center;gap:6px}
.st-steps div.cur{opacity:1;color:#ffe066}
.st-steps div.ok{opacity:1;color:#5dff8a}
.st-modes{display:flex;gap:10px}
.st-modes button{font-size:12px;min-height:30px;padding:0 16px}
.st-modes button.sel{box-shadow:var(--pressed);background:#ffffe1;font-weight:bold}
.st-modenote{font-size:12px;color:#ff9a7a;min-height:15px}
.pc.on .f-front{animation:pcon .3s}
@keyframes pcon{50%{filter:brightness(1.08)}}
.st-flash{position:fixed;inset:0;background:#000;opacity:0;transition:opacity .6s;pointer-events:none;z-index:5}
.st-flash.on{opacity:1}

/* ===== Röhrenmonitor ===== */
.crt-scene{position:absolute;left:345px;top:170px;width:300px;height:300px;transform-style:preserve-3d;transform-origin:0 100%;transform:translateZ(-10px) scale(1.2)}
.crt{position:relative;width:300px;height:300px;transform-style:preserve-3d}
.crt .f{position:absolute;left:0;top:0}
.crt-shadow{position:absolute;left:-40px;bottom:-30px;width:380px;height:60px;background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%);transform:rotateX(80deg)}
/* Rahmen: 300×262, Tiefe 40 */
.cb-front{width:300px;height:262px;transform:translateZ(20px);border-radius:12px 12px 8px 8px;background:linear-gradient(180deg,#f0ead8 0,#e5dec7 60%,#d9d1b8 100%);box-shadow:inset 0 0 0 2px #f9f6ec,inset 0 0 0 3px #b8af96,inset 0 -8px 12px rgba(0,0,0,.08)}
.cb-right{width:40px;height:262px;left:130px!important;transform:rotateY(90deg) translateZ(150px);background:linear-gradient(90deg,#d2cab1,#c2baa1)}
.cb-left{width:40px;height:262px;left:130px!important;transform:rotateY(-90deg) translateZ(150px);background:#c8c0a7}
.cb-top{width:300px;height:40px;top:111px!important;transform:rotateX(90deg) translateZ(131px);background:#e6e0cb}
/* Röhre hinten: 230×210, Tiefe 200, Mitte bei z=-120 */
.hood{position:absolute;left:35px;top:18px;width:230px;height:210px;transform-style:preserve-3d;transform:translateZ(-120px)}
.hd-right{width:200px;height:210px;left:15px!important;transform:rotateY(90deg) translateZ(115px);background:linear-gradient(90deg,#cfc7ae,#b9b198);clip-path:polygon(0 0,100% 14%,100% 86%,0 100%)}
.hd-left{width:200px;height:210px;left:15px!important;transform:rotateY(-90deg) translateZ(115px);background:#bdb59c}
.hd-top{width:230px;height:200px;top:5px!important;transform:rotateX(90deg) translateZ(105px);background:linear-gradient(180deg,#d6cfb8,#e2dbc5);clip-path:polygon(14% 0,86% 0,100% 100%,0 100%)}
.hd-back{width:230px;height:210px;transform:translateZ(-100px);background:#b2aa92}
.hd-top::after{content:"";position:absolute;left:30%;right:30%;top:30%;height:40%;background:repeating-linear-gradient(0deg,#a8a088 0 2px,transparent 2px 7px)}
/* Fuß */
.foot{position:absolute;left:75px;top:258px;width:150px;height:26px;transform-style:preserve-3d;transform:translateZ(-60px)}
.ft-front{width:150px;height:26px;transform:translateZ(80px);background:linear-gradient(180deg,#d8d0b8,#bfb79e);border-radius:0 0 6px 6px}
.ft-top{width:150px;height:160px;top:-67px!important;transform:rotateX(90deg) translateZ(13px);background:#d4ccb4;border-radius:50%}
.ft-right{width:160px;height:26px;left:-5px!important;transform:rotateY(90deg) translateZ(75px);background:#b9b198}
/* Bildschirm */
.crt-screen{position:absolute;left:30px;top:24px;width:240px;height:186px;border-radius:18px/22px;background:radial-gradient(ellipse at 50% 45%,#1d2620 0,#0c100d 70%,#050705 100%);
  box-shadow:0 0 0 7px #d6cfb8,0 0 0 9px #a99f86,inset 0 0 30px rgba(0,0,0,.9);overflow:hidden}
.crt-screen::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.18),transparent 45%),repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px)}
.crt-content{position:absolute;inset:10px 12px;font:7px/1.35 "Courier New",monospace;color:#aaa;white-space:pre;opacity:0;text-align:left}
.crt-content .w{color:#fff}.crt-content .c{color:#55ffff}
.crt-scene.on .crt-content{opacity:1}
.crt-scene.on .crt-screen{background:#000;animation:crton .45s ease-out}
@keyframes crton{0%{box-shadow:0 0 0 7px #d6cfb8,0 0 0 9px #a99f86,inset 0 0 0 200px #fff;filter:brightness(2)}100%{}}
.crt-label{position:absolute;left:30px;top:224px;font:bold 11px Arial;letter-spacing:3px;color:#8a826a}
.crt-label small{font-size:8px;letter-spacing:1px;margin-left:6px;font-weight:normal}
.crt-pwr{position:absolute;right:30px;top:222px;width:18px;height:14px;border-radius:3px;background:linear-gradient(#e8e2cc,#bdb59c);box-shadow:inset 0 0 0 1px #8a826a}
.crt-led{position:absolute;right:56px;top:227px;width:6px;height:6px;border-radius:50%;background:#3a2a00;box-shadow:inset 0 0 0 1px #555}
.crt-scene.on .crt-led{background:#3cff6a;box-shadow:0 0 6px #3cff6a}
.crt-knobs{position:absolute;left:150px;top:226px;display:flex;gap:6px}
.crt-knobs i{width:8px;height:8px;border-radius:50%;background:#c8c0a8;box-shadow:inset 0 0 0 1px #8a826a}
.crt-cable{display:none;position:absolute;left:255px;bottom:96px;width:200px;height:40px;border-bottom:3px solid #2a2a2a;border-left:3px solid #2a2a2a;border-radius:0 0 0 30px;opacity:.7}

/* ===== Kamerafahrt in den Monitor ===== */
#power.zoom .st-fit{transition:transform 2.7s cubic-bezier(.45,0,.15,1)}
#power.zoom .st-cam{transition:perspective-origin 2.7s cubic-bezier(.45,0,.15,1)}
#power.zoom .st-stage{transition:transform 2.7s cubic-bezier(.55,0,.2,1)}
#power.zoom .st-hint,#power.zoom .st-bubble{display:none}
#power.zoom .st-head,#power.zoom .st-bottom{opacity:0;transition:opacity .5s}
#power.zoom{cursor:none}

/* BIOS auf dem kleinen Monitor – gleiches Layout wie das Vollbild-BIOS, nur verkleinert */
.crt-boot{position:absolute;left:0;top:0;transform-origin:0 0;background:#000;color:#aaa;font-family:var(--mono);font-size:15px;line-height:1.35;padding:24px 30px;white-space:pre;overflow:hidden;text-align:left}
.crt-boot .w{color:#fff}.crt-boot .g{color:#55ff55}.crt-boot .y{color:#ffff55}.crt-boot .c{color:#55ffff}
.crt-screen::after{z-index:2}
#power.zoom .crt-screen::after{opacity:0;transition:opacity 1.2s 1.4s}