/* ═════════════════════════════════════════════════════════════════
   38-SKIN.CSS — AGGRESSIVER Design-Refresh
   Übernimmt die EXAKTEN Styles der .mb-* Komponenten und wendet
   sie auf die bestehenden Klassen an. Lädt zuletzt → gewinnt
   überall via CSS-Kaskade.

   ALLE Regeln sind unter html[data-design="v2"] gescoped.
   → Toggle in nav schaltet via data-design="v1" auf Original zurück.
   ═════════════════════════════════════════════════════════════════ */

html[data-design="v2"] {

/* ══ BUTTONS ════════════════════════════════════════════════════════
   Original: .btn{padding:7px 14px;font-weight:600;border-radius:8px}
            .btn-p mit Gradient + Glow-Schatten
   NEU:     .mb-btn-Look — flat, fixe Höhe, lighter weight
   ═══════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 34px !important;
  padding: 0 14px !important;
  border: 1px solid var(--b1) !important;
  background: var(--s2) !important;
  color: var(--t1) !important;
  border-radius: 10px !important;
  font: inherit !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  transition: var(--tr) !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}
.btn:hover {
  background: var(--s3) !important;
  transform: none !important;
}

.btn-p {
  background: var(--np) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}
.btn-p:hover {
  filter: brightness(1.08) !important;
  background: var(--np) !important;
  box-shadow: 0 2px 8px rgba(200,149,90,.25) !important;
}

.btn-b {
  background: var(--nb) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}
.btn-b:hover {
  filter: brightness(1.08) !important;
  background: var(--nb) !important;
  box-shadow: 0 2px 8px rgba(59,158,255,.25) !important;
}

.btn-g {
  background: rgba(200,149,90,.1) !important;
  color: var(--np) !important;
  border-color: rgba(200,149,90,.2) !important;
}
.btn-gb {
  background: rgba(59,158,255,.1) !important;
  color: var(--nb) !important;
  border-color: rgba(59,158,255,.2) !important;
}
.btn-d {
  background: transparent !important;
  color: #e05252 !important;
  border-color: var(--b2) !important;
}
.btn-d:hover {
  background: rgba(224,82,82,.1) !important;
  border-color: #e05252 !important;
}
.btn-n {
  background: var(--s2) !important;
  color: var(--t2) !important;
  border-color: var(--b1) !important;
}
.btn-n:hover {
  background: var(--s3) !important;
  border-color: var(--b2) !important;
  color: var(--t1) !important;
}

.btn-sm {
  height: 30px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
}
.btn-ico {
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 10px !important;
}
.btn-full {
  width: 100% !important;
  height: 38px !important;
  font-size: 13px !important;
}

/* Empty CTA: flat */
.empty-cta {
  background: var(--np) !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
}
.empty-cta:hover {
  filter: brightness(1.08) !important;
  background: var(--np) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(200,149,90,.3) !important;
}
.empty-cta-secondary {
  background: var(--s2) !important;
  color: var(--t1) !important;
  border: 1px solid var(--b1) !important;
}


/* ══ CARDS — flat mit klaren Rahmen ════════════════════════════════ */
.card {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  overflow: hidden;
}

.card:hover {
  border-color: var(--b2) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}
[data-theme=dark] .card:hover {
  box-shadow: 0 1px 3px rgba(0,0,0,.2) !important;
}

.ch {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--b1) !important;
  background: transparent !important;
}

.ct {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--t3) !important;
}

.cb {
  padding: 16px !important;
}


/* ══ KPI CARDS — minimalistisch, kein Glow ════════════════════════ */
.kpi {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
}

.kpi:hover {
  border-color: var(--b2) !important;
  transform: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}
[data-theme=dark] .kpi:hover {
  box-shadow: 0 1px 3px rgba(0,0,0,.2) !important;
}

.kg {
  display: none !important;
}

.ks {
  height: 0 !important;
}

.kpi[class*=v] .ks {
  height: 2px !important;
  box-shadow: none !important;
}

.kval {
  text-shadow: none !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  line-height: 1.1 !important;
}

.klbl {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--t3) !important;
  margin-bottom: 6px !important;
}

.ksub {
  font-size: 11.5px !important;
  color: var(--t3) !important;
  margin-top: 6px !important;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

.ktag {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  border-radius: 100px !important;
  padding: 2px 8px !important;
}

[class*=v] .kval { text-shadow: none !important; }


/* ══ MODALS — soft & clean ═════════════════════════════════════════ */
.mbg {
  background: rgba(0,0,0,.5) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.modal {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 22px !important;
  box-shadow: 0 12px 48px rgba(0,0,0,.18) !important;
  overflow: hidden;
}
[data-theme=dark] .modal {
  box-shadow: 0 12px 48px rgba(0,0,0,.5) !important;
}

.mhd {
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--b1) !important;
  background: var(--s1) !important;
}

.mtt {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--t1) !important;
  letter-spacing: -0.005em !important;
}

.mclose {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: 1px solid var(--b1) !important;
  color: var(--t3) !important;
}
.mclose:hover {
  background: var(--s2) !important;
  color: var(--t1) !important;
  border-color: var(--b2) !important;
}

.mbody {
  padding: 18px 20px !important;
}

.mfoot {
  padding: 14px 20px !important;
  border-top: 1px solid var(--b1) !important;
  background: var(--s2) !important;
}

/* Custom dialog */
.dlg-bg {
  background: rgba(0,0,0,.5) !important;
  backdrop-filter: blur(4px) !important;
}
.dlg-box {
  border-radius: 18px !important;
  box-shadow: 0 12px 48px rgba(0,0,0,.18) !important;
  border: 1px solid var(--b1) !important;
}
[data-theme=dark] .dlg-box {
  box-shadow: 0 12px 48px rgba(0,0,0,.55) !important;
}


/* ══ FORMS — clean focus rings ═════════════════════════════════════ */
input[type=number],
input[type=text],
input[type=tel],
input[type=email],
input[type=password],
input[type=date],
input[type=time],
input[type=datetime-local],
input[type=month],
input[type=week],
input[type=search],
input[type=url],
input:not([type]),
select,
textarea {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  min-height: 36px !important;
  transition: var(--tr) !important;
  color: var(--t1) !important;
}

input:hover, select:hover, textarea:hover {
  border-color: var(--b2) !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--np) !important;
  background: var(--s1) !important;
  box-shadow: 0 0 0 3px rgba(200,149,90,.15) !important;
  outline: none !important;
}

.fl {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--t2) !important;
  margin-bottom: 6px !important;
}

.fl .hint {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: var(--t3) !important;
}


/* ══ TABLE INPUTS — slim ═══════════════════════════════════════════ */
.ti {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 7px !important;
  font-weight: 400 !important;
  padding: 5px 9px !important;
}
.ti:focus {
  border-color: var(--np) !important;
  box-shadow: 0 0 0 2px rgba(200,149,90,.15) !important;
  background: var(--s1) !important;
}


/* ══ PILLS / BADGES ═══════════════════════════════════════════════ */
.pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  border: 0 !important;
}

.pok {
  background: rgba(29,217,122,.12) !important;
  color: var(--ng) !important;
  border: 0 !important;
}

.perr {
  background: rgba(212,148,58,.15) !important;
  color: var(--na) !important;
  border: 0 !important;
}

.nbadge {
  background: var(--s2) !important;
  color: var(--t3) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 100px !important;
  padding: 1px 7px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}


/* ══ NAV ══════════════════════════════════════════════════════════ */
.brand-icon {
  background: var(--np) !important;
  box-shadow: none !important;
  border-radius: 9px !important;
}

