/* Handschrift selbst gehostet (Caveat, SIL OFL 1.1). Kein CDN: eine
   Google-Fonts-Einbindung wuerde die IP des Besuchers uebertragen. Auf Android
   existiert keine der Systemhandschriften, dort fiel es vorher auf eine
   normale Schrift zurueck. */
@font-face{
  font-family:"WMYB Hand";
  src:url("../fonts/caveat-latin-600.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
.wv{
  --p900:#052430; --p500:#14495E; --lime:#E6FF2B; --ink:#dfeaee; --muted:#7e9ba6; --alarm:#ff5b48;
  position:relative; display:grid; grid-template-columns:1fr minmax(340px,35%); min-height:620px;
  background:radial-gradient(115% 105% at 42% 0%,#0d3d4f,#062a37 46%,#04191f);
  border-radius:14px; overflow:hidden;
  font-family:"Inter",-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink);
  box-shadow:0 34px 80px -34px rgba(0,0,0,.65);
}
.wv *{box-sizing:border-box}
.wv-eyebrow{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--lime);font-weight:700}

.wv-stage{position:absolute;inset:0;z-index:0}   /* Canvas laeuft unter dem Panel durch */
.wv-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.wv-canvas.is-drag{cursor:grabbing}
.wv-stage__label{position:absolute;left:22px;top:20px;display:flex;flex-direction:column;gap:4px}
.wv-stage__title{font-size:21px;font-weight:700;letter-spacing:.01em;color:var(--lime);line-height:1}
.wv-stage__sub{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.wv-boot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:9px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:opacity .4s}
.wv-boot span{width:9px;height:9px;border-radius:50%;background:var(--lime);animation:wvPulse 1.1s ease-in-out infinite}
.wv-boot.is-done{opacity:0;pointer-events:none}
@keyframes wvPulse{50%{opacity:.2;transform:scale(.7)}}


.wv-hmi{grid-column:2;position:relative;z-index:1;display:flex;align-items:center;
  justify-content:center;padding:24px 22px;pointer-events:none}
.wv-dev{position:relative;pointer-events:auto;width:100%;max-width:410px;padding:16px 15px 14px;border-radius:12px;
  background:linear-gradient(165deg,#4a5359,#333b40 32%,#262c31 70%,#1c2125);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 4px rgba(0,0,0,.5),
             0 20px 44px -14px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.55);
  transform:perspective(1400px) rotateY(-3.5deg) rotateX(.8deg)}
.wv-screw{position:absolute;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#9aa4aa,#4e565b 60%,#2b3134);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),0 1px 1px rgba(255,255,255,.14)}
.wv-screw::after{content:"";position:absolute;left:2px;right:2px;top:4px;height:1px;background:rgba(0,0,0,.55)}
.wv-screw--tl{left:6px;top:6px}.wv-screw--tr{right:6px;top:6px}
.wv-screw--bl{left:6px;bottom:6px}.wv-screw--br{right:6px;bottom:6px}
.wv-dev__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 4px 10px}
.wv-dev__logo{font-size:30px;line-height:.9;font-weight:800;letter-spacing:.1em;color:var(--lime);
  text-shadow:0 0 18px rgba(230,255,43,.35)}
.wv-leds{display:flex;gap:11px}
.wv-led{display:flex;align-items:center;gap:4px;font-size:7.5px;letter-spacing:.13em;color:#8e989e}
.wv-led i{width:6px;height:6px;border-radius:50%;background:#2a3236;box-shadow:inset 0 0 2px #000}
.wv-led.on[data-led="pwr"] i,.wv-led.on[data-led="run"] i{background:#7ce06a;box-shadow:0 0 7px #7ce06a}
.wv-led.on[data-led="com"] i{background:#4aa3ff;box-shadow:0 0 7px #4aa3ff}
.wv-led.on[data-led="err"] i{background:var(--alarm);box-shadow:0 0 8px var(--alarm)}

.wv-screen{border-radius:5px;padding:8px;background:#04141b;
  box-shadow:inset 0 2px 7px rgba(0,0,0,.9),0 0 0 1px #10171b,0 0 0 4px #22282c}
.wv-scr__bar{display:flex;justify-content:space-between;font-size:8.5px;letter-spacing:.1em;color:#6f9aa8;
  padding-bottom:6px;margin-bottom:7px;border-bottom:1px solid rgba(255,255,255,.07);
  font-family:ui-monospace,"SFMono-Regular",Menlo,monospace}
.wv-scr__steplbl{font-size:7px;letter-spacing:.12em;text-transform:uppercase;color:#4f717c}
.wv-scr__step{padding:6px 7px;border-radius:3px;background:rgba(230,255,43,.06);
  border-left:2px solid var(--lime);margin-bottom:7px}
.wv-scr__step strong{display:block;margin-top:2px;font-size:11.5px;color:var(--lime);font-weight:600;
  font-family:ui-monospace,"SFMono-Regular",Menlo,monospace}
.wv-scr__word{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:0 1px}
.wv-word{display:flex;gap:4px}
.wv-word b{width:19px;height:23px;display:grid;place-items:center;border-radius:2px;font-size:11px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);color:#3f5b66;
  font-family:ui-monospace,Menlo,monospace;transition:color .2s,background .2s,border-color .2s}
.wv-word b.set{color:#04141b;background:var(--lime);border-color:var(--lime)}
.wv-stack{margin-left:auto;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.wv-scr__vals{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:8px}
.wv-val{padding:6px 5px;border-radius:3px;background:rgba(255,255,255,.035)}
.wv-val span{display:block;font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:#5f8592;margin-bottom:2px}
.wv-val strong{font-size:15px;font-weight:600;color:var(--lime);font-variant-numeric:tabular-nums}
.wv-val em{font-size:7.5px;font-style:normal;color:#5f8592;margin-left:2px}
.wv-scr__alarm{display:flex;gap:7px;padding:6px 7px;border-radius:3px;font-size:9px;
  background:rgba(230,255,43,.07);border-left:2px solid var(--lime);color:#cfe6a8;
  font-family:ui-monospace,"SFMono-Regular",Menlo,monospace}
.wv-scr__alarm.is-fault{background:rgba(255,91,72,.11);border-left-color:var(--alarm);color:#ffb3a8}
.wv-scr__alarmTime{color:#5f8592;flex:0 0 auto}

.wv-man{margin:11px 2px 12px}
.wv-man__lbl{display:flex;align-items:center;gap:8px;font-size:8px;letter-spacing:.16em;
  text-transform:uppercase;color:#8e989e;margin-bottom:7px}
/* Handnotiz: wirkt wie mit dem Stift auf einen Screenshot gekritzelt und zeigt
   auf das Bedienpanel. Verschwindet beim ersten Druck, spätestens nach 14 s.
   pointer-events:none, damit sie das Drehen der Szene nicht blockiert. */
/* Direktes Kind von .wv, NICHT von .wv-stage: die Buehne bildet mit z-index 0
   einen eigenen Stapelkontext, darin waere die Notiz immer unter dem Panel. */
.wv-note{position:absolute;top:24%;z-index:5;width:560px;text-align:right;
  /* An die Panelkante gekoppelt: das Panel ist 35 % breit, also endet das Notizfeld
     immer 110 px innerhalb davon — unabhaengig von der Fensterbreite. */
  right:calc(35% - 110px);
  color:var(--lime);pointer-events:none;transition:opacity .5s,transform .5s;
  /* Zwei Animationen: leichtes Wackeln, und nach 14 s ausblenden. Das
     Ausblenden liegt bewusst im CSS, damit es auch ohne JavaScript greift. */
  animation:wvNoteBob 3.4s ease-in-out infinite, wvNoteOut .55s ease 14s forwards}
.wv-note__txt{display:block;font-family:"WMYB Hand","Segoe Script","Bradley Hand",
  "Marker Felt","Chalkboard SE",cursive;font-size:36px;line-height:1.15;
  /* Rand rechts haelt die Schrift ueber der dunklen Welt statt ueber dem Display */
  margin-right:172px;transform:rotate(-4.5deg);text-shadow:0 2px 14px rgba(4,22,30,.85)}
.wv-note__txt em{font-style:normal;font-size:24px;opacity:.8}
/* Element genau im viewBox-Verhaeltnis 2:1 halten. Sonst skaliert das SVG
   proportional und zentriert, es entstehen Leerraeume und die Spitze reicht
   weniger weit als berechnet. Negativer Rand schiebt sie ins Panel. */
.wv-note__arrow{display:block;width:300px;height:150px;margin:6px -116px 0 auto;overflow:visible}
.wv-note__arrow path{fill:none;stroke:currentColor;stroke-width:2.9;
  stroke-linecap:round;stroke-linejoin:round;opacity:.9}
@keyframes wvNoteBob{0%,100%{transform:translate(0,0)}50%{transform:translate(3px,-3px)}}
@keyframes wvNoteOut{to{opacity:0;visibility:hidden}}
.wv.is-touched .wv-note{opacity:0;transform:translateX(10px) scale(.97)}
.wv-man__grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.wv-mbtn{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:8px 9px;
  border-radius:4px;border:1px solid #14191c;cursor:pointer;font:inherit;text-align:left;
  background:linear-gradient(180deg,#474f55,#2b3236);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 2px 3px rgba(0,0,0,.42)}
.wv-mbtn--wide{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between}
.wv-mbtn b{display:flex;align-items:baseline;gap:6px;font-size:9px;font-weight:600;
  letter-spacing:.04em;color:#c9d2d6}
.wv-mbtn b i{font-style:normal;font-size:7.5px;letter-spacing:.06em;color:#5f8592;
  font-family:ui-monospace,"SFMono-Regular",Menlo,monospace}
.wv-mbtn em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.05em;color:#6f7e85;
  font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;transition:color .15s}
.wv-mbtn.on em{color:var(--lime);text-shadow:0 0 9px rgba(230,255,43,.5)}
.wv-mbtn.warn em{color:#ffbe4d;text-shadow:0 0 9px rgba(255,190,77,.45)}
.wv-mbtn:active{transform:translateY(1px)}
.wv-mbtn:focus-visible{outline:2px solid var(--lime);outline-offset:1px}

.wv-hw{display:flex;align-items:flex-start;justify-content:space-around;gap:6px;padding:11px 8px 4px;
  border-top:1px solid rgba(0,0,0,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.wv-btn,.wv-estop{background:none;border:0;padding:0;cursor:pointer;font:inherit;
  display:flex;flex-direction:column;align-items:center;gap:5px;font-size:7px;letter-spacing:.1em;
  text-transform:uppercase;color:#8e989e}
.wv-btn:focus-visible,.wv-estop:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:4px}
.wv-btn i{width:32px;height:32px;border-radius:50%;
  box-shadow:inset 0 -2px 4px rgba(0,0,0,.55),inset 0 2px 3px rgba(255,255,255,.2),0 3px 5px rgba(0,0,0,.5);
  transition:box-shadow .15s,background .15s}
.wv-btn:active i{transform:translateY(1px)}
.wv-btn--start i{background:radial-gradient(circle at 38% 30%,#3f7a37,#1f4a1d)}
.wv-btn--start.lit i{background:radial-gradient(circle at 38% 30%,#a8f58c,#3f9c37);box-shadow:0 0 14px rgba(120,240,110,.6),inset 0 2px 3px rgba(255,255,255,.35)}
.wv-btn--stop i{background:radial-gradient(circle at 38% 30%,#3a3d40,#1d2022)}
.wv-btn--stop.lit i{background:radial-gradient(circle at 38% 30%,#ff8d7e,#b02a1c);box-shadow:0 0 12px rgba(255,91,72,.5)}
.wv-btn--ack i{background:radial-gradient(circle at 38% 30%,#6d5c1e,#3b3110)}
.wv-btn--ack.lit i{background:radial-gradient(circle at 38% 30%,#ffe27a,#c9971a);box-shadow:0 0 13px rgba(255,214,90,.6)}
.wv-estop i{position:relative;width:38px;height:38px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#e8c93a,#b89a17);box-shadow:0 3px 6px rgba(0,0,0,.55);
  display:grid;place-items:center}
.wv-estop i::after{content:"";width:27px;height:27px;border-radius:50%;
  background:radial-gradient(circle at 40% 28%,#ff6a56,#a01d10 70%,#6d1108);
  box-shadow:inset 0 -2px 4px rgba(0,0,0,.5),inset 0 2px 3px rgba(255,255,255,.25);transition:transform .12s}
.wv-estop.is-latched i::after{transform:scale(.9);box-shadow:inset 0 0 8px rgba(0,0,0,.7),0 0 14px rgba(255,91,72,.65)}
.wv-estop.is-latched{color:#ff8676}

@media (max-width:1000px){
  .wv{grid-template-columns:1fr;min-height:0}
  .wv-stage{position:relative;inset:auto;height:340px}
  .wv-hmi{grid-column:1;padding:16px 14px 20px}
  .wv-dev{transform:none;max-width:440px}
  /* Die Notiz haengt an .wv, nicht an der Buehne. Mit bottom wuerde sie unter
     dem Panel landen, weil .wv hier Buehne UND Panel umfasst. Deshalb oben
     gemessen, innerhalb der 340 px hohen Buehne. */
  /* top=242 ist gerechnet, nicht geschaetzt: Textblock 59 px, danach die um 26
     Grad gedrehte Pfeilbox, deren Spitze 82 px unter ihrer Oberkante liegt.
     242 + 59 + 2 + 82 = 385, die Buehne endet bei 340 -> Spitze 45 px im Panel. */
  .wv-note{top:242px;bottom:auto;right:auto;left:50%;width:320px;text-align:center;
    transform:translateX(-50%)}
  .wv-note__txt{font-size:32px;line-height:1.1;margin-right:0;transform:rotate(-3deg)}
  .wv-note__txt em{font-size:22px}
  .wv-note__arrow{width:150px;height:75px;margin:2px auto 0;transform:rotate(26deg)}
  .wv.is-touched .wv-note{transform:translateX(-50%) translateY(8px) scale(.97)}
  @keyframes wvNoteBob{0%,100%{transform:translateX(-50%)}50%{transform:translateX(-50%) translateY(-3px)}}
}
@media (prefers-reduced-motion:reduce){
  .wv-boot span{animation:none}
  .wv-note{animation:wvNoteOut .55s ease 14s forwards}
}