/* ============================================================
   Better Objects — Internes Betriebs-Tool · Design System
   ============================================================ */

:root {
  /* Flächen */
  --bg: #f7f8f5;
  --bg-soft: #eef0ea;
  --bg-sunken: #f2f3ef;
  --surface: #ffffff;

  /* Text */
  --fg: #101713;
  --fg-2: #545a52;
  --fg-muted: #8b9088;

  /* Linien */
  --line: #e4e6df;
  --line-strong: #d1d4cb;

  /* Signalfarben */
  --accent: #1f6d4c;
  --accent-soft: #e8f2ec;
  --accent-fg: #0f4d33;
  --warn: #9a7420;
  --warn-soft: #faf2de;
  --danger: #b23c3c;
  --danger-soft: #fbeaea;
  --ok: #1a7a3c;
  --ok-soft: #e6f4ea;

  /* Radien – bewusst nur drei Stufen */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* Schatten – nur für schwebende Ebenen, Flächen bleiben flach */
  --shadow-sm: 0 1px 2px rgba(16, 23, 19, .04);
  --shadow: 0 6px 20px rgba(16, 23, 19, .07);
  --shadow-lg: 0 18px 48px rgba(16, 23, 19, .16);

  /* Typografische Skala */
  --text-xs: .72rem;
  --text-sm: .8125rem;
  --text-base: .9rem;
  --text-md: 1rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.5rem;
  --text-display: 1.75rem;

  /* Abstände */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* Bedienhöhen */
  --control-h: 38px;
  --control-h-sm: 32px;

  --font: 'Figtree', 'Inter', system-ui, sans-serif;
  --font-mono: 'Anonymous Pro', ui-monospace, monospace;

  --grid-col: 200px;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.5;
  min-height: 100vh;
}

.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* --- Auth --- */
body.auth-locked .app-header,
body.auth-locked .main { display: none; }
body:not(.auth-locked) .auth-screen { display: none; }

.auth-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-card {
  width: min(380px, 100%); display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); padding: 32px; box-shadow: var(--shadow-lg);
}
.auth-logo { width: 132px; height: auto; margin-bottom: 4px; }
.auth-title { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 10px; }
.auth-card label { color: var(--fg-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; margin-top: 8px; }
.auth-card button { margin-top: 14px; }
.auth-card button:disabled { opacity: .6; cursor: wait; }
.auth-help { color: var(--fg-muted); font-size: .82rem; line-height: 1.45; margin: 6px 0 0; }
.auth-card input {
  height: 44px; border: 1px solid var(--line-strong); border-radius: var(--radius-full);
  padding: 0 16px; font: inherit; outline: none;
}
.auth-card input:focus { border-color: var(--accent); }
.auth-card button {
  height: 44px; border: none; border-radius: var(--radius-full);
  background: var(--fg); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.auth-card button:hover { background: var(--accent); }
.auth-error { color: var(--danger); font-size: .85rem; min-height: 1em; }

/* --- Header --- */
.app-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(246, 247, 244, .9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: 1240px; margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; gap: 18px;
}
.brand { position: relative; flex-shrink: 0; }
.brand-btn { display: flex; align-items: center; gap: 8px; background: transparent; border: none; cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm); }
.brand-btn:hover { background: var(--bg-soft); }
.brand-logo { height: 30px; width: auto; }
.brand-sub { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }
.brand-caret { color: var(--fg-muted); transition: transform .15s var(--ease); }
.brand-btn[aria-expanded="true"] .brand-caret { transform: rotate(180deg); }
.brand-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 190px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; display: none; z-index: 60; }
.brand-menu.open { display: block; animation: fadeUp .15s var(--ease) both; }
.brand-menu-head { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-muted); font-weight: 700; padding: 6px 10px 4px; }
.menu-item { display: block; width: 100%; text-align: left; background: transparent; border: none; font: inherit; font-weight: 600; font-size: .9rem; color: var(--fg); padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.menu-item:hover { background: var(--bg-soft); }
.menu-item-feature { display: flex; align-items: center; gap: 9px; }
.menu-item-dot { width: 12px; height: 12px; border-radius: 50%; background: #7d9c57; box-shadow: inset 0 0 0 2px rgba(255,255,255,.5), 0 0 0 1px var(--line-strong); }

.app-nav { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; }
.nav-btn {
  border: none; background: transparent; color: var(--fg-2);
  font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer;
  padding: 8px 14px; border-radius: var(--radius-full); transition: .15s var(--ease);
}
.nav-btn:hover { background: var(--bg-soft); color: var(--fg); }
.nav-btn.active { background: var(--fg); color: #fff; }

.header-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.sync-status { font-size: .72rem; font-weight: 600; color: var(--ok); display: flex; align-items: center; gap: 6px; }
.sync-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.sync-status.offline { color: var(--fg-muted); }
.sync-status.offline::before { background: var(--fg-muted); }

.scale-controls { display: flex; border: 1px solid var(--line-strong); border-radius: var(--radius-full); overflow: hidden; }
.scale-btn { border: none; background: var(--surface); color: var(--fg-2); font: inherit; font-weight: 600; font-size: .78rem; width: 30px; height: 28px; cursor: pointer; }
.scale-btn.active { background: var(--fg); color: #fff; }

/* --- Main / Sections --- */
.main { padding: 28px 24px 80px; }
.main.is-invoice { background: #ededed; }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.section-head h1 { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; }
.section-sub { color: var(--fg-muted); font-size: .9rem; margin-top: 2px; }
.group-heading { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-muted); margin: 26px 0 10px; font-weight: 700; }
.hint { color: var(--fg-muted); font-size: .85rem; margin-bottom: 14px; }
.toolbar { margin-bottom: 16px; }
.inventory-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.inventory-toolbar > div, .sort-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-muted); font-weight: 700; }

/* --- Buttons --- */
.btn {
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg);
  font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer;
  padding: 9px 16px; border-radius: var(--radius-full); transition: .15s var(--ease);
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.btn:hover { border-color: var(--fg); }
.btn-primary { background: var(--fg); color: #fff; border-color: var(--fg); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--bg-soft); border-color: transparent; }
.btn-danger-ghost { border-color: transparent; background: transparent; color: var(--danger); }
.btn-danger-ghost:hover { border-color: transparent; background: var(--danger-soft); }
.btn-sm { padding: 6px 12px; font-size: .82rem; }
.btn.is-disabled, .btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-back { padding-left: 8px; }

/* Segmented / chips */
.segmented { display: inline-flex; background: var(--bg-soft); border-radius: var(--radius-full); padding: 3px; gap: 2px; }
.segmented.small .seg { font-size: .82rem; padding: 5px 12px; }
.delivery-type-controls { flex-wrap: wrap; border-radius: var(--radius); }
.seg { border: none; background: transparent; color: var(--fg-2); font: inherit; font-weight: 600; font-size: .9rem; padding: 7px 16px; border-radius: var(--radius-full); cursor: pointer; }
.seg.active { background: var(--surface); color: var(--fg); box-shadow: var(--shadow-sm); }

.chip { border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg-2); font: inherit; font-weight: 600; font-size: .82rem; padding: 6px 13px; border-radius: var(--radius-full); cursor: pointer; }
.chip:hover { border-color: var(--fg); }
.chip.active { background: var(--fg); color: #fff; border-color: var(--fg); }
.chip-clear { border-style: dashed; }

/* --- KPI --- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 24px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); }
.kpi-value { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; }
.kpi-label { color: var(--fg-muted); font-size: .82rem; margin-top: 2px; }
.kpi-warn .kpi-value { color: var(--warn); }

.dash-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.quick-actions { display: flex; flex-direction: column; gap: 10px; }
.quick-actions .btn { justify-content: flex-start; }

/* --- Panels --- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); margin-bottom: 16px; }
.panel-narrow { max-width: 560px; }
.panel-accent { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.panel-head-bare { margin-bottom: 14px; }
.panel-head h2, .panel h2 { font-size: 1.05rem; font-weight: 700; }
.pill { background: var(--bg-soft); color: var(--fg-2); font-size: .78rem; font-weight: 700; padding: 3px 12px; border-radius: var(--radius-full); }
.pill-warn { background: var(--warn-soft); color: var(--warn); }

/* --- Empty state --- */
.empty-state { text-align: center; padding: 48px 20px; color: var(--fg-muted); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.empty-state.small { padding: 28px 16px; }
.empty-state strong { color: var(--fg); font-size: 1rem; }
.empty-state p { font-size: .9rem; max-width: 420px; }
.empty-state .btn { margin-top: 8px; }

/* --- Filterbar --- */
.filterbar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-sm); }
.filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filter-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.filter-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-muted); font-weight: 700; margin-right: 2px; }
.filter-sep { width: 1px; height: 22px; background: var(--line); }
.filter-search { margin-left: auto; }
.search-input { border: 1px solid var(--line-strong); border-radius: var(--radius-full); padding: 7px 14px; font: inherit; font-size: .9rem; outline: none; min-width: 180px; }
.search-input:focus { border-color: var(--accent); }
.color-swatches { display: flex; gap: 5px; flex-wrap: wrap; }
.color-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line-strong); cursor: pointer; padding: 0; transition: transform .12s var(--ease); }
.color-swatch:hover { transform: scale(1.12); }
.color-swatch.active { box-shadow: 0 0 0 2px var(--fg); transform: scale(1.12); }

/* --- Product grid / card --- */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--grid-col), 1fr)); gap: 14px; }
.product-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; animation: fadeUp .3s var(--ease) both; }
.product-card.is-zero { opacity: .62; }
.card-image-wrap { position: relative; aspect-ratio: 1 / 1; background: linear-gradient(160deg, #fbfbf8, #eef0ea); display: flex; align-items: flex-end; justify-content: center; padding: 14px; }
.card-image { max-width: calc(80% * var(--s, 1)); max-height: calc(88% * var(--s, 1)); object-fit: contain; object-position: bottom; filter: drop-shadow(0 8px 12px rgba(0,0,0,.1)); }
.card-size-badge { position: absolute; top: 8px; right: 8px; background: rgba(14,21,18,.8); color: #fff; font-size: .66rem; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-full); }
.card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.card-model { font-weight: 700; font-size: .95rem; }
.card-color-row { display: flex; align-items: center; gap: 6px; color: var(--fg-2); font-size: .82rem; }
.color-dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-strong); flex-shrink: 0; }
/* Sonderanfertigung: sagt auf der Karte, für wen sie gemacht wurde. */
.card-custom-note { font-size: .74rem; color: var(--fg-muted); font-weight: 600; }

/* --- Qty controls --- */
.qty-controls { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.qty-btn { width: 30px; height: 30px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--radius-sm); font-size: 1.05rem; font-weight: 700; color: var(--fg-2); cursor: pointer; line-height: 1; }
.qty-btn:hover { border-color: var(--fg); color: var(--fg); }
.qty-input { flex: 1; min-width: 44px; height: 30px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); text-align: center; font: inherit; font-weight: 600; outline: none; }
.qty-input:focus { border-color: var(--accent); }

/* --- Lager grouped cards --- */
.lager-grid { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; }
.lager-card { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; cursor: pointer; box-shadow: var(--shadow-sm); transition: .15s var(--ease); display: flex; flex-direction: column; gap: 10px; flex: none; min-width: 150px; max-width: 400px; animation: fadeUp .3s var(--ease) both; }
.lager-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--line-strong); }
.lager-thumbs { position: relative; height: 96px; display: flex; align-items: flex-end; justify-content: center; }
.lager-thumb { height: calc(86px * var(--s, 1)); width: auto; object-fit: contain; margin: 0 -5px; filter: drop-shadow(0 6px 8px rgba(0,0,0,.12)); }
.lager-thumb-more { align-self: flex-end; margin-left: 4px; min-width: 30px; height: 30px; padding: 0 8px; border-radius: var(--radius-full); background: var(--bg-soft); color: var(--fg-2); border: 1px solid var(--line); box-shadow: var(--shadow-sm); display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; flex: none; }
.lager-card-title { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.lager-swatch { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-strong); }
.lager-model-badge { width: 22px; height: 22px; border-radius: 6px; background: var(--fg); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; }
.lager-card-count { font-size: 1.3rem; font-weight: 700; }
.lager-card-sub { color: var(--fg-muted); font-size: .78rem; line-height: 1.35; }

