/* IT-Manager Web – Gestaltung
   Ruhige, helle Fläche mit einer Akzentfarbe; Menü oben; Bearbeitung im
   Popup. Alle Farben stehen als Variablen – die dunkle Fassung tauscht nur
   diese aus. */

/* ================================================================ Farben */
:root {
  --bg:#f5f6fa; --bg-grad:#eef1f8;
  --surface:#ffffff; --surface-alt:#f8f9fc; --surface-hover:#f2f4f9;
  --border:#e4e7ef; --border-soft:#eef0f5;
  --text:#101828; --subtext:#475467; --muted:#8a94a6;
  --primary:#4f46e5; --primary-dk:#4338ca; --primary-lt:#eef0ff; --primary-ring:rgba(79,70,229,.18);
  --accent:#0ea5e9; --accent-dk:#0284c7; --accent-lt:#e0f2fe;
  --success:#059669; --success-lt:#e7f7f0; --success-bd:#bfe8d6;
  --warn:#e11d48; --warn-lt:#fdecf0; --warn-bd:#f7c6d2;
  --orange:#d97706; --orange-lt:#fdf4e4; --orange-bd:#f5dcae;
  --teal:#0d9488;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow:0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  --shadow-lg:0 12px 32px -8px rgba(16,24,40,.18), 0 4px 10px -4px rgba(16,24,40,.08);
  --topbar-bg:rgba(255,255,255,.82);
  --radius:14px; --radius-sm:10px;
  --wrap:1480px;
  color-scheme:light;
}
:root[data-theme="dark"] {
  --bg:#0c111c; --bg-grad:#101727;
  --surface:#151c2b; --surface-alt:#111827; --surface-hover:#1b2436;
  --border:#263045; --border-soft:#1f2839;
  --text:#e6e9f0; --subtext:#aab3c5; --muted:#6f7a90;
  --primary:#818cf8; --primary-dk:#a5b4fc; --primary-lt:#1e2144; --primary-ring:rgba(129,140,248,.25);
  --accent:#38bdf8; --accent-dk:#7dd3fc; --accent-lt:#0c2a3d;
  --success:#34d399; --success-lt:#0f2a22; --success-bd:#1c4a3b;
  --warn:#fb7185; --warn-lt:#2f1520; --warn-bd:#5a2433;
  --orange:#fbbf24; --orange-lt:#2d2410; --orange-bd:#5a4717;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 3px rgba(0,0,0,.45);
  --shadow-lg:0 16px 40px -8px rgba(0,0,0,.6);
  --topbar-bg:rgba(17,23,36,.82);
  color-scheme:dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0c111c; --bg-grad:#101727;
    --surface:#151c2b; --surface-alt:#111827; --surface-hover:#1b2436;
    --border:#263045; --border-soft:#1f2839;
    --text:#e6e9f0; --subtext:#aab3c5; --muted:#6f7a90;
    --primary:#818cf8; --primary-dk:#a5b4fc; --primary-lt:#1e2144; --primary-ring:rgba(129,140,248,.25);
    --accent:#38bdf8; --accent-dk:#7dd3fc; --accent-lt:#0c2a3d;
    --success:#34d399; --success-lt:#0f2a22; --success-bd:#1c4a3b;
    --warn:#fb7185; --warn-lt:#2f1520; --warn-bd:#5a2433;
    --orange:#fbbf24; --orange-lt:#2d2410; --orange-bd:#5a4717;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 1px 3px rgba(0,0,0,.45);
    --shadow-lg:0 16px 40px -8px rgba(0,0,0,.6);
    --topbar-bg:rgba(17,23,36,.82);
    color-scheme:dark;
  }
}

/* ================================================================ Grundlagen */
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { margin:0; padding:0; }
body {
  font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--text); font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--primary); text-decoration:none; }
a:hover { color:var(--primary-dk); }
h1,h2,h3 { margin:0 0 6px; letter-spacing:-.01em; }
code { font-family:"Cascadia Code",Consolas,"SF Mono",monospace; font-size:.9em;
       background:var(--surface-alt); border:1px solid var(--border-soft);
       padding:1px 6px; border-radius:6px; }
