/* =========================================================
   MALERPLUS • "Mein Katalog" – Segment + Panel + Karten + Sheet
   Scope: alles unter .leistungen-work-card / #meinKatalogPanel /
   #mkSheet. Greift NICHT in bestehende Katalog-Styles ein.
   ========================================================= */

/* ---- Segment-Switch ---- */
.mein-kat-segment {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin: 0 0 14px;
  border-radius: 14px;
  background: rgba(120,130,150,.10);
  border: 1px solid rgba(120,130,150,.16);
}
.mks-seg-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--mp-text-muted, rgb(var(--mp-t3-6b7280)));
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 11px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
/* MP-20260930-081 (Marcel 30.09., Screenshot: der Stern stand ÜBER „Mein Katalog"): Symbol und Wort
   stehen immer nebeneinander auf einer Linie, alle drei Reiter gleich hoch und mit Symbol.
   !important auf Richtung/Anzeige, weil eine App-weite Knopf-Regel das SVG sonst umbricht. */
.mks-seg-btn {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  line-height: 1.2;
}
.mks-seg-btn .mks-seg-ic { flex: 0 0 16px; width: 16px !important; height: 16px !important; margin: 0 !important; display: block; }
.mks-seg-btn > span { display: inline !important; }
.mks-seg-hint {
  margin: -6px 2px 14px;
}
/* MP-20260930-085: EINE Kleingedruckt-Stufe für Erklärzeile, Zählzeile und Meta-Zeile der Karten. */
.mks-seg-hint, .mk-count {
  font-size: 11px; font-weight: 600; line-height: 15.4px;
  color: rgb(71, 85, 105); opacity: .58;
}
html.dark .mks-seg-hint, html.dark .mk-count { color: rgb(168, 176, 187) !important; opacity: .58; }
.mks-seg-btn:hover { color: var(--mp-text, rgb(var(--mp-t1-1f2937))); }
.mks-seg-btn.is-active {
  background: var(--mp-surface, rgb(var(--mp-flaeche-rgb)));
  color: var(--mp-accent-text, #0b78b8);
  box-shadow: 0 1px 3px rgba(0,0,0,.10), inset 0 0 0 1.5px rgba(43,176,255,.55);
}

/* ---- Sichtbarkeits-Umschaltung ----
   MP-20260930-085: Kopf (Werkzeugzeile, Chips, Zählzeile) und Listen-Fläche sind für Systemkataloge und
   Mein Katalog EIN Bauteil (#mkStage). Es wechselt nur, welche Liste darunter steht. */
.leistungen-work-card[data-mp-katmode="user"] #leistungenList { display: none; }
.leistungen-work-card[data-mp-katmode="user"] #meinKatalogPanel { display: block; }
.leistungen-work-card[data-mp-katmode="user"] .mk-only-system { display: none !important; }
.mein-katalog-panel { display: none; padding: 0; }

/* ---- Werkzeugzeile (Katalog [nur System] · Suche · Aktionen · Neue Leistung) ---- */
:is(.leistungen-work-card, .mat-work-card) :is(.leistungen-work-toolbar, .mk-toolbar) {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin: 0 0 14px;
  padding: 0;
  border-top: 0;
  background: none;
}
.mk-toolbar .leistungen-work-katalog { flex: 0 0 220px; min-width: 0; }
.mk-toolbar .mk-findwrap { display: flex; align-items: center; gap: 10px; flex: 1 1 240px; min-width: 180px; }
.mk-toolbar .mk-findwrap .lw-searchbar { flex: 1 1 auto; min-width: 0; }
.mk-toolbar-btns { display: flex; gap: 10px; align-items: center; margin-left: auto; flex: 0 0 auto; }
.mk-toolbar-btns .btn-primary { width: auto; flex: 0 0 auto; }

/* ---- Zählzeile ---- */
.mk-countbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 20px; }
.mk-textbtn {
  appearance: none; border: 0; background: transparent; margin: 0; padding: 6px 4px; min-height: 32px;
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--mp-accent-text, #0b78b8);
  border-radius: 8px; cursor: pointer;
}
.mk-textbtn[hidden] { display: none; }
.mk-textbtn:hover { text-decoration: underline; }
.mk-textbtn:focus-visible { outline: 2px solid var(--mp-accent, #2bb0ff); outline-offset: 0; }

/* ---- Liste: EINE Fläche, darin Zeilen im Stil der Menü-Zeilen (Arbeitsfenster-Menü) ---- */
.mk-list { display: flex; flex-direction: column; gap: 4px; padding: 0; border: 0; background: none; }
.mk-card {
  position: relative; display: flex; gap: 14px; align-items: center;
  min-height: 55.3px; padding: 9px 12px; box-sizing: border-box;
  border: 0; border-radius: 12px; background: transparent; box-shadow: none;
  cursor: pointer; transition: background .14s ease;
}
@media (hover: hover) { .mk-card:hover { background: var(--mp-surface-hover, rgba(120,130,150,.10)); } }
.mk-card.is-inactive .mk-card-main, .mk-card.is-inactive .mk-card-price { opacity: .62; }
.mk-card-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mk-card-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mk-card .mk-card-name {
  appearance: none; border: 0; background: transparent; box-shadow: none; margin: 0; padding: 0; text-align: left; cursor: pointer;
  display: block; height: auto; min-height: 0; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: inherit; font-size: 13.5px; font-weight: 800; line-height: 18.9px; letter-spacing: 0.135px;
  color: var(--mp-text, rgb(var(--mp-t1-1f2937)));
}
html body :is(#view-leistungen, #view-material) :is(.leistungen-work-card, .mat-work-card) .mk-head { padding: 0 !important; border-bottom: 0 !important; margin-bottom: 0 !important; min-height: 0 !important; }
html body :is(#view-leistungen, #view-material) :is(.leistungen-work-card, .mat-work-card).mk-compact .mk-head { padding: 0 !important; }
html body :is(#view-leistungen, #view-material) :is(.leistungen-work-card, .mat-work-card) .mk-head .leistungen-work-header-text { flex: 1 1 auto; min-width: 0; }
@media (min-width: 641px) { html body :is(#view-leistungen, #view-material) :is(.leistungen-work-card, .mat-work-card) .mk-head { flex-direction: row !important; align-items: center !important; } }
/* Klassenname bewusst nicht "...-card-title": mp-card-system.css setzt auf jedes [class*="-card-title"] 15 px / inline-flex !important (Ursache, dass die Zeile auf 94 px wuchs). */
.mk-card .mk-card-name:focus-visible { outline: 2px solid var(--mp-accent, #2bb0ff); outline-offset: 2px; border-radius: 6px; }
.mk-fav { display: inline-flex; flex: 0 0 auto; color: var(--mp-warning, #d97706); }
.mk-tags { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.mk-tag {
  font-size: 10.5px; font-weight: 700; line-height: 1.4; padding: 1px 6px; border-radius: 6px;
  border: 0.8px solid rgba(11,15,25,.14); color: var(--mp-text, rgb(var(--mp-t1-1f2937))); opacity: .6; white-space: nowrap;
}
.mk-card-meta { font-size: 11px; font-weight: 600; line-height: 15.4px; color: rgb(71, 85, 105); opacity: .58; }
.mk-card-desc {
  font-size: 11.5px; font-weight: 600; line-height: 1.4; color: rgb(12, 21, 38); opacity: .6;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.mk-card-side { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.mk-card-price { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 120px; width: 120px; text-align: right; }
.mk-price {
  font-size: 13.5px; font-weight: 800; line-height: 18.9px; letter-spacing: 0.135px;
  color: var(--mp-text, rgb(var(--mp-t1-1f2937))); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mk-unit { font-size: 11.5px; font-weight: 600; line-height: 1.4; color: rgb(12, 21, 38); opacity: .6; white-space: nowrap; }
.mk-gebinde-preis {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  color: #0284c7;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.mk-card-actions { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; }
.mk-card .mk-main-act { width: auto; flex: 0 0 auto; }
.mk-card .mk-main-act.is-done { opacity: .75; cursor: default; }
.mk-card .mk-main-act svg { flex: 0 0 auto; }
.mk-more-wrap { display: flex; justify-content: center; padding: 10px 0 4px; }

html.dark .mk-card-meta { color: rgb(168, 176, 187); }
html.dark .mk-card-desc, html.dark .mk-unit { color: rgb(168, 176, 187); }
html.dark .mk-gebinde-preis { color: #38bdf8; }
html.dark .mk-tag { border-color: rgba(255,255,255,.18); }
html.dark .mk-act { color: rgb(244, 246, 248); }

/* ---- Zustände: leer / keine Treffer / Fehler (eine Bauart für beide Kataloge) ---- */
.mk-state { display: flex; gap: 12px; align-items: flex-start; padding: 18px 12px; cursor: default; }
.mk-state-ic {
  flex: 0 0 24px; width: 24px; height: 24px; box-sizing: border-box; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--mp-text-secondary, rgb(71, 85, 105));
}
.mk-state-ic svg { width: 20px; height: 20px; }
.mk-state-tx { min-width: 0; }
.mk-state-title { font-size: 16px; font-weight: 700; line-height: 22.4px; letter-spacing: 0.16px; color: var(--mp-text, rgb(var(--mp-t1-1f2937))); }
.mk-state-text { margin-top: 2px; max-width: 520px; font-size: 11.5px; font-weight: 600; line-height: 1.45; color: rgb(12, 21, 38); opacity: .6; }
html.dark .mk-state-text { color: rgb(168, 176, 187); }
.mk-state-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.mk-skel-wrap { display: flex; flex-direction: column; gap: 4px; }
.mk-card.mk-skel { cursor: default; pointer-events: none; }
.mk-skel-bar { height: 10px; border-radius: 6px; background: rgba(120,130,150,.18); margin: 4px 0; }
.mk-skel-w1 { width: 46%; } .mk-skel-w2 { width: 30%; } .mk-skel-w3 { width: 88px; }

/* ---- Handy: Text oben, darunter Fußzeile (Preis links, Knöpfe rechts); Touch-Ziele mindestens 44 px ---- */
@media (max-width: 680px) {
  .mk-toolbar .leistungen-work-katalog { flex: 1 1 calc(50% - 6px); }
  .mk-toolbar .mk-findwrap { flex: 1 1 100%; }
  .mk-toolbar-btns { flex: 1 1 100%; justify-content: flex-end; margin-left: 0; }
}
@media (max-width: 1023px) {
  .mk-card { flex-wrap: wrap; gap: 8px; align-items: flex-start; }
  .mk-card-main { flex: 1 1 100%; }
  .mk-card .mk-card-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .mk-card-top { flex-wrap: wrap; }
  .mk-card-side { flex: 1 1 100%; justify-content: space-between; }
  .mk-card-price { align-items: flex-start; text-align: left; min-width: 0; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  /* MP-20261001-008 K4: schmale Hauptspalte (ca. 330 px bei 820, 520 px bei 1024). Zeile als Raster:
     oben Titel | Preis, unten Meta | Knoepfe. Die Beschreibung entfaellt hier (sie steht im Editor), die Zeile bleibt ca. 80 px hoch. */
  .mk-main .mk-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top price" "meta actions"; column-gap: 12px; row-gap: 2px; align-items: center; min-height: 0; padding: 8px 12px; }
  .mk-main .mk-card-main, .mk-main .mk-card-side { display: contents; }
  .mk-main .mk-card-top { grid-area: top; min-width: 0; flex-wrap: nowrap; }
  .mk-main .mk-card .mk-card-name { white-space: nowrap; display: block; -webkit-line-clamp: unset; }
  .mk-main .mk-card-price { grid-area: price; flex: none; width: auto; flex-direction: row; align-items: baseline; gap: 6px; justify-self: end; text-align: right; }
  .mk-main .mk-card-meta { grid-area: meta; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mk-main .mk-card-desc { display: none; }
  .mk-main .mk-card-actions { grid-area: actions; justify-self: end; }
}
/* Werkzeugzeile ab 1024 px immer EINE Zeile (Katalog-Wähler | Suche | Aktionen | Neue Leistung) */
@media (min-width: 1024px) {
  .leistungen-work-card .leistungen-work-toolbar.mk-toolbar { flex-wrap: nowrap; }
  .mk-toolbar .lw-searchbar { flex: 1 1 0; min-width: 0; }
  .mk-toolbar .leistungen-work-katalog { flex: 0 0 210px; }
}
@media (pointer: coarse) {
  .mk-card .mk-main-act, .mk-card .mk-act { min-height: 44px; }
  .mk-card .mk-act { width: 44px; }
  .mk-toolbar-btns .btn-primary, .mk-toolbar .btn-primary.mk-add, .mk-state-actions button, .mk-load-more { min-height: 44px; }
  .mk-textbtn { min-height: 44px; }
  .mks-seg-btn { min-height: 44px; }
}

/* ---- Edit-Sheet: eigenes responsives Grid (legacy .full greift hier nicht) ---- */
#mkSheet .mk-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; align-items: start; }
#mkSheet .mk-form > div { min-width: 0; }
#mkSheet .mk-form > .full { grid-column: 1 / -1; }
#mkSheet .mk-form label { display: block; font-size: 13px; font-weight: 600; margin: 0 0 6px; }
#mkSheet .mk-form input,
#mkSheet .mk-form select,
#mkSheet .mk-form textarea { width: 100%; box-sizing: border-box; }
#mkSheet .mk-form textarea { resize: vertical; }
#mkSheet .mk-calc-cell { align-self: center; }
#mkSheet .mk-mat-opt { font-weight: 500; color: var(--mp-text-muted, rgb(var(--mp-t3-6b7280))); }
@media (max-width: 680px) {
  #mkSheet .mk-form { grid-template-columns: 1fr; gap: 12px; }
  #mkSheet .mk-form > .full { grid-column: auto; }
  #mkSheet .mk-mat-head { flex-wrap: wrap; }
  #mkSheet .mk-mat-add { width: 100%; }
}

/* ---- Edit-Sheet Form-Spezifika ---- */
#mkSheet .mk-form .mk-err { display: block; color: #ef4444; font-size: 12px; margin-top: 4px; min-height: 0; }
#mkSheet .mk-form .has-err { border-color: #ef4444 !important; }
#mkSheet .mk-active-row { margin-top: 2px; }
#mkSheet .mk-active-label { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
#mkSheet .mk-active-label input { width: 18px; height: 18px; }

/* ---- Action-Toast (kopiert + Jetzt bearbeiten) ---- */
.mk-action-toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 16px); opacity: 0; z-index: 9999;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 14px 12px 18px; border-radius: 14px;
  background: #1f2937; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.30);
  font-size: 14px; max-width: calc(100vw - 32px);
  transition: opacity .2s ease, transform .2s ease;
}
.mk-action-toast.show { opacity: 1; transform: translate(-50%, 0); }
.mk-action-toast .mk-at-btn {
  appearance: none; border: 0; background: var(--mp-blue, #2bb0ff); color: #fff;
  font: inherit; font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: 10px; cursor: pointer;
  white-space: nowrap;
}
.mk-action-toast .mk-at-btn:active { transform: scale(.95); }

/* ---- Auto-Kalkulation (Lohn + Material aus Settings) ---- */
#mkSheet .mk-calc-cell { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
#mkSheet .mk-calc-label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; margin: 0; }
#mkSheet .mk-calc-label input { width: 18px; height: 18px; }
#mkSheet .mk-calc-hint { font-size: 12px; color: var(--mp-text-muted, rgb(var(--mp-t3-6b7280))); min-height: 14px; }
#mkSheet #mkfPreis.is-auto { background: rgba(43,176,255,.06); color: var(--mp-text-muted, rgb(var(--mp-t3-6b7280))); }

/* ---- Material-Verknüpfung ---- */
#mkSheet .mk-material-block { border: 1px solid rgba(120,130,150,.16); border-radius: 14px; padding: 12px 14px; background: rgba(120,130,150,.03); }
#mkSheet .mk-mat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
#mkSheet .mk-mat-title { font-weight: 650; font-size: 14px; }
#mkSheet .mk-mat-add { font-size: 13px; padding: 7px 12px; }
#mkSheet .mk-mat-list { display: flex; flex-direction: column; gap: 8px; }
#mkSheet .mk-mat-empty { font-size: 13px; color: var(--mp-text-muted, rgb(var(--mp-t3-6b7280))); padding: 4px 2px; }
#mkSheet .mk-mat-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; border-radius: 10px; background: var(--mp-surface, rgb(var(--mp-flaeche-rgb)));
  border: 1px solid rgba(120,130,150,.14);
}
#mkSheet .mk-mat-name { font-weight: 600; font-size: 13.5px; flex: 1 1 160px; min-width: 0; }
#mkSheet .mk-mat-brand { font-weight: 500; color: var(--mp-text-muted, rgb(var(--mp-t3-6b7280))); }
#mkSheet .mk-mat-field { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mp-text-muted, rgb(var(--mp-t3-6b7280))); }
#mkSheet .mk-mat-field input { width: 76px; padding: 6px 8px; }
#mkSheet .mk-mat-ek { font-size: 12.5px; color: var(--mp-text-muted, rgb(var(--mp-t3-6b7280))); white-space: nowrap; }
#mkSheet .mk-mat-del {
  appearance: none; border: 1px solid rgba(239,68,68,.30); background: rgba(239,68,68,.06);
  color: #ef4444; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
#mkSheet .mk-mat-del:hover { background: rgba(239,68,68,.14); }

/* =========================================================
   LEISTUNGS-SHEET — schlanker, premium, weniger Input.
   Gilt für ALLE Kataloge (System + Mein Katalog). Ausgeblendete
   Felder bleiben im DOM → vorhandene Werte gehen nicht verloren,
   nur die Eingabe entfällt (Defaults: Gebinde=Auto, EUR, Key=auto).
   ========================================================= */

/* KI-Kontext-Zeile (Neubau / Belegung) ausblenden */
#leistungSheet .mp-rt-ai-kontext-row { display: none !important; }

/* Preis-Aufschlüsselung unter dem Preisfeld (Lohn + Material = Gesamt) */
#lPreisBreakdown.mp-preis-breakdown {
  margin-top: 7px; display: flex; flex-direction: column; gap: 3px;
  font-size: 12.5px; color: var(--mp-text-muted, rgb(var(--mp-t3-6b7280)));
  padding: 8px 11px; border-radius: 10px;
  background: rgba(43,176,255,.06); border: 1px solid rgba(43,176,255,.16);
}
#lPreisBreakdown .mp-pb-line b { color: var(--mp-text, rgb(var(--mp-t1-1f2937))); }
#lPreisBreakdown .mp-pb-note { color: var(--mp-orange, #ff8a3d); font-size: 11.5px; line-height: 1.35; }

/* =========================================================
   BAUSTEINE (2026-07-29) — drittes Segment im Leistungskatalog:
   gespeicherte Positions-/Titelblock-Vorlagen aus dem Editor,
   hier zentral bearbeitbar (bausteine-katalog.js).
   Gleiche Formsprache wie "Mein Katalog" (mk-*), Scope bk-*.
   ========================================================= */

/* ---- Sichtbarkeits-Umschaltung (Muster wie data-mp-katmode="user") ---- */
.leistungen-work-card[data-mp-katmode="bausteine"] .leistungen-work-toolbar,
.leistungen-work-card[data-mp-katmode="bausteine"] .leistungen-work-body,
.leistungen-work-card[data-mp-katmode="bausteine"] .leistungen-work-actions {
  display: none !important;
}
.leistungen-work-card[data-mp-katmode="bausteine"] .mk-stage { display: none !important; }
.leistungen-work-card[data-mp-katmode="bausteine"] #bausteineKatalogPanel { display: block; }
.bausteine-katalog-panel { display: none; padding: 0 0 6px; }

/* ---- Toolbar ---- */
.bk-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 14px; }
.bk-search {
  flex: 1 1 240px; min-width: 200px;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 12px;
  background: var(--mp-surface, rgb(var(--mp-flaeche-rgb))); border: 1px solid rgba(120,130,150,.18);
  color: var(--mp-text-muted, rgb(var(--mp-t3-6b7280)));
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bk-search:focus-within { border-color: rgba(43,176,255,.55); box-shadow: 0 0 0 3px rgba(43,176,255,.14); }
.bk-search svg { flex: 0 0 auto; }
.bk-search input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 14px; color: var(--mp-text, rgb(var(--mp-t1-1f2937)));
}
.bk-hint { flex: 1 1 100%; font-size: 12.5px; color: var(--mp-text-muted, rgb(var(--mp-t3-6b7280))); }

/* ---- Karten ---- */
.bk-list { display: flex; flex-direction: column; gap: 10px; }
.bk-card {
  display: flex; gap: 14px; align-items: stretch;
  padding: 14px 16px; border-radius: 16px;
  background: var(--mp-surface, rgb(var(--mp-flaeche-rgb))); border: 1px solid rgba(120,130,150,.16);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bk-card:hover { border-color: rgba(43,176,255,.45); box-shadow: 0 3px 12px rgba(43,176,255,.10); }
.bk-card-main { flex: 1 1 auto; min-width: 0; }
.bk-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bk-card-title { font-weight: 650; font-size: 15px; color: var(--mp-text, rgb(var(--mp-t1-1f2937))); }
.bk-card-desc {
  font-size: 13px; color: var(--mp-text-muted, rgb(var(--mp-t3-6b7280))); margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bk-badge { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; line-height: 1.5; white-space: nowrap; }
.bk-badge-pos { background: rgba(120,130,150,.14); color: var(--mp-text-muted, rgb(var(--mp-t3-6b7280))); }
.bk-badge-block { background: rgba(43,176,255,.10); color: var(--mp-blue, #2bb0ff); border: 1px solid rgba(43,176,255,.24); }

.bk-card-side {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between;
  gap: 10px; flex: 0 0 auto;
}
.bk-price { font-weight: 700; font-size: 15px; color: var(--mp-text, rgb(var(--mp-t1-1f2937))); text-align: right; }
.bk-unit { display: block; font-weight: 500; font-size: 11px; color: var(--mp-text-muted, rgb(var(--mp-t3-6b7280))); }
.bk-card-actions { display: flex; gap: 4px; }
.bk-act {
  appearance: none; border: 1px solid rgba(120,130,150,.18); background: var(--mp-surface, rgb(var(--mp-flaeche-rgb)));
  color: var(--mp-text-muted, rgb(var(--mp-t3-6b7280)));
  width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s ease, border-color .12s ease, color .12s ease, transform .08s ease;
}
.bk-act:hover { background: rgba(43,176,255,.08); border-color: rgba(43,176,255,.4); color: var(--mp-blue, #2bb0ff); }
.bk-act:active { transform: scale(.94); }
.bk-act-del:hover { background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.45); color: #ef4444; }

.bk-noresult { padding: 28px 8px; text-align: center; color: var(--mp-text-muted, rgb(var(--mp-t3-6b7280))); font-size: 14px; }

/* ---- Empty State ---- */
.bk-empty { padding: 8px; }
.bk-empty-inner {
  text-align: center; padding: 44px 20px; border-radius: 18px;
  border: 1px dashed rgba(120,130,150,.30); background: rgba(120,130,150,.04);
}
.bk-empty-icon { color: var(--mp-text-muted, rgb(var(--mp-t3-6b7280))); }
.bk-empty-title { font-weight: 700; font-size: 17px; margin-top: 10px; color: var(--mp-text, rgb(var(--mp-t1-1f2937))); }
.bk-empty-sub { font-size: 14px; color: var(--mp-text-muted, rgb(var(--mp-t3-6b7280))); margin-top: 6px; max-width: 460px; margin-inline: auto; }

/* ---- Bearbeiten-Sheet (#bkSheet, Chrome kommt aus mp-modal-standard.css) ---- */
#bkSheet .bk-form { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px 18px; align-items: start; }
#bkSheet .bk-form > div { min-width: 0; }
#bkSheet .bk-form > .full { grid-column: 1 / -1; }
#bkSheet .bk-form label { display: block; font-size: 13px; font-weight: 600; margin: 0 0 6px; }
#bkSheet .bk-form input,
#bkSheet .bk-form textarea { width: 100%; box-sizing: border-box; }
#bkSheet .bk-form textarea { resize: vertical; }
#bkSheet .bk-err { display: block; color: #ef4444; font-size: 12px; margin-top: 4px; }
/* Typ-Umschaltung: Einzelposition zeigt Einheit/Preis/Menge, Titelblock die Positionsliste */
#bkSheet[data-bk-type="block"] .bk-single-only { display: none; }
#bkSheet[data-bk-type="single"] .bk-block-only { display: none; }

/* Positionsliste im Titelblock */
#bkSheet #bkfPosWrap { border: 1px solid rgba(120,130,150,.16); border-radius: 14px; padding: 12px 14px; background: rgba(120,130,150,.03); }
#bkSheet .bkf-pos-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-weight: 650; font-size: 14px; }
#bkSheet .bkf-pos-count { font-weight: 500; font-size: 12.5px; color: var(--mp-text-muted, rgb(var(--mp-t3-6b7280))); }
#bkSheet .bkf-pos-cols,
#bkSheet .bkf-pos-row {
  display: grid; grid-template-columns: minmax(0, 2.2fr) 70px 76px 96px 32px;
  gap: 8px; align-items: center;
}
#bkSheet .bkf-pos-cols { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--mp-text-muted, rgb(var(--mp-t3-6b7280))); margin-bottom: 6px; padding: 0 2px; }
#bkSheet .bkf-pos-row { padding: 6px 2px; border-top: 1px solid rgba(120,130,150,.12); }
#bkSheet .bkf-pos-row input { width: 100%; box-sizing: border-box; padding: 7px 9px; font-size: 13px; }
#bkSheet .bkf-pos-del {
  appearance: none; border: 1px solid rgba(239,68,68,.30); background: rgba(239,68,68,.06);
  color: #ef4444; width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
#bkSheet .bkf-pos-del:hover { background: rgba(239,68,68,.14); }
#bkSheet .bkf-pos-empty { font-size: 13px; color: var(--mp-text-muted, rgb(var(--mp-t3-6b7280))); padding: 6px 2px; }

@media (max-width: 680px) {
  #bkSheet .bk-form { grid-template-columns: 1fr; gap: 12px; }
  #bkSheet .bk-form > .full { grid-column: auto; }
  #bkSheet .bkf-pos-cols { display: none; }
  #bkSheet .bkf-pos-row { grid-template-columns: 1fr 1fr; }
  #bkSheet .bkf-pos-row .bkf-pos-in[data-field="titel"] { grid-column: 1 / -1; }
}

/* Richtext-Formatierungsleiste (H1/Liste/Absatz …) ausblenden — nur im
   Leistungs-Sheet; Richtext in KVA/Rechnung-Positionen bleibt erhalten. */
#leistungSheet .mp-rt-toolbar { display: none !important; }

/* ---- Material-Karte: technische Felder ausblenden ---- */
/* Key, Basis, Währung, Gebinde-Modus + -größen, Chipline raus */
#leistungSheet .mp-mat-grid > div:has(input[data-k="key"]),
#leistungSheet .mp-mat-grid > div:has(select[data-k="currency"]),
#leistungSheet .mp-mat-grid-3 > div:nth-child(3) { display: none !important; }
#leistungSheet .mp-mat-grid:has(select[data-k="mode"]) { display: none !important; }
#leistungSheet .mp-mat-chipline { display: none !important; }
/* Hilfetexte/ⓘ in der Karte reduzieren (weniger „Input-Lärm") */
#leistungSheet .mp-mat-row .mp-field-help,
#leistungSheet .mp-mat-row .mp-info { display: none !important; }

/* verbleibende Grids sauber umbrechen */
#leistungSheet .mp-mat-grid:has(input[data-k="name"]),
#leistungSheet .mp-mat-grid:has(input[data-k="purchasePrice"]) { grid-template-columns: 1fr !important; }
#leistungSheet .mp-mat-grid-3 { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }


#leistungSheet .mp-kat-manage-btn {
  padding: 3px 9px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  border-radius: 8px !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #0284c7 !important;
  background: rgba(2, 132, 199, 0.08) !important;
  border: 1px solid rgba(2, 132, 199, 0.22) !important;
  cursor: pointer;
  transition: all 0.15s ease;
}
#leistungSheet .mp-kat-manage-btn:hover {
  background: rgba(2, 132, 199, 0.16) !important;
  border-color: rgba(2, 132, 199, 0.35) !important;
}

/* ---- Preis-Breakdown Banner ---- */
#leistungSheet #lPreisBreakdownWrap {
  margin-top: -4px;
  margin-bottom: 4px;
}
#leistungSheet #lPreisBreakdown {
  background: rgba(2, 132, 199, 0.07);
  border: 1px solid rgba(2, 132, 199, 0.25);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#leistungSheet .mp-pb-line {
  font-size: 13px;
  color: #0f172a;
}
#leistungSheet .mp-pb-note {
  font-size: 11px;
  color: #ea580c;
  font-weight: 600;
}

/* ---- Material-Sektion (PRO): Hochwertiger Bereich & echte Karten ---- */
#leistungSheet .leistung-material {
  margin-top: 20px;
  padding: 16px;
  background: rgba(241, 245, 249, 0.65);
  border: 1px solid rgba(203, 213, 225, 0.7);
  border-radius: 18px;
}
#leistungSheet .mp-mat-sec-header {
  margin-bottom: 14px;
}
#leistungSheet .mp-mat-sec-header .mp-section-title {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 6px;
}
#leistungSheet .mp-mat-sec-header .mp-section-subtitle {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}

#leistungSheet .mp-mat-row {
  background: #ffffff !important;
  border: 1px solid rgba(203, 213, 225, 0.85) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
#leistungSheet .mp-mat-row:hover {
  border-color: rgba(148, 163, 184, 0.9) !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08) !important;
}
#leistungSheet .mp-mat-row + .mp-mat-row {
  margin-top: 12px;
}
#leistungSheet .mp-mat-row .mp-mat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(241, 245, 249, 1);
  margin-bottom: 8px;
}
#leistungSheet .mp-mat-row .mp-mat-top > div:first-child {
  font-size: 13px;
  font-weight: 800;
  color: #1e293b;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(241, 245, 249, 0.8);
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid rgba(226, 232, 240, 0.8);
}
#leistungSheet .mp-mat-row label {
  font-weight: 600 !important;
  opacity: 1 !important;
  color: var(--mp-text-muted, rgb(var(--mp-t3-6b7280)));
}
#leistungSheet .mp-mat-row input,
#leistungSheet .mp-mat-row select {
  background: #ffffff !important;
  border-radius: 10px !important;
  border: 1px solid rgba(203, 213, 225, 0.8) !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
}
#leistungSheet .mp-mat-row input:focus,
#leistungSheet .mp-mat-row select:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
  outline: none;
}
#leistungSheet .mp-mat-row [data-act="del"] {
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.2);
  cursor: pointer;
  transition: all 0.15s ease;
}
#leistungSheet .mp-mat-row [data-act="del"]:hover {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.35);
}
#leistungSheet .mp-mat-grid,
#leistungSheet .mp-mat-grid-3 { margin-top: 10px !important; }

