/* ── Inter, lokal ausgeliefert (kein Google-CDN: schneller im Werkstatt-WLAN
      und kein Drittanbieter-Request). Variable Schrift, deckt 400 bis 700 ab. ── */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/static/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/static/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                 U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

:root {
  /* Sagt dem Browser: diese Seite IST schon dunkel, bitte nicht nachfärben.
     Ohne das greift auf Android „Dunkles Design erzwingen": es dunkelt grosse
     farbige Flaechen ab und dreht die Schrift darauf um — die Filamentkacheln
     werden dann alle zum selben Dunkelrot, waehrend die kleinen Farbpunkte
     daneben richtig bleiben. Das Meta-Tag allein reicht nicht ueberall, die
     CSS-Eigenschaft ist das Signal, auf das sich die Browser verlassen. */
  color-scheme: dark;

  --c-bg: #1e1e1e;
  --c-surface: #2a2a2a;
  --c-surface-alt: #333333;
  --c-border: #3a3a3a;
  --c-text: #ffffff;
  --c-muted: #a0a0a0;
  --c-accent: #00e5d4;
  --c-accent-hover: #00c4b5;
  --c-success: #4ade80;
  --c-warn: #fbbf24;
  --c-error: #f87171;
  --radius: 6px;
  --radius-lg: 12px;
  --shadow: 0 2px 8px rgba(0,0,0,.35);
  --tap: 44px;       /* Mindestgröße für alles, was auf dem Handy getroffen werden muss */
  --tabbar-h: 58px;  /* Höhe der Tab-Leiste ohne Safe Area (Sheet setzt darauf auf) */
  --topbar-h: 49px;  /* Höhe der Kopfleiste ohne Safe Area (klebende Leisten setzen darunter an) */
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--c-bg);
  color: var(--c-text);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;  /* iOS bläht Text im Querformat sonst auf */
}

/* Kein 300ms-Warten und kein Doppeltipp-Zoom auf Bedienelementen. */
button, a, .step, .btn, .btn-mini, .check, .check-chip, label, summary {
  touch-action: manipulation;
}
/* Graues Blitzen beim Antippen unter Android/iOS abschalten. */
button, a, .check-chip { -webkit-tap-highlight-color: transparent; }

/* ── App-Shell (Seitenleiste) ── */
.app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.app.no-rail { grid-template-columns: 1fr; }

.rail {
  background: #1a1d21; border-right: 1px solid var(--c-border);
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 12px; position: sticky; top: 0; height: 100vh; align-self: start;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; padding: 6px 8px 14px; }
.brand img { height: 34px; width: auto; display: block; }
.brand-text h1 { font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.05; }
.brand-text span { font-size: .72rem; color: var(--c-muted); }

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.nav-group { font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; color: #697079; font-weight: 700; padding: 14px 10px 5px; }
.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: var(--radius);
  color: var(--c-muted); text-decoration: none; font-weight: 500; font-size: .9rem;
  border: 1px solid transparent; transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--c-surface); color: var(--c-text); }
.nav-item.active { background: var(--c-surface-alt); color: var(--c-text); border-color: var(--c-border); }
.nav-item .ic { width: 18px; height: 18px; flex: none; color: #697079; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.nav-item:hover .ic { color: var(--c-muted); }
.nav-item.active .ic { color: var(--c-accent); }

.rail-user { display: flex; align-items: center; gap: 10px; padding: 10px 6px 2px; border-top: 1px solid var(--c-border); margin-top: 4px; }
.rail-avatar { width: 28px; height: 28px; border-radius: 50%; background: rgba(0,229,212,.15); color: var(--c-accent); display: grid; place-items: center; font-weight: 700; font-size: .78rem; flex: none; }
.rail-user .who { font-size: .82rem; line-height: 1.2; min-width: 0; }
.rail-user .who small { display: block; color: #697079; font-size: .7rem; }
.btn-logout {
  margin-left: auto; font-size: .78rem; font-weight: 600; text-decoration: none;
  color: var(--c-muted); border: 1px solid var(--c-border);
  padding: 5px 11px; border-radius: var(--radius); transition: border-color .15s, color .15s; white-space: nowrap;
}
.btn-logout:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* ── Handy-Navigation: Kopfleiste oben, Tab-Leiste unten, Mehr-Sheet ──
   Auf dem Desktop komplett aus, dort führt weiter die Seitenleiste. ── */
.topbar, .tabbar, .sheet, .sheet-backdrop { display: none; }

.topbar {
  grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  position: sticky; top: 0; z-index: 30;
  background: #1a1d21; border-bottom: 1px solid var(--c-border);
  padding: calc(9px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
           9px max(14px, env(safe-area-inset-left));
}
/* Führt zur Übersicht, ist also eine Schaltfläche — dann auch in Fingergröße.
   Der negative Rand hält die Kopfleiste trotzdem flach. */
.topbar-brand { display: flex; align-items: center; min-height: var(--tap); margin: -8px 0; }
.topbar-brand img { height: 26px; width: auto; display: block; }
.topbar-titel { text-align: center; font-weight: 700; font-size: 1rem; letter-spacing: -.01em; }
.topbar-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: rgba(0,229,212,.15);
  color: var(--c-accent); display: grid; place-items: center; font-weight: 700; font-size: .8rem;
}

.tabbar {
  grid-template-columns: repeat(5, 1fr); z-index: 40;
  position: fixed; left: 0; right: 0; bottom: 0;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  background: #1a1d21; border-top: 1px solid var(--c-border);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 7px 4px 8px; border: none; background: none; cursor: pointer;
  color: var(--c-muted); text-decoration: none; font-family: inherit;
  font-size: .68rem; font-weight: 600; letter-spacing: .01em;
}
.tabbar-item .ic { width: 22px; height: 22px; color: #7b838d; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tabbar-item.active { color: var(--c-text); }
.tabbar-item.active .ic { color: var(--c-accent); }
.tabbar-item:active { background: var(--c-surface); }

.sheet-backdrop { position: fixed; inset: 0; z-index: 45; background: rgba(0,0,0,.55); }
.sheet {
  position: fixed; left: 0; right: 0; z-index: 50;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  background: var(--c-surface); border-top: 1px solid var(--c-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 8px 12px 14px; max-height: 66vh; overflow-y: auto;
  box-shadow: 0 -8px 24px rgba(0,0,0,.45);
  animation: sheet-auf .16s ease-out;
}
@keyframes sheet-auf { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-griff { width: 38px; height: 4px; border-radius: 2px; background: var(--c-border); margin: 2px auto 10px; }
.sheet-links { display: flex; flex-direction: column; gap: 2px; }
.sheet-link {
  display: flex; align-items: center; gap: 13px; min-height: var(--tap);
  padding: 11px 10px; border-radius: var(--radius);
  color: var(--c-text); text-decoration: none; font-weight: 500; font-size: .95rem;
}
.sheet-link .ic { width: 19px; height: 19px; flex: none; color: #7b838d; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sheet-link:active { background: var(--c-surface-alt); }
.sheet-link.active { background: var(--c-surface-alt); color: var(--c-accent); }
.sheet-link.active .ic { color: var(--c-accent); }
.sheet-fuss {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--c-border);
}
.sheet-user { font-size: .85rem; font-weight: 600; line-height: 1.25; }
.sheet-user small { display: block; color: var(--c-muted); font-size: .72rem; font-weight: 400; }
.sheet-abmelden {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap);
  padding: 9px 14px; border: 1px solid var(--c-border); border-radius: var(--radius);
  color: var(--c-muted); text-decoration: none; font-size: .85rem; font-weight: 600;
}
.sheet-abmelden .ic { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sheet-abmelden:active { border-color: var(--c-accent); color: var(--c-accent); }
body.sheet-offen { overflow: hidden; }

.main { min-width: 0; }
.content { max-width: 1180px; margin: 0 auto; padding: 26px 26px 80px; }

.plain-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 6vh 0 10px; }
.plain-brand img { height: 40px; width: auto; }
.plain-brand span { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }

/* ── Card ── */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}
.card-title {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--c-accent); margin-bottom: 16px;
}

/* ── Fields ── */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--c-border); border-radius: var(--radius);
  font-size: .95rem; background: var(--c-surface-alt); color: var(--c-text);
  transition: border-color .15s;
}
.field input::placeholder, .field textarea::placeholder { color: #6b6b6b; }
.field textarea { resize: vertical; min-height: 60px; font-family: inherit; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--c-accent); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.color-input { height: 42px; padding: 4px; cursor: pointer; }
.field-hint { font-size: .8rem; color: var(--c-muted); margin-top: 6px; }
.anschreiben-hinweis { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.anschreiben-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }

/* Drucker-Auswahl per Checkbox-Chips */
.check-group { display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 4px 0 2px; }
.check-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--c-surface-alt); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 9px 13px; cursor: pointer;
  font-size: .9rem; font-weight: 500; user-select: none; transition: border-color .15s, background .15s;
}
.check-chip:hover { border-color: var(--c-accent); }
.check-chip input { accent-color: var(--c-accent); width: 17px; height: 17px; cursor: pointer; }
.check-chip:has(input:checked) { border-color: var(--c-accent); background: rgba(0,229,212,.08); }
.check-ort { color: var(--c-muted); font-size: .8rem; font-weight: 400; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border: none; border-radius: var(--radius);
  font-size: .95rem; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s; font-family: inherit;
}
.btn-primary { background: var(--c-accent); color: #0a0a0a; }
.btn-primary:hover { background: var(--c-accent-hover); }
.btn-secondary { background: transparent; color: var(--c-text); border: 1px solid var(--c-border); }
.btn-secondary:hover { border-color: var(--c-accent); color: var(--c-accent); }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.form-actions .nach-rechts { margin-left: auto; }  /* z.B. Löschen abgesetzt rechts */

.btn-mini {
  display: inline-block; padding: 5px 11px; border-radius: var(--radius); white-space: nowrap;
  font-size: .8rem; font-weight: 600; cursor: pointer; text-decoration: none;
  background: var(--c-surface-alt); color: var(--c-text); border: 1px solid var(--c-border);
  transition: border-color .15s, color .15s;
}
.btn-mini:hover { border-color: var(--c-accent); color: var(--c-accent); }
.btn-mini-danger:hover { border-color: var(--c-error); color: var(--c-error); }

/* ── Login ── */
.login-wrap { max-width: 380px; margin: 8vh auto 0; }
.login-card { padding: 28px 26px; }
.login-hint { text-align: center; color: var(--c-muted); font-size: .82rem; margin-top: 16px; }

/* ── Stats ── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 6px;
}
.stat-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); font-weight: 600; }
.stat-value { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-warn { border-color: rgba(251,191,36,.5); }
.stat-warn .stat-value { color: var(--c-warn); }

/* ── Filterbar ── */
.filterbar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg);
  padding: 12px 14px; margin-bottom: 20px;
}
.filterbar input[type="search"], .filterbar input.suche-feld, .filterbar select {
  padding: 9px 12px; border: 1px solid var(--c-border); border-radius: var(--radius);
  background: var(--c-surface-alt); color: var(--c-text); font-size: .92rem; font-family: inherit;
}
.filterbar input[type="search"]:focus, .filterbar input.suche-feld:focus, .filterbar select:focus { outline: none; border-color: var(--c-accent); }
.filter-suche { flex: 1 1 260px; }
.filter-typ { flex: 0 0 auto; }
.filterbar input.suche-feld { width: 260px; max-width: 100%; }  /* Partnersuche: lange Namen passen */
.check { display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; color: var(--c-muted); cursor: pointer; user-select: none; }
.check input { accent-color: var(--c-accent); width: 16px; height: 16px; }
.filter-btn { padding: 9px 18px; font-size: .9rem; }

/* ── Tabellen ── */
.table-wrap { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th {
  text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-muted); font-weight: 600; padding: 8px 12px; border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
}
.tabelle td { padding: 9px 12px; font-size: .92rem; border-bottom: 1px solid rgba(58,58,58,.55); vertical-align: middle; }
.tabelle tbody:last-child tr:last-child td { border-bottom: none; }
.th-center { text-align: center; }
.th-right { text-align: right; }
.tabelle td.th-center { text-align: center; }
.tabelle td.th-right { text-align: right; }
.tabelle tr:hover td { background: rgba(255,255,255,.02); }

.group-head td {
  background: var(--c-surface-alt); font-weight: 700; font-size: .82rem;
  letter-spacing: .02em; color: var(--c-text); padding: 7px 12px;
}
.group-count { color: var(--c-muted); font-weight: 500; font-size: .78rem; margin-left: 4px; }
.typ-badge {
  display: inline-block; color: var(--c-accent);
  border: 1.5px solid var(--c-accent); border-radius: 999px;
  padding: 2px 13px; font-weight: 700; font-size: .82rem; letter-spacing: .04em;
}

.col-farbe { white-space: nowrap; }
.col-farbe .swatch { margin-right: 10px; }
.swatch {
  display: inline-block; width: 18px; height: 18px; border-radius: 50%;
  vertical-align: middle; box-shadow: 0 0 0 3px rgba(255,255,255,.14);
}
.farbe-name { font-weight: 500; vertical-align: middle; }
.col-gesamt { font-weight: 700; font-variant-numeric: tabular-nums; }
/* Ein Strich je Rolle. Die ganze Reihe liegt auf einer hellen Schiene, statt
   jeden Strich einzeln zu umranden: eine 1px-Kante frisst bei 4px Strichbreite
   den halben Farbkern, und dann sehen Pink, Rot und Kürbisorange alle gleich
   rot aus. Auf der Schiene bleibt der Strich reine Farbe — und Schwarz
   trotzdem sichtbar. */
.rollen-striche {
  display: flex; flex-wrap: wrap; gap: 2px; justify-content: center;
  margin: 6px auto 0; width: max-content; max-width: 124px;
  background: rgba(255,255,255,.14); border-radius: 3px; padding: 2px 3px;
}
.rollen-striche i { width: 4px; height: 12px; border-radius: 1px; }
.rollen-striche i:nth-child(5n) { margin-right: 4px; }
.col-marke { color: var(--c-muted); }
.muted-cell { color: var(--c-muted); font-size: .86rem; }
.leer-hinweis { color: var(--c-muted); font-size: .9rem; padding: 6px 2px; }

.row-warn td { background: rgba(251,191,36,.05); }
.row-inaktiv td { opacity: .5; }
/* Umbruch erlaubt: bei knapper Breite stapeln sich die Knöpfe, statt die
   ganze Tabelle seitlich scrollen zu lassen. */
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
.row-actions form { display: inline; margin: 0; }
.tag-self { font-size: .7rem; color: var(--c-accent); border: 1px solid var(--c-accent); border-radius: 10px; padding: 1px 7px; margin-left: 6px; }

/* ── Stepper ── */
.stepper { display: inline-flex; align-items: center; gap: 0; }
.step {
  width: 26px; height: 26px; border: 1px solid var(--c-border); background: var(--c-surface-alt);
  color: var(--c-text); font-size: 1rem; font-weight: 700; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s, color .15s, background .15s;
}
.step-minus { border-radius: var(--radius) 0 0 var(--radius); }
/* Beim Filament faellt das Minus weg (dafuer gibt es „A"), dann muss der Wert
   die linke Kante der Gruppe bilden. */
.stepper-ohne-minus .step-val {
  border-left: 1px solid var(--c-border);
  border-radius: var(--radius) 0 0 var(--radius);
}
.step-plus { border-radius: 0 var(--radius) var(--radius) 0; }
.step:hover { border-color: var(--c-accent); color: var(--c-accent); z-index: 1; }
.step:active { background: var(--c-accent); color: #0a0a0a; }
.step-val {
  min-width: 34px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums;
  border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border);
  padding: 3px 4px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-surface);
}

/* ── Badges ── */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: .74rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.badge-ok { background: rgba(74,222,128,.12); color: var(--c-success); border: 1px solid rgba(74,222,128,.3); }
.badge-knapp { background: rgba(251,191,36,.12); color: var(--c-warn); border: 1px solid rgba(251,191,36,.35); }
.badge-leer { background: rgba(160,160,160,.12); color: var(--c-muted); border: 1px solid rgba(160,160,160,.3); }

/* ── Tabs ── */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--c-border); margin-bottom: 22px; }
.tab {
  padding: 10px 18px; text-decoration: none; color: var(--c-muted); font-weight: 600; font-size: .92rem;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s;
}
.tab:hover { color: var(--c-text); }
.tab.active { color: var(--c-accent); border-bottom-color: var(--c-accent); }

/* ── Alerts ── */
.alert { padding: 11px 16px; border-radius: var(--radius); font-size: .9rem; margin-bottom: 18px; }
.alert-error { background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.4); color: var(--c-error); }
.alert-success { background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.4); color: var(--c-success); }

/* ── Responsive ── */
@media (max-width: 860px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  /* Nur am <html>: ein overflow-x auch am <body> macht den Body zum eigenen
     Scroll-Container, der selbst nie scrollt — dann kann darin nichts kleben. */
  html { overflow-x: hidden; }
  /* Kein Raster mehr, sondern schlichte Blöcke: als Rasterzelle konnte die
     Kopfleiste nie kleben (ihr Bereich ist nur eine Zeile hoch), sie scrollte
     trotz position:sticky weg. Als Block reicht ihr Bezugsrahmen über die
     ganze Seite — Kopfleiste und Bedienleisten bleiben oben stehen. */
  .app { display: block; }
  /* Seitenleiste weicht der Kopf- und Tab-Leiste (siehe „Handy-Navigation") */
  .rail { display: none; }
  .topbar { display: grid; }
  .tabbar { display: grid; }
  /* Sheet und Abdunklung schaltet das Skript über das hidden-Attribut */
  .sheet:not([hidden]), .sheet-backdrop:not([hidden]) { display: block; }
  .content {
    padding: 18px max(14px, env(safe-area-inset-right))
             calc(80px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  }

  /* Tap-Ziele auf Fingergröße (44px). Bewusst hier und nicht erst bei 680px:
     ab hier führt die App per Kopf- und Tab-Leiste, das ist ein Touchgerät.
     Ein Tablet im Hochformat (768px) bekam sonst die Handy-Navigation, aber
     27px hohe Knöpfe und Felder, in die iOS beim Antippen hineinzoomt. */
  .step { width: var(--tap); height: var(--tap); font-size: 1.15rem; }
  .step-val { height: var(--tap); min-width: 46px; font-size: 1rem; }
  .btn-mini { min-height: var(--tap); padding: 10px 15px; display: inline-flex; align-items: center; }
  .btn { min-height: var(--tap); }
  .check, .check-chip { min-height: var(--tap); }
  .tab { padding: 13px 18px; }
  .nav-item { min-height: var(--tap); }
  .btn-logout { min-height: var(--tap); display: inline-flex; align-items: center; }

  /* iOS zoomt beim Fokus in Felder mit weniger als 16px Schrift. */
  .field input, .field select, .field textarea,
  .filterbar input[type="search"], .filterbar input.suche-feld, .filterbar select {
    font-size: 16px; padding: 11px 12px; min-height: var(--tap);
  }
  /* Der Farbwähler soll eine Farbfläche bleiben, keine Zeile mit viel Rand */
  .field input.color-input { padding: 4px; }
}
@media (max-width: 680px) {
  .field-row { grid-template-columns: 1fr; }
  .filterbar { padding: 10px; }
  .filter-suche { flex-basis: 100%; }
  .filterbar input[type="search"], .filterbar input.suche-feld, .filterbar select { width: 100%; }
  .filter-btn { flex: 1; }
  .card { padding: 18px 16px; }

  /* Abstand zwischen Anbruch und Wert, sonst trifft der Daumen das Falsche. */
  .step-anbruch { margin-right: 10px; }
  .row-actions { flex-wrap: wrap; gap: 6px; justify-content: flex-start; }
  .auftraege-fertig > summary { min-height: var(--tap); }
  .auftrag-dokument-zeile .btn, .bibliothek-zeile .btn { flex: 1 1 auto; }
  .anfrage-ablehnen .btn { flex: 1 1 auto; }
  /* Umbrechen statt seitwärts scrollen: ein Reiter, der rechts aus dem Bild
     ragt, wird schlicht nicht gefunden — dass man dort wischen kann, sieht man
     ihm nicht an. */
  .tabs { flex-wrap: wrap; }

  /* Knopfreihen unter Formularen: umbrechen und die Breite ausnutzen,
     sonst rutschen Knöpfe wie „Lieferschein erzeugen" aus dem Bild. */
  .form-actions { gap: 8px; }
  .form-actions > form { flex: 1 1 auto; display: flex; margin: 0; }
  .form-actions .btn { flex: 1 1 auto; }

}

/* ── Produktion: Pills, Aufträge, Drucker, Plan ── */
.text-warn { color: var(--c-warn); }

.pill {
  display: inline-block; padding: 3px 11px; border-radius: 20px;
  font-size: .74rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  border: 1px solid transparent;
}
.pill-geplant { background: rgba(160,160,160,.12); color: var(--c-muted); border-color: rgba(160,160,160,.3); }
.pill-in_produktion { background: rgba(0,229,212,.12); color: var(--c-accent); border-color: rgba(0,229,212,.35); }
.pill-fertig { background: rgba(74,222,128,.12); color: var(--c-success); border-color: rgba(74,222,128,.3); }
.pill-abgebrochen { background: rgba(248,113,113,.1); color: var(--c-error); border-color: rgba(248,113,113,.35); }
.pill-belegt { background: rgba(251,191,36,.12); color: var(--c-warn); border-color: rgba(251,191,36,.35); }
.pill-frei { background: rgba(74,222,128,.12); color: var(--c-success); border-color: rgba(74,222,128,.3); }
.pill-angebot { background: rgba(0,229,212,.12); color: var(--c-accent); border-color: rgba(0,229,212,.35); }
.pill-rechnung { background: rgba(74,222,128,.12); color: var(--c-success); border-color: rgba(74,222,128,.3); }
.pill-lieferschein { background: rgba(251,191,36,.12); color: var(--c-warn); border-color: rgba(251,191,36,.35); }
.pill-privat { background: rgba(160,160,160,.12); color: var(--c-muted); border-color: rgba(160,160,160,.3); }

.swatch-sm { width: 13px; height: 13px; box-shadow: 0 0 0 2px rgba(255,255,255,.14); }
.zeilen-link { color: var(--c-text); text-decoration: none; font-weight: 600; }
.zeilen-link:hover { color: var(--c-accent); }

.detail-top { margin-bottom: 14px; }
.zurueck { color: var(--c-muted); text-decoration: none; font-size: .88rem; }
.zurueck:hover { color: var(--c-accent); }

.auftrag-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--c-border); }
.auftrag-meta .chip strong { color: var(--c-text); }
.gap-top { margin-top: 16px; }
.chip-warn { color: var(--c-warn); border-color: rgba(251,191,36,.4); }

/* ── Platzhalter-Referenz auf der Vorlagenseite ── */
.platzhalter-gruppe { margin-top: 22px; }
.platzhalter-gruppe:first-of-type { margin-top: 10px; }
.platzhalter-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem; color: var(--c-accent); background: rgba(0,229,212,.08);
  border: 1px solid rgba(0,229,212,.25); border-radius: 6px; padding: 3px 8px;
  cursor: pointer; white-space: nowrap;
}
.platzhalter-code:hover { background: rgba(0,229,212,.16); }
.platzhalter-code.kopiert { color: var(--c-success); border-color: rgba(74,222,128,.4); background: rgba(74,222,128,.12); }
.anfrage-dokumente { margin: -4px 0 14px; }

/* ── Dokument direkt aus dem Auftrag, Vorlage aus der Bauteilbibliothek ── */
.auftrag-dokument { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--c-border); }
.auftrag-dokument > label, .bibliothek-wahl > label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 5px; }
.auftrag-dokument-zeile, .bibliothek-zeile { display: flex; flex-wrap: wrap; gap: 10px; }
.auftrag-dokument-zeile select, .bibliothek-zeile select {
  flex: 1 1 220px; min-width: 0; padding: 9px 12px;
  border: 1px solid var(--c-border); border-radius: var(--radius);
  background: var(--c-surface-alt); color: var(--c-text); font-size: .95rem; font-family: inherit;
}
.auftrag-dokument-zeile select:focus, .bibliothek-zeile select:focus { outline: none; border-color: var(--c-accent); }
.bibliothek-wahl { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--c-border); }
.bibliothek-leer { margin: -6px 0 16px; }
.bibliothek-leer a { color: var(--c-accent); text-decoration: none; }
.bib-marke {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; vertical-align: middle;
  font-size: .68rem; font-weight: 600; color: var(--c-accent);
  border: 1px solid rgba(0,229,212,.35); background: rgba(0,229,212,.08);
}

/* Fertige und abgebrochene Aufträge eingeklappt unter den offenen */
.auftraege-fertig > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 9px; margin-bottom: 0; }
.auftraege-fertig > summary::-webkit-details-marker { display: none; }
.auftraege-fertig > summary::before {
  content: ""; flex: none; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s;
}
.auftraege-fertig[open] > summary { margin-bottom: 16px; }
.auftraege-fertig[open] > summary::before { transform: rotate(45deg); }
.auftrag-filter select { flex: 1 1 200px; }

