/* ============================================================
   digiRobe V2 — Design-System
   Quelle: design/design_handoff_digirobe_backend (Prototyp + README).
   Werte sind aus dem Prototyp uebernommen, nicht nachempfunden:
   eine Schrift (Inter), kleinster Grad 12px, keine Versalien-Mikro-
   labels, keine Sperrung ausser -.02em auf 23/27px-Titeln.
   Klassenpraefix db-*. Reihenfolge: Tokens, Basis, Schale, Kopf,
   Knoepfe, Badges, Listen, Karten, Dialog, Felder, Staender, Rest.
   ============================================================ */

:root{
  /* ── Flaechen ── */
  --db-app-bg:      #E7E7E2;   /* App-Hintergrund (Desktop) */
  --db-surface:     #FFFFFF;   /* Panel / Karte */
  --db-tile:        #F6F6F2;   /* Flaeche ruhig (Formfeld, Kennzahlenstreifen) */
  --db-tile-2:      #FAFAF7;   /* Tabellenkopf / Modalfuss / Hover Zeile */
  --db-tile-hover:  #F0F0EA;   /* Hover Flaeche (Kachel) */
  --db-nav-hover:   #F2F2EC;   /* Hover Nav-Icon */
  --db-frame:       #1A1B17;   /* Ink: Text, dunkle Flaechen, Primaerknopf */
  --db-frame-2:     #26271F;   /* Ink Hover (dunkle Flaechen) */
  --db-frame-3:     #31322A;   /* Ink Hover 2 (Outline auf dunkel) */

  /* ── Schrift ── */
  --db-ink:         #1A1B17;
  --db-ink-2:       #595B52;   /* Text sekundaer */
  --db-ink-3:       #8C8E84;   /* Text tertiaer / Label */
  --db-ink-4:       #A6A89C;   /* Text schwach / Platzhalter */
  --db-on-frame:    #FFFFFF;   /* Text auf dunkel */
  --db-on-frame-2:  #C9CAC0;   /* Text auf dunkel, schwach */
  --db-on-frame-3:  #A6A89C;   /* Meta auf dunkel */

  /* ── Linien ── */
  --db-line-strong: #E1E1D8;   /* Kartenrand */
  --db-line-mid:    #E5E5DE;   /* Knopfrand */
  --db-line:        #ECECE6;   /* Trenner, Modal */
  --db-line-2:      #F0F0EB;   /* Zeilentrenner */
  --db-line-3:      #F4F4EF;   /* dichte Tabelle */
  --db-line-dash:   #D7D8CE;   /* Rand gestrichelt (Leerzustand) */

  /* ── Akzent ── */
  --db-accent:      #E0FA29;
  --db-accent-ink:  #1A1B17;
  --db-accent-tint: #FCFFE8;   /* Auswahl-Hintergrund */
  --db-accent-line: #E7F09C;   /* Rahmen Hinweisbox */

  /* ── Status: immer Paar Hintergrund/Text ── */
  --db-success:     #1E7A45;  --db-success-bg:  #E4F2E9;
  --db-warning:     #9A6A12;  --db-warning-bg:  #F6EDD4;
  --db-attention:   #A14E22;  --db-attention-bg:#F6E6DB;
  --db-neutral:     #5E6157;  --db-neutral-bg:  #EAEAE4;
  --db-danger:      #BE3B26;  --db-danger-line: #F0DCD5;
  /* Info hat im neuen Design kein eigenes Paar mehr — auf neutral gelegt,
     damit Bestandsseiten mit db-badge--info nicht aus dem Rahmen fallen. */
  --db-info:        #5E6157;  --db-info-bg:     #EAEAE4;
  --db-muted:       #8C8E84;  --db-muted-bg:    #F0F0EA;

  /* ── Sonstige Flaechen ── */
  --db-track:       #EDEDE7;   /* Balken leer */
  --db-toggle-off:  #D7D8CE;
  --db-scrollbar:   #D7D7CF;

  /* ── Schrift ── */
  --db-font-ui: 'Inter', system-ui, sans-serif;
  /* Bestandsseiten setzen noch db-font-display/-mono. Eine Schrift fuer
     alles (Handoff): die Aliasse zeigen deshalb auf dieselbe Familie. */
  --db-font-display: var(--db-font-ui);
  --db-font-mono:    var(--db-font-ui);

  /* ── Abstaende ── */
  --db-space-1:6px;  --db-space-2:8px;  --db-space-3:10px; --db-space-4:12px;
  --db-space-5:14px; --db-space-6:18px; --db-space-7:20px; --db-space-8:26px;

  /* ── Radien ── */
  --db-r-pill:30px;    /* Knoepfe, Badges, Chips */
  --db-r-panel:26px;   /* App-Panel */
  --db-r-card:20px;    /* Karte */
  --db-r-modal:24px;
  --db-r-inner:16px;   /* Innenkarte, Streifen */
  --db-r-box:14px;     /* Schalterkarte, dichte Tabelle */
  --db-r-control:12px; /* Formfeld */
  --db-r-chip:11px;    /* Marken-Chip */
  --db-r-marker:4px;

  /* ── Schatten ── */
  --db-shadow-panel: 0 16px 50px rgba(0,0,0,.10);
  --db-shadow-card:  0 6px 20px rgba(26,27,23,.07);
  --db-shadow-modal: 0 24px 70px rgba(0,0,0,.35);
  --db-shadow-pop:   0 18px 44px rgba(0,0,0,.20);
}

/* ── Basis ── */
.v2{
  margin:0;background:var(--db-app-bg);color:var(--db-ink);
  font-family:var(--db-font-ui);font-size:13px;line-height:1.45;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
  font-feature-settings:'cv05','cv08','ss01';
}
.v2 *,.v2 *::before,.v2 *::after{box-sizing:border-box;}
.v2 a{color:inherit;text-decoration:none;}
.v2 h1,.v2 h2,.v2 h3{margin:0;}
.v2 ul{list-style:none;margin:0;padding:0;}
.v2 input,.v2 select,.v2 button,.v2 textarea{font-family:var(--db-font-ui);}
.db-logo path,.db-logo circle{fill:currentColor;}