/* --- Kompakte Bestandslisten --- */
.inventory-summary-list { display: flex; flex-direction: column; gap: 8px; }
.inventory-summary-row { width: 100%; display: grid; grid-template-columns: minmax(160px, .8fr) minmax(280px, 2fr) auto; align-items: center; gap: 18px; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 14px 16px; font: inherit; color: var(--fg); cursor: pointer; box-shadow: var(--shadow-sm); transition: .15s var(--ease); }
.inventory-summary-row:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-1px); }
.inventory-summary-main { display: flex; flex-direction: column; gap: 3px; }
.inventory-summary-title { display: flex; align-items: center; gap: 8px; }
.inventory-summary-count { color: var(--fg-muted); font-size: .82rem; }
.inventory-summary-details { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inventory-detail-label { color: var(--fg-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; margin-right: 2px; }
.inventory-detail { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: var(--radius-full); background: var(--bg-soft); color: var(--fg-2); font-size: .78rem; }
.inventory-detail strong { color: var(--fg); }
.inventory-summary-arrow { color: var(--fg-muted); font-size: 1.45rem; line-height: 1; }

/* --- Batch (Produktion) --- */
.batch-list { display: flex; flex-direction: column; gap: 14px; }
.batch-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); }
.batch-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.batch-card.is-done { opacity: .72; }
.batch-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.batch-title { flex: 1; min-width: 0; }
.batch-name { border: none; border-bottom: 1px dashed transparent; background: transparent; font: inherit; font-size: 1.1rem; font-weight: 700; width: 100%; padding: 2px 0; outline: none; }
.batch-name:hover:not(:disabled) { border-bottom-color: var(--line-strong); }
.batch-name:focus { border-bottom-color: var(--accent); }
.batch-meta { color: var(--fg-muted); font-size: .78rem; }
.batch-actions { display: flex; gap: 6px; flex-shrink: 0; }
.batch-note { display: block; width: 100%; border: none; border-bottom: 1px dashed var(--line-strong); background: transparent; font: inherit; font-size: .85rem; color: var(--fg-2); padding: 6px 0; margin: 8px 0; outline: none; }
.batch-note:focus { border-bottom-color: var(--accent); }
.batch-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.batch-row { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.batch-thumb { width: auto; max-width: 46px; height: calc(40px * var(--s, 1)); object-fit: contain; object-position: bottom; align-self: flex-end; flex-shrink: 0; }
.batch-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.batch-row-main strong { font-size: .9rem; }
.batch-row-main span { color: var(--fg-muted); font-size: .78rem; }
.batch-row .qty-controls { width: 118px; flex-shrink: 0; }
.batch-empty { color: var(--fg-muted); font-size: .85rem; padding: 12px; text-align: center; }
.batch-editor { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.batch-editor .filterbar { box-shadow: none; }

/* --- Customer list / cards --- */
.customer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.customer-card { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; cursor: pointer; box-shadow: var(--shadow-sm); transition: .15s var(--ease); display: flex; flex-direction: column; gap: 8px; }
.customer-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.customer-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.customer-card-top strong { font-size: 1.05rem; }
.customer-card-sub { color: var(--fg-muted); font-size: .82rem; }
.customer-card-stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: .8rem; color: var(--fg-2); margin-top: 4px; }
.customer-card-stats .stat-warn { color: var(--warn); }

/* --- Badges --- */
.badge { font-size: .7rem; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-full); white-space: nowrap; }
.badge-kommission { background: var(--accent-soft); color: var(--accent-fg); }
.badge-direkt { background: #e7eef7; color: #2b4d78; }
.badge-markt { background: #fff0d7; color: #8a5a12; }
.badge-miete { background: #eee8fb; color: #624398; }
.badge-ankauf { background: #fbe7ed; color: #8b3550; }
.badge-ok { background: var(--accent-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-once { background: #eee8fb; color: #624398; }
.badge-stock { background: var(--bg-soft); color: var(--fg-2); }

/* --- Detail head + subtabs --- */
.detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.detail-title { display: flex; align-items: center; gap: 12px; flex: 1; }
.detail-title h1 { font-size: 1.5rem; }
.subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; flex-wrap: wrap; }
.subtab { border: none; background: transparent; font: inherit; font-weight: 600; font-size: .9rem; color: var(--fg-2); padding: 10px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px; }
.subtab:hover { color: var(--fg); }
.subtab.active { color: var(--accent-fg); border-bottom-color: var(--accent); }
.tab-badge { background: var(--warn); color: #fff; font-size: .66rem; font-weight: 700; border-radius: var(--radius-full); padding: 1px 7px; }

/* --- Mini rows / stock --- */
.stock-list { display: flex; flex-direction: column; gap: 6px; }
.customer-stock-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 10px; }
.customer-stock-group { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; background: var(--bg); }
.customer-stock-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.customer-stock-group-head > span { display: flex; align-items: center; gap: 8px; }
.customer-stock-group-head > strong { font-size: .82rem; color: var(--fg-2); }
.mini-rows { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; }
.mini-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius-sm); background: var(--bg); }
.mini-thumb { width: auto; max-width: 38px; height: calc(32px * var(--s, 1)); object-fit: contain; object-position: bottom; align-self: flex-end; flex-shrink: 0; }
.mini-label { flex: 1; font-size: .88rem; }
.mini-qty { font-size: .9rem; }
.chip-item { background: var(--bg-soft); border-radius: var(--radius-full); padding: 3px 10px; font-size: .78rem; color: var(--fg-2); }
.chip-item.is-packed { background: var(--accent-soft); color: var(--ok); }
.chip-item.is-stock { background: #eaf0f7; color: #35546d; }

/* --- Delivery summary --- */
.delivery-summary { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 10px; }
.delivery-summary:last-child { margin-bottom: 0; }
.delivery-summary.offen { border-left: 3px solid var(--warn); }
.delivery-summary.ausgeliefert { border-left: 3px solid var(--accent); }
.delivery-summary.offen.priority-high { border-left: 4px solid var(--danger); }
.delivery-summary.offen.priority-medium { border-left: 4px solid var(--warn); }
.delivery-summary.offen.priority-low { border-left: 4px solid var(--accent); }
.delivery-summary-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.delivery-purpose { display: block; margin-top: 3px; color: var(--fg); font-size: .84rem; font-weight: 600; }
.delivery-name-field { display: block; width: min(380px, 100%); margin-top: 10px; }
.delivery-name-field > span { display: block; margin-bottom: 4px; color: var(--fg-muted); font-size: .65rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.order-name-inline { display: block; width: min(380px, 100%); margin-top: 5px; padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg); font: inherit; font-size: .84rem; font-weight: 600; outline: none; }
.order-name-inline::placeholder { color: var(--fg-muted); font-weight: 500; }
.order-name-inline:hover { border-color: var(--fg-muted); }
.order-name-inline:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.delivery-note-field { margin-bottom: 14px; }
.delivery-column-table { flex: 1 0 100%; width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.delivery-column-head, .delivery-column-row { display: grid; grid-template-columns: 1.1fr .8fr 1.2fr 76px; gap: 12px; align-items: center; padding: 8px 11px; }
.delivery-column-head { background: var(--bg-soft); color: var(--fg-muted); font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.delivery-column-row { border-top: 1px solid var(--line); font-size: .82rem; }
.delivery-column-row > :last-child, .delivery-column-head > :last-child { text-align: right; }
.delivery-column-color { display: flex; align-items: center; gap: 7px; min-width: 0; }
.delivery-column-color i { width: 12px; height: 12px; flex: 0 0 12px; border: 1px solid rgba(0,0,0,.12); border-radius: 50%; }
.priority-control { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; padding: 4px 5px 4px 9px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--bg); }
.priority-control > span { color: var(--fg-muted); font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.priority-control select { border: 0; border-radius: var(--radius-full); background: var(--surface); padding: 4px 24px 4px 8px; color: var(--fg); font: inherit; font-size: .76rem; font-weight: 700; outline: none; }
.priority-control.priority-high { border-color: #efb8b8; background: var(--danger-soft); }
.priority-control.priority-medium { border-color: #ead6a3; background: var(--warn-soft); }
.priority-control.priority-low { border-color: #bcd7c8; background: var(--accent-soft); }
.packing-progress { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 8px; margin: 10px 0 12px; }
.packing-progress > div { display: flex; align-items: baseline; gap: 6px; padding: 9px 11px; border-radius: var(--radius-sm); background: var(--bg); }
.packing-progress strong { font-size: 1.05rem; }
.packing-progress span { color: var(--fg-muted); font-size: .72rem; }
.packing-progress .is-missing { background: var(--warn-soft); color: var(--warn); }
.packing-legend { display: flex; align-items: center; gap: 9px 18px; flex-wrap: wrap; margin: -3px 0 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-soft); color: var(--fg-2); font-size: .76rem; }
.packing-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; }
.legend-dot.is-packed { background: var(--ok); }
.legend-dot.is-stock { background: #557a9a; }
.legend-dot.is-missing { background: var(--warn); }
.packing-list { flex: 1 0 100%; width: 100%; display: flex; flex-direction: column; gap: 7px; }
.packing-row { display: grid; grid-template-columns: minmax(210px, 1.5fr) 68px 68px 96px minmax(95px, .7fr) auto; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.packing-row.is-complete { border-color: #bcd7c8; background: #f4faf7; }
.packing-product { display: flex; align-items: center; gap: 8px; min-width: 0; }
.packing-product strong { font-size: .84rem; }
.packing-metrics { display: contents; }
.packing-metric { display: flex; flex-direction: column; align-items: center; text-align: center; }
.packing-metric span { color: var(--fg-muted); font-size: .58rem; font-weight: 700; letter-spacing: .05em; line-height: 1.2; text-transform: uppercase; }
.packing-metric strong { font-size: .95rem; }
.packing-metric.is-packed strong { color: var(--ok); }
.packing-row-status { display: flex; justify-content: center; }
.packing-column-table { overflow-x: auto; }
.packing-column-head, .packing-column-row { display: grid; grid-template-columns: minmax(90px, 1fr) 72px minmax(105px, 1fr) 54px 54px 54px 78px minmax(150px, auto); gap: 9px; align-items: center; min-width: 800px; padding: 8px 11px; }
.packing-column-head { background: var(--bg-soft); color: var(--fg-muted); font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.packing-column-row { border-top: 1px solid var(--line); font-size: .79rem; }
.packing-column-row.is-complete { background: #f4faf7; }
.packing-column-row .is-packed { color: var(--ok); }
.packing-column-row .is-missing { color: var(--danger); }
.packing-column-row .packing-actions { justify-content: flex-end; }
.stock-separation-note { margin: 0 0 14px; padding: 12px 14px; border: 1px solid #c7d9cf; border-radius: var(--radius-sm); background: #f2f8f4; }
.stock-separation-note > div { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; }
.stock-separation-note strong { color: var(--accent-fg); }
.stock-separation-note span { color: var(--fg-2); font-weight: 650; }
.stock-separation-note p { margin: 5px 0 0; color: var(--fg-muted); font-size: .78rem; line-height: 1.45; }
.corrected-stock-collapsed { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); color: var(--fg-2); font-size: .82rem; }
.recorded-stock-details-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 10px; color: var(--fg-2); font-size: .82rem; }
.packing-status { padding: 3px 8px; border-radius: var(--radius-full); font-size: .68rem; font-weight: 700; white-space: nowrap; }
.packing-status.is-packed { background: var(--accent-soft); color: var(--ok); }
.packing-status.is-stock { background: #eaf0f7; color: #35546d; }
.packing-status.is-missing { background: var(--warn-soft); color: var(--warn); }
.packing-actions { display: flex; justify-content: flex-end; gap: 5px; flex-wrap: wrap; }
.packing-step-btn { min-width: 48px; justify-content: center; font-variant-numeric: tabular-nums; }
.packing-all-btn { justify-content: center; }
.packing-complete-group { flex: 1 0 100%; width: 100%; border-top: 1px solid #c7d9cf; background: #f4faf7; }
.packing-complete-toggle { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 10px; padding: 11px 14px; border: 0; background: transparent; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.packing-complete-toggle:hover { background: #edf7f1; }
.packing-complete-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.packing-complete-title i { width: 20px; height: 20px; display: inline-grid; place-items: center; flex: 0 0 20px; border-radius: 50%; background: var(--accent-soft); color: var(--ok); font-size: .7rem; font-style: normal; }
.packing-complete-title strong { font-size: .78rem; }
.packing-complete-count { color: var(--fg-muted); font-size: .7rem; white-space: nowrap; }
.packing-complete-toggle svg, .delivery-collapse-btn svg { transition: transform .16s var(--ease); }
.packing-complete-group.is-open .packing-complete-toggle svg, .delivery-collapse-btn.is-open svg { transform: rotate(180deg); }
.packing-complete-content { border-top: 1px solid #d9e8df; background: var(--surface); }
.packing-complete-content .packing-list { padding: 8px; }
.delivery-packed-items { display: flex; flex-direction: column; }
.packing-workflow-note { display: flex; align-items: flex-start; gap: 8px 16px; margin-bottom: 14px; padding: 12px 14px; border: 1px solid #c7d9cf; border-radius: var(--radius-sm); background: #f2f8f4; color: var(--fg-2); font-size: .82rem; line-height: 1.45; }
.packing-workflow-note strong { flex: 0 0 auto; color: var(--accent-fg); }
.delivery-workbench-list { display: flex; flex-direction: column; gap: 14px; }
.delivery-workbench { overflow: hidden; border: 1px solid var(--line); border-left: 4px solid var(--warn); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.delivery-workbench.priority-high { border-left-color: var(--danger); }
.delivery-workbench.priority-low { border-left-color: var(--accent); }
.delivery-workbench-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.delivery-workbench-head h2 { margin: 2px 0 7px; font-size: 1.1rem; }
.delivery-workbench-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--fg-muted); font-size: .75rem; }
.delivery-workbench-head-actions { display: flex; align-items: center; gap: 13px; flex: 0 0 auto; }
.delivery-package-total { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; }
.delivery-package-total strong { color: var(--accent-fg); font-size: 1.45rem; line-height: 1; }
.delivery-package-total span { margin-top: 4px; color: var(--fg-muted); font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.delivery-collapse-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: var(--radius-full); background: var(--surface); color: var(--fg-2); font: inherit; font-size: .7rem; font-weight: 700; cursor: pointer; }
.delivery-collapse-btn:hover { border-color: var(--fg-muted); color: var(--fg); }
.delivery-summary.is-collapsed .delivery-summary-head { margin-bottom: 0; }
.delivery-workbench.is-collapsed .delivery-workbench-head { border-bottom: 0; }
.delivery-pack-list { display: flex; flex-direction: column; }
.delivery-pack-row { display: grid; grid-template-columns: minmax(210px, 1.4fr) minmax(150px, .7fr) minmax(130px, .7fr) minmax(260px, auto); align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.delivery-pack-row:last-child { border-bottom: 0; }
.delivery-pack-row.is-complete { background: #f4faf7; }
.delivery-pack-product { display: flex; align-items: center; gap: 9px; min-width: 0; }
.delivery-pack-product strong { font-size: .88rem; }
.delivery-pack-counts { display: grid; grid-template-columns: repeat(2, minmax(58px, 1fr)); gap: 8px; }
.delivery-pack-counts span { display: flex; flex-direction: column; }
.delivery-pack-counts small { color: var(--fg-muted); font-size: .61rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.delivery-pack-counts strong { margin-top: 2px; font-size: .95rem; }
.delivery-workbench-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px; border-top: 1px solid var(--line); background: var(--bg-soft); }
.delivery-workbench-foot p { margin: 0; color: var(--fg-2); font-size: .8rem; }
.delivery-workbench-foot .row-actions { justify-content: flex-end; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.muted { color: var(--fg-muted); }
.editor-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--fg-2); }

/* --- Settle (Monatsabschluss) --- */
.settle-list { display: flex; flex-direction: column; gap: 8px; }
.settle-row { display: grid; grid-template-columns: 36px 1fr auto 120px auto auto; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.settle-have { color: var(--fg-muted); font-size: .8rem; }
.settle-price { color: var(--fg-2); font-size: .85rem; text-align: right; min-width: 64px; }
.settle-line { text-align: right; min-width: 72px; }
.settle-row .qty-controls { width: 120px; }
.settle-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.settle-sum { font-size: 1.05rem; }
.settle-sum strong { font-size: 1.2rem; }
.monthly-save-state { display: inline-flex; align-items: center; gap: 7px; margin: 2px 0 14px; color: var(--ok); font-size: .8rem; font-weight: 700; }
.monthly-save-state span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); }

/* --- Fields --- */
.fields { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.fields-2 { display: grid; grid-template-columns: 120px 1fr; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field > span { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-muted); font-weight: 700; }
.field input { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 9px 12px; font: inherit; outline: none; }
.field input:focus { border-color: var(--accent); }

/* --- Price rows --- */
.price-list { display: flex; flex-direction: column; gap: 8px; }
.price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.price-row:last-child { border-bottom: none; }
.price-label { font-weight: 600; }
.price-input-wrap { display: flex; align-items: center; gap: 4px; }
.price-input { width: 130px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 8px 10px; font: inherit; text-align: right; outline: none; }
.price-input:focus { border-color: var(--accent); }
.price-cur { color: var(--fg-muted); }
.price-label small { display: block; margin-top: 2px; color: var(--fg-muted); font-size: .72rem; font-weight: 500; }
.price-model-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.price-model-card { min-height: 112px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--fg); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.price-model-card:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.price-model-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.price-model-card strong { display: block; margin-bottom: 7px; font-size: .96rem; }
.price-model-card span { display: block; color: var(--fg-muted); font-size: .75rem; line-height: 1.4; }
.price-model-panel .panel-head { align-items: flex-start; }
.price-model-panel .panel-head .hint { margin-top: 5px; }

/* --- Filamentlager / Notion --- */
.filament-title-row { align-items: center; }
.filament-source-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.filament-source { display: inline-flex; align-items: center; gap: 7px; color: var(--fg-muted); font-size: .76rem; font-weight: 600; margin-right: 4px; }
.filament-source i { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-muted); }
.filament-source.live { color: var(--ok); }
.filament-source.live i { background: var(--ok); box-shadow: 0 0 0 4px var(--accent-soft); }
.filament-source.snapshot i { background: var(--warn); }
.filament-notice { margin: -4px 0 16px; padding: 10px 13px; border: 1px solid #ebd7a6; border-radius: var(--radius-sm); background: var(--warn-soft); color: #775b1d; font-size: .84rem; }
.dismissible-notice { position: relative; padding-right: 46px; }
.notice-close { position: absolute; top: 8px; right: 9px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.62); color: currentColor; font: inherit; font-size: 1.18rem; line-height: 1; cursor: pointer; opacity: .72; }
.notice-close:hover { background: rgba(255,255,255,.94); opacity: 1; }
.notice-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.filament-summary-kpis { grid-template-columns: 1.1fr repeat(4, 1fr); }
.filament-kpis { display: grid; grid-template-columns: 1.1fr repeat(5, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.filament-kpis > div { min-width: 0; background: var(--surface); padding: 16px 18px; display: flex; flex-direction: column; gap: 1px; }
.filament-kpis strong { font-size: 1.4rem; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filament-kpis span { color: var(--fg-muted); font-size: .76rem; }
.filament-kpis .is-warn strong { color: var(--warn); }
.filament-kpis .is-danger strong { color: var(--danger); }
.filament-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.filament-filters .seg { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; font-size: .82rem; }
.filament-filters .seg span { display: inline-flex; min-width: 19px; height: 19px; padding: 0 5px; align-items: center; justify-content: center; border-radius: var(--radius-full); background: rgba(14,21,18,.07); color: var(--fg-muted); font-size: .68rem; }
.filament-filters .seg.active span { background: var(--bg-soft); color: var(--fg); }
.filament-tools { display: flex; align-items: center; gap: 8px; }
.filament-tools .search-input { width: 220px; }
.filament-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.filament-card { min-width: 0; display: grid; grid-template-columns: 104px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); animation: fadeUp .28s var(--ease) both; transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease); }
.filament-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.filament-color { position: relative; min-height: 150px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--filament) 28%, #f7f8f5); overflow: hidden; }
.filament-color::after { content: ''; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(255,255,255,.56), transparent 48%, rgba(0,0,0,.05)); pointer-events: none; }
.filament-spool { position: relative; z-index: 1; width: 58px; height: 58px; border: 13px solid var(--filament); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.16), 0 8px 18px rgba(14,21,18,.16), 0 0 0 7px rgba(255,255,255,.8); }
.filament-spool::before, .filament-spool::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 26px; border-radius: 4px; background: rgba(255,255,255,.72); transform-origin: center; transform: translate(-50%, -50%) rotate(45deg); }
.filament-spool::after { transform: translate(-50%, -50%) rotate(-45deg); }
.filament-spool i { position: absolute; z-index: 2; left: 50%; top: 50%; width: 13px; height: 13px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px rgba(0,0,0,.13); transform: translate(-50%, -50%); }
.filament-hex { position: absolute; z-index: 2; left: 8px; bottom: 7px; padding: 2px 6px; border-radius: 5px; background: rgba(255,255,255,.82); color: #343a35; font-family: var(--font-mono); font-size: .66rem; font-weight: 700; backdrop-filter: blur(4px); }
.filament-card-body { min-width: 0; padding: 13px; display: flex; flex-direction: column; }
.filament-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 7px; }
.filament-card h2 { min-width: 0; font-size: .97rem; line-height: 1.25; text-transform: capitalize; overflow-wrap: anywhere; }
.filament-status { flex: none; padding: 2px 6px; border-radius: var(--radius-full); background: var(--accent-soft); color: var(--ok); font-size: .62rem; font-weight: 700; }
.filament-status.low { background: var(--warn-soft); color: var(--warn); }
.filament-status.empty { background: var(--danger-soft); color: var(--danger); }
.filament-stock { margin: auto 0 9px; display: flex; align-items: baseline; gap: 6px; }
.filament-stock strong { font-size: 1.75rem; letter-spacing: -.04em; }
.filament-stock span { color: var(--fg-muted); font-size: .72rem; }
.filament-supplier-row { margin: 0 0 9px; padding: 9px; display: grid; gap: 8px; border-radius: var(--radius-sm); background: var(--bg); }
.filament-supplier-row label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--fg-muted); font-size: .7rem; }
.filament-supplier-row select { max-width: 130px; padding: 4px 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); font: inherit; }
.filament-price { width: 86px; }
.filament-price input { width: 100%; height: 29px; padding: 0 24px 0 7px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); font: inherit; font-weight: 700; }
.filament-supplier-check { margin: 0 0 9px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--fg-muted); font-size: .65rem; }
.filament-supplier-check .supplier-status { padding: 3px 7px; }
.filament-meta { padding-top: 8px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--fg-muted); font-size: .72rem; }
.filament-card-links { display: flex; align-items: center; gap: 7px; }
.filament-card a { color: var(--accent-fg); font-weight: 700; text-decoration: none; }
.filament-card a:hover { text-decoration: underline; }
.filament-empty { opacity: .72; }
.filament-loading { min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--fg-muted); }
.filament-loading span { width: 30px; height: 30px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: filamentSpin .8s linear infinite; }
@keyframes filamentSpin { to { transform: rotate(360deg); } }

/* --- Tables / lists --- */
.list { display: flex; flex-direction: column; gap: 4px; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid transparent; font: inherit; text-align: left; cursor: pointer; }
.list-row:hover { border-color: var(--line-strong); }
.table-list { display: flex; flex-direction: column; gap: 6px; }
.table-row { display: grid; grid-template-columns: 1fr 2fr auto auto auto; align-items: center; gap: 14px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--shadow-sm); }
.table-row:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.tr-items { color: var(--fg-2); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-date { color: var(--fg-muted); font-size: .8rem; }
.tr-amount { text-align: right; }
.invoice-history { display: flex; flex-direction: column; gap: 6px; }
.invoice-list-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 7px; }
.invoice-list-entry > .table-row, .invoice-list-entry > .invoice-row { width: 100%; }
.invoice-list-delete { align-self: center; }
.invoice-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); font: inherit; text-align: left; cursor: pointer; }
.invoice-row:hover { border-color: var(--line-strong); }
.invoice-row-right { display: flex; align-items: center; gap: 14px; }

/* --- Aufträge: Bedarf + Auftragsliste --- */
.new-order-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.new-order-target-field { flex: 0 1 300px; min-width: 240px; }
.new-order-purpose-field { flex: 1 1 320px; min-width: 260px; }
.new-order-date-field { display: none; flex: 0 1 170px; }
.new-order-date-field.is-visible { display: flex; }
.select { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 9px 12px; font: inherit; background: var(--surface); outline: none; }
.select:focus { border-color: var(--accent); }

.chip-item.is-missing { background: var(--warn-soft); color: var(--warn); }
.tr-status { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }

/* --- Allgemeine Aufträge / Märkte --- */
.market-card .batch-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.market-date-inline { display: flex; align-items: center; gap: 8px; width: max-content; margin-top: 10px; color: var(--fg-muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.market-date-inline input { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); padding: 6px 9px; color: var(--fg); font: inherit; }
.market-editor { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.market-editor .filterbar { box-shadow: none; }
.market-picker-list { display: flex; flex-direction: column; gap: 6px; }
.market-picker-row { display: grid; grid-template-columns: 18px minmax(180px, 1fr) 100px 126px; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.market-picker-row.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.market-picker-dot { width: 16px; height: 16px; }
.market-picker-product { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.market-picker-product strong { font-size: .9rem; }
.market-picker-product span, .market-available { color: var(--fg-muted); font-size: .8rem; }
.market-picker-row .qty-controls { width: 126px; }
.market-editor-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.market-overview-head { align-items: flex-end; }
.market-overview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.market-overview-toolbar > span { color: var(--fg-muted); font-size: .8rem; font-weight: 700; }
.market-create-panel { margin-bottom: 16px; }
.market-create-form { display: grid; grid-template-columns: minmax(220px, 1fr) 180px auto; align-items: end; gap: 14px; }
.market-card-models { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.market-card-models .model-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --- Verkaufsliste: Bildschirm + A4-Druck --- */
.market-toolbar { width: min(210mm, 100%); margin: 0 auto 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.market-active-help { width: min(210mm, 100%); margin: 0 auto 14px; padding: 12px 14px; border: 1px solid #ebd7a6; border-radius: var(--radius-sm); background: var(--warn-soft); color: #775b1d; font-size: .86rem; }
.market-sheet { width: min(210mm, 100%); min-height: 297mm; margin: 0 auto; padding: 22mm 18mm; background: #fff; color: #111; box-shadow: 0 10px 40px rgba(0,0,0,.12); font-family: 'Inter', var(--font); }
.market-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; padding-bottom: 18px; border-bottom: 2px solid #111; }
.market-brand { display: block; margin-bottom: 10px; font-size: .7rem; font-weight: 700; letter-spacing: .18em; }
.market-sheet h1 { font-size: 2rem; line-height: 1; letter-spacing: -.03em; }
.market-sheet-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: .82rem; text-align: right; }
.market-sheet-meta strong { font-size: 1rem; }
.market-sheet-meta span { color: #666; }
.market-sheet-summary { display: grid; grid-template-columns: repeat(3, 1fr); margin: 24px 0 16px; border: 1px solid #d9d9d9; }
.market-sheet-summary > div { display: flex; flex-direction: column; padding: 14px 16px; border-right: 1px solid #d9d9d9; }
.market-sheet-summary > div:last-child { border-right: 0; }
.market-sheet-summary strong { font-size: 1.5rem; }
.market-sheet-summary span { color: #666; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.market-print-note { margin-bottom: 20px; color: #555; font-size: .82rem; }
.market-models { display: flex; flex-direction: column; gap: 22px; }
.market-model-group { break-inside: avoid; }
.market-model-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.market-model-head h2 { font-size: 1.1rem; }
.market-model-head span { color: #666; font-size: .75rem; }
.market-check-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .82rem; }
.market-check-table th { padding: 7px 8px; border-bottom: 1px solid #111; color: #555; font-size: .65rem; text-align: left; text-transform: uppercase; letter-spacing: .07em; }
.market-check-table td { height: 36px; padding: 6px 8px; border-bottom: 1px solid #e5e5e5; }
.market-check-table th:nth-child(2), .market-check-table td:nth-child(2) { width: 52px; }
.market-check-table th:nth-child(3), .market-check-table td:nth-child(3) { width: 110px; }
.market-check-col { width: 82px; text-align: center !important; }
.market-check-table input[type="checkbox"] { width: 20px; height: 20px; accent-color: #111; cursor: pointer; }
.market-check-table input[type="checkbox"]:disabled { opacity: 1; cursor: default; }
.market-sheet-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 12px; border-top: 2px solid #111; font-size: .82rem; }
.market-analysis { width: min(210mm, 100%); margin: 18px auto 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.market-analysis-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 10px; margin: 16px 0; }
.market-analysis-kpis > div { min-height: 96px; display: flex; flex-direction: column; justify-content: space-between; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.market-analysis-kpis span { color: var(--fg-muted); font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .055em; white-space: nowrap; }
.market-analysis-kpis strong { font-size: 1.25rem; }
.market-round-prices { display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); cursor: pointer; }
.market-round-prices input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; accent-color: var(--accent); }
.market-round-prices > span { display: flex; flex-direction: column; gap: 2px; }
.market-round-prices strong { font-size: .88rem; }
.market-round-prices small { color: var(--fg-muted); font-size: .76rem; line-height: 1.35; }
.market-analysis-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.market-analysis-fields label, .manual-sale-row.is-editing label { display: flex; flex-direction: column; gap: 5px; }
.market-analysis-fields label > span, .manual-sale-row.is-editing label > span { color: var(--fg-muted); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.market-analysis-fields input, .market-analysis-fields textarea, .manual-sale-row.is-editing input, .manual-sale-row.is-editing select { width: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 9px 10px; background: var(--surface); color: var(--fg); font: inherit; }
.market-analysis-fields textarea { min-height: 82px; resize: vertical; }
.market-analysis-wide { grid-column: span 2; }
.input-suffix { position: relative; }
.input-suffix input { padding-right: 44px; }
.input-suffix b { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); color: var(--fg-muted); font-size: .75rem; }
.market-analysis-models { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.market-analysis-models h3 { margin-bottom: 10px; font-size: .9rem; }

/* --- Benutzungsanleitung --- */
.guide { width: min(1040px, 100%); margin: 0 auto; }
.guide-head { margin-bottom: 24px; }
.guide-eyebrow, .guide-kicker { display: block; margin-bottom: 7px; color: var(--fg-muted); font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.guide-intro { display: grid; grid-template-columns: minmax(210px, .72fr) minmax(0, 1.55fr); gap: 44px; margin-bottom: 18px; padding: 34px; border-radius: var(--radius); background: #20382f; color: #fff; }
.guide-intro .guide-kicker { color: #a8c8b9; }
.guide-intro h2 { max-width: 310px; font-size: clamp(1.55rem, 3vw, 2.25rem); line-height: 1.02; letter-spacing: -.04em; }
.guide-rules { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: rules; }
.guide-rules li { display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.13); counter-increment: rules; }
.guide-rules li:last-child { border-bottom: 0; }
.guide-rules li::before { content: counter(rules, decimal-leading-zero); grid-row: 1 / 3; color: #a8c8b9; font-family: 'Anonymous Pro', monospace; font-size: .8rem; }
.guide-rules strong { font-size: .91rem; }
.guide-rules span { grid-column: 2; margin-top: 2px; color: rgba(255,255,255,.72); font-size: .79rem; line-height: 1.45; }
.guide-jumps { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 38px; padding: 13px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-card); }
.guide-jumps a { padding: 7px 11px; border-radius: 999px; background: var(--bg-soft); color: var(--fg); font-size: .78rem; font-weight: 600; text-decoration: none; transition: background .16s, color .16s; }
.guide-jumps a:hover { background: var(--fg); color: #fff; }
.guide-section { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 28px; padding: 42px 0; border-top: 1px solid var(--line-strong); scroll-margin-top: 90px; }
.guide-section-no { color: var(--fg-muted); font-family: 'Anonymous Pro', monospace; font-size: 1.15rem; }
.guide-section-body { max-width: 810px; }
.guide-section h2 { margin-bottom: 14px; font-size: clamp(1.5rem, 2.8vw, 2.15rem); line-height: 1.08; letter-spacing: -.035em; }
.guide-section h3 { margin: 28px 0 8px; font-size: 1.05rem; }
.guide-section p { color: var(--fg-muted); font-size: .91rem; line-height: 1.62; }
.guide-section p + p { margin-top: 9px; }
.guide-section .guide-lead { margin-bottom: 22px; color: var(--fg); font-size: 1rem; line-height: 1.62; }
.guide-steps { display: flex; flex-direction: column; gap: 0; margin: 12px 0 22px; padding: 0; list-style: none; counter-reset: steps; }
.guide-steps li { position: relative; min-height: 42px; padding: 10px 8px 10px 47px; border-bottom: 1px solid var(--line); color: var(--fg-muted); font-size: .88rem; line-height: 1.52; counter-increment: steps; }
.guide-steps li::before { content: counter(steps); position: absolute; top: 8px; left: 0; display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--fg); font-family: 'Anonymous Pro', monospace; font-size: .76rem; }
.guide-steps li:last-child { border-bottom: 0; }
.guide-steps strong, .guide-list strong { color: var(--fg); }
.guide-list { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 20px; padding-left: 19px; color: var(--fg-muted); font-size: .88rem; line-height: 1.52; }
.guide-tip { display: grid; grid-template-columns: 150px 1fr; gap: 18px; margin-top: 20px; padding: 17px 19px; border: 1px solid #bcd7c8; border-radius: var(--radius-sm); background: #f0f7f3; color: #305d49; }
.guide-tip.warning { border-color: #ead6a3; background: var(--warn-soft); color: #70571f; }
.guide-tip strong { font-size: .83rem; }
.guide-tip span { font-size: .82rem; line-height: 1.48; }
.guide-two-col, .guide-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 20px 0; }
.guide-mini-card, .guide-type-grid > div { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-card); }
.guide-mini-card strong, .guide-type-grid strong { display: block; margin-bottom: 6px; font-size: .86rem; }
.guide-mini-card p, .guide-type-grid span { display: block; color: var(--fg-muted); font-size: .79rem; line-height: 1.48; }
.guide-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guide-type-grid.two > div { min-height: 112px; }
.guide-flows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin-top: 22px; }
.guide-flows article { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-card); }
.guide-flows article > span { color: var(--fg-muted); font-family: 'Anonymous Pro', monospace; font-size: .7rem; }
.guide-flows h3 { margin: 15px 0 8px; font-size: .98rem; }
.guide-flows p { font-size: .8rem; line-height: 1.52; }
.guide-terms { margin-top: 22px; border-top: 1px solid var(--line-strong); }
.guide-terms > div { display: grid; grid-template-columns: 190px 1fr; gap: 24px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.guide-terms dt { font-size: .85rem; font-weight: 700; }
.guide-terms dd { margin: 0; color: var(--fg-muted); font-size: .85rem; line-height: 1.45; }
.guide-help { margin-top: 24px; padding: 24px; border-radius: var(--radius-sm); background: var(--fg); color: #fff; }
.guide-help strong { display: block; margin-bottom: 6px; }
.guide-help p { color: rgba(255,255,255,.72); }
.guide-footer { display: flex; justify-content: space-between; gap: 20px; padding: 24px 0 12px; border-top: 1px solid var(--line-strong); color: var(--fg-muted); font-size: .73rem; }

/* --- Rechnungen erstellen --- */
.invoice-create-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.invoice-create-actions .select { min-width: 180px; }

/* --- Gemeinsame Hinweisboxen und Preisfelder --- */
.supplier-api-note, .analytics-quality-note { display: grid; grid-template-columns: 150px 1fr; gap: 20px; margin-bottom: 16px; padding: 14px 16px; border: 1px solid #ead6a3; border-radius: var(--radius); background: var(--warn-soft); color: #70571f; }
.supplier-api-note strong, .analytics-quality-note strong { font-size: .85rem; }
.supplier-api-note span, .analytics-quality-note span { font-size: .82rem; line-height: 1.5; }
.price-input-wrap.compact { width: 112px; }
.price-input-wrap.compact input { width: 100%; height: 34px; padding: 0 30px 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-full); font: inherit; text-align: right; }
.price-input-wrap.compact i { right: 10px; font-style: normal; }

/* --- Analytics --- */
.analytics-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.analytics-kpis article { min-height: 130px; display: flex; flex-direction: column; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.analytics-kpis span { color: var(--fg-muted); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.analytics-kpis strong { margin-top: auto; font-size: 1.65rem; letter-spacing: -.03em; }
.analytics-kpis small { color: var(--fg-muted); font-size: .75rem; }
.analytics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.analytics-grid .panel { margin: 0; }
.analytics-wide { grid-column: 1 / -1; }
.analytics-bars { display: flex; flex-direction: column; gap: 9px; }
.analytics-bar-row { display: grid; grid-template-columns: minmax(90px, 150px) minmax(100px, 1fr) minmax(80px, auto); align-items: center; gap: 10px; font-size: .78rem; }
.analytics-bar-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.analytics-bar-row > i { height: 8px; overflow: hidden; border-radius: var(--radius-full); background: var(--bg-soft); }
.analytics-bar-row > i b { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.analytics-bar-row > strong { text-align: right; font-size: .78rem; }
.analytics-operations dl { display: flex; flex-direction: column; }
.analytics-operations dl > div { display: flex; justify-content: space-between; gap: 18px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.analytics-operations dl > div:last-child { border-bottom: 0; }
.analytics-operations dt { color: var(--fg-muted); font-size: .8rem; }
.analytics-operations dd { margin: 0; text-align: right; font-size: .82rem; font-weight: 700; }
.analytics-quality-note { margin-top: 16px; border-color: var(--line-strong); background: var(--surface); color: var(--fg-2); }

/* --- Shopify --- */
.shopify-setup { display: grid; grid-template-columns: 72px 1fr; gap: 24px; max-width: 820px; padding: 28px; }
.shopify-mark { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 18px; background: #008060; color: #fff; font-size: 2rem; font-weight: 800; }
.shopify-setup h2 { margin-bottom: 6px; }
.shopify-setup p { color: var(--fg-muted); font-size: .88rem; }
.shopify-setup ol { margin: 18px 0 18px 20px; color: var(--fg-2); font-size: .86rem; }
.shopify-setup li { margin-bottom: 7px; padding-left: 5px; }
.shopify-setup code { padding: 2px 5px; border-radius: 4px; background: var(--bg-soft); font-family: var(--font-mono); font-size: .76rem; }
.shopify-env { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.shopify-env span { padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: .74rem; }
.shopify-source { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; color: var(--fg-muted); font-size: .75rem; }
.shopify-source span:first-child { display: flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 700; }
.shopify-source i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.shopify-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr); gap: 16px; }
.shopify-orders { display: flex; flex-direction: column; }
.shopify-order { border-bottom: 1px solid var(--line); }
.shopify-order summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; cursor: pointer; list-style: none; }
.shopify-order summary::-webkit-details-marker { display: none; }
.shopify-order summary > span { display: flex; align-items: center; gap: 8px; }
.shopify-order summary > span:first-child { align-items: flex-start; flex-direction: column; gap: 1px; }
.shopify-order small { color: var(--fg-muted); font-size: .72rem; }
.shopify-order em { padding: 3px 7px; border-radius: var(--radius-full); background: var(--bg-soft); color: var(--fg-muted); font-size: .66rem; font-style: normal; }
.shopify-order > div { padding: 0 0 12px 16px; }
.shopify-order > div p { display: flex; gap: 10px; padding: 4px 0; font-size: .8rem; }
.shopify-products > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.shopify-products > div:last-child { border-bottom: 0; }
.shopify-products span { display: flex; flex-direction: column; }
.shopify-products small { color: var(--fg-muted); font-size: .72rem; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --- Responsive --- */
@media (max-width: 860px) {
  .dash-grid { grid-template-columns: 1fr; }
  .settle-row { grid-template-columns: 32px 1fr auto; grid-row-gap: 8px; }
  .settle-row .settle-have { grid-column: 2 / 4; }
  .table-row { grid-template-columns: 1fr auto; }
  .table-row .tr-items, .table-row .tr-date { display: none; }
  .packing-row { grid-template-columns: minmax(190px, 1.4fr) repeat(3, 70px); }
  .packing-row-status { justify-content: flex-start; }
  .packing-row-status, .packing-actions { grid-column: 1 / -1; }
  .packing-actions { justify-content: flex-start; }
  .delivery-pack-row { grid-template-columns: minmax(190px, 1fr) minmax(140px, auto); }
  .delivery-pack-status, .delivery-pack-row .packing-actions { grid-column: 1 / -1; }
  .delivery-workbench-foot { align-items: flex-start; flex-direction: column; }
  .delivery-workbench-foot .row-actions { justify-content: flex-start; width: 100%; }
  .header-inner { flex-wrap: wrap; }
  .app-nav { order: 3; width: 100%; }
  .inventory-summary-row { grid-template-columns: 1fr auto; gap: 10px; }
  .inventory-summary-details { grid-column: 1 / -1; }
  .panel-head { align-items: flex-start; flex-wrap: wrap; }
  .panel-head-actions { justify-content: flex-start; width: 100%; }
  .filament-kpis { grid-template-columns: repeat(2, 1fr); }
  .filament-kpis > div:first-child { grid-column: 1 / -1; }
  .material-kpis > div:first-child { grid-column: auto; }
  .filament-toolbar { align-items: stretch; flex-direction: column; }
  .filament-tools { width: 100%; }
  .filament-tools .search-input { flex: 1; width: auto; min-width: 0; }
  .market-picker-row { grid-template-columns: 18px minmax(150px, 1fr) 126px; }
  .market-available { grid-column: 2; }
  .guide-intro { grid-template-columns: 1fr; gap: 20px; }
  .guide-flows { grid-template-columns: 1fr; }
  .price-model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shopify-layout { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .auftrag-toolbar .segmented { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; border-radius: var(--radius-sm); }
  .auftrag-toolbar .seg { width: 100%; padding-inline: 4px; }
  .vrow-actions .btn { flex: 1 1 auto; justify-content: center; }
  .invoice-list-entry { grid-template-columns: 1fr; }
  .invoice-list-delete { justify-self: end; }
  .packing-progress { grid-template-columns: 1fr; }
  .packing-row { grid-template-columns: repeat(3, 1fr); }
  .packing-product { grid-column: 1 / -1; }
  .packing-row-status, .packing-actions { grid-column: 1 / -1; }
  .packing-actions .btn { flex: 1 1 auto; justify-content: center; }
  .packing-workflow-note, .delivery-workbench-head { flex-direction: column; }
  .delivery-workbench-head-actions { justify-content: space-between; width: 100%; }
  .delivery-package-total { align-items: flex-start; }
  .delivery-pack-row { grid-template-columns: 1fr; padding: 12px; }
  .delivery-pack-counts, .delivery-pack-status, .delivery-pack-row .packing-actions { grid-column: 1; }
  .delivery-pack-row .packing-actions .packing-step-btn { flex: 1 1 70px; }
  .delivery-pack-row .packing-actions .packing-all-btn { flex: 1 1 90px; }
  .packing-complete-toggle { grid-template-columns: minmax(0, 1fr) 18px; }
  .packing-complete-count { grid-column: 1 / -1; grid-row: 2; }
  .packing-complete-toggle svg { grid-column: 2; grid-row: 1; }
  .delivery-workbench-foot .row-actions .btn { flex: 1 1 145px; justify-content: center; }
  .priority-control { max-width: 100%; }
  .filament-source-actions { justify-content: flex-start; }
  .filament-source { width: 100%; }
  .filament-kpis > div { padding: 12px; }
  .filament-kpis strong { font-size: 1.2rem; }
  .filament-filters { display: grid; grid-template-columns: repeat(2, 1fr); border-radius: var(--radius); }
  .filament-filters .seg { justify-content: space-between; }
  .filament-tools { align-items: stretch; flex-direction: column; }
  .filament-tools .search-input, .filament-tools .select { width: 100%; }
  .filament-grid { grid-template-columns: 1fr; }
  .filament-card { grid-template-columns: 94px minmax(0, 1fr); }
  .market-picker-row { grid-template-columns: 16px 1fr; }
  .market-available { grid-column: 2; }
  .market-picker-row .qty-controls { grid-column: 1 / -1; width: 100%; }
  .market-editor-foot, .market-toolbar, .market-sheet-head, .market-sheet-footer { align-items: stretch; flex-direction: column; }
  .market-toolbar .row-actions { width: 100%; }
  .market-toolbar .btn { justify-content: center; }
  .market-sheet { min-height: 0; padding: 24px 18px; }
  .market-sheet-meta { align-items: flex-start; text-align: left; }
  .market-sheet-summary > div { padding: 10px; }
  .market-check-table th:nth-child(3), .market-check-table td:nth-child(3) { width: 74px; }
  .guide-intro { padding: 24px; }
  .guide-section { grid-template-columns: 1fr; gap: 10px; padding: 34px 0; }
  .guide-section-no { font-size: .83rem; }
  .guide-two-col, .guide-type-grid { grid-template-columns: 1fr; }
  .guide-tip { grid-template-columns: 1fr; gap: 5px; }
  .guide-terms > div { grid-template-columns: 1fr; gap: 4px; }
  .guide-footer { flex-direction: column; gap: 4px; }
  .price-model-grid { grid-template-columns: 1fr; }
  .price-model-card { min-height: 0; }
  .delivery-column-head, .delivery-column-row { grid-template-columns: .9fr .72fr 1.2fr 58px; gap: 7px; padding: 8px; }
  .delivery-column-head { font-size: .59rem; }
  .delivery-column-row { font-size: .74rem; }
  .invoice-create-actions { width: 100%; align-items: stretch; }
  .invoice-create-actions .select, .invoice-create-actions .btn { flex: 1 1 100%; justify-content: center; }
  .supplier-api-note, .analytics-quality-note { grid-template-columns: 1fr; gap: 4px; }
  .material-card { grid-template-columns: 1fr; }
  .material-image { min-height: 210px; border-right: 0; border-bottom: 1px solid var(--line); }
  .material-image img { max-height: 220px; }
  .material-card-head, .material-order-row, .material-order-item { align-items: stretch; flex-direction: column; }
  .material-stock-row label { flex-basis: 100%; }
  .material-links { width: 100%; margin-left: 0; }
  .analytics-kpis, .analytics-grid { grid-template-columns: 1fr; }
  .analytics-wide { grid-column: auto; }
  .analytics-bar-row { grid-template-columns: 64px minmax(40px, 1fr) minmax(62px, auto); gap: 6px; }
  .analytics-bar-row > strong { min-width: 0; font-size: .7rem; overflow-wrap: anywhere; }
  .shopify-setup { grid-template-columns: 1fr; padding: 20px; }
  .shopify-source, .shopify-order summary, .shopify-order summary > span:last-child { align-items: flex-start; flex-direction: column; }
}

/* --- Kunden-Verkäufe (Modell → Farbe · Anzahl) --- */
.sales-summary { display: flex; flex-direction: column; gap: 14px; }
.sales-group { display: flex; flex-direction: column; gap: 8px; }
.sales-group-head { display: flex; align-items: center; gap: 8px; }
.sales-group-head strong { font-size: .98rem; }
.sales-group-head .muted { margin-left: auto; font-size: .85rem; }

/* --- Modell → Farbe · Anzahl (Kunden, Verkäufe) --- */
.model-groups { display: flex; flex-direction: column; gap: 12px; }
.model-group { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--bg); }
.model-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.model-group-head strong { font-size: .98rem; }
.model-group-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.color-count { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-full); padding: 3px 10px; font-size: .82rem; }
.color-count i { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-strong); flex: none; }

/* ============================================================
   Aufträge — Werkzeugleiste, Gruppen, Auftragskarten
   ============================================================ */

.auftrag-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.auftrag-toolbar .segmented { overflow-x: auto; max-width: 100%; }
.auftrag-search { flex: 1 1 180px; margin-left: auto; }

/* Aufklappbare Gruppe (Dringlichkeit · Kunde · Farbe · Modell) */
.auftrag-section { overflow: hidden; margin-bottom: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.auftrag-section-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 16px; border: 0; background: var(--surface); font: inherit; text-align: left; cursor: pointer; }
.auftrag-section-head:hover { background: var(--bg); }
.auftrag-section-head > svg { flex: 0 0 auto; color: var(--fg-muted); transition: transform .15s var(--ease); }
.auftrag-section.is-collapsed .auftrag-section-head > svg { transform: rotate(-90deg); }
.auftrag-section-title { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; font-size: 1rem; font-weight: 700; }
.auftrag-section-title i { width: 14px; height: 14px; flex: none; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-strong); }
.auftrag-section-meta { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--fg-muted); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.auftrag-section-head .pill { flex: 0 0 auto; }
.auftrag-section.tone-high .auftrag-section-title { color: var(--danger); }
.auftrag-section.tone-medium .auftrag-section-title { color: var(--warn); }
.auftrag-section.tone-low .auftrag-section-title { color: var(--ok); }
.auftrag-section-body { display: flex; flex-direction: column; border-top: 1px solid var(--line); background: var(--bg); }
.auftrag-section.is-collapsed .auftrag-section-body { display: none; }
.auftrag-section-body > .auftrag-card { margin: 12px; }
.auftrag-section-body > .auftrag-card + .auftrag-card { margin-top: 0; }

.auftrag-card { overflow: hidden; border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.auftrag-card.priority-high { border-left-color: var(--danger); }
.auftrag-card.priority-medium { border-left-color: var(--warn); }
.auftrag-card.priority-low { border-left-color: var(--accent); }
.auftrag-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; }
.auftrag-title { flex: 1 1 220px; min-width: 0; }
.auftrag-name { width: 100%; padding: 1px 0; border: none; border-bottom: 1px dashed transparent; background: transparent; font: inherit; font-size: 1.02rem; font-weight: 700; outline: none; }
.auftrag-name:hover { border-bottom-color: var(--line-strong); }
.auftrag-name:focus { border-bottom-color: var(--accent); }
.auftrag-name::placeholder { color: var(--fg-muted); font-weight: 600; }
.auftrag-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px; color: var(--fg-muted); font-size: .76rem; }
.auftrag-status { flex: 0 0 auto; }
.auftrag-total { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; line-height: 1.05; font-size: 1.3rem; }
.auftrag-total small { color: var(--fg-muted); font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.auftrag-progress { display: flex; height: 5px; background: var(--bg-soft); }
.auftrag-progress i { display: block; height: 100%; }
.auftrag-progress .is-packed { background: var(--ok); }
.auftrag-progress .is-ready { background: #6f8da6; }
.auftrag-progress .is-missing { background: var(--warn); }
.auftrag-progress .is-rest { background: var(--line-strong); }

.auftrag-body { padding: 14px 16px 16px; border-top: 1px solid var(--line); }
.auftrag-numbers { margin-bottom: 10px; color: var(--fg-2); font-size: .82rem; }
.auftrag-empty { padding: 14px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); color: var(--fg-muted); font-size: .85rem; text-align: center; }

/* Inhalt eines Auftrags: Modellgruppe → alle Farben als Chips */
/* Spaltenfluss statt Raster: viele Farben packen sich lückenlos. */
.auftrag-models { columns: 275px; column-gap: 10px; }
.auftrag-models.is-production { columns: 400px; }
.auftrag-model { display: inline-block; width: 100%; margin-bottom: 10px; padding: 9px 11px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); break-inside: avoid; }
.auftrag-model-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.auftrag-model-head strong { font-size: .86rem; }
.auftrag-model-head span { min-width: 28px; padding: 1px 8px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--surface); color: var(--fg-2); font-size: .74rem; font-weight: 700; text-align: center; }
.auftrag-colors { display: flex; flex-wrap: wrap; gap: 5px; }
.vchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 6px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--surface); color: var(--fg-2); font-size: .78rem; }
.vchip i { width: 11px; height: 11px; flex: none; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-strong); }
.vchip b { font-size: .78rem; }
.vchip.is-packed { border-color: #c6e2d2; background: var(--accent-soft); color: var(--ok); }
.vchip.is-ready { border-color: #cfdcea; background: #eaf0f7; color: #35546d; }
.vchip.is-missing { border-color: #ead6a3; background: var(--warn-soft); color: var(--warn); }

/* Freie Aufträge: Produktionszeile mit Mengen und „Produziert" */
.prod-rows { display: flex; flex-direction: column; gap: 6px; }
.prod-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 104px auto; align-items: center; gap: 9px; padding: 5px 7px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.prod-thumb { width: auto; max-width: 34px; height: calc(32px * var(--s, 1)); align-self: flex-end; object-fit: contain; object-position: bottom; }
.prod-name { min-width: 0; display: flex; align-items: center; gap: 7px; overflow: hidden; font-size: .84rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.prod-name i { width: 11px; height: 11px; flex: none; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-strong); }
.prod-row .qty-controls { width: 104px; }
.prod-row-actions { display: flex; gap: 5px; }

.auftrag-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.auftrag-actions .priority-control { margin-top: 0; margin-right: auto; }
.priority-control.is-static b { padding: 4px 8px; font-size: .76rem; font-weight: 700; }
.auftrag-body .market-date-inline, .auftrag-body .batch-editor, .auftrag-body .market-editor { margin-top: 14px; }

/* Variantenzeile (Gruppierung nach Farbe oder Modell) */
.vrow { display: grid; grid-template-columns: 40px minmax(96px, .8fr) auto minmax(120px, 1.4fr) auto; align-items: center; gap: 14px; padding: 9px 16px; background: var(--surface); border-top: 1px solid var(--line); }
.auftrag-section-body > .vrow:first-child { border-top: 0; }
.vrow-thumb { width: auto; max-width: 40px; height: calc(38px * var(--s, 1)); align-self: flex-end; object-fit: contain; object-position: bottom; }
.vrow-name { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vrow-name i { width: 12px; height: 12px; flex: none; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-strong); }
.vrow-name strong { font-size: .92rem; }
.vrow-nums { display: flex; gap: 6px; }
.vrow-nums > span { display: flex; flex-direction: column; align-items: center; min-width: 62px; padding: 4px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); line-height: 1.15; }
.vrow-nums > span strong { font-size: 1rem; }
.vrow-nums > span small { color: var(--fg-muted); font-size: .64rem; letter-spacing: .04em; text-transform: uppercase; }
.vrow-nums > span.is-warn { border-color: #ead6a3; background: var(--warn-soft); }
.vrow-nums > span.is-warn strong { color: var(--warn); }
.vrow-sources { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.vsource { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; border: 1px solid var(--line); border-left-width: 3px; border-radius: var(--radius-full); background: var(--bg); color: var(--fg-2); font-size: .76rem; }
.vsource.priority-high { border-left-color: var(--danger); }
.vsource.priority-medium { border-left-color: var(--warn); }
.vsource.priority-low { border-left-color: var(--accent); }
.vsource.kind-free { border-left-color: var(--fg-muted); }
.vsource b { font-size: .76rem; }
.vrow-actions { display: flex; gap: 5px; justify-content: flex-end; }

/* --- Monatsnavigation (Monatsabschluss) --- */
.month-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.month-nav h2 { font-size: 1.05rem; }

@media (max-width: 860px) {
  .auftrag-search { flex: 1 1 100%; margin-left: 0; }
  .auftrag-models, .auftrag-models.is-production { columns: 1; }
  .auftrag-total { flex: 1 1 auto; align-items: flex-start; flex-direction: row; gap: 5px; align-self: center; }
  .prod-row { grid-template-columns: 34px minmax(0, 1fr) 104px; }
  .prod-row-actions { grid-column: 2 / -1; }
  .auftrag-section-head { flex-wrap: wrap; }
  .auftrag-section-meta { flex: 1 1 100%; padding-left: 30px; white-space: normal; }
  .vrow { grid-template-columns: 40px minmax(0, 1fr); padding: 10px 12px; }
  .vrow-nums, .vrow-sources, .vrow-actions { grid-column: 1 / -1; }
  .vrow-actions { justify-content: flex-start; }
}

/* --- Analytics: Monatsanalyse, Marge, Nacherfassung --- */
.analytics-split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.analytics-split h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-muted); margin-bottom: 8px; }

.margin-table { display: flex; flex-direction: column; gap: 8px; }
.margin-row { display: grid; grid-template-columns: minmax(120px, 1.2fr) repeat(2, minmax(90px, .9fr)) minmax(150px, 1.4fr) minmax(90px, .9fr); align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); }
.margin-row small { display: block; color: var(--fg-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.margin-model strong { font-size: .98rem; }
.margin-num strong { font-size: 1rem; }
.margin-result strong { color: var(--accent-fg); }
.margin-cost span { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; color: var(--fg-2); flex-wrap: wrap; }
.margin-cost .price-input { width: 84px; padding: 5px 8px; }

.manual-sale-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 14px; }
.manual-sale-form label { display: flex; flex-direction: column; gap: 5px; }
.manual-sale-form label > span { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-muted); font-weight: 700; }
.manual-sale-form input, .manual-sale-form select { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 8px 10px; font: inherit; outline: none; background: var(--surface); }
.manual-sale-form input:focus, .manual-sale-form select:focus { border-color: var(--accent); }
.manual-sale-list { display: flex; flex-direction: column; gap: 6px; }
.manual-sale-row { display: grid; grid-template-columns: minmax(140px, 1.2fr) minmax(140px, 1.4fr) auto minmax(100px, .8fr) auto; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); font-size: .88rem; }
.manual-sale-row.is-editing { grid-template-columns: repeat(5, minmax(110px, 1fr)) auto; align-items: end; padding: 12px; }
.manual-sale-row small { display: block; color: var(--fg-muted); font-size: .75rem; }

@media (max-width: 860px) {
  .analytics-split { grid-template-columns: 1fr; }
  .margin-row, .manual-sale-row { grid-template-columns: 1fr 1fr; }
  .margin-cost, .manual-sale-row > :last-child { grid-column: 1 / -1; }
}

/* --- Print: nur die Rechnung sichtbar (Details in invoice.css) --- */
@media print {
  .no-print { display: none !important; }
}

/* ============================================================
   Sortiment — eigene Produkte + Freisteller
   ============================================================ */

.sortiment-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }

.upload-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.file-button { position: relative; overflow: hidden; display: inline-flex; }
.file-button input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.file-button > span {
  display: inline-block; padding: 9px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--bg-soft);
  font-size: .88rem; font-weight: 600; cursor: pointer;
}
.file-button:hover > span { border-color: var(--accent); color: var(--accent-fg); }

.cutout-preview-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 12px; }
.cutout-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cutout-figure img {
  width: 100%; max-width: 260px; height: 190px; object-fit: contain;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-soft);
}
/* Karomuster macht die Transparenz des Freistellers sichtbar */
.cutout-figure.is-result img {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, var(--bg-soft) 25%, transparent 25%, transparent 75%, var(--bg-soft) 75%),
    linear-gradient(45deg, var(--bg-soft) 25%, transparent 25%, transparent 75%, var(--bg-soft) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}
.cutout-figure figcaption { font-size: .76rem; color: var(--fg-muted); font-weight: 600; }

.tolerance-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.tolerance-row > span:first-child { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-muted); font-weight: 700; }
.tolerance-row input[type="range"] { flex: 1; max-width: 320px; accent-color: var(--accent); }

.form-error { color: var(--danger); background: var(--danger-soft); border-radius: var(--radius-sm); padding: 8px 12px; font-size: .86rem; margin-bottom: 10px; }
.form-info { color: var(--accent-fg); background: var(--accent-soft); border-radius: var(--radius-sm); padding: 8px 12px; font-size: .86rem; margin-bottom: 10px; }
.panel-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Vasen bewegen: Lager ↔ Kunde ↔ weg --- */
.move-modes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.move-mode {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 9px 14px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface); font: inherit; color: var(--fg);
}
.move-mode small { color: var(--fg-muted); font-size: .74rem; }
.move-mode:hover { border-color: var(--fg); }
.move-mode.is-active { background: var(--fg); border-color: var(--fg); color: #fff; }
.move-mode.is-active small { color: rgba(255,255,255,.7); }
.move-mode.is-active.is-out { background: var(--danger); border-color: var(--danger); }

.move-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.move-card {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  font: inherit; color: var(--fg); text-align: left; cursor: pointer;
  transition: border-color .15s var(--ease), transform .15s var(--ease);
}
.move-card:hover { border-color: var(--fg); transform: translateY(-1px); }
.move-thumb { flex: none; width: 44px; height: 44px; display: flex; align-items: flex-end; justify-content: center; }
.move-thumb img { max-width: 100%; max-height: calc(100% * var(--s, 1)); object-fit: contain; object-position: bottom; }
.move-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.move-info strong { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.move-info small { color: var(--fg-muted); font-size: .74rem; }
.move-go { flex: none; font-size: .76rem; font-weight: 700; color: var(--fg-muted); }
.move-card:hover .move-go { color: var(--fg); }

/* --- Sonderanfertigung in der Lieferung --- */
.spez-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.spez-bar .hint { margin: 0; }
.panel-inset { background: var(--bg-soft); box-shadow: none; }
.spez-panel { margin-bottom: 16px; }
.spez-panel .sortiment-form { margin-bottom: 14px; }
.spez-cutout-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
/* Live-Rückmeldung zum Freisteller – bewusst kein „.hint", denn ein
   Statussatz darf nicht dauerhaft weggeklickt werden. */
.cutout-warn { color: var(--warn); font-weight: 600; font-size: .85rem; margin-bottom: 10px; }
.cutout-warn:empty { display: none; }

.sortiment-list { display: flex; flex-direction: column; gap: 8px; }
.sortiment-row {
  display: flex; align-items: center; gap: 14px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-soft);
}
.sortiment-thumb { width: 56px; height: 56px; flex: 0 0 56px; display: flex; align-items: center; justify-content: center; background: var(--surface); border-radius: var(--radius-sm); border: 1px solid var(--line); }
.sortiment-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sortiment-thumb-empty { font-size: .62rem; color: var(--fg-muted); text-align: center; }
.sortiment-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.sortiment-info strong { font-size: .95rem; }
.sortiment-stock { font-size: .82rem; color: var(--fg-2); white-space: nowrap; }

/* ============================================================
   Verlauf — Protokoll, Wiederherstellungspunkte, Gerät
   ============================================================ */

.panel-alert { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.panel-alert h2 { color: var(--warn); }

.log-list { display: flex; flex-direction: column; }
.log-row {
  display: grid; grid-template-columns: 130px 130px 1fr 130px;
  gap: 12px; align-items: baseline;
  padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: .88rem;
}
.log-row:last-child { border-bottom: none; }
.log-time { color: var(--fg-muted); font-variant-numeric: tabular-nums; font-size: .82rem; }
.log-type {
  justify-self: start; padding: 2px 9px; border-radius: var(--radius-full);
  background: var(--bg-soft); color: var(--fg-2); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
}
.log-type-konflikt { background: var(--danger-soft); color: var(--danger); }
.log-type-wiederherstellung { background: var(--warn-soft); color: var(--warn); }
.log-type-kunde, .log-type-rechnung { background: var(--accent-soft); color: var(--accent-fg); }
.log-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.log-main strong { font-weight: 600; }
.log-main .muted { font-size: .82rem; }
.log-device { color: var(--fg-muted); font-size: .8rem; text-align: right; }

.snapshot-list { display: flex; flex-direction: column; }
.snapshot-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 4px; border-bottom: 1px solid var(--line);
}
.snapshot-row:last-child { border-bottom: none; }
.snapshot-time { font-variant-numeric: tabular-nums; font-size: .88rem; flex: 1; }
.snapshot-badge {
  padding: 2px 9px; border-radius: var(--radius-full);
  background: var(--accent-soft); color: var(--accent-fg);
  font-size: .72rem; font-weight: 700;
}

.device-row { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.device-row .field { min-width: 240px; }

@media (max-width: 720px) {
  .log-row { grid-template-columns: 1fr; gap: 3px; padding: 12px 4px; }
  .log-device { text-align: left; }
}

@media (max-width: 900px) {
  .market-create-form { grid-template-columns: 1fr 1fr; }
  .market-create-form .row-actions { grid-column: 1 / -1; }
  .market-analysis-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .manual-sale-row.is-editing { grid-template-columns: 1fr 1fr; }
  .manual-sale-row.is-editing .row-actions { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .market-overview-head, .market-overview-toolbar { align-items: stretch; flex-direction: column; }
  .market-overview-toolbar .segmented { overflow-x: auto; justify-content: flex-start; }
  .market-card .batch-head { align-items: stretch; flex-direction: column; }
  .market-card .batch-actions { width: 100%; flex-wrap: wrap; }
  .market-card .batch-actions .btn { flex: 1 1 130px; justify-content: center; }
  .market-create-form, .market-analysis-kpis, .market-analysis-fields { grid-template-columns: 1fr; }
  .market-analysis-wide, .market-create-form .row-actions { grid-column: auto; }
  .market-analysis { padding: 14px; }
  .market-card-models .model-groups { grid-template-columns: 1fr; }
  .settle-foot { align-items: stretch; flex-direction: column; }
  .settle-foot .row-actions, .settle-foot .btn { width: 100%; }
  .manual-sale-row.is-editing { grid-template-columns: 1fr; }
  .manual-sale-row.is-editing .row-actions { grid-column: auto; }
}

/* --- iPad / Touch-Optimierung --- */
@media screen and (any-pointer: coarse) {
  button, [role="button"],
  input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    min-height: 44px;
  }

  .brand-btn, .menu-item, .nav-btn, .btn, .seg, .chip,
  .delivery-collapse-btn, .packing-complete-toggle {
    min-height: 44px;
  }

  .scale-btn, .qty-btn, .lager-thumb-more, .notice-close {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .qty-input { height: 44px; }
  .color-swatch { width: 44px; height: 44px; }
  .market-check-table input[type="checkbox"] { width: 44px; height: 44px; }
}

@media screen and (min-width: 561px) and (max-width: 860px) {
  .packing-column-head, .packing-column-row {
    min-width: 720px;
    grid-template-columns: minmax(80px, 1fr) 64px minmax(90px, 1fr) 48px 48px 48px 70px minmax(130px, auto);
  }

}

@media screen and (any-pointer: coarse) and (min-width: 561px) {
  .packing-metric span, .packing-column-head, .delivery-pack-counts small,
  .vrow-nums > span small, .vsource,
  .market-check-table th {
    font-size: .75rem;
  }
}

/* --- Family & Friends --- */
.ff-kpis { margin-bottom: 18px; }
.ff-form-panel, .ff-history { margin-bottom: 18px; }
.ff-main-fields {
  display: grid; grid-template-columns: 170px minmax(220px, 1fr) minmax(220px, .7fr);
  gap: 14px; margin: 18px 0;
}
.ff-lines { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0; }
.ff-lines-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ff-lines-head h3 { margin: 0; font-size: .92rem; }
.ff-line {
  display: grid; grid-template-columns: minmax(260px, 1fr) 100px auto;
  gap: 12px; align-items: end; padding: 10px 0;
}
.ff-line + .ff-line { border-top: 1px solid var(--line); }
.ff-line label, .ff-main-fields .field { display: grid; gap: 6px; min-width: 0; }
.ff-line label > span { width: auto; min-width: 0; }
.ff-line input, .ff-line select { width: 100%; min-width: 0; }
.ff-line label > span, .ff-main-fields .field > span {
  color: var(--fg-muted); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.ff-stock-choice {
  display: flex; gap: 12px; align-items: flex-start; margin: 16px 0; padding: 13px 14px;
  border-radius: var(--radius); background: var(--bg-soft); border: 1px solid var(--line);
}
.ff-stock-choice input { margin-top: 3px; }
.ff-stock-choice span { display: grid; gap: 3px; }
.ff-stock-choice small { color: var(--fg-muted); line-height: 1.4; }
.ff-history-row {
  display: grid; grid-template-columns: minmax(220px, 1fr) auto auto auto;
  align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line);
}
.ff-history-row:last-child { border-bottom: none; }
.ff-history-row > div:first-child { display: grid; gap: 4px; }
.ff-history-row small { color: var(--fg-muted); line-height: 1.4; }
.ff-stock-badge { color: var(--fg-muted); font-size: .76rem; padding: 5px 9px; border-radius: var(--radius-full); background: var(--bg-soft); }
.ff-price { font-size: 1.05rem; white-space: nowrap; }
.settle-month-picker {
  min-height: 34px; padding: 5px 9px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--fg); font: inherit; font-size: .8rem;
}
.monthly-billing-box, .historical-product-picker {
  margin: 16px 0; padding: 14px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft);
}
.monthly-billing-head, .historical-product-result-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px;
}
.monthly-billing-head > div { display: grid; gap: 2px; }
.monthly-billing-head small, .historical-product-result-head span { color: var(--fg-muted); }
.monthly-billing-fields {
  display: grid; grid-template-columns: minmax(170px, .7fr) minmax(210px, 1fr) minmax(220px, 1.2fr);
  align-items: start; gap: 12px;
}
.monthly-billing-fields label, .historical-product-filters label { display: grid; gap: 6px; min-width: 0; }
.monthly-billing-fields label > span, .historical-product-filters label > span {
  color: var(--fg-muted); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.monthly-billing-fields input, .monthly-billing-fields select,
.historical-product-filters input, .historical-product-filters select { width: 100%; min-width: 0; }
.monthly-billing-fields small { color: var(--fg-muted); line-height: 1.35; }
.historical-product-filters {
  display: grid; grid-template-columns: minmax(230px, 1.4fr) repeat(3, minmax(130px, .7fr));
  gap: 10px; margin-bottom: 14px;
}
.historical-product-results {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  max-height: 330px; overflow: auto; padding-right: 3px;
}
.historical-product-option {
  min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px;
  padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--fg); font: inherit; text-align: left; cursor: pointer;
}
.historical-product-option:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.historical-product-option > span { min-width: 0; display: grid; }
.historical-product-option strong, .historical-product-option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.historical-product-option small { color: var(--fg-muted); }
.historical-product-option > b { color: var(--accent); }
.historical-month-access { justify-content: center; margin: 12px 0; }

@media (max-width: 800px) {
  .ff-main-fields { grid-template-columns: 1fr; }
  .ff-line { grid-template-columns: minmax(0, 1fr) 90px; }
  .ff-line > .btn { grid-column: 1 / -1; justify-self: start; }
  .ff-history-row { grid-template-columns: 1fr auto; }
  .ff-history-row .row-actions { grid-column: 1 / -1; }
  .monthly-billing-fields, .historical-product-filters { grid-template-columns: 1fr 1fr; }
  .monthly-billing-note, .historical-product-search { grid-column: 1 / -1; }
  .historical-product-results { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .monthly-billing-fields, .historical-product-filters, .historical-product-results { grid-template-columns: 1fr; }
  .monthly-billing-note, .historical-product-search { grid-column: auto; }
}

/* ============================================================
   DESIGN-SYSTEM v5 — eine Sprache für alle Bereiche
   ------------------------------------------------------------
   Diese Ebene steht bewusst am Ende: sie vereinheitlicht Flächen,
   Typografie, Zeilen, Marker und Formularfelder über alle Module
   hinweg, ohne die bereichsspezifischen Layouts anzufassen.
   ============================================================ */

/* --- 1. Grundtypografie ------------------------------------ */

body { font-size: var(--text-base); }

.section-head { align-items: center; margin-bottom: var(--sp-6); }
.section-head h1 { font-size: var(--text-xl); font-weight: 700; letter-spacing: -.021em; line-height: 1.2; }
.section-sub { color: var(--fg-muted); font-size: var(--text-sm); margin-top: 3px; }

.panel-head h2, .panel h2,
.delivery-workbench-head h2, .ff-lines-head h3, .analytics-split h3,
.guide-section h2, .shopify-setup h2, .filament-card h2 {
  font-size: var(--text-lg); font-weight: 650; letter-spacing: -.011em; line-height: 1.3;
}
.card-head h3, .settle-block-title h3, .modal-head h3 {
  font-size: var(--text-md); font-weight: 650; letter-spacing: -.008em;
}

.group-heading {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em;
  color: var(--fg-muted); font-weight: 700; margin: var(--sp-6) 0 var(--sp-2);
}
.toolbar-label, .filter-label, .inventory-detail-label, .brand-menu-head, .guide-eyebrow, .guide-kicker {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .09em;
  color: var(--fg-muted); font-weight: 700;
}

.hint { color: var(--fg-muted); font-size: var(--text-sm); margin-bottom: var(--sp-3); line-height: 1.5; }
.hint strong { color: var(--fg-2); }
.hint-quiet { margin-bottom: 0; margin-top: var(--sp-2); font-size: var(--text-xs); }

/* --- 2. Flächen: eine Karte, überall gleich ---------------- */

.panel, .kpi, .filterbar, .card, .batch-card, .lager-card, .customer-card,
.filament-card, .auftrag-card, .auftrag-section, .delivery-summary,
.delivery-workbench, .inventory-summary-row, .price-model-card,
.analytics-kpis article, .filament-kpis > div, .ff-kpis > div,
.guide-mini-card, .guide-flows article, .table-list, .market-card,
.sortiment-row, .ff-form-panel, .ff-history {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}

.panel { padding: var(--sp-5); margin-bottom: var(--sp-4); }
.panel-head { margin-bottom: var(--sp-4); }
.kpi { padding: var(--sp-4) var(--sp-5); }

/* Hover bleibt eine ruhige Kanten-Betonung statt Schweben. */
.lager-card:hover, .customer-card:hover, .filament-card:hover,
.inventory-summary-row:hover, .price-model-card:hover, .table-row:hover {
  border-color: var(--line-strong);
  box-shadow: none;
  transform: none;
}

/* Schwebende Ebenen behalten Tiefe. */
.brand-menu, .modal, .auth-card { box-shadow: var(--shadow-lg); }

/* Hervorgehobener Zustand: dezenter Ring statt kräftigem Schlagschatten. */
.panel-accent, .batch-card.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Eingebettete Karte innerhalb eines Panels. */
.card-inset { background: var(--bg-sunken); border-color: var(--line); }
.card { padding: var(--sp-4); }
.card + .card { margin-top: var(--sp-3); }
.card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-3); flex-wrap: wrap;
}
.card-head-text p { color: var(--fg-muted); font-size: var(--text-sm); margin-top: 2px; }
.card-head-aside { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* --- 3. Marker: ein Chip-Aussehen -------------------------- */

.pill, .tag, .badge, .tab-badge, .snapshot-badge, .ff-stock-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg-soft); color: var(--fg-2);
  font-size: var(--text-xs); font-weight: 650; line-height: 1.6;
  padding: 2px 10px; border-radius: var(--radius-full); white-space: nowrap;
}
.tag-soft { background: transparent; color: var(--fg-muted); box-shadow: inset 0 0 0 1px var(--line-strong); }
.tag-ok, .badge-ok { background: var(--ok-soft); color: var(--ok); }
.tag-warn, .pill-warn, .badge-warn { background: var(--warn-soft); color: var(--warn); }
.tag-danger { background: var(--danger-soft); color: var(--danger); }

/* --- 4. Bedienelemente ------------------------------------- */

.btn { padding: 8px 16px; font-size: var(--text-base); font-weight: 650; min-height: var(--control-h); }
.btn-sm { padding: 5px 12px; font-size: var(--text-sm); min-height: var(--control-h-sm); }
.btn:hover { border-color: var(--fg); background: var(--surface); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); }

.icon-btn {
  width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; background: transparent; border-radius: var(--radius-sm);
  font-size: 1.25rem; line-height: 1; color: var(--fg-muted); cursor: pointer;
}
.icon-btn:hover { background: var(--bg-soft); color: var(--fg); }

.select, .search-input, .qty-input, .price-input,
.field input, .field select, .input-suffix input {
  font: inherit; font-size: var(--text-base); outline: none;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--fg);
}
.select, .search-input, .field input, .field select, .input-suffix input {
  min-height: var(--control-h); padding: 6px 12px;
}
.select:focus, .search-input:focus, .qty-input:focus,
.field input:focus, .field select:focus, .input-suffix input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}

.qty-controls { gap: 5px; }
.qty-btn { width: 32px; height: 32px; border-radius: var(--radius-sm); font-size: 1rem; }
.qty-input { height: 32px; min-width: 48px; }

/* --- 5. Formularfelder ------------------------------------- */

.field-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-3) var(--sp-4);
}
.field-wide { grid-column: 1 / -1; }
.field, .field-grid > label {
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
}
.field > span, .field-grid > label > span {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em;
  color: var(--fg-muted); font-weight: 700;
}
.field small, .field-grid > label small { color: var(--fg-muted); font-size: var(--text-xs); }
.input-suffix { display: flex; align-items: center; gap: var(--sp-2); }
.input-suffix input { flex: 1; min-width: 0; }
.input-suffix b { color: var(--fg-muted); font-weight: 650; font-size: var(--text-sm); }

/* --- 6. Zeilen: ein Rhythmus für alle Listen --------------- */

.settle-row, .table-row, .list-row, .price-row, .snapshot-row,
.ff-history-row, .sortiment-row, .log-row {
  min-height: 52px;
}

.settle-list, .settle-block-body { display: flex; flex-direction: column; }
.settle-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto auto 92px 96px;
  align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--line);
}
.settle-row:last-child { border-bottom: none; }
.settle-row-icon {
  width: 34px; height: 34px; object-fit: contain; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-sunken); color: var(--fg-2); font-size: .95rem;
}
img.settle-row-icon { background: transparent; }
.settle-row-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.settle-row-label strong { font-weight: 600; font-size: var(--text-base); }
.settle-row-label small { color: var(--fg-muted); font-size: var(--text-xs); }
.settle-row-note { color: var(--fg-muted); font-size: var(--text-xs); white-space: nowrap; }
.settle-row-price { color: var(--fg-muted); font-size: var(--text-sm); text-align: right; }
.settle-row-total { text-align: right; font-variant-numeric: tabular-nums; font-weight: 650; }
.settle-row-set .settle-row-icon { background: var(--accent-soft); color: var(--accent); }

.settle-block { margin-top: var(--sp-5); }
.settle-block-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2);
  padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line);
}
.settle-block-title p { color: var(--fg-muted); font-size: var(--text-sm); margin-top: 1px; }

