/* Design-Tokens. Whitelabel überschreibt später nur diese Variablen.
   Das Farbschema folgt dem Betriebssystem, bis der Benutzer selbst umschaltet.
   Dann steht data-theme="light" oder "dark" am html-Element. */
:root {
  color-scheme: light;

  /* Rahmen: Navigation und Fläche hinter dem Inhalt, in beiden Modi dunkel. */
  --color-frame: #151515;
  --color-frame-hover: #222222;
  --color-frame-active: #2b2a2a;
  --color-on-frame: #f6f7f8;
  --color-frame-muted: #a3a3a8;
  --color-frame-line: #2a2a2a;
  /* Menüleiste oben und ihre aufgeklappten Listen. */
  --color-topbar: #211f1f;
  --color-menu: #2b2a2a;
  --color-menu-hover: #3a3838;

  /* Warmer Hintergrund hinter den weißen Karten. */
  --color-bg: #f4efe9;
  --color-surface: #ffffff;
  --color-subtle: #f6f7f8;
  --color-subtle-hover: #eceef1;
  --color-border: #ececee;
  --color-input-border: #e2e2e6;
  --color-input-border-hover: #c9c9cf;
  --color-text: #1f1f1f;
  --color-muted: #626262;

  --color-primary: #413dfa;
  --color-primary-hover: #2f2be6;
  --color-on-primary: #ffffff;
  --color-accent-text: #413dfa;
  --color-accent-soft: #ecebff;

  --color-danger: #c8261c;
  --color-danger-text: #b42318;
  --color-danger-soft: #fdecea;
  --color-danger-soft-hover: #fbdcd8;
  --color-ok-bg: #e8f7ee;
  --color-ok-text: #166534;
  --color-error-bg: #fdecea;
  --color-error-text: #9b1c13;
  --color-info-bg: #ecebff;
  --color-info-text: #2e2aa8;
  --color-focus: #413dfa;

  --dot-green: #16a34a;
  --dot-blue: #413dfa;
  --dot-gray: #a1a1aa;
  --dot-amber: #d97706;
  --dot-red: #dc2626;

  --tone-amber: #f5a524;
  --tone-violet: #8b7cff;
  --tone-green: #22c55e;
  --tone-pink: #f0508a;
  --tone-blue: #4f8bff;
  --tone-teal: #2dd4bf;
  --tone-orange: #fb7a3c;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-panel: 18px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  --control-height: 40px;
  --control-height-small: 32px;
  --nav-width: 248px;
  --topbar-height: 38px;
  --nav-width-collapsed: 72px;
  --ease: cubic-bezier(.2, 0, 0, 1);
}

/* Dunkel: einmal fest gewählt, einmal vom System übernommen. Beide Blöcke
   müssen gleich bleiben. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-frame: #0b0b0c;
  --color-frame-hover: #19191b;
  --color-frame-active: #242427;
  --color-frame-muted: #9a9aa2;
  --color-frame-line: #1e1e21;
  --color-topbar: #121110;
  --color-menu: #23211f;
  --color-menu-hover: #302d2a;
  --color-bg: #191715;
  --color-surface: #211f1c;
  --color-subtle: #2a2723;
  --color-subtle-hover: #332f2b;
  --color-border: #322e2a;
  --color-input-border: #3c3732;
  --color-input-border-hover: #534c45;
  --color-text: #f2f2f3;
  --color-muted: #a3a3ab;
  --color-primary-hover: #5551ff;
  --color-accent-text: #a09eff;
  --color-accent-soft: #24224a;
  --color-danger-text: #ff9a92;
  --color-danger-soft: #3a1714;
  --color-danger-soft-hover: #4a1d19;
  --color-ok-bg: #10261a;
  --color-ok-text: #9fe0b5;
  --color-error-bg: #2e1513;
  --color-error-text: #ffb4ad;
  --color-info-bg: #1f1d3d;
  --color-info-text: #c9c8ff;
  --color-focus: #a09eff;
  --dot-blue: #7d7aff;
  --dot-gray: #71717a;
  --dot-amber: #f59e0b;
  --dot-red: #f87171;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-frame: #0b0b0c;
    --color-frame-hover: #19191b;
    --color-frame-active: #242427;
    --color-frame-muted: #9a9aa2;
    --color-frame-line: #1e1e21;
    --color-topbar: #121110;
    --color-menu: #23211f;
    --color-menu-hover: #302d2a;
    --color-bg: #191715;
    --color-surface: #211f1c;
    --color-subtle: #2a2723;
    --color-subtle-hover: #332f2b;
    --color-border: #322e2a;
    --color-input-border: #3c3732;
    --color-input-border-hover: #534c45;
    --color-text: #f2f2f3;
    --color-muted: #a3a3ab;
    --color-primary-hover: #5551ff;
    --color-accent-text: #a09eff;
    --color-accent-soft: #24224a;
    --color-danger-text: #ff9a92;
    --color-danger-soft: #3a1714;
    --color-danger-soft-hover: #4a1d19;
    --color-ok-bg: #10261a;
    --color-ok-text: #9fe0b5;
    --color-error-bg: #2e1513;
    --color-error-text: #ffb4ad;
    --color-info-bg: #1f1d3d;
    --color-info-text: #c9c8ff;
    --color-focus: #a09eff;
    --dot-blue: #7d7aff;
    --dot-gray: #71717a;
    --dot-amber: #f59e0b;
    --dot-red: #f87171;
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
  font: 400 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
body.app { background: var(--color-frame); }
body.plain { background: var(--color-subtle); }

h1 { margin: 0 0 var(--space-4); font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
h2 { margin: 0 0 var(--space-4); font-size: 16px; line-height: 1.3; font-weight: 600; }
h3 { margin: var(--space-4) 0 var(--space-2); font-size: 14px; font-weight: 600; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-text); text-underline-offset: 2px; }
code { font-family: var(--font-mono); font-size: 13px; }

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.icon { width: 18px; height: 18px; flex: none; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--space-2); top: var(--space-2); z-index: 10; padding: var(--space-2) var(--space-3);
  background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.muted { color: var(--color-muted); }
.small { font-size: 13px; }
.spaced { margin-top: var(--space-3); }

/* ---------- Rahmen ---------- */
.shell { display: grid; grid-template-columns: var(--nav-width) minmax(0, 1fr); min-height: calc(100dvh - var(--topbar-height));
  transition: grid-template-columns 200ms var(--ease); }
