/* =========================================================
   MALERPLUS · PREMIUM PILLS — Cross-Module (2026-05-18 Welle B)
   ---------------------------------------------------------
   Vereinheitlicht den Pill-Look über alle Tab/Action-Leisten:
     • Settings-Top-Nav        → .mp-settings-nav-btn (Quelle des Stils)
     • Projekte-Subnav         → .mp-proj-tab
     • Angebote Footer-Actions → #view-kva .view-footer-actions > button
     • Rechnungen Footer-Actions → #view-rechnung .view-footer-actions > button

   Pattern:
     - Inactive: Glass-Surface (weißer Gradient + 8px Backdrop-Blur),
       Brand-Border 18%, Inset-Highlight, Soft-Drop-Shadow.
     - Hover: Lift -1px, Border 32%, Brand-Glow im Drop-Shadow.
     - Active: Blue-Gradient 135deg (#2bb0ff → #1d8de0), kräftiger Glow.

   Load-Order: muss NACH mp-app-detail-v2.css geladen werden — diese hatte
   2026-05-13 die Projekt-Tabs absichtlich "ruhig" überschrieben. Hier
   restaurieren wir den Premium-Look bewusst.
   ========================================================= */

/* ── Inactive-Pill (Glass-Surface) ─────────────────────── */
body .mp-proj-tab,
body #view-kva .view-footer-actions > button,
body #view-rechnung .view-footer-actions > button, body #view-mail .view-footer-actions > button {
  background: linear-gradient(180deg, rgba(var(--mp-flaeche-rgb), 0.92) 0%, rgba(var(--mp-flaeche-2-rgb), 0.78) 100%) !important;
  border: 1px solid rgba(43, 176, 255, 0.18) !important;
  border-radius: 12px !important;
  color: rgb(var(--mp-t2-334155)) !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 1px 2px rgba(15, 23, 42, 0.03),
    0 4px 10px -4px rgba(15, 23, 42, 0.05) !important;
  -webkit-backdrop-filter: blur(8px) saturate(140%);
          backdrop-filter: blur(8px) saturate(140%);
  transition:
    background 160ms cubic-bezier(0.4, 0, 0.2, 1),
    color 160ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 160ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 120ms ease !important;
}

/* ── Hover ─────────────────────────────────────────────── */
@media (hover: hover) {
  body .mp-proj-tab:hover,
  body #view-kva .view-footer-actions > button:hover,
  body #view-rechnung .view-footer-actions > button:hover, body #view-mail .view-footer-actions > button:hover {
    background: linear-gradient(180deg, rgba(var(--mp-flaeche-rgb), 0.98) 0%, rgba(var(--mp-f2-f0f7ff), 0.92) 100%) !important;
    border-color: rgba(43, 176, 255, 0.32) !important;
    color: rgb(var(--mp-t1-0a1729)) !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.75) inset,
      0 8px 18px -6px rgba(43, 176, 255, 0.28),
      0 2px 6px -2px rgba(15, 23, 42, 0.06) !important;
    transform: translateY(-1px) !important;
  }
}

/* ── Active-Pill (Blue-Gradient) ───────────────────────── */
body .mp-proj-tab.is-active,
body #view-projekte .mp-proj-tab.is-active,
body #view-kva .view-footer-actions > button.btn-primary,
body #view-rechnung .view-footer-actions > button.btn-primary, body #view-mail .view-footer-actions > button.btn-primary {
  background: linear-gradient(135deg, #2bb0ff 0%, #1d8de0 100%) !important;
  background-image: linear-gradient(135deg, #2bb0ff 0%, #1d8de0 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 8px 20px -6px rgba(43, 176, 255, 0.45),
    0 2px 4px rgba(43, 176, 255, 0.18) !important;
  font-weight: 600 !important;
}
@media (hover: hover) {
  body .mp-proj-tab.is-active:hover,
  body #view-projekte .mp-proj-tab.is-active:hover,
  body #view-kva .view-footer-actions > button.btn-primary:hover,
  body #view-rechnung .view-footer-actions > button.btn-primary:hover, body #view-mail .view-footer-actions > button.btn-primary:hover {
    background: linear-gradient(135deg, #1aa0f0 0%, #1378c4 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    transform: translateY(-1px) !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.3) inset,
      0 12px 26px -6px rgba(43, 176, 255, 0.55),
      0 4px 8px rgba(43, 176, 255, 0.22) !important;
  }
}

/* Active-Press: tactile feedback */
body .mp-proj-tab:active,
body #view-kva .view-footer-actions > button:active,
body #view-rechnung .view-footer-actions > button:active, body #view-mail .view-footer-actions > button:active {
  transform: translateY(0) scale(0.98) !important;
  transition-duration: 80ms !important;
}

/* mp-app-detail-v2.css :after-Underline auf aktiven Projekt-Tabs entfernen
   — der Blue-Gradient ist visualisierung genug, kein Underline zusätzlich. */
body #view-projekte .mp-proj-tab.is-active::after {
  display: none !important;
}

/* Focus-visible für Keyboard-Nav */
body .mp-proj-tab:focus-visible,
body #view-kva .view-footer-actions > button:focus-visible,
body #view-rechnung .view-footer-actions > button:focus-visible, body #view-mail .view-footer-actions > button:focus-visible {
  outline: 2px solid rgba(43, 176, 255, 0.55);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────
   DARK MODE
   ───────────────────────────────────────────────────────── */
html.dark body .mp-proj-tab,
html.dark body #view-kva .view-footer-actions > button,
html.dark body #view-rechnung .view-footer-actions > button,
html.dark body #view-mail .view-footer-actions > button {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.78) 0%, rgba(15, 23, 42, 0.62) 100%) !important;
  border-color: rgba(43, 176, 255, 0.20) !important;
  color: #cbd5e1 !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 4px 12px -4px rgba(0, 0, 0, 0.40) !important;
}
@media (hover: hover) {
  html.dark body .mp-proj-tab:hover,
  html.dark body #view-kva .view-footer-actions > button:hover,
  html.dark body #view-rechnung .view-footer-actions > button:hover,
  html.dark body #view-mail .view-footer-actions > button:hover {
    background: linear-gradient(180deg, rgba(43, 176, 255, 0.18) 0%, rgba(43, 176, 255, 0.08) 100%) !important;
    border-color: rgba(43, 176, 255, 0.40) !important;
    color: #f1f5f9 !important;
  }
}

/* ─────────────────────────────────────────────────────────
   REDUCED MOTION
   ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body .mp-proj-tab,
  body #view-kva .view-footer-actions > button,
  body #view-rechnung .view-footer-actions > button, body #view-mail .view-footer-actions > button {
    transition: none !important;
  }
  body .mp-proj-tab:hover,
  body #view-kva .view-footer-actions > button:hover,
  body #view-rechnung .view-footer-actions > button:hover,  body #view-mail .view-footer-actions > button:hover,
  body .mp-proj-tab.is-active:hover,
  body #view-kva .view-footer-actions > button.btn-primary:hover,
  body #view-rechnung .view-footer-actions > button.btn-primary:hover, body #view-mail .view-footer-actions > button.btn-primary:hover {
    transform: none !important;
  }
}

/* =========================================================
   POSITIONS-ADD-BUTTONS (KVA + Rechnungen "+Hinzufügen" / "Titel")
   ========================================================= */
