/* ==================================================================
   immobreeze — Design System v2
   Palette: Shadow #2A3132 · Stone #336B87 · Mist #90AFC5 · Autumn #763626
   Enthält: Tokens · App-Shell (.ib-*) · Komponenten (.mp-*)
   Keine Build-Schritte nötig — reines CSS.
   ================================================================== */

/* ──────────────────────────────────────────────────────────────────
   1 · TOKENS
   ────────────────────────────────────────────────────────────────── */
:root{
  /* Marke */
  --ink:#2A3132;          /* Shadow  – Text, dunkle Flächen, Primär-Button */
  --ink-2:#4B4C56;
  --ink-3:#6C6D79;
  --ink-4:#8A9599;

  --brand:#336B87;        /* Stone   – Markenfarbe, Links, Akzente */
  --brand-d:#2C5D77;
  --brand-dd:#24506A;
  --brand-l:#90AFC5;      /* Mist    – helle Akzente, Icons */
  --brand-50:#F4F8FA;
  --brand-100:#DCEAF0;
  --brand-200:#CFE1E8;

  --accent:#763626;       /* Autumn Foliage – Signalakzent, sparsam */
  --accent-d:#632C1F;
  --accent-50:#F6EDE9;

  /* Flächen */
  --paper:#EEF4F6;        /* Seitenhintergrund */
  --sunk:#E5EDEF;         /* eingesenkte Flächen */
  --card:#FFFFFF;
  --card-soft:#F7FAFB;
  --line:#E3E2DB;         /* Rahmen */
  --line-soft:#EDEFEA;
  --line-brand:#CFE1E8;

  /* Semantik */
  --ok:#3D7A5A;      --ok-soft:#E4EFE9;  --ok-ink:#2E5C44;
  --warn:#B0763A;    --warn-soft:#F7F0E7; --warn-ink:#7A4A1F;
  --bad:#A2402C;     --bad-soft:#F6E8E4;  --bad-ink:#7A2E1F;
  --info:#336B87;    --info-soft:#DCEAF0; --info-ink:#24506A;

  /* Sidebar (dunkel – Standard). Umschaltbar: <body data-sidebar="light"> */
  --sb-bg:#2A3132;
  --sb-bg-2:#232A2B;
  --sb-ink:#E6EDEF;
  --sb-soft:#A9B8BD;
  --sb-muted:#7E8D92;
  --sb-line:rgba(255,255,255,.075);
  --sb-hover:rgba(255,255,255,.055);
  --sb-active:#336B87;
  --sb-active-ink:#FFFFFF;

  /* Form */
  --radius-xs:6px;
  --radius-sm:8px;
  --radius:10px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-pill:999px;

  --shadow-xs:0 1px 2px rgba(42,49,50,.05);
  --shadow-sm:0 1px 2px rgba(42,49,50,.05), 0 1px 1px rgba(42,49,50,.03);
  --shadow:0 2px 6px -2px rgba(42,49,50,.09), 0 1px 2px rgba(42,49,50,.05);
  --shadow-md:0 8px 20px -8px rgba(42,49,50,.16), 0 2px 6px -2px rgba(42,49,50,.07);
  --shadow-lg:0 20px 44px -16px rgba(42,49,50,.24);
  --ring:0 0 0 3px rgba(51,107,135,.16);
  --ring-bad:0 0 0 3px rgba(162,64,44,.15);

  --sb-width:268px;
  --sb-width-collapsed:72px;
  --topbar-h:64px;

  --ease:cubic-bezier(.2,.8,.2,1);
}

/* Helle Sidebar-Variante */
body[data-sidebar="light"]{
  --sb-bg:#FFFFFF;
  --sb-bg-2:#F7FAFB;
  --sb-ink:#2A3132;
  --sb-soft:#4B4C56;
  --sb-muted:#8A9599;
  --sb-line:#E3E2DB;
  --sb-hover:#EEF4F6;
  --sb-active:#DCEAF0;
  --sb-active-ink:#24506A;
}

/* ──────────────────────────────────────────────────────────────────
   2 · RESET & BASIS
   ────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:.9rem;line-height:1.55;color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:'cv11','ss01';
}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
button{cursor:pointer;font-family:inherit;font-size:inherit;color:inherit}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4,h5{line-height:1.25;letter-spacing:-.011em;font-weight:650}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
::selection{background:var(--brand-100);color:var(--brand-dd)}
hr{border:none;border-top:1px solid var(--line)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#D3DEE2;border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#B9C9CF;background-clip:content-box;border:3px solid transparent}

.num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
body.no-scroll{overflow:hidden}

/* ══════════════════════════════════════════════════════════════════
   3 · APP-SHELL
   ══════════════════════════════════════════════════════════════════ */
.ib-shell,.mp-shell{display:flex;min-height:100vh;background:var(--paper)}