.panel { min-width: 0; min-height: calc(100dvh - var(--topbar-height) - 16px); margin: 8px 8px 8px 0; background: var(--color-bg);
  border-radius: var(--radius-panel); }
.content { width: 100%; max-width: 1240px; padding: var(--space-6) var(--space-8) var(--space-8); }
.center { display: grid; place-items: center; min-height: 100dvh; padding: var(--space-4); }

/* ---------- Navigation ---------- */
.sidebar { position: sticky; top: var(--topbar-height); display: flex; flex-direction: column; gap: var(--space-4);
  height: calc(100dvh - var(--topbar-height)); padding: var(--space-4) var(--space-3); overflow-y: auto;
  color: var(--color-on-frame); background: var(--color-frame); }

.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  min-height: 40px; padding: 0 var(--space-1) 0 var(--space-2); }
.brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; color: inherit; text-decoration: none; }
.brand-mark { flex: none; width: 28px; height: 28px; border-radius: 7px; }
.brand-name { overflow: hidden; font-weight: 600; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; }
/* Firmenlogo: auf heller Fläche, weil die Leiste dunkel ist und viele Logos
   dunkle Schrift haben. Es wird auf die freie Breite und 44 px Höhe verkleinert,
   nie vergrößert. */
.brand-logo { flex: 1 1 auto; }
.brand-plate { display: flex; align-items: center; justify-content: center; min-width: 0; max-width: 100%;
  padding: 6px 10px; border-radius: var(--radius-sm); background: #fff; }
.brand-plate img { display: block; width: auto; max-width: 100%; height: auto; max-height: 44px; object-fit: contain; }

.sidebar-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--space-4); }
.sidebar-head .menu-button { display: none; }
.menu-button .when-open { display: none; }
.when-closed, .when-open { display: inline-flex; }

.nav { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav-item { position: relative; display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 38px;
  padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: none;
  color: var(--color-frame-muted); font: inherit; font-size: 14px; text-align: left; text-decoration: none;
  cursor: pointer; transition: background-color 150ms ease-out, color 150ms ease-out; }
.nav-item:hover { background: var(--color-frame-hover); color: var(--color-on-frame); }
.nav-item[aria-current="page"] { background: var(--color-frame-active); color: var(--color-on-frame); font-weight: 500; }
.nav-item .icon { width: 18px; height: 18px; }
.nav-label { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nav-group { margin: var(--space-4) 0 var(--space-1); padding: 0 var(--space-3); }
.nav-group-label { color: var(--color-frame-muted); font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; }

.tone-amber .icon { color: var(--tone-amber); }
.tone-violet .icon { color: var(--tone-violet); }
.tone-green .icon { color: var(--tone-green); }
.tone-pink .icon { color: var(--tone-pink); }
.tone-blue .icon { color: var(--tone-blue); }
.tone-teal .icon { color: var(--tone-teal); }
.tone-orange .icon { color: var(--tone-orange); }

.sidebar-foot { display: grid; gap: 2px; margin-top: auto; padding-top: var(--space-3);
  border-top: 1px solid var(--color-frame-line); }
.sidebar-foot form { margin: 0; }

.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-frame-muted); cursor: pointer; }
.icon-button:hover { background: var(--color-frame-hover); color: var(--color-on-frame); }

.avatar { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; margin-left: -5px;
  border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 11px; font-weight: 600; }
.user { min-height: 48px; }
.user-text { display: grid; line-height: 1.25; }
.user-name { overflow: hidden; color: var(--color-on-frame); font-weight: 500; text-overflow: ellipsis; }
.user-sub { color: var(--color-frame-muted); font-size: 12px; }

/* Schalter für den Dunkelmodus. Es gibt zwei Knöpfe, sichtbar ist immer der
   für den Wechsel in den anderen Modus. */
.switch { position: relative; flex: none; width: 32px; height: 18px; border-radius: 999px; background: #3a3a40;
  transition: background-color 150ms ease-out; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; transition: transform 150ms var(--ease); }
.switch-on { background: var(--color-primary); }
.switch-on::after { transform: translateX(14px); }

