/* =====================================================================
   Lagersystem — Oberfläche

   Bewusst eine einzige, handgeschriebene CSS-Datei ohne Framework und ohne
   Übersetzungsschritt. Damit läuft die Oberfläche auch auf einem Rechner
   ohne Internetverbindung, und es gibt nichts, was beim Serverumzug erst
   gebaut werden muss.

   Grundhaltung: professionell, klar, schnell. Keine Animationen ohne Zweck
   (§21). Zahlen stehen in Tabellenziffern, damit Spalten untereinander
   fluchten.
   ===================================================================== */

:root {
  /* Standard ist DUNKEL. Hell und Auto stellt man im Profilmenue ein; die Wahl
     steht als data-theme am <html>-Element (siehe app.js und den kleinen
     Skriptblock im Kopf von base.html, der sie vor dem ersten Zeichnen setzt —
     sonst blitzt bei jedem Seitenaufruf kurz die falsche Farbe auf). */
  color-scheme: dark;
  --ground:      #060a11;
  --surface:     #0d1420;
  --surface-2:   #121b2b;
  --field:       #0a1019;
  --ink:         #e8f0fb;
  --ink-2:       #b2c1d6;
  --muted:       #7a8da6;
  --rule:        #1b283d;
  --rule-strong: #2c3f5e;

  --accent:      #2de2c6;
  --accent-2:    #5b8cff;
  --accent-ink:  #02201b;
  --accent-soft: rgba(45,226,198,.12);

  --warn:        #ffb547;
  --warn-soft:   rgba(255,181,71,.12);
  --crit:        #ff6b7d;
  --crit-soft:   rgba(255,107,125,.12);
  --ok:          #3be58f;
  --ok-soft:     rgba(59,229,143,.12);

  --glass:       rgba(9,14,24,.72);
  --sheen:       rgba(140,180,255,.045);
  --row-hover:   rgba(91,140,255,.08);
  --glow-a:      rgba(45,226,198,.10);
  --glow-b:      rgba(91,140,255,.12);
  --grid-line:   rgba(120,160,230,.055);
  --glow:        0 0 0 1px rgba(45,226,198,.40), 0 0 28px -6px rgba(45,226,198,.45);
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 14px 34px -22px rgba(0,0,0,.95);

  --radius: 8px;
  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", "Consolas", ui-monospace, "SF Mono", Menlo, monospace;
}

:root[data-theme="hell"] {
  color-scheme: light;
  --ground:      #e9eff7;
  --surface:     #ffffff;
  --surface-2:   #f2f6fb;
  --field:       #ffffff;
  --ink:         #0a1424;
  --ink-2:       #34475f;
  --muted:       #667a92;
  --rule:        #d6e0ec;
  --rule-strong: #b3c3d6;

  --accent:      #067a6b;
  --accent-2:    #2f62e0;
  --accent-ink:  #ffffff;
  --accent-soft: rgba(6,122,107,.10);

  --warn:        #8a5407;
  --warn-soft:   #fbf0dc;
  --crit:        #b0283a;
  --crit-soft:   #fbe6e9;
  --ok:          #11703f;
  --ok-soft:     #dcf1e6;

  --glass:       rgba(255,255,255,.78);
  --sheen:       rgba(255,255,255,.0);
  --row-hover:   rgba(47,98,224,.05);
  --glow-a:      rgba(6,122,107,.13);
  --glow-b:      rgba(47,98,224,.10);
  --grid-line:   rgba(40,70,120,.06);
  --glow:        0 0 0 1px rgba(6,122,107,.30), 0 8px 26px -10px rgba(6,122,107,.45);
  --shadow: 0 1px 2px rgba(10,20,36,.06), 0 10px 28px -18px rgba(10,20,36,.35);
}

@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
  color-scheme: light;
  --ground:      #e9eff7;
  --surface:     #ffffff;
  --surface-2:   #f2f6fb;
  --field:       #ffffff;
  --ink:         #0a1424;
  --ink-2:       #34475f;
  --muted:       #667a92;
  --rule:        #d6e0ec;
  --rule-strong: #b3c3d6;

  --accent:      #067a6b;
  --accent-2:    #2f62e0;
  --accent-ink:  #ffffff;
  --accent-soft: rgba(6,122,107,.10);

  --warn:        #8a5407;
  --warn-soft:   #fbf0dc;
  --crit:        #b0283a;
  --crit-soft:   #fbe6e9;
  --ok:          #11703f;
  --ok-soft:     #dcf1e6;

  --glass:       rgba(255,255,255,.78);
  --sheen:       rgba(255,255,255,.0);
  --row-hover:   rgba(47,98,224,.05);
  --glow-a:      rgba(6,122,107,.13);
  --glow-b:      rgba(47,98,224,.10);
  --grid-line:   rgba(40,70,120,.06);
  --glow:        0 0 0 1px rgba(6,122,107,.30), 0 8px 26px -10px rgba(6,122,107,.45);
  --shadow: 0 1px 2px rgba(10,20,36,.06), 0 10px 28px -18px rgba(10,20,36,.35);
  }
}

