:root{
  --ground:#EDEFF0; --surface:#FFFFFF; --surface-2:#F5F7F8; --surface-3:#E7ECEE;
  --line:#D5DBDD; --line-strong:#B4BFC3;
  --ink:#131A1D; --ink-2:#4C5A60; --ink-3:#78868C;
  --accent:#0D5C74; --accent-ink:#0D5C74; --accent-soft:#DAE9EE;
  --signal:#B2501B;
  --ok:#286E46; --ok-bg:#DBEDE1;
  --warn:#8B5C0C; --warn-bg:#F6E8CC;
  --crit:#A32A24; --crit-bg:#F8DEDC;
  --idle:#5E6E75; --idle-bg:#E3E9EB;
  --shadow:0 1px 2px rgba(19,26,29,.06), 0 8px 24px -14px rgba(19,26,29,.28);
  --radius:6px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0E1316; --surface:#171E22; --surface-2:#1D262A; --surface-3:#232E33;
    --line:#2B363B; --line-strong:#43525A;
    --ink:#E3EAEC; --ink-2:#A2B0B6; --ink-3:#78878D;
    --accent:#57B6D2; --accent-ink:#8FD2E6; --accent-soft:#13333E;
    --signal:#E08C55;
    --ok:#6EC694; --ok-bg:#15311F;
    --warn:#E2B665; --warn-bg:#33270E;
    --crit:#EC8079; --crit-bg:#3A1917;
    --idle:#93A2A9; --idle-bg:#222C31;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -16px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#0E1316; --surface:#171E22; --surface-2:#1D262A; --surface-3:#232E33;
  --line:#2B363B; --line-strong:#43525A;
  --ink:#E3EAEC; --ink-2:#A2B0B6; --ink-3:#78878D;
  --accent:#57B6D2; --accent-ink:#8FD2E6; --accent-soft:#13333E;
  --signal:#E08C55;
  --ok:#6EC694; --ok-bg:#15311F;
  --warn:#E2B665; --warn-bg:#33270E;
  --crit:#EC8079; --crit-bg:#3A1917;
  --idle:#93A2A9; --idle-bg:#222C31;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -16px rgba(0,0,0,.8);
  color-scheme:dark;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:Archivo,"IBM Plex Sans",sans-serif; margin:0; text-wrap:balance; letter-spacing:-.01em}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums}
.eyebrow{font-family:Archivo,sans-serif; font-weight:600; font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3)}

.app{max-width:1560px; margin:0 auto; padding:0 20px 56px}

header.top{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:18px 0 14px; border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:baseline; gap:10px; margin-right:auto}
.brand h1{font-size:21px; font-weight:700; letter-spacing:-.02em}
.brand .sub{font-size:12px; color:var(--ink-3)}
.tools{display:flex; align-items:center; gap:8px; flex-wrap:wrap}

.btn{display:inline-flex; align-items:center; gap:7px; cursor:pointer; background:var(--surface);
  border:1px solid var(--line-strong); color:var(--ink); padding:7px 12px; border-radius:var(--radius);
  font-size:13px; font-weight:500; transition:background .12s ease, border-color .12s ease; white-space:nowrap}
.btn:hover{background:var(--surface-2); border-color:var(--ink-3)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600}
:root[data-theme="dark"] .btn.primary{color:#08181E}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn.primary{color:#08181E}}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent; border-color:transparent; color:var(--ink-2); padding:6px 8px}
.btn.ghost:hover{background:var(--surface-3); color:var(--ink)}
.btn.danger{color:var(--crit); border-color:var(--line)}
.btn.danger:hover{background:var(--crit-bg); border-color:var(--crit)}

input[type=text],input[type=email],input[type=number],input[type=date],select,textarea{
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius);
  padding:7px 9px; width:100%; font-size:13px}
textarea{resize:vertical; min-height:64px; line-height:1.55}
label.f{display:flex; flex-direction:column; gap:5px}
label.f > span{font-family:Archivo,sans-serif; font-weight:600; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}

/* Kennzahlen */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:1px; margin-top:16px;
  background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden}
.kpi{background:var(--surface); padding:11px 14px}
.kpi b{display:block; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:19px; font-weight:600; letter-spacing:-.02em; margin-top:2px}
.kpi.crit b{color:var(--crit)} .kpi.warn b{color:var(--warn)} .kpi.ok b{color:var(--ok)}
.kpi small{display:block; font-size:11px; color:var(--ink-3); margin-top:1px}