.pref-light { display: none; }
:root[data-theme="dark"] .pref-dark { display: none; }
:root[data-theme="dark"] .pref-light { display: flex; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pref-dark { display: none; }
  :root:not([data-theme="light"]) .pref-light { display: flex; }
}

.pref-expand { display: none; }

/* Eingeklappt: nur Icons, die Beschriftung erscheint als Tooltip. Sie bleibt im
   DOM und sichtbar für Screenreader, nur durchsichtig. */
@media (min-width: 769px) {
  :root[data-nav="collapsed"] .shell { grid-template-columns: var(--nav-width-collapsed) minmax(0, 1fr); }
  :root[data-nav="collapsed"] .sidebar { overflow: visible; }
  :root[data-nav="collapsed"] .sidebar-head { flex-direction: column; gap: var(--space-3); padding: 0; }
  :root[data-nav="collapsed"] .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  :root[data-nav="collapsed"] .brand-logo { flex: none; }
  :root[data-nav="collapsed"] .brand-plate { width: 40px; height: 40px; padding: 4px; }
  :root[data-nav="collapsed"] .brand-plate img { max-height: 32px; }
  :root[data-nav="collapsed"] .pref-collapse { display: none; }
  :root[data-nav="collapsed"] .pref-expand { display: inline-flex; }
  :root[data-nav="collapsed"] .nav-item { justify-content: center; padding: 0; }
  :root[data-nav="collapsed"] .avatar { margin-left: 0; }
  :root[data-nav="collapsed"] .switch { display: none; }
  :root[data-nav="collapsed"] .nav-group { height: 1px; margin: var(--space-3) var(--space-2); padding: 0;
    background: var(--color-frame-line); }
  :root[data-nav="collapsed"] .nav-group-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  :root[data-nav="collapsed"] .nav-label { position: absolute; left: calc(100% + 12px); top: 50%; z-index: 20;
    flex: none; width: max-content; max-width: 240px; padding: 6px 10px; border-radius: var(--radius-sm);
    background: var(--color-frame-active); color: var(--color-on-frame); font-size: 13px; font-weight: 500;
    box-shadow: 0 6px 20px rgb(0 0 0 / .25); opacity: 0; pointer-events: none;
    transform: translate(-4px, -50%); }
  /* Der Übergang gilt nur beim Einblenden. Ausgeblendet wird sofort, sonst
     bleibt beim Seitenwechsel kurz ein halb sichtbarer Tooltip stehen. */
  :root[data-nav="collapsed"] .nav-item:hover .nav-label,
  :root[data-nav="collapsed"] .nav-item:focus-visible .nav-label { opacity: 1; transform: translate(0, -50%);
    transition: opacity 120ms ease-out, transform 120ms ease-out; }
}

/* ---------- Kopf, Karten, Abschnitte ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-bottom: var(--space-5); }
.page-head h1, .page-head h2 { margin: 0; }
.card .page-head { margin-bottom: var(--space-4); }
.breadcrumb { margin-bottom: var(--space-2); font-size: 13px; }
.breadcrumb a { display: inline-flex; align-items: center; gap: 6px; color: var(--color-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-text); }
.breadcrumb .icon { width: 15px; height: 15px; }

.card { margin-bottom: var(--space-4); padding: var(--space-5) var(--space-6); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.card > :last-child { margin-bottom: 0; }
.card-narrow { width: 100%; max-width: 420px; padding: var(--space-8); margin: 0;
  box-shadow: 0 1px 2px rgb(16 16 20 / .04), 0 12px 32px rgb(16 16 20 / .06); }
.card-narrow h1 { font-size: 20px; }

.logo img { display: block; width: 180px; max-width: 100%; height: auto; margin: 0 auto var(--space-2); }
.brand-center { margin: 0 0 var(--space-6); color: var(--color-muted); font-size: 14px; text-align: center; }

.badge { display: inline-block; margin-left: var(--space-1); padding: 1px var(--space-2); border-radius: 999px;
  background: var(--color-accent-soft); color: var(--color-accent-text); font-size: 12px; font-weight: 600;
  vertical-align: middle; }

/* Status mit farbigem Punkt wie in der Pipeline-Ansicht. */
.status { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot-gray); }
.status-on::before, .status-customer::before { background: var(--dot-green); }
.status-prospect::before { background: var(--dot-blue); }
.status-available::before { background: var(--dot-green); }
.status-maintenance::before { background: var(--dot-amber); }
.status-defective::before { background: var(--dot-red); }
.status-lent::before { background: var(--dot-blue); }

/* Zusammenfassung des Bestands über der Tabelle. */
.stock-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-5); margin: 0 0 var(--space-4); }
.stock-summary strong { font-size: 18px; }

.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.inactive td { color: var(--color-muted); }

/* ---------- Formulare ---------- */
.stack { display: grid; gap: var(--space-4); max-width: 420px; }
/* align-content: start verhindert, dass ein höherer Nachbar im Raster das
   Eingabefeld mit in die Höhe zieht. */
