/* ============================================================
   Lieferantenportal - Stylesheet
   ============================================================ */
:root {
  --bg:        #f4f6f9;
  --surface:   #ffffff;
  --surface-2: #fafbfc;
  --border:    #dde3ea;
  --text:      #1a2230;
  --text-dim:  #64748b;
  --primary:   #1f5fa9;
  --primary-d: #17477f;
  --primary-l: #e8f0fa;
  --ok:        #16794d;
  --ok-bg:     #e6f4ed;
  --warn:      #a86a00;
  --warn-bg:   #fdf3e0;
  --bad:       #b3261e;
  --bad-bg:    #fdeceb;
  --radius:    8px;
  --shadow:    0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --shadow-lg: 0 8px 28px rgba(16,24,40,.16);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#11161d; --surface:#181f28; --surface-2:#1f2732; --border:#2c3643;
    --text:#e6ebf2; --text-dim:#93a1b3; --primary:#5b9bdd; --primary-d:#7db2e8;
    --primary-l:#1b2a3c; --ok:#4ac08a; --ok-bg:#15291f; --warn:#d99b3a; --warn-bg:#2a2214;
    --bad:#e8776e; --bad-bg:#2c1917; --shadow:0 1px 3px rgba(0,0,0,.5);
    --shadow-lg:0 8px 28px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  --bg:#11161d; --surface:#181f28; --surface-2:#1f2732; --border:#2c3643;
  --text:#e6ebf2; --text-dim:#93a1b3; --primary:#5b9bdd; --primary-d:#7db2e8;
  --primary-l:#1b2a3c; --ok:#4ac08a; --ok-bg:#15291f; --warn:#d99b3a; --warn-bg:#2a2214;
  --bad:#e8776e; --bad-bg:#2c1917; --shadow:0 1px 3px rgba(0,0,0,.5);
  --shadow-lg:0 8px 28px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); }
h1,h2,h3,h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 20px; } h2 { font-size: 17px; } h3 { font-size: 15px; }
[hidden] { display: none !important; }

/* ---------------- Login ---------------- */
.login-wrap {
  min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px;
  background: linear-gradient(160deg, var(--bg) 0%, var(--primary-l) 100%);
}
.login-card {
  width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-lg); padding: 30px 28px;
}
.login-card .logo { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.login-card .logo svg { flex: none; }
.login-sub { color: var(--text-dim); font-size: 13px; margin: 0 0 22px; }

/* ---------------- Layout ---------------- */
.app { display: grid; grid-template-columns: 228px 1fr; min-height: 100dvh; }
.sidebar {
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100dvh;
}
.brand {
  display: flex; align-items: center; gap: 10px; padding: 16px 18px;
  border-bottom: 1px solid var(--border); font-weight: 700; font-size: 15px;
}
.nav { padding: 10px 10px; overflow-y: auto; flex: 1; }
.nav-group { margin-top: 14px; padding: 0 8px 6px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.nav a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px;
  color: var(--text); text-decoration: none; font-size: 13.5px; font-weight: 500; margin-bottom: 2px;
}
.nav a:hover { background: var(--surface-2); }
.nav a.active { background: var(--primary-l); color: var(--primary-d); font-weight: 650; }
.nav a svg { flex: none; opacity: .8; }
.sidebar-foot { border-top: 1px solid var(--border); padding: 12px 14px; font-size: 12px; }
.sidebar-foot .who { color: var(--text-dim); margin-bottom: 8px; }
.sidebar-foot .who b { color: var(--text); display: block; font-size: 13px; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 12px; padding: 14px 22px;
  border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 20;
}
.topbar .spacer { flex: 1; }
/* Volle Bildschirmbreite nutzen - die Datentabellen haben viele Spalten */
.content { padding: 20px 22px 60px; width: 100%; max-width: none; }

/* ---------------- Komponenten ---------------- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px;
}
.card > h2, .card > h3 { margin-bottom: 12px; }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.card-head .spacer { flex: 1; }
.muted { color: var(--text-dim); }
.small { font-size: 12.5px; }

.grid { display: grid; gap: 14px; }
.kpis { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.kpi {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow);
}
.kpi .label { font-size: 12px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.kpi .value { font-size: 26px; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi .sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.kpi.ok .value { color: var(--ok); } .kpi.warn .value { color: var(--warn); } .kpi.bad .value { color: var(--bad); }

/* Formulare */
label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 4px; color: var(--text); }
input, select, textarea {
  width: 100%; padding: 8px 10px; font: inherit; font-size: 13.5px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--primary); outline-offset: -1px; border-color: var(--primary);
}
input[readonly] { background: var(--surface-2); color: var(--text-dim); }
input[type=checkbox] { width: auto; }
textarea { resize: vertical; min-height: 62px; }
.field { margin-bottom: 12px; }
.form-grid { display: grid; gap: 12px 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.form-grid .span-2 { grid-column: span 2; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.check { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.check label { margin: 0; font-weight: 500; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 14px; }
legend { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); padding: 0 6px; }
.hint { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-d); border-color: var(--primary-d); }
.btn-danger { color: var(--bad); border-color: var(--bad); background: transparent; }
.btn-danger:hover { background: var(--bad-bg); }
.btn-sm { padding: 5px 9px; font-size: 12.5px; }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* Tabellen */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 8px 11px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { background: var(--surface-2); font-size: 11.5px; font-weight: 700; text-transform: uppercase;
     letter-spacing: .04em; color: var(--text-dim); position: sticky; top: 0; z-index: 1; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text); }
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.wrap { white-space: normal; min-width: 180px; }
.row-actions { display: flex; gap: 4px; }

/* Badges */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 650;
  background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border);
}
.badge.ok   { background: var(--ok-bg);   color: var(--ok);   border-color: transparent; }
.badge.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.badge.bad  { background: var(--bad-bg);  color: var(--bad);  border-color: transparent; }
.badge.info { background: var(--primary-l); color: var(--primary-d); border-color: transparent; }