#leistungSheet .mp-row-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  align-items: center;
}
#leistungSheet .mp-btn-add-mat {
  padding: 8px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  color: #334155 !important;
  cursor: pointer;
  transition: all 0.15s ease;
}
#leistungSheet .mp-btn-add-mat:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
}
#leistungSheet .mp-btn-cat-mat {
  padding: 8px 16px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #0284c7, #0ea5e9) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25) !important;
  cursor: pointer;
  transition: all 0.15s ease;
}
#leistungSheet .mp-btn-cat-mat:hover {
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35) !important;
  transform: translateY(-1px);
}

/* Mobil: Material-Felder einspaltig */
@media (max-width: 680px) {
  #leistungSheet .mp-mat-grid-3 { grid-template-columns: 1fr !important; }
}

html.dark #leistungSheet .leistung-material {
  background: rgba(15, 23, 42, 0.5) !important;
  border-color: rgba(51, 65, 85, 0.7) !important;
}
html.dark #leistungSheet .mp-mat-sec-header .mp-section-title {
  color: #f1f5f9 !important;
}
html.dark #leistungSheet .mp-mat-sec-header .mp-section-subtitle {
  color: #94a3b8 !important;
}
html.dark #leistungSheet .mp-mat-row {
  background: rgba(30, 41, 59, 0.85) !important;
  border-color: rgba(51, 65, 85, 0.8) !important;
}
html.dark #leistungSheet .mp-mat-row .mp-mat-top > div:first-child {
  background: rgba(15, 23, 42, 0.6) !important;
  border-color: rgba(51, 65, 85, 0.6) !important;
  color: #f1f5f9 !important;
}
html.dark #leistungSheet .mp-mat-row input,
html.dark #leistungSheet .mp-mat-row select {
  background: rgba(15, 23, 42, 0.7) !important;
  border-color: rgba(51, 65, 85, 0.7) !important;
  color: #f8fafc !important;
}

