/* =========================================================================
   Warenwirtschaft – Design-System
   Ein Satz Farbtokens, zwei Modi (hell / dunkel). Alle Bausteine beziehen
   sich ausschliesslich auf Tokens, damit der Moduswechsel an einer Stelle
   passiert. Diagrammfarben sind gegen beide Oberflaechen geprueft.
   ========================================================================= */

:root{
  color-scheme:light;

  /* Flaechen */
  --page:#f4f6f9;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --surface-3:#eef2f7;
  --overlay:rgba(15,23,42,.48);

  /* Schrift */
  --ink:#101623;
  --ink-2:#47506a;
  --ink-3:#6f7889;

  /* Linien */
  --line:#e6eaef;
  --line-strong:#d3dae2;
  --ring:rgba(44,97,150,.2);

  /* Akzent aus dem Firmenlogo: dessen Hellblau (#c0d0e0) ist zu hell fuer
     Schrift, deshalb ein dunklerer Ton derselben Familie fuer alles Bedienbare
     (weisser Text darauf erreicht 6,45:1) und ein mittleres Blau fuer Schmuck. */
  --accent:#2c6196;
  --accent-hover:#24527f;
  --accent-bright:#6f9bcb;
  --accent-logo:#c0d0e0;
  --accent-ink:#1e5182;
  --accent-soft:#eaf1f8;
  --on-accent:#ffffff;

  /* Status – feste Rollen, nie als Serienfarbe verwendet */
  --good:#0ca30c;   --good-soft:#e6f6e6;   --good-ink:#0a7d0a;
  --warn:#fab219;   --warn-soft:#fdf4e0;   --warn-ink:#8a5e00;
  --crit:#d03b3b;   --crit-soft:#fceaea;   --crit-ink:#b32b2b;
  --info-soft:#eaf2fd; --info-ink:#1b5fb0;

  /* Diagramm-Serien (validiert gegen #ffffff) */
  --series-1:#2a78d6;
  --series-2:#eb6834;
  --grid:#e6e9ef;
  --axis:#c3c8d2;

  /* Navigation – helle Seitenleiste */
  --nav-bg:#ffffff;
  --nav-bg-2:#ffffff;
  --nav-ink:#5a6577;
  --nav-ink-strong:#101623;
  --nav-hover:#f1f4f8;
  --nav-line:#e6eaef;
  --nav-group:#98a2b3;

  /* Form */
  --r-sm:8px; --r:11px; --r-lg:16px; --r-xl:22px;
  --sh-1:0 1px 2px rgba(16,22,35,.05);
  --sh-2:0 1px 3px rgba(16,22,35,.06), 0 8px 22px -8px rgba(16,22,35,.14);
  --sh-3:0 20px 60px -18px rgba(16,22,35,.32);
  --font:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --font-tight:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,sans-serif;
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --page:#0a0d14;
  --surface:#121722;
  --surface-2:#171d2b;
  --surface-3:#1e2534;
  --overlay:rgba(2,4,8,.66);

  --ink:#eef1f7;
  --ink-2:#aab4c8;
  --ink-3:#7b8598;

  --line:#212a3a;
  --line-strong:#2e394d;
  --ring:rgba(143,180,221,.32);

  --accent:#2c6196;
  --accent-hover:#356fa8;
  --accent-bright:#8fb4dd;
  --accent-logo:#c0d0e0;
  --accent-ink:#a7c4e4;
  --accent-soft:#14243a;
  --on-accent:#ffffff;

  --good:#0ca30c;   --good-soft:#0e2a12;   --good-ink:#4cc94c;
  --warn:#fab219;   --warn-soft:#2e2410;   --warn-ink:#e8ae3c;
  --crit:#d03b3b;   --crit-soft:#2e1414;   --crit-ink:#ef7676;
  --info-soft:#14243c; --info-ink:#8ab8f0;

  --series-1:#3987e5;
  --series-2:#d95926;
  --grid:#222b3b;
  --axis:#39445a;

  --nav-bg:#0d1119;
  --nav-bg-2:#0d1119;
  --nav-ink:#98a3b6;
  --nav-ink-strong:#ffffff;
  --nav-hover:#171f2c;
  --nav-line:#1e2635;
  --nav-group:#5b6779;

  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 1px 3px rgba(0,0,0,.5), 0 10px 26px -10px rgba(0,0,0,.7);
  --sh-3:0 24px 70px -20px rgba(0,0,0,.8);
}

/* Systemeinstellung, solange nichts manuell gewaehlt wurde */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    color-scheme:dark;
    --page:#0a0d14; --surface:#121722; --surface-2:#171d2b; --surface-3:#1e2534;
    --overlay:rgba(2,4,8,.66);
    --ink:#eef1f7; --ink-2:#aab4c8; --ink-3:#7b8598;
    --line:#212a3a; --line-strong:#2e394d; --ring:rgba(143,180,221,.32);
    --accent:#2c6196; --accent-hover:#356fa8; --accent-bright:#8fb4dd;
    --accent-logo:#c0d0e0; --accent-ink:#a7c4e4; --accent-soft:#14243a;
    --good-soft:#0e2a12; --good-ink:#4cc94c;
    --warn-soft:#2e2410; --warn-ink:#e8ae3c;
    --crit-soft:#2e1414; --crit-ink:#ef7676;
    --info-soft:#14243c; --info-ink:#8ab8f0;
    --series-1:#3987e5; --series-2:#d95926; --grid:#222b3b; --axis:#39445a;
    --nav-bg:#0d1119; --nav-bg-2:#0d1119; --nav-ink:#98a3b6; --nav-ink-strong:#ffffff;
    --nav-hover:#171f2c; --nav-line:#1e2635; --nav-group:#5b6779;
    --sh-1:0 1px 2px rgba(0,0,0,.4);
    --sh-2:0 1px 3px rgba(0,0,0,.5), 0 10px 26px -10px rgba(0,0,0,.7);
    --sh-3:0 24px 70px -20px rgba(0,0,0,.8);
  }
}

/* ---------- Grundlagen ---------- */
*{box-sizing:border-box}
/* hidden muss staerker sein als jede eigene display-Angabe. Sonst bleibt ein
   Knopf mit display:inline-flex trotz hidden sichtbar – das ist beim
   Ausblenden von Schaltflaechen schon passiert. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;font-family:var(--font);font-size:15px;line-height:1.5;
  color:var(--ink);background:var(--page);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0;font-family:var(--font-tight);font-weight:650;letter-spacing:-.015em;line-height:1.25}
a{color:var(--accent);text-decoration:none}
input,select,textarea,button{font-family:inherit;font-size:inherit;color:inherit}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px;border:3px solid var(--page)}
::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}

/* ---------- Layout ---------- */
.app{display:flex;min-height:100vh}

.sidebar{
  /* z-index ueber der Kopfleiste (20): der Schalter ragt ueber die Kante
     hinaus und wuerde sonst halb verdeckt. */
  position:relative;z-index:25;
  width:252px;flex:0 0 252px;
  background:var(--nav-bg);
  color:var(--nav-ink);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
  border-right:1px solid var(--nav-line);
}
.brand{display:flex;align-items:center;gap:11px;padding:20px 18px 22px;color:var(--nav-ink-strong)}
.brand-mark{
  width:34px;height:34px;flex:0 0 34px;border-radius:10px;
  background:linear-gradient(140deg,var(--accent-bright),var(--accent));
  display:flex;align-items:center;justify-content:center;font-size:17px;
  box-shadow:0 4px 12px -4px var(--accent-bright);
}
.brand-text{font-family:var(--font-tight);font-weight:700;font-size:16px;letter-spacing:-.015em;color:var(--nav-ink-strong)}

/* Firmenlogo in der Seitenleiste */
.brand-logo{max-width:170px;max-height:38px;width:auto;height:auto;display:block}
/* Auf dunklem Grund einfarbig weiß – die schwarze Wortmarke ginge sonst unter. */
:root[data-theme="dark"] .brand-logo{filter:brightness(0) invert(1);opacity:.95}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]) .brand-logo{filter:brightness(0) invert(1);opacity:.95}
}

/* Angelegt wird über das „+" oben rechts – die Seitenleiste bleibt reine Navigation. */

.nav{flex:1;overflow-y:auto;padding:0 10px 10px}
/* Fest am unteren Rand: Einstellungen sind immer erreichbar. */
.nav-foot{flex:0 0 auto;overflow:visible;border-top:1px solid var(--nav-line);padding-top:8px}
/* Gruppenkopf ist anklickbar: ein Klick klappt den Bereich zu oder auf.
   Der Pfeil zeigt nach unten, solange die Gruppe offen ist. */
.nav-group{
  display:flex;align-items:center;gap:6px;
  margin:16px 0 5px;padding:5px 12px;font-size:10.5px;text-transform:uppercase;
  letter-spacing:.09em;color:var(--nav-group);font-weight:700;
  cursor:pointer;border-radius:7px;user-select:none;transition:background .13s,color .13s;
}
.nav-group:hover{background:var(--nav-hover);color:var(--nav-ink)}
.nav-group:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.nav-group-pfeil{
  display:flex;flex:0 0 auto;transform:rotate(90deg);
  transition:transform .16s ease;opacity:.75;
}
.nav-group.zu .nav-group-pfeil{transform:rotate(0deg)}
.nav-gruppe[hidden]{display:none}
.nav-item{
  display:flex;align-items:center;gap:11px;position:relative;
  padding:10px 12px;margin:1px 0;border-radius:9px;
  cursor:pointer;color:var(--nav-ink);font-size:14.5px;
  transition:background .13s,color .13s;
}
.nav-item:hover{background:var(--nav-hover);color:var(--nav-ink-strong)}
/* Aktiv: heller Grünton mit Markierung am linken Rand – wie im Vorbild. */
.nav-item.active{
  background:var(--accent-soft);color:var(--accent-ink);font-weight:650;
}
.nav-item.active::before{
  content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;
  border-radius:0 3px 3px 0;background:var(--accent-bright);
}
.nav-item .ico{width:20px;flex:0 0 20px;display:flex;align-items:center;justify-content:center;color:var(--ink-3)}
.nav-item:hover .ico{color:var(--ink-2)}
.nav-item.active .ico{color:var(--accent)}

/* Symbole übernehmen immer die Textfarbe ihres Umfelds. */
.ic{flex:0 0 auto;vertical-align:-3px}
.btn .ic,.icon-btn .ic,.chip .ic{margin-right:-1px}
.logout-link{display:flex;align-items:center;gap:8px}
.nav-item .count{
  margin-left:auto;font-size:11.5px;font-variant-numeric:tabular-nums;
  background:var(--surface-3);color:var(--ink-3);padding:1px 8px;border-radius:99px;
}
.nav-item.active .count{background:color-mix(in srgb,var(--accent-bright) 26%,transparent);color:var(--accent-ink)}

