/* ==========================================================================
   64-mobile-app-shell.css
   Final mobile app shell override for the logged-in user area.
   Loaded last in app.html so older page-specific mobile fixes can stay intact.
   ========================================================================== */

@media (max-width: 640px) {
  html[data-design="v2"] {
    --mobile-nav-h: calc(64px + env(safe-area-inset-bottom, 0px));
    --mobile-page-h: calc(var(--mb-mobile-visual-height, 100dvh) - var(--mobile-nav-h));
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: manipulation;
  }

  html[data-design="v2"] body.app-v4 {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: var(--mb-mobile-visual-height, 100dvh);
    min-height: var(--mb-mobile-visual-height, 100dvh);
    overflow: hidden !important;
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  html[data-design="v2"] body.app-v4 #app.app-visible {
    position: relative;
    display: block !important;
    width: 100%;
    height: var(--mb-mobile-visual-height, 100dvh) !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

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

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

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

  html[data-design="v2"] body.app-v4 #app > .page.active {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: var(--mobile-page-h) !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px 12px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    scroll-padding-bottom: 24px;
  }

  html[data-design="v2"] body.app-v4 #app > .page.active > * {
    max-width: 100%;
    min-width: 0;
  }

  html[data-design="v2"] body.app-v4 .mob-bnav {
    display: flex !important;
    height: var(--mobile-nav-h) !important;
    min-height: var(--mobile-nav-h) !important;
    padding: 5px max(8px, env(safe-area-inset-left, 0px)) max(5px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-right, 0px)) !important;
    align-items: stretch !important;
    border-top: 1px solid rgba(37,50,61,.12) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.82)),
      linear-gradient(120deg, rgba(14,143,131,.10), transparent 62%) !important;
    box-shadow: 0 -18px 54px rgba(25,39,54,.12) !important;
    backdrop-filter: blur(24px) saturate(1.18) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.18) !important;
    z-index: 240 !important;
  }

  html[data-design="v2"] body.app-v4 .mob-bnav-item {
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 6px 2px 5px !important;
    border-radius: 14px !important;
    color: var(--text-secondary, #53606b) !important;
  }

  html[data-design="v2"] body.app-v4 .mob-bnav-item.active {
    color: var(--color-primary, #0e8f83) !important;
    background: rgba(14,143,131,.09) !important;
  }

  html[data-design="v2"] body.app-v4 .mobile-more-sheet {
    max-height: min(82vh, 680px) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  html[data-design="v2"] body.app-v4 .mobile-more-item,
  html[data-design="v2"] body.app-v4 .mobile-more-toggle-grp button {
    min-height: 44px !important;
  }

  html[data-design="v2"] body.app-v4 #bp-cookie-banner {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    max-height: min(46vh, 360px) !important;
    padding: 14px !important;
    border-radius: 18px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  html[data-design="v2"] body.app-v4:has(#app.app-visible) #bp-cookie-banner {
    bottom: calc(var(--mobile-nav-h) + 8px) !important;
    max-height: min(32vh, 260px) !important;
  }

  html[data-design="v2"] body.app-v4 #bp-cookie-banner .bpcb-title {
    margin-bottom: 5px !important;
    font-size: 17px !important;
    line-height: 1.18 !important;
  }

  html[data-design="v2"] body.app-v4 #bp-cookie-banner .bpcb-text {
    font-size: 13px !important;
    line-height: 1.42 !important;
  }

  html[data-design="v2"] body.app-v4 #bp-cookie-banner .bpcb-actions {
    gap: 8px !important;
    margin-top: 12px !important;
  }

  html[data-design="v2"] body.app-v4 #bp-cookie-banner .bp-cookie-btn {
    flex: 1 1 100% !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
  }

  html[data-design="v2"] body.app-v4 input,
  html[data-design="v2"] body.app-v4 select,
  html[data-design="v2"] body.app-v4 textarea,
  html[data-design="v2"] body.app-v4 button {
    font-size: max(16px, 1em);
  }

  html[data-design="v2"] body.app-v4 :is(button, .btn, .btn-p, .btn-n, .mb-btn, .icon-btn, .mclose, [role="button"]) {
    min-height: 44px !important;
  }

  html[data-design="v2"] body.app-v4 .mclose,
  html[data-design="v2"] body.app-v4 .icon-btn,
  html[data-design="v2"] body.app-v4 .btn-ico,
  html[data-design="v2"] body.app-v4 .mb-icon-btn,
  html[data-design="v2"] body.app-v4 [class*="icon-btn"] {
    width: 44px !important;
    min-width: 44px !important;
  }

  html[data-design="v2"] body.app-v4 .mbg.open {
    position: fixed !important;
    inset: 0 !important;
    align-items: flex-end !important;
    overflow: hidden !important;
  }

  html[data-design="v2"] body.app-v4 .modal,
  html[data-design="v2"] body.app-v4 .modal-sm {
    width: 100% !important;
    max-width: none !important;
    max-height: min(92dvh, calc(var(--mb-mobile-visual-height, 100dvh) - 24px)) !important;
    border-radius: 22px 22px 0 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  html[data-design="v2"] body.app-v4 .mfoot {
    position: sticky;
    bottom: 0;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    background: inherit;
    z-index: 2;
  }

  html[data-design="v2"] body.app-v4 :is(.mb-page-hero, .mb-fin-command.mb-page-hero, .mb-cal-command.mb-page-hero, .mb-treat-command.mb-page-hero, .umgmt-command.mb-page-hero) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "intro"
      "focus"
      "controls" !important;
    gap: 12px !important;
    min-height: 0 !important;
    padding: 18px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  html[data-design="v2"] body.app-v4 :is(.mb-page-hero__intro, .mb-page-hero__focus, .mb-page-hero__controls) {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html[data-design="v2"] body.app-v4 :is(.mb-page-hero__intro strong, .umgmt-hero-title) {
    max-width: 100% !important;
    font-size: clamp(28px, 11vw, 38px) !important;
    line-height: 1.02 !important;
    overflow-wrap: anywhere !important;
    letter-spacing: 0 !important;
  }

  html[data-design="v2"] body.app-v4 .mb-page-hero__copy {
    margin-top: 6px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  html[data-design="v2"] body.app-v4 :is(.mb-page-hero__focus, .mb-cal-ops-hero__focus, .umgmt-command__focus) {
    padding: 12px !important;
    min-height: 0 !important;
  }

  html[data-design="v2"] body.app-v4 .mb-page-hero__controls,
  html[data-design="v2"] body.app-v4 .mb-page-hero__actions,
  html[data-design="v2"] body.app-v4 .umgmt-hero-cta {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  html[data-design="v2"] body.app-v4 :is(.mb-page-hero__controls > *, .mb-page-hero__actions > *, .umgmt-hero-cta > *) {
    width: 100% !important;
    min-width: 0 !important;
  }

  html[data-design="v2"] body.app-v4 :is(.card, .panel, .ibox, .set-section, .mb-fin__card, .mb-treat-main, .mb-treat-rail-card, .umgmt-content-panel, .umgmt-card) {
    border-radius: 14px !important;
  }

  html[data-design="v2"] body.app-v4 :is(.g2, .g3, .gcol, .gcol2, .kgrid) {
    grid-template-columns: 1fr !important;
  }

  html[data-design="v2"] body.app-v4 :is(.table-wrap, .tscroll, .card:has(table), .cb:has(table), .panel:has(table)) {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  html[data-design="v2"] body.app-v4 :is(#page-rechner, #page-nachrichten, #page-formulare, #page-shop, #page-marketing, #page-berichte) table {
    width: max-content !important;
    min-width: min(680px, calc(100vw - 24px)) !important;
    max-width: none !important;
  }

  html[data-design="v2"] body.app-v4 :is(#page-nachrichten, #page-formulare, #page-shop, #page-marketing) :is(.card, .panel, .cb) {
    min-width: 0 !important;
    overflow-x: auto !important;
  }
}

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

  html[data-design="v2"] body.app-v4 #page-fixkosten > [data-design-version="v2"] {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 12px 12px 0 !important;
    overflow: hidden !important;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__side {
    position: static !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0 6px !important;
    gap: 8px !important;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__side::-webkit-scrollbar {
    display: none !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: 44px !important;
    padding: 10px 13px !important;
    white-space: nowrap !important;
    scroll-snap-align: start;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__main {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 0 0 calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-command.mb-page-hero {
    margin-bottom: 12px !important;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-command.mb-page-hero .mb-page-hero__copy {
    display: none !important;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin-command.mb-page-hero .mb-page-hero__focus {
    padding: 12px !important;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page {
    padding-bottom: 20px !important;
  }

  html[data-design="v2"] body.app-v4 #page-fixkosten .mb-fin__page :is(.card, .mb-fin__card, .cb, .panel) {
    min-width: 0 !important;
  }
}

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

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal--ops {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 12px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command.mb-page-hero {
    margin-bottom: 12px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-command .mb-page-hero__copy,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__sidebar,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-rail,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__insight,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__legend,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__homebase {
    display: none !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal-workspace {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 10px !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,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__actions {
    width: 100% !important;
    min-width: 0 !important;
  }

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

  html[data-design="v2"] body.app-v4 #page-kalender :is(.mb-cal__nav-btn, .mb-btn--sm, .mb-cal__today-btn) {
    height: 44px !important;
    min-height: 44px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-tight .mb-cal-command__viewswitch .mb-btn,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-cramped .mb-cal-command__viewswitch .mb-btn,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-tight .mb-cal-command .mb-page-hero__actions .mb-btn,
  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal.is-viewport-cramped .mb-cal-command .mb-page-hero__actions .mb-btn {
    height: 44px !important;
    min-height: 44px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__nav-btn {
    width: 44px !important;
    min-width: 44px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender .mb-cal__view {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 420px !important;
    height: auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  html[data-design="v2"] body.app-v4 #page-kalender :is(.mb-cal-week, .mb-cal-week__hd, .mb-cal-week__body) {
    min-width: 720px !important;
  }

  html[data-design="v2"] body.app-v4 #page-kalender :is(.mb-cal-week__body, .mb-cal-week__grid) {
    max-height: none !important;
    overflow: visible !important;
  }
}

@media (max-width: 640px) {
  html[data-design="v2"] body.app-v4 #page-behandlungen.active,
  html[data-design="v2"] body.app-v4 #page-benutzer.active,
  html[data-design="v2"] body.app-v4 #page-team.active {
    padding: 12px !important;
  }

  html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-command .mb-page-hero__copy,
  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 {
    display: none !important;
  }

  html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-workspace,
  html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-main,
  html[data-design="v2"] body.app-v4 #page-benutzer .umgmt-workspace,
  html[data-design="v2"] body.app-v4 #page-benutzer .umgmt-command-rail {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-admin-list,
  html[data-design="v2"] body.app-v4 #page-benutzer .umgmt-content-body {
    padding: 12px !important;
  }

  html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-card {
    display: grid !important;
    grid-template-columns: 5px minmax(0, 1fr) !important;
  }

  html[data-design="v2"] body.app-v4 #page-behandlungen .mb-treat-card__actions {
    grid-column: 2 !important;
    padding: 0 12px 12px 0 !important;
  }

  html[data-design="v2"] body.app-v4 #page-benutzer .umgmt-hero-sub,
  html[data-design="v2"] body.app-v4 #page-benutzer .umgmt-command__focus,
  html[data-design="v2"] body.app-v4 #page-benutzer .umgmt-rail-note {
    display: none !important;
  }

  html[data-design="v2"] body.app-v4 #page-benutzer .umgmt-stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html[data-design="v2"] body.app-v4 #page-benutzer .umgmt-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }

  html[data-design="v2"] body.app-v4 #page-benutzer .umgmt-tab {
    flex: 0 0 auto !important;
    min-height: 44px !important;
  }
}

@media (max-width: 640px) {
  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash,
  html[data-design="v2"] body.app-v4 #page-dashboard .mb-dash__main,
  html[data-design="v2"] body.app-v4 #page-kunden :is(.mb-cust, .mb-cust__main),
  html[data-design="v2"] body.app-v4 #page-anfragen :is(.mb-req, .mb-req__main) {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen .mb-req__search input,
  html[data-design="v2"] body.app-v4 #page-kunden .mb-cust__search input {
    min-height: 44px !important;
  }

  html[data-design="v2"] body.app-v4 #page-anfragen :is(a[href^="tel:"], a[href^="mailto:"]),
  html[data-design="v2"] body.app-v4 #page-kunden :is(a[href^="tel:"], a[href^="mailto:"], .mb-cust__section-action) {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-layout {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 8px !important;
    margin-bottom: 12px !important;
    scrollbar-width: none;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-sidebar::-webkit-scrollbar {
    display: none;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-nav-item {
    flex: 0 0 auto !important;
    min-height: 44px !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-switch,
  html[data-design="v2"] body.app-v4 #page-einstellungen a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen input[type="checkbox"],
  html[data-design="v2"] body.app-v4 #page-einstellungen input[type="radio"] {
    width: 22px !important;
    height: 22px !important;
  }

  /* Mobile-first settings workspace. The earlier relaunch CSS keeps the
     desktop rail/card language; phones need a compact hub + sticky subnav. */
  html[data-design="v2"] body.app-v4 #page-einstellungen {
    --settings-mobile-bottom-gap: var(--settings-mobile-scroll-bottom, calc(var(--mobile-nav-h, 72px) + 96px));
    scroll-padding-top: 112px !important;
    scroll-padding-bottom: var(--settings-mobile-bottom-gap) !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-shell {
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px 10px var(--settings-mobile-bottom-gap) !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero.mb-page-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "intro controls" !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 0 !important;
    margin: 0 0 10px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 28px rgba(14, 143, 131, .18) !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__intro {
    min-width: 0 !important;
    gap: 2px !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__eyebrow,
  html[data-design="v2"] body.app-v4 #page-einstellungen .mb-page-hero__copy,
  html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__context-label {
    display: none !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__intro > strong {
    font-size: 24px !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__controls {
    width: auto !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__context-card {
    display: none !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__controls .mb-page-hero__actions {
    width: auto !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__controls .mb-page-hero__actions .mb-btn {
    width: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    font-size: 0 !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-hero__controls .mb-page-hero__actions .mb-btn svg {
    width: 18px !important;
    height: 18px !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-workspace {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-rail {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
    margin: 0 0 10px !important;
    overflow: visible !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-rail__inner {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 10px !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 26px rgba(28, 42, 36, .07) !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-rail__header {
    grid-column: 1 / -1 !important;
    padding: 0 0 4px !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-rail__eyebrow {
    font-size: 10px !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-rail__header strong {
    font-size: 18px !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-nav-cluster {
    min-width: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-nav-cluster__items {
    display: none !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-nav-group {
    width: 100% !important;
    min-height: 64px !important;
    padding: 10px !important;
    gap: 8px !important;
    border: 1px solid rgba(35, 55, 48, .11) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .84) !important;
    box-shadow: none !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-nav-cluster[data-active="true"] .set-nav-group {
    border-color: rgba(14, 143, 131, .30) !important;
    background:
      linear-gradient(135deg, rgba(14, 143, 131, .12), rgba(255, 255, 255, .92)),
      rgba(255, 255, 255, .92) !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-nav-group__icon {
    width: 30px !important;
    height: 30px !important;
    border-radius: 11px !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-nav-group__label {
    min-width: 0 !important;
    font-size: 12px !important;
    line-height: 1.18 !important;
    text-transform: none !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-overview {
    position: sticky !important;
    top: 0 !important;
    z-index: 8 !important;
    display: block !important;
    margin: 0 0 10px !important;
    padding: 10px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .94) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.1) !important;
    backdrop-filter: blur(18px) saturate(1.1) !important;
    box-shadow: 0 10px 26px rgba(28, 42, 36, .10) !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-overview__head {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-overview__eyebrow {
    display: none !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-overview__head strong {
    font-size: 15px !important;
    line-height: 1.15 !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-overview__meta {
    margin-left: auto !important;
    font-size: 10px !important;
    letter-spacing: .06em !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-overview__nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin: 0 -10px !important;
    padding: 0 10px 2px !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-overview__nav::-webkit-scrollbar {
    display: none !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-group-switch,
  html[data-design="v2"] body.app-v4 #page-einstellungen .set-subnav__item {
    flex: 0 0 auto !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-section-grid {
    gap: 10px !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-section {
    border-radius: 14px !important;
    scroll-margin-top: 116px !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-sec-head {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 14px 14px 8px !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-sec-ico {
    width: 42px !important;
    height: 42px !important;
    border-radius: 13px !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-sec-title {
    font-size: 20px !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-sec-sub {
    margin-top: 4px !important;
    max-width: none !important;
    font-size: 13px !important;
    line-height: 1.42 !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-sec-body {
    padding: 4px 14px 16px !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen :is(.set-grp, .field) {
    min-width: 0 !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .field {
    display: block !important;
    margin-bottom: 12px !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .fl,
  html[data-design="v2"] body.app-v4 #page-einstellungen .slbl {
    display: block !important;
    margin: 0 0 7px !important;
    font-size: 13px !important;
    line-height: 1.28 !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .hint,
  html[data-design="v2"] body.app-v4 #page-einstellungen .fl .hint {
    display: block !important;
    margin-top: 3px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen :is(input, select, textarea) {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    font-size: 16px !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen textarea {
    min-height: 128px !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen :is(.g2, .g3, .g4, .gcol, .sup-form-row-2) {
    grid-template-columns: 1fr !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen div:has(> #lmt-single) {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto !important;
    padding: 4px !important;
    scrollbar-width: none !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen div:has(> #lmt-single)::-webkit-scrollbar {
    display: none !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen :is(#lmt-single, #lmt-dual, #lmt-auto) {
    flex: 0 0 auto !important;
    min-width: 148px !important;
    min-height: 44px !important;
    white-space: nowrap !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen #logo-panel-dual > div,
  html[data-design="v2"] body.app-v4 #page-einstellungen #logo-panel-auto > div {
    grid-template-columns: 1fr !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .ibox,
  html[data-design="v2"] body.app-v4 #page-einstellungen .backup-warning {
    padding: 12px !important;
    font-size: 13px !important;
    line-height: 1.45 !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 {
    bottom: calc(var(--mobile-nav-h, 72px) + 8px) !important;
    padding: 0 10px !important;
    z-index: 260 !important;
  }

  html[data-design="v2"] body.app-v4 #page-einstellungen .set-save-bar .set-save-bar__actions .btn-p {
    min-height: 50px !important;
    border-radius: 14px !important;
  }

}

@media (max-width: 380px) {
  html[data-design="v2"] body.app-v4 :is(.mb-page-hero, .mb-fin-command.mb-page-hero, .mb-cal-command.mb-page-hero, .mb-treat-command.mb-page-hero, .umgmt-command.mb-page-hero) {
    padding: 14px !important;
  }

  html[data-design="v2"] body.app-v4 :is(.mb-page-hero__intro strong, .umgmt-hero-title) {
    font-size: clamp(25px, 10vw, 32px) !important;
  }

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