/* Patsli Supply Hub · Stylesheet
   Ruhige Betriebsoberfläche: warmes Off-White, weiße Karten, 8-px-Raster, tabellarische Zahlen.
   Klassen bleiben kompatibel zu den Templates (tile, st-*, meter, chip, loc-badge, form-row ...). */

:root{
  color-scheme: light;

  /* Flächen und Text */
  --page:#f6f5f1; --surface:#ffffff; --surface-2:#faf9f6;
  --ink:#141414; --ink2:#5b5955; --muted:#767369;
  --line:#e8e6e0; --line-faint:#f0eeea; --line2:#d9d6ce; --border:#e6e4de;
  --grid:var(--line); --axis:#c9c6bd;

  /* Marke */
  --brand:#0e8a6a; --brand-dark:#0b6f55; --brand-soft:#e4f2ec; --brand-ring:rgba(14,138,106,.22);

  /* Datenreihen */
  --series:#2a78d6; --series-soft:#cde2fb;

  /* Semantik: kräftige Farbe, weicher Hintergrund, Textfarbe mit Kontrast ≥ 4,5:1 auf dem weichen Hintergrund */
  --critical:#d03b3b; --critical-soft:#fbe9e9; --critical-text:#8f2424;
  --serious:#e0702f;  --serious-soft:#fdeee3;  --serious-text:#8a3c1c;
  --warn:#e6a817;     --warn-soft:#fdf3d6;     --warn-text:#6b4e00;
  --good:#1f9d55;     --good-soft:#e3f3e8;     --good-text:#0f6b38;
  --neutral:#a8a49b;  --neutral-soft:#efeeea;  --neutral-text:#5b5955;
  --info:#2a78d6;     --info-soft:#e3eef9;     --info-text:#155a9c;
  --success-text:var(--good-text);

  /* Maße */
  --radius:12px; --radius-sm:8px;
  --shadow:0 1px 2px rgba(20,20,20,.04), 0 2px 8px rgba(20,20,20,.03);
  --topbar-h:57px;
  --ctl-h:32px; --ctl-h-sm:28px;
  --wrap:1200px; --gutter:24px;
}

/* ---------------------------------------------------------------- Basis */
*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  background:var(--page); color:var(--ink); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--brand-dark)}
b,strong{font-weight:600}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:4px}
.wrap{max-width:var(--wrap); margin:0 auto; padding:24px var(--gutter) 64px}

h1{font-size:20px; font-weight:600; line-height:1.3; letter-spacing:-.01em; margin-bottom:16px}
h2{font-size:15px; font-weight:600; line-height:1.4; margin-bottom:12px}
h3{font-size:14px; font-weight:600; line-height:1.4; margin-bottom:8px}
h1 .sub, h2 .sub, h3 .sub{font-weight:400; color:var(--muted)}
h1 .sub{font-size:14px}
.sub{color:var(--ink2); font-size:13px}
.mut{color:var(--muted)}
.small{font-size:12px}
.sec{margin-bottom:16px}
.up{color:var(--good-text); font-weight:600}
.warncol{color:var(--warn-text); font-weight:600}
.critcol{color:var(--critical-text); font-weight:600}
.num, .tnum{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- Kopfzeile */
header.topbar{background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:40}
.head-in{max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); min-height:56px; display:flex; align-items:center; gap:16px}
.logo{display:flex; align-items:center; gap:10px; font-weight:600; font-size:15px; color:var(--ink); text-decoration:none; white-space:nowrap}
.logo .dot{flex:none; width:28px; height:28px; border-radius:8px; background:var(--brand); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; letter-spacing:0}
.logo small{font-weight:400; color:var(--muted); font-size:12px; margin-left:4px}
.head-right{margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:nowrap}
.head-out{display:flex; align-items:center}
.kw{color:var(--muted); font-size:12.5px; white-space:nowrap; font-variant-numeric:tabular-nums; margin-right:4px}
.role-badge{display:inline-flex; align-items:center; gap:8px; height:var(--ctl-h); border:1px solid var(--border); background:var(--surface); border-radius:999px; padding:0 12px 0 10px; font-size:12.5px; color:var(--ink); text-decoration:none; white-space:nowrap}
.role-badge::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--brand); flex:none}
.role-badge:hover{border-color:var(--line2); background:var(--surface-2)}
.role-badge .mut{color:var(--muted)}

