/* ============================================================================
   Jarvis – Design-System v2 (2026-10-03)
   Dunkel, technisch, ruhig ("Jarvis"/HUD-Stil):
   Tiefe durch Glas-/Blurflächen, hauchfeine Cyan-Ränder, klare Typo-
   Hierarchie, gleichmäßige 4/8/12/16/22/30-Abstände, saubere Mobile-Ansicht.
   Alle von app.js erwarteten IDs/Klassen bleiben unverändert erhalten:
   .aktiv .busy .warn .punkt(.wartet/.hoert/.denkt/.spricht) .mikro-zustand
   .pegel-fuellung.laut .spricht/.hoert/.denkt (Orb) .msg.user/.jarvis .caret
   ============================================================================ */

:root{
  /* Flächen */
  --bg-0:#04060a;
  --bg-1:#070b12;
  --glas-1:rgba(255,255,255,.024);
  --glas-2:rgba(255,255,255,.045);
  --glas-3:rgba(255,255,255,.075);
  --blur:blur(18px) saturate(150%);

  /* Linien */
  --linie-1:rgba(120,200,235,.10);
  --linie-2:rgba(120,200,235,.20);
  --linie-3:rgba(120,200,235,.34);

  /* Cyan-Akzente */
  --cyan:#5fe3ff;
  --cyan-hell:#a9f2ff;
  --cyan-dunkel:#127a99;
  --cyan-glow:rgba(95,227,255,.55);

  /* Text */
  --text-1:#eaf5ff;
  --text-2:#a2b8c9;
  --text-3:#6d8397;

  /* Zustände */
  --gruen:#3ee07f;
  --orange:#ffab2e;
  --blau:#4aa8ff;
  --rot:#ff5d7a;

  /* Maße */
  --r-s:10px; --r-m:14px; --r-l:18px; --r-xl:24px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:22px; --sp-6:30px;
  --max:1040px;

  --font:"Inter","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"JetBrains Mono","SF Mono","Cascadia Mono",Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:
    radial-gradient(1100px 620px at 50% -14%, rgba(56,190,255,.16), transparent 62%),
    radial-gradient(900px 620px at 10% 112%, rgba(52,120,255,.09), transparent 60%),
    linear-gradient(180deg,#06090f 0%,var(--bg-0) 100%);
  background-attachment:fixed;
  color:var(--text-1);
  font-family:var(--font);
  font-size:15px;
  line-height:1.5;
  letter-spacing:-.005em;
  font-feature-settings:"cv01","ss03","tnum";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Dezentes technisches Raster hinter allem */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:
    linear-gradient(rgba(120,200,235,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,200,235,.045) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(circle at 50% 0%,#000 0%,transparent 68%);
  mask-image:radial-gradient(circle at 50% 0%,#000 0%,transparent 68%);
}

#app{position:relative;z-index:1;display:flex;flex-direction:column;height:100dvh;max-width:var(--max);margin:0 auto}

/* ---------------------------------------------------------------- Typografie */
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.02em}
.klein{font-size:12px}

/* ---------------------------------------------------------------- Topbar */
.topbar{
  position:sticky;top:0;z-index:20;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--sp-3);
  padding:12px 18px;
  background:linear-gradient(180deg,rgba(6,10,16,.88),rgba(6,10,16,.62));
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border-bottom:1px solid var(--linie-1);
}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text-1);
  font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 0 4px rgba(95,227,255,.10),0 0 14px var(--cyan-glow);animation:pulse 2.6s ease-in-out infinite}

/* Segmentierter Umschalter */
.tabs{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-pill);
  background:var(--glas-1);border:1px solid var(--linie-1)}
.tab{border:0;background:transparent;color:var(--text-2);font:inherit;font-size:13px;font-weight:500;
  padding:8px 18px;border-radius:var(--r-pill);cursor:pointer;
  transition:color .18s ease,background .18s ease,box-shadow .18s ease}
.tab:hover{color:var(--text-1)}
.tab.aktiv{color:var(--cyan-hell);background:var(--glas-3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px var(--linie-2),0 8px 20px rgba(0,0,0,.35)}

/* Statusanzeige */
.status{justify-self:end;display:inline-flex;align-items:center;gap:8px;max-width:100%;
  padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--linie-1);background:var(--glas-1);
  color:var(--text-2);font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.status::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;
  background:var(--text-3);box-shadow:0 0 8px rgba(109,131,151,.7)}
