/* Business-Gehirn – Aussehen (Task 13). Übernommen aus der abgenommenen Attrappe unternehmen/attrappen/gehirn-mix.html.
   Farben: dunkles Schema des SK Terminal (liqmap/public/styles.css), Schriften selbst gehostet (fonts/schriften.css).
   Die CSP erlaubt Stile nur aus dieser Datei; Lage und Größe der Szene setzt szene.js per CSSOM. */

:root{
  --bg:#07090e; --panel:#0b0e15; --panel-2:#10141d; --line:#1a1f2b; --line-2:#273042;
  --text:#dfe4ee; --muted:#8089a0;
  --dim:#4f5870;          /* nur Linien/Punkte – als Schrift zu schwach (2,8:1) */
  --go:#20d3a0;           /* arbeitet */
  --wait:#ffb000;         /* wartet auf dich */
  --stop:#ff4d6d;         /* Gefahr, Fehler, angehalten */
  --ease:cubic-bezier(.2,.8,.2,1);
  --display:'Chakra Petch','Segoe UI',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --pl:max(16px,env(safe-area-inset-left)); --pr:max(16px,env(safe-area-inset-right));
  --dock:84px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%}
html:has(dialog[open]){overflow:hidden}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--text);font:15px/1.45 var(--sans);
  -webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:default}
a,button,label{touch-action:manipulation}
:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}

/* ---------- Grundaufbau: iPhone hochkant zuerst ---------- */
.app{position:relative;display:flex;flex-direction:column;gap:12px;max-width:760px;margin:0 auto;
  padding:0 var(--pr) calc(var(--dock) + 18px) var(--pl)}
.rest,.side-l,.side-r{display:contents}
.top{order:1}.center{order:2}.tabs{order:3}#p-needs{order:4}#p-today{order:5}#p-skills{order:6}#runs{order:7}
.voice{display:none}
.pane,.runs{display:none}
.app[data-tab=needs] #p-needs,.app[data-tab=today] #p-today,.app[data-tab=skills] #p-skills,.app[data-tab=skills] #runs{display:block}

/* ---------- Kopf ---------- */
.top{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand tools" "status status";
  gap:8px 10px;align-items:center;padding-top:max(10px,env(safe-area-inset-top))}
.brand{grid-area:brand;min-width:0}
.brand h1{margin:0;font:600 20px/1 var(--display);letter-spacing:.22em;text-transform:uppercase;white-space:nowrap}
.brand p{margin:3px 0 0;font:12px/1.2 var(--sans);color:var(--muted);white-space:nowrap}
.status{grid-area:status;justify-self:center;max-width:100%;margin:0;display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 7px;
  min-height:30px;padding:4px 13px;border-radius:15px;border:1px solid var(--line-2);background:var(--panel);font:500 12px/1.2 var(--sans)}
.status > *{white-space:nowrap}
.status .sd{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
.status[data-tone=go] .sd{background:var(--go)}
.status[data-tone=stop] .sd{background:var(--stop)}
.status[data-tone=stop] .s-run{color:var(--stop)}
.status[data-alt=true] .s-conn{color:var(--wait)}
.status .sep{color:var(--muted)}
.status .s-run{font-family:var(--mono);font-size:11.5px}
.status .s-need{color:var(--wait);font-weight:600}
.status .s-need.zero{color:var(--muted);font-weight:500}
.tools{grid-area:tools;display:flex;align-items:center;gap:8px}
.clock{display:none;font:500 14px/1 var(--mono);color:var(--text);padding:0 4px}
.halt{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 12px;border-radius:11px;border:1.5px solid var(--stop);
  background:transparent;color:var(--stop);font:600 13px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transition:transform 120ms var(--ease)}
.halt .ic{width:16px;height:16px}
.halt:active{transform:scale(.97)}
@media (hover:hover){.halt:hover{background:rgba(255,77,109,.1)}}
body.halted .halt{border-color:var(--text);color:var(--text)}
.gear{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:11px;border:1px solid var(--line-2);background:var(--panel);color:var(--text);transition:transform 120ms var(--ease)}
.gear:active{transform:scale(.95)}
.gear .ic{width:20px;height:20px}
.haltbar{grid-column:1/-1;margin:0;display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;
  border:1px solid rgba(255,77,109,.55);background:rgba(255,77,109,.07);font-size:13.5px}
.haltbar > span{flex:1;min-width:0}
.haltbar b{color:var(--stop)}
.haltbar > .ic{width:16px;height:16px;color:var(--stop)}

/* ---------- Gehirn (Ring) ---------- */
.center{display:flex;flex-direction:column;min-width:0;min-height:0}
.galaxy{position:relative;display:flex;flex-direction:column;margin:0 calc(-1 * var(--pr)) 0 calc(-1 * var(--pl));aspect-ratio:375/410;overflow:hidden;isolation:isolate;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background-color:var(--bg);background-image:radial-gradient(circle,var(--line) 1px,transparent 1.5px);background-size:22px 22px;background-position:center;
  --cx:50%;--cy:50%;--core:62px;--ring:80px;--ns:44px}
.ringbox{position:relative;flex:1 1 auto;min-height:0;overflow:hidden}
.ring{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
.ring-svg{position:absolute;overflow:visible;pointer-events:none}
.orbit{fill:none;stroke:var(--line-2);stroke-width:1}
.orbit.tools{stroke:var(--line);stroke-dasharray:2 8}
.orbit.tick{stroke:var(--line-2)}
.orbit.halo{stroke:var(--line)}
.orbit.satorb{stroke:var(--line-2);stroke-dasharray:1 6;stroke-linecap:round}
.arc{fill:none;stroke-width:1.6;stroke-linecap:round}
.arc.firm{stroke:var(--dim)}
.arc.priv{stroke:var(--muted);stroke-dasharray:5 6}
.arm,.br{fill:none;stroke-linecap:round;pointer-events:none}
.arm-n{stroke:var(--dim);stroke-width:1.1}
.arm-l{stroke:var(--muted);stroke-width:1.3;opacity:0}
.arm-g{stroke:var(--go);stroke-width:1.7;opacity:0}
.arm-l.lit,.arm-g.on{opacity:1}
.br-n{stroke:var(--line-2);stroke-width:1;stroke-dasharray:2 3}
.br-l{stroke:var(--muted);stroke-width:1;opacity:0}
.br-g{stroke:var(--go);stroke-width:1.3;opacity:0}
.br-l.lit,.br-g.on{opacity:1}
/* Satelliten = Agenten (Schmuck, nicht antippbar) */
.sats{position:absolute;left:0;top:0}
.sat{position:absolute;width:0;height:0}
.sat i{position:absolute;left:-2.5px;top:-2.5px;width:5px;height:5px;border-radius:50%;background:var(--muted)}
.sat b{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--go);
  box-shadow:0 0 6px 2px rgba(32,211,160,.75),0 0 16px 5px rgba(32,211,160,.3);opacity:0}
.sat[data-st=arbeitet] i{left:-3px;top:-3px;width:6px;height:6px;background:var(--go)}
.sat[data-st=wartet] i{left:-4.5px;top:-4.5px;width:9px;height:9px;background:transparent;border:2px solid var(--wait)}
.sat[data-st=pausiert] i{background:var(--dim)}
.sat.glow b{opacity:1}
.sat.lit i{background:var(--text)}
.sat.tool i{left:-1.5px;top:-1.5px;width:3px;height:3px;background:var(--dim)}
.galaxy:not(.ell) .sat.tool{display:none}
/* Lichtpunkte (Task 14): grün, fertig gemalt; laufen per Web Animations nur über transform/opacity, liegen im Ring und drehen mit */
.lps{position:absolute;left:0;top:0}
.lp,.komet{position:absolute;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--go);
  box-shadow:0 0 6px 2px rgba(32,211,160,.7);opacity:0;pointer-events:none}