.bar-cell { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.bar { flex: 1; height: 6px; background: var(--border); border-radius: 99px; overflow: hidden; min-width: 44px; }
.bar > i { display: block; height: 100%; border-radius: 99px; background: var(--primary); }
.bar.ok > i { background: var(--ok); } .bar.warn > i { background: var(--warn); } .bar.bad > i { background: var(--bad); }

/* Filterleiste */
.filters {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.filters .field { margin: 0; min-width: 130px; }
.filters .grow { flex: 1; min-width: 190px; }

/* Autocomplete */
.ac-wrap { position: relative; }
.ac-list {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 2px);
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: var(--shadow-lg); max-height: 260px; overflow-y: auto; padding: 4px;
}
.ac-list div { padding: 7px 9px; border-radius: 4px; cursor: pointer; font-size: 13px; }
.ac-list div:hover, .ac-list div.sel { background: var(--primary-l); }
.ac-list .no { font-family: var(--mono); font-size: 12px; color: var(--text-dim); margin-right: 8px; }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(10,16,24,.5); backdrop-filter: blur(2px);
  display: grid; place-items: center; padding: 20px; z-index: 100; overflow-y: auto;
}
.modal {
  background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-lg);
  width: 100%; max-width: 860px; max-height: 92dvh; display: flex; flex-direction: column;
  border: 1px solid var(--border);
}
.modal.narrow { max-width: 460px; }
.modal-head { display: flex; align-items: center; padding: 15px 20px; border-bottom: 1px solid var(--border); }
.modal-head h2 { flex: 1; }
.modal-body { padding: 18px 20px; overflow-y: auto; }
.modal-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--border); }
.icon-btn { background: none; border: none; cursor: pointer; color: var(--text-dim); padding: 4px; border-radius: 4px; font-size: 20px; line-height: 1; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

/* Meldungen */
.alert { padding: 10px 13px; border-radius: 6px; font-size: 13px; margin-bottom: 14px; border: 1px solid transparent; }
.alert.err  { background: var(--bad-bg);  color: var(--bad);  border-color: var(--bad); }
.alert.ok   { background: var(--ok-bg);   color: var(--ok);   border-color: var(--ok); }
.alert.info { background: var(--primary-l); color: var(--primary-d); border-color: var(--primary); }
.alert.warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }
.alert ul { margin: 6px 0 0; padding-left: 18px; }

.toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 300; }
.toast {
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--primary);
  border-radius: 6px; box-shadow: var(--shadow-lg); padding: 11px 15px; font-size: 13px;
  min-width: 250px; max-width: 380px; animation: slide .2s ease;
}
.toast.ok  { border-left-color: var(--ok); }
.toast.err { border-left-color: var(--bad); }
@keyframes slide { from { transform: translateX(16px); opacity: 0; } }

/* Diagramme (eigenes SVG) */
.chart { width: 100%; display: block; overflow: visible; }
.chart text { font-size: 11px; fill: var(--text-dim); }
.chart .axis line, .chart .axis path { stroke: var(--border); }
.chart .grid-line { stroke: var(--border); stroke-dasharray: 2 3; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); }
.chart-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.hbars { display: flex; flex-direction: column; gap: 9px; }
.hbar-row { display: grid; grid-template-columns: 150px 1fr 74px; gap: 10px; align-items: center; font-size: 12.5px; }
.hbar-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-row .tr { height: 16px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.hbar-row .tr > i { display: block; height: 100%; background: var(--primary); border-radius: 4px; }
.hbar-row .vl { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-dim); }

.pager { display: flex; align-items: center; gap: 10px; padding: 11px 2px; font-size: 13px; }
.pager .spacer { flex: 1; }
.empty { padding: 42px 20px; text-align: center; color: var(--text-dim); }
.spinner { display: inline-block; width: 15px; height: 15px; border: 2px solid var(--border);
  border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading { padding: 40px; text-align: center; color: var(--text-dim); }
code, .mono { font-family: var(--mono); font-size: 12.5px; }
.pw-out { font-family: var(--mono); font-size: 15px; background: var(--surface-2); padding: 10px 13px;
  border-radius: 6px; border: 1px dashed var(--border); user-select: all; word-break: break-all; }
.dl-links { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .nav a { flex: none; } .nav-group { width: 100%; margin-top: 6px; }
  .content { padding: 16px; }
  .topbar { padding: 12px 16px; }
  .hbar-row { grid-template-columns: 104px 1fr 60px; }
}

/* ---------------- Hilfsklassen (ersetzen Inline-Styles wegen strenger CSP) ---------------- */
.mb-0  { margin-bottom: 0 !important; }
.mb-10 { margin-bottom: 10px; }
.mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; }
.mt-6  { margin-top: 6px; }
.mt-8  { margin-top: 8px; }
.mt-14 { margin-top: 14px; }
.my-14 { margin: 14px 0; }
.my-10 { margin: 10px 0 14px; }
.center-block { text-align: center; margin: 10px 0; }
.w-110 { width: 110px; }
.donut-wrap { margin: 0 auto; }
.chart .donut-total { font-size: 19px; font-weight: 700; fill: var(--text); }

/* ---------------- Tabelle: fixierte Spalten und Spaltenauswahl ---------------- */
.table-wrap { position: relative; max-height: calc(100dvh - 300px); overflow: auto; }
table.sticky-cols th:first-child,
table.sticky-cols td:first-child {
  position: sticky; left: 0; z-index: 2; background: var(--surface);
  box-shadow: 1px 0 0 var(--border);
}
table.sticky-cols thead th:first-child { z-index: 4; background: var(--surface-2); }
table.sticky-cols tbody tr:hover td:first-child { background: var(--surface-2); }

table.sticky-cols th:last-child,
table.sticky-cols td:last-child {
  position: sticky; right: 0; z-index: 2; background: var(--surface);
  box-shadow: -1px 0 0 var(--border);
}
table.sticky-cols thead th:last-child { z-index: 4; background: var(--surface-2); }
table.sticky-cols tbody tr:hover td:last-child { background: var(--surface-2); }