/* Papier ist immer hell: Helle Schrift auf weissem Blatt waere unlesbar. */
@media print {
  :root {
  color-scheme: light;
  --ground:      #e9eff7;
  --surface:     #ffffff;
  --surface-2:   #f2f6fb;
  --field:       #ffffff;
  --ink:         #0a1424;
  --ink-2:       #34475f;
  --muted:       #667a92;
  --rule:        #d6e0ec;
  --rule-strong: #b3c3d6;

  --accent:      #067a6b;
  --accent-2:    #2f62e0;
  --accent-ink:  #ffffff;
  --accent-soft: rgba(6,122,107,.10);

  --warn:        #8a5407;
  --warn-soft:   #fbf0dc;
  --crit:        #b0283a;
  --crit-soft:   #fbe6e9;
  --ok:          #11703f;
  --ok-soft:     #dcf1e6;

  --glass:       rgba(255,255,255,.78);
  --sheen:       rgba(255,255,255,.0);
  --row-hover:   rgba(47,98,224,.05);
  --glow-a:      rgba(6,122,107,.13);
  --glow-b:      rgba(47,98,224,.10);
  --grid-line:   rgba(40,70,120,.06);
  --glow:        0 0 0 1px rgba(6,122,107,.30), 0 8px 26px -10px rgba(6,122,107,.45);
  --shadow: 0 1px 2px rgba(10,20,36,.06), 0 10px 28px -18px rgba(10,20,36,.35);
  }
  body, body::before { background: #fff !important; background-image: none !important; }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

h1 { font-size: 1.55rem; margin: 0 0 .3em; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin: 2rem 0 .6rem; letter-spacing: -.005em; }
h3 { font-size: .95rem; margin: 1.4rem 0 .5rem; }

.wrap      { max-width: 1180px; margin: 0 auto; padding: 26px 20px 90px; }
.wrap-slim { max-width: 720px;  margin: 0 auto; padding: 26px 20px 90px; }

/* Fuer Seiten, die im Kern eine breite Tabelle sind. 1180 px sind fuer
   Fliesstext richtig — bei vierzehn Spalten quetschen sie die Produktnamen
   auf drei Zeilen, obwohl rechts und links Platz frei bleibt. Die Obergrenze
   bleibt trotzdem: Auf einem sehr breiten Bildschirm wandert das Auge sonst
   von der SKU ganz links zum Lagerwert ganz rechts und verliert die Zeile. */
.wrap-weit { max-width: 1800px; margin: 0 auto; padding: 26px 24px 90px; }
@media (max-width: 900px) { .wrap-weit { padding-left: 14px; padding-right: 14px; } }

.lead   { color: var(--ink-2); margin: 0 0 1.4rem; }
.muted  { color: var(--muted); }
.mono   { font-family: var(--mono); }
.num    { font-variant-numeric: tabular-nums; text-align: right; }
.nowrap { white-space: nowrap; }

/* ------------------------------------------------------------- Kopfzeile */

/* Drei Zonen in Leserichtung: Marke links, die Bereiche in der Mitte, Suche
   und Konto rechts. Darunter, nur wenn der Bereich Unterseiten hat, eine
   zweite Zeile (.subbar), und unter dem Ganzen der Pfad (.pathbar).

   Die Mitte (.mainnav) nimmt den freien Platz — `flex: 1 1 auto` mit
   `min-width: 0`, damit sie auf schmalen Bildschirmen schrumpfen und
   scrollen darf, statt die rechte Zone aus dem Bild zu schieben. */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 40;
}
.topbar-inner {
  max-width: 1320px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 22px; min-height: 56px;
}

.brand { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.brand-name { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; white-space: nowrap; }
/* Die Versionsnummer klein neben der Marke. Sie steht zwar auch in der
   Fusszeile, aber wer einen Fehler meldet, hat den Kopf vor Augen und
   muss nicht erst ans Seitenende scrollen. Bewusst ohne das Wort
   „Version": im Kopf ist der Platz knapp, die Zahl allein genuegt. */
.brand-version {
  margin-left: 7px; font-weight: 500; font-size: .7em;
  color: var(--muted); letter-spacing: .01em;
  font-variant-numeric: tabular-nums; vertical-align: 1px;
}

/* Die drei Bereiche. Der Unterstrich sitzt auf der Unterkante der Kopfleiste,
   damit der gewaehlte Bereich mit der Linie darunter „verwaechst" — man sieht
   sofort, wo man ist, ohne dass ein farbiger Kasten Aufmerksamkeit zieht. */
.mainnav { flex: 1 1 auto; min-width: 0; display: flex; align-self: stretch; gap: 2px; }
.navtab {
  display: flex; align-items: center; padding: 0 14px; position: relative;
  color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .93rem;
  white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.navtab:hover { color: var(--ink); background: var(--surface-2); }
.navtab.on { color: var(--ink); border-bottom-color: var(--accent); }

.topright {
  flex: 0 0 auto; margin-left: auto; min-width: 0;
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
}

/* Die Suche darf wachsen, aber nicht endlos — sonst draengt sie die Bereiche. */
.topsearch { position: relative; width: 260px; max-width: 30vw; min-width: 150px; }
.topsearch input {
  width: 100%; padding: 7px 12px; font: inherit; font-size: .9rem;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--surface-2); color: var(--ink);
}

.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.avatar {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  font-size: .74rem; font-weight: 700; letter-spacing: .02em;
}
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 232px;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; z-index: 50;
}
.menu-panel a {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 4px; color: var(--ink-2);
  text-decoration: none; font-size: .88rem;
}
.menu-panel a:hover { background: var(--surface-2); color: var(--ink); }
.menu-panel hr { border: 0; border-top: 1px solid var(--rule); margin: 6px 4px; }
.menu-user { padding: 8px 10px 10px; border-bottom: 1px solid var(--rule); margin-bottom: 5px; }
.menu-user strong { display: block; font-size: .9rem; }

/* Unternavigation. Heller Grund statt Rahmen: Sie gehoert zur Kopfleiste, soll
   aber nicht mit den Bereichen darueber um Aufmerksamkeit konkurrieren. Bei
   vielen Eintraegen scrollt sie waagerecht, statt umzubrechen — ein
   zweizeiliges Menue springt von Seite zu Seite. */
.subbar { background: var(--surface-2); border-top: 1px solid var(--rule); }
.subnav {
  max-width: 1320px; margin: 0 auto; padding: 0 9px;
  display: flex; gap: 2px;
}
.subnav a {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 9px 11px; font-size: .86rem; color: var(--ink-2); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.subnav a:hover { color: var(--ink); }
.subnav a.on { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); }

/* „Mehr": Aufklappmenue am Ende der Unternavigation. */
.subnav .submore { display: flex; align-items: stretch; margin-left: auto; }
.subnav .submore summary {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 9px 11px; font-size: .86rem; color: var(--ink-2);
  border-bottom: 2px solid transparent;
}
.subnav .submore summary::after { content: "\25BE"; font-size: .75em; opacity: .65; }
.subnav .submore summary:hover { color: var(--ink); }
.subnav .submore.on summary { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); }
.subnav .submore .menu-panel { top: calc(100% + 1px); }
.subnav .menu-panel a { padding: 7px 10px; border-bottom: 0; white-space: normal; }
.subnav a.sub-inline { display: none; }

/* Pfad. Nur sichtbar, wenn die Seite wirklich einen setzt — sonst stuende
   unter der Kopfleiste ein leerer Streifen. */
