/* LANITUM Assist -- Gestaltungssystem. Eine Datei für Rahmen und Bausteine;
   Farben/Schriften in themes.css. Ziel: ruhige, dichte Fachanwendung --
   Seitenleiste, Kopfzeile, Panels mit Haarlinien, dichte Tabellen, klare
   Zustände. Keine Schatten-Karten, keine Animationen, kein Mono-Fließtext. */

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);min-height:100%;}
body{font-family:var(--font);font-size:14px;line-height:1.5;font-variant-numeric:tabular-nums;}
a{color:var(--accent-ink);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;line-height:1.25;letter-spacing:0;}
h1{font-size:20px;font-weight:var(--h1-weight);}
h2{font-size:15px;font-weight:600;}
h3{font-size:13px;font-weight:600;}
p{margin:0 0 10px;}
code,kbd,.mono{font-family:var(--mono);font-size:12.5px;}
code{background:var(--surface-3);border-radius:3px;padding:1px 4px;}
.mono{color:var(--muted);}
.muted{color:var(--muted);}
.faint{color:var(--faint);}
.klein{font-size:12px;}
.num,.rechts{text-align:right;}
.nowrap{white-space:nowrap;}
.inactive{opacity:.55;}
hr{border:0;border-top:1px solid var(--line);margin:16px 0;}
svg.ikon{width:16px;height:16px;flex:none;vertical-align:-3px;}

/* ---------- Rahmen: Seitenleiste + Kopfzeile + Inhalt ---------- */
.shell{display:grid;grid-template-columns:var(--seite-breite) minmax(0,1fr);min-height:100vh;}
.seite{
  position:sticky;top:0;height:100vh;overflow-y:auto;
  background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;
}
.seite-kopf{height:var(--leiste-hoehe);display:flex;align-items:center;padding:0 16px;border-bottom:1px solid var(--line);flex:none;}
.marke{display:flex;align-items:center;gap:9px;color:var(--ink);font-weight:600;font-size:14px;letter-spacing:.01em;}
.marke:hover{text-decoration:none;}
.marke b{font-weight:600;color:var(--accent-ink);}
.marke svg{width:22px;height:22px;flex:none;}
.navi{padding:10px 8px 16px;flex:1 1 auto;}
.navi-gruppe{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);padding:14px 10px 4px;}
.navi-eintrag{
  display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--radius-sm);
  color:var(--ink);font-size:13.5px;line-height:1.3;
}
.navi-eintrag svg.ikon{color:var(--muted);}
.navi-eintrag:hover{background:var(--surface-2);text-decoration:none;}
.navi-eintrag.aktiv{background:var(--accent-soft);color:var(--accent-ink);font-weight:600;}
.navi-eintrag.aktiv svg.ikon{color:var(--accent-ink);}
.seite-fuss{border-top:1px solid var(--line);padding:12px 16px 14px;font-size:12.5px;display:flex;flex-direction:column;gap:8px;flex:none;}
.seite-fuss .etikett{display:block;font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;}
.seite-fuss .wert{display:block;color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.seite-fuss a.mandant{display:block;}
.seite-fuss a.mandant .wert{white-space:normal;line-height:1.3;}
.seite-fuss a.mandant{color:inherit;border:1px solid var(--line);border-radius:var(--radius-sm);padding:6px 8px;background:var(--surface-2);}
.seite-fuss a.mandant:hover{border-color:var(--line-strong);text-decoration:none;}
.seite-fuss .darstellung{display:flex;align-items:center;gap:8px;}
.seite-fuss .darstellung select{flex:1 1 auto;height:28px;font-size:12px;padding:0 6px;}
.seite-fuss .system{color:var(--faint);font-size:11.5px;line-height:1.35;}

.haupt{display:flex;flex-direction:column;min-width:0;}
.leiste{
  position:sticky;top:0;z-index:20;height:var(--leiste-hoehe);
  display:flex;align-items:center;gap:12px;padding:0 24px;
  background:var(--surface);border-bottom:1px solid var(--line);
}
.leiste-menue{display:none;font:inherit;background:none;border:1px solid var(--line);border-radius:var(--radius-sm);padding:5px 7px;color:var(--ink);cursor:pointer;}
.leiste-menue svg{display:block;}
.suche{display:flex;align-items:center;gap:8px;flex:0 1 560px;min-width:0;}
.suche .feld-suche{
  display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;height:34px;padding:0 10px;
  background:var(--surface-2);border:1px solid var(--feld-line);border-radius:var(--radius-sm);
}
.suche .feld-suche:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);background:var(--surface);}
.suche svg.ikon{color:var(--muted);}
.suche input{flex:1 1 auto;min-width:0;border:0;background:transparent;font:inherit;color:var(--ink);outline:none;}
.suche input::placeholder{color:var(--faint);}
.leiste-rechts{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:13px;white-space:nowrap;}
.leiste-wer .muted{margin-left:2px;}
.logout{display:inline;margin:0;}