table.klickbar tbody tr { cursor: pointer; }

/* Spaltenauswahl */
.colmenu-wrap { position: relative; display: inline-block; }
.colmenu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 70;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow-lg); padding: 10px; width: 262px; max-height: 340px; overflow-y: auto;
}
.colmenu .check { padding: 4px 6px; border-radius: 4px; }
.colmenu .check:hover { background: var(--surface-2); }
.colmenu .foot { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }

/* Detailansicht */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 18px; }
.detail-item { min-width: 0; }
.detail-item dt { font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-dim); margin-bottom: 2px; }
.detail-item dd { margin: 0; font-size: 14px; word-break: break-word; }
.detail-item dd.leer { color: var(--text-dim); }
.detail-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--border);
}
.detail-head .dt { font-size: 22px; font-weight: 700; }
.detail-head .nm { font-size: 16px; color: var(--text-dim); }

.tabellen-hinweis { margin: -4px 0 12px 2px; }

/* ---------------- Ansicht "Breite anpassen" ----------------
   Spaltenbreiten richten sich nach dem Inhalt (wie "Spaltenbreite
   automatisch anpassen" in Excel): Werte bleiben einzeilig, zu langer
   Text wird mit Auslassungspunkten gekuerzt (vollstaendig im Tooltip
   und in der Detailansicht). Nur die Kopfzeile darf an Wortgrenzen
   umbrechen, damit lange Bezeichnungen die Spalte nicht aufblaehen. */
table.auto-breite { table-layout: auto; width: 100%; font-size: 12.5px; }

table.auto-breite th {
  white-space: normal;          /* Umbruch nur an Wortgrenzen */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  font-size: 10.5px;
  line-height: 1.25;
  vertical-align: bottom;
  padding: 6px 7px;
  /* Lange Bezeichnungen duerfen die Spalte nicht aufblaehen: der Kopf
     bricht auf bis zu drei Zeilen um, die Spaltenbreite richtet sich
     nach den Werten darunter. */
  max-width: 96px;
}

table.auto-breite td {
  white-space: nowrap;          /* Werte NICHT umbrechen */
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 6px 8px;
  max-width: 160px;             /* darueber mit ... gekuerzt, Volltext im Tooltip */
}

/* Kurze Werte brauchen keine Begrenzung */
table.auto-breite td.num { max-width: none; text-align: right; }

/* Im angepassten Modus auch die Namensspalten einzeilig halten */
/* Der Lieferantenname bekommt mehr Platz als die uebrigen Textspalten */
table.auto-breite td.wrap { white-space: nowrap; min-width: 0; max-width: 215px; }

table.auto-breite .row-actions .btn { padding: 4px 8px; font-size: 11.5px; }
.table-wrap.auto { overflow-x: auto; }

/* Aktive Umschaltflaeche hervorheben */
.btn.aktiv { background: var(--primary-l); border-color: var(--primary); color: var(--primary-d); }

/* Auf sehr breiten Bildschirmen die Diagramme nicht ins Endlose ziehen */
@media (min-width: 1800px) {
  .grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(520px, 1fr)); }
  .grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }
}

/* ---------------- Reiter ---------------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 9px 14px;
  font: inherit; font-weight: 600; font-size: 13.5px; color: var(--text-dim); cursor: pointer; margin-bottom: -1px; }
.tab:hover { color: var(--text); }
.tab.aktiv { color: var(--primary-d); border-bottom-color: var(--primary); }

/* ---------------- Leergut ---------------- */
.saldo-plus  { color: var(--warn); font-weight: 650; font-variant-numeric: tabular-nums; }
.saldo-minus { color: var(--primary-d); font-weight: 650; font-variant-numeric: tabular-nums; }
table tfoot th { background: var(--surface-2); border-top: 2px solid var(--border); }
table.leergut-eingabe { width: 100%; }
table.leergut-eingabe td, table.leergut-eingabe th { padding: 4px 8px; }
table.leergut-eingabe input { width: 100px; padding: 5px 8px; text-align: center; }
table.leergut-eingabe th.mitte, table.leergut-eingabe td.mitte { text-align: center !important; }
table.leergut-eingabe td.mitte input { display: block; margin: 0 auto; }
table.leergut-eingabe input[type=number] { -moz-appearance: textfield; appearance: textfield; }
table.leergut-eingabe input[type=number]::-webkit-inner-spin-button,
table.leergut-eingabe input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------------- Anhaenge ---------------- */
.anhaenge { display: flex; flex-wrap: wrap; gap: 10px; }
.anhang { width: 132px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--surface-2);
  font-size: 11.5px; display: flex; flex-direction: column; }