.status.aktiv{color:var(--cyan-hell);border-color:var(--linie-2)}
.status.aktiv::before{background:var(--cyan);box-shadow:0 0 10px var(--cyan-glow)}
.status.busy{color:var(--cyan-hell)}
.status.busy::before{background:var(--cyan);box-shadow:0 0 10px var(--cyan-glow);animation:puls 1s ease-in-out infinite}

/* ---------------------------------------------------------------- Tonleiste */
.tonleiste{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);
  margin:var(--sp-4) 18px 0;padding:var(--sp-3) var(--sp-4);
  background:var(--glas-1);border:1px solid var(--linie-1);border-radius:var(--r-l);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
}
.tonbtn{flex:0 0 auto}
.vol{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;
  color:var(--text-3);letter-spacing:.06em;text-transform:uppercase;flex:1 1 240px;min-width:200px}
.vol input[type=range]{flex:1;min-width:96px}
.vol #volVal{flex:0 0 auto;min-width:42px;text-align:right;color:var(--text-2);font-variant-numeric:tabular-nums}
.ausgabe{display:flex;flex-direction:column;gap:6px;flex:1 1 260px;min-width:220px}
.ausgabe-zeile{font-family:var(--mono);font-size:11.5px;color:var(--text-3);letter-spacing:.02em}
.outselect{max-width:100%}

.tonfehler{
  margin:var(--sp-3) 18px 0;padding:10px 14px;border-radius:var(--r-m);
  border:1px solid rgba(255,93,122,.35);background:rgba(255,93,122,.09);
  color:#ffd0d8;font-size:13px;
}

/* ---------------------------------------------------------------- Bühne / Orb */
.stage{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;
  padding:var(--sp-5) 18px 0;overflow:hidden}
.orb-wrap{display:grid;place-items:center;padding:var(--sp-2) 0 var(--sp-3)}
.orb{position:relative;width:196px;height:196px;display:grid;place-items:center;isolation:isolate}
.orb::before{ /* weicher Lichthof */
  content:"";position:absolute;inset:-30%;border-radius:50%;z-index:-1;
  background:radial-gradient(circle at 50% 50%,rgba(95,227,255,.20),transparent 62%);
}
.orb .core{
  width:74px;height:74px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#e8fcff,#8ceeff 32%,var(--cyan) 58%,#0a6b86 100%);
  box-shadow:
    inset 0 -6px 18px rgba(0,40,60,.45),
    0 0 34px rgba(95,227,255,.55),
    0 0 90px rgba(95,227,255,.28);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease;
}
.orb .ring{position:absolute;border:1px solid var(--linie-2);border-radius:50%;
  opacity:.6;animation:spin 11s linear infinite}
.orb .r1{width:112px;height:112px;border-top-color:var(--cyan);border-right-color:rgba(95,227,255,.45)}
.orb .r2{width:150px;height:150px;border-left-color:var(--cyan);border-bottom-color:var(--linie-1);
  animation-duration:17s;animation-direction:reverse}
.orb .r3{width:188px;height:188px;border-bottom-color:var(--cyan);border-left-color:rgba(95,227,255,.30);
  animation-duration:26s;border-style:dashed}
.orb.hoert .core{transform:scale(1.14);
  box-shadow:inset 0 -6px 18px rgba(0,40,60,.45),0 0 50px rgba(95,227,255,.85),0 0 130px rgba(95,227,255,.42)}
