/* =========================================================================
   cloudWEB · Webapp-Stylesheet (KernStu)
   Quelle der Wahrheit: cw-brandkits/kunden/cloudweb-ch/brand/assets/tokens/tokens.css (v2.4)
   Regeln: brand/ci-cd/index.html (Manual v2.23) + brand/ui/ui.css
   Serif-Exit 2026-07-14: nur Urbanist / Noto Sans / JetBrains Mono, keine Serifen.
   KI-Slop-Verbot (Manual 11.1, global verschärft): keine Left-/Right-Border-
   Akzentbalken (auch einfarbig), keine Verläufe, kein Glow/Halo, keine
   Pastell-Callouts. Struktur über Weissraum, Haarlinien und flache Tint-Flächen.
   Helles Design, kein Dark Theme (AGENTS.md Regel 6).
   ========================================================================= */

/* ---------- Fonts (self-hosted, OFL, latin inkl. ä ö ü) ---------- */
@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("fonts/urbanist.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/noto-sans.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/jetbrains-mono.woff2") format("woff2");
}

/* ---------- Design-Tokens (1:1 aus tokens.css v2.4) ---------- */
:root {
  /* Primary (logo-derived) */
  --cloudweb-primary:        #009FE3;
  --cloudweb-primary-hover:  #0091CF;
  --cloudweb-primary-active: #0084BC;
  --cloudweb-primary-dark:   #007AB8;
  --cloudweb-primary-deep:   #00507A;
  --cloudweb-navy:           #003049;
  --cloudweb-primary-bright: #29AEE8;

  /* Orange (loud CTA, max. 1 pro Bildschirm) */
  --cloudweb-orange:         #FCA14B;
  --cloudweb-orange-hover:   #E47B36;
  --cloudweb-orange-light:   #FED9B3;

  /* Cloud (helle Akzente) */
  --cloudweb-cloud: #83D0F5;
  --cloudweb-sky:   #B8E4FA;
  --cloudweb-ice:   #E0F0FD;
  --cloudweb-snow:  #F0F7FC;

  /* Ink (Text-Hierarchie) */
  --cloudweb-ink-900: #1A202C;
  --cloudweb-ink-700: #2D3748;
  --cloudweb-ink-500: #4A5568;
  --cloudweb-ink-300: #808080;

  /* Surface */
  --cloudweb-bg:           #F7FAFC;
  --cloudweb-surface:      #EDF2F7;
  --cloudweb-border:       #CBD5E0;
  --cloudweb-border-light: #D7E0E4;
  --cloudweb-white:        #FFFFFF;
  --cloudweb-off-white:    #FAF8F3;

  /* Semantic */
  --cloudweb-success: #22C55E;
  --cloudweb-warning: #B7791F;
  --cloudweb-error:   #C53030;
  --cloudweb-info:    var(--cloudweb-primary);

  /* Semantic Tints (Alert-, Badge-Flächen, Manual v2.4) */
  --cloudweb-success-bg:          #F0FDF4;
  --cloudweb-success-border:      #BBF7D0;
  --cloudweb-success-text:        #15803D;
  --cloudweb-success-text-strong: #166534;
  --cloudweb-success-badge-bg:    #D1FAE5;
  --cloudweb-success-badge-text:  #065F46;
  --cloudweb-error-bg:            #FEF2F2;
  --cloudweb-error-border:        #FECACA;
  --cloudweb-error-text:          #B91C1C;
  --cloudweb-error-text-strong:   #991B1B;
  --cloudweb-warning-bg:          #FFFBEB;
  --cloudweb-warning-badge-bg:    #FEF3C7;
  --cloudweb-warning-text:        #92400E;

  /* Typografie-Stacks (serifenfrei, Serif-Exit 2026-07-14) */
  --cloudweb-font-display: "Urbanist", -apple-system, BlinkMacSystemFont, "Segoe UI",
                           "Helvetica Neue", Helvetica, Arial, sans-serif;
  --cloudweb-font-body:    "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
                           "Helvetica Neue", Helvetica, Arial, sans-serif;
  --cloudweb-font-mono:    "JetBrains Mono", "SF Mono", Monaco, "Cascadia Code",
                           Consolas, "Courier New", monospace;

  /* Typo-Skala (1.250 Major Third) */
  --cloudweb-text-2xl:     5rem;      /* 80px · Hero only */
  --cloudweb-text-xl:      4rem;      /* 64px · Section hero */
  --cloudweb-text-lg:      3rem;      /* 48px · H1 */
  --cloudweb-text-md:      2.25rem;   /* 36px · H2 */
  --cloudweb-text-sm:      1.75rem;   /* 28px · H3 */
  --cloudweb-text-lead:    1.375rem;  /* 22px · Lead */
  --cloudweb-text-body-lg: 1.125rem;  /* 18px · Body large */
  --cloudweb-text-body:    1rem;      /* 16px · UI default */
  --cloudweb-text-caption: 0.875rem;  /* 14px · Caption */
  --cloudweb-text-micro:   0.75rem;   /* 12px · Mini-Labels */
  --cloudweb-text-fine:    0.8125rem; /* 13px · Notiz, Hilfetext */
  --cloudweb-text-nano:    0.6875rem; /* 11px · Mono-Mini-Label */

  /* Line-height & Tracking */
  --cloudweb-leading-tight:  1.05;
  --cloudweb-leading-snug:   1.2;
  --cloudweb-leading-normal: 1.55;
  --cloudweb-leading-loose:  1.65;
  --cloudweb-tracking-tight: -0.02em;
  --cloudweb-tracking-caps:  0.08em;

  /* Spacing (8px-Grid) */
  --cloudweb-space-1:  0.25rem;
  --cloudweb-space-2:  0.5rem;
  --cloudweb-space-3:  0.75rem;
  --cloudweb-space-4:  1rem;
  --cloudweb-space-6:  1.5rem;
  --cloudweb-space-8:  2rem;
  --cloudweb-space-12: 3rem;
  --cloudweb-space-16: 4rem;
  --cloudweb-space-24: 6rem;

  /* Container */
  --cloudweb-container-text:   65ch;
  --cloudweb-container-narrow: 720px;
  --cloudweb-container-wide:   1200px;

  /* Radius */
  --cloudweb-radius-sm:   4px;
  --cloudweb-radius-md:   8px;
  --cloudweb-radius-lg:   12px;
  --cloudweb-radius-full: 9999px;

  /* Shadows (sehr dezent, nur für schwebende Ebenen wie Dropdowns) */
  --cloudweb-shadow-sm: 0 1px 2px rgba(0, 80, 122, 0.06);
  --cloudweb-shadow-md: 0 4px 12px rgba(0, 80, 122, 0.08);

  /* Transitions + Signatur-Easing */
  --cloudweb-transition-fast: 150ms ease;
  --cloudweb-transition-base: 250ms ease;
  --cloudweb-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; }

body {
  margin: 0;
  font-family: var(--cloudweb-font-body);
  font-size: var(--cloudweb-text-body);
  line-height: var(--cloudweb-leading-normal);
  color: var(--cloudweb-ink-700);
  background: var(--cloudweb-bg);
}

::selection { background: var(--cloudweb-primary-dark); color: var(--cloudweb-white); }

h1, h2, h3, h4 {
  font-family: var(--cloudweb-font-display);
  color: var(--cloudweb-ink-900);
  line-height: var(--cloudweb-leading-snug);
  margin: 0 0 var(--cloudweb-space-4);
}
h1 { font-size: var(--cloudweb-text-md); font-weight: 700; letter-spacing: var(--cloudweb-tracking-tight); }
h2 { font-size: var(--cloudweb-text-sm); font-weight: 600; }
h3 { font-size: var(--cloudweb-text-body-lg); font-weight: 600; }

p { margin: 0 0 var(--cloudweb-space-3); max-width: var(--cloudweb-container-text); }

/* Kontrast-Fix (Manual 3.7): Primary ist nie Textfarbe (2.97:1). Fliesstext-Links
   auf Primary Deep (8.65:1 auf White, 8.25:1 auf Background — AAA); Primary Dark
   hätte auf --cloudweb-bg nur 4.48:1 und fiele unter AA. */
a { color: var(--cloudweb-primary-deep); text-decoration: none; transition: color var(--cloudweb-transition-fast); }
a:hover { color: var(--cloudweb-navy); text-decoration: underline; }

code, .cw-mono {
  font-family: var(--cloudweb-font-mono);
  font-size: 0.9em;
}

/* A11y: sichtbarer Fokus-Ring, überall (Manual 9.6) */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--cloudweb-primary);
  outline-offset: 2px;
}

/* ---------- Seitengerüst ---------- */
.cw-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.cw-container {
  width: 100%;
  max-width: var(--cloudweb-container-wide);
  margin: 0 auto;
  padding: 0 var(--cloudweb-space-6);
}

.cw-main {
  flex: 1 1 auto;
  padding: var(--cloudweb-space-8) 0 var(--cloudweb-space-16);
}

/* Seitentitel-Zeile mit Aktionen rechts */
.cw-page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cloudweb-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--cloudweb-space-8);
}
.cw-page-head h1 { margin: 0; }

/* Eyebrow / Kicker (reine Typo, keine Vorlinie: Strich-Exit 2026-07-14) */
.cw-kicker {
  font-family: var(--cloudweb-font-mono);
  font-size: var(--cloudweb-text-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cloudweb-primary-deep); /* Manual 3.7: Kicker/Mono-Labels auf Primary Deep (AAA) */
  margin-bottom: var(--cloudweb-space-2);
}

/* ---------- Header + Navigation ---------- */
.cw-header {
  background: var(--cloudweb-white);
  border-bottom: 1px solid var(--cloudweb-border);
}
.cw-header-inner {
  display: flex;
  align-items: center;
  gap: var(--cloudweb-space-6);
  padding: var(--cloudweb-space-4) var(--cloudweb-space-6);
  max-width: var(--cloudweb-container-wide);
  margin: 0 auto;
}
.cw-brand {
  display: flex;
  align-items: center;
  gap: var(--cloudweb-space-3);
  text-decoration: none;
}
.cw-brand img { width: 120px; height: auto; display: block; }
/* Nur falls kein Logo-Asset eingebunden ist: Marke exakt cloudWEB */
.cw-brand-app {
  font-family: var(--cloudweb-font-mono);
  font-size: var(--cloudweb-text-nano);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cloudweb-ink-500);
  padding-left: var(--cloudweb-space-3);
  border-left: 1px solid var(--cloudweb-border); /* Haarlinien-Trenner (neutral), kein Akzentbalken */
}
.cw-nav {
  display: flex;
  gap: var(--cloudweb-space-6);
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
}
.cw-nav a {
  position: relative;
  display: inline-block;
  font-family: var(--cloudweb-font-body);
  font-weight: 500;
  font-size: var(--cloudweb-text-caption);
  color: var(--cloudweb-ink-500); /* Ruhezustand gedeckt (7.53:1), Aktiv hebt sich in Primary Dark ab */
  text-decoration: none;
  padding-bottom: 4px;
}
.cw-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--cloudweb-primary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--cloudweb-ease);
}
/* Kontrast-Fix (Manual 3.7): Hover/Aktiv-Text auf Primary Dark (4.69:1 auf White, AA);
   Primary bleibt der Unterstrich (Fläche/Rahmen erlaubt). */