.mono { font-family:"Cascadia Code",Consolas,"SF Mono",monospace; font-size:.92em; }
.nowrap { white-space:nowrap; }
.num { text-align:right; font-variant-numeric:tabular-nums; }
.small { font-size:12.5px; }
.tiny { font-size:10.5px; }
.muted { color:var(--subtext); }
.warn-text { color:var(--warn); font-weight:600; }
.orange-text { color:var(--orange); }
.mt { margin-top:22px; }
.empty { padding:26px 0; text-align:center; color:var(--muted); }
.i { flex:none; vertical-align:-3px; }
.wrap { max-width:var(--wrap); margin:0 auto; padding-left:28px; padding-right:28px; }
::selection { background:var(--primary-ring); }

/* ================================================================ Kopfleiste */
.topbar { position:sticky; top:0; z-index:40; background:var(--topbar-bg);
  -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--border); }
.topbar-inner { max-width:var(--wrap); margin:0 auto; padding:0 20px;
  display:flex; align-items:center; gap:10px; height:60px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--text);
         margin-right:14px; flex:none; }
.brand:hover { color:var(--text); }
.brand-mark { display:inline-grid; place-items:center; width:34px; height:34px;
  border-radius:10px; color:#fff; font-weight:700; font-size:13px; letter-spacing:.5px;
  background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);
  box-shadow:0 4px 12px -4px var(--primary); }
.brand-mark.big { width:52px; height:52px; font-size:18px; border-radius:14px; }
.brand-text { font-weight:650; font-size:15px; white-space:nowrap; }

.mainnav { display:flex; align-items:center; gap:2px; flex:1; min-width:0; }
.nav-top { display:inline-flex; align-items:center; gap:7px; height:38px;
  padding:0 11px; border-radius:10px; border:0; background:none; cursor:pointer;
  font:inherit; font-size:13.5px; font-weight:550; color:var(--subtext);
  white-space:nowrap; transition:background .15s,color .15s; }
.nav-top:hover, .nav-drop.open > .nav-top { background:var(--surface-hover); color:var(--text); }
.nav-top.active { color:var(--primary); background:var(--primary-lt); }
.nav-top .chev { opacity:.6; transition:transform .2s; }
.nav-drop { position:relative; }
.nav-drop.open > .nav-top .chev { transform:rotate(180deg); }
.nav-panel { position:absolute; top:calc(100% + 8px); left:0; min-width:250px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:8px; display:none; z-index:50;
  animation:drop .16s ease-out; }
.nav-panel.right { left:auto; right:0; }
.nav-drop.open > .nav-panel { display:block; }
@keyframes drop { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.nav-panel-head { display:flex; align-items:center; gap:8px; padding:6px 10px 8px;
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); border-bottom:1px solid var(--border-soft); margin-bottom:6px; }
.nav-link { display:flex; align-items:center; gap:10px; padding:8px 10px;
  border-radius:9px; color:var(--text); font-size:13.5px; }
.nav-link:hover { background:var(--surface-hover); color:var(--text); }
.nav-link.active { background:var(--primary-lt); color:var(--primary); font-weight:600; }
.nav-link-ico { width:26px; height:26px; display:inline-grid; place-items:center;
  border-radius:7px; background:var(--surface-alt); border:1px solid var(--border-soft);
  font-size:13px; color:var(--subtext); flex:none; }
.nav-link.active .nav-link-ico { background:var(--surface); color:var(--primary); }

.topbar-right { display:flex; align-items:center; gap:6px; margin-left:auto; flex:none; }
.icon-btn { display:inline-grid; place-items:center; width:38px; height:38px;
  border-radius:10px; border:0; background:none; color:var(--subtext); cursor:pointer; }