.orb.hoert .ring{opacity:.95;animation-duration:3.2s;border-color:rgba(95,227,255,.45)}
.orb.denkt .core{animation:pulse 1.4s ease-in-out infinite}
.orb.spricht .core{animation:spricht .55s ease-in-out infinite}
.orb.leise .core{background:radial-gradient(circle at 38% 32%,#5d6873,#2b323a);box-shadow:inset 0 -6px 18px rgba(0,0,0,.5)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes spricht{0%,100%{transform:scale(1.04)}50%{transform:scale(1.2)}}
@keyframes ein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes blink{50%{opacity:0}}
@keyframes puls{0%,100%{opacity:1}50%{opacity:.3}}

.hint-zeile{display:flex;align-items:center;justify-content:center;gap:10px;margin:var(--sp-1) 0 var(--sp-4)}
.hint{color:var(--text-2);font-size:13.5px;margin:0;min-height:18px;text-align:center}
.punkt{width:9px;height:9px;border-radius:50%;background:#6b7480;
  box-shadow:0 0 0 3px rgba(255,255,255,.05);flex:0 0 auto;transition:background .2s ease,box-shadow .2s ease}
.punkt.wartet{background:#6b7480}
.punkt.hoert{background:var(--gruen);box-shadow:0 0 0 3px rgba(62,224,127,.12),0 0 10px rgba(62,224,127,.85)}
.punkt.denkt{background:var(--orange);box-shadow:0 0 0 3px rgba(255,171,46,.12),0 0 10px rgba(255,171,46,.85);
  animation:puls 1s infinite ease-in-out}
.punkt.spricht{background:var(--blau);box-shadow:0 0 0 3px rgba(74,168,255,.12),0 0 10px rgba(74,168,255,.85)}

/* ---------------------------------------------------------------- Mikrofon-Panel */
.mikro{
  width:100%;margin-bottom:var(--sp-4);padding:var(--sp-4);
  background:var(--glas-1);border:1px solid var(--linie-1);border-radius:var(--r-l);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  display:flex;flex-direction:column;gap:var(--sp-3);
}
.mikro-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
.mikro-titel{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.badge{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:var(--r-pill);
  border:1px solid var(--linie-1);background:var(--glas-1);color:var(--text-2);
  font-family:var(--mono);font-size:11px;letter-spacing:.02em}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gruen);box-shadow:0 0 8px rgba(62,224,127,.8)}
.badge.warn{color:#ffd8a3;border-color:rgba(255,171,46,.35);background:rgba(255,171,46,.09)}
.badge.warn::before{background:var(--orange);box-shadow:0 0 8px rgba(255,171,46,.85)}
.mikro-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.mikro-zeile .micselect{flex:1 1 220px;min-width:180px}
.mikro-zeile .kl{display:inline-flex;align-items:center;gap:9px;flex:1 1 220px;
  font-size:12.5px;color:var(--text-2)}
.mikro-zeile .kl input[type=range]{flex:1;min-width:110px}
.kl-hinweis{font-size:11.5px;color:var(--text-3);line-height:1.35;flex:1 1 240px}

.pegel{position:relative;height:8px;border-radius:var(--r-pill);overflow:hidden;
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--linie-1)}
.pegel-fuellung{position:absolute;inset:0 auto 0 0;width:0%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--cyan-dunkel),var(--cyan));
  transition:width .08s linear,background .2s ease}