body .mp-pos-add-btn {
  padding: 10px 18px !important;
  border-radius: 12px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transition:
    background 160ms cubic-bezier(0.4, 0, 0.2, 1),
    color 160ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 160ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 120ms ease !important;
}
/* Secondary "Titel" → Glass-Pill (wie Settings-Inactive) */
body .btn-secondary.mp-pos-add-btn {
  background: linear-gradient(180deg, rgba(var(--mp-flaeche-rgb), 0.92) 0%, rgba(var(--mp-flaeche-2-rgb), 0.78) 100%) !important;
  border: 1px solid rgba(43, 176, 255, 0.18) !important;
  color: rgb(var(--mp-t2-334155)) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 1px 2px rgba(15, 23, 42, 0.03),
    0 4px 10px -4px rgba(15, 23, 42, 0.05) !important;
  -webkit-backdrop-filter: blur(8px) saturate(140%);
          backdrop-filter: blur(8px) saturate(140%);
}
/* Primary "+ Hinzufügen" → Blue-Gradient (Brand-CTA) */
body .btn-primary.mp-pos-add-btn {
  background: linear-gradient(135deg, #2bb0ff 0%, #1d8de0 100%) !important;
  border: 1px solid transparent !important;
  color: #ffffff !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 8px 20px -6px rgba(43, 176, 255, 0.45),
    0 2px 4px rgba(43, 176, 255, 0.18) !important;
}
body .mp-pos-add-btn .mp-plus {
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  margin-right: 2px;
}
@media (hover: hover) {
  body .btn-secondary.mp-pos-add-btn:hover {
    background: linear-gradient(180deg, rgba(var(--mp-flaeche-rgb), 0.98) 0%, rgba(var(--mp-f2-f0f7ff), 0.92) 100%) !important;
    border-color: rgba(43, 176, 255, 0.32) !important;
    color: rgb(var(--mp-t1-0a1729)) !important;
    transform: translateY(-1px) !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.75) inset,
      0 8px 18px -6px rgba(43, 176, 255, 0.28),
      0 2px 6px -2px rgba(15, 23, 42, 0.06) !important;
  }
  body .btn-primary.mp-pos-add-btn:hover {
    background: linear-gradient(135deg, #1aa0f0 0%, #1378c4 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.3) inset,
      0 12px 26px -6px rgba(43, 176, 255, 0.55),
      0 4px 8px rgba(43, 176, 255, 0.22) !important;
  }
}
body .mp-pos-add-btn:active {
  transform: translateY(0) scale(0.98) !important;
  transition-duration: 80ms !important;
}

/* Dark-Mode */
html.dark body .btn-secondary.mp-pos-add-btn {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.78) 0%, rgba(15, 23, 42, 0.62) 100%) !important;
  border-color: rgba(43, 176, 255, 0.20) !important;
  color: #cbd5e1 !important;
}

/* =========================================================
   TOPBAR — Brand-Logo + Schlichter Text (2026-05-18 v4)
   Schlicht: Logo-Tile (neutral, kein Blau) + "MalerPlus" als
   dunkler Schrift-Block (kein Gradient). Logo nicht overflow-
   beschnitten — kleineres Bild im Tile sitzt mit Atemraum.
   ========================================================= */

/* Logo-Tile — neutrale Surface, kein blauer Glow.
   2026-05-18: Background-Image-Trick statt <img> — vermeidet Inline-Baseline-
   Quirk + Whitespace im Icon-Asset → garantiert pixel-perfekte Zentrierung. */
body .topbar-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background:
    url('/assets/img/malerplus-icon-256.webp') center center / 26px 26px no-repeat,
    linear-gradient(180deg, rgb(var(--mp-flaeche-rgb)) 0%, rgb(var(--mp-grund-rgb)) 100%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 2px 6px -2px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  transition:
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
body .topbar-brand:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 6px 14px -4px rgba(15, 23, 42, 0.12);
}
/* <img>-Tag visuell ausblenden (Background-Image im Tile übernimmt) */
body .topbar-brand .mp-topbar-brand-logo {
  width: 0 !important;
  height: 0 !important;
  display: block;
  opacity: 0;
  pointer-events: none;
}

/* "MalerPlus" Text — schlicht dunkel, ohne Gradient */
body .topbar-titles .topbar-app {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: rgb(var(--mp-t1-0c1526));
  background: none;
  -webkit-text-fill-color: initial;
}

/* Clock-Pill (status-pill) — 2026-05-18 refined: subtler, neutraler, kein
   dicker Brand-Ring. Brand-Blue nur dezent als Akzent auf der Time selbst. */
body .topbar-right .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: rgb(var(--mp-t2-475569));
  min-height: 32px;
  transition: background 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
body .topbar-right .status-pill:hover {
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.09);
}
body .topbar-right .status-pill .status-clock {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: rgb(var(--mp-t1-0c1526));
  letter-spacing: 0.01em;
}
/* Dezenter Brand-Blue Dot links vom Time (Pulse, identifiziert als Live-Clock) */
body .topbar-right .status-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2bb0ff;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(43, 176, 255, 0.18);
}

/* Dark-Mode Topbar */
/* ⚠ MP-20260908-001 (08.09.2026): Hier fehlte das Logo.
   Marcel: "mein Logo in der topbar ist weg".

   Die Light-Regel weiter oben setzt `background` als KURZFORM mit zwei
   Schichten — dem Logo-Bild und einem Verlauf. Diese Regel setzte
   `background` ebenfalls als Kurzform, aber nur mit dem Verlauf. Eine
   Kurzform setzt alle Teil-Eigenschaften zurueck, also auch
   background-image: das Logo verschwand im dunklen Theme vollstaendig.

   Das <img> daneben kann nicht einspringen — es wird 20 Zeilen weiter
   oben bewusst auf width/height 0 gesetzt, weil "Background-Image im Tile
   uebernimmt". Im Dark uebernahm aber nichts mehr.

   Der Fehler ist unabhaengig von der Farbmigration und bestand schon
   vorher; er faellt nur auf, wenn man den Dark Mode genau ansieht.
   Behoben, indem die Bildschicht hier mit aufgefuehrt wird. */
html.dark body .topbar-brand {
  background:
    url('/assets/img/malerplus-icon-256.webp') center center / 26px 26px no-repeat,
    linear-gradient(180deg, rgba(var(--mp-flaeche-rgb), 0.95) 0%, rgba(var(--mp-f2-f4f7fb), 0.92) 100%);
  border-color: rgba(43, 176, 255, 0.30);
}
html.dark body .topbar-titles .topbar-app {
  background: linear-gradient(135deg, #f8fafc 0%, #5cc4ff 50%, #2bb0ff 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
html.dark body .topbar-right .status-pill {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.78) 0%, rgba(15, 23, 42, 0.62) 100%);
  border-color: rgba(43, 176, 255, 0.32);
  color: #5cc4ff;
}
html.dark body .topbar-right .status-pill .status-clock {
  color: #5cc4ff;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  body .mp-pos-add-btn,
  body .topbar-brand,
  body .topbar-left {
    transition: none !important;
  }
  body .topbar-brand:hover,
  body .topbar-left:hover,
  body .btn-primary.mp-pos-add-btn:hover,
  body .btn-secondary.mp-pos-add-btn:hover {
    transform: none !important;
  }
}

/* =========================================================
   DASHBOARD HERO — Premium App-Einstieg (2026-05-18)
   "Guten Morgen" + KPI-Cards. Memory-Guard: Launch-Tiles +
   Section-Header bleiben unverändert, nur Hero + KPI Premium.
   ========================================================= */

/* Hero-Card schlicht wie der Studio-Header — neutrale Glass-Surface,
   kein blauer Glow, dezenter Brand-Hint nur als feine Top-Accent-Linie. */
body .dash-hero-card {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgb(var(--mp-flaeche-rgb)) 0%, rgb(var(--mp-f2-fafbfd)) 100%) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 1px 2px rgba(15, 23, 42, 0.03),
    0 12px 32px -14px rgba(15, 23, 42, 0.08) !important;
}
body .dash-hero-card > * {
  position: relative;
  z-index: 1;
}

/* Greeting-Kicker → dezent blau-grau (wie "MALERPLUS STUDIO" im Studio-Header) */
body .dash-greeting-kicker {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgb(var(--mp-t3-64748b)) !important;
  margin-bottom: 6px !important;
}

