/* Campaign CPQ -- Oberflaeche. Uebernommen aus crm-hikel-app/public/styles.css
   (gleiche Token, gleiche Bausteine), CPQ-Ergaenzungen am Ende der Datei.
   Farb- und Formtoken aus dem Optimizely Axiom Design System (Namen in den
   Kommentaren; vollstaendiger Satz: docs/axiom-tokens.json, abgerufen ueber
   den MCP-Server @optiaxiom/mcp). Die Akzentflaeche (Limettengruen) traegt
   immer dunklen Text. */

:root {
  --bg: #F9FCF8;              /* bg.page */
  --panel: #FFFFFF;           /* bg.default */
  --panel-2: #EFF5EB;         /* bg.secondary */
  --line: #D8E4CB;            /* border.default */
  --line-soft: #E4F0DA;       /* border.secondary */
  --text: #202320;            /* fg.default */
  --muted: #484E46;           /* fg.secondary */
  --muted-2: #616755;         /* fg.tertiary */
  --disabled: #A1AC8D;        /* fg.disabled */
  --accent: #226B1E;          /* fg.link.default */
  --accent-bg: #ABFF44;       /* bg.accent */
  --accent-fg: var(--text);
  --accent-bg-hover: #99F141; /* bg.accent.hovered */
  --accent-subtle: #EEFFD9;   /* bg.accent.subtle */
  --pill: #D8E4CB;            /* bg.pill.default */
  --success-text: #226B1E;
  --bg-success-subtle: #EEFFD9;
  --border-success: #5F9B85;
  --bg-warning-subtle: #FEF1C6;
  --border-warning: #F79008;
  --warn-text: #B54707;
  --bg-error-subtle: #FFDFE8;
  --danger: #8F4764;
  --danger-border: #A95A77;
  --bg-info-subtle: #E2F5F5;
  --info: #036988;
  --focus: #197A94;           /* border.focus */
  --border-control: #A1AC8D;  /* border.control: Rahmen von Eingaben, Auswahl, Kontrollkaestchen */
  --border-control-hover: #717863; /* border.control.hovered */
  --border-focus-error: #E284A0;   /* border.focus.error */
  --border-disabled: #5D813121;    /* border.disabled */
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --dauer-sm: 150ms; --dauer-md: 250ms; /* duration.sm / .md */
  --bg-neutral: #F5F6F7;
  --abstand: 16px;
  --abstand-innen: 12px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --font: "Die Grotesk B", "Roboto Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--font); font-size: 14px; line-height: 1.45; color: var(--text); background: var(--bg); }
a { color: var(--accent); }
h1, h2, h3, h4 { margin: 0 0 var(--abstand-innen); line-height: 1.25; }
h1 { font-size: 22px; } h2 { font-size: 18px; } h3 { font-size: 15px; } h4 { font-size: 14px; color: var(--muted); }
p { margin: 0 0 var(--abstand-innen); }
code, .mono { font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
[hidden] { display: none !important; }
.muted { color: var(--muted); } .muted-2 { color: var(--muted-2); } .small { font-size: 12.5px; }
.rechts { text-align: right; } .flex { display: flex; gap: 8px; align-items: center; } .flex-1 { flex: 1; } .wrap { flex-wrap: wrap; }
.space { justify-content: space-between; }
.mt { margin-top: var(--abstand); } .mb { margin-bottom: var(--abstand); }

/* --- Grundgeruest: Seitenleiste links, Inhalt rechts -------------------------
   Nach dem Axiom-Sidebar-Muster (Nav / NavHeader / NavBody / NavFooter mit
   SidebarToggle und NavAccountItem), Masse und Verhalten wie rcs-hikel-app. */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 232px; flex: none; display: flex; flex-direction: column;
  background: var(--panel); border-right: 1px solid var(--line);
  position: sticky; top: 0; height: 100vh; overflow: hidden; transition: width .14s ease;
}
.sidebar.collapsed { width: 64px; }
.sidebar.collapsed .nav-label, .sidebar.collapsed .nav-header-text,
.sidebar.collapsed .nav-group-trigger, .sidebar.collapsed .konto-text { display: none; }
.sidebar.collapsed .nav-item, .sidebar.collapsed .nav-account-item, .sidebar.collapsed .nav-header { justify-content: center; }

.logo { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; border-radius: var(--radius); background: var(--accent-bg); color: var(--accent-fg); font-weight: 800; font-size: 12px; letter-spacing: .5px; }
.nav-header { display: flex; align-items: center; gap: 10px; padding: 14px 12px; border-bottom: 1px solid var(--line); }
.nav-header-text { display: flex; flex-direction: column; min-width: 0; }
.nav-header-text strong { font-size: 14px; }
.nav-header-text small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nav-body { flex: 1; overflow-y: auto; padding: 10px 8px; }
.nav-group-trigger { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 8px 10px 4px; }
.nav-gruppe-knopf { display: flex; align-items: center; justify-content: space-between; width: 100%; border: none; background: transparent; font-family: inherit; cursor: pointer; border-radius: var(--radius-sm); text-align: left; }
.nav-gruppe-knopf:hover { color: var(--text); background: var(--panel-2); }
.nav-gruppe-knopf:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.nav-pfeil { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin: -3px 4px 0 0; transition: transform .15s; }
.nav-gruppe-knopf[aria-expanded="false"] .nav-pfeil { transform: rotate(-45deg); margin-top: 0; }
.nav-list.zu .nav-item:not(.active) { display: none; }
.sidebar.collapsed .nav-list.zu .nav-item { display: flex; }
.nav-list { display: flex; flex-direction: column; gap: 2px; }
/* Verwaltung: Untergruppen (Optimizely Campaign, Integrationen, ...) */
.nav-untergruppe { display: flex; flex-direction: column; gap: 2px; }
.nav-untergruppe + .nav-untergruppe { margin-top: 4px; }
.nav-untergruppe-knopf { font-size: 12px; font-weight: 600; color: var(--muted); padding: 6px 10px 2px 12px; text-transform: none; letter-spacing: 0; }
.nav-unterliste .nav-item { padding-left: 18px; }
.nav-list.zu .nav-untergruppe-knopf { display: none; }
.nav-list.zu .nav-untergruppe + .nav-untergruppe { margin-top: 0; }
.sidebar.collapsed .nav-untergruppe-knopf { display: none; }
.sidebar.collapsed .nav-unterliste .nav-item { padding-left: revert; }
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  border: none; border-radius: var(--radius); background: transparent; color: var(--text);
  font: inherit; font-size: 13px; text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.nav-item:hover { background: var(--panel-2); }
.nav-item.active { background: var(--accent-subtle); font-weight: 600; }
.nav-item:focus-visible, .nav-account-item:focus-visible, .konto-menu-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* Das Icon traegt die Markierung mit (gefuellt und in Akzentfarbe), damit der
   aktive Eintrag auch bei eingeklappter Leiste erkennbar bleibt. */
.nav-icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; color: var(--muted); }
.nav-item.active .nav-icon { color: var(--accent); }
.nav-item:hover .nav-icon { color: var(--text); }
.ax-icon { width: 20px; height: 20px; fill: currentColor; flex: none; }
.nav-separator { border: none; border-top: 1px solid var(--line); margin: 10px 4px; }

.nav-footer { border-top: 1px solid var(--line); padding: 8px; position: relative; display: flex; flex-direction: column; gap: 2px; }
.nav-account-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: none; border-radius: var(--radius); background: transparent; color: var(--text); cursor: pointer; font: inherit; text-align: left; }
.nav-account-item:hover { background: var(--panel-2); }
.konto-text { display: flex; flex-direction: column; min-width: 0; }
.konto-text strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.konto-text small { font-size: 11px; color: var(--muted); }
.nav-account-item .avatar { width: 30px; height: 30px; font-size: 12px; background: var(--accent-bg); color: var(--accent-fg); }
.konto-menu { position: absolute; bottom: 100%; left: 8px; right: 8px; min-width: 180px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); padding: 4px; z-index: 20; }
.konto-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.konto-menu-item:hover { background: var(--panel-2); }

/* Rechts der Seitenleiste: Kopfleiste und Inhalt */
.app-rahmen { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-main { flex: 1; min-width: 0; padding: 18px 22px 60px; }
.topbar { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 22px; background: rgb(249 252 248 / 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-soft); }
.topbar-pfad { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; color: var(--muted); overflow: hidden; white-space: nowrap; }
.topbar-pfad a { color: var(--muted); text-decoration: none; }
.topbar-pfad a:hover { color: var(--accent); text-decoration: underline; }
.topbar-pfad .topbar-aktuell { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.topbar-trenner { color: var(--muted-2); }
.topbar-aktionen { display: flex; align-items: center; gap: 10px; flex: none; }

/* Hilfe: Knopf "?" in der Kopfleiste, Panel rechts (hilfe/panel.js) */
.hilfe-knopf { width: 30px; height: 30px; border-radius: var(--radius-full); border: 1px solid var(--line); background: var(--panel); color: var(--muted); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; flex: none; }
.hilfe-knopf:hover, .hilfe-knopf[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }
.hilfe-panel { position: fixed; top: 0; right: 0; width: 400px; max-width: 92vw; height: 100vh; z-index: 40; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 12px; background: var(--panel); border-left: 1px solid var(--line); box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.12); }
.hilfe-panel[hidden] { display: none; }
body.hilfe-offen .app-rahmen { padding-right: 400px; }
@media (max-width: 1000px) { body.hilfe-offen .app-rahmen { padding-right: 0; } }
.hilfe-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hilfe-titel { margin: 0; font-size: 16px; }
.hilfe-zu { border-color: transparent; }
.hilfe-inhalt { flex: 1; overflow-y: auto; padding-right: 4px; }
.hilfe-seite + .hilfe-seite { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 16px; }
.hilfe-seite h3 { margin: 4px 0 6px; font-size: 16px; }
.hilfe-seite h4 { margin: 16px 0 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.hilfe-seite p, .hilfe-seite li { font-size: 13.5px; line-height: 1.55; }
.hilfe-seite ol, .hilfe-seite ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.hilfe-wozu { margin: 0 0 10px; }
.hilfe-achtung li::marker { color: var(--warn-text); }
.hilfe-bild { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); margin: 4px 0 6px; cursor: zoom-in; display: block; }
.hilfe-weiter { margin: 16px 0 0; color: var(--muted); font-size: 12.5px; }
.hilfe-link { border: 0; background: none; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; }
.hilfe-alle { margin-top: 22px; border-top: 1px solid var(--line-soft); padding-top: 12px; font-size: 13px; }
.hilfe-alle summary { cursor: pointer; color: var(--muted); }
.hilfe-alle ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.hilfe-tipp { margin: 0; font-size: 11.5px; color: var(--muted-2); }
.hilfe-lupe { position: fixed; inset: 0; z-index: 70; background: rgb(0 0 0 / 0.6); display: grid; place-items: center; padding: 24px; cursor: zoom-out; }
.hilfe-lupe img { max-width: 100%; max-height: 100%; border-radius: var(--radius); box-shadow: 0 20px 40px rgb(0 0 0 / 0.3); background: var(--panel); }
.kopf-ober { margin: 0 0 2px; font-size: 12px; color: var(--muted-2); }

@media (max-width: 760px) {
  .sidebar { width: 64px; }
  .sidebar .nav-label, .sidebar .nav-header-text, .sidebar .nav-group-trigger, .sidebar .konto-text { display: none; }
  .sidebar .nav-item, .sidebar .nav-account-item, .sidebar .nav-header { justify-content: center; }
  .sidebar .nav-list.zu .nav-item { display: flex; }
  .app-main { padding: 14px 14px 48px; }
  .topbar { padding: 8px 14px; }
}
.seite-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--abstand); margin-bottom: var(--abstand); flex-wrap: wrap; }
.seite-kopf h1 { margin: 0; }
.seite-kopf > .flex { flex-wrap: wrap; }

.karte { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; margin-bottom: var(--abstand); }
.karte h2, .karte h3 { margin-top: 0; }
/* Breite Tabellen scrollen in ihrer Karte, nicht die ganze Seite. */
.karte { min-width: 0; overflow-x: auto; }
.karten-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand); }
.karten-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--abstand); }
@media (max-width: 900px) { .karten-2, .karten-3 { grid-template-columns: 1fr; } }

/* Knoepfe */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 5px 12px; line-height: 20px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--panel-2); }
.btn:disabled { color: var(--disabled); cursor: not-allowed; background: var(--panel); border-color: var(--border-disabled); }
.btn-primary { background: var(--accent-bg); color: var(--accent-fg); border-color: transparent; }
.btn-primary:hover { background: var(--accent-bg-hover); }
.btn-danger { color: var(--danger); border-color: var(--danger-border); }
.btn-danger:hover { background: var(--bg-error-subtle); }
.btn-sm { min-height: 24px; padding: 2px 8px; font-size: 12.5px; line-height: 18px; }
.btn-link { border: 0; background: none; color: var(--accent); padding: 0; cursor: pointer; font: inherit; text-decoration: underline; }
.btn-icon { padding: 4px 8px; }

/* Formulare
   Masse nach Axiom: Field stapelt Label, Eingabe, Hilfe/Fehler senkrecht
   (Field: gap 4, hier 6 fuer Lesbarkeit), Eingaben in Groesse "lg" (40 px,
   size.lg), Zeilenabstand zwischen Feldern 20 px und Spaltenabstand 24 px
   (Spacing-Token 20/24). Frueher stand der Zeilenabstand im Raster auf 0 und
   die Feldcontainer hatten keinen Aussenabstand -- die Felder klebten aneinander. */
:root { --feld-zeile: 20px; --feld-spalte: 24px; --feld-innen: 6px; --eingabe-hoehe: 32px; } /* Axiom size md */
.feld { display: flex; flex-direction: column; gap: var(--feld-innen); min-width: 0; }
label.feld { margin-bottom: var(--feld-zeile); }
.feld > .titel, .feld-titel { display: block; font-weight: 500; line-height: 20px; }
.feld.check, label.check.feld { flex-direction: row; align-items: center; gap: 10px; }
.pflicht::after { content: " *"; color: var(--danger); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=datetime-local], input[type=url], input[type=tel], input[type=search], select, textarea {
  width: 100%; min-height: var(--eingabe-hoehe); padding: 5px 10px; line-height: 20px;
  border: 1px solid var(--border-control); border-radius: var(--radius); background: var(--panel); color: var(--text); font: inherit;
  transition: border-color var(--dauer-sm);
}
/* Axiom: Hover, Fokus, Fehler, Fehler im Fokus, deaktiviert, nur lesen */
:is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select, textarea):hover:not(:disabled):not([readonly]) { border-color: var(--border-control-hover); }
:is(input, select, textarea):focus { border-color: var(--focus); }
:is(input, select, textarea)[aria-invalid=true]:focus { outline-color: var(--border-focus-error); border-color: var(--danger-border); }
:is(input:not([type=checkbox]):not([type=radio]), select, textarea):disabled { border-color: var(--border-disabled); color: var(--disabled); background-color: var(--panel); cursor: not-allowed; }
:is(input, textarea)[readonly] { background: var(--bg-neutral); border-color: var(--line); }
textarea { min-height: 96px; resize: vertical; }
/* Auswahlfelder einheitlich: eigener Pfeil statt Betriebssystem-Optik, Text nie unter dem Pfeil */
select:not([multiple]):not([size]):not(.seg-token) { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; text-overflow: ellipsis; white-space: nowrap;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23616755' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
select:not(.seg-token):disabled { cursor: not-allowed; }
input[type=search] { -webkit-appearance: none; appearance: none; }
/* Kompakt in Werkzeugleisten: gleiche Hoehe wie Suchfeld und Knoepfe daneben */
.tbl-werkzeuge select, .tbl-werkzeuge input, .suchleiste select, .suchleiste input:not([type=checkbox]), .tbl-fuss select, .kompakt select, .kompakt input:not([type=checkbox]) {
  min-height: 0; height: 32px; padding-top: 0; padding-bottom: 0; font-size: 13.5px; }
.tbl-werkzeuge .btn, .suchleiste .btn, .kompakt .btn { height: 32px; }
input:focus, select:focus, textarea:focus, .btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
input[aria-invalid=true], select[aria-invalid=true], textarea[aria-invalid=true] { border-color: var(--danger-border); }
.hint { color: var(--muted-2); font-size: 12.5px; line-height: 17px; }
.fehler-text { color: var(--danger); font-size: 12.5px; line-height: 17px; }
.fehler-text:empty { display: none; } /* leere Fehlerzeile soll keinen Abstand erzeugen */
:not(.feld) > .hint, :not(.feld) > .fehler-text { margin-top: 4px; }
.eingabe-gruppe { display: flex; align-items: stretch; }
.eingabe-gruppe .addon { display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); border-radius: var(--radius); white-space: nowrap; }
.eingabe-gruppe .addon.vor { border-right: 0; border-radius: var(--radius) 0 0 var(--radius); }
.eingabe-gruppe .addon.nach { border-left: 0; border-radius: 0 var(--radius) var(--radius) 0; }
.eingabe-gruppe input.mit-vor { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.eingabe-gruppe input.mit-nach { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.optionen { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.optionen.nebeneinander { flex-direction: row; flex-wrap: wrap; gap: 8px 20px; }
.regel-unpassend { border-color: var(--danger-border) !important; background: var(--bg-error-subtle); }
.optionen label, label.check { display: flex; align-items: center; gap: 10px; font-weight: 400; cursor: pointer; min-height: 24px; }
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--accent); }
.raster { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--feld-zeile) var(--feld-spalte); }
.raster > .zelle { grid-column: span var(--span, 12); min-width: 0; }
/* Kontrollkaestchen ohne eigenes Label oben: auf die Hoehe der Eingaben daneben setzen. */
.raster > .zelle > .feld.check-zeile { padding-top: 30px; }
@media (max-width: 700px) { .raster > .zelle { grid-column: span 12; } }
.abschnitt { grid-column: span 12; margin-top: 8px; padding-top: var(--feld-zeile); border-top: 1px solid var(--line-soft); font-weight: 600; color: var(--muted); }
.formular-fuss { display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 28px; }
.raster + .formular-fuss { padding-top: 20px; border-top: 1px solid var(--line-soft); }