.anhang .vorschau { height: 96px; display: grid; place-items: center; background: var(--surface); overflow: hidden; }
.anhang .vorschau img { width: 100%; height: 100%; object-fit: cover; }
.anhang .vorschau .typ { font-weight: 700; color: var(--bad); font-size: 15px; }
.anhang .nm { padding: 5px 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anhang .akt { display: flex; border-top: 1px solid var(--border); }
.anhang .akt a, .anhang .akt button { flex: 1; text-align: center; padding: 5px; font-size: 11.5px; border: none;
  background: none; color: var(--primary); cursor: pointer; text-decoration: none; font-weight: 600; }
.anhang .akt button { color: var(--bad); border-left: 1px solid var(--border); }
.anhang.neu { border-style: dashed; }
.upload-zone { border: 2px dashed var(--border); border-radius: 8px; padding: 14px; text-align: center; color: var(--text-dim); font-size: 13px; }
.upload-zone.drag { border-color: var(--primary); background: var(--primary-l); color: var(--primary-d); }
.upload-zone label.btn { display: inline-flex; margin: 6px 0 0; }

.anhang .nm + .nm { padding-top: 0; }
.anhang .akt button:first-child { border-left: none; }

.sidebar-foot .version { font-size: 11px; color: var(--text-dim); margin: -4px 0 8px; }

/* ---------- Außenlager ---------- */
.toolbar-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-bottom: 14px; }
.toolbar-row .tabs { margin-bottom: 0; flex-wrap: wrap; }
.tab .badge { margin-left: 4px; }
.pre { white-space: pre-line; }
.teil-liste { margin: 0; padding-left: 20px; }
.teil-liste li { margin: 3px 0; white-space: pre-line; }
.teil-zeile { display: grid; grid-template-columns: 150px 1fr auto auto; gap: 6px; margin-bottom: 6px; align-items: center; }
@media (max-width: 700px) { .teil-zeile { grid-template-columns: 1fr 1fr; } }
.teil-block { margin-bottom: 8px; }
.teil-block .teil-zeile { margin-bottom: 4px; }
.teil-doks { margin: 0 0 6px 156px; }
@media (max-width: 700px) { .teil-doks { margin-left: 0; } }
.dok-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.dok-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 6px; background: var(--surface, transparent); font-size: 12.5px; }
.dok-chip.neu { border-style: dashed; }
.dok-chip button { background: none; border: none; color: var(--bad, #b42318); cursor: pointer; font: inherit; font-size: 12px; padding: 0 2px; }
a.dok, span.dok { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.dok .typ { font-size: 10px; font-weight: 700; color: #b42318; border: 1px solid currentColor; border-radius: 3px; padding: 0 3px; }
.teil-liste .dok-liste { margin: 4px 0 2px; }
/* Außenlager-Tabelle: kompakte Dokument-Kacheln, feste Breiten für Textspalten */
.zelle-lieferant { min-width: 150px; max-width: 220px; }
.zelle-bem { min-width: 140px; max-width: 220px; }
.zelle-teile { min-width: 170px; max-width: 240px; }
.zelle-doks { min-width: 90px; max-width: 200px; white-space: normal; }
.teil-kurz { margin: 1px 0; }
.teil-kurz + .teil-kurz { border-top: 1px dotted var(--border); padding-top: 2px; }
a.dok.mini { display: inline-flex; white-space: nowrap; max-width: 170px; margin: 1px 4px 1px 0; padding: 1px 5px; font-size: 11.5px;
  border: 1px solid var(--border); border-radius: 4px; vertical-align: middle; }
a.dok.mini .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.dok.mini.alt { color: var(--text-dim); }
a.dok.mini:hover { border-color: var(--primary); }
table.lager-tabelle { font-size: 12.5px; }
table.lager-tabelle th, table.lager-tabelle td { padding: 6px 8px; }
table.lager-tabelle th { white-space: normal; }
table.lager-tabelle td.wrap.zelle-lieferant { min-width: 130px; max-width: 190px; }
table.lager-tabelle td.wrap.zelle-bem { min-width: 120px; max-width: 190px; }
table.lager-tabelle td.wrap.zelle-teile { min-width: 150px; max-width: 220px; }
table.lager-tabelle td.zelle-doks { min-width: 80px; max-width: 170px; }
table.lager-tabelle td.zelle-daten { line-height: 1.45; }

/* =====================================================================
   DESIGN SCHÄFERBARTHOLD
   Kopfleiste weiß mit Logo, Navigation mittig, schwarze Fußleiste,
   Karten mit abgerundetem Rahmen, dunkelblaue Pill-Schaltflächen.
   Markenfarben: Blau #00529B, Rot #B4272F. Hell- und Dunkelmodus.
   ===================================================================== */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/open-sans-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/fonts/open-sans-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/open-sans-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/open-sans-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/fonts/open-sans-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/fonts/open-sans-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f4f5f7; --border: #c3c9d2;
  --text: #1f2933; --text-dim: #5f6b7a;
  --primary: #00529b; --primary-d: #003e75; --primary-l: #e8f0f8;
  --accent: #b4272f;
  --btn: #00529b; --btn-hover: #003e75; --btn-text: #ffffff;
  --kopf-bg: #ffffff; --kopf-schatten: 0 2px 6px rgba(0,0,0,.18);
  --fuss-bg: #000000; --fuss-text: #ffffff;
  --radius: 14px;
  --shadow: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f141a; --surface: #161d26; --surface-2: #1d2631; --border: #2e3a48;
    --text: #e7ecf2; --text-dim: #9aa7b6;
    --primary: #5aa2e6; --primary-d: #8cc0f2; --primary-l: #16283b;
    --accent: #e0555d;
    --btn: #1f6cb8; --btn-hover: #2a7fd3; --btn-text: #ffffff;
    --kopf-bg: #141b24; --kopf-schatten: 0 2px 8px rgba(0,0,0,.55);
    --fuss-bg: #07090c; --fuss-text: #d9e1ea;
    --shadow: none;
  }
}
:root[data-theme="dark"] {
  --bg: #0f141a; --surface: #161d26; --surface-2: #1d2631; --border: #2e3a48;
  --text: #e7ecf2; --text-dim: #9aa7b6;
  --primary: #5aa2e6; --primary-d: #8cc0f2; --primary-l: #16283b;
  --accent: #e0555d;
  --btn: #1f6cb8; --btn-hover: #2a7fd3; --btn-text: #ffffff;
  --kopf-bg: #141b24; --kopf-schatten: 0 2px 8px rgba(0,0,0,.55);
  --fuss-bg: #07090c; --fuss-text: #d9e1ea;
  --shadow: none;
}

body { font-family: "Open Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; font-size: 14px; }

/* ---- Logo je Modus ---- */
.firmenlogo { display: block; height: 35px; width: auto; }   /* Originalgröße, nicht skaliert */
/* Das Logo bleibt in beiden Modi unverändert (Originalfarben). Im Dunkelmodus liegt es
   auf einer weißen Fläche, damit der blaue Schriftzug lesbar bleibt. */
.ic-sonne { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ic-mond { display: none; }
  :root:not([data-theme="light"]) .ic-sonne { display: block; }
  :root:not([data-theme="light"]) .kopf-logo,
  :root:not([data-theme="light"]) .login-card .logo { background: #ffffff; border-radius: 8px; padding: 6px 12px; }
}
:root[data-theme="dark"] .ic-mond { display: none; }
:root[data-theme="dark"] .ic-sonne { display: block; }
:root[data-theme="dark"] .kopf-logo,
:root[data-theme="dark"] .login-card .logo { background: #ffffff; border-radius: 8px; padding: 6px 12px; }
.login-card .logo { display: inline-flex; }

/* ---- Grundgerüst: Kopf, Seite, Fuß ---- */
.app { display: flex; flex-direction: column; min-height: 100dvh; }
.kopf {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 18px;
  height: 66px; padding: 0 24px; background: var(--kopf-bg); box-shadow: var(--kopf-schatten);
}
.kopf-logo { flex: none; display: flex; align-items: center; }
.hauptnav { flex: 1; display: flex; justify-content: center; gap: 6px; min-width: 0; }
.kopf-rechts { flex: none; display: flex; align-items: center; gap: 6px; }
.angemeldet { font-size: 13px; color: var(--text-dim); margin-right: 8px; white-space: nowrap; }
.angemeldet b { color: var(--primary); font-weight: 600; }
.angemeldet #whoRole { color: var(--primary); }
.angemeldet #whoRole::before { content: "("; } .angemeldet #whoRole::after { content: ")"; }
.icon-knopf {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border: none; border-radius: 50%; background: none; color: var(--primary); cursor: pointer; padding: 0;
}
.icon-knopf:hover { background: var(--primary-l); }

.nav-gruppe { position: relative; }
.nav-gruppe summary {
  list-style: none; display: flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px;
  color: var(--primary); font-weight: 600; font-size: 14px; cursor: pointer; user-select: none; white-space: nowrap;
}
.nav-gruppe summary::-webkit-details-marker { display: none; }
.nav-gruppe summary:hover, .nav-gruppe[open] summary { background: var(--primary-l); }
.nav-gruppe.aktiv summary { box-shadow: inset 0 -3px 0 var(--primary); border-radius: 10px 10px 4px 4px; }
.nav-gruppe summary svg { flex: none; }
.nav-gruppe .pfeil { transition: transform .15s; }
.nav-gruppe[open] .pfeil { transform: rotate(180deg); }
.nav-menue {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); min-width: 250px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18); z-index: 50;
}
.nav-menue a {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px;
  color: var(--text); text-decoration: none; font-size: 14px;
}
.nav-menue a:hover { background: var(--primary-l); color: var(--primary); }
.nav-menue a.active { background: var(--primary-l); color: var(--primary); font-weight: 600; }
.nav-menue a svg { flex: none; color: var(--primary); }

.main { flex: 1; display: block; }
.seite { max-width: 1680px; margin: 0 auto; padding: 26px 28px 48px; }
.topbar { position: static; background: none; border: none; padding: 0 0 18px; }
.topbar h1 { font-size: 30px; font-weight: 400; color: var(--primary); letter-spacing: 0; }
.content { padding: 0; }

.fuss {
  display: flex; align-items: center; gap: 16px; padding: 12px 24px; font-size: 14px;
  background: var(--fuss-bg); color: var(--fuss-text);
}
.fuss .fuss-rechts { margin-left: auto; opacity: .85; font-size: 13px; }
.fuss-login { position: fixed; left: 0; right: 0; bottom: 0; }

/* ---- Komponenten im Schäferbarthold-Stil ---- */
.card, .kpi, .table-wrap, fieldset, .filters { border-radius: var(--radius); border-color: var(--border); box-shadow: none; }
.card, .kpi { padding: 18px 22px; }
.filters { border: 1px solid var(--border); background: var(--surface); padding: 18px 20px; }
.kpi .label { color: var(--text-dim); }
.kpi .value { color: var(--primary); font-weight: 600; }
.kpi.ok .value { color: var(--ok); } .kpi.warn .value { color: var(--warn); } .kpi.bad .value { color: var(--bad); }
.card > h2, .card > h3, .card-head h2, .card-head h3 { color: var(--primary); font-weight: 400; font-size: 20px; }

.btn { border-radius: 999px; padding: 8px 18px; font-weight: 600; border-color: var(--border); }
.btn-sm { padding: 5px 12px; }
.btn-primary { background: var(--btn); border-color: var(--btn); color: var(--btn-text); }
.btn-primary:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.btn:disabled { background: var(--surface-2); color: var(--text-dim); border-color: var(--surface-2); opacity: 1; }

input, select, textarea { border-radius: 4px; min-height: 42px; padding: 9px 12px; font-size: 14.5px; border-color: var(--border); }
input[type=checkbox], input[type=radio] { min-height: 0; accent-color: var(--primary); }
textarea { min-height: 70px; }
label { font-weight: 600; }
legend { color: var(--primary); }

.alert { border-radius: 12px; }
.alert.info { background: var(--surface-2); color: var(--primary); border-color: var(--primary); }
.tab { color: var(--text-dim); font-weight: 600; }
.tab.aktiv { color: var(--primary); border-bottom-color: var(--primary); }
.badge { border-radius: 999px; }
thead th { color: var(--text-dim); }
.modal { border-radius: 16px; }
.modal-head h2, .modal h2 { color: var(--primary); font-weight: 400; font-size: 22px; }

/* ---- Anmeldung ---- */
.login-wrap { background: var(--bg); padding-bottom: 70px; }
.login-card { border-radius: 16px; box-shadow: none; border: 1px solid var(--border); max-width: 420px; padding: 32px 30px; }
.login-card .logo { margin-bottom: 22px; }
.login-card .firmenlogo { height: 35px; }
.login-titel { font-size: 26px; font-weight: 400; color: var(--primary); margin-bottom: 2px; }
.btn-block { width: 100%; }

/* ---- Schmale Bildschirme ---- */
@media (max-width: 1250px) { .angemeldet { display: none; } }
@media (max-width: 900px) {
  .kopf { height: auto; flex-wrap: wrap; padding: 10px 14px; gap: 8px; }
  .hauptnav { order: 3; flex-basis: 100%; justify-content: space-between; gap: 2px; }
  .nav-gruppe summary { padding: 8px 9px; font-size: 13.5px; gap: 5px; }
  .kopf-rechts { gap: 0; }
  .icon-knopf { width: 34px; height: 34px; }
  .kopf-rechts { margin-left: auto; }
  .firmenlogo { height: 24px; }
  .seite { padding: 18px 14px 40px; }
  .topbar h1 { font-size: 24px; }
  .nav-menue { position: fixed; top: auto; left: 12px; right: 12px; min-width: 0; transform: none; margin-top: 8px; }
}
/* Handy: Kartenraster nie breiter als der Bildschirm, breite Tabellen in Karten seitlich scrollen */
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
@media (max-width: 900px) { .card { overflow-x: auto; } }

/* =====================================================================
   APP-SHELL (ab 1.10.0)
   Seitenleiste links (einklappbar, auf dem Handy ausziehbar), schlanke Kopfleiste mit
   Breadcrumbs und globaler Suche (Strg+K), einheitliche Fokus-Zustaende.
   Ueberschreibt die fruehere Kopfleiste mit Aufklappmenues.
   ===================================================================== */
:root {
  /* Abstaende und Radien (Design-System) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --radius-sm: 8px; --radius-md: 12px;
  /* Seitenleiste */
  --sb-breite: 248px; --sb-breite-zu: 68px; --kopf-hoehe: 60px;
  --sb-bg: #00294f; --sb-text: rgba(255,255,255,.86); --sb-dim: rgba(255,255,255,.55);
  --sb-hover: rgba(255,255,255,.08); --sb-aktiv: rgba(255,255,255,.14); --sb-linie: rgba(255,255,255,.12);
  --sb-marke: var(--accent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --sb-bg: #0b1016; --sb-marke: #e0555d; }
}
:root[data-theme="dark"] { --sb-bg: #0b1016; --sb-marke: #e0555d; }

/* ---- Grundraster ---- */
.app { display: grid; grid-template-columns: var(--sb-breite) minmax(0, 1fr); min-height: 100dvh; }
.main { display: flex; flex-direction: column; min-width: 0; }
.seite { flex: 1; width: 100%; max-width: 1680px; margin: 0 auto; padding: var(--space-5) 28px 48px; }

/* ---- Seitenleiste ---- */
.sidebar {
  position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; z-index: 60;
  background: var(--sb-bg); color: var(--sb-text); border-right: 1px solid var(--sb-linie);
}
.sb-kopf { padding: var(--space-4) 14px var(--space-2); }
.sb-logo { display: flex; align-items: center; justify-content: center; background: #ffffff;
  border-radius: var(--radius-sm); padding: 8px 10px; }       /* Logo braucht hellen Grund */
.sb-logo .firmenlogo { height: auto; max-width: 100%; }
.sb-logo .logo-mini { display: none; }
.sb-nav { flex: 1; overflow-y: auto; padding: var(--space-1) 10px var(--space-3); }
.sb-gruppe { margin: 18px 0 6px; padding: 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sb-dim); }
.sb-liste { list-style: none; margin: 0; padding: 0; }
.sb-link {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px;
  border-radius: var(--radius-sm); color: var(--sb-text); text-decoration: none; font-size: 14px; margin-bottom: 2px;
}
.sb-link svg { flex: none; }
.sb-link:hover { background: var(--sb-hover); color: #ffffff; }
.sb-link.active { background: var(--sb-aktiv); color: #ffffff; font-weight: 600; }
.sb-link.active::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--sb-marke); }
.sb-fuss { padding: 10px; border-top: 1px solid var(--sb-linie); }
.sb-toggle { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 8px 12px;
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--sb-dim); font: inherit; font-size: 13px; cursor: pointer; }
.sb-toggle:hover { background: var(--sb-hover); color: #ffffff; }
.sb-backdrop { display: none; }

/* Eingeklappt (nur Desktop): nur Symbole, Namen als Tooltip */
@media (min-width: 901px) {
  .app.sb-zu { grid-template-columns: var(--sb-breite-zu) minmax(0, 1fr); }
  .sb-zu .sb-kopf { padding: var(--space-4) 10px var(--space-2); }
  .sb-zu .sb-logo { padding: 6px; }
  .sb-zu .sb-logo .logo-voll { display: none; }
  .sb-zu .sb-logo .logo-mini { display: block; }
  .sb-zu .sb-gruppe { height: 1px; margin: 12px 8px; padding: 0; font-size: 0; background: var(--sb-linie); }
  .sb-zu .sb-link, .sb-zu .sb-toggle { justify-content: center; padding: 8px; }
  .sb-zu .sb-link span, .sb-zu .sb-toggle span { display: none; }
  .sb-zu .sb-toggle svg { transform: rotate(180deg); }
}

/* ---- Kopfleiste ---- */
.kopf {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--space-4);
  height: var(--kopf-hoehe); padding: 0 28px; background: var(--kopf-bg);
  box-shadow: none; border-bottom: 1px solid var(--border);
}
.sb-oeffnen { display: none; }
.breadcrumbs { flex: 1; min-width: 0; }
.breadcrumbs ol { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none;
  font-size: 13px; color: var(--text-dim); white-space: nowrap; overflow: hidden; }
.breadcrumbs li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.breadcrumbs a { color: var(--text-dim); text-decoration: none; }
.breadcrumbs a:hover { color: var(--primary); text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.such-knopf {
  display: flex; align-items: center; gap: 10px; width: 280px; height: 38px; padding: 0 8px 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2);
  color: var(--text-dim); font: inherit; font-size: 13.5px; cursor: pointer; text-align: left;
}
.such-knopf:hover { border-color: var(--primary); color: var(--text); }
.such-knopf .such-text { flex: 1; }
kbd { display: inline-block; min-width: 20px; padding: 1px 6px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); color: var(--text-dim); font: 600 11px/1.5 var(--mono); text-align: center; }
.topbar h1 { font-size: 26px; }
.content:focus { outline: none; }

/* ---- Tastatur: sichtbarer Fokus, Sprunglink ---- */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sidebar :focus-visible { outline-color: #ffffff; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 300; padding: 8px 14px;
  background: var(--surface); color: var(--primary); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.skip-link:focus { left: 12px; }

/* ---- Globale Suche ---- */
.suche-overlay { position: fixed; inset: 0; z-index: 200; display: flex; justify-content: center; align-items: flex-start;
  padding: 12vh var(--space-4) var(--space-4); background: rgba(10, 16, 24, .45); }
.suche-dialog { display: flex; flex-direction: column; width: min(640px, 100%); max-height: 70vh; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.suche-eingabe { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border);
  color: var(--text-dim); }
.suche-eingabe:focus-within { box-shadow: inset 0 -2px 0 var(--primary); }
.suche-eingabe input { flex: 1; min-height: 40px; padding: 0; border: 0; background: transparent; color: var(--text);
  font-size: 16px; outline: none; }
.suche-liste { overflow-y: auto; padding: 6px; }
.suche-gruppe { padding: 10px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-dim); }
.suche-treffer { display: flex; align-items: baseline; gap: 12px; padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.suche-treffer .t-titel { font-weight: 600; }
.suche-treffer .t-info { margin-left: auto; font-size: 12.5px; color: var(--text-dim); text-align: right; }
.suche-treffer[aria-selected="true"] { background: var(--primary-l); color: var(--primary); }
.suche-leer { padding: 22px 16px; text-align: center; color: var(--text-dim); }
.suche-fuss { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-dim); }
.suche-fuss kbd { margin-right: 3px; }

/* ---- Tablet und Handy: Seitenleiste als ausziehbares Menue ---- */
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; left: 0; top: 0; width: min(300px, 86vw); transform: translateX(-100%);
    transition: transform .2s ease; box-shadow: var(--shadow-lg); }
  .app.sb-mobil-offen .sidebar { transform: none; }
  .sb-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(10, 16, 24, .45); }
  .sb-backdrop[hidden] { display: none; }
  .sb-toggle { display: none; }
  .sb-oeffnen { display: inline-flex; }
  .kopf { height: 56px; padding: 0 12px; gap: var(--space-2); flex-wrap: nowrap; }
  .breadcrumbs li:not(:last-child) { display: none; }
  .such-knopf { width: auto; }
  .such-knopf .such-text, .such-knopf kbd { display: none; }
  .seite { padding: 18px 14px 40px; }
  .topbar h1 { font-size: 22px; }
  .icon-knopf, .sb-link { min-width: 44px; min-height: 44px; }   /* ausreichend grosse Touch-Ziele */
}
@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