/* ── 3.1 Sidebar ────────────────────────────────────────────────── */
.ib-sidebar,.mp-sidebar{
  width:var(--sb-width);min-width:var(--sb-width);
  background:var(--sb-bg);color:var(--sb-ink);
  border-right:1px solid var(--sb-line);
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;bottom:0;z-index:60;
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.26) transparent;
  transition:width .24s var(--ease),min-width .24s var(--ease),transform .24s var(--ease);
}
/* Die komplette Sidebar scrollt – Plan-Karte und Footer sind so immer erreichbar */
.ib-sidebar::-webkit-scrollbar,.mp-sidebar::-webkit-scrollbar{width:8px}
.ib-sidebar::-webkit-scrollbar-track,.mp-sidebar::-webkit-scrollbar-track{background:transparent}
.ib-sidebar::-webkit-scrollbar-thumb,.mp-sidebar::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.26);border:2px solid transparent;background-clip:padding-box;border-radius:99px}
.ib-sidebar::-webkit-scrollbar-thumb:hover,.mp-sidebar::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.42);background-clip:padding-box}
body[data-sidebar="light"] .ib-sidebar{scrollbar-color:#C2D2D9 transparent}
body[data-sidebar="light"] .ib-sidebar::-webkit-scrollbar-thumb{background:#C2D2D9;background-clip:padding-box}
body[data-sidebar="light"] .ib-sidebar::-webkit-scrollbar-thumb:hover{background:#A7BCC6;background-clip:padding-box}

/* Logo */
.ib-sidebar-logo,.mp-sidebar__logo{
  display:flex;align-items:center;gap:11px;
  padding:20px 20px 18px;margin-bottom:4px;
  white-space:nowrap;overflow:hidden;flex-shrink:0;
}
.ib-sidebar-logo-icon,.mp-sidebar__logo-icon{
  width:38px;height:38px;flex-shrink:0;
  background:linear-gradient(145deg,var(--brand) 0%,var(--brand-dd) 100%);
  border-radius:11px;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:750;font-size:1rem;letter-spacing:-.02em;
  box-shadow:0 4px 12px -4px rgba(51,107,135,.6), inset 0 1px 0 rgba(255,255,255,.18);
}
.ib-sidebar-logo-icon svg,.mp-sidebar__logo-icon svg{width:19px;height:19px;fill:#fff}
/* Variante mit der Bildmarke aus der Anmeldeseite: keine Kachel, damit die
   mehrfarbigen Wellen ihre Originalfarben behalten. */
.ib-sidebar-logo-icon--mark{
  background:none;border-radius:0;box-shadow:none;
  color:var(--sb-ink);
}
.ib-sidebar-logo-icon--mark svg{width:38px;height:38px;fill:none}
.ib-sidebar-logo-texts,.mp-sidebar__logo-texts{display:flex;flex-direction:column;line-height:1.25;overflow:hidden}
.ib-logo-name,.mp-sidebar__logo-name{font-size:.98rem;font-weight:680;color:var(--sb-ink);letter-spacing:-.015em;white-space:nowrap}
.ib-logo-sub,.mp-sidebar__logo-sub{font-size:.68rem;color:var(--sb-muted);white-space:nowrap;margin-top:1px;letter-spacing:.01em}

/* Nav */
/* flex:1 0 auto → füllt kurze Menüs bis nach unten aus, wird bei langen
   Menüs aber nie kleiner als sein Inhalt (sonst überlappt es die Plan-Karte) */
.ib-nav{flex:1 0 auto;padding:4px 12px 8px;display:flex;flex-direction:column;gap:1px}
.ib-nav-section,.mp-nav__section{
  font-size:.63rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sb-muted);padding:18px 10px 7px;white-space:nowrap;overflow:hidden;
}
.ib-nav-section:first-child,.mp-nav__section:first-child{padding-top:6px}

.ib-nav-item,.mp-nav__item{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;
  height:38px;padding:0 10px;margin:0;
  border-radius:var(--radius-sm);
  font-size:.84rem;font-weight:520;color:var(--sb-soft);
  cursor:pointer;user-select:none;white-space:nowrap;text-decoration:none;
  transition:background .14s,color .14s;
}
.ib-nav-item:hover,.mp-nav__item:hover{background:var(--sb-hover);color:var(--sb-ink)}
.ib-nav-item.active,.mp-nav__item.active{
  background:var(--sb-active);color:var(--sb-active-ink);font-weight:600;
  box-shadow:0 4px 12px -6px rgba(51,107,135,.7);
}
body[data-sidebar="light"] .ib-nav-item.active,
body[data-sidebar="light"] .mp-nav__item.active{box-shadow:none}
.ib-nav-item-inner,.mp-nav__item-inner{display:flex;align-items:center;gap:11px;overflow:hidden;min-width:0}
.ib-nav-icon,.mp-nav__item svg.nav-icon{width:16px;height:16px;flex-shrink:0;opacity:.72;transition:opacity .14s}
.ib-nav-item:hover .ib-nav-icon,.mp-nav__item:hover svg.nav-icon{opacity:.95}
.ib-nav-item.active .ib-nav-icon,.mp-nav__item.active svg.nav-icon{opacity:1}
.ib-nav-label{overflow:hidden;text-overflow:ellipsis}
.ib-nav-chevron{width:12px;height:12px;flex-shrink:0;opacity:.5;transition:transform .18s var(--ease)}
.ib-nav-chevron.open{transform:rotate(180deg)}
.mp-nav__item > svg:not(.nav-icon){width:12px;height:12px;opacity:.5;flex-shrink:0}

/* Submenu */
.ib-submenu{
  display:flex;flex-direction:column;gap:1px;
  margin:2px 0 6px 21px;padding-left:13px;
  border-left:1px solid var(--sb-line);
}
.ib-submenu--hidden,.mp-submenu--hidden{display:none !important}
.ib-submenu-link,.mp-nav__sub{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:6px 10px;border-radius:var(--radius-xs);
  font-size:.79rem;color:var(--sb-muted);text-decoration:none;white-space:nowrap;
  transition:background .12s,color .12s;
}
.ib-submenu-link:hover,.mp-nav__sub:hover{background:var(--sb-hover);color:var(--sb-ink)}
.ib-submenu-link.active,.mp-nav__sub.active{color:var(--sb-ink);font-weight:600;background:var(--sb-hover)}
.ib-submenu-link.active::before,.mp-nav__sub.active::before{
  content:'';position:absolute;left:-14px;width:2px;height:14px;
  background:var(--brand-l);border-radius:2px}
.ib-submenu-link,.mp-nav__sub{position:relative}

/* Badges in der Sidebar */
.ib-nav-badge,.mp-badge{
  font-size:.64rem;font-weight:700;line-height:1.6;
  padding:1px 7px;border-radius:var(--radius-pill);white-space:nowrap;flex-shrink:0;
}
.ib-badge-red   {background:rgba(162,64,44,.22);color:#F0BFB2}
.ib-badge-blue  {background:rgba(144,175,197,.22);color:#C7DCE7}
.ib-badge-gray  {background:rgba(255,255,255,.1);color:var(--sb-soft)}
body[data-sidebar="light"] .ib-badge-red {background:var(--bad-soft);color:var(--bad-ink)}
body[data-sidebar="light"] .ib-badge-blue{background:var(--brand-100);color:var(--brand-dd)}
body[data-sidebar="light"] .ib-badge-gray{background:var(--sunk);color:var(--ink-3)}
.mp-badge--blue,.mp-badge--info      {background:var(--brand-100);color:var(--brand-dd)}
.mp-badge--green,.mp-badge--success  {background:var(--ok-soft);color:var(--ok-ink)}
.mp-badge--red,.mp-badge--danger     {background:var(--bad-soft);color:var(--bad-ink)}
.mp-badge--warning                   {background:var(--warn-soft);color:var(--warn-ink)}
.mp-badge--gray,.mp-badge--neutral   {background:var(--sunk);color:var(--ink-3)}

/* Promo / Plan-Karte */
.ib-sidebar-promo,.mp-sidebar__promo{
  flex:0 0 auto;
  margin:12px 14px 10px;padding:16px;border-radius:var(--radius-md);
  background:linear-gradient(150deg,var(--brand) 0%,var(--brand-dd) 100%);
  color:#fff;position:relative;overflow:hidden;
  box-shadow:0 10px 24px -14px rgba(0,0,0,.8);
}
.ib-sidebar-promo::after{
  content:'';position:absolute;right:-28px;top:-28px;width:96px;height:96px;
  border-radius:50%;background:rgba(255,255,255,.08)}
.ib-sidebar-promo strong,.mp-sidebar__promo strong{
  display:block;font-size:.86rem;font-weight:680;letter-spacing:-.01em;position:relative}
.ib-sidebar-promo span,.mp-sidebar__promo span{
  display:block;font-size:.72rem;color:rgba(255,255,255,.72);margin-top:2px;position:relative}
.ib-sidebar-promo a{
  position:relative;display:block;margin-top:12px;text-align:center;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-sm);padding:7px 10px;
  font-size:.76rem;font-weight:650;color:#fff;
  transition:background .15s,transform .15s;
}
.ib-sidebar-promo a:hover{background:rgba(255,255,255,.26)}
.ib-sidebar-promo a + a{margin-top:6px;background:none;border-color:transparent;font-weight:500}
.ib-sidebar-promo a + a:hover{background:rgba(255,255,255,.12)}
.mp-btn-upgrade{
  display:block;width:100%;background:#fff;color:var(--brand-dd);
  text-align:center;border-radius:var(--radius-sm);padding:9px 0;
  font-size:.78rem;font-weight:700;border:none;cursor:pointer}
.mp-btn-upgrade:hover{background:var(--brand-50)}

/* Sidebar-Footer */
.ib-sidebar-footer,.mp-sidebar__footer{
  padding:12px 20px 18px;border-top:1px solid var(--sb-line);overflow:hidden;flex-shrink:0}
.ib-sidebar-footer-copy{font-size:.68rem;color:var(--sb-muted);text-align:center;letter-spacing:.01em}

/* Collapsed */
.ib-sidebar--collapsed,.mp-sidebar--collapsed{width:var(--sb-width-collapsed);min-width:var(--sb-width-collapsed)}
.ib-sidebar--collapsed .ib-nav-section,
.ib-sidebar--collapsed .ib-nav-chevron,
.ib-sidebar--collapsed .ib-sidebar-logo-texts,
.ib-sidebar--collapsed .ib-sidebar-promo,
.ib-sidebar--collapsed .ib-sidebar-footer-inner{display:none}
/* Beschriftungen und Zähler nur optisch ausblenden: Mit display:none fielen
   sie auch für Screenreader weg, und die Menüpunkte hatten keinen Namen mehr. */
.ib-sidebar--collapsed .ib-nav-label{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.ib-sidebar--collapsed .ib-sidebar-logo{justify-content:center;padding:20px 0 18px}
.ib-sidebar--collapsed .ib-nav{padding:4px 12px}
.ib-sidebar--collapsed .ib-nav-item{justify-content:center;padding:0}
.ib-sidebar--collapsed .ib-nav-item-inner{justify-content:center;gap:0}
.ib-sidebar--collapsed .ib-submenu{display:none !important}
.ib-sidebar--collapsed .ib-sidebar-footer{padding:12px 8px 16px}
.ib-sidebar--collapsed .ib-sidebar-footer-copy{display:none}
.mp-sidebar--collapsed .mp-sidebar__logo{justify-content:center;padding:20px 0 18px}
.mp-sidebar--collapsed .mp-sidebar__logo-texts,
.mp-sidebar--collapsed .mp-nav__section,
.mp-sidebar--collapsed .mp-sidebar__footer{display:none}
.mp-sidebar--collapsed .mp-nav__item{justify-content:center;padding:0}
.mp-sidebar--collapsed .mp-nav__item-inner{font-size:0;justify-content:center;gap:0}
.mp-sidebar--collapsed .mp-nav__item > svg:not(.nav-icon),
.mp-sidebar--collapsed .mp-nav__item .mp-badge{display:none}
.mp-sidebar--collapsed [id^="sub-"]{display:none !important}

/* Mobile-Backdrop */
.ib-backdrop{
  display:none;position:fixed;inset:0;z-index:55;
  background:rgba(42,49,50,.5);backdrop-filter:blur(2px)}
.ib-backdrop.show{display:block}

/* ── 3.2 Main ───────────────────────────────────────────────────── */
.ib-main,.mp-main{
  flex:1;min-width:0;margin-left:var(--sb-width);
  display:flex;flex-direction:column;min-height:100vh;
  transition:margin-left .24s var(--ease);
}
.ib-main--collapsed,.mp-main--collapsed{margin-left:var(--sb-width-collapsed)}

/* ── 3.3 Topbar ─────────────────────────────────────────────────── */
.ib-topbar,.mp-topbar{
  position:sticky;top:0;z-index:50;height:var(--topbar-h);
  display:flex;align-items:center;gap:14px;padding:0 24px;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.ib-topbar-left,.mp-topbar__left{display:flex;align-items:center;gap:12px;flex-shrink:0;min-width:0}
.ib-topbar-spacer{flex:1}

.ib-hamburger,.mp-topbar__hamburger{
  width:34px;height:34px;border:none;background:none;padding:0;flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border-radius:var(--radius-sm);cursor:pointer;transition:background .14s}
.ib-hamburger span,.mp-topbar__hamburger span{
  display:block;width:16px;height:1.5px;border-radius:2px;background:var(--ink-2);
  transition:width .18s var(--ease)}
.ib-hamburger:hover,.mp-topbar__hamburger:hover{background:var(--sunk)}
.ib-hamburger:hover span:nth-child(2){width:11px}

.ib-topbar-page,.mp-topbar__page-title{display:flex;flex-direction:column;justify-content:center;min-width:0}
.ib-topbar-page-name,.mp-topbar__page-name{
  font-size:.98rem;font-weight:680;color:var(--ink);letter-spacing:-.015em;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib-topbar-page-sub,.mp-topbar__page-sub{font-size:.72rem;color:var(--ink-3);white-space:nowrap}

.ib-topbar-search,.mp-topbar__search{
  display:flex;align-items:center;gap:9px;flex:1;max-width:400px;height:38px;
  padding:0 13px;border-radius:var(--radius-sm);
  background:var(--card-soft);border:1px solid var(--line);
  transition:border-color .15s,box-shadow .15s,background .15s}
.ib-topbar-search:focus-within,.mp-topbar__search:focus-within{
  background:#fff;border-color:var(--brand-l);box-shadow:var(--ring)}
.ib-topbar-search svg,.mp-topbar__search svg{width:15px;height:15px;color:var(--ink-4);flex-shrink:0}
.ib-topbar-search input,.mp-topbar__search input{
  flex:1;min-width:0;border:none;outline:none;background:none;font-size:.82rem;color:var(--ink)}
.ib-topbar-search input::placeholder,.mp-topbar__search input::placeholder{color:var(--ink-4)}
.ib-topbar-kbd,.mp-topbar__kbd{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.62rem;color:var(--ink-4);background:#fff;
  border:1px solid var(--line);border-radius:5px;padding:2px 6px;white-space:nowrap}

.ib-topbar-right,.mp-topbar__right{display:flex;align-items:center;gap:4px;flex-shrink:0}
.ib-topbar-divider{width:1px;height:22px;background:var(--line);margin:0 6px}

.ib-icon-btn,.mp-topbar__icon-btn,.mp-topbar__logout-btn{
  position:relative;width:36px;height:36px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:none;background:none;border-radius:var(--radius-sm);
  color:var(--ink-3);cursor:pointer;text-decoration:none;
  transition:background .14s,color .14s}
.ib-icon-btn svg,.mp-topbar__icon-btn svg{width:17px;height:17px}
.mp-topbar__logout-btn svg{width:17px;height:17px}
.ib-icon-btn:hover,.mp-topbar__icon-btn:hover{background:var(--sunk);color:var(--ink)}
.mp-topbar__logout-btn:hover{background:var(--bad-soft);color:var(--bad)}
.ib-notif-dot,.mp-topbar__notif-dot{
  position:absolute;top:7px;right:8px;width:7px;height:7px;
  background:var(--accent);border-radius:50%;border:2px solid #fff;display:none}
.mp-topbar__notif-dot{display:block}

.ib-topbar-user,.mp-topbar__user{
  display:flex;align-items:center;gap:9px;padding:5px 9px 5px 5px;
  border-radius:var(--radius-sm);cursor:pointer;text-decoration:none;color:inherit;
  transition:background .14s}
.ib-topbar-user:hover,.mp-topbar__user:hover{background:var(--sunk)}
.ib-user-avatar,.mp-topbar__avatar{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:700;letter-spacing:.01em;
  background:var(--brand-100);color:var(--brand-dd)}
.ib-user-info,.mp-topbar__user-info{display:flex;flex-direction:column;line-height:1.25}
.ib-user-name,.mp-topbar__username{font-size:.8rem;font-weight:620;color:var(--ink)}
.ib-user-role,.mp-topbar__userrole{font-size:.68rem;color:var(--ink-3)}

/* ── 3.4 Content & Footer ───────────────────────────────────────── */
.ib-content,.mp-content{flex:1;width:100%;max-width:1560px;margin:0 auto;padding:26px 26px 40px}

.ib-app-footer,.mp-app-footer{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 28px;border-top:1px solid var(--line);
  font-size:.72rem;color:var(--ink-4);flex-shrink:0}
.ib-app-footer a,.mp-app-footer__right a{color:var(--ink-3);text-decoration:none;transition:color .12s}
.ib-app-footer a:hover,.mp-app-footer__right a:hover{color:var(--brand)}
.mp-app-footer__left{white-space:nowrap}
.mp-app-footer__center{text-align:center;flex:1}
.mp-app-footer__right{display:flex;align-items:center;gap:18px;white-space:nowrap}

/* ── 3.5 Toast ──────────────────────────────────────────────────── */
.ib-toast{
  position:fixed;bottom:26px;right:26px;z-index:9999;max-width:340px;
  display:flex;align-items:center;gap:11px;
  padding:12px 16px;border-radius:var(--radius-md);
  background:var(--ink);color:#fff;font-size:.82rem;
  box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease)}
.ib-toast--show{opacity:1;transform:translateY(0)}
.ib-toast-icon{width:16px;height:16px;flex-shrink:0;color:var(--brand-l)}

/* ══════════════════════════════════════════════════════════════════
   4 · SEITENKOPF
   ══════════════════════════════════════════════════════════════════ */
.mp-page-hd{
  display:flex;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;gap:12px;margin-bottom:22px}
.mp-page-hd__title{font-size:1.4rem;font-weight:700;color:var(--ink);letter-spacing:-.022em;line-height:1.25}
.mp-page-hd__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.mp-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-size:.76rem;color:var(--ink-4);margin-top:5px}
.mp-breadcrumb__sep{color:var(--line-brand)}
.mp-breadcrumb__current{color:var(--ink-2);font-weight:500}
.mp-breadcrumb a{color:var(--ink-4);text-decoration:none;transition:color .12s}
.mp-breadcrumb a:hover{color:var(--brand)}

/* ══════════════════════════════════════════════════════════════════
   5 · KPI-KARTEN
   ══════════════════════════════════════════════════════════════════ */
.mp-kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:22px}
.mp-kpi-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.mp-kpi-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}

.mp-kpi{
  position:relative;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:18px 20px;display:flex;align-items:center;gap:16px;
  box-shadow:var(--shadow-xs);
  transition:box-shadow .18s var(--ease),transform .18s var(--ease),border-color .18s}
.mp-kpi:hover{box-shadow:var(--shadow);border-color:var(--line-brand);transform:translateY(-1px)}
.mp-kpi--locked{opacity:.5;filter:grayscale(1);user-select:none;pointer-events:none}
.mp-kpi__icon{
  width:46px;height:46px;flex-shrink:0;border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center}
.mp-kpi__icon svg{width:22px;height:22px}
.mp-kpi__num{font-size:1.6rem;font-weight:720;color:var(--ink);line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.mp-kpi__label{font-size:.75rem;color:var(--ink-3);margin-top:4px;letter-spacing:.005em}

/* Icon-Farbhelfer (Namen historisch – Werte neu auf die Palette gemappt) */
.ic--indigo,.ic--brand{background:var(--brand-100);color:var(--brand)}
.ic--blue  {background:var(--brand-50);color:var(--brand-d)}
.ic--green {background:var(--ok-soft);color:var(--ok)}
.ic--orange{background:var(--warn-soft);color:var(--warn)}
.ic--red   {background:var(--bad-soft);color:var(--bad)}
.ic--purple{background:var(--accent-50);color:var(--accent)}
.ic--gray  {background:var(--sunk);color:var(--ink-3)}

/* ══════════════════════════════════════════════════════════════════
   6 · PANEL / KARTE
   ══════════════════════════════════════════════════════════════════ */
.mp-panel{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  overflow:hidden;margin-bottom:20px;box-shadow:var(--shadow-xs)}
.mp-panel__hd{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--line-soft);background:var(--card)}
.mp-panel__hd h3,.mp-panel__title{font-size:.95rem;font-weight:660;color:var(--ink);letter-spacing:-.012em}
.mp-panel__hd p{font-size:.75rem;color:var(--ink-3);margin-top:3px;font-weight:400}
.mp-panel__hd-actions,.mp-panel__hd-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mp-panel__body{padding:20px}
.mp-panel__body > .mp-table,
.mp-panel__body > .mp-ztable{margin:-20px}

.mp-info-block{
  background:var(--brand-50);border:1px solid var(--line-brand);
  border-radius:var(--radius);padding:14px 16px;margin-bottom:16px;font-size:.82rem;color:var(--ink-2)}
.mp-info-block-title{font-size:.8rem;font-weight:660;color:var(--brand-dd);margin-bottom:4px}

.mp-link-box{
  display:flex;align-items:center;gap:10px;
  background:var(--card-soft);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 14px;font-size:.8rem;color:var(--ink-2);word-break:break-all}

/* ══════════════════════════════════════════════════════════════════
   7 · FILTER / SUCHE
   ══════════════════════════════════════════════════════════════════ */
.mp-filter-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.mp-filter-bar form{display:contents}

.mp-filter-tabs{display:inline-flex;background:var(--sunk);border-radius:var(--radius-sm);padding:3px;gap:2px}
.mp-filter-tab{
  border:none;background:none;cursor:pointer;
  padding:6px 14px;border-radius:6px;
  font-size:.78rem;font-weight:550;color:var(--ink-3);
  transition:background .14s,color .14s,box-shadow .14s;text-decoration:none;white-space:nowrap}
.mp-filter-tab:hover{color:var(--ink)}
.mp-filter-tab.active{background:#fff;color:var(--brand-dd);font-weight:650;box-shadow:var(--shadow-sm)}

.mp-search-inline{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:0 12px;height:36px;background:var(--card);
  transition:border-color .15s,box-shadow .15s}
.mp-search-inline:focus-within{border-color:var(--brand-l);box-shadow:var(--ring)}
.mp-search-inline svg,.mp-search-icon{width:14px;height:14px;color:var(--ink-4);flex-shrink:0}
.mp-search-inline input{border:none;outline:none;font-size:.8rem;background:transparent;width:170px}
.mp-search-inline input::placeholder{color:var(--ink-4)}
.mp-member-search{
  width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:9px 12px;font-size:.82rem;outline:none;background:var(--card);margin-bottom:10px}
.mp-member-search:focus{border-color:var(--brand-l);box-shadow:var(--ring)}

/* ══════════════════════════════════════════════════════════════════
   8 · TABELLEN
   ══════════════════════════════════════════════════════════════════ */
.mp-table{width:100%;border-collapse:separate;border-spacing:0}
.mp-table thead th{
  position:sticky;top:0;z-index:1;
  font-size:.68rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);text-align:left;padding:11px 20px;
  background:var(--card-soft);border-bottom:1px solid var(--line);white-space:nowrap}
.mp-table tbody tr{transition:background .12s}
.mp-table tbody tr:hover{background:var(--brand-50)}
.mp-table tbody td{
  font-size:.82rem;color:var(--ink);padding:13px 20px;vertical-align:middle;
  border-bottom:1px solid var(--line-soft)}
.mp-table tbody tr:last-child td{border-bottom:none}
.mp-table__sub{font-size:.72rem;color:var(--ink-3);margin-top:2px}
.mp-table__link,.mp-link{color:var(--brand);font-weight:550;transition:color .12s}
.mp-table__link:hover,.mp-link:hover{color:var(--brand-dd);text-decoration:underline}

.mp-sort{display:inline-flex;flex-direction:column;gap:2px;margin-left:5px;vertical-align:middle}
.mp-sort span{width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent}
.mp-sort span:first-child{border-bottom:4px solid var(--line-brand)}
.mp-sort span:last-child{border-top:4px solid var(--line-brand)}

.mp-chk,.mp-checkbox{
  width:16px;height:16px;border-radius:4px;cursor:pointer;
  accent-color:var(--brand);flex-shrink:0}

.mp-dots{
  width:30px;height:30px;border-radius:var(--radius-xs);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-4);font-size:1.2rem;letter-spacing:2px;cursor:pointer;
  transition:background .12s,color .12s}
.mp-dots:hover{background:var(--sunk);color:var(--ink)}

/* Sekundäre Tabellen im Detail */
.mp-ztable{width:100%;border-collapse:collapse}
.mp-ztable thead th{
  font-size:.68rem;font-weight:650;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);text-align:left;padding:9px 0;border-bottom:1px solid var(--line)}
.mp-ztable tbody tr{border-bottom:1px solid var(--line-soft)}
.mp-ztable tbody tr:last-child{border-bottom:none}
.mp-ztable tbody td{font-size:.82rem;padding:11px 0;vertical-align:middle}
.mp-ztable tbody td + td{padding-left:14px}

/* ══════════════════════════════════════════════════════════════════
   9 · AVATARE, STATUS, TAGS
   ══════════════════════════════════════════════════════════════════ */
.mp-avatar{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.68rem;font-weight:700;letter-spacing:.01em;
  background:var(--brand-100);color:var(--brand-dd)}
.mp-avatar--xl{width:56px;height:56px;border-radius:14px;font-size:1.1rem}
.mp-avatar--indigo,.mp-avatar--brand{background:var(--brand-100);color:var(--brand-dd)}
.mp-avatar--blue  {background:var(--brand-50);color:var(--brand-d)}
.mp-avatar--green {background:var(--ok-soft);color:var(--ok-ink)}
.mp-avatar--orange{background:var(--warn-soft);color:var(--warn-ink)}
.mp-avatar--red   {background:var(--bad-soft);color:var(--bad-ink)}
.mp-avatar--purple{background:var(--accent-50);color:var(--accent)}
.mp-user-cell{display:flex;align-items:center;gap:11px;min-width:0}

.mp-status{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:var(--radius-pill);
  font-size:.7rem;font-weight:650;white-space:nowrap;letter-spacing:.005em}
.mp-status::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.65}

.status-aktiv,.status-vermietet,.status-bezahlt,.mp-status--active,
.mp-vz-monat--ok{background:var(--ok-soft);color:var(--ok-ink)}
.status-ausstehend,.status-leerstand,.status-entwurf,.status-renovierung{background:var(--warn-soft);color:var(--warn-ink)}
.status-inaktiv,.status-gekuendigt,.status-ueberfaellig,.mp-status--inactive{background:var(--bad-soft);color:var(--bad-ink)}
.status-trial,.status-versendet,.status-neu,.status-pro{background:var(--brand-100);color:var(--brand-dd)}
.status-team,.status-enterprise{background:var(--accent-50);color:var(--accent)}
.status-free,.status-starter,.status-storniert{background:var(--sunk);color:var(--ink-3)}

.mp-mahnstufe-1{background:var(--warn-soft);color:var(--warn-ink)}
.mp-mahnstufe-2{background:var(--accent-50);color:var(--accent)}
.mp-mahnstufe-3{background:var(--bad-soft);color:var(--bad-ink)}

/* ══════════════════════════════════════════════════════════════════
   10 · BUTTONS
   ══════════════════════════════════════════════════════════════════ */
.mp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 16px;border-radius:var(--radius-sm);
  font-size:.8rem;font-weight:600;letter-spacing:-.005em;
  border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .1s}
.mp-btn svg{width:15px;height:15px;flex-shrink:0}
.mp-btn:active{transform:translateY(.5px)}
.mp-btn:disabled,.mp-btn.is-disabled{opacity:.5;pointer-events:none}

.mp-btn--primary{background:var(--ink);color:#fff;box-shadow:var(--shadow-sm)}
.mp-btn--primary:hover{background:#1E2425}
.mp-btn--brand{background:var(--brand);color:#fff;box-shadow:var(--shadow-sm)}
.mp-btn--brand:hover{background:var(--brand-dd)}
.mp-btn--secondary{background:var(--card);color:var(--ink-2);border-color:var(--line);box-shadow:var(--shadow-xs)}
.mp-btn--secondary:hover{background:var(--card-soft);border-color:var(--line-brand);color:var(--ink)}
.mp-btn--ghost{background:transparent;color:var(--ink-3)}
.mp-btn--ghost:hover{background:var(--sunk);color:var(--ink)}
.mp-btn--danger{background:var(--bad-soft);color:var(--bad-ink);border-color:transparent}
.mp-btn--danger:hover{background:#EFDAD3}
.mp-btn--danger-solid{background:var(--bad);color:#fff}
.mp-btn--danger-solid:hover{background:#8A3324}
.mp-btn--success{background:var(--ok-soft);color:var(--ok-ink)}
.mp-btn--success:hover{background:#D6E7DE}
.mp-btn--accent{background:var(--accent);color:#fff}
.mp-btn--accent:hover{background:var(--accent-d)}
.mp-btn--sm{padding:5px 11px;font-size:.73rem;gap:5px}
.mp-btn--sm svg{width:13px;height:13px}
.mp-btn--lg{padding:11px 22px;font-size:.88rem}
.mp-btn-block{width:100%;justify-content:center;padding:11px;font-size:.88rem}

/* ══════════════════════════════════════════════════════════════════
   11 · FLASH / ALERTS
   ══════════════════════════════════════════════════════════════════ */
.ib-flash,.mp-flash,.mp-alert{
  display:flex;align-items:center;gap:11px;
  padding:13px 16px;border-radius:var(--radius);
  font-size:.82rem;font-weight:500;margin-bottom:18px;
  border:1px solid transparent}
.ib-flash svg,.mp-flash svg,.mp-alert svg{width:17px;height:17px;flex-shrink:0}
.ib-flash--success,.mp-flash--success,.mp-alert--success{
  background:var(--ok-soft);color:var(--ok-ink);border-color:#CFE2D7}
.ib-flash--error,.mp-flash--error,.mp-flash--danger,.mp-alert--danger{
  background:var(--bad-soft);color:var(--bad-ink);border-color:#EBD5CE}
.ib-flash--warning,.mp-flash--warning,.mp-alert--warning{
  background:var(--warn-soft);color:var(--warn-ink);border-color:#EADCC7}
.ib-flash--info,.mp-flash--info,.mp-alert--info{background:var(--info-soft);color:var(--info-ink);border-color:var(--line-brand)}

.mp-warn-box{
  background:var(--warn-soft);border:1px solid #EADCC7;
  border-radius:var(--radius);padding:16px 18px;margin-top:24px}
.mp-warn-box h4{font-size:.86rem;font-weight:680;color:var(--warn-ink);margin-bottom:6px}
.mp-warn-box p{font-size:.8rem;color:var(--warn-ink);opacity:.9;margin-bottom:12px;line-height:1.6}

/* ══════════════════════════════════════════════════════════════════
   12 · FORMULARE
   ══════════════════════════════════════════════════════════════════ */
.mp-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.mp-form-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mp-form-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mp-form-full{grid-column:1 / -1}
.mp-form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.mp-form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.mp-form-grid .mp-form-group{margin-bottom:0}

.mp-form-label,.mp-label{
  display:block;font-size:.76rem;font-weight:620;color:var(--ink-2);letter-spacing:.005em}
.mp-form-required{color:var(--bad);margin-left:2px}
.mp-form-optional{color:var(--ink-4);font-weight:400;margin-left:4px;font-size:.72rem}

.mp-form-input,.mp-input,.mp-form-select,.mp-select,.mp-form-textarea,
.mp-feature-select,.mp-team-feature-select,.mp-nk-input{
  width:100%;background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:9px 12px;font-size:.84rem;outline:none;
  transition:border-color .15s,box-shadow .15s,background .15s}
.mp-form-input::placeholder,.mp-input::placeholder,.mp-form-textarea::placeholder{color:var(--ink-4)}
.mp-form-input:hover,.mp-input:hover,.mp-form-select:hover,.mp-select:hover,.mp-form-textarea:hover{border-color:var(--line-brand)}
.mp-form-input:focus,.mp-input:focus,.mp-form-select:focus,.mp-select:focus,
.mp-form-textarea:focus,.mp-feature-select:focus,.mp-team-feature-select:focus,.mp-nk-input:focus{
  border-color:var(--brand);box-shadow:var(--ring)}
.mp-form-input:disabled,.mp-input:disabled,.mp-form-select:disabled{
  background:var(--card-soft);color:var(--ink-4);cursor:not-allowed}
.mp-form-input.is-invalid,.mp-form-input--error{border-color:var(--bad);box-shadow:var(--ring-bad)}
.mp-form-textarea{resize:vertical;line-height:1.65;min-height:88px}

.mp-form-select,.mp-select,.mp-feature-select,.mp-team-feature-select{
  appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%236C6D79' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.mp-feature-select,.mp-team-feature-select{padding:6px 30px 6px 10px;font-size:.76rem;width:auto;min-width:120px}

.mp-form-error,.mp-error{font-size:.72rem;color:var(--bad);font-weight:500}
.mp-form-hint{font-size:.72rem;color:var(--ink-4);line-height:1.5}
.mp-form-error--general{
  background:var(--bad-soft);color:var(--bad-ink);border:1px solid #EBD5CE;
  border-radius:var(--radius-sm);padding:11px 14px;font-size:.82rem;margin-bottom:16px}

.mp-form-section{
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);
  margin:26px 0 14px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.mp-form-section:first-child{margin-top:0}
.mp-form-footer{
  display:flex;gap:9px;justify-content:flex-end;align-items:center;
  padding-top:20px;border-top:1px solid var(--line);margin-top:24px}
.mp-confirm-inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* Upload */
.mp-upload-zone{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:32px 20px;text-align:center;cursor:pointer;
  border:1.5px dashed var(--line-brand);border-radius:var(--radius-md);
  background:var(--brand-50);color:var(--ink-3);font-size:.82rem;
  transition:border-color .15s,background .15s,color .15s}
.mp-upload-zone:hover,.mp-upload-zone--active{border-color:var(--brand);background:var(--brand-100);color:var(--brand-dd)}
.mp-upload-zone svg{width:30px;height:30px;opacity:.55}

/* Passwort-Toggle */
.mp-pw-wrap{position:relative}
.mp-pw-wrap .mp-form-input{padding-right:42px}
.mp-pw-toggle{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;line-height:0;padding:4px;border-radius:4px;
  display:flex;align-items:center;justify-content:center;color:var(--ink-4);transition:color .15s}
.mp-pw-toggle:hover{color:var(--brand)}
.mp-pw-toggle svg{width:16px;height:16px}
.mp-pw-toggle .icon-eye-off{display:none}
.mp-pw-toggle.is-visible .icon-eye{display:none}
.mp-pw-toggle.is-visible .icon-eye-off{display:block}

/* Typ-Auswahlkarten (Radio-Kacheln) */
.mp-type-card{position:relative;cursor:pointer}
.mp-type-card input[type=radio]{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.mp-type-card__inner{
  display:flex;flex-direction:column;gap:3px;height:100%;
  border:1.5px solid var(--line);border-radius:var(--radius);padding:13px 15px;
  background:var(--card);transition:border-color .15s,background .15s,box-shadow .15s}
.mp-type-card:hover .mp-type-card__inner{border-color:var(--brand-l)}
.mp-type-card input:checked + .mp-type-card__inner{
  border-color:var(--brand);background:var(--brand-50);box-shadow:var(--ring)}
.mp-type-card__label{font-size:.84rem;font-weight:650;color:var(--ink)}
.mp-type-card__desc{font-size:.74rem;color:var(--ink-3);line-height:1.5}

.mp-member-row{
  display:flex;align-items:center;gap:11px;
  padding:10px 12px;border-radius:var(--radius-sm);
  transition:background .12s}
.mp-member-row:hover{background:var(--card-soft)}

/* ══════════════════════════════════════════════════════════════════
   13 · TABS
   ══════════════════════════════════════════════════════════════════ */
.mp-tab-bar{display:flex;gap:2px;border-bottom:1px solid var(--line);padding:0 20px;overflow-x:auto}
.mp-tab-bar::-webkit-scrollbar{height:0}
.mp-tab-item{
  position:relative;padding:13px 15px;font-size:.83rem;font-weight:550;color:var(--ink-3);
  cursor:pointer;white-space:nowrap;text-decoration:none;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .14s,border-color .14s}
.mp-tab-item:hover{color:var(--ink)}
.mp-tab-item.active{color:var(--brand-dd);border-bottom-color:var(--brand);font-weight:650}
.mp-tab-pane{display:none;padding:22px 20px}
.mp-tab-pane.active{display:block}

/* ══════════════════════════════════════════════════════════════════
   14 · PAGINATION
   ══════════════════════════════════════════════════════════════════ */
.mp-pagination{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding:14px 20px;border-top:1px solid var(--line-soft);background:var(--card-soft)}
.mp-pagination__info{font-size:.76rem;color:var(--ink-3)}
.mp-pagination__btns{display:flex;align-items:center;gap:4px}
.mp-pag-btn{
  min-width:32px;height:32px;padding:0 8px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--radius-xs);
  background:var(--card);color:var(--ink-2);font-size:.78rem;font-weight:550;
  cursor:pointer;text-decoration:none;transition:all .13s}
.mp-pag-btn:hover{background:var(--brand-50);border-color:var(--line-brand);color:var(--brand-dd)}
.mp-pag-btn.active{background:var(--ink);border-color:var(--ink);color:#fff}
.mp-pag-btn svg{width:13px;height:13px}
.mp-pag-btn--disabled{opacity:.4;pointer-events:none}

/* ══════════════════════════════════════════════════════════════════
   15 · DETAIL-LAYOUT / PROFIL
   ══════════════════════════════════════════════════════════════════ */
.mp-detail-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:18px;align-items:start}

.mp-profile-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:24px 20px;text-align:center;box-shadow:var(--shadow-xs)}
.mp-profile-avatar{
  width:76px;height:76px;border-radius:20px;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;font-weight:720;letter-spacing:-.01em;
  background:var(--brand-100);color:var(--brand-dd)}
.mp-profile-name{font-size:1.02rem;font-weight:680;color:var(--ink);text-align:center;letter-spacing:-.015em}
.mp-profile-email{font-size:.78rem;color:var(--ink-3);text-align:center;margin-top:3px}
.mp-profile-desc{font-size:.78rem;color:var(--ink-3);text-align:center;margin-top:8px;line-height:1.6}
.mp-profile-tag{display:flex;justify-content:center;margin:12px 0 18px}

.mp-info-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:.82rem}
.mp-info-row:last-child{border-bottom:none}
.mp-info-label{color:var(--ink-3);flex-shrink:0}
.mp-info-value{font-weight:550;color:var(--ink);text-align:right;word-break:break-word}
.mp-info-value--accent{color:var(--brand);font-weight:680}
.mp-info-divider{border:none;border-top:1px solid var(--line);margin:14px 0}
.mp-info-section-label{
  font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:9px}
.mp-dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:.82rem}

/* ══════════════════════════════════════════════════════════════════
   16 · TIMELINE
   ══════════════════════════════════════════════════════════════════ */
.mp-timeline{display:flex;flex-direction:column}
.mp-tl-row{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.mp-tl-row:last-child{border-bottom:none}
.mp-tl-dot{
  width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:6px;
  background:var(--brand-l);box-shadow:0 0 0 3px var(--brand-50)}
.mp-tl-titel{font-size:.82rem;font-weight:550;color:var(--ink)}
.mp-tl-detail{font-size:.75rem;color:var(--ink-3);margin-top:2px}

/* ══════════════════════════════════════════════════════════════════
   17 · DOKUMENTE
   ══════════════════════════════════════════════════════════════════ */
.mp-doc-row{
  display:flex;align-items:center;gap:13px;
  padding:11px 0;border-bottom:1px solid var(--line-soft)}
.mp-doc-row:last-child{border-bottom:none}
.mp-doc-icon{
  width:38px;height:38px;border-radius:var(--radius-sm);flex-shrink:0;
  background:var(--brand-100);
  display:flex;align-items:center;justify-content:center}
.mp-doc-icon svg{width:17px;height:17px;color:var(--brand)}
.mp-doc-name{font-size:.82rem;font-weight:550;color:var(--ink)}
.mp-doc-meta{font-size:.72rem;color:var(--ink-3);margin-top:2px}
.mp-doc-dl{margin-left:auto;font-size:.78rem;font-weight:550;color:var(--brand);cursor:pointer;white-space:nowrap}
.mp-doc-dl:hover{color:var(--brand-dd);text-decoration:underline}
.mp-doc-kat{
  display:inline-flex;align-items:center;padding:2px 9px;border-radius:var(--radius-pill);
  background:var(--sunk);color:var(--ink-3);font-size:.68rem;font-weight:600}
.mp-doc-edit-panel{
  background:var(--card-soft);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px;margin-top:10px}

/* ══════════════════════════════════════════════════════════════════
   18 · FORTSCHRITT / QUOTEN
   ══════════════════════════════════════════════════════════════════ */
.mp-prog-bg,.mp-quote-bar-bg,.mp-objekt-card__belegung-bar-bg{
  background:var(--sunk);border-radius:var(--radius-pill);height:7px;overflow:hidden;margin-top:6px}
.mp-prog-fill,.mp-quote-bar-fill,.mp-objekt-card__belegung-bar-fill{
  height:100%;border-radius:var(--radius-pill);
  background:linear-gradient(90deg,var(--brand-l),var(--brand));transition:width .4s var(--ease)}

.mp-vz-monate{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.mp-vz-monat{font-size:.69rem;font-weight:620;padding:3px 9px;border-radius:var(--radius-pill)}
.mp-vz-monat--offen,.mp-vz-monat--inaktiv{background:var(--sunk);color:var(--ink-4)}

/* ══════════════════════════════════════════════════════════════════
   19 · OBJEKT-KARTEN
   ══════════════════════════════════════════════════════════════════ */
.mp-objekt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:22px}
.mp-objekt-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  overflow:hidden;box-shadow:var(--shadow-xs);
  transition:box-shadow .18s var(--ease),transform .18s var(--ease),border-color .18s}
.mp-objekt-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--line-brand)}
.mp-objekt-card__img{
  height:132px;position:relative;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--brand-100) 0%,var(--sunk) 100%);color:var(--brand)}
.mp-objekt-card__img svg{width:34px;height:34px;opacity:.5}
.mp-objekt-card__body{padding:16px}
.mp-objekt-card__title{font-size:.92rem;font-weight:660;color:var(--ink);letter-spacing:-.012em;margin-bottom:2px}
.mp-objekt-card__addr{font-size:.75rem;color:var(--ink-3);margin-bottom:12px}
.mp-objekt-card__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:12px}
.mp-objekt-stat{background:var(--card-soft);border:1px solid var(--line-soft);border-radius:var(--radius-xs);padding:9px 6px;text-align:center}
.mp-objekt-stat-val{font-size:.9rem;font-weight:680;color:var(--ink);font-variant-numeric:tabular-nums}
.mp-objekt-stat-lbl{font-size:.63rem;color:var(--ink-4);margin-top:2px;text-transform:uppercase;letter-spacing:.05em}
.mp-objekt-card__price{font-size:1.05rem;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.mp-objekt-card__price-lbl{font-size:.7rem;color:var(--ink-4)}
.mp-objekt-card__footer{
  padding:12px 16px;border-top:1px solid var(--line-soft);background:var(--card-soft);
  display:flex;align-items:center;justify-content:space-between}
.mp-objekt-card__footer a{font-size:.78rem;color:var(--brand);font-weight:620}
.mp-objekt-card__footer a:hover{text-decoration:underline}
.mp-objekt-card__belegung{margin:0 16px 14px}
.mp-objekt-card__belegung-label{font-size:.68rem;color:var(--ink-4);text-align:right;margin-top:4px}

/* ══════════════════════════════════════════════════════════════════
   20 · FEATURE-FLAGS (Admin)
   ══════════════════════════════════════════════════════════════════ */
.mp-feature-row{
  display:grid;grid-template-columns:30px minmax(0,1fr) auto;grid-template-rows:auto auto;
  align-items:center;gap:0 13px;
  padding:10px 12px;border-radius:var(--radius-sm);border:1px solid transparent;
  transition:background .12s,border-color .12s}
.mp-feature-row:hover{background:var(--card-soft)}
.mp-feature-row.has-override{background:var(--warn-soft);border-color:#EADCC7}
.mp-feature-row.has-override:hover{background:#F2E9DB}
.mp-feature-row__status{grid-column:1;grid-row:1/3;display:flex;align-items:center;justify-content:center}
.mp-feature-status{
  width:23px;height:23px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.6rem;font-weight:800}
.mp-feature-status--on-default  {background:var(--ok-soft);color:var(--ok-ink)}
.mp-feature-status--off-default {background:var(--sunk);color:var(--ink-4)}
.mp-feature-status--on-override {background:var(--brand);color:#fff}
.mp-feature-status--off-override{background:var(--bad-soft);color:var(--bad-ink)}
.mp-feature-row__info{grid-column:2;grid-row:1;min-width:0}
.mp-feature-row__name{font-size:.82rem;font-weight:620;color:var(--ink);line-height:1.35}
.mp-feature-row__desc{font-size:.72rem;color:var(--ink-4);line-height:1.45;margin-top:1px}
.mp-feature-row__controls{grid-column:3;grid-row:1}
.mp-feature-row__notiz{grid-column:2/4;grid-row:2;display:flex;align-items:center;gap:8px;margin-top:7px}

/* ══════════════════════════════════════════════════════════════════
   21 · PREISE / PAKETE
   ══════════════════════════════════════════════════════════════════ */
.mp-billing-toggle{display:inline-flex;background:var(--sunk);border-radius:var(--radius);padding:4px;gap:3px}
.mp-billing-toggle__btn{
  display:flex;align-items:center;gap:8px;border:none;background:none;cursor:pointer;
  padding:8px 20px;border-radius:var(--radius-sm);
  font-size:.82rem;font-weight:600;color:var(--ink-3);
  transition:background .15s,color .15s,box-shadow .15s}
.mp-billing-toggle__btn.is-active{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.mp-billing-toggle__badge{
  background:var(--ok-soft);color:var(--ok-ink);
  font-size:.65rem;font-weight:700;padding:2px 8px;border-radius:var(--radius-pill)}

.mp-pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;align-items:stretch}
.mp-pricing-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius-lg);
  padding:26px 24px;box-shadow:var(--shadow-xs);
  transition:border-color .18s,box-shadow .18s var(--ease),transform .18s var(--ease)}
.mp-pricing-card:hover{border-color:var(--brand-l);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.mp-pricing-card.is-popular{border-color:var(--brand);box-shadow:var(--shadow-md)}
.mp-pricing-card.is-current{border-color:var(--ok);background:var(--ok-soft)}
.mp-pricing-card__popular-badge{
  position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  background:var(--brand);color:#fff;
  font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 15px;border-radius:0 0 var(--radius) var(--radius)}
.mp-pricing-card__current-badge{
  position:absolute;top:14px;right:14px;
  background:var(--ok-soft);color:var(--ok-ink);
  font-size:.65rem;font-weight:700;padding:3px 10px;border-radius:var(--radius-pill)}
.mp-pricing-card__hd{margin-bottom:20px}
.mp-pricing-card__icon{
  width:44px;height:44px;border-radius:var(--radius);margin-bottom:14px;
  display:flex;align-items:center;justify-content:center}
.mp-pricing-card__icon svg{width:21px;height:21px}
.mp-pricing-card__icon--free{background:var(--sunk);color:var(--ink-3)}
.mp-pricing-card__icon--free svg{fill:var(--ink-3)}
.mp-pricing-card__icon--pro{background:var(--brand-100);color:var(--brand)}
.mp-pricing-card__icon--pro svg{fill:var(--brand)}
.mp-pricing-card__icon--team{background:var(--accent-50);color:var(--accent)}
.mp-pricing-card__icon--team svg{fill:var(--accent)}
.mp-pricing-card__name{font-size:1.02rem;font-weight:700;color:var(--ink);margin-bottom:5px;letter-spacing:-.015em}
.mp-pricing-card__desc{font-size:.78rem;color:var(--ink-3);line-height:1.55}
.mp-pricing-card__price{margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--line-soft)}
.mp-pricing-card__amount{font-size:2rem;font-weight:740;color:var(--ink);line-height:1.15;letter-spacing:-.035em}
.mp-pricing-card__period{font-size:.8rem;color:var(--ink-4);margin-left:4px}
.mp-pricing-card__saving{
  display:inline-flex;align-items:center;vertical-align:middle;margin-left:7px;
  background:var(--ok-soft);color:var(--ok-ink);
  font-size:.65rem;font-weight:700;padding:2px 9px;border-radius:var(--radius-pill)}
.mp-pricing-card__annual{font-size:.72rem;color:var(--ink-4);margin-top:5px}
.mp-pricing-card__features{display:flex;flex-direction:column;gap:9px;margin-bottom:24px;flex:1}
.mp-pricing-card__feature{display:flex;align-items:flex-start;gap:9px;font-size:.8rem;color:var(--ink-2);line-height:1.45}
.mp-pricing-card__feature svg{width:15px;height:15px;color:var(--ok);flex-shrink:0;margin-top:1px}
.mp-pricing-card__feature.is-disabled{color:var(--ink-4)}
.mp-pricing-card__feature.is-disabled svg{color:var(--line-brand)}
.mp-pricing-card__action{margin-top:auto}

/* Paket-Auswahl in der Registrierung */
.mp-paket-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:11px}
.mp-paket-card{
  position:relative;cursor:pointer;padding:15px;
  border:1.5px solid var(--line);border-radius:var(--radius-md);background:var(--card);
  transition:border-color .15s,background .15s,box-shadow .15s}
.mp-paket-card:hover{border-color:var(--brand-l)}
.mp-paket-card.is-selected{border-color:var(--brand);background:var(--brand-50);box-shadow:var(--ring)}
.mp-paket-card input[type=radio]{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.mp-paket-card__radio{
  width:17px;height:17px;border-radius:50%;border:2px solid var(--line-brand);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;margin-bottom:11px;
  transition:border-color .15s,background .15s}
.mp-paket-card.is-selected .mp-paket-card__radio{border-color:var(--brand);background:var(--brand)}
.mp-paket-card.is-selected .mp-paket-card__radio::after{content:'';width:5px;height:5px;border-radius:50%;background:#fff}
.mp-paket-card__name{font-size:.85rem;font-weight:680;color:var(--ink);margin-bottom:3px}
.mp-paket-card__desc{font-size:.72rem;color:var(--ink-3);line-height:1.5;margin-bottom:9px}
.mp-paket-card__limits{font-size:.7rem;color:var(--ink-4);line-height:1.9}
.mp-paket-card__limit{display:flex;align-items:center;gap:6px}
.mp-paket-card__limit svg{width:11px;height:11px;color:var(--ok);flex-shrink:0}
.mp-paket-badge{
  position:absolute;top:-1px;right:12px;
  background:var(--brand);color:#fff;
  font-size:.58rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:0 0 var(--radius-xs) var(--radius-xs)}

/* ══════════════════════════════════════════════════════════════════
   22 · NEBENKOSTEN
   ══════════════════════════════════════════════════════════════════ */
.mp-nk-table{width:100%;border-collapse:collapse}
.mp-nk-table thead th{
  font-size:.68rem;font-weight:650;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);text-align:left;padding:9px 12px;
  background:var(--card-soft);border-bottom:1px solid var(--line)}
.mp-nk-table thead th:last-child{text-align:right}
.mp-nk-table tbody tr{border-bottom:1px solid var(--line-soft)}
.mp-nk-table tbody tr:last-child{border-bottom:none}
.mp-nk-table tbody td{font-size:.82rem;color:var(--ink);padding:11px 12px;vertical-align:middle}
.mp-nk-table tbody td:last-child{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.mp-nk-table tfoot td{font-size:.86rem;padding:12px;border-top:2px solid var(--line);font-weight:650}

/* Kostentabelle der Detailseite (IMB-20): breit als Tabelle, schmal als
   Karten – der Mieterbetrag steht dann oben rechts neben der Kostenart statt
   außerhalb des sichtbaren Bereichs. */
.nk-kosten-rahmen{overflow-x:auto}
.nk-kosten{min-width:650px}
@media (max-width:639.98px){
  .nk-kosten-rahmen{overflow:visible}
  .nk-kosten{min-width:0}
  .nk-kosten > thead{display:none}
  .nk-kosten,.nk-kosten > tbody,.nk-kosten > tfoot{display:block}
  .nk-kosten > tbody > tr.nk-k-zeile{
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;
    grid-template-areas:"art betrag" "schl gesamt" "weg weg";
    padding:12px 14px;border-bottom:1px solid var(--line-soft)}
  .nk-kosten > tbody > tr.nk-k-zeile > td{display:block;padding:0;border:0}
  .nk-kosten > tbody > tr > .nk-k-art{grid-area:art}
  .nk-kosten > tbody > tr > .nk-k-betrag{grid-area:betrag;font-size:.95rem}
  .nk-kosten > tbody > tr > .nk-k-schl{grid-area:schl}
  .nk-kosten > tbody > tr > .nk-k-gesamt{grid-area:gesamt;text-align:right;font-size:.75rem;color:var(--ink-3)}
  .nk-kosten > tbody > tr > .nk-k-weg{grid-area:weg;margin-top:4px}
  .nk-kosten > tbody > tr > .nk-k-betrag::before,.nk-kosten > tbody > tr > .nk-k-gesamt::before{
    content:attr(data-label);display:block;font-size:.66rem;font-weight:500;color:var(--ink-4);
    text-transform:uppercase;letter-spacing:.03em}
  .nk-kosten > tbody > tr.nk-k-details{display:block}
  .nk-kosten > tbody > tr.nk-k-details > td{display:block}
  .nk-kosten > tfoot > tr{display:flex;justify-content:space-between;flex-wrap:wrap}
  .nk-kosten > tfoot > tr > td{border-top:0}
  .nk-kosten > tfoot > tr > td:empty{display:none}
}
.mp-nk-input{width:110px;text-align:right;padding:6px 9px;font-size:.82rem;font-variant-numeric:tabular-nums}

.mp-result-nachzahlung,.mp-result-gutschrift{
  border-radius:var(--radius-md);padding:20px;text-align:center;margin-bottom:16px;border:1px solid transparent}
.mp-result-nachzahlung{background:var(--bad-soft);color:var(--bad-ink);border-color:#EBD5CE}
.mp-result-gutschrift{background:var(--ok-soft);color:var(--ok-ink);border-color:#CFE2D7}
.mp-result-num{font-size:1.7rem;font-weight:740;margin:5px 0 3px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.mp-result-lbl,.mp-result-label{font-size:.78rem;opacity:.85;font-weight:600}
.mp-result-sub{font-size:.72rem;opacity:.7;margin-top:3px}

.mp-sum-box{background:var(--card-soft);border:1px solid var(--line-soft);border-radius:var(--radius);padding:16px}
.mp-sum-row{
  display:flex;justify-content:space-between;gap:12px;
  padding:6px 0;font-size:.82rem;color:var(--ink-2);border-bottom:1px solid var(--line-soft)}
.mp-sum-row:last-child{border-bottom:none}
.mp-sum-row--total{font-size:.92rem;font-weight:700;color:var(--ink);margin-top:5px;padding-top:10px;border-top:1px solid var(--line);border-bottom:none}
.mp-sum-label{color:var(--ink-3)}
.mp-sum-wert{font-weight:620;font-variant-numeric:tabular-nums}

.mp-zahl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.mp-zahl-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mp-zahl-form{display:flex;flex-direction:column;gap:14px}

/* ══════════════════════════════════════════════════════════════════
   23 · LEERZUSTAND
   ══════════════════════════════════════════════════════════════════ */
.mp-empty{text-align:center;padding:56px 24px;color:var(--ink-4)}
.mp-empty svg{width:46px;height:46px;margin:0 auto 14px;opacity:.35;color:var(--brand)}
.mp-empty h3{font-size:.95rem;font-weight:640;color:var(--ink-2);margin-bottom:6px}
.mp-empty p{font-size:.82rem;line-height:1.6;max-width:380px;margin:0 auto}
.mp-empty .mp-btn{margin-top:18px}

/* ══════════════════════════════════════════════════════════════════
   24 · AUTH-SEITEN
   ══════════════════════════════════════════════════════════════════ */
.mp-auth-page{
  position:relative;min-height:100vh;padding:32px 24px;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(900px 460px at 12% -8%, rgba(144,175,197,.34), transparent 62%),
    radial-gradient(760px 420px at 100% 106%, rgba(51,107,135,.20), transparent 60%),
    var(--paper);
}
.mp-auth-card{
  position:relative;width:100%;max-width:440px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-xl);
  padding:40px 38px;box-shadow:var(--shadow-lg)}
.mp-auth-card--wide{max-width:720px}
.mp-auth-logo{display:flex;align-items:center;justify-content:center;gap:11px;margin-bottom:28px}
.mp-auth-logo-icon{
  width:42px;height:42px;border-radius:12px;
  background:linear-gradient(145deg,var(--brand) 0%,var(--brand-dd) 100%);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:750;font-size:1.05rem;
  box-shadow:0 6px 16px -6px rgba(51,107,135,.7)}
.mp-auth-logo-icon svg{width:22px;height:22px;fill:#fff}
.mp-auth-logo-text{font-size:1.3rem;font-weight:720;color:var(--ink);letter-spacing:-.03em}
.mp-auth-title{font-size:1.24rem;font-weight:700;color:var(--ink);margin-bottom:6px;letter-spacing:-.022em}
.mp-auth-sub{font-size:.83rem;color:var(--ink-3);margin-bottom:26px;line-height:1.6}
.mp-auth-section{margin-bottom:22px}
.mp-auth-section-title{
  font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:11px}
.mp-auth-hint{
  text-align:center;margin-top:22px;padding-top:20px;border-top:1px solid var(--line-soft);
  font-size:.75rem;color:var(--ink-4);line-height:1.85}
.mp-auth-hint strong{color:var(--ink-2)}
.mp-auth-link{text-align:center;margin-top:20px;font-size:.8rem;color:var(--ink-3)}
.mp-auth-link a{color:var(--brand);font-weight:620}
.mp-auth-link a:hover{text-decoration:underline}
/* Login-Zeile „merken / Passwort vergessen“ */
.mp-auth-card .mp-form-footer{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:none;padding:0;margin:0 0 20px;font-size:.78rem}
.mp-auth-card .mp-form-footer label{display:flex;align-items:center;gap:7px;cursor:pointer;color:var(--ink-2)}
.mp-auth-card .mp-form-footer a{color:var(--brand);font-weight:550}
.mp-auth-card .mp-form-footer a:hover{text-decoration:underline}

/* ──────────────────────────────────────────────────────────────────
   24b · ANMELDUNG — eigene Größenskala
   Die Login-Karte trägt keinen Innenabstand, damit Hinweis- und Fußzeile
   bündig über die volle Kartenbreite laufen; die Abstände sitzen an den
   Abschnitten. Die Doppelklasse (.mp-auth-card.mp-auth-card--login) sticht
   die Responsive-Regel in Abschnitt 26 aus.
   ────────────────────────────────────────────────────────────────── */
.mp-auth-page.mp-auth-page--plain{padding:56px 24px;background:#EFF3F5}
.mp-auth-card.mp-auth-card--login{
  max-width:470px;padding:0;border-radius:22px;overflow:hidden;
  box-shadow:0 20px 44px rgba(42,49,50,.07)}

.mp-login-brand{
  display:flex;align-items:center;justify-content:center;gap:13px;padding:38px 40px 0;
  font-family:'Space Grotesk','Inter',ui-sans-serif,sans-serif;
  font-size:32px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.mp-login-brand svg{width:52px;height:52px;flex:none}
.mp-login-brand b{font-weight:inherit;color:var(--brand)}

.mp-login-hd{padding:28px 40px 0;display:flex;flex-direction:column;gap:4px}
.mp-login-hd h1{font-size:22px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.mp-login-hd p{font-size:13px;color:var(--ink-3)}

.mp-login-alert{
  display:flex;align-items:flex-start;gap:10px;margin:20px 40px 0;padding:13px 15px;
  background:#FBEDE9;border:1px solid #EED2C9;border-radius:11px}
.mp-login-alert__mark{flex:none;font-size:12.5px;font-weight:800;line-height:1.5;color:var(--bad)}
.mp-login-alert p{font-size:12px;line-height:1.5;color:#8A3A28}
.mp-login-alert b{font-weight:700}
.mp-login-alert--ok{background:var(--ok-soft);border-color:#C8DFD1}
.mp-login-alert--ok .mp-login-alert__mark,
.mp-login-alert--ok p{color:var(--ok-ink)}

.mp-login-form{padding:22px 40px 0;display:flex;flex-direction:column;gap:16px}
.mp-login-field{display:flex;flex-direction:column;gap:7px}
.mp-login-label{font-size:12.5px;font-weight:700;color:var(--ink)}
.mp-login-input{
  width:100%;height:46px;padding:0 14px;
  background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:10px;
  font-size:13.5px;outline:none;transition:border-color .15s,box-shadow .15s}
.mp-login-input::placeholder{color:#A6A7B0}
.mp-login-input:hover{border-color:var(--line-brand)}
.mp-login-input:focus{border-color:var(--brand);box-shadow:var(--ring)}
.mp-login-input.is-invalid{border-color:#E0A99C;box-shadow:var(--ring-bad)}
/* Autofill-Optik: das Browser-Gelb auf den Markenton festnageln */
.mp-login-input:-webkit-autofill,
.mp-login-input:-webkit-autofill:hover,
.mp-login-input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);caret-color:var(--ink);
  -webkit-box-shadow:0 0 0 40px #FDFBE4 inset}

.mp-login-pw{position:relative;display:flex;align-items:center}
.mp-login-pw .mp-login-input{padding-right:44px}
.mp-login-pw__toggle{
  position:absolute;right:11px;display:flex;padding:4px;border:none;background:none;
  border-radius:5px;color:#8A8B95;transition:color .15s}
.mp-login-pw__toggle:hover{color:var(--brand)}
.mp-login-pw__toggle svg{width:17px;height:17px}
.mp-login-pw__toggle .icon-eye-off{display:none}
.mp-login-pw__toggle.is-visible .icon-eye{display:none}
.mp-login-pw__toggle.is-visible .icon-eye-off{display:block}

.mp-login-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.mp-login-row a{font-size:12.5px;font-weight:700;color:var(--brand)}
.mp-login-row a:hover{text-decoration:underline}
.mp-login-remember{
  display:flex;align-items:center;gap:9px;
  font-size:12.5px;color:var(--ink-2);cursor:pointer}
.mp-login-remember input{position:absolute;width:0;height:0;opacity:0}
.mp-login-remember__box{
  width:18px;height:18px;flex:none;border-radius:5px;border:2px solid #CFD6D8;
  display:grid;place-items:center;color:#FFF;transition:background .12s,border-color .12s}
.mp-login-remember__box svg{width:10px;height:10px;opacity:0;transition:opacity .12s}
.mp-login-remember input:checked + .mp-login-remember__box{background:var(--brand);border-color:var(--brand)}
.mp-login-remember input:checked + .mp-login-remember__box svg{opacity:1}
.mp-login-remember input:focus-visible + .mp-login-remember__box{box-shadow:var(--ring)}

.mp-login-cta{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:16px;border:none;border-radius:12px;
  font-size:14.5px;font-weight:800;background:#232B2C;color:#FFF;
  box-shadow:0 10px 24px rgba(35,43,44,.24);
  transition:background .15s,color .15s,box-shadow .15s}
.mp-login-cta:hover{background:#1A2122}
.mp-login-cta:disabled{
  background:var(--line);color:#A6A7B0;cursor:not-allowed;box-shadow:none}

.mp-login-signup{text-align:center;font-size:12.5px;color:var(--ink-3)}
.mp-login-signup a{color:var(--brand);font-weight:700}
.mp-login-signup a:hover{text-decoration:underline}

.mp-login-trial{
  display:flex;align-items:center;gap:13px;margin:20px 40px 0;padding:14px 16px;
  background:#EAF3ED;border:1px solid #C8DFD1;border-radius:12px}
.mp-login-trial__badge{
  width:38px;height:38px;flex:none;border-radius:10px;background:var(--ok-ink);color:#FFF;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05}
.mp-login-trial__badge i{font-style:normal;font-size:14px;font-weight:800}
.mp-login-trial__badge span{font-size:7.5px;font-weight:700;letter-spacing:.08em}
.mp-login-trial p{font-size:11.5px;line-height:1.5;color:#3D6A52}
.mp-login-trial b{color:#204534;font-weight:700}

.mp-login-foot{
  margin:26px 40px 0;border-top:1px solid var(--line);padding:16px 0 24px;
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:11.5px;color:#A6A7B0}
.mp-login-foot svg{width:12px;height:12px;color:#8FA9A0}

@media (max-width:520px){
  .mp-auth-page.mp-auth-page--plain{padding:32px 16px}
  .mp-login-brand{padding:30px 24px 0;gap:10px;font-size:27px}
  .mp-login-brand svg{width:44px;height:44px}
  .mp-login-hd,.mp-login-form{padding-left:24px;padding-right:24px}
  .mp-login-alert,.mp-login-trial,.mp-login-foot{margin-left:24px;margin-right:24px}
}

/* ──────────────────────────────────────────────────────────────────
   24c · REGISTRIERUNG — Version 1a (Startpaket + Testphase)
   Gleiche Bauweise wie die Anmeldung: die Karte trägt keinen
   Innenabstand, die Abstände sitzen an den Abschnitten. Dadurch laufen
   Testphasen-Banner, Ablaufbox und Fußzeile bündig über die volle
   Kartenbreite. Die Doppelklasse (.mp-auth-card.mp-auth-card--register)
   sticht die Responsive-Regel in Abschnitt 26 aus.
   ────────────────────────────────────────────────────────────────── */
.mp-auth-card.mp-auth-card--register{
  max-width:800px;padding:0;border-radius:22px;overflow:hidden;
  box-shadow:0 20px 44px rgba(42,49,50,.07)}

.mp-reg-brand{
  display:flex;align-items:center;justify-content:center;gap:15px;padding:34px 40px 0;
  font-family:'Space Grotesk','Inter',ui-sans-serif,sans-serif;
  font-size:38px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.mp-reg-brand svg{width:62px;height:62px;flex:none}
.mp-reg-brand b{font-weight:inherit;color:var(--brand)}

/* Testphasen-Banner — Zahl und Datum kommen je Paket aus der Datenbank */
.mp-reg-trial{
  display:flex;align-items:center;gap:14px;margin:22px 40px 0;padding:15px 18px;
  background:#EAF3ED;border:1px solid #C8DFD1;border-radius:14px}
.mp-reg-trial__badge{
  width:44px;height:44px;flex:none;border-radius:11px;background:var(--ok-ink);color:#FFF;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05}
.mp-reg-trial__badge i{font-style:normal;font-size:16px;font-weight:800}
.mp-reg-trial__badge span{font-size:8px;font-weight:700;letter-spacing:.08em}
.mp-reg-trial__txt{display:flex;flex-direction:column;gap:3px}
.mp-reg-trial__txt strong{font-size:14.5px;font-weight:800;color:#204534}
.mp-reg-trial__txt p{font-size:12px;line-height:1.5;color:#3D6A52}
.mp-reg-trial__txt b{color:#204534;font-weight:700}
/* Pakete ohne Testphase (dauerhaft kostenlos) — Markenton statt Grün */
.mp-reg-trial--dauerhaft{background:var(--brand-50);border-color:var(--line-brand)}
.mp-reg-trial--dauerhaft .mp-reg-trial__badge{background:var(--brand)}
.mp-reg-trial--dauerhaft .mp-reg-trial__badge i{font-size:19px}
.mp-reg-trial--dauerhaft .mp-reg-trial__txt strong{color:var(--brand-dd)}
.mp-reg-trial--dauerhaft .mp-reg-trial__txt p,
.mp-reg-trial--dauerhaft .mp-reg-trial__txt b{color:var(--brand-d)}
/* Je Paket ist genau ein Banner / eine Ablaufbox sichtbar — das Umschalten
   übernimmt das Skript in der View. Ohne diese Regel würde display:flex das
   hidden-Attribut aus dem Browser-Stylesheet überstimmen. */
.mp-reg-trial[hidden],.mp-reg-steps[hidden]{display:none}

.mp-reg-hd{padding:24px 40px 0;display:flex;flex-direction:column;gap:3px}
.mp-reg-hd h1{font-size:21px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.mp-reg-hd p{font-size:13px;color:var(--ink-3)}

.mp-reg-alert{
  display:flex;align-items:flex-start;gap:10px;margin:20px 40px 0;padding:13px 15px;
  background:#FBEDE9;border:1px solid #EED2C9;border-radius:11px}
.mp-reg-alert__mark{flex:none;font-size:12.5px;font-weight:800;line-height:1.5;color:var(--bad)}
.mp-reg-alert p{font-size:12px;line-height:1.5;color:#8A3A28}

/* Abschnittskopf: Eyebrow links, Zusatzhinweis rechts */
.mp-reg-sechd{
  padding:24px 40px 0;display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap}
.mp-reg-eyebrow{
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8A8B95}
.mp-reg-req{font-size:11.5px;color:var(--bad)}
.mp-reg-req b{font-weight:800}
.mp-reg-pill{
  font-size:11.5px;font-weight:600;color:var(--ok-ink);
  background:#EAF3ED;border:1px solid #C8DFD1;border-radius:var(--radius-pill);padding:5px 11px}

.mp-reg-grid{
  padding:12px 40px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.mp-reg-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.mp-reg-field--full{grid-column:1 / -1}
.mp-reg-label{font-size:12.5px;font-weight:700;color:var(--ink)}
.mp-reg-label span{color:var(--bad)}
.mp-reg-input{
  width:100%;height:44px;padding:0 14px;
  background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:10px;
  font-size:13.5px;outline:none;transition:border-color .15s,box-shadow .15s}
.mp-reg-input::placeholder{color:#A6A7B0}
.mp-reg-input:hover{border-color:var(--line-brand)}
.mp-reg-input:focus{border-color:var(--brand);box-shadow:var(--ring)}
.mp-reg-input.is-invalid{border-color:#E0A99C;box-shadow:var(--ring-bad)}
.mp-reg-input:-webkit-autofill,
.mp-reg-input:-webkit-autofill:hover,
.mp-reg-input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);caret-color:var(--ink);
  -webkit-box-shadow:0 0 0 40px #FDFBE4 inset}
.mp-reg-fehler{font-size:11.5px;line-height:1.45;color:var(--bad)}

.mp-reg-pw{position:relative;display:flex;align-items:center}
.mp-reg-pw .mp-reg-input{padding-right:44px}
.mp-reg-pw__toggle{
  position:absolute;right:11px;display:flex;padding:4px;border:none;background:none;
  border-radius:5px;color:#8A8B95;transition:color .15s}
.mp-reg-pw__toggle:hover{color:var(--brand)}
.mp-reg-pw__toggle svg{width:17px;height:17px}
.mp-reg-pw__toggle .icon-eye-off{display:none}
.mp-reg-pw__toggle.is-visible .icon-eye{display:none}
.mp-reg-pw__toggle.is-visible .icon-eye-off{display:block}

/* Paketkarten — das Radio liegt visuell verborgen in der Karte */
.mp-reg-plans{
  padding:12px 40px 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.mp-reg-plan{
  position:relative;display:flex;flex-direction:column;gap:10px;
  border:1.5px solid var(--line);background:var(--card);border-radius:14px;
  padding:15px 15px 16px;cursor:pointer;
  transition:border-color .15s,background .15s,box-shadow .15s}
.mp-reg-plan:hover{border-color:var(--line-brand)}
.mp-reg-plan input{position:absolute;width:0;height:0;opacity:0}
.mp-reg-plan__badge{
  position:absolute;top:-9px;right:12px;
  font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#FFF;background:#232B2C;border-radius:5px;padding:3px 7px}
.mp-reg-plan__dot{
  width:19px;height:19px;border-radius:var(--radius-pill);border:2px solid #CFD6D8;
  display:grid;place-items:center;transition:border-color .15s}
.mp-reg-plan__dot::after{
  content:"";width:9px;height:9px;border-radius:var(--radius-pill);
  background:transparent;transition:background .15s}
.mp-reg-plan__meta{display:flex;flex-direction:column;gap:2px}
.mp-reg-plan__name{font-size:14.5px;font-weight:800;color:var(--ink)}
.mp-reg-plan__preis{font-size:11.5px;line-height:1.4;color:var(--ink-3)}
.mp-reg-plan__preis b{color:var(--ink);font-weight:700}
.mp-reg-plan__feats{display:flex;flex-direction:column;gap:5px}
.mp-reg-plan__feat{display:flex;gap:7px;font-size:11.5px;line-height:1.4;color:var(--ink-2)}
.mp-reg-plan__feat svg{width:11px;height:11px;flex:none;margin-top:3px;color:var(--brand)}
.mp-reg-plan.is-selected,
.mp-reg-plan:has(input:checked){
  border-color:var(--brand);background:#F2F8FA;box-shadow:0 6px 16px rgba(51,107,135,.14)}
.mp-reg-plan.is-selected .mp-reg-plan__dot,
.mp-reg-plan:has(input:checked) .mp-reg-plan__dot{border-color:var(--brand)}
.mp-reg-plan.is-selected .mp-reg-plan__dot::after,
.mp-reg-plan:has(input:checked) .mp-reg-plan__dot::after{background:var(--brand)}
.mp-reg-plan:focus-within{box-shadow:var(--ring)}

/* Ablauf der Testphase */
.mp-reg-steps{
  margin:22px 40px 0;background:#FAFBFB;border:1px solid var(--line);border-radius:14px;
  padding:17px 19px;display:flex;flex-direction:column;gap:14px}
.mp-reg-steps__hd{font-size:12.5px;font-weight:800;color:var(--ink)}
.mp-reg-steps__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.mp-reg-step{
  display:flex;flex-direction:column;gap:5px;padding-top:11px;border-top:3px solid var(--brand)}
.mp-reg-step__tag{
  font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.mp-reg-step__titel{font-size:12px;font-weight:700;color:var(--ink)}
.mp-reg-step p{font-size:11.5px;line-height:1.5;color:var(--ink-3)}
.mp-reg-step--start{border-top-color:var(--ok-ink)}
.mp-reg-step--start .mp-reg-step__tag{color:var(--ok-ink)}
.mp-reg-step--erinnerung{border-top-color:#D8AE6B}
.mp-reg-step--erinnerung .mp-reg-step__tag{color:#A56A2A}
.mp-reg-steps__note{
  display:flex;align-items:flex-start;gap:9px;padding:12px 13px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  font-size:11.5px;line-height:1.55;color:var(--ink-2)}
.mp-reg-steps__note::before{content:"\21BB";flex:none;color:var(--brand);font-weight:800}
.mp-reg-steps__note b{font-weight:700;color:var(--ink)}

/* Zustimmung zu AGB, Datenschutz und Widerrufsbelehrung – eine Checkbox */
.mp-reg-check{
  padding:20px 40px 0;display:flex;align-items:flex-start;gap:10px;
  font-size:11.5px;line-height:1.55;color:var(--ink-2);cursor:pointer}
.mp-reg-check input{position:absolute;width:0;height:0;opacity:0}
.mp-reg-check__box{
  width:18px;height:18px;flex:none;margin-top:1px;border-radius:5px;border:2px solid var(--line-brand);
  display:grid;place-items:center;color:#FFF;transition:background .12s,border-color .12s}
.mp-reg-check__box svg{width:10px;height:10px;opacity:0;transition:opacity .12s}
.mp-reg-check input:checked + .mp-reg-check__box{background:var(--brand);border-color:var(--brand)}
.mp-reg-check input:checked + .mp-reg-check__box svg{opacity:1}
.mp-reg-check input:focus-visible + .mp-reg-check__box{box-shadow:var(--ring)}
.mp-reg-check a{color:var(--brand);font-weight:600}
.mp-reg-check a:hover{text-decoration:underline}

/* Kostenhinweis unmittelbar über der Schaltfläche – bleibt neben der Checkbox
   bestehen, weil er an den Button gehört und nicht in ein Häkchen. */
.mp-reg-hinweis{
  padding:12px 40px 0;
  font-size:11.5px;line-height:1.6;color:var(--ink-3)}
.mp-reg-hinweis b{font-weight:700;color:var(--ink-2)}
.mp-reg-hinweis a{color:var(--brand);font-weight:600}
.mp-reg-hinweis a:hover{text-decoration:underline}

.mp-reg-submit{padding:16px 40px 0;display:flex;flex-direction:column;gap:11px}
.mp-reg-cta{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:17px;border:none;border-radius:12px;
  font-size:15px;font-weight:800;background:#232B2C;color:#FFF;
  box-shadow:0 10px 24px rgba(35,43,44,.24);
  transition:background .15s,color .15s,box-shadow .15s}
.mp-reg-cta svg{width:14px;height:14px;flex:none}
.mp-reg-cta:hover{background:#1A2122}
.mp-reg-cta:disabled{background:var(--line);color:#A6A7B0;cursor:not-allowed;box-shadow:none}
.mp-reg-fine{text-align:center;font-size:11.5px;color:#8A8B95}
.mp-reg-signin{text-align:center;font-size:12.5px;color:var(--ink-3)}
.mp-reg-signin a{color:var(--brand);font-weight:700}
.mp-reg-signin a:hover{text-decoration:underline}

.mp-reg-foot{
  margin:24px 40px 0;border-top:1px solid var(--line);padding:16px 0 22px;
  text-align:center;font-size:11.5px;color:#A6A7B0}

@media (max-width:720px){
  .mp-reg-grid{grid-template-columns:minmax(0,1fr)}
  .mp-reg-plans{grid-template-columns:minmax(0,1fr)}
  .mp-reg-plan__badge{top:-9px;right:12px}
}

/* ── Zusatzmodul (Registrierung, Entwurf 1b) ────────────────────────
   Reine Auskunft: hier wird nichts gebucht. Ein zubuchbares Modul wird
   später unter „Modul & Abo" aktiviert, ein inklusives läuft ohnehin mit.
   Deshalb keine Bedienelemente – die Karte hat weder Zeiger noch Hover,
   damit sie nicht nach Schaltfläche aussieht. */
.mp-reg-modul{padding:0}
.mp-reg-modul__karte{
  margin:12px 40px 0;display:flex;align-items:center;gap:16px;
  border:1.5px solid var(--line);background:var(--card);border-radius:14px;
  padding:16px 18px}
/* Inklusive ist eine Zusage – die darf sich farblich davon abheben. */
.mp-reg-modul__karte.is-inklusive{background:var(--card-soft);border-color:#C8DFD1}

.mp-reg-modul__text{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.mp-reg-modul__kopf{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.mp-reg-modul__name{font-size:14.5px;font-weight:800;color:var(--ink)}
.mp-reg-modul__plus{
  font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#FFF;background:var(--accent);border-radius:5px;padding:3px 7px}
.mp-reg-modul__pill{
  font-size:11px;font-weight:700;color:var(--ok-ink);
  background:#EAF3ED;border:1px solid #C8DFD1;border-radius:var(--radius-pill);padding:3px 9px}
/* „Später aktivierbar" ist kein Versprechen für jetzt – zurückhaltender
   als die grüne Zusage, damit beide nicht gleich laut auftreten. */
.mp-reg-modul__pill--spaeter{
  color:var(--ink-3);background:var(--sunk);border-color:var(--line)}
.mp-reg-modul__desc{font-size:12px;line-height:1.5;color:var(--ink-2)}
.mp-reg-modul__preis{font-size:11.5px;line-height:1.55;color:var(--ink-3)}
.mp-reg-modul__preis b{color:var(--ink);font-weight:700}

@media (max-width:520px){
  .mp-reg-brand{padding:30px 24px 0;gap:10px;font-size:29px}
  .mp-reg-brand svg{width:48px;height:48px}
  .mp-reg-hd,.mp-reg-sechd,.mp-reg-grid,.mp-reg-plans,
  .mp-reg-check,.mp-reg-hinweis,.mp-reg-submit{padding-left:24px;padding-right:24px}
  .mp-reg-trial,.mp-reg-alert,.mp-reg-steps,.mp-reg-foot,
  .mp-reg-modul__karte{margin-left:24px;margin-right:24px}
  .mp-reg-steps__grid{grid-template-columns:minmax(0,1fr)}
}

/* ──────────────────────────────────────────────────────────────────
   24d · STATISCHE SEITEN (AGB, Datenschutz, Impressum, Kontakt …)
   Eigenständige Seiten ohne App-Shell, damit sie auch ohne Anmeldung
   funktionieren. .mp-legal-body formatiert das im Admin gepflegte HTML –
   die Regeln greifen deshalb auf Elemente, nicht auf Klassen.
   ────────────────────────────────────────────────────────────────── */
.mp-legal-page{
  min-height:100vh;display:flex;flex-direction:column;background:#EFF3F5;color:var(--ink)}
.mp-legal-wrap{width:100%;max-width:780px;margin:0 auto;padding:0 24px}

.mp-legal-header{background:var(--card);border-bottom:1px solid var(--line)}
.mp-legal-header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:72px;flex-wrap:wrap}
.mp-legal-brand{
  display:flex;align-items:center;gap:11px;
  font-family:'Space Grotesk','Inter',ui-sans-serif,sans-serif;
  font-size:23px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.mp-legal-brand:hover{color:var(--ink);text-decoration:none}
.mp-legal-brand svg{width:38px;height:38px;flex:none}
.mp-legal-brand b{font-weight:inherit;color:var(--brand)}
.mp-legal-back{font-size:12.5px;font-weight:600;color:var(--brand)}
.mp-legal-back:hover{text-decoration:underline}

.mp-legal-main{flex:1;padding-top:44px;padding-bottom:56px}
.mp-legal-eyebrow{
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#8A8B95;margin-bottom:10px}
.mp-legal-title{
  font-size:31px;font-weight:800;letter-spacing:-.025em;line-height:1.2;color:var(--ink)}
.mp-legal-meta{margin-top:9px;font-size:13px;color:var(--ink-3)}

.mp-legal-hinweis{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:26px;
  padding:13px 15px;border-radius:11px;
  background:var(--warn-soft);border:1px solid #E8D5BC;
  font-size:12.5px;line-height:1.55;color:var(--warn-ink)}
.mp-legal-hinweis strong{font-weight:800}
.mp-legal-hinweis a{color:var(--warn-ink);font-weight:700;text-decoration:underline}

/* Vom Admin gepflegtes HTML */
.mp-legal-body{
  margin-top:30px;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:34px 38px;box-shadow:0 20px 44px rgba(42,49,50,.05)}
.mp-legal-body > section + section{margin-top:28px;padding-top:26px;border-top:1px solid var(--line-soft)}
.mp-legal-body h2{
  font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin-bottom:11px}
.mp-legal-body h3{font-size:13.5px;font-weight:700;color:var(--ink);margin:18px 0 8px}
.mp-legal-body p{font-size:13.5px;line-height:1.75;color:var(--ink-2)}
.mp-legal-body p + p{margin-top:12px}
.mp-legal-body strong{font-weight:700;color:var(--ink)}
.mp-legal-body a{color:var(--brand);font-weight:600}
.mp-legal-body a:hover{text-decoration:underline}
.mp-legal-body ul,.mp-legal-body ol{margin:12px 0 0 20px;display:flex;flex-direction:column;gap:7px}
.mp-legal-body li{font-size:13.5px;line-height:1.7;color:var(--ink-2)}
.mp-legal-body ul li{list-style:disc}
.mp-legal-body ol li{list-style:decimal}
.mp-legal-body table{
  width:100%;margin-top:14px;border-collapse:collapse;font-size:12.5px;
  display:block;overflow-x:auto}
.mp-legal-body th,.mp-legal-body td{
  border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}
.mp-legal-body th{background:var(--card-soft);font-weight:700;color:var(--ink)}

.mp-legal-nav{
  display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:26px;
  font-size:12.5px;font-weight:600}
.mp-legal-nav a{color:var(--brand)}
.mp-legal-nav a:hover{text-decoration:underline}

.mp-legal-foot{
  border-top:1px solid var(--line);background:var(--card);
  padding:20px 0;text-align:center;font-size:11.5px;color:#A6A7B0}

@media (max-width:640px){
  .mp-legal-wrap{padding:0 16px}
  .mp-legal-main{padding-top:30px}
  .mp-legal-title{font-size:25px}
  .mp-legal-body{padding:24px 20px;border-radius:14px}
}

/* Inline-Warnung in Formularen (z. B. Testphase kürzer als die Widerrufsfrist) */
.mp-form-warnung{
  margin-top:10px;padding:11px 13px;border-radius:9px;
  background:var(--warn-soft);border:1px solid #E8D5BC;
  font-size:.76rem;line-height:1.6;color:var(--warn-ink)}
.mp-form-warnung strong{display:block;margin-bottom:3px;font-weight:700}
.mp-form-warnung[hidden]{display:none}

/* ══════════════════════════════════════════════════════════════════
   25 · FEHLERSEITEN
   ══════════════════════════════════════════════════════════════════ */
.mp-error-page{
  min-height:100vh;padding:32px 24px;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:
    radial-gradient(900px 460px at 50% -10%, rgba(144,175,197,.3), transparent 60%),
    var(--paper)}
.mp-error-code{font-size:6rem;font-weight:800;color:var(--brand-200);line-height:1;letter-spacing:-.05em}
.mp-error-title{font-size:1.45rem;font-weight:700;color:var(--ink);margin:14px 0 8px;letter-spacing:-.025em}
.mp-error-sub{font-size:.9rem;color:var(--ink-3);margin-bottom:26px;max-width:440px;line-height:1.65}

/* ══════════════════════════════════════════════════════════════════
   26 · RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:1280px){
  .mp-kpi-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mp-objekt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mp-detail-grid{grid-template-columns:280px minmax(0,1fr)}
}
@media (max-width:1024px){
  .mp-detail-grid{grid-template-columns:minmax(0,1fr)}
  .mp-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ib-topbar-search,.mp-topbar__search{max-width:260px}
}
@media (max-width:860px){
  .ib-sidebar,.mp-sidebar{transform:translateX(-100%);box-shadow:var(--shadow-lg)}
  .ib-sidebar.mobile-open,.mp-sidebar.mobile-open{transform:translateX(0)}
  .ib-main,.mp-main{margin-left:0 !important}
  .ib-topbar-search,.mp-topbar__search{display:none}
  .ib-user-info,.mp-topbar__user-info{display:none}
  .ib-content,.mp-content{padding:20px 16px 32px}
  .mp-kpi-grid,.mp-kpi-grid--4,.mp-objekt-grid,
  .mp-form-grid,.mp-form-grid--2,.mp-form-grid--3,.mp-form-row,
  .mp-zahl-grid,.mp-zahl-grid--3,.mp-paket-grid{grid-template-columns:minmax(0,1fr)}
  .mp-page-hd{flex-direction:column;align-items:stretch}
  .mp-panel__hd{flex-direction:column;align-items:flex-start}
  .ib-app-footer,.mp-app-footer{flex-direction:column;gap:8px;text-align:center}
  .mp-auth-card{padding:30px 22px}
  .mp-table thead th,.mp-table tbody td{padding:11px 14px}

  /* Inline gesetzte Grids (mp-form-grid & Co. greifen dort nicht, weil der
     style-Attributwert die Klassenregel schlaegt) auf eine Spalte umbrechen.
     auto-fit/auto-fill bleiben ausgenommen - die passen sich selbst an. */
  .ib-content [style*="grid-template-columns"]:not([style*="auto-fit"]):not([style*="auto-fill"]),
  .mp-content [style*="grid-template-columns"]:not([style*="auto-fit"]):not([style*="auto-fill"]){
    grid-template-columns:minmax(0,1fr) !important}

  /* Einzelne Detailseiten definieren .mp-detail-grid in einem eigenen
     style-Block neu und heben damit die Regel aus Abschnitt 25 auf. */
  .mp-detail-grid{grid-template-columns:minmax(0,1fr) !important}

  /* Breite Tabellen: .mp-panel clippt mit overflow:hidden, dadurch waren
     Spalten unerreichbar. Die Tabelle wird selbst zum Scrollcontainer. */
  .mp-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media (max-width:520px){
  .ib-topbar,.mp-topbar{padding:0 14px;gap:8px}
  .ib-topbar-divider{display:none}
  .ib-topbar-user,.mp-topbar__user{padding:4px}
  .ib-topbar-right,.mp-topbar__right{gap:2px}
  .mp-page-hd__title{font-size:1.2rem}
  .mp-error-code{font-size:4.4rem}
}

/* ══════════════════════════════════════════════════════════════════
   26b · LISTENKARTEN (mobil)
   ──────────────────────────────────────────────────────────────────
   Gemeinsame Darstellung für Listenseiten unter 860 px: jede
   Tabellenzeile wird zu einer Karte. Aufbau im Markup:

     <div class="ib-kliste">                     ← Behälter
       <div class="ib-karte">                    ← eine Zeile
         <div class="ib-karte__kopf"> Avatar/Bild, Titel+Sub, Status
         <dl class="ib-karte__meta">  Feldpaare, 2-spaltig
           <div><dt>Label</dt><dd>Wert</dd></div>
           <div class="ib-karte__voll"> … über beide Spalten
         <div class="ib-karte__fuss">  Aktionen, gleich breit

   Die zugehörige Tabelle bekommt in ihrer Seite die Klasse
   .ib-ktabelle und wird hier ausgeblendet.
   ══════════════════════════════════════════════════════════════════ */
.ib-kliste{display:none}

@media (max-width:860px){
  .ib-ktabelle{display:none !important}
  /* Rahmen des umgebenden Panels weicht, damit keine Karte in der Karte
     steht. Blätterleisten und Panel-Köpfe bleiben sichtbar. */
  .ib-kpanel{background:transparent !important;border:none !important;
    box-shadow:none !important;border-radius:0 !important}
  .ib-kpanel > .mp-panel__hd{padding-left:0;padding-right:0}

  .ib-kliste{display:flex;flex-direction:column;gap:10px;margin-bottom:4px}
}

/* ── 26c · Karten auch auf mittleren Breiten ─────────────────────────
   Zwischen 861 und etwa 1180 px steht die Seitenleiste noch, der Inhalt
   hat nur 600–900 px. Breite Listen (Zahlungen, Mahnungen, Abrechnungen)
   liefen dort seitlich aus dem Panel, die Scrollleiste stand erst unter
   der letzten Zeile. Das Layout-Skript misst deshalb jede Tabelle mit
   Kartenliste und setzt .ib-kpanel--karten, sobald sie nicht mehr passt.
   Die Karten stehen dann in einem Raster, weil Platz für zwei da ist.
   Die Gestaltung der Karten gilt ohne Medienabfrage – sie wirkt nur,
   wo die Liste sichtbar ist. */
.ib-kpanel--karten .ib-ktabelle{display:none !important}
.ib-kpanel--karten{background:transparent !important;border:none !important;
  box-shadow:none !important;border-radius:0 !important;overflow:visible !important}
.ib-kpanel--karten > .mp-panel__hd{padding-left:0;padding-right:0}
.ib-kpanel--karten .ib-kliste{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:10px;margin-bottom:4px}
.ib-kpanel--karten .ib-kleer{grid-column:1/-1}

  .ib-karte{
    background:var(--card);border:1px solid #E3E9EA;border-radius:12px;
    padding:13px 14px;display:flex;flex-direction:column;gap:11px}
  .ib-karte--klickbar{cursor:pointer}
  .ib-karte--klickbar:active{background:var(--brand-50)}

  .ib-karte__kopf{display:flex;align-items:center;gap:11px}
  .ib-karte__txt{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
  .ib-karte__titel{
    font-size:.92rem;font-weight:650;color:var(--ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* E-Mail-Adressen sind ein einziges langes Wort und sprengten die Karte. */
  .ib-karte__sub{font-size:.75rem;color:var(--ink-3);overflow-wrap:anywhere}

  .ib-karte__meta{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 12px;
    border-top:1px solid var(--line-soft);padding-top:10px;margin:0}
  .ib-karte__meta > div{display:flex;flex-direction:column;gap:2px;min-width:0}
  .ib-karte__voll{grid-column:1/-1}
  .ib-karte__meta dt{
    font-size:.63rem;color:var(--ink-4);text-transform:uppercase;
    letter-spacing:.04em;font-weight:600}
  .ib-karte__meta dd{
    margin:0;font-size:.83rem;color:var(--ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ib-karte__meta dd.ib-karte__betrag{font-weight:600;color:var(--brand);
    font-variant-numeric:tabular-nums}

  .ib-karte__fuss{
    display:flex;gap:8px;border-top:1px solid var(--line-soft);padding-top:10px}
  /* flex:1 muss aufs Formular, sonst schrumpft der Knopf darin auf Textbreite. */
  .ib-karte__fuss form{margin:0;display:flex;flex:1}
  .ib-kbtn{
    flex:1;width:100%;display:flex;align-items:center;justify-content:center;gap:6px;
    height:34px;border-radius:8px;border:1px solid var(--line);background:var(--card);
    font-family:inherit;font-size:.8rem;font-weight:600;color:var(--ink-2);
    text-decoration:none;cursor:pointer}
  .ib-kbtn:active{background:var(--brand-50)}
  .ib-kbtn--gefahr{color:var(--bad-ink);border-color:#EBD2CB}
  .ib-kbtn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

  .ib-kleer{
    background:var(--card);border:1px solid #E3E9EA;border-radius:12px;
    padding:44px 20px;text-align:center;color:var(--ink-3);font-size:.85rem}

@media print{.ib-kliste{display:none !important}}

/* ══════════════════════════════════════════════════════════════════
   27 · DRUCK
   ══════════════════════════════════════════════════════════════════ */
@media print{
  .ib-sidebar,.mp-sidebar,.ib-topbar,.mp-topbar,
  .ib-app-footer,.mp-app-footer,.mp-page-hd__actions,.ib-backdrop{display:none !important}
  .ib-main,.mp-main{margin-left:0 !important}
  .ib-content,.mp-content{padding:0;max-width:none}
  .mp-panel,.mp-kpi{box-shadow:none;border-color:#ccc;break-inside:avoid}
  body{background:#fff}
}

/* ══════════════════════════════════════════════════════════════════
   28 · BEWEGUNG
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ══════════════════════════════════════════════════════════════════
   29 · ÜBERGREIFENDE SUCHE (Topbar-Dropdown + Ergebnisseite)
   ══════════════════════════════════════════════════════════════════ */

/* ── 29.1 Topbar-Feld & Panel ───────────────────────────────────── */
/* Wächst vor dem Abstandhalter daneben – vorher teilten sich beide den Platz,
   und bei 1024 px blieb für den Hinweistext nur ein Drittel. */
.ib-gs{position:relative;flex:6 1 260px;max-width:400px;min-width:230px}
.ib-gs-field{max-width:none;width:100%}
.ib-gs--offen .ib-gs-field{background:#fff;border-color:var(--brand-l);box-shadow:var(--ring)}

.ib-gs-clear{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:18px;height:18px;padding:0;border:none;border-radius:50%;
  background:var(--sunk);color:var(--ink-3);cursor:pointer;transition:background .14s,color .14s}
.ib-gs-clear:hover{background:var(--ink-4);color:#fff}
.ib-gs-clear svg{width:9px !important;height:9px !important;color:currentColor !important}
.ib-gs-clear[hidden],.ib-topbar-kbd[hidden]{display:none}

.ib-gs-panel{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:60;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);overflow:hidden;
  animation:ibGsIn .13s var(--ease)}
.ib-gs-panel[hidden]{display:none}
@keyframes ibGsIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.ib-gs-body{max-height:min(62vh,480px);overflow-y:auto;overscroll-behavior:contain;padding:6px}

.ib-gs-gruppe + .ib-gs-gruppe{border-top:1px solid var(--line-soft);margin-top:4px;padding-top:4px}
.ib-gs-gruppe-hd{
  display:flex;align-items:center;gap:7px;padding:8px 10px 5px;
  font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}
.ib-gs-anzahl{
  font-size:.6rem;font-weight:700;letter-spacing:0;color:var(--ink-3);
  background:var(--sunk);border-radius:var(--radius-pill);padding:1px 6px}

/* ── 29.2 Trefferzeile ──────────────────────────────────────────── */
.ib-gs-treffer{
  display:flex;align-items:center;gap:10px;padding:8px 10px;
  border-radius:var(--radius-sm);text-decoration:none;color:inherit;scroll-margin:6px}
.ib-gs-treffer.ib-gs-aktiv{background:var(--brand-50);box-shadow:inset 0 0 0 1px var(--line-brand)}

.ib-gs-av{
  width:30px;height:30px;flex-shrink:0;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-100);color:var(--brand-dd)}
.ib-gs-av svg{width:14px !important;height:14px !important;color:currentColor !important}
.ib-gs-av--text{font-size:.68rem;font-weight:700;letter-spacing:.01em}

.ib-gs-texte{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.ib-gs-titel{
  font-size:.82rem;font-weight:600;color:var(--ink);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib-gs-sub{
  font-size:.71rem;color:var(--ink-3);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib-gs-titel mark,.ib-gs-sub mark,.gs-titel mark,.gs-sub mark{
  background:rgba(144,175,197,.42);color:inherit;border-radius:3px;padding:0 1px;font-weight:700}

/* ── 29.3 Status-Badges (Dropdown + Seite) ──────────────────────── */
.ib-gs-badge,.gs-badge{
  flex-shrink:0;font-size:.63rem;font-weight:700;letter-spacing:.01em;
  padding:3px 8px;border-radius:var(--radius-pill);white-space:nowrap}
.ib-gs-badge--gruen,.gs-badge--gruen{background:var(--ok-soft);color:var(--ok-ink)}
.ib-gs-badge--blau,.gs-badge--blau{background:var(--info-soft);color:var(--info-ink)}
.ib-gs-badge--rot,.gs-badge--rot{background:var(--bad-soft);color:var(--bad-ink)}
.ib-gs-badge--grau,.gs-badge--grau{background:var(--sunk);color:var(--ink-3)}

/* ── 29.4 Zustände & Fuß ────────────────────────────────────────── */
.ib-gs-leer{padding:22px 14px;text-align:center;font-size:.78rem;color:var(--ink-3)}
.ib-gs-leer--fehler{color:var(--bad)}

.ib-gs-skelett{display:flex;flex-direction:column;gap:8px;padding:12px 10px}
.ib-gs-skelett span{
  height:30px;border-radius:var(--radius-sm);
  background:linear-gradient(90deg,var(--sunk) 25%,var(--card-soft) 50%,var(--sunk) 75%);
  background-size:280% 100%;animation:ibGsPuls 1.1s ease-in-out infinite}
.ib-gs-skelett span:nth-child(2){width:82%}
.ib-gs-skelett span:nth-child(3){width:64%}
@keyframes ibGsPuls{from{background-position:140% 0}to{background-position:-140% 0}}

.ib-gs-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 14px;border-top:1px solid var(--line-soft);background:var(--card-soft)}
.ib-gs-foot[hidden]{display:none}
.ib-gs-alle{
  font-size:.74rem;font-weight:640;color:var(--brand);text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib-gs-alle:hover,.ib-gs-alle.ib-gs-aktiv{color:var(--brand-dd);text-decoration:underline}
.ib-gs-alle.ib-gs-aktiv{outline:2px solid var(--brand-l);outline-offset:3px;border-radius:4px}
.ib-gs-keys{font-size:.65rem;color:var(--ink-4);white-space:nowrap;flex-shrink:0}
.ib-gs-keys kbd{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.6rem;
  background:#fff;border:1px solid var(--line);border-radius:4px;padding:1px 4px;margin:0 1px}

/* ── 29.5 Ergebnisseite ─────────────────────────────────────────── */
.gs-block .mp-panel__title{display:flex;align-items:center;gap:9px}
.gs-block-icon{width:15px;height:15px;color:var(--brand)}
.gs-anzahl{
  font-size:.65rem;font-weight:700;color:var(--ink-3);
  background:var(--sunk);border-radius:var(--radius-pill);padding:2px 8px}

.gs-liste{padding:6px}
.gs-treffer{
  display:flex;align-items:center;gap:12px;padding:11px 12px;
  border-radius:var(--radius-sm);text-decoration:none;color:inherit;
  transition:background .13s}
.gs-treffer:hover{background:var(--brand-50)}
.gs-treffer + .gs-treffer{border-top:1px solid var(--line-soft)}

.gs-av{
  width:34px;height:34px;flex-shrink:0;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-100);color:var(--brand-dd)}
.gs-av svg{width:15px;height:15px}
.gs-av--text{font-size:.72rem;font-weight:700}

.gs-texte{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.gs-titel{font-size:.86rem;font-weight:620;color:var(--ink);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-sub{font-size:.75rem;color:var(--ink-3);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-pfeil{width:14px;height:14px;flex-shrink:0;color:var(--ink-4)}
.gs-treffer:hover .gs-pfeil{color:var(--brand)}

.gs-block-hinweis{
  padding:10px 20px;border-top:1px solid var(--line-soft);
  background:var(--card-soft);font-size:.72rem;color:var(--ink-3)}

.gs-seite-leer{padding:48px 24px;text-align:center}
.gs-seite-leer svg{width:34px;height:34px;color:var(--brand-l);margin-bottom:12px}
.gs-seite-leer h2{font-size:1.02rem;font-weight:680;color:var(--ink);margin-bottom:8px;letter-spacing:-.015em}
.gs-seite-leer p{font-size:.82rem;color:var(--ink-3);line-height:1.6;max-width:520px;margin:0 auto}
.gs-seite-leer kbd,.gs-seite-leer code{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.72rem;
  background:var(--sunk);border:1px solid var(--line);border-radius:4px;padding:1px 5px}

/* ── 29.6 Responsiv ─────────────────────────────────────────────── */
@media (max-width:1180px){
  .ib-gs{max-width:320px}
  .ib-gs .ib-topbar-kbd{display:none}
}
/* Unter 860px blendet die Topbar ihr Suchfeld aus (Regel in Abschnitt 25).
   Da die übergreifende Suche der einzige Weg zu vielen Datensätzen ist, bleibt
   sie hier sichtbar – dafür weicht der Seitentitel und das ⌘K-Kürzel. */
@media (max-width:860px){
  .ib-gs{display:block;max-width:none;min-width:0}
  .ib-gs-field{display:flex}
  .ib-topbar-left .ib-topbar-page,
  .ib-topbar-left .mp-topbar__page-title{display:none}
  .ib-topbar-spacer{display:none}
  .ib-topbar-kbd{display:none}
  .ib-gs-panel{
    position:fixed;top:calc(var(--topbar-h) + 6px);left:12px;right:12px}
  .ib-gs-keys{display:none}
}

/* ══════════════════════════════════════════════════════════════════
   30 · ZUSATZMODULE (Admin-Konfiguration + Vermieter-Modulseite)
   ══════════════════════════════════════════════════════════════════ */

/* ── 30.1 Schalter ──────────────────────────────────────────────────
   Ein/Aus-Schalter für Zustände, die sofort wirken. Er sitzt auf einer
   echten Checkbox, damit Tastatur und Screenreader ohne Zutun greifen. */
.ib-switch{position:relative;display:inline-flex;align-items:center;flex-shrink:0}
.ib-switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.ib-switch__track{
  width:38px;height:22px;border-radius:11px;background:var(--sunk);
  border:1px solid var(--line);display:flex;align-items:center;padding:2px;
  transition:background .15s,border-color .15s}
.ib-switch__knob{
  width:16px;height:16px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(31,42,44,.25);transition:transform .15s}
.ib-switch input:checked + .ib-switch__track{background:var(--ok);border-color:var(--ok)}
.ib-switch input:checked + .ib-switch__track .ib-switch__knob{transform:translateX(16px)}
.ib-switch input:disabled + .ib-switch__track{opacity:.45;cursor:not-allowed}
.ib-switch input:focus-visible + .ib-switch__track{outline:2px solid var(--brand);outline-offset:2px}

/* ── 30.2 Auswahlkarten (Bereitstellung) ────────────────────────────
   Radiogruppe als Karten: Titel, Erläuterung und Punkt. Die Karte ist
   das Label, deshalb ist die ganze Fläche klickbar. */
.ib-optioncards{display:grid;gap:10px}
.ib-optioncards--3{grid-template-columns:repeat(3,1fr)}
.ib-optioncard{
  position:relative;display:flex;gap:10px;align-items:flex-start;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--card);
  padding:12px 14px;cursor:pointer;transition:border-color .12s,background .12s}
.ib-optioncard:hover{border-color:var(--brand-l)}
.ib-optioncard input{position:absolute;opacity:0;pointer-events:none}
.ib-optioncard__dot{
  width:16px;height:16px;border-radius:50%;border:1.5px solid #C3CDCF;
  flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center;
  transition:border-color .12s}
.ib-optioncard__dot::after{
  content:'';width:8px;height:8px;border-radius:50%;background:transparent;transition:background .12s}
.ib-optioncard__inhalt{display:block;min-width:0}
.ib-optioncard__titel{
  display:block;font-size:.85rem;font-weight:600;color:var(--ink);line-height:1.3;
  /* Die Karte ist ein <label>; geerbte Label-Stile der Formularabschnitte
     würden sonst Versalien und Sperrung durchschlagen. */
  text-transform:none;letter-spacing:normal}
.ib-optioncard__text{
  display:block;font-size:.75rem;color:var(--ink-3);line-height:1.45;margin-top:2px;
  text-transform:none;letter-spacing:normal;font-weight:400}
.ib-optioncard input:checked ~ .ib-optioncard__inhalt .ib-optioncard__titel{color:var(--ok-ink)}
.ib-optioncard:has(input:checked){border-color:var(--ok);background:#F4FAF6}
.ib-optioncard:has(input:checked) .ib-optioncard__dot{border-color:var(--ok)}
.ib-optioncard:has(input:checked) .ib-optioncard__dot::after{background:var(--ok)}
.ib-optioncard:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}

/* ── 30.3 Funktionsumfang (Checkbox-Karten) ─────────────────────── */
.ib-featgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ib-featcard{
  display:flex;gap:10px;align-items:flex-start;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--card);
  padding:10px 12px;transition:border-color .12s,background .12s}
.ib-featcard:hover{border-color:var(--brand-l)}
/* Auch diese Karte ist ein <label> – geerbte Versalien und Sperrung der
   Formularabschnitte müssen hier ausdrücklich zurückgenommen werden. */
.ib-featcard__name{
  display:block;font-size:.82rem;font-weight:550;color:var(--ink-2);line-height:1.3;
  text-transform:none;letter-spacing:normal}
.ib-featcard__hint{
  display:block;font-size:.72rem;color:var(--ink-4);line-height:1.4;margin-top:1px;
  text-transform:none;letter-spacing:normal;font-weight:400}
.ib-featcard:has(input:checked){border-color:#CFE1D8;background:#F4FAF6}
.ib-featcard:has(input:checked) .ib-featcard__name{color:var(--ink)}
.ib-featcard:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}

/* ── 30.4 Paket-Reiter ──────────────────────────────────────────── */
.ib-modultabs{display:inline-flex;background:var(--sunk);border-radius:var(--radius);padding:4px;gap:3px;flex-wrap:wrap}
.ib-modultab{
  padding:6px 14px;border-radius:calc(var(--radius) - 3px);font-size:.8rem;font-weight:550;
  color:var(--ink-4);text-decoration:none;transition:background .12s,color .12s}
.ib-modultab:hover{color:var(--ink-2)}
.ib-modultab.is-active{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}

/* ── 30.5 Speicherleiste ────────────────────────────────────────────
   Bleibt am unteren Rand stehen, solange ungespeicherte Änderungen im
   Formular liegen – die Konfiguration ist lang und scrollt weg. */
.ib-savebar{
  position:sticky;bottom:0;z-index:20;margin-top:16px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 -2px 12px rgba(31,42,44,.07);padding:12px 16px}
.ib-savebar__text{font-size:.78rem;color:var(--ink-3);flex:1;min-width:160px}
.ib-savebar.is-dirty{border-color:var(--warn);background:#FDFAF5}
.ib-savebar.is-dirty .ib-savebar__text{color:var(--warn-ink);font-weight:550}

/* ── 30.6 Modul-Landeseite (Vermieter) ──────────────────────────── */
.ib-modulhero{
  display:grid;grid-template-columns:1.4fr 1fr;gap:20px;align-items:start;margin-bottom:20px}
.ib-modulhero__mark{
  width:52px;height:52px;border-radius:14px;background:var(--brand-100);color:var(--brand-dd);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.ib-modulhero__mark svg{width:26px;height:26px}
.ib-modulfeats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}
.ib-modulfeat__titel{font-size:.84rem;font-weight:600;color:var(--ink);margin-bottom:3px}
.ib-modulfeat__text{font-size:.76rem;color:var(--ink-3);line-height:1.5}
.ib-modulpreis{
  border:1px solid var(--line-brand);border-radius:var(--radius);background:var(--brand-50);padding:20px}
.ib-modulpreis__betrag{font-size:1.9rem;font-weight:700;color:var(--ink);line-height:1.1}
.ib-modulpreis__periode{font-size:.78rem;color:var(--ink-3);margin-top:4px}
.ib-modulpreis__liste{list-style:none;margin:16px 0;padding:0;display:flex;flex-direction:column;gap:7px}
.ib-modulpreis__liste li{font-size:.8rem;color:var(--ink-2);display:flex;gap:8px;align-items:flex-start}
.ib-modulpreis__liste li::before{content:'✓';color:var(--ok);font-weight:700;flex-shrink:0}

/* ── 30.7 Responsiv ─────────────────────────────────────────────── */
@media (max-width:980px){
  .ib-optioncards--3{grid-template-columns:1fr}
  .ib-featgrid{grid-template-columns:1fr}
  .ib-modulhero{grid-template-columns:1fr}
  .ib-modulfeats{grid-template-columns:1fr}
}

/* ── 30.8 Zahlenspalten ─────────────────────────────────────────────
   Beträge und Quoten stehen rechtsbündig mit gleich breiten Ziffern –
   nur so lassen sich Werte in einer Spalte vergleichen. */
.mp-table th.zahl,.mp-table td.zahl,
.mp-ztable th.zahl,.mp-ztable td.zahl{
  text-align:right;font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}

/* ══════════════════════════════════════════════════════════════════
   31 · ÜBERLAUF-KORREKTUREN
   ──────────────────────────────────────────────────────────────────
   Zwischen Handy (≤860) und großem Desktop klafft ein Bereich, in dem
   die Seiten noch zweispaltig stehen, die Spalten aber schon zu schmal
   für ihren Inhalt sind. Weil .mp-panel mit overflow:hidden clippt,
   verschwand der Überhang wortlos – auf dem Portfolio etwa die ganze
   Aktionsspalte. Die Regeln hier geben dem Inhalt entweder mehr Platz
   oder machen den Überhang wenigstens erreichbar.
   ══════════════════════════════════════════════════════════════════ */

/* ── 31.1 Tabellen bleiben erreichbar ───────────────────────────────
   Eine Tabelle kann nicht beliebig schmal werden: Beträge und Spalten-
   köpfe stehen mit white-space:nowrap, das ist gewollt. Passt sie nicht
   mehr, muss das Panel scrollen statt abzuschneiden. :has() greift nur
   bei Panels, die tatsächlich eine Tabelle führen – alle übrigen
   behalten das saubere Clipping für ihre abgerundeten Ecken. */
.mp-panel:has(> .mp-table),
.mp-panel:has(> .mp-ztable){
  overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}
/* Steht die Tabelle im Panel-Körper, scrollt nur dieser – die
   Überschrift des Panels soll stehen bleiben. */
.mp-panel__body:has(> .mp-ztable),
.mp-panel__body:has(> .mp-table),
/* Auf Karteireitern (Mieterakte) liegt die Tabelle noch eine Ebene tiefer. */
.mp-tab-pane:has(> .mp-ztable),
.mp-tab-pane:has(> .mp-table){
  overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ── 31.2 Zweispaltige Seitenlayouts brechen früher um ──────────────
   Die Investment-Seiten setzen ihr Raster inline (die Gewichtung
   unterscheidet sich je Seite). Ab hier zählt nur noch, dass eine
   Spalte allein zu wenig Platz lässt – ab 1180 px steht alles
   untereinander und die Tabellen bekommen die volle Breite. */
@media (max-width:1180px){
  .ib-seitengrid{grid-template-columns:minmax(0,1fr) !important}
  /* Mehrere Detailseiten definieren .mp-detail-grid in einem eigenen
     style-Block neu und heben damit Abschnitt 26 auf – daher !important. */
  .mp-detail-grid{grid-template-columns:minmax(0,1fr) !important}
}
/* Nur bis hinunter zur Handybreite: unterhalb von 860 px gilt die
   Einspaltigkeit aus Abschnitt 26, und die steht dort früher in der
   Datei – ohne die untere Grenze hätte diese Regel sie überstimmt und
   auf dem Telefon zwei Spalten von 24 px erzwungen. */
@media (max-width:1180px) and (min-width:861px){
  .mp-form-grid--3,.mp-form-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── 31.3 Kennzahlenreihen ──────────────────────────────────────────
   repeat(N,1fr) heißt minmax(auto,1fr): die Spur kann nicht unter ihren
   Inhalt schrumpfen, das Raster wächst dann über seinen Behälter
   hinaus. minmax(0,1fr) erlaubt das Schrumpfen. Fünf Kennzahlen sind
   ab 1180 px zu viele – dort auf drei, dann auf zwei. */
.mp-kpi-grid--5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1180px){
  .mp-kpi-grid--5{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1024px){
  .mp-kpi-grid--5{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .mp-kpi-grid--5{grid-template-columns:minmax(0,1fr)}
}
/* Der Zusatz unter der Kennzahl ("nach Zins, Tilgung, Rücklage") ist
   länger als die Zahl darüber und hielt die Karte auf. */
.mp-kpi > div{min-width:0}
.mp-kpi__num{overflow-wrap:break-word}
.mp-kpi__label,.mp-kpi__hint{overflow-wrap:break-word;hyphens:auto}

/* ── 31.4 Beschriftung/Wert-Zeilen ──────────────────────────────────
   .mp-info-label stand auf flex-shrink:0 und schob lange Werte aus der
   Zeile. Jetzt darf die Beschriftung umbrechen; reicht das nicht,
   rutscht der Wert rechtsbündig in die nächste Zeile. */
.mp-info-row,.mp-sum-row{flex-wrap:wrap;gap:2px 10px}
.mp-info-label,.mp-sum-label{flex-shrink:1;min-width:0;overflow-wrap:break-word}
.mp-sum-wert{margin-left:auto;flex-shrink:0;white-space:nowrap}
.mp-info-value{margin-left:auto;max-width:100%;flex-shrink:0;
  /* word-break:break-word trennte "9.227,68 €" zwischen Zahl und
     Währung. overflow-wrap bricht nur, wenn ein Wort für sich zu
     lang ist – der Betrag bleibt zusammen und rutscht notfalls
     als Ganzes in die nächste Zeile. */
  word-break:normal;overflow-wrap:break-word}

/* ── 31.5 Lange Wörter in schmalen Spalten ──────────────────────────
   "Bewirtschaftungskosten (%)" oder "Staatsangehörigkeit" passen in
   eine 90-px-Spalte in kein Wort. break-word bricht nur, wenn es
   wirklich nicht anders geht. */
.mp-form-label,.mp-label,.mp-form-hint,
.mp-table__sub,.mp-info-label{overflow-wrap:break-word}
.mp-form-group{min-width:0}

/* ── 31.6 Kopfleiste im Tablet-Bereich ──────────────────────────────
   Knapp oberhalb von 860 px stehen Seitenleiste (240), Seitentitel,
   Suche und die Benutzergruppe (282) noch alle in voller Größe – zusammen
   mehr als die Zeile hergibt, und der Überhang schob die ganze Seite
   nach rechts. Der Titel darf jetzt schrumpfen und kürzt sich per
   Ellipse; ⌘K-Kürzel und Namenszeile weichen schon eine Stufe früher. */
.ib-topbar-left,.mp-topbar__left{flex-shrink:1}
@media (max-width:1024px){
  .ib-topbar-kbd,.mp-topbar__kbd{display:none}
  .ib-user-info,.mp-topbar__user-info{display:none}
}

/* ── 31.7 Zellenabstand auf mittleren Breiten ───────────────────────
   20 px links und rechts summieren sich bei sieben Spalten auf 280 px –
   allein für Luft. Auf Bildschirmen, wo die Tabelle neben der zweiten
   Spalte steht, ist dieser Platz besser in den Zahlen aufgehoben. */
@media (max-width:1440px){
  .mp-table thead th,.mp-table tbody td{padding-left:12px;padding-right:12px}
  .mp-panel__body > .mp-table{margin-left:-12px;margin-right:-12px}
}

/* ── 31.8 Zahlentabellen: Kopfzeile und Mindestbreite ───────────────
   Die Datenzellen bekommen über `td + td` einen Abstand, die Kopfzellen
   nicht – bei engen Spalten klebten "FLÄCHE", "EMPFOHLEN" und
   "ANGESETZT" zu einem Wort zusammen. Und unter 860 px sind sechs
   Spalten auf 330 px nicht lesbar: die Tabelle behält eine
   Mindestbreite und scrollt lieber in ihrem Körper. */
.mp-ztable thead th + th{padding-left:14px}
@media (max-width:860px){
  .mp-ztable{min-width:440px}
}

/* ── 31.9 Randspalten randlos gesetzter Tabellen ────────────────────
   .mp-panel__body > .mp-ztable zieht sich mit margin:-20px über die
   ganze Panelbreite. Die Zellen haben aber nur senkrechte Polsterung,
   dadurch klebte die erste Spalte am Rahmen und sah abgeschnitten aus.
   Erste und letzte Spalte holen den Rand zurück. */
.mp-panel__body > .mp-ztable > * > tr > :first-child{padding-left:20px}
.mp-panel__body > .mp-ztable > * > tr > :last-child{padding-right:20px}

/* ── 31.10 Schmale Telefone (ab 320 px) ─────────────────────────────
   Auf 320 px bleiben nach Rand und Polsterung rund 278 px übrig. Was
   dort nicht passt, muss umbrechen oder scrollen – sonst rutscht die
   ganze Seite nach rechts und der Nutzer scrollt an jedem Text vorbei. */

/* Blätterleisten: bei 108 Seiten reichen sechs Knöpfe für einen Umbruch. */
.mp-pagination__btns{flex-wrap:wrap}

/* Segmentierte Umschalter behalten ihre Pillenform und scrollen lieber,
   als in zwei Reihen zu zerfallen. */
.mp-filter-tabs{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.mp-filter-tab{flex-shrink:0}

/* Die Aktionsgruppe der Seitenüberschrift schrumpfte gegen den Titel und
   drückte ihre Knöpfe auseinander (Monatswähler und Knopf standen dann
   untereinander, obwohl die Zeile Platz hatte). .mp-page-hd bricht ohnehin
   um – dann lieber die ganze Gruppe eine Zeile tiefer als in sich zerlegt. */
.mp-page-hd__actions{flex-shrink:0;max-width:100%}
.mp-page-hd__actions > form{flex-wrap:wrap;max-width:100%}

/* ── 31.11 Einzelne lange Wörter in engen Spalten ───────────────────
   "Teamverwaltung" braucht 86 px, die Beschriftungsspalte der
   Feature-Zeilen hat auf 320 px nur 63. */
.mp-feature-row,.mp-feature-row *{overflow-wrap:break-word;min-width:0}

/* ── 31.12 Spaltenübergreifende Formularfelder ──────────────────────
   Mehrere Formulare setzen `grid-column:span 2` oder `span 3` inline.
   Sobald das Raster weniger Spalten führt, legt der Browser für den
   Überhang implizite Spalten an – im Kontaktformular blieb dadurch auf
   dem Telefon eine Spalte mit 0 px übrig, das Feld war unsichtbar.
   Der Attributselektor greift den Inline-Wert ab; !important, weil ein
   style-Attribut sonst jede Regel schlägt. */
@media (max-width:1180px) and (min-width:861px){
  .mp-form-grid--3 > [style*="grid-column:span 3"],
  .mp-form-grid--4 > [style*="grid-column:span 3"],
  .mp-form-grid--4 > [style*="grid-column:span 4"]{grid-column:1 / -1 !important}
}
@media (max-width:860px){
  .mp-form-grid > [style*="grid-column:span"],
  .mp-form-grid--2 > [style*="grid-column:span"],
  .mp-form-grid--3 > [style*="grid-column:span"],
  .mp-form-grid--4 > [style*="grid-column:span"]{grid-column:auto !important}
}

/* ── 31.13 Feature-Zeilen auf schmalen Telefonen ────────────────────
   Das Raster 30px / 1fr / auto gibt der dritten Spalte, was der
   Schalter braucht. Auf 320 px blieben der Beschriftung 28 px übrig.
   Der Schalter rückt deshalb unter den Namen. */
@media (max-width:520px){
  .mp-feature-row{grid-template-columns:30px minmax(0,1fr);grid-template-rows:auto auto auto}
  .mp-feature-row__status{grid-row:1/4}
  .mp-feature-row__controls{grid-column:2;grid-row:2;margin-top:8px}
  .mp-feature-row__notiz{grid-column:2/-1;grid-row:3}
}

/* ── 31.15 Technische Adressen ──────────────────────────────────────
   Webhook-URLs und API-Endpunkte sind ein einziges Wort ohne
   Trennstelle – ohne anywhere laufen sie aus jedem Kasten. */
.mp-panel code,.mp-panel kbd,
[style*="JetBrains Mono"]{overflow-wrap:anywhere}

/* ── 31.16 Summenzeilen ─────────────────────────────────────────────
   Die Polsterung der Zellen war nur für thead und tbody gesetzt. Ein
   tfoot bekam davon nichts: "Summe" klebte am linken Tabellenrand und
   die Beträge standen um die fehlende Polsterung weiter rechts als die
   Werte darüber – die Spalten sahen verschoben aus, obwohl sie es nicht
   waren. Dazu die Trennlinie: sie gehört über die Summe, nicht unter
   die letzte Position. */
.mp-table tfoot td{
  font-size:.82rem;color:var(--ink);padding:13px 20px;vertical-align:middle;
  border-top:1px solid var(--line)}
.mp-ztable tfoot td{padding:11px 0;vertical-align:middle;border-top:1px solid var(--line)}
.mp-ztable tfoot td + td{padding-left:14px}

@media (max-width:1440px){
  .mp-table tfoot td{padding-left:12px;padding-right:12px}
}

/* ── 31.17 Summe in der Kartenliste ─────────────────────────────────
   Unter 860 px weicht die Tabelle der Kartenliste – und mit ihr das
   tfoot. Wo die Summe nicht ohnehin schon in den Kennzahlen der Seite
   steht, fehlte sie auf dem Telefon ersatzlos. Diese Karte trägt sie
   nach: gleiche Zahlen wie die Fußzeile, in der Form der Liste.
   Sie erscheint nur dort, wo auch die Kartenliste erscheint. */
.ib-ksumme{
  display:none;flex-wrap:wrap;gap:10px 18px;
  background:var(--card-soft);border:1px solid #E3E9EA;border-radius:12px;
  padding:13px 14px;margin-top:2px}
.ib-ksumme__paar{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ib-ksumme__label{
  font-size:.63rem;color:var(--ink-4);text-transform:uppercase;
  letter-spacing:.04em;font-weight:600}
.ib-ksumme__wert{
  font-size:.9rem;font-weight:680;color:var(--ink);
  font-variant-numeric:tabular-nums;overflow-wrap:break-word}

@media (max-width:860px){
  .ib-ksumme{display:flex}
}
/* Kartenmodus auf mittlerer Breite (26c): Summe über die ganze Rasterbreite. */
.ib-kpanel--karten .ib-ksumme{display:flex;grid-column:1/-1}

/* ── 31.18 Randlose Tabellen mit nachfolgendem Inhalt ───────────────
   .mp-panel__body > .mp-ztable zieht sich mit margin:-20px über die
   volle Panelbreite. Der negative Rand wirkt aber auch nach unten und
   zog nachfolgende Absätze 20 px hoch – beim Rücklagenbedarf landete
   der Hinweistext dadurch 6 px *über* dem Tabellenende, bei leerer
   Tabelle direkt in der Kopfzeile.

   Nur der letzten Tabelle im Panel bleibt der randlose Abschluss; folgt
   noch etwas, endet die Tabelle dort, wo sie aufhört. */
.mp-panel__body > .mp-table:not(:last-child),
.mp-panel__body > .mp-ztable:not(:last-child){margin-bottom:0}

/* ── 31.19 Fließtext neben scrollenden Tabellen ─────────────────────
   Passt eine Tabelle nicht in den Panel-Körper, wird der Körper zum
   Scrollcontainer (31.1). Damit scrollten aber auch seine übrigen
   Kinder mit – der Hinweis unter dem Rücklagenbedarf wanderte auf dem
   Telefon fast 100 px nach links aus dem Bild, obwohl er mit den
   Spalten nichts zu tun hat.

   sticky/left:0 hält solche Absätze an der linken Kante fest. Ohne
   Scrollbalken ändert die Regel nichts. */
.mp-panel__body:has(> .mp-ztable) > :not(table),
.mp-panel__body:has(> .mp-table) > :not(table){
  position:sticky;left:0}

/* Versionskennung in der Seitenleiste – benennt den ausgelieferten Stand. */
.ib-version{display:block;margin-top:2px;opacity:.65;font-variant-numeric:tabular-nums}

/* ── 32. Anlage-Assistent (Objekt + Einheiten) ───────────────────────
   Vier Schritte in einem Formular: die Panels werden per JS ein- und
   ausgeblendet, abgeschickt wird am Ende alles zusammen. */

.ib-wiz-steps{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  list-style:none;margin:0 0 18px;padding:0}
.ib-wiz-step{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  padding:7px 13px 7px 8px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);
  transition:border-color .14s ease,background .14s ease}
.ib-wiz-step:hover{border-color:var(--line-brand)}
.ib-wiz-step__num{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;
  font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums;
  background:var(--card-soft);color:var(--ink-3)}
.ib-wiz-step__label{font-size:.78rem;color:var(--ink-3);white-space:nowrap}
.ib-wiz-step.is-aktiv{border-color:var(--brand);background:var(--brand-50,#DCEAF0)}
.ib-wiz-step.is-aktiv .ib-wiz-step__num{background:var(--brand);color:#fff}
.ib-wiz-step.is-aktiv .ib-wiz-step__label{color:var(--brand-dd);font-weight:640}
.ib-wiz-step.is-fertig .ib-wiz-step__num{background:var(--ok,#4B7F52);color:#fff}
.ib-wiz-step.is-fertig .ib-wiz-step__label{color:var(--ink-2)}

/* Objektart-Karten */
.ib-wiz-typen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ib-wiz-typ{
  position:relative;display:flex;flex-direction:column;gap:5px;cursor:pointer;
  padding:16px;border:1.5px solid var(--line);border-radius:var(--radius);
  background:var(--card);transition:border-color .14s ease,box-shadow .14s ease}
.ib-wiz-typ:hover{border-color:var(--line-brand)}
.ib-wiz-typ input{position:absolute;opacity:0;width:0;height:0}
.ib-wiz-typ__kurz{
  font-size:.68rem;font-weight:700;letter-spacing:.06em;color:var(--ink-4)}
.ib-wiz-typ__label{font-size:.95rem;font-weight:660;color:var(--ink)}
.ib-wiz-typ__text{font-size:.77rem;line-height:1.55;color:var(--ink-3)}
.ib-wiz-typ.is-gewaehlt{
  border-color:var(--brand);box-shadow:var(--ring)}
.ib-wiz-typ.is-gewaehlt .ib-wiz-typ__kurz{color:var(--brand)}
/* Fehlende Objektart: Gruppe sichtbar markieren (Radios selbst sind unsichtbar) */
.ib-wiz-typen.is-invalid .ib-wiz-typ{border-color:var(--bad);box-shadow:var(--ring-bad)}
/* Fokus nach „Weiter“ sichtbar machen: Ein per Skript gesetzter Fokus nach
   Mausklick trifft :focus-visible nicht – daher focus-within, nur im Fehlerfall. */
.ib-wiz-typen.is-invalid .ib-wiz-typ:focus-within{outline:2px solid var(--bad);outline-offset:2px}
.ib-wiz-typ input:focus-visible + .ib-wiz-typ__kurz{outline:2px solid var(--brand);outline-offset:3px}
/* Gewählte Karte (IMB-18): Häkchen statt nur Farbe, und sie bleibt markiert,
   auch wenn die Gruppe noch einen Fehler trägt */
.ib-wiz-typ.is-gewaehlt::after{
  content:"✓";position:absolute;top:10px;right:12px;width:20px;height:20px;border-radius:50%;
  background:var(--brand);color:#fff;font-size:.72rem;font-weight:700;line-height:20px;text-align:center}
.ib-wiz-typen.is-invalid .ib-wiz-typ.is-gewaehlt{border-color:var(--brand);box-shadow:var(--ring)}

/* Feld-Attrappe für Angaben, die der Assistent selbst setzt */
.ib-wiz-static{
  display:flex;align-items:center;background:var(--card-soft);
  color:var(--ink-3);font-size:.82rem}

/* Einheitentabelle: schmale Felder, damit fünf Spalten nebeneinander passen */
.ib-wiz-tabelle{overflow-x:auto}
.ib-wiz-tabelle table{min-width:640px}
.ib-wiz-tabelle .mp-form-input,
.ib-wiz-tabelle .mp-form-select{padding:7px 9px;font-size:.82rem}
.ib-wiz-weg{
  width:26px;height:26px;border-radius:7px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);
  color:var(--ink-4);font-size:1rem;line-height:1;
  display:grid;place-items:center}
.ib-wiz-weg:hover{border-color:var(--bad);color:var(--bad);background:var(--bad-soft)}

/* Einheitenliste in der Zusammenfassung */
.ib-wiz-liste{margin-top:14px;border-top:1px solid var(--line-soft)}
.ib-wiz-liste__zeile{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:.82rem}
.ib-wiz-liste__meta{color:var(--ink-4);font-size:.76rem;white-space:nowrap}

@media(max-width:820px){
  .ib-wiz-typen{grid-template-columns:1fr}
  .ib-wiz-step__label{display:none}
  .ib-wiz-step{padding:7px}
}

/* ── 32.1 Vertragskarten im Assistenten ──────────────────────────────
   Je vermieteter Einheit eine Karte. Zugeklappt zeigt sie nur, wer
   einzieht und zu welcher Miete – bei acht Wohnungen ist das der
   Unterschied zwischen Übersicht und Bandwurm. */

.ib-wiz-vertrag{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--card);margin-bottom:12px;overflow:hidden}
.ib-wiz-vertrag:last-child{margin-bottom:0}
.ib-wiz-vertrag.is-aus{background:var(--card-soft);border-style:dashed}
.ib-wiz-vertrag__hd{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border-bottom:1px solid var(--line-soft)}
.ib-wiz-vertrag.is-aus .ib-wiz-vertrag__hd{border-bottom:none}
.ib-wiz-vertrag__schalter{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  font-size:.87rem;font-weight:640;color:var(--ink)}
.ib-wiz-vertrag__meta{
  font-size:.76rem;color:var(--ink-4);text-align:right;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib-wiz-vertrag__body{padding:14px}
.ib-wiz-vertrag__quelle{
  display:flex;gap:18px;flex-wrap:wrap;margin-bottom:14px;
  font-size:.81rem;color:var(--ink-2)}
.ib-wiz-vertrag__quelle label{display:flex;align-items:center;gap:6px;cursor:pointer}
.ib-wiz-vertrag__trenner{
  border:none;border-top:1px solid var(--line-soft);margin:16px 0}

/* Hinweis auf einen bereits vorhandenen Mieter */
.ib-wiz-dublette{color:var(--warn-ink)}
.ib-wiz-verknuepfen{
  border:none;background:none;padding:0;cursor:pointer;
  font:inherit;color:var(--brand);text-decoration:underline}

@media(max-width:820px){
  .ib-wiz-vertrag__hd{flex-direction:column;align-items:flex-start;gap:4px}
  .ib-wiz-vertrag__meta{text-align:left;white-space:normal}
}

/* ── Zeilen- und Kartenlink ─────────────────────────────────────────────────
   Ein echter Link auf dem Namen, der per ::after die ganze Karte bzw. Zeile
   abdeckt. Vorher lag onclick auf div und tr: klickbar, aber weder per Tastatur
   erreichbar noch für Screenreader als Link angekündigt.
   Alle übrigen Bedienelemente werden über die Fläche gehoben und bleiben damit
   selbst bedienbar (Bearbeiten, Löschen, Menü, Auswahlkästchen, Nebenlinks). */
.ib-zeilenlink{position:relative}
/* display:block: Die Titel waren vorher div-Blöcke; Kürzung mit Auslassungspunkten
   (text-overflow) greift nur an Blockelementen. */
.ib-zeilenlink__ziel{display:block;color:inherit;text-decoration:none}
.ib-zeilenlink__ziel::after{content:"";position:absolute;inset:0;z-index:0}
.ib-zeilenlink__ziel:hover{text-decoration:underline;text-underline-offset:2px}
.ib-zeilenlink :is(a,button,input,select,textarea,label,summary):not(.ib-zeilenlink__ziel){position:relative;z-index:1}
/* Fokusrahmen um die ganze Fläche, aber nur für den Link selbst – nicht, wenn
   ein Knopf in der Zeile fokussiert ist. */
.ib-zeilenlink__ziel:focus-visible{outline:none}
.ib-zeilenlink:has(.ib-zeilenlink__ziel:focus-visible){outline:2px solid var(--brand);outline-offset:-2px}
/* Sichtbarer „Details“-Knopf in Kartenfüßen */
.ib-details-btn{font-weight:600;color:var(--brand)}

/* Nur für Screenreader sichtbar – etwa „nicht enthalten“ neben einer
   durchgestrichenen Leistung, deren Durchstreichung nicht vorgelesen wird. */
.mp-sr-hinweis,.ib-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── 31.19 Seitlich scrollende Tabellen sichtbar machen ─────────────
   Das Layout-Skript setzt .ib-hscroll an Tabellenbehälter, die breiter
   sind als ihr Platz, und stellt einen Hinweis mit Scrollknöpfen davor.
   Ohne ihn war nicht zu erkennen, dass rechts noch Spalten folgen: die
   Scrollleiste stand erst unter der letzten Zeile. Die Schattierung
   zeigt zusätzlich, auf welcher Seite Inhalt verdeckt ist. */
.ib-hscroll-hinweis{
  display:flex;align-items:center;gap:6px;margin:0 0 6px;
  font-size:.74rem;color:var(--ink-3)}
.ib-hscroll-hinweis--innen{
  position:sticky;left:0;box-sizing:border-box;margin:0;
  padding:7px 12px;border-bottom:1px solid var(--line-soft);background:var(--card-soft)}
.ib-hscroll-hinweis__text{flex:1;min-width:0}
.ib-hscroll-hinweis__btn{
  width:28px;height:26px;border-radius:6px;border:1px solid var(--line);
  background:var(--card);color:var(--ink-2);font-size:1rem;line-height:1;
  cursor:pointer;font-family:inherit}
.ib-hscroll-hinweis__btn:hover:not(:disabled){background:var(--brand-50);color:var(--brand)}
.ib-hscroll-hinweis__btn:disabled{opacity:.4;cursor:default}
.ib-hscroll-hinweis__btn:focus-visible,
.ib-hscroll:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.ib-hscroll--rechts{box-shadow:inset -14px 0 12px -12px rgba(42,49,50,.28)}
.ib-hscroll--links{box-shadow:inset 14px 0 12px -12px rgba(42,49,50,.28)}
.ib-hscroll--links.ib-hscroll--rechts{
  box-shadow:inset -14px 0 12px -12px rgba(42,49,50,.28),inset 14px 0 12px -12px rgba(42,49,50,.28)}
@media print{.ib-hscroll-hinweis{display:none !important}}

/* ── 31.20 Ablauf des Dokumenteneingangs ────────────────────────── */
.ib-eingang-ablauf{margin:6px 0 0 18px;padding:0;display:flex;flex-direction:column;gap:3px}
.ib-eingang-ablauf li{list-style:disc}

/* hidden-Attribut hat Vorrang vor display:flex/grid (Nebenkosten-Assistent) */
.ib-flash[hidden],.mp-alert[hidden],.mp-panel[hidden],[data-verbrauch][hidden],[data-zaehler][hidden]{display:none!important}