.sidebar-foot{padding:8px 14px;border-top:1px solid var(--nav-line);font-size:12px;color:var(--ink-3);line-height:1.5}
.sidebar-foot[hidden]{display:none}
.logout-link{cursor:pointer;color:var(--ink-3);font-size:13px;padding:6px 0}
.logout-link:hover{color:var(--accent)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px 26px;background:color-mix(in srgb,var(--surface) 86%,transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;
}
/* Titel und Anlegen-Knopf stehen zusammen links, die Werkzeuge rechts. */
.topbar h1{font-size:20.5px;flex:0 0 auto;min-width:0}
.topbar-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;flex:1;min-width:0}
/* Rechts stehen die allgemeinen Werkzeuge: Anlegen, Einstellungen, Profil. */
.topbar-tools{display:flex;gap:8px;align-items:center;flex:0 0 auto}

.avatar-btn{
  width:38px;height:38px;flex:0 0 38px;border-radius:50%;
  border:1px solid var(--line-strong);background:var(--accent-soft);
  color:var(--accent-ink);font-weight:700;font-size:13px;letter-spacing:.02em;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  transition:.13s;font-family:var(--font-tight);
}
.avatar-btn:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent-bright) 24%,var(--surface))}
.avatar-btn.gross{width:42px;height:42px;flex:0 0 42px;font-size:15px;cursor:default}

.profil-kopf{display:flex;align-items:center;gap:12px;padding:10px 12px 14px;border-bottom:1px solid var(--line);margin-bottom:4px}
.profil-haken{margin-left:auto;display:flex;align-items:center;color:var(--accent)}
.content{padding:22px 26px 60px;max-width:1480px;width:100%}

/* ---------- Buttons ---------- */
/* min-height und vertical-align gehoeren zusammen: ein Knopf mit nur einem
   Symbol ist sonst zwei Pixel niedriger als einer mit Text (16 px Symbol
   gegen 18 px Zeilenhoehe), und ueber die Grundlinie ausgerichtet stehen
   beide zusaetzlich versetzt. Nebeneinander in einer Tabellenzeile faellt
   das sofort auf. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 15px;min-height:38px;vertical-align:middle;
  border-radius:var(--r);border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink);cursor:pointer;font-weight:550;font-size:14.5px;
  transition:background .13s,border-color .13s,box-shadow .13s,transform .06s;
  white-space:nowrap;box-shadow:var(--sh-1);
}
.btn:hover{background:var(--surface-2);border-color:var(--ink-3)}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:var(--accent);border-color:transparent;color:var(--on-accent);
  box-shadow:0 1px 2px rgba(16,22,35,.12),0 8px 20px -10px var(--accent);
}
.btn-primary:hover{background:var(--accent-hover);border-color:transparent}
.btn-danger{color:var(--crit-ink);border-color:color-mix(in srgb,var(--crit) 35%,transparent)}
.btn-danger:hover{background:var(--crit-soft)}
.btn-ghost{border-color:transparent;background:transparent;box-shadow:none}
.btn-ghost:hover{background:var(--surface-3)}
.btn-sm{padding:6px 11px;min-height:32px;font-size:13.5px;border-radius:var(--r-sm)}
.btn:disabled{opacity:.5;cursor:not-allowed}

.icon-btn{
  width:38px;height:38px;padding:0;border-radius:10px;flex:0 0 38px;
  display:inline-flex;align-items:center;justify-content:center;font-size:16px;
  border:1px solid var(--line-strong);background:var(--surface);cursor:pointer;
}
.icon-btn:hover{background:var(--surface-2)}

/* ---------- Karten & Raster ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);overflow:hidden;
}
.card-head{padding:15px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.card-head h2{font-size:15.5px;flex:1;min-width:140px}
.card-body{padding:20px}
.grid{display:grid;gap:16px}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}

/* ---------- Kennzahlen ---------- */
.kpi{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:17px 19px;box-shadow:var(--sh-2);position:relative;overflow:hidden;
}
.kpi::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--line-strong);
}
.kpi.accent::before{background:var(--accent)}
.kpi.good::before{background:var(--good)}
.kpi.warn::before{background:var(--warn)}
.kpi.crit::before{background:var(--crit)}
.kpi .label{font-size:11.5px;color:var(--ink-3);font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.kpi .value{font-family:var(--font-tight);font-size:26px;font-weight:700;margin-top:7px;letter-spacing:-.025em}
.kpi.accent .value{color:var(--accent-ink)}
.kpi.good .value{color:var(--good-ink)}
.kpi.crit .value{color:var(--crit-ink)}
.kpi .hint{font-size:12.5px;color:var(--ink-3);margin-top:4px}
.kpi .delta{font-size:12.5px;font-weight:650;margin-top:4px;display:inline-flex;align-items:center;gap:4px}
.kpi .delta.up{color:var(--good-ink)}
.kpi .delta.down{color:var(--crit-ink)}

/* ---------- Tabellen ---------- */
.table-wrap{overflow-x:auto}
table.data{width:100%;border-collapse:collapse;font-size:14.5px}
table.data th{
  text-align:left;padding:15px 18px;font-size:13.5px;
  color:var(--ink-2);border-bottom:1px solid var(--line);
  background:var(--surface);white-space:nowrap;font-weight:650;
}
table.data td{padding:15px 18px;border-bottom:1px solid var(--line);vertical-align:middle}
table.data tbody tr{cursor:pointer;transition:background .1s}
table.data tbody tr:hover{background:var(--surface-2)}
table.data tbody tr:last-child td{border-bottom:none}

/* Listenkarte mit dezent grünem Rahmen – wie im Vorbild. */
.card-list{
  border-color:color-mix(in srgb,var(--accent-bright) 34%,var(--line));
  border-radius:var(--r-lg);
}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.nowrap{white-space:nowrap}
.strong{font-weight:650}
.muted{color:var(--ink-3)}
.small{font-size:13px}
.mono{font-variant-numeric:tabular-nums}

/* ---------- Badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;
  font-size:12.5px;font-weight:650;white-space:nowrap;line-height:1.5;
}
.badge.grey{background:var(--surface-3);color:var(--ink-2)}
.badge.blue{background:var(--info-soft);color:var(--info-ink)}
.badge.green{background:var(--good-soft);color:var(--good-ink)}
.badge.amber{background:var(--warn-soft);color:var(--warn-ink)}
.badge.red{background:var(--crit-soft);color:var(--crit-ink)}

/* ---------- Formulare ---------- */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.field label{font-size:13px;font-weight:600;color:var(--ink-2)}
.field .help,.help{font-size:12.5px;color:var(--ink-3);font-weight:400}
.input,select.input,textarea.input{
  width:100%;padding:9px 11px;border:1px solid var(--line-strong);border-radius:var(--r);
  background:var(--surface);color:var(--ink);
  transition:border-color .13s,box-shadow .13s;
}
.input::placeholder{color:var(--ink-3)}
.input:focus,select.input:focus,textarea.input:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3.5px var(--ring);
}
.input:disabled{background:var(--surface-3);color:var(--ink-3)}
textarea.input{resize:vertical;min-height:80px;line-height:1.55}
/* Beschriftung und Eingabefeld sollen ueber die ganze Zeile auf einer
   Linie liegen – auch wenn ein Hinweistext umbricht und die Beschriftung
   dadurch zweizeilig wird. Mit `subgrid` teilen sich alle Felder einer
   Zeile dieselben beiden Spuren: eine fuer die Beschriftungen, eine fuer
   die Eingaben. Die hoechste Beschriftung gibt die Hoehe vor.

   Browser ohne subgrid (aeltere Staende) fallen auf das bisherige
   Verhalten zurueck; dort steht es wie vorher untereinander. */
.form-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:0 16px;align-items:start;
}
@supports (grid-template-rows: subgrid) {
  .form-grid{grid-auto-rows:auto}
  .form-grid > .field{
    display:grid;grid-template-rows:subgrid;grid-row:span 2;gap:5px;
  }
  /* Felder mit zusaetzlichem Inhalt (etwa ein Knopf daneben) bleiben
     ausgenommen – sie brauchen mehr als die zwei Spuren. */
  .form-grid > .field:has(> :nth-child(3)){grid-row:auto;display:flex}
}
.form-grid .full{grid-column:1/-1}
.checkline{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:14.5px;cursor:pointer}
.checkline input{width:17px;height:17px;accent-color:var(--accent);cursor:pointer;flex:0 0 17px}
.fieldset-title{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-3);margin:6px 0 13px;padding-bottom:8px;border-bottom:1px solid var(--line);
}

/* ---------- Suche / Werkzeugleiste ---------- */
/* Alle Filter sitzen in einer gerahmten Leiste statt lose im Raum. */
.toolbar{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:10px 12px;box-shadow:var(--sh-1);
}
.search{position:relative;flex:1;min-width:220px;max-width:430px}
.search input{
  width:100%;padding:9px 12px;border:1px solid var(--line-strong);
  border-radius:var(--r);background:var(--surface);color:var(--ink);
}
.search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3.5px var(--ring)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;border-radius:99px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink-2);cursor:pointer;font-size:13.5px;font-weight:550;
  transition:.13s;
}
.chip:hover{background:var(--surface-2);color:var(--ink)}
.chip.active{background:var(--accent);border-color:transparent;color:var(--on-accent)}

/* Farbpunkt und Anzahl am Reiter: man sieht ohne Klick, wo etwas liegt. */
.chip-punkt{width:8px;height:8px;border-radius:50%;flex:none;background:var(--ink-3)}
.chip-punkt.blue{background:var(--series-1)}
.chip-punkt.amber{background:var(--warn)}
.chip-punkt.green{background:var(--good)}
.chip-punkt.red{background:var(--crit)}
.chip-punkt.grey{background:var(--line-strong)}
.chip-zahl{
  min-width:20px;padding:1px 6px;border-radius:99px;
  background:var(--surface-3);color:var(--ink-2);
  font-size:11.5px;font-weight:700;text-align:center;
}
.chip.active .chip-zahl{background:rgba(255,255,255,.24);color:var(--on-accent)}
.chip.active .chip-punkt{background:var(--on-accent)}
/* Die Reiter stehen bei den Bestellungen dauerhaft oben – sie sind dort
   die Arbeitsliste, kein Filter, den man erst aufklappt. */
/* Erfolgskopf im Ergebnisfenster – der Moment, in dem alles fertig ist,
   darf auch so aussehen. */
.erfolg-kopf{
  display:flex;align-items:center;gap:14px;
  padding:15px 18px;border-radius:14px;
  background:var(--good-soft);border:1px solid color-mix(in srgb,var(--good) 28%,transparent);
  color:var(--good-ink);
}
.erfolg-haken{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:42px;height:42px;border-radius:50%;background:var(--good);color:#fff;
}
.erfolg-kopf .muted{color:var(--good-ink);opacity:.8}