/* Tabellen */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th { font-weight: 600; color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em; }
tr.klick { cursor: pointer; } tr.klick:hover td { background: var(--panel-2); }
.tabelle-leer { color: var(--muted-2); padding: 20px; text-align: center; }

/* Badges, Chips */
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-full); font-size: 12px; font-weight: 500; border: 1px solid transparent; background: var(--bg-neutral); color: var(--muted); }
.badge-ok { background: var(--bg-success-subtle); color: var(--success-text); border-color: var(--border-success); }
.badge-warn { background: var(--bg-warning-subtle); color: var(--warn-text); border-color: var(--border-warning); }
.badge-error { background: var(--bg-error-subtle); color: var(--danger); border-color: var(--danger-border); }
.badge-info { background: var(--bg-info-subtle); color: var(--info); }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; background: var(--pill); border-radius: var(--radius-full); font-size: 12.5px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* Tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: var(--abstand); overflow-x: auto; }
.tabs > button { border: 0; background: none; padding: 10px 14px; font: inherit; font-weight: 500; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; flex-shrink: 0; }
.tabs > button:hover { color: var(--text); }
.tabs > button.aktiv { color: var(--accent); border-bottom-color: var(--accent); }
/* Tab-Leiste mit Ueberlauf (tableiste.js): eine Zeile, der Rest hinter "⋯" */
.tab-leiste { overflow: visible; flex-wrap: nowrap; }
.tab-leiste > button[hidden], .tab-mehr-box[hidden] { display: none; }
.tab-mehr-box { position: relative; flex: none; display: flex; align-items: center; }
.tab-mehr { border: 0; background: none; padding: 4px 12px; margin-bottom: 2px; font: inherit; font-size: 18px; line-height: 1.4; color: var(--muted); cursor: pointer; border-radius: var(--radius-sm); }
.tab-mehr:hover, .tab-mehr[aria-expanded=true] { background: var(--panel-2); color: var(--text); }
.tab-mehr-menue { position: absolute; right: 0; top: calc(100% + 4px); min-width: 200px; max-height: 60vh; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); padding: 4px; z-index: 30; }
/* Zeitstrahl: Typen, Quellen und Zeitraum in einer Zeile */
.zeitstrahl-filter { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; }
.zeitstrahl-filter select { flex: 1 1 160px; min-width: 0; width: auto; }
.zeitstrahl-filter input[type=date] { flex: 0 1 150px; min-width: 0; width: auto; }
.zeitstrahl-filter .zf-label { white-space: nowrap; color: var(--muted); font-size: 13px; }
@media (max-width: 720px) { .zeitstrahl-filter { flex-wrap: wrap; } .zeitstrahl-filter select { flex-basis: 45%; } }
/* Stammdaten-Tab: Status, Identitaeten, weitere Felder */
.stamm-info dl.kv { margin: 0; }

/* Kontaktkopf */
.kontakt-kopf { display: flex; gap: var(--abstand); align-items: flex-start; }
/* Kompakter Kontaktkopf: zwei Zeilen */
.kontakt-kopf-karte { padding: 14px 18px; }
.kontakt-kopf-karte .kontakt-kopf { gap: 14px; align-items: center; }
.kontakt-kopf-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.kontakt-kopf-zeile { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; }
.kontakt-name { font-size: 19px; margin: 0; line-height: 1.25; }
.kontakt-email { color: var(--muted); font-size: 13.5px; overflow-wrap: anywhere; }
.kontakt-kopf-zeile .chips { align-self: center; }
.kontakt-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; }
.kontakt-meta .verantwortlich { display: inline-flex; align-items: center; gap: 6px; }
.kontakt-meta select { width: auto; max-width: 220px; min-height: 0; height: 28px; padding-top: 0; padding-bottom: 0; padding-left: 8px; font-size: 13px; background-position: right 8px center; padding-right: 28px; }
.kontakt-meta .tag-editor { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.kontakt-meta .chip { padding: 2px 9px; font-size: 12px; }
.kopf-trenner { width: 1px; height: 16px; background: var(--line); }
.kontakt-aktionen { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-self: flex-start; }
@media (max-width: 900px) { .kontakt-kopf-karte .kontakt-kopf { flex-wrap: wrap; } .kontakt-aktionen { width: 100%; justify-content: flex-start; } }
.avatar { width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--accent-subtle); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; flex: none; }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 6px 12px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; word-break: break-word; }

/* Zeitstrahl */
.zeitstrahl { list-style: none; margin: 0; padding: 0; position: relative; }
.zeitstrahl::before { content: ""; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 2px; background: var(--line-soft); }
.zeitstrahl li { position: relative; padding: 0 0 14px 44px; }
.zeitstrahl .punkt { position: absolute; left: 6px; top: 2px; width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--panel); border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 10px; }
.zeitstrahl .punkt.campaign { border-color: var(--border-success); background: var(--bg-success-subtle); }
.zeitstrahl .punkt.api { border-color: var(--info); background: var(--bg-info-subtle); }
.zeitstrahl .punkt.manuell { border-color: var(--border-warning); background: var(--bg-warning-subtle); }
.zeitstrahl .punkt.bounce, .zeitstrahl .punkt.unsubscribe, .zeitstrahl .punkt.spamcomplaint, .zeitstrahl .punkt.blocklist { border-color: var(--danger-border); background: var(--bg-error-subtle); }
.zeitstrahl .zeit { color: var(--muted-2); font-size: 12px; }
.zeitstrahl details { margin-top: 4px; } .zeitstrahl summary { cursor: pointer; color: var(--muted); font-size: 12.5px; }
.zeitstrahl pre { background: var(--bg-neutral); padding: 8px; border-radius: var(--radius-sm); font-size: 11.5px; overflow: auto; max-height: 240px; }

/* Drawer / Modal */
.overlay { position: fixed; inset: 0; background: rgb(57 62 50 / .32); z-index: 40; display: flex; justify-content: flex-end; }
.drawer { width: min(640px, 100%); height: 100%; background: var(--panel); box-shadow: var(--shadow-md); overflow-y: auto; padding: 24px 28px; }
.modal { margin: auto; width: min(560px, calc(100% - 32px)); background: var(--panel); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-md); max-height: 90vh; overflow: auto; }
.drawer-kopf, .modal-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }

/* Toast */
/* Toast nach Axiom (ToastProvider): oben rechts, Intent mit Symbol, x zum Schliessen */
#toasts { position: fixed; top: 60px; right: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast { --toast-farbe: var(--muted-2); --toast-symbol-bg: var(--bg-neutral); --toast-symbol-fg: var(--muted);
  pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 10px 12px 12px; background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-left: 4px solid var(--toast-farbe); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  font-size: 14px; line-height: 20px; animation: toast-rein var(--dauer-md) ease-out; }
.toast.weg { opacity: 0; transform: translateX(8px); transition: opacity var(--dauer-sm), transform var(--dauer-sm); }
.toast-success { --toast-farbe: var(--border-success); --toast-symbol-bg: var(--accent-bg); --toast-symbol-fg: var(--success-text); }
.toast-danger { --toast-farbe: var(--danger-border); --toast-symbol-bg: var(--bg-error-subtle); --toast-symbol-fg: var(--danger); }
.toast-warning { --toast-farbe: var(--border-warning); --toast-symbol-bg: var(--bg-warning-subtle); --toast-symbol-fg: var(--warn-text); }
.toast-information { --toast-farbe: var(--focus); --toast-symbol-bg: var(--bg-info-subtle); --toast-symbol-fg: var(--info); }
.toast-symbol { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--toast-symbol-bg); color: var(--toast-symbol-fg); font-size: 12px; font-weight: 700; }
.toast-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast-aktion { flex: none; border: 0; background: none; padding: 0 4px; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; }
.toast-zu { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
.toast-zu:hover { background: var(--panel-2); color: var(--text); }
.toast-zu:focus-visible, .toast-aktion:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
@keyframes toast-rein { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } .toast.weg { transition: none; } }

/* --- Form Designer --------------------------------------------------------------
   Wie der Element-Editor von lettershop.studio: Palette | Formular | Bearbeitung.
   Die dritte Spalte ist zu (0), solange kein Feld gewaehlt ist, und faehrt mit
   der Auswahl aus. Palette und Bearbeitung bleiben beim Rollen stehen (sticky)
   und rollen fuer sich; in der Bearbeitung rollt nur der Inhalt zwischen den
   beiden Aktionsleisten. */