/* =====================================================================
   LEITSTAND (ab 1.11.0)
   Dashboard: Block "Handlungsbedarf" (Kacheln je offenem Punkt) sowie
   anklickbare Kennzahlen mit Veraenderung zum Vergleichszeitraum.
   ===================================================================== */
.hb { margin-bottom: var(--space-5); }
.hb-kopf { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.hb-kopf h2 { margin: 0; font-size: 18px; }
.hb-zusammenfassung { font-size: 13px; color: var(--text-dim); }
.hb-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-3); }
.hb-punkt {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 14px 20px;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
  color: var(--text); text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.hb-punkt::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px;
  border-radius: 0 4px 4px 0; background: var(--ok); }
.hb-punkt.warnung::before { background: var(--warn); }
.hb-punkt.kritisch::before { background: var(--bad); }
.hb-punkt.kritisch { background: var(--bad-bg); border-color: color-mix(in srgb, var(--bad) 35%, var(--border)); }
.hb-punkt.ok { background: var(--surface-2); }
.hb-punkt:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.hb-stufe { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ok); }
.hb-punkt.warnung .hb-stufe { color: var(--warn); }
.hb-punkt.kritisch .hb-stufe { color: var(--bad); }
.hb-wert { margin-top: 4px; font-size: 28px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.hb-punkt.ok .hb-wert { color: var(--text-dim); }
.hb-titel { font-weight: 600; }
.hb-text { font-size: 12.5px; color: var(--text-dim); }
.hb-avis { margin-top: var(--space-3); }

/* Kennzahlen: als Link zur gefilterten Liste, Veraenderung zum Vergleichszeitraum */
.kpi-hinweis { margin: 0 0 var(--space-2); }
.kpi-link { display: block; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.kpi-link:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.kpi .delta { margin-top: 6px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi .delta.gut { color: var(--ok); }
.kpi .delta.schlecht { color: var(--bad); }
.kpi .delta.neutral { color: var(--text-dim); }
.kpi .delta .vgl { font-weight: 400; color: var(--text-dim); }
@media (prefers-reduced-motion: reduce) {
  .hb-punkt, .kpi-link { transition: none; }
}

/* =====================================================================
   LISTEN (ab 1.12.0)
   Gespeicherte Ansichten (Aufklappmenue) und Tabellen als Karten auf dem Handy.
   ===================================================================== */
.ansichten-wrap { position: relative; display: inline-block; }
.ansichten-menue {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 70; width: 280px; max-height: 360px; overflow-y: auto;
  padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
}
.ans-titel { padding: 6px 8px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.ans-zeile { display: flex; align-items: center; gap: 2px; }
.ans-oeffnen, .ans-aktion, .ans-loeschen {
  border: 0; background: none; color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer;
  border-radius: 6px; min-height: 36px; text-align: left;
}
.ans-oeffnen { flex: 1; min-width: 0; padding: 6px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ans-aktion { display: block; width: 100%; padding: 6px 8px; color: var(--primary); }
.ans-loeschen { flex: none; width: 32px; text-align: center; font-size: 18px; color: var(--text-dim); }
.ans-oeffnen:hover, .ans-aktion:hover { background: var(--surface-2); }
.ans-loeschen:hover { background: var(--bad-bg); color: var(--bad); }
.ans-leer { padding: 10px 8px; font-size: 13px; color: var(--text-dim); }
.ans-trenner { height: 1px; margin: 6px 4px; background: var(--border); }

/* Handy: Tabellenzeilen als Karten, Spaltenkopf steht vor jedem Wert (data-label aus core.js) */
@media (max-width: 700px) {
  .table-wrap:has(table.karten) { max-height: none; overflow: visible; border: 0; background: transparent; }
  table.karten, table.karten tbody { display: block; width: 100%; }
  table.karten thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.karten tr {
    display: block; margin-bottom: 10px; padding: 8px 12px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  }
  table.karten td, table.karten.auto-breite td, table.karten.sticky-cols td:first-child, table.karten.sticky-cols td:last-child {
    position: static; display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    max-width: none; min-width: 0; padding: 5px 0; border: 0; box-shadow: none; background: none;
    white-space: normal; overflow: visible; text-overflow: clip; text-align: right; overflow-wrap: anywhere;
  }
  table.karten td + td { border-top: 1px solid var(--border); }
  table.karten td::before {
    content: attr(data-label); flex: none; max-width: 48%; text-align: left; font-family: "Open Sans", system-ui, sans-serif;
    font-size: 11.5px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .03em;
  }
  table.karten td:first-child { font-weight: 600; }
  table.karten td:empty { display: none; }
  table.karten td:has(.row-actions)::before { content: none; }
  table.karten td:has(.row-actions) { justify-content: flex-end; }
  table.karten tbody tr:hover td { background: none; }
  table.karten tfoot { display: block; }
}

/* =====================================================================
   DETAILSEITEN (ab 1.13.0): Lieferant und Spedition mit Reitern
   ===================================================================== */
.detail-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: -4px 0 var(--space-4);
  font-size: 13.5px; color: var(--text-dim); }
.detail-reiter { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.detail-reiter .tab { flex: none; white-space: nowrap; }
.reiter-panel:focus { outline: none; }
.reiter-panel .card + .table-wrap, .reiter-panel .card + .card { margin-top: var(--space-3); }

/* =====================================================================
   PROTOKOLL UND BENACHRICHTIGUNGEN (ab 1.14.0)
   ===================================================================== */
/* Audit-Protokoll: nach Tagen gruppiert, ein Satz je Eintrag */
.proto-tag { margin: var(--space-5) 0 var(--space-2); font-size: 13px; font-weight: 700; color: var(--text-dim); }
.proto-tag:first-child { margin-top: 0; }
.proto-liste { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); }
.proto-eintrag { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-3);
  padding: 10px 14px 10px 18px; border-top: 1px solid var(--border); font-size: 13.5px; }
.proto-eintrag:first-child { border-top: 0; }
.proto-eintrag::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0 3px 3px 0; background: transparent; }
.proto-eintrag.warnung::before { background: var(--warn); }
.proto-eintrag.kritisch::before { background: var(--bad); }
.proto-eintrag time { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.proto-details { margin: 4px 0 0; padding-left: 18px; color: var(--text-dim); font-size: 12.5px; }
.proto-meta { margin-top: 2px; font-size: 11.5px; color: var(--text-dim); font-family: var(--mono); }

/* Glocke in der Kopfleiste */
.glocke-wrap { position: relative; }
#glockeBtn { position: relative; }
.glocke-zahl { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--bad); color: #ffffff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.glocke-zahl[hidden] { display: none; }
.glocke-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 80; width: min(380px, calc(100vw - 24px));
  max-height: min(70vh, 560px); overflow-y: auto; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); color: var(--text); }
.glocke-kopf { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--border); }
.glocke-hb { display: block; margin: 10px 12px 4px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px;
  text-decoration: none; color: var(--text); background: var(--ok-bg); }