/* ── Anfragen aus dem Kalkulator ── */
.nav-zahl {
  margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 999px; text-align: center;
  background: var(--c-accent); color: #0a0a0a; font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.pill-neu { background: rgba(0,229,212,.12); color: var(--c-accent); border-color: rgba(0,229,212,.35); }
.pill-umgewandelt { background: rgba(74,222,128,.12); color: var(--c-success); border-color: rgba(74,222,128,.3); }
.pill-abgelehnt { background: rgba(160,160,160,.12); color: var(--c-muted); border-color: rgba(160,160,160,.3); }
.anfrage-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px; }
.anfrage-kopf a { color: var(--c-accent); text-decoration: none; overflow-wrap: anywhere; }
.anfrage-anmerkung {
  margin: 14px 0 0; padding: 10px 14px; border-left: 3px solid var(--c-accent); border-radius: var(--radius);
  background: var(--c-surface-alt); font-size: .92rem; white-space: pre-line; overflow-wrap: anywhere;
}
.anfrage-teile { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr)); gap: 16px; margin-bottom: 20px; }
.anfrage-teil { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 0; }
.anfrage-bild { width: 160px; height: 120px; flex: none; object-fit: contain; border-radius: var(--radius); background: var(--c-surface-alt); }
.anfrage-teil-text { flex: 1 1 220px; min-width: 0; }
.anfrage-teil-name { font-weight: 700; margin-bottom: 10px; overflow-wrap: anywhere; }
.anfrage-werte { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0 0 12px; font-size: .88rem; }
.anfrage-werte dt { color: var(--c-muted); }
.anfrage-werte dd { margin: 0; overflow-wrap: anywhere; }
.umwandeln-teil { min-width: 0; margin: 0 0 14px; padding: 10px 14px 2px; border: 1px solid var(--c-border); border-radius: var(--radius); }
.umwandeln-teil legend { padding: 0 6px; font-size: .85rem; font-weight: 600; overflow-wrap: anywhere; }
.umwandeln-teil .check { margin-bottom: 12px; }
.anfrage-ablehnen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; }
.datei-marke { text-decoration: none; cursor: grab; }
.datei-marke:hover { background: rgba(0,229,212,.18); }

/* ── Bauteile per Drag and Drop im Auftrag ── */
.ablage-flaeche {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 130px; padding: 22px 18px; text-align: center; cursor: pointer;
  border: 2px dashed var(--c-border); border-radius: var(--radius); background: var(--c-surface-alt);
  transition: border-color .15s, background .15s;
}
.ablage-flaeche:hover, .ablage-flaeche:focus-within { border-color: rgba(0,229,212,.5); }
.ablage-flaeche.ablage-aktiv { border-color: var(--c-accent); background: rgba(0,229,212,.08); }
.ablage-flaeche input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ablage-titel { font-weight: 700; color: var(--c-text); }
.ablage-text { max-width: 520px; font-size: .85rem; color: var(--c-muted); }
.ablage-liste { list-style: none; margin: 12px 0 0; padding: 0; }
.ablage-liste:empty { display: none; }
.ablage-zeile {
  display: flex; justify-content: space-between; gap: 12px; padding: 7px 0;
  border-top: 1px solid var(--c-border); font-size: .9rem;
}
.ablage-zeile:first-child { border-top: 0; }
.ablage-name { min-width: 0; overflow-wrap: anywhere; }
.ablage-zeile > span:last-child { flex: none; color: var(--c-muted); }
.ablage-rechnet > span:last-child { color: var(--c-accent); }
.ablage-fertig > span:last-child { color: var(--c-success); }
.ablage-fehler > span:last-child { color: var(--c-error); flex: 0 1 auto; text-align: right; }
.ablage-fertig a { color: var(--c-accent); }
.ablage-hinweis { margin: -4px 0 14px; }
.pos-bild {
  width: 64px; height: 48px; margin-right: 10px; vertical-align: middle; object-fit: contain;
  border-radius: 4px; background: var(--c-surface-alt);
}
/* Im Produktionsplan erkennt man das Teil am Bild: groß genug zum Hinschauen */
.plan-pos-tabelle .pos-bild { width: 104px; height: 78px; border-radius: 6px; }
/* Zähler neuer Anfragen am „Mehr"-Knopf: im eingeklappten Sheet sähe ihn niemand */
.tabbar-item { position: relative; }
.tab-zahl {
  position: absolute; top: 3px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: 999px; background: var(--c-accent); color: #0a0a0a;
  font-size: .66rem; font-weight: 700; line-height: 17px; text-align: center;
}
/* Muss hinter der Grundregel stehen, sonst gewinnt bei gleicher Spezifität die feste Breite */
@media (max-width: 680px) {
  .anfrage-bild { width: 100%; height: auto; aspect-ratio: 4 / 3; }
}

.summe-row td { border-top: 2px solid var(--c-border); color: var(--c-text); font-size: .85rem; }
.summe-row td:first-child { color: var(--c-muted); text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; }

.plan-titel { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c-accent); margin: 6px 0 14px; }

.drucker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.drucker-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 18px; box-shadow: var(--shadow); }
.drucker-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.drucker-name { font-weight: 700; font-size: 1.05rem; }
.drucker-sub { font-size: .82rem; color: var(--c-muted); margin-top: 2px; }
.plan-tabelle { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.plan-tabelle th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-muted); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--c-border); }
.plan-tabelle td { padding: 6px 6px; font-size: .84rem; border-bottom: 1px solid rgba(58,58,58,.5); }
.plan-tabelle th.th-center, .plan-tabelle td.th-center { text-align: center; }
.drucker-foot { font-size: .85rem; color: var(--c-muted); padding-top: 4px; }
.drucker-foot strong { color: var(--c-text); }
.drucker-frei { font-size: .85rem; color: var(--c-muted); padding: 10px 0; }
.drucker-actions { display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--c-border); }
.drucker-actions form { display: inline; margin: 0; }

.col-reserviert, .col-frei { font-variant-numeric: tabular-nums; }

.plan-hinweis { font-size: .78rem; color: var(--c-muted); margin-top: 10px; }
.filter-hinweis { font-size: .84rem; color: var(--c-muted); margin: -8px 0 18px; padding: 0 2px; }
.filter-hinweis a { color: var(--c-accent); text-decoration: none; }
.filter-hinweis a:hover { text-decoration: underline; }

/* ── Fortschrittsbalken & Produktionsboard ── */
.progress { height: 9px; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 999px; overflow: hidden; }
.progress-sm { height: 7px; }
.progress-bar { height: 100%; background: var(--c-accent); border-radius: 999px; transition: width .3s ease; }
.progress-bar.voll { background: var(--c-success); }

.plan-board { display: flex; flex-direction: column; gap: 16px; }
.plan-job { border: 1px solid var(--c-border); border-radius: var(--radius); padding: 14px 16px; background: var(--c-surface-alt); }
.plan-job-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 10px; }
.plan-job-titel { font-size: 1rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plan-job-eta { font-size: .84rem; color: var(--c-muted); }
.plan-job-eta strong { color: var(--c-text); }
.plan-fortschritt { margin-bottom: 10px; }
/* Erwartete Marge je Auftrag: Preis, Material, Druckstunden, Gewinn */
.plan-kalk { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .82rem; color: var(--c-muted); margin: -2px 0 8px; }
.plan-kalk strong { color: var(--c-text); }
.plan-kalk .plan-kalk-gewinn strong { color: inherit; }
.progress-label { font-size: .8rem; color: var(--c-muted); margin-top: 5px; font-variant-numeric: tabular-nums; }

.plan-pos-tabelle { width: 100%; border-collapse: collapse; }
.plan-pos-tabelle td { padding: 8px 6px; border-top: 1px solid var(--c-border); vertical-align: middle; }
.plan-pos-tabelle tr:first-child td { border-top: none; }
.pos-name { font-weight: 600; font-size: .9rem; width: 28%; }
.pos-sub { display: block; font-weight: 400; font-size: .76rem; color: var(--c-muted); margin-top: 2px; }
.pos-kopf { display: flex; align-items: center; gap: 10px; }
.pos-kopf .pos-bild-link { flex: none; }
.pos-kopf .pos-bild { margin-right: 0; }
.pos-bild-link { display: inline-block; cursor: grab; }
.pos-bild-link:hover .pos-bild { outline: 1px solid var(--c-accent); }
/* Am Rechner vergrößert der Mauszeiger das Bild, ohne dass die Zeile springt */
@media (hover: hover) {
  .pos-bild-link { position: relative; }
  .pos-bild { transition: transform .15s ease; transform-origin: left center; }
  .pos-bild-link:hover .pos-bild { transform: scale(2.6); position: relative; z-index: 20; background: var(--c-surface); box-shadow: 0 8px 28px rgba(0,0,0,.45); }
}
.stat-sub { font-size: .78rem; color: var(--c-muted); }
.bh-dienst-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bh-dienst-zeile input, .bh-dienst-zeile select { flex: 1 1 0; min-width: 0; }
.bh-dienst-zeile input[type="date"] { flex: 1 1 130px; }
.bh-dienst-zeile span { flex: none; color: var(--c-muted); font-size: .88rem; }
.bh-dienst-zeile .check-chip { flex: none; }
.bh-abo-info { font-size: .9rem; padding: 9px 0; }
/* Popup mit den Abbuchungen eines Abos */
.bh-dialog.abo-dialog { width: min(640px, calc(100vw - 32px)); }
.abo-preise { margin: 10px 0 14px; font-size: .88rem; color: var(--c-muted); }
.abo-preise span { color: var(--c-text); }
.abo-verlauf { margin-bottom: 12px; }
.abo-zeile { border-top: 1px solid var(--c-border); }
.abo-zeile:first-child { border-top: 0; }
.abo-kopf {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) auto 30px; align-items: center; gap: 4px 12px;
  padding: 8px 0; font-size: .9rem; list-style: none;
}
.abo-kopf::-webkit-details-marker { display: none; }
summary.abo-kopf { cursor: pointer; }
.abo-geplant { color: var(--c-muted); font-style: italic; }
.abo-datum { font-variant-numeric: tabular-nums; }
.abo-text { min-width: 0; overflow-wrap: anywhere; color: var(--c-muted); }
.abo-betrag { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.abo-stift {
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--c-border); border-radius: var(--radius); color: var(--c-muted);
}
summary.abo-kopf:hover .abo-stift, .abo-zeile[open] .abo-stift { border-color: var(--c-accent); color: var(--c-accent); }
.abo-aendern {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px;
  padding: 8px 10px; border-radius: var(--radius); background: var(--c-surface-alt);
}
.abo-beleg-da { margin-left: 6px; color: var(--c-accent); white-space: nowrap; }
.abo-beleg-fehlt { margin-left: 6px; font-size: .78rem; color: var(--c-warn); white-space: nowrap; }
.abo-belege { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.abo-belege .bh-anhaenge { margin: 0; }
.abo-ablage { padding: 10px; }
.abo-buchung-link { align-self: flex-end; font-size: .82rem; }
.abo-pill { text-decoration: none; cursor: pointer; }
.abo-pill:hover { border-color: var(--c-accent); color: var(--c-accent); }
.abo-dialog .alert { margin-bottom: 10px; }
.abo-aendern input[name=betrag] {
  width: 100px; padding: 6px 8px; text-align: right; font: inherit;
  border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); color: var(--c-text);
}
.warteschlange { margin-bottom: 16px; }
.preis-zelle input {
  width: 84px; padding: 5px 8px; text-align: right; font: inherit; font-size: .88rem;
  border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface-alt); color: var(--c-text);
}
.preis-zelle input:focus { outline: none; border-color: var(--c-accent); }
.preis-summe { display: block; margin-top: 3px; font-size: .76rem; color: var(--c-muted); }
/* Pfad der Datei vor dem Hochladen: in der Stückliste einfügen, im Plan kopieren */
.pfad-zelle { margin-top: 4px; }
.pfad-zelle input {
  box-sizing: border-box; width: 100%; min-width: 140px; padding: 4px 8px; font: inherit; font-size: .76rem; font-weight: 400;
  border: 1px dashed var(--c-border); border-radius: var(--radius); background: transparent; color: var(--c-muted);
}
.pfad-zelle input:not(:placeholder-shown) { border-style: solid; color: var(--c-text); }
.pfad-zelle input:focus { outline: none; border: 1px solid var(--c-accent); color: var(--c-text); }
.quellpfad {
  display: inline; margin-left: 4px; padding: 0; border: 0; background: none;
  font: inherit; font-size: .74rem; font-weight: 400; color: var(--c-muted);
  text-decoration: underline dotted; white-space: nowrap; cursor: copy;
}
.quellpfad:hover { color: var(--c-accent); }
.quellpfad.kopiert { color: var(--c-accent); }
.pos-kopf-text { min-width: 0; overflow-wrap: anywhere; }
.pos-progress { width: 44%; }
.pos-zahlen { display: block; font-size: .76rem; color: var(--c-muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.pos-steuerung { text-align: right; white-space: nowrap; }
.pos-steuerung .btn-mini { margin-left: 4px; }
/* Platte buchen: Knopf mit Teilezahl, links und rechts Pfeile zum Regeln */
.platte-buchen {
  display: inline-flex; align-items: stretch; margin-left: 4px; vertical-align: middle;
  border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface-alt); overflow: hidden;
}
.platte-buchen button {
  background: none; border: 0; color: var(--c-text); font: inherit; font-size: .8rem; font-weight: 600; line-height: normal; cursor: pointer;
}
.platte-buchen .platte-go { padding: 5px 8px; white-space: nowrap; border-left: 1px solid var(--c-border); border-right: 1px solid var(--c-border); }
.platte-buchen .platte-pfeil { padding: 5px 7px; color: var(--c-muted); }
.platte-buchen button:hover, .platte-geaendert .platte-go { color: var(--c-accent); }
.platte-buchen:hover { border-color: var(--c-accent); }
.platte-zahl { font-variant-numeric: tabular-nums; }
.pos-fertig .pos-name, .pos-fertig .pos-zahlen { opacity: .65; }
.btn-mini-go { border-color: var(--c-accent); color: var(--c-accent); }
.btn-mini-go:hover { background: var(--c-accent); color: #0a0a0a; }

/* Produktionsplan auf dem Handy: jede Position eine eigene Karte, der
   Fortschrittsbalken über die volle Breite, die Meldeknöpfe darunter in
   Fingergröße. „Rest fertig" steht bewusst allein in der letzten Zeile. */
@media (max-width: 680px) {
  .plan-job { padding: 12px 12px 13px; }
  .plan-job-head { gap: 4px 10px; }
  .plan-job-titel { font-size: .95rem; }
  /* Der Auftragsname öffnet den Auftrag — als Ziel für den Daumen zu flach */
  .plan-job-titel .zeilen-link { display: inline-flex; align-items: center; min-height: var(--tap); }

  .plan-pos-tabelle, .plan-pos-tabelle tbody, .plan-pos-tabelle tr { display: block; }
  .plan-pos-tabelle tr {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius); padding: 11px 12px; margin-bottom: 10px;
  }
  .plan-pos-tabelle tr:last-child { margin-bottom: 0; }
  .plan-pos-tabelle td { display: block; width: auto; text-align: left; border: none; padding: 0; }
  .plan-pos-tabelle tr:first-child td { border-top: none; }

  .pos-name { font-size: .95rem; }
  .plan-pos-tabelle .pos-bild { width: 80px; height: 60px; }
  .pos-progress { margin-top: 9px; }
  /* td-Selektor mitgeführt, sonst gewinnt die Block-Regel oben nach Spezifität */
  .plan-pos-tabelle td.pos-steuerung {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; white-space: normal;
  }
  /* 76px: schmal genug, dass −1 und +1 in eine Zeile passen; die Plattenknöpfe
     stehen darunter je in einer eigenen Zeile, die Pfeile in Fingergröße */
  .pos-steuerung .btn-mini { flex: 1 1 auto; min-width: 76px; margin: 0; padding: 10px 8px; justify-content: center; }
  .pos-steuerung .btn-mini-go { flex-basis: 100%; }
  .platte-buchen { flex: 1 1 140px; margin: 0; min-height: var(--tap); }
  .platte-buchen .platte-go { flex: 1; padding: 10px 6px; }
  .platte-buchen .platte-pfeil { padding: 10px 14px; font-size: 1rem; }
}

@media (max-width: 680px) {
  .drucker-grid { grid-template-columns: 1fr; }
}

/* ── Daten: Export / Import ── */
.text-error { color: var(--c-error); }
.text-ok { color: var(--c-success); }
.daten-text { color: var(--c-muted); font-size: .9rem; margin-bottom: 16px; max-width: 74ch; }
.daten-text:last-child { margin-bottom: 0; }
.daten-radio { display: flex; margin-bottom: 8px; font-size: .9rem; }
.daten-meldungen { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.meldung-block { background: var(--c-surface-alt); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 10px 14px; }
.meldung-titel { font-weight: 700; font-size: .82rem; margin-bottom: 6px; }
.meldung-block ul { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.meldung-block li { font-size: .84rem; }
input[type="file"] { cursor: pointer; }
input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 7px 14px; border-radius: var(--radius);
  border: 1px solid var(--c-border); background: var(--c-surface-alt); color: var(--c-text);
  font-family: inherit; font-weight: 600; font-size: .85rem; cursor: pointer; transition: border-color .15s, color .15s;
}
input[type="file"]::file-selector-button:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* ── Angebrochene Rollen ── */
.step-anbruch { margin-right: 6px; font-size: .8rem; border-radius: var(--radius); color: var(--c-muted); }
.step-anbruch:hover:not(:disabled) { border-color: var(--c-warn); color: var(--c-warn); }
.step-anbruch:disabled { opacity: .35; cursor: default; }
.step-anbruch-aktiv {
  background: rgba(251,191,36,.14); border-color: rgba(251,191,36,.55); color: var(--c-warn);
}
.step-anbruch-aktiv:active { background: var(--c-warn); color: #0a0a0a; }
.anbruch-gesamt { color: var(--c-warn); }  /* Bestand mit angebrochener Rolle */
.rollen-striche i.strich-halb { height: 6px; align-self: flex-end; opacity: .85; }

/* ── Änderungsprotokoll ── */
.protokoll-tabelle { min-width: 860px; }  /* lieber scrollen als Spalten zerquetschen */
.protokoll-tabelle td { vertical-align: top; }
.protokoll-artikel { min-width: 230px; }
.protokoll-notiz { font-size: .78rem; color: var(--c-muted); margin-top: 2px; }
.protokoll-partner { font-size: .78rem; color: var(--c-muted); margin-top: 2px; }
/* Einkauf aus dem Beleg: in der Farbe des Lieferanten */
.pill-einkauf { background: rgba(167,139,250,.12); color: #a78bfa; border-color: rgba(167,139,250,.35); }
.protokoll-partner a { color: var(--c-accent); text-decoration: none; }
.protokoll-partner a:hover { text-decoration: underline; }
.nowrap { white-space: nowrap; }
.delta { font-weight: 700; font-variant-numeric: tabular-nums; }
.delta-plus { color: var(--c-success); }
.delta-minus { color: var(--c-error); }
.blaettern { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.pill-buchung { background: rgba(160,160,160,.12); color: var(--c-muted); border-color: rgba(160,160,160,.3); }
.pill-anbruch, .pill-anbruch_leer, .pill-anbruch_zurueck { background: rgba(251,191,36,.12); color: var(--c-warn); border-color: rgba(251,191,36,.35); }
.pill-produktion { background: rgba(0,229,212,.12); color: var(--c-accent); border-color: rgba(0,229,212,.35); }
.pill-stammdaten { background: rgba(74,222,128,.12); color: var(--c-success); border-color: rgba(74,222,128,.3); }
.pill-import { background: rgba(255,255,255,.06); color: var(--c-text); border-color: var(--c-border); }

/* ══════════════════════════════════════════════════════════════
   Handy: Bestandstabellen als Karten, Direkteingabe, Undo
   ══════════════════════════════════════════════════════════════ */

/* Direkteingabe der Menge (Tippen auf die Zahl im Stepper) */
.step-eingabe {
  width: 62px; height: 26px; text-align: center; font-weight: 700;
  font-family: inherit; font-size: .95rem; font-variant-numeric: tabular-nums;
  background: var(--c-surface); color: var(--c-text);
  border: 1px solid var(--c-accent); border-radius: var(--radius);
}
.step-eingabe:focus { outline: none; }
.step-val { cursor: pointer; }
.step-val:hover { color: var(--c-accent); }
.step-val:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }

/* Undo-Leiste nach jeder Buchung */
.undo-leiste {
  position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: 22px;
  display: flex; align-items: center; gap: 14px;
  width: max-content; max-width: min(560px, calc(100vw - 24px));
  background: var(--c-surface-alt); border: 1px solid var(--c-border);
  border-radius: var(--radius-lg); padding: 9px 10px 9px 16px;
  box-shadow: 0 6px 22px rgba(0,0,0,.5);
}
.undo-leiste[hidden] { display: none; }
.undo-text { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.undo-knopf {
  flex: none; background: none; border: none; cursor: pointer; font-family: inherit;
  color: var(--c-accent); font-weight: 700; font-size: .88rem;
  padding: 7px 12px; border-radius: var(--radius);
}
.undo-knopf:hover { background: rgba(0,229,212,.12); }

/* Filterleiste: „Filter" klappt die Feinheiten auf, nur auf dem Handy */
.filter-toggle { display: none; }
.filter-erweitert { display: contents; }

@media (max-width: 680px) {
  .filter-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    flex: 1; min-height: var(--tap); padding: 10px 16px;
    background: transparent; color: var(--c-text); cursor: pointer; font-family: inherit;
    border: 1px solid var(--c-border); border-radius: var(--radius);
    font-size: .9rem; font-weight: 600;
  }
  .filter-toggle[aria-expanded="true"] { border-color: var(--c-accent); color: var(--c-accent); }
  .filter-toggle.hat-filter::after {
    content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent);
  }
  .filter-erweitert { display: none; }
  .filter-erweitert.offen { display: flex; flex-direction: column; gap: 10px; width: 100%; }
  .filter-erweitert .check { padding: 2px 0; }

  .undo-leiste {
    left: 12px; right: 12px; transform: none; width: auto; max-width: none;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px);
  }
  .undo-knopf { min-height: var(--tap); padding: 8px 14px; }
  .step-eingabe { width: 72px; height: var(--tap); font-size: 16px; }
}

/* ── Zeile wird Karte (jede Tabelle mit der Klasse .karten) ──
   Grundmuster: die Zeile wird eine Karte, jede Zelle eine Zeile darin mit
   der Spaltenüberschrift aus data-label davor. Die Bestandstabellen weiter
   unten legen darüber noch ein eigenes Raster. ── */
@media (max-width: 680px) {
  .table-wrap:has(.karten) { overflow-x: visible; }
  .karten, .karten tbody, .karten tfoot { display: block; }
  .karten thead { display: none; }
  .karten.protokoll-tabelle { min-width: 0; }

  /* Flex-Spalte statt Block, damit die Titelzelle per order nach oben darf,
     egal an welcher Stelle sie in der Tabelle steht. */
  .karten tr {
    display: flex; flex-direction: column; margin-bottom: 10px;
    background: var(--c-surface-alt); border: 1px solid var(--c-border);
    border-radius: var(--radius); padding: 12px 14px;
  }
  .karten td { border: none; padding: 0; font-size: .92rem; }

  /* Standardzelle: Beschriftung links, Wert rechts. Die beiden
     Bestandstabellen sind ausgenommen, die haben ihr eigenes Raster. */
  .karten:not(.ersatzteil-tabelle) :is(tbody, tfoot) td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    text-align: left; padding: 3px 0;
  }
  .karten td:empty { display: none; }
  .karten td[data-label]::before {
    content: attr(data-label); flex: none;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--c-muted); font-weight: 600;
  }
  /* Titelzelle steht immer oben, unabhängig von der Spaltenreihenfolge */
  .karten td.karte-titel {
    display: block; order: -1; font-size: 1rem; font-weight: 600; padding: 0 0 4px;
  }
  /* Der Titel ist auf dem Handy das „Öffnen"-Ziel der Karte — ein 25px hoher
     Textlink ist dafür zu knapp. */
  .karten td.karte-titel .zeilen-link {
    display: flex; align-items: center; min-height: var(--tap); margin: -8px 0 -4px;
  }
  .karten td.karte-titel::before { display: none; }

  /* Knopfreihe am Fuß der Karte */
  .karten td.row-actions {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; order: 1;
    border-top: 1px solid var(--c-border); margin-top: 8px; padding-top: 10px;
  }
  .karten td.row-actions::before { display: none; }
  .karten td.row-actions form { flex: 1 1 auto; display: flex; margin: 0; }
  .karten td.row-actions .btn-mini { flex: 1 1 auto; min-width: 88px; justify-content: center; }

  /* Summenzeile bleibt eine Karte, nur ohne Rahmenfarbe */
  .karten .summe-row { background: var(--c-surface); }
  .karten .summe-row td:first-child {
    color: var(--c-muted); text-transform: uppercase; letter-spacing: .05em; font-size: .72rem;
  }
  .karten tr.row-warn { border-color: rgba(251,191,36,.45); background: rgba(251,191,36,.06); }
  .karten tr.row-inaktiv { opacity: .5; }

  /* Zwischenüberschrift je Filamenttyp bleibt eine eigene Zeile */
  .karten tr.group-head {
    display: block; background: none; border: none; padding: 0; margin: 16px 0 8px;
  }
  .karten tr.group-head:first-child { margin-top: 2px; }
  .karten .group-head td { background: none; padding: 0; }

  /* Werk-Zeilen: Beschriftung links, Stepper rechts im Daumenbereich */
  .karten td.col-stepper {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 3px 0;
  }
  .karten td.col-stepper::before {
    content: attr(data-label);
    font-size: .82rem; font-weight: 600; color: var(--c-muted);
    /* Der Stepper hat Vorrang: lieber der Werkname gekürzt als ein Plus,
       das rechts aus der Karte fällt. */
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Fußzeile der Karte: Gesamt / Reserviert / Frei nebeneinander */
  .karten td.col-gesamt, .karten td.col-reserviert, .karten td.col-frei {
    display: flex; flex-direction: column; gap: 1px; text-align: left;
    border-top: 1px solid var(--c-border); margin-top: 6px; padding-top: 8px;
    font-weight: 700; font-variant-numeric: tabular-nums;
  }
  .karten td.col-gesamt::before, .karten td.col-reserviert::before, .karten td.col-frei::before {
    content: attr(data-label);
    font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--c-muted); font-weight: 600;
  }
  .karten .rollen-striche { justify-content: flex-start; margin: 4px 0 0; max-width: none; }

  /* Ersatzteil: Bezeichnung + Gesamt, Größe, dann beide Werke */
  .ersatzteil-tabelle.karten tr {
    display: grid; gap: 3px 10px;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "bez     ges"
      "groesse ges"
      "werk1   werk1"
      "werk2   werk2";
  }
  .ersatzteil-tabelle.karten td:nth-child(1) { grid-area: bez; font-weight: 600; font-size: 1rem; }
  .ersatzteil-tabelle.karten td:nth-child(2) { grid-area: groesse; color: var(--c-muted); font-size: .84rem; }
  .ersatzteil-tabelle.karten td:nth-child(3) { grid-area: werk1; }
  .ersatzteil-tabelle.karten td:nth-child(4) { grid-area: werk2; }
  .ersatzteil-tabelle.karten td:nth-child(5) {
    grid-area: ges; align-items: flex-end; text-align: right;
    border: none; margin: 0; padding: 0; font-size: 1.15rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   Filamentlager — eigener Bereich, vom Handy her gedacht
   Kein Tabellenumbau per Media-Query wie auf der Übersicht: hier ist die
   Karte die Grundform, der Desktop stellt nur mehrere nebeneinander.
   ══════════════════════════════════════════════════════════════ */

/* ── Segmentierter Umschalter (Werk, Gruppieren, Sortieren) ── */
.seg {
  display: flex; gap: 3px; padding: 3px;
  background: var(--c-surface-alt); border: 1px solid var(--c-border); border-radius: var(--radius);
}
.seg-item {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 34px; padding: 4px 10px; border-radius: 4px;
  font-size: .85rem; font-weight: 600; color: var(--c-muted);
  cursor: pointer; user-select: none; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  transition: background .12s, color .12s;
}
.seg-item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg-item:hover { color: var(--c-text); }
.seg-item.seg-aktiv, .seg-item:has(input:checked) { background: var(--c-accent); color: #0a0a0a; }
.seg-item input:focus-visible + span { outline: 2px solid var(--c-text); outline-offset: 3px; border-radius: 2px; }

/* ── Bedienleiste über der Liste ── */
.fl-leiste {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg);
  padding: 12px 14px; margin-bottom: 18px;
}
.fl-suchzeile { display: flex; gap: 10px; align-items: center; }
.fl-suche {
  flex: 1 1 auto; min-width: 0; padding: 9px 12px;
  border: 1px solid var(--c-border); border-radius: var(--radius);
  background: var(--c-surface-alt); color: var(--c-text); font-size: .92rem; font-family: inherit;
}
.fl-suche:focus { outline: none; border-color: var(--c-accent); }
.fl-optionen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.fl-option { display: flex; align-items: center; gap: 10px; }
.fl-option-titel { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); font-weight: 700; }
.fl-option .seg { flex: 0 0 auto; }
.fl-option .seg-item { flex: 0 0 auto; }
.fl-option-haken { gap: 16px; flex-wrap: wrap; }
.btn-zuruecksetzen { margin-left: auto; padding: 8px 16px; font-size: .85rem; }

/* Abschnittsüberschrift auf der Übersicht (Filamente / Ersatzteile) */
.abschnitt-titel {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--c-accent); margin: 4px 0 12px;
}