/* "Guten Morgen" — schlicht dunkler Text, kein Blue-Gradient */
body .dash-greeting-name {
  font-size: clamp(28px, 3.4vw, 38px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.028em !important;
  line-height: 1.05 !important;
  color: rgb(var(--mp-t1-0c1526)) !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
}

/* Status + Quote subtle ausbalancieren */
body .dash-greeting-status {
  font-weight: 500 !important;
  color: rgb(var(--mp-t2-475569)) !important;
}
body .dash-greeting-quote {
  font-style: italic;
  color: rgb(var(--mp-t3-64748b));
  font-weight: 400;
}

/* Datum rechts als kleine Premium-Pill */
body .dash-greeting-date {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(var(--mp-flaeche-rgb), 0.7);
  border: 1px solid rgba(43, 176, 255, 0.18);
  color: rgb(var(--mp-t2-475569));
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 2px 6px -2px rgba(43, 176, 255, 0.15);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
          backdrop-filter: blur(8px) saturate(140%);
}

/* KPI-Cards Premium-Tiefe — Color-Coding (rot/blau) bleibt erhalten,
   nur Border/Shadow + Hover werden vereinheitlicht. */
body .dash-kpi {
  position: relative;
  isolation: isolate;
  border-radius: 16px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 1px 2px rgba(15, 23, 42, 0.03),
    0 10px 24px -12px rgba(15, 23, 42, 0.08) !important;
  transition:
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
body .dash-kpi:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 1px 3px rgba(15, 23, 42, 0.04),
    0 16px 32px -12px rgba(15, 23, 42, 0.14) !important;
}
/* KPI-Label premium */
body .dash-kpi .dash-kpi-label {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgb(var(--mp-t3-64748b)) !important;
}
/* KPI-Value größer & kräftiger */
body .dash-kpi .dash-kpi-value {
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.028em !important;
  line-height: 1.1 !important;
}

/* Aktualisieren-Link Premium */
body .dash-section-link {
  color: #1485d6 !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em;
  font-size: 13px;
}
body .dash-section-link:hover {
  color: #0a6fb8 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================
   RECORD-FILTER-PILLS (Rechnungen/Angebote Status + Typ-Filter)
   Container + Items von 999px Pill auf 12px rounded-rect.
   ========================================================= */
body .mp-record-filters {
  border-radius: 12px !important;
}
body .mp-record-filter-pill {
  border-radius: 10px !important;
}
/* Count-Badge bleibt rund — das ist ein numerischer Indikator */

/* =========================================================
   WIDGETS-CARDS (Anfrage/Termin) — Toggle-Fix + Premium-Buttons
   Fix Doppel-Toggle: mp-safe-style-patch.css macht alle Checkboxes
   global 22x22 Apple-Style. Das input.mp-widget-toggle blieb sichtbar
   neben dem Custom-Track. Erzwungenes Versteck:
   ========================================================= */
body .mp-widget-toggle input,
body .mp-widget-toggle input[type="checkbox"] {
  -webkit-appearance: none !important;
          appearance: none !important;
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
body .mp-widget-toggle input::before,
body .mp-widget-toggle input[type="checkbox"]::before {
  display: none !important;
  content: none !important;
}

/* Code-kopieren-Button + Live-Vorschau-Link → Premium-Look */
body .mp-widget-copy {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(var(--mp-flaeche-rgb), 0.92) 0%, rgba(var(--mp-flaeche-2-rgb), 0.78) 100%) !important;
  border: 1px solid rgba(43, 176, 255, 0.22) !important;
  color: rgb(var(--mp-t2-334155)) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 4px 10px -4px rgba(43, 176, 255, 0.18) !important;
  cursor: pointer;
  transition:
    background 160ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 160ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 120ms ease,
    box-shadow 200ms ease !important;
}
@media (hover: hover) {
  body .mp-widget-copy:hover {
    background: linear-gradient(180deg, rgba(var(--mp-flaeche-rgb), 0.98) 0%, rgba(var(--mp-f2-f0f7ff), 0.94) 100%) !important;
    border-color: rgba(43, 176, 255, 0.40) !important;
    transform: translateY(-1px) !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.75) inset,
      0 6px 16px -4px rgba(43, 176, 255, 0.32),
      0 2px 6px -2px rgba(15, 23, 42, 0.06) !important;
  }
}

body .mp-widget-preview-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(43,176,255,0.10) 0%, rgba(43,176,255,0.04) 100%) !important;
  border: 1px solid rgba(43, 176, 255, 0.22) !important;
  color: #1485d6 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}
@media (hover: hover) {
  body .mp-widget-preview-link:hover {
    background: linear-gradient(180deg, rgba(43,176,255,0.16) 0%, rgba(43,176,255,0.08) 100%) !important;
    border-color: rgba(43, 176, 255, 0.40) !important;
    transform: translateY(-1px) !important;
  }
}

/* =========================================================
   INTEGRATIONEN — Lexoffice-Buttons (Verbinden/Trennen/Ping)
   Buttons rendern aktuell voll-Breite & voll-Pill (eine andere
   .form-group-button-Regel greift). Hier mit ID-Spezifität
   Premium-Look erzwingen: rounded-rect 12px, auto-width.
   ========================================================= */
body #btnLexofficeConnect,
body #btnLexofficeDisconnect,
body #btnLexofficePing {
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 10px 20px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition:
    background 160ms cubic-bezier(0.4, 0, 0.2, 1),
    color 160ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 160ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 120ms ease,
    box-shadow 200ms ease !important;
}

/* Verbinden = Primary Blue-Gradient */
body #btnLexofficeConnect {
  background: linear-gradient(135deg, #2bb0ff 0%, #1d8de0 100%) !important;
  border: 1px solid transparent !important;
  color: #ffffff !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 8px 20px -6px rgba(43, 176, 255, 0.45),
    0 2px 4px rgba(43, 176, 255, 0.18) !important;
}
@media (hover: hover) {
  body #btnLexofficeConnect:hover {
    background: linear-gradient(135deg, #1aa0f0 0%, #1378c4 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.3) inset,
      0 12px 26px -6px rgba(43, 176, 255, 0.55),
      0 4px 8px rgba(43, 176, 255, 0.22) !important;
  }
}

/* Trennen = Secondary Glass-Pill */
body #btnLexofficeDisconnect {
  background: linear-gradient(180deg, rgba(var(--mp-flaeche-rgb), 0.92) 0%, rgba(var(--mp-flaeche-2-rgb), 0.78) 100%) !important;
  border: 1px solid rgba(43, 176, 255, 0.18) !important;
  color: rgb(var(--mp-t2-334155)) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 1px 2px rgba(15, 23, 42, 0.03),
    0 4px 10px -4px rgba(15, 23, 42, 0.05) !important;
}
@media (hover: hover) {
  body #btnLexofficeDisconnect:hover {
    background: linear-gradient(180deg, rgba(var(--mp-flaeche-rgb), 0.98) 0%, rgba(var(--mp-f2-f0f7ff), 0.92) 100%) !important;
    border-color: rgba(43, 176, 255, 0.32) !important;
    color: rgb(var(--mp-t1-0a1729)) !important;
    transform: translateY(-1px) !important;
  }
}

/* Ping = kleiner Ghost-Pill */
body #btnLexofficePing {
  background: transparent !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  color: rgb(var(--mp-t3-64748b)) !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
}
@media (hover: hover) {
  body #btnLexofficePing:hover {
    background: rgba(15, 23, 42, 0.04) !important;
    border-color: rgba(43, 176, 255, 0.22) !important;
    color: #1485d6 !important;
  }
}

/* LEXOFFICE API-KEY Input — Premium-Look */
body #lexofficeApiKeyInput {
  width: 100% !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  background: linear-gradient(180deg, rgba(var(--mp-flaeche-rgb), 0.96) 0%, rgba(var(--mp-f2-fafbfd), 0.92) 100%) !important;
  font-size: 14px !important;
  color: rgb(var(--mp-t1-0a1729)) !important;
  font-family: ui-monospace, Menlo, monospace !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 1px 2px rgba(15, 23, 42, 0.03) !important;
  transition: border-color 160ms ease, box-shadow 200ms ease !important;
}
body #lexofficeApiKeyInput:focus {
  outline: none !important;
  border-color: rgba(43, 176, 255, 0.50) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 0 0 3px rgba(43, 176, 255, 0.18) !important;
}

/* Status-Box Premium-Look */
body #lexofficeStatusBox {
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(var(--mp-flaeche-2-rgb), 0.78) 0%, rgba(var(--mp-f2-f1f5f9), 0.68) 100%) !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  color: rgb(var(--mp-t2-475569)) !important;
  padding: 12px 14px !important;
}

/* "Verbundene Systeme" Provider-Items (Lexoffice etc.) */
body #mpAccProvidersList > * {
  padding: 14px 16px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  background: linear-gradient(180deg, rgba(var(--mp-flaeche-rgb), 0.96) 0%, rgba(var(--mp-f2-fafbfd), 0.92) 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 2px 6px -2px rgba(15, 23, 42, 0.04) !important;
  transition: border-color 160ms ease, transform 120ms ease, box-shadow 200ms ease !important;
}
@media (hover: hover) {
  body #mpAccProvidersList > *:hover {
    border-color: rgba(43, 176, 255, 0.22) !important;
    transform: translateY(-1px) !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.75) inset,
      0 8px 18px -8px rgba(43, 176, 255, 0.22) !important;
  }
}

/* =========================================================
   SETTINGS · FORM-INPUTS UNIVERSAL POLISH (2026-05-18)
   Alle Inputs/Selects/Textareas in Settings-Cards auf Premium.
   Inkl. Sub-Card-Container (mpWorkerAccessCard etc.).
   ========================================================= */