.field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.form-sections { display: block; min-width: 0; }
.form-sections > .card { max-width: 980px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4); }
.grid:last-child { margin-bottom: 0; }
.field-wide { grid-column: span 2; }
@media (max-width: 560px) { .field-wide { grid-column: auto; } }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.group legend { margin-bottom: var(--space-2); font-weight: 600; font-size: 13px; }
.row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.checks { display: grid; gap: var(--space-1); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.form-sections > .actions { margin-top: var(--space-5); }
form:has(> .form-sections) { margin-bottom: var(--space-8); }

label, .label { font-weight: 500; font-size: 13px; color: var(--color-text); }
.label { padding: 0; }
.help { margin: 0; font-size: 12.5px; color: var(--color-muted); }
.field-error { margin: 0; font-size: 12.5px; font-weight: 500; color: var(--color-danger-text); }

/* :where hält die Spezifität bei null, damit Klassen wie .input-icon und der
   Fehlerrahmen ohne Kunstgriffe gewinnen. */
:where(input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="file"]), select, textarea) {
  width: 100%;
  min-height: var(--control-height);
  padding: 0 var(--space-3);
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 14px;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
textarea { padding: var(--space-2) var(--space-3); line-height: 1.5; resize: vertical; }
select { appearance: none; padding-right: 36px; background-image: url("select.svg"); background-repeat: no-repeat;
  background-position: right 12px center; background-size: 16px; cursor: pointer; }
input::placeholder, textarea::placeholder { color: var(--color-muted); opacity: .8; }

:where(input:not([type="checkbox"], [type="radio"]), select, textarea):hover {
  border-color: var(--color-input-border-hover); }
:where(input:not([type="checkbox"], [type="radio"]), select, textarea):focus-visible {
  outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-accent-soft); }

/* Fehlerrahmen: nach den Grundregeln und mindestens gleich spezifisch. */
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: var(--color-danger); box-shadow: 0 0 0 3px var(--color-danger-soft); }

fieldset:disabled :where(input:not([type="checkbox"], [type="radio"]), select, textarea) {
  background-color: var(--color-subtle); border-color: transparent; color: var(--color-muted); cursor: default; }

input[type="file"] { padding: var(--space-2) var(--space-3); border: 1px dashed var(--color-input-border-hover);
  border-radius: var(--radius); background: var(--color-subtle); font: inherit; font-size: 14px; max-width: 100%; }

.check { display: flex; align-items: center; gap: var(--space-2); min-height: 36px; font-weight: 400; font-size: 14px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-primary); cursor: pointer; }

.input-short { max-width: 140px; }
.inline { display: flex; align-items: center; gap: var(--space-2); }
.inline span { white-space: nowrap; }
.inline select { width: auto; min-height: var(--control-height-small); }

/* Suche mit Icon im Feld, gefüllt wie in der Vorlage. */
.search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-5); }
.search.bulk { margin: var(--space-4) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.search .field { flex: 1 1 260px; max-width: 420px; }
.search .field-narrow { flex: 0 1 200px; }
.search .check { min-height: var(--control-height); }
.input-icon { position: relative; }
.input-icon .icon { position: absolute; top: 50%; left: 12px; width: 16px; height: 16px; color: var(--color-muted);
  transform: translateY(-50%); pointer-events: none; }
.input-icon input { padding-left: 38px; background: var(--color-subtle); border-color: transparent; }
.input-icon input:hover { border-color: var(--color-input-border); }
.input-icon input:focus-visible { border-color: var(--color-primary); }

/* ---------- Knöpfe ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: 0 var(--space-4);
  background: var(--color-subtle);
  color: var(--color-text);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}
.button .icon { width: 16px; height: 16px; }
.button:hover { background: var(--color-subtle-hover); }
.button-primary { background: var(--color-primary); color: var(--color-on-primary); }
.button-primary:hover { background: var(--color-primary-hover); }
.button-accent { background: var(--color-surface); border: 1.5px solid var(--color-primary); color: var(--color-accent-text); }
.button-accent:hover { background: var(--color-accent-soft); }
.button-danger { background: var(--color-danger-soft); color: var(--color-danger-text); }
.button-danger:hover { background: var(--color-danger-soft-hover); }
.button-small { min-height: var(--control-height-small); padding: 0 var(--space-3); border-radius: var(--radius-sm); font-size: 13px; }
.button-small .icon { width: 15px; height: 15px; }
.button-link { padding: 0; background: none; border: 0; color: var(--color-accent-text); font: inherit;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* ---------- Meldungen ---------- */
.alert { margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius); font-size: 14px; }
.alert:has(> .icon) { display: flex; align-items: flex-start; gap: 10px; }
.alert > .icon { margin-top: 1px; }
.alert p:last-child { margin-bottom: 0; }
.alert-error { background: var(--color-error-bg); color: var(--color-error-text); }
.alert-ok { background: var(--color-ok-bg); color: var(--color-ok-text); }
.alert-info { background: var(--color-info-bg); color: var(--color-info-text); }

/* ---------- Daten ---------- */
/* position: relative hält auch absolut positionierte Inhalte wie .sr-only im
   Scrollrahmen, sonst verbreitern sie auf schmalen Bildschirmen die Seite. */
.table-wrap { position: relative; overflow-x: auto; margin: 0 calc(-1 * var(--space-6)); padding: 0 var(--space-6); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 500; font-size: 12.5px; color: var(--color-muted); white-space: nowrap; }
th, td { padding: 10px var(--space-3); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color 120ms ease-out; }
tbody tr:hover { background: var(--color-subtle); }
td a { font-weight: 500; text-decoration: none; }
td a:hover { text-decoration: underline; }