.inhalt{padding:22px 28px 56px;max-width:2200px;width:100%;}
.inhalt-frei{max-width:none;padding:40px 24px 64px;margin:0 auto;}
.schleier{display:none;}

/* Seitenkopf: Titel links, Aktionen rechts */
.seitenkopf{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 18px;}
.seitenkopf .sub{margin:4px 0 0;}
.seitenkopf .aktionen{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.sub{color:var(--muted);font-size:13px;margin:4px 0 18px;}
h1+.sub{margin-top:4px;}
.zurueck{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--muted);margin-bottom:10px;}
.zurueck:hover{color:var(--accent-ink);}

/* ---------- Panels (ehem. Karten) ---------- */
.panel,.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:16px;}
.panel{overflow-x:auto;}
.card{padding:16px;}
.panel-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);min-height:42px;}
.panel-kopf h2{font-size:14px;}
.panel-kopf .meta{font-size:12px;color:var(--muted);}
.panel-kopf .aktionen{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.panel-inhalt{padding:14px 16px;}
.panel-fuss{padding:10px 16px;border-top:1px solid var(--line);background:var(--surface-2);border-radius:0 0 var(--radius) var(--radius);font-size:13px;}
.panel>table,.card>table{border-radius:inherit;}
.panel>table:first-child tr:first-child th{border-top:0;}
.panel>table tr:last-child td{border-bottom:0;}
.card>table{margin:-6px -16px -6px;width:calc(100% + 32px);}
.card>table th:first-child,.card>table td:first-child{padding-left:16px;}
.card>table th:last-child,.card>table td:last-child{padding-right:16px;}
.card>h2:first-child,.card>h3:first-child,.card>.h2:first-child{margin-bottom:10px;}
.card>p:last-child{margin-bottom:0;}
.h2{font-weight:600;font-size:14px;margin:0;}
.hint{font-size:12px;color:var(--muted);}

/* ---------- Tabellen ---------- */
table{width:100%;border-collapse:collapse;font-size:13px;}
th,td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:top;}
th{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;background:var(--surface-2);}
tbody tr:hover td{background:var(--surface-2);}
tr[data-href]{cursor:pointer;}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;}
td .mono{color:var(--ink);}
tr:last-child td{border-bottom:1px solid var(--line);}
table.dicht th,table.dicht td{padding:5px 10px;font-size:12.5px;}
table.schluessel th{background:none;text-transform:none;font-size:13px;color:var(--muted);font-weight:500;width:34%;letter-spacing:0;}
.tabelle-leer td{color:var(--muted);text-align:center;padding:28px 12px;}

/* ---------- Zustände (ehem. Pillen) ---------- */
.status,.pill{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--font);font-size:12px;font-weight:500;
  line-height:1;padding:3px 8px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:var(--surface-2);color:var(--muted);white-space:nowrap;vertical-align:middle;
}
.status::before,.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.85;flex:none;}
.status.ohne::before,.pill.ohne::before{display:none;}
.status.ok,.pill.gruen,.pill.ok,.pill.role-verwalter{color:var(--gruen);border-color:var(--gruen-line);background:var(--gruen-soft);}
.status.warn,.pill.amber,.pill.warn,.pill.role-admin{color:var(--amber);border-color:var(--amber-line);background:var(--amber-soft);}
.status.fehler,.pill.rot,.pill.fehler{color:var(--rot);border-color:var(--rot-line);background:var(--rot-soft);}
.status.info,.pill.blau,.pill.info{color:var(--blau);border-color:var(--blau-line);background:var(--blau-soft);}
.status.akzent,.pill.akzent{color:var(--accent-ink);border-color:var(--accent-line);background:var(--accent-soft);}