body #view-settings .settings-card input[type="text"],
body #view-settings .settings-card input[type="email"],
body #view-settings .settings-card input[type="tel"],
body #view-settings .settings-card input[type="number"],
body #view-settings .settings-card input[type="password"],
body #view-settings .settings-card input[type="url"],
body #view-settings .settings-card select,
body #view-settings .settings-card textarea {
  width: 100% !important;
  padding: 11px 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  background: linear-gradient(180deg, rgba(var(--mp-flaeche-rgb), 0.96) 0%, rgba(var(--mp-f2-fafbfd), 0.92) 100%) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: rgb(var(--mp-t1-0a1729)) !important;
  letter-spacing: -0.005em !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 1px 2px rgba(15, 23, 42, 0.03) !important;
  transition: border-color 160ms ease, box-shadow 200ms ease, background 160ms ease !important;
}
body #view-settings .settings-card input::placeholder,
body #view-settings .settings-card textarea::placeholder {
  color: #94a3b8 !important;
}
body #view-settings .settings-card input:focus,
body #view-settings .settings-card select:focus,
body #view-settings .settings-card textarea:focus {
  outline: none !important;
  border-color: rgba(43, 176, 255, 0.50) !important;
  background: rgb(var(--mp-flaeche-rgb)) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 0 0 3px rgba(43, 176, 255, 0.16) !important;
}
body #view-settings .settings-card select {
  -webkit-appearance: none;
          appearance: none;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(250,251,253,0.92) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: 0 0, right 12px center !important;
  background-size: auto, 18px !important;
  padding-right: 38px !important;
  cursor: pointer;
}

/* Form-Labels (Kicker-Style "NAME", "E-MAIL") */
body #view-settings .settings-card .form-group > label,
body #view-settings .settings-card .form-group > .label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: rgb(var(--mp-t3-64748b)) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Sub-Card Container (mpWorkerAccessCard mit grey border) */
body #view-settings #mpWorkerAccessCard {
  padding: 18px 20px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  background: linear-gradient(180deg, rgba(var(--mp-f1-fcfdff), 0.96) 0%, rgba(var(--mp-flaeche-2-rgb), 0.88) 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 1px 2px rgba(15, 23, 42, 0.03),
    0 8px 24px -12px rgba(15, 23, 42, 0.08) !important;
}

/* =========================================================
   ABO & ABRECHNUNG (Settings · settings-cat="abo") (2026-05-18)
   ========================================================= */

/* Summary war redundant zum Card-Header → ausblenden, details bleibt
   immer offen (open-Attribut im HTML). */
body #mpBillingDetails > summary.mp-settings-summary {
  display: none !important;
}

/* Status-Container (Settings · settings-cat="abo") (MP-20261004-001) */
body #mpBillingStatusText {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
}
body #mpBillingStatusText::before {
  display: none !important;
  content: none !important;
}

/* MalerPlus Premium Status-Badge (.mp-sub-badge) */
#view-settings .mp-sub-badge,
body #view-settings .mp-sub-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important;
  user-select: none !important;
}
#view-settings .mp-sub-badge::before,
body #view-settings .mp-sub-badge::before {
  content: "" !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

/* Aktiv (Emerald) */
#view-settings .mp-sub-active,
body #view-settings .mp-sub-active {
  background: rgba(16, 185, 129, 0.10) !important;
  border-color: rgba(16, 185, 129, 0.24) !important;
  color: #065f46 !important;
}
#view-settings .mp-sub-active::before,
body #view-settings .mp-sub-active::before {
  background: #10b981 !important;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.45) !important;
}

/* Testphase (MalerPlus Cyan/Blue) */
#view-settings .mp-sub-trial,
body #view-settings .mp-sub-trial {
  background: rgba(43, 176, 255, 0.10) !important;
  border-color: rgba(43, 176, 255, 0.24) !important;
  color: #0369a1 !important;
}
#view-settings .mp-sub-trial::before,
body #view-settings .mp-sub-trial::before {
  background: #2bb0ff !important;
  box-shadow: 0 0 6px rgba(43, 176, 255, 0.45) !important;
}

/* Warnung / Pausiert / Kündigung vorgemerkt (Amber) */
#view-settings .mp-sub-warning,
body #view-settings .mp-sub-warning {
  background: rgba(245, 158, 11, 0.10) !important;
  border-color: rgba(245, 158, 11, 0.24) !important;
  color: #92400e !important;
}
#view-settings .mp-sub-warning::before,
body #view-settings .mp-sub-warning::before {
  background: #f59e0b !important;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.45) !important;
}

/* Danger / Gekündigt / Abgelaufen (Red) */
#view-settings .mp-sub-danger,
body #view-settings .mp-sub-danger {
  background: rgba(239, 68, 68, 0.10) !important;
  border-color: rgba(239, 68, 68, 0.24) !important;
  color: #991b1b !important;
}
#view-settings .mp-sub-danger::before,
body #view-settings .mp-sub-danger::before {
  background: #ef4444 !important;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.45) !important;
}

/* Neutral */
#view-settings .mp-sub-neutral,
body #view-settings .mp-sub-neutral {
  background: rgba(100, 116, 139, 0.08) !important;
  border-color: rgba(100, 116, 139, 0.20) !important;
  color: #334155 !important;
}
#view-settings .mp-sub-neutral::before,
body #view-settings .mp-sub-neutral::before {
  background: #94a3b8 !important;
}

/* Action-Container (Buttons Row) */
body #mpBillingDetails .mp-settings-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
  margin-top: 6px !important;
  margin-bottom: 12px !important;
}

/* Buttons: "Rechnungen & Belege", "Abo verwalten", "Abo kündigen" */
body #btnBillingInvoices,
body #btnBillingManage,
body #btnBillingCancel,
body #btnAboPauseEnde {
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  transition: background 150ms ease, border-color 150ms ease, transform 120ms ease, box-shadow 150ms ease !important;
}

/* Rechnungen & Belege = Veredelter MalerPlus Secondary-Button */
body #btnBillingInvoices {
  padding: 0 18px !important;
  background: rgb(var(--mp-flaeche-rgb, 255, 255, 255)) !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  color: #1e293b !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}
body #btnBillingInvoices svg {
  opacity: 0.75 !important;
  color: #0284c7 !important;
  flex-shrink: 0 !important;
}
body #btnBillingInvoices:hover {
  background: rgba(43, 176, 255, 0.04) !important;
  border-color: rgba(43, 176, 255, 0.35) !important;
  color: #0f172a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px -2px rgba(15, 23, 42, 0.08) !important;
}

/* Abo verwalten / Upgraden = Primary Blue-Gradient */
body #btnBillingManage {
  padding: 0 20px !important;
  background: linear-gradient(135deg, #2bb0ff 0%, #1278c8 100%) !important;
  border: 1px solid transparent !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(18, 120, 200, 0.28) !important;
}
body #btnBillingManage:hover {
  background: linear-gradient(135deg, #1aa0f0 0%, #0e6ab4 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(18, 120, 200, 0.38) !important;
}

/* Abo kündigen = Dezent Ghost */
body #btnBillingCancel {
  padding: 0 16px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: #64748b !important;
}
body #btnBillingCancel:hover {
  background: rgba(239, 68, 68, 0.05) !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
  color: #dc2626 !important;
  transform: translateY(-1px) !important;
}

/* End-Info / Cancel-Hint Subtext */
body #mpBillingCancelHint,
body #mpBillingEndInfo {
  margin-top: 4px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  background: rgba(15, 23, 42, 0.03) !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  color: rgb(var(--mp-t3-64748b)) !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
}

/* Invite-Action-Buttons (Mail/WhatsApp/Link) Premium
   2026-06-05: kompaktes Grid in begrenzter Breite — Mail-Button prominent
   über die volle Blockbreite, WhatsApp + Link als 2 Spalten darunter.
   Begrenzt via max-width, damit die Buttons nicht über den ganzen
   Desktop-Bildschirm gestreckt werden. */
