/* Look „Konstellation“ (Julians Referenz-Bild 05.10.2026, „JARVIS command center“): tiefes Navy, Haarlinien, kleine Mono-Beschriftungen,
   schmale Display-Schrift, große Uhr mit Sekunden, sehr wenig Farbe (Weiß-Blau, ein Amber-Akzent = „wartet auf dich“).
   Gilt nur mit <html data-look="konstellation">; Mix (stil.css) bleibt unberührt.
   Das Gehirn ist hier die Sternwolke aus konstellation.js (eine Leinwand + Beschriftungs-Knöpfe); der Ring aus szene.js ist verborgen.
   Aufbau wie look-neon.css: :where([data-look=konstellation]) ersetzt Grundregeln (gleiche Gewichtung wie stil.css, Zustands-Regeln
   gewinnen weiter), volle Gewichtung nur, wo die Grundregeln stärker sind. Keine Animationen, kein Weichzeichner.
   Zustandsfarben: arbeitet = Mint, wartet = Amber (immer mit Ring und Zahl), Fehler/angehalten = Rot. */

:root[data-look=konstellation]{
  --bg:#050912; --panel:#0a1020; --panel-2:#0d1428; --line:#131b2e; --line-2:#1e2942;
  --text:#e4eaff; --muted:#8d99bb; --dim:#4a5678;
  --go:#3ee6b0; --wait:#ffb547; --stop:#ff5d6c; --accent:#7ea2ff;
  --cond:"Avenir Next Condensed","Bahnschrift Condensed","Bahnschrift SemiCondensed","DIN Condensed","Roboto Condensed","Arial Narrow",'Chakra Petch',sans-serif;
  --display:var(--cond);
}