.facts { width: auto; min-width: 320px; margin-bottom: var(--space-3); }
.facts th { color: var(--color-text); font-weight: 400; font-size: 14px; }
.facts .indent { padding-left: var(--space-6); color: var(--color-muted); }
.facts tbody tr:hover { background: none; }

.steps { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
.steps li { margin-bottom: var(--space-1); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.tags li { padding: 2px 10px; background: var(--color-subtle); border-radius: 999px; font-size: 12.5px; }

/* QR-Code zur MFA-Einrichtung. Die weiße Fläche gehört zum Code selbst. */
.qr-box { margin: 0 0 var(--space-4); }
.qr { display: block; width: 220px; max-width: 100%; height: auto; border-radius: var(--radius); }
.icon-link { display: inline-flex; align-items: center; gap: 6px; }
.icon-link .icon { width: 16px; height: 16px; }

.secret { display: inline-block; padding: var(--space-2) var(--space-3); background: var(--color-subtle);
  border-radius: var(--radius-sm); word-break: break-all; }
.codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-2);
  margin: 0 0 var(--space-4); padding: 0; list-style: none; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 768px) {
  body { font-size: 16px; }
  :where(input:not([type="hidden"], [type="checkbox"], [type="radio"]), select, textarea) { font-size: 16px; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  /* Kopfzeile bleibt oben stehen, das Menü klappt darunter auf. */
  .sidebar { z-index: 30; gap: 0; height: auto; max-height: calc(100dvh - var(--topbar-height)); padding: var(--space-2) var(--space-3);
    overflow-y: auto; overscroll-behavior: contain; }
  .sidebar-head { padding-left: var(--space-1); }
  .nav-toggle { display: none; }
  .sidebar-head .menu-button { display: inline-flex; width: 40px; height: 40px; color: var(--color-on-frame); }
  .sidebar-body { display: none; padding: var(--space-3) 0 var(--space-2); }
  .sidebar-body:target, :root[data-menu="open"] .sidebar-body { display: flex; }
  :root:has(.sidebar-body:target) .menu-button .when-closed,
  :root[data-menu="open"] .menu-button .when-closed { display: none; }
  :root:has(.sidebar-body:target) .menu-button .when-open,
  :root[data-menu="open"] .menu-button .when-open { display: inline-flex; }
  :root[data-menu="closed"] .sidebar-body:target { display: none; }
  .nav-item { min-height: 44px; }
  .sidebar-foot { margin-top: 0; }
  .panel { min-height: 0; margin: 0 8px 8px; }
  .content { padding: var(--space-5) var(--space-4); }
  .card { padding: var(--space-4); }
  .table-wrap { margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* ---------- Reiter ---------- */
/* Autorenregeln wie display: flex schlagen sonst das hidden-Attribut. */
[hidden] { display: none !important; }
/* Reiter als Karteikarten: Der aktive Reiter ist die weiße Lasche der Karte
   darunter. Die Leiste reicht einen Pixel in die Karte hinein und liegt über
   ihr, so verdeckt der aktive Reiter den oberen Rand der Karte. Das geschieht
   im Innenabstand der Leiste, nicht durch einen Überstand: Ein Überstand ergab
   unter Windows einen senkrechten Scrollbalken. Seitlich scrollt die Leiste auf
   schmalen Bildschirmen, ohne sichtbaren Balken. */
.tab-list { position: relative; z-index: 1; display: flex; gap: 2px; margin-bottom: -1px; padding-bottom: 1px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tab-list::-webkit-scrollbar { display: none; }
.tab { position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 10px var(--space-5);
  color: var(--color-muted); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.tab:hover { color: var(--color-text); background: rgb(0 0 0 / .035); }
.tab:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.tab[aria-selected="true"] { margin-bottom: -1px; padding-bottom: 11px; background: var(--color-surface);
  border-color: var(--color-border); color: var(--color-accent-text); }
.tabs-active ~ form .tab-panel, .tabs-active ~ .tab-panel,
.tabs-active ~ .quote-layout .tab-panel { border-top-left-radius: 0; }
.tab-count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--color-subtle);
  color: var(--color-muted); font-size: 12px; text-align: center; }
.tab[aria-selected="true"] .tab-count { background: var(--color-accent-soft); color: var(--color-accent-text); }
.tab-error::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-danger); }
.tab-panel:focus { outline: none; }
/* Mit Reitern steht das Formular über Zumiete und Bildern und ist dort leer.
   Sein Abstand nach unten würde dann als Lücke unter der Reiterleiste stehen. */
.tabs-active ~ form:has(> .form-sections) { margin-bottom: 0; }
.tabs-active ~ form [data-form-actions] { margin-bottom: var(--space-8); }
.tabs-active ~ form .tab-panel h2, .tabs-active ~ .tab-panel > h2, .tabs-active ~ .quote-layout .tab-panel > h2,
.tabs-active ~ .tab-panel > .page-head h2 { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }
.tabs-active ~ .tab-panel > .page-head { justify-content: flex-end; }
/* Die erste Zwischenüberschrift steht direkt unter der verborgenen Reiterüberschrift. */
.tabs-active ~ form .tab-panel > h2 + h3, .tabs-active ~ .quote-layout .tab-panel > h2 + h3 { margin-top: 0; }
.pre-line { white-space: pre-line; }

/* Kopf mit Hauptbild */
.title-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.title-row h1 { margin: 0; }
.title-image { flex: none; width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius);
  border: 1px solid var(--color-border); background: var(--color-subtle); }