.cw-nav a:hover { color: var(--cloudweb-primary-dark); text-decoration: none; }
.cw-nav a:hover::after, .cw-nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.cw-nav a[aria-current="page"], .cw-nav a.is-active { color: var(--cloudweb-primary-dark); }
.cw-nav a[aria-current="page"]::after, .cw-nav a.is-active::after { transform: scaleX(1); }

/* ---------- Buttons (Live-1:1 zu cloudweb.ch) ---------- */
.cw-btn {
  font-family: var(--cloudweb-font-body);
  font-weight: 700;
  font-size: var(--cloudweb-text-body);
  padding: 0.75em 1em;
  line-height: 1.5;
  border-radius: 0.5em;
  border: 0;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}
/* Kontrast-Fix (Manual 3.7): Button-Beschriftung White auf Primary Dark = 4.69:1 (AA);
   White auf Primary wäre 2.97:1. Hover/Active gehen dunkler (Deep 8.65:1, Navy 13.82:1). */
.cw-btn--primary { background: var(--cloudweb-primary-dark); color: var(--cloudweb-white); }
.cw-btn--primary:hover:not(:disabled) { background: var(--cloudweb-primary-deep); }
.cw-btn--primary:active:not(:disabled) { background: var(--cloudweb-navy); }

.cw-btn--secondary {
  background: transparent;
  color: var(--cloudweb-primary-dark); /* Manual 3.7: Primary nie als Textfarbe */
  border: 1px solid var(--cloudweb-border-light);
  padding: 0.6875em 1.0625em;
}
.cw-btn--secondary:hover:not(:disabled) {
  border-color: transparent;
  box-shadow: inset 0 0 0 2px var(--cloudweb-primary);
}
.cw-btn--secondary:active:not(:disabled) {
  background: var(--cloudweb-primary-dark); /* White auf Primary Active wäre 4.18:1 */
  border-color: transparent;
  color: var(--cloudweb-white);
  box-shadow: none;
}

/* Ghost: dezente Sekundär-/Abbrechen-Aktion */
.cw-btn--ghost { background: transparent; color: var(--cloudweb-ink-500); }
.cw-btn--ghost:hover:not(:disabled) { background: var(--cloudweb-surface); color: var(--cloudweb-ink-900); }

/* Orange nur für den EINEN Haupt-CTA pro Bildschirm (Manual 3.x) */
.cw-btn--orange { background: var(--cloudweb-orange); color: var(--cloudweb-ink-900); }
.cw-btn--orange:hover:not(:disabled) { background: var(--cloudweb-orange-hover); }

.cw-btn--sm { font-size: var(--cloudweb-text-fine); padding: 0.6em 0.85em; }
/* Gesperrt: flache Surface-Fläche statt Opacity-Dimmen (Ink-500 auf Surface = 6.7:1, AA).
   Orange erscheint erst, wenn der Lauf startbar ist. */
.cw-btn:disabled, .cw-btn[aria-disabled="true"] {
  background: var(--cloudweb-surface);
  color: var(--cloudweb-ink-500);
  cursor: not-allowed;
}

/* ---------- Formulare ---------- */
.cw-form { max-width: 520px; }
.cw-form--wide { max-width: var(--cloudweb-container-narrow); }

.cw-field { margin-bottom: var(--cloudweb-space-4); }

.cw-label {
  display: block;
  font-family: var(--cloudweb-font-body);
  font-weight: 600;
  font-size: var(--cloudweb-text-caption);
  color: var(--cloudweb-ink-900);
  margin-bottom: 6px;
}
/* Pflichtfeld-Markierung: <span class="cw-required" aria-hidden="true">*</span> */
.cw-required { color: var(--cloudweb-error); }

.cw-input, .cw-select, .cw-textarea {
  width: 100%;
  font-family: var(--cloudweb-font-body);
  font-size: var(--cloudweb-text-body);
  padding: 10px 14px;
  border: 1px solid var(--cloudweb-border);
  border-radius: var(--cloudweb-radius-sm);
  background: var(--cloudweb-white);
  color: var(--cloudweb-ink-900);
  transition: border-color var(--cloudweb-transition-fast), box-shadow var(--cloudweb-transition-fast);
}
.cw-input:focus, .cw-select:focus, .cw-textarea:focus {
  outline: none;
  border-color: var(--cloudweb-primary);
  box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.15);
}
.cw-textarea { min-height: 120px; resize: vertical; }

.cw-select {
  padding-right: 32px;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2300507A' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* Fehlerzustand: rote Kontur am Feld + Meldung darunter, kein Balken */
.cw-input--error, .cw-select--error, .cw-textarea--error,
.cw-input[aria-invalid="true"], .cw-select[aria-invalid="true"], .cw-textarea[aria-invalid="true"] {
  border-color: var(--cloudweb-error);
}
.cw-input--error:focus, .cw-input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(197, 48, 48, 0.15);
}

.cw-help  { font-size: var(--cloudweb-text-fine); color: var(--cloudweb-ink-500); margin-top: 5px; }
.cw-error { font-size: var(--cloudweb-text-fine); color: var(--cloudweb-error); margin-top: 5px; font-weight: 500; }

.cw-checkbox, .cw-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--cloudweb-text-caption);
  color: var(--cloudweb-ink-700);
  margin-bottom: 6px;
  cursor: pointer;
}
.cw-checkbox input, .cw-radio input {
  width: 16px; height: 16px;
  accent-color: var(--cloudweb-primary-dark); /* weisser Haken auf Primary wäre 2.97:1 */
}

/* Formular-Fusszeile: Aktionen rechtsbündig, Haarlinie oben */
.cw-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--cloudweb-space-3);
  padding-top: var(--cloudweb-space-4);
  border-top: 1px solid var(--cloudweb-border);
  margin-top: var(--cloudweb-space-6);
}

/* ---------- Datentabelle ---------- */
.cw-table-wrap { overflow-x: auto; }

.cw-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--cloudweb-font-body);
  font-size: var(--cloudweb-text-caption);
  background: var(--cloudweb-white);
}
.cw-table thead { background: var(--cloudweb-primary-deep); }
/* Header in Sentence-Case (Caps-Diät, Manual 4.3: Tabellen-Header nie in Caps).
   Bewusste Abweichung von ui.css (dort noch Caps); Grösse caption wie die
   Manual-eigenen Tabellen nach v2.17. */
.cw-table th {
  padding: 12px 16px;
  text-align: left;
  color: var(--cloudweb-white);
  font-weight: 600;
  font-size: var(--cloudweb-text-caption);
  white-space: nowrap;
}
.cw-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--cloudweb-border);
  color: var(--cloudweb-ink-700);
  vertical-align: top;
}
.cw-table tbody tr:hover { background: var(--cloudweb-bg); }
.cw-table td.is-num, .cw-table th.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.cw-table-caption {
  font-size: var(--cloudweb-text-fine);
  color: var(--cloudweb-ink-500);
  margin-top: 10px;
}
/* Leerer Zustand in Tabellen */
.cw-table-empty {
  padding: var(--cloudweb-space-8);
  text-align: center;
  color: var(--cloudweb-ink-500);
  font-size: var(--cloudweb-text-caption);
}

/* ---------- Status-Badges ---------- */
.cw-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--cloudweb-font-body);
  font-size: var(--cloudweb-text-micro);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--cloudweb-radius-sm);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.cw-badge--primary { background: var(--cloudweb-primary-dark); color: var(--cloudweb-white); } /* 4.69:1 AA */
.cw-badge--cloud   { background: var(--cloudweb-cloud); color: var(--cloudweb-primary-deep); }
.cw-badge--success { background: var(--cloudweb-success-badge-bg); color: var(--cloudweb-success-badge-text); }
.cw-badge--warning { background: var(--cloudweb-warning-badge-bg); color: var(--cloudweb-warning-text); }
.cw-badge--error   { background: var(--cloudweb-error-bg); color: var(--cloudweb-error-text); }
.cw-badge--neutral { background: var(--cloudweb-surface); color: var(--cloudweb-ink-700); }
.cw-badge--outline { background: transparent; color: var(--cloudweb-ink-700); border: 1px solid var(--cloudweb-border); }

/* ---------- Flache Panels ---------- */
/* Struktur über Haarlinien und Weissraum, keine Schatten-Orgien, keine Balken. */
.cw-panel {
  background: var(--cloudweb-white);
  border: 1px solid var(--cloudweb-border);
  border-radius: var(--cloudweb-radius-md);
  padding: var(--cloudweb-space-6);
}
.cw-panel--tint { background: var(--cloudweb-ice); border-color: var(--cloudweb-cloud); }
.cw-panel--muted { background: var(--cloudweb-surface); }
.cw-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cloudweb-space-3);
  padding-bottom: var(--cloudweb-space-3);
  border-bottom: 1px solid var(--cloudweb-border);
  margin-bottom: var(--cloudweb-space-4);
}
.cw-panel-title {
  font-family: var(--cloudweb-font-display);
  font-weight: 600;
  font-size: var(--cloudweb-text-body-lg);
  color: var(--cloudweb-ink-900);
  margin: 0;
}
/* Auf Tint-Flächen bleibt die Kopf-Haarlinie im Tint-Ton (wie .cw-cost-total) */
.cw-panel--tint .cw-panel-head { border-bottom-color: var(--cloudweb-cloud); }

/* Panel-Raster */
.cw-panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--cloudweb-space-4);
}

/* ---------- Meldungen (flache Tint-Flächen, Manual 11.1-konform) ---------- */
/* Bewusste Abweichung von brand/ui/ui.css (.cw-alert mit border-left):
   das globale KI-Slop-Verbot untersagt Left-Border-Akzentbalken auch einfarbig.
   Darum: flache Tint-Fläche mit umlaufender 1px-Border, wie das
   «Erlaubt»-Beispiel in Manual 11.1. */
.cw-note {
  padding: 12px 16px;
  border-radius: var(--cloudweb-radius-sm);
  border: 1px solid;
  font-size: var(--cloudweb-text-caption);
  line-height: 1.5;
}
.cw-note strong { font-weight: 700; }
.cw-note a { color: inherit; text-decoration: underline; }
.cw-note--info    { background: var(--cloudweb-ice); border-color: var(--cloudweb-sky); color: var(--cloudweb-primary-deep); }
.cw-note--success { background: var(--cloudweb-success-bg); border-color: var(--cloudweb-success-border); color: var(--cloudweb-success-text-strong); }
.cw-note--warning { background: var(--cloudweb-warning-bg); border-color: var(--cloudweb-warning-badge-bg); color: var(--cloudweb-warning-text); }
.cw-note--error   { background: var(--cloudweb-error-bg); border-color: var(--cloudweb-error-border); color: var(--cloudweb-error-text-strong); }

/* ---------- Kleinkram ---------- */
/* Meta-Zeile neben Titeln: normales Label, KEIN Mono-Caps (Caps-Diät 4.3:
   Mono-Caps sind Akzent — pro Ansicht nur Kicker, Brand-App und Footer). */
.cw-meta {
  font-family: var(--cloudweb-font-body);
  font-size: var(--cloudweb-text-fine);
  color: var(--cloudweb-ink-500);
}