.ntab {
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
}
.ntab.active {
  font-weight: 600 !important;
}
.ntab.active .nbadge {
  background: rgba(200,149,90,.15) !important;
  color: var(--np) !important;
  border-color: rgba(200,149,90,.25) !important;
}

.ndropitem {
  font-weight: 500 !important;
}
.ndropitem.active {
  font-weight: 600 !important;
}
.ndropdown {
  border: 1px solid var(--b1) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
}
[data-theme=dark] .ndropdown {
  box-shadow: 0 8px 24px rgba(0,0,0,.35) !important;
}


/* ══ TABLES ═══════════════════════════════════════════════════════ */
thead th {
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  background: var(--s2) !important;
  color: var(--t3) !important;
  font-size: 10.5px !important;
  border-bottom: 1px solid var(--b1) !important;
}

td {
  border-bottom-color: var(--b1) !important;
  font-size: 13px !important;
}

tbody tr:hover td {
  background: rgba(200,149,90,.04) !important;
}

.tv {
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
}

.tv.main {
  font-weight: 600 !important;
  color: var(--t1) !important;
}


/* ══ PAGE TITLE ═══════════════════════════════════════════════════ */
.page {
  padding: 20px 22px 36px !important;
}

.pg-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.018em !important;
  color: var(--t1) !important;
}

.pg-sub {
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: var(--t3) !important;
  margin-top: 2px !important;
}


/* ══ SETTINGS / PROFIL PAGE ═══════════════════════════════════════ */
.set-section {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  overflow: hidden;
}
.set-section:hover {
  border-color: var(--b2) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}
[data-theme=dark] .set-section:hover {
  box-shadow: 0 1px 3px rgba(0,0,0,.2) !important;
}

.set-sec-head {
  padding: 16px 20px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--b1) !important;
}

.set-sec-ico {
  background: rgba(200,149,90,.12) !important;
  border: 1px solid rgba(200,149,90,.18) !important;
  border-radius: 10px !important;
}

.set-sec-title {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
}

.set-sec-sub {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--t3) !important;
}

.set-sec-body {
  padding: 18px 20px !important;
}

.set-sidebar {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  padding: 8px !important;
}

.set-nav-item {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
}

.set-nav-item.active {
  font-weight: 600 !important;
  background: rgba(200,149,90,.1) !important;
}

.set-save-bar {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 14px !important;
  box-shadow: 0 -8px 24px rgba(0,0,0,.06) !important;
}
[data-theme=dark] .set-save-bar {
  box-shadow: 0 -8px 24px rgba(0,0,0,.3) !important;
}


/* ══ INFO BOXES ═══════════════════════════════════════════════════ */
.ibox {
  border-radius: 12px !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  padding: 10px 14px !important;
}


/* ══ INTERVAL BUTTONS (Rechner) ═══════════════════════════════════ */
.ivbtn {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 10px !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  padding: 8px 10px !important;
}
.ivbtn:hover {
  border-color: var(--b2) !important;
  background: var(--s2) !important;
  color: var(--t1) !important;
}
.ivbtn.sel {
  background: rgba(200,149,90,.1) !important;
  border-color: rgba(200,149,90,.3) !important;
  color: var(--np) !important;
}
.ivbtn .ivn {
  font-weight: 700 !important;
  font-size: 14px !important;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}


/* ══ TOGGLE BUTTONS ═══════════════════════════════════════════════ */
.btn-toggle {
  background: var(--s2) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 100px !important;
  font-weight: 500 !important;
  font-size: 11.5px !important;
  padding: 6px 14px !important;
  color: var(--t3) !important;
}
.btn-toggle.on {
  background: rgba(200,149,90,.12) !important;
  color: var(--np) !important;
  border-color: rgba(200,149,90,.3) !important;
}


/* ══ THEME SEGMENT ════════════════════════════════════════════════ */
.theme-seg {
  background: var(--s2) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 100px !important;
  padding: 3px !important;
}
.tseg {
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  font-size: 10.5px !important;
  border-radius: 100px !important;
}
.tseg.active {
  background: var(--s1) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.05) !important;
}


/* ══ PROGRESS BARS ════════════════════════════════════════════════ */
.prog {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.ptrack {
  background: var(--s3) !important;
  border: 0 !important;
  border-radius: 100px !important;
}


/* ══ EMPTY STATES ═════════════════════════════════════════════════ */
.empty {
  padding: 48px 24px !important;
}
.et {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--t1) !important;
  letter-spacing: -0.005em !important;
}
.es {
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: var(--t3) !important;
}


/* ══ RECOMMENDATION CARDS ═════════════════════════════════════════ */
.rec {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.rtt {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
}
.rtx {
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}


/* ══ MOBILE DRAWER & BOTTOM NAV ═══════════════════════════════════ */
.mob-drawer {
  border-right: 1px solid var(--b1) !important;
}
.mob-drawer-item {
  border-radius: 10px !important;
  font-weight: 500 !important;
  padding: 10px 12px !important;
}
.mob-drawer-item.mob-active {
  background: rgba(200,149,90,.1) !important;
  font-weight: 600 !important;
}


/* ══ NAV ICON BUTTONS — nur Border-Radius, NICHT Größe ═════════════ */
/* Größe darf von der bestehenden Desktop-Sidebar-CSS überschrieben werden */
.icon-btn {
  border-radius: 10px;
}


/* ══ ONBOARDING PANEL ═════════════════════════════════════════════ */
.ob-panel {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}


/* ══ NUMBERS — tabular everywhere ═════════════════════════════════ */
.tv, tfoot td, .kval, .ksub,
.set-kbd, .ivn {
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}


/* ══ NPROGRESS ════════════════════════════════════════════════════ */
#nprogress .bar {
  background: var(--np) !important;
  box-shadow: 0 0 6px var(--np) !important;
  height: 2px !important;
}


/* ══ SCROLLBAR ════════════════════════════════════════════════════ */
::-webkit-scrollbar-thumb {
  background: var(--b2) !important;
  border-radius: 100px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--b3) !important;
}


/* ══════════════════════════════════════════════════════════════════
   MOBILE-SPECIFIC
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .pg-title { font-size: 18px !important; }

  .card, .set-section, .kpi, .rec, .prog, .ob-panel, .set-sidebar {
    box-shadow: none !important;
  }

  .modal {
    border-radius: 22px 22px 0 0 !important;
    box-shadow: 0 -8px 32px rgba(0,0,0,.18) !important;
  }
  [data-theme=dark] .modal {
    box-shadow: 0 -8px 32px rgba(0,0,0,.5) !important;
  }

  .btn { height: auto !important; min-height: 44px !important; padding: 10px 16px !important; font-size: 13px !important; }
  .btn-sm { min-height: 36px !important; }
  .btn-ico { width: 44px !important; height: 44px !important; }
}


/* ══════════════════════════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════════════════════════ */

@media print {
  .nav, .mob-bnav, .mob-menu-btn, .mob-drawer, .mob-overlay,
  .set-save-bar, .icon-btn,
  #ann-banner, #operator-preview-bar {
    display: none !important;
  }
  .card, .kpi, .set-section {
    box-shadow: none !important;
    border: 1px solid var(--b2) !important;
  }
}


/* ══════════════════════════════════════════════════════════════════
   UNIVERSAL TAB COVERAGE — gilt für alle nicht migrierten Pages
   damit Modern-Look auf jeder Seite konsistent ist.
   ══════════════════════════════════════════════════════════════════ */

