:root{--rot:#F49819;--rot2:#d97f06;--auf-rot:#141414;--bg:#f4f5f7;--karte:#fff;--text:#1d2129;--grau:#6b7280;--linie:#e3e5e8;--gut:#15803d;--warn:#b45309;--schlecht:#b91c1c;--blau:#1d4ed8;--code:#f1f2f4;--feld:#fff;--feld-text:#1d2129;--feld-grau:#6b7280;--feld-linie:#cfd3d9;--feld-hover:#f8f9fa;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-farbe=hell]){--bg:#14161a;--karte:#1d2026;--text:#e6e8eb;--grau:#9aa1ab;--linie:#2d3139;--code:#262a31;--feld:#fff;--feld-text:#14161a;--feld-grau:#5b636e;--feld-linie:#8a929e;--feld-hover:#eef0f3;--gut:#4ade80;--warn:#fbbf24;--schlecht:#f87171;--blau:#93c5fd;color-scheme:dark}}
:root[data-farbe=dunkel]{--bg:#14161a;--karte:#1d2026;--text:#e6e8eb;--grau:#9aa1ab;--linie:#2d3139;--code:#262a31;--feld:#fff;--feld-text:#14161a;--feld-grau:#5b636e;--feld-linie:#8a929e;--feld-hover:#eef0f3;--gut:#4ade80;--warn:#fbbf24;--schlecht:#f87171;--blau:#93c5fd;color-scheme:dark}
:root[data-farbe=hell]{color-scheme:light}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--blau);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:1.6rem;margin:.2rem 0 .8rem}h2{font-size:1.1rem;margin:1.2rem 0 .6rem}.karte h2{margin-top:0}
code{background:var(--code);padding:.1rem .35rem;border-radius:4px;font-size:.9em;word-break:break-all}
pre{background:var(--code);padding:.6rem;border-radius:6px;white-space:pre-wrap;max-height:22rem;overflow:auto;font-size:.82rem}
.grau{color:var(--grau)}.klein{font-size:.85rem}.r{text-align:right}.nw{white-space:nowrap}.gut{color:var(--gut)}.schlecht{color:var(--schlecht)}

