/* AS Marketing Akquise-Plattform
   Baut auf dem Software-CI auf: static/as-ci/as-ci.css (Quelle SamOS „Claude outputs/AS-CI-Software“,
   Live-Messung der Website vom 28.10.2026). Alle Farben, Radien, Schatten und Bewegungen kommen aus den
   --as-*-Variablen. Hier stehen nur die Komponenten der Plattform, die Klassennamen der Templates bleiben.

   Regeln aus dem CI
   - Rot genau für die Hauptaktion einer Ansicht, Teal für die zweite Aktion und Links
   - Headlines im leichten Grundschnitt 400, Kernwörter ExtraBold 800, Labels 11 px VERSAL
   - Radien 7 Chips · 11 Buttons und Felder · 14 Panels · 18 Karten, Schatten immer zweilagig in Ink
   - Hover hebt 2 px, Bewegung cubic-bezier(0.22, 1, 0.36, 1) */

/* Kurzformen, damit ältere Regeln und Inline-Stile weiter auf das CI zeigen */
:root {
  --rot: var(--as-red-500);
  --rot-dunkel: var(--as-red-600);
  --rot-hell: rgba(var(--as-red-rgb), .07);
  --gruen: var(--as-teal-500);
  --gruen-dunkel: var(--as-petrol-700);
  --gruen-hell: var(--as-mist-100);
  --text: var(--as-text);
  --muted: var(--as-text-muted);
  --weiss: var(--as-white);
  --flaeche: var(--as-bg-sand);
  --linie: var(--as-border-card);
  --shadow-sm: var(--as-shadow-xs);
  --shadow: var(--as-shadow-lg);
  --radius: var(--as-radius-lg);
  --gelb: #D99A1E;           /* Ampelpunkt Gelb, als Text immer --as-warning */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--as-bg-sand); color: var(--as-text);
  font-family: var(--as-font); font-size: var(--as-fs-body); line-height: var(--as-lh-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
:focus-visible { outline: 2px solid var(--as-focus); outline-offset: 3px; }
a { color: var(--as-secondary-text); text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--as-dur) var(--as-ease); }
a:hover { color: var(--as-accent-text); }
::selection { background: rgba(var(--as-teal-rgb), .2); }

/* ---------- Typografie ---------- */
.container { max-width: var(--as-container); margin: 32px auto 72px; padding: 0 32px; }
h1 { font-size: var(--as-fs-h1); line-height: var(--as-lh-h1); letter-spacing: var(--as-ls-h1); font-weight: var(--as-fw-light);
  margin: 0 0 8px; color: var(--as-text); text-wrap: balance; }
h1 strong { font-weight: var(--as-fw-black); }
h2 { font-size: var(--as-fs-h3); line-height: var(--as-lh-h3); letter-spacing: var(--as-ls-h3); font-weight: var(--as-fw-black); margin: 28px 0 12px; color: var(--as-text); }
h3 { font-size: var(--as-fs-label); line-height: 1.4; font-weight: var(--as-fw-black); letter-spacing: var(--as-ls-label);
  text-transform: uppercase; color: var(--as-text-label); margin: 22px 0 8px; }
.lead { color: var(--as-text-body); font-size: 1rem; line-height: 1.6; margin: 0 0 24px; max-width: 52em; }
.eyebrow { display: block; font-size: var(--as-fs-eyebrow); font-weight: var(--as-fw-black); letter-spacing: var(--as-ls-eyebrow);
  text-transform: uppercase; color: var(--as-text-label); margin: 0 0 6px; }
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--as-text-muted); text-decoration: none; font-size: var(--as-fs-small);
  font-weight: var(--as-fw-bold); margin-bottom: 14px; }
.back:hover { color: var(--as-accent-text); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.hint { color: var(--as-text-muted); font-size: var(--as-fs-small); }
.error { color: var(--as-danger); font-size: 14px; font-weight: var(--as-fw-bold); }
.late { color: var(--as-danger); }

/* Aufzählungszeichen aus der Logo-Form */
.guide ul, .frame-block ul, ul.ci-list { list-style: none; padding-left: 0; }
.guide li, .frame-block li, ul.ci-list li { position: relative; padding-left: 24px; margin: 7px 0; }
.guide li::before, .frame-block li::before, ul.ci-list li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 12px; height: 11px;
  background: url("/static/brand/aufzaehlung-rot.svg") no-repeat center / contain;
}

/* ---------- Kennzahlen (CI: Wert ExtraBold, Label VERSAL in Rot) ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px; }
.kpi { display: flex; flex-direction: column-reverse; gap: 10px; background: var(--as-surface); border: 1px solid var(--as-border-card);
  border-radius: var(--as-radius-xl); padding: 20px 22px; box-shadow: var(--as-shadow-card); }
.kpi .num { display: block; font-size: 2.4rem; line-height: 1; letter-spacing: var(--as-ls-kpi); font-weight: var(--as-fw-black);
  font-variant-numeric: tabular-nums; color: var(--as-text); }
.kpi .lbl { font-size: 0.625rem; font-weight: var(--as-fw-black); letter-spacing: 0.16em; text-transform: uppercase; color: var(--as-text-label); }
.kpi.accent .lbl { color: var(--as-accent-text); }
.kpi.accent { background-image: radial-gradient(120% 100% at 100% 0%, rgba(var(--as-red-rgb), .07) 0%, transparent 62%); }

/* ---------- Buttons (CI .as-btn) ---------- */
.btn, .act-btn, .login-card button, .chat-input button {
  --btn-bg: var(--as-red-500); --btn-fg: var(--as-white); --btn-border: rgba(var(--as-white-rgb), .13);
  --btn-shadow: rgba(var(--as-red-rgb), .5); --btn-glow: rgba(var(--as-white-rgb), .28);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px; font-family: var(--as-font); font-size: 0.8125rem; font-weight: var(--as-fw-bold);
  letter-spacing: var(--as-ls-button); line-height: 1; white-space: nowrap; color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid var(--btn-border); border-radius: var(--as-radius-md); cursor: pointer; text-decoration: none;
  transition: transform var(--as-dur-slow) var(--as-ease), box-shadow var(--as-dur-slow) var(--as-ease),
              background-color var(--as-dur) var(--as-ease), border-color var(--as-dur) var(--as-ease), color var(--as-dur) var(--as-ease);
}
.btn:hover, .act-btn:hover, .login-card button:hover, .chat-input button:hover {
  color: var(--btn-fg); transform: translateY(-2px); box-shadow: 0 12px 26px -16px var(--btn-shadow), inset 0 -6px 10px var(--btn-glow); }
.btn:active, .act-btn:active { transform: translateY(0); }
.btn:disabled, .act-btn:disabled { opacity: .45; cursor: wait; transform: none; box-shadow: none; }
.btn.ghost { --btn-bg: var(--as-surface); --btn-fg: var(--as-text); --btn-border: var(--as-border-card);
  --btn-shadow: rgba(var(--as-ink-rgb), .35); --btn-glow: rgba(var(--as-ink-rgb), .06); }
.btn.ghost:hover { border-color: var(--as-line-500); }
.btn.secondary { --btn-bg: var(--as-secondary); --btn-shadow: rgba(var(--as-teal-rgb), .55); }
.btn.small, .act-btn { height: 32px; padding: 0 12px; font-size: 0.75rem; border-radius: 9px; }

/* ---------- Tabellen (CI .as-table) ---------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--as-border-card); border-radius: var(--as-radius-xl); background: var(--as-surface);
  box-shadow: var(--as-shadow-xs); }
table.replies { width: 100%; border-collapse: collapse; background: var(--as-surface); font-size: 0.875rem; font-variant-numeric: tabular-nums;
  border: 1px solid var(--as-border-card); border-radius: var(--as-radius-xl); overflow: hidden; }
.table-scroll > table.replies { border: 0; border-radius: 0; }
.replies th { text-align: left; padding: 12px 16px; white-space: nowrap; font-size: var(--as-fs-label); font-weight: var(--as-fw-black);
  letter-spacing: var(--as-ls-label); text-transform: uppercase; color: var(--as-text-label); background: var(--as-surface);
  border-bottom: 1px solid var(--as-border); }
.replies td { padding: 14px 16px; color: var(--as-text-body); border-bottom: 1px solid var(--as-border-subtle); vertical-align: middle; }
.replies td strong { color: var(--as-text); }
.replies tr:last-child td { border-bottom: none; }
.replies tbody tr { transition: background-color var(--as-dur-fast); }
.replies tbody tr:hover { background: var(--as-surface-hover); }
.snippet { color: var(--as-text-body); font-size: 14px; }

/* Kategorie-Badge: Farbe kommt aus den Daten, Form aus dem CI */
.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--as-radius-sm);
  color: var(--as-white); font-size: 0.75rem; font-weight: var(--as-fw-bold); line-height: 1; white-space: nowrap; }
.conf { color: var(--as-text-muted); font-size: 13px; margin-left: 8px; }

/* ---------- Antwort-Detail und Leitfaden ---------- */
blockquote { background: var(--as-surface); border: 1px solid var(--as-border-card); border-left: 3px solid var(--as-secondary);
  margin: 14px 0; padding: 14px 18px; border-radius: 0 var(--as-radius-md) var(--as-radius-md) 0; }
.action { background: rgba(var(--as-teal-rgb), .08); color: var(--as-text); border: 1px solid rgba(var(--as-teal-rgb), .22);
  border-radius: var(--as-radius-md); padding: 12px 16px; }
.guide, .frame-block { background: var(--as-surface); border: 1px solid var(--as-border-card); border-radius: var(--as-radius-xl);
  padding: 8px 26px 22px; margin-top: 18px; box-shadow: var(--as-shadow-card); }
.frame-block { margin: 0 0 16px; }
.guide .quote { font-style: italic; color: var(--as-secondary-text); font-size: 16px; }

/* ---------- Login: dunkle Bühne mit Glow und Raster (CI .as-stage) ---------- */
body.page-login { position: relative; isolation: isolate; overflow-x: hidden; background: var(--as-night-800); color: var(--as-white); min-height: 100vh; }
body.page-login::before { content: ""; position: fixed; inset: -20%; z-index: -2; pointer-events: none;
  background: radial-gradient(38% 46% at 18% 18%, rgba(var(--as-teal-rgb), .55) 0%, transparent 70%),
              radial-gradient(34% 40% at 92% 92%, rgba(var(--as-red-rgb), .20) 0%, transparent 70%);
  filter: blur(40px); }
