/* =====================================================================
   crt.css — Raum, Schreibtisch, Monitorgehäuse und die Simulation
             der Bildröhre
   ===================================================================== */

:root {
  --vw: 1152px;          /* virtuelle Auflösung, Breite  */
  --vh: 864px;           /* virtuelle Auflösung, Höhe    */
  --scale: 1;            /* wird per JS gesetzt          */
  --noise: url("../assets/noise.svg");
  /* Raumgeometrie (alles relativ zur Sichthöhe, damit die Szene mitwächst) */
  --P: 130vh;            /* Perspektive: Abstand Kamera <-> Monitorebene */
  --D: 104vh;            /* Abstand Wand <-> Monitor; Platte reicht ebenso weit nach vorn */
  --FLOOR: 97.4vh;       /* Standhöhe: Unterkante des Monitorfußes */
}

* { box-sizing: border-box; }

html {
  background: #0b0d11;
  scrollbar-width: thin;
  scrollbar-color: #3a3f4a #0b0d11;
}
body {
  margin: 0;
  background: #0b0d11;
  font-family: Tahoma, "Segoe UI", Verdana, sans-serif;
  color: #cbd2df;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body::-webkit-scrollbar { width: 8px; }
body::-webkit-scrollbar-track { background: #0b0d11; }
body::-webkit-scrollbar-thumb { background: #3a3f4a; border-radius: 4px; }

/* Scrollstrecke */
.track { height: 320vh; pointer-events: none; }

/* =====================================================================
   Bühne: ein echter Raum in CSS-Perspektive
   .stage gibt die Perspektive vor, .world ist die Kamera — ein einziger
   translate3d, den camera.js schreibt. Darin stehen die Ebenen an ihrem
   Ort: die Wand D hinter dem Monitor, die Tischplatte als um 90° gekippte
   Ebene, die an der Fußleiste hängt, ihre Vorderkante D vor dem Monitor.
   Der Monitor steht bei z = 0: dort ist sein Transform die Identität und
   die Oberfläche bleibt pixelscharf.
   ===================================================================== */
.stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #05060a;
  perspective: var(--P);
  perspective-origin: 50% 50%;
}
.world {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
  transform: translate3d(40vw, 0, calc(-1 * var(--P)));   /* Startlage = Hero */
}

/* Wand ---------------------------------------------------------------- */
.wall {
  position: absolute;
  left: -140vw; width: 380vw;                       /* auf 50vw zentriert; deckt alle drei Kamerastationen */
  top: calc(var(--FLOOR) - 220vh); height: 232vh;   /* reicht bis unter die Platte */
  transform: translateZ(calc(-1 * var(--D)));
  backface-visibility: hidden;
  background:
    /* Grundabdunklung */
    linear-gradient(rgba(8, 12, 20, .34), rgba(8, 12, 20, .34)),
    /* Vignette — flach gehalten: ein Lichthof um den Monitor entsteht erst
       durch .room-light, wenn der Rechner läuft */
    radial-gradient(ellipse 84vw 66vh at calc(50% + 0px) 76%, rgba(0,0,0,.2) 0%, rgba(0,0,0,.36) 55%, rgba(0,0,0,.84) 100%),
    /* Deckenlicht oben, Schatten an der Fußleiste */
    linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 92%, rgba(0,0,0,.45) 100%),
    /* warme Zweitquelle links oben, außerhalb des Bildes */
    radial-gradient(ellipse 70vw 50vh at 24% 48%, rgba(212,168,116,.10), transparent 70%),
    url("../assets/wall.jpg") center / 48vh 48vh repeat;
  background-color: #262b36;
}
/* Fußleiste */
.wall::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.3vh;
  background: linear-gradient(180deg, #3d424c 0%, #252931 60%, #15181e 100%);
  box-shadow: 0 -3px 8px rgba(0,0,0,.55);
}
/* Streulicht des eingeschalteten Schirms auf der Wand */
.room-light {
  position: absolute;
  left: 50%; bottom: -24vh;
  width: 220vw; height: 140vh;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
  background:
    radial-gradient(ellipse 60vw 52vh at 50% 50%, rgba(132,186,244,.30), transparent 72%),
    radial-gradient(ellipse 96vw 74vh at 50% 50%, rgba(92,142,204,.18), transparent 76%),
    radial-gradient(ellipse 150vw 110vh at 50% 50%, rgba(58,100,158,.12), transparent 80%);
}
body.powered .room-light { opacity: 1; }

/* Tischplatte ---------------------------------------------------------- */
.floor {
  position: absolute;
  left: -45vw; width: 190vw;
  top: var(--FLOOR); height: calc(2 * var(--D));
  transform-origin: 50% 0;
  transform: translateZ(calc(-1 * var(--D))) rotateX(90deg);
  backface-visibility: hidden;
  background:
    /* hinten im Schatten der Wand, vorn abfallend */
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 22%, rgba(0,0,0,.22) 62%, rgba(0,0,0,.6) 100%),
    /* Seiten */
    linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,.6) 100%),
    url("../assets/wood.jpg") 0 0 / 64vh 64vh repeat;
  background-color: #1e1510;
}
/* Lichtpfütze des Schirms auf der Platte, um den Monitorfuß herum */
.desk-pool {
  position: absolute;
  left: 50%; top: calc(var(--D) - 60vh);
  width: 170vw; height: 120vh;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease;
  background:
    radial-gradient(ellipse 36vw 46vh at 50% 50%, rgba(180,216,252,.34), transparent 70%),
    radial-gradient(ellipse 16vw 58vh at 50% 50%, rgba(242,230,200,.22), transparent 72%),
    radial-gradient(ellipse 82vw 58vh at 50% 50%, rgba(126,168,218,.16), transparent 80%);
}
body.powered .desk-pool { opacity: 1; }