/* ── Kopfzahlen über der Liste ── */
.fl-zahlen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  margin-bottom: 14px; font-size: .84rem; color: var(--c-muted);
}
.fl-zahlen strong { color: var(--c-text); font-size: 1rem; font-variant-numeric: tabular-nums; }
.fl-zahl-warn strong { color: var(--c-warn); }
.fl-alle {
  margin-left: auto; background: none; border: 1px solid var(--c-border); border-radius: var(--radius);
  color: var(--c-muted); font-family: inherit; font-size: .8rem; font-weight: 600;
  padding: 7px 13px; cursor: pointer; transition: border-color .15s, color .15s;
}
.fl-alle:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* ── Gruppe: Filamenttyp oder Farbfamilie, auf- und zuklappbar ── */
.fl-gruppe {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius-lg); margin-bottom: 12px; overflow: hidden;
}
.fl-gruppe-kopf {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  cursor: pointer; list-style: none; user-select: none;
}
.fl-gruppe-kopf::-webkit-details-marker { display: none; }
.fl-gruppe-kopf:hover { background: rgba(255,255,255,.03); }
.fl-pfeil {
  flex: none; width: 9px; height: 9px; margin-left: 2px;
  border-right: 2px solid var(--c-muted); border-bottom: 2px solid var(--c-muted);
  transform: rotate(-45deg); transition: transform .15s;
}
.fl-gruppe[open] > .fl-gruppe-kopf .fl-pfeil { transform: rotate(45deg); }
.fl-gruppe-name {
  font-weight: 700; font-size: .9rem; letter-spacing: .02em;
  border: 1.5px solid var(--c-accent); color: var(--c-accent);
  border-radius: 999px; padding: 1px 13px; white-space: nowrap;
}
/* Lange Gruppennamen haben eine Kurzform fürs Handy (siehe Handy-Block) */
.fl-name-kurz { display: none; }
/* Wird es eng, rutschen überzählige Tupfer in eine zweite Zeile, die die feste
   Höhe verschluckt. So fällt ein Tupfer ganz weg, statt halb abgeschnitten
   dazustehen. */
.fl-punkte {
  display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; overflow: hidden; margin-right: auto;
  height: 16px; box-sizing: border-box;
  background: rgba(255,255,255,.14); border-radius: 999px; padding: 2px 4px;
}
/* Ohne jeden Ring. Jede Kante frisst bei so kleinen Flaechen einen guten Teil
   des Farbkerns und zieht die Toene zusammen — Pink, Rot und Kürbisorange
   wurden dadurch ein einziges Rot, Weiss wurde grau. Die Farbe zaehlt hier
   mehr als eine saubere Kante. */
.fl-punkte i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.fl-gruppe-zahl {
  flex: none; font-weight: 700; font-variant-numeric: tabular-nums; font-size: .95rem;
  display: flex; align-items: baseline; gap: 5px;
}
.fl-gruppe-zahl small { font-size: .7rem; font-weight: 500; color: var(--c-muted); text-transform: uppercase; letter-spacing: .05em; }
.fl-gruppe-warn {
  background: rgba(251,191,36,.14); color: var(--c-warn); border: 1px solid rgba(251,191,36,.4);
  border-radius: 999px; font-size: .7rem; padding: 1px 8px;
}
.fl-karten {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 10px;
  padding: 0 14px 14px;
}

/* ── Offene Lieferungen (oben im Filamentlager) ──
   Lagerzeilen aus Einkaufsbelegen, die noch ins Regal müssen. Je Beleg ein
   Block, je Position Artikel, Menge, Werk und die Knöpfe. */
.lf-panel {
  background: var(--c-surface); border: 1px solid var(--c-accent);
  border-radius: var(--radius-lg); padding: 12px 14px; margin-bottom: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
/* Knopf „Lieferungen“ über der Filamentliste, mit Zahl offener Positionen */
.lf-leiste { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.lf-knopf { display: inline-flex; align-items: center; gap: 8px; }
.lf-knopf-offen { border-color: var(--c-accent); color: var(--c-accent); }
.lf-badge {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 11px; background: var(--c-accent); color: #0a0a0a; font-size: .78rem; font-weight: 700;
}
.lf-erledigt { border-color: var(--c-border); }
.lf-erledigt > summary { cursor: pointer; list-style: none; }
.lf-erledigt > summary::-webkit-details-marker { display: none; }
.lf-erledigt-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .86rem; }
.lf-erledigt-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.lf-erledigt-liste .farbpunkt { width: 10px; height: 10px; border-radius: 50%; flex: none; border: 1px solid rgba(255,255,255,.2); }
.lf-erledigt-liste a, .lf-panel p a { color: var(--c-accent); text-decoration: none; }
@media (max-width: 680px) {
  .lf-leiste .btn { min-height: var(--tap); }
}
.lf-titel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.lf-titel strong { color: var(--c-accent); font-size: 1rem; }
.lf-lieferung { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--c-border); padding-top: 10px; }
.lf-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.lf-lieferant { font-weight: 600; }
.lf-kopf a { color: var(--c-accent); text-decoration: none; }
.lf-kopf a:hover { text-decoration: underline; }
.lf-kopf .lf-alle { margin-left: auto; }
.lf-zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) 120px 150px auto; gap: 6px 8px; align-items: center;
  padding: 6px 0;
}
.lf-zeile + .lf-zeile { border-top: 1px dashed var(--c-border); }
.lf-artikel { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lf-name { display: flex; align-items: center; gap: 6px; font-size: .92rem; }
.lf-name .farbpunkt { width: 12px; height: 12px; border-radius: 50%; flex: none; border: 1px solid rgba(255,255,255,.2); }
.lf-rechnung { font-size: .78rem; color: var(--c-muted); overflow-wrap: anywhere; }
.lf-zeile select, .lf-zeile input {
  width: 100%; min-width: 0; padding: 7px 9px; font-size: .86rem;
  background: var(--c-surface-alt); color: var(--c-text); border: 1px solid var(--c-border); border-radius: var(--radius);
}
.lf-zeile select:focus, .lf-zeile input:focus { outline: none; border-color: var(--c-accent); }
.lf-zeile select.lf-werk-offen:has(option[value=""]:checked) { border-color: var(--c-accent); color: var(--c-muted); }
/* Formular ist unterwegs (lager.js Abschnitt 19): Knöpfe sehen gesperrt aus */
form.form-sendet button[type=submit], form.form-sendet button:not([type]) { opacity: .55; cursor: progress; }
.lf-menge { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--c-muted); }
.lf-menge input { width: 64px; flex: none; }
.lf-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: flex-end; }
.lf-weg {
  width: 30px; height: 30px; background: transparent; border: 1px solid var(--c-border);
  border-radius: var(--radius); color: var(--c-muted); cursor: pointer;
}
.lf-weg:hover { border-color: var(--c-error); color: var(--c-error); }
@media (max-width: 680px) {
  .lf-zeile { grid-template-columns: 1fr 1fr; }
  .lf-artikel, .lf-knoepfe { grid-column: 1 / -1; }
  .lf-knoepfe { justify-content: flex-start; }
  .lf-knoepfe .btn-mini { min-height: var(--tap); padding: 0 16px; display: inline-flex; align-items: center; }
  .lf-knoepfe .btn-mini-go { flex: 1; justify-content: center; }
  .lf-weg { width: var(--tap); height: var(--tap); }
  .lf-zeile select, .lf-zeile input { min-height: var(--tap); font-size: 16px; }
}

/* ── Neues Filament anlegen (aufklappbar am Ende der Liste) ── */
.neu-panel {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius-lg); margin-top: 4px; overflow: hidden;
}
.neu-knopf {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  cursor: pointer; list-style: none; user-select: none;
  font-weight: 600; font-size: .95rem; color: var(--c-accent);
}
.neu-knopf::-webkit-details-marker { display: none; }
.neu-knopf:hover { background: rgba(255,255,255,.03); }
.neu-plus {
  display: grid; place-items: center; flex: none; width: 24px; height: 24px;
  border: 1.5px solid var(--c-accent); border-radius: 50%;
  font-size: 1rem; font-weight: 700; line-height: 1;
}
.neu-panel[open] .neu-plus { transform: rotate(45deg); }   /* Plus wird zum Kreuz */
.neu-form { padding: 4px 16px 16px; border-top: 1px solid var(--c-border); }
.neu-form .field-hint a { color: var(--c-accent); text-decoration: none; }
.neu-form .field-hint a:hover { text-decoration: underline; }

/* ── Die Filamentkarte ── */
.fkarte {
  display: flex; flex-direction: column; gap: 9px;
  background: var(--c-surface-alt); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 11px 12px 12px;
  /* Farbstreifen auf einer hellen Spur: ohne die rechte 1px-Kante wäre ein
     schwarzes Filament auf dem dunklen Grund schlicht nicht zu sehen. */
  box-shadow: inset 3px 0 0 var(--farbe), inset 4px 0 0 rgba(255,255,255,.3);
}
.fkarte-warn { border-color: rgba(251,191,36,.45); background: rgba(251,191,36,.06); }
.fkarte-kopf { display: flex; align-items: center; gap: 11px; }
/* Spule von vorn: Farbfläche mit dunklem Kern — auf einen Blick erkennbar */
/* Reine Farbflaeche, kein Ring und kein Spulenkern: beides lag auf der Farbe
   und hat sie verfaelscht. Wer wissen will, welche Farbe das ist, soll die
   Farbe sehen — der Name steht direkt daneben. */