.settle-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line);
}
.settle-sum { font-size: var(--text-base); color: var(--fg-2); }
.settle-sum strong { font-size: 1.25rem; color: var(--fg); font-variant-numeric: tabular-nums; margin-left: 6px; }

.empty-inline {
  color: var(--fg-muted); font-size: var(--text-sm);
  padding: var(--sp-5) 0; text-align: center;
}
.save-state {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--fg-muted); font-size: var(--text-xs); margin-bottom: var(--sp-4);
}
.save-state span { color: var(--ok); font-weight: 700; }

/* --- 7. Hinweisbox ----------------------------------------- */

.alert {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  border: 1px solid var(--line); border-left: 3px solid var(--fg-muted);
  border-radius: var(--radius); padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4); background: var(--surface);
}
.alert p { color: var(--fg-2); font-size: var(--text-sm); margin-top: 2px; }
.alert-warn { border-left-color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.alert-danger { border-left-color: var(--danger); background: var(--danger-soft); border-color: transparent; }
.alert-ok { border-left-color: var(--ok); background: var(--ok-soft); border-color: transparent; }

/* --- 8. Dialog --------------------------------------------- */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(16, 23, 19, .38); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-5);
  animation: fadeIn .14s var(--ease) both;
}
.modal {
  width: min(760px, 100%); max-height: min(86vh, 760px);
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--radius-lg);
  border: 1px solid var(--line); overflow: hidden;
  animation: modalIn .18s var(--ease) both;
}
.modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-4); border-bottom: 1px solid var(--line);
}
.modal-head p { color: var(--fg-muted); font-size: var(--text-sm); margin-top: 3px; }
.modal-body { padding: var(--sp-5); overflow-y: auto; }
.modal-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line); background: var(--bg-sunken);
}
.modal-foot-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.modal-foot-info span { color: var(--fg-muted); font-size: var(--text-sm); }
.modal-foot-info strong { font-size: var(--text-base); font-variant-numeric: tabular-nums; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --- 9. Set-Auswahl ---------------------------------------- */

.setpick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-4); }
.setpick-col { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.setpick-col-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
  padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.setpick-col-head strong { font-size: var(--text-base); font-weight: 650; }
.setpick-col-head span { color: var(--fg-muted); font-size: var(--text-xs); }
.setpick-options { display: flex; flex-direction: column; gap: 4px; }
.setpick-option {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--fg);
  border-radius: var(--radius-sm); padding: 8px 10px; font: inherit; font-size: var(--text-sm);
  transition: border-color .12s var(--ease), background .12s var(--ease);
}
.setpick-option span { flex: 1; min-width: 0; }
.setpick-option b { color: var(--fg-muted); font-size: var(--text-xs); font-weight: 650; }
.setpick-option:hover { border-color: var(--line-strong); background: var(--bg-sunken); }
.setpick-option.is-active { border-color: var(--accent); background: var(--accent-soft); }
.setpick-option.is-active b { color: var(--accent-fg); }