.pathbar { max-width: 1320px; margin: 0 auto; padding: 10px 20px 0; }
.pathbar:not(:has(a)) { display: none; }
.crumbs {
  min-width: 0; font-size: .82rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .sep { margin: 0 6px; opacity: .5; }

/* ---------------------------------------------------------- Vorschlagsliste */

.suggestions {
  position: absolute; left: 0; right: 0; top: calc(100% + 5px);
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: var(--shadow);
  max-height: 340px; overflow-y: auto; z-index: 60;
}
.suggestions a {
  display: block; padding: 8px 12px; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--rule); font-size: .88rem;
}
.suggestions a:last-child { border-bottom: 0; }
.suggestions a:hover, .suggestions a.active { background: var(--accent-soft); }
.suggestions .s-sub { display: block; color: var(--muted); font-size: .78rem; }

/* Auswahlfeld als Tippfeld (siehe app.js). Das <select> steht weiter im
   Formular und haelt den Wert, ist aber ausgeblendet; ohne JavaScript
   bleibt es sichtbar und bedienbar. */
.combo { position: relative; }
.combo .suggestions { top: calc(100% + 4px); }
.combo-treffer {
  display: block; width: 100%; text-align: left; padding: 8px 12px;
  background: none; border: 0; border-bottom: 1px solid var(--rule);
  font: inherit; font-size: .88rem; color: var(--ink); cursor: pointer;
}
.combo-treffer:last-child { border-bottom: 0; }
.combo-treffer:hover, .combo-treffer.active { background: var(--accent-soft); }

/* ------------------------------------------------------------- Meldungen */

.messages { max-width: 1180px; margin: 14px auto -8px; padding: 0 20px; }
.msg {
  padding: 10px 14px; border-radius: var(--radius); margin-bottom: 8px;
  border: 1px solid var(--rule); border-left-width: 3px; background: var(--surface);
  font-size: .9rem;
}
.msg-success { border-left-color: var(--ok);   background: var(--ok-soft);   color: var(--ink); }
.msg-info    { border-left-color: var(--accent); background: var(--accent-soft); }
.msg-warning { border-left-color: var(--warn); background: var(--warn-soft); }
.msg-error   { border-left-color: var(--crit); background: var(--crit-soft); }

/* ------------------------------------------------------------- Startseite */

.home { max-width: 940px; margin: 0 auto; padding: 46px 20px 120px; }

.greeting {
  font-size: 1.45rem; font-weight: 600; letter-spacing: -.01em;
  color: var(--ink); margin: 0 0 18px;
}

.scanfield { margin-bottom: 34px; }
.scanfield label {
  display: block; font-size: .72rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: 8px;
}
.scanfield input {
  width: 100%; padding: 16px 18px; font: inherit; font-size: 1.15rem;
  border: 2px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
}
.scanfield input:focus { border-color: var(--accent); outline: none; }
.scanfield .hint { margin-top: 7px; font-size: .82rem; color: var(--muted); }
/* Bezugsrahmen fuer die Vorschlagsliste: Sie soll direkt unter dem Feld
   haengen, nicht unter dem gesamten Formular samt Hinweiszeile. */
.scanbox { position: relative; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.tile {
  display: block; padding: 18px 18px 16px; background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--radius);
  text-decoration: none; color: var(--ink); box-shadow: var(--shadow);
}
.tile:hover { border-color: var(--accent); }
.tile strong { display: block; font-size: 1rem; margin-bottom: 3px; }
.tile span   { display: block; font-size: .84rem; color: var(--muted); line-height: 1.4; }
.tile.wip { opacity: .72; }
.tile .wip-chip {
  display: inline-block; margin-bottom: 6px; font-size: .66rem; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 700; color: var(--warn);
  background: var(--warn-soft); padding: 2px 7px; border-radius: 3px;
}

/* -------------------------------------------------------------- Statusleiste */

.statusbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--surface); border-top: 1px solid var(--rule);
}
.statusbar-inner {
  max-width: 940px; margin: 0 auto; padding: 9px 20px;
  display: flex; flex-wrap: wrap; gap: 0;
}
.stat {
  flex: 1 1 auto; padding: 0 16px; border-right: 1px solid var(--rule);
  text-decoration: none; color: inherit; min-width: 110px;
}
.stat:last-child { border-right: 0; }
.stat:first-child { padding-left: 0; }
.stat dt {
  font-size: .64rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 1px;
}
.stat dd { margin: 0; font-weight: 700; font-size: .96rem; font-variant-numeric: tabular-nums; }
.stat.is-warn dd { color: var(--warn); }
.stat.is-crit dd { color: var(--crit); }
a.stat:hover dt { color: var(--ink-2); }

/* ------------------------------------------------------------------ Karten */

.card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px;
}
.card > :first-child { margin-top: 0; }
.card > :last-child  { margin-bottom: 0; }
.card-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px;
  margin: -2px 0 12px;
}
.card-head h2 { margin: 0; }

.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px;
      background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius);
      overflow: hidden; margin-bottom: 16px; }
.kv > div { background: var(--surface); padding: 12px 14px; }
.kv dt { font-size: .64rem; letter-spacing: .09em; text-transform: uppercase;
         color: var(--muted); margin: 0 0 3px; }
.kv dd { margin: 0; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.kv dd small { font-weight: 400; font-size: .74rem; color: var(--muted); }

/* ---------------------------------------------------------------- Tabellen */

.tw { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius);
      background: var(--surface); margin-bottom: 16px; }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--rule);
         vertical-align: top; }
thead th {
  background: var(--surface-2); font-size: .66rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); font-weight: 700; white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td .sub { display: block; color: var(--muted); font-size: .78rem; }
.empty { padding: 34px 20px; text-align: center; color: var(--muted); }

/* -------------------------------------------------------------- Abzeichen */

.pill {
  display: inline-block; white-space: nowrap; padding: 1px 7px; border-radius: 10px;
  font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--rule);
}
.pill-ok   { background: var(--ok-soft);   color: var(--ok);   border-color: transparent; }
.pill-warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.pill-crit { background: var(--crit-soft); color: var(--crit); border-color: transparent; }
.pill-accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

.role-chip { display: inline-block; font-size: .68rem; font-weight: 700; padding: 1px 7px;
             border-radius: 10px; background: var(--accent-soft); color: var(--accent); }

.qty-neg { color: var(--crit); font-weight: 700; }
.qty-low { color: var(--warn); font-weight: 700; }

/* -------------------------------------------------------------- Formulare */