body.page-login::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(var(--as-white-rgb), .04) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--as-white-rgb), .04) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 70% at 60% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(70% 70% at 60% 50%, #000 30%, transparent 100%); }
body.page-login .container { margin-top: 0; }
.login-card { max-width: 420px; margin: 13vh auto 0; background: var(--as-white); color: var(--as-ink-900); border-radius: var(--as-radius-2xl);
  padding: 36px 34px 28px; box-shadow: var(--as-shadow-xl); text-align: center; }
.login-card .login-logo { height: 30px; width: auto; margin: 4px auto 8px; display: block; }
.login-sub { color: var(--as-ink-500); font-size: var(--as-fs-eyebrow); font-weight: var(--as-fw-black); letter-spacing: var(--as-ls-eyebrow);
  text-transform: uppercase; margin: 0 0 24px; }
.login-card form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.login-card label { display: grid; gap: 8px; font-size: var(--as-fs-label); font-weight: var(--as-fw-black); letter-spacing: var(--as-ls-label);
  text-transform: uppercase; color: var(--as-ink-500); }
.login-card input { min-height: 48px; padding: 12px 14px; font: var(--as-fw-regular) var(--as-fs-body)/1.5 var(--as-font); color: var(--as-ink-900);
  letter-spacing: 0; text-transform: none; background: var(--as-mist-50); border: 1px solid var(--as-line-200); border-radius: var(--as-radius-md);
  outline: none; transition: background-color var(--as-dur-fast), border-color var(--as-dur-fast), box-shadow var(--as-dur-fast); }
.login-card input:hover { border-color: var(--as-line-400); }
.login-card input:focus { background: var(--as-white); border-color: var(--as-teal-500); box-shadow: var(--as-ring); }
.login-card button { height: 47px; font-size: 0.9375rem; margin-top: 6px; width: 100%; }
.login-card .hint { color: var(--as-ink-600); margin-bottom: 0; }
.login-claim { color: rgba(var(--as-white-rgb), .82); text-align: center; font-size: var(--as-fs-h2); line-height: var(--as-lh-h2);
  letter-spacing: var(--as-ls-h2); font-weight: var(--as-fw-light); margin-top: 28px; }

/* ---------- Kundenkarten (alte Startseite) ---------- */
.cust-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.cust-card { background: var(--as-surface); border: 1px solid var(--as-border-card); border-radius: var(--as-radius-xl); padding: 20px;
  box-shadow: var(--as-shadow-card); transition: transform var(--as-dur-slow) var(--as-ease), box-shadow var(--as-dur-slow) var(--as-ease); }
.cust-card:hover { transform: translateY(-3px); box-shadow: var(--as-shadow-lg); }
.cust-card a { color: var(--as-text); text-decoration: none; font-weight: var(--as-fw-black); font-size: 17px; }
.cust-card .mini { background: var(--as-data-muted); border-radius: var(--as-radius-xs); height: 8px; margin-top: 12px; overflow: hidden; }
.cust-card .mini > span { display: block; height: 100%; background: var(--as-teal-300); }

/* Fortschritt (CI .as-progress) */
.progress { background: var(--as-data-muted); border-radius: var(--as-radius-xs); height: 8px; overflow: hidden; margin: 8px 0 6px; }
.progress > span { display: block; height: 100%; border-radius: inherit; transition: width .35s var(--as-ease);
  background: linear-gradient(90deg, var(--as-red-500) 0%, var(--as-red-500) 72%, rgba(var(--as-red-rgb), .45) 100%); }

/* ---------- Checkliste ---------- */
.phase { background: var(--as-surface); border: 1px solid var(--as-border-card); border-radius: var(--as-radius-xl); margin-bottom: 14px;
  overflow: hidden; box-shadow: var(--as-shadow-xs); }
.phase > h3 { margin: 0; padding: 14px 20px; background: var(--as-surface); border-bottom: 1px solid var(--as-border); color: var(--as-text);
  text-transform: none; letter-spacing: var(--as-ls-h3); font-size: 15px; font-weight: var(--as-fw-black); display: flex; justify-content: space-between; }
.phase .count { color: var(--as-text-muted); font-weight: var(--as-fw-bold); font-size: 13px; }
.check { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--as-border-subtle); }
.check:last-child { border-bottom: none; }
.check:hover { background: var(--as-surface-hover); }
.check input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--as-red-500); flex: none; cursor: pointer; }
.check.done label { color: var(--as-text-muted); text-decoration: line-through; }
.check label { flex: 1; cursor: pointer; }
.gate { position: relative; isolation: isolate; color: var(--as-secondary-text); font-size: 11px; font-weight: var(--as-fw-bold); padding: 3px 9px;
  border-radius: var(--as-radius-sm); white-space: nowrap; }
.gate::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: currentColor; opacity: .1; }

/* ---------- Leisten, Pills, Schritte ---------- */
.mode-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--as-surface); border: 1px solid var(--as-border-card);
  border-radius: var(--as-radius-lg); padding: 10px 14px; margin: 16px 0 22px; box-shadow: var(--as-shadow-xs); }
.mode-bar > span { font-size: var(--as-fs-label); font-weight: var(--as-fw-black); letter-spacing: var(--as-ls-label); text-transform: uppercase;
  color: var(--as-text-label); margin-right: 4px; }
/* Pills wie CI .as-choice: gewählt = Ink-Fläche */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; font: var(--as-fw-bold) 0.8125rem/1 var(--as-font);
  letter-spacing: -0.006em; color: var(--as-text); background: var(--as-surface-sunken); border: 1px solid var(--as-border-field);
  border-radius: var(--as-radius-pill); cursor: pointer; text-decoration: none;
  transition: background-color var(--as-dur-fast), border-color var(--as-dur-fast), color var(--as-dur-fast); }
.pill:hover { border-color: var(--as-border-strong); color: var(--as-text); }
.pill.on { background: var(--as-ink-900); border-color: var(--as-ink-900); color: var(--as-white); }
.pill.on .dot { box-shadow: 0 0 0 2px rgba(var(--as-white-rgb), .25); }
ol.steps { list-style: none; padding: 0; margin: 0; }
ol.steps .step { display: flex; align-items: center; gap: 15px; background: var(--as-surface); border: 1px solid var(--as-border-card);
  border-radius: var(--as-radius-lg); padding: 14px 18px; margin-bottom: 10px; box-shadow: var(--as-shadow-xs); }
ol.steps .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--as-line-300); flex: none; margin: 0; }
ol.steps .step.done .dot { background: var(--as-success); }
ol.steps .step.next { border-color: rgba(var(--as-red-rgb), .45); box-shadow: var(--as-ring-danger); }
ol.steps .step.next .dot { background: var(--as-red-500); }
ol.steps .slabel { flex: 1; font-weight: var(--as-fw-bold); color: var(--as-text); }
ol.steps .step.done .slabel { color: var(--as-text-muted); font-weight: var(--as-fw-medium); }
.sactions { display: flex; gap: 8px; align-items: center; }

/* ---------- Editor, Kampagne, Chat ---------- */
pre.campaign { background: var(--as-surface-sunken); border: 1px solid var(--as-border-field); border-radius: var(--as-radius-md); padding: 18px 20px;
  white-space: pre-wrap; font-family: var(--as-font); font-size: 14px; line-height: 1.6; color: var(--as-text); }
textarea.editor { width: 100%; min-height: 360px; padding: 14px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  line-height: 1.55; margin-bottom: 10px; color: var(--as-text); background: var(--as-surface-sunken); border: 1px solid var(--as-border-field);
  border-radius: var(--as-radius-md); outline: none; transition: background-color var(--as-dur-fast), border-color var(--as-dur-fast), box-shadow var(--as-dur-fast); }
textarea.editor:hover { border-color: var(--as-border-strong); }
textarea.editor:focus { background: var(--as-surface); border-color: var(--as-focus); box-shadow: var(--as-ring); }
textarea.editor.small { min-height: 112px; font-family: var(--as-font); font-size: 14px; }

.chat-wrap { display: flex; flex-direction: column; height: calc(100vh - 220px); min-height: 360px; }
.chat-log { flex: 1; overflow-y: auto; padding: 6px 2px; }
.msg { max-width: 78%; padding: 12px 16px; border-radius: var(--as-radius-lg); margin: 10px 0; white-space: pre-wrap; line-height: 1.55; }
.msg.user { background: var(--as-petrol-700); color: var(--as-white); margin-left: auto; border-bottom-right-radius: 4px; }
.msg.bot { background: var(--as-surface); border: 1px solid var(--as-border-card); border-bottom-left-radius: 4px; box-shadow: var(--as-shadow-xs); }
.chat-input { display: flex; gap: 10px; padding-top: 14px; align-items: stretch; }
.chat-input textarea { flex: 1; resize: none; min-height: 52px; padding: 13px 14px; font: inherit; color: var(--as-text); background: var(--as-surface);
  border: 1px solid var(--as-border-field); border-radius: var(--as-radius-md); outline: none; }
.chat-input textarea:focus { border-color: var(--as-focus); box-shadow: var(--as-ring); }
.chat-input button { height: auto; padding: 0 22px; font-size: 0.9375rem; }

/* ---------- Formulare (CI .as-field / .as-input) ---------- */
.card-form { background: var(--as-surface); border: 1px solid var(--as-border-card); border-radius: var(--as-radius-xl); padding: var(--as-card-pad);
  box-shadow: var(--as-shadow-card); display: flex; flex-direction: column; gap: 16px; }
.card-form.narrow { max-width: 540px; }
.card-form.mapping { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card-form label, .inline-form label, .filter-form label {
  display: flex; flex-direction: column; gap: 7px; font-size: var(--as-fs-label); font-weight: var(--as-fw-black); letter-spacing: var(--as-ls-label);
  text-transform: uppercase; line-height: 1.4; color: var(--as-text-label); }
.card-form input:not([type=checkbox]):not([type=radio]):not([type=file]), .card-form select,
.inline-form input:not([type=checkbox]):not([type=radio]):not([type=file]), .inline-form select, .inline-form textarea,
.filter-form input, .filter-form select {
  width: 100%; min-height: 44px; padding: 10px 13px; font: var(--as-fw-regular) var(--as-fs-body)/1.5 var(--as-font); letter-spacing: 0; text-transform: none;
  color: var(--as-text); background: var(--as-surface-sunken); border: 1px solid var(--as-border-field); border-radius: var(--as-radius-md);
  outline: none; appearance: none;
  transition: background-color var(--as-dur-fast), border-color var(--as-dur-fast), box-shadow var(--as-dur-fast); }
.card-form select, .inline-form select, .filter-form select {
  padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23889291' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 14px; }
.card-form input:hover, .card-form select:hover, .inline-form input:hover, .inline-form select:hover, .filter-form input:hover, .filter-form select:hover {
  border-color: var(--as-border-strong); }
.card-form input:focus, .card-form select:focus, .inline-form input:focus, .inline-form select:focus, .inline-form textarea:focus,
.filter-form input:focus, .filter-form select:focus { background-color: var(--as-surface); border-color: var(--as-focus); box-shadow: var(--as-ring); }
input::placeholder, textarea::placeholder { color: var(--as-ink-400); }
input[type=file] { font: inherit; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--as-text-body); }
input[type=checkbox], input[type=radio] { accent-color: var(--as-red-500); }
.card-form textarea.editor { margin-bottom: 0; }
.req { color: var(--as-accent-text); font-size: 10px; font-weight: var(--as-fw-black); letter-spacing: .1em; margin-left: 6px; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin: 10px 0 0; }
.inline-form input:not([type=checkbox]):not([type=file]), .inline-form select { width: auto; min-height: 38px; padding-top: 7px; padding-bottom: 7px; font-size: 14px; }
label.check, .check-inline { flex-direction: row !important; align-items: center; gap: 8px !important; text-transform: none !important;
  letter-spacing: 0 !important; font-size: 14px !important; font-weight: var(--as-fw-medium) !important; color: var(--as-text-body) !important; }
details.more > summary { cursor: pointer; color: var(--as-secondary-text); font-size: 13px; font-weight: var(--as-fw-bold); margin-top: 8px; }
details.more > summary:hover { color: var(--as-accent-text); }
.linkbtn { background: none; border: none; color: var(--as-text-muted); cursor: pointer; font: inherit; font-size: 12px; font-weight: var(--as-fw-bold); padding: 0; }
.linkbtn:hover { color: var(--as-accent-text); }

/* ---------- Leads ---------- */
.mode-bar a.pill, .filter-bar a.pill { text-decoration: none; }
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 16px; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0 0 18px; }
.toolbar form { margin: 0; }
table.leads td { font-size: 14px; }
.score { display: inline-grid; place-items: center; min-width: 42px; height: 28px; border-radius: var(--as-radius-sm); font-variant-numeric: tabular-nums;
  background: rgba(var(--as-teal-rgb), .1); color: var(--as-secondary-text); font-weight: var(--as-fw-black); }