body #view-settings .mp-invite-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 10px !important;
  margin-top: 14px !important;
  max-width: 740px !important;
}
body #view-settings .mp-invite-actions .btn,
body #view-settings .mp-invite-actions .btn-primary {
  width: 100% !important;             /* füllt die Grid-Zelle, nicht den Screen */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 11px 18px !important;
  min-height: 44px !important;
  border-radius: 12px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  cursor: pointer !important;
  transition: background 160ms ease, border-color 160ms ease, transform 120ms ease, box-shadow 200ms ease !important;
}
/* Mail-Button bleibt in Spalte 1 (etwas breiter) — alle drei in EINER Reihe */
body #view-settings .mp-invite-actions .btn:not(.btn-primary) {
  background: linear-gradient(180deg, rgba(var(--mp-flaeche-rgb), 0.92) 0%, rgba(var(--mp-flaeche-2-rgb), 0.78) 100%) !important;
  border: 1px solid rgba(43, 176, 255, 0.18) !important;
  color: rgb(var(--mp-t2-334155)) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 1px 2px rgba(15, 23, 42, 0.03),
    0 4px 10px -4px rgba(15, 23, 42, 0.05) !important;
}
body #view-settings .mp-invite-actions .btn-primary {
  background: linear-gradient(135deg, #2bb0ff 0%, #1d8de0 100%) !important;
  border: 1px solid transparent !important;
  color: #ffffff !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 8px 20px -6px rgba(43, 176, 255, 0.45),
    0 2px 4px rgba(43, 176, 255, 0.18) !important;
}
@media (hover: hover) {
  body #view-settings .mp-invite-actions .btn:not(.btn-primary):hover {
    background: linear-gradient(180deg, rgba(var(--mp-flaeche-rgb), 0.98) 0%, rgba(var(--mp-f2-f0f7ff), 0.92) 100%) !important;
    border-color: rgba(43, 176, 255, 0.32) !important;
    color: rgb(var(--mp-t1-0a1729)) !important;
    transform: translateY(-1px) !important;
  }
  body #view-settings .mp-invite-actions .btn-primary:hover {
    background: linear-gradient(135deg, #1aa0f0 0%, #1378c4 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.3) inset,
      0 12px 26px -6px rgba(43, 176, 255, 0.55),
      0 4px 8px rgba(43, 176, 255, 0.22) !important;
  }
}
/* Tablet/schmaler Desktop: 3-in-Reihe wird zu eng → Mail voll oben, zwei darunter */
@media (max-width: 600px) {
  body #view-settings .mp-invite-actions {
    grid-template-columns: 1fr 1fr !important;
    max-width: 100% !important;
  }
  body #view-settings .mp-invite-actions .btn-primary {
    grid-column: 1 / -1 !important;
  }
}
/* Sehr schmale Phones: alle drei Aktionen einspaltig */
@media (max-width: 420px) {
  body #view-settings .mp-invite-actions {
    grid-template-columns: 1fr !important;
  }
  body #view-settings .mp-invite-actions .btn-primary {
    grid-column: 1 !important;
  }
}

/* Dashboard Reduced-Motion */
@media (prefers-reduced-motion: reduce) {
  body .dash-kpi {
    transition: none !important;
  }
  body .dash-kpi:hover {
    transform: none !important;
  }
  body .dash-greeting-kicker::before {
    animation: none !important;
  }
}

/* =========================================================
   DASHBOARD · PROJEKT-ÜBERSICHT + ANSTEHENDE TERMINE (2026-05-18)
   Section-Header bleibt unverändert (Memory-Guard), nur die Inner-
   Items und Container werden polished.
   ========================================================= */

/* Project-Card-Items (in dash-project-cards) */
body .dash-project-card {
  position: relative;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  background: linear-gradient(180deg, rgba(var(--mp-flaeche-rgb), 0.96) 0%, rgba(var(--mp-f2-fafbfd), 0.92) 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 1px 2px rgba(15, 23, 42, 0.03),
    0 4px 12px -6px rgba(15, 23, 42, 0.06) !important;
  transition:
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer;
}
@media (hover: hover) {
  body .dash-project-card:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(43, 176, 255, 0.24) !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.8) inset,
      0 1px 3px rgba(15, 23, 42, 0.04),
      0 12px 28px -10px rgba(43, 176, 255, 0.22) !important;
  }
}

/* Termin-Items rechts (dash-upcoming-item) */
body .dash-upcoming-item {
  position: relative;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-left: 1px solid rgba(15, 23, 42, 0.08) !important;
  background: linear-gradient(180deg, rgba(var(--mp-flaeche-rgb), 0.96) 0%, rgba(var(--mp-f2-fafbfd), 0.92) 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 1px 2px rgba(15, 23, 42, 0.03),
    0 4px 12px -6px rgba(15, 23, 42, 0.06) !important;
  transition:
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
body .dash-upcoming-title,
body .dash-upcoming-meta {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  line-height: 1.35 !important;
}
body .dash-upcoming-meta {
  display: block !important;
  margin-top: 5px !important;
}
body .dash-upcoming-item.is-highlight,
body .dash-upcoming-item.is-appointment {
  border-left: 1px solid rgba(15, 23, 42, 0.08) !important;
}
@media (hover: hover) {
  body .dash-upcoming-item:hover {
    transform: translateY(-1px) !important;
    border-color: rgba(43, 176, 255, 0.24) !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.8) inset,
      0 1px 3px rgba(15, 23, 42, 0.04),
      0 12px 28px -10px rgba(43, 176, 255, 0.22) !important;
  }
}

/* =========================================================
   PLANNER · VIEW-TOGGLE + NAV (2026-05-18)
   Action-Toolbar im Baustellenplanung-Modul: Active-State der
   View-Toggles (Woche/Monat/Übersicht) prominenter, Zeitraum-Nav
   konsistent als Glass-Pills.
   ========================================================= */

/* Inactive: Glass-Pill */
body .dash-planner-head-actions .mp-btn.btn-ghost.btn-sm,
body #btnPlannerPrevWeek,
body #btnPlannerNextWeek {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(var(--mp-flaeche-rgb), 0.92) 0%, rgba(var(--mp-flaeche-2-rgb), 0.78) 100%) !important;
  border: 1px solid rgba(43, 176, 255, 0.14) !important;
  color: rgb(var(--mp-t2-334155)) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  cursor: pointer !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 1px 2px rgba(15, 23, 42, 0.03) !important;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms ease, box-shadow 200ms ease !important;
}

/* Active: Blue-Gradient Pill — klar erkennbar */
body .dash-planner-head-actions .mp-btn.btn-ghost.btn-sm.is-active {
  background: linear-gradient(135deg, #2bb0ff 0%, #1d8de0 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 8px 20px -6px rgba(43, 176, 255, 0.45),
    0 2px 4px rgba(43, 176, 255, 0.18) !important;
}

@media (hover: hover) {
  body .dash-planner-head-actions .mp-btn.btn-ghost.btn-sm:not(.is-active):hover,
  body #btnPlannerPrevWeek:hover,
  body #btnPlannerNextWeek:hover {
    background: linear-gradient(180deg, rgba(var(--mp-flaeche-rgb), 0.98) 0%, rgba(var(--mp-f2-f0f7ff), 0.92) 100%) !important;
    border-color: rgba(43, 176, 255, 0.32) !important;
    color: rgb(var(--mp-t1-0a1729)) !important;
    transform: translateY(-1px) !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.75) inset,
      0 6px 14px -4px rgba(43, 176, 255, 0.22),
      0 2px 4px -1px rgba(15, 23, 42, 0.04) !important;
  }
  body .dash-planner-head-actions .mp-btn.btn-ghost.btn-sm.is-active:hover {
    background: linear-gradient(135deg, #1aa0f0 0%, #1378c4 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.3) inset,
      0 12px 26px -6px rgba(43, 176, 255, 0.55),
      0 4px 8px rgba(43, 176, 255, 0.22) !important;
  }
}

/* "📅 Termin" CTA (dash-planner-appt-cta) bleibt Blue-Gradient */
body .dash-planner-appt-cta {
  background: linear-gradient(135deg, #2bb0ff 0%, #1d8de0 100%) !important;
  border: 1px solid transparent !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  font-weight: 600 !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 8px 20px -6px rgba(43, 176, 255, 0.45),
    0 2px 4px rgba(43, 176, 255, 0.18) !important;
}

/* Week-Label-Badge "KW 21 · 18.05. – 23.05." → klarer als Info-Pill */
body .dash-planner-week-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(43,176,255,0.10) 0%, rgba(43,176,255,0.04) 100%) !important;
  border: 1px solid rgba(43, 176, 255, 0.22) !important;
  color: #1485d6 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  font-variant-numeric: tabular-nums;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 1px 2px rgba(43, 176, 255, 0.12) !important;
}

/* =========================================================
   PLANNER · PROJECT-CELLS + EMPTY-ADD-STATES (2026-05-18)
   Project-Zellen (inkl. Abwesenheiten-Zeile) und die Empty-Add-
   Slots auf Premium-Style ziehen. Gestrichelte Borders werden zu
   solid Brand-Tint umgewandelt — wirkt nicht mehr "kaputt-leer".
   ========================================================= */

body .dash-planner-project-cell {
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(var(--mp-flaeche-rgb), 0.96) 0%, rgba(var(--mp-f2-fafbfd), 0.92) 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 1px 2px rgba(15, 23, 42, 0.03),
    0 4px 12px -6px rgba(15, 23, 42, 0.06) !important;
}

/* Abwesenheits-Zeile: dezenter Brand-Hint mit Vacation-Akzent */
body .dash-planner-row.is-absences-row .dash-planner-project-cell,
body .dash-planner-project-cell:has(.dash-planner-project-title:is([data-row-type="absence"])),
body .dash-planner-project-cell.is-absence-row {
  background: linear-gradient(135deg, rgba(22,163,74,0.06) 0%, rgba(43,176,255,0.05) 100%) !important;
  border-color: rgba(22, 163, 74, 0.20) !important;
}

