/* Looks wie im Deploy-Gate: Konsole (dunkel) und Klar (hell). Schriften: erst die eigenen, dann die des Systems. Nichts kommt von Fremdquellen (CSP). */
:root[data-look=konsole]{
  --bg:#0B111C;--surface:#141C2B;--surface2:#1A2438;--hover:#1E2942;
  --ink:#E8EDF5;--ink2:#A9B4C6;--ink3:#7B889D;
  --frame:#26334A;--line:#33425E;--line2:#222D42;
  --chrome:#0F1626;--chrome-ink:#AAB6CA;--chrome-hover:#1A2438;--chrome-on:#7AA2FF;--chrome-line:#1F2A40;
  --brand:#6B7CFF;--brand-ink:#fff;--brand-bg:#222B52;--brand-grad:linear-gradient(90deg,#6B6BFF,#19B6E0);
  --block:#FF8080;--block-bg:#3A1F28;--block-line:#6B3340;
  --warn:#F2B34C;--warn-bg:#3A2E16;--ok:#4CD39A;--ok-bg:#15382C;
  --ai:#B79CFF;--ai-bg:#2A2150;--off:#8794A8;--off-bg:#212B3E;
  --code:#0A0F19;--codeink:#C9D4E6;--hit:#40202A;--lamp-off:#2B364B;
  --r:12px;--bw:1px;--shadow:0 1px 0 rgba(255,255,255,.03) inset;
  --disp:'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif;
  --body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Martian Mono',ui-monospace,Consolas,monospace;
  --htrans:none;--hls:-.01em;--h1:28px;--h2:17px;--h3:14.5px;--base:14.5px;--ctrans:none;--cls:0;--csize:12px;
}
:root,[data-look=klar]{
  --bg:#E8ECF0;--surface:#FFFFFF;--surface2:#F6F8FA;--hover:#F1F4F7;
  --ink:#16202C;--ink2:#4A586A;--ink3:#7A8797;
  --frame:#D3DAE2;--line:#CBD3DC;--line2:#E6EAEF;
  --chrome:#111A25;--chrome-ink:#C4CFDC;--chrome-hover:#1C2937;--chrome-on:#6E93FF;--chrome-line:#243244;
  --brand:#1F4FD8;--brand-ink:#fff;--brand-bg:#E4EBFC;--brand-grad:#1F4FD8;
  --block:#C62F2F;--block-bg:#FBE9E9;--block-line:#E2B4B4;
  --warn:#A86A06;--warn-bg:#FBF1DC;--ok:#2B7A4B;--ok-bg:#E3F3EA;
  --ai:#6A44B5;--ai-bg:#EEE8F9;--off:#8A95A3;--off-bg:#EEF1F4;
  --code:#0F1722;--codeink:#C9D4E3;--hit:#3A1D24;--lamp-off:#3A4452;
  --r:8px;--bw:1px;--shadow:none;
  --disp:'Bricolage Grotesque','Instrument Sans',system-ui,sans-serif;
  --body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Martian Mono',ui-monospace,Consolas,monospace;
  --htrans:none;--hls:-.01em;--h1:28px;--h2:17px;--h3:14.5px;--base:14.5px;--ctrans:none;--cls:0;--csize:12px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:400 var(--base)/1.5 var(--body)}