form .field { margin-bottom: 15px; }
form label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 4px; }
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: 8px 11px; font: inherit; font-size: .92rem;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
}
textarea { resize: vertical; }
.helptext { display: block; font-size: .79rem; color: var(--muted); margin-top: 4px; }
.errorlist { list-style: none; padding: 0; margin: 5px 0 0; color: var(--crit); font-size: .82rem; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.checkline { display: flex; align-items: center; gap: 8px; }
.checkline input { width: auto; }
.checkline label { margin: 0; }

.btn {
  display: inline-block; padding: 8px 16px; font: inherit; font-size: .9rem; font-weight: 600;
  border-radius: var(--radius); border: 1px solid var(--rule-strong);
  background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none;
}
.btn:hover { border-color: var(--rule-strong); background: var(--surface-2); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent); filter: brightness(1.08); }
.btn-danger  { color: var(--crit); border-color: var(--crit); background: transparent; }
.btn-danger:hover { background: var(--crit-soft); }
.btn-small   { padding: 4px 10px; font-size: .8rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; }
.actions-right { margin-left: auto; }

/* -------------------------------------------------------------- Hinweise */

.note {
  border: 1px solid var(--rule); border-left: 3px solid var(--rule-strong);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 12px 16px;
  margin: 14px 0; font-size: .89rem; background: var(--surface);
}
.note > :last-child { margin-bottom: 0; }
.note-warn { border-left-color: var(--warn); background: var(--warn-soft); }
.note-crit { border-left-color: var(--crit); background: var(--crit-soft); }
.note-accent { border-left-color: var(--accent); background: var(--accent-soft); }
.note strong { display: block; margin-bottom: 3px; }

/* ---------------------------------------------------------------- Filter */

.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; align-items: center; }
.filters a {
  padding: 4px 11px; border-radius: 14px; font-size: .82rem; text-decoration: none;
  border: 1px solid var(--rule); color: var(--ink-2); background: var(--surface);
}
.filters a.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.filters form { display: flex; gap: 6px; margin-left: auto; }
.filters form input { width: 220px; padding: 4px 10px; font-size: .85rem; }

.pager { display: flex; gap: 10px 20px; align-items: center; flex-wrap: wrap;
         justify-content: space-between; margin: 18px 0;
         font-size: .86rem; color: var(--muted); }
.pager a { padding: 5px 12px; border: 1px solid var(--rule); border-radius: var(--radius);
           text-decoration: none; background: var(--surface); color: var(--ink-2); }
.pager a:hover { border-color: var(--accent); }