.cw-hr { border: none; height: 1px; background: var(--cloudweb-border); margin: var(--cloudweb-space-6) 0; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .cw-header-inner { flex-wrap: wrap; gap: var(--cloudweb-space-3); }
  .cw-nav { width: 100%; margin-left: 0; gap: var(--cloudweb-space-4); flex-wrap: wrap; }
  .cw-main { padding-top: var(--cloudweb-space-6); }
  .cw-form-actions { flex-direction: column-reverse; }
  .cw-form-actions .cw-btn { width: 100%; }
}

/* ---------- App-Layout (Adressdaten, Baustein 1) ---------- */
/* Nur Token-Werte, keine neuen Farben. Struktur über Grid und Weissraum. */
.cw-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--cloudweb-space-6);
  align-items: start;
}
.cw-seite {
  display: flex;
  flex-direction: column;
  gap: var(--cloudweb-space-4);
}

/* Footer: Navy für dunkle Abschnitte (Manual 3.x) */
.cw-footer {
  background: var(--cloudweb-navy);
  padding: var(--cloudweb-space-4) 0;
}
.cw-footer-meta {
  font-family: var(--cloudweb-font-mono);
  font-size: var(--cloudweb-text-nano);
  letter-spacing: var(--cloudweb-tracking-caps);
  text-transform: uppercase;
  color: var(--cloudweb-sky);
}

/* Hochrechnungs-/Budget-Zeilen */
.cw-cost-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--cloudweb-space-3);
  padding: var(--cloudweb-space-2) 0;
  font-size: var(--cloudweb-text-caption);
  color: var(--cloudweb-ink-700);
}
.cw-cost-wert {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--cloudweb-ink-900);
}
.cw-cost-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--cloudweb-space-3);
  padding-top: var(--cloudweb-space-3);
  margin-top: var(--cloudweb-space-2);
  border-top: 1px solid var(--cloudweb-cloud);
  font-weight: 600;
  color: var(--cloudweb-ink-900);
}
.cw-cost-chf {
  font-family: var(--cloudweb-font-display);
  font-size: var(--cloudweb-text-sm);
  font-weight: 700;
  color: var(--cloudweb-primary-deep);
  font-variant-numeric: tabular-nums;
}

/* ---------- Run-Historie (Kernzeile + Schritt-Detailzeile pro Lauf) ---------- */
/* UX-Fix Runde 9: statt 14 Spalten hinter unsichtbarem horizontalem Scroll
   bleiben 7 Kernspalten immer sichtbar; die Pipeline-Schritte stehen als
   beschriftete Blöcke in einer Detailzeile pro Lauf. Kein Scroll-Hinweis
   nötig, weil nichts mehr abgeschnitten wird. Flache Snow-Fläche + Haarlinien,
   keine Akzentbalken, keine Verläufe (Manual 11.1). */
/* Finaler Abnahme-Durchlauf, Befund 6: die Sheet-Spalte ragte @1280 in den
   internen Horizontal-Scroll (39px, gemessen final-laeufe-breiten-messung).
   Ursache: die nowrap-Header («Investition (CHF)», «Region / PLZ») diktieren
   die Mindestbreite der Tabelle. In der Lauf-Historie dürfen Header darum
   umbrechen — die Zellen selbst bleiben unverändert, nichts wird gekappt. */
.cw-table--laeufe th { white-space: normal; }
/* Schmale Desktop-Breiten (Tabelle noch nicht gestapelt, Platz aber knapp):
   die langen Einzelwörter («Liegenschaftsverwaltung» in Branche und im
   Sheet-Tab-Namen) dürfen notfalls im Wort umbrechen, statt die Spalte in
   den internen Scroll zu schieben. Ab ~1150px greift die Regel nie, weil
   der Platz für die vollen Wörter reicht (gemessen final-laeufe-breiten-
   messung: 1280/1440 ohne Umbruchbedarf). */
@media (max-width: 1150px) and (min-width: 761px) {
  .cw-table--laeufe .cw-lauf-zeile td[data-label="Branche"],
  .cw-table--laeufe .cw-lauf-zeile td[data-label="Sheet"] {
    overflow-wrap: anywhere;
  }
}
.cw-table--laeufe .cw-lauf-zeile td { border-bottom: 0; }
.cw-table--laeufe .cw-lauf-details td {
  background: var(--cloudweb-snow);
  border-bottom: 1px solid var(--cloudweb-border);
  padding: var(--cloudweb-space-3) var(--cloudweb-space-4) var(--cloudweb-space-4);
}
/* Zeilen-Hover aus: Kern- und Detailzeile sind EIN Lauf, halbes Highlight irritiert */
.cw-table--laeufe tbody tr:hover { background: transparent; }

.cw-schritte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--cloudweb-space-3) var(--cloudweb-space-6);
}
.cw-schritt--breit { grid-column: 1 / -1; }
/* R8: Grid-Items dürfen unter ihre min-content-Breite schrumpfen — sonst
   sprengt ein nowrap-Badge («6 gefunden · 4 vermutet · 0 nicht gefunden»)
   die 230px-Spur und die Detailzelle liegt hinter horizontalem Scroll. */
.cw-schritt { min-width: 0; }
.cw-schritt-label {
  display: block;
  font-size: var(--cloudweb-text-micro);
  font-weight: 600;
  color: var(--cloudweb-ink-500);
  margin-bottom: var(--cloudweb-space-1);
}
.cw-schritt-inhalt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cloudweb-space-2);
}
.cw-schritt-inhalt .cw-help { flex-basis: 100%; margin: 0; }

/* Unter 760px: gestapelte Lauf-Karten statt Tabelle — jede Zelle trägt ihr
   Label selbst (data-label), nichts liegt hinter horizontalem Scroll. */
@media (max-width: 760px) {
  .cw-table--laeufe, .cw-table--laeufe tbody, .cw-table--laeufe tr { display: block; }
  .cw-table--laeufe thead { display: none; }
  .cw-table--laeufe .cw-lauf-zeile { padding: var(--cloudweb-space-3) 0 var(--cloudweb-space-2); }
  .cw-table--laeufe .cw-lauf-zeile td {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
    gap: var(--cloudweb-space-1) var(--cloudweb-space-3);
    padding: 3px 16px;
    text-align: right;
    border: 0;
  }
  .cw-table--laeufe .cw-lauf-zeile td::before {
    content: attr(data-label);
    margin-right: auto;
    font-size: var(--cloudweb-text-fine);
    font-weight: 600;
    color: var(--cloudweb-ink-500);
    text-align: left;
  }
  .cw-table--laeufe .cw-lauf-details td { display: block; }
  .cw-table--laeufe .cw-lauf-leer td { display: block; border-bottom: 0; }
  /* R8: Zähl-Badges der Pipeline-Schritte brechen auf schmalen Karten um,
     statt über die Kartenkante zu laufen (Messung r8: @390 ragte
     «6 gefunden · 4 vermutet · 0 nicht gefunden» aus der Detailzelle). */
  .cw-table--laeufe .cw-lauf-details .cw-badge { white-space: normal; }
}

/* ---------- Mandanten-Shell mit Sidebar (Arbeitsoberfläche v2) ---------- */
/* Pflicht v2 Zeile 15: Sidebar mit Suche / Leads / Listen / Läufe.
   Aktiver Punkt = flache Ice-Tint-Fläche (Manual 11.1: kein Akzentbalken,
   kein Verlauf). Icons: Inline-SVG, Line-Style 2px auf 24er-Grid,
   currentColor (Manual 11.2). */
.cw-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--cloudweb-space-8);
  align-items: start;
}
.cw-sidebar {
  position: sticky;
  top: var(--cloudweb-space-6);
}
.cw-sidebar-mandant {
  padding: var(--cloudweb-space-1) 12px var(--cloudweb-space-3);
  margin-bottom: var(--cloudweb-space-3);
  border-bottom: 1px solid var(--cloudweb-border);
}
.cw-sidebar-name {
  display: block;
  font-family: var(--cloudweb-font-display);
  font-weight: 700;
  font-size: var(--cloudweb-text-body);
  color: var(--cloudweb-ink-900);
  line-height: var(--cloudweb-leading-snug);
}
.cw-sidenav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cw-sidenav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--cloudweb-radius-sm);
  font-size: var(--cloudweb-text-caption);
  font-weight: 500;
  color: var(--cloudweb-ink-500);
  text-decoration: none;
  transition: background var(--cloudweb-transition-fast), color var(--cloudweb-transition-fast);
}
.cw-sidenav a:hover {
  background: var(--cloudweb-snow);
  color: var(--cloudweb-ink-900);
  text-decoration: none;
}
.cw-sidenav a[aria-current="page"] {
  background: var(--cloudweb-ice);
  color: var(--cloudweb-primary-deep);
  font-weight: 600;
}
.cw-sidenav svg { width: 18px; height: 18px; flex: none; }

/* Toggle-Knopf der einklappbaren Sidebar (Apollo-R1 nutzt ihn im App-Shell). */
.cw-sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 0;
  border-radius: var(--cloudweb-radius-sm);
  background: transparent;
  color: var(--cloudweb-ink-500);
  cursor: pointer;
  transition: background var(--cloudweb-transition-fast), color var(--cloudweb-transition-fast);
}
.cw-sidebar-toggle:hover {
  background: var(--cloudweb-ice);
  color: var(--cloudweb-ink-900);
}
.cw-sidebar-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform var(--cloudweb-transition-base);
}

@media (max-width: 960px) {
  .cw-shell { grid-template-columns: 1fr; gap: var(--cloudweb-space-4); }
  /* R7 (Befund 1): dieselbe 1fr-Falle wie bei .cw-layout (R5) — die nackte
     1fr-Spur behält die min-content-Breite ihrer Kinder. Sidebar und
     Arbeitsfläche dürfen schrumpfen, breite Inhalte scrollen in ihrem
     eigenen Wrap statt die ganze Seite. */
  .cw-shell > * { min-width: 0; }
  .cw-sidebar { position: static; }
  .cw-sidebar-mandant { padding-left: 0; }
  .cw-sidenav { flex-direction: row; flex-wrap: wrap; }
}

/* ---------- Leads-Arbeitstabelle (Pflicht v2, Zeile 12) ---------- */
/* Apollo-Anatomie (Checkbox + Name-Link + Filter oben), cloudWEB-CI:
   flache Flächen, Haarlinien, keine Akzentbalken/Verläufe (Manual 11.1).
   Kernspalten passen bei 1280px ohne horizontales Clipping (Muster
   Baustein-9-Fix): engere Zellen, Nebeninfo als zweite Zeile in der Zelle. */
.cw-filterleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cloudweb-space-2);
  margin-bottom: var(--cloudweb-space-3);
}
.cw-filterleiste .cw-input[type="search"] { flex: 1 1 240px; min-width: 200px; }
.cw-filterleiste .cw-input,
.cw-filterleiste .cw-select {
  width: auto;
  font-size: var(--cloudweb-text-fine);
  padding: 8px 10px;
}
/* R7 (Befund 1): Selects dürfen schrumpfen — die intrinsische Options-
   Breite (Lauf-Select bis 354px) darf nie die Seite aufziehen. Der
   gewählte Options-Text kappt mit Ellipse, der volle Text steht in der
   aufgeklappten Liste. */
.cw-filterleiste .cw-select {
  padding-right: 30px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  text-overflow: ellipsis;
}