.pegel-fuellung.laut{background:linear-gradient(90deg,#1f9f66,var(--gruen));
  box-shadow:0 0 12px rgba(62,224,127,.55)}
.pegel-schwelle{position:absolute;top:-2px;bottom:-2px;left:30%;width:2px;border-radius:2px;
  background:rgba(255,171,46,.85);box-shadow:0 0 8px rgba(255,171,46,.6)}
.mikro-zustand{font-family:var(--mono);font-size:12px;color:var(--text-2);letter-spacing:.02em}
.mikro-zustand.warn{color:#ffd8a3}
.mikro-zustand.aktiv{color:var(--cyan-hell)}
.geraete-ergebnis{font-size:12.5px;color:var(--text-3);line-height:1.45}
.geraete-ergebnis:empty{display:none}

/* ---------------------------------------------------------------- Verlauf */
.conversation{width:100%;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:var(--sp-1) 2px var(--sp-4);display:flex;flex-direction:column;gap:10px;
  scrollbar-width:thin;scrollbar-color:var(--linie-2) transparent}
.conversation::-webkit-scrollbar{width:8px}
.conversation::-webkit-scrollbar-thumb{background:var(--linie-2);border-radius:var(--r-pill)}
.conversation::-webkit-scrollbar-track{background:transparent}
.msg{max-width:82%;padding:11px 15px;border-radius:var(--r-l);line-height:1.5;font-size:14.5px;
  white-space:pre-wrap;word-wrap:break-word;animation:ein .28s cubic-bezier(.2,.7,.2,1);
  box-shadow:0 8px 24px rgba(0,0,0,.28)}
.msg.user{align-self:flex-end;border-bottom-right-radius:6px;
  background:linear-gradient(145deg,rgba(45,110,175,.42),rgba(26,66,104,.42));
  border:1px solid rgba(120,190,255,.22);color:#eef7ff}
.msg.jarvis{align-self:flex-start;border-bottom-left-radius:6px;
  background:linear-gradient(145deg,rgba(18,40,58,.80),rgba(11,24,36,.80));
  border:1px solid var(--linie-1);color:var(--text-1);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.msg.jarvis .who{color:var(--cyan);font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:4px}
.caret{display:inline-block;width:2px;height:15px;vertical-align:-2px;background:var(--cyan);
  box-shadow:0 0 8px var(--cyan-glow);animation:blink 1s steps(1) infinite;margin-left:3px}

/* ---------------------------------------------------------------- Steuerleiste */
.controls{
  position:relative;z-index:20;display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) 18px calc(var(--sp-3) + env(safe-area-inset-bottom));
  background:linear-gradient(0deg,rgba(5,8,13,.92),rgba(5,8,13,.55));
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border-top:1px solid var(--linie-1);
}
.mic{flex:0 0 auto;width:60px;height:60px;border-radius:50%;border:1px solid var(--linie-2);cursor:pointer;
  color:#02141b;background:linear-gradient(150deg,var(--cyan-hell),var(--cyan) 55%,#1fa8cc);
  box-shadow:0 0 0 4px rgba(95,227,255,.08),0 10px 26px rgba(95,227,255,.32);
  display:grid;place-items:center;transition:transform .14s ease,box-shadow .2s ease}
.mic:hover{box-shadow:0 0 0 5px rgba(95,227,255,.12),0 12px 30px rgba(95,227,255,.42)}
.mic:active{transform:scale(.94)}
.mic.aktiv{color:#fff;background:linear-gradient(150deg,#ff9db2,#ff3b62);
  border-color:rgba(255,120,150,.5);
  box-shadow:0 0 0 4px rgba(255,59,98,.12),0 0 30px rgba(255,59,98,.55)}
.mic.rec{color:#fff;background:linear-gradient(150deg,#ff9db2,#ff3b62);
  box-shadow:0 0 0 4px rgba(255,59,98,.12),0 0 30px rgba(255,59,98,.55)}

.textform{flex:1;min-width:0;display:flex;align-items:center;gap:var(--sp-2);
  background:var(--glas-1);border:1px solid var(--linie-1);border-radius:var(--r-pill);
  padding:4px 4px 4px 18px;transition:border-color .18s ease,box-shadow .18s ease}
.textform:focus-within{border-color:var(--linie-3);box-shadow:0 0 0 4px rgba(95,227,255,.08)}
.textform input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--text-1);
  font-family:var(--font);font-size:14.5px;padding:11px 0}
.textform input::placeholder{color:var(--text-3)}
.textform .send{flex:0 0 auto;border:none;background:transparent;color:var(--cyan);cursor:pointer;
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;transition:background .18s ease}
.textform .send:hover{background:rgba(95,227,255,.12)}

/* Sekundär-/Geisterknöpfe */
.ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--glas-1);border:1px solid var(--linie-1);color:var(--text-2);
  border-radius:var(--r-m);padding:11px 15px;cursor:pointer;
  font-family:var(--font);font-size:13px;font-weight:500;line-height:1;white-space:nowrap;
  transition:color .18s ease,background .18s ease,border-color .18s ease,transform .12s ease}
.ghost:hover{color:var(--text-1);background:var(--glas-2);border-color:var(--linie-2)}
.ghost:active{transform:translateY(1px)}
.ghost.klein{padding:9px 13px;font-size:12.5px;border-radius:var(--r-s)}
.controls .ghost{flex:0 0 auto}

/* Eingaben */
input[type=text],input[type=password],select,textarea{
  font-family:var(--font);color:var(--text-1);font-size:13.5px;
  background:var(--glas-1);border:1px solid var(--linie-1);border-radius:var(--r-m);
  padding:11px 14px;outline:none;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
input[type=text]:focus,input[type=password]:focus,select:focus,textarea:focus{
  border-color:var(--linie-3);background:var(--glas-2);box-shadow:0 0 0 4px rgba(95,227,255,.08)}
::placeholder{color:var(--text-3)}

select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236d8397' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center}
select:hover{border-color:var(--linie-2);background-color:var(--glas-2)}
select option{background:#0a1018;color:var(--text-1)}

input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;height:22px;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:var(--r-pill);
  background:linear-gradient(90deg,rgba(18,122,153,.9),rgba(120,200,235,.18))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;
  margin-top:-5px;border-radius:50%;background:var(--cyan-hell);border:0;
  box-shadow:0 0 0 3px rgba(95,227,255,.16),0 0 12px var(--cyan-glow)}
input[type=range]::-moz-range-track{height:4px;border-radius:var(--r-pill);background:rgba(120,200,235,.18)}
input[type=range]::-moz-range-progress{height:4px;border-radius:var(--r-pill);background:rgba(18,122,153,.9)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--cyan-hell);
  box-shadow:0 0 0 3px rgba(95,227,255,.16),0 0 12px var(--cyan-glow)}