/* --- 10. Feinschliff bestehender Bereiche ------------------ */

.kpi-value { font-size: 1.6rem; letter-spacing: -.022em; font-variant-numeric: tabular-nums; }
.kpi-label { font-size: var(--text-xs); color: var(--fg-muted); margin-top: 4px; line-height: 1.35; }
.kpi-grid { gap: var(--sp-3); margin-bottom: var(--sp-5); }

.subtabs { border-bottom: 1px solid var(--line); }
.detail-head { margin-bottom: var(--sp-5); }

.month-nav { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.month-nav h2 { min-width: 0; }
.settle-month-picker {
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  min-height: var(--control-h-sm); padding: 3px 8px; font: inherit; font-size: var(--text-sm);
}

.product-card, .lager-card, .inventory-summary-row { animation: none; }
.product-card { box-shadow: none; border: 1px solid var(--line); }

@media (max-width: 860px) {
  .settle-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-areas: "icon label total" "icon note qty" ;
    row-gap: 6px; padding: var(--sp-3) 0;
  }
  .settle-row-icon { grid-area: icon; }
  .settle-row-label { grid-area: label; }
  .settle-row-note { grid-area: note; }
  .settle-row .qty-controls { grid-area: qty; justify-self: end; }
  .settle-row-price { display: none; }
  .settle-row-total { grid-area: total; }
}