.v2 ::-webkit-scrollbar{width:10px;height:10px;}
.v2 ::-webkit-scrollbar-thumb{background:var(--db-scrollbar);border-radius:8px;border:2px solid transparent;background-clip:content-box;}
.v2 ::-webkit-scrollbar-thumb:hover{background:#C7C7BD;background-clip:content-box;}

.v2 [hidden]{display:none !important;}

/* Schrift-Aliasse der Bestandsseiten: eine Familie, kein Sonderschnitt. */
.v2 .sg,.v2 .mn{font-family:var(--db-font-ui);}
/* Frueheres Versalien-Mikrolabel — im neuen Design ein normales Label. */
.db-micro{font-size:12.5px;font-weight:700;letter-spacing:normal;text-transform:none;color:var(--db-ink-3);}

/* ============================================================
   Schale: Panel, Seitenleiste, Inhaltsspalte
   ============================================================ */

.db-appbg{min-height:100vh;width:100%;background:var(--db-app-bg);padding:14px;}
.db-app{
  display:flex;background:var(--db-surface);border-radius:var(--db-r-panel);
  box-shadow:var(--db-shadow-panel);overflow:hidden;min-height:calc(100vh - 28px);
}

/* ── Seitenleiste ── */
.db-rail{
  width:84px;flex:none;border-right:1px solid var(--db-line-2);
  display:flex;flex-direction:column;align-items:center;padding:18px 0 16px;gap:22px;
}
.db-rail__logo{
  width:42px;height:42px;border-radius:13px;background:var(--db-accent);color:var(--db-accent-ink);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.db-rail__logo .db-logo{width:26px;height:26px;display:block;}
.db-rail__nav{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;}
.db-rail__link{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;cursor:pointer;color:inherit;}
.db-rail__item{
  width:48px;height:44px;border-radius:15px;display:flex;align-items:center;justify-content:center;
  background:transparent;
}
.db-rail__ico{display:inline-flex;color:#7A7C70;}
.db-rail__lab{font-size:12px;font-weight:700;color:var(--db-ink-4);}
.db-rail__link:hover .db-rail__item{background:var(--db-nav-hover);}
.db-rail__link[data-active="true"] .db-rail__item{background:var(--db-accent);}
.db-rail__link[data-active="true"] .db-rail__ico{color:var(--db-ink);}
.db-rail__link[data-active="true"] .db-rail__lab{color:var(--db-ink);font-weight:700;}
.db-rail__fuss{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:12px;}

.db-avatar{
  width:40px;height:40px;border-radius:50%;background:var(--db-frame);color:var(--db-accent);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;
}

/* ── Inhaltsspalte ── */
.db-main{flex:1;display:flex;flex-direction:column;min-width:0;}
.db-kopf{padding:26px 30px 0;flex:none;}
.db-kopf--auftrag{padding:18px 30px 0;}
.db-content{flex:1;overflow-y:auto;padding:20px 30px 30px;}
.db-content--auftrag{padding:18px 30px 30px;}

/* ============================================================
   Bereichskopf: Label, Titel, Suche, Primaerknopf
   ============================================================ */

.db-head{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;}
.db-head__label{font-size:12.5px;font-weight:700;color:var(--db-ink-3);}
.db-head__title{font-size:27px;font-weight:700;letter-spacing:-.02em;margin-top:4px;}
.db-head__actions{margin-left:auto;display:flex;align-items:center;gap:9px;flex-wrap:wrap;}

/* Suchfeld */
.db-search{
  display:flex;align-items:center;gap:9px;background:var(--db-tile);
  border:none;border-radius:var(--db-r-pill);padding:9px 15px;width:230px;
}
.db-search input{border:none;background:none;outline:none;font-size:13.5px;width:100%;color:var(--db-ink);}
.db-search svg{flex:none;}
.db-search--schmal{width:170px;padding:8px 14px;gap:8px;}
.db-search--hell{background:var(--db-surface);border:1px solid var(--db-line-mid);width:190px;padding:8px 13px;}

/* ============================================================
   Knoepfe
   ============================================================ */

/* Primaerknopf: dunkel, Text 13px/700, rechts Lime-Kreis mit Plus */
.db-btn{
  display:inline-flex;align-items:center;gap:9px;border:none;border-radius:var(--db-r-pill);
  background:var(--db-frame);color:#fff;font-weight:700;font-size:13px;
  padding:10px 12px 10px 18px;cursor:pointer;white-space:nowrap;
}
.db-btn:hover{background:var(--db-frame-2);}
.db-btn__circle{
  width:24px;height:24px;border-radius:50%;background:var(--db-accent);color:var(--db-accent-ink);
  display:flex;align-items:center;justify-content:center;flex:none;
}
/* Dunkler Knopf ohne Kreis (z. B. „Garderobe hinzufuegen“) */
.db-btn--dark{background:var(--db-frame);color:#fff;padding:8px 15px;font-size:13.5px;font-weight:700;}
.db-btn--dark:hover{background:var(--db-frame-2);}
/* Sekundaerknopf: weiss mit Rand */
.db-btn--ghost{
  background:var(--db-surface);color:var(--db-ink);border:1px solid var(--db-line-mid);
  border-radius:var(--db-r-pill);padding:9px 15px;font-size:13.5px;font-weight:600;
}
.db-btn--ghost:hover{background:var(--db-tile-2);}
.db-btn--sm{padding:6px 12px;font-size:13px;font-weight:600;gap:6px;}
.db-btn--danger-line{border-color:var(--db-danger-line);color:var(--db-danger);}
.db-btn--accent{background:var(--db-accent);color:var(--db-accent-ink);padding:10px 18px;font-size:13px;font-weight:700;}
.db-btn--accent:hover{filter:brightness(.96);}
.db-btn--gesperrt,.db-btn--gesperrt:hover{background:var(--db-line);color:var(--db-ink-4);cursor:not-allowed;}
/* Outline auf dunklem Grund (Kartenkopf) */
.db-btn--outline-dark{
  border:1px solid #43443B;background:transparent;color:#fff;border-radius:var(--db-r-pill);
  padding:6px 13px;font-size:13px;font-weight:600;
}
.db-btn--outline-dark:hover{background:var(--db-frame-3);}
.db-btn--dashed{
  border:1px dashed #C9CAC0;background:var(--db-surface);color:var(--db-ink);
  border-radius:var(--db-r-pill);padding:8px 14px;font-size:13px;font-weight:700;
}
.db-btn--dashed:hover{border-color:var(--db-ink);}
.db-btn--block{display:flex;width:100%;justify-content:center;}
/* Links als Knoepfe erben sonst die Textfarbe. */
a.db-btn,a.db-btn--dark{color:#fff;}
a.db-btn--ghost{color:var(--db-ink);}

/* Runder Icon-Knopf (Zurueck) */
.db-gbtn{
  display:inline-flex;align-items:center;justify-content:center;border:none;
  background:var(--db-tile);color:var(--db-ink);border-radius:50%;cursor:pointer;
}
.db-gbtn:hover{background:#EBEBE4;}
.db-iconbtn{width:38px;height:38px;flex:none;}

/* Textknopf (Link-Optik) */
.db-textbtn{
  background:none;border:none;padding:0;font-family:inherit;font-size:13px;font-weight:600;
  color:var(--db-ink-3);cursor:pointer;
}
.db-textbtn:hover{color:var(--db-ink);text-decoration:underline;}
.db-textbtn--unter{text-decoration:underline;font-size:13.5px;}
.db-textbtn--danger,.db-textbtn--danger:hover{color:var(--db-danger);}

/* ============================================================
   Badges, Marken, Punkte
   ============================================================ */

.db-badge{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  font-size:12.5px;font-weight:700;padding:5px 10px;border-radius:var(--db-r-pill);
  white-space:nowrap;background:var(--db-neutral-bg);color:var(--db-neutral);
}
.db-badge--success{background:var(--db-success-bg);color:var(--db-success);}
.db-badge--warning{background:var(--db-warning-bg);color:var(--db-warning);}
.db-badge--attention,.db-badge--danger{background:var(--db-attention-bg);color:var(--db-attention);}
.db-badge--neutral,.db-badge--info,.db-badge--muted{background:var(--db-neutral-bg);color:var(--db-neutral);}
.db-badge--accent,.db-badge--on-frame,.db-badge--on{background:var(--db-accent);color:var(--db-accent-ink);}
/* In Rasterzellen: fuellt die Spalte und schneidet sauber ab. */
.db-badge--zelle{display:block;padding:5px 6px;text-align:center;overflow:hidden;text-overflow:ellipsis;}
.db-livedot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none;}

/* Marken-Chip (Initialen, Kuerzel) */
.db-marke{
  width:32px;height:32px;border-radius:var(--db-r-chip);flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;background:var(--db-frame);color:var(--db-accent);
}
.db-marke--leer{background:var(--db-tile);color:var(--db-ink-4);}
.db-marke--klein{
  width:30px;height:30px;border-radius:10px;font-size:13px;
  background:var(--db-accent);color:var(--db-accent-ink);
}
/* Runde Statusmarke (Bereitschaftsstreifen, offene Punkte) */
.db-marke--rund{
  width:22px;height:22px;border-radius:50%;font-size:13px;font-weight:700;
  background:var(--db-neutral-bg);color:var(--db-neutral);
}
.db-marke--rund-klein{width:20px;height:20px;border-radius:50%;font-size:13px;font-weight:700;}
.db-marke--ok{background:var(--db-success-bg);color:var(--db-success);}
.db-marke--warn{background:var(--db-warning-bg);color:var(--db-warning);}
.db-marke--stop{background:var(--db-attention-bg);color:var(--db-attention);}

/* Farbpunkt vor einem Abschnittstitel */
.db-marker{width:11px;height:11px;border-radius:var(--db-r-marker);flex:none;background:var(--db-accent);}
.db-marker--ruhig{background:#D7D8D0;}

/* ============================================================
   Abschnitte und Rasterlisten
   ============================================================ */

.db-abschnitt{margin-bottom:24px;}
.db-abschnitt__kopf{display:flex;align-items:center;gap:10px;margin-bottom:8px;list-style:none;user-select:none;}
.db-abschnitt__kopf::-webkit-details-marker{display:none;}
.db-abschnitt__titel{font-size:15px;font-weight:700;}
.db-abschnitt__zahl{font-size:13px;font-weight:700;color:var(--db-ink-4);}
.db-abschnitt__pfeil{display:inline-flex;color:var(--db-ink-4);transition:transform .15s;}
.db-abschnitt[open] .db-abschnitt__pfeil{transform:rotate(180deg);}
.db-abschnitt[data-v2-auto-open="true"] .db-abschnitt__kopf{cursor:pointer;}
/* Rahmen um die Zeilen eines Abschnitts */
.db-abschnitt__rahmen{border:1px solid var(--db-line);border-radius:var(--db-r-inner);overflow:hidden;}

/* Karte mit Kopfzeile und Zeilen (Kunden, Listenbereiche) */
.db-karte{
  border:1px solid var(--db-line-strong);border-radius:var(--db-r-card);overflow:hidden;
  background:var(--db-surface);box-shadow:var(--db-shadow-card);
}

/* Rasterzeile: Spalten kommen je Liste per --db-cols */
.db-zeile{
  display:grid;grid-template-columns:var(--db-cols);align-items:center;gap:12px;
  padding:12px 18px;border-bottom:1px solid var(--db-line-2);background:var(--db-surface);
}
.db-zeile--kopf{
  padding:10px 18px;background:var(--db-tile-2);border-bottom:1px solid var(--db-line);
  font-size:12.5px;font-weight:700;color:var(--db-ink-3);
}
/* Sortierbarer Spaltenkopf. Er bleibt Beschriftung — nur der Pfeil zeigt, wonach
   gerade sortiert wird. An den uebrigen Spalten erscheint er blass beim Zeigen,
   damit man sieht, dass dort auch sortiert werden kann. */
.db-sort{
  display:inline-flex;align-items:center;gap:5px;min-width:0;padding:0;
  border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;
}
.db-sort::after{content:"\25BE";font-size:10px;line-height:1;opacity:0;}
.db-sort:hover{color:var(--db-ink);}
.db-sort:hover::after{opacity:.45;}
.db-sort[data-richtung]{color:var(--db-ink);}
.db-sort[data-richtung="auf"]::after{content:"\25B4";opacity:1;}
.db-sort[data-richtung="ab"]::after{content:"\25BE";opacity:1;}

.db-zeile--klick{cursor:pointer;}
.db-zeile--klick:hover{background:var(--db-tile-2);}
.db-zeile:last-child{border-bottom:none;}

/* Zellen */
.db-z-kuerzen{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.db-z-stark{font-size:13px;font-weight:700;}
.db-z-name{font-size:13.5px;font-weight:700;}
.db-z-sek{font-size:13.5px;color:var(--db-ink-3);}
.db-z-meta{font-size:13px;color:var(--db-ink-2);}
.db-z-datum{font-size:13px;font-weight:700;color:var(--db-ink-2);}
.db-z-zahl{font-size:13.5px;text-align:right;color:var(--db-ink-2);}
.db-z-wert{font-size:13px;text-align:right;font-weight:700;}
.db-z-warn{color:var(--db-attention);}
.db-z-ende{display:flex;justify-content:flex-end;}

/* Spaltensaetze */
/* Die Statusspalte traegt das laengste Wort der Liste („Abgeschlossen“) —
   mit 92px stand dort nur „Abgeschlo…“. */
.db-cols--jobs{--db-cols:86px minmax(120px,1.6fr) minmax(90px,1fr) minmax(90px,1fr) 112px 92px;}
.db-cols--liste{--db-cols:40px minmax(0,1.6fr) minmax(0,1.1fr) 96px 96px minmax(0,1fr) 78px;}
.db-cols--einzahlungen{--db-cols:100px 110px minmax(0,1.6fr) minmax(0,1fr) 110px;}
.db-cols--kunden{--db-cols:40px minmax(0,1.6fr) minmax(0,1.1fr) 64px 76px minmax(0,1fr) 78px;}
/* Jede Zeile ist ein eigenes Raster — die Spalten muessen deshalb fest sein,
   sonst stehen Kopf und Zeilen versetzt. Die erste Spalte traegt das GERAET
   (Tablet oder Terminal), nicht die Terminalnummer — Geraetenamen brauchen
   mehr Platz als die 46px des Designs. */
.db-cols--positionen{--db-cols:110px minmax(110px,1.4fr) minmax(80px,1fr) 96px minmax(96px,1fr) 110px 92px 92px;}

/* Datum und Uhrzeit stehen getrennt (Festlegung David 2026-09-09): ein Feld
   fuer den Tag, zwei fuer die Zeiten, dahinter der Hinweis „+1 Tag“, wenn das
   Ende auf den Folgetag faellt. Loest den kombinierten Aufklapper ab. */
/* Das Einsatz-Feld: EIN Knopf, der den Aufklapper oeffnet (einsatz.js) —
   Tag und Uhrzeit optisch getrennt, links Tag, rechts Von–Bis. */
.db-zeitfeld{
  display:flex;align-items:center;gap:0;width:100%;
  background:var(--db-tile);border:1px solid var(--db-line);border-radius:var(--db-r-control);
  padding:0;font-family:inherit;font-size:13.5px;color:var(--db-ink);
  text-align:left;cursor:pointer;
}
.db-zeitfeld:hover{border-color:var(--db-line-dash);}
.db-zeitfeld__teil{
  display:flex;align-items:center;gap:9px;padding:11px 13px;font-weight:600;min-width:0;
}
.db-zeitfeld__teil--tag{flex:0 0 auto;border-right:1px solid var(--db-line);}
.db-zeitfeld__teil--zeit{flex:1 1 auto;}
.db-zeitfeld__teil[data-leer="true"]{font-weight:400;color:var(--db-ink-3);}
.db-zeitfeld__icon{display:inline-flex;color:var(--db-ink-3);flex:none;}
.db-zeitfeld__plus{
  margin-left:auto;font-size:12px;font-weight:700;color:var(--db-ink-2);
  background:var(--db-surface);border:1px solid var(--db-line);border-radius:999px;
  padding:2px 9px;white-space:nowrap;
}

/* Zeilenpolster der Positionstabelle (komfortabel; der Prototyp kennt
   daneben ein kompaktes Polster als Ansichts-Schalter — den gibt es hier
   nicht, deshalb steht auch keine tote Regel dafuer herum). */
.db-zeile--pos{padding:13px 18px;}

/* Filterpillen ueber einer Liste. Anders als db-tab schalten sie nicht die
   Seite um, sondern schraenken die Liste ein — deshalb Pillenform statt Reiter.
   Eine leere Lage bleibt sichtbar, aber tot: die Null ist selbst eine Auskunft. */
.db-pillen{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:16px;}
.db-pille{
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--db-line-strong);
  background:var(--db-surface);color:var(--db-ink-2);border-radius:var(--db-r-pill);
  padding:7px 14px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;
}
.db-pille:hover{border-color:var(--db-ink-3);color:var(--db-ink);}
.db-pille[data-active="true"]{
  background:var(--db-frame);border-color:var(--db-frame);color:var(--db-on-frame);font-weight:700;
}
.db-pille__zahl{font-size:12.5px;font-weight:700;color:var(--db-ink-4);}
.db-pille[data-active="true"] .db-pille__zahl{color:var(--db-on-frame-2);}
.db-pille[disabled]{opacity:.45;cursor:default;}
.db-pille[disabled]:hover{border-color:var(--db-line-strong);color:var(--db-ink-2);}
/* Offenes Geld faellt auf, auch wenn die Pille nicht gewaehlt ist — aber nur
   als Rand und Schrift, wie db-z-warn in derselben Tabelle. Die Attention-Farbe
   ist im System ein Paar Schrift/Tint (db-badge--attention), keine Vollflaeche:
   als gefuellte Pille wird daraus ein brauner Klecks. Gewaehlt sieht die Pille
   deshalb aus wie jede andere. */
.db-pille--warnt{border-color:var(--db-attention);color:var(--db-attention);}
.db-pille--warnt .db-pille__zahl{color:var(--db-attention);}

/* Zweite Zeile der Datumsspalte: „morgen“, „vor 3 Tagen“ */
.db-z-wann{display:block;font-size:11.5px;font-weight:600;color:var(--db-ink-4);}

/* Kennzahlenstreifen */
.db-kennzahlen{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--db-tile);
  border-radius:var(--db-r-inner);padding:14px 18px;margin-bottom:20px;
}
.db-kennzahl{display:flex;flex-direction:column;padding-right:22px;}
.db-kennzahl__wert{font-size:19px;font-weight:700;line-height:1.1;}
.db-kennzahl__text{font-size:12.5px;color:var(--db-ink-3);margin-top:2px;}
.db-kennzahlen__hinweis{margin-left:auto;font-size:13px;color:var(--db-ink-3);flex:none;}

/* ============================================================
   Vorbereitung: Auftragskopf, Bereitschaft, Garderobenkarte
   ============================================================ */

/* Auftragskopf: EINE Zeile — Pfeil, Titel, Status, Meta; rechts Kunde und
   Auftragswechsel (Handoff design/design_handoff_staender_kopf). Der Titel
   bleibt Anker, dominiert aber nicht mehr; Meta und Status stehen daneben. */
.db-auftrag{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.db-auftrag__zurueck{width:34px;height:34px;flex:none;}
/* Die Titelzeile fuellt den Platz zwischen Pfeil und Aktionen. Wird es eng,
   brechen zuerst die Aktionen in eine eigene Zeile (Mindestbreite), dann die
   Meta innerhalb der Titelzeile — der Pfeil steht nie allein in einer Zeile. */
.db-auftrag__zeile{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;line-height:1.25;
  flex:1 1 0;min-width:min(360px,calc(100% - 46px));
}
.db-auftrag__titel{font-size:17px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;}
.db-auftrag__zeile .db-badge{padding:3px 10px;font-weight:600;}
.db-auftrag__meta{
  font-size:13px;color:var(--db-ink-3);letter-spacing:.03em;
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Nie breiter als die Zeile: auf schmalen Schirmen bricht der Knopf unter
   den Kundennamen, statt rechts aus dem Bild zu laufen. */
.db-auftrag__aktionen{
  margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:8px;
  flex:0 1 auto;min-width:0;max-width:100%;flex-wrap:wrap;
}
.db-auftrag__kunde{font-size:13px;color:var(--db-ink-3);white-space:nowrap;}
.db-auftrag__kundenname{
  font-size:13px;font-weight:600;max-width:280px;flex:0 1 auto;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.db-auftrag__kundenname:hover{color:var(--db-ink-2);}

/* Phasenreiter */
.db-tabs{display:flex;gap:4px;margin:18px 0 0;border-bottom:1px solid var(--db-line);flex-wrap:wrap;}
/* Reiterzeile des Auftragskopfs: enger an der Titelzeile, rechts der Pfad. */
.db-tabs--phasen{margin-top:14px;}
.db-tabs--phasen .db-tab{padding:10px 16px;flex:none;}
/* Pfad einer Unterseite (Layout, ViewData["Pfad"]) rechts in der Reiterzeile.
   Wird es eng, schrumpfen die Glieder mit Ellipse — das laengste zuerst —,
   das letzte (die aktuelle Seite) bleibt immer ganz sichtbar. */
.db-pfad{
  margin-left:auto;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--db-ink-4);
  min-width:0;overflow:hidden;padding-bottom:6px;
}
.db-pfad a{
  font-weight:600;color:var(--db-ink-3);white-space:nowrap;
  flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
}
.db-pfad a:hover{color:var(--db-ink);}
.db-pfad__lang{flex-shrink:2 !important;}
.db-pfad__trenner{flex:none;}
.db-pfad__aktiv{font-weight:600;color:var(--db-ink);white-space:nowrap;flex:none;}
.db-tab{
  padding:11px 16px;font-size:13px;font-weight:600;color:var(--db-ink-3);cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;
}
.db-tab:hover{color:var(--db-ink);}
.db-tab[data-active="true"]{font-weight:700;color:var(--db-ink);border-bottom-color:var(--db-ink);}
.db-tabs--sub{border-bottom:none;margin:10px 0 0;gap:6px;}
.db-tabs--sub .db-tab{padding:7px 13px;border-bottom:none;border-radius:var(--db-r-pill);}
.db-tabs--sub .db-tab[data-active="true"]{background:var(--db-tile);}

/* Bereitschaftsstreifen */
.db-bereit{
  display:flex;align-items:center;gap:16px;background:var(--db-tile);border-radius:var(--db-r-inner);
  padding:14px 18px;margin-bottom:20px;flex-wrap:wrap;
}
.db-bereit__titel{font-size:13.5px;font-weight:700;}
.db-bereit__aktionen{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none;}

/* Abschnittskopf „Garderoben & Positionen“ */
.db-section-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.db-section-head__title{font-size:16px;font-weight:700;}
.db-section-head__count{font-size:13px;color:var(--db-ink-3);}
.db-section-head__actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}

/* Garderobenkarten */
.db-garderoben{display:flex;flex-direction:column;gap:26px;}
.db-garderobe{
  border:1px solid var(--db-line-strong);border-radius:var(--db-r-card);overflow:hidden;
  background:var(--db-surface);box-shadow:var(--db-shadow-card);
}
.db-garderobe__kopf{
  display:flex;align-items:center;gap:12px;padding:15px 18px;background:var(--db-frame);
  flex-wrap:wrap;cursor:pointer;width:100%;border:none;text-align:left;font-family:inherit;
}
.db-garderobe__kopf:hover{background:var(--db-frame-2);}
.db-garderobe__name{font-size:16px;font-weight:700;color:#fff;}
.db-garderobe__meta{font-size:13px;color:var(--db-on-frame-3);}
.db-garderobe__leitung{font-size:13.5px;font-weight:600;padding:4px 10px;border-radius:var(--db-r-pill);}
.db-garderobe__aktionen{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none;}
.db-garderobe__hinweis{font-size:13px;font-weight:600;color:var(--db-on-frame-2);}
.db-garderobe__leer{padding:22px 18px;text-align:center;}
.db-garderobe__leer-titel{font-size:13px;font-weight:700;}
.db-garderobe__leer-text{font-size:13.5px;color:var(--db-ink-3);margin-top:4px;}

/* Zwei Kacheln am Fuss der Vorbereitung */
.db-kacheln{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px;}
.db-kachel{
  display:flex;align-items:center;gap:14px;background:var(--db-tile);border-radius:var(--db-r-inner);
  padding:15px 18px;cursor:pointer;color:inherit;
}
.db-kachel:hover{background:var(--db-tile-hover);}
.db-kachel__titel{display:block;font-size:13.5px;font-weight:700;}
.db-kachel__text{display:block;font-size:13px;color:var(--db-ink-3);margin-top:3px;}

/* ============================================================
   Dialog (ein Gehaeuse fuer alle)
   ============================================================ */

.db-scrim{
  position:fixed;inset:0;z-index:100;background:rgba(20,21,17,.5);
  display:flex;align-items:flex-start;justify-content:center;padding:48px 20px;overflow:auto;
}
.db-modal{
  width:760px;max-width:100%;background:var(--db-surface);border-radius:var(--db-r-modal);
  box-shadow:var(--db-shadow-modal);overflow:hidden;
}
.db-modal__head{
  display:flex;align-items:center;gap:12px;padding:20px 24px 16px;border-bottom:1px solid var(--db-line);
}
.db-modal__title{font-size:17px;font-weight:700;}
.db-modal__sub{font-size:13px;color:var(--db-ink-3);margin-top:3px;}
.db-modal__badge{margin-left:auto;flex:none;}
.db-modal__body{padding:20px 24px 22px;display:grid;gap:20px;max-height:64vh;overflow-y:auto;}
.db-modal__foot{
  display:flex;align-items:center;gap:10px;padding:14px 24px;
  border-top:1px solid var(--db-line);background:var(--db-tile-2);
}
.db-modal__foot-ende{margin-left:auto;display:flex;align-items:center;gap:8px;}

/* Reiter im Dialog */
.db-mtabs{display:flex;gap:6px;border-bottom:1px solid var(--db-line);margin:-4px 0 2px;flex-wrap:wrap;}
.db-mtab{
  padding:9px 14px;font-size:13.5px;font-weight:600;color:var(--db-ink-3);cursor:pointer;
  white-space:nowrap;margin-bottom:-1px;border-bottom:2px solid transparent;
  background:none;border-left:none;border-right:none;border-top:none;font-family:inherit;
}
.db-mtab[data-active="true"]{font-weight:700;color:var(--db-ink);border-bottom-color:var(--db-ink);}

/* Nummerierter Abschnitt im Dialog („1 · Garderobe“) */
.db-mgruppe{font-size:12.5px;font-weight:700;color:var(--db-ink-3);}
.db-mblock{display:grid;gap:12px;}
.db-mblock--eng{gap:10px;}
.db-mblock--weit{gap:8px;}

/* ============================================================
   Formularbausteine
   ============================================================ */

.db-field{display:flex;flex-direction:column;gap:6px;}
/* Geraetewahl der Position: Auswahl waechst, „Wechseln“ sitzt daneben auf
   gleicher Hoehe. Eigene Maske, weil der Wechsel sofort speichert — er kann
   an der Zeitregel scheitern und darf den Einsatz nicht mitreissen. */
/* Nur-lesen-Wert in einem Feld (z. B. das Geraet einer Position — zugewiesen
   wird es am Terminal, nicht hier). */
.db-lesewert{font-size:14px;font-weight:600;color:var(--db-ink);padding:4px 0;}
/* Geraet der Position: Name links, „Gerät lösen“ rechts. */
.db-geraetezeile{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.db-field__label{font-size:13px;font-weight:600;color:var(--db-ink-2);}
/* Erklaerzeile unter einem Feld — sagt, was die Auswahl bewirkt. */
.db-field__hint{font-size:12px;color:var(--db-ink-3);}
.db-input,.db-select,.db-textarea{
  background:var(--db-tile);border:1px solid var(--db-line);border-radius:var(--db-r-control);
  padding:11px 13px;font-size:13px;color:var(--db-ink);font-family:inherit;width:100%;
}
.db-textarea{min-height:90px;resize:vertical;line-height:1.5;}
.db-input:focus,.db-select:focus,.db-textarea:focus{
  outline:none;border-color:var(--db-ink);box-shadow:0 0 0 3px rgba(26,27,23,.07);
}
.db-input::placeholder,.db-textarea::placeholder{color:var(--db-ink-4);}
/* Helles Feld im Streifen (manuelles Anlegen) */
.db-input--hell{background:var(--db-surface);border-color:var(--db-line-mid);border-radius:10px;padding:9px 11px;}
.db-cols-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.db-cols-21{display:grid;grid-template-columns:1.4fr 1fr;gap:12px;}
.db-form__actions{display:flex;justify-content:flex-end;gap:8px;}
.db-field--w88{width:88px;flex:none;}
.db-field--w92{width:92px;flex:none;}
.db-field--w112{width:112px;flex:none;}

/* Schalterkarte: Titel + Erklaerung links, Wert + Schalter rechts */
.db-schalter{
  display:flex;align-items:center;gap:14px;background:var(--db-tile);border-radius:var(--db-r-box);
  padding:12px 14px;cursor:pointer;width:100%;border:none;font-family:inherit;text-align:left;
}
.db-schalter__text{flex:1;min-width:0;}
/* Die Karten stecken teils in einem <button> — dort sind span-Kinder inline
   und wuerden sonst in einer Zeile stehen. */
.db-schalter__titel{display:block;font-size:13px;font-weight:700;}
.db-schalter__erklaerung{display:block;font-size:13px;color:var(--db-ink-3);margin-top:3px;line-height:1.45;}
.db-schalter__wert{font-size:13.5px;font-weight:700;width:104px;flex:none;text-align:right;color:var(--db-ink-3);}
.db-schalter[data-on="true"] .db-schalter__wert{color:var(--db-ink);}
.db-switch__track{
  width:32px;height:18px;border-radius:var(--db-r-pill);flex:none;display:inline-flex;
  align-items:center;padding:2px;background:var(--db-toggle-off);transition:background .13s ease-out;
}
.db-switch__knob{width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .13s ease-out;}
.db-schalter[data-on="true"] .db-switch__track{background:var(--db-accent);}
.db-schalter[data-on="true"] .db-switch__knob{transform:translateX(14px);}

/* Auswahlkarte mit Punkt (Radio) */
.db-radio{
  display:flex;align-items:center;gap:12px;border:1px solid var(--db-line);background:var(--db-surface);
  border-radius:var(--db-r-control);padding:11px 14px;cursor:pointer;width:100%;
  font-family:inherit;text-align:left;
}
.db-radio--block{align-items:flex-start;border-radius:var(--db-r-box);padding:13px 14px;}
.db-radio[data-on="true"]{border-color:var(--db-ink);background:var(--db-accent-tint);}
.db-radio__punkt{
  width:18px;height:18px;border-radius:50%;flex:none;border:1.5px solid #C9CAC0;
  display:inline-flex;align-items:center;justify-content:center;
}
.db-radio--block .db-radio__punkt{margin-top:1px;}
.db-radio__punkt::after{content:"";width:9px;height:9px;border-radius:50%;background:transparent;}
.db-radio[data-on="true"] .db-radio__punkt{border-color:var(--db-ink);}
.db-radio[data-on="true"] .db-radio__punkt::after{background:var(--db-ink);}
.db-radio__term{font-size:13px;font-weight:700;width:44px;flex:none;}
.db-radio__name{font-size:13px;font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.db-radio__sek{font-size:13.5px;color:var(--db-ink-3);}
.db-radio__text{flex:1;min-width:0;}
.db-radio__titel{display:block;font-size:13px;font-weight:700;}
.db-radio__erklaerung{display:block;font-size:13px;color:var(--db-ink-3);margin-top:3px;line-height:1.45;}
.db-radio__marke{font-size:13px;font-weight:700;color:var(--db-ink-3);flex:none;white-space:nowrap;}

/* Hinweisboxen im Dialog */
.db-hint{font-size:13px;line-height:1.5;color:var(--db-ink-3);margin:0;}
.db-box{border:1px solid var(--db-line);border-radius:var(--db-r-box);padding:12px 14px;font-size:13px;line-height:1.5;color:var(--db-neutral);}
.db-box--ruhig{border:none;background:var(--db-tile);font-size:13.5px;}
.db-box--akzent{background:var(--db-accent-tint);border:1px solid var(--db-accent-line);color:#3F4137;font-size:13.5px;}
.db-box--gestrichelt{
  border:1px dashed var(--db-line-dash);border-radius:var(--db-r-control);padding:14px;
  text-align:center;font-size:13.5px;color:var(--db-ink-3);
}
.db-box--stop{color:var(--db-attention);font-weight:600;}
.db-error{color:var(--db-danger);font-size:13px;}
.validation-summary-valid,.field-validation-valid{display:none;}

/* Offene Punkte */
.db-punkt{
  display:flex;align-items:center;gap:12px;border:1px solid var(--db-line);border-radius:var(--db-r-control);
  padding:12px 14px;cursor:pointer;width:100%;background:var(--db-surface);font-family:inherit;text-align:left;
}
.db-punkt:hover{border-color:var(--db-line-dash);}
/* Ein Punkt kann auch ein Link sein (Ständer-Seite) — er soll aussehen wie
   der Knopf daneben, nicht wie ein Textlink. */
a.db-punkt{text-decoration:none;color:inherit;box-sizing:border-box;}
.db-punkt__text{font-size:13.5px;font-weight:600;flex:1;min-width:0;}
.db-punkt__ort{font-size:13.5px;color:var(--db-ink-3);}
.db-punkt__ende{width:96px;flex:none;display:flex;justify-content:flex-end;}

/* Auftragszeile im Kunden-Dialog */
.db-jobzeile{
  display:flex;align-items:center;gap:12px;border:1px solid var(--db-line);
  border-radius:var(--db-r-control);padding:11px 14px;
}
.db-jobzeile__datum{font-size:13px;font-weight:700;color:var(--db-ink-2);width:82px;flex:none;}
.db-jobzeile__name{font-size:13px;font-weight:700;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.db-jobzeile__zahl{font-size:13px;color:var(--db-ink-2);}

/* ============================================================
   Ständer-Seite: Liste der Position, Reihen der Vorlagen, Anlegen
   Leser ist der Anleger — was die Position hat und was sie bekommen kann.
   ============================================================ */

/* Die Liste braucht keine volle Breite — Name und Plätze gehoeren nebeneinander,
   nicht an die beiden Raender des Bildschirms. */
.db-dicht{border:1px solid var(--db-line);border-radius:var(--db-r-box);overflow:hidden;max-width:820px;margin-top:6px;}
.db-dzeile{
  display:grid;grid-template-columns:26px minmax(0,1fr) 80px 110px;align-items:center;gap:14px;
  padding:13px 16px;border-bottom:1px solid var(--db-line-3);background:var(--db-surface);
  cursor:pointer;width:100%;border-left:none;border-right:none;border-top:none;font-family:inherit;text-align:left;
}
.db-dzeile:hover{background:var(--db-tile-2);}
.db-dzeile[data-on="true"]{background:var(--db-accent-tint);}
.db-dzeile--kopf{
  padding:10px 16px;background:var(--db-tile-2);border-bottom:1px solid var(--db-line);
  font-size:12.5px;font-weight:700;color:var(--db-ink-3);cursor:default;
}
.db-dzeile--kopf:hover{background:var(--db-tile-2);}
.db-dzeile--reihe{
  padding:6px 14px;background:var(--db-tile);font-size:12.5px;font-weight:700;color:var(--db-ink-3);
}
.db-dzeile--reihe:hover{background:var(--db-tile-hover);}
.db-dzeile__name{font-size:14.5px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.db-dzeile__notiz{font-size:13px;font-weight:400;color:var(--db-ink-3);margin-left:8px;}
.db-dzeile__plaetze{font-size:14px;color:var(--db-ink-2);text-align:right;}
.db-dzeile__hinweis{font-size:12.5px;color:var(--db-ink-3);text-align:right;}
.db-dzeile__weg{
  text-align:center;font-size:13px;color:#B9BAB0;cursor:pointer;background:none;border:none;
  padding:0;font-family:inherit;line-height:1;
}
.db-dzeile__weg:hover{color:var(--db-danger);}

/* Kopf der Ständer-Seite: Position, Garderobe, Rücksprung. */
/* Seitenkopf einer Unterseite: Titel und Meta in EINER Zeile (Handoff
   Ständer-Kopf) — darunter beginnt direkt der Inhalt. */
.db-seitenkopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px;}
.db-seitenkopf__zeile{min-width:0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.db-seitenkopf__titel{font-size:21px;font-weight:700;letter-spacing:-.01em;}
.db-seitenkopf__meta{font-size:13.5px;color:var(--db-ink-3);}
.db-seitenkopf__ende{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}

/* Fussnote unter einem Block */
.db-fussnote{font-size:12.5px;color:var(--db-ink-3);line-height:1.5;margin:8px 0 0;}
.db-fussnote a{color:var(--db-ink-2);text-decoration:underline;}

/* Vorlagen je Reihe. Drei Ebenen, drei Gewichte: die Reihe (gross, Anker),
   ihre Abschnitte (klein, leise), ihre Aktion (ein Knopf). Gesperrt = grau
   mit Grund in Worten — Orange bleibt der Warnung vorbehalten. */
/* Meister: ein festes Raster aus Kacheln, eine je Reihe. Die gewaehlte ist
   markiert; das Raster bewegt sich beim Klick nicht. */
.db-reihen{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:10px;margin-top:4px;}
.db-reihe{
  display:flex;align-items:center;gap:12px;min-width:0;text-align:left;
  padding:9px 12px 9px 9px;border:1px solid var(--db-line);border-radius:var(--db-r-box);
  background:var(--db-surface);font-family:inherit;color:inherit;cursor:pointer;
}
.db-reihe:hover{border-color:var(--db-ink);}
.db-reihe[data-aktiv="true"]{background:var(--db-accent-tint);border-color:var(--db-ink);}
.db-reihe__label{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  min-width:38px;height:38px;padding:0 11px;border-radius:var(--db-r-chip);
  background:var(--db-frame);color:var(--db-accent);font-size:15px;font-weight:800;
}
.db-reihe__sub{font-size:13.5px;color:var(--db-ink-2);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.db-reihe--gesperrt .db-reihe__label{background:var(--db-muted-bg);color:var(--db-ink-4);}
.db-reihe--gesperrt .db-reihe__sub{color:var(--db-ink-4);}
.db-reihe__grund{font-size:12.5px;font-weight:600;color:var(--db-attention);}

/* Popover AN der Kachel: Kopf, Liste der Abschnitte, ein Knopf. */
.db-reihe-wrap{min-width:0;}
.db-reihe-wrap .db-reihe{width:100%;}
.db-reihe-pop{left:0;min-width:300px;max-width:380px;max-height:none;padding:10px;display:grid;gap:8px;}
.db-reihe-pop[hidden]{display:none;}
.db-reihe-pop__kopf{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:2px 6px 0;}
.db-reihe-pop__titel{font-size:14.5px;font-weight:700;}
.db-reihe-pop__sub{font-size:12.5px;color:var(--db-ink-3);font-variant-numeric:tabular-nums;}
.db-reihe-pop__grund{font-size:12.5px;font-weight:600;color:var(--db-attention);padding:0 6px;}
.db-reihe-pop__liste{display:grid;gap:1px;border-top:1px solid var(--db-line-2);border-bottom:1px solid var(--db-line-2);padding:5px 0;}
.db-reihe-pop__zeile{
  display:grid;grid-template-columns:minmax(0,1fr) auto 16px;gap:10px;align-items:center;width:100%;
  padding:7px 8px;border:none;border-radius:var(--db-r-control);background:none;text-align:left;
  font-family:inherit;font-size:13px;color:var(--db-ink);cursor:pointer;
}
.db-reihe-pop__zeile:hover{background:var(--db-tile);}
.db-reihe-pop__zeile--gesperrt,.db-reihe-pop__zeile--gesperrt:hover{background:none;color:var(--db-ink-4);cursor:default;}
.db-reihe-pop__name{font-weight:600;font-variant-numeric:tabular-nums;}
.db-reihe-pop__plaetze{font-size:12.5px;color:var(--db-ink-3);white-space:nowrap;}
.db-reihe-pop__zeile--gesperrt .db-reihe-pop__plaetze{color:var(--db-ink-4);}
.db-reihe-pop__plus{text-align:center;color:var(--db-ink-4);font-size:15px;line-height:1;}
.db-reihe-pop__zeile:hover .db-reihe-pop__plus{color:var(--db-ink);}
.db-reihe-pop__hinweis{font-size:11.5px;color:var(--db-ink-4);}
.db-reihe-pop__aktion{margin:0;padding:0 2px 2px;}
.db-reihe-pop__aktion .db-btn{width:100%;justify-content:center;}




/* Kaestchen */
.db-box-check{
  width:15px;height:15px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid #C9CAC0;background:var(--db-surface);color:var(--db-ink);font-size:13px;font-weight:700;
  cursor:pointer;flex:none;padding:0;font-family:inherit;line-height:1;
}
.db-box-check[data-on="true"]{border-color:var(--db-ink);background:var(--db-accent);}

/* Belegungsbalken (Auftragsübersicht, Livebetrieb, Einrichtungsleiste) */
.db-meter{flex:1;height:6px;border-radius:6px;background:var(--db-track);overflow:hidden;min-width:40px;}
.db-meter__fill{display:block;height:6px;border-radius:6px;background:var(--db-success);}
.db-meter__fill[data-voll="true"]{background:var(--db-attention);}
.db-meter__fill[data-leer="true"]{background:var(--db-track);}

/* Auswahlleiste (kanonisch, _V2Auswahlleiste): schwebt zentriert am unteren
   Rand, sobald Zeilen markiert sind. Dunkle Pille — bewusst hoher Kontrast,
   weil sie eine temporaere Modalitaet anzeigt (Auswahl aktiv). Eine je Seite. */
.db-auswahl{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:8px;padding:8px 10px 8px 18px;
  border-radius:var(--db-r-pill);background:var(--db-frame);color:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,.22);max-width:calc(100vw - 32px);flex-wrap:wrap;
}
.db-auswahl[hidden]{display:none;}
.db-auswahl__zahl{font-size:13px;font-weight:700;white-space:nowrap;margin-right:6px;}
.db-auswahl__form{margin:0;display:contents;}
.db-auswahl__btn,.db-auswahl__select{
  height:34px;padding:0 14px;border:none;border-radius:var(--db-r-pill);
  background:rgba(255,255,255,.14);color:#fff;font-family:inherit;font-size:13px;font-weight:700;
  cursor:pointer;white-space:nowrap;transition:background .12s;
}
.db-auswahl__btn:hover,.db-auswahl__select:hover{background:rgba(255,255,255,.26);}
.db-auswahl__btn--gefahr:hover{background:var(--db-danger);}
.db-auswahl__select{
  appearance:none;padding-right:32px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center;
}
.db-auswahl__select option{color:var(--db-ink);}
.db-auswahl__x{
  width:32px;height:32px;margin-left:2px;border:none;border-radius:50%;background:transparent;color:#fff;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .12s;
}
.db-auswahl__x:hover{background:rgba(255,255,255,.2);}

.db-chips{display:flex;flex-wrap:wrap;gap:7px;}
.db-chip{
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--db-line);background:var(--db-surface);
  border-radius:var(--db-r-pill);padding:6px 12px;font-size:13px;font-weight:700;cursor:pointer;
  font-family:inherit;color:var(--db-ink);
}
.db-chip:hover{border-color:var(--db-ink);}
.db-chip[data-active="true"]{background:var(--db-frame);border-color:var(--db-frame);color:var(--db-on-frame);}
.db-chip[data-active="true"] .db-chip__count{color:var(--db-on-frame-2);}
.db-chip__plus{font-size:13px;color:var(--db-ink-3);font-weight:400;}
.db-chip__count{font-size:13px;font-weight:700;color:var(--db-ink-3);}
.db-chip--vorschau{border-style:dashed;border-color:#C9CAC0;padding:5px 11px;cursor:default;}
.db-chip--vorschau:hover{border-color:#C9CAC0;}
.db-chip--kollision{color:var(--db-attention);}
.db-chip--leer{color:var(--db-ink-4);}

/* Manuell anlegen */
.db-anlegen{background:var(--db-tile);border-radius:var(--db-r-control);padding:12px 14px;display:grid;gap:10px;}
.db-anlegen__zeile{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;}
.db-anlegen__zeile > .db-btn,.db-anlegen__zeile > .db-btn--accent{margin-left:auto;}
.db-anlegen__vorschau{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.db-anlegen__ergibt{font-size:13.5px;color:var(--db-ink-3);}
.db-anlegen__fuss{font-size:13.5px;color:var(--db-ink-3);line-height:1.45;}

/* ============================================================
   Uebrige Bausteine (Bestandsseiten)
   ============================================================ */

/* Hinweisleiste */
.db-notice{
  border-radius:var(--db-r-inner);padding:13px 17px;font-size:13px;font-weight:600;
  margin-bottom:16px;display:flex;align-items:center;gap:10px;
}
.db-notice--danger{background:var(--db-attention-bg);color:var(--db-attention);}
.db-notice--ok{background:var(--db-success-bg);color:var(--db-success);}
.db-notice--warn{background:var(--db-warning-bg);color:var(--db-warning);}

/* Leerzustand */
.db-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:70px 20px;background:var(--db-tile);border-radius:var(--db-r-inner);color:var(--db-ink-3);
}
.db-empty__title{font-size:15px;font-weight:700;color:var(--db-ink);}
.db-empty__text{font-size:13px;margin-top:6px;max-width:380px;}
.db-empty__action{margin-top:16px;}

/* Kachelflaeche und Seitenkopf der Bestandsseiten */
.db-tile{background:var(--db-tile);border-radius:var(--db-r-inner);padding:18px;}
.db-kpi{background:var(--db-tile);border-radius:var(--db-r-inner);padding:18px;}
.db-card{background:var(--db-surface);border:1px solid var(--db-line-strong);border-radius:var(--db-r-card);padding:18px;}
.db-grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;}
.db-phase{background:var(--db-tile);border-radius:var(--db-r-inner);padding:18px;cursor:pointer;}
.db-phase:hover{background:var(--db-tile-hover);}

/* Kleine Bausteine, die Bestandsseiten noch nutzen */
.db-pill-muted{
  display:inline-flex;align-items:center;background:var(--db-line);color:var(--db-ink-3);
  border-radius:var(--db-r-pill);padding:5px 11px;font-size:12.5px;font-weight:700;white-space:nowrap;
}
.db-btn--primary{background:var(--db-frame);color:#fff;}
.db-jobcard{background:var(--db-tile);border-radius:var(--db-r-inner);padding:18px;display:flex;flex-direction:column;gap:13px;cursor:pointer;}
.db-jobcard:hover{background:var(--db-tile-hover);}

/* HTML-Tabelle */
.db-table-wrap{background:var(--db-surface);border:1px solid var(--db-line-strong);border-radius:var(--db-r-card);overflow:hidden;box-shadow:var(--db-shadow-card);}
.db-table{width:100%;border-collapse:collapse;font-size:13px;}
.db-table th{
  text-align:left;font-size:12.5px;font-weight:700;color:var(--db-ink-3);
  padding:10px 18px;background:var(--db-tile-2);border-bottom:1px solid var(--db-line);white-space:nowrap;
}
.db-table td{padding:12px 18px;border-bottom:1px solid var(--db-line-2);vertical-align:middle;}
.db-table tbody tr:last-child td{border-bottom:none;}
.db-table tbody tr:hover{background:var(--db-tile-2);}
.db-table .db-num{text-align:right;}
.db-table .db-name{font-weight:700;}

/* Auswahlliste mit Haken */
.db-checklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px;}
.db-check{
  display:flex;align-items:center;gap:11px;cursor:pointer;background:var(--db-tile);
  border:1px solid var(--db-line);border-radius:var(--db-r-control);padding:12px 14px;
}
.db-check:hover{border-color:var(--db-line-dash);}
.db-check input{position:absolute;opacity:0;width:0;height:0;}
.db-check__box{
  width:20px;height:20px;border-radius:6px;border:1.5px solid #C9CAC0;background:#fff;flex:none;
  display:inline-flex;align-items:center;justify-content:center;color:transparent;
}
.db-check:has(input:checked){background:var(--db-accent-tint);border-color:var(--db-ink);}
.db-check:has(input:checked) .db-check__box{background:var(--db-accent);border-color:var(--db-ink);color:var(--db-ink);}

/* Vorlagen-Kacheln */
.db-vorlagen{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;max-height:250px;overflow-y:auto;}
.db-vorlage{
  position:relative;display:flex;flex-direction:column;gap:3px;background:var(--db-tile);
  border:1px solid var(--db-line);border-radius:var(--db-r-control);padding:12px 14px;cursor:pointer;
}
.db-vorlage:hover:not([disabled]){background:var(--db-tile-hover);}
.db-vorlage[data-gewaehlt]{border-color:var(--db-ink);background:var(--db-accent-tint);}
.db-vorlage[disabled],.db-vorlage--inactive{opacity:.55;cursor:not-allowed;}
.db-vorlage__name{font-weight:700;font-size:13px;}
.db-vorlage__detail{font-size:13px;color:var(--db-ink-3);}
.db-vorlagen--liste{grid-template-columns:1fr;}
.db-vorlagen--liste .db-vorlage{flex-direction:row;align-items:center;gap:14px;padding-right:96px;}
.db-vorlage__hit{position:absolute;inset:0;margin:0;}
.db-vorlage__hit button{position:absolute;inset:0;width:100%;height:100%;background:transparent;border:none;cursor:pointer;}

/* Platz-Raster */
.db-slots{display:flex;flex-wrap:wrap;gap:8px;}
.db-slot{
  display:inline-flex;align-items:center;gap:6px;background:var(--db-tile);
  border:1px solid var(--db-line);border-radius:var(--db-r-control);padding:7px 10px;
}
.db-slot[data-belegt="true"]{background:var(--db-success-bg);border-color:#CFE6D9;}
.db-slot__label{font-size:13px;font-weight:700;color:var(--db-ink);}
.db-slot__lock{display:inline-flex;color:var(--db-ink-4);}
.db-slot__del{
  display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border:none;border-radius:50%;background:none;color:var(--db-ink-4);cursor:pointer;
}
.db-slot__del:hover{background:var(--db-danger);color:#fff;}

/* Codeblock */
.db-code{
  background:var(--db-frame);color:#D7DAC8;border-radius:var(--db-r-inner);padding:16px 18px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.6;
  max-height:420px;overflow:auto;white-space:pre-wrap;word-break:break-all;margin:0;
}

/* Balkendiagramm */
.db-chart{
  display:flex;align-items:flex-end;gap:1px;height:180px;
  background:linear-gradient(to top,var(--db-line-2) 1px,transparent 1px) 0 0/100% 25%;padding-top:4px;
}
.db-chart__bar{flex:1 1 0;min-width:2px;border-radius:2px 2px 0 0;background:#DDDED5;}
.db-chart__bar[data-kern="true"]{background:var(--bar,var(--db-accent));}
.db-chart__bar:hover{background:var(--db-frame);}

/* Einrichtungs-Fortschritt */
.db-einrichtung{background:var(--db-tile);border-radius:var(--db-r-inner);padding:16px 18px;margin-bottom:20px;}
.db-einrichtung__kopf{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.db-einrichtung__title{font-size:15px;font-weight:700;}
.db-einrichtung__count,.db-einrichtung__next{font-size:13px;color:var(--db-ink-3);}
.db-einrichtung__next strong{color:var(--db-ink);}
.db-einrichtung__go{margin-left:auto;}
.db-einrichtung__hinweis{font-size:13px;color:var(--db-attention);margin:12px 0 0;}
.db-einrichtung .db-meter{margin:12px 0 14px;height:8px;border-radius:var(--db-r-pill);}
.db-einrichtung .db-meter__fill{height:8px;border-radius:var(--db-r-pill);background:var(--db-accent);}
.db-schritte{display:flex;gap:7px;flex-wrap:wrap;list-style:none;margin:0;padding:0;}
.db-schritte li{flex:1 1 150px;min-width:0;}
.db-schritt{
  display:flex;align-items:center;gap:10px;padding:10px 12px;height:100%;background:var(--db-surface);
  border:1px solid var(--db-line);border-radius:var(--db-r-control);
}
.db-schritt:hover{border-color:var(--db-line-dash);}
.db-schritt__marke{
  width:22px;height:22px;border-radius:50%;flex:none;display:inline-flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:700;background:var(--db-line);color:var(--db-ink-3);
}
.db-schritt__text{display:flex;flex-direction:column;min-width:0;line-height:1.25;}
.db-schritt__titel{font-size:13px;font-weight:700;color:var(--db-ink);}
.db-schritt__zahl{font-size:12.5px;color:var(--db-ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.db-schritt[data-zustand="fertig"] .db-schritt__marke{background:var(--db-success);color:#fff;}
.db-schritt[data-zustand="dran"]{border-color:var(--db-accent);background:var(--db-accent-tint);}
.db-schritt[data-zustand="dran"] .db-schritt__marke{background:var(--db-accent);color:var(--db-ink);}
.db-schritt[data-zustand="offen"]{opacity:.7;}

/* Popover (Auftragswechsler) */
.db-pop-wrap{position:relative;flex:none;}
.db-pop{
  position:absolute;top:calc(100% + 8px);z-index:60;min-width:260px;max-height:340px;overflow-y:auto;
  background:var(--db-surface);border:1px solid var(--db-line);border-radius:var(--db-r-inner);
  box-shadow:var(--db-shadow-pop);padding:7px;
}
.db-pop--right{right:0;}
.db-pop__item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--db-r-control);font-size:13px;cursor:pointer;}
.db-pop__item:hover{background:var(--db-tile);}

/* Versions-Umschalter */
.db-versionswitch{
  display:flex;align-items:center;justify-content:center;gap:3px;font-size:12px;font-weight:700;
  letter-spacing:.06em;color:var(--db-ink-4);border:1px solid var(--db-line);
  border-radius:var(--db-r-pill);padding:5px 8px;
}
.db-versionswitch:hover{color:var(--db-ink);border-color:var(--db-line-dash);background:var(--db-tile);}
.db-versionswitch__aktiv{color:var(--db-ink);}
.db-versionswitch__pfeil{opacity:.5;}

/* Mobile-Topbar und Schublade */
.db-only-mobile{display:none;}
.db-mtopbar{align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--db-line);}
.db-drawer{
  position:fixed;inset:0 auto 0 0;width:300px;max-width:84%;background:var(--db-surface);
  box-shadow:var(--db-shadow-modal);z-index:101;padding:18px;display:flex;flex-direction:column;
}
.db-drawer__item{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:var(--db-r-control);font-size:13.5px;font-weight:600;}
.db-drawer__item:hover{background:var(--db-tile);}
.db-drawer__item[data-active="true"]{background:var(--db-accent);color:var(--db-ink);font-weight:700;}

/* ============================================================
   Schmalere Fenster
   ============================================================ */

@media (max-width:900px){
  /* Erste Stufe der Spaltenreduktion (Handoff): der Einsatz faellt weg,
     Person bleibt. Die Spaltensaetze zaehlen dann eine Spalte weniger. */
  .db-cols--positionen{--db-cols:100px minmax(90px,1.4fr) minmax(90px,1.2fr) 100px 92px 92px;}
  .db-zeile .db-z-einsatz{display:none;}
  .db-zeile .db-z-person{white-space:normal;}
  .db-cols--liste{--db-cols:40px minmax(0,1.6fr) minmax(0,1.1fr) 96px minmax(0,1fr) 78px;}
  .db-cols--kunden{--db-cols:40px minmax(0,1.6fr) minmax(0,1.1fr) 76px minmax(0,1fr) 78px;}
  .db-kacheln{grid-template-columns:1fr;}
}

/* ============================================================
   Einsatz-Picker (wwwroot/v2/einsatz.js)
   Aufbau aus dem batOS-Vorbild: links der Kalender fuer den EINEN Tag,
   rechts zwei Zeitraster „Von“ und „Bis“ — Datum und Uhrzeit optisch
   getrennt. Von = Akzent (lime), Bis = Ink (dunkel).
   ============================================================ */

.db-esp{
  position:fixed;z-index:200;
  background:var(--db-surface);border:1px solid var(--db-line-strong);
  border-radius:var(--db-r-card);box-shadow:var(--db-shadow-modal);
  padding:16px 18px;min-width:700px;user-select:none;
  max-height:calc(100vh - 24px);overflow-y:auto;
  --db-esp-von:      var(--db-ink);
  --db-esp-von-bg:   var(--db-accent-tint);
  --db-esp-von-linie:var(--db-accent);
  --db-esp-bis:      var(--db-ink);
  --db-esp-bis-bg:   var(--db-tile);
  --db-esp-bis-linie:var(--db-frame);
}

.db-esp__koepfe{
  display:flex;align-items:center;gap:6px;margin-bottom:12px;
  padding-bottom:10px;border-bottom:1px solid var(--db-line);
}
.db-esp__kopf{
  min-width:64px;text-align:center;
  font-size:13.5px;font-weight:700;padding:6px 12px;border-radius:var(--db-r-pill);
}
.db-esp__kopf--tag{flex:1 1 0;background:var(--db-tile);}
.db-esp__kopf[data-slot="von"]{background:var(--db-esp-von-bg);color:var(--db-esp-von);}
.db-esp__kopf[data-slot="bis"]{background:var(--db-esp-bis-bg);color:var(--db-esp-bis);}
.db-esp__kopf:empty::before{content:attr(data-platzhalter);color:var(--db-ink-4);font-weight:600;}
.db-esp__trenner{width:1px;height:22px;background:var(--db-line);margin:0 8px;}
.db-esp__strich{color:var(--db-ink-3);padding:0 2px;}
.db-esp__plus{
  font-size:12px;font-weight:700;color:var(--db-ink-2);
  border:1px solid var(--db-line);border-radius:999px;padding:3px 9px;white-space:nowrap;
}

.db-esp__bereiche{display:flex;gap:16px;align-items:stretch;}
.db-esp__zeiten{display:flex;gap:12px;}
.db-esp__bereich{
  display:flex;flex-direction:column;gap:10px;
  padding:10px 12px;border-radius:var(--db-r-inner);
  background:var(--db-tile-2);border:1px solid var(--db-line);
}
.db-esp__bereich--tag{--db-esp-akzent:var(--db-ink);--db-esp-akzent-bg:var(--db-tile);border-top:3px solid var(--db-line-strong);}
.db-esp__bereich[data-ziel="von"]{
  --db-esp-akzent:var(--db-esp-von);--db-esp-akzent-bg:var(--db-esp-von-bg);
  border-top:3px solid var(--db-esp-von-linie);
}
.db-esp__bereich[data-ziel="bis"]{
  --db-esp-akzent:var(--db-esp-bis);--db-esp-akzent-bg:var(--db-esp-bis-bg);
  border-top:3px solid var(--db-esp-bis-linie);
}
.db-esp__titel{
  text-align:center;font-size:12.5px;font-weight:700;color:var(--db-ink-3);
  padding-bottom:6px;border-bottom:1px solid var(--db-line);
}

.db-esp__monatkopf{
  position:relative;display:flex;align-items:center;justify-content:center;
  font-size:13.5px;font-weight:700;padding:0 0 8px;
}
.db-esp__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  border:none;background:none;color:var(--db-ink-2);
  font-size:18px;line-height:1;padding:4px 8px;cursor:pointer;font-family:inherit;
}
.db-esp__nav:hover{color:var(--db-ink);}
.db-esp__nav--zurueck{left:0;}
.db-esp__nav--vor{right:0;}

.db-esp__raster{display:grid;grid-template-columns:repeat(7,32px);gap:2px 0;justify-content:center;}
.db-esp__wt{
  text-align:center;font-size:12px;color:var(--db-ink-3);
  padding:3px 0;border-bottom:1px solid var(--db-line);
}
.db-esp__tag{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--db-ink);border-radius:50%;cursor:pointer;
}
.db-esp__tag.is-leer{visibility:hidden;cursor:default;}
.db-esp__tag.is-gesperrt{opacity:.25;pointer-events:none;}
.db-esp__tag:hover:not(.is-leer):not(.is-gesperrt){background:var(--db-esp-akzent-bg);}
.db-esp__tag.is-heute{box-shadow:inset 0 0 0 1px var(--db-esp-akzent);}
.db-esp__tag.is-gewaehlt{background:var(--db-accent);color:var(--db-accent-ink);font-weight:700;}

.db-esp__zeit{display:flex;gap:10px;align-items:flex-start;}
.db-esp__stunden{display:grid;grid-template-columns:repeat(4,34px);gap:2px;}
.db-esp__minuten{
  display:grid;grid-template-columns:40px;gap:2px;
  padding-left:8px;border-left:1px solid var(--db-line);
}
.db-esp__wert{
  border:1px solid transparent;background:none;color:var(--db-ink);
  font-family:inherit;font-size:13px;padding:4px 0;border-radius:8px;
  text-align:center;cursor:pointer;
}
.db-esp__wert:hover{background:var(--db-esp-akzent-bg);}
.db-esp__wert.is-aktiv{background:var(--db-esp-akzent);color:var(--db-surface);}
.db-esp__bereich[data-ziel="von"] .db-esp__wert.is-aktiv{
  background:var(--db-accent);color:var(--db-accent-ink);
}

.db-esp__aktionen{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;}
.db-esp__aktion{
  border:1px solid var(--db-line-mid);background:var(--db-surface);color:var(--db-ink);
  border-radius:var(--db-r-pill);padding:9px 18px;
  font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
}
.db-esp__aktion:hover{background:var(--db-tile-2);}
.db-esp__aktion--primaer{
  background:var(--db-frame);border-color:var(--db-frame);color:#fff;font-weight:700;
}
.db-esp__aktion--primaer:hover{background:var(--db-frame-2);}
.db-esp__aktion:disabled,.db-esp__aktion:disabled:hover{
  background:var(--db-line);border-color:var(--db-line);color:var(--db-ink-4);cursor:not-allowed;
}

@media (max-width:760px){
  .db-esp{min-width:0;width:calc(100vw - 24px);left:12px !important;}
  .db-esp__bereiche,.db-esp__zeiten{flex-direction:column;gap:12px;}
  .db-zeitfeld{flex-wrap:wrap;}
  .db-zeitfeld__teil--tag{border-right:none;border-bottom:1px solid var(--db-line);flex:1 1 100%;}
}

@media (max-width:768px){
  .db-appbg{padding:0;}
  .db-app{border-radius:0;box-shadow:none;min-height:100vh;}
  .db-rail{display:none;}
  .db-only-mobile{display:flex;}
  .db-kopf,.db-kopf--auftrag{padding:16px 16px 0;}
  /* Ein langer Auftragsname darf hier umbrechen statt rechts hinauszulaufen. */
  .db-auftrag__titel{white-space:normal;}
  .db-content,.db-content--auftrag{padding:14px 16px 24px;}
  .db-head__title{font-size:23px;}
  .db-search{width:100%;}
  .db-table-wrap{overflow-x:auto;}
  .db-table{min-width:560px;}
  /* Zweite Stufe: nur noch Kennung, Name und Status. Der Knopf am Ende
     entfaellt — die ganze Zeile ist ohnehin die Schaltflaeche. */
  .db-zeile .db-z-opt,
  .db-zeile .db-z-ende{display:none;}
  .db-cols--jobs{--db-cols:72px minmax(0,1fr) 92px;}
  .db-cols--liste{--db-cols:40px minmax(0,1fr) 92px;}
  .db-cols--kunden{--db-cols:40px minmax(0,1fr);}
  .db-cols--positionen{--db-cols:96px minmax(0,1fr) 92px;}
  .db-zeile--kopf{font-size:12px;}
  .db-modal__body{max-height:none;}
  .db-scrim{padding:16px 12px;}
}

@media (max-width:640px){
  .db-schritte li{flex:1 1 100%;}
  .db-cols-2,.db-cols-21{grid-template-columns:1fr;}
}