input[type=checkbox]{-webkit-appearance:none;appearance:none;width:17px;height:17px;flex:0 0 auto;
  border:1px solid var(--linie-2);border-radius:5px;background:var(--glas-1);cursor:pointer;
  display:inline-grid;place-content:center;transition:background .16s ease,border-color .16s ease}
input[type=checkbox]::after{content:"";width:8px;height:8px;border-radius:2px;background:var(--cyan);
  transform:scale(0);transition:transform .14s cubic-bezier(.2,.8,.3,1.4)}
input[type=checkbox]:checked{border-color:var(--linie-3);background:rgba(95,227,255,.12)}
input[type=checkbox]:checked::after{transform:scale(1)}

:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
::selection{background:rgba(95,227,255,.3)}

/* ================================================================ Steuerpult */
.pult{flex:1;min-height:0;overflow-y:auto;padding:var(--sp-5) 18px var(--sp-6);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:var(--sp-4);align-content:start;
  scrollbar-width:thin;scrollbar-color:var(--linie-2) transparent}
.pult::-webkit-scrollbar{width:8px}
.pult::-webkit-scrollbar-thumb{background:var(--linie-2);border-radius:var(--r-pill)}
.pult-kopf{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);
  padding:var(--sp-4);background:var(--glas-1);border:1px solid var(--linie-1);border-radius:var(--r-l);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.pult-status{display:inline-flex;align-items:center;gap:8px;flex:1 1 260px;font-family:var(--mono);
  font-size:11.5px;color:var(--text-2);letter-spacing:.02em}
.pult-status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 10px var(--cyan-glow);flex:0 0 auto}
.geraet-name{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text-3)}
.geraet-name input{width:150px;padding:9px 12px}

.pult-gruppe{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4);
  background:var(--glas-1);border:1px solid var(--linie-1);border-radius:var(--r-l);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.pult-gruppe h3{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cyan);opacity:.9}
.pult-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.pult-zeile input[type=text]{flex:1 1 180px;min-width:150px}
.pultbtn{display:inline-flex;align-items:center;justify-content:center;
  padding:10px 15px;border-radius:var(--r-m);cursor:pointer;
  border:1px solid var(--linie-1);background:var(--glas-2);color:var(--text-1);
  font-family:var(--font);font-size:12.5px;font-weight:500;line-height:1;white-space:nowrap;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .12s ease}