/* Vorderkante der Platte */
.apron {
  position: absolute;
  left: -45vw; width: 190vw;
  top: var(--FLOOR); height: 12vh;
  transform: translateZ(var(--D));
  backface-visibility: hidden;
  background:
    linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.65) 100%),
    url("../assets/wood.jpg") 0 0 / 64vh 64vh repeat;
  background-color: #1a120c;
}

/* Monitor-Gruppe bei z = 0 */
.rig {
  position: absolute;
  inset: 0;
  transform: translateZ(0);
}

/* =====================================================================
   Monitorgehäuse
   ===================================================================== */
.monitor {
  position: absolute;
  left: 50%;
  bottom: 2.6vh;
  transform: translateX(-50%);
  z-index: 2;
  --mw: min(94vw, calc(116vh - 60px), 1500px);
  width: var(--mw);
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Schlagschatten auf der Platte, als Verlauf statt Filter */
.monitor::before {
  content: "";
  position: absolute;
  left: -6%; right: -6%; top: 8%; bottom: -6%;
  z-index: -2;
  border-radius: 12%;
  background: radial-gradient(ellipse 50% 50% at 50% 52%, rgba(0,0,0,.6) 0%, rgba(0,0,0,.42) 45%, rgba(0,0,0,.18) 72%, transparent 100%);
  pointer-events: none;
}

.case {
  position: relative;
  width: 100%;
  padding: 2.1% 2.1% 0;
  border-radius: 3.2% / 4.4%;
  background:
    var(--noise) 0 0 / 190px 190px,
    linear-gradient(158deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 26%),
    linear-gradient(180deg, #efeada 0%, #ddd7c4 34%, #cdc6b0 72%, #b6ae98 100%);
  background-blend-mode: soft-light, normal, normal;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .85),
    inset 0 -4px 10px rgba(0, 0, 0, .22),
    inset 3px 0 6px rgba(255, 255, 255, .3),
    inset -3px 0 8px rgba(0, 0, 0, .14),
    0 0 0 1px #9d967f;
}

/* Lüftungsschlitze oben */
.case::before {
  content: "";
  position: absolute;
  top: 0.7%; left: 12%; right: 12%;
  height: 0.55%;
  background: repeating-linear-gradient(90deg,
      rgba(0,0,0,.18) 0 3px, transparent 3px 9px);
  border-radius: 2px;
  opacity: .55;
}

.bezel {
  position: relative;
  padding: 2.4%;
  border-radius: 1.6% / 2.1%;
  background:
    var(--noise) 0 0 / 150px 150px,
    linear-gradient(180deg, #c1baa4 0%, #d4ceb9 12%, #cac3ad 70%, #b0a993 100%);
  background-blend-mode: soft-light, normal;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 5px rgba(0,0,0,.22);
}

/* Der eigentliche Schirm ---------------------------------------------- */
.screen {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
  border-radius: 2.4% / 3.2%;
  background: #05070a;
  box-shadow:
    inset 0 0 0 2px #16181c,
    inset 0 0 18px 6px rgba(0, 0, 0, .95),
    inset 0 0 60px 18px rgba(0, 0, 0, .5),
    0 0 0 6px #a49d86,
    0 0 0 7px rgba(255, 255, 255, .26);
  isolation: isolate;
}

/* Die Röhre: trägt die Ein-/Ausschaltanimation ------------------------- */
.tube {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  opacity: 0;
}
.monitor[data-state="booting"] .tube { animation: crt-on 900ms cubic-bezier(.2,.9,.2,1) forwards; }
.monitor[data-state="on"] .tube      { opacity: 1; }
.monitor[data-state="dying"] .tube   { animation: crt-off 620ms cubic-bezier(.6,.05,.85,.2) forwards; }

@keyframes crt-on {
  0%   { opacity: 1; transform: scale(1, .0018); }
  22%  { opacity: 1; transform: scale(1, .004); }
  46%  { opacity: 1; transform: scale(1.006, .18); }
  70%  { opacity: 1; transform: scale(1, 1.02); }
  86%  { opacity: 1; transform: scale(1, .995); }
  100% { opacity: 1; transform: scale(1, 1); }
}
@keyframes crt-off {
  0%   { opacity: 1; transform: scale(1, 1); }
  38%  { opacity: 1; transform: scale(1.01, .06); }
  70%  { opacity: 1; transform: scale(.55, .004); }
  100% { opacity: 0; transform: scale(.02, .0016); }
}
/* Das Aufblitzen der Röhre: eine weiße Fläche in der Röhre, die mitskaliert
   und ausblendet — ersetzt den Helligkeitsfilter ohne Zwischenbild. */
.tube-flash {
  position: absolute; inset: 0;
  background: #f4f9ff;
  opacity: 0;
  pointer-events: none;
  z-index: 9;
  transform-origin: 50% 50%;
}
.monitor[data-state="booting"] .tube-flash { animation: tube-flash-on 900ms cubic-bezier(.2,.9,.2,1) forwards; }
.monitor[data-state="dying"] .tube-flash   { animation: tube-flash-off 620ms cubic-bezier(.6,.05,.85,.2) forwards; }
@keyframes tube-flash-on {
  0%   { opacity: .95; transform: scale(1, .0018); }
  22%  { opacity: .9;  transform: scale(1, .004); }
  46%  { opacity: .7;  transform: scale(1.006, .18); }
  70%  { opacity: .38; transform: scale(1, 1.02); }
  86%  { opacity: .16; transform: scale(1, .995); }
  100% { opacity: 0;   transform: scale(1, 1); }
}
@keyframes tube-flash-off {
  0%   { opacity: 0;   transform: scale(1, 1); }
  38%  { opacity: .55; transform: scale(1.01, .06); }
  70%  { opacity: .9;  transform: scale(.55, .004); }
  100% { opacity: 0;   transform: scale(.02, .0016); }
}

/* Virtuelle Auflösung: 1152x864 werden per Transform eingepasst -------- */
.vres {
  position: absolute;
  top: 0; left: 0;
  width: var(--vw);
  height: var(--vh);
  transform-origin: 0 0;
  transform: scale(var(--scale));
  overflow: hidden;
  background: #000;
}

.layer {
  position: absolute;
  inset: 0;
  display: none;
}
.layer.is-active { display: block; }

/* =====================================================================
   Effektstapel der Röhre
   Bewusst fein gehalten: die Maske soll die Struktur andeuten, nicht
   das Bild auflösen. Auf hochauflösenden Schirmen wird sie halbiert.
   ===================================================================== */
.fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity .5s ease .35s;
  border-radius: inherit;
}
.monitor[data-state="on"] .fx,
.monitor[data-state="booting"] .fx { opacity: 1; }

/* Zeilenmaske */
.fx-scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, .22) 0 1px,
    rgba(255, 255, 255, .014) 1px 2px);
  opacity: .56;
}
/* Aperturgitter (RGB-Streifen) */
.fx-aperture {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 60, 60, .055) 0 1px,
    rgba(60, 255, 60, .055) 1px 2px,
    rgba(60, 60, 255, .055) 2px 3px);
  opacity: .32;
}
@media (min-resolution: 1.5dppx) {
  .fx-scan {
    background: repeating-linear-gradient(
      180deg,
      rgba(0, 0, 0, .2) 0 .5px,
      rgba(255, 255, 255, .012) .5px 1px);
    opacity: .5;
  }
  .fx-aperture {
    background: repeating-linear-gradient(
      90deg,
      rgba(255, 60, 60, .05) 0 .5px,
      rgba(60, 255, 60, .05) .5px 1px,
      rgba(60, 60, 255, .05) 1px 1.5px);
    opacity: .3;
  }
}