/* Bilder */
.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--space-4);
  margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.image-tile { display: grid; gap: var(--space-2); align-content: start; }
.image-frame { display: block; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--color-border); background: var(--color-subtle); }
.image-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.image-frame:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.image-meta { margin: 0; }
.image-meta .badge { margin-left: 0; }
.image-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.alert ul { margin: var(--space-1) 0 0; padding-left: var(--space-5); }
.alert p { margin: 0; }

/* Vorschaubild in der Artikelliste */
.list-thumb { flex: none; width: 36px; height: 36px; border-radius: var(--radius-sm); object-fit: cover;
  background: var(--color-subtle); border: 1px solid var(--color-border); }

/* ---------- Tabellen mit wählbaren Spalten ---------- */
.list-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.list-bar > p { margin: 0; }
.table-tools { display: flex; gap: var(--space-2); margin-left: auto; }

/* Auswahl in Listen: Aktionen über der Tabelle, Hinweis auf alle Treffer. */
.selection { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.selection-count { font-variant-numeric: tabular-nums; }
.selection-note { margin: 0; color: var(--color-muted); }
.link-button { padding: 0; border: 0; background: none; color: var(--color-accent-text); font: inherit;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.link-button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }
th.select-col, td.select-col { width: 1%; padding-right: 0; }

/* Staffeln der Mietkonditionen: schmale Tabelle mit Eingaben. */
.tier-table { width: auto; }
.tier-table td, .tier-table th { padding-right: var(--space-5); }

/* Seitennavigation über und unter Listen. */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.pager-top { margin-bottom: var(--space-3); }
.pager-bottom { margin-top: var(--space-4); }
.pager-pages { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.pager-size { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.pager-size label { margin: 0; }
.select-small { width: auto; min-height: 32px; padding-top: 4px; padding-bottom: 4px; font-size: 14px; }
th .sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit;
  font: inherit; text-align: inherit; white-space: nowrap; cursor: pointer; }
th .sort:hover, th[aria-sort] { color: var(--color-text); }
th .sort:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
.sort-icon { display: inline-flex; width: 14px; }
.sort-icon .icon { width: 14px; height: 14px; }
th[draggable="true"] { user-select: none; }
th.dragging { opacity: .45; }
th.drop-before { box-shadow: inset 3px 0 0 var(--color-primary); }
th.drop-after { box-shadow: inset -3px 0 0 var(--color-primary); }

.popup { width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: var(--space-5);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface);
  color: var(--color-text); box-shadow: 0 16px 40px rgb(16 16 20 / .2); }
.popup::backdrop { background: rgb(16 16 20 / .25); }
.popup h2 { margin: 0 0 var(--space-2); font-size: 16px; }
.column-list { display: grid; gap: 2px; max-height: 55vh; margin: var(--space-3) 0; padding: 0; overflow-y: auto; list-style: none; }
.column-list li { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-1);
  border-radius: var(--radius-sm); background: var(--color-surface); }
.column-list li:hover { background: var(--color-subtle); }
.column-list li.dragging { opacity: .45; }
.column-list .check { flex: 1; min-height: 34px; }
.column-grip { display: inline-flex; color: var(--color-muted); cursor: grab; }
.column-grip .icon { width: 16px; height: 16px; }
.column-move { display: inline-flex; gap: 2px; }
.move-button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-muted); cursor: pointer; }
.move-button:hover { background: var(--color-subtle-hover); color: var(--color-text); }
.move-button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.move-button .icon { width: 16px; height: 16px; }

.context-menu { position: fixed; inset: auto; margin: 0; min-width: 230px; padding: var(--space-1);
  border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface);
  color: var(--color-text); box-shadow: 0 12px 32px rgb(16 16 20 / .18); }
.context-menu button { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: 8px var(--space-3);
  border: 0; border-radius: var(--radius-sm); background: none; color: inherit; font: inherit; font-size: 14px;
  text-align: left; cursor: pointer; }
.context-menu button:hover, .context-menu button:focus-visible { background: var(--color-subtle); outline: none; }
.context-menu button:disabled { opacity: .45; cursor: default; background: none; }
.context-menu .icon { width: 16px; height: 16px; color: var(--color-muted); }

/* Kategorienbaum: Unterkategorien eingerückt, Hauptkategorien hervorgehoben. */
a.strong { font-weight: 600; }
.tree-sub { display: inline-block; padding-left: var(--space-5); }

/* ---------- Menüleiste oben ---------- */
/* Fest oben wie die Navigation links. Die Listen öffnen am Rechner beim
   Darüberfahren, auf Touch-Geräten beim Antippen. Ohne Skript öffnet eine
   Liste, sobald ihr Knopf oder ein Eintrag den Fokus hat. */
.topbar { position: sticky; top: 0; z-index: 40; height: var(--topbar-height); background: var(--color-topbar);
  color: var(--color-on-frame); }