/* --- 11. Kennzahlen: ein Muster für alle Bereiche ---------- */

.kpi-grid, .filament-kpis, .analytics-kpis, .ff-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: var(--sp-3); margin-bottom: var(--sp-5);
  background: transparent; border: none; border-radius: 0; overflow: visible; box-shadow: none;
}
.kpi, .filament-kpis > div, .analytics-kpis article, .ff-kpis > div {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  min-height: 86px; padding: var(--sp-4) var(--sp-5);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: none;
}
.kpi-value, .filament-kpis strong, .analytics-kpis strong, .ff-kpis strong {
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.022em;
  font-variant-numeric: tabular-nums; margin-top: 0;
}
.kpi-label, .filament-kpis span, .analytics-kpis span, .ff-kpis span,
.analytics-kpis small, .filament-kpis small {
  color: var(--fg-muted); font-size: var(--text-xs); font-weight: 500;
  text-transform: none; letter-spacing: 0; line-height: 1.35;
}
/* Bei Analytics steht das Label über der Zahl – Reihenfolge bleibt erhalten. */
.analytics-kpis article { justify-content: flex-start; }
.filament-kpis > div:first-child { grid-column: auto; }

/* --- 12. Hinweisboxen: ein Muster für alle Bereiche -------- */

.filament-notice, .supplier-api-note, .analytics-quality-note,
.packing-workflow-note, .stock-separation-note, .form-info, .form-error {
  border-radius: var(--radius); border: 1px solid transparent;
  border-left: 3px solid var(--fg-muted);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
  font-size: var(--text-sm); line-height: 1.5;
}
.filament-notice, .supplier-api-note, .analytics-quality-note {
  background: var(--warn-soft); border-left-color: var(--warn); color: var(--warn);
}
.filament-notice strong, .supplier-api-note strong, .analytics-quality-note strong { color: var(--warn); }
.supplier-api-note span, .analytics-quality-note span { color: var(--warn); font-size: var(--text-sm); }
.packing-workflow-note, .stock-separation-note, .form-info {
  background: var(--accent-soft); border-left-color: var(--accent); color: var(--fg-2);
}
.packing-workflow-note strong, .stock-separation-note strong, .form-info { color: var(--accent-fg); }
.form-error { background: var(--danger-soft); border-left-color: var(--danger); color: var(--danger); }
.panel-alert { border-color: transparent; border-left: 3px solid var(--warn); box-shadow: none; background: var(--warn-soft); }
.panel-alert h2 { color: var(--warn); }

