/* Umsatzpilot-Branding: helle Basis, Sapphire nur für Hauptaktion und aktive Navigation */
:root {
  color-scheme: light;
  --bg: #f3f6f2;
  --card: #ffffff;
  --sunken: #f7f9f6;
  --ink: #303030;
  --muted: #6b716c;
  --line: #e3e8e2;
  --line-soft: #eef1ed;
  --accent: #00558b;
  --accent-hover: #003d66;
  --accent-ink: #00558b;
  --accent-soft: #e6f0f6;
  --deep: #003d66;
  --deep-ink: #ffffff;
  --deep-muted: #9dd0f5;
  --chart: #00558b;
  --chart-soft: #b9d4e6;
  --danger: #b4322a;
  --danger-soft: #fcebea;
  --warn-ink: #8a5a0b;
  --warn-soft: #fbf1dc;
  --ok-ink: #1d6b34;
  --ok-soft: #e3f3e7;
  --neutral-soft: #eff1ee;
  --cal-google: #6b4fbb;
  --cal-google-soft: #efeafb;
  --field: #ffffff;
  --scrim: rgba(20, 30, 40, .32);
  --shadow: 0 1px 2px rgba(20, 30, 40, .04), 0 8px 24px rgba(20, 30, 40, .06);
  --radius: 12px;
  --r-m: 8px;
  --r-s: 6px;
  --serif: 'Jacques Francois', Georgia, serif;
  --display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
}
/* Dunkler Modus zum Umschalten: Ebenen über Grautöne, Sapphire aufgehellt für Lesbarkeit */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1114;
  --card: #161a1f;
  --sunken: #0b0d10;
  --ink: #e6eaee;
  --muted: #8b95a1;
  --line: #232a32;
  --line-soft: #1d232a;
  --accent: #00558b;
  --accent-hover: #0a6aa8;
  --accent-ink: #6fb1e3;
  --accent-soft: #0c2a40;
  --deep: #0c2a40;
  --deep-ink: #e6eaee;
  --deep-muted: #85b7eb;
  --chart: #3d8bc9;
  --chart-soft: #1f3f58;
  --danger: #f09595;
  --danger-soft: #3a1d1d;
  --warn-ink: #f2c36b;
  --warn-soft: #3a2c12;
  --ok-ink: #8fd3a2;
  --ok-soft: #16301e;
  --neutral-soft: #1d232a;
  --cal-google: #b9a6f2;
  --cal-google-soft: #2a2140;
  --field: #0e1114;
  --scrim: rgba(0, 0, 0, .55);
  --shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 14px/1.5 var(--sans); color: var(--ink); background: var(--bg); overflow-x: clip; -webkit-font-smoothing: antialiased; font-feature-settings: 'cv11', 'ss01'; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
a:hover { text-decoration-color: currentColor; }
h1, h2 { margin: 0; font-weight: 600; text-wrap: balance; }
h1, h2, .sub, .sp-n { overflow-wrap: anywhere; } /* lange Wörter ohne Leerzeichen dürfen die Seite nicht breiter machen */
.sp-antwort-leiste:has(input[name=intern]:checked) .sp-danach { display: none; } /* interne Notiz ändert den Status nicht */
h1 { font-family: var(--display); font-size: 24px; line-height: 1.2; letter-spacing: -0.005em; }
h2 { font-family: var(--sans); font-size: 14px; line-height: 1.4; letter-spacing: -0.005em; }
h1 em, h2 em { font: inherit; font-weight: 500; letter-spacing: inherit; color: var(--muted); }
/* Die Serifenschrift nur noch dort, wo die Marke spricht: Begrüßung und öffentliche Seiten */
h1.gruss em, .bare h1 em { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; color: var(--accent-ink); }
.sub, .muted { color: var(--muted); }
.sub { margin: 2px 0 0; text-wrap: pretty; }
.mono { font-variant-numeric: tabular-nums; }
code { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; padding: 1px 5px; border-radius: 4px; background: var(--neutral-soft); }
.right { text-align: right; }

/* Rahmen */
.shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.side {
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; gap: 14px;
  padding: 18px 12px; color: var(--muted); background: var(--sunken); border-right: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px; color: var(--ink); text-decoration: none; }