/* ---------- Grund: Navy, zur Mitte etwas heller (still) ---------- */
:where([data-look=konstellation]) body{
  background:radial-gradient(1100px 760px at 50% 36%,#0c1631 0%,#081024 42%,#050912 100%) fixed,var(--bg)}
:where([data-look=konstellation]) :focus-visible{outline-color:var(--accent)}

/* ---------- Kopf ---------- */
:where([data-look=konstellation]) .brand h1{font:400 25px/1 var(--cond);font-stretch:condensed;letter-spacing:.14em}
:where([data-look=konstellation]) .brand p{margin-top:4px;font:500 9.5px/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
:where([data-look=konstellation]) .status{border-radius:6px;border-color:var(--line-2);background:rgba(8,13,26,.72);font:500 10.5px/1.2 var(--mono);letter-spacing:.06em}
:where([data-look=konstellation]) .status .s-run{font-size:10.5px}
[data-look=konstellation] .clock{display:none}
:where([data-look=konstellation]) .kst-uhr{display:none}
:where([data-look=konstellation]) .halt{border-radius:6px;border-width:1px;font:500 11px/1 var(--mono);letter-spacing:.12em}
:where([data-look=konstellation]) .gear{border-radius:6px;background:rgba(10,16,32,.7)}
:where([data-look=konstellation]) .haltbar{border-radius:6px}

/* ---------- Gehirn: Sternwolke statt Ring ---------- */
[data-look=konstellation] .galaxy{aspect-ratio:auto;border:0;background:none}
[data-look=konstellation] .ring,[data-look=konstellation] .readout{display:none}
:where([data-look=konstellation]) .ringbox{flex:none;aspect-ratio:375/392;
  background:radial-gradient(closest-side at 50% 50%,rgba(60,96,200,.16),rgba(40,70,170,.06) 55%,transparent 100%)}
:where([data-look=konstellation]) :is(.kst-cv,.kst-gl){position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transition:opacity 250ms var(--ease)}
[data-look=konstellation] .app.kalt :is(.kst-cv,.kst-gl){opacity:0}
/* WebGL zeichnet (data-kstgl=an) – sonst die Canvas-2D-Wolke (kein WebGL, Kontext verloren) */
[data-look=konstellation] .galaxy[data-kstgl=an] .kst-cv,[data-look=konstellation] .galaxy:not([data-kstgl=an]) .kst-gl{display:none}
:where([data-look=konstellation]) .kst-labs{position:absolute;inset:0;pointer-events:none}
/* Beschriftung = Knopf mit 44 px Tippfläche, sichtbar nur der kleine Mono-Chip */
:where([data-look=konstellation]) .kst-lab{position:absolute;display:flex;align-items:center;min-height:44px;min-width:44px;padding:0 3px;border:0;background:none;
  color:var(--muted);pointer-events:auto}
:where([data-look=konstellation]) .kst-lab:focus-visible{outline:none}
:where([data-look=konstellation]) .kst-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 6px;border-radius:4px;border:1px solid rgba(126,162,255,.16);
  background:rgba(5,9,18,.74);font:500 10.5px/14px var(--mono);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
:where([data-look=konstellation]) .kst-lab.priv .kst-chip{border-style:dashed;border-color:rgba(141,153,187,.4)}
:where([data-look=konstellation]) .kst-nr{color:var(--muted);opacity:.8}
/* wenig Platz (z. B. iPhone quer): Beschriftungen ohne Nummer, damit sich die Tippflächen nicht überlappen (konstellation.js, M9) */
[data-look=konstellation] .galaxy.kst-kompakt .kst-nr{display:none}
:where([data-look=konstellation]) .kst-dot{flex:none;width:5px;height:5px;border-radius:50%;background:var(--dim)}
:where([data-look=konstellation]) .kst-zahl{min-width:17px;height:14px;padding:0 4px;border-radius:7px;background:var(--wait);color:var(--bg);font:700 10px/14px var(--mono);letter-spacing:0;text-align:center}
[data-look=konstellation] .galaxy[data-kstlab=short] .kst-nl,[data-look=konstellation] .galaxy[data-kstlab=long] .kst-ns{display:none}
[data-look=konstellation] .kst-lab.hot .kst-chip{color:var(--text);border-color:rgba(62,230,176,.5)}
[data-look=konstellation] .kst-lab.hot .kst-dot{background:var(--go);box-shadow:0 0 6px rgba(62,230,176,.8)}
[data-look=konstellation] .kst-lab.wait .kst-chip{color:var(--text);border-color:rgba(255,181,71,.55)}
[data-look=konstellation] .kst-lab.wait .kst-dot{width:9px;height:9px;background:transparent;border:2px solid var(--wait)}
@media (hover:hover){[data-look=konstellation] .kst-lab:hover .kst-chip{color:var(--text);border-color:var(--accent)}}
[data-look=konstellation] .kst-lab:focus-visible .kst-chip{color:var(--text);outline:2px solid var(--accent);outline-offset:2px}
[data-look=konstellation] .kst-lab:active .kst-chip{transform:scale(.96)}
/* Kern: unsichtbare Tippfläche über der hellen Mitte (das Glühen malt die Leinwand) */
[data-look=konstellation] .core-deco,[data-look=konstellation] .core-disc{display:none}
:where([data-look=konstellation]) .core{border-radius:50%}
/* großer Name unter der Wolke (öffnet wie die Mitte den Kern) */
:where([data-look=konstellation]) .kst-name{flex:none;margin:-6px auto 0;padding:0 12px 8px;text-align:center;cursor:pointer;
  -webkit-user-select:none;user-select:none}
:where([data-look=konstellation]) .kst-name b{display:block;padding-left:.2em;font:300 46px/1 var(--cond);font-stretch:condensed;letter-spacing:.2em;text-transform:uppercase;
  color:#eef2ff;text-shadow:0 0 22px rgba(126,162,255,.35)}
:where([data-look=konstellation]) .kst-sub{display:block;margin-top:6px;font:500 9.5px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
/* Zustände als Chips (wie die Vorlage: Idle · Listening · Working …), nur der echte hervorgehoben */
:root[data-look=konstellation] .galaxy .states{position:static;transform:none;width:auto;margin:0 auto;padding:2px 8px 8px;gap:5px;border:0;border-radius:0;background:none;
  flex-wrap:wrap;justify-content:center}
:root[data-look=konstellation] .galaxy .states .st,:root[data-look=konstellation] .galaxy .states .st:not([aria-current=true]){order:0;flex:none;width:auto;height:auto;
  min-height:22px;padding:0 8px;gap:5px;border-radius:4px;border:1px solid var(--line-2);background:rgba(8,13,26,.6);color:var(--muted);
  font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
:root[data-look=konstellation] .galaxy .states .st:not([aria-current=true]) > span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
:root[data-look=konstellation] .galaxy .states .st:not([aria-current=true]) > small{display:none}
:root[data-look=konstellation] .galaxy .states .st[aria-current=true]{color:#fff;border-color:rgba(126,162,255,.7);background:rgba(126,162,255,.16)}
:root[data-look=konstellation] .galaxy .states .st[data-s=run][aria-current=true]{color:var(--go);border-color:var(--go);background:rgba(62,230,176,.1)}
:root[data-look=konstellation] .galaxy .states .st[data-s=wait][aria-current=true]{color:var(--wait);border-color:var(--wait);background:rgba(255,181,71,.1)}
:root[data-look=konstellation] .galaxy .states .st:is([data-s=error],[data-s=halt])[aria-current=true]{color:var(--stop);border-color:var(--stop);background:rgba(255,93,108,.1)}
/* Legende: eine Mono-Zeile */
:root[data-look=konstellation] .legend{padding:0 10px 8px;gap:3px 12px;border:0;background:none;font:500 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
[data-look=konstellation] .legend :is(.lg-firma,.lg-agent),[data-look=konstellation] .legend .lg-priv .lg-big{display:none}
:where([data-look=konstellation]) .lg-priv i{border-top-color:var(--muted)}

/* ---------- Reiter und Überschriften ---------- */
:where([data-look=konstellation]) .tabs{background:rgba(5,9,18,.94);border-bottom-color:var(--line)}
:where([data-look=konstellation]) .tab{border-radius:6px;font:500 11.5px/1.1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
[data-look=konstellation] .tab[aria-selected=true]{color:#fff;background:rgba(126,162,255,.1);border-color:rgba(126,162,255,.45)}
:where([data-look=konstellation]) .ph{padding-bottom:5px;border-bottom:1px solid var(--line)}
:where([data-look=konstellation]) .ph h2{font:500 10.5px/1.2 var(--mono);letter-spacing:.18em;color:var(--muted)}
:where([data-look=konstellation]) .sub{font-size:12.5px}
:where([data-look=konstellation]) .blk-h{font:500 10px/1.2 var(--mono);letter-spacing:.18em;color:var(--muted)}
:where([data-look=konstellation]) .pill{border-radius:4px;font-size:12px}

/* ---------- Karten, Listen, Knöpfe: Haarlinien, kleine Rundung ---------- */
:where([data-look=konstellation]) .card{border-radius:6px;border-color:var(--line-2);background:rgba(10,16,32,.78)}
:where([data-look=konstellation]) .card.erledigt{background:rgba(8,13,26,.6)}
:where([data-look=konstellation]) .card h3{font:600 15px/1.3 var(--sans);letter-spacing:0}
:where([data-look=konstellation]) .card-meta{font-size:10.5px}
:where([data-look=konstellation]) .card-meta .tag{font:500 10px/1.2 var(--mono);letter-spacing:.14em}
:where([data-look=konstellation]) .btn{border-radius:6px;font-weight:500}
[data-look=konstellation] .btn.primary{background:rgba(126,162,255,.16);border-color:rgba(126,162,255,.6);color:#fff}
@media (hover:hover){[data-look=konstellation] .btn.primary:not(:disabled):hover{background:rgba(126,162,255,.26)}}
:where([data-look=konstellation]) .xbtn{border-radius:6px}
:where([data-look=konstellation]) .empty{border-radius:6px}
:where([data-look=konstellation]) .empty .empty-t{font:500 12px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase}
:where([data-look=konstellation]) :is(.top3,.plan,.runlist){border-radius:6px;border-color:var(--line-2);background:rgba(10,16,32,.6)}
:where([data-look=konstellation]) .plan .nx{border-radius:4px}
:where([data-look=konstellation]) .skills{gap:6px}
:where([data-look=konstellation]) .skill{min-height:44px;border-radius:5px;border-color:var(--line-2);background:rgba(10,16,32,.7);font:500 12px/1.25 var(--mono);letter-spacing:.02em}
:where([data-look=konstellation]) .skill::after{content:"→";margin-left:auto;padding-left:4px;color:var(--dim)}
@media (hover:hover){[data-look=konstellation] .skill:hover{border-color:var(--accent)}}
:where([data-look=konstellation]) .voice{border-radius:6px;background:rgba(10,16,32,.7)}
:where([data-look=konstellation]) .mic{width:60px;height:60px}
:where([data-look=konstellation]) .vstate{font:500 12px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase}
:where([data-look=konstellation]) .vout{border-radius:6px}

/* ---------- Eingabe „Ins Gehirn“ ---------- */
:where([data-look=konstellation]) .composer{background:rgba(5,9,18,.96);border-top-color:var(--line-2)}
:where([data-look=konstellation]) .field{border-radius:6px;background:#080d1b}
[data-look=konstellation] .field:focus-within{border-color:var(--accent)}
:where([data-look=konstellation]) .field label{font:500 9.5px/1 var(--mono);letter-spacing:.16em}
:where([data-look=konstellation]) .csend{border-radius:6px;border-color:rgba(126,162,255,.6);background:rgba(126,162,255,.16);color:#fff}
:where([data-look=konstellation]) .ferr{border-radius:6px}

/* ---------- Hinweis-Karte, Blätter, Fenster ---------- */
:where([data-look=konstellation]) .ncard{flex-wrap:wrap;border-radius:8px;background:#0c1326}
:where([data-look=konstellation]) .ntext{min-width:150px}
:where([data-look=konstellation]) .nk{font:500 10px/1.2 var(--mono)}
:where([data-look=konstellation]) dialog::backdrop{background:rgba(2,4,10,.74)}
:where([data-look=konstellation]) .panel{background:#0b1122;border-color:var(--line-2)}
:where([data-look=konstellation]) .phead{background:#0b1122}
:where([data-look=konstellation]) .dacts{background:#0b1122}
:where([data-look=konstellation]) .kick{font:500 10px/1.3 var(--mono);letter-spacing:.16em}
:where([data-look=konstellation]) .ptitle h2{font:400 26px/1.1 var(--cond);font-stretch:condensed;letter-spacing:.06em}
:where([data-look=konstellation]) .porb{border-radius:6px}
:where([data-look=konstellation]) .porb.coremini{font:500 9px/1 var(--mono)}
:where([data-look=konstellation]) .blk h3{font:500 10.5px/1.2 var(--mono);letter-spacing:.16em}
:where([data-look=konstellation]) .agent{border-radius:5px}
:where([data-look=konstellation]) .agent .hd{font:500 11.5px/1.2 var(--mono)}
:where([data-look=konstellation]) :is(.alist,.loglist,.setlist,.dlist,.skwrap){border-radius:6px}
:where([data-look=konstellation]) .kz div{border-radius:6px}

/* ---------- iPhone quer: Wolke links, Name und Zustände darunter ---------- */
@media (orientation:landscape) and (max-height:520px) and (min-width:560px){
  :where([data-look=konstellation]) .ringbox{flex:1 1 auto;aspect-ratio:auto}
  :where([data-look=konstellation]) .kst-name{margin-top:-4px;padding-bottom:4px}
  :where([data-look=konstellation]) .kst-name b{font-size:28px}
  :where([data-look=konstellation]) .kst-sub{display:none}
  :root[data-look=konstellation] .galaxy .states{padding-bottom:max(6px,env(safe-area-inset-bottom))}
  /* quer reicht die Höhe nur für eine Zeile: der echte Zustand als Chip, die anderen als Punkte (wie Mix am iPhone) */
  :root[data-look=konstellation] .galaxy .states .st:not([aria-current=true]){min-height:0;width:6px;height:6px;padding:0;border:0;border-radius:50%;background:var(--dim)}
  :root[data-look=konstellation] .galaxy .states .st:not([aria-current=true]) > span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  :root[data-look=konstellation] .galaxy .states .st[aria-current=true]{order:-1}
  :root[data-look=konstellation] .galaxy .states{align-items:center}
  :root[data-look=konstellation] .legend{display:none}
}

/* ---------- PC: drei Spalten wie die Vorlage (links Lage, Mitte Wolke, rechts Skills und Sprechen) ---------- */
@media (min-width:1024px) and (min-height:560px){
  :where([data-look=konstellation]) .app{grid-template-columns:clamp(270px,22vw,320px) minmax(0,1fr) clamp(270px,22vw,320px);column-gap:24px}
  :where([data-look=konstellation]) .top{padding-bottom:4px}
  :where([data-look=konstellation]) .brand h1{font-size:30px}
  [data-look=konstellation] .kst-uhr{display:inline-flex;align-items:baseline;padding:0 6px 0 2px;font:300 38px/1 var(--cond);font-stretch:condensed;letter-spacing:.04em;
    color:#eef2ff;font-variant-numeric:tabular-nums}
  :where([data-look=konstellation]) .kst-s{font-size:19px;color:var(--accent)}
  :where([data-look=konstellation]) .galaxy{border:0;border-radius:0;background:none}
  :where([data-look=konstellation]) .ringbox{flex:1 1 auto;aspect-ratio:auto}
  :where([data-look=konstellation]) .kst-name b{font-size:58px}
  :where([data-look=konstellation]) .kst-sub{font-size:10px}
  :where([data-look=konstellation]) .composer{border-radius:6px;background:rgba(10,16,32,.7)}
  :where([data-look=konstellation]) .side-l,:where([data-look=konstellation]) .side-r{gap:18px}
}