/* --- 13. Layout-Feinschliff -------------------------------- */

.dash-grid { align-items: start; gap: var(--sp-4); }
.dash-grid .panel { margin-bottom: 0; }
.panel > .empty-state { padding: var(--sp-6) var(--sp-4); }
.panel > .empty-state.small { padding: var(--sp-5) var(--sp-4); }

.list { display: flex; flex-direction: column; }
.list-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--line);
  background: transparent; border-radius: 0; width: 100%;
  font: inherit; color: var(--fg); text-align: left; cursor: pointer; border-left: none; border-right: none; border-top: none;
}
.list-row:last-child { border-bottom: none; }
.list-row:hover { color: var(--accent-fg); }

/* Platz für das ×, unabhängig davon, welcher Hinweistyp dekoriert wurde. */
.dismissible-notice { position: relative; padding-right: 46px; }

/* --- 14. Formular-Grundlage ---------------------------------
   Über :where() ohne Spezifität: jedes Eingabefeld sieht gleich aus,
   solange ein Bereich nichts Eigenes definiert. Der Rechnungs- und
   Lieferschein-Editor bleibt bewusst ausgenommen (Druckbild). */

:where(#main:not(.is-invoice)) :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select, textarea
) {
  font: inherit; font-size: var(--text-base); color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 7px 12px; min-height: var(--control-h); outline: none;
  transition: border-color .12s var(--ease), box-shadow .12s var(--ease);
}
:where(#main:not(.is-invoice)) :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select, textarea
):focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
:where(#main) :where(input, select, textarea)::placeholder { color: var(--fg-muted); }

/* Typfarben der Badges bleiben erhalten – die Form ist jetzt überall gleich. */
.badge-kommission { background: var(--accent-soft); color: var(--accent-fg); }
.badge-direkt { background: #e7eef7; color: #2b4d78; }
.badge-markt { background: #fff0d7; color: #8a5a12; }
.badge-miete, .badge-once { background: #eee8fb; color: #624398; }
.badge-ankauf { background: #fbe7ed; color: #8b3550; }
.badge-stock { background: var(--bg-soft); color: var(--fg-2); }

/* --- 15. Flache Flächen: Schatten nur für schwebende Ebenen -- */

.product-card, .lager-thumb-more, .delivery-workbench, .filament-card,
.table-row, .market-analysis, .material-card, .auftrag-toolbar,
.auftrag-section, .auftrag-card, .filterbar, .historical-product-option:hover {
  box-shadow: none;
}
.filament-card:hover, .table-row:hover, .lager-card:hover,
.customer-card:hover, .inventory-summary-row:hover {
  transform: none; box-shadow: none; border-color: var(--line-strong);
}
.filament-card, .lager-card, .product-card { animation: none; }
.material-card { border-radius: var(--radius); }

/* ============================================================
   DESIGN-SYSTEM v5.1 — Beschriftungen und Formulare
   ------------------------------------------------------------
   Vorher gab es 35 Mini-Beschriftungen in 14 Schriftgrößen, alle
   in gesperrten Großbuchstaben. Das war die eigentliche Unruhe.
   Ab hier gibt es genau EINE Beschriftung: normal geschrieben,
   eine Größe, ein Gewicht, eine Farbe.
   ============================================================ */

.field > span, .field-grid > label > span, .fields label > span,
.auth-card label, .toolbar-label, .filter-label, .inventory-detail-label,
.delivery-name-field > span, .priority-control > span,
.packing-metric span, .delivery-package-total span, .delivery-pack-counts small,
.market-date-inline,
.market-analysis-kpis span, .market-analysis-fields label > span,
.manual-sale-row.is-editing label > span, .manual-sale-form label > span,
.analytics-kpis span, .auftrag-total small, .vrow-nums > span small,
.margin-row small, .tolerance-row > span:first-child,
.ff-line label > span, .ff-main-fields .field > span,
.guide-eyebrow, .guide-kicker, .group-heading, .brand-menu-head,
.delivery-column-head, .packing-column-head, .analytics-split h3 {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-muted);
  line-height: 1.4;
}

/* Beschriftungen, die eine Gruppe anführen, dürfen etwas fester sein. */
.group-heading, .guide-eyebrow, .guide-kicker, .brand-menu-head,
.analytics-split h3 {
  font-weight: 600; color: var(--fg-2);
}
.group-heading { font-size: var(--text-sm); margin: var(--sp-6) 0 var(--sp-2); }
.analytics-split h3 { font-size: var(--text-sm); margin-bottom: var(--sp-2); }

/* Tabellenköpfe in Pack- und Lieferlisten: gleiche Sprache, keine Kästen. */
.delivery-column-head, .packing-column-head {
  background: transparent; border-bottom: 1px solid var(--line);
}

/* Einzige bewusste Ausnahme: die Wortmarke im Kopfbereich. */
.brand-sub { font-size: var(--text-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

/* --- Formularraster: Felder so breit wie ihr Inhalt ---------- */

.field-grid {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: var(--sp-4) var(--sp-5);
}
.field-grid > label, .field-grid > .field { flex: 1 1 240px; min-width: 0; }
.field-grid > .field-narrow { flex: 0 0 150px; }
.field-grid > .field-wide { flex: 1 1 100%; }
.field-narrow .input-suffix input { width: 100%; }

/* Zahlenfelder werden nie unnötig in die Breite gezogen. */
.input-suffix { display: inline-flex; align-items: center; gap: var(--sp-2); }
.input-suffix input { font-variant-numeric: tabular-nums; }

/* Fußnote einer Karte: erklärt, ändert aber nicht die Bildruhe. */
.card-foot-note {
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  color: var(--fg-muted); font-size: var(--text-xs); line-height: 1.5;
}

/* Mengenfelder sind schmal – die Grundpolsterung würde die Zahl abschneiden. */
.qty-input, .price-input, input.qty-input {
  padding: 0 4px; text-align: center; font-variant-numeric: tabular-nums;
}
.qty-input { min-width: 52px; }

/* ============================================================
   INVENTUR — zählen, vergleichen, übernehmen
   ------------------------------------------------------------
   Eine Zeile je Variante: Bild, Name, Buchbestand, Zählfeld,
   Abweichung. Farbe trägt hier Bedeutung – grün heißt „passt“,
   gelb „mehr gefunden“, rot „fehlt“.
   ============================================================ */

.section-head-actions {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
}
.lager-last-inventory { margin: calc(var(--sp-4) * -1) 0 var(--sp-4); }

/* --- Fortschritt der laufenden Zählung --- */

.inv-progress { margin-bottom: var(--sp-4); }
.inv-progress-bar {
  height: 6px; border-radius: var(--radius-full); background: var(--bg-soft);
  overflow: hidden; margin-bottom: var(--sp-4);
}
.inv-progress-bar b {
  display: block; height: 100%; border-radius: inherit;
  background: var(--accent); transition: width .25s var(--ease);
}
/* Die Zählliste ist der eigentliche Inhalt – die Kennzahlen darüber
   bleiben deshalb bewusst flach und schmal, auch auf dem Handy. */
.inv-kpis { margin-bottom: 0; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.inv-kpis .kpi { min-height: 0; padding: var(--sp-3) var(--sp-4); }
.inv-kpis .kpi-value { font-size: 1.25rem; }

.inv-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
}
.inv-toolbar .search-input { flex: 1 1 220px; max-width: 320px; }

/* --- Gruppen je Modell --- */

.inv-groups { display: flex; flex-direction: column; gap: var(--sp-3); }
.inv-group {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
}
.inv-group-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2);
  border-bottom: 1px solid var(--line);
}
.inv-group.is-collapsed .inv-group-head { border-bottom-color: transparent; }
.inv-group-toggle {
  flex: 1; display: flex; align-items: center; gap: var(--sp-2);
  background: none; border: 0; padding: var(--sp-2); border-radius: var(--radius-sm);
  color: var(--fg); font: inherit; text-align: left; cursor: pointer; min-width: 0;
}
.inv-group-toggle:hover { background: var(--bg-soft); }
.inv-group-toggle svg { color: var(--fg-muted); flex: none; transition: transform .2s var(--ease); }
.inv-group.is-collapsed .inv-group-toggle svg { transform: rotate(-90deg); }
.inv-group-meta { color: var(--fg-muted); font-size: var(--text-xs); font-weight: 500; }

/* --- Zeile je Variante --- */

.inv-rows { display: flex; flex-direction: column; }
.inv-row {
  display: grid; align-items: center; gap: var(--sp-3);
  grid-template-columns: 44px minmax(110px, 1fr) auto auto minmax(64px, auto) auto;
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--line);
}
.inv-rows > .inv-row:first-child { border-top: 0; }
/* Nur Abweichungen werden eingefärbt – „passt“ bleibt ruhig, sonst
   leuchtet am Ende der Zählung die ganze Liste. */
.inv-row.is-plus { background: var(--warn-soft); }
.inv-row.is-minus { background: var(--danger-soft); }
.inv-thumb {
  width: auto; max-width: 44px; height: calc(38px * var(--s, 1));
  object-fit: contain; object-position: bottom; justify-self: center; align-self: end;
}
.inv-name {
  display: flex; align-items: center; gap: var(--sp-2); min-width: 0;
  font-weight: 600; font-size: var(--text-base);
}
.inv-name > i { flex: none; }
.inv-expected { color: var(--fg-muted); font-size: var(--text-xs); white-space: nowrap; }
.inv-expected strong {
  display: inline-block; margin-left: 4px;
  color: var(--fg-2); font-size: var(--text-base); font-variant-numeric: tabular-nums;
}
/* Das Zählfeld bleibt so schmal wie seine Zahl – die globale
   Feldbreite würde es über die halbe Zeile ziehen. */
.inv-qty { margin-top: 0; }
.inv-qty .qty-input { width: 72px; flex: none; }
.inv-status { color: var(--fg-muted); font-size: var(--text-xs); }
.inv-delta {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; padding: 2px 10px; border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 650; font-variant-numeric: tabular-nums;
  background: var(--bg-soft); color: var(--fg-2);
}
.inv-delta.is-plus { background: var(--warn-soft); color: var(--warn); }
.inv-delta.is-minus { background: var(--danger-soft); color: var(--danger); }
.inv-delta.is-even { background: var(--ok-soft); color: var(--ok); }
/* Auf der eingefärbten Zeile braucht der Marker eigenen Grund, sonst
   verschwindet er in der Fläche. */
.inv-row.is-plus .inv-delta, .inv-row.is-minus .inv-delta { background: var(--surface); }
.inv-row-actions { display: flex; justify-content: flex-end; }

/* --- Abschluss --- */

.inv-finish { margin-top: var(--sp-5); }
.inv-finish .field + .field { margin-top: var(--sp-4); }
.inv-finish .row-actions { margin-top: var(--sp-4); justify-content: flex-end; }

/* --- Frühere Inventuren --- */

.inv-history { display: flex; flex-direction: column; gap: var(--sp-2); }
.inv-history-entry { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.inv-history-entry.is-open { border-color: var(--line-strong); }
.inv-history-row {
  width: 100%; display: grid; align-items: center; gap: var(--sp-3);
  grid-template-columns: minmax(0, 1fr) auto minmax(80px, auto) 16px;
  padding: var(--sp-3); background: var(--surface); border: 0;
  font: inherit; color: var(--fg); text-align: left; cursor: pointer;
}
.inv-history-row:hover { background: var(--bg-soft); }
.inv-history-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inv-history-main small { color: var(--fg-muted); font-size: var(--text-xs); }
.inv-history-value { font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }
.inv-history-value.is-minus, .inv-value-minus { color: var(--danger); }
.inv-history-arrow { color: var(--fg-muted); transition: transform .2s var(--ease); }
.inv-history-entry.is-open .inv-history-arrow { transform: rotate(90deg); }
.inv-history-entry .row-actions { padding: 0 var(--sp-3) var(--sp-3); justify-content: flex-end; }

.inv-detail { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.inv-detail-row {
  display: grid; align-items: center; gap: var(--sp-3);
  grid-template-columns: minmax(0, 1fr) auto auto minmax(52px, auto) minmax(70px, auto);
  padding: var(--sp-2) var(--sp-3); font-size: var(--text-sm);
}
.inv-detail-row + .inv-detail-row { border-top: 1px solid var(--line); }
.inv-detail-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-detail-num { color: var(--fg-muted); font-size: var(--text-xs); white-space: nowrap; }
.inv-detail-num strong { color: var(--fg-2); font-variant-numeric: tabular-nums; margin-left: 4px; }
.inv-detail-value { text-align: right; font-variant-numeric: tabular-nums; color: var(--fg-2); }

/* --- Analytics-Panel --- */

.inv-analytics-list {
  display: flex; flex-direction: column;
  margin-top: var(--sp-5); border-top: 1px solid var(--line);
}
.inv-analytics-row {
  display: grid; align-items: center; gap: var(--sp-3);
  grid-template-columns: minmax(0, 1fr) auto minmax(80px, auto);
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--line);
}
.inv-analytics-row > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inv-analytics-row small { color: var(--fg-muted); font-size: var(--text-xs); }
.inv-analytics-row > strong { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .inv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inv-row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb name delta"
      "thumb expected expected"
      "qty qty actions";
    row-gap: var(--sp-2);
  }
  .inv-thumb { grid-area: thumb; }
  .inv-name { grid-area: name; }
  .inv-expected { grid-area: expected; }
  .inv-qty { grid-area: qty; }
  .inv-status, .inv-delta { grid-area: delta; justify-self: end; }
  .inv-row-actions { grid-area: actions; }
  .inv-detail-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .inv-detail-name { grid-column: 1 / -1; }
  .inv-toolbar .search-input { max-width: none; }
}


/* ============================================================
   SPIELFELD — die verspielte Ansicht
   ------------------------------------------------------------
   Eigene Materialebene: Regalbretter aus Holz, ein Karton aus
   Pappe, Vasen als Gegenstände. Alle Vasen stehen auf einer
   gemeinsamen Standlinie – nur so sieht man Globo S, M und L
   sofort auseinander. Ab 768 px; darunter bleibt die Liste.
   ============================================================ */

/* --- 1. Schalter im Menü ----------------------------------- */

.menu-item-switch { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.menu-item-switch-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.menu-item-hint { color: var(--fg-muted); font-size: var(--text-xs); font-weight: 500; }
.menu-switch {
  flex: none; width: 34px; height: 20px; border-radius: var(--radius-full);
  background: var(--line-strong); position: relative; transition: background .2s var(--ease);
}
.menu-switch i {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease);
}
.menu-item-switch.is-on .menu-switch { background: var(--accent); }
.menu-item-switch.is-on .menu-switch i { transform: translateX(14px); }

/* --- 2. Bühne und Materialien ------------------------------- */

body.is-playfield {
  --pf-board: #c8b085;
  --pf-board-edge: #a98f66;
  --pf-carton: #e4d3b0;
  --pf-carton-edge: #c2a877;
  --pf-carton-tape: #efe3c9;
  --pf-stage: #f1f2ec;
}
body.is-playfield #main {
  background:
    radial-gradient(1200px 420px at 50% -140px, #ffffff 0%, rgba(255,255,255,0) 70%),
    var(--pf-stage);
  border-radius: var(--radius-lg);
  padding-top: var(--sp-6); padding-bottom: var(--sp-8);
  margin-top: var(--sp-4);
}
/* Rechnung und Lieferschein behalten ihr Druckbild – die Bühne hat dort
   nichts zu suchen. */
body.is-playfield #main.is-invoice {
  background: none; border-radius: 0;
  padding-top: 0; padding-bottom: 0; margin-top: 0;
}

.pf-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6);
}
.pf-head h1 { font-size: 2rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.pf-head p { color: var(--fg-2); font-size: var(--text-base); margin-top: 4px; }
.pf-section-label { font-size: var(--text-sm); font-weight: 600; color: var(--fg-2); margin: var(--sp-6) 0 var(--sp-3); }
.pf-toolbar { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.pf-tip { color: var(--fg-muted); font-size: var(--text-xs); }

/* Legen oder nehmen – der Umschalter sitzt dort, wo geklickt wird. */
.pf-modes { display: inline-flex; padding: 3px; gap: 3px; border-radius: var(--radius-full); background: var(--bg-soft); border: 1px solid var(--line); }
.pf-mode {
  border: 0; background: none; font: inherit; font-size: var(--text-sm); font-weight: 600;
  color: var(--fg-2); padding: 7px 16px; border-radius: var(--radius-full); cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.pf-mode:hover { color: var(--fg); }
.pf-mode.is-active { background: var(--fg); color: #fff; box-shadow: var(--shadow-sm); }
.pf-mode.is-active.is-remove { background: var(--warn); }

/* Im Nehmen-Modus sinkt die Vase unter dem Zeiger, statt zu hüpfen –
   die Bewegung sagt, in welche Richtung es geht. */
.pf-shelves.is-removing .pf-vase.is-clickable:hover .pf-vase-stage img { transform: translateY(5px) scale(.95); }
.pf-shelves.is-removing .pf-vase.is-clickable:hover .pf-count { background: var(--warn); border-color: var(--warn); color: #fff; }
.pf-empty {
  text-align: center; padding: var(--sp-8) var(--sp-5);
  border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--surface);
}
.pf-empty strong { display: block; font-size: var(--text-lg); margin-bottom: 6px; }
.pf-empty p { color: var(--fg-muted); font-size: var(--text-sm); margin-bottom: var(--sp-4); }

/* --- 3. Die Vase als Gegenstand ----------------------------- */

.pf-vase {
  --h: 116px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; margin: 0; min-width: 0;
  animation: pf-rise .45s var(--ease) both; animation-delay: var(--d, 0ms);
}
.pf-vase-sm { --h: 80px; }
.pf-vase-md { --h: 116px; }
.pf-vase-lg { --h: 148px; }

/* Die Bühne ist immer gleich hoch, das Bild wächst darin nach oben.
   Dadurch stehen alle Vasen auf einer Linie und die Größe stimmt. */
.pf-vase-stage {
  display: flex; align-items: flex-end; justify-content: center;
  height: var(--h); width: calc(var(--h) * .78);
}
/* Die Plaketten hängen an der Vase, nicht an der Bühne – sonst schweben
   sie bei einer kleinen Globo S weit über dem Gefäß. */
.pf-vase-body { position: relative; display: inline-flex; align-items: flex-end; }
.pf-vase-stage img {
  height: calc(var(--h) * var(--s, 1)); width: auto; max-width: 100%;
  object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 6px 8px rgba(16, 23, 19, .18));
  transition: transform .18s var(--ease), filter .18s var(--ease);
  user-select: none; -webkit-user-drag: none;
}
.pf-vase-name {
  display: flex; align-items: center; gap: 5px; max-width: 100%;
  font-size: var(--text-xs); color: var(--fg-2); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-vase-name i { flex: none; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(16,23,19,.15); }

.pf-size, .pf-count {
  position: absolute; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
}
/* Größenkennung sitzt am Fuß der Vase – dort, wo man sie vergleicht. */
.pf-size {
  bottom: -7px; left: 50%; transform: translateX(-50%);
  min-width: 20px; height: 18px; padding: 0 6px; border-radius: var(--radius-full);
  background: var(--fg); color: #fff;
}
.pf-count {
  top: -9px; right: -10px;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-full);
  background: var(--surface); color: var(--fg); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-sm);
}

/* „2× nötig“ hängt links an der Vase, die Stückzahl rechts – so bleiben
   Regalbestand und Bedarf auf einen Blick auseinanderzuhalten. */
.pf-need {
  position: absolute; top: -9px; left: -12px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 8px; border-radius: var(--radius-full);
  background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1; white-space: nowrap;
}
.pf-vase.is-wanted .pf-vase-name { color: var(--accent); font-weight: 650; }

.pf-vase.is-clickable { cursor: pointer; }
.pf-vase.is-clickable:hover .pf-vase-stage img { transform: translateY(-6px) scale(1.05); }
.pf-vase.is-clickable:active .pf-vase-stage img { transform: translateY(-2px) scale(.99); }
.pf-vase.is-draggable { cursor: grab; touch-action: none; }
.pf-vase.is-draggable:hover .pf-vase-stage img { transform: translateY(-6px) rotate(-2deg); }
.pf-vase.is-lifting { opacity: .22; }

/* Bedeutungsfarben: fehlt = Schatten, im Paket = bestätigt. */
.pf-vase.is-missing .pf-vase-stage img { filter: grayscale(1) opacity(.45); }
.pf-vase.is-missing .pf-vase-name { color: var(--fg-muted); }
/* Ein Schatten allein ist mehrdeutig – die fehlende Vase sagt es dazu. */
.pf-vase.is-missing .pf-vase-body::after {
  content: "fehlt"; position: absolute; top: -9px; right: -12px;
  padding: 2px 8px; border-radius: var(--radius-full);
  background: var(--bg-soft); color: var(--fg-muted);
  font-size: 10px; font-weight: 700; line-height: 1.5;
}
.pf-vase.is-missing.has-count .pf-vase-body::after { content: none; }
.pf-vase.is-faded .pf-vase-stage img { filter: saturate(.35) opacity(.55); }
.pf-vase.is-packed .pf-vase-body::after {
  content: ""; position: absolute; inset: auto -4px -8px -4px; height: 4px;
  border-radius: var(--radius-full); background: var(--ok);
}
.pf-vase.is-fresh { animation: pf-pop .5s var(--ease) both; }

@keyframes pf-rise {
  from { opacity: 0; transform: translateY(16px) scale(.92); }
  to { opacity: 1; transform: none; }
}
@keyframes pf-pop {
  0% { transform: scale(.6) translateY(-18px); opacity: 0; }
  55% { transform: scale(1.14) translateY(0); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Der mitgezogene Schatten der Vase. */
.pf-ghost {
  position: fixed; z-index: 9999; pointer-events: none; margin: 0;
  animation: none; opacity: .95; transform: rotate(-5deg) scale(1.06);
}
.pf-ghost .pf-vase-stage img { filter: drop-shadow(0 18px 20px rgba(16, 23, 19, .3)); }
body.pf-dragging { cursor: grabbing; user-select: none; }

/* --- 4. Regal ---------------------------------------------- */

.pf-shelves { display: flex; flex-direction: column; gap: var(--sp-6); }
.pf-shelf { position: relative; }
.pf-shelf-head {
  display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-2);
}
.pf-shelf-head strong { font-size: var(--text-md); font-weight: 650; }
.pf-shelf-head span { color: var(--fg-muted); font-size: var(--text-xs); }
.pf-shelf-items {
  display: flex; align-items: flex-end; flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-5); padding: 0 var(--sp-4) var(--sp-2);
  min-height: 40px;
}
/* Das Brett, auf dem die Vasen stehen. */
.pf-shelf-board {
  height: 10px; border-radius: 3px; margin-top: var(--sp-2);
  background: linear-gradient(var(--pf-board), var(--pf-board-edge));
  box-shadow: 0 6px 12px rgba(16, 23, 19, .16);
}

/* --- 5. Packtisch ------------------------------------------ */

.pf-picker { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.pf-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 8px 14px; border-radius: var(--radius-full);
  border: 1px solid var(--line); background: var(--surface);
  font: inherit; font-size: var(--text-sm); color: var(--fg-2); cursor: pointer;
}
.pf-chip span { color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.pf-chip:hover { border-color: var(--line-strong); }
.pf-chip.is-active { background: var(--fg); border-color: var(--fg); color: #fff; }
.pf-chip.is-active span { color: rgba(255,255,255,.7); }

.pf-progress {
  position: relative; height: 30px; border-radius: var(--radius-full);
  background: var(--bg-soft); overflow: hidden; margin-bottom: var(--sp-5);
  display: flex; align-items: center;
}
.pf-progress b {
  position: absolute; inset: 0 auto 0 0; background: var(--accent);
  transition: width .35s var(--ease);
}
/* Die Beschriftung liegt über dem Balken und muss auf beiden Gründen
   lesbar bleiben – deshalb ein eigener heller Grund statt Blendmodus. */
.pf-progress span {
  position: relative; margin-left: 14px; padding: 3px 10px;
  border-radius: var(--radius-full); background: var(--surface);
  font-size: var(--text-xs); font-weight: 600; color: var(--fg-2);
}

.pf-packing { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: start; }
.pf-zone {
  position: relative; border-radius: var(--radius-lg); padding: var(--sp-4);
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.pf-zone-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.pf-zone-head h2 { font-size: var(--text-md); font-weight: 650; }
.pf-zone-head span { color: var(--fg-muted); font-size: var(--text-xs); }
.pf-zone-body {
  display: flex; align-items: flex-end; flex-wrap: wrap;
  gap: var(--sp-4); min-height: 170px;
}
.pf-zone-empty { color: var(--fg-muted); font-size: var(--text-sm); align-self: center; margin: auto; }
.pf-dropzone.is-over {
  border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); transform: translateY(-2px);
}

/* Die Regalseite trägt das ganze Lager, nicht nur den Auftrag. Damit der
   Karton daneben nicht davonwandert, scrollt sie in sich selbst. */
.pf-shelfzone { display: flex; flex-direction: column; }
.pf-zone-stack {
  display: flex; flex-direction: column; gap: var(--sp-5);
  max-height: 58vh; min-height: 170px; overflow-y: auto;
  padding-right: var(--sp-2);
}
.pf-zone-stack .pf-shelf-items { gap: var(--sp-3) var(--sp-4); padding: 0 var(--sp-2) var(--sp-2); }

/* Der Knopf für den nächsten Kunden steht bei den offenen Kartons. */
.pf-chip-new { border-style: dashed; }
.pf-chip-new:hover { border-color: var(--fg); }

.pf-newcarton {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); padding: var(--sp-5); margin-bottom: var(--sp-5);
  animation: pf-rise .35s var(--ease) both;
}
.pf-newcarton-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.pf-newcarton-head h2 { font-size: var(--text-lg); font-weight: 650; }
.pf-newcarton-head p { color: var(--fg-muted); font-size: var(--text-sm); margin-top: 2px; }
.pf-newcarton-list { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.pf-newcarton-new { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.pf-newcarton-new input { flex: 1; min-width: 220px; }

/* Kundenregal: rechte Spalte trägt das Regal des Kunden und darunter die
   Kiste für alles, was nicht zurückkommt. */
.pf-side { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.pf-custzone .pf-zone-stack { max-height: 46vh; }
.pf-weg {
  border-style: dashed; border-color: var(--line-strong); background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 108px;
}
.pf-weg-body { display: flex; flex-direction: column; gap: 4px; max-width: 340px; }
.pf-weg-body strong { font-size: var(--text-md); }
.pf-weg-body span { color: var(--fg-muted); font-size: var(--text-xs); line-height: 1.5; }
.pf-weg.is-over { border-color: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); background: var(--danger-soft); }

/* Der Karton: Pappe mit offenen Klappen, die sich beim Fertigwerden schließen. */
.pf-carton {
  background: linear-gradient(var(--pf-carton), var(--pf-carton-edge));
  border-color: var(--pf-carton-edge);
  box-shadow: inset 0 10px 22px rgba(120, 92, 40, .18);
  padding-top: var(--sp-6);
}
.pf-carton .pf-zone-head h2, .pf-carton .pf-zone-head span { color: #4a3a1c; }
.pf-carton-flaps { position: absolute; inset: 0 0 auto 0; height: 26px; overflow: hidden; pointer-events: none; }
.pf-carton-flaps i {
  position: absolute; top: 0; width: 50%; height: 26px;
  background: var(--pf-carton-tape); border-bottom: 1px solid var(--pf-carton-edge);
  transition: transform .4s var(--ease);
}
.pf-carton-flaps i:first-child { left: 0; transform-origin: left center; transform: translateY(-72%) rotate(-7deg); border-radius: var(--radius-lg) 0 0 0; }
.pf-carton-flaps i:last-child { right: 0; transform-origin: right center; transform: translateY(-72%) rotate(7deg); border-radius: 0 var(--radius-lg) 0 0; }
.pf-carton.is-full .pf-carton-flaps i { transform: none; }
.pf-carton.is-full { box-shadow: inset 0 10px 22px rgba(120, 92, 40, .18), 0 0 0 3px var(--ok-soft); }

.pf-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-5);
  padding-top: var(--sp-4); border-top: 1px solid var(--line);
}
.pf-foot p { color: var(--fg-2); font-size: var(--text-base); }
.btn-lg { height: 46px; padding: 0 22px; font-size: var(--text-base); }

/* --- 6. Übersicht: Kacheln --------------------------------- */

.pf-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--sp-4); margin-bottom: var(--sp-5);
}
.pf-tile {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: var(--sp-5); border-radius: var(--radius-lg);
  border: 1px solid var(--line); background: var(--surface);
  font: inherit; color: var(--fg); cursor: pointer;
  animation: pf-rise .5s var(--ease) both; animation-delay: var(--d, 0ms);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.pf-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pf-tile.is-active { border-color: var(--fg); box-shadow: 0 0 0 3px var(--bg-soft); }
.pf-tile-value { font-size: 2.6rem; font-weight: 700; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.pf-tile-label { font-size: var(--text-base); font-weight: 600; margin-top: 6px; }
.pf-tile-hint { color: var(--fg-muted); font-size: var(--text-xs); }
.pf-tile.is-warn .pf-tile-value { color: var(--warn); }

.pf-detail {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); padding: var(--sp-5);
  animation: pf-rise .35s var(--ease) both;
}
.pf-detail-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.pf-detail-head h2 { font-size: var(--text-lg); font-weight: 650; }
.pf-detail-actions { display: flex; gap: var(--sp-2); }
.pf-detail-empty { color: var(--fg-muted); font-size: var(--text-sm); padding: var(--sp-5) 0; text-align: center; }
.pf-detail-list { display: flex; flex-direction: column; }
.pf-detail-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, 160px) auto;
  align-items: center; gap: var(--sp-4);
  padding: var(--sp-3); border: 0; border-top: 1px solid var(--line);
  background: none; font: inherit; color: var(--fg); text-align: left; cursor: pointer;
}
.pf-detail-list > .pf-detail-row:first-child { border-top: 0; }
.pf-detail-row:hover { background: var(--bg-soft); }
.pf-detail-row > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-detail-row small { color: var(--fg-muted); font-size: var(--text-xs); }
.pf-detail-row > strong { font-variant-numeric: tabular-nums; }
.pf-mini-bar { height: 8px; border-radius: var(--radius-full); background: var(--bg-soft); overflow: hidden; }
.pf-mini-bar b { display: block; height: 100%; background: var(--accent); border-radius: inherit; }

/* --- 7. Werkbank: Aufträge --------------------------------- */

/* auto-fill statt auto-fit: eine einzelne Karte soll nicht über die
   ganze Breite gezogen werden, sondern ihre Spaltenbreite behalten. */
.pf-orders { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--sp-4); }
.pf-order {
  border: 1px solid var(--line); border-left: 4px solid var(--line-strong);
  border-radius: var(--radius-lg); background: var(--surface); padding: var(--sp-4);
  animation: pf-rise .45s var(--ease) both; animation-delay: var(--d, 0ms);
}
.pf-order.tone-warn { border-left-color: var(--warn); }
.pf-order.tone-ok { border-left-color: var(--ok); }
.pf-order-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.pf-order-head h2 { font-size: var(--text-md); font-weight: 650; }
.pf-order-head p { color: var(--fg-muted); font-size: var(--text-xs); margin-top: 2px; }
.pf-order-bar { height: 6px; border-radius: var(--radius-full); background: var(--bg-soft); overflow: hidden; margin-bottom: var(--sp-2); }
.pf-order-bar b { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width .35s var(--ease); }
.pf-order-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  color: var(--fg-muted); font-size: var(--text-xs); margin-bottom: var(--sp-4);
}
.pf-order-meta .pf-dot:not(:first-child) { margin-left: var(--sp-3); }
.pf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); flex: none; }
.pf-dot.is-packed { background: var(--ok); }
.pf-dot.is-ready { background: var(--accent); }
.pf-dot.is-missing { background: var(--warn); }
/* Modellgruppen fließen nebeneinander – sonst wird aus vier Farben
   eine Karte von einem Meter Höhe. */