.brand-mark { width: 31px; height: 28px; flex: none; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text b { font: 600 14px var(--sans); letter-spacing: -0.005em; }
.brand-text small { font-size: 11px; color: var(--muted); }
.side nav { display: flex; flex-direction: column; gap: 1px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; margin: 0 -4px; padding: 0 4px; }
.nav-label { font-size: 11px; font-weight: 500; color: var(--muted); opacity: .8; padding: 12px 10px 4px; }
.nav-label:first-child { padding-top: 0; }
.side nav a { min-height: 32px; padding: 6px 10px; margin-top: 1px; border-radius: var(--r-s); text-decoration: none; font-size: 13px; color: var(--muted); transition: background-color .12s, color .12s; }
.side nav a svg { width: 15px; height: 15px; flex: none; opacity: .8; }
.side nav a:hover { background: var(--neutral-soft); color: var(--ink); }
.side nav a.on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 500; }
.side nav a.on svg { opacity: 1; }
/* Neue Leads: Zahl neben „Leads“, auf dem Handy oben in der Leiste */
.side nav a { display: flex; align-items: center; gap: 8px; }
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.nav-badge[hidden] { display: none; }
.dot-neu { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); vertical-align: 1px; }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 30; display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 16px; border-radius: var(--radius); background: #1d232a; color: #fff; box-shadow: 0 8px 30px rgba(20, 30, 40, .25); font-size: 14px; }
.toast a { color: #9dd0f5; font-weight: 600; }
.toast button { appearance: none; border: 0; background: none; color: rgba(255,255,255,.6); font-size: 18px; cursor: pointer; padding: 0 2px; }
.me { display: flex; align-items: center; gap: 10px; padding: 12px 8px 0; border-top: 1px solid var(--line); color: var(--ink); }
.me-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.me-text b { font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-text small { color: var(--muted); font-size: 12px; }
a.me-text { color: inherit; text-decoration: none; }
a.me-text:hover b, a.me-text:focus-visible b { text-decoration: underline; }
.konto { max-width: 560px; }
.konto .form-grid { grid-template-columns: 1fr; }
.konto .btn { justify-self: start; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--accent-soft); color: var(--accent-ink); flex: none; }
.me .link { color: var(--muted); font-size: 12px; }
.me-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.theme-toggle { appearance: none; border: 1px solid var(--line); background: var(--card); color: var(--muted); width: 30px; height: 30px; border-radius: var(--r-m); display: grid; place-items: center; cursor: pointer; padding: 0; }
.theme-toggle:hover { color: var(--ink); }
.theme-toggle svg { width: 15px; height: 15px; }
.theme-toggle .moon, :root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }
.main { padding: 28px clamp(16px, 3vw, 36px) 56px; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.mobilebar, .scrim { display: none; }

/* Bausteine */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.card > h2 { margin-bottom: 12px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.card-head > a:not(.btn) { font-size: 13px; color: var(--muted); text-decoration: none; }
.card-head > a:not(.btn):hover { color: var(--ink); }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
@media (min-width: 901px) {
  .page-head { flex-wrap: nowrap; }
  .page-head > :first-child { min-width: 0; }
  .page-head > :last-child:not(:first-child) { flex: none; }
}
.btn {
  display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; text-decoration: none;
  appearance: none; border: 1px solid transparent; border-radius: var(--r-m); padding: 7px 14px; cursor: pointer;
  font: 500 13px/18px var(--sans); color: #fff; background: var(--accent); white-space: nowrap; transition: background-color .12s, transform .1s;
}
.btn:hover { background: var(--accent-hover); }
.btn:active { transform: scale(.98); }
.btn.ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { background: var(--neutral-soft); }
.btn:disabled { opacity: .55; cursor: progress; }
.link { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.danger { color: var(--danger); }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.alert { background: var(--danger-soft); color: var(--danger); padding: 10px 12px; border-radius: var(--r-m); margin: 0; font-size: 13px; }
.notice { background: var(--accent-soft); color: var(--accent-ink); padding: 10px 12px; border-radius: var(--r-m); margin: 0; font-size: 13px; }
[data-weg] { display: flex; align-items: flex-start; gap: 12px; }
.meldung-weg { appearance: none; flex: none; margin: -4px -6px -4px auto; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--r-s); background: none; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; opacity: .7; }
.meldung-weg:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }

/* Zeitraum-Umschalter */
.tabs { display: inline-flex; gap: 2px; padding: 3px; background: var(--neutral-soft); border-radius: var(--r-m); align-self: flex-start; }
.tabs a { text-decoration: none; padding: 4px 12px; border-radius: var(--r-s); font-size: 13px; color: var(--muted); }
.tabs a:hover { color: var(--ink); }
.tabs a.on { background: var(--card); color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(20, 30, 40, .1); }

/* Kennzahlen */
/* Die äußeren Trennlinien schneidet overflow ab, so stimmen sie auch bei Umbruch in zwei Zeilen */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.kpi { padding: 14px 20px; display: flex; flex-direction: column; gap: 2px; min-width: 0; box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line); }
.kpi .label { font-size: 12px; color: var(--muted); font-weight: 500; }
.kpi strong { font-family: var(--display); font-weight: 600; font-size: 24px; line-height: 1.25; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.kpi small { color: var(--muted); font-size: 12px; }
.kpi-hero strong { color: var(--accent-ink); }
.kpi .delta { font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi .delta.good { color: var(--ok-ink); }
.kpi .delta.bad { color: var(--danger); }
.kpi-note { margin: -10px 0 0; color: var(--muted); font-size: 12px; }

/* Live-Aktivität */
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: #2f9e5f; box-shadow: 0 0 0 3px rgba(47, 158, 95, .2); }
.activity { list-style: none; margin: 0; padding: 0; }
.act { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.act:first-child { border-top: 0; }
.act .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; }
.act-lead_neu .dot { background: var(--chart); }
.act-termin_gebucht .dot { background: var(--deep-muted); }
.act-status_geaendert .dot { background: #d79b2b; }
.act-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.act-text b { font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-text small { color: var(--muted); font-size: 12px; }
.act time { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); }
.empty { color: var(--muted); margin: 0; padding: 4px 0; }
.card.flush .empty { padding: 20px; }
.card.flush > :is(h2, .card-head) + .empty { padding-top: 4px; }

/* Tabellen und Formulare */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 500; padding: 10px 12px; }
td { font-variant-numeric: tabular-nums; }
td { padding: 10px 12px; border-top: 1px solid var(--line-soft); }
/* Randlose Tabellenkarten: Zeilen laufen bis zum Rand, Text steht auf der Linie der Karte. In normalen Karten beginnt die Tabelle an der Kante der Überschrift */
.card:not(.flush) th:first-child, .card:not(.flush) td:first-child { padding-left: 0; }
.card:not(.flush) th:last-child, .card:not(.flush) td:last-child { padding-right: 0; }
.card.flush th:first-child, .card.flush td:first-child { padding-left: 20px; }
.card.flush th:last-child, .card.flush td:last-child { padding-right: 20px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; align-items: end; }
.form-grid > .btn, .settings-form > .btn { justify-self: start; }
.card > :last-child { margin-bottom: 0; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 500; color: var(--muted); }
label small { font-weight: 400; }
input, select {
  font: 14px/18px var(--sans); padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-m); background-color: var(--field); color: var(--ink); width: 100%;
}
input[type=date], input[type=time], input[type=datetime-local], input[type=month] { height: 34px; }
input[type=file] { padding: 4px 6px; color: var(--muted); font-size: 13px; }
input[type=file]::file-selector-button { margin-right: 10px; padding: 3px 10px; border: 0; border-radius: var(--r-s); background: var(--neutral-soft); color: var(--ink); font: 500 13px/18px var(--sans); cursor: pointer; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
select:not([multiple]) {
  appearance: none; -webkit-appearance: none; padding-right: 28px !important; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%238b95a1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
input:focus, select:focus { border-color: var(--accent-ink); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.act-text b a { text-decoration: none; }
.act-text b a:hover { text-decoration: underline; }

/* Leads */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filters label { flex: 0 1 160px; }
.filters .grow { flex: 1 1 180px; }
.reset { font-size: 13px; color: var(--muted); }
.card.flush { padding: 0; overflow: hidden; }
.leads tbody tr { cursor: pointer; }
.leads tbody tr:hover, .leads tbody tr.on { background: var(--sunken); }
.leads td { vertical-align: middle; }
.lead-name { font-weight: 500; text-decoration: none; display: block; }
.leads small { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }
.score { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); }
.score-bar { width: 64px; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.score-bar i { display: block; height: 100%; background: var(--chart); }
.pill { display: inline-block; font-size: 12px; font-weight: 500; padding: 1px 8px; border-radius: 999px; background: var(--neutral-soft); color: var(--muted); white-space: nowrap; }
.pill-warm { background: var(--warn-soft); color: var(--warn-ink); }
.pill-hot { background: var(--danger-soft); color: var(--danger); }
.pill-qualifiziert { background: var(--accent-soft); color: var(--accent-ink); }
.pill-termin { background: var(--accent); color: #fff; }
.pill-kunde { background: var(--ok-soft); color: var(--ok-ink); }
.pill-verloren { background: var(--neutral-soft); color: var(--muted); text-decoration: line-through; }
.pill-abgesagt { background: var(--warn-soft); color: var(--warn-ink); }
.pill-no_show { background: var(--danger-soft); color: var(--danger); box-shadow: inset 0 0 0 1px currentColor; }
.pill-t-gebucht { background: var(--accent-soft); color: var(--accent-ink); }
.pill-t-abgesagt { background: var(--warn-soft); color: var(--warn-ink); }
.pill-t-nicht_erschienen { background: var(--danger-soft); color: var(--danger); }
.termine td small { display: block; }
.mail-regel { display: grid; gap: 12px; }
.mail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mail-head h2 { margin: 0; }
.mail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 18px; align-items: start; }
.mail-preview { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 8px; background: var(--bg); min-width: 0; }
.mail-preview pre { font: inherit; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.inline-check { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; font-size: 13px; color: var(--ink); }
.inline-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.pill-m-aus { background: var(--neutral-soft); color: var(--muted); }
.pill-m-gesendet { background: var(--accent-soft); color: var(--accent-ink); }
.pill-m-test { background: var(--neutral-soft); color: var(--ink); }
.pill-m-fehler { background: var(--danger-soft); color: var(--danger); }
.pill-m-offen { background: var(--warn-soft); color: var(--warn-ink); }
.mail-log { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.mail-log li { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.mail-log li span { display: flex; flex-direction: column; min-width: 0; }
.mail-log small { overflow-wrap: anywhere; }
.termine .role-form { display: block; margin-top: 4px; }
@media (max-width: 860px) {
  /* Handy: Zeit links, rechts Lead und darunter Status, damit der Name ganz lesbar bleibt */
  .leads.termine thead { display: none; }
  .leads.termine tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; padding: 12px 6px; border-bottom: 1px solid var(--line); }
  .leads.termine tr:last-child { border-bottom: 0; }
  .leads.termine td { display: block; padding: 0; border: 0; max-width: none; width: auto; }
  .leads.termine td.hide-m { display: none; }
  .leads.termine td:first-child { grid-row: span 2; white-space: nowrap; max-width: none; width: auto; }
  .leads.termine .lead-name, .leads.termine small { white-space: normal; overflow-wrap: anywhere; }
}
.pad { padding: 14px 20px; margin: 0; }
.card.flush > h2.pad { margin: 0; padding: 16px 20px 8px; }
.card.flush > .empty + .muted.pad { margin-top: -16px; padding-top: 0; }
.card:not(.flush) > .empty.pad { padding: 4px 0; }
.pager { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.pager a { text-decoration: none; font-weight: 500; }

/* Detail-Panel */
.panel-scrim { position: fixed; inset: 0; z-index: 30; background: var(--scrim); }
.panel {
  position: fixed; z-index: 31; top: 0; right: 0; bottom: 0; width: min(440px, 100%);
  background: var(--card); border-left: 1px solid var(--line); box-shadow: -20px 0 50px rgba(20, 30, 40, .14);
  padding: 22px 24px 40px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px;
}
.panel-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.panel-head h2 { font-size: 22px; }
.close { text-decoration: none; font-size: 26px; line-height: 1; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-m); flex: none; }
.close:hover { background: var(--bg); }
.facts { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: 14px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.status-form { display: flex; gap: 10px; align-items: flex-end; padding: 14px; background: var(--bg); border-radius: var(--radius); }
.status-form label { flex: 1; }
.panel h3 { margin: 4px 0 -8px; font-size: 13px; color: var(--muted); font-weight: 500; }
.timeline { list-style: none; margin: 0; padding: 0; }

/* Funnels */
.pill-f-live { background: var(--accent-soft); color: var(--accent-ink); }
.pill-f-pausiert { background: var(--warn-soft); color: var(--warn-ink); }
.kunde-farbe { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; vertical-align: 1px; }
h1 .kunde-farbe { width: 14px; height: 14px; margin-right: 10px; vertical-align: 1px; }
.kunden-pflege > form, .kunden-pflege > .form-grid { margin-top: 16px; }
.kunden-pflege .role-form { min-width: 0; }
.kunden-pflege .role-form select { flex: 1; min-width: 0; }

/* Leads: erst Kunde, dann Projekt, dann die Liste */
.wahl-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.wahl { --farbe: var(--accent); position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 20px; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.wahl::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--farbe); }
.wahl:hover { border-color: var(--muted); transform: translateY(-2px); text-decoration: none; }
.wahl.neu { border-color: color-mix(in srgb, var(--farbe) 35%, var(--line)); background-image: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--farbe) 14%, transparent), transparent 190px); }
.wahl-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; }
.wahl-titel { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wahl-titel b { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wahl-titel small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wahl-pille { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--farbe) 12%, transparent); color: color-mix(in srgb, var(--farbe) 70%, var(--ink)); }
.wahl-pille i, .wahl-vorschau-zeile > i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--farbe); }
.wahl-pfeil { flex: none; color: var(--muted); opacity: 0; transition: opacity .15s; }
.wahl:hover .wahl-pfeil, .wahl:focus-visible .wahl-pfeil { opacity: 1; }
.wahl-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.wahl-kachel { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 8px 12px; background: var(--bg); border-radius: var(--r-m); }
.wahl-kachel > small { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.wahl-kachel svg { flex: none; width: 12px; height: 12px; }
.wahl-kachel strong { display: flex; align-items: baseline; gap: 6px; font-family: var(--display); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wahl-kachel em { font-family: var(--sans, inherit); font-size: 12px; font-style: normal; font-weight: 400; color: var(--muted); }
.wahl-plus { padding: 2px 6px; border-radius: var(--r-s); font-size: 12px; font-weight: 600; line-height: 1; background: color-mix(in srgb, var(--farbe) 12%, transparent); color: color-mix(in srgb, var(--farbe) 70%, var(--ink)); }
.wahl-fuss { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; }
.wahl-fuss b { min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wahl-fuss span:last-child { flex: none; color: var(--muted); }
.wahl-ini { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 600; text-transform: uppercase; background: var(--farbe); color: #fff; }
.wahl-vorschau { position: absolute; inset: auto 12px 12px; z-index: 1; display: flex; flex-direction: column; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); opacity: 0; visibility: hidden; transition: opacity .15s; }
.wahl-vorschau > small { padding: 2px 8px 4px; font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.wahl-vorschau-zeile { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 8px; font-size: 12px; }
.wahl-vorschau-zeile > small { flex: none; font-size: 11px; color: var(--muted); }
.wahl-vorschau-text { flex: 1; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.wahl-vorschau-text b, .wahl-vorschau-text small { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wahl-vorschau-text b { font-weight: 500; }
.wahl-vorschau-text small { font-size: 11px; color: var(--muted); }
@media (hover: hover) { .wahl:hover .wahl-vorschau { opacity: 1; visibility: visible; } }
.wahl-zelle { position: relative; display: grid; min-width: 0; }
.wahl-zelle.mit-stift .wahl-kopf { padding-right: 32px; }
.wahl-stift { position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-m); color: var(--muted); }
.wahl-stift:hover, .wahl-stift:focus-visible { background: var(--neutral-soft); color: var(--ink); }
.wahl-stift svg { width: 15px; height: 15px; }
@media (pointer: coarse) { .wahl-stift { top: 6px; right: 6px; width: 44px; height: 44px; } .wahl-zelle.mit-stift .wahl-kopf { padding-right: 36px; } }
.wahl-neu { display: flex; flex-direction: column; justify-content: center; gap: 12px; min-width: 0; padding: 20px; border: 1px dashed var(--line); border-radius: var(--radius); }
.wahl-neu .btn { align-self: flex-start; }
.wahl-versteckt { margin: 16px 0 0; font-size: 13px; }
.kunde-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.kunde-form-name { flex: 1 1 260px; min-width: 0; }
.kunde-form input[type="color"] { display: block; width: 64px; height: 34px; padding: 3px; cursor: pointer; }
@media (pointer: coarse) { .kunde-form input[type="color"] { height: 40px; } }
.check-zeile { display: flex; flex-direction: row; align-items: center; gap: 8px; min-height: 40px; }
.check-zeile input[type="checkbox"] { flex: none; width: 15px; height: 15px; padding: 0; }
.funnel-pflege { margin: 16px 0 0; padding: 0; list-style: none; }
.funnel-zeile { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 8px 12px; align-items: end; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.funnel-zeile-info { grid-column: 1 / -1; overflow-wrap: anywhere; }
@media (max-width: 720px) { .funnel-zeile { grid-template-columns: minmax(0, 1fr); } .funnel-zeile .btn { justify-self: start; } }
@media (prefers-reduced-motion: reduce) { .wahl, .wahl-vorschau, .wahl-pfeil { transition: none; } .wahl:hover { transform: none; } }
.funnels td.right { white-space: nowrap; }
.funnels tfoot td { border-top: 1px solid var(--line); background: var(--sunken); }
.funnels tfoot small { display: block; font-size: 12px; }
.small-note { font-size: 12px; margin: -8px 0 0; text-wrap: pretty; }

/* Aufgaben */
.tasks { list-style: none; margin: 0; padding: 0; }
.task { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.task:first-child { border-top: 0; }
.task form { display: contents; }
.check {
  appearance: none; flex: none; width: 20px; height: 20px; border-radius: var(--r-s); border: 1.5px solid var(--muted); background: var(--field);
  cursor: pointer; display: grid; place-items: center; color: #fff; font-size: 13px; line-height: 1; padding: 0;
}
.check:hover { border-color: var(--accent); background: var(--accent-soft); }
.task-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.task-text b { font-weight: 500; font-size: 14px; overflow-wrap: anywhere; }
.task-text small { color: var(--muted); font-size: 12px; }
.due { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); white-space: nowrap; }
.task.today .due { color: var(--accent-ink); font-weight: 600; }
.task.overdue .due { color: var(--danger); font-weight: 600; }
.task.done .check { background: var(--accent); border-color: var(--accent); }
.task.done .task-text b { text-decoration: line-through; color: var(--muted); }
.task-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; background: var(--bg); border-radius: var(--radius); align-items: end; }
.task-form .wide { grid-column: 1 / -1; }
.task-form .btn { grid-column: 1 / -1; justify-self: start; }

/* Login */
.bare { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--bg); }
.login-card { width: min(400px, 100%); display: flex; flex-direction: column; gap: 14px; padding: 28px; }
.login-card .sub { margin: -6px 0 6px; }
.login-logo { display: block; width: 62px; height: 56px; margin-bottom: -2px; }

/* Handy */
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; z-index: 50; left: 0; width: 260px; transform: translateX(-100%); transition: transform .2s ease; }
  .side-open .side { transform: none; }
  .side-open .scrim { display: block; position: fixed; inset: 0; z-index: 45; background: var(--scrim); }
  .mobilebar { display: flex; align-items: center; gap: 12px; margin: -16px 0 0; font: 600 15px var(--display); letter-spacing: -0.01em; }
  .toast { left: 16px; right: 16px; bottom: calc(72px + env(safe-area-inset-bottom)); }
  .menu { appearance: none; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: var(--r-m); width: 40px; height: 40px; font-size: 18px; cursor: pointer; }
  .main { padding-top: 24px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-hero { grid-column: 1 / -1; }
  .kpi-hero:first-child:nth-last-child(even) { grid-column: auto; }
  .hide-m { display: none; }
  .filters .grow { flex: 1 1 100%; }
  .filters label { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .leads td:first-child { max-width: 0; width: 100%; }
  .leads small, .lead-name { max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .leads td, .leads th { padding-left: 6px; padding-right: 6px; }
  .panel { padding: 18px 16px 32px; }
}
@media (prefers-reduced-motion: reduce) { .side { transition: none; } }

/* CSV-Import */
.import-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.import-form label { flex: 1 1 280px; }
.import-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.import-help { font-size: 13px; margin-top: 14px; }
.import-help p { margin: 6px 0; }
.import-result { display: flex; flex-direction: column; gap: 12px; }
.import-result h3 { margin: 4px 0 0; }
.import-errors { margin: 0; padding-left: 18px; font-size: 13px; color: var(--danger); }

/* Datenqualität */
.dup-help { margin: 0 0 12px; }
.dup { border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 10px 12px; margin-top: 12px; }
.dup input[type=radio] { width: 18px; height: 18px; accent-color: var(--accent); }
.dup tbody tr { cursor: default; }
.dup td:first-child { width: 1%; }
.dup-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 10px 0; border-top: 1px solid var(--line); }
.checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; align-items: start; }
.checks li { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.checks li.bad { border-color: var(--warn-soft); background: var(--warn-soft); }
.check-head { display: flex; justify-content: space-between; gap: 10px; }
.check-head b { font-weight: 500; }
.checks .count { font-family: var(--display); font-weight: 600; font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
.checks li.ok .count { color: var(--ok-ink); font-family: var(--sans); font-size: 16px; }
.examples { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; margin-top: 4px; }
.examples a { overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .dup { padding: 2px 4px 10px; }
  .dup thead { display: none; }
  .dup .leads td:first-child { max-width: none; width: 1%; }
  .dup .leads td:nth-child(2) { max-width: 0; width: 100%; }
}

/* Team und Protokoll */
.role-form { display: flex; gap: 8px; align-items: center; }
.role-form select { width: auto; padding: 6px 10px; font-size: 14px; }
.role-help { margin: 12px 0 0; }
.meta-offen .role-form { flex-wrap: wrap; }
.log .act-text b { white-space: normal; }
.log time { white-space: nowrap; }
.log-anmeldung_fehlgeschlagen .dot { background: var(--danger); }
.log-rolle_geaendert .dot, .log-zugang_angelegt .dot, .log-zugang_entfernt .dot { background: var(--accent); }
.log-status_geaendert .dot { background: #d79b2b; }
@media (max-width: 860px) { .log .act { align-items: flex-start; } .log time { font-size: 11px; } }

/* Tracking */
.tab-row { display: flex; flex-wrap: wrap; gap: 10px; }
.crumb { margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.main > .crumb { margin-bottom: -16px; }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.link-form .wide { grid-column: span 2; }
.link-form .btn { justify-self: start; }
.toggle-form { margin-top: 16px; font-size: 14px; }
.edit-note { margin: 10px 0 0; }
.track-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 22px; align-items: start; }
.bars { display: flex; align-items: flex-end; gap: 2px; height: 160px; }
.bars span { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 0; }
.bars i { display: block; width: 100%; min-height: 3px; border-radius: 3px 3px 0 0; background: var(--chart); }
.bars i.zero { background: var(--line); }
.bars-axis { display: flex; justify-content: space-between; font-size: 12px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.qr-card { display: flex; flex-direction: column; gap: 12px; }
.qr-card > h2 { margin: 0; }
.qr svg { display: block; width: 100%; height: auto; border-radius: var(--r-m); border: 1px solid var(--line); }
.qr-dl { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.qr-dl .btn { padding: 8px 12px; font-size: 13px; }
.activity .pill { flex: none; }
@media (max-width: 860px) {
  .track-grid { grid-template-columns: minmax(0, 1fr); }
  .link-form .wide { grid-column: auto; }
  .bars { height: 120px; gap: 1px; }
}

/* Launches */
.launch-live { display: flex; flex-direction: column; gap: 22px; }
.launch-grid { grid-template-columns: minmax(0, 1fr) 360px; }
.page-head h1 .pill { vertical-align: middle; font-size: 13px; letter-spacing: 0; }
.goal-bar { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; margin-top: 6px; }
.goal-bar i { display: block; height: 100%; background: var(--chart); }
.bars-duo span { position: relative; }
.bars-duo i, .bars-duo b { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 3px 3px 0 0; }
.bars-duo i { background: var(--chart-soft); min-height: 3px; }
.bars-duo i.zero { background: var(--line); }
.bars-duo b { left: 20%; right: 20%; background: var(--chart); }
.legend { display: flex; align-items: center; gap: 6px; font-size: 12px; margin: 10px 0 0; }
.legend span { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend .lg-lead { background: var(--chart-soft); }
.legend .lg-buy { background: var(--chart); margin-left: 10px; }
.act-kauf .dot { background: #d79b2b; }
.act-erstattung .dot { background: var(--danger); }
@media (max-width: 860px) { .launch-grid { grid-template-columns: minmax(0, 1fr); } }

/* Creatives */
.pill-r-skalieren { background: var(--ok-soft); color: var(--ok-ink); }
.pill-r-beobachten { background: var(--warn-soft); color: var(--warn-ink); }
.pill-r-stoppen { background: var(--danger-soft); color: var(--danger); }
.import-help code { display: block; overflow-wrap: anywhere; background: var(--neutral-soft); color: var(--ink); padding: 8px 10px; border-radius: var(--r-m); font-size: 12px; }
@media (max-width: 860px) {
  .creatives .lead-name { white-space: normal; overflow-wrap: anywhere; }
}

/* Lead-Scoring */
.score-heiss .score-bar i { background: #d4553f; }
.score-warm .score-bar i { background: #d99a2b; }
.score-kalt .score-bar i { background: #7d93b0; }
.pill-k-heiss { background: var(--danger-soft); color: var(--danger); }
.pill-k-warm { background: var(--warn-soft); color: var(--warn-ink); }
.pill-k-kalt { background: var(--accent-soft); color: var(--accent-ink); }
th a.sort { color: inherit; text-decoration: none; }
th a.sort.on, th a.sort:hover { color: var(--accent-ink); }
.settings-form { display: grid; gap: 14px; }
.settings-form textarea { font: inherit; font-weight: 400; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--field); color: var(--ink); resize: vertical; width: 100%; box-sizing: border-box; }

/* Morgen-Briefing */
.briefing-card { margin: 0; }
.briefing-satz { font-weight: 500; font-size: 16px; line-height: 1.45; letter-spacing: -0.005em; margin: 0 0 8px; text-wrap: pretty; }
.briefing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 20px; }
.briefing-grid .card { margin: 0; }
.briefing-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.briefing-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 12px; background: var(--bg); border-radius: var(--r-m); }
.briefing-list li b { flex: 1 1 100%; font-weight: 500; overflow-wrap: anywhere; }
.briefing-list li span { color: var(--muted); font-size: 14px; }
.briefing-list li .pill { margin-left: auto; }
.briefing-list li.warn { background: var(--danger-soft); }
.briefing-list li.warn b { color: var(--danger); }
.late { color: var(--danger); }
.briefing-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.status-form { flex-wrap: wrap; }
.status-form label { flex: 1 1 150px; }

/* Quiz-Funnel (Modul 06) */
.q-bar { display: block; height: 6px; border-radius: var(--r-s); background: var(--line); overflow: hidden; margin-top: 6px; }
.q-bar i { display: block; height: 100%; background: var(--chart); border-radius: var(--r-s); }
.q-cond { display: inline-block; padding: 2px 8px; border-radius: var(--r-m); background: var(--bg); font-size: 13px; }
.q-hoch { color: var(--danger); font-weight: 600; }
.q-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.q-row-actions { white-space: nowrap; }
.q-row-actions form, .q-row-actions a { display: inline-block; margin-left: 10px; }
.q-dist { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px 28px; }
.q-frage h3 { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.q-frage h3 small { font-weight: 400; }
.q-frage ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.q-frage li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: baseline; font-size: 14px; }
.q-frage li .q-bar { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; }
.q-wert { overflow-wrap: anywhere; }
.q-table td .q-bar { max-width: 320px; }
.q-segment-form .form-grid + .form-grid { margin-top: 14px; }
.q-notiz { margin: 0; padding: 12px 14px; background: var(--bg); border-radius: var(--radius); font-size: 14px; line-height: 1.5; display: grid; gap: 6px; }
.q-answers { margin: 0; display: grid; gap: 4px; font-size: 14px; }
.q-answers dt { color: var(--muted); font-size: 13px; margin-top: 6px; }
.q-answers dd { margin: 0; overflow-wrap: anywhere; }

/* KI-Assistent */
.a-form { display: grid; gap: 12px; }
.a-form textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--field); color: var(--ink); resize: vertical; width: 100%; box-sizing: border-box; }
.a-form textarea:focus { border-color: var(--accent-ink); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.a-form-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.a-form-row label { flex: 0 1 220px; }
.a-form-inline { display: flex; gap: 10px; }
.a-form-inline input { flex: 1; min-width: 0; }
.a-cockpit { margin: 0; }
.a-ergebnis { display: grid; gap: 14px; }
.a-ergebnis .briefing-satz { margin: 0; }
.a-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.a-sql summary { cursor: pointer; color: var(--accent-ink); font-size: 14px; }
.a-sql pre { background: var(--neutral-soft); padding: 10px 12px; border-radius: var(--r-m); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 0; }
.a-balken { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.a-balken li { display: grid; grid-template-columns: minmax(0, 200px) 1fr auto; gap: 12px; align-items: center; font-size: 14px; }
.a-balken li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-balken .q-bar { height: 10px; margin: 0; }
.a-balken b { font-weight: 600; font-variant-numeric: tabular-nums; }
.a-linie { margin: 0; }
.a-linie svg { display: block; width: 100%; height: 180px; }
.a-linie polygon { fill: var(--accent-soft); }
.a-linie polyline { fill: none; stroke: var(--chart); stroke-width: 2; }
.a-linie figcaption { font-size: 12px; margin-bottom: 6px; }
.a-fav-form { margin: 0; }
@media (max-width: 640px) {
  .a-balken li { grid-template-columns: minmax(0, 1fr) auto; }
  .a-balken .q-bar { grid-column: 1 / -1; grid-row: 2; }
  .a-form-inline { flex-direction: column; }
  .a-favs th:nth-child(2), .a-favs td:nth-child(2), .a-favs th:nth-child(3), .a-favs td:nth-child(3) { display: none; }
}

/* Reports */
.report-hinweis { margin: 12px 0 0; }
.report-logo { display: flex; align-items: flex-end; gap: 16px 20px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.report-logo img { max-width: 160px; max-height: 40px; object-fit: contain; }
.report-schriftzug { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.report-logo form[data-logo-upload] { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; min-width: 0; }
.report-logo input[type=file] { max-width: 100%; }
.report-farbe input[type=color] { width: 64px; height: 40px; padding: 2px; cursor: pointer; }
.reports-tabelle td small { display: block; }

/* Webinare */
.pad-head { padding: 16px 20px 6px; margin-bottom: 0; }
.swipe-hint { display: none; }
.vergleich th, .vergleich td:not(:first-child) { white-space: nowrap; }
.vergleich td.best { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
@media (max-width: 860px) {
  .vergleich td:first-child { min-width: 150px; }
  .swipe-hint { display: inline; }
}

/* Onboarding (Modul 10) */
.onboarding progress { width: 100%; height: 8px; margin: 4px 0 14px; accent-color: var(--accent); }
.onboarding-mail { margin-top: 14px; }
.onboarding-mail .role-form .link { white-space: nowrap; }
.schritt { display: grid; grid-template-columns: minmax(0, 3fr) 90px minmax(0, 1.4fr) auto; gap: 10px; align-items: end; padding: 10px 0; border-bottom: 1px solid var(--line); }
.schritt.neu { border-bottom: 0; }
@media (min-width: 861px) {
  .schritt-knoepfe { min-width: 170px; }
  .schritt + .schritt:not(.neu) label { font-size: 0; gap: 0; }
  .schritt + .schritt:not(.neu) :is(input, select) { font-size: 14px; }
}
.schritt-knoepfe { display: flex; gap: 10px; align-items: center; }
@media (max-width: 860px) { .schritt { grid-template-columns: 90px 1fr; } .schritt label:first-child, .schritt-knoepfe { grid-column: 1 / -1; } }

/* Aufgaben: Board, Detail, Kommentare */
.task-title { font-weight: 500; font-size: 14px; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.task-title:hover { text-decoration: underline; }
.task.done .task-title { text-decoration: line-through; color: var(--muted); }
textarea { font: 14px/1.5 var(--sans); padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--field); color: var(--ink); resize: vertical; width: 100%; box-sizing: border-box; }
textarea:focus { border-color: var(--accent-ink); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.neu-aufgabe { padding: 0; }
.neu-aufgabe summary { cursor: pointer; padding: 14px 20px; font-weight: 500; list-style: none; display: flex; align-items: center; gap: 8px; }
.neu-aufgabe summary::-webkit-details-marker { display: none; }
.neu-aufgabe summary::before { content: '+'; display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--r-s); background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.neu-aufgabe[open] summary::before { content: '−'; }
.neu-aufgabe .task-form { margin: 0 20px 20px; }
.tab-row { align-items: center; }
.tab-row .filters { flex: 1 1 360px; }
.task-h1 { font-family: var(--display); overflow-wrap: anywhere; }
.aufgabe-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.aufgabe-main { display: grid; gap: 16px; min-width: 0; }
.aufgabe-form .wide { grid-column: 1 / -1; }
.aufgabe-form .btn { justify-self: start; }
.aufgabe-verlauf h2 { margin: 0 0 10px; font-size: 14px; }
.aufgabe-verlauf .timeline li { font-size: 13px; padding: 8px 0; border-top: 1px solid var(--line-soft); display: block; }
.aufgabe-verlauf .timeline li:first-child { border-top: 0; }
.aufgabe-verlauf .timeline time { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.aufgabe-verlauf .timeline b { font-weight: 500; }
.inline-add { margin-top: 12px; }
.kommentare { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; }
.k-kopf { margin: 0 0 4px; font-size: 13px; }
.k-kopf time { color: var(--muted); font-size: 12px; margin-left: 6px; }
.k-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.kommentar-form { display: grid; gap: 10px; }
.kommentar-form .btn { justify-self: start; }
@media (max-width: 860px) {
  .aufgabe-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Finanzen */
.fin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.fin-grid .card { margin: 0; min-width: 0; }
.fin-rechnung { margin: 0 0 12px; display: grid; gap: 2px; }
.fin-rechnung div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.fin-rechnung dt { color: var(--muted); }
.fin-rechnung dd { margin: 0; white-space: nowrap; }
.fin-rechnung .fin-summe { border-bottom: 0; padding-top: 10px; font-weight: 600; }
.fin-rechnung .fin-summe dt { color: var(--ink); }
.fin-staende { list-style: none; margin: 16px 0 0; padding: 0; }
.fin-staende li { display: grid; grid-template-columns: 90px auto 1fr auto; gap: 12px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); }
.fin-staende .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-upload { display: flex; flex-direction: row-reverse; align-items: center; gap: 12px; flex-wrap: wrap; }
.fin-upload .muted { font-size: 12px; }
.fin-upload label.btn { cursor: pointer; }
.fin-upload label.btn:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.fin-neu { margin: 4px 0 16px; }
.fin-neu summary { list-style: none; display: inline-flex; }
.fin-neu summary::-webkit-details-marker { display: none; }
.fin-neu[open] summary { margin-bottom: 14px; }
.fin-knoepfe { display: flex; gap: 10px; align-items: center; }
.fin-tabelle .right form { display: inline; }
.fin-loeschen { margin-top: 14px; }
.fin-pruefen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.fin-pruefen .card { margin: 0; }
.beleg-vorschau { position: sticky; top: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.beleg-vorschau p { margin: 0 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beleg-vorschau iframe { width: 100%; height: 72vh; border: 0; border-radius: var(--r-m); background: #fff; }
.beleg-vorschau img { width: 100%; height: auto; border-radius: var(--r-m); }
@media (max-width: 900px) {
  .fin-pruefen { grid-template-columns: 1fr; }
  .beleg-vorschau { position: static; }
  .beleg-vorschau iframe { height: 60vh; }
  .fin-staende li { grid-template-columns: auto 1fr auto; }
  .fin-staende .muted { display: none; }
}
.fin-leiste { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.fin-jahr span { padding: 4px 8px; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.fin-monate { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.fin-monate > * { display: flex; flex-direction: column; gap: 6px; padding: 6px 2px 4px; border-radius: var(--r-s); text-decoration: none; text-align: center; color: var(--muted); }
.fin-monate small { font-size: 12px; }
.fin-monate a:hover, .fin-monate a.on { background: var(--sunken); color: var(--ink); }
.fin-saeulen { display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 132px; border-bottom: 1px solid var(--line); }
.fin-saeulen i, .fin-saeulen b { display: block; width: min(40%, 14px); border-radius: 3px 3px 0 0; }
.fin-saeulen i, .fin-legende i { background: var(--chart); }
.fin-saeulen b, .fin-legende b { background: var(--chart-soft); }
.fin-legende { display: flex; gap: 16px; margin: 8px 0 16px; font-size: 12px; color: var(--muted); }
.fin-legende span { display: inline-flex; align-items: center; gap: 6px; }
.fin-legende i, .fin-legende b { display: block; width: 10px; height: 10px; border-radius: 3px; }
.fin-rein { color: var(--ok-ink); }
.fin-tabelle tfoot td { font-weight: 600; border-top: 1px solid var(--line); }
.fin-anteile { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.fin-anteile li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
.fin-anteile span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-anteile .q-bar { grid-column: 1 / -1; margin-top: 4px; }
.kpi strong.danger { color: var(--danger); }
.fin-zahl { margin-left: 5px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fin-filter { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 12px; }
.fin-filter form { flex: 0 1 220px; min-width: 0; }
.fin-filter input { width: 100%; }
.fin-gruppe td { background: var(--sunken); padding-block: 6px; }
.fin-gruppe div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 500; }
@media (max-width: 600px) { .fin-filter form { flex-basis: 100%; } }
/* Buchungen: Datum vorn, der lange Titel steht in der zweiten Spalte und darf die Breite nicht sprengen */
@media (max-width: 860px) { .fin-buchungen td:first-child { max-width: none; width: 1%; white-space: nowrap; } .fin-buchungen td:nth-child(2) { max-width: 0; width: 100%; } }
@media (max-width: 480px) { .fin-monate { gap: 1px; } .fin-monate > * { padding-inline: 0; } .fin-monate small { font-size: 10px; } .fin-tabelle th, .fin-tabelle td { padding-inline: 6px; } }
.fin-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.fin-tabs a { white-space: nowrap; }
@media (max-width: 480px) { .fin-tabs a { padding: 7px 10px; } }
@media (max-width: 600px) { .fin-tabelle .pill { white-space: normal; } }
.fin-tabelle td.mono { white-space: nowrap; }
@media (max-width: 860px) {
  /* Lange Titel umbrechen statt in den Betrag zu laufen */
  .fin-tabelle .lead-name { display: block; white-space: normal; overflow-wrap: anywhere; }
  .fin-tabelle small { white-space: normal; overflow-wrap: anywhere; }
  /* Rechnungen: Titel und Betrag oben, der Status als ganze Pille darunter */
  .fin-rechnungen thead { display: none; }
  .fin-rechnungen tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 6px; border-bottom: 1px solid var(--line); }
  .fin-rechnungen tbody tr:last-child { border-bottom: 0; }
  .leads.fin-rechnungen td { display: block; padding: 0; border: 0; max-width: none; width: auto; }
  .leads.fin-rechnungen td.hide-m, .leads.fin-rechnungen tfoot td:empty { display: none; }
  .fin-rechnungen td:has(> .pill) { grid-column: 1 / -1; }
  .fin-rechnungen .pill { white-space: nowrap; }
  .fin-rechnungen tfoot tr { border-top: 1px solid var(--line); border-bottom: 0; }
  /* Monat für Monat: Monat ganz lesbar, die Spalten schieben sich seitlich */
  .leads.fin-monatsweise td:first-child { max-width: none; width: auto; white-space: nowrap; }
}

/* Kalender: jede Quelle in eigener Farbe, Wochenraster mit Spalten für Überschneidungen */
.q-team { --q: var(--accent-ink); --q-soft: var(--accent-soft); }
.q-google { --q: var(--cal-google); --q-soft: var(--cal-google-soft); }
.q-webinar { --q: var(--warn-ink); --q-soft: var(--warn-soft); }
.q-launch { --q: var(--ok-ink); --q-soft: var(--ok-soft); }
.q-aufgabe { --q: var(--muted); --q-soft: var(--neutral-soft); }
.q-rechnung { --q: var(--danger); --q-soft: var(--danger-soft); }
.q-lead { --q: var(--ok-ink); --q-soft: var(--ok-soft); }
.kal-aktionen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kal-aktionen a.btn { text-decoration: none; }
.kal-leiste { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 18px 0 10px; }
.kal-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kal-nav .btn { padding: 7px 12px; }
.kal-nav h2 { margin: 0 0 0 8px; font-size: 16px; }
.kal-quellen { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.kal-q { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: 13px; text-decoration: none; }
.kal-q.on { background: var(--q-soft); color: var(--ink); border-color: transparent; }
.kal-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--q); flex: none; }
.kal-q:not(.on) .kal-punkt { background: transparent; box-shadow: inset 0 0 0 1.5px var(--q); }
.kal-meine { font-size: 13px; color: var(--muted); margin-left: 6px; }
.kal-karte { padding: 0; overflow: hidden; }
.kal-e { display: block; font-size: 12px; line-height: 1.3; padding: 3px 6px; border-radius: var(--r-s); background: var(--q-soft); color: var(--ink); border-left: 3px solid var(--q); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; }
.kal-e time { color: var(--q); font-variant-numeric: tabular-nums; font-weight: 600; }
a.kal-e:hover { filter: brightness(.96); }
.kal-woche { --spalten: 60px repeat(7, minmax(0, 1fr)); }
.kal-kopf, .kal-ganz, .kal-raster { display: grid; grid-template-columns: var(--spalten); }
.kal-kopf { border-bottom: 1px solid var(--line); }
.kal-kopf a { text-align: center; padding: 10px 4px; text-decoration: none; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; }
.kal-kopf b { font-size: 16px; color: var(--ink); font-weight: 600; width: 32px; height: 32px; line-height: 32px; border-radius: 999px; }
.kal-kopf a.heute b { background: var(--accent); color: #fff; }
.kal-ganz { border-bottom: 1px solid var(--line); }
.kal-ganz > div { padding: 4px 3px; display: flex; flex-direction: column; gap: 3px; border-left: 1px solid var(--line-soft); min-width: 0; }
.kal-std { font-size: 11px; color: var(--muted); padding: 7px 6px 0 0; text-align: right; }
.kal-raster { height: calc(var(--stunden) * 46px); padding-bottom: 8px; }
.kal-zeiten { display: grid; grid-template-rows: repeat(var(--stunden), 1fr); }
.kal-zeiten span { font-size: 11px; color: var(--muted); text-align: right; padding: 3px 6px 0 0; font-variant-numeric: tabular-nums; }
.kal-spalte { position: relative; border-left: 1px solid var(--line-soft); background-image: linear-gradient(var(--line-soft) 1px, transparent 1px); background-size: 100% calc(100% / var(--stunden)); }
.kal-spalte.heute { background-color: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.kal-block { position: absolute; padding: 1px 0 1px 3px; box-sizing: border-box; }
.kal-block .kal-e { height: 100%; white-space: normal; }
.kal-jetzt { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger); z-index: 2; pointer-events: none; }
.kal-jetzt::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
.kal-handy { display: none; padding: 0 16px 12px; }
.kal-karte > .kal-tagblock, .kal-karte > .empty { padding-left: 18px; padding-right: 18px; }
.kal-karte > .empty { padding-top: 12px; padding-bottom: 12px; }
.kal-karte > .kal-tagblock:last-child { padding-bottom: 10px; }
.kal-tagblock h3 { font-size: 14px; margin: 16px 0 6px; display: flex; align-items: center; gap: 8px; }
.kal-tagblock h3.heute { color: var(--accent-ink); }
.kal-tagblock > .muted { margin: 0 0 4px; font-size: 13px; }
.kal-zeilen { list-style: none; margin: 0; padding: 0; }
.kal-zeile { display: grid; grid-template-columns: 8px 128px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.kal-zeile time { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.kal-zeile b { font-weight: 500; }
.kal-zeile b a { color: inherit; text-decoration: none; }
.kal-zeile b a:hover { text-decoration: underline; }
.kal-zeile small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; overflow-wrap: anywhere; }
.kal-monat { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kal-wt { font-size: 12px; color: var(--muted); text-align: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.kal-zelle { min-height: 112px; padding: 4px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kal-zelle:nth-of-type(7n) { border-right: 0; }
.kal-zelle.anders { background: var(--sunken); }
.kal-zelle.anders .kal-nr { color: var(--muted); font-weight: 400; }
.kal-nr { font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; width: 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 999px; flex: none; }
.kal-zelle.heute .kal-nr { background: var(--accent); color: #fff; }
.kal-mehr { font-size: 12px; color: var(--muted); padding-left: 4px; }
.kal-zahl { display: none; }
.kal-breit { grid-column: 1 / -1; }
.kal-leute { border: 1px solid var(--line); border-radius: var(--r-m); padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; }
.kal-leute legend { font-size: 13px; font-weight: 500; padding: 0 4px; }
.kal-form textarea { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--field); color: var(--ink); resize: vertical; width: 100%; box-sizing: border-box; }
.kal-form input:disabled { opacity: .45; }
.kal-loeschen { margin-top: 16px; }
.kal-heute .kal-zeilen { margin-top: -4px; }
@media (max-width: 760px) {
  .kal-woche { display: none; }
  .kal-handy { display: block; }
  .kal-zelle { min-height: 54px; align-items: center; padding: 4px 2px; }
  .kal-zelle .kal-e, .kal-mehr { display: none; }
  .kal-zahl { display: block; font-size: 11px; line-height: 16px; min-width: 16px; padding: 0 4px; text-align: center; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); }
  .kal-zeile { grid-template-columns: 8px 86px minmax(0, 1fr); }
  .kal-nav h2 { width: 100%; margin: 6px 0 0; }
}

/* Team-Chat: links Kanäle, rechts der Verlauf; auf dem Handy erst die Liste, dann die Unterhaltung */
.chat { display: grid; grid-template-columns: 260px minmax(0, 1fr); height: calc(100dvh - 88px); min-height: 460px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.chat-liste { display: flex; flex-direction: column; gap: 14px; padding: 14px 10px; overflow-y: auto; overscroll-behavior: contain; background: var(--sunken); border-right: 1px solid var(--line); }
.chat-suche input { padding: 8px 10px; font-size: 14px; }
.chat-gruppe { display: flex; flex-direction: column; gap: 1px; }
.chat-gruppe .nav-label { padding: 4px 10px; }
.chat-kunden > summary { cursor: pointer; list-style: none; }
.chat-kunden > summary::-webkit-details-marker, .chat-neu summary::-webkit-details-marker, .msg-edit summary::-webkit-details-marker { display: none; }
.chat-kunden > summary::after { content: ' ▸'; }
.chat-kunden[open] > summary::after { content: ' ▾'; }
.chat-liste a, .chat-person { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: var(--r-m); color: var(--muted); font-size: 14px; text-decoration: none; }
.chat-person { appearance: none; width: 100%; border: 0; background: none; font-family: var(--sans); text-align: left; cursor: pointer; }
.chat-liste a:hover, .chat-person:hover { background: var(--neutral-soft); color: var(--ink); }
.chat-schloss { flex: none; width: 13px; height: 13px; }
.chat-liste a[data-neu] { color: var(--ink); font-weight: 600; }
.chat-liste a.on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 500; }
.chat-name { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar.klein { width: 20px; height: 20px; font-size: 9px; }
.chat-zahl { flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--neutral-soft); color: var(--muted); font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.chat-zahl.wichtig { background: var(--accent); color: #fff; }
.chat-zahl[hidden] { display: none; }
.chat-neu summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; padding: 6px 10px; border-radius: var(--r-m); color: var(--muted); font-size: 14px; }
.chat-plus { display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--r-s); background: var(--neutral-soft); font-size: 14px; line-height: 1; }
.chat-wahl { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin: 2px 0; padding: 0; border: 0; }
.chat-wahl legend { padding: 0 0 4px; color: var(--muted); font-size: 12px; }
.chat-wahl label { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; padding: 4px 0; font-size: 14px; cursor: pointer; }
.chat-wahl input[type="checkbox"] { flex: none; width: 15px; height: 15px; padding: 0; }
.chat-wahl p { margin: 4px 0 0; font-size: 12px; line-height: 1.4; }
.chat-personen { position: relative; flex: none; }
.chat-personen form { position: absolute; top: calc(100% + 4px); right: 0; z-index: 3; width: 240px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card); box-shadow: var(--shadow); }
.chat-neu summary:hover { color: var(--ink); background: var(--neutral-soft); }
.chat-neu form { display: flex; flex-direction: column; gap: 6px; padding: 4px 10px 8px; }
.chat-neu input, .chat-neu select { padding: 7px 9px; font-size: 14px; }
.chat-import { margin-top: auto; padding: 0 10px; font-size: 12px; }
.chat-verlauf { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-kopf { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.chat-kopf > div { flex: 1; min-width: 0; }
.chat-kopf h1 { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-kopf .sub { margin: 0; font-size: 13px; }
.chat-zurueck { display: none; }
.chat-strom { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 10px 16px 14px; }
.chat-leer { padding: 24px 10px; }
.chat-mehr { margin: 6px 0; text-align: center; font-size: 13px; }
.chat-tag { display: flex; align-items: center; gap: 12px; margin: 16px 0 6px; color: var(--muted); font-size: 12px; font-weight: 500; }
.chat-tag::before, .chat-tag::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.msg { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; margin-top: 4px; padding: 6px 10px; border-radius: var(--r-m); }
.msg.folge { margin-top: 0; padding-top: 1px; }
.msg:hover { background: var(--sunken); }
.msg.ziel { background: var(--warn-soft); }
.msg .avatar { width: 34px; height: 34px; }
.msg-zeit-links { padding-top: 3px; color: var(--muted); font-size: 10px; text-align: right; font-variant-numeric: tabular-nums; opacity: 0; }
.msg:hover .msg-zeit-links { opacity: 1; }
.msg-body { min-width: 0; }
.msg-body header { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.msg-body header b { font-weight: 600; }
.msg-body header time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-text a { color: var(--accent-ink); }
.erw { padding: 0 3px; border-radius: 5px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 500; }
.erw.ich { background: var(--warn-soft); color: var(--warn-ink); }
.klein { font-size: 12px; }
.msg-dateien { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.msg-bild img { display: block; max-width: min(320px, 100%); max-height: 240px; border: 1px solid var(--line); border-radius: var(--r-m); }
.msg-datei { display: flex; flex-direction: column; max-width: 280px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card); text-decoration: none; }
.msg-datei b { overflow: hidden; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.msg-datei small { color: var(--muted); }
.msg-reak { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.reak { appearance: none; padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font: 13px/1.5 var(--sans); cursor: pointer; }
.reak.ich { border-color: var(--accent-ink); background: var(--accent-soft); color: var(--accent-ink); }
span.reak { cursor: default; }
.msg-menu { position: absolute; top: -14px; right: 12px; z-index: 2; display: none; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card); box-shadow: var(--shadow); }
.msg:hover .msg-menu, .msg:focus-within .msg-menu { display: flex; }
.msg-menu button { appearance: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--r-s); background: none; font-size: 14px; cursor: pointer; }
.msg-menu button:hover { background: var(--neutral-soft); }
.msg-edit summary { display: inline-block; margin-top: 2px; list-style: none; color: var(--muted); font-size: 12px; cursor: pointer; }
.msg:not(:hover):not(:focus-within) .msg-edit:not([open]) summary { visibility: hidden; }
.msg-edit form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.msg-edit-knoepfe { display: flex; justify-content: flex-end; }
/* Bearbeiten und Als Aufgabe in einer Zeile, geöffnet volle Breite */
.msg-aktionen { display: flex; flex-wrap: wrap; column-gap: 12px; }
.msg-edit[open] { flex-basis: 100%; }
.msg-aufgabe-felder { display: flex; flex-wrap: wrap; gap: 6px; }
.msg-aufgabe-felder select { flex: 1 1 200px; }
.msg-aufgabe-felder input { flex: 0 1 180px; width: auto; }
.chat-eingabe { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 8px; padding: 12px 20px 14px; border-top: 1px solid var(--line); }
.chat-eingabe textarea { min-height: 44px; max-height: 200px; resize: none; }
.chat-eingabe textarea::placeholder { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-eingabe .btn { height: 44px; }
.chat-anhang { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--r-m); color: var(--muted); cursor: pointer; }
.chat-anhang:hover { color: var(--ink); background: var(--neutral-soft); }
.chat-anhang:focus-within { border-color: var(--accent-ink); box-shadow: 0 0 0 3px var(--accent-soft); }
.chat-anhang svg { width: 18px; height: 18px; }
.chat-anhang input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.chat-status { grid-column: 1 / -1; margin: 0; font-size: 13px; }
.chat-status:empty { display: none; }
.chat-vorschlaege { position: absolute; bottom: calc(100% - 6px); left: 20px; z-index: 5; display: flex; flex-direction: column; min-width: 220px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card); box-shadow: var(--shadow); }
.chat-vorschlaege[hidden] { display: none; }
.chat-vorschlaege button { appearance: none; padding: 7px 10px; border: 0; border-radius: var(--r-s); background: none; color: var(--ink); font: 14px var(--sans); text-align: left; cursor: pointer; }
.chat-vorschlaege button[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-ink); }
.chat-nurlesen { margin: 0; padding: 12px 20px; border-top: 1px solid var(--line); }
.treffer { display: block; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); border-radius: var(--r-m); text-decoration: none; }
.treffer:hover { background: var(--sunken); }
.treffer-kopf { display: block; color: var(--muted); font-size: 12px; }
.treffer-kopf b { color: var(--ink); font-weight: 600; }
.treffer-text { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
.nav-badge.punkt { width: 8px; min-width: 8px; height: 8px; padding: 0; }
@media (hover: none) { .msg:not(:hover):not(:focus-within) .msg-edit:not([open]) summary { visibility: visible; } }
@media (max-width: 860px) {
  .chat { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 120px); }
  .chat[data-liste] { height: calc(100dvh - 180px - env(safe-area-inset-bottom)); }
  body:has(.chat:not([data-liste])) .mobile-tabs { display: none; }
  .chat[data-liste] .chat-verlauf, .chat:not([data-liste]) .chat-liste { display: none; }
  .chat-kopf { flex-wrap: wrap; gap: 4px 12px; padding: 12px 14px; }
  .chat-zurueck { display: block; flex-basis: 100%; color: var(--accent-ink); font-size: 14px; text-decoration: none; }
  .chat-strom { padding: 10px 6px 12px; }
  .chat-eingabe { padding: 10px 12px; }
  .chat-vorschlaege { left: 12px; }
  .msg-menu { right: 4px; }
  .mobilebar > span { flex: 1; }
}

/* Team: Zugang sperren und Passwort zurücksetzen */
.zugang-aktionen { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 6px 16px; }
.zugang-pw summary { list-style: none; cursor: pointer; }
.zugang-pw summary::-webkit-details-marker { display: none; }
.zugang-pw form { display: flex; gap: 6px; margin-top: 6px; }
.zugang-pw input { width: 190px; }
.form-hinweis { margin: 10px 0 0; font-size: 13px; }

/* Interaktionen: Sternnetz und Karten je Verbindung */
.st-ok { --st: var(--ok-ink); --st-soft: var(--ok-soft); }
.st-spaet { --st: var(--warn-ink); --st-soft: var(--warn-soft); }
.st-fehler { --st: var(--danger); --st-soft: var(--danger-soft); }
.st-wartet { --st: var(--accent-ink); --st-soft: var(--accent-soft); }
.st-aus { --st: var(--muted); --st-soft: var(--neutral-soft); }
.v-netz-karte .card-head { flex-wrap: wrap; gap: 6px 16px; }
.netz { display: block; width: 100%; height: auto; max-height: 560px; margin: 4px auto 0; overflow: visible; }
.netz .verb { transition: opacity .2s; }
.netz:has(.verb:hover, .verb:focus-visible) .verb:not(:hover, :focus-visible) { opacity: .25; }
.netz .linie { fill: none; stroke: var(--st); stroke-width: 2; opacity: .55; }
.netz .st-aus .linie { stroke-dasharray: 4 6; opacity: .45; }
.netz .verb:hover .linie, .netz .verb:focus-visible .linie { opacity: 1; stroke-width: 3; }
.netz .fluss { fill: var(--st); }
.netz .knoten { fill: var(--card); stroke: var(--st); stroke-width: 2; }
.netz .knoten-punkt { fill: var(--st); stroke: var(--card); stroke-width: 2; }
.netz .st-fehler .knoten-punkt, .netz .st-spaet .knoten-punkt { animation: v-puls 1.6s ease-in-out infinite; }
.netz .kuerzel { text-anchor: middle; font: 600 15px var(--display); fill: var(--ink); }
.netz .name { text-anchor: middle; font: 500 14px var(--sans); fill: var(--ink); }
.netz .st-aus .name, .netz .st-aus .kuerzel { fill: var(--muted); }
.netz .mitte-ring { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }
.netz .mitte-name { text-anchor: middle; font: 600 13px var(--display); fill: var(--accent-ink); }
@keyframes v-puls { 50% { opacity: .35; } }
.v-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; color: var(--muted); justify-content: center; }
.v-legende li { display: inline-flex; align-items: center; gap: 6px; }
.v-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--st); display: inline-block; flex: none; }
.v-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 18px; }
.v-karte { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; scroll-margin-top: 80px; }
.v-karte:target { box-shadow: 0 0 0 2px var(--st); }
.v-kopf { display: flex; flex-direction: column; gap: 2px; }
.v-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 999px; background: var(--st-soft); color: var(--st); white-space: nowrap; }
.v-rolle { margin: 0; font-size: 12px; color: var(--muted); }
.v-karte dl { display: flex; gap: 18px; margin: 4px 0 0; }
.v-karte dt { font-size: 12px; color: var(--muted); }
.v-karte dd { margin: 0; font-weight: 600; }
.v-fehler { margin: 2px 0 0; font-size: 13px; color: var(--danger); overflow-wrap: anywhere; }
.v-info { margin: 0; font-size: 13px; }
.v-link { margin-top: auto; padding-top: 4px; font-size: 13px; }
@media (max-width: 860px) { .netz .name { font-size: 20px; } .netz .kuerzel { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .netz .fluss { display: none; } .netz .knoten-punkt { animation: none !important; } }
.chat-hinweis { font-size: 13px; margin: 2px 10px 0; line-height: 1.45; }

/* Creative-Labor: Winner-Eingang */
.winner-eingang { display: grid; gap: 16px; }
.winner-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.winner-kopf h2 { margin-bottom: 8px; }
.winner-kopf p { max-width: 62ch; margin: 0; }
.winner-regel summary { cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 500; }
.winner-regel form { margin-top: 10px; }
.winner-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.winner { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); display: flex; flex-direction: column; }
.winner-bild { aspect-ratio: 4 / 5; position: relative; background: var(--sunken); display: grid; place-items: center; text-align: center; }
.winner-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.winner-bild .muted { padding: 16px; font-size: 13px; }
.winner-text { padding: 14px; display: grid; gap: 6px; }
.winner-text h3 { font-size: 13px; overflow-wrap: anywhere; line-height: 1.35; }
.winner-text > p { font-size: 13px; }
.winner-zahlen { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; margin: 4px 0; }
.winner-zahlen dt { color: var(--muted); }
.winner-zahlen dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.winner-text h3, .winner-text > p { margin: 0; }
.winner-zahlen dd .pill { white-space: nowrap; margin-left: 4px; }

/* Creative-Labor: Board wie Figma */
.main:has(.board) { padding: 16px clamp(12px, 2vw, 24px); gap: 0; }
.board { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px 14px; height: calc(100dvh - 32px); min-height: 520px; }
.board-kopf { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-width: 0; }
.board-titel { font-size: 22px; margin: 0; overflow-wrap: anywhere; }
.board-status { font-size: 13px; margin-left: auto; }
.board-status.board-fehler { color: var(--danger); font-weight: 600; }
.board-konflikt { flex-basis: 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.board-konflikt > span { flex: 1 1 280px; }
.board-leiste { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.board-leiste .btn { padding: 6px 12px; min-height: 34px; }
.board-trenner { width: 1px; align-self: stretch; background: var(--line); margin: 2px 4px; }
.board-zoom { min-width: 52px; text-align: center; font-size: 13px; }
.board-flaeche { position: relative; min-height: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; touch-action: none;
  background-color: var(--sunken); background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 22px 22px; }
.board-flaeche:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.board-panel { min-height: 0; overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.board-gruppe { display: grid; gap: 12px; }
.board-gruppe h2 { font-size: 16px; margin: 0; }
.board-gruppe h3 { font-size: 13px; margin: 6px 0 0; color: var(--muted); }
.board-gruppe label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.board-gruppe input:not([type=checkbox]):not([type=color]):not([type=range]), .board-gruppe select, .board-gruppe textarea { width: 100%; min-width: 0; }
.board-gruppe input[type=color] { width: 100%; height: 34px; padding: 2px; }
.board-gruppe .board-check { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.board-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.board-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.board-knoepfe .btn { padding: 6px 12px; min-height: 34px; }
.board-liste, .board-ebenen { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.board-liste .link, .board-ebenen .link { text-align: left; overflow-wrap: anywhere; }
.board-ki { border: 1px solid var(--line); border-radius: var(--r-m); padding: 10px 12px; display: grid; gap: 8px; font-size: 14px; }
.board-ki summary { cursor: pointer; font-weight: 600; }
.board-ki dl { margin: 0; display: grid; gap: 2px 0; }
.board-ki dt { color: var(--muted); font-size: 12px; margin-top: 6px; }
.board-ki dd { margin: 0; }
.ki-stand p { margin: 0; }
.ki-stand details { margin-top: 10px; }
.ki-stand summary { cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 500; }
.board-tipp { font-size: 12px; line-height: 1.5; }
.board-verwalten summary { cursor: pointer; font-size: 13px; color: var(--accent-ink); }
.board-verwalten form { margin-top: 10px; }
.board-neu { align-items: end; }
@media (max-width: 900px) {
  .main:has(.board) { padding: 12px; }
  .board { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 62svh auto; height: auto; }
  .board-panel { overflow: visible; }
}
.winner-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 4px; }
.winner-aktionen .btn { padding: 6px 14px; min-height: 34px; }

/* Kunden-Board im Creative-Labor: je Winner eine Reihe, links Analyse, rechts V1 bis V5 */
.kb-abschnitt { font-size: 13px; color: var(--muted); font-family: var(--sans); font-weight: 600; margin-bottom: -8px; }
.kb-pfad { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.kb-pfad a { color: inherit; }
.kb-punkt { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--farbe); margin-right: 12px; vertical-align: 5px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--farbe) 18%, transparent); }
.kb-kunden { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.kb-kunde { display: grid; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: inherit; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.kb-kunde:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.kb-kunde-bilder { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; aspect-ratio: 12 / 5; background: var(--sunken); }
.kb-kunde-bilder img { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: top; }
.kb-kunde-bilder .kb-platzhalter { grid-column: 1 / -1; }
.kb-kunde-text { display: grid; gap: 4px; padding: 14px 16px 16px; font-size: 13px; }
.kb-kunde-text strong { font-family: var(--display); font-size: 16px; font-weight: 600; }
.kb-kunde-text .kb-punkt { width: 9px; height: 9px; margin-right: 9px; vertical-align: 2px; }
.kb-platzhalter { display: grid; place-items: center; width: 100%; height: 100%; padding: 16px; text-align: center; font-size: 13px; color: var(--muted);
  background: repeating-linear-gradient(135deg, var(--sunken) 0 10px, var(--line-soft) 10px 20px); }

.kb-leiste { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.kb-leiste > div { display: grid; gap: 2px; padding: 16px 20px; border-left: 1px solid var(--line-soft); }
.kb-leiste > div:first-child { border-left: 0; }
.kb-leiste span, .kb-zahlen span { font-size: 12px; color: var(--muted); font-weight: 500; }
.kb-leiste strong { font-family: var(--display); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kb-leiste small { color: var(--muted); font-size: 11px; }
.kb-hinweis { margin: -8px 0 0; font-size: 13px; color: var(--muted); max-width: 90ch; }

.kb-reihe { display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); overflow: clip; scroll-margin-top: 16px; }
.kb-reihe.alt { opacity: .86; }
.kb-winner { display: flex; flex-direction: column; gap: 12px; padding: 18px; background: var(--sunken); border-right: 1px solid var(--line); }
.kb-winner > * { margin: 0; }
.kb-winner-bild { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--line-soft); box-shadow: 0 1px 2px rgba(20, 30, 40, .08), 0 12px 32px rgba(20, 30, 40, .12); }
.kb-winner-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kb-rang { position: absolute; left: 10px; top: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(10, 18, 26, .72); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em; backdrop-filter: blur(6px); }
.kb-name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; line-height: 1.35; }
.kb-zahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.kb-zahlen > div { display: grid; gap: 2px; padding: 10px 12px; background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r-m); }
.kb-zahlen strong { font-family: var(--display); font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.kb-zahlen .gut strong { color: var(--ok-ink); }
.kb-fein { font-size: 12px; line-height: 1.45; margin: 0; }
.kb-formel { margin: 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--accent); font-family: var(--serif); font-size: 16px; line-height: 1.4; }
.kb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kb-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; background: var(--neutral-soft); color: var(--muted); white-space: nowrap; }
.kb-winner .kb-chip { white-space: normal; border-radius: var(--radius); max-width: 100%; }
.kb-chip.blau { background: var(--accent-soft); color: var(--accent-ink); }
.kb-chip.gut, .kb-chip.frei { background: var(--ok-soft); color: var(--ok-ink); }
.kb-chip.schlecht { background: var(--danger-soft); color: var(--danger); }
.kb-chip.laeuft { background: var(--warn-soft); color: var(--warn-ink); }
.kb-chip.laeuft::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: kb-puls 1.2s ease-in-out infinite; }
.kb-schwach { font-size: 13px; }
.kb-schwach span { font-size: 12px; font-weight: 600; color: var(--danger); }
.kb-schwach ul { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 2px; }
.kb-marker summary, .kb-maengel summary, .kb-primaer summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent-ink); }
.kb-marker ol { margin: 10px 0; padding-left: 20px; display: grid; gap: 10px; font-size: 13px; }
.kb-marker p { margin: 2px 0 0; }
.kb-bauregel { font-weight: 500; }
.kb-bauregel::before { content: 'Bauregel: '; color: var(--muted); font-weight: 400; }

.kb-rechts { padding: 18px; min-width: 0; }
.kb-varianten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; align-items: start; }
.kb-variante { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); min-width: 0; }
.kb-variante > * { margin: 0; }
.kb-variante header { display: flex; gap: 10px; align-items: center; }
.kb-variante header div { display: grid; min-width: 0; }
.kb-variante header strong { font-size: 14px; }
.kb-variante header .muted { font-size: 12px; line-height: 1.35; }
.kb-vnr { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-m); background: var(--deep); color: var(--deep-ink); font-family: var(--display); font-weight: 600; font-size: 14px; }
.kb-kern { font-size: 14px; line-height: 1.45; }
.kb-andromeda { font-size: 13px; line-height: 1.45; padding: 8px 10px; border-radius: var(--r-m); background: var(--accent-soft); }
.kb-andromeda span { display: block; font-size: 11px; font-weight: 600; color: var(--accent-ink); }
.kb-elemente { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 13px; margin: 0; }
.kb-elemente dt { color: var(--muted); font-size: 11px; padding-top: 2px; }
.kb-elemente dd { margin: 0; overflow-wrap: anywhere; }
.kb-wahl { display: grid; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.kb-wahl fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 4px; }
.kb-wahl legend { font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.kb-hl { display: flex; flex-direction: row; gap: 8px; align-items: flex-start; padding: 7px 9px; border: 1px solid var(--line-soft); border-radius: var(--r-m); cursor: pointer; font-family: var(--display); font-weight: 600; font-size: 14px; line-height: 1.3; }
.kb-hl:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.kb-hl input[type=radio] { flex: none; width: auto; margin: 2px 0 0; padding: 0; accent-color: var(--accent); }
.kb-hl em { font-family: var(--sans); font-weight: 400; font-style: normal; font-size: 12px; }
.kb-hl.eigene input[type=text] { flex: 1; width: auto; min-width: 0; border: 0; border-radius: 0; background: transparent; padding: 0; font: inherit; color: inherit; outline: none; box-shadow: none; }
.kb-aktion { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.kb-segment { display: inline-flex; padding: 3px; border-radius: var(--r-m); background: var(--neutral-soft); }
.kb-segment label { display: block; position: relative; }
.kb-segment input { position: absolute; inset: 0; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; }
.kb-segment span { display: block; padding: 5px 11px; border-radius: var(--r-m); font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.kb-segment input:checked + span { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(20, 30, 40, .12); }
.kb-segment input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.kb-preis { font-weight: 400; opacity: .78; font-size: 12px; margin-left: 4px; }
.kb-primaer summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kb-primaertext { margin: 8px 0 0; white-space: pre-wrap; font-size: 13px; line-height: 1.5; padding: 10px 12px; border-radius: var(--r-m); background: var(--sunken); max-height: 260px; overflow: auto; }
.btn.klein { padding: 5px 11px; min-height: 30px; font-size: 13px; }
.kb-renders { display: grid; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.kb-render { margin: 0; display: grid; gap: 10px; }
.kb-render.frei .kb-render-bild { box-shadow: 0 0 0 2px var(--ok-ink); }
.kb-render-bild { border-radius: var(--r-m); overflow: hidden; background: var(--sunken); box-shadow: 0 1px 2px rgba(20, 30, 40, .08), 0 8px 20px rgba(20, 30, 40, .10); }
.kb-render-bild.f9x16 { width: 72%; justify-self: center; }
.kb-render-bild.f4x5 { aspect-ratio: 4 / 5; }
.kb-render-bild.f9x16 { aspect-ratio: 9 / 16; }
.kb-render-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kb-render-bild .kb-platzhalter { font-size: 12px; padding: 14px; }
.kb-render figcaption { display: grid; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.kb-render figcaption > * { margin: 0; }
.kb-render-kopf { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.kb-format { font-size: 11px; font-weight: 600; color: var(--muted); }
.kb-render-hl { font-family: var(--display); font-weight: 600; font-size: 13px; line-height: 1.3; }
.kb-maengel ul { margin: 6px 0 0; padding-left: 16px; display: grid; gap: 3px; font-size: 12px; }
.kb-render-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.kb-leer { display: grid; place-items: center; min-height: 260px; height: 100%; padding: 24px; border: 1px dashed var(--line); border-radius: var(--radius); text-align: center; }
.kb-leer > div { max-width: 52ch; display: grid; gap: 10px; justify-items: center; }
.kb-leer p { margin: 0; }
.kb-leer strong { font-family: var(--display); font-size: 18px; }
.kb-lauf { display: flex !important; gap: 14px; align-items: center; text-align: left; }
.kb-puls { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); animation: kb-puls 1.2s ease-in-out infinite; }
@keyframes kb-puls { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .kb-puls, .kb-chip.laeuft::before { animation: none; } .kb-kunde { transition: none; } }
@media (max-width: 860px) {
  .kb-reihe { grid-template-columns: minmax(0, 1fr); }
  .kb-winner { border-right: 0; border-bottom: 1px solid var(--line); }
  .kb-winner-bild { max-width: 320px; }
  .kb-rechts { padding: 12px; }
  .kb-leiste > div { border-left: 0; border-top: 1px solid var(--line-soft); }
}

/* Creative-Analyse: Vorschau in der Tabelle, Filterleiste, Galerie */
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.creatives .creative-vorschau { width: 60px; padding-right: 0; }
.creative-vorschau img { width: 48px; height: 60px; object-fit: cover; border-radius: var(--r-s); display: block; background: var(--sunken); }
.creative-vorschau .muted { font-size: 11px; }
.creative-filter { align-items: flex-end; }
.creative-filter label { flex: 0 1 240px; }
.creative-filter .ansicht { margin-left: auto; align-self: flex-end; }
.creative-kopfwahl { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; justify-content: space-between; }
.creative-kopfwahl .tabs { margin: 0; align-self: flex-end; }
.creative-kopfwahl .filters label { flex: 0 1 280px; min-width: 220px; }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.galerie-karte h3 a { color: inherit; text-decoration: none; }
.galerie-karte h3 a:hover { text-decoration: underline; }
.galerie-format { position: absolute; top: 10px; left: 10px; z-index: 1; background: var(--card); color: var(--ink); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 500; }
.galerie-grund { font-size: 12px; line-height: 1.4; }

/* Copy-Pipeline */
.copy-schritt { display: grid; gap: 12px; }
.copy-schritt h2 em, .copy-schritt h2 { margin: 0; }
.copy-schritt details summary { cursor: pointer; color: var(--accent-ink); font-weight: 600; }
.copy-schritt details form { margin-top: 10px; }
.copy-quellen, .copy-varianten { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.copy-quelle, .copy-variante { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 6px; align-content: start; background: var(--card); }
.copy-quelle h4, .copy-variante h4, .copy-quelle p, .copy-variante p { margin: 0; }
.copy-quelle h4 { font-size: 13px; overflow-wrap: anywhere; }
.copy-variante.frei { border-color: var(--ok-ink); }
.copy-text { white-space: pre-line; font-size: 13px; line-height: 1.5; max-height: 16em; overflow: auto; }
.copy-angle { display: grid; gap: 10px; }
.copy-angle h3, .copy-angle h4 { margin: 0; }
.copy-angle-kopf { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.copy-angle-kopf p { margin: 4px 0 0; max-width: 70ch; }
.copy-angle-meta { display: flex; gap: 8px; align-items: center; }
.copy-hooks { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; }
.copy-angle-aktionen { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
.copy-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.copy-inline label { flex: 0 1 220px; }
.copy-aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.copy-aktionen .btn { padding: 5px 12px; min-height: 32px; }
@media (max-width: 860px) {
  .creative-filter .ansicht { margin-left: 0; }
  .creative-filter label, .copy-inline label { flex: 1 1 100%; }
}
.copy-quelle .small, .copy-variante .small, .copy-angle .small, .filters .small { font-size: 12px; margin: 0; }
.copy-inline .copy-hinweis { flex: 1 1 360px; }

/* Integrationen: alle Module */
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.modul { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.modul h2 { margin: 0; }
.modul p { margin: 0; }
.modul-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.modul p { font-size: 13px; }
.modul-auch { font-size: 13px; justify-self: start; align-self: flex-start; }
.modul-aktionen { margin-top: auto; padding-top: 8px; }
.modul .btn { text-decoration: none; }

/* Seitenleiste im Sapphire-Verlauf, gleich wie Tracking-Tool, Forecast und Competitor-Intel */
.side {
  --side-muted: rgba(255, 255, 255, .8); --side-line: rgba(255, 255, 255, .16); --side-soft: rgba(255, 255, 255, .1);
  background: linear-gradient(160deg, #003a60 0%, #00558b 50%, #1a6aa3 100%);
  color: var(--side-muted); border-right: 0; scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
:root[data-theme="dark"] .side {
  background: linear-gradient(160deg, #06121d 0%, #0c2a40 50%, #0f4568 100%);
}
.side .brand, .side .me { color: #fff; }
.side .brand-text small, .side .me-text small, .side .me .link { color: var(--side-muted); }
.side .nav-label { color: rgba(255, 255, 255, .62); opacity: 1; font-size: 11px; }
.side nav a { color: var(--side-muted); }
.side nav a:hover { background: var(--side-soft); color: #fff; }
.side nav a.on { background: rgba(255, 255, 255, .14); color: #fff; }
.side .nav-badge { background: #fff; color: #00558b; }
.side .me { border-top-color: var(--side-line); }
.side .avatar { background: rgba(255, 255, 255, .16); color: #fff; }
.side .theme-toggle { background: none; border-color: transparent; color: var(--side-muted); }
.side .theme-toggle:hover { background: var(--side-soft); color: #fff; }
.side .me .link { text-decoration: none; }
.side .me .link:hover { color: #fff; text-decoration: underline; }
.side :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Creative-Analyse: Handlungsleiste, Verlauf, Bausteine, Trend, Sortierung */
.hebel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.hebel-karte { display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .12s; }
.hebel-karte:hover { border-color: var(--muted); }
.hebel-karte .label { font-size: 12px; font-weight: 500; color: var(--muted); }
.hebel-karte strong { font-size: 16px; font-weight: 600; }
.hebel-karte small { color: var(--muted); font-size: 12px; }
.hebel-skalieren strong { color: var(--ok-ink); }
.hebel-stoppen strong { color: var(--danger); }
.hebel-teurer strong { color: var(--warn-ink); }
.hebel-karte.on { border-color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-ink); }
.filter-zeile { margin: 0 0 10px; font-size: 14px; }
.verlauf-kopf h2 { margin: 0 0 4px; }
.verlauf-kopf p { margin: 0 0 14px; }
.verlauf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.verlauf figure { margin: 0; }
.verlauf figcaption { font-size: 13px; font-weight: 600; margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; }
.vl-legende { font-weight: 400; color: var(--muted); }
.verlauf-svg { width: 100%; height: 150px; display: block; overflow: visible; }
.vl-achse { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vl-schnitt { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.vl-bar { fill: var(--chart); }
.vl-line { fill: none; stroke: var(--chart); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.vl-hit { fill: transparent; }
.vl-hit:hover { fill: var(--accent-soft); fill-opacity: .6; }
.vl-skala { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 4px; }
.bausteine-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 24px; }
.bausteine h3 { font-size: 14px; margin: 0 0 6px; }
.bausteine-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.bausteine-tab th { text-align: left; font-weight: 500; color: var(--muted); padding: 6px 6px; border-bottom: 1px solid var(--line); }
.bausteine-tab td { padding: 7px 6px; border-bottom: 1px solid var(--line-soft); }
.bausteine-tab tr.wenig td { opacity: .55; }
.bausteine-tab td.right { white-space: nowrap; }
.bs-vergleich { min-width: 120px; }
.bs-vergleich small { display: block; color: var(--muted); margin-top: 3px; }
.bs-bar { display: block; height: 6px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.bs-bar i { display: block; height: 100%; border-radius: 4px; background: var(--chart-soft); }
.bs-gut i { background: var(--ok-ink); }
.bs-schlecht i { background: var(--danger); }
.bs-mittel i { background: var(--chart); }
.bausteine-hinweis { margin: -10px 0 0; }
.trend { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.trend-teurer { background: var(--danger-soft); color: var(--danger); }
.trend-guenstiger { background: var(--ok-soft); color: var(--ok-ink); }
.trend-stabil, .trend-pausiert { background: var(--neutral-soft); color: var(--muted); }
a.sort { color: inherit; text-decoration: none; }
a.sort:hover { color: var(--accent); }
a.sort.on { color: var(--ink); font-weight: 700; }
a.sort.on::after { content: ' ↓'; }
@media (max-width: 760px) {
  .hebel { grid-template-columns: 1fr; }
  .verlauf-grid { grid-template-columns: 1fr; }
  /* Anzeigennamen ohne Leerzeichen (Namensregel mit _) brechen sonst nicht um und machen die Seite breiter als das Handy */
  table.creatives .lead-name, .bausteine-tab td.mono { overflow-wrap: anywhere; }
  /* Die schmale Regel für die erste Spalte gehört hier zur Creative-Spalte, die erste ist die Vorschau */
  .leads.creatives td:first-child { max-width: none; width: 38px; }
  .creative-vorschau img { width: 36px; height: 45px; }
  .leads.creatives td:nth-child(2) { max-width: 0; width: 100%; }
  /* „Zu wenig Daten“ darf umbrechen, sonst macht die Empfehlung die Tabelle breiter als das Handy */
  .leads.creatives td:last-child .pill { white-space: normal; text-align: center; }
  .bs-vergleich { min-width: 72px; }
}
.bs-mehr summary { cursor: pointer; font-size: 13px; color: var(--accent-ink); padding: 8px 6px; }

/* Cockpit auf dem Dashboard: Kacheln als Links in die Apps, Launch-Tabelle */
.cockpit .card-head h2 em { font-style: normal; color: var(--muted); font-weight: 500; }
.cockpit-kacheln { margin-bottom: 14px; border-color: var(--line-soft); border-radius: var(--r-m); }
.cockpit-kacheln .kpi { box-shadow: -1px 0 0 var(--line-soft), 0 -1px 0 var(--line-soft); }
.cockpit-kacheln a.kpi { color: inherit; text-decoration: none; transition: background-color .12s; }
.cockpit-kacheln a.kpi:hover { background: var(--sunken); }
.cockpit-kacheln small.warn { color: var(--danger); font-weight: 600; }
.cockpit-launches td small { display: block; }
.cockpit-launches td.right small { display: inline; }

/* Aufgaben: Aufbau wie in der Zentrale */
.ak-seite { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ak-seite .page-head { margin: 0; }
.ak-symbol { width: 14px; height: 14px; flex: none; }
.ak-kopfknoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ak-kopfknoepfe form { margin: 0; }

.ak-ueberblick { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ak-personen { list-style: none; margin: 0; padding: 2px; display: flex; flex-wrap: wrap; gap: 6px; }
.ak-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 5px 12px 5px 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font-size: 13px; text-decoration: none; transition: border-color .15s, background .15s; }
.ak-chip:hover { border-color: var(--accent-ink); }
.ak-chip b { font-weight: 500; }
.ak-chip:not(:has(.avatar)) { padding-left: 12px; }
.ak-chip .n { color: var(--muted); font-variant-numeric: tabular-nums; }
.ak-chip.an { background: var(--accent); border-color: var(--accent); color: #fff; }
.ak-chip.an .n { color: rgba(255,255,255,.75); }
.ak-chip.an .avatar { background: rgba(255,255,255,.2); color: #fff; }
.ak-rot { width: 7px; height: 7px; border-radius: 50%; background: var(--danger); flex: none; }
.ak-zahlen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-size: 13px; color: var(--muted); }
.ak-zahlen b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 14px; }
.ak-zahlen a { color: inherit; text-decoration: none; }
.ak-zahlen a:hover { color: var(--ink); }
.ak-zahlen .rot, .ak-zahlen .rot b { color: var(--danger); }

.ak-flaeche { display: flex; flex-direction: column; gap: 14px; padding: 14px; min-width: 0; }
.ak-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.ak-ansichten { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--sunken); }
.ak-ansichten a { padding: 7px 13px; border-radius: var(--r-m); color: var(--muted); font-size: 13px; font-weight: 500; text-decoration: none; }
.ak-ansichten a:hover { color: var(--ink); }
.ak-ansichten a.an { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.ak-rechts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ak-pop { position: relative; }
.ak-pop summary, .ak-schalter, .ak-filter-an { display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 6px 11px; border-radius: var(--r-m); color: var(--muted); font-size: 13px; cursor: pointer; list-style: none; text-decoration: none; }
.ak-pop summary::-webkit-details-marker { display: none; }
.ak-pop summary:hover, .ak-pop[open] summary, .ak-schalter:hover { background: var(--sunken); color: var(--ink); }
.ak-pop summary b { color: var(--ink); font-weight: 500; }
.ak-filter-an { background: var(--accent-soft); color: var(--accent-ink); font-weight: 500; }
.ak-pop-inhalt { position: absolute; right: 0; top: calc(100% + 4px); z-index: 12; min-width: 190px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); display: grid; gap: 2px; }
.ak-pop-inhalt > a { padding: 8px 10px; border-radius: var(--r-m); color: var(--ink); font-size: 13px; text-decoration: none; }
.ak-pop-inhalt > a:hover { background: var(--sunken); }
.ak-pop-inhalt > a.an { background: var(--accent-soft); color: var(--accent-ink); font-weight: 500; }
.ak-filterform { width: 260px; padding: 12px; gap: 10px; }
.ak-filterform input, .ak-filterform select { font-size: 14px; padding: 8px 10px; }

.ak-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(236px, 1fr); gap: 10px; height: calc(100dvh - 312px); min-height: 460px; overflow-x: auto; min-width: 0; }
.ak-spalte { display: flex; flex-direction: column; min-height: 0; padding: 10px 8px 8px; border-radius: var(--radius); background: var(--sunken); transition: box-shadow .12s; }
.ak-spalte.ablegen { box-shadow: inset 0 0 0 2px var(--accent-ink); }
.ak-spaltenkopf { display: flex; align-items: center; gap: 8px; padding: 0 6px 8px; }
.ak-spaltenkopf h2 { margin: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak-zahl { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ak-punkt { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); }
.p-heute, .p-person { background: var(--accent-ink); }
.p-in_arbeit, .p-prio-mittel { background: var(--warn-ink); }
.p-laufend, .p-woche { background: #38a3d8; }
.p-wartet { background: #9b87e8; }
.p-erledigt { background: var(--ok-ink); }
.p-spaet, .p-prio-hoch { background: var(--danger); }
.ak-liste { list-style: none; margin: 0; padding: 2px; display: flex; flex-direction: column; gap: 7px; flex: 1 1 auto; min-height: 40px; overflow-y: auto; }
.ak { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card); transition: border-color .12s, box-shadow .12s; }
.ak[draggable="true"] { cursor: grab; }
.ak:hover { border-color: var(--muted); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.ak.zieht { opacity: .4; }
.ak.fertig { background: transparent; }
.ak.fertig .ak-titel { color: var(--muted); text-decoration: line-through; }
.ak-kopf { display: flex; align-items: flex-start; gap: 8px; }
.ak-check, .az-heute { margin: 0; display: contents; }
.ak-kreis { appearance: none; flex: none; width: 18px; height: 18px; margin-top: 1px; padding: 0; border: 1.5px solid var(--muted); border-radius: 50%; background: transparent; cursor: pointer; position: relative; transition: border-color .12s, background .12s; display: block; }
.ak-kreis::before { content: ""; position: absolute; inset: -9px; }
button.ak-kreis:hover { border-color: var(--ok-ink); background: var(--ok-soft); }
.fertig .ak-kreis { border-color: var(--ok-ink); background: var(--ok-ink); }
.fertig .ak-kreis::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid var(--card); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ak-titel { flex: 1; min-width: 0; color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; }
.ak-titel:hover { color: var(--accent-ink); }
.ak-punkte { display: none; flex: none; appearance: none; width: 24px; height: 24px; margin: -3px -4px 0 0; padding: 0; border: 0; border-radius: var(--r-s); background: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; position: relative; }
.ak-punkte::before { content: ""; position: absolute; inset: -8px; }
.mit-js .ak-punkte { display: grid; place-items: center; }
.ak-punkte:hover, .ak-punkte[aria-expanded="true"] { background: var(--sunken); color: var(--ink); }
@media (hover: hover) {
  .mit-js .ak-punkte { opacity: 0; }
  .mit-js .ak:hover .ak-punkte, .mit-js .ak:focus-within .ak-punkte, .ak-punkte[aria-expanded="true"] { opacity: 1; }
}
.ak-pillen { display: flex; flex-wrap: wrap; gap: 4px; }
.ak-pille { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 2px 8px; border-radius: 999px; background: var(--neutral-soft); color: var(--muted); font-size: 11px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ak-pille i { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.ak-pille.hoch { background: var(--danger-soft); color: var(--danger); font-weight: 600; }
.ak-fortschritt { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; text-decoration: none; font-variant-numeric: tabular-nums; }
.ak-balken { flex: 1; height: 4px; border-radius: 2px; background: var(--neutral-soft); overflow: hidden; }
.ak-balken i { display: block; height: 100%; border-radius: 2px; background: var(--ok-ink); }
.ak-fuss { display: flex; align-items: center; gap: 7px; min-height: 20px; }
.avatar.leer { background: none; border: 1.5px dashed var(--line); }
.ak-datum { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ak-datum.spaet { color: var(--danger); font-weight: 500; }
.ak-datum.heute { color: var(--accent-ink); font-weight: 500; }
.ak-datum.ok { color: var(--ok-ink); }
.ak-zaehler { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ak-neu { flex: none; margin-top: 6px; }
.ak-neu summary { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 8px; border-radius: var(--r-m); color: var(--muted); font-size: 13px; cursor: pointer; list-style: none; }
.ak-neu summary::-webkit-details-marker { display: none; }
.ak-neu summary:hover { background: var(--card); color: var(--ink); }
.ak-neu[open] summary { display: none; }
.ak-neu-form { margin: 0; }
.ak-neu-form input { font-size: 14px; padding: 9px 10px; }

.ak-kopfzeile { min-width: 0; }
.ak-schnell { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-m); color: var(--muted); background: var(--field); }
.ak-schnell:focus-within { border-color: var(--accent-ink); box-shadow: 0 0 0 3px var(--accent-soft); }
.ak-schnell label.grow { flex: 1; }
.ak-schnell input { border: 0; background: none; padding: 11px 0; box-shadow: none !important; }
.az-gruppe summary { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 2px; cursor: pointer; list-style: none; }
.az-gruppe summary::-webkit-details-marker { display: none; }
.az-pfeil { color: var(--muted); transition: transform .12s; display: inline-block; width: 12px; }
.az-gruppe[open] .az-pfeil { transform: rotate(90deg); }
.az-gruppe h2 { margin: 0; font-size: 13px; font-weight: 600; }
.az-gruppe h2.rot { color: var(--danger); }
.az-liste { list-style: none; margin: 0; padding: 0; }
.az { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 7px 8px; border-top: 1px solid var(--line-soft); font-size: 14px; }
.az:hover { background: var(--sunken); }
.az-titel { flex: 1 1 auto; min-width: 0; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.az-titel:hover { color: var(--accent-ink); }
.az-ort { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.az .ak-datum { flex: none; min-width: 72px; text-align: right; }
.ak-leise { appearance: none; border: 1px solid var(--line); background: var(--card); color: var(--accent-ink); border-radius: var(--r-s); padding: 3px 9px; font-size: 12px; font-weight: 500; cursor: pointer; }
.ak-leise:hover { background: var(--accent-soft); }
.ak-leer { padding: 40px 12px; text-align: center; }
.ak-leer p { margin: 0 0 4px; }
.ak-hinweis { margin: 0; font-size: 12px; color: var(--muted); }
.ak-hinweis b { color: var(--ink); font-weight: 500; }

.ak-menue { position: fixed; z-index: 40; min-width: 200px; max-height: 70vh; overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); display: grid; gap: 2px; }
.ak-menue p { margin: 0; padding: 6px 10px 4px; font-size: 12px; color: var(--muted); }
.ak-menue button, .ak-menue a { appearance: none; border: 0; background: none; display: block; width: 100%; min-height: 36px; padding: 8px 10px; border-radius: var(--r-m); color: var(--ink); font: 13.5px var(--sans); text-align: left; text-decoration: none; cursor: pointer; }
.ak-menue button:hover:not(:disabled), .ak-menue a:hover, .ak-menue button:focus-visible, .ak-menue a:focus-visible { background: var(--sunken); outline: none; }
.ak-menue button.danger { color: var(--danger); }
.ak-menue button:disabled { color: var(--muted); cursor: default; }
.ak-menue a { border-top: 1px solid var(--line-soft); border-radius: 0 0 8px 8px; margin-top: 2px; }

.ak-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink); box-shadow: var(--shadow); overflow-y: auto; }
.ak-dialog:not(:modal)[open] { position: relative; margin: 0 auto; }
.ak-dialog::backdrop { background: var(--scrim); }
.ak-dialog form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.ak-dialog-kopf { display: flex; justify-content: space-between; align-items: center; }
.ak-dialog-kopf h2 { margin: 0; font-size: 14px; font-weight: 600; color: var(--muted); }
.ak-zu { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-m); color: var(--muted); font-size: 20px; text-decoration: none; }
.ak-zu:hover { background: var(--sunken); color: var(--ink); }
.ak-grosstitel input { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; padding: 6px 0 10px; font-size: 20px; font-weight: 500; box-shadow: none !important; }
.ak-grosstitel input:focus { border-bottom-color: var(--accent-ink); }
.ak-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.ak-felder input, .ak-felder select { font-size: 14px; padding: 8px 10px; }
.ak-beschreibung textarea { font: 14px var(--sans); padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--field); color: var(--ink); resize: vertical; }
.ak-dialog-fuss { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.ak-kbd { margin-right: auto; }
.ak-kbd kbd { font: 11px var(--sans); padding: 1px 5px; border: 1px solid var(--line); border-radius: 4px; }

@media (max-width: 760px) {
  .ak-flaeche { padding: 10px; }
  .ak-werkzeuge { flex-direction: column; align-items: stretch; }
  .ak-ansichten { display: flex; }
  .ak-ansichten a { flex: 1; text-align: center; padding: 8px 4px; }
  .ak-personen { flex-wrap: nowrap; overflow-x: auto; margin: 0 -2px; }
  .ak-chip { white-space: nowrap; }
  .ak-board { height: auto; min-height: 0; grid-auto-columns: minmax(250px, 84vw); scroll-snap-type: x mandatory; align-items: start; }
  .ak-spalte { scroll-snap-align: start; }
  .ak-liste { overflow: visible; }
  .ak-felder { grid-template-columns: 1fr; }
  .ak-kbd { display: none; }
  .ak-pop-inhalt { position: fixed; left: 16px; right: 16px; top: auto; width: auto; }
  .az { flex-wrap: wrap; }
  .az-titel { flex-basis: calc(100% - 30px); }
  .az-titel + * { margin-left: 28px; }
  .az-ort:empty { display: none; }
  .az .ak-datum { min-width: 0; margin-left: auto; }
}

/* Navigation: Gruppen einklappbar, Zugang unten immer sichtbar */
.nav-gruppe > summary.nav-label { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 3px; cursor: pointer; list-style: none; border-radius: var(--r-s); user-select: none; }
.nav-gruppe:first-child > summary.nav-label { padding-top: 2px; }
.nav-gruppe > summary::-webkit-details-marker { display: none; }
.nav-gruppe > summary::after { content: ''; width: 6px; height: 6px; margin-right: 3px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); opacity: 0; transition: transform .12s, opacity .12s; }
/* Pfeil nur, wenn er etwas zu sagen hat: bei zugeklappten Gruppen und unter dem Zeiger */
.nav-gruppe:not([open]) > summary::after, .nav-gruppe > summary:hover::after, .nav-gruppe > summary:focus-visible::after { opacity: .7; }
.nav-gruppe[open] > summary::after { transform: rotate(45deg); }
.side-suche { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--r-m); color: var(--side-muted); background: rgba(255, 255, 255, .09); font-size: 13px; text-decoration: none; }
.side-suche:hover { color: #fff; background: rgba(255, 255, 255, .16); }
.side-suche svg { width: 15px; height: 15px; flex: none; }
.side-suche span { flex: 1; }
.side-suche kbd { font: 500 10.5px var(--body, inherit); opacity: .75; }
.me { flex: none; }

/* Fehlerseiten */
.fehlerseite { max-width: 480px; margin: 12vh auto 0; padding: 0 16px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.fehlerseite .fehler-code { font: 600 13px var(--display); letter-spacing: .08em; color: var(--muted); }
.fehlerseite .btn { margin-top: 10px; }
.lead-ok { margin: 0; grid-column: 1 / -1; }

/* Suche */
.suche { width: min(640px, calc(100vw - 24px)); max-height: min(70vh, 560px); margin: 12vh auto auto; padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); box-shadow: 0 24px 70px rgba(10, 30, 50, .28); overflow: hidden; }
.suche[open] { display: flex; flex-direction: column; }
.suche::backdrop { background: var(--scrim); }
.suche-kopf { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 16px; border-bottom: 1px solid var(--line); }
.suche-kopf svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.suche-kopf input { flex: 1; min-width: 0; border: 0; background: none; padding: 8px 0; font-size: 16px; box-shadow: none !important; }
.suche-kopf input::-webkit-search-cancel-button { display: none; }
.suche-esc { appearance: none; border: 1px solid var(--line); background: var(--sunken); color: var(--muted); border-radius: var(--r-s); padding: 2px 7px; font-size: 11px; cursor: pointer; }
.suche-liste { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; }
.suche-gruppe { padding: 10px 10px 4px; font-size: 11px; font-weight: 500; color: var(--muted); }
.suche-treffer { display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; border-radius: var(--r-m); color: var(--ink); text-decoration: none; font-size: 14px; }
.suche-treffer b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.suche-treffer small { margin-left: auto; flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }
.suche-treffer:hover, .suche-treffer[aria-selected="true"] { background: var(--accent-soft); }
.suche-leer { padding: 22px 12px; text-align: center; color: var(--muted); font-size: 14px; }
.suche-fuss { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.suche-fuss kbd, .side-suche kbd { font-family: inherit; }
.suche-fuss kbd { padding: 1px 5px; border: 1px solid var(--line); border-radius: 5px; background: var(--sunken); font-size: 11px; }
.suche-seite { display: flex; flex-direction: column; gap: 2px; margin-inline: -10px; }

/* Handy: untere Leiste und ausreichend große Trefferflächen */
.mobile-tabs { display: none; }
.mobilebar a.menu { display: inline-grid; place-items: center; color: var(--ink); }
.mobilebar a.menu svg { width: 18px; height: 18px; }
@media (max-width: 860px) {
  .mobile-tabs { position: fixed; z-index: 25; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line); }
  .mobile-tabs a, .mobile-tabs button { position: relative; appearance: none; border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 50px; border-radius: var(--r-m); color: var(--muted); font: 500 11px inherit; text-decoration: none; cursor: pointer; }
  .mobile-tabs svg { width: 20px; height: 20px; }
  .mobile-tabs a.on { color: var(--accent-ink); background: var(--accent-soft); }
  .mobile-tabs .nav-badge { position: absolute; top: 2px; left: calc(50% + 6px); margin: 0; min-width: 17px; height: 17px; padding: 0 4px; font-size: 10px; line-height: 17px; }
  .mobile-tabs .nav-badge.punkt { width: 8px; min-width: 8px; height: 8px; padding: 0; top: 6px; }
  .main { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .side-suche { display: none; }
  .side nav a { padding: 9px 10px; font-size: 14px; }
  .nav-gruppe > summary.nav-label { padding-top: 14px; padding-bottom: 6px; }
  .suche { margin-top: 8px; max-height: calc(100dvh - 24px); }
  .btn { min-height: 40px; }
  .link { min-height: 32px; display: inline-flex; align-items: center; }
  input:not([type="checkbox"]):not([type="radio"]), select { min-height: 40px; font-size: 16px; }
  .tabs a { padding: 8px 12px; }
  .pager a { display: inline-block; padding: 10px 4px; }
  .leads td a { display: inline-block; padding-block: 6px; }
  .crumb a { display: inline-block; padding-block: 6px; }
}

/* Übersicht: Heute für dich */
.heute-raster { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.heute-raster > .card { margin: 0; }
.heute-satz { color: var(--muted); font-size: 14px; margin: -4px 0 16px; }
.heute-leer { padding: 18px 0 8px; color: var(--muted); font-size: 14px; }
.heute-block + .heute-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.heute-block h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.heute-block h3 a { font-weight: 400; font-size: 12px; color: var(--muted); }
.heute-zeilen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.heute-zeile { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 3px 0; font-size: 14px; }
.heute-zeile form { display: contents; }
.heute-haken { appearance: none; flex: none; width: 18px; height: 18px; padding: 0; border: 1.5px solid var(--line); border-radius: 50%; background: var(--card); cursor: pointer; }
.heute-haken:hover, .heute-haken:focus-visible { border-color: var(--ok-ink); background: var(--ok-soft); }
.heute-titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); text-decoration: none; }
.heute-titel:hover { text-decoration: underline; }
.heute-zeile small { flex: none; color: var(--muted); font-size: 12px; }
.heute-zeile small.rot { color: var(--danger); }
.heute-aktion { flex: none; font-size: 12px; font-weight: 500; color: var(--accent-ink); text-decoration: none; }
.heute-aktion:hover { text-decoration: underline; }
.dash-aktionen, .sp-kopf-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.live-karte > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.live-karte > summary::-webkit-details-marker { display: none; }
.live-karte > summary h2 { margin: 0; }
.live-karte[open] > summary { margin-bottom: 10px; }
@media (max-width: 980px) { .heute-raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  .heute-zeile { min-height: 44px; }
  .heute-haken { width: 24px; height: 24px; }
  .heute-aktion { padding: 10px 6px; }
}

/* Kundenakte */
.akte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.akte .card { margin: 0; }
.akte-neu { display: flex; gap: 8px; margin-top: 12px; }
.akte-neu input { flex: 1; min-width: 0; }
.akte-link { margin: 10px 0 0; font-size: 13px; }
.akte-titel { margin: 8px 0 -14px; }
@media (max-width: 1100px) { .akte { grid-template-columns: minmax(0, 1fr); } }

.form-aktionen { display: flex; gap: 10px; flex-wrap: wrap; grid-column: 1 / -1; }
.fin-form > .small-note { grid-column: 1 / -1; margin: 0; }
.fin-form > .wide { grid-column: 1 / -1; margin: 0; }

/* Integrationen: Verbindungen für Admins */
.verb-liste { list-style: none; margin: 10px 0 0; padding: 0; }
.verb-liste li { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.verb-liste li > div { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.verb-liste small { font-size: 13px; }
.verb-api { margin-top: 12px; }
.verb-api summary { cursor: pointer; font-weight: 600; padding: 6px 0; }

/* Mein Tag: ein ruhiges Blatt je Tag */
.tag-seite { display: grid; gap: 20px; width: 100%; max-width: 760px; margin-inline: auto; min-width: 0; }
.tag-seite .page-head .tabs { align-self: center; }
.tag-tage { display: flex; align-items: center; gap: 4px; margin: 2px 0 0 -6px; }
.tag-tage .sub { margin: 0; }
.tag-pfeil { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-s); color: var(--muted); text-decoration: none; font-size: 16px; line-height: 1; }
.tag-pfeil:hover { background: var(--neutral-soft); color: var(--ink); }
.tag-heute { margin-left: 6px; font-size: 13px; color: var(--accent-ink); text-decoration: none; }
.tag-heute:hover { text-decoration: underline; }
.tag-hinweis { margin: 0; font-size: 13px; }

/* Tagesritual: Bühne in Sapphire, darunter drei Kacheln, dann die drei Schritte als Pfad. Nie Rot für verpasste Tage */
.tag-seite { max-width: 1000px; }
.tag-puls { display: grid; gap: 16px; }
.tag-buehne { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 30px 36px; border-radius: 20px; color: #fff;
  background: radial-gradient(520px 320px at 88% 50%, rgba(157, 208, 245, .34), transparent 70%), radial-gradient(420px 260px at 0% 120%, rgba(10, 106, 168, .9), transparent 70%), linear-gradient(135deg, #002b49, #00558b 70%);
  box-shadow: 0 18px 40px -18px rgba(0, 61, 102, .55); }
.tag-buehne::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.2px); background-size: 18px 18px; mask-image: linear-gradient(100deg, transparent 35%, #000); -webkit-mask-image: linear-gradient(100deg, transparent 35%, #000); }
.tag-buehne > * { position: relative; z-index: 1; }
.tag-buehne-text { min-width: 0; }
.tag-buehne-text > small { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #9dd0f5; }
.tag-buehne h2 { margin: 6px 0 0; font-family: var(--display); font-size: 34px; font-weight: 600; line-height: 1.1; letter-spacing: -.01em; color: #fff; }
.tag-buehne p { margin: 8px 0 0; font-size: 15px; color: rgba(255, 255, 255, .78); text-wrap: pretty; max-width: 46ch; }
.tag-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; }
.tag-chips a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; font-size: 13px; font-weight: 500; text-decoration: none; color: #fff; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); transition: background-color .15s, transform .15s; }
.tag-chips a:hover { background: rgba(255, 255, 255, .18); transform: translateY(-1px); }
.tag-chips a span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, .14); }
.tag-chips a.voll { background: #fff; color: #003d66; box-shadow: none; }
.tag-chips a.voll span { background: #00558b; color: #fff; }
.tag-ring { position: relative; flex: none; width: 148px; height: 148px; display: grid; place-items: center; }
.tag-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); overflow: visible; }
.tag-ring circle { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 10; }
.tag-ring circle.voll { stroke: #fff; stroke-linecap: round; stroke-dasharray: var(--n) 3; filter: drop-shadow(0 0 10px rgba(157, 208, 245, .9)); transition: stroke-dasharray .6s cubic-bezier(.2, .8, .2, 1); animation: tag-ring-auf .9s cubic-bezier(.2, .8, .2, 1); }
.tag-ring circle.voll[style*="--n:0"] { stroke: none; }
.tag-ring b { position: relative; display: grid; justify-items: center; font-family: var(--display); font-size: 52px; font-weight: 600; line-height: .95; }
.tag-ring b small { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .04em; color: #9dd0f5; }
@keyframes tag-ring-auf { from { stroke-dasharray: 0 3; } }
.tag-puls.rund .tag-ring::before { content: ''; position: absolute; inset: 14px; border-radius: 50%; background: radial-gradient(rgba(157, 208, 245, .35), transparent 70%); animation: tag-atem 3s ease-in-out infinite; }
@keyframes tag-atem { 50% { transform: scale(1.12); opacity: .6; } }

.tag-bento { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
.tag-kachel { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 18px 20px; border-radius: 16px; animation: tag-hoch .5s cubic-bezier(.2, .8, .2, 1) backwards; }
.tag-kachel:nth-child(2) { animation-delay: .06s; }
.tag-kachel:nth-child(3) { animation-delay: .12s; }
@keyframes tag-hoch { from { opacity: 0; transform: translateY(10px); } }
.tag-kachel h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0; font-size: 13px; font-weight: 600; }
.tag-kachel h3 span { font-size: 12px; font-weight: 400; color: var(--muted); white-space: nowrap; }
.tag-kachel > small { margin-top: auto; font-size: 12px; }
.tag-serie-zahl { display: flex; align-items: center; gap: 10px; }
.tag-serie-zahl b { font-family: var(--display); font-size: 56px; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.tag-serie p { margin: -4px 0 0; font-size: 13px; color: var(--muted); }
.tag-flamme { width: 44px; height: 44px; flex: none; fill: var(--line); }
.tag-flamme .kern { fill: var(--card); }
.tag-serie.brennt { background: radial-gradient(240px 160px at 0% 0%, rgba(255, 150, 60, .16), transparent 70%), var(--card); }
.tag-serie.brennt .tag-flamme { fill: #ff7a2f; filter: drop-shadow(0 4px 10px rgba(255, 122, 47, .45)); transform-origin: 50% 90%; animation: tag-flackern 2.4s ease-in-out infinite; }
.tag-serie.brennt .tag-flamme .kern { fill: #ffd166; }
@keyframes tag-flackern { 0%, 100% { transform: scale(1) rotate(-1.5deg); } 50% { transform: scale(1.06, 1.1) rotate(1.5deg); } }
.tag-woche { list-style: none; display: flex; justify-content: space-between; gap: 2px; margin: 2px -6px 0; padding: 0; }
.tag-woche li { flex: 1; }
.tag-woche li > * { display: grid; justify-items: center; gap: 6px; padding: 8px 0 6px; border-radius: 10px; text-decoration: none; color: var(--muted); transition: background-color .12s; }
.tag-woche li > a:hover { background: var(--neutral-soft); color: var(--ink); }
.tag-woche li.gewaehlt > * { background: var(--neutral-soft); color: var(--ink); }
.tag-woche small { font-size: 11px; line-height: 1; }
.tag-punkt { --g: 30px; width: var(--g); height: var(--g); border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 14px; line-height: 1;
  background: radial-gradient(var(--card) 0 calc(var(--g) * .32), transparent calc(var(--g) * .34)), conic-gradient(var(--chart) calc(var(--n) * 120deg), var(--neutral-soft) 0); }
.tag-woche li.gewaehlt .tag-punkt { background: radial-gradient(var(--neutral-soft) 0 calc(var(--g) * .32), transparent calc(var(--g) * .34)), conic-gradient(var(--chart) calc(var(--n) * 120deg), var(--line) 0); }
.tag-punkt.s3, .tag-woche li.gewaehlt .tag-punkt.s3 { background: color-mix(in srgb, var(--chart) 62%, var(--card)); }
.tag-punkt.s4, .tag-woche li.gewaehlt .tag-punkt.s4 { background: var(--chart); box-shadow: 0 4px 10px -4px var(--chart); }
.tag-punkt.zukunft, .tag-woche li.gewaehlt .tag-punkt.zukunft { background: none; box-shadow: inset 0 0 0 1.5px var(--line); }
.tag-punkt.pause, .tag-woche li.gewaehlt .tag-punkt.pause { box-shadow: none; background: repeating-linear-gradient(135deg, var(--line) 0 2px, transparent 2px 5px); opacity: .7; }
.tag-punkt.heute { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.tag-balken { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: auto; }
.tag-balken span { height: 5px; border-radius: 3px; background: var(--neutral-soft); }
.tag-balken .an { background: var(--chart); }
.tag-heat { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); grid-auto-columns: 1fr; gap: 4px; }
.tag-heat span { aspect-ratio: 1; border-radius: 50%; background: var(--neutral-soft); transition: transform .12s; }
.tag-heat span:hover { transform: scale(1.35); }
.tag-heat .zukunft { background: none; }
.tag-heat .pause { opacity: .45; }
.tag-heat .s1, .tag-legende .s1 { background: color-mix(in srgb, var(--chart) 24%, var(--card)); }
.tag-heat .s2, .tag-legende .s2 { background: color-mix(in srgb, var(--chart) 44%, var(--card)); }
.tag-heat .s3, .tag-legende .s3 { background: color-mix(in srgb, var(--chart) 64%, var(--card)); }
.tag-heat .s4, .tag-legende .s4 { background: var(--chart); }
.tag-heat .heute { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
.tag-legende { display: flex; align-items: center; gap: 3px; font-size: 11px; }
.tag-legende span { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.tag-legende .s4 { margin-left: 6px; }
.tag-legende .s3, .tag-legende .s4 { margin-right: 3px; }

/* Die drei Schritte als Pfad: Kreis links, eine Linie verbindet sie und füllt sich mit */
.tag-pfad { display: grid; gap: 14px; }
.tag-pfad .tag-block { position: relative; margin: 0; padding: 22px 24px 22px 76px; border-radius: 16px; transition: border-color .2s, box-shadow .2s; scroll-margin-top: 20px; }
.tag-pfad .tag-block + .tag-block { border-top: 1px solid var(--line); }
.tag-pfad .tag-block:focus-within { border-color: color-mix(in srgb, var(--chart) 55%, var(--line)); box-shadow: 0 10px 30px -18px var(--chart); }
.tag-pfad .tag-block:target { border-color: var(--chart); }
.tag-pfad .tag-block h2 { font-family: var(--display); font-size: 17px; font-weight: 600; }
.tag-pfad .tag-frage { margin-top: 4px; font-size: 14px; }
.tag-schritt { position: absolute; left: 22px; top: 18px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 15px; font-weight: 600; line-height: 1; color: var(--muted); background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line); font-variant-numeric: tabular-nums; z-index: 1; }
.tag-schritt.voll { background: var(--chart); color: #fff; box-shadow: 0 6px 14px -6px var(--chart); animation: tag-plopp .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes tag-plopp { from { transform: scale(.4); opacity: 0; } }
.tag-pfad .tag-block:not(.tag-zeiten):not(:nth-child(3))::before { content: ''; position: absolute; left: 38px; top: 52px; bottom: -34px; width: 2px; border-radius: 1px; background: var(--line); z-index: 1; }
.tag-pfad .tag-block.voll:not(:nth-child(3))::before { background: var(--chart); }
.tag-pfad .tag-zeiten { padding-left: 24px; }
.tag-pfad .tag-zeiten summary { margin-inline: -24px; padding-inline: 24px; }
.tag-bento .tag-woche { margin-block: auto; }
.tag-bento .tag-punkt { --g: 42px; font-size: 18px; }
.tag-bento .tag-woche small { font-size: 12px; }
.tag-serie-zahl { margin-top: auto; }
.tag-serie-zahl b { font-size: 76px; }
.tag-serie .tag-flamme { width: 58px; height: 58px; }
.tag-serie > small { margin-top: auto; }
.tag-team .card-head h2 { display: flex; align-items: center; gap: 10px; }
.tag-kopf { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 14px; font-weight: 600; color: #fff; background: linear-gradient(135deg, #003d66, #0a6aa8); }
.tag-stand { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.tag-stand i { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(var(--card) 0 5px, transparent 5.5px), conic-gradient(var(--chart) calc(var(--n) * 120deg), var(--neutral-soft) 0); }
.tag-team .card.rund { border-color: color-mix(in srgb, var(--chart) 45%, var(--line)); }
.tag-team .card.rund .tag-stand { color: var(--ink); }
.tag-team .tag-woche { justify-content: flex-start; margin: -4px 0 12px -8px; }
.tag-team .tag-woche li { flex: none; width: 38px; }
.tag-team .tag-punkt { --g: 22px; font-size: 12px; }
.tag-mitteilung { margin: 16px 0 0; font-size: 13px; }
/* Übertrag vom letzten Tag, Pause und Wochenrückblick */
.tag-uebertrag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; }
.tag-chip { appearance: none; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 12px; border: 1px dashed color-mix(in srgb, var(--chart) 55%, var(--line)); border-radius: 999px; background: none; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: background-color .12s, border-color .12s; }
.tag-chip:hover { background: color-mix(in srgb, var(--chart) 10%, var(--card)); border-style: solid; }
.tag-chip span { color: var(--chart); font-weight: 600; }
.tag-pause { display: grid; gap: 6px; margin: 16px 0 0; font-size: 13px; }
.tag-pause summary { cursor: pointer; color: var(--muted); width: fit-content; }
.tag-pause summary:hover { color: var(--ink); }
.tag-pause-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 10px; }
.tag-pause-form label { display: inline-flex; align-items: center; gap: 6px; }
.tag-pause-form small { flex-basis: 100%; }
.tag-chips a > span:last-child:not(:first-child) { background: none; width: auto; }
.tag-bento-gleich { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tag-bento-gleich .tag-serie-zahl b { font-size: 44px; }
.tag-wochentage .card { margin: 0; }
.tag-wochentage .card-head h2 a { color: inherit; text-decoration: none; }
.tag-wochentage .card-head h2 a:hover { text-decoration: underline; }
.tag-funke { position: fixed; z-index: 40; width: 8px; height: 8px; border-radius: 2px; pointer-events: none; animation: tag-funke 1.1s cubic-bezier(.1, .8, .3, 1) forwards; }
@keyframes tag-funke { to { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } }
/* Ergebnisse für Woche und Monat, Kompass am Tag, Monatsraster */
.tag-zahlt { margin-top: 4px; }
.tag-zahlt select { max-width: min(100%, 320px); height: 26px; padding: 0 24px 0 8px; border-radius: 999px; font-size: 12px; color: var(--muted); border-style: dashed; }
.tag-zahlt select.gesetzt { color: var(--accent-ink); border-style: solid; border-color: color-mix(in srgb, var(--chart) 45%, var(--line)); }
.tag-eingabe select { flex: 0 1 200px; min-width: 0; }
.tag-zielkarte, .tag-kompass, .tag-monat { margin: 0; border-radius: 16px; }
.tag-zielkarte .card-head, .tag-kompass .card-head, .tag-monat .card-head { margin-bottom: 4px; }
.tag-kompass .card-head a, .tag-planen { font-size: 13px; color: var(--accent-ink); text-decoration: none; }
.tag-kompass .card-head a:hover, .tag-planen:hover { text-decoration: underline; }
.tag-kompass .empty, .tag-zielkarte .empty { margin: 6px 0 0; }
.tag-ziele .task:first-child { border-top: 0; }
.tag-ziele .task-title { font-weight: 500; }
.tag-zielform { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tag-zielform input { flex: 1 1 260px; min-width: 0; }
.tag-zielform select { flex: 0 1 220px; min-width: 0; }
.tag-zielform small { flex-basis: 100%; font-size: 12px; }
.tag-mraster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(96px, 1.3fr); gap: 6px; align-items: center; text-align: center; margin-top: 12px; }
.tag-mraster > small { font-size: 11px; }
.tag-mzelle { display: grid; place-items: center; height: 42px; border-radius: 10px; background: var(--neutral-soft); color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; text-decoration: none; transition: transform .12s; }
a.tag-mzelle:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--chart); }
.tag-mzelle.s1 { background: color-mix(in srgb, var(--chart) 24%, var(--card)); }
.tag-mzelle.s2 { background: color-mix(in srgb, var(--chart) 44%, var(--card)); }
.tag-mzelle.s3 { background: color-mix(in srgb, var(--chart) 64%, var(--card)); color: #fff; }
.tag-mzelle.s4 { background: var(--chart); color: #fff; }
.tag-mzelle.zukunft.s0 { background: none; box-shadow: inset 0 0 0 1px var(--line); }
.tag-mzelle.pause { opacity: .5; }
.tag-mzelle.fremd { opacity: .3; }
.tag-mzelle.heute { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
.tag-mwoche { justify-self: center; padding: 5px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-size: 12px; text-decoration: none; white-space: nowrap; }
.tag-mwoche:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--chart); }
.tag-mwoche.voll { background: var(--chart); color: #fff; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .tag-ring circle.voll, .tag-schritt.voll, .tag-kachel, .tag-flamme, .tag-puls.rund .tag-ring::before { animation: none !important; transition: none; } }
@media (max-width: 860px) {
  .tag-bento { grid-template-columns: minmax(0, 1fr); }
  .tag-buehne { flex-direction: column-reverse; align-items: flex-start; padding: 24px; }
  .tag-buehne h2 { font-size: 26px; }
  .tag-ring { width: 112px; height: 112px; }
  .tag-ring b { font-size: 38px; }
  .tag-pfad .tag-block { padding-left: 64px; }
  .tag-schritt { left: 16px; }
  .tag-pfad .tag-block:not(.tag-zeiten):not(:nth-child(3))::before { left: 32px; }
}

.tag-blatt { padding: 0; }
.tag-block { padding: 20px; }
.tag-block + .tag-block { border-top: 1px solid var(--line-soft); }
.tag-block h2 { margin: 0; font-size: 14px; font-weight: 600; }
.tag-frage { margin: 2px 0 0; font-size: 13px; color: var(--muted); text-wrap: pretty; }
.tag-block .tasks { margin-top: 6px; }
.tag-block .empty { margin-top: 2px; font-size: 13px; }
.tag-zeile .task-text small + small { margin-top: 1px; }
.tag-warnung { color: var(--danger); }
.task-text small.tag-warnung { color: var(--danger); }

.tag-aktion { display: flex; align-items: center; gap: 10px; flex: none; }
.tag-uhr { font-size: 14px; font-weight: 600; white-space: nowrap; }
.tag-zeile.tag-aktiv .tag-uhr { color: var(--accent-ink); }
.tag-weg { font-size: 16px; line-height: 1; padding: 4px 6px; color: var(--muted); text-decoration: none; }
.tag-weg:hover { color: var(--ink); }
.tag-aktion .tag-weg { order: -1; } /* Starten steht bündig am Rand, das Entfernen links davon */
@media (hover: hover) and (pointer: fine) {
  .tag-weg { opacity: 0; }
  .tag-zeile:hover .tag-weg, .tag-zeile:focus-within .tag-weg { opacity: 1; }
}

.tag-wahl { margin-top: 8px; }
.tag-eingabe { display: flex; gap: 8px; }
.tag-eingabe input { flex: 1; min-width: 0; }
.tag-eingabe .btn { flex: none; }
.tag-vorschlaege { display: none; flex-direction: column; gap: 4px; margin: 10px -10px -6px; }
.tag-wahl.offen .tag-vorschlaege:not([hidden]) { display: flex; }
.tag-vorschlaege > small { padding: 0 10px; font-size: 12px; }
.tag-treffer { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; max-height: 264px; overflow-y: auto; }
.tag-treffer li[hidden] { display: none; }
.tag-option { appearance: none; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; min-height: 34px; padding: 6px 10px; border: 0; border-radius: var(--r-s); background: none; color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.tag-option span { min-width: 0; overflow-wrap: anywhere; }
.tag-option small { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }
.tag-option:hover, .tag-option:focus-visible { background: var(--neutral-soft); outline: 0; }

.tag-bericht { display: grid; gap: 8px; margin-top: 10px; }
.tag-bericht textarea { display: block; width: 100%; min-height: 84px; max-height: 400px; resize: vertical; field-sizing: content; }
.tag-bericht-fuss { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 18px; }
.tag-stand { margin-left: auto; }
.tag-bericht-fuss .btn[hidden] { display: none; }

.tag-zeiten { padding-block: 0; }
.tag-zeiten summary { list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 52px; margin-inline: -20px; padding-inline: 20px; font-size: 14px; font-weight: 600; cursor: pointer; }
.tag-zeiten summary::-webkit-details-marker { display: none; }
.tag-zeiten summary .mono { margin-left: auto; font-weight: 400; color: var(--muted); }
.tag-zeiten summary::after { content: '›'; color: var(--muted); font-weight: 400; font-size: 16px; line-height: 1; transition: transform .15s ease; }
.tag-zeiten[open] summary::after { transform: rotate(90deg); }
.tag-zeiten[open] { padding-bottom: 14px; }
@media (prefers-reduced-motion: reduce) { .tag-zeiten summary::after { transition: none; } }

.tag-laeuft { display: flex; align-items: center; gap: 16px; border-color: var(--accent); }
.tag-laeuft .tag-uhr { font-size: 16px; }

/* Zeit auf der Aufgabe und Listen */
.tag-uhrzeile { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.tag-eintraege { list-style: none; margin: 0 0 12px; padding: 0; }
.tag-eintraege li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.tag-eintraege li:first-child { border-top: 0; }
.tag-eintraege small { display: block; font-size: 12px; }
.tag-eintraege .mono { white-space: nowrap; }
.tag-kurz { margin-bottom: 0; }
.tag-kurz li { grid-template-columns: minmax(0, 1fr) auto; }
.tag-kurz a { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.tag-kurz a:hover { text-decoration: underline; }
.tag-nachtrag { margin-bottom: 0; }
.tag-nachtrag-form { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.tag-nachtrag-form input { width: 100%; min-width: 0; }

.tag-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; align-items: start; }
.tag-team .card { margin: 0; min-width: 0; }
.tag-klein { margin: 12px 0 2px; font-size: 13px; font-weight: 500; color: var(--muted); }
.tag-klein:first-of-type { margin-top: 0; }
.tag-zeiten .tag-klein:first-of-type { margin-top: 12px; }

@media (max-width: 860px) {
  .tag-seite .page-head { flex-wrap: nowrap; }
  .tag-pfeil { width: 36px; height: 36px; font-size: 18px; }
  .tag-tage { margin-left: -12px; gap: 0; }
  .tag-option { min-height: 44px; align-items: center; }
  .tag-nachtrag-form { grid-template-columns: minmax(0, 1fr); }
  .tag-nachtrag-form .btn { justify-self: start; }
  .tag-aktion .tag-weg { order: 0; margin-left: auto; min-width: 40px; min-height: 40px; padding: 0 2px 0 0; justify-content: flex-end; }
  .tag-zeile:has(.tag-aktion .btn, .tag-aktion .tag-uhr) { flex-wrap: wrap; }
  .tag-zeile:has(.tag-aktion .btn, .tag-aktion .tag-uhr) .task-text { flex: 1 1 calc(100% - 44px); }
  .tag-zeile:has(.tag-aktion .btn, .tag-aktion .tag-uhr) .tag-aktion { width: 100%; padding-left: 32px; }
  .tag-laeuft { flex-wrap: wrap; }
  .tag-laeuft .task-text { flex: 1 1 100%; }
  .tag-laeuft form { margin-left: auto; }
}
@media (max-width: 480px) { .tag-team { grid-template-columns: minmax(0, 1fr); } }

/* ===== Finanzen im Aussehen des Team-Boards (umsatzpilot-board.vercel.app/finanzen). Farben 1:1 aus dessen farben.css, nur unter .fz gültig. ===== */
.fz {
  /* Kunden-Logos stehen in beiden Modi auf Weiß: Logos sind für helle Flächen gemacht, dunkle Schriftzüge verschwinden sonst. */
  --z-logo-grund: #ffffff;
  --z-logo-rand: rgba(0, 0, 0, 0.08);
  --z-ffffff: #ffffff;
  --z-fcfcfd: #fdfdfd;
  --z-fafafa: #fafafa;
  --z-f7f7f8: #f5f5f7;
  --z-f4f4f5: #f2f2f4;
  --z-f1f1f3: #f0f0f2;
  --z-f0f0f2: #efeff1;
  --z-ececef: #e8e8ed;
  --z-ececee: #e8e8ec;
  --z-e8e8eb: #e8e8ed;
  --z-e4e4e7: #e3e3e8;
  --z-d4d4d8: #d2d2d7;
  --z-c4c4cc: #c7c7cc;
  --z-a1a1aa: #a1a1a6;
  --z-8e8e98: #8e8e93;
  --z-71717a: #6e6e73;
  --z-52525b: #515154;
  --z-3f3f46: #424245;
  --z-2c2c31: #333336;
  --z-27272a: #2a2a2d;
  --z-18181b: #1d1d1f;
  --z-00558b: #00558b;
  --z-004a79: #004a79;
  --z-003b63: #003b63;
  --z-175cd3: #0066cc;
  --z-2e90fa: #007aff;
  --z-eff8ff: #eff8ff;
  --z-eef6fc: #eef6fc;
  --z-f0f6fb: #f0f6fb;
  --z-eef5fa: #eef5fa;
  --z-f4f8fd: #f4f8fd;
  --z-d1e9ff: #d1e9ff;
  --z-b2ddff: #b2ddff;
  --z-9cc5e2: #9cc5e2;
  --z-fef3f2: #fef3f2;
  --z-fde4e1: #fde4e1;
  --z-fecdca: #fecdca;
  --z-b42318: #b42318;
  --z-d92d20: #d92d20;
  --z-fffaeb: #fffaeb;
  --z-fff6ed: #fff6ed;
  --z-fff4d6: #fff4d6;
  --z-fef0c7: #fef0c7;
  --z-fdebc8: #fdebc8;
  --z-fddcab: #fddcab;
  --z-fedf89: #fedf89;
  --z-b54708: #b54708;
  --z-93370d: #93370d;
  --z-8a6100: #8a6100;
  --z-c4320a: #c4320a;
  --z-ecfdf3: #ecfdf3;
  --z-abefc6: #abefc6;
  --z-067647: #248a3d;
  --z-12b76a: #12b76a;
  --z-f04438: #f04438;
  --z-f6f3ff: #f6f3ff;
  --z-f3f0ff: #f3f0ff;
  --z-e3e7f5: #e3e7f5;
  --z-3b3b8f: #3b3b8f;
  --z-auf-ink: #ffffff;
  /* Akzente und Leuchten der Aufgaben-Seite (Kennzahl-Kacheln, Spaltenpunkte). */
  --z-violett: #af52de;
  --z-orange: #ff9500;
  --z-gruen: #34c759;
  --z-rot: #ff3b30;
  /* Apple-Bausteine: Glas der Seitenleiste, Füllung von Steuerelementen, Auswahl in Listen, Kartenschatten. */
  --z-glas: rgba(255, 255, 255, 0.72);
  --z-glas-rand: rgba(0, 0, 0, 0.06);
  --z-fuell: rgba(118, 118, 128, 0.12);
  --z-fuell-stark: rgba(118, 118, 128, 0.2);
  --z-auswahl: rgba(0, 0, 0, 0.06);
  /* Vorschau der Kundenakte: immer dunkel wie Quick Look, in beiden Themen gleich. */
  --z-vorschau: rgba(12, 12, 14, 0.9);
  --z-vorschau-text: #f5f5f7;
  --z-vorschau-fuell: rgba(255, 255, 255, 0.12);
  --z-vorschau-fuell-stark: rgba(255, 255, 255, 0.2);
  --z-vorschau-ink: #1d1d1f;
  --z-karte-schatten: 0 0.5px 1px rgba(0, 0, 0, 0.05), 0 2px 12px rgba(0, 0, 0, 0.04);
  --z-karte-schatten-hoch: 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.08);
  /* Glas-Look (21.10.2026): hell bleibt ruhig, die Bausteine gibt es trotzdem, damit Kacheln in beiden Themen funktionieren. */
  --z-karte-grund: #ffffff;
  --z-karte-glas: none;
  --z-licht-a: #5b8def;
  --z-licht-b: #8b6cf0;
  --z-licht-glut: rgba(91, 141, 239, 0.08);
  --z-ring-spur: #ececef;
  --z-saeule: #e4e4e7;
  --z-saeule-heute: #00558b;
  --z-saeule-glut: none;
}
:root[data-theme="dark"] .fz {
  /* Navy-Glas (21.10.2026, Pinterest-Auswahl A „Navy mit Leuchten“): tiefes Nachtblau, Flächen leicht blaustichig statt iOS-Grau. */
  --z-ffffff: #0d1430;
  --z-fcfcfd: #0f1633;
  --z-fafafa: #131b3a;
  --z-f7f7f8: #050915;
  --z-f4f4f5: #18213f;
  --z-f1f1f3: #172040;
  --z-f0f0f2: #1b2444;
  --z-ececef: #232d4f;
  --z-ececee: #1b2444;
  --z-e8e8eb: #1b2444;
  --z-e4e4e7: #263156;
  --z-d4d4d8: #344068;
  --z-c4c4cc: #3f4b75;
  --z-a1a1aa: #6f7aa0;
  --z-8e8e98: #828cb0;
  --z-71717a: #939cbd;
  --z-52525b: #c3c9e0;
  --z-3f3f46: #d3d8ea;
  --z-2c2c31: #e3e7f3;
  --z-27272a: #e3e7f3;
  --z-18181b: #f3f5fb;
  --z-00558b: #6ea8ff;
  --z-004a79: #93bfff;
  --z-003b63: #0b2a66;
  --z-175cd3: #93bfff;
  --z-2e90fa: #4f8bff;
  --z-eff8ff: rgba(79,139,255,0.14);
  --z-eef6fc: rgba(79,139,255,0.14);
  --z-f0f6fb: rgba(79,139,255,0.11);
  --z-eef5fa: rgba(79,139,255,0.11);
  --z-f4f8fd: rgba(79,139,255,0.08);
  --z-d1e9ff: rgba(79,139,255,0.3);
  --z-b2ddff: rgba(79,139,255,0.38);
  --z-9cc5e2: rgba(79,139,255,0.45);
  --z-fef3f2: rgba(255,92,92,0.12);
  --z-fde4e1: rgba(255,92,92,0.2);
  --z-fecdca: rgba(255,92,92,0.34);
  --z-b42318: #ff7a72;
  --z-d92d20: #ff7a72;
  --z-fffaeb: rgba(255,170,60,0.1);
  --z-fff6ed: rgba(255,170,60,0.1);
  --z-fff4d6: rgba(255,170,60,0.12);
  --z-fef0c7: rgba(255,170,60,0.16);
  --z-fdebc8: rgba(255,170,60,0.18);
  --z-fddcab: rgba(255,170,60,0.28);
  --z-fedf89: rgba(255,170,60,0.32);
  --z-b54708: #ffb547;
  --z-93370d: #ffb547;
  --z-8a6100: #ffb547;
  --z-c4320a: #ff9350;
  --z-ecfdf3: rgba(52,211,153,0.12);
  --z-abefc6: rgba(52,211,153,0.32);
  --z-067647: #4ade9a;
  --z-12b76a: #4ade9a;
  --z-f04438: #ff6b6b;
  --z-f6f3ff: rgba(139,108,240,0.14);
  --z-f3f0ff: rgba(139,108,240,0.14);
  --z-e3e7f5: rgba(139,108,240,0.24);
  --z-3b3b8f: #c1b2ff;
  --z-auf-ink: #050915;
  --z-violett: #b48cff;
  --z-orange: #ffa53d;
  --z-gruen: #4ade9a;
  --z-rot: #ff5c5c;
  --z-glas: rgba(10, 16, 38, 0.55);
  --z-glas-rand: rgba(255, 255, 255, 0.08);
  --z-fuell: rgba(140, 160, 255, 0.12);
  --z-fuell-stark: rgba(140, 160, 255, 0.2);
  --z-auswahl: rgba(120, 150, 255, 0.14);
  /* Glaskarte: oben ein Hauch heller (Licht fällt von oben), feine helle Oberkante, weicher Schatten nach unten. */
  --z-karte-grund: rgba(16, 24, 56, 0.42);
  --z-karte-glas: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025) 60%);
  --z-karte-schatten: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 1px rgba(255, 255, 255, 0.07), 0 24px 48px -24px rgba(0, 0, 0, 0.7);
  --z-karte-schatten-hoch: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.1), 0 24px 60px -12px rgba(0, 0, 0, 0.75);
  /* Leuchten hinter allem (fest am Bildschirm) und die Lichtkante unten an wichtigen Karten (Auswahl F). */
  --z-leuchten-a: rgba(46, 98, 255, 0.34);
  --z-leuchten-b: rgba(124, 77, 255, 0.2);
  --z-leuchten-c: rgba(0, 168, 255, 0.12);
  --z-licht-a: #4f7bff;
  --z-licht-b: #a46bff;
  --z-licht-glut: rgba(90, 110, 255, 0.2);
  --z-ring-spur: rgba(255, 255, 255, 0.08);
  --z-saeule: linear-gradient(180deg, rgba(130, 155, 255, 0.5), rgba(130, 155, 255, 0.1));
  --z-saeule-heute: linear-gradient(180deg, #a98bff, #4f7bff);
  --z-saeule-glut: 0 0 18px rgba(100, 120, 255, 0.55);
}

/* Seitengrund wie die Zentrale: hell Apple-Grau, dunkel Navy mit Leuchten */
.main:has(> .fz) { background: #f5f5f7; }
:root[data-theme="dark"] .main:has(> .fz) { background-color: #050915; background-image: radial-gradient(60% 50% at 12% -5%, rgba(46, 98, 255, 0.34), transparent 70%), radial-gradient(45% 40% at 95% 8%, rgba(124, 77, 255, 0.2), transparent 70%), radial-gradient(55% 45% at 60% 105%, rgba(0, 168, 255, 0.12), transparent 70%); background-attachment: fixed; background-repeat: no-repeat; }
.fz { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 1280px; margin: 0 auto; color: var(--z-18181b); font-variant-numeric: tabular-nums; font-optical-sizing: auto; }
.fz h1, .fz h2, .fz h3, .fz p { margin: 0; }
.fz a { color: inherit; text-decoration: none; }
.fz ul, .fz ol { list-style: none; margin: 0; padding: 0; }
.fz :focus-visible { outline: 2px solid var(--z-00558b); outline-offset: 2px; }
.fz-sym { flex-shrink: 0; }
.fz-leise-sym { color: var(--z-a1a1aa); }
.fz-kritisch { color: var(--z-b42318) !important; }
.fz-leise { color: var(--z-a1a1aa) !important; }
.fz-gut { color: var(--z-067647) !important; }

/* Kopf */
.fz-kopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-bottom: 4px; }
.fz-kopfzeile h1 { flex: 1 1 16rem; font-family: var(--sans); font-size: 26px; font-weight: 600; letter-spacing: -0.03em; color: var(--z-18181b); }
.fz-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fz-aktionen form { margin: 0; }

/* Knöpfe */
.fz-knopf { display: inline-flex; flex-direction: row; flex-shrink: 0; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; border: 0; border-radius: 999px; font: 500 13px/1 var(--sans); cursor: pointer; white-space: nowrap; transition: background-color .1s, color .1s, transform .1s; list-style: none; }
.fz-knopf::-webkit-details-marker { display: none; }
.fz-knopf:active { transform: scale(0.97); }
.fz-knopf.fz-klein { height: 28px; padding: 0 12px; font-size: 12px; }
.fz-knopf-haupt { background: var(--z-00558b); color: #fff !important; }
.fz-knopf-haupt:hover { background: var(--z-004a79); }
:root[data-theme="dark"] .fz .fz-knopf-haupt { background: #2e6cf6; }
:root[data-theme="dark"] .fz .fz-knopf-haupt:hover { background: #4a80f8; }
.fz-knopf-zweit { background: var(--z-fuell); color: var(--z-18181b); }
.fz-knopf-zweit:hover { background: var(--z-fuell-stark); }
.fz-knopf-schlicht { background: transparent; color: var(--z-52525b); }
.fz-knopf-schlicht:hover { background: var(--z-fuell); color: var(--z-18181b); }
.fz-nur-symbol { padding: 0; width: 28px; color: var(--z-a1a1aa); }
.fz-nur-symbol:hover { color: var(--z-b42318); }
.fz-upload { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.fz-upload-status { font-size: 12px; color: var(--z-71717a); }
.fz-upload-status:empty { display: none; }

/* Bereiche als Segmente */
.fz-segmente { display: flex; width: max-content; max-width: 100%; gap: 2px; overflow-x: auto; scrollbar-width: none; border-radius: 10px; background: var(--z-fuell); padding: 2px; }
.fz-segmente a { display: flex; flex-shrink: 0; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--z-71717a); transition: background-color .15s, color .15s, box-shadow .15s; }
.fz-segmente a:hover { color: var(--z-18181b); }
.fz-segmente a.on { background: var(--z-ffffff); color: var(--z-18181b); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 .5px rgba(0, 0, 0, .04); }
:root[data-theme="dark"] .fz .fz-segmente a.on { background: var(--z-d4d4d8); }
.fz-seg-zahl { font-size: 12px; color: var(--z-a1a1aa); }
.fz-seg-rot { display: grid; place-items: center; height: 18px; min-width: 18px; padding: 0 4px; border-radius: 999px; background: var(--z-fef3f2); color: var(--z-b42318); box-shadow: inset 0 0 0 1px var(--z-fecdca); font-size: 11px; font-weight: 600; }

/* Karten */
.fz-karte { background-color: var(--z-karte-grund); background-image: var(--z-karte-glas); box-shadow: var(--z-karte-schatten); border-radius: 16px; min-width: 0; }
.fz-karte-kopf { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 16px 20px 0; }
.fz-karte-kopf h2 { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--z-18181b); }
.fz-innen { padding: 8px 20px 20px; }
.fz-aussen { padding-top: 8px; }
.fz-innen-unten { padding: 0 20px 16px; }
.fz-aktion-text { font-size: 12px; color: var(--z-71717a); }
.fz-leer { display: flex; flex-direction: column; align-items: center; padding: 24px 0; text-align: center; }
.fz-leer p { max-width: 28ch; font-size: 13px; color: var(--z-71717a); }
.fz-leer .fz-knopf { margin-top: 12px; }
.fz-leer-gut { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 8px; border-radius: 999px; background: var(--z-ecfdf3); color: var(--z-067647); }

/* Geld groß, Abzeichen, Veränderung */
.fz-euro { color: var(--z-18181b); font-variant-numeric: tabular-nums; }
.fz-euro-rest { font-size: .5em; font-weight: 500; letter-spacing: 0; color: var(--z-a1a1aa); }
.fz-abz { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--ring); background: var(--grund); color: var(--farbe); }
.fz-abz-punkt { width: 6px; height: 6px; border-radius: 999px; background: var(--punkt); }
.fz-abz-neutral { --grund: var(--z-f4f4f5); --farbe: var(--z-52525b); --ring: var(--z-e4e4e7); --punkt: var(--z-a1a1aa); }
.fz-abz-erfolg { --grund: var(--z-ecfdf3); --farbe: var(--z-067647); --ring: var(--z-abefc6); --punkt: #17b26a; }
.fz-abz-warnung { --grund: var(--z-fff6ed); --farbe: var(--z-c4320a); --ring: var(--z-fddcab); --punkt: #ef6820; }
.fz-abz-achtung { --grund: var(--z-fffaeb); --farbe: var(--z-b54708); --ring: var(--z-fedf89); --punkt: #f79009; }
.fz-abz-kritisch { --grund: var(--z-fef3f2); --farbe: var(--z-b42318); --ring: var(--z-fecdca); --punkt: #f04438; }
.fz-abz-info { --grund: var(--z-eff8ff); --farbe: var(--z-175cd3); --ring: var(--z-b2ddff); --punkt: var(--z-2e90fa); }
.fz-delta { display: inline-flex; flex-shrink: 0; align-items: center; gap: 2px; height: 20px; padding: 0 6px; border-radius: 6px; font-size: 12px; font-weight: 600; background: var(--z-f4f4f5); color: var(--z-52525b); }
.fz-delta-gut { background: var(--z-ecfdf3); color: var(--z-067647); }
.fz-delta-schlecht { background: var(--z-fef3f2); color: var(--z-b42318); }
.fz-kz-zeichen { display: grid; flex-shrink: 0; place-items: center; border-radius: 30%; font-weight: 600; }
.fz-kopf { display: grid; flex-shrink: 0; place-items: center; border-radius: 999px; font-weight: 600; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }

/* Kennzahlen-Leiste */
.fz-kennzahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; overflow: hidden; border-radius: 16px; background: var(--z-ececef); box-shadow: var(--z-karte-schatten); }
.fz-kennzahlen > div { min-width: 0; background: var(--z-ffffff); padding: 16px 20px; }
.fz-kennzahlen dt { display: flex; align-items: center; gap: 6px; overflow: hidden; font-size: 12px; color: var(--z-71717a); white-space: nowrap; text-overflow: ellipsis; }
.fz-kennzahlen dd { margin: 6px 0 0; overflow: hidden; font-size: 22px; line-height: 1; font-weight: 600; letter-spacing: -0.025em; color: var(--z-18181b); white-space: nowrap; text-overflow: ellipsis; }
.fz-punkt { width: 6px; height: 6px; flex-shrink: 0; border-radius: 999px; background: var(--z-gruen); }
.fz-punkt-kritisch { background: var(--z-rot); }
@media (min-width: 768px) { .fz-kennzahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Fokus: Eingenommen und Verlauf */
.fz-fokus { padding: 20px 12px 12px; }
.fz-fokus-oben { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 32px; padding: 0 8px; }
.fz-fokus-links { min-width: 0; }
.fz-fokus-label { font-size: 13px; font-weight: 500; color: var(--z-52525b); }
.fz-fokus-spanne { margin-left: 8px; font-weight: 400; color: var(--z-a1a1aa); }
.fz-fokus-betrag { margin-top: 10px !important; font-size: 40px; line-height: 1; font-weight: 600; letter-spacing: -0.04em; }
.fz-fokus-delta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 12px !important; font-size: 13px; color: var(--z-71717a); }
.fz-fokus-rechts { display: flex; align-items: flex-start; gap: 32px; }
.fz-fokus-dl { display: none; gap: 32px; margin: 0; text-align: right; }
.fz-fokus-dl dt { font-size: 12px; color: var(--z-71717a); }
.fz-fokus-dl dd { margin: 4px 0 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--z-18181b); }
.fz-chart-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: 24px; padding: 0 8px 8px; }
.fz-chart-kopf h2 { flex: 1; font-size: 13px; font-weight: 500; color: var(--z-18181b); }
.fz-legende { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--z-71717a); }
.fz-legende i { width: 12px; height: 2px; border-radius: 999px; }
.fz-legende b { font-weight: 500; color: var(--z-18181b); }
.fz-chart-zeit { width: 100%; font-size: 11px; color: var(--z-a1a1aa); }
.fz-verlauf { position: relative; min-height: 248px; user-select: none; }
.fz-verlauf svg { display: block; max-width: 100%; overflow: visible; }
.fz-verlauf-tasten { position: absolute; top: 0; bottom: 0; display: flex; }
.fz-verlauf-tasten button { flex: 1; height: 100%; border: 0; border-radius: 8px; background: transparent; cursor: default; outline: none; }
.fz-verlauf-tasten button:focus-visible { box-shadow: inset 0 0 0 2px var(--z-00558b); }
.fz-verlauf-leer { position: absolute; left: 0; right: 0; text-align: center; font-size: 13px; color: var(--z-71717a); pointer-events: none; }
.fz-tip { position: absolute; z-index: 10; width: 176px; transform: translate(-50%, -100%); padding: 10px 12px; border: 1px solid var(--z-ececef); border-radius: 12px; background: var(--z-ffffff); font-size: 12px; box-shadow: 0 12px 32px -8px rgba(16, 16, 24, .22), 0 2px 6px rgba(16, 16, 24, .06); pointer-events: none; }
.fz-tip b { display: block; margin-bottom: 6px; font-weight: 600; color: var(--z-18181b); }
.fz-tip div { display: flex; align-items: center; gap: 8px; padding: 2px 0; color: var(--z-71717a); }
.fz-tip i { width: 8px; height: 8px; flex-shrink: 0; border-radius: 3px; }
.fz-tip span { flex: 1; }
.fz-tip em { font-style: normal; font-weight: 500; color: var(--z-18181b); }
.fz-tip .fz-tip-summe { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--z-f0f0f2); }
.fz-tip .fz-tip-summe em { font-weight: 600; }
@media (min-width: 640px) { .fz-fokus { padding: 24px 20px 12px; } .fz-fokus-oben, .fz-chart-kopf { padding-left: 4px; padding-right: 4px; } .fz-fokus-betrag { font-size: 48px; } .fz-chart-zeit { width: auto; } }
@media (min-width: 768px) { .fz-fokus-dl { display: flex; } }

/* Kennzahl-Felder unter dem Verlauf */
.fz-streifen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--z-ececef); border-radius: 12px; background: var(--z-ececef); }
.fz-kf { display: block; min-width: 0; padding: 16px 20px; background: var(--z-ffffff); text-align: left; transition: background-color .15s; }
a.fz-kf:hover { background: var(--z-fafafa); }
.fz-kf-name { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--z-71717a); }
.fz-kf-name > :nth-child(2) { flex: 1; }
.fz-kf-punkt { width: 6px; height: 6px; flex-shrink: 0; border-radius: 999px; }
.fz-kf-zusatz { margin-left: auto; }
.fz-kf-wert { display: block; margin-top: 8px; overflow: hidden; font-size: 22px; line-height: 1; font-weight: 600; letter-spacing: -0.025em; color: var(--z-18181b); white-space: nowrap; text-overflow: ellipsis; }
.fz-kf-unter { display: flex; align-items: center; gap: 8px; min-height: 20px; margin-top: 8px; font-size: 12px; color: var(--z-71717a); }
.fz-kf-unter > span:last-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (min-width: 1024px) { .fz-streifen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Raster */
.fz-raster { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 16px; }
@media (min-width: 768px) { .fz-raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .fz-raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fz-spalte-2 { grid-column: span 2; }
  .fz-raster-seite, .fz-raster-pauschalen { grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; }
}
.fz-spalte { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* Balkenzeilen, Top-Kunden, Fixkosten */
.fz-top, .fz-balken-liste { display: flex; flex-direction: column; gap: 14px; }
.fz-top li { display: flex; align-items: center; gap: 10px; }
.fz-top-rang { width: 12px; flex-shrink: 0; text-align: center; font-size: 11px; font-weight: 600; color: var(--z-a1a1aa); }
.fz-top-text { min-width: 0; flex: 1; }
.fz-bz { display: flex; align-items: center; gap: 12px; }
.fz-bz-mitte { min-width: 0; flex: 1; }
.fz-bz-zeile { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.fz-bz-name { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--z-18181b); }
.fz-bz-betrag { flex-shrink: 0; font-weight: 600; color: var(--z-18181b); }
.fz-bz-prozent { width: 40px; flex-shrink: 0; text-align: right; font-size: 12px; color: var(--z-71717a); }
.fz-bz-spur { height: 8px; margin-top: 6px; overflow: hidden; border-radius: 999px; background: var(--z-f4f4f5); }
.fz-bz-spur div { height: 100%; border-radius: 999px; }
.fz-bz-unter { margin-top: 4px !important; font-size: 11px; color: var(--z-a1a1aa); }
.fz-fix-betrag { display: block; font-size: 26px; line-height: 1; font-weight: 600; letter-spacing: -0.03em; }
.fz-fix-text { margin-top: 6px !important; font-size: 12px; color: var(--z-71717a); }
.fz-fix-liste { max-height: 280px; margin-top: 12px !important; padding-top: 8px !important; overflow-y: auto; border-top: 1px solid var(--z-f0f0f2); }
.fz-fix-leer { margin-top: 12px !important; padding-top: 12px; border-top: 1px solid var(--z-f0f0f2); font-size: 12px; color: var(--z-71717a); }
.fz-fix-zeile { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; }
.fz-fix-kachel { display: grid; width: 24px; height: 24px; flex-shrink: 0; place-items: center; border-radius: 6px; background: var(--z-f4f4f5); color: var(--z-71717a); }
.fz-fix-mitte { min-width: 0; flex: 1; }
.fz-fix-titel, .fz-fix-info { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fz-fix-titel { color: var(--z-18181b); }
.fz-fix-info { font-size: 12px; color: var(--z-71717a); }
.fz-fix-wert { flex-shrink: 0; font-weight: 500; color: var(--z-18181b); }

/* Ausblick */
.fz-ausblick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 768px) { .fz-ausblick:not(.fz-ausblick-stapel) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fz-ausblick-stapel { gap: 20px; }
.fz-am-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; color: var(--z-18181b); }
.fz-am-spur { height: 6px; margin-top: 6px; overflow: hidden; border-radius: 999px; background: var(--z-f4f4f5); }
.fz-am-spur div { height: 100%; border-radius: 999px; background: var(--z-gruen); }
.fz-am-text { margin-top: 4px; font-size: 12px; color: var(--z-71717a); }
.fz-am-kosten { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; padding: 8px 12px; border-radius: 8px; background: var(--z-fafafa); font-size: 12px; color: var(--z-71717a); }
.fz-am-kosten b { display: block; font-size: 13px; font-weight: 600; color: var(--z-18181b); }
.fz-am-posten { display: flex; flex-direction: column; gap: 4px; margin-top: 8px !important; }
.fz-am-posten li { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.fz-am-tag { width: 48px; flex-shrink: 0; color: var(--z-a1a1aa); }
.fz-am-titel { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--z-52525b); }
.fz-am-geplant { flex-shrink: 0; font-size: 10px; color: var(--z-a1a1aa); }
.fz-am-cent { flex-shrink: 0; color: var(--z-18181b); }
.fz-am-nichts { margin-top: 8px !important; font-size: 12px; color: var(--z-a1a1aa); }

/* Rechnungsstatus */
.fz-status { display: flex; align-items: center; gap: 20px; }
.fz-ring { position: relative; width: 116px; height: 116px; flex-shrink: 0; }
.fz-ring svg { width: 100%; height: 100%; }
.fz-ring-mitte { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.fz-ring-mitte b { font-size: 20px; line-height: 1; font-weight: 600; letter-spacing: -0.03em; color: var(--z-18181b); }
.fz-ring-mitte small { margin-top: 4px; font-size: 11px; color: var(--z-71717a); }
.fz-status-summe { min-width: 0; }
.fz-status-summe .fz-euro { display: block; font-size: 24px; line-height: 1; font-weight: 600; letter-spacing: -0.03em; }
.fz-status-summe p { margin-top: 8px; font-size: 12px; color: var(--z-71717a); }
.fz-status-liste { display: flex; flex-direction: column; gap: 2px; margin: 16px -8px 0 !important; }
.fz-status-liste a { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; font-size: 13px; transition: background-color .15s; }
.fz-status-liste a:hover { background: var(--z-fafafa); }
.fz-status-farbe { width: 10px; height: 10px; flex-shrink: 0; border-radius: 3px; }
.fz-status-name { min-width: 0; flex: 1; color: var(--z-18181b); }
.fz-status-rot { font-weight: 500; color: var(--z-b42318); }
.fz-status-zahl { flex-shrink: 0; font-size: 12px; color: var(--z-a1a1aa); }
.fz-status-cent { width: 96px; flex-shrink: 0; text-align: right; font-weight: 600; color: var(--z-18181b); }

/* Offene Posten */
.fz-op-zeile { padding: 0 20px; font-size: 12px; color: var(--z-71717a); }
.fz-op-rot { font-weight: 500; color: var(--z-b42318); }
.fz-op-liste { margin-top: 8px !important; border-top: 1px solid var(--z-f0f0f2); }
.fz-op { display: flex; align-items: center; gap: 12px; padding: 10px 20px; transition: background-color .15s; }
.fz-op + .fz-op { border-top: 1px solid var(--z-f4f4f5); }
.fz-op:hover { background: var(--z-fafafa); }
.fz-op-link { display: flex; min-width: 0; flex: 1; align-items: center; gap: 12px; border-radius: 6px; }
.fz-op-text { min-width: 0; flex: 1; }
.fz-op-kunde, .fz-op-info { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fz-op-kunde { font-size: 13px; font-weight: 600; color: var(--z-18181b); }
.fz-op-info { font-size: 12px; color: var(--z-71717a); }
.fz-op-faellig { display: none; flex-shrink: 0; }
.fz-op-cent { width: 96px; flex-shrink: 0; text-align: right; font-size: 13px; font-weight: 600; color: var(--z-18181b); }
.fz-op-knopf { display: none; }
.fz-op-knopf form, .fz-rz-knopf form { margin: 0; }
.fz-op-mehr { display: block; padding: 10px 20px; border-top: 1px solid var(--z-f4f4f5); border-radius: 0 0 16px 16px; font-size: 12px; font-weight: 500; color: var(--z-00558b) !important; }
.fz-op-mehr:hover { background: var(--z-fafafa); }
@media (min-width: 640px) { .fz-op-faellig { display: inline-flex; } }
@media (min-width: 768px) { .fz-op-knopf { display: block; } }

/* Aufklapper: Zeitraum und Kategorie */
.fz-pop { position: relative; }
.fz-pop > summary { list-style: none; }
.fz-pop-inhalt { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 268px; padding: 6px; border: 1px solid var(--z-ececef); border-radius: 10px; background: var(--z-ffffff); box-shadow: 0 12px 32px -8px rgba(16, 16, 24, .22), 0 2px 6px rgba(16, 16, 24, .06); }
.fz-pop-klein .fz-pop-inhalt { left: 0; right: auto; width: 220px; }
.fz-pop-liste a { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; font-size: 13px; color: var(--z-18181b); }
.fz-pop-liste a span { flex: 1; }
.fz-pop-liste a:hover, .fz-pop-liste a[aria-current] { background: var(--z-f4f4f5); }
.fz-pop-liste a[aria-current] { font-weight: 500; }
.fz-pop-trenner { height: 1px; margin: 4px 0; background: var(--z-f0f0f2); }
.fz-kal { margin-top: 6px; padding: 10px 6px 4px; border-top: 1px solid var(--z-f0f0f2); }
.fz-kal-kopf { display: flex; align-items: center; justify-content: space-between; padding: 0 2px; font-size: 12px; font-weight: 500; color: var(--z-71717a); }
.fz-kal-jahr { display: flex; align-items: center; gap: 2px; }
.fz-kal-jahr b { min-width: 40px; text-align: center; font-size: 13px; font-weight: 600; color: var(--z-18181b); }
.fz-kal-jahr button { display: grid; width: 24px; height: 24px; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--z-52525b); cursor: pointer; }
.fz-kal-jahr button:hover { background: var(--z-f4f4f5); }
.fz-kal-jahr button:disabled { opacity: .3; cursor: default; background: transparent; }
.fz-kal-monate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 8px; }
.fz-kal-monate button { height: 30px; border: 0; border-radius: 6px; background: transparent; font: 500 12px var(--sans); color: var(--z-18181b); cursor: pointer; }
.fz-kal-monate button:hover:not(:disabled) { background: var(--z-f4f4f5); }
.fz-kal-monate button.zwischen { background: var(--z-eff8ff); border-radius: 0; color: var(--z-175cd3); }
.fz-kal-monate button.ende { background: var(--z-00558b); color: #fff; }
.fz-kal-monate button:disabled { color: var(--z-c4c4cc); cursor: default; }
.fz-kal-hinweis { margin-top: 8px !important; padding: 0 2px; font-size: 11px; color: var(--z-a1a1aa); }

/* Listen: Leiste mit Reitern und Suche */
.fz-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-right: 12px; border-bottom: 1px solid var(--z-f0f0f2); }
.fz-reiter { display: flex; gap: 2px; margin: 8px; overflow-x: auto; scrollbar-width: none; border-radius: 10px; background: var(--z-fuell); padding: 2px; }
.fz-reiter a { flex-shrink: 0; height: 28px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--z-71717a); }
.fz-reiter a:hover { color: var(--z-18181b); }
.fz-reiter a.on { background: var(--z-ffffff); color: var(--z-18181b); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 .5px rgba(0, 0, 0, .04); }
:root[data-theme="dark"] .fz .fz-reiter a.on { background: var(--z-d4d4d8); }
.fz-reiter a span { margin-left: 6px; color: var(--z-a1a1aa); }
.fz-suche { position: relative; width: 176px; margin: 0; }
.fz-suche .fz-sym { position: absolute; top: 50%; left: 10px; transform: translateY(-50%); color: var(--z-a1a1aa); pointer-events: none; }
.fz-suche input { width: 100%; height: 28px; padding: 0 8px 0 28px; border: 1px solid var(--z-e4e4e7); border-radius: 8px; background: var(--z-ffffff); font: 13px var(--sans); color: var(--z-18181b); outline: none; }
.fz-suche input::placeholder { color: var(--z-a1a1aa); }
.fz-suche input:focus { border-color: var(--z-00558b); }
.fz-suche input::-webkit-search-cancel-button { display: none; }
.fz-liste-leer { padding: 40px 20px; text-align: center; font-size: 13px; color: var(--z-71717a); }
.fz-fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; border-top: 1px solid var(--z-f4f4f5); font-size: 12px; color: var(--z-71717a); }
.fz-fuss > span:last-child { margin-left: auto; flex-shrink: 0; }
.fz-fuss b { font-weight: 600; color: var(--z-18181b); }
.fz-trenn { color: var(--z-c4c4cc); }
@media (max-width: 639px) { .fz-leiste .fz-suche { margin: 0 0 8px 12px; } .fz-fuss > span:first-child:not(:last-child) { display: none; } }

/* Ablegen von Belegen */
[data-beleg-drop] { position: relative; }
[data-beleg-drop].fz-ablage::after { content: 'Loslassen zum Hochladen'; position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; border: 2px dashed var(--z-00558b); border-radius: 16px; background: color-mix(in srgb, var(--z-eff8ff) 90%, transparent); font-size: 13px; font-weight: 500; color: var(--z-00558b); pointer-events: none; }

/* Rechnungszeilen */
.fz-rz-kopf { display: none; align-items: center; gap: 12px; padding: 8px 20px; border-bottom: 1px solid var(--z-f4f4f5); font-size: 12px; color: var(--z-71717a); }
.fz-rz-k1 { min-width: 0; flex: 1; padding-left: 40px; }
.fz-rz { display: flex; align-items: center; gap: 12px; padding: 12px 20px; transition: background-color .15s; }
.fz-rz + .fz-rz { border-top: 1px solid var(--z-f4f4f5); }
.fz-rz:hover { background: var(--z-fafafa); }
.fz-rz-link { display: flex; min-width: 0; flex: 1; align-items: center; gap: 12px; }
.fz-rz-text { min-width: 0; flex: 1; }
.fz-rz-titel { display: flex; align-items: center; gap: 6px; overflow: hidden; font-size: 13px; font-weight: 500; color: var(--z-18181b); white-space: nowrap; text-overflow: ellipsis; }
.fz-rz-titel span { display: inline-flex; color: var(--z-a1a1aa); }
.fz-rz-unter { display: block; overflow: hidden; font-size: 12px; color: var(--z-71717a); white-space: nowrap; text-overflow: ellipsis; }
.fz-rz-nr, .fz-rz-faellig { display: none; width: 96px; flex-shrink: 0; overflow: hidden; font-size: 13px; color: var(--z-52525b); white-space: nowrap; text-overflow: ellipsis; }
.fz-rz-status { display: none; width: 112px; flex-shrink: 0; }
.fz-rz-cent { width: 96px; flex-shrink: 0; text-align: right; font-size: 13px; font-weight: 600; color: var(--z-18181b); }
.fz-rz-kopf .fz-rz-cent { font-size: 12px; font-weight: 400; color: var(--z-71717a); }
.fz-rz-knopf { width: 76px; flex-shrink: 0; display: flex; justify-content: flex-end; }
@media (min-width: 640px) { .fz-rz-kopf { display: flex; } .fz-rz-status { display: block; } }
@media (min-width: 768px) { .fz-rz-faellig { display: block; } .fz-nur-klein-md { display: none; } .fz-nur-klein-md + * , .fz-nur-klein-md ~ .fz-trenn { } }
@media (min-width: 1024px) { .fz-rz-nr { display: block; } .fz-nur-klein-lg { display: none; } }

/* Ausgaben */
.fz-leiste-ausgaben { justify-content: flex-start; padding: 8px 12px; }
.fz-leiste-summe { margin-left: auto; font-size: 12px; color: var(--z-71717a); }
.fz-leiste-summe b { font-weight: 600; color: var(--z-18181b); }
.fz-az-kopf { display: none; align-items: center; gap: 12px; padding: 8px 20px; border-bottom: 1px solid var(--z-f4f4f5); font-size: 12px; color: var(--z-71717a); }
.fz-az-k1 { min-width: 0; flex: 1; padding-left: 44px; }
.fz-az-monat { display: flex; justify-content: space-between; gap: 8px; padding: 8px 20px; background: var(--z-fafafa); border-bottom: 1px solid var(--z-f4f4f5); font-size: 12px; font-weight: 600; color: var(--z-52525b); }
.fz-az-liste li + li { border-top: 1px solid var(--z-f4f4f5); }
.fz-az-liste { border-bottom: 1px solid var(--z-f4f4f5); }
.fz-az { display: flex; align-items: center; gap: 12px; padding: 10px 20px; transition: background-color .15s; }
.fz-az:hover { background: var(--z-fafafa); }
.fz-az-kachel { display: grid; width: 32px; height: 32px; flex-shrink: 0; place-items: center; border-radius: 8px; background: var(--z-f4f4f5); color: var(--z-52525b); }
.fz-az-text { min-width: 0; flex: 1; }
.fz-az-titel { display: flex; align-items: center; gap: 6px; overflow: hidden; font-size: 13px; font-weight: 500; color: var(--z-18181b); white-space: nowrap; text-overflow: ellipsis; }
.fz-az-titel span { display: inline-flex; color: var(--z-a1a1aa); }
.fz-az-unter { display: flex; align-items: center; gap: 0; overflow: hidden; font-size: 12px; color: var(--z-71717a); white-space: nowrap; }
.fz-pille { display: inline-flex; align-items: center; gap: 4px; height: 18px; margin-left: 8px; padding: 0 6px; border-radius: 999px; background: var(--z-eff8ff); color: var(--z-175cd3); font-size: 11px; font-weight: 500; }
.fz-pille-grau { background: var(--z-f4f4f5); color: var(--z-71717a); }
.fz-az-datum, .fz-az-kat { display: none; width: 112px; flex-shrink: 0; font-size: 13px; color: var(--z-52525b); }
.fz-az-cent { width: 104px; flex-shrink: 0; text-align: right; font-size: 13px; font-weight: 600; color: var(--z-18181b); }
.fz-az-cent small { display: block; font-size: 11px; font-weight: 400; color: var(--z-a1a1aa); }
.fz-az-kopf .fz-az-cent { font-size: 12px; font-weight: 400; color: var(--z-71717a); }
.fz-az-leer { display: flex; flex-direction: column; align-items: center; padding: 40px 20px; text-align: center; }
.fz-az-leer-kachel { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; background: var(--z-f4f4f5); color: var(--z-71717a); }
.fz-az-leer h3 { margin-top: 12px; font-size: 14px; font-weight: 600; }
.fz-az-leer p { max-width: 40ch; margin-top: 4px; font-size: 13px; color: var(--z-71717a); }
.fz-az-leer-knoepfe { display: flex; gap: 8px; margin-top: 16px; }
@media (min-width: 640px) { .fz-az-kopf { display: flex; } }
@media (min-width: 768px) { .fz-az-datum { display: block; } }
@media (min-width: 1024px) { .fz-az-kat { display: block; } }
.fz-lf-summe { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--z-f0f0f2); font-size: 12px; color: var(--z-71717a); }
.fz-lf-summe b { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--z-18181b); }
.fz-lf-liste { margin-top: 6px !important; }
.fz-lf-liste a { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; }
.fz-lf-liste span { min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fz-lf-liste b { font-weight: 500; }
.fz-kat-liste { display: flex; flex-direction: column; gap: 12px; }
.fz-kat-zeile { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.fz-kat-zeile span { flex: 1; }
.fz-kat-zeile b { font-weight: 600; }
.fz-kat-spur { display: block; height: 6px; margin-top: 6px; overflow: hidden; border-radius: 999px; background: var(--z-f4f4f5); }
.fz-kat-spur i { display: block; height: 100%; border-radius: 999px; background: #ef6820; }

/* Pauschalen */
.fz-pa-satz { margin-bottom: 8px !important; font-size: 12px; color: var(--z-71717a); }
.fz-pa-liste { display: flex; flex-direction: column; gap: 2px; margin: 0 -8px !important; }
.fz-pa { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 8px; }
.fz-pa:hover { background: var(--z-fafafa); }
.fz-pa-aus { opacity: .6; }
.fz-pa-text { min-width: 0; flex: 1; }
.fz-pa-kunde, .fz-pa-info { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fz-pa-kunde { font-size: 13px; font-weight: 500; color: var(--z-18181b); }
.fz-pa-info { font-size: 12px; color: var(--z-71717a); }
.fz-pa-cent { font-size: 13px; font-weight: 600; }
.fz-pa-leer { font-size: 13px; color: var(--z-71717a); }

/* Anteile */
.fz-rechenweg { padding: 16px 20px; }
.fz-rw-titel { font-size: 12px; font-weight: 500; color: var(--z-71717a); }
.fz-rw-reihe { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-top: 8px; }
.fz-glied > span:first-child { display: block; font-size: 12px; color: var(--z-71717a); }
.fz-glied-normal .fz-euro { font-size: 20px; line-height: 1; font-weight: 500; letter-spacing: -0.03em; }
.fz-glied-stark .fz-euro { font-size: 26px; line-height: 1; font-weight: 600; letter-spacing: -0.03em; }
.fz-glied-zeichen { padding-bottom: 2px; font-size: 20px; line-height: 1; color: var(--z-c4c4cc); }
.fz-rw-warnung { margin-top: 12px !important; }
.fz-konten { display: grid; gap: 12px; }
@media (min-width: 640px) { .fz-konten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .fz-konten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fz-konto { padding: 16px; }
.fz-konto-ich { box-shadow: var(--z-karte-schatten), 0 0 0 2px color-mix(in srgb, var(--z-00558b) 20%, transparent); }
.fz-konto-kopf { display: flex; align-items: center; gap: 10px; }
.fz-konto-name { min-width: 0; flex: 1; }
.fz-konto-name b, .fz-konto-name small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fz-konto-name b { font-size: 13px; font-weight: 600; }
.fz-konto-name small { font-size: 12px; color: var(--z-71717a); }
.fz-konto-label { margin-top: 16px !important; font-size: 12px; font-weight: 500; color: var(--z-71717a); }
.fz-konto-betrag .fz-euro { font-size: 28px; line-height: 1.25; font-weight: 600; letter-spacing: -0.03em; }
.fz-konto-davon { font-size: 12px; color: var(--z-71717a); }
.fz-konto-spur { height: 6px; margin-top: 12px; overflow: hidden; border-radius: 999px; background: var(--z-f4f4f5); }
.fz-konto-spur div { height: 100%; border-radius: 999px; background: var(--z-00558b); }
.fz-konto-dl { display: flex; flex-direction: column; gap: 4px; margin: 12px 0 0; font-size: 12px; }
.fz-konto-dl div { display: flex; justify-content: space-between; gap: 8px; }
.fz-konto-dl dt { color: var(--z-71717a); }
.fz-konto-dl dd { margin: 0; font-weight: 500; color: var(--z-18181b); }
.fz-konto-dl .fz-leise dd { font-weight: 400; color: var(--z-71717a); }
.fz-tabelle-rahmen { overflow-x: auto; padding: 0 20px 12px; }
.fz-tabelle { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13px; }
.fz-tabelle th { padding: 8px 12px 8px 0; text-align: right; font-size: 12px; font-weight: 500; color: var(--z-71717a); white-space: nowrap; }
.fz-tabelle th:first-child, .fz-tabelle td:first-child { text-align: left; }
.fz-tabelle td { padding: 10px 12px 10px 0; border-top: 1px solid var(--z-f4f4f5); text-align: right; color: var(--z-3f3f46); white-space: nowrap; }
.fz-tabelle td:first-child { font-weight: 500; color: var(--z-18181b); }
.fz-tab-gewinn { font-weight: 600; color: var(--z-18181b) !important; }
.fz-tab-person { color: var(--z-18181b) !important; }
.fz-laeuft .fz-tab-person { color: var(--z-71717a) !important; }
.fz-th-kopf { display: inline-flex; align-items: center; gap: 6px; }
.fz-aus-liste li { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.fz-aus-liste li + li { border-top: 1px solid var(--z-f4f4f5); }
.fz-aus-text { min-width: 0; flex: 1; }
.fz-aus-text b { display: block; overflow: hidden; font-size: 13px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.fz-aus-text b span { font-weight: 400; color: var(--z-71717a); }
.fz-aus-text small { font-size: 12px; color: var(--z-71717a); }
.fz-aus-cent { font-size: 13px; font-weight: 600; }
.fz-aus-liste form { margin: 0; }
.fz-fussnote { max-width: 65ch; font-size: 12px; line-height: 1.6; color: var(--z-71717a); }

/* Einnahmen und Kontostand */
.fz-rechnung { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 13px; }
.fz-rechnung div { display: flex; justify-content: space-between; gap: 12px; }
.fz-rechnung dt { color: var(--z-71717a); }
.fz-rechnung dd { margin: 0; font-weight: 500; color: var(--z-18181b); }
.fz-rechnung .fz-rechnung-summe { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--z-f0f0f2); }
.fz-rechnung-summe dt { font-weight: 600; color: var(--z-18181b); }
.fz-rechnung-summe dd { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.fz-klein-text { margin-top: 12px !important; font-size: 12px; color: var(--z-71717a); }
.fz-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; }
.fz-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 500; color: var(--z-52525b); }
.fz-form label:nth-child(3) { grid-column: 1 / -1; }
.fz-form input { height: 36px; padding: 0 12px; border: 1px solid var(--z-e4e4e7); border-radius: 8px; background: var(--z-ffffff); font: 14px var(--sans); color: var(--z-18181b); outline: none; }
.fz-form input:focus { border-color: var(--z-00558b); box-shadow: 0 0 0 4px color-mix(in srgb, var(--z-00558b) 20%, transparent); }
.fz-form .fz-knopf { grid-column: 1 / -1; justify-self: start; }
.fz-staende { margin-top: 16px !important; border-top: 1px solid var(--z-f0f0f2); }
.fz-staende li { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 13px; }
.fz-staende li + li { border-top: 1px solid var(--z-f4f4f5); }
.fz-staende span { width: 120px; flex-shrink: 0; color: var(--z-52525b); }
.fz-staende small { min-width: 0; flex: 1; overflow: hidden; font-size: 12px; color: var(--z-71717a); white-space: nowrap; text-overflow: ellipsis; }
.fz-staende form { margin: 0; }
.fz-ein-liste li + li { border-top: 1px solid var(--z-f4f4f5); }
.fz-ein-liste { border-top: 1px solid var(--z-f0f0f2); }
.fz-ein-liste a { display: flex; align-items: center; gap: 12px; padding: 10px 20px; font-size: 13px; }
.fz-ein-liste a:hover { background: var(--z-fafafa); }
.fz-ein-tag { width: 48px; flex-shrink: 0; color: var(--z-a1a1aa); }
.fz-ein-text { min-width: 0; flex: 1; }
.fz-ein-text b, .fz-ein-text small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fz-ein-text b { font-weight: 500; }
.fz-ein-text small { font-size: 12px; color: var(--z-71717a); }
.fz-ein-cent { flex-shrink: 0; font-weight: 600; color: var(--z-067647); }
@media (prefers-contrast: more) { .fz-karte { box-shadow: 0 0 0 1px var(--z-c4c4cc); } }
@media (prefers-reduced-transparency: reduce) { .fz-karte { background-color: var(--z-ffffff); background-image: none; } }
.fz-rz-kritisch .fz-rz-faellig { color: var(--z-b42318); font-weight: 500; }
.fz-pop-menue { width: 240px; }
@media (max-width: 639px) { .fz-fokus-delta .fz-zahl { display: none; } }
.fz-rz-kopf > span, .fz-az-kopf > span { font-size: 12px !important; font-weight: 400 !important; color: var(--z-71717a) !important; }
.fz-lf-summe + .fz-fix-leer { border-top: 0; padding-top: 0; }

/* Anfragen: „Ist das erledigt?“ mit Ja (Link) oder Nein (Termin) */
.kopf-aktionen { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tab-zahl { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.anfragen-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.anfragen-zwischen { font-size: 13px; font-weight: 500; color: var(--muted); margin: 8px 0 -4px; }
.anfrage { position: relative; display: grid; gap: 8px; }
.anfrage.offen { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.anfrage.neu { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.anfrage > p, .anfrage-antwort-zeige > p { margin: 0; }
.anfrage-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; }
.anfrage-meta b { font-weight: 600; }
.anfrage-meta time, .anfrage-wartet { font-size: 12px; color: var(--muted); }
.anfrage-frage { font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.anfrage-aufgabe { font-size: 13px; }
.anfrage-neu { position: absolute; top: 14px; right: 16px; font-size: 11px; font-weight: 600; color: var(--accent-ink); background: var(--accent-soft); padding: 2px 8px; border-radius: 999px; }
.anfrage-antwort-zeige { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--r-m); background: var(--neutral-soft); }
.anfrage-antwort-zeige.ja { background: var(--ok-soft); }
.anfrage-antwort-zeige .pill { margin-right: 6px; background: var(--card); }
.anfrage-link a { overflow-wrap: anywhere; font-size: 13px; }
.anfrage-notiz { font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.anfrage-aktionen { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.anfrage-aktionen form { margin: 0; }
.anfrage-form, .anfrage-neu-form { display: grid; gap: 12px; margin-top: 4px; }
.anfrage-form label, .anfrage-neu-form > label { display: grid; gap: 4px; font-size: 13px; }
.anfrage-form .btn, .anfrage-neu-form .btn { justify-self: start; }
.ja-nein { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.jn-wahl { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card); font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.jn-wahl input { position: absolute; opacity: 0; pointer-events: none; }
.jn-wahl:hover { border-color: var(--muted); }
.jn-wahl:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.jn-ja:has(input:checked) { border-color: var(--ok-ink); background: var(--ok-soft); color: var(--ok-ink); }
.jn-nein:has(input:checked) { border-color: var(--warn-ink); background: var(--warn-soft); color: var(--warn-ink); }
.anfrage-form .nur-ja, .anfrage-form .nur-nein { display: none; gap: 10px; }
.anfrage-form:has(input[value="ja"]:checked) .nur-ja, .anfrage-form:has(input[value="nein"]:checked) .nur-nein { display: grid; }
.anfrage-form .check-zeile { display: flex; font-size: 13px; }
.anfrage-form input[type="date"], .anfrage-frist input { max-width: 220px; }
.anfrage-aendern summary { font-size: 13px; color: var(--muted); cursor: pointer; width: max-content; }
.anfrage-aendern[open] summary { margin-bottom: 4px; }
.anfrage-neu-karte { max-width: 680px; }
.personen-wahl { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.personen-wahl legend { font-size: 13px; margin-bottom: 6px; padding: 0; }
.person-chip { position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; cursor: pointer; background: var(--card); }
.person-chip input { position: absolute; opacity: 0; pointer-events: none; }
.person-chip:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); font-weight: 500; }
.person-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 640px) {
  .anfrage-neu { position: static; justify-self: start; }
  .anfrage-form input[type="date"], .anfrage-frist input { max-width: none; }
}
.anfrage-neu-form > p { margin: 0; }