/* wanderndes Interferenzband */
.fx-roll {
  position: absolute;
  left: 0; right: 0;
  height: 24%;
  background: linear-gradient(180deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.028) 45%,
      rgba(255,255,255,.05) 55%,
      rgba(255,255,255,0) 100%);
  top: 0;
  animation: roll 9.5s linear infinite;
  will-change: transform;
}
@keyframes roll { from { transform: translateY(-110%); } to { transform: translateY(440%); } }

/* Phosphor-Bloom + Flackern */
.fx-bloom {
  position: absolute; inset: 0;
  background: radial-gradient(72% 60% at 50% 45%, rgba(150, 205, 255, .09), transparent 78%);
  animation: flicker 6.5s steps(1, end) infinite;
}
@keyframes flicker {
  0%, 94%, 100% { opacity: 1; }
  95%           { opacity: .88; }
  96%           { opacity: 1.04; }
  97%           { opacity: .93; }
}

/* Randabdunklung */
.fx-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(122% 120% at 50% 50%, transparent 56%, rgba(0,0,0,.26) 84%, rgba(0,0,0,.66) 100%),
    radial-gradient(100% 38% at 50% 0%,  rgba(0,0,0,.26), transparent 55%),
    radial-gradient(100% 38% at 50% 100%, rgba(0,0,0,.26), transparent 55%);
}