.pf-order-groups { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-5); }
.pf-order-group { min-width: 0; }
.pf-order-group + .pf-order-group { padding-left: var(--sp-5); border-left: 1px solid var(--line); }
.pf-order-group-label { display: block; color: var(--fg-muted); font-size: var(--text-xs); margin-bottom: var(--sp-2); }
.pf-order-items { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); }
.pf-order-produce { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-3); }

/* --- 8. Palette -------------------------------------------- */

.pf-palette {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); padding: var(--sp-5); margin-bottom: var(--sp-6);
  animation: pf-rise .35s var(--ease) both;
}
.pf-palette-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.pf-palette-head h2 { font-size: var(--text-lg); font-weight: 650; }
.pf-palette-head p { color: var(--fg-muted); font-size: var(--text-sm); margin-top: 2px; }
.pf-palette-group + .pf-palette-group { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.pf-palette-label { color: var(--fg-muted); font-size: var(--text-xs); margin-bottom: var(--sp-2); }
.pf-palette-items { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); }

/* --- 9. Schmalere Fenster ---------------------------------- */

/* Regal und Karton stehen immer nebeneinander: Untereinander müsste man
   beim Ziehen scrollen, und genau das soll der Packtisch ersparen.
   Auf schmalen Fenstern schrumpfen stattdessen Vasen und Abstände. */
@media (max-width: 980px) {
  .pf-packing { gap: var(--sp-3); }
  .pf-zone { padding: var(--sp-3); }
  .pf-packing .pf-vase { --h: 84px; }
  .pf-zone-body { gap: var(--sp-3); min-height: 140px; }
  .pf-zone-stack { gap: var(--sp-4); min-height: 140px; max-height: 62vh; }
  .pf-carton { padding-top: var(--sp-5); }
}

@media (prefers-reduced-motion: reduce) {
  .pf-vase, .pf-tile, .pf-order, .pf-detail, .pf-palette, .pf-newcarton { animation: none; }
  .pf-vase.is-fresh { animation: none; }
  .pf-vase.is-clickable:hover .pf-vase-stage img,
  .pf-vase.is-draggable:hover .pf-vase-stage img { transform: none; }
}


/* ============================================================
   KUNDENPORTAL (Master-Seite)
   ------------------------------------------------------------
   Was das Lager Tool vom Kundenportal zeigt: die Plakette
   „Kundenanfrage" an Lieferungen und Aufträgen, der Portal-Zugang
   in den Stammdaten, die Meldungen in der Kundenakte und das
   Panel auf der Übersicht. Gleiche Sprache wie Design-System v5:
   flache Karten, normale Beschriftungen, Radien 8/12/16.
   ============================================================ */

.badge-portal { background: var(--accent-soft); color: var(--accent-fg); }
.log-type-kundenmeldung, .log-type-kundenwunsch, .log-type-portalzugang { background: var(--accent-soft); color: var(--accent-fg); }

/* Übersicht: das Portal-Panel liegt in voller Breite unter den zwei Spalten. */
.dash-portal { grid-column: 1 / -1; }
.dash-portal .list-row > span:first-child { min-width: 0; }
.portal-more { color: var(--fg-muted); font-size: var(--text-sm); margin-top: var(--sp-2); }