/* R7 (Befund 1): auf schmalen Viewports wird die Filterleiste ein
   vertikaler Stapel — jedes Feld volle Breite, nichts quetscht. */
@media (max-width: 560px) {
  .cw-filterleiste { flex-direction: column; align-items: stretch; }
  .cw-filterleiste .cw-input[type="search"] { flex-basis: auto; min-width: 0; }
}

.cw-aktionsleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cloudweb-space-2);
  padding: var(--cloudweb-space-2) var(--cloudweb-space-3);
  background: var(--cloudweb-snow);
  border: 1px solid var(--cloudweb-border-light);
  border-radius: var(--cloudweb-radius-sm);
  margin-bottom: var(--cloudweb-space-4);
}
.cw-aktions-status {
  font-size: var(--cloudweb-text-fine);
  color: var(--cloudweb-ink-500);
  margin-right: var(--cloudweb-space-2);
}
.cw-aktions-status strong { color: var(--cloudweb-ink-900); font-variant-numeric: tabular-nums; }
.cw-aktions-gruppe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cloudweb-space-2);
  margin-left: auto;
}
.cw-aktionsleiste .cw-input,
.cw-aktionsleiste .cw-select {
  width: auto;
  font-size: var(--cloudweb-text-fine);
  padding: 8px 10px;
}
.cw-aktionsleiste .cw-select { padding-right: 30px; }

.cw-leads-zaehler {
  font-size: var(--cloudweb-text-fine);
  color: var(--cloudweb-ink-500);
  margin: 0 0 var(--cloudweb-space-2);
}
.cw-leads-zaehler strong { color: var(--cloudweb-ink-900); font-variant-numeric: tabular-nums; }

/* Alle-Auswahl ueber Seitengrenzen (Gmail-Muster): Hinweis zwischen
   Steuerung und Tabelle - flache Tint-Flaeche wie jede .cw-note,
   kein Akzentbalken. Zahlen tabellarisch wie im Auswahl-Zaehler. */
.cw-alle-hinweis { margin: 0 0 var(--cloudweb-space-4); }
.cw-alle-hinweis strong { font-variant-numeric: tabular-nums; }
.cw-alle-hinweis a { font-weight: 600; }

.cw-table--leads th,
.cw-table--leads td { padding: 10px 8px; }
.cw-table--leads th { font-size: var(--cloudweb-text-fine); }
.cw-table--leads th.is-check,
.cw-table--leads td.is-check { width: 34px; padding-right: 2px; }
.cw-table--leads input[type="checkbox"] {
  width: 15px;
  height: 15px;
  display: block;
  /* R8: UA-Margin (3px/4px) weg — 8px Zell-Padding + 15px Kasten passen
     sonst nicht in die 34px-Spalte (gemessen: scrollWidth 38 > 34). */
  margin: 0;
  accent-color: var(--cloudweb-primary-dark); /* wie .cw-checkbox: Haken auf Primary wäre 2.97:1 */
  cursor: pointer;
}
/* Kopf-Checkbox auf Primary-Deep-Grund: helle Fläche, damit sie sichtbar bleibt */
.cw-table--leads thead input[type="checkbox"] { accent-color: var(--cloudweb-white); }
.cw-sort {
  color: var(--cloudweb-white);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.cw-sort:hover { color: var(--cloudweb-sky); text-decoration: underline; }
.cw-zeile-neben {
  display: block;
  font-size: var(--cloudweb-text-fine);
  color: var(--cloudweb-ink-500);
}
.cw-leer { color: var(--cloudweb-ink-300); }

/* Pipeline-Bausteine-Liste */
.cw-baustein-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cw-baustein {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--cloudweb-space-3);
  padding: var(--cloudweb-space-2) 0;
  border-bottom: 1px solid var(--cloudweb-surface);
  font-size: var(--cloudweb-text-caption);
}
.cw-baustein:last-child { border-bottom: none; }

@media (max-width: 960px) {
  .cw-layout { grid-template-columns: 1fr; }
}

/* ---------- Lead-Detail (Pflicht v2, Zeile 13) ----------
   Struktur über Weissraum und Haarlinien (Manual 7) — keine Akzentbalken,
   keine Verläufe, kein Glow (11.1). */
.cw-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--cloudweb-space-2);
  font-size: var(--cloudweb-text-caption);
  color: var(--cloudweb-ink-500);
  margin-bottom: var(--cloudweb-space-6);
}
.cw-breadcrumb a {
  color: var(--cloudweb-primary);
  text-decoration: none;
}
.cw-breadcrumb a:hover { text-decoration: underline; }
.cw-breadcrumb [aria-current="page"] { color: var(--cloudweb-ink-700); }

.cw-detail-kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--cloudweb-space-6);
  flex-wrap: wrap;
  margin-bottom: var(--cloudweb-space-8);
}
.cw-detail-kopf h1 { margin: 0 0 var(--cloudweb-space-2); }
.cw-detail-subline {
  font-size: var(--cloudweb-text-body-lg);
  color: var(--cloudweb-ink-700);
  margin-bottom: var(--cloudweb-space-2);
}
.cw-detail-meta {
  display: flex;
  align-items: center;
  gap: var(--cloudweb-space-3);
  flex-wrap: wrap;
  font-size: var(--cloudweb-text-caption);
  color: var(--cloudweb-ink-500);
}
.cw-detail-meta a { color: var(--cloudweb-primary); }
.cw-detail-aktionen {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--cloudweb-space-2);
  flex-wrap: wrap;
}
.cw-detail-aktionen form {
  display: flex;
  align-items: center;
  gap: var(--cloudweb-space-2);
}
.cw-detail-aktionen .cw-select,
.cw-detail-aktionen .cw-input { max-width: 220px; }

.cw-detail-grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: var(--cloudweb-space-6);
  align-items: start;
}
.cw-detail-belege {
  display: grid;
  gap: var(--cloudweb-space-6);
}
@media (max-width: 960px) {
  .cw-detail-grid { grid-template-columns: 1fr; }
}

/* Definitionsliste im Panel: Haarlinien zwischen den Zeilen, kein Kasten. */
.cw-dl {
  margin: 0;
  display: grid;
  grid-template-columns: 150px 1fr;
  column-gap: var(--cloudweb-space-4);
  font-size: var(--cloudweb-text-caption);
}
.cw-dl dt {
  color: var(--cloudweb-ink-500);
  font-weight: 600;
  padding: 10px 0;
  border-bottom: 1px solid var(--cloudweb-surface);
}
.cw-dl dd {
  margin: 0;
  color: var(--cloudweb-ink-700);
  padding: 10px 0;
  border-bottom: 1px solid var(--cloudweb-surface);
  overflow-wrap: anywhere;
}
.cw-dl dt:nth-last-of-type(1),
.cw-dl dd:last-of-type { border-bottom: none; }
.cw-dl a { color: var(--cloudweb-primary); }
.cw-dl-neben {
  display: block;
  font-size: var(--cloudweb-text-fine);
  color: var(--cloudweb-ink-500);
  margin-top: 2px;
}

/* ---------- Listen (Baustein 14, Pflicht v2 Zeile 14) ---------- */
/* Empty State nach der Anatomie des echten Apollo-Screens lists-leer.jpg
   (zentriert: Titel, 1 Satz Nutzen, klarer Anlege-Button) — cloudWEB-CI:
   keine Illustration, flaches Line-Icon in Ink-300, kein Verlauf, kein
   Glow, kein Akzentbalken (Manual 11.1). */
.cw-empty {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--cloudweb-space-12) var(--cloudweb-space-4);
  text-align: center;
}
.cw-empty svg {
  width: 40px;
  height: 40px;
  color: var(--cloudweb-ink-300);
  margin-bottom: var(--cloudweb-space-4);
}
.cw-empty h2 {
  font-size: var(--cloudweb-text-body-lg);
  margin: 0 0 var(--cloudweb-space-2);
}
.cw-empty p {
  color: var(--cloudweb-ink-500);
  font-size: var(--cloudweb-text-caption);
  margin: 0 0 var(--cloudweb-space-6);
}
.cw-empty-form {
  display: flex;
  gap: var(--cloudweb-space-2);
  justify-content: center;
  flex-wrap: wrap;
}
.cw-empty-form .cw-input { max-width: 240px; }
.cw-empty .cw-help { margin-top: var(--cloudweb-space-6); }
.cw-empty .cw-error { margin-top: var(--cloudweb-space-3); }

/* Kompakte Anlege-/Umbenennen-Zeile (Panel-Kopf der Übersicht, Detail) */
.cw-listen-anlegen {
  display: flex;
  gap: var(--cloudweb-space-2);
  align-items: center;
  flex-wrap: wrap;
}
.cw-listen-anlegen .cw-input {
  width: 220px;
  padding: 8px 10px;
  font-size: var(--cloudweb-text-caption);
}

/* ---------- Leads-Arbeitstabelle R2 (Kritiker-Befunde 2+3) ----------
   Additiv. Struktur über Weissraum und Haarlinien (Manual 7) — keine
   Akzentbalken, keine Verläufe, kein Glow (11.1). */

/* Ab 761px: kompakte Zeilen — 1 Zeile pro Lead, feste Spaltenbreiten
   (table-layout: fixed), Text-Überlauf als Ellipse; der volle Wert steckt
   im title-Attribut der Zelle bzw. im Lead-Detail. Nur die Arbeitstabelle
   (#leads-tabelle) — das Listen-Detail behält seine Anatomie. Unter 761px
   stapelt die Tabelle zu data-label-Karten (cw-table--stapel, R6); die
   min-width-Schranke hier verhindert, dass die nowrap/fixed-Regeln mit
   ihren #-Selektoren den Karten-Stapel überschreiben.

   Breiten-Map (R7, Befund 3 — Adress-Vorrang): die ECHTE Spaltenfolge
   seit Politur R3: Checkbox 34px (.is-check) | Firma (erbt den Rest) |
   Person | Adresse | Listen | Lauf | Zefix | Beleg. Die R6-Map gab
   Zefix/Beleg je 150px für das längste Badge «nicht gefunden» und
   opferte damit die Kernspalten (PLZ/Ort @1280 in 30/30 Zeilen
   ellipsiert, gemessen r7-breiten-messung). R7: die Tabellen-Badges
   tragen ehrliche Kurzlabels (belegt/vermutet/offen, Legende wortgleich
   im Spaltenkopf-Tooltip, voller Status im title jeder Zelle und im
   Lead-Detail) — Zefix/Beleg kommen mit 96/116px aus (längstes
   Kurzlabel «vermutet» mit ≥12px Luft, gemessen r7). Der frei werdende
   Platz geht an Firma und Adresse (das Produkt: der Kunde verschickt
   Kataloge an diese Postadressen). Firma- und Adress-Zelle brechen um
   statt zu kappen — wortwörtlich schlägt schön. min-width 720px: wird
   der Platz knapper, scrollt .cw-table-wrap horizontal statt zu kappen. */