.designer { display: grid; grid-template-columns: 232px minmax(0, 1fr) 0; gap: 0; align-items: start; transition: grid-template-columns .2s ease;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.designer.hat-auswahl { grid-template-columns: 232px minmax(0, 1fr) 380px; }
.designer-palette { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
  padding: 12px 8px; border-right: 1px solid var(--line-soft); align-self: stretch; }
.designer-flaeche { min-width: 0; padding: 20px 24px; }
.designer-panel { position: sticky; top: 0; max-height: 100vh; overflow: hidden; min-width: 0; display: flex; flex-direction: column; align-self: start;
  border-left: 1px solid var(--line-soft); background: var(--panel); }
.designer:not(.hat-auswahl) .designer-panel { border-left: 0; }

.palette-kopf { display: flex; flex-direction: column; gap: 2px; padding: 4px 10px 8px; }
.palette-gruppe { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 10px 4px; border: 0; background: none;
  color: var(--muted-2); font: inherit; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; text-align: left; cursor: pointer; }
.palette-gruppe:hover { color: var(--muted); }
.palette-pfeil { font-size: 10px; transition: transform .15s ease; }
.palette-gruppe[aria-expanded="false"] .palette-pfeil { transform: rotate(-90deg); }
.palette-liste { display: flex; flex-direction: column; gap: 2px; }
.palette-liste[hidden] { display: none; }
/* Palettenpunkt wie Axioms NavItem; die Kachel traegt das Symbol. */
.palette-punkt { display: flex; width: 100%; align-items: center; gap: 10px; padding: 6px 10px; border: 0; border-radius: var(--radius); background: transparent;
  color: var(--muted); font: inherit; font-size: 13.5px; text-align: left; cursor: grab; }
.palette-punkt:hover { background: var(--panel-2); color: var(--text); }
.palette-punkt:active { background: var(--line-soft); }
.palette-punkt:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.palette-kachel { display: grid; width: 26px; height: 26px; flex: none; place-items: center; border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  background: var(--panel-2); color: var(--muted); }
.palette-kachel .ax-icon { width: 16px; height: 16px; }
.palette-punkt:hover .palette-kachel { border-color: var(--accent); background: var(--accent-subtle); color: var(--accent); }
.palette-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.panel-kopf { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); flex: none; }
.panel-kopf strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-kopf .btn-icon { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-color: transparent; }
.panel-kopf .btn-icon .ax-icon { width: 18px; height: 18px; }
.panel-aktionen { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 10px 16px; background: var(--bg); flex: none; }
.panel-aktionen.oben { border-bottom: 1px solid var(--line-soft); }
.panel-aktionen.unten { border-top: 1px solid var(--line-soft); }
.panel-inhalt { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
.panel-inhalt label.feld { margin-bottom: 16px; }
.panel-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.canvas { min-height: 300px; }
.canvas .raster { gap: 12px var(--feld-spalte); }
.ablage-ende { margin-top: 12px; padding: 14px; border: 1px dashed transparent; border-radius: var(--radius); color: transparent; text-align: center; font-size: 12.5px; }
.designer.palette-zieht .ablage-ende { border-color: var(--line); color: var(--muted-2); }
.ablage-ende.ueber { border-color: var(--focus) !important; background: var(--accent-subtle); color: var(--text) !important; }
.feld-karte { border: 1px dashed var(--line); border-radius: var(--radius); padding: 10px 12px; background: var(--panel); cursor: grab; position: relative; overflow: hidden; }
.feld-karte:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.feld-karte select, .feld-karte input, .feld-karte textarea { max-width: 100%; }
.feld-karte.aktiv { border: 2px solid var(--accent); background: var(--accent-subtle); }
.feld-karte.ueber { border-color: var(--focus); background: var(--accent-subtle); }
.feld-karte-aktionen { position: absolute; right: 8px; top: 6px; display: flex; align-items: center; gap: 6px; }
.feld-karte-aktionen .btn { padding: 2px 8px; font-size: 12px; background: var(--panel); opacity: 0; transition: opacity .12s; }
.feld-karte:hover .feld-karte-aktionen .btn, .feld-karte.aktiv .feld-karte-aktionen .btn, .feld-karte-aktionen .btn:focus-visible { opacity: 1; }
@media (hover: none) { .feld-karte-aktionen .btn { opacity: 1; } }
.feld-karte .griff { color: var(--disabled); font-size: 14px; }
.feld-karte .typ { display: flex; align-items: center; gap: 6px; color: var(--muted-2); font-size: 11.5px; padding-right: 20px; margin-bottom: 4px; }
.feld-karte .typ-icon .ax-icon { width: 14px; height: 14px; }
.feld-karte input, .feld-karte select, .feld-karte textarea { pointer-events: none; background: var(--bg-neutral); }
.feld-karte .raster { display: block; }
.gefahr-link { color: var(--danger); margin-left: 8px; }

/* Schmale Fenster: Palette als waagerechtes Band (nur Symbole), Bearbeitung unter dem Formular. */
@media (max-width: 900px) {
  .designer, .designer.hat-auswahl { grid-template-columns: minmax(0, 1fr); }
  .designer-palette { position: static; max-height: none; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .palette-kopf, .palette-gruppe { display: none; }
  .palette-block { display: contents; }
  .palette-liste, .palette-liste[hidden] { display: flex !important; flex-direction: row; }
  .palette-text { display: none; }
  .palette-punkt { padding: 6px; width: auto; }
  .designer-panel { position: static; max-height: none; border-left: 0; border-top: 1px solid var(--line-soft); }
  .designer:not(.hat-auswahl) .designer-panel { display: none; }
}
.regel { border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 8px; margin-bottom: 8px; background: var(--bg); }
.geloescht { opacity: .55; }
.leer-hinweis { color: var(--muted-2); text-align: center; padding: 30px; border: 1px dashed var(--line); border-radius: var(--radius); }

/* Anmeldung */
.auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.auth-karte { width: min(420px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); }
.auth-marke { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; }
.auth-marke h1 { margin: 0; font-size: 20px; } .auth-marke .sub { margin: 0; color: var(--muted-2); font-size: 12.5px; }
.auth-fehler { color: var(--danger); min-height: 1.2em; margin-bottom: 8px; }
.auth-knopf { width: 100%; justify-content: center; }

.kpi { display: flex; gap: var(--abstand); flex-wrap: wrap; }
.kpi .karte { flex: 1; min-width: 160px; margin: 0; }
.kpi .zahl { font-size: 26px; font-weight: 700; }
.kpi .label { color: var(--muted); font-size: 12.5px; }
pre.code { background: var(--bg-neutral); padding: 10px; border-radius: var(--radius); overflow: auto; font-size: 12px; }
.suchleiste { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.suchleiste input[type=search] { max-width: 360px; }
.suchleiste select { width: auto; }
.warnbox { background: var(--bg-warning-subtle); border: 1px solid var(--border-warning); border-radius: var(--radius); padding: 10px 12px; color: var(--warn-text); }
.infobox { background: var(--bg-info-subtle); border-radius: var(--radius); padding: 10px 12px; color: var(--info); }

/* --- Tabs und Formulargruppen (Verwaltung) ---------------------------------- */
.hinweis-api p { margin-bottom: 6px; }
.hinweis-api code { background: var(--panel-2); padding: 2px 6px; border-radius: var(--radius-sm); }
.tab-karte .griff, .gruppe-zeile .griff { color: var(--disabled); cursor: grab; user-select: none; font-size: 14px; }
.tab-karte.zieht, .gruppe-zeile.zieht { opacity: .5; }
.tab-karte.ueber { border-color: var(--focus); }
.gruppen-liste { display: flex; flex-direction: column; gap: 6px; margin-top: var(--abstand-innen); }
.gruppe-zeile {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--bg);
  color: var(--text); text-decoration: none;
}
.gruppe-zeile:hover { background: var(--panel-2); }
.gruppe-zeile.ueber { border-color: var(--focus); background: var(--accent-subtle); }
.gruppe-zeile code { white-space: nowrap; }

/* --- Detailseiten: Stammdaten oben, darunter Tabs --------------------------- */
.stammdaten h2 { font-size: 16px; }
.stammdaten-raster { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--abstand); }
.stammdaten .kv { grid-template-columns: 140px 1fr; }
.stammdaten summary { cursor: pointer; color: var(--muted); }
.stammdaten details .kv { margin-top: 8px; }
@media (max-width: 900px) { .stammdaten-raster { grid-template-columns: 1fr; } }
.gruppe-karte { padding: 24px; }
.gruppe-karte h3 { font-size: 15px; }
.vorlage-gruppen { margin: 8px 0 0; padding-left: 18px; }
.vorlage-gruppen li { margin-bottom: 4px; }

/* --- Pipeline (Kanban der Verkaufschancen) ---------------------------------- */
.pipeline-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.pipeline-spalte { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 10px; min-height: 160px; }
.pipeline-spalte header { margin-bottom: 10px; }
.pipeline-spalte.ueber { border-color: var(--focus); background: var(--accent-subtle); }
.pipeline-spalte.phase-gewonnen header strong { color: var(--success-text); }
.pipeline-spalte.phase-verloren { opacity: .85; }
.pipeline-karten { display: flex; flex-direction: column; gap: 8px; }
.pipeline-karte { display: flex; flex-direction: column; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; cursor: pointer; box-shadow: var(--shadow-sm); }
.pipeline-karte:hover { border-color: var(--border-success); }
.pipeline-karte:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.pipeline-karte[draggable="true"] { cursor: grab; }
.pipeline-karte.zieht { opacity: .5; }
.pipeline-karte a { color: var(--muted); text-decoration: none; }
.pipeline-karte a:hover { text-decoration: underline; }
.pipeline-leer { color: var(--muted-2); font-size: 12.5px; text-align: center; padding: 16px 0; border: 1px dashed var(--line); border-radius: var(--radius); }

/* --- Dashboard ---------------------------------------------------------------- */
.dashboard-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--abstand); align-items: start; }
@media (max-width: 1000px) { .dashboard-raster { grid-template-columns: 1fr; } }
.dashboard-raster h2 { font-size: 17px; }
.dashboard-gruppe { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 14px 0 6px; }
.dashboard-gruppe.ueberfaellig { color: var(--danger); }
.umschalter { display: inline-flex; gap: 2px; background: var(--panel-2); border-radius: var(--radius); padding: 2px; }
.umschalter .btn { border-color: transparent; background: transparent; }
.umschalter .btn.aktiv { background: var(--panel); border-color: var(--line); box-shadow: var(--shadow-sm); }
.aufgaben-liste, .termin-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.aufgabe, .termin { display: flex; align-items: flex-start; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line-soft); }
.aufgabe:last-child, .termin:last-child { border-bottom: 0; }
.aufgabe input[type=checkbox] { margin-top: 3px; }
.aufgabe-titel { text-decoration: none; color: var(--text); font-weight: 500; text-align: left; }
.aufgabe-titel:hover { text-decoration: underline; }
.aufgabe a, .termin a { color: inherit; }
.termin a { font-weight: 500; text-decoration: none; }
.termin a:hover { text-decoration: underline; }
.termin-art { flex: none; width: 118px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-full); background: var(--bg-neutral); color: var(--muted); text-align: center; }
.termin.termin .termin-art { background: var(--bg-info-subtle); color: var(--info); }
.termin.veranstaltung .termin-art { background: var(--accent-subtle); color: var(--success-text); }
.termin.abschluss .termin-art { background: var(--bg-warning-subtle); color: var(--warn-text); }
.termin.vertrag .termin-art { background: var(--bg-error-subtle); color: var(--danger); }
a.kpi-link { color: inherit; text-decoration: none; }
a.kpi-link:hover { border-color: var(--border-success); }
select.schmal { width: auto; }
.quelle { display: flex; flex-direction: column; gap: 12px; margin: 6px 0 16px; }
.quelle-bereich { padding: 12px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--bg); }
.quelle-bereich label.feld { margin-bottom: 10px; }
.quelle-vorschau .chips { margin-top: 6px; }

/* --- Eigene Dashboards ------------------------------------------------------------
   Ein Diagramm hat eine Serie in --serie-1 (validiert: #2a78d6 auf hellem Grund).
   Text bleibt in Texttoken, nie in der Serienfarbe. */