.komet{width:10px;height:10px;margin:-5px 0 0 -5px;box-shadow:0 0 10px 3px rgba(32,211,160,.8),0 0 22px 7px rgba(32,211,160,.3)}
/* will-change nur, solange Ring bzw. Lichtpunkt laufen (szene.js setzt und nimmt die Klasse, R6) */
.wc{will-change:transform}
/* Glühen und „wartet“-Ring: nur die Deckkraft wechselt, einmal 300 ms (Spec 6.4) */
.nglow,.sat b,.wring{transition:opacity 300ms var(--ease)}
/* … aber nicht beim Kaltstart: da blendet der ganze Knoten ein, sonst liefen kurz über 24 Animationen (R2) */
.galaxy.still .nglow,.galaxy.still .sat b,.galaxy.still .wring,.galaxy.still .core-glow{transition:none}
/* Agent hängt (R16): rot und still – im Zustand „Fehler“ sind das genau die Agenten, die der Server noch „arbeitet“ nennt */
.galaxy[data-state=error] .sat[data-st=pausiert] i{background:var(--stop)}
/* Sektionen */
.nodes{position:absolute;left:0;top:0}
.node{position:absolute;width:var(--ns);height:var(--ns);margin:calc(var(--ns) / -2) 0 0 calc(var(--ns) / -2);padding:0;border:0;border-radius:50%;
  background:none;color:var(--text);pointer-events:auto}
.node:focus-visible{outline:none}
/* Ellipse (PC): der Ring staucht die Knoten auf 80 % Höhe – die unsichtbare Fläche hält die Tippfläche bei mindestens 44 px */
.nhit{display:none;position:absolute;inset:-6px;border-radius:50%}
.galaxy.ell .nhit{display:block}
.orb{position:absolute;inset:0;border-radius:50%;background:var(--panel);border:1px solid var(--line-2);transition:transform 120ms var(--ease)}
.orb::before{content:"";position:absolute;inset:9px;border-radius:50%;border:1px solid var(--line)}
.cdot{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--dim)}
.wring{position:absolute;inset:3px;border-radius:50%;border:1.5px dashed var(--wait);opacity:0}
.node.hot .orb{border-color:var(--go)}
.node.hot .cdot{background:var(--go)}
.node.wait .wring{opacity:1}
.node.wait .cdot{opacity:0}
.nglow{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1px rgba(255,176,0,.7),0 0 18px 3px rgba(255,176,0,.38);opacity:0;pointer-events:none}
.node.glow .nglow{opacity:1}
.nhov{position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--muted);opacity:0;transition:opacity 150ms var(--ease);pointer-events:none}
@media (hover:hover){.node:hover .nhov{opacity:1}.node:hover .orb{transform:scale(1.06)}}
.node:active .orb{transform:scale(.94)}
.node:focus-visible .nhov{opacity:1;border:2px solid var(--text)}
/* Zahl „wartet auf dich“ mitten im Kreis und Beschriftung darunter: liegen in einer Ebene, die gegen den Ring dreht (szene.js) */
.nup{position:absolute;left:50%;top:50%;width:0;height:0;transform-origin:0 0}
.nbadge{position:absolute;left:50%;top:50%;transform-origin:0 0;min-width:22px;height:20px;padding:0 6px;border-radius:10px;background:var(--wait);color:var(--bg);
  font:700 11.5px/20px var(--mono);text-align:center;pointer-events:none}
.nlabel{position:absolute;left:50%;top:50%;transform-origin:0 0;padding:0 5px;border-radius:6px;border:1px solid var(--line);background:var(--bg);
  font:600 11px/16px var(--display);letter-spacing:.02em;color:var(--text);white-space:nowrap}
.galaxy.big .nlabel{font-size:12px}
.nlabel .nsh{display:none}
.galaxy[data-lab=short] .nlabel .nl,.galaxy[data-lab=long] .node.useshort .nlabel .nl{display:none}
.galaxy[data-lab=short] .nlabel .nsh,.galaxy[data-lab=long] .node.useshort .nlabel .nsh{display:inline}
/* Kern Jarvis */
.core{position:absolute;z-index:5;left:var(--cx);top:var(--cy);width:var(--ring);height:var(--ring);margin:calc(var(--ring) / -2) 0 0 calc(var(--ring) / -2);
  padding:0;border:0;border-radius:50%;background:none;color:var(--text);display:grid;place-items:center}