/* ---- Dark Mode (Token-getrieben, defensiv) ----
   Folgt dem APP-Theme, nicht dem Betriebssystem (05.08.2026,
   MP-20260805-005). Hier stand `@media (prefers-color-scheme: dark)` —
   dieselbe Falle wie in `mp-meine-zeit-premium.css`: die Regeln griffen,
   sobald das Betriebssystem dunkel steht, auch wenn die App hell läuft.
   Gesetzt wird das Theme von `core/dark-mode.js` über die Klasse `dark`
   auf <html> (Dunkel UND Graphit). */
html.dark .mk-card { background: transparent; border-color: transparent; }
/* MP-20260930-081 Runde 2 (Lena: bei 390/360 px lief die Leiste 430 px breit über den Rand,
   „Bausteine" nicht antippbar): bis 480 px drei gleich breite Reiter über die volle Breite,
   kleinere Schrift und Symbole, nie waagerecht scrollen. Dunkelmodus: aktiver Reiter in Akzentfarbe. */
@media (max-width: 480px) {
  .mein-kat-segment { display: flex; width: 100%; box-sizing: border-box; gap: 3px; padding: 3px; }
  .mks-seg-btn { flex: 1 1 0 !important; min-width: 0; padding: 6px 4px; font-size: 12.5px; gap: 4px; min-height: 38px; white-space: nowrap; }
  .mks-seg-btn .mks-seg-ic { flex-basis: 14px; width: 14px !important; height: 14px !important; }
  .mks-seg-btn > span { overflow: hidden; text-overflow: ellipsis; }
}
html.dark .mks-seg-btn.is-active { background: rgba(255,255,255,.10); color: var(--mp-accent-text, #7cc8ff) !important; }
html.dark .mk-act { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }

/* ---- MP-20260906-021: Feld, das die Speicherprüfung beanstandet ----
   Kundenmeldung 06.09.2026: "Speichern fehlgeschlagen: Validierung
   fehlgeschlagen." ohne Angabe des Feldes. `leistungen.js` setzt jetzt
   `.mp-feld-fehler` auf das betroffene Eingabefeld und springt dorthin.
   `!important` steht hier bewusst: die Rahmenfarbe der Sheet-Felder wird an
   mehreren Stellen gesetzt, und eine Fehlermarkierung, die verliert, ist
   schlimmer als keine. Rot-Ton wie `#mkSheet .mk-form .has-err` (Zeile 155),
   damit beide Editoren dieselbe Sprache sprechen. */
#leistungSheet .mp-feld-fehler {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .14) !important;
}
html.dark #leistungSheet .mp-feld-fehler {
  border-color: #f87171 !important;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, .18) !important;
}