/* ── Customer-Stats (Kunden-Tab v1) ────────────────────────────── */
.cust-stat {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  transition: var(--tr) !important;
}
.cust-stat:hover {
  border-color: var(--b2) !important;
  transform: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}
[data-theme=dark] .cust-stat:hover {
  box-shadow: 0 1px 3px rgba(0,0,0,.2) !important;
}
.cust-stat-ic { border-radius: 10px !important; }
.cust-stat-val {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.018em !important;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}
.cust-stat-lbl {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--t3) !important;
}

/* ── Booking-Wizard Stepper (öffentliche Buchung) ──────────────── */
.bw-step-num {
  border-radius: 50% !important;
  font-weight: 700 !important;
  background: var(--s2) !important;
  border: 1.5px solid var(--b1) !important;
  box-shadow: none !important;
  color: var(--t3) !important;
}
.bw-step.active .bw-step-num {
  background: var(--np) !important;
  border-color: var(--np) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(200,149,90,.3) !important;
}
.bw-step.done .bw-step-num {
  background: rgba(29,217,122,.12) !important;
  border-color: rgba(29,217,122,.3) !important;
  color: var(--ng) !important;
}
.bw-step-lbl {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--t3) !important;
}
.bw-step.active .bw-step-lbl { color: var(--t1) !important; }

/* ── Klassik-Kalender Toolbar (cal2-*) — flat & modern ────────── */
.cal2-toolbar {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
  box-shadow: none !important;
}
.cal2-navbtn {
  background: transparent !important;
  border: 1px solid var(--b1) !important;
  border-radius: 10px !important;
  width: 32px !important;
  height: 32px !important;
  color: var(--t2) !important;
  transition: var(--tr) !important;
}
.cal2-navbtn:hover {
  background: var(--s2) !important;
  border-color: var(--b2) !important;
  color: var(--t1) !important;
}
.cal2-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  color: var(--t1) !important;
}
.cal2-search {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 10px !important;
}
.cal2-search input {
  background: transparent !important;
  border: 0 !important;
  padding: 6px 10px !important;
  min-height: 30px !important;
}
.cal2-filter {
  border-radius: 10px !important;
  min-height: 32px !important;
}
.cvbtn, .cal2-views > button {
  background: transparent !important;
  border: 1px solid var(--b1) !important;
  border-radius: 8px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--t3) !important;
  height: 30px !important;
  padding: 0 12px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.cvbtn:hover { color: var(--t1) !important; border-color: var(--b2) !important; }
.cvbtn.active {
  background: rgba(200,149,90,.1) !important;
  border-color: rgba(200,149,90,.3) !important;
  color: var(--np) !important;
  font-weight: 600 !important;
}

/* ── Kalender-Mini-Sidebar (sticky panels) ─────────────────────── */
.minical, .calendar-mini, .week-mini {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

/* ── Settings-Modal Tabs (vertical/horizontal) ────────────────── */
.set-tabs, .modal-tabs, .tabs-strip {
  border-bottom: 1px solid var(--b1) !important;
  background: transparent !important;
  gap: 2px !important;
}
.set-tab, .modal-tab, .tabs-strip > button {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--t3) !important;
  padding: 10px 14px !important;
  transition: var(--tr) !important;
}
.set-tab:hover, .modal-tab:hover { color: var(--t1) !important; }
.set-tab.active, .modal-tab.active, .tabs-strip > button.active {
  color: var(--np) !important;
  font-weight: 600 !important;
  border-bottom-color: var(--np) !important;
  background: transparent !important;
}

/* ── Generic List Rows (Behandlungen, Forms, Inbox-Items) ──────── */
.list-row, .lrow, .behl-row, .frm-row, .inb-row {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  margin-bottom: 8px !important;
  transition: var(--tr) !important;
}
.list-row:hover, .lrow:hover {
  border-color: var(--b2) !important;
  background: var(--s1) !important;
}

/* ── Inline Action-Pills (z. B. Steuern Modus-Switch) ──────────── */
.inline-toggle, .seg-pill {
  background: var(--s2) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 100px !important;
  padding: 3px !important;
  display: inline-flex !important;
  gap: 1px !important;
}
.inline-toggle > button, .seg-pill > button {
  background: transparent !important;
  border: 0 !important;
  border-radius: 100px !important;
  padding: 5px 12px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--t3) !important;
}
.inline-toggle > button.on, .seg-pill > button.on,
.inline-toggle > button.active, .seg-pill > button.active {
  background: var(--s1) !important;
  color: var(--t1) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.05) !important;
}

/* ── Section dividers / page headers ohne pg-title-Klasse ─────── */
h1:not([class]), h2:not([class]), h3:not([class]) {
  letter-spacing: -0.015em !important;
}

/* ── Stat-Tiles, KPI-Mini, Summary-Bars (Finance, Reports) ───── */
.stat, .stat-tile, .summary-tile, .ber-tile {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  padding: 14px 16px !important;
}
.stat-val, .stat-tile-val, .ber-tile-val {
  font-size: 19px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}
.stat-lbl, .stat-tile-lbl, .ber-tile-lbl {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--t3) !important;
}

/* ── Action-Buttons ohne .btn-Klasse (Inline-Edit-Buttons) ────── */
button[type="button"]:not([class*="btn"]):not([class*="mb-"]):not([class*="seg"]):not([class*="tab"]):not([class*="dseg"]):not([class*="tseg"]):not([class*="cvbtn"]):not([class*="nav"]) {
  cursor: pointer;
}

/* ── Verfahrensdoku-Sections ──────────────────────────────────── */
.vd-section, .vd-card {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

/* ── POS / Marketplace / Shop List items ─────────────────────── */
.pos-item, .mk-item, .sh-item, .ret-item {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.pos-item:hover, .mk-item:hover, .sh-item:hover {
  border-color: var(--b2) !important;
}

/* ── Notification-Items / Inbox / Support ─────────────────────── */
.notif-item, .nf-item, .sup-msg {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  box-shadow: none !important;
}
.notif-item.unread, .nf-item.unread {
  background: rgba(200,149,90,.04) !important;
  border-color: rgba(200,149,90,.2) !important;
}

/* ── Mobile Bottom-Nav: explicit modern tones ──────────────────── */
.mob-bnav {
  background: var(--s1) !important;
  border-top: 1px solid var(--b1) !important;
  backdrop-filter: blur(14px) !important;
}
.mob-bnav-item {
  font-weight: 500 !important;
}
.mob-bnav-item.active {
  color: var(--np) !important;
  font-weight: 600 !important;
}

/* ── Onboarding-Cards / Empty-State CTAs ───────────────────────── */
.ob-card, .ob-step {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

/* ── Behandlungen Cards (.ta-card) ─────────────────────────────── */
.ta-card {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  margin-bottom: 8px !important;
  box-shadow: none !important;
  transition: var(--tr) !important;
}
.ta-card:hover {
  border-color: var(--b2) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}
[data-theme=dark] .ta-card:hover {
  box-shadow: 0 1px 3px rgba(0,0,0,.2) !important;
}
.ta-name {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
}
.ta-chip {
  background: var(--s2) !important;
  border: 1px solid var(--b1) !important;
  color: var(--t2) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  border-radius: 100px !important;
  padding: 3px 10px !important;
}
.extra-chip {
  border-radius: 100px !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  padding: 2px 9px !important;
}

/* ── Berichte Bar-Charts (.ber-bar-*) ──────────────────────────── */
.ber-bar-track {
  background: var(--s2) !important;
  border-radius: 100px !important;
  height: 12px !important;
}
.ber-bar-fill {
  border-radius: 100px !important;
}
.ber-bar-lbl {
  font-weight: 500 !important;
  font-size: 11px !important;
  color: var(--t3) !important;
}
.ber-bar-val {
  font-weight: 600 !important;
  font-size: 11px !important;
  color: var(--t1) !important;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}
.ber-kpi-grid {
  gap: 12px !important;
}

/* ── Rechner Calc-Tabelle ──────────────────────────────────────── */
.calc-table, .rechner-table {
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid var(--b1) !important;
}
.calc-row, .rechner-row {
  border-bottom: 1px solid var(--b1) !important;
  padding: 10px 14px !important;
  background: var(--s1) !important;
}
.calc-row:hover, .rechner-row:hover {
  background: var(--s2) !important;
}

/* ── Settings-Modal: Inhalt-Container voll modern ──────────────── */
#settings-mbg .modal,
#admin-mbg .modal,
.mbg .modal {
  border-radius: 22px !important;
}
.gcol, .gcol2, .g2, .g3 {
  gap: 12px !important;
}

/* ── MB-Page-Header (für nicht-takeover v2 Pages: Behandlungen, Berichte, ...) ── */
.mb-page-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.mb-page-hd__titles { min-width: 0; flex: 1; }
.mb-page-hd__crumb {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--t3) !important;
  margin-bottom: 4px !important;
}
.mb-page-hd__title {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--t1) !important;
  margin: 0 0 4px 0 !important;
}
.mb-page-hd__sub {
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: var(--t3) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}
.mb-page-hd__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .mb-page-hd { flex-direction: column; align-items: stretch; }
  .mb-page-hd__title { font-size: 19px !important; }
}