/* Stammdaten: Zugang verwalten – Feld und Knöpfe in einer Zeile, die Knöpfe
   auf Höhe des Eingabefelds; am Handy wandern sie darunter. */
.portal-access-state { color: var(--fg-muted); font-size: var(--text-sm); margin-bottom: var(--sp-3); }
.portal-access-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.portal-access-row .field { flex: 1 1 260px; max-width: 420px; min-width: 0; }
.portal-access-row .row-actions { flex: 1 1 auto; gap: var(--sp-2); align-self: flex-end; }

/* Startpasswort: einmal sichtbar, per Klick komplett markiert. */
.portal-secret code {
  display: inline-block; font-family: var(--font-mono); font-size: var(--text-md); font-weight: 700;
  letter-spacing: .06em; background: var(--bg-sunken); border-radius: var(--radius-sm); padding: 6px 10px;
  margin: var(--sp-1) 0; user-select: all; -webkit-user-select: all;
}
.portal-secret p { color: var(--fg-2); }

/* Kundenakte: Meldungen – Zeitpunkt · Inhalt · Status, im Rhythmus des Protokolls. */
.portal-event-list { display: flex; flex-direction: column; }
.portal-event {
  display: grid; grid-template-columns: 130px minmax(0, 1fr) auto;
  gap: var(--sp-3); align-items: start;
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); font-size: var(--text-base);
}
.portal-event:last-child { border-bottom: none; }
.portal-event-time { color: var(--fg-muted); font-variant-numeric: tabular-nums; font-size: var(--text-sm); padding-top: 3px; }
.portal-event-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.portal-event-main strong { font-weight: 600; }
.portal-event-items { color: var(--fg-2); font-size: var(--text-sm); }
.portal-event-main .muted { font-size: var(--text-sm); }
.portal-event-status { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); }
.portal-event-status .row-actions { justify-content: flex-end; }

/* Handy: Zeitpunkt über dem Inhalt, Status rechts daneben; Knöpfe füllen die Zeile. */
@media (max-width: 640px) {
  .portal-event { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-3); }
  .portal-event-time { grid-column: 1 / -1; padding-top: 0; }
  .portal-access-row .field { max-width: none; flex-basis: 100%; }
  .portal-access-row .row-actions { width: 100%; align-self: auto; }
  .portal-access-row .row-actions .btn { flex: 1 1 auto; }
  .portal-secret .row-actions { width: 100%; }
  .portal-secret .row-actions .btn { flex: 1 1 auto; }
}

/* ============================================================
   RESPONSIVE v7 — Laptop · iPad · Handy
   ------------------------------------------------------------
   Drei Stufen: das Handy (≤ 640 px) bekommt eine Tab-Leiste am
   unteren Rand und kompakte Zeilen; das iPad (641–1024 px) behält
   die Kopfzeile und nutzt seine Breite für einzeilige Listen; der
   Laptop bleibt, wie er ist. Diese Ebene steht bewusst ganz am Ende
   und überschreibt die älteren Umbrüche bei 860/560 px dort, wo die
   Zeilen zu früh gestapelt wurden.
   ============================================================ */

/* Symbole gibt es nur in der Tab-Leiste am Handy. */
.nav-icon { display: none; }
.nav-btn { display: inline-flex; align-items: center; justify-content: center; }

/* ---------- iPad und schmale Laptops (641–1024 px) ---------- */
@media (min-width: 641px) and (max-width: 1024px) {
  .container, .header-inner { padding-left: 20px; padding-right: 20px; }
  .main { padding: 22px 20px 72px; }

  /* Kopfzeile bleibt eine Zeile: Logo · Bereiche · Sync-Status. */
  .header-inner { flex-wrap: nowrap; gap: 12px; }
  .app-nav { order: 0; width: auto; flex: 1 1 auto; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; }
  .app-nav::-webkit-scrollbar { display: none; }
  .nav-btn { flex: 0 0 auto; padding: 8px 11px; font-size: .88rem; }

  /* Lager: eine Zeile je Farbe bzw. Modell. */
  .inventory-summary-row { grid-template-columns: minmax(140px, auto) minmax(0, 1fr) auto; gap: 14px; padding: 12px 14px; }
  .inventory-summary-details { grid-column: auto; }

  /* Aufträge: Werkzeugleiste und Gruppenköpfe einzeilig, Modelle zweispaltig. */
  .auftrag-search { flex: 1 1 160px; margin-left: auto; }
  .auftrag-section-head { flex-wrap: nowrap; }
  .auftrag-section-meta { flex: 1 1 auto; padding-left: 0; white-space: nowrap; }
  .auftrag-models { columns: 2; }
  .auftrag-models.is-production { columns: 1; }

  /* Lieferungen: Produkt · Zahlen · Knöpfe in einer Zeile. */
  .delivery-pack-row { grid-template-columns: minmax(0, 1.2fr) minmax(130px, auto) auto; gap: 12px; }
  .delivery-pack-row .packing-actions { grid-column: auto; justify-content: flex-end; }

  /* Kundenakte: Positionen einer Lieferung in zwei Zeilen statt drei. */
  .packing-row { grid-template-columns: minmax(0, 1fr) 56px 56px 96px auto; gap: 10px; }
  .packing-metric span { white-space: nowrap; }
  .packing-row .packing-actions { grid-column: 5; grid-row: 1; justify-content: flex-end; }
  .packing-row-status { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
}

@media (max-width: 900px) {
  .brand-sub { display: none; }
}

/* ---------- Handy (≤ 640 px) ---------- */
@media (max-width: 640px) {
  .container { padding: 0 16px; }
  .main { padding: 16px 16px calc(88px + env(safe-area-inset-bottom, 0px)); }

  /* Kopfzeile: nur noch Logo-Menü und Sync-Status. Ohne Weichzeichner,
     damit die Tab-Leiste darunter am Fensterrand haften kann. */
  .app-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(246, 247, 244, .97); }
  .header-inner { padding: 8px 16px; gap: 10px; flex-wrap: nowrap; justify-content: space-between; }
  .brand-logo { height: 26px; }
  .brand { position: static; }
  .brand-menu {
    left: 12px; right: 12px; top: calc(100% + 4px); min-width: 0;
    max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); overflow-y: auto;
    animation: none;
  }

  /* Bereiche als Tab-Leiste am unteren Rand – mit dem Daumen erreichbar. */
  .app-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
    width: auto; order: 0; flex: none;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(246, 247, 244, .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
  }
  .nav-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 50px; min-width: 0; padding: 4px 2px; border-radius: var(--radius-sm); overflow: hidden;
    color: var(--fg-muted); font-size: .66rem; font-weight: 600; letter-spacing: .01em; line-height: 1.1; white-space: nowrap;
  }
  .nav-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .nav-btn:hover, .nav-btn.active { background: transparent; color: var(--fg); }
  .nav-icon { display: grid; place-items: center; width: 46px; height: 28px; border-radius: var(--radius-full); transition: background .15s var(--ease), color .15s var(--ease); }
  .nav-btn.active .nav-icon { background: var(--fg); color: #fff; }

  /* Überschriften und Flächen etwas kompakter. */
  .section-head { margin-bottom: 14px; gap: 10px 12px; }
  .section-head h1 { font-size: 1.4rem; }
  .section-sub { font-size: .84rem; }
  .panel { padding: 14px; }

  /* Kennzahlen: zwei nebeneinander statt sieben untereinander. */
  .kpi-grid, .analytics-kpis, .ff-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi, .analytics-kpis article, .ff-kpis > div { min-height: 0; padding: 12px 14px; }
  .kpi-value, .analytics-kpis strong, .ff-kpis strong { font-size: 1.3rem; }

  /* Lager: Name und Stückzahl in einer Zeile, Modelle darunter, Pfeil rechts. */
  .inventory-summary-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main arrow" "details details"; gap: 8px 10px; padding: 12px 14px; }
  .inventory-summary-main { grid-area: main; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
  .inventory-summary-details { grid-area: details; gap: 5px; }
  .inventory-summary-arrow { grid-area: arrow; }
  .inventory-detail { padding: 2px 8px; font-size: .74rem; }
  /* Die beiden Umschalter sind selbsterklärend – ohne Beschriftung passen sie nebeneinander. */
  .inventory-toolbar { gap: 8px; }
  .inventory-toolbar .toolbar-label { display: none; }

  /* Aufträge: Suche und „Alle einklappen" teilen sich eine Zeile,
     Gruppenkopf mit Titel und Pille oben, Details darunter. */
  .auftrag-toolbar { padding: 10px 12px; gap: 8px; }
  .auftrag-search { flex: 1 1 120px; margin-left: 0; }
  .auftrag-section-head { flex-wrap: wrap; gap: 4px 10px; padding: 12px 14px; }
  .auftrag-section-head .pill { order: 3; margin-left: auto; }
  .auftrag-section-meta { order: 4; flex: 1 1 100%; padding-left: 28px; white-space: normal; }
  .auftrag-section-body > .auftrag-card { margin: 8px; }
  .auftrag-head { padding: 10px 12px; }
  .auftrag-body { padding: 10px 12px 12px; }

  /* Lieferungen: Kunde als Titel, Zähler rechts; Position in zwei Zeilen. */
  .delivery-workbench-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px 12px; padding: 12px 14px; }
  .delivery-workbench-head h2 { margin: 0 0 4px; font-size: 1rem; }
  .delivery-workbench-head-actions { flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 6px; width: auto; }
  .delivery-package-total { align-items: flex-end; }
  .delivery-package-total strong { font-size: 1.25rem; }
  .delivery-pack-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "product product" "counts actions"; gap: 8px 10px; padding: 10px 14px; }
  .delivery-pack-product { grid-area: product; }
  .delivery-pack-counts { grid-area: counts; grid-template-columns: repeat(2, minmax(52px, auto)); gap: 12px; }
  .delivery-pack-row .packing-actions { grid-area: actions; justify-content: flex-end; }
  .delivery-pack-row .packing-actions .btn,
  .delivery-pack-row .packing-actions .packing-step-btn,
  .delivery-pack-row .packing-actions .packing-all-btn { flex: 0 0 auto; }
  .delivery-workbench-foot { padding: 12px 14px; gap: 10px; }
  .packing-workflow-note { padding: 10px 12px; font-size: .78rem; }

  /* Kundenakte: Zurück und Löschen oben, Name darunter; Reiter wischbar. */
  .detail-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "back delete" "title title"; gap: 4px 10px; margin-bottom: 12px; }
  .detail-head > .btn-back { grid-area: back; justify-self: start; }
  .detail-head > .detail-title { grid-area: title; flex-wrap: wrap; gap: 6px 10px; }
  .detail-head > .btn:not(.btn-back) { grid-area: delete; justify-self: end; }
  .detail-title h1 { font-size: 1.3rem; line-height: 1.2; }
  .subtabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 0; margin: 0 -16px 16px; padding: 0 16px; }
  .subtabs::-webkit-scrollbar { display: none; }
  .subtab { flex: 0 0 auto; white-space: nowrap; padding: 10px 12px; font-size: .86rem; }

  /* Lieferung in der Kundenakte: Kennzahlen dreispaltig, Position zweizeilig. */
  .packing-progress { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .packing-progress > div { flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 9px; }
  .packing-progress strong { font-size: 1rem; }
  .packing-progress span { font-size: .66rem; line-height: 1.2; }
  .packing-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "product status" "metrics actions"; gap: 8px 10px; padding: 10px; }
  .packing-product { grid-area: product; }
  .packing-row-status { grid-area: status; grid-column: auto; justify-content: flex-end; }
  .packing-metrics { display: flex; grid-area: metrics; gap: 14px; }
  .packing-metric { align-items: flex-start; text-align: left; }
  .packing-row .packing-actions { grid-area: actions; grid-column: auto; justify-content: flex-end; }
  .packing-row .packing-actions .btn { flex: 0 0 auto; }
  .packing-step-btn { min-width: 42px; padding-inline: 8px; }

  /* Legende: der Begriff bleibt in einer Zeile, nur die Erklärung darf umbrechen. */
  .packing-legend { gap: 6px 14px; padding: 8px 12px; font-size: .78rem; }
  .packing-legend > span { flex-wrap: wrap; }
  .packing-legend strong { white-space: nowrap; }

  /* Markt: die Filter-Umschalter brechen um, statt seitlich zu scrollen. */
  .market-overview-toolbar .segmented { flex-wrap: wrap; overflow: visible; border-radius: var(--radius-sm); }
  .market-overview-toolbar .seg { flex: 1 1 auto; }
}

/* ============================================================
   KALKULATION — Material, Kosten je Stück, Marge
   ============================================================ */

.hint-warn {
  background: var(--warn-soft, #fdf4e3); border: 1px solid var(--warn, #b8860b);
  color: var(--fg); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 16px;
  font-size: .88rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.hint-warn strong { font-weight: 700; }

/* --- Material --- */
.material-card { margin-bottom: 14px; padding: 16px 18px; }
.material-head { display: flex; align-items: center; gap: 14px; }
.material-img {
  width: 54px; height: 54px; object-fit: contain; flex: 0 0 54px;
  background: var(--bg-soft); border-radius: var(--radius-sm); padding: 4px;
}
.material-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.material-title strong { font-size: 1rem; font-weight: 650; }
.material-title small { color: var(--fg-muted); font-size: .82rem; }
.material-used { color: var(--fg-2) !important; }
.material-used.is-unused { font-style: italic; }
.material-stock { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.material-stock strong { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.material-stock small { font-size: .74rem; color: var(--fg-muted); }
.material-stock.stock-low strong { color: var(--danger); }
.material-stock.stock-low small { color: var(--danger); font-weight: 600; }
.material-stock.stock-ordered strong, .material-stock.stock-unknown strong { color: var(--fg-muted); }

.material-body { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.material-stock-input { display: flex; flex-direction: column; gap: 4px; }
.material-stock-input span { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-muted); font-weight: 700; }
.material-stock-input input {
  width: 110px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 7px 10px; font: inherit; font-weight: 600; background: var(--surface); color: var(--fg);
}
.material-sync { color: var(--fg-muted); font-size: .78rem; margin-top: 10px; }
.material-orders { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.material-order { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .86rem; flex-wrap: wrap; }

.material-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.material-form label, .calc-fields label, .calc-name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.material-form span, .calc-fields span, .calc-name > span, .calc-qty span {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-muted); font-weight: 700;
}
.material-form input, .calc-fields input, .calc-name input, .calc-qty input, .calc-line input {
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 8px 10px; font: inherit; background: var(--surface); color: var(--fg); min-width: 0;
}
.material-form-wide { grid-column: 1 / -1; }
.material-form-actions { margin-top: 14px; justify-content: space-between; }

/* --- Kalkulation: Karte --- */
.calc-card { margin-bottom: 14px; padding: 0; overflow: hidden; }
.calc-card-head { display: flex; align-items: center; gap: 16px; padding: 14px 18px; flex-wrap: wrap; }
.calc-card-toggle {
  flex: 1; min-width: 160px; display: flex; align-items: center; gap: 10px;
  background: none; border: 0; font: inherit; color: var(--fg); text-align: left; cursor: pointer; padding: 0;
}
.calc-card-toggle::before {
  content: '›'; font-size: 1.3rem; color: var(--fg-muted); line-height: 1;
  transition: transform .15s var(--ease);
}
.calc-card.is-open .calc-card-toggle::before { transform: rotate(90deg); }
.calc-card-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.calc-card-name strong { font-size: 1rem; font-weight: 650; }
.calc-card-name small { color: var(--fg-muted); font-size: .8rem; }
.calc-card-num { display: flex; flex-direction: column; gap: 1px; text-align: right; }
.calc-card-num small { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-muted); font-weight: 700; }
.calc-card-num strong { font-variant-numeric: tabular-nums; font-weight: 650; }

.margin-badge {
  display: flex; flex-direction: column; align-items: flex-end; gap: 0;
  background: var(--bg-soft); border-radius: var(--radius-sm); padding: 6px 12px; min-width: 96px;
}
.margin-badge strong { font-variant-numeric: tabular-nums; font-weight: 700; }
.margin-badge small { font-size: .72rem; color: var(--fg-muted); }
.margin-badge.is-win { background: var(--ok-soft, #e8f2e4); }
.margin-badge.is-win strong { color: var(--ok, #4a7a3a); }
.margin-badge.is-loss { background: var(--danger-soft); }
.margin-badge.is-loss strong { color: var(--danger); }

.calc-models { border-top: 1px solid var(--line); background: var(--bg-soft); padding: 6px 18px 12px; }
.calc-model-row { display: flex; align-items: center; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.calc-model-row:last-child { border-bottom: 0; }
.calc-model-row > span:first-child { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.calc-model-row strong { font-weight: 650; }
.calc-model-row small { color: var(--fg-muted); font-size: .78rem; }
.calc-model-price { font-variant-numeric: tabular-nums; font-weight: 600; }

/* --- Kalkulation: Detail --- */
.calc-detail { border-top: 1px solid var(--line); padding: 18px; background: var(--surface); }
.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px 24px; }
.calc-block h3 { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-muted); font-weight: 700; margin-bottom: 10px; }
.calc-block .hint { margin: 8px 0; }
.calc-block .segmented { margin-bottom: 10px; }
.calc-line { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.calc-line > select, .calc-line > input:first-child { flex: 1 1 150px; min-width: 130px; }
.calc-qty { flex: 0 0 82px; }
.calc-line-sum { font-variant-numeric: tabular-nums; font-weight: 600; font-size: .86rem; padding-bottom: 9px; white-space: nowrap; }
.calc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }

.calc-summary {
  margin-top: 20px; border-top: 1px solid var(--line); padding-top: 14px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 4px 24px;
}
.cost-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: .9rem; }
.cost-row span { color: var(--fg-2); display: flex; flex-direction: column; }
.cost-row small { color: var(--fg-muted); font-size: .74rem; }
.cost-row strong { font-variant-numeric: tabular-nums; font-weight: 650; }
.cost-row.is-sum { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px; }
.cost-row.is-sum span, .cost-row.is-sum strong { color: var(--fg); font-weight: 700; }

.calc-foot {
  margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px;
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
}
.calc-foot .calc-name { flex: 1 1 180px; }
.calc-foot .btn { margin-left: auto; }

@media (max-width: 640px) {
  /* Am Handy: Name oben, Zahlen als Zweierraster, Knopf über die volle Breite. */
  .calc-card-head { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; }
  .calc-card-toggle { grid-column: 1 / -1; }
  .calc-card-num, .margin-badge { min-width: 0; align-items: flex-start; text-align: left; }
  .margin-badge { padding: 6px 10px; }
  .calc-card-head > .btn { grid-column: 1 / -1; justify-content: center; }
  .calc-models { padding: 6px 14px 12px; }
  .calc-model-row { flex-wrap: wrap; gap: 6px 12px; }
  .calc-model-row > span:first-child { flex: 1 0 100%; }
  .calc-detail { padding: 14px; }
  .material-head { flex-wrap: wrap; }
  .material-stock { align-items: flex-start; text-align: left; width: 100%; }
  .calc-foot .btn { margin-left: 0; }
}