.menubar { position: relative; height: 100%; }
.menubar-list { display: flex; height: 100%; margin: 0; padding: 0 var(--space-2); list-style: none; }
.menu { position: relative; }
.menu-trigger { display: inline-flex; align-items: center; gap: 5px; height: var(--topbar-height); padding: 0 var(--space-3);
  border: 0; background: none; color: #e6e3df; font: inherit; font-size: 14px; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background-color 150ms ease-out; }
.menu-trigger .icon { width: 14px; height: 14px; opacity: .65; transition: transform 150ms var(--ease); }
.menu-trigger:hover, .menu.is-open .menu-trigger { background: var(--color-menu); color: var(--color-on-frame); }
.menu-trigger:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.menu.is-current .menu-trigger { color: #fff; box-shadow: inset 0 -2px 0 var(--color-primary); }
.menu.is-open .menu-trigger .icon { transform: rotate(180deg); }
.menu-list { position: absolute; top: 100%; left: 0; z-index: 41; display: none; min-width: 230px; margin: 0;
  padding: var(--space-1) 0 var(--space-2); list-style: none; background: var(--color-menu);
  border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 14px 32px rgb(0 0 0 / .32); }
.menu.is-open .menu-list, .menubar:not([data-js]) .menu:focus-within .menu-list { display: block; }
@media (hover: hover) and (pointer: fine) {
  .menu:hover .menu-list { display: block; }
}
.menu-item { display: flex; align-items: center; gap: var(--space-3);
  padding: 8px var(--space-4); color: var(--color-on-frame); font-size: 14px; text-decoration: none; white-space: nowrap; }
.menu-item .icon { width: 17px; height: 17px; }
.menu-label { flex: 1 1 auto; }
a.menu-item:hover, a.menu-item:focus-visible { background: var(--color-menu-hover); outline: none; }
a.menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--color-focus); }
.menu-item[aria-current="page"] { font-weight: 600; box-shadow: inset 3px 0 0 var(--color-primary); }
.menu-item[aria-disabled="true"] { color: var(--color-frame-muted); cursor: default; }
.menu-item[aria-disabled="true"] .icon { opacity: .55; }
.menu-soon { padding: 1px 7px; border-radius: 999px; background: rgb(255 255 255 / .08); color: var(--color-frame-muted);
  font-size: 11px; font-weight: 500; }
.menu-sep { height: 1px; margin: var(--space-1) var(--space-3); background: rgb(255 255 255 / .08); }

@media (max-width: 768px) {
  /* Auf dem Handy öffnen die Listen über die ganze Breite. */
  .menu { position: static; }
  .menu-list { right: 0; min-width: 0; border-radius: 0 0 var(--radius) var(--radius); }
  .menu-item { min-height: 44px; }
}

/* Einstellungen: Platzhalterlisten, Logo, Textvorschau, Testmail */
.token-list { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: var(--space-1) 0 0; padding: 0; list-style: none; }
.token-list code { font-size: 12px; }
.logo-preview { margin: 0 0 var(--space-3); }
.logo-preview img { display: block; max-width: min(320px, 100%); max-height: 120px; width: auto; height: auto;
  padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius); background: #fff; }
.text-preview { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  max-width: 48ch; white-space: pre-line; }
.test-form { align-items: flex-end; flex-wrap: wrap; gap: var(--space-3); }
.test-form .field { flex: 1 1 260px; }
.test-status .alert code { overflow-wrap: anywhere; }

/* ---------- Angebote ---------- */
.content-wide { max-width: none; }
.quote-main .form-sections > .card { max-width: none; }
.add-help { margin: calc(-1 * var(--space-2)) 0 var(--space-4); }
.quote-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-4); align-items: start; }
.quote-main { display: grid; gap: var(--space-4); min-width: 0; }
.quote-main > form { display: contents; }
.quote-main > *, .quote-main > form > * { min-width: 0; }
.quote-side { position: sticky; top: calc(var(--topbar-height) + var(--space-4)); transition: transform 180ms ease-out, opacity 180ms ease-out; }
.quote-side.is-leaving { transform: translateX(110%); opacity: 0; }
.totals-hide { position: absolute; z-index: 1; top: var(--space-3); right: var(--space-3); width: 30px; height: 30px; }
.quote-totals h2 { padding-right: 36px; }
.quote-layout.totals-hidden { grid-template-columns: minmax(0, 1fr); }
.quote-layout.totals-hidden .quote-side { display: none; }
/* Fähnchen am rechten Rand, holt die Summen zurück. */
.totals-flag { position: fixed; z-index: 25; top: calc(var(--topbar-height) + 160px); right: 0; display: inline-flex;
  align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
  border: 1px solid var(--color-border); border-right: 0; border-radius: var(--radius) 0 0 var(--radius);
  background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 13px; font-weight: 500;
  box-shadow: 0 6px 20px rgb(16 16 20 / .12); cursor: pointer; }
.totals-flag:hover { background: var(--color-subtle); }
.totals-flag svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .quote-side { transition: none; } }
.quote-totals h2 { margin: 0 0 var(--space-1); font-size: 16px; }
.totals { display: grid; gap: var(--space-1); margin: var(--space-3) 0 0; }
.totals > div { display: flex; justify-content: space-between; gap: var(--space-3); }
.totals dt { color: var(--color-muted); }
.totals dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.totals-sub dt, .totals-sub dd { font-size: 13px; }
.totals-sum { padding-top: var(--space-2); border-top: 1px solid var(--color-border); font-weight: 600; }
.totals-sum dt { color: var(--color-text); }
@media (max-width: 1100px) {
  .quote-layout { grid-template-columns: minmax(0, 1fr); }
  .quote-side { position: static; }
}

