:root {
      --navy: #10263a;
      --navy-light: #1c3a4f;
      --primary-dark: #1c1d22;
      --green: #2e7d32;
      --green-soft: #e8f3ea;
      --purple: #1f72c5;
      --purple-soft: #e9f2fb;
      --orange: #e0a233;
      --orange-soft: #fcf1df;
      --red: #d9534f;
      --red-soft: #fbeaea;
      --blue: #1f72c5;
      --blue-soft: #e9f2fb;

      --background: #f3f6f8;
      --surface: #ffffff;
      --surface-soft: #f7f9fa;

      --text: #1f2d38;
      --muted: #71808c;
      --line: #dfe6eb;

      --shadow: 0 10px 28px rgba(23, 54, 74, 0.08);
      --radius: 12px;

      /* reserved space for Odoo's own top menu bar (breadcrumb + systray) once embedded */
      --odoo-navbar: 46px;

      /* extra space added below the page title, on top of main's base gap */
      --title-gap-extra: 10px;

      /* Sidebar-Theme — die einzigen 4 Farben, die pro Kunde konfiguriert
         werden. Funktioniert unabhängig davon, ob --sidebar-text hell oder
         dunkel ist (color-mix mischt in Richtung transparent, nie fest in
         Richtung Weiß/Schwarz) — z. B. weiße Sidebar mit schwarzem Text
         verhält sich genau wie die dunkle Sidebar hier, nur umgekehrt. */
      --sidebar-bg: #10263a;
      --sidebar-text: #ffffff;
      --sidebar-active-bg: #ffcc33;
      --sidebar-active-text: #ffffff;

      /* Alles Folgende leitet sich automatisch aus --sidebar-text ab
         (color-mix Richtung transparent) statt eigene Farben zu brauchen —
         zum Anpassen nur diese Werte ändern, nicht die color-mix()-Aufrufe
         weiter unten suchen. */
      --sidebar-overlay-hover: 10%; /* .nav-item:hover Hintergrund-Schleier */
      --sidebar-overlay-active: 12%; /* aktiver Unterpunkt: Hintergrund + zugehörige Trennlinie */
      --sidebar-overlay-divider: 15%; /* Trennlinien: Logo-Footer, mobiler Kopf, senkrechte Linie im Untermenü */
      --sidebar-opacity-label: 60%; /* Rubrik-Labels (HOME, VERTRIEB, …) */
      --sidebar-opacity-tier2: 70%; /* Unterunterpunkt, z. B. "Einstellungen" */
      --sidebar-opacity-tier3: 40%; /* Unterunterunterpunkt und alles darunter, z. B. "Verteilungs-Dashboard" */
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background: var(--background);
    }

    button {
      font: inherit;
    }

    .odoo-navbar {
      height: var(--odoo-navbar);
      padding-left: 28px;
      padding-right: 0.5cm;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 10px;
      background: var(--primary-dark);
      overflow-x: auto;
    }

    .navbar-home {
      flex: 0 0 auto;
    }

    .mobile-nav-toggle {
      display: none;
      flex: 0 0 auto;
      padding: 4px;
      border: none;
      background: none;
      cursor: pointer;
    }

    .sidebar-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
      z-index: 40;
    }

    .sidebar-backdrop.open {
      display: block;
    }

    .navbar-label {
      flex: 0 0 auto;
      color: #ffffff;
      font-size: 15px;
      font-weight: 700;
      white-space: nowrap;
    }

    .odoo-navbar .tabs {
      display: flex;
      flex: 0 0 auto;
      gap: 22px;
      margin-left: 14px;
      padding: 0;
      background: none;
      border-radius: 0;
    }

    .odoo-navbar .tab {
      padding: 0;
      color: #9aa4ab;
      background: none;
      font-size: 14px;
      font-weight: 400;
      box-shadow: none;
    }

    .odoo-navbar .tab.active {
      color: #ffffff;
      background: none;
      font-weight: 400;
      box-shadow: none;
    }

    .app {
      min-height: calc(100vh - var(--odoo-navbar));
      display: grid;
      grid-template-columns: 280px minmax(0, 1fr);
    }

    .sidebar {
      position: sticky;
      top: var(--odoo-navbar);
      height: calc(100vh - var(--odoo-navbar));
      padding: 14px 18px;
      display: flex;
      flex-direction: column;
      color: var(--sidebar-text);
      background: var(--sidebar-bg);
      overflow: hidden;
    }

    .sidebar-nav {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      scrollbar-width: none;
    }

    .sidebar-nav::-webkit-scrollbar {
      display: none;
    }

    .sidebar-footer {
      flex: 0 0 auto;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid color-mix(in srgb, var(--sidebar-text) var(--sidebar-overlay-divider), transparent);
    }

    .sidebar-logo {
      margin-top: 10px;
      margin-bottom: 4px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .sidebar-logo img {
      display: block;
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      object-fit: contain;
    }

    .brand {
      margin: 0 10px 28px;
      font-size: 20px;
      font-weight: 800;
    }

    .nav-label {
      margin: 10px 12px;
      color: var(--sidebar-text);
      opacity: var(--sidebar-opacity-label);
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.12em;
    }

    .nav-item {
      margin: 6px 0;
      padding: 10px 12px;
      border-radius: 12px;
      color: var(--sidebar-text);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease;
    }

    .nav-item:hover:not(.active) {
      background: color-mix(in srgb, var(--sidebar-text) var(--sidebar-overlay-hover), transparent);
    }

    .nav-item.active {
      color: var(--sidebar-active-text);
      background: var(--sidebar-active-bg);
      font-weight: 700;
    }

    .nav-item[data-page] {
      cursor: pointer;
    }

    /* mobile-drawer-only elements (see the max-width: 640px block) */
    .sidebar-mobile-header,
    .nav-toggle,
    .nav-sub {
      display: none;
    }

    .tabs.tabs-hidden {
      display: none;
    }

    main {
      min-width: 0;
      height: calc(100vh - var(--odoo-navbar));
      padding: 0.75cm 0.5cm 1cm;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      scrollbar-gutter: stable;
    }

    main {
      gap: 0.75cm;
    }

    .topbar,
    .tabs {
      flex: 0 0 auto;
    }

    .filters-spacer {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      min-height: 0;
      margin-bottom: -0.35cm;
    }

    .filters-spacer .filters {
      width: 100%;
    }

    .view {
      flex: 0 0 auto;
      min-height: 0;
    }

    .view.active {
      display: contents;
    }

    .topbar {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: var(--title-gap-extra);
    }

    .topbar h1 {
      margin: 0;
      font-size: clamp(20px, 2vw, 24px);
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--navy);
    }

    .subtitle {
      margin-top: 6px;
      color: var(--muted);
      font-size: 14px;
    }

    .tabs {
      display: inline-flex;
      max-width: 100%;
      gap: 4px;
      padding: 4px;
      border-radius: 12px;
      background: #e7edf1;
      overflow-x: auto;
    }

    .tab {
      flex: 0 0 auto;
      padding: 10px 16px;
      border: 0;
      border-radius: 12px;
      color: #63727d;
      background: transparent;
      font-weight: 700;
      cursor: pointer;
    }

    .tab.active {
      color: var(--navy);
      background: #ffffff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    .filters {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      align-items: end;
      padding-top: 10px;
      padding-bottom: 10px;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .filters>.filter {
      flex: 1 0 180px;
      min-width: 160px;
    }

    .filters>.filter-actions {
      flex: 0 0 auto;
    }

    .filter {
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .filter>span {
      color: var(--navy);
      font-size: 15px;
      font-weight: 700;
      text-align: center;
    }

    .filter-select {
      display: block;
      width: 100%;
      padding: 8px 30px 8px 14px;
      border: 1px solid #d5dbe0;
      border-radius: var(--radius);
      background: #eef1f3;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
      text-align-last: center;
      font-family: inherit;
      font-size: 14px;
      font-weight: 400;
      color: var(--text);
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371808c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      background-size: 14px;
    }

    .filter-select:hover {
      border-color: var(--navy);
    }

    .filter-select:focus {
      outline: 2px solid var(--blue);
      outline-offset: 1px;
    }

    .filter-button {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex: 0 0 auto;
      width: auto;
      min-width: 210px;
      white-space: nowrap;
      padding: 8px 16px;
      border: 1px solid transparent;
      border-radius: var(--radius);
      color: #ffffff;
      background: #000000;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
    }

    .filter-button-secondary {
      color: var(--navy);
      background: #eef1f3;
      border-color: #d5dbe0;
    }

    /* Not every button is visible to every Odoo user group — this greys a
       button out (instead of hiding it) to show where a permission gate
       sits, without pretending the prototype knows every group's rights. */
    .filter-button:disabled {
      color: var(--muted);
      background: #eef1f3;
      border-color: #d5dbe0;
      cursor: not-allowed;
    }

    .filter-button svg {
      flex: 0 0 auto;
    }

    .filter-actions {
      display: flex;
      align-items: flex-end;
      gap: 12px;
    }

    .multiselect {
      position: relative;
    }

    .multiselect-toggle {
      display: block;
      width: 100%;
      cursor: pointer;
      font-weight: 400;
    }

    .multiselect-panel {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      right: 0;
      z-index: 20;
      max-height: 280px;
      overflow-y: auto;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 6px;
      display: none;
    }

    .multiselect-panel.open {
      display: block;
    }

    .multiselect-option {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 8px;
      border-radius: 8px;
      color: var(--text);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
    }

    .multiselect-option:hover {
      background: var(--surface-soft);
    }

    .multiselect-option.all-option {
      margin-bottom: 4px;
      padding-bottom: 9px;
      border-bottom: 1px solid var(--line);
      font-weight: 700;
    }

    .multiselect-footer {
      margin-top: 6px;
      padding-top: 6px;
      border-top: 1px solid var(--line);
    }

    .multiselect-footer-btn {
      width: 100%;
    }

    .zeitraum-custom-range {
      display: none;
    }

    .zeitraum-custom-range.open {
      display: block;
    }

    .zeitraum-custom-inputs {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 6px;
      color: var(--muted);
    }

    .zeitraum-date-input {
      flex: 1 1 0;
      min-width: 0;
      padding: 6px 8px;
      border: 1px solid #e7edf1;
      border-radius: var(--radius);
      background: #ffffff;
      font-family: inherit;
      font-size: 12px;
      color: var(--text);
    }

    .multiselect-option input {
      width: 14px;
      height: 14px;
      accent-color: var(--navy);
    }

    .multiselect-panel.single-mode .multiselect-option input {
      display: none;
    }

    .multiselect-panel.single-mode .multiselect-option.selected {
      background: var(--purple-soft);
      color: var(--purple);
      font-weight: 700;
    }

    .view {
      display: none;
    }

    .section-title {
      margin: 30px 0 14px;
    }

    .section-title h2 {
      margin: 0;
      font-size: 22px;
    }

    .section-title p {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 13px;
    }

    .card {
      min-width: 0;
      flex-shrink: 0;
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface);
      box-shadow: var(--shadow);
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
    }

    /* A .card-header's action side, when it holds more than one button
       (e.g. lv-pool's "Interessenten ansehen" + "Interessenten abrufen") —
       gives the pair something other than an inline style to wrap on. */
    .card-header-actions {
      display: flex;
      gap: 8px;
    }

    /* HOME DASHBOARD */

    .home-card-tight {
      margin-top: -0.4cm;
    }

    .home-greeting-bar {
      align-self: stretch;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .home-greeting-bar h2 {
      margin: 0;
      font-size: 18px;
      font-weight: 700;
      color: #ffffff;
      white-space: nowrap;
    }

    .home-greeting-name {
      font-weight: 300;
    }

    .hbv-goal-card {
      padding: 0;
      overflow: hidden;
      /* main's own top padding (0.75cm) is larger than its side padding
         (0.5cm) — pages with a title use that extra space to center the
         title/filter bar between them, but the home dashboard has no title,
         so pull this card up to match the side margins exactly. */
      margin-top: -0.25cm;
    }

    .home-widget-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 53.75px;
      padding: 0 14px;
      background: var(--navy);
      color: #ffffff;
      font-weight: 700;
      font-size: 13px;
    }

    .home-widget-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 18px;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .home-widget-body {
      padding: 0;
    }

    .progress-track {
      height: 30px;
      border-radius: 0;
      overflow: hidden;
      background: #ffffff;
    }

    .progress-fill {
      height: 100%;
      background: #426d50;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      box-sizing: border-box;
      padding-right: 10px;
    }

    .progress-label {
      color: #ffffff;
      font-size: 13px;
      font-weight: 800;
      white-space: nowrap;
    }

    .home-congrats-row {
      display: flex;
      flex-wrap: nowrap;
      flex-shrink: 0;
      gap: 14px;
      overflow-x: auto;
    }

    .congrats-card {
      width: 382px;
      max-width: 100%;
      flex-shrink: 0;
      height: 174px;
      padding: 16px;
      overflow: hidden;
      position: relative;
      background: var(--navy);
      display: flex;
      align-items: stretch;
      gap: 14px;
      flex: 0 0 auto;
    }

    .congrats-avatar {
      flex: 0 0 78px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      background: var(--surface-soft);
      color: var(--navy);
      font-weight: 800;
      font-size: 26px;
    }

    .congrats-text {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .congrats-name {
      font-size: 15px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.75);
      order: 2;
      margin-top: 4px;
    }

    .congrats-sub {
      color: #ffffff;
      font-size: 22px;
      font-weight: 700;
      order: 1;
      line-height: 1.25;
    }

    .congrats-badge {
      position: absolute;
      top: 52px;
      right: -94px;
      width: 300px;
      transform: rotate(45deg);
      background: #426d50;
      color: #ffffff;
      font-size: 22px;
      font-weight: 800;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      padding: 10px 0;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    }

    .congrats-badge-text {
      display: inline-block;
      /* the ribbon strip is clipped asymmetrically by the card's top/right
         edges, so its geometric center isn't the visible center — nudge the
         label along the strip toward the top-edge side to compensate */
      transform: translateX(-15px);
    }

    .memo-card {
      padding: 0;
      overflow: hidden;
    }

    .memo-card-header {
      padding: 11px 14px;
      background: var(--navy);
      color: #ffffff;
      font-weight: 700;
      font-size: 15px;
    }

    .memo-card-body {
      padding: 14px;
      color: var(--text);
      font-size: 13px;
      line-height: 1.6;
    }

    .memo-card-body p {
      margin: 0 0 12px;
    }

    .memo-card-body p:last-child {
      margin-bottom: 0;
    }

    .memo-date {
      float: right;
      color: var(--muted);
      font-weight: 500;
    }

    .card h3 {
      margin: 0;
      font-size: 17px;
    }

    .sub {
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
    }

    .badge {
      flex: 0 0 auto;
      padding: 5px 8px;
      border-radius: 12px;
      color: var(--purple);
      background: var(--purple-soft);
      font-size: 11px;
      font-weight: 700;
    }

    .dashboard-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: 24px;
      row-gap: 28px;
    }

    .dashboard-content {
      flex: 1 0 auto;
      margin-top: 12px;
      padding-bottom: 24px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }

    .dashboard-grid-top {
      margin-bottom: 10px;
    }

    .dashboard-grid-bottom {
      row-gap: 28px;
      margin-top: 16px;
    }

    .tile {
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    .tile h3 {
      margin: 0 0 16px;
      text-align: center;
      font-size: 16px;
    }

    .tile .card:not(.rank-card) {
      height: 158px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .metric-line {
      width: 100%;
      height: 1px;
      margin: 14px 0;
      background: var(--line);
    }

    .metric-line+.metrics-4,
    .metric-line+.metrics-3,
    .metric-line+.metrics-2 {
      margin-top: 0;
    }

    .metric-line+.big-number {
      padding: 0;
    }

    .tile .card>.metrics-4:first-child,
    .tile .card>.metrics-3:first-child,
    .tile .card>.metrics-2:first-child {
      margin-top: 0;
    }

    .card-label {
      color: var(--muted);
      font-size: 12px;
      text-align: center;
    }

    .qualified-strip {
      margin-top: 8px;
      padding: 2px 0;
      color: var(--muted);
      font-size: 12px;
      text-align: center;
    }

    .qualified-strip strong {
      color: var(--text);
    }

    .dashboard-grid .ranking-wrap {
      margin-top: 0;
      flex: 1 1 auto;
      min-height: 0;
      max-height: 122.5px;
      overflow-y: auto;
    }

    .dashboard-grid .ranking-table thead th {
      padding: 5px 9px;
      position: sticky;
      top: 0;
      z-index: 1;
    }

    .dashboard-grid .ranking-table tbody td {
      padding: 5px 9px;
    }

    .metrics-4 {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      margin-top: 16px;
    }

    .metrics-3 {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-top: 16px;
    }

    .metrics-2 {
      display: grid;
      grid-template-columns: 90px 160px;
      justify-content: center;
      column-gap: 38px;
      margin-top: 16px;
    }

    .metric {
      min-width: 0;
      padding: 0 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .metric:first-child {
      padding-left: 0;
    }

    .metric:last-child {
      padding-right: 0;
    }

    .metrics-4 .metric,
    .metrics-4 .metric:first-child,
    .metrics-4 .metric:last-child {
      padding: 0 4px;
    }

    .card-4col {
      container-type: inline-size;
    }

    @container (max-width: 340px) {
      .metrics-4 .metric span {
        font-size: 11px;
      }
    }

    .metric strong {
      font-size: clamp(17px, 1.4vw, 20px);
      letter-spacing: -0.04em;
      white-space: nowrap;
    }

    .metric span {
      color: var(--muted);
      font-size: 12px;
    }

    /* RANKING-TABELLEN */

    .ranking-wrap {
      width: 100%;
      margin-top: 16px;
      overflow-x: auto;
      border: 1px solid var(--line);
      border-radius: 0;
    }

    .ranking-table {
      width: 100%;
      min-width: 0;
      table-layout: fixed;
      border-collapse: collapse;
      font-size: 12px;
    }

    .ranking-table thead th {
      padding: 11px 12px;
      overflow: hidden;
      color: var(--muted);
      background: #f6f8fa;
      border-bottom: 1px solid var(--line);
      text-align: left;
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .ranking-table thead th:nth-child(3),
    .ranking-table thead th:nth-child(4) {
      text-align: right;
    }

    .ranking-table tbody td {
      padding: 10px 12px;
      border-bottom: 1px solid #edf1f4;
      background: #ffffff;
      white-space: nowrap;
    }

    .ranking-table tbody tr:last-child td {
      border-bottom: 0;
    }

    .ranking-table tbody tr:hover td {
      background: #f8fafb;
    }

    .ranking-table .rank {
      width: 8%;
      color: var(--muted);
      font-weight: 700;
      text-align: left;
    }

    .ranking-table .source {
      width: 46%;
      color: var(--text);
      font-weight: 600;
      white-space: nowrap;
      text-align: left;
    }

    .ranking-table .number,
    .ranking-table .share {
      width: 23%;
      overflow: hidden;
      text-align: right;
      text-overflow: ellipsis;
      font-variant-numeric: tabular-nums;
    }

    .ranking-table .number {
      font-weight: 700;
      color: var(--navy);
    }

    .ranking-table .share {
      color: var(--muted);
      font-weight: 600;
    }

    .big-number {
      display: grid;
      place-items: center;
      padding: 10px 0 4px;
      text-align: center;
      font-size: clamp(17px, 1.4vw, 20px);
      font-weight: 800;
      letter-spacing: -0.04em;
    }

    .big-number small {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0;
    }

    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 14px;
    }

    .kpi {
      min-width: 0;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #ffffff;
      box-shadow: 0 8px 22px rgba(23, 54, 74, 0.05);
    }

    .kpi .label {
      color: var(--muted);
      font-size: 12px;
    }

    .kpi .value {
      margin-top: 8px;
      font-size: clamp(27px, 3vw, 34px);
      font-weight: 800;
      white-space: nowrap;
    }

    .kpi .hint {
      margin-top: 6px;
      color: var(--muted);
      font-size: 11px;
    }

    .perf-table {
      min-width: 0;
    }

    .perf-table th,
    .perf-table td {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .perf-table th:first-child,
    .perf-table td:first-child {
      width: 160px;
    }

    .perf-table th:not(:first-child),
    .perf-table td:not(:first-child) {
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    .perf-table .perf-name {
      font-weight: 700;
      color: var(--text);
    }

    .perf-table .perf-divider {
      border-left: 2px solid var(--line);
    }

    .perf-table .perf-all-row td {
      background: var(--surface-soft);
      font-weight: 700;
    }

    .perf-table .perf-sub {
      padding-left: 28px;
      color: var(--muted);
      font-weight: 500;
      font-size: 12px;
    }

    .perf-table .perf-kpi-row td {
      border-top: 2px solid var(--line);
    }

    .perf-table-compact {
      font-size: 12px;
    }

    .perf-table-compact th,
    .perf-table-compact td {
      padding-left: 8px;
      padding-right: 8px;
    }

    .perf-table-compact th {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: bottom;
      line-height: 1.3;
    }

    .perf-table-compact th span {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 9px;
      font-weight: 600;
      text-transform: none;
      letter-spacing: 0;
    }

    .perf-table-compact td span {
      color: var(--muted);
      font-weight: 500;
      font-size: 12px;
    }

    .perf-table-compact .perf-all-row td span {
      color: var(--muted);
      font-weight: 600;
    }

    .calls-perf-card {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    .calls-perf-card .table-wrap {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
    }

    .kpis-card {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    .kpis-card .table-wrap {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
    }

    .appointments-card {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    .kpis-card,
    .calls-perf-card,
    .appointments-card {
      padding: 12px 14px;
    }

    .kpis-card .table-wrap,
    .calls-perf-card .table-wrap,
    .appointments-card .termin-cards {
      margin-top: 0;
    }

    .appointments-card .termin-cards {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
    }

    .perf-table thead th {
      position: sticky;
      top: 0;
      z-index: 1;
    }

    .perf-table th.sortable {
      cursor: pointer;
      user-select: none;
    }

    .perf-table th.sortable:hover {
      background: var(--navy-light);
    }

    .perf-table th.sortable .sort-arrow {
      display: inline-block;
      margin-left: 4px;
      font-size: 9px;
      opacity: 0.4;
    }

    .perf-table th.sortable.sort-active .sort-arrow {
      opacity: 1;
    }

    .termin-cards {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 16px;
    }

    .stage-toggle {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      height: 37px;
      padding: 3px;
      border-radius: 12px;
      background: #e7edf1;
    }

    .stage-toggle-btn {
      flex: 0 0 auto;
      padding: 7px 14px;
      border: 0;
      border-radius: 10px;
      color: #63727d;
      background: transparent;
      font-weight: 700;
      font-size: 13px;
      cursor: pointer;
    }

    .stage-toggle-btn.active {
      color: var(--navy);
      background: #ffffff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    .termin-card {
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
    }

    .termin-card.perf-all-row {
      background: var(--surface-soft);
    }

    .termin-card-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
      padding: 0 12px;
    }

    .termin-card-head h3 {
      margin: 0;
      font-size: 16px;
    }

    .termin-card-count {
      font-size: 16px;
      font-weight: 700;
      color: var(--text);
    }

    .termin-grid {
      display: grid;
      grid-template-columns:
        minmax(280px, 1fr) minmax(320px, 1fr) minmax(230px, 0.75fr);
      gap: 12px;
      overflow-x: auto;
    }

    /* Verteilungslogik (lv-regeln): same .termin-grid component, but its
       three columns (PLZ-Gebiet/Ranking/Auslastung) are equally important,
       not asymmetric like Termin-Controlling's — so it overrides the
       default column widths instead of reusing them as-is. Kept as its own
       class (rather than an inline style) so the mobile media query below
       can collapse it to one column, which an inline style would block. */
    .termin-grid-equal {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .termin-column {
      min-width: 0;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #ffffff;
    }

    .termin-column-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      font-size: 11px;
      font-weight: 800;
    }

    .termin-column-header.bad {
      color: var(--red);
      background: var(--red-soft);
    }

    .termin-column-header.good {
      color: var(--green);
      background: var(--green-soft);
    }

    .termin-column-header.info {
      color: var(--blue);
      background: var(--blue-soft);
    }

    .termin-column-header.muted {
      color: var(--muted);
      background: var(--surface-soft);
    }

    .termin-items {
      display: grid;
      padding: 6px 10px 8px;
    }

    .termin-item {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      padding: 8px 2px;
      border-bottom: 1px solid #edf1f4;
      font-size: 11px;
    }

    .termin-item:last-child {
      border-bottom: 0;
    }

    .termin-item span {
      color: #4e5c66;
    }

    .termin-item strong {
      white-space: nowrap;
    }

    .split {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
      gap: 18px;
    }

    .table-wrap {
      width: 100%;
      margin-top: 16px;
      overflow-x: auto;
    }

    table {
      width: 100%;
      min-width: 760px;
      border-collapse: separate;
      border-spacing: 0;
      font-size: 13px;
    }

    th {
      padding: 12px;
      color: #ffffff;
      background: var(--navy);
      text-align: left;
      font-size: 11px;
      text-transform: uppercase;
      white-space: nowrap;
    }

    td {
      padding: 12px;
      border-bottom: 1px solid var(--line);
      white-space: nowrap;
    }

    tbody tr:hover td {
      background: #f8fafb;
    }

    @media (max-width: 1400px) {
      #dashboard.view.active {
        overflow-y: auto;
        padding-right: 4px;
        padding-bottom: 28px;
      }

      .dashboard-grid {
        grid-template-columns: repeat(2, minmax(360px, 1fr));
        grid-template-rows: auto;
        height: auto;
      }

      .tile .card:not(.rank-card) {
        min-height: 130px;
      }
    }

    @media (max-width: 1100px) {
      .app {
        grid-template-columns: 82px minmax(0, 1fr);
      }

      .brand,
      .nav-label,
      .nav-item {
        font-size: 0;
      }

      .nav-item {
        height: 42px;
      }

      .sidebar-logo {
        display: none;
      }

      .split {
        grid-template-columns: 1fr;
      }

      .termin-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 900px) {
      main {
        padding: 22px 18px 40px;
      }

      .dashboard-grid {
        grid-template-columns: 1fr;
      }

      .tile .card {
        min-height: auto;
      }

    }

    @media (max-width: 640px) {
      .app {
        display: block;
      }

      .mobile-nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      /* Odoo shows only one of these at a time: the app-switcher house on
         desktop, or the hamburger on mobile — never both. */
      .navbar-home {
        display: none;
      }

      .sidebar {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100vh;
        height: 100dvh;
        width: 280px;
        max-width: 80vw;
        z-index: 50;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 8px 0 24px rgba(0, 0, 0, 0.2);
      }

      .sidebar.open {
        transform: translateX(0);
      }

      .sidebar-mobile-header {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: var(--odoo-navbar);
        margin-bottom: 6px;
        border-bottom: 1px solid color-mix(in srgb, var(--sidebar-text) var(--sidebar-overlay-divider), transparent);
      }

      .sidebar-mobile-title {
        font-size: 15px;
        font-weight: 700;
      }

      .sidebar-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-right: -8px;
        padding: 0;
        border: 0;
        border-radius: 10px;
        background: none;
        color: inherit;
        cursor: pointer;
      }

      .sidebar-nav {
        overscroll-behavior: contain;
      }

      /* Sub-pages that live in the top bar on desktop are reached from the
         drawer instead, so the top-bar tabs are hidden here. */
      .odoo-navbar .tabs {
        display: none;
      }

      .nav-item.has-sub {
        position: relative;
        padding-right: 48px;
      }

      .nav-toggle {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0 10px 10px 0;
      }

      .nav-toggle svg {
        transition: transform 0.15s ease;
      }

      .nav-item.open .nav-toggle svg {
        transform: rotate(180deg);
      }

      .nav-item.open + .nav-sub {
        display: block;
      }

      /* No left margin/padding/border here on purpose — Vertrieb/Analyse/
         Konfiguration (depth 1 in renderNavSub) must start flush with a
         Menüpunkt like "Interessenten" above them, not indented at all.
         Indentation from depth 2 down comes entirely from each row's own
         inline margin-left/padding-left (NAV_SUB_BASE_INDENT/STEP, app.js). */
      .nav-sub {
        margin: 0 0 6px 20px;
        padding-left: 10px;
        border-left: 1px solid color-mix(in srgb, var(--sidebar-text) var(--sidebar-overlay-divider), transparent);
      }

      /* Color/weight in the sub-menu is driven purely by depth, never by
         whether a row happens to have a real page behind it — otherwise two
         rows at the same indent (e.g. "Verteilungs-Dashboard", which has one,
         next to "Aktivitäten", which doesn't) end up inconsistently white vs.
         grey at the very same level. Every row is genuinely clickable —
         rows without a real page land on a shared blank "platzhalter"
         section instead (see showPlaceholder, app.js), just so every level
         can actually be clicked and its active state checked live. Depth
         counts from 1 at Vertrieb/Analyse/Konfiguration:
         depth 1 (Unterpunkt) = full white like a Menüpunkt (same font-size,
           "auf die Höhe von den Hauptpunkten"), but thinner (400 instead of
           the Menüpunkt/active 500/700) — .nav-sub-group for a heading with
           children, .nav-subitem.is-top for a plain clickable row at that
           same depth (e.g. "Vertriebs-Dashboard" next to the "Downloads"
           heading, or "Anruf-Controlling", which has no heading sibling at
           all). Both look identical; only .is-top keeps the click target.
         depth 2 (.nav-subitem, Unterunterpunkt) = grey at 70% — deliberately
           still fairly strong, so depth 3 has real room left to step down
           again without getting hard to read.
         depth 3+ (.nav-subitem.is-deeper, Unterunterunterpunkt and anything
           nested further below it) = 40% — one more step down, then flat:
           depth only changes the indent past this point, never the shade
           or weight (300 throughout) again.
         .active (the current page, at any depth) always wins back to full
         white + bold, that's the one deliberate exception. */
      .nav-subitem {
        padding: 9px 12px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 300;
        color: color-mix(in srgb, var(--sidebar-text) var(--sidebar-opacity-tier2), transparent);
        cursor: pointer;
        transition: background 0.15s ease;
      }

      .nav-subitem.is-deeper {
        color: color-mix(in srgb, var(--sidebar-text) var(--sidebar-opacity-tier3), transparent);
      }

      .nav-subitem.is-top {
        color: var(--sidebar-text);
        font-weight: 400;
      }

      .nav-subitem.active {
        font-weight: 700;
        color: var(--sidebar-text);
        background: color-mix(in srgb, var(--sidebar-text) var(--sidebar-overlay-active), transparent);
      }

      .nav-sub-group {
        margin: 16px 12px 4px 12px;
        padding-top: 12px;
        border-top: 1px solid color-mix(in srgb, var(--sidebar-text) var(--sidebar-overlay-active), transparent);
        font-size: 13px;
        font-weight: 400;
        color: var(--sidebar-text);
      }

      .nav-sub-group:first-child {
        margin-top: 8px;
        padding-top: 0;
        border-top: 0;
      }

      /* Any row with children (pure heading like Vertrieb/Analyse/
         Konfiguration, or a clickable row that also has children below it)
         starts collapsed — some hierarchies (Konfiguration today) have far
         too many rows to show fully expanded all the time. The small arrow
         is its own hit target, absolutely positioned like the top-level
         .nav-toggle, so it never fights the row's own navigation click. */
      .nav-sub-children {
        display: none;
      }

      .nav-sub-children.open {
        display: block;
      }

      .nav-sub-group.has-children,
      .nav-subitem.has-children {
        position: relative;
        padding-right: 36px;
        cursor: pointer;
      }

      /* .nav-sub-group's own right margin (12px, set above) is meant for a
         plain label — an arrow-bearing heading needs to end flush with
         .nav-subitem's own right edge instead, or every depth-1 arrow
         (Vertrieb/Analyse/Konfiguration) would sit 12px further in than
         every arrow nested below it. Zeroing it here is what keeps every
         arrow, at any depth, in the same vertical column. */
      .nav-sub-group.has-children {
        margin-right: 0;
      }

      .nav-group-toggle {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .nav-group-toggle svg {
        transition: transform 0.15s ease;
      }

      .has-children.open .nav-group-toggle svg {
        transform: rotate(180deg);
      }

      .brand {
        font-size: 20px;
      }

      .nav-label {
        font-size: 13px;
      }

      .nav-item {
        font-size: 13px;
        height: auto;
      }

      .sidebar-logo {
        display: flex;
      }

      .odoo-navbar {
        padding-left: 12px;
      }

      main {
        padding: 18px 12px 32px;
      }

      .filters>.filter {
        flex: 0 0 150px;
        min-width: 150px;
      }

      .filter-actions {
        flex: 0 0 auto;
      }

      .filter-button {
        width: auto;
        min-width: 170px;
      }

      .home-greeting-bar h2 {
        font-size: 16px;
      }

      .home-widget-title {
        font-size: 16px;
      }

      /* Unified card-to-card spacing across all pages on mobile (was 16px on
         Termin-Controlling, 28px on Vertriebs-Dashboard); Home now keeps its
         desktop-tight spacing (home-card-tight) on mobile too. */
      .termin-cards {
        gap: 28px;
      }
    }

    /* LEAD-VERTEILUNG */

    /* Interessenten: app-level top nav (mirrors Odoo's own app menu) with a
       "Konfiguration" dropdown — "Interessenten-Verteilung" inside it is the
       only real entry point into Dashboard/Verteilungsregeln/Pool. */
    .konfig-dropdown {
      position: relative;
      display: inline-flex;
    }

    .konfig-panel {
      /* .odoo-navbar has overflow-x: auto for its own horizontal-scroll
         reasons, which per spec forces overflow-y to auto too — an
         absolutely positioned panel would get clipped by it. Fixed
         positioning (computed in JS on open) escapes that entirely. */
      position: fixed;
      min-width: 250px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 8px;
      display: none;
      z-index: 60;
    }

    .konfig-panel.open {
      display: block;
    }

    .konfig-item {
      padding: 8px 12px;
      border-radius: 8px;
      color: var(--text);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
    }

    .konfig-item:hover {
      background: var(--surface-soft);
    }

    .konfig-group-label-highlight {
      color: var(--blue);
    }

    /* Ausnahmeregeln: same .multiselect/.multiselect-panel component as the
       filter bar, but .table-wrap has overflow-x:auto (which per spec forces
       overflow-y to auto too), so an absolutely positioned panel would get
       clipped. Fixed positioning (computed in JS on open) escapes that. */
    .exc-verkaeufer-panel {
      position: fixed;
      min-width: 220px;
    }

    .konfig-group-label {
      margin: 10px 4px 4px;
      padding-top: 8px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .lv-intro {
      margin: 0 0 20px;
      color: var(--muted);
      font-size: 13px;
    }

    .settings-group {
      display: flex;
      flex-direction: column;
    }

    .settings-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 12px 0;
      border-bottom: 1px solid var(--line);
    }

    .settings-row:last-child {
      border-bottom: 0;
      padding-bottom: 0;
    }

    .settings-row:first-child {
      padding-top: 0;
    }

    .settings-row-text strong {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      color: var(--text);
      font-weight: 700;
    }

    .settings-row-text span {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 12px;
    }

    .info-icon {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: var(--blue-soft);
      color: var(--blue);
      font-size: 10px;
      font-weight: 700;
      font-style: normal;
      text-transform: none;
      letter-spacing: normal;
      line-height: 15px;
      text-align: center;
      cursor: help;
    }

    .info-icon .info-tip {
      position: absolute;
      top: 130%;
      left: 50%;
      transform: translateX(-50%);
      width: max-content;
      max-width: min(90vw, 340px);
      padding: 8px 12px;
      border-radius: 8px;
      background: var(--navy);
      color: #ffffff;
      font-size: 12px;
      font-weight: 400;
      font-style: normal;
      text-transform: none;
      letter-spacing: normal;
      line-height: 1.4;
      text-align: center;
      white-space: normal;
      box-shadow: var(--shadow);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.12s ease;
      pointer-events: none;
      z-index: 30;
    }

    .info-icon:hover .info-tip {
      opacity: 1;
      visibility: visible;
    }

    .settings-control {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .settings-input {
      width: 64px;
      padding: 8px 6px;
      border: 1px solid #d5dbe0;
      border-radius: var(--radius);
      background: #eef1f3;
      text-align: center;
      font: inherit;
      font-size: 13px;
      color: var(--text);
    }

    .settings-input:focus {
      outline: 2px solid var(--blue);
      outline-offset: 1px;
    }

    select.settings-input {
      padding-right: 20px;
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371808c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 8px center;
      background-size: 12px;
    }

    /* Fallback-Methode / Fallback-Benutzer (lv-regeln): wider than the
       default select so their option text has room. Its own class (rather
       than an inline width) so the mobile media query below can size it
       to the full row instead of a fixed 290px. */
    .settings-select-wide {
      width: 290px;
      text-align: left;
      padding: 8px 20px 8px 10px;
    }

    .switch {
      position: relative;
      flex: 0 0 auto;
      width: 40px;
      height: 22px;
    }

    .switch input {
      position: absolute;
      opacity: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      cursor: pointer;
    }

    .switch-slider {
      position: absolute;
      inset: 0;
      background: #d5dbe0;
      border-radius: 999px;
      transition: background 0.15s ease;
      pointer-events: none;
    }

    .switch-slider::before {
      content: "";
      position: absolute;
      width: 16px;
      height: 16px;
      left: 3px;
      top: 3px;
      background: #ffffff;
      border-radius: 50%;
      transition: transform 0.15s ease;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }

    .switch input:checked+.switch-slider {
      background: var(--blue);
    }

    .switch input:checked+.switch-slider::before {
      transform: translateX(18px);
    }

    .priority-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 4px;
    }

    .priority-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface-soft);
    }

    .priority-rank {
      flex: 0 0 auto;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--navy);
      color: #ffffff;
      font-size: 12px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .priority-text {
      min-width: 0;
    }

    .priority-text strong {
      display: block;
      font-size: 13px;
    }

    .priority-text span {
      display: block;
      margin-top: 1px;
      color: var(--muted);
      font-size: 12px;
    }

    .settings-save-bar {
      display: flex;
      justify-content: flex-start;
      gap: 12px;
      margin-top: 24px;
    }

    /* Verkäufer-Tabelle: eigene, schlanke Kopie der ranking-table-Optik
       (gleiche Farben/Abstände/Typografie wie in Statistiken & Controlling),
       aber ohne deren spaltenzahl-spezifische nth-child-Ausrichtung — die
       hatte hier Kopfzeile und Zellinhalt gegeneinander verschoben. */
    .verkaeufer-table {
      width: 100%;
      min-width: 0;
      table-layout: fixed;
      border-collapse: collapse;
      font-size: 12px;
    }

    .verkaeufer-table thead th {
      padding: 11px 12px;
      color: var(--muted);
      background: #f6f8fa;
      border-bottom: 1px solid var(--line);
      text-align: right;
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      white-space: nowrap;
    }

    .verkaeufer-table tbody td {
      padding: 10px 12px;
      border-bottom: 1px solid #edf1f4;
      background: #ffffff;
      vertical-align: middle;
      text-align: right;
    }

    .verkaeufer-table thead th:first-child,
    .verkaeufer-table tbody td:first-child {
      text-align: left;
    }

    .verkaeufer-table tbody tr:last-child td {
      border-bottom: 0;
    }

    .verkaeufer-table tbody tr:hover td {
      background: #f8fafb;
    }

    .verkaeufer-table .align-right {
      font-variant-numeric: tabular-nums;
      font-weight: 700;
      color: var(--navy);
    }

    .verkaeufer-table .cell-flex-end {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      flex-wrap: wrap;
    }

    /* Gebiete-Button / Ranking-Pill: lesen sich mittig besser als an den
       Spaltenrand gedrückt. */
    #verkaeuferTable thead th:nth-child(2),
    #verkaeuferTable thead th:nth-child(3),
    #verkaeuferTable tbody td:nth-child(2),
    #verkaeuferTable tbody td:nth-child(3) {
      text-align: center;
    }

    /* Ausnahmeregeln: Feld/Wert/Verkäufer-Felder sind jeweils volle
       Spaltenbreite, daher Kopfzeile mittig statt links/rechts. */
    #ausnahmeTable thead th,
    #ausnahmeTable thead th:first-child {
      text-align: center;
    }

    /* Lets a single-card view fill the same remaining height as the
       Anruf-/Termin-Controlling cards, instead of stopping short at the
       table's own content height. */
    .lv-fill-card {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    .lv-fill-card .table-wrap {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
    }

    .badge-green {
      color: var(--green);
      background: var(--green-soft);
    }

    .badge-orange {
      color: var(--orange);
      background: var(--orange-soft);
    }

    .badge-red {
      color: var(--red);
      background: var(--red-soft);
    }

    .badge-muted {
      color: var(--muted);
      background: var(--surface-soft);
    }

    .row-action-btn {
      padding: 0;
      border: 0;
      background: none;
      color: var(--blue);
      font-weight: 700;
      font-size: 12px;
      cursor: pointer;
    }

    .row-action-btn:hover {
      text-decoration: underline;
    }

    .modal-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(16, 38, 58, 0.45);
      z-index: 200;
    }

    .modal-backdrop.open {
      display: block;
    }

    .modal {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: calc(100% - 32px);
      max-width: 560px;
      max-height: 80vh;
      overflow-y: auto;
      background: var(--surface);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 20px;
      z-index: 201;
    }

    .modal.open {
      display: block;
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
    }

    .modal-header h3 {
      margin: 0;
      font-size: 17px;
    }

    .modal-close {
      padding: 0;
      border: 0;
      background: none;
      font-size: 22px;
      line-height: 1;
      color: var(--muted);
      cursor: pointer;
    }

    .modal-close:hover {
      color: var(--text);
    }

    .modal-footer {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 20px;
      padding-top: 16px;
      border-top: 1px solid var(--line);
    }

    .gebiet-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 0;
      border-bottom: 1px solid var(--line);
      flex-wrap: wrap;
    }

    .gebiet-row:last-child {
      border-bottom: 0;
      padding-bottom: 0;
    }

    .gebiet-row:first-child {
      padding-top: 0;
    }

    .gebiet-typ-select {
      width: 190px;
      flex-shrink: 0;
    }

    .gebiet-fields {
      display: flex;
      gap: 8px;
      flex: 1 1 200px;
    }

    .gebiet-fields input {
      flex: 1 1 auto;
      min-width: 0;
    }

    .gebiet-radius-group {
      display: flex;
      align-items: center;
      gap: 6px;
      flex: 0 1 110px;
    }

    .gebiet-radius-group .gebiet-radius-input {
      width: 70px;
      flex: 0 0 auto;
    }

    .gebiet-radius-unit {
      font-size: 12px;
      color: var(--muted);
      white-space: nowrap;
    }

    /* Grobe Skizze der echten crm.lead-Pipeline – nur zur Einordnung, wo der
       Pool-Abruf-Button künftig sitzt, keine echte Kanban-Ansicht. */
    .pipeline-sketch {
      display: flex;
      gap: 16px;
      overflow-x: auto;
    }

    .pipeline-sketch-column {
      flex: 0 0 220px;
      border: 1px dashed var(--line);
      border-radius: var(--radius);
      padding: 12px;
      background: var(--surface-soft);
    }

    .pipeline-sketch-column h4 {
      margin: 0 0 12px;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--muted);
    }

    .pipeline-sketch-card {
      border: 1px dashed var(--line);
      border-radius: 8px;
      background: var(--surface);
      padding: 10px;
      margin-bottom: 8px;
    }

    .pipeline-sketch-card:last-child {
      margin-bottom: 0;
    }

    .pipeline-sketch-line {
      height: 8px;
      border-radius: 4px;
      background: var(--line);
      margin-bottom: 6px;
    }

    .pipeline-sketch-line:last-child {
      margin-bottom: 0;
      width: 60%;
    }

    .pipeline-sketch-collapsed {
      flex: 0 0 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px 0;
    }

    .pipeline-sketch-collapsed span {
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--muted);
      white-space: nowrap;
    }

    /* LEAD-VERTEILUNG — MOBILE (< 640px)
       Verteilungs-Dashboard / Verteilungsregeln / Interessenten-Pool (the
       three screens behind Konfiguration > Interessenten-Verteilung) were
       built desktop-only — none of the general @media (max-width: 640px)
       block above touches them. Scoped to their three view ids so nothing
       here changes how .card-header, .settings-row etc. behave on any
       other, already-shipped mobile page. */
    @media (max-width: 640px) {
      #lv-dashboard .card-header,
      #lv-regeln .card-header,
      #lv-pool .card-header {
        flex-direction: column;
        align-items: stretch;
      }

      #lv-pool .card-header-actions {
        flex-wrap: wrap;
      }

      #lv-regeln .settings-save-bar {
        flex-direction: column;
        align-items: stretch;
      }

      #lv-regeln .settings-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }

      #lv-regeln .settings-control {
        width: 100%;
      }

      #lv-regeln .settings-select-wide {
        width: 100%;
      }

      .termin-grid-equal {
        grid-template-columns: 1fr;
      }

      /* .verkaeufer-table opts out of the app's generic <table> (which
         gets a min-width and scrolls inside .table-wrap) in favour of a
         table-layout:fixed, min-width:0 table that instead shrinks its
         columns to fit — fine at desktop widths, but on a phone that same
         shrinking squeezes 4 (or 3) columns into ~350px instead of just
         scrolling. Giving it back a sensible min-width restores the
         normal contained-horizontal-scroll behavior every other table in
         the app already has on mobile, via .table-wrap's own
         overflow-x:auto. */
      #verkaeuferTable {
        min-width: 560px;
      }

      #ausnahmeTable {
        min-width: 520px;
      }
    }