/* ── MB-Page-Toolbar (search/filter row, optional unter mb-page-hd) ── */
.mb-page-tb {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--s1);
  border: 1px solid var(--b1);
  border-radius: 14px;
  padding: 8px 12px;
  margin-bottom: 14px;
}
.mb-page-tb__search {
  flex: 1 1 240px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  background: var(--s2);
  border: 1px solid var(--b1);
  border-radius: 100px;
  color: var(--t3);
}
.mb-page-tb__search input {
  flex: 1;
  border: 0 !important;
  background: transparent !important;
  outline: none;
  min-height: auto !important;
  padding: 0 !important;
  font-size: 12.5px !important;
  color: var(--t1) !important;
  box-shadow: none !important;
}
.mb-page-tb__chips {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.mb-page-tb__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--s2);
  color: var(--t2);
  border: 1px solid var(--b1);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--tr);
}
.mb-page-tb__chip:hover { border-color: var(--b2); color: var(--t1); }
.mb-page-tb__chip.active,
.mb-page-tb__chip[data-active="true"] {
  background: rgba(200,149,90,.12) !important;
  border-color: rgba(200,149,90,.3) !important;
  color: var(--np) !important;
  font-weight: 600 !important;
}

/* ── MB-Card (generic shared) ───────────────────────────────────── */
.mb-card {
  background: var(--s1);
  border: 1px solid var(--b1);
  border-radius: 16px;
  overflow: hidden;
}
.mb-card__hd {
  padding: 14px 18px;
  border-bottom: 1px solid var(--b1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mb-card__title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--t1);
}
.mb-card__body {
  padding: 16px 18px;
}

/* ── Team / POS / Forms / Inbox / Marketing / Shop Sub-Nav ─────── */
.team-subnav {
  display: flex !important;
  gap: 2px !important;
  border-bottom: 1px solid var(--b1) !important;
  margin-bottom: 16px !important;
  flex-wrap: wrap !important;
  padding-bottom: 0 !important;
  background: transparent !important;
}
.team-subbtn {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--t3) !important;
  padding: 10px 14px !important;
  cursor: pointer !important;
  transition: var(--tr) !important;
  letter-spacing: -0.005em !important;
}
.team-subbtn:hover { color: var(--t1) !important; }
.team-subbtn.active {
  color: var(--np) !important;
  font-weight: 600 !important;
  border-bottom-color: var(--np) !important;
  background: transparent !important;
}

/* ── Team Pills / Roles ────────────────────────────────────────── */
.team-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 10px !important;
  border-radius: 100px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  border: 0 !important;
}
.team-pill-owner, .team-pill-admin {
  background: rgba(200,149,90,.12) !important;
  color: var(--np) !important;
}
.team-pill-staff, .team-pill-mitarbeiter {
  background: rgba(59,158,255,.12) !important;
  color: var(--nb) !important;
}
.team-pill-viewer {
  background: var(--s2) !important;
  color: var(--t3) !important;
}

.team-member-name {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--t1) !important;
  letter-spacing: -0.005em !important;
}
.team-member-sub {
  font-size: 11.5px !important;
  color: var(--t3) !important;
  margin-top: 2px !important;
}
.team-clock-widget {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 12px !important;
  padding: 8px 14px !important;
  box-shadow: none !important;
}

/* ── Inbox-Specific (Channel-Liste, Threads) ──────────────────── */
.inbox-channel, .ib-channel {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  box-shadow: none !important;
}
.inbox-thread, .ib-thread {
  border-bottom: 1px solid var(--b1) !important;
  padding: 12px 14px !important;
  background: var(--s1) !important;
}
.inbox-thread:hover, .ib-thread:hover {
  background: var(--s2) !important;
}

/* ── Forms (Form-Builder) Cards ───────────────────────────────── */
.frm-card, .form-row, .form-card {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  margin-bottom: 8px !important;
  box-shadow: none !important;
}

/* ── Marketing Cards (Kampagnen, Coupons) ─────────────────────── */
.mk-campaign, .mk-card, .marketing-card {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

/* ── Shop / Retail Items ──────────────────────────────────────── */
.shop-product, .retail-item, .product-card {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  overflow: hidden;
}

/* ── POS / Kasse-Items ────────────────────────────────────────── */
.pos-receipt, .kasse-item {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

/* ── KL-Toggle (Steuern Modus-Switch) ─────────────────────────── */
.kl-toggle-wrap {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

/* ── Live-Indicator (verschiedene Tabs) ───────────────────────── */
.live {
  background: rgba(29,217,122,.1) !important;
  border: 1px solid rgba(29,217,122,.25) !important;
  color: var(--ng) !important;
  border-radius: 100px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.ldot {
  background: var(--ng) !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  animation: mb-pulse 1.6s ease-in-out infinite;
}
@keyframes mb-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── Card-Header Card-Icon (.ci) für Rechner Live-Modus ───────── */
.ch .ct .ci {
  border-radius: 8px !important;
}
.divider {
  border-top: 1px solid var(--b1) !important;
  margin: 12px 0 !important;
}
.mtrack {
  background: var(--s2) !important;
  border-radius: 100px !important;
  height: 8px !important;
  overflow: hidden;
}
.mfill {
  background: var(--ng) !important;
  border-radius: 100px !important;
  height: 100% !important;
  transition: width .4s ease !important;
}
.pfill {
  background: var(--np) !important;
  border-radius: 100px !important;
  height: 100% !important;
  transition: width .4s ease !important;
}

/* ── Archive-Items (Analyse) ──────────────────────────────────── */
.archive-item {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  margin-bottom: 8px !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.archive-item:hover {
  border-color: var(--b2) !important;
}

/* ── Chart-bars (Analyse-Treats) ──────────────────────────────── */
.chart-wrap { margin-bottom: 8px !important; }
.chart-lbl {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--t2) !important;
  margin-bottom: 4px !important;
}
.chart-bar {
  background: var(--s2) !important;
  border-radius: 100px !important;
  height: 10px !important;
  overflow: hidden;
}
.chart-fill {
  border-radius: 100px !important;
  height: 100% !important;
}

/* ── Profil-Page (Profile Builder) ─────────────────────────────── */
.profil-wrap {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 16px !important;
}
@media (max-width: 980px) {
  .profil-wrap { grid-template-columns: 1fr !important; }
}
.profil-editor, .profil-preview {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  overflow: hidden;
}
.profil-editor-head {
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--b1) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  background: transparent !important;
}
.profil-editor-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  color: var(--t1) !important;
}
.profil-editor-sub {
  font-size: 11.5px !important;
  font-weight: 400 !important;
  color: var(--t3) !important;
  margin-top: 2px !important;
}
.profil-editor-body {
  padding: 14px 18px !important;
}
.profil-completion-bar {
  background: var(--s2) !important;
  border-radius: 100px !important;
  height: 6px !important;
  overflow: hidden;
}
.profil-completion-fill {
  background: var(--np) !important;
  border-radius: 100px !important;
  height: 100% !important;
  transition: width .4s ease !important;
}
.profil-completion-pct {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--np) !important;
  font-feature-settings: "tnum" 1;
}
.profil-group-label {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--t3) !important;
  margin: 14px 0 8px 0 !important;
}
.profil-group-label:first-child { margin-top: 0 !important; }
.profil-acc {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 12px !important;
  margin-bottom: 8px !important;
  overflow: hidden;
}
.profil-acc-head {
  padding: 12px 14px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--t1) !important;
  transition: var(--tr) !important;
}
.profil-acc-head:hover { background: var(--s2) !important; }
.profil-acc.open .profil-acc-head {
  border-bottom: 1px solid var(--b1) !important;
  background: var(--s2) !important;
}
.profil-acc-body {
  padding: 14px !important;
  background: var(--s1) !important;
}