.glocke-hb.warnung { background: var(--warn-bg); }
.glocke-hb.kritisch { background: var(--bad-bg); }
.glocke-liste { list-style: none; margin: 0; padding: 6px; }
.glocke-eintrag { display: grid; gap: 2px; width: 100%; padding: 8px 10px 8px 22px; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; position: relative; }
.glocke-eintrag:hover { background: var(--surface-2); }
.glocke-eintrag.neu::before { content: ""; position: absolute; left: 8px; top: 14px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--primary); }
.glocke-eintrag.neu .glocke-titel { font-weight: 700; }
.glocke-text { font-size: 12.5px; color: var(--text-dim); }
.glocke-zeit { font-size: 11.5px; color: var(--text-dim); }
.glocke-leer { margin: 0; padding: 18px 14px; color: var(--text-dim); font-size: 13px; }
@media (max-width: 900px) {
  .glocke-panel { position: fixed; right: 12px; top: 60px; }
}

/* =====================================================================
   RECHTE (ab 1.15.0): Rechte-Tabelle im Benutzerformular
   ===================================================================== */
.rechte-tabelle { width: 100%; font-size: 13.5px; }
.rechte-tabelle th, .rechte-tabelle td { padding: 6px 8px; white-space: normal; }
.rechte-tabelle .mitte { text-align: center; width: 70px; }
.rechte-tabelle td:last-child { white-space: nowrap; }
.rechte-tabelle input[type="checkbox"] { width: 18px; height: 18px; vertical-align: middle; margin-right: 6px; }
.rechte-tabelle tr.abweichung td { background: var(--warn-bg); }

/* =====================================================================
   KORREKTUREN (ab 1.15.2)
   ===================================================================== */
/* Breadcrumbs: bei Platzmangel zuerst Start/Bereich kuerzen, der aktuelle Name bleibt lesbar */
.breadcrumbs li { min-width: 0; flex: 0 100 auto; overflow: hidden; text-overflow: ellipsis; }
.breadcrumbs li[aria-current] { flex: 0 1 auto; }

/* Filterleisten: auf dem Handy einklappbar (Knopf aus filterleiste.js) */
.filter-umschalter { display: none; }
@media (max-width: 700px) {
  .filter-umschalter { display: flex; width: 100%; justify-content: center; margin-bottom: var(--space-3); }
  .filters.eingeklappt { display: none; }
}