@media (min-width: 761px) {
  #leads-tabelle .cw-table--leads {
    table-layout: fixed;
    width: 100%;
    min-width: 720px;
  }
  #leads-tabelle .cw-table--leads th,
  #leads-tabelle .cw-table--leads td {
    padding: 6px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Firma (2. Spalte) erbt den Rest — ~215px bei 1280px Viewport */
  #leads-tabelle .cw-table--leads th:nth-child(3) { width: 15%; }   /* Person */
  #leads-tabelle .cw-table--leads th:nth-child(4) { width: 17%; }   /* Adresse */
  #leads-tabelle .cw-table--leads th:nth-child(5) { width: 12%; }   /* Listen */
  #leads-tabelle .cw-table--leads th:nth-child(6) { width: 48px; }  /* Lauf «#1» */
  /* Apollo-R4: Zefix+Beleg zu EINER Quellen-Spalte zusammengelegt */
  #leads-tabelle .cw-table--leads th:nth-child(7) { width: 140px; } /* Quellen */
  #leads-tabelle .cw-table--leads td[colspan] { white-space: normal; }
  /* R8 (DIE REGEL): KEINE Kernangabe wird zugunsten einer anderen
     gekappt. Firma, Person und Adresse brechen um statt zu ellipsieren
     (overflow-wrap fängt auch lange Einzelwörter) — die Zeile darf dafür
     höher werden, Lesbarkeit schlägt Dichte. Ellipse bleibt nur den
     Nebenspalten Listen (Chips) und Lauf erlaubt. */
  #leads-tabelle .cw-table--leads td[data-label="Firma"],
  #leads-tabelle .cw-table--leads td[data-label="Person"],
  #leads-tabelle .cw-table--leads td[data-label="Adresse"] {
    white-space: normal;
    overflow-wrap: anywhere;
    /* Lange Einzelwörter («Unternehmensinhaber») trennen mit Strich
       (lang=de-CH) statt kommentarlos mitten im Wort zu brechen. */
    hyphens: auto;
  }
}

/* R6: unter 761px stapelt die Arbeitstabelle zu data-label-Karten —
   dasselbe Muster wie Lauf-Historie, Listen-Detail und Betreiber
   (cw-table--stapel, Regeln am Dateiende). Hier nur das Leads-Spezifikum:
   die Checkbox-Zelle verliert ihre 34px-Desktop-Breite und wird eine
   beschriftete Karten-Zeile («Auswahl»). */
@media (max-width: 760px) {
  .cw-table--leads td.is-check { width: auto; padding-right: 0; }
}

/* ---------- R8: Mobil-Steuerung + sichtbare Kurzlabel-Fussnote ----------
   Unter 761px verschwinden die Spaltenköpfe (Sortier-Links, Alle-Checkbox)
   im Karten-Stapel — Pflicht v2 Zeile 12 gilt aber auf allen Breiten:
   die Steuerung über dem Stapel trägt beides sichtbar. Ab 761px ist sie
   überflüssig (die Spaltenköpfe sind da) und bleibt ausgeblendet. */
.cw-mobil-steuer { display: none; }
@media (max-width: 760px) {
  .cw-mobil-steuer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--cloudweb-space-2) var(--cloudweb-space-3);
    margin: 0 0 var(--cloudweb-space-3);
    padding-bottom: var(--cloudweb-space-2);
    border-bottom: 1px solid var(--cloudweb-border);
  }
  .cw-mobil-alle {
    display: inline-flex;
    align-items: center;
    gap: var(--cloudweb-space-2);
    font-size: var(--cloudweb-text-caption);
    color: var(--cloudweb-ink-700);
    cursor: pointer;
  }
  .cw-mobil-sortform {
    display: flex;
    align-items: center;
    gap: var(--cloudweb-space-2);
    flex: 1 1 100%;
    min-width: 0;
  }
  .cw-mobil-sortform .cw-select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }
}

/* Kurzlabel-Legende als sichtbare Fussnote (R8, Befund 3) — nur dort, wo
   die Kurzlabels auch stehen (ab 761px); der Karten-Stapel darunter
   zeigt den vollen Status-Wortlaut und braucht keine Legende. */
.cw-tabellen-fussnote {
  margin: var(--cloudweb-space-2) 0 0;
  font-size: var(--cloudweb-text-fine);
  color: var(--cloudweb-ink-500);
}
@media (max-width: 760px) {
  .cw-tabellen-fussnote { display: none; }
}

/* Pager (Muster Apollo «1-25 of X») */
.cw-pager {
  display: flex;
  align-items: center;
  gap: var(--cloudweb-space-3);
  margin-top: var(--cloudweb-space-3);
  font-size: var(--cloudweb-text-fine);
  color: var(--cloudweb-ink-500);
}
.cw-pager-stand {
  color: var(--cloudweb-ink-900);
  font-variant-numeric: tabular-nums;
}
.cw-pager-knopf {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--cloudweb-border);
  border-radius: var(--cloudweb-radius-sm);
  color: var(--cloudweb-primary-dark);
  text-decoration: none;
}
a.cw-pager-knopf:hover {
  border-color: var(--cloudweb-primary-dark);
  background: var(--cloudweb-snow);
}
.cw-pager-knopf.is-inaktiv {
  color: var(--cloudweb-ink-300);
  border-color: var(--cloudweb-surface);
}
.cw-pager-seite { font-variant-numeric: tabular-nums; }

/* Auswahl-Status: «N ausgewählt, davon M sichtbar» */
.cw-aktions-status strong { font-variant-numeric: tabular-nums; }

/* ---------- Politur R3 (Befunde 1-5): Listen, Adresse, Beleg ----------
   Additiv. Struktur über Weissraum, Haarlinien und flache Tint-Flächen —
   keine Akzentbalken, keine Verläufe, kein Glow (Manual 11.1). */

/* Kernspalten der Arbeitstabelle: seit R6 gibt es genau EINE Breiten-Map —
   oben im min-width-Block (R2). Die zweite Map, die hier stand, beschrieb
   die R3-Spaltenfolge, liess aber Zefix/Beleg zu schmal für das längste
   Badge «nicht gefunden» (Kritiker R6: @1280 nur 3px Reserve, darunter
   hartes Kappen ohne Scroll). */

/* R8 (vorher R3, Befund 4): die Detailzeilen der Arbeitstabelle leben
   alle in umbruchfähigen Kernspalten (Branche unter Firma, Funktion
   unter Person, PLZ Ort unter Strasse) — sie brechen um statt zu
   kappen; der volle Wert bleibt zusätzlich im title. */
#leads-tabelle .cw-table--leads .cw-zeile-neben {
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Badges in Tabellenzellen: kompakteres Padding, damit «nicht gefunden»
   samt Herkunfts-Icon in die Spalte passt. */
.cw-table--leads .cw-badge { padding: 3px 6px; }

/* R7 (Befund 3): kompakte Tabellen-Badges. Ab 761px zeigt die Zelle das
   ehrliche Kurzlabel (belegt/vermutet/offen — Zuordnung wortgleich im
   Spaltenkopf-Tooltip, voller Status im title der Zelle). Im Karten-
   Stapel darunter steht der volle Status-Wortlaut, weil es dort keinen
   Hover für den title gibt. */
#leads-tabelle .cw-badge-voll { display: none; }
@media (max-width: 760px) {
  #leads-tabelle .cw-badge-kurz { display: none; }
  #leads-tabelle .cw-badge-voll { display: inline; }
}

/* Herkunfts-Icon im Badge (Befund 3): Zefix = Registergebäude,
   Beleg = Person mit Haken — unterscheidbar auf einen Blick. */
.cw-badge--quelle { gap: 4px; }
.cw-badge-icon { width: 12px; height: 12px; flex: none; }

/* Listen-Chips (Befund 1): flache Ice-Tint-Fläche, klickbar zur Liste. */
.cw-chip {
  display: inline-block;
  max-width: 100%;
  font-size: var(--cloudweb-text-micro);
  font-weight: 600;
  padding: 2px 8px;
  border: 1px solid var(--cloudweb-sky);
  border-radius: var(--cloudweb-radius-full);
  background: var(--cloudweb-ice);
  color: var(--cloudweb-primary-deep);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}
.cw-chip:hover {
  border-color: var(--cloudweb-primary-dark);
  color: var(--cloudweb-navy);
  text-decoration: none;
}
.cw-chip + .cw-chip { margin-left: 4px; }
.cw-lead-listen { margin: 0 0 var(--cloudweb-space-3); }
.cw-lead-listen .cw-chip { margin: 0 4px 4px 0; }

/* Kontakt-Indikatoren (Befund 2): stumme Icons, Titel-Text sagt Wert oder
   «nicht vorhanden» — bewusst KEINE Access-Knöpfe. Die Adress-Detailzeile
   ist ein Flex-Paar: PLZ Ort ist Kernangabe und bricht um statt zu
   kappen (R8), die Icons bleiben immer sichtbar (flex: none). */
.cw-adresse-neben {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cloudweb-space-1) var(--cloudweb-space-2);
}
.cw-adresse-ort {
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 0;
}
.cw-kontakt-inds {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
}
.cw-kontakt-ind { display: inline-flex; color: var(--cloudweb-ink-500); }
.cw-kontakt-ind svg { width: 12px; height: 12px; display: block; }
.cw-kontakt-ind.is-fehlt { color: var(--cloudweb-border); }

/* Listen-Übersicht (Befund 5): Direktaktionen pro Zeile in einer Reihe. */
.cw-listen-aktionen {
  display: flex;
  align-items: center;
  gap: var(--cloudweb-space-2);
  flex-wrap: wrap;
}
.cw-listen-aktionen form { margin: 0; }

/* ---------- Fix-Runde R4 (Befunde 3+4): Listen-Detail @700, Namen ----------
   Additiv. Struktur über Weissraum und Haarlinien (Manual 7) — keine
   Akzentbalken, keine Verläufe, kein Glow (11.1). */

/* Befund 4: lange Listennamen kappen mit Ellipse, der volle Name steht im
   title-Attribut. Inline-Block, damit die Kappung unabhängig vom
   Tabellen-Layout greift (Übersicht, Breadcrumb). */