.fkarte-spule {
  flex: none; width: 44px; height: 44px; border-radius: 11px; background: var(--farbe);
  /* Helle Platte drumherum, genau wie unter den Zaehlstrichen. Sie liegt
     ausserhalb der Farbe und nimmt ihr nichts weg, sie ersetzt nur den dunklen
     Karton als Umfeld. Vor Dunkel wirkt derselbe Ton dumpfer und dunkler als
     vor Hell; deshalb stimmte die Kachel nicht, die Striche aber schon.
     Als Rahmen statt als aeusserer Schatten, damit die Bambu-Maske sie stehen
     laesst (die schneidet alles ausserhalb der Box weg). */
  border: 3px solid rgba(255,255,255,.14);
  background-clip: padding-box;
}
.fkarte-namen { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.fkarte-farbe { font-weight: 600; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fkarte-sub { font-size: .78rem; color: var(--c-muted); }
/* Markenzeichen in der Farbfläche: Bambu Lab bekommt sein Zeichen, alles
   andere ein X. Beides ist eine Aussparung, die Farbe bleibt also die Farbe
   und das Zeichen ist das Loch darin. Die Maske lässt alles stehen und stanzt
   nur die Form aus (fill-rule evenodd mit gefülltem Außenquadrat). */
.fkarte-spule-bambu, .fkarte-spule-fremd {
  -webkit-mask-size: 100% 100%;  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.fkarte-spule-bambu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M0 0H24V24H0ZM5.68 5.68H18.32V18.32H5.68ZM7.16 7.16H16.84V16.84H7.16ZM8.65 8.65H11.19V15.35L8.65 14.05ZM12.81 8.65L15.35 9.95V15.35H12.81Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M0 0H24V24H0ZM5.68 5.68H18.32V18.32H5.68ZM7.16 7.16H16.84V16.84H7.16ZM8.65 8.65H11.19V15.35L8.65 14.05ZM12.81 8.65L15.35 9.95V15.35H12.81Z'/%3E%3C/svg%3E");
}
.fkarte-spule-fremd {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M0 0H24V24H0ZM16.48 5.68L18.32 7.52L13.84 12L18.32 16.48L16.48 18.32L12 13.84L7.52 18.32L5.68 16.48L10.16 12L5.68 7.52L7.52 5.68L12 10.16Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M0 0H24V24H0ZM16.48 5.68L18.32 7.52L13.84 12L18.32 16.48L16.48 18.32L12 13.84L7.52 18.32L5.68 16.48L10.16 12L5.68 7.52L7.52 5.68L12 10.16Z'/%3E%3C/svg%3E");
}

/* Bei dunklen Filamenten zeigt eine Aussparung den Kartenhintergrund, und der
   ist selbst dunkel: das Zeichen verschwindet. Solche Farben tragen es in
   Weiß obendrauf, statt es auszustanzen. */
.fkarte-spule-dunkel {
  -webkit-mask-image: none; mask-image: none;
  background-size: 70%; background-position: center; background-repeat: no-repeat;
}
.fkarte-spule-dunkel.fkarte-spule-bambu { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Crect x='3' y='3' width='18' height='18' fill='none' stroke='%23fff' stroke-width='2.4'/%3E%3Cpath d='M7.4 7.4h3.9v9.2l-3.9-1.7z'/%3E%3Cpath d='M12.7 7.4l3.9 1.7v7.5h-3.9z'/%3E%3C/svg%3E"); }
.fkarte-spule-dunkel.fkarte-spule-fremd { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M18.45 3L21 5.55L14.55 12L21 18.45L18.45 21L12 14.55L5.55 21L3 18.45L9.45 12L3 5.55L5.55 3L12 9.45Z'/%3E%3C/svg%3E"); }

.fkarte-namen { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.fkarte-farbe { font-weight: 600; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fkarte-sub { font-size: .78rem; color: var(--c-muted); }
/* Herstellerzeichen als Aussparung in der Farbfläche: die Farbe bleibt die
   Farbe, das Zeichen ist das Loch darin. Die Maske lässt alles stehen und
   stanzt nur die Form aus (fill-rule evenodd, äußeres Quadrat gefüllt).
   Die helle Platte liegt als Rahmen innerhalb der Box, damit sie die Maske
   übersteht; ein äußerer box-shadow würde mit weggeschnitten. */
.fkarte-spule-bambu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M0 0H24V24H0ZM5.68 5.68H18.32V18.32H5.68ZM7.16 7.16H16.84V16.84H7.16ZM8.65 8.65H11.19V15.35L8.65 14.05ZM12.81 8.65L15.35 9.95V15.35H12.81Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M0 0H24V24H0ZM5.68 5.68H18.32V18.32H5.68ZM7.16 7.16H16.84V16.84H7.16ZM8.65 8.65H11.19V15.35L8.65 14.05ZM12.81 8.65L15.35 9.95V15.35H12.81Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* Bei dunklen Filamenten zeigt eine Aussparung den Kartenhintergrund, und der
   ist selbst dunkel: das Zeichen verschwindet. Solche Farben tragen es in
   Weiss obendrauf, statt es auszustanzen. */
.fkarte-spule-bambu.fkarte-spule-dunkel {
  -webkit-mask-image: none; mask-image: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Crect x='3' y='3' width='18' height='18' fill='none' stroke='%23fff' stroke-width='2.4'/%3E%3Cpath d='M7.4 7.4h3.9v9.2l-3.9-1.7z'/%3E%3Cpath d='M12.7 7.4l3.9 1.7v7.5h-3.9z'/%3E%3C/svg%3E");
  background-size: 62%; background-position: center; background-repeat: no-repeat;
}
.fkarte-menge { flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.fkarte-zahl { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.fkarte-einheit {
  display: flex; align-items: center; gap: 7px;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-muted); font-weight: 600;
}
/* In der Karte erben die Striche die Farbe aus --farbe statt aus einem
   style-Attribut, und sie bleiben einzeilig neben der Einheit. */
.fkarte .rollen-striche { margin: 0; max-width: none; flex-wrap: nowrap; }
.fkarte .rollen-striche i { background: var(--farbe); }
.fkarte .rollen-striche i.strich-halb { opacity: 1; }

.fkarte-werke { display: flex; flex-direction: column; gap: 6px; }
.fkarte-werk {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 5px 7px 5px 11px;
}
.fkarte-werk-name { font-size: .84rem; font-weight: 600; color: var(--c-muted); min-width: 0; }
/* Übersicht: dieselbe Zeile, nur ohne Knöpfe — der Bestand steht rechts. */
.fkarte-werk-lesen { padding: 9px 12px; }
.fkarte-werk-wert { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1rem; }
.fkarte-anbruch-hinweis { display: block; font-style: normal; font-size: .7rem; color: var(--c-warn); font-weight: 600; }
.fkarte-fuss {
  display: flex; flex-wrap: wrap; gap: 4px 16px; padding-top: 8px;
  border-top: 1px solid var(--c-border); font-size: .76rem; color: var(--c-muted);
}
.fkarte-fuss strong { color: var(--c-text); font-variant-numeric: tabular-nums; }
/* ── Sorten bearbeiten: der Stift unten schaltet es für alle Karten frei ── */
/* Ein Stift, zwei Stellen: der Schalter unten und der Aufklapper je Karte. */
.icon-stift, .fkarte-edit-knopf::before {
  content: ""; flex: none; width: 14px; height: 14px; background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

.stift-zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  margin-top: 10px; padding: 0 2px 4px;
}
.stift-knopf {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 8px 14px; cursor: pointer;
  font-size: .84rem; font-weight: 600; color: var(--c-muted);
}
.stift-knopf:hover { border-color: var(--c-accent); color: var(--c-accent); }
/* Eingeschaltet ist der Stift selbst der Hinweis, dass die Liste gerade
   veränderbar ist — darum farbig und nicht nur gedrückt. */
.stift-knopf[aria-pressed="true"] {
  border-color: var(--c-accent); color: var(--c-accent); background: rgba(0,229,212,.08);
}
.stift-hinweis { font-size: .74rem; color: var(--c-muted); }
.stift-knopf[aria-pressed="true"] ~ .stift-hinweis { color: var(--c-accent); }

/* Ohne freigeschalteten Stift bleibt das Formular weg: die Karte ist zum
   Buchen da, nicht zum Umbauen. */
.fkarte-edit { display: none; border-top: 1px solid var(--c-border); margin-top: 2px; padding-top: 6px; }
body.bearbeiten-modus .fkarte-edit { display: block; }
.fkarte-edit-knopf {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  list-style: none; user-select: none;
  font-size: .76rem; font-weight: 600; color: var(--c-accent);
  padding: 3px 0;
}
.fkarte-edit-knopf::-webkit-details-marker { display: none; }
.fkarte-edit-knopf:hover { color: var(--c-accent); }
.fkarte-edit[open] .fkarte-edit-knopf { color: var(--c-accent); margin-bottom: 4px; }
.fkarte-edit-form { display: flex; flex-direction: column; gap: 8px; }
.fkarte-edit-aktionen { display: flex; gap: 8px; }
.fkarte-edit-aktionen .btn { flex: 1 1 auto; }
/* Löschen steht bewusst abgesetzt unter dem Speichern, nicht daneben: die
   beiden Knöpfe sollen sich auf dem Handy nicht verwechseln lassen. */
.fkarte-edit-loeschen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--c-border);
}
.fkarte-edit-hinweis { flex: 1 1 140px; font-size: .7rem; color: var(--c-muted); line-height: 1.35; }

/* Fehlmenge: der einzige Grund nachzubestellen, darum als Warnchip vorn */
.fkarte-fehlt {
  background: rgba(251,191,36,.14); color: var(--c-warn); border: 1px solid rgba(251,191,36,.4);
  border-radius: 999px; padding: 1px 10px; font-weight: 700; font-size: .74rem;
}
.fkarte-fehlt a { color: inherit; }
/* Für wen reserviert ist: je Auftrag eine Zeile, Menge rechtsbündig */
.fkarte-res { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: .74rem; color: var(--c-muted); }
.fkarte-res li { display: flex; gap: 8px; min-width: 0; }
.fkarte-res-wer { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fkarte-res a { color: var(--c-text); text-decoration: none; font-weight: 600; }
.fkarte-res a:hover { color: var(--c-accent); }
.fkarte-res-menge { margin-left: auto; color: var(--c-text); font-variant-numeric: tabular-nums; }
.fkarte-gekauft { margin: 0; font-size: .74rem; color: var(--c-muted); line-height: 1.4; }
.fkarte-gekauft a { color: var(--c-accent); text-decoration: none; }
.ersatzteil-gekauft { display: block; font-size: .74rem; color: var(--c-muted); }
.ersatzteil-gekauft a { color: inherit; }

/* ── Handy ── */
@media (max-width: 680px) {
  /* Die Leiste bleibt beim Scrollen stehen: Werk umschalten und suchen sind
     die Griffe, die man mitten in der Liste braucht. */
  .fl-leiste {
    padding: 9px; gap: 8px; z-index: 20;
    position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top));
    box-shadow: var(--shadow);
  }
  /* Ausgeklappt wäre die Leiste zu hoch zum Kleben — dann scrollt sie mit. */
  .fl-leiste.fl-offen { position: static; }
  .fl-suche { font-size: 16px; padding: 11px 12px; min-height: var(--tap); }
  .fl-mehr { flex: 0 0 auto; }
  .seg-item { min-height: var(--tap); font-size: .88rem; }
  /* Ausgeklappt stapeln sich die Feinheiten, jede über die volle Breite */
  .fl-optionen { display: none; }
  .fl-optionen.offen { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .fl-option { flex-direction: column; align-items: stretch; gap: 6px; }
  .fl-option .seg, .fl-option .seg-item { flex: 1 1 auto; }
  .fl-option-haken { flex-direction: column; align-items: flex-start; gap: 2px; }
  .btn-zuruecksetzen { margin-left: 0; }

  .fl-zahlen { gap: 6px 14px; }
  .fl-alle { min-height: var(--tap); }
  .fl-gruppe-kopf { padding: 11px 12px; min-height: var(--tap); }
  .fl-punkte { height: 17px; }
  .fl-punkte i { width: 13px; height: 13px; }
  .fl-name-lang { display: none; }
  .fl-name-kurz { display: inline; }
  /* minmax(0,1fr) statt 1fr: ein Rasterelement schrumpft sonst nie unter seine
     Mindestbreite, und die breiteste Karte zieht dann alle anderen mit aus dem
     Bild. Mit der 0 als Untergrenze bleibt die Spalte in der Spur. */
  .fl-karten { grid-template-columns: minmax(0, 1fr); padding: 0 10px 12px; gap: 9px; }

  .neu-knopf { min-height: var(--tap); padding: 13px 14px; }
  .neu-form { padding: 4px 14px 14px; }

  /* Daumengroßes Ziel, ohne die zugeklappte Karte höher zu machen als nötig */
  .fkarte-edit-knopf { min-height: var(--tap); }
  .stift-knopf { min-height: var(--tap); flex: 1 1 auto; justify-content: center; }
  .stift-zeile { padding: 0 10px 4px; }
  .fkarte-edit-form input, .fkarte-edit-form textarea { font-size: 16px; }

  .fkarte { padding: 11px 11px 12px; }
  .fkarte-spule { width: 48px; height: 48px; border-radius: 12px; }
  .fkarte-zahl { font-size: 1.6rem; }
  .fkarte-werk { padding: 5px 6px 5px 12px; }
  .fkarte-werk .step-anbruch { margin-right: 8px; }
}

/* Sehr schmale Geräte: Werkname kleiner, damit der Stepper ganz bleibt */
@media (max-width: 380px) {
  .fkarte-werk { padding-left: 9px; }
  .fkarte-werk-name { font-size: .8rem; }
  .tabbar-item { font-size: .66rem; }
  .tabbar-item .ic { width: 20px; height: 20px; }
}

/* 320px (iPhone SE der ersten Generation): Werkname und Stepper passen nicht
   mehr nebeneinander — bei 44px-Knöpfen ist der Stepper allein 142px breit.
   Nicht die Knöpfe schrumpfen (die sollen mit dem Daumen zu treffen sein),
   sondern den Namen darüber setzen. Sonst fällt das Plus rechts aus dem Bild,
   und dort ist es nicht bloß abgeschnitten, sondern unerreichbar. */
@media (max-width: 360px) {
  .fkarte-werk {
    flex-direction: column; align-items: stretch; gap: 5px;
    padding: 8px 8px 9px 10px;
  }
  .fkarte-werk .stepper, .fkarte-werk-wert { align-self: flex-end; }
  .fkarte-werk-name { font-size: .78rem; }
  /* „Aschaffenburg" wurde im Umschalter sonst beidseitig abgeschnitten */
  .seg-item { font-size: .78rem; padding: 4px 5px; }
}

/* ══════════════════════════════════════════════════════════════
   Touch-Größen für Bauteile, die weiter oben erst nach dem
   820px-Block definiert werden. Muss ans Dateiende: bei gleicher
   Spezifität gewinnt die zuletzt notierte Regel, und dort unten
   stehen die Grundgrößen von .seg-item und .fl-suche.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  .seg-item { min-height: var(--tap); }
  .fl-suche { font-size: 16px; padding: 11px 12px; min-height: var(--tap); }
  .fl-alle, .neu-knopf, .fl-gruppe-kopf { min-height: var(--tap); }
  /* Nur Titel-Links sind „Datensatz öffnen"-Ziele. Links mitten im Fließtext
     dürfen nicht 44px hoch werden, sonst reißt der Satz auseinander. */
  .karten td.karte-titel .zeilen-link, .plan-job-titel .zeilen-link {
    display: inline-flex; align-items: center; min-height: var(--tap);
  }
}

/* ── Buchhaltung ── */
/* Breite Seite: Seiten mit vielen Infos (Buchhaltung, Übersicht, Aufträge, Lager …) nutzen den ganzen Bildschirm */
.content.content-breit { max-width: none; padding-left: 28px; padding-right: 28px; }
/* Übersicht: breiter als normal, aber nicht randlos; der Plan bleibt ein Auftrag je Zeile */
.content.content-uebersicht { max-width: 1600px; }

.pill-entwurf { background: rgba(160,160,160,.12); color: var(--c-muted); border-color: rgba(160,160,160,.3); }
.pill-offen { background: rgba(0,229,212,.12); color: var(--c-accent); border-color: rgba(0,229,212,.35); }
.pill-ueberfaellig { background: rgba(251,191,36,.12); color: var(--c-warn); border-color: rgba(251,191,36,.35); }
.pill-versandt { background: rgba(167,139,250,.12); color: #a78bfa; border-color: rgba(167,139,250,.35); }
.pill-bezahlt { background: rgba(74,222,128,.12); color: var(--c-success); border-color: rgba(74,222,128,.3); }
.pill-storniert, .pill-storno { background: rgba(248,113,113,.1); color: var(--c-error); border-color: rgba(248,113,113,.35); }
.pill-afa { background: rgba(160,160,160,.12); color: var(--c-text); border-color: rgba(160,160,160,.3); }
.karte-titel .pill { margin-left: 6px; vertical-align: 1px; }

.bh-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.bh-kopf .tabs { margin-bottom: 0; flex: 1 1 auto; overflow-x: auto; }

/* Kennzahlen: eine Zeile über die volle Breite */
.bh-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.bh-kpi {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg);
  padding: 13px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; color: var(--c-text); text-decoration: none;
}
.bh-kpi-link:hover { border-color: var(--c-accent); }
.bh-kpi-wert { font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bh-kpi-sub { font-size: .76rem; color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-kpi-warn { border-color: rgba(251,191,36,.5); }
.bh-kpi-warn .bh-kpi-wert { color: var(--c-warn); }
.bh-kpi .bh-balken { margin: 2px 0; }

/* Hauptfläche links, Auswertungen rechts */
.bh-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
.bh-haupt, .bh-seite { min-width: 0; }
.bh-haupt .card, .bh-seite .card { margin-bottom: 16px; }
.bh-seite { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: thin; }
.bh-karte { padding: 16px 18px; }

/* Formular im Popup: Felder im Raster */
.bh-formular { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 14px; }
.bh-feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bh-feld > label { font-size: .8rem; font-weight: 600; color: var(--c-muted); }
.bh-feld .check-group { padding: 0; }
.bh-feld-2 { grid-column: span 2; }
.bh-feld-voll { grid-column: 1 / -1; }
.bh-formular-fuss { flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.bh-formular-fuss .form-actions { margin: 0; }
.bh-afa[hidden], .bh-nur-ausgabe[hidden], .bh-nur-einnahme[hidden], .bh-dienst[hidden] { display: none !important; }

/* Tabelle: dicht, Suche in der Leiste */
.bh-leiste { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.bh-leiste .tabs { margin-bottom: 0; flex: 1 1 auto; }
.bh-suche { width: 300px; max-width: 100%; }
.bh-tabelle td { padding: 7px 10px; font-size: .88rem; }
.bh-tabelle th { padding-left: 10px; padding-right: 10px; }
.bh-tabelle thead th { position: sticky; top: 0; background: var(--c-surface); z-index: 1; }
.bh-tabelle .row-actions { white-space: nowrap; }
.bh-tabelle .row-actions form { display: inline; }
.bh-nr, .bh-nr .zeilen-link { white-space: nowrap; }
.bh-belegnr { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-haken { color: var(--c-accent); font-weight: 700; }
.bh-tabelle tfoot td { font-weight: 600; }
.bh-tabelle .summe-row td:first-child { text-transform: none; letter-spacing: 0; font-size: .82rem; }

.bh-bilanz { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .88rem; margin-bottom: 10px; }
.bh-bilanz td { padding: 5px 0; vertical-align: top; }
.bh-bilanz td:last-child { white-space: nowrap; padding-left: 12px; }
.bh-zwischen td { color: var(--c-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; padding-top: 10px; }
.bh-zwischen:first-child td { padding-top: 0; }
.bh-summe td { border-top: 1px solid var(--c-border); font-weight: 600; }
.bh-ergebnis td { border-top: 2px solid var(--c-border); font-weight: 700; font-size: 1rem; padding-top: 8px; color: var(--c-accent); }
.bh-einrueck { padding-left: 14px !important; color: var(--c-muted); }

.bh-offen { padding: 10px 0; border-top: 1px solid rgba(58,58,58,.55); }
.bh-offen:first-of-type { border-top: none; padding-top: 0; }
.bh-offen-kopf { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; }
.bh-offen-info { font-size: .76rem; color: var(--c-muted); margin: 2px 0 7px; }
.bh-offen-info .pill { margin-left: 4px; }
.bh-zahlung { display: flex; gap: 6px; align-items: center; }
.bh-zahlung + .bh-zahlung { margin-top: 6px; }
.bh-zahlung .btn-mini { min-width: 76px; }
.bh-zahlung input[type="date"] { flex: 1; min-width: 0; padding: 5px 8px; font-size: .82rem; }

.bh-balken { height: 7px; background: var(--c-surface-alt); border-radius: 4px; overflow: hidden; }
.bh-balken span { display: block; height: 100%; background: var(--c-accent); border-radius: 4px; }
.bh-balken-warn span { background: var(--c-warn); }
.bh-rot { color: var(--c-error); }
.bh-plus { color: var(--c-success); }
.bh-minus { color: var(--c-text); }
.bh-nowrap { white-space: nowrap; }

.bh-lesen { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 4px 0 12px; font-size: .9rem; }
.bh-lesen dt { color: var(--c-muted); }
.bh-lesen dd { margin: 0; }

/* Eingabefelder im Raster und die Suche wie überall im ERP */
.bh-feld input:not([type="radio"]):not([type="checkbox"]):not([type="file"]), .bh-feld select, .bh-suche, .bh-zahlung input[type="date"] {
  width: 100%; padding: 8px 11px;
  border: 1px solid var(--c-border); border-radius: var(--radius);
  font-size: .9rem; background: var(--c-surface-alt); color: var(--c-text);
  transition: border-color .15s;
}
.bh-feld input:focus, .bh-feld select:focus, .bh-suche:focus { outline: none; border-color: var(--c-accent); }
.bh-feld input::placeholder, .bh-suche::placeholder { color: #6b6b6b; }
.bh-suche { width: 300px; }
.bh-zahlung input[type="date"] { padding: 5px 8px; font-size: .82rem; }

/* Schmale Spalten schrumpfen auf ihren Inhalt, Text bekommt den Rest */
@media (min-width: 821px) {
  .bh-tabelle { table-layout: auto; }
  #buchungen .bh-tabelle th:nth-child(1), #buchungen .bh-tabelle th:nth-child(2), #buchungen .bh-tabelle th:nth-child(7),
  #buchungen .bh-tabelle th:nth-child(8), #buchungen .bh-tabelle th:nth-child(9), #buchungen .bh-tabelle th:nth-child(10) { width: 1%; white-space: nowrap; }
  #buchungen .bh-tabelle td:nth-child(7) { white-space: nowrap; }
  .bh-tabelle td.row-actions { flex-wrap: nowrap; gap: 6px; }
  #buchungen .bh-tabelle td:nth-child(6) { white-space: nowrap; }
  .bh-tabelle .btn-mini { padding-top: 3px; padding-bottom: 3px; }
}

@media (max-width: 1500px) {
  .bh-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bh-formular { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Die Tabelle braucht gut 1200 px. Neben der Seitenleiste reicht das erst
   ab 2100 px Fensterbreite, darunter stehen die Auswertungen als Kartenreihe
   über der Tabelle und die Tabelle bekommt die volle Breite. */
@media (max-width: 2100px) {
  .bh-layout { grid-template-columns: minmax(0, 1fr); }
  .bh-seite { order: -1; position: static; max-height: none; overflow: visible; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
  .bh-seite .card { margin-bottom: 0; }
  .bh-seite #offen { max-height: 460px; overflow-y: auto; scrollbar-width: thin; }
}
@media (min-width: 821px) and (max-width: 1600px) {
  #buchungen .bh-tabelle th:nth-child(5), #buchungen .bh-tabelle td:nth-child(5) { display: none; }
}
@media (max-width: 820px) {
  .content.content-breit { padding-left: 16px; padding-right: 16px; }
  .bh-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .bh-kpi { padding: 11px 13px; }
  .bh-kpi-wert { font-size: 1.15rem; }
  .bh-formular { grid-template-columns: 1fr 1fr; }
  .bh-feld-2 { grid-column: 1 / -1; }
  .bh-suche { width: 100%; }
  .bh-belegnr { max-width: none; }
  .bh-tabelle thead th { position: static; }
}

/* Filter neben der Suche */
.bh-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.bh-kategorie { width: 230px; }

/* Schalter direkt in der Tabelle: Bezahlt und Julian */
.bh-schalter { display: inline; margin: 0; }
.bh-schalter button { font-family: inherit; cursor: pointer; border-radius: 20px; white-space: nowrap; transition: border-color .15s, background .15s, color .15s; }
.bh-knopf-offen {
  font-size: .74rem; font-weight: 700; padding: 3px 11px;
  background: rgba(0,229,212,.12); color: var(--c-accent); border: 1px solid rgba(0,229,212,.35);
}
.bh-knopf-offen:hover { background: var(--c-accent); color: #0a0a0a; }
/* Auftrag ohne Rechnung: sieht aus wie Offen, schaltet aber nicht (Versand erst mit der Rechnung) */
.bh-knopf-still { display: inline-block; border-radius: 20px; white-space: nowrap; cursor: default; }
.bh-knopf-still:hover { background: rgba(0,229,212,.12); color: var(--c-accent); }
.bh-knopf-still:hover::before { content: none; }
.bh-knopf-offen:hover::before { content: "✓ "; }
.bh-knopf-ueberfaellig { background: rgba(251,191,36,.12); color: var(--c-warn); border-color: rgba(251,191,36,.35); }
.bh-knopf-versandt {
  font-size: .74rem; font-weight: 700; padding: 3px 11px;
  background: rgba(167,139,250,.12); color: #a78bfa; border: 1px solid rgba(167,139,250,.35);
}
.bh-knopf-versandt:hover { background: #a78bfa; color: #0a0a0a; }
.bh-knopf-versandt:hover::before { content: "✓ "; }
/* Offen: Klick klappt die Wahl auf, Rechnung versandt oder gleich bezahlt */
.bh-wahl { display: inline-block; }
.bh-wahl > summary { list-style: none; display: inline-block; cursor: pointer; border-radius: 20px; white-space: nowrap; }
.bh-wahl > summary::-webkit-details-marker { display: none; }
.bh-wahl > summary:hover::before { content: none; }
.bh-wahl[open] > summary { display: none; }
.bh-wahl-menue { display: inline-flex; flex-direction: column; gap: 4px; align-items: stretch; }
.bh-knopf-gezahlt {
  font-size: .74rem; font-weight: 700; padding: 3px 11px;
  background: rgba(74,222,128,.12); color: var(--c-success); border: 1px solid rgba(74,222,128,.35);
}
.bh-knopf-gezahlt:hover { background: var(--c-success); color: #0a0a0a; }
.bh-knopf-bezahlt { font-size: .8rem; padding: 3px 9px; background: transparent; color: var(--c-success); border: 1px solid transparent; }
.bh-knopf-bezahlt:hover { border-color: var(--c-border); color: var(--c-muted); }
.bh-knopf-j {
  width: 28px; height: 28px; padding: 0; font-size: .9rem; font-weight: 700;
  background: transparent; color: var(--c-muted); border: 1px solid var(--c-border);
}
.bh-knopf-j.an { color: var(--c-accent); border-color: rgba(0,229,212,.35); background: rgba(0,229,212,.08); }
.bh-knopf-j:hover { border-color: var(--c-accent); }
.bh-knopf-j.teil { width: auto; min-width: 28px; padding: 0 6px; font-size: .75rem; white-space: nowrap; }
/* Julians Anteil in Prozent: die Ausnahme, eingeklappt; nur, wenn er beteiligt ist */
.bh-anteil { display: inline-flex; align-items: center; gap: 8px; }
.bh-anteil summary { list-style: none; cursor: pointer; color: var(--c-muted); font-size: .8rem; text-decoration: underline dotted; }
.bh-anteil summary::-webkit-details-marker { display: none; }
.bh-anteil[open] summary { display: none; }
.bh-anteil label { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; }
.bh-anteil input {
  width: 4.2em; padding: 5px 6px; text-align: right; font: inherit;
  background: var(--c-surface-alt); color: var(--c-text); border: 1px solid var(--c-border); border-radius: var(--radius);
}
.check-group:not(:has(input[name="partnerbilanz"]:checked)) .bh-anteil { display: none; }
.abo-anteil-zeile { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.abo-anteil-zeile input[type="checkbox"] { accent-color: var(--c-accent); width: 17px; height: 17px; }
.abo-anteil-zeile input[type="number"] {
  width: 4.2em; padding: 4px 6px; text-align: right; font: inherit;
  background: var(--c-surface-alt); color: var(--c-text); border: 1px solid var(--c-border); border-radius: var(--radius);
}
.abo-anteil-zeile:not(:has(input[type="checkbox"]:checked)) input[type="number"] { opacity: .4; }
.form-actions .abo-anlegen { order: -1; }
.abo-beteiligung { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; }
.bh-schalter button:disabled { opacity: .5; cursor: wait; }
@media (max-width: 820px) {
  .bh-filter { width: 100%; }
  .bh-filter .bh-suche { flex: 1 1 160px; width: auto; }
}

/* Popup für Beleg erfassen und bearbeiten */
.bh-dialog {
  margin: auto; inset: 0; width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto;
  padding: 22px 24px; border: 1px solid var(--c-border); border-radius: var(--radius-lg);
  background: var(--c-surface); color: var(--c-text); box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.bh-dialog::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(2px); }
.bh-dialog .bh-formular { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bh-dialog-kopf { display: flex; justify-content: space-between; align-items: center; flex-direction: row !important; }
.bh-dialog-kopf .card-title { margin-bottom: 0; }
.bh-dialog-zu { background: transparent; border: 1px solid var(--c-border); color: var(--c-muted); border-radius: var(--radius); width: 34px; height: 34px; cursor: pointer; font-size: 1rem; }
.bh-dialog-zu:hover { border-color: var(--c-accent); color: var(--c-accent); }
.bh-feld-4 { grid-column: span 4; }
.bh-neu { padding: 8px 14px; font-size: .88rem; white-space: nowrap; }

.bh-anhaenge { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bh-anhaenge li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 11px; background: var(--c-surface-alt); border-radius: var(--radius); font-size: .88rem; }
.bh-anhang-weg { font-size: .78rem; color: var(--c-muted); display: inline-flex; gap: 5px; align-items: center; cursor: pointer; white-space: nowrap; }
.bh-anhang-weg:has(input:checked) { color: var(--c-error); }
.bh-anhaenge li:has(input:checked) a { text-decoration: line-through; opacity: .6; }
.bh-ablage {
  display: flex; flex-direction: column; gap: 6px; padding: 16px; cursor: pointer;
  border: 1.5px dashed var(--c-border); border-radius: var(--radius); text-align: center; color: var(--c-muted); font-size: .85rem;
}
.bh-ablage:hover, .bh-ablage.ziel { border-color: var(--c-accent); color: var(--c-text); background: rgba(0,229,212,.05); }
.bh-ablage input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bh-ablage-liste { color: var(--c-accent); font-size: .82rem; }
.bh-ablage-liste:empty { display: none; }
@media (max-width: 820px) {
  .bh-dialog { padding: 16px; }
  .bh-dialog .bh-formular { grid-template-columns: 1fr 1fr; }
  .bh-feld-4 { grid-column: 1 / -1; }
}


/* Überschriften als Menüknopf: sortieren und filtern wie in Excel */
.bh-kopf-knopf {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; margin: -3px -6px;
  background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer;
  font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; white-space: nowrap;
}
.bh-kopf-knopf:hover { border-color: var(--c-border); color: var(--c-text); }
.bh-trichter { font-size: .7rem; opacity: .55; }
.bh-sortpfeil { color: var(--c-accent); }
.bh-sortpfeil:empty { display: none; }
th.gefiltert .bh-kopf-knopf { color: var(--c-accent); border-color: rgba(0,229,212,.4); background: rgba(0,229,212,.08); }
th.gefiltert .bh-trichter { opacity: 1; }
th.gefiltert .bh-trichter::before { content: "⏷"; }
th.gefiltert .bh-trichter { font-size: 0; }
th.gefiltert .bh-trichter::before { font-size: .75rem; }

.bh-menue {
  position: absolute; z-index: 60; width: 280px; padding: 8px;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(0,0,0,.5); font-size: .86rem; text-transform: none; letter-spacing: 0;
}
.bh-menue-sort { display: block; width: 100%; text-align: left; padding: 7px 9px; background: transparent; border: 0; border-radius: 6px; color: var(--c-text); cursor: pointer; font: inherit; }
.bh-menue-sort:hover { background: var(--c-surface-alt); color: var(--c-accent); }
.bh-menue-trenner { height: 1px; background: var(--c-border); margin: 6px 0 8px; }
.bh-menue-suche {
  width: 100%; padding: 6px 9px; margin-bottom: 6px; font-size: .84rem;
  background: var(--c-surface-alt); color: var(--c-text); border: 1px solid var(--c-border); border-radius: 6px;
}
.bh-menue-suche:focus { outline: none; border-color: var(--c-accent); }
.bh-menue-alle, .bh-menue-liste label { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 5px; cursor: pointer; }
.bh-menue-alle { font-weight: 600; }
.bh-menue-liste { max-height: 260px; overflow-y: auto; scrollbar-width: thin; border: 1px solid var(--c-border); border-radius: 6px; padding: 4px; margin: 4px 0 8px; }
.bh-menue-liste label:hover, .bh-menue-alle:hover { background: var(--c-surface-alt); }
.bh-menue-liste span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-menue-liste small { color: var(--c-muted); font-variant-numeric: tabular-nums; }
.bh-menue input[type=checkbox] { accent-color: var(--c-accent); width: 15px; height: 15px; flex: none; }
.bh-menue-fuss { display: flex; justify-content: space-between; gap: 8px; }
.bh-menue-fuss .btn-mini:disabled { opacity: .4; cursor: not-allowed; }
.bh-filter-weg { white-space: nowrap; border-color: var(--c-accent); color: var(--c-accent); }
.bh-nur-handy { display: none; }
@media (max-width: 820px) {
  .bh-nur-handy { display: block; }
}
@media (min-width: 821px) and (max-width: 1400px) {
  #buchungen .bh-tabelle td:nth-child(6) { white-space: normal; }
}
.bh-filter-weg[hidden] { display: none; }

/* DATEV-Export */
.bh-exporte { display: flex; gap: 8px; flex-wrap: wrap; }
.bh-datev { width: min(760px, calc(100vw - 32px)); }
.bh-datev .pflege-form { display: flex; flex-direction: column; gap: 14px; }
.bh-datev .field-hint { margin: 0; }
.bh-datev .alert { margin: 0; }
.bh-datev-kopf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bh-konten { border: 1px solid var(--c-border); border-radius: var(--radius); padding: 10px 14px; }
.bh-konten summary { cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--c-muted); }
.bh-konten[open] summary { margin-bottom: 10px; }
.bh-konten-raster { display: grid; grid-template-columns: 1fr 110px; gap: 6px 14px; align-items: center; margin-top: 10px; font-size: .86rem; }
.bh-konten-raster input {
  padding: 5px 8px; font-size: .86rem; font-variant-numeric: tabular-nums; text-align: right;
  background: var(--c-surface-alt); color: var(--c-text); border: 1px solid var(--c-border); border-radius: 6px;
}
.bh-datev-fuss { justify-content: flex-end; margin: 0; }
@media (max-width: 820px) {
  .bh-datev-kopf { grid-template-columns: 1fr 1fr; }
}

/* Schnellwahl der Standardlieferanten neben dem Feld */
.bh-lieferant { display: flex; gap: 6px; align-items: stretch; }
.bh-lieferant input { flex: 1; min-width: 0; }
.bh-schnellwahl { display: flex; gap: 6px; }
.bh-schnellwahl[hidden] { display: none; }
.bh-schnell {
  width: 38px; border-radius: var(--radius); border: 1px solid var(--c-border); background: var(--c-surface-alt);
  color: var(--c-text); font-weight: 700; font-size: .95rem; cursor: pointer; font-family: inherit;
}
.bh-schnell:hover { border-color: var(--c-accent); color: var(--c-accent); }
.bh-schnell.an { border-color: var(--c-accent); background: rgba(0,229,212,.12); color: var(--c-accent); }

/* Verlauf (Änderungsprotokoll) an Buchung und Rechnung */
.bh-verlauf { border: 1px solid var(--c-border); border-radius: var(--radius); padding: 8px 12px; }
.bh-verlauf summary { cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--c-muted); }
.bh-verlauf ul { list-style: none; margin: 8px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: .82rem; max-height: 180px; overflow-y: auto; }
.bh-verlauf-zeit { color: var(--c-muted); font-variant-numeric: tabular-nums; margin-right: 4px; }

/* Abschnitte unter den Buchungen: Abos (eine Zeile je Abo) und Fahrtenbuch */
.bh-abschnitt-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.bh-abschnitt-kopf h2 { font-size: 1rem; margin: 0; }
.bh-abschnitt-tabelle td { padding: 7px 10px; font-size: .88rem; }
.bh-abschnitt-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .9rem; }
.bh-gesamt { text-align: right; font-size: .9rem; color: var(--c-muted); margin: -4px 4px 16px; }
.bh-gesamt strong { color: var(--c-text); }

/* ✕ an den Positionen der Aufteilung im Beleg */
.bh-lager-weg { background: transparent; border: 1px solid var(--c-border); border-radius: var(--radius); color: var(--c-muted); cursor: pointer; }
.bh-lager-weg:hover { border-color: var(--c-error); color: var(--c-error); }
/* Erst Sorte, dann Farbe (oder Ersatzteil): zwei Auswahlfelder nebeneinander (Lieferungen) */
.bh-lager-wahl { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 6px; min-width: 0; }

/* Reiter der Buchhaltung und Fahrtenbuch */
.bh-reiter { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.bh-reiter a {
  padding: 7px 16px; border-radius: 20px; border: 1px solid var(--c-border); color: var(--c-muted);
  text-decoration: none; font-weight: 600; font-size: .88rem;
}
.bh-reiter a:hover { color: var(--c-text); border-color: var(--c-accent); }
.bh-reiter a.aktiv { background: rgba(0,229,212,.12); border-color: rgba(0,229,212,.4); color: var(--c-accent); }
.bh-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bh-fahrt-raster { display: grid; grid-template-columns: 150px 1fr 2fr 1fr 2fr; gap: 12px 14px; margin-bottom: 12px; }
.bh-fahrt-raster .bh-feld-2 { grid-column: span 2; }
.bh-fahrt-form .bh-formular-fuss { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
@media (max-width: 1100px) {
  .bh-fahrt-raster { grid-template-columns: 1fr 1fr; }
  .bh-fahrt-raster .bh-feld-2 { grid-column: 1 / -1; }
}
@media (max-width: 820px) { .bh-kpis-3 { grid-template-columns: 1fr 1fr; } }

/* Kontoabgleich */
.bh-kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bh-konto-upload label { cursor: pointer; }
.bh-konto .bh-zweck { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-zuordnen { display: flex; gap: 6px; align-items: center; }
.bh-zuordnen select {
  /* mit dem Fenster schmaler, sonst schiebt sie „+ Beleg“ und „Ignorieren“ aus der Tabelle */
  max-width: clamp(180px, 18vw, 380px); min-width: 0; padding: 4px 8px; font-size: .82rem;
  background: var(--c-surface-alt); color: var(--c-text); border: 1px solid var(--c-border); border-radius: 6px;
}
.bh-konto-leer { padding: 18px 4px; line-height: 1.6; }
@media (max-width: 820px) {
  .bh-kpis-4 { grid-template-columns: 1fr 1fr; }
  .bh-konto .bh-zweck { max-width: none; white-space: normal; }
  .bh-zuordnen { flex-wrap: wrap; }
  .bh-zuordnen select { max-width: 100%; }
}

/* Jahres-Reiter: waagrecht scrollbar, aber ohne sichtbare Leiste */
.bh-kopf .tabs { scrollbar-width: none; }
.bh-kopf .tabs::-webkit-scrollbar { display: none; }

/* Gerade gespeicherte Buchung kurz hervorheben */
@keyframes bh-aufleuchten { from { background: rgba(0,229,212,.22); } to { background: transparent; } }
.bh-markiert td { animation: bh-aufleuchten 2.5s ease-out; }

/* Einnahmen mit offenen Posten in Klammern neben dem Wert */
.bh-kpi-klammer { font-size: .62em; font-weight: 600; color: var(--c-muted); letter-spacing: 0; }
@media (max-width: 820px) { .bh-kpi-klammer { display: block; margin-top: 2px; } }

/* Abschreibungen: Plan-Spalte des gewählten Jahres hervorheben */
.bh-plan .bh-plan-aktiv { background: rgba(0,229,212,.06); color: var(--c-accent); font-weight: 600; }
.bh-hinweis-karte { border-color: rgba(251,191,36,.45); }
.bh-afa-jahre { width: 56px; padding: 4px 6px; font-size: .82rem; background: var(--c-surface-alt); color: var(--c-text); border: 1px solid var(--c-border); border-radius: 6px; }

/* Firmenwert */
.bh-fw-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; align-items: start; }
.bh-fw-raster .card { margin-bottom: 0; }
.bh-fw .bh-balken { width: 140px; }
.bh-fw input[type=date], .bh-fw-preis {
  padding: 4px 8px; font-size: .82rem; background: var(--c-surface-alt); color: var(--c-text);
  border: 1px solid var(--c-border); border-radius: 6px;
}
.bh-fw-preis { width: 100px; text-align: right; }
.bh-fw-hoch { border-color: rgba(251,191,36,.6); color: var(--c-warn); }
.bh-fw-pruefen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bh-fw-pruefen li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid rgba(58,58,58,.55); font-size: .88rem; }
.bh-fw-pruefen li:first-child { border-top: none; }
.bh-fw-pruefen .farbpunkt { width: 12px; height: 12px; border-radius: 50%; flex: none; border: 1px solid rgba(255,255,255,.2); }
.bh-fw-name { flex: 1; min-width: 0; }
@media (max-width: 1100px) { .bh-fw-raster { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .bh-fw .bh-balken { width: 100%; } .bh-fw-pruefen li { flex-wrap: wrap; } }

.bh-fw-faktor { margin: 4px 0 8px; font-size: .86rem; }
.bh-fw-faktor label { color: var(--c-muted); font-weight: 600; margin-right: 4px; }

.bh-fw-preise td { vertical-align: middle; }
.bh-fw-preise .pill { margin-left: 6px; }
.bh-fw-preisform { justify-content: flex-end; }
.bh-fw-auffaellig td:first-child strong { color: var(--c-warn); }

/* Beleg aufteilen (im Popup unter dem Formular) */
.bh-aufteilen { margin-top: 14px; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 10px 14px; }
.bh-aufteilen summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
.bh-aufteilen[open] summary { margin-bottom: 8px; }
.bh-aufteilen-form { display: flex; flex-direction: column; gap: 8px; }
.bh-aufteilen-form .field-hint { margin: 0; }
.bh-teil-kopf, .bh-teil { display: grid; grid-template-columns: minmax(0, 2fr) 110px minmax(0, 1.4fr) 110px 70px 34px; gap: 6px; }
.bh-teil-kopf span { font-size: .72rem; color: var(--c-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.bh-teile { display: flex; flex-direction: column; gap: 6px; }
.bh-teil input, .bh-teil select {
  width: 100%; min-width: 0; padding: 7px 9px; font-size: .86rem;
  background: var(--c-surface-alt); color: var(--c-text); border: 1px solid var(--c-border); border-radius: var(--radius);
}
.bh-teil-betrag { text-align: right; }
.bh-aufteilen-fuss { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bh-aufteilen-rest { flex: 1; text-align: right; font-size: .88rem; color: var(--c-muted); }
.bh-aufteilen-rest strong { color: var(--c-text); font-variant-numeric: tabular-nums; }
.bh-aufteilen-rest strong.bh-rot { color: var(--c-error); }
@media (max-width: 820px) {
  .bh-teil-kopf { display: none; }
  .bh-teil { grid-template-columns: 1fr 1fr; }
  .bh-teil input[name=teil_beschreibung] { grid-column: 1 / -1; }
}

/* Rechnung erkannt (Vorschlag aus dem Rechnungsleser) */
.bh-erkannt { border: 1px solid rgba(0,229,212,.45); background: rgba(0,229,212,.06); border-radius: var(--radius); padding: 10px 14px; }
.bh-erkannt-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bh-erkannt-kopf strong { color: var(--c-accent); font-size: .9rem; }
.bh-erkannt-wahl { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: .84rem; margin-top: 6px; }
.bh-erkannt ul { margin: 6px 0 0; padding-left: 18px; font-size: .84rem; }
.bh-erkannt-hinweise { color: var(--c-muted); }
.bh-erkannt-hinweise .bh-rot { font-weight: 700; }
.bh-neu-teile .bh-teile { display: flex; flex-direction: column; gap: 6px; }
.bh-teil[hidden], .bh-erkannt[hidden], .bh-neu-teile[hidden], .bh-erkannt-wahl[hidden] { display: none; }

/* Partner: Kunden und Lieferanten in einem Stamm, Ansprechpartner je Partner */
.alert-info { background: rgba(0,229,212,.07); border: 1px solid rgba(0,229,212,.35); color: var(--c-text); }
.alert-info a { color: var(--c-accent); }
.pill-kunde { background: rgba(0,229,212,.12); color: var(--c-accent); border-color: rgba(0,229,212,.35); }
.pill-lieferant { background: rgba(167,139,250,.12); color: #a78bfa; border-color: rgba(167,139,250,.35); }
.pill-standard { background: rgba(74,222,128,.12); color: var(--c-success); border-color: rgba(74,222,128,.3); }
.partner-suche { display: flex; gap: 8px; align-items: center; margin: -8px 0 16px; flex-wrap: wrap; }
.partner-suche input[type=search] {
  flex: 1 1 240px; min-width: 0; padding: 8px 11px; font-size: .92rem;
  background: var(--c-surface-alt); color: var(--c-text); border: 1px solid var(--c-border); border-radius: var(--radius);
}
/* Staffelpreise im Angebot: Mengenbereiche und Preise untereinander, wie im Word */
.pill-staffel { background: rgba(0,229,212,.08); color: var(--c-accent); border-color: rgba(0,229,212,.3); margin-left: 6px; }
.staffel-werte { display: block; }
.staffel-wert { display: block; white-space: nowrap; font-variant-numeric: tabular-nums; }
.staffel-wert + .staffel-wert { margin-top: 2px; }
@media (max-width: 680px) {
  /* Karte: Bereiche und Preise rechts untereinander, eine Staffel ohne Umsatz zeigt kein „Gesamt“ */
  .karten .staffel-werte { text-align: right; }
  .karten td.col-gesamt:empty { display: none; }
}
[data-preisblock][hidden] { display: none; }  /* .field-row ist ein Raster, hidden allein reicht nicht */
.staffel-zeilen { display: flex; flex-direction: column; gap: 6px; }
/* Eine Zeile liest sich wie ein Satz: „bis [5] Stk [9,50]“, „zw. 6 und [20] Stk [7,80]“,
   die letzte „über 20 Stk [5,60]“ ohne Mengenfeld */
.staffel-kopf, .staffel-zeile {
  display: grid; gap: 8px;
  grid-template-columns: 6.2rem minmax(0, 1fr) 2.6rem minmax(0, 1fr) 38px;
}
.staffel-kopf { margin-bottom: 5px; font-size: .82rem; font-weight: 600; }
.staffel-kopf span:first-child { grid-column: 1 / 4; }
.staffel-kopf span:last-child { grid-column: 4; }
.staffel-zeile [hidden] { display: none; }
.staffel-bereich, .staffel-einheit {
  align-self: center; font-size: .85rem; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.staffel-bereich { grid-column: 1; }
.staffel-zeile.ist-letzte .staffel-bereich { grid-column: 1 / 4; color: var(--c-text); }
.staffel-zeile input[name=staffel_menge] { grid-column: 2; }
.staffel-einheit { grid-column: 3; }
.staffel-zeile input[name=staffel_preis] { grid-column: 4; }
.staffel-weg { grid-column: 5; background: transparent; border: 1px solid var(--c-border); border-radius: var(--radius); color: var(--c-muted); cursor: pointer; }
.staffel-weg:hover { border-color: var(--c-error); color: var(--c-error); }
.staffel-mehr { margin-top: 8px; }
.staffel-wahl { margin-bottom: 14px; padding: 12px 14px; border: 1px dashed var(--c-border); border-radius: var(--radius); }
.staffel-wahl .field:last-of-type { margin-bottom: 8px; }
@media (max-width: 680px) {
  /* Handy: Beschriftung und Einheit schmaler, damit „100“ und „9,50“ ganz in die Felder passen */
  .staffel-kopf, .staffel-zeile { gap: 6px; grid-template-columns: 4.6rem minmax(0, 1fr) 1.9rem minmax(0, 1fr) 32px; }
  .staffel-bereich, .staffel-einheit { font-size: .78rem; }
  .staffel-zeile input { padding-left: 8px; padding-right: 6px; }
}
.staffel-bestellt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.staffel-bestellt input { flex: 0 0 7rem; width: 7rem; }
.staffel-bestellt .staffel-einheit { overflow: visible; }
.staffel-treffer { font-size: .85rem; color: var(--c-text); font-variant-numeric: tabular-nums; }
.umwandeln-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }

/* Partnersuche (lager.js, Abschnitt 11): das Feld sieht aus wie jedes Eingabefeld,
   die Liste steht fest über der Seite und wird im Skript unter das Feld gelegt */
.suche-original { display: none !important; }
.suche-liste {
  position: fixed; z-index: 1000; margin: 0; padding: 4px; list-style: none; overflow-y: auto;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
.suche-liste[hidden] { display: none; }
.suche-eintrag { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.suche-eintrag:hover, .suche-eintrag.aktiv { background: var(--c-surface-alt); }
.suche-eintrag.aktiv { box-shadow: inset 3px 0 0 var(--c-accent); }
.suche-name { color: var(--c-text); font-size: .92rem; line-height: 1.25; }
.suche-info { color: var(--c-muted); font-size: .76rem; font-variant-numeric: tabular-nums; }
.suche-extra .suche-name { color: var(--c-accent); }
.suche-hinweis { padding: 8px 10px; color: var(--c-muted); font-size: .82rem; }
@media (max-width: 680px) {
  .suche-eintrag { min-height: 44px; justify-content: center; }
}

/* Partnerliste: Kennzeichen als ein Buchstabe (K, L, P, E), die Legende steht über der Liste */
.kennungen { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: 1px; white-space: nowrap; }
.kennung {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px;
  border: 1px solid transparent; font-size: .7rem; font-weight: 700; line-height: 1; text-decoration: none; cursor: help;
}
.kennung-kunde { background: rgba(0,229,212,.12); color: var(--c-accent); border-color: rgba(0,229,212,.35); }
.kennung-lieferant { background: rgba(167,139,250,.12); color: #a78bfa; border-color: rgba(167,139,250,.35); }
.kennung-person { background: rgba(160,160,160,.12); color: var(--c-muted); border-color: rgba(160,160,160,.3); }
.partner-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: -4px 0 14px; font-size: .8rem; color: var(--c-muted); }
.partner-legende > span { display: inline-flex; align-items: center; gap: 6px; }
.partner-legende .kennung { cursor: default; }
@media (min-width: 681px) {
  /* Name und Buchstaben bleiben in einer Zeile */
  .partner-liste td.karte-titel { white-space: nowrap; }
  /* Die Knopfzelle bleibt eine Tabellenzelle; als Flexbox verrutschen die Linien der Zeile */
  .partner-liste td.row-actions { display: table-cell; text-align: right; }
}
.partner-vorgaenge { margin-top: 4px; padding-top: 0; border-top: none; }
.partner-vorgaenge a.chip { text-decoration: none; color: inherit; }
.partner-vorgaenge a.chip:hover { border-color: var(--c-accent); }
.zeile-inaktiv td { opacity: .55; }
.zeile-inaktiv .row-actions { opacity: 1; }
.dok-empfaenger { margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--c-border); border-radius: var(--radius); font-size: .88rem; line-height: 1.5; }
.dok-empfaenger .muted-cell { display: block; }
.zuordnen-tabelle select, .zuordnen-tabelle input {
  width: 100%; min-width: 0; padding: 6px 9px; font-size: .86rem;
  background: var(--c-surface-alt); color: var(--c-text); border: 1px solid var(--c-border); border-radius: var(--radius);
}
.partner-kopfzeile { margin: 2px 0 12px; font-size: .9rem; color: var(--c-muted); }
.zuordnen-tabelle input.blass { opacity: .4; }

/* Rechtsbündige und zentrierte Spalten auch im Kopf, sonst stehen die
   Überschriften neben ihren Zahlen (.tabelle th schlägt sonst .th-right). */
.tabelle th.th-right { text-align: right; }
.tabelle th.th-center { text-align: center; }

/* ── Partnerseite: Visitenkarte oben, Reiter darunter ── */
.partner-kopf-zeile { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.partner-name { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; overflow-wrap: anywhere; }
.partner-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; font-size: .88rem; color: var(--c-muted); }
.partner-nummer { color: var(--c-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.partner-knopf { flex: none; padding: 8px 16px; font-size: .9rem; text-decoration: none; }
.partner-karte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 18px; }
.partner-block { background: var(--c-surface-alt); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 12px 14px; min-width: 0; }
.partner-block-titel { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--c-muted); margin-bottom: 8px; }
.partner-adresse { font-style: normal; font-size: .95rem; line-height: 1.5; overflow-wrap: anywhere; }
.partner-gruss { margin: 8px 0 0; font-size: .86rem; color: var(--c-muted); }
.partner-fehlt { margin: 6px 0 0; font-size: .85rem; color: var(--c-warn); }
.partner-fehlt a { color: var(--c-accent); }
.partner-werte { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 14px; margin: 0; font-size: .9rem; }
.partner-werte dt { color: var(--c-muted); }
.partner-werte dd { margin: 0; overflow-wrap: anywhere; }
.partner-werte a { color: var(--c-text); text-decoration: none; }
.partner-werte a:hover { color: var(--c-accent); }
.partner-notiz { margin: 10px 0 0; font-size: .85rem; color: var(--c-muted); white-space: pre-line; }
.partner-kopf > .partner-formular, .partner-kopf > .field-hint { margin-top: 18px; }
.partner-loeschen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--c-border); }
.partner-loeschen .field-hint { margin: 0; }
.partner-reiter { margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.partner-reiter .tab { white-space: nowrap; }
.reiter-zahl {
  display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px;
  background: rgba(255,255,255,.07); color: var(--c-muted); font-size: .74rem; line-height: 18px; text-align: center;
}
.tab.active .reiter-zahl { background: rgba(0,229,212,.14); color: var(--c-accent); }

/* Ansprechpartner als Liste statt Tabelle: Name, darunter Kontakt und Begrüßung */
.ap-liste { display: flex; flex-direction: column; }
.ap-zeile { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(58,58,58,.55); }
.ap-zeile:first-child { padding-top: 0; }
.ap-inaktiv .ap-text { opacity: .55; }
.ap-text { min-width: 0; }
.ap-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ap-name { font-weight: 600; }
.ap-infos { margin-top: 3px; font-size: .85rem; color: var(--c-muted); overflow-wrap: anywhere; }
.ap-gruss { margin-top: 2px; font-size: .82rem; color: var(--c-muted); font-style: italic; }
.ap-aktionen { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex: none; }
.ap-aktionen form { margin: 0; }
/* Link und Knopf gleich hoch: Knöpfe erben sonst nicht die Schrift der Seite */
.ap-aktionen .btn-mini { font-family: inherit; line-height: 1.4; }

/* Vorgänge: je Art eine kurze Liste mit Sprung zur ganzen */
.vorgang-gruppen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 24px; }
.vorgang-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.vorgang-kopf h2 { margin: 0; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--c-accent); }
.vorgang-kopf a { font-size: .82rem; color: var(--c-muted); text-decoration: none; }
.vorgang-kopf a:hover { color: var(--c-accent); }
.vorgang-zeile {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 0 -10px;
  border-radius: var(--radius); color: var(--c-text); text-decoration: none; font-size: .9rem;
}
.vorgang-zeile:hover { background: rgba(255,255,255,.04); }
.vorgang-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vorgang-datum { flex: none; font-size: .82rem; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.lager-gruppe + .lager-gruppe { margin-top: 22px; }

@media (max-width: 700px) {
  .partner-name { font-size: 1.25rem; }
  /* Reiter bleiben eine Zeile zum Wischen, statt in zwei Reihen umzubrechen */
  .partner-reiter { flex-wrap: nowrap; }
  .partner-reiter .tab { padding: 12px 12px; }
  .partner-karte, .vorgang-gruppen { grid-template-columns: minmax(0, 1fr); }
  .ap-zeile { flex-direction: column; }
  .ap-aktionen { justify-content: flex-start; }
}

/* ── Aufgaben: je Kunde bzw. Projekt eine Karte, Stand als Chips, Liste zum Abhaken ── */
.aufg-gruppe { padding: 18px 20px; }
.aufg-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.aufg-gruppe-titel { font-size: 1.05rem; font-weight: 700; margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.aufg-nummer { font-size: .78rem; font-weight: 600; color: var(--c-muted); }
.aufg-zahl { font-size: .78rem; font-weight: 700; color: var(--c-accent); white-space: nowrap; }
.aufg-stand { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
/* Suchen, filtern, sortieren */
.aufg-werkzeuge { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.aufg-werkzeuge[hidden], .aufg-flach[hidden], #aufg-nichts[hidden], .aufg-leiste[hidden], .aufg-gruppen[hidden], .aufg-gruppe[hidden], .aufg-zeile[hidden] { display: none; }
.aufg-suche {
  width: 100%; padding: 9px 12px; font: inherit; font-size: .95rem;
  border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface-alt); color: var(--c-text);
}
.aufg-suche:focus { outline: none; border-color: var(--c-accent); }
.aufg-filter { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.aufg-filtergruppe { display: flex; flex-wrap: wrap; gap: 6px; }
.aufg-filtergruppe .aufg-chip { cursor: pointer; font-family: inherit; }
.aufg-filtergruppe .aufg-chip[aria-pressed="true"] { color: #0a0a0a; background: var(--c-accent); border-color: var(--c-accent); }
.aufg-ansichtzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.aufg-ansicht { flex: 0 1 260px; }
.aufg-ansicht .seg-item { border: 0; background: transparent; font-family: inherit; }
.aufg-ansicht .seg-item.seg-aktiv { background: var(--c-accent); color: #0a0a0a; }
#aufg-zuruecksetzen[hidden] { display: none; }
.aufg-sort {
  padding: 7px 10px; font: inherit; font-size: .88rem;
  border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface-alt); color: var(--c-text);
}
.aufg-sort[hidden] { display: none; }
.aufg-treffer { font-size: .82rem; color: var(--c-muted); }
.aufg-flach { padding: 6px 20px; }
.aufg-kunde-liste { display: none; font-weight: 700; color: var(--c-text); }
.aufg-flach .aufg-kunde-liste { display: inline; }
.aufg-mehr { margin-bottom: 8px; }
.aufg-mehr > summary {
  cursor: pointer; list-style: none; font-size: .8rem; color: var(--c-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aufg-mehr > summary::-webkit-details-marker { display: none; }
.aufg-mehr > summary::before { content: "▸ "; }
.aufg-mehr[open] > summary::before { content: "▾ "; }
.aufg-mehr[open] > summary { margin-bottom: 8px; }
.aufg-chip {
  display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: .78rem; font-weight: 600;
  color: var(--c-muted); background: var(--c-surface-alt); border: 1px solid var(--c-border);
  text-decoration: none; max-width: 100%; overflow-wrap: anywhere;
}
.aufg-chip:hover { border-color: var(--c-accent); color: var(--c-text); }
.aufg-chip-akzent { color: var(--c-accent); border-color: rgba(0,229,212,.35); background: rgba(0,229,212,.08); }
.aufg-chip-warn { color: var(--c-warn); border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.08); }
.aufg-liste { list-style: none; margin: 0; padding: 0; }
.aufg-zeile { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--c-border); }
.aufg-liste .aufg-zeile:first-child { border-top: none; }
.aufg-haken-form { margin: 0; flex: none; }
.aufg-haken {
  width: 26px; height: 26px; border-radius: 7px; border: 2px solid var(--c-border); background: transparent;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; margin-top: 1px;
  transition: border-color .15s, background .15s;
}
.aufg-haken svg { width: 16px; height: 16px; fill: none; stroke: transparent; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.aufg-haken:hover { border-color: var(--c-accent); }
.aufg-haken:hover svg { stroke: rgba(0,229,212,.5); }
.aufg-erledigt .aufg-haken { background: var(--c-accent); border-color: var(--c-accent); }
.aufg-erledigt .aufg-haken svg { stroke: #0a0a0a; }
.aufg-inhalt { flex: 1; min-width: 0; }
.aufg-titel { font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.aufg-erledigt .aufg-titel { text-decoration: line-through; color: var(--c-muted); }
.aufg-projekt { display: inline-block; font-size: .72rem; font-weight: 700; color: var(--c-accent); margin-right: 6px; text-transform: uppercase; letter-spacing: .04em; }
.aufg-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .8rem; color: var(--c-muted); margin-top: 3px; }
.aufg-wer { font-weight: 700; }
.aufg-wer-kolja { color: #7dd3fc; }
.aufg-wer-julian { color: #c4b5fd; }
.aufg-heute { color: var(--c-accent); font-weight: 600; }
.aufg-notiz { font-size: .85rem; color: var(--c-muted); margin-top: 4px; white-space: pre-line; overflow-wrap: anywhere; }
.aufg-bearbeiten { margin-top: 4px; }
.aufg-bearbeiten > summary { font-size: .78rem; color: var(--c-muted); cursor: pointer; list-style: none; display: inline-block; }
.aufg-bearbeiten > summary::-webkit-details-marker { display: none; }
.aufg-bearbeiten > summary:hover { color: var(--c-accent); }
.aufg-bearbeiten[open] > summary { color: var(--c-accent); margin-bottom: 10px; }
.aufg-form { padding: 14px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-bg); }
.aufg-schnell { display: flex; gap: 8px; margin-top: 10px; }
.aufg-schnell input {
  flex: 1; min-width: 0; padding: 8px 12px; border: 1px dashed var(--c-border); border-radius: var(--radius);
  background: transparent; color: var(--c-text); font-size: .9rem; font-family: inherit;
}
.aufg-schnell input:focus { outline: none; border-style: solid; border-color: var(--c-accent); }
.aufg-schnell .btn-mini { display: none; }
.aufg-schnell:focus-within .btn-mini { display: inline-flex; align-items: center; }
.aufg-fertig > summary { cursor: pointer; margin-bottom: 0; }
.aufg-fertig[open] > summary { margin-bottom: 12px; }
@media (max-width: 820px) {
  .aufg-gruppe { padding: 14px 14px; }
  .aufg-haken { width: 32px; height: 32px; }
  .aufg-schnell input { padding: 11px 12px; font-size: 1rem; }
}

/* Mail-Stand aus dem Proto3-Vault: Kurzstand je Kunde und Badge an automatischen Aufgaben */
.aufg-mail { display: flex; flex-direction: column; gap: 3px; margin: 0 0 12px; padding: 9px 12px; border-left: 3px solid var(--c-border); background: var(--c-surface-alt); border-radius: 0 var(--radius) var(--radius) 0; font-size: .85rem; }
.aufg-mail-wir { border-left-color: var(--c-accent); }
.aufg-mail-kopf { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--c-muted); }
.aufg-mail-wir .aufg-mail-kopf { color: var(--c-accent); }
.aufg-mail-text { color: var(--c-text); line-height: 1.45; overflow-wrap: anywhere; }
.aufg-quelle { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--c-accent); border: 1px solid rgba(0,229,212,.35); border-radius: 10px; padding: 0 7px; line-height: 1.5; }

/* Aufgaben: klappbare Kundenkarten und Kommentare */
.aufg-leiste { display: flex; justify-content: flex-end; margin: -8px 0 12px; }
details.aufg-gruppe > summary.aufg-kopf { list-style: none; cursor: pointer; justify-content: flex-start; align-items: center; margin-bottom: 0; }
details.aufg-gruppe > summary.aufg-kopf::-webkit-details-marker { display: none; }
details.aufg-gruppe[open] > summary.aufg-kopf { margin-bottom: 12px; }
details.aufg-gruppe > summary .aufg-gruppe-titel { flex: 1; }
details.aufg-gruppe[open] > summary .fl-pfeil { transform: rotate(45deg); }
.aufg-zug { font-size: .72rem; font-weight: 700; color: var(--c-accent); border: 1px solid rgba(0,229,212,.35); border-radius: 10px; padding: 1px 8px; white-space: nowrap; }
.aufg-komm { margin-top: 4px; }
.aufg-komm > summary { font-size: .78rem; color: var(--c-muted); cursor: pointer; list-style: none; display: inline-block; }
.aufg-komm > summary::-webkit-details-marker { display: none; }
.aufg-komm > summary:hover, .aufg-komm[open] > summary { color: var(--c-accent); }
.aufg-komm-liste { list-style: none; margin: 8px 0 0; padding: 0 0 0 10px; border-left: 2px solid var(--c-border); display: flex; flex-direction: column; gap: 8px; }
.aufg-komm-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: .75rem; color: var(--c-muted); }
.aufg-komm-kopf strong { font-weight: 700; }
.aufg-komm-text { font-size: .88rem; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.45; }
.aufg-komm-weg-form { margin: 0; display: inline; }
.aufg-komm-weg { background: none; border: none; padding: 0; color: var(--c-muted); font-size: .75rem; cursor: pointer; text-decoration: underline; }
.aufg-komm-weg:hover { color: var(--c-error); }
.aufg-komm-form { display: flex; gap: 8px; align-items: flex-end; margin-top: 8px; }
.aufg-komm-form textarea { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface-alt); color: var(--c-text); font: inherit; font-size: .88rem; resize: vertical; }
.aufg-komm-form textarea:focus { outline: none; border-color: var(--c-accent); }
@media (max-width: 820px) {
  details.aufg-gruppe > summary.aufg-kopf { min-height: var(--tap); }
  .aufg-komm-form { flex-direction: column; align-items: stretch; }
  .aufg-komm-form textarea { font-size: 1rem; }
}

/* Aufgabe ablehnen */
.aufg-ablehnen-knopf { margin-left: auto; background: none; border: none; padding: 0; color: var(--c-muted); font-size: .75rem; cursor: pointer; text-decoration: underline; font-family: inherit; }
.aufg-ablehnen-knopf:hover { color: var(--c-error); }
.aufg-abgelehnt .aufg-titel { text-decoration-color: var(--c-error); }
.aufg-abgelehnt .aufg-haken { background: transparent; border-color: rgba(248,113,113,.5); }
.aufg-abgelehnt .aufg-haken svg { stroke: var(--c-error); }
.aufg-grund { font-size: .82rem; color: var(--c-error); margin-top: 3px; overflow-wrap: anywhere; }
.aufg-dialog { width: min(520px, calc(100vw - 32px)); }
.aufg-dialog-titel { font-weight: 600; margin: 4px 0 14px; overflow-wrap: anywhere; }
.aufg-gruende { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.aufg-gruende .aufg-chip { font-family: inherit; cursor: pointer; }

/* Chat-Assistent: runder Knopf unten rechts, Fenster als Seitenleiste */
.chat-knopf {
  position: fixed; z-index: 70; right: 22px; bottom: 22px; width: 52px; height: 52px; border-radius: 50%;
  background: var(--c-accent); border: none; cursor: pointer; box-shadow: 0 6px 22px rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
}
.chat-knopf svg { width: 24px; height: 24px; fill: none; stroke: #0a0a0a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chat-knopf:hover { background: var(--c-accent-hover); }
body.chat-offen .chat-knopf { display: none; }
.chat-fenster {
  position: fixed; z-index: 80; right: 16px; bottom: 16px; top: 16px; width: min(440px, calc(100vw - 32px));
  display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.chat-fenster[hidden] { display: none; }
.chat-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px 10px; border-bottom: 1px solid var(--c-border); }
.chat-kopf .card-title { margin: 0; }
.chat-kopf-knoepfe { display: flex; align-items: center; gap: 8px; }
.chat-inhalt { flex: 1; overflow-y: auto; padding: 14px 16px; }
.chat-verlauf { display: flex; flex-direction: column; gap: 14px; }
.chat-leer { color: var(--c-muted); font-size: .88rem; line-height: 1.5; }
.chat-leer ul { margin: 8px 0; padding-left: 18px; }
.chat-verlauf:has(.chat-paar) .chat-leer { display: none; }
.chat-paar { display: flex; flex-direction: column; gap: 6px; }
.chat-frage {
  align-self: flex-end; max-width: 88%; background: rgba(0,229,212,.12); border: 1px solid rgba(0,229,212,.3);
  border-radius: 12px 12px 2px 12px; padding: 8px 12px; font-size: .9rem; white-space: pre-line; overflow-wrap: anywhere;
}
.chat-antwort {
  align-self: flex-start; max-width: 94%; background: var(--c-surface-alt); border: 1px solid var(--c-border);
  border-radius: 12px 12px 12px 2px; padding: 9px 12px; font-size: .9rem; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere;
}
.chat-wartet { color: var(--c-muted); font-style: italic; }
.chat-fehler { border-color: rgba(248,113,113,.45); color: var(--c-error); }
.chat-hinweis { margin: 12px 0 0; font-size: .8rem; color: var(--c-warn); }
.chat-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 16px 14px; border-top: 1px solid var(--c-border); }
.chat-form textarea {
  flex: 1; min-width: 0; resize: none; padding: 9px 11px; border: 1px solid var(--c-border); border-radius: var(--radius);
  background: var(--c-surface-alt); color: var(--c-text); font: inherit; font-size: .92rem;
}
.chat-form textarea:focus { outline: none; border-color: var(--c-accent); }
@media (max-width: 820px) {
  .chat-knopf { right: 14px; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px); }
  .chat-fenster { inset: 0; width: auto; border-radius: 0; border: none; top: 0; right: 0; bottom: 0; }
  .chat-form textarea { font-size: 1rem; }
}

/* ── Meilensteine: Zeitstrahl der Erfolge ──
   Jede Reihe (Drucker, Kunden, Umsatz …) hat ihre Farbe in --ms-farbe; die
   Linie läuft links durch, die Marke sitzt darauf. Große Meilensteine (der
   erste, jede Zehnerpotenz, eigene) leuchten. */
.ms-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ms-bilanz-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ms-bilanz { text-decoration: none; color: inherit; }
.ms-bilanz-minus .bh-kpi-wert { color: var(--c-error); }
.ms-bilanz-tabelle th { font-size: .74rem; font-weight: 600; color: var(--c-muted); text-align: left; padding-bottom: 6px; }
.ms-bilanz-tabelle th.th-right { text-align: right; }
.ms-bilanz-tabelle small { color: var(--c-muted); font-size: .72rem; }
.ms-zaehlstand .neu-form:has(.ms-bilanz-tabelle) { overflow-x: auto; }
.ms-drucker  { --ms-farbe: #00e5d4; }
.ms-kunde    { --ms-farbe: #a78bfa; }
.ms-rechnung { --ms-farbe: #4ade80; }
.ms-umsatz   { --ms-farbe: #4ade80; }
.ms-filament { --ms-farbe: #fbbf24; }
.ms-teile    { --ms-farbe: #60a5fa; }
.ms-anfrage  { --ms-farbe: #f472b6; }
.ms-eigen    { --ms-farbe: #ffffff; }

.ms-ziele { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 22px; }
.ms-ziel { min-width: 0; }
.ms-ziel-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.ms-ziel-titel { font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-ziel-prozent { font-size: .8rem; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.ms-balken span { background: var(--ms-farbe, var(--c-accent)); }
.ms-ziel-stand { font-size: .78rem; color: var(--c-muted); margin-top: 5px; font-variant-numeric: tabular-nums; }
.ms-form-row { grid-template-columns: 1fr 180px; }

.ms-jahr { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 6px; }
.ms-jahr:first-of-type { margin-top: 0; }
.ms-jahr span { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
.ms-jahr small { font-size: .78rem; color: var(--c-muted); }

.ms-strahl { list-style: none; margin: 0; padding: 0; position: relative; }
.ms-strahl::before {
  content: ""; position: absolute; left: 17px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(var(--c-border), var(--c-border)); border-radius: 1px;
}
.ms-punkt { position: relative; display: flex; gap: 16px; padding: 9px 0; }
.ms-marke {
  position: relative; z-index: 1; flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-surface); border: 2px solid color-mix(in srgb, var(--ms-farbe) 45%, var(--c-border));
}
.ms-marke .ic { width: 17px; height: 17px; color: var(--ms-farbe); stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ms-gross .ms-marke {
  border-color: var(--ms-farbe);
  background: color-mix(in srgb, var(--ms-farbe) 14%, var(--c-surface));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ms-farbe) 12%, transparent), 0 0 18px color-mix(in srgb, var(--ms-farbe) 30%, transparent);
}
.ms-inhalt { min-width: 0; padding-top: 1px; }
.ms-datum { font-size: .74rem; color: var(--c-muted); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.ms-titel { font-weight: 600; font-size: .98rem; margin-top: 1px; }
.ms-gross .ms-titel { font-size: 1.08rem; }
.ms-titel a { color: inherit; text-decoration: none; }
.ms-titel a:hover { color: var(--ms-farbe); }
.ms-text { font-size: .85rem; color: var(--c-muted); margin-top: 2px; overflow-wrap: anywhere; }
.ms-aktionen { display: flex; gap: 8px; margin-top: 8px; }
.ms-aktionen form { margin: 0; }
.ms-karte .field-hint a { color: var(--c-accent); }
.ms-zaehlstand { margin-bottom: 20px; }

@media (max-width: 1100px) {
  .ms-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ms-ziele { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .ms-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ms-bilanz-kpis { grid-template-columns: 1fr; }
  .ms-ziele { grid-template-columns: 1fr; }
  .ms-form-row { grid-template-columns: 1fr; }
  .ms-karte { padding: 18px 14px; }
}

/* Meilensteine: Herleitung des verdruckten Filaments */
.ms-rechnung-tabelle { max-width: 640px; margin-top: 12px; }
.ms-rechnung-tabelle td:nth-child(2) { color: var(--c-muted); white-space: nowrap; padding-left: 12px; }
.ms-summe td { border-top: 1px solid var(--c-border); font-weight: 700; padding-top: 8px; }

/* ══════════════════════════════════════════════════════════════
   Gameplan (lager.js Abschnitt 21): ruhiger Zeitstrahl. Flache Flächen,
   keine Leuchteffekte; Farbe nur als Zielfarbe --f an Linie und Balken.
   ══════════════════════════════════════════════════════════════ */
.gp-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.gp-leiste .seg { padding: 2px; }
.gp-leiste .seg-item { min-height: 28px; padding: 2px 10px; font-size: .8rem; }
.gp-zoom { width: 260px; max-width: 100%; }
.gp-filter { width: 210px; max-width: 100%; }
.gp-erledigte { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--c-muted); cursor: pointer; user-select: none; }
.gp-erledigte input { accent-color: var(--c-accent); width: 15px; height: 15px; }
.gp-neu-knoepfe { margin-left: auto; display: flex; gap: 6px; }
.gp-stand { font-size: .82rem; color: var(--c-muted); margin: 0 2px 10px; }
.gp-stand b { color: var(--c-text); font-weight: 600; }
.gp-stand-trenner { margin: 0 8px; opacity: .5; }
.gp-stand-warn, .gp-stand-warn b { color: var(--c-error); }

.gp-plan-rahmen { position: relative; }
.gp-plan {
  overflow-x: auto; overflow-y: hidden; position: relative;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  scrollbar-color: #4a4a4a transparent; scrollbar-width: thin;
}
.gp-hilfe { font-size: .76rem; color: #7d7d7d; margin: 6px 2px 22px; }

.gp-leinwand { position: relative; min-width: 100%; }
.gp-raster { position: absolute; top: 0; bottom: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.gp-vergangen { position: absolute; top: 0; bottom: 0; left: 0; background: rgba(0,0,0,.12); }
.gp-wochenende { position: absolute; top: 0; bottom: 0; background: rgba(255,255,255,.02); }
.gp-linie { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.05); }
.gp-linie-woche { background: rgba(255,255,255,.025); }
.gp-linie-quartal { background: rgba(255,255,255,.09); }
.gp-heute { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--c-accent); opacity: .8; }

.gp-zeile { display: flex; align-items: stretch; }
.gp-kopf {
  position: sticky; left: 0; z-index: 4; flex: none; width: var(--kopf);
  display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 14px;
  background: var(--c-surface); border-right: 1px solid var(--c-border);
}
.gp-spur { position: relative; flex: 1 0 auto; }

/* Achse */
.gp-achse-zeile { border-bottom: 1px solid var(--c-border); }
.gp-achse { position: relative; height: 50px; flex: none; }
.gp-achse-oben, .gp-achse-unten { position: absolute; left: 0; right: 0; }
.gp-achse-oben { top: 0; height: 22px; }
.gp-achse-unten { top: 22px; height: 28px; }
.gp-achse-feld {
  position: absolute; top: 0; height: 22px; padding: 4px 8px 0; border-left: 1px solid rgba(255,255,255,.09);
  font-size: .7rem; font-weight: 600; color: #8a8a8a; white-space: nowrap; overflow: hidden;
}
.gp-achse-monat, .gp-achse-tag {
  position: absolute; top: 0; height: 28px; border-left: 1px solid rgba(255,255,255,.05);
  font-size: .72rem; color: var(--c-muted); white-space: nowrap; overflow: hidden;
}
.gp-achse-monat { padding: 6px 8px 0; }
.gp-achse-tag { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; font-variant-numeric: tabular-nums; font-size: .7rem; }
.gp-achse-tag small { font-size: .58rem; opacity: .7; }
.gp-achse-tag.gp-we { color: #6a6a6a; }
.gp-ist-heute { color: var(--c-accent); }
.gp-heute-pille { display: none; }

/* Erreichte Meilensteine */
.gp-erreicht-zeile { border-bottom: 1px solid rgba(255,255,255,.05); }
.gp-kopf-erreicht { gap: 6px; font-size: .75rem; }
.gp-kopf-erreicht a { color: var(--c-muted); text-decoration: none; }
.gp-kopf-erreicht a:hover { color: var(--c-accent); }
.gp-kopf-erreicht span { font-size: .7rem; color: #6a6a6a; }
.gp-spur-erreicht { height: 26px; }
.gp-ms { position: absolute; top: 50%; width: 7px; height: 7px; margin: -4px 0 0 -4px; transform: rotate(45deg); background: #8a8a8a; cursor: default; }
.gp-ms:hover { background: var(--c-warn); }

/* Bereiche */
.gp-bereich { border-top: 1px solid var(--c-border); }
.gp-bereich.gp-gezogen { position: relative; z-index: 30; background: var(--c-surface); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.gp-bereich-zeile { background: rgba(255,255,255,.025); }
.gp-bereich-kopf { background: #2e2e2e; gap: 4px; padding-left: 4px; }
.gp-bereich-spur { min-height: 34px; }
.gp-auf {
  flex: none; width: 22px; height: 22px; border: 0; background: transparent; color: #7d7d7d;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 4px;
}
.gp-auf svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); transition: transform .15s; }
.gp-zu .gp-auf svg { transform: rotate(0deg); }
.gp-auf:hover { color: var(--c-text); }
.gp-bereich-name {
  background: none; border: 0; padding: 0; color: var(--c-text); font: inherit; font-weight: 600; font-size: .85rem;
  text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.gp-bereich-info { font-size: .72rem; color: #7d7d7d; white-space: nowrap; margin-left: 4px; overflow: hidden; text-overflow: ellipsis; }
.gp-bereich-knoepfe {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 2px;
  padding-left: 10px; background: linear-gradient(90deg, transparent, #2e2e2e 10px); opacity: 0; pointer-events: none; transition: opacity .12s;
}
.gp-bereich-kopf:hover .gp-bereich-knoepfe, .gp-bereich-knoepfe:focus-within { pointer-events: auto; }
.gp-bereich-kopf:hover .gp-bereich-knoepfe, .gp-bereich-knoepfe:focus-within { opacity: 1; }
.gp-bereich-knopf {
  border: 0; background: transparent; color: var(--c-muted); font: inherit; font-size: .72rem; font-weight: 600;
  padding: 3px 5px; border-radius: 4px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center;
}
.gp-bereich-knopf:hover { color: var(--c-accent); background: rgba(255,255,255,.05); }
.gp-bereich-knopf svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.gp-ueber { position: absolute; height: 2px; background: var(--f); opacity: .55; }
.gp-bereich-zeile.gp-drop .gp-spur, .gp-ziel-zeile.gp-drop .gp-spur { background: rgba(0,229,212,.06); box-shadow: inset 0 0 0 1px rgba(0,229,212,.35); }
.gp-einfuegen-davor { box-shadow: inset 0 2px 0 var(--c-accent); }
.gp-einfuegen-danach { box-shadow: inset 0 -2px 0 var(--c-accent); }

/* Ziel- und Strategie-Zeilen */
.gp-ziel-zeile { border-top: 1px solid rgba(255,255,255,.04); }
.gp-ziel-zeile.gp-gezogen { position: relative; z-index: 30; background: var(--c-surface); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.gp-ziel-zeile .gp-kopf { padding-left: 4px; }
.gp-griff { flex: none; display: grid; gap: 2px; padding: 4px 3px; cursor: grab; opacity: 0; transition: opacity .12s; touch-action: none; }
.gp-griff i { display: block; width: 9px; height: 1.5px; border-radius: 1px; background: var(--c-muted); }
.gp-kopf:hover .gp-griff { opacity: 1; }
.gp-am-ziehen, .gp-am-ziehen * { cursor: grabbing !important; }
.gp-kopf-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.gp-kopf-titel {
  display: flex; align-items: center; gap: 7px; background: none; border: 0; padding: 0; color: var(--c-text);
  font: inherit; font-weight: 500; font-size: .84rem; line-height: 1.3; text-align: left; cursor: pointer; min-width: 0;
}
.gp-kopf-titel:hover { color: var(--c-accent); }
.gp-punkt { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--f); }
.gp-kopf-mess { font-size: .7rem; color: #7d7d7d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 14px; }
.gp-hinweis-ueber { color: var(--c-error); }
.gp-hinweis-hinten { color: var(--c-warn); }
.gp-hinweis-erreicht { color: var(--c-success); }
.gp-kopf-plus {
  flex: none; width: 22px; height: 22px; border-radius: 4px; border: 0; background: transparent;
  color: var(--c-muted); font-size: 1rem; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s;
}
.gp-kopf:hover .gp-kopf-plus, .gp-kopf-plus:focus-visible { opacity: 1; }
.gp-kopf-plus:hover { color: var(--c-accent); background: rgba(255,255,255,.05); }
.gp-frei .gp-kopf { padding-left: 32px; }
.gp-frei-titel { font-size: .76rem; color: var(--c-muted); font-weight: 500; cursor: default; }
.gp-frei-titel:hover { color: var(--c-muted); }

/* Ziel als dünne Linie mit Flagge */
.gp-band { position: absolute; top: 15px; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--f) 30%, transparent); cursor: grab; touch-action: pan-x pan-y; }
.gp-band::before { content: ''; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
.gp-band-fuellung { position: absolute; left: 0; top: 0; bottom: 0; max-width: 100%; border-radius: inherit; background: var(--f); }
.gp-band-griff { position: absolute; left: -6px; top: -6px; bottom: -6px; width: 12px; cursor: ew-resize; }
/* Zieldatum: Endpunkt, gestrichelte Linie über die ganze Zeile, Schild mit Datum und Titel */
.gp-flagge { position: absolute; top: 0; bottom: 0; width: 0; z-index: 3; cursor: ew-resize; }
.gp-flagge::before { content: ''; position: absolute; left: -8px; width: 16px; top: 0; bottom: 0; }
.gp-flagge::after { content: ''; position: absolute; left: -1px; top: 30px; bottom: 4px; border-left: 2px dashed color-mix(in srgb, var(--f) 45%, transparent); }
.gp-flagge-punkt { position: absolute; left: -9px; top: 10px; width: 18px; height: 18px; border-radius: 50%; background: var(--f); border: 3px solid var(--c-surface); }
.gp-flagge-tuch {
  position: absolute; left: 14px; top: 3px; display: inline-flex; align-items: center; gap: 8px; max-width: 380px;
  padding: 5px 12px; border-radius: 6px; white-space: nowrap; font-size: .92rem; line-height: 1.3;
  background: color-mix(in srgb, var(--f) 18%, #262626); border: 1px solid color-mix(in srgb, var(--f) 70%, transparent);
}
.gp-flagge-datum { font-weight: 700; color: var(--f); flex: none; }
.gp-flagge-titel { color: #f0f0f0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gp-st-ueber .gp-flagge-datum { color: var(--c-error); }
.gp-st-ueber .gp-flagge-tuch { border-color: rgba(248,113,113,.7); }
.gp-st-erreicht .gp-flagge-datum { color: var(--c-success); }

/* Aufgabenbalken */
.gp-balken {
  position: absolute; height: 22px; display: flex; align-items: center; padding: 0 8px;
  border-radius: 5px; cursor: grab; touch-action: pan-x pan-y;
  background: color-mix(in srgb, var(--f) 16%, #2f2f2f); border: 1px solid color-mix(in srgb, var(--f) 45%, transparent);
}
.gp-balken:hover { border-color: var(--f); z-index: 3; }
.gp-balken-text { flex: 1; min-width: 0; font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #e8e8e8; }
.gp-balken-wer { color: #9a9a9a; }
.gp-schmal { padding: 0; }
.gp-schmal .gp-balken-text { position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%); overflow: visible; pointer-events: none; }
.gp-griff-l, .gp-griff-r { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; z-index: 1; }
.gp-griff-l { left: -3px; }
.gp-griff-r { right: -3px; }
.gp-fertig { opacity: .45; }
.gp-fertig .gp-balken-text { text-decoration: line-through; text-decoration-color: rgba(255,255,255,.35); }
.gp-ueberfaellig { border-color: rgba(248,113,113,.75); }
.gp-gezogen.gp-balken { z-index: 50; cursor: grabbing; border-color: var(--f); box-shadow: 0 8px 22px rgba(0,0,0,.5); }
.gp-geist { background: color-mix(in srgb, var(--f, #00e5d4) 15%, transparent); border: 1px dashed var(--f, #00e5d4); pointer-events: none; }
.gp-frei .gp-balken, .gp-bereich-zeile .gp-balken { --f: #9ca3af; }

/* Neuer Bereich unten */
.gp-neu-zeile { border-top: 1px solid var(--c-border); }
.gp-neu-zeile .gp-kopf { border-right: 0; }
.gp-spur-leer { height: 36px; }
.gp-neu-spur { border: 0; background: transparent; color: #7d7d7d; font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: 4px; }
.gp-neu-spur:hover { color: var(--c-accent); }

.gp-tipp {
  position: absolute; z-index: 60; pointer-events: none; max-width: 320px;
  background: #151515; border: 1px solid var(--c-border); color: var(--c-text);
  font-size: .74rem; padding: 4px 9px; border-radius: 5px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.gp-tipp[hidden] { display: none; }

/* Listen unter dem Plan */
.gp-unten { display: grid; grid-template-columns: 3fr 2fr; gap: 20px; }
.gp-titel-warn { color: var(--c-error); }
.gp-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.gp-li { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid rgba(255,255,255,.05); }
.gp-li:last-child { border-bottom: 0; }
.gp-li-haken { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #6a6a6a; background: transparent; cursor: pointer; }
.gp-li-haken:hover { border-color: var(--c-accent); }
.gp-li-text { flex: 1; min-width: 0; display: flex; flex-direction: column; background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.gp-li-titel { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-li-meta { font-size: .72rem; color: #7d7d7d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-li-text:hover .gp-li-titel { color: var(--c-accent); }
.gp-li-wann { font-size: .74rem; color: var(--c-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gp-li-wer { flex: none; font-size: .72rem; color: var(--c-muted); white-space: nowrap; min-width: 46px; text-align: right; }

/* Popups */
.gp-dialog { width: min(560px, calc(100vw - 32px)); }
.gp-dialog-klein { width: min(440px, calc(100vw - 32px)); }
.gp-dialog [hidden] { display: none !important; }
.gp-dialog .bh-dialog-kopf { margin-bottom: 14px; }
.gp-label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 6px; }
.gp-farben { display: flex; flex-wrap: wrap; gap: 10px; }
.gp-farbe { position: relative; cursor: pointer; }
.gp-farbe input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gp-farbe span { display: block; width: 24px; height: 24px; border-radius: 50%; background: var(--f); box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 3px transparent; }
.gp-farbe input:checked + span { box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 4px var(--f); }
.gp-farbe input:focus-visible + span { outline: 2px solid var(--c-text); outline-offset: 5px; }
.gp-wer { max-width: 360px; }
.gp-loeschen:hover { border-color: var(--c-error); color: var(--c-error); }

@media (max-width: 820px) {
  .gp-unten { grid-template-columns: 1fr; gap: 0; }
  .gp-zoom, .gp-filter { width: 100%; }
  .gp-neu-knoepfe { margin-left: 0; }
}
/* Ohne Maus gibt es kein Drüberfahren: Knöpfe immer zeigen */
@media (hover: none) {
  .gp-kopf-plus { opacity: 1; }
  .gp-bereich-knoepfe { position: static; transform: none; margin-left: auto; opacity: 1; pointer-events: auto; background: none; padding-left: 0; }
}
@media (max-width: 700px) {
  .gp-kopf { padding-left: 6px; gap: 4px; }
  .gp-griff, .gp-bereich-info, .gp-kopf-mess, .gp-auf { display: none; }
  .gp-bereich-knoepfe { display: none; }
  .gp-frei .gp-kopf { padding-left: 10px; }
  .gp-kopf-titel { font-size: .78rem; }
  .gp-hilfe, .gp-li-wann { display: none; }
  .gp-flagge-tuch { font-size: .8rem; padding: 4px 9px; max-width: 240px; }
}

/* Dauerhafte Aufgaben: Bereiche × Kolja / Julian / Beide */
.gp-dauer-karte { margin-top: 4px; }
.gp-dauer-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 12px; }
.gp-dauer-kopf .card-title { margin-bottom: 0; }
.gp-dauer-hinweis { font-size: .76rem; color: #7d7d7d; }
.gp-dauer-kopf .btn-mini { margin-left: auto; }
.gp-dz-raster { display: grid; grid-template-columns: 150px repeat(var(--spalten), minmax(0, 1fr)); }
.gp-dz-ecke, .gp-dz-spalte { padding: 0 10px 8px; font-size: .74rem; font-weight: 600; color: var(--c-muted); border-bottom: 1px solid var(--c-border); }
.gp-dz-spalte span { color: #6a6a6a; font-weight: 500; margin-left: 4px; }
.gp-dz-bereich { padding: 10px 10px 10px 0; font-size: .84rem; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.05); }
.gp-dz-zelle {
  position: relative; display: flex; flex-direction: column; gap: 5px; padding: 8px 10px 30px;
  border-bottom: 1px solid rgba(255,255,255,.05); border-left: 1px solid rgba(255,255,255,.05); min-height: 48px;
}
.gp-dz-zelle.gp-dz-ziel { background: rgba(0,229,212,.05); box-shadow: inset 0 0 0 1px rgba(0,229,212,.35); }
.gp-dz-handy { display: none; }
.gp-dz-karte {
  padding: 5px 9px; border-radius: 5px; background: var(--c-surface-alt); border: 1px solid var(--c-border);
  font-size: .8rem; line-height: 1.35; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.gp-dz-karte:hover { border-color: #5a5a5a; }
.gp-dz-karte small { display: block; font-size: .68rem; color: #8a8a8a; }
.gp-dz-vorschlag { border-style: dashed; border-color: #5a5a5a; color: #c8c8c8; }
.gp-dz-weg { opacity: .3; }
.gp-dz-geist { position: fixed; z-index: 1000; pointer-events: none; margin: 0; box-shadow: 0 10px 26px rgba(0,0,0,.5); border-color: var(--c-accent); cursor: grabbing; }
.gp-dz-plus {
  position: absolute; left: 8px; bottom: 5px; border: 0; background: transparent; color: #6a6a6a;
  font-size: .95rem; line-height: 1; padding: 2px 6px; border-radius: 4px; cursor: pointer; opacity: 0; transition: opacity .12s;
}
.gp-dz-zelle:hover .gp-dz-plus, .gp-dz-plus:focus-visible { opacity: 1; }
.gp-dz-plus:hover { color: var(--c-accent); background: rgba(255,255,255,.05); }
@media (hover: none) { .gp-dz-plus { opacity: 1; } }
@media (max-width: 700px) {
  .gp-dz-raster { grid-template-columns: 1fr; }
  .gp-dz-ecke, .gp-dz-spalte { display: none; }
  .gp-dz-bereich { padding: 14px 0 4px; border-bottom: 0; }
  .gp-dz-zelle { border-left: 0; padding: 6px 0 30px; }
  .gp-dz-handy { display: block; font-size: .7rem; color: #7d7d7d; font-weight: 600; }
  .gp-dz-plus { left: 0; }
}

/* Nach dem Speichern kurz hervorheben, was gerade angelegt oder geändert wurde */
.gp-hervor { outline: 2px solid var(--c-accent); outline-offset: 2px; transition: outline-color .6s; }
.gp-ziel-zeile.gp-hervor { outline-offset: -2px; }

/* Symbole der Bereiche (gameplan.SYMBOLE) */
.gp-symbol { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--c-accent); }
.gp-bereich-name { display: inline-flex; align-items: center; gap: 7px; }
.gp-bereich-name span { overflow: hidden; text-overflow: ellipsis; }
.gp-dz-bereich { display: flex; align-items: center; gap: 8px; }
.gp-symbole { display: flex; flex-wrap: wrap; gap: 6px; }
.gp-symbol-wahl { position: relative; cursor: pointer; }
.gp-symbol-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gp-symbol-wahl > span:first-of-type {
  display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px;
  border: 1px solid var(--c-border); background: var(--c-surface-alt); color: var(--c-muted); transition: border-color .12s, color .12s;
}
.gp-symbol-wahl svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gp-symbol-wahl:hover > span:first-of-type { color: var(--c-text); border-color: #5a5a5a; }
.gp-symbol-wahl input:checked + span { color: var(--c-accent); border-color: var(--c-accent); background: rgba(0,229,212,.08); }
.gp-symbol-wahl input:focus-visible + span { outline: 2px solid var(--c-text); outline-offset: 2px; }
.gp-symbol-wahl .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Stückliste im Auftrag (08.10.2026) ──
   Kompakte Zeilen: Zusatzwerte klein unter der Zahl, Drucker als Chips,
   Aktionen als Symbolknöpfe. Hinzufügen und Bearbeiten im Popup. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zelle-sub { display: block; margin-top: 2px; font-size: .74rem; font-weight: 400; color: var(--c-muted); white-space: nowrap; }
.sl-kopfzeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.sl-kopfzeile .card-title { margin-bottom: 0; }
.sl-neu { padding: 8px 14px; font-size: .88rem; white-space: nowrap; text-decoration: none; }
/* Zehn Spalten müssen neben der Seitenleiste ohne Querscrollen passen */
.sl-tabelle :is(th, td) { padding-left: 8px; padding-right: 8px; }
.sl-tabelle td { vertical-align: middle; }
.sl-tabelle td[data-label="Düse"] { white-space: nowrap; }
.sl-teil { display: flex; align-items: center; gap: 12px; }
.sl-teil .pos-bild { margin-right: 0; }
.sl-teil-text { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.sl-name { font-weight: 600; overflow-wrap: anywhere; }  /* lange Dateinamen ohne Leerzeichen */
.sl-marken { display: flex; gap: 6px; }
.sl-marken:empty { display: none; }
.sl-teil .pfad-zelle { margin-top: 0; }
.sl-filament { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.sl-drucker { display: flex; flex-wrap: wrap; gap: 4px; max-width: 160px; }
.sl-drucker-chip {
  font-size: .74rem; padding: 2px 8px; border: 1px solid var(--c-border); border-radius: 999px;
  color: var(--c-muted); white-space: nowrap;
}
.sl-drucker-warn { color: var(--c-warn); border-color: rgba(251,191,36,.45); }
.sl-aktiv td { background: rgba(0,229,212,.05); }
.sl-knoepfe { display: flex; justify-content: flex-end; gap: 4px; }
.sl-knoepfe form { display: flex; margin: 0; }
@media (min-width: 681px) { .tabelle.sl-tabelle td.sl-aktionen { display: table-cell; } }
@media (max-width: 1360px) {
  .sl-tabelle .pfad-zelle input { width: 110px; }
  .sl-drucker-chip { padding: 2px 6px; font-size: .7rem; }
  .sl-tabelle .zelle-sub { white-space: normal; }
}
.sl-tabelle .pfad-zelle input { min-width: 0; width: 150px; }
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 30px; height: 30px; padding: 0; vertical-align: middle; cursor: pointer; text-decoration: none;
  border-radius: var(--radius); background: var(--c-surface-alt); color: var(--c-muted); border: 1px solid var(--c-border);
  transition: border-color .15s, color .15s;
}
.btn-icon .ic { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.btn-icon:hover { border-color: var(--c-accent); color: var(--c-accent); }
.btn-icon-danger:hover { border-color: var(--c-error); color: var(--c-error); }
.btn-icon-text { display: none; }
.sl-bedarf { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--c-border); }
.sl-bedarf-titel { margin-bottom: 8px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--c-muted); }
.sl-bedarf-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sl-bedarf-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .9rem; }
.sl-bedarf-name { min-width: 160px; }
.sl-bedarf-g { min-width: 72px; }
.sl-bedarf-info { font-size: .82rem; color: var(--c-muted); }
.position-dialog { width: min(720px, calc(100vw - 32px)); }
.position-dialog .bh-dialog-kopf { margin-bottom: 14px; }
.position-dialog a.btn { text-decoration: none; }
a.bh-dialog-zu { display: inline-grid; place-items: center; text-decoration: none; }
.position-dialog .bibliothek-wahl { margin-bottom: 16px; }
.check-chip.check-ungeeignet { opacity: .5; }
@media (max-width: 680px) {
  .sl-kopfzeile { margin-bottom: 10px; }
  .karten.sl-tabelle td.karte-titel { padding-bottom: 8px; }
  .sl-teil-text { flex: 1; align-items: stretch; }
  .sl-tabelle .pfad-zelle input { width: 100%; }
  .karten .sl-wert .zelle-sub, .karten .sl-filament .zelle-sub { display: inline; margin-left: 6px; }
  .sl-drucker { min-width: 0; max-width: none; justify-content: flex-end; }
  .karten.sl-tabelle td.sl-aktionen { display: block; }
  .sl-knoepfe { flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
  .karten td.sl-aktionen form { flex: 1 1 auto; }
  .karten td.sl-aktionen .btn-icon { flex: 1 1 auto; width: auto; height: auto; min-height: var(--tap); padding: 0 12px; }
  .btn-icon-text { display: inline; font-size: .8rem; font-weight: 600; }
  .sl-bedarf-name { min-width: 0; }
}

/* ── Druckwarteschlange als Zeitstrahl (09.10.2026, ausgebaut 10.10.2026) ──
   Oben die nächsten Plattenwechsel und der Vorrat, darunter je Drucker eine
   Zeile; die Achse beginnt kurz vor jetzt. Blockfarbe = Bauteil (--teil),
   Punkt = Filament. Grau hinterlegt = keiner da (Anwesenheit).
   Gezeichnet in lager.js Abschnitt 23, Maße KOPF 46 / ZEILE 76 dort. */
.ws-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ws-kopf .plan-titel { margin-bottom: 0; }
.ws-werkzeuge { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ws-knopf {
  padding: 6px 12px; font: inherit; font-size: .8rem; cursor: pointer; white-space: nowrap;
  background: transparent; color: var(--c-muted); border: 1px solid var(--c-border); border-radius: var(--radius);
}
.ws-knopf:hover { color: var(--c-accent); border-color: var(--c-accent); }
.ws-hilfe { max-width: 980px; margin: 14px 0 0; }
.ws-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 10px; font-size: .76rem; color: var(--c-muted); }
.ws-legende span { display: inline-flex; align-items: center; gap: 6px; }
.ws-legende i { display: inline-block; width: 22px; height: 12px; border-radius: 3px; border: 1px solid; }
.ws-legende .l-fest { background: #2c3136; border-color: var(--c-accent); }
.ws-legende .l-auto { border-style: dashed; border-color: rgba(0,229,212,.55); background: transparent; }
.ws-legende .l-warte { border-style: dashed; border-color: #5d646b; background: transparent; }
.ws-legende .l-puffer { border-style: dotted; border-color: rgba(0,229,212,.5); background: transparent; }
.ws-legende .l-pause { background: #34393f; border-color: #4a5057; }
.ws-legende .l-nacht { background: rgba(255,255,255,.1); border-color: transparent; }
.ws-legende .l-spaet { background: #2c3136; border-color: var(--c-error); border-width: 2px; }
.ws-legende .l-jetzt { width: 2px; height: 14px; border: 0; background: var(--c-accent); }
.ws-zoom { display: inline-flex; border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; }
.ws-zoom-knopf {
  padding: 6px 12px; font: inherit; font-size: .8rem; cursor: pointer;
  background: transparent; color: var(--c-muted); border: 0; border-left: 1px solid var(--c-border);
}
.ws-zoom-knopf:first-child { border-left: 0; }
.ws-zoom-knopf:hover { color: var(--c-text); }
.ws-zoom-knopf.aktiv { background: rgba(0,229,212,.12); color: var(--c-accent); }
body.ws-laedt .ws-strahl, body.ws-laedt .ws-vorrat, body.ws-laedt .ws-liste { opacity: .6; pointer-events: none; }
[data-ws-ansicht-ist="liste"] [data-nur-strahl] { display: none !important; }

/* Nächste Plattenwechsel */
.ws-wechsel { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ws-wechsel:empty { display: none; }
.ws-wechsel-titel { align-self: center; font-size: .78rem; color: var(--c-muted); margin-right: 2px; }
.ws-ereignis {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; font-size: .8rem;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); cursor: pointer;
}
.ws-ereignis:hover { border-color: var(--c-accent); }
.ws-ereignis b { font-weight: 700; }
.ws-ereignis .ws-zeit { font-variant-numeric: tabular-nums; }
.ws-ereignis .ws-teilpunkt { width: 9px; height: 9px; border-radius: 50%; background: var(--teil); flex: none; }
.ws-ereignis.ws-nachts { color: var(--c-muted); }
.ws-ereignis.ws-faellig { border-color: var(--c-accent); background: rgba(0,229,212,.08); }
.ws-ereignis.ws-faellig .ws-zeit { color: var(--c-accent); font-weight: 700; }

/* Vorrat */
.ws-vorrat {
  margin-bottom: 16px; padding: 12px 14px; border: 1px dashed var(--c-border); border-radius: var(--radius-lg);
  transition: border-color .15s, background .15s;
}
.ws-vorrat.ws-ziel-aktiv { border-color: var(--c-accent); background: rgba(0,229,212,.04); }
.ws-vorrat-kopf { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 10px; }
.ws-vorrat-titel { font-weight: 700; font-size: .92rem; }
.ws-vorrat-sub { font-size: .78rem; color: var(--c-muted); }
.ws-vorrat-filter { margin-left: auto; display: flex; gap: 8px; }
.ws-vorrat-filter input, .ws-vorrat-filter select { padding: 5px 9px; font-size: .8rem; width: auto; min-width: 0; }
.ws-vorrat-filter input { width: 150px; }
.ws-vorrat-liste { display: flex; flex-wrap: wrap; gap: 10px; }
.ws-vorrat-leer { font-size: .84rem; color: var(--c-muted); padding: 4px 0; }
.ws-auftrag {
  display: flex; flex-direction: column; min-width: 220px; max-width: 340px; flex: 0 1 auto;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden;
}
.ws-auftrag-kopf {
  display: grid; grid-template-columns: auto 1fr; column-gap: 8px; padding: 8px 10px;
  background: var(--c-surface-alt); border-bottom: 1px solid var(--c-border);
}
.ws-auftrag-kopf .ws-griff { grid-row: span 2; align-self: center; }
.ws-auftrag-name { font-weight: 600; font-size: .88rem; overflow-wrap: anywhere; }
.ws-auftrag-sub { font-size: .74rem; color: var(--c-muted); }
.ws-auftrag-sub .ws-eilig { color: var(--c-warn); font-weight: 600; }
.ws-auftrag-sub .ws-zuspaet { color: var(--c-error); font-weight: 600; }
.ws-chip { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: .84rem; border-left: 4px solid var(--teil, transparent); }
.ws-chip + .ws-chip { border-top: 1px solid var(--c-border); }
.ws-chip:hover, .ws-chip:focus-visible, .ws-auftrag-kopf:hover { background: rgba(0,229,212,.06); outline: none; }
.ws-chip-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ws-chip-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-chip-name .ws-chip-auftrag { font-size: .72rem; color: var(--c-muted); }
.ws-dr-liste { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ws-dr {
  padding: 1px 7px; font: inherit; font-size: .68rem; line-height: 1.5; cursor: pointer; white-space: nowrap;
  background: transparent; color: var(--c-muted); border: 1px solid var(--c-border); border-radius: 999px;
}
.ws-dr:hover { border-color: var(--c-accent); color: var(--c-text); }
.ws-dr.an { color: var(--c-accent); border-color: var(--c-accent); background: rgba(0,229,212,.1); font-weight: 600; }
.ws-dr.schlecht:not(.an) { opacity: .5; }
.ws-dr.schlecht.an { color: var(--c-warn); border-color: var(--c-warn); background: rgba(251,191,36,.08); }
.ws-dr-keiner { font-size: .68rem; color: var(--c-warn); align-self: center; }
.ws-chip-zahl { font-size: .74rem; color: var(--c-muted); white-space: nowrap; }
.ws-ziehbar { cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ws-griff { color: #5d636b; font-size: 1rem; line-height: 1; }
.ws-bild {
  flex: none; width: 30px; height: 30px; border-radius: 5px; object-fit: contain; background: #f2f2f2;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12);
}
.ws-bild-leer { display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--teil, #888) 35%, #262a2f); color: rgba(255,255,255,.7); font-size: .72rem; font-weight: 700; }
.ws-fpunkt { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--fil, #888); box-shadow: 0 0 0 2px rgba(255,255,255,.18); }
.ws-fpunkt.ws-dunkel { box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
.ws-gruppe-kopf { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; color: var(--c-muted); margin-top: 4px; }

/* Zeitstrahl: links feste Namensspalte, rechts waagrecht scrollbar */
.ws-strahl {
  display: flex; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden;
}
.ws-namen { flex: none; width: 200px; border-right: 1px solid var(--c-border); background: var(--c-surface); z-index: 2; }
.ws-namen-kopf { border-bottom: 1px solid var(--c-border); box-sizing: border-box; padding: 6px 12px; font-size: .72rem; color: var(--c-muted); }
.ws-name { position: relative; box-sizing: border-box; padding: 7px 10px 7px 12px; border-bottom: 1px solid var(--c-border); display: flex; flex-direction: column; gap: 2px; }
.ws-name:last-child { border-bottom: 0; }
.ws-name-titel { font-weight: 700; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-name-sub { font-size: .72rem; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-name-sub.ws-lauf-an { color: var(--c-accent); }
.ws-name-sub.ws-lauf-ueber { color: var(--c-warn); font-weight: 600; }
.ws-fortschritt { height: 3px; border-radius: 2px; background: var(--c-border); overflow: hidden; }
.ws-fortschritt i { display: block; height: 100%; background: var(--c-accent); }
.ws-name-knoepfe { display: flex; gap: 5px; margin-top: 2px; }
.ws-mini {
  padding: 2px 7px; font: inherit; font-size: .7rem; line-height: 1.4; cursor: pointer; white-space: nowrap;
  background: transparent; color: var(--c-muted); border: 1px solid var(--c-border); border-radius: var(--radius);
}
.ws-mini:hover { color: var(--c-accent); border-color: var(--c-accent); }
.ws-mini.ws-mini-haupt { color: #0a0a0a; background: var(--c-accent); border-color: var(--c-accent); font-weight: 700; }
.ws-mini.ws-mini-haupt:hover { background: var(--c-accent-hover); color: #0a0a0a; }
.ws-mini.ws-mini-weg:hover { color: var(--c-error); border-color: var(--c-error); }
.ws-scroll { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; }
.ws-flaeche { position: relative; }
.ws-achse { position: relative; height: 46px; border-bottom: 1px solid var(--c-border); }
.ws-tag { position: absolute; top: 6px; padding-left: 6px; font-size: .74rem; font-weight: 700; color: var(--c-text); white-space: nowrap; }
.ws-tag.ws-wochenende { color: var(--c-muted); }
.ws-tagstrich { position: absolute; top: 0; height: 9999px; border-left: 1px solid rgba(255,255,255,.1); pointer-events: none; }
.ws-stunde { position: absolute; bottom: 5px; transform: translateX(-50%); font-size: .66rem; color: var(--c-muted); }
.ws-band { position: absolute; top: 0; bottom: 0; background: rgba(255,255,255,.075); pointer-events: none; }
.ws-band.ws-band-nacht { background: rgba(255,255,255,.075); }
.ws-band-achse { position: absolute; top: 24px; font-size: .66rem; color: var(--c-muted); white-space: nowrap; pointer-events: none; padding-left: 4px; }
.ws-spur {
  position: relative; height: 90px; box-sizing: border-box; border-bottom: 1px solid var(--c-border);
  transition: background .15s, opacity .15s;
}
.ws-spur.ws-ziel-aktiv { background: rgba(0,229,212,.05); }
.ws-spur.ws-ungeeignet { opacity: .45; }
.ws-spur.ws-ungeeignet.ws-ziel-aktiv { background: rgba(251,191,36,.07); opacity: .8; }
.ws-jetzt { position: absolute; top: 0; bottom: 0; border-left: 2px solid var(--c-accent); pointer-events: none; z-index: 2; }
.ws-jetzt::before { content: "jetzt"; position: absolute; top: 2px; left: 3px; font-size: .62rem; font-weight: 700; color: var(--c-accent); }
.ws-terminlinie { position: absolute; top: 0; bottom: 0; border-left: 2px dashed var(--c-error); pointer-events: none; z-index: 2; }
.ws-terminlinie span { position: absolute; top: 2px; left: 4px; font-size: .64rem; font-weight: 700; color: var(--c-error); white-space: nowrap; background: var(--c-surface); padding: 0 3px; border-radius: 3px; }

.ws-block {
  --teil: #888;
  position: absolute; top: 10px; height: 54px; box-sizing: border-box; overflow: hidden; cursor: grab;
  display: flex; align-items: center; gap: 7px; padding: 0 7px 0 9px;
  border-radius: 6px; border: 1px solid var(--c-accent);
  background: #2c3136;
  box-shadow: inset 4px 0 0 var(--teil);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: opacity .12s, transform .12s, box-shadow .12s;
}
.ws-block:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.ws-block-text { min-width: 0; flex: 1; display: flex; flex-direction: column; position: relative; z-index: 1; }
.ws-block-titel { font-size: .78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; }
.ws-block-sub { font-size: .68rem; color: rgba(255,255,255,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-block .ws-bild { width: 34px; height: 34px; position: relative; z-index: 1; }
.ws-block .ws-fpunkt { width: 9px; height: 9px; }
.ws-plattenstrich { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.22); pointer-events: none; }
.ws-warte-in {
  position: absolute; top: 0; bottom: 0; pointer-events: none;
  background: #1e2124;
  border-left: 1px dashed #5d646b; border-right: 1px dashed #5d646b;
}
.ws-mond { position: absolute; top: 1px; transform: translateX(-100%); font-size: .7rem; line-height: 1; color: var(--c-muted); pointer-events: none; z-index: 2; padding-right: 2px; }
.ws-block.ws-auto {
  border-style: dashed; border-color: rgba(0,229,212,.5); background: #262a2e;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--teil) 60%, transparent);
}
.ws-block.ws-auto .ws-block-titel { font-weight: 500; color: rgba(255,255,255,.82); }
.ws-block.ws-laeuft { cursor: pointer; border-width: 2px; }
.ws-block .ws-erledigt { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(0,229,212,.16); pointer-events: none; }
.ws-block.ws-ueberfaellig { border-color: var(--c-warn); animation: ws-puls 1.6s ease-in-out infinite; }
@keyframes ws-puls { 50% { box-shadow: 0 0 0 4px rgba(251,191,36,.25); } }
.ws-block.ws-spaet { border: 2px solid var(--c-error); }
.ws-block.ws-unpassend { outline: 2px solid var(--c-warn); outline-offset: -2px; }
.ws-block .ws-warn { color: var(--c-warn); }
.ws-block .ws-fehler { color: var(--c-error); font-weight: 700; }
.ws-warte {
  position: absolute; top: 18px; height: 38px; box-sizing: border-box; pointer-events: none;
  border: 1px dashed #5d646b; border-radius: 6px; background: transparent;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: .66rem; color: var(--c-muted); white-space: nowrap;
}
.ws-puffer {
  position: absolute; top: 26px; height: 24px; box-sizing: border-box; pointer-events: none;
  border: 1px dotted rgba(0,229,212,.5); border-left: 0; border-radius: 0 6px 6px 0; background: #22262a;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: .66rem; color: var(--c-muted); white-space: nowrap;
}
.ws-pause {
  position: absolute; top: 26px; height: 24px; box-sizing: border-box; z-index: 1;
  border: 1px solid #4a5057; border-radius: 12px; background: #34393f;
  display: flex; align-items: center; justify-content: space-between; gap: 6px; overflow: hidden; padding: 0 6px;
  font-size: .68rem; color: var(--c-text); white-space: nowrap;
}
.ws-pause.ws-pause-eigen { border-color: var(--c-accent); }
.ws-pause { cursor: pointer; }
.ws-pause:hover { border-color: var(--c-accent); }
.ws-pause-knoepfe { display: inline-flex; gap: 3px; }
.ws-pk {
  width: 18px; height: 18px; padding: 0; font: inherit; font-size: .8rem; line-height: 1; cursor: pointer;
  background: #262a2e; color: var(--c-text); border: 1px solid #4a5057; border-radius: 4px;
}
.ws-pk:hover { border-color: var(--c-accent); color: var(--c-accent); }
.ws-feld { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--c-muted); white-space: nowrap; }
.ws-feld select { padding: 4px 8px; font-size: .8rem; width: auto; }
.ws-feld b { min-width: 30px; text-align: center; color: var(--c-text); font-weight: 600; }
.ws-auftrag-dauer { grid-column: 2; font-size: .72rem; color: var(--c-accent); }
.ws-lz-pause { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 12px 6px 118px; font-size: .74rem; color: var(--c-muted); border-top: 1px solid var(--c-border); background: #262a2e; }
.ws-lz-pause .ws-pk { width: 30px; height: 30px; }
.ws-filwechsel {
  position: absolute; top: 62px; transform: translateX(-50%); z-index: 3; pointer-events: auto;
  font-size: .62rem; line-height: 1; padding: 1px 4px; border-radius: 3px; white-space: nowrap;
  background: var(--c-surface-alt); color: var(--c-muted); border: 1px solid var(--c-border);
}
.ws-block.ws-hervor { box-shadow: inset 4px 0 0 var(--teil), 0 0 0 2px var(--c-accent); }
.ws-chip.ws-hervor { background: rgba(0,229,212,.08); }
.ws-block.ws-gezogen, .ws-chip.ws-gezogen, .ws-auftrag-kopf.ws-gezogen { opacity: .35; }
.ws-block.ws-rueckt { transform: translateX(var(--rueck, 0)); }
.ws-marke { position: absolute; top: 4px; bottom: 4px; width: 3px; margin-left: -2px; border-radius: 2px; background: var(--c-accent); box-shadow: 0 0 0 3px rgba(0,229,212,.2); z-index: 3; pointer-events: none; }
.ws-luecke { position: absolute; top: 10px; height: 54px; box-sizing: border-box; border: 2px dashed var(--c-accent); border-radius: 6px; background: rgba(0,229,212,.08); pointer-events: none; z-index: 2; }
.ws-tipp {
  position: absolute; top: -2px; z-index: 4; padding: 2px 7px; font-size: .7rem; white-space: nowrap; pointer-events: none;
  background: var(--c-accent); color: #0b1514; border-radius: 4px; font-weight: 600;
}
.ws-geist {
  position: fixed; z-index: 1000; pointer-events: none; padding: 6px 10px; font-size: .8rem; font-weight: 600;
  background: var(--c-surface-alt); border: 1px solid var(--c-accent); border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(0,0,0,.5); white-space: nowrap;
}
body.ws-zieht, body.ws-zieht * { cursor: grabbing !important; }

/* Hover-Karte */
.ws-karte {
  position: fixed; z-index: 900; width: 270px; pointer-events: none; padding: 10px 12px;
  background: var(--c-surface-alt); border: 1px solid var(--c-border); border-left: 4px solid var(--teil, var(--c-accent));
  border-radius: var(--radius); box-shadow: 0 14px 34px rgba(0,0,0,.55); font-size: .8rem;
}
.ws-karte[hidden] { display: none; }
.ws-karte-kopf { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.ws-karte-kopf .ws-bild { width: 64px; height: 64px; }
.ws-karte-titel { font-weight: 700; font-size: .9rem; }
.ws-karte-zeile { display: flex; gap: 6px; align-items: center; color: var(--c-muted); margin-top: 3px; }
.ws-karte-zeile b { color: var(--c-text); font-weight: 600; }
.ws-karte .ws-warn { color: var(--c-warn); }
.ws-karte .ws-fehler { color: var(--c-error); }

/* Rückmeldung mit Rückgängig */
.ws-toast {
  position: fixed; z-index: 1100; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px); padding: 10px 14px;
  background: var(--c-surface-alt); border: 1px solid var(--c-border); border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(0,0,0,.5); font-size: .86rem;
}
.ws-toast[hidden] { display: none; }
.ws-toast.ws-toast-fehler { border-color: var(--c-error); }
.ws-toast button { padding: 4px 10px; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; background: transparent; color: var(--c-accent); border: 1px solid var(--c-accent); border-radius: var(--radius); }

/* Listenansicht (Handy) */
.ws-liste { display: flex; flex-direction: column; gap: 12px; }
.ws-liste[hidden] { display: none; }
.ws-lkarte { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden; }
.ws-lkopf { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 10px 12px; background: var(--c-surface-alt); border-bottom: 1px solid var(--c-border); }
.ws-lkopf .ws-name-titel { font-size: .95rem; }
.ws-lkopf .ws-name-knoepfe { margin-left: auto; margin-top: 0; }
.ws-lkopf .ws-mini { padding: 7px 12px; font-size: .8rem; min-height: 34px; }
.ws-lkopf .ws-fortschritt { flex: 1 1 100%; }
.ws-lz { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--c-border); border-left: 4px solid var(--teil, transparent); cursor: pointer; }
.ws-lkarte { border-color: rgba(0,229,212,.45); }
.ws-lz:first-of-type { border-top: 0; }
.ws-lz.ws-auto { border-left-style: dashed; }
.ws-lz.ws-laeuft { background: rgba(0,229,212,.05); }
.ws-lz-zeit { flex: none; width: 92px; font-size: .74rem; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.ws-lz-zeit b { display: block; color: var(--c-text); font-size: .82rem; }
.ws-lz-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ws-lz-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-lz-titel { font-weight: 600; font-size: .86rem; display: flex; align-items: center; gap: 6px; }
.ws-lz-sub { font-size: .74rem; color: var(--c-muted); }
.ws-lz-sub .ws-warn { color: var(--c-warn); }
.ws-lz-sub .ws-fehler { color: var(--c-error); font-weight: 600; }
.ws-lz-warte { padding: 6px 12px 6px 118px; font-size: .74rem; color: var(--c-muted); border-top: 1px dashed var(--c-border); background: rgba(255,255,255,.04); }
.ws-lz-leer { padding: 10px 12px; font-size: .82rem; color: var(--c-muted); }

/* Popup */
.ws-dialog { width: min(620px, calc(100vw - 32px)); }
.ws-dialog .bh-dialog-kopf { margin-bottom: 10px; }
.ws-dialog-text { margin: 0 0 12px; font-size: .88rem; color: var(--c-muted); }
.ws-dialog-info:empty { display: none; }
.ws-dialog-info { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; font-size: .84rem; }
.ws-dialog-info .ws-bild { width: 84px; height: 84px; }
.ws-dialog-info .ws-karte-zeile { margin-top: 2px; }
.ws-dialog-info .ws-info-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ws-zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) 90px 90px 70px; gap: 10px; align-items: end;
  padding: 8px 0; border-top: 1px solid var(--c-border);
}
.ws-zeile-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; font-size: .88rem; font-weight: 600; padding-bottom: 8px; }
.ws-zeile-name .ws-bild { width: 26px; height: 26px; }
.ws-zeile-max { width: 100%; font-size: .74rem; font-weight: 400; color: var(--c-muted); }
.ws-zeile-feld { display: flex; flex-direction: column; gap: 3px; font-size: .72rem; color: var(--c-muted); }
.ws-zeile-feld.field { margin: 0; }
.ws-zeile-feld input { width: 100%; box-sizing: border-box; padding: 8px 10px; }
.ws-dialog [hidden] { display: none !important; }
.ws-zeile-h { font-size: .78rem; color: var(--c-muted); padding-bottom: 10px; white-space: nowrap; }
.ws-anw-immer { display: flex; gap: 8px; align-items: center; font-size: .88rem; margin-bottom: 10px; }
.ws-anw-tage { display: grid; grid-template-columns: 34px 1fr 1fr auto; gap: 8px 10px; align-items: center; margin-bottom: 14px; }
.ws-anw-tage.ws-aus { opacity: .4; pointer-events: none; }
.ws-anw-tage input[type="time"] { padding: 6px 8px; width: 100%; box-sizing: border-box; }
.ws-anw-tage label { display: flex; gap: 6px; align-items: center; font-size: .78rem; color: var(--c-muted); white-space: nowrap; }
.ws-anw-tag { font-weight: 700; font-size: .85rem; }
@media (max-width: 680px) {
  .ws-namen { width: 122px; }
  .ws-name { padding: 6px 8px; }
  .ws-name-titel { font-size: .8rem; }
  .ws-zoom { margin-bottom: 0; }
  .ws-auftrag { min-width: 0; max-width: none; flex: 1 1 100%; }
  .ws-vorrat-filter { margin-left: 0; width: 100%; }
  .ws-vorrat-filter input { flex: 1; width: auto; }
  .ws-zeile { grid-template-columns: 1fr 1fr; }
  .ws-zeile-name { grid-column: 1 / -1; padding-bottom: 0; }
  .ws-zeile-h { grid-column: 1 / -1; padding-bottom: 0; }
  .ws-karte { display: none; }
  .ws-anw-tage { grid-template-columns: 30px 1fr 1fr; }
  .ws-anw-tage label { grid-column: 2 / -1; }
}

/* Ausbau 10.10.2026 abends: Aufträge-Ansicht, ⋯-Menü, Hilfe, Vorrat einklappbar,
   zweizeilige Blocktitel, Platten-Stepper, Termin direkt setzen */
[data-ws-ansicht-ist="auftraege"] [data-nur-strahl] { display: none !important; }
.ws-knopf-icon { padding: 6px 10px; }
.ws-glocke { width: 15px; height: 15px; vertical-align: -3px; }
.ws-pin { width: 11px; height: 11px; margin-right: 3px; vertical-align: -1px; color: var(--c-accent); flex: none; }
.ws-knopf.aktiv { color: var(--c-accent); border-color: var(--c-accent); background: rgba(0,229,212,.1); }
.ws-hilfe-feld { margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--c-border); border-radius: var(--radius-lg); background: var(--c-surface); }
.ws-hilfe-feld[hidden] { display: none; }
.ws-hilfe-feld .field-hint { margin: 8px 0 0; max-width: 1000px; }
.ws-vorrat-titel { padding: 0; font: inherit; font-weight: 700; font-size: .92rem; color: var(--c-text); background: none; border: 0; cursor: pointer; }
.ws-vorrat-titel:hover { color: var(--c-accent); }
.ws-klappe { display: inline-block; transition: transform .15s; }
.ws-vorrat.ws-zu .ws-klappe { transform: rotate(-90deg); }
.ws-vorrat.ws-zu .ws-vorrat-liste, .ws-vorrat.ws-zu .ws-vorrat-filter { display: none; }
.ws-vorrat.ws-zu .ws-vorrat-kopf { margin-bottom: 0; }
.ws-termin-setzen { display: inline-flex; align-items: center; gap: 4px; color: var(--c-muted); }
.ws-termin-setzen input { padding: 1px 4px; font-size: .72rem; width: auto; min-height: 0; }

/* Blocktitel zweizeilig mit Silbentrennung */
.ws-block { top: 10px; height: 68px; }
.ws-block-titel { white-space: normal; align-items: flex-start; }
.ws-block-titel > span:last-child {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; line-height: 1.25;
}
.ws-block .ws-fpunkt { margin-top: 3px; flex: none; }
.ws-luecke { top: 10px; height: 68px; }
.ws-puffer, .ws-pause { top: 32px; }
.ws-filwechsel { top: 77px; }

/* ⋯-Menü je Drucker */
.ws-menue {
  position: fixed; z-index: 950; min-width: 240px; padding: 4px;
  background: var(--c-surface-alt); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: 0 14px 34px rgba(0,0,0,.55);
}
.ws-menue[hidden] { display: none; }
.ws-menue button {
  display: block; width: 100%; padding: 8px 10px; text-align: left; font: inherit; font-size: .84rem; cursor: pointer;
  background: transparent; color: var(--c-text); border: 0; border-radius: 4px;
}
.ws-menue button:hover, .ws-menue button:focus-visible { background: rgba(0,229,212,.1); color: var(--c-accent); outline: none; }

/* Popup: Platten mit − und + */
.ws-zeile { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.ws-stepper { display: inline-flex; align-items: flex-end; gap: 6px; }
.ws-stepper .ws-zeile-feld { width: 72px; }
.ws-pk-gross { width: 34px; height: 34px; font-size: 1rem; }
.ws-zeile .ws-zeile-h { grid-column: 1 / -1; padding-bottom: 0; color: var(--c-text); }
.ws-genau-knopf { grid-column: 1 / -1; justify-self: start; padding: 0; font: inherit; font-size: .74rem; color: var(--c-muted); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.ws-zeile .ws-genau { grid-column: 1 / -1; max-width: 140px; }

/* Ansicht Aufträge: eine Zeile je Auftrag mit Ampel */
.ws-auftraege { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden; }
.ws-auftraege[hidden] { display: none; }
.ws-at-kopf, .ws-at-zeile { display: grid; grid-template-columns: minmax(200px, 2fr) 160px 190px minmax(160px, 3fr); gap: 12px; align-items: center; padding: 10px 14px; }
.ws-at-kopf { font-size: .72rem; color: var(--c-muted); border-bottom: 1px solid var(--c-border); }
.ws-at-zeile { border-bottom: 1px solid var(--c-border); border-left: 4px solid #4a5057; font-size: .86rem; }
.ws-at-zeile:last-child { border-bottom: 0; }
.ws-at-zeile small { display: block; font-size: .72rem; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-at-name a { color: var(--c-text); font-weight: 600; text-decoration: none; }
.ws-at-name a:hover { color: var(--c-accent); }
.ws-at-fertig { font-variant-numeric: tabular-nums; font-weight: 600; }
.ws-at-gruen { border-left-color: var(--c-accent); }
.ws-at-gelb { border-left-color: var(--c-warn); }
.ws-at-gelb .ws-at-fertig small { color: var(--c-warn); }
.ws-at-rot { border-left-color: var(--c-error); }
.ws-at-rot .ws-at-fertig small { color: var(--c-error); }
.ws-at-verlauf { position: relative; height: 14px; background: #262a2e; border-radius: 7px; }
.ws-at-balken { position: absolute; top: 0; bottom: 0; background: #2c3136; border: 1px solid var(--c-accent); border-radius: 7px; }
.ws-at-termin { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--c-error); }

/* Handy-Liste: Karten klappbar */
details.ws-lkarte > summary { list-style: none; cursor: pointer; }
details.ws-lkarte > summary::-webkit-details-marker { display: none; }
details.ws-lkarte:not([open]) > summary { border-bottom: 0; }
@media (max-width: 680px) {
  .ws-at-kopf { display: none; }
  .ws-at-zeile { grid-template-columns: 1fr auto; }
  .ws-at-termin-text { text-align: right; font-size: .78rem; }
  .ws-at-verlauf { grid-column: 1 / -1; }
  .ws-feld { font-size: .74rem; }
}

/* ── Handbuch: Kapitel mit Bild, Markierungen und mitlaufendem Inhaltsverzeichnis ── */
.content.content-handbuch { max-width: 1560px; }
.hb .ic { width: 18px; height: 18px; flex: none; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hb-titel h1 { display: flex; align-items: center; gap: 10px; font-size: 1.5rem; letter-spacing: -.01em; }
.hb-titel h1 .ic { width: 24px; height: 24px; color: var(--c-accent); }
.hb-titel p { color: var(--c-muted); max-width: 900px; margin: 4px 0 6px; }
.hb-raster { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 24px; align-items: start; }
.hb-seite { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; overflow-x: hidden; margin-top: 20px; }
.hb-seite .card { margin-bottom: 0; }
.hb-toc { padding: 12px 10px; }
.hb-toc-kopf { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--c-muted); padding: 0 6px 6px; }
.hb-toc-teil { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c-accent); padding: 10px 8px 4px; }
.hb-toc ol { list-style: none; display: grid; gap: 1px; }
.hb-toc a { display: flex; gap: 8px; align-items: center; padding: 5px 8px; border-radius: var(--radius); font-size: .84rem; line-height: 1.3; color: var(--c-text); text-decoration: none; }
.hb-toc a:hover { background: var(--c-surface-alt); }
.hb-toc a.aktiv { background: rgba(0,229,212,.08); box-shadow: inset 3px 0 0 var(--c-accent); color: var(--c-accent); font-weight: 600; }
.hb-toc .ic { width: 15px; height: 15px; color: var(--c-muted); }
.hb-toc a.aktiv .ic { color: var(--c-accent); }
.hb-toc-nr { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .68rem; font-weight: 700; background: var(--c-surface-alt); color: var(--c-muted); }
.hb-toc a.aktiv .hb-toc-nr { background: var(--c-accent); color: #0a0a0a; }
.hb-toc-oben { display: none; margin-top: 16px; }
.hb-toc-oben ol { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.hb-teil { margin: 46px 0 -10px; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--c-accent); display: flex; align-items: center; gap: 12px; }
.hb-teil::after { content: ""; flex: 1; height: 1px; background: var(--c-accent); opacity: .35; }
.hb-kapitel { margin-top: 30px; scroll-margin-top: 16px; }
.hb-kopf { display: flex; gap: 16px; align-items: flex-start; background: var(--c-surface); border: 1px solid var(--c-border); border-left: 4px solid var(--c-accent); border-radius: var(--radius-lg); padding: 14px 18px; margin-bottom: 16px; }
.hb-kopf-nr { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--c-accent); color: var(--c-accent); display: grid; place-items: center; font-size: 1.15rem; font-weight: 800; }
.hb-kopf-ueber { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); }
.hb-kopf h2 { display: flex; align-items: center; gap: 8px; font-size: 1.3rem; letter-spacing: -.01em; margin: 2px 0 4px; }
.hb-kopf h2 .ic { width: 20px; height: 20px; color: var(--c-accent); }
.hb-text { color: #cfcfcf; max-width: 900px; }
.hb-inhalt { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(260px, 1fr); gap: 18px; align-items: start; }
.hb-bild { border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden; background: #15171a; box-shadow: var(--shadow); }
.hb-fenster { display: flex; align-items: center; gap: 6px; padding: 7px 12px; background: #15171a; color: var(--c-muted); font-size: .75rem; border-bottom: 1px solid var(--c-border); }
.hb-fenster i { width: 9px; height: 9px; border-radius: 50%; background: #3f444a; }
.hb-fenster span { margin-left: 8px; font-weight: 600; }
.hb-bild a { display: block; position: relative; }
.hb-bild img { display: block; width: 100%; height: auto; }
.hb-bild figcaption { background: var(--c-surface); color: var(--c-muted); font-size: .75rem; padding: 6px 12px; border-top: 1px solid var(--c-border); }
.hb-marke { position: absolute; border: 2px solid var(--c-accent); border-radius: 6px; box-shadow: 0 0 0 2px rgba(0,0,0,.55); pointer-events: none; }
.hb-marke b, .hb-nr { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-accent); color: #0a0a0a; font-size: .75rem; font-weight: 800; flex: none; }
.hb-marke b { position: absolute; left: -11px; top: -11px; box-shadow: 0 0 0 2px #0a0a0a; }
.hb-erklaerung-kopf { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); margin-bottom: 8px; }
.hb-punkte { list-style: none; display: grid; gap: 10px; margin-bottom: 12px; }
.hb-punkte li { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; line-height: 1.5; }
.hb-tipp { background: var(--c-surface); border: 1px solid var(--c-border); border-left: 3px solid var(--c-accent); border-radius: var(--radius); padding: 8px 12px; margin-bottom: 12px; font-size: .86rem; }
.hb-tipp b { color: var(--c-accent); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.hb-tipp p { margin-top: 4px; }
.hb-tiefe { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-top: 16px; }
.hb-tiefe .card { margin-bottom: 0; }
.hb-block { padding: 14px 18px; }
.hb-schritte, .hb-wissen { padding-left: 20px; display: grid; gap: 7px; font-size: .88rem; line-height: 1.5; }
.hb-schritte li::marker { color: var(--c-accent); font-weight: 700; }
.hb-wissen li::marker { color: var(--c-accent); }
.hb-glossar { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px 24px; padding: 16px 18px; }
.hb-glossar dt { font-weight: 700; }
.hb-glossar dd { color: #cfcfcf; font-size: .88rem; margin-top: 2px; }
.hb-fragen { display: grid; gap: 8px; }
.hb-fragen .card { padding: 11px 16px; margin-bottom: 0; }
.hb-fragen summary { cursor: pointer; font-weight: 600; }
.hb-fragen p { margin-top: 8px; color: #cfcfcf; font-size: .88rem; }
.hb-weiter { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.hb-nach-oben { color: var(--c-muted); font-size: .82rem; text-decoration: none; }
.hb-nach-oben:hover { color: var(--c-accent); }
@media (max-width: 1350px) { .hb-inhalt { grid-template-columns: 1fr; } }
.hb-inhalt-breit { grid-template-columns: 1fr; }
.hb-inhalt-breit .hb-punkte { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 22px; }
@media (max-width: 1100px) {
  .hb-raster { grid-template-columns: 1fr; }
  .hb-seite { display: none; }
  .hb-toc-oben { display: block; }
}
@media (max-width: 820px) {
  .hb-kapitel { scroll-margin-top: calc(var(--topbar-h) + 12px); }
  .hb-kopf { padding: 12px 14px; gap: 12px; }
  .hb-kopf-nr { width: 34px; height: 34px; font-size: 1rem; }
  .hb-kopf h2 { font-size: 1.12rem; }
  .hb-marke b { width: 18px; height: 18px; left: -9px; top: -9px; font-size: .66rem; }
  .hb-tiefe { grid-template-columns: 1fr; }
}

/* Gemeinsame Rechnung über mehrere Einnahmen (13.11.2026) */
.bh-sammel-start[hidden], .bh-sammel[hidden] { display: none !important; }
.bh-sammel { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 8px; padding: 8px 12px; border: 1px solid var(--c-accent); border-radius: 8px; background: var(--c-surface); }
.bh-sammel-text { flex: 1 1 200px; font-size: .88rem; }
.bh-sammel .btn { padding: 6px 14px; font-size: .85rem; }
.bh-sammel-haken { display: none; margin: 0 8px 0 0; width: 16px; height: 16px; vertical-align: middle; accent-color: var(--c-accent); cursor: pointer; }
.bh-waehlen .bh-sammel-haken { display: inline-block; }
.bh-waehlen .bh-sammel-haken:disabled { opacity: .25; cursor: not-allowed; }
.bh-waehlen tr.bh-sammel-an td { background: rgba(0, 229, 212, .07); }