.pager-seiten { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pager-groesse { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.pager-groesse a { padding: 4px 10px; font-variant-numeric: tabular-nums; }
.pager-groesse a.on { background: var(--accent); color: var(--accent-ink);
                      border-color: var(--accent); font-weight: 600; }
.pager-groesse .helptext { margin: 0 4px 0 0; }

/* ---------------------------------------------------------------- Anmeldung */

.loginpage { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.loginbox { width: 100%; max-width: 380px; background: var(--surface);
            border: 1px solid var(--rule); border-radius: var(--radius);
            padding: 30px 28px; box-shadow: var(--shadow); }
.loginbox .brand { justify-content: center; margin-bottom: 20px; font-size: 1.1rem; }

/* -------------------------------------------------------- Fehlermeldungen */

/* Aufrufverlauf: darf umbrechen, aber die Einrueckung muss bleiben — ohne sie
   ist nicht mehr zu sehen, welche Zeile zu welchem Aufruf gehoert. */
pre.code {
  margin: 0; padding: 14px 16px;
  background: var(--surface-2); border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8rem; line-height: 1.5; color: var(--ink);
  white-space: pre-wrap; word-break: break-word; tab-size: 4;
  max-height: 460px; overflow: auto;
}

/* ------------------------------------------------------------ Fusszeile */

.fusszeile {
  max-width: 1180px; margin: 34px auto 0; padding: 12px 20px 22px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  border-top: 1px solid var(--rule);
  font-size: .78rem; color: var(--muted);
}
.fusszeile .version { font-variant-numeric: tabular-nums; }

/* Unter 1100 px reicht der Platz fuer die Unternavigation nicht mehr: Sie
   scrollt waagerecht, und „Mehr" loest sich in normale Links auf. Ein
   Aufklappmenue innerhalb eines Scrollbereichs wuerde abgeschnitten. */
@media (max-width: 1100px) {
  .subnav { overflow-x: auto; scrollbar-width: thin; }
  .subnav .submore { display: none; }
  .subnav a.sub-inline { display: inline-flex; }
}

@media (max-width: 900px) {
  .topbar-inner { gap: 14px; }
  .topsearch { width: 190px; }
  .navtab { padding: 0 10px; font-size: .88rem; }
}

@media (max-width: 720px) {
  .brand-version { display: none; }    /* die Zahl steht weiter in der Fusszeile */

  /* Auf dem Handy bekommen die Bereiche eine eigene Zeile unter Marke und
     Konto und teilen sie sich zu gleichen Teilen — drei grosse Tippflaechen
     statt drei winziger Woerter. */
  .topbar-inner { flex-wrap: wrap; gap: 0 10px; padding-top: 8px; }
  .brand { order: 1; }
  .topright { order: 2; }
  .mainnav { order: 3; flex: 1 0 100%; margin: 8px -20px 0; padding: 0 12px; }
  .navtab { flex: 1 1 0; justify-content: center; padding: 11px 4px; font-size: .84rem; }
  .navtab { margin-bottom: 0; border-bottom-width: 3px; }

  /* Auf dem Handy verschwindet die Suche aus der Kopfleiste. Sie muesste sich
     den Platz mit Marke und Menue teilen und waere dann rund 60 px breit —
     ein Feld, in das nichts hineinpasst, ist schlechter als keines. Der Weg
     zur Suche bleibt: das Logo tippen, dann steht das grosse Scanfeld da.
     Die Artikelliste hat ausserdem ihr eigenes Suchfeld ueber der Tabelle. */
  .topsearch { display: none; }
  .pathbar { padding-left: 14px; padding-right: 14px; }
  .greeting { font-size: 1.2rem; }
  .statusbar-inner { gap: 4px 0; }
  .stat { flex: 1 1 33%; border-right: 0; padding: 4px 8px; min-width: 0; }
  .stat:first-child { padding-left: 8px; }
}

@media print {
  .topbar, .pathbar, .statusbar, .actions, .filters, .pager { display: none !important; }
}

/* ------------------------------------------------- Artikel-Auswahlfeld */

.picker { position: relative; }
.picker input[type=search] { width: 100%; }
.picker .suggestions { top: calc(100% + 4px); }

/* Vorschau der Verpackungszuordnung */
pre[data-preview] {
  background: var(--accent-soft);
  border-color: transparent;
  border-left: 3px solid var(--accent);
  white-space: pre-wrap;
  font-size: .84rem;
  color: var(--ink);
}

/* Ausdrückliche Option, z. B. „Kein Zubehör“ */
.optionbox {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; margin: 0 0 14px;
  border: 1px solid var(--rule); border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface-2); cursor: pointer; font-weight: 400;
}
.optionbox input { width: auto; margin-top: 3px; flex: 0 0 auto; }
.optionbox span { font-size: .88rem; color: var(--ink-2); }
.optionbox strong { display: block; color: var(--ink); margin-bottom: 2px; }
.optionbox:has(input:checked) { background: var(--accent-soft); border-left-color: var(--accent); }

[data-accessory-table].is-off { opacity: .4; pointer-events: none; }


/* ------------------------------------------------------------ Produktfotos */
/* Feste Maße an Zelle UND Bild: sonst springt die Tabelle beim Nachladen,
   weil jedes Bild erst beim Eintreffen seinen Platz beansprucht. */
.thumb-col        { width: 52px; padding-right: 0; }
.thumb            { display: block; width: 44px; height: 44px; border-radius: 6px;
                    overflow: hidden; background: var(--surface-2);
                    border: 1px solid var(--rule); }
.thumb img        { width: 100%; height: 100%; object-fit: contain; display: block;
                    background: #fff; }
.thumb-empty      { display: flex; align-items: center; justify-content: center;
                    width: 100%; height: 100%; color: var(--muted);
                    font-size: .9rem; }
.thumb-gross      { width: 96px; height: 96px; border-radius: 8px; flex: 0 0 auto; }
.titel-mit-bild   { display: flex; align-items: center; gap: 16px; }


/* ---------------------------------------------------------------- Bildmarke */
/* Zwei Fassungen, eine sichtbar: das dunkle Quadrat verschwindet auf dunklem
   Grund, das helle auf hellem. Umgeschaltet wird über die Farbeinstellung des
   Systems — nicht über JavaScript, damit beim Laden nichts blinkt. */
.brand-mark        { display: block; border-radius: 3px; }
.loginlogo         { text-align: center; margin-bottom: 22px; }
.loginlogo img     { display: inline-block; height: auto; max-width: 150px; }
.loginlogo-text    { margin: 4px 0 0; font-weight: 700; letter-spacing: -.01em;
                     color: var(--ink-2); }
/* Die Umschaltregeln stehen bewusst mit `:root` davor.
   Ohne das war der Fehler da: `.loginlogo img { display: inline-block }` hat
   eine Klasse UND ein Element (0,1,1), `.logo-dunkel { display: none }` nur
   eine Klasse (0,1,0) — also gewann die Elementregel, und auf der
   Anmeldeseite standen BEIDE Fassungen des Logos nebeneinander. Mit `:root`
   sind es zwei Klassen (0,2,0), und das Ausblenden gewinnt zuverlässig.
   Ein `!important` täte es auch und würde den nächsten Fehler dieser Art
   nur schwerer auffindbar machen. */
/* Standard ist dunkel, also die helle Fassung der Bildmarke. Bei hellem Thema
   (ausdruecklich oder ueber „Auto" bei hellem System) kommt die dunkle. */
:root .logo-hell   { display: none; }
:root .logo-dunkel { display: inline-block; }
:root .brand-mark.logo-dunkel { display: block; }

:root[data-theme="hell"] .logo-hell   { display: inline-block; }
:root[data-theme="hell"] .logo-dunkel { display: none; }
:root[data-theme="hell"] .brand-mark.logo-hell { display: block; }
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] .logo-hell   { display: inline-block; }
  :root[data-theme="auto"] .logo-dunkel { display: none; }
  :root[data-theme="auto"] .brand-mark.logo-hell { display: block; }
}

/* ------------------------------------------------ Benutzer und Historie */
.muted-row td     { opacity: .55; }
.warn             { color: var(--warn); font-weight: 600; }
/* Drei Rollen, drei Farben — in einer Benutzerliste soll man den Admin
   erkennen, ohne den Text zu lesen. */
.role-lager       { background: var(--surface-2); color: var(--ink-2); }
.role-team        { background: var(--accent-soft); color: var(--accent); }
.role-admin       { background: var(--warn-soft); color: var(--warn); }

/* ---------------------------------------------------------------- Margen */
/* Grün ab Zielmarge, rot darunter. Nicht nur die Schrift einfärben: In einer
   Tabelle mit fünfzig Zeilen sucht das Auge Flächen, keine Zahlen. Rot und
   Grün sind zusätzlich hell/dunkel unterschiedlich, damit die Spalte auch
   bei Rot-Grün-Schwäche lesbar bleibt. */
.marge            { display: inline-block; padding: 2px 8px; border-radius: 10px;
                    font-weight: 700; text-decoration: none; }
.marge-gut        { background: var(--ok-soft);   color: var(--ok); }
.marge-schwach    { background: var(--crit-soft); color: var(--crit); }
.note-ok          { border-left-color: var(--ok); background: var(--ok-soft); }


/* ------------------------------------------------------------- Dashboard */
/* Das Dashboard antwortet auf eine Frage: „Was braucht heute mich?" Ganz oben
   deshalb drei grosse Zahlen, darunter die Bereiche mit ihren Einzelheiten.
   Eine Zahl, die noch keine Quelle hat, steht als „—" mit ehrlicher
   Beschriftung da und nicht als 0: Eine Null suggeriert „alles erledigt". */

.dash { max-width: 1180px; margin: 0 auto; padding: 30px 20px 90px; }
.dash-head { display: flex; align-items: baseline; justify-content: space-between;
             flex-wrap: wrap; gap: 4px 16px; margin-bottom: 20px; }
.dash-head .greeting { margin: 0; }
.dash-date { color: var(--muted); font-size: .88rem; }

.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
.kpi {
  display: flex; flex-direction: column; gap: 2px; padding: 18px 20px 16px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow); text-decoration: none; color: var(--ink);
  border-top: 3px solid var(--rule-strong);
}
a.kpi:hover { border-color: var(--accent); border-top-color: var(--accent); }
.kpi-label { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
             color: var(--muted); font-weight: 700; }