.core-deco{position:absolute;inset:0;border-radius:50%;border:1px dashed var(--line-2);background:var(--bg);pointer-events:none}
.core-disc{position:relative;width:var(--core);height:var(--core);border-radius:50%;background:var(--panel);border:1.5px solid var(--line-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;opacity:.86;transition:transform 120ms var(--ease)}
.core:active .core-disc{transform:scale(.97)}
.core-glow{position:absolute;inset:-2px;border-radius:50%;box-shadow:0 0 0 1px rgba(32,211,160,.9),0 0 24px 4px rgba(32,211,160,.4);opacity:0;transition:opacity 250ms var(--ease);pointer-events:none}
.core-name{font:600 calc(var(--core) * .19)/1 var(--display);letter-spacing:.12em;padding-left:.12em;text-transform:uppercase}
.core-ind{display:flex;align-items:center;justify-content:center;height:12px}
.core-ind .ic{width:12px;height:12px;stroke-width:1.8}
.core-ind > *{display:none}
.galaxy.run .core-glow{opacity:1}
.galaxy.run .core-disc,.galaxy[data-state=listen] .core-disc,.galaxy[data-state=speak] .core-disc{opacity:1}
.galaxy.run .core-disc{border-color:var(--go)}
.galaxy[data-state=wait] .core-disc{border-color:var(--wait)}
.galaxy[data-state=listen] .core-disc,.galaxy[data-state=speak] .core-disc{border-color:var(--text)}
.galaxy[data-state=halt] .core-disc,.galaxy[data-state=error] .core-disc{border-color:var(--stop)}
.galaxy[data-state=run] .ci-run,.galaxy[data-state=wait] .ci-wait,.galaxy[data-state=listen] .ci-listen,.galaxy[data-state=speak] .ci-speak,.galaxy[data-state=halt] .ci-halt{display:block}
.ci-run{width:7px;height:7px;border-radius:50%;background:var(--go)}
.ci-wait{width:10px;height:10px;border-radius:50%;border:2px solid var(--wait)}
.ci-listen,.ci-speak{color:var(--text)}
.ci-halt{color:var(--stop)}
/* Zustände (Anzeigen, keine Schalter) */
.states{list-style:none;margin:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:5px}
.st{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 8px;border-radius:13px;border:1px solid var(--line);
  color:var(--muted);font:600 11.5px/1.2 var(--sans);white-space:nowrap}
.st .sg{display:none;width:7px;height:7px;border-radius:50%;background:var(--text);flex:none}
.st .ssub{display:none;font:500 10.5px/1.2 var(--mono);color:var(--text)}
.st[aria-current=true]{color:var(--text);border-color:var(--muted);background:var(--panel-2)}
.st[aria-current=true] .sg{display:block}
.st[data-s=run][aria-current=true]{color:var(--go);border-color:var(--go)}
.st[data-s=run] .sg{background:var(--go)}
.st[data-s=wait][aria-current=true]{color:var(--wait);border-color:var(--wait)}
.st[data-s=wait] .sg{width:10px;height:10px;background:transparent;border:2px solid var(--wait)}
.st[data-s=error][aria-current=true],.st[data-s=halt][aria-current=true]{color:var(--stop);border-color:var(--stop)}
.st[data-s=error] .sg,.st[data-s=halt] .sg{background:var(--stop)}
/* iPhone: Zustände knapp unter dem Kern – oben der aktive (lesbar), darunter die anderen als Punkte */
.galaxy:not(.wide) .states{position:absolute;z-index:6;left:var(--cx);top:calc(var(--cy) + var(--ring) / 2 + 4px);transform:translateX(-50%);
  width:134px;gap:4px 5px;padding:3px 3px 6px;border-radius:12px;border:1px solid var(--line-2);background:var(--bg)}
.galaxy:not(.wide) .st:not([aria-current=true]){min-height:0;width:6px;height:6px;padding:0;border:0;border-radius:50%;background:var(--dim)}
.galaxy:not(.wide) .st:not([aria-current=true]) > span,.galaxy:not(.wide) .st:not([aria-current=true]) > small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.galaxy:not(.wide) .st[aria-current=true]{order:-1;flex:1 1 100%;justify-content:center}
.galaxy.wide .states{flex:none;padding:8px 10px 9px;border-top:1px solid var(--line);background:var(--bg)}
/* Legende */
.legend{flex:none;margin:0;padding:6px 10px 8px;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;border-top:1px solid var(--line);background:var(--bg);
  font:10.5px/1.3 var(--mono);color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.legend i{display:inline-block;flex:none}
.lg-firma i,.lg-priv i{width:16px;height:0;border-top:1.6px solid var(--dim)}
.lg-priv i{border-top:1.6px dashed var(--muted)}
.lg-agent i{width:5px;height:5px;border-radius:50%;background:var(--muted)}
.lg-work i{width:7px;height:7px;border-radius:50%;background:var(--go)}
.lg-wait i{width:10px;height:10px;border-radius:50%;border:2px solid var(--wait)}
.galaxy:not(.wide) .lg-big{display:none}
/* Agenten-Anzeige (PC, Maus über einer Sektion) */
.readout{position:absolute;z-index:8;left:8px;top:8px;width:216px;margin:0;padding:9px 11px 8px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line-2);pointer-events:none}
.ro-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 4px;font:600 11px/1.2 var(--display);letter-spacing:.14em;text-transform:uppercase}
.ro-h span{font:400 10.5px/1.2 var(--mono);color:var(--muted);letter-spacing:0;text-transform:none}
.ro-row{display:flex;align-items:center;gap:7px;margin:0;font:12.5px/1.45 var(--sans)}
.ro-row b{flex:1;min-width:0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ro-row em{font:10.5px/1 var(--mono);font-style:normal;color:var(--muted)}
.ro-row em[data-st=arbeitet]{color:var(--go)}
.ro-row em[data-st=wartet]{color:var(--wait)}
.ro-row em[data-st=pausiert]{color:var(--stop)}
/* Kaltstart (R9): bis zum ersten Stand verborgen, dann gestaffelt eingeblendet (szene.js / app.js) */
.app.kalt .core,.app.kalt .pane,.app.kalt .runs{opacity:0}
body.halted .orbit,body.halted .arc,body.halted .arm-n{stroke:var(--line-2)!important}
body.halted .sat i{background:var(--dim)!important;border-color:var(--dim)!important}

@keyframes rise{from{transform:translateY(28px);opacity:0}}
@keyframes slidein{from{transform:translateX(32px);opacity:0}}
@keyframes pop{from{transform:translateY(10px);opacity:0}}
@keyframes fadein{from{opacity:0}}

/* ---------- Reiter (iPhone) ---------- */
.tabs{position:sticky;top:0;z-index:15;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:4px;padding:6px 0;background:var(--bg);border-bottom:1px solid var(--line)}
.tab{min-height:44px;padding:0 6px;border-radius:10px;border:1px solid transparent;background:none;color:var(--muted);font:600 13.5px/1.1 var(--sans);transition:transform 120ms var(--ease)}
.tab:active{transform:scale(.97)}
.tab[aria-selected=true]{color:var(--text);background:var(--panel-2);border-color:var(--line-2)}
.tab .tc{font:600 12px var(--mono);color:var(--wait)}
.tab .tc.zero{color:var(--muted)}
.pane.show,.runs.show{animation:fadein 200ms var(--ease)}

/* ---------- Bereiche ---------- */
.ph{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:2px 0 4px;min-height:28px}
.ph h2{margin:0;font:600 15px/1.2 var(--display);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.ph h2:focus{outline:none}
.ph .grow{flex:1}
.sub{margin:0 0 10px;color:var(--muted);font-size:13px}
.blk-h{margin:16px 0 8px;font:600 12px/1.2 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pill{display:inline-grid;place-items:center;min-width:28px;height:24px;padding:0 9px;border-radius:999px;background:var(--wait);color:var(--bg);font:700 13px/1 var(--mono)}
.pill.zero{background:transparent;color:var(--muted);border:1px solid var(--line-2)}
/* Braucht dich */
.needs-list{container-type:inline-size}
.card{position:relative;margin:0 0 10px;padding:12px 14px 12px 16px;border-radius:12px;border:1px solid var(--line-2);background:var(--panel-2);min-width:0}
.card::before{content:"";position:absolute;left:-1px;top:12px;bottom:12px;width:3px;border-radius:2px;background:var(--wait)}
.card.erledigt{background:var(--panel);border-color:var(--line)}
.card.erledigt::before{background:var(--muted)}
.card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:3px 8px;font:11.5px/1.3 var(--mono);color:var(--muted);min-width:0}
.card-meta .wr{width:10px;height:10px;flex:none;border-radius:50%;border:2px solid var(--wait)}
.card.erledigt .card-meta .wr{border-color:var(--muted)}
.card-meta .tag{font:600 11px/1.2 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--text)}
.card-meta .since{margin-left:auto;white-space:nowrap}
.card-meta .blk{color:var(--wait);font-weight:600}
.card h3{margin:7px 0 3px;font:600 16px/1.25 var(--display);letter-spacing:.01em;overflow-wrap:anywhere}
.card p{margin:0 0 11px;font-size:14px;overflow-wrap:anywhere}
.card .kennz,.kennz{display:inline-flex;align-items:center;gap:6px;margin:0 0 9px;padding:3px 9px;border-radius:999px;border:1px dashed var(--wait);color:var(--wait);font:600 11.5px/1.3 var(--sans)}
.card .hinweis,.hinweis{display:flex;align-items:center;gap:6px;margin:0 0 10px;color:var(--muted);font-size:13px}
.hinweis .ic{width:15px;height:15px}
.card .zusatz{margin:-6px 0 11px;font:12px/1.35 var(--mono);color:var(--muted)}
.acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
@container (min-width:470px){.acts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.acts .btn{min-width:0}
.btn small.empf{display:block;font:600 10px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.btn.opt{flex-direction:column;gap:2px;padding:6px 10px}
.cdone{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.cdone .cwort{flex:1;min-width:0;font-weight:600;color:var(--muted)}
.cdone .cwort b{color:var(--text);font-weight:600}
.mehr{width:100%}
.empty{padding:18px 16px;border-radius:12px;border:1px dashed var(--line-2);color:var(--muted);text-align:center}
.empty p{margin:0}
.empty .empty-t{font:600 15px/1.3 var(--display);letter-spacing:.04em;color:var(--text);margin-bottom:4px}
/* Heute */
.top3,.plan,.runlist{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.top3 li,.plan li,.runlist li{border-top:1px solid var(--line)}
.top3 li:first-child,.plan li:first-child,.runlist li:first-child{border-top:0}
.liste-leer{padding:12px;color:var(--muted);font-size:13.5px}
.chk{display:flex;align-items:center;gap:11px;width:100%;min-height:48px;padding:6px 12px;border:0;background:none;text-align:left;transition:transform 120ms var(--ease)}
.chk:active{transform:scale(.99)}
.chk .num{width:14px;font:600 13px/1 var(--mono);color:var(--muted)}
.chk .box{flex:none;width:22px;height:22px;border-radius:6px;border:1.5px solid var(--muted);display:grid;place-items:center;color:var(--bg)}
.chk .box .ic{width:15px;height:15px;stroke-width:2.4;opacity:0}
.chk .ttl{flex:1;min-width:0;font-weight:500;overflow-wrap:anywhere}
.chk[aria-checked=true] .box{background:var(--muted)}
.chk[aria-checked=true] .box .ic{opacity:1}
.chk[aria-checked=true] .ttl{color:var(--muted);text-decoration:line-through}
.chk:disabled{opacity:.6}
.plan li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:44px;padding:6px 12px}
.plan li > span{min-width:0;overflow-wrap:anywhere}
.plan .pt{font:600 13px/1 var(--mono)}
.plan .past{color:var(--muted)}
.plan .nx{font:600 11px/1 var(--mono);color:var(--text);border:1px solid var(--muted);border-radius:8px;padding:3px 6px}
/* Skills */
.skills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.skill{display:flex;align-items:center;gap:9px;min-height:48px;min-width:0;padding:6px 10px;border-radius:10px;border:1px solid var(--line-2);background:var(--panel);
  color:var(--text);font:600 13.5px/1.2 var(--sans);text-align:left;transition:transform 120ms var(--ease)}
.skill .ic{width:18px;height:18px;color:var(--muted)}
.skill:active{transform:scale(.97)}
.skill:disabled{opacity:.6}
@media (hover:hover){.skill:hover{border-color:var(--muted)}}
/* Sprechen (Task 18, Spec 6.7) */
.voice{padding:12px;border-radius:12px;border:1px solid var(--line-2);background:var(--panel)}
.vrow{display:flex;align-items:center;gap:14px}
.mic{position:relative;flex:none;display:grid;place-items:center;width:72px;height:72px;padding:0;border-radius:50%;border:1.5px solid var(--line-2);background:var(--panel-2);
  color:var(--text);transition:transform 120ms var(--ease)}
.mic .ic{position:relative;z-index:1;width:26px;height:26px}
.mic:disabled,.cmic:disabled{color:var(--muted);border-style:dashed}
.vtext{min-width:0;flex:1}
.vstate{margin:0;font:600 14px/1.3 var(--sans)}
.vhint{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.mic:active,.cmic:active{transform:scale(.95)}
.cmic{transition:transform 120ms var(--ease)}
/* Pegel-Anzeige: genau EIN Element je Knopf, nur transform (scale nach echter Lautstärke, sprache.js) – R2/R4; will-change nur, solange es läuft (R6) */
.mic .lvl,.cmic .lvl{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:2px solid var(--text);
  opacity:0;pointer-events:none;transform:scale(.7);transition:transform 90ms var(--ease),opacity 150ms var(--ease)}
.cmic .lvl{width:36px;height:36px;margin:-18px 0 0 -18px}
.mic[data-v=hoert] .lvl,.cmic[data-v=hoert] .lvl{opacity:.85;will-change:transform}
/* „hört zu“: Mikrofon hell in Textfarbe (Grün bleibt für „arbeitet“) */
.mic[data-v=hoert],.mic[data-v=versteht],.cmic[data-v=hoert],.cmic[data-v=versteht]{border-color:var(--text);color:var(--text)}
.mic[data-v=startet],.cmic[data-v=startet]{border-color:var(--muted)}
.mic[data-v=versteht],.cmic[data-v=versteht]{opacity:.7}
.vout{margin:10px 0 0;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg)}
.vout p{margin:0;font-size:14px}
.vout .who{display:block;font:600 10.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.vout .said + .ans{margin-top:8px}
/* Unterzeile am Zustand („versteht …“, Restzeit): in derselben Zeile – die Zustands-Box darf nicht wachsen, sonst rückt sie am
   iPhone in den Ring (die Szene misst ihren Platz nur beim Layout) */
.st.mitsub .ssub{display:inline}
.galaxy:not(.wide) .st.mitsub{gap:4px;padding:0 6px}
.galaxy:not(.wide) .st.mitsub .sg{display:none}
/* Eingabe „Ins Gehirn“ – iPhone: fest unten */
.composer{position:fixed;z-index:20;left:0;right:0;bottom:0;margin:0;padding:8px var(--pr) max(8px,env(safe-area-inset-bottom)) var(--pl);background:var(--bg);border-top:1px solid var(--line)}
.cbox{max-width:760px;margin:0 auto;display:flex;align-items:flex-end;gap:6px}
.cmic{flex:none;position:relative;display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%;border:1.5px solid var(--line-2);background:var(--panel-2);color:var(--text)}
.cmic .ic{position:relative;z-index:1;width:21px;height:21px}
.field{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;padding:5px 10px 0;border-radius:14px;border:1px solid var(--line-2);background:var(--panel-2)}
.field:focus-within{border-color:var(--muted)}
.field label{font:600 10px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.field textarea{display:block;width:100%;min-height:44px;max-height:132px;resize:none;border:0;outline:0;background:transparent;padding:4px 0 6px;font:16px/1.3 var(--sans);color:var(--text);overflow:hidden}
.field textarea.scroll{overflow-y:auto}
.field textarea::placeholder{color:var(--muted);opacity:1}
.csend{flex:none;display:grid;place-items:center;width:52px;height:48px;padding:0;border-radius:12px;border:1px solid var(--text);background:var(--text);color:var(--bg);transition:transform 120ms var(--ease)}
.csend:active{transform:scale(.95)}
.csend:disabled{opacity:.6}
.csend .ic{width:21px;height:21px;stroke-width:2}
.csend .lbl{display:none}
.ferr{max-width:760px;margin:0 auto 6px;padding:7px 11px;border-radius:10px;border:1px solid rgba(255,77,109,.55);background:rgba(255,77,109,.07);color:var(--text);font-size:13.5px}
/* Läufe heute */
.runlist li{display:grid;grid-template-columns:44px auto minmax(0,1fr);align-items:center;gap:9px;min-height:42px;padding:6px 12px}
.runlist .rt{font:600 13px/1 var(--mono)}
.runlist .rs{display:inline-flex;align-items:center;gap:5px;font:600 12.5px/1 var(--sans);color:var(--muted);white-space:nowrap}
.runlist .rs .ic{width:14px;height:14px;stroke-width:2.2}
.runlist [data-s=läuft] .rs{color:var(--go)}
.runlist [data-s=fehlt] .rs,.runlist [data-s=steht] .rs{color:var(--stop)}
.runlist .rn{font-size:12.5px;color:var(--muted);min-width:0;overflow-wrap:anywhere}
/* Schalter (an/aus) */
.schalter{display:inline-flex;flex:none;align-items:center;justify-content:center;gap:9px;min-height:44px;min-width:56px;padding:0 6px;border-radius:999px;border:1px solid transparent;background:none;color:var(--text)}
.schalter .trk{position:relative;flex:none;width:40px;height:24px;border-radius:12px;border:1px solid var(--line-2);background:var(--bg)}
.schalter .thumb{position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--muted);transition:transform 200ms var(--ease)}
.schalter[aria-checked=true] .trk{border-color:var(--go)}
.schalter[aria-checked=true] .thumb{background:var(--go);transform:translateX(16px)}
.schalter:disabled{opacity:.5}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 13px;border-radius:10px;border:1px solid var(--line-2);
  background:var(--panel);color:var(--text);font:600 13.5px/1.1 var(--sans);text-align:center;transition:transform 120ms var(--ease)}
.btn .ic{width:17px;height:17px}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.55}
@media (hover:hover){.btn:not(:disabled):hover{border-color:var(--muted)}}
.btn.primary{background:var(--text);border-color:var(--text);color:var(--bg)}
.btn.line{background:transparent;border-color:var(--muted)}
.btn.quiet{color:var(--muted)}
.btn.danger{background:var(--stop);border-color:var(--stop);color:var(--bg)}
.btn.small{padding:0 11px;font-size:13px}
.btn.wide{width:100%}
.btn.gross{min-height:56px;font-size:16px}
.xbtn{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:10px;border:1px solid var(--line-2);background:var(--panel);color:var(--text);transition:transform 120ms var(--ease)}
.xbtn:active{transform:scale(.95)}
.xbtn .ic{width:18px;height:18px}

/* ---------- Hinweis-Karte ---------- */
.notice{position:fixed;z-index:40;left:var(--nl,12px);width:var(--nw,calc(100% - 24px));bottom:var(--nb,100px);pointer-events:none}
.ncard{pointer-events:auto;display:flex;align-items:center;gap:8px;padding:8px 8px 8px 14px;border-radius:14px;border:1px solid var(--line-2);background:var(--panel-2);
  box-shadow:0 16px 40px rgba(0,0,0,.6);animation:pop 250ms var(--ease);transition:opacity 200ms var(--ease),transform 200ms var(--ease)}
.ncard.out{opacity:0;transform:translateY(8px)}
.ntext{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.nk{display:inline-flex;align-items:center;gap:6px;font:600 10.5px/1.2 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nk::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted)}
.ncard[data-tone=go] .nk::before{background:var(--go)}
.ncard[data-tone=wait] .nk::before{background:transparent;border:2px solid var(--wait);width:9px;height:9px}
.ncard[data-tone=stop] .nk::before{background:var(--stop)}
.nm{font:600 14.5px/1.3 var(--sans);overflow-wrap:anywhere}
.nmeta{font:11.5px/1.3 var(--mono);color:var(--muted);overflow-wrap:anywhere}
.ncard .btn{flex:none}

/* ---------- Fenster (Blatt / Dialog) ---------- */
dialog{padding:0;border:0;background:transparent;color:var(--text);max-width:none;max-height:none;overflow:visible}
dialog::backdrop{background:rgba(3,5,9,.74)}
.panel{position:relative;background:var(--panel-2);border:1px solid var(--line-2);box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:auto;overscroll-behavior:contain}
dialog.sheet,dialog.modal{position:fixed;inset:auto 0 0 0;margin:0;width:100%}
dialog.sheet .panel,dialog.modal .panel{max-height:90vh;max-height:90dvh;border-radius:20px 20px 0 0;border-bottom:0;padding:0 var(--pr) max(18px,env(safe-area-inset-bottom)) var(--pl)}
dialog[open] .panel{animation:rise 340ms var(--ease)}
.grab{width:42px;height:4px;border-radius:2px;background:var(--line-2);margin:8px auto 0}
.phead{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:12px;padding:12px 0;background:var(--panel-2);border-bottom:1px solid var(--line)}
.porb{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:var(--text);border:1px solid var(--line-2);background:var(--panel)}
.porb .ic{width:22px;height:22px;stroke-width:1.5}
.porb.coremini{border:1.5px solid var(--muted);font:600 9px/1 var(--display);letter-spacing:.1em}
.ptitle{flex:1;min-width:0}
.kick{margin:0;font:600 11px/1.3 var(--display);letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.ptitle h2{margin:2px 0 1px;font:600 21px/1.15 var(--display);letter-spacing:.02em;overflow-wrap:anywhere}
.pmeta{margin:0;font:11.5px/1.3 var(--mono);color:var(--muted)}
.intro{margin:14px 0 0}
.blk h3{margin:20px 0 8px;font:600 11.5px/1.2 var(--display);letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.blk > p{margin:0;color:var(--muted)}
.blk > p + p{margin-top:6px}
.agrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.agent{display:flex;flex-direction:column;min-height:58px;border-radius:8px;overflow:hidden;background:var(--panel);border:1px solid var(--line-2)}
.agent .hd{display:block;padding:5px 9px 4px;background:var(--line);font:600 12.5px/1.2 var(--display);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agent .bd{flex:1;display:flex;align-items:center;gap:7px;padding:6px 9px 2px;font-size:13px;color:var(--muted)}
.agent .zl{padding:0 9px 6px;font:11px/1.3 var(--mono);color:var(--muted)}
.agent[data-st=arbeitet]{border-color:var(--go)}
.agent[data-st=arbeitet] .bd{color:var(--go)}
.agent[data-st=wartet]{border-color:var(--wait)}
.agent[data-st=wartet] .bd{color:var(--wait)}
.agent[data-st=pausiert] .bd{color:var(--stop)}
.adot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--muted)}
.adot[data-st=arbeitet]{background:var(--go)}
.adot[data-st=wartet]{width:10px;height:10px;background:transparent;border:2px solid var(--wait)}
.adot[data-st=pausiert]{background:var(--stop)}
.alist,.loglist,.setlist,.dlist{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.loglist li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;padding:9px 12px;border-top:1px solid var(--line)}
.loglist li:first-child{border-top:0}
.loglist .lid{font:11px/1.5 var(--mono);color:var(--muted)}
.loglist .ltxt{font-weight:600;overflow-wrap:anywhere}
.loglist .lto{grid-column:2;font:12.5px/1.35 var(--sans);color:var(--muted);overflow-wrap:anywhere}
.loglist li[data-art=fehler] .lid{color:var(--stop)}
.checks{list-style:none;padding:0;margin:6px 0}
.checks li{position:relative;padding-left:22px;margin:5px 0}
.checks li::before{content:"✓";position:absolute;left:2px;color:var(--muted);font-weight:700}
.kz{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kz div{min-width:0;padding:9px 10px 10px;border-radius:12px;border:1px solid var(--line);background:var(--panel)}
.kz dt{font:11px/1.25 var(--sans);color:var(--muted)}
.kz dd{margin:5px 0 0;font:600 19px/1.1 var(--mono);font-variant-numeric:tabular-nums}
.kz dd.warn{color:var(--wait)}
.kz dd.live{color:var(--go)}
.setlist li,.dlist li{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 12px;border-top:1px solid var(--line)}
.setlist li:first-child,.dlist li:first-child{border-top:0}
.setlist .sl,.dlist .sl{flex:1;min-width:0}
.setlist .sl b,.dlist .sl b{display:block;font-weight:600;overflow-wrap:anywhere}
.setlist .sl span,.dlist .sl span{display:block;font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.setlist input[type=time]{min-height:44px;padding:0 10px;border-radius:10px;border:1px solid var(--line-2);background:var(--panel);font:16px var(--mono);color:var(--text)}
.zeitpaar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.dlist .diese{color:var(--go)}
.pccode{margin:10px 0 4px;padding:12px;border-radius:12px;border:1px solid var(--line-2);background:var(--panel);text-align:center}
.pccode b{display:block;font:600 28px/1.2 var(--mono);letter-spacing:.2em;overflow-wrap:anywhere}
.pccode span{font:12px/1.3 var(--mono);color:var(--muted)}
.meld{margin:8px 0 0;font-size:13.5px;color:var(--muted)}
.meld.fehler{color:var(--stop)}
.knopfzeile{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.skrow{display:flex;align-items:center;gap:4px;border-top:1px solid var(--line)}
.skrow:first-child{border-top:0}
.skchk{display:flex;flex:1;min-width:0;align-items:center;gap:11px;min-height:48px;padding:6px 12px;border:0;background:none;text-align:left}
.skchk .box{flex:none;width:22px;height:22px;border-radius:6px;border:1.5px solid var(--muted);display:grid;place-items:center;color:var(--bg)}
.skchk .box .ic{width:15px;height:15px;stroke-width:2.4;opacity:0}
.skchk[aria-checked=true] .box{background:var(--text);border-color:var(--text)}
.skchk[aria-checked=true] .box .ic{opacity:1}
.skchk:disabled{color:var(--muted)}
.skchk:disabled .box{border-style:dashed}
.skrow .xbtn{margin-right:6px}
.skrow .xbtn:disabled{opacity:.35}
.skwrap{border:1px solid var(--line);border-radius:12px;overflow:hidden}
/* Karten-Blatt (Ansehen) */
.prose{padding:8px 0 4px}
.prose .lead{margin:10px 0;font:500 16px/1.5 var(--sans);overflow-wrap:anywhere}
.volltext{margin:10px 0 0;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--panel);white-space:pre-wrap;overflow-wrap:anywhere;font:15px/1.5 var(--sans)}
.volltext.fremd{border-style:dashed;border-color:rgba(255,176,0,.55)}
.src{margin:12px 0 0;font:11.5px/1.4 var(--mono);color:var(--muted)}
.optionen{display:grid;gap:8px;margin:14px 0 0}
.chform{display:flex;flex-direction:column;gap:8px;margin:16px 0 0;padding:12px;border-radius:12px;border:1px solid var(--line-2);background:var(--panel)}
.chform label{font-weight:600}
.chform textarea,.chform input{min-height:88px;resize:vertical;padding:10px 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg);font:16px/1.4 var(--sans);color:var(--text)}
.chform input{min-height:48px}
.chform textarea::placeholder,.chform input::placeholder{color:var(--muted);opacity:1}
.chform textarea:focus,.chform input:focus{outline:none;border-color:var(--muted)}
.dacts{position:sticky;bottom:0;z-index:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;padding:14px 0 2px;margin-top:8px;background:var(--panel-2);border-top:1px solid var(--line)}
/* Frage-Fenster (Fortsetzen, Face ID, Thema …) */
.dlg-ic{width:52px;height:52px;margin:22px 0 8px;border-radius:50%;display:grid;place-items:center;color:var(--text);border:1px solid var(--line-2)}
.dlg-ic[data-tone=stop]{color:var(--stop);border-color:rgba(255,77,109,.6)}
#frageDlg[data-tone=stop] .panel{border-color:rgba(255,77,109,.5)}
#frageDlg h2{margin:0 0 6px;font:600 21px/1.2 var(--display);letter-spacing:.03em}
#frageDlg p{margin:0}
#frageDlg .chform{margin-top:14px}
.dlg-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0 4px}

/* ---------- Anmeldung ---------- */
.anmelden{min-height:100vh;min-height:100dvh;display:grid;place-items:center;
  padding:max(24px,env(safe-area-inset-top)) var(--pr) max(24px,env(safe-area-inset-bottom)) var(--pl)}
.lbox{width:min(380px,100%);display:flex;flex-direction:column;gap:14px}
.lbrand{text-align:center;margin-bottom:8px}
.lbrand .lring{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center}
.lbrand .lring i{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--text);display:block}
.lbrand h1{margin:0;font:600 24px/1 var(--display);letter-spacing:.22em;text-transform:uppercase;padding-left:.22em}
.lbrand p{margin:6px 0 0;color:var(--muted);font-size:13px}
.oder{display:flex;align-items:center;gap:10px;color:var(--muted);font:600 11px/1 var(--display);letter-spacing:.15em;text-transform:uppercase}
.oder::before,.oder::after{content:"";flex:1;height:1px;background:var(--line-2)}
.lform{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:14px;border:1px solid var(--line-2);background:var(--panel)}
.lform label{font:600 11px/1.2 var(--display);letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.lform input{min-height:48px;padding:0 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg);font:16px var(--sans);color:var(--text)}
.lform input:focus{outline:none;border-color:var(--muted)}
.lmeld{margin:0;padding:9px 12px;border-radius:10px;border:1px solid rgba(255,77,109,.55);background:rgba(255,77,109,.07);font-size:14px}
.lmeld.ok{border-color:var(--line-2);background:var(--panel)}
.lhint{margin:0;color:var(--muted);font-size:12.5px;text-align:center}

/* ---------- ab 640 px: Blatt rechts, Dialog mittig ---------- */
@media (min-width:640px){
  .grab{display:none}
  dialog.sheet{inset:0 0 0 auto;width:min(450px,100%);height:100%}
  dialog.sheet .panel{height:100vh;height:100dvh;max-height:none;border-radius:20px 0 0 20px;border-bottom:1px solid var(--line-2);border-right:0;padding:0 max(22px,env(safe-area-inset-right)) 22px 22px}
  dialog.sheet[open] .panel{animation-name:slidein}
  dialog.modal{inset:0;margin:auto;width:min(640px,calc(100% - 32px));height:fit-content}
  dialog.modal.small{width:min(440px,calc(100% - 32px))}
  dialog.modal .panel{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);border-radius:20px;border-bottom:1px solid var(--line-2);padding:0 26px 22px}
  .phead{padding-top:18px}
}

/* ---------- iPhone quer: Ring links fest, rechts Kopf + Reiter-Inhalt, Eingabe unten rechts (verdeckt nichts) ---------- */
@media (orientation:landscape) and (max-height:520px) and (min-width:560px){
  .app{display:grid;max-width:none;height:100vh;height:100dvh;overflow:hidden;margin:0;padding:0 var(--pr) 0 var(--pl);
    grid-template-columns:minmax(0,52%) minmax(0,1fr);grid-template-rows:minmax(0,1fr) var(--dock);
    grid-template-areas:"center rest" "center dockspace";column-gap:14px}
  .center{grid-area:center;grid-row:1 / -1;height:100vh;height:100dvh}
  .galaxy{flex:1 1 auto;margin:0;aspect-ratio:auto;border:0}
  .galaxy .legend{display:none}
  /* Kopf liegt hier im rechten Scrollbereich (per Skript verschoben) und scrollt mit – wie hochkant */
  .rest{grid-area:rest;display:block;overflow-y:auto;overscroll-behavior:contain;min-height:0;padding-bottom:12px}
  .rest > .top{padding-bottom:6px}
  .tabs{top:0}
  .pane,.runs{margin-top:10px}
  .composer{left:var(--dl,50%);width:var(--dw,50%);right:auto;padding-left:0;padding-right:0}
  .cbox{max-width:none}
  .field{padding-top:0}
  .field label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .status{min-height:26px;font-size:11.5px}
}

/* ---------- PC: drei Spalten ---------- */
@media (min-width:1024px) and (min-height:560px){
  .app{display:grid;max-width:none;height:100vh;height:100dvh;margin:0;padding:0 20px 14px;
    grid-template-columns:clamp(300px,26vw,340px) minmax(0,1fr) clamp(300px,26vw,340px);grid-template-rows:auto minmax(0,1fr);
    grid-template-areas:"top top top" "left center right";gap:10px 18px}
  .top{grid-area:top;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"brand status tools";gap:14px;padding-top:12px}
  .status{justify-self:center}
  .clock{display:inline}
  .tabs{display:none}
  .side-l{grid-area:left;display:flex;flex-direction:column;gap:20px;overflow-y:auto;min-height:0;padding:2px 6px 12px 2px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
  .side-r{grid-area:right;display:flex;flex-direction:column;gap:16px;overflow-y:auto;min-height:0;padding:2px 6px 12px 2px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
  .app[data-tab] .pane,.app[data-tab] .runs,.voice{display:block}
  .center{grid-area:center;min-height:0}
  .galaxy{flex:1 1 auto;margin:0;aspect-ratio:auto;border:1px solid var(--line);border-radius:16px}
  .composer{position:static;padding:12px;border:1px solid var(--line-2);border-radius:12px;background:var(--panel)}
  .cbox{max-width:none;flex-wrap:wrap}
  .cmic{display:none}
  .field{flex:1 1 100%;padding:7px 10px 0}
  .field textarea{min-height:44px}
  .csend{flex:1 1 0;width:auto;height:44px;gap:7px;display:inline-flex;align-items:center;justify-content:center;font:600 13.5px/1 var(--sans)}
  .csend .lbl{display:inline}
  .ferr{max-width:none}
  #p-needs,#p-today,#p-skills,#runs{order:0}
}
/* schmaler PC (z. B. 1024 px): engere Abstände, damit der Ring in der Mitte genug Breite hat */
@media (min-width:1024px) and (max-width:1180px) and (min-height:560px){
  .app{column-gap:12px;padding-left:14px;padding-right:14px}
  .side-l,.side-r{padding-right:2px}
}

/* ---------- Messsonde (nur mit ?perf=1, perf-probe.js) ---------- */
.perf-probe{position:fixed;z-index:60;left:max(8px,env(safe-area-inset-left));top:max(8px,env(safe-area-inset-top));
  width:min(330px,calc(100vw - 16px));box-sizing:border-box;padding:10px 12px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line-2)}
.pp-titel{margin:0 0 8px;font:600 12px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pp-knoepfe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pp-knoepfe .btn{padding:0 6px;white-space:normal;text-align:center;line-height:1.15}
.pp-status{margin:8px 0 0;font-size:13px}
.pp-ergebnis{margin-top:6px;font:12px/1.5 var(--mono)}
.pp-zeile{display:flex;justify-content:space-between;gap:10px}
.pp-zeile span{color:var(--muted)}
.perf-probe > .btn{margin-top:8px;width:100%}

/* ---------- Bewegung reduzieren: nur Überblendungen bis 150 ms ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:150ms!important;animation-duration:150ms!important;animation-iteration-count:1!important}
  dialog[open] .panel,dialog.sheet[open] .panel,.ncard{animation-name:fadein!important}
  .ncard.out{transform:none!important}
  .btn:active,.xbtn:active,.halt:active,.gear:active,.tab:active,.skill:active,.chk:active,.csend:active,.mic:active,.cmic:active,.core:active .core-disc,.node:active .orb{transform:none!important}
  .schalter .thumb{transition:none!important}
  @media (hover:hover){.node:hover .orb{transform:none}}
}