/* ---------- Knöpfe ---------- */
.btn,.linkbtn,button.primary,a.primary{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font:inherit;font-size:13px;font-weight:500;line-height:1;height:32px;padding:0 12px;
  border-radius:var(--radius-sm);border:1px solid var(--accent);background:var(--accent);color:#fff;
  cursor:pointer;white-space:nowrap;text-decoration:none;
}
.btn:hover,button.primary:hover,a.primary:hover{background:var(--accent-ink);border-color:var(--accent-ink);text-decoration:none;color:#fff;}
.btn.sekundaer,.linkbtn,.logout button{background:var(--surface);color:var(--ink);border-color:var(--line-strong);}
.btn.sekundaer:hover,.linkbtn:hover,.logout button:hover{background:var(--surface-2);border-color:var(--feld-line);color:var(--ink);}
.btn.gefahr{background:var(--surface);color:var(--rot);border-color:var(--rot-line);}
.btn.gefahr:hover{background:var(--rot-soft);border-color:var(--rot);color:var(--rot);}
.btn.gut{background:var(--surface);color:var(--gruen);border-color:var(--gruen-line);}
.btn.gut:hover{background:var(--gruen-soft);border-color:var(--gruen);color:var(--gruen);}
.btn.klein,.linkbtn.klein{height:28px;padding:0 10px;font-size:12.5px;}
.btn.breit{width:100%;}
.btn:disabled,.linkbtn:disabled{opacity:.5;cursor:default;}
.btn svg.ikon,.linkbtn svg.ikon{color:currentColor;}
label.linkbtn{cursor:pointer;}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
.actions form{display:inline;margin:0;}

/* ---------- Formulare ---------- */
.feld,input.feld,select.feld,textarea.feld,
.formular input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=hidden]),.formular select,.formular textarea{
  font:inherit;font-size:13.5px;color:var(--ink);background:var(--surface);
  border:1px solid var(--feld-line);border-radius:var(--radius-sm);height:32px;padding:0 10px;min-width:0;max-width:100%;
}
textarea.feld,.formular textarea{height:auto;padding:8px 10px;line-height:1.45;resize:vertical;}
.feld:focus,.formular input:focus,.formular select:focus,.formular textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft);}
.feld::placeholder{color:var(--faint);}
input[type=file].feld{padding:5px 8px;height:auto;}
.etikett,.formular label{display:block;font-size:12px;font-weight:500;color:var(--muted);margin:0 0 4px;}
.formular{display:grid;gap:12px;}
.formular-zeile,.formzeile{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;}
.formular-zeile>div,.formzeile>div{display:flex;flex-direction:column;min-width:0;}
.formular-zeile .btn,.formzeile .btn,.formular-zeile .linkbtn,.formzeile .linkbtn{height:32px;}
.formular-feld{display:flex;flex-direction:column;gap:4px;min-width:0;}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin:0 0 12px;}
legend{font-size:12px;font-weight:600;color:var(--muted);padding:0 4px;}
details>summary{cursor:pointer;color:var(--muted);font-size:13px;}
details[open]>summary{margin-bottom:8px;}

/* ---------- Hinweise ---------- */
.hinweis{border:1px solid var(--line);border-left:3px solid var(--line-strong);border-radius:var(--radius-sm);padding:10px 12px;background:var(--surface);font-size:13px;margin-bottom:14px;}
.hinweis p:last-child{margin-bottom:0;}
.hinweis.warn{border-color:var(--amber-line);border-left-color:var(--amber);background:var(--amber-soft);}
.hinweis.fehler{border-color:var(--rot-line);border-left-color:var(--rot);background:var(--rot-soft);}
.hinweis.ok{border-color:var(--gruen-line);border-left-color:var(--gruen);background:var(--gruen-soft);}
.hinweis.info{border-color:var(--blau-line);border-left-color:var(--blau);background:var(--blau-soft);}
.leer{color:var(--muted);text-align:center;padding:28px 16px;font-size:13.5px;}
.leer a{font-weight:500;}

/* ---------- Kennzahlen ---------- */
.kpi-raster,.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:16px;}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;display:flex;flex-direction:column;gap:6px;min-width:0;}
.kpi .lab,.kpi .kpi-etikett{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;}
.kpi .num,.kpi .kpi-wert{font-size:22px;font-weight:var(--num-weight);line-height:1.1;text-align:left;font-variant-numeric:tabular-nums;}
.kpi .un{font-size:12px;color:var(--muted);font-weight:400;margin-left:4px;}
.kpi .kpi-delta,.kpi .dpill{font-size:12px;color:var(--muted);}
.kpi .ktag{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--faint);white-space:nowrap;}
.kpi .ktag em{font-style:normal;}
.kpi .formel{display:none;font-size:11.5px;color:var(--muted);border-top:1px dashed var(--line);padding-top:6px;margin:0;}
body.formeln-an .kpi .formel{display:block;}