.kpi-value { font-size: 2.3rem; line-height: 1.15; font-weight: 700; letter-spacing: -.02em;
             font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: .84rem; color: var(--muted); }
.kpi.is-warn { border-top-color: var(--warn); }
.kpi.is-warn .kpi-value { color: var(--warn); }
.kpi.is-crit { border-top-color: var(--crit); }
.kpi.is-crit .kpi-value { color: var(--crit); }
.kpi.is-ok { border-top-color: var(--ok); }
.kpi.is-pending .kpi-value { color: var(--muted); }

.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.dash-grid .card { margin-bottom: 0; }
.card-link { font-size: .84rem; white-space: nowrap; }

/* Zeilen mit Name links und Zustand rechts — fuer Plattformen und Kennzahlen. */
.rows { margin: 0; padding: 0; list-style: none; }
.rows li, .rows > div {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: .9rem;
}
.rows li:last-child, .rows > div:last-child { border-bottom: 0; }
.rows dt, .rows .k { color: var(--ink-2); }
.rows dd, .rows .v { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.rows .sub { display: block; font-weight: 400; font-size: .78rem; color: var(--muted); }
a.rows-link { color: inherit; text-decoration: none; }
a.rows-link:hover .k { color: var(--accent); }

.pill-muted { background: var(--surface-2); color: var(--muted); border: 1px solid var(--rule); }

/* ------------------------------------------------------ Kundenkommunikation */

.pagehead { display: flex; align-items: flex-end; justify-content: space-between;
            flex-wrap: wrap; gap: 10px 20px; margin-bottom: 14px; }
.pagehead h1 { margin: 0; }
.pagehead .lead { margin: 4px 0 0; }
.pagehead .actions { margin: 0; }

.filterbar { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-bottom: 14px; }
.filterbar .filters { margin: 0; }
.filterbar .filters-label { font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
                            color: var(--muted); font-weight: 700; margin-right: 2px; }

/* Leere Liste: sagt, WARUM sie leer ist und was dazu fehlt — „Keine Eintraege"
   allein liesse offen, ob etwas kaputt ist oder nur noch nichts da. */
.empty-state { padding: 38px 24px; text-align: center; color: var(--ink-2); }
.empty-state strong { display: block; font-size: 1.02rem; color: var(--ink); margin-bottom: 4px; }
.empty-state p { margin: 0 auto; max-width: 52ch; font-size: .9rem; color: var(--muted); }

.dringend { color: var(--crit); font-weight: 700; }
.thead-note { font-weight: 400; text-transform: none; letter-spacing: 0; }

@media (max-width: 900px) {
  .kpis { grid-template-columns: 1fr; gap: 10px; }
  .kpi { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
  .kpi-label { flex: 1 0 100%; }
  .kpi-value { font-size: 1.8rem; }
  .dash-grid { grid-template-columns: 1fr; }
}


/* =====================================================================
   Oberflaeche 2.8 — dunkel, leuchtend, ruhig

   Eine Schicht ueber dem Grundaufbau: Sie aendert nur Aussehen, nie Aufbau.
   Grundsaetze, damit „futuristisch" im Lager nicht zur Last wird:
   - Leuchten ist Information, nicht Dekoration: Nur Aktives, Ausgewaehltes
     und Warnungen glimmen. Alles andere bleibt still.
   - Kontrast vor Effekt: Text bleibt auf allen Flaechen gut lesbar.
   - Bewegung nur kurz und nur bei Beruehrung; wer „weniger Bewegung"
     eingestellt hat, bekommt keine (siehe ganz unten).
   - Alles ueber Farbwerte (:root oben) gesteuert — Hell und Dunkel teilen
     sich dieselben Regeln.
   ===================================================================== */

::selection { background: var(--accent-soft); color: var(--ink); }
html { scrollbar-color: var(--rule-strong) transparent; }

/* Hintergrund: zwei weiche Lichtflecken und ein kaum sichtbares Raster. Das
   Raster liegt auf einem eigenen, festen Element hinter dem Inhalt, damit es
   beim Scrollen stehen bleibt und keinen Text beruehrt. */
body {
  background-color: var(--ground);
  background-image:
    radial-gradient(900px 520px at 8% -8%, var(--glow-a), transparent 62%),
    radial-gradient(800px 480px at 100% 0%, var(--glow-b), transparent 58%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 20%, transparent 78%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 20%, transparent 78%);
}

h1 { font-weight: 700; letter-spacing: -.02em; }
a { text-decoration-thickness: 1px; }

/* ------------------------------------------------------------ Kopfleiste */

.topbar {
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
          backdrop-filter: blur(16px) saturate(150%);
  border-bottom-color: var(--rule);
}
/* Leuchtlinie am unteren Rand: von der Mitte nach aussen auslaufend. */
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent) 22%, var(--accent-2) 78%, transparent);
  opacity: .55; pointer-events: none;
}
.subbar { background: transparent; border-top-color: var(--rule); }

.brand-name {
  background: linear-gradient(100deg, var(--ink) 0%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.brand-version { -webkit-text-fill-color: var(--muted); }
.brand-mark { border-radius: 6px; }

.navtab { letter-spacing: .01em; transition: color .15s, background .15s; }
.navtab:hover { background: var(--accent-soft); }
.navtab.on {
  color: var(--ink);
  background: linear-gradient(180deg, transparent, var(--accent-soft));
  border-bottom-color: var(--accent);
  box-shadow: 0 8px 18px -12px var(--accent);
}
.subnav a { transition: color .15s; }
.subnav a.on, .subnav .submore.on summary {
  text-shadow: 0 0 16px var(--accent-soft);
}

.topsearch input {
  background: var(--field); border-color: var(--rule-strong);
  transition: border-color .15s, box-shadow .15s;
}
.avatar {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--rule-strong), 0 6px 16px -6px var(--accent);
}
.menu summary:hover .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--accent), 0 6px 18px -4px var(--accent); }

.menu-panel {
  background: var(--surface); border-color: var(--rule-strong);
  box-shadow: var(--shadow), 0 0 0 1px var(--rule);
  border-radius: 10px;
}
.menu-panel a:hover { background: var(--accent-soft); color: var(--ink); }