/* Empty-Add-Slots (Termin / Abwesenheit) — solid Brand statt dashed */
body .dash-planner-slot-empty.dash-planner-appt-add,
body .dash-planner-slot-empty.dash-planner-absence-add {
  border: 1px solid rgba(139, 92, 246, 0.20) !important;
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.04) 0%, rgba(139, 92, 246, 0.02) 100%) !important;
  border-radius: 10px !important;
  transition: background 160ms ease, border-color 160ms ease, transform 120ms ease !important;
}
body .dash-planner-slot-empty.dash-planner-absence-add {
  border-color: rgba(22, 163, 74, 0.22) !important;
  background: linear-gradient(180deg, rgba(22, 163, 74, 0.05) 0%, rgba(22, 163, 74, 0.02) 100%) !important;
}
@media (hover: hover) {
  body .dash-planner-slot-empty.dash-planner-appt-add:hover {
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.10) 0%, rgba(139, 92, 246, 0.06) 100%) !important;
    border-color: rgba(139, 92, 246, 0.40) !important;
    transform: translateY(-1px) !important;
  }
  body .dash-planner-slot-empty.dash-planner-absence-add:hover {
    background: linear-gradient(180deg, rgba(22, 163, 74, 0.10) 0%, rgba(22, 163, 74, 0.05) 100%) !important;
    border-color: rgba(22, 163, 74, 0.40) !important;
    transform: translateY(-1px) !important;
  }
}

/* P0-Fix 2026-05-20: Termine-Slot mit vielen Terminen wächst nicht mehr
   unbegrenzt — Höhe gedeckelt + intern scrollbar (Apple-Kalender-Verhalten).
   Verhindert, dass ein voller Tag die ganze Planer-Zeile aufbläht. */
body .dash-planner-slot.is-appt-slot {
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
}
body .dash-planner-slot.is-appt-slot::-webkit-scrollbar { width: 6px; }
body .dash-planner-slot.is-appt-slot::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.30);
  border-radius: 3px;
}

/* P0-Fix 2026-05-20: kompakter "+ Termin"-Button an Tagen, die bereits
   einen Termin haben — weiterer Termin am selben Tag möglich. */
body .dash-planner-appt-add-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 4px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 600;
  /* 01.08.2026: gleicher Ton wie der andere „+ Termin"-Knopf
     (dashboard.css). Sonst stehen zwei gleich aussehende Knoepfe in
     derselben Ansicht in zwei verschiedenen Farben. */
  color: #6d28d9;
  border: 1px dashed rgba(139, 92, 246, 0.32);
  border-radius: 8px;
  background: rgba(139, 92, 246, 0.04);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 120ms ease;
}
@media (hover: hover) {
  body .dash-planner-appt-add-more:hover {
    background: rgba(139, 92, 246, 0.10);
    border-color: rgba(139, 92, 246, 0.45);
    transform: translateY(-1px);
  }
}

/* =========================================================
   PLANNER · MONTHS-VIEW (2026-05-18)
   Day-Cells im Monat: Premium-Glass-Surface, dezenter Hover-Lift,
   Heute-Cell mit stärkerem Brand-Akzent, Weekend etwas zurück-
   tretend. Bleibt funktional als Drop-Target erkennbar.
   ========================================================= */
body .dash-planner-month-cell {
  border-radius: 14px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  background: linear-gradient(180deg, rgba(var(--mp-flaeche-rgb), 0.98) 0%, rgba(var(--mp-f1-fcfdff), 0.92) 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 1px 2px rgba(15, 23, 42, 0.02),
    0 4px 10px -6px rgba(15, 23, 42, 0.05) !important;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 120ms ease,
    box-shadow 200ms ease !important;
}
@media (hover: hover) {
  body .dash-planner-month-cell:hover {
    border-color: rgba(43, 176, 255, 0.22) !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.85) inset,
      0 1px 3px rgba(15, 23, 42, 0.03),
      0 8px 20px -10px rgba(43, 176, 255, 0.22) !important;
    transform: translateY(-1px) !important;
  }
}

/* Wochenende dezent (Slate-Tint) */
body .dash-planner-month-cell.is-weekend {
  background: linear-gradient(180deg, rgba(var(--mp-flaeche-3-rgb), 0.92) 0%, rgba(var(--mp-f3-e8eef6), 0.88) 100%) !important;
  border-color: rgba(15, 23, 42, 0.06) !important;
}

/* Outside-Month (vor/nachher) verblasst */
body .dash-planner-month-cell.is-outside {
  opacity: 0.55 !important;
  background: rgba(var(--mp-flaeche-2-rgb), 0.78) !important;
  box-shadow: none !important;
}

/* HEUTE-Cell — kräftiger Brand-Akzent */
body .dash-planner-month-cell.is-today {
  background:
    linear-gradient(135deg, rgba(43,176,255,0.08) 0%, rgba(43,176,255,0.02) 60%, rgba(var(--mp-flaeche-rgb), 0.95) 100%) !important;
  border: 1.5px solid rgba(43, 176, 255, 0.45) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 1px 3px rgba(43, 176, 255, 0.10),
    0 8px 22px -8px rgba(43, 176, 255, 0.30) !important;
}

/* Dark-Mode */
html.dark body .dash-planner-month-cell {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.72) 0%, rgba(15, 23, 42, 0.56) 100%) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
html.dark body .dash-planner-month-cell.is-weekend {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.62) 0%, rgba(15, 23, 42, 0.50) 100%) !important;
}
html.dark body .dash-planner-month-cell.is-today {
  background: linear-gradient(135deg, rgba(43,176,255,0.18) 0%, rgba(43,176,255,0.06) 60%, rgba(30,41,59,0.72) 100%) !important;
  border-color: rgba(43, 176, 255, 0.60) !important;
}

/* =========================================================
   PLANNER · MATRIX-VIEW (Mitarbeiter × KW) (2026-05-18)
   ========================================================= */
body .dash-planner-matrix-shell {
  border-radius: 16px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  background: linear-gradient(180deg, rgba(var(--mp-flaeche-rgb), 0.98) 0%, rgba(var(--mp-f2-fafbfd), 0.94) 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 1px 3px rgba(15, 23, 42, 0.03),
    0 8px 22px -12px rgba(15, 23, 42, 0.10) !important;
}

/* Header-Corner "MITARBEITER" + Week-Headers */
body .dash-planner-matrix-corner,
body .dash-planner-matrix-week-head {
  background: linear-gradient(180deg, rgba(var(--mp-flaeche-2-rgb), 0.95) 0%, rgba(var(--mp-flaeche-3-rgb), 0.90) 100%) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
  color: rgb(var(--mp-t2-475569)) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

/* Worker-Cell links */
body .dash-planner-matrix-worker {
  background: linear-gradient(180deg, rgba(var(--mp-f1-fcfdff), 0.95) 0%, rgba(var(--mp-flaeche-2-rgb), 0.92) 100%) !important;
  border-right: 1px solid rgba(15, 23, 42, 0.06) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
  font-weight: 600 !important;
  color: rgb(var(--mp-t1-0a1729)) !important;
}

/* KW-Cells (Drop-Zone Empty) */
body .dash-planner-matrix-cell {
  background: rgba(var(--mp-flaeche-rgb), 0.85) !important;
  border-right: 1px solid rgba(15, 23, 42, 0.04) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.04) !important;
  transition: background 160ms ease !important;
}
@media (hover: hover) {
  body .dash-planner-matrix-cell:hover {
    background: linear-gradient(180deg, rgba(43,176,255,0.06) 0%, rgba(43,176,255,0.02) 100%) !important;
  }
}

/* =========================================================
   TABLET-RESPONSIVE (2026-05-18 v2)
   Anpassungen für 768-1024px Geräte. Viele Pill-Reihen brauchen
   wrap, sonst overflow oder zu eng.
   ========================================================= */

/* Planner-Header-Actions: bei Tablet wrap erlauben */
@media (max-width: 1024px) {
  body .dash-planner-head-actions {
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-start !important;
  }
  body .dash-planner-week-badge {
    flex: 0 1 auto !important;
  }
  body .dash-planner-head-actions .mp-btn.btn-ghost.btn-sm,
  body #btnPlannerPrevWeek,
  body #btnPlannerNextWeek {
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
}
/* Tablet hochkant: kompakter */
@media (max-width: 820px) {
  body .dash-planner-head-actions {
    gap: 6px !important;
  }
  body .dash-planner-head-actions .mp-btn.btn-ghost.btn-sm,
  body #btnPlannerPrevWeek,
  body #btnPlannerNextWeek,
  body .dash-planner-appt-cta {
    padding: 7px 10px !important;
    font-size: 12.5px !important;
  }
  body .dash-planner-week-badge {
    font-size: 12px !important;
    padding: 7px 10px !important;
  }
}

/* Settings-Form Inputs auf Tablet: padding kompakter */
@media (max-width: 1024px) {
  body #view-settings .settings-card input,
  body #view-settings .settings-card select,
  body #view-settings .settings-card textarea {
    padding: 10px 12px !important;
    font-size: 13.5px !important;
  }
  body #view-settings #mpWorkerAccessCard {
    padding: 16px 18px !important;
  }
}