/* =========================================================
   KATEGORIEN-VERWALTUNG & EINSTELLUNGEN (MODAL & GEAR BUTTON)
   - Z-Index Schichtung: öffnet garantiert VOR dem Leistungs-Sheet
   - Dezenter Zahnrad-Button in der Label-Zeile
   - Veredelte Modal-Optik (Typografie, Abstände, Karten, Hover)
   ========================================================= */

/* Einstellungs-Button im Footer neben der Mülltonne */
#leistungSheet #btnKatManage.btn-gear,
#leistungSheet #btnKatManage.btn-trash,
.mp-kat-gear-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  color: #64748b !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color .18s ease, background .18s ease, transform .2s ease !important;
}
#leistungSheet #btnKatManage.btn-gear svg,
#leistungSheet #btnKatManage.btn-trash svg,
.mp-kat-gear-btn svg {
  width: 17px !important;
  height: 17px !important;
  transition: transform .25s ease, color .18s ease !important;
}
#leistungSheet #btnKatManage:hover,
.mp-kat-gear-btn:hover {
  color: #0284c7 !important;
  background: rgba(2, 132, 199, 0.08) !important;
}
#leistungSheet #btnKatManage:hover svg,
.mp-kat-gear-btn:hover svg {
  color: #0284c7 !important;
  transform: rotate(45deg) scale(1.15) !important;
}
#leistungSheet #btnKatManage:active,
.mp-kat-gear-btn:active {
  transform: scale(0.92) !important;
}
html.dark #leistungSheet #btnKatManage,
html.dark .mp-kat-gear-btn {
  color: #94a3b8 !important;
}
html.dark #leistungSheet #btnKatManage:hover,
html.dark .mp-kat-gear-btn:hover {
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.12) !important;
}
html.dark #leistungSheet #btnKatManage:hover svg,
html.dark .mp-kat-gear-btn:hover svg {
  color: #38bdf8 !important;
}

/* Z-Index Schutz: Kat-Manage-Sheet liegt zwingend VOR #leistungSheetOverlay (9999) */
#katManageSheetOverlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10050 !important;
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  display: none;
  justify-content: center;
  align-items: center;
}
#katManageSheetOverlay.show,
#katManageSheetOverlay.open {
  display: flex !important;
}
#katManageSheet {
  position: relative !important;
  z-index: 10051 !important;
  width: 95% !important;
  max-width: 660px !important;
  max-height: 90vh !important;
  background: var(--mp-card, #ffffff) !important;
  border-radius: 20px !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
}
#sheet-layer:has(#katManageSheetOverlay.show),
#sheet-layer:has(#katManageSheetOverlay.open) {
  z-index: 10040 !important;
}

/* Modal-Header */
#katManageSheet .mp-sheet-header {
  padding: 20px 24px 16px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  background: #ffffff !important;
}
#katManageSheet .mp-sheet-header h3 {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}
#katManageSheet .mp-sheet-header .muted {
  font-size: 13px !important;
  color: #64748b !important;
  margin: 4px 0 0 !important;
}
#katManageSheet .mp-sheet-x {
  background: #f1f5f9 !important;
  border: none !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748b !important;
  cursor: pointer !important;
  font-size: 14px !important;
  transition: background .15s ease, color .15s ease;
}
#katManageSheet .mp-sheet-x:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Modal-Body */
#katManageSheet .mp-sheet-body {
  padding: 20px 24px !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}
#katManageSheet .kat-grid {
  display: flex !important;
  align-items: flex-end !important;
  gap: 12px !important;
}
#katManageSheet .kat-grid > div:first-child {
  flex: 1 !important;
}
#katManageSheet .kat-grid label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: #64748b !important;
  margin-bottom: 6px !important;
}
#katManageSheet #katManageSelect {
  width: 100% !important;
  height: 44px !important;
  border-radius: 12px !important;
  border: 1px solid #cbd5e1 !important;
  padding: 0 14px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  background: #ffffff !important;
}
#katManageSheet #katNewToggle {
  height: 44px !important;
  padding: 0 18px !important;
  border-radius: 12px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

/* Bearbeitungs-Card */
#katManageSheet .kat-card {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}
#katManageSheet .kat-row {
  display: grid !important;
  grid-template-columns: 1fr 140px !important;
  gap: 14px !important;
  align-items: end !important;
}
#katManageSheet .kat-col label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  margin-bottom: 6px !important;
}
#katManageSheet #katManageName,
#katManageSheet #katNewName {
  width: 100% !important;
  height: 42px !important;
  border-radius: 10px !important;
  border: 1px solid #cbd5e1 !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  background: #ffffff !important;
  color: #0f172a !important;
}
#katManageSheet #katManageColor,
#katManageSheet #katNewColor {
  width: 100% !important;
  height: 42px !important;
  border-radius: 10px !important;
  border: 1px solid #cbd5e1 !important;
  padding: 4px 6px !important;
  cursor: pointer !important;
  background: #ffffff !important;
}

/* Unterkategorien */
#katManageSheet .kat-sub {
  border-top: 1px solid #e2e8f0 !important;
  padding-top: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
#katManageSheet .kat-sub-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
#katManageSheet .kat-sub-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
}
#katManageSheet .kat-sub-add {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 !important;
  max-width: 360px !important;
}
#katManageSheet #katSubNewName {
  flex: 1 !important;
  height: 36px !important;
  border-radius: 8px !important;
  border: 1px solid #cbd5e1 !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  background: #ffffff !important;
}
#katManageSheet #katSubAddBtn {
  height: 36px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}
#katManageSheet .kat-sub-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  max-height: 220px !important;
  overflow-y: auto !important;
}
#katManageSheet .kat-sub-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 9px 14px !important;
  transition: border-color .15s ease, background .15s ease;
}
#katManageSheet .kat-sub-item:hover {
  border-color: #cbd5e1 !important;
  background: #fafbfc !important;
}
#katManageSheet .kat-sub-item .name {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
}
#katManageSheet .kat-sub-item .del {
  appearance: none !important;
  background: rgba(239, 68, 68, 0.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
  color: #ef4444 !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 14px !important;
  transition: all .15s ease !important;
}
#katManageSheet .kat-sub-item .del:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
  transform: scale(1.06) !important;
}