/* Navigation als Tabs */
.navbar{background:var(--surface); border-bottom:1px solid var(--border)}
nav.tabs{max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); display:flex; gap:2px; overflow-x:auto; scrollbar-width:none}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs a{display:inline-block; font-size:13.5px; padding:11px 12px 9px; color:var(--ink2); text-decoration:none; border-bottom:2px solid transparent; white-space:nowrap; margin-bottom:-1px}
nav.tabs a:hover{color:var(--ink)}
nav.tabs a.on{color:var(--brand-dark); font-weight:600; border-bottom-color:var(--brand)}

.rolenote{background:var(--brand-soft); border:1px solid #cfe6dc; color:#0b5d47; border-radius:var(--radius-sm); padding:10px 14px; font-size:13px; margin-bottom:16px}

/* Hinweisbanner (Demo) */
.demo{background:var(--warn-soft); border-bottom:1px solid #f0dfae; color:var(--warn-text); font-size:12.5px}
.demo .head-in{min-height:0; padding-top:6px; padding-bottom:6px}

/* ---------------------------------------------------------------- Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; height:var(--ctl-h); padding:0 14px; border:1px solid transparent; border-radius:var(--radius-sm); font:inherit; font-size:13px; font-weight:600; line-height:1; cursor:pointer; text-decoration:none; white-space:nowrap; transition:background .15s, border-color .15s, color .15s}
.btn-primary{background:var(--brand); color:#fff}
.btn-primary:hover{background:var(--brand-dark)}
.btn-ghost{background:var(--surface); border-color:var(--line2); color:var(--ink2)}
.btn-ghost:hover{background:var(--brand-soft); border-color:#bcdccf; color:var(--brand-dark)}
.btn-danger{background:var(--surface); border-color:#efc9c9; color:var(--critical-text)}
.btn-danger:hover{background:var(--critical-soft)}
.btn-sm{height:var(--ctl-h-sm); padding:0 10px; font-size:12px}
.btn[disabled]{opacity:.6; cursor:default}
.btn:focus-visible{outline-offset:1px}

/* ---------------------------------------------------------------- Karten & Raster */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px 24px}
.card[id]{scroll-margin-top:calc(var(--topbar-h) + 56px)}
.card-head{display:flex; align-items:center; gap:8px 16px; flex-wrap:wrap; margin-bottom:12px}
.card-head.page-head{margin-bottom:16px}
.card-head h1, .card-head h2, .card-head h3{margin:0}
.card-head .sub{flex:1 1 240px; text-align:right}
.card-head .spacer + .sub{flex:0 1 auto}
.card-head form, .card-head .actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.grid{display:grid; gap:16px}
.grid > *{min-width:0}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g2.g-32{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.flex{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.spacer{flex:1}
.footer-note{color:var(--muted); font-size:12px; margin-top:32px; text-align:center}

/* ---------------------------------------------------------------- KPI-Kacheln */
.tile{position:relative; display:flex; flex-direction:column; gap:4px}
.tile .lbl{font-size:12.5px; font-weight:500; color:var(--ink2)}
.tile .val, .val{font-size:28px; font-weight:700; line-height:1.15; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; margin-top:4px}
.tile .val .unit, .val .unit{font-size:13px; font-weight:500; color:var(--muted); letter-spacing:0; margin-left:2px}
.tile .val.md, .val.md{font-size:18px; font-weight:600; letter-spacing:-.01em; line-height:1.3; margin-top:8px}
.tile .delta{font-size:12.5px; color:var(--muted); line-height:1.45; margin-top:2px}
.tile .delta b{color:var(--ink2)}
.tile-alert::before{content:""; position:absolute; left:-1px; top:16px; bottom:16px; width:3px; border-radius:0 3px 3px 0; background:var(--critical)}
.tile-alert .val{color:var(--critical-text)}

/* ---------------------------------------------------------------- Sync-Chips */
.sync{display:flex; align-items:center; gap:6px 8px; flex-wrap:wrap; margin-bottom:16px}
.chip{display:inline-flex; align-items:center; gap:7px; height:26px; border:1px solid var(--border); background:var(--surface); border-radius:999px; padding:0 10px; font-size:12px; color:var(--ink2); text-decoration:none; white-space:nowrap; cursor:default}
.chip b{color:var(--ink); font-weight:600}
.chip .led{width:7px; height:7px; border-radius:50%; background:var(--neutral); flex:none}
.chip .led.ok{background:var(--good)}
.chip .led.err{background:var(--critical)}
.chip .led.run{background:var(--warn)}
.chip.pend{color:var(--muted)}
.chip.err{border-color:#efc9c9; color:var(--critical-text)}
.chip.on{background:var(--brand); color:#fff; border-color:var(--brand)}
a.chip{cursor:pointer}
a.chip:hover{border-color:var(--line2); background:var(--surface-2); color:var(--ink)}
.okmark{color:var(--good-text); font-weight:600}
.errmark{color:var(--critical-text); font-weight:600}
.pend{color:var(--muted)}

/* Abschnittsnavigation (Einstellungen), klebt unter der Kopfzeile */
.subnav{position:sticky; top:var(--topbar-h); z-index:30; display:flex; gap:6px; flex-wrap:wrap; background:var(--page); padding:8px 0 12px; margin:-8px 0 8px}
.subnav a.chip{color:var(--ink2)}

/* ---------------------------------------------------------------- Tabellen */
table{width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px}
th{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); text-align:left; font-weight:600; padding:8px 12px; border-bottom:1px solid var(--line); background:var(--surface); vertical-align:bottom; line-height:1.3}
td{padding:12px; border-bottom:1px solid var(--line); vertical-align:middle; font-variant-numeric:tabular-nums; line-height:1.45}
tbody tr:last-child td{border-bottom:0}
td.num, th.num{text-align:right}
.nw{white-space:nowrap}
tbody tr:hover > td{background:var(--surface-2)}
tr.done{opacity:.6}
.skuname{font-weight:600; white-space:nowrap}
.skuname small{display:block; font-weight:400; color:var(--muted); font-size:11.5px; margin-top:1px}
.skuname a{color:inherit; text-decoration:none}
.skuname a:hover{color:var(--brand-dark)}
table.compact td, table.compact th{padding:8px 10px; font-size:13px}
table.compact th{font-size:10.5px}
table.compact td.num{white-space:nowrap}
td .sub{font-size:12.5px}
td .mut.small, td .sub.small{font-size:11.5px}
td .chain{font-size:11.5px; margin-top:4px; color:var(--muted); line-height:1.4}
.chain{font-size:11.5px; margin-top:4px; color:var(--muted)}
.chain b{color:var(--ink2)}
.tbl-wrap.scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.tbl-wrap.scroll thead th{position:static}
/* Tabellen als direkte Kinder einer Karte laufen bis an den Kartenrand */
.card > table, .card > .tbl-wrap{margin-left:-24px; margin-right:-24px; width:calc(100% + 48px)}
.card > .tbl-wrap > table{width:100%}
.card > table th:first-child, .card > table td:first-child, .card > .tbl-wrap > table th:first-child, .card > .tbl-wrap > table td:first-child{padding-left:24px}
.card > table th:last-child, .card > table td:last-child, .card > .tbl-wrap > table th:last-child, .card > .tbl-wrap > table td:last-child{padding-right:24px}
.card > table:last-child, .card > .tbl-wrap:last-child{margin-bottom:-8px}
.card > div > table th:first-child, .card > div > table td:first-child{padding-left:0}
.card > div > table th:last-child, .card > div > table td:last-child{padding-right:0}
/* Kopfzeile bleibt unter der Kopfleiste stehen, solange die Tabelle im Bild ist */
thead th{position:sticky; top:var(--topbar-h); z-index:2}
.page-einstellungen thead th{top:calc(var(--topbar-h) + 46px)}
.modal thead th{top:0}
td form.inline .btn{margin-right:4px}
td input[type=text], td input[type=number], td input[type=date], td input[type=password], td select{height:var(--ctl-h-sm); font-size:12.5px}
td .flex{gap:6px}

/* Gruppierung je Sorte in der Übersicht */
.loc-table tbody tr:last-child td{border-bottom:0}
.loc-table td.skuname .mut{font-weight:500; color:var(--muted)}
.loc-table td.rec{min-width:260px; max-width:380px}
.rec{font-size:13px}
.rec .sub{font-size:12.5px; color:var(--ink2)}
.rec .btn{height:var(--ctl-h-sm); padding:0 10px; font-size:12px}

/* ---------------------------------------------------------------- Status-Pillen (Symbol + Text, nie Farbe allein) */
.st{display:inline-flex; align-items:center; gap:5px; height:22px; border-radius:999px; padding:0 9px; font-size:12px; font-weight:600; white-space:nowrap; line-height:1; vertical-align:middle}
.st-good{background:var(--good-soft); color:var(--good-text)}
.st-warn{background:var(--warn-soft); color:var(--warn-text)}
.st-serious{background:var(--serious-soft); color:var(--serious-text)}
.st-critical{background:var(--critical-soft); color:var(--critical-text)}
.st-neutral{background:var(--neutral-soft); color:var(--neutral-text)}
.st-info{background:var(--info-soft); color:var(--info-text)}
button.st{border:0; cursor:pointer; font:inherit; font-size:12px; font-weight:600}

/* Lagerort-Label (Farbe je Lager) */
.loc-badge{display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:999px; font-size:12px; font-weight:600; white-space:nowrap; line-height:1; vertical-align:middle; background:var(--neutral-soft); color:var(--ink2); border:1px solid #d6d3cb}
.loc-badge.loc-AA{background:#fdebd9; color:#a34a0b; border-color:#f4b27e}
.loc-badge.loc-FBA-DE{background:#e3eef9; color:#155a9c; border-color:#9dc1e6}
.loc-badge.loc-PL{background:#efeeea; color:var(--ink2); border-color:#d6d3cb}
.loc-badge.loc-SUP-BUFFER{background:#f4f1ea; color:#6b5a2e; border-color:#dccfb3}
.tile .lbl .loc-badge{margin:-2px 0}
.loc-line{display:flex; flex-wrap:wrap; gap:4px 12px}
.loc-item{white-space:nowrap}
.loc-item .loc-badge{height:20px; font-size:11.5px; padding:0 8px; margin-right:2px}

/* ---------------------------------------------------------------- Reichweite */
.meter{width:120px}
.meter .bar{height:6px; border-radius:3px; overflow:visible; position:relative; background:var(--neutral-soft)}
.meter .bar i{display:block; height:100%; border-radius:3px; max-width:100%}
.meter .lb{font-size:12px; color:var(--ink2); margin-top:5px; font-variant-numeric:tabular-nums}
.meter .op{position:absolute; top:-3px; bottom:-3px; width:1.5px; background:var(--ink2); opacity:.6}
.m-critical .bar{background:var(--critical-soft)} .m-critical .bar i{background:var(--critical)}
.m-serious .bar{background:var(--serious-soft)} .m-serious .bar i{background:var(--serious)}
.m-warn .bar{background:var(--warn-soft)} .m-warn .bar i{background:var(--warn)}
.m-good .bar{background:var(--good-soft)} .m-good .bar i{background:var(--good)}
.m-neutral .bar{background:var(--neutral-soft)} .m-neutral .bar i{background:var(--axis)}

/* ---------------------------------------------------------------- Toast & Spinner */
#toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(8px); background:var(--ink); color:#fff; border-radius:10px; padding:10px 16px; font-size:13px; opacity:0; pointer-events:none; transition:all .25s; z-index:90; max-width:90vw; box-shadow:0 8px 24px rgba(20,20,20,.18)}
#toast.show{opacity:1; transform:translateX(-50%)}
#toast.warn{background:#6b4e00}
#toast.error{background:#8f2424}
.spin{display:inline-block; width:12px; height:12px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:sp .7s linear infinite; vertical-align:-2px; margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------------- Modal */
.modal{display:none; position:fixed; inset:0; background:rgba(20,20,20,.45); z-index:80; align-items:center; justify-content:center; padding:20px}
.modal.open{display:flex}
.modal .card{max-width:600px; width:100%; max-height:88vh; overflow:auto; box-shadow:0 16px 48px rgba(20,20,20,.22)}

/* ---------------------------------------------------------------- Formulare */
input[type=text],input[type=number],input[type=email],input[type=password],input[type=date],input[type=file],select,textarea{
  height:var(--ctl-h); border:1px solid var(--line2); background:#fff; border-radius:var(--radius-sm); padding:0 10px; font:inherit; font-size:13px; color:var(--ink); max-width:100%; transition:border-color .15s, box-shadow .15s}
textarea{height:auto; padding:8px 10px}
input[type=file]{padding:5px 10px; line-height:1}
input[type=number]{width:110px; text-align:right; font-variant-numeric:tabular-nums}
input[type=date]{width:150px; font-variant-numeric:tabular-nums}
select{padding-right:28px; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%235b5955' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat:no-repeat; background-position:right 9px center}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-ring)}
input[disabled], select[disabled]{background:var(--surface-2); color:var(--ink2)}
input::placeholder{color:var(--muted)}
input[type=checkbox]{accent-color:var(--brand); width:14px; height:14px; vertical-align:-2px; margin-right:4px}
label.lbl{display:block; font-size:12px; color:var(--ink2); margin-bottom:4px; line-height:1.3}
.form-row{display:flex; gap:12px 16px; flex-wrap:wrap; align-items:flex-end}
.form-row > div{display:flex; flex-direction:column}
.form-row > div > label:not(.lbl){height:var(--ctl-h); display:inline-flex; align-items:center; font-size:13px}
form.inline{display:inline}
.form-block{padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--line)}
.inp-sm{width:80px !important}
.inp-md{width:160px}
.inp-lg{width:260px}

/* ---------------------------------------------------------------- Leerer Zustand, Rechnung, Listen */
.empty{color:var(--muted); font-size:13px; padding:20px 12px; text-align:center; border:1px dashed var(--line2); border-radius:var(--radius-sm)}
details{border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px 12px; margin-top:8px; background:#fff}
details summary{cursor:pointer; font-size:13px; font-weight:600; color:var(--ink2); list-style-position:inside}
details summary:hover{color:var(--ink)}
details ul{list-style:none; padding-left:0; margin-top:6px}
details li{font-size:13px; padding:4px 0; display:flex; gap:12px; border-bottom:1px dashed var(--line)}
details li:last-child{border-bottom:0}
details li .k{color:var(--ink2); flex:1}
details li .v{font-variant-numeric:tabular-nums; font-weight:600; text-align:right}
details details{margin:4px 0 4px 12px; padding:4px 10px}
.explain-inline{border:0; padding:0; background:transparent}
.kpi-list{list-style:none}
.kpi-list li{display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px dashed var(--line); font-size:13px}
.kpi-list li:last-child{border-bottom:0}
.kpi-list b{font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right}

/* ---------------------------------------------------------------- Anmeldung */
.login-page{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px}
.login-wrap{width:100%; max-width:400px; margin:0 auto}
.login-wrap .card{padding:32px}
.login-wrap .logo{flex-direction:column; gap:12px; text-align:center; margin-bottom:24px; white-space:normal; font-size:17px}
.login-wrap .logo .dot{width:44px; height:44px; border-radius:12px; font-size:19px}
.login-wrap .logo small{display:block; margin:4px 0 0; font-size:12.5px}
.login-wrap input{width:100%; margin-bottom:14px}
.login-wrap .btn{width:100%}
.login-wrap .footer-note{margin-top:20px}
.login-wrap h2{margin-bottom:4px; font-size:17px}
.err{background:var(--critical-soft); color:var(--critical-text); border-radius:var(--radius-sm); padding:9px 12px; font-size:13px; margin-bottom:14px}
.ok-box{background:var(--good-soft); color:var(--good-text); border-radius:var(--radius-sm); padding:9px 12px; font-size:13px; margin-bottom:14px}

/* ---------------------------------------------------------------- Diagramme */
.chart{width:100%; height:320px}
.chart-events{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:8px; font-size:12px; color:var(--ink2)}
.chart-events .lbl{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; margin-right:4px}
.ev-chip{display:inline-flex; gap:5px; align-items:center; background:#fbf2dc; border:1px solid #f0dca5; color:#6b4e00; border-radius:999px; padding:2px 9px; white-space:nowrap}
.ev-chip small{color:#8a6a1a; font-size:11px}
.chart.sm{height:260px}

/* ---------------------------------------------------------------- Vorschau E-Mail / Slack, Protokolle */
.preview{border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px; font-size:13px; background:#fff}
.preview .hdr{font-weight:600; margin:8px 0 6px}
pre.log{font-size:12px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px; overflow:auto; max-height:260px; white-space:pre-wrap; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; line-height:1.5}

/* ---------------------------------------------------------------- Schnittstellen */
.iface-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px}
.iface-card{border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px; background:#fff; display:flex; flex-direction:column}
.iface-card form{display:flex; flex-direction:column; flex:1}
.iface-card .iface-actions{margin-top:auto; padding-top:12px}
.iface-head{display:flex; align-items:center; justify-content:space-between; gap:6px 8px; margin-bottom:12px; flex-wrap:wrap}
.iface-head b{font-size:14px}
.iface-field{margin-bottom:10px}
.iface-field .lbl{display:flex; flex-wrap:wrap; gap:0 4px}
.iface-inp{flex:1; min-width:0; width:100%}

/* ---------------------------------------------------------------- Responsiv */
@media (max-width:1100px){
  .logo small{display:none}
}
@media (max-width:1024px){
  :root{--gutter:16px}
  .card{padding:16px}
  .card > table, .card > .tbl-wrap{margin-left:-16px; margin-right:-16px; width:calc(100% + 32px)}
  .card > table th:first-child, .card > table td:first-child, .card > .tbl-wrap > table th:first-child, .card > .tbl-wrap > table td:first-child{padding-left:16px}
  .card > table th:last-child, .card > table td:last-child, .card > .tbl-wrap > table th:last-child, .card > .tbl-wrap > table td:last-child{padding-right:16px}
  .tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .tbl-wrap thead th{position:static}
  .head-in{flex-wrap:wrap; padding-top:8px; padding-bottom:8px; row-gap:8px}
  .head-right{margin-left:auto; flex-wrap:wrap; justify-content:flex-end; row-gap:8px}
  .loc-table td.rec{min-width:200px}
  .meter{width:100px}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:820px){
  .g3, .g2, .grid.g2{grid-template-columns:1fr}
  .iface-grid{grid-template-columns:1fr}
  .card-head .sub{text-align:left; flex-basis:100%}
}
@media (max-width:640px){
  .g4{grid-template-columns:1fr}
  .head-right{flex-wrap:wrap}
  .meter{width:96px}
}

/* ---------------------------------------------------------------- Druck */
@media print{
  @page{size:A4; margin:16mm}
  header, .navbar, nav, .no-print, #toast, .sync, .footer-note, .subnav{display:none !important}
  body{background:#fff; color:#000; font-size:11pt}
  .wrap{padding:0; max-width:none}
  .card{box-shadow:none; border:1px solid #bbb; break-inside:avoid; padding:12pt}
  thead th{position:static; color:#333}
  td, th{border-color:#ccc}
  tbody tr:hover > td{background:transparent}
  .st, .loc-badge{border:1px solid #999; background:#fff !important; color:#000 !important}
  a{color:inherit; text-decoration:none}
}

/* ---------------------------------------------------------------- Mobil (Telefon) */
@media (max-width:760px){
  :root{--gutter:12px}
  .head-in{min-height:0; padding-top:8px; padding-bottom:8px; display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:8px; row-gap:8px; align-items:center}
  .logo{font-size:15px; grid-column:1; grid-row:1; min-width:0; overflow:hidden; text-overflow:ellipsis}
  .head-out{grid-column:2; grid-row:1; justify-self:end}
  .head-right{grid-column:1 / -1; grid-row:2; margin-left:0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center}
  .head-right .kw{display:none}
  .head-right .role-badge{min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; display:inline-flex; padding:0 10px}
  .role-badge .mut{display:none}
  .head-right form.inline{justify-self:end}
  .head-right .btn, .head-out .btn{padding:0 10px; font-size:12px}
  .head-right:not(:has(form)){grid-template-columns:1fr}
  .tabs{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .sync{display:flex; flex-wrap:nowrap; overflow-x:auto; gap:6px; padding-bottom:4px; scrollbar-width:none; margin-left:calc(-1 * var(--gutter)); margin-right:calc(-1 * var(--gutter)); padding-left:var(--gutter); padding-right:var(--gutter)}
  .sync::-webkit-scrollbar{display:none}
  .chip{height:24px; font-size:11.5px; padding:0 9px}
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .tile{padding:12px 14px}
  .tile .val, .val{font-size:22px}
  .tile .delta{font-size:12px}
  .card{padding:14px}
  .card-head{flex-wrap:wrap; gap:8px}
  .card-head h2{font-size:15px}
  h1{font-size:18px}

  /* Tabelle „Bestand & Reichweite“ als Karten je Sorte und Lager */
  .card > .tbl-wrap:has(> .loc-table), .card > .loc-table{margin:0; width:100%}
  .loc-table, .loc-table tbody, .loc-table tr, .loc-table td{display:block; width:100%}
  .loc-table thead{display:none}
  .loc-table tr{border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:10px; background:var(--surface); position:relative}
  .loc-table td{border:0; padding:4px 0; display:flex; justify-content:space-between; align-items:center; gap:12px; text-align:right}
  .loc-table tr.grp-first td, .loc-table tr.grp-next td, .loc-table tr.grp-last td{border:0}
  .loc-table td::before{content:attr(data-label); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; text-align:left; flex:none}
  .loc-table td.skuname{display:block; text-align:left; padding-bottom:8px; padding-right:130px}
  .loc-table td.skuname::before{display:none}
  .loc-table td.skuname a, .loc-table td.skuname .mut{font-size:15px}
  .loc-table td.loc{position:absolute; top:10px; right:12px; padding:0; width:auto}
  .loc-table td.loc::before{display:none}
  .loc-table td.num{font-size:15px; font-weight:600}
  .loc-table td.num{flex-wrap:wrap; row-gap:0}
  .loc-table td.num .chain{font-weight:400; margin:0; flex-basis:100%; text-align:right}
  .loc-table td.reach .meter{width:150px}
  .loc-table td.rec{display:block; text-align:left; padding-top:8px; margin-top:6px; border-top:1px dashed var(--line); min-width:0}
  .loc-table td.rec::before{display:block; margin-bottom:4px}
  .loc-table tbody tr:hover > td{background:transparent}

  /* Formulare und Kopfzeilen von Karten */
  .form-row > div{flex:1 1 100%}
  .form-row input, .form-row select{width:100%}
  .flex{flex-wrap:wrap}
  .subnav{overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none}
  .chart{height:260px}
  .chart.sm{height:220px}
  .footer-note{font-size:11px}
  /* Alle übrigen Tabellen scrollen innerhalb der Karte statt die Seite zu verbreitern */
  .card table:not(.loc-table){display:block; overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch}
  .card table:not(.loc-table) thead th{position:static}
  .loc-badge{white-space:normal; text-align:center; line-height:1.2}
}