.cw-name-ellipsis {
  display: inline-block;
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
/* Der Detail-Titel bricht statt zu clippen — 60 Zeichen bleiben lesbar. */
.cw-detail-kopf--liste h1 { overflow-wrap: anywhere; }

/* Befund 3, breite Ansicht: feste Spaltenbreiten wie die Arbeitstabelle —
   die 9 Spalten passen bei 1280px ohne horizontalen Scroll, Überlauf kappt
   als Ellipse, der volle Wert steht im title der Zelle. */
.cw-table--liste-detail { table-layout: fixed; width: 100%; }
.cw-table--liste-detail th,
.cw-table--liste-detail td {
  padding: 8px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Kopfzeile darf zweizeilig werden («Weitere Listen») statt zu kappen. */
.cw-table--liste-detail th { white-space: normal; }
/* R8 (DIE REGEL, auch hier): Kernangaben (Firma, Person, Ort, Branche,
   Badges) brechen um statt zu ellipsieren — Ellipse bleibt nur den
   Nebenspalten Lauf und Weitere Listen (Chips). */
.cw-table--liste-detail td[data-label="Firma"],
.cw-table--liste-detail td[data-label="Person"],
.cw-table--liste-detail td[data-label="Ort"],
.cw-table--liste-detail td[data-label="Branche"],
.cw-table--liste-detail td[data-label="Zefix"],
.cw-table--liste-detail td[data-label="Beleg"] {
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}
/* Voll-Wortlaut-Badges («nicht gefunden») brechen in der Zelle um,
   statt über die Spaltenkante zu laufen. */
.cw-table--liste-detail .cw-badge { white-space: normal; }
.cw-table--liste-detail .cw-zeile-neben {
  white-space: normal;
  overflow-wrap: anywhere;
}
/* Die Nebenspalte Lauf behält ihre einzeilige Ellipse (voller Wert im title). */
.cw-table--liste-detail td[data-label="Lauf"] .cw-zeile-neben {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cw-table--liste-detail th:nth-child(1) { width: 15%; }   /* Firma */
.cw-table--liste-detail th:nth-child(2) { width: 11.5%; } /* Person */
.cw-table--liste-detail th:nth-child(3) { width: 10%; }   /* Ort */
.cw-table--liste-detail th:nth-child(4) { width: 11%; }   /* Branche */
.cw-table--liste-detail th:nth-child(5) { width: 8%; }    /* Lauf */
.cw-table--liste-detail th:nth-child(6) { width: 12.5%; } /* Zefix */
.cw-table--liste-detail th:nth-child(7) { width: 12.5%; } /* Beleg */
.cw-table--liste-detail th:nth-child(8) { width: 8.5%; }  /* Weitere Listen */
/* Aktion (9. Spalte) erbt den Rest — der «Entfernen»-Knopf passt */
.cw-table--liste-detail td[colspan] { white-space: normal; }

/* Befund 3: unter 760px stapelt das Listen-Detail zu Karten — dasselbe
   data-label-Muster wie die Lauf-Historie. «Weitere Listen» und «Aktion»
   sind beschriftete Karten-Zeilen, nichts liegt hinter horizontalem Scroll. */
@media (max-width: 760px) {
  .cw-table--liste-detail,
  .cw-table--liste-detail tbody,
  .cw-table--liste-detail tr { display: block; }
  .cw-table--liste-detail thead { display: none; }
  .cw-table--liste-detail tr {
    padding: var(--cloudweb-space-2) 0;
    border-bottom: 1px solid var(--cloudweb-border);
  }
  .cw-table--liste-detail tr:last-child { border-bottom: 0; }
  .cw-table--liste-detail td {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
    gap: var(--cloudweb-space-1) var(--cloudweb-space-3);
    padding: 3px 0;
    text-align: right;
    border: 0;
    white-space: normal;
  }
  .cw-table--liste-detail td::before {
    content: attr(data-label);
    margin-right: auto;
    font-size: var(--cloudweb-text-fine);
    font-weight: 600;
    color: var(--cloudweb-ink-500);
    text-align: left;
  }
  /* Leerzustand (colspan) bleibt eine ganze Zeile ohne Label. */
  .cw-table--liste-detail td[colspan] { display: block; text-align: left; }
  .cw-table--liste-detail td[colspan]::before { content: none; }

  /* Kopf-Aktionen umbrechen: volle Breite statt Schulter an Schulter —
     bewusst nur im Listen-Detail (--liste), das Lead-Detail bleibt wie es ist. */
  .cw-detail-kopf--liste .cw-detail-aktionen {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .cw-detail-kopf--liste .cw-detail-aktionen form { display: block; }
  .cw-detail-kopf--liste .cw-detail-aktionen .cw-btn { width: 100%; }

  /* Umbenennen-Zeile: das Eingabefeld nimmt die verfügbare Breite,
     statt mit fixen 220px aus dem Panel zu laufen. */
  .cw-listen-anlegen .cw-input { flex: 1 1 160px; width: auto; min-width: 0; }
}

/* ---------- Betreiber-Sicht ohne Seiten-Scroll (Fix-Runde R5) ---------- */
/* Befund: @700px ragte die Mandanten-Tabelle 111px über den Viewport.
   Ursache: unter 960px wird .cw-layout zu «1fr» — die nackte 1fr-Spur
   behält die automatische Mindestbreite (min-content) der Panels, die
   Desktop-Spur ist darum bewusst minmax(0, 1fr) (Zeile ~581). Gleiches
   Verhalten für die Einspalten-Stufe: Panels dürfen schrumpfen, breite
   Tabellen scrollen dann in .cw-table-wrap statt die ganze Seite. */
@media (max-width: 960px) {
  .cw-layout > * { min-width: 0; }
}

/* Unter 760px stapeln die Betreiber-Tabellen (Mandanten, Budget-Ledger)
   zu Karten — dasselbe data-label-Muster wie Lauf-Historie und
   Listen-Detail: jede Zelle trägt ihr Label selbst, nichts liegt hinter
   horizontalem Scroll, kein Fade (Manual 11.1). */
@media (max-width: 760px) {
  .cw-table--stapel,
  .cw-table--stapel tbody,
  .cw-table--stapel tr { display: block; }
  .cw-table--stapel thead { display: none; }
  .cw-table--stapel tr {
    padding: var(--cloudweb-space-2) 0;
    border-bottom: 1px solid var(--cloudweb-border);
  }
  .cw-table--stapel tr:last-child { border-bottom: 0; }
  .cw-table--stapel td {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
    gap: var(--cloudweb-space-1) var(--cloudweb-space-3);
    padding: 3px 0;
    text-align: right;
    border: 0;
    white-space: normal;
  }
  .cw-table--stapel td::before {
    content: attr(data-label);
    margin-right: auto;
    font-size: var(--cloudweb-text-fine);
    font-weight: 600;
    color: var(--cloudweb-ink-500);
    text-align: left;
  }
  /* Leerzustand (colspan) bleibt eine ganze Zeile ohne Label. */
  .cw-table--stapel td[colspan] { display: block; text-align: left; }
  .cw-table--stapel td[colspan]::before { content: none; }
}

/* ---------- Apollo-R1: Vollhöhen-App-Shell (Redesign 2026-08-17) ----------
   Anatomie nach app.apollo.io (_shots/apollo_echt/): Vollhöhen-Sidebar links,
   Inhalt vollflächig ohne Container-Box, Trennung durch Linien statt Karten.
   Farben/Schrift bleiben cloudWEB; flache Flächen, kein Balken, kein Verlauf. */
.cw-app {
  display: flex;
  min-height: 100vh;
  background: var(--cloudweb-white);
}
.cw-app-sidebar {
  width: 232px;
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--cloudweb-bg);
  border-right: 1px solid var(--cloudweb-border-light);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width var(--cloudweb-transition-base);
}
.cw-app--zu .cw-app-sidebar { width: 60px; }
.cw-app-sidebar-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cloudweb-space-2);
  padding: 14px 10px 10px 16px;
}
.cw-app--zu .cw-app-sidebar-kopf {
  justify-content: center;
  padding-left: 10px;
}
.cw-app-brand {
  display: flex;
  align-items: center;
  gap: var(--cloudweb-space-2);
  min-width: 0;
  text-decoration: none;
}
.cw-app-brand:hover { text-decoration: none; }
.cw-app-brand img { height: 24px; flex: none; }
.cw-app-brand-name {
  font-family: var(--cloudweb-font-mono);
  font-size: var(--cloudweb-text-nano);
  letter-spacing: var(--cloudweb-tracking-caps);
  text-transform: uppercase;
  color: var(--cloudweb-primary-deep);
  white-space: nowrap;
}
.cw-app--zu .cw-app-brand { display: none; }
.cw-app--zu .cw-sidebar-toggle svg { transform: rotate(180deg); }
.cw-app .cw-sidebar-mandant {
  padding: var(--cloudweb-space-2) 16px var(--cloudweb-space-3);
  margin: 0 0 var(--cloudweb-space-2);
  border-bottom: 1px solid var(--cloudweb-border-light);
}
.cw-app--zu .cw-sidebar-mandant { display: none; }
.cw-app-nav {
  flex: 1;
  padding: var(--cloudweb-space-1) var(--cloudweb-space-2);
}
.cw-app .cw-sidenav a { color: var(--cloudweb-ink-700); }
.cw-app .cw-sidenav a:hover { background: var(--cloudweb-ice); }
.cw-app .cw-sidenav a[aria-current="page"] {
  background: var(--cloudweb-ice);
  color: var(--cloudweb-primary-deep);
}
.cw-app--zu .cw-sidenav-text { display: none; }
.cw-app--zu .cw-sidenav a {
  justify-content: center;
  padding: 10px;
}
.cw-app-sidebar-fuss {
  padding: var(--cloudweb-space-3) 16px;
  border-top: 1px solid var(--cloudweb-border-light);
  white-space: nowrap;
}
.cw-app--zu .cw-app-sidebar-fuss { display: none; }

.cw-app-inhalt {
  flex: 1;
  min-width: 0;
}
.cw-app-inhalt > .cw-arbeitsflaeche {
  padding: 0 var(--cloudweb-space-6) var(--cloudweb-space-8);
}
/* Kompakter Arbeits-Kopf statt grossem Seiten-H1 (Apollo: «Find people»-Zeile) */
.cw-app .cw-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cloudweb-space-4);
  margin: 0 calc(-1 * var(--cloudweb-space-6)) var(--cloudweb-space-6);
  padding: 12px var(--cloudweb-space-6);
  border-bottom: 1px solid var(--cloudweb-border-light);
}
.cw-app .cw-page-head h1 {
  font-size: var(--cloudweb-text-body-lg);
  line-height: var(--cloudweb-leading-snug);
  margin: 0;
}
.cw-app .cw-page-head .cw-kicker { display: none; }

@media (max-width: 960px) {
  /* Mobil: Sidebar als kompakte Kopfzeile, Einklappen deaktiviert. */
  .cw-app { display: block; }
  .cw-app-sidebar,
  .cw-app--zu .cw-app-sidebar {
    position: static;
    width: auto;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--cloudweb-border-light);
    overflow: visible;
  }
  .cw-app--zu .cw-app-brand { display: flex; }
  .cw-sidebar-toggle { display: none; }
  .cw-app .cw-sidebar-mandant,
  .cw-app-sidebar-fuss { display: none; }
  .cw-app-nav { padding: 0 var(--cloudweb-space-2) var(--cloudweb-space-2); }
  .cw-app .cw-sidenav { flex-direction: row; flex-wrap: wrap; }
  .cw-app--zu .cw-sidenav-text { display: inline; }
  .cw-app--zu .cw-sidenav a { justify-content: flex-start; padding: 10px 12px; }
  .cw-app-inhalt > .cw-arbeitsflaeche { padding: 0 var(--cloudweb-space-4) var(--cloudweb-space-6); }
  .cw-app .cw-page-head {
    margin: 0 calc(-1 * var(--cloudweb-space-4)) var(--cloudweb-space-4);
    padding: 10px var(--cloudweb-space-4);
  }
}

/* ---------- Apollo-R2: Leads-Werkbank vollflächig (Redesign 2026-08-17) ----
   Die Arbeitstabelle verlässt die Karten-Box: Toolbar, Auswahl-Leiste und
   Tabelle laufen über die volle Inhaltsbreite, getrennt durch Haarlinien.
   Tabellen-Header hell (Sentence-Case, Caps-Diät Manual 4.3 bleibt). */