/* Danger Zone */
#katManageSheet .kat-danger {
  border-top: 1px solid #e2e8f0 !important;
  padding-top: 14px !important;
  display: flex !important;
  justify-content: flex-end !important;
}
#katManageSheet #katDeleteBtn {
  appearance: none !important;
  background: rgba(239, 68, 68, 0.06) !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  color: #ef4444 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
}
#katManageSheet #katDeleteBtn:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
}

/* Neue Kategorie Box */
#katManageSheet .kat-new {
  background: #f0fdf4 !important;
  border: 1.5px solid #86efac !important;
  border-radius: 16px !important;
  padding: 16px 18px !important;
}
#katManageSheet .kat-new-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #166534 !important;
  margin-bottom: 12px !important;
}
#katManageSheet .kat-new-actions {
  display: flex !important;
  gap: 10px !important;
  margin-top: 12px !important;
}

/* Modal Footer */
#katManageSheet .mp-sheet-footer {
  padding: 16px 24px !important;
  border-top: 1px solid #f1f5f9 !important;
  display: flex !important;
  justify-content: space-between !important;
  background: #ffffff !important;
}

/* Dark Mode */
html.dark #katManageSheet {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}
html.dark #katManageSheet .mp-sheet-header {
  background: #1e293b !important;
  border-color: #334155 !important;
}
html.dark #katManageSheet .mp-sheet-header h3 {
  color: #f8fafc !important;
}
html.dark #katManageSheet .mp-sheet-header .muted {
  color: #94a3b8 !important;
}
html.dark #katManageSheet .mp-sheet-x {
  background: #334155 !important;
  color: #cbd5e1 !important;
}
html.dark #katManageSheet .kat-card {
  background: rgba(15, 23, 42, 0.6) !important;
  border-color: #334155 !important;
}
html.dark #katManageSheet #katManageSelect,
html.dark #katManageSheet #katManageName,
html.dark #katManageSheet #katNewName,
html.dark #katManageSheet #katSubNewName {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}
html.dark #katManageSheet .kat-sub-item {
  background: #0f172a !important;
  border-color: #334155 !important;
}
html.dark #katManageSheet .kat-sub-item .name {
  color: #f8fafc !important;
}
html.dark #katManageSheet .mp-sheet-footer {
  background: #1e293b !important;
  border-color: #334155 !important;
}

/* MP-20260930-085: Suchfeld in der Werkzeugzeile = EIN Feld (eine globale Eingabefeld-Regel setzte sonst einen zweiten Rahmen um das Feld in der Suchleiste). */
html body .mk-toolbar #leistungenSearch, .mk-toolbar .mk-findwrap .lw-searchbar input {
  border: 0 !important; box-shadow: none !important; background: transparent !important; outline: 0 !important; padding: 2px 0 !important; border-radius: 0 !important;
}

.mk-menu-foot { display: flex; justify-content: flex-end; padding: 4px 10px 8px; }
.mk-menu-foot .mk-menu-cancel { width: auto; }
/* Haken der gewählten Kategorie im Blatt (eigene Id: die Menü-Standard-Regeln tragen eine Id im Geltungsbereich) */
html body #mpLkMenu.mp-lk-menu .mp-menu__item[aria-current="true"] .mp-menu__go { flex-basis: 16px; color: var(--mp-accent-text, #0b78b8); }
html.dark body #mpLkMenu.mp-lk-menu .mp-menu__item[aria-current="true"] .mp-menu__go { color: var(--mp-accent-text, #7dcdff); }
@media (pointer: coarse) {
  .mk-menu-foot .mk-menu-cancel { min-height: 44px; }
}

/* =========================================================
   MP-20261001-008 / -009 — Leistungskatalog: kleiner Kopf, Zweispalter ab 768 px, EIN Aktionen-Menü.
   Maße: Spezifikation Ida Neumann (2026-10-01-MP-20261001-008-ida-katalog-zweispalten-spezifikation.md).
   Keine Chip-Fläche mehr. Ab 768 px: links Kategorienbaum, rechts Leistungen (1:2), beide eigene Scrollbereiche.
   Bis 767 px: eine Spalte, Kategorie-Wähler-Knopf (Zwischenstand, Runde 2 ersetzt ihn durch Schritte).
   ========================================================= */

/* ---- Kopf: MP-20261003-028 (Marcel: "oben dieser Textmaterialkatalog der kann auch ausgeblendet werden also der kann weg ... Und bei Leistungen Genau das Gleiche") ---- */
html body #view-material .mat-work-card .mk-head { display: none !important; }
html body #view-leistungen .leistungen-work-card .leistungen-work-header-text { display: none !important; }
html body #view-leistungen .leistungen-work-card .mks-seg-hint { display: none !important; }
.leistungen-work-card .mk-head {
  display: flex; align-items: center; justify-content: flex-start; gap: 12px; flex-wrap: nowrap;
  min-height: 0; padding: 0 0 6px; border-bottom: 0; overflow: visible;
}
@media (min-width: 768px) { .leistungen-work-card .mk-head .mein-kat-segment { padding: 3px; } .leistungen-work-card .mk-head .mks-seg-btn { min-height: 36px; } }
.leistungen-work-card .mk-head h3 { margin: 0; }
.leistungen-work-card .mk-head .mein-kat-segment { margin: 0; }
.leistungen-work-card .mks-seg-hint { display: none !important; }