.quote-grid { width: 100%; border-collapse: collapse; }
.quote-grid th, .quote-grid td { padding: var(--space-2) var(--space-1); vertical-align: top; }
.quote-grid td.num, .quote-grid th.num { text-align: right; }
.quote-grid .col-pos { width: 4.5em; white-space: nowrap; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.quote-grid .col-name { min-width: 16em; }
.quote-grid .line-total { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
/* Text ohne Feld auf Höhe des Texts in den Feldern daneben. */
.quote-grid .cell-text { padding-top: calc(var(--space-2) + 7px); }
.quote-grid tbody tr { border-top: 1px solid var(--color-border); }
/* Zweite Zeile einer Position: ohne Trennlinie, etwas enger an der ersten. */
.quote-grid tbody tr.qrow-sub { border-top: 0; }
/* Eine Position ist ein Block aus zwei Zeilen: keine Linie zwischen ihnen,
   und kein Hervorheben nur einer Hälfte. */
.quote-grid td { border-bottom: 0; }
.quote-grid tbody tr:hover { background: none; }
.quote-grid tr.qrow-sub td { padding-top: 0; }
.quote-grid .col-meta { padding-top: 6px; }
.quote-grid .col-desc .grid-desc { margin-top: 0; }
.qty-cell { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); }
.qty-cell .unit { min-width: 2.2em; text-align: left; }
.quote-grid .cell-value { display: inline-block; padding-top: 7px; }
.grid-input { width: 100%; min-height: 32px; padding: 4px 8px; font-size: 14px; }
.grid-num { width: 6.5em; text-align: right; }
.quote-grid select.grid-input { min-width: 7.5em; }
.grid-desc { margin-top: var(--space-1); min-height: 28px; resize: vertical; font-size: 13px; color: var(--color-muted); }
.grid-heading { font-weight: 600; font-size: 15px; }
.name-line { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; min-height: 0; }
.name-line:empty { display: none; }
.name-line .badge { margin-left: 0; }
.qrow-child .col-name, .qrow-child.qrow-sub .col-meta { padding-left: var(--space-5); }
.qrow-child .col-pos { padding-left: var(--space-4); }
.qrow-alternative .grid-input, .qrow-alternative .line-total { font-style: italic; }
.qrow-alternative .line-total, .qrow-optional .line-total { color: var(--color-muted); }
.qrow-heading td, .qrow-text td { background: var(--color-subtle); }
.qrow.dragging, .qrow-sub.dragging { opacity: .45; }
.drag-handle { display: inline-flex; margin-right: 2px; color: var(--color-muted); cursor: grab; vertical-align: middle; }
.drag-handle svg { width: 16px; height: 16px; }
.row-actions { white-space: nowrap; text-align: right; }
.row-actions .icon-button { width: 30px; height: 30px; }
.components { margin: var(--space-1) 0 0; padding-left: var(--space-4); }

.quote-add { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.quote-add h3 { margin-top: 0; }
.add-row { flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-3); }
.add-row .field { margin: 0; }
.add-article { position: relative; flex: 1 1 280px; }
.suggestions { position: absolute; z-index: 20; top: 64px; right: 0; left: 0; max-height: 320px; margin: 0; padding: var(--space-1);
  overflow-y: auto; list-style: none; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); box-shadow: 0 12px 32px rgb(16 16 20 / .16); }
.suggestions li { padding: var(--space-2); border-radius: 6px; cursor: pointer; }
.suggestions li:hover, .suggestions li[aria-selected="true"] { background: var(--color-subtle-hover); }
.pick-list { display: grid; gap: var(--space-1); margin: var(--space-2) 0; padding: 0; list-style: none; }
.pick-list a, .pick-list .link-button { display: block; width: 100%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  text-align: left; text-decoration: none; color: inherit; }
.pick-list a:hover, .pick-list .link-button:hover { background: var(--color-subtle); }
.customer-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.save-state { margin-left: var(--space-3); }

.status-quote-sent::before { background: var(--dot-blue); }
.status-quote-ordered::before { background: var(--dot-green); }
.status-quote-rejected::before { background: var(--dot-red); }
.status-quote-draft::before { background: var(--dot-amber); }
.status-quote-superseded { color: var(--color-muted); }
.status-quote-open::before { background: var(--dot-green); }
.status-quote-cancelled::before { background: var(--dot-red); }
.status-quote-cancelled { color: var(--color-muted); }

.leave-dialog { width: min(460px, calc(100vw - 32px)); }
.leave-dialog .actions { flex-wrap: wrap; margin-top: var(--space-4); }

/* Angebot per Mail */
.card > .help + .mail-form, .card > .alert + .mail-form { margin-top: var(--space-4); }
.mail-form { display: grid; gap: var(--space-4); max-width: 760px; }
.mail-form textarea { min-height: 220px; }
.attachment { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.attachment svg { width: 18px; height: 18px; color: var(--color-muted); }

/* Beauftragen */
.stack-wide { display: grid; gap: var(--space-4); max-width: 760px; }
.accept-group { display: grid; gap: var(--space-2); margin: 0; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.accept-group legend { padding: 0 var(--space-1); font-weight: 600; }
.accept-group .check { align-items: flex-start; }