.pultbtn:hover{background:var(--glas-3);border-color:var(--linie-2);color:#fff}
.pultbtn:active{transform:translateY(1px)}
.pultbtn.gefahr{color:#ffd0d8;border-color:rgba(255,93,122,.32);background:rgba(255,93,122,.10)}
.pultbtn.gefahr:hover{background:rgba(255,93,122,.18);color:#fff}
.pult-info{font-size:12.5px;color:var(--text-3);line-height:1.5}
.pult-info:empty{display:none}

.bild-rahmen{position:relative;border-radius:var(--r-m);overflow:hidden;
  border:1px solid var(--linie-1);background:rgba(0,0,0,.35);min-height:150px;display:grid;place-items:center}
.bild-rahmen img{display:block;width:100%;height:auto}
.bild-platzhalter{padding:var(--sp-6) var(--sp-4);text-align:center;color:var(--text-3);font-size:12.5px}
.fensterliste,.ereignis-log{margin:0;max-height:220px;overflow:auto;padding:var(--sp-3);
  border-radius:var(--r-m);border:1px solid var(--linie-1);background:rgba(0,0,0,.35);
  color:var(--text-2);font-family:var(--mono);font-size:11.5px;line-height:1.55;white-space:pre-wrap;
  scrollbar-width:thin}
.fensterliste:empty,.ereignis-log:empty{display:none}

/* ================================================================ Login */
.login-body{position:relative;display:grid;place-items:center;min-height:100dvh;margin:0;padding:var(--sp-5)}
.login-shell{position:relative;z-index:1;width:min(420px,100%)}
.login-card{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-4);
  padding:var(--sp-6) var(--sp-5);border-radius:var(--r-xl);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--linie-2);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 30px 80px rgba(0,0,0,.65)}
.login-orb{display:grid;place-items:center;padding-bottom:var(--sp-1)}
.login-kopf{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.login-kopf h1{margin:0;font-size:26px;font-weight:600;letter-spacing:.34em;color:var(--text-1);
  text-indent:.34em;text-shadow:0 0 26px rgba(95,227,255,.35)}
.login-kopf .sub{margin:0;color:var(--text-3);font-size:12.5px}
.login-card .err{margin:0;padding:10px 13px;border-radius:var(--r-m);font-size:12.5px;
  color:#ffd0d8;border:1px solid rgba(255,93,122,.35);background:rgba(255,93,122,.10)}
.login-feld{display:flex;flex-direction:column;gap:7px}
.login-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.login-feld input{width:100%;padding:13px 15px;border-radius:var(--r-m);font-size:15px}
.login-card button[type=submit],.login-btn{width:100%;padding:13px 16px;border:0;border-radius:var(--r-m);
  cursor:pointer;font-family:var(--font);font-size:14.5px;font-weight:600;letter-spacing:.02em;
  color:#02141b;background:linear-gradient(150deg,var(--cyan-hell),var(--cyan) 60%,#1fa8cc);
  box-shadow:0 0 0 4px rgba(95,227,255,.07),0 12px 30px rgba(95,227,255,.28);
  transition:transform .12s ease,box-shadow .2s ease}
.login-card button[type=submit]:hover{box-shadow:0 0 0 5px rgba(95,227,255,.12),0 14px 34px rgba(95,227,255,.38)}
.login-card button[type=submit]:active{transform:translateY(1px)}
.login-fuss{margin:0;text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--text-3)}

/* Kompakter Orb für die Login-Karte */
.orb-small{width:104px;height:104px}
.orb-small .core{width:42px;height:42px;
  box-shadow:inset 0 -4px 12px rgba(0,40,60,.45),0 0 22px rgba(95,227,255,.55),0 0 60px rgba(95,227,255,.25)}
.orb-small .r1{width:60px;height:60px}
.orb-small .r2{width:80px;height:80px}
.orb-small .r3{width:100px;height:100px}

/* ================================================================ Responsive */
@media (max-width:760px){
  body{font-size:14.5px}
  .topbar{padding:10px 14px;grid-template-columns:auto 1fr;grid-template-areas:"brand status" "tabs tabs";
    gap:var(--sp-2) var(--sp-3)}
  .brand{grid-area:brand}
  .tabs{grid-area:tabs;justify-self:stretch}
  .tab{flex:1;padding:9px 8px;text-align:center}
  .status{grid-area:status;font-size:11px}
  .tonleiste{margin:var(--sp-3) 14px 0;gap:var(--sp-3);padding:var(--sp-3)}
  .ausgabe{flex-basis:100%}
  .stage{padding:var(--sp-4) 14px 0}
  .orb{width:168px;height:168px}
  .orb .r1{width:96px;height:96px}
  .orb .r2{width:128px;height:128px}
  .orb .r3{width:160px;height:160px}
  .orb .core{width:64px;height:64px}
  .mikro{padding:var(--sp-3)}
  .conversation{width:100%}
  .msg{max-width:90%;font-size:14px}
  .controls{gap:var(--sp-2);padding:var(--sp-3) 14px calc(var(--sp-3) + env(safe-area-inset-bottom))}
  .mic{width:54px;height:54px}
  .textform{padding-left:15px}
  .textform input{font-size:14px}
  .controls #resetBtn{width:44px;padding:12px 0;font-size:0}
  .controls #resetBtn::before{content:"⟲";font-size:16px;line-height:1}
  .pult{padding:var(--sp-4) 14px var(--sp-5)}
  .login-card{padding:var(--sp-5) var(--sp-4);border-radius:var(--r-l)}
}
@media (max-width:520px){
  .kl-hinweis{display:none}
  .brand{font-size:12.5px;letter-spacing:.10em}
  .status{max-width:44vw}
  .vol{flex-basis:100%}
  .mikro-zeile .kl{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
}