/* Spiegelung des Raums in der Scheibe: Deckenleuchte, Fenster, Staub */
.fx-glass {
  position: absolute; inset: 0;
  background:
    radial-gradient(30% 9% at 31% 15%, rgba(255,255,255,.10), transparent 72%),
    radial-gradient(30% 9% at 31% 21%, rgba(255,255,255,.055), transparent 74%),
    radial-gradient(15% 22% at 84% 26%, rgba(255,255,255,.045), transparent 76%),
    linear-gradient(116deg,
      rgba(255,255,255,.05) 0%,
      rgba(255,255,255,.016) 24%,
      rgba(255,255,255,0) 44%);
}
.fx-glass::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--noise) 0 0 / 340px 340px;
  opacity: .06;
}

/* Standbild „Kein Signal" --------------------------------------------- */
.screen-idle {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  background: #04060a;
  transition: opacity .4s ease;
}
.monitor[data-state="booting"] .screen-idle,
.monitor[data-state="on"] .screen-idle,
.monitor[data-state="dying"] .screen-idle { opacity: 0; pointer-events: none; }

/* Monitor an, aber kein Rechner dahinter: leises Phosphorglimmen */
.monitor[data-state="nosignal"] .screen-idle {
  background: radial-gradient(ellipse 70% 60% at 50% 50%, #0a1410 0%, #05090c 60%, #04060a 100%);
}
.monitor[data-state="nosignal"] .fx { opacity: .6; }

/* Schirm ohne Signal: nur ein Schriftzug in Phosphorgrün, mittig */
.idle-text {
  display: none;
  animation: idle-blink 2.4s steps(1) infinite;
  font: 700 22px "JetBrains Mono", "Lucida Console", Consolas, monospace;
  letter-spacing: .32em;
  color: #1f7a3a;
  text-shadow: 0 0 8px rgba(31, 122, 58, .35);
  user-select: none;
}
.monitor[data-state="nosignal"] .idle-text { display: block; }
@keyframes idle-blink { 0%, 78% { opacity: 1; } 79%, 100% { opacity: .35; } }

/* Pfeil zum Netzschalter, sobald die Kamera angekommen ist ------------
   Ein fetter Blockpfeil in Glut-Orange mit dunklem Rand, 64 px, der auf
   und ab hüpft. camera.js misst die Knopfmitte und setzt `left` — der
   Pfeil steht damit bei jeder Schirmgröße genau über dem Schalter. */
.idle-arrow {
  position: absolute;
  left: 96%; bottom: 3%;
  width: 64px; height: 64px;
  transform: translateX(-50%);
  display: none;
}
html.at-end .monitor[data-state="off"] .idle-arrow.to-monitor { display: block; }
html.at-end .monitor[data-state="nosignal"] .idle-arrow.to-pc  { display: block; }
/* Der zweite Pfeil zeigt links aus dem Bild zum Rechner */
/* … schräg nach unten links in die Schirmecke, hinter der der Rechner steht */
.idle-arrow.to-pc { left: 3%; bottom: 4%; transform: rotate(-45deg); transform-origin: 50% 50%; }
.idle-arrow.to-pc svg { animation-name: idle-hop-x; }
@keyframes idle-hop-x {
  0%, 100% { transform: translateX(10px); }
  50%      { transform: translateX(-12px); }
}
.idle-arrow svg {
  display: block;
  width: 64px; height: 64px;
  fill: #FF7A2E;
  stroke: #2A2218;
  stroke-width: 4;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(255, 110, 40, .7));
  animation: idle-hop 1.1s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes idle-hop {
  0%, 100% { transform: translateY(-10px); }
  50%      { transform: translateY(12px); }
}

/* … und der Netzschalter blinkt in zwei Zuständen: graviert-aus und
   orange hinterleuchtet, mit kurzem Übergang und weichem Lichthof. */
.powerbtn { position: relative; isolation: isolate; }
/* Der Lichthof liegt HINTER der Kappe (eigener Stapelkontext, z-index -1):
   sichtbar bleibt nur ein Saum um den Knopf, die Kappe selbst bleibt beige. */
.powerbtn::after {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 138, 60, .42) 0%, rgba(255, 110, 40, .16) 55%, transparent 72%);
  opacity: 0;
  pointer-events: none;
}
html.at-end .monitor[data-state="off"] .powerbtn svg { animation: power-blink 2.2s ease-in-out infinite; }
html.at-end .monitor[data-state="off"] .powerbtn::after { animation: power-halo 2.2s ease-in-out infinite; }
@keyframes power-blink {
  0%, 40%, 100% {
    stroke: #5d5744;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .6)) drop-shadow(0 0 0 rgba(255, 90, 30, 0));
  }
  50%, 90% {
    stroke: #FF9A50;
    filter: drop-shadow(0 0 1.5px rgba(255, 150, 80, .9)) drop-shadow(0 0 4px rgba(255, 90, 30, .55));
  }
}
@keyframes power-halo {
  0%, 40%, 100% { opacity: 0; }
  50%, 90%      { opacity: .75; }
}

