:root {
  /* Semantische Farbpalette:Rollen statt durchnummerierter Einzelfarben. */
  --color-canvas: var(--color-canvas);
  --color-app: #f7faf8;
  --color-sidebar: #fbfcfb;
  --color-surface: #ffffff;
  --color-surface-subtle: #f6f9f7;
  --color-surface-selected: #e8f6ef;
  --color-text: #111b16;
  --color-text-muted: #69756f;
  --color-text-placeholder: #7b8881;
  --color-border: #e8eeeb;
  --color-border-subtle: #f1f5f3;
  --color-primary: #064b35;
  --color-primary-strong: #0b6849;
  --color-primary-soft: #e8f6ef;
  --color-primary-border: #bfe2d3;
  --color-warning: #b7791f;
  --color-warning-soft: #fff4df;
  --color-danger: #c24155;
  --color-danger-soft: #fff1f3;
  --color-info: #2f60a7;
  --color-brand-telekom: #e20074;
  --color-brand-vodafone: #e60000;

  /* Bestehende Namen bleiben als kompatible Aliase erhalten. */
  --ink: var(--color-text);
  --bg: var(--color-canvas);
  --app: var(--color-app);
  --sidebar: var(--color-sidebar);
  --card: var(--color-surface);
  --border: var(--color-border);
  --line: var(--color-border);
  --line-soft: var(--color-border-subtle);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --green: var(--color-primary);
  --green-2: var(--color-primary-strong);
  --mint: var(--color-primary-soft);
  --mint-border: var(--color-primary-border);
  --amber: var(--color-warning);
  --amber-soft: var(--color-warning-soft);
  --red: var(--color-danger);
  --yellow: #f7c244;
  --magenta: var(--color-brand-telekom);
  --vodafone: var(--color-brand-vodafone);
  --shadow: 0 1px 3px rgba(28, 43, 35, 0.07), 0 4px 14px rgba(28, 43, 35, 0.05);
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html, body {
  overflow-x: hidden;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background: var(--color-canvas);
  /* Globaler Größen-Regler (Text + Elemente). Zum Feinjustieren NUR diesen Wert
     ändern: 1.1 = kompakter, 1.2 = größer/lesbarer, 1.25 = noch größer. */
  zoom: 1.2;
  /* Achtung bei Höhen: `vh` kennt diese Vergrößerung NICHT. Ein Dialog mit
     `max-height: calc(100vh - 40px)` hält sich für 960 Pixel hoch und steht
     auf dem Schirm mit 1200 - seine Fußleiste rutscht dann unter den unteren
     Fensterrand und ist nicht mehr anklickbar. Für sichtbare Höhen deshalb
     immer `--db-viewport-height` nehmen; app.js setzt sie auf 100/zoom dvh.
     Gefunden am 03.09.2026 im Reparatur-Dialog, siehe LOGBUCH 71. */
}

.login-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  background:var(--color-canvas);
}

.login-screen.is-hidden {
  display: none;
}

.login-panel {
  display: grid;
  gap: 20px;
  width: min(100%, 390px);
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:var(--color-surface);
  box-shadow: var(--shadow);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 9px;
}

.login-brand strong,
.login-brand small {
  display: block;
}

.login-brand strong {
  font-size: 17px;
}

.login-brand small,
.login-panel p,
.login-note {
  color: var(--muted);
}

.login-panel h1 {
  margin: 0 0 5px;
  font-size: 22px;
  letter-spacing: 0;
}

.login-panel p {
  margin: 0;
  font-size: 12px;
}

.login-panel form {
  display: grid;
  gap: 12px;
}

.login-panel label {
  display: grid;
  gap: 5px;
}

.login-panel label span {
  font-size: 10px;
  font-weight: 600;
}

.login-panel input {
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  outline: none;
}

.login-panel input:focus {
  border-color: var(--green-2);
  box-shadow: 0 0 0 3px rgba(11, 104, 73, 0.1);
}

.login-panel .primary-button {
  min-height: 38px;
}

.login-error {
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--red) !important;
  background:var(--color-danger-soft);
}

/* Eine gelungene Aktion darf nicht wie ein Fehler aussehen. Die Bestaetigung
   beim Passwort-Zuruecksetzen stand rot auf rosa und wurde deshalb als Absage
   gelesen - der Nutzer dachte, es sei keine E-Mail verschickt worden. */
.login-error.is-success {
  color:var(--color-primary) !important;
  background:var(--sig-gruen-ecfdf5);
}

.login-note {
  font-size: 10px;
  line-height: 1.4;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Die Regel darueber gilt den Strichsymbolen: keine Fuellung, dafuer eine
   Kontur von knapp zwei Pixeln. In SVG wird die Kontur VERERBT - Text in
   einem Diagramm bekam sie deshalb mit. Jede Ziffer der Achse war fast
   schwarz umrandet und sah fett aus, obwohl die Schriftstaerke 400 ist.
   Beschriftungen werden gefuellt, nicht gestrichelt; wer wirklich eine
   Kontur will (z. B. den hellen Rand an den Saeulenzahlen), setzt sie an
   seiner eigenen Klasse und schlaegt diese Regel damit ohnehin. */
svg text {
  stroke: none;
  fill: currentColor;
}

.app-shell {
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  /* Breiter: nutzt mehr Bildschirm, statt schmal in der Mitte zu kleben.
     Auf sehr breiten Monitoren gedeckelt, damit Tabellen lesbar bleiben. */
  width: min(100%, 1720px);
  max-width: 100vw;
  min-width: 0;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--app);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.app-shell.is-collapsed {
  grid-template-columns: 70px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: var(--db-viewport-height, 80dvh);
  min-height: 0;
  padding: 33px 11px;
  border-right: 1px solid var(--line);
  background: var(--sidebar);
}

.brand {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 30px;
}

.brand-mark {
  display: grid;
  grid-template-columns: repeat(3, 5px);
  align-items: end;
  gap: 3px;
  width: 26px;
  height: 28px;
  padding: 4px;
  border-radius: 6px;
  background:var(--n-flaeche-ruhig);
}

.brand-mark span {
  display: block;
  border-radius: 5px 5px 2px 2px;
  background: var(--green);
}

.brand-mark span:nth-child(1) { height: 12px; }
.brand-mark span:nth-child(2) { height: 19px; }
.brand-mark span:nth-child(3) { height: 24px; }

.brand strong {
  display: block;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
}

.brand small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  max-width: 102px;
  font-size: 10px;
  line-height: 1.15;
  white-space: normal;
}

.nav-list {
  display: grid;
  gap: 8px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.nav-item,
.collapse-menu {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  color:var(--n-25322d);
  background: transparent;
  text-align: left;
  font-size: 12px;
}

.nav-item:hover,
.nav-item.is-active {
  color:var(--color-surface);
  background: var(--green);
}

.nav-group {
  display: grid;
  gap: 8px;
}

.nav-group-head {
  /* Zwischen-Ueberschriften (Kunden & Vertrieb, Service & Lager, ...) ausgeblendet -
     Wunsch Nutzer: aufgeraeumtere Seitenleiste ohne Gruppentitel. */
  display: none !important;
  align-items: center;
  justify-content: space-between;
  padding: 4px 9px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color:var(--n-6b7c74);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nav-group-head:hover {
  color: var(--green);
}

.nav-group-chevron {
  width: 12px;
  height: 12px;
  transition: transform 160ms ease;
}

.nav-group.is-collapsed .nav-group-chevron {
  transform: rotate(-90deg);
}

.nav-group-items {
  display: grid;
  gap: 8px;
}

.nav-group.is-collapsed .nav-group-items {
  /* Ohne sichtbare Gruppentitel sollen die Menuepunkte immer sichtbar bleiben. */
  display: grid;
}

.nav-badge {
  display: none !important; /* Seitenleiste bewusst ohne Ziffern-Badges - aufgeraeumter */
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--green);
  color:var(--color-surface);
  font-size: 10px;
  font-weight: 700;
}

.nav-item.is-active .nav-badge {
  background:var(--color-surface);
  color: var(--green);
}

.nav-badge[hidden] {
  display: none;
}

.sidebar-footer {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  background: var(--sidebar);
}

.collapse-menu {
  width: 100%;
  color:var(--n-3e4b45);
}

.collapse-menu:hover {
  background:var(--n-flaeche-ruhig);
}

.sidebar-layout-control {
  display: grid;
  gap: 5px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background:var(--color-app);
}

.sidebar-layout-control[hidden] {
  display: none;
}

.sidebar-layout-control > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sidebar-layout-control > div {
  display: grid;
  /* Zwei Knoepfe: weniger links, mehr rechts. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
}

.sidebar-layout-control button svg {
  display: block;
  margin: 0 auto;
}

.sidebar-layout-control button {
  min-width: 0;
  min-height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:var(--color-surface);
  color: var(--muted);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
}

.sidebar-layout-control button:hover:not(:disabled),
.sidebar-layout-control button:focus-visible {
  border-color: var(--green);
  color: var(--green);
}

.sidebar-layout-control button.is-active {
  border-color: var(--green);
  background: var(--green);
  color:var(--color-surface);
}

.sidebar-layout-control button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.app-shell.is-collapsed .brand div:last-child,
.app-shell.is-collapsed .nav-item span,
.app-shell.is-collapsed .collapse-menu span,
.app-shell.is-collapsed .sidebar-layout-control > span,
.app-shell.is-collapsed .nav-group-head {
  display: none;
}

.app-shell.is-collapsed .brand,
.app-shell.is-collapsed .nav-item,
.app-shell.is-collapsed .collapse-menu {
  justify-content: center;
}

.app-shell.is-collapsed .sidebar-layout-control {
  padding: 5px 3px;
}

.app-shell.is-collapsed .sidebar-layout-control > div {
  gap: 2px;
}

.app-shell.is-collapsed .sidebar-layout-control button {
  min-height: 26px;
  font-size: 10px;
}

.app-shell.is-collapsed .collapse-menu svg {
  transform: rotate(180deg);
}

.workspace {
  min-width: 0;
  max-width: 100%;
  padding: 10px 12px 14px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.search {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 500px;
  max-width: 48vw;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background:var(--color-surface);
  color:var(--n-8a9490);
}

.search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 12px;
}

.global-search-results {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  z-index: 130;
  display: grid;
  width: min(620px, calc(100vw - 32px));
  max-height: 420px;
  overflow-y: auto;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:var(--color-surface);
  box-shadow: 0 18px 50px rgba(17, 27, 22, 0.18);
}

.global-search-results[hidden] {
  display: none;
}

.global-search-result {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.global-search-result:hover,
.global-search-result:focus-visible {
  background:var(--n-flaeche-leicht);
  outline: 0;
}

.global-search-result > svg {
  width: 17px;
  height: 17px;
  color: var(--green);
}

.global-search-result strong,
.global-search-result small {
  display: block;
}

.global-search-result small,
.global-search-result > span:last-child {
  color: var(--muted);
  font-size: 10px;
}

.topbar-actions,
.head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.secondary-button,
.icon-button,
.user-chip,
.full-button,
.primary-button {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:var(--color-surface);
  color: var(--text);
  font-size: 11px;
}

.secondary-button,
.primary-button,
.user-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
}

.user-chip > span:nth-child(2) {
  display: grid;
  gap: 1px;
  width: auto;
  height: auto;
  place-items: start;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.user-chip small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.topbar-actions {
  margin-left: auto;
}

.quick-create-wrap,
.notification-wrap {
  position: relative;
}

.quick-create-menu,
.notification-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 150;
  width: 280px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:var(--color-surface);
  box-shadow: 0 18px 50px rgba(17, 27, 22, 0.18);
}

.quick-create-menu[hidden],
.notification-panel[hidden] {
  display: none;
}

.quick-create-menu button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.quick-create-menu button:hover {
  background: var(--mint);
}

.quick-create-menu svg {
  width: 17px;
  height: 17px;
  color: var(--green);
}

.quick-create-menu strong,
.quick-create-menu small {
  display: block;
}

.quick-create-menu small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.notification-panel {
  width: min(390px, calc(100vw - 28px));
}

.notification-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 7px 10px;
  border-bottom: 1px solid var(--line-soft);
}

.notification-panel > header strong,
.notification-panel > header small {
  display: block;
}

.notification-panel > header small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.notification-list {
  display: grid;
  max-height: 410px;
  overflow-y: auto;
  padding-top: 5px;
}

.notification-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.notification-item:hover {
  background:var(--n-flaeche-leicht);
}

.notification-item > svg {
  width: 17px;
  height: 17px;
  color: var(--green);
}

.notification-item.is-urgent > svg,
.notification-item.is-urgent > b {
  color: var(--red);
}

.notification-item strong,
.notification-item small {
  display: block;
}

.notification-item small,
.notification-item b {
  color: var(--muted);
  font-size: 10px;
}

.icon-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  padding: 0;
}

.notice-button em {
  position: absolute;
  top: -7px;
  right: -4px;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--green);
  color:var(--color-surface);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.user-chip {
  gap: 8px;
}

.user-chip b {
  font-size: 11px;
}

.user-chip > span:first-child {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--green);
  color:var(--color-surface);
  font-size: 10px;
  font-weight: 700;
}

.user-chip > svg {
  width: 13px;
  height: 13px;
  color: var(--muted);
}

.user-menu-wrap {
  position: relative;
}

.user-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  min-width: 210px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:var(--color-surface);
  box-shadow: 0 16px 36px rgba(28, 43, 35, 0.14);
}

.user-menu[hidden] {
  display: none;
}

.user-menu > div {
  display: grid;
  gap: 2px;
  padding: 7px 8px 9px;
  border-bottom: 1px solid var(--line);
}

.user-menu small {
  color: var(--muted);
  font-size: 10px;
}

.user-menu button {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  padding: 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--red);
  font-size: 10px;
  font-weight: 700;
  text-align: left;
}

.user-menu button:hover {
  background:var(--sig-rot-fff3f4);
}

.user-menu button[data-user-menu-view]:hover {
  background:var(--n-flaeche-ruhig);
  color: var(--green);
}

.dashboard-task-tabs {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border-radius: 8px;
  background:var(--n-flaeche-ruhig);
}

.dashboard-task-tabs button {
  min-height: 24px;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.dashboard-task-tabs button.is-active {
  background:var(--sig-gruen-e7f4ed);
  color: var(--green);
  box-shadow: none;
}

.compact-tool-select {
  display: grid;
  gap: 2px;
  color: var(--muted);
  font-size: 10px;
}

.compact-tool-select select {
  min-height: 30px;
  padding: 0 28px 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:var(--color-surface);
  color: var(--text);
  font-size: 10px;
}

.compact-tool-select input {
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:var(--color-surface);
  color: var(--text);
  font-size: 10px;
}

.module-kpi.is-clickable {
  cursor: pointer;
}

.module-kpi.is-clickable:focus-visible {
  outline: 2px solid var(--green-2);
  outline-offset: 2px;
}

.role-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 0 8px 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:var(--color-surface);
}

.role-switch span {
  color: var(--muted);
  font-size: 10px;
}

.role-switch select {
  height: 24px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  outline: 0;
}

.nav-item:disabled,
.settings-tabs button:disabled,
.primary-button:disabled,
.secondary-button:disabled,
.icon-button:disabled,
.table-action:disabled,
.commission-billing-input:disabled,
.commission-amount input:disabled,
.commission-status-select:disabled {
  cursor: default;
  opacity: 0.55;
}

.nav-item:disabled:hover,
.settings-tabs button:disabled:hover {
  color:var(--n-25322d);
  background: transparent;
}

.customer-view {
  display: grid;
  gap: 8px;
}

.app-view {
  display: none;
}

.app-view.is-visible {
  display: grid;
  min-width: 0;
  max-width: 100%;
}

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 0;
  font-size: 14px;
  line-height: 1.15;
}

h3 {
  margin-bottom: 3px;
  font-size: 12px;
  line-height: 1.2;
}

p {
  margin-bottom: 0;
}

.profile-panel,
.panel,
.bottom-tabs {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.profile-panel {
  display: grid;
  grid-template-columns: minmax(350px, 1.1fr) minmax(255px, 0.85fr) minmax(300px, 1fr);
  gap: 14px;
  min-height: 108px;
  padding: 12px;
}

.profile-main {
  display: flex;
  align-items: center;
  gap: 13px;
}

.profile-main .avatar {
  margin-top: 4px;
}

.avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border:1px solid var(--n-d7e0db);
  background:var(--n-flaeche-ruhig);
}

.profile-copy {
  min-width: 0;
}

.name-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 3px;
}

.profile-copy h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.05;
}

.profile-copy p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
}

.profile-copy .phone {
  color: var(--text);
  font-weight: 600;
}

.customer-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--mint);
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
}

.customer-badge svg {
  width: 12px;
  height: 12px;
}

.mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  gap: 0;
  margin-top: 11px;
  font-size: 11px;
  line-height: 1.25;
}

.mini-grid span {
  /* 10 statt 13 Pixel: Bei 13 blieben je Zelle rund 64 Pixel Inhalt, und eine
     Kundennummer wie "K-2026-0001" brach mitten im Wort auf zwei Zeilen um.
     Gemessen am 29.08.2026 an einer echten Kundenakte. */
  padding: 0 10px;
  border-left: 1px solid var(--line-soft);
}

.mini-grid span:first-child {
  padding-left: 0;
  border-left: 0;
}

.mini-grid small,
.profile-stats small,
.timeline-text,
.timeline-date,
.timeline-author,
.panel p,
.commission-row span {
  color: var(--muted);
}

.mini-grid small {
  display: block;
  margin-bottom: 3px;
}

.profile-stats {
  display: grid;
  align-content: center;
  gap: 7px;
}

.profile-stats div {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.profile-stats strong {
  justify-self: end;
  font-size: 12px;
  font-weight: 600;
}

.select-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 66px;
  height: 22px;
  padding: 0 21px 0 10px;
  border-radius: 999px;
  font-size: 11px;
}

.select-pill::after {
  content: "";
  position: absolute;
  right: 9px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
}

/* Diese Statuswerte sind reine Information, keine Auswahl. Kein falscher Aufklapp-Pfeil. */
.profile-stats .select-pill {
  padding-right: 10px;
}

.profile-stats .select-pill::after {
  content: none;
}

.select-pill.success {
  color: var(--green);
  background: var(--mint);
}

.select-pill.gold {
  color:var(--sig-amber-8a5a00);
  background:var(--sig-amber-fff1b8);
}

.money-good {
  color: var(--green-2);
}

.quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-content: center;
}

.primary-button {
  border-color: var(--green);
  background: var(--green);
  color:var(--color-surface);
  font-weight: 700;
}

.primary-button:disabled {
  cursor: default;
  border-color: var(--line);
  background:var(--n-flaeche-ruhig);
  color: var(--green);
}

.primary-button.whatsapp {
  background:var(--color-primary);
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  align-items: start;
}

[data-layout-collapse-item].is-layout-collapsed > :not(:first-child) {
  display: none !important;
}

.is-layout-collapse-trigger {
  cursor: pointer;
  user-select: none;
}

.is-layout-collapse-trigger:hover h2,
.is-layout-collapse-trigger:hover > strong {
  color: var(--green);
}

.is-layout-collapse-trigger:focus-visible {
  outline: 2px solid rgba(11, 104, 73, 0.2);
  outline-offset: 3px;
  border-radius: 3px;
}

.is-collapse-head {
  cursor: pointer;
  user-select: none;
}

.is-collapse-head:hover h2 {
  color: var(--green);
}

.customer-layout-tools label {
  display: grid;
  gap: 3px;
}

.customer-layout-tools select {
  min-width: 170px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:var(--color-surface);
  color: var(--text);
  font-size: 10px;
}

.content-grid[data-columns="1"] {
  grid-template-columns: minmax(0, 1fr);
}

.content-grid[data-columns="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.customer-board-column {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.content-grid > .customer-board-column > [data-customer-grid-section] {
  min-width: 0;
  min-height: var(--customer-paired-min-height, 0);
}

[data-customer-section] {
  scroll-margin-block: 110px;
  transition: box-shadow 180ms ease, border-color 180ms ease;
}

[data-customer-section].is-focused {
  border-color: var(--green-2);
  box-shadow: 0 0 0 3px rgba(11, 104, 73, 0.12);
}

.customer-section-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.customer-section-move {
  display: none;
  align-items: center;
  gap: 3px;
  margin-left: 2px;
  padding-left: 5px;
  border-left: 1px solid var(--line-soft);
}

.customer-section-move .icon-button {
  width: 24px;
  min-height: 24px;
  padding: 0;
}

.customer-section-move svg {
  width: 12px;
  height: 12px;
}

.customer-section-drag-handle {
  display: inline-grid;
  place-items: center;
  width: 26px;
  min-height: 26px;
  margin-right: 2px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: grab;
  font-size: 17px;
  line-height: 1;
}

.customer-section-drag-handle:hover,
.customer-section-drag-handle:focus-visible {
  background: var(--mint);
  color: var(--green);
  outline: none;
}

.customer-section-drag-handle:active { cursor: grabbing; }
.is-customer-dragging { opacity: 0.45; }
.is-customer-drop-before { box-shadow: inset 0 3px 0 var(--green-2); }
.is-customer-drop-after { box-shadow: inset 0 -3px 0 var(--green-2); }
.is-customer-drop-empty { outline: 2px dashed var(--green-2); outline-offset: 4px; }

.customer-collapse-button svg {
  transition: transform 160ms ease;
}

.customer-collapse-button {
  flex: 0 0 auto;
}

[data-customer-section].is-collapsed .customer-collapse-button svg {
  transform: rotate(-90deg);
}

.customer-collapsible {
  min-width: 0;
}

[data-customer-section].is-collapsed .customer-collapsible {
  display: none;
}

.timeline-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}

.timeline-page-button {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:var(--color-surface);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.timeline-page-button:hover,
.timeline-page-button:focus-visible,
.timeline-page-button.is-current {
  border-color: var(--green-2);
  background: var(--mint);
  color: var(--green);
}

.timeline-page-button:disabled {
  cursor: default;
  opacity: .45;
}

.customer-repair-list {
  display: grid;
  gap: 7px;
  padding-top: 8px;
}

/* Reparatur-Zeile in der Kundenakte: eine Schriftgroesse fuer Ticket und
   Geraet, damit nichts heraussticht. Die Ticketspalte ist breit genug, dass
   "REP-2026-00002" in einer Zeile bleibt - vorher brach sie um und die Zeile
   stand dadurch schief. */
.customer-repair-item {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background:var(--color-surface);
  color: var(--text);
  text-align: left;
  font-size: var(--schrift-etikett);
}

.customer-repair-item > span:first-child {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.customer-repair-item > span:nth-child(2) {
  min-width: 0;
}

.customer-repair-item strong,
.customer-repair-item > span:nth-child(2) {
  font-size: var(--schrift-etikett);
  font-weight: 600;
}

.customer-repair-item > span:nth-child(2) {
  font-weight: 400;
}

.customer-repair-item svg {
  width: 14px;
  height: 14px;
  color: var(--green);
}

.customer-repair-item small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--schrift-mikro);
  font-weight: 400;
}

.module-filter-result {
  padding: 7px 2px 2px;
  color: var(--muted);
  font-size: 10px;
}

.module-table tr.is-clickable {
  cursor: pointer;
}

.module-table tr.is-clickable:hover td {
  background:var(--sig-gruen-f4faf7);
}

.panel {
  padding: 10px;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 26px;
  margin-bottom: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}

.panel-head select {
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:var(--color-surface);
  color:var(--n-2f3b35);
  font-size: 12px;
}

.activity-panel-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Der Kontaktverlauf kann in der Dreispaltenansicht schmal werden. Seine
   Werkzeuge umbrechen innerhalb der Karte statt in den Vertragsbereich zu ragen. */
.activity-panel > .panel-head {
  align-items: flex-start;
  flex-wrap: wrap;
}

.activity-panel .activity-panel-actions {
  min-width: 0;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.compact-button {
  min-height: 30px;
  padding: 0 9px;
  font-size: 10px;
}

.timeline {
  display: grid;
  position: relative;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 10.5px;
  width: 1px;
  background: var(--line-soft);
}

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 9px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}

.timeline-item.is-clickable {
  cursor: pointer;
  border-radius: 7px;
  transition: background 150ms ease, box-shadow 150ms ease;
}

.timeline-item.is-clickable:hover,
.timeline-item.is-clickable:focus-visible {
  background:var(--sig-gruen-f4faf7);
  box-shadow: 0 0 0 3px rgba(11, 104, 73, 0.1);
  outline: 0;
}

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

.timeline-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green-2);
  color:var(--color-surface);
}

.timeline-icon svg {
  width: 12.5px;
  height: 12.5px;
}

.timeline-icon.whatsapp {
  background:var(--sig-gruen-16a166);
}

.timeline-icon.offer {
  background:var(--color-info);
}

.timeline-icon.repair {
  background:var(--n-64707a);
}

.timeline-icon.repair svg {
  width: 13px;
  height: 13px;
}

.timeline-title {
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 700;
}

.timeline-text,
.timeline-author,
.timeline-date {
  font-size: 10px;
  line-height: 1.25;
}

.timeline-author {
  margin-top: 4px;
}

.timeline-empty {
  display: grid;
  place-items: center;
  gap: 4px;
  min-height: 130px;
  padding: 18px;
  color: var(--muted);
  text-align: center;
}

.timeline-empty svg {
  width: 22px;
  height: 22px;
  color: var(--green-2);
}

.timeline-follow-up {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  color: var(--green-2);
  font-size: 10px;
  font-weight: 700;
}

.timeline-follow-up svg {
  width: 11px;
  height: 11px;
}

/* Der Kontakt selbst hat keinen Stand - er hat stattgefunden. Farbe traegt
   deshalb ausschliesslich die Wiedervorlage: offen, ueberfaellig, erledigt. */
.timeline-follow-up.is-open { color: var(--sig-orange-b45309); }
.timeline-follow-up.is-danger { color: var(--sig-rot-dc2626); }
.timeline-follow-up.is-ok { color: var(--green-2); }

.full-button {
  width: 100%;
  margin-top: 8px;
}

.center-stack,
.contract-list {
  display: grid;
  gap: 8px;
}

.contract-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 104px;
  gap: 10px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
}

.carrier-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background:var(--color-surface);
  overflow: hidden;
}

.carrier-logo img {
  display: block;
  object-fit: contain;
}


/* Anbieter-Badge ohne Marken-Logo (Nutzungsrechte): einheitlicher Text-Badge je Größe. */
.carrier-logo.carrier-textbadge,
.pipeline-carrier.carrier-textbadge,
.customer-carrier-logo.carrier-textbadge,
.offer-carrier-logo.carrier-textbadge {
  background:var(--surface-2, var(--n-flaeche-ruhig));
  border:1px solid var(--border, var(--n-dfe8e3));
  color:var(--brand, var(--color-primary));
  font-weight: 700;
  line-height: 1;
}
.carrier-logo.carrier-textbadge { font-size: 12px; letter-spacing: .3px; }
.offer-carrier-logo.carrier-textbadge { font-size: 10px; }
.customer-carrier-logo.carrier-textbadge { font-size: 10px; }
.pipeline-carrier.carrier-textbadge { font-size: 10px; }

.tariff-logo {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: contain;
  background:var(--color-surface);
}

.contract-body h3 {
  font-size: 12px;
}

.contract-body p {
  color: var(--muted);
  font-size: 12px;
}

.contract-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  gap: 7px;
  margin-top: 7px;
}

.contract-meta span {
  color: var(--muted);
  font-size: 10px;
}

.contract-meta strong {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
}

.renewal {
  text-align: center;
}

.renewal span {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

.renewal strong {
  display: block;
  margin: 3px 0;
  font-size: 17px;
  line-height: 1;
}

.renewal strong.danger {
  color: var(--red);
}

.renewal strong.warning {
  color:var(--sig-amber-d48806);
}

.renewal-button {
  width: 100%;
  height: 24px;
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:var(--color-surface);
  color:var(--n-425049);
  font-size: 10px;
}

.link-button {
  min-height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.link-arrow::after {
  content: " >";
}

.data-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 10px;
}

.data-table thead {
  background:var(--n-flaeche-leicht);
}

.data-table th {
  color: var(--muted);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.data-table th,
.data-table td {
  padding: 7px 6px;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}

.data-table th:nth-child(1),
.data-table td:nth-child(1) {
  width: 19%;
}

.data-table th:nth-child(2),
.data-table td:nth-child(2) {
  width: 25%;
}

.data-table th:nth-child(3),
.data-table td:nth-child(3) {
  width: 17%;
}

.data-table th:nth-child(4),
.data-table td:nth-child(4) {
  width: 17%;
}

.data-table th:nth-child(5),
.data-table td:nth-child(5) {
  width: 22%;
}

.align-right {
  text-align: right !important;
}

.table-status {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
}

.table-status.open {
  color: var(--amber);
  background: var(--amber-soft);
}

.table-status.lost {
  color:var(--n-65716b);
  background:var(--n-flaeche-ruhig);
}

.table-status.won {
  color: var(--green);
  background: var(--mint);
}

.document-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.doc-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 8px;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
}

.doc-item strong {
  font-size: 10px;
}

.doc-item > span:last-child {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 10px;
}

.doc-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
}

.doc-status svg {
  width: 12px;
  height: 12px;
}

.doc-status.ok {
  color: var(--green-2);
  background: var(--mint);
}

.doc-status.missing {
  color: var(--red);
  background:var(--color-danger-soft);
}

.doc-status.warning {
  color:var(--sig-amber-d48806);
  background:var(--color-warning-soft);
}

.document-ledger {
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
}

.document-ledger-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px;
  border-bottom: 1px solid var(--line-soft);
  background:var(--color-app);
}

.document-ledger-head strong {
  font-size: 10px;
}

.document-ledger-head span {
  color: var(--muted);
  font-size: 10px;
}

.document-ledger-table {
  width: 100%;
  border-collapse: collapse;
}

.document-ledger-table th,
.document-ledger-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  font-size: 10px;
  vertical-align: top;
}

.document-ledger-table th {
  color: var(--muted);
  background:var(--color-sidebar);
  font-weight: 600;
}

.document-ledger-table tr:last-child td {
  border-bottom: 0;
}

.document-ledger-table strong,
.document-ledger-table small {
  display: block;
}

.document-ledger-table small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.document-ledger-table .document-download-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: var(--green-2);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.document-ledger-table .document-download-button svg {
  width: 11px;
  height: 11px;
}

.document-ledger-empty {
  display: grid;
  place-items: center;
  gap: 4px;
  min-height: 90px;
  padding: 16px;
  color: var(--muted);
  text-align: center;
}

.document-ledger-empty svg {
  width: 20px;
  height: 20px;
  color: var(--green-2);
}

.action-panel {
  border-color:var(--sig-amber-f0dcc0);
  background:linear-gradient(180deg, var(--sig-amber-fffaf1) 0%, var(--color-surface) 42%);
}

.recommendation-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border:1px solid var(--sig-amber-f1d39d);
  border-radius: 999px;
  background: var(--amber-soft);
  color: var(--amber);
  font-size: 10px;
  font-weight: 700;
}

.recommendation {
  display: grid;
  gap: 8px;
}

.recommendation-top {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
}

.brain {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--green);
  color:var(--color-surface);
}

.brain svg {
  width: 16px;
  height: 16px;
}

.recommendation p {
  font-size: 10px;
  line-height: 1.3;
}

.tariff-box {
  padding: 10px;
  border: 1px solid var(--mint-border);
  border-radius: 7px;
  background:var(--sig-gruen-f1fbf7);
}

.tariff-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.tariff-title small,
.benefits-title {
  color:var(--n-31423a);
  font-size: 10px;
  font-weight: 700;
}

.tariff-box p {
  margin-top: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 11px;
}

.benefits-title {
  margin-top: 9px;
}

.tariff-box ul {
  display: grid;
  gap: 5px;
  margin: 7px 0 0;
  padding: 0;
  list-style: none;
  color:var(--color-primary);
  font-size: 11px;
}

.tariff-box li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tariff-box li svg {
  width: 12px;
  height: 12px;
  color: var(--green-2);
}

.commission-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 8px;
  border-top:1px solid var(--sig-amber-eadbbf);
}

.commission-row strong {
  text-align: right;
  font-size: 17px;
  line-height: 1;
}

.commission-row small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.full {
  width: 100%;
}

.centered {
  justify-self: center;
}

.bottom-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 0 10px;
  box-shadow: none;
}

.bottom-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color:var(--n-39433e);
  font-size: 12px;
  font-weight: 700;
}

.bottom-tabs button.is-active {
  color: var(--green);
  border-bottom-color: var(--green);
}

.pipeline-view {
  gap: 10px;
}

/* VVL ist keine zweite Arbeitswelt: Der bestehende Pipeline-Baustein wird im
   Reiter Angebote → VVL gezeigt und bleibt deshalb ein kompakter Teil der
   Angebotsansicht. */
.offers-vvl-workspace {
  display: grid;
  gap: 10px;
}

.pipeline-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.pipeline-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
}

.pipeline-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pipeline-window-filter,
.pipeline-custom-days {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background:var(--color-surface);
}

.pipeline-window-filter > span,
.pipeline-custom-days > span {
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.pipeline-window-filter select,
.pipeline-custom-days input {
  min-width: 88px;
  height: 30px;
  padding: 0 6px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 10px;
}

.pipeline-custom-days input {
  width: 52px;
  min-width: 52px;
  text-align: right;
}

.pipeline-activation-toggle,
.pipeline-plan-input {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background:var(--color-surface);
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.pipeline-activation-toggle input {
  width: 14px;
  height: 14px;
  accent-color: var(--green);
}

.pipeline-plan-input {
  padding-right: 8px;
}

.pipeline-plan-input input {
  width: 76px;
  height: 30px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  text-align: right;
}

.pipeline-revenue-panel {
  display: grid;
  grid-template-columns: minmax(160px, 0.65fr) minmax(160px, 0.65fr) minmax(160px, 0.65fr) minmax(340px, 1.45fr);
  gap: 10px;
}

.pipeline-revenue-panel article {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background:var(--color-surface);
  box-shadow: var(--shadow);
}

.pipeline-revenue-panel small,
.pipeline-revenue-panel span {
  color: var(--muted);
  font-size: 10px;
}

.pipeline-revenue-panel strong {
  color: var(--green);
  font-size: 17px;
}

.pipeline-scale-card {
  grid-template-columns: 128px 1fr auto;
  align-items: center;
  column-gap: 12px;
}

.pipeline-scale {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background:var(--n-flaeche-ruhig);
}

.pipeline-scale span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  /* Feste Skala:rot links, gruen rechts. Der Verlauf ist immer ueber die
     gesamte Balkenbreite gespannt (background-size wird per JS gesetzt), sodass
     nur der tatsaechlich erreichte Anteil sichtbar wird. Niedrige Werte sind
     dadurch rot, nicht irrefuehrend gruen. */
  background-image: linear-gradient(90deg, var(--color-danger) 0%, var(--sig-orange-e2683a) 32%, var(--sig-amber-f3a53d) 52%, var(--n-9cca3c) 75%, var(--color-primary-strong) 100%);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 1000% 100%;
  transition: width 180ms ease, background-size 180ms ease;
}

/* Die Kundenkartei oeffnet als Dialog, das Board nutzt die volle Breite.
   `.pipeline-layout` wird nicht mehr verwendet. */
.pipeline-detail-dialog {
  width: min(820px, 100%);
}

.pipeline-detail-dialog .pipeline-detail {
  border: 0;
  padding: 0;
  background: transparent;
}


/* Die beiden Spalten sollen als EINE Flaeche wirken: Der Verlauf laeuft ueber
   das ganze Board von Rot (dringend) nach Orange (dieser Monat) durch, statt
   an der Spaltenkante zu enden. So liest sich "Dieser Monat" als Fortsetzung
   und nicht als getrennter Kasten. */
.pipeline-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  gap: 0;
  padding: 5px;
  border-radius: 10px;
  background:linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--color-surface) 62%),
    linear-gradient(100deg, rgba(194, 65, 85, 0.16) 0%, rgba(224, 118, 72, 0.15) 42%, rgba(243, 165, 61, 0.16) 100%);
}

.pipeline-column {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 5px;
  border-radius: 8px;
}

/* Eigene Spaltenhintergruende entfallen - der Verlauf kommt vom Board und
   laeuft dadurch ueber beide Spalten hinweg durch. */
.pipeline-column {
  background: transparent;
}

.pipeline-column + .pipeline-column {
  padding-left: 8px;
}

/* Spalten "Vorbereiten" und "Spaeter" entfallen - die VVL-Pipeline zeigt nur
   noch, was jetzt oder in diesem Monat bearbeitbar ist. */

.pipeline-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background:var(--color-surface);
  border-top-width: 3px;
}

.pipeline-column.urgent .pipeline-column-head {
  border-top-color: var(--red);
}

.pipeline-column.month .pipeline-column-head {
  border-top-color:var(--sig-amber-f3a53d);
}


.pipeline-column-head div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pipeline-column-head strong {
  font-size: 11px;
}

.pipeline-column-head span {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background:var(--n-flaeche-ruhig);
  color:var(--n-435049);
  font-size: 10px;
}

.pipeline-column-head b {
  font-size: 10px;
  font-weight: 600;
}

.pipeline-cards {
  display: grid;
  gap: 8px;
}

.pipeline-empty {
  min-height: 118px;
  padding: 24px 12px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.65);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
  text-align: center;
}

.pipeline-card {
  display: grid;
  gap: 6px;
  padding: 8px 8px 8px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background:var(--color-surface);
  box-shadow: 0 8px 20px rgba(28, 43, 35, 0.045);
}

.pipeline-card:hover,
.pipeline-card.is-selected {
  border-color: var(--green-2);
  box-shadow: 0 0 0 2px rgba(11, 104, 73, 0.1), 0 8px 20px rgba(28, 43, 35, 0.07);
}

.pipeline-card:focus-visible {
  outline: 2px solid var(--green-2);
  outline-offset: 2px;
}

.pipeline-card.danger {
  border-left: 2px solid rgba(194, 65, 85, 0.78);
  box-shadow: inset 2px 0 0 rgba(194, 65, 85, 0.05), 0 8px 20px rgba(28, 43, 35, 0.045);
}

.pipeline-card.warning {
  border-left: 2px solid rgba(243, 165, 61, 0.82);
  box-shadow: inset 2px 0 0 rgba(243, 165, 61, 0.05), 0 8px 20px rgba(28, 43, 35, 0.045);
}

.pipeline-card.neutral {
  border-left: 2px solid rgba(153, 170, 161, 0.58);
  box-shadow: inset 2px 0 0 rgba(153, 170, 161, 0.04), 0 8px 20px rgba(28, 43, 35, 0.045);
}

.pipeline-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 7px;
}

.pipeline-card h3 {
  font-size: 10px;
  line-height: 1.15;
}

.pipeline-card-top > strong {
  text-align: right;
  font-size: 11px;
  white-space: nowrap;
}

.pipeline-card-top small {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.pipeline-tariff {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.1;
  min-height: 17px;
}

.pipeline-carrier,
.mini-carrier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 3px;
  flex: 0 0 auto;
  background:var(--color-surface);
  overflow: hidden;
}

.pipeline-carrier img,
.mini-carrier img {
  display: block;
  object-fit: contain;
}


.mini-carrier {
  width: 18px;
  height: 18px;
}

.mini-carrier img {
  width: 17px;
  height: 17px;
}

.pipeline-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 10px;
}

.pipeline-card.danger .pipeline-meta span:first-child {
  color: var(--red);
  font-weight: 700;
}

.pipeline-card.warning .pipeline-meta span:first-child {
  color:var(--sig-amber-d48806);
  font-weight: 700;
}

.pipeline-last {
  color: var(--muted);
  font-size: 10px;
}

.pipeline-task-note {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--mint);
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
}

.pipeline-task-note svg {
  width: 11px;
  height: 11px;
}

.pipeline-actions {
  display: flex;
  gap: 6px;
}

.pipeline-actions button {
  display: grid;
  place-items: center;
  width: 27px;
  height: 25px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:var(--color-surface);
  color:var(--n-31423a);
}

.pipeline-actions button:first-child {
  background: var(--green);
  color:var(--color-surface);
}

.pipeline-actions button.is-done {
  border-color: var(--mint-border);
  background: var(--mint);
  color: var(--green);
}

.pipeline-actions button:disabled {
  cursor: default;
}

.pipeline-actions svg {
  width: 13px;
  height: 13px;
}

.pipeline-detail {
  display: grid;
  gap: 10px;
}

.vvl-window-setting {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}

.vvl-window-setting > div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-right: auto;
}

.vvl-setting-icon {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background:var(--sig-gruen-eaf5ef);
  color: var(--green);
}

.vvl-setting-icon svg {
  width: 16px;
  height: 16px;
}

.vvl-window-setting h2 {
  font-size: 12px;
}

.vvl-window-setting p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.vvl-window-setting > label {
  display: grid;
  gap: 4px;
  flex: 0 0 118px;
}

.vvl-window-setting > label > span {
  color: var(--muted);
  font-size: 10px;
}

.vvl-window-setting select,
.vvl-window-setting input {
  width: 100%;
  height: 32px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background:var(--color-surface);
  color: var(--ink);
  font: inherit;
  font-size: 10px;
}

.detail-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line-soft);
}

.detail-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.detail-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.detail-actions button {
  display: grid;
  place-items: center;
  gap: 4px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background:var(--color-surface);
  color:var(--n-25322d);
  font-size: 10px;
}

.detail-block {
  display: grid;
  gap: 7px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}

.detail-block h3 {
  font-size: 11px;
}

.detail-block dl {
  display: grid;
  gap: 6px;
  margin: 0;
}

.detail-block dl div {
  display: grid;
  grid-template-columns: 95px 1fr;
  gap: 8px;
  font-size: 10px;
}

.detail-block dt {
  color: var(--muted);
}

.detail-block dd {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-weight: 600;
}

.danger-text {
  color: var(--red);
}

.offer-block {
  padding: 10px;
  border: 1px solid var(--mint-border);
  border-radius: 7px;
  background:var(--sig-gruen-f1fbf7);
}

.offer-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.offer-block > strong {
  font-size: 12px;
}

.offer-block p,
.offer-block li {
  color:var(--n-34453e);
  font-size: 10px;
}

.offer-block ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.offer-block li {
  display: flex;
  align-items: center;
  gap: 5px;
}

.offer-block li svg,
.consent-list svg {
  width: 12px;
  height: 12px;
  color: var(--green-2);
}

.offer-commission {
  display: flex;
  align-items: end;
  justify-content: space-between;
  font-size: 10px;
}

.offer-commission span {
  color: var(--muted);
}

.offer-commission strong {
  color: var(--green-2);
  font-size: 12px;
}

.consent-list,
.mini-timeline {
  display: grid;
  gap: 5px;
  font-size: 10px;
}

.consent-list span {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: 4px;
}

.consent-list b {
  color: var(--green-2);
  font-size: 10px;
}

.mini-timeline span {
  color: var(--muted);
}

.mini-timeline b {
  color: var(--text);
}

.next-action {
  display: grid;
  gap: 8px;
}

.next-action span {
  color: var(--muted);
  font-size: 10px;
}

.next-action b {
  color: var(--red);
}

.pipeline-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.pipeline-kpis article {
  display: grid;
  grid-template-columns: 1fr 92px;
  gap: 3px 8px;
  min-height: 66px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background:var(--color-surface);
}

.pipeline-kpis small {
  color: var(--muted);
  font-size: 10px;
}

.pipeline-kpis strong {
  font-size: 22px;
}

.pipeline-kpis span {
  font-size: 10px;
}

.positive {
  color: var(--green-2);
}

.negative {
  color: var(--red);
}

.sparkline {
  grid-row: 1 / span 3;
  grid-column: 2;
  align-self: center;
  height: 34px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.sparkline.up {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline fill='none' stroke='%230b6849' stroke-width='2.5' points='2,28 18,25 30,18 44,22 58,12 72,18 88,7 98,4'/%3E%3C/svg%3E");
}

.sparkline.down {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline fill='none' stroke='%23c24155' stroke-width='2.5' points='2,22 18,20 32,18 45,24 58,13 70,25 84,28 98,31'/%3E%3C/svg%3E");
}

.dashboard-view {
  gap: 16px;
}

.dashboard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.dashboard-head h1 {
  font-size: 22px;
}

.dashboard-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.task-customer-open {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.task-customer-open:hover strong,
.task-customer-open:focus-visible strong {
  color: var(--green);
  text-decoration: underline;
}

/* Toggle-Schalter (Modul ein/aus) */
.toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.toggle-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.toggle-track {
  position: relative;
  flex: none;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background:var(--n-cdd6d1);
  transition: background 160ms ease;
}

.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:var(--color-surface);
  box-shadow: 0 1px 3px rgba(19, 45, 34, 0.28);
  transition: transform 160ms ease;
}

.toggle-switch input:checked + .toggle-track {
  background: var(--green);
}

.toggle-switch input:checked + .toggle-track .toggle-thumb {
  transform: translateX(18px);
}

.toggle-text {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  min-width: 22px;
}

.toggle-switch input:checked ~ .toggle-text {
  color: var(--green);
}

.toggle-switch input:focus-visible + .toggle-track {
  outline: 2px solid rgba(11, 104, 73, 0.35);
  outline-offset: 2px;
}

.toggle-switch input:disabled + .toggle-track {
  opacity: 0.5;
}

.toggle-switch:has(input:disabled) {
  cursor: not-allowed;
}

/* Klickbare Kalendereintraege */
[data-calendar-event].is-clickable {
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

[data-calendar-event].is-clickable:hover {
  border-color: var(--green);
  background: var(--mint);
}

.daily-close-view {
  gap: 10px;
}

.cash-system-notice {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border:1px solid var(--sig-amber-e6c778);
  border-left:4px solid var(--color-warning);
  border-radius: 12px;
  background:var(--sig-amber-fff9e8);
  color:var(--sig-amber-604810);
  font-size: 12px;
  line-height: 1.45;
}

.cash-system-notice strong { font-size: 12px; }

.daily-close-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.daily-close-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}

.daily-close-status div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.daily-close-status small,
.daily-close-status span {
  color: var(--muted);
  font-size: 10px;
}

.daily-close-status strong {
  font-size: 12px;
}

.daily-close-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.daily-close-wide {
  grid-column: 1 / -1;
}

.daily-close-panel {
  display: grid;
  gap: 10px;
}

.daily-close-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}

.daily-close-head h2 {
  font-size: 14px;
}

.daily-close-head span {
  color: var(--muted);
  font-size: 10px;
}

.daily-performance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.daily-performance article {
  display: grid;
  gap: 4px;
  min-height: 76px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background:var(--n-flaeche-leicht);
}

.daily-performance span,
.daily-performance small {
  color: var(--muted);
  font-size: 10px;
}

.daily-performance strong {
  font-size: 17px;
}

.daily-list,
.daily-audit-list {
  display: grid;
}

.daily-list article,
.daily-audit-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}

.daily-audit-list article {
  grid-template-columns: 112px minmax(0, 1fr);
}

.daily-list strong,
.daily-audit-list strong {
  display: block;
  font-size: 10px;
}

.daily-list span,
.daily-list b,
.daily-audit-list span,
.daily-audit-list small {
  color: var(--muted);
  font-size: 10px;
}

.daily-empty {
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}

.daily-close-history {
  display: grid;
}

.daily-close-history article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}

.daily-report-history-open {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.daily-report-history-open:hover { background:var(--color-app); }

.daily-report-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(20, 37, 29, .38);
}

.daily-report-detail-dialog {
  width: min(100%, 620px);
  padding: 22px;
  border-radius: 14px;
  background:var(--color-surface);
  box-shadow: 0 24px 70px rgba(17, 34, 25, .25);
}

.daily-report-detail-head { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.daily-report-detail-head span, .daily-report-detail-head h2 { display: block; margin: 0; }
.daily-report-detail-head span { color: var(--muted); font-size: 12px; }
.daily-report-detail-head h2 { margin-top: 3px; font-size: 22px; }
.daily-report-detail-note, .daily-report-detail-foot { color: var(--muted); font-size: 12px; line-height: 1.5; }
.daily-report-detail-note { margin: 16px 0; padding: 10px 12px; border-left:3px solid var(--color-warning); background:var(--sig-amber-fff9e8); color:var(--sig-amber-604810); }
.daily-report-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.daily-report-detail-grid div { padding: 11px; border: 1px solid var(--border); border-radius: 10px; }
.daily-report-detail-grid dt { color: var(--muted); font-size: 11px; }
.daily-report-detail-grid dd { margin: 3px 0 0; font-weight: 700; }

.daily-close-history strong,
.daily-close-history span {
  display: block;
}

.daily-close-history strong {
  font-size: 11px;
}

.daily-close-history span {
  color: var(--muted);
  font-size: 10px;
}

.daily-close-history-values {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.daily-close-history-values b {
  color: var(--green);
  font-size: 11px;
}

.dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.dash-kpi {
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 86px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:var(--color-surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.dash-kpi:hover {
  border-color:var(--n-9dbdaf);
  box-shadow: 0 8px 22px rgba(28, 43, 35, 0.09);
  transform: translateY(-1px);
}

.dash-kpi:focus-visible {
  outline: 3px solid rgba(11, 104, 73, 0.18);
  outline-offset: 2px;
}

.dash-kpi .kpi-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.dash-kpi .kpi-icon svg {
  width: 22px;
  height: 22px;
}

.dash-kpi.revenue .kpi-icon {
  color: var(--green-2);
  background:var(--sig-gruen-e7f4ed);
}

.dash-kpi.due .kpi-icon {
  color:var(--sig-orange-f26a21);
  background:var(--sig-orange-fff0e6);
}

.dash-kpi.offers .kpi-icon {
  color:var(--sig-blau-3559d6);
  background:var(--sig-blau-eef2ff);
}

.dash-kpi.calls .kpi-icon {
  color: var(--green);
  background:var(--color-primary-soft);
}

.dash-kpi strong {
  display: block;
  font-size: 22px;
  line-height: 1;
}

.dash-kpi.revenue strong,
.dash-kpi.calls strong {
  color: var(--green-2);
}

.dash-kpi.due strong {
  color:var(--sig-orange-f26a21);
}

.dash-kpi.offers strong {
  color:var(--sig-blau-3559d6);
}

.dash-kpi b {
  display: block;
  margin-top: 4px;
  font-size: 11px;
}

.dash-kpi small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.dash-kpi em {
  color: var(--green-2);
  font-style: normal;
  font-weight: 700;
}

.dashboard-main-grid {
  display: grid;
  grid-template-columns: minmax(560px, 1.25fr) minmax(380px, 0.95fr);
  gap: 10px;
}

.dashboard-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.dashboard-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
  min-width: 0;
}

/* Persönliche Stempeluhr im normalen Dashboard-Raster. Sie bleibt so kompakt
   wie Monatsziele und andere Arbeitskarten; sichtbar sind jeweils nur die im
   aktuellen Zustand möglichen Aktionen. */
.dashboard-time-clock {
  display: grid;
  gap: 10px;
}

.dashboard-time-clock-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.dashboard-time-clock-status,
.dashboard-break-exception {
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background:var(--n-flaeche-leicht);
}

.dashboard-time-clock-status strong,
.dashboard-break-exception strong { display: block; font-size: 12px; }
.dashboard-time-clock-status span,
.dashboard-break-exception p { display: block; margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }

.dashboard-time-clock-status.is-break-due,
.time-clock-status.is-break-due,
.dashboard-break-exception { border-color:var(--sig-amber-e2b66d); background:var(--sig-amber-fff9ed); }

.dashboard-time-clock-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.dashboard-time-clock-actions button { min-height: 32px; font-size: 11px; }
.dashboard-break-exception > div { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }

.time-clock-status .dashboard-break-exception {
  margin-top: 10px;
  text-align: left;
}

.time-compliance-note {
  display: block;
  margin-top: 3px;
  color:var(--sig-amber-9a5b13);
  font-size: 10px;
  font-weight: 700;
}

@media (max-width: 720px) {
  .dashboard-time-clock-actions button { flex: 1 1 calc(50% - 7px); }
  .dashboard-time-clock-actions button:first-child,
  .dashboard-time-clock-actions button:last-child { flex-basis: 100%; }
}

.dashboard-card-grid[data-columns="1"] {
  grid-template-columns: minmax(0, 1fr);
}

.dashboard-card-grid[data-columns="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-card-grid[data-columns="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Karten bleiben im vertrauten Raster; ihre Reihenfolge wird je Benutzer
   gespeichert und kann direkt per Ziehen angepasst werden. */
.dashboard-card-grid > [data-dashboard-card] {
  display: block;
  height: 100%;
  width: auto;
  margin-bottom: 0;
}

.dashboard-card-grid > [data-dashboard-card][hidden],
#dashboardDistributorTargetsCard[hidden] {
  display: none;
}

.dashboard-card-grid > [data-dashboard-card].is-dashboard-user-hidden,
#dashboardEndspurtBanner.is-dashboard-user-hidden {
  display: none !important;
}

/* Karten einer Zeile bilden immer eine bündige Arbeitsfläche. Die Mindesthöhe
   hält die Vorschläge auch bei nur einem Hinweis ruhig und lesbar. */
.dashboard-card-grid > [data-dashboard-card="ai"],
.dashboard-card-grid > [data-dashboard-card="goals"] {
  min-height: 166px;
}

.dashboard-inline-metric {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  width: 100%;
  margin-top: 12px;
  padding: 9px 0;
  border: 0;
  border-top: 1px solid var(--line-soft);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.dashboard-inline-metric span,
.dashboard-inline-metric small { color: var(--muted); font-size: 10px; }
.dashboard-inline-metric strong { color: var(--green); font-size: 12px; }
.dashboard-inline-metric small { grid-column: 1 / -1; }
.dashboard-inline-metric:hover strong { text-decoration: underline; }

.dashboard-table th:nth-child(1),
.dashboard-table td:nth-child(1) { width: 88px; }
.dashboard-table th:nth-child(3),
.dashboard-table td:nth-child(3) { width: 92px; }
.dashboard-table th:nth-child(4),
.dashboard-table td:nth-child(4) { width: 96px; }

[data-dashboard-card] {
  min-width: 0;
  max-width: 100%;
}

[data-dashboard-card][draggable="true"] > .dash-panel-head {
  cursor: grab;
}

[data-dashboard-card].is-dragging {
  opacity: 0.45;
}

[data-dashboard-card].is-drag-target {
  box-shadow: 0 0 0 3px rgba(11, 104, 73, 0.18);
}

.dashboard-table-scroll {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
}

.dashboard-table-scroll .dashboard-table {
  min-width: 0;
}

/* Auf dem Desktop passt die kompakte Aufgabenübersicht in ihre Karte. Erst auf
   schmalen Ansichten bleibt die Tabelle bewusst breit genug zum horizontalen
   Scrollen, damit Fälligkeit und Aktionen vollständig lesbar bleiben. */
@media (max-width: 760px) {
  /* Die horizontale Navigation scrollt in der Sidebar selbst. Ein zusaetzlicher
     Seiten-Scrollbar entstand unter Windows durch Zoom plus Browser-Scrollbar
     und machte die gesamte 400-px-Ansicht seitlich verschiebbar. */
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .dashboard-table-scroll .dashboard-table {
    min-width: 640px;
  }
}

.monthly-goal-list,
.birthday-list {
  display: grid;
  gap: 8px;
}

/* Zielzeilen als kompakte Kacheln, mehrspaltig.
   Vorher lief jede Zeile ueber die volle Breite: Name ganz links, Zahl ganz
   rechts, dazwischen eine leere Flaeche, die nichts sagte - und bei zehn
   Zielarten eine Kachel, durch die man scrollen muss. Jetzt fuellen sich so
   viele Spalten, wie hineinpassen, und Name und Zahl stehen beieinander. */
.monthly-goal-list {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px;
  padding-top: 10px;
}

.monthly-goal-item {
  display: grid;
  /* Name links, Zahl rechtsbuendig am Kachelrand. Die Kachel ist schmal
     genug, dass beides zusammengehoert - die leere Flaeche von frueher kam
     von der vollen Zeilenbreite, nicht von der Ausrichtung. Erste Spalte
     schrumpft: lange Namen kuerzen mit Ellipse, statt die Zahl wegzudruecken. */
  grid-template-columns: minmax(0, 1fr) max-content;
  grid-template-areas:
    "name wert"
    "balken balken";
  align-items: baseline;
  gap: 4px 10px;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--color-surface-subtle);
}

.monthly-goal-item.is-erreicht {
  border-color: var(--color-primary-border);
  background: var(--color-primary-soft);
}

.monthly-goal-item > span:not(.monthly-goal-track) {
  grid-area: name;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
}

.monthly-goal-item > b {
  grid-area: wert;
  text-align: right;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.15;
  color: var(--text);
}

.monthly-goal-item.is-erreicht > b {
  color: var(--green);
}

/* Ein Hinweistext (etwa "Ohne Ziel: ...") gehoert unter die Kacheln, nicht in
   eine der Spalten - sonst rutscht er neben eine Kachel und sieht aus, als
   gehoere er zu ihr. */
.monthly-goal-list > .ziele-hinweis {
  grid-column: 1 / -1;
}

.monthly-goal-track {
  grid-area: balken;
  position: relative;
  width: 100%;
  max-width: none;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background:var(--color-border);
}

.monthly-goal-track i {
  position: absolute;
  inset: 0;
  display: block;
  height: 100%;
  border-radius: inherit;
  background:linear-gradient(90deg, var(--color-danger) 0%, var(--sig-orange-ef7837) 34%, var(--sig-amber-f2c94c) 62%, var(--sig-gruen-2b9a68) 100%);
  clip-path: inset(0 calc(100% - var(--goal-progress)) 0 0);
}

.birthday-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background:var(--color-surface);
}

.birthday-item > span:first-child {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:var(--sig-amber-fff1e2);
  color:var(--sig-amber-a65b00);
  font-weight: 700;
}

.birthday-item strong,
.birthday-item small {
  display: block;
}

.birthday-item small {
  color: var(--muted);
  font-size: 10px;
}

.birthday-customer-open {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.birthday-customer-open:hover strong,
.birthday-customer-open:focus-visible strong {
  color: var(--green);
  text-decoration: underline;
}

.birthday-customer-open:focus-visible {
  outline: 3px solid rgba(11, 104, 73, 0.18);
  outline-offset: 3px;
  border-radius: 5px;
}

.birthday-contact-status {
  margin-left: 4px;
  font-style: normal;
  font-weight: 700;
}

.birthday-contact-status.is-allowed { color: var(--green); }
.birthday-contact-status.is-missing { color:var(--sig-amber-a65b00); }

.dash-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}

.dash-panel-head h2 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dash-panel-head h2 span {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  background:var(--sig-gruen-e7f4ed);
  color: var(--green);
  font-size: 10px;
}

.dash-panel-head small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

/* Die Aufgaben-Tabelle ist bereits selbst klar begrenzt. Eine zweite Linie
   und ein leerer Zwischenraum im Karteninneren erzeugen nur einen Stilbruch. */
.dash-table-card .dash-panel-head {
  padding-bottom: 10px;
  border-bottom: 0;
}

.dash-table-card .dashboard-table {
  margin-top: 0;
}

.dashboard-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-top: 6px;
  font-size: 10px;
}

.dashboard-table thead {
  background:var(--n-flaeche-leicht);
}

.dashboard-table th,
.dashboard-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: middle;
}

.dashboard-table th {
  color: var(--muted);
  font-weight: 600;
}

.dashboard-table td strong {
  display: block;
  font-size: 10px;
}

.dashboard-table td small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.dashboard-table th:nth-child(1),
.dashboard-table td:nth-child(1) {
  width: 78px;
}

.dashboard-table th:nth-child(4),
.dashboard-table td:nth-child(4) {
  /* Zwei Aktionsknöpfe (2 × 24 px) plus Abstand und Zellränder benötigen
     tatsächlich 76 px. Die frühere 58-px-Spalte erzeugte einen dauerhaften
     Mini-Überlauf samt leerer horizontaler Scrollleiste. */
  width: 76px;
}

.dashboard-table th:nth-child(5),
.dashboard-table td:nth-child(5),
.dashboard-table th:nth-child(6),
.dashboard-table td:nth-child(6) {
  width: 70px;
}

.dashboard-table th:nth-child(7),
.dashboard-table td:nth-child(7) {
  width: 78px;
}

.priority {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
}

.priority::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.priority.high {
  color:var(--sig-rot-ff2f45);
  font-weight: 700;
}

.priority.high::before {
  background:var(--sig-rot-ff2f45);
  box-shadow: 0 0 0 3px rgba(255, 47, 69, 0.1);
}

.priority.medium {
  color:var(--sig-orange-f26a21);
}

.priority.medium::before {
  background:var(--sig-orange-f26a21);
}

.priority.low {
  color:var(--n-6f7d76);
}

.priority.low::before {
  background:var(--n-aab5af);
}

.due-time {
  font-weight: 700;
}

.due-time.high {
  color: var(--red);
}

.due-time.medium {
  color:var(--sig-orange-f26a21);
}

.due-time.low {
  color:var(--n-56635d);
}

.task-actions {
  display: flex;
  gap: 5px;
}

.task-actions button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background:var(--color-surface);
  color:var(--n-31423a);
}

.task-actions button:first-child {
  background: var(--green);
  color:var(--color-surface);
}

.task-actions svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dash-task-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}

.dash-task-footer span {
  color: var(--muted);
  font-size: 10px;
}

.dash-open-list {
  display: block;
}

.ai-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.ai-item {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 9px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background:var(--color-surface);
}

.ai-star {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--green);
  background:var(--sig-gruen-eff8f3);
}

.ai-star svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
}

.ai-item h3 {
  font-size: 11px;
}

.ai-item p {
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.35;
}

.ai-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 88px;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:var(--color-surface);
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
}

.ai-action svg {
  width: 12px;
  height: 12px;
}

.ai-action.is-primary {
  border-color: var(--green);
  background: var(--green);
  color:var(--color-surface);
}

.forecast-value {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  margin-top: 9px;
}

.forecast-value strong,
.missed-value strong {
  font-size: 22px;
}

.forecast-value span,
.missed-value span {
  color: var(--muted);
  font-size: 10px;
}

.forecast-value em {
  align-self: start;
  color: var(--green-2);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.forecast-chart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  height: 120px;
  margin-top: 8px;
}

.forecast-chart-scale {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 0 10px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}

.forecast-chart-scale span:first-child {
  color: var(--green-2);
  font-weight: 700;
}

.line-chart {
  height: 120px;
  min-width: 0;
}

.line-chart svg {
  width: 100%;
  height: 100%;
}

.grid-line {
  stroke:var(--auf-farbe);
  stroke-width: 1;
}

.forecast-range {
  fill: rgba(31, 122, 85, 0.13);
  stroke: none;
}

.forecast-actual-line,
.forecast-projection-line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.forecast-actual-line { stroke: var(--green); }

.forecast-projection-line {
  stroke:var(--n-6ca58d);
  stroke-dasharray: 5 5;
}

.forecast-current-dot {
  fill: var(--green);
  stroke:var(--color-surface);
  stroke-width: 2;
}

.forecast-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 10px;
}

.forecast-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.forecast-legend i {
  display: inline-block;
  width: 14px;
  height: 3px;
  border-radius: 99px;
  background: var(--green);
}

.forecast-legend i.is-projection {
  background:repeating-linear-gradient(90deg, var(--n-6ca58d) 0 4px, transparent 4px 7px);
}

.forecast-legend i.is-range {
  height: 8px;
  background: rgba(31, 122, 85, 0.13);
  border: 1px solid rgba(31, 122, 85, 0.22);
}

.forecast-chart-empty {
  margin: 16px 0 0;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
}

.incoming-value {
  display: grid;
  gap: 2px;
  margin-top: 16px;
}

.incoming-value strong {
  color: var(--green);
  font-size: 22px;
}

.incoming-value span,
.incoming-note,
.incoming-explanation {
  color: var(--muted);
  font-size: 10px;
}

.incoming-note {
  margin: 16px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}

.incoming-note strong {
  color: var(--ink);
}

.incoming-explanation {
  margin: 8px 0 0;
  line-height: 1.45;
}

.provider-content {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
}

.donut-chart {
  position: relative;
  width: 145px;
  height: 145px;
  border-radius: 50%;
  background:conic-gradient(var(--magenta) 0 37%, var(--vodafone) 37% 65%, var(--color-info) 65% 87%, var(--n-748196) 87% 96%, var(--n-c7d0cc) 96% 100%);
}

.donut-chart::after {
  content: "";
  position: absolute;
  inset: 34px;
  border-radius: 50%;
  background:var(--color-surface);
}

.donut-chart span {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  text-align: center;
  font-size: 10px;
}

.donut-chart strong {
  font-size: 14px;
}

.donut-chart small {
  color: var(--muted);
}

.provider-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 10px;
}

.provider-list li {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  gap: 7px;
  align-items: center;
}

.provider-list i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
}

.provider-color { background:var(--provider-color, var(--n-c7d0cc)); }

.provider-list span {
  color: var(--muted);
}

.missed-value {
  display: grid;
  margin-top: 9px;
}

.missed-list {
  display: grid;
  gap: 0;
  margin-top: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  overflow: hidden;
}

.missed-list div {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 9px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 10px;
}

.missed-list div:last-child {
  border-bottom: 0;
}

.missed-list b {
  color: var(--red);
}

.missed-list em {
  padding: 2px 6px;
  border-radius: 999px;
  background:var(--n-flaeche-ruhig);
  color:var(--n-52605a);
  font-size: 10px;
  font-style: normal;
}

.chance-link {
  display: block;
  margin: 8px 0 0 auto;
}

.customer-directory {
  gap: 10px;
}

.directory-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.directory-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.directory-actions button span {
  font-size: 10px;
}

.customer-management-dialog {
  width: min(840px, 100%);
}

.customer-management-panel {
  display: grid;
  gap: 12px;
}

.customer-management-panel[hidden] {
  display: none;
}

.management-intro {
  display: grid;
  gap: 4px;
  padding: 14px 16px 0;
}

.management-intro strong {
  font-size: 12px;
}

.management-intro span {
  color: var(--muted);
  font-size: 10px;
}

.csv-import-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0 16px;
}

.csv-import-summary article {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background:var(--n-flaeche-leicht);
}

.csv-import-summary small {
  color: var(--muted);
  font-size: 10px;
}

.customer-import-preview,
.customer-trash-list {
  display: grid;
  gap: 7px;
  max-height: 390px;
  overflow-y: auto;
  padding: 0 16px 16px;
}

.customer-import-row,
.customer-trash-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background:var(--color-surface);
}

.customer-import-row.is-duplicate {
  background:var(--sig-amber-fff7e8);
}

.customer-import-row.is-ready b {
  color: var(--green);
}

.customer-import-row.is-duplicate b {
  color:var(--sig-amber-a65b00);
}

.customer-import-row b {
  font-size: 10px;
}

.customer-import-row strong,
.customer-import-row small,
.customer-trash-item strong,
.customer-trash-item small {
  display: block;
}

.customer-import-row small,
.customer-trash-item small {
  color: var(--muted);
  font-size: 10px;
}

.directory-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
}

.customer-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.customer-kpis article {
  display: grid;
  gap: 3px;
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--green-2);
  border-radius: 7px;
  background:var(--color-surface);
  box-shadow: var(--shadow);
}

.customer-kpis article.vvl {
  border-top-color:var(--sig-amber-f3a53d);
}

.customer-kpis article.contact {
  border-top-color:var(--sig-blau-4f7cff);
}

.customer-kpis article.consent {
  border-top-color: var(--red);
}

.customer-kpis small,
.customer-kpis span {
  color: var(--muted);
  font-size: 10px;
}

.customer-kpis strong {
  font-size: 22px;
  line-height: 1.05;
}

.customer-index {
  display: grid;
  gap: 10px;
  overflow: hidden;
}

.customer-view-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
  overflow-x: auto;
}

.customer-view-tabs button {
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color:var(--n-4d5a54);
  font-size: 10px;
  white-space: nowrap;
}

.customer-view-tabs button:hover,
.customer-view-tabs button.is-active {
  color: var(--green);
  background: var(--mint);
  font-weight: 700;
}

.customer-search-tools {
  display: grid;
  grid-template-columns: minmax(330px, 1.6fr) minmax(150px, 0.65fr) minmax(165px, 0.7fr) auto;
  gap: 8px;
  align-items: end;
}

.customer-search-tools > label:not(.directory-search) {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
}

.customer-search-tools select {
  width: 100%;
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:var(--color-surface);
  color: var(--text);
  font-size: 11px;
}

.directory-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  border:1px solid var(--n-cfdad4);
  border-radius: 6px;
  background:var(--color-surface);
  color:var(--n-78837e);
}

.directory-search:focus-within {
  border-color:var(--n-7da994);
  box-shadow: 0 0 0 2px rgba(11, 104, 73, 0.08);
}

.directory-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 11px;
}

.alphabet-filter {
  display: flex;
  align-items: center;
  gap: 3px;
  overflow-x: auto;
  padding: 1px 0;
}

.alphabet-filter button {
  display: grid;
  place-items: center;
  min-width: 25px;
  height: 25px;
  padding: 0 5px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color:var(--n-5f6b65);
  font-size: 10px;
}

.alphabet-filter button:first-child {
  min-width: 38px;
}

.alphabet-filter button:hover,
.alphabet-filter button.is-active {
  border-color: var(--mint-border);
  background: var(--mint);
  color: var(--green);
  font-weight: 700;
}

.customer-list-head,
.customer-list-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 10px;
}

.customer-list-head strong {
  color: var(--text);
}

.customer-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
}

.customer-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 10px;
}

.customer-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}

.customer-row-actions [data-customer-trash] {
  color: var(--red);
}

.customer-table thead {
  background:var(--n-flaeche-leicht);
}

.customer-table th {
  color: var(--muted);
  font-weight: 600;
  text-align: left;
}

.customer-table th,
.customer-table td {
  padding: 8px 9px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}

.customer-table th:nth-child(1) { width: 20%; }
.customer-table th:nth-child(2) { width: 17%; }
.customer-table th:nth-child(3) { width: 9%; }
.customer-table th:nth-child(4) { width: 13%; }
.customer-table th:nth-child(5) { width: 14%; }
.customer-table th:nth-child(6) { width: 12%; }
.customer-table th:nth-child(7) { width: 11%; }
.customer-table th:nth-child(8) { width: 4%; }

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

.customer-table tbody tr:hover {
  background:var(--n-flaeche);
}

.customer-table td > strong {
  display: block;
}

.customer-table td small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.customer-name-button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.customer-name-button img {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border:1px solid var(--n-dbe4df);
  border-radius: 50%;
  background:var(--n-flaeche-ruhig);
  object-fit: cover;
}

.customer-name-button strong {
  display: block;
  font-size: 11px;
}

.customer-carriers {
  display: flex;
  align-items: center;
  gap: 4px;
}

.customer-carrier-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border-radius: 4px;
  background:var(--color-surface);
  overflow: hidden;
}

.customer-carrier-logo img {
  display: block;
  object-fit: contain;
}


.customer-due {
  display: block;
  font-size: 10px;
}

.customer-due.danger {
  color: var(--red);
}

.customer-due.warning {
  color:var(--sig-amber-d48806);
}

.customer-due.neutral {
  color:var(--n-52605a);
  font-weight: 600;
}

.customer-open-button {
  width: 28px;
  min-height: 28px;
}

.customer-empty {
  display: grid;
  place-items: center;
  gap: 4px;
  min-height: 150px;
  color: var(--muted);
}

.customer-empty strong {
  color: var(--text);
  font-size: 12px;
}

.customer-list-footer {
  padding-top: 1px;
}

.customer-list-footer > div {
  display: flex;
  gap: 6px;
}

.customer-list-footer .icon-button:disabled {
  cursor: default;
  opacity: 0.42;
}

.detail-title {
  display: flex;
  align-items: center;
  gap: 9px;
}

.mini-grid b {
  font-weight: 600;
}

.customer-badge.open {
  color:var(--sig-amber-9a5a00);
  background:var(--sig-amber-fff1d9);
}

.customer-badge.neutral {
  color:var(--n-56635d);
  background:var(--n-flaeche-ruhig);
}

.customer-badge.danger {
  color: var(--red);
  background:var(--sig-rot-fdecef);
}

.customer-quality-panel {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 12px;
}

.customer-quality-panel > div:first-child {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 210px;
}

.customer-quality-panel strong,
.customer-quality-panel small {
  display: block;
}

.customer-quality-panel small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.quality-score {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 4px solid var(--green-2);
  border-radius: 50%;
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
}

.quality-score.is-warning {
  border-color:var(--sig-amber-f2a23a);
  color:var(--sig-amber-9a5a00);
}

.quality-score.is-danger {
  border-color: var(--red);
  color: var(--red);
}

.customer-quality-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.customer-quality-items span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  border-radius: 999px;
  background:var(--sig-amber-fff4e5);
  color:var(--sig-amber-8a570d);
  font-size: 10px;
  font-weight: 700;
}

.customer-quality-items span.is-complete {
  background: var(--mint);
  color: var(--green);
}

.customer-quality-items svg {
  width: 12px;
  height: 12px;
}

.customer-edit-dialog {
  width: min(760px, 100%);
}

.customer-edit-dialog form {
  display: grid;
  gap: 12px;
}

.customer-edit-check {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
}

.customer-edit-check input {
  width: 16px;
  height: 16px;
}

.select-pill.silber {
  color:var(--n-56635d);
  background:var(--n-flaeche-ruhig);
}

.select-pill.bronze {
  color:var(--sig-orange-865022);
  background:var(--sig-amber-f8eee5);
}

.select-pill.danger {
  color: var(--red);
  background:var(--sig-rot-fdecef);
}

.money-open {
  color: var(--red);
}

.offers-view {
  gap: 10px;
}

.offers-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.offers-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
}

.offers-head-actions {
  display: flex;
  gap: 8px;
}

.offer-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.offer-kpis .offer-kpi-tile {
  display: grid;
  gap: 3px;
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-top:3px solid var(--n-718078);
  border-radius: 7px;
  background:var(--color-surface);
  box-shadow: var(--shadow);
  text-align: left;
}

.offer-kpis .offer-kpi-tile.accepted { border-top-color: var(--green-2); }
.offer-kpis .offer-kpi-tile.sent { border-top-color:var(--sig-blau-4f7cff); }
.offer-kpis .offer-kpi-tile.followup { border-top-color:var(--sig-amber-f3a53d); }

.offer-kpis small,
.offer-kpis span {
  color: var(--muted);
  font-size: 10px;
}

.offer-kpis strong {
  font-size: 22px;
  line-height: 1.05;
}

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

.offer-view-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
}

.offer-view-tabs button {
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color:var(--n-4d5a54);
  font-size: 10px;
  white-space: nowrap;
}

.offer-view-tabs button:hover,
.offer-view-tabs button.is-active {
  color: var(--green);
  background: var(--mint);
  font-weight: 700;
}

.offer-search {
  display: flex;
  align-items: center;
  gap: 7px;
  width: min(330px, 40%);
  height: 31px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
}

.offer-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 10px;
}

/* Das Angebots-Detail lag frueher als feste 300px-Spalte rechts neben der
   Pipeline und war fuer seinen Inhalt sichtbar zu eng. Es oeffnet sich jetzt
   als Dialog (#offerDetailModal) nach dem bestehenden .offer-modal-Muster,
   die Pipeline nutzt dafuer die volle Breite. */
.offer-detail-dialog {
  width: min(860px, 100%);
}

.offer-detail-dialog .offer-detail {
  display: grid;
  gap: 12px;
  border: 0;
  padding: 0;
  background: transparent;
}

.offer-pipeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 8px;
}

.offer-column {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 5px;
  border-radius: 8px;
}

.offer-column.gray { background: linear-gradient(180deg, rgba(113, 128, 120, 0.12), rgba(113, 128, 120, 0) 70%); }
.offer-column.blue { background: linear-gradient(180deg, rgba(79, 124, 255, 0.13), rgba(79, 124, 255, 0) 70%); }
.offer-column.green { background: linear-gradient(180deg, rgba(11, 104, 73, 0.13), rgba(11, 104, 73, 0) 70%); }
.offer-column.red { background: linear-gradient(180deg, rgba(194, 65, 85, 0.13), rgba(194, 65, 85, 0) 70%); }

.offer-column > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 35px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-top:3px solid var(--n-718078);
  border-radius: 7px;
  background:var(--color-surface);
}

.offer-column.blue > header { border-top-color:var(--sig-blau-4f7cff); }
.offer-column.green > header { border-top-color: var(--green-2); }
.offer-column.red > header { border-top-color: var(--red); }

.offer-column > header div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.offer-column > header strong {
  font-size: 10px;
}

.offer-column > header span {
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background:var(--n-flaeche-ruhig);
  color:var(--n-435049);
  font-size: 10px;
}

.offer-column > header b {
  font-size: 10px;
  font-weight: 600;
}

.offer-column-cards {
  display: grid;
  gap: 8px;
}

.offer-card {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background:var(--color-surface);
  color: var(--text);
  text-align: left;
  box-shadow: 0 8px 20px rgba(28, 43, 35, 0.045);
}

.offer-card:hover,
.offer-card.is-selected {
  border-color:var(--n-8db7a4);
  box-shadow: 0 0 0 2px rgba(11, 104, 73, 0.07);
}

.offer-card-top,
.offer-card-tariff,
.offer-card-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 7px;
}

.offer-card-top strong {
  display: block;
  font-size: 10px;
}

.offer-card-top small,
.offer-card-meta,
.offer-card-tariff small {
  color: var(--muted);
  font-size: 10px;
}

.offer-card-tariff {
  align-items: end;
  color:var(--n-435049);
  font-size: 10px;
}

.offer-card-tariff b {
  color: var(--text);
  font-size: 10px;
  text-align: right;
}

.offer-card-tariff small {
  display: block;
  font-weight: 600;
}

.offer-card-meta {
  padding-top: 7px;
  border-top: 1px solid var(--line-soft);
}

.offer-card-meta span:last-child {
  color: var(--green);
}

.offer-task-note {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--mint);
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
}

.offer-task-note svg {
  width: 11px;
  height: 11px;
}

.offer-task-note.is-done {
  background:var(--color-border-subtle);
  color:var(--n-52625a);
}

/* Fällig ist ein Warnsignal, nicht erledigt: Grün würde hier falsche Sicherheit geben. */
.offer-task-note.is-due {
  background:var(--sig-amber-fff4e5);
  color:var(--sig-orange-b45309);
  border:1px solid var(--sig-amber-f5c681);
}

.offer-column-empty {
  display: grid;
  place-items: center;
  min-height: 92px;
  border:1px dashed var(--n-d9e1dd);
  border-radius: 7px;
  color: var(--muted);
  font-size: 10px;
}

.offer-carrier-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  overflow: hidden;
}

.offer-carrier-logo img {
  display: block;
  object-fit: contain;
}


.offer-detail {
  display: grid;
  gap: 10px;
}

.offer-detail-empty {
  display: grid;
  place-items: center;
  gap: 5px;
  min-height: 280px;
  color: var(--muted);
  text-align: center;
}

.offer-detail-empty svg {
  width: 25px;
  height: 25px;
}

.offer-detail-empty strong {
  color: var(--text);
}

.offer-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line-soft);
}

.offer-detail-head > div > span,
.offer-detail-head p {
  color: var(--muted);
  font-size: 10px;
}

.offer-detail-head h2 {
  margin-top: 3px;
  font-size: 17px;
}

/* Angebots-Detail als ruhige Arbeitskarte: Vorgang zuerst, dann der nächste
   Schritt und erst danach die Zahlen. Die vorhandenen Daten und Aktionen
   bleiben unverändert, erhalten aber eine klare Lesereihenfolge. */
.offer-detail-summary {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:var(--color-surface);
}

.offer-detail-tariff {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--mint-border);
  border-radius: 10px;
  background:var(--sig-gruen-f2faf6);
}

.offer-detail-tariff-copy { min-width: 0; }

.offer-detail-tariff strong,
.offer-detail-tariff span {
  display: block;
}

.offer-detail-tariff span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.offer-detail-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.offer-detail-values div {
  min-height: 72px;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background:var(--color-surface);
}

.offer-detail-values dt {
  color: var(--muted);
  font-size: 10px;
}

.offer-detail-values dd {
  margin: 3px 0 0;
  font-size: 10px;
  font-weight: 700;
}

/* Angebots-Detail: EIN hervorgehobener naechster Schritt statt mehrerer
   gleichwertiger Aktionsbloecke. Der Block sagt zuerst, was ansteht, und
   bietet erst darunter die dazu passenden Knoepfe an. */
.offer-next-step {
  display: grid;
  gap: 9px;
  padding: 14px;
  border: 1px solid var(--mint-border);
  border-radius: 8px;
  background:var(--sig-gruen-f2faf6);
}

.offer-next-step-head strong {
  display: block;
  font-size: 12px;
}

.offer-next-step-head span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.offer-next-step-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 7px;
}

.offer-next-step .offer-next-step-actions:has(.offer-followup-due) {
  grid-template-columns: minmax(0, 1fr) minmax(190px, 220px);
  align-items: end;
}

.offer-next-step .offer-next-step-actions .offer-followup-due {
  grid-column: auto;
}

.offer-next-step-followup {
  display: grid;
  gap: 7px;
  padding-top: 9px;
  border-top: 1px solid var(--mint-border);
}

/* Zahlenblock: Werte bleiben kompakt, bekommen aber eine kurze Erklaerung,
   damit "0,00 EUR" nicht wie ein Fehler wirkt. */
.offer-figures {
  display: grid;
  gap: 8px;
}

.offer-figures h3 {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

@media (max-width: 620px) {
  .offer-detail-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer-next-step .offer-next-step-actions:has(.offer-followup-due) { grid-template-columns: 1fr; }
}

/* Zugaben im Tarifvergleich: Geraet und Auszahlung dort erfassen, wo der
   Haendler ohnehin rechnet. Traegt `internal-value`, verschwindet also in der
   Kundenansicht wie die uebrigen internen Werte. */
.tariff-extras {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background:var(--n-flaeche);
}

.tariff-extras-title {
  color:var(--n-4e5c55);
  font-size: 10px;
  font-weight: 700;
}

.tariff-extras label {
  display: grid;
  gap: 3px;
}

.tariff-extras label span {
  color: var(--muted);
  font-size: 10px;
}

.tariff-extras input {
  width: 100%;
  height: 28px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background:var(--color-surface);
  font: inherit;
  font-size: 10px;
}

/* Betragsfelder bewusst UNTEREINANDER: nebeneinander brachen die Beschriftungen
   auf zwei Zeilen um und die Felder standen versetzt. */
.tariff-extras-calc {
  display: grid;
  gap: 3px;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--line-soft);
}

.tariff-extras-calc span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 10px;
}

.tariff-extras-calc b {
  font-size: 10px;
  white-space: nowrap;
}

.tariff-extras-calc b.pos { color: var(--green); }
.tariff-extras-calc b.neg { color: var(--red); }

.tariff-extras-result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px solid var(--line-soft);
  font-size: 10px;
}

.tariff-extras-result strong { font-size: 12px; }
.tariff-extras-result.ok strong { color: var(--green); }
.tariff-extras-result.danger strong { color: var(--red); }

.tariff-extras-hint {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

/* Zugaben im Angebots-Detail: oben was den Kunden betrifft, darunter - nur fuer
   Berechtigte - was davon uebrig bleibt. */
.offer-extras-customer {
  display: grid;
  gap: 4px;
}

.offer-extras-customer span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  color: var(--muted);
  font-size: 10px;
}

.offer-extras-customer b {
  color: var(--text);
  font-size: 11px;
}

.offer-extras-internal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 6px;
  padding: 8px 9px;
  border-radius: 7px;
  background: var(--mint);
  color: var(--green);
  font-size: 10px;
}

.offer-extras-internal strong { font-size: 14px; }
.offer-extras-internal.danger {
  background:var(--color-danger-soft);
  color: var(--red);
}

.offer-value-note {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.offer-value-note.warning { color: var(--amber); }
.offer-value-note.danger { color: var(--red); }

/* Nebenaktionen: gleich breit und ruhig, klar abgesetzt vom naechsten Schritt. */
.offer-secondary-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 7px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}

.offer-followup-due {
  display: grid;
  grid-column: 1 / -1;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
}

.offer-followup-due select,
.offer-followup-due input {
  width: 100%;
  height: 30px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:var(--color-surface);
  color: var(--text);
  font-size: 10px;
}

.offer-audit {
  display: grid;
}

.offer-audit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line-soft);
}

.offer-audit-head span {
  color: var(--muted);
  font-size: 10px;
}

.offer-audit article {
  display: grid;
  grid-template-columns: 25px 1fr;
  gap: 7px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}

.offer-audit article > span {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--green);
}

.offer-audit article strong {
  font-size: 10px;
}

.offer-audit article p,
.offer-audit article time {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.offer-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(17, 27, 22, 0.46);
}

.offer-modal.is-visible {
  display: grid;
}

.offer-modal-dialog {
  display: grid;
  gap: 12px;
  width: min(1180px, 100%);
  max-height: calc(var(--db-viewport-height, 100dvh) - 40px);
  padding: 14px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:var(--color-app);
  box-shadow: 0 24px 70px rgba(17, 27, 22, 0.24);
}

.offer-modal-head,
.comparison-controls,
.offer-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.offer-modal-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.segmented-control {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background:var(--n-flaeche-ruhig);
}

.segmented-control button {
  min-height: 27px;
  padding: 0 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color:var(--n-52605a);
  font-size: 10px;
}

.segmented-control button.is-active {
  background:var(--color-surface);
  color: var(--green);
  font-weight: 700;
  box-shadow: 0 2px 7px rgba(28, 43, 35, 0.08);
}

.comparison-offer-number {
  color: var(--muted);
  font-size: 10px;
}

.offer-preview-return {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.offer-preview-return svg {
  width: 14px;
  height: 14px;
}

.incoming-distributor-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.incoming-distributor-summary .ids-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 150px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:var(--n-flaeche-leicht);
}

.incoming-distributor-summary .ids-chip small {
  color: var(--muted);
  font-size: 10px;
}

.incoming-distributor-summary .ids-chip strong {
  font-size: 14px;
  color:var(--sig-orange-b45309);
}

.incoming-distributor-summary .ids-chip.is-clear strong {
  color: var(--green);
}

.incoming-distributor-summary .ids-chip span {
  font-size: 10px;
  color: var(--muted);
}

.comparison-offer-number strong {
  color: var(--text);
}

.comparison-current-tariff {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(120px, 0.7fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: 7px;
  background:var(--color-surface);
}

.comparison-current-tariff > div {
  display: grid;
  gap: 4px;
  padding-right: 8px;
  border-right: 1px solid var(--line-soft);
}

.comparison-current-tariff > div:last-child {
  border-right: 0;
}

.comparison-current-tariff small {
  color: var(--muted);
  font-size: 10px;
}

.comparison-current-tariff strong {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.tariff-comparison-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.vvl-source-wrap {
  display: grid;
  grid-template-columns: minmax(260px, 360px) auto;
  gap: 8px;
  align-items: end;
  margin-top: 8px;
}

.vvl-source-wrap label {
  display: grid;
  gap: 4px;
  color:var(--n-text);
  font-size: 12px;
}

/* Angebotsarchiv: bewusst eine ruhige, durchsuchbare Historientabelle statt
   einer zweiten Pipeline. Der Vorgang öffnet sich anschließend schreibgeschützt. */
.offer-archive-dialog { width: min(1120px, calc(100vw - 40px)); max-height: min(760px, calc(var(--db-viewport-height, 100dvh) - 40px)); }
.offer-archive-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 4px 0 12px; }
.offer-archive-summary { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.offer-archive-summary span { padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; background:var(--n-flaeche-leicht); color: var(--muted); font-size: 11px; }
.offer-archive-summary span:first-child { color: var(--text); font-weight: 700; }
.offer-archive-table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 10px; background:var(--color-surface); }
.offer-archive-table { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 12px; }
.offer-archive-table th { padding: 10px 12px; color: var(--muted); font-size: 10px; font-weight: 700; text-align: left; background:var(--n-flaeche-leicht); border-bottom: 1px solid var(--line); }
.offer-archive-table td { padding: 11px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.offer-archive-table tbody tr:last-child td { border-bottom: 0; }
.offer-archive-table strong, .offer-archive-table small { display: block; }
.offer-archive-table small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.offer-history .sales-builder, .offer-history .comparison-controls { pointer-events: none; }
.offer-history #savedOfferActions, .offer-history .offer-preview-history { pointer-events: auto; }

@media (max-width: 760px) {
  .vvl-source-wrap {
    grid-template-columns: 1fr;
  }

  .offer-archive-dialog { width: calc(100vw - 20px); }
  .offer-archive-toolbar { align-items: stretch; flex-direction: column; }
  .offer-archive-toolbar .offer-search { width: 100%; }
}

/* Tarifvergleich ist eine Arbeitsfläche: filtern, auswählen, Zugaben rechnen.
   Keine verstreuten Minikarten und keine Leerräume mehr. */
.sales-builder {
  display: grid;
  grid-template-columns: minmax(250px, 250px) minmax(0, 1fr) minmax(250px, 250px);
  gap: 14px;
  align-items: start;
}

/* Der frühere Vergleich bestand aus drei Karten. Die neue Verkaufsfläche ist
   selbst ein Dreispalten-Layout und muss deshalb die volle Dialogbreite
   bekommen, statt in der ersten alten Karten-Spalte zu landen. */
.tariff-comparison-grid {
  grid-template-columns: minmax(0, 1fr);
}

.sales-filter-panel,
.sales-extras-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:var(--color-surface);
}

.sales-filter-panel > strong,
.sales-extras-head strong,
.sales-result-head strong {
  font-size: 12px;
}

.sales-filter-panel > span,
.sales-result-head span,
.sales-extras-head span,
.sales-margin-box small {
  color: var(--muted);
  font-size: 10px;
}

.sales-carrier-filter { display: grid; gap: 6px; }
.sales-carrier-filter label { display: flex; align-items: center; gap: 8px; font-size: 12px; cursor: pointer; }
.sales-carrier-filter input { width: 15px; height: 15px; accent-color: var(--green); }
.sales-min-gb { display: grid; gap: 5px; }
.sales-min-gb span { color: var(--muted); font-size: 10px; }
.sales-min-gb input,
.sales-extras-fields input { min-width: 0; height: 34px; padding: 0 9px; border:1px solid var(--n-d9e3dd); border-radius: 7px; font: inherit; font-size: 12px; }
.sales-min-gb small { color: var(--muted); font-size: 10px; }
.text-button { padding: 0; border: 0; background: transparent; color: var(--green); font: inherit; font-size: 11px; font-weight: 700; text-align: left; cursor: pointer; }

.sales-tariff-results {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:var(--color-surface);
}
.sales-result-head { display: flex; align-items: center; justify-content: space-between; }
.sales-result-head > div { display: grid; gap: 2px; }
.sales-tariff-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 9px; }
.sales-no-result { padding: 28px; border:1px dashed var(--n-cbd8d0); border-radius: 10px; color: var(--muted); font-size: 12px; text-align: center; }

.offer-option-panel { margin-top: 0; }
.sales-builder > .offer-option-panel {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.sales-extras-panel { grid-template-columns: 1fr; align-items: stretch; position: sticky; top: 12px; }
.sales-customer-extras { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background:var(--color-surface); }
.sales-customer-extras strong { font-size: 12px; }
.sales-customer-extras span { font-size: 12px; }
.tariff-addon-picker { display: grid; gap: 7px; margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line-soft); }
.tariff-addon-list { display: grid; gap: 6px; }
.sales-extras-head { grid-column: 1 / -1; display: flex; justify-content: space-between; }
.sales-extras-head > div { display: grid; gap: 3px; }
.sales-extras-fields { display: grid; grid-template-columns: 1fr; gap: 8px; }
.sales-extras-fields label { display: grid; gap: 4px; }
.sales-extras-fields label span { color: var(--muted); font-size: 10px; }
.sales-more-device { justify-self: stretch; }
.sales-margin-box { display: grid; gap: 3px; padding: 12px; border-radius: 9px; background:var(--n-flaeche-ruhig); color: var(--green); text-align: right; }
.sales-margin-box.danger { background:var(--sig-rot-fff1f1); color: var(--red); }
.sales-margin-box span { font-size: 10px; font-weight: 700; }
.sales-margin-box strong { font-size: 22px; }

.comparison-current-tariff {
  grid-template-columns: minmax(200px, 1.45fr) repeat(3, minmax(150px, 1fr));
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.comparison-current-tariff > div {
  min-height: 74px;
  align-content: center;
  padding: 12px 16px;
}
.comparison-current-tariff small { font-size: 10px; }
.comparison-current-tariff strong { font-size: 12px; }
.comparison-current-tariff strong .carrier-logo { width: 28px; height: 28px; }

.sales-process-filter { padding-bottom: 4px; border-bottom: 1px solid var(--line-soft); }
.sales-process-filter input:disabled { cursor: not-allowed; opacity: .45; }
.sales-process-filter input:disabled + span { color: var(--muted); }

@media (max-width: 760px) {
  .comparison-current-tariff { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comparison-current-tariff > div:nth-child(2) { border-right: 0; }
  .comparison-current-tariff > div:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
}

.offer-option-panel {
  display: grid;
  grid-template-columns: minmax(170px, 0.8fr) minmax(0, 2fr) minmax(150px, 0.65fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background:var(--color-surface);
}

.offer-option-panel > div:first-child {
  display: grid;
  gap: 3px;
}

.offer-option-panel > div:first-child span,
.offer-total span {
  color: var(--muted);
  font-size: 10px;
}

.offer-option-list {
  display: grid;
  gap: 5px;
}

.offer-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  cursor: pointer;
}

.offer-option.is-selected {
  border-color: var(--mint-border);
  background: var(--mint);
}

.offer-option span {
  display: grid;
}

.offer-option small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.offer-option b {
  color: var(--green);
  font-size: 10px;
}

.offer-total {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.offer-total strong {
  color: var(--green);
  font-size: 17px;
}

.tariff-option {
  position: relative;
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-top:3px solid var(--n-9aa7a0);
  border-radius: 7px;
  background:var(--color-surface);
}

.tariff-option.is-recommended {
  border-top-color: var(--green-2);
}

.tariff-option:not(.is-selected) { opacity: 1; }

.sales-tariff-list {
  max-height: 500px;
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-gutter: stable;
}

.tariff-option-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tariff-option-top label {
  display: block;
}

.tariff-option-top input {
  position: absolute;
  opacity: 0;
}

.tariff-option-top label span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border:1px solid var(--n-bfcac4);
  border-radius: 5px;
}

.tariff-option-top input:checked + span {
  border-color: var(--green);
  background: var(--green);
}

.tariff-option-top input:checked + span::after {
  content: "";
  width: 8px;
  height: 4px;
  border-left:2px solid var(--color-surface);
  border-bottom:2px solid var(--color-surface);
  transform: rotate(-45deg) translateY(-1px);
}

.tariff-recommended {
  width: fit-content;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--mint);
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
}

.tariff-card-main {
  display: grid;
  grid-template-columns: minmax(135px, 0.8fr) minmax(180px, 1.4fr) max-content;
  align-items: center;
  gap: 16px;
}

.tariff-card-identity {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
}

.tariff-option h3 {
  font-size: 14px;
  overflow-wrap: anywhere;
}

.tariff-data {
  font-size: 22px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.tariff-card-identity > p {
  color: var(--muted);
  font-size: 10px;
}

.tariff-specs {
  display: grid;
  gap: 0;
  margin: 0;
  min-width: 116px;
}

.tariff-specs div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-height: 26px;
  font-size: 10px;
}

.tariff-specs dt {
  color: var(--muted);
  font-size: 10px;
}

.tariff-specs dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
}

.margin-input input {
  width: 58px;
  height: 25px;
  border: 1px solid var(--line);
  border-radius: 5px;
  text-align: right;
  font-size: 10px;
}

.tariff-feature-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 6px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  color:var(--n-435049);
  font-size: 10px;
}

.tariff-feature-strip li {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.tariff-feature-strip li svg {
  width: 12px;
  height: 12px;
  color: var(--green-2);
}

.tariff-feature-space {
  min-height: 1px;
}

.offer-modal.customer-mode .internal-value {
  display: none;
}

@media (max-width: 720px) {
  .tariff-card-main {
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 10px 14px;
  }

  .tariff-feature-strip,
  .tariff-feature-space {
    grid-column: 1 / -1;
  }
}

.offer-modal.customer-mode .offer-modal-dialog {
  background:var(--color-surface);
}

.offer-modal-footer {
  padding-top: 11px;
  border-top: 1px solid var(--line);
}

.offer-modal-footer > div {
  display: grid;
  color: var(--muted);
  font-size: 10px;
}

.offer-modal-footer > div strong {
  margin-top: 2px;
  color: var(--text);
  font-size: 11px;
}

.offer-save-actions {
  display: flex !important;
  align-items: end;
  gap: 8px;
  margin-left: auto;
}

/* Im VVL-Fall gehört die Kontakt-Dokumentation direkt zur Tarifauswahl.
   Die Übergabe ist davon getrennt der abschließende Schritt rechts. */
#vvlContactActions { margin-left: 0; }
#compareOfferActions { margin-left: auto; }

.offer-send-channel {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 10px;
}

.offer-send-channel select {
  min-width: 190px;
  min-height: 34px;
  padding: 0 26px 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:var(--color-surface);
  color: var(--text);
  font: inherit;
  font-size: 11px;
}

.offer-saved-actions {
  margin-left: auto;
  justify-content: flex-end;
}

.offer-saved-status {
  align-self: center;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.offer-saved-status.is-draft {
  border-color:var(--n-b9c6bf);
  background:var(--n-flaeche-leicht);
  color:var(--n-365247);
}

.offer-saved-status.is-sent {
  border-color:var(--sig-amber-f1d39d);
  background:var(--sig-amber-fffaf1);
  color:var(--sig-amber-9a6518);
}

.offer-saved-status.is-accepted {
  border-color: var(--mint-border);
  background: var(--mint);
  color: var(--green);
}

.offer-saved-status.is-unreachable {
  border-color:var(--n-c9d2cd);
  background:var(--n-flaeche-ruhig);
  color:var(--n-4c5d54);
}

.offer-saved-validity {
  align-self: center;
  max-width: 250px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.offer-saved-validity.is-danger {
  color: var(--danger);
  font-weight: 700;
}

.pipeline-offer-note {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  /* Die Karte ist ein Raster - dort zieht 'align-self' die Marke nicht
     zusammen, sie lief deshalb ueber die volle Kartenbreite. */
  align-self: flex-start;
  justify-self: start;
  max-width: 100%;
  margin-top: 7px;
  padding: 4px 7px;
  border:1px solid var(--n-b9c6bf);
  border-radius: 999px;
  background:var(--n-flaeche-leicht);
  color:var(--n-365247);
  font-size: 10px;
  font-weight: 700;
}
/* Wer den Vorgang in der Hand hat. Steht in derselben Marke, aber leiser -
   der Stand ist die Hauptaussage, der Name die Zuordnung. */
.pipeline-offer-note-ma {
  font-weight: 500;
  opacity: 0.8;
  overflow-wrap: anywhere;
}

.pipeline-offer-note-ma::before {
  content: "·";
  margin-right: 4px;
}

.pipeline-offer-note svg {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}

.pipeline-offer-note.is-sent { border-color:var(--sig-amber-f1d39d); background:var(--sig-amber-fffaf1); color:var(--sig-amber-9a6518); }
.pipeline-offer-note.is-accepted { border-color: var(--mint-border); background: var(--mint); color: var(--green); }

.customer-create-modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(17, 27, 22, 0.48);
}

.customer-create-modal.is-visible {
  display: grid;
}

.customer-create-dialog {
  width: min(1040px, 100%);
  max-height: calc(var(--db-viewport-height, 100dvh) - 40px);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:var(--color-surface);
  box-shadow: 0 24px 70px rgba(17, 27, 22, 0.24);
}

.customer-create-head,
.customer-create-footer {
  position: sticky;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  background:var(--color-surface);
}

.customer-create-head {
  top: 0;
  border-bottom: 1px solid var(--line);
}

.customer-create-head h2 {
  font-size: 17px;
}

.customer-create-head p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.customer-create-dialog form {
  display: grid;
}

.customer-number-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 16px 2px;
  padding: 10px 12px;
  border:1px solid var(--n-cfe4da);
  border-radius: 6px;
  background:var(--sig-gruen-f1faf6);
}

.customer-number-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: var(--green);
  color:var(--color-surface);
}

.customer-number-icon svg {
  width: 17px;
  height: 17px;
}

.customer-number-strip div {
  display: grid;
  gap: 1px;
}

.customer-number-strip small,
.customer-number-strip > span:last-child {
  color: var(--muted);
  font-size: 10px;
}

.customer-number-strip strong {
  font-size: 12px;
}

.customer-number-strip > span:last-child {
  margin-left: auto;
  padding: 4px 7px;
  border-radius: 999px;
  background:var(--sig-gruen-e3f3eb);
  color: var(--green);
  font-weight: 700;
}

.customer-form-section {
  margin: 0 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line-soft);
}

.customer-form-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}

.customer-form-section-head > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.customer-form-section-head > div > span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:var(--n-flaeche-ruhig);
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
}

.customer-form-section-head h3 {
  font-size: 12px;
}

.customer-form-section-head small {
  color: var(--muted);
  font-size: 10px;
  text-align: right;
}

.customer-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.customer-form-grid label,
.customer-upload-block > label,
.holiday-profile {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
}

.customer-form-grid label > span,
.customer-upload-block > label > span,
.holiday-profile > span {
  color:var(--n-4e5c55);
  font-size: 10px;
  font-weight: 700;
}

.customer-form-grid input,
.customer-form-grid select,
.customer-upload-block select,
.holiday-profile select {
  width: 100%;
  height: 34px;
  min-width: 0;
  padding: 0 9px;
  border:1px solid var(--n-ccd7d1);
  border-radius: 5px;
  outline: 0;
  background:var(--color-surface);
  color: var(--text);
  font: inherit;
  font-size: 10px;
}

.customer-form-grid input:focus,
.customer-form-grid select:focus,
.customer-upload-block select:focus,
.holiday-profile select:focus {
  border-color: var(--green-2);
  box-shadow: 0 0 0 3px rgba(31, 122, 85, 0.1);
}

.customer-form-grid input.is-invalid,
.customer-form-grid select.is-invalid {
  border-color:var(--color-danger);
  background:var(--sig-rot-fff8f9);
}

.customer-form-grid .field-wide,
.customer-form-grid .field-double {
  grid-column: span 2;
}

.residence-toggle {
  grid-column: 1 / -1;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 9px !important;
  min-height: 42px;
  padding: 8px 10px;
  border:1px solid var(--n-d6e2dc);
  border-radius: 6px;
  background:var(--n-flaeche-leicht);
  cursor: pointer;
}

.residence-toggle[hidden] {
  display: none;
}

.residence-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.residence-check {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border:1px solid var(--n-aebdb5);
  border-radius: 5px;
  background:var(--color-surface);
  color: transparent;
}

.residence-check svg {
  width: 12px;
  height: 12px;
}

.residence-toggle input:checked + .residence-check {
  border-color: var(--green);
  background: var(--green);
  color:var(--color-surface);
}

.residence-toggle > span:last-child {
  display: grid;
  gap: 2px;
}

.residence-toggle strong {
  color: var(--text);
  font-size: 10px;
}

.residence-toggle small {
  color: var(--muted);
  font-size: 10px;
}

.residence-fields {
  grid-column: 1 / -1;
  padding: 11px;
  border:1px solid var(--n-d6e2dc);
  border-radius: 6px;
  background:var(--n-flaeche-leicht);
}

.residence-fields[hidden] {
  display: none;
}

.residence-fields-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.residence-fields-head > div {
  display: grid;
  gap: 2px;
}

.residence-fields-head strong {
  font-size: 10px;
}

.residence-fields-head > div span,
.residence-note {
  color: var(--muted);
  font-size: 10px;
}

.residence-badge {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  background:var(--n-flaeche-ruhig);
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
}

.residence-grid {
  grid-template-columns: 2fr 1fr 1fr;
}

.residence-grid .field-double {
  grid-column: auto;
}

.residence-document-field.is-hidden {
  display: none;
}

.residence-note {
  margin-top: 7px;
}

.residence-note.is-warning {
  color:var(--sig-amber-a45b00);
}

.duplicate-status {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  margin-top: 9px;
  padding: 6px 8px;
  border-radius: 5px;
  background:var(--n-flaeche-ruhig);
  color: var(--muted);
  font-size: 10px;
}

.duplicate-status svg {
  width: 13px;
  height: 13px;
}

.duplicate-status.is-clear {
  background:var(--sig-gruen-edf8f2);
  color: var(--green);
}

.duplicate-status.is-warning {
  background:var(--sig-rot-fff1f2);
  color:var(--color-danger);
}

.customer-doc-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
  gap: 16px;
}

.customer-upload-block {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(260px, 1.2fr);
  gap: 10px;
}

.customer-dropzone {
  grid-row: span 2;
  place-items: center;
  min-height: 78px;
  padding: 10px;
  border:1px dashed var(--n-aebfb6);
  border-radius: 6px;
  background:var(--color-app);
  cursor: pointer;
  text-align: center;
}

.customer-dropzone:hover {
  border-color: var(--green-2);
  background:var(--sig-gruen-f0f8f4);
}

.customer-dropzone svg {
  width: 19px;
  height: 19px;
  color: var(--green);
}

.customer-dropzone strong {
  font-size: 10px;
}

.customer-dropzone span {
  color: var(--muted);
  font-size: 10px;
}

.customer-dropzone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.customer-file-list {
  display: grid;
  grid-column: 1 / -1;
  gap: 5px;
}

.customer-file-list:empty {
  display: none;
}

.customer-file-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 4px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background:var(--color-surface);
}

.customer-file-item > svg {
  width: 14px;
  height: 14px;
  color: var(--green);
}

.customer-file-item span {
  display: grid;
  min-width: 0;
}

.customer-file-item strong,
.customer-file-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-file-item strong {
  font-size: 10px;
}

.customer-file-item small {
  color: var(--muted);
  font-size: 10px;
}

.customer-file-item button {
  width: 24px;
  height: 24px;
}

.holiday-profile {
  align-self: start;
  padding-left: 16px;
  border-left: 1px solid var(--line-soft);
}

.holiday-profile small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.customer-create-footer {
  bottom: 0;
  justify-content: flex-end;
  border-top: 1px solid var(--line);
}

.customer-create-footer > span {
  margin-right: auto;
  color: var(--muted);
  font-size: 10px;
}

.customer-create-footer > span b {
  color:var(--color-danger);
}

.settings-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.settings-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 11px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
}

.settings-tabs button svg {
  width: 14px;
  height: 14px;
}

.settings-tabs button.is-active {
  border-bottom-color: var(--green);
  color: var(--green);
  font-weight: 700;
}

.settings-panel {
  display: none;
}

.settings-panel.is-active {
  display: block;
}

/* Konsistenter Abstand zwischen Panels/Abschnitten in den Einstellungen */
.settings-panel.is-active > section {
  margin-bottom: 16px;
}
.settings-panel.is-active > section:last-child {
  margin-bottom: 0;
}

.subscription-contract-card,
.subscription-commitment-card,
.subscription-inclusions-card,
.subscription-payment-card,
.switch-offer-contract-card,
.switch-proof-card,
.subscription-cancellation-card {
  display: grid;
  gap: 16px;
}

.subscription-commitment-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.subscription-commitment-head > div:first-child {
  display: grid;
  gap: 5px;
}

.subscription-commitment-head p,
.subscription-commitment-note {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.subscription-commitment-total {
  display: grid;
  gap: 3px;
  min-width: 190px;
  padding: 13px 15px;
  border: 1px solid rgba(29, 112, 75, 0.25);
  border-radius: 10px;
  background: var(--mint);
  text-align: right;
}

.subscription-commitment-total small {
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.subscription-commitment-total strong {
  color: var(--green-2);
  font-size: 22px;
}

.subscription-commitment-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr);
  gap: 12px;
}

.subscription-commitment-lines {
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background:var(--color-surface);
}

.subscription-commitment-lines > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 45px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 11px;
}

.subscription-commitment-lines > div:last-child { border-bottom: 0; }
.subscription-commitment-lines > div > span { display: grid; gap: 2px; }
.subscription-commitment-lines small { color: var(--muted); font-size: 10px; }
.subscription-commitment-lines > div > strong { white-space: nowrap; }
.subscription-commitment-lines .is-total { background: var(--color-surface-subtle); color: var(--green-2); }

.subscription-commitment-capacity {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.subscription-commitment-capacity > div {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: var(--color-surface-subtle);
}

.subscription-commitment-capacity small { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.subscription-commitment-capacity strong { font-size: 17px; }
.subscription-commitment-capacity span { color: var(--muted); font-size: 10px; }

.switch-proof-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  align-items: end;
  margin-top: 0;
}

.switch-proof-form label {
  display: grid;
  gap: 6px;
  color: var(--text-muted);
  font-size: 10px;
}

.switch-proof-form small { color: var(--muted); font-size: 10px; }
.switch-proof-form :is(input, select) {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  font-family: inherit;
  font-size: 11px;
}
.switch-proof-form input[type="file"] {
  min-height: 36px;
  padding: 4px;
  overflow: hidden;
  background: var(--color-surface-subtle);
}
.switch-proof-form input[type="file"]::file-selector-button {
  min-height: 28px;
  margin-right: 8px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background:var(--color-surface);
  color: var(--green);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.switch-proof-form input[type="file"]::file-selector-button:hover {
  border-color: var(--green);
  background: var(--mint);
}
.switch-proof-message { margin: 0; font-size: 10px; }
.switch-proof-message:empty { display: none; }
.switch-proof-list { display: grid; gap: 8px; margin-top: 0; }
.switch-proof-empty { margin: 0; font-size: 11px; }
.switch-proof-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) minmax(150px, .7fr) auto;
  gap: 8px 16px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
}
.switch-proof-row > div { display: grid; gap: 3px; }
.switch-proof-row span:not(.status-chip), .switch-proof-row small { color: var(--text-muted); font-size: 12px; }
.switch-proof-row p { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--text-muted); }

@media (max-width: 980px) {
  .switch-proof-form { grid-template-columns: 1fr; }
  .switch-proof-row { grid-template-columns: 1fr; align-items: start; }
}

.subscription-cancellation-card.is-confirmed {
  border-color: rgba(185, 28, 28, 0.25);
}

.subscription-cancellation-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.subscription-cancellation-facts > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--color-surface-subtle);
}

.subscription-cancellation-facts small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.subscription-cancellation-facts strong {
  overflow-wrap: anywhere;
  font-size: 12px;
}

.subscription-cancellation-facts span,
.subscription-cancellation-card > p,
.subscription-cancellation-code small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.subscription-cancellation-form,
.subscription-cancellation-code {
  display: grid;
  gap: 12px;
  max-width: 620px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--color-surface-subtle);
}

.subscription-cancellation-form[hidden] {
  display: none;
}

.subscription-cancellation-form > label:not(.switch-offer-check),
.subscription-cancellation-code label {
  display: grid;
  gap: 5px;
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
}

.subscription-cancellation-form select,
.subscription-cancellation-form textarea,
.subscription-cancellation-code input {
  width: 100%;
  min-width: 0;
}

.subscription-cancellation-code > div {
  display: grid;
  grid-template-columns: minmax(180px, 260px) auto;
  gap: 8px;
  align-items: end;
}

.subscription-cancellation-warning {
  margin: 0;
  padding: 10px 12px;
  border:1px solid var(--sig-amber-f0c36a);
  border-radius: 8px;
  background:var(--sig-amber-fff8e8);
  color:var(--sig-amber-854d0e) !important;
}

.switch-offer-facts,
.switch-offer-acceptance {
  display: grid;
  gap: 9px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--color-surface-subtle);
}

.switch-offer-facts p,
.switch-offer-acceptance p,
.switch-offer-acceptance small {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.switch-offer-facts a,
.switch-offer-acceptance a {
  color: var(--green);
  font-weight: 700;
}

.switch-offer-acceptance label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--text);
  font-size: 11px;
  line-height: 1.5;
}

.switch-offer-acceptance input {
  flex: 0 0 auto;
  margin-top: 2px;
}

.switch-offer-acceptance .primary-button {
  justify-self: start;
  margin-top: 3px;
}

.switch-offer-binding-note {
  color: var(--text) !important;
  font-weight: 600;
}

.switch-offer-hash {
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 10px !important;
}

.subscription-contract-summary,
.subscription-inclusion-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.subscription-contract-summary > div,
.subscription-inclusion-grid > div {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--color-surface-subtle);
}

.subscription-contract-summary small,
.subscription-inclusion-grid small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.subscription-contract-summary strong,
.subscription-inclusion-grid strong {
  overflow-wrap: anywhere;
  font-size: 12px;
}

.subscription-contract-summary span,
.subscription-inclusion-grid span,
.subscription-price-grid p,
.subscription-payment-card > p {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.subscription-access-summary {
  gap: 8px;
  margin-top: 14px;
}

.subscription-access-summary > div {
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--color-surface-subtle);
}

.subscription-access-summary small {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.subscription-access-summary strong {
  overflow-wrap: anywhere;
  font-size: 11px;
}

.subscription-payment-copy {
  margin: 0;
}

.subscription-price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.subscription-price-grid article {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 128px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:var(--color-surface);
}

.subscription-price-grid article.is-current {
  border-color: rgba(29, 112, 75, 0.35);
  background: var(--mint);
}

.subscription-price-kicker {
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.subscription-price-grid strong {
  font-size: 22px;
  line-height: 1.15;
}

.subscription-price-grid strong small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.subscription-inclusion-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.subscription-module-block {
  display: grid;
  gap: 8px;
}

.subscription-module-block h3 {
  font-size: 11px;
}

.subscription-module-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.subscription-module-list span {
  padding: 5px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background:var(--color-surface);
  color: var(--text);
  font-size: 10px;
  font-weight: 600;
}

@media (max-width: 980px) {
  body {
    min-width: 0;
    zoom: 1;
  }

  .subscription-contract-summary,
  .subscription-commitment-layout,
  .subscription-inclusion-grid,
  .subscription-price-grid,
  .subscription-cancellation-facts,
  .subscription-cancellation-code > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .subscription-commitment-head { display: grid; }
  .subscription-commitment-total { width: 100%; text-align: left; }

  .subscription-contract-card .user-admin-head,
  .subscription-inclusions-card .user-admin-head,
  .subscription-payment-card .user-admin-head,
  .switch-proof-card .user-admin-head,
  .switch-offer-contract-card .user-admin-head,
  .subscription-cancellation-card .user-admin-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .subscription-contract-card .status-chip,
  .subscription-inclusions-card .status-chip,
  .subscription-payment-card .status-chip,
  .switch-offer-contract-card .status-chip,
  .subscription-cancellation-card .status-chip {
    align-self: flex-start;
  }

}

.display-settings-card {
  display: grid;
  gap: 20px;
  max-width: 680px;
  padding: 18px 20px;
}

.dashboard-visibility-card {
  gap: 14px;
}

.dashboard-visibility-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dashboard-visibility-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background:var(--color-surface);
}

.dashboard-visibility-option.is-off {
  background:var(--n-flaeche-leicht);
}

.dashboard-visibility-copy strong,
.dashboard-visibility-copy small {
  display: block;
}

.dashboard-visibility-copy strong {
  font-size: 12px;
}

.dashboard-visibility-copy small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.dashboard-visibility-hint {
  margin: 0;
}

@media (max-width: 640px) {
  .display-settings-card {
    gap: 16px;
    padding: 16px;
  }

  .dashboard-visibility-card .user-admin-head {
    align-items: flex-start;
  }

  .dashboard-visibility-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.module-manager-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
  padding: 13px 14px;
}

.module-manager-intro > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.module-manager-intro h2,
.module-manager-intro p {
  margin: 0;
}

.module-manager-intro h2 {
  font-size: 12px;
}

.module-manager-intro p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.industry-profile-panel {
  margin-bottom: 10px;
  padding: 12px;
}

.industry-profile-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.industry-profile-card {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 66px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background:var(--color-surface);
  color: var(--text);
  text-align: left;
}

.industry-profile-card:hover,
.industry-profile-card.is-active {
  border-color: var(--green-2);
  background: var(--mint);
}

.industry-profile-card > svg {
  width: 20px;
  height: 20px;
  color: var(--green);
}

.industry-profile-card strong,
.industry-profile-card small {
  display: block;
}

.industry-profile-card small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.industry-profile-card em {
  display: block;
  margin-top: 4px;
  color: var(--green);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.module-manager-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 10px;
  align-items: start;
}

.module-toggle-panel,
.industry-editor-panel {
  padding: 12px;
}

.module-toggle-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.module-toggle-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background:var(--color-surface);
}

.module-toggle-row.is-off {
  background:var(--n-flaeche-leicht);
}

.module-toggle-row > svg {
  width: 17px;
  height: 17px;
  color: var(--green);
}

.module-toggle-row.is-off > svg {
  color: var(--muted);
}

.module-toggle-row strong,
.module-toggle-row small {
  display: block;
}

.module-toggle-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.module-toggle-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.module-toggle-row input {
  width: 17px;
  height: 17px;
  accent-color: var(--green);
}

.module-core-badge {
  padding: 4px 6px;
  border-radius: 999px;
  background:var(--n-flaeche-ruhig);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.module-active-badge {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(21, 128, 61, .1);
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
}

.upgrade-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--green);
  background:var(--color-surface);
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 7px;
  cursor: pointer;
}
.upgrade-btn:hover { background: var(--green); color:var(--color-surface); }
.upgrade-btn svg { width: 12px; height: 12px; }

.industry-editor-panel {
  display: grid;
  gap: 10px;
}

.industry-editor-panel > label {
  display: grid;
  gap: 5px;
}

.industry-editor-panel > label > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.industry-editor-panel input,
.industry-editor-panel textarea {
  width: 100%;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  outline: 0;
  background:var(--color-surface);
  font: inherit;
  font-size: 10px;
  resize: vertical;
}

.industry-editor-panel input:focus,
.industry-editor-panel textarea:focus {
  border-color: var(--green-2);
  box-shadow: 0 0 0 3px rgba(31, 122, 85, 0.1);
}

.industry-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.industry-editor-note {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px;
  border:1px solid var(--sig-amber-ead8b8);
  border-radius: 6px;
  background:var(--sig-amber-fff8ec);
  color:var(--sig-amber-765522);
  font-size: 10px;
}

.industry-editor-note svg {
  width: 15px;
  height: 15px;
}

.tariff-world-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.tariff-world-summary article {
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:var(--color-surface);
}

.tariff-world-summary small,
.tariff-world-summary span {
  color: var(--muted);
  font-size: 10px;
}

.tariff-world-summary strong {
  font-size: 17px;
}

.tariff-world-panel {
  overflow: hidden;
}

.tariff-world-head,
.tariff-world-toolbar,
.tariff-world-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tariff-world-head {
  padding: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.tariff-world-head h2 {
  font-size: 14px;
}

.tariff-world-head p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.tariff-world-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.tariff-world-toolbar {
  padding: 12px;
  background:var(--color-app);
}

.tariff-world-toolbar > label:not(.tariff-world-search) {
  display: grid;
  gap: 3px;
  min-width: 145px;
}

.tariff-world-toolbar label > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.tariff-world-toolbar select {
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background:var(--color-surface);
  font-size: 10px;
}

.tariff-world-search {
  display: flex;
  align-items: center;
  gap: 7px;
  width: min(460px, 100%);
  /* Grundhoehe aus der Formularnorm (19.08.2026), nicht mehr feste 32 px:
     Die Norm gibt dem Eingabefeld darin 34 px Mindesthoehe, und ein 34-px-
     Feld in einer 32-px-Huelle ragte oben und unten je 1 px heraus. Die
     Huelle ist das sichtbare Feld - sie bekommt die Hoehe, das Feld darin
     keine eigene mehr (siehe .tariff-world-search input). Gefunden von
     demo-ui-smoke-test.mjs, Pruefpunkt taskSearchLayoutIsSingleField. */
  min-height: var(--control-height);
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background:var(--color-surface);
}

.tariff-world-search svg {
  width: 14px;
  height: 14px;
  color: var(--muted);
}

.tariff-world-search input {
  width: 100%;
  /* Die Huelle traegt die Hoehe; das Feld darin darf nicht groesser sein. */
  min-height: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 10px;
}

.tariff-table-wrap {
  overflow-x: auto;
}

.tariff-world-table {
  min-width: 1040px;
}

.tariff-world-table th,
.tariff-world-table td {
  padding: 10px 12px;
}

.tariff-world-table td strong,
.tariff-world-table td small {
  display: block;
}

.tariff-world-table td small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.tariff-code {
  color: var(--text);
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}

.tariff-world-panel .tariff-table-wrap {
  border-radius: 12px;
  scrollbar-width: none;
}

.tariff-world-panel .tariff-table-wrap::-webkit-scrollbar {
  height: 0;
}

.tariff-world-table {
  border-collapse: separate;
  border-spacing: 0;
}

.tariff-world-table thead th:first-child { border-top-left-radius: 11px; }
.tariff-world-table thead th:last-child { border-top-right-radius: 11px; }
.tariff-world-table tbody tr:last-child td:first-child { border-bottom-left-radius: 11px; }
.tariff-world-table tbody tr:last-child td:last-child { border-bottom-right-radius: 11px; }

.tariff-row-actions {
  display: flex;
  justify-content: flex-end;
}

.tariff-world-footer {
  padding: 12px;
  color: var(--muted);
  font-size: 10px;
}

.tariff-world-footer strong {
  color: var(--text);
}

.user-admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.9fr);
  gap: 10px;
  align-items: start;
}

.user-admin-panel {
  display: grid;
  gap: 10px;
  overflow: hidden;
}

.user-admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}

.user-admin-head h2 {
  font-size: 14px;
}

.user-admin-head p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.user-form-grid,
.branch-add-row {
  display: grid;
  gap: 7px;
}

.user-form-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background:var(--n-flaeche-leicht);
}

.user-form-grid input,
.user-form-grid select,
.branch-add-row input {
  width: 100%;
  height: 32px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:var(--color-surface);
  color: var(--ink);
  font: inherit;
  font-size: 10px;
}

.user-form-grid input:focus,
.user-form-grid select:focus,
.branch-add-row input:focus {
  border-color: var(--green-2);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(31, 122, 85, 0.1);
}

.user-form-grid button {
  min-width: 0;
}

.user-admin-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.user-admin-panel .tariff-table-wrap {
  overflow-x: hidden;
}

.user-admin-table th,
.user-admin-table td {
  padding: 8px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-admin-table th:first-child,
.user-admin-table td:first-child {
  width: 23%;
}

.user-admin-table th:nth-child(2),
.user-admin-table td:nth-child(2),
.user-admin-table th:nth-child(4),
.user-admin-table td:nth-child(4),
.user-admin-table th:nth-child(6),
.user-admin-table td:nth-child(6) {
  width: 11%;
}

.user-admin-table th:last-child,
.user-admin-table td:last-child {
  width: 13%;
}

.user-admin-table tr.is-muted {
  opacity: 0.62;
}

.user-admin-table td strong,
.user-admin-table td small {
  display: block;
}

.user-admin-table td small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.branch-add-row {
  grid-template-columns: 1fr 1fr auto;
}

.branch-list {
  display: grid;
  gap: 7px;
}

.branch-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background:var(--color-surface);
}

.branch-list strong,
.branch-list span,
.role-grid strong,
.role-grid span {
  display: block;
}

.branch-list span,
.role-grid span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.role-matrix {
  margin-top: 10px;
}

.role-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.role-grid article {
  min-height: 86px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background:var(--color-surface);
}

.time-account-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.4fr);
  gap: 10px;
  align-items: start;
}

.time-clock-column {
  display: grid;
  min-width: 0;
  gap: 10px;
  align-content: start;
}

.time-clock-panel,
.time-ledger-panel {
  display: grid;
  gap: 10px;
  overflow: hidden;
}

.time-clock-panel > label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
}

.time-clock-panel select {
  height: 32px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:var(--color-surface);
  color: var(--text);
  font-size: 10px;
}

.time-clock-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.time-clock-actions button:first-child {
  grid-column: 1 / -1;
}

.time-clock-status {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background:var(--n-flaeche-leicht);
}

.time-clock-status strong {
  font-size: 12px;
}

.time-clock-status span {
  color: var(--muted);
  font-size: 10px;
}

/* Der bestehende Abwesenheitsbereich liegt unter der Stempeluhr. Seine
   vollständige Tabelle bleibt auch in der schmaleren Spalte erreichbar,
   ohne die gesamte Zeitkonto-Seite horizontal aufzuziehen. */
.time-absence-panel {
  min-width: 0;
  overflow: hidden;
}

.time-absence-panel #absTableWrap {
  overflow-x: auto;
}

.time-absence-panel .abs-table {
  min-width: 620px;
}

.time-ledger-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.time-month-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background:var(--color-surface);
}

.time-month-nav button {
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  color: var(--muted);
  padding: 2px 6px;
  border-radius: 6px;
}

.time-month-nav button:hover {
  background: var(--mint);
  color: var(--green);
}

.time-month-nav strong {
  font-size: 12px;
  min-width: 92px;
  text-align: center;
}

.time-sollist {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 10px 0;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--mint);
  font-size: 11px;
  color: var(--muted);
}

.time-sollist strong {
  color: var(--text);
}

.time-manual-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
}

.time-manual-form label {
  display: grid;
  gap: 3px;
  font-size: 10px;
  color: var(--muted);
}

.time-manual-form input,
.time-manual-form select {
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  font-size: 12px;
  background:var(--color-surface);
}

.time-table {
  min-width: 760px;
}

.time-table td strong,
.time-table td small {
  display: block;
}

.wa-template-form {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.wa-template-form label {
  display: grid;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
}

.wa-template-form input,
.wa-template-form textarea {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
  font: inherit;
  font-size: 12px;
  background:var(--color-surface);
  resize: vertical;
}

.wa-template-actions {
  display: flex;
  gap: 8px;
}

.wa-template-list {
  display: grid;
  gap: 8px;
}

.wa-template-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:var(--color-surface);
}

.wa-template-text strong {
  display: block;
  font-size: 12px;
}

.wa-template-text p {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.wa-template-card-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: none;
}

.link-button.danger {
  color:var(--color-danger);
}

.custom-field-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.custom-field-form label {
  display: grid;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
}

.custom-field-form input,
.custom-field-form select {
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  font-size: 12px;
  background:var(--color-surface);
}

.custom-field-list {
  display: grid;
  gap: 8px;
}

.custom-field-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:var(--color-surface);
}

.custom-field-card small {
  display: block;
  color: var(--muted);
}

.custom-field-card-actions {
  display: flex;
  gap: 8px;
  flex: none;
}

.customer-custom-fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.customer-custom-fields-grid label {
  display: grid;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
}

.customer-custom-fields-grid input {
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  font-size: 12px;
  background:var(--color-surface);
}

.massenversand-panel {
  margin-bottom: 10px;
}

.massenversand-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin: 10px 0;
}

.massenversand-controls label {
  display: grid;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
}

.massenversand-controls select {
  height: 32px;
  min-width: 200px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  font-size: 12px;
  background:var(--color-surface);
}

.massenversand-info {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--mint);
  font-size: 11px;
  color: var(--muted);
}

.massenversand-info strong {
  color: var(--green);
  font-size: 14px;
}

.massenversand-recipients {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.mass-recipient {
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background:var(--color-surface);
  font-size: 11px;
}

.incentives-panel {
  margin-top: 10px;
}

.incentive-target-field {
  display: grid;
  gap: 3px;
  font-size: 10px;
  color: var(--muted);
}

.incentive-target-field input {
  height: 32px;
  width: 140px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  font-size: 12px;
  background:var(--color-surface);
}

.incentives-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.incentive-row {
  display: grid;
  gap: 6px;
}

.incentive-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
}

.incentive-head span {
  color: var(--muted);
  font-size: 11px;
}

.incentive-bar {
  height: 10px;
  border-radius: 999px;
  background:var(--n-flaeche-ruhig);
  overflow: hidden;
}

.incentive-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width 180ms ease;
}

.incentive-bar span.low {
  background:var(--color-danger);
}

.incentive-bar span.mid {
  background:var(--sig-amber-f3a53d);
}

.incentive-bar span.good {
  background:var(--color-primary-strong);
}

/* Vertragsliste: Betrag und Aktionen sind getrennte, gleich ausgerichtete Spalten. */
.contract-table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-field);
  background:var(--color-surface);
  scrollbar-color:var(--n-cbd7d0) transparent;
  scrollbar-width: thin;
}

.contract-table-wrap::-webkit-scrollbar {
  height: 8px;
}

.contract-table-wrap::-webkit-scrollbar-thumb {
  border:2px solid var(--color-surface);
  border-radius: 999px;
  background:var(--n-cbd7d0);
}

.contract-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

@media (max-width: 760px) {
  .contract-table {
    min-width: 680px;
  }
}

.contract-table th,
.contract-table td {
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}

.contract-table th:last-child,
.contract-table td:last-child {
  width: 84px;
}

.contract-commission-cell {
  color: var(--text);
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.contract-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.contract-row-action {
  flex: none;
}

.contract-row-action.is-danger {
  color: var(--red);
}

.tier-badge {
  align-self: center;
  flex: none;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid transparent;
}

.tier-badge.tier-gold {
  background:var(--sig-amber-fbf2d6);
  color:var(--sig-amber-8a6b12);
  border-color:var(--sig-amber-e7cf8f);
}

.tier-badge.tier-silber {
  background:var(--n-flaeche-ruhig);
  color:var(--n-5b6770);
  border-color:var(--n-rahmen-kraeftig);
}

.tier-badge.tier-bronze {
  background:var(--sig-orange-f3e7dd);
  color:var(--sig-orange-8a5a33);
  border-color:var(--sig-orange-e0c4ad);
}

.migration-steps {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.migration-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:var(--color-surface);
}

.migration-step.is-done {
  border-color: var(--green);
  background: var(--mint);
}

.migration-step-mark {
  flex: none;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background:var(--color-surface);
  color: var(--green);
}

.migration-step.is-done .migration-step-mark {
  border-color: var(--green);
  background: var(--green);
  color:var(--color-surface);
}

.migration-step-mark svg {
  width: 14px;
  height: 14px;
}

.migration-step-body {
  flex: 1;
  display: grid;
  gap: 2px;
}

.migration-step-body strong {
  font-size: 12px;
}

.migration-step-body span {
  font-size: 11px;
  color: var(--muted);
}

.backup-info {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--mint);
  font-size: 11px;
  color: var(--muted);
}

.backup-info strong {
  color: var(--green);
  font-size: 14px;
}

.backup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

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

.audit-panel {
  display: grid;
  gap: 10px;
  overflow: hidden;
}

.audit-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background:var(--n-flaeche-leicht);
}

.audit-toolbar > label:not(.tariff-world-search) {
  display: grid;
  gap: 3px;
  min-width: 145px;
}

.audit-toolbar label > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.audit-toolbar select {
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:var(--color-surface);
  color: var(--ink);
  font: inherit;
  font-size: 10px;
}

.audit-table {
  min-width: 980px;
}

.audit-table th,
.audit-table td {
  padding: 8px 7px;
  vertical-align: top;
}

.audit-table td strong,
.audit-table td small {
  display: block;
}

.audit-table td small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.audit-note {
  padding: 10px 12px;
  border:1px solid var(--sig-amber-f0dcc0);
  border-radius: 7px;
  background:var(--sig-amber-fffaf1);
  color:var(--n-5c4730);
  font-size: 10px;
}

.table-action {
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:var(--color-surface);
  color: var(--green);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
}

.tariff-create-modal {
  position: fixed;
  inset: 0;
  z-index: 115;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(17, 27, 22, 0.48);
}

.tariff-create-modal.is-visible {
  display: grid;
}

.tariff-create-dialog {
  width: min(760px, 100%);
  max-height: calc(var(--db-viewport-height, 100dvh) - 40px);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:var(--color-surface);
  box-shadow: 0 24px 70px rgba(17, 27, 22, 0.24);
}

.tariff-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 15px 16px;
}

.tariff-form-grid label {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
}

.tariff-form-grid label > span:first-child {
  color:var(--n-4e5c55);
  font-size: 10px;
  font-weight: 700;
}

.tariff-form-grid input,
.tariff-form-grid select {
  width: 100%;
  height: 34px;
  min-width: 0;
  padding: 0 9px;
  border:1px solid var(--n-ccd7d1);
  border-radius: 5px;
  outline: 0;
  background:var(--color-surface);
  font: inherit;
  font-size: 10px;
}

.tariff-form-grid input:focus,
.tariff-form-grid select:focus {
  border-color: var(--green-2);
  box-shadow: 0 0 0 3px rgba(31, 122, 85, 0.1);
}

.tariff-form-grid input.is-invalid,
.tariff-form-grid select.is-invalid {
  border-color:var(--color-danger);
  background:var(--sig-rot-fff8f9);
}

.tariff-field-wide {
  grid-column: span 2;
}

/* Tarifmerkmale im Tarifformular: Haken-Katalog plus Freitext. Bewusst ueber
   die volle Breite, weil die Merkmale spaeter im Angebot beim Kunden landen. */
.tariff-feature-block {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background:var(--n-flaeche);
}

.tariff-feature-title {
  color:var(--n-4e5c55);
  font-size: 10px;
  font-weight: 700;
}

.tariff-feature-block .settings-hint {
  margin: 0;
}

.tariff-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 4px 12px;
}

.tariff-feature-option {
  display: grid !important;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 8px !important;
  min-height: 26px;
  cursor: pointer;
}

.tariff-feature-option input {
  width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  cursor: pointer;
}

.tariff-feature-option span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-size: 10px;
}

.tariff-feature-option svg {
  width: 13px;
  height: 13px;
  color: var(--green-2);
}

.tariff-active-toggle {
  grid-column: span 2;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  align-items: center;
  align-self: end;
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  cursor: pointer;
}

.tariff-active-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.tariff-active-toggle > span:last-child {
  display: grid;
  gap: 1px;
}

.tariff-active-toggle strong {
  font-size: 10px;
}

.tariff-active-toggle small {
  color: var(--muted);
  font-size: 10px;
}

.tariff-sales-case-field {
  grid-column: span 2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  min-width: 0;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
}

.tariff-sales-case-field legend {
  width: 100%;
  padding: 0;
  color:var(--n-4e5c55);
  font-size: 10px;
  font-weight: 700;
}

.tariff-sales-case-field label,
.addon-sales-case-control .compact-tool-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-size: 11px;
  cursor: pointer;
}

.tariff-sales-case-field input,
.addon-sales-case-control input { width: 15px; height: 15px; accent-color: var(--green); }

.addon-sales-case-control {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-height: 34px;
}

.addon-sales-case-control > span {
  width: 100%;
  color: var(--muted);
  font-size: 10px;
}

.contract-create-modal {
  position: fixed;
  inset: 0;
  z-index: 115;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(17, 27, 22, 0.48);
}

.contract-create-modal.is-visible {
  display: grid;
}

.contract-create-dialog {
  width: min(820px, 100%);
  max-height: calc(var(--db-viewport-height, 100dvh) - 40px);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:var(--color-surface);
  box-shadow: 0 24px 70px rgba(17, 27, 22, 0.24);
}

.contact-create-modal {
  position: fixed;
  inset: 0;
  z-index: 116;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(17, 27, 22, 0.48);
}

.contact-create-modal.is-visible {
  display: grid;
}

.contact-create-dialog {
  width: min(720px, 100%);
  max-height: calc(var(--db-viewport-height, 100dvh) - 40px);
  overflow-y: auto;
  /* Ein Dialog laeuft nie waagerecht. Eine Querleiste unten im Fenster ist
     immer ein Fehler im Inhalt, nicht etwas, das der Nutzer schieben soll. */
  overflow-x: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:var(--color-surface);
  box-shadow: 0 24px 70px rgba(17, 27, 22, 0.24);
}

.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 15px 16px 12px;
}

.contact-form-grid label,
.contact-follow-up-fields label {
  display: grid;
  align-content: start;
  gap: 5px;
}

.contact-form-grid label > span,
.contact-follow-up-fields label > span {
  color:var(--n-4e5c55);
  font-size: 10px;
  font-weight: 700;
}

.contact-form-grid input,
.contact-form-grid select,
.contact-form-grid textarea,
.contact-follow-up-fields input,
.contact-follow-up-fields select {
  width: 100%;
  min-height: 34px;
  padding: 8px 9px;
  border:1px solid var(--n-ccd7d1);
  border-radius: 5px;
  outline: 0;
  background:var(--color-surface);
  font: inherit;
  font-size: 10px;
}

.contact-form-grid textarea {
  resize: vertical;
}

/* Ein bereits erfasster Kontakt wird in derselben Schablone gezeigt wie beim
   Erfassen - aber er ist ein Nachweis und bleibt unveraendert. Die Felder
   liegen deshalb ruhig im Hintergrund statt wie beschreibbare Eingaben zu
   wirken. Gesperrt wird nicht nur hier: Zu Kontakten kennt der Server
   ausschliesslich Anlegen und Lesen. */
.contact-detail-dialog .contact-form-grid input[readonly],
.contact-detail-dialog .contact-form-grid textarea[readonly] {
  background: var(--sig-blau-f8fafc);
  border-color: var(--n-rahmen);
  color: var(--n-text);
  cursor: default;
}

.contact-detail-dialog .contact-form-grid textarea[readonly] {
  resize: none;
}

.contact-detail-footer {
  gap: 10px;
}

.contact-detail-footer > span {
  flex: 1 1 260px;
}

.repair-print-option {
  display: flex !important;
  grid-template-columns: 18px minmax(0, 1fr);
  flex-direction: row;
  align-items: center !important;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background:var(--color-app);
}

.repair-print-option input {
  width: 16px;
  min-height: 16px;
  margin: 0;
}

.repair-receipt-dialog {
  width: min(860px, 100%);
}

.repair-receipt-content {
  display: grid;
  gap: 18px;
  padding: 22px 24px;
  color:var(--n-17221d);
}

.repair-receipt-brand,
.repair-receipt-title-row,
.repair-receipt-signatures {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.repair-receipt-brand strong {
  color: var(--green);
  font-size: 17px;
}

.repair-receipt-brand span,
.repair-receipt-title-row span,
.repair-receipt-note {
  color: var(--muted);
  font-size: 10px;
}

.repair-receipt-title-row {
  padding-block: 14px;
  border-block:2px solid var(--color-primary);
}

.repair-receipt-title-row h3 {
  font-size: 22px;
}

.repair-receipt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
}

.repair-receipt-field {
  display: grid;
  gap: 3px;
  padding-bottom: 8px;
  border-bottom:1px solid var(--n-dce5e0);
}

.repair-receipt-field.is-wide {
  grid-column: 1 / -1;
}

.repair-receipt-field span {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.repair-receipt-field strong {
  min-height: 16px;
  font-size: 11px;
}

.repair-receipt-signatures {
  align-items: start;
  padding-top: 28px;
}

.repair-receipt-signature {
  width: 46%;
  padding-top: 8px;
  border-top:1px solid var(--n-35443d);
  color: var(--muted);
  font-size: 10px;
}

.repair-receipt-footer {
  padding-inline: 24px;
}

.contact-form-grid input:focus,
.contact-form-grid select:focus,
.contact-form-grid textarea:focus,
.contact-follow-up-fields input:focus,
.contact-follow-up-fields select:focus {
  border-color: var(--green-2);
  box-shadow: 0 0 0 3px rgba(31, 122, 85, 0.1);
}

.contact-form-grid .is-invalid,
.contact-follow-up-fields .is-invalid {
  border-color:var(--color-danger);
  background:var(--sig-rot-fff8f9);
}

.contact-field-wide {
  grid-column: 1 / -1;
}

.contact-follow-up {
  margin: 0 16px 14px;
  padding: 11px;
  border:1px solid var(--n-d7e8df);
  border-radius: 6px;
  background:var(--n-flaeche-leicht);
}

.contact-follow-up-toggle {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  cursor: pointer;
}

.contact-follow-up-toggle input {
  margin-top: 2px;
}

.contact-follow-up-toggle span {
  display: grid;
  gap: 2px;
}

.contact-follow-up-toggle strong {
  font-size: 10px;
}

.contact-follow-up-toggle small {
  color: var(--muted);
  font-size: 10px;
}

.contact-follow-up-fields {
  display: grid;
  grid-template-columns: 1.2fr 1.4fr 0.7fr;
  gap: 9px;
  margin-top: 11px;
  padding-top: 11px;
  border-top:1px solid var(--n-d7e8df);
}

.contact-follow-up-fields[hidden] {
  display: none;
}

.document-upload-modal {
  position: fixed;
  inset: 0;
  z-index: 117;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(17, 27, 22, 0.48);
}

.document-upload-modal.is-visible {
  display: grid;
}

.document-upload-dialog {
  width: min(680px, 100%);
  max-height: calc(var(--db-viewport-height, 100dvh) - 40px);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:var(--color-surface);
  box-shadow: 0 24px 70px rgba(17, 27, 22, 0.24);
}

.document-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 15px 16px 12px;
}

.document-upload-grid label {
  display: grid;
  align-content: start;
  gap: 5px;
}

.document-upload-grid label > span {
  color:var(--n-4e5c55);
  font-size: 10px;
  font-weight: 700;
}

.document-upload-grid label > span small {
  color: var(--muted);
  font-weight: 600;
}

.document-upload-grid input,
.document-upload-grid select {
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  border:1px solid var(--n-ccd7d1);
  border-radius: 5px;
  outline: 0;
  background:var(--color-surface);
  font: inherit;
  font-size: 10px;
}

.document-upload-grid input:focus,
.document-upload-grid select:focus {
  border-color: var(--green-2);
  box-shadow: 0 0 0 3px rgba(31, 122, 85, 0.1);
}

.document-upload-grid .is-invalid {
  border-color:var(--color-danger);
  background:var(--sig-rot-fff8f9);
}

.document-file-field {
  grid-column: 1 / -1;
}

.private-storage-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 16px 14px;
  padding: 10px 11px;
  border:1px solid var(--n-cfe4da);
  border-radius: 6px;
  background:var(--sig-gruen-f1faf6);
  color:var(--n-385047);
  font-size: 10px;
}

.private-storage-note svg {
  width: 18px;
  height: 18px;
  color: var(--green-2);
}

.private-storage-note span {
  display: grid;
  gap: 2px;
}

.contract-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 15px 16px 12px;
}

.contract-form-grid label {
  display: grid;
  align-content: start;
  gap: 5px;
}

.contract-form-grid label > span {
  color:var(--n-4e5c55);
  font-size: 10px;
  font-weight: 700;
}

.contract-form-grid input,
.contract-form-grid select {
  width: 100%;
  height: 34px;
  padding: 0 9px;
  border:1px solid var(--n-ccd7d1);
  border-radius: 5px;
  outline: 0;
  background:var(--color-surface);
  font: inherit;
  font-size: 10px;
}

.contract-form-grid input:focus,
.contract-form-grid select:focus {
  border-color: var(--green-2);
  box-shadow: 0 0 0 3px rgba(31, 122, 85, 0.1);
}

.contract-form-grid input.is-invalid,
.contract-form-grid select.is-invalid {
  border-color:var(--color-danger);
  background:var(--sig-rot-fff8f9);
}

.contract-form-grid label > small {
  color: var(--muted);
  font-size: 10px;
}

.contract-field-wide {
  grid-column: 1 / -1;
}

.contract-auto-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 16px 15px;
  padding: 10px;
  border:1px solid var(--n-cfe4da);
  border-radius: 6px;
  background:var(--sig-gruen-f1faf6);
}

.contract-auto-summary article {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding-right: 8px;
  border-right:1px solid var(--n-d7e8df);
}

.contract-auto-summary article:last-child {
  padding-right: 0;
  border-right: 0;
}

.contract-auto-summary small,
.contract-auto-summary span {
  color: var(--muted);
  font-size: 10px;
}

.contract-auto-summary strong {
  overflow-wrap: anywhere;
  font-size: 11px;
}

.commission-billing-input,
.commission-status-select {
  width: 100%;
  min-width: 105px;
  height: 28px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background:var(--color-surface);
  font: inherit;
  font-size: 10px;
}

.commission-billing-input:focus,
.commission-status-select:focus {
  border-color: var(--green-2);
  outline: 0;
  box-shadow: 0 0 0 2px rgba(31, 122, 85, 0.1);
}

.commission-table {
  min-width: 1480px;
}

.commission-table th:nth-child(1) { width: 105px; }
.commission-table th:nth-child(2) { width: 90px; }
.commission-table th:nth-child(3) { width: 125px; }
.commission-table th:nth-child(4) { width: 120px; }
.commission-table th:nth-child(5) { width: 125px; }
.commission-table th:nth-child(6) { width: 100px; }
.commission-table th:nth-child(7) { width: 125px; }
.commission-table th:nth-child(8) { width: 170px; }
.commission-table th:nth-child(9) { width: 125px; }
.commission-table th:nth-child(10) { width: 110px; }
.commission-table th:nth-child(11) { width: 140px; }
.commission-table th:nth-child(12) { width: 115px; }

.commission-table-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-field);
  background:var(--color-surface);
  scrollbar-color:var(--n-cbd7d0) transparent;
  scrollbar-width: thin;
}

.commission-table-scroll::-webkit-scrollbar {
  height: 8px;
}

.commission-table-scroll::-webkit-scrollbar-thumb {
  border:2px solid var(--color-surface);
  border-radius: 999px;
  background:var(--n-cbd7d0);
}

.commission-memo-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 27px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:var(--color-surface);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.commission-memo-button svg {
  width: 12px;
  height: 12px;
}

.commission-memo-button.has-memo {
  border-color:var(--sig-rot-e5a6ae);
  background:var(--sig-rot-fff0f2);
  color: var(--red);
}

.commission-memo-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(17, 27, 22, 0.46);
}

.commission-memo-modal.is-visible {
  display: grid;
}

.commission-memo-dialog {
  display: grid;
  gap: 12px;
  width: min(430px, 100%);
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:var(--color-surface);
  box-shadow: 0 24px 70px rgba(17, 27, 22, 0.24);
}

.commission-memo-dialog header,
.commission-memo-dialog footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.commission-memo-dialog header p,
.commission-memo-dialog footer span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.commission-memo-dialog textarea {
  width: 100%;
  padding: 9px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 11px;
}

.commission-status-select.neutral {
  background:var(--color-surface);
}

.commission-status-select.ok {
  border-color:var(--sig-gruen-b9dfcd);
  background:var(--sig-gruen-edf8f2);
  color: var(--green);
}

.commission-status-select.warning {
  border-color:var(--sig-amber-f0cf9b);
  background:var(--sig-amber-fff4e3);
  color:var(--sig-amber-9a5a00);
}

.commission-amount {
  position: relative;
  display: grid;
  justify-items: end;
  gap: 2px;
}

.commission-amount small {
  color: var(--green);
  font-size: 10px;
}

.commission-amount input {
  width: 104px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:var(--color-surface);
  font: inherit;
  text-align: right;
}

.commission-amount input:focus {
  border-color: var(--green-2);
  outline: 0;
  box-shadow: 0 0 0 2px rgba(31, 122, 85, 0.1);
}

.commission-payment-meta {
  display: block;
  margin: 4px 0;
  color: var(--muted);
  font-size: 10px;
}

.commission-cancel-action {
  margin-top: 4px;
  color: var(--red);
}

.commission-import-result {
  margin: 10px 0;
  overflow: hidden;
  border:1px solid var(--n-cfe4da);
  border-radius: 7px;
  background:var(--sig-gruen-f8fcfa);
}

.commission-import-result[hidden] {
  display: none;
}

.commission-import-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background:var(--n-flaeche-kraeftig);
  border-bottom:1px solid var(--n-cfe4da);
}

.commission-import-summary article {
  display: grid;
  gap: 2px;
  padding: 9px;
  background:var(--color-surface);
}

.commission-import-summary small {
  color: var(--muted);
  font-size: 10px;
}

.commission-import-summary strong {
  font-size: 14px;
}

.commission-import-rows {
  max-height: 180px;
  overflow-y: auto;
}

.commission-import-rows article {
  display: grid;
  grid-template-columns: 42px minmax(120px, 0.7fr) minmax(100px, 0.5fr) minmax(180px, 1fr);
  gap: 8px;
  align-items: center;
  padding: 7px 9px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 10px;
}

.commission-import-rows article:last-child {
  border-bottom: 0;
}

.commission-import-rows article > span {
  color: var(--muted);
}

.commission-import-result-tag {
  display: inline-flex;
  justify-content: center;
  padding: 3px 6px;
  border-radius: 999px;
  font-weight: 700;
}

.commission-import-result-tag.received {
  color:var(--sig-gruen-17653f);
  background:var(--sig-gruen-e2f4e9);
}

.commission-import-result-tag.deviation,
.commission-import-result-tag.ambiguous {
  color:var(--sig-amber-8a5b00);
  background:var(--sig-amber-fff2d6);
}

.commission-import-result-tag.unknown,
.commission-import-result-tag.invalid {
  color:var(--sig-rot-a42d3d);
  background:var(--sig-rot-fde8eb);
}

.distributor-modal {
  position: fixed;
  inset: 0;
  z-index: 116;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(17, 27, 22, 0.48);
}

.distributor-modal.is-visible {
  display: grid;
}

.distributor-dialog {
  width: min(520px, 100%);
  max-height: calc(var(--db-viewport-height, 100dvh) - 40px);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:var(--color-surface);
  box-shadow: 0 24px 70px rgba(17, 27, 22, 0.24);
}

.distributor-content {
  display: grid;
  gap: 12px;
  padding: 14px 16px 16px;
}

.distributor-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.distributor-add input,
.distributor-list input {
  width: 100%;
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  outline: 0;
  font: inherit;
  font-size: 10px;
}

.distributor-add input:focus,
.distributor-list input:focus {
  border-color: var(--green-2);
  box-shadow: 0 0 0 3px rgba(31, 122, 85, 0.1);
}

.distributor-list {
  display: grid;
  gap: 8px;
}

.distributor-list label {
  display: grid;
  grid-template-columns: 105px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.distributor-list span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

/* Distributor-Verwaltung ist ein eigener Arbeitsbereich: Stammdaten links,
   laufende Ziele rechts. Der einzelne Ziel-Editor bleibt bewusst ein Dialog. */
.distributor-settings-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
}

.distributor-settings-intro h2,
.distributor-settings-intro p {
  margin: 0;
}

.distributor-settings-intro h2 {
  font-size: 14px;
}

.distributor-settings-intro p {
  max-width: 680px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.distributor-settings-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr);
  gap: 12px;
  align-items: start;
}

.distributor-directory-panel,
.distributor-targets-panel {
  padding: 16px;
}

.distributor-directory-panel .user-admin-head,
.distributor-targets-panel .user-admin-head {
  margin-bottom: 12px;
}

.distributor-directory-panel .user-admin-head h2,
.distributor-targets-panel .user-admin-head h2 {
  font-size: 14px;
}

.distributor-directory-panel .user-admin-head p,
.distributor-targets-panel .user-admin-head p {
  font-size: 10px;
}

.distributor-add {
  margin-bottom: 12px;
}

.distributor-add label {
  min-width: 0;
}

.distributor-add input,
.distributor-list input {
  height: 36px;
  padding: 0 10px;
  font-size: 11px;
}

.distributor-list {
  gap: 8px;
}

.distributor-list label {
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background:var(--color-surface);
}

.distributor-targets-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}

.distributor-targets-table {
  min-width: 690px;
}

.distributor-targets-table tbody td {
  padding: 10px;
}

.distributor-targets-table small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.distributor-target-bonus {
  color: var(--green);
  font-weight: 600;
}

.distributor-target-deadline {
  color: var(--muted);
  font-size: 11px;
}

.distributor-target-actions > div {
  justify-content: flex-end;
}

/* Vereinbarungsformular: auch das native PDF-Feld folgt den ruhigen Eingaben der Arbeitsmasken. */
.target-form-control {
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background:var(--color-surface);
  color: var(--text);
  font: inherit;
}

.target-source-upload input[type="file"] {
  padding: 4px;
  background: var(--surface-soft);
}

.target-source-upload input[type="file"]::file-selector-button {
  min-height: 28px;
  margin-right: 8px;
  padding: 0 10px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background:var(--color-surface);
  color: var(--green);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.target-source-upload input[type="file"]::file-selector-button:hover {
  border-color: var(--green);
  background: var(--green-soft);
}

.distributor-targets-empty td {
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 980px) {
  .distributor-settings-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .distributor-settings-intro {
    align-items: flex-start;
    flex-direction: column;
  }

  .distributor-directory-panel,
  .distributor-targets-panel {
    padding: 12px;
  }

  .distributor-targets-panel .user-admin-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .distributor-targets-panel .primary-button {
    width: 100%;
  }

  .distributor-targets-table-wrap {
    overflow: visible;
    border: 0;
  }

  .distributor-targets-table,
  .distributor-targets-table tbody,
  .distributor-targets-table tr,
  .distributor-targets-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .distributor-targets-table thead {
    display: none;
  }

  .distributor-targets-table tbody {
    display: grid;
    gap: 8px;
  }

  .distributor-targets-table tbody tr:not(.distributor-targets-empty) {
    overflow: hidden;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background:var(--color-surface);
  }

  .distributor-targets-table tbody td:not(.distributor-target-actions) {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 12px;
    border-bottom: 1px solid var(--line-soft);
  }

  .distributor-targets-table tbody td:not(.distributor-target-actions)::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
  }

  .distributor-target-actions {
    padding-top: 8px;
  }

  .distributor-target-actions > div {
    justify-content: flex-end;
  }

  .distributor-targets-empty td {
    border: 1px solid var(--line-soft);
    border-radius: 8px;
  }
}

/* Einheitliche, verlustfreie Darstellung aller Netzbetreiber-Logos. */
.carrier-logo,
.pipeline-carrier,
.mini-carrier,
.customer-carrier-logo,
.offer-carrier-logo {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  aspect-ratio: 1;
  border-radius: 5px;
  background: transparent;
  overflow: visible;
}

.carrier-logo { width: 36px; height: 36px; }
.pipeline-carrier { width: 18px; height: 18px; }
.mini-carrier { width: 19px; height: 19px; }
.customer-carrier-logo { width: 24px; height: 24px; }
.offer-carrier-logo { width: 26px; height: 26px; }

.carrier-logo img,
.pipeline-carrier img,
.mini-carrier img,
.customer-carrier-logo img,
.offer-carrier-logo img,
.tariff-logo {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: auto;
}

.tariff-logo {
  width: 32px !important;
  height: 32px !important;
  border-radius: 5px;
  background: transparent;
}

.module-view {
  gap: 10px;
}

.module-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.module-head p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
}

.module-tools {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.module-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.module-kpi {
  display: grid;
  gap: 3px;
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background:var(--color-surface);
  box-shadow: var(--shadow);
  border-top-width: 3px;
}

.module-kpi small,
.module-kpi span {
  color: var(--muted);
  font-size: 10px;
}

.module-kpi strong {
  font-size: 22px;
  line-height: 1.05;
}

.module-kpi.green { border-top-color: var(--green-2); }
.module-kpi.orange { border-top-color:var(--sig-amber-f3a53d); }
.module-kpi.blue { border-top-color:var(--sig-blau-4f7cff); }
.module-kpi.red { border-top-color: var(--red); }

.module-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

.module-panel > * {
  min-width: 0;
  max-width: 100%;
}

.module-filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}

.module-filterbar label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
  min-width: 140px;
  flex: 1 1 150px;
}

.module-filterbar select,
.module-filterbar input {
  height: 32px;
  min-width: 0;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:var(--color-surface);
  color: var(--text);
  font-size: 11px;
}

.invoice-detail-panel {
  display: grid;
  gap: 14px;
}

.invoice-detail-panel[hidden] {
  display: none;
}

.invoice-detail-head,
.invoice-detail-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.invoice-detail-head span,
.invoice-detail-head p,
.invoice-detail-actions > span {
  color: var(--muted);
  font-size: 10px;
}

.invoice-detail-head h2 {
  margin-top: 3px;
  font-size: 17px;
}

.invoice-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.invoice-detail-grid article {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background:var(--n-flaeche-leicht);
}

.invoice-detail-grid small {
  color: var(--muted);
  font-size: 10px;
}

.invoice-detail-grid strong {
  font-size: 11px;
}

.invoice-detail-actions {
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.system-explainer {
  display: grid;
  gap: 5px;
  border-left: 3px solid var(--green-2);
  background:var(--sig-gruen-f4faf7);
}

.system-explainer strong {
  font-size: 11px;
}

.system-explainer p {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

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

@media (max-width: 760px) {
  .module-table {
    min-width: 680px;
  }
}

.module-table thead {
  background:var(--n-flaeche-leicht);
}

.module-table th {
  color: var(--muted);
  font-weight: 600;
  text-align: left;
}

.module-table th,
.module-table td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}

.module-table td > strong {
  display: block;
  font-weight: 700;
}

.module-table td small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.module-table tbody tr:hover {
  background:var(--n-flaeche);
}

.tasks-view {
  gap: 10px;
}

.task-panel {
  display: grid;
  gap: 10px;
}

.task-workspace-tabs {
  display: inline-flex;
  width: max-content;
  padding: 3px;
  border-radius: 7px;
  background:var(--n-flaeche-ruhig);
}

.task-workspace-tabs button {
  min-height: 28px;
  padding: 0 11px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color:var(--n-52625a);
  font-size: 10px;
  font-weight: 700;
}

.task-workspace-tabs button.is-active {
  background:var(--color-surface);
  color: var(--green);
  box-shadow: 0 1px 3px rgba(28, 43, 35, 0.08);
}

.task-toolbar {
  grid-template-columns: minmax(260px, 1.45fr) repeat(3, minmax(145px, 0.65fr));
  align-items: end;
  padding-bottom: 10px;
}

.task-toolbar .tariff-world-search {
  display: flex;
  align-items: center;
  width: 100%;
}

.module-filterbar label.tariff-world-search {
  display: flex;
  gap: 7px;
}

.module-filterbar .tariff-world-search input {
  height: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
}

.module-filterbar .tariff-world-search input:focus {
  box-shadow: none;
}

.task-create-row {
  display: grid;
  grid-template-columns: minmax(165px, 1.25fr) minmax(145px, 1fr) 120px 130px 125px 135px auto;
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background:var(--n-flaeche-leicht);
}

.task-create-row label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
}

.task-create-row input,
.task-create-row select {
  width: 100%;
  height: 32px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:var(--color-surface);
  color: var(--text);
  font-size: 10px;
}

.task-create-row [hidden] {
  display: none !important;
}

.followup-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 9px;
}

.followup-column {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 260px;
  padding: 7px;
  border-radius: 8px;
}

.followup-column.today { background: linear-gradient(180deg, rgba(11, 104, 73, 0.1), rgba(11, 104, 73, 0) 72%); }
.followup-column.tomorrow { background: linear-gradient(180deg, rgba(79, 124, 255, 0.11), rgba(79, 124, 255, 0) 72%); }
.followup-column.week { background: linear-gradient(180deg, rgba(243, 165, 61, 0.13), rgba(243, 165, 61, 0) 72%); }
.followup-column.later { background: linear-gradient(180deg, rgba(113, 128, 120, 0.12), rgba(113, 128, 120, 0) 72%); }

.followup-column header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 42px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--green-2);
  border-radius: 7px;
  background:var(--color-surface);
}

.followup-column.tomorrow header { border-top-color:var(--sig-blau-4f7cff); }
.followup-column.week header { border-top-color:var(--sig-amber-f3a53d); }
.followup-column.later header { border-top-color:var(--n-718078); }

.followup-column header strong,
.followup-column header small {
  display: block;
}

.followup-column header strong {
  font-size: 11px;
}

.followup-column header small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.followup-column header > span {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  border-radius: 999px;
  background:var(--n-flaeche-ruhig);
  color:var(--n-435049);
  font-size: 10px;
  font-weight: 700;
}

.followup-column-list {
  display: grid;
  gap: 8px;
}

.followup-card {
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid var(--line);
  border-left:2px solid var(--n-99aaa1);
  border-radius: 7px;
  background:var(--color-surface);
  box-shadow: 0 8px 20px rgba(28, 43, 35, 0.045);
}

.followup-card.high { border-left-color: var(--red); }
.followup-card.medium { border-left-color:var(--sig-amber-f3a53d); }
.followup-card.low { border-left-color:var(--n-99aaa1); }

.followup-card-head,
.followup-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.followup-card-head b {
  color: var(--muted);
  font-size: 10px;
}

.followup-card > strong {
  font-size: 11px;
}

.followup-card > strong,
.followup-card p,
.followup-card p small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.followup-card p {
  margin: 0;
  color:var(--n-334039);
  font-size: 10px;
}

.followup-card p small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.followup-card-foot span {
  color: var(--muted);
  font-size: 10px;
}

.followup-empty {
  display: grid;
  place-items: center;
  min-height: 92px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.65);
  color: var(--muted);
  font-size: 10px;
}

.task-table {
  min-width: 980px;
}

.task-table th:first-child,
.task-table td:first-child {
  width: 92px;
}

.task-table th:nth-child(4),
.task-table td:nth-child(4),
.task-table th:nth-child(5),
.task-table td:nth-child(5),
.task-table th:nth-child(6),
.task-table td:nth-child(6),
.task-table th:nth-child(7),
.task-table td:nth-child(7) {
  width: 118px;
}

.task-table th:last-child,
.task-table td:last-child {
  width: 112px;
}

.task-table tr.is-muted {
  opacity: 0.64;
}

.task-table td:nth-child(2),
.task-table td:nth-child(3),
.task-table td:nth-child(2) > strong,
.task-table td:nth-child(2) > small,
.task-table td:nth-child(3) > strong,
.task-table td:nth-child(3) > small {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .task-toolbar,
  .task-create-row,
  .followup-board {
    grid-template-columns: minmax(0, 1fr);
  }

  .task-workspace-tabs {
    width: 100%;
  }

  .task-workspace-tabs button {
    flex: 1 1 0;
  }
}

.task-done-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:var(--color-surface);
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
}

.task-done-button:disabled {
  cursor: default;
  color: var(--muted);
  background:var(--n-flaeche-leicht);
}

.carrier-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color:var(--n-334039);
  white-space: nowrap;
}

.muted-cell {
  color: var(--muted);
}

.status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.status-chip.ok {
  color: var(--green);
  background: var(--mint);
}

.status-chip.open {
  color:var(--sig-amber-9a5a00);
  background:var(--sig-amber-fff1d9);
}

.status-chip.warning {
  color:var(--sig-amber-a45b00);
  background:var(--sig-amber-fff1d9);
}

.status-chip.booked {
  color:var(--color-info);
  background:var(--sig-blau-eef4ff);
}

.status-chip.neutral {
  color:var(--n-56635d);
  background:var(--n-flaeche-ruhig);
}

.status-chip.danger {
  color: var(--red);
  background:var(--sig-rot-fdecef);
}

.repair-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 9px;
}

.repair-column {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.46);
}

.repair-column header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--green-2);
  border-radius: 7px;
  background:var(--color-surface);
}

.repair-column.received header { border-top-color:var(--sig-amber-f3a53d); }
.repair-column.workshop header { border-top-color:var(--sig-blau-4f7cff); }
.repair-column.ready header { border-top-color: var(--green-2); }
.repair-column.done header { border-top-color:var(--n-8a9490); }

.repair-column header strong {
  font-size: 11px;
}

.repair-column header span {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background:var(--n-flaeche-ruhig);
  color:var(--n-435049);
  font-size: 10px;
}

.repair-cards {
  display: grid;
  gap: 8px;
}

.repair-card {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background:var(--color-surface);
  box-shadow: 0 8px 20px rgba(28, 43, 35, 0.045);
}

.repair-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.repair-card h3 {
  font-size: 12px;
}

.repair-card p {
  color: var(--muted);
  font-size: 10px;
}

.repair-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 8px;
  margin: 0;
}

.repair-card dt {
  color: var(--muted);
  font-size: 10px;
}

.repair-card dd {
  margin: 2px 0 0;
  font-size: 10px;
  font-weight: 600;
}

.repair-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.repair-actions .secondary-button {
  min-height: 28px;
  padding: 0 8px;
  min-width: 0;
}

.repair-status-field {
  display: grid;
  gap: 4px;
}

.repair-status-field span {
  color: var(--muted);
  font-size: 10px;
}

.repair-status-field select {
  width: 100%;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:var(--color-sidebar);
  color: var(--ink);
  font: inherit;
  font-size: 10px;
}

.repair-empty {
  padding: 18px 10px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  color: var(--muted);
  text-align: center;
  font-size: 10px;
}

.repair-archive-panel {
  display: grid;
  gap: 10px;
}

.repair-archive-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.repair-archive-toggle > span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.repair-archive-toggle svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.repair-archive-toggle small {
  color: var(--muted);
  font-size: 10px;
}

.repair-archive-toggle.is-open > svg {
  transform: rotate(180deg);
}

.repair-archive-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}

.repair-archive-list[hidden] {
  display: none;
}

.repair-archive-item {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background:var(--n-flaeche-leicht);
}

.repair-archive-item span,
.repair-archive-item small {
  color: var(--muted);
  font-size: 10px;
}

.repair-archive-actions {
  display: flex;
  gap: 6px;
  margin-top: 3px;
}

.calendar-grid,
.campaign-layout,
.analytics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.85fr);
  /* Zehn Pixel liessen die Kacheln aneinanderkleben - zwei Auswertungen sahen
     aus wie eine. Der Abstand trennt sie, ohne die Seite auseinanderzureissen. */
  gap: 16px;
  align-items: start;
}

/* Kalender: Die Tages- und Zeitraumskarte bilden bewusst eine gemeinsame
   Arbeitsreihe. Sie strecken sich deshalb auf die gleiche Mindesthöhe, auch
   wenn eine Seite gerade den Leerzustand zeigt. */
.calendar-grid.simple-layout-grid[data-columns="2"] {
  align-items: stretch;
}

.calendar-grid.simple-layout-grid > .panel {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 144px;
}

.calendar-grid.simple-layout-grid .calendar-agenda-list,
.calendar-grid.simple-layout-grid .calendar-week-list {
  flex: 1;
  min-height: 48px;
}

/* Auswertung: gleich breite Spalten (arrangierbare Kacheln wie in den anderen Modulen). */
.analytics-grid[data-columns="1"] {
  grid-template-columns: minmax(0, 1fr);
}
.analytics-grid[data-columns="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.analytics-grid[data-columns="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Lange Zielgruppen-Liste fest rechts ueber beide Zeilen -> Kampagnenplan und
   Massenversand stapeln sich links ohne Luecke. Nur im 2-Spalten-Layout. */
.campaign-layout[data-columns="2"] .campaign-target-card {
  grid-column: 2;
  grid-row: 1 / span 2;
}

/* Pin-Symbol je Kachel (Reihenfolge-Pinning). */
.panel-pin {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid var(--line);
  background:var(--color-surface);
  color:var(--n-7c8a83);
  border-radius: 6px;
  padding: 3px 7px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.panel-pin.is-pinned {
  border-color: var(--green);
  color: var(--green);
  background: var(--mint);
}

.is-dragging {
  opacity: 0.5;
}

#fixedCostsRoot {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Spalten-Umschalter in der Kopfzeile auf Höhe der Filterfelder (die ein Label
   über sich haben) ausrichten. */
.module-tools .view-col-toggle {
  align-self: flex-end;
}

.analytics-grid[data-columns="1"] {
  grid-template-columns: minmax(0, 1fr);
}

.analytics-grid[data-columns="2"] {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
}

.analytics-view {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  overflow-x: hidden;
}

.analytics-view > * {
  min-width: 0;
  max-width: 100%;
}

.analytics-grid[data-pinned="users"] [data-analytics-section="users"],
.analytics-grid[data-pinned="providers"] [data-analytics-section="providers"] {
  grid-column: 1 / -1;
  grid-row: 1;
}

.simple-layout-grid[data-columns="1"] {
  grid-template-columns: minmax(0, 1fr);
}

.simple-layout-grid[data-columns="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.simple-layout-grid[data-columns="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.simple-layout-grid[data-pinned]:not([data-pinned="none"]) [data-simple-section] {
  min-width: 0;
}

.simple-layout-grid[data-pinned="agenda"] [data-simple-section="agenda"],
.simple-layout-grid[data-pinned="range"] [data-simple-section="range"],
.simple-layout-grid[data-pinned="plans"] [data-simple-section="plans"],
.simple-layout-grid[data-pinned="targets"] [data-simple-section="targets"],
.simple-layout-grid[data-pinned="security"] [data-simple-section="security"],
.simple-layout-grid[data-pinned="backups"] [data-simple-section="backups"],
.simple-layout-grid[data-pinned="sessions"] [data-simple-section="sessions"],
.simple-layout-grid[data-pinned="users"] [data-simple-section="users"] {
  grid-column: 1 / -1;
  grid-row: 1;
}

.analytics-panel {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.analytics-table-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
}

.analytics-user-table {
  width: max(100%, 760px);
  min-width: 760px;
}

.calendar-agenda,
.calendar-week,
.campaign-list-card,
.campaign-target-card,
.analytics-panel {
  display: grid;
  gap: 10px;
}

.calendar-agenda-list,
.calendar-week-list,
.campaign-list,
.campaign-targets,
.analytics-bars {
  display: grid;
  gap: 8px;
}

.calendar-event,
.calendar-week-list article,
.campaign-targets article {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background:var(--color-surface);
}

.calendar-event time {
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
}

.calendar-event strong,
.calendar-week-list strong,
.campaign-targets strong {
  display: block;
  font-size: 11px;
}

.calendar-event span,
.calendar-week-list span,
.campaign-targets span,
.campaign-targets small {
  color: var(--muted);
  font-size: 10px;
}

.calendar-event b {
  color: var(--green);
  font-size: 11px;
}

.calendar-event.vvl { border-left:3px solid var(--sig-amber-f3a53d); }
.calendar-event.offer { border-left:3px solid var(--sig-blau-4f79ff); }
.calendar-event.repair { border-left:3px solid var(--n-64748b); }
.calendar-event.callback { border-left: 3px solid var(--green); }
.calendar-event.appointment { border-left:3px solid var(--n-94a3b8); }
/* Privater Eintrag: eigene Farbe, damit er sich beim Ueberfliegen von den
   Kundenterminen abhebt - er ist keine Arbeit, sondern eine Sperre. */
.calendar-event.privat { border-left:3px solid var(--sig-lila-7c5cbf); background: rgba(124, 92, 191, .05); }

.cal-type-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.cal-type-badge.vvl { background: rgba(243, 165, 61, .15); color:var(--color-warning); border-color: rgba(243, 165, 61, .45); }
.cal-type-badge.offer { background: rgba(79, 121, 255, .14); color:var(--sig-blau-3358d4); border-color: rgba(79, 121, 255, .45); }
.cal-type-badge.repair { background: rgba(100, 116, 139, .15); color:var(--n-text); border-color: rgba(100, 116, 139, .45); }
.cal-type-badge.callback { background: rgba(11, 104, 73, .12); color: var(--green); border-color: rgba(11, 104, 73, .35); }
.cal-type-badge.appointment { background: rgba(100, 116, 139, .12); color:var(--n-text); border-color: rgba(100, 116, 139, .3); }

.calendar-done-panel { margin-top: 12px; }
.calendar-done-list { margin-top: 10px; display: grid; gap: 8px; }

.calendar-staff-bar { margin: 0 0 12px; padding: 12px 14px; }
.calendar-staff-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.calendar-staff-head strong { font-size: 12px; }
.calendar-staff-quick { display: inline-flex; gap: 12px; }
.calendar-staff-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.calendar-staff-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border:1px solid var(--n-cbd7d0);
  border-radius: 999px;
  font-size: 11px;
  cursor: pointer;
  background:var(--n-flaeche-kraeftig);
  color:var(--n-53645b);
  user-select: none;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.calendar-staff-chip:hover { background:var(--n-d6e1da); border-color:var(--n-b9cbc0); }
.calendar-staff-chip.is-active { background: var(--green-2); border-color: var(--green-2); color:var(--color-surface); font-weight: 600; }
.calendar-staff-chip.is-active:hover { background: var(--green); border-color: var(--green); }
.calendar-staff-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.calendar-staff-chip:has(input:focus-visible) { outline: 2px solid var(--green-2); outline-offset: 2px; }
.calendar-staff-empty { font-size: 11px; color: var(--muted); }

/* Kalender-KPIs: 5 Kacheln in einer Reihe (global sind es 4) */
.calendar-view .module-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1000px) { .calendar-view .module-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .calendar-view .module-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Monatsansicht (Tagesraster) */
.calendar-view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.calendar-view-toggle button { border: 0; background:var(--color-surface); color: var(--muted); font-size: 11px; font-weight: 600; padding: 7px 14px; cursor: pointer; }
.calendar-view-toggle button.is-active { background: var(--green); color:var(--color-surface); }
.calendar-month-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.calendar-month-head strong { font-size: 14px; min-width: 150px; text-transform: capitalize; }
.calendar-month-head .secondary-button { margin-left: auto; }
.calendar-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-month-weekday { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); text-align: center; padding-bottom: 2px; }
.cal-month-cell { min-height: 94px; border: 1px solid var(--line-soft); border-radius: 8px; padding: 5px; background:var(--color-surface); cursor: pointer; display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.cal-month-cell.is-out { background:var(--n-flaeche-leicht); }
.cal-month-cell.is-out .cal-month-daynum { color:var(--n-b6c0bb); }
.cal-month-cell.is-today { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.cal-month-daynum { font-size: 11px; font-weight: 700; color: var(--text); }
.cal-month-cell.is-today .cal-month-daynum { color: var(--green); }
.cal-month-events { display: flex; flex-direction: column; gap: 3px; }
.cal-month-event { text-align: left; border: 0; border-left:3px solid var(--n-94a3b8); background:var(--n-flaeche-ruhig); border-radius: 4px; padding: 2px 5px; font-size: 10px; line-height: 1.25; color: var(--text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-month-event b { font-weight: 700; }
.cal-month-event.vvl { border-left-color:var(--sig-amber-f3a53d); background: rgba(243, 165, 61, .12); }
.cal-month-event.offer { border-left-color:var(--sig-blau-4f79ff); background: rgba(79, 121, 255, .12); }
.cal-month-event.repair { border-left-color:var(--n-64748b); background: rgba(100, 116, 139, .12); }
.cal-month-event.callback { border-left-color: var(--green); background: rgba(11, 104, 73, .10); }
.cal-month-event.appointment { border-left-color:var(--n-94a3b8); }
.cal-month-event.privat { border-left-color:var(--sig-lila-7c5cbf); background: rgba(124, 92, 191, .12); }

/* Felder im Dialog fuer den privaten Eintrag. Zwei Spalten - Tag, Von und Bis
   stehen nebeneinander, Betreff und Art ueber die ganze Breite. */
.privat-felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.privat-felder label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  font-size: 12px;
  color: var(--muted);
}

.privat-felder input,
.privat-felder select {
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:var(--color-surface);
  color: var(--text);
  font: inherit;
  font-size: 12px;
}

.privat-felder input:focus-visible,
.privat-felder select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.privat-breit { grid-column: 1 / -1; }
.cal-month-more { border: 0; background: none; color: var(--muted); font-size: 10px; font-weight: 600; text-align: left; padding: 1px 4px; cursor: pointer; }
.cal-month-event[draggable="true"] { cursor: grab; }
.cal-month-event[draggable="true"]:active { cursor: grabbing; }
.cal-month-cell.cal-month-drop { background: rgba(11, 104, 73, .10); outline: 2px dashed rgba(11, 104, 73, .45); outline-offset: -2px; }
@media (max-width: 720px) { .cal-month-cell { min-height: 62px; } .cal-month-event { font-size: 10px; } }

/* Wochenansicht (Stunden-Raster) */
.calendar-week-scroll { overflow-x: auto; }
.calendar-week-grid {
  display: grid;
  grid-template-columns: 54px repeat(var(--cal-week-days, 7), minmax(96px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  overflow: hidden;
}
.cw-corner { background:var(--color-surface); }

/* Am Handy ein Tag statt sieben - dieselbe Loesung wie im Schichtraster.
   Vorher liess sich die Wochenansicht dort nicht einmal nach rechts schieben:
   vier Tage waren schlicht unerreichbar. Gemeldet am 05.09.2026. */
@media (max-width: 620px) {
  .calendar-week-tagleiste { display: flex; gap: 4px; margin-bottom: 10px; }

  .calendar-week-grid { grid-template-columns: 54px 1fr; }

  .calendar-week-scroll { overflow-x: hidden; }

  .calendar-week-grid [data-tagnummer]:not(.is-aktiv) { display: none; }
}
.cw-dayhead { background:var(--color-surface); text-align: center; padding: 6px 4px; display: flex; flex-direction: column; gap: 1px; }
.cw-dayhead span { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.cw-dayhead strong { font-size: 11px; }
.cw-dayhead.is-today { background: rgba(11, 104, 73, .08); }
.cw-dayhead.is-today strong { color: var(--green); }
.cw-timelabel { background:var(--color-surface); font-size: 10px; color: var(--muted); text-align: right; padding: 4px 6px; font-weight: 600; }
.cw-allday-label { color:var(--n-9aa8a2); }
.cw-allday-cell, .cw-cell { background:var(--color-surface); padding: 3px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.cw-allday-cell { min-height: 28px; }
.cw-cell { min-height: 42px; }
.cw-cell.is-today { background: rgba(11, 104, 73, .04); }
.cw-event { text-align: left; border: 0; border-left:3px solid var(--n-94a3b8); background:var(--n-flaeche-ruhig); border-radius: 4px; padding: 2px 5px; font-size: 10px; line-height: 1.2; color: var(--text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-event.vvl { border-left-color:var(--sig-amber-f3a53d); background: rgba(243, 165, 61, .12); }
.cw-event.offer { border-left-color:var(--sig-blau-4f79ff); background: rgba(79, 121, 255, .12); }
.cw-event.repair { border-left-color:var(--n-64748b); background: rgba(100, 116, 139, .12); }
.cw-event.callback { border-left-color: var(--green); background: rgba(11, 104, 73, .10); }
.cw-event.appointment { border-left-color:var(--n-94a3b8); }

/* Kalender-Einstellungen */
.settings-hint { font-size: 11px; color: var(--muted); margin: 2px 0 8px; }
.calendar-settings-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 6px 2px 4px; }
.calendar-settings-grid .compact-tool-check { font-size: 11px; color: var(--text); }
.calendar-color-grid { display: flex; flex-wrap: wrap; gap: 14px; padding: 4px 2px 10px; }
.cal-color-item { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: var(--text); }
.cal-color-item input[type="color"] { width: 36px; height: 26px; border: 1px solid var(--line); border-radius: 6px; padding: 0; background: none; cursor: pointer; }
.cw-event[draggable="true"] { cursor: grab; }
.cw-event[draggable="true"]:active { cursor: grabbing; }
.cw-cell.cw-drop, .cw-allday-cell.cw-drop { background: rgba(11, 104, 73, .12); outline: 2px dashed rgba(11, 104, 73, .45); outline-offset: -2px; }

/* Kundenwert-Stufen (#18) */
.select-pill.silver { background:var(--n-flaeche-ruhig); color:var(--n-text); }
.select-pill.bronze { background:var(--sig-amber-f5ece2); color:var(--sig-amber-8a5a2b); }
.customer-tier-grid { display: flex; flex-wrap: wrap; gap: 16px; padding: 6px 2px; }
.customer-tier-grid input { min-height: 32px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; background:var(--color-surface); }
.customer-tier-grid input[type="number"] { width: 120px; }

/* Saubere Zeilen-Aktionen (Bearbeiten/Löschen in Listen) statt nackter Text-Links */
.row-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  background:var(--color-surface);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 7px;
  cursor: pointer;
  text-decoration: none;
}
.row-action svg { width: 13px; height: 13px; }
.row-action:hover { border-color: var(--green); color: var(--green); background: rgba(11, 104, 73, .06); }
.row-action.danger { color:var(--sig-rot-b91c1c); }
.row-action.danger:hover { border-color: rgba(185, 28, 28, .5); color:var(--sig-rot-b91c1c); background: rgba(185, 28, 28, .06); }

/* Speichern/Neu in den Einstellungs-Formularen: gleiche Hoehe wie die Felder (32px),
   auf einer Linie, damit der gruene Button nicht heraussticht. */
.custom-field-form .custom-field-actions,
.wa-template-form .wa-template-actions { display: flex; gap: 8px; align-items: flex-end; }
.custom-field-form .compact-button,
.wa-template-form .compact-button {
  height: 32px;
  min-height: 32px;
  padding: 0 12px;
  font-size: 11px;
}

/* Teil-Storno-Modal: gleicher Look wie die uebrigen Dialoge (Backdrop + Karte). */
.storno-modal { position: fixed; inset: 0; z-index: 118; display: none; place-items: center; padding: 20px; background: rgba(17, 27, 22, 0.48); }
.storno-modal.is-visible { display: grid; }
.storno-dialog { width: min(620px, 100%); max-height: calc(var(--db-viewport-height, 100dvh) - 40px); overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; background:var(--color-surface); box-shadow: 0 24px 70px rgba(17, 27, 22, 0.24); }
.storno-pos-list { display: grid; gap: 8px; padding: 15px 16px 6px; }
.storno-pos { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 7px; padding: 9px 11px; }
.storno-qty { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: var(--muted); }
.storno-qty input { width: 56px; border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; font-size: 12px; text-align: right; }
.storno-pos small { color: var(--muted); display: block; }
.storno-pos-amount { font-weight: 700; font-variant-numeric: tabular-nums; }
.storno-fields { display: grid; gap: 10px; padding: 6px 16px 12px; }
.storno-fields label { display: grid; gap: 5px; font-size: 11px; color:var(--n-4e5c55); }
.storno-fields input, .storno-fields select { border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; font-size: 12px; font-family: inherit; background:var(--color-surface); }
.storno-sum { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line-soft); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Rechnungs-Pagination (max. 10/Seite) */
.billing-pager { display: flex; gap: 6px; justify-content: flex-end; padding: 10px 2px 2px; }
.billing-page-btn { min-width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 6px; background:var(--color-surface); font-size: 11px; font-weight: 600; color: var(--text); cursor: pointer; }
.billing-page-btn:hover:not(:disabled) { border-color: var(--green); color: var(--green); }
.billing-page-btn.is-active { background: var(--green); border-color: var(--green); color:var(--color-surface); }
.billing-page-btn:disabled { opacity: .4; cursor: default; }

.calendar-recall-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: rgba(214, 158, 26, .10);
  border: 1px solid rgba(214, 158, 26, .30);
  border-radius: 8px;
}
.calendar-recall-row[hidden] { display: none; }
.calendar-recall-row .compact-tool-check,
.calendar-recall-row .calendar-recall-days {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.calendar-recall-row .compact-tool-check > span,
.calendar-recall-row .calendar-recall-days > span {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
}
.calendar-recall-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--green); }
.calendar-recall-row input[type="number"] {
  width: 58px;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  text-align: center;
}

.cal-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  color:var(--n-text);
  background:var(--n-flaeche-ruhig);
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: .02em;
}

.calendar-week-list article {
  grid-template-columns: minmax(0, 1fr) auto;
}

.calendar-week-list article.is-overdue {
  border-left:3px solid var(--color-danger);
}

.campaign-card {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  border-radius: 8px;
  background:var(--color-surface);
  color: var(--text);
  text-align: left;
}

.campaign-card.orange { border-top-color:var(--sig-amber-f3a53d); }
.campaign-card.green { border-top-color: var(--green); }
.campaign-card.blue { border-top-color:var(--sig-blau-4f79ff); }

.campaign-card.is-selected {
  border-color: var(--green-2);
  box-shadow: 0 0 0 2px rgba(11, 104, 73, 0.1);
}

.campaign-card strong {
  font-size: 12px;
}

.campaign-card span,
.campaign-card dt,
.campaign-card small {
  color: var(--muted);
  font-size: 10px;
}

.campaign-card small {
  display: block;
  margin-top: 4px;
  line-height: 1.35;
}

.campaign-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.campaign-card dd {
  margin: 2px 0 0;
  font-size: 11px;
  font-weight: 700;
}

.campaign-targets article {
  grid-template-columns: minmax(0, 1fr) auto;
}

.campaign-targets article.is-blocked {
  border-left: 3px solid var(--red);
  background:var(--sig-rot-fff8f8);
}

.campaign-targets article.is-eligible {
  border-left: 3px solid var(--green-2);
}

.campaign-target-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.campaign-target-meta b {
  color: var(--green);
  font-size: 11px;
}

.campaign-policy {
  display: flex;
  align-items: center;
  gap: 14px;
}

.campaign-policy > div {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-right: auto;
}

.campaign-policy > div > svg {
  width: 22px;
  height: 22px;
  color: var(--green);
}

.campaign-policy > div span,
.campaign-policy label {
  display: grid;
  gap: 2px;
}

.campaign-policy > div span {
  color: var(--muted);
  font-size: 10px;
}

.campaign-policy > div strong {
  color: var(--text);
  font-size: 11px;
}

.campaign-policy label span {
  color: var(--muted);
  font-size: 10px;
}

.campaign-policy select {
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:var(--color-surface);
  font-size: 10px;
}

.campaign-policy > strong {
  color: var(--green);
  font-size: 11px;
}

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

.analytics-bars article {
  display: grid;
  grid-template-columns: minmax(120px, 0.7fr) minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
}

.analytics-bars strong,
.analytics-bars span,
.analytics-bars b {
  display: block;
  font-size: 10px;
}

.analytics-bars span {
  color: var(--muted);
  font-size: 10px;
}

.analytics-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background:var(--n-flaeche-ruhig);
}

.analytics-bar span {
  height: 100%;
  border-radius: inherit;
}

.analytics-bar .telekom { background:var(--color-brand-telekom); }
.analytics-bar .vodafone { background:var(--sig-rot-e1251b); }
.analytics-bar .o2 { background:var(--sig-blau-1557ff); }
.analytics-bar .other { background:var(--n-94a3b8); }

.analytics-detail-panel {
  display: grid;
  gap: 10px;
}

.analytics-detail-panel[hidden] {
  display: none;
}

.analytics-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.analytics-detail-grid article {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background:var(--color-surface);
}

.analytics-detail-grid span {
  color: var(--muted);
  font-size: 10px;
}

.analytics-detail-grid b {
  color: var(--green);
  font-size: 12px;
}

.analytics-panel .dash-panel-head {
  position: relative;
}

.analytics-panel .dash-panel-head .link-button {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

.devices-table td,
.billing-table td {
  vertical-align: top;
}

.devices-table td strong,
.devices-table td small,
.billing-table td strong {
  display: block;
}

.devices-table td small {
  color: var(--muted);
  font-size: 10px;
}

.repair-card-head small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.repair-closeout-status {
  display: grid;
  gap: 5px;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background:var(--n-flaeche-leicht);
}

.repair-closeout-status span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.repair-closeout-status svg {
  width: 12px;
  height: 12px;
}

.repair-closeout-status .is-ready {
  color: var(--green);
}

.repair-closeout-status .is-open {
  color:var(--sig-amber-a45b00);
}

.repair-closeout-status .is-info {
  color:var(--color-info);
}

.device-content-grid {
  display: grid;
  gap: 10px;
  align-items: start;
  min-width: 0;
}

.inventory-workspace-tabs,
.inventory-column-toggle {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background:var(--color-app);
}

.inventory-workspace-tabs button,
.inventory-column-toggle button {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.inventory-workspace-tabs button:hover,
.inventory-column-toggle button:hover {
  color: var(--ink);
}

.inventory-workspace-tabs button.is-active,
.inventory-column-toggle button.is-active {
  background: var(--green);
  color:var(--color-surface);
  box-shadow: 0 1px 2px rgba(12, 77, 52, .16);
}

.inventory-workspace {
  display: grid;
  gap: 12px;
}

.inventory-workspace[hidden] {
  display: none;
}

.article-management-workspace {
  max-width: 1480px;
}

.device-content-grid[data-columns="1"] {
  grid-template-columns: minmax(0, 1fr);
}

.device-content-grid[data-columns="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.device-content-grid[data-columns="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.device-content-grid[data-pinned="devices"] [data-device-section="devices"],
.device-content-grid[data-pinned="deliveries"] [data-device-section="deliveries"],
.device-content-grid[data-pinned="articles"] [data-device-section="articles"],
.device-content-grid[data-pinned="inventory"] [data-device-section="inventory"] {
  grid-column: 1 / -1;
  grid-row: 1;
}

.device-section {
  min-width: 0;
  max-width: 100%;
}

.device-table-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background:var(--color-surface);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
}

/* Einheitliche Tabellenoberflaeche: Listen enden immer in einer ruhigen,
   abgerundeten Flaeche statt mit kantig aneinanderliegenden Tabellenzellen. */
.tariff-table-wrap,
.dashboard-table-scroll,
.customer-table-wrap {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background:var(--color-surface);
  overflow-y: hidden;
}

.device-table-scroll .module-table {
  width: max(100%, 720px);
  min-width: 720px;
}

.device-content-grid[data-columns="1"] .device-table-scroll .module-table,
.device-content-grid [data-device-section="devices"] .module-table {
  width: max(100%, 920px);
  min-width: 920px;
}

.inventory-panel {
  display: grid;
  gap: 10px;
  overflow: hidden;
}

.inventory-panel .dash-panel-head span {
  color: var(--muted);
  font-size: 10px;
}

.article-manager-panel {
  display: grid;
  gap: 12px;
}

.article-manager-panel .dash-panel-head {
  align-items: flex-start;
}

.article-manager-filters {
  margin-bottom: 0;
}

.article-manager-form {
  display: grid;
  gap: 12px;
  padding: 14px;
  border:1px solid var(--n-e1e9e4);
  border-radius: 12px;
  background:var(--n-flaeche);
}

.article-manager-form-head,
.article-manager-actions,
.article-manager-checks {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.article-manager-form-head {
  justify-content: space-between;
  font-size: 12px;
}

.article-manager-fields {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.article-manager-fields label,
.article-manager-checks label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
}

.article-manager-fields input,
.article-manager-fields select {
  width: 100%;
  min-height: 36px;
  min-width: 0;
  padding: 0 11px;
  border:1px solid var(--n-d7e1db);
  border-radius: 10px;
  outline: none;
  background:var(--color-surface);
  color: var(--text);
  box-shadow: inset 0 1px 1px rgba(15, 42, 30, .02);
  font-size: 12px;
}

.article-manager-fields select {
  padding-right: 32px;
}

.article-manager-fields input::placeholder {
  color:var(--n-8a9890);
}

.article-manager-fields input:focus,
.article-manager-fields select:focus {
  border-color: var(--green-2);
  box-shadow: 0 0 0 3px rgba(11, 104, 73, .10);
}

.article-manager-checks {
  padding-top: 2px;
}

.article-manager-checks label {
  grid-template-columns: auto 1fr;
  align-items: start;
  max-width: 330px;
}

.article-manager-checks input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  border:1px solid var(--n-b9c9bf);
  border-radius: 5px;
  background:var(--color-surface);
  cursor: pointer;
}

.article-manager-checks input:checked {
  border-color: var(--green-2);
  background: var(--green-2);
  box-shadow:inset 0 0 0 3px var(--color-surface);
}

.article-manager-checks input:focus-visible {
  box-shadow: 0 0 0 3px rgba(11, 104, 73, .16);
}

.article-manager-checks strong,
.article-manager-checks small {
  display: block;
}

.article-manager-checks strong {
  color: var(--ink);
  font-size: 11px;
}

.article-manager-checks small {
  margin-top: 2px;
  font-size: 10px;
}

.article-manager-actions {
  justify-content: flex-end;
  color: var(--muted);
  font-size: 10px;
}

.article-manager-actions > span {
  margin-right: auto;
}

.article-manager-table-wrap .module-table {
  width: max(100%, 1080px);
  min-width: 1080px;
}

.article-manager-table td small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.article-category-manager {
  border:1px solid var(--n-e1e9e4);
  border-radius: 10px;
  overflow: hidden;
  background:var(--color-surface);
}

.article-category-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-bottom: 1px solid transparent;
  background:var(--n-flaeche);
  color: var(--ink);
  text-align: left;
}

.article-category-toggle:hover {
  background:var(--n-flaeche-leicht);
}

.article-category-toggle span {
  font-size: 12px;
  font-weight: 700;
}

.article-category-toggle small {
  color: var(--muted);
  font-size: 10px;
}

.article-category-manager:has(.article-category-body:not([hidden])) .article-category-toggle {
  border-bottom-color:var(--n-rahmen);
}

.article-category-body {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.article-category-body > p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
}

.article-category-form {
  display: flex;
  align-items: end;
  gap: 8px;
  flex-wrap: wrap;
}

.article-category-form > label:first-child {
  display: grid;
  flex: 1 1 230px;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
}

.article-category-form input[type="text"] {
  min-height: 34px;
  padding: 0 10px;
  border:1px solid var(--n-d7e1db);
  border-radius: 9px;
  background:var(--color-surface);
  color: var(--text);
  outline: none;
}

.article-category-form input[type="text"]:focus {
  border-color: var(--green-2);
  box-shadow: 0 0 0 3px rgba(11, 104, 73, .10);
}

.article-category-active {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  gap: 6px;
  color: var(--text);
  font-size: 11px;
}

.article-category-active input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--green-2);
}

.article-category-table-wrap .module-table {
  width: max(100%, 600px);
  min-width: 600px;
}

@media (max-width: 980px) {
  .article-manager-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .article-manager-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.inventory-table td strong,
.compact-table td small {
  display: block;
}

.compact-table td small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.status-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.8fr);
  gap: 10px;
  align-items: start;
}

.status-panel {
  display: grid;
  gap: 10px;
}

.status-list {
  display: grid;
  gap: 8px;
}

.status-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background:var(--color-surface);
}

.status-list strong,
.status-list span {
  display: block;
}

.status-list strong {
  font-size: 11px;
}

.status-list span {
  color: var(--muted);
  font-size: 10px;
}

.security-session-list article {
  grid-template-columns: minmax(0, 1fr) auto;
}

.security-session-list button {
  align-self: center;
}

.security-session-list button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  max-width: 340px;
  padding: 11px 13px;
  border-radius: 7px;
  color:var(--color-surface);
  background:var(--n-text-stark);
  box-shadow: var(--shadow);
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: transform 180ms ease, opacity 180ms ease;
}

.toast.is-visible {
  transform: translateY(0);
  opacity: 1;
}

@media (max-width: 1180px) {
  .sidebar-layout-control {
    display: none;
  }

  .dashboard-card-grid[data-columns],
  .device-content-grid[data-columns],
  .simple-layout-grid[data-columns],
  .analytics-grid[data-columns] {
    grid-template-columns: minmax(0, 1fr);
  }

  .campaign-layout[data-columns] .campaign-target-card {
    grid-column: auto;
    grid-row: auto;
  }

  .industry-profile-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .module-manager-grid {
    grid-template-columns: 1fr;
  }

  .tariff-world-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tariff-world-head,
  .tariff-world-toolbar,
  .audit-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .tariff-world-actions {
    flex-wrap: wrap;
  }

  .app-shell {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .brand div:last-child,
  .nav-item span,
  .collapse-menu span {
    display: none;
  }

  .brand,
  .nav-item,
  .collapse-menu {
    justify-content: center;
  }

  .profile-panel,
  .content-grid,
  .pipeline-revenue-panel,
  .dashboard-main-grid,
  .dashboard-bottom-grid,
  .dashboard-card-grid,
  .user-admin-grid,
  .device-content-grid {
    grid-template-columns: 1fr;
  }

  .content-grid[data-columns="2"] {
    grid-template-columns: 1fr;
  }

  .content-grid > .customer-board-column > [data-customer-grid-section] {
    min-height: 0;
  }

  .role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pipeline-board,
  .offer-pipeline {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }

  .dashboard-kpis,
  .module-kpis,
  .customer-kpis,
  .offer-kpis {
    grid-template-columns: repeat(2, 1fr);
  }

  .customer-search-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .repair-board {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 760px) {
  .industry-profile-grid {
    grid-template-columns: 1fr 1fr;
  }

  .module-manager-intro {
    align-items: flex-start;
    flex-direction: column;
  }

  .industry-editor-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .quick-create-button {
    width: 32px;
    padding: 0;
    font-size: 0;
  }

  .customer-quality-panel {
    align-items: flex-start;
    flex-direction: column;
  }

  .tariff-world-summary,
  .tariff-form-grid {
    grid-template-columns: 1fr;
  }

  .tariff-field-wide,
  .tariff-active-toggle,
  .tariff-sales-case-field {
    grid-column: auto;
  }

  .tariff-world-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .tariff-world-actions .primary-button {
    grid-column: 1 / -1;
  }

  .tariff-world-toolbar > label:not(.tariff-world-search) {
    min-width: 0;
  }

  .audit-toolbar > label:not(.tariff-world-search) {
    min-width: 0;
  }

  .user-form-grid,
  .branch-add-row,
  .role-grid {
    grid-template-columns: 1fr;
  }

  .tariff-create-modal {
    padding: 0;
  }

  .contract-create-modal {
    padding: 0;
  }

  .contact-create-modal {
    padding: 0;
  }

  .document-upload-modal {
    padding: 0;
  }

  .document-upload-dialog {
    width: 100%;
    min-height: 100vh;
    max-height: 100vh;
    border: 0;
    border-radius: 0;
  }

  .document-upload-grid {
    grid-template-columns: 1fr;
  }

  .document-file-field {
    grid-column: auto;
  }

  .contact-create-dialog {
    width: 100%;
    min-height: 100vh;
    max-height: 100vh;
    border: 0;
    border-radius: 0;
  }

  .contact-form-grid,
  .contact-follow-up-fields {
    grid-template-columns: 1fr;
  }

  .contact-field-wide {
    grid-column: auto;
  }

  .contract-create-dialog {
    width: 100%;
    min-height: 100vh;
    max-height: 100vh;
    border: 0;
    border-radius: 0;
  }

  .contract-form-grid,
  .contract-auto-summary {
    grid-template-columns: 1fr;
  }

  .contract-field-wide {
    grid-column: auto;
  }

  .contract-auto-summary article {
    padding: 0 0 7px;
    border-right: 0;
    border-bottom:1px solid var(--n-d7e8df);
  }

  .contract-auto-summary article:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .tariff-create-dialog {
    width: 100%;
    min-height: 100vh;
    max-height: 100vh;
    border: 0;
    border-radius: 0;
  }

  .app-shell {
    display: block;
    max-width: 100%;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 10;
    align-self: auto;
    width: auto;
    height: auto;
    min-height: auto;
    flex-direction: row;
    gap: 12px;
    padding: 10px 12px;
    overflow-x: auto;
  }

  .brand {
    margin-bottom: 0;
  }

  .brand div:last-child {
    display: block;
  }

  .nav-list {
    display: flex;
    overflow-y: visible;
  }

  .sidebar-footer {
    display: none;
  }

  .customer-trash-item {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .customer-trash-item button {
    width: 100%;
    justify-content: center;
  }

  .workspace {
    padding: 12px;
  }

  .topbar,
  .page-head,
  .directory-head,
  .offers-head {
    align-items: stretch;
    flex-direction: column;
  }

  .search {
    width: 100%;
    max-width: none;
  }

  .topbar-actions,
  .head-actions {
    flex-wrap: wrap;
  }

  .activity-panel-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .profile-panel,
  .profile-main,
  .mini-grid,
  .quick-actions,
  .document-grid,
  .bottom-tabs,
  .pipeline-board,
  .offer-pipeline,
  .pipeline-kpis,
  .dashboard-kpis,
  .module-kpis,
  .module-filterbar,
  .repair-board,
  .customer-kpis,
  .customer-search-tools,
  .offer-kpis,
  .tariff-comparison-grid,
  .invoice-detail-grid,
  .repair-archive-list {
    grid-template-columns: 1fr;
  }

  /* Einspaltig braucht das Datengitter keinen Einzug und keinen senkrechten
     Trennstrich mehr - beides liess die Werte gegeneinander verspringen. */
  .mini-grid span {
    padding: 0;
    border-left: 0;
  }

  .sales-builder,
  .sales-extras-panel,
  .sales-extras-fields {
    grid-template-columns: 1fr;
  }

  .sales-margin-box { text-align: left; }

  .invoice-detail-head,
  .invoice-detail-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .commission-import-summary,
  .commission-import-rows article {
    grid-template-columns: 1fr;
  }

  .module-head,
  .pipeline-head {
    align-items: stretch;
    flex-direction: column;
  }

  .vvl-window-setting {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .vvl-window-setting > div:first-child {
    flex-basis: 100%;
  }

  .vvl-window-setting > label {
    flex: 1 1 120px;
  }

  .sales-deadline-setting > label,
  .sales-deadline-setting > .compact-button {
    flex: 1 1 100%;
    width: 100%;
  }

  .sales-deadline-setting {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
  }

  .module-tools,
  .pipeline-tools,
  .offers-head-actions {
    flex-wrap: wrap;
  }

  .pipeline-scale-card {
    grid-template-columns: 1fr;
  }

  .offer-toolbar,
  .comparison-controls,
  .offer-modal-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .offer-search {
    width: 100%;
  }

  .offer-modal {
    padding: 8px;
  }

  .customer-create-modal {
    padding: 0;
  }

  .customer-create-dialog {
    width: 100%;
    min-height: 100vh;
    max-height: 100vh;
    border: 0;
    border-radius: 0;
  }

  .customer-form-grid,
  .customer-doc-layout,
  .customer-upload-block {
    grid-template-columns: 1fr;
  }

  .customer-form-grid .field-wide,
  .customer-form-grid .field-double,
  .customer-file-list {
    grid-column: auto;
  }

  .residence-fields {
    grid-column: auto;
  }

  .residence-toggle {
    grid-column: auto;
  }

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

  .customer-form-section-head {
    align-items: flex-start;
  }

  .customer-form-section-head small {
    max-width: 46%;
  }

  .holiday-profile {
    padding-top: 12px;
    padding-left: 0;
    border-top: 1px solid var(--line-soft);
    border-left: 0;
  }

  .customer-create-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .customer-create-footer > span {
    display: none;
  }

  .offer-modal-dialog {
    max-height: calc(var(--db-viewport-height, 100dvh) - 16px);
  }

  .offer-save-actions {
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
  }

  .offer-saved-status {
    margin-right: auto;
  }

  .offer-saved-validity {
    flex: 1 1 100%;
    max-width: none;
  }

  .offer-send-channel {
    flex: 1 1 100%;
  }

  .offer-send-channel select {
    width: 100%;
  }

  .quick-actions .primary-button,
  .quick-actions .secondary-button {
    grid-column: auto !important;
  }

  .contract-card {
    grid-template-columns: 36px 1fr;
  }

  .renewal {
    grid-column: 1 / -1;
    text-align: left;
  }
}

/* Mitarbeiterverwaltung: dieselben Karten, Felder und Tabellenregeln wie die
   uebrigen Arbeitsmasken; keine lokalen Stilinseln in app.js. */
.team-admin h3,
.team-admin h4 {
  margin: 0;
  color: var(--text);
}

.team-card h3 { margin: 2px 0 14px; }
.team-card {
  margin-bottom: 16px;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  background:var(--color-surface);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.team-grid input,
.team-grid select,
.team-review-grid input,
.team-review-grid select,
.team-review-grid textarea,
.team-edit-form input,
.team-edit-form select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background:var(--color-surface);
  color: var(--text);
  font: inherit;
}

.team-grid .primary-button {
  width: 100%;
  border-color: var(--color-primary-border);
  background:var(--color-surface);
  color: var(--color-primary);
  transition: background 0.12s ease, border-color 0.12s ease;
}
/* Einladen ohne massiven dunkelgruenen Block (Inhaber-Feedback 24.08.):
   Outline-Stil in Markenfarbe; disabled bleibt mint gefuellt und damit
   klar unterscheidbar. */
.team-grid .primary-button:hover:not(:disabled) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}
.team-hourly,
.team-edit-hourly {
  display: flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}
.team-hourly input,
.team-edit-hourly input { width: auto; min-height: auto; padding: 0; }

.team-msg { min-height: 18px; margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.team-msg.err { color:var(--sig-rot-b42318); }
.team-msg.ok { color:var(--sig-gruen-166534); }

.team-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.team-stat {
  min-width: 150px;
  padding: 12px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  background:var(--color-surface);
}
.team-stat b { display: block; color: var(--green); font-size: 22px; }
.team-stat span { color: var(--muted); font-size: 12px; }

.team-roster-card { padding: 0; overflow-x: auto; }
.team-table { width: 100%; min-width: 880px; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.team-table th,
.team-table td { padding: 12px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: middle; }
.team-table th { background:var(--color-surface); color: var(--muted); font-weight: 600; }
.team-table thead th:first-child { border-top-left-radius: calc(var(--radius-field) - 1px); }
.team-table thead th:last-child { border-top-right-radius: calc(var(--radius-field) - 1px); }
.team-table tbody tr:last-child td { border-bottom: 0; }
.team-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px; border:1px solid var(--n-c9d9cf); border-radius: 999px; background:var(--n-flaeche-leicht); color: var(--green); font-size: 11px; }
.team-actions { display: flex; flex-wrap: nowrap; gap: 6px; }
/* Gleiche Mindestbreite fuer alle Zeilen-Aktionen: 'Sperren' und 'Entsperren'
   sind unterschiedlich lang - ohne feste Breite springen die Spalten. */
.team-actions .table-action { min-width: 96px; text-align: center; justify-content: center; }
/* Inhaber-Zeile: Platzhalter mittig ueber der Breite der Vierergruppe (4x96 + 3x6). */
.team-actions-leer { min-width: 402px; display: flex; justify-content: center; color: var(--muted); }
/* Aktionsspalte auf Inhaltsbreite ziehen: die Buttons enden damit exakt auf der
   12px-Rasterlinie der Tabelle - gleiche Linie wie der Archiv-Umschalter oben. */
.team-table th:last-child,
.team-table td:last-child { width: 1%; }
/* Mitarbeiter-Archiv (24.08.2026): Kopfzeile mit Titel links, Umschalter rechts.
   Ein durchgehender Kopfblock mit dem Tabellenkopf (gleicher zarter Gruenton,
   volle Kartenbreite, oben gerundet) - kein Weiss-Gruen-Wechsel mehr.
   Padding 12px = Zellen-Raster: Titel fluchtet mit 'Name', Umschalter
   fluchtet rechts mit der Archivieren-Spalte. */
.team-archiv-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px;
  border-radius: calc(var(--radius-field) - 1px) calc(var(--radius-field) - 1px) 0 0;
  /* 24.08., 4. Runde:Inhaber will den Kopfbereich komplett weiss. */
  background: var(--color-surface);
}
.team-archiv-bar h4 { margin: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
/* Folgt die Tabelle direkt auf den Kopfblock, rundet nicht noch einmal der
   Tabellenkopf (sonst weisse Zwickel in den Ecken). */
.team-archiv-bar + .team-table thead th:first-child { border-top-left-radius: 0; }
.team-archiv-bar + .team-table thead th:last-child { border-top-right-radius: 0; }
/* Leerzustand (Archiv ohne Eintraege) haengt in der randlosen Karte sonst an
   der Kante. */
.team-archiv-bar + .team-msg { margin: 12px; }

.team-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.team-section-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.team-section-heading .secondary-button { flex: 0 0 auto; }
#teamReviewContent[hidden] { display: none; }
.team-review-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.team-review-grid label,
.team-edit-form label { display: grid; min-width: 0; gap: 5px; color: var(--muted); font-size: 12px; }
.team-review-employee { grid-column: span 2; }
.team-review-wide { grid-column: 1 / -1; }
.team-review-grid textarea { min-height: 88px; resize: vertical; }
.team-history-heading { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.team-history-heading h4 { font-size: 14px; }
.team-review-history { display: grid; gap: 10px; margin-top: 10px; }
.team-review-item { padding: 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-field); background:var(--n-flaeche); }
.team-review-item h4 { margin-bottom: 8px; font-size: 14px; }
.team-review-item p { margin: 8px 0 0; color: var(--muted); font-size: 12px; white-space: pre-wrap; }
.team-review-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.team-review-actions .table-action-muted { border-color: var(--line); background:var(--n-flaeche-leicht); color: var(--muted); }
.team-review-actions .table-action-muted:hover,
.team-review-actions .table-action-muted:focus-visible { border-color:var(--n-aebbb4); background:var(--color-canvas); color:var(--n-304037); }
.team-roles ul { margin: 10px 0 0; padding-left: 18px; }
.team-roles li { margin: 6px 0; color: var(--muted); font-size: 12px; }

.team-edit-modal { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 20px; background: rgba(17, 27, 22, .48); }
.team-edit-dialog { width: min(620px, 100%); max-height: calc(var(--db-viewport-height, 100dvh) - 40px); overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-card); background:var(--color-surface); box-shadow: 0 24px 70px rgba(17, 27, 22, .24); }
.team-edit-dialog > header { display: flex; align-items: start; justify-content: space-between; gap: 16px; padding: 16px; border-bottom: 1px solid var(--line-soft); }
.team-edit-dialog header p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
/* Einspaltiger Dialoginhalt mit Luft zum Rahmen.
   Befund 01.09.2026: Der Seriennummer-Dialog stand ganz ohne Innenabstand da -
   der Hinweistext klebte an beiden Raendern und lief neben das Eingabefeld
   statt darunter. Ursache: Das Formular trug keine Layoutklasse, und .is-wide
   gibt es nur bereichsweise (Reparaturbeleg, Wareneingang), nicht global.
   Deshalb hier eine eigene, wiederverwendbare Klasse fuer schmale Dialoge. */
.dialog-form-einspaltig { display: grid; gap: 14px; padding: 18px; }
.dialog-form-einspaltig > label { display: grid; gap: 6px; min-width: 0; color: var(--muted); font-size: 12px; }
.dialog-form-einspaltig > label > small { color: var(--muted); font-size: 11px; line-height: 1.5; }
.dialog-form-einspaltig .settings-hint { margin: 0; line-height: 1.5; }
.dialog-form-einspaltig .team-edit-actions { margin-top: 4px; }

.team-edit-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px; }
/* Stundenbasis gehoert zum Wochensoll und steht deshalb direkt darunter - in
   der RECHTEN Spalte, mit eigener Zeile. Steckte sie mit im selben Feld, wuerde
   die rechte Spalte hoeher als die linke und alles darunter versetzt sich
   gegeneinander. Beide Spalten bleiben so auf einer Linie. */
.team-edit-form .team-edit-hourly {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 0;
  color: var(--text);
  cursor: pointer;
  line-height: 1.35;
}
.team-edit-form .team-edit-hourly input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--green); cursor: pointer; }
.team-edit-form .team-edit-hourly span { min-width: 0; }
.team-edit-form input:disabled { background:var(--color-border-subtle); color: var(--muted); cursor: not-allowed; }
.team-edit-actions { display: flex; grid-column: 1 / -1; justify-content: end; gap: 8px; margin-top: 4px; }
.team-edit-form .team-msg { grid-column: 1 / -1; margin: 0; }

/* Zugang wiederherstellen: eigener, ruhiger Block unter den Stammdaten -
   es sind Sofortaktionen, keine Felder, die auf "Speichern" warten. */
.team-edit-access { padding: 16px; border-top: 1px solid var(--line-soft); background:var(--color-app); }
.team-edit-access h4 { margin: 0 0 4px; font-size: 14px; color: var(--text); }
.team-edit-access-hint { margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.5; text-wrap: pretty; }
.team-edit-access-row { display: flex; align-items: end; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.team-edit-access-row > .secondary-button { flex: none; align-self: end; }
.team-edit-access-note { flex: 1 1 200px; min-width: 0; color: var(--muted); font-size: 12px; line-height: 1.45; align-self: center; }
.team-edit-access-note b { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.team-edit-access-field { display: grid; flex: 1 1 240px; min-width: 0; gap: 5px; }
.team-edit-access-label { color: var(--muted); font-size: 12px; }
/* Der Platzhalter stand groesser da als jede Beschriftung ringsum und zog den
   Blick auf sich, obwohl er nur ein Hinweis ist. */
.team-edit-access-field input { font-size: 12px; }
.team-edit-access-field input::placeholder { color:var(--n-8fa199); font-size: 12px; }
.team-edit-access .team-msg { margin: 6px 0 0; }

@media (max-width: 560px) {
  .team-edit-access-row { align-items: stretch; flex-direction: column; }
  .team-edit-access-row > .secondary-button { align-self: stretch; }
}

@media (max-width: 900px) {
  .team-grid,
  .team-review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .team-grid,
  .team-review-grid,
  .team-edit-form { grid-template-columns: 1fr; }
  .team-review-employee,
  .team-review-wide,
  .team-edit-actions,
  .team-edit-form .team-edit-hourly,
  .team-edit-form .team-msg { grid-column: auto; }
  .team-edit-form .team-edit-hourly { margin-top: 0; }
  .team-section-heading { align-items: stretch; flex-direction: column; }
  .team-section-heading .secondary-button { align-self: flex-start; }
}

@media print {
  body * {
    visibility: hidden !important;
  }

  #repairReceiptModal,
  #repairReceiptModal *,
  #receiptDetailModal,
  #receiptDetailModal * {
    visibility: visible !important;
  }

  #receiptDetailModal {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    padding: 0 !important;
    background:var(--color-surface) !important;
    z-index: 99999 !important;
  }

  #receiptDetailModal .distributor-dialog {
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  #receiptDetailModal header,
  #receiptDetailModal button {
    display: none !important;
  }

  .repair-receipt-dialog {
    width: 100%;
    max-height: none;
    overflow: visible;
    border: 0;
    box-shadow: none;
  }

  .repair-receipt-dialog > header,
  .repair-receipt-footer {
    display: none;
  }

  .repair-receipt-content {
    padding: 12mm;
  }
}

/* ============================================================
   DESIGN-POLITUR (additiv, 2026-07-10)
   Nur Feinschliff: Status-Pillen, Zeilen-Hover, Fokus-Ringe,
   Leerzustaende, weiche Uebergaenge. Keine Farb-/Layout-Bruche.
   Rueckrollbar: diesen Block loeschen (styles.css.bak-politur).
   ============================================================ */

/* Weiche Uebergaenge fuer interaktive Elemente (dezent) */
button, a, .nav-item, .data-table tbody tr,
.table-status, .doc-status, .select-pill, .customer-badge,
input, select, textarea {
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, box-shadow .15s ease, transform .12s ease;
}

/* Status-Pillen: klarer abgesetzt durch feinen Innen-Ring */
.table-status, .doc-status, .customer-badge {
  box-shadow: inset 0 0 0 1px rgba(17, 27, 22, 0.06);
  letter-spacing: 0.02em;
}
.table-status.won, .doc-status.ok, .customer-badge.won {
  box-shadow: inset 0 0 0 1px var(--mint-border);
}
.table-status.open, .doc-status.warning, .customer-badge.open {
  box-shadow: inset 0 0 0 1px rgba(183, 121, 31, 0.22);
}
.doc-status.missing {
  box-shadow: inset 0 0 0 1px rgba(194, 65, 85, 0.22);
}

/* Tabellen-Zeilen: dezenter Hover fuer bessere Orientierung */
.data-table tbody tr:hover {
  background:var(--n-flaeche-leicht);
}

/* Sichtbarer, ruhiger Fokus-Ring (Barrierefreiheit) */
button:focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.nav-item:focus-visible {
  outline: none;
  box-shadow:0 0 0 2px var(--color-surface), 0 0 0 4px rgba(11, 104, 73, 0.35);
  border-radius: 6px;
}

/* Leerzustaende: einheitlich ruhig zentriert, Icon gedaempft */
.timeline-empty, .document-ledger-empty, .pipeline-empty,
.daily-empty, .customer-empty, .offer-column-empty, .offer-detail-empty {
  color: var(--muted);
}
.timeline-empty svg, .document-ledger-empty svg, .pipeline-empty svg,
.daily-empty svg, .customer-empty svg,
.offer-column-empty svg, .offer-detail-empty svg {
  opacity: 0.55;
}

/* Primaer-Buttons: minimaler Lift beim Hover (nur Schatten) */
.primary-button:hover:not(:disabled) {
  box-shadow: 0 6px 16px rgba(6, 75, 53, 0.18);
}

/* ============================================================
   ANGEBOTS-PROTOKOLL & STATUS-SYMBOLE (2026-07-10)
   ============================================================ */

/* Status-Symbol seitlich auf der Angebotskarte */
.offer-card-title {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
}
.offer-card-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 6px;
  color: var(--muted);
  background:var(--color-canvas);
}
.offer-card-status svg { width: 12px; height: 12px; }
.offer-card { border-left: 3px solid var(--line); }
.offer-card.offer-status-draft    { border-left-color:var(--n-9aa6a0); }
.offer-card.offer-status-sent     { border-left-color: var(--amber); }
.offer-card.offer-status-open     { border-left-color: var(--amber); }
.offer-card.offer-status-accepted { border-left-color: var(--green-2); }
.offer-card.offer-status-declined { border-left-color: var(--red); }
.offer-card.offer-status-unreachable { border-left-color: var(--muted); }
.offer-status-sent  .offer-card-status,
.offer-status-open  .offer-card-status { color: var(--amber); background: var(--amber-soft); }
.offer-status-accepted .offer-card-status { color: var(--green-2); background: var(--mint); }
.offer-status-declined .offer-card-status { color: var(--red); background:var(--color-danger-soft); }
.offer-status-unreachable .offer-card-status { color: var(--muted); background:var(--color-canvas); }

/* Kundenansicht eines BESTEHENDEN Angebots: der Kunde steht schon fest (Name
   in der Kopfzeile), gespeichert wird hier nichts. Das Auswahlfeld gehoert nur
   zum Anlegen eines neuen Angebots und wird deshalb ausgeblendet. */
.offer-modal.offer-preview #offerCustomerPickWrap {
  display: none;
}

/* Die Verkaufsmaske bleibt auf Laptop/Tablet dreispaltig. Erst ein echtes
   Smartphone stapelt die Bereiche; vorher verliert der Rechner rechts seinen
   Platz und die Arbeitsfläche wirkt wie ein leerer Korridor. */
@media (min-width: 721px) {
  .sales-builder {
    grid-template-columns: 250px minmax(0, 1fr) 250px;
    gap: 10px;
  }

  .sales-filter-panel,
  .sales-extras-panel { padding: 12px; }
  .sales-tariff-list { grid-template-columns: 1fr; }
}

/* Historie in der Kundenansicht (Vorschau-Modal) */
.offer-preview-history {
  margin: 4px 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background:var(--n-flaeche-leicht);
}
.offer-preview-history h3 {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.offer-preview-history-item {
  display: flex;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px solid var(--line-soft);
}
.offer-preview-history-item:first-of-type { border-top: none; }
.offer-preview-history-item svg { width: 14px; height: 14px; color: var(--green-2); }
.offer-preview-history-item strong { display: block; font-size: 12px; }
.offer-preview-history-item time { display: block; font-size: 11px; color: var(--muted); }
.offer-preview-history-item small { display: block; font-size: 11px; color: var(--muted); }
.offer-preview-history-empty { margin: 0; font-size: 12px; color: var(--muted); }

/* ============================================================
   ANGEBOT MIT MEHREREN OPTIONEN (2026-07-10)
   ============================================================ */
.offer-variant-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0;
}
.offer-variant-list-head {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.offer-variant {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:var(--color-surface);
}
.offer-variant.is-chosen {
  border-color: var(--mint-border);
  background: var(--mint);
}
.offer-variant.is-notchosen { opacity: 0.62; }
.offer-variant-main {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.offer-variant-main > div { min-width: 0; }
.offer-variant-main span { white-space: normal; }
.offer-variant-main strong { display: block; font-size: 12px; }
.offer-variant-main span { display: block; font-size: 11px; color: var(--muted); }
.offer-variant-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
.offer-variant-side .secondary-button { white-space: nowrap; }
.offer-variant-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
}
.offer-variant-tag svg { width: 12px; height: 12px; }
.offer-variant-tag.chosen { color: var(--green-2); background:var(--color-surface); box-shadow: inset 0 0 0 1px var(--mint-border); }
.offer-variant-tag.notchosen { color:var(--n-65716b); background:var(--n-flaeche-ruhig); }

/* Vertragsabschluss: Arbeitsfluss mit Luft statt gestapelter Statusstreifen. */
.contract-bundle-dialog { width: min(900px, 100%); }
.contract-bundle-form { gap: 20px; }
.contract-bundle-section { display: grid; gap: 12px; padding: 0 20px; }
.contract-bundle-section:first-child { padding-top: 20px; }
.contract-bundle-section-head { display: grid; gap: 5px; }
.contract-bundle-section-head > div { display: flex; align-items: center; gap: 8px; }
.contract-bundle-section-head h3 { margin: 0; font-size: 14px; }
.contract-bundle-section-head p { max-width: 680px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.contract-bundle-step { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--mint); color: var(--green-2); font-size: 11px; font-weight: 700; }
.contract-bundle-options { gap: 8px; margin: 0; }
.contract-bundle-dialog .offer-variant { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; }
.contract-bundle-dialog .offer-variant-main { gap: 10px; }
.contract-bundle-dialog .offer-variant-tag { flex: 0 0 auto; }
.contract-bundle-dialog .offer-variant-main .contract-bundle-tariff-progress { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 50%; background:var(--color-surface); color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; }
.contract-bundle-dialog .offer-variant-main .contract-bundle-tariff-progress.is-complete { border-color: var(--green-2); background: var(--mint); color: var(--green-2); }
.contract-bundle-dialog .offer-variant-main .contract-bundle-tariff-progress svg { width: 14px; height: 14px; }
.contract-bundle-tariff-tab { transition: border-color .16s ease, background-color .16s ease; }
.contract-bundle-tariff-tab.is-active { border-color: var(--green-2); background: var(--mint); }
.contract-bundle-tariff-tab-button { display: grid; gap: 2px; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.contract-bundle-tariff-tab-button strong { color: var(--text); }
.contract-bundle-tariff-tab-button span { color: var(--muted); font-size: 11px; }
.contract-bundle-tariff-tab-button .contract-bundle-tariff-number { color: var(--green-2); font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.contract-bundle-device-section { padding-bottom: 6px; }
.contract-bundle-device-actions { display: flex; align-items: center; }
.contract-bundle-device-actions .secondary-button { min-height: 34px; }
.contract-bundle-dialog .contract-form-grid { grid-template-columns: minmax(0, 320px); gap: 0; padding: 0; }
.contract-bundle-dialog .customer-create-footer { margin-top: 0; }
.contract-bundle-identifier-section { padding-bottom: 20px; }
.contract-bundle-contract-row { display: grid; grid-template-columns: minmax(150px, 0.7fr) minmax(0, 2fr); gap: 16px; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background:var(--color-surface); }
.contract-bundle-contract-row > div:first-child { display: grid; gap: 3px; padding-top: 3px; }
.contract-bundle-contract-row > div:first-child strong { font-size: 12px; }
.contract-bundle-contract-row > div:first-child span, .contract-bundle-empty { color: var(--muted); font-size: 11px; }
.contract-bundle-contract-row .contract-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.contract-bundle-empty { margin: 0; padding: 12px 0; }

/* Rufnummernmitnahme aus dem Angebot: Sie steht im Abschluss ueber den
   Vertragsdaten, weil sie eine Aufgabe beim Netzbetreiber ausloest und nicht
   nur eine weitere Angabe ist. Wird sie uebersehen, behaelt der Kunde eine
   neue Rufnummer. */
.contract-bundle-porting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--n-rahmen-kraeftig);
  border-left-width: 3px;
  border-radius: 8px;
  background: var(--sig-blau-f8fafc);
}
.contract-bundle-porting-text { display: grid; gap: 2px; min-width: 220px; flex: 1; }
.contract-bundle-porting-text strong { font-size: 12px; }
.contract-bundle-porting-text small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.contract-bundle-contract-title { grid-column: 1 / -1; display: grid; gap: 3px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.contract-bundle-contract-title strong { font-size: 12px; }
.contract-bundle-contract-title span { color: var(--muted); font-size: 11px; }
.contract-bundle-contract-row { grid-template-columns: 1fr; }
.contract-bundle-contract-row .contract-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 640px) {
  .contract-bundle-section { padding-right: 14px; padding-left: 14px; }
  .contract-bundle-section:first-child { padding-top: 14px; }
  .contract-bundle-dialog .offer-variant { align-items: flex-start; }
  .contract-bundle-dialog .contract-form-grid { grid-template-columns: 1fr; }
  .contract-bundle-contract-row { grid-template-columns: 1fr; gap: 10px; }
  .contract-bundle-contract-row .contract-form-grid { grid-template-columns: 1fr; }
}

/* ===== Design 2.0 – Schritt 1: Tabellen-Typo, Status-Badges, Hover ===== */
.data-table {
  font-size: 12px;
}
.data-table th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.data-table th,
.data-table td {
  padding: 9px 8px;
}
.data-table tbody tr:hover td {
  background:var(--n-flaeche-leicht);
}
.status-chip,
.table-status {
  gap: 6px;
  padding: 2px 10px;
  font-size: 10px;
  border: 1px solid color-mix(in srgb, currentColor 26%, transparent);
}
.status-chip::before,
.table-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* ===== Design 2.0 – Schritt 2: Titel, Zahlen, Buttons ===== */
.dash-panel-head h2,
.panel h2,
.panel h3 {
  font-weight: 600;
  letter-spacing: -0.01em;
}
table {
  font-variant-numeric: tabular-nums;
}
.secondary-button,
.icon-button,
.user-chip,
.full-button,
.primary-button {
  min-height: 32px;
  border-radius: 7px;
  font-size: 11px;
}
.secondary-button,
.icon-button,
.full-button {
  transition: background 0.12s ease, border-color 0.12s ease;
}
.secondary-button:hover:not(:disabled),
.icon-button:hover:not(:disabled),
.full-button:hover:not(:disabled) {
  background:var(--n-flaeche-leicht);
  border-color:var(--n-c9d6cf);
}
.primary-button {
  font-weight: 600;
}

/* ===== Design 2.0 – Schritt 3: Tabellenkopf, Zebra, Fokus ===== */
.data-table thead {
  background:var(--n-flaeche-ruhig);
}
.data-table th {
  border-bottom: 1px solid var(--line);
}
.data-table tbody tr:nth-child(even) td {
  background:var(--n-flaeche);
}
.data-table tbody tr:hover td {
  background:var(--n-flaeche-ruhig);
}
.table-status-stack {
  display: inline-grid;
  gap: 4px;
  justify-items: start;
}
/* Vertragskarte Kundenakte: 2x2-Ordnung (links Rufnummer/Vertragsnr.,
   rechts Beginn/Laufzeitende) + Buttons sauber ausgerichtet. */
.contract-meta-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  gap: 10px 28px;
}
.renewal .renewal-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
}
.renewal .renewal-button svg {
  width: 14px;
  height: 14px;
  flex: none;
}
/* Vertragskarte als 6 synchrone Spalten: Logo | Tarif | Rufnr./Vertragsnr. |
   Beginn/Ende | Status (linksbündig) | Buttons. */
.contract-card-v2 {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr) auto;
  gap: 10px 16px;
  align-items: center;
  min-width: 0;
}

/* Vierte Spalte fuer die Vertragsnummer: Ohne sie liessen sich zwei gleiche
   Vertraege desselben Kunden in der Kundenakte nicht unterscheiden. */
.contract-card-compact {
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 12px;
  padding: 10px 12px;
}

.contract-compact-field { display: grid; gap: 3px; min-width: 0; }
.contract-compact-field span { color: var(--muted); font-size: 10px; }
.contract-compact-field strong { overflow: hidden; color: var(--text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.contract-compact-id { font-variant-numeric: tabular-nums; }
.contract-compact-actions { display: flex; align-self: center; gap: 4px; }
.contract-compact-actions .icon-button { width: 30px; min-height: 30px; }
.contract-compact-actions .icon-button svg { width: 15px; height: 15px; }
.contract-offer-preview { width: 30px; min-height: 30px; align-self: center; }
.contract-offer-preview svg { width: 15px; height: 15px; }
.contract-offer-dialog { width: min(560px, 100%); }
.contract-offer-preview-body { display: grid; gap: 16px; padding: 16px; }
.contract-offer-preview-tariff { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line-soft); border-radius: 7px; background: var(--surface-2); }
.contract-offer-preview-tariff strong { font-size: 14px; }
.contract-offer-preview-tariff span,
.contract-offer-preview-note { color: var(--muted); font-size: 11px; }
.contract-card-v2 > * { min-width: 0; }
.contract-card-v2 .contract-meta-col strong { overflow-wrap: anywhere; }
.contract-card-v2 .contract-title h3 { margin: 0 0 2px; }
.contract-card-v2 .contract-title p { margin: 0; }
.contract-meta-col {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px;
  margin-top: 0 !important;
  align-content: center;
  justify-items: start;
}
.renewal-status-flat {
  display: grid;
  gap: 2px;
  justify-items: start;
  text-align: left;
}
.renewal-status-flat > span { color: var(--muted); font-size: 11px; }
.contract-offer-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 2px 9px;
  border: 1px solid var(--mint-border);
  border-radius: 999px;
  background: var(--mint);
  color: var(--green);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.contract-offer-link:hover {
  background:var(--sig-gruen-d9efe4);
  border-color: var(--green-2);
}
.contract-offer-link svg { width: 11px; height: 11px; flex: none; }
/* Rechnungshistorie: 4 Spalten, Schnitte synchron zur Angebotshistorie
   (19 % | 42 % = 25+17 | 17 % | 22 %). */
#customerInvoicesSection .data-table th:nth-child(1),
#customerInvoicesSection .data-table td:nth-child(1) { width: 19%; }
#customerInvoicesSection .data-table th:nth-child(2),
#customerInvoicesSection .data-table td:nth-child(2) { width: 42%; }
#customerInvoicesSection .data-table th:nth-child(3),
#customerInvoicesSection .data-table td:nth-child(3) { width: 17%; }
#customerInvoicesSection .data-table th:nth-child(4),
#customerInvoicesSection .data-table td:nth-child(4) { width: 22%; }
/* Bereiche in der Kundenakte hoch-/runterschieben */
.sec-move { display: inline-flex; gap: 4px; margin-left: 6px; }
.sec-move .icon-button { min-height: 22px; width: 22px; padding: 0; }
.sec-move svg { width: 12px; height: 12px; }
/* Etikett an der Vertragskarte: zugebuchte Hardware bleibt sichtbar. */
.contract-hw-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 2px 9px;
  border: 1px solid var(--mint-border);
  border-radius: 999px;
  background: var(--mint);
  color: var(--green);
  font-size: 10px;
  font-weight: 600;
  max-width: 100%;
}
.contract-hw-tag svg { width: 12px; height: 12px; flex: none; }
.campaign-send-history {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  display: grid;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
}
.campaign-send-history strong { color: var(--text); font-size: 11px; }
.campaign-send-btn {
  min-height: 26px !important;
  padding: 0 10px !important;
  font-size: 10px !important;
  white-space: nowrap;
}
.addon-type-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.addon-type-switch .secondary-button.is-active {
  border-color: var(--green);
  background: var(--mint);
  color: var(--green);
  font-weight: 600;
}
/* Marge-Karte: Verdienst pro Abschluss, verschmilzt mit der Vertragskarte. */
.contract-card-v2:has(+ .waage-card) {
  border-radius: 7px 7px 0 0;
  border-bottom: 0;
}
.waage-card {
  margin-top: -8px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-top: 1px dashed var(--line);
  border-radius: 0 0 7px 7px;
  background:var(--n-flaeche);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 20px;
  align-items: center;
}
.waage-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
}
.waage-head svg { width: 15px; height: 15px; color: var(--green-2); }
.waage-head span { color: var(--muted); font-size: 11px; }
.waage-rows { display: grid; gap: 5px; }
.waage-rows span {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 11px;
  color: var(--muted);
}
.waage-rows b { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
.waage-rows b.neg { color: var(--red); }
.waage-rows b.pos { color: var(--green-2); }
.waage-total {
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 6px 12px;
  border-radius: 7px;
}
.waage-total.ok { color: var(--green); background: var(--mint); }
.waage-total.danger { color: var(--red); background:var(--sig-rot-fdecef); }
.renewal-status-flat > strong { font-size: 14px; }
.renewal-actions {
  display: grid;
  gap: 6px;
  min-width: 118px;
}
.renewal-actions .renewal-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
}
.renewal-actions .renewal-button svg { width: 14px; height: 14px; flex: none; }
@media (max-width: 900px) {
  .contract-card-v2 { grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1fr); }
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--green-2);
  box-shadow: 0 0 0 3px rgba(11, 104, 73, 0.13);
}

/* ============================================================
   KUNDE-BEARBEITEN: schöne Einwilligungs-Kästchen (2026-07-14)
   ============================================================ */
.customer-consent-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.customer-edit-check {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:var(--color-surface);
  cursor: pointer;
  font-size: 12px;
  line-height: 1.25;
  transition: border-color .15s ease, background .15s ease;
}
.customer-edit-check:hover { border-color: var(--mint-border); }
.customer-edit-check:has(input:checked) { border-color: var(--mint-border); background: var(--mint); }
.customer-edit-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  flex: 0 0 auto;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  background:var(--color-surface);
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.customer-edit-check input[type="checkbox"]:checked {
  background: var(--green-2);
  border-color: var(--green-2);
}
.customer-edit-check input[type="checkbox"]:checked::after {
  content: "";
  width: 6px;
  height: 10px;
  margin-top: -2px;
  border:solid var(--color-surface);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.customer-edit-check input[type="checkbox"]:focus-visible {
  box-shadow:0 0 0 2px var(--color-surface), 0 0 0 4px rgba(11, 104, 73, 0.35);
}
.customer-edit-check span { flex: 1; }
.customer-edit-check:has(input:checked) span { color: var(--green); font-weight: 600; }
@media (max-width: 560px) { .customer-consent-grid { grid-template-columns: 1fr; } }

/* ============================================================
   KALENDER: Termin anlegen (2026-07-14)
   ============================================================ */
.calendar-create-row { margin: 0 0 12px; padding: 12px; }
.calendar-create-heading { margin: 0 0 10px; font-size: 12px; font-weight: 700; color: var(--text); }
.calendar-log-check { display: flex; align-items: center; gap: 8px; }
.calendar-log-check input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--green); }
.calendar-log-check span { color: var(--text); font-size: 11px; }
.calendar-create-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.calendar-week-side { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.calendar-week-side .icon-button { width: 26px; height: 26px; }

/* Angebots-Protokoll einklappbar (2026-07-14) */
.offer-audit summary { cursor: pointer; list-style: none; }
.offer-audit summary::-webkit-details-marker { display: none; }
.offer-audit summary span { display: inline-flex; align-items: center; gap: 6px; }
.offer-audit summary svg { width: 14px; height: 14px; transition: transform .15s ease; }
.offer-audit[open] summary svg { transform: rotate(180deg); }
.offer-audit > article:first-of-type { margin-top: 8px; }

/* Reparatur: Filter-Leiste + Werkstattliste (2026-07-14) */
.repair-filter-bar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 12px;
  padding: 12px 14px;
}
.repair-filter-bar[hidden] { display: none; }
.compact-tool-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--text);
  min-height: 30px;
}
.compact-tool-check input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--green); }
.repair-filter-count { margin-left: auto; align-self: center; font-size: 10px; color: var(--muted); }

/* Werkstattliste im Beleg-Modal */
.repair-workshop-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.repair-workshop-table th,
.repair-workshop-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.repair-workshop-table th { color: var(--muted); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.repair-workshop-table tr.is-overdue td { background: rgba(200, 30, 30, 0.06); }
.repair-workshop-empty { padding: 16px; color: var(--muted); text-align: center; }

/* Werkstatt-Übergabe-Modal (Sendungsnummer + Zubehör-Hinweis) */
/* Kopf und Fuss dieser Dialoge haben 16px seitlich. Das Formular hatte 2px -
   dadurch klebten Hinweiskasten und Felder am Rand, waehrend die Ueberschrift
   eingerueckt stand. Gemeldet vom Inhaber am 25.08.2026; gilt fuer alle fuenf
   Dialoge mit dieser Klasse, nicht nur die Kasse. */
.repair-workshop-form { display: grid; gap: 12px; padding: 6px 16px 12px; min-width: 0; }
.repair-workshop-form > label { display: grid; gap: 4px; font-size: 11px; color: var(--muted); }
.repair-workshop-form > label input[type="text"] {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background:var(--color-surface);
  color: var(--text);
  font-size: 12px;
}
.repair-workshop-hint {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 2px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(214, 158, 26, 0.12);
  border: 1px solid rgba(214, 158, 26, 0.35);
  color: var(--text);
  font-size: 11px;
  line-height: 1.4;
}
.repair-workshop-hint svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; color:var(--color-warning); }
.repair-workshop-form .compact-tool-check { font-size: 11px; }
.repair-cancel-btn, .repair-cancel-btn svg { color:var(--sig-rot-b91c1c); }
.repair-cancel-btn:hover { border-color: rgba(185, 28, 28, 0.4); }
.repair-cancel-tag { display: inline-block; font-size: 10px; font-weight: 700; color:var(--sig-rot-b91c1c); background: rgba(185, 28, 28, 0.12); border: 1px solid rgba(185, 28, 28, 0.3); border-radius: 999px; padding: 1px 7px; }
.repair-archive-item.is-cancelled { border-left:3px solid var(--sig-rot-b91c1c); padding-left: 9px; }

/* =========================================================================
   Look 3.0 - weicheres, luftigeres Finish (reine Optik, Brevo-artig).
   Nur an bestehende Klassen angehaengt: groessere Radien, hellere Raender,
   sanftere Schatten, mehr Weissraum. Keine Layout-/Farbwechsel.
   Rueckbau: einfach diesen Block loeschen.
   ========================================================================= */
:root {
  --line: var(--color-border);
  --line-soft: var(--color-border-subtle);
  --shadow: 0 1px 2px rgba(18, 40, 30, 0.04), 0 10px 26px rgba(18, 40, 30, 0.05);
  --radius-card: 14px;
  --radius-control: 10px;
}
.workspace { padding: 18px 22px 26px; }
.topbar { margin-bottom: 18px; }
.brand { margin-bottom: 22px; }
.nav-list { gap: 5px; }
.nav-item, .collapse-menu { min-height: 38px; border-radius: 9px; padding: 0 11px; }
.profile-panel, .panel, .bottom-tabs, .card, .data-table { border-radius: var(--radius-card); }
.primary-button, .secondary-button, .user-chip, .btn-file, .row-action { border-radius: var(--radius-control); }
.primary-button, .secondary-button { min-height: 34px; }
.search { height: 36px; border-radius: var(--radius-control); }
input, select, textarea { border-radius: 9px; }
.status-chip, .customer-badge, .pill { border-radius: 999px; }
@media (max-width: 760px) {
  .workspace { padding: 12px; }
}

/* Anzeige-Einstellungen: Ausrichtung + Breite (per Einstellungen -> Anzeige gesetzt) */
.app-shell.db-align-left { margin-left: 0; margin-right: auto; }
.app-shell.db-width-narrow { width: min(100%, 1400px); }
.app-shell.db-width-wide { width: 100%; }
/* Einstellungs-Reiter: umbrechen statt ueber den Inhaltsbereich hinauszulaufen */
.settings-tabs { flex-wrap: wrap; row-gap: 0; }

@media (max-width: 760px) {
  .birthday-item { grid-template-columns: 36px minmax(0, 1fr); }
  .birthday-item > .secondary-button { grid-column: 2; justify-self: start; }
}

/* =========================================================================
   PROJEKTWEITER UI-AUDIT (2026-07-22)
   Gemeinsame Grundbausteine fuer alle Arbeitsmasken. Fachliche Layouts
   bleiben unveraendert; Schrift, Felder, Tabellen und Ueberlaeufe folgen
   hier einer einzigen, ruhigen Systematik.
   ========================================================================= */
:root {
  --ink: var(--color-text);
  --radius-surface: var(--radius-card);
  --radius-field: var(--radius-control);
  --table-head: var(--color-surface-subtle);
}

/* Nie mehr eine abweichende Schriftfarbe durch eine undefinierte Designfarbe. */
:where(.panel, .profile-panel, .bottom-tabs, .card) {
  color: var(--text);
  border-color: var(--line);
}

/* Eingaben bleiben als Eingaben erkennbar: gleiches Feld, gleicher Radius,
   gleicher Fokuszustand. Checkboxen und Radio-Buttons behalten ihre Form. */
:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-radius: var(--radius-field);
  border-color: var(--line);
  color: var(--text);
  background-color: var(--color-surface);
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea)::placeholder {
  color: var(--color-text-placeholder);
  opacity: 1;
}

/* Alle echten Tabellenflaechen schneiden Kopf, Inhalt und Fuss sauber ab.
   Die Scrollleiste bleibt bei schmalen Ansichten erreichbar. */
:where(.device-table-scroll, .analytics-table-scroll, .tariff-table-wrap, .contract-table-wrap,
  .dashboard-table-scroll, .customer-table-wrap, .commission-table-scroll) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-field);
  background:var(--color-surface);
  scrollbar-color:var(--n-cbd7d0) transparent;
  scrollbar-width: thin;
}

:where(.device-table-scroll, .analytics-table-scroll, .tariff-table-wrap, .contract-table-wrap,
  .dashboard-table-scroll, .customer-table-wrap, .commission-table-scroll)::-webkit-scrollbar {
  height: 8px;
}

:where(.device-table-scroll, .analytics-table-scroll, .tariff-table-wrap, .contract-table-wrap,
  .dashboard-table-scroll, .customer-table-wrap, .commission-table-scroll)::-webkit-scrollbar-thumb {
  border:2px solid var(--color-surface);
  border-radius: 999px;
  background:var(--n-cbd7d0);
}

:where(.module-table, .customer-table, .data-table, .dashboard-table) {
  border-collapse: separate;
  border-spacing: 0;
  color: var(--text);
}

:where(.module-table, .customer-table, .data-table, .dashboard-table) thead {
  background: var(--table-head);
}

:where(.module-table, .customer-table, .data-table, .dashboard-table) th {
  color: var(--muted);
}

/* Keine einzelnen, eckigen Zellen mehr: die Rundung gehoert dem Container. */
.customer-table th,
.customer-table td {
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
}

:where(.module-table, .customer-table, .data-table, .dashboard-table) thead th:first-child {
  border-top-left-radius: calc(var(--radius-field) - 1px);
}

:where(.module-table, .customer-table, .data-table, .dashboard-table) thead th:last-child {
  border-top-right-radius: calc(var(--radius-field) - 1px);
}

:where(.module-table, .customer-table, .data-table, .dashboard-table) tbody tr:last-child td:first-child {
  border-bottom-left-radius: calc(var(--radius-field) - 1px);
}

:where(.module-table, .customer-table, .data-table, .dashboard-table) tbody tr:last-child td:last-child {
  border-bottom-right-radius: calc(var(--radius-field) - 1px);
}

/* Tarife bleiben auf kleinen Breiten vollstaendig erreichbar; kein versteckter
   horizontaler Inhalt und keine scheinbare Schattenkante am Tabellenende. */
.tariff-world-panel .tariff-table-wrap {
  scrollbar-width: thin;
}

.tariff-world-panel .tariff-table-wrap::-webkit-scrollbar {
  height: 8px;
}

@media (max-width: 760px) {
  .analytics-grid[data-columns="2"] {
    grid-template-columns: minmax(0, 1fr);
  }

  :where(.panel, .profile-panel, .bottom-tabs) {
    border-radius: 12px;
  }

  :where(.device-table-scroll, .analytics-table-scroll, .tariff-table-wrap, .contract-table-wrap,
    .dashboard-table-scroll, .customer-table-wrap, .commission-table-scroll) {
    border-radius: 9px;
  }
}

/* =========================================================================
   KONTEXT-HILFE
   Erklaerungen erscheinen ohne sichtbaren i-Knopf beim Ueberfahren oder
   Tastaturfokus der jeweiligen Kennzahl beziehungsweise Maske.
   ========================================================================= */
.has-context-help {
  position: relative;
}

.has-context-help:focus-visible {
  outline: 2px solid rgba(11, 104, 73, 0.42);
  outline-offset: 3px;
}

.context-help-tooltip {
  position: fixed;
  z-index: 12000;
  width: min(320px, calc(100vw - 16px));
  padding: 12px;
  border:1px solid var(--n-cdd9d3);
  border-radius: 10px;
  background:var(--color-surface);
  box-shadow: 0 14px 32px rgba(18, 40, 30, 0.16);
  color: var(--text);
  pointer-events: none;
}

.context-help-tooltip[hidden] {
  display: none;
}

.context-help-tooltip strong {
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.3;
}

.context-help-tooltip.is-compact strong {
  margin-bottom: 0;
  font-weight: 600;
}

.context-help-tooltip p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-line;
}

/* Vertragszeile in der Kundenakte auf schmalen Fenstern: vier Felder nebeneinander
   werden sonst zu Buchstabensalat. Zwei Reihen, Knoepfe rechts daneben. */
@media (max-width: 720px) {
  .contract-card-compact { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
  .contract-compact-actions { align-self: start; }
}

/* Seitenblaettern unter den Vertraegen: Die Knoepfe trugen keine Klasse und
   fielen auf die allgemeine Button-Optik zurueck - der abgeschaltete wirkte wie
   ein grauer Kasten, der aktive wie ein anderes Bauteil. Jetzt beide gleich,
   der abgeschaltete blass statt dunkel. */
.timeline-pagination { justify-content: space-between; }
.pagination-count { color: var(--muted); font-size: 12px; }
.pagination-controls { display: flex; align-items: center; gap: 6px; }
.pagination-position {
  min-width: 34px;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.timeline-page-button svg { width: 14px; height: 14px; }
.timeline-page-button:disabled {
  border-color: var(--line-soft);
  background:var(--color-surface);
  color:var(--n-c3ccc7);
  cursor: default;
}
.timeline-page-button:disabled:hover {
  border-color: var(--line-soft);
  background:var(--color-surface);
  color:var(--n-c3ccc7);
}

/* ---------------------------------------------------------------------------
   Zeitkonto: Monatsblatt eines Mitarbeiters.

   Der Kern ist nicht Schmuck, sondern Ehrlichkeit: Jeder Kalendertag bekommt
   eine Zeile, auch der ohne Eintrag. Eine Liste nur mit erfassten Tagen sieht
   immer vollstaendig aus, egal wie viel fehlt. Wochenenden treten zurueck,
   fehlende Werktage bekommen einen feinen Randstrich - sichtbar, aber ohne
   Alarm. Alle Zeitspalten laufen auf gleicher Ziffernbreite, sonst tanzen die
   Zahlen beim Ueberfliegen.
   --------------------------------------------------------------------------- */
.time-user-filter select { min-width: 190px; }

.time-table td:nth-child(n+3) { font-variant-numeric: tabular-nums; }

.time-day-row.is-weekend td { color: var(--muted); background:var(--n-flaeche-leicht); }
.time-day-row.is-missing td:first-child { box-shadow:inset 2px 0 0 var(--sig-orange-e3b7a8); }
.time-saldo-minus { color: var(--red); }

.time-sum-row td {
  border-top: 2px solid var(--line);
  background:var(--n-flaeche-leicht);
  font-weight: 600;
}
.time-sum-row td:first-child { color: var(--muted); font-weight: 400; }

@media (max-width: 720px) {
  .time-user-filter { width: 100%; }
  .time-user-filter select { width: 100%; }
}

/* Nur fuer Screenreader - Beschriftung ohne sichtbaren Platzbedarf. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Kurzzeichen fuer Abwesenheit (U, K, FT) direkt neben dem Wochentag. Klein und
   ruhig - es erklaert eine Zeile, es soll sie nicht dominieren. */
.time-abs-tag {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 4px;
  background:var(--n-flaeche-ruhig);
  color: var(--green);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
}

/* ---------------------------------------------------------------------------
   Dokumente: Ansehen statt Herunterladen.

   Der Betrachter zeigt das Bild mit der eingebrannten Kennung des Nutzers. Der
   Hinweis oben sagt offen, was passiert - wer weiss, dass sein Name im Bild
   steht und der Aufruf protokolliert wird, geht anders damit um. Verstecken
   waere hier das Falsche.
   --------------------------------------------------------------------------- */
.document-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.document-download-button.is-danger { color: var(--red); }
.document-download-button.is-danger:hover { border-color: var(--red); background:var(--color-danger-soft); }

.document-viewer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(17, 27, 22, .62);
}
.document-viewer-inner {
  display: grid;
  width: min(900px, 100%);
  max-height: calc(var(--db-viewport-height, 100dvh) - 40px);
  border-radius: var(--radius-card);
  background:var(--color-surface);
  overflow: hidden;
}
.document-viewer-inner > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.document-viewer-inner > header p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.document-viewer-body { padding: 16px; overflow: auto; background:var(--n-flaeche-leicht); }
.document-viewer-body img { display: block; width: 100%; height: auto; border-radius: 8px; }

/* ---------------------------------------------------------------------------
   Kundenakte: Bereiche fuellen beide Spalten selbst auf.

   Vorher standen vier Karten links und rechts blieb die halbe Seite leer, weil
   jede Karte fest zu einer Spalte gehoerte. Jetzt rutscht jede Karte in die
   Spalte, die gerade kuerzer ist. Wer selbst umsortiert, schaltet das mit
   diesem Knopf ab - eine Handanordnung darf nicht wieder verrutschen.
   --------------------------------------------------------------------------- */
.customer-autoflow-button {
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 5px 12px;
  background:var(--color-surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.customer-autoflow-button:hover { border-color: var(--green-2); color: var(--text); }
.customer-autoflow-button.is-active {
  border-color: var(--green);
  background: var(--green);
  color:var(--color-surface);
}

/* ---------------------------------------------------------------------------
   POS Checkout & TSE Receipt Modal (Centering, Sizing & Zero-Scrollbar)
   --------------------------------------------------------------------------- */
#posCheckoutModal,
#receiptDetailModal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(3px) !important;
  box-sizing: border-box !important;
}

#posCheckoutModal[hidden],
#posCheckoutModal:not(.is-visible),
#receiptDetailModal[hidden],
#receiptDetailModal:not(.is-visible) {
  display: none !important;
}

#posCheckoutModal .distributor-dialog {
  width: min(660px, 94vw) !important;
  max-width: 660px !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  margin: auto !important;
  box-sizing: border-box !important;
}

#receiptDetailModal .distributor-dialog {
  width: min(480px, 94vw) !important;
  max-width: 480px !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  margin: auto !important;
  box-sizing: border-box !important;
}

.pos-item-row {
  display: grid !important;
  grid-template-columns: minmax(130px, 2.5fr) minmax(55px, 0.8fr) minmax(75px, 1fr) minmax(85px, 1.1fr) !important;
  gap: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.pos-item-row input,
.pos-item-row select {
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* === Zustandsfotos an der Reparatur (05.08.2026) ===
   Ruhig und tabellarisch wie der Rest: kleine Vorschaubilder in festen
   Kacheln, kein Bildergalerie-Gefuehl. Es geht um Nachweis, nicht um Optik. */
.repair-photo-dialog { max-width: 720px; }

.repair-photo-body {
  display: grid;
  gap: 18px;
  padding: 4px 0 12px;
}

.repair-photo-group { border:1px solid var(--n-rahmen); border-radius: 10px; padding: 12px 14px; }

.repair-photo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.repair-photo-head h3 {
  margin: 0;
  font-size: 14px;
  color:var(--color-primary);
}

.repair-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.repair-photo-item {
  margin: 0;
  border:1px solid var(--n-rahmen);
  border-radius: 8px;
  overflow: hidden;
  background:var(--sig-blau-f8fafc);
}

.repair-photo-item img {
  display: block;
  width: 100%;
  height: 110px;
  object-fit: cover;
  background:var(--n-flaeche-kraeftig);
}

.repair-photo-item figcaption {
  display: block;
  padding: 6px 8px;
  font-size: 11px;
  color:var(--n-text);
  line-height: 1.35;
}

.repair-photo-item figcaption small {
  display: block;
  color:var(--n-text-sehr-leise);
}

.repair-photo-empty {
  grid-column: 1 / -1;
  padding: 14px;
  font-size: 12px;
  font-style: italic;
  color:var(--n-text-leise);
  text-align: center;
  border:1px dashed var(--n-rahmen-kraeftig);
  border-radius: 8px;
}

/* Ist der Zustand dokumentiert, soll man es auf der Karte sehen, ohne zu
   klicken. Fehlt der Nachweis, bleibt der Knopf unauffaellig - dann ist er
   eine Aufforderung, keine Bestaetigung. */
.repair-photo-btn.has-photos { border-color:var(--color-primary); color:var(--color-primary); }
.repair-photo-btn.has-photos b {
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 999px;
  background:var(--color-primary-soft);
  font-size: 11px;
}

@media (max-width: 640px) {
  .repair-photo-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .repair-photo-item img { height: 88px; }
}

/* QR-Weg: am Handy fotografieren statt am Rechner eine Datei suchen. */
.repair-photo-qr {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  margin-bottom: 4px;
  border:1px solid var(--color-primary);
  border-radius: 12px;
  background:var(--sig-gruen-f6fbf9);
}

.repair-photo-qr-code {
  flex: 0 0 auto;
  width: 200px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:var(--color-surface);
  border:1px solid var(--n-rahmen);
  border-radius: 10px;
  font-size: 12px;
  color:var(--n-text-leise);
}

.repair-photo-qr-code img { display: block; width: 200px; height: 200px; }

.repair-photo-qr-text { flex: 1 1 auto; min-width: 0; }
.repair-photo-qr-text strong { display: block; font-size: 14px; color:var(--color-primary); margin-bottom: 6px; }
.repair-photo-qr-text p { margin: 0 0 8px; font-size: 12px; color:var(--n-text); line-height: 1.45; }
.repair-photo-qr-rest b { color:var(--color-primary); }
.repair-photo-qr-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

@media (max-width: 640px) {
  /* Am Handy waere ein QR-Code zum Scannen mit demselben Handy sinnlos -
     dort steht der Datei-/Kameraweg im Vordergrund. */
  .repair-photo-qr { flex-direction: column; align-items: stretch; }
  .repair-photo-qr-code, .repair-photo-qr-code img { width: 100%; height: auto; }
}

/* Großansicht eines Zustandsfotos. Ein Kratzer ist im Vorschaubild nicht zu
   erkennen - im Streitfall geht es aber genau darum. */
.repair-photo-item .repair-photo-open {
  display: block; width: 100%; padding: 0; border: 0;
  background: none; cursor: zoom-in;
}
.repair-photo-item .repair-photo-open:focus-visible { outline:2px solid var(--color-primary); outline-offset: 2px; }

.repair-photo-lightbox {
  display: none;
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(15, 23, 42, .88);
  padding: 32px 20px;
  align-items: center; justify-content: center;
}
.repair-photo-lightbox.is-visible { display: flex; }

.repair-photo-lightbox-inner { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.repair-photo-lightbox-inner img {
  display: block; margin: 0 auto;
  max-width: 100%; max-height: calc(var(--db-viewport-height, 100dvh) - 110px);
  border-radius: 10px; background:var(--sig-blau-0f172a);
}
.repair-photo-lightbox-inner figcaption {
  margin-top: 12px; font-size: 12px; color:var(--auf-farbe);
}

.repair-photo-lightbox-close {
  position: absolute; top: 16px; right: 16px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color:var(--color-surface); cursor: pointer;
}
.repair-photo-lightbox-close:hover { background: rgba(255, 255, 255, .26); }
.repair-photo-lightbox-close svg { width: 20px; height: 20px; }

@media (max-width: 640px) {
  .repair-photo-lightbox { padding: 56px 12px 20px; }
}

/* Ansicht des Zustandsfotos (Vorderseite, Rückseite ...) über dem Datum. */
.repair-photo-item figcaption b { display: block; color:var(--color-primary); font-weight: 600; }

/* =========================================================================
   Erste Schritte - Startkarte für neu freigeschaltete Betriebe
   =========================================================================
   Bewusst zurückhaltend: Die Karte steht über den Kennzahlen und darf das
   Dashboard nicht dominieren. Keine neuen Farbwerte - Grün, Orange und die
   Linienfarbe stammen aus dem bestehenden Bestand.
   ========================================================================= */
.onboarding-card {
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--color-primary);
  border-radius: 8px;
  background: var(--color-surface);
  box-shadow: var(--shadow);
}

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

.onboarding-head strong { display: block; font-size: 14px; color: var(--color-primary); }
.onboarding-head small { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }

.onboarding-collapsed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}

.onboarding-collapsed b { color: var(--color-primary); }

.onboarding-warning,
.onboarding-readonly {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 11px;
}

/* Der Warnhinweis bleibt auch eingeklappt sichtbar - er bedeutet, dass mit
   einem nie bestätigten Steuersatz gerechnet wird. */
.onboarding-warning {
  background: var(--color-warning-soft);
  border: 1px solid var(--color-border);
  color: var(--color-warning);
}

.onboarding-readonly {
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
}

.onboarding-warning svg { width: 14px; height: 14px; flex: 0 0 14px; }

.onboarding-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--color-danger);
}

.onboarding-error svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; }

.onboarding-steps {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.onboarding-step {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--color-surface);
}

/* Erledigt tritt zurück, Offenes bleibt vorn. */
.onboarding-step.is-done { background: var(--color-surface-subtle); border-color: var(--color-border-subtle); }
.onboarding-step.is-blocked { background: var(--color-surface-subtle); }

.onboarding-step-mark { display: grid; place-items: center; padding-top: 1px; color: var(--color-text-muted); }
.onboarding-step-mark svg { width: 15px; height: 15px; }
.onboarding-step.is-done .onboarding-step-mark { color: var(--color-primary-strong); }
.onboarding-step.is-blocked .onboarding-step-mark { color: var(--color-warning); }

.onboarding-step-body strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.onboarding-step-state {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--color-border-subtle);
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 600;
}

.onboarding-step.is-done .onboarding-step-state { background: var(--color-primary-soft); color: var(--color-primary-strong); }
.onboarding-step.is-blocked .onboarding-step-state { background: var(--color-warning-soft); color: var(--color-warning); }

.onboarding-step-body small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--color-text-muted);
}

/* Die aktuellen Steuerwerte - damit niemand blind bestätigt. */
.onboarding-tax { display: block; margin-top: 6px; font-size: 11px; }
.onboarding-tax span { display: block; }
.onboarding-tax-now { color: var(--color-text); font-weight: 600; }
.onboarding-tax-old { margin-top: 2px; color: var(--color-text-muted); }

.onboarding-step-actions { display: flex; align-items: center; gap: 6px; }
.onboarding-step-actions button { min-height: 28px; padding: 0 10px; font-size: 11px; white-space: nowrap; }

@media (max-width: 760px) {
  .onboarding-head { flex-direction: column; }

  /* Schmale Breite: Symbol und Text nebeneinander, Aktionen darunter über die
     volle Breite - sonst quetschen sich zwei Knöpfe in eine halbe Spalte. */
  .onboarding-step { grid-template-columns: 20px minmax(0, 1fr); }
  .onboarding-step-actions {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    margin-top: 2px;
  }
  .onboarding-step-actions button { flex: 1 1 auto; }
}

/* Kunden-Papierkorb: Hinweis auf die automatische Endloeschung.
   Bewusst ruhig und klein wie die uebrigen Fusszeilen im Modul - der Hinweis
   soll informieren, nicht warnen. */
.customer-trash-note {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

/* Einstellungen: eine klare Navigation statt mehrzeiliger Reiter ueber dem
   Inhalt. Die Fachbereiche selbst bleiben unveraendert. */
.settings-workspace {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  min-width: 0;
}

.settings-workspace > .settings-tabs {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  align-items: stretch;
  gap: 3px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--color-surface-subtle);
}

.settings-workspace > .settings-tabs button {
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  line-height: 1.3;
  text-align: left;
}

.settings-workspace > .settings-tabs button:hover {
  background: rgba(255, 255, 255, 0.72);
  color: var(--text);
}

.settings-workspace > .settings-tabs button.is-active {
  border-color: var(--line);
  background:var(--color-surface);
  box-shadow: 0 1px 2px rgba(18, 40, 30, 0.04);
}

.settings-nav-group {
  margin: 9px 8px 1px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.settings-nav-group:first-of-type {
  margin-top: 12px;
}

.settings-section-picker {
  display: none;
}

.settings-workspace > .settings-panel {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.settings-overview-intro > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.settings-overview-intro h2,
.settings-overview-intro p {
  margin: 0;
}

.settings-overview-intro p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.settings-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.settings-overview-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 178px;
}

.settings-overview-card:last-child {
  grid-column: 1 / -1;
  min-height: 150px;
}

.settings-overview-card > small {
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.settings-overview-card h2 {
  margin: 6px 0 5px;
  font-size: 14px;
}

.settings-overview-card p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.settings-overview-card > .secondary-button {
  margin-top: auto;
}

.settings-overview-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

.settings-overview-links button {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--color-surface-subtle);
  color: var(--text);
  font-size: 10px;
  font-weight: 600;
}

.settings-overview-links button:hover {
  border-color: rgba(6, 75, 53, 0.28);
  background: var(--green-soft);
  color: var(--green);
}

.settings-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 14px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--color-surface-subtle);
}

.settings-subtabs button {
  min-height: 31px;
  padding: 6px 11px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.settings-subtabs button:hover {
  color: var(--text);
}

.settings-subtabs button.is-active {
  border-color: var(--line);
  background:var(--color-surface);
  color: var(--green);
  box-shadow: 0 1px 2px rgba(18, 40, 30, 0.05);
}

.settings-subpage {
  min-width: 0;
}

.settings-subpage[hidden] {
  display: none !important;
}

.settings-subpage > .panel {
  margin-top: 0 !important;
}

.settings-panel > .module-manager-intro + .settings-subtabs,
.settings-panel > .distributor-settings-intro + .settings-subtabs,
.settings-panel > .tariff-world-summary + .settings-subtabs,
.team-stats + .settings-subtabs {
  margin-top: 12px;
}

.settings-subpage .module-toggle-panel,
.settings-subpage .industry-editor-panel,
.settings-subpage .distributor-directory-panel,
.settings-subpage .distributor-targets-panel,
.settings-subpage .time-ledger-panel,
.settings-subpage .user-admin-panel {
  width: 100%;
  min-width: 0;
}

@media (max-width: 980px) {
  .tariff-world-view,
  .settings-workspace,
  .settings-workspace > .settings-panel,
  .settings-workspace > .settings-panel > section {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .settings-workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .settings-workspace > .settings-tabs {
    display: none;
  }

  .settings-section-picker {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    gap: 5px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--color-surface-subtle);
  }

  .settings-section-picker > span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
  }

  .settings-section-picker select {
    width: 100%;
    min-width: 0;
  }

  .settings-workspace > .settings-panel {
    grid-column: 1;
    grid-row: 2;
  }

  .settings-overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-overview-card {
    grid-column: auto;
    min-height: 0;
  }

  .settings-subtabs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-subtabs button {
    width: 100%;
    text-align: left;
  }

  .tariff-world-view .module-head,
  .tariff-world-view .module-tools,
  .tariff-world-head > div,
  .tariff-world-actions,
  .tariff-world-toolbar > label,
  #tariffMarginSettingsPanel > div,
  #tariffMarginSettingsPanel > div > div {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .tariff-world-view .module-tools > button,
  .tariff-world-actions > button {
    width: 100%;
    min-width: 0;
  }

  .tariff-world-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  #tariffMarginSettingsPanel > div,
  #tariffMarginSettingsPanel > div > div {
    align-items: stretch !important;
    flex-direction: column;
  }

  #tariffMarginSettingsPanel label,
  #tariffMarginSettingsPanel input:not([type="checkbox"]),
  #tariffMarginSettingsPanel button {
    width: 100% !important;
    min-width: 0;
    margin-top: 0 !important;
  }

  .subscription-access-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .subscription-access-summary {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================================
   DealerBase-Formularnorm
   Einzeilige Felder und normale Aktionsbuttons teilen sich eine Grundhöhe.
   Kompakte Werkzeuge bleiben bewusst kleiner; Checkboxen, Radio-, Farb- und
   mehrzeilige Eingaben behalten ihre fachlich notwendige Eigenform.
   ========================================================================= */
:root {
  --control-height: 34px;
  --control-height-compact: 30px;
  --control-padding-inline: 9px;
  --control-font-size: 10px;
  --control-button-font-size: 11px;
  --field-label-font-size: 10px;
  --field-label-gap: 5px;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="hidden"]), select) {
  min-height: var(--control-height);
  padding-inline: var(--control-padding-inline);
  font-family: inherit;
  font-size: var(--control-font-size);
  line-height: 1.2;
}

:where(textarea) {
  padding: 8px var(--control-padding-inline);
  font-family: inherit;
  font-size: var(--control-font-size);
  line-height: 1.45;
}

:where(.primary-button, .secondary-button) {
  min-height: var(--control-height);
  font-size: var(--control-button-font-size);
}

:where(.primary-button, .secondary-button).compact-button {
  min-height: var(--control-height-compact);
  font-size: var(--control-font-size);
}

.form-field,
.settings-form-stack,
.switch-proof-form label {
  min-width: 0;
}

.form-field,
.switch-proof-form label {
  display: grid;
  align-content: start;
  gap: var(--field-label-gap);
  color:var(--n-4e5c55);
  font-size: var(--field-label-font-size);
  font-weight: 700;
  line-height: 1.3;
}

.form-field > :is(input, select, textarea),
.switch-proof-form :is(input, select) {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: var(--control-height);
  padding-inline: var(--control-padding-inline);
  font-family: inherit;
  font-size: var(--control-font-size);
}

.settings-form-stack {
  display: grid;
  gap: 10px;
  width: min(100%, 320px);
  margin-top: 12px;
}

.settings-form-help,
.settings-form-message {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.settings-form-actions {
  display: flex;
  align-items: center;
}

.switch-proof-form {
  align-items: start;
}

.switch-proof-form > .primary-button {
  min-height: var(--control-height);
  margin-top: calc(var(--field-label-font-size) * 1.3 + var(--field-label-gap));
}

.switch-proof-form input[type="file"] {
  height: var(--control-height);
  min-height: var(--control-height);
  padding: 2px 4px;
}

@media (max-width: 980px) {
  .switch-proof-form > .primary-button {
    margin-top: 0;
  }
}

/* Tarifstammdaten: sehr lange gespeicherte Tarifwerte muessen innerhalb ihrer
   eigenen Spalte umbrechen. Vorher lief ein langer Anbieter- oder Tarifname
   waagerecht aus seiner Zelle heraus und legte sich ueber Datenvolumen,
   Monatspreis und Provision - die Zahlen waren dann nicht mehr sicher
   ablesbar. Bewusst nur die Tariftabelle, damit Vertraege und Provisionen in
   diesem Baustein unveraendert bleiben. */
#tariffWorldTable td {
  overflow-wrap: anywhere;
}

#tariffWorldTable .carrier-cell {
  white-space: normal;
  flex-wrap: wrap;
}

/* Vertraege und Provisionen: gleiche Regel wie in der Tariftabelle. Ein sehr
   langer gespeicherter Anbieter- oder Tarifname lief sonst waagerecht aus
   seiner Zelle heraus und legte sich ueber die Nachbarspalte - im
   Provisionsmodul genau ueber Tarif und Distributor, also ueber die Angaben,
   nach denen abgerechnet wird. */
#contractsTable td,
#commissionsTable td {
  overflow-wrap: anywhere;
}

#contractsTable .carrier-cell,
#commissionsTable .carrier-cell {
  white-space: normal;
  flex-wrap: wrap;
}

/* Aufgabenliste: Titel und Kunde sind jetzt Schaltflaechen, die in den Vorgang
   fuehren. Sie sollen wie Text aussehen und sich nur beim Ueberfahren als
   anklickbar zu erkennen geben - eine Tabelle voller Knoepfe waere unruhig. */
.task-open-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
}

.task-open-button strong,
.task-open-button small {
  display: block;
  pointer-events: none;
}

.task-open-button:hover strong,
.task-open-button:focus-visible strong {
  text-decoration: underline;
}

.task-open-button:focus-visible {
  outline:2px solid var(--brand, var(--color-primary));
  outline-offset: 2px;
}

/* Zustandsfotos entfernen: bewusst zweistufig. Ein Foto ist im Streitfall ein
   Beweismittel - ein einzelner Klick darf es nicht loeschen. Erst "Entfernen",
   dann Grund eintragen, dann bestaetigen. Der Grund landet im
   Sicherheitsprotokoll. */
.repair-photo-delete {
  margin-top: 6px;
}

.repair-photo-delete-start {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border:1px solid var(--sig-rot-e5c9c9);
  background:var(--color-surface);
  color:var(--sig-rot-b42318);
  border-radius: 7px;
  padding: 4px 9px;
  font-size: 12px;
  cursor: pointer;
}

.repair-photo-delete-start:hover {
  background:var(--sig-rot-fef3f2);
}

.repair-photo-delete-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.repair-photo-delete-confirm input {
  flex: 1 1 160px;
  min-width: 0;
  padding: 5px 8px;
  border:1px solid var(--n-rahmen-kraeftig);
  border-radius: 7px;
  font-size: 12px;
}

/* Rechnungsvorschau (Reparatur) -----------------------------------------
   Die Zahlenreihe ist bewusst wie ein Rechnungsfuss aufgebaut: Netto, Steuer,
   Brutto, Anzahlung, Restbetrag. Wer hier bestaetigt, hat dieselbe Aufstellung
   gesehen, die spaeter auf dem Beleg steht. */
.invoice-preview-dialog {
  max-width: 640px;
}

.invoice-preview-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px 18px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border:1px solid var(--border, var(--n-rahmen));
  border-radius: 12px;
  background:var(--surface-muted, var(--sig-blau-f8fafc));
}

.invoice-preview-head div {
  min-width: 0;
}

.invoice-preview-head dt {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.02em;
  color:var(--text-muted, var(--n-text-leise));
}

.invoice-preview-head dd {
  margin: 2px 0 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.invoice-preview-sum {
  margin: 18px 0 0;
  padding: 14px 16px;
  border:1px solid var(--border, var(--n-rahmen));
  border-radius: 12px;
}

.invoice-preview-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 0;
}

.invoice-preview-row.is-strong {
  border-top:1px solid var(--border, var(--n-rahmen));
  margin-top: 6px;
  padding-top: 10px;
  font-size: 17px;
}

.invoice-preview-row.is-strong strong {
  font-size: 17px;
}

.invoice-preview-warn {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(220, 38, 38, 0.35);
  background: rgba(220, 38, 38, 0.08);
  color:var(--sig-rot-b91c1c);
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 520px) {
  .invoice-preview-head {
    grid-template-columns: 1fr 1fr;
  }
  .invoice-preview-row {
    gap: 10px;
  }
}

/* Allgemeine Ausblendregel ------------------------------------------------
   Bis zum 21.08.2026 gab es sie NICHT - nur vereinzelte, an ihr Element
   gebundene Regeln (.login-screen.is-hidden, .residence-document-field.is-hidden).
   Wer die Klasse an ein neues Element haengte, bekam stumm gar nichts: genau
   so blieb in der Rechnungsvorschau die Zahlungsart bei offenem Restbetrag
   stehen und ein leerer Warnkasten als rosa Streifen sichtbar.

   Warum !important, obwohl das sonst zu vermeiden ist: Ohne den Zusatz greift
   die Regel in dieser Anwendung nachweislich NICHT. `.is-hidden` hat die
   Spezifitaet 0-1-0 und verliert damit gegen `.contact-form-grid label`
   (0-1-1, `display: grid`, Zeile ~9007). Der erste Versuch ohne !important
   liess die Zahlungsart in der Rechnungsvorschau prompt wieder stehen -
   gemessen von tools/rechnungsvorschau-ui-test.mjs, Punkt
   `zahlungsartNurBeiKassiert`. Eine Ausblendregel, die je nach Elternelement
   wirkt oder nicht, ist schlimmer als gar keine: Sie taeuscht Verlaesslichkeit
   vor. Deshalb hier bewusst absolut.

   Wer ein Element wirklich sichtbar halten will, obwohl es die Klasse traegt,
   soll die Klasse entfernen - nicht dagegen anstylen. */
.is-hidden {
  display: none !important;
}

/* Digitale Unterschrift --------------------------------------------------
   Die Zeichenflaeche ist absichtlich gross und hell: Am Tresen unterschreibt
   der Kunde mit dem Finger, nicht mit einem Stift auf Papier. touch-action:
   none ist Pflicht - ohne die Zeile scrollt das Tablet die Seite, statt einen
   Strich zu zeichnen. */
.signature-dialog {
  max-width: 720px;
}

.signature-body {
  padding: 0 0 4px;
}

.signature-name-field {
  display: block;
  margin-bottom: 12px;
}

.signature-name-field span {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  color:var(--text-muted, var(--n-text-leise));
}

.signature-name-field input {
  width: 100%;
}

.signature-declaration {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background:var(--surface-muted, var(--sig-blau-f8fafc));
  border:1px solid var(--border, var(--n-rahmen));
  font-size: 12px;
  line-height: 1.5;
}

.signature-pad-wrap {
  position: relative;
  border:2px dashed var(--border, var(--n-rahmen-kraeftig));
  border-radius: 12px;
  background:var(--color-surface);
  overflow: hidden;
}

.signature-pad {
  display: block;
  width: 100%;
  height: auto;
  /* Ohne diese Zeile verschiebt der Finger die Seite statt zu zeichnen. */
  touch-action: none;
  cursor: crosshair;
}

.signature-baseline {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 22%;
  border-bottom:1px solid var(--n-rahmen-kraeftig);
  pointer-events: none;
}

.signature-placeholder {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24%;
  text-align: center;
  color:var(--n-text-sehr-leise);
  font-size: 14px;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.signature-hint {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color:var(--text-muted, var(--n-text-leise));
}

.signature-footer {
  gap: 8px;
}

/* Unterschrift auf dem Beleg */
.repair-receipt-signature.has-signature {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: none;
  font-size: 11px;
  line-height: 1.4;
}

.repair-receipt-signature-image {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 90px;
  object-fit: contain;
  object-position: left bottom;
  border-bottom:1px solid var(--sig-blau-0f172a);
  margin-bottom: 4px;
}

@media print {
  .repair-receipt-signature-image {
    max-height: 70px;
  }
}

/* Abweichung zwischen Soll und Ist bei Provisionen -----------------------
   Bewusst als eigene Zeile unter dem Betrag und nicht nur als Farbe: Ein
   fehlender Cent ist an einer eingefaerbten Statuspille nicht zu erkennen. */
.commission-deviation {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.commission-deviation.is-short {
  color:var(--sig-orange-b45309);
}

.commission-deviation.is-over {
  color:var(--sig-gruen-0f766e);
}

/* Belegkopf mit eigenem Logo -------------------------------------------
   Das Logo steht links, die Absenderangaben rechts daneben. Ohne Logo
   ruecken die Angaben an den linken Rand - es bleibt keine Luecke stehen,
   in der vorher ein Bild war. */
/* Der Belegkopf ist links buendig, nicht auseinandergezogen. Die Grundregel
   fuer .repair-receipt-brand nutzt space-between - sinnvoll fuer die alte
   Aufteilung "Name links, Zusatz rechts", aber falsch fuer einen Briefkopf, in
   dem Logo und Absender zusammengehoeren. */
.repair-receipt-brand.beleg-kopf {
  align-items: flex-start;
  justify-content: flex-start;
  gap: 14px;
}

.repair-receipt-brand.has-logo {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.beleg-logo {
  max-height: 56px;
  max-width: 200px;
  object-fit: contain;
  object-position: left top;
  flex: 0 0 auto;
}

.beleg-absender {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.beleg-absender strong {
  font-size: 14px;
  line-height: 1.3;
}

.beleg-absender span {
  font-size: 11px;
  line-height: 1.4;
  color:var(--text-muted, var(--n-text-leise));
  overflow-wrap: anywhere;
}

@media print {
  /* Im Druck kleiner: Der Kopf soll den Beleg anfuehren, nicht beherrschen. */
  .beleg-logo {
    max-height: 42px;
  }
}

/* Notiz an der Aufgabe ---------------------------------------------------
   Bewusst als eigener kleiner Dialog und nicht als Zeile in der Tabelle: Wer
   zehn Rueckrufe abarbeitet, soll die Liste behalten und nur kurz etwas
   festhalten. */
.task-note {
  margin: 4px 0 0;
  padding: 4px 8px;
  border-left:3px solid var(--border, var(--n-rahmen-kraeftig));
  font-size: 12px;
  line-height: 1.45;
  color:var(--text-muted, var(--n-text));
  overflow-wrap: anywhere;
}

.task-note-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.45);
}

.task-note-dialog {
  width: min(520px, 100%);
  background:var(--color-surface);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.task-note-dialog h2 {
  margin: 0 0 2px;
  font-size: 17px;
  color:var(--green, var(--color-primary));
}

.task-note-subject {
  margin: 0 0 14px;
  font-size: 12px;
  color:var(--text-muted, var(--n-text-leise));
  overflow-wrap: anywhere;
}

.task-note-dialog label span {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
}

.task-note-dialog textarea {
  width: 100%;
  padding: 9px 11px;
  border:1px solid var(--border, var(--n-rahmen-kraeftig));
  border-radius: 9px;
  font: inherit;
  font-size: 12px;
  resize: vertical;
}

.task-note-hint {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color:var(--text-muted, var(--n-text-leise));
}

.task-note-dialog footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top:1px solid var(--border, var(--n-rahmen));
}

@media (max-width: 520px) {
  .task-note-dialog {
    padding: 16px;
  }
}

/* Kundenname als Weg in die Kundenakte -----------------------------------
   Der Name war bisher toter Text, daneben stand ein eigener Knopf "Kunde"
   fuer genau dasselbe. Jetzt fuehrt der Name selbst hin - der Knopf ist weg.
   Die duenne Linie ist der einzige Hinweis, dass es klickbar ist; ein voller
   Unterstrich waere in einer Liste aus zwanzig Karten zu laut. */
.kundenname-link {
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--mint-border);
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.kundenname-link:hover,
.kundenname-link:focus-visible {
  border-bottom-color: var(--green);
  color: var(--green);
}

/* Kartenmenüs auf der Reparaturkarte -------------------------------------
   Statt neun gleich lauter Knöpfe: zwei Menüs. Die Liste liegt über der
   Karte (absolut positioniert), damit sich beim Aufklappen nichts verschiebt
   und die Karten daneben stehen bleiben. */
.repair-menu {
  position: relative;
}

.repair-menu-trigger {
  width: 100%;
}

.repair-menu-caret {
  width: 10px;
  height: 10px;
  margin-left: -2px;
  transition: transform 0.12s ease;
}

.repair-menu.is-open .repair-menu-trigger {
  border-color: var(--mint-border);
  background: var(--mint);
  color: var(--green);
}

.repair-menu.is-open .repair-menu-caret {
  transform: rotate(180deg);
}

.repair-menu-list {
  position: absolute;
  z-index: 40;
  top: calc(100% + 5px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: 250px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--mint-border);
  border-radius: 7px;
  background:var(--color-surface);
  box-shadow: 0 10px 24px rgba(28, 43, 35, 0.14);
  overflow: hidden;
}

.repair-menu-title {
  padding: 7px 10px 5px;
  border-bottom: 1px solid var(--line-soft);
  background:var(--n-flaeche-leicht);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.repair-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}

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

.repair-menu-item:hover,
.repair-menu-item:focus-visible {
  background: var(--mint);
  color: var(--green);
}

.repair-menu-item svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  color: var(--muted);
}

/* Der Kartenfuß: „Vorgang abbrechen" ist unumkehrbar und gehört deshalb
   nicht auf Augenhöhe mit den Arbeitsknöpfen - aber auch nicht versteckt. */
.repair-card-foot {
  display: flex;
  justify-content: flex-start;
  padding-top: 7px;
  border-top: 1px solid var(--line-soft);
}

.repair-cancel-link {
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(194, 65, 85, 0.35);
  background: none;
  color: var(--red);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}

.repair-cancel-link:hover,
.repair-cancel-link:focus-visible {
  border-bottom-color: var(--red);
}

/* Die eine Handlung, die jetzt dran ist ----------------------------------
   Bewusst über volle Breite und höher als die Menüs darunter: Wer die Karte
   ansieht, soll den nächsten Schritt finden, ohne zu lesen. */
.repair-primary {
  width: 100%;
  min-height: 38px;
  font-size: 12px;
}

.repair-primary-hint {
  display: block;
  margin-top: -4px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

/* Papierkorb und Stift im Unterschriftsfeld -------------------------------
   Der Kunde hält das Tablet in der Hand. Ein „Nochmal" unten in der
   Knopfleiste erreicht er schlecht - der Papierkorb sitzt deshalb direkt am
   Feld, dort wo er gerade hinschaut. Der Stift im Platzhalter sagt ohne Worte,
   was hier passieren soll. */
.signature-clear {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px: An einem Touchscreen ist alles darunter Glückssache. */
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background:var(--color-surface);
  color: var(--muted);
  cursor: pointer;
}

.signature-clear svg {
  width: 19px;
  height: 19px;
}

.signature-clear:hover,
.signature-clear:focus-visible {
  border-color: var(--red);
  color: var(--red);
}

.signature-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.signature-placeholder-pen {
  width: 17px;
  height: 17px;
}

/* Blaetterleiste des Angebotsarchivs und der Hinweis auf archivierte Angebote
   in der Kundenakte. Beide bewusst leise: Sie sollen auffindbar sein, aber
   nicht mit den eigentlichen Daten um Aufmerksamkeit konkurrieren. */
.timeline-page-gap {
  padding: 0 2px;
  color: var(--muted);
  font-size: 12px;
}

.timeline-page-info {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
}

.customer-offers-archived {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* Global gilt bereits '.is-hidden { display: none }'. Hier zusaetzlich mit
   Nachdruck, weil ein Absatz in dieser Umgebung eine eigene Anzeigeregel
   erbt - genau die Falle, die beim Warnkasten der Rechnungsvorschau schon
   einmal zugeschlagen hat. */
.customer-offers-archived.is-hidden {
  display: none !important;
}

/* Freigabe nachgetragener Arbeitszeit. Bewusst leise: Der Regelfall ist die
   gestempelte Zeit, der Nachtrag die Ausnahme - er soll auffallen, aber die
   Tabelle nicht dominieren. */
.time-nachtrag-tag {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.time-nachtrag-tag.is-rejected {
  color:var(--color-danger);
}

.time-approval-actions {
  display: inline-flex;
  gap: 6px;
  margin-top: 4px;
}

.time-approval-reject {
  color:var(--color-danger);
}

/* Zeile mit offener Freigabe: gelb hinterlegt.
   Ein Nachtrag ist ein angefangener Vorgang, kein Fehler - deshalb der
   Aktenfarbton und kein Rot. Der linke Randstrich traegt die Aussage auch
   dort, wo die Flaeche zu blass wirkt oder jemand Farben schlecht
   unterscheidet; Farbe allein waere kein Signal. Die Zellen bleiben
   ungefaerbt, wenn die Zeile daneben schon eine Bedeutung hat (Wochenende) -
   die offene Freigabe ist die staerkere Aussage und gewinnt. */
tr.is-freigabe-offen > td,
.time-day-row.is-freigabe-offen > td {
  background:var(--sig-amber-fffaeb);
}

tr.is-freigabe-offen > td:first-child,
.time-day-row.is-freigabe-offen > td:first-child {
  box-shadow:inset 3px 0 0 var(--sig-amber-e0a92c);
}

/* Die Knoepfe behalten das Aussehen aller Tabellenknoepfe im Programm - eine
   eigene Groesse nur fuer diese zwei waere genau der Flickenteppich, den man
   spaeter nicht mehr los wird. Nur der Umbruch wird verhindert. */
.time-approval-actions .table-action {
  white-space: nowrap;
}

.time-approval-actions .table-action:hover {
  border-color: var(--color-primary);
}

.time-approval-actions .time-approval-reject:hover {
  border-color:var(--color-danger);
}

.time-manual-hint {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

/* Vier Spalten - dort, wo Kacheln nebeneinander stehen und nicht Fliesstext.
   Die Kundenakte und der Kalender bleiben bewusst bei zwei; vier waeren dort
   vier schmale Streifen. */
.dashboard-card-grid[data-columns="4"],
.device-content-grid[data-columns="4"],
.simple-layout-grid[data-columns="4"],
.analytics-grid[data-columns="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Zwischen 1180 und 1500 Pixeln passen vier Kacheln nebeneinander nicht mehr
   sinnvoll - Zahlen brechen um, Ueberschriften werden zweizeilig. Die
   gespeicherte Einstellung bleibt erhalten, sie wirkt nur erst wieder, wenn
   das Fenster gross genug ist. Unter 1180 faellt ohnehin alles auf eine
   Spalte (Regel weiter oben). */
@media (max-width: 1500px) {
  .dashboard-card-grid[data-columns="4"],
  .device-content-grid[data-columns="4"],
  .simple-layout-grid[data-columns="4"],
  .analytics-grid[data-columns="4"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Monatsziele: Dialog in der Benutzerverwaltung und Kachel im Dashboard.

   Zur Raumaufteilung: Der Dialog hatte hohe, fast leere Zeilen und ein
   Zahlenfeld weit rechts am Rand - dazwischen eine grosse Luecke, die nichts
   sagte. Jetzt stehen Name und Zahl dicht beieinander, die Zeilen sind
   kompakt, und die Liste bekommt links wie rechts denselben Abstand wie der
   Rest des Dialogs.

   Kein Ankreuzfeld: Die ganze Kachel schaltet, und aktiv ist gruen. Ein Haken
   ist ein winziges Ziel fuer die Maus und aus zwei Metern Abstand nicht zu
   erkennen - eine gruene Flaeche schon. */
.ziele-monat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-soft);
}

.ziele-monat strong {
  flex: 1;
  font-size: 12px;
}

/* Eine Zeile Anleitung statt einer Ueberschrift: Wer den Dialog zum ersten Mal
   sieht, muss wissen, dass die Kachel selbst der Schalter ist. */
.ziele-anleitung {
  margin: 0;
  padding: 10px 18px 0;
  color: var(--muted);
  font-size: 11px;
}

.ziele-form {
  display: block;
  padding: 10px 18px 16px;
}

.ziele-liste {
  display: grid;
  gap: 5px;
  max-height: min(52vh, 460px);
  overflow-y: auto;
  /* Innenabstand rundherum, negativer Aussenabstand hebt ihn wieder auf.
     Rechts 6px fuer den Rollbalken, damit die Kacheln ihn nicht beruehren -
     und oben, unten und links je 4px fuer den Fokusrahmen des Zahlenfelds.
     Ohne diese vier Pixel schnitt der Rollbereich den Rahmen ab, sobald man
     ins Feld klickte: 2px Rahmen plus 1px Abstand liegen AUSSERHALB der
     Kachel, und ein Rollbereich schneidet alles, was ueber ihn hinausragt -
     in beide Richtungen, auch wenn nur overflow-y gesetzt ist. */
  padding: 4px 6px 4px 4px;
  margin: -4px -6px -4px -4px;
}

.ziele-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  align-items: stretch;
  gap: 8px;
}

/* Der Schalter ist die Flaeche mit dem Namen - nicht ein Kaestchen daneben. */
.ziele-schalter {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:var(--color-surface);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.ziele-schalter:hover {
  border-color: var(--color-primary-border);
  background: var(--color-surface-subtle);
}

.ziele-schalter:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* Aktiv = gruen. Mehr braucht es nicht, um es auf einen Blick zu sehen. */
.ziele-zeile.is-aktiv .ziele-schalter {
  border-color: var(--color-primary-border);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 600;
}

.ziele-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ziele-stand {
  flex: none;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

.ziele-zeile.is-aktiv .ziele-stand {
  color: var(--color-primary-strong);
}

/* Kein Zahlenfeld mehr (siehe app.js), aber die Regel bleibt stehen: Sollte
   hier je wieder ein type="number" landen, sind die Pfeile trotzdem weg. */
.ziele-zahl::-webkit-outer-spin-button,
.ziele-zahl::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.ziele-zahl {
  appearance: textfield;
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:var(--color-surface);
  font: inherit;
  font-size: 12px;
  text-align: center;
}

.ziele-zeile.is-aktiv .ziele-zahl {
  border-color: var(--color-primary-border);
  font-weight: 600;
}

.ziele-zahl:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.ziele-hinweis {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.ziele-form .team-edit-actions {
  margin-top: 14px;
}

@media (max-width: 560px) {
  .ziele-monat { flex-wrap: wrap; padding: 12px 14px; }
  .ziele-form { padding: 12px 14px 14px; }
  .ziele-zeile { grid-template-columns: minmax(0, 1fr) 76px; }
}

/* "noch X" unter der Zahl - die eigentliche Arbeitsgroesse. */
.monthly-goal-item b small {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.monthly-goal-item.is-erreicht b small {
  color: var(--green);
}

/* Erfasser und Zugeordneter, nur wenn sie auseinanderfallen. */
.vertrag-zuordnung {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

/* Zielerreichung im Team: Reiter oben, Zahlen darunter.
   Reiter statt untereinander gestapelter Bloecke - bei sechs Mitarbeitern
   waere die Kachel sonst eine, durch die man scrollt, statt einer, die man
   ansieht. */
.teamziele-reiter {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  /* Luft zwischen Trennlinie und Reitern - ohne sie klebt "Gesamt" an der
     Linie und die Kachel wirkt gequetscht. */
  margin: 12px 0 2px;
  padding-bottom: 4px;
}

.teamziele-reiter-knopf {
  flex: none;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background:var(--color-surface);
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  white-space: nowrap;
  cursor: pointer;
}

.teamziele-reiter-knopf:hover {
  border-color: var(--color-primary-border);
  color: var(--text);
}

.teamziele-reiter-knopf.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color:var(--color-surface);
  font-weight: 600;
}

.teamziele-reiter-knopf:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* ---------------------------------------------------------------------------
   Meine Schichten - die Leseansicht des Mitarbeiters.

   Die Leitung plant in einer Tabelle, weil sie Zellen fuellt. Der Mitarbeiter
   liest, und er hat zwei Fragen: "wann muss ich?" und "wer ist mit mir da?".
   Deshalb oben Tageskarten mit der Zahl als Arbeitsgroesse und darunter ein
   Zeitband, in dem die LAGE des Balkens die zweite Frage beantwortet.
   --------------------------------------------------------------------------- */
.myshifts-week {
  display: flex;
  align-items: center;
  gap: 6px;
}

.myshifts-week strong {
  font-size: 12px;
  white-space: nowrap;
}

.myshifts-stand {
  color: var(--muted);
  font-size: 12px;
}

/* Sieben Tage, sieben Spalten - eine Woche bricht nicht um. Mit auto-fit
   ergaeben sich je nach Breite sechs Spalten und der Sonntag rutschte allein
   in die zweite Zeile; das liest sich wie ein Fehler. Erst wenn wirklich zu
   wenig Platz ist, wird umgebrochen. */
.myshifts-tage {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  padding-top: 10px;
}

@media (max-width: 1080px) {
  .myshifts-tage { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
}

.myshifts-tag {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Feste Mindesthoehe, damit gefuellte und freie Tage auf einer Linie
     stehen. Ohne sie waren die freien Karten genauso hoch wie die vollen und
     die Woche wirkte, als fehle ueberall etwas. */
  min-height: 92px;
  padding: 9px 11px 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--color-surface-subtle);
}

/* Ein freier Tag ist kein leerer Tag - gestrichelt statt gefuellt sagt
   "hier steht bewusst nichts", nicht "hier fehlt etwas". */
.myshifts-tag.is-frei {
  border-style: dashed;
  background: var(--color-surface);
}

.myshifts-tag.is-heute {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

/* Wochentag und Datum sind nicht gleich wichtig: Man sucht den Tag, das Datum
   bestaetigt ihn nur. Deshalb traegt der Tag das Gewicht, das Datum tritt
   zurueck. */
.myshifts-tag-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.myshifts-tag-kopf span:last-child {
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Heute traegt die Farbe der Marke statt des Datums - die Karte ist ohnehin
   schon umrandet, das Wort bestaetigt es nur. */
.myshifts-tag.is-heute .myshifts-tag-kopf span:last-child {
  color: var(--color-primary);
  font-weight: 700;
}

.myshifts-tag-zeit {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.015em;
  /* Ziffern auf gleicher Breite - sonst tanzen die Uhrzeiten beim
     Ueberfliegen der sieben Karten. */
  font-variant-numeric: tabular-nums;
}

/* Ein freier Tag ist eine Aussage, keine Zahl. Er bekommt deshalb nicht das
   Gewicht einer Uhrzeit. */
.myshifts-tag.is-frei .myshifts-tag-zeit {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}

.myshifts-tag-dauer {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* Die private Marke sitzt am unteren Rand der Karte, nicht direkt unter der
   Uhrzeit - so stehen die Marken aller Tage auf einer Linie. */
.myshifts-tag .myshifts-privat { margin-top: auto; align-self: flex-start; }

/* Die eigene private Sperre am Tag - dieselbe Farbe wie im Kalender, damit
   man sie ohne Nachdenken wiedererkennt. */
.myshifts-privat {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(124, 92, 191, .10);
  color:var(--sig-lila-7c5cbf);
  font-size: 11px;
  font-weight: 600;
}

.myshifts-privat i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.myshifts-summe {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 12px;
}

.myshifts-summe b {
  color: var(--text);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.myshifts-plus { color: var(--color-primary-strong); }
.myshifts-minus { color: var(--red); }

.myshifts-hinweis {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
}

/* Das Besetzungsraster: Tage als Spalten, Stunden als Zeilen - wie ein
   Stundenplan (03.09.2026). Kopf und Koerper liegen in EINEM Gitter, damit
   Spaltenkopf und Spalte nicht auseinanderlaufen koennen; zwei getrennte
   Raster taten genau das, sobald ein Name laenger war als der andere. */
.myshifts-raster-scroll { overflow-x: auto; }

.myshifts-raster {
  --zeilenhoehe: 30px;
  display: grid;
  grid-template-columns: 84px repeat(7, minmax(78px, 1fr));
  gap: 0 6px;
  min-width: 620px;
}

.myshifts-eck,
.myshifts-tagkopf {
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.myshifts-eck {
  align-self: end;
  font-size: 11px;
  font-weight: 400;
}

.myshifts-tagkopf em {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: 11px;
  opacity: .8;
}

.myshifts-tagkopf.is-heute { color: var(--color-primary); }
.myshifts-tagkopf.is-feiertag em { color: var(--sig-amber-7a5410); }

/* Die Stundenspalte beschriftet jede Zeile mit ihrem vollen Fenster
   ("08:00-09:00"). Sie benutzt dieselbe Zeilenhoehe wie die Tagesspalten -
   sonst zeigte die Beschriftung auf die falsche Stunde. */
.myshifts-stundenspalte {
  display: grid;
  grid-auto-rows: var(--zeilenhoehe);
}

.myshifts-stunde {
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Eine Tagesspalte traegt das Stundenraster als Hintergrund. Ohne es
   schwebten die Balken im Nichts und man koennte keine Uhrzeit abschaetzen.
   Der Grundton ist eine eigene Variable, damit das Raster im Schichtplan der
   Leitung auf hellerem Grund stehen kann, ohne den Verlauf zu verdoppeln. */
.myshifts-tagspalte {
  position: relative;
  height: calc(var(--stunden) * var(--zeilenhoehe));
  border-radius: 8px;
  background:
    repeating-linear-gradient(180deg,
      var(--raster-grund, var(--color-surface-subtle)) 0 calc(var(--zeilenhoehe) - 1px),
      var(--line-soft) calc(var(--zeilenhoehe) - 1px) var(--zeilenhoehe));
}

.myshifts-tagspalte.is-heute {
  outline: 1px solid var(--color-primary-border);
  outline-offset: 0;
}

/* Die Balken liegen in einer eigenen Spur. Gibt es Fehlstellen, ruecken sie
   nach links, damit der schraffierte Streifen am rechten Rand frei bleibt. */
.myshifts-spur { position: absolute; inset: 0; }
.myshifts-spur.is-schmal { left: 10px; }

.myshifts-balken {
  position: absolute;
  min-height: 14px;
  padding: 2px 6px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1px;
  color: var(--color-surface);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}

.myshifts-balken b { font-weight: 700; }

.myshifts-balken span {
  font-size: 9px;
  font-weight: 400;
  opacity: .92;
  white-space: nowrap;
}

/* Der eigene Balken bekommt einen Rahmen statt einer Sonderfarbe: Die Farbe
   gehoert zur Person, die Betonung zur Ansicht. */
.myshifts-balken.is-ich { outline: 2px solid var(--color-primary); outline-offset: 1px; }

/* Ein Tag ohne Besetzung bleibt leise. Siebenmal derselbe Satz in voller
   Groesse las sich wie eine Fehlermeldung; die Aussage bleibt, das Gewicht
   geht weg. In der schmalen Spalte steht nur noch das eine Wort. */
.myshifts-leer {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  opacity: .75;
}

/* Hinweis anstelle des Wochengitters, wenn keine Anmeldung besteht.
   Eigener Name: `.myshifts-hinweis` gibt es bereits fuer die Fusstexte der
   Karten, und `.myshifts-leer` ist absolut positioniert und gehoert ins
   Besetzungsband - im Wochengitter waere der Satz aus der Karte gerutscht. */
.myshifts-ohne-anmeldung {
  grid-column: 1 / -1;
  margin: 0;
  padding: 18px 2px;
  color: var(--muted);
  font-size: 12px;
}

.myshifts-legende {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 12px;
}

.myshifts-legende span { display: inline-flex; align-items: center; gap: 6px; }

.myshifts-punkt {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

/* Die Tagesleiste gehoert zur schmalen Ansicht. Am Rechner stehen alle sieben
   Tage nebeneinander, dort waere sie eine zweite Bedienung fuer dieselbe
   Sache. */
.myshifts-tagleiste { display: none; }

.myshifts-tagwahl {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.15;
  cursor: pointer;
}

.myshifts-tagwahl em {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  opacity: .8;
}

.myshifts-tagwahl.is-heute { color: var(--color-primary); }

.myshifts-tagwahl.is-aktiv {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-surface);
}

.myshifts-tagwahl:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media (max-width: 620px) {
  /* Ein Tag statt sieben. Sieben fingerbreite Spalten waren auf einem Telefon
     nicht lesbar und zwangen zum Querscrollen - gemeldet am 05.09.2026. */
  .myshifts-tagleiste {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
  }

  .myshifts-raster {
    grid-template-columns: 62px 1fr;
    min-width: 0;
  }

  /* Waagerecht wird nichts mehr gerollt - geblaettert wird ueber die Leiste
     oder durch Wischen. */
  .myshifts-raster-scroll { overflow-x: hidden; }

  .myshifts-tagkopf:not(.is-aktiv),
  .myshifts-tagspalte:not(.is-aktiv) { display: none; }

  .myshifts-stunde { font-size: 10px; }
  .myshifts-balken { font-size: 10px; padding: 2px 6px; }
}

/* Die Kalenderwoche vor dem Datum: eine kleine Marke, keine zweite
   Ueberschrift. Sie beantwortet "welche Woche ist das" - das Datum
   beantwortet "welche Tage". */
.myshifts-kw {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary-border);
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  vertical-align: 1px;
}

/* Feiertage. Bewusst ein warmer, ruhiger Ton - ein Feiertag ist keine Warnung
   und kein Fehler, sondern eine Tatsache, die man beim Planen kennen muss. */
.myshifts-tag.is-feiertag {
  border-color:var(--sig-amber-efdcb4);
  background: var(--color-warning-soft);
}

.myshifts-tag.is-feiertag .myshifts-tag-zeit { color:var(--sig-amber-7a5410); }

.myshifts-feiertag {
  display: block;
  margin-top: 3px;
  color:var(--sig-amber-7a5410);
  font-size: 11px;
  font-weight: 600;
}

.feiertage-quelle {
  align-self: center;
  color: var(--muted);
  font-size: 12px;
}

.feiertage-quelle.is-warnung { color: var(--color-warning); font-weight: 600; }

.feiertage-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 6px;
  margin-top: 14px;
}

.feiertag-zeile {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 10px;
  padding: 7px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: var(--color-surface-subtle);
  font-size: 12px;
}

.feiertag-zeile b { font-variant-numeric: tabular-nums; }
.feiertag-zeile span { color: var(--muted); }

/* Gemeindeabhaengige Tage sind KEINE gesicherte Aussage - sie bekommen den
   Hinweiston, damit niemand danach plant, ohne es geprueft zu haben. */
.feiertag-zeile.is-unsicher {
  border-color:var(--sig-amber-efdcb4);
  background: var(--color-warning-soft);
}

.feiertag-zeile small {
  grid-column: 1 / -1;
  color:var(--sig-amber-7a5410);
  font-size: 11px;
}

/* Unbesetzte Zeit im Besetzungsband. Schraffur statt Flaeche: Eine volle rote
   Flaeche laege optisch ueber den Balken und liesse den Plan alarmiert
   aussehen, obwohl eine Mittagslücke oft gewollt ist. */
/* Die Fehlstelle liegt als schmaler Streifen NEBEN den Balken, nicht hinter
   ihnen. Ueber die volle Breite gezogen sah es aus, als sei der Balken selbst
   schraffiert - also als stimme mit der Schicht etwas nicht. Gemeint ist aber
   die Spalte daneben: hier fehlt noch jemand. Der Streifen sitzt am LINKEN
   Rand: rechts stiess er an die Trennlinie und las sich wie der Nachbartag. */
.myshifts-luecke {
  position: absolute;
  left: 1px;
  width: 6px;
  border-radius: 3px;
  background: repeating-linear-gradient(135deg, rgba(194, 65, 85, .18) 0 4px, rgba(194, 65, 85, .40) 4px 8px);
}

/* Fehlen mehrere, wird der Streifen kraeftiger statt eine Zahl zu tragen -
   in sechs Pixeln Hoehe waere jede Ziffer unleserlich. */
.myshifts-luecke.is-mehrere {
  background: repeating-linear-gradient(135deg, rgba(194, 65, 85, .30) 0 4px, rgba(194, 65, 85, .62) 4px 8px);
}

.schichtplan-besetzung {
  margin: 0 0 14px;
  padding: 12px 14px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--color-surface-subtle);
}

.schichtplan-besetzung h3 {
  margin: 0 0 8px;
  font-size: 12px;
}

.schichtplan-besetzung h3 small {
  margin-left: 8px;
  color: var(--muted);
  font-weight: 400;
  font-size: 11px;
}

.schichtplan-besetzung { --raster-grund: var(--color-surface); }

.schichtplan-besetzung-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.schichtplan-besetzung-kopf h3 { margin: 0; }

.bedarf-liste { display: grid; gap: 6px; }

.bedarf-kopf,
.bedarf-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 96px 72px;
  align-items: center;
  gap: 8px;
}

.bedarf-kopf {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.bedarf-name { font-size: 12px; font-weight: 600; }

.bedarf-zeile input[type="time"] {
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:var(--color-surface);
  font: inherit;
  font-size: 12px;
}

.bedarf-zeile input[type="time"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

@media (max-width: 560px) {
  .bedarf-kopf { display: none; }
  .bedarf-zeile {
    grid-template-columns: minmax(0, 1fr) 1fr;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line-soft);
  }
  .bedarf-name { grid-column: 1 / -1; }
}

/* Ein Vorschlag ist noch keine Schicht: gestrichelt und blasser. Sonst haelt
   man die Woche fuer gedeckt, obwohl niemand zugesagt hat. */
.myshifts-balken.is-vorschlag {
  opacity: .55;
  border:1px dashed var(--color-surface);
}

.myshifts-balken.is-abgelehnt {
  opacity: .35;
  text-decoration: line-through;
}

.myshifts-balken[data-vorschlag],
.myshifts-balken[data-vorschlag-eigen] { cursor: pointer; }

.myshifts-luecke.is-klickbar { cursor: pointer; }

.myshifts-luecke.is-klickbar:hover {
  background: repeating-linear-gradient(135deg, rgba(6, 75, 53, .22) 0 4px, rgba(6, 75, 53, .48) 4px 8px);
}

.myshifts-offen,
.myshifts-abgelehnt {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
}

.myshifts-offen { color: var(--color-warning); }
.myshifts-abgelehnt { color: var(--red); }

/* ---------------------------------------------------------------------------
   Keine Zaehlpfeile an Zahlenfeldern - im ganzen Programm.

   Zwei Gruende, beide aus dem Betrieb:

   1. Wer eine Tastatur vor sich hat, tippt die Zahl. Die Pfeile sind ein
      winziges Klickziel fuer etwas, das man ohnehin schneller eintippt.
   2. Der gefaehrlichere: Hat ein Zahlenfeld den Fokus und man rollt durch eine
      lange Maske, aendert das Mausrad den WERT statt die Seite zu scrollen -
      lautlos. Bei Wochenstunden, Urlaubstagen oder einer Kostenschaetzung
      merkt das niemand, bis die Zahl falsch gespeichert ist.

   Die Pfeile verschwinden hier fuer alle Browser; das Rollen faengt app.js ab
   (siehe 'zahlenfeldRadSchutz'). Die Felder bleiben Zahlenfelder - Pruefung,
   Schrittweite und der Ziffernblock auf dem Telefon gelten weiter.
   --------------------------------------------------------------------------- */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ---- Belegdesign (Einstellungen -> Belegdesign) + Belegkopf-Logo rechts --
   Baukasten mit Live-Vorschau: A4-Rechnung, Kassenbon 80mm, Reparaturbeleg.
   Pflichtangaben stehen fest in den Vorlagen (siehe app.js, belegDesign). */
.beleg-kopf.logo-rechts { flex-direction: row-reverse; justify-content: space-between; }
.belegdesign-grid { display: grid; grid-template-columns: minmax(340px, 620px) minmax(380px, 1fr); gap: 18px; align-items: start; margin-top: 14px; }
@media (max-width: 1180px) { .belegdesign-grid { grid-template-columns: 1fr; } }
.belegdesign-grid > .module-panel { padding: 18px 20px; }
/* Zwei Spalten, und beide fangen oben an. Vorher hingen die Ankreuzfelder am
   unteren Rand ihrer Zeile (align-self:end) - links stand eine Beschriftung
   mittig, rechts eine unten, und die Maske sah schief aus. */
.belegdesign-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; align-items: start; }
@media (max-width: 700px) { .belegdesign-felder { grid-template-columns: 1fr; } }
.belegdesign-felder .belegdesign-breit { grid-column: 1 / -1; }
.belegdesign-felder .compact-tool-check { align-self: start; min-height: 58px; align-content: center; }
/* Auswahlfelder gleich hoch, damit die Zeilen links und rechts auf einer Linie
   liegen - unabhaengig davon, wie lang die Beschriftung darueber ist. */
.belegdesign-felder .compact-tool-select > span:first-child { display: block; min-height: 30px; }
.belegdesign-felder .compact-tool-select select { height: 34px; }
.belegdesign-bezug { margin: 0 0 12px; font-size: var(--schrift-etikett); font-weight: 600; color: var(--green); }
.belegdesign-felder textarea { width: 100%; border:1px solid var(--n-rahmen-kraeftig); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 12px; resize: vertical; box-sizing: border-box; }

/* Beschriftung der Fusszeilen-Spalten: so viele Felder nebeneinander, wie die
   Fusszeile Spalten hat - der Haendler sieht die Aufteilung schon im Editor. */
.belegdesign-fusstitel-kopf { display: block; margin-bottom: 6px; font-size: var(--schrift-etikett); font-weight: 600; color: var(--muted); }
.belegdesign-fusstitel { display: grid; gap: 8px; }
@media (max-width: 700px) { .belegdesign-fusstitel { grid-template-columns: 1fr !important; } }
.belegdesign-fusstitel input { width: 100%; border: 1px solid var(--n-rahmen-kraeftig); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: var(--schrift-text); box-sizing: border-box; }
.belegvorschau-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.belegvorschau-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.belegvorschau-zoom { display: flex; gap: 4px; align-items: center; }
.belegvorschau-zoom .table-action { min-width: 34px; text-align: center; }
.belegvorschau-tab.is-active { background:var(--color-primary); color:var(--color-surface); border-color:var(--color-primary); }
.belegvorschau-rahmen { background:var(--sig-blau-f1f5f9); border:1px solid var(--n-rahmen); border-radius: 10px; padding: 14px; overflow: auto; max-height: 680px; cursor: grab; user-select: none; }
.belegvorschau-rahmen.is-ziehen { cursor: grabbing; }
.belegvorschau-flaeche { width: max-content; margin: 0 auto; }
/* Kein fixes Seitenverhaeltnis mehr: langer Freitext liess das Blatt frueher
   unsichtbar ueberlaufen (overflow hidden). Jetzt waechst die Vorschau wie die
   echte Rechnung auf eine Folgeseite; overflow-wrap bricht Endlos-Woerter. */
.belegvorschau-a4 { background:var(--color-surface); width: 430px; min-height: 608px; box-shadow: 0 2px 10px rgba(15, 42, 30, 0.12); border-radius: 4px; padding: 22px 24px; color:var(--sig-gruen-132d22); font-family: Arial, Helvetica, sans-serif; box-sizing: border-box; overflow-wrap: break-word; }
.belegvorschau-a4 table th, .belegvorschau-a4 table td { border:1px solid var(--n-cfd8d3); padding: 3px 5px; text-align: left; }
/* Reparaturbeleg in der Vorschau: echte Breite (720 px, wie im Belegfenster),
   auf Blattbreite verkleinert. So zeigt die Vorschau denselben Beleg, den der
   Kunde unterschreibt - und nicht eine zweite, duennere Nachbildung. */
.belegvorschau-repbeleg { width: 720px; zoom: .52; }
.belegvorschau-repbeleg .repair-receipt-content { padding: 0; gap: 14px; }
.belegvorschau-bon { background:var(--color-surface); width: 200px; box-shadow: 0 2px 10px rgba(15, 42, 30, 0.12); padding: 12px 10px; font-family: Consolas, "Lucida Console", "Courier New", monospace; font-size: 10px; color:var(--n-111); display: flex; flex-direction: column; gap: 3px; box-sizing: border-box; overflow-wrap: anywhere; word-break: break-word; }
.belegvorschau-bon hr { border: none; border-top:1px dashed var(--n-94a3b8); margin: 3px 0; width: 100%; }
.belegvorschau-bon span { display: flex; justify-content: space-between; gap: 6px; text-align: left; }
.belegvorschau-bon > strong { text-align: center; font-size: 10px; }
.belegvorschau-bon .belegvorschau-tse { display: block; text-align: center; font-size: 10px; color:var(--n-text); border:1px dashed var(--n-94a3b8); padding: 4px; }
.belegvorschau-bon .belegvorschau-fuss { display: block; text-align: center; white-space: pre-line; }

/* --- Tätigkeiten in der Kundenakte (Punkt 2, Baustein 2) ------------------ */
.employee-activity-block {
  margin-bottom: 14px;
}

.employee-activity-heading {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.timeline-item.is-cancelled .timeline-title,
.timeline-item.is-cancelled .timeline-text {
  text-decoration: line-through;
  opacity: 0.62;
}

.timeline-cancel-button {
  align-self: flex-start;
}

/* --- Dashboard-Strichliste "Meine Tätigkeiten heute" (Baustein 3) --------- */
.dashboard-activity-tally .dashboard-activity-explain {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--muted);
}

.dashboard-activity-hint {
  font-size: 12px;
  color: var(--muted);
  text-decoration: underline dotted;
  cursor: help;
  white-space: nowrap;
}

.dashboard-activity-rows {
  display: grid;
  gap: 8px;
}

.dashboard-activity-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dashboard-activity-label {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dashboard-activity-row > strong {
  min-width: 26px;
  text-align: right;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

/* --- Gebuchte Mengen und Selbstbuchung (25.08.2026) ---------------------- */
.capacity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 4px;
}

.capacity-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

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

.capacity-bar {
  height: 6px;
  border-radius: 999px;
  background:var(--n-flaeche-kraeftig);
  overflow: hidden;
}

.capacity-bar > span {
  display: block;
  height: 100%;
  background:var(--color-primary);
}

.capacity-bar.is-warning > span { background:var(--sig-orange-b45309); }
.capacity-bar.is-critical > span { background:var(--sig-rot-b42318); }

.capacity-row small {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: var(--muted);
}

.capacity-booking {
  margin-top: 18px;
  padding-top: 16px;
  border-top:1px solid var(--n-rahmen);
}

.capacity-booking h3 {
  margin: 0 0 4px;
  font-size: 14px;
}

.capacity-booking-hint {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--muted);
}

.capacity-input-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.capacity-input {
  display: grid;
  gap: 4px;
}

.capacity-input > span {
  display: grid;
  font-size: 12px;
  font-weight: 600;
}

.capacity-input small {
  font-weight: 400;
  font-size: 11px;
  color: var(--muted);
}

.capacity-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 16px 0 12px;
}

.capacity-summary small {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

.capacity-summary strong {
  font-size: 17px;
}

.capacity-confirm {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 12px;
}

/* --- Bestellzusammenfassung der Selbstbuchung (25.08.2026) --------------- */
.capacity-quote {
  margin: 14px 0 16px;
  padding: 14px 16px;
  border:1px solid var(--n-d7e3dc);
  border-radius: 10px;
  background:var(--n-flaeche-leicht);
}

.capacity-quote h4 {
  margin: 0 0 10px;
  font-size: 12px;
}

.capacity-quote-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.capacity-quote-table th,
.capacity-quote-table td {
  text-align: left;
  padding: 6px 4px;
  border-bottom:1px solid var(--n-rahmen);
  vertical-align: top;
}

.capacity-quote-table th:last-child,
.capacity-quote-table td:last-child {
  text-align: right;
  white-space: nowrap;
}

.capacity-quote-table small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.capacity-quote-table tr.is-total td {
  border-bottom: none;
  padding-top: 9px;
  font-weight: 700;
}

.capacity-quote-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
}

/* --- Kassenschublade: Bestand, Bargeldbewegungen, Kassensturz (25.08.2026) --- */
.kassenlade {
  margin-bottom: 20px;
}

.kassenlade-kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
}

.kassenlade-kopf h3 {
  margin: 0;
}

.kassenlade-kopf .settings-hint {
  margin: 4px 0 0;
  max-width: 62ch;
}

.kassenlade-wahl {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.kassenlade-wahl select {
  min-width: 220px;
  padding: 7px 9px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  background: var(--color-surface);
  font-size: 12px;
  color: var(--color-text);
}

.kassenlade-stand {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  align-items: flex-start;
  margin: 16px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface-subtle);
}

.kassenlade-summe {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 190px;
}

.kassenlade-summe small {
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.kassenlade-summe strong {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

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

.kassenlade-teile {
  display: grid;
  grid-template-columns: auto auto;
  gap: 5px 18px;
  margin: 0;
  font-size: 12px;
}

.kassenlade-teile dt {
  color: var(--color-text-muted);
}

.kassenlade-teile dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.kassenlade-unbar {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.kassenlade-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.kassenlade-verlauf {
  margin-top: 22px;
}

.kassenlade-verlauf h4 {
  margin: 0 0 10px;
  font-size: 12px;
}

.kassenlade-verlauf .module-table td {
  font-variant-numeric: tabular-nums;
}

/* Fehlbetrag und Ueberschuss muessen auf einen Blick zu unterscheiden sein -
   eine Differenz ist der Punkt, an dem jemand hinsehen soll. */
.kassen-diff-fehl {
  color:var(--sig-rot-a3261d);
  font-weight: 600;
}

.kassen-diff-plus {
  color:var(--sig-amber-8a5a00);
  font-weight: 600;
}

.kassen-diff-null {
  color: var(--color-text-muted);
}

/* --- Kassensturz-Dialog --- */
/* Zaehlhilfe. Zwei Gruppen, weil man beim Zaehlen erst die Scheine stapelt
   und dann die Muenzen - und weil die Betraege sonst durcheinandergehen.
   Kurze Beschriftungen (500 €, 50 ct): „500,00 €" brach um und schob das
   Raster ueber die Dialogbreite hinaus, was eine Querleiste erzeugte. */
.kassensturz-gruppe {
  min-width: 0;
}

.kassensturz-gruppe + .kassensturz-gruppe {
  margin-top: 10px;
}

.kassensturz-gruppe h5 {
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.kassensturz-scheine {
  min-width: 0;
}

.kassensturz-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 6px;
  min-width: 0;
}

.kassensturz-schein {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 4px 6px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  background: var(--color-surface-subtle);
  font-size: 12px;
}

.kassensturz-schein span {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kassensturz-schein input {
  flex: 0 0 auto;
  width: 34px;
  padding: 3px 4px;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  font-size: 12px;
  text-align: right;
}

/* Der 500er wird seit 2019 nicht mehr ausgegeben, bleibt aber gueltig. Er
   steht deshalb weiter zur Verfuegung, nur zurueckhaltender. */
.kassensturz-schein.is-selten {
  border-style: dashed;
  opacity: .78;
}

.kassensturz-vergleich {
  margin: 2px 0 0;
  padding: 9px 11px;
  border-radius: 8px;
  background: var(--color-surface-subtle);
  font-size: 12px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

.kassensturz-vergleich.is-abweichung {
  background:var(--sig-orange-fdf4f2);
  color:var(--sig-rot-7d2019);
}

/* --- Bonliste: Belegarten und Gegenbuchungen (25.08.2026) ---------------- */
.beleg-leer {
  padding: 20px;
  text-align: center;
  color: var(--color-text-muted);
}

.beleg-art {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.beleg-art-verkauf { background:var(--color-primary-soft); color:var(--color-primary); }
.beleg-art-storno { background:var(--sig-rot-fdeceb); color:var(--sig-rot-a3261d); }
.beleg-art-retoure { background:var(--sig-amber-fdf2e3); color:var(--sig-amber-8a5a00); }
.beleg-art-geld { background:var(--sig-blau-eef2f7); color:var(--n-text); }

/* Negative Betraege muessen als solche zu erkennen sein - ein Storno sieht
   sonst aus wie ein Verkauf. */
.beleg-betrag-minus { color:var(--sig-rot-a3261d); }

.beleg-bezug {
  display: block;
  font-size: 11px;
  color: var(--color-text-muted);
}

.beleg-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* --- Storno- und Retourendialog --- */
.beleg-storno-kopf {
  margin: 0;
  padding: 9px 11px;
  border-radius: 8px;
  background: var(--color-surface-subtle);
  font-size: 12px;
  line-height: 1.55;
}

.beleg-storno-posten {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.beleg-posten-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  font-size: 12px;
}

.beleg-posten-zeile.is-leer {
  opacity: .55;
}

.beleg-posten-text {
  flex: 1 1 auto;
  min-width: 0;
}

.beleg-posten-text strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
}

.beleg-posten-text small {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.beleg-posten-menge {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--color-text-muted);
}

.beleg-posten-menge input {
  width: 44px;
  padding: 4px 5px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 12px;
  text-align: right;
}

.beleg-storno-summe {
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --- Kassen-Checkout: mehrere Positionen (25.08.2026) -------------------- */
.pos-positionen {
  margin: 16px 0 0;
}

.pos-positionen-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.pos-positionen-kopf strong {
  font-size: 12px;
}

/* Fuenf Spalten: Artikel, Menge, Preis, USt, Entfernen. Dieselben Breiten
   in Kopfzeile und Datenzeilen, sonst stehen die Ueberschriften daneben. */
.pos-zeilen-kopf,
.pos-item-row {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) 72px 96px 104px 32px;
  gap: 7px;
  align-items: center;
}

.pos-zeilen-kopf {
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.pos-item-row {
  margin-bottom: 7px;
}

.pos-item-row input,
.pos-item-row select {
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  background: var(--color-surface);
  font-size: 12px;
  color: var(--color-text);
}

.pos-item-row .pos-item-qty,
.pos-item-row .pos-item-price {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.pos-item-weg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  background: var(--color-surface);
  color:var(--sig-rot-a3261d);
  cursor: pointer;
}

.pos-item-weg svg {
  width: 14px;
  height: 14px;
}

.pos-item-weg:hover {
  border-color: rgba(163, 38, 29, .4);
  background:var(--sig-orange-fdf4f2);
}

/* Die erste Zeile bleibt: Ein Bon ohne Position gibt es nicht. */
.pos-item-weg[disabled] {
  opacity: .3;
  cursor: not-allowed;
}

.pos-abschluss {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding: 13px 15px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface-subtle);
}

.pos-zahlart {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.pos-zahlart select {
  min-width: 210px;
  padding: 7px 9px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  background: var(--color-surface);
  font-size: 12px;
  color: var(--color-text);
}

.pos-summe {
  text-align: right;
}

.pos-summe small {
  display: block;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.pos-summe strong {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

/* ---- Bonliste: Kopf mit Suche, Blaetterleiste, Erstattungsstand -------- */
.bonliste-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.bonliste-kopf h3 {
  margin: 0;
}

.bonliste-suche input {
  width: 240px;
  max-width: 100%;
  padding: 7px 10px;
  border:1px solid var(--n-rahmen-kraeftig);
  border-radius: 6px;
  font-size: 12px;
  color:var(--sig-blau-0f172a);
  background:var(--color-surface);
}

.bonliste-suche input:focus {
  outline: none;
  border-color:var(--color-primary);
  box-shadow: 0 0 0 3px rgba(6, 75, 53, 0.12);
}

.bonliste-blaettern {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.bonliste-stand {
  font-size: 12px;
  color:var(--n-text);
}

.beleg-erstattet {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  color:var(--sig-orange-b45309);
}

.beleg-erstattet.is-voll {
  color:var(--n-text-leise);
}

/* ---- Filiale anlegen, leere Kassenlisten ------------------------------- */
.filiale-feld {
  display: block;
  margin-bottom: 12px;
}

.filiale-feld > span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color:var(--n-334155);
  margin-bottom: 4px;
}

.filiale-feld > span small {
  font-weight: 400;
  color:var(--n-text-leise);
}

.filiale-feld input {
  width: 100%;
  padding: 8px 10px;
  border:1px solid var(--n-rahmen-kraeftig);
  border-radius: 6px;
  font-size: 12px;
  color:var(--sig-blau-0f172a);
  background:var(--color-surface);
}

.filiale-feld input:focus {
  outline: none;
  border-color:var(--color-primary);
  box-shadow: 0 0 0 3px rgba(6, 75, 53, 0.12);
}

.filiale-hinweis {
  font-size: 12px;
  color:var(--n-text-leise);
  margin: 0 0 14px;
  line-height: 1.5;
}

.filiale-knoepfe {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.kassen-leer {
  color:var(--n-text);
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
}

.kassen-leer small {
  color:var(--n-text-leise);
  font-size: 12px;
}

/* Margen-Prognose: Ein Satz unter der Zahl, was in ihr steckt und was nicht.
   Der ausfuehrliche Text steht als Titel auf der Karte (Maus daraufhalten). */
.forecast-basis {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color:var(--n-text-leise);
}

/* Fragezeichen an der Margen-Prognose: einziger Anlaufpunkt fuer den
   Erklaertext. Frueher hing er an der ganzen Karte - der Hinweis erschien
   dadurch beim Zeigen an mehreren Stellen. */
.forecast-info {
  border:1px solid var(--n-rahmen-kraeftig);
  background:var(--color-surface);
  color:var(--n-text-leise);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 11px;
  line-height: 1;
  padding: 0;
  cursor: help;
  vertical-align: middle;
}

.forecast-info:hover,
.forecast-info:focus-visible {
  border-color:var(--color-primary);
  color:var(--color-primary);
}

/* ---------------------------------------------------------------------------
   Lager 2.0: Artikelstamm mit Dialog und Mengenbestand
   Das Formular liegt jetzt im Dialog (.article-manager-modal) und klebt nicht
   mehr an der Kategorienverwaltung. Der Bestandsblock steht im selben Dialog
   direkt unter dem Formular, damit Buchung und Nachweis zusammenbleiben.
--------------------------------------------------------------------------- */
.article-manager-head-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.article-manager-head-tools span {
  color: var(--muted);
  font-size: 10px;
}

.article-category-manager {
  margin-bottom: 4px;
  padding-bottom: 14px;
  border-bottom:1px solid var(--n-rahmen);
}

.article-manager-modal .offer-modal-dialog {
  width: min(1080px, 100%);
  gap: 14px;
}

.article-manager-modal .article-manager-form {
  border: 0;
  padding: 0;
  background: transparent;
}

.article-manager-modal .article-manager-form-head strong {
  font-size: 14px;
}

.article-manager-table tr.is-muted {
  color: var(--muted);
}

.article-manager-table tr.is-muted td strong {
  font-weight: 600;
}

.article-stock-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border:1px solid var(--n-e1e9e4);
  border-radius: 12px;
  background:var(--n-flaeche);
}

.article-stock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
}

.article-stock-head small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.article-stock-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px minmax(0, 2fr) auto;
  align-items: end;
  gap: 10px;
}

.article-stock-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
}

.article-stock-form input,
.article-stock-form select {
  width: 100%;
  min-height: 36px;
  min-width: 0;
  padding: 0 11px;
  border:1px solid var(--n-d7e1db);
  border-radius: 10px;
  outline: none;
  background:var(--color-surface);
  color: var(--text);
  font-size: 12px;
}

.article-stock-form input:focus,
.article-stock-form select:focus {
  border-color: var(--green-2);
  box-shadow: 0 0 0 3px rgba(11, 104, 73, .10);
}

.article-stock-history {
  display: grid;
  gap: 8px;
}

.article-stock-history > strong {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.article-stock-history p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.article-stock-history table {
  width: 100%;
}

.article-stock-low {
  color:var(--sig-orange-b45309);
}

.article-stock-note {
  margin: 0;
  padding: 12px 14px;
  border:1px solid var(--sig-blau-dbe7f0);
  border-radius: 12px;
  background:var(--sig-blau-f4f9fd);
  color:var(--n-text);
  font-size: 12px;
}

@media (max-width: 900px) {
  .article-stock-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================================
   LAGER: ARTIKELFENSTER (Design 2.0)

   Kein zweites Design: Es bleibt der native .offer-modal-Dialog mit den
   Bausteinen des Hauses (.module-kpis, .segmented-control, .module-table).
   Beim vorhandenen Artikel wird er an den rechten Rand geheftet, beim neuen
   Artikel bleibt er mittig wie jedes andere Fenster - ein Seitenfenster ist
   eine Detailansicht, kein Eingabeformular aus dem Nichts.
   ========================================================================= */
.offer-modal.article-manager-modal.is-drawer {
  padding: 0;
  place-items: stretch;
  justify-content: end;
}

.article-manager-modal.is-drawer .offer-modal-dialog {
  /* Von der Bildschirmmitte bis zum rechten Rand: auf kleinen Monitoren
     nicht schmaler als 720 Pixel, auf grossen nicht breiter als 1240,
     sonst verliert die Artikelliste links ihren Platz. */
  width: clamp(720px, 62vw, 1240px);
  max-width: 100vw;
  min-width: 0;
  height: 100vh;
  max-height: 100vh;
  padding: 18px;
  align-content: start;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  box-shadow: -18px 0 50px rgba(17, 27, 22, 0.18);
  animation: articleDrawerIn .24s cubic-bezier(.16, 1, .3, 1);
}

@keyframes articleDrawerIn {
  from { transform: translateX(28px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.article-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.article-drawer-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.article-drawer-title strong {
  font-size: 17px;
  line-height: 1.2;
}

.article-drawer-title strong span {
  color: var(--muted);
  font-weight: 600;
}

.article-drawer-title small {
  color: var(--muted);
  font-size: 11px;
}

.article-drawer-head-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.article-drawer-tabs {
  justify-self: start;
}

/* Im Seitenfenster ist auch das Formular eine Karte - sonst schwebt es als
   einziger Reiterinhalt ohne Flaeche im Fenster. */
.article-manager-modal.is-drawer .article-manager-form {
  padding: 14px;
  border:1px solid var(--n-e1e9e4);
  border-radius: 12px;
  background:var(--n-flaeche);
}

/* Sicherheitsnetz: ein ausgeblendetes Formular bleibt ausgeblendet, auch
   wenn eine spaetere Regel ihm ein display gibt. */
.article-manager-form[hidden] {
  display: none;
}

.article-drawer-tabs button {
  min-height: 30px;
  padding: 0 14px;
  font-size: 11px;
}

.article-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.article-manager-modal .article-manager-fields {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (min-width: 1500px) {
  .article-manager-modal .article-manager-fields {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Bestand und Archiv sind zwei Bloecke im selben Panel - getrennt lesbar,
   aber ohne dass daraus zwei Kaesten mit doppeltem Rahmen werden. */
.article-serial-block {
  display: grid;
  gap: 8px;
}

.article-serial-block > strong {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.article-serial-block p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.article-no-date {
  color: var(--muted);
}

.article-price-warning {
  margin: 0;
  padding: 9px 12px;
  border:1px solid var(--sig-amber-ecd9b6);
  border-radius: 10px;
  background: var(--color-warning-soft);
  color: var(--color-warning);
  font-size: 12px;
}

/* Kopfzeile des Bestandsblocks: links die Stueckzahlen, rechts die Marge. */
.article-stock-marge {
  display: grid;
  gap: 2px;
  justify-items: end;
  text-align: right;
}

.article-stock-marge strong {
  font-size: 14px;
}

.article-stock-marge small {
  color: var(--muted);
  font-size: 10px;
}

.article-stock-marge.is-plus strong,
.article-marge.is-plus {
  color: var(--color-primary-strong);
}

.article-stock-marge.is-minus strong,
.article-marge.is-minus {
  color: var(--color-danger);
}

.article-marge {
  font-weight: 600;
}

/* Verkaufsverlauf: eine Reihe, eine Farbe, keine Legende. Was gezeigt wird,
   steht in der Ueberschrift; beschriftet sind nur bester und letzter Monat. */
.article-chart-wrap {
  padding-top: 2px;
}

.article-chart-wrap p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.article-chart {
  display: block;
  width: 100%;
  height: auto;
}

.article-chart-bar {
  fill: var(--color-primary-strong);
  transition: fill .12s ease;
}

.article-chart-bar:hover {
  fill: var(--color-primary);
}

/* Die Linien bleiben haarfein, egal wie stark die Flaeche gedehnt wird. */
.article-chart-grid,
.article-chart-base {
  stroke: var(--color-border);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.article-chart-zero {
  stroke: var(--color-border);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.article-chart-axis {
  fill: var(--muted);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.article-chart-value {
  fill: var(--color-text);
  font-size: 11px;
  font-weight: 600;
  /* Heller Rand, damit die Zahl auch auf einer Hilfslinie lesbar bleibt. */
  paint-order: stroke;
  stroke:var(--color-surface);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.article-stock-hint {
  color: var(--muted);
  font-size: 11px;
}

.article-empty {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 1100px) {
  .article-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .article-manager-modal.is-drawer .offer-modal-dialog {
    width: 100vw;
    padding: 14px;
  }

  .article-manager-modal .article-manager-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .article-manager-modal.is-drawer .offer-modal-dialog {
    animation: none;
  }
}

/* =========================================================================
   LAGER: WARENEINGANG UND LIEFERSCHEIN (Design 2.0)

   Beide Fenster waren mit fest eingetragenen Farben und Abstaenden gebaut und
   fielen dadurch aus dem Programm heraus. Sie nutzen jetzt dieselben
   Bausteine wie der Rest: .offer-modal als Fenster, .article-manager-fields
   als Feldraster, .module-table als Tabelle.
   ========================================================================= */
.stock-entry-modal .offer-modal-dialog,
.delivery-detail-modal .offer-modal-dialog {
  width: min(760px, 100%);
}

.stock-entry-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stock-entry-fields label.is-wide {
  grid-column: 1 / -1;
}

/* "optional" und aehnliche Zusaetze stehen leiser neben der Beschriftung. */
.article-manager-fields label span em {
  font-style: normal;
  color: var(--color-text-placeholder);
}

.stock-article-list {
  display: grid;
  gap: 10px;
}

.stock-article {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border:1px solid var(--n-e1e9e4);
  border-radius: 12px;
  background:var(--n-flaeche);
}

.stock-article-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.stock-article-head strong {
  font-size: 12px;
}

.stock-serial-hint.is-required {
  color: var(--color-warning);
  font-weight: 600;
}

.stock-entry-error {
  margin: 0;
  padding: 9px 12px;
  border:1px solid var(--sig-rot-f0c9d0);
  border-radius: 10px;
  background: var(--color-danger-soft);
  color: var(--color-danger);
  font-size: 12px;
}

.stock-entry-error[hidden] {
  display: none;
}

.stock-entry-actions {
  justify-content: flex-end;
}

.delivery-detail-head {
  display: grid;
  gap: 2px;
}

.delivery-detail-head strong {
  font-size: 17px;
  line-height: 1.2;
}

.delivery-detail-head small {
  color: var(--muted);
  font-size: 11px;
}

.delivery-payment-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border:1px solid var(--n-e1e9e4);
  border-radius: 12px;
  background:var(--n-flaeche);
  font-size: 12px;
}

.delivery-payment-form {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.delivery-payment-form.is-open {
  display: grid;
}

.delivery-payment-form .delivery-payment-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.delivery-pay-open {
  color: var(--color-warning);
  font-weight: 600;
}

.delivery-pay-done {
  color: var(--color-primary-strong);
  font-weight: 600;
}

.delivery-pay-overdue {
  color: var(--color-danger);
  font-weight: 600;
}

/* Filialkarte: Anschrift und - nur mit Kassenmodul - die Zahl der Kassen. */
.branch-card-sub {
  color: var(--muted);
  font-size: 12px;
}

/* Warum eine Reparatur auffaellt - Termin vorbei oder liegt zu lange. */
.repair-overdue-reason {
  display: block;
  color: var(--color-danger);
  font-weight: 600;
}

/* =========================================================================
   VERTRAG ANSEHEN

   Ein Klick auf die Vertragszeile oeffnet den Vertrag, nicht die Kundenakte.
   Das Fenster nutzt die vorhandenen Bausteine: .offer-modal als Rahmen,
   .offer-detail-values fuer die Eckdaten, .module-table fuer die Dokumente.
   ========================================================================= */
.contract-detail-modal .offer-modal-dialog {
  width: min(820px, 100%);
}

.contract-detail-values {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Zusatz wie der VVL-Termin gehoert unter den Wert, nicht daneben. */
.contract-detail-values dd small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
}

.contract-detail-block {
  display: grid;
  gap: 8px;
}

.contract-detail-block > strong {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.contract-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border:1px solid var(--n-e1e9e4);
  border-radius: 12px;
  background:var(--n-flaeche);
}

.contract-detail-row small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.contract-detail-actions {
  display: flex;
  gap: 8px;
}

@media (max-width: 820px) {
  .contract-detail-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .stock-entry-fields,
  .delivery-payment-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Auswertung 2.0 - die Kacheln ruecken nach oben
   --------------------------------------------------------------------------
   Vorher lag das Modul in einem Raster. Ein Raster haelt jede Zeile so hoch
   wie ihre hoechste Kachel: Neben einer kurzen Tabelle stand deshalb ein
   halber Bildschirm Weiss, und die naechste Kachel begann erst darunter.
   Bei leeren Monaten - dem Normalfall in einem frischen Betrieb - sah die
   Seite dadurch aus wie verstreute Zettel.

   Jetzt ist es ein Spaltensatz: Jede Kachel rutscht so weit nach oben, wie
   Platz ist. Der Verlauf steht bewusst ueber allem und ueber die volle
   Breite - er ist die Kennzahl, die man zuerst liest.
   ========================================================================== */
.analytics-grid {
  display: block;
  columns: 2;
  column-gap: 10px;
}

.analytics-grid[data-columns="1"] { columns: 1; }
.analytics-grid[data-columns="2"] { columns: 2; }
.analytics-grid[data-columns="3"] { columns: 3; }
.analytics-grid[data-columns="4"] { columns: 4; }

/* Eine Kachel wird nie in der Mitte auseinandergerissen. */
.analytics-grid > .panel {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  width: 100%;
  margin: 0 0 10px;
}

/* Angepinnte Kacheln und die Mitarbeitertabelle laufen ueber alle Spalten.
   Acht Spalten passen in keine halbe Kachel - dort stand vorher ein
   waagerechter Rollbalken vor der Provisionsspalte. */
.analytics-grid > .is-layout-wide,
.analytics-grid > .analytics-wide-panel {
  column-span: all;
}

.analytics-grid .incentives-list {
  margin-top: 0;
}

/* Leere Monate sind der Normalfall im frischen Betrieb - dann reicht eine
   Zeile Hinweis. 150 Pixel Luft je Leerkachel waren der halbe Bildschirm. */
.analytics-grid .customer-empty {
  min-height: 64px;
}

.analytics-trend-panel .article-chart-wrap p {
  margin: 0;
}

.analytics-panel-foot {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.analytics-panel-foot:empty {
  display: none;
}

/* Zwei Felder in einer Kachelkopfzeile stehen nebeneinander - mit Abstand.
   Vorher klebten "Jahr" und das Eingabefeld aneinander, weil der Kasten gar
   keine Regel hatte. Beide Felder tragen jetzt dasselbe Format wie die
   Zielprovision und der Monat daneben: Beschriftung darueber, gleiche Breite. */
.analytics-head-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.incentive-target-field select {
  height: 32px;
  width: 140px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  font-size: 12px;
  background:var(--color-surface);
}

/* Achsen- und Monatsbeschriftung im Provisionsverlauf sind Nebeninformation.
   Halbfett wirkt bei 11 Pixeln wie fett markiert - normale Staerke reicht. */
.analytics-chart .article-chart-axis {
  font-weight: 400;
}

/* Vergleich zum Vormonat direkt an der Kennzahl. Ohne Vergleichswert bleibt
   die Zeile leer und verschwindet - eine erfundene Null waere schlimmer. */
.module-kpi-trend {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.module-kpi-trend:empty {
  display: none;
}

.module-kpi-trend.is-up {
  color: var(--color-primary-strong);
}

.module-kpi-trend.is-down {
  color:var(--sig-orange-b45309);
}

@media (max-width: 1100px) {
  .analytics-grid[data-columns="3"],
  .analytics-grid[data-columns="4"] {
    columns: 2;
  }
}

/* Unter etwa 1000 Pixeln bleibt nur eine Spalte: Das Diagramm und die
   achtspaltige Mitarbeitertabelle brauchen Breite. Zwei halbe Spalten wuerden
   beides so klein rechnen, dass die Achsenschrift nicht mehr lesbar ist. */
@media (max-width: 1024px) {
  .analytics-grid[data-columns] {
    columns: 1;
  }
}

/* =========================================================================
   FILIALEN- UND KASSENLISTE IM HAUSDESIGN (26.08.2026)

   Beide Listen waren mit fest eingetragenen Farben direkt im Code gebaut
   (weisse Karte, #e2e8f0-Rahmen, gruener/roter Fettext). Das faellt auf,
   seit der Menuepunkt "Filialen" heisst und nicht mehr im Kassenmodul
   versteckt liegt. Jetzt tragen die Zeilen dieselben Bausteine wie der Rest
   des Programms: Flaeche und Rahmen aus den Farbrollen, Status als
   .table-status-Pille.
   ========================================================================= */
.branch-panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.branch-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.branch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.branch-row-main {
  min-width: 0;
}

.branch-row-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.branch-row-code {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--color-surface-subtle);
  border: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.branch-row-side {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

/* =========================================================================
   DASHBOARD-KARTE "MEINE TAETIGKEITEN HEUTE" (26.08.2026)

   Vorher: vier Zeilen mit Zahl und zwei Knoepfen daneben - unruhig, und der
   wichtigste Wert (die Zahl) stand zwischen zwei Knoepfen. Jetzt ist jede
   Taetigkeit eine Kachel, die als Ganzes das Zaehlen ausloest. Die Zahl
   steht gross und allein, das Zuruecknehmen ist ein kleiner Knopf in der
   Ecke - sichtbar nur, wenn es etwas zurueckzunehmen gibt.
   ========================================================================= */
.dashboard-activity-rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
}

.activity-tile-wrap {
  position: relative;
  min-width: 0;
}

.activity-tile {
  width: 100%;
  display: grid;
  gap: 2px;
  justify-items: start;
  padding: 10px 12px 9px;
  background: var(--color-surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
}

.activity-tile:hover {
  border-color: var(--mint-border);
  background: var(--color-surface-subtle);
}

.activity-tile.has-count {
  border-color: var(--mint-border);
  background: var(--mint);
}

.activity-tile-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

.activity-tile-head span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-tile-head svg {
  width: 13px;
  height: 13px;
  flex: none;
}

.activity-tile-count {
  font-size: 22px;
  line-height: 1.05;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--green);
}

.activity-tile-hint {
  font-size: 10px;
  color: var(--muted);
}

.activity-tile:hover .activity-tile-hint {
  color: var(--green-2);
}

.activity-tile-undo {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--muted);
  cursor: pointer;
}

.activity-tile-undo:hover {
  border-color: var(--red);
  color: var(--red);
}

.activity-tile-undo svg {
  width: 12px;
  height: 12px;
}

.activity-tile-sum {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--muted);
}

.activity-tile-sum strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   FARBROLLEN - erzeugt von tools/farben-umstellen.py am 26.08.2026

   Vorher standen die Farben an rund 1.300 Stellen fest im Code. Das hatte
   zwei Folgen: Jede Ecke sah minimal anders aus, und ein dunkler Modus war
   unmoeglich - man haette 1.300 Stellen einzeln umschalten muessen.

   Jetzt zeigt jede Stelle auf eine ROLLE. Der helle Modus ist dabei
   unveraendert geblieben: Jede Rolle traegt genau den Ton, der vorher an
   dieser Stelle stand.

   NICHT von Hand pflegen - Aenderungen gehoeren ins Skript, sonst laufen
   heller und dunkler Modus auseinander.
   ========================================================================= */
:root {
  --auf-farbe: #ffffff;
  --n-000: #000000;
  --n-111: #111111;
  --n-17221d: #17221d;
  --n-17231d: #17231d;
  --n-1e293b: #1e293b;
  --n-25322d: #25322d;
  --n-2f3b35: #2f3b35;
  --n-304037: #304037;
  --n-31423a: #31423a;
  --n-334039: #334039;
  --n-334155: #334155;
  --n-34453e: #34453e;
  --n-35443d: #35443d;
  --n-365247: #365247;
  --n-385047: #385047;
  --n-39433e: #39433e;
  --n-3e4b45: #3e4b45;
  --n-425049: #425049;
  --n-435049: #435049;
  --n-4b5a52: #4b5a52;
  --n-4c5d54: #4c5d54;
  --n-4d5a54: #4d5a54;
  --n-4e5c55: #4e5c55;
  --n-525252: #525252;
  --n-52605a: #52605a;
  --n-52625a: #52625a;
  --n-53645b: #53645b;
  --n-56635d: #56635d;
  --n-5a6c63: #5a6c63;
  --n-5b6770: #5b6770;
  --n-5c4730: #5c4730;
  --n-5c6b63: #5c6b63;
  --n-5f6b65: #5f6b65;
  --n-64707a: #64707a;
  --n-64748b: #64748b;
  --n-65716b: #65716b;
  --n-666: #666666;
  --n-6b7c74: #6b7c74;
  --n-6ca58d: #6ca58d;
  --n-6f7d76: #6f7d76;
  --n-718078: #718078;
  --n-748196: #748196;
  --n-78837e: #78837e;
  --n-7c8a83: #7c8a83;
  --n-7da994: #7da994;
  --n-8a9490: #8a9490;
  --n-8a9890: #8a9890;
  --n-8a9891: #8a9891;
  --n-8db7a4: #8db7a4;
  --n-8fa199: #8fa199;
  --n-94a3b8: #94a3b8;
  --n-99aaa1: #99aaa1;
  --n-9aa6a0: #9aa6a0;
  --n-9aa7a0: #9aa7a0;
  --n-9aa8a2: #9aa8a2;
  --n-9cca3c: #9cca3c;
  --n-9dbdaf: #9dbdaf;
  --n-aab5af: #aab5af;
  --n-aebbb4: #aebbb4;
  --n-aebdb5: #aebdb5;
  --n-aebfb6: #aebfb6;
  --n-b6c0bb: #b6c0bb;
  --n-b9c6bf: #b9c6bf;
  --n-b9c9bf: #b9c9bf;
  --n-b9cbc0: #b9cbc0;
  --n-bfcac4: #bfcac4;
  --n-c3ccc7: #c3ccc7;
  --n-c7d0cc: #c7d0cc;
  --n-c9d2cd: #c9d2cd;
  --n-c9d6cf: #c9d6cf;
  --n-c9d9cf: #c9d9cf;
  --n-cbd5e1: #cbd5e1;
  --n-cbd7d0: #cbd7d0;
  --n-cbd8d0: #cbd8d0;
  --n-ccd7d1: #ccd7d1;
  --n-cdd6d1: #cdd6d1;
  --n-cdd9d3: #cdd9d3;
  --n-cfd8d3: #cfd8d3;
  --n-cfdad4: #cfdad4;
  --n-cfe4da: #cfe4da;
  --n-d6e0db: #d6e0db;
  --n-d6e1da: #d6e1da;
  --n-d6e2dc: #d6e2dc;
  --n-d7dfda: #d7dfda;
  --n-d7e0db: #d7e0db;
  --n-d7e1db: #d7e1db;
  --n-d7e3dc: #d7e3dc;
  --n-d7e8df: #d7e8df;
  --n-d9e1dd: #d9e1dd;
  --n-d9e3dd: #d9e3dd;
  --n-dbe4df: #dbe4df;
  --n-dce5e0: #dce5e0;
  --n-ddd: #dddddd;
  --n-dfe8e3: #dfe8e3;
  --n-e1e9e4: #e1e9e4;
  --n-flaeche: #fbfdfc;
  --n-flaeche-kraeftig: #e2e8e5;
  --n-flaeche-leicht: #f7faf8;
  --n-flaeche-ruhig: #eef3f0;
  --n-rahmen: #e2e8f0;
  --n-rahmen-kraeftig: #cbd5e1;
  --n-text: #475569;
  --n-text-leise: #64748b;
  /* 30.08.2026: war #94a3b8 - auf Weiss 2,56 zu 1, also knapp die Haelfte
     der geforderten 4,5 (WCAG 2.1, 1.4.3). So weit abgedunkelt, bis es auf
     beiden Flaechen traegt, auf denen die Marke wirklich steht, und keinen
     Schritt weiter: 4,82 auf Weiss, 4,60 auf #f8fafc. Gemessen von
     tools/kontrast-test.mjs. */
  --n-text-sehr-leise: #657387;
  --n-text-stark: #1f2a24;
  --sig-amber-604810: #604810;
  --sig-amber-765522: #765522;
  --sig-amber-7a5410: #7a5410;
  --sig-amber-854d0e: #854d0e;
  --sig-amber-8a4b0f: #8a4b0f;
  --sig-amber-8a570d: #8a570d;
  --sig-amber-8a5a00: #8a5a00;
  --sig-amber-8a5a2b: #8a5a2b;
  --sig-amber-8a5b00: #8a5b00;
  --sig-amber-8a6b12: #8a6b12;
  --sig-amber-9a5a00: #9a5a00;
  --sig-amber-9a5b13: #9a5b13;
  --sig-amber-9a6518: #9a6518;
  --sig-amber-a45b00: #a45b00;
  --sig-amber-a65b00: #a65b00;
  --sig-amber-d48806: #d48806;
  --sig-amber-e0a92c: #e0a92c;
  --sig-amber-e2b66d: #e2b66d;
  --sig-amber-e6c778: #e6c778;
  --sig-amber-e7cf8f: #e7cf8f;
  --sig-amber-ead8b8: #ead8b8;
  --sig-amber-eadbbf: #eadbbf;
  --sig-amber-ecd9b6: #ecd9b6;
  --sig-amber-efdcb4: #efdcb4;
  --sig-amber-f0c36a: #f0c36a;
  --sig-amber-f0cf9b: #f0cf9b;
  --sig-amber-f0dcc0: #f0dcc0;
  --sig-amber-f1d39d: #f1d39d;
  --sig-amber-f2a23a: #f2a23a;
  --sig-amber-f2c94c: #f2c94c;
  --sig-amber-f3a53d: #f3a53d;
  --sig-amber-f5c681: #f5c681;
  --sig-amber-f5ece2: #f5ece2;
  --sig-amber-f8eee5: #f8eee5;
  --sig-amber-fbf2d6: #fbf2d6;
  --sig-amber-fdf2e3: #fdf2e3;
  --sig-amber-fed7aa: #fed7aa;
  --sig-amber-fef3c7: #fef3c7;
  --sig-amber-fef9c3: #fef9c3;
  --sig-amber-ffedd5: #ffedd5;
  --sig-amber-fff1b8: #fff1b8;
  --sig-amber-fff1d9: #fff1d9;
  --sig-amber-fff1e2: #fff1e2;
  --sig-amber-fff2d6: #fff2d6;
  --sig-amber-fff4e3: #fff4e3;
  --sig-amber-fff4e5: #fff4e5;
  --sig-amber-fff7e8: #fff7e8;
  --sig-amber-fff7ed: #fff7ed;
  --sig-amber-fff8e8: #fff8e8;
  --sig-amber-fff8ec: #fff8ec;
  --sig-amber-fff9e8: #fff9e8;
  --sig-amber-fff9ed: #fff9ed;
  --sig-amber-fffaeb: #fffaeb;
  --sig-amber-fffaf1: #fffaf1;
  --sig-blau-0369a1: #0369a1;
  --sig-blau-0e7490: #0e7490;
  --sig-blau-0f172a: #0f172a;
  --sig-blau-1557ff: #1557ff;
  --sig-blau-1d4ed8: #1d4ed8;
  --sig-blau-1e40af: #1e40af;
  --sig-blau-3358d4: #3358d4;
  --sig-blau-3559d6: #3559d6;
  --sig-blau-4f79ff: #4f79ff;
  --sig-blau-4f7cff: #4f7cff;
  --sig-blau-dbe7f0: #dbe7f0;
  --sig-blau-dbeafe: #dbeafe;
  --sig-blau-eef2f7: #eef2f7;
  --sig-blau-eef2ff: #eef2ff;
  --sig-blau-eef4ff: #eef4ff;
  --sig-blau-f1f5f9: #f1f5f9;
  --sig-blau-f4f9fd: #f4f9fd;
  --sig-blau-f8fafc: #f8fafc;
  --sig-gruen-0f766e: #0f766e;
  --sig-gruen-132d22: #132d22;
  --sig-gruen-166534: #166534;
  --sig-gruen-16a166: #16a166;
  --sig-gruen-16a34a: #16a34a;
  --sig-gruen-17653f: #17653f;
  --sig-gruen-2b9a68: #2b9a68;
  --sig-gruen-b9dfcd: #b9dfcd;
  --sig-gruen-d9efe4: #d9efe4;
  --sig-gruen-dcfce7: #dcfce7;
  --sig-gruen-e2f4e9: #e2f4e9;
  --sig-gruen-e3f3eb: #e3f3eb;
  --sig-gruen-e7f4ed: #e7f4ed;
  --sig-gruen-eaf5ef: #eaf5ef;
  --sig-gruen-ecfdf5: #ecfdf5;
  --sig-gruen-edf8f2: #edf8f2;
  --sig-gruen-eef7f1: #eef7f1;
  --sig-gruen-eff8f3: #eff8f3;
  --sig-gruen-f0f8f4: #f0f8f4;
  --sig-gruen-f0fdf4: #f0fdf4;
  --sig-gruen-f1faf6: #f1faf6;
  --sig-gruen-f1fbf7: #f1fbf7;
  --sig-gruen-f2faf6: #f2faf6;
  --sig-gruen-f4faf7: #f4faf7;
  --sig-gruen-f5fbf7: #f5fbf7;
  --sig-gruen-f6fbf9: #f6fbf9;
  --sig-gruen-f8fcfa: #f8fcfa;
  --sig-lila-4338ca: #4338ca;
  --sig-lila-7c5cbf: #7c5cbf;
  --sig-orange-865022: #865022;
  --sig-orange-8a5a33: #8a5a33;
  --sig-orange-92400e: #92400e;
  --sig-orange-9a3412: #9a3412;
  --sig-orange-b45309: #b45309;
  --sig-orange-c2410c: #c2410c;
  --sig-orange-e0c4ad: #e0c4ad;
  --sig-orange-e2683a: #e2683a;
  --sig-orange-e3b7a8: #e3b7a8;
  --sig-orange-ef7837: #ef7837;
  --sig-orange-f26a21: #f26a21;
  --sig-orange-f3e7dd: #f3e7dd;
  --sig-orange-f97316: #f97316;
  --sig-orange-fdf4f2: #fdf4f2;
  --sig-orange-fff0e6: #fff0e6;
  --sig-rot-7d2019: #7d2019;
  --sig-rot-991b1b: #991b1b;
  --sig-rot-a3261d: #a3261d;
  --sig-rot-a42d3d: #a42d3d;
  --sig-rot-b42318: #b42318;
  --sig-rot-b91c1c: #b91c1c;
  --sig-rot-dc2626: #dc2626;
  --sig-rot-dc3545: #dc3545;
  --sig-rot-e1251b: #e1251b;
  --sig-rot-e5a6ae: #e5a6ae;
  --sig-rot-e5c9c9: #e5c9c9;
  --sig-rot-f0c9d0: #f0c9d0;
  --sig-rot-fde8eb: #fde8eb;
  --sig-rot-fdeceb: #fdeceb;
  --sig-rot-fdecef: #fdecef;
  --sig-rot-fecaca: #fecaca;
  --sig-rot-fee2e2: #fee2e2;
  --sig-rot-fef2f2: #fef2f2;
  --sig-rot-fef3f2: #fef3f2;
  --sig-rot-ff2f45: #ff2f45;
  --sig-rot-fff0f2: #fff0f2;
  --sig-rot-fff1f1: #fff1f1;
  --sig-rot-fff1f2: #fff1f2;
  --sig-rot-fff3f4: #fff3f4;
  --sig-rot-fff8f8: #fff8f8;
  --sig-rot-fff8f9: #fff8f9;}

/* Dunkler Modus. Wird ueber data-theme="dark" am <html>-Element gesetzt -
   die Einstellung liegt beim Mitarbeiter, nicht beim Betrieb.

   Die Toene sind nicht invertiert, sondern neu gesetzt: Reines Schwarz wirkt
   hart und laesst Zahlen flimmern, deshalb ein sehr dunkles Gruengrau, das
   zum Hausgruen passt. Signalfarben behalten ihren Ton und werden nur so weit
   aufgehellt, dass sie auf dunklem Grund lesbar bleiben. */
[data-theme="dark"] {
  --auf-farbe: #f2f7f4;
  --n-000: #e3f9ed;
  --n-111: #e3f9ed;
  --n-17221d: #e3f9ed;
  --n-17231d: #e3f9ed;
  --n-1e293b: #e3f8ec;
  --n-25322d: #ddf2e6;
  --n-2f3b35: #d5e9de;
  --n-304037: #d2e6da;
  --n-31423a: #d0e4d9;
  --n-334039: #d1e5da;
  --n-334155: #cfe2d7;
  --n-34453e: #cde1d6;
  --n-35443d: #cee1d7;
  --n-365247: #c4d7cd;
  --n-385047: #c5d8ce;
  --n-39433e: #cee1d6;
  --n-3e4b45: #c7dad0;
  --n-425049: #c3d6cc;
  --n-435049: #c3d6cb;
  --n-4b5a52: #baccc2;
  --n-4c5d54: #b7c8be;
  --n-4d5a54: #b9cbc1;
  --n-4e5c55: #b7c8bf;
  --n-525252: #bfd1c7;
  --n-52605a: #b1c2b9;
  --n-52625a: #b0c0b7;
  --n-53645b: #adbeb5;
  --n-56635d: #adbeb5;
  --n-5a6c63: #a3b3aa;
  --n-5b6770: #a6b6ad;
  --n-5c4730: #c6d9ce;
  --n-5c6b63: #a3b3aa;
  --n-5f6b65: #a2b2a9;
  --n-64707a: #9aa9a1;
  --n-64748b: #95a39b;
  --n-65716b: #9ba9a1;
  --n-666: #a5b5ac;
  --n-6b7c74: #92a098;
  --n-6ca58d: #7e8a84;
  --n-6f7d76: #919e97;
  --n-718078: #8f9d95;
  --n-748196: #8d9a93;
  --n-78837e: #8c9a92;
  --n-7c8a83: #88968e;
  --n-7da994: #7a867f;
  --n-8a9490: #828e87;
  --n-8a9890: #808c85;
  --n-8a9891: #808c85;
  --n-8db7a4: #6b7670;
  --n-8fa199: #7b8780;
  --n-94a3b8: #78837d;
  --n-99aaa1: #737e78;
  --n-9aa6a0: #76817b;
  --n-9aa7a0: #75807a;
  --n-9aa8a2: #747f79;
  --n-9cca3c: #616b65;
  --n-9dbdaf: #626c66;
  --n-aab5af: #656f6a;
  --n-aebbb4: #5f6963;
  --n-aebdb5: #5e6762;
  --n-aebfb6: #5c6560;
  --n-b6c0bb: #59625d;
  --n-b9c6bf: #535b57;
  --n-b9c9bf: #515955;
  --n-b9cbc0: #4f5753;
  --n-bfcac4: #4f5652;
  --n-c3ccc7: #4c534f;
  --n-c7d0cc: #474e4a;
  --n-c9d2cd: #454c48;
  --n-c9d6cf: #424845;
  --n-c9d9cf: #404643;
  --n-cbd5e1: #414744;
  --n-cbd7d0: #414743;
  --n-cbd8d0: #404643;
  --n-ccd7d1: #404743;
  --n-cdd6d1: #414744;
  --n-cdd9d3: #3f4541;
  --n-cfd8d3: #3f4542;
  --n-cfdad4: #3e4440;
  --n-cfe4da: #373c39;
  --n-d6e0db: #383d3a;
  --n-d6e1da: #373c3a;
  --n-d6e2dc: #363c39;
  --n-d7dfda: #383e3b;
  --n-d7e0db: #383d3a;
  --n-d7e1db: #373c39;
  --n-d7e3dc: #363b38;
  --n-d7e8df: #323734;
  --n-d9e1dd: #363c39;
  --n-d9e3dd: #353a37;
  --n-dbe4df: #343936;
  --n-dce5e0: #333835;
  --n-ddd: #383e3b;
  --n-dfe8e3: #303532;
  --n-e1e9e4: #313633;
  --n-flaeche: #171e1b;
  --n-flaeche-kraeftig: #2b352f;
  --n-flaeche-leicht: #141a17;
  --n-flaeche-ruhig: #232c27;
  --n-rahmen: #2e3833;
  --n-rahmen-kraeftig: #3c4842;
  --n-text: #c2ccc7;
  --n-text-leise: #94a29b;
  /* 30.08.2026: war #75837c - auf der dunklen Fotoflaeche 3,84 zu 1.
     So weit aufgehellt, bis 4,60 dort und 4,92 im Unterschriftsfeld. */
  --n-text-sehr-leise: #83908a;
  --n-text-stark: #eef3f0;
  --sig-amber-604810: #e6c169;
  --sig-amber-765522: #d7b175;
  --sig-amber-7a5410: #eaba62;
  --sig-amber-854d0e: #eeab5f;
  --sig-amber-8a4b0f: #64360b;
  --sig-amber-8a570d: #f0b45c;
  --sig-amber-8a5a00: #f2bd5a;
  --sig-amber-8a5a2b: #d5a577;
  --sig-amber-8a5b00: #f2be5a;
  --sig-amber-8a6b12: #eac65f;
  --sig-amber-9a5a00: #f2b25a;
  --sig-amber-9a5b13: #ebaa60;
  --sig-amber-9a6518: #e7b163;
  --sig-amber-a45b00: #f2ae59;
  --sig-amber-a65b00: #f2ad59;
  --sig-amber-d48806: #f1b753;
  --sig-amber-e0a92c: #513c0c;
  --sig-amber-e2b66d: #91661d;
  --sig-amber-e6c778: #91701b;
  --sig-amber-e7cf8f: #8d6f1e;
  --sig-amber-ead8b8: #836127;
  --sig-amber-eadbbf: #7f612a;
  --sig-amber-ecd9b6: #866323;
  --sig-amber-efdcb4: #8b681e;
  --sig-amber-f0c36a: #9d6d10;
  --sig-amber-f0cf9b: #946316;
  --sig-amber-f0dcc0: #885d20;
  --sig-amber-f1d39d: #956715;
  --sig-amber-f2a23a: #a3620d;
  --sig-amber-f2c94c: #513e07;
  --sig-amber-f3a53d: #563407;
  --sig-amber-f5c681: #9f640d;
  --sig-amber-f5ece2: #3c2915;
  --sig-amber-f8eee5: #3f2711;
  --sig-amber-fbf2d6: #483807;
  --sig-amber-fdf2e3: #492d06;
  --sig-amber-fed7aa: #9c5a0d;
  --sig-amber-fef3c7: #493c06;
  --sig-amber-fef9c3: #484306;
  --sig-amber-ffedd5: #995d0c;
  --sig-amber-fff1b8: #4a3c06;
  --sig-amber-fff1d9: #493006;
  --sig-amber-fff1e2: #492906;
  --sig-amber-fff2d6: #493406;
  --sig-amber-fff4e3: #492e06;
  --sig-amber-fff4e5: #492c06;
  --sig-amber-fff7e8: #483106;
  --sig-amber-fff7ed: #482b06;
  --sig-amber-fff8e8: #483406;
  --sig-amber-fff8ec: #483006;
  --sig-amber-fff9e8: #483706;
  --sig-amber-fff9ed: #483206;
  --sig-amber-fffaeb: #483706;
  --sig-amber-fffaf1: #483006;
  --sig-blau-0369a1: #084566;
  --sig-blau-0e7490: #0a4f63;
  --sig-blau-0f172a: #849bd3;
  --sig-blau-1557ff: #082366;
  --sig-blau-1d4ed8: #0d2463;
  --sig-blau-1e40af: #6b88e6;
  --sig-blau-3358d4: #6c87e0;
  --sig-blau-3559d6: #6b86e1;
  --sig-blau-4f79ff: #081d5f;
  --sig-blau-4f7cff: #0e36aa;
  --sig-blau-dbe7f0: #315976;
  --sig-blau-dbeafe: #06244b;
  --sig-blau-eef2f7: #192636;
  --sig-blau-eef2ff: #061649;
  --sig-blau-eef4ff: #061e49;
  --sig-blau-f1f5f9: #182737;
  --sig-blau-f4f9fd: #0c2a42;
  --sig-blau-f8fafc: #172736;
  --sig-gruen-0f766e: #61ebe0;
  --sig-gruen-132d22: #88cdb0;
  --sig-gruen-166534: #6ee099;
  --sig-gruen-16a166: #0c5a39;
  --sig-gruen-16a34a: #0c5a29;
  --sig-gruen-17653f: #6fdea8;
  --sig-gruen-2b9a68: #165036;
  --sig-gruen-b9dfcd: #357557;
  --sig-gruen-d9efe4: #183928;
  --sig-gruen-dcfce7: #06491d;
  --sig-gruen-e2f4e9: #163a24;
  --sig-gruen-e3f3eb: #183828;
  --sig-gruen-e7f4ed: #193627;
  --sig-gruen-eaf5ef: #1a3626;
  --sig-gruen-ecfdf5: #074629;
  --sig-gruen-edf8f2: #163826;
  --sig-gruen-eef7f1: #193523;
  --sig-gruen-eff8f3: #183725;
  --sig-gruen-f0f8f4: #193527;
  --sig-gruen-f0fdf4: #09441b;
  --sig-gruen-f1faf6: #153929;
  --sig-gruen-f1fbf7: #113c2b;
  --sig-gruen-f2faf6: #163827;
  --sig-gruen-f4faf7: #183527;
  --sig-gruen-f5fbf7: #163721;
  --sig-gruen-f6fbf9: #18362a;
  --sig-gruen-f8fcfa: #173627;
  --sig-lila-4338ca: #1d185a;
  --sig-lila-7c5cbf: #2d1e4c;
  --sig-orange-865022: #dba272;
  --sig-orange-8a5a33: #cfa17c;
  --sig-orange-92400e: #f0965f;
  --sig-orange-9a3412: #ed8563;
  --sig-orange-b45309: #f29b59;
  --sig-orange-c2410c: #f2875b;
  --sig-orange-e0c4ad: #7d522f;
  --sig-orange-e2683a: #59220d;
  --sig-orange-e3b7a8: #442116;
  --sig-orange-ef7837: #5c2507;
  --sig-orange-f26a21: #f18b55;
  --sig-orange-f3e7dd: #3c2715;
  --sig-orange-f97316: #a84d0e;
  --sig-orange-fdf4f2: #44150a;
  --sig-orange-fff0e6: #492106;
  --sig-rot-7d2019: #e27870;
  --sig-rot-991b1b: #e56d6d;
  --sig-rot-a3261d: #e5746c;
  --sig-rot-a42d3d: #d97683;
  --sig-rot-b42318: #65140d;
  --sig-rot-b91c1c: #e86969;
  --sig-rot-dc2626: #e76868;
  --sig-rot-dc3545: #e56874;
  --sig-rot-e1251b: #64100c;
  --sig-rot-e5a6ae: #882834;
  --sig-rot-e5c9c9: #733838;
  --sig-rot-f0c9d0: #852536;
  --sig-rot-fde8eb: #4a0610;
  --sig-rot-fdeceb: #480b07;
  --sig-rot-fdecef: #480813;
  --sig-rot-fecaca: #9d0d0d;
  --sig-rot-fee2e2: #4b0606;
  --sig-rot-fef2f2: #490606;
  --sig-rot-fef3f2: #490b06;
  --sig-rot-ff2f45: #650812;
  --sig-rot-fff0f2: #49060f;
  --sig-rot-fff1f1: #490606;
  --sig-rot-fff1f2: #49060b;
  --sig-rot-fff3f4: #48060b;
  --sig-rot-fff8f8: #480606;
  --sig-rot-fff8f9: #48060f;
  --color-app: #131a16;
  --color-border: #2e3833;
  --color-border-subtle: #252e29;
  --color-brand-telekom: #ff4fa3;
  --color-brand-vodafone: #ff5252;
  --color-canvas: #0f1512;
  --color-danger: #f2798c;
  --color-danger-soft: #3a1a20;
  --color-info: #7aa5e8;
  --color-primary: #4ade9b;
  --color-primary-border: #1f5c44;
  --color-primary-soft: #123528;
  --color-primary-strong: #6ee7b0;
  --color-sidebar: #161e1a;
  --color-surface: #1a221e;
  --color-surface-selected: #123528;
  --color-surface-subtle: #1e2723;
  --color-text: #eef3f0;
  --color-text-muted: #9aa8a1;
  --color-text-placeholder: #7c8a83;
  --color-warning: #e8b25f;
  --color-warning-soft: #33280f;
  --color-yellow: #f7c244;
}

/* =========================================================================
   FARBE JE NETZBETREIBER (26.08.2026)

   Das Farbfeld sitzt im Zahnrad der Netzbetreiber-Stammdaten. Der
   "Standard"-Knopf daneben ist wichtiger als er aussieht: Ohne ihn haette
   ein Haendler keinen Weg zurueck zur Programmvorgabe, sobald er einmal
   irgendetwas gewaehlt hat.
   ========================================================================= */
.carrier-color-field {
  display: grid;
  gap: 5px;
}

.carrier-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.carrier-color-row input[type="color"] {
  width: 52px;
  height: 32px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--card);
  cursor: pointer;
}

.carrier-color-field small {
  color: var(--muted);
  font-size: 11px;
}

/* Netzbetreiber anlegen: dieselbe Maske wie hinter dem Zahnrad, nur oberhalb
   der Liste. Der Rahmen trennt sie sichtbar von den bestehenden Zeilen. */
.carrier-add-bar {
  /* Der Knopf steht rechts wie bei den Produktarten darunter. Dort schieben
     ihn die Eingabefelder ans Ende; hier gibt es keine, also muss die Leiste
     es selbst tun - sonst stehen zwei gleiche Knoepfe auf zwei Seiten. */
  justify-content: flex-end;
  padding-bottom: 4px;
  border-bottom: 0;
}

.carrier-new-form {
  margin: 10px 0 4px;
  padding: 4px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--color-surface);
}

/* Eine bereits erledigte Aufgabe in der Wiedervorlage: kein Knopf mehr, aber
   auch nicht spurlos verschwunden - wer den Filter auf "Erledigt" oder "Alle"
   stellt, will genau diese Karten sehen. */
.followup-erledigt {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  padding: 7px 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 600;
}

.followup-erledigt svg { width: 13px; height: 13px; }

/* ==========================================================================
   TYPOGRAFIE 2.0 - eine Leiter statt sechsundzwanzig Groessen
   --------------------------------------------------------------------------
   Vorher standen in dieser Datei 26 verschiedene Schriftgroessen (von 7 bis
   26 Pixel, samt 9,8 und 11,5) und sieben Schriftstaerken. In EINER Ansicht -
   der Kundenakte - trafen 25 verschiedene Kombinationen aufeinander. Das
   sieht man nicht als Fehler, man spuert es nur: Nichts wirkt zusammen-
   gehoerig, jede Karte hat ihre eigene Tonlage.

   Jetzt gibt es sechs Groessen und drei Staerken. Jede hat eine Aufgabe:

     22  Seitentitel        einmal pro Ansicht, sonst nirgends
     17  Vorgangstitel      Kundenname, grosse Kennzahl
     14  Kartentitel        Ueberschrift einer Karte oder eines Abschnitts
     12  Text und Werte     das Arbeitspferd - Saetze, Zahlen, Tabellenzellen
     11  Etikett            die Beschriftung UEBER oder NEBEN einem Wert
     10  Mikro              Pillen, Tabellenkoepfe, Fussnoten

     400 Fliesstext · 600 Betontes und Beschriftungen · 700 Titel und Zahlen

   Die Leiter ist bewusst eng: Ein Warenwirtschaftsprogramm wird den ganzen
   Tag gelesen, nicht bewundert. Grosse Spruenge waeren hier Laerm.
   ========================================================================== */

:root {
  --schrift-seite: 22px;
  --schrift-titel: 17px;
  --schrift-karte: 14px;
  --schrift-text: 12px;
  --schrift-etikett: 11px;
  --schrift-mikro: 10px;
}

/* Ohne diese Zeile erbt jeder Text, den eine Regel vergessen hat, die 16
   Pixel des Browsers - und faellt sofort aus dem Raster. Genau daher kamen
   die Ausreisser in den Leerzustaenden. */
body {
  font-size: var(--schrift-text);
}

/* <small> ohne eigene Regel rechnet der Browser auf 0,83 der Umgebung herunter
   und erfindet damit krumme Groessen wie 9,17 Pixel. */
small {
  font-size: var(--schrift-mikro);
  font-weight: 400;
}

/* Rollen statt Einzelfaelle: Beschriftung, Wert, Bedienelement.
   Vorher trug dieselbe Zeile in der einen Karte 11 Pixel und in der naechsten
   12, und ein Knopf war mal normal, mal halbfett gesetzt - nebeneinander sah
   das aus, als kaeme jede Karte aus einem anderen Programm. */
.mini-grid b {
  font-size: var(--schrift-text);
  font-weight: 600;
}

.primary-button,
.secondary-button,
.full-button,
.row-action,
.user-chip {
  font-weight: 600;
}

/* Ein Verweis ist kein Titel: dieselbe Staerke wie die Knoepfe daneben. */
.link-button {
  font-weight: 600;
}

/* Kunde bearbeiten: Bank, IBAN und die Schaltflaeche zum Anzeigen in einer
   Zeile. Auf schmaler Breite untereinander. */
.customer-edit-bank {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}

@media (max-width: 720px) {
  .customer-edit-bank {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}

/* Rufnummernmitnahme im Kopf des gespeicherten Angebots. Sie ist eine Zusage
   an den Kunden und muss beim Abschluss beim Anbieter angegeben werden -
   deshalb steht sie neben dem Status, nicht in einem Untermenue. */
.offer-saved-porting {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--sig-amber-fef3c7);
  color: var(--sig-orange-b45309);
  font-size: var(--schrift-etikett);
  font-weight: 600;
  white-space: nowrap;
}

.offer-saved-porting svg {
  width: 13px;
  height: 13px;
}

/* Zeitraumwahl der Datentraegerueberlassung (Z3). Zwei Datumsfelder
   nebeneinander in der rechten Spalte einer status-list-Zeile; bei schmaler
   Breite untereinander, damit sie nicht gequetscht werden. */
.z3-zeitraum {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.z3-zeitraum input {
  min-width: 132px;
}

@media (max-width: 640px) {
  .z3-zeitraum {
    width: 100%;
  }

  .z3-zeitraum input {
    flex: 1 1 132px;
  }
}