.cw-app .cw-arbeitsflaeche:has(> .cw-werkbank) .cw-page-head { margin-bottom: 0; }
.cw-app .cw-werkbank .cw-filterleiste {
  margin: 0 calc(-1 * var(--cloudweb-space-6));
  padding: var(--cloudweb-space-2) var(--cloudweb-space-6);
  border-bottom: 1px solid var(--cloudweb-border-light);
}
.cw-app .cw-werkbank .cw-aktionsleiste {
  margin: 0 calc(-1 * var(--cloudweb-space-6));
  padding: var(--cloudweb-space-2) var(--cloudweb-space-6);
  background: var(--cloudweb-bg);
  border: 0;
  border-bottom: 1px solid var(--cloudweb-border-light);
  border-radius: 0;
}
.cw-app .cw-werkbank .cw-leads-zaehler {
  margin: var(--cloudweb-space-3) 0 var(--cloudweb-space-2);
}
.cw-app .cw-werkbank .cw-table-wrap {
  margin: 0 calc(-1 * var(--cloudweb-space-6));
}
.cw-app .cw-werkbank .cw-table th:first-child,
.cw-app .cw-werkbank .cw-table td:first-child { padding-left: var(--cloudweb-space-6); }
.cw-app .cw-werkbank .cw-table th:last-child,
.cw-app .cw-werkbank .cw-table td:last-child { padding-right: var(--cloudweb-space-6); }
.cw-app .cw-werkbank .cw-table thead { background: var(--cloudweb-white); }
.cw-app .cw-werkbank .cw-table th {
  color: var(--cloudweb-ink-500);
  font-weight: 600;
  border-bottom: 1px solid var(--cloudweb-border);
  padding-top: 8px;
  padding-bottom: 8px;
}
.cw-app .cw-werkbank .cw-table--leads th.is-check,
.cw-app .cw-werkbank .cw-table--leads td.is-check {
  width: calc(var(--cloudweb-space-6) + 20px);
}
.cw-app .cw-werkbank .cw-table--leads thead input[type="checkbox"] {
  accent-color: var(--cloudweb-primary-dark);
}
.cw-app .cw-werkbank .cw-sort { color: var(--cloudweb-ink-500); }
.cw-app .cw-werkbank .cw-sort:hover { color: var(--cloudweb-ink-900); text-decoration: underline; }
.cw-app .cw-werkbank .cw-table td { border-bottom: 1px solid var(--cloudweb-border-light); }
.cw-app .cw-werkbank .cw-badge { padding: 2px 8px; }
.cw-app .cw-werkbank .cw-pager {
  position: sticky;
  bottom: 0;
  background: var(--cloudweb-white);
  border-top: 1px solid var(--cloudweb-border-light);
  margin: 0 calc(-1 * var(--cloudweb-space-6));
  padding: var(--cloudweb-space-2) var(--cloudweb-space-6);
}
@media (max-width: 960px) {
  .cw-app .cw-werkbank .cw-filterleiste,
  .cw-app .cw-werkbank .cw-aktionsleiste,
  .cw-app .cw-werkbank .cw-table-wrap,
  .cw-app .cw-werkbank .cw-pager {
    margin-left: calc(-1 * var(--cloudweb-space-4));
    margin-right: calc(-1 * var(--cloudweb-space-4));
    padding-left: var(--cloudweb-space-4);
    padding-right: var(--cloudweb-space-4);
  }
  .cw-app .cw-werkbank .cw-table-wrap { padding-left: 0; padding-right: 0; }
  .cw-app .cw-werkbank .cw-table th:first-child,
  .cw-app .cw-werkbank .cw-table td:first-child { padding-left: var(--cloudweb-space-4); }
  .cw-app .cw-werkbank .cw-table th:last-child,
  .cw-app .cw-werkbank .cw-table td:last-child { padding-right: var(--cloudweb-space-4); }
}

/* ---------- Apollo-R3: Panels app-weit entboxt (Redesign 2026-08-17) ----
   Im App-Shell verlieren weisse Panels ihre Karten-Box: Struktur kommt aus
   Haarlinien und Weissraum. Tint-Panels (Hochrechnung, Vorschlag) bleiben
   flache Farbflaechen ohne Rahmen — wie Apollos graue Quick-Filter-Box. */
.cw-app .cw-panel {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}
.cw-app .cw-panel--tint,
.cw-app .cw-panel--muted {
  border-radius: var(--cloudweb-radius-md);
  padding: var(--cloudweb-space-4) var(--cloudweb-space-6);
}
.cw-app .cw-panel--tint { background: var(--cloudweb-ice); }
.cw-app .cw-panel--muted { background: var(--cloudweb-surface); }
.cw-app .cw-panel-head { border-bottom-color: var(--cloudweb-border-light); }
.cw-app .cw-panel-title { font-size: var(--cloudweb-text-body); }
/* Seitenspalte: Blöcke durch Haarlinien getrennt statt einzeln umrandet */
.cw-app .cw-seite > .cw-panel + .cw-panel {
  border-top: 1px solid var(--cloudweb-border-light);
  padding-top: var(--cloudweb-space-4);
}
.cw-app .cw-seite > .cw-panel--tint + .cw-panel,
.cw-app .cw-seite > .cw-panel + .cw-panel--tint {
  border-top: 0;
  padding-top: var(--cloudweb-space-4);
}

/* ---------- Apollo-R4: AI-Suche als zentrierter Einstieg ----------
   Leerer Zustand wie Apollos «Use AI to find prospects»: eine ruhige,
   zentrierte Prompt-Flaeche statt Formular-Karte links oben. */
.cw-app .cw-ai-mitte {
  display: block;
  max-width: 760px;
  margin: 9vh auto 0;
}
.cw-ai-mitte .cw-panel-head {
  border-bottom: 0;
  justify-content: center;
  margin-bottom: var(--cloudweb-space-2);
}
.cw-ai-mitte .cw-panel-title {
  font-size: var(--cloudweb-text-lead);
  text-align: center;
}
.cw-ai-mitte .cw-label { display: none; }
.cw-ai-mitte .cw-textarea {
  font-size: var(--cloudweb-text-body);
  padding: 14px 16px;
  border-radius: var(--cloudweb-radius-md);
}
.cw-ai-mitte .cw-help { text-align: center; }
.cw-ai-mitte .cw-form-actions { justify-content: center; }

/* ---------- Apollo-R2b: Dichte + stille Quell-Status ----------
   Kritiker-Befund Runde 1: Badge-Wand («belegt» überall gruen) = Rauschen.
   Normalzustand still, Farbe nur fuer Abweichungen; Zeilen straffer;
   Toolbar einzeilig ab breiten Viewports. */
.cw-quelle-still {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--cloudweb-ink-500);
  font-size: var(--cloudweb-text-micro);
  white-space: nowrap;
}
.cw-quelle-still .cw-badge-icon { color: var(--cloudweb-ink-300); }
.cw-app .cw-werkbank .cw-table--leads th,
.cw-app .cw-werkbank .cw-table--leads td {
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: var(--cloudweb-leading-snug);
}
.cw-app .cw-werkbank .cw-zeile-neben { font-size: var(--cloudweb-text-micro); }
.cw-app .cw-werkbank .cw-chip { max-width: 150px; }
@media (min-width: 1280px) {
  .cw-app .cw-werkbank .cw-filterleiste { flex-wrap: nowrap; }
  .cw-app .cw-werkbank .cw-filterleiste .cw-input[type="search"] {
    flex: 1 1 180px;
    min-width: 150px;
  }
}

/* ---------- Apollo-R5: heller Tabellenkopf app-weit ----------
   Eine Tabellensprache in der ganzen App: heller Kopf, Sentence-Case
   (Caps-Diaet Manual 4.3), Haarlinien statt Farbflaeche. */
.cw-app .cw-table thead { background: var(--cloudweb-white); }
.cw-app .cw-table th {
  color: var(--cloudweb-ink-500);
  font-weight: 600;
  border-bottom: 1px solid var(--cloudweb-border);
}
.cw-app .cw-table td { border-bottom: 1px solid var(--cloudweb-border-light); }
.cw-app .cw-table thead input[type="checkbox"] { accent-color: var(--cloudweb-primary-dark); }

/* ---------- Apollo-R6: neutrale Datenzellen + kompakte Filter-Chips ----------
   Kritiker-Befund Runde 2: Hyperlink-Blau als Datenfarbe wirkt datiert.
   Daten in Ink mit Gewichts-Hierarchie; Blau nur noch fuer Aktionen/Status.
   Filterleiste als kompakte Chip-Controls. */
.cw-app .cw-werkbank .cw-lead-firma {
  color: var(--cloudweb-ink-900);
  font-weight: 600;
  text-decoration: none;
}
.cw-app .cw-werkbank .cw-lead-firma:hover {
  color: var(--cloudweb-primary-deep);
  text-decoration: underline;
}
.cw-app .cw-werkbank .cw-chip {
  background: var(--cloudweb-surface);
  color: var(--cloudweb-ink-700);
  border: 0;
}
.cw-app .cw-werkbank .cw-chip:hover {
  background: var(--cloudweb-ice);
  color: var(--cloudweb-primary-deep);
}
.cw-app .cw-werkbank .cw-filterleiste .cw-input,
.cw-app .cw-werkbank .cw-filterleiste .cw-select {
  padding: 5px 9px;
  font-size: var(--cloudweb-text-fine);
  border-color: var(--cloudweb-border-light);
  border-radius: var(--cloudweb-radius-sm);
  background-color: var(--cloudweb-white);
}
.cw-app .cw-werkbank .cw-filterleiste .cw-select { padding-right: 26px; }
.cw-app .cw-werkbank .cw-filterleiste .cw-btn {
  padding: 5px 12px;
  font-size: var(--cloudweb-text-fine);
}
.cw-app .cw-werkbank .cw-aktionsleiste .cw-btn,
.cw-app .cw-werkbank .cw-aktionsleiste .cw-input,
.cw-app .cw-werkbank .cw-aktionsleiste .cw-select {
  padding: 5px 10px;
  font-size: var(--cloudweb-text-fine);
}
.cw-app .cw-werkbank .cw-aktionsleiste .cw-select { padding-right: 26px; }
/* [hidden] gewinnt gegen display:flex — sonst bleibt die Leiste sichtbar. */
.cw-aktionsleiste[hidden] { display: none; }

/* ---------- Apollo-R7: einheitliches Kontroll-Raster + stabile Zeilen ----------
   Kritiker-Befund Runde 3: native Dropdowns in willkuerlichen Hoehen/Breiten,
   springende Zeilenhoehen, gestutzte Chips. Alle Toolbar-Controls exakt 32px,
   Nebenzeilen einzeilig mit Ellipse (voller Text im title). */
