:root {
  color-scheme: light;
  --vm-canvas: #d9e5ea;
  --vm-shell: #f1f6f7;
  --vm-surface: #ffffff;
  --vm-surface-2: #e2edf0;
  --vm-surface-3: #f7fafb;
  --vm-text: #10272d;
  --vm-muted: #50686e;
  --vm-border: #c4d6da;
  --vm-primary: #087985;
  --vm-primary-strong: #05606a;
  --vm-primary-soft: #d7eef0;
  --vm-accent: #d5a64b;
  --vm-danger: #b42318;
  --vm-shadow: 0 28px 80px rgba(15, 55, 65, .17);
  --vm-card-shadow: 0 10px 30px rgba(18, 62, 72, .09);
  --gruen: var(--vm-primary);
  --gruen-hell: var(--vm-primary-soft);
  --grau: var(--vm-canvas);
  --rand: var(--vm-border);
  --text: var(--vm-text);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --vm-canvas: #02090c;
  --vm-shell: #061216;
  --vm-surface: #0e2227;
  --vm-surface-2: #15343b;
  --vm-surface-3: #09191e;
  --vm-text: #effbfd;
  --vm-muted: #a7c1c6;
  --vm-border: #294a51;
  --vm-primary: #4bd6d2;
  --vm-primary-strong: #8cece8;
  --vm-primary-soft: #153f45;
  --vm-accent: #efbd5d;
  --vm-danger: #ff8d84;
  --vm-shadow: 0 28px 90px rgba(0, 0, 0, .45);
  --vm-card-shadow: 0 12px 30px rgba(0, 0, 0, .24);
}

* { box-sizing: border-box; }
/* scrollbar-gutter reserviert den Platz fuer den Scrollbalken immer, egal ob
   der Inhalt gerade laenger ist als das Fenster oder nicht. Ohne das springt
   die zentrierte .app beim Wechsel zwischen kurzen (Uebersicht, Kundenkatalog)
   und langen Reitern (Kfz-Antraege, Beratung, Rentenoptimierung) um die
   Scrollbalken-Breite nach rechts/links. */
html { min-width: 320px; background: var(--vm-canvas); scrollbar-gutter: stable; overflow-y: scroll; }
body { min-width: 320px; color: var(--vm-text); background: var(--vm-canvas); }
button, input, select, textarea { font: inherit; }
button { touch-action: manipulation; }

.app,
.app main,
.app section,
.app article,
.app aside,
.app div,
.app span { min-width: 0; }

.app p,
.app h1,
.app h2,
.app h3,
.app td,
.app th,
.det-zeile .v,
.kdb-fwert,
.topt-hinweis,
.topt-warn,
.topt-fehler,
.topt-linkbox span { overflow-wrap: anywhere; }

.app {
  /* Arbeitsbreite: im Profil einstellbar (--vm-app-breite), Standard 1520 px. */
  width: min(var(--vm-app-breite, 1520px), calc(100% - 32px));
  max-width: none;
  min-height: calc(100dvh - 32px);
  margin: 16px auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--vm-border) 76%, transparent);
  border-radius: 26px;
  background: var(--vm-shell);
  box-shadow: var(--vm-shadow);
}

/* Login-Ansicht: schmale Card statt volle App-Breite */
.app.login-view {
  width: min(480px, calc(100% - 16px));
  margin: 8px auto;
  min-height: auto;
  padding-bottom: 32px;
}
@media (max-width: 520px) {
  .app.login-view {
    width: calc(100% - 16px);
    margin: 8px 8px;
    border-radius: 16px;
  }
}

/* Exakt wie im finalen Petrol-Pulse-Mock-up: horizontale Kopfleiste. */
header.kopf.topbar {
  position: relative;
  z-index: 40;
  top: auto;
  min-height: 82px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--vm-border);
  color: var(--vm-text);
  background: var(--vm-surface);
}
@media (max-width: 520px) {
  header.kopf.topbar {
    min-height: 68px;
    padding: 10px 12px;
    gap: 8px;
  }
}

/* Logo-Karte: eigener heller Untergrund, unabhaengig vom Farbschema - das SVG
   ist fest in dunklem Gruen/Schwarz gezeichnet und waere im Dark Mode sonst
   auf dem dunklen Header kaum lesbar. */
.manager-brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0;
}
.manager-brand .logo {
  display: block;
  height: 56px;
  width: auto;
}
.manager-brand .logo-dark { display: none; }
html[data-theme="dark"] .manager-brand .logo-light { display: none; }
html[data-theme="dark"] .manager-brand .logo-dark { display: block; }
@media (max-width: 520px) {
  .manager-brand .logo {
    height: 48px;
  }
}

.navbar {
  width: auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  margin: 0;
}
/* Die Leiste zeigt nur am aktiven Reiter einen Text. Dadurch steht immer genau
   eine Beschriftung im Raum und kann nicht abgeschnitten werden - frueher
   quetschten sich fuenf Namen nebeneinander und endeten als "Uebersic...". */
.navbar .nav-btn {
  position: relative;
  width: 54px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--vm-muted);
  background: transparent;
  cursor: pointer;
  font-size: 13.5px;
  text-align: left;
  white-space: nowrap;
}
.navbar .nav-btn span:not(.nav-count) { display: none; }
.navbar .nav-btn svg {
  flex: none;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.navbar .nav-btn:hover { color: var(--vm-text); background: var(--vm-surface-3); }

/* Aktiver Reiter: klappt zur beschrifteten Kapsel auf. */
.navbar .nav-btn.an {
  width: auto;
  gap: 10px;
  padding: 0 18px 0 14px;
  color: var(--vm-primary-strong);
  background: var(--vm-primary-soft);
  border-color: color-mix(in srgb, var(--vm-primary) 32%, transparent);
  font-weight: 650;
}
.navbar .nav-btn.an span:not(.nav-count) { display: inline; }

/* Zaehler: am inaktiven Reiter eine kleine Scheibe an der Ecke, am aktiven eine
   Pille hinter dem Text. Steht er auf 0, wird er in JS ausgeblendet. */
.nav-count {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border: 2px solid var(--vm-surface);
  border-radius: 999px;
  color: var(--vm-surface);
  background: var(--vm-primary);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 15px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.nav-count[hidden] { display: none; }
.navbar .nav-btn.an .nav-count {
  position: static;
  height: 20px;
  border: 0;
  line-height: 20px;
}

/* Etikett beim Ueberfahren - ersetzt den fehlenden Text am inaktiven Reiter. */
.navbar .nav-btn[data-label]::after {
  content: attr(data-label);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 130;
  transform: translateX(-50%) translateY(-3px);
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--vm-text);
  color: var(--vm-surface);
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity .13s ease, transform .13s ease;
}
.navbar .nav-btn[data-label]:hover::after,
.navbar .nav-btn[data-label]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.navbar .nav-btn.an::after { content: none; }
@media (prefers-reduced-motion: reduce) {
  .navbar .nav-btn[data-label]::after { transition: none; }
}

.top-actions {
  position: relative;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}
.theme-toggle {
  min-width: 108px;
  height: 50px;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 7px 8px;
  border: 1px solid var(--vm-border);
  border-radius: 14px;
  color: var(--vm-text);
  background: var(--vm-surface-3);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}
/* Rufnummer oben rechts: reine Anzeige zum Ablesen, kein Link.
   Box waechst nur mit der Nummer mit, Inhalt steht mittig. */
.top-phone {
  height: 50px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: fit-content;
  gap: 1px;
  padding: 5px 14px;
  border: 1px solid var(--vm-border);
  border-radius: 14px;
  background: var(--vm-surface-3);
  color: var(--vm-text);
  line-height: 1.1;
  user-select: text;
}
.top-phone[hidden] { display: none; }   /* inline-flex wuerde hidden sonst aushebeln */
.top-phone small {
  font-size: 9px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; opacity: .65;
}
.top-phone-nr { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.theme-zeile { margin: 0 0 12px; }
.theme-symbol { width: 18px; font-size: 19px; line-height: 1; }
.theme-label { min-width: 34px; text-align: left; }
.theme-track {
  position: relative;
  width: 38px;
  height: 22px;
  flex: 0 0 38px;
  border: 1px solid var(--vm-border);
  border-radius: 99px;
  background: var(--vm-surface-2);
}
.theme-track span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--vm-primary);
  box-shadow: 0 2px 6px rgba(0,0,0,.24);
  transition: transform .18s ease;
}
html[data-theme="dark"] .theme-track span { transform: translateX(16px); }

.profile-menu-wrap { position: relative; }
.profile-card {
  width: 188px;
  height: 50px;
  min-height: 50px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--vm-border);
  border-radius: 16px;
  color: var(--vm-text);
  background: var(--vm-surface-3);
  cursor: pointer;
  text-align: left;
}
.profile-avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #06311f;
  background: #c7f0d8;
  font-size: 13px;
  font-weight: 850;
}
.profile-copy strong,
.profile-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-copy strong { font-size: 12px; }
.profile-copy small { color: var(--vm-muted); font-size: 10px; }
.profile-chevron { font-size: 20px; }
.profile-menu {
  position: absolute;
  z-index: 120;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  overflow: hidden;
  padding: 6px;
  border: 1px solid var(--vm-border);
  border-radius: 14px;
  background: var(--vm-surface);
  box-shadow: 0 18px 44px rgba(8, 40, 48, .26);
}
.profile-menu[hidden] { display: none; }

/* Kopfzeile mit Avatar und Name - macht klar, in wessen Menue man steht. */
.menu-kopf {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 4px; padding: 10px;
  border-radius: 10px;
  background: var(--vm-primary-soft);
}
.menu-kopf-copy { min-width: 0; display: flex; flex-direction: column; }
.menu-kopf-copy strong {
  overflow: hidden; font-size: 13px; line-height: 1.25;
  text-overflow: ellipsis; white-space: nowrap;
}
.menu-kopf-copy small { color: var(--vm-muted); font-size: 11px; }

.profile-menu a.link {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  color: var(--vm-text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.menu-ic {
  flex: none; width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--vm-muted);
}
.profile-menu a.link:hover { background: var(--vm-surface-2); }
.profile-menu a.link:hover .menu-ic { color: var(--vm-primary); }
/* Abmelden ist der Ausstieg: eigener Block, damit man nicht danebengreift. */
.profile-menu a.link.abmelden { margin-top: 4px; border-top: 1px solid var(--vm-border); border-radius: 0 0 9px 9px; padding-top: 12px; }
.profile-menu a.link.abmelden:hover { background: color-mix(in srgb, var(--vm-danger) 10%, transparent); color: var(--vm-danger); }
.profile-menu a.link.abmelden:hover .menu-ic { color: var(--vm-danger); }

.app > main {
  width: 100%;
  padding: 0 24px 48px;
  background: var(--vm-shell);
}
#uebersichtBox,#listeBox,#detailBox,#kundenBox,#toptBox,#roptBox,#einkBox,#rechenwerteBox,#kuendBox,#kalenderBox,#usersBox {
  width:100%;
  margin-top:24px;
}

/* Rentenoptimierung/Einkommenssicherung: Kopf (Hero + Reiter) bleibt beim
   Scrollen fixiert, nur der Inhalt darunter (#roptInhalt/#einkInhalt) scrollt.
   187px = Topbar(83) + App-Raender oben/unten(32) + Box-Abstand(24) +
   Main-Padding(48). Nur Desktop - mobil (<=820px) hat .app ohnehin schon
   eigenen Seiten-Scroll mit sticky Topbar.
   Frueher blieben Hero + Reiterleiste fix stehen und nur der Inhalt darunter
   scrollte. Das nahm im Kundenfall zu viel Arbeitsflaeche weg -> auf Wunsch
   (18.08.2026) fuer ALLE drei Module gleichermassen umgebaut: JETZT scrollt
   die GESAMTE Box (Kopf, Reiter UND Inhalt) gemeinsam, Kopf und Reiter laufen
   beim Scrollen nach oben aus dem Bild. Nur der Link "Zurueck zur Fall-Liste"
   bleibt oben sichtbar - position:sticky greift zuverlaessig, weil die Box
   selbst der echte Scroll-Container ist (waere sie es nicht, haette sticky
   keinen Bezugsrahmen und wuerde einfach mitscrollen). */
@media (min-width:821px) {
  /* overflow-y:auto macht die Box zum Clipping-Container (erzwingt auch
     overflow-x:auto) - der weiche Hero-Schatten (box-shadow, 38px Blur) wurde
     dadurch links/rechts hart abgeschnitten, sichtbar als "harter" statt
     weicher Schatten (anders als bei #kundenBox ohne eigenen Scroll-Container).
     Fix: Box per padding+negativem margin ueber ihre eigentliche Breite hinaus
     vergroessern, damit der Schatten innerhalb der Clip-Grenze Platz hat -
     Inhalt bleibt durch box-sizing:border-box optisch exakt gleich breit. */
  #toptBox,#roptBox,#einkBox,#kuendBox {
    width:calc(100% + 80px);
    height:calc(100dvh - 187px);
    margin:24px -40px 0;
    padding:0 40px;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }
  #toptInhalt > #toptZurueck,
  #roptInhalt > #roptBack,
  #einkInhalt > #einkZurueck,
  #kuendInhalt > #kuendZurueck {
    position:sticky;
    z-index:20;
    top:0;
    width:100%;
    margin:0 0 8px;
    padding:4px 0;
  }
}

/* Verdeckter Vorführmodus: Katalog- und DEAS-Bezüge bleiben funktional erhalten,
   sind auf dem Präsentationsgerät aber nicht sichtbar oder aufrufbar. */
