/* ── 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 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 select:focus { outline: none; border-color: var(--c-accent); }
.filter-suche { flex: 1 1 260px; }
.filter-typ { flex: 0 0 auto; }
.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 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 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; }
/* 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; }
.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-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; }
.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; }
  .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, +1 und +Platte in eine Zeile passen */
  .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%; }
}

@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; }
.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;
}

/* ── 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;
}

/* ── 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);
  }
}