/* =====================================================================
   Gehäusefuß, Bedienleiste, Standfuß
   ===================================================================== */
.chin {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2%;
  padding: 1.1% 3.4% 1.6%;
}
.brandplate { display: flex; align-items: center; gap: clamp(8px, 1vw, 16px); min-width: 0; }

/* Gravur: die Marke ist in den Kunststoff vertieft. Die Maske sitzt auf dem
   Kind, der Schatten auf dem Elternteil — sonst würde die Maske den Schatten
   beschneiden (filter wird vor mask angewendet). */
.engrave {
  display: block;
  width: clamp(110px, 11.5vw, 182px);
  height: clamp(22px, 2.4vw, 38px);
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, .62))
    drop-shadow(0 -1px 0 rgba(0, 0, 0, .22));
}
.engrave > i {
  display: block;
  width: 100%; height: 100%;
  background: #a39b83;
  -webkit-mask: url("../assets/wf-full.png") left center / contain no-repeat;
  mask: url("../assets/wf-full.png") left center / contain no-repeat;
}
.bp-model {
  font: 600 clamp(7px, .7vw, 10px) Tahoma, sans-serif;
  letter-spacing: .16em;
  color: #9a927a;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
  white-space: nowrap;
}

/* Bedienleiste: eine flache Mulde, in der die Knöpfe sitzen */
.btnrow {
  display: flex;
  align-items: center;
  gap: clamp(5px, .7vw, 10px);
  padding: clamp(3px, .34vw, 6px) clamp(6px, .7vw, 11px);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(0,0,0,.14) 0%, rgba(0,0,0,.05) 60%, rgba(255,255,255,.06) 100%);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.32),
    inset 0 -1px 0 rgba(255,255,255,.28),
    0 1px 0 rgba(255,255,255,.55);
}