/* Coming-Soon Frame: Tablet-Padding */
@media (max-width: 1024px) {
  body .mp-cs-features {
    padding: 20px 22px !important;
  }
  body .mp-cs-countdown {
    gap: 10px !important;
  }
}

/* Topbar-Brand-Tile: Tablet kleiner */
@media (max-width: 1024px) {
  body .topbar-brand {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
  }
  body .topbar-brand .mp-topbar-brand-logo {
    width: 26px !important;
    height: 26px !important;
  }
}
@media (max-width: 820px) {
  body .topbar-titles .topbar-app {
    font-size: 14px !important;
  }
}

/* Lexoffice + Team-Invite Buttons: Tablet ggf. stacken */
@media (max-width: 820px) {
  body #btnLexofficeConnect,
  body #btnLexofficeDisconnect,
  body #btnLexofficePing {
    padding: 10px 16px !important;
    font-size: 13.5px !important;
  }
  body #view-settings .mp-invite-actions {
    gap: 6px !important;
  }
  body #view-settings .mp-invite-actions .btn,
  body #view-settings .mp-invite-actions .btn-primary {
    padding: 9px 14px !important;
    font-size: 13px !important;
  }
}

/* Planner Month-Cells: Tablet-Höhe reduzieren */
@media (max-width: 1024px) {
  body .dash-planner-month-cell {
    border-radius: 12px !important;
  }
}

/* Matrix-Shell horizontal scroll auf Tablet OK */
@media (max-width: 1024px) {
  body .dash-planner-matrix-shell {
    border-radius: 14px !important;
  }
}

/* Dashboard-Hero auf Tablet: Padding kleiner */
@media (max-width: 1024px) {
  body .dash-hero-card {
    border-radius: 18px !important;
  }
}

/* Planner readability: do not truncate calendar entry content in narrow cells. */
body .dash-planner-entry,
body .dash-planner-month-item {
  min-width: 0 !important;
}

body .dash-planner-entry-project,
body .dash-planner-month-item-project {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

body .dash-planner-entry-workers,
body .dash-planner-month-item-workers {
  width: 100% !important;
  max-width: 100% !important;
  align-items: flex-start !important;
  gap: 5px !important;
}

body .dash-planner-entry-worker-pill,
body .dash-planner-month-item .dash-planner-entry-worker-pill {
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  line-height: 1.25 !important;
  align-items: flex-start !important;
  letter-spacing: 0 !important;
}

body .dash-planner-entry-worker-pill::before,
body .dash-planner-month-item .dash-planner-entry-worker-pill::before {
  content: none !important;
  display: none !important;
}

body .dash-planner-entry-worker-pill-dot {
  margin-top: 3px !important;
  flex: 0 0 7px !important;
}

body .dash-planner-month-cell {
  min-height: 118px !important;
}

@media (max-width: 900px) {
  body .dash-planner-month-cell {
    min-height: 112px !important;
  }
}

/* =========================================================
   WEBSITE-STUDIO · OVERVIEW (Schnellaktionen + Status) (2026-05-18)
   ========================================================= */

/* Schnellaktion-Tiles */
body .mp-ws-overview-quick-card {
  position: relative;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(var(--mp-flaeche-rgb), 0.96) 0%, rgba(var(--mp-f2-fafbfd), 0.92) 100%) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  color: rgb(var(--mp-t1-0a1729)) !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 1px 2px rgba(15, 23, 42, 0.03),
    0 4px 12px -6px rgba(15, 23, 42, 0.06) !important;
  transition:
    background 160ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 160ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 120ms ease,
    box-shadow 200ms ease !important;
}
@media (hover: hover) {
  body .mp-ws-overview-quick-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(43, 176, 255, 0.32) !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.8) inset,
      0 1px 3px rgba(15, 23, 42, 0.04),
      0 14px 28px -10px rgba(43, 176, 255, 0.28) !important;
  }
  body .mp-ws-overview-quick-card:hover .mp-ws-overview-quick-arrow {
    transform: translateX(3px) !important;
    opacity: 1 !important;
  }
}

/* Icon-Tile innerhalb der Card */
body .mp-ws-overview-quick-icon {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(43,176,255,0.14) 0%, rgba(43,176,255,0.06) 100%) !important;
  border: 1px solid rgba(43, 176, 255, 0.18) !important;
  color: #1485d6 !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset !important;
}

/* Label */
body .mp-ws-overview-quick-label {
  flex: 1 1 auto !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  line-height: 1.3 !important;
}

/* Arrow rechts */
body .mp-ws-overview-quick-arrow {
  flex: 0 0 auto !important;
  color: #94a3b8 !important;
  opacity: 0.7 !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease !important;
}

/* Eyebrow "SCHNELLAKTIONEN" / "WEBSITE-STATUS" / "VORSCHAU-LINK" */
body .mp-ws-overview-eyebrow {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgb(var(--mp-t3-64748b)) !important;
  margin-bottom: 14px !important;
}

/* Status-Pill "● Aktiv" */
body .mp-ws-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
}
body .mp-ws-status-pill.is-live {
  background: linear-gradient(180deg, rgba(22,163,74,0.10) 0%, rgba(22,163,74,0.04) 100%) !important;
  border: 1px solid rgba(22, 163, 74, 0.28) !important;
  color: #15803d !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset !important;
}
body .mp-ws-status-pill.is-draft {
  background: linear-gradient(180deg, rgba(245,158,11,0.10) 0%, rgba(245,158,11,0.04) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.28) !important;
  color: #b45309 !important;
}
body .mp-ws-status-pill-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  box-shadow: 0 0 8px currentColor !important;
  flex-shrink: 0 !important;
}

/* Vorschau-URL Link */
body .mp-ws-overview-preview-url,
body .mp-web-section-status a[href*="malerplus"],
body .mp-web-section-status a[href*="staging"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(43,176,255,0.10) 0%, rgba(43,176,255,0.04) 100%) !important;
  border: 1px solid rgba(43, 176, 255, 0.22) !important;
  color: #1485d6 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: ui-monospace, Menlo, monospace !important;
  text-decoration: none !important;
  word-break: break-all;
  transition: background 160ms ease, border-color 160ms ease, transform 120ms ease !important;
}
@media (hover: hover) {
  body .mp-ws-overview-preview-url:hover,
  body .mp-web-section-status a[href*="malerplus"]:hover,
  body .mp-web-section-status a[href*="staging"]:hover {
    background: linear-gradient(180deg, rgba(43,176,255,0.18) 0%, rgba(43,176,255,0.08) 100%) !important;
    border-color: rgba(43, 176, 255, 0.40) !important;
    transform: translateY(-1px) !important;
  }
}

/* "Hinweis"-Box (beige Warn-Box) */
body .mp-web-section-status .alert,
body .mp-web-section-status .hint,
body .mp-web-hint,
body .mp-web-info-box {
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(245,158,11,0.06) 0%, rgba(245,158,11,0.02) 100%) !important;
  border: 1px solid rgba(245, 158, 11, 0.22) !important;
  color: #92400e !important;
  padding: 12px 14px !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  margin-top: 10px !important;
}

/* Tablet-Responsive: Quick-Action-Grid 4→2 Spalten */
@media (max-width: 1024px) {
  body .mp-ws-overview-quick-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px) {
  body .mp-ws-overview-quick-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Dark-Mode Dashboard-Hero */
html.dark body .dash-hero-card {
  background:
    radial-gradient(60% 80% at 0% 0%, rgba(43,176,255,0.20) 0%, transparent 60%),
    radial-gradient(50% 80% at 100% 0%, rgba(255,138,61,0.10) 0%, transparent 55%),
    linear-gradient(180deg, rgba(15,23,42,0.92) 0%, rgba(15,23,42,0.88) 100%) !important;
  border-color: rgba(43, 176, 255, 0.28) !important;
}
html.dark body .dash-greeting-name {
  background: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 60%, #5cc4ff 100%) !important;
  -webkit-background-clip: text !important;
          background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
html.dark body .dash-greeting-date {
  background: rgba(30, 41, 59, 0.7);
  border-color: rgba(43, 176, 255, 0.30);
  color: #cbd5e1;
}
html.dark body .dash-kpi {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.78) 0%, rgba(15, 23, 42, 0.62) 100%) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html.dark body .dash-kpi .dash-kpi-label {
  color: #94a3b8 !important;
}

/* Dashboard: "Naechste Tage" Karten wie Planer-Cards, ohne graue Flaeche */
body #view-dashboard .dash-upcoming-item {
  border: 1px solid #ECEEF2 !important;
  border-left: 1px solid #ECEEF2 !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgb(var(--mp-flaeche-rgb)) 0%, rgb(var(--mp-f1-fbfcfe)) 100%) !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.03),
    0 2px 8px rgba(15, 23, 42, 0.04) !important;
  padding: 13px 16px !important;
}