/* ---- Werkzeugzeile: sticky unter der App-Top-Bar, Felder 44 px, Labels nur für Screenreader ---- */
:is(.leistungen-work-card, .mat-work-card) :is(.leistungen-work-toolbar, .mk-toolbar) {
  position: sticky; top: 0; z-index: 40;
  align-items: center; margin: 0 0 8px; padding: 0;
  background: var(--mp-surface, rgb(var(--mp-flaeche-rgb)));
}
:is(#mkStage, #matStage)[data-lifted] :is(.leistungen-work-toolbar, .mk-toolbar), :is(#mkStage, #matStage)[data-stuck] :is(.leistungen-work-toolbar, .mk-toolbar) { box-shadow: 0 1px 0 rgba(15, 23, 42, .05); }
html.dark :is(#mkStage, #matStage)[data-lifted] :is(.leistungen-work-toolbar, .mk-toolbar), html.dark :is(#mkStage, #matStage)[data-stuck] :is(.leistungen-work-toolbar, .mk-toolbar) { box-shadow: 0 1px 0 rgba(255, 255, 255, .09); }
.mk-toolbar .lw-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mk-toolbar .lw-katalog-select, .mk-toolbar .lw-searchbar { height: 44px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
.mk-toolbar .lw-searchbar { align-items: center; }
.mk-toolbar .leistungen-work-katalog { position: relative; }
.mk-toolbar .leistungen-work-katalog::before { content: "Katalog:"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 12.5px; font-weight: 600; color: var(--mp-text-muted, rgb(var(--mp-t3-6b7280))); pointer-events: none; }
html body :is(#view-leistungen, #view-material) :is(.leistungen-work-card, .mat-work-card) .mk-toolbar .leistungen-work-katalog select.lw-katalog-select { padding-left: 72px !important; }
.mk-toolbar-btns .btn-primary, .mk-toolbar .btn-primary.mk-add { min-height: 44px; }
/* Knopf-Regel (Marcel 16.09., Angebote als Mass): "Aktionen" = blau, "Neue Leistung" = hellblauer Hauptknopf. */
html body :is(#view-leistungen, #view-material) .mk-toolbar .btn-primary.mk-add {
  background: rgba(43, 176, 255, .14) !important; background-image: none !important; color: var(--mp-accent-text, #0b78b8) !important;
  border: 1px solid rgba(43, 176, 255, .45) !important; box-shadow: none !important; text-shadow: none !important;
}
html body :is(#view-leistungen, #view-material) .mk-toolbar .btn-primary.mk-add svg { filter: none; }
@media (hover: hover) { html body :is(#view-leistungen, #view-material) .mk-toolbar .btn-primary.mk-add:hover { background: rgba(43, 176, 255, .22) !important; } }
html.dark body :is(#view-leistungen, #view-material) .mk-toolbar .btn-primary.mk-add { background: rgba(43, 176, 255, .18) !important; color: rgb(125, 205, 255) !important; border-color: rgba(43, 176, 255, .5) !important; }

/* ---- Zweispalter ---- */
.mk-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.mk-main {
  min-width: 0; padding: 4px 8px 8px; border-radius: 12px; box-sizing: border-box;
  background: var(--mp-surface, rgb(var(--mp-flaeche-rgb))); border: 0.8px solid rgba(15, 23, 42, .05);
}
html.dark .mk-main { border-color: rgba(255, 255, 255, .09); }
.mk-main .mk-countbar { position: sticky; top: -4px; z-index: 2; padding: 2px 4px 0; margin: -4px -8px 0; background: var(--mp-surface, rgb(var(--mp-flaeche-rgb))); border-radius: 12px 12px 0 0; }
.mk-side { display: none; }

@media (min-width: 768px) {
  .mk-toolbar .mk-findwrap { display: contents; }
  .mk-toolbar .leistungen-work-katalog { order: 1; }
  .mk-toolbar .lw-searchbar { order: 2; }
  .mk-toolbar-btns { order: 3; }
  .mk-toolbar .btn-primary.mk-add { order: 4; }
  :is(.leistungen-work-card, .mat-work-card) { --mk-head-h: 132px; --mk-pane-h: calc(100dvh - var(--mp-topbar-h, 64px) - var(--mk-head-h) - 2 * (24px + var(--mp-bottom-nav-height, 0px) + env(safe-area-inset-bottom, 0px)) - 8px); }
  :is(.leistungen-work-card, .mat-work-card).mk-compact { --mk-head-h: 64px; }
  :is(.leistungen-work-card, .mat-work-card).mk-compact .mk-head, :is(.leistungen-work-card, .mat-work-card).mk-compact .mks-seg-hint { max-height: 0; opacity: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; min-height: 0; }
  .mk-split { grid-template-columns: clamp(240px, 33.333%, 400px) minmax(0, 1fr); }
  .mk-side { display: block; position: sticky; top: 0; min-width: 0; }
  .mk-main { max-height: var(--mk-pane-h); overflow-y: auto; overscroll-behavior: contain; min-height: min(var(--mk-pane-h, 340px), 340px); }
  html body :is(#mkCatTree, #matCatTree).mp-lk-menu.mp-menu { min-height: min(var(--mk-pane-h, 340px), 340px); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .mk-toolbar .leistungen-work-katalog { flex: 0 0 190px; }
  .mk-toolbar .leistungen-work-katalog::before { display: none; }
  html body :is(#view-leistungen, #view-material) :is(.leistungen-work-card, .mat-work-card) .mk-toolbar .leistungen-work-katalog select.lw-katalog-select { padding-left: 14px !important; }
  .mk-toolbar .lw-searchbar { flex: 1 1 160px; min-width: 160px; }
  .mk-toolbar-btns .btn-primary, .mk-toolbar .btn-primary.mk-add { padding-left: 14px; padding-right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.leistungen-work-card, .mat-work-card) .mk-head, :is(.leistungen-work-card, .mat-work-card) .mks-seg-hint { transition: none; }
}
/* K-754 (Lena, 360 px): die rechte Schnellleiste (#mpSideRail, 54 px breit, ab 768 reserviert das Modul den Platz) lag am Handy
   ueber dem Knopf der Karte. Solange sie sichtbar ist, bleibt rechts Platz frei; eingeklappt (mp-rail-collapsed) entfaellt er. */
@media (max-width: 767px) {
  html body:not(.mp-rail-collapsed) :is(#view-leistungen, #view-material) :is(#mkStage, #matStage) .mk-card { padding-right: 62px; }
  /* schmale Zeile: Preis und Knoepfe duerfen umbrechen statt ueber den Kartenrand zu laufen (Runde 2 ersetzt das Handy-Layout) */
  .mk-card-side { flex-wrap: wrap; row-gap: 6px; }
  .mk-card-actions { flex: 1 1 auto; justify-content: flex-end; }
}

/* ---- Linke Spalte: Kategorienbaum im Menü-Standard-Stil (Zeilen = .mp-menu__item) ---- */
html body :is(#mkCatTree, #matCatTree).mp-lk-menu.mp-menu {
  position: static; display: flex !important; width: auto !important; max-width: none; z-index: auto !important;
  max-height: var(--mk-pane-h, none); overflow-y: auto; overscroll-behavior: contain;
  transform: none; opacity: 1; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  padding: 8px; border: 0.8px solid rgba(15, 23, 42, .05) !important;
}
html.dark body :is(#mkCatTree, #matCatTree).mp-lk-menu.mp-menu { border-color: rgba(255, 255, 255, .09) !important; }
html body :is(#mkCatTree, #matCatTree) .mp-menu__body { overflow: visible; padding: 0; }
html body :is(#mkCatTree, #matCatTree).mp-lk-menu.mp-menu .mk-tree-row { min-height: 36px; padding: 8px 12px; gap: 8px; }
html body :is(#mkCatTree, #matCatTree).mp-lk-menu.mp-menu .mk-tree-row .mp-menu__tx strong { font-weight: 700; }
html body :is(#mkCatTree, #matCatTree).mp-lk-menu.mp-menu .mk-tree-row.mk-tree-sub { padding-left: 28px; }
html body :is(#mkCatTree, #matCatTree).mp-lk-menu.mp-menu .mk-tree-row.mk-tree-sub .mp-menu__tx strong { font-weight: 600; }
html body :is(#mkCatTree, #matCatTree).mp-lk-menu.mp-menu .mk-tree-row.is-active { background: rgba(43, 176, 255, .08) !important; }
html body :is(#mkCatTree, #matCatTree).mp-lk-menu.mp-menu .mk-tree-row.is-active .mp-menu__tx strong { color: var(--mp-text) !important; font-weight: 800; }
html body :is(#mkCatTree, #matCatTree) .mk-tree-row:focus-visible { outline: 2px solid var(--mp-accent, #2bb0ff); outline-offset: -2px; }
.mk-tree-count { flex: 0 0 auto; margin-left: auto; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--mp-text-muted, rgb(var(--mp-t3-6b7280))); }
/* Zaehler auf der blau hinterlegten aktiven Zeile: --mp-text-muted waere dort unter 4,5:1 (gemessen 4,3) - deshalb das dunklere Sekundaergrau */
html body :is(#mkCatTree, #matCatTree) .mk-tree-row.is-active .mk-tree-count { color: var(--mp-text-secondary, rgb(71, 85, 105)); }
.mk-tree-chev { flex: 0 0 13px; width: 13px; height: 13px; display: inline-flex; color: rgba(11, 15, 25, .35); transition: transform .14s ease; }
.mk-tree-chev.is-none { visibility: hidden; }
.mk-tree-row[aria-expanded="true"] .mk-tree-chev { transform: rotate(90deg); }
html.dark .mk-tree-chev { color: rgb(168, 176, 187); }
@media (max-width: 1180px), (pointer: coarse) { html body :is(#mkCatTree, #matCatTree).mp-lk-menu.mp-menu .mk-tree-row { min-height: 44px; } }
:is(#mkStage, #matStage)[data-searching] .mk-side .mk-tree-row.is-active { background: transparent !important; }

/* ---- Aktionen-Menü: Trennlinie, Schalter statt Chevron, eingerückte Unterzeilen ---- */
.mk-menu-sep { height: 1px; margin: 4px 12px; background: rgba(15, 23, 42, .08); flex: 0 0 auto; }
html.dark .mk-menu-sep { background: rgba(255, 255, 255, .12); }
html body #mpLkMenu.mp-lk-menu.mp-menu .mp-menu__item.mk-menu-sub { padding-left: 36px; }

/* =========================================================
   MP-20261001-008b — Leistungskatalog am Handy (<= 767 px): drei Vollbild-Schritte, die SEITE scrollt.
   Schritt 1: Suche (klebt), Katalog + Aktionen, Kategorien als Zeilen. Schritt 2: Schrittleiste (Zurück · Pfad),
   Suche (klebt), Unterkategorie-Chips, Karten. Schritt 3: der bestehende Editor. Kein Kategorie-Blatt, kein verschachteltes Scrollen.
   ========================================================= */
.mk-stepbar, .mk-subrow { display: none; }
.mk-tree-go { display: none; }
@media (max-width: 767px) {
  html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage) { display: flex; flex-flow: row wrap; gap: 8px; align-items: center; }
  html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage) > :is(#mkSentinel, #matSentinel) { flex: 0 0 100%; }
  /* Werkzeugzeile und Knopfgruppe lösen sich auf: ihre Kinder sind direkte Kinder der Bühne, damit die Suche über die ganze Seitenlänge kleben kann */
  html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage) > .mk-toolbar, html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage) .mk-toolbar-btns { display: contents; }
  html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage) .mk-findwrap { order: 1; flex: 0 0 100%; display: flex; align-items: center; gap: 8px; box-sizing: border-box; height: 52px; padding: 4px 0; position: sticky; top: 0; z-index: 40; background: var(--mp-surface, rgb(var(--mp-flaeche-rgb))); transition: top .16s ease; min-width: 0; }
  html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage) .mk-findwrap .lw-searchbar { flex: 1 1 auto; min-width: 0; }
  html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage) .mk-toolbar .btn-primary.mk-add { flex: 0 0 44px; width: 44px; min-width: 44px; max-width: 44px; height: 44px; padding: 0 !important; justify-content: center; gap: 0; }
  html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage) .mk-toolbar .btn-primary.mk-add span { display: none; }
  html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage) .mk-toolbar .btn-primary.mk-add svg { display: block; width: 20px; height: 20px; flex: 0 0 20px; }
  /* rechts bleibt Platz für die Schnellleiste (#mpSideRail, 54 px), solange sie sichtbar ist */
  html body:not(.mp-rail-collapsed) :is(#view-leistungen, #view-material) :is(#mkStage, #matStage) :is(#mkCatTree, #matCatTree) .mk-tree-row, html body:not(.mp-rail-collapsed) :is(#view-leistungen, #view-material) :is(#mkStage, #matStage) .mk-state { padding-right: 62px; }
  :is(#mkStage, #matStage)[data-stuck] .mk-findwrap { box-shadow: 0 1px 0 rgba(15, 23, 42, .05); }
  html.dark :is(#mkStage, #matStage)[data-stuck] .mk-findwrap { box-shadow: 0 1px 0 rgba(255, 255, 255, .09); }
  html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage) .leistungen-work-katalog { order: 2; flex: 1 1 0; min-width: 0; }
  html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage) :is(#mkActionsBtn, #matActionsBtn) { order: 3; flex: 0 0 auto; }
  html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage) > .mk-split { order: 5; flex: 0 0 100%; display: block; min-width: 0; }
  /* Schrittleiste (Schritt 2/3): Zurück-Chevron 44, Pfad (vorn gekürzt, letztes Glied bleibt), Schrittzeile */
  html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage) > .mk-stepbar { order: 0; flex: 0 0 100%; align-items: center; gap: 4px; box-sizing: border-box; height: 52px; position: sticky; top: 0; z-index: 41; background: var(--mp-surface, rgb(var(--mp-flaeche-rgb))); transition: top .16s ease; }
  /* MP-20261002-058: Schrittleiste in Schritt 2 und 3 einblenden */
  :is(#mkStage, #matStage)[data-step="2"] > .mk-stepbar, :is(#mkStage, #matStage)[data-step="3"] > .mk-stepbar { display: flex; }
  .mk-step-back { flex: 0 0 44px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--mp-accent-text, #0b78b8); border-radius: 12px; cursor: pointer; padding: 0; }
  .mk-step-back:focus-visible { outline: 2px solid var(--mp-accent, #2bb0ff); outline-offset: -2px; }
  .mk-step-tx { min-width: 0; flex: 1 1 auto; }
  .mk-step-title { font-size: 15px; font-weight: 800; line-height: 1.25; color: var(--mp-text, rgb(var(--mp-t1-1f2937))); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left; }
  .mk-step-title bdi { direction: ltr; unicode-bidi: isolate; }
  .mk-step-sub { font-size: 11.5px; font-weight: 600; line-height: 1.3; color: var(--mp-text-muted, rgb(var(--mp-t3-6b7280))); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* beim Runterscrollen fährt die Schrittleiste weg, die Suche rückt nach oben */
  html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage)[data-stepbar="off"] > .mk-stepbar { top: -60px; }
  html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage)[data-step="2"]:not([data-stepbar="off"]) .mk-findwrap,
  html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage)[data-step="3"]:not([data-stepbar="off"]) .mk-findwrap { top: 52px; }
  /* Schritt 2/3 und Suche: der Modulkopf (Titel, Reiter, Hinweis) tritt zurück, die Schrittleiste steht ganz oben */
  html body :is(#view-leistungen, #view-material) :is(.leistungen-work-card, .mat-work-card)[data-mk-step="2"] .mk-head,
  html body :is(#view-leistungen, #view-material) :is(.leistungen-work-card, .mat-work-card)[data-mk-step="3"] .mk-head,
  html body :is(#view-leistungen, #view-material) :is(.leistungen-work-card, .mat-work-card)[data-mk-step="2"] .mks-seg-hint,
  html body :is(#view-leistungen, #view-material) :is(.leistungen-work-card, .mat-work-card)[data-mk-step="3"] .mks-seg-hint { display: none; }
  /* welcher Schritt zeigt was */
  html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage)[data-step="2"] .leistungen-work-katalog,
  html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage)[data-step="3"] .leistungen-work-katalog,
  html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage)[data-step="2"] :is(#mkActionsBtn, #matActionsBtn),
  html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage)[data-step="3"] :is(#mkActionsBtn, #matActionsBtn),
  html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage)[data-searching] .leistungen-work-katalog,
  html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage)[data-searching] :is(#mkActionsBtn, #matActionsBtn) { display: none !important; }
  html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage) .mk-side { display: block; position: static; }
  :is(#mkStage, #matStage)[data-step="2"] .mk-side, :is(#mkStage, #matStage)[data-step="3"] .mk-side, :is(#mkStage, #matStage)[data-searching] .mk-side { display: none !important; }
  :is(#mkStage, #matStage):not([data-step="2"]):not([data-step="3"]):not([data-searching]) .mk-main { display: none; }
  html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage) .mk-main { max-height: none; overflow: visible; padding: 0; border: 0; background: none; touch-action: pan-y; }
  html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage) .mk-main .mk-countbar { position: static; margin: 0; padding: 2px 4px; background: none; }
  html body :is(#view-leistungen, #view-material) :is(#mkCatTree, #matCatTree).mp-lk-menu.mp-menu { max-height: none; overflow: visible; padding: 0; border: 0 !important; background: none; }
  html body :is(#view-leistungen, #view-material) :is(#mkCatTree, #matCatTree) .mk-tree-row { min-height: 48px; }
  html body :is(#view-leistungen, #view-material) :is(#mkCatTree, #matCatTree) .mk-tree-chev { display: none; }
  .mk-tree-go { display: inline-flex; flex: 0 0 13px; width: 13px; height: 13px; color: rgba(11, 15, 25, .35); }
  html.dark .mk-tree-go { color: rgb(168, 176, 187); }
  /* Unterkategorie: EINE wischbare Chip-Zeile mit Kantenverlauf, Filter statt Schritt */
  :is(#mkStage, #matStage)[data-step="2"]:not([data-searching]) .mk-subrow:not(:empty) { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px; margin: 0 -2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .mk-subrow::-webkit-scrollbar { display: none; }
  html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage) .mk-subchip { height: 44px; box-sizing: border-box; }
  .mk-subchip { flex: 0 0 auto; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(15, 23, 42, .14); background: transparent; color: var(--mp-text, rgb(var(--mp-t1-1f2937))); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
  .mk-subchip.is-active { background: rgba(43, 176, 255, .12); border-color: rgba(43, 176, 255, .55); color: var(--mp-accent-text, #0b78b8); }
  html.dark .mk-subchip { border-color: rgba(255, 255, 255, .18); }
  html.dark .mk-subchip.is-active { color: rgb(125, 205, 255); }
  /* Karte: Titel (bis 2 Zeilen) | Meta + Preis | Knöpfe — alles >= 44 px; rechts bleibt Platz für die Schnellleiste */
  html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage) .mk-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top top" "meta price" "actions actions"; column-gap: 10px; row-gap: 2px; align-items: center; min-height: 0; padding: 8px 12px; }
  html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage) .mk-card-main, html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage) .mk-card-side { display: contents; }
  html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage) .mk-card-top { grid-area: top; min-width: 0; flex-wrap: wrap; }
  html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage) .mk-card .mk-card-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage) .mk-card-meta { grid-area: meta; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage) .mk-card-desc { display: none; }
  html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage) .mk-card-price { grid-area: price; flex: none; width: auto; flex-direction: row; align-items: baseline; gap: 6px; justify-self: end; text-align: right; min-width: 0; }
  html body :is(#view-leistungen, #view-material) :is(#mkStage, #matStage) .mk-card-actions { grid-area: actions; justify-self: end; flex: none; }
  /* Mein Katalog und Systemkatalog: gleiche Zeile; ohne Meta-Zeile rückt der Preis nach links */
  .mk-state { padding-right: 0; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .mk-findwrap, .mk-stepbar { transition: none !important; }
}

/* MP-20261001-008c (Marcel 01.10.: "die Karte ist so weit links, auf jedem Gerät optimieren").
   Der Katalog sitzt wie die Hauptkarten von Angebote/Rechnungen/Kunden: sie laufen bis an die Schnellleiste (#mpSideRail, 78 px reserviert).
   Die Grundregel (mp-ui-final-hardwall.css) zentriert alle Nicht-Listen-Module in einem 1700-px-Rahmen; dann bleibt neben der Karte
   links und rechts je ~100 px leer und die Karte wirkt auf Marcels breitem Bildschirm verschoben. Ab 1500 px nimmt der Katalog deshalb
   den Platz bis zur Schnellleiste: links 12 px (wie unter 1500), rechts 78 px. Darunter ändert sich nichts. */
@media (min-width: 1500px) {
  html body .main-container > :is(#view-leistungen, #view-material).view.active > .view-container > .view-box.view-box.view-box,
  html body :is(#view-leistungen, #view-material).view > .view-container > .view-box.view-box.view-box { margin-left: 12px !important; margin-right: calc(var(--mp-side-rail-space, 90px) - 12px) !important; max-width: none !important; width: auto !important; }
}

/* MP-20261001-008d: die neu gespeicherte Leistung blinkt kurz auf (Hellblau wie die aktive Zeile der Seitenleiste). */
.mk-card.mk-flash { animation: mkFlash 1.8s ease-out 1; }
@keyframes mkFlash { 0%, 55% { background: rgba(43, 176, 255, .18); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .mk-card.mk-flash { animation: none; background: rgba(43, 176, 255, .14); } }

/* =========================================================
   MP-20261001-008 Runde 9 (Lena): B-2 Seitenscroll, B-3 Einrückung, B-7 Tablet-Titel, B-8 Kontrast, B-9 Dunkel-Suchtext
   ========================================================= */
/* B-2: ab 768 px scrollen nur die beiden Spalten, nicht die Seite (Seitenhöhe = Fensterhöhe; Bausteine bleiben scrollbar) */
/* MP-20261003-028 (Marcel: "stabile View"): Auf allen Höhen ab 768px Breite greift overflow: clip und padding-bottom: 0, kein Page-Scroll */
@media (min-width: 768px) {
  html body :is(#view-leistungen, #view-material).view:has(:is(.leistungen-work-card, .mat-work-card):not([data-mp-katmode="bausteine"])) {
    overflow-y: hidden !important;
    overflow: clip !important;
  }
  html body :is(#view-leistungen, #view-material).view:has(:is(.leistungen-work-card, .mat-work-card):not([data-mp-katmode="bausteine"])) .view-container {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}
/* B-3: Unterkategorien stehen EINGERÜCKT unter der Kategorie (Text der Kategorie beginnt bei 33 px, der Unterkategorie bei 49 px) */
html body :is(#mkCatTree, #matCatTree).mp-lk-menu.mp-menu .mk-tree-row.mk-tree-sub { padding-left: 49px; }
/* B-7: schmale Hauptspalte (768-899 px): Titel bis 2 Zeilen, Preis neben der Meta-Zeile, Knöpfe darunter — nie auf 12 Zeichen gekürzt */
@media (min-width: 768px) and (max-width: 899px) {
  .mk-main .mk-card { grid-template-areas: "top top" "meta price" "actions actions"; }
  .mk-main .mk-card-top { flex-wrap: wrap; }
  .mk-main .mk-card .mk-card-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
/* B-8: lesbar schlägt Vorbild-Opacity — Meta-, Zähl-, Hinweis- und Beschreibungszeile ohne Opacity, Farbe >= 4,5:1 */
html body :is(#view-leistungen, #view-material) :is(.mks-seg-hint, .mk-count, .mk-card-meta, .mk-card-desc, .mk-unit, .mk-state-text) { opacity: 1 !important; color: rgb(71, 85, 105) !important; }
html.dark body :is(#view-leistungen, #view-material) :is(.mks-seg-hint, .mk-count, .mk-card-meta, .mk-card-desc, .mk-unit, .mk-state-text) { opacity: 1 !important; color: rgb(168, 176, 187) !important; }
/* B-9: Suchtext im Dunkelmodus war unsichtbar (1,06:1) */
html body .mk-toolbar :is(#leistungenSearch, #matSearch) { color: var(--mp-text, rgb(31, 41, 55)) !important; }
html.dark body .mk-toolbar :is(#leistungenSearch, #matSearch) { color: rgb(244, 246, 248) !important; }
html body .mk-toolbar :is(#leistungenSearch, #matSearch)::placeholder { color: rgb(100, 116, 139); opacity: 1; }
html.dark body .mk-toolbar :is(#leistungenSearch, #matSearch)::placeholder { color: rgb(168, 176, 187); }

/* Lena Runde 9 (820 px: Kopf 151 statt <= 144 px): auf schmalen Tablets (768-899 px) passt die Werkzeugzeile in EINE Zeile,
   wenn "Neue Leistung" wie am Handy ein Plus-Symbolknopf ist (aria-label bleibt). */
@media (min-width: 768px) and (max-width: 899px) {
  :is(.leistungen-work-card, .mat-work-card) :is(.leistungen-work-toolbar, .mk-toolbar) { flex-wrap: nowrap; }
  .mk-toolbar .leistungen-work-katalog { flex: 0 0 150px; }
  .mk-toolbar .lw-searchbar { flex: 1 1 120px; min-width: 120px; }
  html body :is(#view-leistungen, #view-material) .mk-toolbar .btn-primary.mk-add { flex: 0 0 44px; width: 44px; min-width: 44px; max-width: 44px; padding: 0 !important; justify-content: center; gap: 0; }
  html body :is(#view-leistungen, #view-material) .mk-toolbar .btn-primary.mk-add span { display: none; }
}

/* =========================================================
   MP-20261001-033/C1 - eigene Kategorien: Zeilen-Menue, "+ Kategorie", Eingabe in der Zeile (nur Mein Katalog)
   Radius 12, keine festen Knopfbreiten ausser den quadratischen Symbolknoepfen, Menue-Standard (.mp-menu__item) bleibt die Zeile.
   ========================================================= */
html body :is(#mkCatTree, #matCatTree) .mk-kv-row { position: relative; display: flex; align-items: stretch; flex: 0 0 auto; }
/* Spezifitaet: die Grundregel "#mkCatTree.mp-lk-menu.mp-menu .mk-tree-row { padding: 8px 12px }" (weiter oben) gewinnt gegen kuerzere Selektoren - deshalb dieselbe Kette + .mk-kv-row */
html body :is(#mkCatTree, #matCatTree).mp-lk-menu.mp-menu .mk-kv-row > .mk-tree-row { flex: 1 1 auto; min-width: 0; padding-right: 48px; }
html body :is(#mkCatTree, #matCatTree) .mk-kv-row.mk-kv-extra { display: block; }
html body :is(#mkCatTree, #matCatTree) .mk-kv-more { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); flex: 0 0 36px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--mp-text-muted, rgb(var(--mp-t3-6b7280))); cursor: pointer; }
html body :is(#mkCatTree, #matCatTree) .mk-kv-more:hover { background: rgba(15, 23, 42, .06); }
html.dark body :is(#mkCatTree, #matCatTree) .mk-kv-more:hover { background: rgba(255, 255, 255, .09); }
html body :is(#mkCatTree, #matCatTree) .mk-kv-more:focus-visible, html body :is(#mkCatTree, #matCatTree) .mk-kv-x:focus-visible { outline: 2px solid var(--mp-accent, #2bb0ff); outline-offset: -2px; }
html body :is(#mkCatTree, #matCatTree) .mk-kv-input:focus, html body :is(#mkCatTree, #matCatTree) .mk-kv-input:focus-visible { outline: none; box-shadow: none; }
html body :is(#mkCatTree, #matCatTree) .mk-kv-inline:focus-within { border-color: var(--mp-accent, #2bb0ff); box-shadow: 0 0 0 2px rgba(43, 176, 255, .22); }
html body :is(#mkCatTree, #matCatTree) .mk-kv-more[aria-expanded="true"] { background: rgba(43, 176, 255, .12); }
html body :is(#mkCatTree, #matCatTree) .mk-kv-add .mp-menu__desc { white-space: normal; }
html body :is(#mkCatTree, #matCatTree) .mk-kv-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; box-sizing: border-box; padding: 4px 6px 4px 12px; border: 1px solid rgba(43, 176, 255, .5); border-radius: 12px; background: rgba(43, 176, 255, .06); }
html body :is(#mkCatTree, #matCatTree) .mk-kv-inline.is-sub { margin-left: 16px; }
html body :is(#mkCatTree, #matCatTree) .mk-kv-input { flex: 1 1 120px; min-width: 0; height: 36px; padding: 0; border: 0; background: transparent; box-shadow: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--mp-text, rgb(var(--mp-t1-1f2937))); }
html body :is(#mkCatTree, #matCatTree) .mk-kv-x { flex: 0 0 36px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--mp-text-muted, rgb(var(--mp-t3-6b7280))); cursor: pointer; }
html body :is(#mkCatTree, #matCatTree) .mk-kv-hint { flex: 0 0 100%; padding: 0 2px 2px 0; font-size: 11.5px; font-weight: 600; line-height: 1.3; color: var(--mp-text-muted, rgb(var(--mp-t3-6b7280))); }
html body :is(#mkCatTree, #matCatTree) .mk-kv-hint.is-error { color: var(--mp-danger, #c62828); }
@media (max-width: 1180px), (pointer: coarse) {
  html body :is(#mkCatTree, #matCatTree) .mk-kv-more { flex-basis: 44px; width: 44px; height: 44px; right: 2px; }
  html body :is(#mkCatTree, #matCatTree) .mk-kv-x { flex-basis: 44px; width: 44px; height: 44px; }
  html body :is(#mkCatTree, #matCatTree) .mk-kv-input { height: 44px; }
}
@media (max-width: 767px) {
  html body :is(#view-leistungen, #view-material) :is(#mkCatTree, #matCatTree) .mk-kv-input { font-size: 16px; }
  /* rechts bleibt Platz fuer die Schnellleiste (#mpSideRail, 54 px), solange sie sichtbar ist - das Zeilen-Menue rueckt davor */
  html body:not(.mp-rail-collapsed) :is(#view-leistungen, #view-material) :is(#mkStage, #matStage) :is(#mkCatTree, #matCatTree) .mk-kv-row > .mk-tree-row { padding-right: 108px; }
  html body:not(.mp-rail-collapsed) :is(#view-leistungen, #view-material) :is(#mkStage, #matStage) :is(#mkCatTree, #matCatTree) .mk-kv-more { right: 58px; }
  html body:not(.mp-rail-collapsed) :is(#view-leistungen, #view-material) :is(#mkStage, #matStage) :is(#mkCatTree, #matCatTree) .mk-kv-inline { margin-right: 58px; }
  html body.mp-rail-collapsed :is(#view-leistungen, #view-material) :is(#mkStage, #matStage) :is(#mkCatTree, #matCatTree) .mk-kv-row > .mk-tree-row { padding-right: 56px; }
}
/* MP-20261001-055: Handy 12 px fuer Kleingedrucktes (Tokens --mp-ty-*, css/mp-typography.css). !important + id schlaegt die globale Mindestgroesse in mp-mobile-typography.css */
@media (max-width: 767.98px) {
  html body :is(#view-leistungen, #view-material) :is(.mk-card-meta, .mk-card-desc, .mk-unit) { font-size: var(--mp-ty-sub-size) !important; }
  html body :is(#view-leistungen, #view-material) .mk-card-meta { line-height: var(--mp-ty-sub-lh); }
}

/* =========================================================
   MP-20261002-042 (Marcel 02.10.: "denselben Header wie Angebote"): Kopfkarte des Moduls (h1 + p in leistungen.html).
   Aussehen, Symbol-Kachel und Farbe kommen vom Standard-Mechanismus (core/mp-list-workspaces-golden.js "MODULKOPF", css/mp-ui-final-hardwall.css).
   Hier steht nur, was die Kopfkarte im Zweispalter-/Schritt-Layout dieses Moduls NICHT selbst regeln kann:
   (1) Rueckfallhoehe der Spalten: die Kopfkarte ist 120 px hoch + 20 px Abstand = 140 px mehr ueber der Arbeitskarte (im Betrieb misst fitPanes() ohnehin nach).
   (2) Handy-Schritt 2 und Suche: die Kopfkarte tritt zurueck, die Schrittleiste steht ganz oben (wie im Angebot der Editor-Schritt).
   (3) Handy-Schrift der Kopfkarte wie Angebote: dort setzt css/mp-list-workspaces-golden.css:2975-2994 sie ueber eine :is(#view-kva,#view-rechnung,#view-projekte,#view-kunden,#view-mail)-Liste,
       in der #view-leistungen nicht steht. Wird die Kennung dort aufgenommen, entfaellt Punkt (3) hier. */
@media (min-width: 768px) {
  :is(.leistungen-work-card, .mat-work-card) { --mk-head-h: 272px; }
  :is(.leistungen-work-card, .mat-work-card).mk-compact { --mk-head-h: 204px; }
}
@media (max-width: 767px) {
  html:not(#mpkk):not(#mpkk-2):not(#mpkk-3) body :is(#view-leistungen, #view-material).view.active:has(:is(.leistungen-work-card, .mat-work-card)[data-mk-step="2"]) .view-header.mp-module-view-header { display: none !important; }
  html body :is(#view-leistungen, #view-material).view.active > .view-container > .view-box > .view-header h1 { margin: 0 !important; font-size: 28px !important; line-height: 1.12 !important; }
  html body :is(#view-leistungen, #view-material).view.active > .view-container > .view-box > .view-header p { margin: 5px 0 0 !important; font-size: 12.5px !important; line-height: 1.4 !important; }
}

/* MP-20261002-057: Bei flachen Bildschirmen (<= 850px Höhe, z. B. iPad quer 1024x768 oder Laptop 1366x768)
   den Bestätigungshinweis (#mpVerifyNudge) im Leistungsmodul kompakter halten, damit die Spalten ausreichend Arbeitsraum behalten. */
@media (min-width: 768px) and (max-height: 850px) {
  html body #view-leistungen #mpVerifyNudge {
    margin: 8px auto 4px !important;
    padding: 10px 14px !important;
    border-radius: 14px !important;
  }
  html body #view-leistungen #mpVerifyNudge .mp-nudge-row {
    gap: 10px !important;
  }
  html body #view-leistungen #mpVerifyNudge .mp-nudge-ic {
    width: 30px !important;
    height: 30px !important;
  }
  html body #view-leistungen #mpVerifyNudge .mp-nudge-title {
    font-size: 14px !important;
  }
  html body #view-leistungen #mpVerifyNudge .mp-nudge-sub {
    font-size: 12px !important;
    margin-top: 2px !important;
  }
  html body #view-leistungen #mpVerifyNudge .mp-nudge-actions {
    margin-top: 8px !important;
    gap: 8px !important;
  }
  html body #view-leistungen #mpVerifyNudge .mp-nudge-btn {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
}

/* MP-20261003-028 (Marcel: "Dass wir auf jedem Geraet einen perfektes Fenster haben"):
   Auf flachen Bildschirmen (<= 800px Höhe, wie z. B. iPad Landscape oder kompakte Laptops)
   den Modulkopf kompakter halten, um sofort 40-50px mehr Arbeitsfläche für die Material- und Leistungslisten zu schaffen. */
@media (min-width: 768px) and (max-height: 800px) {
  html body :is(#view-leistungen, #view-material) .view-header.mp-module-view-header {
    padding: 12px 20px !important;
    margin-bottom: 10px !important;
    min-height: 0 !important;
  }
  html body :is(#view-leistungen, #view-material) .view-header.mp-module-view-header h1 {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }
  html body :is(#view-leistungen, #view-material) .view-header.mp-module-view-header p {
    font-size: 12px !important;
    margin-top: 2px !important;
  }
}