.icon-btn:hover { background:var(--surface-hover); color:var(--text); }
.burger { display:none; }
.avatar { width:36px; height:36px; border-radius:50%; border:0; cursor:pointer;
  display:inline-grid; place-items:center; font:inherit; font-size:12.5px; font-weight:700;
  color:#fff; background:linear-gradient(135deg,var(--accent),var(--primary)); }
.avatar.big { width:42px; height:42px; font-size:14px; cursor:default; }
.user-card { display:flex; align-items:center; gap:12px; padding:8px 10px 12px;
  border-bottom:1px solid var(--border-soft); margin-bottom:6px; }
.user-card small { display:block; color:var(--muted); font-size:12px; }
.t-light { display:none; }
:root[data-theme="dark"] .t-dark { display:none; }
:root[data-theme="dark"] .t-light { display:inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .t-dark { display:none; }
  :root:not([data-theme="light"]) .t-light { display:inline; }
}

/* ================================================================ Seitenkopf */
.pagehead { background:linear-gradient(180deg,var(--bg-grad),var(--bg));
  border-bottom:1px solid var(--border-soft); }
.pagehead .wrap { padding-top:26px; padding-bottom:22px; }
.crumb { font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--primary); margin-bottom:4px; }
.pagehead h1 { font-size:26px; font-weight:700; margin:0; letter-spacing:-.02em; }
.content { padding-top:24px; padding-bottom:40px; }
.foot { padding-top:10px; padding-bottom:30px; color:var(--muted); font-size:12px; }

/* ================================================================ Karten */
.card { background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:22px 24px; margin-bottom:20px;
  box-shadow:var(--shadow-sm); }
.card.narrow { max-width:46em; }
/* Breite Tabellen scrollen innerhalb der Karte, statt die Seite zu verbreitern */
.card { overflow-x:auto; }
.grid-2 > *, .grid-3 > * { min-width:0; }
.card h2 { font-size:16px; font-weight:650; color:var(--text); }
.card-head { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.card-head h2 { flex:1; margin:0; }
.card-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
h3.sec { font-size:11.5px; font-weight:700; color:var(--muted); text-transform:uppercase;
  letter-spacing:.07em; margin:22px 0 10px; padding-bottom:8px;
  border-bottom:1px solid var(--border-soft); }

.head-card { background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px 22px; margin-bottom:18px; box-shadow:var(--shadow-sm);
  display:grid; gap:12px; grid-template-columns:1fr auto; align-items:start;
  position:relative; overflow:hidden; }
.head-card::before { content:""; position:absolute; inset:0 auto 0 0; width:4px;
  background:linear-gradient(180deg,var(--primary),var(--accent)); }
.head-card h2 { font-size:20px; margin:0; }
.head-card p { margin:2px 0 0; }
.head-right { text-align:right; display:grid; gap:6px; justify-items:end; }
.head-actions { grid-column:1/-1; display:flex; gap:8px; flex-wrap:wrap;
  padding-top:12px; border-top:1px solid var(--border-soft); }

.panel { border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:16px 18px; background:var(--surface-alt); }
.panel > summary { cursor:pointer; font-weight:600; color:var(--primary); list-style:none; }
.panel > summary::-webkit-details-marker { display:none; }
.panel-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.panel-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.gruen-panel { background:var(--success-lt); border-color:var(--success-bd); }
form.panel strong, .panel > strong { display:block; margin-bottom:10px; }

.grid-2 { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); }
.grid-3 { display:grid; gap:0 18px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.grid-2 > .card { margin-bottom:0; }
.grid-2 + .card, .grid-2 + .grid-2, .card + .grid-2 { margin-top:20px; }
.span-2 { grid-column:span 2; }
.self-end { align-self:end; }

/* ================================================================ Kennzahlen */
.kpi-row { display:grid; gap:14px; margin-bottom:22px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.kpi { position:relative; overflow:hidden; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px;
  display:flex; flex-direction:column; gap:4px; color:var(--text); box-shadow:var(--shadow-sm);
  transition:transform .15s, box-shadow .15s, border-color .15s; }
.kpi::after { content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--k, var(--primary)); opacity:.9; }
a.kpi:hover { color:var(--text); transform:translateY(-2px); box-shadow:var(--shadow-lg);
  border-color:var(--k, var(--primary)); }
.kpi-title { font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); }
.kpi-value { font-size:27px; font-weight:700; line-height:1.15; letter-spacing:-.02em;
  color:var(--k, var(--text)); font-variant-numeric:tabular-nums; }
.kpi-sub { font-size:12px; color:var(--subtext); }
.kpi.blau { --k:var(--primary); }
.kpi.gruen { --k:var(--success); }
.kpi.orange { --k:var(--orange); }
.kpi.rot { --k:var(--warn); }

/* ================================================================ Tabellen */
.table-wrap { overflow-x:auto; margin:0 -6px; padding:0 6px; }
.table { width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px; }
.table th { text-align:left; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); padding:10px 12px;
  border-bottom:1px solid var(--border); white-space:nowrap; background:var(--surface); }
.table td { padding:11px 12px; border-bottom:1px solid var(--border-soft); vertical-align:middle; }
.table tbody tr { transition:background .12s; }
.table tbody tr:hover td { background:var(--surface-hover); }
.table tbody tr:last-child td { border-bottom:none; }
.table tr.clickable { cursor:pointer; }
.table th.num, .table td.num { text-align:right; }
.table td strong { font-weight:600; }
.row-muted td { color:var(--muted); }
.row-done td { color:var(--subtext); }
.row-active td, .table tr.row-sel td { background:var(--primary-lt); }
.table tr.row-abw td, .table tr.row-dev td { background:var(--orange-lt); }
.row-actions { text-align:right; white-space:nowrap; }
.ico-btn { display:inline-grid; place-items:center; min-width:30px; height:30px; padding:0 6px;
  border-radius:8px; font-size:14px; line-height:1; color:var(--subtext); }
.ico-btn:hover { background:var(--primary-lt); color:var(--primary); }
.ico-btn.danger:hover { background:var(--warn-lt); color:var(--warn); }

.tag { display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:999px;
  font-size:11px; font-weight:650; letter-spacing:.02em; white-space:nowrap;
  border:1px solid transparent; }
.tag::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.75; }
.tag.tiny::before { display:none; }
.tag.big { font-size:12.5px; padding:4px 12px; }
.tag.tiny { font-size:10px; padding:1px 7px; }
.tag.gruen { background:var(--success-lt); color:var(--success); border-color:var(--success-bd); }
.tag.rot { background:var(--warn-lt); color:var(--warn); border-color:var(--warn-bd); }
.tag.orange { background:var(--orange-lt); color:var(--orange); border-color:var(--orange-bd); }
.tag.blau { background:var(--primary-lt); color:var(--primary); border-color:transparent; }
.tag.grau { background:var(--surface-alt); color:var(--muted); border-color:var(--border); }

.bar { height:6px; border-radius:99px; background:var(--border-soft); overflow:hidden; margin:2px 0 2px; }
.bar > span { display:block; height:100%; border-radius:99px; background:var(--primary); }
.bar > span.gruen { background:var(--success); }
.bar > span.orange { background:var(--orange); }
.bar > span.rot { background:var(--warn); }

.kv { display:grid; grid-template-columns:auto 1fr; gap:7px 16px; margin:0; font-size:13.5px; }
.kv dt { color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; padding-top:2px; }
.kv dd { margin:0; }

.feed { list-style:none; margin:0; padding:0; }
.feed li { padding:10px 0; border-bottom:1px solid var(--border-soft); display:grid; gap:2px; }
.feed li:last-child { border-bottom:none; }
.feed-when { font-size:11.5px; color:var(--muted); font-family:"Cascadia Code",Consolas,monospace; }
.feed-detail { font-size:12.5px; color:var(--subtext); }

/* ================================================================ Reiter */
.tabs { display:flex; gap:4px; margin-bottom:18px; overflow-x:auto; padding:4px;
  background:var(--surface-alt); border:1px solid var(--border); border-radius:12px; width:max-content; max-width:100%; }
.tab { padding:7px 15px; font-size:13.5px; font-weight:600; color:var(--subtext);
  border-radius:9px; white-space:nowrap; }
.tab:hover { color:var(--text); background:var(--surface-hover); }
.tab.active { color:var(--primary); background:var(--surface); box-shadow:var(--shadow); }

/* ================================================================ Formulare */
label { display:block; margin-bottom:14px; }
label > span { display:block; font-size:12px; font-weight:600; color:var(--subtext); margin-bottom:5px; }
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],input[type=search],input[type=file],select,textarea {
  width:100%; padding:9px 12px; font:inherit; color:var(--text);
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); outline:none; box-shadow:var(--shadow-sm);
  transition:border-color .15s, box-shadow .15s; }
select { appearance:none; -webkit-appearance:none; padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; }
select[multiple] { background-image:none; padding-right:12px; }
textarea { resize:vertical; min-height:64px; }
input:focus,select:focus,textarea:focus { border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-ring); }
input:disabled,select:disabled,input[readonly] { background:var(--surface-alt); color:var(--muted); }
input[type=checkbox], input[type=radio] { accent-color:var(--primary); width:16px; height:16px; }
.f-check { display:flex; align-items:center; gap:8px; margin-bottom:0; cursor:pointer; }
.f-check input { width:16px; margin:0; }
.f-check span { margin:0; font-size:13.5px; font-weight:450; color:var(--text); }
.hint { font-size:12px; color:var(--muted); margin:6px 0 0; display:block; }
.form-foot { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px;
  padding-top:16px; border-top:1px solid var(--border-soft); }
.form-foot .spacer { flex:1; }

.filterbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:6px 0 16px;
  padding:10px; background:var(--surface-alt); border:1px solid var(--border-soft);
  border-radius:12px; }
.filterbar select { width:auto; min-width:160px; padding-top:8px; padding-bottom:8px; }
.filterbar .f-search { flex:1 1 240px; min-width:180px; padding:8px 12px 8px 36px;
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 12px center; }
.filterbar label { margin:0; }

.dropzone { display:flex; flex-direction:column; align-items:center; gap:6px; margin:0;
  padding:30px 20px; border:2px dashed var(--border); border-radius:var(--radius);
  background:var(--surface-alt); color:var(--subtext); text-align:center; cursor:pointer;
  transition:border-color .15s, background .15s; }
.dropzone:hover, .dropzone.over { border-color:var(--primary); background:var(--primary-lt); color:var(--primary); }
.dropzone input[type=file] { margin-top:10px; max-width:420px; box-shadow:none; }

.check-list { display:grid; gap:2px 14px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  max-height:420px; overflow-y:auto; padding:10px; border:1px solid var(--border-soft);
  border-radius:var(--radius-sm); background:var(--surface-alt); }
.check-item { padding:6px 8px; border-radius:8px; }
.check-item:hover { background:var(--surface-hover); }
.check-item[hidden] { display:none; }
.check-item small { font-size:11.5px; }

fieldset.langs { border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 16px; margin:0 0 14px; }
fieldset.langs legend { font-size:12px; font-weight:600; color:var(--subtext); padding:0 6px; }
.lang-opt { display:flex; align-items:flex-start; gap:9px; margin-bottom:8px; cursor:pointer; }
.lang-opt input { width:auto; margin-top:3px; }
.lang-opt span { display:block; }
.lang-opt small { display:block; font-size:11.5px; }

/* ================================================================ Schaltflächen */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 16px; border:1px solid transparent; border-radius:var(--radius-sm);
  font:inherit; font-weight:600; font-size:13.5px; line-height:1.2; cursor:pointer;
  white-space:nowrap; transition:background .15s, border-color .15s, box-shadow .15s, transform .05s;
  color:var(--text); background:var(--surface); }
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn .i { margin:0 -2px; }
.btn.primary { background:var(--primary); color:#fff; box-shadow:0 1px 2px rgba(16,24,40,.1), inset 0 1px 0 rgba(255,255,255,.12); }
.btn.primary:hover:not(:disabled) { background:var(--primary-dk); color:#fff; }
:root[data-theme="dark"] .btn.primary, :root[data-theme="dark"] .btn.primary:hover:not(:disabled) { color:#0c111c; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn.primary,
  :root:not([data-theme="light"]) .btn.primary:hover:not(:disabled) { color:#0c111c; }
}
.btn.accent { background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff; }
.btn.accent:hover { filter:brightness(1.07); color:#fff; }
.btn.ghost { background:var(--surface); color:var(--text); border-color:var(--border); box-shadow:var(--shadow-sm); }
.btn.ghost:hover { background:var(--surface-hover); color:var(--text); }
.btn.subtle { background:transparent; color:var(--subtext); }
.btn.subtle:hover { background:var(--surface-hover); color:var(--text); }
.btn.danger { background:var(--surface); color:var(--warn); border-color:var(--warn-bd); }
.btn.danger:hover { background:var(--warn-lt); color:var(--warn); }
.btn.wide { width:100%; }
.btn.small-btn { padding:6px 11px; font-size:12.5px; }

/* ================================================================ Unterschrift */
.sig-card { border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px 18px; background:var(--surface-alt); }
.sig-card.signed { background:var(--success-lt); border-color:var(--success-bd); }
.sig-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.sig-head strong { flex:1; }
.sig-pad { width:100%; height:200px; background:#fff; border:1px dashed var(--border);
  border-radius:var(--radius-sm); cursor:crosshair; display:block; touch-action:none; }
.wide-pad { height:230px; }
.sig-actions { display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }
.sig-view { background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:8px; display:inline-block; margin:6px 0; }
.sig-svg { display:block; max-width:100%; height:auto; }

/* ================================================================ Meldungen */
.flash { display:flex; gap:10px; align-items:flex-start; padding:12px 16px;
  border-radius:var(--radius-sm); margin-bottom:18px; font-size:13.5px;
  border:1px solid transparent; animation:flashIn .25s ease-out; }
@keyframes flashIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.flash::before { font-weight:700; }
.flash.ok { background:var(--success-lt); color:var(--success); border-color:var(--success-bd); }
.flash.ok::before { content:"✓"; }
.flash.warn { background:var(--orange-lt); color:var(--orange); border-color:var(--orange-bd); }
.flash.warn::before { content:"!"; }
.flash.error { background:var(--warn-lt); color:var(--warn); border-color:var(--warn-bd); }
.flash.error::before { content:"✕"; }
.flash.floating { position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:60;
  max-width:38em; box-shadow:var(--shadow-lg); }

/* ================================================================ Anmeldung */
body.bare { display:grid; place-items:center; min-height:100vh;
  background:radial-gradient(1200px 600px at 10% -10%, var(--primary-lt), transparent 60%),
             radial-gradient(900px 500px at 110% 110%, var(--accent-lt), transparent 60%), var(--bg); }
.login-wrap { width:100%; max-width:400px; padding:20px; }
.login-card { background:var(--surface); border:1px solid var(--border); border-radius:20px;
  padding:34px 30px; box-shadow:var(--shadow-lg); }
.login-brand { text-align:center; margin-bottom:24px; }
.login-brand h2 { margin:14px 0 2px; font-size:21px; }
.login-brand p { margin:0; font-size:12.5px; color:var(--muted); }

/* ================================================================ Rack-Plan */
.rack { border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface-alt);
  overflow:hidden; max-width:460px; }
.rack-he { display:grid; grid-template-columns:40px 1fr; border-bottom:1px solid var(--border-soft);
  min-height:24px; font-size:12px; align-items:stretch; }
.rack-he:last-child { border-bottom:none; }
.rack-no { background:var(--bg); color:var(--muted); display:grid; place-items:center;
  font-family:Consolas,monospace; font-size:10.5px; border-right:1px solid var(--border-soft); }
.rack-slot { padding:3px 10px; display:flex; align-items:center; gap:8px; }
.rack-slot.belegt { background:var(--primary-lt); color:var(--primary); font-weight:600; }
.rack-slot a { color:inherit; }

/* ================================================================ Popup */
dialog.modal { padding:0; border:0; background:transparent; max-width:none; max-height:none;
  width:min(1120px, calc(100vw - 32px)); height:min(900px, calc(100vh - 40px)); overflow:visible; }
dialog.modal::backdrop { background:rgba(10,14,25,.45); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  animation:fade .2s ease-out; }
dialog.modal.narrow { width:min(720px, calc(100vw - 32px)); }
dialog.modal[open] .modal-shell { animation:pop .22s cubic-bezier(.2,.9,.3,1.2); }
@keyframes pop { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
.modal-shell { height:100%; display:flex; flex-direction:column; background:var(--bg);
  border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-lg); overflow:hidden; }
.modal-head { display:flex; align-items:center; gap:12px; padding:12px 12px 12px 22px;
  background:var(--surface); border-bottom:1px solid var(--border); }
.modal-head h2 { flex:1; margin:0; font-size:16.5px; font-weight:650;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.modal-body { position:relative; flex:1; min-height:0; }
.modal-body iframe { width:100%; height:100%; border:0; display:block; background:var(--bg); }
.modal-loading { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.modal-body.ready .modal-loading { display:none; }
.spinner { width:28px; height:28px; border-radius:50%; border:3px solid var(--border);
  border-top-color:var(--primary); animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
body.modal-open { overflow:hidden; }

/* Inhalt im Popup */
body.in-modal { background:var(--bg); }
.modal-content { padding:20px 22px 28px; }
body.in-modal .card { padding:18px 20px; margin-bottom:16px; }
/* Die Speicherleiste bleibt beim Blättern sichtbar – je Formular */
body.in-modal .form-foot { position:sticky; bottom:0; z-index:5; margin-top:14px;
  padding:12px 16px; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; box-shadow:0 -8px 20px -14px rgba(16,24,40,.35); }

/* ================================================================ Schmal */
/* Menü: Neun Bereiche passen erst ab großer Breite mit Beschriftung.
   Darunter zeigen nur der aktive und der geöffnete Bereich ihren Namen,
   die übrigen ihr Symbol (Name als Tooltip). */
@media (max-width:1680px) {
  .nav-top { padding:0 9px; }
  .nav-top span { display:none; }
  .nav-top.active span, .nav-drop.open > .nav-top span { display:inline; }
}
@media (max-width:1200px) {
  .hide-m { display:none; }
}
@media (max-width:900px) {
  .wrap { padding-left:16px; padding-right:16px; }
  .topbar-inner { padding:0 12px; }
  .burger { display:inline-grid; order:3; }
  .brand-text { display:none; }
  .topbar-right { order:2; }
  .mainnav { display:none; position:fixed; top:60px; left:0; right:0; bottom:0;
    flex-direction:column; align-items:stretch; gap:4px; padding:14px 16px 40px;
    background:var(--surface); overflow-y:auto; z-index:45; }
  .mainnav.open { display:flex; }
  .nav-top { width:100%; justify-content:flex-start; height:44px; }
  .nav-top span { display:inline; }
  .nav-top .chev { margin-left:auto; }
  .nav-panel { position:static; box-shadow:none; border:0; padding:0 0 6px 26px; min-width:0;
    animation:none; background:transparent; }
  .nav-panel-head { display:none; }
  .nav-panel.right { position:absolute; right:0; top:calc(100% + 8px); left:auto;
    border:1px solid var(--border); box-shadow:var(--shadow-lg); background:var(--surface); padding:8px; min-width:230px; }
  .pagehead .wrap { padding-top:18px; padding-bottom:16px; }
  .pagehead h1 { font-size:21px; }
  .card { padding:16px; }
  .hide-s { display:none; }
  .span-2 { grid-column:auto; }
  .head-card { grid-template-columns:1fr; }
  .head-right { text-align:left; justify-items:start; }
  .grid-2 { grid-template-columns:1fr; }
  dialog.modal { width:100vw; height:100dvh; }
  .modal-shell { border-radius:0; }
  .modal-content { padding:14px 14px 24px; }
}
@media print {
  .topbar,.pagehead .crumb,.btn,.filterbar,.tabs,.row-actions,.head-actions,.foot,dialog { display:none !important; }
  body { background:#fff; }
  .card { border:none; box-shadow:none; padding:0; margin-bottom:12px; }
  .tab-panel[hidden] { display:block !important; }
}