.cw-app .cw-werkbank .cw-filterleiste .cw-input,
.cw-app .cw-werkbank .cw-filterleiste .cw-select,
.cw-app .cw-werkbank .cw-filterleiste .cw-btn,
.cw-app .cw-werkbank .cw-aktionsleiste .cw-input,
.cw-app .cw-werkbank .cw-aktionsleiste .cw-select,
.cw-app .cw-werkbank .cw-aktionsleiste .cw-btn {
  height: 32px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 30px;
}
.cw-app .cw-werkbank .cw-filterleiste .cw-btn,
.cw-app .cw-werkbank .cw-aktionsleiste .cw-btn {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.cw-app .cw-werkbank .cw-filterleiste .cw-select { max-width: 170px; }
.cw-app .cw-werkbank .cw-zeile-neben {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
.cw-app .cw-werkbank .cw-chip { max-width: 180px; }
.cw-app .cw-werkbank .cw-table--leads td.is-quellen { white-space: nowrap; }
.cw-app .cw-werkbank .cw-table--leads td.is-quellen .cw-quelle-still + .cw-quelle-still,
.cw-app .cw-werkbank .cw-table--leads td.is-quellen .cw-badge + .cw-quelle-still,
.cw-app .cw-werkbank .cw-table--leads td.is-quellen .cw-quelle-still + .cw-badge {
  margin-left: 6px;
}
/* Runde 4 ersetzt den R8-Umbruch am Desktop: Nebenzeilen einzeilig mit
   Ellipse (stabile Zeilenhoehen), voller Text bleibt im title. Im
   Karten-Stapel (<761px) bricht die Nebenzeile weiterhin um. */
@media (min-width: 761px) {
  #leads-tabelle .cw-table--leads .cw-zeile-neben {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
  }
}

/* ---------- Apollo-R8: Filter-Chips statt Formular-Selects ----------
   Kritiker-Befund Runde 4: umrandete Standard-Selects + gefuellter Button
   wirken wie ein Formular. Filter als flache Chips (Flaeche statt Rahmen),
   dezenter Chevron, Kopfzeile typografisch abgesetzt (ohne Caps,
   Caps-Diaet Manual 4.3). Der Filtern-Knopf bleibt nur ohne JS sichtbar. */
.cw-app .cw-werkbank .cw-filterleiste .cw-select {
  border: 0;
  background-color: var(--cloudweb-surface);
  border-radius: var(--cloudweb-radius-full);
  color: var(--cloudweb-ink-700);
  font-weight: 500;
  padding-left: 12px;
  padding-right: 26px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 12 8'%3E%3Cpath fill='%234A5568' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-position: right 10px center;
}
.cw-app .cw-werkbank .cw-filterleiste .cw-select:hover { background-color: var(--cloudweb-ice); }
.cw-app .cw-werkbank .cw-filterleiste .cw-input[type="search"] {
  border-radius: var(--cloudweb-radius-full);
  padding-left: 14px;
}
html.js .cw-app .cw-werkbank .cw-filterleiste .cw-btn { display: none; }
.cw-app .cw-werkbank .cw-table th {
  font-size: var(--cloudweb-text-fine);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--cloudweb-ink-500);
}
.cw-app .cw-werkbank .cw-table--leads th:last-child { min-width: 116px; }
.cw-app .cw-werkbank .cw-chip { max-width: 220px; }
/* Quellen-Spalte darf nie am Tabellenrand kappen */
.cw-app .cw-werkbank .cw-table--leads th.is-quellen-kopf,
.cw-app .cw-werkbank .cw-table--leads td.is-quellen { min-width: 136px; }
/* table-layout:fixed ignoriert min-width — Spaltenbreite explizit am Kopf */
.cw-app .cw-werkbank .cw-table--leads thead th:last-child { width: 140px; }

/* ---------- Apollo-R9: Treffer-Segmente + neutrale Datenfarbe ----------
   Segment-Tabs (flach, aktive Flaeche weiss auf Grau, keine Schatten) und
   Datenzellen in Ink statt slate-blau wirkendem Zwischenton. */
.cw-segmente {
  display: inline-flex;
  gap: 2px;
  margin: var(--cloudweb-space-3) 0 0;
  padding: 2px;
  background: var(--cloudweb-surface);
  border-radius: var(--cloudweb-radius-md);
}
.cw-segmente a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: var(--cloudweb-text-fine);
  color: var(--cloudweb-ink-500);
  text-decoration: none;
}
.cw-segmente a:hover { color: var(--cloudweb-ink-900); text-decoration: none; }
.cw-segmente a[aria-current] {
  background: var(--cloudweb-white);
  color: var(--cloudweb-ink-900);
  font-weight: 600;
}
.cw-segment-zahl {
  font-family: var(--cloudweb-font-mono);
  font-size: var(--cloudweb-text-nano);
  color: var(--cloudweb-ink-300);
  font-variant-numeric: tabular-nums;
}
.cw-app .cw-werkbank .cw-table td { color: var(--cloudweb-ink-900); }

/* ---------- Apollo-R10: Prompt-Bar, Beispiel-Chips, Land-Segmente ----------
   Kritiker-Befunde P3/P4: nacktes Textarea mit Resize-Griff und Radios wirken
   nach Formular-Altbau. Prompt als ruhige Flaeche, Beispiele als klickbare
   Chips (fuellen das Feld), Land als flacher Segment-Schalter (Radios bleiben
   im DOM — gleiche Semantik, gleiche Tests). */
.cw-prompt {
  resize: none;
  border-radius: var(--cloudweb-radius-lg);
  padding: 14px 16px;
  font-size: var(--cloudweb-text-body);
  line-height: var(--cloudweb-leading-normal);
}
.cw-ai-beispiele {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cloudweb-space-2);
  margin: calc(-1 * var(--cloudweb-space-2)) 0 var(--cloudweb-space-4);
}
.cw-ai-beispiele .cw-chip {
  border: 0;
  cursor: pointer;
  font-family: var(--cloudweb-font-body);
  background: var(--cloudweb-surface);
  color: var(--cloudweb-ink-700);
}
.cw-ai-beispiele .cw-chip:hover {
  background: var(--cloudweb-ice);
  color: var(--cloudweb-primary-deep);
}
.cw-ai-mitte .cw-form-actions {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.cw-segmente--feld label.cw-radio {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 6px;
  font-size: var(--cloudweb-text-caption);
  color: var(--cloudweb-ink-500);
  cursor: pointer;
  margin: 0;
}
.cw-segmente--feld label.cw-radio:has(input:checked) {
  background: var(--cloudweb-white);
  color: var(--cloudweb-ink-900);
  font-weight: 600;
}
.cw-segmente--feld label.cw-radio:has(input:focus-visible) {
  outline: 2px solid var(--cloudweb-primary);
  outline-offset: 1px;
}
.cw-segmente--feld input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}
/* AI-Einstieg optisch zentriert statt im oberen Drittel schwebend */
.cw-app .cw-ai-mitte { margin-top: 16vh; }

/* ---------- Verrechnung (Kunde-zahlt-selbst, 2026-08-18) ----------
   Kachel-Zeile wie Apollo-Usage-Karten: flache Flaechen, Zahl gross,
   kein Balken, kein Verlauf. */
.cw-verrechnung-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--cloudweb-space-4);
  margin-bottom: var(--cloudweb-space-8);
}
.cw-verrechnung-kachel {
  display: flex;
  flex-direction: column;
  gap: var(--cloudweb-space-2);
  padding: var(--cloudweb-space-4) var(--cloudweb-space-6);
}
.cw-verrechnung-kachel:not(.cw-panel--tint) {
  border: 1px solid var(--cloudweb-border-light);
  border-radius: var(--cloudweb-radius-md);
}
.cw-verrechnung-monat { margin-bottom: var(--cloudweb-space-8); }
/* Betreiber-Sidebar: Mandanten-Untergruppe leicht abgesetzt */
.cw-app-untergruppe { margin-top: var(--cloudweb-space-3); border-top: 1px solid var(--cloudweb-border-light); padding-top: var(--cloudweb-space-3); }
/* Verrechnung: Primaer-Betonung wie in der Leads-Tabelle */
.cw-zelle-primaer { display: block; font-weight: 600; color: var(--cloudweb-ink-900); }

/* ---------- Login (Anmeldung, 2026-08-18) ----------
   Zentrierte, ruhige Anmelde-Flaeche: flache weisse Kachel auf Snow,
   Haarlinien-Rahmen, kein Verlauf, kein Glow (Manual 11.1). */
.cw-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cloudweb-bg);
  padding: var(--cloudweb-space-6);
}
.cw-login-buehne {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: var(--cloudweb-space-4);
}
.cw-login-kachel {
  background: var(--cloudweb-white);
  border: 1px solid var(--cloudweb-border-light);
  border-radius: var(--cloudweb-radius-lg);
  padding: var(--cloudweb-space-8) var(--cloudweb-space-8) var(--cloudweb-space-6);
  display: flex;
  flex-direction: column;
}
.cw-login-brand {
  display: flex;
  align-items: center;
  gap: var(--cloudweb-space-2);
  text-decoration: none;
  margin-bottom: var(--cloudweb-space-6);
}
.cw-login-brand img { height: 26px; }
.cw-login-app {
  font-family: var(--cloudweb-font-mono);
  font-size: var(--cloudweb-text-nano);
  letter-spacing: var(--cloudweb-tracking-caps);
  text-transform: uppercase;
  color: var(--cloudweb-primary-deep);
}
.cw-login-titel {
  font-family: var(--cloudweb-font-display);
  font-size: var(--cloudweb-text-sm);
  line-height: var(--cloudweb-leading-tight);
  color: var(--cloudweb-ink-900);
  margin: 0 0 var(--cloudweb-space-1);
}
.cw-login-untertitel {
  font-size: var(--cloudweb-text-caption);
  color: var(--cloudweb-ink-500);
  margin: 0 0 var(--cloudweb-space-6);
}
.cw-login-fehler { margin-bottom: var(--cloudweb-space-4); }
.cw-login-form { display: flex; flex-direction: column; gap: var(--cloudweb-space-2); }
.cw-login-feld {
  height: 44px;
  font-size: var(--cloudweb-text-body);
  border-radius: var(--cloudweb-radius-md);
}
.cw-login-knopf {
  margin-top: var(--cloudweb-space-3);
  height: 44px;
  font-size: var(--cloudweb-text-body);
  justify-content: center;
}
.cw-login-fuss {
  text-align: center;
  font-size: var(--cloudweb-text-fine);
  color: var(--cloudweb-ink-300);
  margin: 0;
}
/* Login Runde 2: Feld mit Auge-Toggle, deutlicher Fokus-Ring, Balance */
.cw-login-kachel { padding: var(--cloudweb-space-6) var(--cloudweb-space-8); }
.cw-login-brand { margin-top: var(--cloudweb-space-2); }
.cw-login-feldzeile { position: relative; }
.cw-login-feldzeile .cw-login-feld { width: 100%; padding-right: 44px; }
.cw-login-feld:focus {
  border-color: var(--cloudweb-primary);
  box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.18);
  outline: none;
}
.cw-login-auge {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: var(--cloudweb-radius-sm);
  background: transparent;
  color: var(--cloudweb-ink-300);
  cursor: pointer;
}
.cw-login-auge:hover { color: var(--cloudweb-ink-700); background: var(--cloudweb-snow); }
.cw-login-auge.is-offen { color: var(--cloudweb-primary-deep); }
.cw-login-auge svg { width: 18px; height: 18px; }
.cw-login-hilfe {
  margin: var(--cloudweb-space-4) 0 0;
  font-size: var(--cloudweb-text-fine);
  color: var(--cloudweb-ink-500);
}
/* Login Runde 3: ein Radius fuer Feld und Knopf, praesenterer Default-Zustand */
.cw-login-feld { border-color: var(--cloudweb-border); }
.cw-login-knopf { border-radius: var(--cloudweb-radius-md); }
.cw-login-fuss { line-height: var(--cloudweb-leading-normal); }
.cw-login-fuss a { color: var(--cloudweb-ink-500); }
/* Fusszeile bricht nie mitten im Satz um */
.cw-login-fuss { white-space: nowrap; align-self: center; }