body #view-dashboard .dash-upcoming-item.is-highlight,
body #view-dashboard .dash-upcoming-item.is-appointment,
body #view-dashboard .dash-upcoming-item:has(.mp-termin-status--late),
body #view-dashboard .dash-upcoming-item:has(.mp-termin-status--now),
body #view-dashboard .dash-upcoming-item:has(.mp-termin-status--soon) {
  border-left: 1px solid #ECEEF2 !important;
}

body #view-dashboard .dash-upcoming-item:hover {
  background: rgb(var(--mp-flaeche-rgb)) !important;
  border-color: rgba(31, 158, 239, 0.22) !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 6px 16px rgba(31, 158, 239, 0.14) !important;
}

/* P0 2026-05-21: Kundentermine im "Anstehend"-Widget hervorheben —
   grüner Akzent + dezenter Glow, damit man sie sofort erkennt. */
body #view-dashboard .dash-upcoming-item.is-appointment {
  border-left: 3px solid #16a34a !important;
  background: linear-gradient(180deg, rgba(34,197,94,0.055) 0%, rgba(34,197,94,0.015) 100%) !important;
  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 0 0 1px rgba(34,197,94,0.14),
    0 6px 20px -8px rgba(34,197,94,0.32) !important;
}
body #view-dashboard .dash-upcoming-item.is-appointment:hover {
  background: linear-gradient(180deg, rgba(34,197,94,0.085) 0%, rgba(34,197,94,0.02) 100%) !important;
  border-color: rgba(34,197,94,0.30) !important;
  box-shadow:
    0 1px 2px rgba(15,23,42,0.04),
    0 0 0 1px rgba(34,197,94,0.24),
    0 12px 30px -8px rgba(34,197,94,0.46) !important;
}

body #view-dashboard .dash-upcoming-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: rgb(var(--mp-t1-1e2430)) !important;
}

body #view-dashboard .dash-upcoming-meta {
  color: rgba(var(--mp-t1-1e2430), 0.62) !important;
}

/* App-weite Toasts: MalerPlus Branding statt generischem System-Look */
body .mp-toast,
body .toast:not(.mp-usheet-toast):not(.ops-toast),
body #mp-toast-root > * {
  border-radius: 16px !important;
  border: 1px solid rgba(43, 176, 255, 0.20) !important;
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(43,176,255,0.16) 0%, transparent 58%),
    linear-gradient(180deg, rgba(var(--mp-flaeche-rgb), 0.98), rgba(var(--mp-f2-f8fbff), 0.96)) !important;
  color: rgb(var(--mp-t1-0f172a)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 18px 42px rgba(15,23,42,0.18),
    0 8px 20px rgba(43,176,255,0.12) !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
}

html.dark body .mp-toast,
html.dark body .toast:not(.mp-usheet-toast):not(.ops-toast),
html.dark body #mp-toast-root > * {
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(43,176,255,0.20) 0%, transparent 58%),
    linear-gradient(180deg, rgba(15,23,42,0.96), rgba(15,23,42,0.92)) !important;
  color: #f8fafc !important;
  border-color: rgba(43,176,255,0.28) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 20px 46px rgba(0,0,0,0.42) !important;
}

/* Dashboard mobile/tablet: horizontal tile scrollers must stay draggable. */
body #view-dashboard .dash-quick-actions,
body #view-dashboard .dashboard-launcher-grid.dash-grid-primary,
body #view-dashboard .dashboard-launcher-grid.dash-grid-secondary,
body #view-dashboard .mp-radar-body {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x pan-y !important;
  overscroll-behavior-x: contain !important;
}

body #view-dashboard .dash-quick-actions > .dash-qa,
body #view-dashboard .dashboard-launcher-grid.dash-grid-primary > .dash-launch-tile,
body #view-dashboard .dashboard-launcher-grid.dash-grid-secondary > .dash-launch-tile,
body #view-dashboard .mp-radar-body > .mp-radar-card {
  touch-action: pan-x pan-y !important;
}

@media (min-width: 900px) {
  body #view-dashboard .dash-quick-actions,
  body #view-dashboard .dashboard-launcher-grid.dash-grid-secondary {
    overflow-x: hidden !important;
  }
}

@media (min-width: 1024px) {
  body #view-dashboard .dashboard-launcher-grid.dash-grid-primary {
    overflow-x: hidden !important;
  }
}

@media (min-width: 640px) {
  body #view-dashboard .mp-radar-body {
    overflow: visible !important;
    touch-action: auto !important;
  }
}

/* Dashboard quick actions: same compact size as "Meine Zeiten". */
body #view-dashboard .dash-quick-actions > .dash-qa {
  box-sizing: border-box;
  height: 124px !important;
  min-height: 124px !important;
  max-height: 124px !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 16px 12px 14px !important;
}

body #view-dashboard .dash-quick-actions > .dash-qa .dash-qa-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 13px !important;
  flex: 0 0 44px !important;
}

body #view-dashboard .dash-quick-actions > .dash-qa .dash-qa-label {
  font-size: 13px !important;
  line-height: 1.2 !important;
}

body #view-dashboard .dash-quick-actions > .dash-qa .dash-qa-hint {
  min-height: 13px !important;
  margin-top: 0 !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}

/* Premium collapse controls: cleaner branding and no overlap with card actions. */
body .card.is-collapsible .card-toggle {
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(43, 176, 255, 0.24) !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(var(--mp-flaeche-rgb), 0.98), rgba(var(--mp-flaeche-rgb), 0.50) 34%, transparent 36%),
    linear-gradient(180deg, rgba(var(--mp-flaeche-rgb), 0.98), rgba(var(--mp-f2-f6fbff), 0.94)) !important;
  color: #0f5f91 !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 8px 20px rgba(15,23,42,0.10),
    0 3px 10px rgba(43,176,255,0.14) !important;
  font-size: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease !important;
}

body .card.is-collapsible .card-toggle::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  transform: translateY(-2px) rotate(45deg) !important;
  transition: transform 0.18s ease !important;
}

body .card.is-collapsible .card-toggle::after {
  display: none !important;
}

body .card.is-collapsible .card-toggle:hover {
  border-color: rgba(43, 176, 255, 0.42) !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(var(--mp-flaeche-rgb), 1), rgba(var(--mp-flaeche-rgb), 0.58) 34%, transparent 36%),
    linear-gradient(180deg, rgba(var(--mp-flaeche-rgb), 1), rgba(var(--mp-f2-eef8ff), 0.98)) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.98) inset,
    0 10px 24px rgba(15,23,42,0.13),
    0 5px 14px rgba(43,176,255,0.20) !important;
}

body .card.is-collapsed .card-toggle {
  transform: none !important;
}

body .card.is-collapsed .card-toggle::before {
  transform: translateX(1px) rotate(-45deg) !important;
}

body .mp-comm-card.is-collapsible {
  padding-top: 2px !important;
}

body .mp-comm-card.is-collapsible .card-toggle {
  top: 20px !important;
  right: 18px !important;
}

body .mp-comm-card .mp-comm-header--radar {
  padding-right: 56px !important;
}

body .mp-comm-card .mp-comm-actions-head {
  margin-right: 0 !important;
}

@media (max-width: 720px) {
  body .mp-comm-card.is-collapsible .card-toggle {
    top: 14px !important;
    right: 14px !important;
  }

  body .mp-comm-card .mp-comm-header--radar {
    padding-right: 46px !important;
  }
}

html.dark body .card.is-collapsible .card-toggle,
[data-theme="dark"] body .card.is-collapsible .card-toggle {
  border-color: rgba(125, 211, 252, 0.28) !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.16), rgba(255,255,255,0.06) 34%, transparent 36%),
    linear-gradient(180deg, rgba(30,41,59,0.96), rgba(15,23,42,0.94)) !important;
  color: #9adfff !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 10px 24px rgba(0,0,0,0.32) !important;
}