/* ── Onboarding-Panel ──────────────────────────────────────────── */
.ob-step-num {
  background: var(--s2) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 50% !important;
  font-weight: 700 !important;
  color: var(--t3) !important;
  width: 28px !important;
  height: 28px !important;
}
.ob-step.done .ob-step-num,
.ob-step.complete .ob-step-num {
  background: rgba(29,217,122,.12) !important;
  color: var(--ng) !important;
  border-color: rgba(29,217,122,.3) !important;
}
.ob-step.active .ob-step-num {
  background: var(--np) !important;
  color: #fff !important;
  border-color: var(--np) !important;
}

/* ── Operatoren-Preview-Banner ─────────────────────────────────── */
#operator-preview-bar {
  background: linear-gradient(135deg, rgba(212,148,58,.18), rgba(200,149,90,.12)) !important;
  border-bottom: 1px solid rgba(212,148,58,.3) !important;
  color: var(--t1) !important;
}

/* ── Announcement-Banner ───────────────────────────────────────── */
#ann-banner {
  background: var(--s1) !important;
  border-bottom: 1px solid var(--b1) !important;
  box-shadow: none !important;
}

/* ── Toast-Notifications ───────────────────────────────────────── */
.toast, #toast {
  background: var(--t1) !important;
  color: var(--s1) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.18) !important;
  font-weight: 500 !important;
  font-size: 12.5px !important;
  letter-spacing: -0.005em !important;
}
[data-theme=dark] .toast, [data-theme=dark] #toast {
  box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
}

/* ── Booking-Wizard Buttons (öffentliche Buchung) ──────────────── */
.bw-card {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}
.bw-treat-card {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 14px !important;
  transition: var(--tr) !important;
}
.bw-treat-card:hover {
  border-color: var(--b2) !important;
  background: var(--s1) !important;
}
.bw-treat-card.selected {
  background: rgba(200,149,90,.06) !important;
  border-color: var(--np) !important;
  box-shadow: 0 0 0 1px var(--np) !important;
}

/* ── Generic header.fb (Fallback für noch nicht migrierte Pages) ── */
/* Verleiht dem v1-Header in v2-Modus etwas mehr Großzügigkeit
   ohne das Layout zu brechen. */
.fb {
  margin-bottom: 18px !important;
}
.fb .pg-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 4px !important;
}
.fb .pg-sub {
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: var(--t3) !important;
  line-height: 1.5 !important;
}

/* ══════════════════════════════════════════════════════════════════
   MODAL INTERIOR POLISH (für alle Edit-Modals)
   ══════════════════════════════════════════════════════════════════ */

/* ── Sub-Label (.slbl) — ohne den glühenden Punkt ──────────────── */
.modal .slbl,
.mbody .slbl {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: var(--t3) !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.modal .slbl::before,
.mbody .slbl::before {
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  content: none !important;
}
.modal .slbl .hint,
.mbody .slbl .hint {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--t3) !important;
  font-size: 11px !important;
}

/* ── Checklist (Behandlungen-Auswahl im Apt-Modal) ─────────────── */
.cklist {
  background: var(--s2) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 12px !important;
  padding: 6px !important;
  max-height: 220px !important;
  gap: 2px !important;
}
.cklist > label,
.cklist .cklist-row {
  background: transparent !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  transition: var(--tr) !important;
}
.cklist > label:hover,
.cklist .cklist-row:hover {
  background: var(--s1) !important;
}
.cklist > label.checked,
.cklist .cklist-row.checked {
  background: rgba(200,149,90,.08) !important;
}

/* ── Interval Buttons (.iv-row, .ivbtn) — schon teilweise abgedeckt ── */
.iv-row {
  gap: 6px !important;
}
.ivbtn {
  background: var(--s2) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 10px !important;
  padding: 9px 11px !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  color: var(--t2) !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: var(--tr) !important;
}
.ivbtn:hover {
  background: var(--s1) !important;
  border-color: var(--b2) !important;
  color: var(--t1) !important;
}
.ivbtn.sel {
  background: rgba(200,149,90,.1) !important;
  border-color: rgba(200,149,90,.3) !important;
  color: var(--np) !important;
  font-weight: 600 !important;
}
.ivbtn .ivn {
  display: block !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  margin-bottom: 2px !important;
  font-feature-settings: "tnum" 1;
}

/* ── Feasibility-Rows im Termin-Modal ──────────────────────────── */
.apt-feas-row {
  border-radius: 12px !important;
  padding: 10px 12px !important;
  font-size: 12px !important;
  background: var(--s2) !important;
  border: 1px solid var(--b1) !important;
}
.apt-feas-dot {
  box-shadow: none !important;
}
.apt-feas-ok {
  background: rgba(29,217,122,.06) !important;
  border-color: rgba(29,217,122,.18) !important;
}
.apt-feas-ok .apt-feas-dot { box-shadow: none !important; }
.apt-feas-warn {
  background: rgba(212,148,58,.06) !important;
  border-color: rgba(212,148,58,.2) !important;
}
.apt-feas-warn .apt-feas-dot { box-shadow: none !important; }
.apt-feas-err {
  background: rgba(217,64,64,.06) !important;
  border-color: rgba(217,64,64,.2) !important;
}
.apt-feas-err .apt-feas-dot { box-shadow: none !important; }