.issue { display: inline-block; margin: 5px 4px 0 0; font-size: 11px; font-weight: var(--as-fw-bold); color: var(--as-warning);
  background: rgba(148, 96, 10, .09); padding: 2px 8px; border-radius: var(--as-radius-sm); }
.row-actions form { display: flex; flex-direction: column; gap: 6px; margin: 0; }

/* ---------- Panels, Akte, Warnungen ---------- */
.head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.panel { background: var(--as-surface); border: 1px solid var(--as-border-card); border-radius: var(--as-radius-xl); padding: 22px var(--as-card-pad) 24px;
  box-shadow: var(--as-shadow-card); margin-bottom: 16px; }
.panel > h2 { margin: 0 0 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.panel > h2 .hint { font-weight: var(--as-fw-medium); letter-spacing: 0; }
.akte-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--as-line-400); vertical-align: middle; margin-right: 7px; flex: none; }
.dot.gruen { background: var(--as-success); } .dot.gelb { background: var(--gelb); } .dot.rot { background: var(--as-red-500); }
.warn-list { list-style: none; padding: 0; margin: 0; }
.warn-list li { display: flex; gap: 10px; align-items: baseline; padding: 11px 14px; border-radius: var(--as-radius-md); margin-bottom: 6px; font-size: 14px;
  color: var(--as-text-body); }
.warn-list li.rot { background: rgba(var(--as-red-rgb), .06); box-shadow: inset 3px 0 0 var(--as-red-500); }
.warn-list li.gelb { background: rgba(217, 154, 30, .09); box-shadow: inset 3px 0 0 var(--gelb); }
.warn-list li a { font-weight: var(--as-fw-bold); color: var(--as-text); text-decoration: none; white-space: nowrap; }
.warn-list li a:hover { color: var(--as-accent-text); }
.warn-list li .camp { color: var(--as-text-muted); white-space: nowrap; }
body.page-wide .container { max-width: none; padding: 0 32px; }
.view-bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--as-border); margin-bottom: 16px; }

/* ---------- Board ---------- */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(232px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: start; }
.board-col { background: rgba(var(--as-ink-rgb), .035); border: 1px solid var(--as-border-subtle); border-radius: var(--as-radius-lg); padding: 10px;
  min-height: 120px; transition: background-color var(--as-dur) var(--as-ease), box-shadow var(--as-dur) var(--as-ease); }
.board-col.drop { background: rgba(var(--as-teal-rgb), .10); box-shadow: inset 0 0 0 2px var(--as-teal-500); }
.board-col > h3, .board-col summary h3 { margin: 4px 6px 2px; display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--as-text); }
.board-col > h3 .col-count { color: var(--as-text-label); font-variant-numeric: tabular-nums; }
.col-hint { font-size: 11.5px; color: var(--as-text-muted); margin: 0 6px 10px; }
.camp-card { display: block; position: relative; background: var(--as-surface); border: 1px solid var(--as-border-card); border-radius: var(--as-radius-md);
  padding: 11px 12px 10px 14px; margin-bottom: 8px; text-decoration: none; color: var(--as-text); font-size: 13.5px; box-shadow: var(--as-shadow-xs);
  transition: transform var(--as-dur-slow) var(--as-ease), box-shadow var(--as-dur-slow) var(--as-ease), border-color var(--as-dur) var(--as-ease); }
.camp-card::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--as-teal-300); }
.camp-card:hover { color: var(--as-text); transform: translateY(-2px); box-shadow: var(--as-shadow-lg); border-color: var(--as-line-400); }
.camp-card.late::before { background: var(--as-red-500); }
.camp-card.kunde::before { background: var(--gelb); }
.camp-card.muted { opacity: .55; }
.camp-card.muted::before { background: var(--as-line-400); }
.camp-card.dragging { opacity: .4; }
.camp-card strong { display: flex; align-items: center; font-size: 14px; font-weight: var(--as-fw-bold); letter-spacing: -0.01em; }
.camp-card .camp-name { display: block; color: var(--as-text-muted); font-size: 12.5px; margin: 2px 0 6px; }
.camp-card .meta { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-top: 5px; color: var(--as-text-muted); font-size: 12px; }
.owner { display: inline-flex; align-items: center; height: 20px; font-size: 11px; font-weight: var(--as-fw-bold); color: var(--as-white);
  background: var(--as-petrol-700); padding: 0 8px; border-radius: var(--as-radius-pill); }
.warn-count { margin-left: auto; min-width: 20px; height: 20px; border-radius: 50%; background: var(--as-red-500); color: var(--as-white); font-size: 11px;
  font-weight: var(--as-fw-black); display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }

/* ---------- Kopf, Reiter, Bereiche ---------- */
.kunde-kopf { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.kunde-kopf h1 { margin-bottom: 2px; }
.kunde-kopf h1 .dot { width: 12px; height: 12px; margin-right: 12px; position: relative; top: -3px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--as-border); margin: 12px 0 24px; }
.tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 11px 14px; text-decoration: none; color: var(--as-text-muted);
  font-weight: var(--as-fw-bold); font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
  transition: color var(--as-dur-fast), border-color var(--as-dur-fast); }
.tabs a:hover { color: var(--as-text); }
.tabs a.on { color: var(--as-text); border-bottom-color: var(--as-red-500); }
/* Nummern-Chip wie im CI-Eyebrow: zeigt die Reihenfolge der Kampagnenerstellung */
.tabs .nr { position: relative; display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 6px; border-radius: var(--as-radius-sm);
  font-size: 0.72rem; font-weight: var(--as-fw-black); letter-spacing: .02em; color: var(--as-secondary-text); font-variant-numeric: tabular-nums; }
.tabs .nr::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: .1; }
.tabs a.on .nr { color: var(--as-accent-text); }
.tabs .count, .count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--as-radius-pill);
  background: rgba(var(--as-ink-rgb), .07); color: var(--as-text-muted); font-size: 11px; font-weight: var(--as-fw-black); font-variant-numeric: tabular-nums; }
.count.red { background: var(--as-red-500); color: var(--as-white); }
.subtabs { margin: 4px 0 14px; }
.subtabs a { padding: 8px 12px; font-size: 13.5px; }

.bereiche { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0 0; }
.bereich { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 14px 18px; border-radius: var(--as-radius-lg); background: var(--as-surface);
  border: 1px solid var(--as-border-card); text-decoration: none; color: var(--as-text); box-shadow: var(--as-shadow-xs);
  transition: transform var(--as-dur-slow) var(--as-ease), box-shadow var(--as-dur-slow) var(--as-ease), border-color var(--as-dur) var(--as-ease); }
.bereich strong { font-size: 15.5px; font-weight: var(--as-fw-black); letter-spacing: -0.015em; display: flex; align-items: center; gap: 8px; }
.bereich span { font-size: 12.5px; color: var(--as-text-muted); }
.bereich:hover { color: var(--as-text); border-color: var(--as-line-400); transform: translateY(-2px); box-shadow: var(--as-shadow-lg); }
.bereich.on { background: var(--as-night-800); border-color: var(--as-night-800); color: var(--as-white); box-shadow: var(--as-shadow-card); transform: none;
  background-image: radial-gradient(90% 140% at 100% 0%, rgba(var(--as-teal-rgb), .45) 0%, transparent 60%); }
.bereich.on::after { content: ""; position: absolute; top: 16px; right: 16px; width: 6px; height: 6px; border-radius: 50%; background: var(--as-red-500); }
.bereich.on span { color: rgba(var(--as-white-rgb), .68); }
.bereich.on .count { background: rgba(var(--as-white-rgb), .16); color: var(--as-white); }
.bereiche + .tabs { margin-top: 8px; }
.tabs-leer { height: 20px; }
.zg-links { display: flex; gap: 6px; flex-wrap: wrap; }

.autopilot-bar { display: flex; gap: 14px; align-items: center; background: var(--as-night-800); color: var(--as-white); border-radius: var(--as-radius-lg);
  padding: 12px 18px; margin: -10px 0 20px; box-shadow: var(--as-shadow-card);
  background-image: radial-gradient(60% 160% at 0% 0%, rgba(var(--as-teal-rgb), .5) 0%, transparent 70%); }
.autopilot-bar strong { display: inline-flex; align-items: center; gap: 8px; }
.autopilot-bar strong::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--as-red-500); animation: as-puls 1.6s var(--as-ease) infinite; }
.autopilot-bar span { color: rgba(var(--as-white-rgb), .77); }
.autopilot-bar .progress { background: rgba(var(--as-white-rgb), .16); }
@keyframes as-puls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.result-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 8px; }
.result { display: block; border: 1px solid var(--as-border-field); border-radius: var(--as-radius-md); padding: 12px 14px; text-decoration: none;
  color: var(--as-text); background: var(--as-surface-sunken); transition: border-color var(--as-dur-fast), background-color var(--as-dur-fast); }
.result:hover { color: var(--as-text); border-color: var(--as-border-strong); background: var(--as-surface); }
.result strong { display: block; font-size: 13.5px; font-weight: var(--as-fw-bold); }
.result span { font-size: 12.5px; color: var(--as-text-muted); }
.result.ok { background: rgba(46, 122, 91, .07); border-color: rgba(46, 122, 91, .25); }
.result.ok strong::before { content: "✓ "; color: var(--as-success); }
.cat-bar { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 14px; font-size: 13.5px; color: var(--as-text-body); }
.cat-bar .cat { display: inline-flex; align-items: center; gap: 6px; }
.task.done .txt { color: var(--as-text-muted); text-decoration: line-through; }

/* ---------- Wissen ---------- */
.wissen-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wissen-card { position: relative; background: var(--as-surface-sunken); border: 1px solid var(--as-border-field); border-radius: var(--as-radius-lg); padding: 16px 18px; }
.wissen-card strong { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: var(--as-fs-label); font-weight: var(--as-fw-black);
  letter-spacing: var(--as-ls-label); text-transform: uppercase; color: var(--as-accent-text); }
.wissen-card strong::before { content: ""; width: 20px; height: 2px; border-radius: 2px; background: currentColor; }
.wissen-card:nth-child(even) strong { color: var(--as-secondary-text); }
.wissen-body { white-space: pre-wrap; font-size: 14px; line-height: 1.6; color: var(--as-text-body); }
.transcript { white-space: pre-wrap; font-size: 13.5px; line-height: 1.6; max-height: 520px; overflow: auto; background: var(--as-surface-sunken);
  border: 1px solid var(--as-border-field); border-radius: var(--as-radius-md); padding: 16px; margin-top: 10px; color: var(--as-text-body); }
.panel > h2 .linkbtn, h3 .linkbtn, h3 a.hint, h2 a.hint { font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: var(--as-fw-bold); }
h3 a.hint, h2 a.hint { color: var(--as-secondary-text); text-decoration: none; }
h3 a.hint:hover, h2 a.hint:hover { color: var(--as-accent-text); }