.mbtn, .powerbtn {
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 999px;
  display: grid;
  place-items: center;
  /* gewölbte Kappe: Glanz oben links, Abschattung unten */
  background: radial-gradient(circle at 40% 28%, #f5f0e2 0%, #ddd6c1 46%, #bfb8a1 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -2px 3px rgba(0,0,0,.28),
    inset 1px 0 1px rgba(255,255,255,.35),
    0 1px 0 rgba(255,255,255,.4),
    0 2px 3px rgba(0,0,0,.42);
  transition: transform .08s ease, box-shadow .12s ease;
}
.mbtn {
  width: clamp(12px, 1.5vw, 21px);
  height: clamp(12px, 1.5vw, 21px);
}
.mbtn:active, .powerbtn:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.42),
    inset 0 -1px 0 rgba(255,255,255,.4),
    0 0 0 rgba(0,0,0,0);
}
.powerbtn {
  width: clamp(20px, 2.5vw, 34px);
  height: clamp(20px, 2.5vw, 34px);
  background: radial-gradient(circle at 40% 28%, #f7f2e5 0%, #e0d9c4 48%, #c1baa3 100%);
}
.powerbtn:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 3px rgba(0,0,0,.28), 0 2px 3px rgba(0,0,0,.42), 0 0 10px rgba(120,200,255,.45); }

/* gravierte Symbole auf den Kappen */
.mbtn svg, .powerbtn svg {
  width: 62%; height: 62%;
  fill: none;
  stroke: #5d5744;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.6));
  pointer-events: none;
}
.powerbtn svg { width: 56%; height: 56%; stroke-width: 1.6; }