h1,h2,h3{font-family:var(--disp);margin:0;letter-spacing:var(--hls);text-transform:var(--htrans)}
h1{font-size:var(--h1);font-weight:700;line-height:1.1}
h2{font-size:var(--h2);font-weight:700}
h3{font-size:var(--h3);font-weight:700}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
[data-look=konsole] a{color:#8FB0FF}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
[data-look=konsole] :focus-visible{outline-color:#8FB0FF}
.muted{color:var(--ink2)}.faint{color:var(--ink3)}
.mono{font-family:var(--mono);font-size:12px}

/* Schale: Seitenleiste wie im Gate */
.app{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.side{background:var(--chrome);color:var(--chrome-ink);padding:20px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto}
.logo{display:flex;align-items:center;gap:10px;padding:2px 8px 18px;font:700 19px var(--disp);color:#fff;letter-spacing:var(--hls);text-transform:var(--htrans);white-space:nowrap}
.logo i{width:26px;height:26px;border-radius:var(--r);background:repeating-linear-gradient(135deg,#4C7DFF 0 5px,#fff 5px 10px);flex:none}
.nav h4{margin:14px 10px 6px;font:600 11px var(--body);letter-spacing:.08em;text-transform:uppercase;color:#6F8099}
.nav a{display:flex;justify-content:space-between;align-items:center;padding:9px 10px;margin-bottom:2px;border-radius:var(--r);color:var(--chrome-ink);font-weight:500}
.nav a:hover{background:var(--chrome-hover);color:#fff;text-decoration:none}
.nav a.on{background:var(--chrome-hover);color:#fff;box-shadow:inset 3px 0 0 var(--chrome-on)}
[data-look=konsole] .nav a{color:var(--chrome-ink)}
.badge{background:#E24B4B;color:#fff;font:600 11px var(--body);padding:1px 7px;border-radius:99px}
.badge.w{background:#A86A06}
.who{margin-top:auto;padding:12px 8px 0;border-top:1px solid var(--chrome-line);font-size:13px}
.who select{width:100%;margin-top:8px;background:var(--chrome-hover);color:var(--chrome-ink);border:1px solid var(--chrome-line);border-radius:var(--r);padding:6px}
.main{padding:30px 38px 60px;width:100%;min-width:0}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.crumb{font-size:13px;color:var(--ink2);margin-bottom:6px}
.crumb a{color:var(--ink2)}
.sub{color:var(--ink2);margin-top:4px;max-width:70ch}

/* Bedienelemente */
.btn{display:inline-block;border:var(--bw) solid var(--frame);background:var(--surface);border-radius:var(--r);padding:7px 14px;font-weight:600;line-height:1.3;color:var(--ink)}
a.btn{color:var(--ink)}
.btn:hover{background:var(--hover);text-decoration:none}
.btn.pri,a.btn.pri{background:var(--brand-grad);border-color:var(--brand);color:var(--brand-ink)}
.btn.pri:hover{filter:brightness(1.1);background:var(--brand-grad)}
[data-look=konsole] .btn.pri{border-color:transparent}
.btn.bad{color:var(--block);border-color:var(--block-line)}
.btn.sm{padding:4px 11px;font-size:13px}
.btn[disabled]{opacity:.4;cursor:not-allowed;filter:none}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pill{display:inline-block;padding:1px 9px;border-radius:99px;font:600 var(--csize) var(--body);letter-spacing:var(--cls);text-transform:var(--ctrans);white-space:nowrap}
.p-ok{background:var(--ok-bg);color:var(--ok)}
.p-warn{background:var(--warn-bg);color:var(--warn)}
.p-bad{background:var(--block-bg);color:var(--block)}
.p-off{background:var(--off-bg);color:var(--ink2)}
.p-run{background:var(--brand-bg);color:var(--brand)}
[data-look=konsole] .p-run{color:#9DB6FF}

.card{background:var(--surface);border:var(--bw) solid var(--frame);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow)}
.card+.card{margin-top:18px}
.card h2{margin-bottom:12px}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid>.card+.card{margin-top:0}
.kpi b{display:block;font:700 30px var(--disp);letter-spacing:var(--hls);line-height:1.1;margin-bottom:2px}
.kpi span{color:var(--ink3);font-size:12.5px}
.kpi.warn b{color:var(--warn)}.kpi.bad b{color:var(--block)}

table{width:100%;border-collapse:collapse}
.tw{overflow-x:auto}
th{text-align:left;font:600 12px var(--body);color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;padding:0 12px 8px 0}
td{padding:11px 12px 11px 0;border-top:1px solid var(--line2);vertical-align:middle}
tr.link{cursor:pointer}
tr.link:hover td{background:var(--hover)}

/* Schranke: Zustandsleiste (Erkennungszeichen des Gate, hier für die Auslastung) */
.gate{display:grid;grid-template-columns:repeat(4,1fr);border:var(--bw) solid var(--frame);border-radius:var(--r);overflow:hidden;background:var(--surface);margin-bottom:20px;box-shadow:var(--shadow)}
.seg{display:block;padding:18px 16px 13px;border-left:1px solid var(--line2);position:relative;color:var(--ink)}
a.seg{color:var(--ink)}
.seg:hover{background:var(--hover);text-decoration:none}
.seg:first-child{border-left:0}
.seg::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--off)}
.seg.s-ok::before{background:var(--ok)}.seg.s-warn::before{background:var(--warn)}
.seg.s-block::before{height:9px;background:repeating-linear-gradient(135deg,var(--block) 0 7px,#fff 7px 14px)}
[data-look=konsole] .seg.s-block::before{background:repeating-linear-gradient(135deg,#FF6B6B 0 7px,#2A1620 7px 14px)}
.seg .n{display:flex;align-items:center;gap:8px;font:700 14px var(--disp);letter-spacing:var(--hls);text-transform:var(--htrans)}
.seg .n::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--off);flex:none}
.s-ok .n::before{background:var(--ok);box-shadow:0 0 0 3px var(--ok-bg)}
.s-warn .n::before{background:var(--warn);box-shadow:0 0 0 3px var(--warn-bg)}
.s-block .n::before{background:var(--block);box-shadow:0 0 0 3px var(--block-bg)}
.seg .st{display:block;margin-top:8px;font:700 24px var(--disp);letter-spacing:var(--hls);text-transform:var(--htrans)}
.s-ok .st{color:var(--ok)}.s-warn .st{color:var(--warn)}.s-block .st{color:var(--block)}.s-off .st{color:var(--off)}
.seg .md{font:400 11px var(--mono);color:var(--ink3);margin-top:3px;display:block}

/* Auslastungsbalken */
.meter{margin:10px 0}
.mhead{display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px}
.mfoot{font-size:12px;color:var(--ink3);margin-top:3px}
.track{position:relative;display:flex;height:12px;background:var(--off-bg);border-radius:6px;overflow:hidden;border:1px solid var(--line2)}
.track .u{display:block;height:100%}
.track .a{display:block;height:100%;background:repeating-linear-gradient(135deg,var(--brand) 0 4px,#8FA9F0 4px 8px)}
.track .res{position:absolute;right:0;top:0;bottom:0;width:15%;background:repeating-linear-gradient(135deg,transparent 0 4px,rgba(120,130,145,.35) 4px 6px);border-left:1px dashed var(--ink3)}
.lv-ok{background:var(--ok)}.lv-warn{background:var(--warn)}.lv-crit{background:var(--block)}
b.t-ok{color:var(--ok)}b.t-warn{color:var(--warn)}b.t-crit{color:var(--block)}
.legend{font-size:12px;color:var(--ink3);margin-top:8px}

.alerts{list-style:none;margin:0;padding:0}
.alerts li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line2)}
.alerts li:first-child{border-top:0}
.dot{width:10px;height:10px;border-radius:50%;margin-top:6px;flex:none}
.dot.w{background:var(--warn)}.dot.c{background:var(--block)}.dot.i{background:var(--brand)}

.steps{list-style:none;margin:0;padding:0}
.steps li{display:grid;grid-template-columns:28px 1fr auto;gap:10px;padding:11px 0;border-top:1px solid var(--line2);align-items:start}
.steps li:first-child{border-top:0}
.ic{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;background:var(--off-bg);color:var(--ink3)}
.s-done .ic{background:var(--ok-bg);color:var(--ok)}
.s-run .ic{background:var(--brand-bg);color:var(--brand)}
.s-failed .ic{background:var(--block-bg);color:var(--block)}
.s-undone .ic{background:var(--warn-bg);color:var(--warn)}
.s-run .ic::after{content:"";width:12px;height:12px;border-radius:50%;border:2px solid var(--brand);border-top-color:transparent;animation:spin .8s linear infinite}
.s-run .ic span{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.s-run .ic::after{animation:none}}
.steps .n{font-size:12.5px;color:var(--ink3)}
.steps .err{margin-top:6px;background:var(--block-bg);border:1px solid var(--block-line);color:var(--block);border-radius:var(--r);padding:6px 10px;font-size:13px}
.steps .st{font-size:12.5px;color:var(--ink2);white-space:nowrap}

/* Formulare */
.form{display:grid;gap:14px;max-width:560px}
.field label{display:block;font-weight:600;margin-bottom:4px;font-size:13px}
.field input[type=text],.field input[type=email],.field input[type=number],.field select,.field textarea{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink)}
.field small{display:block;color:var(--ink3);margin-top:3px}
label.row{margin:0;font-weight:500}
.filters{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.filters input,.filters select{padding:7px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink)}
td select,.top select{padding:5px 8px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);max-width:100%}
.lock{background:var(--surface2);border:1px dashed var(--line);border-radius:var(--r);padding:8px 10px;color:var(--ink2);font-size:13px}
.box-bad{background:var(--block-bg);border:1px solid var(--block-line);color:var(--block);border-radius:var(--r);padding:10px 12px}
.box-ok{background:var(--ok-bg);border:1px solid var(--ok);color:var(--ok);border-radius:var(--r);padding:10px 12px}
.kv{display:grid;grid-template-columns:150px 1fr;gap:6px 12px;font-size:14px}
.kv dt{color:var(--ink3)}.kv dd{margin:0}
.split{display:flex;height:12px;border-radius:6px;overflow:hidden;border:1px solid var(--line2)}
.split i{display:block;height:100%}
.sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px}
.pre{background:var(--code);color:#D5E0EF;border-radius:var(--r);padding:12px 14px;font:400 12px/1.7 var(--mono);white-space:pre-wrap;word-break:break-all;margin:8px 0}
.cred{border:1px dashed var(--warn);background:var(--warn-bg);border-radius:var(--r);padding:12px 14px;margin:10px 0}
.cred .v{font:600 14px var(--mono);word-break:break-all;color:var(--ink)}
.cred .l{font-size:12px;color:var(--ink2);margin-top:8px}

/* Reiter, Einstellungen, Rechte-Matrix */
.tabs2{display:flex;gap:2px;border-bottom:1px solid var(--frame);margin-bottom:18px;flex-wrap:wrap}
.tabs2 button{border:0;background:none;padding:9px 16px;font:600 15px var(--body);color:var(--ink2);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs2 button.on{color:var(--ink);border-color:var(--brand)}
[data-look=konsole] .tabs2 button.on{border-color:#7AA2FF}
.setgrid{display:grid;grid-template-columns:220px 1fr;gap:18px;align-items:start}
.setgrid>.card+.card{margin-top:0}
.setnav button{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 10px;border-radius:var(--r);font-weight:500;color:var(--ink2)}
.setnav button:hover{background:var(--hover)}
.setnav button.on{background:var(--hover);color:var(--ink);box-shadow:inset 3px 0 0 var(--brand)}
.field input[readonly]{background:var(--surface2);color:var(--ink2)}
.mx th{vertical-align:bottom}
.mx th input{width:100%;padding:4px 6px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);font:600 13px var(--body)}
.mx td select{padding:3px 6px}
.lvl{font-size:12.5px;font-weight:600}
.l0{color:var(--ink3)}.l1{color:var(--ink2)}.l2{color:var(--brand)}.l3{color:var(--block)}
textarea{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);font:inherit}
@media (max-width:980px){.setgrid{grid-template-columns:1fr}}


dialog{border:1px solid var(--frame);border-radius:var(--r);padding:22px 24px;max-width:460px;width:calc(100% - 32px);background:var(--surface);color:var(--ink)}
dialog::backdrop{background:rgba(10,14,20,.62)}
dialog h2{margin-bottom:8px}

@media (max-width:980px){
  .app{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;gap:8px;padding:12px}
  .nav{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
  .nav h4{display:none}
  .who{margin:0;border:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
  .main{padding:20px 16px 60px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .gate{grid-template-columns:repeat(2,1fr)}
}

/* Anmeldeseiten und Meldungen */
.crumb:empty{display:none}
.center{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.auth{width:100%;max-width:420px;background:var(--surface);border:var(--bw) solid var(--frame);border-radius:var(--r);padding:26px 26px 22px;box-shadow:var(--shadow)}
.auth .logo{color:var(--ink);padding-bottom:16px}
.auth h1{font-size:22px;margin-bottom:14px}
.flash{margin:0 0 16px;padding:10px 14px;border-radius:var(--r);border:1px solid var(--frame);background:var(--surface);color:var(--ink)}
.flash.success{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.flash.error{background:var(--block-bg);border-color:var(--block-line);color:var(--block)}
.flash.warning,.flash.approval{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
.flash.secret{background:var(--warn-bg);border:1px dashed var(--warn);color:var(--ink)}
.flash.link{background:var(--brand-bg);border-color:var(--brand);color:var(--ink)}
.flash a{color:inherit;text-decoration:underline}
.linkbox{display:flex;gap:8px;margin-top:8px;align-items:center}
.linkbox input{flex:1;min-width:0;padding:6px 9px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);font:500 12.5px var(--mono)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--surface);padding:8px 12px;border-radius:var(--r);z-index:10}
.who b{display:block}
.who form{margin:0}.who-links{margin:8px 0 0;font-size:13px}
.who-links a{color:var(--chrome-ink);text-decoration:underline}
.auth .who{margin-top:18px;padding:14px 0 0;border-top:1px solid var(--line2)}
.auth .who select{background:var(--surface2);color:var(--ink);border-color:var(--line)}
.form button{justify-self:start}
.field input[type=password]{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink)}.tabs2 a{padding:9px 16px;font:600 15px var(--body);color:var(--ink2);border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none}
.tabs2 a:hover{color:var(--ink);text-decoration:none}
.tabs2 a.on{color:var(--ink);border-color:var(--brand)}
[data-look=konsole] .tabs2 a.on{border-color:#7AA2FF}
fieldset.field{border:1px solid var(--line2);border-radius:var(--r);padding:10px 14px}
fieldset.field legend{font-weight:600;font-size:13px;padding:0 6px}.setnav a{display:block;padding:8px 10px;border-radius:var(--r);font-weight:500;color:var(--ink2);text-decoration:none}
.setnav a:hover{background:var(--hover);text-decoration:none}
.setnav a.on{background:var(--hover);color:var(--ink);box-shadow:inset 3px 0 0 var(--brand)}
.field input[type=password],.field input[type=text]{max-width:100%}

/* Formularelemente: überall gleich (Text, Suche, URL, Datum, Auswahl, Datei, Häkchen), in beiden Darstellungen. Mit :where, damit besondere Stellen sie überschreiben können. */
:root{color-scheme:light}
:root[data-look=konsole]{color-scheme:dark}
:where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=range]):not([type=color]),select,textarea){box-sizing:border-box;width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);font:inherit;line-height:1.3}
:where(textarea){min-height:90px;resize:vertical}
:where(input,select,textarea)::placeholder{color:var(--ink3);opacity:1}
:where(input,select,textarea):focus-visible{outline:2px solid var(--brand);outline-offset:1px}
:where(input,select,textarea):disabled{opacity:.6}
input[type=file]{box-sizing:border-box;width:100%;padding:6px 8px;border:1px dashed var(--line);border-radius:var(--r);background:var(--surface2);color:var(--ink2);font:inherit}
input[type=file]::file-selector-button{margin-right:12px;padding:6px 12px;border:1px solid var(--frame);border-radius:var(--r);background:var(--surface);color:var(--ink);font:600 13px var(--body);cursor:pointer}
input[type=file]::file-selector-button:hover{background:var(--hover)}
input[type=checkbox],input[type=radio]{accent-color:var(--brand);width:16px;height:16px;margin:0;flex:none}
.field input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),.field select{height:40px}
.chkline{display:flex;align-items:center;gap:8px;margin:0;font-weight:500}
/* Felder in einer Zeile (Filter, Suchen): Beschriftung oben, Eingaben und Knöpfe auf einer Linie unten */
.row:has(>.field),.filters{align-items:flex-end}
.row>.field{margin:0;flex:0 1 220px;min-width:140px}
.row>.field[style*=flex]{min-width:200px}
.row:has(>.field)>div:not(.field),.row:has(>.field)>label.row{display:flex;gap:8px;align-items:center;min-height:40px}
.row:has(>.field) .btn{min-height:40px;display:inline-flex;align-items:center}
.update-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:7px;vertical-align:middle}
.update-dot.available{background:var(--warn)}
.update-dot.busy{background:var(--brand);animation:pv-pulse 1.6s ease-in-out infinite}
.update-dot[hidden]{display:none}
@keyframes pv-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.update-dot.busy{animation:none}}