/* ── Input-Wrapper (.iw) und Suffix (.isfx) für Currency-Felder ── */
.iw {
  position: relative;
}
.iw .isfx {
  background: transparent !important;
  color: var(--t3) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

/* ── Modal-Header sticky-bg erhalten + besseres Spacing ────────── */
.mhd {
  position: sticky;
  top: 0;
  z-index: 1;
}
.mtt {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* ══════════════════════════════════════════════════════════════════
   PUBLIC-FACING (Booking-Wizard, Login, Register)
   ══════════════════════════════════════════════════════════════════ */

/* ── Auth-Landing (Login/Register Tabs in app.html) ────────────── */
.auth-shell, .auth-card, .login-card, .register-card {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.08) !important;
}
[data-theme=dark] .auth-shell,
[data-theme=dark] .auth-card,
[data-theme=dark] .login-card,
[data-theme=dark] .register-card {
  box-shadow: 0 8px 32px rgba(0,0,0,.45) !important;
}
.auth-tabs, .login-tabs {
  background: var(--s2) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 100px !important;
  padding: 3px !important;
  display: inline-flex !important;
  gap: 1px !important;
}
.auth-tab, .login-tab {
  background: transparent !important;
  border: 0 !important;
  border-radius: 100px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--t3) !important;
  cursor: pointer !important;
}
.auth-tab.active, .login-tab.active {
  background: var(--s1) !important;
  color: var(--t1) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
}

/* ── Booking-Wizard (.bw-*) öffentliche Seite ──────────────────── */
.bw-cta, .bw-next, .bw-submit {
  background: var(--np) !important;
  border-color: transparent !important;
  color: #fff !important;
  border-radius: 12px !important;
  height: 44px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 4px 16px rgba(200,149,90,.25) !important;
  transition: var(--tr) !important;
}
.bw-cta:hover, .bw-next:hover, .bw-submit:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 20px rgba(200,149,90,.35) !important;
  transform: translateY(-1px);
}

.bw-time-slot, .time-slot {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 10px !important;
  padding: 9px 12px !important;
  font-weight: 500 !important;
  font-size: 12.5px !important;
  cursor: pointer !important;
  transition: var(--tr) !important;
  font-feature-settings: "tnum" 1;
}
.bw-time-slot:hover, .time-slot:hover {
  border-color: var(--np) !important;
  color: var(--np) !important;
}
.bw-time-slot.selected, .time-slot.selected {
  background: var(--np) !important;
  color: #fff !important;
  border-color: var(--np) !important;
  font-weight: 600 !important;
}
.bw-time-slot[disabled], .time-slot[disabled],
.bw-time-slot.disabled, .time-slot.disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* ── Booking-Footer (Total-Bar) ────────────────────────────────── */
.bw-footer, .booking-footer {
  background: var(--s1) !important;
  border-top: 1px solid var(--b1) !important;
  box-shadow: 0 -4px 16px rgba(0,0,0,.05) !important;
  backdrop-filter: blur(8px) !important;
}
[data-theme=dark] .bw-footer,
[data-theme=dark] .booking-footer {
  box-shadow: 0 -4px 16px rgba(0,0,0,.3) !important;
}

/* ── Booking-Anfrage-Banner (Test-Modus) ───────────────────────── */
.bw-test-badge, .booking-test-banner {
  background: rgba(212,148,58,.12) !important;
  border: 1px solid rgba(212,148,58,.3) !important;
  color: var(--na) !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  letter-spacing: 0 !important;
  padding: 5px 12px !important;
}

/* ══════════════════════════════════════════════════════════════════
   AUTH-LANDING (Login/Register Tabs in app.html via .al-* Klassen)
   ══════════════════════════════════════════════════════════════════ */

.al-form-wrap {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.06) !important;
  padding: 28px !important;
}
[data-theme=dark] .al-form-wrap {
  box-shadow: 0 8px 32px rgba(0,0,0,.4) !important;
}
.al-form-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--t1) !important;
  margin-bottom: 4px !important;
}
.al-form-sub {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--t3) !important;
  margin-bottom: 18px !important;
}
.al-tabs {
  background: var(--s2) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 100px !important;
  padding: 3px !important;
  display: flex !important;
  gap: 1px !important;
  margin-bottom: 18px !important;
}
.al-tab {
  flex: 1 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 100px !important;
  padding: 8px 14px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--t3) !important;
  cursor: pointer !important;
  transition: var(--tr) !important;
}
.al-tab:hover { color: var(--t1) !important; }
.al-tab.active {
  background: var(--s1) !important;
  color: var(--t1) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
}
.al-field { margin-bottom: 14px !important; }
.al-label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--t2) !important;
  margin-bottom: 6px !important;
}
.al-input {
  width: 100% !important;
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: var(--t1) !important;
  transition: var(--tr) !important;
}
.al-input:focus {
  border-color: var(--np) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(200,149,90,.15) !important;
}
.al-hint {
  font-weight: 400 !important;
  font-size: 11px !important;
  color: var(--t3) !important;
}
.al-btn-primary {
  width: 100% !important;
  background: var(--np) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 12px !important;
  height: 46px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: -0.01em !important;
  cursor: pointer !important;
  transition: var(--tr) !important;
  box-shadow: 0 4px 16px rgba(200,149,90,.25) !important;
  margin-top: 4px !important;
}
.al-btn-google {
  width: 100% !important;
  height: 44px !important;
  background: var(--s1) !important;
  border: 1.5px solid var(--b2) !important;
  color: var(--t1) !important;
  border-radius: 11px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: var(--tr) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  font-family: inherit !important;
  margin-bottom: 14px !important;
}
.al-btn-google:hover {
  border-color: var(--b3) !important;
  background: var(--s2) !important;
  box-shadow: 0 2px 10px rgba(14,27,77,.06) !important;
}
[data-theme=dark] .al-btn-google:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,.35) !important;
}
.al-btn-google:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}
.al-btn-google svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0;
}
.al-or-sep {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 4px 0 14px 0 !important;
  color: var(--t4) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
.al-or-sep::before, .al-or-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--b1) !important;
}
.al-or-sep > span {
  padding: 0 4px;
}
.al-btn-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(200,149,90,.35) !important;
}
.al-err {
  color: var(--nd, #d94040) !important;
  font-size: 12px !important;
  margin-bottom: 12px !important;
  padding: 8px 12px !important;
  background: rgba(217,64,64,.08) !important;
  border-radius: 8px !important;
  border: 1px solid rgba(217,64,64,.2) !important;
}
.al-feat {
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
}
.al-feat-ic {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  background: rgba(200,149,90,.12) !important;
  border: 1px solid rgba(200,149,90,.18) !important;
  color: var(--np) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.al-feat-t {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--t1) !important;
  margin-bottom: 2px !important;
}
.al-feat-s {
  font-size: 11.5px !important;
  font-weight: 400 !important;
  color: var(--t3) !important;
  line-height: 1.5 !important;
}
.al-headline {
  font-size: 30px !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
  color: var(--t1) !important;
  margin-bottom: 10px !important;
}
.al-headline span {
  color: var(--np) !important;
  display: inline-block;
}
.al-sub {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--t3) !important;
  line-height: 1.55 !important;
  margin-bottom: 22px !important;
}
.al-badge {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(200,149,90,.12) !important;
  border: 1px solid rgba(200,149,90,.22) !important;
  color: var(--np) !important;
  border-radius: 100px !important;
  padding: 4px 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 16px !important;
}
.al-trust-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  color: var(--ng) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
}
.al-version {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--t3) !important;
  margin-top: auto !important;
  opacity: 0.7;
}
.al-footer {
  font-size: 11.5px !important;
  color: var(--t3) !important;
  margin-top: 20px !important;
  text-align: center !important;
}
.al-footer a {
  color: var(--t2) !important;
  text-decoration: none !important;
}
.al-footer a:hover {
  color: var(--np) !important;
}

/* ══════════════════════════════════════════════════════════════════
   CUSTOMER BOOKING PAGE (.bkc-* — was Kunden via ?bk=SLUG sehen)
   ══════════════════════════════════════════════════════════════════ */