/* Rahmen */
.rahmen{display:flex;min-height:100vh}
.leiste{width:360px;flex:none;background:var(--rot);color:var(--auf-rot);display:flex;flex-direction:column;padding:1rem .7rem;position:sticky;top:0;height:100vh;overflow-y:auto}
.leiste a{color:var(--auf-rot);display:block;padding:.42rem .7rem;border-radius:7px;opacity:.9}
.leiste a:hover{background:rgba(0,0,0,.08);text-decoration:none;opacity:1}
.leiste a.aktiv{background:#141414;color:var(--rot);opacity:1;font-weight:600}
.leiste .gruppe{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;opacity:.7;margin:1rem .7rem .3rem}
/* Menuegruppen: umrandet und aufklappbar */
.menue-gruppe{border:1px solid rgba(0,0,0,.28);border-radius:10px;background:rgba(0,0,0,.06);margin:.55rem 0;overflow:hidden}
.menue-gruppe:not(:has(a)){display:none}
.menue-gruppe>summary{list-style:none;cursor:pointer;user-select:none;display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;background:rgba(0,0,0,.1)}
.menue-gruppe>summary::-webkit-details-marker{display:none}
.menue-gruppe>summary::after{content:'';width:.45rem;height:.45rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .15s;margin:0 .2rem .2rem 0}
.menue-gruppe:not([open])>summary::after{transform:rotate(-45deg);margin:0 .3rem 0 0}
.menue-gruppe>summary:hover{background:rgba(0,0,0,.16)}
.menue-gruppe>summary:focus-visible{outline:2px solid #141414;outline-offset:-2px}
.menue-gruppe[open]>summary{border-bottom:1px solid rgba(0,0,0,.2)}
.menue-unter{padding:.25rem}
.leiste .zahl{background:#141414;color:var(--rot);border-radius:9px;padding:0 .45rem;font-size:.75rem;margin-left:.3rem}
.logo{display:flex!important;justify-content:center;padding:.2rem 0 1rem!important;opacity:1!important}.logo img{width:100%;max-width:330px;height:auto;aspect-ratio:1;border-radius:50%;background:#000;box-shadow:0 2px 10px rgba(0,0,0,.25)}.logo:hover{background:none!important}
.logo.gross{justify-content:center;padding:0 0 1rem!important}.logo.gross img{width:300px;height:300px;max-width:80vw}
.login-mark{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.2rem 0 1.15rem;text-align:center;color:var(--text)}.login-emblem{width:180px;height:180px;overflow:visible}.emblem-disc{fill:#fff;stroke:#f39819;stroke-width:5}.emblem-ring{fill:none;stroke:#252525;stroke-width:1.5}.mask{fill:#f39819;stroke:#d97808;stroke-width:2}.band{fill:#fff;stroke:#e58a11;stroke-width:1.5}.eye,.band-k{fill:#202124}.coin circle:first-child{fill:#f39819;stroke:#202124;stroke-width:2}.coin-inner{fill:none;stroke:#fff;stroke-width:1.5}.coin-k{fill:#202124}.coin-glint{fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;opacity:.75}.strike{fill:none;stroke:#f39819;stroke-width:3;stroke-linecap:round;opacity:0;transform-origin:128px 137px}.coin{transform-origin:139px 121px}.login-mark:hover .coin{animation:coin-karate .9s ease-in-out}.login-mark:hover .coin-glint{animation:coin-shine .9s ease-in-out}.login-mark:hover .strike{animation:karate-strike .45s ease-out}.login-wordmark strong{font-size:1.25rem;line-height:1.2;letter-spacing:.015em}.login-wordmark span{display:block;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grau);margin-top:.15rem}.login-wordmark i{color:#f39819;font-style:normal}@keyframes coin-karate{0%,100%{transform:translate(0,0) rotateY(0) rotate(0)}30%{transform:translate(5px,-11px) rotateY(180deg) rotate(20deg)}65%{transform:translate(-5px,-4px) rotateY(360deg) rotate(-12deg)}}@keyframes coin-shine{0%,100%{opacity:.65}35%{opacity:1;stroke-width:4}70%{opacity:.2}}@keyframes karate-strike{0%{opacity:0;transform:translate(-9px,5px) scaleX(.5)}45%{opacity:1;transform:translate(0,0) scaleX(1.1)}100%{opacity:0;transform:translate(6px,-2px) scaleX(1)}}@media(prefers-reduced-motion:reduce){.login-mark:hover .coin,.login-mark:hover .coin-glint,.login-mark:hover .strike{animation:none}}
.ich{margin-top:auto;border-top:1px solid rgba(0,0,0,.2);padding-top:.7rem}
.ich small{display:block;opacity:.8;font-size:.78rem}.ich .link{color:var(--auf-rot);opacity:.85;padding:.3rem .7rem}
main{flex:1;min-width:0;width:100%;padding:1.5rem 2rem 1rem;max-width:none}
footer{color:var(--grau);font-size:.8rem;margin-top:2rem}
.mitte{min-height:100vh;display:grid;place-items:center;padding:16px}
.schmal{width:100%;max-width:420px}

/* Bausteine */
.karte{background:var(--karte);border:1px solid var(--linie);border-radius:12px;padding:1.1rem 1.3rem;margin-bottom:1rem}
.monitoring-breit{width:100%;max-width:none}.monitoring-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.8rem;margin:1rem 0}.monitoring-kpi{background:var(--karte);border:1px solid var(--linie);border-radius:12px;padding:1rem}.monitoring-kpi span{display:block;color:var(--grau);font-size:.86rem}.monitoring-kpi b{display:block;font-size:1.6rem}.monitoring-gruppe{width:100%;overflow:hidden}.monitoring-gruppen-kopf{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;flex-wrap:wrap}.monitoring-gruppen-kopf h2{margin:0 0 .8rem}.monitoring-gruppe table{min-width:1500px}.monitoring-meter{display:block;width:100%;height:.55rem;margin:.2rem 0;accent-color:var(--gut)}.monitoring-meter.meter-warn{accent-color:var(--warn)}.monitoring-meter.meter-kritisch{accent-color:var(--schlecht)}.monitoring-spaltenfilter{box-sizing:border-box;width:100%;min-width:85px;margin-top:.35rem;font-size:.82rem;padding:.35rem}.monitoring-gruppe th{vertical-align:top;cursor:pointer}.monitoring-gruppe th input{cursor:text}.monitoring-diagramm{margin:1rem 0;padding:.8rem;border:1px solid var(--linie);border-radius:10px;overflow:hidden}.monitoring-diagramm h3{margin:.1rem 0 .5rem}.monitoring-diagramm svg{display:block;width:100%;height:auto;max-height:240px;color:var(--orange,#e88712)}@media(max-width:800px){.monitoring-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.monitoring-filterleiste{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:0 0 .75rem}.monitoring-filterleiste input[type=search]{flex:1 1 280px;min-width:180px}.monitoring-filterleiste button{white-space:nowrap}.monitoring-spaltenfilter{cursor:auto}.etikett-zuweisung{width:100%}
.karte.hervor{border-color:var(--rot);box-shadow:0 0 0 3px rgba(244,152,25,.15)}
details.karte>summary{cursor:pointer;list-style:none}details.karte>summary::before{content:"▸ ";color:var(--grau)}details.karte[open]>summary::before{content:"▾ "}
details.karte[open]>summary{margin-bottom:.8rem}
.kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:.5rem}
.kopf p{margin:0}
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.8rem;margin:1rem 0}
.kachel{background:var(--karte);border:1px solid var(--linie);border-radius:12px;padding:1rem}
.kachel b{display:block;font-size:1.8rem;line-height:1.1}.kachel span{color:var(--grau);font-size:.88rem}
.raster2{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:1rem;align-items:start}
.liste{list-style:none;padding:0;margin:0}.liste li{padding:.3rem 0;border-bottom:1px solid var(--linie)}.liste li:last-child{border:0}
.mini{margin:.3rem 0 0;padding-left:1.1rem;font-size:.85rem}
.hinweis{padding:.7rem 1rem;border-radius:8px;margin-bottom:1rem;background:var(--code);border-left:4px solid var(--blau)}
.hinweis.ok,.hinweis.gut{border-color:var(--gut)}.hinweis.warn{border-color:var(--warn)}.hinweis.fehler{border-color:var(--schlecht)}
.hinweis.einmalig code.gross{display:block;font-size:1.3rem;margin-top:.5rem;padding:.5rem;text-align:center;user-select:all}
.leer{max-width:520px;margin:15vh auto;text-align:center;padding:16px}

/* Tabellen */
.tabelle{overflow-x:auto;background:var(--karte);border:1px solid var(--linie);border-radius:12px;margin-bottom:1rem}
table{width:100%;border-collapse:collapse}
th,td{padding:.5rem .7rem;text-align:left;border-bottom:1px solid var(--linie);vertical-align:top}
th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--grau);font-weight:600}
tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:rgba(127,127,127,.05)}

/* Status */
.status{display:inline-block;padding:.05rem .55rem;border-radius:20px;font-size:.78rem;font-weight:600;background:var(--code);color:var(--grau);white-space:nowrap}
.status.gross{font-size:1rem;padding:.25rem .9rem}
.status.offen,.status.wartet{background:rgba(29,78,216,.12);color:var(--blau)}
.status.freigegeben,.status.laeuft{background:rgba(180,83,9,.14);color:var(--warn)}
.status.fertig{background:rgba(21,128,61,.14);color:var(--gut)}
.status.fehler,.status.abgelaufen{background:rgba(185,28,28,.14);color:var(--schlecht)}

/* Formulare */
.formular{display:flex;flex-direction:column;gap:.7rem}
.formular label{display:flex;flex-direction:column;gap:.25rem;font-size:.9rem;font-weight:500}
.formular label.zeile,label.zeile{flex-direction:row;align-items:center;gap:.45rem;font-weight:400}
label.inline{display:inline-flex!important;margin-right:.9rem}
.reihe{display:flex;gap:.8rem;flex-wrap:wrap;align-items:flex-end}.reihe>label{flex:1;min-width:160px}
.formular.reihe{flex-direction:row}
input,select,textarea{font:inherit;color:var(--feld-text);color-scheme:light;background:var(--feld);border:1px solid var(--feld-linie);border-radius:8px;padding:.5rem .65rem;width:100%;transition:border-color .15s,background-color .15s,box-shadow .15s}
input:hover,select:hover,textarea:hover{background:var(--feld-hover)}
input::placeholder,textarea::placeholder{color:var(--feld-grau);opacity:1}
select option{color:var(--feld-text);background:var(--feld)}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--rot)}
input:focus,select:focus,textarea:focus{outline:none;background:var(--feld);border-color:var(--rot);box-shadow:0 0 0 3px rgba(244,152,25,.25)}
textarea.geheim{font-family:ui-monospace,monospace;-webkit-text-security:disc}
fieldset{border:1px solid var(--linie);border-radius:8px;padding:.6rem .9rem}legend{font-size:.85rem;color:var(--grau);padding:0 .3rem}
.rechte{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.7rem}
form.inline{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem}
button,.knopf{font:inherit;cursor:pointer;border:1px solid var(--linie);background:var(--karte);color:var(--text);padding:.5rem 1rem;border-radius:8px;display:inline-block}
button:hover,.knopf:hover{border-color:var(--grau);text-decoration:none}
button.haupt,.knopf.haupt{background:var(--rot);border-color:var(--rot);color:var(--auf-rot);font-weight:600}
button.haupt:hover{background:var(--rot2)}
button.gefahr.haupt{background:#7f1d1d;border-color:#7f1d1d;color:#fff}
button.link{background:none;border:0;padding:0;color:var(--blau)}button.link.gefahr{color:var(--schlecht)}
button.klein{padding:.15rem .5rem;font-size:.8rem}
button[disabled]{opacity:.6;cursor:wait}
.suche{display:flex;gap:.4rem}.suche input{width:260px}
.reiter{display:flex;gap:.3rem;flex-wrap:wrap}.reiter a{padding:.3rem .8rem;border-radius:20px;border:1px solid var(--linie);background:var(--karte);color:var(--text)}
.reiter a.aktiv{background:var(--rot);color:var(--auf-rot);border-color:var(--rot)}
code.satz{font-size:1.05rem;user-select:all}
details.aktionen summary{cursor:pointer;color:var(--blau)}details.aktionen[open]{min-width:220px}
.wahl{flex-direction:row!important;gap:.6rem;padding:.6rem;border:1px solid var(--linie);border-radius:8px;cursor:pointer}
.wahl small{display:block;color:var(--grau);font-weight:400}

/* 2FA / Codes */
.qr{background:#fff;padding:12px;border-radius:8px;width:260px;max-width:100%;margin:.5rem auto}.qr svg{width:100%;height:auto;display:block;shape-rendering:crispEdges}.mitte-text{text-align:center}.schritte{padding-left:1.2rem}.schluessel{display:block;font-size:1.1rem;letter-spacing:.05em;padding:.5rem;text-align:center;user-select:all}.knoepfe{margin:1rem 0}.nur-druck{display:none}
.umbruch{word-break:break-all}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;font-family:ui-monospace,monospace;font-size:1.05rem;padding:0;list-style:none}
.codes li{background:var(--code);padding:.35rem;border-radius:6px;text-align:center}

/* Chat */
.verlauf{display:flex;flex-direction:column;gap:.7rem;margin-bottom:1rem}
.blase{max-width:80%;padding:.7rem 1rem;border-radius:14px;background:var(--karte);border:1px solid var(--linie)}
.blase .text{white-space:pre-wrap}.blase small{display:block;color:var(--grau);font-size:.72rem;margin-top:.3rem}
.blase.user{align-self:flex-end;background:var(--rot);color:var(--auf-rot);border-color:var(--rot)}.blase.user small{color:rgba(0,0,0,.6)}
.werkzeug{font-size:.85rem;color:var(--grau);margin-left:.5rem}.werkzeug summary{cursor:pointer}
.eingabe{position:sticky;bottom:0;display:flex;gap:.6rem;align-items:flex-end;background:var(--bg);padding:.6rem 0}
.eingabe textarea{flex:1}

@media (max-width:860px){
  .rahmen{flex-direction:column}
  .leiste{width:auto;height:auto;position:static;flex-direction:row;flex-wrap:wrap;gap:.2rem;padding:.6rem 16px}
  .leiste a{padding:.3rem .55rem;font-size:.88rem}.leiste .logo{width:100%}.leiste .logo img{max-width:160px}
  .ich{margin:0;border:0;padding:0;display:flex;align-items:center;gap:.5rem;width:100%}
  main{padding:1rem 16px}
  .raster2{grid-template-columns:1fr}.suche input{width:100%}.blase{max-width:95%}
}

progress{width:100%;height:14px;accent-color:var(--rot);border-radius:7px;overflow:hidden}
progress::-webkit-progress-bar{background:var(--code);border-radius:7px}progress::-webkit-progress-value{background:var(--rot);border-radius:7px}
progress::-moz-progress-bar{background:var(--rot);border-radius:7px}
.protokoll{font-size:.83rem;max-height:18rem;overflow:auto;margin:.4rem 0 0;padding-left:1.4rem}
.protokoll li{padding:.1rem 0}.protokoll li.warnung{color:var(--schlecht)}
.ladestatus .kopf h2{margin:0}
.tabellenleiste{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.4rem 0 .5rem}
.tabellenleiste input{flex:1;min-width:200px;max-width:380px}.tabellenleiste select{width:auto;max-width:220px}
th.sortierbar{cursor:pointer;user-select:none;white-space:nowrap}th.sortierbar:hover{color:var(--text)}
th.sortierbar::after{content:" ↕";opacity:.35}th[data-sort=auf]::after{content:" ▲";opacity:1;color:var(--rot2)}
th[data-sort=ab]::after{content:" ▼";opacity:1;color:var(--rot2)}
.aufgabenliste{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.5rem}
.aufgabe{display:block;border:1px solid var(--linie);border-radius:10px;padding:.6rem .8rem;color:var(--text);background:var(--karte)}
.aufgabe:hover{border-color:var(--rot);text-decoration:none}.aufgabe small{display:block;color:var(--grau);font-size:.78rem}
.aufgabe.aendert{border-left:4px solid var(--rot)}.suche-gross{max-width:320px}
.ergebnis{margin-top:1rem}.ergebnis h2{margin-top:0}.md h2,.md h3,.md h4{margin:.8rem 0 .4rem}
table.kv{width:auto;min-width:50%;margin-bottom:.8rem}table.kv th{text-transform:none;letter-spacing:0;font-size:.85rem;white-space:nowrap}
.system{display:inline-block;font-size:.7rem;font-weight:600;padding:.05rem .45rem;border-radius:5px;margin-right:.2rem;color:#fff;background:#6b7280}
.system.servereye{background:#0e7490}.system.ninjaone{background:#1d4ed8}.system.weclapp{background:#7c3aed}.system.teamviewer{background:#0369a1}
.aufgabe .systeme{display:block;margin:.25rem 0 .1rem}
.feld{display:flex;flex-direction:column;gap:.25rem}.feldhilfe{font-size:.78rem;color:var(--grau);line-height:1.35}
.feldname{font-size:.9rem;font-weight:500}
.mehrfach{border:1px solid var(--linie);border-radius:8px;padding:.5rem}.mehrfach .reihe{align-items:center}.mehrfach .reihe input{flex:1}
.mf-liste{max-height:14rem;overflow:auto;margin-top:.4rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.1rem .6rem}
.mf-liste label{font-size:.85rem}
input.ungueltig{border-color:var(--schlecht);outline:2px solid rgba(185,28,28,.25)}
blockquote.vorschau{border-left:4px solid var(--rot);margin:.5rem 0;padding:.6rem 1rem;background:var(--code);border-radius:6px}
pre.anmerkungen{white-space:pre-wrap;font-family:inherit;font-size:.9rem}
.laufend{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.8rem}.laufend:empty{display:none}
.auftrag{background:var(--karte);border:1px solid var(--linie);border-radius:10px;padding:.5rem .8rem}
.auftrag-kopf{display:flex;gap:.6rem;align-items:baseline;margin-bottom:.35rem;font-size:.9rem}
.balken{position:relative;height:26px;border-radius:13px;background:var(--code);overflow:hidden}
.balken .fuellung{position:absolute;inset:0 auto 0 0;background:var(--rot);transition:width .6s ease;border-radius:13px}
.auftrag.laeuft .fuellung,.auftrag.wartet .fuellung{background-image:linear-gradient(45deg,rgba(255,255,255,.18) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.18) 50%,rgba(255,255,255,.18) 75%,transparent 75%);background-size:28px 28px;animation:streifen 1s linear infinite}
@keyframes streifen{from{background-position:0 0}to{background-position:28px 0}}
.auftrag.fertig .fuellung{background:var(--gut)}.auftrag.fehler .fuellung{background:var(--schlecht)}
.balken-text{position:relative;z-index:1;display:block;line-height:26px;padding:0 .8rem;font-size:.82rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 3px var(--karte)}
dialog.zweifa-fenster{border:1px solid var(--linie);border-radius:14px;padding:1.4rem;background:var(--karte);color:var(--text);max-width:380px;width:92vw}
dialog.zweifa-fenster::backdrop{background:rgba(0,0,0,.55)}
dialog.zweifa-fenster input{font-size:1.4rem;letter-spacing:.3em;text-align:center;margin:.6rem 0}
.zweifa-stand{color:var(--gut)}
@media print{
  body{background:#fff;color:#000}
  .nicht-drucken,.leiste,footer,.hinweis{display:none!important}
  .nur-druck{display:block}
  .mitte{display:block;min-height:0;padding:0}.karte{border:0;box-shadow:none}
  .codes li{background:#fff;border:1px solid #000;color:#000}
}

/* Wartungs-Assistent */
.klein-balken{height:10px;margin:.3rem 0 .8rem}
ol.schritte li{padding:.45rem 0;border-bottom:1px solid var(--linie,rgba(127,127,127,.2))}
ol.schritte li.erledigt b{opacity:.75}
form.inline{display:inline}
textarea[data-kopieren]{width:100%;font-family:inherit}
button.loeschen-knopf{background:#b42318;color:#fff;border-color:#b42318}
form.loeschen{margin-top:.6rem;padding-top:.5rem;border-top:1px solid var(--linie)}
a.kachel{color:inherit;text-decoration:none}a.kachel:hover{border-color:var(--rot)}
.kachel small{font-size:.78rem}
table.aufschluesselung{width:100%}table.aufschluesselung td{padding:.35rem .4rem;border-bottom:1px solid var(--linie)}
/* Uebersicht / Forum */
.karte.notfall{border-left:4px solid #b42318}
.forum-text{white-space:pre-wrap;overflow-wrap:anywhere}
.forum-beitrag .kopf{margin-bottom:.2rem}
nav.reiter a .zahl{background:var(--rot);color:#141414;border-radius:9px;padding:0 .4rem;font-size:.72rem}
.hinweise-aktiv{border-left:4px solid #e8a317}
.hinweis-eintrag{padding:.35rem 0;border-bottom:1px solid var(--linie)}
a.hinweis-mark{text-decoration:none;font-size:1.05rem}a.hinweis-mark small{font-size:.7rem;vertical-align:super}

/* Geführte Ausführung und Hinweise: auch per Tastatur und mobil erreichbar. */
.status-banner{background:var(--karte);border:1px solid var(--linie);border-left:5px solid var(--blau);border-radius:10px;padding:1rem 1.2rem;margin-bottom:1rem}
.status-banner p{white-space:pre-wrap;margin:.4rem 0 0}.status-banner.warnung{border-left-color:var(--warn)}.status-banner.stoerung{border-left-color:var(--schlecht)}.status-banner.erfolg{border-left-color:var(--gut)}
.ablauf-schritte{display:flex;flex-wrap:wrap;gap:1rem 2rem;padding:1rem 1rem 1rem 2.5rem;border-radius:10px;background:var(--code)}
.hilfe-symbol{position:relative;display:inline-flex;justify-content:center;align-items:center;width:1.3rem;height:1.3rem;border:1px solid var(--grau);border-radius:50%;font-size:.8rem;cursor:help;margin-left:.35rem}
.hilfe-tooltip{display:none;position:absolute;left:0;bottom:150%;width:min(320px,70vw);background:var(--text);color:var(--bg);padding:.7rem;border-radius:8px;font-weight:400;z-index:20;line-height:1.5}
.hilfe-symbol:hover .hilfe-tooltip,.hilfe-symbol:focus .hilfe-tooltip,.hilfe-symbol:focus-within .hilfe-tooltip{display:block}
button:focus-visible,a:focus-visible,.hilfe-symbol:focus-visible{outline:3px solid var(--blau);outline-offset:3px}
.mf-liste small{display:block}.reiter{margin:.75rem 0 1rem}.reiter a{padding:.55rem .9rem}
@media(max-width:600px){.ablauf-schritte{display:block}.ablauf-schritte li{margin:.4rem 0}.hilfe-tooltip{left:auto;right:0}.raster2{grid-template-columns:minmax(0,1fr)}}

.nav-toggle{display:none}.nav-links{width:100%}
@media(max-width:860px){.nav-toggle{display:block;margin-left:auto}.leiste .logo{width:auto;padding:0!important}.leiste .logo img{width:48px;height:48px;max-width:48px}.leiste{align-items:center}.leiste .nav-links{display:none}.leiste.offen .nav-links{display:flex;flex-wrap:wrap;gap:.2rem}.leiste .ich{padding-top:.3rem}.leiste .ich a{padding:.2rem 0}.leiste .ich small{font-size:.72rem}}

.news-text{white-space:pre-wrap;overflow-wrap:anywhere}.news-navigation{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem}.news-karussell{border-top:3px solid #eda72e}.news-karussell h3{font-size:1.25rem}.news-karussell[hidden],.news-slide[hidden]{display:none!important}.alarm-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:.75rem}

/* Mobile: nur kompakte Kopfzeile plus Burger, Navigation und Profil standardmäßig geschlossen. */
.nur-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.burger-icon{display:flex;flex-direction:column;gap:5px;width:22px}.burger-icon span{display:block;height:2px;width:22px;background:currentColor;border-radius:2px}
@media(max-width:860px){
 .leiste{position:sticky;top:0;z-index:50;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:.25rem;padding:.5rem 16px;width:100%;height:auto;box-sizing:border-box}
 .leiste .logo{order:1;margin:0!important;width:auto!important}.leiste .logo img{width:32px;height:32px;max-width:32px}
 .leiste .nav-toggle{order:2;display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;margin-left:auto;padding:10px}
 .leiste:not(.offen) .nav-links,.leiste:not(.offen) .ich{display:none!important}
 .leiste.offen .nav-links{order:3;display:flex;flex-direction:column;flex-wrap:nowrap;width:100%;max-height:60vh;overflow:auto;gap:.1rem;padding:.4rem 0}
 .leiste .nav-links a{display:flex;align-items:center;min-height:44px;padding:.6rem .75rem;box-sizing:border-box;width:100%}
 .leiste.offen .ich{order:4;display:flex;width:100%;justify-content:space-between;border-top:1px solid rgba(0,0,0,.15);padding-top:.5rem}
 main{min-width:0;width:100%;box-sizing:border-box}.raster2,.raster3{grid-template-columns:1fr}
 main input,main select,main textarea{font-size:16px;max-width:100%;box-sizing:border-box}
 main button:not(.link),main a.knopf{min-height:44px}.news-navigation{gap:.5rem}
 .karte,.formular,fieldset{min-width:0}.client-geraete{grid-template-columns:1fr}
}

.news-inhalt{overflow-wrap:anywhere;overflow-x:auto}.news-iframe{display:block;width:100%;max-width:100%;border:1px solid var(--grau);border-radius:8px;background:var(--bg)}
.news-umfrage{border-top:1px solid var(--grau);margin-top:1rem;padding-top:1rem}.news-umfrage h4{font-size:1.1rem}.news-umfrage .zeile{padding:.5rem 0;align-items:center}.news-umfrage input[type=radio]{width:auto;min-width:1.1rem;min-height:1.1rem;flex-shrink:0}.news-umfrage fieldset{margin:0}.news-inhalt pre{white-space:pre-wrap;overflow-wrap:anywhere}

/* Kontextmenue (Rechtsklick / ⋯) */
.menue{position:fixed;z-index:50;min-width:240px;max-width:min(420px,calc(100vw - 16px));background:var(--karte);border:1px solid var(--linie);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.18);padding:.3rem 0}
.menue-titel{font-size:.75rem;color:var(--grau);padding:.35rem .9rem;border-bottom:1px solid var(--linie);margin-bottom:.2rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menue a{display:block;padding:.45rem .9rem;color:var(--text);font-size:.9rem}
.menue a:hover,.menue a:focus{background:var(--code);text-decoration:none;outline:none}
[data-kontext]{cursor:context-menu}
.auswahlliste{max-height:16rem;overflow-y:auto;margin-top:.5rem;display:flex;flex-direction:column;gap:.15rem}

/* Kritische Meldungen: Notfalltickets | Zabbix */
.kritisch-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:1rem;align-items:start;margin-bottom:.6rem}
.kritisch-teil{border:1px solid var(--linie);border-radius:10px;padding:.8rem 1rem;min-width:0}
.kritisch-teil.aktiv{border-left:4px solid #b42318}
.kritisch-teil h3{margin:0 0 .5rem;font-size:1rem}
.kritisch-liste{list-style:none;padding:0;margin:0;max-height:22rem;overflow-y:auto}
.kritisch-liste li{padding:.45rem 0;border-bottom:1px solid var(--linie);overflow-wrap:anywhere}.kritisch-liste li:last-child{border:0}
.schwere{display:inline-block;padding:0 .45rem;border-radius:20px;font-size:.72rem;font-weight:600;background:var(--code);color:var(--grau)}
.schwere.s2{background:rgba(234,179,8,.18);color:var(--warn)}.schwere.s3{background:rgba(249,115,22,.18);color:var(--warn)}
.schwere.s4{background:rgba(185,28,28,.14);color:var(--schlecht)}.schwere.s5{background:#7f1d1d;color:#fff}

/* Sicherheit der Zielorganisation (Rollout) */
.sicherheit{display:inline-block;padding:0 .5rem;border-radius:20px;font-size:.75rem;font-weight:600}
.sicherheit.sicher{background:rgba(21,128,61,.14);color:var(--gut)}
.sicherheit.unsicher{background:rgba(180,83,9,.16);color:var(--warn)}
.warn-text{color:var(--warn)}
.skript-feld{font-family:ui-monospace,Consolas,monospace;font-size:.8rem;min-height:14rem;white-space:pre;overflow:auto}
tr.unsicher td{background:rgba(180,83,9,.06)}
.skript-kopf{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:space-between;margin-top:.6rem}

/* Desktop-Menue: per Burger ein-/ausblendbar, Breite ziehbar, Schrift und Logo wachsen mit. */
.menue-knopf,.menue-griff{display:none}
@media(min-width:861px){
 .leiste{width:var(--menue-breite,320px);font-size:clamp(12px,calc(var(--menue-breite,320px) / 21),15px);padding-top:3.4rem}
 .leiste a,.leiste .ich{overflow-wrap:anywhere}
 .logo img{max-width:min(330px,100%)}
 .menue-knopf{display:flex;position:fixed;top:10px;left:10px;z-index:60;width:42px;height:42px;padding:0;border-radius:50%;
   align-items:center;justify-content:center;background:#141414;color:var(--rot);border:2px solid var(--rot);box-shadow:0 2px 8px rgba(0,0,0,.3)}
 .menue-knopf:hover{background:#000}
 .menue-griff{display:block;flex:none;width:7px;margin-left:-3px;position:sticky;top:0;height:100vh;cursor:col-resize;z-index:5;touch-action:none}
 .menue-griff:hover,.menue-griff:focus-visible,.menue-griff.zieht{background:linear-gradient(90deg,transparent 2px,var(--rot2) 2px,var(--rot2) 5px,transparent 5px)}
 html.menue-zu .leiste,html.menue-zu .menue-griff{display:none}
 html.menue-zu main{padding-left:4.2rem}
 html.menue-zieht,html.menue-zieht *{cursor:col-resize!important;user-select:none}
}
.menue-toast{position:fixed;top:12px;left:64px;z-index:70;max-width:min(420px,calc(100vw - 80px));background:#141414;color:#fff;
  border-left:4px solid var(--rot);border-radius:8px;padding:.6rem .9rem;font-size:.9rem;box-shadow:0 4px 16px rgba(0,0,0,.35)}

/* Nie horizontal scrollen: Inhalte umbrechen, Tabellen passen Schrift und Abstaende an ihre Breite an. */
main{overflow-wrap:break-word}
.tabelle{container-type:inline-size}
th,td{overflow-wrap:break-word;hyphens:auto}
.tabelle .umbruch{overflow-wrap:anywhere}   /* nur Zellen mit ueberlangen Woertern/URLs (menue.js) */
@container (max-width:1000px){.tabelle table{font-size:.9rem}.tabelle th,.tabelle td{padding:.45rem .5rem}}
@container (max-width:760px){.tabelle table{font-size:.82rem}.tabelle th,.tabelle td{padding:.35rem .4rem}
 .tabelle th{font-size:.68rem;letter-spacing:0}.tabelle .nw,.tabelle .status{white-space:normal}.tabelle th.sortierbar{white-space:normal}}
@container (max-width:520px){.tabelle table{font-size:.76rem}.tabelle th,.tabelle td{padding:.3rem .3rem}.tabelle .status{white-space:normal}}
/* Sehr schmal (Handy): jede Tabellenzeile als Block "Spalte: Wert" (Beschriftung setzt menue.js aus dem Kopf). */
.tabelle .zellwert{display:contents}
@container (max-width:520px){
 .tabelle table,.tabelle tbody,.tabelle tr{display:block;width:100%}
 .tabelle thead{display:none}
 .tabelle tr{border-bottom:1px solid var(--linie);padding:.35rem 0}.tabelle tbody tr:last-child{border-bottom:0}
 .tabelle td{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);gap:.6rem;align-items:baseline;border:0;padding:.18rem .6rem}
 .tabelle td::before{content:attr(data-label);font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.02em;
   color:var(--grau);overflow-wrap:anywhere}
 .tabelle td .zellwert{display:block;min-width:0}
 .tabelle td:not([data-label]),.tabelle td[data-label=""]{display:block}
 .tabelle td:not([data-label])::before,.tabelle td[data-label=""]::before{content:none}
}

/* Persoenliche Darstellung (Profil): Logo-Auswahl */
.darstellung-wahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:.8rem}
.darstellung-option{display:flex!important;flex-direction:row!important;align-items:center;gap:.8rem;border:2px solid var(--linie);border-radius:12px;padding:.7rem;cursor:pointer;font-weight:400!important}
.darstellung-option:has(input:checked),.darstellung-option.gewaehlt{border-color:var(--rot);box-shadow:0 0 0 3px rgba(244,152,25,.15)}
.darstellung-option img{width:72px;height:72px;border-radius:50%;background:#000;flex:none}
.darstellung-option span{display:flex;flex-direction:column}
/* Seriös: weißes Siegel im Menü halb so groß wie das Ninja-Logo (mobile Kopfzeile bleibt 32 px) */
@media(min-width:861px){.leiste .logo-serioes img{width:50%;max-width:min(165px,50%)}}
.laeuft-band{width:100%!important;background-image:linear-gradient(45deg,rgba(255,255,255,.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.25) 50%,rgba(255,255,255,.25) 75%,transparent 75%);background-size:28px 28px;animation:streifen 1s linear infinite}

/* Hell/Dunkel-Schalter oben rechts */
.farbe-knopf{position:fixed;top:12px;right:16px;z-index:61;width:60px;height:30px;padding:0;border-radius:15px;
  border:2px solid var(--linie);background:var(--karte);box-shadow:0 2px 8px rgba(0,0,0,.25);cursor:pointer}
.farbe-symbol{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#141414;transition:left .2s ease;
  display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1}
.farbe-symbol::before{content:"³E";color:#F49819}
.farbe-knopf[aria-checked=true] .farbe-symbol{left:32px;background:#F49819}
.farbe-knopf[aria-checked=true] .farbe-symbol::before{content:"°0";color:#fff}
.farbe-knopf:focus-visible{outline:3px solid var(--blau);outline-offset:2px}
main{padding-top:max(1.5rem,52px)}
@media(max-width:860px){.farbe-knopf{top:16px;right:72px}main{padding-top:1rem}}
/* Organisation: "Nach neuen Geraeten suchen" - zwei Karten in einer */
.karte.innen{margin:0;min-width:0;background:transparent;padding:.8rem 1rem}
.karte.innen h3{margin:0}
/* News-Editor */
.editor-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;margin:.4rem 0 -.2rem}.editor-leiste button{min-width:2.2rem}.editor-leiste .trenner{width:1px;align-self:stretch;background:var(--linie);margin:0 .2rem}
.news-bild{display:block;max-width:100%;height:auto;border-radius:8px;margin:.4rem 0}.news-vorschau{margin:.6rem 0}
/* Allgemeine Suche */
.such-box{margin:.2rem 0 .6rem}.such-box input{width:100%;box-sizing:border-box}
.such-vorschlaege{position:fixed;z-index:80;background:var(--karte);color:var(--text);border:1px solid var(--linie);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.35);overflow:auto;padding:.4rem}
.leiste .such-vorschlaege a{color:var(--text);opacity:1;display:inline;padding:0;font-size:inherit}.leiste .such-vorschlaege a.knopf{display:inline-block;padding:.15rem .5rem;font-size:.78rem}
.such-eintrag{padding:.35rem .5rem;border-radius:8px;display:flex;flex-direction:column;gap:.1rem}.such-eintrag.aktiv,.such-eintrag:hover{background:var(--bg)}.such-haupt{font-weight:600}
.such-gruppe-titel{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--grau);margin:.5rem .5rem .1rem}
.such-ops{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.25rem}.leiste .such-vorschlaege a.such-alle{display:block;padding:.4rem .5rem;color:var(--blau)}
.such-treffer{list-style:none;padding:0;margin:0}.such-treffer li{padding:.55rem 0;border-bottom:1px solid var(--linie)}.such-treffer li:last-child{border-bottom:0}

/* Inventar-Popup */
.inventar-dialog { border: 0; padding: 0; background: transparent; width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
.inventar-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.inventar-karte { margin: 0; max-height: calc(100vh - 32px); overflow: auto; }
.inventar-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.inventar-kopf h2 { margin: 0; }
.inventar-aktionen { display: flex; gap: 8px; align-items: center; }
.inventar-register { display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0; border-bottom: 1px solid var(--linie); }
.inventar-register button { border-radius: 6px 6px 0 0; border-bottom: 0; }
.inventar-register button[aria-selected="true"] { font-weight: 700; box-shadow: inset 0 -3px 0 var(--rot); }
.inventar-filter { width: 100%; max-width: 360px; margin: 4px 0 8px; }
.inventar-felder { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0 0 12px; }
.inventar-felder dt { color: var(--grau); }
.inventar-felder dd { margin: 0; overflow-wrap: anywhere; }
tr.inventar-warn td { color: var(--schlecht); font-weight: 600; }
@media (max-width: 600px) { .inventar-felder { grid-template-columns: 1fr; } }
.inventar-urteil { border: 1px solid var(--linie); border-left: 6px solid var(--grau); border-radius: 8px; padding: 10px 14px; margin: 0 0 12px; }
.inventar-urteil.gut { border-left-color: var(--gut); }
.inventar-urteil.warn { border-left-color: var(--warn); }
.inventar-urteil.schlecht { border-left-color: var(--schlecht); }
.inventar-urteil strong { font-size: 1.05rem; }
.inventar-urteil ul { margin: 6px 0 0; }
.such-auswahl-feld { display: block; width: 100%; max-width: 360px; margin: 0 0 4px; }
.such-auswahl-info { display: block; }
/* Popups (Wartung: Meldungen auf Endgeraeten) */
dialog.popup { border: 0; padding: 0; background: transparent; width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
dialog.popup::backdrop { background: rgba(0, 0, 0, .45); }
.popup-karte { margin: 0; max-height: calc(100vh - 32px); overflow: auto; }
.popup-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.popup-kopf h2 { margin: 0; }
.geraete-kopf { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 6px 0; }
.geraete-kopf input[type=search] { max-width: 280px; }
.geraete-gruppen { max-height: 340px; overflow: auto; border: 1px solid var(--linie); border-radius: 8px; padding: 6px 10px; }
.geraete-gruppe { border: 0; border-bottom: 1px solid var(--linie); margin: 0; padding: 6px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 12px; }
.geraete-gruppe legend { font-weight: 600; padding: 0; grid-column: 1 / -1; }
.vorschau-liste { display: grid; gap: 8px; margin: 8px 0; }
.vorschau-meldung { border-left: 4px solid var(--rot); background: var(--code); border-radius: 6px; padding: 6px 10px; }
.vorschau-meldung p { margin: 2px 0 0; }
textarea.code { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; }
/* Ladeanzeige: Kreis aus orangen Punkten ueber leicht unscharfem Hintergrund */
.lade-schicht { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 18px; background: rgba(20, 22, 26, .28); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: lade-ein .2s ease-out; }
.lade-schicht[hidden] { display: none; }
.lade-kreis { position: relative; width: 72px; height: 72px; }
.lade-kreis span { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--rot); box-shadow: 0 0 8px rgba(244, 152, 25, .55); opacity: .2; animation: lade-punkt 1.2s linear infinite; }
.lade-text { margin: 0; padding: 4px 12px; border-radius: 999px; background: var(--karte); color: var(--text); font-weight: 600;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .2); }
@keyframes lade-punkt { 0% { opacity: 1; } 100% { opacity: .2; } }
@keyframes lade-ein { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lade-kreis span { animation-duration: 3s; } }
.ohne-org summary { cursor: pointer; list-style: none; }
.ohne-org summary::-webkit-details-marker { display: none; }
.ohne-org[open] summary .knopf { display: none; }
.ohne-org-aktionen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.filter-auswahl { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 6px; }
.filter-auswahl input { flex: 1 1 220px; max-width: 420px; }
.filter-auswahl-info:empty { display: none; }
.filter-auswahl-vorschlaege { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.filter-auswahl-vorschlaege .chip { border-radius: 999px; padding: 2px 10px; }

/* Freigabe-Popup fuer Claude (mcp_freigabe.html) */
.freigabe-popup{max-width:540px;margin:0 auto;padding:1rem}
.freigabe-popup .formular button{margin-right:.5rem}
.befehl{white-space:pre-wrap;word-break:break-all;user-select:all}
/* Server-Eye -> NinjaOne: einfache Sicht */
.umzug-fortschritt h2{margin:0 0 .6rem}.umzug-fortschritt .balken{height:30px}
.umzug-schritte{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.8rem;margin:0 0 1rem}
.kachel.schritt{display:flex;flex-direction:column;gap:.35rem;border-top:4px solid var(--linie)}
.kachel.schritt.tun{border-top-color:var(--rot)}.kachel.schritt.pruefen{border-top-color:var(--warn)}
.kachel.schritt .schritt-titel{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text)}
.kachel.schritt .knopf{margin-top:auto;align-self:flex-start}
/* Suchfeld + "Filtern" nebeneinander (filter.js / auswahl.js) */
.filter-zeile{display:flex;gap:.4rem;align-items:center;flex:1 1 260px;min-width:0;max-width:520px}.filter-zeile input{flex:1;min-width:0;width:auto}.filter-zeile button{flex:0 0 auto}
.filter-info{display:block;margin:.2rem 0}.filter-info:empty{display:none}
label>.filter-zeile{margin-top:.25rem}
/* Checkliste Wartungsticket: Abhaken als gut sichtbarer, runder weisser Knopf (Checkbox bleibt fuer Tastatur/Screenreader) */
.haken-knopf{position:relative;display:inline-flex;align-items:center;gap:.35rem;background:#fff;color:#14161a;border:2px solid #b91c1c;border-radius:999px;padding:.3rem .85rem;font-weight:600;white-space:nowrap;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.25);user-select:none;transition:background-color .15s,border-color .15s}
.haken-knopf input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.haken-knopf::before{content:'❌ offen'}
.haken-knopf:has(input:checked){border-color:#15803d}
.haken-knopf:has(input:checked)::before{content:'✅ erledigt'}
.haken-knopf:hover{background:#f1f3f5}
.haken-knopf:has(input:focus-visible){outline:3px solid var(--rot);outline-offset:2px}
.haken-knopf:has(input:disabled){cursor:not-allowed;opacity:.65}
.haken-wer{display:block;margin-top:.2rem}
.zurueck-zeile{margin:0 0 .5rem}
/* Persoenliches Kopfmenue (Favoriten) */
.favoriten-leiste{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;margin:0 0 .75rem;padding:.4rem .5rem;border:1px solid var(--linie);border-radius:10px;background:var(--karte)}
.favoriten-leiste a{padding:.3rem .7rem;border-radius:999px;text-decoration:none;color:var(--text);border:1px solid var(--linie)}
.favoriten-leiste a:hover,.favoriten-leiste a.aktiv{border-color:var(--rot);color:var(--rot)}
.favoriten-leiste .favoriten-bearbeiten{margin-left:auto;border:0;color:var(--grau)}
.willkommen{text-align:center;padding:3rem 1rem}
/* FUN: Arsch-Piss-Tickets 2.0 */
.fun-reiter{margin:.5rem 0 1rem;display:flex;gap:.4rem;flex-wrap:wrap}
.fun-ergebnis{text-align:center;font-size:clamp(2.2rem,7vw,4.5rem);font-weight:800;color:var(--rot);padding:1.2rem 0}
.fun-knoepfe{justify-content:center}
.fun-uebernehmen{max-width:640px;margin:1rem auto 0}
.fun-wurf{display:grid;grid-template-columns:2.5rem 1fr auto auto;gap:.75rem;align-items:center;padding:.55rem .7rem;border:1px solid var(--linie);border-radius:9px;margin:.4rem 0}
.fun-wurf.fun-weg b{text-decoration:line-through 2px;color:var(--grau)}
.fun-koenig{text-align:center}.fun-koenig-name{font-size:2.2rem;font-weight:800;margin:.4rem 0;color:var(--rot)}
.fun-nachfrage{border-color:var(--rot)}
.fun-frage{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--linie)}
.fun-frage form{display:inline-flex;gap:.3rem}
.fun-glocke{display:inline-block;padding:.1rem .45rem;border-radius:999px;background:var(--rot);color:#141414;font-weight:700;font-size:.85rem}
.fun-teilnehmer input[name=name]{max-width:280px}
/* Wuerfel-Animation */
.fun-wuerfel{position:relative;overflow:hidden}
.fun-dreht{animation:fun-flackern .12s infinite alternate;filter:blur(.3px)}
@keyframes fun-flackern{from{transform:translateY(-3px) scale(.98);opacity:.75}to{transform:translateY(3px) scale(1.02);opacity:1}}
.fun-schuetteln{display:inline-block;animation:fun-schuetteln .35s infinite}
@keyframes fun-schuetteln{0%{transform:rotate(0)}25%{transform:rotate(-18deg) scale(1.1)}50%{transform:rotate(14deg)}75%{transform:rotate(-8deg) scale(1.05)}100%{transform:rotate(0)}}
.fun-landet{animation:fun-pop .6s cubic-bezier(.2,1.6,.4,1) both;color:var(--gut)}
@keyframes fun-pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.18);opacity:1}100%{transform:scale(1)}}
.fun-konfetti{position:absolute;inset:0;pointer-events:none}
.fun-konfetti span{position:absolute;top:28%;width:9px;height:14px;border-radius:2px;opacity:0;animation:fun-fallen 1.5s ease-out forwards}
@keyframes fun-fallen{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--dx),260px) rotate(var(--dreh))}}
@media (prefers-reduced-motion:reduce){.fun-dreht,.fun-schuetteln,.fun-landet,.fun-konfetti span{animation:none}}
.fun-rest{text-align:center;margin:-.6rem 0 .8rem}
.fun-spannung{color:var(--schlecht);text-shadow:0 0 18px rgba(244,152,25,.6)}
.fun-los{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.fun-los.fun-gedrueckt{transform:scale(.96);box-shadow:0 0 0 4px rgba(244,152,25,.35)}
.fun-unscharf{filter:blur(7px);letter-spacing:.12em}
.login-emblem{width:220px;height:220px}.emblem-disc{stroke-width:7}.emblem-ring{stroke:#e17f0c;stroke-width:1.5}.emblem-inner{fill:#fffaf2;stroke:#f7bd70;stroke-width:1}.badge-type{fill:#202124;font:700 11px system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:1.2px}.badge-bottom{font-size:8px;letter-spacing:1.1px}.mask{fill:#f39819;stroke:#df7906;stroke-width:2.5}.band{fill:#202124;stroke:#202124;stroke-width:1}.eye,.band-k{fill:#fff}.mask-detail{fill:none;stroke:#e57e0a;stroke-width:2;stroke-linecap:round}.login-wordmark{display:none}.login-mark{padding-bottom:.75rem}
.hair{fill:#111216;stroke:#08090b;stroke-width:1.5;stroke-linejoin:round}.face{fill:#111216;stroke:#08090b;stroke-width:2}.band{fill:#f39819;stroke:#dc7600;stroke-width:2}.ribbon{fill:#f39819;stroke:#dc7600;stroke-width:1.5;stroke-linejoin:round}.ribbon-front{filter:drop-shadow(0 2px 1px #9f4f00)}.eyes-white{fill:#fff}.eyes-black{fill:#111216}.brow{fill:none;stroke:#111216;stroke-width:3;stroke-linecap:round}.k-round{fill:#f39819;stroke:#171717;stroke-width:2.5}.k-letter{fill:#171717;font:700 19px system-ui,sans-serif}.ninja-figure{transform-box:fill-box;transform-origin:center;transition:filter .25s ease;filter:drop-shadow(0 3px 2px #17171728)}.login-emblem{perspective:700px}.login-mark:hover .ninja-figure{animation:ninja-3d .95s cubic-bezier(.2,.8,.25,1);filter:drop-shadow(0 8px 4px #d9780866)}.login-mark:hover .ribbon-front{animation:ribbon-flick .7s ease-in-out}.login-mark:hover .emblem-disc{filter:drop-shadow(0 0 12px #f3981970)}@keyframes ninja-3d{0%{transform:rotateY(0) rotateX(0) translateY(0) scale(1)}35%{transform:perspective(500px) rotateY(-22deg) rotateX(7deg) translateY(-5px) scale(1.04)}68%{transform:perspective(500px) rotateY(12deg) rotateX(-4deg) translateY(-2px) scale(1.02)}100%{transform:rotateY(0) rotateX(0) translateY(0) scale(1)}}@keyframes ribbon-flick{0%,100%{transform:translateX(0) rotate(0)}40%{transform:translateX(-3px) rotate(-3deg)}70%{transform:translateX(2px) rotate(2deg)}}@media(prefers-reduced-motion:reduce){.login-mark:hover .ninja-figure,.login-mark:hover .ribbon-front{animation:none}.ninja-figure{transition:none}}
.mitte:has(.login-mark) .schmal{max-width:506px}.login-emblem{width:min(320px,80vw);height:auto}.login-mark{padding-bottom:.45rem}@media(max-width:480px){.login-emblem{width:min(280px,76vw)}}
.face{fill:#f39819;stroke:#c65d00;stroke-width:2.5}.badge-top{letter-spacing:2.7px}.badge-bottom{font-size:8.5px;letter-spacing:1.15px}
/* Ticket-Tabellen: Alter als Ampel, alte Tickets mit Randmarkierung */
.status.warn{background:rgba(244,152,25,.16);color:var(--warn)}
.tickettabelle tr.ticket-warn td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.tickettabelle tr.ticket-fehler td:first-child{box-shadow:inset 3px 0 0 var(--schlecht)}
.tickettabelle td{vertical-align:top}
.tickettabelle td.betreff{min-width:14rem}
.tickettabelle td.kunde{min-width:10rem}
.tickettabelle td.umbruch,.tickettabelle td.betreff,.tickettabelle td.kunde{overflow-wrap:break-word;word-break:normal;hyphens:auto}
.tickettabelle summary{white-space:nowrap}
.tickettabelle details[open]{min-width:min(420px,80vw)}
/* Kompakte Knoepfe: .knopf.klein gab es bisher nur fuer <button> - Link-Knoepfe waren dadurch ueberall gross */
.knopf.klein{padding:.15rem .5rem;font-size:.8rem}
.knopf.mini,button.mini{padding:.1rem .5rem;font-size:.78rem;line-height:1.5;border-radius:6px;white-space:nowrap}
.tabelle td .knopf,.tabelle td button{white-space:nowrap}
.tabelle td .knopf:not(.haupt),.tabelle td button:not(.haupt){padding:.15rem .55rem;font-size:.8rem}
.knopf.remote-an{border-color:var(--gut);color:var(--gut);font-weight:600}
.knopf.remote-an:hover{background:rgba(21,128,61,.1)}
.knopf.remote-aus{color:var(--grau)}
/* Navigation (Desktop): kompaktere Eintraege, aktive Seite mit Akzentbalken, Gruppenkoepfe ruhiger */
@media(min-width:861px){
 .leiste a{padding:.32rem .65rem;line-height:1.35}
 .leiste .menue-gruppe{margin:.4rem 0}
 .leiste .menue-gruppe>summary{padding:.42rem .7rem;font-size:.7rem}
 .leiste .menue-gruppe a{border-radius:6px;margin:1px .3rem}
 .leiste .menue-gruppe a.aktiv{box-shadow:inset 3px 0 0 var(--rot)}
 .leiste .menue-gruppe:has(a.aktiv)>summary{background:rgba(0,0,0,.18)}
}
/* WireGuard-Profil: Schritte mit Warte-Ring */
.wg-schritte{display:grid;gap:.8rem;margin:.5rem 0 1rem}
.wg-schritt{display:flex;gap:.8rem;align-items:flex-start;padding:.7rem .9rem;border:1px solid var(--linie);border-radius:10px}
.wg-punkt{flex:none;width:1.6rem;height:1.6rem;border-radius:50%;display:grid;place-items:center;font-weight:700;background:rgba(21,128,61,.14);color:var(--gut)}
.wg-schritt[data-status] .wg-punkt{display:none}
.wg-schritt[data-status=aktiv] .wg-punkt,.wg-schritt[data-status=fehler] .wg-punkt{display:grid}
.wg-schritt[data-status=aktiv] .wg-punkt::before{content:'✓'}
.wg-schritt[data-status=aktiv]{border-color:var(--gut)}
.wg-schritt[data-status=fehler] .wg-punkt{background:rgba(185,28,28,.14);color:var(--schlecht)}
.wg-schritt[data-status=fehler] .wg-punkt::before{content:'!'}
.wg-schritt[data-status=fehler]{border-color:var(--schlecht)}
.warte-ring{flex:none;width:1.6rem;height:1.6rem;border-radius:50%;border:3px solid var(--linie);border-top-color:var(--rot);animation:warte-dreh 0.9s linear infinite}
.wg-schritt:not([data-status=wartet]) .warte-ring{display:none}
@keyframes warte-dreh{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.warte-ring{animation-duration:3s}}
/* Microsoft 365 */
.warn-text{color:var(--warn)}
.m365-schritte{margin:.4rem 0 .8rem 1.1rem;line-height:1.6}.m365-schritte form{margin:.3rem 0}
.m365-meldung{padding:.45rem .7rem;border-left:3px solid var(--linie);margin:.35rem 0;background:var(--code);border-radius:0 8px 8px 0}
.m365-meldung.warn{border-left-color:var(--warn)}.m365-meldung.schlecht{border-left-color:var(--schlecht)}
.tabelle tr.m365-schlecht td:first-child{box-shadow:inset 3px 0 0 var(--schlecht)}
.tabelle tr.m365-warn td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.m365-karte{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;justify-content:space-between}
/* Ticket-Karte (Popup) */
dialog.ticket-karte{width:min(760px,96vw);max-height:92vh;overflow:auto;border:1px solid var(--linie);border-radius:14px;padding:1rem 1.2rem;background:var(--karte);color:var(--text);box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog.ticket-karte::backdrop{background:rgba(0,0,0,.45)}
.ticket-karte-kopf{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;border-bottom:1px solid var(--linie);padding-bottom:.6rem;margin-bottom:.6rem}
.ticket-karte-kopf h2{margin:.15rem 0 0;font-size:1.15rem}
.ticket-karte-aktionen{display:flex;gap:.4rem;flex:none}
.ticket-fakten{display:grid;grid-template-columns:max-content 1fr;gap:.25rem .9rem;margin:.4rem 0 .8rem}
.ticket-fakten dt{color:var(--grau);font-size:.85rem}.ticket-fakten dd{margin:0}
.ticket-karte h3{font-size:.95rem;margin:.8rem 0 .4rem}
.ticket-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem .8rem}
@media(max-width:560px){.ticket-raster{grid-template-columns:1fr}}
.ticket-schnell{display:flex;flex-wrap:wrap;gap:.35rem;margin:.4rem 0}
.ticket-kunde,.ticket-erinnerung{border-top:1px solid var(--linie);margin-top:.8rem;padding-top:.6rem}
.ticket-kunde summary{cursor:pointer;font-weight:600}
.ticket-glocke{font-size:.9rem}
/* Erinnerungs-Karten */
.erinnerung-stapel{position:fixed;right:1rem;bottom:1rem;z-index:10000;display:flex;flex-direction:column;gap:.6rem;max-width:min(380px,92vw)}
.erinnerung-karte{background:var(--karte);border:2px solid var(--rot);border-radius:12px;padding:.8rem .9rem;box-shadow:0 12px 40px rgba(0,0,0,.35);animation:erinnerung-rein .25s ease-out}
.erinnerung-kopf{display:flex;gap:.4rem;align-items:center;font-size:.85rem;color:var(--grau)}
.erinnerung-titel{display:block;font-weight:700;margin:.3rem 0;color:var(--text)}
.erinnerung-notiz{background:var(--code);border-radius:6px;padding:.3rem .5rem;margin:.3rem 0;font-size:.9rem}
.erinnerung-knoepfe{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.5rem}
@keyframes erinnerung-rein{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.erinnerung-karte{animation:none}}
.m365-domaene{border-top:1px solid var(--linie);padding:.45rem 0}.m365-domaene summary{cursor:pointer}
.m365-domaene .tabelle{margin:.5rem 0 0}
.mcp-eingang{display:flex;flex-wrap:wrap;gap:.4rem .8rem;align-items:center}.mcp-eingang p{margin:0}

.m365-domaene{border-top:1px solid var(--linie);padding:.45rem 0}.m365-domaene summary{cursor:pointer}
.m365-domaene .tabelle{margin:.5rem 0 0}
.mcp-eingang{display:flex;flex-wrap:wrap;gap:.4rem .8rem;align-items:center}.mcp-eingang p{margin:0}

/* Kein backdrop-filter ueber dem Video: der Browser muesste sonst jedes Videobild neu weichzeichnen (Ruckeln) */
/* Anmeldung: Video im ganzen Hintergrund, Siegel oben rechts, nur glasartige Felder mit leichtem Relief */
.login-video{position:fixed;inset:0;width:100vw;height:100vh;object-fit:cover;z-index:-2;background:#111}
.login-schleier{position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at center,rgba(0,0,0,.05),rgba(0,0,0,.45))}
body:has(.login-video){background:#111;color:#fff}
.login-ecklogo{position:fixed;top:clamp(12px,3vw,32px);right:clamp(12px,3vw,32px);width:clamp(84px,11vw,150px);height:auto;z-index:2;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))}
.login-buehne{min-height:100vh;display:grid;place-items:center;padding:16px}
.login-inhalt{width:min(380px,100%)}
.login-formular{display:flex;flex-direction:column;gap:.9rem}
.glas-feld,.login-buehne input:not([type=hidden]):not([type=checkbox]):not([type=radio]){width:100%;box-sizing:border-box;padding:.85rem 1.1rem;font-size:1.05rem;
  color:#fff;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);border-radius:14px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.35),inset 0 -1px 0 rgba(255,255,255,.18),0 1px 0 rgba(255,255,255,.22)}
.glas-feld::placeholder,.login-buehne input::placeholder{color:rgba(255,255,255,.78)}
.glas-feld:focus,.login-buehne input:focus{outline:none;background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.75);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.3),0 0 0 3px rgba(243,152,25,.55)}
.glas-los,.login-buehne button{align-self:flex-end;padding:.55rem 1.2rem;font-weight:600;color:#fff;cursor:pointer;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.45);border-radius:999px;
  box-shadow:0 2px 10px rgba(0,0,0,.25)}
.glas-los:hover,.login-buehne button:hover{background:rgba(243,152,25,.85);border-color:rgba(243,152,25,.95)}
.login-hinweis{margin:0 0 .9rem;padding:.6rem .9rem;border-radius:12px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.3)}
.login-hinweis.fehler{border-color:rgba(255,120,120,.8)}
/* 2FA/Passwort/Codes: gleiches Bild, Inhalt auf dezentem dunklem Glas (lesbar), ohne Karte */
.glas-panel .login-inhalt{width:min(460px,100%);padding:1.2rem 1.4rem;border-radius:18px;background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.2)}
.glas-panel h1,.glas-panel h2,.glas-panel label,.glas-panel p{color:#fff}
.glas-panel a{color:#ffd29a}
.glas-panel .qr{background:#fff}
.nur-felder h1{margin:0}
/* Anmeldung: Felder im unteren Drittel, damit der Ninja in der Bildmitte frei bleibt */
.login-buehne.nur-felder{place-items:end center;padding-bottom:clamp(40px,14vh,170px)}
/* Video bewusst auch bei "Animationen aus" (Windows) - wer es nicht will, schaltet es im Profil ab */
.login-video{transform:translateZ(0);backface-visibility:hidden}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glas-feld,.login-buehne input{background:rgba(255,255,255,.28)}}
.login-ruhig{background:radial-gradient(circle at 50% 35%,#3b2a14 0%,#1a1612 45%,#0d0d0f 100%)}
body:has(.login-ruhig){background:#0d0d0f;color:#fff}

/* QR-Etikett 35 x 35 mm: Code mit Keuthen-Siegel, darunter Rechnername fett (per etikett.js nie breiter als der Code) */
.geraete-etikett{box-sizing:border-box;width:35mm;height:35mm;padding:1.6mm 1.6mm 1.2mm;background:#fff;color:#000;border:.2mm dashed #b8b8b8;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;overflow:hidden;font-family:Arial,Helvetica,sans-serif;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.etikett-qr{position:relative;width:27.5mm;height:27.5mm;flex:none}
.etikett-qr svg{width:100%;height:100%;display:block;shape-rendering:crispEdges}
.etikett-qr-logo{position:absolute;left:50%;top:50%;width:23%;height:23%;transform:translate(-50%,-50%);box-sizing:border-box;padding:1.2%;
  background:#fff;border-radius:50%;object-fit:contain}
.etikett-host{display:block;width:27.5mm;text-align:center;white-space:nowrap;overflow:hidden;font-weight:700;font-size:9pt;line-height:1.15;color:#000}
.etikett-oben{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:flex-start}
.etikett-vorschau{flex:none;padding:.8rem;background:#fff;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.12)}
.etikett-vorschau .geraete-etikett{zoom:2}
.etikett-angaben{flex:1 1 260px;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.4rem 1rem;margin:0;align-content:start}
.etikett-angaben dt{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;opacity:.7;padding-top:.15rem}
.etikett-angaben dd{margin:0;overflow-wrap:anywhere}
.etikett-druckwahl{display:flex;flex-wrap:wrap;gap:.6rem}
.etikett-druckwahl button{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;min-width:150px;text-align:left}
.etikett-druckwahl small{font-weight:400;opacity:.8}
.etikett-bogen{display:none}
@media (max-width:600px){.etikett-vorschau .geraete-etikett{zoom:1.6}.etikett-angaben{grid-template-columns:1fr}}
@media print{
  @page{size:A4 portrait;margin:10mm}
  body.etikett-druck{background:#fff!important;margin:0!important;padding:0!important;display:block!important}
  body.etikett-druck>:not(.etikett-bogen){display:none!important}
  body.etikett-druck .etikett-bogen{display:grid!important;grid-template-columns:repeat(5,35mm);grid-auto-rows:35mm;gap:3mm}
  .etikett-bogen .geraete-etikett{break-inside:avoid}
}
/* Asset-Management: Seriennummer in der Geraeteliste nachtragen */
.sn-form{display:flex;gap:.3rem;align-items:center;margin:0}
.sn-form input{width:10rem;max-width:100%;padding:.2rem .45rem;font-size:.85rem}
.sn-form button{padding:.2rem .55rem;font-size:.8rem}

/* Monitoring: Karten als Filter, Filterzeile, NinjaOne-Ersatzwerte, Problem-Detailkarte */
a.monitoring-kpi{display:block;color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s}
a.monitoring-kpi:hover,a.monitoring-kpi:focus-visible{border-color:var(--rot);box-shadow:0 0 0 3px rgba(244,152,25,.15)}
a.monitoring-kpi.aktiv{border-color:var(--rot);box-shadow:0 0 0 3px rgba(244,152,25,.25)}
.monitoring-aktiv{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:.2rem 0 .6rem}
.chip{display:inline-block;padding:.1rem .55rem;border-radius:999px;background:rgba(244,152,25,.15);border:1px solid rgba(244,152,25,.45)}
.monitoring-filterzeile th{padding-top:0;cursor:default;font-weight:400}
.monitoring-filterknoepfe{display:flex;gap:.35rem;margin-top:.4rem;flex-wrap:wrap}
.monitoring-gruppe table{min-width:1250px}
.quelle-n1{display:inline-block;font-size:.65rem;font-weight:700;padding:0 .3rem;border-radius:4px;background:#26a69a;color:#fff;vertical-align:middle;letter-spacing:.03em}
.problem-knopf{cursor:pointer;border:0;font:inherit}
.problem-karte{position:fixed;z-index:60;width:min(420px,calc(100vw - 16px));max-height:min(70vh,520px);overflow:auto;padding:.8rem 1rem;
  background:var(--karte);color:inherit;border:1px solid var(--linie);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.problem-karte ul{list-style:none;margin:.5rem 0;padding:0}.problem-karte li{padding:.4rem 0;border-top:1px solid var(--linie)}
.schwere{display:inline-block;font-size:.72rem;padding:0 .35rem;border-radius:4px;background:#999;color:#fff}
.schwere-2{background:#f0b400;color:#111}.schwere-3{background:#f08000}.schwere-4{background:#d9480f}.schwere-5{background:#b00020}

/* Pfeil nach oben: transparent-orange, unten rechts, nur wenn hochscrollen moeglich */
.nach-oben{position:fixed;right:clamp(12px,2.5vw,28px);bottom:clamp(12px,2.5vw,28px);z-index:40;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(243,152,25,.6);background:rgba(243,152,25,.28);color:#c96f00;font-size:1.35rem;font-weight:700;line-height:1;cursor:pointer;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 4px 14px rgba(0,0,0,.15);opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .2s,transform .2s,background .2s}
.nach-oben.sichtbar{opacity:1;pointer-events:auto;transform:none}
.nach-oben:hover,.nach-oben:focus-visible{background:rgba(243,152,25,.85);color:#fff}
html[data-farbe=dunkel] .nach-oben{color:#ffb54d}
@media print{.nach-oben,.aktionen-knopf{display:none!important}}
/* Dezenter Aktionsknopf je Geraetezeile */
.aktionen-knopf{float:right;margin:0 0 0 .3rem;padding:0 .45rem;min-width:0;line-height:1.4;font-size:1rem;font-weight:700;border-radius:8px;
  background:transparent;border:1px solid var(--linie);color:inherit;opacity:.65;cursor:pointer}
.aktionen-knopf:hover,.aktionen-knopf:focus-visible{opacity:1;border-color:var(--rot)}
/* Brotkrumen + kompakte Geraetekarte (QR-Scan-Ziel) */
.brotkrumen{margin:.2rem 0 .6rem}
.asset-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:.8rem}.asset-kopf h1{margin:0;font-size:1.4rem;overflow-wrap:anywhere}
.asset-fakten{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.35rem .9rem;margin:.8rem 0}.asset-fakten dt{opacity:.7}.asset-fakten dd{margin:0;overflow-wrap:anywhere}
.asset-bearbeiten{margin:.4rem 0 .8rem}.asset-bearbeiten summary{cursor:pointer;font-weight:600}
.asset-formular{margin-top:.6rem}.asset-zeile{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:.6rem}
.asset-knoepfe{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0}
.asset-titel{font-size:1.05rem;margin:1rem 0 .4rem}
.asset-liste{list-style:none;margin:0;padding:0}.asset-liste li{padding:.45rem 0;border-top:1px solid var(--linie);overflow-wrap:anywhere}
.inventar-voll summary{cursor:pointer}
/* Smartphone: nie seitlich scrollen - Tabellen als Karten, Spaltenname vor jedem Wert */
@media (max-width:700px){
  html,body{overflow-x:hidden}
  .tabelle{overflow-x:visible!important}
  table.mobil-karten,.monitoring-gruppe table.mobil-karten{min-width:0!important;width:100%;border-collapse:separate}
  table.mobil-karten thead tr:first-child{display:none}
  table.mobil-karten thead .monitoring-filterzeile{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
  table.mobil-karten thead .monitoring-filterzeile th{display:block;padding:0;border:0}
  table.mobil-karten tbody,table.mobil-karten tr,table.mobil-karten td{display:block;width:auto}
  table.mobil-karten tbody tr{border:1px solid var(--linie);border-radius:12px;padding:.5rem .7rem;margin:0 0 .6rem;background:var(--karte)}
  table.mobil-karten td{border:0!important;padding:.2rem 0!important;overflow-wrap:anywhere;white-space:normal!important}
  table.mobil-karten td[data-label]::before{content:attr(data-label);display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;opacity:.6}
  table.mobil-karten td:empty{display:none}
  .kopf{flex-wrap:wrap}
  .problem-karte{left:8px!important;right:8px;width:auto}
}
/* DATEV-Stoerung: wie Notfall hervorgehoben */
.kritisch-teil.datev-alarm{border:2px solid var(--schlecht,#c62828);background:rgba(198,40,40,.07);border-radius:12px;padding:.6rem .9rem}
.kritisch-teil.datev-alarm h3{color:var(--schlecht,#c62828)}
/* Backup-Board */
button.monitoring-kpi{text-align:left;font:inherit;color:inherit;cursor:pointer}
.backup-kpi small{display:block;margin-top:.15rem}
.monitoring-kpi.aktiv,.backup-kpi.aktiv{border-color:var(--rot);box-shadow:0 0 0 3px rgba(244,152,25,.25)}
.backup-filter{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:.6rem .9rem;align-items:end}
.backup-filter label{display:flex;flex-direction:column;gap:.2rem;margin:0}
.backup-filter-knoepfe{display:flex;gap:.4rem;flex-wrap:wrap}
.backup-filter [data-backup-info]{grid-column:1/-1;margin:0}
.backup-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:.9rem;margin:1rem 0}
.backup-karte{background:var(--karte);border:1px solid var(--linie);border-left:5px solid #d9480f;border-radius:12px;padding:.8rem .9rem;display:flex;flex-direction:column;gap:.3rem;min-width:0}
.backup-karte.akt-neu{border-left-color:#b00020;box-shadow:0 0 0 2px rgba(176,0,32,.15)}
.backup-karte.akt-alt{border-left-color:#8b5a00}
.backup-karte.bestaetigt{border-left-color:#888;opacity:.9}
.backup-karte header{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.backup-karte h3{margin:.1rem 0;font-size:1.1rem;overflow-wrap:anywhere}
.backup-karte p{margin:0;overflow-wrap:anywhere}
.backup-karte footer{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:auto;padding-top:.4rem}
.backup-zustand{font-size:.72rem;font-weight:700;padding:0 .35rem;border-radius:4px;background:#b00020;color:#fff}
.backup-alter{margin-left:auto;font-size:.8rem;opacity:.8}
.backup-ok-liste{list-style:none;margin:.5rem 0;padding:0}.backup-ok-liste li{padding:.3rem 0;border-top:1px solid var(--linie);overflow-wrap:anywhere}
/* Passkey */
.glas-passkey{display:block;width:100%;margin-top:.9rem;padding:.7rem 1rem;font-size:1rem;font-weight:600;color:#fff;cursor:pointer;
  background:rgba(255,255,255,.12);border:1px dashed rgba(255,255,255,.55);border-radius:14px}
.glas-passkey:hover,.glas-passkey:focus-visible{background:rgba(243,152,25,.8);border-style:solid}
.passkey-liste{list-style:none;padding:0;margin:.5rem 0}.passkey-liste li{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:.35rem 0;border-top:1px solid var(--linie)}
.passkey-liste form{margin-left:auto}
/* Smartphone: Hell/Dunkel-Schalter scrollt mit der Kopfzeile weg, statt ueber dem Inhalt zu schweben */
@media(max-width:860px){.farbe-knopf{position:absolute}}

/* Tickets: Faelligkeit, Ansprechpartner, Kontaktmenue, Kommunikation + Editor, stille Aktualisierung */
.faellig-ueber{color:#fff;background:#b00020;border-radius:4px;padding:0 .3rem;font-weight:700}
.faellig-heute{color:#111;background:#f5a623;border-radius:4px;padding:0 .3rem;font-weight:700}
.faellig-bald{color:#8a5a00;font-weight:600}
.tickettabelle td.kunde{min-width:12rem}
.ansprechpartner{margin-top:.15rem;opacity:.85;overflow-wrap:anywhere}
.ansprechpartner a{margin-left:.35rem;text-decoration:none}
.ticket-faellig{display:flex;flex-wrap:wrap;gap:.4rem .8rem;align-items:end;margin:.4rem 0}
.ticket-geaendert{margin:0 0 .6rem}
.ticket-anwesend{margin:0 0 .6rem;padding:.3rem .6rem;border-radius:8px;background:rgba(66,133,244,.12);border:1px solid rgba(66,133,244,.4)}
.entwurf-hinweis{margin:.15rem 0 0}
.liste-neu{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:0 0 .6rem}
.kontakt-menue a small{margin-left:.3rem}
.kontakt-menue .menue-laedt{padding:.3rem .6rem}
dialog.ticket-kommunikation{width:min(900px,96vw);max-height:92vh;overflow:auto;border:1px solid var(--linie);border-radius:14px;padding:1rem 1.2rem;background:var(--karte);color:var(--text);box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog.ticket-kommunikation::backdrop{background:rgba(0,0,0,.45)}
.komm-verlauf{display:flex;flex-direction:column;gap:.4rem;margin:.4rem 0 1rem}
.komm-eintrag{border:1px solid var(--linie);border-radius:10px;padding:.4rem .7rem;background:var(--hinter,transparent)}
.komm-eintrag summary{cursor:pointer;overflow-wrap:anywhere}
.komm-kommentar{border-left:4px solid #26a69a}.komm-mail{border-left:4px solid #4285f4}
.komm-html{margin-top:.4rem;overflow-wrap:anywhere;max-height:50vh;overflow:auto}
.komm-html blockquote,.editor-feld blockquote{margin:.4rem 0;padding:.2rem .8rem;border-left:3px solid var(--linie);opacity:.85}
.komm-html pre,.editor-feld pre,.mail-text{white-space:pre-wrap;background:rgba(127,127,127,.12);border-radius:8px;padding:.6rem .8rem;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.88rem;overflow:auto}
.komm-html code,.editor-feld code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;background:rgba(127,127,127,.15);border-radius:4px;padding:0 .25rem}
.komm-html pre code,.editor-feld pre code{background:none;padding:0}
.komm-html table{border-collapse:collapse}.komm-html td,.komm-html th{border:1px solid var(--linie);padding:.2rem .4rem}
.komm-antwort{border-top:1px solid var(--linie);padding-top:.6rem}
.editor-leiste{display:flex;flex-wrap:wrap;gap:.25rem;margin:.4rem 0 .3rem;padding:.3rem;border:1px solid var(--linie);border-radius:10px 10px 0 0;background:rgba(127,127,127,.06)}
.editor-leiste button{min-width:2rem;font-weight:700}
.editor-feld{min-height:12rem;max-height:50vh;overflow:auto;padding:.7rem .9rem;border:1px solid var(--linie);border-top:0;border-radius:0 0 10px 10px;background:var(--karte);line-height:1.5}
.editor-feld:focus{outline:2px solid var(--rot);outline-offset:-2px}
.editor-feld:empty::before{content:"Antwort schreiben …";opacity:.5}
.ticket-filter{display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:end;margin:.4rem 0 .8rem}
.ticket-filter label{margin:0}
/* Ticket-Kurzbeschreibung */
.ticket-kurz{margin:.6rem 0;padding:.5rem .8rem;border:1px solid var(--linie);border-radius:10px;background:rgba(127,127,127,.05)}
.ticket-kurz h3{margin:0 0 .3rem}
.ticket-kurz-text,.ticket-kurz-voll{margin:.2rem 0;white-space:pre-wrap;overflow-wrap:anywhere}
.ticket-ki-text{margin:.5rem 0 0;padding:.4rem .6rem;border-left:3px solid #8e6cf0;background:rgba(142,108,240,.08);border-radius:6px;white-space:pre-wrap}
.ticket-kurzzeile{margin-top:.15rem;max-width:42rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:700px){.ticket-kurzzeile{white-space:normal}}