/* Was liegt an */
.deck{padding:20px 0 4px}
.deck-head{display:flex; align-items:baseline; gap:12px; margin-bottom:10px; flex-wrap:wrap}
.deck-head h2{font-size:15px; font-weight:600}
.deck-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:8px}
.todo{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px; background:var(--surface);
  border:1px solid var(--line); border-left:3px solid var(--idle); border-radius:var(--radius);
  padding:9px 12px; cursor:pointer; text-align:left; width:100%}
.todo:hover{border-color:var(--line-strong)}
.todo.crit{border-left-color:var(--crit)} .todo.warn{border-left-color:var(--warn)}
.todo.wait{border-left-color:var(--line-strong)}
.todo .who{width:27px; height:27px; border-radius:50%; display:grid; place-items:center;
  font-family:Archivo,sans-serif; font-weight:700; font-size:10px; background:var(--idle-bg); color:var(--idle)}
.todo.crit .who{background:var(--crit-bg); color:var(--crit)}
.todo.warn .who{background:var(--warn-bg); color:var(--warn)}
.todo .txt{min-width:0}
.todo .txt b{display:block; font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.todo .txt small{display:block; color:var(--ink-3); font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.todo .age{font-size:11px; font-weight:600; white-space:nowrap; color:var(--ink-3); font-family:"IBM Plex Mono",monospace}
.todo.crit .age{color:var(--crit)} .todo.warn .age{color:var(--warn)}
.deck-empty{background:var(--surface); border:1px dashed var(--line-strong); border-radius:var(--radius); padding:16px; color:var(--ink-2)}

/* Lieferungen */
.ships{display:flex; gap:8px; overflow-x:auto; padding:14px 2px 4px; scrollbar-width:thin}
.ship{flex:0 0 auto; min-width:186px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:9px 13px; cursor:pointer; text-align:left}
.ship:hover{border-color:var(--line-strong)}
.ship[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft)}
.ship .nm{font-family:Archivo,sans-serif; font-weight:600; font-size:12px; display:block}
.ship .fig{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:12px; color:var(--ink-2); display:block; margin-top:2px}
.ship .bar{height:3px; border-radius:2px; background:var(--surface-3); margin-top:7px; overflow:hidden}
.ship .bar i{display:block; height:100%; background:var(--accent)}

/* Split */
.split{display:grid; grid-template-columns:minmax(330px,410px) 1fr; gap:16px; margin-top:14px; align-items:start}
@media (max-width:1040px){ .split{grid-template-columns:1fr} }
.panel{background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow)}
.panel-head{display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.panel-head h2{font-size:13px; font-weight:600; margin-right:auto}
.filters{display:flex; gap:5px; padding:9px 12px; border-bottom:1px solid var(--line); flex-wrap:wrap; background:var(--surface-2)}
.chip{border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-2); border-radius:100px;
  padding:3px 10px; font-size:11.5px; font-weight:600; cursor:pointer; font-family:Archivo,sans-serif}
.chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#fff}
:root[data-theme="dark"] .chip[aria-pressed="true"]{color:#0A1E25}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .chip[aria-pressed="true"]{color:#0A1E25}}
.filters select{width:auto; padding:3px 6px; font-size:11.5px; border-radius:100px}

.list{max-height:min(70vh,860px); overflow-y:auto}
.row{display:grid; grid-template-columns:1fr auto; gap:3px 10px; width:100%; text-align:left;
  padding:10px 14px; background:none; border:0; border-bottom:1px solid var(--line); cursor:pointer}
.row:hover{background:var(--surface-2)}
.row[aria-current="true"]{background:var(--accent-soft)}
.row .nr{font-size:11px; color:var(--ink-3)}
.row .name{font-weight:600; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row .model{font-size:12px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.row .right{grid-column:2; grid-row:1/4; display:flex; flex-direction:column; align-items:flex-end; gap:4px; justify-content:center}
.row .amount{font-size:12px; color:var(--ink-2); font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}
.pill{font-family:Archivo,sans-serif; font-weight:600; font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  padding:2.5px 7px; border-radius:3px; background:var(--idle-bg); color:var(--idle); white-space:nowrap}
.pill.ok{background:var(--ok-bg); color:var(--ok)}
.pill.warn{background:var(--warn-bg); color:var(--warn)}
.pill.crit{background:var(--crit-bg); color:var(--crit)}
.pill.acc{background:var(--accent-soft); color:var(--accent-ink)}

/* Detail */
.detail-head{padding:15px 20px 13px; border-bottom:1px solid var(--line)}
.detail-head .line1{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.detail-head h2{font-size:19px; font-weight:700}
.detail-head .modell{margin-top:8px; font-size:13px; color:var(--ink-2); white-space:pre-wrap;
  max-height:120px; overflow-y:auto; line-height:1.45; padding-right:6px}
.flags{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px}
.merker{margin:12px 20px 0; background:var(--warn-bg); border:1px solid transparent; border-left:3px solid var(--warn);
  border-radius:var(--radius); padding:9px 12px}
.merker .eyebrow{color:var(--warn)}
.merker textarea{background:transparent; border:0; padding:2px 0 0; min-height:26px; font-size:13px}
.risks{margin:12px 20px 0; display:flex; flex-direction:column; gap:6px}
.risk{display:flex; gap:9px; align-items:flex-start; background:var(--crit-bg); border-left:3px solid var(--crit);
  border-radius:var(--radius); padding:8px 12px; font-size:12.5px; color:var(--ink)}
.risk b{font-weight:600}

.detail-body{display:grid; grid-template-columns:1.3fr 1fr; gap:0; margin-top:12px}
@media (max-width:900px){ .detail-body{grid-template-columns:1fr} }
.track{padding:14px 20px 22px; border-right:1px solid var(--line)}
@media (max-width:900px){ .track{border-right:0; border-bottom:1px solid var(--line)} }
.side{padding:14px 20px 22px; display:flex; flex-direction:column; gap:16px; position:sticky; top:12px; align-self:start}
@media (max-width:900px){ .side{position:static} }

.steps{list-style:none; margin:12px 0 0; padding:0; position:relative}
.steps::before{content:""; position:absolute; left:9px; top:8px; bottom:14px; width:2px; background:var(--line)}
.step{position:relative; padding:0 0 2px 32px}
.step-btn{display:grid; grid-template-columns:1fr auto; gap:2px 12px; width:100%; text-align:left;
  background:none; border:0; padding:6px 8px 6px 0; cursor:pointer; border-radius:var(--radius)}
.step-btn:hover{background:var(--surface-2)}
.step-btn:disabled{cursor:not-allowed}
.marker{position:absolute; left:0; top:8px; width:20px; height:20px; border-radius:50%; background:var(--surface);
  border:2px solid var(--line-strong); display:grid; place-items:center; z-index:1}
.step.done .marker{background:var(--accent); border-color:var(--accent)}
.step.done .marker::after{content:"✓"; color:#fff; font-size:11px; font-weight:700; line-height:1}
:root[data-theme="dark"] .step.done .marker::after{color:#0A1E25}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .step.done .marker::after{color:#0A1E25}}
.step.now .marker{border-color:var(--signal); box-shadow:0 0 0 4px color-mix(in srgb, var(--signal) 18%, transparent)}
.step.blocked .marker{border-style:dashed; border-color:var(--crit)}
.step .label{font-size:13.5px; font-weight:500}
.step.done .label{color:var(--ink-2)}
.step.now .label{font-weight:600}
.step .when{font-size:11.5px; color:var(--ink-3); white-space:nowrap; font-family:"IBM Plex Mono",monospace}
.step .note{grid-column:1/-1; font-size:11.5px; color:var(--ink-2); margin-top:3px; line-height:1.45}
.step.blocked .note{color:var(--crit)}
.step .money{grid-column:1/-1; margin-top:3px; font-size:12px; color:var(--accent-ink); font-weight:500}
.actor{font-family:Archivo,sans-serif; font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3); border:1px solid var(--line); border-radius:3px; padding:1px 5px; margin-left:7px; vertical-align:1px}
.step-date{margin-left:32px; max-height:0; opacity:0; overflow:hidden; transition:max-height .15s ease, opacity .15s ease}
.step:hover .step-date, .step:focus-within .step-date{max-height:36px; opacity:1; margin-bottom:5px}
@media (pointer:coarse){ .step-date{max-height:36px; opacity:1; margin-bottom:5px} }
.step-date input{width:auto; padding:3px 6px; font-size:11.5px}

.moneybox{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.moneyrow{display:flex; justify-content:space-between; gap:12px; padding:7px 11px; font-size:13px; border-bottom:1px solid var(--line); align-items:center}
.moneyrow:last-child{border-bottom:0}
.moneyrow.sum{background:var(--surface-2); font-weight:600}
.moneyrow.head{background:var(--surface-3); font-family:Archivo,sans-serif; font-weight:600; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2)}
.moneyrow > span:last-child{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}
.moneyrow input{width:110px; text-align:right; font-family:"IBM Plex Mono",monospace; padding:4px 7px}
.moneyrow .paid{color:var(--ok)} .moneyrow .open{color:var(--warn)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.empty{padding:60px 24px; text-align:center; color:var(--ink-3)}
.empty h2{font-size:16px; color:var(--ink-2); margin-bottom:6px}

dialog{border:1px solid var(--line-strong); border-radius:10px; background:var(--surface); color:var(--ink);
  padding:0; width:min(640px,94vw); box-shadow:0 24px 60px -20px rgba(0,0,0,.5)}
dialog::backdrop{background:rgba(10,16,19,.5)}
.dlg-head{padding:16px 20px 12px; border-bottom:1px solid var(--line)}
.dlg-head h2{font-size:16px; font-weight:700}
.dlg-body{padding:16px 20px; display:flex; flex-direction:column; gap:12px; max-height:70vh; overflow-y:auto}
.dlg-foot{padding:12px 20px; border-top:1px solid var(--line); display:flex; gap:8px; justify-content:flex-end; background:var(--surface-2); border-radius:0 0 10px 10px}
.checkline{display:flex; align-items:center; gap:8px; font-size:13px}
.checkline input{width:auto}

.statusbar{display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--ink-3); padding:14px 2px 0}
.statusbar .led{width:7px; height:7px; border-radius:50%; background:var(--ok); flex:0 0 auto}
.statusbar .led.local{background:var(--warn)}
footer.note{margin-top:8px; font-size:11.5px; color:var(--ink-3); max-width:80ch; line-height:1.6}
.seg{display:inline-flex; border:1px solid var(--line-strong); border-radius:var(--radius); overflow:hidden}
.seg .btn{border:0; border-radius:0; background:var(--surface)}
.seg .btn + .btn{border-left:1px solid var(--line-strong)}
.seg .btn[aria-pressed="true"]{background:var(--accent); color:#fff; font-weight:600}
:root[data-theme="dark"] .seg .btn[aria-pressed="true"]{color:#08181E}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .seg .btn[aria-pressed="true"]{color:#08181E}}

/* Forderungen */
.fgroup{margin-top:20px}
.fgroup > header{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:9px}
.fgroup h3{font-size:15px; font-weight:600}
.fgroup .sum{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:14px; font-weight:600; margin-left:auto}
.fgroup p.lead{font-size:12.5px; color:var(--ink-3); margin:0 0 10px; max-width:80ch}
.ftable{background:var(--surface); border:1px solid var(--line); border-radius:8px; overflow:hidden; box-shadow:var(--shadow)}
.frow{display:grid; grid-template-columns:1fr 150px 130px 148px auto; gap:10px 16px; align-items:center;
  padding:11px 15px; border-bottom:1px solid var(--line)}
.frow:last-child{border-bottom:0}
.frow.head{background:var(--surface-3); font-family:Archivo,sans-serif; font-weight:600; font-size:10.5px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2); padding:8px 15px}
.frow .who b{display:block; font-weight:600; font-size:13.5px}
.frow .who small{display:block; color:var(--ink-3); font-size:11.5px; margin-top:1px}
.frow .who a{color:var(--accent-ink); font-size:11.5px}
.frow .amt{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; text-align:right; font-size:13.5px}
.frow .amt.big{font-weight:600}
.frow .since{font-size:12px; color:var(--ink-2); text-align:right; font-variant-numeric:tabular-nums}
.frow .acts{display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; min-width:0}
.frow .stufe{display:inline-block}
.frow.noemail{box-shadow:inset 3px 0 0 var(--warn)}
@media (max-width:900px){ .frow{grid-template-columns:1fr auto; }
  .frow.head{display:none} .frow .amt,.frow .since{text-align:left} .frow .acts{grid-column:1/-1} }
.stufe{font-family:Archivo,sans-serif; font-weight:700; font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  padding:2.5px 7px; border-radius:3px; white-space:nowrap}
.stufe.s0{background:var(--idle-bg); color:var(--idle)}
.stufe.s1{background:var(--warn-bg); color:var(--warn)}
.stufe.s2{background:var(--crit-bg); color:var(--crit)}
.stufe.s3{background:var(--crit); color:#fff}
.mailprev{width:100%; min-height:290px; font-family:"IBM Plex Mono",monospace; font-size:12.5px; line-height:1.55}
.hint{font-size:12px; color:var(--ink-3); line-height:1.5}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} }

/* ---- Ergänzungen der Serverfassung ---- */
.login-wrap{min-height:80vh; display:grid; place-items:center; padding:40px 20px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); padding:26px 28px; width:min(420px,100%)}
.card h1{font-size:20px; margin-bottom:4px}
.card p.sub{color:var(--ink-3); font-size:13px; margin:0 0 20px}
.formgrid{display:flex; flex-direction:column; gap:14px}
.alert{border-radius:var(--radius); padding:10px 13px; font-size:13px; margin-bottom:14px; border-left:3px solid}
.alert.err{background:var(--crit-bg); border-color:var(--crit); color:var(--ink)}
.alert.ok{background:var(--ok-bg); border-color:var(--ok); color:var(--ink)}
.alert.info{background:var(--accent-soft); border-color:var(--accent); color:var(--ink)}
nav.haupt{display:flex; gap:4px; align-items:center; flex-wrap:wrap}
nav.haupt a{padding:7px 12px; border-radius:var(--radius); font-size:13px; font-weight:500; color:var(--ink-2); text-decoration:none}
nav.haupt a:hover{background:var(--surface-3); color:var(--ink)}
nav.haupt a[aria-current="page"]{background:var(--accent); color:#fff; font-weight:600}
:root[data-theme="dark"] nav.haupt a[aria-current="page"]{color:#08181E}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) nav.haupt a[aria-current="page"]{color:#08181E}}
.wer{font-size:12px; color:var(--ink-3); display:flex; align-items:center; gap:8px}
table.liste{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:8px; overflow:hidden}
table.liste th{background:var(--surface-3); font-family:Archivo,sans-serif; font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-2); text-align:left; padding:9px 14px; font-weight:600}
table.liste td{padding:10px 14px; border-top:1px solid var(--line); font-size:13.5px; vertical-align:middle}
table.liste tr:hover td{background:var(--surface-2)}
.rolle{font-family:Archivo,sans-serif; font-weight:600; font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  padding:2.5px 7px; border-radius:3px; background:var(--accent-soft); color:var(--accent-ink)}
.rolle.lesen{background:var(--idle-bg); color:var(--idle)}
.rolle.mitarbeiter{background:var(--ok-bg); color:var(--ok)}
.aus{opacity:.5}
.abschnitt{margin-top:28px}
.abschnitt > h2{font-size:16px; margin-bottom:4px}
.abschnitt > p{color:var(--ink-3); font-size:13px; margin:0 0 14px; max-width:80ch}
pre.log{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:12px;
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; overflow-x:auto; line-height:1.6; white-space:pre-wrap}
.pruef{display:grid; grid-template-columns:auto 1fr; gap:8px 12px; align-items:start; font-size:13px}
.pruef .zeichen{width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; color:#fff}
.pruef .zeichen.ja{background:var(--ok)} .pruef .zeichen.nein{background:var(--crit)} .pruef .zeichen.hm{background:var(--warn)}

/* Warnband der Testumgebung — soll unübersehbar sein */
.testband{
  background:var(--warn); color:#1a1200; font-family:Archivo,sans-serif; font-weight:600;
  font-size:12.5px; letter-spacing:.01em; text-align:center; padding:7px 16px;
  position:sticky; top:0; z-index:50;
}
:root[data-theme="dark"] .testband{color:#120e00}

/* Fußzeile mit Versionsangabe */
.fusszeile{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:40px; padding:14px 2px 0; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--ink-3);
}
.fusszeile .version, .fusszeile .stand{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums;
  margin-left:10px;
}
.fusszeile .version{color:var(--ink-2)}