html.praesentationsmodus #navKunden,
html.praesentationsmodus #kundenBox,
html.praesentationsmodus [data-ziel="deasBox"],
html.praesentationsmodus #deasBox,
html.praesentationsmodus #kdbSetupBox,
html.praesentationsmodus #btnDeas,
html.praesentationsmodus button[data-akt="kdb"],
html.praesentationsmodus .praes-verbergen { display:none !important; }

.mein-link-bar {
  position: relative;
  z-index: 2;
  width: min(480px, 45vw);
  height: 64px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 24px;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 10px;
  margin: 0 0 0 auto;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 14px;
  color: #fff;
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
}
.mein-link-bar > svg { grid-column: 1; grid-row: 1 / span 2; width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
/* Kfz-Anträge: Box nur so breit wie der Link-Text braucht, nicht die feste
   Kalender-Breite (dort bewusst so, um mit dem langen Terminfluss zu wachsen). */
#listeBox .mein-link-bar { width: fit-content; grid-template-columns: 22px auto 24px; }
.mein-link-bar .mll-label { grid-column: 2; grid-row: 1; color: #dceff0; font-size: 10px; }
.mein-link-bar .mll-url { grid-column: 2; grid-row: 2; min-width:0; overflow:visible; color:#fff; font-size:12px; font-weight:750; line-height:1.15; overflow-wrap:anywhere; white-space:normal; }
.mein-link-bar .mll-copy { grid-column:3; grid-row:1 / span 2; width:32px; min-width:32px; height:32px; display:grid; place-items:center; padding:0; border:1px solid rgba(255,255,255,.28); border-radius:9px; color:#fff; background:rgba(0,0,0,.08); cursor:pointer; }
.mein-link-bar .mll-copy:hover { background:rgba(255,255,255,.16); }
.mein-link-bar .mll-copy svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mein-link-bar .mll-copy .copy-check { display:none; }
.mein-link-bar .mll-copy.kopiert { color:#082f35; background:#9de8e2; }
.mein-link-bar .mll-copy.kopiert .copy-symbol { display:none; }
.mein-link-bar .mll-copy.kopiert .copy-check { display:block; }
.main-tab-hero {
  position:relative;
  width:100%;
  height:112px;
  min-height:112px;
  display:flex;
  align-items:center;
  overflow:hidden;
  margin:0 0 18px;
  padding:24px 30px;
  border-radius:24px;
  color:#fff;
  background:linear-gradient(120deg,#0b4652,#08757b 72%,#29958b);
  box-shadow:0 16px 38px rgba(7,67,77,.18);
}
.main-tab-hero::after {
  position:absolute;
  width:220px;
  height:220px;
  right:-65px;
  top:-160px;
  border:1px solid rgba(158,239,225,.3);
  border-radius:50%;
  content:"";
}
.main-tab-hero h2 { position:relative; z-index:1; margin:0; color:#fff; font-size:clamp(26px,2.3vw,34px); letter-spacing:-.035em; }
html[data-theme="dark"] .main-tab-hero { background:linear-gradient(120deg,#092b35,#07545e 72%,#08756f); box-shadow:0 18px 42px rgba(0,0,0,.3); }
.main-tab-hero-with-link { gap:24px; }
.main-tab-hero-with-actions { justify-content:space-between; gap:24px; }
.main-tab-hero-actions { position:relative; z-index:1; display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-left:auto; }
.main-tab-hero-action {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 15px;
  border:1px solid rgba(222,255,251,.46);
  border-radius:12px;
  cursor:pointer;
  font-size:13px;
  font-weight:800;
  line-height:1.2;
  white-space:nowrap;
}
.main-tab-hero-action span { font-size:17px; line-height:1; }
.main-tab-hero-action svg { width:16px; height:16px; flex:none; }
.main-tab-hero-action-secondary { color:#fff; background:rgba(5,45,54,.26); backdrop-filter:blur(10px); }
.main-tab-hero-action-secondary:hover { background:rgba(5,45,54,.42); }
.main-tab-hero-action-primary { color:#052f35; border-color:#8ef3ea; background:#79e4dc; box-shadow:0 8px 22px rgba(0,33,38,.2); }
.main-tab-hero-action-primary:hover { background:#91eee7; }
.main-tab-hero-action:focus-visible { outline:3px solid rgba(255,255,255,.86); outline-offset:3px; }
.main-tab-hero-action:disabled { cursor:wait; opacity:.72; }
.kdb-import-feedback { margin:-4px 10px 16px; }
.kdb-import-feedback:empty { display:none; }
.kdb-import-feedback .evb-info,.kdb-import-feedback .fehler { display:block; margin:0; padding:11px 14px; border:1px solid var(--vm-border); border-radius:12px; background:var(--vm-surface); }

.manager-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 10px 18px;
  padding: 10px;
  border: 1px solid var(--vm-border);
  border-radius: 18px;
  background: var(--vm-surface);
  box-shadow: var(--vm-card-shadow);
}
.action-label { margin: 0 auto 0 6px; color: var(--vm-muted); font-size: 13px; }
.manager-action {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 750;
}
.manager-action-primary { color: #fff; background: linear-gradient(135deg,var(--vm-primary),var(--vm-primary-strong)); box-shadow: 0 8px 18px color-mix(in srgb,var(--vm-primary) 24%,transparent); }
html[data-theme="dark"] .manager-action-primary { color: #032326; }
.manager-action-secondary { color: var(--vm-primary-strong); border-color: color-mix(in srgb,var(--vm-primary) 38%,var(--vm-border)); background: var(--vm-primary-soft); }
.manager-action-quiet { color: var(--vm-text); border-color: var(--vm-border); background: transparent; }

.stats-grid {
  display: grid;
  grid-template-columns: 1.15fr repeat(3,minmax(0,.95fr));
  gap: 14px;
  margin: 0 10px 18px;
}
.stat-card {
  position: relative;
  min-height: 150px;
  overflow: hidden;
  padding: 18px;
  border: 1px solid var(--vm-border);
  border-radius: 16px;
  background: var(--vm-surface);
  box-shadow: var(--vm-card-shadow);
}
.stat-card::after { position:absolute; width:74px; height:74px; right:-30px; top:-34px; border-radius:50%; background:color-mix(in srgb,var(--vm-primary) 12%,transparent); content:""; }
.stat-icon { width:36px; height:36px; display:grid; place-items:center; margin-bottom:15px; border-radius:11px; color:var(--vm-primary-strong); background:var(--vm-primary-soft); font-size:18px; }
.stat-card strong { display:block; font-size:27px; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.04em; }
.stat-card > span:last-child { display:block; margin-top:7px; color:var(--vm-muted); font-size:13px; }
.stat-card.stat-primary { color:#fff; border-color:#1e5660; background:linear-gradient(145deg,#102f3a,#0d4f57); }
.stat-card.stat-primary .stat-icon { color:#0c4850; background:#bcece6; }
.stat-card.stat-primary > span:last-child { color:#c7dde0; }
html[data-theme="dark"] .stat-card:not(.stat-primary),
html[data-theme="dark"] .manager-list-card,
html[data-theme="dark"] .manager-activity-card,
html[data-theme="dark"] .manager-actions { background:linear-gradient(145deg,var(--vm-surface),#0a1b20); }

.manager-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0,1.55fr) minmax(290px,.75fr);
  gap: 18px;
  margin: 0 10px;
}
.manager-list-card,
.manager-activity-card,
.app > main > section:not(#uebersichtBox):not(#listeBox):not(#kundenBox):not(#toptBox):not(#roptBox):not(#einkBox):not(#kuendBox):not(#kalenderBox) {
  border: 1px solid var(--vm-border);
  border-radius: 24px;
  color: var(--vm-text);
  background: var(--vm-surface);
  box-shadow: var(--vm-card-shadow);
}
.manager-list-card,
.manager-activity-card { padding: 20px; }
.app > main > section:not(#uebersichtBox):not(#listeBox):not(#kundenBox):not(#toptBox):not(#roptBox):not(#einkBox):not(#kuendBox):not(#kalenderBox) { padding: 22px; }
.manager-list-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; }
.manager-list-head h3 { margin:0; font-size:18px; letter-spacing:-.015em; }
.status-filter-row { display:flex; gap:6px; flex-wrap:nowrap; }
.status-filter {
  width: 96px;
  min-width: 96px;
  height: 36px;
  min-height: 36px;
  padding: 5px 12px;
  border: 1px solid var(--vm-border);
  border-radius: 99px;
  color: var(--vm-muted);
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}
.status-filter-wide { width: 116px; min-width: 116px; }
.status-filter[aria-pressed="true"] { color:var(--vm-text); border-color:var(--vm-primary); background:var(--vm-primary-soft); }

.such,
.feld input,
.feld select,
.feld textarea,
.kdb-mf-btn,
#kdbOwnerFilter,
#kdbSuche,
#kdbSparteFilter,
#toptBox input,
#toptBox select,
#toptBox textarea,
#roptBox input,
#roptBox select,
#roptBox textarea {
  border-color: var(--vm-border) !important;
  color: var(--vm-text) !important;
  background: var(--vm-surface-3) !important;
}
.such { min-height:40px; margin:-4px 0 12px; padding:9px 12px; font-size:14px; }
input::placeholder, textarea::placeholder { color:var(--vm-muted); opacity:.82; }

.case-list { display:grid; gap:8px; }
.liste-wrap { margin:0; overflow:visible; border-radius:14px; }
.liste-del { display:none; }
.liste-item {
  min-height:72px;
  display:grid;
  grid-template-columns:42px minmax(240px,320px) minmax(220px,1fr) 172px 22px;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:14px;
  color:var(--vm-text);
  background:var(--vm-surface-3);
}
.liste-item:hover { border-color:var(--vm-border); background:var(--vm-surface-2); box-shadow:none; }
.liste-item.uebergeben { background:var(--vm-primary-soft); }
.case-avatar { width:42px; height:42px; display:grid; place-items:center; grid-column:1; grid-row:1; border-radius:13px; color:var(--vm-primary-strong); background:var(--vm-primary-soft); font-size:13px; font-weight:850; }
.liste-item .haupt { grid-column:2; grid-row:1; width:auto; }
.liste-item .name,
.case-vehicle strong { display:block; overflow:hidden; font-size:14px; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }
.liste-item .meta,
.case-vehicle span { display:block; overflow:hidden; margin:0; color:var(--vm-muted); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.case-vehicle { grid-column:3; grid-row:1; }
.owner-tag { max-width:100%; overflow:hidden; margin-top:3px; color:var(--vm-primary-strong); background:var(--vm-primary-soft); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.badge {
  width:172px;
  min-width:172px;
  min-height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  grid-column:4;
  grid-row:1;
  padding:6px 10px;
  border-radius:99px;
  font-size:11px;
  line-height:1;
  white-space:nowrap;
}
.badge::before { width:6px; height:6px; margin-right:6px; border-radius:50%; background:currentColor; content:""; }
.s-nicht_bearbeitet { color:var(--vm-muted); background:var(--vm-surface-2); }
.s-eingereicht { color:color-mix(in srgb,#22c55e 80%,var(--vm-text)); background:color-mix(in srgb,#22c55e 16%,var(--vm-surface)); }
.s-evb_warte { color:color-mix(in srgb,var(--vm-accent) 84%,var(--vm-text)); background:color-mix(in srgb,var(--vm-accent) 17%,transparent); }
.kebab {
  position:static;
  width:22px;
  height:40px;
  display:grid;
  place-items:center;
  grid-column:5;
  grid-row:1;
  padding:0;
  color:var(--vm-text);
  font-size:0;
}
.kebab::after { content:"›"; font-size:25px; font-weight:400; }
.kebab:hover,.kebab:active { background:transparent; }
.manager-secondary-actions { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; margin-top:12px; }
.manager-secondary-actions .manager-action { min-height:34px; padding:6px 10px; font-size:11px; }

.activity-list { display:grid; gap:4px; }
.activity-item { position:relative; display:grid; grid-template-columns:34px minmax(0,1fr); gap:11px; min-height:70px; }
.activity-item:not(:last-child)::after { position:absolute; left:16px; top:35px; bottom:-5px; width:1px; background:var(--vm-border); content:""; }
.activity-icon { width:34px; height:34px; display:grid; place-items:center; z-index:1; border:1px solid var(--vm-border); border-radius:11px; color:var(--vm-primary-strong); background:var(--vm-primary-soft); font-size:14px; }
.activity-copy strong,.activity-copy span,.activity-copy small { display:block; }
.activity-copy strong { font-size:13px; }
.activity-copy span,.activity-copy small { color:var(--vm-muted); font-size:11px; }
.activity-copy small { margin-top:5px; }

/* Alle echten Unterseiten im gleichen Petrol-Pulse-System. */
.det-gruppe,.user-item { border-color:var(--vm-border); background:var(--vm-surface); }
.user-link { color:var(--vm-text); background:var(--vm-surface-2); }
.user-btns button { color:var(--vm-text); background:var(--vm-surface-2); border-color:var(--vm-border); }
.user-btns .ub-del { color:var(--vm-danger); border-color:var(--vm-danger); }
.det-gruppe h3,.kdb-setup summary { color:var(--vm-primary-strong); background:var(--vm-primary-soft); }
.det-zeile,.kdb-feld { border-color:var(--vm-border); }
.det-zeile .l,.kdb-flbl,.user-item .ue,#deasBox p,#kdbSetupBox p,#kundenBox p,#fotoBox p { color:var(--vm-muted) !important; }
.kdb-fwert { color:var(--vm-text); }
/* Kunden-DB-Tabellen im gleichen Layout wie die uebrigen Manager-Listen
   (.ropt-/.topt-/.ue-tabelle): Rahmen mit runden Ecken, helle Kopfzeile,
   deutliche Trennlinien. Die senkrechten Spaltentrenner und die Eckenrundung
   der Kopfzeile kommen aus wiedervorlage.css, wo .kdb-tabelle schon gelistet ist. */
.kdb-tabelle {
  display:table;
  width:100%;
  min-width:100%;
  max-width:100%;
  margin:8px 0;
  border:1px solid var(--vm-border);
  border-radius:13px;
  border-collapse:separate;
  border-spacing:0;
  background:var(--vm-surface);
  font-size:14px;
}
.kdb-tabelle th {
  padding:10px 11px;
  border:0;
  border-bottom:1px solid var(--vm-border);
  color:var(--vm-text);
  background:var(--vm-surface-2);
  text-align:left;
  font-size:12px;
  font-weight:800;
  letter-spacing:.015em;
  white-space:nowrap;
}
.kdb-tabelle td { padding:9px 11px; border:0; border-bottom:1px solid var(--vm-border); vertical-align:middle; }
.kdb-tabelle tr:last-child td { border-bottom:0; }
.kdb-mf-panel,.kachel-menu,.transfer-box,.manual-box,.privacy-admin-box { color:var(--vm-text); background:var(--vm-surface); }
.evb-info { color:var(--vm-text); background:color-mix(in srgb,var(--vm-primary) 14%,var(--vm-surface)); }
.evb-card { color:#172330 !important; background:#fff !important; }
.evb-card .evb-text { color:#222 !important; }
.evb-card .evb-nr { color:#111 !important; }
.kdb-mf-panel,.kachel-menu { border-color:var(--vm-border); }
.kdb-mf-panel label:hover,.kdb-mf-clear:hover,.kachel-menu button:hover { background:var(--vm-surface-2); }
.kachel-menu button { color:var(--vm-text); background:var(--vm-surface); }
#detailBox { width:min(1220px,100%); margin-right:auto; margin-left:auto; }
#detailBox > .link { display:inline-flex; margin-bottom:14px; }
.detail-topbar { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:20px; margin-bottom:18px; }
.detail-heading { min-width:0; }
.detail-heading .det-kopf { margin:0 0 5px; }
.detail-heading .det-kopf h2 { min-width:0; margin:0; overflow-wrap:anywhere; font-size:clamp(25px,2vw,32px); }
.detail-meta { color:var(--vm-muted) !important; }
.detail-topbar-aktionen { display:flex; align-items:stretch; gap:10px; flex-wrap:wrap; }
#detailBox #btnDeas { width:auto !important; min-width:230px; padding-right:20px !important; padding-left:20px !important; }
.detail-action-grid,.detail-data-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; }
.detail-action-grid .det-gruppe,.detail-data-grid .det-gruppe { min-width:0; margin:0; }
.detail-data-grid { margin-top:16px; }
#detailBox #btnDelete { width:auto !important; min-width:210px; display:block; margin:18px 0 0 auto !important; padding-right:20px !important; padding-left:20px !important; }
.manual-box {
  width:min(940px,calc(100vw - 32px));
  padding:28px;
  border:1px solid var(--vm-border);
  border-radius:24px;
  box-shadow:0 28px 80px rgba(0,18,22,.34);
}
.manual-hinweis { margin:0 0 16px; color:var(--vm-muted); font-size:14px; }
.manual-mailzeile { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:12px; }
.manual-mailzeile .feld { margin:0; }
.manual-box .manual-mailzeile textarea { min-height:92px; max-height:170px; }
.manual-parse { min-width:170px; min-height:46px; margin-bottom:0; }
.manual-status { min-height:24px; margin:10px 0; color:var(--vm-muted); font-size:13px; }
.manual-erfolg { color:var(--vm-primary-strong); font-weight:800; }
.manual-fields { display:grid; gap:22px; }
.manual-gruppe { overflow:hidden; border:1px solid var(--vm-border); border-radius:18px; background:var(--vm-surface-2); }
.manual-gruppe h4 { display:flex; align-items:center; gap:11px; margin:0; padding:16px 20px; border-bottom:1px solid var(--vm-border); font-size:17px; font-weight:800; }
.manual-gruppe h4 span { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; color:var(--vm-primary-strong); background:var(--vm-primary-soft); font-size:12px; }
.manual-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 20px; padding:20px; }
.manual-zeile { grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 20px; }
.manual-zeile.manual-versteckt { display:none; }
.manual-feld { min-width:0; }
.manual-feld-voll { grid-column:1 / -1; }
.manual-feld.manual-versteckt,.manual-gruppe.manual-versteckt { display:none; }
.manual-feld label { display:block; margin:0 0 7px; color:var(--vm-text); font-size:14px; font-weight:650; }
.manual-feld input,.manual-feld select { width:100%; min-width:0; min-height:50px; box-sizing:border-box; padding:12px 14px; border:1px solid var(--vm-border); border-radius:10px; color:var(--vm-text); background:var(--vm-surface); font-size:15px; }
.manual-feld.manual-fehlt input,.manual-feld.manual-fehlt select { border-color:#d39b31 !important; background:color-mix(in srgb,#e8b94f 8%,var(--vm-surface)) !important; }
.manual-feld.manual-ausgefuellt input,.manual-feld.manual-ausgefuellt select { border-color:color-mix(in srgb,var(--vm-primary) 65%,var(--vm-border)) !important; }
.manual-aktionen { position:sticky; bottom:-28px; display:flex; gap:10px; margin:18px -28px -28px; padding:16px 28px 28px; border-top:1px solid var(--vm-border); background:var(--vm-surface); }
#manualCancel { color:var(--vm-text); background:var(--vm-surface-2) !important; }
.overlay { background:rgba(0,12,15,.66); backdrop-filter:blur(4px); }
body.deas-dialog-offen { overflow:hidden; }
.deas-dialog {
  width:min(820px,calc(100vw - 48px));
  max-width:none;
  max-height:calc(100vh - 64px);
  overflow:hidden;
  border:1px solid var(--vm-border);
  border-radius:24px;
  color:var(--vm-text);
  background:var(--vm-surface);
  box-shadow:0 28px 80px rgba(0,18,22,.34);
}
.deas-dialog-kopf {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:22px 24px 18px;
  border-bottom:1px solid var(--vm-border);
  background:linear-gradient(135deg,var(--vm-primary-soft),var(--vm-surface));
}
.deas-dialog-kopf h2 { margin:3px 0 5px; font-size:25px; letter-spacing:-.025em; }
.deas-dialog-kopf p { margin:0; color:var(--vm-muted) !important; font-size:14px; }
.deas-dialog-kicker { color:var(--vm-primary-strong); font-size:10px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.deas-dialog-schliessen {
  width:42px;
  min-width:42px;
  height:42px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--vm-border);
  border-radius:13px;
  color:var(--vm-text);
  background:var(--vm-surface-2);
  font-size:18px;
}
.deas-dialog-schliessen:hover { border-color:var(--vm-primary); background:var(--vm-primary-soft); }
.deas-dialog-inhalt {
  display:grid;
  grid-template-columns:minmax(270px,.9fr) minmax(360px,1.1fr);
  gap:14px;
  max-height:calc(100vh - 190px);
  overflow:auto;
  padding:18px;
}
.deas-dialog .det-gruppe { min-width:0; margin:0; overflow:hidden; border-radius:16px; }
.deas-dialog .det-gruppe h3 { margin:0; padding:11px 14px; font-size:14px; }
.deas-dialog-abschnitt { padding:14px; }
.deas-dialog-abschnitt p:first-child { margin-top:0; }
.deas-dialog-abschnitt ol { margin:0; padding-left:21px; line-height:1.65; }
.deas-dialog-hinweis { margin-bottom:0; font-size:12px; line-height:1.5; }
.deas-dialog .bm-link { max-width:100%; padding:11px 16px; font-size:14px; text-align:center; }
.deas-dialog code { color:var(--vm-text); background:var(--vm-surface-2); }
.profile-dialog { width:min(1040px,calc(100vw - 48px)); }
.profile-dialog-inhalt {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  max-height:calc(100vh - 190px);
  overflow:auto;
  padding:18px;
}
.profile-panel { min-width:0; overflow:hidden; border:1px solid var(--vm-border); border-radius:16px; background:var(--vm-surface-3); }
.profile-panel h3 { margin:0; padding:11px 14px; color:var(--vm-primary-strong); background:var(--vm-primary-soft); font-size:14px; }
/* Panel als <details>: Kopf ist zuklappbar, Standard-Dreieck raus, eigener Pfeil rein. */
.profile-panel summary {
  display:flex; align-items:center; gap:8px;
  margin:0; padding:11px 14px;
  color:var(--vm-primary-strong); background:var(--vm-primary-soft);
  font-size:14px; font-weight:700; cursor:pointer; list-style:none;
}
.profile-panel summary::-webkit-details-marker { display:none; }
.profile-panel summary::before { content:"\203A"; font-size:16px; transition:transform .16s ease; }
.profile-panel[open] summary::before { transform:rotate(90deg); }
.profile-panel-tag { padding:2px 8px; border-radius:999px; color:var(--vm-muted); background:var(--vm-surface); font-size:11px; font-weight:750; text-transform:uppercase; letter-spacing:.03em; }
.profile-panel-body { padding:14px; }
.profile-panel-body > p:first-child { margin-top:0; }
.profile-panel-wo { margin:14px 0 4px; font-size:13px; }
.profile-panel-liste { margin:4px 0 0; padding-left:18px; color:var(--vm-muted); font-size:13px; line-height:1.5; }
.profile-panel .feld { min-width:0; margin-bottom:12px; }
.profile-panel .feld label { display:block; margin-bottom:6px; font-size:13px; font-weight:750; }
.profile-panel .btn-gruen { min-height:44px; padding:10px 14px; font-size:14px; }
.profile-privacy-panel,.profile-password-panel { grid-column:1 / -1; }
.profile-field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px; }
.profile-field-wide { grid-column:1 / -1; }
.profile-password-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.profile-save-action { width:auto; min-width:230px; }
.profile-feedback { min-height:0; margin-top:8px; font-size:13px; }
.profile-feedback:empty { display:none; }
.profile-photo-body { display:flex; gap:14px; align-items:flex-start; }
.profile-photo-body .foto-vorschau { width:108px; height:108px; margin:0; border-width:2px; }
.profile-photo-copy { min-width:0; flex:1; }
.profile-photo-copy p { margin-top:0; font-size:13px; line-height:1.45; }
.profile-photo-copy input[type="file"] { max-width:100%; font-size:12px; }
.presentation-dialog { width:min(560px,calc(100vw - 48px)); }
.presentation-dialog-inhalt { padding:18px; }
.presentation-switch {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
  padding:16px;
  border:1px solid var(--vm-border);
  border-radius:16px;
  color:var(--vm-text);
  background:var(--vm-surface-3);
  cursor:pointer;
}
.presentation-switch span { min-width:0; }
.presentation-switch strong,.presentation-switch small { display:block; }
.presentation-switch small { margin-top:4px; color:var(--vm-muted); line-height:1.4; }
.presentation-switch input { width:24px; height:24px; flex:0 0 auto; accent-color:var(--vm-primary); }
.presentation-code-panel { margin-top:20px; padding-top:18px; border-top:1px solid var(--vm-border); }
.presentation-code-panel h3 { margin:0 0 14px; color:var(--vm-text); font-size:17px; }
.presentation-code-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.presentation-code-grid .feld { min-width:0; margin-bottom:12px; }
.presentation-code-feedback { min-height:20px; margin-top:10px; color:var(--vm-primary-strong); font-size:13px; }
html[data-theme="dark"] #deasBox code,
html[data-theme="dark"] .app code {
  padding:3px 7px;
  border:1px solid color-mix(in srgb,var(--vm-primary) 65%,var(--vm-border));
  border-radius:6px;
  color:#d9fffb;
  background:#123a41;
  box-shadow:inset 0 0 0 1px rgba(120,231,223,.08);
  font-weight:750;
}
#manualCancel,#transferCancel,#privacyAdminCancel,.ov-close { color:var(--vm-text) !important; background:var(--vm-surface-2) !important; }
.pdf-popup { border-color:var(--vm-border); color:var(--vm-text); background:var(--vm-surface); }
.pdf-popup-inhalt { background:var(--vm-canvas); }

/* Tarifoptimierer: reale Funktionen, dieselben Karten/Farben wie das Mock-up. */
#toptBox {
  --topt-navy:#0b3c46;
  --topt-navy-2:#087985;
  --topt-gold:var(--vm-accent);
  --topt-gold-hell:color-mix(in srgb,var(--vm-accent) 18%,var(--vm-surface));
  --topt-gruen:var(--vm-primary);
  --topt-gruen-dunkel:var(--vm-primary-strong);
  --topt-rot:var(--vm-danger);
  --topt-alt:color-mix(in srgb,#b42318 10%,var(--vm-surface));
  --topt-neu:color-mix(in srgb,var(--vm-primary) 12%,var(--vm-surface));
  --topt-linie:var(--vm-border);
  --topt-text-2:var(--vm-muted);
  --topt-shadow:var(--vm-card-shadow);
  /* Abgestufte Flaechen fuer die Veroeffentlichungs-Kacheln (wie bei ropt). */
  --topt-flaeche-2:var(--vm-surface-3);
  --topt-flaeche-3:var(--vm-surface-2);
  --topt-soft:var(--vm-primary-soft);
  --topt-soft-text:var(--vm-primary-strong);
  color:var(--vm-text);
}
#toptBox .topt-subtabs,#toptBox .topt-karte,#toptBox .topt-vertragskarte,#toptBox .topt-editor-bereich,#toptBox .topt-linkbox,#toptBox .topt-summe,#toptBox .topt-paste { border-color:var(--vm-border); color:var(--vm-text); background:var(--vm-surface); }
#toptBox .topt-subtabs button { color:var(--vm-text); }
#toptBox .topt-subtabs button:hover,#toptBox .topt-btn.grau:hover:not(:disabled) { background:var(--vm-surface-2); }
#toptBox .topt-subtabs button.an { color:#fff; background:linear-gradient(135deg,#0b3c46,#087985); }
#toptBox .topt-karte h3,#toptBox .topt-editor-bereich-kopf b { color:var(--vm-text); }
#toptBox .topt-hinweis,#toptBox .topt-spalten-hinweis { color:var(--vm-muted); }
#toptBox .topt-tabelle { border-color:var(--vm-border); color:var(--vm-text); background:var(--vm-surface); }
#toptBox .topt-tabelle th { border-color:var(--vm-border); color:var(--vm-text); background:var(--vm-surface-2); }
#toptBox .topt-tabelle td { border-color:var(--vm-border); }
#toptBox .topt-tabelle tr:hover td { background-color:var(--vm-surface-2); }
#toptBox .topt-rabatt-fahrzeug { border-color:var(--vm-border); background:var(--vm-surface); }
#toptBox .topt-rabatt-stammdaten { background:var(--vm-surface-2); }
#toptBox .topt-rabatt-zusatz { border-color:var(--vm-border); }
#toptBox .topt-btn.grau { border-color:var(--vm-border); color:var(--vm-text); background:var(--vm-surface-2); }
#toptBox .topt-speicherleiste { border-color:var(--vm-border); color:var(--vm-text); background:color-mix(in srgb,var(--vm-accent) 13%,var(--vm-surface)); }
#toptBox .topt-alt-feld input { border-color:color-mix(in srgb,#b42318 40%,var(--vm-border)) !important; background:var(--topt-alt) !important; }
#toptBox .topt-neu-feld input,#toptBox .topt-final-feld input { border-color:color-mix(in srgb,var(--vm-primary) 50%,var(--vm-border)) !important; background:var(--topt-neu) !important; }
#toptBox .topt-vergleichstabelle th:nth-child(3) { color:color-mix(in srgb,#ff8d84 75%,var(--vm-text)); background:color-mix(in srgb,#b42318 22%,var(--vm-surface)); }
#toptBox .topt-vergleichstabelle th:nth-child(4) { color:var(--vm-primary-strong); background:color-mix(in srgb,var(--vm-primary) 22%,var(--vm-surface)); }
#toptBox .topt-vergleichstabelle td:nth-child(3) { background:var(--topt-alt); }
#toptBox .topt-vergleichstabelle td:nth-child(4) { color:var(--vm-primary-strong); background:var(--topt-neu); }
/* Produkt-Steckbrief: nur eine Wertspalte, Spalte 3 ist der neue Wert - nie rot einfaerben. */
#toptBox .topt-vergleichstabelle.topt-nur-neu th:nth-child(3) { color:var(--vm-primary-strong); background:color-mix(in srgb,var(--vm-primary) 22%,var(--vm-surface)); }
#toptBox .topt-vergleichstabelle.topt-nur-neu td:nth-child(3) { color:var(--vm-primary-strong); background:var(--topt-neu); }
#toptBox .topt-fallliste tr.topt-zeile-fertig td { background:var(--topt-neu); color:var(--vm-text); }
#toptBox .topt-btn-fertig[disabled] { color:var(--vm-primary-strong); background:var(--topt-neu); }
#toptBox .topt-st-archiviert { color:var(--vm-text); background:var(--vm-surface-2); }
#toptBox .topt-karte,#toptBox .topt-editor { max-width:100%; overflow-x:auto; }
#toptBox .topt-feldz.topt-beitragskopf {
  grid-template-columns:220px 300px repeat(3,180px) !important;
  justify-content:start;
}
#toptBox .topt-beitragskopf .f,
#toptBox .topt-beitragskopf .f.klein { width:100%; min-width:0; }
html[data-theme="dark"] #toptBox .topt-btn:not(.grau):not(.rot) { color:#032326; }

/* Rentenoptimierung: exakt dieselbe Manager-Huelle wie Tarifoptimierung. */
#roptBox {
  --ropt-navy:#0b3c46;
  --ropt-navy-2:#087985;
  --ropt-gold:var(--vm-accent);
  --ropt-gruen:var(--vm-primary);
  --ropt-gruen-dunkel:var(--vm-primary-strong);
  --ropt-rot:var(--vm-danger);
  --ropt-linie:var(--vm-border);
  --ropt-text-2:var(--vm-muted);
  --ropt-shadow:var(--vm-card-shadow);
  --ropt-flaeche-2:var(--vm-surface-3);
  --ropt-flaeche-3:var(--vm-surface-2);
  --ropt-soft:var(--vm-primary-soft);
  --ropt-soft-text:var(--vm-primary-strong);
  color:var(--vm-text);
}
#roptBox .ropt-subtabs,#roptBox .ropt-karte { border-color:var(--vm-border); color:var(--vm-text); background:var(--vm-surface); }
#roptBox .ropt-subtabs button { color:var(--vm-text); }
#roptBox .ropt-subtabs button:hover,#roptBox .ropt-btn.grau:hover:not(:disabled) { background:var(--vm-surface-2); }
#roptBox .ropt-subtabs button.an { color:#fff; background:linear-gradient(135deg,#0b3c46,#087985); }
#roptBox .ropt-karte h3 { color:var(--vm-text); }
#roptBox .ropt-hinweis { color:var(--vm-muted); }
#roptBox .ropt-tabelle { border-color:var(--vm-border); color:var(--vm-text); background:var(--vm-surface); }
#roptBox .ropt-tabelle th { border-color:var(--vm-border); color:var(--vm-text); background:var(--vm-surface-2); }
#roptBox .ropt-tabelle td { border-color:var(--vm-border); }
#roptBox .ropt-tabelle tr:hover td { background-color:var(--vm-surface-2); }
#roptBox .ropt-btn.grau { border-color:var(--vm-border); color:var(--vm-text); background:var(--vm-surface-2); }
#roptBox .ropt-fallkopf { background:linear-gradient(135deg,var(--vm-surface),color-mix(in srgb,var(--vm-primary) 7%,var(--vm-surface))); }
#roptBox .ropt-vorschau { border-color:color-mix(in srgb,var(--vm-primary) 42%,var(--vm-border)); background:linear-gradient(180deg,color-mix(in srgb,var(--vm-primary) 7%,var(--vm-surface)),var(--vm-surface) 120px); }
#roptBox .ropt-feldz > .feld label,#roptBox .ropt-karte > .feld label,#roptBox .ropt-hint { color:var(--vm-muted); }
#roptBox .ropt-link { color:var(--vm-primary-strong); }
#roptBox .ropt-link:hover { color:var(--vm-primary); }
#roptBox .ropt-fehler { color:var(--vm-danger); }
#roptBox .ropt-fehlerliste { border-color:color-mix(in srgb,var(--vm-danger) 45%,var(--vm-border)); border-left-color:var(--vm-danger); color:var(--vm-danger); background:color-mix(in srgb,var(--vm-danger) 10%,var(--vm-surface)); }
#roptBox .ropt-st-archiviert { color:var(--vm-text); background:var(--vm-surface-2); }
#roptBox .ropt-kk-zeile { border-color:var(--vm-border); }
#roptBox .ropt-karte { max-width:100%; overflow-x:auto; }
#roptBox .ropt-speicherleiste { border-color:var(--vm-border); color:var(--vm-text); background:color-mix(in srgb,var(--vm-accent) 13%,var(--vm-surface)); }
html[data-theme="dark"] #roptBox .ropt-btn:not(.grau):not(.rot) { color:#032326; }

/* Einkommenssicherung: Fall-Liste exakt wie die Analyseliste der Renten-
   optimierung einfaerben (gleiche Regeln wie #roptBox .ropt-tabelle oben).
   Ohne das behielt die Tabelle ihre modul-eigenen Farben und fiel aus dem
   Manager-Look heraus. */
#einkBox .eink-tabelle { border-color:var(--vm-border); color:var(--vm-text); background:var(--vm-surface); }
#einkBox .eink-tabelle th { border-color:var(--vm-border); color:var(--vm-text); background:var(--vm-surface-2); }
#einkBox .eink-tabelle td { border-color:var(--vm-border); }
#einkBox .eink-tabelle tr:hover td { background-color:var(--vm-surface-2); }
/* Die Aktionsknoepfe bleiben immer einzeilig - sonst stapeln sie sich, sobald
   die Spalte auf ihren Inhalt schrumpft (width:1%). */
#einkBox .eink-fallliste .eink-aktionen { flex-wrap:nowrap; }

/* Kuendigungsmanager: gleiche Regel wie #einkBox/#roptBox oben - ohne das
   blieb die Tabelle bei Theme-Farben (dark mode) fest auf ihren modul-
   eigenen Konstanten haengen statt sich wie die uebrigen Module anzupassen. */
#kuendBox .kuend-tabelle { border-color:var(--vm-border); color:var(--vm-text); background:var(--vm-surface); }
#kuendBox .kuend-tabelle th { border-color:var(--vm-border); color:var(--vm-text); background:var(--vm-surface-2); }
#kuendBox .kuend-tabelle td { border-color:var(--vm-border); }
#kuendBox .kuend-tabelle tr:hover td { background-color:var(--vm-surface-2); }

@media (max-width:1120px) {
  header.kopf.topbar { gap:10px; padding-inline:18px; }
  .profile-card { width:174px; }
  .top-phone small { display:none; }
  .action-label { display:none; }
  .manager-dashboard-grid { grid-template-columns:1fr; }
  #toptBox .topt-feldz.topt-beitragskopf { grid-template-columns:repeat(2,minmax(220px,360px)) !important; }
}

@media (max-width:820px) {
  .manual-box { width:calc(100vw - 20px); max-height:calc(100dvh - 20px) !important; padding:16px; }
  .manual-aktionen { bottom:-16px; margin:12px -16px -16px; padding:12px 16px 16px; }
  .app { width:100%; min-height:100dvh; margin:0; display:block; overflow:visible; border:0; border-radius:0; box-shadow:none; }
  .main-tab-hero-action[data-ziel="deasBox"],
  #deasBox { display:none !important; }
  header.kopf.topbar {
    position:sticky;
    top:0;
    z-index:70;
    min-height:64px;
    display:flex;
    padding:max(10px,env(safe-area-inset-top)) 16px 10px;
    background:var(--vm-shell);
  }
  .manager-brand { padding:5px 11px; }
  .manager-brand .logo { height:32px; }
  .top-actions { margin-left:auto; }
  .top-phone { height:44px; padding:4px 10px; }
  .top-phone .top-phone-nr { font-size:17px; }
  .profile-card { width:44px; height:44px; min-height:44px; grid-template-columns:34px; padding:4px; }
  .profile-copy,.profile-chevron { display:none; }
  .profile-avatar { width:34px; height:34px; }
  .profile-menu { position:fixed; top:66px; right:12px; }

  .navbar {
    position:fixed;
    z-index:80;
    left:10px;
    right:10px;
    bottom:max(10px,env(safe-area-inset-bottom));
    width:auto;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px;
    padding:6px;
    border:1px solid var(--vm-border);
    border-radius:18px;
    background:color-mix(in srgb,var(--vm-surface) 94%,transparent);
    box-shadow:0 12px 36px rgba(0,0,0,.22);
    backdrop-filter:blur(18px);
  }
  /* Unten am Handy traegt JEDER Reiter seinen Namen - dort ist Hoehe da und
     Ueberfahren gibt es nicht. Variante B gilt nur auf dem grossen Schirm. */
  .navbar .nav-btn { width:100%; height:auto; min-width:0; min-height:54px; display:flex !important; flex-direction:column; justify-content:center; gap:3px; overflow:hidden; padding:5px 1px; border-radius:13px; color:var(--vm-muted); text-align:center; }
  .navbar .nav-btn svg { width:21px; height:21px; }
  .navbar .nav-btn span:not(.nav-count) { display:block; width:100%; max-width:100%; overflow:hidden; font-size:10px !important; font-weight:750; line-height:1.15; letter-spacing:-.025em; text-overflow:clip; white-space:nowrap; }
  .navbar .nav-btn.an { width:100%; gap:3px; padding:5px 1px; color:var(--vm-primary-strong); border-color:transparent; background:var(--vm-primary-soft); }
  .navbar .nav-btn[data-label]::after { content:none; }
  .nav-count { display:none; }

  .app > main { padding:0 16px calc(110px + env(safe-area-inset-bottom)); }
  #uebersichtBox,#listeBox,#detailBox,#kundenBox,#toptBox,#roptBox,#einkBox,#rechenwerteBox,#kuendBox,#kalenderBox,#usersBox { margin-top:12px; }
  /* Der Kunden-Link wird gerade unterwegs gebraucht (schnell verschicken).
     Am Handy steht er deshalb unter der Ueberschrift statt daneben. */
  .main-tab-hero-with-link { align-items:stretch; flex-direction:column; justify-content:center; gap:12px; }
  /* Dritte Spalte breit genug fuer den Kopierknopf, sonst wird er am Rand abgeschnitten. */
  .mein-link-bar { width:100%; height:auto; min-height:54px; margin:0; grid-template-columns:22px minmax(0,1fr) 42px; }
  .mein-link-bar .mll-copy { width:42px; min-width:42px; height:42px; }

  .main-tab-hero { height:auto; min-height:68px; margin-bottom:14px; padding:16px 18px; border-radius:18px; }
  .main-tab-hero h2 { font-size:24px; }
  .main-tab-hero-with-actions { align-items:stretch; flex-direction:column; gap:13px; }
  .main-tab-hero-actions { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0; }
  .main-tab-hero-action { width:100%; min-width:0; min-height:42px; padding:9px 10px; font-size:12px; white-space:normal; }
  .kdb-import-feedback { margin:0 0 14px; }
  .kdb-setup-overlay,.profile-overlay { padding:12px; }
  .kdb-setup-dialog,.profile-dialog { width:100%; max-height:calc(100dvh - 24px); border-radius:20px; }
  .kdb-setup-dialog .deas-dialog-kopf,.profile-dialog .deas-dialog-kopf { padding:17px 18px 14px; }
  .kdb-setup-dialog .deas-dialog-kopf h2,.profile-dialog .deas-dialog-kopf h2 { font-size:22px; }
  .kdb-setup-dialog .deas-dialog-inhalt,.profile-dialog-inhalt { grid-template-columns:1fr; max-height:calc(100dvh - 152px); padding:12px; }
  .profile-privacy-panel,.profile-password-panel { grid-column:auto; }
  .profile-field-grid,.profile-password-grid { grid-template-columns:1fr; gap:0; }
  .profile-field-wide { grid-column:auto; }
  .profile-save-action { width:100%; min-width:0; }
  .profile-photo-body { flex-direction:column; }
  .presentation-code-grid { grid-template-columns:1fr; gap:0; }
  .manager-actions { display:grid; grid-template-columns:1fr; margin-inline:0; padding:8px; }
  .manager-action { min-width:0; padding-inline:10px; font-size:13px; }
  .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-inline:0; }
  .stat-card { min-height:132px; padding:15px; }
  .stat-icon { width:32px; height:32px; margin-bottom:12px; }
  .stat-card strong { font-size:24px; }
  .manager-dashboard-grid { grid-template-columns:1fr; margin-inline:0; }
  .manager-list-card,.manager-activity-card { padding:16px; border-radius:18px; }
  .manager-list-head { align-items:flex-start; flex-direction:column; }
  .status-filter-row { width:100%; display:grid; grid-template-columns:1fr 1fr 1.18fr; gap:6px; }
  .status-filter,.status-filter-wide { width:100%; min-width:0; height:34px; min-height:34px; padding-inline:8px; }

  .liste-item { grid-template-columns:42px minmax(0,1fr) 20px; min-height:76px; }
  .case-avatar { grid-column:1; grid-row:1 / span 3; }
  .liste-item .haupt { grid-column:2; grid-row:1; }
  .case-vehicle { grid-column:2; grid-row:2; }
  .badge { width:172px; min-width:172px; grid-column:2; grid-row:3; justify-self:start; }
  .kebab { grid-column:3; grid-row:1 / span 3; }
  .liste-item .name,.case-vehicle strong,.liste-item .meta,.case-vehicle span { white-space:normal; overflow-wrap:anywhere; }
  .activity-item { min-height:76px; }
  .app > main > section:not(#uebersichtBox):not(#listeBox):not(#kundenBox):not(#toptBox):not(#roptBox):not(#einkBox):not(#kuendBox):not(#kalenderBox) { padding:16px; border-radius:18px; }
  .det-zeile { flex-direction:column; gap:3px; }
  .det-zeile .l { flex-basis:auto; }
  .detail-topbar,.detail-action-grid,.detail-data-grid { grid-template-columns:1fr; }
  #detailBox #btnDeas,#detailBox #btnDelete { width:100% !important; min-width:0; }
  #detailBox #btnDelete { margin-top:16px !important; }
  .kdb-felder { grid-template-columns:1fr; }

  #toptBox .topt-vergleichstabelle tr:not(:first-child) { border-color:var(--vm-border); background:var(--vm-surface); }
  #toptBox .topt-feldz.topt-beitragskopf { grid-template-columns:minmax(0,420px) !important; }
  #toptBox .topt-vergleichstabelle td:nth-child(2) { border-color:var(--vm-border); background:var(--vm-surface); }
  #toptBox .topt-vergleichstabelle td:first-child,#toptBox .topt-vergleichstabelle td:last-child { border-color:var(--vm-border); background:var(--vm-surface-2); }
  #toptBox .topt-fallliste,#toptBox .topt-vorlagenliste { display:block; width:100%; min-width:0; border:0; background:transparent; }
  #toptBox .topt-fallliste tbody,#toptBox .topt-vorlagenliste tbody { display:grid; gap:10px; }
  #toptBox .topt-fallliste tr:first-child,#toptBox .topt-vorlagenliste tr:first-child { display:none; }
  #toptBox .topt-fallliste tr:not(:first-child),#toptBox .topt-vorlagenliste tr:not(:first-child) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:hidden; border:1px solid var(--vm-border); border-radius:13px; background:var(--vm-surface-3); }
  #toptBox .topt-fallliste td,#toptBox .topt-vorlagenliste td { display:block; width:auto; min-width:0; padding:10px 12px; border:0; overflow-wrap:anywhere; }
  #toptBox .topt-fallliste td::before,#toptBox .topt-vorlagenliste td::before { display:block; margin-bottom:3px; color:var(--vm-muted); font-size:9px; font-weight:850; letter-spacing:.07em; text-transform:uppercase; }
  #toptBox .topt-fallliste td:nth-child(1),#toptBox .topt-fallliste td:nth-child(6),#toptBox .topt-vorlagenliste td:nth-child(3),#toptBox .topt-vorlagenliste td:nth-child(4),#toptBox .topt-vorlagenliste td:nth-child(7) { grid-column:1 / -1; }
  #toptBox .topt-fallliste td:nth-child(1)::before { content:"Kunde"; }
  #toptBox .topt-fallliste td:nth-child(2)::before { content:"Art"; }
  #toptBox .topt-fallliste td:nth-child(3)::before { content:"Status"; }
  #toptBox .topt-fallliste td:nth-child(4)::before { content:"Verträge"; }
  #toptBox .topt-fallliste td:nth-child(5)::before { content:"Geändert"; }
  #toptBox .topt-fallliste td:nth-child(6),#toptBox .topt-vorlagenliste td:nth-child(7) { display:flex; flex-wrap:wrap; gap:6px; border-top:1px solid var(--vm-border); white-space:normal !important; }
  #toptBox .topt-vorlagenliste td:nth-child(1)::before { content:"Sparte"; }
  #toptBox .topt-vorlagenliste td:nth-child(2)::before { content:"Typ"; }
  #toptBox .topt-vorlagenliste td:nth-child(3)::before { content:"Alter Tarif"; }
  #toptBox .topt-vorlagenliste td:nth-child(4)::before { content:"Neuer Tarif / Produkt"; }
  #toptBox .topt-vorlagenliste td:nth-child(5)::before { content:"Version"; }
  #toptBox .topt-vorlagenliste td:nth-child(6)::before { content:"Status"; }

  #roptBox .ropt-fallliste,#roptBox .ropt-produktliste { display:block; width:100%; min-width:0; border:0; background:transparent; }
  #roptBox .ropt-fallliste tbody,#roptBox .ropt-produktliste tbody { display:grid; gap:10px; }
  #roptBox .ropt-fallliste tr:first-child,#roptBox .ropt-produktliste tr:first-child { display:none; }
  #roptBox .ropt-fallliste tr:not(:first-child),#roptBox .ropt-produktliste tr:not(:first-child) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:hidden; border:1px solid var(--vm-border); border-radius:13px; background:var(--vm-surface-3); }
  #roptBox .ropt-fallliste td,#roptBox .ropt-produktliste td { display:block; width:auto; min-width:0; padding:10px 12px; border:0; overflow-wrap:anywhere; }
  #roptBox .ropt-fallliste td::before,#roptBox .ropt-produktliste td::before { display:block; margin-bottom:3px; color:var(--vm-muted); font-size:9px; font-weight:850; letter-spacing:.07em; text-transform:uppercase; }
  #roptBox .ropt-fallliste td:nth-child(1),#roptBox .ropt-fallliste td:nth-child(5),#roptBox .ropt-produktliste td:nth-child(1),#roptBox .ropt-produktliste td:nth-child(3) { grid-column:1 / -1; }
  #roptBox .ropt-fallliste td:nth-child(1)::before { content:"Kunde"; }
  #roptBox .ropt-fallliste td:nth-child(2)::before { content:"Status"; }
  #roptBox .ropt-fallliste td:nth-child(3)::before { content:"Standmitteilung"; }
  #roptBox .ropt-fallliste td:nth-child(4)::before { content:"Geändert"; }
  #roptBox .ropt-produktliste td:nth-child(1)::before { content:"Produkt"; }
  #roptBox .ropt-produktliste td:nth-child(2)::before { content:"Stand"; }
  #roptBox .ropt-fallliste td:nth-child(5),#roptBox .ropt-produktliste td:nth-child(3) { display:flex; flex-wrap:wrap; gap:6px; border-top:1px solid var(--vm-border); white-space:normal !important; }

  /* eink-fallliste bekam bisher KEINEN eigenen Karten-Umbau (anders als die
     Geschwister topt-fallliste/ropt-fallliste oben). Der generische Umbau aus
     mobile.css griff zwar (thead wird versteckt, Zeilen werden zu Kacheln),
     aber ohne data-spalte-Attribute im Markup blieben Status, Geaendert und
     die Aktionsknoepfe unbeschriftete, halbbreite Werte. Gleiches Muster wie
     bei topt/ropt - eink nutzt aber echtes thead/tbody statt "erste Zeile". */
  #einkBox .eink-fallliste { display:block; width:100%; min-width:0; border:0; background:transparent; }
  #einkBox .eink-fallliste thead { display:none; }
  #einkBox .eink-fallliste tbody { display:grid; gap:10px; }
  #einkBox .eink-fallliste tbody tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:hidden; border:1px solid var(--vm-border); border-radius:13px; background:var(--vm-surface-3); }
  #einkBox .eink-fallliste td { display:block; width:auto; min-width:0; padding:10px 12px; border:0; overflow-wrap:anywhere; }
  #einkBox .eink-fallliste td::before { display:block; margin-bottom:3px; color:var(--vm-muted); font-size:9px; font-weight:850; letter-spacing:.07em; text-transform:uppercase; }
  #einkBox .eink-fallliste td:nth-child(1),#einkBox .eink-fallliste td:nth-child(4) { grid-column:1 / -1; }
  #einkBox .eink-fallliste td:nth-child(1)::before { content:"Kunde"; }
  #einkBox .eink-fallliste td:nth-child(2)::before { content:"Status"; }
  #einkBox .eink-fallliste td:nth-child(3)::before { content:"Geändert"; }
  #einkBox .eink-fallliste td:nth-child(4) { display:flex; flex-wrap:wrap; gap:6px; border-top:1px solid var(--vm-border); white-space:normal !important; }

  /* .kuend-tabelle wird an drei Stellen wiederverwendet (Fallliste, Gesellschafts-
     abgleich, Vorlagenliste) - deshalb hier bewusst nur die eine Zelle adressiert,
     die es in den anderen beiden Tabellen gar nicht gibt, statt die ganze Klasse
     umzubauen und die anderen zwei Tabellen ungewollt mitzuveraendern. */
  #kuendBox td.kuend-fallliste-aktionen { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:6px; border-top:1px solid var(--vm-border); white-space:normal !important; }
}

@media (max-width:520px) {
  .manual-mailzeile,.manual-grid { grid-template-columns:1fr; }
  .manual-parse { width:100%; }
  .main-tab-hero-actions { grid-template-columns:1fr; }
  .manager-brand { padding:4px 9px; }
  .manager-brand .logo { height:28px; }
  .profile-menu-wrap { display:none; }
  .manager-actions { grid-template-columns:1fr; }
  .manager-action { width:100%; min-height:42px; white-space:normal; }
  .status-filter-row { grid-template-columns:1fr 1fr 1.2fr; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; }
}


/* ---------------------------------------------------------------------------
   Admin: im Konto eines Mitarbeiters arbeiten.
   Die Auswahl sitzt im Profilmenue oben rechts; sichtbar bleibt nur ein
   schmaler Streifen, solange ein fremdes Konto aktiv ist.
--------------------------------------------------------------------------- */
/* Beschriftung ueber der Liste statt daneben: Kontonamen sind lang, so bleibt
   dem Auswahlfeld die volle Menuebreite. */
.menu-ansicht {
  display: flex; flex-direction: column; gap: 5px;
  margin: 6px 0; padding: 9px 10px 10px;
  border-radius: 10px;
  background: var(--vm-surface-3);
}
.menu-ansicht label {
  color: var(--vm-muted); font-size: 10px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
}
.menu-ansicht select {
  width: 100%; min-width: 0; min-height: 36px; padding: 7px 9px;
  border: 1px solid var(--vm-border); border-radius: 8px;
  background: var(--vm-surface); color: var(--vm-text); font: inherit; font-size: 13px;
}

.arbeitet-als {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 7px 16px;
  background: color-mix(in srgb, var(--vm-accent) 20%, var(--vm-surface));
  border-bottom: 1px solid var(--vm-accent);
  color: var(--vm-text); font-size: 13px; font-weight: 700;
}
.arbeitet-als-hinweis { overflow-wrap: anywhere; }
.arbeitet-als button {
  padding: 5px 11px; border: 1px solid var(--vm-border); border-radius: 8px;
  background: var(--vm-surface); color: var(--vm-text);
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.arbeitet-als button:hover { background: var(--vm-surface-2); }

/* ---------------------------------------------------------------------------
   Eigener E-Mail-Versand im Profil: Knopfzeile + farbige Rueckmeldung.
--------------------------------------------------------------------------- */
.smtp-aktionen { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.profile-panel .btn-grau {
  min-height: 44px; padding: 10px 14px; font-size: 14px; font-weight: 700;
  border: 1px solid var(--vm-border); border-radius: 10px;
  background: var(--vm-surface-2); color: var(--vm-text); cursor: pointer;
}
.profile-panel .btn-grau:hover { background: var(--vm-surface-3); }
.profile-panel .btn-grau[disabled] { opacity: .6; cursor: progress; }
.profile-feedback.gut  { color: var(--vm-primary-strong); font-weight: 700; }
.profile-feedback.fehl { color: var(--vm-danger); font-weight: 700; }
.profile-feedback .detail {
  display: block; margin-top: 4px; font-weight: 400; font-size: 12px;
  color: var(--vm-muted); overflow-wrap: anywhere;
}

/* ===========================================================================
   Fallliste-Kopfknoepfe: "Aktuelle (n)" / "Archiv (n)" / "+ Neu..." / "Öffnen".
   Referenz-Optik ist Einkommenssicherung (#einkBox .eink-btn) - deren Farben/
   Groessen sind hier bewusst als LITERALE Werte dupliziert (nicht per var(),
   die eink-Variablen sind an #einkBox gescoped und wuerden ausserhalb nicht
   aufloesen), damit Kuendigungsmanager/Tarifoptimierung/Rentenoptimierung
   exakt dieselbe Optik zeigen, unabhaengig von der sonstigen Modulfarbe.
   Nur auf diese drei Kopfknoepfe + den Öffnen-Knopf in der Aktionen-Spalte
   anwenden, nicht modulweit. */
.vm-fallliste-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px;
  padding: 8px 15px; border: 1px solid #087985; border-radius: 10px; color: #fff;
  background: #055d67; font-weight: 800; font-size: 13px; cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.vm-fallliste-btn:hover { filter: brightness(1.06); }
.vm-fallliste-btn:active { transform: scale(.98); }
.vm-fallliste-btn:disabled { opacity: .5; cursor: not-allowed; }
.vm-fallliste-btn.klein { min-height: 34px; padding: 6px 11px; font-size: 12px; }
.vm-fallliste-btn.grau { color: #172330; border-color: #d7dfdb; background: #fff; }
.vm-fallliste-btn.gold { color: #082d32; border-color: #d5a032; background: linear-gradient(135deg, #f4ce70, #dea735); }
.vm-fallliste-btn.rot { color: #fff; border-color: var(--vm-danger); background: var(--vm-danger); }
.vm-fallliste-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }

/* Kfz-Anträge: gleiche Fallliste-Karte/Tabelle wie topt/ropt, aber direkt mit
   den vm-*-Tokens (kein Mock-up-Farbschema + separater Override wie bei
   topt-tabelle - siehe _claude-memory/project_comodus_css_theming_cleanup.md). */
#listeBox .liste-karte {
  position: relative; min-width: 0; overflow-x: auto;
  margin-bottom: 18px; padding: 22px 24px;
  border: 1px solid var(--vm-border); border-radius: 18px;
  background: var(--vm-surface); box-shadow: var(--vm-card-shadow);
}
#listeBox .liste-karte::before {
  content: ""; position: absolute; left: 20px; right: 20px; top: 0; height: 3px;
  border-radius: 0 0 8px 8px; background: linear-gradient(90deg, var(--vm-primary), transparent 72%); opacity: .8;
}
#listeBox .liste-karte h3 {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  margin: 0 0 14px; color: var(--vm-text); font-size: 21px; line-height: 1.25;
}
#listeBox .liste-tabelle {
  display: table; width: 100%; min-width: 100%; max-width: 100%; margin: 10px 0;
  border: 1px solid var(--vm-border); border-radius: 13px; border-collapse: separate; border-spacing: 0;
  background: var(--vm-surface); color: var(--vm-text); font-size: 14px;
}
#listeBox .liste-tabelle th {
  padding: 10px 11px; border: 0; border-bottom: 1px solid var(--vm-border);
  color: var(--vm-text); background: var(--vm-surface-2);
  text-align: left; font-size: 12px; font-weight: 800; letter-spacing: .015em; white-space: nowrap;
}
#listeBox .liste-tabelle td { padding: 9px 10px; border: 0; border-bottom: 1px solid var(--vm-border); vertical-align: top; }
#listeBox .liste-tabelle th:not(:last-child),
#listeBox .liste-tabelle td:not(:last-child) { border-right: 1px solid var(--vm-border); }
#listeBox .liste-tabelle tr:last-child td { border-bottom: 0; }
#listeBox .liste-tabelle tr:hover td { background-color: var(--vm-surface-2); }
#listeBox .liste-aktionen { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; white-space: nowrap; }

/* Arbeitsbreite: Schieberegler im Profil */
.vm-breite-zeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vm-breite-zeile input[type="range"] { flex: 1; min-width: 180px; accent-color: var(--vm-primary-strong); }
.vm-breite-zeile output {
  min-width: 82px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--vm-primary-strong);
}
.vm-tooltip-zeile { display: block; margin-top: 12px; cursor: pointer; }

/* Info-Popup: Klick-und-Halten auf einem ".vm-info-btn" zeigt diese Box links
   daneben (siehe manager-ui.js). Gilt fuer alle Listen im Manager. */
.vm-info-btn { cursor: pointer; user-select: none; touch-action: manipulation; }
.vm-info-popup {
  position: absolute;
  z-index: 900;
  max-width: 280px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--vm-primary) 30%, var(--vm-border));
  background: var(--vm-surface);
  color: var(--vm-text);
  font-size: 13px;
  line-height: 1.45;
  box-shadow: var(--vm-card-shadow);
  white-space: pre-wrap;
  pointer-events: none;
}
.vm-info-popup::after {
  content: '';
  position: absolute;
  top: 50%; right: -6px;
  width: 12px; height: 12px;
  margin-top: -6px;
  background: inherit;
  border-right: inherit; border-bottom: inherit;
  transform: rotate(-45deg);
}
.vm-info-popup-rechts::after { right: auto; left: -6px; transform: rotate(135deg); }

/* Hover-Tooltip (dunkle Box, wie in der Navi-Leiste): gilt fuer jedes Element
   mit data-label, ueberall im Manager (siehe manager-ui.js). An body
   angehaengt, damit overflow:hidden/auto einer Tabelle/Karte nie die Box
   an der Kante abschneidet. */
.vm-tip {
  position: absolute;
  z-index: 900;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--vm-text);
  color: var(--vm-surface);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(3px);
  transition: opacity .13s ease, transform .13s ease;
}
.vm-tip.an { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .vm-tip { transition: none; } }

/* ===========================================================================
   Toast: zentrale Rueckmeldung in der Bildschirmmitte (window.vmToast).
   Optik aus der Einkommenssicherung uebernommen, jetzt global.
   =========================================================================== */
.vm-toast {
  position: fixed; z-index: 9000; left: 50%; top: 50%;
  min-width: 240px; max-width: min(90vw, 560px); padding: 22px 40px;
  border-radius: 16px; color: #fff; background: rgba(6, 54, 60, .95);
  text-align: center; font-weight: 900; font-size: 30px; letter-spacing: .01em;
  box-shadow: 0 18px 48px rgba(6, 32, 36, .35);
  transform: translate(-50%, -50%) scale(.92); opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.vm-toast.show { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.vm-toast-fehler { background: rgba(140, 32, 24, .95); }

@media (max-width: 560px) {
  .vm-toast { font-size: 22px; padding: 18px 26px; min-width: 180px; }
}
@media (prefers-reduced-motion: reduce) { .vm-toast { transition: none; } }

/* ===========================================================================
   Bestaetigungsdialog (window.vmBestaetigen / vmLoeschenFragen).
   Ersetzt das graue confirm() des Browsers, Optik wie im Studio.
   =========================================================================== */
.vm-dialog {
  border: 0; padding: 0; border-radius: 18px; max-width: min(92vw, 460px);
  background: var(--vm-surface); color: var(--vm-text);
  box-shadow: 0 30px 80px rgba(6, 32, 36, .38);
}
.vm-dialog::backdrop { background: rgba(6, 32, 36, .48); }
.vm-dialog-kopf {
  padding: 20px 26px 0;
}
.vm-dialog-kopf h4 {
  margin: 0; font-size: 21px; font-weight: 800; line-height: 1.3; color: var(--vm-text);
}
.vm-dialog-inhalt { padding: 10px 26px 22px; }
.vm-dialog-inhalt p {
  margin: 0 0 20px; font-size: 15px; line-height: 1.55; color: var(--vm-muted);
  /* Viele Meldungen (Fehlerlisten, Passwort-Hinweise) enthalten \n - frueher
     zeigte das native alert()/confirm() das automatisch untereinander. */
  white-space: pre-line;
}
/* Eingabefeld im Dialog (vmTextFragen), z.B. Anhang umbenennen. */
.vm-dialog-feld {
  width: 100%; min-height: 46px; margin: 0 0 20px; padding: 11px 13px;
  border: 1px solid var(--vm-border); border-radius: 11px;
  background: var(--vm-surface-3); color: var(--vm-text); font: inherit; font-size: 15px;
}
.vm-dialog-feld:focus {
  outline: 3px solid color-mix(in srgb, var(--vm-primary) 22%, transparent);
  border-color: var(--vm-primary);
}
.vm-dialog-aktionen { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.vm-dialog-btn {
  border: 1px solid var(--vm-border); background: var(--vm-surface-3); color: var(--vm-text);
  border-radius: 11px; padding: 11px 20px; font-size: 15px; font-weight: 700;
  cursor: pointer; transition: filter .12s ease;
}
.vm-dialog-btn:hover { filter: brightness(.96); }
.vm-dialog-btn-prim { border-color: transparent; background: var(--vm-primary); color: #fff; }
.vm-dialog-gefahr .vm-dialog-btn-prim { background: var(--vm-danger); }
.vm-dialog-btn:focus-visible { outline: 3px solid var(--vm-primary-soft); outline-offset: 2px; }

@media (max-width: 480px) {
  .vm-dialog-aktionen { flex-direction: column-reverse; }
  .vm-dialog-btn { width: 100%; }
}

/* ===========================================================================
   Kundenkatalog als Vertriebs-Cockpit
   Hero-Kennzahl, KPI-Kacheln, Chancen-Modus, Filterzeile, Kundenliste im
   Manager-Tabellenlayout (.kdb-tabelle) und Slide-over-Kurzprofil.
   =========================================================================== */

/* Das geschlossene Slide-over steht per translateX rechts ausserhalb des
   Viewports. clip statt hidden, damit position:sticky weiter funktioniert. */
html, body { overflow-x: clip; }

.kdb-hero-titel { position: relative; z-index: 1; min-width: 0; }
/* Heller Text auf dem Petrol-Verlauf. Der Selektor braucht die ID, weil weiter
   oben "#kundenBox p" pauschal und mit !important auf --vm-muted steht. */
#kundenBox .kdb-hero-meta { margin: 4px 0 0; color: rgba(233,251,250,.86) !important; font-size: 13.5px; }

/* --- Reiter als weisse Menuebox unter der Ueberschrift, gleiche Bauart wie
   .ropt-subtabs / .topt-subtabs in den anderen Modulen. --- */
.kdb-subtabs {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 7px;
  border: 1px solid var(--vm-border); border-radius: 16px;
  background: var(--vm-surface); box-shadow: 0 7px 22px rgba(8,31,58,.06);
}
.kdb-subtabs button {
  min-height: 42px; padding: 9px 18px; border: 0; border-radius: 11px;
  color: var(--vm-text); background: transparent; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 750; transition: .16s ease;
}
.kdb-subtabs button:hover { background: var(--vm-surface-2); }
.kdb-subtabs button.an {
  color: #fff; background: linear-gradient(135deg,#0b3c46,#087985);
  box-shadow: 0 7px 18px rgba(8,31,58,.18);
}

/* Zahl neben dem Chancen-Reiter */
.kdb-tab-badge {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 99px;
  color: var(--vm-primary-strong); background: var(--vm-primary-soft); font-size: 11px; font-weight: 800;
}
.kdb-subtabs button.an .kdb-tab-badge { color: #0b3c46; background: #fff; }

/* --- Filterzeile: Suche, Sparte, Merkmal, Betreuer, Sortierung in einer Reihe.
   Flex statt Grid, damit der Betreuer-Filter (nur Admin) keine Luecke hinterlaesst. --- */
.kdb-filterzeile { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 10px; }
.kdb-filterzeile > * { flex: 1 1 140px; min-width: 0; }
.kdb-filterzeile > input { flex: 2 1 220px; }
.kdb-filterzeile > input,
.kdb-filterzeile > select,
.kdb-filterzeile .kdb-mf-btn {
  width: 100%; min-height: 42px; padding: 9px 12px;
  border: 1px solid var(--vm-border); border-radius: 11px;
  background: var(--vm-surface); color: var(--vm-text); font: inherit; font-size: 13.5px;
}
.kdb-filterzeile .kdb-mf { position: relative; }
.kdb-filterzeile .kdb-mf-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; text-align: left; }

/* Aktive Filter als Chips + Ruecksetzen */
.kdb-filterchips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; font-size: 12.5px; }
.kdb-filterchip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px;
  color: var(--vm-primary-strong); background: var(--vm-primary-soft); font-weight: 650;
}
.kdb-filterchip button { padding: 0; border: 0; background: none; color: inherit; font: inherit; opacity: .65; cursor: pointer; }
.kdb-filterchip button:hover { opacity: 1; }
.kdb-filterreset { padding: 4px 8px; border: 0; background: none; color: var(--vm-muted); font: inherit; font-size: 12.5px; text-decoration: underline; cursor: pointer; }

/* Trefferzahl links, sekundaere Aktionen rechts ueber der Liste */
.kdb-ergebniszeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.kdb-ergebnis-zahl { color: var(--vm-muted); font-size: 13px; font-weight: 650; }
.kdb-sek-aktionen { display: flex; gap: 8px; flex-wrap: wrap; }
.kdb-sek {
  min-height: 34px; padding: 6px 12px; border: 1px solid var(--vm-border); border-radius: 9px;
  background: var(--vm-surface); color: var(--vm-text); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer;
}
.kdb-sek:hover:not(:disabled) { border-color: var(--vm-primary); color: var(--vm-primary-strong); }
.kdb-sek:disabled { opacity: .55; cursor: default; }

/* --- Kundenliste (Tabellenlayout, Basis siehe .kdb-tabelle weiter oben) --- */
.kdb-fallliste tbody tr { cursor: pointer; }
.kdb-fallliste tbody tr:hover td { background-color: var(--vm-surface-2); }
.kdb-fallliste th:nth-child(1) { width: 24%; }
.kdb-fallliste th:nth-child(2), .kdb-fallliste td:nth-child(2),
.kdb-fallliste th:nth-child(5), .kdb-fallliste td:nth-child(5),
.kdb-fallliste th:last-child, .kdb-fallliste td:last-child { width: 1%; white-space: nowrap; }
/* Ohne Admin-Rechte liefert die API keinen Betreuernamen - Spalte dann weg. */
.kdb-ohne-betreuer th:nth-child(4), .kdb-ohne-betreuer td:nth-child(4) { display: none; }
.kdb-name { font-size: 14.5px; font-weight: 750; letter-spacing: -.01em; white-space: nowrap; }
.kdb-sub { color: var(--vm-muted); font-size: 12px; }
.kdb-nur-mobil { display: none; }
.kdb-vertraege { font-weight: 750; font-variant-numeric: tabular-nums; }
.kdb-betreuer, .kdb-datum { color: var(--vm-muted); font-size: 12.5px; }
.kdb-datum { font-variant-numeric: tabular-nums; }

/* Merkmale dezent, Vertriebschancen deutlich - der Unterschied ist der Kern
   der Ansicht: nicht jedes Merkmal ist ein Beratungsanlass. */
.kdb-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kdb-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 750; white-space: nowrap; }
.kdb-chip-chance { color: #7a5410; background: color-mix(in srgb, var(--vm-accent) 26%, var(--vm-surface)); border: 1px solid color-mix(in srgb, var(--vm-accent) 55%, transparent); }
.kdb-chip-merkmal { color: #00713a; background: #e8f3ec; }
.kdb-chip-mehr { color: var(--vm-muted); background: var(--vm-surface-2); cursor: default; }
:root[data-theme="dark"] .kdb-chip-chance { color: var(--vm-accent); background: color-mix(in srgb, var(--vm-accent) 18%, transparent); }
:root[data-theme="dark"] .kdb-chip-merkmal { color: #7fdcb0; background: #10382a; }

/* Aktionsknopf in der Zeile - Bauart wie .ropt-btn.klein, Farbe aus dem Manager. */
.kdb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; padding: 6px 12px; border: 0; border-radius: 9px;
  color: #fff; background: var(--vm-primary); box-shadow: 0 5px 13px rgba(8,121,133,.16);
  font: inherit; font-size: 12px; font-weight: 750; cursor: pointer;
}
.kdb-btn:hover { filter: brightness(1.06); }
.kdb-mehrladen {
  width: 100%; min-height: 44px; margin-top: 10px; border: 1px solid var(--vm-border); border-radius: 11px;
  background: var(--vm-surface-3); color: var(--vm-primary-strong); font: inherit; font-weight: 650; cursor: pointer;
}

/* --- Chancen-Modus: je Anlass eine Kachel mit Anzahl --- */
.kdb-chancen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.kdb-chancen-karte {
  position: relative; overflow: hidden; width: 100%; padding: 18px 20px;
  border: 1px solid var(--vm-border); border-radius: 18px; background: var(--vm-surface);
  box-shadow: var(--vm-card-shadow); cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.kdb-chancen-karte::before { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--vm-accent); content: ""; }
.kdb-chancen-karte:hover { border-color: var(--vm-primary); }
.kdb-chancen-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.kdb-chancen-karte h4 { margin: 0; font-size: 16px; letter-spacing: -.01em; }
.kdb-chancen-zahl { font-size: 26px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.kdb-chancen-karte p { margin: 5px 0 14px; color: var(--vm-muted) !important; font-size: 13px; }
.kdb-chancen-link { color: var(--vm-primary-strong); font-size: 13px; font-weight: 700; }
.kdb-chancen-hinweis { margin: 14px 0 0; color: var(--vm-muted) !important; font-size: 12.5px; }

/* --- Slide-over: Kurzprofil ohne Seitenwechsel --- */
.kdb-backdrop { position: fixed; inset: 0; z-index: 78; background: rgba(8,40,46,.34); opacity: 0; transition: opacity .18s ease; }
.kdb-backdrop.auf { opacity: 1; }
.kdb-panel {
  position: fixed; z-index: 79; top: 0; right: 0; bottom: 0;
  width: min(480px, 100%); display: flex; flex-direction: column;
  background: var(--vm-surface); box-shadow: var(--vm-shadow);
  transform: translateX(100%); transition: transform .2s ease-out;
}
.kdb-panel.auf { transform: none; }
.kdb-panel-kopf { position: relative; padding: 22px 24px 18px; border-bottom: 1px solid var(--vm-border); color: #fff; background: linear-gradient(120deg,#0b4652,#08757b 78%); }
.kdb-panel-kopf h3 { margin: 0; color: #fff; font-size: 21px; letter-spacing: -.02em; }
.kdb-panel-kopf p { margin: 4px 0 0; color: rgba(233,251,250,.85) !important; font-size: 13px; }
.kdb-panel-zu { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border: 0; border-radius: 9px; background: rgba(255,255,255,.16); color: #fff; font-size: 15px; cursor: pointer; }
.kdb-panel-body { flex: 1; overflow-y: auto; padding: 20px 24px 26px; }
.kdb-panel-abschnitt { margin-bottom: 22px; }
.kdb-panel-abschnitt h5 { margin: 0 0 9px; color: var(--vm-muted); font-size: 11px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.kdb-panel-chance { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; padding: 10px 13px; border: 1px solid color-mix(in srgb, var(--vm-accent) 40%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--vm-accent) 12%, var(--vm-surface)); font-size: 13.5px; font-weight: 650; }
.kdb-panel-vertrag { display: flex; justify-content: space-between; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--vm-border); font-size: 13.5px; }
.kdb-panel-vertrag:last-child { border-bottom: 0; }
.kdb-panel-vertrag span { color: var(--vm-muted) !important; font-size: 12.5px; }
.kdb-panel-btn {
  width: 100%; min-height: 46px; margin-bottom: 9px; border: 1px solid var(--vm-border); border-radius: 12px;
  background: var(--vm-surface-3); color: var(--vm-text); font: inherit; font-size: 14px; font-weight: 650; cursor: pointer;
}
.kdb-panel-btn:hover { border-color: var(--vm-primary); }
.kdb-panel-btn.primaer { border-color: transparent; background: var(--vm-primary); color: #fff; }

/* Tablet: Betreuer und Stand fallen weg, bevor die Tabelle zu eng wird.
   Unter 900px baut mobile.css die Tabelle ohnehin in Karten um. */
@media (max-width: 1100px) {
  .kdb-fallliste th:nth-child(4), .kdb-fallliste td:nth-child(4),
  .kdb-fallliste th:nth-child(5), .kdb-fallliste td:nth-child(5) { display: none; }
}

/* --- Vollstaendige Kundenakte: pflegbarer Kopf + Haushalt ---------------- */
#kdbDetail { width:min(1380px,100%); margin:0 auto; }
.kdb-icon { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.kdb-akte-back {
  min-height:44px; display:inline-flex; align-items:center; gap:8px; margin:4px 0 18px; padding:9px 14px; border:1px solid var(--vm-border);
  border-radius:12px; color:var(--vm-text); background:var(--vm-surface); box-shadow:0 2px 8px rgba(8,45,61,.05); font:inherit; font-weight:750; cursor:pointer;
}
.kdb-akte-back:hover { border-color:var(--vm-primary); color:var(--vm-primary-strong); background:var(--vm-primary-soft); }
.kdb-akte-kopf {
  display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:14px; padding:20px 22px;
  border:1px solid var(--vm-border); border-radius:18px; background:linear-gradient(118deg,var(--vm-surface),var(--vm-primary-soft)); box-shadow:var(--vm-card-shadow);
}
.kdb-akte-kopf .det-kopf { min-width:0; margin:0; }
.kdb-akte-kopf .det-kopf h2 { margin:0; overflow-wrap:anywhere; font-size:clamp(27px,2.4vw,38px); letter-spacing:-.035em; }
.kdb-akte-kopf .meta { margin-top:5px; color:var(--vm-muted); }
.kdb-akte-titelzeile { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.kdb-akte-typ,.kdb-akte-manuell {
  display:inline-flex; align-items:center; min-height:25px; padding:3px 9px; border-radius:99px;
  color:var(--vm-primary-strong); background:var(--vm-primary-soft); font-size:10px; font-weight:850; letter-spacing:.045em; text-transform:uppercase;
}
.kdb-akte-manuell { color:#8a5b08; background:color-mix(in srgb,var(--vm-accent) 22%,var(--vm-surface)); }
.kdb-kopf-edit {
  min-height:46px; flex:none; display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border:1px solid var(--vm-primary); border-radius:12px;
  color:#fff; background:var(--vm-primary); box-shadow:0 7px 18px color-mix(in srgb,var(--vm-primary) 22%,transparent); font:inherit; font-weight:800; cursor:pointer;
}
.kdb-kopf-edit:hover { background:var(--vm-primary-strong); transform:translateY(-1px); }
.kdb-akte-tabs { width:max-content; max-width:100%; display:flex; gap:4px; margin-bottom:16px; padding:4px; border:1px solid var(--vm-border); border-radius:14px; background:var(--vm-surface-2); }
.kdb-akte-tabs button {
  position:relative; min-height:42px; padding:8px 15px; border:0; border-radius:10px; color:var(--vm-muted); background:transparent;
  font:inherit; font-weight:750; cursor:pointer;
}
.kdb-akte-tabs button:hover { color:var(--vm-text); background:color-mix(in srgb,var(--vm-surface) 65%,transparent); }
.kdb-akte-tabs button.an { color:var(--vm-primary-strong); background:var(--vm-surface); box-shadow:0 2px 9px rgba(8,45,61,.09); }
.kdb-akte-tabs button span { min-width:22px; display:inline-grid; place-items:center; margin-left:5px; padding:2px 6px; border-radius:99px; color:var(--vm-primary-strong); background:var(--vm-primary-soft); font-size:10px; }

.kdb-kontaktkarte { display:grid; gap:9px; padding:17px 20px!important; line-height:1.45!important; }
.kdb-kontaktzeile { min-width:0; display:flex; align-items:center; gap:10px; }
.kdb-kontaktzeile > .kdb-icon { width:19px; height:19px; color:var(--vm-primary); }
.kdb-kontaktzeile > span { min-width:0; overflow-wrap:anywhere; }
.kdb-kontaktzeile a { color:var(--vm-primary-strong); font-weight:650; text-decoration-thickness:1px; text-underline-offset:3px; }
.kdb-kontakt-typ,.kdb-kontakt-pnr { color:var(--vm-muted); }
.kdb-kontakt-pnr { padding-left:29px; font-size:12px; font-weight:650; }

.kdb-kopf-editor { overflow:hidden; border:1px solid color-mix(in srgb,var(--vm-primary) 48%,var(--vm-border)); border-radius:18px; background:var(--vm-surface); box-shadow:var(--vm-card-shadow); }
.kdb-kopf-editor-kopf { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:20px 22px; border-bottom:1px solid var(--vm-border); background:linear-gradient(120deg,var(--vm-primary-soft),var(--vm-surface) 72%); }
.kdb-kopf-editor-kopf > div > span { color:var(--vm-primary-strong); font-size:10px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.kdb-kopf-editor-kopf h3 { margin:2px 0 3px; font-size:21px; }
#kundenBox .kdb-kopf-editor-kopf p { max-width:720px; margin:0; color:var(--vm-muted)!important; font-size:13px; }
.kdb-kopf-reset { min-height:42px; flex:none; display:inline-flex; align-items:center; gap:7px; padding:8px 12px; border:1px solid var(--vm-border); border-radius:10px; color:var(--vm-muted); background:var(--vm-surface); font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.kdb-kopf-reset:hover { border-color:var(--vm-primary); color:var(--vm-primary-strong); }
.kdb-kopf-editor-body { padding:22px; }
.kdb-kopf-editor fieldset { min-width:0; margin:0 0 22px; padding:0; border:0; }
.kdb-kopf-editor legend { width:100%; margin:0 0 12px; padding:0 0 9px; border-bottom:1px solid var(--vm-border); font-size:14px; font-weight:800; }
.kdb-kopf-formgrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.kdb-kopf-formgrid label,.kdb-kopf-kontaktzeile label { min-width:0; }
.kdb-kopf-formgrid label.breit { grid-column:span 2; }
.kdb-kopf-formgrid label > span,.kdb-kopf-kontaktzeile label > span { display:block; margin-bottom:5px; color:var(--vm-muted); font-size:11px; font-weight:750; }
.kdb-kopf-formgrid input,.kdb-kopf-formgrid select,.kdb-kopf-kontaktzeile input,.kdb-kopf-kontaktzeile select {
  width:100%; min-width:0; min-height:44px; padding:9px 11px; border:1px solid var(--vm-border); border-radius:10px;
  color:var(--vm-text); background:var(--vm-surface-3); font:inherit;
}
.kdb-kopf-formgrid input:focus,.kdb-kopf-formgrid select:focus,.kdb-kopf-kontaktzeile input:focus,.kdb-kopf-kontaktzeile select:focus { border-color:var(--vm-primary); outline:3px solid var(--vm-primary-soft); outline-offset:1px; }
.kdb-kopf-formgrid small { display:block; margin-top:4px; color:var(--vm-muted); font-size:10.5px; }
.kdb-kopf-kontaktzeile { display:grid; grid-template-columns:minmax(220px,1fr) minmax(130px,190px) 44px; align-items:end; gap:10px; margin-bottom:10px; }
.kdb-kopf-kontakt-entfernen { width:44px; height:44px; display:grid; place-items:center; padding:0; border:1px solid var(--vm-border); border-radius:10px; color:var(--vm-danger); background:var(--vm-surface-3); cursor:pointer; }
.kdb-kopf-kontakt-entfernen:hover { border-color:var(--vm-danger); background:color-mix(in srgb,var(--vm-danger) 9%,var(--vm-surface)); }
.kdb-kopf-add { min-height:42px; display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border:1px dashed var(--vm-primary); border-radius:10px; color:var(--vm-primary-strong); background:var(--vm-primary-soft); font:inherit; font-size:12px; font-weight:750; cursor:pointer; }
.kdb-kopf-add:hover { border-style:solid; background:color-mix(in srgb,var(--vm-primary) 18%,var(--vm-surface)); }
.kdb-kopf-quellhinweis { padding:13px 15px; border:1px solid var(--vm-border); border-radius:12px; color:var(--vm-muted); background:var(--vm-surface-3); font-size:12px; }
.kdb-kopf-quellhinweis b { color:var(--vm-text); }
.kdb-kopf-aktionen { position:sticky; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:14px 22px; border-top:1px solid var(--vm-border); background:color-mix(in srgb,var(--vm-surface) 95%,transparent); backdrop-filter:blur(8px); }
.kdb-kopf-aktionen > span { color:var(--vm-muted); font-size:12px; }
.kdb-kopf-aktionen > span.aktiv { color:#9a6508; font-weight:750; }
.kdb-kopf-aktionen > div { display:flex; gap:9px; }
.kdb-kopf-aktionen button { min-height:44px; padding:9px 15px; border:1px solid var(--vm-border); border-radius:10px; color:var(--vm-text); background:var(--vm-surface-3); font:inherit; font-weight:750; cursor:pointer; }
#kdbKopfSave { min-width:190px; border-color:var(--vm-primary); color:#fff; background:var(--vm-primary); }
#kdbKopfSave:disabled { opacity:.45; cursor:default; }

.kdb-haushalt-leer { padding:30px; border:1px dashed var(--vm-border); border-radius:18px; background:linear-gradient(135deg,var(--vm-surface),var(--vm-primary-soft)); text-align:center; }
.kdb-haushalt-leer h3 { margin:0 0 5px; }
.kdb-haushalt-leer p { margin:0; }
.kdb-haushalt-box { overflow:hidden; border:1px solid var(--vm-border); border-radius:18px; background:var(--vm-surface); box-shadow:var(--vm-card-shadow); }
.kdb-haushalt-box > header { padding:20px 22px; border-bottom:1px solid var(--vm-border); background:linear-gradient(120deg,var(--vm-primary-soft),var(--vm-surface) 72%); }
.kdb-haushalt-box > header span { color:var(--vm-primary-strong); font-size:10px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.kdb-haushalt-box > header h3 { margin:2px 0 3px; font-size:22px; }
.kdb-haushalt-box > header p { margin:0; font-size:13px; }
.kdb-haushalt-zahlen { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; border-bottom:1px solid var(--vm-border); background:var(--vm-border); }
.kdb-haushalt-zahlen > div { padding:13px 18px; background:var(--vm-surface-3); }
.kdb-haushalt-zahlen span,.kdb-haushalt-zahlen b { display:block; }
.kdb-haushalt-zahlen span { color:var(--vm-muted); font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.kdb-haushalt-zahlen b { margin-top:2px; font-size:16px; }
.kdb-haushalt-hinweis { margin:18px 20px 0; padding:12px 14px; border:1px solid var(--vm-border); border-radius:11px; color:var(--vm-muted); background:var(--vm-surface-3); font-size:12px; }
.kdb-haushalt-hinweis b { color:var(--vm-text); }
.kdb-haushalt-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; padding:18px 20px 22px; }
.kdb-haushalt-karte { min-width:0; padding:16px; border:1px solid var(--vm-border); border-radius:14px; background:var(--vm-surface); box-shadow:0 3px 12px rgba(8,45,61,.04); transition:border-color .2s ease,box-shadow .2s ease; }
.kdb-haushalt-karte:hover { border-color:color-mix(in srgb,var(--vm-primary) 45%,var(--vm-border)); box-shadow:0 8px 22px rgba(8,45,61,.08); }
.kdb-haushalt-karte.aktuell { border-color:var(--vm-primary); box-shadow:0 0 0 3px var(--vm-primary-soft); }
.kdb-haushalt-karte > header { display:flex; align-items:center; gap:10px; }
.kdb-haushalt-avatar { width:42px; height:42px; flex:none; display:grid; place-items:center; border-radius:12px; color:var(--vm-primary-strong); background:var(--vm-primary-soft); font-size:13px; font-weight:850; }
.kdb-haushalt-karte > header > div { min-width:0; flex:1; }
.kdb-haushalt-karte h4 { margin:0; overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
#kundenBox .kdb-haushalt-karte p { margin:1px 0 0; color:var(--vm-muted)!important; font-size:11px; }
.kdb-haushalt-karte > header > b { padding:3px 7px; border-radius:7px; color:var(--vm-muted); background:var(--vm-surface-2); font-size:10px; }
.kdb-haushalt-daten { min-height:86px; display:grid; align-content:start; gap:6px; margin-top:12px; color:var(--vm-muted); font-size:11.5px; }
.kdb-haushalt-daten a { min-width:0; overflow:hidden; color:var(--vm-primary-strong); text-overflow:ellipsis; white-space:nowrap; }
.kdb-haushalt-karte > footer { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; padding-top:10px; border-top:1px solid var(--vm-border); }
.kdb-haushalt-karte > footer > span { color:#9a6508; font-size:10px; font-weight:750; }
.kdb-haushalt-karte > footer > span.verknuepft { color:var(--vm-primary-strong); }
.kdb-haushalt-karte > footer button { min-height:40px; flex:none; display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border:1px solid var(--vm-border); border-radius:9px; color:var(--vm-primary-strong); background:var(--vm-surface-3); font:inherit; font-size:10.5px; font-weight:750; cursor:pointer; }
.kdb-haushalt-karte > footer button .kdb-icon { width:15px; height:15px; }
.kdb-haushalt-karte > footer button:hover { border-color:var(--vm-primary); background:var(--vm-primary-soft); }
.kdb-haushalt-karte > footer button:disabled { opacity:.5; cursor:default; }

.kdb-akte-back,.kdb-kopf-edit,.kdb-akte-tabs button,.kdb-kopf-reset,.kdb-kopf-add,.kdb-kopf-kontakt-entfernen,.kdb-haushalt-karte > footer button { transition:color .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease; }
.kdb-akte-back:focus-visible,.kdb-kopf-edit:focus-visible,.kdb-akte-tabs button:focus-visible,.kdb-kopf-reset:focus-visible,.kdb-kopf-add:focus-visible,.kdb-kopf-kontakt-entfernen:focus-visible,.kdb-haushalt-karte > footer button:focus-visible { outline:3px solid var(--vm-primary-soft); outline-offset:2px; }

@media (max-width:1000px) {
  .kdb-haushalt-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
  .kdb-akte-kopf,.kdb-kopf-editor-kopf { align-items:stretch; flex-direction:column; }
  .kdb-kopf-edit,.kdb-kopf-reset { width:100%; }
  .kdb-kopf-formgrid { grid-template-columns:1fr; }
  .kdb-kopf-formgrid label.breit { grid-column:auto; }
  .kdb-kopf-kontaktzeile { grid-template-columns:minmax(0,1fr) 44px; }
  .kdb-kopf-kontaktzeile label:nth-child(2) { grid-column:1; }
  .kdb-kopf-kontakt-entfernen { grid-column:2; grid-row:1/3; align-self:center; }
  .kdb-kopf-aktionen { position:static; align-items:stretch; flex-direction:column; }
  .kdb-kopf-aktionen > div { width:100%; }
  .kdb-kopf-aktionen button { flex:1; min-width:0!important; }
  .kdb-haushalt-zahlen,.kdb-haushalt-grid { grid-template-columns:1fr; }
  .kdb-haushalt-hinweis { margin-inline:14px; }
  .kdb-haushalt-grid { padding-inline:14px; }
}
@media (prefers-reduced-motion:reduce) {
  .kdb-kopf-editor *, .kdb-haushalt-box * { scroll-behavior:auto!important; transition:none!important; }
}

/* ===========================================================================
   Datumspicker (window.vmDatumFeld, datumspicker.js) - 1:1 aus dem
   Kfz-Antragsmanager (antrag/style.css .date-picker-*) uebernommen, damit
   Berater ueberall denselben Kalender statt des Browser-eigenen sehen.
   =========================================================================== */
.date-input-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; align-items: stretch; }
.date-input-row .date-text-input { width: 100%; min-width: 0; }
.date-picker-button {
  display: flex; align-items: center; justify-content: center;
  width: 44px; min-height: 42px; padding: 0;
  border: 1px solid var(--vm-primary); border-radius: 10px;
  background: var(--vm-primary); color: #fff; cursor: pointer;
  touch-action: manipulation;
}
.date-picker-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.date-picker-button:focus-visible { outline: 3px solid var(--vm-primary-soft); outline-offset: 2px; }

body.date-picker-offen { overflow: hidden; }
.date-picker-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 12px; background: rgba(0, 0, 0, .52);
}
.date-picker-overlay[hidden] { display: none; }
.date-picker-dialog {
  width: min(100%, 420px);
  max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
  overflow-y: auto; padding: 16px; border-radius: 18px;
  background: var(--vm-surface); color: var(--vm-text);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .28);
  -webkit-overflow-scrolling: touch;
}
.date-picker-top { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; align-items: center; gap: 6px; }
.date-picker-title { overflow: hidden; font-weight: 700; font-size: 17px; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.date-picker-nav {
  width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
  background: var(--vm-primary-soft); color: var(--vm-primary);
  font-size: 34px; line-height: 1; cursor: pointer; touch-action: manipulation;
}
.date-picker-selects { display: grid; grid-template-columns: 1.5fr 1fr; gap: 8px; margin: 12px 0; }
.date-picker-selects select {
  width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--vm-border);
  border-radius: 10px; background: var(--vm-surface); color: var(--vm-text); font: inherit;
}
.date-picker-weekdays, .date-picker-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.date-picker-weekdays span { padding: 7px 0; color: var(--vm-muted); font-size: 13px; font-weight: 700; text-align: center; }
.date-picker-day {
  min-width: 0; min-height: 43px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--vm-text); font: inherit; cursor: pointer; touch-action: manipulation;
}
.date-picker-day.ausserhalb { color: var(--vm-muted); opacity: .6; }
.date-picker-day.heute { box-shadow: inset 0 0 0 2px var(--vm-primary); }
.date-picker-day.ausgewaehlt { background: var(--vm-primary); color: #fff; font-weight: 700; box-shadow: none; }
.date-picker-day:focus-visible, .date-picker-nav:focus-visible,
.date-picker-actions button:focus-visible, .date-picker-selects select:focus-visible {
  outline: 3px solid var(--vm-primary-soft); outline-offset: 1px;
}
.date-picker-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; padding-bottom: env(safe-area-inset-bottom); }
.date-picker-actions button {
  min-height: 48px; padding: 10px 12px; border: 0; border-radius: 10px;
  background: var(--vm-primary-soft); color: var(--vm-primary); font: inherit; font-weight: 700;
  cursor: pointer; touch-action: manipulation;
}
.date-picker-actions button:last-child { background: var(--vm-primary); color: #fff; }