/* ---------- Tags (CI .as-badge: Ton als Text auf 10 % Fläche) ---------- */
.tag { position: relative; isolation: isolate; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--as-radius-sm);
  font-size: 11px; font-weight: var(--as-fw-bold); line-height: 1; white-space: nowrap; color: var(--as-text-muted); }
.tag::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: currentColor; opacity: .1; }
.tag.wir { color: var(--as-secondary-text); }
.tag.kunde { color: var(--as-warning); }
.tag.late { color: var(--as-danger); }

table.cust td { font-size: 14px; vertical-align: top; }
table.cust td a.name, a.name { font-weight: var(--as-fw-bold); color: var(--as-text); text-decoration: none; font-size: 15px; }
a.name:hover { color: var(--as-accent-text); }
table.cust .gruppen-kopf td { background: var(--as-surface-sunken); color: var(--as-text); font-size: var(--as-fs-label); font-weight: var(--as-fw-black);
  letter-spacing: var(--as-ls-label); text-transform: uppercase; padding: 10px 16px; }
.campaign-row { border: 1px solid var(--as-border-field); border-radius: var(--as-radius-md); padding: 14px 16px; margin-bottom: 10px; background: var(--as-surface); }
.campaign-row .top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.campaign-row .top strong { font-size: 15px; }
.task { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--as-border-subtle); font-size: 14px; }
.task:last-child { border-bottom: none; }
.task .txt { flex: 1; }
.task form { margin: 0; }
.task .late { color: var(--as-danger); font-weight: var(--as-fw-bold); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 14px; margin: 0 0 10px; }
.kv dt { font-size: var(--as-fs-label); font-weight: var(--as-fw-black); letter-spacing: var(--as-ls-label); text-transform: uppercase; color: var(--as-text-label);
  padding-top: 3px; }
.kv dd { margin: 0; font-weight: var(--as-fw-medium); color: var(--as-text); }
.contact { padding: 10px 0; border-bottom: 1px solid var(--as-border-subtle); font-size: 14px; display: flex; justify-content: space-between; gap: 8px; }
.contact:last-child { border-bottom: none; }
.ampel-pick { display: flex; gap: 6px; flex-wrap: wrap; }
.ampel-pick button { display: inline-flex; align-items: center; height: 34px; padding: 0 13px; font: var(--as-fw-bold) 13px/1 var(--as-font);
  color: var(--as-text); background: var(--as-surface-sunken); border: 1px solid var(--as-border-field); border-radius: var(--as-radius-pill); cursor: pointer;
  transition: border-color var(--as-dur-fast), background-color var(--as-dur-fast); }
.ampel-pick button:hover { border-color: var(--as-border-strong); background: var(--as-surface); }

.subtab-pane.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.subtab-pane.compare[hidden] { display: none; }
.subtab-pane.compare pre.campaign { max-height: 640px; overflow: auto; margin: 0; }

/* ---------- Agenturübersicht ---------- */
.agentur-main { min-width: 0; }
.seiten-kopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.seiten-kopf h1 { margin: 0; }
.seiten-kopf .btn { margin-left: auto; }
/* Umschalter wie CI .as-segment */
.umschalter { display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--as-radius-pill); background: rgba(var(--as-ink-rgb), .05);
  border: 1px solid var(--as-border-subtle); }
.umschalter button { height: 30px; padding: 0 14px; border: 0; border-radius: var(--as-radius-pill); font: var(--as-fw-bold) 0.8125rem/1 var(--as-font);
  color: var(--as-text-muted); background: transparent; cursor: pointer;
  transition: background-color var(--as-dur) var(--as-ease), color var(--as-dur) var(--as-ease), box-shadow var(--as-dur) var(--as-ease); }
.umschalter button.on { background: var(--as-surface); color: var(--as-text); box-shadow: 0 2px 8px rgba(var(--as-ink-rgb), .12), 0 0 0 1px rgba(var(--as-ink-rgb), .06); }
.darst[hidden] { display: none; }
.kunden-board { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); overflow: visible; }
.ampel-col { position: relative; padding-top: 14px; }
.ampel-col::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--as-line-400); }
.ampel-col.rot::before { background: var(--as-red-500); }
.ampel-col.gelb::before { background: var(--gelb); }
.ampel-col.gruen::before { background: var(--as-success); }
.kunden-karte::before { display: none; }
.kunden-karte .kk-camp { font-size: 13px; margin-top: 4px; color: var(--as-text-body); display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.kunden-karte .kk-grund { display: block; font-size: 12px; color: var(--as-text-muted); margin-top: 8px; border-top: 1px solid var(--as-border-subtle); padding-top: 7px; }
.board-col.closed { background: rgba(var(--as-ink-rgb), .055); border-style: dashed; }
.board-col.closed .camp-card { opacity: .82; }
.filter-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; background: var(--as-surface); border: 1px solid var(--as-border-card);
  border-radius: var(--as-radius-lg); padding: 12px 16px 14px; margin: 8px 0 16px; box-shadow: var(--as-shadow-xs); }
.filter-form label { gap: 6px; }
.filter-form label.grow { flex: 1; min-width: 220px; }
.filter-form input, .filter-form select { min-height: 38px; padding-top: 7px; padding-bottom: 7px; font-size: 13.5px; width: auto; }
.filter-form label.grow input { width: 100%; }
.filter-form .linkbtn, .filter-form > .hint { align-self: center; margin-top: 18px; }
.board-scroll { width: 100%; overflow-x: scroll; overflow-y: auto; max-height: calc(100vh - 290px); min-height: 360px; padding-bottom: 6px;
  border-radius: var(--as-radius-lg); scrollbar-color: var(--as-teal-500) rgba(var(--as-ink-rgb), .06); scrollbar-width: auto; }
.board-scroll .board { overflow: visible; padding-bottom: 0; min-width: max-content; }
.board-scroll::-webkit-scrollbar { height: 12px; width: 10px; }
.board-scroll::-webkit-scrollbar-track { background: rgba(var(--as-ink-rgb), .06); border-radius: 999px; }
.board-scroll::-webkit-scrollbar-thumb { background: var(--as-teal-500); border-radius: 999px; border: 3px solid var(--as-bg-sand); }
.board-scroll::-webkit-scrollbar-thumb:hover { background: var(--as-petrol-700); }
.camp-card[hidden], .f-item[hidden], .ampel-gruppe[hidden] { display: none; }

/* ---------- App-Rahmen: Seitenleiste (CI .as-sidebar, Night-Fläche, roter Punkt) ---------- */
.op-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.op-main { min-width: 0; }
.op-main .container { margin-top: 30px; }
.op-side { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--as-night-800); color: rgba(var(--as-white-rgb), .72);
  display: flex; flex-direction: column; gap: 2px; padding: 22px 14px 18px; font-size: 14px; z-index: 20;
  background-image: radial-gradient(120% 40% at 0% 0%, rgba(var(--as-teal-rgb), .32) 0%, transparent 70%); }
.op-side .brand img { height: 24px; width: auto; display: block; margin: 2px 12px 18px; }
.op-side h4 { margin: 18px 12px 6px; font-size: 0.625rem; font-weight: var(--as-fw-black); letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(var(--as-white-rgb), .5); }
.op-side nav { display: flex; flex-direction: column; gap: 2px; }
.op-side nav a { position: relative; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border-radius: var(--as-radius-md);
  color: inherit; text-decoration: none; font-size: 0.875rem; font-weight: var(--as-fw-medium);
  transition: background-color var(--as-dur-fast), color var(--as-dur-fast); }
.op-side nav a:hover { background: rgba(var(--as-white-rgb), .06); color: var(--as-white); }
.op-side nav a.on { background: rgba(var(--as-white-rgb), .10); color: var(--as-white); font-weight: var(--as-fw-bold); }
.op-side nav a .count { margin-left: auto; background: rgba(var(--as-white-rgb), .12); color: rgba(var(--as-white-rgb), .85); }
.op-side nav a .count.red { background: var(--as-red-500); color: var(--as-white); }
.op-side nav a.on::before { content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--as-red-500); }
.op-close { margin-top: auto; padding: 16px 12px 0; display: flex; flex-direction: column; gap: 3px; font-size: 12px; line-height: 1.5;
  color: rgba(var(--as-white-rgb), .6); }
.op-close strong { color: var(--as-white); font-size: 0.625rem; font-weight: var(--as-fw-black); letter-spacing: 0.18em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px; }
.op-close strong::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--as-teal-300); }
.op-close form { margin: 2px 0 0; }
.op-close .linkbtn { color: var(--as-teal-300); text-decoration: underline; text-underline-offset: 2px; padding: 0; font-size: 12px; }
.op-close .linkbtn:hover { color: var(--as-white); }
.op-close .meldung { color: var(--as-white); font-weight: var(--as-fw-bold); }
.op-close .fehler { color: var(--as-red-300); }
.op-user { margin-top: 16px; padding: 16px 12px 0; border-top: 1px solid rgba(var(--as-white-rgb), .10); display: flex; flex-direction: column; gap: 2px; }
.op-user .uname { color: var(--as-white); font-weight: var(--as-fw-bold); letter-spacing: -0.01em; }
.op-user .rolle { font-size: 12px; color: rgba(var(--as-white-rgb), .55); word-break: break-all; }
.op-user .logout { margin-top: 10px; align-self: flex-start; display: inline-flex; align-items: center; height: 32px; padding: 0 12px;
  color: var(--as-white); text-decoration: none; background: rgba(var(--as-white-rgb), .08); border: 1px solid rgba(var(--as-white-rgb), .16);
  border-radius: 9px; font-weight: var(--as-fw-bold); font-size: 0.75rem; transition: background-color var(--as-dur), border-color var(--as-dur); }
.op-user .logout:hover { background: rgba(var(--as-white-rgb), .15); border-color: rgba(var(--as-white-rgb), .28); color: var(--as-white); }

/* Kopfzeile für Kunden-Logins: dunkles Milchglas wie die Website (CI .as-topbar) */
.topbar { position: sticky; top: 0; z-index: 50; background: rgba(var(--as-ink-rgb), .86);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid rgba(var(--as-white-rgb), .08); }
.topbar-inner { max-width: var(--as-container); margin: 0 auto; height: 64px; display: flex; align-items: center; gap: 32px; padding: 0 32px; }
.brand { display: inline-flex; align-items: center; }
.brand img { height: 24px; width: auto; display: block; }
.topbar nav { display: flex; gap: 4px; flex: 1; }
.topbar nav a { position: relative; color: rgba(var(--as-white-rgb), .78); text-decoration: none; font-weight: var(--as-fw-medium); font-size: 0.875rem;
  padding: 8px 12px; border-radius: var(--as-radius-md); transition: background-color var(--as-dur-fast), color var(--as-dur-fast); }
.topbar nav a:hover { color: var(--as-white); background: rgba(var(--as-white-rgb), .06); }
.topbar nav a.active { color: var(--as-white); font-weight: var(--as-fw-bold); }
.topbar nav a.active::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--as-red-500); }
.topbar .user { display: flex; align-items: center; gap: 12px; font-size: 13px; color: rgba(var(--as-white-rgb), .64); }
.topbar .user .uname { color: var(--as-white); font-weight: var(--as-fw-bold); }
.topbar .user .logout { color: var(--as-white); text-decoration: none; height: 32px; display: inline-flex; align-items: center; padding: 0 12px;
  background: rgba(var(--as-white-rgb), .08); border: 1px solid rgba(var(--as-white-rgb), .16); border-radius: 9px; font-weight: var(--as-fw-bold); font-size: 0.75rem; }
.topbar .user .logout:hover { background: rgba(var(--as-white-rgb), .15); }

/* ---------- Einstellungen ---------- */
.ma-aktionen { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.ma-aktionen form { margin: 0; }
.ma-aktionen summary { cursor: pointer; list-style: none; }
.ma-aktionen .inline-form { margin-top: 6px; }
tr.muted td { color: var(--as-text-muted); }
.result.ok strong { color: var(--as-text); }

/* ---------- Responsiv ---------- */
@media (max-width: 960px) {
  .akte-grid { grid-template-columns: 1fr !important; }
  .result-grid { grid-template-columns: repeat(2, 1fr); }
  .subtab-pane.compare { grid-template-columns: 1fr; }
  .board-scroll { max-height: none; }
  .op-shell { grid-template-columns: minmax(0, 1fr); }
  .op-side { position: static; height: auto; padding: 14px 16px; }
  .op-side nav { flex-direction: row; flex-wrap: wrap; }
  .op-side nav a.on::before { display: none; }
  .op-side h4 { display: none; }
  .op-close { margin-top: 10px; }
  .op-user { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
  .op-user .logout { margin: 0 0 0 auto; }
  .container, body.page-wide .container { padding: 0 16px; }
}
@media (max-width: 760px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .wissen-grid { grid-template-columns: 1fr; }
  .bereiche { grid-template-columns: 1fr; }
  .bereich span { display: none; }
  .topbar-inner { gap: 14px; padding: 0 16px; }
  .topbar nav { gap: 0; }
  .topbar .user .uname { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .btn:hover, .camp-card:hover, .bereich:hover, .cust-card:hover { transform: none; }
}

/* =====================================================================
   Stärkere CI-Anmutung der Arbeitsflächen (Stand 29.10.2026)
   Bühne oben wie der Website-Hero, Inhalte auf weißen Karten, Spaltenköpfe als Eyebrow
   ===================================================================== */

/* Bühne: Night-Grund, Teal-Glow links oben, Rot-Glow rechts unten, 56-px-Raster */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--as-night-800); color: var(--as-white);
  border-radius: var(--as-radius-2xl); padding: 30px 34px 26px; margin: 0 0 18px; box-shadow: var(--as-shadow-card); }
.hero::before { content: ""; position: absolute; inset: -30%; z-index: -2; pointer-events: none; filter: blur(40px);
  background: radial-gradient(34% 52% at 12% 10%, rgba(var(--as-teal-rgb), .62) 0%, transparent 70%),
              radial-gradient(30% 48% at 96% 100%, rgba(var(--as-red-rgb), .26) 0%, transparent 70%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(var(--as-white-rgb), .045) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--as-white-rgb), .045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(80% 90% at 70% 40%, #000 25%, transparent 100%); mask-image: radial-gradient(80% 90% at 70% 40%, #000 25%, transparent 100%); }
.hero-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.hero h1 { color: var(--as-white); font-size: 2.6rem; line-height: 1.06; letter-spacing: -0.03em; font-weight: var(--as-fw-light); margin: 14px 0 0; }
.hero h1 strong { font-weight: var(--as-fw-black); }
.hero-pill { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px 0 10px; border-radius: var(--as-radius-pill);
  font-size: 0.6875rem; font-weight: var(--as-fw-black); letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
  color: rgba(var(--as-white-rgb), .78); background: rgba(var(--as-white-rgb), .06); border: 1px solid rgba(var(--as-white-rgb), .16);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hero-pill .dot { margin: 0; width: 7px; height: 7px; }
.hero-pill.rot { color: var(--as-red-300); border-color: rgba(var(--as-red-rgb), .45); }
.hero-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--as-red-500); flex: none; }
.hero-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.btn.btn-md { height: 47px; padding: 0 23px; font-size: 0.9375rem; }
.hero .btn { box-shadow: var(--as-shadow-red); }
.hero .umschalter { background: rgba(var(--as-white-rgb), .07); border-color: rgba(var(--as-white-rgb), .14); }
.hero .umschalter button { color: rgba(var(--as-white-rgb), .7); }
.hero .umschalter button.on { background: var(--as-white); color: var(--as-ink-900); box-shadow: none; }
.hero .back { color: rgba(var(--as-white-rgb), .6); margin-bottom: 14px; }
.hero .back:hover { color: var(--as-white); }

/* Kennzahlen in der Bühne: Wert ExtraBold, Label VERSAL in Akzentfarbe */
.hero-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 26px; border-top: 1px solid rgba(var(--as-white-rgb), .12); }
.hk { display: flex; flex-direction: column-reverse; gap: 8px; padding: 18px 20px 2px 0; }
.hk + .hk { padding-left: 22px; border-left: 1px solid rgba(var(--as-white-rgb), .10); }
.hk .v { font-size: 2.6rem; line-height: 1; letter-spacing: var(--as-ls-kpi); font-weight: var(--as-fw-black); color: var(--as-white); font-variant-numeric: tabular-nums; }
.hk .l { font-size: 0.625rem; font-weight: var(--as-fw-black); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(var(--as-white-rgb), .55); }
.hk.rot .l { color: var(--as-red-300); }
.hk.gelb .l { color: #E8B45C; }
.hk.teal .l { color: var(--as-teal-300); }
.seiten-hinweis { margin: 0 0 10px; }

/* Filter direkt unter der Bühne */
.hero + .filter-form { margin-top: 0; }

/* Board und Kunden-Kanban: Spalten als weiße Karten, Spaltenkopf als Eyebrow */
.board { gap: 14px; }
.board-col { background: var(--as-surface); border: 1px solid var(--as-border-card); border-radius: var(--as-radius-xl); padding: 14px 12px 8px;
  box-shadow: var(--as-shadow-xs); }
.board-col.drop { background: rgba(var(--as-teal-rgb), .06); box-shadow: inset 0 0 0 2px var(--as-teal-500); }
.board-col > h3, .col-kopf { display: flex; align-items: center; gap: 10px; margin: 0 4px 0; padding: 0 0 12px; border-bottom: 1px solid var(--as-border);
  font-size: var(--as-fs-eyebrow); font-weight: var(--as-fw-black); letter-spacing: var(--as-ls-eyebrow); text-transform: uppercase; color: var(--as-text-label); }
.board-col > h3 .col-title, .col-kopf .col-title { flex: 1; min-width: 0; display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-col > h3 .col-count, .col-kopf .col-count { color: var(--as-text); letter-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.board-col .nr, .col-kopf .nr { position: relative; display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 8px; flex: none;
  border-radius: var(--as-radius-sm); font-size: 0.75rem; font-weight: var(--as-fw-black); letter-spacing: .02em; color: var(--as-accent); font-variant-numeric: tabular-nums; }
.board-col .nr::before, .col-kopf .nr::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: .1; }
.board-col:nth-child(even) .nr { color: var(--as-secondary-text); }
.col-hint { margin: 10px 4px 12px; font-size: 12px; }
.board-col > h3 + .camp-card { margin-top: 12px; }
.board-col.closed { background: rgba(var(--as-white-rgb), .55); border-style: dashed; box-shadow: none; }
.board-col.closed .nr { color: var(--as-text-label); }

/* Karten in den Spalten: ruhige Fläche, beim Überfahren weiß mit tiefem Schatten */
.camp-card { background: var(--as-surface-sunken); border-color: var(--as-border-field); border-radius: var(--as-radius-md); padding: 12px 13px 11px 15px; box-shadow: none; }
.camp-card:hover { background: var(--as-surface); border-color: var(--as-line-300); }
.camp-card strong { font-weight: var(--as-fw-black); letter-spacing: -0.015em; }
.camp-card .camp-name { margin: 2px 0 8px; }
.camp-card .tag { background: var(--as-surface); }
.camp-card .tag::before { opacity: .12; }
.kunden-board .board-col { padding-top: 16px; }
.ampel-col::before { left: 18px; right: 18px; }
.kunden-karte .kk-camp .tag { flex: none; }

/* Handlungsbedarf: zwei Kartenspalten, Dringend und Im Blick */
.warn-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.warn-col { background: var(--as-surface); border: 1px solid var(--as-border-card); border-radius: var(--as-radius-xl); padding: 18px 16px 10px;
  box-shadow: var(--as-shadow-card); }
.warn-col .col-kopf { margin: 0 4px 12px; }
.warn-col.gelb .col-kopf .nr { color: var(--as-warning); }
.warn-card { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 13px 14px 13px 18px; margin-bottom: 8px; text-decoration: none;
  color: var(--as-text-body); background: var(--as-surface-sunken); border: 1px solid var(--as-border-field); border-radius: var(--as-radius-md);
  transition: transform var(--as-dur-slow) var(--as-ease), box-shadow var(--as-dur-slow) var(--as-ease), background-color var(--as-dur) var(--as-ease); }
.warn-card::before { content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--as-red-500); }
.warn-card.gelb::before { background: var(--gelb); }
.warn-card:hover { color: var(--as-text-body); background: var(--as-surface); transform: translateY(-2px); box-shadow: var(--as-shadow-lg); }
.wc-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wc-kopf strong { color: var(--as-text); font-weight: var(--as-fw-black); letter-spacing: -0.015em; font-size: 14.5px; }
.wc-text { font-size: 14px; line-height: 1.5; }

/* Kundenseite: Bühne mit Bereichen als Glas-Kacheln */
.hero--kunde { padding-bottom: 22px; }
.hero--kunde h1 { font-size: 2.4rem; }
.hero-pill.ampel.rot { color: var(--as-red-300); }
.hero-pill.ampel.gelb { color: #E8B45C; }
.hero-pill.ampel.gruen { color: #6FC39D; }
.hero .bereiche { margin-top: 24px; }
.hero .bereich { background: rgba(var(--as-white-rgb), .06); border-color: rgba(var(--as-white-rgb), .14); color: var(--as-white); box-shadow: none;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background-image: none; }
.hero .bereich span { color: rgba(var(--as-white-rgb), .6); }
.hero .bereich:hover { background: rgba(var(--as-white-rgb), .12); border-color: rgba(var(--as-white-rgb), .28); color: var(--as-white); box-shadow: none; }
.hero .bereich .count { background: rgba(var(--as-white-rgb), .14); color: var(--as-white); }
.hero .bereich.on { background: var(--as-white); border-color: var(--as-white); color: var(--as-ink-900); box-shadow: var(--as-shadow-lg); }
.hero .bereich.on span { color: var(--as-ink-600); }
.hero .bereich.on .count { background: rgba(var(--as-ink-rgb), .08); color: var(--as-ink-900); }
.hero .bereich.on::after { top: 16px; right: 16px; }
.hero + .tabs { margin-top: 0; }
.hero + .tabs-leer { height: 4px; }

/* Panels: Titel mit Haarlinie wie die CI-Eyebrows */
.panel > h2 { padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--as-border); }
.panel > h2::before { content: ""; width: 20px; height: 2px; border-radius: 2px; background: var(--as-red-500); flex: none; order: -1; margin-right: -2px; }
.panel > h2 { justify-content: flex-start; }
.panel > h2 > .hint:last-child, .panel > h2 > a.hint:last-child, .panel > h2 > .linkbtn:last-child { margin-left: auto; }
.akte-grid > div > .panel:nth-child(even) > h2::before, .akte-grid > .panel:nth-child(even) > h2::before { background: var(--as-teal-500); }

@media (max-width: 960px) {
  .hero { padding: 22px 20px; border-radius: var(--as-radius-xl); }
  .hero h1, .hero--kunde h1 { font-size: 1.9rem; }
  .hero-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hk:nth-child(3) { padding-left: 0; border-left: 0; }
  .warn-cols { grid-template-columns: 1fr; }
}
/* Agenturseiten: kompaktere Bühne, damit das Board samt Scrollleiste in den Bildschirm passt */
.agentur-main .hero { padding: 22px 30px 16px; }
.agentur-main .hero h1 { font-size: 2.15rem; margin-top: 10px; }
.agentur-main .hero-kpis { margin-top: 18px; }
.agentur-main .hk { padding-top: 13px; gap: 6px; }
.agentur-main .hk .v { font-size: 2.05rem; }
.board-scroll { max-height: calc(100vh - 410px); min-height: 380px; }
.ampel-col.rot .nr { color: var(--as-accent-text); }
.ampel-col.gelb .nr { color: var(--as-warning); }
.ampel-col.gruen .nr { color: var(--as-success); }

/* =====================================================================
   Kundenübersicht: Panels nach CI-Muster der Website
   Eyebrow (Nummern-Chip, VERSAL-Label, Haarlinie) → leichte Headline mit einem fetten Kernwort
   ===================================================================== */
.uebersicht .panel { padding: 24px var(--as-card-pad) 26px; }
.p-kopf { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--as-border); }
.p-kopf .nr { position: relative; display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 8px; flex: none;
  border-radius: var(--as-radius-sm); font-size: 0.78rem; font-weight: var(--as-fw-black); letter-spacing: .02em; line-height: 1;
  color: var(--as-accent); font-variant-numeric: tabular-nums; }
.p-kopf .nr::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: .1; }
.p-kopf .nr--teal { color: var(--as-secondary-text); }
.p-label { font-size: var(--as-fs-eyebrow); font-weight: var(--as-fw-black); letter-spacing: var(--as-ls-eyebrow); text-transform: uppercase; color: var(--as-text-label); }
.p-extra { margin-left: auto; font-size: 12.5px; color: var(--as-text-muted); text-align: right; }
.p-link { display: inline-flex; align-items: center; gap: 6px; color: var(--as-accent-text); font-weight: var(--as-fw-bold); text-decoration: none; }
.p-titel { margin: 18px 0 18px; padding: 0; border: 0; font-size: var(--as-fs-h2); line-height: var(--as-lh-h2); letter-spacing: var(--as-ls-h2);
  font-weight: var(--as-fw-light); color: var(--as-text); display: block; }
.p-titel::before { display: none; }
.p-titel strong { font-weight: var(--as-fw-black); }
.ampel-wort.rot { color: var(--as-accent-text); } .ampel-wort.gelb { color: var(--as-warning); } .ampel-wort.gruen { color: var(--as-success); }

/* Pfeil wie auf der Website: rückt beim Überfahren 4 px nach rechts */
.pfeil { width: 14px; height: 14px; flex: none; transition: transform var(--as-dur-slow) var(--as-ease); }
a:hover > .pfeil, .wahl:hover .pfeil { transform: translateX(4px); }

/* Handlungsbedarf als Karten */
.warn-reihe { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.warn-reihe .warn-card { margin: 0; }
.warn-reihe .warn-card:hover { transform: none; box-shadow: none; background: var(--as-surface-sunken); }
.warn-card.rot .wc-kopf strong { color: var(--as-accent-text); }
.warn-card.gelb .wc-kopf strong { color: var(--as-warning); }
.warn-reihe .wc-kopf strong { font-size: var(--as-fs-label); letter-spacing: var(--as-ls-label); text-transform: uppercase; }
.warn-reihe .wc-text { color: var(--as-text); font-size: 14.5px; }

/* Grundlage: Wahlkarten mit Akzentstrich und Buchstabe (Website „A Auftragsgewinnung“) */
.wahl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.wahl { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 132px; padding: 16px 16px 14px; text-decoration: none; color: var(--as-text);
  background: var(--as-surface); border: 1px solid var(--as-border-card); border-radius: var(--as-radius-lg); box-shadow: var(--as-shadow-xs);
  background-image: radial-gradient(120% 100% at 100% 0%, rgba(var(--as-red-rgb), .06) 0%, transparent 62%);
  transition: transform var(--as-dur-slow) var(--as-ease), box-shadow var(--as-dur-slow) var(--as-ease), border-color var(--as-dur) var(--as-ease); }
.wahl.teal { background-image: radial-gradient(120% 100% at 100% 0%, rgba(var(--as-teal-rgb), .08) 0%, transparent 62%); }
.wahl:hover { color: var(--as-text); transform: translateY(-3px); box-shadow: var(--as-shadow-lg); border-color: var(--as-line-400); }
.wahl-mark { display: flex; align-items: center; gap: 10px; font-size: 0.6875rem; font-weight: var(--as-fw-black); color: var(--as-accent-text); margin-bottom: 4px; }
.wahl-mark::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: currentColor; }
.wahl.teal .wahl-mark { color: var(--as-secondary-text); }
.wahl strong { font-size: 15px; font-weight: var(--as-fw-black); letter-spacing: -0.015em; line-height: 1.3; }
.wahl .status { position: relative; isolation: isolate; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px;
  border-radius: var(--as-radius-sm); font-size: 0.75rem; font-weight: var(--as-fw-bold); color: var(--as-text-muted); margin-top: auto; }
.wahl .status::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: currentColor; opacity: .1; }
.wahl.ok .status { color: var(--as-success); }
.wahl.ok .status::after { content: "✓"; order: -1; font-size: 11px; }
.wahl .pfeil { position: absolute; right: 14px; bottom: 16px; color: var(--as-text-label); }
.wahl:hover .pfeil { color: var(--as-accent-text); }