/* Darstellung waehlen: kleine Dreiergruppe im Profilmenue. */
.menu-theme {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px 6px; font-size: .78rem; color: var(--muted);
}
.menu-theme .seg {
  display: inline-flex; border: 1px solid var(--rule-strong); border-radius: 7px; overflow: hidden;
}
.menu-theme button {
  font: inherit; font-size: .76rem; padding: 3px 9px; border: 0; cursor: pointer;
  background: transparent; color: var(--ink-2);
}
.menu-theme button + button { border-left: 1px solid var(--rule-strong); }
.menu-theme button:hover { background: var(--accent-soft); color: var(--ink); }
.menu-theme button[aria-pressed="true"] {
  background: var(--accent); color: var(--accent-ink); font-weight: 700;
}

/* --------------------------------------------------------------- Flaechen */

.card, .tile, .kpi, .tw, .loginbox, .kv {
  background-image: linear-gradient(180deg, var(--sheen), transparent 55%);
}
.card, .tile, .kpi, .tw, .kv, .loginbox { border-color: var(--rule); }
.card, .tile, .kpi, .loginbox { box-shadow: var(--shadow); }

.tile, .kpi { transition: border-color .15s, box-shadow .2s, transform .2s; }
.tile:hover, a.kpi:hover {
  border-color: var(--accent); box-shadow: var(--glow); transform: translateY(-2px);
}
.tile strong { letter-spacing: -.005em; }

/* Kennzahlenkarten: schmale Leuchtkante oben, Zahl gross in Schreibmaschinenziffern,
   davor eine kleine Zustandsleuchte. Grau = keine Daten, gruen = alles gut,
   gelb = hinsehen, rot = handeln. */
.kpi { position: relative; overflow: hidden; border-top-width: 1px; }
.kpi::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--rule-strong), transparent 85%);
}
.kpi.is-ok::before   { background: linear-gradient(90deg, var(--ok), transparent 85%); }
.kpi.is-warn::before { background: linear-gradient(90deg, var(--warn), transparent 85%); }
.kpi.is-crit::before { background: linear-gradient(90deg, var(--crit), transparent 85%); }
.kpi-label::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 9px; vertical-align: 1px; border: 1.5px solid var(--muted);
}
.kpi.is-ok   .kpi-label::before { background: var(--ok);   border-color: var(--ok);   box-shadow: 0 0 10px var(--ok); }
.kpi.is-warn .kpi-label::before { background: var(--warn); border-color: var(--warn); box-shadow: 0 0 10px var(--warn); }
.kpi.is-crit .kpi-label::before { background: var(--crit); border-color: var(--crit); box-shadow: 0 0 10px var(--crit); }
.kpi-value {
  font-family: var(--mono); font-weight: 500; font-size: 2.6rem; letter-spacing: -.04em;
}
.kpi.is-ok   .kpi-value { color: var(--ok); }
.kpi.is-warn .kpi-value { text-shadow: 0 0 22px var(--warn-soft); }
.kpi.is-crit .kpi-value { text-shadow: 0 0 22px var(--crit-soft); }
.kpi.is-pending { background-image: none; }

.note { border-radius: 0 var(--radius) var(--radius) 0; }
.note-warn   { box-shadow: inset 3px 0 18px -10px var(--warn); }
.note-crit   { box-shadow: inset 3px 0 18px -10px var(--crit); }
.note-accent { box-shadow: inset 3px 0 18px -10px var(--accent); }
.msg { border-radius: var(--radius); }

/* ------------------------------------------------------------- Tabellen */

thead th { border-bottom: 1px solid var(--rule-strong); }
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--row-hover); }
td, th { border-bottom-color: var(--rule); }

/* -------------------------------------------------------------- Formulare */

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], input[type=file], select, textarea {
  background: var(--field);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.scanfield input { background: var(--field); }
.scanfield input:focus {
  box-shadow: 0 0 0 4px var(--accent-soft), 0 0 36px -8px var(--accent);
}

.btn { border-radius: 7px; transition: border-color .15s, box-shadow .2s, background .15s, transform .15s; }
.btn:hover { border-color: var(--accent); }
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent; color: var(--accent-ink);
  box-shadow: 0 6px 18px -8px var(--accent);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  filter: brightness(1.08); box-shadow: 0 8px 26px -6px var(--accent);
}
.btn-primary:active { transform: translateY(1px); }
.btn-danger:hover { box-shadow: 0 0 18px -6px var(--crit); }

/* Filterchips und Seitengroesse: Auswahl als Leuchtrahmen statt Vollflaeche —
   ruhiger bei vielen Chips nebeneinander. */
.filters a { border-radius: 999px; transition: border-color .15s, color .15s, box-shadow .15s; }
.filters a:hover { border-color: var(--accent); color: var(--ink); }
.filters a.on, .pager-groesse a.on {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
  box-shadow: 0 0 16px -6px var(--accent);
}
.pager a:hover { border-color: var(--accent); }

.pill { border: 1px solid color-mix(in srgb, currentColor 28%, transparent); }
.pill-ok, .pill-warn, .pill-crit, .pill-accent {
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}
.role-chip { border: 1px solid color-mix(in srgb, currentColor 28%, transparent); }

/* ------------------------------------------------------ Statusleiste unten */

.statusbar {
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
          backdrop-filter: blur(16px) saturate(150%);
}
.stat dd { font-family: var(--mono); font-weight: 500; }
.stat.is-warn dd { text-shadow: 0 0 14px var(--warn-soft); }

/* ----------------------------------------------------------- Anmeldeseite */

.loginbox {
  position: relative; border-radius: 14px; border-color: var(--rule-strong);
  box-shadow: var(--shadow), 0 0 60px -28px var(--accent);
}
.loginbox::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
}

/* ---------------------------------------------------------------- Bewegung */
/* Kurzes Einblenden der Seite. Nur Deckkraft und ein Hauch Versatz, 220 ms —
   genug, damit ein Seitenwechsel nicht „springt", zu wenig, um zu stoeren. */