:root { --serie-1: #2a78d6; --serie-1-flaeche: #e8f1fb; }
.dash-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--abstand); align-items: stretch; }
.dash-raster > * { grid-column: span var(--breite, 6); margin: 0; min-width: 0; }
@media (max-width: 1100px) { .dash-raster > * { grid-column: span max(6, var(--breite, 6)); } }
@media (max-width: 700px) { .dash-raster > * { grid-column: span 12; } }
.dash-widget { display: flex; flex-direction: column; gap: 12px; overflow: visible; }
.dash-kopf { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; }
.dash-kopf > .flex-1 { flex: 1 1 150px; min-width: 0; }
.dash-kopf h3 { margin: 0; font-size: 14.5px; }
.dash-aktionen { display: flex; gap: 4px; }
.dash-aktionen .btn-icon { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; }
.dash-aktionen .ax-icon { width: 16px; height: 16px; }
.dash-inhalt { position: relative; flex: 1; min-height: 60px; }
.dash-laden, .dash-leer { color: var(--muted-2); font-size: 13px; padding: 12px 0; }
.dash-neu { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 140px; border-style: dashed; color: var(--muted); cursor: pointer; font: inherit; }
.dash-neu:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }
.dash-neu .ax-icon { width: 24px; height: 24px; }
.dash-vorschau { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.dash-vorschau .dash-widget { box-shadow: none; }
/* Dashboard-Bereich: Tabs (Uebersicht + eigene Dashboards) */
.dash-tabzeile { display: flex; align-items: center; gap: 12px; margin-bottom: var(--abstand); }
.dash-tabzeile .tab-leiste { flex: 1; min-width: 0; margin-bottom: 0; }
.dash-neu-knopf { flex: none; }
/* Widget-Editor als Satz (Bausteine aus satz.js) */
.dash-editor-label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 18px 0 8px; }
.dash-satz { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-neutral); }
.dash-editor-zeile { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.dash-pikto { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Umschalter (Segmente) */
.seg-umschalter { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-neutral); }
.seg-umschalter-knopf { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.seg-umschalter-knopf:hover:not(:disabled) { color: var(--text); background: var(--panel); }
.seg-umschalter-knopf.aktiv { background: var(--panel); color: var(--text); box-shadow: var(--shadow-sm); }
.seg-umschalter-knopf.aktiv .dash-pikto { stroke: var(--accent); }
.seg-umschalter-knopf:disabled { color: var(--disabled); cursor: not-allowed; }
.seg-umschalter-knopf:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.dash-abschnitt { font-size: 15px; margin: 8px 0 12px; }

.dia-kennzahl { display: flex; align-items: flex-end; min-height: 56px; }
.dia-hero { font-size: 34px; line-height: 40px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.dia-balken { position: relative; display: flex; flex-direction: column; gap: 6px; }
.dia-balken-zeile { display: grid; grid-template-columns: minmax(80px, 34%) 1fr auto; align-items: center; gap: 10px; min-height: 28px; border-radius: var(--radius-sm); }
.dia-balken-zeile:hover, .dia-balken-zeile:focus-visible { background: var(--bg); outline: none; }
.dia-balken-label { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dia-balken-spur { height: 20px; display: flex; align-items: center; }
.dia-balken-mark { height: 20px; min-width: 2px; background: var(--serie-1); border-radius: 0 4px 4px 0; }
.dia-balken-mark.sonstige { background: repeating-linear-gradient(45deg, var(--serie-1) 0 3px, var(--serie-1-flaeche) 3px 6px); }
.dia-balken-wert { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text); }
.dia-linie { position: relative; }
.dia-linie svg { display: block; width: 100%; height: auto; overflow: visible; }
.dia-gitter { stroke: var(--line-soft); stroke-width: 1; }
.dia-achse { fill: var(--muted-2); font-size: 11px; font-family: var(--font); }
.dia-linie-pfad { fill: none; stroke: var(--serie-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dia-punkt { fill: var(--serie-1); stroke: var(--panel); stroke-width: 2; }
.dia-punkt.aktiv { r: 5; }
.dia-kreuz { stroke: var(--muted-2); stroke-width: 1; stroke-dasharray: 3 3; }
.dia-tooltip { position: absolute; z-index: 5; pointer-events: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 6px 10px; font-size: 12.5px; white-space: nowrap; }
.dia-tooltip div { display: flex; gap: 10px; justify-content: space-between; }
.dia-tabelle td, .dia-tabelle th { padding: 6px 8px; }
.dia-tabelle tfoot td { font-weight: 600; border-top: 1px solid var(--line); }

/* --- Marktplatz ------------------------------------------------------------------ */
.markt-kategorie { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted-2); margin: 18px 0 8px; }
.markt-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--abstand); }
.markt-karte { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.markt-karte p { flex: 1; margin: 0; color: var(--muted); }
.markt-logo { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--radius); background: var(--accent-subtle); color: var(--accent); font-weight: 700; font-size: 14px; }
.markt-eingerichtet { display: flex; flex-direction: column; gap: 10px; }
.markt-konnektor { display: flex; align-items: center; gap: 14px; margin: 0; flex-wrap: wrap; }
.markt-logo-lila { background: #F1E8FB; color: #6A3FA0; }
.markt-logo-gruen { background: var(--accent-subtle); color: var(--accent); }
.markt-logo-blau { background: var(--bg-info-subtle); color: var(--info); }
.markt-logo-orange { background: var(--bg-warning-subtle); color: var(--warn-text); }
.markt-logo-tuerkis { background: #DDF4EE; color: #0F6B57; }
.markt-logo-gelb { background: #FFF6CC; color: #7A5B00; }
.markt-logo-rot { background: #FFE3E8; color: #A3263D; }
.markt-karte-link { color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.markt-karte-link:hover { border-color: var(--accent); box-shadow: var(--shadow-md); text-decoration: none; }
.markt-karte-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.markt-weiter { color: var(--accent); font-weight: 500; font-size: 14px; }
.markt-suche { max-width: 280px; width: 100%; }
.markt-kopf { align-items: center; }
.markt-kopf .markt-logo { width: 48px; height: 48px; font-size: 16px; }
.markt-info { margin-bottom: var(--abstand); }
.markt-schritte { margin: 10px 0 0; padding-left: 20px; color: var(--muted); }
.markt-schritte li { margin: 2px 0; }
.leer-zustand { text-align: center; padding: 28px 16px; }
.markt-aktionen { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

/* Externe Datenquellen: Abfrage-Editor (seiten-datenquelle.js) */
.dq-schritt { margin-bottom: var(--abstand); }
.dq-schritt > h2 { display: flex; align-items: center; gap: 10px; font-size: 16px; margin: 0 0 16px; }
.dq-nr { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--accent-subtle); color: var(--accent); font-size: 13px; font-weight: 700; flex: none; }
.dq-schritt > .feld + .feld, .dq-schritt > .dq-zwei + .feld { margin-top: var(--feld-zeile); }
.dq-zwei { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--feld-zeile) var(--feld-spalte); }
.dq-modi { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.dq-modus { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; background: var(--panel); }
.dq-modus > span { display: flex; flex-direction: column; gap: 4px; }
.dq-modus input { margin-top: 3px; }
.dq-modus.aktiv { border: 2px solid var(--accent); background: var(--accent-subtle); padding: 13px 15px; }
.dq-optionen { display: flex; flex-direction: column; gap: 10px; }
.dq-vorschau { overflow-x: auto; max-height: 360px; overflow-y: auto; border: 1px solid var(--line-soft); border-radius: var(--radius); }
.dq-vorschau table { margin: 0; font-size: 12.5px; white-space: nowrap; }
.dq-vorschau th { position: sticky; top: 0; background: var(--panel); }
.dq-mapping td:first-child { width: 28%; } .dq-mapping td:nth-child(2) { width: 32%; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dq-mapping select, .dq-mapping input { width: 100%; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* Dateien und Dokumente (dateien-ui.js) */
.datei-zone { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px; border: 1px dashed var(--border-control); border-radius: var(--radius); background: var(--bg-neutral); cursor: pointer; text-align: center; transition: border-color .12s, background .12s; }
.datei-zone .ax-icon { width: 28px; height: 28px; color: var(--muted); }
.datei-zone:hover, .datei-zone.ueber { border-color: var(--border-control-hover); background: var(--accent-subtle); }
.datei-zone:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.datei-name { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 500; cursor: pointer; text-align: left; }
.datei-name:hover span { text-decoration: underline; }
.datei-name .ax-icon { width: 18px; height: 18px; flex: none; color: var(--muted); }
.datei-vorschau { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: var(--radius); border: 1px solid var(--line-soft); }
.datei-pdf { width: 100%; height: 72vh; border: 1px solid var(--line-soft); border-radius: var(--radius); }
.datei-feld { display: flex; flex-direction: column; gap: 8px; }
.datei-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.datei-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 4px 3px 8px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--panel); font-size: 13px; }
.datei-chip a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.datei-chip img { width: 22px; height: 22px; object-fit: cover; border-radius: 4px; }
.datei-chip .ax-icon { width: 16px; height: 16px; color: var(--muted); }
.datei-chip .btn-icon { padding: 2px; border: 0; background: none; cursor: pointer; line-height: 0; }
.avatar.mit-bild { background: var(--bg-neutral); overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-wahl { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.avatar-knopf { padding: 0; border: 0; background: none; border-radius: var(--radius-full); cursor: pointer; }
.avatar-knopf:hover .avatar, .avatar-knopf:focus-visible .avatar { box-shadow: 0 0 0 2px var(--accent); }
.speicher-balken { height: 8px; border-radius: var(--radius-full); background: var(--bg-neutral); overflow: hidden; margin: 6px 0 10px; }
.speicher-balken > div { height: 100%; background: var(--accent); border-radius: var(--radius-full); }

/* Zustaendigkeit und Benachrichtigungen (zustaendigkeit.js) */
#glocke { position: relative; }
.glocke-zahl { position: absolute; left: 22px; top: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full); background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.sidebar.collapsed .glocke-zahl { left: 24px; }
.benachrichtigungen { display: flex; flex-direction: column; gap: 8px; }
.benachrichtigung { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--panel); }
.benachrichtigung.ungelesen { border-color: var(--accent); background: var(--accent-subtle); }
.benachrichtigung-titel { font-weight: 600; }
.benachrichtigung .btn-link { align-self: flex-start; }
.verantwortlich { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.verantwortlich select { width: auto; min-width: 200px; }

/* Segmente (seiten-segmente.js) */
.seg-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--abstand); align-items: start; }
@media (max-width: 1100px) { .seg-layout { grid-template-columns: minmax(0, 1fr); } }
.seg-layout > * { min-width: 0; }
.seg-satz select.seg-token { max-width: 100%; }
.seg-vorschau-karte { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.seg-vorschau-karte.seg-rechnet .seg-anzahl, .seg-vorschau-karte.seg-rechnet table { opacity: .45; transition: opacity .15s; }
.seg-anzahl { font-size: 32px; font-weight: 700; line-height: 1.2; margin: 2px 0 12px; }
.seg-vorschau { font-size: 13px; }
/* --- Segment-Bedingungen: Saetze aus kompakten Bausteinen (public/segment-bedingungen.js) --- */
.seg-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.seg-kopf h2 { margin: 0; }
.seg-gruppen { display: flex; flex-direction: column; }
.seg-gruppe { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); padding: 6px; }
.seg-bedingung { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px 40px 10px 12px; border-radius: var(--radius); transition: background .12s; }
.seg-bedingung:hover, .seg-bedingung:focus-within { background: var(--bg-neutral); }
.seg-satz { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 6px; }
.seg-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-left: 2px; }
.seg-wort { color: var(--muted); font-size: 13.5px; white-space: nowrap; }

/* Token: Auswahl, die wie ein Wort im Satz sitzt */
select.seg-token { appearance: none; -webkit-appearance: none; width: auto; min-height: 0; height: 32px; padding: 0 26px 0 10px; line-height: 30px;
  border: 1px solid var(--line); border-radius: var(--radius); background-color: var(--panel); font-size: 13.5px; font-weight: 500; color: var(--text); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23616755' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
select.seg-token:hover:not(:disabled) { border-color: var(--muted-2); }
select.seg-token-art { background-color: var(--accent-subtle); border-color: transparent; font-weight: 600; }
select.seg-token-art:hover:not(:disabled) { border-color: var(--border-success); }
select.seg-token:disabled { cursor: default; background-image: none; padding-right: 10px; opacity: 1; color: var(--text); }
input.seg-zahl, input.seg-text { min-height: 0; height: 32px; padding: 0 8px; font-size: 13.5px; border-radius: var(--radius); }
input.seg-zahl { width: 64px; text-align: right; -moz-appearance: textfield; }
input.seg-text[type=date] { padding: 0 6px; }

/* Chips fuer Zusatzfilter */
.seg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); max-width: 100%; flex-wrap: wrap; }
.seg-chip select.seg-token, .seg-chip input.seg-zahl, .seg-chip input.seg-text { height: 28px; line-height: 26px; }
.seg-chip-titel { font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.seg-chip-weg, .seg-weg { border: 0; background: none; color: var(--muted-2); cursor: pointer; font: inherit; font-size: 16px; line-height: 1; border-radius: var(--radius-sm); }
.seg-chip-weg { padding: 4px 6px; }
.seg-chip-weg:hover, .seg-weg:hover { color: var(--danger); background: var(--bg-error-subtle); }
.seg-weg { position: absolute; top: 12px; right: 8px; width: 28px; height: 28px; font-size: 18px; opacity: 0; transition: opacity .12s; }
.seg-bedingung:hover .seg-weg, .seg-bedingung:focus-within .seg-weg, .seg-weg:focus-visible { opacity: 1; }
@media (hover: none) { .seg-weg { opacity: 1; } }

/* Plus-Knoepfe und Menues */
.seg-menue-anker { position: relative; display: inline-flex; }
.seg-plus { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border: 1px dashed var(--line); border-radius: var(--radius); background: none; color: var(--accent); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.seg-plus:hover, .seg-plus[aria-expanded=true] { border-style: solid; border-color: var(--border-success); background: var(--accent-subtle); }
.seg-plus-leise { border-color: transparent; }
.seg-plus-gross { height: 32px; padding: 0 16px; font-size: 14px; }
.seg-menue { position: absolute; left: 0; top: calc(100% + 4px); z-index: 40; min-width: 320px; max-width: calc(100vw - 32px); max-height: 60vh; overflow: auto; padding: 6px; display: flex; flex-direction: column; gap: 1px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.seg-menue-eintrag { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 7px 10px; border: 0; border-radius: var(--radius-sm); background: none; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--text); text-align: left; cursor: pointer; }
.seg-menue-eintrag:hover:not(:disabled), .seg-menue-eintrag:focus-visible { background: var(--panel-2); outline: none; }
.seg-menue-eintrag:disabled { color: var(--disabled); cursor: default; }
.seg-menue-hinweis { font-size: 12px; font-weight: 400; color: var(--muted-2); }
.seg-menue-eintrag:disabled .seg-menue-hinweis { color: var(--disabled); }

/* Verbinder: oder innerhalb der Gruppe, und zwischen Gruppen */
.seg-oder { display: flex; align-items: center; gap: 8px; margin: 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.seg-oder::before, .seg-oder::after { content: ''; flex: 1; height: 1px; background: var(--line-soft); }
.seg-oder::before { flex: 0 0 8px; }
.seg-gruppe-fuss { padding: 2px 6px 4px; }
.seg-und { display: flex; align-items: center; height: 34px; padding-left: 22px; position: relative; }
.seg-und::before { content: ''; position: absolute; left: 34px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.seg-und span { position: relative; padding: 2px 10px; border-radius: var(--radius-full); background: var(--pill); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.seg-und-knopf { margin-top: 10px; }
.seg-leer { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px; border: 1px dashed var(--line); border-radius: var(--radius-lg); background: var(--bg-neutral); }
.seg-leer p { margin: 0; color: var(--muted); }
.karte.seg-bedingungen-karte { overflow: visible; } /* Menues duerfen aus der Karte ragen */
.seg-teile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.seg-teile select { width: auto; }

/* --- Tabelle (tabelle.js): Ueberschrift, Suche, Seiten, Sortierung, Spalten, Breiten, Ansichten --- */
.tbl-rahmen { display: flex; flex-direction: column; gap: 12px; }
.tbl-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tbl-titel { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.tbl-titel h1, .tbl-titel h2 { margin: 0; }
.tbl-anzahl { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl-aktionen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tbl-aktionen input[type=text] { width: 260px; max-width: 100%; }
.tbl-werkzeuge { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tbl-werkzeuge select { width: auto; max-width: 220px; }
.tbl-werkzeuge > .flex { flex-wrap: wrap; }
.tbl-suche { width: 260px !important; max-width: 100%; }
.tbl-zusatzzeile { margin-top: -2px; }
.tbl-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.tbl { table-layout: fixed; width: 100%; }
.tbl th { position: relative; padding: 0; white-space: nowrap; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.tbl th .tbl-sort, .tbl th .tbl-label { display: flex; align-items: center; gap: 6px; width: 100%; padding: 9px 14px 9px 10px; border: 0; background: none; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; text-align: left; overflow: hidden; }
.tbl th .tbl-sort { cursor: pointer; }
.tbl th .tbl-sort:hover { color: var(--text); }
.tbl th .tbl-sort > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.tbl th[aria-sort=ascending], .tbl th[aria-sort=descending] { color: var(--accent); }
.tbl-pfeil { font-size: 9px; flex: none; }
.tbl-greifer { position: absolute; top: 0; right: -4px; width: 8px; height: 100%; cursor: col-resize; z-index: 1; touch-action: none; }
.tbl-greifer::after { content: ""; position: absolute; top: 25%; bottom: 25%; left: 3px; width: 2px; border-radius: 1px; background: var(--line); }
.tbl-greifer:hover::after, body.tbl-zieht .tbl-greifer::after { background: var(--accent); }
body.tbl-zieht { cursor: col-resize; user-select: none; }
.tbl td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl td .tag-reihe, .tbl td .chips { flex-wrap: nowrap; }
.tbl-umbruch { overflow: hidden; text-overflow: ellipsis; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr.klick:focus-visible td { background: var(--panel-2); outline: none; }
.tbl-laedt .tbl-scroll { opacity: .6; transition: opacity .15s; }
.tbl-fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.tbl-fuss select { width: auto; }
.tbl-seiten { display: flex; align-items: center; gap: 6px; }
.tbl-seite { white-space: nowrap; padding: 0 4px; }
.tbl-pop-anker { position: relative; }
.tbl-ansicht-knopf { white-space: nowrap; }
.tbl-geaendert { color: var(--warn-text); font-weight: 700; }
.tbl-popover { position: absolute; right: 0; top: calc(100% + 4px); min-width: 240px; max-height: 60vh; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); padding: 6px; z-index: 30; display: flex; flex-direction: column; gap: 2px; }
.tbl-pop-titel { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 6px 8px 4px; }
.tbl-pop-zeile { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; }
.tbl-pop-zeile:hover { background: var(--panel-2); }
.tbl-pop-eintrag { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: var(--radius-sm); background: none; font: inherit; font-size: 13px; color: var(--text); text-align: left; cursor: pointer; }
.tbl-pop-eintrag:hover:not(:disabled) { background: var(--panel-2); }
.tbl-pop-eintrag:disabled { color: var(--disabled); cursor: default; }
.tbl-pop-eintrag.aktiv { font-weight: 600; color: var(--accent); }
.tbl-pop-trenner { height: 1px; background: var(--line-soft); margin: 4px 0; }
.tbl-pop-form { display: flex; flex-direction: column; gap: 8px; padding: 4px; min-width: 260px; }

/* --- Tags --- */
.tag-reihe { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.tag-chip { --tag: #226B1E; --tag-bg: #EEFFD9; display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: var(--radius-full); background: var(--tag-bg); color: var(--text); font: inherit; font-size: 12px; line-height: 20px; border: 1px solid transparent; white-space: nowrap; }
.tag-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--tag); flex: none; }
.tag-chip.f-gruen { --tag: #3C8A2E; --tag-bg: #EEFFD9; }
.tag-chip.f-blau { --tag: #2A62C9; --tag-bg: #E3ECFC; }
.tag-chip.f-tuerkis { --tag: #0B7C8A; --tag-bg: #E2F5F5; }
.tag-chip.f-gelb { --tag: #B88A00; --tag-bg: #FEF5CF; }
.tag-chip.f-orange { --tag: #D9620B; --tag-bg: #FDEBDD; }
.tag-chip.f-rot { --tag: #C2344D; --tag-bg: #FFE3E8; }
.tag-chip.f-lila { --tag: #7A4FC4; --tag-bg: #EFE7FC; }
.tag-chip.f-grau { --tag: #6B7266; --tag-bg: #EEF0EC; }
button.tag-chip { cursor: pointer; }
button.tag-chip:hover { border-color: var(--tag); }
button.tag-chip.aktiv { border-color: var(--tag); box-shadow: inset 0 0 0 1px var(--tag); font-weight: 600; }
.tag-anzahl { color: var(--muted); font-variant-numeric: tabular-nums; }
.tag-weg { border: 0; background: none; padding: 0 0 0 2px; font-size: 14px; line-height: 1; color: var(--muted); cursor: pointer; }
.tag-weg:hover { color: var(--danger); }
.tag-filter { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tag-filter-label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-right: 2px; }
.tag-verwalten { margin-left: auto; }
.tag-editor { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tag-plus { border: 1px dashed var(--line); background: none; border-radius: var(--radius-full); padding: 1px 10px; font: inherit; font-size: 12px; line-height: 20px; color: var(--muted); cursor: pointer; }
.tag-plus:hover { border-color: var(--accent); color: var(--accent); }
.tag-eingabe { width: 180px !important; padding: 2px 8px !important; font-size: 12.5px; }
.tag-verwaltung { display: flex; flex-direction: column; gap: 8px; }
.tag-verwaltung-zeile { display: grid; grid-template-columns: 140px minmax(0, 1fr) 110px 90px auto auto; gap: 8px; align-items: center; }
@media (max-width: 640px) { .tag-verwaltung-zeile { grid-template-columns: 1fr 1fr; } }
.feld > .seg-umschalter { align-self: flex-start; }

/* Aenderungen (Audit-Trail je Kontakt/Account) */
.verlauf { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.verlauf-eintrag { padding: 12px 0; border-top: 1px solid var(--line-soft); }
.verlauf-eintrag:first-child { border-top: 0; }
.verlauf-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.verlauf-felder { width: 100%; table-layout: auto; margin-top: 8px; border-collapse: collapse; font-size: 13px; }
.verlauf-felder th { text-align: left; font-weight: 500; color: var(--muted); padding: 3px 14px 3px 0; white-space: nowrap; vertical-align: top; border: 0; background: none; text-transform: none; letter-spacing: 0; font-size: 13px; }
.verlauf-felder td { padding: 3px 6px; border: 0; vertical-align: top; overflow-wrap: anywhere; }
.verlauf-vorher { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line); }
.verlauf-nachher { font-weight: 500; }
.verlauf-pfeil { color: var(--muted-2); }
.verlauf-leer { font-style: italic; color: var(--muted-2); text-decoration: none; white-space: nowrap; }
.verlauf-felder th { width: 1%; }
.verlauf-vorher { min-width: 3.5em; }
/* Events: Werte registrierter Events, Verwaltung */
.event-werte { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 4px; font-size: 13px; }
.event-felder { display: flex; flex-direction: column; gap: 8px; }
.event-feld { padding: 6px 8px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--bg-neutral); }
.code-kopie { position: relative; }
.code-kopie .btn { position: absolute; top: 6px; right: 6px; }
.code-kopie pre { padding-right: 90px; white-space: pre-wrap; word-break: break-all; }
hr.trenner { border: 0; border-top: 1px solid var(--line-soft); margin: 24px 0; }
.kompakt-tabelle { font-size: 13px; }
/* Vorlagen-Assistent */
.assistent-schritte { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 var(--abstand); flex-wrap: wrap; }
.assistent-schritte li { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: var(--radius-full); background: var(--bg-neutral); color: var(--muted); font-size: 13px; font-weight: 500; }
.assistent-schritte li.aktiv { background: var(--accent-subtle); color: var(--text); }
.assistent-nr { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); font-size: 12px; }
.assistent-schritte li.aktiv .assistent-nr { background: var(--accent-bg); border-color: transparent; }
.assistent-schritte li.erledigt .assistent-nr { background: var(--accent); color: #fff; border-color: transparent; }
.vorlagen-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--abstand); }
.vorlage-karte { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; font: inherit; cursor: pointer; margin: 0; }
.vorlage-karte:hover, .vorlage-karte.aktiv { border-color: var(--border-success); box-shadow: var(--shadow-sm); }
.vorlage-karte h2 { margin: 0; }
.vorlage-weiter { margin-top: auto; color: var(--accent); font-weight: 500; }
.assistent-leiste { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.assistent-scope { font-size: 15px; margin: 18px 0 8px; }
.vorlage-tab { padding: 12px 16px; margin-bottom: 10px; }
.vorlage-tab-kopf { font-size: 14.5px; }
.vorlage-gruppen { list-style: none; margin: 8px 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.vorlage-gruppe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0; }
.vorlage-gruppe > label { flex: 1; min-width: 240px; }
.vorlage-gruppe.vorhanden { color: var(--muted); }
.vorlage-felder summary { cursor: pointer; color: var(--muted); }
.vorlage-felder > div { max-width: 520px; padding: 4px 0; }
.vorlage-pruefen > li { margin-bottom: 8px; }
.assistent-fuss { display: flex; align-items: center; gap: 8px; margin-top: var(--abstand); }
.assistent-fertig { text-align: center; padding: 32px; }
.assistent-haken { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent-bg); font-size: 22px; font-weight: 700; margin-bottom: 8px; }

/* Ablagezone im Datei-/Bild-Feld (kompakt) und Profilbild als Ablageziel */
.datei-zone.klein { flex-direction: row; justify-content: center; gap: 10px; padding: 12px 14px; border-width: 1.5px; font-size: 13px; }
.datei-zone.klein .ax-icon { width: 20px; height: 20px; }
.datei-zone.laedt { opacity: .6; cursor: progress; }
.avatar-knopf.ueber .avatar { outline: 3px dashed var(--accent); outline-offset: 2px; }

/* Pipeline: Filter als Satz, Ansicht umschalten */
.pipeline-filter { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: var(--abstand); }
.pipeline-filter .tbl-suche { height: 32px; min-height: 0; padding-top: 0; padding-bottom: 0; }
.event-felder > .seg-plus { align-self: flex-start; }

/* "⋯"-Menue im Kopf: rechtsbuendig, gefaehrliche Eintraege rot */
.mehr-knopf { min-width: 34px; justify-content: center; font-size: 16px; letter-spacing: 1px; line-height: 1; }
.mehr-menue { left: auto; right: 0; min-width: 240px; }
.seg-menue-eintrag.gefahr { color: var(--danger); }
.seg-menue-eintrag.gefahr:hover { background: var(--bg-error-subtle); }
.karte.kontakt-kopf-karte { overflow: visible; } /* das ⋯-Menue darf aus der Karte ragen */

/* Auswahllisten */
.katalog-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin-top: 12px; }
.katalog-karte { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.katalog-karte .btn { align-self: flex-start; margin-top: auto; }
.katalog-vorschau { color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.liste-eintraege { display: flex; flex-direction: column; gap: 4px; max-height: 52vh; overflow-y: auto; margin: 8px 0; padding-right: 2px; }
.liste-eintrag { display: grid; grid-template-columns: 18px minmax(0, 1fr) minmax(0, 1.4fr) 28px; gap: 6px; align-items: center; border-radius: var(--radius-sm); }
.liste-eintrag input { min-height: 0; height: 32px; padding: 0 8px; font-size: 13.5px; }
.liste-eintrag.mit-eltern { grid-template-columns: 18px minmax(0, 0.9fr) minmax(0, 0.8fr) minmax(0, 1.2fr) 28px; }
.liste-eintrag .liste-eltern { min-height: 0; height: 32px; padding: 0 6px; font-size: 13px; }
.abhaengig .small.muted { display: block; margin-top: 4px; }
.liste-eintrag .griff { cursor: grab; color: var(--muted-2); text-align: center; user-select: none; }
.liste-eintrag.zieht { opacity: .4; }
.liste-eintrag.ueber { box-shadow: inset 0 2px 0 var(--accent); }
.liste-eintraege + .seg-plus { align-self: flex-start; }
.liste-verwendung { margin: 4px 0; padding-left: 18px; font-size: 13px; }

/* Events: Ansichten (events-ansichten.js) */
.karte.events-karte { overflow: visible; }
.events-kopf { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-bottom: var(--abstand); }
.events-kopf .zeitstrahl-filter { flex: 1 1 520px; min-width: 0; }
.events-kopf select, .events-kopf input { min-height: 0; height: 32px; padding-top: 0; padding-bottom: 0; font-size: 13.5px; }
.ev-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 10px; font-size: 12.5px; color: var(--muted); }
.ev-legende-eintrag { display: inline-flex; align-items: center; gap: 6px; }
.ev-farbe { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ev-scroll { overflow-x: auto; padding-bottom: 4px; }
.ev-breit { min-width: 640px; position: relative; }
.ev-zeitstrahl { position: relative; border-radius: var(--radius); background: var(--bg-neutral); }
.ev-linie { position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--line); }
.ev-raster { position: absolute; inset: 0; pointer-events: none; }
.ev-raster span { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-soft); }
.ev-achse { position: relative; height: 22px; margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.ev-marke { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.ev-punkt { position: absolute; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; border: 2px solid var(--panel); box-shadow: 0 0 0 1px rgb(0 0 0 / .12); cursor: pointer; padding: 0; transition: transform .1s; }
.ev-punkt:hover, .ev-punkt:focus-visible { transform: scale(1.5); z-index: 2; outline: none; }
.ev-heute { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--danger); opacity: .55; }
/* Events: Legende rechts (sticky), Abstaende, Fenster beim Darueberfahren */
.events-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--abstand); align-items: start; }
.events-inhalt { min-width: 0; }
.ev-legende-box { position: sticky; top: 64px; max-height: calc(100vh - 84px); overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.ev-leg-kopf { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px 6px; }
.ev-legende-box button { display: flex; align-items: center; gap: 8px; width: 100%; border: 1px solid transparent; background: transparent; border-radius: var(--radius-sm); padding: 4px 6px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; text-align: left; }
.ev-legende-box button:hover { background: var(--panel-2); }
.ev-legende-box button:focus-visible { outline: 2px solid var(--focus); outline-offset: -1px; }
.ev-legende-box button.aktiv { background: var(--accent-subtle); border-color: var(--accent); }
.ev-leg-alle { font-weight: 600; }
.ev-leg-gruppe { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; }
.ev-legende-box .ev-leg-kat { justify-content: space-between; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.ev-leg-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-leg-zahl { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.zeitstrahl li.ev-abstand { padding: 0 0 12px 44px; color: var(--muted-2); font-size: 11.5px; }
.zeitstrahl li.ev-abstand span { display: inline-block; padding: 1px 8px; border: 1px dashed var(--line); border-radius: var(--radius-full); background: var(--panel); }
.zeitstrahl li.ev-abstand.lang span { border-color: var(--border-warning); color: var(--warn-text); background: var(--bg-warning-subtle); }
.ev-zeitstrahl.mit-luecken .ev-linie { bottom: 30px; }
.ev-luecke { position: absolute; bottom: 6px; height: 14px; border: 1px solid var(--muted-2); border-top: none; border-radius: 0 0 4px 4px; opacity: .7; }
.ev-luecke span { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); font-size: 10.5px; color: var(--muted); background: var(--bg-neutral); padding: 0 4px; white-space: nowrap; }
.ev-tipp { position: fixed; z-index: 60; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 10px 12px; font-size: 13px; pointer-events: none; }
.ev-tipp .zeit { color: var(--muted-2); font-size: 12px; }
@media (max-width: 1000px) { .events-layout { grid-template-columns: 1fr; } .ev-legende-box { position: static; max-height: none; order: -1; } }
.ev-detail { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.ev-gantt { display: flex; flex-direction: column; gap: 4px; }
.ev-gantt-zeile { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px; align-items: center; }
.ev-gantt-name { display: flex; align-items: center; gap: 6px; font-size: 13px; min-width: 0; }
.ev-gantt-name span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.ev-gantt-spur { position: relative; height: 26px; border-radius: var(--radius-sm); background: var(--bg-neutral); }
.ev-gantt-spur .ev-punkt { top: 7px; }
.ev-gantt-balken { position: absolute; top: 9px; height: 8px; border-radius: 4px; opacity: .25; }
.ev-gantt-achse { position: relative; }
.ev-kal-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ev-kal-kopf strong { min-width: 140px; text-align: center; }
.ev-kal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ev-kal-wt { font-size: 11.5px; font-weight: 600; color: var(--muted); text-align: center; padding: 2px 0; }
.ev-kal-tag { display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-height: 76px; padding: 4px 5px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--panel); font: inherit; text-align: left; overflow: hidden; }
.ev-kal-tag.leer { border: 0; background: none; }
.ev-kal-tag:disabled { cursor: default; color: var(--muted); }
.ev-kal-tag.mit { cursor: pointer; }
.ev-kal-tag.mit:hover { border-color: var(--border-success); background: var(--accent-subtle); }
.ev-kal-tag.heute .ev-kal-nr { background: var(--accent-bg); border-radius: 50%; color: var(--text); }
.ev-kal-nr { font-size: 12px; font-weight: 600; width: 22px; height: 22px; display: grid; place-items: center; }
.ev-kal-events { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ev-kal-event { font-size: 10.5px; color: #fff; border-radius: 3px; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-verteilung { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--abstand); }
.ev-verteilung-karte { border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 12px 14px; min-width: 0; }
.ev-verteilung-karte h4 { margin: 0 0 8px; }
@media (max-width: 720px) { .ev-gantt-zeile { grid-template-columns: 120px minmax(0, 1fr); } .ev-kal-tag { min-height: 54px; } .ev-kal-event { display: none; } .ev-kal-tag.mit .ev-kal-nr { background: var(--accent-subtle); border-radius: 50%; } }

/* Text mit Vorschlaegen */
.vorschlag-feld { position: relative; }
.vorschlag-liste { position: absolute; left: 0; min-width: 100%; width: max-content; max-width: min(440px, 90vw); top: calc(100% + 4px); z-index: 45; list-style: none; margin: 0; padding: 4px; max-height: 280px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.vorschlag-liste li { display: flex; justify-content: space-between; gap: 16px; padding: 7px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13.5px; }
.vorschlag-liste li:hover, .vorschlag-liste li.aktiv { background: var(--panel-2); }
.vorschlag-liste mark { background: var(--accent-subtle); color: inherit; font-weight: 600; padding: 0; }
.vorschlag-hinweis { color: var(--muted-2); font-size: 12px; white-space: nowrap; }

/* Form Designer: Karte mit ungespeicherten Aenderungen */
.feld-karte.entwurf { border-style: solid; border-color: var(--border-warning); }
.feld-karte.entwurf::after { content: 'nicht gespeichert'; position: absolute; right: 10px; bottom: 6px; font-size: 11px; color: var(--warn-text); }

/* Scoring: Abzeichen im Kopf, Erklaerung */
.score-leiste { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.score-badge { --tag: #6B7266; --tag-bg: #EEF0EC; display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px 1px 6px; border-radius: var(--radius-full); background: var(--tag-bg); border: 1px solid transparent; color: var(--text); font: inherit; font-size: 12px; line-height: 20px; cursor: pointer; }
.score-badge:hover, .score-badge:focus-visible { border-color: var(--tag); outline: none; }
.score-badge strong { color: var(--tag); font-weight: 700; }
.score-badge .score-modell { color: var(--muted); }
.score-badge .score-zahl { font-variant-numeric: tabular-nums; }
.score-trend.steigt { color: var(--success-text); } .score-trend.faellt { color: var(--danger); }
.score-badge.f-gruen { --tag: #3C8A2E; --tag-bg: #EEFFD9; } .score-badge.f-blau { --tag: #2A62C9; --tag-bg: #E3ECFC; }
.score-badge.f-tuerkis { --tag: #0B7C8A; --tag-bg: #E2F5F5; } .score-badge.f-gelb { --tag: #8A6700; --tag-bg: #FEF5CF; }
.score-badge.f-orange { --tag: #C2560A; --tag-bg: #FDEBDD; } .score-badge.f-rot { --tag: #C2344D; --tag-bg: #FFE3E8; }
.score-badge.f-lila { --tag: #7A4FC4; --tag-bg: #EFE7FC; } .score-badge.f-grau { --tag: #6B7266; --tag-bg: #EEF0EC; }
.score-kopf { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.score-gross { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; background: var(--accent-subtle); }
.score-gross span { font-size: 28px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.score-gross small { color: var(--muted); font-size: 11px; }
.score-teile { display: grid; gap: 6px; flex: 1; min-width: 200px; }
.score-teile > div { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.score-teile .muted { min-width: 150px; font-size: 13px; }
.score-erklaerung { width: 100%; }
.score-erklaerung td, .score-erklaerung th { padding: 6px 8px; }
.score-erklaerung tfoot td { border-top: 1px solid var(--line); }

/* Scoring-Seite */
.score-kpi { border-top: 3px solid var(--tag, var(--line)); }
.score-kpi.f-gruen { --tag: #3C8A2E; } .score-kpi.f-blau { --tag: #2A62C9; } .score-kpi.f-tuerkis { --tag: #0B7C8A; } .score-kpi.f-gelb { --tag: #B88A00; }
.score-kpi.f-orange { --tag: #D9620B; } .score-kpi.f-rot { --tag: #C2344D; } .score-kpi.f-lila { --tag: #7A4FC4; } .score-kpi.f-grau { --tag: #6B7266; }
.score-matrix { display: grid; gap: 4px; align-items: stretch; margin-top: 8px; }
.score-matrix-kopf { text-align: center; padding: 4px 0; }
.score-matrix-zeile { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.score-matrix-zelle { display: grid; place-items: center; min-height: 40px; border-radius: var(--radius-sm); background: rgb(34 107 30 / calc(0.06 + var(--anteil) * 0.5)); font-variant-numeric: tabular-nums; font-weight: 600; }
.score-listen { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--abstand); margin-bottom: var(--abstand); }
.score-liste { margin: 0; }
.score-liste ol { margin: 0; padding-left: 20px; }
.score-liste li { display: flex; align-items: center; gap: 6px; padding: 3px 0; flex-wrap: wrap; }
.score-liste li::marker { color: var(--muted); }
.score-wert { min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; }
.score-editor section.karte { margin-bottom: var(--abstand); }
.score-stufe { display: grid; grid-template-columns: minmax(120px, 1fr) 110px 56px minmax(90px, 160px) 32px; align-items: center; gap: 8px; margin-bottom: 6px; }
.score-stufe-kopf { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-bottom: 2px; }
.score-stufe input[type=text], .score-stufe input[type=number] { width: 100%; min-width: 0; }
.score-stufe input[type=color] { width: 56px; height: 34px; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); cursor: pointer; }
.score-stufe .tag-chip { justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .score-stufe { grid-template-columns: 1fr 80px 48px 32px; } .score-stufe .tag-chip, .score-stufe-kopf span:nth-child(4) { display: none; } }
.score-regel { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; background: var(--panel); }
.score-regel-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.score-regel-kopf input[type=text] { flex: 1; min-width: 0; font-weight: 600; }
.score-regel-kopf input[type=number] { width: 90px; }
.score-event-satz { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; font-size: 13.5px; margin-bottom: 6px; }
.score-event-satz input[type=number] { width: 84px; } .score-event-satz input[type=text] { width: 170px; }
.score-event-satz select { width: auto; max-width: 240px; }

/* Live-Daten in Formularen */
.live-marke { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: var(--radius-full); background: var(--bg-info-subtle); color: var(--info); font-size: 10.5px; font-weight: 600; letter-spacing: .3px; vertical-align: middle; text-transform: uppercase; }
.live-feld { border-top: 1px solid var(--line-soft); margin-top: 8px; padding-top: 8px; }

/* Dashboard: Umschalter Tabelle/Diagramm als Icon */
.dash-umschalt { width: 30px; height: 30px; padding: 0; display: inline-grid; place-items: center; color: var(--muted); }
.dash-umschalt:hover, .dash-umschalt[aria-pressed="true"] { color: var(--accent); }
.dash-umschalt .dash-pikto { width: 18px; height: 18px; }

/* Formularkarte: Stand hinter einem Icon, letzte Aenderungen als Fenster */
.vi { position: relative; display: inline-flex; }
.vi-knopf { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-full); background: transparent; color: var(--muted); cursor: pointer; }
.vi-knopf:hover, .vi-knopf[aria-expanded="true"] { background: var(--panel-2); color: var(--text); }
.vi-knopf:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.vi-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vi-fenster { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: min(360px, calc(100vw - 32px)); max-height: 420px; overflow-y: auto; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); text-align: left; font-weight: 400; }
.vi-stand { font-weight: 600; font-size: 13px; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--line-soft); }
.vi-titel { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-bottom: 4px; }
.vi-liste { list-style: none; margin: 0 0 6px; padding: 0; }
.vi-liste li { padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.vi-liste li:last-child { border-bottom: none; }
.vi-kopf { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.vi-felder { margin-top: 2px; overflow-wrap: anywhere; }

/* Seite Events: Statistik */
.es .seite-kopf { align-items: flex-start; }
.es-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--abstand); }
.es-filter select { width: auto; min-width: 160px; max-width: 260px; height: 32px; padding-top: 0; padding-bottom: 0; font-size: 13.5px; }
.es-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--abstand); margin-bottom: var(--abstand); }
.es-kpi { margin: 0; }
.es-kpi .zahl { font-size: 24px; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-kpi .steigt, .es-trend.steigt { color: var(--success-text); } .es-kpi .faellt, .es-trend.faellt { color: var(--danger); }
.es-ansicht { margin-bottom: 10px; }
.es-inhalt { min-width: 0; }
.es-diagramm { margin: 0 0 var(--abstand); }
.es-diagramm-kopf { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 8px; }
.es-svg { display: block; width: 100%; height: auto; overflow: visible; }
.es-svg text { font-family: var(--font); }
.es-achse { font-size: 11px; fill: var(--muted); }
.es-label { font-size: 12.5px; fill: var(--text); }
.es-label-zahl { font-size: 12px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.es-kat { font-size: 10.5px; letter-spacing: .5px; fill: var(--muted); font-weight: 600; }
.es-raster { stroke: var(--line-soft); stroke-width: 1; }
.es-spur { stroke: var(--line-soft); stroke-width: 1; stroke-dasharray: 2 4; }
.es-wochenende { fill: var(--bg-neutral); }
.es-blase { fill-opacity: .78; stroke: var(--panel); stroke-width: 1.5; transition: fill-opacity .1s; }
.es-blase:hover, .es-blase:focus { fill-opacity: 1; stroke: var(--text); outline: none; }
.es-blase-muster { fill: var(--muted-2); fill-opacity: .35; stroke: var(--muted-2); }
.es-groessen { width: 110px; height: 30px; }
.es-zelle:hover, .es-zelle:focus, .es-saeule:hover, .es-saeule:focus { stroke: var(--text); stroke-width: 1.2; outline: none; }
.es-klickbar { cursor: pointer; }
.es-linie { fill: none; stroke: var(--text); stroke-width: 2; stroke-dasharray: 5 4; }
.es-linie-punkt { fill: var(--panel); stroke: var(--text); stroke-width: 1.5; }
.es-linie-muster { display: inline-block; width: 18px; border-top: 2px dashed var(--text); vertical-align: middle; }
.es-kat-legende { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; }
.es-kat-legende > span { display: inline-flex; align-items: center; gap: 5px; }
.es-heat { fill: var(--accent); } .es-heat-leer { fill: var(--bg-neutral); }
.es-heat:hover, .es-heat:focus, .es-heat-leer:hover { stroke: var(--text); outline: none; }
.es-tipp { position: fixed; z-index: 60; background: var(--text); color: var(--panel); border-radius: var(--radius-sm); padding: 6px 10px; font-size: 13px; pointer-events: none; box-shadow: var(--shadow-md); }
.es-tipp .small { color: rgb(255 255 255 / .85); }
.es-ranglisten { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--abstand); }
.es-ranglisten .karte { margin: 0; }
.es-rang { margin: 0; padding-left: 22px; }
.es-rang li { display: grid; grid-template-columns: minmax(0, 1fr) 110px 48px auto; grid-template-areas: 'name balken zahl trend' 'info balken zahl trend'; align-items: center; gap: 0 10px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.es-rang li > :first-child { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-rang li > .small.muted { grid-area: info; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-rang .es-balken { grid-area: balken; }
.es-rang-zahl { grid-area: zahl; text-align: right; font-variant-numeric: tabular-nums; }
.es-trend { grid-area: trend; min-width: 64px; text-align: right; }
.es-balken { display: block; height: 8px; border-radius: var(--radius-full); background: var(--bg-neutral); overflow: hidden; }
.es-balken > span { display: block; height: 100%; border-radius: var(--radius-full); }
.es-listenfilter { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.zeitstrahl li.es-tag { padding: 6px 0 8px; font-weight: 600; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line-soft); margin-bottom: 10px; }
.es-leer { text-align: center; padding: 32px; }

.score-zeit-filter { margin: 4px 0 8px; }
.score-zeit-filter summary { cursor: pointer; color: var(--muted); }
.score-zeit-typen { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 8px 0; }
.score-editor h3 { font-size: 14px; margin: 14px 0 6px; }

/* Tag-Leiste: Icons fuer Auswahl aufheben und Tags verwalten */
.tag-icon { width: 28px; height: 28px; min-height: 0; padding: 0; display: inline-grid; place-items: center; color: var(--muted); border-color: transparent; background: transparent; }
.tag-icon:hover { color: var(--text); background: var(--panel-2); }
.tag-icon .ax-icon { width: 18px; height: 18px; fill: currentColor; }

/* Slack/Teams: Regeln eines Kanals */
.chat-regel { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 8px; background: var(--panel); }
.chat-regel.aus { opacity: .6; }
.chat-regel-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chat-vorschlaege { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.chip-knopf { border: 1px dashed var(--line); background: var(--panel); border-radius: var(--radius-full); padding: 3px 10px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--text); }
.chip-knopf:hover { border-color: var(--accent); color: var(--accent); }
.chat-ausloeser { display: grid; gap: 6px; }
.chat-typen { display: flex; flex-wrap: wrap; gap: 4px 14px; max-height: 180px; overflow-y: auto; padding: 4px 0; }
.chat-editor .flex input, .chat-editor .flex select { width: auto; min-width: 0; flex: 1; }

/* Globale Suche in der Kopfleiste */
.topbar-pfad { flex: 0 1 auto; max-width: 32%; }
.gs { position: relative; flex: 1 1 auto; max-width: 760px; min-width: 180px; margin: 0 auto; }
.gs .gs-eingabe { width: 100%; height: 36px; padding: 0 64px 0 36px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--panel); font: inherit; font-size: 14px; color: var(--text); box-shadow: var(--shadow-sm); }
.gs .gs-eingabe:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--accent-subtle); }
.gs-eingabe::-webkit-search-cancel-button { display: none; }
.gs-lupe { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: flex; color: var(--muted); pointer-events: none; }
.gs-lupe .ax-icon { width: 18px; height: 18px; fill: currentColor; }
.gs-taste { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 11px var(--font); color: var(--muted); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1px 6px; background: var(--panel-2); pointer-events: none; }
.gs-eingabe:focus ~ .gs-taste { display: none; }
.gs-liste { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; max-height: min(70vh, 560px); overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 6px; }
.gs-gruppe { display: flex; align-items: center; gap: 8px; padding: 10px 10px 4px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.gs-gruppe::before { content: ''; width: 8px; height: 8px; border-radius: 2px; }
.gs-gruppe-kontakt::before { border-radius: 50%; background: var(--info); }
.gs-gruppe-account::before { background: #B26B00; }
.gs-gruppe-seite::before { background: var(--muted-2); transform: rotate(45deg); }
.gs-anzahl { font-weight: 600; color: var(--muted-2); }
.gs-zeile { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: var(--radius); cursor: pointer; border-left: 3px solid transparent; }
.gs-zeile[aria-selected="true"] { background: var(--panel-2); }
.gs-kontakt[aria-selected="true"] { border-left-color: var(--info); background: var(--bg-info-subtle); }
.gs-account[aria-selected="true"] { border-left-color: #B26B00; background: var(--bg-warning-subtle); }
.gs-seite[aria-selected="true"] { border-left-color: var(--muted-2); }
.gs-marke { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.gs-marke .ax-icon { width: 18px; height: 18px; fill: currentColor; }
.gs-kontakt .gs-marke { border-radius: 50%; background: var(--info); color: #fff; }
.gs-account .gs-marke { border-radius: 6px; background: var(--bg-warning-subtle); color: #8A5300; border: 1px solid var(--border-warning); }
.gs-seite .gs-marke { border-radius: 8px; background: var(--panel-2); color: var(--muted); border: 1px dashed var(--line); }
.gs-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.gs-titel { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-seite .gs-titel { font-weight: 500; }
.gs-unter { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-etikett { flex: none; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-full); }
.gs-etikett-kontakt { background: var(--bg-info-subtle); color: var(--info); }
.gs-etikett-account { background: var(--bg-warning-subtle); color: #8A5300; }
.gs-etikett-seite { background: var(--panel-2); color: var(--muted); border: 1px solid var(--line-soft); }
.gs-hinweis { padding: 10px; font-size: 13px; color: var(--muted); }
@media (max-width: 760px) { .topbar-pfad { display: none; } .gs-taste { display: none; } }

/* Benutzergruppen */
.gr-reiter { margin-bottom: 14px; }
.gr-editor .gr-abschnitt { border-top: 1px solid var(--line-soft); margin-top: 14px; padding-top: 12px; }
.gr-editor .gr-abschnitt h3 { margin: 0 0 8px; font-size: 14px; }
.gr-sicht { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.gr-liste { display: grid; gap: 6px; max-height: 240px; overflow-y: auto; padding: 2px 0; }
.gr-liste.gr-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; }
.gr-farben, .gr-ausblenden { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
@media (max-width: 600px) { .gr-sicht, .gr-liste.gr-spalten { grid-template-columns: 1fr; } }

/* Telefonie (CTI) */
.cti-feld { display: flex; gap: 6px; align-items: stretch; }
.cti-feld input { flex: 1; min-width: 0; }
.cti-knopf { flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; color: var(--accent); }
.cti-knopf .ax-icon, .cti-icon .ax-icon { width: 16px; height: 16px; fill: currentColor; }
.cti-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-bg); color: var(--accent-fg); flex: none; }
.cti-karten { position: fixed; right: 20px; bottom: 20px; z-index: 55; display: flex; flex-direction: column; gap: 10px; width: min(340px, calc(100vw - 32px)); }
.cti-karte { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 10px 12px; display: grid; gap: 8px; }
.cti-karte.cti-klingelt { animation: cti-puls 1.6s ease-in-out infinite; }
.cti-karte.cti-verpasst { border-left-color: var(--danger); }
.cti-karte.cti-verpasst .cti-icon { background: var(--bg-error-subtle); color: var(--danger); }
@keyframes cti-puls { 0%, 100% { box-shadow: var(--shadow-md); } 50% { box-shadow: 0 0 0 4px var(--accent-subtle), var(--shadow-md); } }
@media (prefers-reduced-motion: reduce) { .cti-karte.cti-klingelt { animation: none; } }
.cti-karte-kopf, .cti-panel-kopf { display: flex; align-items: center; gap: 8px; }
.cti-karte-kopf > span:nth-child(2) { flex: 1; }
.cti-karte-fuss { display: flex; gap: 6px; justify-content: flex-end; }
.cti-zu { border: 0; background: none; font-size: 20px; line-height: 1; color: var(--muted); cursor: pointer; padding: 2px 6px; }
.cti-zu:hover { color: var(--text); }
.cti-wer strong, .cti-wer a { font-size: 15px; font-weight: 600; }
.cti-panel { position: fixed; right: 20px; bottom: 20px; z-index: 50; width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 90px); display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 20px 40px -12px rgb(0 0 0 / .25); }
.cti-panel-kopf { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.cti-panel-inhalt { padding: 12px 14px; overflow-y: auto; display: grid; gap: 10px; }
.cti-panel-inhalt textarea { min-height: 90px; }
.cti-panel-fuss { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line-soft); }
.cti-kontakt { display: grid; gap: 6px; }
.cti-formular .raster { --feld-zeile: 12px; }
.cti-start .flex { align-items: center; }
body.telefon-fenster .sidebar { display: none; }
body.telefon-fenster .cti-panel, body.telefon-fenster .cti-karten { left: 12px; right: 12px; width: auto; bottom: 12px; }
.cti-kontakt > .btn { justify-self: start; }
/* Offenes Panel: Karten links daneben, damit nichts verdeckt wird */
body.cti-panel-offen .cti-karten { right: calc(min(420px, 100vw - 32px) + 32px); }
@media (max-width: 900px) { body.cti-panel-offen .cti-karten { right: 20px; bottom: auto; top: 64px; } }
.cti-schritte { padding-left: 20px; display: grid; gap: 10px; }
.cti-ini { background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 8px 10px; font: 12.5px var(--mono); white-space: pre-wrap; word-break: break-all; margin: 6px 0; }
/* Globale Suche: weitere Arten */
.gs-gruppe-benutzer::before { background: #7A4FC4; }
.gs-gruppe-tag::before { background: #3C8A2E; border-radius: 4px 50% 50% 4px; }
.gs-gruppe-segment::before { background: #0B7C8A; }
.gs-benutzer .gs-marke { border-radius: 8px; background: #7A4FC4; color: #fff; }
.gs-tag .gs-marke { width: 32px; height: 22px; border-radius: 4px 999px 999px 4px; background: var(--tag-bg); border: 1px solid var(--tag); }
.gs-tag .gs-marke.f-gruen { --tag: #3C8A2E; --tag-bg: #EEFFD9; } .gs-tag .gs-marke.f-blau { --tag: #2A62C9; --tag-bg: #E3ECFC; }
.gs-tag .gs-marke.f-tuerkis { --tag: #0B7C8A; --tag-bg: #E2F5F5; } .gs-tag .gs-marke.f-gelb { --tag: #B88A00; --tag-bg: #FEF5CF; }
.gs-tag .gs-marke.f-orange { --tag: #D9620B; --tag-bg: #FDEBDD; } .gs-tag .gs-marke.f-rot { --tag: #C2344D; --tag-bg: #FFE3E8; }
.gs-tag .gs-marke.f-lila { --tag: #7A4FC4; --tag-bg: #EFE7FC; } .gs-tag .gs-marke.f-grau { --tag: #6B7266; --tag-bg: #EEF0EC; }
.gs-segment .gs-marke { border-radius: 50% 50% 8px 8px; background: #E2F5F5; color: #0B7C8A; border: 1px solid #9FD6D6; }
.gs-benutzer[aria-selected="true"] { border-left-color: #7A4FC4; background: #F4EFFC; }
.gs-tag[aria-selected="true"] { border-left-color: #3C8A2E; background: var(--accent-subtle); }
.gs-segment[aria-selected="true"] { border-left-color: #0B7C8A; background: #EEF8F8; }
.gs-etikett-benutzer { background: #EFE7FC; color: #5B3A99; }
.gs-etikett-tag { background: #EEFFD9; color: #2E6B23; }
.gs-etikett-segment { background: #E2F5F5; color: #0B6570; }

/* Automationen */
.au-schritte { display: grid; gap: 0; }
.au-schritt { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: var(--panel); position: relative; margin-bottom: 18px; }
.au-schritt::after { content: '↓'; position: absolute; left: 22px; bottom: -18px; color: var(--muted-2); font-size: 14px; }
.au-schritt.au-warten { border-style: dashed; background: var(--panel-2); }
.au-schritt.au-bedingung { border-left: 4px solid #B88A00; }
.au-schritt-kopf { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.au-nr { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-bg); align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.au-plus { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.au-lauf { border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 6px 10px; margin-top: 8px; }
.au-lauf summary { display: flex; gap: 8px; align-items: center; cursor: pointer; flex-wrap: wrap; }
.gr-editor .chat-typen { margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--line-soft); }

/* KI: Briefing */
.briefing { margin-top: 10px; padding: 8px 12px; border-radius: var(--radius); background: var(--bg-info-subtle); color: var(--text); font-size: 13.5px; line-height: 1.45; display: flex; gap: 10px; align-items: baseline; }
.briefing.kompakt { margin-top: 6px; font-size: 12.5px; padding: 6px 10px; }
.briefing-marke { flex: none; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--info); }
.cti-ki { gap: 6px; flex-wrap: wrap; margin-top: -4px; }
.cti-ki .btn.aktiv { border-color: var(--danger); color: var(--danger); }

.seg-aus-text { display: grid; gap: 6px; margin: 4px 0 14px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--panel-2); }
.seg-aus-text .titel { font-size: 12.5px; font-weight: 600; }
/* Praeferenzcenter (oeffentlich) */
.pz-karte { max-width: 560px; }
.pz-karte form { display: grid; gap: 14px; margin-top: 12px; }
.pz-optionen { display: grid; gap: 6px; }
.pz-abmelden { border-top: 1px solid var(--line-soft); padding-top: 12px; }
.pz-ok { color: var(--success-text); font-weight: 600; }

.pz-feldwahl { display: grid; gap: 8px; max-height: 320px; overflow-y: auto; }
.pz-feldwahl fieldset { border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 6px 10px; display: grid; gap: 4px; }
.pz-feldwahl legend { font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 4px; }
.pz-pruefliste { padding-left: 18px; display: grid; gap: 2px; max-height: 260px; overflow-y: auto; }

/* Prognosen und Qualitaet */
.pg-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.pg-chip { font-size: 11.5px; padding: 1px 8px; border-radius: var(--radius-full); background: var(--panel-2); border: 1px solid var(--line-soft); white-space: nowrap; cursor: default; }
.pg-chip.rot { background: var(--bg-error-subtle); color: var(--danger); border-color: transparent; }
.pg-chip.gelb { background: var(--bg-warning-subtle); color: var(--warn-text); border-color: transparent; }
.pg-chip.gruen { background: var(--bg-success-subtle); color: var(--success-text); border-color: transparent; }
.pg-chip.lila { background: #EFE7FC; color: #5B3A99; border-color: transparent; }
.qd-balken { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--panel-2); margin: 8px 0 4px; }
.qd-gut { background: #3C8A2E; } .qd-mittel { background: #E5B000; } .qd-schlecht { background: var(--danger); }
.qd-paar { border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 8px 10px; margin-top: 8px; display: grid; gap: 6px; }
.qd-seiten { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline; }
.pg-kpi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pg-kpi .karte { padding: 10px 12px; margin: 0; }
.pg-kpi .zahl { font-size: 22px; font-weight: 700; }
.pg-kpi .label { font-size: 12px; color: var(--muted); }

.pf-ok { background: var(--bg-success-subtle); color: var(--success-text); font-weight: 600; }
.pf-karte { display: grid; gap: 8px; }
a.konto-menu-item { text-decoration: none; color: inherit; }

/* KI-Assistent: Verwaltung, Vorschlaege, Zusammenfassung */
.ki-bereich { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px 10px; margin: 0 0 12px; display: grid; gap: 8px; }
.ki-bereich legend { font-size: 12.5px; font-weight: 600; padding: 0 4px; color: var(--muted); }
.ki-bereich[disabled] { opacity: .55; }
.ki-funktion { display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: start; cursor: pointer; }
.ki-funktion input { margin-top: 3px; }
.ki-funktion > span { display: grid; gap: 1px; }
.ki-tagzeile { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ki-tagvorschlaege { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.tag-chip.ki-vorschlag { border-style: dashed; border-color: var(--tag); cursor: pointer; background: transparent; }
.tag-chip.ki-vorschlag:hover { background: var(--tag-bg); }
.ki-neu { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ki-vorschlag-karte { margin: 10px 0; display: grid; gap: 6px; }
.ki-vorschlag-karte .formular-fuss { margin-top: 2px; }
.ki-ueberblick { font-size: 14.5px; line-height: 1.55; margin: 12px 0; }
.ki-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ki-abschnitt h3 { font-size: 13px; margin: 12px 0 4px; }
.ki-abschnitt ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
.ki-regel { padding: 8px 10px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--panel-2); }
.ki-entwurf ol { margin: 4px 0; padding-left: 18px; }
.ki-glossar-vorschlag { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.ki-rueck { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0; }
.ki-daumen { display: inline-flex; align-items: center; gap: 6px; }
.ki-daumen .btn-link { font-size: 15px; text-decoration: none; padding: 0 2px; }
pre.ki-kontext { white-space: pre-wrap; max-height: 70vh; overflow: auto; font-size: 12px; }
.gs-leeren { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--muted); cursor: pointer; }
.gs-leeren:hover { background: var(--pill); color: var(--text); }
.gs-leeren:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.gs-leeren[hidden] { display: none; }
.gs-leeren .ax-icon { width: 16px; height: 16px; fill: currentColor; }
.gs.gs-voll .gs-taste { display: none; }

/* Ablauf und Events (Tags, Segmente) */
.ablauf-felder { display: grid; gap: 12px; }
.ablauf-felder .check { display: flex; align-items: center; gap: 6px; }
.ablauf-felder .check.muted { opacity: .55; }
.ablauf-wert[hidden] { display: none; }
.tag-ablauf { font-size: 10px; line-height: 1; }
details.seg-ablauf > summary { cursor: pointer; list-style: revert; padding: 2px 0; }
details.seg-ablauf[open] > summary { margin-bottom: 12px; }

/* Formulare: Beschreibung als Tooltip am Feldtitel (Axiom Field "info" + Tooltip, bg.default.inverse) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mit-tipp { position: relative; cursor: help; }
.feld-titel.mit-tipp { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; max-width: 100%; }
.feld-info { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 14px; height: 14px; border: 1px solid var(--border-control); border-radius: var(--radius-full);
  color: var(--muted-2); font-size: 10px; font-weight: 700; font-style: italic; line-height: 1; font-family: Georgia, serif; }
.mit-tipp:hover .feld-info { border-color: var(--focus); color: var(--focus); }
.mit-tipp::before { content: attr(data-tipp); position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 45; width: max-content; max-width: min(320px, 80vw);
  padding: 6px 8px; border-radius: var(--radius-sm); background: #252825; color: #fff; font-size: 12px; line-height: 16px; font-weight: 400; font-style: normal;
  white-space: normal; box-shadow: var(--shadow-md); opacity: 0; transform: translateY(2px); pointer-events: none; transition: opacity var(--dauer-sm), transform var(--dauer-sm); }
.mit-tipp:hover::before, .feld:focus-within > .mit-tipp::before { opacity: 1; transform: none; }

/* API-Dokumentation (/api/v1/docs) */
body.doku-seite { display: block; }
.doku { max-width: 1040px; margin: 0 auto; padding: 24px 16px 64px; display: grid; gap: 16px; }
.doku-kopf { display: flex; align-items: center; gap: 12px; }
.doku-kopf h1 { margin: 0; }
.doku-kopf p { margin: 0; }
.doku-links { display: flex; flex-wrap: wrap; gap: 8px; }
.doku-code { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 12px; }
.doku-code pre { flex: 1; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.doku-tabelle { width: 100%; margin: 6px 0 10px; }
.doku-tabelle td, .doku-tabelle th { vertical-align: top; }
.doku-endpunkte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 8px 0; }
.doku-suche { max-width: 360px; }
.doku-gruppe { margin-top: 18px; }
.doku-endpunkt { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); margin: 6px 0; }
.doku-endpunkt > summary { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.doku-endpunkt > summary::-webkit-details-marker { display: none; }
.doku-endpunkt[open] > summary { border-bottom: 1px solid var(--line-soft); }
.doku-inhalt { padding: 10px 14px 12px; }
.doku-inhalt h4 { margin: 10px 0 4px; color: var(--text); }
.doku-methode { min-width: 58px; text-align: center; padding: 1px 6px; border-radius: var(--radius-sm); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; background: var(--panel-2); }
.doku-methode.m-get { background: var(--bg-info-subtle); color: var(--info); }
.doku-methode.m-post { background: var(--accent-subtle); color: var(--success-text); }
.doku-methode.m-put, .doku-methode.m-patch { background: var(--bg-warning-subtle); color: var(--warn-text); }
.doku-methode.m-delete { background: var(--bg-error-subtle); color: var(--danger); }
.doku-pfad { font-size: 13px; }
.doku-kurz { color: var(--muted); font-size: 13px; }

/* Tab-Layout: Formulargruppen im 12er-Raster (form_groups.layout) */
.tab-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--abstand); }
.tab-zelle { grid-column: span var(--span, 12); min-width: 0; container-type: inline-size; }
.tab-zelle.neue-zeile { grid-column-start: 1; }
.tab-zelle > .karte { margin-bottom: 0; height: 100%; }
/* Schmale Karten: Felder untereinander statt gequetscht nebeneinander */
@container (max-width: 520px) { .tab-zelle .raster > .zelle { grid-column: span 12; } }
@media (max-width: 900px) { .tab-zelle { grid-column: span 12; } .tab-zelle.neue-zeile { grid-column-start: auto; } }

/* Tab-Designer (Verwaltung › Tabs › Layout) */
.drawer.breit { width: min(1040px, 100%); }
.tl-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; padding: 12px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--bg-neutral);
  background-image: repeating-linear-gradient(90deg, transparent 0 calc((100% - 110px) / 12), rgb(95 147 31 / .06) calc((100% - 110px) / 12) calc((100% - 110px) / 12 + 10px)); }
.tl-block { grid-column: span var(--span, 12); min-width: 0; display: grid; gap: 6px; align-content: start; min-height: 96px; padding: 10px 12px; border: 1px solid var(--border-control);
  border-radius: var(--radius); background: var(--panel); cursor: grab; box-shadow: var(--shadow-sm); }
.tl-block.neue-zeile { grid-column-start: 1; }
.tl-block.entwurf { border-style: dashed; opacity: .8; }
.tl-block.zieht { opacity: .4; }
.tl-block.ueber { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 1px; }
.tl-kopf { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tl-kopf strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-kopf .griff { color: var(--disabled); }
.tl-steuer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.tl-steuer select { width: auto; min-width: 120px; }
.tl-kopf .btn-icon { min-width: 24px; padding: 0 6px; }

/* Anmeldung: Single Sign-on und Zwei-Faktor */
.auth-sso { margin-top: 14px; }
.auth-trenner { display: flex; align-items: center; gap: 10px; color: var(--muted-2); font-size: 12.5px; margin-bottom: 12px; }
.auth-trenner::before, .auth-trenner::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
.auth-sso-knoepfe { display: grid; gap: 8px; }
.auth-sso-knopf { width: 100%; }
.zf-qr { display: block; width: 180px; height: 180px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.zf-geheimnis { font-family: var(--mono); letter-spacing: .08em; user-select: all; }
.zf-backup { display: grid; grid-template-columns: repeat(2, max-content); gap: 4px 24px; font-family: var(--mono); font-size: 14px; padding: 12px 14px; background: var(--bg-neutral); border-radius: var(--radius); }
.zf-auflage { max-width: 560px; margin: 40px auto; }
body.auflage #sidebar, body.auflage .topbar { display: none; }

/* Haushalte und Beziehungen */
.bz-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bz-liste li { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.bz-liste li > .small.muted:last-child, .bz-liste li > div.small { flex-basis: 100%; }
.bz-vorbei { opacity: .6; }
.bz-punkt { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.bz-weg { margin-left: auto; font-size: 16px; text-decoration: none; color: var(--muted); }
.bz-rolle { width: auto; min-width: 140px; margin-left: auto; }
.bz-wahl { display: flex; width: 100%; justify-content: flex-start; margin: 4px 0; text-align: left; }
.bz-netz { width: 100%; height: auto; max-height: 420px; }
.bz-netz .bz-mitte { fill: var(--accent-bg); stroke: var(--success-text); stroke-width: 2; }
.bz-netz .bz-knoten { fill: var(--panel); stroke: var(--border-control); stroke-width: 2; }
.bz-netz .bz-fern { fill: var(--panel-2); stroke: var(--line); }
.bz-netz a:hover circle { stroke: var(--focus); }
.bz-netz .bz-text { font-size: 12px; fill: var(--text); }
.bz-netz .bz-text-fern { font-size: 10px; fill: var(--muted); }

/* Eigene Bereiche */
.avatar.avatar-bereich { width: 40px; height: 40px; border-radius: var(--radius-md, 8px); }
.avatar.avatar-bereich .ax-icon, .bereich-icon-vorschau .ax-icon { width: 22px; height: 22px; fill: currentColor; }
.bereich-icon-vorschau { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: var(--radius-md, 8px); background: var(--accent-subtle); color: var(--accent); flex: none; }
td .ax-icon { width: 18px; height: 18px; fill: currentColor; vertical-align: middle; }
.verknuepft-liste { margin: 4px 0 0; padding-left: 18px; }
.verknuepft-liste li { margin: 2px 0; }
.nav-sortier { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; max-width: 640px; }
.nav-sortier-zeile { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border-subtle, #e5e7eb); border-radius: 6px; background: var(--bg-default, #fff); cursor: grab; }
.nav-sortier-zeile.zieht { opacity: .5; }
.nav-sortier-icon { display: inline-flex; color: var(--fg-secondary, #555); }
.nav-sortier-icon .ax-icon { width: 18px; height: 18px; }

/* Torte und Kreuztabelle (Berichte). Kategorien-Palette, geprueft auf hellem und dunklem Grund */
:root { --kat-1: #2a78d6; --kat-2: #e3891c; --kat-3: #2e9d6b; --kat-4: #c2448f; --kat-5: #7a5ad6; --kat-6: #1f9eb3; --kat-7: #b5832a; --kat-x: #9aa3ad; }
.dia-torte { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.dia-torte svg { width: 180px; height: 180px; flex: none; }
.dia-torte-stueck { fill: none; stroke-width: 28; }
.dia-torte-summe { font-size: 16px; font-weight: 700; fill: var(--text); }
.k1 { --k: var(--kat-1); } .k2 { --k: var(--kat-2); } .k3 { --k: var(--kat-3); } .k4 { --k: var(--kat-4); } .k5 { --k: var(--kat-5); } .k6 { --k: var(--kat-6); } .k7 { --k: var(--kat-7); } .kx { --k: var(--kat-x); }
.dia-torte-stueck { stroke: var(--k); }
.dia-legende { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 200px; flex: 1; }
.dia-legende li { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; font-size: 13px; }
.dia-legende-punkt { width: 10px; height: 10px; border-radius: 3px; background: var(--k); }
.dia-legende-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dia-legende-wert { font-variant-numeric: tabular-nums; color: var(--muted); }
.kreuz-tabelle { border-collapse: collapse; font-size: 13px; }
.kreuz-tabelle th, .kreuz-tabelle td { padding: 6px 10px; border-bottom: 1px solid var(--border, #e5e7eb); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kreuz-tabelle th:first-child, .kreuz-tabelle td:first-child { text-align: left; }
.kreuz-tabelle tfoot td, .kreuz-tabelle .summe { font-weight: 600; }
.kreuz-scroll { overflow-x: auto; }
.bericht-layout { display: grid; grid-template-columns: minmax(320px, 400px) 1fr; gap: var(--abstand, 16px); align-items: start; }
@media (max-width: 1000px) { .bericht-layout { grid-template-columns: 1fr; } }
.bericht-editor .feld { margin-bottom: 10px; }
.bericht-editor h3 { margin: 14px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.bericht-zeile { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.bericht-zeile > select, .bericht-zeile > input { flex: 1; min-width: 0; }
.bericht-chip { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--border, #e5e7eb); border-radius: 6px; margin-bottom: 4px; font-size: 13px; background: var(--panel, #fff); }
.bericht-chip .flex-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.darstellung-wahl { display: flex; gap: 4px; flex-wrap: wrap; }
.darstellung-wahl .btn[aria-pressed="true"] { background: var(--accent-subtle); border-color: var(--accent); color: var(--accent); }

/* Massenaktionen: Auswahl in Tabellen */
.tbl-wahl { width: 36px; text-align: center; }
.tbl-wahl input { margin: 0; }
.tbl-auswahl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; margin: 0 0 8px; border-radius: 8px; background: var(--accent-subtle); border: 1px solid var(--accent); font-size: 13px; }
.tbl tr.gewaehlt td { background: var(--accent-subtle); }
.aufgabe-ueberfaellig { color: var(--fg-error, #c0392b); font-weight: 600; }

/* Kommentare */
.kommentar-zahl:not(:empty) { margin-left: 6px; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.btn-icon-links { display: inline-flex; margin-right: 6px; }
.btn-icon-links .ax-icon { width: 16px; height: 16px; }
.kommentar-eingabe { position: relative; margin-bottom: 16px; }
.kommentar-eingabe textarea { width: 100%; }
.erwaehn-liste { position: absolute; z-index: 20; left: 0; right: 0; top: 76px; margin: 0; padding: 4px; list-style: none; background: var(--panel, #fff); border: 1px solid var(--border-control, #ccc); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.erwaehn-liste li { padding: 6px 8px; border-radius: 4px; cursor: pointer; }
.erwaehn-liste li:hover, .erwaehn-liste li:first-child { background: var(--accent-subtle); }
.kommentar { padding: 10px 0; border-top: 1px solid var(--border, #e5e7eb); }
.kommentar-text { margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.erwaehnung { color: var(--accent); font-weight: 600; }
.historie-liste { list-style: none; margin: 8px 0 0; padding: 0; }
.historie-liste li { padding: 8px 0; border-top: 1px solid var(--border, #e5e7eb); }
.historie-liste li.aktuell { font-weight: 600; }
.historie-aktionen { display: flex; gap: 12px; margin-top: 2px; font-weight: normal; }
.webhook-ereignisse { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px 16px; }
code.geheimnis { display: block; padding: 10px; background: var(--bg-neutral, #f3f4f6); border-radius: 6px; word-break: break-all; user-select: all; }
.mail-vorschau { margin-top: 12px; padding: 12px; border: 1px solid var(--border, #e5e7eb); border-radius: 8px; background: var(--bg-neutral, #f8f9fa); }
.mail-text { white-space: pre-wrap; font-family: inherit; margin: 8px 0 0; }
.bericht-versand { margin-top: 12px; }
.bericht-versand summary { cursor: pointer; }
.versand-empfaenger { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; margin: 4px 0; max-height: 160px; overflow: auto; }
.bericht-versand .bericht-zeile { flex-wrap: wrap; }
.bericht-versand .bericht-zeile > select { flex: 1 1 130px; }

/* Kalender */
.kal-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.kal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--border, #e5e7eb); border-left: 1px solid var(--border, #e5e7eb); background: var(--panel, #fff); border-radius: 8px; overflow: hidden; }
.kal-wochentag { padding: 6px 8px; font-size: 12px; font-weight: 600; color: var(--muted); border-right: 1px solid var(--border, #e5e7eb); border-bottom: 1px solid var(--border, #e5e7eb); background: var(--bg-neutral, #f8f9fa); }
.kal-tag { min-height: 110px; padding: 4px; border-right: 1px solid var(--border, #e5e7eb); border-bottom: 1px solid var(--border, #e5e7eb); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kal-woche .kal-tag { min-height: 360px; }
.kal-tag.fremd { background: var(--bg-neutral, #f8f9fa); color: var(--muted); }
.kal-tag.heute .kal-datum { background: var(--accent); color: #fff; border-radius: 10px; padding: 0 7px; align-self: flex-start; }
.kal-datum { font-size: 12px; font-weight: 600; margin-bottom: 2px; }
.kal-eintrag { display: flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 5px; border-radius: 4px; text-decoration: none; color: var(--text); background: var(--accent-subtle); min-width: 0; }
.kal-eintrag:hover { filter: brightness(.96); }
.kal-eintrag.termin { background: #e8f1fb; }
.kal-eintrag.erledigt .kal-text { text-decoration: line-through; color: var(--muted); }
.kal-eintrag.ueberfaellig { background: #fdecea; }
.kal-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-punkt { width: 6px; height: 6px; border-radius: 3px; background: var(--accent); flex: none; }
.kal-eintrag.termin .kal-punkt { background: #2a78d6; }
.kal-zeit { font-variant-numeric: tabular-nums; color: var(--muted); flex: none; }
.kal-leer { grid-column: 1 / -1; padding: 12px; margin: 0; }
.kal-tagliste { display: flex; flex-direction: column; gap: 6px; }
.kal-tagliste .kal-eintrag { font-size: 14px; padding: 6px 8px; }
@media (max-width: 700px) {
  .kal-woche { grid-template-columns: 1fr; }
  .kal-woche .kal-wochentag { display: none; }
  .kal-woche .kal-tag { min-height: 0; }
  .kal-monat .kal-tag { min-height: 64px; }
  .kal-monat .kal-text { display: none; }
}
.qd-serie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }
.qd-paar { grid-template-columns: 24px 1fr; }
.qd-paar > :not(.qd-wahl) { grid-column: 2; }
.qd-wahl { grid-column: 1; grid-row: 1 / span 3; align-self: start; margin-top: 2px; }

/* Handy (installierbare App): Seitenleiste zum Ausklappen, untere Leiste mit den haeufigsten Punkten */
.topbar-menue, .mobil-leiste { display: none; }
.offline-seite { max-width: 420px; margin: 15vh auto; padding: 24px; text-align: center; }
.offline-seite .logo { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: #ABFF44; font-weight: 700; margin-bottom: 12px; }
@media (max-width: 600px) {
  .topbar-menue { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 40px; padding: 0 9px; border: 0; background: transparent; cursor: pointer; flex: none; }
  .topbar-menue span { display: block; height: 2px; background: var(--text); border-radius: 1px; }
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: 270px !important; transform: translateX(-105%); transition: transform .2s ease; box-shadow: 0 0 30px rgb(0 0 0 / .2); }
  .sidebar.offen { transform: none; }
  .sidebar .nav-label, .sidebar .nav-header-text, .sidebar .nav-group-trigger, .sidebar .konto-text { display: revert; }
  .sidebar .nav-item, .sidebar .nav-account-item, .sidebar .nav-header { justify-content: flex-start; }
  #sidebarToggle { display: none; }
  .sidebar-schleier:not([hidden]) { position: fixed; inset: 0; z-index: 55; background: rgb(0 0 0 / .35); }
  .app-main { padding: 12px 12px calc(84px + env(safe-area-inset-bottom)); }
  .topbar { padding: 6px 10px; gap: 6px; }
  .mobil-leiste { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: var(--panel, #fff); border-top: 1px solid var(--line, #e5e7eb); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
  .mobil-leiste a, .mobil-leiste button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; font-size: 11px; color: var(--muted); text-decoration: none; background: none; border: 0; cursor: pointer; }
  .mobil-leiste a.active { color: var(--text); font-weight: 600; }
  .mobil-leiste .nav-icon { width: 22px; height: 22px; }
  .mobil-plus-zeichen { display: grid; place-items: center; width: 36px; height: 36px; margin-top: -14px; border-radius: 18px; background: #ABFF44; color: #202320; font-size: 24px; font-weight: 600; box-shadow: 0 2px 8px rgb(0 0 0 / .15); }
  .tbl-werkzeuge { flex-wrap: wrap; }
  .drawer { width: 100vw !important; max-width: 100vw; }
}
@media (display-mode: standalone) { .topbar { padding-top: max(8px, env(safe-area-inset-top)); } }
/* Schnell erfassen */
.schnell { max-width: 560px; margin: 0 auto; }
.schnell-aktionen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.schnell-aktionen .btn { height: 64px; font-size: 15px; justify-content: center; flex-direction: column; gap: 4px; }
.schnell-aktionen .btn { min-width: 0; padding-inline: 8px; }
.schnell-aktionen .btn span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schnell-treffer:empty { display: none; }
.schnell-kontakt { display: flex; align-items: center; gap: 10px; }
.schnell-treffer { display: flex; flex-direction: column; }
.schnell-treffer-zeile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--border-subtle, #e5e5e5); background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; min-height: 48px; }
.schnell-treffer-zeile:hover { background: var(--bg-hover, rgba(0,0,0,.04)); }


/* ===========================================================================
   CPQ-Ergaenzungen. Nur Axiom-Token von oben, keine eigenen Farben.
   =========================================================================== */
.ziffern { font-variant-numeric: tabular-nums; white-space: nowrap; }
.untertitel { margin: 4px 0 0; max-width: 820px; }
.karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.karte-kopf h2 { margin: 0; }

/* Vorschau-Kennzeichnung (Axiom Banner, intent information/warning) */
.badge-vorschau { background: var(--bg-info-subtle); color: var(--info); border-color: var(--info); }
.banner { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: var(--radius); margin-bottom: var(--abstand); border: 1px solid transparent; }
.banner p { margin: 2px 0 0; }
.banner-icon { display: flex; flex: none; margin-top: 1px; }
.banner-icon .ax-icon { width: 20px; height: 20px; }
.banner-info { background: var(--bg-info-subtle); color: var(--info); border-color: rgb(3 105 136 / 0.25); }
.banner-info p { color: var(--text); }
.banner-warn { background: var(--bg-warning-subtle); color: var(--warn-text); border-color: var(--border-warning); }
.banner-warn p { color: var(--text); }
.vorschau-bereich { margin-top: 8px; }
.vorschau-trenner { display: flex; align-items: center; gap: 12px; margin: 8px 0 var(--abstand); color: var(--info); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.vorschau-trenner::before, .vorschau-trenner::after { content: ''; flex: 1; border-top: 1px dashed var(--info); opacity: .5; }

/* Kennzahlen */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--abstand); margin-bottom: var(--abstand); }
.kennzahl { margin: 0; padding: 16px 18px; }
.kennzahl .label { color: var(--muted); font-size: 12.5px; }
.kennzahl .zahl { font-size: 26px; font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kennzahl .hint { margin-top: 2px; }
.kennzahl-warn { border-left: 3px solid var(--border-warning); }
.kennzahl-error { border-left: 3px solid var(--danger-border); }

/* Kompakte Listen (Dashboard, Reiter) */
.liste-kompakt { list-style: none; margin: 0; padding: 0; }
.liste-kompakt > li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.liste-kompakt > li:first-child { border-top: 0; }
.liste-kompakt a { text-decoration: none; color: var(--text); }
.liste-kompakt a:hover strong { color: var(--accent); text-decoration: underline; }
.kommentar-zeile { grid-template-columns: 120px minmax(0, 1fr) auto !important; }
@media (max-width: 700px) { .liste-kompakt > li, .kommentar-zeile { grid-template-columns: 1fr !important; } }

/* Einfache Tabellen (feste Datenmengen) */
.tbl.einfach th.rechts, .tbl.einfach td.rechts { text-align: right; }
.tbl.einfach tfoot td { border-bottom: 0; border-top: 2px solid var(--line); padding-top: 12px; }
.tbl.einfach tr.optional td { color: var(--muted); background: repeating-linear-gradient(135deg, transparent 0 8px, var(--bg-neutral) 8px 9px); }
.tbl.einfach tr.position-detail > td { background: var(--panel-2); padding: 12px 16px 14px 48px; }
.tbl.einfach tr[aria-expanded="true"] td { background: var(--accent-subtle); }
.produkt-zelle { display: flex; flex-direction: column; gap: 3px; }
.produkt-zelle .chips { margin-top: 2px; }
.pos-wasserfall .verlauf-felder th { width: 40%; }
.pos-wasserfall tr.wf-ende th, .pos-wasserfall tr.wf-ende td { font-weight: 700; color: var(--text); border-top: 1px solid var(--line); }
.staffel { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.staffel li { display: flex; justify-content: space-between; gap: 16px; max-width: 260px; }
.code-block { background: var(--bg-neutral); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; font-family: var(--mono); font-size: 12.5px; overflow-x: auto; white-space: pre; }

/* Status-Automat des Angebots (Axiom Stepper-Muster) */
.status-leiste { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0 0 var(--abstand); padding: 12px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.status-leiste > li { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.status-leiste > li:not(:last-child):not(.seitenzustand)::after { content: ''; width: 36px; height: 1px; background: var(--line); margin: 0 10px; }
.status-punkt { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; border-radius: var(--radius-full); border: 1px solid var(--border-control); background: var(--panel); font-size: 12px; font-weight: 600; color: var(--muted); }
.status-punkt .ax-icon { width: 16px; height: 16px; }
.status-leiste > li.erledigt { color: var(--text); }
.status-leiste > li.erledigt .status-punkt { background: var(--accent-subtle); border-color: var(--border-success); color: var(--success-text); }
.status-leiste > li.aktuell { color: var(--text); font-weight: 600; }
.status-leiste > li.aktuell .status-punkt { background: var(--accent-bg); border-color: transparent; color: var(--accent-fg); }
.status-leiste > li.seitenzustand { margin-left: 12px; }

/* Angebots-Builder: Haupt- und Seitenspalte */
.builder-seite { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--abstand); align-items: start; }
.builder-seitenleiste { position: sticky; top: 64px; }
@media (max-width: 1100px) { .builder-seite { grid-template-columns: 1fr; } .builder-seitenleiste { position: static; } }
.summen { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 0; }
.summen dt { color: var(--muted); } .summen dd { margin: 0; text-align: right; }
.summen .gesamt { border-top: 1px solid var(--line); padding-top: 8px; font-size: 16px; font-weight: 700; color: var(--text); }
.kv-schmal { grid-template-columns: 120px 1fr; }
.ki-karte { background: var(--accent-subtle); border-color: var(--line-soft); }
.ki-karte h2 { margin: 0; } .ki-karte .flex { margin-bottom: 8px; } .ki-karte .ax-icon { color: var(--accent); }

/* Preis-Wasserfall: Balken schweben auf dem laufenden Stand */
.wasserfall { display: grid; gap: 6px; margin-bottom: 10px; }
.wf-zeile { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12.5px; }
.wf-label { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-spur { position: relative; height: 14px; background: var(--bg-neutral); border-radius: 3px; }
.wf-balken { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--border-control); }
.wf-start .wf-balken { background: var(--muted-2); }
.wf-minus .wf-balken { background: var(--danger-border); }
.wf-null .wf-balken { background: var(--line); }
.wf-ende .wf-balken { background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--border-success); }
.wf-ende .wf-label, .wf-ende .wf-wert { color: var(--text); font-weight: 700; }
.wf-wert { text-align: right; min-width: 92px; }

/* Wert je Vertragsjahr */
.jahres-balken { display: grid; gap: 8px; margin-bottom: 8px; }
.jahr { display: grid; grid-template-columns: 60px minmax(0, 1fr) 120px; gap: 10px; align-items: center; }
.jahr .ziffern { text-align: right; }
.balken-spur { height: 10px; background: var(--bg-neutral); border-radius: var(--radius-full); overflow: hidden; }
.balken-wert { height: 100%; background: var(--accent-bg); border-radius: var(--radius-full); }

/* Bundles */
.bundle-baum { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--line-soft); display: grid; gap: 6px; }
.bundle-baum .bundle-baum { margin: 6px 0 2px 6px; }
.bundle-zeile { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; padding: 6px 0; }

/* Phasen und Gates */
.phasen { list-style: none; margin: 0; padding: 0; }
.phasen > li.phase-in_arbeit { border-left: 3px solid var(--border-warning); }
.phasen > li.phase-geplant { opacity: .9; }
.gate { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gate li { display: flex; gap: 10px; align-items: flex-start; }
.gate-haken { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: none; margin-top: 1px; border: 1px solid var(--border-control); border-radius: 4px; background: var(--panel); }
.gate li.erledigt .gate-haken { background: var(--accent-bg); border-color: transparent; }
.gate-haken .ax-icon { width: 14px; height: 14px; }
.phasen-kompakt { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.phasen-kompakt li { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.phase-punkt { width: 10px; height: 10px; border-radius: var(--radius-full); border: 1px solid var(--border-control); flex: none; }
.phasen-kompakt .phase-in_arbeit { color: var(--text); font-weight: 600; }
.phasen-kompakt .phase-in_arbeit .phase-punkt { background: var(--accent-bg); border-color: var(--border-success); }

/* Ketten und Ablaeufe */
.kette { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kette li { display: flex; gap: 10px; align-items: flex-start; }
.abschnitte { margin: 0; padding-left: 20px; color: var(--muted); display: grid; gap: 2px; }

/* Dialog in der Mitte, breiter fuer zweispaltige Formulare */
.modal.modal-breit { width: min(720px, calc(100% - 32px)); }
.modal-kopf h2 { margin: 0; }

/* Einfache Tabellen: Breite nach Inhalt statt festem Layout der Datentabelle */
.tbl.einfach { table-layout: auto; }
.tbl.einfach th { padding: 9px 10px; }
.tbl.einfach td { overflow: visible; white-space: normal; }
.tbl.einfach td.ziffern { white-space: nowrap; }
.tbl.einfach td .chips { flex-wrap: wrap; }
.tbl.positionen thead th:nth-child(2) { min-width: 190px; }