/* Formularzeilen der Übersicht: Datei- und Datumsfelder im CI-Feldstil */
.uebersicht .inline-form { gap: 12px; align-items: flex-end; }
.uebersicht .inline-form .btn { height: 44px; }
.uebersicht .inline-form .btn.small { height: 38px; }
input[type=file] { min-height: 44px; padding: 5px; width: 100%; background: var(--as-surface-sunken); border: 1px dashed var(--as-line-400);
  border-radius: var(--as-radius-md); font: var(--as-fw-medium) 13px/1.4 var(--as-font); color: var(--as-text-muted); cursor: pointer; }
input[type=file]:hover { border-color: var(--as-teal-500); }
input[type=file]::file-selector-button { height: 32px; margin-right: 10px; padding: 0 12px; font: var(--as-fw-bold) 0.75rem/1 var(--as-font); letter-spacing: var(--as-ls-button);
  color: var(--as-text); background: var(--as-surface); border: 1px solid var(--as-border-card); border-radius: 9px; cursor: pointer;
  transition: border-color var(--as-dur-fast), background-color var(--as-dur-fast); }
input[type=file]::file-selector-button:hover { border-color: var(--as-line-500); }
input[type=date], input[type=number] { font-variant-numeric: tabular-nums; }
input[type=date]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.uebersicht .check-inline { align-self: center; margin-bottom: 10px; }

/* Aufklapper mit Chevron statt Dreieck */
details.more > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--as-dur) var(--as-ease); margin-right: 2px; }
details.more[open] > summary::before { transform: rotate(45deg) translate(-1px, -1px); }

/* Kampagnen als ruhige Karten mit Akzentstrich */
.uebersicht .campaign-row { position: relative; background: var(--as-surface-sunken); border-color: var(--as-border-field); border-radius: var(--as-radius-lg); padding: 16px 18px 14px; }
.uebersicht .campaign-row .top strong { display: inline-flex; align-items: center; gap: 10px; font-weight: var(--as-fw-black); letter-spacing: -0.015em; }
.uebersicht .campaign-row .top strong::before { content: ""; width: 20px; height: 2px; border-radius: 2px; background: var(--as-teal-500); }
.uebersicht .campaign-row .top > span { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.uebersicht .campaign-row .tag { background: var(--as-surface); }
.uebersicht .campaign-row input:not([type=checkbox]), .uebersicht .campaign-row select { background-color: var(--as-surface); }
.verlauf { list-style: none; margin: 12px 0 0; padding: 0; font-size: 12.5px; color: var(--as-text-muted); }
.verlauf li { padding: 4px 0 4px 16px; position: relative; }
.verlauf li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--as-teal-300); }

/* Aufgaben */
.uebersicht .task { padding: 12px 0; }
.uebersicht .task .tag { min-width: 52px; justify-content: center; }

/* Leere Zustände */
.leer { margin: 0 0 4px; padding: 16px 18px; font-size: 14px; color: var(--as-text-muted); background: var(--as-surface-sunken);
  border: 1px dashed var(--as-line-400); border-radius: var(--as-radius-md); }

/* Ampel: Wahl-Chips und Verlauf als Zeitleiste */
.uebersicht .ampel-pick button { height: 38px; padding: 0 15px; font-size: 13.5px; }
.uebersicht .ampel-pick button:hover { background: var(--as-ink-900); border-color: var(--as-ink-900); color: var(--as-white); }
.zeitleiste { list-style: none; margin: 18px 0 0; padding: 0 0 0 4px; position: relative; }
.zeitleiste::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 1px; background: var(--as-border); }
.zeitleiste li { position: relative; display: flex; gap: 12px; align-items: baseline; padding: 5px 0 5px 22px; font-size: 13px; color: var(--as-text-body); }
.zeitleiste li::before { content: ""; position: absolute; left: 0; top: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--as-line-400);
  box-shadow: 0 0 0 3px var(--as-surface); }
.zeitleiste li.rot::before { background: var(--as-red-500); }
.zeitleiste li.gelb::before { background: var(--gelb); }
.zeitleiste li.gruen::before { background: var(--as-success); }
.zl-datum { font-weight: var(--as-fw-bold); color: var(--as-text); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Laufzeit als kleine Kennzahlen */
.mini-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 0 14px; border: 1px solid var(--as-border-field);
  border-radius: var(--as-radius-lg); background: var(--as-surface-sunken); overflow: hidden; }
.mk { display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 13px; min-width: 0; }
.mk + .mk { border-left: 1px solid var(--as-border-field); }
.mk-l { font-size: 0.625rem; font-weight: var(--as-fw-black); letter-spacing: 0.16em; text-transform: uppercase; color: var(--as-text-label); }
.mk-v { font-size: 1.05rem; font-weight: var(--as-fw-black); letter-spacing: -0.02em; color: var(--as-text); font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-s { font-size: 12px; color: var(--as-text-muted); }
.mk.warn .mk-l, .mk.warn .mk-v { color: var(--as-accent-text); }

/* Kontakte */
.uebersicht .contact { padding: 12px 0; }
.uebersicht .contact strong { font-weight: var(--as-fw-black); letter-spacing: -0.01em; }

@media (max-width: 1180px) { .wahl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .mini-kpis { grid-template-columns: 1fr; } .mk + .mk { border-left: 0; border-top: 1px solid var(--as-border-field); } }
.wahl-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.wahl { min-height: 118px; padding: 16px 18px 15px; }
.wahl .pfeil { top: 16px; bottom: auto; right: 16px; }
.wahl .status { height: auto; min-height: 22px; padding: 4px 8px; line-height: 1.25; white-space: normal; }
.wahl strong { padding-right: 18px; }
/* Formulare in der schmalen rechten Spalte: ruhiges Zwei-Spalten-Raster */
.uebersicht #laufzeit .inline-form, .uebersicht #kontakte .inline-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 12px; align-items: end; }
.uebersicht #laufzeit .inline-form input, .uebersicht #kontakte .inline-form input,
.uebersicht #kontakte .inline-form select { width: 100% !important; }
.uebersicht #kontakte .inline-form label:last-of-type { grid-column: 1 / -1; }
.uebersicht #laufzeit .inline-form .btn, .uebersicht #kontakte .inline-form .btn { justify-self: start; }
.uebersicht #laufzeit .mini-kpis + details > summary, .uebersicht #kontakte details > summary { margin-top: 4px; }

/* ---------- Seitenleiste: breiter, Abschnitte deutlich getrennt ---------- */
.op-shell { grid-template-columns: 276px minmax(0, 1fr); }
.op-side { padding: 24px 16px 18px; gap: 0; }
.op-side .brand img { height: 26px; margin: 2px 12px 22px; }
.op-gruppe { padding: 14px 0 16px; border-top: 1px solid rgba(var(--as-white-rgb), .09); }
.op-gruppe:first-of-type { border-top: 0; padding-top: 4px; }
.op-gruppe h4 { margin: 0 12px 10px; display: flex; align-items: center; gap: 10px; }
.op-gruppe h4::after { content: ""; flex: 1; height: 1px; background: rgba(var(--as-white-rgb), .06); }
.op-side nav a { height: 40px; font-size: 0.9rem; }
.op-side nav a.on::before { left: -16px; }
.op-fuss { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.op-fuss .op-close { margin: 0; padding: 14px 14px 13px; background: rgba(var(--as-white-rgb), .04); border: 1px solid rgba(var(--as-white-rgb), .08);
  border-radius: var(--as-radius-md); }
.op-einst { padding: 12px 0 0; border-top: 1px solid rgba(var(--as-white-rgb), .09); }
.op-einst a svg { width: 16px; height: 16px; flex: none; opacity: .8; }
.op-fuss .op-user { margin-top: 0; padding-top: 14px; }

/* ---------- Board: Spaltenüberschriften fett und dunkel ---------- */
.board-col > h3 .col-title, .col-kopf .col-title { color: var(--as-text); font-size: 0.75rem; font-weight: var(--as-fw-black); letter-spacing: 0.1em; }

/* ---------- Kunden-Kanban: Status oben rechts ---------- */
.kunden-karte { padding-right: 13px; }
.kunden-karte strong { padding-right: 76px; }
.kk-status { position: absolute; top: 11px; right: 11px; isolation: isolate; display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px;
  border-radius: var(--as-radius-sm); font-size: 10.5px; font-weight: var(--as-fw-bold); color: var(--as-success); }
.kk-status::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: currentColor; opacity: .1; }
.kk-status.ruhend { color: var(--as-warning); }
.kk-status.gekuendigt { color: var(--as-danger); }

/* ---------- Kundenübersicht: Headline ohne zusätzliche Linien, saubere Abstände ---------- */
.panel > h2.p-titel { margin: 16px 0 20px; padding: 0; border: 0; display: block; }
.panel > h2.p-titel::before { content: none; }
.p-kopf + .p-titel + * { margin-top: 0; }
.uebersicht .panel > .p-kopf { margin: 0; }

/* ---------- Checkliste: automatisch erkannte Schritte ---------- */
.check.auto input[type=checkbox] { opacity: 1; cursor: default; }
.check.auto label { cursor: default; }
.auto-hinweis { display: block; margin-top: 2px; font-size: 11.5px; color: var(--as-success); text-decoration: none; }
.check.done.auto label { text-decoration: none; color: var(--as-text-muted); }

/* Seitentitel ausdrücklich fett (Sperrliste, Einstellungen, Kampagnen-Antworten) */
h1.h1-fett { font-weight: var(--as-fw-black); letter-spacing: -0.03em; }

/* ---------- asOS: Bühne, Chat als weiße Karte, Blasen im CI ---------- */
.hero-lead { margin: 10px 0 0; max-width: 44em; color: rgba(var(--as-white-rgb), .72); font-size: 15px; line-height: 1.6; }
.chat-karte { display: flex; flex-direction: column; height: calc(100vh - 300px); min-height: 440px; background: var(--as-surface);
  border: 1px solid var(--as-border-card); border-radius: var(--as-radius-xl); box-shadow: var(--as-shadow-card); overflow: hidden; }
.chat-karte .chat-log { flex: 1; overflow-y: auto; padding: 24px 26px 10px;
  background: radial-gradient(60% 50% at 100% 0%, rgba(var(--as-teal-rgb), .05) 0%, transparent 70%), var(--as-surface); }
.chat-karte .msg { max-width: 74%; padding: 13px 17px; border-radius: var(--as-radius-lg); margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; }
.chat-karte .msg.user { margin-left: auto; background: var(--as-night-800); color: var(--as-white); border-bottom-right-radius: 4px; box-shadow: var(--as-shadow-xs); }
.chat-karte .msg.bot { background: var(--as-surface-sunken); color: var(--as-text); border: 1px solid var(--as-border-field); border-bottom-left-radius: 4px; box-shadow: none; }
.msg-absender { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 0.625rem; font-weight: var(--as-fw-black); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--as-accent-text); white-space: normal; }
.msg-absender::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--as-red-500); }
.msg.denkt span:last-child { color: var(--as-text-muted); animation: as-puls 1.4s var(--as-ease) infinite; }
.chat-vorschlaege { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 26px 0; border-top: 1px solid var(--as-border-subtle); }
.chat-vorschlaege button { height: 34px; padding: 0 14px; font: var(--as-fw-bold) 0.8125rem/1 var(--as-font); color: var(--as-text); cursor: pointer;
  background: var(--as-surface-sunken); border: 1px solid var(--as-border-field); border-radius: var(--as-radius-pill);
  transition: background-color var(--as-dur-fast), border-color var(--as-dur-fast), color var(--as-dur-fast); }
.chat-vorschlaege button:hover { background: var(--as-ink-900); border-color: var(--as-ink-900); color: var(--as-white); }
.chat-karte .chat-input { padding: 14px 26px 22px; gap: 12px; }
.chat-karte .chat-input textarea { min-height: 52px; background: var(--as-surface-sunken); border-color: var(--as-border-field); font-size: 14.5px; }
.chat-karte .chat-input textarea:focus { background: var(--as-surface); }
.chat-karte .chat-input button { height: auto; min-width: 124px; padding: 0 22px; font-size: 0.9375rem; box-shadow: var(--as-shadow-red); }
.chat-karte .chat-input button:hover .pfeil { transform: translateX(4px); }

/* asOS-Eingabe: ein schlankes Feld mit Senden-Knopf darin, Vorschläge als feine Chips */
.chat-fuss { padding: 14px 26px 18px; border-top: 1px solid var(--as-border-subtle); background: var(--as-surface); }
.chat-fuss .chat-vorschlaege { padding: 0 0 12px; border: 0; align-items: center; gap: 6px; }
.vs-label { margin-right: 4px; font-size: 0.625rem; font-weight: var(--as-fw-black); letter-spacing: 0.16em; text-transform: uppercase; color: var(--as-text-label); }
.chat-fuss .chat-vorschlaege button { height: 28px; padding: 0 12px; font: 600 0.78rem/1 var(--as-font); letter-spacing: -0.005em; color: var(--as-ink-700);
  background: transparent; border: 1px solid var(--as-line-300); border-radius: var(--as-radius-pill); }
.chat-fuss .chat-vorschlaege button:hover { color: var(--as-ink-900); background: var(--as-surface-sunken); border-color: var(--as-line-500); }
.composer { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 16px; background: var(--as-surface); border: 1px solid var(--as-line-300);
  border-radius: 14px; box-shadow: var(--as-shadow-xs); transition: border-color var(--as-dur-fast), box-shadow var(--as-dur-fast); }
.composer:hover { border-color: var(--as-line-400); }
.composer:focus-within { border-color: var(--as-focus); box-shadow: var(--as-ring); }
.composer textarea { flex: 1; min-height: 38px; max-height: 180px; padding: 9px 0; resize: none; border: 0; outline: none; background: transparent;
  font: 500 0.9375rem/1.45 var(--as-font); color: var(--as-text); }
.composer textarea::placeholder { color: var(--as-ink-500); font-weight: 500; }
.composer button { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; flex: none; cursor: pointer;
  font: var(--as-fw-bold) 0.8125rem/1 var(--as-font); letter-spacing: var(--as-ls-button); color: var(--as-white); background: var(--as-red-500);
  border: 1px solid rgba(var(--as-white-rgb), .13); border-radius: var(--as-radius-md);
  transition: transform var(--as-dur-slow) var(--as-ease), box-shadow var(--as-dur-slow) var(--as-ease), background-color var(--as-dur) var(--as-ease); }
.composer button:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -14px rgba(var(--as-red-rgb), .7); }
.composer button:hover .pfeil { transform: translateX(3px); }
.composer button:disabled { opacity: .45; cursor: wait; transform: none; box-shadow: none; }
.composer button .pfeil { width: 13px; height: 13px; }
.composer-hint { margin: 8px 2px 0; font-size: 11.5px; font-weight: 500; color: var(--as-text-muted); }
.composer-hint kbd { display: inline-block; min-width: 18px; padding: 1px 5px; font: 600 10.5px/1.4 var(--as-font); color: var(--as-ink-700);
  background: var(--as-surface-sunken); border: 1px solid var(--as-line-300); border-bottom-width: 2px; border-radius: 5px; text-align: center; }

/* asOS-Eingabe, zweite Fassung: klar sichtbare Linien, eigene Fläche, weißes Feld darauf */
.chat-karte { border-color: var(--as-line-400); }
.chat-fuss { padding: 16px 26px 16px; background: var(--as-mist-50); border-top: 1px solid var(--as-line-400); }
.vs-label { color: var(--as-ink-600); }
.chat-fuss .chat-vorschlaege { padding-bottom: 14px; gap: 8px; }
.chat-fuss .chat-vorschlaege button { height: 32px; padding: 0 14px; font: 600 0.8125rem/1 var(--as-font); color: var(--as-ink-900);
  background: var(--as-white); border: 1px solid var(--as-line-500); box-shadow: 0 1px 2px rgba(var(--as-ink-rgb), .06); }
.chat-fuss .chat-vorschlaege button:hover { color: var(--as-white); background: var(--as-ink-900); border-color: var(--as-ink-900); }
.composer { padding: 7px 7px 7px 18px; background: var(--as-white); border: 1px solid var(--as-line-500); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(var(--as-ink-rgb), .06), 0 8px 20px -16px rgba(var(--as-ink-rgb), .45); }
.composer:hover { border-color: var(--as-ink-500); }
.composer:focus-within { border-color: var(--as-teal-500); box-shadow: 0 0 0 3px rgba(var(--as-teal-rgb), .18); }
.composer textarea { min-height: 40px; padding: 10px 0; font-size: 0.95rem; }
.composer textarea::placeholder { color: var(--as-ink-600); }
.composer button { height: 40px; padding: 0 18px; font-size: 0.875rem; }
.composer-hint { margin-top: 10px; color: var(--as-ink-600); font-size: 12px; }
.composer-hint kbd { color: var(--as-ink-900); background: var(--as-white); border-color: var(--as-line-500); }