.bkc-nav {
  background: var(--s1) !important;
  border-bottom: 1px solid var(--b1) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}
.bkc-loading {
  background: var(--s1) !important;
  color: var(--t3) !important;
}
.bkc-spinner {
  border-color: var(--s2) !important;
  border-top-color: var(--np) !important;
}
.bkc-not-found {
  background: var(--s1) !important;
  color: var(--t1) !important;
}

/* ══════════════════════════════════════════════════════════════════
   PUBLIC SHOP (.pshop-*)
   ══════════════════════════════════════════════════════════════════ */

.pshop-nav {
  background: var(--s1) !important;
  border-bottom: 1px solid var(--b1) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}
.pshop-shopname {
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
}
.pshop-product, .pshop-product-card {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  transition: var(--tr) !important;
}
.pshop-product:hover, .pshop-product-card:hover {
  border-color: var(--b2) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.05) !important;
}
[data-theme=dark] .pshop-product:hover,
[data-theme=dark] .pshop-product-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.3) !important;
}
.pshop-spinner {
  border-color: var(--s2) !important;
  border-top-color: var(--np) !important;
}

/* ══════════════════════════════════════════════════════════════════
   ENHANCED CONTRAST (focus + selection states)
   ══════════════════════════════════════════════════════════════════ */

::selection {
  background: rgba(200,149,90,.3) !important;
  color: var(--t1) !important;
}
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--np) !important;
  outline-offset: 2px !important;
}

/* ══════════════════════════════════════════════════════════════════
   SUPPORT WIDGET (Floating Chat-Button + Panel)
   ══════════════════════════════════════════════════════════════════ */

.supw-fab {
  background: var(--np) !important;
  box-shadow: 0 6px 24px rgba(200,149,90,.4), 0 0 0 1px rgba(255,255,255,.05) inset !important;
  width: 52px !important;
  height: 52px !important;
}
.supw-fab:hover {
  background: var(--np) !important;
  filter: brightness(1.06);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 28px rgba(200,149,90,.5) !important;
}
.supw-fab.open {
  background: var(--s3) !important;
  color: var(--t1) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.18) !important;
}
.supw-fab-badge {
  background: #d94040 !important;
  border: 2px solid var(--s1) !important;
  font-weight: 700 !important;
  font-size: 10.5px !important;
}
.supw-panel {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.18), 0 0 0 1px var(--b1) !important;
  overflow: hidden;
}
[data-theme=dark] .supw-panel {
  box-shadow: 0 16px 48px rgba(0,0,0,.5) !important;
}

/* ══════════════════════════════════════════════════════════════════
   SUPPORT TICKETS (Settings → Support)
   ══════════════════════════════════════════════════════════════════ */

.sup-ticket-card {
  background: var(--s1) !important;
  border: 1px solid var(--b1) !important;
  border-left: 3px solid var(--pc, var(--t4)) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transition: var(--tr) !important;
}
.sup-ticket-card:hover {
  border-color: var(--b2) !important;
  border-left-color: var(--np) !important;
  transform: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}
[data-theme=dark] .sup-ticket-card:hover {
  box-shadow: 0 1px 3px rgba(0,0,0,.2) !important;
}
.sup-tc-prio {
  box-shadow: none !important;
}
.sup-nav-badge {
  background: #d94040 !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════════════════════
   PAYWALL / PLAN-GATE
   ══════════════════════════════════════════════════════════════════ */

.pw-modal, .paywall-card {
  border-radius: 22px !important;
  overflow: hidden;
}
.pw-feature-row, .paywall-feature {
  padding: 9px 0 !important;
  border-bottom: 1px solid var(--b1) !important;
  font-size: 12.5px !important;
}
.pw-cta-btn, .paywall-cta {
  background: var(--np) !important;
  color: #fff !important;
  border-radius: 12px !important;
  height: 44px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 4px 16px rgba(200,149,90,.25) !important;
}
.pw-cta-btn:hover, .paywall-cta:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 20px rgba(200,149,90,.35) !important;
  transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════════════════════
   EMPTY-STATE & ICON BADGES (Card-Header-Icons in vielen Tabs)
   ══════════════════════════════════════════════════════════════════ */

.ei {
  background: rgba(200,149,90,.06) !important;
  border: 1px solid rgba(200,149,90,.14) !important;
  border-radius: 50% !important;
  width: 64px !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 14px !important;
  box-shadow: none !important;
}
.ei svg {
  color: var(--np) !important;
  opacity: 1 !important;
}
.empty {
  text-align: center;
}
.empty .empty-cta {
  margin-top: 14px !important;
}

/* ══════════════════════════════════════════════════════════════════
   COUNTER-BADGES (Tab badges, Notification dots)
   ══════════════════════════════════════════════════════════════════ */

.badge-count, .count-badge, .notif-dot {
  background: var(--np) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  border-radius: 100px !important;
  padding: 1px 7px !important;
  letter-spacing: 0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.1) !important;
}

/* ══════════════════════════════════════════════════════════════════
   RANGE / SLIDER INPUTS
   ══════════════════════════════════════════════════════════════════ */

input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  height: 24px !important;
  padding: 0 !important;
  min-height: 24px !important;
  box-shadow: none !important;
}
input[type="range"]::-webkit-slider-runnable-track {
  background: var(--s2) !important;
  height: 6px !important;
  border-radius: 100px !important;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: var(--np) !important;
  border: 2px solid #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.18) !important;
  margin-top: -6px !important;
  cursor: pointer !important;
}

/* ══════════════════════════════════════════════════════════════════
   CHECKBOX / RADIO (custom flat style)
   ══════════════════════════════════════════════════════════════════ */

input[type="checkbox"]:not([class*="mb-"]),
input[type="radio"]:not([class*="mb-"]) {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border: 1.5px solid var(--b2) !important;
  background: var(--s1) !important;
  cursor: pointer !important;
  display: inline-block !important;
  vertical-align: middle !important;
  position: relative !important;
  flex-shrink: 0 !important;
  min-height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}
input[type="checkbox"]:not([class*="mb-"]) {
  border-radius: 5px !important;
}
input[type="radio"]:not([class*="mb-"]) {
  border-radius: 50% !important;
}
input[type="checkbox"]:not([class*="mb-"]):checked,
input[type="radio"]:not([class*="mb-"]):checked {
  background: var(--np) !important;
  border-color: var(--np) !important;
}
input[type="checkbox"]:not([class*="mb-"]):checked::after {
  content: "" !important;
  position: absolute;
  left: 5px; top: 1px;
  width: 4px; height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
input[type="radio"]:not([class*="mb-"]):checked::after {
  content: "" !important;
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}
input[type="checkbox"]:not([class*="mb-"]):focus-visible,
input[type="radio"]:not([class*="mb-"]):focus-visible {
  outline: 2px solid var(--np) !important;
  outline-offset: 2px !important;
}

/* ══════════════════════════════════════════════════════════════════
   ANIMATIONS — subtle, performant
   ══════════════════════════════════════════════════════════════════ */

/* Tab-Content fade-in beim Wechseln */
@keyframes mb-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page.active {
  animation: mb-fade-in .22s cubic-bezier(.4,0,.2,1);
}

/* Modal opening: scale + fade */
@keyframes mb-modal-in {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: scale(1); }
}
.mbg.open .modal,
.dlg-bg.open .dlg-box {
  animation: mb-modal-in .25s cubic-bezier(.34,1.56,.64,1);
}

