/* Monitor für alle Seiten: Gehäuse, Bildschirm fester Größe, Ein/Aus-Knopf, Abschalten mit Nachleuchten, Spiegelung im dunklen Glas */

:root{
  --t-power:4s;   /* Einschalten */
  --d-off:1.5s;   /* Abschalten */
  --d-glow:2.6s;  /* Nachleuchten nach dem Abschalten */
}

/* Gehäuse: --w = Gehäusebreite; Rand und Kinn wachsen proportional mit.
   1.2384 = Seitenverhältnis des Gehäuses (Bildschirm 4:3 + Rand 3,5 % + Kinn 7,5 %) */
.monitor{
  /* Gehäusefarben – Anthrazit. Beige-Variante: --case-hi:#e3dbc6; --case:#d2c8ae; --case-lo:#b8ad91; --case-edge:rgba(255,255,255,.55);
     --gasket:#1b1915; --badge:#8e8569; --badge-emboss:0 1px 0 rgba(255,255,255,.55),0 -1px 0 rgba(0,0,0,.15); --btn-hi:#d9d0b9; --btn-lo:#b1a689 */
  --case-hi:#45474b; --case:#323337; --case-lo:#202124; --case-edge:rgba(255,255,255,.14);
  --gasket:#0b0b0c; --badge:#7b7e84; --badge-emboss:0 -1px 0 rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.08); --btn-hi:#4a4c51; --btn-lo:#2a2b2e;
  --w:min(calc(100vw - 4vmin),calc((100svh - 4vmin)*1.2384));--pad:calc(var(--w)*.035);--chin:calc(var(--w)*.075);
  width:var(--w);padding:var(--pad) var(--pad) 0;border-radius:calc(var(--w)*.03);
  background:linear-gradient(175deg,var(--case-hi) 0%,var(--case) 55%,var(--case-lo) 100%);
  box-shadow:inset 0 2px 0 var(--case-edge),inset 0 -3px 0 rgba(0,0,0,.22),inset 0 0 0 1px rgba(0,0,0,.18),
    0 2vmin 5vmin rgba(0,0,0,.7),0 0 8vmin var(--spill)}

/* Bildschirm: feste Größe auf allen Seiten; längerer Inhalt scrollt in der Röhre */
.screen{width:100%;aspect-ratio:4/3;border-radius:6% / 8%;
  /* Dichtung zwischen Röhre und Gehäuse, Lichtschein der Röhre auf dem Rahmen */
  box-shadow:0 0 0 calc(var(--w)*.005) var(--gasket),0 0 0 calc(var(--w)*.011) rgba(0,0,0,.45),0 0 calc(var(--w)*.03) var(--spill)}
/* .bend = Hülle für die Wölbung; eigenes Element, weil Ein-/Ausschalten über "filter" die Helligkeit animiert
   und die Wölbung sonst überschreiben würde.
   .crt = Hülle für Ein/Aus per Knopf; .tube darin trägt die Zeitlinie der Startseite, die beim Ausschalten nur pausiert */
.bend{position:absolute;inset:0;z-index:1}
.woelbung .bend{filter:url(#woelbung)}  /* js/woelbung.js fügt den Filter ein und setzt die Klasse */
.crt{position:absolute;inset:0;transform-origin:50% 50%}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.tube{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;transform-origin:50% 50%;
  scrollbar-width:thin;scrollbar-color:rgba(239,230,207,.45) transparent}
.tube:focus-visible{outline:none}

/* Kinn mit Typenschild, Power-LED und Ein/Aus-Knopf */
.chin{height:var(--chin);display:flex;align-items:center;justify-content:space-between;padding:0 2%}
.badge{font:700 calc(var(--w)*.013)/1 Helvetica,Arial,sans-serif;letter-spacing:.3em;color:var(--badge);
  text-shadow:var(--badge-emboss)}
.controls{display:flex;align-items:center;gap:max(calc(var(--w)*.016),12px)}
/* Power-LED in drei Lagen: dunkles Gehäuse (aus), .led-light (grün, Zeitlinie der Startseite), ::after (orange beim Einschalten per Knopf) */
.led{--glow-led:max(calc(var(--w)*.008),6px);position:relative;width:max(calc(var(--w)*.013),12px);height:max(calc(var(--w)*.0065),6px);border-radius:1px;
  background:#3d4a3a;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.led-light,.led::after{position:absolute;inset:0;border-radius:inherit}
.led-light{background:#4fe04f;box-shadow:0 0 var(--glow-led) #5f5,inset 0 1px 0 rgba(255,255,255,.5)}
.led::after{content:"";opacity:0;background:#ffa21f;box-shadow:0 0 var(--glow-led) #fb4,inset 0 1px 0 rgba(255,255,255,.5)}
.power{width:max(calc(var(--w)*.032),26px);height:max(calc(var(--w)*.019),15px);border:0;border-radius:2px;cursor:pointer;
  background:linear-gradient(var(--btn-hi),var(--btn-lo));box-shadow:inset 0 1px 0 var(--case-edge),0 1px 2px rgba(0,0,0,.45);
  transition:transform .06s,box-shadow .06s}
.power:active{transform:translateY(1px);box-shadow:inset 0 1px 3px rgba(0,0,0,.6),0 0 0 rgba(0,0,0,0)}
.power:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* Wandernder Streifen der Bildwiederholung (z-index 2: liegt über der Röhre, sonst verdeckt ihr Hintergrund ihn) */
.roll{position:absolute;left:0;right:0;top:0;height:18%;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(239,230,207,.045) 50%,transparent);
  transform:translateY(-100%);animation:roll 7s linear var(--t-power) infinite}
/* Nachleuchten: heller Punkt in der Mitte, der nach dem Abschalten langsam verglimmt
   (.afterglow = automatisches Abschalten der Startseite, .spot = Abschalten per Knopf) */
.afterglow,.spot{position:absolute;left:50%;top:50%;width:3cqw;height:3cqw;margin:-1.5cqw;border-radius:50%;z-index:1;
  pointer-events:none;opacity:0;
  background:radial-gradient(circle,#fff 0 12%,rgba(239,230,207,.85) 28%,rgba(90,86,220,.35) 55%,transparent 70%)}

/* Spiegelung im ausgeschalteten Glas: Raumlicht, Fenster links, Schreibtischlampe rechts, Silhouette des Betrachters */
.reflection{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .3s;
  background:
    radial-gradient(circle at 84% 17%,rgba(255,196,120,.16) 0,rgba(255,196,120,.05) 5%,transparent 13%),
    radial-gradient(ellipse 50% 45% at 52% 78%,rgba(200,208,230,.07),transparent 75%),
    radial-gradient(ellipse 60% 55% at 28% 30%,rgba(200,210,235,.08),transparent 70%),
    linear-gradient(170deg,rgba(255,255,255,.05),rgba(255,255,255,.012) 60%,transparent)}
.refl-window{position:absolute;left:9%;top:7%;width:24%;height:40%;border-radius:3px;
  background:
    linear-gradient(90deg,transparent 47%,rgba(0,0,0,.6) 47% 53%,transparent 53%),
    linear-gradient(transparent 45%,rgba(0,0,0,.6) 45% 51%,transparent 51%),
    linear-gradient(165deg,rgba(215,225,255,.22),rgba(215,225,255,.06));
  transform:perspective(60cqw) rotateY(28deg) skewY(-3deg);filter:blur(.35cqw)}
.refl-person{position:absolute;left:50%;bottom:-1%;width:46%;transform:translateX(-50%);filter:blur(.7cqw)}
.refl-person path{fill:rgba(0,0,0,.6)}

/* Ausgeschaltet (Knopf): Bild fällt zusammen, Punkt verglimmt, LED aus, Spiegelung taucht auf.
   Grundwerte = Endzustand, damit es auch ohne Animation (reduzierte Bewegung) sofort dunkel ist */
.is-off .crt{opacity:0;transform:scale(.01,.004);pointer-events:none;animation:off var(--d-off) linear both}
.is-off .spot{animation:afterglow var(--d-glow) cubic-bezier(.2,.6,.3,1) calc(var(--d-off)*.73) forwards}
.is-off .led-light{visibility:hidden}
/* Die Zeitlinie der Startseite hält an, solange der Monitor aus ist, und läuft danach an gleicher Stelle weiter */
.is-off .tube,.is-off .tube *,.is-off .afterglow,.is-off .led-light{animation-play-state:paused}
/* Wieder eingeschaltet: Röhre fährt hoch, LED leuchtet währenddessen orange */
.was-off:not(.is-off) .crt{animation:power var(--t-power) linear both}
.was-off:not(.is-off) .led::after{animation:ledwarm var(--t-power) linear both}
/* Beim Laden bereits ausgeschaltet (Zustand aus der Sitzung): sofort dunkel, ohne Abschalt-Animation */
.cold .crt,.cold .spot,.cold .led::after{animation:none!important}
.cold .reflection,.cold.monitor,.cold .screen{transition:none!important}
.is-off .reflection{opacity:1;transition:opacity 2.5s ease-in calc(var(--d-off) - .1s)}
/* Ohne leuchtende Röhre kein blauer Lichtschein auf Gehäuse und Umgebung */
.monitor{transition:box-shadow .8s ease-out}
.screen{transition:box-shadow .8s ease-out}
.monitor.is-off{transition-delay:calc(var(--d-off)*.5);
  box-shadow:inset 0 2px 0 var(--case-edge),inset 0 -3px 0 rgba(0,0,0,.22),inset 0 0 0 1px rgba(0,0,0,.18),
    0 2vmin 5vmin rgba(0,0,0,.7),0 0 8vmin transparent}
.is-off .screen{transition-delay:calc(var(--d-off)*.5);
  box-shadow:0 0 0 calc(var(--w)*.005) var(--gasket),0 0 0 calc(var(--w)*.011) rgba(0,0,0,.45),0 0 calc(var(--w)*.03) transparent}

/* Nach Rückkehr aus dem Browser-Cache (js/start.js): Animationen kurz aus, danach neu ansetzen */
.reboot,.reboot *,.reboot *::before,.reboot *::after{animation:none!important}

/* Röhre einschalten: Lichtpunkt → horizontaler Strich (flackert) → klappt auf volle Höhe auf → Helligkeit pendelt sich ein */
@keyframes power{
  0%{opacity:0;transform:scale(.01,.004);filter:brightness(4)}
  2.25%{opacity:1;transform:scale(.01,.004)}
  11.25%{transform:scale(1,.004)}
  30%{opacity:1}
  31.5%{opacity:.55}
  33.75%{opacity:1}
  46.5%{opacity:.8}
  48%{opacity:1}
  60%{transform:scale(1,.004);filter:brightness(4);animation-timing-function:cubic-bezier(.25,.6,.3,1)}
  85%{transform:scale(1,1);filter:brightness(1.6)}
  90%{filter:brightness(.7)}
  95%{filter:brightness(1.2)}
  100%{transform:none;filter:none;opacity:1}
}
/* Röhre ausschalten: kurz aufhellen → Bild fällt zum Strich zusammen → Strich schrumpft zum Punkt → verlischt */
@keyframes off{
  0%{transform:none;filter:none;opacity:1}
  10%{filter:brightness(1.8)}
  45%{transform:scale(1,.004);filter:brightness(4)}
  75%{transform:scale(.01,.004);opacity:1}
  100%{transform:scale(.01,.004);filter:brightness(4);opacity:0}
}
@keyframes roll{from{transform:translateY(-100%)}to{transform:translateY(560%)}}
@keyframes afterglow{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.35)}}
@keyframes ledboot{0%,84%{background:#ffa21f;box-shadow:0 0 var(--glow-led) #fb4,inset 0 1px 0 rgba(255,255,255,.5)}85%,100%{background:#4fe04f;box-shadow:0 0 var(--glow-led) #5f5,inset 0 1px 0 rgba(255,255,255,.5)}}
@keyframes ledwarm{0%,84%{opacity:1}85%,100%{opacity:0}}
@keyframes ledout{to{opacity:0}}

/* Hochformat & niedrige Querformate: Monitor füllt die Breite, Bildschirm füllt die restliche Höhe */
@media (max-aspect-ratio:1/1),(max-height:520px){
  .monitor{--w:calc(100vw - 4vmin);--chin:max(calc(var(--w)*.1),40px);width:100%}
  .screen{aspect-ratio:auto;height:calc(100svh - 4vmin - var(--pad) - var(--chin))}
  .badge{font-size:max(calc(var(--w)*.022),9px)}
  .refl-window{width:40%;height:24%}
  .refl-person{width:80%}
}
@media (max-aspect-ratio:1/1){
  .screen{border-radius:9% / 5%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important}
  .reflection,.is-off .reflection,.power,.monitor,.screen{transition:none}
}