/* asOS-Eingabe, dritte Fassung: schwebende Eingabekarte im heutigen Chat-Stil */
.chat-karte { border-color: var(--as-border-card); }
.chat-fuss { padding: 6px 26px 22px; background: var(--as-surface); border-top: 0; }
.chat-fuss .chat-vorschlaege { padding: 0 0 12px; gap: 8px; }
.chat-fuss .chat-vorschlaege button { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px 0 10px;
  font: 600 0.8125rem/1 var(--as-font); letter-spacing: -0.01em; color: var(--as-ink-700); background: transparent;
  border: 1px solid rgba(var(--as-ink-rgb), .2); border-radius: var(--as-radius-pill); box-shadow: none;
  transition: color var(--as-dur-fast), border-color var(--as-dur-fast), background-color var(--as-dur-fast); }
.chat-fuss .chat-vorschlaege button svg { width: 13px; height: 13px; flex: none; color: var(--as-teal-500); transition: transform var(--as-dur) var(--as-ease); }
.chat-fuss .chat-vorschlaege button:hover { color: var(--as-ink-900); background: rgba(var(--as-teal-rgb), .06); border-color: var(--as-teal-500); }
.chat-fuss .chat-vorschlaege button:hover svg { transform: translate(1px, -1px); }
.composer { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 14px 12px 10px 18px; background: var(--as-white);
  border: 1px solid rgba(var(--as-ink-rgb), .22); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(var(--as-ink-rgb), .05), 0 18px 40px -26px rgba(var(--as-ink-rgb), .45); }
.composer:hover { border-color: rgba(var(--as-ink-rgb), .32); }
.composer:focus-within { border-color: var(--as-teal-500); box-shadow: 0 0 0 4px rgba(var(--as-teal-rgb), .12), 0 18px 40px -26px rgba(var(--as-ink-rgb), .45); }
.composer textarea { min-height: 26px; padding: 2px 6px 6px 0; font: 500 0.98rem/1.5 var(--as-font); }
.composer textarea::placeholder { color: var(--as-ink-500); font-weight: 500; }
.composer-leiste { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.composer .composer-hint { margin: 0; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; color: var(--as-ink-500); }
.composer .composer-hint .trenner { width: 3px; height: 3px; border-radius: 50%; background: var(--as-ink-400); margin: 0 4px; }
.composer .composer-hint kbd { min-width: 0; padding: 1px 5px; font: 600 10.5px/1.4 var(--as-font); color: var(--as-ink-700); background: var(--as-mist-50);
  border: 1px solid rgba(var(--as-ink-rgb), .16); border-bottom-width: 1px; border-radius: 5px; }
.composer button { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; background: var(--as-red-500);
  border: 0; color: var(--as-white); box-shadow: 0 8px 18px -10px rgba(var(--as-red-rgb), .8); }
.composer button svg { width: 16px; height: 16px; transition: transform var(--as-dur) var(--as-ease); }
.composer button:hover { transform: none; background: var(--as-red-600); box-shadow: 0 10px 22px -10px rgba(var(--as-red-rgb), .9); }
.composer button:hover svg { transform: translateY(-2px); }

/* ---------- Fortschritt des Autopiloten ---------- */
.ap { margin: -6px 0 20px; padding: 16px 20px 14px; background: var(--as-night-800); color: var(--as-white); border-radius: var(--as-radius-lg);
  box-shadow: var(--as-shadow-card); background-image: radial-gradient(60% 180% at 0% 0%, rgba(var(--as-teal-rgb), .5) 0%, transparent 70%); }
.ap-kopf { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.ap-titel { display: inline-flex; align-items: center; gap: 8px; font-size: 0.625rem; font-weight: var(--as-fw-black); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--as-red-300); white-space: nowrap; }
.ap-puls { width: 7px; height: 7px; border-radius: 50%; background: var(--as-red-500); animation: as-puls 1.6s var(--as-ease) infinite; }
.ap-schritt { flex: 1; min-width: 220px; font-weight: var(--as-fw-bold); font-size: 15px; letter-spacing: -0.01em; }
.ap-zahlen { font-size: 12.5px; color: rgba(var(--as-white-rgb), .68); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-zahlen strong { color: var(--as-white); font-size: 15px; font-weight: var(--as-fw-black); }
.ap-balken { height: 6px; margin: 12px 0 4px; border-radius: 999px; background: rgba(var(--as-white-rgb), .14); overflow: hidden; }
.ap-balken span { display: block; height: 100%; border-radius: inherit; transition: width .8s var(--as-ease);
  background: linear-gradient(90deg, var(--as-red-500), #FF5A5E); box-shadow: 0 0 12px rgba(var(--as-red-rgb), .6); }
.ap-details > summary { margin-top: 8px; color: rgba(var(--as-white-rgb), .7); font-size: 12.5px; }
.ap-details > summary:hover { color: var(--as-white); }
.ap-liste { list-style: none; margin: 10px 0 2px; padding: 0; display: grid; gap: 2px; }
.ap-liste li { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 8px; font-size: 13px; color: rgba(var(--as-white-rgb), .55); }
.ap-marke { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 50%; font-size: 10px; font-weight: var(--as-fw-black);
  border: 1.5px solid rgba(var(--as-white-rgb), .25); }
.ap-liste li.fertig, .ap-liste li.vorhanden { color: rgba(var(--as-white-rgb), .8); }
.ap-liste li.fertig .ap-marke, .ap-liste li.vorhanden .ap-marke { background: #6FC39D; border-color: #6FC39D; color: var(--as-night-800); }
.ap-liste li.laufend { color: var(--as-white); background: rgba(var(--as-white-rgb), .07); font-weight: var(--as-fw-bold); }
.ap-liste li.laufend .ap-marke { border-color: var(--as-red-500); border-top-color: transparent; animation: ap-dreh 1s linear infinite; }
.ap-label { flex: 1; min-width: 0; }
.ap-dauer { font-size: 12px; color: rgba(var(--as-white-rgb), .5); font-variant-numeric: tabular-nums; }
@keyframes ap-dreh { to { transform: rotate(360deg); } }

/* ---------- Kundenseiten: Bühne über volle Breite, darunter Seitenmenü links und Inhalt rechts ---------- */
.kunde-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 26px; align-items: start; margin-top: 4px; }
.kunde-inhalt { min-width: 0; }
.kunde-nav { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 2px; padding: 10px; max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--as-surface); border: 1px solid var(--as-border-card); border-radius: var(--as-radius-xl); box-shadow: var(--as-shadow-xs); }
.kn-reiter { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border-radius: var(--as-radius-md); text-decoration: none;
  color: var(--as-ink-700); font-weight: var(--as-fw-bold); font-size: 14px; letter-spacing: -0.01em; transition: background-color var(--as-dur-fast), color var(--as-dur-fast); }
.kn-reiter:hover { background: var(--as-surface-sunken); color: var(--as-text); }
.kn-reiter.on { background: var(--as-night-800); color: var(--as-white); }
.kn-reiter .kn-text { flex: 1; min-width: 0; }
.kn-reiter .nr { position: relative; display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 6px; flex: none; border-radius: var(--as-radius-sm);
  font-size: 0.72rem; font-weight: var(--as-fw-black); color: var(--as-secondary-text); font-variant-numeric: tabular-nums; }
.kn-reiter .nr::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: currentColor; opacity: .12; }
.kn-reiter.on .nr { color: var(--as-red-300); }
.kn-reiter.on .count { background: rgba(var(--as-white-rgb), .16); color: var(--as-white); }
.kn-gliederung { display: flex; flex-direction: column; gap: 1px; margin: 4px 0 8px 18px; padding-left: 12px; border-left: 1px solid var(--as-line-300); }
.kn-punkt { position: relative; display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; border-radius: 8px; text-decoration: none;
  color: var(--as-ink-600); font-size: 13px; font-weight: 600; line-height: 1.35; transition: background-color var(--as-dur-fast), color var(--as-dur-fast); }
.kn-punkt[hidden] { display: none; }
.kn-punkt:hover { color: var(--as-text); background: var(--as-surface-sunken); }
.kn-punkt.on { color: var(--as-text); background: rgba(var(--as-red-rgb), .06); }
.kn-punkt.on::before { content: ""; position: absolute; left: -13px; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; background: var(--as-red-500); }
.kn-punkt .kn-text { flex: 1; min-width: 0; }
.kn-extra { flex: none; font-size: 11px; font-weight: 600; color: var(--as-ink-500); font-variant-numeric: tabular-nums; }
.kn-gruppe { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 2px; padding: 4px 10px; text-decoration: none; color: var(--as-text);
  font-size: 12.5px; font-weight: var(--as-fw-black); letter-spacing: -0.01em; line-height: 1.35; }
.kn-gruppe:first-child { margin-top: 2px; }
.kn-gruppe:hover { color: var(--as-accent-text); }
.kn-zg { flex: none; font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--as-accent-text); }
.kn-leer { padding: 2px 10px 6px; font-size: 12px; color: var(--as-ink-500); }
/* Panels und Abschnitte nicht unter den oberen Rand scrollen */
.kunde-inhalt [id] { scroll-margin-top: 20px; }
.kunde-inhalt > .ap { margin-top: 0; }
@media (max-width: 1100px) {
  .kunde-layout { grid-template-columns: minmax(0, 1fr); }
  .kunde-nav { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; }
  .kn-gliederung { display: none; }
}
.kn-gruppe[hidden] { display: none; }
/* Doppelte Auswahl im Inhalt nur zeigen, wenn das Seitenmenü keine Gliederung hat (schmale Fenster) */
@media (min-width: 1101px) { .kunde-inhalt .nur-schmal { display: none; } }
/* Abbrechen im Fortschrittsbalken: zurückhaltend, damit er nicht mit der roten Hauptaktion konkurriert */
.ap-abbruch { margin: 0 0 0 4px; }
.ap-abbruch[hidden] { display: none; }
.ap-abbruch button { height: 30px; padding: 0 12px; font: var(--as-fw-bold) 0.75rem/1 var(--as-font); color: var(--as-white); cursor: pointer;
  background: rgba(var(--as-white-rgb), .08); border: 1px solid rgba(var(--as-white-rgb), .22); border-radius: 9px;
  transition: background-color var(--as-dur-fast), border-color var(--as-dur-fast); }
.ap-abbruch button:hover { background: rgba(var(--as-red-rgb), .25); border-color: var(--as-red-300); }
.ap-hinweis { margin: 0 0 18px; }
/* Seitenleiste: nur die Trennlinien zwischen den Abschnitten, keine zweite Linie neben der Überschrift */
.op-gruppe h4::after { content: none; }
.op-gruppe { padding: 16px 0 14px; }
.op-gruppe h4 { margin-bottom: 8px; }

/* Testumgebung: deutlich sichtbares Band oben */
.test-band { position: sticky; top: 0; z-index: 100; padding: 6px 16px; text-align: center; font-size: 12px; font-weight: var(--as-fw-black);
  letter-spacing: 0.12em; text-transform: uppercase; color: #3A2600; background: #F2B544; box-shadow: 0 2px 10px -4px rgba(0,0,0,.35); }
.test-band + .op-shell .op-side { top: 29px; height: calc(100vh - 29px); }
/* Ohne Hinweis-Pille steht die Überschrift ganz oben in der Bühne */
.hero-top > div > h1:first-child, .hero--kunde .hero-top > div > h1:first-child { margin-top: 0; }