/* Modal background fade */
@keyframes mb-bg-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.mbg.open, .dlg-bg.open {
  animation: mb-bg-fade .18s ease-out;
}

/* Dropdown / Submenu slide */
@keyframes mb-dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ndropdown.open,
.set-sub.open {
  animation: mb-dropdown-in .18s ease-out;
}

/* Card hover-lift (already minor, this makes consistent) */
.card, .kpi, .ta-card, .cust-stat, .archive-item, .mb-card, .ob-card {
  transition: transform .15s cubic-bezier(.4,0,.2,1),
              border-color var(--tr),
              box-shadow var(--tr) !important;
}

/* Reduce-motion: respect user preference */
@media (prefers-reduced-motion: reduce) {
  .page.active,
  .mbg.open .modal,
  .mbg.open,
  .dlg-bg.open,
  .ndropdown.open,
  .set-sub.open {
    animation: none !important;
  }
  * {
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   EMPTY-STATE TYPOGRAPHY (.et, .es) — bereits abgedeckt, hier extras
   ══════════════════════════════════════════════════════════════════ */

.empty-cta {
  margin-top: 16px !important;
  padding: 12px 22px !important;
  height: auto !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════════════════════════════════════
   TOOLTIPS (browser-native via title="") — keine echten Tooltips
   aber bessere Cursor-Hints für interaktive Elemente
   ══════════════════════════════════════════════════════════════════ */

[title]:not(input):not(textarea):not(select) {
  cursor: help;
}
button[title], a[title], [role="button"][title] {
  cursor: pointer !important;
}

/* ══════════════════════════════════════════════════════════════════
   FORM VALIDATION STATES
   ══════════════════════════════════════════════════════════════════ */

input:invalid:not(:placeholder-shown),
input.error,
.field.error input,
.field.error select,
.field.error textarea {
  border-color: rgba(217,64,64,.5) !important;
  background: rgba(217,64,64,.04) !important;
}
input:invalid:not(:placeholder-shown):focus,
input.error:focus {
  box-shadow: 0 0 0 3px rgba(217,64,64,.15) !important;
}

.field-error, .field-err {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: #d94040 !important;
  margin-top: 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* Success state */
input.success, input.valid,
.field.success input, .field.success select {
  border-color: rgba(29,217,122,.4) !important;
}

/* ══════════════════════════════════════════════════════════════════
   TENANT IMPERSONATION / OPERATOR-PREVIEW BANNER POLISH
   ══════════════════════════════════════════════════════════════════ */

.impersonation-bar, .operator-preview-bar, #operator-preview-bar {
  background: linear-gradient(135deg, rgba(212,148,58,.15), rgba(200,149,90,.1)) !important;
  border-bottom: 1px solid rgba(212,148,58,.35) !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
}
.impersonation-bar .btn,
.operator-preview-bar .btn,
#operator-preview-bar .btn {
  height: 28px !important;
  padding: 0 12px !important;
  font-size: 11.5px !important;
}

/* ══════════════════════════════════════════════════════════════════
   TRIAL / SUBSCRIPTION COUNTDOWN
   ══════════════════════════════════════════════════════════════════ */

.trial-countdown, .trial-banner {
  background: var(--s2) !important;
  border: 1px solid rgba(212,148,58,.25) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
}
.trial-countdown.warning, .trial-banner.warning {
  background: rgba(212,148,58,.08) !important;
  border-color: rgba(212,148,58,.35) !important;
  color: var(--na) !important;
}
.trial-countdown.expired, .trial-banner.expired {
  background: rgba(217,64,64,.08) !important;
  border-color: rgba(217,64,64,.3) !important;
  color: #d94040 !important;
}

/* ══════════════════════════════════════════════════════════════════
   DATE / TIME INPUT POLISH
   ══════════════════════════════════════════════════════════════════ */

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
  filter: invert(0.5);
  transition: opacity .2s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
[data-theme=dark] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme=dark] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
}

} /* ── END html[data-design="v2"] scope ── */


/* ══════════════════════════════════════════════════════════════════
   V1/V2 LAYOUT VISIBILITY TOGGLE
   Wenn data-design=v2 → versteckt v1-Markup, zeigt v2-Markup (neue Layouts)
   Wenn data-design=v1 → umgekehrt
   ══════════════════════════════════════════════════════════════════ */
html[data-design="v2"] [data-design-version="v1"] { display: none !important; }
html[data-design="v1"] [data-design-version="v2"] { display: none !important; }

/* Standard: bei nicht gesetztem Attribut wie v2 verhalten (Default) */
html:not([data-design="v1"]) [data-design-version="v1"] { display: none !important; }


/* ── PAGE TAKEOVER für neue mb-* Layouts ──
   Nur Pages, die einen full-takeover-Container (mb-cal/mb-cust/mb-req/
   mb-fin/mb-dash) enthalten, werden zu 100vh-Layout. Andere v2-Pages
   (z. B. Behandlungen mit nur einem mb-page-hd-Header) behalten
   normales Page-Padding.
   ────────────────────────────────────────── */
html[data-design="v2"] .page.active:has(.mb-cal, .mb-cust, .mb-req, .mb-fin, .mb-dash) {
  padding: 0 !important;
  max-width: none !important;
  height: calc(100vh - 52px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (min-width: 641px) {
  html[data-design="v2"] .page.active:has(.mb-cal, .mb-cust, .mb-req, .mb-fin, .mb-dash) {
    height: 100vh;
  }
}
@media (max-width: 640px) {
  html[data-design="v2"] .page.active:has(.mb-cal, .mb-cust, .mb-req, .mb-fin, .mb-dash) {
    height: calc(100vh - 52px - 56px - env(safe-area-inset-bottom));
  }
}

html[data-design="v2"] .page.active:has(.mb-cal, .mb-cust, .mb-req, .mb-fin, .mb-dash) > [data-design-version="v2"] {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
html[data-design="v2"] [data-design-version="v2"] > .mb-cal,
html[data-design="v2"] [data-design-version="v2"] > .mb-cust,
html[data-design="v2"] [data-design-version="v2"] > .mb-req,
html[data-design="v2"] [data-design-version="v2"] > .mb-fin,
html[data-design="v2"] [data-design-version="v2"] > .mb-dash {
  flex: 1;
  min-height: 0;
  height: 100%;
}


/* ══════════════════════════════════════════════════════════════════
   DESIGN TOGGLE (segmented control, mirrors .theme-seg)
   Sichtbar in beiden Modi (v1 + v2)
   ══════════════════════════════════════════════════════════════════ */
.design-seg {
  display: flex;
  align-items: center;
  background: var(--s3);
  border: 1px solid var(--b2);
  border-radius: 100px;
  padding: 2px;
  gap: 1px;
  margin-right: 6px;
}
.dseg {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 11px;
  border-radius: 100px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--t3);
  cursor: pointer;
  transition: var(--tr);
  white-space: nowrap;
  user-select: none;
  letter-spacing: 0.02em;
}
.dseg:hover { color: var(--t2); }
.dseg.active {
  background: var(--s1);
  color: var(--t1);
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
  border: 1px solid var(--b1);
  font-weight: 700;
}

@media (max-width: 640px) {
  /* Mobile: kompakter, kürzere Labels */
  .design-seg { padding: 1px; }
  .dseg { padding: 4px 9px; font-size: 10px; }
}

@media (min-width: 641px) {
  /* Desktop sidebar: full-width like theme-seg */
  .nav-right .design-seg {
    width: 100%;
    border-radius: 10px;
  }
  .nav-right .dseg {
    flex: 1;
    justify-content: center;
    padding: 5px 4px;
  }
}