/* ==========================================================================
   MobileBooking App Relaunch - first authenticated product block
   Scope: app.html (.app-v4) and admin.html (.admin-v4) only.
   Frontend-only late layer: tokens, shell, components, typography, mobile.
   ========================================================================== */

html[data-design="v2"] body.app-v4,
html[data-design="v2"] body.admin-v4 {
  --rl-canvas: #FFFFFF;
  --rl-canvas-2: #f6f3ec;
  --rl-surface: rgba(255,255,255,.92);
  --rl-surface-soft: rgba(255,255,255,.74);
  --rl-surface-muted: #f1eee6;
  --rl-line: rgba(42,50,45,.10);
  --rl-line-strong: rgba(42,50,45,.17);
  --rl-line-accent: rgba(14,143,131,.26);
  --rl-text: #17211d;
  --rl-text-2: #4d5d56;
  --rl-text-3: #7b8982;
  --rl-text-4: #a0aaa5;
  --rl-petrol: #0e8f83;
  --rl-petrol-deep: #08766e;
  --rl-teal: #38c8b5;
  --rl-danger: #c64040;
  --rl-gradient: linear-gradient(135deg, #08766e 0%, #0e8f83 46%, #38c8b5 100%);
  --rl-gradient-soft: linear-gradient(135deg, rgba(14,143,131,.13), rgba(56,200,181,.055));
  --rl-wash: radial-gradient(circle at 16% -8%, rgba(14,143,131,.105), transparent 34%),
              radial-gradient(circle at 92% 6%, rgba(56,200,181,.08), transparent 30%),
              #FFFFFF;
  --rl-radius-sm: var(--radius-md);
  --rl-radius: var(--radius-md);
  --rl-radius-lg: var(--radius-lg);
  --rl-radius-xl: var(--radius-lg);
  /* Tight, layered surface shadows. Uses a near pair (close, low-blur) and
     an ambient pair (slightly wider, very low alpha, with negative spread)
     so edges stay crisp and the page background does not pool with haze.
     Keep blurs ≤ 30px and alphas ≤ .12 — anything wider returns the
     foggy ambient pooling the relaunch was clearing up. */
  --rl-shadow-sm: 0 1px 2px rgba(28,42,36,.05), 0 2px 6px -2px rgba(28,42,36,.05);
  --rl-shadow: 0 2px 4px -2px rgba(28,42,36,.06), 0 6px 14px -6px rgba(28,42,36,.09), 0 1px 0 rgba(255,255,255,.6) inset;
  --rl-shadow-lg: 0 4px 8px -4px rgba(28,42,36,.07), 0 12px 24px -10px rgba(28,42,36,.10), 0 1px 0 rgba(255,255,255,.7) inset;
  --rl-focus: 0 0 0 4px rgba(14,143,131,.16);
  --rl-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rl-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --rl-body: 14px;
  --rl-label: 12px;
  --rl-caption: 11px;
  --rl-nav-desktop: 224px;
  --rl-admin-desktop: 244px;
  --rl-mobile-nav-h: 76px;
  --bg: var(--rl-canvas) !important;
  --s0: var(--rl-canvas) !important;
  --s1: var(--rl-surface) !important;
  --s2: var(--rl-surface-soft) !important;
  --s3: rgba(241,238,230,.78) !important;
  --s4: var(--rl-surface-muted) !important;
  --b1: var(--rl-line) !important;
  --b2: var(--rl-line-strong) !important;
  --b3: var(--rl-line-accent) !important;
  --t1: var(--rl-text) !important;
  --t2: var(--rl-text-2) !important;
  --t3: var(--rl-text-3) !important;
  --t4: var(--rl-text-4) !important;
  --np: var(--rl-petrol) !important;
  --na: var(--rl-petrol-deep) !important;
  --nb: var(--rl-teal) !important;
  --ng: var(--rl-petrol) !important;
  --nv: var(--rl-petrol) !important;
  --r: var(--rl-radius-sm) !important;
  --r2: var(--rl-radius) !important;
  --r3: var(--rl-radius-lg) !important;
  --sh: var(--rl-shadow-lg) !important;
  --sh2: var(--rl-shadow) !important;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--rl-text) !important;
  background: var(--rl-wash) !important;
  font-family: var(--rl-font) !important;
  font-size: var(--rl-body);
  line-height: 1.48;
  letter-spacing: 0 !important;
  text-rendering: optimizeLegibility;
}

html[data-design="v2"] body.app-v4::before,
html[data-design="v2"] body.admin-v4::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(rgba(42,50,45,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42,50,45,.022) 1px, transparent 1px) !important;
  background-size: 112px 112px !important;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.08) 70%, transparent) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   DARK MODE — emerald deep-forest atmosphere
   Mirrors the --rl-* relaunch token set so every component that reads
   --rl-canvas, --rl-text, --rl-surface, etc. flips coherently. Components
   use semantic tokens (var(--rl-...)), so a single token swap reskins the
   entire app shell. admin.html keeps data-theme-lock="light" → stays light.
   ──────────────────────────────────────────────────────────────────────── */
html[data-design="v2"][data-theme="dark"] body.app-v4,
html[data-design="v2"][data-theme="dark"] body.admin-v4 {
  --rl-canvas: #03130F;
  --rl-canvas-2: #051B16;
  --rl-surface: rgba(255,255,255,.065);
  --rl-surface-soft: rgba(255,255,255,.04);
  --rl-surface-muted: rgba(255,255,255,.035);
  --rl-line: rgba(167,243,208,.14);
  --rl-line-strong: rgba(167,243,208,.22);
  --rl-line-accent: rgba(14,143,131,.45);
  --rl-text: #F6FFFB;
  --rl-text-2: #DDFBF0;
  --rl-text-3: #A7BDB3;
  --rl-text-4: #789086;
  --rl-petrol: #14b6a8;
  --rl-petrol-deep: #0e8f83;
  --rl-teal: #50d6c4;
  --rl-danger: #ff6b6b;
  --rl-gradient: linear-gradient(135deg, #0e8f83 0%, #14b6a8 46%, #50d6c4 100%);
  --rl-gradient-soft: linear-gradient(135deg, rgba(20,184,166,.18), rgba(80,214,196,.06));
  --rl-wash: radial-gradient(circle at 16% -8%, rgba(14,143,131,.22), transparent 34%),
              radial-gradient(circle at 92% 6%, rgba(80,214,196,.16), transparent 30%),
              #03130F;
  --rl-shadow-sm: 0 1px 2px rgba(0,0,0,.50), 0 2px 6px -2px rgba(0,0,0,.50);
  --rl-shadow: 0 2px 4px -2px rgba(0,0,0,.55), 0 6px 14px -6px rgba(0,0,0,.65), 0 1px 0 rgba(255,255,255,.05) inset;
  --rl-shadow-lg: 0 4px 8px -4px rgba(0,0,0,.60), 0 18px 36px -12px rgba(0,0,0,.70), 0 1px 0 rgba(255,255,255,.06) inset;
  --rl-focus: 0 0 0 4px rgba(80,214,196,.28);
}

html[data-design="v2"][data-theme="dark"] body.app-v4::before,
html[data-design="v2"][data-theme="dark"] body.admin-v4::before {
  background-image:
    linear-gradient(rgba(167,243,208,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167,243,208,.05) 1px, transparent 1px) !important;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.10) 65%, transparent) !important;
}

html[data-design="v2"] body.app-v4 *,
html[data-design="v2"] body.admin-v4 * {
  letter-spacing: 0;
}

html[data-design="v2"] body.app-v4 h1,
html[data-design="v2"] body.app-v4 h2,
html[data-design="v2"] body.app-v4 h3,
html[data-design="v2"] body.app-v4 h4,
html[data-design="v2"] body.admin-v4 h1,
html[data-design="v2"] body.admin-v4 h2,
html[data-design="v2"] body.admin-v4 h3,
html[data-design="v2"] body.admin-v4 h4,
html[data-design="v2"] body.app-v4 .h1,
html[data-design="v2"] body.app-v4 .h2,
html[data-design="v2"] body.admin-v4 .h1,
html[data-design="v2"] body.admin-v4 .h2 {
  color: var(--rl-text) !important;
  font-family: var(--rl-font) !important;
  font-weight: 780 !important;
  letter-spacing: -.015em !important;
  line-height: 1.12 !important;
  text-wrap: balance;
}

html[data-design="v2"] body.app-v4 h1,
html[data-design="v2"] body.admin-v4 h1,
html[data-design="v2"] body.app-v4 .h1,
html[data-design="v2"] body.admin-v4 .h1 {
  font-size: clamp(25px, 2.6vw, 36px) !important;
}

html[data-design="v2"] body.app-v4 h2,
html[data-design="v2"] body.admin-v4 h2,
html[data-design="v2"] body.app-v4 .h2,
html[data-design="v2"] body.admin-v4 .h2 {
  font-size: clamp(20px, 1.7vw, 26px) !important;
}

html[data-design="v2"] body.app-v4 p,
html[data-design="v2"] body.admin-v4 p,
html[data-design="v2"] body.app-v4 .sub,
html[data-design="v2"] body.admin-v4 .sub,
html[data-design="v2"] body.app-v4 .muted,
html[data-design="v2"] body.admin-v4 .muted,
html[data-design="v2"] body.app-v4 small,
html[data-design="v2"] body.admin-v4 small {
  color: var(--rl-text-3) !important;
  line-height: 1.55 !important;
}

html[data-design="v2"] body.app-v4 .fl,
html[data-design="v2"] body.admin-v4 .fl,
html[data-design="v2"] body.app-v4 label,
html[data-design="v2"] body.admin-v4 label,
html[data-design="v2"] body.app-v4 th,
html[data-design="v2"] body.admin-v4 th,
html[data-design="v2"] body.app-v4 .kpi-label,
html[data-design="v2"] body.admin-v4 .kpi-label,
html[data-design="v2"] body.app-v4 .mb-kpi__label {
  color: var(--rl-text-3) !important;
  font-size: var(--rl-label) !important;
  font-weight: 720 !important;
  letter-spacing: .01em !important;
}

html[data-design="v2"] body.app-v4 .page {
  max-width: 1680px !important;
  padding: 28px 30px 48px !important;
}

html[data-design="v2"] body.app-v4 .page.active,
html[data-design="v2"] body.admin-v4 .content,
html[data-design="v2"] body.admin-v4 main.content {
  background: transparent !important;
}

@media (min-width: 641px) {
  html[data-design="v2"] body.app-v4 {
    --sidebar-w: var(--rl-nav-desktop) !important;
  }

  html[data-design="v2"] body.app-v4 .page {
    margin-left: var(--rl-nav-desktop) !important;
    padding-left: 34px !important;
  }

  html[data-design="v2"] body.app-v4 nav.nav {
    width: calc(var(--rl-nav-desktop) - 24px) !important;
    left: 12px !important;
    top: 12px !important;
    bottom: 12px !important;
    height: calc(100dvh - 24px) !important;
    padding: 10px !important;
    border: 1px solid rgba(255,255,255,.74) !important;
    border-radius: var(--rl-radius-xl) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.78)),
      var(--rl-gradient-soft) !important;
    box-shadow: var(--rl-shadow-lg) !important;
    backdrop-filter: blur(24px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.12) !important;
  }

  html[data-design="v2"] body.admin-v4 {
    --admin-sw: var(--rl-admin-desktop) !important;
  }

  html[data-design="v2"] body.admin-v4 .nav-tabs {
    width: calc(var(--rl-admin-desktop) - 24px) !important;
    left: 12px !important;
    top: 12px !important;
    min-height: calc(100dvh - 24px) !important;
    height: calc(100dvh - 24px) !important;
    padding: 12px 10px !important;
    border: 1px solid rgba(255,255,255,.74) !important;
    border-radius: var(--rl-radius-xl) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.78)),
      var(--rl-gradient-soft) !important;
    box-shadow: var(--rl-shadow-lg) !important;
    backdrop-filter: blur(24px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.12) !important;
  }

  html[data-design="v2"] body.admin-v4 nav.nav {
    margin-left: var(--rl-admin-desktop) !important;
    width: calc(100% - var(--rl-admin-desktop)) !important;
    height: 68px !important;
    padding-inline: 30px !important;
    background: rgba(255,255,255,.72) !important;
    border-bottom: 1px solid var(--rl-line) !important;
    box-shadow: 0 14px 36px rgba(28,42,36,.06) !important;
    backdrop-filter: blur(18px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
  }

  html[data-design="v2"] body.admin-v4 .content,
  html[data-design="v2"] body.admin-v4 main.content {
    margin-left: var(--rl-admin-desktop) !important;
    padding: 34px 34px 52px !important;
  }
}

html[data-design="v2"] body.app-v4 .nav-brand,
html[data-design="v2"] body.admin-v4 .nav-brand {
  min-height: 58px !important;
  padding: 12px 10px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.62) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 8px 20px rgba(28,42,36,.045) !important;
}

html[data-design="v2"] body.app-v4 .brand-icon,
html[data-design="v2"] body.app-v4 .nav-icon,
html[data-design="v2"] body.app-v4 .nav-av,
html[data-design="v2"] body.admin-v4 .nav-icon,
html[data-design="v2"] body.admin-v4 .nav-av {
  background: var(--rl-gradient) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 14px 30px rgba(14,143,131,.22) !important;
}

html[data-design="v2"] body.app-v4 .ntab,
html[data-design="v2"] body.app-v4 .ndropitem,
html[data-design="v2"] body.admin-v4 .tab-btn,
html[data-design="v2"] body.app-v4 .mobile-more-item,
html[data-design="v2"] body.app-v4 .mob-drawer-item {
  min-height: 44px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  color: var(--rl-text-2) !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 680 !important;
  box-shadow: none !important;
}

html[data-design="v2"] body.app-v4 .ntab:hover,
html[data-design="v2"] body.app-v4 .ntab.active,
html[data-design="v2"] body.app-v4 .ntab-group.open > .ntab,
html[data-design="v2"] body.app-v4 .ndropitem:hover,
html[data-design="v2"] body.app-v4 .ndropitem.active,
html[data-design="v2"] body.admin-v4 .tab-btn:hover,
html[data-design="v2"] body.admin-v4 .tab-btn.active,
html[data-design="v2"] body.app-v4 .mobile-more-item:hover,
html[data-design="v2"] body.app-v4 .mobile-more-item.is-active,
html[data-design="v2"] body.app-v4 .mob-drawer-item:hover,
html[data-design="v2"] body.app-v4 .mob-drawer-item.mob-active {
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(247,244,236,.82)),
    var(--rl-gradient-soft) !important;
  border-color: var(--rl-line-accent) !important;
  color: var(--rl-petrol) !important;
  box-shadow: 0 12px 28px rgba(14,143,131,.09) !important;
}

html[data-design="v2"] body.app-v4 .ntab.active,
html[data-design="v2"] body.app-v4 .ntab-group > .ntab.active,
html[data-design="v2"] body.app-v4 .ndropitem.active {
  border-left-color: var(--rl-petrol) !important;
  border-bottom-color: transparent !important;
}

html[data-design="v2"] body.app-v4 .nav-right,
html[data-design="v2"] body.app-v4 .nav-user,
html[data-design="v2"] body.app-v4 .icon-btn,
html[data-design="v2"] body.admin-v4 .nav-user,
html[data-design="v2"] body.admin-v4 .nav-btn,
html[data-design="v2"] body.admin-v4 .btn-out,
html[data-design="v2"] body.admin-v4 .btn-preview {
  background: rgba(255,255,255,.68) !important;
  border-color: var(--rl-line) !important;
  color: var(--rl-text-2) !important;
  box-shadow: var(--rl-shadow-sm) !important;
}

html[data-design="v2"] body.app-v4 .icon-btn,
html[data-design="v2"] body.admin-v4 .nav-btn,
html[data-design="v2"] body.admin-v4 .btn-out {
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 8px !important;
}

html[data-design="v2"] body.app-v4 .mb-dash__topbar,
html[data-design="v2"] body.app-v4 .mb-cal__topbar,
html[data-design="v2"] body.app-v4 .mb-cust__topbar,
html[data-design="v2"] body.app-v4 .mb-req__topbar,
html[data-design="v2"] body.app-v4 .mb-fin__hd,
html[data-design="v2"] body.app-v4 .ch,
html[data-design="v2"] body.admin-v4 .dash-recent-head,
html[data-design="v2"] body.admin-v4 .card-head,
html[data-design="v2"] body.admin-v4 .panel-head,
html[data-design="v2"] body.admin-v4 .table-head,
html[data-design="v2"] body.admin-v4 .table-header {
  background: rgba(255,255,255,.70) !important;
  border-color: var(--rl-line) !important;
  border-radius: var(--rl-radius-lg) !important;
  box-shadow: var(--rl-shadow-sm) !important;
  backdrop-filter: blur(14px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
}

/* App-v4 Surfaces — bleiben in dieser Phase mit dem urspruenglichen
   Bundle-Look (werden in späteren Phasen pro Modul angegangen). */
html[data-design="v2"] body.app-v4 .mb-kpi,
html[data-design="v2"] body.app-v4 .mb-schedule,
html[data-design="v2"] body.app-v4 .mb-map-card,
html[data-design="v2"] body.app-v4 .mb-requests,
html[data-design="v2"] body.app-v4 .mb-fin__card,
html[data-design="v2"] body.app-v4 .mb-fin__amount-display,
html[data-design="v2"] body.app-v4 .mb-fin__side,
html[data-design="v2"] body.app-v4 .card,
html[data-design="v2"] body.app-v4 .panel,
html[data-design="v2"] body.app-v4 .set-card,
html[data-design="v2"] body.app-v4 .pop-card,
html[data-design="v2"] body.app-v4 .table-wrap,
html[data-design="v2"] body.app-v4 .ibox,
html[data-design="v2"] body.app-v4 .umgmt-card,
html[data-design="v2"] body.app-v4 .umgmt-stat,
html[data-design="v2"] body.app-v4 .umgmt-plan,
html[data-design="v2"] body.app-v4 .umgmt-tabs,
html[data-design="v2"] body.app-v4 .umgmt-hero {
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.78)),
    linear-gradient(135deg, rgba(14,143,131,.055), transparent 54%) !important;
  border: 1px solid var(--rl-line) !important;
  border-radius: var(--rl-radius-lg) !important;
  box-shadow: var(--rl-shadow) !important;
  color: var(--rl-text) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   Phase 1b — Admin (Betreiber-Konsole) Surface-Cleanup.
   Die admin-v4 Klassen wurden aus dem app-v4-Bundle herausgeloest und
   konsumieren jetzt die Phase-0-Tier-Tokens: deutlich kleinerer Radius
   (14 statt 22-26 px), leiserer Shadow, kein Glassmorphism-Blur.
   Hintergrund-Identitaet (warmer Weiss-Petrol-Touch) bleibt erhalten,
   nur ruhiger gemischt. .sc-cb-preview ist hier raus — bekommt unten
   eigenen T7-Insert-Box-Look. */
html[data-design="v2"] body.admin-v4 .card,
html[data-design="v2"] body.admin-v4 .panel,
html[data-design="v2"] body.admin-v4 .admin-card,
html[data-design="v2"] body.admin-v4 .tenant-card,
html[data-design="v2"] body.admin-v4 .stat-card,
html[data-design="v2"] body.admin-v4 .info-card,
html[data-design="v2"] body.admin-v4 .mb-card,
html[data-design="v2"] body.admin-v4 .table-wrap,
html[data-design="v2"] body.admin-v4 .dash-recent,
html[data-design="v2"] body.admin-v4 .sup-settings-box,
html[data-design="v2"] body.admin-v4 .feat-group,
html[data-design="v2"] body.admin-v4 .role-card,
html[data-design="v2"] body.admin-v4 .adm-perm-card,
html[data-design="v2"] body.admin-v4 .team-card,
html[data-design="v2"] body.admin-v4 .team-stat,
html[data-design="v2"] body.admin-v4 .sc-aside,
html[data-design="v2"] body.admin-v4 .pop-card,
html[data-design="v2"] body.admin-v4 .kpi-card,
html[data-design="v2"] body.admin-v4 .dash-qa-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88)),
    linear-gradient(135deg, rgba(14,143,131,.035), transparent 58%) !important;
  border: 1px solid var(--surface-border, rgba(28,42,36,.08)) !important;
  border-radius: var(--r-lg, 14px) !important;
  box-shadow: var(--shadow-2, 0 4px 14px -6px rgba(28,42,36,.10)) !important;
  color: var(--rl-text) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Phase 1b — sc-main (Haupt-Workspace im Site-Config/Revenue-Tab):
   admin.html setzt inline border-radius:var(--r3) (24 px) + grossen Shadow.
   T1-Logik: 14 px Radius, --shadow-2 (ambient), gleiche Identitaet.
   Bewusst nicht im obigen Bundle drin, weil sc-main eigene
   Padding/Layout-Anforderungen behaelt — hier nur Surface-Form. */
html[data-design="v2"] body.admin-v4 .sc-main {
  border-radius: var(--r-lg, 14px) !important;
  box-shadow: var(--shadow-2, 0 4px 14px -6px rgba(28,42,36,.10)) !important;
  border: 1px solid var(--surface-border, rgba(28,42,36,.08)) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88)),
    linear-gradient(135deg, rgba(14,143,131,.035), transparent 58%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* R1 Tracking: alte 500px Min-Height (admin.html:1144) entfernen.
     Sektion soll mit Inhalt wachsen statt leere Kaesten zu erzwingen.
     Trial- und Security-Sektionen profitieren davon ebenfalls. */
  min-height: 0 !important;
}

/* Phase 1b — sc-aside-item: aus 8 px hartkodiert auf --r-sm (6 px).
   Macht die Sub-Nav-Items optisch zu Listen-Einträgen statt Mini-Tiles.
   Active-State (Mint-Gradient via 68-v11-brand.css) bleibt unangetastet. */
html[data-design="v2"] body.admin-v4 .sc-aside-item {
  border-radius: var(--r-sm, 6px) !important;
}

/* Phase 1b — sc-cb-preview (Cookie-Banner-Preview): aus dem Card-Bundle
   herausgenommen, wird zu einem T7-Insert-Box innerhalb sc-main.
   Kein Outer-Shadow mehr (Frame-in-Frame-Look eliminiert), kleinerer
   Radius (10 px), dezenter Tonalitaets-Fill. Der 3 px Petrol-Top-
   Akzent (admin.html:1173) bleibt erhalten. */
html[data-design="v2"] body.admin-v4 .sc-cb-preview {
  border-radius: var(--r-md, 10px) !important;
  box-shadow: none !important;
  border: 1px solid var(--surface-border, rgba(28,42,36,.08)) !important;
  background: rgba(14,143,131,.035) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-design="v2"] body.app-v4 .mb-kpi,
html[data-design="v2"] body.admin-v4 .kpi-card {
  position: relative !important;
  overflow: hidden !important;
}

html[data-design="v2"] body.app-v4 .mb-kpi::before,
html[data-design="v2"] body.admin-v4 .kpi-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 4px !important;
  background: var(--rl-gradient) !important;
  opacity: .9 !important;
}

html[data-design="v2"] body.app-v4 .mb-kpi__value,
html[data-design="v2"] body.app-v4 .mb-fin__amount-value,
html[data-design="v2"] body.app-v4 .kpi-val,
html[data-design="v2"] body.admin-v4 .kpi-val,
html[data-design="v2"] body.app-v4 [id$="-total"],
html[data-design="v2"] body.app-v4 [id$="-display"] {
  color: var(--rl-text) !important;
  font-weight: 820 !important;
  letter-spacing: -.02em !important;
  text-shadow: none !important;
}

html[data-design="v2"] body.app-v4 .btn,
html[data-design="v2"] body.app-v4 .mb-btn,
html[data-design="v2"] body.app-v4 button,
html[data-design="v2"] body.admin-v4 .btn,
html[data-design="v2"] body.admin-v4 button,
html[data-design="v2"] body.admin-v4 .sa-btn {
  font-family: var(--rl-font) !important;
  font-weight: 720 !important;
  letter-spacing: 0 !important;
  min-height: 40px;
}

html[data-design="v2"] body.app-v4 .btn-primary,
html[data-design="v2"] body.app-v4 .btn-cta,
html[data-design="v2"] body.app-v4 .btn-submit,
html[data-design="v2"] body.app-v4 .btn-p,
html[data-design="v2"] body.app-v4 .mb-btn--primary,
html[data-design="v2"] body.app-v4 .empty-cta,
html[data-design="v2"] body.app-v4 button.primary,
html[data-design="v2"] body.admin-v4 .btn-preview,
html[data-design="v2"] body.admin-v4 .btn-p,
html[data-design="v2"] body.admin-v4 .btn-primary,
html[data-design="v2"] body.admin-v4 .empty-cta,
html[data-design="v2"] body.admin-v4 button.primary {
  background: var(--rl-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 16px 34px rgba(14,143,131,.24) !important;
}

html[data-design="v2"] body.app-v4 .btn-n,
html[data-design="v2"] body.app-v4 .mb-btn:not(.mb-btn--primary),
html[data-design="v2"] body.app-v4 .btn-act,
html[data-design="v2"] body.admin-v4 .btn-n,
html[data-design="v2"] body.admin-v4 .btn-act,
html[data-design="v2"] body.admin-v4 .ann-toggle {
  background: rgba(255,255,255,.76) !important;
  border: 1px solid var(--rl-line) !important;
  color: var(--rl-text-2) !important;
  border-radius: 8px !important;
  box-shadow: var(--rl-shadow-sm) !important;
}

html[data-design="v2"] body.app-v4 .btn-d,
html[data-design="v2"] body.app-v4 .btn-danger,
html[data-design="v2"] body.admin-v4 .btn-d,
html[data-design="v2"] body.admin-v4 .btn-danger {
  background: rgba(198,64,64,.10) !important;
  border-color: rgba(198,64,64,.22) !important;
  color: var(--rl-danger) !important;
}

html[data-design="v2"] body.app-v4 input:not([type="checkbox"]):not([type="radio"]),
html[data-design="v2"] body.app-v4 textarea,
html[data-design="v2"] body.app-v4 select,
html[data-design="v2"] body.admin-v4 input:not([type="checkbox"]):not([type="radio"]),
html[data-design="v2"] body.admin-v4 textarea,
html[data-design="v2"] body.admin-v4 select,
html[data-design="v2"] body.admin-v4 .search-inp,
html[data-design="v2"] body.admin-v4 .sa-input {
  min-height: 44px !important;
  background: rgba(255,255,255,.84) !important;
  border: 1px solid var(--rl-line) !important;
  border-radius: 10px !important;
  color: var(--rl-text) !important;
  font-family: var(--rl-font) !important;
  font-size: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72) !important;
}

html[data-design="v2"] body.app-v4 input:focus,
html[data-design="v2"] body.app-v4 textarea:focus,
html[data-design="v2"] body.app-v4 select:focus,
html[data-design="v2"] body.admin-v4 input:focus,
html[data-design="v2"] body.admin-v4 textarea:focus,
html[data-design="v2"] body.admin-v4 select:focus,
html[data-design="v2"] body.admin-v4 .search-inp:focus,
html[data-design="v2"] body.admin-v4 .sa-input:focus {
  outline: none !important;
  border-color: rgba(14,143,131,.45) !important;
  box-shadow: var(--rl-focus), inset 0 1px 0 rgba(255,255,255,.8) !important;
}

html[data-design="v2"] body.app-v4 .badge,
html[data-design="v2"] body.app-v4 .pill,
html[data-design="v2"] body.app-v4 .nbadge,
html[data-design="v2"] body.app-v4 .mb-pill,
html[data-design="v2"] body.app-v4 .tag,
html[data-design="v2"] body.admin-v4 .badge,
html[data-design="v2"] body.admin-v4 .pill,
html[data-design="v2"] body.admin-v4 .tag,
html[data-design="v2"] body.admin-v4 .tab-badge,
html[data-design="v2"] body.admin-v4 .nav-badge,
html[data-design="v2"] body.admin-v4 .role-badge,
html[data-design="v2"] body.admin-v4 .team-card-status,
html[data-design="v2"] body.admin-v4 .sup-ticket-status,
html[data-design="v2"] body.admin-v4 .sla-badge {
  background: rgba(14,143,131,.10) !important;
  border: 1px solid rgba(14,143,131,.20) !important;
  color: var(--rl-petrol) !important;
  border-radius: 8px !important;
  font-size: var(--rl-caption) !important;
  font-weight: 780 !important;
  box-shadow: none !important;
}

html[data-design="v2"] body.app-v4 .table-wrap,
html[data-design="v2"] body.admin-v4 .table-wrap {
  overflow: hidden !important;
}

html[data-design="v2"] body.app-v4 table,
html[data-design="v2"] body.admin-v4 table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: transparent !important;
}

html[data-design="v2"] body.app-v4 th,
html[data-design="v2"] body.admin-v4 th,
html[data-design="v2"] body.admin-v4 .tdb-table th {
  background: rgba(247,244,236,.72) !important;
  color: var(--rl-text-3) !important;
  border-bottom: 1px solid var(--rl-line) !important;
  text-transform: uppercase !important;
  letter-spacing: .045em !important;
}

html[data-design="v2"] body.app-v4 td,
html[data-design="v2"] body.admin-v4 td,
html[data-design="v2"] body.admin-v4 .tdb-table td {
  border-color: var(--rl-line) !important;
  color: var(--rl-text-2) !important;
}

html[data-design="v2"] body.app-v4 tbody tr:hover,
html[data-design="v2"] body.admin-v4 tbody tr:hover,
html[data-design="v2"] body.admin-v4 .dash-recent-row:hover,
html[data-design="v2"] body.admin-v4 .sup-ticket-row:hover,
html[data-design="v2"] body.admin-v4 .audit-row:hover {
  background: rgba(14,143,131,.055) !important;
}

/* Super-Admin overview: compact workspace + readable activity system */
html[data-design="v2"] body.admin-v4 .dash-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .9fr);
  gap: 14px;
  align-items: start;
  margin-top: 14px;
}

html[data-design="v2"] body.admin-v4 .dash-workspace-grid > .dash-recent {
  grid-column: 1 / -1;
}

html[data-design="v2"] body.admin-v4 .dash-panel {
  min-width: 0;
}

html[data-design="v2"] body.admin-v4 .dash-panel--mrr,
html[data-design="v2"] body.admin-v4 .dash-panel--plans {
  grid-column: 1;
}

html[data-design="v2"] body.admin-v4 .dash-panel--announcements,
html[data-design="v2"] body.admin-v4 .dash-panel--recent-tenants {
  grid-column: 2;
}

html[data-design="v2"] body.admin-v4 .dash-recent {
  overflow: hidden;
}

html[data-design="v2"] body.admin-v4 .dash-recent__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

html[data-design="v2"] body.admin-v4 .dash-recent__title,
html[data-design="v2"] body.admin-v4 .activity-hero__title {
  color: var(--text-primary);
  font-weight: 820;
  letter-spacing: 0;
}

html[data-design="v2"] body.admin-v4 .dash-recent__meta,
html[data-design="v2"] body.admin-v4 .activity-hero__sub {
  color: var(--text-muted);
  font-size: 12px;
}

html[data-design="v2"] body.admin-v4 .dash-recent__see-all {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-elevated);
  color: var(--text-secondary);
}

html[data-design="v2"] body.admin-v4 .dash-act {
  --act-color: var(--color-primary);
  --act-bg: color-mix(in srgb, var(--act-color) 7%, transparent);
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 0;
  border-top: 1px solid var(--border);
  border-left: 4px solid var(--act-color);
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

html[data-design="v2"] body.admin-v4 .dash-act:first-child {
  border-top: 0;
}

html[data-design="v2"] body.admin-v4 .dash-act:hover {
  background: var(--act-bg);
}

html[data-design="v2"] body.admin-v4 .dash-act[data-priority="critical"],
html[data-design="v2"] body.admin-v4 .activity-row[data-priority="critical"] {
  --act-color: var(--color-danger);
}

html[data-design="v2"] body.admin-v4 .dash-act[data-priority="warn"],
html[data-design="v2"] body.admin-v4 .activity-row[data-priority="warn"] {
  --act-color: var(--color-warning);
}

html[data-design="v2"] body.admin-v4 .dash-act[data-priority="success"],
html[data-design="v2"] body.admin-v4 .activity-row[data-priority="success"] {
  --act-color: var(--color-success);
}

html[data-design="v2"] body.admin-v4 .dash-act[data-priority="system"],
html[data-design="v2"] body.admin-v4 .activity-row[data-priority="system"],
html[data-design="v2"] body.admin-v4 .dash-act[data-priority="neutral"],
html[data-design="v2"] body.admin-v4 .activity-row[data-priority="neutral"] {
  --act-color: var(--text-muted);
}

html[data-design="v2"] body.admin-v4 .dash-act__icon,
html[data-design="v2"] body.admin-v4 .activity-row__icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--act-color) 30%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--act-color) 10%, transparent);
  color: var(--act-color);
}

html[data-design="v2"] body.admin-v4 .dash-act__body,
html[data-design="v2"] body.admin-v4 .activity-row__copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

html[data-design="v2"] body.admin-v4 .dash-act__title,
html[data-design="v2"] body.admin-v4 .activity-row__top strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 13.5px;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-design="v2"] body.admin-v4 .dash-act__meta,
html[data-design="v2"] body.admin-v4 .activity-row__meta {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.35;
}

html[data-design="v2"] body.admin-v4 .dash-act__chip,
html[data-design="v2"] body.admin-v4 .dash-act__priority,
html[data-design="v2"] body.admin-v4 .activity-row__pill {
  display: inline-flex;
  align-items: center;
  max-width: 210px;
  min-height: 22px;
  padding: 2px 7px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--act-color) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--act-color) 10%, transparent);
  color: var(--act-color);
  font-size: 11px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-design="v2"] body.admin-v4 .dash-act__chev {
  color: var(--text-muted);
  font-size: 20px;
}

html[data-design="v2"] body.admin-v4 .dash-act-empty {
  padding: 22px 16px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}

html[data-design="v2"] body.admin-v4 .activity-center {
  display: grid;
  gap: 14px;
}

html[data-design="v2"] body.admin-v4 .activity-hero,
html[data-design="v2"] body.admin-v4 .activity-toolbar,
html[data-design="v2"] body.admin-v4 .activity-list,
html[data-design="v2"] body.admin-v4 .activity-kpi {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-elevated);
  box-shadow: var(--shadow);
}

html[data-design="v2"] body.admin-v4 .activity-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
}

html[data-design="v2"] body.admin-v4 .activity-hero__eyebrow {
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 820;
  letter-spacing: .08em;
}

html[data-design="v2"] body.admin-v4 .activity-hero__title {
  margin: 3px 0 4px;
  font-size: 24px;
}

html[data-design="v2"] body.admin-v4 .activity-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

html[data-design="v2"] body.admin-v4 .activity-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

html[data-design="v2"] body.admin-v4 .activity-kpi {
  --act-color: var(--color-primary);
  min-height: 76px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 14px 16px;
  border-left: 4px solid var(--act-color);
}

html[data-design="v2"] body.admin-v4 .activity-kpi[data-priority="critical"] { --act-color: var(--color-danger); }
html[data-design="v2"] body.admin-v4 .activity-kpi[data-priority="warn"] { --act-color: var(--color-warning); }
html[data-design="v2"] body.admin-v4 .activity-kpi[data-priority="system"] { --act-color: var(--text-muted); }

html[data-design="v2"] body.admin-v4 .activity-kpi span {
  color: var(--act-color);
  font-size: 26px;
  font-weight: 840;
}

html[data-design="v2"] body.admin-v4 .activity-kpi small {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 720;
}

html[data-design="v2"] body.admin-v4 .activity-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(150px, auto)) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
}

html[data-design="v2"] body.admin-v4 .activity-search {
  margin: 0;
}

html[data-design="v2"] body.admin-v4 .activity-list {
  overflow: hidden;
}

html[data-design="v2"] body.admin-v4 .activity-row {
  --act-color: var(--color-primary);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-top: 1px solid var(--border);
  border-left: 4px solid var(--act-color);
  background: transparent;
}

html[data-design="v2"] body.admin-v4 .activity-row:first-child {
  border-top: 0;
}

html[data-design="v2"] body.admin-v4 .activity-row:hover {
  background: color-mix(in srgb, var(--act-color) 6%, transparent);
}

html[data-design="v2"] body.admin-v4 .activity-row__main {
  min-width: 0;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  box-shadow: none;
}

html[data-design="v2"] body.admin-v4 .activity-row__top {
  display: flex;
  min-width: 0;
  gap: 8px;
  align-items: center;
}

html[data-design="v2"] body.admin-v4 .activity-row__plain,
html[data-design="v2"] body.admin-v4 .activity-row__details {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-design="v2"] body.admin-v4 .activity-row__details {
  color: var(--text-secondary);
}

html[data-design="v2"] body.admin-v4 .activity-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

html[data-design="v2"] body.admin-v4 .activity-row__actions .btn {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 12px;
}

html[data-design="v2"] body.admin-v4 .dash-plan-grid {
  display: grid;
  gap: 10px;
  padding: 12px;
}

html[data-design="v2"] body.admin-v4 .dash-plan-item {
  display: grid;
  gap: 7px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-elevated) 86%, var(--plan-color) 14%);
}

html[data-design="v2"] body.admin-v4 .dash-plan-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 790;
}

html[data-design="v2"] body.admin-v4 .dash-plan-item__head strong {
  color: var(--plan-color);
  font-size: 18px;
}

html[data-design="v2"] body.admin-v4 .dash-plan-item__bar {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--plan-color) 12%, transparent);
}

html[data-design="v2"] body.admin-v4 .dash-plan-item__bar span {
  display: block;
  width: var(--plan-pct);
  height: 100%;
  border-radius: inherit;
  background: var(--plan-color);
}

html[data-design="v2"] body.admin-v4 .dash-plan-item__meta {
  color: var(--text-muted);
  font-size: 11.5px;
}

html[data-design="v2"] body.admin-v4 .kpi-card.is-urgent {
  border-color: color-mix(in srgb, var(--color-warning) 48%, var(--border)) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-warning) 18%, transparent), var(--shadow) !important;
}

html[data-design="v2"] body.admin-v4 .kpi-card.is-urgent::before {
  background: var(--color-warning) !important;
}

@media (max-width: 1120px) {
  html[data-design="v2"] body.admin-v4 .dash-workspace-grid {
    grid-template-columns: 1fr;
  }

  html[data-design="v2"] body.admin-v4 .dash-panel--mrr,
  html[data-design="v2"] body.admin-v4 .dash-panel--plans,
  html[data-design="v2"] body.admin-v4 .dash-panel--announcements,
  html[data-design="v2"] body.admin-v4 .dash-panel--recent-tenants {
    grid-column: 1;
  }

  html[data-design="v2"] body.admin-v4 .activity-toolbar,
  html[data-design="v2"] body.admin-v4 .activity-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  html[data-design="v2"] body.admin-v4 .activity-hero {
    align-items: stretch;
    flex-direction: column;
  }

  html[data-design="v2"] body.admin-v4 .activity-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html[data-design="v2"] body.admin-v4 .dash-act {
    grid-template-columns: 34px minmax(0, 1fr) auto;
  }

  html[data-design="v2"] body.admin-v4 .dash-act__priority {
    display: none;
  }
}

html[data-design="v2"] body.app-v4 .empty,
html[data-design="v2"] body.app-v4 .empty-state,
html[data-design="v2"] body.app-v4 [data-mb-dash-empty],
html[data-design="v2"] body.admin-v4 .empty,
html[data-design="v2"] body.admin-v4 .empty-state {
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.62)),
    var(--rl-gradient-soft) !important;
  border: 1px dashed rgba(14,143,131,.28) !important;
  border-radius: var(--rl-radius-lg) !important;
  color: var(--rl-text-2) !important;
}

html[data-design="v2"] body.app-v4 .mbg,
html[data-design="v2"] body.admin-v4 .modal-bg,
html[data-design="v2"] body.admin-v4 .dlg-bg {
  background: rgba(23,33,29,.44) !important;
  backdrop-filter: blur(14px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.05) !important;
}

html[data-design="v2"] body.app-v4 .modal,
html[data-design="v2"] body.admin-v4 .modal,
html[data-design="v2"] body.admin-v4 .dlg {
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.90)),
    var(--rl-gradient-soft) !important;
  border: 1px solid rgba(255,255,255,.80) !important;
  border-radius: var(--rl-radius-xl) !important;
  box-shadow: var(--rl-shadow-lg) !important;
  color: var(--rl-text) !important;
}

html[data-design="v2"] body.app-v4 .mhd,
html[data-design="v2"] body.app-v4 .mfoot,
html[data-design="v2"] body.admin-v4 .modal-title,
html[data-design="v2"] body.admin-v4 .modal-actions {
  border-color: var(--rl-line) !important;
}

html[data-design="v2"] body.app-v4 .mclose,
html[data-design="v2"] body.app-v4 .mobile-more-close,
html[data-design="v2"] body.admin-v4 .modal-close {
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.74) !important;
  border: 1px solid var(--rl-line) !important;
  color: var(--rl-text-2) !important;
}

@media (max-width: 900px) {
  html[data-design="v2"] body.admin-v4 nav.nav {
    min-height: 62px !important;
    padding: 10px 14px !important;
    background: rgba(255,255,255,.80) !important;
    border-bottom: 1px solid var(--rl-line) !important;
    box-shadow: 0 10px 28px rgba(28,42,36,.07) !important;
  }

  html[data-design="v2"] body.admin-v4 .nav-tabs {
    position: sticky !important;
    top: 62px !important;
    z-index: 50 !important;
    display: flex !important;
    width: auto !important;
    min-height: 0 !important;
    height: auto !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--rl-line) !important;
    border-radius: 0 !important;
    background: rgba(255,255,255,.78) !important;
    box-shadow: 0 10px 26px rgba(28,42,36,.06) !important;
  }

  html[data-design="v2"] body.admin-v4 .tab-btn {
    flex: 0 0 auto !important;
    min-width: 136px !important;
  }

  html[data-design="v2"] body.admin-v4 .content,
  html[data-design="v2"] body.admin-v4 main.content {
    margin-left: 0 !important;
    padding: 18px 14px 34px !important;
  }
}

@media (max-width: 640px) {
  html[data-design="v2"] body.app-v4,
  html[data-design="v2"] body.admin-v4 {
    --rl-body: 14px;
    overflow-x: clip !important;
  }

  html[data-design="v2"] body.app-v4 {
    padding-bottom: calc(var(--rl-mobile-nav-h) + env(safe-area-inset-bottom)) !important;
  }

  html[data-design="v2"] body.app-v4 .page {
    margin-left: 0 !important;
    padding: 16px 12px calc(var(--rl-mobile-nav-h) + 28px + env(safe-area-inset-bottom)) !important;
  }

  html[data-design="v2"] body.app-v4 nav.nav {
    min-height: 58px !important;
    padding: 8px 12px !important;
    border-radius: 0 0 22px 22px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--rl-line) !important;
    background: rgba(255,255,255,.84) !important;
    box-shadow: 0 12px 30px rgba(28,42,36,.08) !important;
  }

  html[data-design="v2"] body.app-v4 .nav-brand {
    min-height: 44px !important;
    padding: 6px 8px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html[data-design="v2"] body.app-v4 .nav-tabs {
    display: none !important;
  }

  html[data-design="v2"] body.app-v4 .nav-right {
    margin-left: auto !important;
    padding: 0 !important;
    border: 0 !important;
    flex-direction: row !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html[data-design="v2"] body.app-v4 .nav-user,
  html[data-design="v2"] body.app-v4 .icon-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
  }

  html[data-design="v2"] body.app-v4 .mb-dash__topbar,
  html[data-design="v2"] body.app-v4 .mb-cal__topbar,
  html[data-design="v2"] body.app-v4 .mb-cust__topbar,
  html[data-design="v2"] body.app-v4 .mb-req__topbar,
  html[data-design="v2"] body.app-v4 .mb-fin__hd,
  html[data-design="v2"] body.app-v4 .ch {
    border-radius: var(--rl-radius) !important;
    padding: 14px !important;
  }

  html[data-design="v2"] body.app-v4 .mb-kpi,
  html[data-design="v2"] body.app-v4 .card,
  html[data-design="v2"] body.app-v4 .panel,
  html[data-design="v2"] body.app-v4 .set-card,
  html[data-design="v2"] body.app-v4 .table-wrap,
  html[data-design="v2"] body.admin-v4 .card,
  html[data-design="v2"] body.admin-v4 .panel,
  html[data-design="v2"] body.admin-v4 .table-wrap,
  html[data-design="v2"] body.admin-v4 .kpi-card,
  html[data-design="v2"] body.admin-v4 .dash-qa-card {
    border-radius: var(--rl-radius) !important;
  }

  html[data-design="v2"] body.app-v4 .btn,
  html[data-design="v2"] body.app-v4 .mb-btn,
  html[data-design="v2"] body.app-v4 button,
  html[data-design="v2"] body.admin-v4 .btn,
  html[data-design="v2"] body.admin-v4 button {
    min-height: 44px !important;
  }

  html[data-design="v2"] body.app-v4 .mfoot,
  html[data-design="v2"] body.admin-v4 .modal-actions {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 2 !important;
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  html[data-design="v2"] body.app-v4 .mfoot .btn,
  html[data-design="v2"] body.app-v4 .mfoot button,
  html[data-design="v2"] body.admin-v4 .modal-actions .btn,
  html[data-design="v2"] body.admin-v4 .modal-actions button {
    flex: 1 1 auto !important;
    justify-content: center !important;
  }

  html[data-design="v2"] body.app-v4 .mbg,
  html[data-design="v2"] body.admin-v4 .modal-bg,
  html[data-design="v2"] body.admin-v4 .dlg-bg {
    padding: 0 !important;
    align-items: flex-end !important;
  }

  html[data-design="v2"] body.app-v4 .modal,
  html[data-design="v2"] body.admin-v4 .modal,
  html[data-design="v2"] body.admin-v4 .dlg {
    width: 100% !important;
    max-width: none !important;
    max-height: min(88dvh, 760px) !important;
    border-radius: 12px 26px 0 0 !important;
    border-bottom: 0 !important;
  }

  html[data-design="v2"] body.app-v4 .table-wrap,
  html[data-design="v2"] body.admin-v4 .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
  }
}

html[data-design="v2"] body.app-v4 .mob-bnav {
  position: fixed !important;
  left: max(10px, env(safe-area-inset-left)) !important;
  right: max(10px, env(safe-area-inset-right)) !important;
  bottom: max(10px, env(safe-area-inset-bottom)) !important;
  height: 64px !important;
  padding: 7px !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.80)),
    var(--rl-gradient-soft) !important;
  box-shadow: 0 -2px 6px -2px rgba(28,42,36,.04), 0 -8px 18px -8px rgba(28,42,36,.10) !important;
  backdrop-filter: blur(22px) saturate(1.14) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.14) !important;
}

html[data-design="v2"] body.app-v4 .mob-bnav-item {
  min-height: 50px !important;
  border-radius: 10px !important;
  color: var(--rl-text-3) !important;
  font-size: 10.5px !important;
  font-weight: 760 !important;
}

html[data-design="v2"] body.app-v4 .mob-bnav-item svg {
  width: 20px !important;
  height: 20px !important;
}

html[data-design="v2"] body.app-v4 .mob-bnav-item.active {
  background: var(--rl-gradient) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(14,143,131,.24) !important;
}

html[data-design="v2"] body.app-v4 .mobile-more-backdrop {
  background: rgba(23,33,29,.38) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

html[data-design="v2"] body.app-v4 .mobile-more-sheet {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  border-radius: 12px 28px 0 0 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.90)),
    var(--rl-gradient-soft) !important;
  border: 1px solid rgba(255,255,255,.80) !important;
  box-shadow: 0 -4px 10px -4px rgba(28,42,36,.06), 0 -12px 24px -12px rgba(28,42,36,.12) !important;
  padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
}

html[data-design="v2"] body.app-v4 .mobile-more-handle {
  background: rgba(14,143,131,.28) !important;
}

@media (max-width: 380px) {
  html[data-design="v2"] body.app-v4 .page {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  html[data-design="v2"] body.app-v4 .mob-bnav {
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    height: 62px !important;
  }

  html[data-design="v2"] body.app-v4 .mob-bnav-item {
    font-size: 10px !important;
  }
}

/* ==========================================================================
   Relaunch pass 2 - visible product surface transformation
   Focus: Dashboard, Calendar, Customers, Requests.
   ========================================================================== */

html[data-design="v2"] body.app-v4 {
  --rl-hero-text: #f8fffb;
  --rl-hero-muted: rgba(248,255,251,.72);
  --rl-panel-border: rgba(14,143,131,.18);
  --rl-panel-border-strong: rgba(14,143,131,.34);
}

html[data-design="v2"] body.app-v4 #page-dashboard,
html[data-design="v2"] body.app-v4 #page-kalender,
html[data-design="v2"] body.app-v4 #page-kunden,
html[data-design="v2"] body.app-v4 #page-anfragen {
  max-width: none !important;
  padding-top: 24px !important;
}

html[data-design="v2"] body.app-v4 #app > .page:not(.active) {
  display: none !important;
}

html[data-design="v2"] body.app-v4 #app > .page.active {
  display: block !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard::before,
html[data-design="v2"] body.app-v4 #page-kalender::before,
html[data-design="v2"] body.app-v4 #page-kunden::before,
html[data-design="v2"] body.app-v4 #page-anfragen::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(118deg, rgba(14,143,131,.12), transparent 28%, rgba(56,200,181,.08) 76%, transparent),
    repeating-linear-gradient(90deg, rgba(14,143,131,.03) 0 1px, transparent 1px 92px) !important;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.62), transparent 74%) !important;
}

/* Dashboard: command-center composition */
html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash {
  display: block !important;
  height: auto !important;
  min-height: calc(100dvh - 48px) !important;
  background: transparent !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__main {
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  gap: 20px !important;
  background: transparent !important;
}

/* SCROLL-FIX: Dashboard-spezifisches Page-Element scrollbar machen.
   Versuche, .mb-dash__scroll als internen Scroll-Container zu nutzen,
   scheiterten am Grid-Layout, das mit dem Inhalt expandiert. Die einfachste
   und robusteste Lösung: die .page selbst scrollt. .page ist sonst auf
   height:100vh + overflow:hidden gelocked (38-skin.css:2721, sinnvoll für
   Calendar). Für Dashboard heben wir das overflow auf, damit der gesamte
   Inhalt erreichbar bleibt. */
html[data-design="v2"] body.app-v4 #page-dashboard.page.active {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__topbar {
  min-height: 176px !important;
  height: auto !important;
  align-items: flex-start !important;
  padding: 28px !important;
  border: 0 !important;
  border-radius: 34px !important;
  background:
    linear-gradient(135deg, rgba(6,63,57,.96), rgba(14,143,131,.92) 48%, rgba(56,200,181,.82)),
    linear-gradient(90deg, rgba(255,255,255,.10), transparent 55%) !important;
  color: var(--rl-hero-text) !important;
  box-shadow: 0 6px 14px -8px rgba(7,79,70,.18), 0 18px 32px -16px rgba(7,79,70,.22), inset 0 1px 0 rgba(255,255,255,.22) !important;
  overflow: hidden !important;
  position: relative !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__topbar::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, transparent 1px 72px),
    linear-gradient(0deg, rgba(255,255,255,.10) 0 1px, transparent 1px 72px) !important;
  opacity: .26 !important;
  pointer-events: none !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__title-group {
  position: relative !important;
  z-index: 1 !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  max-width: 680px !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__title {
  color: var(--rl-hero-text) !important;
  font-size: clamp(34px, 4vw, 58px) !important;
  line-height: .98 !important;
  font-weight: 860 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__subtitle {
  color: var(--rl-hero-muted) !important;
  font-size: 15px !important;
  font-weight: 650 !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__search {
  position: relative !important;
  z-index: 1 !important;
  width: min(360px, 34vw) !important;
  min-height: 52px !important;
  padding: 0 18px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.18) !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__search input,
html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__search input::placeholder,
html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__kbd {
  color: rgba(255,255,255,.82) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__icon-btn {
  position: relative !important;
  z-index: 1 !important;
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.26) !important;
  color: #fff !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__scroll {
  overflow: visible !important;
  padding: 0 0 32px !important;
  background: transparent !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  padding: 0 !important;
  margin: 18px 24px 0 !important;
  position: relative !important;
  z-index: 3 !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi {
  min-height: 148px !important;
  padding: 22px !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.82)),
    linear-gradient(135deg, rgba(14,143,131,.13), transparent 68%) !important;
  border-color: rgba(255,255,255,.78) !important;
  box-shadow: 0 4px 8px -4px rgba(28,42,36,.06), 0 12px 24px -10px rgba(28,42,36,.10) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi__label {
  font-size: 12px !important;
  text-transform: uppercase !important;
  color: var(--rl-text-3) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi__value {
  margin-top: 12px !important;
  font-size: clamp(28px, 3vw, 42px) !important;
  line-height: 1 !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.42fr) minmax(340px, .58fr) !important;
  gap: 22px !important;
  margin: 24px 0 0 !important;
  padding: 0 !important;
  align-items: start !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-schedule {
  min-height: 620px !important;
  border-radius: 34px !important;
  overflow: hidden !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-schedule__hd {
  min-height: 74px !important;
  padding: 20px 24px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.62)),
    var(--rl-gradient-soft) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-schedule__body {
  min-height: 500px !important;
  padding: 22px 26px !important;
  gap: 14px !important;
  background:
    linear-gradient(90deg, rgba(14,143,131,.045), transparent 42%),
    repeating-linear-gradient(0deg, rgba(42,50,45,.055) 0 1px, transparent 1px 72px) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__rightcol {
  gap: 22px !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-map-card {
  min-height: 310px !important;
  border-radius: 34px !important;
  background:
    linear-gradient(135deg, rgba(6,63,57,.94), rgba(14,143,131,.78)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 1px, transparent 1px 18px) !important;
  color: #fff !important;
  overflow: hidden !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-map-card [data-mb-dash-route-meta] {
  background: rgba(255,255,255,.20) !important;
  border-color: rgba(255,255,255,.26) !important;
  color: #fff !important;
  backdrop-filter: blur(10px) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-requests {
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Calendar: operations cockpit */
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal {
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 62px) !important;
  padding: 0 !important;
  gap: 20px !important;
  grid-template-columns: 320px minmax(0, 1fr) !important;
  background: transparent !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__toolbar {
  min-height: 126px !important;
  padding: 24px 26px !important;
  border: 0 !important;
  border-radius: 34px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,255,255,.72)),
    linear-gradient(110deg, rgba(14,143,131,.16), transparent 52%, rgba(56,200,181,.12)) !important;
  box-shadow: var(--rl-shadow-lg) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__title {
  order: -1 !important;
  min-width: min(100%, 380px) !important;
  flex: 1 1 100% !important;
  margin: 0 !important;
  font-size: clamp(28px, 3vw, 46px) !important;
  font-weight: 860 !important;
  line-height: 1 !important;
  color: var(--rl-text) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__toolbar-group,
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__search {
  min-height: 48px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__sidebar {
  gap: 16px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-minical,
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__kpi,
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__legend,
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__homebase {
  border-radius: 12px !important;
  padding: 18px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__kpi {
  min-height: 148px !important;
  background:
    linear-gradient(135deg, rgba(6,63,57,.96), rgba(14,143,131,.86)),
    linear-gradient(90deg, rgba(255,255,255,.12), transparent 64%) !important;
  color: #fff !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__kpi-label,
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__kpi-sub {
  color: rgba(255,255,255,.72) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__kpi-value {
  color: #fff !important;
  font-size: 34px !important;
  line-height: 1 !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__view {
  min-height: 720px !important;
  border-radius: 34px !important;
  box-shadow: var(--rl-shadow-lg) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__hd,
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-month__hd {
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,244,236,.84)) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__dow-cell {
  min-height: 68px !important;
  padding: 14px 12px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-event,
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-month__event {
  border-radius: 10px !important;
  box-shadow: 0 10px 26px rgba(14,143,131,.14) !important;
}

/* Customers: CRM dossier */
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust {
  height: auto !important;
  min-height: calc(100dvh - 62px) !important;
  grid-template-columns: minmax(360px, 430px) minmax(0, 1fr) !important;
  gap: 20px !important;
  padding: 0 !important;
  background: transparent !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__toolbar {
  min-height: 118px !important;
  padding: 24px 26px !important;
  border: 0 !important;
  border-radius: 34px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,255,255,.74)),
    linear-gradient(110deg, rgba(14,143,131,.15), transparent 56%) !important;
  box-shadow: var(--rl-shadow-lg) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__toolbar::before {
  content: "Kunden" !important;
  flex: 1 1 100% !important;
  color: var(--rl-text) !important;
  font-size: clamp(30px, 3.4vw, 48px) !important;
  line-height: 1 !important;
  font-weight: 860 !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__search {
  max-width: 460px !important;
  min-height: 50px !important;
  border-radius: 8px !important;
  padding-inline: 18px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__filter-chip {
  min-height: 42px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  font-weight: 750 !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__filter-chip[data-active="true"] {
  background: var(--rl-gradient) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(14,143,131,.18) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__list,
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail {
  border-radius: 34px !important;
  box-shadow: var(--rl-shadow-lg) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__list-hd {
  min-height: 64px !important;
  padding: 18px 20px !important;
  background: rgba(255,255,255,.74) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__row {
  grid-template-columns: 56px 1fr auto !important;
  gap: 14px !important;
  padding: 18px 20px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__avatar {
  width: 56px !important;
  height: 56px !important;
  border-radius: 10px !important;
  background: var(--rl-gradient) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(14,143,131,.18) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__row-name {
  font-size: 15px !important;
  font-weight: 760 !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail-hd {
  grid-template-columns: 88px 1fr auto !important;
  gap: 20px !important;
  padding: 28px !important;
  background:
    linear-gradient(135deg, rgba(6,63,57,.96), rgba(14,143,131,.82)),
    linear-gradient(90deg, rgba(255,255,255,.12), transparent 62%) !important;
  color: #fff !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail-avatar {
  width: 88px !important;
  height: 88px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.24) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail-name,
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail-sub,
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail-sub a {
  color: #fff !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__kpis {
  gap: 10px !important;
  padding: 16px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--rl-line) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__kpi {
  border-radius: 10px !important;
  background: rgba(255,255,255,.82) !important;
  border: 1px solid var(--rl-line) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__tabs {
  padding: 10px 16px 0 !important;
  gap: 8px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__tab {
  min-height: 44px !important;
  border-radius: 8px 999px 0 0 !important;
  font-weight: 750 !important;
}

/* Requests: pipeline inbox */
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req {
  height: auto !important;
  min-height: calc(100dvh - 62px) !important;
  grid-template-columns: minmax(380px, 460px) minmax(0, 1fr) !important;
  gap: 20px !important;
  padding: 0 !important;
  background: transparent !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__toolbar {
  min-height: 126px !important;
  padding: 24px 26px !important;
  border: 0 !important;
  border-radius: 34px !important;
  background:
    linear-gradient(135deg, rgba(6,63,57,.96), rgba(14,143,131,.84)),
    linear-gradient(90deg, rgba(255,255,255,.12), transparent 60%) !important;
  box-shadow: 0 6px 14px -6px rgba(7,79,70,.14), 0 16px 30px -14px rgba(7,79,70,.18) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__toolbar::before {
  content: "Anfragen" !important;
  flex: 1 1 100% !important;
  color: #fff !important;
  font-size: clamp(30px, 3.4vw, 48px) !important;
  line-height: 1 !important;
  font-weight: 860 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__status-tabs {
  min-height: 52px !important;
  padding: 6px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.24) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__status-tab {
  min-height: 40px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  color: rgba(255,255,255,.76) !important;
  font-weight: 760 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__status-tab[data-active="true"] {
  background: #fff !important;
  color: var(--rl-petrol) !important;
  box-shadow: 0 14px 32px rgba(6,63,57,.18) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__search {
  max-width: 360px !important;
  min-height: 52px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.24) !important;
  color: #fff !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__search input,
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__search input::placeholder {
  color: rgba(255,255,255,.84) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__list,
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__detail {
  border-radius: 34px !important;
  box-shadow: var(--rl-shadow-lg) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__list-hd {
  min-height: 64px !important;
  padding: 18px 20px !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__item {
  grid-template-columns: 10px 1fr auto !important;
  gap: 16px !important;
  padding: 20px 20px 20px 14px !important;
  border-bottom-color: rgba(42,50,45,.08) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__item[data-selected="true"] {
  background:
    linear-gradient(135deg, rgba(14,143,131,.14), rgba(255,255,255,.78)) !important;
  box-shadow: inset 4px 0 0 var(--rl-petrol) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__item-dot {
  width: 10px !important;
  height: 42px !important;
  border-radius: 8px !important;
  margin-top: 0 !important;
  background: var(--rl-gradient) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__item-name {
  font-size: 15px !important;
  font-weight: 780 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__detail-hd {
  padding: 30px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,255,255,.74)),
    var(--rl-gradient-soft) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__detail-title {
  font-size: clamp(26px, 2.6vw, 38px) !important;
  line-height: 1.05 !important;
  font-weight: 860 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__body {
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 16px !important;
  padding: 22px !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__card {
  grid-column: span 6 !important;
  border-radius: 12px !important;
  padding: 20px !important;
  background: rgba(255,255,255,.76) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__card--wide {
  grid-column: 1 / -1 !important;
}

/* Shared mobile surface transformation */
@media (max-width: 980px) {
  html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi-row,
  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__grid,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal,
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust,
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req {
    grid-template-columns: 1fr !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__grid {
    margin-top: 20px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__sidebar {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  html[data-design="v2"] body.app-v4 #page-dashboard,
  html[data-design="v2"] body.app-v4 #page-kalender,
  html[data-design="v2"] body.app-v4 #page-kunden,
  html[data-design="v2"] body.app-v4 #page-anfragen {
    padding-top: 12px !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__topbar,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__toolbar,
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__toolbar,
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__toolbar {
    min-height: 150px !important;
    padding: 22px 18px !important;
    border-radius: 12px !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__topbar {
    flex-wrap: wrap !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__search,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__search,
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__search,
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__search {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 100% !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: -34px 10px 0 !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi {
    min-height: 118px !important;
    padding: 16px !important;
    border-radius: 10px !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi__value {
    font-size: 26px !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-schedule,
  html[data-design="v2"] body.app-v4 #page-dashboard .mb-map-card,
  html[data-design="v2"] body.app-v4 #page-dashboard .mb-requests,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__view,
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__list,
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail,
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__list,
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__detail {
    border-radius: 12px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__sidebar {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    gap: 12px !important;
    padding-bottom: 4px !important;
    scroll-snap-type: x proximity !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-minical,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__kpi,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__legend,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__homebase {
    min-width: 78vw !important;
    scroll-snap-align: start !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail-hd {
    grid-template-columns: 68px 1fr !important;
    padding: 22px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail-actions {
    grid-column: 1 / -1 !important;
    justify-content: stretch !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail-actions .mb-btn,
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail-actions button {
    flex: 1 1 auto !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__kpis,
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__body {
    grid-template-columns: 1fr !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__card {
    grid-column: 1 / -1 !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__status-tabs {
    width: 100% !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
  }
}

/* Final precedence for the first true authenticated app rebuild block. */
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal--ops,
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust--dossier,
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req--pipeline {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-command {
  display: grid !important;
  grid-template-columns: minmax(220px, .7fr) minmax(280px, 1fr) auto !important;
  align-items: start !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-command .mb-dash__spacer {
  display: none !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-command__focus {
  position: relative !important;
  z-index: 1 !important;
  min-height: 86px !important;
  padding: 18px 20px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.78) !important;
  backdrop-filter: blur(14px) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-action-lane {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 20px 0 0 !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-action-lane__item {
  min-height: 92px !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px !important;
  border: 1px solid rgba(25,53,47,.10) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,255,255,.78)), linear-gradient(120deg, rgba(14,143,131,.12), transparent 64%) !important;
  color: var(--rl-text) !important;
  text-align: left !important;
  box-shadow: 0 18px 46px rgba(26,42,36,.10) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-action-lane__icon {
  width: 52px !important;
  height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  background: var(--rl-gradient) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 860 !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-workspace,
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-workspace,
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-workspace {
  display: grid !important;
  gap: 20px !important;
  align-items: start !important;
  min-width: 0 !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-workspace {
  grid-template-columns: minmax(280px, 330px) minmax(0, 1fr) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-workspace {
  grid-template-columns: minmax(330px, 410px) minmax(0, 1fr) minmax(220px, 280px) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-workspace {
  grid-template-columns: minmax(340px, 430px) minmax(0, 1fr) minmax(220px, 280px) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-ops-hero,
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-command,
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-command {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-ops-hero__intro,
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-command__intro,
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-command__intro {
  flex: 1 1 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-ops-hero__intro strong,
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-command__intro strong,
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-command__intro strong {
  font-size: clamp(32px, 3.6vw, 52px) !important;
  line-height: 1 !important;
  font-weight: 880 !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__title {
  order: 0 !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  background: rgba(14,143,131,.09) !important;
  color: var(--rl-petrol) !important;
  font-size: 16px !important;
  font-weight: 820 !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__toolbar::before,
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__toolbar::before {
  content: none !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__insight,
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context,
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail {
  border: 1px solid rgba(25,53,47,.10) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.86)), linear-gradient(135deg, rgba(14,143,131,.12), transparent 62%) !important;
  box-shadow: 0 4px 8px -4px rgba(26,42,36,.06), 0 12px 22px -10px rgba(26,42,36,.09) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context,
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail {
  position: sticky !important;
  top: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 14px !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail__action {
  min-height: 46px !important;
  border: 1px solid rgba(14,143,131,.18) !important;
  border-radius: 10px !important;
  background: rgba(14,143,131,.08) !important;
  color: var(--rl-petrol) !important;
  font-weight: 820 !important;
  text-align: left !important;
  padding: 0 14px !important;
}

@media (max-width: 1180px) {
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-workspace,
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-workspace {
    grid-template-columns: minmax(300px, 390px) minmax(0, 1fr) !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-workspace {
    grid-template-columns: minmax(220px, 240px) minmax(0, 1fr) !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context,
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail {
    position: static !important;
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-command,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-workspace,
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-workspace,
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-workspace,
  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-action-lane {
    grid-template-columns: 1fr !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__sidebar,
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__list,
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__list,
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context,
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail {
    position: static !important;
  }
}

@media (max-width: 640px) {
  html[data-design="v2"] body.app-v4 #app > #page-dashboard.active,
  html[data-design="v2"] body.app-v4 #app > #page-kalender.active,
  html[data-design="v2"] body.app-v4 #app > #page-kunden.active,
  html[data-design="v2"] body.app-v4 #app > #page-anfragen.active {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-command {
    min-height: 252px !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req--pipeline,
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-command,
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-workspace,
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__list,
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__detail,
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-command > * {
    min-width: 0 !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__status-tabs {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-action-lane__item {
    min-height: 76px !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    padding: 12px !important;
    border-radius: 10px !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-action-lane__icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-ops-hero__intro strong,
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-command__intro strong,
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-command__intro strong {
    font-size: 34px !important;
  }
}

/* --------------------------------------------------------------------------
   Rebuilt surface correction pass: composition, contrast, typography
   Scope: Dashboard, Calendar, Customers, Requests only.
   -------------------------------------------------------------------------- */

html[data-design="v2"] body.app-v4 #page-dashboard,
html[data-design="v2"] body.app-v4 #page-kalender,
html[data-design="v2"] body.app-v4 #page-kunden,
html[data-design="v2"] body.app-v4 #page-anfragen {
  --surface-text: #17211d;
  --surface-text-2: #42534c;
  --surface-text-3: #65736d;
  --surface-text-soft: rgba(255,255,255,.84);
  --surface-panel: rgba(255,255,255,.94);
  --surface-panel-soft: rgba(255,255,255,.86);
  --surface-line: rgba(35,55,48,.12);
  --surface-line-strong: rgba(35,55,48,.18);
  --surface-shadow: 0 18px 44px rgba(28,42,36,.10);
  color: var(--surface-text) !important;
  font-feature-settings: "tnum" 1, "ss01" 1;
}

html[data-design="v2"] body.app-v4 #page-dashboard :is(.mb-kpi__value, [data-mb-dash-kpi]),
html[data-design="v2"] body.app-v4 #page-kalender :is(.mb-cal__kpi-value, [data-kpi-value]),
html[data-design="v2"] body.app-v4 #page-kunden :is(.mb-cust__kpi-value, .mb-cust__metric-value),
html[data-design="v2"] body.app-v4 #page-anfragen :is(.mb-req__metric-value, .mb-req__status-tab-badge) {
  font-family: var(--rl-font) !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1 !important;
  letter-spacing: 0 !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard :is(.mb-kpi__label, .mb-schedule__hd-title, .mb-dash-command__eyebrow),
html[data-design="v2"] body.app-v4 #page-kalender :is(.mb-cal-ops-hero__eyebrow, .mb-cal__kpi-label, .mb-cal__legend-title, .mb-cal__insight-label),
html[data-design="v2"] body.app-v4 #page-kunden :is(.mb-cust-command__eyebrow, .mb-cust__list-count, .mb-cust-context__card span, .mb-cust-context__metric span),
html[data-design="v2"] body.app-v4 #page-anfragen :is(.mb-req-command__eyebrow, .mb-req__list-count, .mb-req-decision-rail__card span) {
  font-size: 11px !important;
  line-height: 1.15 !important;
  font-weight: 820 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard :is(.mb-kpi, .mb-schedule, .mb-requests),
html[data-design="v2"] body.app-v4 #page-kalender :is(.mb-cal__view, .mb-minical, .mb-cal__legend, .mb-cal__homebase, .mb-cal__insight),
html[data-design="v2"] body.app-v4 #page-kunden :is(.mb-cust__list, .mb-cust__detail, .mb-cust-context),
html[data-design="v2"] body.app-v4 #page-anfragen :is(.mb-req__list, .mb-req__detail, .mb-req-decision-rail) {
  color: var(--surface-text) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard :is(.mb-kpi__delta, .mb-schedule__hd-meta, [data-mb-dash-empty]),
html[data-design="v2"] body.app-v4 #page-kalender :is(.mb-cal__legend-row, .mb-cal__insight-copy, .mb-cal__homebase, .mb-cal__kpi-sub),
html[data-design="v2"] body.app-v4 #page-kunden :is(.mb-cust__detail-sub, .mb-cust-context__card p, .mb-cust__row-meta, .mb-cust__tab),
html[data-design="v2"] body.app-v4 #page-anfragen :is(.mb-req__list-hd, .mb-req__item-meta, .mb-req-decision-rail__card p, .mb-req__card) {
  color: var(--surface-text-3) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard :is(.mb-dash__topbar, .mb-dash__topbar *, .mb-map-card, .mb-map-card *),
html[data-design="v2"] body.app-v4 #page-anfragen :is(.mb-req__toolbar, .mb-req__toolbar *) {
  color: var(--surface-text-soft) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard :is(.mb-dash__title, .mb-dash-command__eyebrow, .mb-dash__topbar .mb-btn--primary),
html[data-design="v2"] body.app-v4 #page-dashboard .mb-map-card :is(svg, [data-mb-dash-route-meta]),
html[data-design="v2"] body.app-v4 #page-anfragen :is(.mb-req-command__intro strong, .mb-req-command__eyebrow, .mb-req__toolbar .mb-btn--primary) {
  color: #fff !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard :is(.mb-dash-action-lane__item, .mb-kpi, .mb-schedule__hd, .mb-requests header),
html[data-design="v2"] body.app-v4 #page-kalender :is(.mb-cal__toolbar, .mb-cal__view, .mb-minical, .mb-cal__legend, .mb-cal__homebase, .mb-cal__insight),
html[data-design="v2"] body.app-v4 #page-kunden :is(.mb-cust__toolbar, .mb-cust__list, .mb-cust__detail, .mb-cust-context__card, .mb-cust-context__metric),
html[data-design="v2"] body.app-v4 #page-anfragen :is(.mb-req__list, .mb-req__detail, .mb-req-decision-rail__card) {
  border-color: var(--surface-line) !important;
  background-color: var(--surface-panel) !important;
}

/* Calendar: make the planning canvas the dominant usable workspace.
   The parent .page is locked to 100vh + overflow:hidden by 38-skin.css
   (page-takeover block ~L2804), so nothing scrolls at page level —
   every panel below must manage its own overflow inside that envelope. */
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal--ops {
  gap: 14px !important;
  min-height: 0 !important;
}

/* Responsive slot height: shrinks the per-hour pixel ramp on shorter
   viewports so 07:00–21:00 fits with minimal internal scroll, expands
   up to 56px on tall viewports. Subtrahend 280 = nav (~56) + hero
   (~200) + padding/gap (~24). 40px is the floor — keeps 15-min slots
   at ≥10px for still-usable DnD on 1366×768 second monitors. */
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal {
  --px-per-hour: clamp(40px, calc((100vh - 280px) / 14), 56px) !important;
}

/* Workspace: explicit 1fr row so max-height:100% on the items below
   resolves to the actual available height (otherwise the auto row makes
   it circular). align-items:start prevents stretch — important so the
   week panel doesn't pull a big empty area below the 784px-tall columns
   on tall viewports. */
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-workspace {
  align-items: start !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

/* Sidebar rail: natural height, internally scrollable if the 5 cards
   (KPI, Mini-Cal, Insight, Legend, Homebase) don't fit. Overrides the
   earlier `overflow: visible` at ~L6790. */
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-rail,
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__sidebar {
  max-height: 100% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

/* Week/month panel: capped at workspace height. The internal
   .mb-cal-week__body scroll (flex:1; overflow-y:auto) engages here. */
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__view {
  max-height: 100% !important;
  min-height: 0 !important;
}

/* Hero adaptive auf kurzen Viewports (z.B. 1366×768 Zweitmonitor):
   Untertitel + großzügiges Padding + Focus-Card-Mindesthöhe + großer
   Titel kosten zusammen ~250px Vertikal-Budget, das auf kurzen
   Bildschirmen nicht in 100vh - Workspace passt. Hier schlanker. */
@media (max-height: 820px) {
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command.mb-page-hero {
    min-height: 0 !important;
    padding: 14px 22px !important;
    row-gap: 10px !important;
  }
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command .mb-page-hero__focus {
    min-height: 0 !important;
    padding: 10px 14px !important;
  }
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command .mb-page-hero__intro strong {
    font-size: clamp(30px, 3.4vw, 44px) !important;
    line-height: 0.96 !important;
  }
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command .mb-page-hero__copy {
    display: none !important;
  }
}

/* Calendar hero adopts the shared .mb-page-hero system in full
   (intro / focus / controls grid). The legacy .mb-cal-ops-hero classes
   coexist for compatibility — colour and layout are owned by the shared
   rules at .mb-page-hero (line 4297+). */

/* Eyebrow inherits the shared treatment via .mb-page-hero__eyebrow on the same
   span, so we only need to silence any base copper/petrol from .mb-cal__toolbar
   on the legacy .mb-cal-ops-hero__eyebrow class. */
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-ops-hero__eyebrow {
  color: rgba(255,255,255,.72) !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Focus card: stack the period controls on top, view-switch underneath.
   The .mb-page-hero__focus base already provides the dark glass surface. */
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-ops-hero__focus {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-ops-hero__period {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
}

/* "Heute" CTA on the dark glass — light fill so it reads as the primary
   period anchor, not a ghost button. */
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-ops-hero__period .mb-cal__today-btn {
  height: 36px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,.32) !important;
  background: rgba(255,255,255,.92) !important;
  color: var(--rl-petrol) !important;
  font-weight: 820 !important;
  letter-spacing: .01em !important;
  cursor: pointer !important;
  transition: background .14s ease, transform .14s ease !important;
}
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-ops-hero__period .mb-cal__today-btn:hover {
  background: #fff !important;
  transform: translateY(-1px) !important;
}

/* Period prev/next arrows — circular, glass on glass. */
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-ops-hero__period .mb-cal__nav {
  display: inline-flex !important;
  gap: 6px !important;
}
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-ops-hero__period .mb-cal__nav-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  background: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.92) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background .14s ease !important;
}
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-ops-hero__period .mb-cal__nav-btn:hover {
  background: rgba(255,255,255,.20) !important;
}

/* Dynamic period title — refined for dark glass context, not a foreign light pill. */
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__title {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 36px !important;
  padding: 6px 16px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 820 !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18) !important;
}

/* View-switch (Woche/Monat) — segmented pill, light-on-glass with active emerald. */
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-ops-hero__viewswitch {
  display: inline-flex !important;
  gap: 4px !important;
  padding: 4px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.10) !important;
  align-self: flex-start !important;
}
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-ops-hero__viewswitch .mb-btn {
  height: 30px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,.86) !important;
  font-size: 12.5px !important;
  font-weight: 820 !important;
  letter-spacing: .02em !important;
  cursor: pointer !important;
  transition: background .14s ease, color .14s ease !important;
}
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-ops-hero__viewswitch .mb-btn:hover {
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
}
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-ops-hero__viewswitch .mb-btn[data-active="true"],
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-ops-hero__viewswitch .mb-btn.is-active {
  background: rgba(255,255,255,.92) !important;
  color: var(--rl-petrol) !important;
  box-shadow: 0 4px 10px -4px rgba(7,79,70,.5) !important;
}

/* Controls column: search on top, action row beneath. */
html[data-design="v2"] body.app-v4 #page-kalender .mb-page-hero__controls {
  gap: 12px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__search.mb-page-hero__search {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 44px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(10px) !important;
  transition: border-color .14s ease, background .14s ease !important;
}
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__search.mb-page-hero__search:focus-within {
  border-color: rgba(255,255,255,.46) !important;
  background: rgba(255,255,255,.18) !important;
}
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__search.mb-page-hero__search input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font-size: 14px !important;
  outline: none !important;
}
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__search.mb-page-hero__search input::placeholder {
  color: rgba(255,255,255,.62) !important;
}
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__search.mb-page-hero__search .mb-cal__kbd {
  padding: 2px 7px !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.78) !important;
  font-size: 10.5px !important;
  font-weight: 820 !important;
  letter-spacing: .04em !important;
}

/* Action row: ghost "Zeit blockieren" + primary "Neuer Termin". */
html[data-design="v2"] body.app-v4 #page-kalender .mb-page-hero__actions .mb-btn:not(.mb-btn--primary) {
  border: 1px solid rgba(255,255,255,.32) !important;
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
  font-weight: 760 !important;
}
html[data-design="v2"] body.app-v4 #page-kalender .mb-page-hero__actions .mb-btn:not(.mb-btn--primary):hover {
  background: rgba(255,255,255,.18) !important;
}
html[data-design="v2"] body.app-v4 #page-kalender .mb-page-hero__actions .mb-btn--primary {
  background: #fff !important;
  color: var(--rl-petrol) !important;
  border: 0 !important;
  font-weight: 850 !important;
  box-shadow: 0 8px 18px -8px rgba(7,79,70,.55) !important;
}
html[data-design="v2"] body.app-v4 #page-kalender .mb-page-hero__actions .mb-btn--primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 22px -8px rgba(7,79,70,.65) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-workspace {
  grid-template-columns: minmax(248px, 280px) minmax(0, 1fr) !important;
  gap: 14px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__sidebar {
  gap: 10px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender :is(.mb-minical, .mb-cal__kpi, .mb-cal__legend, .mb-cal__homebase, .mb-cal__insight) {
  border-radius: 10px !important;
  padding: 12px !important;
  box-shadow: 0 12px 28px rgba(28,42,36,.075) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__kpi {
  min-height: 118px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__kpi-value {
  font-size: 28px !important;
  line-height: 1.04 !important;
  font-weight: 850 !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__view {
  min-height: 560px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 8px -4px rgba(28,42,36,.06), 0 12px 22px -10px rgba(28,42,36,.09) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender :is(.mb-cal-week__hd, .mb-cal-month__hd) {
  min-height: 56px !important;
  background: linear-gradient(180deg, #fffdf9, #f4f0e8) !important;
  color: var(--surface-text-2) !important;
  border-bottom: 1px solid rgba(35,55,48,.10) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__dow-cell {
  min-height: 56px !important;
  padding: 10px 12px !important;
  font-weight: 760 !important;
  color: var(--surface-text-2) !important;
  letter-spacing: .01em !important;
}

/* Time axis (left gutter) — more legible. */
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__time {
  color: var(--surface-text-2) !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
}

html[data-design="v2"] body.app-v4 #page-kalender :is(.mb-cal-week__hour, .mb-cal-month__day-num) {
  color: var(--surface-text-3) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

html[data-design="v2"] body.app-v4 #page-kalender :is(.mb-cal-event, .mb-cal-month__event) {
  border-radius: 12px !important;
  color: var(--surface-text) !important;
  font-weight: 760 !important;
  box-shadow: 0 8px 18px rgba(14,143,131,.13) !important;
}

/* Calendar: rail hierarchy — operational KPI leads, decorative cards demoted.
   Order works in both flex (desktop / ≤640) and grid (≤980 2-col), so the
   priority sticks across all breakpoints. Display is left to the base
   module (34-mb-calendar.css) and existing breakpoint overrides. */
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__kpi      { order: 0 !important; min-height: 138px !important; }
html[data-design="v2"] body.app-v4 #page-kalender .mb-minical       { order: 1 !important; }
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__insight  { order: 2 !important; }
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__legend   { order: 3 !important; }
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__homebase { order: 4 !important; }

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__kpi-value {
  font-size: 32px !important;
  line-height: 1.04 !important;
  font-weight: 850 !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__legend {
  padding: 10px 12px !important;
  font-size: 12px !important;
  gap: 6px !important;
}
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__legend-dot {
  width: 8px !important;
  height: 8px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__insight--conflict {
  border-left: 3px solid var(--rl-petrol) !important;
}

/* Calendar: week-grid expressiveness — today emphasis, weekend tint, softer hour lines. */
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__col--today {
  background: linear-gradient(180deg, rgba(14,143,131,.10), rgba(14,143,131,.04) 40%, transparent 80%) !important;
  box-shadow: inset 4px 0 0 var(--rl-petrol), inset -1px 0 0 rgba(14,143,131,.12) !important;
}
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__col--today .mb-cal-week__dow-cell {
  position: relative !important;
  background: linear-gradient(180deg, rgba(14,143,131,.18), rgba(14,143,131,.06)) !important;
  color: var(--rl-petrol) !important;
  font-weight: 880 !important;
  border-bottom: 1px solid rgba(14,143,131,.22) !important;
}
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__col--today .mb-cal-week__dow-cell::after {
  content: "Heute" !important;
  position: absolute !important;
  top: 6px !important;
  right: 8px !important;
  padding: 2px 7px !important;
  border-radius: 8px !important;
  background: var(--rl-petrol) !important;
  color: #fff !important;
  font-size: 9.5px !important;
  font-weight: 850 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__col--weekend {
  background: rgba(35,55,48,.045) !important;
}
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__col--weekend .mb-cal-week__dow-cell {
  color: var(--surface-text-3) !important;
}
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__hour {
  border-color: rgba(35,55,48,.06) !important;
  transition: background .12s ease !important;
}
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__hour:hover {
  background: rgba(14,143,131,.06) !important;
  cursor: pointer !important;
}

/* Calendar mobile: horizontal scroll within the week view, sticky time gutter. */
@media (max-width: 720px) {
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__view {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week {
    min-width: 720px !important;
  }
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__time {
    position: sticky !important;
    left: 0 !important;
    background: var(--surface-panel) !important;
    z-index: 2 !important;
  }
}

/* Dashboard: tighten command-center alignment and card rhythm. */
html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__main {
  gap: 14px !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-command {
  grid-template-columns: minmax(220px, .72fr) minmax(260px, .9fr) minmax(300px, auto) !important;
  min-height: 154px !important;
  padding: 24px !important;
  align-items: center !important;
  border-radius: 12px !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-command__focus {
  min-height: 74px !important;
  padding: 16px 18px !important;
  border-radius: 10px !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__title {
  font-size: clamp(36px, 3.5vw, 50px) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__search {
  width: min(330px, 28vw) !important;
  min-height: 48px !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi-row {
  gap: 12px !important;
  margin: -54px 20px 0 !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi {
  min-height: 128px !important;
  padding: 18px !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 38px rgba(28,42,36,.10) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi__value {
  margin-top: 9px !important;
  font-size: clamp(27px, 2.4vw, 36px) !important;
  font-weight: 850 !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-action-lane {
  gap: 12px !important;
  margin-top: 16px !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-action-lane__item {
  min-height: 82px !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 34px rgba(28,42,36,.085) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .45fr) !important;
  gap: 18px !important;
  margin-top: 18px !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-schedule {
  min-height: 540px !important;
  border-radius: 12px !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-schedule__body {
  min-height: 420px !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-map-card {
  min-height: 250px !important;
  border-radius: 12px !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-requests {
  border-radius: 12px !important;
}

/* Customers and Requests: consistent dossier/pipeline text and readable light panels. */
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-command,
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-command {
  min-height: 104px !important;
  padding: 20px 22px !important;
  border-radius: 12px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-command__intro strong,
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-command__intro strong {
  font-size: clamp(30px, 3vw, 42px) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__row,
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__item {
  color: var(--surface-text) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden :is(.mb-cust__row-name, .mb-cust__detail-name),
html[data-design="v2"] body.app-v4 #page-anfragen :is(.mb-req__item-name, .mb-req__detail-title) {
  letter-spacing: 0 !important;
  font-weight: 820 !important;
}

html[data-design="v2"] body.app-v4 #page-kunden :is(.mb-cust__list-hd, .mb-cust__tabs, .mb-cust__kpis),
html[data-design="v2"] body.app-v4 #page-anfragen :is(.mb-req__list-hd, .mb-req__body) {
  background: rgba(255,255,255,.78) !important;
  border-color: var(--surface-line) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden :is(.mb-cust-context__card strong, .mb-cust-context__metric strong),
html[data-design="v2"] body.app-v4 #page-anfragen :is(.mb-req-decision-rail__card strong, .mb-req-decision-rail__action) {
  color: var(--surface-text) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__status-tab {
  color: rgba(255,255,255,.86) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__status-tab[data-active="true"],
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__status-tab[data-active="true"] * {
  color: var(--rl-petrol-deep) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard :is(.mb-btn, button),
html[data-design="v2"] body.app-v4 #page-kalender :is(.mb-btn, button),
html[data-design="v2"] body.app-v4 #page-kunden :is(.mb-btn, button),
html[data-design="v2"] body.app-v4 #page-anfragen :is(.mb-btn, button) {
  font-family: var(--rl-font) !important;
  font-weight: 780 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 980px) {
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-workspace,
  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__grid {
    grid-template-columns: 1fr !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-command {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__search {
    width: 100% !important;
  }
}

@media (max-width: 640px) {
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-ops-hero,
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-command,
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-command {
    min-height: auto !important;
    padding: 18px !important;
    border-radius: 12px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-ops-hero__intro {
    max-width: none !important;
    flex: 1 1 100% !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-ops-hero__intro strong,
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-command__intro strong,
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-command__intro strong {
    font-size: 30px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__sidebar {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
    scroll-snap-type: x proximity !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender :is(.mb-minical, .mb-cal__kpi, .mb-cal__legend, .mb-cal__homebase, .mb-cal__insight) {
    min-width: 78vw !important;
    scroll-snap-align: start !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__view {
    min-height: 520px !important;
    border-radius: 10px !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-command {
    min-height: auto !important;
    padding: 20px 18px !important;
    border-radius: 12px !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi-row {
    margin: -24px 8px 0 !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi {
    min-height: 112px !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-schedule,
  html[data-design="v2"] body.app-v4 #page-dashboard .mb-map-card,
  html[data-design="v2"] body.app-v4 #page-dashboard .mb-requests,
  html[data-design="v2"] body.app-v4 #page-kunden :is(.mb-cust__list, .mb-cust__detail, .mb-cust-context),
  html[data-design="v2"] body.app-v4 #page-anfragen :is(.mb-req__list, .mb-req__detail, .mb-req-decision-rail) {
    border-radius: 10px !important;
  }
}

/* --------------------------------------------------------------------------
   Core surface precision pass: stable framing, no hero/KPI collisions, one
   number system. Scope stays on rebuilt authenticated app surfaces.
   -------------------------------------------------------------------------- */

html[data-design="v2"] body.app-v4 #app > #page-dashboard.active,
html[data-design="v2"] body.app-v4 #app > #page-kalender.active,
html[data-design="v2"] body.app-v4 #app > #page-kunden.active,
html[data-design="v2"] body.app-v4 #app > #page-anfragen.active {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 1 1 0 !important;
  box-sizing: border-box !important;
  padding-inline: clamp(12px, 2vw, 24px) !important;
}

/* Settings shares the canvas-fill model with Dashboard so the workspace
   is properly centered. Without this override, Settings inherits both
   #app's padding-left (sidebar offset) AND .page's margin-left (sidebar
   offset again) plus the legacy `margin: 0 auto` from 04-layout.css —
   net result is a double left-shift with the inner v2 wrapper sliding
   right to compensate via its margin-inline:auto. The page must instead
   fill the visible canvas (100vw minus the sidebar) and let the inner
   1380px workspace wrapper handle the centering. */
html[data-design="v2"] body.app-v4 #app > #page-einstellungen.active {
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
  padding-inline: clamp(20px, 2.4vw, 36px) !important;
}

@media (min-width: 641px) {
  html[data-design="v2"] body.app-v4 #app > #page-einstellungen.active {
    width: calc(100vw - var(--sidebar-w, 224px)) !important;
    flex: 0 0 auto !important;
  }
}

html[data-design="v2"] body.app-v4 #page-dashboard > .mb-dash--command-center,
html[data-design="v2"] body.app-v4 #page-kalender > [data-design-version="v2"],
html[data-design="v2"] body.app-v4 #page-kunden > [data-design-version="v2"],
html[data-design="v2"] body.app-v4 #page-anfragen > [data-design-version="v2"] {
  width: min(100%, 1180px) !important;
  max-width: 1180px !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

/* Settings has an internal navigation rail + content split, so its
   centered wrapper is intentionally wider than the Dashboard/Kunden/
   Anfragen 1180px cap. Hero, group overview, workspace, and save bar
   all live inside this column. */
html[data-design="v2"] body.app-v4 #page-einstellungen > [data-design-version="v2"] {
  width: min(100%, 1380px) !important;
  max-width: 1380px !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__main,
html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__scroll,
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal--ops,
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust--dossier,
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req--pipeline {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-command {
  grid-template-columns: minmax(210px, .78fr) minmax(270px, 1fr) minmax(220px, auto) !important;
  grid-template-areas:
    "title focus search"
    "title focus cta" !important;
  align-items: center !important;
  column-gap: 18px !important;
  row-gap: 12px !important;
  min-height: 176px !important;
  overflow: visible !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__title-group {
  grid-area: title !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-command__focus {
  grid-area: focus !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__search {
  grid-area: search !important;
  justify-self: end !important;
  align-self: end !important;
  width: min(340px, 100%) !important;
  max-width: 100% !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-command > .mb-btn--primary {
  grid-area: cta !important;
  justify-self: end !important;
  align-self: start !important;
  min-height: 46px !important;
  position: relative !important;
  z-index: 4 !important;
  white-space: nowrap !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi-row {
  margin: 18px 0 0 !important;
  position: relative !important;
  z-index: 1 !important;
  clear: both !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi {
  min-height: 122px !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-action-lane {
  margin-top: 16px !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-action-lane__item {
  grid-template-columns: 50px minmax(0, 1fr) !important;
  min-height: 84px !important;
  align-items: center !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-action-lane__item > span:last-child {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  min-width: 0 !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-action-lane__item strong {
  font-size: 14.5px !important;
  line-height: 1.18 !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-action-lane__item em {
  margin-top: 0 !important;
  font-size: 12.25px !important;
  line-height: 1.35 !important;
  font-style: normal !important;
  font-weight: 640 !important;
  letter-spacing: 0 !important;
  color: var(--surface-text-3, var(--rl-text-3)) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard :is(.mb-mono, .mb-kpi__value, [data-mb-dash-kpi]),
html[data-design="v2"] body.app-v4 #page-kalender :is(.mb-mono, .mb-cal__kpi-value, [data-kpi-value]),
html[data-design="v2"] body.app-v4 #page-kunden :is(.mb-mono, .mb-cust__kpi-value, .mb-cust__metric-value, .mb-cust__detail-stat-value),
html[data-design="v2"] body.app-v4 #page-anfragen :is(.mb-mono, .mb-req__metric-value, .mb-req__status-tab-badge, .mb-req__detail-stat-value) {
  font-family: var(--rl-font) !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1, "ss01" 1 !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  line-height: 1.03 !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi__value,
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__kpi-value {
  font-weight: 850 !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard :is(.mb-kpi__label, .mb-kpi__delta),
html[data-design="v2"] body.app-v4 #page-kalender :is(.mb-cal__kpi-label, .mb-cal__kpi-sub),
html[data-design="v2"] body.app-v4 #page-kunden :is(.mb-cust__list-hd, .mb-cust__detail-sub, .mb-cust__tab),
html[data-design="v2"] body.app-v4 #page-anfragen :is(.mb-req__list-hd, .mb-req__item-meta, .mb-req__card) {
  font-family: var(--rl-font) !important;
  letter-spacing: 0 !important;
}

@media (max-width: 1100px) {
  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-command {
    grid-template-columns: minmax(0, 1fr) minmax(260px, auto) !important;
    grid-template-areas:
      "title search"
      "focus cta" !important;
  }
}

@media (max-width: 760px) {
  html[data-design="v2"] body.app-v4 #app > #page-dashboard.active,
  html[data-design="v2"] body.app-v4 #app > #page-kalender.active,
  html[data-design="v2"] body.app-v4 #app > #page-kunden.active,
  html[data-design="v2"] body.app-v4 #app > #page-anfragen.active {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
    padding-inline: 10px !important;
    overflow-x: hidden !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-command {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "title"
      "focus"
      "search"
      "cta" !important;
    min-height: auto !important;
    row-gap: 12px !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__search,
  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-command > .mb-btn--primary {
    justify-self: stretch !important;
    width: 100% !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi-row {
    grid-template-columns: 1fr 1fr !important;
    margin: 14px 0 0 !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-action-lane__item {
    grid-template-columns: 44px minmax(0, 1fr) !important;
  }
}

/* --------------------------------------------------------------------------
   Dashboard command-center stabilization: wider frame, balanced top section,
   stronger daily board, and dashboard-only app-footer treatment.
   -------------------------------------------------------------------------- */

html[data-design="v2"] body.app-v4 #app > #page-dashboard.active {
  padding-inline: clamp(20px, 3vw, 44px) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  align-self: stretch !important;
}

@media (min-width: 641px) {
  html[data-design="v2"] body.app-v4 #app > #page-dashboard.active {
    width: calc(100vw - var(--sidebar-w, 244px)) !important;
    flex: 0 0 auto !important;
  }
}

html[data-design="v2"] body.app-v4 #page-dashboard > .mb-dash--command-center {
  width: min(100%, 1480px) !important;
  max-width: 1480px !important;
  margin-inline: auto !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__main {
  gap: 18px !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__scroll {
  padding: 0 0 32px !important;
  overflow: visible !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-command {
  grid-template-columns: minmax(270px, .72fr) minmax(390px, 1fr) minmax(330px, .62fr) !important;
  grid-template-areas:
    "title focus search"
    "title focus cta" !important;
  min-height: 194px !important;
  padding: clamp(26px, 2.2vw, 38px) !important;
  column-gap: clamp(20px, 2.4vw, 36px) !important;
  row-gap: 14px !important;
  border-radius: 12px !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__title {
  font-size: clamp(42px, 3.8vw, 68px) !important;
  line-height: .94 !important;
  letter-spacing: 0 !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__subtitle {
  margin-top: 12px !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-command__focus {
  min-height: 108px !important;
  padding: 20px 24px !important;
  border-radius: 12px !important;
  align-self: stretch !important;
  justify-content: center !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-command__focus span:last-child {
  display: block !important;
  max-width: 42ch !important;
  color: rgba(255,255,255,.86) !important;
  font-size: 14px !important;
  font-weight: 660 !important;
  line-height: 1.5 !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__search {
  width: 100% !important;
  min-height: 50px !important;
  justify-self: stretch !important;
  align-self: end !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-command > .mb-btn--primary {
  width: 100% !important;
  min-height: 50px !important;
  justify-self: stretch !important;
  align-self: start !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 34px rgba(13, 101, 91, .24) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi-row {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin: 18px 0 0 !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi {
  min-height: 138px !important;
  padding: 22px !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi__label {
  font-size: 11px !important;
  font-weight: 820 !important;
  line-height: 1.2 !important;
  color: var(--rl-text-3) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi__value {
  margin: 10px 0 8px !important;
  font-size: clamp(30px, 2.45vw, 42px) !important;
  font-weight: 850 !important;
  color: var(--rl-text-1) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi__delta {
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  color: var(--rl-text-2) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-action-lane {
  gap: 16px !important;
  margin-top: 20px !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-action-lane__item {
  min-height: 96px !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  padding: 18px !important;
  border-radius: 12px !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-action-lane__item strong {
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 820 !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-action-lane__item em {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  font-weight: 620 !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__grid {
  grid-template-columns: minmax(680px, 1.18fr) minmax(420px, .82fr) !important;
  gap: 24px !important;
  margin-top: 22px !important;
  align-items: stretch !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-schedule {
  height: clamp(500px, 54dvh, 640px) !important;
  min-height: 472px !important;
  max-height: 640px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,248,243,.94)),
    repeating-linear-gradient(180deg, transparent 0 64px, rgba(16, 87, 80, .055) 65px 66px) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-schedule__hd {
  min-height: 72px !important;
  padding: 20px 24px !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-schedule__hd-title {
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 860 !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-schedule__hd-meta {
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  color: var(--rl-text-3) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-schedule__body {
  min-height: 0 !important;
  height: calc(100% - 72px) !important;
  padding: 24px !important;
  justify-content: flex-start !important;
  overflow-y: auto !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard [data-mb-dash-empty="schedule"] {
  width: 100% !important;
  max-width: none !important;
  min-height: 192px !important;
  margin: 0 !important;
  padding: 28px !important;
  border: 1px dashed rgba(16, 87, 80, .18) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(241,250,247,.84)),
    radial-gradient(circle at 18% 0%, rgba(70,190,171,.12), transparent 34%) !important;
  color: var(--rl-text-2) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard [data-mb-dash-empty="schedule"] svg {
  width: 34px !important;
  height: 34px !important;
  color: var(--rl-primary) !important;
  opacity: .78 !important;
}

/* Empty-State erbt color: --rl-text-2 oben — der Primär-Button braucht aber
   weiße Schrift, sonst verschwindet "Termin erstellen" optisch im grünen
   Verlauf. Höhere Specifity (ID + 4 classes) schlägt die Empty-State-Regel. */
html[data-design="v2"] body.app-v4 #page-dashboard [data-mb-dash-empty="schedule"] .mb-btn--primary,
html[data-design="v2"] body.app-v4 #page-dashboard [data-mb-dash-empty="requests"] .mb-btn--primary {
  color: #fff !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__rightcol {
  gap: 24px !important;
  min-width: 0 !important;
  height: clamp(500px, 54dvh, 640px) !important;
}

/* Route card holds a controlled, fixed-ish height so it stays a strong
   visual block but doesn't hog the right column. The requests card
   below takes whatever remains via flex: 1 1 auto. With the column
   capped at clamp(500–640px) and a 24px gap, this lands roughly at
   route ≈ 220–240px and requests ≈ 280–390px depending on viewport —
   the requests card is now visibly larger than the route. */
html[data-design="v2"] body.app-v4 #page-dashboard .mb-map-card {
  flex: 0 0 clamp(200px, 22dvh, 240px) !important;
  min-height: 0 !important;
  height: auto !important;
  border-radius: 12px !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  padding: 26px !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-map-card > div:last-child {
  text-align: left !important;
  color: rgba(255,255,255,.88) !important;
  font-size: 14px !important;
  font-weight: 760 !important;
  line-height: 1.35 !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-map-card [data-mb-dash-route-meta] {
  top: 18px !important;
  left: 18px !important;
  padding: 7px 12px !important;
  font-size: 11.5px !important;
  font-weight: 780 !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-map-card.mb-dash-route-card [data-mb-dash-route-meta] {
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(14,143,131,.26) !important;
  color: var(--color-primary) !important;
  box-shadow: 0 10px 24px rgba(6,40,30,.12) !important;
}

/* ── Neue Anfragen card structure ────────────────────────────────────────
   The right column is height-capped (clamp 500–640px) to stay visually
   matched with the Tagesplan. Inside it, the map card + this requests
   card share the space via flex: 1 1 0. With more than ~3 requests the
   inner <ul> would exceed the card's allotted height — and the inline
   overflow: hidden on .mb-requests clips them.

   Fix by mirroring the Tagesplan pattern: turn the card into its own
   flex column with a fixed header and a scrollable list body, plus
   min-height: 0 so flex children can shrink below their content size.
   The schedule does the exact same thing one column over. */
html[data-design="v2"] body.app-v4 #page-dashboard .mb-requests {
  min-height: 0 !important;
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(251,249,244,.96)) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-requests > header {
  flex: 0 0 auto !important;
  padding: 18px 20px !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-requests header div[style*="font-weight"] {
  font-size: 15px !important;
  font-weight: 820 !important;
  color: var(--rl-text-1) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-requests > ul,
html[data-design="v2"] body.app-v4 #page-dashboard [data-mb-dash-requests] {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard [data-mb-dash-empty="requests"] {
  padding: 30px 22px !important;
  font-size: 12.8px !important;
  line-height: 1.55 !important;
  color: var(--rl-text-3) !important;
}

html[data-design="v2"] body.app-v4:has(#page-dashboard.active) #app-footer {
  position: static !important;
  width: min(100%, 1480px) !important;
  margin: 10px auto 0 !important;
  padding: 10px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: .58 !important;
}

html[data-design="v2"] body.app-v4:has(#page-dashboard.active) #app-footer .bk-footer-inner {
  min-height: 28px !important;
  padding-inline: 0 !important;
}

@media (min-width: 1600px) {
  html[data-design="v2"] body.app-v4 #page-dashboard > .mb-dash--command-center,
  html[data-design="v2"] body.app-v4:has(#page-dashboard.active) #app-footer {
    width: min(100%, 1560px) !important;
    max-width: 1560px !important;
  }
}

@media (max-width: 1280px) {
  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-command {
    grid-template-columns: minmax(230px, .75fr) minmax(310px, 1fr) minmax(270px, .7fr) !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr) !important;
  }
}

@media (max-width: 1500px) and (min-width: 1101px) {
  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-command {
    grid-template-columns: minmax(220px, .75fr) minmax(300px, 1fr) minmax(280px, .72fr) !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr) !important;
  }
}

@media (max-width: 1100px) {
  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-command {
    grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr) !important;
    grid-template-areas:
      "title search"
      "focus cta" !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__grid {
    grid-template-columns: 1fr !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__rightcol {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    height: auto !important;
  }
}

@media (max-width: 760px) {
  html[data-design="v2"] body.app-v4 #app > #page-dashboard.active {
    padding-inline: 10px !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-command {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "title"
      "focus"
      "search"
      "cta" !important;
    padding: 22px 18px !important;
    border-radius: 12px !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__title {
    font-size: clamp(38px, 13vw, 52px) !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-command__focus {
    min-height: 0 !important;
    padding: 16px !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 14px !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi {
    min-height: 112px !important;
    padding: 15px !important;
    border-radius: 10px !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-action-lane {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 14px !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-action-lane__item {
    min-height: 76px !important;
    padding: 13px !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-schedule {
    min-height: 0 !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-schedule__body {
    min-height: 0 !important;
    padding: 16px !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard [data-mb-dash-empty="schedule"] {
    min-height: 0 !important;
    padding: 22px 16px !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__rightcol {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-map-card,
  html[data-design="v2"] body.app-v4 #page-dashboard .mb-requests {
    min-height: 200px !important;
    border-radius: 10px !important;
  }
}

/* --------------------------------------------------------------------------
   Overview hero — premium petrol/teal anchor.
   The Heute hero adopts the same deep petrol/teal gradient family as the
   Tages-Route card so they read as one design system. Hero is the primary
   visual anchor: large light typography on the dark gradient, the Command
   Center card sits inside as a glass secondary module, the search becomes
   a premium glass pill, and the Neue-Buchung CTA flips to a clean WHITE
   button so it pops against the colored hero without competing for the
   "primary action" color.
   -------------------------------------------------------------------------- */

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__topbar {
  position: relative !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(56, 200, 181, .55), transparent 56%),
    radial-gradient(circle at 0% 100%, rgba(8, 70, 64, .65), transparent 60%),
    linear-gradient(135deg, #063f39 0%, #0a6a61 42%, #0e8f83 78%, #2bb8a6 100%) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  box-shadow:
    0 6px 14px -8px rgba(6, 60, 54, .28),
    0 18px 32px -16px rgba(6, 60, 54, .32),
    0 1px 0 rgba(255, 255, 255, .14) inset !important;
  overflow: hidden !important;
}

/* Subtle diagonal grid noise overlay — matches the texture vocabulary of
   the Tages-Route card so the two surfaces feel related. */
html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__topbar::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .055) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 28px) !important;
  opacity: .6 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Soft top-left highlight bloom — gives premium depth without noise. */
html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__topbar::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(ellipse at 12% -10%, rgba(255, 255, 255, .14), transparent 48%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Lift hero contents above the texture overlays. */
html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__topbar > * {
  position: relative !important;
  z-index: 1 !important;
}

/* Light text family on the dark gradient. */
html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__topbar,
html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__topbar * {
  color: rgba(255, 255, 255, .9) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__title {
  color: #ffffff !important;
  font-weight: 880 !important;
  letter-spacing: -.014em !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .12) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__subtitle {
  color: rgba(255, 255, 255, .82) !important;
  font-weight: 620 !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-command__eyebrow {
  color: rgba(255, 255, 255, .96) !important;
  font-weight: 820 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

/* Command Center focus card — glass module on the hero gradient. Lighter
   than the hero surface but clearly part of it. */
html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-command__focus {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .06) 100%) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  box-shadow:
    0 10px 28px -16px rgba(0, 0, 0, .22),
    0 1px 0 rgba(255, 255, 255, .14) inset !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-command__focus span:last-child {
  color: rgba(255, 255, 255, .9) !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

/* Search pill — single clean translucent capsule that stays in the petrol
   hero color language. Idle, hover and focus all share the same surface
   family; focus only adds a thin teal-tinted accent ring. No opaque-white
   jump, no nested-pill effect from inset highlights. */
html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__search {
  background: rgba(255, 255, 255, .14) !important;
  border: 1px solid rgba(255, 255, 255, .26) !important;
  box-shadow: 0 6px 14px -10px rgba(0, 0, 0, .28) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  cursor: text !important;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__search:hover {
  background: rgba(255, 255, 255, .2) !important;
  border-color: rgba(255, 255, 255, .42) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__search:focus-within {
  background: rgba(255, 255, 255, .22) !important;
  border-color: rgba(255, 255, 255, .55) !important;
  box-shadow:
    0 0 0 2px rgba(56, 200, 181, .35),
    0 8px 18px -12px rgba(0, 0, 0, .3) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__search > svg {
  color: rgba(255, 255, 255, .85) !important;
  opacity: 1 !important;
  flex-shrink: 0 !important;
}

/* ── Search-input shared reset (root cause: 38-skin.css + 58-app-v4.css)
   38-skin.css:313-348 paints every `input[type=search]` with its own
   background, 1px border, 10px radius, 36px min-height, and on focus
   adds a 3px blue halo + opaque s1 background. 58-app-v4.css:270 adds
   a second 4px petrol halo on every focused input under app-v4. Both
   layers fire INSIDE our search-pill wrappers (.mb-dash__search /
   .mb-cust__search / .mb-cal__search / .mb-req__search), creating the
   "input-in-input" double-frame look — most visible on focus, but the
   inner border/background/halo also leak at idle on some browsers.

   Neutralize the inner element across all four wrappers, idle + focus,
   so only the outer pill remains. Specificity carries an ID so it
   beats 58-app-v4's (0,0,4,3) without needing extra weight. */
html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__search input,
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__search input,
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__search input,
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__search input,
html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__search input:focus,
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__search input:focus,
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__search input:focus,
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__search input:focus {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  box-shadow: none !important;
  outline: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

/* Hero-search-specific typography (kept after the shared reset so the
   white text + weight win against the global v1/v2 input color rules). */
html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__search input {
  color: #ffffff !important;
  font-weight: 580 !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__search input::placeholder {
  color: rgba(255, 255, 255, .68) !important;
  font-weight: 540 !important;
  opacity: 1 !important;
}

/* Hide the native `type=search` clear "X" and decoration so they don't
   add a second visual layer inside the pill. Applied to all four
   search wrappers for consistency. */
html[data-design="v2"] body.app-v4 .mb-dash__search input::-webkit-search-cancel-button,
html[data-design="v2"] body.app-v4 .mb-dash__search input::-webkit-search-decoration,
html[data-design="v2"] body.app-v4 .mb-dash__search input::-webkit-search-results-button,
html[data-design="v2"] body.app-v4 .mb-dash__search input::-webkit-search-results-decoration,
html[data-design="v2"] body.app-v4 .mb-cust__search input::-webkit-search-cancel-button,
html[data-design="v2"] body.app-v4 .mb-cust__search input::-webkit-search-decoration,
html[data-design="v2"] body.app-v4 .mb-cal__search input::-webkit-search-cancel-button,
html[data-design="v2"] body.app-v4 .mb-cal__search input::-webkit-search-decoration,
html[data-design="v2"] body.app-v4 .mb-req__search input::-webkit-search-cancel-button,
html[data-design="v2"] body.app-v4 .mb-req__search input::-webkit-search-decoration {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: none !important;
}

/* ── Overview live search dropdown ───────────────────────────────────────
   Anchored to <body> via position:fixed (escapes the hero's overflow:
   hidden). Warm-ivory surface, petrol-tinted border, soft tight shadow
   matching the new shadow-system. Visible only when the search module
   sets data-open="true". */
html[data-design="v2"] body.app-v4 .mb-dash-search-pop {
  position: fixed !important;
  z-index: 9999 !important;
  display: none !important;
  min-width: 280px !important;
  max-width: 480px !important;
  max-height: 360px !important;
  overflow-y: auto !important;
  padding: 6px !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbf9f3 100%) !important;
  border: 1px solid rgba(14, 143, 131, .18) !important;
  box-shadow:
    0 4px 8px -4px rgba(28, 42, 36, .07),
    0 14px 28px -10px rgba(28, 42, 36, .14) !important;
  font-family: var(--rl-font) !important;
  color: var(--rl-text) !important;
}

html[data-design="v2"] body.app-v4 .mb-dash-search-pop[data-open="true"] {
  display: block !important;
}

html[data-design="v2"] body.app-v4 .mb-dash-search-pop__hint {
  padding: 12px 14px !important;
  font-size: 12.5px !important;
  color: var(--rl-text-3) !important;
  font-weight: 540 !important;
}

html[data-design="v2"] body.app-v4 .mb-dash-search-pop__hit {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  width: 100% !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background .14s ease !important;
}

html[data-design="v2"] body.app-v4 .mb-dash-search-pop__hit:hover,
html[data-design="v2"] body.app-v4 .mb-dash-search-pop__hit[data-active="true"] {
  background: rgba(14, 143, 131, .08) !important;
}

html[data-design="v2"] body.app-v4 .mb-dash-search-pop__name {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--rl-text) !important;
  letter-spacing: -.005em !important;
}

html[data-design="v2"] body.app-v4 .mb-dash-search-pop__meta {
  font-size: 12px !important;
  font-weight: 520 !important;
  color: var(--rl-text-3) !important;
}

html[data-design="v2"] body.app-v4 .mb-dash-search-pop mark {
  background: rgba(14, 143, 131, .18) !important;
  color: inherit !important;
  padding: 0 2px !important;
  border-radius: 3px !important;
}

/* Primary CTA — clean white pill, dark deep-petrol text. The bright
   action element on the dark hero. */
html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__topbar .mb-btn--primary,
html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-command > .mb-btn--primary {
  background: #ffffff !important;
  color: var(--rl-petrol-deep) !important;
  border: 1px solid rgba(255, 255, 255, .9) !important;
  box-shadow:
    0 14px 30px -14px rgba(0, 0, 0, .28),
    0 1px 0 rgba(255, 255, 255, 1) inset !important;
  font-weight: 760 !important;
  letter-spacing: .005em !important;
  transition: transform .14s ease, box-shadow .18s ease, background .18s ease, color .18s ease !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__topbar .mb-btn--primary > svg,
html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-command > .mb-btn--primary > svg {
  color: var(--rl-petrol-deep) !important;
  transition: color .18s ease !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__topbar .mb-btn--primary:hover,
html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-command > .mb-btn--primary:hover {
  background: #f6fbf9 !important;
  color: #054b44 !important;
  box-shadow:
    0 20px 38px -16px rgba(0, 0, 0, .34),
    0 1px 0 rgba(255, 255, 255, 1) inset !important;
  transform: translateY(-1px) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__topbar .mb-btn--primary:hover > svg,
html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-command > .mb-btn--primary:hover > svg {
  color: #054b44 !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__topbar .mb-btn--primary:active,
html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-command > .mb-btn--primary:active {
  transform: translateY(0) !important;
  box-shadow:
    0 8px 20px -14px rgba(0, 0, 0, .28),
    0 1px 0 rgba(255, 255, 255, 1) inset !important;
}

/* Force the hero's monospace KPI digits inside the topbar to stay light
   too (some KPIs render inside the topbar on certain breakpoints). */
html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__topbar :is(.mb-mono, [data-mb-dash-kpi]) {
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Overview composition — secondary surfaces stay calm warm-ivory so the
   dark hero clearly reads as the primary anchor. KPIs, Tagesfokus,
   Schedule, Requests get matching petrol-tinted borders + soft lift.
   -------------------------------------------------------------------------- */

html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi {
  background:
    linear-gradient(180deg, #ffffff 0%, #fbf9f3 100%) !important;
  border: 1px solid rgba(14, 143, 131, .14) !important;
  box-shadow: 0 16px 32px -22px rgba(13, 75, 68, .22) !important;
  transition: transform .15s ease, box-shadow .18s ease, border-color .18s ease !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi:hover {
  border-color: rgba(14, 143, 131, .3) !important;
  box-shadow: 0 22px 40px -22px rgba(13, 75, 68, .3) !important;
  transform: translateY(-1px) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi__label {
  color: var(--rl-petrol-deep) !important;
  letter-spacing: .115em !important;
  text-transform: uppercase !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-kpi__value {
  color: var(--rl-text) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-action-lane__item {
  background:
    linear-gradient(180deg, #ffffff 0%, #faf7ef 100%) !important;
  border: 1px solid rgba(14, 143, 131, .14) !important;
  box-shadow: 0 14px 30px -22px rgba(13, 75, 68, .2) !important;
  cursor: pointer !important;
  transition: transform .15s ease, box-shadow .18s ease, border-color .18s ease !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-action-lane__item:hover {
  border-color: rgba(14, 143, 131, .36) !important;
  box-shadow: 0 22px 38px -22px rgba(13, 75, 68, .28) !important;
  transform: translateY(-1px) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-action-lane__icon {
  background: linear-gradient(135deg, rgba(14, 143, 131, .14), rgba(56, 200, 181, .08)) !important;
  color: var(--rl-petrol-deep) !important;
  border: 1px solid rgba(14, 143, 131, .22) !important;
  font-weight: 820 !important;
  letter-spacing: .04em !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-action-lane__item strong {
  color: var(--rl-text) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash-action-lane__item em {
  color: var(--rl-text-3) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-schedule,
html[data-design="v2"] body.app-v4 #page-dashboard .mb-requests {
  border: 1px solid rgba(14, 143, 131, .14) !important;
  box-shadow: 0 20px 40px -28px rgba(13, 75, 68, .24) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-schedule__hd-title {
  color: var(--rl-text) !important;
}

html[data-design="v2"] body.app-v4 #page-dashboard .mb-requests header div[style*="font-weight"] {
  color: var(--rl-text) !important;
}

@media (max-width: 760px) {
  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__topbar {
    box-shadow:
      0 4px 10px -4px rgba(6, 60, 54, .22),
      0 14px 26px -14px rgba(6, 60, 54, .3),
      0 1px 0 rgba(255, 255, 255, .14) inset !important;
  }

  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__title {
    letter-spacing: -.018em !important;
  }
}

/* ==========================================================================
   APP-WIDE DESIGN SYSTEM ROLLOUT — Dashboard standard → other main surfaces

   The Overview's secondary cards use a specific surface system: a warm
   ivory linear gradient (#ffffff → #fbf9f3) with an explicit petrol-tinted
   border (rgba(14,143,131,.14)) and the tightened layered shadow tokens.
   Across Kunden / Anfragen / Kalender, the equivalent surfaces (lists,
   details, sidebars, rails) used to flatten to var(--surface-panel) — pure
   white, slightly cooler border — which made these pages read as a "newer
   white" while Overview read as warm-ivory premium. This block re-applies
   the Overview surface treatment so the whole app reads as one product.

   Behavior: surface-only. No markup change, no IDs, no event handlers
   touched. Inner header/list/grid styles per page are unaffected because
   they specify their own backgrounds.
   ========================================================================== */

html[data-design="v2"] body.app-v4 #page-kunden :is(
  .mb-cust__list,
  .mb-cust__detail,
  .mb-cust-context,
  .mb-cust-context__card,
  .mb-cust-context__metric
),
html[data-design="v2"] body.app-v4 #page-anfragen :is(
  .mb-req__list,
  .mb-req__detail,
  .mb-req-decision-rail,
  .mb-req-decision-rail__card
),
html[data-design="v2"] body.app-v4 #page-kalender :is(
  .mb-cal__view,
  .mb-cal__sidebar,
  .mb-minical,
  .mb-cal__legend,
  .mb-cal__homebase,
  .mb-cal__insight
) {
  background: linear-gradient(180deg, #ffffff 0%, #fbf9f3 100%) !important;
  border: 1px solid rgba(14, 143, 131, .14) !important;
}

/* Hover-lift parity with the Overview KPIs / action lane — small enough to
   stay calm but enough to make the surfaces feel alive across every page. */
html[data-design="v2"] body.app-v4 #page-kunden :is(.mb-cust-context__card, .mb-cust-context__metric):hover,
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail__card:hover,
html[data-design="v2"] body.app-v4 #page-kalender :is(.mb-minical, .mb-cal__legend, .mb-cal__homebase, .mb-cal__insight):hover {
  border-color: rgba(14, 143, 131, .26) !important;
  transform: translateY(-1px) !important;
  transition: transform .15s ease, border-color .18s ease, box-shadow .18s ease !important;
}

/* ==========================================================================
   KUNDEN — refinement to Dashboard-quality

   Goals (from review):
   1. The customer list must be a true scrollable CRM viewport — every
      customer reachable, no off-page clipping. Root cause was the
      workspace items aligning at start with no height bound, so the
      list grew with content past the viewport while the existing
      .mb-cust__list-body { overflow-y: auto } had no parent height to
      cap against. Fix by making .mb-cust--dossier a fixed-height flex
      column (= viewport minus topnav) and the workspace flex: 1 fill
      the remaining space with align-items: stretch, so list / detail /
      context all share the same bounded height and their existing
      inner-scroll architectures activate.

   2. Rebalance the 3-column proportions: trim the left list slightly,
      widen the right context, give the center dossier comparable
      weight. Keep flexible at desktop, collapse cleanly at <1180px.

   3. More breathing room inside the dossier (KPIs, tabs, panels) and
      stronger presence for the right context cards — sized so the
      panel reads as an intentional third surface, not a leftover.

   4. Customer rows: slightly more rhythm + a more deliberate selected
      state with a petrol gradient wash and a 4px brand-color bar.
   ========================================================================== */

/* — Bounded viewport layout — */
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust--dossier {
  height: calc(100dvh - 92px) !important;
  min-height: 540px !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__toolbar.mb-cust-command {
  flex: 0 0 auto !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-workspace {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  align-items: stretch !important;
  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr) minmax(280px, 340px) !important;
  gap: 18px !important;
}

/* All three workspace columns share the bounded workspace height. */
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__list,
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail,
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context {
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

/* — Customer list: fixed header + scrollable body — */
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__list {
  display: flex !important;
  flex-direction: column !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__list > .mb-cust__list-hd {
  flex: 0 0 auto !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__list-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__list-body::-webkit-scrollbar {
  width: 8px !important;
}
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__list-body::-webkit-scrollbar-thumb {
  background: rgba(14, 143, 131, .18) !important;
  border-radius: 4px !important;
}
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__list-body::-webkit-scrollbar-thumb:hover {
  background: rgba(14, 143, 131, .32) !important;
}

/* — Customer rows: cleaner rhythm + premium selected state — */
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__row {
  padding: 18px 22px !important;
  gap: 16px !important;
  border-bottom: 1px solid rgba(14, 143, 131, .08) !important;
  transition: background .14s ease, box-shadow .14s ease !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__row:hover {
  background: rgba(14, 143, 131, .05) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__row[data-selected="true"] {
  background: linear-gradient(90deg, rgba(14, 143, 131, .10) 0%, rgba(14, 143, 131, .04) 60%, transparent 100%) !important;
  box-shadow: inset 4px 0 0 var(--rl-petrol) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__row-name {
  font-size: 14.5px !important;
  font-weight: 720 !important;
  color: var(--rl-text) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__row-sub {
  font-size: 12.5px !important;
  color: var(--rl-text-3) !important;
  font-weight: 540 !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__row-meta-value {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--rl-text) !important;
}

/* — Dossier: scrollable detail body, more breathing room — */
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail {
  display: flex !important;
  flex-direction: column !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail-hd {
  flex: 0 0 auto !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__kpis {
  flex: 0 0 auto !important;
  padding: 22px !important;
  gap: 12px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__kpi {
  padding: 18px 20px !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbf9f3 100%) !important;
  border: 1px solid rgba(14, 143, 131, .14) !important;
  border-radius: 10px !important;
  gap: 6px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__kpi-label {
  color: var(--rl-petrol-deep) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  font-weight: 820 !important;
  font-size: 10.5px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__kpi-value {
  font-size: 22px !important;
  font-weight: 850 !important;
  letter-spacing: -.01em !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__tabs {
  flex: 0 0 auto !important;
  position: sticky !important;
  top: 0 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98) 60%, rgba(255, 255, 255, 0) 100%) !important;
  z-index: 1 !important;
  padding: 14px 22px 0 !important;
  gap: 10px !important;
  border-bottom: 1px solid rgba(14, 143, 131, .12) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__tab {
  min-height: 46px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  font-weight: 720 !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__panel {
  padding: 22px !important;
}

/* — Context panel: more presence, intentional supporting rail — */
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 18px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context__card,
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context__metric {
  padding: 18px 20px !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbf9f3 100%) !important;
  border: 1px solid rgba(14, 143, 131, .14) !important;
  box-shadow: 0 4px 8px -4px rgba(28, 42, 36, .06), 0 12px 22px -10px rgba(28, 42, 36, .08) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context__card span,
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context__metric span {
  display: block !important;
  margin-bottom: 6px !important;
  font-size: 10.5px !important;
  font-weight: 820 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--rl-petrol-deep) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context__card strong,
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context__metric strong {
  display: block !important;
  font-size: 15px !important;
  font-weight: 760 !important;
  line-height: 1.3 !important;
  color: var(--rl-text) !important;
  letter-spacing: -.005em !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context__card p {
  margin: 8px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--rl-text-2) !important;
  font-weight: 540 !important;
}

/* — Toolbar polish: tighter, cleaner discipline — */
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__toolbar.mb-cust-command {
  gap: 14px !important;
  row-gap: 14px !important;
  padding: 22px 26px !important;
  min-height: auto !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__toolbar .mb-btn--sm {
  min-height: 44px !important;
  padding: 0 18px !important;
}

/* — Mobile / narrow: collapse to single column with auto heights — */
@media (max-width: 1180px) {
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust--dossier {
    height: auto !important;
    min-height: calc(100dvh - 92px) !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-workspace {
    flex: 0 0 auto !important;
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr) !important;
    align-items: start !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__list,
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail,
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__list-body {
    max-height: 70vh !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 760px) {
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-workspace {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   KUNDEN - desktop CRM scale correction

   This is intentionally a late, Kunden-only correction. The earlier relaunch
   pass already fixed the surface language and scroll model; the remaining
   root cause was the shared 1180px wrapper cap, which squeezed a three-column
   CRM into a compact dashboard module.
   ========================================================================== */

html[data-design="v2"] body.app-v4 #app > #page-kunden.active {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  align-self: stretch !important;
  padding-inline: clamp(16px, 2vw, 30px) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden > [data-design-version="v2"] {
  width: 100% !important;
  max-width: 1680px !important;
  margin-inline: auto !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust--dossier {
  height: calc(100vh - 76px) !important;
  height: calc(100dvh - 76px) !important;
  min-height: calc(100vh - 76px) !important;
  min-height: calc(100dvh - 76px) !important;
  gap: 20px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-workspace {
  grid-template-columns:
    minmax(340px, 420px)
    minmax(620px, 1.5fr)
    minmax(320px, 400px) !important;
  gap: 22px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__list,
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail,
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context {
  border-radius: 12px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__list-hd {
  min-height: 58px !important;
  padding: 16px 18px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__row {
  grid-template-columns: 48px minmax(0, 1fr) auto !important;
  padding: 14px 18px !important;
  gap: 14px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__row-sub {
  margin-top: 3px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail {
  overflow: hidden !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail-hd {
  padding: 30px !important;
  grid-template-columns: 92px minmax(0, 1fr) auto !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail-avatar {
  width: 92px !important;
  height: 92px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail-name {
  font-size: clamp(24px, 2vw, 34px) !important;
  line-height: 1.04 !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  padding: 24px !important;
  gap: 14px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__kpi {
  min-height: 112px !important;
  padding: 20px 22px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__kpi-value {
  font-size: clamp(22px, 1.7vw, 30px) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__tabs {
  padding: 14px 24px 0 !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 0 !important;
  overscroll-behavior: contain !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__panel {
  padding: 28px 30px 32px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__section {
  margin-bottom: 28px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__info-grid {
  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) !important;
  gap: 10px 18px !important;
  font-size: 13.5px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context {
  padding: 20px !important;
  gap: 16px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context__card,
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context__metric {
  padding: 22px !important;
  border-radius: 12px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context__card {
  min-height: 172px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context__metric {
  min-height: 124px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context__card strong,
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context__metric strong {
  font-size: 16px !important;
}

@media (max-width: 1500px) {
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-workspace {
    grid-template-columns:
      minmax(300px, 380px)
      minmax(0, 1fr) !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    overflow: visible !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context__card,
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context__metric {
    min-height: 136px !important;
  }
}

@media (max-width: 1180px) {
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust--dossier {
    height: auto !important;
    min-height: calc(100dvh - 92px) !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-workspace {
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr) !important;
    align-items: start !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__list,
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail,
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context {
    height: auto !important;
    max-height: none !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__list {
    overflow: hidden !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail,
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context {
    overflow: visible !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__list-body {
    max-height: 68vh !important;
  }
}

@media (max-width: 900px) {
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-workspace,
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context {
    grid-template-columns: 1fr !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail-hd {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    padding: 24px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail-actions {
    grid-column: 1 / -1 !important;
    justify-content: flex-start !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail-avatar {
    width: 72px !important;
    height: 72px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__row {
    grid-template-columns: 44px minmax(0, 1fr) !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__row-meta {
    grid-column: 2 !important;
    align-items: flex-start !important;
    flex-direction: row !important;
    gap: 8px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__avatar {
    width: 44px !important;
    height: 44px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__kpis {
    grid-template-columns: 1fr !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__panel {
    padding: 22px 18px 26px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__info-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   KUNDEN - dossier polish pass

   Keeps the desktop CRM scale correction intact and refines the inner
   information density: KPI type, content modules, notes, timeline, tabs,
   right rail, and polished empty states.
   ========================================================================== */

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail-hd {
  padding: 26px 28px !important;
  grid-template-columns: 84px minmax(0, 1fr) auto !important;
  gap: 18px !important;
  align-items: center !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail-avatar {
  width: 84px !important;
  height: 84px !important;
  border-radius: 12px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail-name {
  font-size: clamp(24px, 1.75vw, 30px) !important;
  line-height: 1.06 !important;
  margin-bottom: 6px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail-actions {
  gap: 8px !important;
  align-items: center !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail-actions .mb-btn {
  min-height: 42px !important;
  padding-inline: 16px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__kpis {
  padding: 20px 22px !important;
  gap: 12px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__kpi {
  min-height: 94px !important;
  padding: 17px 18px !important;
  border-radius: 10px !important;
  justify-content: center !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.76) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__kpi-label {
  font-size: 10px !important;
  line-height: 1.15 !important;
  letter-spacing: .09em !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__kpi-value {
  margin-top: 5px !important;
  font-size: clamp(18px, 1.08vw, 22px) !important;
  line-height: 1.08 !important;
  font-weight: 820 !important;
  overflow-wrap: anywhere !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__kpi:nth-child(3) .mb-cust__kpi-value,
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__kpi:nth-child(4) .mb-cust__kpi-value {
  font-size: clamp(17px, .98vw, 20px) !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__kpi-sub {
  margin-top: 3px !important;
  font-size: 11.5px !important;
  line-height: 1.25 !important;
  color: var(--rl-text-3) !important;
  font-weight: 620 !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__tabs {
  padding: 10px 22px 0 !important;
  gap: 6px !important;
  background: rgba(255,255,255,.92) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__tab {
  min-height: 42px !important;
  padding: 0 14px !important;
  border-radius: 12px 12px 0 0 !important;
  color: var(--rl-text-3) !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__tab[data-active="true"] {
  color: var(--rl-petrol-deep) !important;
  background: rgba(14,143,131,.055) !important;
  border-bottom-color: var(--rl-petrol) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__tab-count {
  background: rgba(14,143,131,.10) !important;
  color: var(--rl-petrol-deep) !important;
  font-weight: 760 !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__panel {
  padding: 24px 28px 30px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__section {
  margin-bottom: 18px !important;
  padding: 18px 20px !important;
  border: 1px solid rgba(14,143,131,.12) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(251,249,243,.94)) !important;
  box-shadow: 0 4px 8px -5px rgba(28,42,36,.06), 0 10px 20px -14px rgba(28,42,36,.10) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__section:last-child {
  margin-bottom: 0 !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__section-title {
  margin-bottom: 12px !important;
  color: var(--rl-petrol-deep) !important;
  font-size: 10.5px !important;
  line-height: 1.15 !important;
  letter-spacing: .09em !important;
  font-weight: 820 !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__section-action {
  color: var(--rl-petrol-deep) !important;
  font-weight: 760 !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__info-grid {
  gap: 8px 18px !important;
  font-size: 13px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__info-grid dt {
  color: var(--rl-text-3) !important;
  font-weight: 640 !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__info-grid dd {
  color: var(--rl-text) !important;
  font-weight: 640 !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__note {
  position: relative !important;
  margin: 0 0 10px !important;
  padding: 15px 17px 15px 20px !important;
  border: 1px solid rgba(14,143,131,.14) !important;
  border-left: 0 !important;
  border-radius: 10px !important;
  background:
    linear-gradient(90deg, rgba(14,143,131,.08), transparent 34%),
    rgba(255,255,255,.88) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.74) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__note::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 12px !important;
  bottom: 12px !important;
  width: 4px !important;
  border-radius: 0 6px 6px 0 !important;
  background: var(--rl-gradient) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__note-meta {
  margin-bottom: 7px !important;
  color: var(--rl-text-3) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__note-text {
  color: var(--rl-text) !important;
  font-size: 13px !important;
  line-height: 1.48 !important;
  font-weight: 560 !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__timeline {
  padding-left: 16px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__timeline::before {
  left: 5px !important;
  background: rgba(14,143,131,.16) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__timeline-item {
  padding: 4px 0 12px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__timeline-item:last-child {
  padding-bottom: 2px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__timeline-item::before {
  left: -15px !important;
  top: 9px !important;
  width: 8px !important;
  height: 8px !important;
  border-color: var(--rl-petrol) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__timeline-date {
  font-size: 11.5px !important;
  color: var(--rl-text-3) !important;
  font-weight: 700 !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__timeline-title {
  margin-top: 3px !important;
  color: var(--rl-text) !important;
  font-size: 13.5px !important;
  font-weight: 760 !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__timeline-sub {
  color: var(--rl-text-2) !important;
  font-size: 12.5px !important;
  line-height: 1.36 !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__empty-module {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  max-width: 520px !important;
  padding: 16px 18px !important;
  border: 1px dashed rgba(14,143,131,.24) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(135deg, rgba(14,143,131,.07), transparent 58%),
    rgba(255,255,255,.82) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__empty-module strong {
  color: var(--rl-text) !important;
  font-size: 14px !important;
  font-weight: 780 !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__empty-module span {
  color: var(--rl-text-2) !important;
  font-size: 12.75px !important;
  line-height: 1.46 !important;
  font-weight: 560 !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context {
  padding: 18px !important;
  gap: 14px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context__card,
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context__metric {
  min-height: 0 !important;
  padding: 18px 20px !important;
  border-radius: 10px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context__card {
  min-height: 144px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context__metric {
  min-height: 96px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context__card span,
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context__metric span {
  margin-bottom: 7px !important;
  font-size: 10px !important;
  letter-spacing: .09em !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context__card strong,
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context__metric strong {
  font-size: 15px !important;
  line-height: 1.28 !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context__card p {
  margin-top: 8px !important;
  font-size: 12.75px !important;
  line-height: 1.44 !important;
}

@media (max-width: 1500px) {
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 18px 20px !important;
    gap: 12px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__kpi {
    min-height: 88px !important;
    padding: 15px 17px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__kpi-value {
    font-size: clamp(18px, 1.32vw, 20px) !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__kpi:nth-child(3) .mb-cust__kpi-value,
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__kpi:nth-child(4) .mb-cust__kpi-value {
    font-size: clamp(17px, 1.2vw, 19px) !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context__card,
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-context__metric {
    min-height: 112px !important;
  }
}

@media (max-width: 900px) {
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail-hd {
    grid-template-columns: 68px minmax(0, 1fr) !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__detail-avatar {
    width: 68px !important;
    height: 68px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__kpi {
    min-height: 88px !important;
  }
}

@media (max-width: 640px) {
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__kpis {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__panel {
    padding: 18px 16px 24px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__section {
    padding: 16px !important;
    border-radius: 10px !important;
  }
}

/* ==========================================================================
   App page hero pattern

   Reusable command-banner language derived from the Dashboard top zone.
   Pages opt in by adding .mb-page-hero to their existing page header, so the
   pattern can roll out without changing unrelated app surfaces.
   ========================================================================== */

html[data-design="v2"] body.app-v4 .mb-page-hero {
  display: grid !important;
  grid-template-columns: minmax(270px, .72fr) minmax(360px, 1fr) minmax(330px, .66fr) !important;
  grid-template-areas: "intro focus controls" !important;
  align-items: stretch !important;
  column-gap: clamp(20px, 2.2vw, 34px) !important;
  row-gap: 18px !important;
  min-height: 194px !important;
  padding: clamp(26px, 2.2vw, 38px) !important;
  border: 0 !important;
  border-radius: 12px !important;
  background:
    linear-gradient(135deg, rgba(6,63,57,.97), rgba(14,143,131,.92) 50%, rgba(56,200,181,.82)),
    linear-gradient(90deg, rgba(255,255,255,.10), transparent 55%) !important;
  color: var(--rl-hero-text) !important;
  box-shadow: 0 6px 14px -8px rgba(7,79,70,.18), 0 18px 32px -16px rgba(7,79,70,.24), inset 0 1px 0 rgba(255,255,255,.22) !important;
  overflow: hidden !important;
  position: relative !important;
}

html[data-design="v2"] body.app-v4 .mb-page-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, transparent 1px 72px),
    linear-gradient(0deg, rgba(255,255,255,.10) 0 1px, transparent 1px 72px) !important;
  opacity: .24 !important;
  pointer-events: none !important;
}

html[data-design="v2"] body.app-v4 .mb-page-hero > * {
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
}

html[data-design="v2"] body.app-v4 .mb-page-hero__intro {
  grid-area: intro !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

html[data-design="v2"] body.app-v4 .mb-page-hero__intro strong {
  color: var(--rl-hero-text) !important;
  font-size: clamp(42px, 3.6vw, 66px) !important;
  line-height: .94 !important;
  font-weight: 880 !important;
  letter-spacing: 0 !important;
}

html[data-design="v2"] body.app-v4 .mb-page-hero__copy {
  max-width: 34ch !important;
  margin: 4px 0 0 !important;
  color: rgba(255,255,255,.82) !important;
  font-size: 14px !important;
  line-height: 1.48 !important;
  font-weight: 650 !important;
}

html[data-design="v2"] body.app-v4 .mb-page-hero__focus {
  grid-area: focus !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 14px !important;
  min-height: 108px !important;
  padding: 20px 24px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16) !important;
  backdrop-filter: blur(14px) !important;
}

html[data-design="v2"] body.app-v4 .mb-page-hero__focus-label {
  color: rgba(255,255,255,.70) !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

html[data-design="v2"] body.app-v4 .mb-page-hero__controls {
  grid-area: controls !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 12px !important;
}

html[data-design="v2"] body.app-v4 .mb-page-hero__actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) !important;
  gap: 10px !important;
}

/* Kunden hero application: keep CRM controls functional, but make the header a
   true Dashboard-sibling command banner. */
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__toolbar.mb-page-hero {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust-command__eyebrow {
  color: rgba(255,255,255,.72) !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-page-hero .mb-cust__filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-page-hero .mb-cust__filter-chip {
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.13) !important;
  color: rgba(255,255,255,.84) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-page-hero .mb-cust__filter-chip:hover {
  background: rgba(255,255,255,.20) !important;
  color: #fff !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-page-hero .mb-cust__filter-chip[data-active="true"] {
  background: rgba(255,255,255,.94) !important;
  border-color: rgba(255,255,255,.86) !important;
  color: var(--rl-petrol) !important;
  box-shadow: 0 14px 28px rgba(4,44,39,.20), inset 0 1px 0 rgba(255,255,255,.74) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-page-hero .mb-cust__search {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: none !important;
  height: 50px !important;
  min-height: 50px !important;
  padding: 0 18px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  background: rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.82) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-page-hero .mb-cust__search:focus-within {
  border-color: rgba(255,255,255,.48) !important;
  background: rgba(255,255,255,.20) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-page-hero .mb-cust__search input,
html[data-design="v2"] body.app-v4 #page-kunden .mb-page-hero .mb-cust__search input::placeholder {
  color: rgba(255,255,255,.82) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-page-hero__actions .mb-btn {
  width: 100% !important;
  min-height: 50px !important;
  justify-content: center !important;
  border-radius: 8px !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-page-hero__actions .mb-btn:not(.mb-btn--primary) {
  border-color: rgba(255,255,255,.24) !important;
  background: rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.88) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-page-hero__actions .mb-btn--primary {
  border-color: rgba(255,255,255,.66) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(226,255,248,.92)) !important;
  color: var(--rl-petrol) !important;
  box-shadow: 0 18px 34px rgba(4,44,39,.22), inset 0 1px 0 rgba(255,255,255,.78) !important;
}

@media (max-width: 1340px) {
  html[data-design="v2"] body.app-v4 .mb-page-hero {
    grid-template-columns: minmax(0, 1fr) minmax(330px, .72fr) !important;
    grid-template-areas:
      "intro controls"
      "focus focus" !important;
    min-height: auto !important;
  }
}

@media (max-width: 900px) {
  html[data-design="v2"] body.app-v4 .mb-page-hero {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "intro"
      "focus"
      "controls" !important;
    padding: 22px !important;
    border-radius: 12px !important;
  }

  html[data-design="v2"] body.app-v4 .mb-page-hero__intro strong {
    font-size: clamp(34px, 8vw, 46px) !important;
  }

  html[data-design="v2"] body.app-v4 .mb-page-hero__copy {
    max-width: 54ch !important;
  }
}

@media (max-width: 640px) {
  html[data-design="v2"] body.app-v4 .mb-page-hero {
    padding: 18px !important;
  }

  html[data-design="v2"] body.app-v4 .mb-page-hero__focus {
    padding: 16px !important;
    border-radius: 10px !important;
  }

  html[data-design="v2"] body.app-v4 .mb-page-hero__actions {
    grid-template-columns: 1fr !important;
  }
}

/* The older Kunden toolbar rules are intentionally very specific. This bridge
   lets the opt-in hero pattern win without weakening those legacy selectors for
   pages that have not adopted .mb-page-hero yet. */
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__toolbar.mb-cust-command.mb-page-hero {
  display: grid !important;
  grid-template-columns: minmax(270px, .72fr) minmax(360px, 1fr) minmax(330px, .66fr) !important;
  grid-template-areas: "intro focus controls" !important;
  align-items: stretch !important;
  column-gap: clamp(20px, 2.2vw, 34px) !important;
  row-gap: 18px !important;
  min-height: 194px !important;
  padding: clamp(26px, 2.2vw, 38px) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(135deg, rgba(6,63,57,.97), rgba(14,143,131,.92) 50%, rgba(56,200,181,.82)),
    linear-gradient(90deg, rgba(255,255,255,.10), transparent 55%) !important;
  box-shadow: 0 6px 14px -8px rgba(7,79,70,.18), 0 18px 32px -16px rgba(7,79,70,.24), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__toolbar.mb-page-hero .mb-page-hero__intro {
  flex: 0 1 auto !important;
  grid-area: intro !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__toolbar.mb-page-hero .mb-page-hero__intro strong {
  font-size: clamp(42px, 3.6vw, 66px) !important;
  line-height: .94 !important;
  color: var(--rl-hero-text) !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__toolbar.mb-page-hero .mb-page-hero__focus {
  flex: 0 1 auto !important;
  grid-area: focus !important;
}

html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__toolbar.mb-page-hero .mb-page-hero__controls {
  grid-area: controls !important;
}

@media (max-width: 1340px) {
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__toolbar.mb-cust-command.mb-page-hero {
    grid-template-columns: minmax(0, 1fr) minmax(330px, .72fr) !important;
    grid-template-areas:
      "intro controls"
      "focus focus" !important;
    min-height: auto !important;
  }
}

@media (max-width: 900px) {
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__toolbar.mb-cust-command.mb-page-hero {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "intro"
      "focus"
      "controls" !important;
    padding: 22px !important;
    border-radius: 12px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__toolbar.mb-page-hero .mb-page-hero__intro strong {
    font-size: clamp(34px, 8vw, 46px) !important;
  }
}

@media (max-width: 640px) {
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__toolbar.mb-cust-command.mb-page-hero {
    padding: 18px !important;
  }
}

/* ==========================================================================
   ANFRAGEN - pipeline workspace refinement

   Late, Anfragen-only correction. Dashboard and Kunden stay untouched while
   Anfragen gets the same full-size workspace logic and reusable hero language.
   ========================================================================== */

html[data-design="v2"] body.app-v4 #app > #page-anfragen.active {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  align-self: stretch !important;
  padding-inline: clamp(16px, 2vw, 30px) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen > [data-design-version="v2"] {
  width: 100% !important;
  max-width: 1680px !important;
  margin-inline: auto !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req--pipeline {
  min-height: calc(100vh - 76px) !important;
  min-height: calc(100dvh - 76px) !important;
  gap: 20px !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__toolbar.mb-req-command.mb-page-hero {
  display: grid !important;
  grid-template-columns: minmax(270px, .72fr) minmax(420px, 1fr) minmax(340px, .66fr) !important;
  grid-template-areas: "intro focus controls" !important;
  align-items: stretch !important;
  column-gap: clamp(20px, 2.2vw, 34px) !important;
  row-gap: 18px !important;
  min-height: 194px !important;
  padding: clamp(26px, 2.2vw, 38px) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(135deg, rgba(6,63,57,.97), rgba(14,143,131,.92) 50%, rgba(56,200,181,.82)),
    linear-gradient(90deg, rgba(255,255,255,.10), transparent 55%) !important;
  box-shadow: 0 6px 14px -8px rgba(7,79,70,.18), 0 18px 32px -16px rgba(7,79,70,.24), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__toolbar.mb-page-hero .mb-page-hero__intro {
  flex: 0 1 auto !important;
  grid-area: intro !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__toolbar.mb-page-hero .mb-page-hero__intro strong {
  font-size: clamp(42px, 3.6vw, 66px) !important;
  line-height: .94 !important;
  color: var(--rl-hero-text) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-command__eyebrow {
  color: rgba(255,255,255,.72) !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__toolbar.mb-page-hero .mb-page-hero__focus {
  flex: 0 1 auto !important;
  grid-area: focus !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__toolbar.mb-page-hero .mb-page-hero__controls {
  grid-area: controls !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-page-hero .mb-req__status-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-page-hero .mb-req__status-tab {
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.13) !important;
  color: rgba(255,255,255,.84) !important;
  font-size: 12px !important;
  font-weight: 790 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-page-hero .mb-req__status-tab:hover {
  background: rgba(255,255,255,.20) !important;
  color: #fff !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-page-hero .mb-req__status-tab[data-active="true"] {
  background: rgba(255,255,255,.94) !important;
  border-color: rgba(255,255,255,.86) !important;
  color: var(--rl-petrol) !important;
  box-shadow: 0 14px 28px rgba(4,44,39,.20), inset 0 1px 0 rgba(255,255,255,.74) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-page-hero .mb-req__status-tab[data-active="true"] * {
  color: var(--rl-petrol) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-page-hero .mb-req__status-tab-badge {
  min-width: 20px !important;
  height: 20px !important;
  background: rgba(255,255,255,.18) !important;
  color: currentColor !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-page-hero .mb-req__status-tab[data-active="true"] .mb-req__status-tab-badge {
  background: rgba(14,143,131,.10) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-page-hero .mb-req__search {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: none !important;
  height: 50px !important;
  min-height: 50px !important;
  padding: 0 18px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  background: rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.82) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-page-hero .mb-req__search:focus-within {
  border-color: rgba(255,255,255,.48) !important;
  background: rgba(255,255,255,.20) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-page-hero .mb-req__search input,
html[data-design="v2"] body.app-v4 #page-anfragen .mb-page-hero .mb-req__search input::placeholder {
  color: rgba(255,255,255,.82) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-page-hero .mb-req__search input {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-page-hero__actions {
  grid-template-columns: 1fr !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-page-hero__actions .mb-btn {
  width: 100% !important;
  min-height: 50px !important;
  justify-content: center !important;
  border-radius: 8px !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-page-hero__actions .mb-btn--primary {
  border-color: rgba(255,255,255,.66) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(226,255,248,.92)) !important;
  color: var(--rl-petrol) !important;
  box-shadow: 0 18px 34px rgba(4,44,39,.22), inset 0 1px 0 rgba(255,255,255,.78) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-workspace {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  grid-template-columns:
    minmax(360px, 450px)
    minmax(680px, 1.5fr)
    minmax(300px, 360px) !important;
  gap: 22px !important;
  align-items: stretch !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__list,
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__detail,
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail {
  border-radius: 12px !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__list,
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__detail {
  min-height: 0 !important;
  overflow: hidden !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__list-hd {
  min-height: 62px !important;
  padding: 18px 20px !important;
  font-size: 11px !important;
  font-weight: 820 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__list-body {
  min-height: 0 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__item {
  grid-template-columns: 9px minmax(0, 1fr) !important;
  gap: 16px !important;
  padding: 18px 20px 18px 14px !important;
  min-height: 112px !important;
  border-bottom-color: rgba(42,50,45,.08) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__item:hover {
  background: linear-gradient(135deg, rgba(14,143,131,.08), rgba(255,255,255,.82)) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__item[data-selected="true"] {
  background:
    linear-gradient(135deg, rgba(14,143,131,.17), rgba(255,255,255,.84)) !important;
  box-shadow: inset 5px 0 0 var(--rl-petrol), 0 16px 34px -28px rgba(6,63,57,.34) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__item-dot {
  width: 9px !important;
  height: 54px !important;
  margin-top: 3px !important;
  border-radius: 8px !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__item-main {
  gap: 7px !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__item-name {
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 840 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__item-chan {
  width: 22px !important;
  height: 22px !important;
  border-radius: 8px !important;
  background: rgba(14,143,131,.10) !important;
  color: var(--rl-petrol) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__item-time {
  font-size: 12px !important;
  font-weight: 760 !important;
  color: var(--rl-text-3) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__item-service {
  font-size: 13.25px !important;
  line-height: 1.35 !important;
  font-weight: 720 !important;
  color: var(--rl-text-2) !important;
  white-space: normal !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__item-meta {
  gap: 7px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__item-price {
  font-size: 13px !important;
  font-weight: 820 !important;
  color: var(--rl-text) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__item-sla {
  padding: 4px 9px !important;
  font-size: 11.5px !important;
  font-weight: 780 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__detail {
  display: flex !important;
  flex-direction: column !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__detail-hd {
  padding: 30px 32px 26px !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__detail-status-row {
  margin-bottom: 14px !important;
  gap: 10px !important;
  font-size: 11.5px !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__status-pill {
  min-height: 30px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__detail-title {
  max-width: 22ch !important;
  font-size: clamp(28px, 2.2vw, 36px) !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__detail-sub {
  margin-top: 10px !important;
  gap: 11px !important;
  font-size: 13.25px !important;
  line-height: 1.35 !important;
  color: var(--rl-text-2) !important;
  flex-wrap: wrap !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__sla {
  margin: 18px 22px 0 !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(14,143,131,.16) !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(14,143,131,.09), rgba(255,255,255,.76)) !important;
  color: var(--rl-text-2) !important;
  font-size: 13px !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__sla-clock {
  padding: 5px 10px !important;
  border-radius: 8px !important;
  background: rgba(14,143,131,.11) !important;
  color: var(--rl-petrol) !important;
  font-weight: 850 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 18px !important;
  padding: 24px 28px 28px !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__card {
  grid-column: span 6 !important;
  min-height: 142px !important;
  padding: 22px !important;
  border-radius: 12px !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__card--wide {
  grid-column: 1 / -1 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__card-title {
  margin-bottom: 12px !important;
  font-size: 11.5px !important;
  font-weight: 840 !important;
  letter-spacing: .08em !important;
  color: var(--rl-petrol) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__card-big {
  font-size: 17px !important;
  line-height: 1.3 !important;
  font-weight: 820 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__card-sub,
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__kv {
  font-size: 13px !important;
  line-height: 1.45 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__kv {
  grid-template-columns: minmax(82px, 108px) minmax(0, 1fr) !important;
  gap: 7px 14px !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__msg {
  padding: 16px 18px !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__slot-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__slot {
  min-height: 104px !important;
  padding: 14px 16px !important;
  border-radius: 10px !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__slot-time {
  font-size: 18px !important;
  line-height: 1.2 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__footer {
  display: grid !important;
  grid-template-columns: minmax(116px, auto) minmax(150px, auto) minmax(0, 1fr) minmax(220px, 1.1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 18px 22px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(251,249,243,.92)),
    linear-gradient(135deg, rgba(14,143,131,.07), transparent 65%) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__footer .mb-btn {
  min-height: 46px !important;
  border-radius: 8px !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__footer .mb-btn--primary {
  min-height: 52px !important;
  font-size: 13.5px !important;
  box-shadow: 0 16px 28px rgba(14,143,131,.22) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__footer-spacer {
  display: none !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__footer-summary {
  justify-self: stretch !important;
  padding: 11px 14px !important;
  border: 1px solid rgba(14,143,131,.14) !important;
  border-radius: 10px !important;
  background: rgba(14,143,131,.06) !important;
  color: var(--rl-text-2) !important;
  font-size: 12.5px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail {
  position: sticky !important;
  top: 18px !important;
  align-self: start !important;
  padding: 20px !important;
  gap: 14px !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail__card {
  padding: 22px !important;
  border-radius: 12px !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail__card span {
  margin-bottom: 8px !important;
  color: var(--rl-petrol) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail__card strong {
  font-size: 16px !important;
  line-height: 1.28 !important;
  font-weight: 840 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail__card p {
  margin-top: 10px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail__action {
  min-height: 50px !important;
  padding: 0 18px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 820 !important;
}

@media (max-width: 1500px) {
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-workspace {
    grid-template-columns: minmax(340px, 420px) minmax(0, 1fr) !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail {
    position: static !important;
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail__card {
    grid-row: span 2 !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__slot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__footer {
    grid-template-columns: minmax(112px, auto) minmax(146px, auto) minmax(0, 1fr) !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__footer .mb-btn--primary {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 1340px) {
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__toolbar.mb-req-command.mb-page-hero {
    grid-template-columns: minmax(0, 1fr) minmax(330px, .72fr) !important;
    grid-template-areas:
      "intro controls"
      "focus focus" !important;
    min-height: auto !important;
  }
}

@media (max-width: 1180px) {
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req--pipeline {
    min-height: calc(100dvh - 92px) !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-workspace {
    grid-template-columns: 1fr !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail {
    grid-template-columns: 1fr !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__list {
    max-height: 430px !important;
  }
}

@media (max-width: 900px) {
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__toolbar.mb-req-command.mb-page-hero {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "intro"
      "focus"
      "controls" !important;
    padding: 22px !important;
    border-radius: 12px !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__toolbar.mb-page-hero .mb-page-hero__intro strong {
    font-size: clamp(34px, 8vw, 46px) !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__body,
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__slot-grid,
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__footer {
    grid-template-columns: 1fr !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__card {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 640px) {
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__toolbar.mb-req-command.mb-page-hero {
    padding: 18px !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__body {
    padding: 18px 16px 22px !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__detail-hd {
    padding: 22px 20px !important;
  }
}

/* ==========================================================================
   ANFRAGEN — second-pass refinement (post-Codex)

   Goals:
   1. Page no longer reads compact: bind the pipeline to viewport height (like
      Kunden) so columns actually stretch, and widen the page padding to match
      Dashboard's premium horizontal rhythm.
   2. Center detail card: rebalance the lower half so the two short info
      cards stop reading hollow — tighter min-heights, denser KV grid, taller
      message card. Footer becomes a confident sticky-feeling decision bar.
   3. Left list: bump scan typography (name/service/meta) and add deliberate
      vertical rhythm so the active row clearly leads.
   4. Right rail: stronger presence — stats tiles + iconified shortcut
      buttons that read as a real decision-support area, not a sidebar.
   5. Hero: modest padding/typography refinement to match Dashboard parity.

   Scope: #page-anfragen only. Dashboard/Kunden/Kalender are not touched.
   ========================================================================== */

/* — Page frame: bounded viewport + Dashboard-grade padding — */
html[data-design="v2"] body.app-v4 #app > #page-anfragen.active {
  padding-inline: clamp(20px, 3vw, 44px) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen > [data-design-version="v2"] {
  max-width: 1720px !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req--pipeline {
  height: calc(100vh - 76px) !important;
  height: calc(100dvh - 76px) !important;
  min-height: 620px !important;
  gap: 22px !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__toolbar.mb-req-command.mb-page-hero {
  flex: 0 0 auto !important;
  min-height: 200px !important;
  padding: clamp(28px, 2.4vw, 40px) !important;
  border-radius: 34px !important;
  box-shadow:
    0 6px 14px -8px rgba(7,79,70,.20),
    0 22px 40px -18px rgba(7,79,70,.26),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__toolbar.mb-page-hero .mb-page-hero__intro strong {
  font-size: clamp(44px, 3.7vw, 68px) !important;
  letter-spacing: -.012em !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.10) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__toolbar.mb-page-hero .mb-page-hero__copy {
  margin-top: 6px !important;
  max-width: 38ch !important;
  font-size: 14.5px !important;
  font-weight: 620 !important;
  color: rgba(255,255,255,.86) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-page-hero__focus-label {
  letter-spacing: .14em !important;
  color: rgba(255,255,255,.78) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-page-hero .mb-req__status-tab {
  min-height: 40px !important;
  padding: 0 16px !important;
  font-size: 12.5px !important;
  gap: 8px !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-page-hero .mb-req__status-tab-badge {
  min-width: 22px !important;
  height: 22px !important;
  font-size: 11.5px !important;
  font-weight: 820 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-page-hero .mb-req__search {
  height: 52px !important;
  min-height: 52px !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-page-hero__actions .mb-btn--primary {
  min-height: 52px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .005em !important;
}

/* — Workspace: stretch columns into the bounded pipeline height — */
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-workspace {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  grid-template-columns:
    minmax(380px, 460px)
    minmax(640px, 1.55fr)
    minmax(320px, 380px) !important;
  gap: 22px !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__list,
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__detail,
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail {
  height: 100% !important;
  max-height: 100% !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__list {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-shadow: 0 4px 8px -4px rgba(28,42,36,.06), 0 18px 38px -18px rgba(13,75,68,.22) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__list-hd {
  flex: 0 0 auto !important;
  min-height: 60px !important;
  padding: 16px 22px !important;
  border-bottom: 1px solid rgba(14,143,131,.10) !important;
  font-size: 11px !important;
  letter-spacing: .105em !important;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(251,249,243,.84)) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__list-count {
  font-size: 13px !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--rl-text) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__list-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__list-body::-webkit-scrollbar {
  width: 8px !important;
}
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__list-body::-webkit-scrollbar-thumb {
  background: rgba(14,143,131,.18) !important;
  border-radius: 4px !important;
}
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__list-body::-webkit-scrollbar-thumb:hover {
  background: rgba(14,143,131,.32) !important;
}

/* — List item: stronger hierarchy, calmer density, deliberate active row — */
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__item {
  grid-template-columns: 9px minmax(0, 1fr) !important;
  gap: 16px !important;
  padding: 18px 22px 18px 14px !important;
  min-height: 116px !important;
  border-bottom: 1px solid rgba(14,143,131,.08) !important;
  transition: background .14s ease, box-shadow .14s ease !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__item:hover {
  background: rgba(14,143,131,.05) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__item[data-selected="true"] {
  background: linear-gradient(90deg, rgba(14,143,131,.12) 0%, rgba(14,143,131,.04) 60%, transparent 100%) !important;
  box-shadow: inset 5px 0 0 var(--rl-petrol), 0 14px 30px -22px rgba(6,63,57,.34) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__item-dot {
  width: 9px !important;
  height: 60px !important;
  margin-top: 2px !important;
  border-radius: 8px !important;
  background: var(--rl-gradient) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__item-main {
  gap: 9px !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__item-name {
  font-size: 16.5px !important;
  line-height: 1.2 !important;
  font-weight: 820 !important;
  letter-spacing: -.005em !important;
  gap: 9px !important;
  color: var(--rl-text) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__item-chan {
  width: 26px !important;
  height: 26px !important;
  border-radius: 9px !important;
  background: rgba(14,143,131,.10) !important;
  color: var(--rl-petrol) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__item-time {
  font-size: 12px !important;
  font-weight: 720 !important;
  color: var(--rl-text-3) !important;
  letter-spacing: 0 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__item-service {
  font-size: 13.5px !important;
  line-height: 1.4 !important;
  font-weight: 660 !important;
  color: var(--rl-text-2) !important;
  white-space: normal !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__item-meta {
  gap: 9px !important;
  font-size: 12.25px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  color: var(--rl-text-3) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__item-price {
  font-size: 13.25px !important;
  font-weight: 820 !important;
  color: var(--rl-text) !important;
  letter-spacing: -.005em !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__item-sla {
  padding: 4px 10px !important;
  font-size: 11.75px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  border-radius: 8px !important;
}

/* — Detail card: rebalance the lower half so it stops reading hollow — */
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__detail {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-shadow: 0 4px 8px -4px rgba(28,42,36,.06), 0 22px 46px -22px rgba(13,75,68,.26) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__detail-hd {
  flex: 0 0 auto !important;
  padding: 28px 32px 24px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(251,249,243,.82)),
    linear-gradient(135deg, rgba(14,143,131,.08), transparent 62%) !important;
  border-bottom: 1px solid rgba(14,143,131,.10) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__detail-status-row {
  margin-bottom: 12px !important;
  font-size: 11.5px !important;
  letter-spacing: .08em !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__detail-status-row > span:nth-child(3) {
  font-size: 12.5px !important;
  font-weight: 640 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__detail-title {
  max-width: 26ch !important;
  font-size: clamp(28px, 2.3vw, 38px) !important;
  line-height: 1.04 !important;
  font-weight: 880 !important;
  letter-spacing: -.012em !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__detail-sub {
  margin-top: 12px !important;
  gap: 12px !important;
  font-size: 13.5px !important;
  font-weight: 640 !important;
  color: var(--rl-text-2) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__sla {
  flex: 0 0 auto !important;
  margin: 18px 28px 0 !important;
  padding: 14px 18px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(14,143,131,.18) !important;
  background:
    linear-gradient(135deg, rgba(14,143,131,.10), rgba(255,255,255,.78)) !important;
  font-size: 13.25px !important;
  font-weight: 640 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__sla-clock {
  padding: 6px 12px !important;
  font-size: 13.5px !important;
  font-weight: 880 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  grid-auto-rows: min-content !important;
  align-content: start !important;
  gap: 18px !important;
  padding: 22px 28px 26px !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__card {
  min-height: 0 !important;
  padding: 18px 20px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(14,143,131,.12) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbf9f3 100%) !important;
  box-shadow: 0 4px 8px -5px rgba(28,42,36,.06), 0 14px 26px -14px rgba(13,75,68,.14) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__card-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
  font-size: 11px !important;
  font-weight: 840 !important;
  letter-spacing: .105em !important;
  text-transform: uppercase !important;
  color: var(--rl-petrol-deep) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__card-title svg {
  color: var(--rl-petrol) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__card-big {
  font-size: 17px !important;
  line-height: 1.28 !important;
  font-weight: 840 !important;
  letter-spacing: -.005em !important;
  color: var(--rl-text) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__card-sub {
  margin-top: 4px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--rl-text-3) !important;
  line-height: 1.4 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__kv {
  margin-top: 12px !important;
  grid-template-columns: minmax(78px, 96px) minmax(0, 1fr) !important;
  gap: 6px 14px !important;
  font-size: 13px !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__kv dt {
  color: var(--rl-text-3) !important;
  font-weight: 660 !important;
  letter-spacing: 0 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__kv dd {
  color: var(--rl-text) !important;
  font-weight: 700 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__kv dd a {
  color: var(--rl-petrol-deep) !important;
  text-decoration: none !important;
  font-weight: 760 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__kv dd a:hover {
  text-decoration: underline !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__msg {
  margin-top: 4px !important;
  padding: 16px 18px 16px 22px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(14,143,131,.16) !important;
  border-left: 0 !important;
  background:
    linear-gradient(90deg, rgba(14,143,131,.10), transparent 38%),
    rgba(255,255,255,.92) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important;
  font-size: 13.75px !important;
  line-height: 1.58 !important;
  color: var(--rl-text) !important;
  font-style: normal !important;
  font-weight: 580 !important;
  position: relative !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__msg::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 12px !important;
  bottom: 12px !important;
  width: 4px !important;
  border-radius: 0 6px 6px 0 !important;
  background: var(--rl-gradient) !important;
}

/* Slot suggestions: stronger time column, calmer surface */
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__slot-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__slot {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 4px !important;
  min-height: 102px !important;
  padding: 14px 16px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(14,143,131,.16) !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbf9f3 100%) !important;
  box-shadow: 0 4px 8px -5px rgba(28,42,36,.06), 0 10px 20px -14px rgba(13,75,68,.14) !important;
  transition: transform .14s ease, border-color .14s ease, box-shadow .18s ease !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__slot:hover {
  border-color: rgba(14,143,131,.34) !important;
  transform: translateY(-1px) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__slot[data-selected="true"] {
  background: linear-gradient(135deg, var(--rl-petrol) 0%, #14a48f 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 18px 32px -18px rgba(6,63,57,.42), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__slot[data-selected="true"] .mb-req__slot-date,
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__slot[data-selected="true"] .mb-req__slot-time,
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__slot[data-selected="true"] .mb-req__slot-travel {
  color: #ffffff !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__slot-date {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--rl-petrol-deep) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__slot-time {
  font-size: 19px !important;
  font-weight: 850 !important;
  letter-spacing: -.005em !important;
  color: var(--rl-text) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__slot-travel {
  margin-top: 4px !important;
  font-size: 11.5px !important;
  font-weight: 640 !important;
  color: var(--rl-text-3) !important;
}

/* — Footer / decision bar: confident sticky-feeling action zone —
   Layout strategy: one row, four cells. The two secondary buttons keep their
   natural width on the left, the summary chip fills the gap, the primary CTA
   sits last and is visually dominant via size + shadow + gradient (not via
   grid spans, so the row stays predictable). */
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__footer {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns:
    minmax(108px, auto)
    minmax(140px, auto)
    minmax(0, 1fr)
    minmax(240px, 1.1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 18px 24px !important;
  border-top: 1px solid rgba(14,143,131,.14) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,245,237,.94)),
    linear-gradient(135deg, rgba(14,143,131,.08), transparent 62%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__footer .mb-btn {
  min-height: 46px !important;
  padding: 0 18px !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 780 !important;
  letter-spacing: .005em !important;
  white-space: nowrap !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__footer .mb-btn[data-req-action="decline"],
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__footer .mb-btn[data-req-action="propose"] {
  border: 1px solid rgba(14,143,131,.18) !important;
  background: rgba(255,255,255,.86) !important;
  color: var(--rl-petrol-deep) !important;
  box-shadow: 0 4px 8px -5px rgba(28,42,36,.06) !important;
  transition: border-color .14s ease, color .14s ease, background .14s ease !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__footer .mb-btn[data-req-action="decline"]:hover {
  border-color: rgba(224,82,82,.34) !important;
  color: #b94a4a !important;
  background: rgba(255,255,255,.96) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__footer .mb-btn[data-req-action="propose"]:hover {
  border-color: rgba(14,143,131,.42) !important;
  background: #ffffff !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__footer .mb-btn--primary {
  justify-self: stretch !important;
  align-self: center !important;
  min-height: 54px !important;
  padding: 0 26px !important;
  border-radius: 8px !important;
  font-size: 14.5px !important;
  font-weight: 820 !important;
  letter-spacing: .005em !important;
  background: linear-gradient(135deg, var(--rl-petrol) 0%, #14a48f 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow:
    0 18px 32px -14px rgba(6,63,57,.32),
    0 1px 0 rgba(255,255,255,.22) inset !important;
  transition: transform .14s ease, box-shadow .18s ease !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__footer .mb-btn--primary:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    0 22px 38px -14px rgba(6,63,57,.38),
    0 1px 0 rgba(255,255,255,.22) inset !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__footer-summary {
  justify-self: stretch !important;
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 11px 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(14,143,131,.18) !important;
  background:
    linear-gradient(135deg, rgba(14,143,131,.08), rgba(255,255,255,.84)) !important;
  color: var(--rl-text) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 760 !important;
  letter-spacing: -.005em !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__footer-summary::before {
  content: "Vorschlag" !important;
  flex: 0 0 auto !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  background: rgba(14,143,131,.14) !important;
  color: var(--rl-petrol-deep) !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__footer-spacer {
  display: none !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen [data-status="new"].mb-req__status-pill {
  background: rgba(14,143,131,.14) !important;
  color: var(--rl-petrol-deep) !important;
}

/* — Empty detail state: nicer, more on-brand — */
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__detail-empty {
  flex: 1 1 auto !important;
  padding: 60px 32px !important;
  gap: 14px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(14,143,131,.08), transparent 56%),
    linear-gradient(180deg, #ffffff 0%, #fbf9f3 100%) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__detail-empty svg {
  width: 56px !important;
  height: 56px !important;
  color: var(--rl-petrol) !important;
  opacity: .68 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__detail-empty h3 {
  font-size: 17px !important;
  font-weight: 820 !important;
  color: var(--rl-text) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__detail-empty p {
  max-width: 320px !important;
  font-size: 13.25px !important;
  line-height: 1.55 !important;
  color: var(--rl-text-2) !important;
}

/* — Decision rail: real decision-support area — */
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 20px !important;
  border-radius: 12px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  box-shadow: 0 4px 8px -4px rgba(28,42,36,.06), 0 18px 38px -18px rgba(13,75,68,.22) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail__card {
  padding: 22px 22px 24px !important;
  border-radius: 12px !important;
  background:
    linear-gradient(135deg, rgba(14,143,131,.10), rgba(255,255,255,.84)),
    linear-gradient(180deg, #ffffff 0%, #fbf9f3 100%) !important;
  border: 1px solid rgba(14,143,131,.18) !important;
  box-shadow: 0 4px 8px -5px rgba(28,42,36,.06), 0 14px 26px -14px rgba(13,75,68,.14) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail__card span {
  display: block !important;
  margin-bottom: 8px !important;
  font-size: 10.5px !important;
  font-weight: 840 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--rl-petrol-deep) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail__card strong {
  display: block !important;
  font-size: 16.5px !important;
  line-height: 1.3 !important;
  font-weight: 860 !important;
  letter-spacing: -.005em !important;
  color: var(--rl-text) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail__card p {
  margin: 10px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  font-weight: 580 !important;
  color: var(--rl-text-2) !important;
}

/* Stats tiles */
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail__stats {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail__stat {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 14px 14px 15px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(14,143,131,.14) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbf9f3 100%) !important;
  box-shadow: 0 4px 8px -5px rgba(28,42,36,.06), 0 10px 20px -14px rgba(13,75,68,.10) !important;
  transition: transform .14s ease, border-color .14s ease !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail__stat:hover {
  border-color: rgba(14,143,131,.28) !important;
  transform: translateY(-1px) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail__stat span {
  font-size: 10px !important;
  font-weight: 820 !important;
  letter-spacing: .105em !important;
  text-transform: uppercase !important;
  color: var(--rl-petrol-deep) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail__stat strong {
  font-size: 19px !important;
  line-height: 1.05 !important;
  font-weight: 860 !important;
  letter-spacing: -.01em !important;
  color: var(--rl-text) !important;
  font-variant-numeric: tabular-nums !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail__stat em {
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 620 !important;
  color: var(--rl-text-3) !important;
}

/* Shortcuts cluster */
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail__shortcuts {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 2px !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail__shortcuts-label {
  display: block !important;
  margin: 4px 4px 4px !important;
  font-size: 10.5px !important;
  font-weight: 840 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--rl-petrol-deep) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail__action {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 60px !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(14,143,131,.14) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbf9f3 100%) !important;
  box-shadow: 0 4px 8px -5px rgba(28,42,36,.06), 0 10px 20px -14px rgba(13,75,68,.12) !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: transform .14s ease, border-color .14s ease, box-shadow .18s ease !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail__action:hover {
  border-color: rgba(14,143,131,.34) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 12px -6px rgba(28,42,36,.08), 0 16px 28px -16px rgba(13,75,68,.20) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail__action-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(14,143,131,.14), rgba(56,200,181,.10)) !important;
  border: 1px solid rgba(14,143,131,.20) !important;
  color: var(--rl-petrol-deep) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail__action-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail__action-text strong {
  font-size: 13.5px !important;
  line-height: 1.2 !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
  color: var(--rl-text) !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail__action-text em {
  font-size: 11.75px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  color: var(--rl-text-3) !important;
  line-height: 1.35 !important;
}

/* — Wider breakpoint behavior: collapse rail to 3-tile strip, keep workspace
   2-col so list/detail still feel like a real workspace. — */
@media (max-width: 1500px) {
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-workspace {
    grid-template-columns: minmax(360px, 440px) minmax(0, 1fr) !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail {
    height: auto !important;
    max-height: none !important;
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.2fr) !important;
    align-items: stretch !important;
    gap: 16px !important;
    overflow: visible !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail__card,
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail__stats,
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail__shortcuts {
    margin: 0 !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail__stats {
    grid-template-rows: 1fr 1fr !important;
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 1180px) {
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req--pipeline {
    height: auto !important;
    min-height: calc(100dvh - 92px) !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-workspace {
    grid-template-columns: 1fr !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__list,
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__detail,
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail {
    height: auto !important;
    max-height: none !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__list {
    max-height: 460px !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail {
    grid-template-columns: 1fr !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail__stats {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: auto !important;
  }
}

@media (max-width: 1100px) {
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__footer {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "summary summary"
      "decline propose"
      "primary primary" !important;
    gap: 10px 12px !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__footer-summary {
    grid-area: summary !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__footer .mb-btn[data-req-action="decline"] {
    grid-area: decline !important;
    justify-self: stretch !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__footer .mb-btn[data-req-action="propose"] {
    grid-area: propose !important;
    justify-self: stretch !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__footer .mb-btn--primary {
    grid-area: primary !important;
  }
}

@media (max-width: 900px) {
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__slot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__slot-grid {
    grid-template-columns: 1fr !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__detail-hd {
    padding: 22px 20px 18px !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__body {
    padding: 18px 18px 22px !important;
  }
}

/* ==========================================================================
   ANFRAGEN — vertical layout correction

   The second-pass refinement put the workspace on a hard viewport-bound
   height (`height: calc(100vh - 76px)` on .mb-req--pipeline plus
   `height: 100%` on list/detail/rail). The "minus 76" math doesn't
   actually match the real chrome around the page (#app sidebar layout
   + .page padding + #app-footer pushed via margin-top:auto), and at
   ≤1500px the rail moves to a second grid row whose track is auto-sized,
   making the percentage heights resolve to 0 and collapsing the cards.
   The visible result was bottom-clipped rail/footer, compressed cards,
   and dead space below the workspace.

   Correction: drop the bounded-height model entirely and go back to a
   natural-flow layout. We keep all the visual refinements from the
   previous pass (hero, list rhythm, detail cards, footer, rail content,
   typography). Only the height/overflow/sticky machinery is rewritten.

   Strategy:
   • Pipeline keeps a generous min-height so the page still feels like a
     workspace on tall screens, but never caps itself.
   • Workspace grid columns size to their own content (align-items: start).
   • List bounds its inner scroll via max-height on .mb-req__list-body,
     so 20+ requests don't push the whole page absurdly tall.
   • Detail card flows naturally — body shows full content, footer sits
     at the bottom of the card in normal flow.
   • Rail flows naturally and uses position: sticky on wide desktops so
     it follows the user as they scroll the longer detail card. Sticky
     drops to static below 1500px where the rail moves to a new row.
   ========================================================================== */

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req--pipeline {
  height: auto !important;
  min-height: calc(100vh - 110px) !important;
  min-height: calc(100dvh - 110px) !important;
  max-height: none !important;
  overflow: visible !important;
  gap: 22px !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-workspace {
  flex: 0 0 auto !important;
  align-items: start !important;
  min-height: 0 !important;
}

/* Drop the percentage-height clamp on the three workspace columns. Each
   column now sizes to its own content. The decision-rail and detail
   card no longer try to inherit 100% of a fragile parent height. */
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__list,
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__detail,
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail {
  height: auto !important;
  max-height: none !important;
}

/* List: keep the rounded clipping on the outer card, scroll the inner
   body so a long list doesn't dominate the page height. The cap leaves
   enough room for the hero + list-hd + page chrome on a 720px viewport. */
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__list {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  min-height: 540px !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__list-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: calc(100vh - 320px) !important;
  max-height: calc(100dvh - 320px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Detail card: natural height. Body grows with content, footer always
   visible at the bottom of the card in normal flow. No internal scroll
   here — that was the source of the clipping. The user scrolls the page
   if the detail is taller than the viewport. */
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__detail {
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
  min-height: 540px !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__body {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__footer {
  flex: 0 0 auto !important;
}

/* Rail: natural height, sticky on wide desktops so it stays useful while
   the user scrolls the longer detail card. No internal overflow here —
   the previous overflow:auto was masking the real height bug and made
   the rail's bottom corner visually "clip" content. */
html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail {
  position: sticky !important;
  top: 24px !important;
  align-self: start !important;
  overflow: visible !important;
}

/* At ≤1500px the rail moves to a new grid row spanning both columns.
   Sticky doesn't make sense in that mode — drop it back to static. */
@media (max-width: 1500px) {
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req-decision-rail {
    position: static !important;
    top: auto !important;
  }
}

@media (max-width: 1180px) {
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req--pipeline {
    min-height: calc(100vh - 92px) !important;
    min-height: calc(100dvh - 92px) !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__list {
    min-height: 0 !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__list-body {
    max-height: 460px !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__detail {
    min-height: 0 !important;
  }
}

@media (max-width: 640px) {
  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__list-body {
    max-height: 380px !important;
  }
}

/* ==========================================================================
   PLANUNG - command-center rebuild

   Own the calendar relaunch structure end-to-end. The rebuilt header no longer
   uses the legacy .mb-cal__toolbar class, so this block can use the shared hero
   language without inheriting the old light toolbar conflict.
   ========================================================================== */

html[data-design="v2"] body.app-v4 #app > #page-kalender.active {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  align-self: stretch !important;
  padding-inline: clamp(16px, 2vw, 30px) !important;
  overflow-x: hidden !important;
}

html[data-design="v2"] body.app-v4 #page-kalender > [data-design-version="v2"] {
  width: 100% !important;
  max-width: 1720px !important;
  margin-inline: auto !important;
  box-sizing: border-box !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal--command-center {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 62px) !important;
  padding: 0 !important;
  background: transparent !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command.mb-page-hero {
  display: grid !important;
  grid-template-columns: minmax(300px, .78fr) minmax(500px, 1.14fr) minmax(340px, .72fr) !important;
  grid-template-areas: "intro focus controls" !important;
  align-items: stretch !important;
  gap: clamp(18px, 2vw, 32px) !important;
  min-height: 206px !important;
  margin: 0 !important;
  padding: clamp(28px, 2.4vw, 40px) !important;
  border: 0 !important;
  border-radius: 12px !important;
  background:
    linear-gradient(135deg, rgba(5, 48, 43, .98), rgba(10, 112, 101, .96) 49%, rgba(52, 188, 169, .86)),
    linear-gradient(90deg, rgba(255, 255, 255, .12), transparent 58%) !important;
  color: #fff !important;
  box-shadow:
    0 10px 18px -12px rgba(7, 79, 70, .24),
    0 26px 52px -30px rgba(7, 79, 70, .34),
    inset 0 1px 0 rgba(255, 255, 255, .22) !important;
  overflow: hidden !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command__intro {
  grid-area: intro !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command__eyebrow {
  color: rgba(255, 255, 255, .72) !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command .mb-page-hero__intro strong {
  color: #fff !important;
  font-size: clamp(44px, 3.9vw, 70px) !important;
  line-height: .94 !important;
  font-weight: 880 !important;
  letter-spacing: 0 !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command .mb-page-hero__copy {
  max-width: 38ch !important;
  color: rgba(255, 255, 255, .82) !important;
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  font-weight: 650 !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command__focus {
  grid-area: focus !important;
  min-height: 132px !important;
  padding: 22px 24px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command__period {
  display: grid !important;
  grid-template-columns: auto auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command .mb-cal__today-btn,
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command .mb-cal__nav-btn {
  border: 1px solid rgba(255, 255, 255, .28) !important;
  color: rgba(255, 255, 255, .94) !important;
  background: rgba(255, 255, 255, .12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command .mb-cal__today-btn {
  height: 38px !important;
  padding: 0 17px !important;
  border-radius: 8px !important;
  font-weight: 850 !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command .mb-cal__nav {
  display: inline-flex !important;
  gap: 6px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command .mb-cal__nav-btn {
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command .mb-cal__today-btn:hover,
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command .mb-cal__nav-btn:hover {
  background: rgba(255, 255, 255, .22) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command .mb-cal__title {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 8px 15px !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .14) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 840 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command__viewswitch {
  display: inline-flex !important;
  align-self: flex-start !important;
  gap: 4px !important;
  padding: 4px !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .10) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command__viewswitch .mb-btn {
  min-height: 32px !important;
  padding: 0 15px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, .84) !important;
  font-size: 12.5px !important;
  font-weight: 830 !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command__viewswitch .mb-btn[data-active="true"],
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command__viewswitch .mb-btn.mb-btn--primary {
  background: rgba(255, 255, 255, .95) !important;
  color: var(--rl-petrol-deep, #053f39) !important;
  box-shadow: 0 12px 22px -14px rgba(4, 44, 39, .45) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command__controls {
  grid-area: controls !important;
  gap: 12px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command .mb-cal__search {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  width: 100% !important;
  max-width: none !important;
  height: 50px !important;
  min-height: 50px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(255, 255, 255, .26) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .16) !important;
  color: rgba(255, 255, 255, .84) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command .mb-cal__search:focus-within {
  border-color: rgba(255, 255, 255, .52) !important;
  background: rgba(255, 255, 255, .22) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command .mb-cal__search input {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  outline: none !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command .mb-cal__search input::placeholder {
  color: rgba(255, 255, 255, .68) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command .mb-cal__kbd {
  border-color: rgba(255, 255, 255, .18) !important;
  background: rgba(255, 255, 255, .18) !important;
  color: rgba(255, 255, 255, .78) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command .mb-page-hero__actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) !important;
  gap: 10px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command .mb-page-hero__actions .mb-btn {
  width: 100% !important;
  min-height: 50px !important;
  justify-content: center !important;
  border-radius: 8px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command .mb-page-hero__actions .mb-btn:not(.mb-btn--primary) {
  border-color: rgba(255, 255, 255, .28) !important;
  background: rgba(255, 255, 255, .13) !important;
  color: rgba(255, 255, 255, .9) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command .mb-page-hero__actions .mb-btn--primary {
  border-color: rgba(255, 255, 255, .72) !important;
  background: linear-gradient(135deg, #fff, #e6fff8) !important;
  color: var(--rl-petrol-deep, #053f39) !important;
  box-shadow: 0 18px 34px rgba(4, 44, 39, .24), inset 0 1px 0 rgba(255, 255, 255, .82) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-workspace {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(270px, 320px) minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 18px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-rail {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-rail > * {
  flex: 0 0 auto !important;
}

html[data-design="v2"] body.app-v4 #page-kalender :is(.mb-cal__kpi, .mb-minical, .mb-cal__legend, .mb-cal__homebase, .mb-cal__insight) {
  border-radius: 10px !important;
  border: 1px solid rgba(14, 143, 131, .14) !important;
  background: linear-gradient(180deg, #fff 0%, #fbf9f3 100%) !important;
  box-shadow: 0 16px 34px -26px rgba(13, 75, 68, .28) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__kpi {
  order: 0 !important;
  min-height: 132px !important;
  padding: 18px !important;
  border-color: rgba(255, 255, 255, .18) !important;
  background:
    linear-gradient(135deg, rgba(5, 48, 43, .98), rgba(12, 124, 112, .9)),
    linear-gradient(90deg, rgba(255, 255, 255, .12), transparent 64%) !important;
  color: #fff !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__kpi-label,
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__kpi-sub {
  color: rgba(255, 255, 255, .72) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__kpi-value {
  color: #fff !important;
  font-size: clamp(28px, 2.4vw, 36px) !important;
  font-weight: 880 !important;
  line-height: 1 !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-minical {
  order: 1 !important;
  padding: 16px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-minical__month {
  color: var(--rl-text, #18231f) !important;
  font-size: 13px !important;
  font-weight: 830 !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-minical__grid {
  gap: 4px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-minical__dow {
  color: var(--rl-text-3, #68736f) !important;
  font-weight: 760 !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-minical__day {
  border-radius: 9px !important;
  color: var(--rl-text-2, #3a4641) !important;
  font-weight: 700 !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-minical__day--selected {
  background: var(--rl-petrol, #0e8f83) !important;
  color: #fff !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__insight {
  order: 2 !important;
  padding: 16px 18px !important;
  border-left: 4px solid var(--rl-petrol, #0e8f83) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__insight-label,
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__legend-title {
  color: var(--rl-petrol-deep, #053f39) !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__insight-title {
  color: var(--rl-text, #18231f) !important;
  font-size: 15px !important;
  font-weight: 850 !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__insight-copy {
  color: var(--rl-text-2, #3a4641) !important;
  font-size: 12.75px !important;
  line-height: 1.48 !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__legend {
  order: 3 !important;
  padding: 14px 16px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__legend-row {
  color: var(--rl-text-2, #3a4641) !important;
  font-size: 12.5px !important;
  font-weight: 650 !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__homebase {
  order: 4 !important;
  padding: 15px 16px !important;
  cursor: pointer !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__homebase:hover,
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__homebase:focus-visible {
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 28px -18px rgba(13, 75, 68, .28) !important;
  outline: none !important;
}

/* Warn-State teilt die Optik mit dem „Firmenname fehlt"-Setup-Nudge im
   Buchungs-Funnel (`.bw-hd__hint` in src/css/10-booking.css). Die Inner-
   Elemente (`.bw-hd__hint-ico` / `-title` / `-sub`) werden direkt aus dem
   Booking-Stylesheet gestylt — hier nur die Host-Hülle überschreiben,
   weil `.mb-cal__homebase` einige Properties mit `!important` setzt. */
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__homebase.bw-hd__hint {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 14px 16px !important;
  background: linear-gradient(135deg, #fef9c3 0%, #fde68a 100%) !important;
  border: 2.5px solid #eab308 !important;
  border-radius: 14px !important;
  color: #713f12 !important;
  line-height: 1.2 !important;
  /* `animation` (bwHintPulse) erbt aus .bw-hd__hint — kein Override nötig.
     `transition` wird aus .mb-cal__homebase übernommen und harmoniert. */
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__homebase.bw-hd__hint:hover,
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__homebase.bw-hd__hint:focus-visible {
  transform: translateY(-2px) !important;
  filter: brightness(1.04) !important;
  /* Beim Hover pausiert .bw-hd__hint die Pulse-Animation. Wir setzen den
     Peak-Shadow statisch, damit die generische .mb-cal__homebase:hover-
     Regel (mutige Petrol-Schatten, mit !important) nicht durchschlägt. */
  box-shadow:
    0 0 0 6px rgba(250, 204, 21, .32),
    0 10px 34px rgba(250, 204, 21, .75),
    0 0 42px rgba(253, 224, 71, .85),
    0 0 70px rgba(253, 224, 71, .4) !important;
}

/* Titel-Größe an die schmale Sidebar anpassen (statt 17–21px clamp). */
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__homebase.bw-hd__hint .bw-hd__hint-title {
  font-size: 15px !important;
  white-space: normal !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__homebase.bw-hd__hint .bw-hd__hint-sub {
  white-space: normal !important;
}

/* Dark-Mode-Parität zu [data-theme=dark] .bw-hd__hint in 10-booking.css. */
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-kalender .mb-cal__homebase.bw-hd__hint {
  background: linear-gradient(135deg, rgba(250, 204, 21, .18) 0%, rgba(234, 179, 8, .12) 100%) !important;
  border-color: #facc15 !important;
  color: #fef3c7 !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__homebase-title {
  color: var(--rl-text, #18231f) !important;
  font-size: 13px !important;
  font-weight: 820 !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__homebase-copy {
  color: var(--rl-text-3, #68736f) !important;
  font-size: 11.5px !important;
  line-height: 1.38 !important;
  font-weight: 620 !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__view {
  min-height: 680px !important;
  height: 100% !important;
  border-radius: 12px !important;
  border: 1px solid rgba(14, 143, 131, .16) !important;
  background: linear-gradient(180deg, #fff 0%, #fbf9f3 100%) !important;
  box-shadow: 0 22px 48px -32px rgba(13, 75, 68, .32) !important;
  overflow: hidden !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__hd {
  min-height: 64px !important;
  background: linear-gradient(180deg, #fffdf9 0%, #f4f0e8 100%) !important;
  border-bottom: 1px solid rgba(35, 55, 48, .12) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__dow-cell {
  min-height: 64px !important;
  padding: 12px 13px !important;
  border-right-color: rgba(35, 55, 48, .10) !important;
  color: var(--rl-text-2, #3a4641) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__dom {
  color: var(--rl-text, #18231f) !important;
  font-size: 17px !important;
  font-weight: 880 !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__dow-cell--today {
  position: relative !important;
  background: linear-gradient(180deg, rgba(14, 143, 131, .18), rgba(14, 143, 131, .06)) !important;
  color: var(--rl-petrol-deep, #053f39) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__dow-cell--today .mb-cal-week__dom {
  color: var(--rl-petrol-deep, #053f39) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__dow-cell--today::after {
  content: "Heute" !important;
  position: absolute !important;
  top: 8px !important;
  right: 9px !important;
  padding: 3px 8px !important;
  border-radius: 8px !important;
  background: var(--rl-petrol-deep, #053f39) !important;
  color: #fff !important;
  font-size: 9.5px !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__body {
  background: #fffdf9 !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__gutter {
  background: linear-gradient(180deg, #fffdf9 0%, #faf7ef 100%) !important;
  border-right-color: rgba(35, 55, 48, .12) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__hour-label {
  right: 10px !important;
  color: var(--rl-text-3, #68736f) !important;
  font-size: 11px !important;
  font-weight: 820 !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__col {
  border-right-color: rgba(35, 55, 48, .09) !important;
  background-image: linear-gradient(to bottom, rgba(35, 55, 48, .075) 1px, transparent 1px) !important;
  background-size: 100% var(--px-per-hour) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__col:hover {
  background-color: rgba(14, 143, 131, .045) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__col--today {
  background-color: rgba(14, 143, 131, .055) !important;
  box-shadow: inset 4px 0 0 var(--rl-petrol, #0e8f83), inset -1px 0 0 rgba(14, 143, 131, .14) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__col--weekend {
  background-color: rgba(35, 55, 48, .035) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__now {
  border-top-color: var(--rl-petrol, #0e8f83) !important;
  border-top-width: 2px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__now::before {
  background: var(--rl-petrol, #0e8f83) !important;
  box-shadow: 0 0 0 4px rgba(14, 143, 131, .16) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-appt,
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-month__pill {
  border-radius: 12px !important;
  color: var(--rl-text, #18231f) !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 10px 20px -16px rgba(13, 75, 68, .3), inset 0 1px 0 rgba(255, 255, 255, .86) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-month {
  min-height: 640px !important;
  background: #fffdf9 !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-month__dow-hd {
  background: linear-gradient(180deg, #fffdf9 0%, #f4f0e8 100%) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-month__dow,
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-month__cell {
  border-color: rgba(35, 55, 48, .10) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-month__dow {
  color: var(--rl-text-2, #3a4641) !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-month__cell--today {
  background: rgba(14, 143, 131, .075) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-month__cell--today .mb-cal-month__dom {
  background: var(--rl-petrol-deep, #053f39) !important;
}

@media (max-width: 1500px) {
  html[data-design="v2"] body.app-v4 #page-kalender > [data-design-version="v2"] {
    max-width: 1540px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command.mb-page-hero {
    grid-template-columns: minmax(260px, .72fr) minmax(430px, 1fr) minmax(320px, .7fr) !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-workspace {
    grid-template-columns: minmax(250px, 292px) minmax(0, 1fr) !important;
  }
}

@media (max-width: 1180px) {
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command.mb-page-hero {
    grid-template-columns: minmax(0, 1fr) minmax(330px, .78fr) !important;
    grid-template-areas:
      "intro controls"
      "focus focus" !important;
    min-height: auto !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-workspace {
    grid-template-columns: 1fr !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-rail {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__homebase,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__legend {
    grid-column: span 1 !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__view {
    min-height: 620px !important;
  }
}

@media (max-width: 900px) {
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command.mb-page-hero {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "intro"
      "focus"
      "controls" !important;
    padding: 22px !important;
    border-radius: 12px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command .mb-page-hero__intro strong {
    font-size: clamp(36px, 8vw, 50px) !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  html[data-design="v2"] body.app-v4 #app > #page-kalender.active {
    padding-inline: 10px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal--command-center {
    min-height: 0 !important;
    gap: 14px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command.mb-page-hero {
    padding: 18px !important;
    border-radius: 12px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command__period {
    grid-template-columns: 1fr auto !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command .mb-cal__title {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command .mb-page-hero__actions {
    grid-template-columns: 1fr !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-rail {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 4px !important;
    scroll-snap-type: x proximity !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-rail > * {
    flex: 0 0 min(84vw, 330px) !important;
    scroll-snap-align: start !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__view {
    min-height: 560px !important;
    border-radius: 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__hd,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__body {
    width: max(780px, 100%) !important;
    min-width: 780px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__dow-cell--gutter,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__gutter {
    position: sticky !important;
    left: 0 !important;
    z-index: 5 !important;
    background: #fffdf9 !important;
  }
}

@media (max-width: 460px) {
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command .mb-page-hero__intro strong {
    font-size: 34px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command__viewswitch {
    width: 100% !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command__viewswitch .mb-btn {
    flex: 1 1 0 !important;
  }
}

/* Calendar viewport fit: JS measures the live layout and writes
   --px-per-hour in px. These rules keep the shell flexible enough for that
   measured value to own the week grid. */
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal--command-center {
  --px-per-hour: 36px !important;
  min-height: 0 !important;
}

html[data-design="v2"] body.app-v4.has-preview-bar #app.app-visible,
html[data-design="v2"] body.app-v4.has-preview-bar #app > #page-kalender.active {
  min-height: calc(100dvh - var(--preview-bar-h, 52px)) !important;
  height: calc(100dvh - var(--preview-bar-h, 52px)) !important;
}

html[data-design="v2"] body.app-v4:not(.has-preview-bar) #app > #page-kalender.active {
  min-height: calc(100dvh - var(--mb-shell-header-height, 56px)) !important;
  height: calc(100dvh - var(--mb-shell-header-height, 56px)) !important;
  max-height: calc(100dvh - var(--mb-shell-header-height, 56px)) !important;
  overflow: hidden !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .ac-cal {
  max-width: min(100%, 1760px) !important;
  margin-inline: auto !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-workspace {
  flex: 1 1 auto !important;
  height: var(--mb-cal-workspace-max, auto) !important;
  max-height: var(--mb-cal-workspace-max, 100%) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  align-items: stretch !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__view {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__body {
  overflow-y: auto !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__hd,
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__dow-cell {
  min-height: clamp(46px, 6dvh, 64px) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-week__dow-cell {
  padding-block: clamp(7px, 1.2dvh, 12px) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-rail,
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__sidebar {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-tight {
  gap: 10px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-tight .mb-cal-command.mb-page-hero {
  min-height: 0 !important;
  padding: 13px 20px !important;
  gap: 13px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-tight .mb-page-hero__copy {
  display: none !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-tight .mb-cal-command .mb-page-hero__intro strong {
  font-size: clamp(32px, 2.8vw, 48px) !important;
  line-height: .9 !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-tight .mb-cal-command__eyebrow {
  font-size: 9.5px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-tight .mb-cal-command__focus {
  min-height: 0 !important;
  padding: 10px 14px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-tight .mb-page-hero__focus-label {
  margin-bottom: 8px !important;
  font-size: 10px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-tight .mb-cal-command__period {
  gap: 7px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-tight .mb-cal-command .mb-cal__today-btn,
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-tight .mb-cal-command .mb-cal__nav-btn {
  height: 32px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-tight .mb-cal-command .mb-cal__nav-btn {
  width: 32px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-tight .mb-cal-command .mb-cal__title {
  padding-block: 6px !important;
  font-size: 12.5px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-tight .mb-cal-command__viewswitch {
  padding: 3px !important;
  margin-top: 8px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-tight .mb-cal-command__viewswitch .mb-btn {
  min-height: 28px !important;
  padding-inline: 12px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-tight .mb-cal-command .mb-cal__search,
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-tight .mb-cal-command .mb-page-hero__actions .mb-btn {
  height: 36px !important;
  min-height: 36px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-tight .mb-cal-workspace {
  gap: 10px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-tight .mb-cal-rail,
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-tight .mb-cal__sidebar {
  max-height: 100% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-tight .mb-cal-week__hd,
html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-tight .mb-cal-week__dow-cell {
  min-height: 48px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-tight .mb-cal-week__dow-cell {
  padding: 8px 10px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-cramped .mb-cal-command.mb-page-hero {
  padding: 10px 18px !important;
  gap: 10px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-cramped .mb-cal-command .mb-page-hero__intro strong {
  font-size: clamp(29px, 2.6vw, 42px) !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-cramped .mb-cal-command__focus {
  padding: 9px 12px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-cramped .mb-cal__kpi {
  min-height: 82px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-cramped .mb-cal__kpi-value {
  font-size: 24px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-cramped .mb-minical__grid {
  gap: 4px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-cramped .mb-minical__day {
  min-height: 28px !important;
}

html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-cramped :is(.mb-minical, .mb-cal__kpi, .mb-cal__legend, .mb-cal__homebase, .mb-cal__insight) {
  padding: 8px 10px !important;
}

@media (max-height: 920px) {
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal--command-center {
    gap: 12px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command.mb-page-hero {
    min-height: 0 !important;
    padding: 16px 24px !important;
    gap: 16px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command .mb-page-hero__intro strong {
    font-size: clamp(36px, 3vw, 54px) !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command .mb-page-hero__copy {
    font-size: 12.5px !important;
    line-height: 1.3 !important;
    margin-block: 7px 0 !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command__focus {
    min-height: 0 !important;
    padding: 12px 16px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command .mb-cal__today-btn,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command .mb-cal__nav-btn {
    height: 34px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command .mb-cal__search,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command .mb-page-hero__actions .mb-btn {
    height: 40px !important;
    min-height: 40px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-rail,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__sidebar {
    min-height: 0 !important;
    overflow-y: auto !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__kpi {
    min-height: 98px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender :is(.mb-minical, .mb-cal__kpi, .mb-cal__legend, .mb-cal__homebase, .mb-cal__insight) {
    padding: 9px 11px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-appt {
    padding: 3px 7px !important;
    gap: 0 !important;
    line-height: 1.16 !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-appt__time {
    font-size: 10px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-appt__title {
    font-size: 10.5px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-appt__sub {
    display: none !important;
  }
}

/* Auth landing first-paint relaunch lock. app.html still loads older auth
   layers for the pre-login tabs; this late scoped block keeps that surface
   out of the abandoned brown/dark palette without touching authenticated UI. */
html[data-design="v2"] body.app-v4 #auth-landing {
  color-scheme: light;
  background:
    radial-gradient(circle at 18% -8%, rgba(14,143,131,.13), transparent 34%),
    radial-gradient(circle at 88% 8%, rgba(56,200,181,.08), transparent 30%),
    linear-gradient(145deg, #f8fdfb 0%, #f7faf8 46%, #eef8f6 100%) !important;
}

html[data-design="v2"] body.app-v4 #auth-landing .al-left {
  background:
    radial-gradient(900px 600px at 18% 30%, rgba(14,143,131,.16), transparent 60%),
    radial-gradient(800px 500px at 82% 60%, rgba(56,200,181,.10), transparent 60%),
    linear-gradient(160deg, rgba(255,255,255,.96), rgba(247,250,248,.88) 62%, rgba(238,247,244,.92)) !important;
}

html[data-design="v2"] body.app-v4 #auth-landing .al-deco-circle {
  display: none !important;
}

html[data-design="v2"] body.app-v4 #auth-landing .al-left .al-headline,
html[data-design="v2"] body.app-v4 #auth-landing .al-left .al-feat-t,
html[data-design="v2"] body.app-v4 #auth-landing .al-form-title {
  color: var(--rl-text) !important;
}

html[data-design="v2"] body.app-v4 #auth-landing .al-left .al-headline span {
  background: var(--rl-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

html[data-design="v2"] body.app-v4 #auth-landing .al-left .al-sub,
html[data-design="v2"] body.app-v4 #auth-landing .al-left .al-feat-s,
html[data-design="v2"] body.app-v4 #auth-landing .al-left .al-trust-item,
html[data-design="v2"] body.app-v4 #auth-landing .al-form-sub {
  color: var(--rl-text-2) !important;
}

html[data-design="v2"] body.app-v4 #auth-landing .al-left .al-badge,
html[data-design="v2"] body.app-v4 #auth-landing .al-left .al-feat-ic {
  background: rgba(14,143,131,.12) !important;
  border-color: rgba(14,143,131,.24) !important;
  color: var(--rl-petrol) !important;
}

html[data-design="v2"] body.app-v4 #auth-landing .al-left .al-trust-item svg {
  color: var(--rl-petrol) !important;
}

html[data-design="v2"] body.app-v4 #auth-landing .al-left .al-version {
  color: var(--rl-text-4) !important;
}

html[data-design="v2"] body.app-v4 #auth-landing .al-right,
html[data-design="v2"] body.app-v4 #auth-landing .al-form-wrap,
html[data-design="v2"] body.app-v4 #auth-landing .al-input,
html[data-design="v2"] body.app-v4 #auth-landing .al-btn-google {
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.74)),
    linear-gradient(120deg, rgba(14,143,131,.065), transparent 52%) !important;
  border-color: rgba(42,50,45,.12) !important;
  box-shadow: 0 18px 52px rgba(25,39,54,.09) !important;
  color: var(--rl-text) !important;
}

html[data-design="v2"] body.app-v4 #auth-landing .al-tab.active,
html[data-design="v2"] body.app-v4 #auth-landing .tseg.active {
  color: var(--rl-text) !important;
  background: #ffffff !important;
}

html[data-design="v2"] body.app-v4 #auth-landing .al-btn-primary {
  background: var(--rl-gradient) !important;
  color: #ffffff !important;
  box-shadow: 0 16px 34px rgba(14,143,131,.20) !important;
}

/* ==========================================================================
   SETTINGS WORKSPACE RELAUNCH
   ========================================================================== */
html[data-design="v2"] body.app-v4 #page-einstellungen {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-shell {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero.mb-page-hero {
  display: grid !important;
  grid-template-columns: minmax(270px, .74fr) minmax(350px, .94fr) minmax(260px, .62fr) !important;
  grid-template-areas: "intro focus controls" !important;
  align-items: stretch !important;
  column-gap: clamp(20px, 2.1vw, 30px) !important;
  row-gap: 18px !important;
  min-height: 208px !important;
  margin: 0 !important;
  padding: clamp(26px, 2.25vw, 36px) !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at top right, rgba(121,231,214,.22), transparent 34%),
    linear-gradient(135deg, rgba(7,63,58,.97), rgba(12,103,94,.95) 52%, rgba(32,152,137,.90)),
    linear-gradient(90deg, rgba(255,255,255,.10), transparent 55%) !important;
  box-shadow: 0 8px 18px -10px rgba(7,79,70,.18), 0 22px 42px -18px rgba(7,79,70,.28), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__eyebrow {
  color: rgba(255,255,255,.72) !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__focus {
  gap: 16px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__focus-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__focus-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__focus-title {
  color: #ffffff !important;
  font-size: 24px !important;
  line-height: 1.08 !important;
  font-weight: 820 !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__focus-text {
  margin: 0 !important;
  color: rgba(255,255,255,.78) !important;
  font-size: 13.25px !important;
  line-height: 1.5 !important;
  font-weight: 620 !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__focus-status {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.88) !important;
  font-size: 11px !important;
  font-weight: 820 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__focus-status[data-state="dirty"] {
  background: rgba(255,191,87,.18) !important;
  border-color: rgba(255,191,87,.28) !important;
  color: #fff4d1 !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__focus-status[data-state="saved"] {
  background: rgba(76,226,162,.18) !important;
  border-color: rgba(76,226,162,.30) !important;
  color: #eafff6 !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__focus-status[data-state="saving"] {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.34) !important;
  color: #ffffff !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__focus-chips,
html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-overview__chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__chip,
html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-overview__chip {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 760 !important;
  letter-spacing: .03em !important;
  white-space: nowrap !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__chip {
  border: 1px solid rgba(255,255,255,.20) !important;
  background: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.88) !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__context-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  padding: 18px 18px 16px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14) !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__context-card strong {
  color: #ffffff !important;
  font-size: 17px !important;
  line-height: 1.1 !important;
  font-weight: 790 !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__context-card p,
html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__context-label {
  margin: 0 !important;
  color: rgba(255,255,255,.74) !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__context-label {
  font-size: 11px !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__controls .mb-page-hero__actions {
  grid-template-columns: 1fr !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__controls .mb-page-hero__actions .mb-btn {
  width: 100% !important;
  min-height: 48px !important;
  justify-content: center !important;
  border-radius: 8px !important;
  border-color: rgba(255,255,255,.26) !important;
  background: rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.92) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16) !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-workspace {
  display: grid !important;
  grid-template-columns: minmax(278px, 316px) minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: start !important;
}

/* Phase 1 (Surface-Language): set-section ist aus dem Bundle herausgenommen
   und bekommt unten eine ruhigere, leiserer T1-Surface zugewiesen.
   Rail, Group-Overview und Save-Bar behalten ihre bisherige Identitaet —
   die werden ggf. in Phase 2 / später neu eingeordnet. */
html[data-design="v2"] body.app-v4 #page-einstellungen .set-rail,
html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-overview,
html[data-design="v2"] body.app-v4 #page-einstellungen .set-save-bar {
  border: 1px solid rgba(35,55,48,.12) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.82)),
    linear-gradient(135deg, rgba(14,143,131,.05), transparent 58%) !important;
  box-shadow: 0 18px 42px rgba(28,42,36,.08) !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-rail {
  position: sticky !important;
  top: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 18px !important;
  border-radius: 12px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-rail__header {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(35,55,48,.10) !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-rail__header strong {
  color: var(--rl-text) !important;
  font-size: 22px !important;
  line-height: 1.02 !important;
  font-weight: 820 !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-rail__header p,
html[data-design="v2"] body.app-v4 #page-einstellungen .set-nav-group__meta,
html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-overview__head p,
html[data-design="v2"] body.app-v4 #page-einstellungen .set-save-bar__copy {
  margin: 0 !important;
  color: var(--rl-text-2) !important;
  font-size: 12.75px !important;
  line-height: 1.5 !important;
  font-weight: 560 !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-rail__eyebrow,
html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-overview__eyebrow {
  color: var(--rl-text-3) !important;
  font-size: 10.5px !important;
  line-height: 1.15 !important;
  font-weight: 840 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-nav-cluster {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(35,55,48,.10) !important;
  background: rgba(250,252,251,.88) !important;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-nav-cluster[data-active="true"] {
  border-color: rgba(14,143,131,.26) !important;
  background:
    linear-gradient(135deg, rgba(14,143,131,.08), rgba(255,255,255,.92)),
    rgba(255,255,255,.96) !important;
  box-shadow: 0 16px 34px rgba(14,143,131,.10) !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-nav-cluster--danger[data-active="true"] {
  border-color: rgba(217,64,64,.26) !important;
  background:
    linear-gradient(135deg, rgba(217,64,64,.06), rgba(255,255,255,.92)),
    rgba(255,255,255,.96) !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-nav-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-nav-group__label {
  color: var(--rl-text) !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 790 !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-nav-cluster__items {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background: rgba(246,248,247,.9) !important;
  color: var(--rl-text-2) !important;
  font-size: 13px !important;
  font-weight: 670 !important;
  text-align: left !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65) !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-nav-item svg {
  flex: 0 0 auto !important;
  width: 15px !important;
  height: 15px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-nav-item span:first-of-type {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-nav-item.active {
  border-color: rgba(14,143,131,.18) !important;
  background:
    linear-gradient(135deg, rgba(14,143,131,.10), rgba(255,255,255,.96)),
    rgba(255,255,255,.96) !important;
  color: var(--rl-petrol) !important;
  box-shadow: 0 10px 22px rgba(14,143,131,.10), inset 0 1px 0 rgba(255,255,255,.74) !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-nav-danger.active,
html[data-design="v2"] body.app-v4 #page-einstellungen .set-nav-danger {
  color: #b54141 !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .sup-nav-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 7px !important;
  border-radius: 8px !important;
  background: rgba(14,143,131,.10) !important;
  color: var(--rl-petrol) !important;
  font-size: 11px !important;
  font-weight: 820 !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-main {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  min-width: 0 !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-overview {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 22px 24px !important;
  border-radius: 12px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-overview__head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-overview__head h2 {
  margin: 6px 0 8px !important;
  color: var(--rl-text) !important;
  font-size: 30px !important;
  line-height: 1.02 !important;
  font-weight: 830 !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-overview__meta {
  flex: 0 0 auto !important;
  min-width: 118px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 4px !important;
  text-align: right !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-overview__meta-label {
  color: var(--rl-text-3) !important;
  font-size: 10.5px !important;
  font-weight: 840 !important;
  letter-spacing: .11em !important;
  text-transform: uppercase !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-overview__meta strong {
  color: var(--rl-text) !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 820 !important;
  white-space: nowrap !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-overview__chip {
  border: 1px solid rgba(14,143,131,.14) !important;
  background: rgba(14,143,131,.07) !important;
  color: var(--rl-petrol) !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-section-grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

/* Phase 1 — Section ist die T1-Workspace-Surface eines Setting-Blocks.
   Frueher: 28px Radius, gemeinsamer Gradient-BG mit Rail/Overview/Save-Bar,
   Border-Bottom im Head, eigener Frame im inneren .set-grp.
   Neu: ruhigere Single-Frame-Surface, weniger Bubble, leiserer Shadow.
   Hierarchie entsteht über Typografie und Padding, nicht über Doppelrahmen. */
html[data-design="v2"] body.app-v4 #page-einstellungen .set-section {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  border: 1px solid var(--surface-border, rgba(28,42,36,.08)) !important;
  background: var(--surface, #ffffff) !important;
  border-radius: var(--r-lg, 14px) !important;
  box-shadow: var(--shadow-2, 0 4px 14px -6px rgba(28,42,36,.10)) !important;
  overflow: hidden !important;
  align-self: start !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-section--half {
  grid-column: span 6 !important;
}

/* Phase 1 — Section-Head: kein Border-Bottom, kein eigener Gradient.
   Der Head ist nicht mehr "Sub-Surface", sondern Teil der gleichen
   T1-Fläche. Hierarchie zwischen Head und Body kommt nur noch über
   Padding-Rhythmus und Typografie-Gewichtung (Title 17px, Sub 13px). */
html[data-design="v2"] body.app-v4 #page-einstellungen .set-sec-head {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 22px 24px 14px !important;
  border-bottom: 0 !important;
  background: transparent !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-sec-ico {
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(14,143,131,.14) !important;
  background: rgba(14,143,131,.08) !important;
  color: var(--rl-petrol) !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-sec-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-sec-title {
  color: var(--rl-text) !important;
  font-size: 17px !important;
  line-height: 1.15 !important;
  font-weight: 810 !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-sec-sub {
  color: var(--rl-text-2) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 560 !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-sec-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  padding: 22px 24px 24px !important;
}

/* Phase 1 — Group: war früher rounded 22px Mini-Card mit eigener
   BG und Border (Doppel-Frame innerhalb der Section). Wird zu einem
   Padding-Rhythm-Block ohne eigene Surface. Trenner zwischen
   consecutive Groups ist eine einzelne 1px-Linie — keine Doppelrahmen.
   Der erste Group-Block bekommt 0 Padding-Top, damit er ohne Luecke
   an den Section-Head andockt. */
html[data-design="v2"] body.app-v4 #page-einstellungen .set-grp {
  padding: 20px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
html[data-design="v2"] body.app-v4 #page-einstellungen .set-grp:first-child {
  padding-top: 0 !important;
}
html[data-design="v2"] body.app-v4 #page-einstellungen .set-grp:last-child {
  padding-bottom: 0 !important;
}
html[data-design="v2"] body.app-v4 #page-einstellungen .set-grp + .set-grp {
  border-top: 1px solid var(--surface-border, rgba(28,42,36,.08)) !important;
}
/* .slbl ist der Gruppen-Titel innerhalb einer .set-grp. Wird zum
   ruhigen Sub-Header — gleiche Rolle wie ein Eyebrow, etwas kraeftiger,
   weil er als einziges Element die Gruppe noch identifiziert
   (kein eigener Box-Frame mehr). */
html[data-design="v2"] body.app-v4 #page-einstellungen .set-grp > .slbl {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  color: var(--rl-text, #1c2a24) !important;
  font-size: 13px !important;
  font-weight: 720 !important;
  letter-spacing: .02em !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-grp .field + .field,
html[data-design="v2"] body.app-v4 #page-einstellungen .set-sec-body .field + .field {
  margin-top: 14px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .slbl {
  margin-bottom: 12px !important;
  color: var(--rl-text) !important;
  font-size: 14px !important;
  font-weight: 770 !important;
}

/* Phase 1 — Danger-Section: rote Akzentuierung als sehr leise Toenung
   auf der neuen ruhigen Section-Surface. Kein voller Gradient mehr. */
html[data-design="v2"] body.app-v4 #page-einstellungen .set-danger-zone {
  border-color: rgba(217,64,64,.22) !important;
  background:
    linear-gradient(180deg, rgba(255,251,251,.50), rgba(255,250,250,.40)),
    var(--surface, #ffffff) !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-save-bar {
  position: sticky !important;
  bottom: 18px !important;
  z-index: 8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 16px 18px !important;
  border-radius: 12px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-save-bar__meta {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-save-bar__actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-save-bar__actions .btn {
  min-height: 44px !important;
  padding: 0 18px !important;
  border-radius: 8px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-save-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--rl-text) !important;
  font-size: 13px !important;
  font-weight: 760 !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-save-status .dot {
  width: 9px !important;
  height: 9px !important;
  border-radius: 8px !important;
  background: rgba(77,100,90,.36) !important;
  box-shadow: 0 0 0 4px rgba(77,100,90,.08) !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-save-status.ok .dot {
  background: #1fbf78 !important;
  box-shadow: 0 0 0 4px rgba(31,191,120,.12) !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-save-status.dirty .dot {
  background: #f0ad31 !important;
  box-shadow: 0 0 0 4px rgba(240,173,49,.12) !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen #set-branding { order: 10 !important; }
html[data-design="v2"] body.app-v4 #page-einstellungen #set-buchungslink { order: 20 !important; }
html[data-design="v2"] body.app-v4 #page-einstellungen #set-rechtliches { order: 30 !important; }
html[data-design="v2"] body.app-v4 #page-einstellungen #set-allgemein { order: 10 !important; }
html[data-design="v2"] body.app-v4 #page-einstellungen #set-oeffnungszeiten { order: 11 !important; }
html[data-design="v2"] body.app-v4 #page-einstellungen #set-buchung { order: 20 !important; }
html[data-design="v2"] body.app-v4 #page-einstellungen #set-kalenderplus { order: 30 !important; }
html[data-design="v2"] body.app-v4 #page-einstellungen #set-nachrichten { order: 10 !important; }
html[data-design="v2"] body.app-v4 #page-einstellungen #set-kontakt { order: 20 !important; }
html[data-design="v2"] body.app-v4 #page-einstellungen #set-support { order: 30 !important; }
html[data-design="v2"] body.app-v4 #page-einstellungen #set-zahlungen { order: 10 !important; }
html[data-design="v2"] body.app-v4 #page-einstellungen #set-abonnement { order: 11 !important; }
html[data-design="v2"] body.app-v4 #page-einstellungen #set-referral { order: 20 !important; }
html[data-design="v2"] body.app-v4 #page-einstellungen #set-tankerkoenig { order: 10 !important; }
html[data-design="v2"] body.app-v4 #page-einstellungen #set-datensicherung { order: 11 !important; }
html[data-design="v2"] body.app-v4 #page-einstellungen #set-danger { order: 20 !important; }

html[data-design="v2"] body.app-v4 #page-einstellungen #set-sidebar[data-active-group] .set-nav-item[data-set-group] {
  display: none !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen #set-sidebar[data-active-group="marke-auftritt"] .set-nav-item[data-set-group="marke-auftritt"],
html[data-design="v2"] body.app-v4 #page-einstellungen #set-sidebar[data-active-group="betrieb-buchung"] .set-nav-item[data-set-group="betrieb-buchung"],
html[data-design="v2"] body.app-v4 #page-einstellungen #set-sidebar[data-active-group="kommunikation-kontakt"] .set-nav-item[data-set-group="kommunikation-kontakt"],
html[data-design="v2"] body.app-v4 #page-einstellungen #set-sidebar[data-active-group="abrechnung-wachstum"] .set-nav-item[data-set-group="abrechnung-wachstum"],
html[data-design="v2"] body.app-v4 #page-einstellungen #set-sidebar[data-active-group="system-sicherheit"] .set-nav-item[data-set-group="system-sicherheit"] {
  display: flex !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen:has(#set-sidebar[data-active-group]) .set-section[data-set-group] {
  display: none !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen:has(#set-sidebar[data-active-group="marke-auftritt"]) .set-section[data-set-group="marke-auftritt"],
html[data-design="v2"] body.app-v4 #page-einstellungen:has(#set-sidebar[data-active-group="betrieb-buchung"]) .set-section[data-set-group="betrieb-buchung"],
html[data-design="v2"] body.app-v4 #page-einstellungen:has(#set-sidebar[data-active-group="kommunikation-kontakt"]) .set-section[data-set-group="kommunikation-kontakt"],
html[data-design="v2"] body.app-v4 #page-einstellungen:has(#set-sidebar[data-active-group="abrechnung-wachstum"]) .set-section[data-set-group="abrechnung-wachstum"],
html[data-design="v2"] body.app-v4 #page-einstellungen:has(#set-sidebar[data-active-group="system-sicherheit"]) .set-section[data-set-group="system-sicherheit"] {
  display: block !important;
}

@media (max-width: 1340px) {
  html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero.mb-page-hero {
    grid-template-columns: minmax(0, 1fr) minmax(320px, .78fr) !important;
    grid-template-areas:
      "intro controls"
      "focus focus" !important;
    min-height: auto !important;
  }
}

@media (max-width: 1180px) {
  html[data-design="v2"] body.app-v4 #page-einstellungen .set-workspace {
    grid-template-columns: 1fr !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-rail {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(240px, 1fr)) !important;
    align-items: stretch !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-rail__header {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 900px) {
  html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero.mb-page-hero {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "intro"
      "focus"
      "controls" !important;
    padding: 22px !important;
    border-radius: 12px !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-overview__head,
  html[data-design="v2"] body.app-v4 #page-einstellungen .set-save-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-overview__meta {
    align-items: flex-start !important;
    text-align: left !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-section--half {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 640px) {
  html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero.mb-page-hero,
  html[data-design="v2"] body.app-v4 #page-einstellungen .set-rail,
  html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-overview,
  html[data-design="v2"] body.app-v4 #page-einstellungen .set-sec-head,
  html[data-design="v2"] body.app-v4 #page-einstellungen .set-sec-body,
  html[data-design="v2"] body.app-v4 #page-einstellungen .set-save-bar {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-rail {
    display: flex !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-nav-cluster {
    padding: 12px !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-overview__head h2 {
    font-size: 24px !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-save-bar__actions {
    width: 100% !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-save-bar__actions .btn {
    flex: 1 1 0 !important;
    justify-content: center !important;
  }
}

/* ==========================================================================
   SETTINGS WORKSPACE REFINEMENT PASS
   ========================================================================== */
html[data-design="v2"] body.app-v4 #page-einstellungen .set-shell {
  gap: 16px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero.mb-page-hero {
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas: "intro controls" !important;
  align-items: center !important;
  min-height: 0 !important;
  padding: clamp(22px, 2vw, 30px) !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at top right, rgba(121,231,214,.18), transparent 34%),
    linear-gradient(135deg, rgba(8,70,64,.96), rgba(12,104,94,.93) 56%, rgba(28,137,125,.88)) !important;
  box-shadow: 0 12px 28px rgba(7,79,70,.16), 0 22px 40px rgba(7,79,70,.14), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__intro {
  max-width: 620px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__intro .mb-page-hero__copy {
  max-width: 46ch !important;
  color: rgba(255,255,255,.80) !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__controls {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__context-card {
  min-width: 230px !important;
  gap: 6px !important;
  padding: 14px 16px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.12) !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__context-card strong {
  font-size: 16px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__context-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__context-save {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.88) !important;
  font-size: 10.5px !important;
  font-weight: 820 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__context-save[data-state="dirty"] {
  background: rgba(255,191,87,.16) !important;
  border-color: rgba(255,191,87,.28) !important;
  color: #fff2ca !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__context-save[data-state="saved"] {
  background: rgba(76,226,162,.16) !important;
  border-color: rgba(76,226,162,.28) !important;
  color: #ebfff6 !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__controls .mb-page-hero__actions {
  display: flex !important;
  align-items: center !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__controls .mb-page-hero__actions .mb-btn {
  width: auto !important;
  min-width: 112px !important;
  min-height: 44px !important;
  padding: 0 18px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-workspace {
  grid-template-columns: minmax(296px, 312px) minmax(0, 1fr) !important;
  gap: 20px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-rail {
  position: relative !important;
  top: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-rail__inner {
  position: relative !important;
  top: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  max-height: calc(100dvh - 36px) !important;
  overflow: auto !important;
  padding: 16px !important;
  border: 1px solid rgba(35,55,48,.12) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.84)),
    linear-gradient(135deg, rgba(14,143,131,.05), transparent 58%) !important;
  box-shadow: 0 18px 42px rgba(28,42,36,.08) !important;
  scrollbar-width: thin !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-rail__header {
  gap: 4px !important;
  padding: 0 0 10px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-rail__header strong {
  font-size: 18px !important;
  line-height: 1.05 !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-nav-cluster {
  gap: 8px !important;
  padding: 10px !important;
  border-radius: 10px !important;
  background: rgba(250,252,251,.92) !important;
  box-shadow: none !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-nav-cluster[data-active="true"] {
  box-shadow: 0 12px 24px rgba(14,143,131,.10) !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-nav-group {
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 42px !important;
  padding: 0 4px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-nav-group__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(14,143,131,.14) !important;
  background: rgba(14,143,131,.08) !important;
  color: var(--rl-petrol) !important;
  flex: 0 0 auto !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-nav-group__icon svg {
  width: 17px !important;
  height: 17px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-nav-group__label {
  font-size: 14px !important;
  line-height: 1.15 !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-nav-cluster__items {
  gap: 6px !important;
  padding-left: 4px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-nav-item {
  min-height: 40px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  background: rgba(246,248,247,.78) !important;
  color: var(--rl-text-2) !important;
  font-size: 12.5px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-nav-item.active {
  background:
    linear-gradient(135deg, rgba(14,143,131,.11), rgba(255,255,255,.96)),
    rgba(255,255,255,.96) !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-main {
  gap: 16px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-overview {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 18px !important;
  border-radius: 10px !important;
  backdrop-filter: blur(18px) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.88)),
    linear-gradient(135deg, rgba(14,143,131,.06), transparent 58%) !important;
  box-shadow: 0 14px 30px rgba(28,42,36,.10) !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-overview__head {
  align-items: center !important;
  gap: 10px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-overview__head strong {
  color: var(--rl-text) !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
  font-weight: 810 !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-overview__meta {
  min-width: 0 !important;
  color: var(--rl-text-3) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 780 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-overview__nav {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-switch {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(14,143,131,.14) !important;
  background: rgba(249,251,250,.92) !important;
  color: var(--rl-text-2) !important;
  font-size: 11.5px !important;
  font-weight: 760 !important;
  white-space: nowrap !important;
  transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-switch.active,
html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-switch:hover {
  border-color: rgba(14,143,131,.22) !important;
  background: rgba(14,143,131,.10) !important;
  color: var(--rl-petrol) !important;
  box-shadow: 0 8px 18px rgba(14,143,131,.08) !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-section-grid {
  gap: 16px !important;
}

/* Phase 1 — Block-2-Overrides synchronisiert mit der ruhigeren T1-Surface
   aus Block 1. Radius einheitlich --r-lg (14), Groups bleiben Frame-los. */
html[data-design="v2"] body.app-v4 #page-einstellungen .set-section {
  border-radius: var(--r-lg, 14px) !important;
  scroll-margin-top: 108px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-sec-head {
  gap: 14px !important;
  padding: 18px 20px 12px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-sec-ico {
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--r-md, 10px) !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-sec-title {
  font-size: 16px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-sec-sub {
  font-size: 12.25px !important;
  line-height: 1.45 !important;
  max-width: 60ch !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-sec-body {
  gap: 0 !important;
  padding: 4px 20px 20px !important;
}

/* Phase 1 — Groups bleiben Frame-los; Radius bleibt 0, Padding-Rhythmik
   wird aus Block 1 vererbt. Hier nichts mehr aufzwingen. */

html[data-design="v2"] body.app-v4 #page-einstellungen .set-subnav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: -2px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-subnav__item {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(35,55,48,.10) !important;
  background: rgba(249,251,250,.9) !important;
  color: var(--rl-text-2) !important;
  font-size: 11.5px !important;
  font-weight: 760 !important;
  white-space: nowrap !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen #set-rechtliches textarea {
  min-height: 132px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen #set-rechtliches .set-grp[id] {
  scroll-margin-top: 154px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-save-bar {
  bottom: 16px !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  border-radius: 10px !important;
}

html[data-design="v2"] body.app-v4 #page-einstellungen .set-save-bar__copy {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

@media (max-width: 1340px) {
  html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero.mb-page-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "intro"
      "controls" !important;
    gap: 16px !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__controls {
    justify-content: space-between !important;
    flex-wrap: wrap !important;
  }
}

@media (max-width: 1180px) {
  html[data-design="v2"] body.app-v4 #page-einstellungen .set-workspace {
    grid-template-columns: 1fr !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-rail__inner {
    position: static !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(240px, 1fr)) !important;
    align-items: stretch !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-rail__header {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 900px) {
  html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-overview {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-overview__head {
    flex-wrap: wrap !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-overview__nav {
    justify-content: flex-start !important;
  }
}

@media (max-width: 640px) {
  html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero.mb-page-hero {
    padding: 20px !important;
    border-radius: 12px !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__controls,
  html[data-design="v2"] body.app-v4 #page-einstellungen .set-save-bar__actions {
    width: 100% !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__context-card {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-rail__inner {
    display: flex !important;
    padding: 14px !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-overview {
    padding: 12px 14px !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-overview__head strong {
    font-size: 16px !important;
  }
}

/* ==========================================================================
   App sidebar relaunch — calm, dense, always-open groups (Desktop ≥641px)
   Scope: app.html in v2 (body.app-v4). Markup + JS untouched. The legacy
   accordion still runs internally but is visually neutralised; older
   premium overrides in 45-modern-premium.css are out-specified here so
   the sidebar matches Dashboard / Settings rail aesthetic.
   ========================================================================== */
@media (min-width: 641px) {

  /* A. Suppress conflicting ::before group labels from 45-modern-premium.css.
     The in-DOM group header markup ("Kunden", "Leistungen") becomes the
     section label; the older pseudo-labels would render duplicates. The
     non-existent #group-buchungen / #group-finanzen selectors are no-ops
     but kept here so a future markup change can't reintroduce a clash.
     #tab-benutzer::before "System" is intentionally NOT suppressed — it
     labels the system tabs and has no in-DOM duplicate. */
  html[data-design="v2"] body.app-v4 #group-kunden::before,
  html[data-design="v2"] body.app-v4 #group-leistungen::before,
  html[data-design="v2"] body.app-v4 #group-buchungen::before,
  html[data-design="v2"] body.app-v4 #group-finanzen::before {
    display: none !important;
  }

  /* B. Brand block — tighter, lets the nav start sooner. */
  html[data-design="v2"] body.app-v4 .nav-brand {
    min-height: 44px !important;
    padding: 8px 14px !important;
  }

  /* Sidebar rhythm — quiet padding top/bottom, 1px gap between items. */
  html[data-design="v2"] body.app-v4 .nav-tabs {
    padding: 10px 10px 14px !important;
    gap: 1px !important;
  }

  /* C. Top-level tab rhythm — denser pill, clearer 2-tier vs sub-items. */
  html[data-design="v2"] body.app-v4 .nav-tabs > .ntab {
    min-height: 36px !important;
    padding: 7px 12px !important;
    font-size: 12.5px !important;
    font-weight: 660 !important;
    letter-spacing: -.005em !important;
    border-radius: 10px !important;
  }

  /* D. Flat icons — no mint pill, no border, no shadow. Active state
     re-tints the colour in F. */
  html[data-design="v2"] body.app-v4 .ntab svg,
  html[data-design="v2"] body.app-v4 .ndropitem svg {
    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--rl-text-3) !important;
    transition: color .18s ease;
  }

  /* E. Calm hover — kills the translateX wiggle and the busy gradient. */
  html[data-design="v2"] body.app-v4 .ntab:hover,
  html[data-design="v2"] body.app-v4 .ndropitem:hover {
    transform: none !important;
    background: rgba(14,143,131,.06) !important;
    border-color: transparent !important;
    color: var(--rl-text) !important;
    box-shadow: none !important;
  }
  html[data-design="v2"] body.app-v4 .ntab:hover svg,
  html[data-design="v2"] body.app-v4 .ndropitem:hover svg {
    color: var(--rl-petrol) !important;
  }

  /* F. Single calm active vocabulary — top-level, sub-items, mobile-more,
     mobile drawer all read the same. Replaces the brighter active state
     in 45-modern-premium.css:1363+. Tighter shadow keeps it pill-shaped
     instead of haloed. */
  html[data-design="v2"] body.app-v4 .ntab.active,
  html[data-design="v2"] body.app-v4 .ntab-group > .ntab.active,
  html[data-design="v2"] body.app-v4 .ndropitem.active,
  html[data-design="v2"] body.app-v4 .mob-drawer-item.mob-active,
  html[data-design="v2"] body.app-v4 .mobile-more-item.is-active {
    background:
      linear-gradient(135deg, rgba(255,255,255,.96), rgba(247,244,236,.82)),
      var(--rl-gradient-soft) !important;
    border: 1px solid var(--rl-line-accent) !important;
    border-left: 2px solid var(--rl-petrol) !important;
    color: var(--rl-petrol) !important;
    box-shadow: 0 4px 12px rgba(14,143,131,.08) !important;
    transform: none !important;
  }
  html[data-design="v2"] body.app-v4 .ntab.active svg,
  html[data-design="v2"] body.app-v4 .ndropitem.active svg,
  html[data-design="v2"] body.app-v4 .mob-drawer-item.mob-active svg,
  html[data-design="v2"] body.app-v4 .mobile-more-item.is-active svg {
    color: var(--rl-petrol) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* G. Group header → tight uppercase eyebrow. pointer-events:none keeps
     the click handler from doing visible work; the legacy accordion JS
     still toggles .open + inline display, but neither has a visual
     effect now. Smaller font + padding so the label doesn't dominate. */
  html[data-design="v2"] body.app-v4 .ntab-group > .ntab,
  html[data-design="v2"] body.app-v4 .ntab-group.open > .ntab,
  html[data-design="v2"] body.app-v4 .ntab-group > .ntab.active {
    min-height: 0 !important;
    padding: 6px 14px 2px !important;
    margin: 0 !important;
    font-size: 9px !important;
    font-weight: 760 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: var(--rl-text-4) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: default !important;
    pointer-events: none !important;
    transform: none !important;
  }
  html[data-design="v2"] body.app-v4 .ntab-group > .ntab > svg {
    display: none !important;
  }

  /* H. Sub-items — denser than today, indented, first-class nav entries.
     The display:block !important overrides the inline display:none that
     05-nav.js writes when the legacy auto-collapse fires on another
     group's header. */
  html[data-design="v2"] body.app-v4 .ntab-group > .ndropdown {
    display: block !important;
    position: static !important;
    padding: 0 0 4px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  html[data-design="v2"] body.app-v4 .ntab-group > .ndropdown > .ndropitem {
    width: 100% !important;
    margin: 1px 0 !important;
    padding: 6px 12px 6px 16px !important;
    min-height: 32px !important;
    border: 1px solid transparent !important;
    border-left: 2px solid transparent !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--rl-text-3) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* I. Group rhythm — consistent 4px margin between groups so the eyebrow
     labels alone signal the section breaks. When a group is hidden by
     auth.js (display:none on the wrapper), its margin/border vanishes
     with it. */
  html[data-design="v2"] body.app-v4 #group-leistungen,
  html[data-design="v2"] body.app-v4 #group-kommunikation,
  html[data-design="v2"] body.app-v4 #group-verkauf {
    margin-top: 4px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  /* J. Footer block — drop the dead design-seg, tighten everything else
     so the account zone reads as a stable, unobtrusive base, not a
     stacked control panel. */
  html[data-design="v2"] body.app-v4 .nav-right {
    padding: 6px !important;
    gap: 4px !important;
    border-radius: 10px !important;
  }
  html[data-design="v2"] body.app-v4 .design-seg {
    display: none !important;
  }
  html[data-design="v2"] body.app-v4 .nav-user,
  html[data-design="v2"] body.app-v4 #nav-settings-btn,
  html[data-design="v2"] body.app-v4 #nav-logout-btn {
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 10px !important;
  }
  html[data-design="v2"] body.app-v4 .nav-user .nav-un,
  html[data-design="v2"] body.app-v4 #nav-settings-btn .nav-settings-label,
  html[data-design="v2"] body.app-v4 #nav-logout-btn .nav-settings-label {
    font-size: 11.5px !important;
    font-weight: 600 !important;
  }
  html[data-design="v2"] body.app-v4 .theme-seg {
    height: 26px !important;
    border-radius: 10px !important;
    padding: 2px !important;
  }
  html[data-design="v2"] body.app-v4 .tseg {
    min-height: 22px !important;
    padding: 3px 6px !important;
    font-size: 9.5px !important;
    border-radius: 8px !important;
  }

  /* K. Badges — calm by default, integrated petrol when active. The idle
     state drops the border + shrinks the pill so a "0" or "1" doesn't
     read as urgent. Hover and active lift the tint so attention follows
     the row, not the badge alone. */
  html[data-design="v2"] body.app-v4 .nav-tabs .nbadge,
  html[data-design="v2"] body.app-v4 .nav-tabs .inbox-nav-badge {
    min-height: 16px !important;
    padding: 1px 6px !important;
    font-size: 10px !important;
    font-weight: 720 !important;
    line-height: 14px !important;
    border-radius: 8px !important;
    border: 0 !important;
    background: rgba(14,143,131,.07) !important;
    color: var(--rl-text-3) !important;
    box-shadow: none !important;
  }
  html[data-design="v2"] body.app-v4 .ntab:hover .nbadge,
  html[data-design="v2"] body.app-v4 .ndropitem:hover .nbadge,
  html[data-design="v2"] body.app-v4 .ndropitem:hover .inbox-nav-badge {
    background: rgba(14,143,131,.12) !important;
    color: var(--rl-petrol) !important;
  }
  html[data-design="v2"] body.app-v4 .ntab.active .nbadge,
  html[data-design="v2"] body.app-v4 .ndropitem.active .nbadge,
  html[data-design="v2"] body.app-v4 .ndropitem.active .inbox-nav-badge {
    background: rgba(14,143,131,.14) !important;
    color: var(--rl-petrol) !important;
    border: 0 !important;
  }
}

/* ==========================================================================
   IA Rebuild Step 1 — collapse subsections into single sidebar entries.
   The four umbrella groups (Leistungen, Kommunikation, Verkauf, Team)
   become single clickable nav entries that route to the section's default
   sub-page. The sub-items remain in the DOM (auth.js + mobile drawer
   still read their style.display) but are CSS-hidden on desktop.
   The pill-bar primitive lives below for in-page local navigation.
   ========================================================================== */
@media (min-width: 641px) {

  /* Restore the group header to a regular top-level nav rhythm.
     Block G earlier in this file styles `.ntab-group > .ntab` as a tiny
     uppercase eyebrow — that fits flat groups (Kunden/Anfragen). For the
     four collapsed umbrellas the header IS the destination, so it needs
     full top-level chrome. */
  html[data-design="v2"] body.app-v4 .ntab-group#group-leistungen > .ntab,
  html[data-design="v2"] body.app-v4 .ntab-group#group-kommunikation > .ntab,
  html[data-design="v2"] body.app-v4 .ntab-group#group-verkauf > .ntab,
  html[data-design="v2"] body.app-v4 .ntab-group#group-team-section > .ntab {
    min-height: 36px !important;
    padding: 7px 12px !important;
    margin: 0 !important;
    font-size: 12.5px !important;
    font-weight: 660 !important;
    letter-spacing: -.005em !important;
    text-transform: none !important;
    color: var(--rl-text-2) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-left: 2px solid transparent !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
  }

  /* Hover + active for the umbrella headers — match the unified active
     vocabulary so they read like any other top-level destination. */
  html[data-design="v2"] body.app-v4 .ntab-group#group-leistungen > .ntab:hover,
  html[data-design="v2"] body.app-v4 .ntab-group#group-kommunikation > .ntab:hover,
  html[data-design="v2"] body.app-v4 .ntab-group#group-verkauf > .ntab:hover,
  html[data-design="v2"] body.app-v4 .ntab-group#group-team-section > .ntab:hover {
    background: rgba(14,143,131,.06) !important;
    color: var(--rl-text) !important;
  }
  html[data-design="v2"] body.app-v4 .ntab-group#group-leistungen > .ntab.active,
  html[data-design="v2"] body.app-v4 .ntab-group#group-kommunikation > .ntab.active,
  html[data-design="v2"] body.app-v4 .ntab-group#group-verkauf > .ntab.active,
  html[data-design="v2"] body.app-v4 .ntab-group#group-team-section > .ntab.active {
    background:
      linear-gradient(135deg, rgba(255,255,255,.96), rgba(247,244,236,.82)),
      var(--rl-gradient-soft) !important;
    border: 1px solid var(--rl-line-accent) !important;
    border-left: 2px solid var(--rl-petrol) !important;
    color: var(--rl-petrol) !important;
    box-shadow: 0 4px 12px rgba(14,143,131,.08) !important;
  }

  /* Bring the icon SVG back on these umbrella headers (Block G hides all
     SVG children of group headers; we re-enable the first one which is
     the section icon — the second SVG is the chevron and stays hidden). */
  html[data-design="v2"] body.app-v4 .ntab-group#group-leistungen > .ntab > svg:first-of-type,
  html[data-design="v2"] body.app-v4 .ntab-group#group-kommunikation > .ntab > svg:first-of-type,
  html[data-design="v2"] body.app-v4 .ntab-group#group-verkauf > .ntab > svg:first-of-type,
  html[data-design="v2"] body.app-v4 .ntab-group#group-team-section > .ntab > svg:first-of-type {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    color: var(--rl-text-3) !important;
  }
  html[data-design="v2"] body.app-v4 .ntab-group#group-leistungen > .ntab.active > svg:first-of-type,
  html[data-design="v2"] body.app-v4 .ntab-group#group-kommunikation > .ntab.active > svg:first-of-type,
  html[data-design="v2"] body.app-v4 .ntab-group#group-verkauf > .ntab.active > svg:first-of-type,
  html[data-design="v2"] body.app-v4 .ntab-group#group-team-section > .ntab.active > svg:first-of-type {
    color: var(--rl-petrol) !important;
  }

  /* Hide the sub-item dropdowns on desktop — sub-pages live in the
     local pill-bar inside each section page now. The sub-tab elements
     remain in the DOM as visibility-anchor stubs for auth.js +
     _MOB_SECTIONS, so mobile drawer + permission cascade still work. */
  html[data-design="v2"] body.app-v4 .ntab-group#group-leistungen > .ndropdown,
  html[data-design="v2"] body.app-v4 .ntab-group#group-kommunikation > .ndropdown,
  html[data-design="v2"] body.app-v4 .ntab-group#group-verkauf > .ndropdown,
  html[data-design="v2"] body.app-v4 .ntab-group#group-team-section > .ndropdown {
    display: none !important;
  }

  /* Drop the "System" pseudo-label that 45-modern-premium.css:1297–1322
     adds above #tab-benutzer — the new Team umbrella has its own visible
     label and the pseudo would render alongside it. */
  html[data-design="v2"] body.app-v4 #tab-benutzer::before {
    display: none !important;
  }

  /* Group rhythm — extend the kunden divider style to the new
     team-section so it sits visually with the rest of the grouped
     block (between Verkauf and the footer). */
  html[data-design="v2"] body.app-v4 #group-team-section {
    margin-top: 4px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }
}

/* Local pill-bar — page-level subnav for collapsed sections.
   Renders below the page heading on desktop AND mobile. Active vocabulary
   matches the unified gradient-soft + petrol from commit 0edce8c. */
html[data-design="v2"] body.app-v4 .app-local-rail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 18px;
  padding: 4px;
  border: 1px solid var(--rl-line);
  border-radius: 8px;
  background: rgba(255,255,255,.74);
  box-shadow: 0 1px 2px rgba(28,42,36,.04);
  flex-wrap: wrap;
}
html[data-design="v2"] body.app-v4 .app-local-rail__item {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 640;
  color: var(--rl-text-2);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
  font-family: inherit;
  letter-spacing: 0;
}
html[data-design="v2"] body.app-v4 .app-local-rail__item:hover {
  color: var(--rl-text);
  background: rgba(14,143,131,.06);
}
html[data-design="v2"] body.app-v4 .app-local-rail__item:focus-visible {
  outline: none;
  box-shadow: var(--rl-focus);
}
html[data-design="v2"] body.app-v4 .app-local-rail__item.is-active {
  color: var(--rl-petrol);
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(247,244,236,.82)),
    var(--rl-gradient-soft);
  box-shadow: 0 4px 12px rgba(14,143,131,.08);
}

@media (max-width: 640px) {
  html[data-design="v2"] body.app-v4 .app-local-rail {
    margin: 0 0 14px;
    padding: 3px;
  }
  html[data-design="v2"] body.app-v4 .app-local-rail__item {
    padding: 6px 11px;
    font-size: 12px;
  }
}

/* ==========================================================================
   IA Finalization — sidebar sections, umbrella chevron, footer compaction.
   Two quiet section labels (Arbeitsbereich / Verwaltung) provide the
   eye-catch hierarchy that was missing from the flat 10-entry list.
   The Kunden umbrella eyebrow is dropped — its two children (Kunden,
   Anfragen) become flat top-level items so the section label "Arbeitsbereich"
   carries them without competition. The remaining four collapsed sections
   (Leistungen / Kommunikation / Verkauf / Team) get a small static
   chevron-right indicator on their headers to visually announce
   "this entry leads into a section". Footer settings + logout share a
   single 2-icon row.
   ========================================================================== */
@media (min-width: 641px) {

  /* --- Section labels --------------------------------------------------- */
  html[data-design="v2"] body.app-v4 .nav-section-label {
    display: block;
    padding: 12px 14px 4px !important;
    margin: 6px 0 0 !important;
    font-size: 9px !important;
    font-weight: 760 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: var(--rl-text-4) !important;
    background: transparent !important;
    pointer-events: none;
    user-select: none;
  }
  /* Arbeitsbereich sits at the very top — slightly tighter top spacing
     since it's the first content after the brand block. */
  html[data-design="v2"] body.app-v4 #nav-label-arbeitsbereich {
    margin-top: 2px !important;
    padding-top: 4px !important;
  }
  /* Verwaltung opens the second section — a stronger break. The
     hairline above it doubles as the workspace ↔ manage divider, so
     the previous border-top on #group-kunden becomes redundant. */
  html[data-design="v2"] body.app-v4 #nav-label-verwaltung {
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--rl-line-strong) !important;
  }
  /* --- Umbrella chevron indicator -------------------------------------- */
  /* Show a small static right-pointing chevron on the four collapsed
     umbrellas so the user sees at a glance that they lead into a section
     with sub-pages. The .ntab-chevron SVG already exists in markup;
     Block G earlier hides ALL group-header SVG children — we re-enable
     just the chevron and reposition it to the trailing edge. */
  html[data-design="v2"] body.app-v4 .ntab-group#group-leistungen > .ntab > .ntab-chevron,
  html[data-design="v2"] body.app-v4 .ntab-group#group-kommunikation > .ntab > .ntab-chevron,
  html[data-design="v2"] body.app-v4 .ntab-group#group-verkauf > .ntab > .ntab-chevron,
  html[data-design="v2"] body.app-v4 .ntab-group#group-team-section > .ntab > .ntab-chevron {
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    margin-left: auto !important;
    color: var(--rl-text-4) !important;
    transform: rotate(-90deg) !important;
    transition: color .18s ease, transform .18s ease !important;
    flex-shrink: 0 !important;
    opacity: .9 !important;
  }
  /* Active umbrella: chevron picks up petrol so it reads as part of the
     active vocabulary. Override the legacy `.open` rotate (180deg) since
     we don't want any rotation on these. */
  html[data-design="v2"] body.app-v4 .ntab-group#group-leistungen > .ntab.active > .ntab-chevron,
  html[data-design="v2"] body.app-v4 .ntab-group#group-kommunikation > .ntab.active > .ntab-chevron,
  html[data-design="v2"] body.app-v4 .ntab-group#group-verkauf > .ntab.active > .ntab-chevron,
  html[data-design="v2"] body.app-v4 .ntab-group#group-team-section > .ntab.active > .ntab-chevron {
    color: var(--rl-petrol) !important;
    transform: rotate(-90deg) !important;
  }
  /* Neutralise the legacy accordion .open rotation on these umbrellas —
     the click handler still toggles .open class internally, but the
     chevron must stay static (no spin on click). */
  html[data-design="v2"] body.app-v4 .ntab-group#group-leistungen > .ntab > .ntab-chevron.open,
  html[data-design="v2"] body.app-v4 .ntab-group#group-kommunikation > .ntab > .ntab-chevron.open,
  html[data-design="v2"] body.app-v4 .ntab-group#group-verkauf > .ntab > .ntab-chevron.open,
  html[data-design="v2"] body.app-v4 .ntab-group#group-team-section > .ntab > .ntab-chevron.open {
    transform: rotate(-90deg) !important;
  }

  /* --- Footer 2-icon row (settings + logout) --------------------------- */
  /* Stack the user card on top, then a single horizontal row for the two
     icon buttons, then the theme toggle. Saves ~32 px of vertical space
     and turns the footer into a stable account tray rather than four
     stacked rows. */
  html[data-design="v2"] body.app-v4 .nav-right__actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 4px !important;
    width: 100% !important;
  }
  html[data-design="v2"] body.app-v4 .nav-right__actions > #nav-settings-btn,
  html[data-design="v2"] body.app-v4 .nav-right__actions > #nav-logout-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 8px !important;
    border-radius: 10px !important;
    justify-content: center !important;
    gap: 6px !important;
  }
  html[data-design="v2"] body.app-v4 .nav-right__actions .nav-settings-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* Mobile (≤ 640px): the footer-action wrapper is in the top header bar,
   not the sidebar. Keep buttons at touch-friendly size and don't apply
   the row-flex collapse. */
@media (max-width: 640px) {
  html[data-design="v2"] body.app-v4 .nav-right__actions {
    display: contents;
  }
}

/* ==========================================================================
   Container flatten — one rail surface, list-style rows.
   The sidebar shell stays as the single legitimate container; everything
   inside (brand block, nav rows, footer block, footer items, theme-seg)
   loses its own card chrome and becomes a flat row in the rail. The
   active indicator is reduced to a 2 px petrol left-rail + a quiet
   petrol-tinted fill — no gradient, no border, no shadow stack.
   Override targets:
     · 45-modern-premium.css:1272–1280 (.nav-right glass card)
     · 45-modern-premium.css:1407–1419 (.nav-user / .icon-btn glass)
     · 45-modern-premium.css:1441–1471 (.theme-seg + .tseg pills)
     · 62-app-relaunch.css:243+ (.nav-brand glass card)
     · plus my own earlier per-item radius/border rules.
   ========================================================================== */
@media (min-width: 641px) {

  /* Brand block — transparent, just a hairline divider. */
  html[data-design="v2"] body.app-v4 .nav-brand {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--rl-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 10px 14px !important;
    min-height: 44px !important;
    margin: 0 !important;
  }

  /* List-row idle: no border, no per-item background, no shadow. The
     2 px transparent left-rail is kept so layout doesn't shift when
     active swaps it to petrol. Radius drops to 4 px so the active fill
     reads as a tab-block, not a pill. */
  html[data-design="v2"] body.app-v4 .nav-tabs > .ntab,
  html[data-design="v2"] body.app-v4 .ntab-group#group-leistungen > .ntab,
  html[data-design="v2"] body.app-v4 .ntab-group#group-kommunikation > .ntab,
  html[data-design="v2"] body.app-v4 .ntab-group#group-verkauf > .ntab,
  html[data-design="v2"] body.app-v4 .ntab-group#group-team-section > .ntab {
    border: 0 !important;
    border-left: 2px solid transparent !important;
    border-radius: 4px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Hover wash — one quiet petrol tint, never a border or shape change. */
  html[data-design="v2"] body.app-v4 .nav-tabs > .ntab:hover,
  html[data-design="v2"] body.app-v4 .ntab-group#group-leistungen > .ntab:hover,
  html[data-design="v2"] body.app-v4 .ntab-group#group-kommunikation > .ntab:hover,
  html[data-design="v2"] body.app-v4 .ntab-group#group-verkauf > .ntab:hover,
  html[data-design="v2"] body.app-v4 .ntab-group#group-team-section > .ntab:hover {
    background: rgba(14,143,131,.05) !important;
    border-color: transparent !important;
    border-left-color: transparent !important;
    color: var(--rl-text) !important;
    box-shadow: none !important;
  }

  /* Active — single calm vocabulary across top-level, sub-items, and the
     mobile counterparts. Petrol left-rail is the primary indicator;
     the 8 %-petrol fill is the secondary support. No gradient stacking,
     no border, no shadow. Reads as "active list row", not "elevated
     button". Overrides the gradient-soft + line-accent + 22 px shadow
     stack from earlier blocks. */
  html[data-design="v2"] body.app-v4 .ntab.active,
  html[data-design="v2"] body.app-v4 .ntab-group > .ntab.active,
  html[data-design="v2"] body.app-v4 .ndropitem.active,
  html[data-design="v2"] body.app-v4 .mob-drawer-item.mob-active,
  html[data-design="v2"] body.app-v4 .mobile-more-item.is-active {
    background: rgba(14,143,131,.08) !important;
    border: 0 !important;
    border-left: 2px solid var(--rl-petrol) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    color: var(--rl-petrol) !important;
  }

  /* Footer region — flatten the glass card. The .nav-right block sits
     at the bottom of the rail with a single hairline separator above
     it; padding reduced so children align to the same indent as the
     nav rows. */
  html[data-design="v2"] body.app-v4 .nav-right {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--rl-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 8px 0 0 !important;
    margin-top: 8px !important;
    gap: 1px !important;
  }

  /* User row — flat list row, hover same as items. Avatar circle is
     identity, not container, so its background stays. */
  html[data-design="v2"] body.app-v4 .nav-user {
    background: transparent !important;
    border: 0 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    padding: 6px 12px !important;
    height: 36px !important;
    min-height: 36px !important;
    gap: 10px !important;
  }
  html[data-design="v2"] body.app-v4 .nav-user:hover {
    background: rgba(14,143,131,.05) !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  /* Settings + Logout — flat rows side-by-side, no per-button glass
     pill. They sit in the .nav-right__actions row at 50/50 width. */
  html[data-design="v2"] body.app-v4 .nav-right__actions > #nav-settings-btn,
  html[data-design="v2"] body.app-v4 .nav-right__actions > #nav-logout-btn {
    background: transparent !important;
    border: 0 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 8px !important;
    color: var(--rl-text-3) !important;
  }
  html[data-design="v2"] body.app-v4 .nav-right__actions > #nav-settings-btn,
  html[data-design="v2"] body.app-v4 .nav-right__actions > #nav-logout-btn {
    cursor: pointer !important;
  }
  html[data-design="v2"] body.app-v4 .nav-right__actions > #nav-settings-btn:hover,
  html[data-design="v2"] body.app-v4 .nav-right__actions > #nav-logout-btn:hover {
    background: rgba(14,143,131,.10) !important;
    border-color: transparent !important;
    color: var(--rl-text) !important;
  }
  html[data-design="v2"] body.app-v4 .nav-right__actions > #nav-settings-btn:focus-visible,
  html[data-design="v2"] body.app-v4 .nav-right__actions > #nav-logout-btn:focus-visible {
    outline: none !important;
    box-shadow: var(--rl-focus) !important;
  }
  html[data-design="v2"] body.app-v4 .nav-right__actions > #nav-settings-btn.active {
    background: rgba(14,143,131,.08) !important;
    color: var(--rl-petrol) !important;
  }
  html[data-design="v2"] body.app-v4 .nav-right__actions > #nav-logout-btn:hover {
    color: #c84040 !important;
  }

  /* Theme-seg — one thin outline around the segmented control, plain
     segments. Active segment gets a calm petrol tint (no glass card,
     no shadow, no gradient). Aligns visually with the rest of the
     flat rail. */
  html[data-design="v2"] body.app-v4 .theme-seg {
    background: transparent !important;
    border: 1px solid var(--rl-line) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    padding: 2px !important;
    gap: 0 !important;
    margin-top: 4px !important;
    height: 28px !important;
  }
  html[data-design="v2"] body.app-v4 .tseg {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--rl-text-3) !important;
    border-radius: 4px !important;
    min-height: 22px !important;
    padding: 3px 6px !important;
    font-size: 9.5px !important;
  }
  html[data-design="v2"] body.app-v4 .tseg:hover {
    background: rgba(14,143,131,.05) !important;
    color: var(--rl-text) !important;
  }
  html[data-design="v2"] body.app-v4 .tseg.active {
    background: rgba(14,143,131,.10) !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--rl-petrol) !important;
  }
}

/* ==========================================================================
   Rail unification — final pass.
   Three intents:
   1. Footer-Tray: settings + logout stack vertically again with full
      labels (was a 50/50 row with truncated chrome). User row gets a bit
      more height so the avatar feels anchored. Theme-toggle slightly
      taller. The whole footer reads as a stable bottom tray, not a
      compressed afterthought.
   2. Active clarity: bump the petrol fill from 8% to 11% and the active
      font-weight from 660 to 720. Stays calm, but the active row now
      reads at a glance instead of needing a second look.
   3. Section rhythm: a touch more breathing space above the Verwaltung
      label so the Workspace ↔ Manage break feels deliberate.
   ========================================================================== */
@media (min-width: 641px) {

  /* --- Footer tray ----------------------------------------------------- */
  /* Vertical stack with proper breathing room. Each footer item is a
     full-width row with a complete, readable label. */
  html[data-design="v2"] body.app-v4 .nav-right {
    padding: 12px 0 4px !important;
    margin-top: 8px !important;
    gap: 4px !important;
  }
  html[data-design="v2"] body.app-v4 .nav-user {
    height: 40px !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
    margin-bottom: 2px !important;
  }
  html[data-design="v2"] body.app-v4 .nav-right__actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    width: 100% !important;
  }
  html[data-design="v2"] body.app-v4 .nav-right__actions > #nav-settings-btn,
  html[data-design="v2"] body.app-v4 .nav-right__actions > #nav-logout-btn {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    justify-content: flex-start !important;
    flex: none !important;
    gap: 10px !important;
  }
  html[data-design="v2"] body.app-v4 .nav-right__actions .nav-settings-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    max-width: none !important;
  }
  html[data-design="v2"] body.app-v4 .theme-seg {
    height: 30px !important;
    margin-top: 6px !important;
  }
  html[data-design="v2"] body.app-v4 .tseg {
    min-height: 24px !important;
    padding: 3px 6px !important;
    font-size: 10px !important;
  }

  /* --- Active clarity --------------------------------------------------- */
  /* Bumps the active fill and label weight without pushing into pill
     territory. Petrol left-rail stays 2px (layout-stable with the
     transparent 2px idle border). */
  html[data-design="v2"] body.app-v4 .ntab.active,
  html[data-design="v2"] body.app-v4 .ntab-group > .ntab.active,
  html[data-design="v2"] body.app-v4 .ndropitem.active,
  html[data-design="v2"] body.app-v4 .mob-drawer-item.mob-active,
  html[data-design="v2"] body.app-v4 .mobile-more-item.is-active {
    background: rgba(14,143,131,.11) !important;
    font-weight: 720 !important;
  }

  /* --- Section rhythm --------------------------------------------------- */
  /* A touch more space above Verwaltung so the section break feels
     deliberate without adding decoration. */
  html[data-design="v2"] body.app-v4 #nav-label-verwaltung {
    margin-top: 14px !important;
    padding-top: 12px !important;
  }
}

/* ==========================================================================
   Settings save CTA + premium save toast.
   The .set-save-bar at the bottom of the settings workspace already sticks
   to the viewport. Here we add four state looks (clean / dirty / saving /
   saved) so the CTA visibly activates only when there are real changes,
   and a polished bottom-right toast for the success confirmation.
   ========================================================================== */

/* Default state: quiet, ready. */
html[data-design="v2"] body.app-v4 #page-einstellungen .set-save-bar {
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* Clean / saved state — quiet, save button looks "done". */
html[data-design="v2"] body.app-v4 #page-einstellungen .set-save-bar.is-clean,
html[data-design="v2"] body.app-v4 #page-einstellungen .set-save-bar.is-saved {
  border-color: rgba(35,55,48,.10) !important;
}
html[data-design="v2"] body.app-v4 #page-einstellungen .set-save-bar.is-clean .set-save-bar__actions .btn-p,
html[data-design="v2"] body.app-v4 #page-einstellungen .set-save-bar.is-saved .set-save-bar__actions .btn-p {
  background: rgba(255,255,255,.78) !important;
  color: var(--rl-text-3) !important;
  box-shadow: none !important;
  border: 1px solid rgba(35,55,48,.12) !important;
}

/* Dirty state — petrol-accented bar with a primary-CTA save button. */
html[data-design="v2"] body.app-v4 #page-einstellungen .set-save-bar.is-dirty {
  border-color: rgba(14,143,131,.34) !important;
  box-shadow: 0 22px 48px rgba(14,143,131,.18), 0 8px 18px rgba(28,42,36,.08) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.86)),
    linear-gradient(135deg, rgba(14,143,131,.10), transparent 56%) !important;
}
html[data-design="v2"] body.app-v4 #page-einstellungen .set-save-bar.is-dirty .set-save-bar__actions .btn-p {
  background: var(--rl-gradient) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 16px 34px rgba(14,143,131,.30) !important;
  animation: set-save-pulse 2.4s ease-in-out infinite;
}
@keyframes set-save-pulse {
  0%, 100% { box-shadow: 0 16px 34px rgba(14,143,131,.30); }
  50%      { box-shadow: 0 18px 40px rgba(14,143,131,.42); }
}

/* Saving state — calm, action in progress. */
html[data-design="v2"] body.app-v4 #page-einstellungen .set-save-bar.is-saving .set-save-bar__actions .btn-p {
  background: var(--rl-gradient) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 16px 34px rgba(14,143,131,.24) !important;
  animation: none;
  opacity: .85;
}

/* Premium save toast — bottom-right on desktop, top-center on mobile.
   Slide-in animation, petrol-accented border, soft shadow. */
.set-toast {
  position: fixed;
  z-index: 99999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border: 1px solid rgba(14,143,131,.26);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92)),
    linear-gradient(135deg, rgba(14,143,131,.10), transparent 60%);
  box-shadow: 0 14px 38px rgba(14,143,131,.18), 0 6px 14px rgba(28,42,36,.08);
  color: #0b4f49;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0;
  pointer-events: none;
  opacity: 0;
  /* Desktop default: bottom-right */
  right: 24px;
  bottom: 24px;
  transform: translateY(12px);
  transition: opacity .22s ease, transform .22s ease;
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
}
.set-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.set-toast__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  background: var(--rl-gradient, linear-gradient(135deg, #08766e, #0e8f83));
  color: #fff;
  flex-shrink: 0;
}
.set-toast__text {
  white-space: nowrap;
}

/* Mobile: top-center, full-width minus margins, tap-friendly. */
@media (max-width: 640px) {
  .set-toast {
    right: 12px;
    left: 12px;
    bottom: auto;
    top: calc(12px + env(safe-area-inset-top, 0px));
    justify-content: center;
    border-radius: 12px;
    padding: 12px 16px;
    transform: translateY(-12px);
  }
  .set-toast.is-visible {
    transform: translateY(0);
  }
  .set-toast__text {
    white-space: normal;
  }

  /* ─── Mobile Save-Bar: aufgeraeumt, nur Speichern bei Änderungen ───
     Default: unsichtbar. Erscheint erst, wenn settingsDirty true ist
     (.is-dirty) oder der Save-Request läuft (.is-saving). Saved-Feedback
     übernimmt der bestehende .set-toast oben auf dem Screen. */
  html[data-design="v2"] body.app-v4 #page-einstellungen .set-save-bar {
    display: none !important;
  }
  html[data-design="v2"] body.app-v4 #page-einstellungen .set-save-bar.is-dirty,
  html[data-design="v2"] body.app-v4 #page-einstellungen .set-save-bar.is-saving {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    /* Karte abnehmen — Button steht frei */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 8px 12px !important;
    gap: 0 !important;
    bottom: 12px !important;
  }

  /* Status-/Hilfstext + Abbrechen verstecken */
  html[data-design="v2"] body.app-v4 #page-einstellungen .set-save-bar .set-save-bar__meta,
  html[data-design="v2"] body.app-v4 #page-einstellungen .set-save-bar .set-save-bar__actions .btn-n {
    display: none !important;
  }

  /* Actions-Container: full-width */
  html[data-design="v2"] body.app-v4 #page-einstellungen .set-save-bar .set-save-bar__actions {
    width: 100% !important;
    justify-content: stretch !important;
    gap: 0 !important;
  }

  /* Speichern-Button: full-width, Petrol-Verlauf, kein Pulse-Laerm */
  html[data-design="v2"] body.app-v4 #page-einstellungen .set-save-bar .set-save-bar__actions .btn-p {
    width: 100% !important;
    min-height: 48px !important;
    border-radius: 12px !important;
    background: var(--rl-gradient) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 12px 28px rgba(14,143,131,.32) !important;
    animation: none !important;
    font-weight: 700 !important;
  }
  html[data-design="v2"] body.app-v4 #page-einstellungen .set-save-bar.is-saving .set-save-bar__actions .btn-p {
    opacity: .85;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   FINANZEN — v11 Workspace Hero (.mb-fin-command.mb-page-hero)

   Mirrors the Planung benchmark (.mb-cal-command.mb-page-hero) and the Kunden
   command (.mb-cust-command.mb-page-hero). Each finance subpage hero adopts
   the same petrol→teal gradient + 3-column grid (intro / focus / controls).
   The existing .mb-fin__page slots inside the umbrella now wrap their first
   <header class="mb-fin__hd"> in this premium shell instead of the older
   .mb-page-hd compact header.

   Notes:
   - Inherits .mb-page-hero base layout from the existing definition (line ~4524).
   - .mb-fin__hd-actions becomes .mb-page-hero__actions in C2 markup.
   - KPIs below the hero get .mb-fin-kpi (extends .mb-kpi with finance accents).
──────────────────────────────────────────────────────────────────────────── */
html[data-design="v2"] body.app-v4 .mb-fin-command.mb-page-hero {
  margin-bottom: 18px;
}
html[data-design="v2"] body.app-v4 .mb-fin-command__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}
html[data-design="v2"] body.app-v4 .mb-fin-command__focus {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
html[data-design="v2"] body.app-v4 .mb-fin-command__focus-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
html[data-design="v2"] body.app-v4 .mb-fin-command__focus-value {
  font-family: var(--mb-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace);
  font-variant-numeric: tabular-nums;
  font-size: clamp(20px, 1.7vw, 26px);
  font-weight: 800;
  color: rgba(255,255,255,.96);
  line-height: 1.05;
}
html[data-design="v2"] body.app-v4 .mb-fin-command__focus-sub {
  font-size: 12px;
  color: rgba(255,255,255,.74);
  font-weight: 600;
}
html[data-design="v2"] body.app-v4 .mb-fin-command .mb-page-hero__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
html[data-design="v2"] body.app-v4 .mb-fin-command .mb-page-hero__actions select,
html[data-design="v2"] body.app-v4 .mb-fin-command .mb-page-hero__actions .mb-fin-command__select {
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  backdrop-filter: blur(8px);
}
html[data-design="v2"] body.app-v4 .mb-fin-command .mb-page-hero__actions select option {
  color: var(--rl-text, #1c2a24);
  background: #fff;
}
html[data-design="v2"] body.app-v4 .mb-fin-command .mb-page-hero__actions .mb-btn {
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  color: #fff !important;
  backdrop-filter: blur(8px);
}
html[data-design="v2"] body.app-v4 .mb-fin-command .mb-page-hero__actions .mb-btn--primary {
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,255,255,.78)) !important;
  color: var(--rl-petrol, #0e8f83) !important;
  border-color: rgba(255,255,255,.5) !important;
}
html[data-design="v2"] body.app-v4 .mb-fin-command .live {
  background: rgba(255,255,255,.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,.30);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
html[data-design="v2"] body.app-v4 .mb-fin-command .live .ldot {
  background: #50d6c4 !important;
  box-shadow: 0 0 8px rgba(80,214,196,.7);
}

/* Finanzen KPI tile — extends .mb-kpi with monospace tabular-nums values */
html[data-design="v2"] body.app-v4 .mb-fin-kpi.kpi,
html[data-design="v2"] body.app-v4 .kgrid > .kpi {
  font-variant-numeric: tabular-nums;
}
html[data-design="v2"] body.app-v4 .kgrid > .kpi .kval,
html[data-design="v2"] body.app-v4 .mb-fin-kpi .kval {
  font-family: var(--mb-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace);
  font-variant-numeric: tabular-nums;
}

/* Side rail active-state petrol stripe — refines the existing .mb-fin__side */
html[data-design="v2"] body.app-v4 .mb-fin__side-link[data-active="true"] {
  position: relative;
  color: var(--rl-petrol, #0e8f83);
  font-weight: 700;
}
html[data-design="v2"] body.app-v4 .mb-fin__side-link[data-active="true"]::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 2px;
  background: var(--rl-gradient, linear-gradient(135deg, #08766e 0%, #0e8f83 46%, #38c8b5 100%));
}

/* Subpage card spacing inside the workspace */
html[data-design="v2"] body.app-v4 .mb-fin__page > .gcol,
html[data-design="v2"] body.app-v4 .mb-fin__page > .gcol2 {
  gap: 18px;
}
html[data-design="v2"] body.app-v4 .mb-fin__page .kgrid {
  gap: 14px;
  margin-bottom: 14px;
}

/* Hero responsiveness — finance subpages use the existing .mb-page-hero
   breakpoint (≤1340px stacks intro / controls / focus). No override needed. */

/* ────────────────────────────────────────────────────────────────────────────
   FINANZEN — Finishing pass: canvas cleanup, container flattening,
   hero→body cohesion, weak-subpage scaffolding.

   Goals:
   1. Calm the "milky" canvas — the sidebar and inner cards both inherit the
      heavy glass treatment from the global .mb-fin__card / .mb-fin__side rule,
      which produces glass-on-glass-on-glass nesting under the petrol hero.
      Drop the sidebar to a quiet ivory rail; let only the *content cards*
      carry the glass surface.
   2. Reduce inner container weight — .ch (card-head) and .card inside
      .mb-fin__page get softer shadows + flatter borders so we read them as
      sections, not stacked panels.
   3. Bridge hero → body — tighten the gap, add a subtle petrol wash beneath
      the hero so the body reads as a continuation, not a separate slab.
   4. Strengthen weak subpages — Vorsteuer / Prognose / Berichte rely on a
      companion .mb-fin-context card (added via markup) that fills the hero
      with a contextual brief and quick links.

   Scope: only inside #page-fixkosten (the umbrella). Other v2 surfaces
   unaffected. Calculator/renderer logic untouched.
──────────────────────────────────────────────────────────────────────────── */

/* Umbrella canvas — generous padding, controlled vertical rhythm, ivory
   without competing with the hero gradient. */
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin {
  padding: 22px 28px 36px !important;
  gap: 22px !important;
  background: transparent !important;
  min-height: 0 !important;
}

/* Sidebar — quiet rail. Drop the glass-card treatment so the sidebar reads
   as a navigation rail, not a competing surface. Petrol active stripe stays. */
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__side {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 4px 6px 4px 0 !important;
  position: sticky;
  top: 8px;
}
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__side-title {
  font-size: 10px !important;
  letter-spacing: .14em !important;
  color: var(--rl-text-3, rgba(28,42,36,.55)) !important;
  font-weight: 700 !important;
  padding: 14px 12px 6px !important;
}
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__side-link {
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
  color: var(--rl-text-2, rgba(28,42,36,.78)) !important;
  background: transparent !important;
  border: 0 !important;
}
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__side-link:hover {
  background: rgba(14,143,131,.06) !important;
  color: var(--rl-text, #1c2a24) !important;
}
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__side-link[data-active="true"] {
  background: rgba(14,143,131,.10) !important;
  color: var(--rl-petrol, #0e8f83) !important;
  font-weight: 700 !important;
}
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__side-sep {
  display: none !important;
}

/* Workspace stage — the main column shows a soft petrol wash at the top to
   visually anchor the body to the hero. Subtle, no harsh edges. */
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__main {
  gap: 18px !important;
  padding-top: 2px;
  background:
    radial-gradient(ellipse 90% 320px at 50% -8%, rgba(14,143,131,.045), transparent 60%);
}

/* Hero rhythm — pulled tighter against the body so the eye reads one
   workspace, not "hero + something else below". */
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-command.mb-page-hero {
  margin-bottom: 6px !important;
}

/* Inner cards inside finance subpages — softer shadow, calmer border, less
   "stacked panel" feel. Keeps the glass surface but lighter. */
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page .card,
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page .mb-fin__card {
  box-shadow: var(--rl-shadow-sm, 0 1px 2px rgba(28,42,36,.04), 0 4px 10px -6px rgba(28,42,36,.08)) !important;
  border-radius: 10px !important;
  overflow: hidden;
}
/* Card heads — flatter, no separate glass band. Just a clean section title row. */
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page .ch {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rl-line, rgba(28,42,36,.10)) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 14px 18px !important;
  min-height: auto !important;
}
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page .ct {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -.005em !important;
  color: var(--rl-text, #1c2a24) !important;
}
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page .cb {
  padding: 16px 18px !important;
}

/* KPI grid inside finance — calmer tile chrome, mono numerics from earlier */
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page .kgrid {
  gap: 12px !important;
  margin-bottom: 16px !important;
}
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page .kpi {
  border-radius: 10px !important;
  box-shadow: var(--rl-shadow-sm, 0 1px 2px rgba(28,42,36,.04), 0 4px 10px -6px rgba(28,42,36,.08)) !important;
  padding: 14px 16px !important;
}
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page .kpi .kval {
  font-family: var(--mb-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace) !important;
  font-variant-numeric: tabular-nums !important;
}

/* Two-column layouts (.gcol / .gcol2) inside finance — consistent gap +
   clean min-width to prevent cards squeezing into illegibility. */
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page > .gcol {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 18px !important;
}
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page > .gcol2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 18px !important;
}
@media (max-width: 1024px) {
  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page > .gcol,
  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page > .gcol2 {
    grid-template-columns: 1fr !important;
  }
}

/* Inner .flx column-stack — comfortable card-to-card gap */
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page .flx {
  gap: 14px !important;
}

/* Toggle wraps (Steuern: Regelbest./KU + Manuell/Auto) — reads as a clean
   pill row instead of three nested boxes. */
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page .kl-toggle-wrap {
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.78)) !important;
  border: 1px solid var(--rl-line, rgba(28,42,36,.10)) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  box-shadow: var(--rl-shadow-sm, 0 1px 2px rgba(28,42,36,.04)) !important;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page .btn-toggle {
  background: transparent !important;
  border: 1px solid var(--rl-line, rgba(28,42,36,.14)) !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--rl-text-2, rgba(28,42,36,.78)) !important;
  cursor: pointer;
  min-height: 30px;
}
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page .btn-toggle.on {
  background: rgba(14,143,131,.10) !important;
  border-color: rgba(14,143,131,.32) !important;
  color: var(--rl-petrol, #0e8f83) !important;
}

/* ──────────────────────────────────────────────────────────────────────
   Weak-subpage scaffolding — companion context cards.
   The Vorsteuer / Prognose / Berichte slots add a small ".mb-fin-context"
   card via markup to give the body presence even when the renderer
   hasn't produced data yet (empty-state coverage too).
   ────────────────────────────────────────────────────────────────────── */
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-context {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.82)),
              linear-gradient(135deg, rgba(14,143,131,.06), transparent 60%);
  border: 1px solid var(--rl-line, rgba(28,42,36,.10));
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: var(--rl-shadow-sm, 0 1px 2px rgba(28,42,36,.04));
  margin-bottom: 16px;
}
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-context__lede {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-context__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--rl-text, #1c2a24);
  letter-spacing: -.01em;
}
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-context__copy {
  font-size: 12.5px;
  color: var(--rl-text-2, rgba(28,42,36,.72));
  line-height: 1.55;
  margin: 0;
  max-width: 56ch;
}
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-context__meta {
  display: grid;
  gap: 8px;
  align-content: start;
}
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-context__meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11.5px;
  color: var(--rl-text-3, rgba(28,42,36,.6));
  font-weight: 600;
  letter-spacing: .01em;
}
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-context__meta-val {
  color: var(--rl-petrol, #0e8f83);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-context {
    grid-template-columns: 1fr;
  }
}

/* Berichte: the renderer only outputs into #ber-kpis. Wrap that grid in
   the same KPI tile chrome plus a subtle "Berichtsjahr"-summary frame. */
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page[data-fin-page="reports"] #ber-kpis {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 14px !important;
  margin-top: 4px !important;
}

/* Vorsteuer: result card visually leads, inputs to the side. The .gcol
   already does that. Just give the result column a slightly stronger
   accent border so it reads as the headline. */
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page[data-fin-page="vat"] > .gcol > .card {
  border: 1px solid rgba(14,143,131,.22) !important;
}

/* Prognose: empty state and content composition. The empty card gets the
   same chrome as a regular section card so it doesn't feel orphaned. */
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page[data-fin-page="forecast"] .empty {
  border-radius: 10px !important;
  border: 1px solid var(--rl-line, rgba(28,42,36,.10)) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.78)) !important;
  box-shadow: var(--rl-shadow-sm, 0 1px 2px rgba(28,42,36,.04)) !important;
  padding: 28px 24px !important;
}

/* Mobile — stack the umbrella so sidebar collapses above the workspace */
@media (max-width: 900px) {
  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin {
    grid-template-columns: 1fr !important;
    padding: 16px 14px 24px !important;
  }
  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__side {
    position: static !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    overflow-x: auto !important;
  }
  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__side-title {
    display: none !important;
  }
}

/* ─── Zielrechner standalone (#page-rechner) — same finishing treatment for
   visual consistency across finance surfaces. Calculator logic untouched. */
html[data-design="v2"] body.app-v4 #page-rechner .mb-fin-command.mb-page-hero {
  margin-bottom: 14px !important;
}
html[data-design="v2"] body.app-v4 #page-rechner > .gcol {
  gap: 18px !important;
  padding-top: 4px;
  background:
    radial-gradient(ellipse 90% 320px at 50% -8%, rgba(14,143,131,.045), transparent 60%);
}
html[data-design="v2"] body.app-v4 #page-rechner .card {
  box-shadow: var(--rl-shadow-sm, 0 1px 2px rgba(28,42,36,.04), 0 4px 10px -6px rgba(28,42,36,.08)) !important;
  border-radius: 10px !important;
  overflow: hidden;
}
html[data-design="v2"] body.app-v4 #page-rechner .ch {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rl-line, rgba(28,42,36,.10)) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 14px 18px !important;
  min-height: auto !important;
}
html[data-design="v2"] body.app-v4 #page-rechner .ct {
  font-size: 13px !important;
  font-weight: 700 !important;
}
html[data-design="v2"] body.app-v4 #page-rechner .kgrid {
  gap: 12px !important;
  margin-bottom: 14px !important;
}
html[data-design="v2"] body.app-v4 #page-rechner .kpi {
  border-radius: 10px !important;
  box-shadow: var(--rl-shadow-sm, 0 1px 2px rgba(28,42,36,.04)) !important;
  padding: 14px 16px !important;
}
html[data-design="v2"] body.app-v4 #page-rechner .kpi .kval {
  font-family: var(--mb-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace) !important;
  font-variant-numeric: tabular-nums !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   FINANZEN — Layout consistency pass

   Card density per subpage was uneven (Steuern: 2 cards, SV: 5 cards,
   Fixkosten: 6 cards) which made the user perceive SV/Fixkosten as
   "expanded" vs Steuern. This pass normalises the *scale* of each page
   so they share one workspace system, without removing content:

   1. Pin a workspace max-width so the horizontal stage is identical.
   2. Lock the hero height + focus card so first-screen composition
      lines up across all 8 subpages.
   3. Convert SV's 4-card vertical tower into a 2×2 grid at desktop
      widths so it doesn't dwarf the other pages.
   4. Standardise card body padding, .flx stack gap, and KPI grid
      columns so the rhythm is uniform.
   5. Compact form-field vertical rhythm so multi-input cards (SV, VST)
      don't bloat as easily as single-input cards (Steuern).
──────────────────────────────────────────────────────────────────────────── */

/* 1) Workspace stage — same horizontal scale on every subpage */
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__main {
  max-width: 1280px !important;
  width: 100% !important;
  margin: 0 auto !important;
}
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page {
  width: 100% !important;
  max-width: 100% !important;
}

/* 2) Hero — pinned height + pinned focus-card height so the first
      screen reads identically on every subpage. */
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-command.mb-page-hero {
  min-height: 168px !important;
  padding: 22px 28px !important;
}
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-command.mb-page-hero .mb-page-hero__intro strong {
  font-size: clamp(32px, 2.6vw, 44px) !important;
  line-height: 1.05 !important;
}
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-command.mb-page-hero .mb-page-hero__copy {
  font-size: 13px !important;
  line-height: 1.5 !important;
}
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-command.mb-page-hero .mb-page-hero__focus {
  min-height: 96px !important;
  padding: 14px 18px !important;
}
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-command.mb-page-hero .mb-fin-command__focus-value {
  font-size: clamp(18px, 1.5vw, 22px) !important;
}

/* Same hero discipline for the standalone Zielrechner */
html[data-design="v2"] body.app-v4 #page-rechner .mb-fin-command.mb-page-hero {
  min-height: 168px !important;
  padding: 22px 28px !important;
  max-width: 1280px;
  margin: 0 auto 14px !important;
}
html[data-design="v2"] body.app-v4 #page-rechner .mb-fin-command.mb-page-hero .mb-page-hero__intro strong {
  font-size: clamp(32px, 2.6vw, 44px) !important;
  line-height: 1.05 !important;
}
html[data-design="v2"] body.app-v4 #page-rechner > .gcol {
  max-width: 1280px;
  margin: 0 auto;
}

/* 3) SV-only — turn the 4-card vertical stack into a 2×2 grid at
      desktop widths so SV doesn't tower vs Steuern. Stays single-column
      below 1100px. */
@media (min-width: 1100px) {
  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page[data-fin-page="social"] > .gcol > .flx {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    align-content: start;
  }
  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page[data-fin-page="social"] > .gcol > .flx > .card {
    margin: 0 !important;
  }
}

/* 4) Card body padding + .flx gap — uniform rhythm across all subpages */
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page .card .cb {
  padding: 14px 18px !important;
}
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page .card .cb.flx {
  gap: 10px !important;
}
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page > .gcol > .flx,
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page > .flx {
  gap: 14px !important;
}
/* Same card discipline on the Zielrechner standalone */
html[data-design="v2"] body.app-v4 #page-rechner .card .cb {
  padding: 14px 18px !important;
}
html[data-design="v2"] body.app-v4 #page-rechner .card .cb.flx {
  gap: 10px !important;
}

/* 5) KPI grid — uniform tile sizing across every finance subpage. */
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page .kgrid,
html[data-design="v2"] body.app-v4 #page-rechner .kgrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page .kpi,
html[data-design="v2"] body.app-v4 #page-rechner .kpi {
  padding: 14px 16px !important;
  min-height: 96px !important;
}

/* Berichte — keep the auto-fit tile shape consistent with the rest */
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page[data-fin-page="reports"] #ber-kpis {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 12px !important;
}

/* 6) Form fields — compact vertical rhythm so multi-input cards (SV, VST)
      don't bloat. Reduces the visual height delta between sparse and
      dense pages without changing inputs themselves. */
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page .field {
  margin-bottom: 0 !important;
}
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page .field .fl {
  font-size: 11.5px !important;
  margin-bottom: 4px !important;
  line-height: 1.3 !important;
}
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page .field .iw,
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page .field input,
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page .field select {
  height: 36px !important;
}
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page .ibox {
  padding: 10px 14px !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

/* The Steuern info banners (kl-extra-info) get the same quieter treatment */
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page .ibox.gap {
  margin-top: 12px !important;
}

/* 7) Detail cards (Steuern, SV) — give them a consistent inner gap so
      the right column doesn't outscale the input column. */
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page .tax-row,
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page .sv-row,
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page .vst-l {
  padding: 4px 0 !important;
  font-size: 12.5px !important;
}
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page .sv-section {
  margin-bottom: 10px !important;
}
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page .sv-total {
  margin-top: 12px !important;
  padding: 12px 14px !important;
}

/* 8) Vorsteuer & Berichte context cards — match the finance scale */
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-context {
  padding: 14px 18px !important;
  margin-bottom: 14px !important;
}
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-context__title {
  font-size: 13px !important;
}
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-context__copy {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   KUNDEN — Danger-Zone bar (always visible footer of .mb-cust__detail)

   The dossier's .mb-cust__body has its own overflow-y:auto scroll, which
   means anything placed inside the Overview panel after "Letzte Notiz"
   ends up below an internal scroll viewport and is effectively hidden
   on first paint. The Archivieren action therefore lives OUTSIDE the
   scroll body, as a footer of .mb-cust__detail — always visible at
   the bottom of the dossier regardless of which tab is active or how
   far the body is scrolled.

   Exposes the existing soft-delete in src/js/13-kunden.js
   (deleteCustomer → deletedAt stamp + archive_entries audit row).
   No new business logic.
──────────────────────────────────────────────────────────────────────────── */
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__danger-bar {
  /* Robustness: sticky-bottom inside the dossier's scroll context
     (.mb-cust__detail has overflow-y:auto). If the flex-column
     height chain ever breaks, sticky keeps the archive affordance
     anchored to the visible bottom edge instead of disappearing
     below the fold. */
  position: sticky;
  bottom: 0;
  z-index: 5;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 22px;
  border-top: 1px solid rgba(212,148,58,.22);
  background:
    linear-gradient(180deg, rgba(255,251,243,.96), rgba(255,247,232,.86)),
    linear-gradient(135deg, rgba(212,148,58,.05), transparent 60%);
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  /* Soft top shadow so the sticky footer reads as elevated over
     scrolling body content. */
  box-shadow: 0 -4px 12px -8px rgba(28,42,36,.10);
}
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__danger-bar-lede {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__danger-bar-title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--rl-text, #1c2a24);
}
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__danger-bar-copy {
  font-size: 12px;
  line-height: 1.4;
  color: var(--rl-text-2, rgba(28,42,36,.66));
  max-width: 72ch;
}
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__danger-bar-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(212,148,58,.42);
  background: rgba(255,255,255,.85);
  color: #b87617;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  white-space: nowrap;
  min-height: 34px;
}
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__danger-bar-btn:hover {
  background: rgba(212,148,58,.12);
  border-color: rgba(212,148,58,.62);
  color: #a55f00;
}
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__danger-bar-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(212,148,58,.28);
}
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__danger-bar-btn svg {
  flex-shrink: 0;
}
html[data-theme="dark"] body.app-v4 #page-kunden .mb-cust__danger-bar {
  background:
    linear-gradient(180deg, rgba(64,42,12,.6), rgba(48,32,10,.5)),
    linear-gradient(135deg, rgba(212,148,58,.10), transparent 60%);
  border-top-color: rgba(212,148,58,.30);
}
html[data-theme="dark"] body.app-v4 #page-kunden .mb-cust__danger-bar-btn {
  background: rgba(0,0,0,.2);
  color: #f0c277;
}
@media (max-width: 640px) {
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__danger-bar {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 16px;
  }
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__danger-bar-btn {
    justify-content: center;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Kunden Archiv-View (additive v2)
   - Archiv-Chip rechts in der Filter-Bar mit Trenner + Counter
   - Tag-Chips werden im Archivmodus visuell gedimmt
   - Archivierte Row mit muted Avatar + "archiviert" Tag
   - Restore-Footer als grüne (mint-petrol) Mirror-Image des Danger-Footers
   Reuses existing restoreCustomer() in src/js/13-kunden.js.
──────────────────────────────────────────────────────────────────────────── */

/* Trenner zwischen Tag-Filtern und Archiv-Chip */
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__filter-divider {
  display: inline-block;
  width: 1px;
  align-self: stretch;
  background: rgba(14, 143, 131, .18);
  margin: 4px 6px;
}

/* Archiv-Chip — Standard-Chip-Look mit Icon + Counter */
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__filter-chip--archive {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__filter-chip--archive svg {
  flex-shrink: 0;
  opacity: .75;
}
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__filter-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0;
  background: rgba(14, 143, 131, .12);
  color: var(--rl-petrol, #0e8f83);
  line-height: 1;
}
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__filter-chip--archive[data-active="true"] {
  background: var(--rl-gradient) !important;
  color: #fff !important;
}
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__filter-chip--archive[data-active="true"] svg {
  opacity: 1;
}
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__filter-chip--archive[data-active="true"] .mb-cust__filter-chip-count {
  background: rgba(255,255,255,.24);
  color: #fff;
}

/* Im Archivmodus: Tag-Filter dimmen + nicht klickbar wirken (Click switcht zurück) */
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__filters[data-view-mode="archived"] .mb-cust__filter-chip:not(.mb-cust__filter-chip--archive) {
  opacity: .42;
}

/* Archivierte Listen-Row: muted Avatar + grauer Schleier */
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__row--archived {
  opacity: .82;
}
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__avatar--archived {
  filter: grayscale(.55);
  opacity: .85;
}
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__row-meta-value--muted {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--rl-text-3, rgba(28,42,36,.50)) !important;
  background: rgba(14, 143, 131, .06);
  padding: 3px 8px;
  border-radius: 6px;
}

/* Restore-Footer — grüne (petrol/mint) Mirror-Image des Danger-Footers */
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__restore-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 22px;
  border-top: 1px solid rgba(14,143,131,.24);
  background:
    linear-gradient(180deg, rgba(244,253,251,.96), rgba(232,250,245,.86)),
    linear-gradient(135deg, rgba(14,143,131,.06), transparent 60%);
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  box-shadow: 0 -4px 12px -8px rgba(14,42,36,.10);
}
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__restore-bar-lede {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__restore-bar-title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--rl-text, #1c2a24);
}
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__restore-bar-copy {
  font-size: 12px;
  line-height: 1.4;
  color: var(--rl-text-2, rgba(28,42,36,.66));
  max-width: 72ch;
}
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__restore-bar-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(14,143,131,.44);
  background: rgba(255,255,255,.92);
  color: var(--rl-petrol, #0e8f83);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  white-space: nowrap;
  min-height: 34px;
}
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__restore-bar-btn:hover {
  background: rgba(14,143,131,.12);
  border-color: rgba(14,143,131,.66);
  color: #0a6e64;
}
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__restore-bar-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(14,143,131,.28);
}
html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__restore-bar-btn svg {
  flex-shrink: 0;
}
html[data-theme="dark"] body.app-v4 #page-kunden .mb-cust__restore-bar {
  background:
    linear-gradient(180deg, rgba(12,40,36,.6), rgba(10,32,28,.5)),
    linear-gradient(135deg, rgba(14,143,131,.12), transparent 60%);
  border-top-color: rgba(14,143,131,.30);
}
html[data-theme="dark"] body.app-v4 #page-kunden .mb-cust__restore-bar-btn {
  background: rgba(0,0,0,.2);
  color: #6ee2cc;
}
@media (max-width: 640px) {
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__restore-bar {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 16px;
  }
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__restore-bar-btn {
    justify-content: center;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   Admin Phase R2 — Kundendaten-Tab (#tab-tenantdb) auf Operations-Pattern.
   CSS-First-Migration: bestehende .tdb-* Klassen behalten ihre Markup-Hooks
   und ihr Verhalten, aber die Surface-Identitaet wird auf das Tier-System
   umgestellt. Keine Card-in-Card mehr.

   Selector-Specificity (0,2,1,0) überstimmt die Inline-Definitionen in
   admin.html (0,0,1,0) ohne !important. Geladen nach den Inline-Bloecken
   in admin.html, daher gewinnt 62 sowieso.
──────────────────────────────────────────────────────────────────────────── */

/* ── Topbar (Tenant-Picker-Wrapper) ───────────────────────────────────
   War schwere Card mit r3 + Border + petrol-Light-Background.
   Jetzt ruhige T2-Surface mit kleinerem Radius + leiserem Shadow. */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-topbar {
  background: var(--surface, #ffffff);
  border: 1px solid var(--surface-border, rgba(28,42,36,.08));
  border-radius: var(--r-lg, 14px);
  box-shadow: var(--shadow-1);
  padding: 16px 20px;
  margin-bottom: 14px;
}

/* Picker-Liste innerhalb der Topbar: war eigene Bordered Subsurface.
   Wird zur ruhigeren Liste mit nur Top/Bottom-Trennlinien — der Wrapper
   selbst ist nicht mehr visuell separat. */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-picker-list {
  background: transparent;
  border: 1px solid var(--surface-border, rgba(28,42,36,.08));
  border-radius: var(--r-md, 10px);
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-picker-item {
  border-bottom-color: var(--surface-border, rgba(28,42,36,.08));
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-picker-item.selected {
  background: rgba(14, 143, 131, .08);
  border-left-color: var(--rl-petrol, #0e8f83);
}

/* Picker-Search-Input: angeglichen an die R1 .adm-toolbar__search Aesthetik. */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-picker-search input {
  border: 1px solid var(--surface-border-strong, rgba(28,42,36,.14));
  border-radius: var(--r-sm, 6px);
  background: var(--surface, #ffffff);
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-picker-search input:focus {
  border-color: var(--surface-border-accent, rgba(14,143,131,.28));
  box-shadow: 0 0 0 3px rgba(14, 143, 131, .14);
}

/* Filter-Chips bleiben Pills, etwas konsistenter mit dem System. */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-chip {
  border-radius: var(--r-pill);
  border-color: var(--surface-border-strong, rgba(28,42,36,.14));
  background: var(--surface, #ffffff);
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-chip:hover:not(.active) {
  border-color: var(--surface-border-accent, rgba(14,143,131,.28));
  color: var(--rl-text, #1c2a24);
}

/* ── Empty-State der Page (initial, vor Tenant-Auswahl) ──────────────
   War eigene dashed-Border-Card mit r3 Radius. Jetzt R1-Empty-Pattern:
   transparent, flach, nur Icon + Text. Markup wurde auf .adm-list-empty
   migriert; .tdb-empty bleibt als JS-Hook-Klasse, neutralisiert hier. */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-empty {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 56px 24px;
}

/* ── Header-Card (Tenant-Dossier) ────────────────────────────────────
   War schwere Card mit r3 + Border. Jetzt T1-Surface ruhiger,
   r-lg Radius, leiserer Shadow. */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-header-card {
  background: var(--surface, #ffffff);
  border: 1px solid var(--surface-border, rgba(28,42,36,.08));
  border-radius: var(--r-lg, 14px);
  box-shadow: var(--shadow-2);
  padding: 22px 24px;
  margin-bottom: 14px;
}

/* Testrole-Wrap innerhalb Header-Card: war eigene gerundete Sub-Card mit
   eigener Border + BG → Card-in-Card. Wird zum Padding-Block ohne eigene
   Surface, getrennt vom Identity-Block nur durch eine 1px-Linie oben. */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-testrole-wrap {
  grid-column: 1 / -1;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--surface-border, rgba(28,42,36,.08));
  border-radius: 0;
  padding: 14px 0 0;
  margin: 0;
}

/* Stats-Sub-Grid innerhalb Header-Card: bekommt einen Top-Trenner
   statt Border-Top auf der Card. */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-hc-stats {
  border-top-color: var(--surface-border, rgba(28,42,36,.08));
  padding-top: 14px;
}

/* Stat-Boxen innerhalb Header-Card: waren Mini-Bubbles (eigene BG +
   Border + Radius). Werden ruhige Padding-Blocks mit dezenter Akzent-
   Linie links — analog zum R1 .adm-kpi-tile, etwas kompakter. */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-stat-box {
  background: transparent;
  border: 0;
  border-left: 2px solid var(--surface-border-strong, rgba(28,42,36,.14));
  border-radius: 0;
  padding: 2px 0 2px 10px;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-stat-lbl {
  color: var(--rl-text-3, rgba(28,42,36,.58));
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-stat-val {
  color: var(--rl-text, #1c2a24);
}

/* Header-Card-Badges: Tone-System angleichen (subtle/grün/red/gold).
   Pill-Form bleibt, Farben werden aus den Tone-Werten bezogen. */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-badge {
  border: 0;
  border-radius: var(--r-pill);
  font-weight: 700;
  background: rgba(14, 143, 131, .12);
  color: var(--rl-petrol, #0e8f83);
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-badge-subtle {
  background: rgba(28, 42, 36, .06);
  color: var(--rl-text-3, rgba(28,42,36,.58));
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-badge-green {
  background: rgba( 36, 145, 86, .12);
  color: #198148;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-badge-red {
  background: rgba(217, 64, 64, .12);
  color: #b53939;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-badge-gold {
  background: rgba(212, 148, 58, .14);
  color: #b87617;
}

/* ── Entity-Shell (Entity-Tabs + Suche + Data-Area) ──────────────────
   War schwere Card. Jetzt T5-List-Container-Look: ruhiger Frame,
   geringerer Radius, leiser Shadow. Inhalt bleibt strukturell gleich. */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-entity-shell {
  background: var(--surface, #ffffff);
  border: 1px solid var(--surface-border, rgba(28,42,36,.08));
  border-radius: var(--r-lg, 14px);
  box-shadow: var(--shadow-1);
}

/* Entity-Tab-Row: ruhigerer Trenner, kein gerundeter Hintergrund. */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-et-row {
  border-bottom-color: var(--surface-border-strong, rgba(28,42,36,.14));
}

/* Entity-Tab-Buttons sind bereits underline-style — Farben angleichen. */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-et-btn {
  color: var(--rl-text-3, rgba(28,42,36,.58));
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-et-btn:hover:not(.active) {
  color: var(--rl-text-2, rgba(28,42,36,.68));
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-et-btn.active {
  color: var(--rl-text, #1c2a24);
  border-bottom-color: var(--rl-petrol, #0e8f83);
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-et-count {
  background: rgba(28, 42, 36, .06);
  color: var(--rl-text-3, rgba(28,42,36,.58));
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-et-btn.active .tdb-et-count {
  background: rgba(14, 143, 131, .12);
  color: var(--rl-petrol, #0e8f83);
}

/* Sucheingabe in der Entity-Shell: angeglichen an .adm-toolbar__search. */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-search-box input {
  border: 1px solid var(--surface-border-strong, rgba(28,42,36,.14));
  border-radius: var(--r-sm, 6px);
  background: var(--surface, #ffffff);
  color: var(--rl-text, #1c2a24);
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-search-box input:focus {
  border-color: var(--surface-border-accent, rgba(14,143,131,.28));
  box-shadow: 0 0 0 3px rgba(14, 143, 131, .14);
}

/* Empty-State innerhalb #tdb-data-area (kein eigener Frame). */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-empty-state {
  color: var(--rl-text-3, rgba(28,42,36,.58));
}

/* ── Warnings: Tone-aligned, kein zusaetzlicher Frame ───────────────── */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-warn {
  border-radius: var(--r-md, 10px);
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-warn-error {
  background: rgba(217, 64, 64, .08);
  border-color: rgba(217, 64, 64, .24);
  color: #b53939;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-warn-warn {
  background: rgba(212, 148, 58, .10);
  border-color: rgba(212, 148, 58, .28);
  color: #b87617;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-warn-info {
  background: rgba(14, 143, 131, .06);
  border-color: rgba(14, 143, 131, .22);
  color: var(--rl-petrol, #0e8f83);
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-warn-ok {
  background: rgba( 36, 145, 86, .06);
  border-color: rgba( 36, 145, 86, .22);
  color: #198148;
}

/* ── Migrations-Box: T1-Look statt eigene Mahnbox ──────────────────── */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-migrate-box {
  background: var(--surface, #ffffff);
  border: 1px solid var(--surface-border-strong, rgba(28,42,36,.14));
  border-radius: var(--r-lg, 14px);
  box-shadow: var(--shadow-2);
  padding: 18px 22px;
}

/* Mobile: Topbar Picker stack vertical wenn eng. */
@media (max-width: 900px) {
  html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-topbar {
    padding: 14px 16px;
  }
  html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-header-card {
    grid-template-columns: 1fr;
    padding: 18px 18px;
  }
  html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-hc-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   Admin Phase R2 — Kundendaten Pass 2 (sichtbar stärker).
   Umbaut die obere Zone von "Topbar-Card + Empty-Card untereinander" zu:
   Page-Eyebrow → flache Toolbar → Filter-Chip-Row → 2-Spalten-Grid mit
   primärer Tenant-Liste links + komponiertem Empty-Composer rechts mit
   Live-Stats + Tipp. Macht die Seite spuerbar als Operations-Page lesbar.
──────────────────────────────────────────────────────────────────────────── */

/* ── Aktiver-Tenant-Marker (kompakter Block über Header-Card) ───────── */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-active-marker {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  margin-bottom: 14px;
  background: rgba(14, 143, 131, .06);
  border: 1px solid rgba(14, 143, 131, .18);
  border-radius: var(--r-lg, 14px);
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-active-marker__info {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-active-marker__label {
  font-size: 10.5px;
  font-weight: 720;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rl-petrol, #0e8f83);
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-active-marker__email {
  font-size: 14px;
  font-weight: 700;
  color: var(--rl-text, #1c2a24);
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-active-marker__meta {
  font-size: 11.5px;
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
}

/* ── Picker-Container (Toolbar + Chips + Grid, kein eigener Frame mehr) — */
html[data-design="v2"] body.admin-v4 #tab-tenantdb #tdb-picker.tdb-picker {
  display: block;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  min-width: 0;
  flex: initial;
  gap: 0;
}

/* Suchfeld innerhalb der Picker-Toolbar: Icon links absolut positioniert. */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-picker-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 1 1 280px;
  min-width: 240px;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-picker-search .tdb-search-ic {
  position: absolute;
  left: 11px;
  font-size: 13px;
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
  pointer-events: none;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-picker-search input.adm-toolbar__search {
  width: 100%;
  min-width: 0;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-search-clear {
  position: absolute;
  right: 10px;
  background: none;
  border: 0;
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
  cursor: pointer;
  font-size: 12px;
  padding: 4px;
}

/* Filter-Chip-Row: zweite Zeile unter Toolbar */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .adm-filter-chip-row.tdb-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0;
}

/* ── 2-Spalten-Grid: Liste links | Empty-Composer rechts ─────────────── */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-picker-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 16px;
  align-items: start;
}

/* Linke Spalte: Tenant-Liste als primäre Surface (komponiert mit mb-surface-t5) */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-picker-list-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* mb-surface-t5 liefert Border + Radius + Shadow + overflow:hidden */
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-picker-list__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--surface-border, rgba(28, 42, 36, .08));
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-picker-list__title {
  font-size: 13px;
  font-weight: 720;
  letter-spacing: .005em;
  color: var(--rl-text, #1c2a24);
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-picker-list__count {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--rl-petrol, #0e8f83);
}

/* Liste innen: keine eigene Surface mehr (Card-Wrapper traegt sie),
   nur Scroll-Verhalten + Row-Trenner. */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-picker-list-card .tdb-picker-list {
  max-height: 540px;
  overflow-y: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-picker-list-card .tdb-picker-item {
  border-bottom: 1px solid var(--surface-border, rgba(28, 42, 36, .08));
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-picker-list-card .tdb-picker-item:last-child {
  border-bottom: 0;
}

/* ── Rechte Spalte: Empty-Composer ──────────────────────────────────────
   Statt einer riesigen leeren Fläche jetzt: Kompositions-Aside mit
   sichtbarer Funktion — Icon-Hint, Live-Stats, Tipp. Eigene ruhige
   Surface, die NICHT wie eine zweite Card-Bubble wirkt. */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-empty-composer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 252, 251, .82)),
    linear-gradient(135deg, rgba(14, 143, 131, .05), transparent 58%);
  border: 1px solid var(--surface-border, rgba(28, 42, 36, .08));
  border-radius: var(--r-lg, 14px);
  box-shadow: var(--shadow-1);
  align-self: start;
  position: sticky;
  top: 18px;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-empty-composer__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-empty-composer__head .adm-list-empty__icon {
  flex-shrink: 0;
  margin: 0;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-empty-composer__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-empty-composer__text .adm-list-empty__title {
  font-size: 14.5px;
  font-weight: 720;
  color: var(--rl-text, #1c2a24);
  letter-spacing: -.005em;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-empty-composer__text .adm-list-empty__sub {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
  max-width: 38ch;
}

/* Live-Stats im Empty-Composer */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-empty-composer__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--surface-border, rgba(28, 42, 36, .08));
  padding-top: 14px;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-empty-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--surface-border, rgba(28, 42, 36, .06));
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-empty-stat:last-child {
  border-bottom: 0;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-empty-stat__label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-empty-stat__value {
  font-size: 18px;
  font-weight: 760;
  color: var(--rl-text, #1c2a24);
  font-variant-numeric: tabular-nums;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-empty-stat[data-tone="warning"] .tdb-empty-stat__value {
  color: #b87617;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-empty-stat[data-tone="failed"] .tdb-empty-stat__value {
  color: #b53939;
}

html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-empty-composer__hint {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
  padding: 10px 12px;
  background: rgba(14, 143, 131, .04);
  border-left: 2px solid rgba(14, 143, 131, .28);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* Mobile: 2-Spalten-Grid faellt auf 1 Spalte zurück */
@media (max-width: 980px) {
  html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-picker-grid {
    grid-template-columns: 1fr;
  }
  html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-empty-composer {
    position: static;
  }
  html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-picker-list-card .tdb-picker-list {
    max-height: 360px;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   Kundendaten Pass 3 — Native Operations Surface.
   Composer wird entfernt (Stats wandern in KPI-Strip über der Liste).
   Liste verliert Outer-Card-Frame und liest als Page-Inhalt-Surface.
   Migrate-CTA wird pending-aware. Active-Marker wird Inline-Zeile.
   Row-Layout wird native flat (1 Status-Pill, Migration als Row-Stripe).
   Filter-Chips werden native (inactive ohne Border + BG).
──────────────────────────────────────────────────────────────────────────── */

/* Picker als flexibler vertikaler Stack auf Page-Surface — kein eigener Frame */
html[data-design="v2"] body.admin-v4 #tab-tenantdb #tdb-picker.tdb-picker {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* Active-Line: kompakte 1-zeilige Status-Bar oberhalb der Header-Card */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-active-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 0 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--surface-border, rgba(28, 42, 36, .08));
  font-size: 12.5px;
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-active-line__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 4px 8px 4px 0;
  font: inherit;
  color: var(--rl-petrol, #0e8f83);
  cursor: pointer;
  font-weight: 600;
  border-radius: var(--r-sm);
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-active-line__back:hover {
  background: rgba(14, 143, 131, .06);
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-active-line__sep {
  color: var(--surface-border-strong, rgba(28, 42, 36, .14));
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-active-line__label {
  font-size: 10.5px;
  font-weight: 720;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-active-line__email {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--rl-text, #1c2a24);
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-active-line__meta {
  font-size: 12px;
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
}

/* Migrate-CTA: pending-aware. Datengetrieben statt rein statisch. */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-btn-migrate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--surface-border-strong, rgba(28, 42, 36, .14));
  background: var(--surface, #ffffff);
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-btn-migrate:disabled {
  cursor: not-allowed;
  opacity: .55;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-btn-migrate[data-pending="true"] {
  background: rgba(14, 143, 131, .08);
  border-color: rgba(14, 143, 131, .28);
  color: var(--rl-petrol, #0e8f83);
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-btn-migrate[data-pending="true"]:hover {
  background: rgba(14, 143, 131, .14);
  border-color: rgba(14, 143, 131, .44);
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-btn-migrate__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: rgba(14, 143, 131, .18);
  color: var(--rl-petrol, #0e8f83);
  font-size: 10.5px;
  font-weight: 720;
  line-height: 1;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-btn-migrate__count[hidden] {
  display: none;
}

/* Toolbar-Suchfeld Icon — jetzt SVG statt Emoji, sauber linksbuendig */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-picker-search .tdb-search-ic {
  position: absolute;
  left: 11px;
  width: 13px;
  height: 13px;
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
  pointer-events: none;
}

/* KPI-Strip-Abstand zur nächsten Sektion */
html[data-design="v2"] body.admin-v4 #tab-tenantdb #tdb-kpi-strip.adm-kpi-strip {
  margin-bottom: 14px;
}

/* Filter-Chips native: inactive transparent ohne BG, nur Active mit Petrol-Fill */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-chip {
  background: transparent;
  border: 1px solid var(--surface-border, rgba(28, 42, 36, .08));
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-chip:hover:not(.active) {
  background: rgba(14, 143, 131, .04);
  border-color: var(--surface-border-strong, rgba(28, 42, 36, .14));
  color: var(--rl-text, #1c2a24);
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-chip.active {
  background: var(--rl-petrol, #0e8f83);
  border-color: var(--rl-petrol, #0e8f83);
  color: #ffffff;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-chip-count {
  background: rgba(28, 42, 36, .08);
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-chip.active .tdb-chip-count {
  background: rgba(255, 255, 255, .22);
  color: #ffffff;
}

/* Tenant-Liste FLACH: kein Outer-Card. Nur ruhiger Eyebrow-Header + flache Rows. */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-picker-list-flat {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-top: 14px;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-picker-list-flat .tdb-picker-list__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0 0 10px 0;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--surface-border, rgba(28, 42, 36, .08));
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-picker-list-flat .tdb-picker-list__title {
  font-size: 10.5px;
  font-weight: 720;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-picker-list-flat .tdb-picker-list__count {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
  font-variant-numeric: tabular-nums;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-picker-list-flat .tdb-picker-list {
  max-height: none;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
}

/* Picker-Item: native flat row, inset-Shadow selected-State, Migration als Modifier */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-picker-item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--surface-border, rgba(28, 42, 36, .08));
  background: transparent;
  border-left: 0;
  cursor: pointer;
  transition: background 120ms ease, box-shadow 120ms ease;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-picker-item:last-child {
  border-bottom: 0;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-picker-item:hover {
  background: rgba(14, 143, 131, .04);
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-picker-item.selected {
  background: rgba(14, 143, 131, .06);
  box-shadow: inset 3px 0 0 var(--rl-petrol, #0e8f83);
  border-left: 0;
  padding-left: 14px;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-picker-item--pending {
  box-shadow: inset 3px 0 0 #d4943a;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-picker-item--pending.selected {
  box-shadow: inset 3px 0 0 var(--rl-petrol, #0e8f83);
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-picker-item .tdb-pi-avatar {
  width: 40px;
  height: 40px;
  font-size: 14px;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-pi-main {
  min-width: 0;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-pi-email {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--rl-text, #1c2a24);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-pi-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-pi-plan-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rl-petrol, #0e8f83);
  flex-shrink: 0;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-pi-plan-dot--muted {
  background: var(--surface-border-strong, rgba(28, 42, 36, .14));
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-pi-plan {
  font-weight: 600;
  color: var(--rl-text-2, rgba(28, 42, 36, .68));
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-pi-sep {
  color: var(--surface-border-strong, rgba(28, 42, 36, .14));
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-pi-uid {
  font-variant-numeric: tabular-nums;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-pi-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-pi-testrole {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: rgba(122, 84, 168, .14);
  color: #6e4f9e;
}

/* Pass-2-Reste neutralisieren: composer + 2-Spalten-Grid sind im neuen
   Markup nicht mehr vorhanden, aber die alten CSS-Regeln würden bei
   Restbestand greifen — daher hard-reset. */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-picker-grid {
  display: block;
  grid-template-columns: none;
  gap: 0;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-empty-composer {
  display: none;
}

/* Mobile: KPI-Strip stack auto, Liste full-width */
@media (max-width: 700px) {
  html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-picker-item {
    grid-template-columns: 36px minmax(0, 1fr);
  }
  html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-picker-item .tdb-pi-meta {
    grid-column: 2;
    margin-top: 4px;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   Kundendaten HARD RESET — Master-Detail-Workspace.
   Komplett neues Layout: 2-Pane (Master links, Detail rechts), Picker
   IMMER sichtbar, Detail-Pane togglet zwischen Initial-Hint und Tenant-
   Detail. Keine schwere Header-Card mehr — Identity-Strip + Actions-Bar
   + Stats sind alles flache Streifen, durch 1px-Linien getrennt.
──────────────────────────────────────────────────────────────────────────── */

/* ── Workspace-Grid ─────────────────────────────────────────────────── */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-ws {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  background: var(--surface, #ffffff);
  border: 1px solid var(--surface-border, rgba(28, 42, 36, .08));
  border-radius: var(--r-lg, 14px);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  min-height: calc(100vh - 200px);
}

/* ── Master-Pane (links) ───────────────────────────────────────────── */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-ws__master {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: rgba(248, 251, 250, .55);
  border-right: 1px solid var(--surface-border-strong, rgba(28, 42, 36, .14));
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-ws__master-head {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--surface-border, rgba(28, 42, 36, .08));
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-ws__master-title {
  font-size: 14px;
  font-weight: 720;
  letter-spacing: -.005em;
  color: var(--rl-text, #1c2a24);
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-ws__master-sub {
  font-size: 11.5px;
  margin-top: 2px;
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
}
/* Robust-Fix: Flex-Row statt Absolute-Icon + Padding-Math.
   Wrapper ist Flex-Container; Icon, Input und Clear-Button sind
   Flex-Childs. Der Abstand zwischen Icon und Text kommt aus dem
   gap — robust gegen Browser/Zoom/Font-Substitution. */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-ws__master-search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--surface-border, rgba(28, 42, 36, .08));
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-ws__master-search input.adm-toolbar__search {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-ws__master-search .tdb-search-ic {
  position: static;
  flex-shrink: 0;
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
  pointer-events: none;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-ws__master-search .tdb-search-clear {
  position: static;
  flex-shrink: 0;
  background: none;
  border: 0;
  padding: 4px 6px;
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
  cursor: pointer;
  font-size: 12px;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-ws__master-search .tdb-search-clear:hover {
  color: var(--rl-text, #1c2a24);
}

/* Filter-Chips kompakter im Master-Pane */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-ws__master .adm-filter-chip-row.tdb-filter-chips {
  padding: 10px 14px;
  margin: 0;
  border-bottom: 1px solid var(--surface-border, rgba(28, 42, 36, .08));
  gap: 5px;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-ws__master .tdb-chip {
  font-size: 11px;
  padding: 4px 9px;
}

/* Liste-Header (Eyebrow-Stripe oberhalb der Picker-Liste) */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-ws__list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 16px 8px;
  background: transparent;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-ws__list-title {
  font-size: 10px;
  font-weight: 720;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-ws__list-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
  font-variant-numeric: tabular-nums;
}

/* Picker-Liste: scrollbar, kompakter, native rows */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-ws__master #tdb-picker-list.tdb-picker-list {
  flex: 1 1 auto;
  overflow-y: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  max-height: none;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-ws__master .tdb-picker-item {
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px 16px;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-ws__master .tdb-picker-item .tdb-pi-avatar {
  width: 32px;
  height: 32px;
  font-size: 12px;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-ws__master .tdb-pi-email {
  font-size: 12.5px;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-ws__master .tdb-pi-sub {
  font-size: 11px;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-ws__master .tdb-pi-meta {
  gap: 4px;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-ws__master .tdb-pi-testrole {
  display: none;  /* Im Master-Pane reduziert; Testrole-Info im Detail */
}

/* ── Detail-Pane (rechts) ────────────────────────────────────────── */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-ws__detail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface, #ffffff);
}

/* ── Initial-Hint (Detail-Empty-State) ─────────────────────────────
   Sichtbar wenn kein Tenant ausgewählt. Kein Card-Frame; flacher
   zentrierter Block mit Quick-Stats und prominenter Migrate-CTA. */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 60px 32px;
  text-align: center;
  flex: 1 1 auto;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(14, 143, 131, .08);
  color: var(--rl-petrol, #0e8f83);
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail-empty__title {
  font-size: 16px;
  font-weight: 720;
  color: var(--rl-text, #1c2a24);
  letter-spacing: -.005em;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail-empty__sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
  max-width: 42ch;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail-empty__stats {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 8px 0 4px;
  border: 1px solid var(--surface-border, rgba(28, 42, 36, .08));
  border-radius: var(--r-md, 10px);
  background: rgba(248, 251, 250, .55);
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 22px;
  border-right: 1px solid var(--surface-border, rgba(28, 42, 36, .08));
  min-width: 130px;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail-stat:last-child {
  border-right: 0;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail-stat__label {
  font-size: 10.5px;
  font-weight: 720;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail-stat__value {
  font-size: 22px;
  font-weight: 760;
  color: var(--rl-text, #1c2a24);
  font-variant-numeric: tabular-nums;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail-stat[data-tone="warning"] .tdb-detail-stat__value {
  color: #b87617;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail-stat[data-tone="failed"] .tdb-detail-stat__value {
  color: #b53939;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail-empty__cta {
  margin-top: 4px;
}

/* ── Identity-Strip (Tenant-Header, flach) ───────────────────────── */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__identity {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid var(--surface-border, rgba(28, 42, 36, .08));
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__identity .tdb-hc-avatar {
  width: 48px;
  height: 48px;
  font-size: 16px;
  margin: 0;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__identity-main {
  min-width: 0;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__name {
  font-size: 16px;
  font-weight: 720;
  color: var(--rl-text, #1c2a24);
  letter-spacing: -.005em;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__plan-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: rgba(14, 143, 131, .10);
  color: var(--rl-petrol, #0e8f83);
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__email-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--rl-text-2, rgba(28, 42, 36, .68));
  flex-wrap: wrap;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__meta {
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__meta-sep {
  color: var(--surface-border-strong, rgba(28, 42, 36, .14));
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--surface-border-strong, rgba(28, 42, 36, .14));
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--rl-text-2, rgba(28, 42, 36, .68));
  cursor: pointer;
  font-family: var(--font);
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__back:hover {
  border-color: var(--surface-border-accent, rgba(14, 143, 131, .28));
  color: var(--rl-petrol, #0e8f83);
}

/* ── Actions-Bar (Tenant-Operations, flach, eine Reihe) ──────────── */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 22px;
  border-bottom: 1px solid var(--surface-border, rgba(28, 42, 36, .08));
  background: rgba(248, 251, 250, .35);
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__action {
  font-size: 12px;
  padding: 5px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__actions-sep {
  width: 1px;
  align-self: stretch;
  background: var(--surface-border-strong, rgba(28, 42, 36, .14));
  margin: 2px 4px;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__testrole {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__testrole-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
  letter-spacing: .02em;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__testrole .tdb-testrole-select {
  font-size: 12px;
  padding: 5px 26px 5px 10px;
  min-width: 130px;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__testrole .tdb-tr-revoke {
  padding: 5px 7px;
  border: 1px solid var(--surface-border-strong, rgba(28, 42, 36, .14));
  background: transparent;
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
  border-radius: var(--r-pill);
  cursor: pointer;
  font-family: var(--font);
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__testrole .tdb-tr-revoke:hover {
  border-color: rgba(217, 64, 64, .42);
  color: #b53939;
}

/* ── Tenant-Stats (inline statt Grid-in-Card) ─────────────────────── */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__stats {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid var(--surface-border, rgba(28, 42, 36, .08));
  background: transparent;
  flex-wrap: wrap;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__stats:empty {
  border-bottom: 0;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__stats > .tdb-stat-box {
  border: 0;
  border-left: 0;
  border-right: 1px solid var(--surface-border, rgba(28, 42, 36, .08));
  border-radius: 0;
  padding: 12px 22px;
  flex: 1 1 auto;
  min-width: 140px;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__stats > .tdb-stat-box:last-child {
  border-right: 0;
}

/* Warnings-Block bleibt minimal */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-ws__detail .tdb-warnings {
  margin: 0;
  padding: 10px 22px;
  border-bottom: 1px solid var(--surface-border, rgba(28, 42, 36, .08));
  background: rgba(255, 250, 240, .45);
}

/* ── Entity-Section (Tabs + Search + Data-Area, kein Card-Wrapper) ─── */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__entity {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 240px;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__entity-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 16px;
  border-bottom: 1px solid var(--surface-border-strong, rgba(28, 42, 36, .14));
  flex-wrap: wrap;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__entity-head .tdb-et-tabs {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__entity-head .tdb-et-btn {
  background: transparent;
  border: 0;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
  cursor: pointer;
  font-family: var(--font);
  border-radius: var(--r-md, 10px);
  margin: 6px 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__entity-head .tdb-et-btn:hover:not(.active) {
  background: rgba(14, 143, 131, .06);
  color: var(--rl-text, #1c2a24);
}
/* Active-State: Petrol-Fill wie "App testen" (.btn-p) */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__entity-head .tdb-et-btn.active {
  background: linear-gradient(135deg, var(--rl-petrol, #0e8f83), #0a6e64) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 2px rgba(14, 143, 131, .18);
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__entity-head .tdb-et-count {
  background: rgba(28, 42, 36, .08);
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
  padding: 1px 6px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 700;
  margin-left: 2px;
}
/* Count-Badge im aktiven Tab: heller weisser Tint statt grauer */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__entity-head .tdb-et-btn.active .tdb-et-count {
  background: rgba(255, 255, 255, .22) !important;
  color: #ffffff !important;
}
/* Icon im aktiven Tab: weiß */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__entity-head .tdb-et-btn.active .tdb-et-ic,
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__entity-head .tdb-et-btn.active svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}
/* Robust-Fix: Wrapper als Flex-Row mit gap. Icon, Input, Clear sind
   Flex-Childs — kein absolutes Positioning, kein padding-Math mehr. */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__entity-head .tdb-search-box {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--surface-border-strong, rgba(28, 42, 36, .14));
  border-radius: var(--r-sm, 6px);
  background: var(--surface, #ffffff);
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__entity-head .tdb-search-box:focus-within {
  border-color: var(--surface-border-accent, rgba(14, 143, 131, .28));
  box-shadow: 0 0 0 3px rgba(14, 143, 131, .14);
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__entity-head .tdb-search-box .tdb-search-ic {
  position: static;
  flex-shrink: 0;
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
  pointer-events: none;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__entity-head .tdb-search-box input {
  flex: 1 1 auto;
  min-width: 180px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--rl-text, #1c2a24);
  font-size: 12px;
  font-family: var(--font);
  outline: none;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__entity-head .tdb-search-box .tdb-search-clear {
  position: static;
  flex-shrink: 0;
  background: none;
  border: 0;
  padding: 2px 4px;
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
  cursor: pointer;
  font-size: 11px;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__entity-head .tdb-search-box .tdb-search-clear:hover {
  color: var(--rl-text, #1c2a24);
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__entity #tdb-data-area {
  padding: 12px 16px 16px;
  flex: 1 1 auto;
}

/* Hard Reset: alte tdb-entity-shell / tdb-et-row / tdb-search-box / tdb-header-card
   Selektoren sind nicht mehr im neuen Markup. Falls noch im DOM (z.B. via
   legacy includes): neutralisieren. */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-entity-shell,
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-header-card,
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-testrole-wrap:not(.tdb-detail__testrole) {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-active-line {
  display: none;
}

/* ── Migrate-Button: prominent im Empty-Hint (groesser, mit Icon) ──── */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail-empty__cta.tdb-btn-migrate {
  padding: 10px 18px;
  font-size: 13px;
}

/* ── Avatar (Initials) Default-Styles innerhalb Detail-Identity ──── */
html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__identity .tdb-hc-avatar {
  background: linear-gradient(135deg, var(--rl-petrol, #0e8f83), #a67842);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
}

/* ── Mobile (≤980px): Master oben, Detail unten ──────────────────── */
@media (max-width: 980px) {
  html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-ws {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-ws__master {
    border-right: 0;
    border-bottom: 1px solid var(--surface-border-strong, rgba(28, 42, 36, .14));
  }
  html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-ws__master #tdb-picker-list.tdb-picker-list {
    max-height: 360px;
  }
  html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__identity {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  html[data-design="v2"] body.admin-v4 #tab-tenantdb .tdb-detail__identity-back {
    grid-column: 1 / -1;
    margin-top: 4px;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   Admin „Seite" — Settings-Row-Pattern V2 (4 Hauptprobleme behoben).

   Korrekturen vs V1:
   - Inputs max-width 480-560px (nicht mehr full-column-width)
   - Hint unter LABEL (nicht unter Input) — semantisch korrekt zugeordnet
   - KEINE Trennlinien zwischen Fields derselben Group, nur zwischen Groups
   - Eyebrow entfernt (war redundant zum Title), Title kleiner (16/700)
   - Group-Header zurück zu klein-uppercase (klare Hierarchie zu Title)
   - Sidebar mit Left-Stripe statt Bottom (Settings-Selection nicht Tab)
──────────────────────────────────────────────────────────────────────────── */

/* === Page-Shell: kein Outer-Card mehr ============================ */
html[data-design="v2"] body.admin-v4 #tab-site .sc-layout {
  grid-template-columns: 196px 1fr !important;
  gap: 36px !important;
}
html[data-design="v2"] body.admin-v4 #tab-site .sc-main {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  /* V2.1 Fix #1 (E): Page-Content auf max-width gecappt — eliminiert
     halbleere rechte Seite. macOS-System-Settings-Stil. */
  max-width: 960px !important;
}
html[data-design="v2"] body.admin-v4 #tab-site .sc-aside {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  position: sticky;
  top: 18px;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  backdrop-filter: none !important;
}
html[data-design="v2"] body.admin-v4 #tab-site .sc-aside-item {
  padding: 8px 12px !important;
  border-radius: var(--r-sm, 6px) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--rl-text-2, rgba(28, 42, 36, .68)) !important;
}
html[data-design="v2"] body.admin-v4 #tab-site .sc-aside-item:hover {
  background: rgba(14, 143, 131, .06) !important;
  color: var(--rl-text, #1c2a24) !important;
  box-shadow: none !important;
}
html[data-design="v2"] body.admin-v4 #tab-site .sc-aside-item.sc-active {
  background: rgba(14, 143, 131, .10) !important;
  color: var(--rl-petrol, #0e8f83) !important;
  box-shadow: inset 2px 0 0 var(--rl-petrol, #0e8f83) !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: var(--r-sm, 6px) !important;
}

/* === Status-Banner #sc-status entkapselt ================================ */
html[data-design="v2"] body.admin-v4 #tab-site #sc-status.sc-status {
  margin: 0 0 14px 0 !important;
  border-radius: var(--r-sm, 6px) !important;
}

/* === Page-Toolbar: kleiner Title, KEIN Eyebrow ========================== */
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-page-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  /* V2.1 Fix #9 (K): kompakter (vorher padding 20, margin 8) */
  padding: 0 0 16px 0;
  margin: 0 0 4px 0;
  border-bottom: 1px solid var(--surface-border, rgba(28, 42, 36, .08));
  background: transparent;
}
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-page-toolbar__head {
  flex: 1 1 320px;
  min-width: 0;
}
/* Eyebrow ENTFERNEN — war redundant zum Title */
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-page-toolbar__eyebrow {
  display: none !important;
}
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-page-toolbar__title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--rl-text, #1c2a24);
  margin: 0;
  line-height: 1.25;
}
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-page-toolbar__sub {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
  /* V2.1 Fix #7 (B): max-width 56ch + text-wrap pretty — verhindert
     Orphans wie "Wirkt auf" allein auf zweiter Zeile. */
  max-width: 56ch;
  text-wrap: pretty;
  margin: 6px 0 0;
}
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-page-toolbar__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* === Group: Trenner ZWISCHEN Groups (nicht zwischen Fields) ============= */
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-group {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--surface-border, rgba(28, 42, 36, .08));
}
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-group:first-of-type {
  margin-top: 22px;
  padding-top: 0;
  border-top: 0;
}
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-group__head {
  display: block;
  padding: 0 0 12px 0;
  margin-bottom: 4px;
  border-bottom: 0;
}
/* Group-Eyebrow KLEIN + UPPERCASE — klar als Sub-Bereich zu Section-Title */
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-group__eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 720;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
}
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-group__help {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
  line-height: 1.45;
  /* V2.1 Fix #8 (G): max-width 56ch + text-wrap pretty */
  max-width: 56ch;
  text-wrap: pretty;
  hyphens: none;
}
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-group__body {
  display: block;
  margin-top: 4px;
}

/* === SETTINGS-ROW: Hint unter Label, Input mit max-width, KEIN Trenner = */
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-grid {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-field {
  display: grid !important;
  /* V2.1 Fix #2 (A): Label-Spalte 220 → 260 px — verhindert Umbruch
     bei langen Labels wie "Google Analytics 4 (Measurement ID)". */
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: start !important;
  gap: 4px 28px !important;
  padding: 10px 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  flex-direction: row !important;
}
/* Label oben-links (Row 1, Col 1) */
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-field > label {
  grid-column: 1 !important;
  grid-row: 1 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--rl-text, #1c2a24) !important;
  padding-top: 9px !important;
  margin: 0 !important;
}
/* Hint DIREKT UNTER LABEL (Row 2, Col 1) — semantisch korrekt zugeordnet */
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-field > .sc-field-hint {
  grid-column: 1 !important;
  grid-row: 2 !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--rl-text-3, rgba(28, 42, 36, .58)) !important;
  margin: 0 !important;
  /* V2.1 Fix #2 (A): max-width für kurze Hints, padding-right
     für Luft. hyphens none verhindert Bindestrich-Trennung. */
  max-width: 320px !important;
  padding: 0 24px 0 0 !important;
  line-height: 1.4 !important;
  hyphens: none !important;
}
/* Input rechts, max-width für professionelles Aussehen (statt full-column) */
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-field > input,
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-field > textarea,
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-field > select {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: start !important;
  width: 100% !important;
  max-width: 480px !important;
  padding: 8px 12px !important;
  border-radius: var(--r-sm, 6px) !important;
  font-size: 13px !important;
}
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-field > textarea {
  resize: vertical;
  min-height: 64px;
  max-width: 560px !important;
}
/* Container-Divs (z.B. Slider+Number, Consent-Version+Button) */
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-field > div:not(.sc-field-hint) {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: start !important;
  margin-top: 4px !important;
  max-width: 560px !important;
}
/* full-Modifier: Textarea/lange Felder dürfen die volle Breite nehmen */
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-field--full > input,
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-field--full > textarea,
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-field--full > div:not(.sc-field-hint) {
  max-width: 720px !important;
}
/* sc-hint (?-Icon im Label) inline halten */
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-field > label .sc-hint {
  margin-left: 4px;
}

/* === Toggle-Row als Settings-Row mit Switch rechts ====================== */
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-toggle-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 28px !important;
  padding: 12px 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  margin: 0 !important;
}
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-toggle-row > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-toggle-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--rl-text, #1c2a24) !important;
}
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-toggle-desc {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--rl-text-3, rgba(28, 42, 36, .58)) !important;
  margin-top: 2px !important;
  line-height: 1.45 !important;
  /* V2.1 Fix #6 (C): hyphens none verhindert "Trial-/Ende"-Bindestrich-
     Umbruch. max-width 60ch für kompaktere Help-Texte. */
  max-width: 60ch;
  hyphens: none;
  text-wrap: pretty;
}

/* V2.1 Fix #5 (I): Toggle-Switch kompakter — macOS-Settings-Stil
   (vorher 42×24, jetzt 36×20). Knopf entsprechend kleiner. */
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-switch {
  width: 36px !important;
  height: 20px !important;
}
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-switch-slider::before {
  width: 14px !important;
  height: 14px !important;
  top: 3px !important;
  left: 3px !important;
}
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-switch input:checked + .sc-switch-slider::before {
  transform: translateX(16px) !important;
}

/* V2.1 Fix #3 (D): Slider+Number-Combo als einheitlicher Track.
   Container im sc-field bekommt einen leise getoenten Background,
   Number-Input wird borderless, Slider+Number sitzen visuell als
   ein Control statt zwei separate Felder. */
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-field > div:not(.sc-field-hint):has(input[type="range"]) {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 0 !important;
  padding: 6px 12px !important;
  background: rgba(28, 42, 36, .04) !important;
  border: 1px solid var(--surface-border, rgba(28, 42, 36, .08)) !important;
  border-radius: var(--r-md, 10px) !important;
}
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-field > div:not(.sc-field-hint):has(input[type="range"]) input[type="range"] {
  flex: 1 1 auto !important;
  accent-color: var(--rl-petrol, #0e8f83) !important;
  background: transparent !important;
}
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-field > div:not(.sc-field-hint):has(input[type="range"]) > div {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 4px !important;
}
/* V2.1 Fix #10 (M): Number-Input Petrol-Color + borderless im Slider-Container */
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-field > div:not(.sc-field-hint):has(input[type="range"]) input[type="number"] {
  width: 48px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 4px 0 !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--rl-petrol, #0e8f83) !important;
}
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-field > div:not(.sc-field-hint):has(input[type="range"]) input[type="number"]:focus {
  outline: none !important;
  box-shadow: none !important;
}
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-field > div:not(.sc-field-hint):has(input[type="range"]) span {
  font-size: 12px !important;
  color: var(--rl-text-3, rgba(28, 42, 36, .58)) !important;
  font-weight: 600 !important;
}

/* === Preview-Box: kompakte einheitliche Klasse ========================== */
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-preview {
  display: grid !important;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) !important;
  gap: 6px 28px !important;
  padding: 10px 0 !important;
  border-top: 0 !important;
  margin: 0 !important;
}
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-preview-label {
  grid-column: 1;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--rl-text, #1c2a24) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 0 !important;
  padding-top: 9px !important;
}
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-preview-box,
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-preview > div:not(.sc-preview-label),
html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-cb-preview {
  grid-column: 2;
  background: rgba(14, 143, 131, .04) !important;
  border: 1px solid var(--surface-border, rgba(28, 42, 36, .08)) !important;
  border-radius: var(--r-md, 10px) !important;
  padding: 12px 14px !important;
  font-size: 12.5px !important;
  color: var(--rl-text-2, rgba(28, 42, 36, .68)) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  /* V2.1 Fix #4 (F): Preview-Box max-width 560 — visuell verankert
     mit der Form (~Input-Breite), nicht losgelöste Full-Width-Insel. */
  max-width: 560px !important;
}

/* === Save-Bar globale unten verstecken ================================== */
html[data-design="v2"] body.admin-v4 #tab-site .sc-save-bar {
  display: none !important;
}

/* === Mobile: Label und Input untereinander, schmal ====================== */
@media (max-width: 820px) {
  html[data-design="v2"] body.admin-v4 #tab-site .sc-layout {
    grid-template-columns: 1fr !important;
  }
  html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-field,
  html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-preview {
    grid-template-columns: 1fr !important;
  }
  html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-field > label,
  html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-preview-label {
    padding-top: 0 !important;
  }
  html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-field > input,
  html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-field > textarea,
  html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-field > div,
  html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-field > .sc-field-hint {
    grid-column: 1 !important;
  }
  html[data-design="v2"] body.admin-v4 #tab-site .sc-section--r1 .sc-page-toolbar__actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   Admin Hybrid-Navigation: Sidebar gruppiert + Dashboard-Hub-Cards
   - .nav-group__head: kleine Eyebrow zwischen Tab-Gruppen in der Sidebar
   - .dash-hub / .dash-mod: klickbare Modul-Karten im Dashboard
──────────────────────────────────────────────────────────────────────────── */

/* === Sidebar Group-Eyebrow ============================================== */
html[data-design="v2"] body.admin-v4 .nav-tabs .nav-group__head {
  display: block;
  padding: 14px 12px 6px;
  font-size: 9.5px;
  font-weight: 720;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rl-text-3, rgba(28, 42, 36, .54));
  border-top: 1px solid var(--surface-border, rgba(28, 42, 36, .08));
  margin-top: 6px;
}
html[data-design="v2"] body.admin-v4 .nav-tabs .nav-group__head:first-of-type {
  border-top: 0;
  margin-top: 0;
}
/* Auf Mobile (horizontaler Tab-Bar) Group-Header ausblenden */
@media (max-width: 640px) {
  html[data-design="v2"] body.admin-v4 .nav-tabs .nav-group__head {
    display: none;
  }
}

/* === Dashboard-Hub: Modul-Cards-Hub oben im Dashboard =================== */
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-hub {
  background: transparent;
  margin-bottom: 22px;
}
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-hub__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(28, 42, 36, .08);
}
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-hub__title {
  font-size: 17px;
  font-weight: 800;
  color: var(--rl-text, #1c2a24);
  letter-spacing: 0;
}
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-hub__sub {
  font-size: 12px;
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
  margin-top: 3px;
}
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-hub__group {
  margin-top: 18px;
}
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-hub__group:first-of-type {
  margin-top: 0;
}
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-hub__eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
  margin-bottom: 8px;
}
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-hub__eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgb(var(--mod-accent, 14, 143, 131));
  box-shadow: 0 0 0 3px rgba(var(--mod-accent, 14, 143, 131), .12);
  flex: 0 0 auto;
}
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-hub__eyebrow::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  min-width: 32px;
  background: linear-gradient(90deg, rgba(var(--mod-accent, 14, 143, 131), .24), transparent);
}
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-hub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr));
  gap: 10px;
  align-items: stretch;
}
@media (min-width: 1500px) {
  html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-hub__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* === Modul-Card V2.3: noch kompakter (Marco "übersichtlicher") ========= */
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-mod {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 14px;
  min-height: 124px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--surface-border, rgba(28, 42, 36, .08));
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(28, 42, 36, .03);
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  transition: background 140ms ease, border-color 160ms ease,
              box-shadow 180ms ease, transform 140ms ease;
  position: relative;
  overflow: hidden;
}
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-mod::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: rgb(var(--mod-accent, 14, 143, 131));
  opacity: .34;
  transition: opacity 160ms ease;
}
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-mod:hover {
  transform: translateY(-1px);
}
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-mod:active {
  transform: translateY(0);
  box-shadow: var(--shadow-1);
}

/* Head-Row: Icon links, Arrow rechts (Hover-Reveal) */
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-mod__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  pointer-events: none;
}
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-mod__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(14, 143, 131, .08);
  color: var(--rl-petrol, #0e8f83);
  flex-shrink: 0;
  transition: background 160ms ease, box-shadow 200ms ease, transform 200ms ease;
}
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-mod__icon svg {
  width: 16px;
  height: 16px;
}
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-mod:hover .dash-mod__icon {
  background: rgba(14, 143, 131, .15);
  transform: scale(1.05);
}
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-mod__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  color: var(--rl-text-3, rgba(28, 42, 36, .42));
  opacity: .58;
  transform: translateX(-2px);
  transition: opacity 160ms ease, transform 200ms ease, color 140ms ease, background 140ms ease;
}
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-mod:hover .dash-mod__arrow {
  opacity: 1;
  transform: translateX(0);
  background: rgba(14, 143, 131, .10);
  color: var(--rl-petrol, #0e8f83);
}

html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-mod__title {
  min-height: 32px;
  padding-left: 42px;
  padding-right: 28px;
  display: flex;
  align-items: center;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--rl-text, #1c2a24);
  letter-spacing: 0;
  line-height: 1.25;
  transition: text-shadow 160ms ease;
}
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-mod__sub {
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 560;
  line-height: 1.42;
  color: var(--rl-text-3, rgba(28, 42, 36, .58));
  flex: 1;
  /* Max 2 Zeilen — laenger wird ellipsiert, damit Cards gleich hoch bleiben */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Stats-Zeile (calmer hairline, Inline-Stats mit accent <strong>) */
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-mod__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 10px;
  margin-top: 12px;
  border-top: 1px solid rgba(28, 42, 36, .06);
  font-size: 10.5px;
}
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-mod__stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--rl-text-3, rgba(28, 42, 36, .55));
  font-weight: 680;
  white-space: nowrap;
  min-height: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(28, 42, 36, .035);
  border: 1px solid rgba(28, 42, 36, .07);
}
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-mod__stat strong {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--rl-petrol, #0e8f83);
  font-variant-numeric: tabular-nums;
}

/* Pulse-Glow auf dringende Stats (data-pulse=...). JS setzt
   .is-urgent wenn Value > 0; ohne is-urgent kein Pulse. */
@keyframes mb-dash-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--mod-accent, 14, 143, 131), .48); }
  50%      { box-shadow: 0 0 0 5px rgba(var(--mod-accent, 14, 143, 131), 0); }
}
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-mod__stat[data-pulse].is-urgent strong {
  position: relative;
  padding: 0;
  margin: 0;
  animation: mb-dash-pulse 1.8s ease-in-out infinite;
}
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-mod__stat[data-pulse].is-urgent {
  color: #8b4b12;
  background: rgba(212, 148, 58, .14);
  border-color: rgba(212, 148, 58, .34);
}
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-mod__stat[data-pulse].is-urgent strong {
  color: #9c5f13;
}
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-mod.is-urgent {
  border-color: rgba(212, 148, 58, .46);
  box-shadow:
    0 0 0 1px rgba(212, 148, 58, .10),
    0 10px 24px -18px rgba(145, 92, 24, .42);
}
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-mod.is-urgent::before {
  background: rgb(212, 148, 58);
  opacity: .82;
}

@media (max-width: 720px) {
  html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-hub__grid {
    grid-template-columns: 1fr;
  }
}

/* === Group-Akzentfarben: pro Themenbereich eine eigene Identitaet ====== */
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-hub__group[data-accent="kunden"]   { --mod-accent: 14, 143, 131; }  /* Petrol  */
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-hub__group[data-accent="ops"]      { --mod-accent: 212, 148, 58; }  /* Amber   */
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-hub__group[data-accent="finance"]  { --mod-accent: 36, 145, 86;  }  /* Emerald */
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-hub__group[data-accent="config"]   { --mod-accent: 122, 84, 168; }  /* Violet  */

/* Group-Eyebrow in Group-Farbe */
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-hub__group[data-accent] .dash-hub__eyebrow {
  color: rgb(var(--mod-accent));
}

/* === V2.1 IDLE-AURA: Cards "leuchten" schon im Ruhezustand (LED-Chip) === */

/* Card-Border bekommt Group-Tint statt generisches Grau */
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-hub__group[data-accent] .dash-mod {
  border-color: rgba(var(--mod-accent), .14);
}

/* Modul-Icon: Group-BG + Idle-Aura (inner ring + soft halo) */
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-hub__group[data-accent] .dash-mod__icon {
  background: rgba(var(--mod-accent), .10);
  color: rgb(var(--mod-accent));
  box-shadow:
    inset 0 0 0 1px rgba(var(--mod-accent), .22);
}

/* Stats <strong>: Group-Color + subtler Idle-Text-Glow */
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-hub__group[data-accent] .dash-mod__stat strong {
  color: rgb(var(--mod-accent));
  text-shadow: none;
}
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-hub__group[data-accent] .dash-mod.is-urgent {
  border-color: rgba(212, 148, 58, .46);
}
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-hub__group[data-accent] .dash-mod__stat[data-pulse].is-urgent strong {
  color: #9c5f13;
}

/* === V2.1 HOVER-BOOST: Glow wird kräftig, ganze Card halo-t ============= */
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-hub__group[data-accent] .dash-mod:hover {
  border-color: rgba(var(--mod-accent), .36);
  box-shadow:
    0 0 0 1px rgba(var(--mod-accent), .12),
    0 12px 28px -22px rgba(var(--mod-accent), .44);
  background: linear-gradient(135deg,
    rgba(var(--mod-accent), .035),
    var(--surface, #ffffff) 50%);
}
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-hub__group[data-accent] .dash-mod:hover::before {
  opacity: .72;
}
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-hub__group[data-accent] .dash-mod:hover .dash-mod__icon {
  background: rgba(var(--mod-accent), .15);
  box-shadow:
    inset 0 0 0 1px rgba(var(--mod-accent), .34);
}
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-hub__group[data-accent] .dash-mod:hover .dash-mod__arrow {
  background: rgba(var(--mod-accent), .14);
  color: rgb(var(--mod-accent));
}
html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-hub__group[data-accent] .dash-mod:hover .dash-mod__title {
  text-shadow: none;
}

/* Mobile: Idle-Glow gedaempft (Performance + weniger visueller Lärm auf
   kleinen Screens). Hover-Glow bleibt voll an, da Hover dort kaum vorkommt. */
@media (max-width: 720px) {
  html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-hub__head {
    display: block;
  }
  html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-hub__group[data-accent] .dash-mod__icon {
    box-shadow:
      inset 0 0 0 1px rgba(var(--mod-accent), .22);
  }
  html[data-design="v2"] body.admin-v4 #tab-dashboard .dash-hub__group[data-accent] .dash-mod__stat strong {
    text-shadow: none;
  }
}

/* === Sidebar Group-Eyebrow auch in Group-Farbe ========================= */
html[data-design="v2"] body.admin-v4 .nav-tabs .nav-group__head[data-accent="kunden"]  { --mod-accent: 14, 143, 131; }
html[data-design="v2"] body.admin-v4 .nav-tabs .nav-group__head[data-accent="ops"]     { --mod-accent: 212, 148, 58; }
html[data-design="v2"] body.admin-v4 .nav-tabs .nav-group__head[data-accent="finance"] { --mod-accent: 36, 145, 86;  }
html[data-design="v2"] body.admin-v4 .nav-tabs .nav-group__head[data-accent="config"]  { --mod-accent: 122, 84, 168; }
html[data-design="v2"] body.admin-v4 .nav-tabs .nav-group__head[data-accent] {
  color: rgb(var(--mod-accent)) !important;
}
/* Mini-Dot vor dem Sidebar-Eyebrow als Color-Marker */
html[data-design="v2"] body.admin-v4 .nav-tabs .nav-group__head[data-accent]::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgb(var(--mod-accent));
  margin-right: 7px;
  vertical-align: 1px;
}

/* ═════════════════════════════════════════════════════════════════════════
   Top-Bar (.nav) Buttons — kompakter als der Admin-Default 40 px.
   Marco V2.2 Audit: „die Button, die sind zu groß" — App testen,
   2FA aktivieren, Abmelden + User-Pille zu prominent in der Top-Bar.
   Mobile (<=1080 px) bleibt durch 62-app-relaunch.css:798 bei 44 px.
──────────────────────────────────────────────────────────────────────────── */
html[data-design="v2"] body.admin-v4 .nav button {
  min-height: 30px !important;
  padding: 5px 12px !important;
  font-size: 11.5px !important;
}
html[data-design="v2"] body.admin-v4 .nav .nav-av {
  width: 24px !important;
  height: 24px !important;
  font-size: 10.5px !important;
}
html[data-design="v2"] body.admin-v4 .nav #nav-email {
  font-size: 11px !important;
}
html[data-design="v2"] body.admin-v4 .nav-badge {
  padding: 2px 8px !important;
  font-size: 9px !important;
  letter-spacing: .08em !important;
}

/* ==========================================================================
   LEISTUNGEN - service catalog workspace
   Dashboard/Anfragen sibling layout for the Dienstleistung admin page.
   ========================================================================== */

html[data-design="v2"] body.app-v4 #app > #page-behandlungen.active {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  align-self: stretch !important;
  padding-inline: clamp(20px, 3vw, 44px) !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen > [data-design-version="v2"] {
  width: 100% !important;
  max-width: 1720px !important;
  margin-inline: auto !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat--catalog {
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
  min-height: calc(100vh - 76px) !important;
  min-height: calc(100dvh - 76px) !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat--catalog > .mb-page-hd__titles,
html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat--catalog > .mb-page-hd__actions {
  display: none !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-command.mb-page-hero {
  flex: 0 0 auto !important;
  min-height: 200px !important;
  border-radius: 34px !important;
  grid-template-columns: minmax(240px, .72fr) minmax(340px, 1fr) minmax(300px, .66fr) !important;
  box-shadow:
    0 6px 14px -8px rgba(7,79,70,.20),
    0 22px 40px -18px rgba(7,79,70,.26),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-command__eyebrow {
  color: rgba(255,255,255,.72) !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-command .mb-page-hero__intro strong {
  font-size: clamp(42px, 3.6vw, 66px) !important;
  line-height: .94 !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-focus {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-focus > div {
  min-width: 0 !important;
  padding: 12px 13px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-focus span {
  display: block !important;
  margin-bottom: 6px !important;
  color: rgba(255,255,255,.68) !important;
  font-size: 10px !important;
  line-height: 1.15 !important;
  font-weight: 820 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-focus strong {
  display: block !important;
  overflow: hidden !important;
  color: #fff !important;
  font-size: clamp(20px, 1.45vw, 28px) !important;
  line-height: 1 !important;
  font-weight: 880 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen #treat-stat-meta {
  margin: 0 !important;
  color: rgba(255,255,255,.78) !important;
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  font-weight: 700 !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-search {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  padding: 0 18px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  background: rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.82) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18) !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-search:focus-within {
  border-color: rgba(255,255,255,.48) !important;
  background: rgba(255,255,255,.20) !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-search input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,.88) !important;
  font-size: 13px !important;
  font-weight: 720 !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-search input::placeholder {
  color: rgba(255,255,255,.74) !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-page-hero__actions .mb-btn {
  width: 100% !important;
  min-height: 50px !important;
  justify-content: center !important;
  border-radius: 8px !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-page-hero__actions .mb-btn:not(.mb-btn--primary) {
  border-color: rgba(255,255,255,.24) !important;
  background: rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.88) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16) !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-page-hero__actions .mb-btn--primary {
  border-color: rgba(255,255,255,.66) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(226,255,248,.92)) !important;
  color: var(--rl-petrol) !important;
  box-shadow: 0 18px 34px rgba(4,44,39,.22), inset 0 1px 0 rgba(255,255,255,.78) !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-workspace {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
  gap: 22px !important;
  align-items: start !important;
  min-height: 0 !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-main,
html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-rail {
  min-width: 0 !important;
  border: 1px solid rgba(42,50,45,.10) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,253,249,.92)),
    linear-gradient(135deg, rgba(14,143,131,.08), transparent 62%) !important;
  box-shadow: 0 20px 46px -32px rgba(6,63,57,.28), inset 0 1px 0 rgba(255,255,255,.72) !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-main {
  overflow: hidden !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-main__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-height: 72px !important;
  padding: 20px 24px !important;
  border-bottom: 1px solid rgba(42,50,45,.08) !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-section-label,
html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-rail-card > span {
  display: block !important;
  margin-bottom: 6px !important;
  color: var(--rl-petrol) !important;
  font-size: 10.5px !important;
  line-height: 1.15 !important;
  font-weight: 860 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-main__head strong {
  display: block !important;
  color: var(--rl-text) !important;
  font-size: 20px !important;
  line-height: 1.15 !important;
  font-weight: 860 !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-count {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(14,143,131,.16) !important;
  border-radius: 999px !important;
  background: rgba(14,143,131,.08) !important;
  color: var(--rl-petrol) !important;
  font-size: 12px !important;
  font-weight: 820 !important;
  white-space: nowrap !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-admin-list {
  display: grid !important;
  gap: 12px !important;
  padding: 18px !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 8px minmax(0, 1fr) auto !important;
  gap: 16px !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(42,50,45,.10) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(250,253,249,.96)),
    linear-gradient(135deg, rgba(14,143,131,.06), transparent 62%) !important;
  box-shadow: 0 14px 34px -30px rgba(6,63,57,.30) !important;
  overflow: hidden !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-card:hover {
  border-color: rgba(14,143,131,.24) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 20px 42px -30px rgba(6,63,57,.36) !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-card__stripe {
  background: linear-gradient(180deg, var(--rl-petrol), rgba(56,200,181,.72)) !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-card__main {
  min-width: 0 !important;
  padding: 20px 0 20px 0 !important;
}

  html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-card__top {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-card__name {
  margin: 0 !important;
  color: var(--rl-text) !important;
  font-size: 17px !important;
  line-height: 1.22 !important;
  font-weight: 860 !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-card__sub {
  margin-top: 5px !important;
  color: var(--rl-text-3) !important;
  font-size: 12.5px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-status {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  line-height: 1 !important;
  font-weight: 840 !important;
  white-space: nowrap !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-status.is-bookable {
  border: 1px solid rgba(14,143,131,.18) !important;
  background: rgba(14,143,131,.10) !important;
  color: var(--rl-petrol) !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-status.is-internal {
  border: 1px solid rgba(42,50,45,.13) !important;
  background: rgba(42,50,45,.06) !important;
  color: var(--rl-text-3) !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-card__metrics {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 16px 0 0 !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 30px !important;
  padding: 0 11px !important;
  border: 1px solid rgba(42,50,45,.10) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.80) !important;
  color: var(--rl-text-2) !important;
  font-size: 12px !important;
  font-weight: 760 !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-chip strong {
  color: var(--rl-text) !important;
  font-weight: 860 !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-chip--strong {
  border-color: rgba(14,143,131,.16) !important;
  background: rgba(14,143,131,.08) !important;
  color: var(--rl-petrol) !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-card__hint {
  margin-top: 14px !important;
  padding: 13px 15px !important;
  border: 1px solid rgba(14,143,131,.13) !important;
  border-left: 4px solid var(--rl-petrol) !important;
  border-radius: 12px !important;
  background: rgba(14,143,131,.06) !important;
  color: var(--rl-text-2) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 650 !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-card__extras {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin-top: 12px !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-card__extras .extra-chip {
  min-height: 26px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  border-color: rgba(14,143,131,.18) !important;
  background: rgba(14,143,131,.08) !important;
  color: var(--rl-petrol) !important;
  font-size: 11.5px !important;
  font-weight: 780 !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-card__actions {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 20px 18px 20px 0 !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border: 1px solid rgba(42,50,45,.12) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.82) !important;
  color: var(--rl-text-2) !important;
  cursor: pointer !important;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-icon-btn:hover {
  border-color: rgba(14,143,131,.24) !important;
  background: rgba(14,143,131,.08) !important;
  color: var(--rl-petrol) !important;
  transform: translateY(-1px) !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-icon-btn--danger {
  border-color: rgba(220,72,72,.16) !important;
  background: rgba(220,72,72,.06) !important;
  color: #c33d3d !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-icon-btn--danger:hover {
  border-color: rgba(220,72,72,.28) !important;
  background: rgba(220,72,72,.10) !important;
  color: #b42f2f !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 320px !important;
  padding: 40px 24px !important;
  text-align: center !important;
  color: var(--rl-text-2) !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-empty__icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 54px !important;
  height: 54px !important;
  margin-bottom: 16px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, var(--rl-petrol), rgba(56,200,181,.88)) !important;
  color: #fff !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  box-shadow: 0 18px 34px rgba(6,63,57,.20) !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-empty strong {
  color: var(--rl-text) !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  font-weight: 860 !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-empty p {
  max-width: 460px !important;
  margin: 8px 0 18px !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-rail {
  position: sticky !important;
  top: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 18px !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-rail-card {
  padding: 20px !important;
  border: 1px solid rgba(42,50,45,.09) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.76) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72) !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-rail-card--accent {
  background:
    linear-gradient(135deg, rgba(14,143,131,.12), rgba(255,255,255,.82)),
    linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.64)) !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-rail-card strong {
  display: block !important;
  color: var(--rl-text) !important;
  font-size: 17px !important;
  line-height: 1.25 !important;
  font-weight: 860 !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-rail-card p {
  margin: 9px 0 0 !important;
  color: var(--rl-text-2) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 650 !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-shortcuts {
  display: grid !important;
  gap: 10px !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-shortcut {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  width: 100% !important;
  padding: 14px !important;
  border: 1px solid rgba(42,50,45,.10) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.72) !important;
  color: var(--rl-text) !important;
  text-align: left !important;
  cursor: pointer !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-shortcut:hover {
  border-color: rgba(14,143,131,.20) !important;
  background: rgba(14,143,131,.08) !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-shortcut span {
  grid-row: span 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  background: rgba(14,143,131,.10) !important;
  color: var(--rl-petrol) !important;
  font-size: 12px !important;
  font-weight: 880 !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-shortcut strong,
html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-shortcut em {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-shortcut strong {
  color: var(--rl-text) !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 840 !important;
}

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-shortcut em {
  color: var(--rl-text-3) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-style: normal !important;
  font-weight: 650 !important;
}

@media (max-width: 1340px) {
  html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-command.mb-page-hero {
    grid-template-columns: minmax(0, 1fr) minmax(330px, .72fr) !important;
    grid-template-areas:
      "intro controls"
      "focus focus" !important;
    min-height: auto !important;
  }

  html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-workspace {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-rail {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-shortcuts {
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  html[data-design="v2"] body.app-v4 #app > #page-behandlungen.active {
    padding-inline: 16px !important;
  }

  html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-command.mb-page-hero {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "intro"
      "focus"
      "controls" !important;
    padding: 22px !important;
    border-radius: 22px !important;
  }

  html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-command .mb-page-hero__intro strong {
    font-size: clamp(34px, 8vw, 46px) !important;
  }

  html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-focus,
  html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-rail,
  html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-shortcuts {
    grid-template-columns: 1fr !important;
  }

  html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-card {
    grid-template-columns: 6px minmax(0, 1fr) !important;
  }

  html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-card__actions {
    grid-column: 2 !important;
    padding: 0 16px 16px 0 !important;
  }
}

@media (max-width: 640px) {
  html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-command.mb-page-hero {
    padding: 18px !important;
  }

  html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-main__head {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-admin-list {
    padding: 12px !important;
  }

html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-card__top {
    flex-direction: column !important;
  }
}

/* ==========================================================================
   FINANZEN - viewport fit and scroll repair

   The finance umbrella has a second navigation rail plus many deep subpages.
   Keep the outer app shell stable, make the finance body scrollable in depth,
   and let the hero reflow by available workspace width instead of viewport
   width, so long German titles never collapse under the focus card.
   ========================================================================== */

html[data-design="v2"] body.app-v4 #app > #page-fixkosten.active {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 1 1 0 !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
  padding: 24px clamp(16px, 2.4vw, 32px) 0 !important;
  margin-inline: 0 !important;
  overflow: hidden !important;
}

html[data-design="v2"] body.app-v4 #page-fixkosten > [data-design-version="v2"] {
  width: 100% !important;
  min-width: 0 !important;
  height: calc(100vh - 24px) !important;
  height: calc(100dvh - 24px) !important;
  overflow: hidden !important;
}

html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin {
  --fin-side-w: clamp(152px, 13vw, 210px);
  display: grid !important;
  grid-template-columns: var(--fin-side-w) minmax(0, 1fr) !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  padding: 0 !important;
  gap: clamp(18px, 2vw, 28px) !important;
  overflow: hidden !important;
}

html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__side {
  position: sticky !important;
  top: 0 !important;
  align-self: start !important;
  max-height: calc(100dvh - 48px) !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
  padding: 10px 8px 18px 0 !important;
}

html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__side::-webkit-scrollbar,
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__main::-webkit-scrollbar {
  width: 8px !important;
}

html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__side::-webkit-scrollbar-thumb,
html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__main::-webkit-scrollbar-thumb {
  background: rgba(14,143,131,.20) !important;
  border-radius: 999px !important;
}

html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__side-title {
  padding: 11px 10px 6px !important;
  font-size: 10px !important;
}

html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__side-link {
  min-height: 38px !important;
  padding: 9px 11px !important;
  font-size: 13px !important;
}

html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__main {
  container-type: inline-size !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 2px 40px 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
}

html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page {
  min-width: 0 !important;
  padding-bottom: 40px !important;
}

html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-command.mb-page-hero {
  container-type: inline-size !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, .82fr) minmax(136px, .32fr) !important;
  grid-template-areas: "intro focus controls" !important;
  column-gap: clamp(16px, 1.6vw, 26px) !important;
  row-gap: 14px !important;
  min-height: 168px !important;
  padding: clamp(20px, 2vw, 28px) !important;
  overflow: hidden !important;
}

html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-command.mb-page-hero .mb-page-hero__intro {
  min-width: 0 !important;
  overflow: visible !important;
}

html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-command.mb-page-hero .mb-page-hero__intro strong {
  max-width: 100% !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  font-size: clamp(28px, 3.35cqw, 44px) !important;
  line-height: 1.02 !important;
}

html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-command.mb-page-hero .mb-page-hero__copy {
  max-width: 42ch !important;
  font-size: 12.5px !important;
}

html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-command.mb-page-hero .mb-page-hero__focus {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 16px 18px !important;
}

html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-command.mb-page-hero .mb-fin-command__focus-value {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(18px, 2.3cqw, 26px) !important;
}

html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-command.mb-page-hero .mb-page-hero__controls {
  min-width: 0 !important;
  justify-content: center !important;
}

html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-command .live {
  max-width: 100% !important;
  min-height: 34px !important;
  justify-content: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@container (max-width: 1040px) {
  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-command.mb-page-hero {
    grid-template-columns: minmax(0, 1fr) minmax(280px, .75fr) !important;
    grid-template-areas:
      "intro focus"
      "controls controls" !important;
    min-height: 0 !important;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-command.mb-page-hero .mb-page-hero__controls {
    align-items: flex-start !important;
  }
}

@container (max-width: 760px) {
  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-command.mb-page-hero {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "intro"
      "focus"
      "controls" !important;
    padding: 18px !important;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-command.mb-page-hero .mb-page-hero__intro strong {
    font-size: clamp(30px, 8vw, 40px) !important;
  }
}

@media (max-width: 1180px) {
  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__side {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0 4px !important;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__side-title,
  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__side-sep {
    display: none !important;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__side-nav {
    display: contents !important;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__side-link {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    white-space: nowrap !important;
    border: 1px solid rgba(14,143,131,.12) !important;
    background: rgba(255,255,255,.64) !important;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__side-link[data-active="true"] {
    background: rgba(14,143,131,.12) !important;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__side-link[data-active="true"]::before {
    display: none !important;
  }
}

@media (max-height: 820px) and (min-width: 1181px) {
  html[data-design="v2"] body.app-v4 #app > #page-fixkosten.active {
    padding-top: 16px !important;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten > [data-design-version="v2"] {
    height: calc(100dvh - 16px) !important;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-command.mb-page-hero {
    min-height: 144px !important;
    padding: 18px 24px !important;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-command.mb-page-hero .mb-page-hero__copy {
    margin-top: 2px !important;
    font-size: 12px !important;
    line-height: 1.36 !important;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-command.mb-page-hero .mb-page-hero__focus {
    padding: 12px 16px !important;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__side-link {
    min-height: 34px !important;
    padding-block: 7px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE — surface + component overrides
   For rules that hardcoded light-mode hex values (cream calendar bodies,
   white active pills, etc.) the dark variant lives here. Pure additive —
   light mode is unchanged because these selectors include [data-theme="dark"].
   ══════════════════════════════════════════════════════════════════════════ */

/* Calendar week + month + sticky day-header — cream (#fffdf9) → deep emerald */
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-kalender .mb-cal-week__body,
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-kalender .mb-cal-month,
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-kalender .mb-cal-week__day-sticky,
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-kalender .mb-cal-month__sticky {
  background: var(--rl-canvas-2) !important;
}

/* Anfragen status-tabs: active pill — white-on-mint → translucent-on-dark */
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-anfragen .mb-req__status-tab[data-active="true"] {
  background: rgba(80,214,196,.16) !important;
  color: var(--rl-text) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.40) !important;
}

/* Footer-Button hover (Anfragen "Vorschlagen") — white → translucent emerald */
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-anfragen .mb-req__footer .mb-btn[data-req-action="propose"]:hover {
  background: rgba(255,255,255,.06) !important;
}

/* Auth-Landing tseg.active — was hardcoded #ffffff */
html[data-design="v2"][data-theme="dark"] body.app-v4 #auth-landing .tseg.active {
  background: rgba(255,255,255,.10) !important;
  color: var(--rl-text) !important;
}

/* Live-Ticker dot stays teal in both modes — keep #50d6c4 (it's an accent) */

/* Native <select option> can't be CSS-themed beyond color-scheme; document-only.
   The colorScheme="dark" set in 04-theme.js makes the OS render dark dropdowns. */

/* Search-bar on emerald hero (calendar): white-tinted glass — already
   reads correctly in dark because the hero gradient stays emerald.
   Listed here only as documentation; no override needed. */

/* ══════════════════════════════════════════════════════════════════════════
   PHASE H — VISUAL CLEANUP für DARK MODE (2026-05-23)
   Nach Roll-out fielen vier Selektor-Bloecke auf, die Light-Mode-Backgrounds
   ohne [data-theme="dark"]-Qualifier setzten -> in Dark Mode blieben Cards,
   Headers, Sub-Tabs und Listen weiß. Dieser Block flippt sie konsolidiert
   auf Dark-emerald. Specificity matched durch identische Selector-Form +
   zusaetzlichen [data-theme="dark"] attribute -> höhere specificity als
   die Light-Quellrules, kein !important-War.
   ══════════════════════════════════════════════════════════════════════════ */

/* Block 1: Panel-Header (.ch, .card-head, .panel-head, .table-head)
   Override für L375-387: war rgba(255,255,255,.70). */
html[data-design="v2"][data-theme="dark"] body.app-v4 .ch,
html[data-design="v2"][data-theme="dark"] body.app-v4 .mb-dash__topbar,
html[data-design="v2"][data-theme="dark"] body.app-v4 .mb-cal__topbar,
html[data-design="v2"][data-theme="dark"] body.app-v4 .mb-cust__topbar,
html[data-design="v2"][data-theme="dark"] body.app-v4 .mb-req__topbar,
html[data-design="v2"][data-theme="dark"] body.app-v4 .mb-fin__hd,
html[data-design="v2"][data-theme="dark"] body.app-v4 .dash-recent-head,
html[data-design="v2"][data-theme="dark"] body.app-v4 .card-head,
html[data-design="v2"][data-theme="dark"] body.app-v4 .panel-head,
html[data-design="v2"][data-theme="dark"] body.app-v4 .table-head,
html[data-design="v2"][data-theme="dark"] body.app-v4 .table-header {
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(167,243,208,.14) !important;
  color: var(--rl-text) !important;
  backdrop-filter: blur(14px) saturate(1.10) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.10) !important;
}

/* Block 2: Card-Surfaces (.mb-kpi, .card, .panel, .umgmt-*, .mb-fin__*)
   Override für L391-418: war rgba(255,255,255,.94)/.78) Gradient. */
html[data-design="v2"][data-theme="dark"] body.app-v4 .mb-kpi,
html[data-design="v2"][data-theme="dark"] body.app-v4 .mb-schedule,
html[data-design="v2"][data-theme="dark"] body.app-v4 .mb-map-card,
html[data-design="v2"][data-theme="dark"] body.app-v4 .mb-requests,
html[data-design="v2"][data-theme="dark"] body.app-v4 .mb-fin__card,
html[data-design="v2"][data-theme="dark"] body.app-v4 .mb-fin__amount-display,
html[data-design="v2"][data-theme="dark"] body.app-v4 .mb-fin__side,
html[data-design="v2"][data-theme="dark"] body.app-v4 .card,
html[data-design="v2"][data-theme="dark"] body.app-v4 .panel,
html[data-design="v2"][data-theme="dark"] body.app-v4 .set-card,
html[data-design="v2"][data-theme="dark"] body.app-v4 .pop-card,
html[data-design="v2"][data-theme="dark"] body.app-v4 .table-wrap,
html[data-design="v2"][data-theme="dark"] body.app-v4 .ibox,
html[data-design="v2"][data-theme="dark"] body.app-v4 .umgmt-card,
html[data-design="v2"][data-theme="dark"] body.app-v4 .umgmt-stat,
html[data-design="v2"][data-theme="dark"] body.app-v4 .umgmt-plan,
html[data-design="v2"][data-theme="dark"] body.app-v4 .umgmt-tabs,
html[data-design="v2"][data-theme="dark"] body.app-v4 .umgmt-hero,
html[data-design="v2"][data-theme="dark"] body.app-v4 .dash-qa-card,
html[data-design="v2"][data-theme="dark"] body.app-v4 .content-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)),
    linear-gradient(135deg, rgba(80,214,196,.06), transparent 54%) !important;
  border: 1px solid rgba(167,243,208,.14) !important;
  color: var(--rl-text) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.40), 0 12px 28px rgba(0,0,0,.45) !important;
}

/* Block 3: Sub-Tab-Strips (.app-local-rail)
   Override für L9240-9281: war rgba(255,255,255,.74) Container + white Active. */
html[data-design="v2"][data-theme="dark"] body.app-v4 .app-local-rail {
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(167,243,208,.12) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.40) !important;
}
html[data-design="v2"][data-theme="dark"] body.app-v4 .app-local-rail__item {
  color: var(--rl-text-3) !important;
}
html[data-design="v2"][data-theme="dark"] body.app-v4 .app-local-rail__item:hover {
  color: var(--rl-text) !important;
  background: rgba(20,184,166,.10) !important;
}
html[data-design="v2"][data-theme="dark"] body.app-v4 .app-local-rail__item.is-active {
  background:
    linear-gradient(135deg, rgba(20,184,166,.20), rgba(80,214,196,.10)) !important;
  color: var(--rl-teal) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.45), 0 0 0 1px rgba(80,214,196,.24) !important;
}

/* Block 4: Kunden + Anfragen Listen + Detail-Surfaces
   Listen ohne explizites Background hatten browser-default-white. */
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-kunden .mb-cust__list,
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-kunden .mb-cust__detail,
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-kunden .mb-cust__detail-hd,
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-kunden .mb-cust__kpis,
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-kunden .mb-cust-context__card,
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-anfragen .mb-req__list,
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-anfragen .mb-req__detail,
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-anfragen .mb-req__detail-hd,
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-anfragen .mb-req__card,
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-anfragen .mb-req-decision-rail__card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)),
    linear-gradient(135deg, rgba(80,214,196,.06), transparent 54%) !important;
  border: 1px solid rgba(167,243,208,.14) !important;
  color: var(--rl-text) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.40), 0 12px 28px rgba(0,0,0,.45) !important;
}

/* Kunden-Row + Anfrage-Item Default + Selected */
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-kunden .mb-cust__row,
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-anfragen .mb-req__item {
  background: transparent !important;
  color: var(--rl-text) !important;
}
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-kunden .mb-cust__row:hover,
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-anfragen .mb-req__item:hover {
  background: rgba(80,214,196,.07) !important;
}
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-kunden .mb-cust__row[aria-selected="true"],
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-kunden .mb-cust__row[data-selected="true"],
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-anfragen .mb-req__item[data-selected="true"] {
  background: rgba(20,184,166,.16) !important;
  box-shadow: inset 3px 0 0 var(--rl-teal) !important;
}

/* mb-cust__detail-name/-sub: color:#fff war unconditional gesetzt -> auf Dark
   bewusst weiß behalten, auf Light entstand sonst Weiss-auf-Weiss. */
html[data-design="v2"][data-theme="light"] body.app-v4 #page-kunden .mb-cust__detail-name,
html[data-design="v2"][data-theme="light"] body.app-v4 #page-kunden .mb-cust__detail-sub,
html[data-design="v2"][data-theme="light"] body.app-v4 #page-kunden .mb-cust__detail-sub a {
  color: var(--rl-text) !important;
}

/* Quick-Access Buttons in Anfragen Right-Rail */
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-anfragen .mb-req-decision-rail__action,
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-anfragen .mb-req-decision-rail .quick-link {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(167,243,208,.14) !important;
  color: var(--rl-text) !important;
}
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-anfragen .mb-req-decision-rail__action:hover,
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-anfragen .mb-req-decision-rail .quick-link:hover {
  background: rgba(80,214,196,.10) !important;
  border-color: rgba(80,214,196,.28) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE K — Kunden List-Header + Right-Rail Dark (2026-05-23)
   Phase H Block 4 hat .mb-cust__list und .mb-cust-context__card abgedeckt,
   aber NICHT den Listen-Header (.mb-cust__list-hd L1359), den Right-Rail
   Container (.mb-cust-context L1822) und die Sammel-Rule mit :is() L2543.
   Diese drei Quellrules sind hier explicit für Dark übersteuert.
   ══════════════════════════════════════════════════════════════════════════ */

/* Listen-Header (1 KUNDEN / SORTIEREN: LETZTER BESUCH) */
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-kunden .mb-cust__list-hd {
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(167,243,208,.14) !important;
}

/* Right-Rail Container (.mb-cust-context, .mb-req-decision-rail, .mb-cal__insight) */
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-kalender .mb-cal__insight,
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-kunden .mb-cust-context,
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-anfragen .mb-req-decision-rail {
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)),
    linear-gradient(135deg, rgba(80,214,196,.10), transparent 62%) !important;
  border: 1px solid rgba(167,243,208,.14) !important;
  box-shadow: 0 4px 8px -4px rgba(0,0,0,.45), 0 12px 22px -10px rgba(0,0,0,.55) !important;
}

/* Sammel-Rule für Listen-Header + Tabs + KPIs + Anfragen-Body */
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-kunden :is(.mb-cust__list-hd, .mb-cust__tabs, .mb-cust__kpis),
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-anfragen :is(.mb-req__list-hd, .mb-req__body) {
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(167,243,208,.14) !important;
}

/* Phase L — Kunden Right-Rail Metric-Cards (NÄCHSTER SCHRITT / KONTEXT).
   Light-Quellrule L4007-4014 setzt linear-gradient(#ffffff -> #fbf9f3). */
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-kunden .mb-cust-context__metric {
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)),
    linear-gradient(135deg, rgba(80,214,196,.06), transparent 54%) !important;
  border: 1px solid rgba(167,243,208,.14) !important;
  box-shadow: 0 4px 8px -4px rgba(0,0,0,.45), 0 12px 22px -10px rgba(0,0,0,.55) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE M — Dashboard KPIs/Schedule + Anfragen Empty/Stats Dark (2026-05-23)
   Jede dieser Komponenten hat eine eigene #page-X-spezifische Light-Rule
   die Phase H Block 2 überschreibt. Hier explizite Dark-Overrides.
   ══════════════════════════════════════════════════════════════════════════ */

/* Dashboard KPI-Cards (UMSATZ HEUTE / TAGES-ROUTE / TERMINE HEUTE / OFFENE ANFRAGEN)
   Light-Quellrule L1130-1139. */
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-dashboard .mb-kpi {
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
    linear-gradient(135deg, rgba(80,214,196,.08), transparent 68%) !important;
  border: 1px solid rgba(167,243,208,.14) !important;
  box-shadow: 0 4px 8px -4px rgba(0,0,0,.45), 0 12px 24px -10px rgba(0,0,0,.55) !important;
}

/* Dashboard Schedule-Header ("Noch keine Termine geplant"-Bar).
   Light-Quellrule L1168-1174. */
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-dashboard .mb-schedule__hd {
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
    linear-gradient(135deg, rgba(20,184,166,.12), transparent 62%) !important;
  border-bottom: 1px solid rgba(167,243,208,.14) !important;
}

/* Dashboard Schedule-Body (Empty-State-Bereich mit Stunden-Linien).
   Light-Quellrule L1176-1183: dark grid-lines auf default-white. */
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-dashboard .mb-schedule__body {
  background:
    linear-gradient(90deg, rgba(20,184,166,.08), transparent 42%),
    repeating-linear-gradient(0deg, rgba(167,243,208,.06) 0 1px, transparent 1px 72px),
    rgba(255,255,255,.02) !important;
}

/* Anfragen Empty-State ("Keine Anfrage ausgewählt"-Panel).
   Light-Quellrule L6202-6208. */
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-anfragen .mb-req__detail-empty {
  background:
    radial-gradient(circle at 50% 0%, rgba(20,184,166,.12), transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)) !important;
  border: 1px solid rgba(167,243,208,.14) !important;
}

/* Anfragen Decision-Rail Stats (ANTWORTZEIT Ø + HEUTE OFFEN).
   Light-Quellrule L6288-6296. */
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-anfragen .mb-req-decision-rail__stat {
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)),
    linear-gradient(135deg, rgba(80,214,196,.06), transparent 54%) !important;
  border: 1px solid rgba(167,243,208,.14) !important;
  box-shadow: 0 4px 8px -5px rgba(0,0,0,.45), 0 10px 20px -14px rgba(0,0,0,.55) !important;
}
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-anfragen .mb-req-decision-rail__stat:hover {
  border-color: rgba(80,214,196,.28) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE N — Finanzen Dark Mode (2026-05-23)
   #page-fixkosten + #page-rechner haben drei Selektor-Bloecke mit
   hartkodierten weissen Gradients (rgba(255,255,255,.94)/.78/.82/.96)
   ohne [data-theme="dark"]-Qualifier — diese leuchten im Dark Mode hell
   als hellgrau-weisse Flaechen. Hier konsolidiert auf dunkle Glass-Surface
   geflippt. Selektoren matchen die Light-Quellrules + zusaetzlicher
   [data-theme="dark"]-Attribute -> höhere Specificity, kein !important-War.
   ══════════════════════════════════════════════════════════════════════════ */

/* Block 1: Toggle-Wraps (Steuern: Regelbest./KU + Manuell/Auto)
   Light-Quellrule L10156-10166: weiß-on-weiß Gradient. */
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-fixkosten .mb-fin__page .kl-toggle-wrap {
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)),
    linear-gradient(135deg, rgba(80,214,196,.06), transparent 54%) !important;
  border: 1px solid rgba(167,243,208,.14) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.40), 0 6px 14px rgba(0,0,0,.45) !important;
}

/* Block 2: Mb-Fin-Context-Card (Vorsteuer/Prognose/Berichte-Begleitcard)
   Light-Quellrule L10190-10201: doppelter weiß-Gradient + emerald-wash. */
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-fixkosten .mb-fin-context {
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)),
    linear-gradient(135deg, rgba(80,214,196,.08), transparent 60%) !important;
  border: 1px solid rgba(167,243,208,.14) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.40), 0 12px 28px rgba(0,0,0,.45) !important;
}

/* Block 3: Prognose Empty-State-Card
   Light-Quellrule L10264-10270: weiß-Gradient. */
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-fixkosten .mb-fin__page[data-fin-page="forecast"] .empty {
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)),
    linear-gradient(135deg, rgba(80,214,196,.06), transparent 54%) !important;
  border: 1px solid rgba(167,243,208,.14) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.40), 0 12px 28px rgba(0,0,0,.45) !important;
  color: var(--rl-text-2) !important;
}

/* Block 4: Vorsteuer-Result-Card border-accent
   Light-Quellrule L10258-10260: rgba(14,143,131,.22) ist dark-grade ok,
   aber im Dark Mode darf es mehr sichtbar sein. */
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-fixkosten .mb-fin__page[data-fin-page="vat"] > .gcol > .card {
  border: 1px solid rgba(80,214,196,.28) !important;
}

/* Block 5: Detail-Zeilen (Steuern .tax-row, SV .sv-row, Vorsteuer .vst-l)
   verlassen sich auf body-Text-Color, aber wenn sie inline-styles oder
   weitere Light-Fallbacks haben, können sie zu dunkel werden — explizit
   auf --rl-text-2 setzen für kontrolliertes Reading. */
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-fixkosten .mb-fin__page .tax-row,
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-fixkosten .mb-fin__page .sv-row,
html[data-design="v2"][data-theme="dark"] body.app-v4 #page-fixkosten .mb-fin__page .vst-l {
  color: var(--rl-text-2) !important;
}