.chips-oben{
  display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
.chip.leer{opacity:.55}
.chip.leer.active{opacity:1}

/* ---------- Mehrfachauswahl in Listen ---------- */
th.spalte-wahl,td.spalte-wahl{width:1%;padding-left:14px;padding-right:2px}
.spalte-wahl input[type="checkbox"]{
  width:16px;height:16px;cursor:pointer;accent-color:var(--accent);margin:0;display:block;
}
tr.gewaehlt td{background:var(--accent-soft)}

.auswahl-leiste{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;
  padding:9px 13px;border-radius:var(--r-lg);
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  color:var(--accent-ink);font-size:13.5px;
}
.auswahl-zahl{
  min-width:24px;height:24px;padding:0 7px;border-radius:99px;
  background:var(--accent);color:var(--on-accent);font-weight:700;font-size:12.5px;
  display:inline-flex;align-items:center;justify-content:center;
}
/* Nicht den Hauptknopf mit uebermalen – der war sonst weiss auf weiss. */
.auswahl-leiste .btn:not(.btn-primary){background:var(--surface)}

@media (max-width:820px){
  th.spalte-wahl,td.spalte-wahl{padding-left:10px}
  .auswahl-leiste{font-size:13px}
}

/* ---------- Bilder und Dokumente am Artikel ---------- */
.ablage{
  border:1.5px dashed var(--line-strong);border-radius:var(--r-lg);
  padding:13px;margin-bottom:16px;transition:.13s;
}
.ablage.bereit{border-color:var(--accent);background:var(--accent-soft)}

.medien{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.medium{
  position:relative;margin:0;width:96px;border:1px solid var(--line);
  border-radius:10px;overflow:hidden;background:var(--surface-2);
}
.medium.haupt{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.medium img{display:block;width:100%;height:78px;object-fit:contain;background:#fff}
.medium figcaption{
  font-size:10.5px;font-weight:650;text-align:center;padding:3px 0;
  background:var(--accent-soft);color:var(--accent-ink);
}
.medium-tun{position:absolute;top:3px;right:3px;display:flex;gap:2px}
.medium-tun button{
  width:21px;height:21px;border:none;border-radius:5px;cursor:pointer;
  background:rgba(255,255,255,.9);color:var(--ink-2);
  display:flex;align-items:center;justify-content:center;
}
.medium-tun button:hover{background:#fff;color:var(--accent)}
.medium-tun button.gefahr:hover{background:var(--crit-soft);color:var(--crit-ink)}

.medien-liste{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.medien-zeile{
  display:flex;align-items:center;gap:9px;padding:7px 10px;
  border:1px solid var(--line);border-radius:9px;background:var(--surface);font-size:13.5px;
}
.medien-zeile a{color:var(--accent-ink);text-decoration:none;word-break:break-all}
.medien-zeile a:hover{text-decoration:underline}
.medien-sym{color:var(--ink-3);display:flex}

/* Vorschaubild in Listen */
td.bild-zelle{width:1%;padding-right:4px}
.listen-bild{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:8px;object-fit:contain;
  background:#fff;border:1px solid var(--line);
}
.listen-bild.leer{background:var(--surface-2);color:var(--ink-3)}

@media (max-width:820px){
  td.bild-zelle{display:none}
}

/* ---------- Aktivitätsverlauf ---------- */
.verlauf{list-style:none;margin:0;padding:0}
.verlauf-zeile{
  display:flex;gap:11px;align-items:flex-start;padding:10px 0;
  border-bottom:1px solid var(--line);font-size:13.5px;line-height:1.5;
}
.verlauf-zeile:last-child{border-bottom:none}
.verlauf-avatar{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;
}
.verlauf-text{flex:1;min-width:0;color:var(--ink-2);word-break:break-word}
.verlauf-text b{color:var(--ink)}
.verlauf-text .badge{margin:0 5px}
.verlauf-zeit{flex:0 0 auto;white-space:nowrap;padding-top:2px}

@media (max-width:600px){
  .verlauf-zeit{display:none}
}

/* ---------- Markenzeichen der Schnittstellen ---------- */
.marke{margin-bottom:9px;line-height:0}
.marke svg{display:block}

/* Die Logos liegen als Originaldateien in public/img. Jede Datei hat einen
   anderen Rand, deshalb bekommt jede ihren eigenen Kasten. */
.marke-bild{overflow:hidden}
.marke-bild img{display:block;width:100%;height:100%}

/* Amazon und eBay: durchsichtiger Hintergrund, wenig Rand – einpassen genügt. */
.marke-amazon{width:132px;height:44px}
.marke-amazon img{object-fit:contain;object-position:left center}
.marke-ebay{width:104px;height:42px}
.marke-ebay img{object-fit:contain;object-position:left center}

/* Der schwarze Amazon-Schriftzug ginge auf dunklem Grund unter: dort wird das
   Bild aufgehellt. Der orange Pfeil bleibt dabei erkennbar. */
:root[data-theme="dark"] .marke-amazon img{filter:invert(1) hue-rotate(180deg)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]) .marke-amazon img{filter:invert(1) hue-rotate(180deg)}
}

/* DHL: die Datei hat rundum viel gelben Rand – der Kasten schneidet ihn weg,
   sodass nur der Schriftzug mit den Tempolinien stehen bleibt. */
.marke-dhl{width:176px;height:48px;border-radius:6px}
.marke-dhl img{object-fit:cover;object-position:center}
/* Markenkacheln in der Navigation behalten ihre Farben, auch wenn der
   Eintrag ausgewählt ist – sonst wären sie nicht wiederzuerkennen. */
.nav-item .ico-marke,
.nav-item:hover .ico-marke,
.nav-item.active .ico-marke{color:inherit}
/* Die Markenkacheln sind Rechtecke. Damit die Beschriftungen trotzdem alle
   auf derselben Linie stehen, bekommt jeder Eintrag denselben Platz fuer sein
   Zeichen; die Strichsymbole sitzen darin links. */
.nav-item .ico{width:34px;flex:0 0 34px;justify-content:flex-start}
.nav-item .ico-marke{width:34px;flex:0 0 34px}

/* Kleine Kachel mit dem Originallogo: weißes Feld, Logo hineingepasst.
   Der weiße Grund ist nötig, weil Amazon und eBay durchsichtig sind und
   ihre dunklen Buchstaben sonst im dunklen Modus verschwinden würden. */
.marke-kachel{
  width:34px;height:22px;flex:0 0 34px;border-radius:4px;background:#fff;
  border:1px solid rgba(0,0,0,.09);display:flex;align-items:center;
  justify-content:center;overflow:hidden;padding:1px 2px;
}
.marke-kachel img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
/* DHL bringt sein Gelb selbst mit und darf die Kachel randlos ausfuellen. */
.kachel-dhl{padding:0;border-color:transparent;background:#FFCC00}
.kachel-dhl img{width:100%;height:auto}
/* Im dunklen Modus wuerde der schwarze Amazon-Schriftzug verschwinden. */
[data-theme="dark"] .marke svg text[fill="#232F3E"]{fill:#e8edf5}

/* Zurueckgenommene Journalzeilen bleiben lesbar, treten aber zurueck. */
tr.muted-row td{opacity:.55}

/* ---------- Kompakte Werkzeugleiste ---------- */
/* Filter, Suche, Export und Spalten stehen als schmale Knopfreihe rechts über
   der Liste. Suche und Filter klappen erst bei Bedarf darunter auf, damit die
   Liste selbst so viel Platz wie möglich behält. */
.werkzeuge{margin-bottom:14px}
.werkzeug-knoepfe{display:flex;gap:7px;align-items:center;justify-content:flex-end}
.werkzeug-knoepfe .btn{display:inline-flex;align-items:center;gap:7px}
.werkzeug-knoepfe .btn.aktiv{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
.werkzeug-knoepfe .icon-btn.aktiv{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
.filter-zahl{
  min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--accent);
  color:var(--on-accent);font-size:11.5px;font-weight:700;display:inline-flex;
  align-items:center;justify-content:center;
}
.filter-zahl[hidden]{display:none}
.werkzeug-suche,.werkzeug-filter{
  margin-top:9px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:11px 13px;box-shadow:var(--sh-1);
}
.werkzeug-suche[hidden],.werkzeug-filter[hidden]{display:none}
.werkzeug-suche .search{max-width:none}
.filter-block{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.filter-block + .filter-block{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.filter-titel{font-size:12px;font-weight:650;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;min-width:74px}

/* ---------- Sortierbare Spaltenköpfe ---------- */
th.sortierbar{cursor:pointer;user-select:none;white-space:nowrap}
th.sortierbar .sortpfeil{margin-left:5px;font-size:10px;opacity:.35}
th.sortierbar:hover{color:var(--ink)}
th.sortierbar:hover .sortpfeil{opacity:.7}
th.sortierbar.aktiv{color:var(--accent-ink)}
th.sortierbar.aktiv .sortpfeil{opacity:1;color:var(--accent)}

/* ---------- Zeilenaktionen ---------- */
/* Stehen wie in der Vorlage vorne in der Zeile und treten erst beim
   Überfahren deutlich hervor. */
th.spalte-tun,td.spalte-tun{width:1%;white-space:nowrap;padding-right:4px}
.zeilen-tun{display:flex;gap:2px;align-items:center}
.zeilen-tun button{
  display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border:none;background:none;border-radius:6px;color:var(--ink-3);cursor:pointer;
  opacity:.55;transition:.13s;
}
tr:hover .zeilen-tun button{opacity:1}
.zeilen-tun button:hover{background:var(--surface-2);color:var(--accent)}
.zeilen-tun button.gefahr:hover{background:var(--danger-soft,#fdecec);color:var(--danger,#c0392b)}
.zeilen-tun button[disabled]{opacity:.2;cursor:not-allowed}
.zeilen-tun button[disabled]:hover{background:none;color:var(--ink-3)}

@media (max-width:820px){
  .werkzeug-knoepfe{justify-content:flex-start;flex-wrap:wrap}
  .filter-titel{min-width:0;width:100%}
  th.spalte-tun,td.spalte-tun{display:none}
}

/* ---------- Leerzustand ---------- */
.empty{text-align:center;padding:54px 20px;color:var(--ink-3)}
.empty .ico{display:flex;justify-content:center;margin-bottom:14px;color:var(--ink-3);opacity:.6}
.empty h3{color:var(--ink);margin-bottom:6px;font-size:16.5px}
.empty p{margin:0 0 18px}

/* ---------- Positionen-Editor ---------- */
table.items{width:100%;border-collapse:collapse;font-size:14px}
table.items th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);text-align:left;padding:6px;font-weight:700}
table.items td{padding:4px;vertical-align:top}
table.items input,table.items select,table.items textarea{
  width:100%;padding:7px 8px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);
}
table.items input:focus,table.items select:focus,table.items textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 2.5px var(--ring);
}
table.items textarea{resize:vertical;min-height:34px;font-size:13px}
.item-sum{padding:9px 6px !important;text-align:right;font-variant-numeric:tabular-nums;font-weight:650;white-space:nowrap}
.drag-handle{cursor:grab;color:var(--ink-3);padding:9px 2px;text-align:center;user-select:none;font-size:12px}
.totals{margin-left:auto;width:330px;max-width:100%}
.totals .line{display:flex;justify-content:space-between;padding:6px 0;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.totals .line.total{
  border-top:2px solid var(--ink);margin-top:6px;padding-top:10px;
  font-size:18px;font-weight:700;color:var(--ink);
}

/* ---------- Dialog ---------- */
/* Der Dialog ist eine feste Spalte: Kopf und Fußleiste stehen still,
   gescrollt wird ausschliesslich der Inhalt dazwischen. */
.modal-backdrop{
  position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(3px);
  display:flex;align-items:flex-start;justify-content:center;padding:34px 18px;
  z-index:100;overflow:hidden;animation:fade .14s ease-out;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--sh-3);width:100%;max-width:730px;animation:pop .18s cubic-bezier(.2,.9,.3,1);
  display:flex;flex-direction:column;max-height:calc(100vh - 68px);overflow:hidden;
}
.modal.wide{max-width:1100px}
.modal.narrow{max-width:470px}
@keyframes pop{from{opacity:0;transform:translateY(-12px) scale(.985)}to{opacity:1;transform:none}}
.modal-head{
  flex:0 0 auto;
  padding:17px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;
  background:var(--surface);border-radius:var(--r-xl) var(--r-xl) 0 0;z-index:2;
}
.modal-head h2{font-size:16.5px;flex:1;min-width:0}
.modal-body{flex:1 1 auto;overflow-y:auto;padding:22px}
.modal-foot{
  flex:0 0 auto;
  padding:15px 22px;border-top:1px solid var(--line);display:flex;gap:9px;align-items:center;
  background:var(--surface);border-radius:0 0 var(--r-xl) var(--r-xl);
}
.close-x{border:none;background:transparent;font-size:22px;line-height:1;cursor:pointer;color:var(--ink-3);padding:2px 7px;border-radius:8px}
.close-x:hover{background:var(--surface-3);color:var(--ink)}

/* ---------- Reiter ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto}
.tab{
  padding:10px 15px;cursor:pointer;border-bottom:2.5px solid transparent;
  color:var(--ink-3);font-weight:600;white-space:nowrap;font-size:14.5px;transition:color .13s;
}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- Hinweise ---------- */
.toast-root{position:fixed;bottom:22px;right:22px;display:flex;flex-direction:column;gap:9px;z-index:200}
.toast{
  background:#0f1626;color:#fff;padding:12px 18px;border-radius:12px;
  box-shadow:var(--sh-3);font-size:14.5px;animation:slide .22s ease-out;max-width:400px;
}
.toast.ok{background:var(--good)}
.toast.err{background:var(--crit)}
@keyframes slide{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}

.hint-box,.warn-box,.crit-box{border-radius:12px;padding:13px 15px;font-size:13.5px;line-height:1.6}
.hint-box{background:var(--info-soft);border:1px solid color-mix(in srgb,var(--accent) 26%,transparent);color:var(--info-ink)}
.warn-box{background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 32%,transparent);color:var(--warn-ink)}
.crit-box{background:var(--crit-soft);border:1px solid color-mix(in srgb,var(--crit) 32%,transparent);color:var(--crit-ink)}

/* ---------- Schreibschutz in den Einstellungen ----------
   Stammdaten stehen normalerweise nur da. Erst der Stift macht sie
   aenderbar – das verhindert das versehentliche Ueberschreiben einer
   Steuernummer oder IBAN beim Durchscrollen. */
.sperrleiste{
  display:flex;align-items:center;gap:11px;margin:0 0 16px;padding:10px 14px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface-2);
  font-size:13.5px;color:var(--ink-2);
}
.sperrleiste svg{flex:none;color:var(--ink-3)}
.sperrleiste b{color:var(--ink)}
.sperrleiste.offen{
  background:var(--info-soft);color:var(--info-ink);
  border-color:color-mix(in srgb,var(--accent) 26%,transparent);
}
.sperrleiste.offen svg{color:var(--accent-ink)}

/* Nicht bedienbare Flaechen, die kein Formularfeld sind und sich daher
   nicht ueber disabled sperren lassen. */
[data-gesperrt] .dropzone,
[data-gesperrt] .tpl-card,
[data-gesperrt] .checkline{opacity:.62}
[data-gesperrt] .dropzone,
[data-gesperrt] .tpl-card{pointer-events:none}
[data-gesperrt] .dropzone{border-style:solid}

/* ---------- Beleg im Fenster ansehen ----------
   Der angehaengte Beleg steht direkt im Dialog, damit man die erfassten
   Zahlen gegen das Original prueft, ohne die Datei herunterzuladen. */
/* Dokumentenwahl: ein Knopf, der eine Liste aufklappt. Bei einer Einfuhr
   haengen schnell sieben Papiere am Beleg – als Reiterreihe waeren die Namen
   abgeschnitten, gestapelt waere der Dialog unbedienbar. */
/* Kopfleiste im Bestellfenster: das Wichtigste auf einen Blick, bevor das
   Formular kommt – Kanal, Nummer, Kunde, Betrag, Stand. */
.best-kopf{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;
  padding:14px 18px;margin-bottom:14px;
  border:1px solid var(--line);border-radius:14px;background:var(--surface-2);
}
.best-kanal{display:flex;align-items:center}
.best-block{display:flex;flex-direction:column;gap:2px;min-width:0}
.best-label{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);font-weight:700}
.best-wert{font-size:15.5px;font-weight:650;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.best-klein{font-size:12px;color:var(--ink-3)}
.best-marken{display:flex;gap:6px;flex-wrap:wrap;margin-top:1px}

/* Kundendaten und Versanddetails als eigene Karten, jede mit eigenem Stift.
   Eine falsche Anschrift korrigiert man, ohne die ganze Bestellung
   aufzuschliessen. */
.karten-stapel{display:flex;flex-direction:column;gap:10px;margin:16px 0}
.daten-karte{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.daten-karte.offen{border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
.karte-kopf{
  display:flex;align-items:center;gap:10px;padding:5px 12px 5px 6px;
  border-bottom:1px solid var(--line);background:var(--surface-2);
}
.daten-karte.zu .karte-kopf{border-bottom:0}

/* Der ganze Kopf ist der Schalter zum Auf- und Zuklappen. */
.karte-schalter{
  display:flex;align-items:center;gap:10px;flex:1;min-width:0;
  padding:8px;border:0;border-radius:9px;background:none;color:inherit;
  font:inherit;text-align:left;cursor:pointer;
}
.karte-schalter:hover{background:var(--surface-3)}
.karte-schalter svg{flex:none;color:var(--ink-3);transition:transform .15s}
.karte-schalter[aria-expanded="false"] svg{transform:rotate(-90deg)}
.karte-titel{font-size:14.5px;font-weight:650;flex:none}
.karte-zusammenfassung{
  font-size:12.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.karte-schalter[aria-expanded="true"] .karte-zusammenfassung{display:none}
.karte-inhalt{padding:14px}
.karte-inhalt .form-grid{margin:0}

/* Zustellart als Reiter – die Packstation soll man sehen, nicht in einer
   Klappliste suchen müssen. */
.feld-titel{
  display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px;
}
.art-reiter{display:flex;gap:6px;flex-wrap:wrap}
.art-knopf{
  display:inline-flex;align-items:center;gap:7px;flex:1 1 auto;justify-content:center;
  padding:9px 13px;border:1px solid var(--line-strong);border-radius:10px;
  background:var(--surface);color:var(--ink-2);font:inherit;font-size:13.5px;font-weight:600;
  cursor:pointer;white-space:nowrap;transition:background .13s,border-color .13s,color .13s;
}
.art-knopf:hover:not(:disabled){background:var(--surface-2);color:var(--ink)}
.art-knopf.aktiv{background:var(--accent);border-color:transparent;color:var(--on-accent)}
.art-knopf.aktiv svg{color:var(--on-accent)}
.art-knopf svg{flex:none;color:var(--ink-3)}
.art-knopf:disabled{opacity:.55;cursor:not-allowed}

/* Adressprüfung nach den Regeln von DHL. */
.adr-pruef{margin-top:12px;border-radius:11px;padding:11px 13px;font-size:13px;border:1px solid}
.adr-pruef.gut{background:var(--good-soft);border-color:color-mix(in srgb,var(--good) 30%,transparent);color:var(--good-ink)}
.adr-pruef.schlecht{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 34%,transparent);color:var(--warn-ink)}
.adr-kopf{display:flex;align-items:center;gap:8px}
.adr-kopf svg{flex:none}
.adr-liste{margin:8px 0 0;padding-left:20px;line-height:1.65}
.adr-liste.fehler{font-weight:550}
.adr-vorschau{
  margin-top:11px;padding:10px 12px;border-radius:9px;
  background:var(--surface);color:var(--ink);line-height:1.5;
}
.adr-titel{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-3);font-weight:700;margin-bottom:5px}

/* Phasen einer Bestellung: eingegangen → Rechnung → Lieferschein →
   Versandlabel → versendet. Man sieht auf einen Blick, was noch fehlt. */
.phasen{
  display:flex;flex-wrap:wrap;gap:4px 0;align-items:stretch;
  margin-bottom:14px;padding:4px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);
}
.phase{
  display:flex;align-items:center;gap:9px;flex:1 1 150px;min-width:0;
  padding:9px 12px;border-radius:9px;position:relative;
}
.phase + .phase::before{
  content:'';position:absolute;left:-1px;top:22%;bottom:22%;width:1px;background:var(--line);
}
.phase-punkt{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:22px;height:22px;border-radius:50%;
  border:1.5px solid var(--line-strong);background:var(--surface-2);color:var(--on-accent);
}
.phase.fertig .phase-punkt{background:var(--good);border-color:transparent}
.phase-text{display:flex;flex-direction:column;min-width:0}
.phase-label{font-size:13px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.phase.fertig .phase-label{color:var(--ink)}
.phase-info{font-size:11.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phase.offen .phase-info{color:var(--warn-ink)}

/* Dieselben Phasen als Kuerzel in der Liste. */
/* In einer Zeile bleiben – umgebrochen wuerde jede Tabellenzeile
   viermal so hoch. Die Tabelle scrollt bei Bedarf seitlich. */
.phasen-kurz{display:inline-flex;gap:4px;flex-wrap:nowrap}
.pk{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  padding:3px 9px;border-radius:7px;
  border:1px solid var(--line-strong);background:var(--surface-2);
  font-size:11.5px;font-weight:600;color:var(--ink-3);white-space:nowrap;
}
.pk svg{flex:none}
th.spalte-phasen,td.spalte-phasen{min-width:125px}

/* Dichtere Liste: bei Bestellungen zaehlt der Ueberblick ueber viele
   Zeilen mehr als grosszuegige Abstaende. */
.table-wrap.kompakt table.data th,
.table-wrap.kompakt table.data td{padding:9px 10px;font-size:13px}
/* Lange Firmennamen duerfen die Tabelle nicht breittreten – der volle Name
   steht in der Bestellung, hier zaehlt die gleichmaessige Breite. */
.table-wrap.kompakt td.spalte-kunde{max-width:190px}
.table-wrap.kompakt td.spalte-kunde > *,
.table-wrap.kompakt td.spalte-kunde{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.table-wrap.kompakt table.data td.strong{font-size:13.5px}
.table-wrap.kompakt .small{font-size:11.5px}
.table-wrap.kompakt .badge{padding:2px 8px;font-size:11.5px}

/* In der Liste steht nur der erreichte Stand, nicht alle vier Stufen. */
.phasen-stand{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:99px;border:1px solid var(--line-strong);
  background:var(--surface-2);font-size:12px;font-weight:600;color:var(--ink-2);white-space:nowrap;
}
.ps-punkt{width:8px;height:8px;border-radius:50%;flex:none;background:var(--ink-3)}
.phasen-stand.neu{background:var(--info-soft);border-color:transparent;color:var(--info-ink)}
.phasen-stand.neu .ps-punkt{background:var(--series-1)}
.phasen-stand.laeuft{background:var(--warn-soft);border-color:transparent;color:var(--warn-ink)}
.phasen-stand.laeuft .ps-punkt{background:var(--warn)}
.phasen-stand.bereit{background:var(--accent-soft);border-color:transparent;color:var(--accent-ink)}
.phasen-stand.bereit .ps-punkt{background:var(--accent)}
.phasen-stand.fertig{background:var(--good-soft);border-color:transparent;color:var(--good-ink)}
.phasen-stand.fertig .ps-punkt{background:var(--good)}
.phasen-stand.aus{opacity:.6}
.ps-naechste{font-weight:500;opacity:.75;font-size:11.5px}
.pk.fertig{background:var(--good-soft);border-color:transparent;color:var(--good-ink)}
.phasen-legende{
  display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:12px;color:var(--ink-3);
}
.phasen-legende .pk{width:19px;height:19px;font-size:10.5px}

/* Gesperrte Bestellung: Felder sind ueber disabled schon grau, die
   Positionstabelle braucht noch einen Hinweis, dass hier nichts geht. */
.best-gesperrt .drag-handle{cursor:default}
.best-gesperrt .icon-btn{opacity:.45}

/* Vorgangsleiste im Belegfenster: Angebot › Auftrag › Lieferschein ›
   Rechnung. Zeigt, was es schon gibt, und fuehrt zum naechsten Schritt. */
.vorgang{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  padding:9px 12px;margin-bottom:16px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface-2);
}
.vorgang-titel{
  font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-3);font-weight:700;margin-right:4px;
}
.vorgang-schritt{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:99px;font-size:12.5px;
  border:1px solid transparent;background:var(--surface-3);color:var(--ink-3);white-space:nowrap;
}
.vorgang-schritt b{font-weight:650}
.vorgang-schritt svg{flex:none}
.vorgang-schritt.fertig{background:var(--good-soft);color:var(--good-ink);cursor:pointer}
.vorgang-schritt.fertig:hover{background:color-mix(in srgb,var(--good) 22%,var(--surface))}
.vorgang-schritt.hier{background:var(--accent);color:var(--on-accent);font-weight:600}
.vorgang-schritt.offen{border-style:dashed;border-color:var(--line-strong);background:transparent}
.vorgang-pfeil{color:var(--ink-3);font-size:14px}

/* Der Aufkleber im Bestellfenster braucht Luft nach unten, sonst klebt
   das naechste Feld daran. */
#b-labelbox:not(:empty){margin-bottom:6px}

/* Verlauf einer Bestellung: was wann passiert ist. */
.verlauf-liste{
  border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);
  max-height:230px;overflow-y:auto;
}
.verlauf-liste > p{padding:12px 14px}
.verlauf-zeile{
  display:flex;align-items:baseline;gap:12px;
  padding:8px 14px;border-bottom:1px solid var(--line);font-size:13px;
}
.verlauf-zeile:last-child{border-bottom:0}
.verlauf-zeit{flex:none;width:112px;color:var(--ink-3);font-size:12px;font-variant-numeric:tabular-nums}
.verlauf-text{flex:1;min-width:0}
.verlauf-wer{flex:none;color:var(--ink-3);font-size:12px}

/* Sendungsnummer in der Liste: Paketsymbol davor, damit man sieht,
   dass der Klick zur Verfolgung fuehrt. */
.sendung-link{display:inline-flex;align-items:center;gap:5px}
.sendung-link svg{flex:none;color:var(--good)}

/* Beleg-Knopf mit Auge daneben: erstellen und gleich ansehen. */
.beleg-paar{display:inline-flex;gap:0}
.beleg-paar .btn:first-child{border-top-right-radius:0;border-bottom-right-radius:0}
.beleg-paar .btn:last-child:not(:first-child){
  border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px;padding-left:11px;padding-right:11px;
}

/* Aktionsmenü in Dialogfüßen. Neun Schaltflächen nebeneinander findet
   niemand wieder – draußen bleibt der Alltag, der Rest klappt auf. */
.menue-wahl{position:relative}
.menue-liste{
  position:absolute;z-index:20;bottom:calc(100% + 7px);left:0;min-width:238px;padding:6px;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:13px;
  box-shadow:0 18px 46px -18px rgba(16,22,35,.45),0 2px 8px rgba(16,22,35,.10);
}
.menue-liste button{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 11px;border:0;border-radius:9px;background:none;color:var(--ink);
  font:inherit;font-size:13.5px;font-weight:550;text-align:left;cursor:pointer;
}
.menue-liste button:hover{background:var(--surface-2)}
.menue-liste button svg{flex:none;color:var(--ink-3)}
.menue-liste button.gefahr{color:var(--crit-ink)}
.menue-liste button.gefahr:hover{background:var(--crit-soft)}
.menue-liste button.gefahr svg{color:var(--crit-ink)}
.menue-linie{height:1px;background:var(--line);margin:5px 8px}

.dok-wahl{position:relative;margin-bottom:12px}
.dok-knopf{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 14px;border:1px solid var(--line-strong);border-radius:var(--r);
  background:var(--surface);color:var(--ink);font:inherit;font-weight:600;
  cursor:pointer;box-shadow:var(--sh-1);transition:background .13s,border-color .13s;
}
.dok-knopf:hover{background:var(--surface-2);border-color:var(--ink-3)}
.dok-knopf svg{flex:none;color:var(--ink-3)}
.dok-knopf[aria-expanded="true"]{border-color:var(--accent);box-shadow:0 0 0 3.5px var(--ring)}
.dok-knopf svg:last-of-type{transition:transform .15s}
.dok-knopf[aria-expanded="true"] svg:last-of-type{transform:rotate(180deg)}
.dok-zahl{
  display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;
  padding:0 7px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);
  font-size:12.5px;font-weight:700;
}

.dok-liste{
  position:absolute;z-index:5;top:calc(100% + 6px);left:0;min-width:min(460px,100%);max-width:100%;
  max-height:340px;overflow-y:auto;padding:6px;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;
  box-shadow:0 18px 46px -18px rgba(16,22,35,.42),0 2px 8px rgba(16,22,35,.10);
}
.dok-zeile{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 11px;border:0;border-radius:9px;background:none;color:var(--ink);
  font:inherit;font-size:13.5px;text-align:left;cursor:pointer;
}
.dok-zeile:hover{background:var(--surface-2)}
.dok-zeile.aktiv{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.dok-zeile svg{flex:none;color:var(--ink-3)}
.dok-zeile.aktiv svg{color:var(--accent-ink)}
.dok-zeile-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dok-marke{
  flex:none;padding:2px 8px;border-radius:999px;background:var(--good-soft);color:var(--good-ink);
  font-size:11.5px;font-weight:700;letter-spacing:.02em;
}

.beleg-schau{
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--surface-2);margin-bottom:12px;
}
.beleg-kopf{
  display:flex;align-items:center;gap:9px;padding:8px 10px 8px 13px;
  border-bottom:1px solid var(--line);background:var(--surface);font-size:13.5px;
}
.beleg-kopf svg{flex:none;color:var(--ink-3)}
.beleg-name{
  font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.beleg-rahmen{
  display:block;width:100%;height:min(62vh,620px);border:0;background:var(--surface-3);
}
.beleg-bild{overflow:auto;height:auto;max-height:min(62vh,620px);text-align:center;padding:10px}
/* Der Adressaufkleber ist DIN A6 quer – ein hoher Rahmen waere leere Flaeche. */
.beleg-rahmen.beleg-label{height:330px;background:var(--surface)}
.beleg-bild img{max-width:100%;border-radius:8px}

/* Beleg links, Summen rechts. Der Platz neben dem Summenblock stand vorher
   leer – dort gehoert das Original hin, weil man beim Pruefen zwischen
   beidem hin und her schaut. */
.einkauf-unten{
  display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:22px;
  align-items:start;margin-top:18px;
}
.einkauf-unten .totals{margin-top:26px}

@media (max-width:900px){
  .einkauf-unten{grid-template-columns:1fr}
  .einkauf-unten .totals{margin-top:0}
}
@media (max-width:760px){
  .beleg-rahmen{height:58vh}
}

/* ---------- Sonstiges ---------- */
.dropzone{
  border:2px dashed var(--line-strong);border-radius:14px;padding:26px;text-align:center;
  cursor:pointer;color:var(--ink-3);background:var(--surface-2);transition:.13s;
}
.dropzone:hover,.dropzone.over{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.preview-img{max-width:100%;border:1px solid var(--line);border-radius:10px;background:#fff}
.timeline{border-left:2px solid var(--line);padding-left:18px;margin-left:6px}
.timeline-item{position:relative;padding-bottom:18px}
.timeline-item::before{content:"";position:absolute;left:-25px;top:5px;width:11px;height:11px;border-radius:50%;background:var(--accent);border:2px solid var(--surface)}
.print-root{display:none}
.hide-lg{display:none}

/* ---------- Anmeldung ----------
   Zweigeteilt: links die Marke, rechts das Formular. Auf schmalen Schirmen
   wird aus der Markenspalte ein flacher Kopf, damit das Formular ohne
   Scrollen erreichbar bleibt. Bewusst grosszuegig – das ist das erste, was
   man vom System sieht. */
body.login-mode{overflow:hidden}
.login-screen{
  position:fixed;inset:0;z-index:500;overflow:auto;
  background:
    radial-gradient(1000px 680px at 10% -10%, color-mix(in srgb,var(--accent) 46%,transparent), transparent 62%),
    radial-gradient(820px 560px at 92% 112%, color-mix(in srgb,#7c3aed 34%,transparent), transparent 60%),
    linear-gradient(158deg,#080e1c,#101a2e 52%,#182338);
  display:flex;align-items:center;justify-content:center;padding:32px;
}
.login-huelle{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  width:100%;max-width:1060px;border-radius:26px;overflow:hidden;
  background:var(--surface);
  box-shadow:0 60px 120px -34px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08);
  animation:pop .26s ease-out;
}

/* --- Markenspalte --- */
.login-marke{
  position:relative;display:flex;flex-direction:column;gap:34px;
  padding:52px 46px;color:#eef2f8;min-height:560px;
  background:linear-gradient(157deg,#14264c,#0e1a30 56%,#182a52);
}
.login-marke::after{
  /* feines Raster, damit die Flaeche nicht tot wirkt */
  content:'';position:absolute;inset:0;opacity:.15;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(520px 400px at 18% 0%,#000,transparent 74%);
}
.marke-kopf{display:flex;align-items:center;gap:15px;position:relative;z-index:1}
.marke-zeichen{
  width:66px;height:66px;border-radius:19px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--accent),#7c3aed);
  color:#fff;font-weight:700;font-size:24px;letter-spacing:.02em;
  box-shadow:0 16px 34px -12px rgba(0,0,0,.85);
}
.marke-zeichen.mit-bild{background:#fff;padding:9px}
/* Breite Wortmarke: laeuft in die Breite statt ins Quadrat, damit der
   Schriftzug lesbar bleibt. Die helle Platte braucht es trotzdem – die
   meisten Logos sind fuer weissen Grund gezeichnet. */
.marke-zeichen.wortmarke{
  width:auto;max-width:290px;height:auto;padding:14px 20px;border-radius:16px;
}
.marke-bild{max-width:100%;max-height:100%;object-fit:contain;display:block}
.marke-zeichen.wortmarke .marke-bild{max-height:46px;width:auto}
.marke-name{font-size:20px;font-weight:700;letter-spacing:.01em}

.marke-mitte{position:relative;z-index:1;margin-top:auto}
.marke-mitte h2{
  font-size:40px;line-height:1.12;margin:0 0 14px;color:#fff;
  letter-spacing:-.025em;font-weight:750;
}
.marke-mitte p{margin:0;font-size:15.5px;line-height:1.7;opacity:.75;max-width:38ch;text-wrap:pretty}

.marke-punkte{list-style:none;margin:0;padding:0;display:grid;gap:14px;position:relative;z-index:1}
.marke-punkte li{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;opacity:.88;line-height:1.5}
.marke-punkte svg{
  flex:none;margin-top:1px;width:19px;height:19px;
  color:color-mix(in srgb,var(--accent) 55%,#fff);
}

/* --- Formularspalte --- */
.login-form{display:flex;align-items:center;justify-content:center;padding:52px 46px;background:var(--surface)}
.login-inhalt{width:100%;max-width:372px}
.login-inhalt h1{font-size:30px;margin:0 0 9px;letter-spacing:-.022em;line-height:1.15}
.login-unter{color:var(--ink-3);font-size:14.5px;line-height:1.55;margin:0 0 30px}
.login-inhalt .field > label{font-size:14px}

/* Eingabefeld mit Symbol davor */
.eingabe-zeile{position:relative;display:flex;align-items:center}
.eingabe-zeile > svg{position:absolute;left:14px;color:var(--ink-3);pointer-events:none}
.eingabe-zeile .input{padding:13px 14px 13px 44px;width:100%;font-size:15px;border-radius:12px}
.eingabe-zeile:focus-within > svg{color:var(--accent)}
.pw-auge{
  position:absolute;right:7px;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:none;background:none;border-radius:9px;
  color:var(--ink-3);cursor:pointer;
}
.pw-auge:hover{background:var(--surface-2);color:var(--ink-2)}
.pw-auge.aktiv{color:var(--accent)}

.login-merken{margin:0;font-size:14px}
/* Merken-Haken links, „Passwort vergessen" rechts – beides auf einer Linie. */
.login-zeile{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin:20px 0 4px;
}
.login-link{
  border:none;background:none;padding:0;cursor:pointer;
  color:var(--accent);font:inherit;font-size:13.5px;text-decoration:underline;
  text-underline-offset:3px;
}
.login-link:hover{color:var(--accent-ink,var(--accent));text-decoration-thickness:2px}
/* Rueckmeldung in Gruen, wenn etwas geklappt hat – dieselbe Box wie fuer
   Fehler, nur andere Farbe. */
.login-error.gut{
  background:var(--good-soft);color:var(--good-ink);
  border-color:color-mix(in srgb,var(--good) 34%,transparent);
}
.btn-block{
  width:100%;justify-content:center;padding:15px;font-size:16.5px;
  margin-top:14px;border-radius:12px;font-weight:650;
  box-shadow:0 16px 30px -14px color-mix(in srgb,var(--accent) 80%,transparent);
}
.login-error{
  background:var(--crit-soft);color:var(--crit-ink);border:1px solid color-mix(in srgb,var(--crit) 32%,transparent);
  border-radius:11px;padding:11px 14px;font-size:14px;margin:16px 0 0;
}
.login-fuss{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin:26px 0 0;font-size:12.5px;color:var(--ink-3);
}

@media (max-width:900px){
  .login-screen{padding:0;align-items:stretch}
  .login-huelle{
    grid-template-columns:minmax(0,1fr);
    /* Der Markenkopf nimmt nur so viel Hoehe wie sein Inhalt, das Formular
       den Rest. Ohne diese Angabe teilen sich beide Zeilen die Hoehe und
       oben klafft eine leere dunkle Flaeche. */
    grid-template-rows:auto 1fr;
    max-width:none;border-radius:0;box-shadow:none;min-height:100%;
  }
  .login-marke{padding:30px 24px 26px;gap:0;min-height:0}
  .marke-mitte,.marke-punkte{display:none}
  .marke-zeichen.wortmarke{max-width:230px;padding:12px 16px}
  .marke-zeichen.wortmarke .marke-bild{max-height:38px}
  .login-form{padding:34px 24px 44px;align-items:flex-start}
  .login-inhalt{max-width:430px;margin:0 auto}
  .login-inhalt h1{font-size:27px}
}

/* ---------- Menü-Schublade (Handy) ---------- */
.burger{display:none}
.drawer-backdrop{display:none;position:fixed;inset:0;background:var(--overlay);z-index:39}
.fab{display:none}

@media (max-width:980px){
  .burger{
    display:inline-flex;align-items:center;justify-content:center;
    width:42px;height:42px;flex:0 0 42px;border-radius:11px;font-size:19px;
    border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer;
  }
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;z-index:40;width:274px;flex:0 0 274px;
    transform:translateX(-100%);transition:transform .22s cubic-bezier(.3,.9,.3,1);
    box-shadow:8px 0 34px rgba(0,0,0,.35);
  }
  body.drawer-open .sidebar{transform:none}
  body.drawer-open .drawer-backdrop{display:block}
  body.drawer-open{overflow:hidden}

  .topbar{padding:11px 14px;gap:10px}
  .topbar h1{font-size:18px;flex:1 1 auto;min-width:0;order:2}
  .burger{order:1}
  .topbar-actions{order:4;flex-basis:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}
  .topbar-actions::-webkit-scrollbar{display:none}
  .topbar-tools{order:3}
  .topbar-tools .btn{padding:9px 12px}
  .content{padding:15px 14px 96px}

  .fab{
    display:flex;align-items:center;justify-content:center;
    position:fixed;right:17px;bottom:17px;z-index:38;
    width:58px;height:58px;border-radius:50%;border:none;
    background:var(--accent);color:#fff;font-size:27px;cursor:pointer;
    box-shadow:0 10px 28px -6px var(--accent);
  }
  .fab:active{transform:scale(.94)}

  .modal-backdrop{padding:0;align-items:stretch}
  .modal,.modal.wide,.modal.narrow,.modal.editor{
    max-width:none;border-radius:0;border:none;
    height:100vh;height:100dvh;max-height:none;
  }
  .modal-head,.modal-foot{border-radius:0}
  .modal-body{flex:1;padding:18px 15px}
  .modal-head{padding:14px 15px}
  .modal-foot{padding:11px 15px;flex-wrap:wrap;gap:8px}
  .modal-foot .btn{flex:1 1 auto}
  .modal-foot .spacer{display:none}

  .hide-sm{display:none !important}
  .hide-lg{display:block}
  table.data th,table.data td{padding:11px 10px}
  .totals{width:100%}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .grid-3,.grid-2{grid-template-columns:minmax(0,1fr)}
  .kpi{padding:14px}
  .kpi .value{font-size:20px}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .search{max-width:none}
  .card-body{padding:16px}
  .preview-shell{padding:8px}
  .preview-shell .sheet{zoom:.46}

  .input,select.input,textarea.input,.search input{font-size:16px;padding:11px 12px}
  .btn{padding:11px 15px}
  .btn-sm{padding:8px 12px}
  .nav-item{padding:12px}
}

@media (max-width:620px){
  .preview-shell .sheet{zoom:.37}
  table.data th,table.data td{padding:10px 8px}
  .badge{padding:3px 8px;font-size:11.5px}
  .chips{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}
  .chip{flex:0 0 auto}
}

/* Positionen als Karten (Handy) */
@media (max-width:800px){
  table.items,table.items thead,table.items tbody,table.items tr,table.items td{display:block;width:100%}
  table.items thead{display:none}
  table.items tr{
    border:1px solid var(--line);border-radius:13px;padding:10px 12px 6px;
    margin-bottom:12px;background:var(--surface-2);position:relative;
  }
  table.items td{padding:0 0 10px;display:flex;align-items:center;gap:10px}
  table.items td::before{
    content:attr(data-label);flex:0 0 92px;font-size:11.5px;font-weight:700;
    color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;
  }
  table.items td:not([data-label])::before{content:none}
  table.items td[data-label="Artikel"]{display:block}
  table.items td[data-label="Artikel"]::before{display:block;margin-bottom:5px;flex:none}
  table.items td[data-label="Artikel"] input{margin-bottom:6px}
  table.items .drag-handle{position:absolute;right:44px;top:9px;padding:0;font-size:11.5px;font-weight:700}
  table.items .item-sum{justify-content:space-between;border-top:1px solid var(--line);padding-top:9px;font-size:16px}
  table.items td[data-del-cell]{position:absolute;right:8px;top:4px;padding:0;width:auto}
  table.items td[data-del-cell]::before{content:none}
  table.items input,table.items select,table.items textarea{padding:9px 10px;font-size:16px}
}

/* ---------- Beleg-Editor mit Live-Vorschau ---------- */
.modal.editor{max-width:1460px}
.editor-split{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:22px;align-items:start}
.editor-form{min-width:0}
.editor-preview{
  position:sticky;top:0;border:1px solid var(--line);border-radius:14px;
  background:var(--surface-2);overflow:hidden;
}
.editor-preview-head{
  display:flex;align-items:center;gap:8px;padding:9px 12px;
  border-bottom:1px solid var(--line);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);
}
.editor-preview-head span{flex:1}
.editor-preview-body{
  max-height:calc(100vh - 250px);overflow:auto;padding:14px;
  display:flex;justify-content:center;background:#5b6472;
}
.editor-preview-body .sheet{
  zoom:.42;box-shadow:0 6px 22px rgba(0,0,0,.35);flex:0 0 auto;
}

@media (max-width:1280px){
  .editor-split{grid-template-columns:minmax(0,1fr)}
  .editor-preview{display:none}
}

/* Summenzeile über der Liste */
.listen-summe{
  display:flex;gap:22px;flex-wrap:wrap;align-items:center;
  padding:0 4px 12px;font-size:13.5px;color:var(--ink-2);
}
.listen-summe b{color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- Zeitraum und Spaltenauswahl ---------- */
.zeitraum{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.zeitraum select.input{width:auto;min-width:165px}
.zeitraum-frei{display:flex;align-items:center;gap:7px}
/* Ohne diese Regel gewinnt display:flex gegen das hidden-Attribut. */
.zeitraum-frei[hidden]{display:none}
.zeitraum-frei input{width:150px}

.spalten-wahl{position:relative}
.spalten-menue{
  position:absolute;right:0;top:calc(100% + 7px);z-index:60;
  background:var(--surface);border:1px solid var(--line);border-radius:13px;
  box-shadow:var(--sh-3);min-width:250px;padding:8px;
}
.spalten-kopf{
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-3);padding:6px 10px 8px;
}
.spalten-zeile{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
  cursor:pointer;font-size:14px;
}
.spalten-zeile:hover{background:var(--surface-2)}
.spalten-zeile input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.spalten-zeile.fest{opacity:.55;cursor:default}
.spalten-fuss{display:flex;gap:6px;padding:9px 10px 4px;border-top:1px solid var(--line);margin-top:5px}
.spalten-fuss .btn{flex:1;justify-content:center}

@media (max-width:980px){
  .zeitraum{width:100%}
  .zeitraum select.input{flex:1}
  .zeitraum-frei{width:100%}
  .zeitraum-frei input{flex:1;width:auto}
  .spalten-menue{right:auto;left:0}
}

/* ---------- Zahlung buchen ---------- */
.btn-pay{
  background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 32%,transparent);
  color:var(--accent-ink);font-weight:650;
}
.btn-pay:hover{background:color-mix(in srgb,var(--accent-bright) 22%,var(--surface));border-color:var(--accent)}

.pay-summary{
  display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;
}
.pay-summary > div{flex:1;min-width:130px;display:flex;flex-direction:column;gap:3px}
.pay-summary .label{font-size:12px;color:var(--ink-3);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.pay-summary .wert{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.pay-summary .offen .wert{color:var(--accent-ink)}

/* ---------- Festgeschriebener Beleg ---------- */
.locked-head{
  display:flex;gap:14px;align-items:flex-start;margin-bottom:20px;
  background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 32%,transparent);
  border-radius:12px;padding:13px 15px;
}
.locked-badge{
  flex:0 0 auto;font-weight:700;font-size:13px;color:var(--warn-ink);
  white-space:nowrap;padding-top:1px;
}
.locked-text{font-size:13.5px;line-height:1.6;color:var(--warn-ink)}
.locked-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:26px;align-items:start}
.locked-data td{padding:7px 0;border-bottom:1px solid var(--line)}
.locked-data td:first-child{width:42%}
.locked-data tr{cursor:default}
.locked-pdf{
  width:100%;height:min(72vh,780px);border:1px solid var(--line);
  border-radius:12px;background:#fff;
}
.locked-render{max-height:min(72vh,780px);overflow:auto;border-radius:12px}
.locked-render .sheet{zoom:.5}
@media (max-width:1100px){
  .locked-grid{grid-template-columns:minmax(0,1fr)}
  .locked-pdf{height:60vh}
}

/* ---------- Vorlagenauswahl ---------- */
.tpl-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.tpl-card{
  border:2px solid var(--line);border-radius:14px;padding:12px;cursor:pointer;
  background:var(--surface);transition:border-color .13s,box-shadow .13s,transform .1s;
}
.tpl-card:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.tpl-card.active{border-color:var(--accent);box-shadow:0 0 0 3.5px var(--ring)}
.tpl-name{font-weight:650;margin-top:10px;font-size:14.5px}
.tpl-hint{font-size:12.5px;color:var(--ink-3);margin-top:3px;line-height:1.45}

/* Miniaturansicht der Vorlage, rein aus CSS gezeichnet */
.tpl-thumb{
  height:112px;border-radius:9px;background:#fff;border:1px solid var(--line);
  position:relative;overflow:hidden;
}
.tpl-thumb::before,.tpl-thumb::after{content:"";position:absolute;background:#c9cfd8}
.tpl-thumb-klassisch::before{left:11px;top:13px;width:38%;height:5px}
.tpl-thumb-klassisch::after{right:11px;top:13px;width:30%;height:26px;background:#e4e8ee}
.tpl-thumb-klassisch .x{display:none}
.tpl-thumb-modern::before{left:11px;top:11px;width:34%;height:13px;background:#2a78d6;border-radius:3px}
.tpl-thumb-modern::after{right:11px;top:13px;width:30%;height:26px;background:#e4e8ee}
.tpl-thumb i{position:absolute;left:11px;right:11px;background:#eceef2;display:block}
.tpl-thumb i:nth-of-type(1){top:52px;height:8px;background:#d6dae1}
.tpl-thumb i:nth-of-type(2){top:64px;height:6px}
.tpl-thumb i:nth-of-type(3){top:74px;height:6px}
.tpl-thumb i:nth-of-type(4){top:84px;height:6px}
.tpl-thumb-modern i:nth-of-type(3){background:#f4f5f7}
.tpl-thumb i:nth-of-type(5){top:96px;height:7px;left:auto;width:44%;background:#d6dae1}

/* ---------- E-Mail-Versand ---------- */
.mail-signatur,.mail-text{
  margin:0;padding:11px 13px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:10px;font-family:var(--font);font-size:13.5px;line-height:1.6;
  white-space:pre-wrap;color:var(--ink-2);
}
.mail-verlauf{display:flex;flex-direction:column;gap:14px}
.mail-eintrag{border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:var(--surface)}
.mail-kopf{display:flex;flex-direction:column;gap:3px;margin-bottom:9px}
.mail-eintrag .mail-text{max-height:180px;overflow:auto}

/* ---------- Anlegen-Menü ---------- */
.create-wrap{position:relative;flex:0 0 auto}
.create-menu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:70;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--sh-3);min-width:262px;padding:8px;
}
.create-gruppe{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-3);padding:10px 12px 6px;
}
.create-gruppe:first-child{padding-top:4px}
.create-eintrag{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:9px 12px;border:none;border-radius:9px;background:transparent;
  color:var(--ink);font-size:14.5px;text-align:left;cursor:pointer;
}
.create-eintrag:hover{background:var(--accent-soft);color:var(--accent-ink)}
.create-eintrag .ic{color:var(--ink-3);flex:0 0 auto}
.create-eintrag:hover .ic{color:var(--accent)}

@media (max-width:980px){
  .create-wrap{order:3}
  .create-menu{right:-4px;min-width:250px}
}


/* Artikelzeile im Lager: Bild und Name nebeneinander. */
.artikel-zelle{display:flex;align-items:center;gap:9px}
.artikel-zelle .listen-bild{flex:0 0 auto;width:32px;height:32px}

/* Artikelnamen aus dem Marktplatzhandel sind oft mehrere Zeilen lang. Sie
   werden nach zwei Zeilen abgeschnitten, damit die Tabelle ruhig bleibt –
   der vollstaendige Name steht im Tooltip und im Artikel selbst. */
.artikel-name{display:block;min-width:0;max-width:34ch}
.artikel-name > span{display:block}
.artikel-name .kurz{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.35;
}
.artikel-name .small.kurz{-webkit-line-clamp:1;font-weight:400}
td .artikel-name{font-weight:inherit}

/* ---------- Postfach ---------- */
/* Drei Spalten: Ordner, Nachrichtenliste, Lesebereich. Auf schmalen Geräten
   untereinander, damit auf dem Handy nichts abgeschnitten wird. */
.postfach{
  display:grid;grid-template-columns:190px minmax(280px,340px) 1fr;gap:14px;
  align-items:start;
}
.postfach-ordner{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:8px;box-shadow:var(--sh-1);position:sticky;top:0;
}
.ordner-eintrag{
  display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;
  cursor:pointer;font-size:14px;color:var(--ink-2);
}
.ordner-eintrag:hover{background:var(--surface-2);color:var(--ink)}
.ordner-eintrag.aktiv{background:var(--accent-soft);color:var(--accent-ink);font-weight:650}

.postfach-liste{min-width:0}
.pf-liste{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-1);max-height:calc(100vh - 220px);overflow-y:auto;
}
.pf-eintrag{
  display:flex;gap:10px;padding:11px 13px;cursor:pointer;
  border-bottom:1px solid var(--line);align-items:flex-start;
}
.pf-eintrag:last-child{border-bottom:none}
.pf-eintrag:hover{background:var(--surface-2)}
.pf-eintrag.aktiv{background:var(--accent-soft)}
.pf-eintrag.ungelesen .pf-betreff,
.pf-eintrag.ungelesen b{color:var(--ink);font-weight:700}
.pf-eintrag.ungelesen{border-left:3px solid var(--accent);padding-left:10px}
.pf-avatar{
  flex:0 0 auto;width:32px;height:32px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;
}
.pf-avatar.gross{width:40px;height:40px;font-size:14px}
.pf-text{flex:1;min-width:0;display:block}
.pf-kopf{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.pf-kopf b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-betreff{
  display:block;color:var(--ink-2);font-size:13.5px;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.postfach-lesen{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);min-height:220px;overflow:hidden;
}
.lese-kopf{padding:16px 18px;border-bottom:1px solid var(--line)}
.lese-kopf h2{font-size:17px}
.lese-rumpf{
  padding:18px;white-space:pre-wrap;line-height:1.65;font-size:14.5px;
  max-height:calc(100vh - 340px);overflow-y:auto;word-break:break-word;
}

@media (max-width:1100px){
  .postfach{grid-template-columns:1fr}
  .postfach-ordner{position:static}
  .pf-liste{max-height:none}
}

/* ---------- Hinweis bei neuer Nachricht ---------- */
.mail-hinweise{
  position:fixed;right:18px;bottom:18px;z-index:60;
  display:flex;flex-direction:column;gap:9px;max-width:330px;
}
.mail-hinweis{
  display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  background:var(--surface);border:1px solid var(--line-strong);
  border-left:4px solid var(--accent);
  border-radius:var(--r);padding:12px 13px;box-shadow:var(--sh-3);
  animation:mailRein .28s ease-out;
}
.mail-hinweis.geht{opacity:0;transform:translateX(20px);transition:.35s}
.mail-hinweis-ico{color:var(--accent);display:flex;padding-top:1px}
.mail-hinweis-text{flex:1;min-width:0;font-size:13.5px;line-height:1.45}
.mail-hinweis-text .von{color:var(--ink-2)}
.mail-hinweis-text .betreff{
  color:var(--ink-3);display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
}
.mail-hinweis-zu{
  border:none;background:none;color:var(--ink-3);cursor:pointer;
  font-size:17px;line-height:1;padding:0 2px;
}
.mail-hinweis-zu:hover{color:var(--ink)}
@keyframes mailRein{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}

@media (max-width:600px){
  .mail-hinweise{left:12px;right:12px;bottom:12px;max-width:none}
}

/* HTML-Mail im abgeschotteten Rahmen. Der Rahmen bekommt die Höhe seines
   Inhalts, damit nicht zwei Bildlaufleisten übereinanderliegen. */
.lese-html{
  width:100%;border:none;display:block;background:#fff;
  min-height:160px;
}
.bilder-leiste{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0;padding:10px 18px;font-size:13px;line-height:1.45;
  background:var(--warn-soft);color:var(--warn-ink);
  border-bottom:1px solid var(--line);
}
.bilder-leiste[hidden]{display:none}
.bilder-leiste span{flex:1;min-width:180px}
.bilder-leiste .btn{background:var(--surface)}

/* ---------- Seitenleiste als schmale Symbolspalte ---------- */
/* Zusammengeklappt bleibt jede Seite erreichbar: nur die Beschriftungen
   verschwinden, die Symbole stehen alle noch da. Der Name steht im Tooltip. */

/* Der Schalter sitzt auf der Kante der Leiste – dort, wo sie sich bewegt.
   Kein eigener Streifen am Fuß mehr: der wirkte angeklebt und kostete Platz.
   Im Ruhezustand zurückhaltend, beim Überfahren der Leiste tritt er hervor. */
.rail-schalter{
  /* Ueber der Kopfleiste (die liegt auf 20), sonst waere die rechte Haelfte
     des Knopfes verdeckt. */
  position:absolute;top:26px;right:-13px;z-index:30;
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;padding:0;
  border:1px solid var(--line-strong);border-radius:50%;
  background:var(--surface);color:var(--ink-3);cursor:pointer;
  box-shadow:var(--sh-1);opacity:.5;
  transition:opacity .15s,background .15s,color .15s,box-shadow .15s;
}
.sidebar:hover .rail-schalter{opacity:1}
.rail-schalter:hover{
  background:var(--accent);border-color:var(--accent);color:var(--on-accent);
  box-shadow:var(--sh-2);opacity:1;
}
.rail-schalter:focus-visible{opacity:1}

/* Im Normalzustand ist das kompakte Zeichen ausgeblendet. */
.brand-kurz{display:none}

.sidebar.schmal{width:68px;flex:0 0 68px}
.sidebar.schmal .brand{justify-content:center;padding:18px 0 16px}
.sidebar.schmal .brand-logo,
.sidebar.schmal .brand-text,
.sidebar.schmal .brand-mark:not(.brand-kurz){display:none}
.sidebar.schmal .brand-kurz{display:flex}

.sidebar.schmal .nav{padding:0 8px 8px}
/* Gruppenüberschriften weichen einer dünnen Trennlinie. */
.sidebar.schmal .nav-group{
  height:1px;padding:0;margin:9px 8px;overflow:hidden;
  background:var(--nav-line);border-radius:0;cursor:default;
}
.sidebar.schmal .nav-group > *{display:none}
/* Zugeklappte Gruppen werden hier wieder gezeigt – sonst fehlten Symbole,
   ohne dass man den Grund sähe. */
.sidebar.schmal .nav-gruppe[hidden]{display:block}

.sidebar.schmal .nav-item{justify-content:center;padding:11px 0;gap:0}
.sidebar.schmal .nav-item > span:not(.ico){display:none}
.sidebar.schmal .nav-item .ico{width:auto;flex:0 0 auto;justify-content:center}
.sidebar.schmal .nav-item .count{display:none}

/* Auch im Schmalmodus bleibt der Schalter auf der Kante sitzen. */
.sidebar.schmal .sidebar-foot{padding:6px;text-align:center}
/* Firmenzeile ganz ausblenden – sie wuerde in 68 px nur umbrechen.
   Der Abmelden-Knopf bleibt als Symbol stehen. */
.sidebar.schmal .company-mini{font-size:0;line-height:0}
.sidebar.schmal .logout-link{justify-content:center;font-size:12px;line-height:1.5;margin:0}
.sidebar.schmal .logout-link span{display:none}

/* Auf dem Handy öffnet die Leiste weiterhin als Schublade in voller Breite –
   eine Symbolspalte wäre dort nur unnötig fummelig. */
@media (max-width:900px){
  .rail-schalter{display:none}
  .sidebar.schmal{width:auto;flex:none}
  .sidebar.schmal .brand-logo,
  .sidebar.schmal .brand-text,
  .sidebar.schmal .nav-item > span:not(.ico),
  .sidebar.schmal .nav-item .count{display:initial}
  .sidebar.schmal .brand-kurz{display:none}
  .sidebar.schmal .nav-item{justify-content:flex-start;padding:12px;gap:11px}
  .sidebar.schmal .nav-group{height:auto;padding:5px 12px;margin:16px 0 5px;background:none}
  .sidebar.schmal .nav-group > *{display:initial}
}

/* ---------- E-Mail in den Einstellungen ---------- */
/* Postausgang und Posteingang nebeneinander. Innerhalb einer Spalte rutscht
   der Hilfetext unter das Formular – zwei Spalten in zwei Spalten wären zu eng. */
.mail-doppel{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.mail-doppel > section{min-width:0}
.mail-doppel .grid-2{grid-template-columns:minmax(0,1fr)}
.mail-spalte-kopf{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  margin:0 0 12px;font-family:var(--font-tight);font-size:15.5px;font-weight:650;
  color:var(--ink);
}
.mail-spalte-kopf .ic{align-self:center;color:var(--accent)}
/* Die eingebettete Seite bringt Markenzeichen und Titel mit – beides steht
   schon in der Spaltenüberschrift und wäre hier doppelt. */
.mail-doppel .marke,
.mail-doppel .card-body h2{display:none}

@media (max-width:1200px){
  .mail-doppel{grid-template-columns:minmax(0,1fr)}
}

/* Kanal in der Bestellliste: Markenzeichen und Name nebeneinander. */
.kanal{display:flex;align-items:center;gap:7px;white-space:nowrap}
.kanal .marke-kachel{width:30px;height:19px;flex:0 0 30px}


/* Leistungsdatum: Ein Tag oder ein Zeitraum, beides per Kalender. Das Feld
   belegt zwei Spalten, sonst wird es fuer zwei Datumsfelder zu schmal. */
.zeit-feld{grid-column:span 2}
.zeit-wahl{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.zeit-wahl .art-reiter{flex:none;gap:4px}
.zeit-wahl .art-knopf{flex:none;padding:8px 12px;font-size:13px;border-radius:9px}
.zeit-felder{display:flex;align-items:center;gap:8px;flex:1 1 250px;min-width:0}
.zeit-felder .input{flex:1 1 140px;min-width:0}
.zeit-bis{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0}
.zeit-wort{color:var(--ink-3);font-size:13px;flex:none}
@media (max-width:760px){
  .zeit-feld{grid-column:auto}
  .zeit-felder{flex-basis:100%}
}


/* Geschriebener Beleg: Die Felder bleiben lesbar, sehen aber ruhiger aus –
   man soll sofort erkennen, dass hier nichts einzutragen ist. */
.editor-form[data-gesperrt] .input:disabled,
.editor-form[data-gesperrt] textarea:disabled{
  background:var(--surface-2);color:var(--ink-2);opacity:1;-webkit-text-fill-color:var(--ink-2);
}
.editor-form[data-gesperrt] .sperrleiste{margin-bottom:14px}


/* Hinweis unter den Positionen: Symbol und Text nebeneinander, das Symbol
   oben buendig zur ersten Zeile. */
#ustHinweis{display:flex;gap:10px;align-items:flex-start}
#ustHinweis svg{flex:none;margin-top:2px}

/* Klick neben ein Fenster mit Eingabefeldern: Es bleibt stehen und wackelt
   kurz. Ohne dieses Zeichen wirkt der Klick wie verschluckt. */
@keyframes modal-wackeln{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-6px)}
  30%{transform:translateX(5px)}
  45%{transform:translateX(-4px)}
  60%{transform:translateX(3px)}
  80%{transform:translateX(-2px)}
}
.modal.wackelt{animation:modal-wackeln .38s ease}
@media (prefers-reduced-motion:reduce){
  .modal.wackelt{animation:none;outline:2px solid var(--accent);outline-offset:3px}
}


/* ---------- Listen auf dem Handy ----------
   Aus jeder Tabellenzeile wird eine Karte. Vorher musste man die Tabelle
   seitwaerts schieben und sah nie alle Spalten gleichzeitig; jetzt steht
   alles untereinander, mit der Spaltenueberschrift davor. Die Ueberschrift
   haengt app.js als data-spalte an jede Zelle. */
@media (max-width:760px){
  .table-wrap{overflow-x:visible}

  table.data,
  table.data tbody,
  table.data tbody tr,
  table.data tbody td{display:block;width:100%}

  table.data thead{display:none}

  table.data tbody tr{
    border:1px solid var(--line);border-radius:13px;
    padding:11px 13px;margin:0 0 10px;background:var(--surface);
  }
  table.data tbody tr:last-child{margin-bottom:0}
  table.data tbody tr:hover{background:var(--surface-2)}

  table.data tbody td{
    border:none;padding:5px 0;
    display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    text-align:right;
  }
  table.data tbody td[data-spalte]::before{
    content:attr(data-spalte);
    flex:none;text-align:left;
    color:var(--ink-3);font-size:12px;font-weight:600;
    text-transform:uppercase;letter-spacing:.04em;
  }
  /* Zellen ohne Ueberschrift – Auswahlkaestchen, Zeilenaktionen – stehen
     nebeneinander in einer Kopfzeile der Karte, nicht jede in einer
     eigenen Zeile. Das spart bei fuenf Belegen eine halbe Bildschirmhoehe. */
  table.data tbody td:not([data-spalte]){
    display:inline-flex;width:auto;vertical-align:middle;
    justify-content:flex-start;text-align:left;
    padding:0 12px 0 0;
  }
  table.data tbody td:empty{display:none}

  /* In der Karte ist Platz: Auch die Spalten, die in der Tabellenansicht
     wegfallen, sind hier zu sehen. Darum ging es ja – alles auf einen Blick. */
  table.data tbody td.hide-sm{display:flex !important}
  /* Das Datum steht schon in der Karte, nicht nochmal unter der Nummer. */
  table.data tbody td .hide-lg{display:none}

  /* Zeilenaktionen nebeneinander ans Kartenende. */
  table.data tbody td.zeilen-aktionen,
  table.data tbody td[data-del-cell]{
    justify-content:flex-end;gap:6px;padding-top:9px;
    border-top:1px solid var(--line);margin-top:5px;
  }
}


/* Auch die Leisten oben sollen umbrechen statt seitlich zu scrollen –
   sonst uebersieht man Filter, die rechts aus dem Bild ragen. */
@media (max-width:760px){
  .topbar-actions{flex-wrap:wrap;overflow-x:visible}
  .topbar-actions .btn{flex:1 1 auto;justify-content:center}
  .chips-oben{flex-wrap:wrap;overflow-x:visible}
}