/* Betriebsanzeige in eigener Linse neben dem Netzschalter */
.led-lens {
  width: clamp(9px, 1.05vw, 14px);
  height: clamp(9px, 1.05vw, 14px);
  border-radius: 999px;
  display: grid;
  place-items: center;
  margin-left: clamp(4px, .7vw, 10px);
  background: radial-gradient(circle at 45% 35%, #4a4d48, #24262a 70%);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.85),
    0 1px 0 rgba(255,255,255,.5);
}
.led {
  width: 58%;
  height: 58%;
  border-radius: 999px;
  background: #3c4a3a;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.6);
  transition: background .3s ease, box-shadow .3s ease;
}
.monitor[data-state="nosignal"] .led { background: #ffb62e; box-shadow: 0 0 6px 1px rgba(255,180,50,.6); }
.monitor[data-state="booting"] .led { background: #ffb62e; box-shadow: 0 0 9px 2px rgba(255,180,50,.85); }
.monitor[data-state="on"] .led {
  background: #58ff7a;
  box-shadow: 0 0 10px 2px rgba(70, 255, 120, .8), inset 0 0 2px rgba(255,255,255,.9);
}

/* On-Screen-Display des Monitors */
.osd {
  position: absolute;
  left: 50%;
  bottom: 118%;
  transform: translateX(-50%);
  padding: 7px 16px;
  border: 2px solid #2e6fb0;
  background: rgba(4, 16, 32, .88);
  color: #9ed3ff;
  font: 700 12px Tahoma, sans-serif;
  letter-spacing: .16em;
  border-radius: 3px;
  pointer-events: none;
  animation: osd-pop 1.4s ease forwards;
}
@keyframes osd-pop {
  0% { opacity: 0; } 12% { opacity: 1; } 72% { opacity: 1; } 100% { opacity: 0; }
}

/* Standfuß */
.neck {
  width: 21%;
  height: clamp(10px, 2.1vh, 26px);
  background: linear-gradient(180deg, #cfc8b2 0%, #b6af99 70%, #9e9782 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 4px rgba(0,0,0,.25);
  border-radius: 0 0 12px 12px;
}
.base {
  position: relative;
  width: 46%;
  height: clamp(9px, 1.8vh, 22px);
  background:
    linear-gradient(180deg, #ded7c3 0%, #c2bba5 42%, #a29b86 100%);
  border-radius: 50% / 42%;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.65),
    inset 0 -3px 6px rgba(0,0,0,.3);
}

/* =====================================================================
   Kleiner Rechner: flacher Quader in Mini-Form aus dem gleichen cremefarbenen
   Kunststoff wie der Monitor, links neben ihm auf der Platte; ein Kabel führt
   hinter den Monitorfuß. Steht wie der Monitor in der Ebene z = 0.
   Maße wie ein echter Mini: ca. 20 cm breit, 3,6 cm hoch, von leicht oben.
   ===================================================================== */
.minipc {
  position: absolute;
  left: 4vw;
  bottom: 2.2vh;
  width: 22vw;
  transform: translateX(-50%);
  z-index: 1;
}
/* Oberseite: leicht von oben gesehen, ein sauberes Trapez mit weichem Licht */
.mp-top {
  position: relative;
  height: 2.6vw;
  margin: 0 .5vw -1.1vw;
  border-radius: 1.5vw 1.5vw 0 0 / 1vw 1vw 0 0;
  background:
    var(--noise) 0 0 / 260px 260px,
    linear-gradient(180deg, #d9d3be 0%, #d3cdb8 100%);
  background-blend-mode: soft-light, normal;
  clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%);
}
/* Front: wie die Monitorblende, klar und ohne Zierrat */
.mp-front {
  position: relative;
  height: 4vw;
  border-radius: 1.1vw / 1.3vw;
  background:
    var(--noise) 0 0 / 260px 260px,
    linear-gradient(180deg, #d4ceb9 0%, #cac3ad 55%, #b9b29c 92%, #aaa38d 100%);
  background-blend-mode: soft-light, normal;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 0 0 1px #9a937e;
}
/* Fuge zwischen Deckel und Front */
.mp-front::before {
  content: "";
  position: absolute; left: .8vw; right: .8vw; top: 0;
  height: 1px;
  background: rgba(0,0,0,.16);
}
/* Laufwerksschlitz: mittig oben in der Front */
.mp-slot {
  position: absolute;
  left: 50%; top: .75vw;
  width: 9.5vw; height: .22vw;
  transform: translateX(-50%);
  border-radius: 2px;
  background: #6f6957;
  box-shadow: 0 1px 0 rgba(255,255,255,.55), inset 0 1px 1px rgba(0,0,0,.5);
}
/* Graviertes Markenzeichen: mittig unter dem Schlitz, im Kunststoff versenkt */
.mp-engrave {
  position: absolute;
  left: 50%; top: 1.45vw;
  width: 3.6vw; height: 2.1vw;
  transform: translateX(-50%);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.55)) drop-shadow(0 -1px 0 rgba(0,0,0,.28));
}
.mp-engrave > i {
  display: block; width: 100%; height: 100%;
  background: #a69f8a;
  -webkit-mask: url("../assets/wf-mark.png") center / contain no-repeat;
  mask: url("../assets/wf-mark.png") center / contain no-repeat;
}
/* Netzschalter des Rechners: runder Knopf mit Leuchtdiode, vorn rechts */
.mp-btn {
  position: absolute;
  right: 1.3vw; top: 50%;
  width: 1.1vw; height: 1.1vw;
  transform: translateY(-50%);
  padding: 0; border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: radial-gradient(circle at 40% 35%, #d9d3be, #b3ac96 70%, #9a937e 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 2px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.18);
  isolation: isolate;
}
.mp-btn:active { transform: translateY(-50%) scale(.96); }
.mp-btn::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; }  /* Trefferfläche */
.mp-led {
  position: absolute;
  left: 50%; top: 50%;
  width: .3vw; height: .3vw;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #4a4a44;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.6);
  transition: background .3s, box-shadow .3s;
}
body.pc-on .mp-led { background: #fbfff8; box-shadow: 0 0 .45vw .12vw rgba(255,255,255,.75), 0 0 1.2vw .3vw rgba(255,255,255,.3); }
/* Lichthof hinter dem Knopf: pulsiert, wenn der Monitor läuft, der Rechner aber aus ist */
.mp-btn::after {
  content: "";
  position: absolute; inset: -.5vw; z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,138,60,.5) 0%, rgba(255,110,40,.18) 55%, transparent 72%);
  opacity: 0;
  pointer-events: none;
}
html.at-end body.monitor-on:not(.pc-on) .mp-btn::after { animation: power-halo 2.2s ease-in-out infinite; }
html.at-end body.monitor-on:not(.pc-on) .mp-led { animation: pc-led-blink 2.2s ease-in-out infinite; }
@keyframes pc-led-blink {
  0%, 40%, 100% { background: #4a4a44; box-shadow: inset 0 1px 1px rgba(0,0,0,.6); }
  55%, 85%      { background: #ffb062; box-shadow: 0 0 .4vw .1vw rgba(255,150,70,.8); }
}
.mp-shadow {
  position: absolute;
  left: 50%; bottom: -1vw;
  width: 124%; height: 3.2vw;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.72) 0%, rgba(0,0,0,.4) 40%, transparent 72%);
  z-index: -1;
}

/* Kabel vom Rechner hinter den Monitorfuß */
.cable {
  position: absolute;
  left: 6vw; bottom: 1.4vh;
  width: 46vw; height: auto;
  z-index: 0;
  overflow: visible;
}
.cable path { fill: none; stroke-linecap: round; }
.cable-shadow { stroke: rgba(0,0,0,.28); stroke-width: 12; }
.cable-line   { stroke: #26251f; stroke-width: 6; }
.cable-sheen  { stroke: rgba(255,255,255,.22); stroke-width: 1.6; transform: translate(0, -1.6px); }

/* Kontaktschatten, wo der Fuß die Platte berührt */
.contact {
  position: absolute;
  left: 50%; bottom: -10px;
  width: 72%;
  height: clamp(20px, 4.4vh, 56px);
  transform: translateX(-50%);
  background:
    radial-gradient(34% 46% at 50% 40%, rgba(0,0,0,.88) 0%, rgba(0,0,0,.45) 52%, transparent 76%),
    radial-gradient(60% 62% at 50% 44%, rgba(0,0,0,.42) 0%, transparent 74%);
  z-index: -1;
  pointer-events: none;
}

/* Lichthof des Schirms */
.monitor-glow {
  position: absolute;
  left: 50%; top: 44%;
  width: 128%; height: 88%;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(122, 182, 255, .28), transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity 1.4s ease;
}
body.powered .monitor-glow { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .fx-roll, .fx-bloom, .idle-arrow svg { animation: none; }
  .monitor[data-state="booting"] .tube { animation-duration: 1ms; }
}

/* Schmale Schirme: neben dem bildfüllenden Monitor ist kein Platz — der
   Rechner steht vorn links vor dem Gehäuse, doppelt so groß, gut tippbar. */
@media (max-width: 900px) {
  .minipc {
    left: 24vw; bottom: 3.6vh;             /* ganz oberhalb der Tischkante, sonst fängt die Platte die Tipps ab */
    transform: translateX(-50%) scale(2);
    transform-origin: 50% 100%;
    z-index: 3;
  }
  .cable { display: none; }
}