/* ---------- Balken (Dashboard, Shopfloor) ---------- */
.hbar{margin-bottom:10px;}
.hbar .hrow{display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px;}
.hbar .track{height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden;}
.hbar .fill{height:100%;background:var(--accent);}
.balken{display:inline-block;height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden;vertical-align:middle;}
.balken>span{display:block;height:100%;background:var(--accent);}

/* ---------- Raster ---------- */
.raster-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.raster-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.raster-haupt-neben{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:16px;align-items:start;}
.raster-2,.raster-3{align-items:start;}
.row{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:0;}
.row>.card,.row>.panel{flex:1 1 300px;}
@media (max-width:1100px){.raster-3{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:900px){.raster-2,.raster-3,.raster-haupt-neben{grid-template-columns:minmax(0,1fr);}}

/* ---------- Anmelden / freie Seiten ---------- */
.frei-spalte{max-width:420px;margin:6vh auto 0;}
.frei-spalte.breit{max-width:900px;}
.frei-marke{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:20px;font-weight:600;font-size:16px;}
.frei-marke svg{width:26px;height:26px;}
.frei-marke b{font-weight:600;color:var(--accent-ink);}
.frei-fuss{text-align:center;color:var(--faint);font-size:12px;margin-top:18px;}

/* ---------- Demo-Leiste ---------- */
.demo-hinweis{background:var(--surface-2);color:var(--muted);border-bottom:1px solid var(--line);font-size:12.5px;padding:6px 16px;text-align:center;}
.demo-hinweis strong{color:var(--ink);font-weight:600;}
.demo-hinweis a{color:var(--accent-ink);margin:0 3px;}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width:980px){
  .shell{grid-template-columns:minmax(0,1fr);}
  .seite{position:fixed;left:0;top:0;bottom:0;width:var(--seite-breite);z-index:40;transform:translateX(-100%);transition:transform .15s ease;box-shadow:none;}
  body.navi-offen .seite{transform:none;box-shadow:var(--shadow-l);}
  body.navi-offen .schleier{display:block;position:fixed;inset:0;background:rgba(10,14,18,.35);z-index:30;}
  .leiste{padding:0 14px;gap:8px;}
  .leiste-menue{display:inline-flex;}
  .leiste-wer{display:none;}
  .inhalt{padding:16px 14px 48px;}
  .seitenkopf{align-items:flex-start;}
  th,td{padding:7px 8px;}
  .card>table{margin-left:-16px;margin-right:-16px;width:calc(100% + 32px);}
}
@media (max-width:600px){
  .suche .btn{display:none;}
  .inhalt-frei{padding:24px 14px 48px;}
  body{font-size:14px;}
}
@media print{
  .seite,.leiste,.demo-hinweis,.schleier{display:none !important;}
  .shell{display:block;}
  .inhalt{padding:0;max-width:none;}
  .panel,.card{break-inside:avoid;}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;}
}

/* ---------- Ergänzungen aus der Seitenumstellung (25.10.2026) ---------- */
.zeile-aktionen{display:flex;gap:6px;justify-content:flex-end;align-items:center;flex-wrap:wrap;}
.zeile-aktionen form{display:inline;margin:0;}
td.zeile-aktionen,td.aktionen{text-align:right;white-space:nowrap;}
td a.mono,th a.mono{color:var(--accent-ink);}
.balken.warn>span{background:var(--amber);}
.balken.fehler>span{background:var(--rot);}
.balken.ok>span{background:var(--gruen);}
.hinweis ul,.hinweis ol{margin:6px 0 0;padding-left:18px;}
.formular-feld.wachsen{flex:1 1 220px;}
.formular .kontrollfeld{display:flex;align-items:center;gap:8px;height:32px;font-size:13px;color:var(--ink);}
.formular .kontrollfeld input{width:15px;height:15px;margin:0;}
.panel-inhalt>.hinweis:last-child,.panel-inhalt>p:last-child{margin-bottom:0;}
.tabelle-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.tabelle-scroll>table{min-width:640px;}