@keyframes einblenden { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
main { animation: einblenden .22s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .tile:hover, a.kpi:hover { transform: none; }
}

/* =====================================================================
   2.9 — Bereiche: Gerüstseiten und Umsatz-Ring
   ===================================================================== */

.plan-hinweis { border: 1px dashed var(--rule); border-radius: var(--radius, 12px);
                margin-bottom: 18px; padding: 22px 20px; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
             gap: 14px; }
.plan-card { margin-bottom: 0; }
.plan-card p { margin: 6px 0 0; color: var(--ink-2); font-size: .92rem; }
.plan-card .card-head h2 { font-size: 1.02rem; }

.umsatz { margin-bottom: 22px; }
.umsatz-body { display: flex; align-items: center; justify-content: space-between;
               gap: 24px; flex-wrap: wrap; }
.umsatz-zahlen { margin: 0; display: grid; gap: 12px; flex: 1 1 260px; }
.umsatz-zahlen > div { display: flex; justify-content: space-between; align-items: baseline;
                       gap: 12px; border-bottom: 1px solid var(--rule); padding-bottom: 8px; }
.umsatz-zahlen dt { color: var(--ink-2); font-size: .9rem; }
.umsatz-zahlen dd { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em;
                    color: var(--muted); font-variant-numeric: tabular-nums; }

.donut { position: relative; margin: 0; width: 148px; height: 148px; flex: 0 0 auto; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 11; }
.donut-bahn { stroke: var(--rule); }
.donut-wert { stroke: var(--accent); stroke-linecap: round;
              /* Umfang = 2·π·48 ≈ 301,59; --anteil in Prozent */
              stroke-dasharray: calc(var(--anteil, 0) * 3.0159) 301.59;
              filter: drop-shadow(0 0 6px var(--accent)); transition: stroke-dasharray .6s ease; }
.donut figcaption { position: absolute; inset: 0; display: flex; flex-direction: column;
                    align-items: center; justify-content: center; text-align: center; }
.donut figcaption strong { font-size: 1.7rem; letter-spacing: -.02em; color: var(--muted); }
.donut figcaption span { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
                         color: var(--muted); }

@media (max-width: 640px) {
  .umsatz-body { justify-content: center; }
  .donut { width: 130px; height: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  .donut-wert { transition: none; }
}

/* Sieben Bereiche brauchen mehr Platz als drei: engere Tabs, und wo es trotzdem
   nicht reicht, scrollt die Leiste waagerecht, statt Suche und Konto
   hinauszuschieben. Auf dem Handy teilen sich die Tabs die Zeile nicht mehr zu
   gleichen Teilen (sieben Wörter in einer Zeile wären winzig), sondern stehen
   in der Breite ihres Textes und lassen sich wischen. */
.navtab { padding: 0 11px; font-size: .9rem; }
.mainnav { overflow-x: auto; scrollbar-width: none; }
.mainnav::-webkit-scrollbar { display: none; }
@media (max-width: 1240px) { .topsearch { width: 190px; min-width: 130px; } }
@media (max-width: 1100px) { .topbar-inner { gap: 14px; } .navtab { padding: 0 9px; font-size: .86rem; } }
@media (max-width: 720px) {
  .mainnav { padding: 0 12px; gap: 0; }
  .navtab { flex: 0 0 auto; padding: 11px 12px; font-size: .86rem; }
}
@media (max-width: 1400px) {
  .topbar-inner { gap: 16px; }
  .topsearch { width: 205px; min-width: 120px; }
  .navtab { padding: 0 10px; }
}

/* 3.0 — Retouren: die Suche in der Filterleiste und die Zeilen im Detail */
.filterbar .suche { margin-left: auto; display: flex; gap: 6px; }
.filterbar .suche input { width: 240px; padding: 4px 10px; font-size: .85rem; }
.rows li form { margin-left: 8px; }
@media (max-width: 720px) { .filterbar .suche { margin-left: 0; width: 100%; } .filterbar .suche input { flex: 1; width: auto; } }
.kv dd { overflow-wrap: anywhere; }

/* ---------------------------------------------------------- Zeiterfassung */

.monatsleiste { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.monatsleiste strong { min-width: 9.5em; text-align: center; }
.btn-off { opacity: .35; pointer-events: none; }
.zeittabelle tr.wochenende td { background: var(--surface-2); }
.zeittabelle .aktionen { text-align: right; }
.zeittabelle .aktionen a { margin-left: 10px; }
.zeittabelle tfoot th { background: var(--surface-2); font-size: .8rem; letter-spacing: 0; text-transform: none; color: var(--ink); }
td.aktionen { white-space: nowrap; }
.checkline + .field { margin-top: 14px; }
.planzeile { margin: 0 0 12px; color: var(--muted); font-size: .9rem; }
.planzeile a { margin-left: 10px; }
.kv dd.neg { color: var(--crit); }
.kv dd.pos { color: var(--ok); }
.tagwahl { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 4px; }
.tagwahl .checkline { font-weight: 400; }
.stempel { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: 16px; }
.stempel .stempel-text { flex: 1 1 260px; }
.stempel form { margin: 0; }
.stempel .stempel-hinweis { flex-basis: 100%; margin: 0; }
.zeittabelle tr.autopause td { font-size: .82rem; background: transparent; }

/* ------------------------------------------------------------ Nachbestellung */

.nb-gruppe { margin-bottom: 20px; }
.nb-gruppe .actions { align-items: center; gap: 14px; }
.nb-gruppe .sprachwahl { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; }
.nb-gruppe .sprachwahl select { width: auto; }
input.menge { width: 6rem; text-align: right; }
.anfragetext { width: 100%; font-family: inherit; line-height: 1.5; }
.vorschau-text { white-space: pre-wrap; margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--rule);
  border-radius: var(--radius); background: var(--surface); }
.filterbar .field { margin: 0; }
.filterbar input[type=number] { width: 7rem; }
.filterbar > .btn { align-self: flex-end; }

/* ---------------------------------------------------------------- Lieferungen */

form.inline { display: inline; margin: 0; }
.small { font-size: .82rem; }
.tw td.aktionen { text-align: right; }
.tw td.aktionen > * + * { margin-left: 10px; }

/* ---------------------------------------------------------------- Anfragen */

.vorschlag { padding: 12px 0; border-top: 1px solid var(--rule); }
.vorschlag:first-of-type { border-top: 0; padding-top: 0; }
.vorschlag h3 { margin: 0 0 6px; font-size: 1rem; }
.vorschlag p { margin: 0 0 6px; }
.vorschlag ol { margin: 6px 0 0 1.2em; padding: 0; color: var(--muted); }
.baustein { padding: 14px 0; border-top: 1px solid var(--rule); }
.baustein:first-of-type { border-top: 0; padding-top: 0; }
.baustein-kopf { margin-bottom: 8px; }
.baustein-aktiv { background: var(--surface-2); margin: 0 -12px; padding: 14px 12px; border-radius: 8px; }

/* Antwort: Formulierung wählen */
.varianten { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.varianten .btn-on { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }