/* =========================================================
   MALERPLUS • HAENDLERKATALOG • EIGENES STYLESHEET
   ---------------------------------------------------------
   MP-20260812-005 · product-engineer · gehoert zu
   modules/material/mp-dealer-catalog-ui.js.

   ⚠ Diese Datei wird NIRGENDS eingehaengt (kein <link> in index.html /
   app/index.html). Sie ist wirkungslos, bis sie jemand laedt — das ist
   Absicht (siehe Kopfkommentar der zugehoerigen .js-Datei).

   Bewusst EIGENSTAENDIG statt material.css/dashboard.css/mp-modal-
   standard.css zu erweitern: diese Datei darf keine stille Abhaengigkeit
   von Lade-Reihenfolge oder Spezifitaets-Wettrennen in anderen
   Stylesheets eingehen (siehe SHARED_LEARNINGS L-080/L-082 — genau diese
   Faellen sind in diesem Repo schon eingetreten). Visuelle Werte (Radius,
   Farben, Abstaende) sind an den vorhandenen Mustern gemessen und hier
   bewusst NEU deklariert:
     - Suchleiste/Icon:      css/material.css .mat-searchbar (Z.101-152)
     - Fenster/Kopf/Scrim:   css/legacy_styles/modules/dashboard.css
                              .mp-ust-ov/.mp-ust-sheet/.mp-ust-head (Z.4174-4230)
     - Knoepfe:               css/mp-button-system.css (.btn-primary/-secondary/-ghost,
                              12px Radius per --btn-radius — NICHT die 999px-
                              Sonderfaelle aus mp-modal-standard.css, die
                              gezielt auf .aufmass-sheet/.mp-confirm-modal/
                              .mp-sheet/.mp-hub-sheet zielen und diese
                              Klassen hier nicht treffen)

   HAUSREGELN, wörtlich umgesetzt (Marcel, verbindlich):
     - Keine Emojis — nur Inline-SVG (steht im .js-Modul).
     - KEIN border-radius:999px irgendwo in dieser Datei. 12px ist
       Standard, 16px NUR fuer den Fensterrahmen (.mp-dlrcat-sheet).
     - Kein Knopf ueber volle Breite — .btn-primary/.btn-secondary/
       .btn-ghost aus mp-button-system.css sind inline-flex, nie
       width:100%. Zeilen (Abteilung/Sortiment/Katalog) sind bewusst KEINE
       farbigen Block-Knoepfe, sondern schlichte Listenzeilen mit
       Haarlinie — wie die Spezifikation es fuer Ebene 1/2 verlangt
       ("keine vollbreiten Blockknöpfe").
     - mp-button-system.css ist der Knopf-Standard, keine .btn-*-Overrides.
   ========================================================= */

/* ── Fenster / Scrim ─────────────────────────────────────── */
.mp-dlrcat-ov {
  position: fixed; inset: 0; z-index: 8700;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(11, 15, 25, .42);
}
.mp-dlrcat-sheet {
  width: 100%; max-width: 880px;
  max-height: min(86dvh, 760px);
  display: flex; flex-direction: column;
  background: var(--mp-card, rgb(var(--mp-flaeche-rgb)));
  border: 1px solid rgba(11, 15, 25, .08);
  border-radius: 16px; /* Fensterrahmen — einzige erlaubte Ausnahme von 12px */
  box-shadow: 0 2px 4px rgba(11, 15, 25, .05), 0 16px 48px rgba(11, 15, 25, .16);
  overflow: hidden;
}
.mp-dlrcat-sheet--inline {
  max-width: none; max-height: none; height: 100%;
  border-radius: 12px; box-shadow: none;
}

/* ── Kopf ─────────────────────────────────────────────────── */
.mp-dlrcat-head {
  display: flex; align-items: center; gap: 11px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(11, 15, 25, .07);
  flex: 0 0 auto;
}
.mp-dlrcat-back,
.mp-dlrcat-x {
  border: 0; background: transparent; color: rgba(11, 15, 25, .45);
  cursor: pointer; padding: 6px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.mp-dlrcat-back:hover, .mp-dlrcat-x:hover { background: rgba(11, 15, 25, .06); color: rgba(var(--mp-t1-0b0f19), 0.75); }
.mp-dlrcat-chip {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 11px;
  background: rgba(43, 176, 255, .12); color: #0a7cbe; flex: 0 0 auto;
}
.mp-dlrcat-ht { min-width: 0; flex: 1 1 auto; }
.mp-dlrcat-title {
  font-size: 15px; font-weight: 800; letter-spacing: -.01em;
  color: var(--mp-text, rgb(var(--mp-t1-0b0f19)));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mp-dlrcat-sub { font-size: 11.5px; font-weight: 600; color: rgba(11, 15, 25, .45); }

/* ── Suchzeile ───────────────────────────────────────────── */
.mp-dlrcat-searchrow {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-bottom: 1px solid rgba(11, 15, 25, .07);
  flex: 0 0 auto;
}
.mp-dlrcat-searchbar {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 14px;
  background: var(--mp-card, rgb(var(--mp-flaeche-rgb)));
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 12px;
}
.mp-dlrcat-searchbar:focus-within { border-color: var(--mp-blue, #2bb0ff); }
.mp-dlrcat-search-ico { color: rgb(var(--mp-t3-8a94a3)); flex: 0 0 auto; display: inline-flex; }
.mp-dlrcat-search-input {
  flex: 1; min-width: 0; width: 100%; border: 0; background: transparent;
  font: inherit; font-size: 14.5px; color: inherit;
}
.mp-dlrcat-search-input:focus { outline: none; }
.mp-dlrcat-search-input::placeholder { color: rgb(var(--mp-t3-8a94a3)); font-weight: 400; }
.mp-dlrcat-debug {
  font-size: 10.5px; font-weight: 700; color: rgb(var(--mp-t3-8a94a3));
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ── Koerper ─────────────────────────────────────────────── */
.mp-dlrcat-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 12px 14px; }
.mp-dlrcat-hint, .mp-dlrcat-empty {
  padding: 22px 14px; text-align: center; color: rgb(var(--mp-t3-64707e)); font-size: 13px;
}
/* MP-20260827-040: kompakter Einzeiler ueber der A-Z-Leiste (renderFlach()-
   Fallback ohne Herstellerstruktur) statt der raumgreifenden 22px-Vollbild-
   Variante oben — bleibt trotzdem an derselben Basisklasse (Farbe/Dark-Mode
   erben), nur Abstand/Ausrichtung sind hier kleiner. */
.mp-dlrcat-hint--az { padding: 8px 4px 0; text-align: left; font-size: 12px; }
.mp-dlrcat-empty code { background: rgba(11, 15, 25, .06); padding: 1px 5px; border-radius: 6px; font-size: 12px; }

/* ── Listenzeilen (Kataloge / Abteilungen / Sortimente) ─────
   Bewusst schlichte Zeilen, keine farbigen Block-Knoepfe — siehe
   Spezifikation Abschnitt 7 "keine vollbreiten Blockknoepfe". */
.mp-dlrcat-list { display: flex; flex-direction: column; }
.mp-dlrcat-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 48px; padding: 10px 8px;
  background: transparent; border: 0; border-top: 1px solid rgba(11, 15, 25, .07);
  text-align: left; cursor: pointer; font: inherit; color: inherit;
  border-radius: 12px;
}
.mp-dlrcat-list .mp-dlrcat-row:first-child { border-top: 0; }
.mp-dlrcat-row:hover { background: rgba(11, 15, 25, .03); }
.mp-dlrcat-row--suche { margin-bottom: 4px; border-top: 0; border-bottom: 1px solid rgba(11, 15, 25, .07); border-radius: 12px; }
.mp-dlrcat-row-ico {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 10px; flex: 0 0 auto;
  background: rgba(43, 176, 255, .10); color: #0a7cbe;
}
.mp-dlrcat-row-t { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; }
.mp-dlrcat-row-t strong { font-size: 13.5px; font-weight: 700; color: var(--mp-text, rgb(var(--mp-t1-0b0f19))); letter-spacing: -.005em; }
.mp-dlrcat-row-t em { font-style: normal; font-size: 11.5px; color: rgba(var(--mp-t1-0b0f19), 0.5); }
.mp-dlrcat-row-v { flex: 0 0 auto; color: rgba(11, 15, 25, .3); display: inline-flex; }

.mp-dlrcat-add {
  margin: 10px 8px 4px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px dashed rgba(15, 23, 42, .25); background: transparent;
  color: var(--mp-blue, #2bb0ff); font-weight: 700; font-size: 13px;
  padding: 9px 14px; border-radius: 12px; cursor: pointer;
}
.mp-dlrcat-add:hover { background: rgba(43, 176, 255, .06); }

/* ── Artikelliste (Suche / Sortiment-Drilldown) ─────────────── */
.mp-dlrcat-artikelliste { display: flex; flex-direction: column; }
.mp-dlrcat-artikel {
  display: flex; align-items: center; gap: 10px;
  border-top: 1px solid rgba(11, 15, 25, .07); padding: 9px 4px;
}
.mp-dlrcat-artikelliste .mp-dlrcat-artikel:first-child { border-top: 0; }
.mp-dlrcat-check {
  flex: 0 0 auto; border: 0; background: transparent; color: rgb(var(--mp-t3-8a94a3)); cursor: pointer;
  padding: 4px; border-radius: 8px; display: inline-flex;
}
.mp-dlrcat-check[aria-pressed="true"] { color: var(--mp-blue, #2bb0ff); }
.mp-dlrcat-artikel-main {
  flex: 1 1 auto; min-width: 0; text-align: left; border: 0; background: transparent;
  cursor: pointer; padding: 2px 4px; border-radius: 10px;
  display: flex; flex-direction: column; gap: 2px; color: inherit; font: inherit;
}
.mp-dlrcat-artikel-main:hover { background: rgba(11, 15, 25, .03); }
.mp-dlrcat-artikel-name { font-size: 13.5px; font-weight: 700; color: var(--mp-text, rgb(var(--mp-t1-0b0f19))); }
.mp-dlrcat-artikel-meta { font-size: 11.5px; color: rgba(var(--mp-t1-0b0f19), 0.5); }
.mp-dlrcat-artikel-warnrow { margin-top: 2px; }
.mp-dlrcat-warn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; color: #a16207;
  background: rgba(234, 179, 8, .12); border-radius: 8px; padding: 2px 7px;
}
.mp-dlrcat-artikel-preis {
  flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--mp-text, rgb(var(--mp-t1-0b0f19)));
  font-variant-numeric: tabular-nums; min-width: 76px; text-align: right;
}
.mp-dlrcat-artikel-aktion { flex: 0 0 auto; }
.mp-dlrcat-instamm {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(16, 185, 129, .32); background: rgba(16, 185, 129, .08);
  color: #047857; font-weight: 700; font-size: 12.5px;
  padding: 7px 12px; border-radius: 12px; cursor: pointer;
}
.mp-dlrcat-instamm:hover { background: rgba(16, 185, 129, .14); }

/* ── Detailfenster (im gleichen Koerper gerendert) ──────────── */
.mp-dlrcat-detail { padding: 4px 8px 8px; display: flex; flex-direction: column; }
.mp-dlrcat-detail-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-top: 1px solid rgba(11, 15, 25, .06);
}
.mp-dlrcat-detail-row:first-child { border-top: 0; }
.mp-dlrcat-detail-row span { font-size: 12px; color: rgb(var(--mp-t3-64707e)); flex: 0 0 auto; }
.mp-dlrcat-detail-row strong { font-size: 13.5px; font-weight: 700; color: var(--mp-text, rgb(var(--mp-t1-0b0f19))); text-align: right; }
.mp-dlrcat-detail-row strong em { font-style: normal; font-weight: 500; color: rgb(var(--mp-t3-8a94a3)); font-size: 11.5px; }
.mp-dlrcat-detail-input { align-items: center; }
.mp-dlrcat-input {
  border: 1px solid rgba(15, 23, 42, .16); border-radius: 12px;
  padding: 8px 11px; font: inherit; font-size: 13.5px; width: 130px;
  background: var(--mp-card, rgb(var(--mp-flaeche-rgb))); color: inherit; text-align: right;
}
.mp-dlrcat-input:focus { outline: none; border-color: var(--mp-blue, #2bb0ff); box-shadow: 0 0 0 3px rgba(43, 176, 255, .14); }
.mp-dlrcat-input.is-invalid { border-color: #dc2626; }
.mp-dlrcat-detail-warn {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 10px; padding: 10px 12px; border-radius: 12px;
  background: rgba(234, 179, 8, .10); border: 1px solid rgba(234, 179, 8, .28);
  color: #7c5a06; font-size: 12.5px; line-height: 1.4;
}
.mp-dlrcat-detail-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 14px 4px 4px; border-top: 1px solid rgba(11, 15, 25, .07); margin-top: 12px;
}

/* ── A-Z-Register (MP-20260823-001, ADR-0013 Stufe 2) ────────
   Mehrzeiliges Raster statt horizontaler Scrollleiste (UX-Entscheidung):
   das ganze Alphabet ist auf einen Blick da, kein verstecktes Ende hinter
   einer Wischgeste (Finger mit Farbe/Handschuh auf der Malerbank). Fixe
   40x40px-Knoepfe auf ALLEN Breiten — bleibt am bestehenden App-Floor
   (mp-safe-style-patch.css), kein neuer, kleinerer Sondergroessen-Fall. */
.mp-dlrcat-az {
  position: sticky; top: 0; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px 4px 12px;
  background: var(--mp-card, rgb(var(--mp-flaeche-rgb)));
  border-bottom: 1px solid rgba(11, 15, 25, .07);
}
.mp-dlrcat-az-btn {
  min-width: 40px; max-width: 40px;
  min-height: 40px; max-height: 40px; /* Falle mp-safe-style-patch.css:296 festgenagelt (min UND max) */
  border-radius: 12px; border: 1px solid rgba(11, 15, 25, .12);
  background: transparent; font-weight: 700; font-size: 13px;
  color: var(--mp-text, rgb(var(--mp-t1-0b0f19))); cursor: pointer;
}
.mp-dlrcat-az-btn[aria-pressed="true"] {
  background: rgba(43, 176, 255, .12); border-color: var(--mp-blue, #2bb0ff);
  color: #0a7cbe;
}
.mp-dlrcat-az-btn:focus-visible {
  outline: none; border-color: var(--mp-blue, #2bb0ff);
  box-shadow: 0 0 0 3px rgba(43, 176, 255, .14); /* wie .mp-dlrcat-input:focus */
}
html.dark .mp-dlrcat-az { background: #141922; border-color: rgba(255, 255, 255, .08); }
html.dark .mp-dlrcat-az-btn { border-color: rgba(255, 255, 255, .14); color: #f1f5f9; }
/* U-13 (Review MP-20260823-001): ohne diese Regel verliert der aktive
   A-Z-Buchstabe im Dark Mode seine Markierung — html.dark .mp-dlrcat-az-btn
   (0,2,1) schlaegt .mp-dlrcat-az-btn[aria-pressed="true"] (0,2,0) und steht
   zudem spaeter in der Datei. Eigene, gleich hoch spezifische Dark-Mode-
   Regel fuer den gedrueckten Zustand, nach demselben Markenblau wie hell. */
html.dark .mp-dlrcat-az-btn[aria-pressed="true"] {
  background: rgba(43, 176, 255, .18); border-color: var(--mp-blue, #2bb0ff);
  color: #7cd4ff;
}

/* ── "Weitere anzeigen" (A-Z-/Sortiment-Blaettern) ────────────
   Wortmuster wie material-picker.js "Weitere anzeigen (N)" — gilt NICHT
   fuer die Volltextsuche (die bleibt beim bestehenden Kappungshinweis,
   Sweep-Verbot D-4 unveraendert). */
.mp-dlrcat-more { padding: 14px 8px 4px; text-align: center; }

/* ── Register-Aufbau (einmalige Vorbereitung) ─────────────────
   6px-Fortschrittsbalken, Radius = halbe Hoehe (Verlaufs-Element, kein
   Pillen-Knopf — anders als ein Button/Toggle gibt es hier kein "Kreis
   vortaeuschen"-Risiko). */
.mp-dlrcat-regbau { padding: 10px 8px 4px; }
.mp-dlrcat-regbau-track {
  height: 6px; border-radius: 3px; overflow: hidden;
  background: rgba(11, 15, 25, .08); margin: 10px 0 8px;
}
.mp-dlrcat-regbau-fill { height: 100%; background: var(--mp-blue, #2bb0ff); transition: width .2s ease; }
.mp-dlrcat-regbau-zahl { font-size: 12px; color: rgba(var(--mp-t1-0b0f19), 0.55); margin-bottom: 12px; }
html.dark .mp-dlrcat-regbau-track { background: rgba(255, 255, 255, .1); }
html.dark .mp-dlrcat-regbau-zahl { color: rgba(226, 232, 240, .55); }

/* ── Mehrfachauswahl-Leiste ──────────────────────────────────
   Fixe Leiste am unteren Fensterrand — bewusst KEIN vollbreiter Knopf:
   der Text steht links, der Knopf rechts ist so breit wie sein Text. */
.mp-dlrcat-bulkbar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 18px;
  border-top: 1px solid rgba(11, 15, 25, .07);
  background: var(--mp-card, rgb(var(--mp-flaeche-rgb)));
  font-size: 13px; font-weight: 700; color: var(--mp-text, rgb(var(--mp-t1-0b0f19)));
}

/* ── Dark Mode ───────────────────────────────────────────── */
html.dark .mp-dlrcat-sheet,
[data-theme='dark'] .mp-dlrcat-sheet { background: #141922; border-color: rgba(255, 255, 255, .08); }
html.dark .mp-dlrcat-title,
[data-theme='dark'] .mp-dlrcat-title { color: #f1f5f9; }
html.dark .mp-dlrcat-sub,
html.dark .mp-dlrcat-row-t em,
html.dark .mp-dlrcat-artikel-meta,
html.dark .mp-dlrcat-hint,
html.dark .mp-dlrcat-empty { color: rgba(226, 232, 240, .55); }
html.dark .mp-dlrcat-row-t strong,
html.dark .mp-dlrcat-artikel-name,
html.dark .mp-dlrcat-detail-row strong,
html.dark .mp-dlrcat-bulkbar { color: #f1f5f9; }
html.dark .mp-dlrcat-row,
html.dark .mp-dlrcat-artikel,
html.dark .mp-dlrcat-detail-row,
html.dark .mp-dlrcat-head,
html.dark .mp-dlrcat-searchrow,
html.dark .mp-dlrcat-bulkbar { border-color: rgba(255, 255, 255, .08); }
html.dark .mp-dlrcat-searchbar,
html.dark .mp-dlrcat-input { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #f1f5f9; }
html.dark .mp-dlrcat-row:hover,
html.dark .mp-dlrcat-artikel-main:hover { background: rgba(255, 255, 255, .05); }

/* ── Handy: Ebenen nacheinander, keine Nebeneinander-Spalten ──
   (Spezifikation Abschnitt 7: "Auf dem Handy werden die drei Ebenen
   nacheinander gezeigt" — hier ohnehin der Fall, weil jede Ebene den
   ganzen Koerper ersetzt statt Spalten zu bilden; Regel gilt fuer alle
   Breiten gleich, daher keine gesonderte @media-Umschaltung noetig.) */
/* ── Cloud-Sync UI (MP-20261003-001) ────────────────────── */
.mp-dlrcat-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; padding: 2px 7px;
  border-radius: 6px; white-space: nowrap; flex: 0 0 auto;
}
.mp-dlrcat-badge--synced {
  background: rgba(16, 185, 129, .12); color: #059669;
}
.mp-dlrcat-badge--cloud {
  background: rgba(43, 176, 255, .12); color: #0284c7;
}
.mp-dlrcat-badge--local {
  background: rgba(100, 116, 139, .12); color: #475569;
}
html.dark .mp-dlrcat-badge--synced { background: rgba(16, 185, 129, .2); color: #34d399; }
html.dark .mp-dlrcat-badge--cloud { background: rgba(56, 189, 248, .2); color: #38bdf8; }
html.dark .mp-dlrcat-badge--local { background: rgba(148, 163, 184, .2); color: #94a3b8; }

.mp-dlrcat-row-actions {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
}
.mp-dlrcat-progress-box {
  margin: 16px 18px; padding: 18px 20px;
  background: var(--mp-card, rgb(var(--mp-flaeche-rgb)));
  border: 1px solid rgba(11, 15, 25, .08);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
html.dark .mp-dlrcat-progress-box {
  background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .1);
}
.mp-dlrcat-progress-title {
  font-size: 14px; font-weight: 700; color: var(--mp-text, rgb(var(--mp-t1-0b0f19)));
  display: flex; align-items: center; gap: 8px;
}
.mp-dlrcat-progress-bar {
  width: 100%; height: 7px; background: rgba(11, 15, 25, .08);
  border-radius: 4px; overflow: hidden; position: relative;
}
html.dark .mp-dlrcat-progress-bar { background: rgba(255, 255, 255, .12); }
.mp-dlrcat-progress-fill {
  height: 100%; background: #0284c7; border-radius: 4px;
  transition: width 200ms ease;
}
.mp-dlrcat-progress-sub {
  font-size: 12px; color: rgba(11, 15, 25, .55); font-weight: 500;
}
html.dark .mp-dlrcat-progress-sub { color: rgba(226, 232, 240, .6); }

.mp-dlrcat-spin {
  animation: mpDlrcatSpin 900ms linear infinite;
}
@keyframes mpDlrcatSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── Katalog-Management-Leiste & Löschen (MP-20261003-029) ── */
.mp-dlrcat-katalog-mgmt {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 14px 18px; margin-top: 10px;
  border-top: 1px solid rgba(11, 15, 25, .07);
}
html.dark .mp-dlrcat-katalog-mgmt { border-color: rgba(255, 255, 255, .08); }

.mp-dlrcat-btn-delete {
  color: #dc2626 !important;
  border-color: rgba(220, 38, 38, 0.25) !important;
}
.mp-dlrcat-btn-delete:hover {
  background: rgba(220, 38, 38, 0.08) !important;
  border-color: rgba(220, 38, 38, 0.45) !important;
  color: #b91c1c !important;
}
html.dark .mp-dlrcat-btn-delete {
  color: #f87171 !important;
  border-color: rgba(248, 113, 113, 0.25) !important;
}
html.dark .mp-dlrcat-btn-delete:hover {
  background: rgba(248, 113, 113, 0.12) !important;
  border-color: rgba(248, 113, 113, 0.5) !important;
  color: #fca5a5 !important;
}

.mp-dlrcat-btn-danger {
  background: #dc2626 !important;
  color: #ffffff !important;
  border: 1px solid #b91c1c !important;
  border-radius: 12px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all .15s ease;
}
.mp-dlrcat-btn-danger:hover {
  background: #b91c1c !important;
}

/* ── Lösch-Bestätigung Overlay ───────────────────────────── */
.mp-dlrcat-confirm-ov {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(11, 15, 25, .62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: mpDlrcatFadeIn .15s ease-out;
}
@keyframes mpDlrcatFadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}
.mp-dlrcat-confirm-card {
  width: 100%; max-width: 480px;
  background: var(--mp-card, rgb(var(--mp-flaeche-rgb, 255, 255, 255)));
  border: 1px solid rgba(11, 15, 25, .1);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(11, 15, 25, .1), 0 24px 48px rgba(11, 15, 25, .2);
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 16px;
}
html.dark .mp-dlrcat-confirm-card {
  background: #141922;
  border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .4), 0 24px 48px rgba(0, 0, 0, .6);
}
.mp-dlrcat-confirm-header {
  display: flex; align-items: center; gap: 12px;
}
.mp-dlrcat-confirm-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(220, 38, 38, .12); color: #dc2626;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
html.dark .mp-dlrcat-confirm-icon {
  background: rgba(248, 113, 113, .16); color: #f87171;
}
.mp-dlrcat-confirm-title {
  font-size: 16px; font-weight: 800; color: var(--mp-text, rgb(var(--mp-t1-0b0f19)));
  margin: 0;
}
html.dark .mp-dlrcat-confirm-title { color: #f1f5f9; }
.mp-dlrcat-confirm-body {
  font-size: 13.5px; line-height: 1.5; color: rgba(11, 15, 25, .7);
  display: flex; flex-direction: column; gap: 10px;
}
html.dark .mp-dlrcat-confirm-body { color: rgba(226, 232, 240, .75); }
.mp-dlrcat-confirm-options {
  display: flex; flex-direction: column; gap: 8px; margin: 4px 0;
}
.mp-dlrcat-confirm-opt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid rgba(11, 15, 25, .08);
  background: rgba(11, 15, 25, .02);
  cursor: pointer; transition: all .15s ease;
}
html.dark .mp-dlrcat-confirm-opt {
  border-color: rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03);
}
.mp-dlrcat-confirm-opt:hover {
  background: rgba(11, 15, 25, .04);
  border-color: rgba(11, 15, 25, .15);
}
html.dark .mp-dlrcat-confirm-opt:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .15);
}
.mp-dlrcat-confirm-opt input[type="radio"] {
  margin-top: 3px; accent-color: #dc2626; cursor: pointer;
}
.mp-dlrcat-confirm-opt-text {
  display: flex; flex-direction: column; gap: 2px;
}
.mp-dlrcat-confirm-opt-title {
  font-size: 13px; font-weight: 700; color: var(--mp-text, rgb(var(--mp-t1-0b0f19)));
}
html.dark .mp-dlrcat-confirm-opt-title { color: #f1f5f9; }
.mp-dlrcat-confirm-opt-desc {
  font-size: 11.5px; color: rgba(11, 15, 25, .5);
}
html.dark .mp-dlrcat-confirm-opt-desc { color: rgba(226, 232, 240, .55); }
.mp-dlrcat-confirm-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  margin-top: 4px;
}

@media (max-width: 640px) {
  .mp-dlrcat-ov { padding: 0; align-items: flex-end; }
  .mp-dlrcat-sheet { max-width: none; width: 100%; max-height: 92dvh; border-radius: 16px 16px 0 0; }
  .mp-dlrcat-artikel-preis { min-width: 62px; font-size: 12.5px; }
  .mp-dlrcat-artikel-aktion .btn-primary,
  .mp-dlrcat-artikel-aktion .btn-secondary { padding-inline: 12px; }
  /* UX: auf dem Handy mehr Zeilen statt kleinerer Knoepfe (bewusster
     Kompromiss — 40px bleibt der App-Floor, siehe .mp-dlrcat-az-btn). */
  .mp-dlrcat-az { gap: 6px; }
}