:root {
  --bg: #f6f5f2; --panel: #fff; --text: #1c1b19; --muted: #6d6a64; --line: #e4e1db;
  --accent: #1c1b19; --klein: #1f7a4d; --klein-bg: #e3f3ea; --paket: #8a5a00; --paket-bg: #fbf0d9;
  --err: #b42318; --err-bg: #fdecea; --test: #3b5bdb; --test-bg: #e7ecff;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #171614; --panel: #201f1c; --text: #ece9e3; --muted: #9c978e; --line: #34322e; --accent: #ece9e3;
    --klein: #6fd39e; --klein-bg: #1d3328; --paket: #e8b44f; --paket-bg: #3a2e14; --err: #ff8a80; --err-bg: #3b1d1a; --test: #9fb2ff; --test-bg: #1f2647; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); }
header { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--panel); }
.brand { font-weight: 650; font-size: 16px; } .sub { color: var(--muted); font-weight: 400; margin-left: 8px; font-size: 13px; }
.mode { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.mode.test { background: var(--test-bg); color: var(--test); } .mode.live { background: var(--klein-bg); color: var(--klein); }
nav { display: flex; gap: 4px; padding: 8px 16px 0; border-bottom: 1px solid var(--line); background: var(--panel); overflow-x: auto; }
nav button { border: 0; background: none; padding: 10px 12px; color: var(--muted); font: inherit; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
nav button.active { color: var(--text); border-color: var(--accent); font-weight: 600; }
main { padding: 16px 20px 40px; max-width: 1400px; margin: 0 auto; }
.tab { display: none; } .tab.active { display: block; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.card .k { color: var(--muted); font-size: 12px; } .card .v { font-size: 22px; font-weight: 650; margin-top: 2px; } .card .s { color: var(--muted); font-size: 12px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.toolbar.bulk { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.grow { flex: 1; }
input, select { font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; min-width: 0; }
input.n { width: 64px; text-align: right; }
.btn { font: inherit; font-weight: 600; border: 1px solid var(--accent); background: var(--accent); color: var(--bg); padding: 7px 14px; border-radius: 7px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn:disabled { opacity: .5; cursor: default; }
.tablewrap { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; color: var(--muted); font-weight: 600; position: sticky; top: 0; background: var(--panel); }
tr:last-child td { border-bottom: 0; }
td input.n { width: 60px; padding: 4px 6px; }
tr.dirty td { background: color-mix(in srgb, var(--test-bg) 60%, transparent); }
.badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.b-Kleinpaket, .b-geaendert { background: var(--klein-bg); color: var(--klein); }
.b-Paket, .b-unveraendert { background: var(--paket-bg); color: var(--paket); }
.b-Unbekannt { background: var(--line); color: var(--muted); }
.b-fehler, .b-zu_spaet { background: var(--err-bg); color: var(--err); }
.b-testlauf { background: var(--test-bg); color: var(--test); }
.b-grau { background: rgba(127,127,127,.15); color: var(--muted, #777); }
.muted { color: var(--muted); } .small { font-size: 12px; } .hint { color: var(--muted); margin: 0 0 12px; }
.split { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: 14px; }
@media (max-width: 800px) { .split { grid-template-columns: minmax(0, 1fr); } main { padding: 12px 16px 40px; } }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.panel h3 { margin: 4px 0 10px; font-size: 14px; }
.row { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; } .row input { flex: 1; }
.simline { display: flex; gap: 6px; margin-bottom: 6px; } .simline input:first-child { flex: 1; } .simline input.q { width: 60px; }
.verdict { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.layers { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.layer { font-size: 12px; color: var(--muted); }
.layer svg { display: block; margin-top: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
dt { color: var(--muted); } dd { margin: 0; }
#toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--bg); padding: 10px 16px; border-radius: 8px; opacity: 0; transition: opacity .2s; pointer-events: none; max-width: 90vw; }
#toast.show { opacity: 1; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; max-width: 760px; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.form label input, .form label select { font-size: 14px; }
.form .full { grid-column: 1 / -1; }
.form h4 { margin: 10px 0 0; font-size: 13px; color: var(--text); }
@media (max-width: 600px) { .form { grid-template-columns: minmax(0, 1fr); } }

.savings { margin-bottom: 14px; }
.sav-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sav-head h3 { margin: 0 0 10px; }
.savings .cards { margin-bottom: 8px; }
.savings .card .v { color: var(--klein); }
.savsvg { width: 100%; height: auto; max-height: 120px; display: block; }
.savsvg .bar { fill: var(--klein); opacity: .85; }
.savsvg .axis { font-size: 10px; fill: var(--muted); }
.missing { margin: 0 0 12px; }
.missing summary { cursor: pointer; }
.missing .tablewrap { margin-top: 8px; max-height: 320px; }
.b-masse_fehlen { background: var(--line); color: var(--muted); }
.savings .cards { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }

.form textarea { font: inherit; font-size: 14px; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; resize: vertical; }
.b-gesperrt { background: var(--line); color: var(--muted); }
.listhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 8px}
.listhead .grow{flex:1}
.listhead input{max-width:220px}
.b-International, .b-zurueckgesetzt { background: var(--test-bg); color: var(--test); }
.b-ausland { background: var(--line); color: var(--muted); }

/* Versand-Übersicht */
:root { --c-nat: #2a6fdb; --c-int: #d9480f; --c-klein: #1f7a4d; --warn: #8a5a00; --warn-bg: #fbf0d9; }
@media (prefers-color-scheme: dark) { :root { --c-nat: #6ea2ff; --c-int: #ff9a62; --c-klein: #6fd39e; --warn: #e8b44f; --warn-bg: #3a2e14; } }
.vhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.vhead h2 { margin: 0; font-size: 18px; }
.hintbox { background: var(--warn-bg); color: var(--warn); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 13px; }
.cards.three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sec { margin: 22px 0 10px; font-size: 15px; }
.sv-dhlnat { --sv: var(--c-nat); } .sv-dhlint { --sv: var(--c-int); } .sv-dhlklein { --sv: var(--c-klein); }
.shipcard { border-top: 3px solid var(--sv); }
.shipcard .unit, .card .unit { font-size: 13px; font-weight: 400; color: var(--muted); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--sv); margin-right: 6px; vertical-align: 0; }
.legend { display: flex; gap: 14px; color: var(--muted); }
.vsvg { width: 100%; height: 130px; display: block; }
.vaxis { display: flex; justify-content: space-between; margin-top: 4px; }
.vsvg rect { fill: var(--sv); }
.vsvg .axis { font-size: 10px; fill: var(--muted); }
.tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; color: var(--sv); border: 1px solid var(--sv); white-space: nowrap; }
.card.ok .v { color: var(--klein); } .card.bad .v { color: var(--err); } .card.warn .v { color: var(--warn); }
.card.click { cursor: pointer; } .card.click:hover { border-color: var(--muted); }
.meter { display: inline-block; width: 70px; height: 7px; background: var(--line); border-radius: 4px; overflow: hidden; vertical-align: middle; margin-right: 6px; }
.meter span { display: block; height: 100%; }
.m-voll { background: var(--klein); } .m-teilweise { background: var(--warn); } .m-nein { background: var(--err); }
tr.orow { cursor: pointer; } tr.orow:hover td { background: var(--bg); }
tr.late td:first-child { box-shadow: inset 3px 0 0 var(--err); }
td.r, th.r { text-align: right; }
table.inner { width: 100%; font-size: 12px; } table.inner th { font-weight: 600; }
tr.detail > td { background: var(--bg); }

.subnav { background: var(--bg); padding-top: 4px; }
.subnav button { font-size: 13px; padding: 8px 10px; }
.card .v.small-v { font-size: 18px; }
.subnav[hidden], [hidden] { display: none !important; }

input.n.sugg::placeholder { color: var(--test); opacity: .9; font-style: italic; }

.doneform, .doneinfo { margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.doneform textarea { width: 100%; box-sizing: border-box; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 7px 9px; margin-bottom: 8px; }
.doneform .row, .doneinfo .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }

.navbadge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: #c0392b; color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
th[data-sort]:hover { color: var(--text); }
th[data-sort]::after { content: '↕'; margin-left: 4px; opacity: .3; font-size: 11px; }
th.sorted { color: var(--text); }
th.sorted[data-dir="asc"]::after { content: '↑'; opacity: 1; }
th.sorted[data-dir="desc"]::after { content: '↓'; opacity: 1; }
a.ext { font-size: 11px; font-weight: 500; color: var(--muted); text-decoration: none; border: 1px solid var(--line); border-radius: 5px; padding: 0 4px; white-space: nowrap; }
a.ext:hover { color: var(--text); border-color: var(--text); }
.dlinks { display: flex; gap: 8px; margin-bottom: 8px; } .dlinks a.ext { font-size: 13px; padding: 3px 8px; }
.dgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-bottom: 10px; }
.dbox { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px; font-size: 13px; line-height: 1.5; }
.dbox h4 { margin: 0 0 6px; font-size: 12px; color: var(--muted); font-weight: 600; }
.card.click { cursor: pointer; }
.dcard { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.dcard.loading { opacity: .75; }
.dhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.dchips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dlabel { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-left: 6px; }
.dlabel:first-child { margin-left: 0; }
.chip { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); white-space: nowrap; }
.chip.ok { color: #1f7a45; border-color: #1f7a4555; background: #1f7a4512; }
.chip.warn { color: #8a5a00; border-color: #8a5a0055; background: #8a5a0012; }
.chip.bad { color: #b42318; border-color: #b4231855; background: #b4231812; }
.dlinks { display: flex; gap: 6px; margin: 0; }
.dbody { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; }
@media (max-width: 800px) { .dbody { grid-template-columns: minmax(0, 1fr); } }
.dside { font-size: 13px; line-height: 1.45; }
.dadr { font-weight: 500; }
.dcontact { margin-top: 4px; }
.dkv { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; display: grid; gap: 3px; }
.kv { display: flex; justify-content: space-between; gap: 10px; } .kv span { color: var(--muted); } .kv b { font-weight: 500; text-align: right; }
.dnote { margin-top: 8px; padding: 6px 8px; background: #8a5a0012; border-radius: 6px; font-size: 12px; white-space: pre-wrap; }
table.dlines td, table.dlines th { padding: 6px 8px; }
.ok-text { color: #1f7a45; }
.dactions { display: flex; gap: 8px; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.dactions input { flex: 1; min-width: 200px; }
.btn.small { padding: 5px 10px; font-size: 13px; }
.card.sel { outline: 2px solid var(--text); outline-offset: -2px; }
.gord { display: inline-flex; gap: 4px; align-items: center; margin: 2px 14px 2px 0; }

/* Versandlauf-Dialog */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow: auto; }
.modal[hidden] { display: none; }
.modalbox { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; width: min(980px, 100%); box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.vlrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.vlwarn { border: 1px solid var(--err, #b42318); background: #b4231810; color: var(--text); border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.vlprog { height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; } .vlprog span { display: block; height: 100%; background: var(--klein, #1f7a45); }
.vlfiles a { display: inline-block; margin: 2px 8px 2px 0; }

/* Versand vorbereiten: Schritte, Mitarbeiter, Verpacken */
.vlsteps { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.vlsteps span { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: var(--panel); }
.vlsteps span.cur { color: var(--text); border-color: var(--accent); font-weight: 600; }
.vlsteps span.done { color: #1f7a45; border-color: #1f7a4555; background: #1f7a4512; }
.mabtns { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.mabtn { min-width: 110px; }
.mabtn.sel { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.btn.danger { background: #b42318; border-color: #b42318; color: #fff; }
.vlpack { margin-top: 12px; padding: 12px; border: 2px solid var(--accent); border-radius: 10px; background: var(--panel); }
.vlok { margin-top: 12px; padding: 10px 12px; border-radius: 10px; color: #1f7a45; border: 1px solid #1f7a4555; background: #1f7a4512; }
.vldetails { margin-top: 10px; }
.linkbtn { border: 0; background: none; cursor: pointer; color: var(--muted); padding: 0 0 0 4px; font: inherit; }
.mach { display: inline-flex; align-items: center; margin: 0 6px 6px 0; }

.ext.blattlink { font-weight: 600; }

/* =====================================================================
   Design 2026 (1.16.0): hell, weiche Farbflächen, Pillen-Navigation,
   große dünne Zahlen, stark gerundete Karten, Verlaufskarten je Versandart,
   Akzent Lime. Nur Optik – alle Funktionen/IDs unverändert.
   ===================================================================== */
:root {
  --bg: #eef0f1; --panel: rgba(255,255,255,.9); --panel-solid: #fff; --text: #17181a; --muted: #5b5f66; --line: rgba(0,0,0,.08);
  --accent: #17181a; --lime: #d6f54a; --klein: #3f6b1f; --klein-bg: #e4f3c4; --paket: #8a5a00; --paket-bg: #fbecd2;
  --err: #b42318; --err-bg: #fde8e4; --test: #3b4bb8; --test-bg: #e6e9fb; --warn: #8a5a00; --warn-bg: #fbf0d9;
  --c-nat: #6d7a2c; --c-int: #a7705c; --c-klein: #4f5a44;
  --r-card: 24px; --r-big: 30px; --shadow: 0 10px 30px rgba(20,22,26,.06);
  color-scheme: light;
}
body {
  font: 14px/1.45 "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg); color: var(--text);
  background-image:
    radial-gradient(620px 460px at 42% -120px, rgba(244,214,160,.55), transparent 70%),
    radial-gradient(560px 560px at 105% 45%, rgba(214,236,170,.5), transparent 70%),
    radial-gradient(520px 420px at -10% 85%, rgba(236,200,190,.35), transparent 70%);
  background-attachment: fixed;
}

/* Kopf + Navigation */
header { background: transparent; border: 0; padding: 18px 24px 6px; max-width: 1440px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.brand .logo { display: inline-flex; width: 38px; height: 38px; border-radius: 50%; align-items: center; justify-content: center; background: var(--panel-solid); box-shadow: var(--shadow); }
.sub { color: var(--muted); font-weight: 400; font-size: 13px; margin-left: 2px; }
.mode { font-size: 12px; font-weight: 500; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.7); }
.mode.test { color: var(--test); } .mode.live { color: var(--klein); background: var(--klein-bg); }
nav { background: transparent; border: 0; gap: 8px; padding: 10px 24px 0; max-width: 1440px; margin: 0 auto; flex-wrap: wrap; overflow: visible; }
nav button { border: 1px solid var(--line); background: rgba(255,255,255,.7); color: var(--text); padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 500; }
nav button:hover { background: #fff; }
nav button.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 500; }
.subnav { background: transparent; padding-top: 10px; }
.subnav button { padding: 7px 14px; font-size: 12.5px; background: rgba(255,255,255,.45); }
.subnav button.active { background: #fff; color: var(--text); border-color: rgba(0,0,0,.25); box-shadow: var(--shadow); }
.navbadge { background: #c2410c; }
main { max-width: 1440px; padding: 22px 24px 48px; }

/* Überschriften und große Zahlen */
.vhead { margin-bottom: 16px; }
.vhead h2 { font-size: 32px; font-weight: 500; letter-spacing: -.025em; }
.sec { font-size: 18px; font-weight: 500; letter-spacing: -.01em; margin: 28px 0 12px; }
.card .v { font-size: 34px; font-weight: 400; letter-spacing: -.03em; line-height: 1.1; margin-top: 6px; }
.card .v.small-v { font-size: 22px; }
.card .k { font-size: 13px; color: var(--text); font-weight: 500; }
.card .s { color: var(--muted); }
.verdict { font-weight: 500; letter-spacing: -.02em; }

/* Karten, Panels, Tabellen */
.cards { gap: 14px; margin-bottom: 18px; }
.card, .panel, .dcard, .dbox, .doneform, .doneinfo { background: var(--panel); border: 1px solid rgba(255,255,255,.6); border-radius: var(--r-card); box-shadow: var(--shadow); }
.card { padding: 18px 20px; }
.panel { padding: 20px 22px; }
.panel h3 { font-size: 16px; font-weight: 500; }
.card.click:hover { border-color: rgba(0,0,0,.2); transform: translateY(-1px); transition: transform .15s; }
.card.sel { outline: 2px solid var(--accent); }
.card.ok .v { color: var(--klein); } .card.bad .v { color: var(--err); } .card.warn .v { color: var(--warn); }
.tablewrap { background: var(--panel); border: 1px solid rgba(255,255,255,.6); border-radius: 22px; box-shadow: var(--shadow); padding: 4px 6px; }
th { background: transparent; font-weight: 500; color: var(--muted); }
th, td { border-bottom: 1px solid rgba(0,0,0,.06); padding: 10px 12px; }
tr.orow:hover td { background: rgba(255,255,255,.6); }
tr.detail > td { background: rgba(238,240,241,.7); }
.hintbox { border-radius: 18px; padding: 12px 16px; }
.toolbar.bulk { border-radius: 20px; background: var(--panel); border-color: rgba(255,255,255,.6); box-shadow: var(--shadow); }
.split { gap: 18px; }

/* Versandarten als Verlaufskarten */
.shipcard { border: 0; border-radius: var(--r-big); color: #fff; min-height: 170px; box-shadow: 0 18px 40px rgba(60,50,30,.18); }
.shipcard.sv-dhlnat { background: linear-gradient(150deg, #a5b04a 0%, #6d7a2c 55%, #4b5420 100%); }
.shipcard.sv-dhlint { background: linear-gradient(150deg, #d9a48e 0%, #a7705c 55%, #6e4f45 100%); }
.shipcard.sv-dhlklein { background: linear-gradient(150deg, #7f8a6a 0%, #4f5a44 55%, #2f3530 100%); }
.shipcard .k, .shipcard .v, .shipcard .s, .shipcard b { color: #fff; }
.shipcard .s, .shipcard .muted, .shipcard .unit { color: rgba(255,255,255,.82) !important; }
.shipcard .v { font-size: 40px; }
.shipcard .dot { background: var(--lime); }
.shipcard .b-fehler { background: rgba(255,255,255,.2); color: #fff; padding: 0 6px; border-radius: 999px; }
.shipcard.click:hover { border: 0; }
.dot { background: var(--sv); }
.tag { border-radius: 999px; padding: 2px 9px; }
.legend { gap: 16px; }
.vsvg rect { rx: 2; }

/* Formularelemente und Knöpfe */
input, select, textarea, .form textarea { border-radius: 14px; border: 1px solid rgba(0,0,0,.1); background: rgba(255,255,255,.85); padding: 9px 12px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--lime); outline-offset: 1px; border-color: #9fb83a; }
.btn { border-radius: 999px; padding: 10px 18px; font-weight: 500; background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.ghost { background: rgba(255,255,255,.75); color: var(--text); border-color: rgba(0,0,0,.1); }
.btn.ghost:hover { background: #fff; }
.btn.small { padding: 7px 14px; }
.btn.danger { background: #b42318; border-color: #b42318; color: #fff; }
a.ext { border-radius: 999px; padding: 1px 8px; background: rgba(255,255,255,.7); }
a.ext.blattlink { background: var(--lime); color: var(--text); border-color: #b9d63a; }
.chip { border-radius: 999px; padding: 3px 10px; background: rgba(255,255,255,.75); }
.chip.ok { color: #2f5a12; background: #e4f3c4; border-color: #c4e08a; }
.badge { border-radius: 999px; padding: 3px 10px; font-weight: 500; }
.meter { height: 8px; border-radius: 99px; background: rgba(0,0,0,.08); }
.m-voll { background: #8fae2c; }
#toast { background: var(--accent); color: #fff; border-radius: 999px; padding: 12px 20px; }

/* Dialog „Versand vorbereiten“ als Glas-Panel */
.modal { background: rgba(30,32,36,.35); backdrop-filter: blur(6px); }
.modalbox { background: rgba(250,250,248,.96); border: 1px solid rgba(255,255,255,.7); border-radius: 32px; padding: 22px 24px; box-shadow: 0 30px 80px rgba(20,22,26,.25); }
.modalbox .vhead h2 { font-size: 24px; }
.vlsteps span { padding: 7px 14px; font-size: 12.5px; background: rgba(255,255,255,.8); border-color: rgba(0,0,0,.08); }
.vlsteps span.cur { background: var(--accent); color: #fff; border-color: var(--accent); }
.vlsteps span.done { background: var(--lime); color: var(--text); border-color: #b9d63a; }
.mabtns { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.mabtn { min-height: 64px; border-radius: 18px; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.mabtn::before { content: ''; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.08); flex: none; }
.mabtn.sel { background: var(--accent); color: #fff; border-color: var(--accent); }
.mabtn.sel::before { content: '✓'; background: var(--lime); color: var(--text); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.vlwarn { border-radius: 18px; padding: 12px 14px; }
.vlprog { height: 10px; } .vlprog span { background: linear-gradient(90deg, #a5b04a, #d6f54a); }
.vlpack { border-radius: 24px; border: 0; padding: 16px 18px; color: #fff; background: linear-gradient(160deg, #5c6332 0%, #8a7a4e 45%, #b98b74 100%); box-shadow: 0 18px 40px rgba(60,50,30,.2); }
.vlpack .muted { color: rgba(255,255,255,.8); }
.vlpack .chip { color: var(--text); }
.vlpack .mabtn { min-height: 40px; min-width: 96px; background: rgba(255,255,255,.18); color: #fff; border-color: rgba(255,255,255,.35); }
.vlpack .mabtn.sel { background: #fff; color: var(--text); }
.vlpack #vlPack { background: #fff; color: var(--text); border-color: #fff; }
.vlpack #vlPack:disabled { opacity: .45; }
.vlpack input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--lime); }
.vlok { border-radius: 18px; background: #e4f3c4; color: #2f5a12; border-color: #c4e08a; }

@media (max-width: 800px) {
  header, nav { padding-left: 16px; padding-right: 16px; }
  main { padding: 16px 16px 40px; }
  .vhead h2 { font-size: 26px; }
  .card .v { font-size: 28px; }
  .sub { display: none; }
  .mode { font-size: 11px; padding: 6px 10px; }
}

/* =====================================================================
   Layout 2026 (1.17.0): Icon-Leiste links, Kopfzeile mit Suche,
   Versand-Übersicht zweispaltig wie im Entwurf.
   ===================================================================== */
#rail { position: fixed; left: 0; top: 0; bottom: 0; width: 84px; z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 0; max-width: none; margin: 0; flex-wrap: nowrap; }
#rail .raillogo { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; margin-bottom: 36px; }
#rail button { width: 46px; height: 46px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.6); border: 1px solid var(--line); color: var(--text); }
#rail button:hover { background: #fff; }
#rail button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
#rail .grow { flex: 1; }
body { padding-left: 84px; }
header { display: block; padding: 22px 24px 0; }
header .brand, #mainnav { display: none; }
.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.topbar nav, .topbar .subnav { padding: 0; margin: 0; max-width: none; gap: 8px; }
.topbar .subnav button { padding: 11px 18px; font-size: 13px; background: rgba(255,255,255,.7); }
.topbar .subnav button.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: none; }
.topbar .mode { padding: 9px 14px; font-size: 13px; }
.gsearch { display: flex; align-items: center; gap: 8px; padding: 0 16px; height: 40px; border-radius: 999px; background: rgba(255,255,255,.7); border: 1px solid var(--line); min-width: 240px; }
.gsearch input { border: 0; background: transparent; padding: 0; font: inherit; font-size: 13px; width: 100%; outline: none; }
.gsearch:focus-within { background: #fff; outline: 2px solid var(--lime); }
.topbar #vSync { padding: 11px 20px; font-size: 13px; }
main { padding-top: 24px; }

/* Versand-Übersicht */
.vgrid { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 8px; }
.vleft, .vright { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.hello h1 { margin: 0; font-size: 34px; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
.hello p { margin: 2px 0 0; font-size: 34px; font-weight: 300; letter-spacing: -.02em; color: #8a8d93; line-height: 1.15; }
.vbig { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.bignum { font-size: 92px; font-weight: 300; line-height: .9; letter-spacing: -.04em; }
.vbigs { padding-bottom: 6px; font-size: 15px; }
.vbigs b { font-weight: 600; }
.segs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.seg { text-align: left; border: 0; border-radius: 14px; padding: 12px 14px; font: inherit; color: var(--text); cursor: pointer; display: flex; flex-direction: column; }
.seg span { font-size: 12px; color: #3d4046; }
.seg b { font-size: 22px; font-weight: 500; }
.seg:hover { filter: brightness(1.04); outline: 1px solid rgba(0,0,0,.15); }
.seg-g { background: linear-gradient(90deg, rgba(198,230,120,.55), rgba(198,230,120,.2)); }
.seg-o { background: linear-gradient(90deg, rgba(245,205,140,.55), rgba(245,205,140,.2)); }
.seg-r { background: linear-gradient(90deg, rgba(240,170,150,.5), rgba(240,170,150,.18)); }
.vtabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-top: 6px; font-size: 14px; color: #8a8d93; }
.vtabs .on { color: var(--text); font-weight: 600; border-bottom: 2px solid var(--text); padding-bottom: 9px; margin-bottom: -11px; }
.carriers { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.carriers .shipcard { padding: 18px; min-height: 196px; display: flex; flex-direction: column; }
.shtop { display: flex; align-items: center; gap: 10px; }
.shico { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.7); display: flex; align-items: center; justify-content: center; flex: none; }
.shname { margin-top: 12px; font-size: 15px; line-height: 1.2; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shname span { opacity: .75; font-size: 12.5px; }
.shipcard .arrow { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.shipcard .arrow:hover { background: #000; transform: rotate(8deg); }
.shk { margin-top: 14px; font-size: 12px; color: rgba(255,255,255,.8); }
.carriers .shipcard .v { font-size: 30px; font-weight: 500; letter-spacing: -.02em; margin-top: 0; }
.shfoot { margin-top: 12px; display: flex; justify-content: space-between; gap: 6px; font-size: 12px; white-space: nowrap; color: rgba(255,255,255,.88); }
.carriers .shipcard .s { font-size: 11.5px; margin-top: 6px; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.kpi { text-align: left; font: inherit; color: var(--text); cursor: pointer; background: rgba(255,255,255,.88); border: 1px solid rgba(255,255,255,.6); border-radius: 26px; padding: 18px 20px; box-shadow: 0 8px 30px rgba(0,0,0,.05); }
.kpi:hover { background: #fff; }
.kt { display: flex; justify-content: space-between; align-items: center; }
.ico { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(0,0,0,.1); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pruefen { font-size: 11px; font-weight: 600; color: #fff; background: #c2410c; border-radius: 999px; padding: 3px 9px; }
.kk { margin-top: 16px; font-size: 15px; }
.kpiv { font-size: 40px; font-weight: 400; letter-spacing: -.03em; line-height: 1.15; }
.kpiv span { font-size: 16px; color: #8a8d93; }
.ks { font-size: 12px; color: var(--muted); }
.laufrow { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.6); border-radius: 22px; padding: 12px 18px; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; text-align: left; }
.laufrow:hover { background: #fff; }
.laufrow .ico { width: 34px; height: 34px; }
.laufrow .grow { flex: 1; }
.chartcard { padding: 18px 20px; }
.chead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chead .ico { width: 34px; height: 34px; }
.chead h3 { margin: 0; font-size: 15px; font-weight: 400; }
.chead .legend { display: flex; gap: 14px; color: var(--muted); }
.ld { display: inline-block; width: 14px; height: 0; border-top: 2px solid var(--text); vertical-align: middle; margin-right: 5px; }
.ld.l2d { border-top: 2px dashed #b9bcc2; }
.lsvg { width: 100%; height: auto; display: block; margin-top: 8px; overflow: visible; }
.lsvg .gl path { stroke: rgba(0,0,0,.06); }
.lsvg .gt text { font-size: 10px; fill: #8a8d93; font-family: inherit; }
.lsvg .l1 { fill: none; stroke: var(--text); stroke-width: 2; stroke-linejoin: round; }
.lsvg .l2 { fill: none; stroke: #b9bcc2; stroke-width: 1.5; stroke-dasharray: 3 4; }
.lsvg .mk { stroke: var(--text); stroke-dasharray: 2 3; }
.lsvg .lime { fill: var(--lime); }
.lsvg .mv { font-size: 11px; font-weight: 600; fill: var(--text); font-family: inherit; }
.lsvg .hit { fill: transparent; cursor: default; }
.lsvg .hit:hover { fill: rgba(23,24,26,.25); }

@media (max-width: 800px) {
  #rail { display: none; }
  body { padding-left: 0; }
  header { padding: 16px 16px 0; }
  header .brand { display: flex; margin-bottom: 10px; }
  #mainnav { display: flex; padding: 0 0 10px; overflow-x: auto; flex-wrap: nowrap; }
  #mainnav button { flex: none; }
  .topbar .subnav { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; }
  .topbar .subnav button { flex: none; padding: 8px 14px; }
  .gsearch { min-width: 0; flex: 1 1 100%; order: 5; }
  .hello h1, .hello p { font-size: 26px; }
  .bignum { font-size: 64px; }
  .kpiv { font-size: 30px; }
  .segs b { font-size: 18px; }
  .vleft, .vright { flex-basis: 100%; }
}
.shipcard .shmeta { margin-top: auto; padding-top: 10px; font-size: 11.5px; color: rgba(255,255,255,.8); line-height: 1.4; }

/* Auswahl + Bulk-Aktionen (1.18.0) */
.selcol { width: 34px; text-align: center; padding-left: 10px !important; padding-right: 4px !important; }
.selcol input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; margin: 0; }
tr.orow.picked td { background: rgba(214,245,74,.22); }
.bulkbar { position: sticky; top: 10px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 12px; border-radius: 22px; background: rgba(23,24,26,.94); color: #fff; box-shadow: 0 14px 40px rgba(20,22,26,.25); backdrop-filter: blur(8px); }
.bulkbar .muted { color: rgba(255,255,255,.65); }
.bulkbar .btn { background: var(--lime); color: var(--text); border-color: var(--lime); }
.bulkbar .btn.ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.25); }
.bulkbar .btn:disabled { opacity: .45; }
.bulkbar .chk { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; cursor: pointer; }
.bulkbar .chk input { accent-color: var(--lime); width: 15px; height: 15px; }
.bulkbar .bsep { width: 1px; height: 22px; background: rgba(255,255,255,.2); }
.dokstatus { flex: 1 1 100%; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.15); }
.dokstatus a.ext.blattlink { color: var(--text); margin-right: 6px; }
.dokstatus details { display: inline-block; vertical-align: top; }
.dokstatus .linkbtn { color: #fff; }

/* Links ruhiger (1.19.0): Nummern selbst verlinkt, Dokumente als kompakte Gruppe, Sendungsnummern ohne Browser-Blau */
a.ext { border: 0; background: none; padding: 0; border-radius: 0; font-size: 12px; font-weight: 500; color: var(--muted); text-decoration: none; }
a.ext:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; background: none; }
a.ext.blattlink { background: var(--lime); color: var(--text); padding: 2px 10px; border-radius: 999px; text-decoration: none; }
.idrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.idsep { color: #b9bcc2; }
a.idl, a.trk { color: var(--text); text-decoration: none; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; border-bottom: 1px solid rgba(0,0,0,.18); }
a.idl.sub { color: var(--muted); font-weight: 400; font-size: 12.5px; }
a.idl:hover, a.trk:hover { color: #000; border-bottom-color: var(--text); }
a.idl .ar, a.trk .ar { font-size: .78em; margin-left: 2px; color: #9a9da3; display: inline-block; transition: transform .15s; }
a.idl:hover .ar, a.trk:hover .ar { transform: translate(1px, -1px); color: var(--text); }
.docs { display: inline-flex; align-items: stretch; margin-top: 6px; border: 1px solid rgba(0,0,0,.1); border-radius: 999px; background: rgba(255,255,255,.75); overflow: hidden; white-space: nowrap; vertical-align: middle; }
.docs a.doc { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; font-size: 11.5px; font-weight: 500; color: var(--muted); text-decoration: none; }
.docs a.doc + a.doc { border-left: 1px solid rgba(0,0,0,.08); }
.docs a.doc:hover { background: #fff; color: var(--text); }
.docs a.doc.main { background: var(--lime); color: var(--text); }
.docs a.doc.main:hover { background: #c9ea2f; }

/* Seiten-Navigation (100 je Seite) */
.pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 12px 6px 4px; }
.pager:empty { display: none; }
.pager .pg { min-width: 36px; height: 36px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.75); font: inherit; font-size: 13px; color: var(--text); cursor: pointer; }
.pager .pg:hover:not(:disabled) { background: #fff; }
.pager .pg.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.pager .pg:disabled { opacity: .35; cursor: default; }
.pager .pgdots { color: var(--muted); padding: 0 2px; }
.bulkbar #sSelAlle { color: var(--lime); font-size: 13px; }

/* Auftragsdetail: linke Spalte etwas breiter, Dokumentgruppe bricht sauber um (1.19.4) */
.dbody { grid-template-columns: 300px minmax(0, 1fr); }
@media (max-width: 800px) { .dbody { grid-template-columns: minmax(0, 1fr); } }
.dside .kv { flex-wrap: wrap; align-items: baseline; }
.dside .kv b { margin-left: auto; min-width: 0; }
.dside .docs { margin-top: 4px; }

/* Übersicht ausbalanciert (1.19.5) */
.vgrid { align-items: stretch; gap: 24px; }
.vleft, .vright { gap: 18px; }
.vright .chartcard { flex: 1; display: flex; flex-direction: column; }
.vright .chartcard #vChart { flex: 1; display: flex; align-items: center; }
.vright .chartcard .lsvg { margin-top: 4px; }
.hello h1, .hello p { font-size: 32px; }
.vbig { gap: 18px; }
.bignum { font-size: 84px; }
.segs { gap: 12px; }
.seg { padding: 12px 16px; border-radius: 18px; }
.vtabs { margin-top: 2px; }
.carriers { gap: 12px; }
.carriers .shipcard { min-height: 0; padding: 18px 18px 16px; }
.shsub { font-size: 12px; color: rgba(255,255,255,.75); margin-top: 2px; }
.shstats { margin-top: auto; padding-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; border-top: 1px solid rgba(255,255,255,.18); margin-top: 16px; }
.shstats div { display: flex; flex-direction: column; min-width: 0; }
.shstats span { font-size: 11px; color: rgba(255,255,255,.7); }
.shstats b { font-size: 14px; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.kpis { gap: 12px; }
.kpi { border-radius: 24px; }
.laufrow { border-radius: 20px; }
.chartcard { border-radius: 24px; }

/* Shopify-Tags in den offenen Bestellungen (1.20.0) */
.otags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; max-width: 260px; }
.otag { font: inherit; font-size: 11px; line-height: 1.4; padding: 1px 8px; border-radius: 999px; border: 1px solid rgba(0,0,0,.1); background: rgba(255,255,255,.8); color: var(--muted); cursor: pointer; white-space: nowrap; }
.otag:hover { color: var(--text); border-color: rgba(0,0,0,.3); }
.otag.on { background: var(--lime); color: var(--text); border-color: #b9d63a; }

/* Massendruck: Artikel-Kopfzeilen (1.21.0) */
tr.artkopf td { background: rgba(214,245,74,.16); border-bottom: 1px solid rgba(0,0,0,.06); padding-top: 12px; padding-bottom: 10px; }
tr.artkopf td b { font-weight: 600; }
tr.artkopf .chip { margin-left: 4px; }
tr.artkopf .btn { margin-left: 8px; padding: 5px 12px; }

/* Kacheln links/rechts schließen unten bündig ab (1.22.0) */
.vleft .carriers { flex: 1; align-items: stretch; }
.vleft .carriers .shipcard { height: 100%; box-sizing: border-box; }

/* Gewinn-/Verlust-Rechnung im Auftrag (1.22.0) */
.gv-plus { color: #2f6b12; font-weight: 500; }
.gv-minus { color: var(--err); font-weight: 500; }
.gvbox { margin-top: 12px; padding: 14px 16px; border-radius: 18px; background: rgba(228,243,196,.55); border: 1px solid rgba(143,174,44,.35); }
.gvbox.verlust { background: rgba(253,232,228,.7); border-color: rgba(180,35,24,.25); }
.gvhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-weight: 500; }
.gvres { font-size: 24px; font-weight: 500; letter-spacing: -.02em; color: #2f6b12; font-variant-numeric: tabular-nums; }
.gvbox.verlust .gvres { color: var(--err); }
.gvres small { font-size: 13px; color: var(--muted); font-weight: 400; margin-left: 4px; }
.gvgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; margin: 10px 0 8px; }
.gvz { display: flex; flex-direction: column; }
.gvz span { font-size: 11.5px; color: var(--muted); }
.gvz b { font-weight: 500; font-variant-numeric: tabular-nums; }
/* gestreckte Versandarten-Kacheln: Kennzahlen unten, Luft in der Mitte (1.23.0) */
.carriers .shipcard .shstats { margin-top: auto; }
.carriers .shipcard .shsub { margin-bottom: 16px; }
.pruefen.warnb { background: #b7791f; }

/* Single Item: Artikel zugeklappt (1.25.0) */
tr.artkopf { cursor: pointer; }
tr.artkopf:hover td { background: rgba(214,245,74,.28); }
tr.artkopf .tog { display: inline-block; width: 16px; color: var(--muted); }
tr.artkopf.auf td { background: rgba(214,245,74,.3); }
tr.gkind td:nth-child(2) { padding-left: 28px; }
.grptools { display: contents; }

/* Druckzähler + Nachdruck (1.27.0) */
.docs a.doc .dz { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: rgba(0,0,0,.08); font-size: 10.5px; font-weight: 600; }
.docs a.doc.gedruckt { color: var(--muted); }
.docs a.doc.main.gedruckt { background: #eef3d8; }
.docs a.doc.gedruckt .dz { background: #fde8d8; color: #9a3412; }
.dh { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: #e6e9fb; color: #3b4bb8; font-size: 10px; font-weight: 600; }
.ndbox { max-width: 620px; }
.ndform { display: grid; gap: 10px; margin-top: 12px; }
.ndform label { display: grid; gap: 4px; }
.ndform label span { font-size: 12px; color: var(--muted); }
#pinPanel .row input { max-width: 220px; }

/* Anmeldung (1.28.0) */
.loginpage { padding-left: 0 !important; }
.loginwrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; max-width: none; }
.loginbox { width: 100%; max-width: 400px; background: rgba(255,255,255,.9); border-radius: 30px; padding: 32px 28px; box-shadow: 0 30px 80px rgba(20,22,26,.12); }
.loginlogo { width: 56px; height: 56px; border-radius: 50%; background: var(--lime); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.loginbox h1 { margin: 0; font-size: 30px; font-weight: 500; letter-spacing: -.02em; }
.loginbox > p { margin: 4px 0 18px; }
.loginbox form { display: grid; gap: 12px; }
.loginbox label { display: grid; gap: 4px; }
.loginbox label span { font-size: 12px; color: var(--muted); }
.loginbox .btn { padding: 12px; font-size: 15px; }
/* Konto in der Leiste */
.railme { margin-top: 10px; background: var(--lime) !important; color: var(--text) !important; font-weight: 600; font-size: 13px; border: 0 !important; }
.memenu { position: fixed; left: 92px; bottom: 20px; z-index: 40; background: #fff; border-radius: 18px; padding: 14px 16px; box-shadow: 0 20px 50px rgba(20,22,26,.18); min-width: 220px; }
.railmsg { position: relative; }
.railbadge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #c2410c; color: #fff; font-size: 10.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
/* Nachrichten */
.chat { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; height: calc(100vh - 210px); min-height: 460px; }
.chatlist { background: var(--panel); border-radius: 24px; padding: 8px; overflow: auto; box-shadow: var(--shadow); }
.chk { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px; border: 0; background: none; border-radius: 16px; cursor: pointer; text-align: left; font: inherit; color: var(--text); }
.chk:hover { background: rgba(0,0,0,.04); }
.chk.on { background: var(--accent); color: #fff; }
.chk.on .muted { color: rgba(255,255,255,.7); }
.av { width: 36px; height: 36px; flex: none; border-radius: 50%; background: #e4e6e8; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; color: var(--text); }
.av-team { background: var(--lime); }
.av-lock { background: #fde8d8; }
.ct { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ct .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #c2410c; color: #fff; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.chatmain { display: flex; flex-direction: column; background: var(--panel); border-radius: 24px; box-shadow: var(--shadow); min-height: 0; }
.chathead { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.chatmsgs, .chatfrei { flex: 1; overflow: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; }
.chatday { align-self: center; font-size: 11px; color: var(--muted); background: rgba(0,0,0,.05); padding: 2px 10px; border-radius: 999px; margin: 6px 0; }
.msg { max-width: 72%; align-self: flex-start; background: #f1f2f3; border-radius: 18px 18px 18px 6px; padding: 8px 12px; }
.msg.mine { align-self: flex-end; background: var(--accent); color: #fff; border-radius: 18px 18px 6px 18px; }
.msg.mine .muted, .msg.mine a.ref { color: rgba(255,255,255,.8); }
.msg.sys { align-self: center; max-width: 90%; background: #eef3d8; color: var(--text); border-radius: 14px; font-size: 13px; }
.msg .mh { font-size: 11.5px; margin-bottom: 2px; }
.msg .mt { white-space: normal; word-wrap: break-word; }
a.ref { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.chatform { display: flex; gap: 10px; padding: 12px; border-top: 1px solid var(--line); align-items: flex-end; }
.chatform textarea { flex: 1; resize: none; border-radius: 16px; }
.frei { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px; display: grid; gap: 4px; }
.frnotiz { flex: 1; min-width: 140px; }
/* Benutzer */
.invform { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0; }
.rechte { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.recht { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; cursor: pointer; }
#userTable td.rechte { max-width: 420px; }
@media (max-width: 800px) {
  .chat { grid-template-columns: 1fr; height: auto; }
  .chatlist { max-height: 220px; }
  .chatmain { min-height: 420px; }
  .msg { max-width: 88%; }
  .memenu { left: 16px; bottom: auto; top: 70px; }
}

/* MG-Logo (1.28.1) */
.mglogo { color: var(--text); display: block; }
#rail .raillogo { margin-bottom: 30px; }
.loginlogo { background: #fff !important; border: 1px solid var(--line); }

/* Massendruck-Leiste unten (läuft im Hintergrund) */
#vlDock { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: min(360px, calc(100vw - 32px)); background: var(--card, #fff); color: inherit; border: 1px solid var(--line, #ddd); border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.15); padding: 12px 14px; display: grid; gap: 7px; }
#vlDock[hidden] { display: none; }
#vlDock .dk-t { display: flex; gap: 6px; align-items: baseline; }
#vlDock .dk-t .grow { flex: 1; }
#vlDock .btn { justify-self: end; }
.vlpct { font-variant-numeric: tabular-nums; }
#vlDock .dk-t b, #vlDock .dk-t span:last-child { white-space: nowrap; }

/* Nachrichten: Eingabe, Gruppen, @-Erwähnungen */
.chatform .ment-wrap { flex: 1; position: relative; display: flex; }
.chatform textarea, #chatText { flex: 1; font: inherit; font-size: 14px; line-height: 1.45; padding: 10px 14px; letter-spacing: normal; }
#chatText::placeholder { font-family: inherit; font-size: 13.5px; color: var(--muted); opacity: 1; }
.mentlist { position: absolute; left: 0; bottom: calc(100% + 6px); width: min(320px, 100%); background: var(--panel, #fff); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.14); padding: 6px; z-index: 5; display: grid; gap: 2px; }
.mentlist[hidden] { display: none; }
.mentitem { display: flex; align-items: center; gap: 10px; border: 0; background: none; border-radius: 12px; padding: 6px 8px; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.mentitem .av { width: 28px; height: 28px; font-size: 11px; }
.mentitem.on, .mentitem:hover { background: rgba(0,0,0,.06); }
.ment { font-weight: 600; color: #4b5f10; background: #eef6d0; border-radius: 6px; padding: 0 3px; }
.ment.me { background: #d6f54a; color: #1c2400; }
.msg.mine .ment { background: rgba(255,255,255,.18); color: #fff; }
.msg.erw { box-shadow: 0 0 0 2px #d6f54a; }
.cb-at { background: #4b5f10; margin-right: 4px; }
.av-grp { background: #e8eefc; font-size: 15px; }
.av-neu { background: transparent; border: 1.5px dashed var(--line); font-size: 18px; color: var(--muted); }
.grpbox { width: min(520px, 100%); }
.grpname { display: grid; gap: 4px; margin-top: 8px; }
.grpname input { font: inherit; }
.grpleute { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; max-height: 320px; overflow: auto; }
.grpp { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; }
.grpp .av { width: 28px; height: 28px; font-size: 11px; }
.grpp input { accent-color: #4b5f10; }

/* Chat: Anhänge, Aufgabe übernehmen, Ziehen & Ablegen */
.chatup { font-size: 18px; padding: 8px 12px; align-self: stretch; }
.chatmain.drop { outline: 3px dashed #a5b04a; outline-offset: -8px; }
.msg { position: relative; }
.mimg img { display: block; max-width: min(320px, 100%); max-height: 260px; border-radius: 12px; margin-top: 6px; }
.mfile { display: inline-flex; gap: 8px; align-items: center; margin-top: 6px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.7); color: inherit; text-decoration: none; border: 1px solid var(--line); }
.msg.mine .mfile { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); }
.mfi { font-size: 20px; }
.mtask { position: absolute; top: -10px; right: 8px; display: none; font: inherit; font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--text); cursor: pointer; }
.msg:hover .mtask { display: inline-block; }
/* E-Commerce */
.ecnav, .pills { display: inline-flex; gap: 4px; background: rgba(255,255,255,.7); border: 1px solid var(--line); border-radius: 999px; padding: 4px; flex-wrap: wrap; }
.ecnav button, .pills button { font: inherit; font-size: 13px; border: 0; background: none; padding: 6px 14px; border-radius: 999px; cursor: pointer; color: var(--text); }
.ecnav button.on, .pills button.on { background: var(--accent); color: #fff; }
.aufneu { display: flex; gap: 10px; margin: 14px 0; }
.aufneu input { flex: 1; font: inherit; padding: 12px 16px; border-radius: 999px; }
.aufliste { display: grid; gap: 6px; margin-top: 8px; }
.aufgr { margin: 14px 0 4px; font-size: 13px; font-weight: 600; }
.auf { display: flex; gap: 12px; align-items: flex-start; background: var(--panel, #fff); border-radius: 16px; padding: 10px 14px; box-shadow: var(--shadow); cursor: pointer; }
.auf:hover { outline: 1px solid var(--line); }
.auf.done b { text-decoration: line-through; color: var(--muted); }
.aufchk { width: 18px; height: 18px; margin-top: 2px; accent-color: #4b5f10; cursor: pointer; }
.auft { flex: 1; min-width: 0; display: grid; gap: 2px; }
.kalgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.kaltag { background: var(--panel, #fff); border-radius: 16px; padding: 8px; min-height: 220px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; cursor: copy; }
.kaltag.heute { outline: 2px solid #d6f54a; }
.kalkopf { font-size: 13px; padding: 2px 4px 6px; border-bottom: 1px solid var(--line); }
.kalauf { font-size: 12.5px; background: #f2f5e6; border-radius: 10px; padding: 6px 8px; cursor: pointer; line-height: 1.35; }
.kalauf.done { opacity: .55; text-decoration: line-through; }
.kalzeit { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .kalgrid { grid-template-columns: 1fr; } .kaltag { min-height: 0; } }
.vorform { margin-bottom: 14px; }
.vorform .vtag[hidden] { display: none; }
.aufform textarea, .aufform input, .aufform select { font: inherit; }
/* Live-Tabelle */
.tabgrid { overflow: auto; max-height: calc(100vh - 260px); background: #fff; border-radius: 16px; box-shadow: var(--shadow); }
.sheet { border-collapse: collapse; font-size: 13px; }
.sheet th { position: sticky; top: 0; background: #f3f4f5; font-weight: 500; color: var(--muted); font-size: 11.5px; padding: 4px 6px; border: 1px solid #e3e5e8; z-index: 1; min-width: 120px; }
.sheet th.rh { position: sticky; left: 0; min-width: 40px; width: 40px; z-index: 2; text-align: right; }
.sheet td { border: 1px solid #e3e5e8; padding: 0; }
.sheet td input { width: 100%; min-width: 120px; border: 0; border-radius: 0; padding: 5px 7px; font: inherit; font-size: 13px; background: transparent; box-shadow: none; }
.sheet td input:focus { outline: 2px solid #8ea52a; outline-offset: -2px; background: #fbfdf2; }
.sheet td input.kopf { font-weight: 600; background: #f8faf0; }
.sheet td input.blink { animation: zblink 1.2s ease; }
@keyframes zblink { 0% { background: #e4f3c4; } 100% { background: transparent; } }

/* 1.37: Massendruck-Historie, Tempo, Fehler erneut */
.vltempo { margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: var(--panel2, rgba(127,127,127,.08)); }
.vlfehler { margin: 10px 0; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(220, 60, 60, .35); background: rgba(220, 60, 60, .06); }
.vlfehler > div { margin: 3px 0; }
.teilinfo { margin-top: 4px; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.teilinfo .docs { transform: scale(.9); transform-origin: left center; }
.bulkbar .chk { width: auto; padding: 2px 4px; color: inherit; border-radius: 6px; }
.bulkbar .chk:hover { background: rgba(255,255,255,.08); }
.vlblatt { margin-bottom: 6px; white-space: nowrap; }
.vlblatt .btn { text-decoration: none; }
.vldruck { margin: 2px 0 6px; line-height: 1.35; }
#vlDock { position: fixed; }
#vlDock .dk-x { position: absolute; top: 6px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; color: inherit; opacity: .6; }
#vlDock .dk-x:hover { opacity: 1; background: rgba(0,0,0,.06); }