/* BrassGazz CRM – Arbeitsoberfläche für den PC: Kopfleiste, Listen, Board, Detailseite, Zeitleiste, Anpassen.
   Baut auf styles.css (Grundbausteine, Farben) auf. */
:root { --chart-1: #B8346F; --chart-2: #3E8FD8; --chart-grau: #A9A1A4; --chart-raster: #EEE8E8; --accent: var(--gold); --kopf-h: 58px; --warn-text: var(--warn); }

/* ---------- Grundgerüst ---------- */
.shell { grid-template-columns: 236px 1fr; }
.side { padding: 16px 12px; }
.side .brand { flex-direction: row; text-align: left; gap: 12px; padding: 4px 6px 16px; }
.side nav a { padding: calc(7px * var(--dichte)) 10px; font-size: 14.5px; }
.nav-group { margin: 12px 10px 3px; }
.nav-zaehler { min-width: 22px; padding: 0 7px; border-radius: 999px; font-size: 12px; font-weight: 700; text-align: center; background: var(--side-hover); color: var(--side-text); }
.nav-zaehler.dringend { background: var(--err); color: var(--on-err); }
.inhalt { display: flex; flex-direction: column; min-width: 0; }
.main { max-width: 1680px; padding: 22px 28px 60px; }
.mt-s { margin-top: 10px; }
.mt-xs { margin-top: 5px; }
.center { text-align: center; }
.rechts { text-align: right; }
.links { justify-content: flex-start !important; text-align: left; }
.warn-text { color: var(--warn); }
.zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.clip { display: inline-block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.zeile { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.gedimmt { opacity: .55; }
.punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; margin-right: 4px; }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--gold-dark); cursor: pointer; text-align: left; }
.link:hover { text-decoration: underline; }
kbd { font: 600 11px/1 var(--font); padding: 3px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--surface-2); color: var(--muted); }
select.klein, input.klein { padding: 5px 8px; font-size: 13.5px; }
input.schmal { width: 110px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.field > label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.field.fehler input, .field.fehler select, .field.fehler textarea { border-color: var(--err); box-shadow: 0 0 0 3px color-mix(in srgb, var(--err) 18%, transparent); }
.pflicht { color: var(--err); }
.icon-btn.klein { width: 26px; height: 26px; font-size: 11px; }
.icon-btn:disabled { opacity: .35; cursor: default; }
.icon-btn.on { background: var(--gold-soft); color: var(--gold-dark); }
.badge.gray { background: var(--chip-bg); color: var(--muted); }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.orange { background: var(--warn-soft); color: var(--warn); }
.chip { display: inline-flex; align-items: center; gap: 5px; }
.chip.klein { padding: 3px 10px; font-size: 13px; }
.chip[style*="--chip"].on { background: color-mix(in srgb, var(--chip) 18%, var(--surface)); color: var(--text); border-color: var(--chip); }
.chip .icon-btn { width: 20px; height: 20px; margin-right: -6px; }

/* ---------- Kopfleiste ---------- */
.kopf { position: sticky; top: 0; z-index: 30; height: var(--kopf-h); display: flex; align-items: center; gap: 12px; padding: 0 28px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.kopf-suche { display: flex; align-items: center; gap: 10px; width: min(460px, 50vw); padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); color: var(--muted); font: inherit; cursor: text; }
.kopf-suche:hover { border-color: var(--gold); }
.kopf-suche span { flex: 1; text-align: left; }
.kopf-konto { border: 0; background: none; padding: 2px; border-radius: 50%; cursor: pointer; }
.kopf-konto:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 30%, transparent); }
.dropdown { position: relative; }
.dropdown-menue { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 220px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); box-shadow: 0 10px 30px rgba(0,0,0,.14); display: flex; flex-direction: column; }
.dropdown-menue.rechts { left: auto; right: 0; }
.dropdown-menue > a, .dropdown-menue > button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; background: none; font: inherit; font-size: 14px; color: var(--text); text-align: left; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.dropdown-menue > a:hover, .dropdown-menue > button:hover { background: var(--surface-2); text-decoration: none; }
.dropdown-menue > button:disabled { opacity: .45; cursor: default; }
.dropdown-kopf { padding: 6px 10px 8px; display: flex; flex-direction: column; }
.typ-ico { display: inline-grid; place-items: center; color: var(--typ, var(--muted)); vertical-align: middle; flex: none; }
.typ-ico.gross { width: 52px; height: 52px; border-radius: 14px; background: color-mix(in srgb, var(--typ) 15%, var(--surface)); }
.initialen { display: inline-grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 700; flex: none; letter-spacing: .02em; text-shadow: 0 1px 1px rgba(0,0,0,.15); vertical-align: middle; }
.benutzer-chip { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Reiter ---------- */
.reiter { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
.reiter button { border: 0; background: none; padding: 9px 14px; font: inherit; font-size: 14px; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; gap: 6px; align-items: center; }
.reiter button:hover { color: var(--text); }
.reiter button.on { color: var(--text); font-weight: 600; border-bottom-color: var(--gold); }

/* ---------- Suche ---------- */
.suche-eingabe { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--input-bg); padding: 0 10px; color: var(--muted); }
.suche-eingabe:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent); }
.suche-eingabe input { border: 0; box-shadow: none !important; flex: 1; padding-left: 0; background: transparent; }
.suche-eingabe.klein { width: 280px; }
.suche-eingabe.klein input { padding-top: 6px; padding-bottom: 6px; font-size: 14px; }
.record-suche .treffer { list-style: none; margin: 8px 0 0; padding: 0; max-height: 380px; overflow-y: auto; }
.record-suche .treffer li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.record-suche .treffer li.on, .record-suche .treffer li:hover { background: var(--surface-3); }
.record-suche .treffer li.leer { cursor: default; background: none; }
.neu-zeile { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
.record-karte { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-2); }
.suche-gross { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 14px; margin-bottom: 18px; box-shadow: var(--shadow); color: var(--muted); }
.suche-gross input { flex: 1; border: 0; font-size: 18px; padding: 10px 0; box-shadow: none !important; background: transparent; }
.suche-ergebnis { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 0 18px; align-items: start; }
.treffer-liste { list-style: none; margin: 0; padding: 0; }
.treffer-liste li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.treffer-liste li:last-child { border-bottom: 0; }
.fundstelle { color: var(--muted); margin-top: 2px; }
.fundstelle mark, .fundstelle b { background: color-mix(in srgb, var(--yellow) 55%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }

/* ---------- Listen ---------- */
.ansichten-leiste { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 12px; overflow-x: auto; }
.ansichten-leiste > button[role=tab] { border: 0; background: none; padding: 8px 12px; font: inherit; font-size: 14px; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: 5px; align-items: center; }
.ansichten-leiste > button[role=tab].on { color: var(--text); font-weight: 600; border-bottom-color: var(--gold); }
.ansicht-speichern { border: 1px dashed var(--gold); background: var(--gold-soft); color: var(--gold-dark); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; margin-left: 8px; display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
.werkzeugleiste { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.werkzeugleiste .check { margin: 0; }
.btn.aktiv { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-dark); }
.filter-leiste { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.filter-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 2px 2px 10px; border-radius: 999px; background: var(--gold-soft); border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--surface)); font-size: 13px; }
.filter-chip .link { color: var(--text); }
.filter-chip .icon-btn { width: 22px; height: 22px; }
.sammelleiste { position: sticky; top: calc(var(--kopf-h) + 6px); z-index: 20; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; margin-bottom: 10px; border-radius: var(--radius-s); background: var(--ink); color: var(--side-text); box-shadow: 0 6px 20px rgba(0,0,0,.15); }
.sammelleiste .btn { background: rgba(255,255,255,.08); border-color: transparent; color: var(--side-text); }
.sammelleiste .btn:hover { background: rgba(255,255,255,.16); }
.sammelleiste .btn.danger-text { color: #FF9C94 !important; }
.tabelle-rahmen { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; box-shadow: var(--shadow); }
.tabelle-rahmen.laedt { opacity: .6; transition: opacity .15s; }
.tabelle-rahmen .table tr:last-child td { border-bottom: 0; }
.daten-tabelle td { vertical-align: middle; }
.daten-tabelle tbody tr { cursor: pointer; }
.daten-tabelle tbody tr.gewaehlt { background: var(--gold-soft); }
.daten-tabelle th { position: sticky; top: 0; white-space: nowrap; }
.daten-tabelle th.sortierbar { cursor: pointer; user-select: none; }
.daten-tabelle th.sortierbar:hover { color: var(--text); }
.daten-tabelle th[aria-sort]::after { content: " ▲"; font-size: 9px; }
.daten-tabelle th[aria-sort=descending]::after { content: " ▼"; }
.auswahl-spalte { width: 36px; padding-right: 0 !important; }
.titel-link { font-weight: 600; color: var(--text); }
.mit-liste a { color: var(--text-2); }
.wert-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.wert-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12.5px; background: color-mix(in srgb, var(--chip, var(--muted)) 16%, var(--surface)); color: var(--text); border: 1px solid color-mix(in srgb, var(--chip, var(--muted)) 35%, var(--surface)); white-space: nowrap; }
.wert-liste { display: inline-flex; flex-direction: column; gap: 1px; }
.table td .wert-liste { flex-direction: row; flex-wrap: wrap; gap: 0 8px; }
.phase-chip { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; background: color-mix(in srgb, var(--chip, var(--info)) 14%, var(--surface)); color: color-mix(in srgb, var(--chip, var(--info)) 70%, var(--text)); }
.phase-chip.ok, .phase-chip.gewonnen, .phase-chip.erledigt { --chip: var(--ok); }
.phase-chip.red, .phase-chip.verloren { --chip: var(--err); }
.sterne { color: var(--orange); letter-spacing: 1px; }
.sterne .aus { color: var(--line); }
.ja { color: var(--ok); display: inline-flex; gap: 3px; align-items: center; }
.spalten-dialog { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.spalten-dialog h3 { margin-top: 0; }
.spalten-liste { list-style: none; margin: 0; padding: 0; max-height: 52vh; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-s); }
.spalten-liste li { display: flex; align-items: center; gap: 2px; padding: 3px 4px 3px 10px; border-bottom: 1px solid var(--line); font-size: 14px; }
.spalten-liste li:last-child { border-bottom: 0; }
.spalten-liste .icon-btn { width: 26px; height: 26px; font-size: 10px; }
.auswahl-liste { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.radio-karte { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-s); cursor: pointer; }
.radio-karte:has(input:checked) { border-color: var(--gold); background: var(--gold-soft); }

/* ---------- Board (Kanban) ---------- */
.kanban-rahmen { overflow-x: auto; padding-bottom: 8px; }
.kanban { display: flex; gap: 12px; align-items: flex-start; min-height: 60vh; }
.kanban-spalte { flex: 0 0 272px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; max-height: calc(100vh - 230px); }
.kanban-spalte.ueber { border-color: var(--gold); background: var(--gold-soft); }
.kanban-spalte > header { padding: 10px 12px 8px; border-top: 3px solid var(--chip, var(--line)); border-radius: var(--radius) var(--radius) 0 0; }
.kanban-spalte.gewonnen > header, .kanban-spalte.erledigt > header { --chip: var(--ok); }
.kanban-spalte.verloren > header { --chip: var(--err); }
.kanban-titel { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kanban-summe { font-size: 13px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.kanban-karten { padding: 4px 8px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.kanban-karte { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 9px 11px; box-shadow: 0 1px 2px rgba(0,0,0,.05); cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.kanban-karte:hover { border-color: var(--gold); }
.kanban-karte[draggable=true] { cursor: grab; }
.kanban-karte.zu-lange { border-left: 3px solid var(--warn); }
.kk-titel { font-weight: 600; color: var(--text); line-height: 1.3; }
.kk-zeile { display: flex; gap: 8px; align-items: center; font-size: 13px; flex-wrap: wrap; }
.kk-zeile.muted { color: var(--muted); }
.kk-fuss { display: flex; gap: 8px; align-items: center; margin-top: 2px; }
.kanban-leer { border: 1px dashed var(--line); border-radius: var(--radius-s); padding: 18px; text-align: center; color: var(--muted); font-size: 13px; }

/* ---------- Detailseite ---------- */
.detail { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) minmax(260px, 320px); gap: 18px; align-items: start; }
.detail-links, .detail-rechts { position: sticky; top: calc(var(--kopf-h) + 12px); max-height: calc(100vh - var(--kopf-h) - 24px); overflow-y: auto; scrollbar-width: thin; padding-bottom: 8px; }
.detail .card { margin-bottom: 14px; padding: 16px; }
.detail-kopf h1 { font-size: 21px; line-height: 1.25; overflow-wrap: anywhere; }
.dk-oben { display: flex; gap: 12px; align-items: flex-start; }
.dk-typ { font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.dk-typ a { color: var(--muted); }
.dk-zusatz { color: var(--muted); font-size: 14px; margin-top: 2px; }
.dk-aktionen { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 10px; }
.dk-meta { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.dk-owner { display: flex; flex-direction: column; gap: 3px; }
.dk-owner select { padding: 5px 8px; }
.dk-kategorien { display: flex; flex-direction: column; gap: 3px; }
.dk-kategorien .wert-chips { align-items: center; }
.feld-karte header { display: flex; align-items: center; gap: 6px; }
.feld-karte header .icon-btn { width: 28px; height: 28px; }
.fk-titel { font-weight: 700; color: var(--text); flex: 1; display: inline-flex; gap: 6px; align-items: center; }
.feld-karte.zu .fk-titel svg { transform: rotate(-90deg); }
.feld-karte:not(.zu) header { margin-bottom: 8px; }
.feld-liste { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.fl-zeile { display: grid; grid-template-columns: 112px 1fr; gap: 10px; font-size: 14px; }
.fl-zeile dt { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.fl-zeile dt .link { color: var(--muted); }
.fl-zeile dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.fk-form .form-grid { grid-template-columns: 1fr; gap: 10px; }
.feld-historie { list-style: none; margin: 0; padding: 0; }
.feld-historie li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.adresse { display: flex; flex-direction: column; }
.phasen { padding: 12px 14px !important; }
.phasen-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.phasen-leiste { list-style: none; display: flex; margin: 0; padding: 0; gap: 3px; }
.phasen-leiste li { flex: 1; min-width: 0; }
.phasen-leiste button { width: 100%; border: 0; padding: 8px 14px 8px 18px; font: inherit; font-size: 13px; font-weight: 600; background: var(--chip-bg); color: var(--text-2); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); }
.phasen-leiste li:first-child button { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); border-radius: 7px 0 0 7px; padding-left: 12px; }
.phasen-leiste li.erledigt button { background: color-mix(in srgb, var(--gold) 28%, var(--surface)); }
.phasen-leiste li.aktuell button { background: var(--btn-grad); color: var(--on-gold); }
.phasen-leiste li.zu button { opacity: .6; }
.phasen-leiste button:hover:not(:disabled) { filter: brightness(.95); }
.phasen-leiste button:disabled { cursor: default; }
.phasen-ende { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.btn.gruen { color: var(--ok); }
.btn.gruen.on, .btn.gruen.on:disabled { background: var(--ok); color: var(--on-ok); opacity: 1; border-color: var(--ok); }
.btn.rot { color: var(--err); }
.btn.rot.on, .btn.rot.on:disabled { background: var(--err); color: var(--on-err); opacity: 1; border-color: var(--err); }
.reiter-karte { padding-top: 6px !important; }
.reiter-karte > .reiter { margin: 0 -16px 14px; padding: 0 10px; }
.kennzahlen-karte h3, .verkn-karte h3 { margin-top: 0; }
.kz-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.kz { display: flex; flex-direction: column; min-width: 0; }
.kz-wert { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.25; overflow-wrap: anywhere; }
.kz-label { font-size: 12px; color: var(--muted); }
.verkn-karte header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.verkn-karte header .icon-btn { width: 28px; height: 28px; }
.verkn-karte ul { list-style: none; margin: 0; padding: 0; }
.verkn-zeile { display: flex; gap: 6px; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid var(--line); }
.verkn-zeile:last-child { border-bottom: 0; }
.verkn-zeile.beendet, .verkn-zeile.archiviert { opacity: .6; }
.verkn-rollen { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.verkn-rollen .chip { padding: 1px 8px; font-size: 12px; border-radius: 999px; background: var(--surface-2); }
.verkn-mehr { position: relative; }
.verkn-mehr > summary { list-style: none; cursor: pointer; }
.verkn-mehr > summary::-webkit-details-marker { display: none; }
.verkn-mehr-liste { position: absolute; right: 0; top: 100%; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 8px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); box-shadow: 0 4px 14px rgba(0,0,0,.12); white-space: nowrap; }
.verkn-zeile .icon-btn { width: 26px; height: 26px; opacity: 0; }
.verkn-zeile:hover .icon-btn, .verkn-zeile .icon-btn:focus-visible { opacity: 1; }
.verkn-notiz { background: var(--surface-2); border-radius: 6px; padding: 3px 7px; margin-top: 3px; }

/* ---------- Zeitleiste, Aktivitäten ---------- */
.schnell { border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-2); margin-bottom: 14px; }
.schnell-arten { display: flex; gap: 2px; padding: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.schnell-arten button { border: 0; background: none; font: inherit; font-size: 13px; padding: 5px 10px; border-radius: 6px; color: var(--muted); cursor: pointer; display: inline-flex; gap: 5px; align-items: center; }
.schnell-arten button.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.schnell textarea { width: 100%; border: 0; background: transparent; resize: vertical; min-height: 44px; box-shadow: none !important; }
.schnell-fuss { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-top: 1px solid var(--line); }
.schnell-fuss input { padding: 4px 6px; }
.zl-filter { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.zl-filter .check { margin: 0; }
.zl-ueberschrift { margin: 6px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
ol.zeitleiste { list-style: none; margin: 0 0 12px; padding: 0 0 0 4px; position: relative; }
ol.zeitleiste::before { content: ""; position: absolute; left: 18px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
ol.zeitleiste > li { position: relative; padding: 0 0 12px 0; border: 0; margin: 0; }
ol.zeitleiste > li::before { display: none; }
.zl-monat { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 6px 0 10px 40px !important; }
.zl-akt { display: flex; gap: 12px; }
.zl-icon { position: relative; z-index: 1; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--chip, var(--muted)) 16%, var(--surface)); color: var(--chip, var(--muted)); border: 2px solid var(--surface); }
.zl-inhalt { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 8px 12px; }
.zl-akt.erledigt .zl-inhalt { opacity: .65; }
.zl-akt.erledigt .zl-kopf b { text-decoration: line-through; }
.zl-akt.ueberfaellig .zl-inhalt { border-color: color-mix(in srgb, var(--err) 40%, var(--line)); }
.zl-kopf { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.zl-kopf .icon-btn { width: 26px; height: 26px; opacity: 0; }
.zl-inhalt:hover .zl-kopf .icon-btn, .zl-kopf .icon-btn:focus-visible { opacity: 1; }
.zl-text { margin-top: 4px; font-size: 14px; }
.zl-meta { margin-top: 4px; }
.zl-ereignis { display: flex; gap: 12px; align-items: flex-start; }
.zl-punkt { position: relative; z-index: 1; flex: none; width: 10px; height: 10px; margin: 5px 10px 0 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--muted); }
.akt-arten { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.akt-form textarea { width: 100%; }
.aufgaben-liste { list-style: none; margin: 0; padding: 0; }
.aufgabe-zeile { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.aufgabe-zeile:last-child { border-bottom: 0; }
.aufgabe-zeile.erledigt b { text-decoration: line-through; color: var(--muted); }
.aufgabe-zeile .link { color: var(--text); }
.aufgaben-gruppe h2 { display: flex; gap: 8px; align-items: baseline; }

/* ---------- Änderungsverlauf ---------- */
.verlauf { list-style: none; margin: 0; padding: 0; }
.vl-gruppe { padding: 10px 0; border-bottom: 1px solid var(--line); }
.vl-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.aenderungen-tabelle { border-collapse: collapse; font-size: 13.5px; width: 100%; margin-top: 4px; }
.aenderungen-tabelle th { text-align: left; font-weight: 600; color: var(--muted); padding: 3px 10px 3px 0; width: 28%; vertical-align: top; }
.aenderungen-tabelle td { padding: 3px 6px; vertical-align: top; overflow-wrap: anywhere; }
.aenderungen-tabelle td.pfeil { color: var(--muted); width: 20px; }
.aenderungen-tabelle del, .feld-historie del { color: var(--err); background: var(--err-soft); text-decoration: line-through; border-radius: 3px; padding: 0 3px; }
.aenderungen-tabelle ins, .feld-historie ins { color: var(--ok); background: var(--ok-soft); text-decoration: none; border-radius: 3px; padding: 0 3px; }
.protokoll-liste { list-style: none; margin: 0; padding: 0; }
.protokoll-liste .pk { margin-bottom: 8px; padding: 12px 14px; }

/* ---------- Beziehungsnetz ---------- */
.netz-werkzeug { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.netz-svg { width: 100%; height: auto; max-height: 560px; background: var(--surface-2); border-radius: var(--radius-s); }
.netz-kante { stroke: color-mix(in srgb, var(--muted) 45%, transparent); stroke-width: 1.5; }
.netz-knoten { cursor: pointer; }
.netz-knoten circle { fill: color-mix(in srgb, var(--typ) 70%, white); stroke: var(--surface); stroke-width: 2; }
.netz-knoten.mitte { cursor: default; }
.netz-knoten.mitte circle { fill: var(--typ); stroke: var(--gold); stroke-width: 3; }
.netz-knoten text { font-size: 11px; fill: var(--text-2); paint-order: stroke; stroke: var(--surface-2); stroke-width: 3px; }
.netz-knoten:hover circle { stroke: var(--gold); }
.netz-legende { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; margin-top: 8px; color: var(--muted); }

/* ---------- Formulare (Felder) ---------- */
.feld-gruppe { margin-bottom: 14px; }
.feld-gruppe legend { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 8px; padding: 0; }
.liste-eingabe { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.liste-zeile { display: flex; gap: 6px; align-items: center; width: 100%; }
.liste-zeile > input:first-child { flex: 2; }
.label-eingabe { flex: 1; max-width: 150px; }
.adress-eingabe { display: flex; flex-direction: column; gap: 6px; }
.plz-ort { display: grid; grid-template-columns: 110px 1fr; gap: 6px; }
.einheit-eingabe { display: flex; align-items: center; gap: 6px; }
.einheit-eingabe input { flex: 1; text-align: right; font-variant-numeric: tabular-nums; }
.chip-neu { border-radius: 999px; padding: 4px 12px; width: 150px; font-size: 14px; }
.sterne-eingabe { display: flex; gap: 2px; }
.sterne-eingabe button { border: 0; background: none; font-size: 22px; line-height: 1; padding: 2px; color: var(--line); cursor: pointer; }
.sterne-eingabe button.on { color: var(--orange); }
.neu-form .alert { margin-bottom: 16px; }

/* ---------- Filter ---------- */
.filter-editor { display: flex; flex-direction: column; gap: 10px; }
.filter-modus { font-size: 14px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.filter-modus select { padding: 4px 8px; }
.filter-zeile { display: grid; grid-template-columns: 220px 170px 1fr 34px; gap: 8px; align-items: start; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-2); }
.filter-zeile select, .filter-zeile > div > input { width: 100%; }
.filter-chips { max-height: 160px; overflow-y: auto; }
.filter-verkn { display: flex; flex-direction: column; gap: 6px; }
.zwischen { display: flex; align-items: center; gap: 6px; }
.zwischen input { flex: 1; }

/* ---------- Startseite ---------- */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kachel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; color: var(--text); }
a.kachel:hover { border-color: var(--gold); text-decoration: none; }
.k-label { font-size: 13px; color: var(--muted); }
.k-wert { font-size: 28px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.k-sub { font-size: 12.5px; color: var(--muted); }
.start-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr)); gap: 0 18px; align-items: start; }
.karte-kopf { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.karte-kopf h2 { margin: 0; display: inline-flex; gap: 8px; align-items: center; }
.einfache-liste { list-style: none; margin: 0; padding: 0; }
.einfache-liste li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.einfache-liste li:last-child { border-bottom: 0; }
.einfache-liste li > a.grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.termin-liste { list-style: none; margin: 0; padding: 0; }
.termin-liste li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.termin-liste li:last-child { border-bottom: 0; }
.termin-datum { display: flex; flex-direction: column; align-items: center; width: 48px; flex: none; line-height: 1.15; }
.termin-datum small { color: var(--muted); font-size: 11px; }
.trichter { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.trichter li { display: grid; grid-template-columns: 130px 1fr 34px 90px; align-items: center; gap: 10px; font-size: 14px; }
.tr-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-balken { height: 14px; background: var(--surface-2); border-radius: 7px; overflow: hidden; }
.tr-balken span { display: block; height: 100%; border-radius: 7px; }
.tr-zahl { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.tr-summe { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Dubletten ---------- */
.dubletten-gruppe header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.dubletten-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.dub-karte { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 12px; background: var(--surface-2); min-width: 0; overflow-wrap: anywhere; }
.merge-tabelle th, .merge-tabelle td { vertical-align: top; }
.merge-tabelle tbody th { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text-2); background: none; white-space: nowrap; }
.merge-tabelle tr.konflikt { background: color-mix(in srgb, var(--warn-soft) 60%, transparent); }
.merge-wahl { display: flex; gap: 6px; align-items: flex-start; cursor: pointer; }
.merge-wahl input { margin-top: 3px; }

/* ---------- Konto, Verwaltung ---------- */
.link-zeile { display: flex; gap: 6px; margin-top: 8px; }
.link-zeile input { flex: 1; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }

/* ---------- Anpassen ---------- */
.typ-wahl { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 14px; cursor: pointer; color: var(--text); }
.chip-btn:hover { border-color: var(--gold); }
.chip-btn.on { background: var(--ink); color: var(--side-text); border-color: var(--ink); }
.chip-btn.on .typ-ico { color: inherit; }
.felder-tabelle td { vertical-align: middle; }
.felder-tabelle .gruppen-zeile th { background: var(--surface-3); color: var(--text-2); font-size: 12px; padding-top: 7px; padding-bottom: 7px; }
.felder-tabelle tr:hover .icon-btn.klein { visibility: visible; }
fieldset.optionen { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 14px 12px; margin: 14px 0; }
fieldset.optionen legend { padding: 0 6px; font-weight: 700; font-size: 13.5px; }
.wert-zeile { margin-bottom: 6px; flex-wrap: nowrap; }
.check-reihe { display: flex; gap: 6px 20px; flex-wrap: wrap; margin-bottom: 8px; }
.check-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 12px; max-height: 220px; overflow-y: auto; padding: 4px 0; }
.check-raster .check { margin: 3px 0; }
.farb-wahl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.farbe { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; display: inline-grid; place-items: center; color: var(--muted); background: var(--surface); }
.farbe.on { box-shadow: 0 0 0 2px var(--text); }
.farbe.klein { width: 22px; height: 22px; flex: none; }
.farb-wahl input[type=color] { width: 34px; height: 30px; }
.farb-punkt-wrap { position: relative; display: inline-flex; }
.farb-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.14); width: 230px; }
.icon-wahl { display: flex; flex-wrap: wrap; gap: 4px; }
.icon-wahl .icon-btn { border: 1px solid var(--line); }
.titel-eingabe { font-size: 17px; font-weight: 700; border-color: transparent; background: transparent; padding-left: 4px; }
.titel-eingabe:hover { border-color: var(--line); }
.phasen-vorschau { display: flex; gap: 3px; margin: 10px 0 12px; overflow-x: auto; }
.phase-pfeil { flex: 1; min-width: 70px; text-align: center; padding: 6px 14px; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: color-mix(in srgb, var(--ph, var(--info)) 16%, var(--surface)); clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%, 9px 50%); }
.phase-pfeil.gewonnen, .phase-pfeil.erledigt { --ph: var(--ok); }
.phase-pfeil.verloren { --ph: var(--err); }
.bez-satz { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 10px; align-items: end; }
.kat-baum li { gap: 8px; }
.kat-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 600; font-size: 13.5px; background: color-mix(in srgb, var(--kat, var(--muted)) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--kat, var(--muted)) 40%, var(--surface)); }
.einfache-liste li > input { padding: 5px 8px; }

/* ---------- Dialoge ---------- */
.modal.wide { width: min(1100px, 96vw, calc(100vw - 24px)); max-width: none; }
.modal-body .modal-actions { position: sticky; bottom: -1px; background: var(--surface); padding-top: 12px; }

/* ---------- Breite Bildschirme / schmalere Fenster ---------- */
@media (max-width: 1280px) {
  .detail { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
  .detail-rechts { grid-column: 1 / -1; position: static; max-height: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 14px; }
  .verkn-spalte { display: contents; }
}
/* Nur zwischen Handy- und Desktopbreite: schmalere Seitenleiste. Unter 821px gilt styles.css (eine Spalte, Menü als Schublade) –
   ohne die Untergrenze blieb auf dem Handy links eine leere 200px-Spalte, weil diese Datei nach styles.css geladen wird. */
@media (min-width: 821px) and (max-width: 980px) {
  .shell { grid-template-columns: 200px 1fr; }
}
@media (max-width: 820px) { .shell { grid-template-columns: minmax(0, 1fr); } }
/* Menü-Knopf nur auf dem Handy; die Seitenleiste ist dort eine Schublade (styles.css: .side, .menu-open, .scrim) */
.kopf-menue { display: none; }
@media (max-width: 820px) {
  .kopf { padding: 0 12px; gap: 8px; }
  .kopf-menue { display: inline-flex; flex: none; }
  .kopf-suche { width: auto; flex: 1; min-width: 0; }
  .kopf-suche kbd { display: none; }
  .kopf .grow { display: none; }
  .side { height: 100dvh; box-shadow: 0 0 40px rgba(0,0,0,.3); }
}
@media (max-width: 980px) {
  .detail { grid-template-columns: minmax(0, 1fr); } .detail > * { min-width: 0; } .phasen-leiste { overflow-x: auto; }
  .detail-links { position: static; max-height: none; }
  .filter-zeile { grid-template-columns: 1fr 1fr; }
  .spalten-dialog { grid-template-columns: 1fr; }
}

/* Tabellenzellen einzeilig – lange Inhalte werden gekürzt, der volle Text steht auf der Detailseite */
.daten-tabelle td { white-space: nowrap; max-width: 340px; overflow: hidden; text-overflow: ellipsis; }

/* ---------- E-Mails ---------- */
.mail-seite { display: grid; grid-template-columns: 210px minmax(330px, 430px) minmax(0, 1fr); gap: 16px; height: calc(100vh - 44px); margin: -8px 0 -50px; }
.mail-nav, .mail-liste, .mail-ansicht { min-height: 0; overflow: auto; }
.mail-nav { display: flex; flex-direction: column; gap: 10px; padding-right: 2px; }
.mail-nav nav { display: flex; flex-direction: column; gap: 1px; }
.mail-nav nav a { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px; color: var(--text); font-size: 14px; }
.mail-nav nav a:hover { background: var(--surface-2); text-decoration: none; }
.mail-nav nav a.on { background: color-mix(in srgb, var(--gold) 16%, var(--surface)); font-weight: 600; }
.mail-nav h3 { margin: 8px 10px 0; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.mail-nav > a.small { padding: 0 10px; }
.btn.block { width: 100%; justify-content: center; }
.zahl-pille { font-size: 12px; color: var(--muted); }
.zahl-pille.stark { background: var(--gold); color: var(--on-gold); border-radius: 999px; padding: 1px 8px; font-weight: 700; }
.status-punkt { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--muted); }
.status-punkt.gruen { background: var(--ok); } .status-punkt.rot { background: var(--err); } .status-punkt.gelb { background: var(--warn); } .status-punkt.grau { background: var(--line); }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.mail-liste { display: flex; flex-direction: column; gap: 8px; border-right: 1px solid var(--line); padding-right: 14px; }
.mail-suche { position: sticky; top: 0; z-index: 2; background: var(--input-bg); }
.mail-sammel { display: flex; align-items: center; gap: 4px; padding: 4px 8px; background: var(--ink); color: var(--side-text); border-radius: var(--radius-s); position: sticky; top: 44px; z-index: 2; }
.mail-sammel .icon-btn { color: inherit; }
.thread-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.thread-zeile { display: flex; gap: 10px; align-items: flex-start; padding: 10px 10px 10px 8px; border-radius: var(--radius-s); cursor: pointer; border-left: 3px solid transparent; }
.thread-zeile + .thread-zeile { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.thread-zeile:hover { background: var(--surface-2); }
.thread-zeile.offen { background: color-mix(in srgb, var(--gold) 13%, var(--surface)); border-left-color: var(--gold); }
.thread-zeile.gewaehlt { background: color-mix(in srgb, var(--ink) 8%, var(--surface)); }
.thread-zeile > input { margin-top: 3px; opacity: .35; }
.thread-zeile:hover > input, .thread-zeile.gewaehlt > input, .thread-zeile > input:focus-visible { opacity: 1; }
.tz-inhalt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tz-kopf { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.tz-wer { color: var(--text); }
.thread-zeile.ungelesen .tz-wer, .thread-zeile.ungelesen .tz-betreff { font-weight: 700; }
.thread-zeile.ungelesen .tz-zeit { color: var(--gold-dark, var(--gold)); font-weight: 700; }
.tz-anzahl { font-size: 11.5px; border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; color: var(--muted); }
.tz-zeit { font-size: 12.5px; white-space: nowrap; }
.tz-flag { color: var(--err); }
.tz-betreff { font-size: 14px; }
.tz-aus { color: var(--muted); margin-right: 4px; }
.tz-ausschnitt { font-size: 13px; color: var(--muted); }
.tz-bezug { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.mini-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-chip.leer { border-style: dashed; color: var(--muted); background: transparent; }

.mail-ansicht { padding-right: 4px; }
.mail-leer { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); text-align: center; gap: 6px; }
.thread-ansicht { display: flex; flex-direction: column; gap: 12px; padding-bottom: 40px; }
.ta-kopf { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; position: sticky; top: 0; z-index: 3; background: var(--bg); padding: 2px 0 8px; }
.ta-kopf h2 { margin: 0; flex: 1; min-width: 240px; font-size: 21px; line-height: 1.25; }
.ta-aktionen { display: flex; gap: 6px; align-items: center; }
.btn.on { background: color-mix(in srgb, var(--ok) 15%, var(--surface)); border-color: var(--ok); }
.ta-bezug, .sch-bezug { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ta-anlegen { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ta-anlegen .chip-btn, .ta-bezug > .chip-btn, .sch-bezug .chip-btn { padding: 3px 10px; font-size: 13px; }
.bezug-chip { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 13px; padding: 2px 4px 2px 10px; }
.bezug-chip.fest { border-color: color-mix(in srgb, var(--gold) 60%, var(--line)); }
.bezug-chip a { display: inline-flex; align-items: center; gap: 5px; color: var(--text); }
.bezug-chip button { border: 0; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; }
.bezug-chip button:hover { background: var(--surface-2); color: var(--err); }
.ta-vorschlaege { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 8px 10px; background: color-mix(in srgb, var(--gold) 9%, var(--surface)); border: 1px dashed color-mix(in srgb, var(--gold) 55%, var(--line)); border-radius: var(--radius-s); color: var(--gold-dark, var(--text)); }
.vorschlag { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 13px; cursor: pointer; color: var(--text); }
.vorschlag:hover { border-color: var(--gold); }
.vorschlag.neu { border-style: dashed; }
.ta-mails { display: flex; flex-direction: column; gap: 10px; }
.mail-karte { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mail-karte.aus { border-left: 3px solid color-mix(in srgb, var(--ok) 60%, var(--line)); }
.mail-karte.zu { flex-direction: row; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; font-size: 14px; }
.mail-karte.zu:hover { background: var(--surface-2); }
.mk-kopf { display: flex; align-items: flex-start; gap: 10px; }
.mk-wer { min-width: 0; }
.mk-kopf .icon-btn { width: 30px; height: 30px; }
.icon-btn.on-flag { color: var(--err); }
.mk-details { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 0; padding: 8px 10px; background: var(--surface-2); border-radius: 8px; }
.mk-details dt { color: var(--muted); } .mk-details dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.mk-text { font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; }
.mk-html { width: 100%; border: 0; min-height: 60px; background: #fff; border-radius: 6px; }
.mk-html.hell-auf-dunkel { padding: 6px; }
.mk-fuss { display: flex; align-items: center; gap: 4px; }
.anhang-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.anhang-liste a { display: inline-flex; align-items: center; gap: 6px; max-width: 320px; border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; font-size: 13px; color: var(--text); background: var(--surface); }
.anhang-liste a:hover { border-color: var(--gold); text-decoration: none; }
.thread-ansicht.kompakt .ta-kopf { position: static; background: none; }
.thread-ansicht.kompakt .ta-kopf h2 { font-size: 17px; }
.thread-liste.im-reiter .thread-zeile > input { display: none; }
.thread-inline { padding: 8px 0 16px 12px; border-left: 3px solid var(--gold); margin: 0 0 8px 6px; }
.mail-reiter .zl-filter { margin-bottom: 8px; }

.schreiben { display: flex; flex-direction: column; gap: 6px; }
.sch-zeile { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.sch-zeile label { width: 60px; color: var(--muted); font-size: 14px; flex: none; }
.sch-zeile input, .sch-zeile select { flex: 1; border: 0; box-shadow: none !important; background: transparent; padding: 9px 0; }
.sch-text { width: 100%; min-height: 300px; font: 14.5px/1.55 var(--font); resize: vertical; margin-top: 6px; }
.sch-anhaenge { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sch-anhaenge .chip button { border: 0; background: none; cursor: pointer; color: var(--muted); padding: 0; display: grid; place-items: center; }
.modal-actions .grow { flex: 1; }

/* Postfächer verwalten */
.konto-karte { display: flex; flex-direction: column; gap: 10px; }
.konto-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.konto-kopf h3 { margin: 0; font-size: 17px; }
.konto-meldungen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.konto-meldungen li { display: flex; gap: 8px; align-items: flex-start; }
.konto-meldungen li.fehler { color: var(--err); } .konto-meldungen li.warnung { color: var(--warn); }
.fortschritt { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.fortschritt > span { display: block; height: 100%; background: var(--gold); transition: width .6s; }
.konto-zahlen { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); }
.konto-zahlen b { color: var(--text); }
.test-ergebnis { display: flex; flex-direction: column; gap: 4px; font-size: 14px; padding: 10px 12px; border-radius: var(--radius-s); background: var(--surface-2); }
.test-ergebnis .ok { color: var(--ok); } .test-ergebnis .err { color: var(--err); }
.vorlagen-wahl { display: flex; gap: 6px; flex-wrap: wrap; }
.protokoll-tabelle td, .protokoll-tabelle th { font-size: 13.5px; vertical-align: top; }
.protokoll-tabelle ul { margin: 4px 0 0; padding-left: 18px; }

@media (max-width: 1280px) { .mail-seite { grid-template-columns: 180px minmax(280px, 360px) minmax(0, 1fr); } }
@media (max-width: 980px) { .mail-seite { grid-template-columns: 1fr; height: auto; margin: 0; } .mail-nav nav { flex-direction: row; flex-wrap: wrap; } .mail-liste { border-right: 0; padding-right: 0; max-height: 50vh; } }
.ta-erkannt { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.erk-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); }
.erk-ziele { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.erk-ziele .chip-btn { padding: 3px 10px; font-size: 12.5px; }

/* ---------- Auswertungen & Diagramme ---------- */
.aw-filter { margin: 12px 0 16px; }
.aw-datum { display: inline-flex; align-items: center; gap: 6px; }
.aw-laedt { opacity: .6; transition: opacity .15s; }
.aw-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 16px; align-items: start; }
.aw-raster > .card { margin: 0; min-width: 0; }
.aw-raster > .aw-breit { grid-column: 1 / -1; }
.aw-notizen { margin-top: 10px; font-size: 13.5px; }
.aw-notizen summary { cursor: pointer; color: var(--text-2); }
.aw-geld { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin: 0; font-variant-numeric: tabular-nums; }
.aw-geld dt { color: var(--text-2); } .aw-geld dd { margin: 0; text-align: right; }
.aw-geld .aw-netto { font-weight: 700; color: var(--text); border-top: 1px solid var(--line); padding-top: 6px; }
.aw-trichter-ende td { border-top: 1px solid var(--line); }
.warn-text { color: var(--warn); }

.diagramm { position: relative; }
.dg-flaeche { position: relative; width: 100%; }
.dg-flaeche svg { display: block; overflow: visible; }
.dg-raster { stroke: var(--chart-raster); stroke-width: 1; }
.dg-basis { stroke: var(--line); stroke-width: 1; }
.dg-achse { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.dg-hover { fill: var(--surface-2); }
.dg-leer { position: absolute; inset: 0 0 24px 44px; display: grid; place-items: center; color: var(--muted); font-size: 13.5px; pointer-events: none; }
.dg-legende { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); margin: -4px 0 8px; }
.dg-legende span { display: inline-flex; align-items: center; gap: 6px; }
.dg-legende i, .dg-tipp i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.dg-tipp { position: absolute; top: 0; transform: translateX(12px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); box-shadow: var(--shadow);
  padding: 8px 10px; font-size: 13px; min-width: 150px; pointer-events: none; z-index: 2; color: var(--text); }
.dg-tipp.links { transform: translateX(calc(-100% - 12px)); }
.dg-tipp b { display: block; margin-bottom: 4px; }
.dg-tipp div { display: flex; align-items: center; gap: 6px; }
.dg-tipp .dg-zahl { margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; font-weight: 600; }
.dg-tipp .dg-summe { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; color: var(--text-2); }
.dg-tabelle { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-s); }
.dg-tabelle .table th { position: sticky; top: 0; }
.dg-tabelle tfoot th { position: sticky; bottom: 0; background: var(--surface-2); text-transform: none; color: var(--text); font-size: 13.5px; }

.balken-liste { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.balken-liste th { font-size: 11.5px; font-weight: 600; color: var(--muted); text-align: left; padding: 0 6px 6px; white-space: nowrap; }
.balken-liste td { padding: 5px 6px; border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); vertical-align: middle; }
.balken-liste tbody tr:hover td { background: var(--surface-2); }
.balken-liste .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; width: 1%; }
.balken-liste .bl-name { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.balken-liste .bl-balken { width: 45%; min-width: 80px; }
.balken-liste .bl-balken span { display: block; height: 10px; border-radius: 0 4px 4px 0; }
.auswertungen .kacheln { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* ---------- Import & Export ---------- */
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.stack > .card, .stack > section { margin: 0; }
.klein-titel { font-size: 14px; font-weight: 700; margin: 4px 0 8px; }
.daten-seite .card h2 { font-size: 16px; margin: 0; display: flex; gap: 8px; align-items: center; }
.daten-seite .card h3 { font-size: 15px; margin: 0 0 6px; display: flex; gap: 6px; align-items: center; }
.daten-seite .karte-kopf { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.daten-seite .form-grid { margin-bottom: 4px; grid-template-columns: repeat(auto-fill, minmax(260px, max-content)); }
.daten-seite .form-grid .field > select, .daten-seite .form-grid .field > input { min-width: 240px; }
.schritte { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0; flex-wrap: wrap; counter-reset: none; }
.schritte li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; color: var(--muted); font-size: 13px; background: var(--surface-2); }
.schritte li.on { color: var(--text); font-weight: 600; background: color-mix(in srgb, var(--gold) 16%, var(--surface)); }
.schritte li.erledigt { color: var(--text-2); }
.schritt-nr { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--surface); border: 1px solid var(--line); }
.schritte li.on .schritt-nr { background: var(--gold); border-color: var(--gold); color: var(--on-gold, #fff); }
.schritte li.erledigt .schritt-nr { color: var(--ok); }
.dropzone { border: 2px dashed var(--line); border-radius: var(--radius); background: var(--surface); padding: 38px 20px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; cursor: pointer; color: var(--text-2); transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone:focus-visible, .dropzone.ueber { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 6%, var(--surface)); outline: none; }
.dropzone b { color: var(--text); font-size: 15px; }
.daten-seite .hilfe-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.daten-seite .hilfe-raster p { margin: 0 0 8px; }
.zuordnung-tabelle td { vertical-align: top; }
.zuordnung-tabelle tr.gedimmt td:not(:last-child) { opacity: .55; }
.zuordnung-tabelle .beispiele { max-width: 360px; }
.zuordnung-tabelle .beispiele .wert-chip { display: inline-block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; margin: 0 4px 4px 0; }
select.voll { width: 100%; }
select.fehler { border-color: var(--warn); }
.table.kompakt td, .table.kompakt th { padding-top: 6px; padding-bottom: 6px; }
.import-aktionen { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; position: sticky; bottom: 0; background: color-mix(in srgb, var(--bg) 92%, transparent);
  padding: 10px 0; backdrop-filter: blur(4px); z-index: 2; }
.bericht .kacheln { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin-bottom: 0; }
.bericht .kachel-fehler .k-wert { color: var(--err); }
.hinweis-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.hinweis-liste li { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; padding: 6px 10px; background: var(--surface-2); border-radius: var(--radius-s); font-size: 13px; }
.vorschau-rahmen { max-height: 420px; overflow: auto; }
.hs-raster { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.hs-raster .anleitung ol { padding-left: 20px; margin: 6px 0 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.hs-raster .scopes { padding-left: 16px; margin: 6px 0 0; columns: 2; font-size: 12px; }
.hs-kopf { display: flex; gap: 12px; align-items: center; }
.hs-objekte { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.hs-objekt { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-s); cursor: pointer; background: var(--surface); }
.hs-objekt.an { border-color: color-mix(in srgb, var(--gold) 60%, var(--line)); background: color-mix(in srgb, var(--gold) 6%, var(--surface)); }
.hs-objekt.gesperrt { opacity: .6; cursor: not-allowed; }
.hs-objekt-fehler { flex-basis: 100%; }
.hs-eigene { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 20px; }
.hs-eigene h4 { margin: 8px 0 2px; font-size: 13px; color: var(--text-2); }
.hs-eigene .check { display: flex; margin: 3px 0; }
.pl-block { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px 12px; margin-top: 10px; }
.pl-kopf { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.pl-phasen { width: 100%; }
.fortschritt > span.unbestimmt { animation: fortschritt-wandern 1.4s ease-in-out infinite alternate; }
@keyframes fortschritt-wandern { from { margin-left: 0; } to { margin-left: 92%; } }
@media (prefers-reduced-motion: reduce) { .fortschritt > span.unbestimmt { animation: none; } }
.export-liste { list-style: none; padding: 0; margin: 0 0 10px; }
.export-zeile { display: flex; gap: 12px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.export-zeile:last-child { border-bottom: 0; }
tr.klickbar { cursor: pointer; }
tr.klickbar:hover td { background: var(--surface-2); }
@media (max-width: 900px) { .hs-raster { grid-template-columns: 1fr; } }

/* ---------- Mails ↔ Deals und Tickets (Zuordnung prüfen, Punkte, Läufe) ---------- */
.zu-punkte { display: inline-flex; align-items: center; gap: 6px; min-width: 74px; }
.zu-punkte > span { display: block; height: 6px; width: 48px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.zu-punkte > span > i { display: block; height: 100%; background: var(--gold); border-radius: 99px; }
.zu-punkte > span > i.sicher { background: var(--ok); }
.zu-punkte > b { font-variant-numeric: tabular-nums; font-size: 12px; }
.zu-pruefen-kopf { margin: 4px 4px 10px; }
.zu-eintrag { padding: 10px 8px; border-left: 3px solid transparent; border-radius: var(--radius-s); }
.zu-eintrag + .zu-eintrag { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.zu-eintrag.offen { background: color-mix(in srgb, var(--gold) 13%, var(--surface)); border-left-color: var(--gold); }
.zu-thread { all: unset; display: flex; flex-direction: column; gap: 2px; width: 100%; cursor: pointer; box-sizing: border-box; }
.zu-thread:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.zu-zeile { display: flex; align-items: center; gap: 8px; min-width: 0; }
.zu-vorschlag { margin: 8px 0 0 10px; padding-left: 10px; border-left: 2px solid var(--line); }
.zu-vorschlag .icon-btn { width: 28px; height: 28px; }
.zu-einstellungen { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.zu-aktionen { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.zu-h3 { font-size: 14px; margin: 16px 0 6px; }
.zu-kennzahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.zu-kennzahlen > div { background: var(--surface-2); border-radius: var(--radius-s); padding: 10px 12px; display: flex; flex-direction: column; }
.zu-kennzahlen b { font-size: 22px; font-variant-numeric: tabular-nums; }
.zu-warum { margin: 0 0 14px; border: 1px solid var(--line); border-radius: var(--radius-s); padding: 8px 12px; }
.zu-warum summary { cursor: pointer; }
.zu-warum table { margin-top: 6px; }
.zu-warum td.zahl { width: 64px; text-align: right; font-variant-numeric: tabular-nums; vertical-align: top; }
.zu-kennzahlen span { font-size: 12px; color: var(--muted); }
.zu-tabelle { max-height: 52vh; overflow: auto; margin-top: 10px; }
.schalter-zeile { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }

/* Stagetimer */
.konto-meldungen li.hinweis { color: var(--muted); }
.stagetimer-verbinden { max-width: 820px; }
.stagetimer-kuenstler { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.stagetimer-lauf { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 8px 12px; border-radius: var(--radius-s); background: var(--surface-2); }
.stagetimer-objekte { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.stagetimer-objekte legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.stagetimer-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px 24px; }
.stagetimer-block h4 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.stagetimer-reiter { padding-top: 4px; }
.stagetimer-rechnungen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.stagetimer-rechnungen li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.stagetimer-rechnungen li:last-child { border-bottom: 0; }
.stagetimer-rechnungen .zahl { text-align: right; white-space: nowrap; }
.hs-laufend-einstellungen { padding-top: 6px; border-top: 1px solid var(--line); }

/* ---------- Integrationen (Einstellungen) ---------- */
.integrationen .card { display: flex; flex-direction: column; gap: 12px; }
.int-titel { margin: 0; display: inline-flex; gap: 8px; align-items: center; font-size: 17px; }
.int-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.integrationen p { margin: 0; }
.int-karten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; }
.int-karte > a, .int-karte > div { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-s);
  color: var(--text); text-decoration: none; height: 100%; box-sizing: border-box; }
.int-karte > a:hover { background: var(--surface-2); }
.int-karte.st-geplant > div { border-style: dashed; color: var(--text-2); }
.int-karte.st-fehler > a { border-color: color-mix(in srgb, var(--err) 45%, var(--line)); }
.int-symbol { color: var(--gold-dark); padding-top: 2px; }
.int-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.int-text small { color: var(--muted); font-size: 12.5px; }
.int-text small.int-fehler, .int-fehler { color: var(--err); }
.int-schalter { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.int-schalter input { margin-top: 4px; }
.int-schalter span { display: flex; flex-direction: column; gap: 2px; }
.int-schalter small { color: var(--muted); }
.int-anleitung summary { cursor: pointer; font-weight: 600; color: var(--gold-dark); }
.int-anleitung-inhalt { margin-top: 10px; }
.int-anleitung-inhalt ol, .int-schritte { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.int-anleitung-inhalt .sn-kopier { margin-top: 4px; }
.int-code { margin: 4px 0 0; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-s);
  font: 12.5px/1.5 ui-monospace, Menlo, Consolas, monospace; white-space: pre; overflow-x: auto; tab-size: 4; }
.int-inhalt { max-height: 50vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.int-verbindungen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.int-verbindungen li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-s); }
.int-details { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 12px; }
.int-details dt { color: var(--muted); }
.int-details dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- Meetings (pages/meetings.js) ---------- */
.mt-tag { display: flex; flex-direction: column; gap: 6px; }
.mt-tag-kopf { margin: 6px 0 0; font-size: 14px; color: var(--text-2); text-transform: none; }
.mt-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mt-zeile { display: flex; gap: 14px; align-items: center; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); }
.mt-zeile.abgesagt .mt-thema { text-decoration: line-through; color: var(--muted); }
.mt-zeit { display: flex; flex-direction: column; align-items: flex-start; min-width: 64px; }
.mt-zeit b { font-size: 16px; font-variant-numeric: tabular-nums; }
.mt-zeit small, .mt-unter { color: var(--muted); font-size: 12.5px; }
.mt-inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mt-thema { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.mt-unter { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.mt-unter > * { display: inline-flex; align-items: center; gap: 4px; }
.mt-unter a { color: var(--text-2); }
.mt-aktionen { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.mt-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mt-email { display: inline-flex; gap: 6px; align-items: center; }
.mt-email input { width: 220px; }
.mt-plattformen { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-plattformen input { position: absolute; opacity: 0; pointer-events: none; }
.mt-plattformen label:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.mt-plattformen label:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.mt-frei { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; }
.mt-frei-tag { display: flex; flex-direction: column; gap: 4px; }
.mt-frei-tag b { font-size: 13px; }
.mt-frei-zeiten { display: flex; flex-wrap: wrap; gap: 4px; }
.mt-frei-zeiten .chip-btn { padding: 3px 10px; font-size: 13px; font-variant-numeric: tabular-nums; }
.mt-panel { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.mt-panel-kopf { display: flex; align-items: center; gap: 8px; }
.mt-wann, .mt-wo { display: flex; gap: 8px; align-items: center; overflow-wrap: anywhere; }
.mt-wann { font-weight: 600; }
.mt-gaeste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mt-gaeste li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13.5px; }
.mt-gaeste small { font-size: 12px; }
.mt-panel-aktionen { padding-top: 4px; border-top: 1px solid var(--line); }
.mt-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 12px; }
.mt-link { display: flex; flex-direction: column; gap: 10px; }
.mt-link.aus { opacity: .7; }
.mt-farbe { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; flex: none; }
.mt-wochenplan { border-collapse: collapse; width: 100%; }
.mt-wochenplan th { text-align: left; font-weight: 500; width: 160px; padding: 4px 8px 4px 0; vertical-align: middle; }
.mt-wochenplan td { padding: 4px 0; }
.mt-wochenplan tr + tr { border-top: 1px solid var(--line); }
.mt-bereiche { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.mt-bereich { display: inline-flex; gap: 4px; align-items: center; }
.mt-bereich input { width: auto; }
.mt-frage { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-s); display: flex; flex-direction: column; gap: 6px; }
.mt-frage .icon-btn svg { transform: rotate(-90deg); }
.mt-frage .mt-runter svg { transform: rotate(90deg); }
.mt-konto { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-s); }
.mt-konto td:not(:first-child), .mt-konto th:not(:first-child) { text-align: center; }

/* ---------- Telefonie: Anrufkarten (oben rechts), Anrufliste, Einrichtung ---------- */
.tel-live { position: fixed; top: calc(var(--kopf-h, 64px) + 12px); right: 20px; z-index: 90; width: min(360px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 100px); overflow-y: auto; }
.tel-karte { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--info); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.16); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.tel-karte.tel-klingelt { border-left-color: var(--gold); animation: tel-klingeln 1.6s ease-in-out infinite; }
.tel-karte.tel-verbunden { border-left-color: var(--ok); }
.tel-karte.tel-verpasst { border-left-color: var(--err); }
.tel-karte.tel-nach { border-left-color: var(--violet, var(--gold)); }
@keyframes tel-klingeln { 0%, 100% { box-shadow: 0 10px 30px rgba(0,0,0,.16); } 50% { box-shadow: 0 10px 30px rgba(0,0,0,.16), 0 0 0 4px color-mix(in srgb, var(--gold) 30%, transparent); } }
@media (prefers-reduced-motion: reduce) { .tel-karte.tel-klingelt { animation: none; } }
.tel-kopf { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.tel-kopf .icon-btn { margin-left: auto; }
.tel-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text-2); min-width: 0; white-space: nowrap; }
.tel-leitung { background: var(--chip-bg); border-radius: 999px; padding: 1px 8px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tel-uhr { font-variant-numeric: tabular-nums; }
.tel-wer { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tel-name { font-size: 17px; font-weight: 700; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
a.tel-name:hover { text-decoration: underline; }
.tel-kontext { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.tel-kontext li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tel-kontext a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tel-notiz { width: 100%; resize: vertical; min-height: 52px; }
.tel-knoepfe { gap: 6px; }
.tel-nachbereiten { display: flex; flex-direction: column; gap: 8px; }
.tel-nachbereiten .field { margin: 0; }
.tel-nachbereiten .check { margin: 0; }
.tel-wv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }

.tel-suche { width: 240px; }
.tel-suche input { padding-top: 6px; padding-bottom: 6px; font-size: 14px; }
.tel-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tel-zeile { display: flex; gap: 14px; align-items: center; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); }
.tel-zeile.offen { border-color: color-mix(in srgb, var(--err) 45%, var(--line)); background: color-mix(in srgb, var(--err-soft) 45%, var(--surface)); }
.tel-richtung { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--chip-bg); color: var(--text-2); }
.tel-richtung.ein { color: var(--ok); background: var(--ok-soft); }
.tel-richtung.verpasst { color: var(--err); background: var(--err-soft); }
.tel-fakten .tel-richtung { width: 22px; height: 22px; vertical-align: middle; }
.tel-zeit { display: flex; flex-direction: column; min-width: 64px; font-variant-numeric: tabular-nums; }
.tel-zeit small { color: var(--muted); font-size: 12px; }
.tel-inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tel-wer-link { font-weight: 600; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
a.tel-wer-link:hover { text-decoration: underline; }
.tel-unter { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; color: var(--muted); min-width: 0; }
.tel-unter span { display: inline-flex; align-items: center; gap: 4px; }
.tel-notiz-kurz { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block !important; }
.tel-fakten { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.tel-fakten dt { color: var(--muted); }
.tel-fakten dd { margin: 0; }
.tel-eingabe { font-size: 20px; letter-spacing: .02em; }
.tel-port { width: 110px; }
.tel-abschnitt { margin: 16px 0 6px; font-size: 14px; font-weight: 600; }
.tel-nummern { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.tel-nummer { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.tel-personen { display: flex; flex-wrap: wrap; gap: 0 16px; }
.tel-personen .check { margin: 2px 0; }
@media (max-width: 900px) { .nur-breit { display: none; } .tel-notiz-kurz { max-width: 200px; } }
.tel-aendern { margin-left: 10px; }

/* ---------- Nachrichten (WhatsApp, Messenger, Instagram) ---------- */
.kanal-marke { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--kanal); vertical-align: middle; letter-spacing: .01em; }
.kanal-marke.klein { padding: 0 4px; font-size: 9px; line-height: 14px; border: 2px solid var(--surface); }
.nr-bild { position: relative; flex: none; display: inline-block; }
.nr-bild img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.nr-bild-kanal { position: absolute; right: -8px; bottom: -5px; }
.nr-posteingang { display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); gap: 16px; height: calc(100vh - 255px); min-height: 460px; }
.nr-liste { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: auto; border-right: 1px solid var(--line); padding-right: 14px; }
.nr-werkzeug { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 0; background: var(--bg); padding-bottom: 6px; z-index: 1; }
.nr-werkzeug select { width: auto; }
.nr-zeilen { list-style: none; margin: 0; padding: 0; }
.nr-zeile { display: flex; gap: 12px; align-items: flex-start; padding: 10px 8px; border-radius: var(--radius-s); cursor: pointer; border-left: 3px solid transparent; }
.nr-zeile + .nr-zeile { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.nr-zeile:hover { background: var(--surface-2); }
.nr-zeile.offen { background: color-mix(in srgb, var(--gold) 13%, var(--surface)); border-left-color: var(--gold); }
.nr-zeile-inhalt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nr-zeile-kopf, .nr-zeile-text { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nr-name { font-size: 14.5px; }
.nr-zeit { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.nr-zeile-text { font-size: 13.5px; color: var(--muted); }
.nr-zeile.ungelesen .nr-name { font-weight: 700; }
.nr-zeile.ungelesen .nr-zeile-text { color: var(--text); }
.nr-zeile.ungelesen .nr-zeit { color: #1E9E52; font-weight: 700; }
.nr-ungelesen { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #25A35A; color: #fff; font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.nr-zeile-fuss { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.nr-chat-rahmen { min-height: 0; display: flex; flex-direction: column; }
.nr-chat { display: flex; flex-direction: column; min-height: 0; height: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.nr-kopf { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.nr-kopf-text { min-width: 0; }
.nr-kopf-name { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 15.5px; }
.nr-kopf-aktionen { display: flex; gap: 6px; align-items: center; }
.nr-zuweisen { width: auto; max-width: 180px; padding: 5px 8px; font-size: 13.5px; }
.nr-bezug { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.nr-verlauf { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 3px;
  background: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); }
.nr-aelter { align-self: center; margin-bottom: 8px; }
.nr-hinweis { align-self: center; max-width: 440px; text-align: center; color: var(--muted); font-size: 13.5px; padding: 30px 10px; }
.nr-tag { align-self: center; margin: 12px 0 6px; }
.nr-tag span { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 2px 12px; font-size: 12px; color: var(--muted); }
.nr-blase-zeile { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.nr-blase-zeile.folge { margin-top: 0; }
.nr-blase-zeile.aus { flex-direction: row-reverse; }
.nr-blase { position: relative; max-width: min(72%, 560px); padding: 7px 10px 5px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 1px 1px rgba(0,0,0,.04); display: flex; flex-direction: column; gap: 4px; }
.nr-blase-zeile:not(.aus):not(.folge) .nr-blase { border-top-left-radius: 4px; }
.nr-blase-zeile.aus .nr-blase { background: color-mix(in srgb, #25A35A 14%, var(--surface)); border-color: color-mix(in srgb, #25A35A 26%, var(--line)); }
.nr-blase-zeile.aus:not(.folge) .nr-blase { border-top-right-radius: 4px; }
.nr-blase.vorlage { border-style: dashed; }
.nr-blase.fehler { border-color: var(--err); }
.nr-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; line-height: 1.45; }
.nr-meta { align-self: flex-end; display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); }
.nr-haken { display: inline-flex; color: var(--muted); }
.nr-haken.gelesen { color: #2F8FE4; }
.nr-haken.fehler { color: var(--err); }
.nr-fehler { color: var(--err); }
.nr-reaktion { position: absolute; bottom: -12px; right: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0 5px; font-size: 13px; line-height: 20px; }
.nr-blase-zeile:has(.nr-reaktion) { margin-bottom: 12px; }
.nr-zitat { display: flex; flex-direction: column; border-left: 3px solid #25A35A; background: color-mix(in srgb, var(--ink) 5%, transparent); padding: 4px 8px; border-radius: 4px; font-size: 12.5px; max-width: 100%; }
.nr-vorlage-kopf { font-size: 11.5px; color: var(--muted); display: inline-flex; gap: 4px; align-items: center; }
.nr-medien { max-width: 100%; max-height: 320px; border-radius: 8px; display: block; }
.nr-sticker { width: 140px; height: 140px; object-fit: contain; }
.nr-audio audio { width: 260px; max-width: 100%; height: 36px; }
.nr-datei { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--text); min-width: 220px; }
.nr-datei:hover { text-decoration: none; background: color-mix(in srgb, var(--ink) 9%, transparent); }
.nr-antworten { opacity: 0; transition: opacity .12s; }
.nr-blase-zeile:hover .nr-antworten, .nr-antworten:focus-visible { opacity: 1; }
.nr-eingabe { border-top: 1px solid var(--line); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); }
.nr-eingabe.gesperrt { background: var(--surface-2); }
.nr-eingabe-zeile { display: flex; gap: 6px; align-items: flex-end; }
.nr-eingabe-zeile textarea { flex: 1; resize: none; min-height: 40px; max-height: 180px; padding: 9px 12px; border-radius: 20px; line-height: 1.4; }
.nr-senden { border-radius: 50%; width: 40px; height: 40px; padding: 0; justify-content: center; }
.nr-antwort-auf { display: flex; gap: 8px; align-items: center; border-left: 3px solid #25A35A; background: var(--surface-2); padding: 4px 8px; border-radius: 4px; font-size: 13px; }
.nr-fenster { font-size: 12.5px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.nr-fenster.warn { color: var(--warn); }
.nr-fenster.fehler { color: var(--err); }
.nr-vorlagen { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 16px; min-height: 280px; }
.nr-vorlagen-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow: auto; }
.nr-vorlagen-liste button { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); font: inherit; cursor: pointer; color: var(--text); }
.nr-vorlagen-liste button.on, .nr-vorlagen-liste button:hover { border-color: var(--gold); }
.nr-vorlagen-liste button.on { background: color-mix(in srgb, var(--gold) 10%, var(--surface)); }
.nr-vorlage-form .nr-blase { max-width: 100%; }
.nr-live { position: fixed; right: 20px; top: calc(var(--kopf-h, 64px) + 12px); z-index: 95; display: flex; flex-direction: column; gap: 8px; width: min(340px, calc(100vw - 32px)); }
.nr-live-karte { display: flex; align-items: flex-start; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid #25A35A; border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.16); padding: 8px 8px 8px 0; animation: nr-rein .2s ease-out; }
.nr-live-karte.kanal-messenger { border-left-color: #2F6FE4; }
.nr-live-karte.kanal-instagram { border-left-color: #C13584; }
.nr-live-inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left; background: none; border: 0; font: inherit; color: var(--text); cursor: pointer; padding: 0 0 0 12px; }
.nr-live-kopf { font-size: 12px; color: var(--muted); display: inline-flex; gap: 5px; align-items: center; }
/* Während ein Anruf läuft, haben dessen Karten Vorrang */
.tel-live ~ .nr-live { display: none; }
.nr-ohne-name { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--chip-bg); color: var(--muted); }
@keyframes nr-rein { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.nr-konten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.nr-ergebnis { margin: 0 0 6px; padding-left: 4px; list-style: none; }
.nr-lead-felder td { background: var(--surface-2); }
.nr-lead-felder dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 4px 0; font-size: 13.5px; }
.nr-lead-felder dt { color: var(--muted); }
.nr-lead-felder dd { margin: 0; }
.zl-chat-liste { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.zl-chat-liste li { display: flex; gap: 8px; align-items: baseline; position: static; }
.zl-chat-liste li::before { display: none; }
.zl-chat-liste li.aus { color: var(--text-2); }
@media (max-width: 1100px) { .nr-posteingang { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); } }
@media (max-width: 860px) { .nr-posteingang { grid-template-columns: 1fr; height: auto; } .nr-liste { border-right: 0; padding-right: 0; max-height: 45vh; } .nr-chat { height: 70vh; } .nr-vorlagen { grid-template-columns: 1fr; } }

/* ---------- Wissensdatenbank ---------- */
.wi-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.wi-kopf .grow { min-width: 220px; }
.wi-hinweise { margin: 0 0 12px; }
.wi-hinweise ul { margin: 6px 0 0; padding-left: 18px; }
.wi-abschnitt { margin-bottom: 16px; }
.wi-abschnitt h3 { font-size: 14px; margin: 0 0 4px; display: inline-flex; gap: 6px; }
.wi-abschnitt > p { margin: 0 0 6px; }
details.wi-abschnitt > summary { cursor: pointer; list-style: revert; }
.wi-liste { list-style: none; margin: 0; padding: 0; }
.wi-zeile { padding: 8px 0; border-bottom: 1px solid var(--line); }
.wi-zeile:last-child { border-bottom: 0; }
.wi-haupt { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.wi-art { flex: 0 0 120px; font-size: 13px; color: var(--muted); }
.wi-wert { min-width: 0; overflow-wrap: anywhere; }
.wi-unter { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding-left: 130px; flex-wrap: wrap; }
.wi-sicher { flex-shrink: 0; }
.wi-belege { list-style: none; margin: 6px 0 0 130px; padding: 6px 10px; background: var(--surface-2); border-radius: var(--radius-s); }
.wi-belege li { display: flex; gap: 10px; align-items: baseline; padding: 3px 0; flex-wrap: wrap; }
.wi-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.wi-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.wi-kachel { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); text-decoration: none; }
.wi-kachel b { font-size: 24px; font-variant-numeric: tabular-nums; }
.wi-kachel span { font-size: 13px; color: var(--muted); }
a.wi-kachel[href]:hover { border-color: var(--gold); }
.wi-zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 16px; }
.wi-quellen > .card, .wi-einstellungen > .card { margin-bottom: 16px; }
.wi-schalter { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; }
.wi-schalter input { margin-top: 3px; }
@media (max-width: 700px) {
  .wi-haupt { flex-wrap: wrap; }
  .wi-art { flex-basis: 100%; }
  .wi-unter, .wi-belege { padding-left: 0; margin-left: 0; }
}

/* Auftritte: vergangene Termine eingeklappt über den kommenden */
.dreh { display: inline-flex; transform: rotate(90deg); transition: transform .15s; }
.dreh.auf { transform: rotate(-90deg); }
.daten-tabelle tr.vergangen-schalter td { background: var(--surface-2); padding: 6px 12px; text-align: center; cursor: default; }
.daten-tabelle tr.vergangen td { opacity: .62; }
.daten-tabelle tr.vergangen:hover td { opacity: 1; }
.verkn-vergangen { opacity: .62; margin: 4px 0; } .verkn-vergangen:hover { opacity: 1; }

/* HubSpot: Bestand, Archiv, Notizen zerlegen */
.pfeil-zu { display: inline-flex; transition: transform .15s; }
.hs-bestand { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-3, 12px); }
.hs-bestand .link { font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.hs-bestand-liste { margin: 6px 0 0; padding-left: 18px; font-size: .9em; max-height: 240px; overflow: auto; }
.hs-werkzeug { border-top: 1px solid var(--line); padding-top: var(--s-3, 12px); }
.hs-werkzeug h3 { margin: 0 0 4px; }
.notiz-plan { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.hs-original-gruppe { margin: 10px 0 4px; font-size: .8em; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.hs-original dl { display: grid; grid-template-columns: minmax(140px, 38%) 1fr; gap: 2px 12px; margin: 0; font-size: .92em; }
.hs-original dt { color: var(--muted); overflow-wrap: anywhere; }
.hs-original dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.datei-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.datei-liste li { display: flex; gap: 8px; align-items: center; }
.hs-original > button.link { color: inherit; text-decoration: none; width: 100%; display: flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.hs-original > button.link h3 { margin: 0; }

/* Deals ↔ Auftritte zuordnen */
.kachel-warn .k-wert { color: var(--warn); }
.kachel-fehler .k-wert { color: var(--err); }
.paar-liste { display: grid; gap: 10px; }
.paar { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: grid; gap: 8px; background: var(--surface); }
.paar-kopf { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.merkmal { font-size: .8em; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.merkmal.stark { background: color-mix(in srgb, var(--ok, #2E7D4F) 14%, transparent); color: var(--text); }
.merkmal.minus { background: color-mix(in srgb, var(--err, #B3261E) 12%, transparent); color: var(--err, #B3261E); }
.paar-seiten { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: start; }
.paar-seite { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.paar-pfeil { color: var(--muted); padding-top: 18px; }
@media (max-width: 700px) { .paar-seiten { grid-template-columns: 1fr; } .paar-pfeil { display: none; } }
.zuordnung-log { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.zuordnung-log li { display: flex; gap: 10px; align-items: center; }
.abweichungen-karte { border-color: color-mix(in srgb, var(--warn) 50%, var(--line)); }
.abweichungen-karte h3 { display: flex; gap: 6px; align-items: center; margin: 0 0 6px; }

/* ---------- Eingang (Eingangs-Automatik) ---------- */
.entscheidung { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.entscheidung.kompakt { padding: 9px 11px; gap: 6px; box-shadow: none; }
.entscheidung.zurueck { opacity: .75; }
.ent-kopf { display: flex; gap: 10px; align-items: flex-start; }
.ent-quelle { display: inline-flex; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); color: var(--muted); align-items: center; justify-content: center; flex: none; }
.entscheidung.kompakt .ent-quelle { width: 22px; height: 22px; }
.ent-titel { min-width: 0; }
.ent-ausschnitt { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ent-rechts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; max-width: 50%; }
.ent-records { display: flex; flex-wrap: wrap; gap: 6px; }
.ent-aktionen { flex-wrap: wrap; gap: 6px; }
.chip-link { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12.5px; color: var(--text); }
.chip-link:hover { border-color: var(--gold); text-decoration: none; }
.chip-link.geloescht { text-decoration: line-through; color: var(--muted); }
.weg { list-style: none; margin: 0; padding: 0 0 0 4px; display: flex; flex-direction: column; gap: 5px; border-left: 2px solid var(--line); }
.weg li { display: grid; grid-template-columns: 20px 140px 1fr; gap: 6px; align-items: baseline; font-size: 13px; padding-left: 8px; }
.weg-ico { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; align-items: center; justify-content: center; background: var(--surface-2); }
.weg-ico.ok { color: var(--ok); background: var(--ok-soft); }
.weg-ico.warn { color: var(--warn); background: var(--warn-soft); }
.weg-ico.muted { color: var(--muted); }
.weg-stufe { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.weg-text { min-width: 0; overflow-wrap: anywhere; }
.weg-nein .weg-text, .weg-info .weg-text { color: var(--text-2, var(--text)); }
.stufen-liste { display: flex; flex-direction: column; }
.stufe-zeile { display: flex; gap: 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.stufe-zeile:first-child { border-top: 0; }
.code-zeile { font-size: 12.5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 5px 8px; overflow-wrap: anywhere; }
.wahl-liste .wahl { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-s); cursor: pointer; }
.wahl-liste .wahl.on { border-color: var(--gold); background: var(--surface-2); }
.wahl-liste .wahl input { margin-top: 3px; }
.wahl-liste { display: flex; flex-direction: column; gap: 6px; }
.thread-eingang { margin: 0 0 10px; }
.eingang-karte .entscheidung { border-color: transparent; background: var(--surface-2); }
button.kachel { font: inherit; text-align: left; cursor: pointer; }
button.kachel:hover, .kachel.on { border-color: var(--gold); }
@media (max-width: 700px) {
  .ent-kopf { flex-wrap: wrap; }
  .ent-rechts { max-width: none; justify-content: flex-start; }
  .weg li { grid-template-columns: 20px 1fr; }
  .weg-stufe { grid-column: 2; }
  .weg-text { grid-column: 2; }
  .stufe-zeile { flex-direction: column; align-items: stretch; gap: 8px; }
}
.entscheidung.kompakt .ent-kopf { flex-wrap: wrap; }
.entscheidung.kompakt .ent-rechts { max-width: none; width: 100%; justify-content: flex-start; }

/* ---------- Gagenvorschlag und Vorbelegung des Angebots ---------- */
.gv-karte { display: flex; flex-direction: column; gap: 8px; }
.gv-betrag { font-size: 18px; font-variant-numeric: tabular-nums; }
.rechenweg > summary { cursor: pointer; color: var(--muted); }
.rechenweg-schritte { margin: 6px 0 4px; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; overflow-wrap: anywhere; }
.rechenweg-hinweise { margin: 4px 0; padding: 0; list-style: none; color: var(--warn); display: flex; flex-direction: column; gap: 3px; }
.anhaltspunkte { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.anhaltspunkte ul { margin: 3px 0 0; padding-left: 18px; }
.gv-zeile { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.gv-zeile.markiert, .gage-zeile.gage-vorschlag td { background: var(--gold-soft); }
.vorbelegung { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 8px 10px; }
.vorbelegung > summary { cursor: pointer; }
.vb-tabelle { margin-top: 6px; }
.vb-tabelle td { vertical-align: top; }
.vb-quelle { display: inline-flex; gap: 4px; align-items: baseline; flex-wrap: wrap; }
.vorzeilen { white-space: pre-line; }
@media (max-width: 640px) {
  .vb-tabelle, .vb-tabelle tbody, .vb-tabelle tr, .vb-tabelle td { display: block; width: 100%; }
  .vb-tabelle tr { padding: 6px 0; border-bottom: 1px solid var(--line); }
  .vb-tabelle td { padding: 1px 0; border: 0; }
}
@media (max-width: 640px) {
  .angebot-dialog .positionen-tabelle { display: block; overflow-x: auto; max-width: 100%; }
}

/* ---------- Deal-Cockpit (Etappe 6) ---------- */
.lage-zahlen { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 14px; }
.cockpit-bereich { margin-bottom: 22px; }
.cockpit-bereich > h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; margin: 0 0 8px; }
.lage-liste { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.lage-zeile { border-bottom: 1px solid var(--line); border-left: 4px solid transparent; }
.lage-zeile:last-child { border-bottom: 0; }
.lage-zeile.lage-heute, .lage-zeile.lage-zusage { border-left-color: var(--err); }
.lage-zeile.lage-nachfassen { border-left-color: var(--warn); }
.lage-zeile.lage-wartet { border-left-color: var(--line); }
.lage-zeile.lage-erledigt { opacity: .75; }
.lz-haupt { display: grid; grid-template-columns: 74px minmax(170px, 1.7fr) 150px minmax(160px, 1.6fr) minmax(120px, 1fr) 80px auto; gap: 4px 14px; align-items: center; padding: 9px 14px; cursor: pointer; min-width: 0; }
.lz-haupt.lz-ticket { grid-template-columns: minmax(160px, 1.3fr) 170px minmax(160px, 1.6fr) minmax(120px, 1fr); cursor: default; }
.lz-haupt:hover { background: var(--surface-2); }
.lz-haupt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lz-haupt > * { min-width: 0; }
.lz-termin { display: flex; flex-direction: column; line-height: 1.2; }
.lz-termin small { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.lz-termin.bald b { color: var(--err); }
.lz-titel { display: flex; flex-direction: column; line-height: 1.3; }
.lz-titel a, .lz-titel .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lz-zug { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.am-zug { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.am-zug.wir { background: var(--err-soft); color: var(--err); }
.am-zug.kunde { background: var(--chip-bg); color: var(--muted); }
.lz-letztes, .lz-naechster { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
.lz-geld { text-align: right; white-space: nowrap; }
.lz-zeichen { display: flex; gap: 4px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.lz-achtung { display: inline-flex; align-items: center; gap: 2px; color: var(--warn); font-size: 12px; font-weight: 600; }
.lz-details { padding: 4px 14px 12px 92px; display: flex; flex-direction: column; gap: 8px; }
.lz-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lz-gruende { margin: 0; padding-left: 18px; }
.lz-gruende li { margin: 1px 0; }
.lz-ereignisse { list-style: none; margin: 4px 0 0; padding: 0; }
.lz-ereignisse li { padding: 2px 0; }
.neu-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.neu-karte { margin: 0; display: flex; flex-direction: column; gap: 6px; border-left: 4px solid var(--info); }
.neu-fakten { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.neu-satz { margin: 0; padding: 6px 10px; background: var(--surface-2); border-radius: var(--radius-s); font-style: italic; }
.lage-kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; margin-top: 8px; }
.lk-spalte { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lk-spalte > h3 { margin: 0 0 2px; display: flex; gap: 6px; align-items: center; }
.lk-karte { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: var(--radius-s); color: var(--text); }
.lk-karte:hover { text-decoration: none; box-shadow: var(--shadow); }
.lk-karte.lage-heute, .lk-karte.lage-zusage { border-left-color: var(--err); }
.lk-karte.lage-nachfassen { border-left-color: var(--warn); }
.lk-letztes { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Lage-Kopf auf der Deal-Seite */
.lage-kopf { display: flex; flex-direction: column; gap: 10px; }
.lk-einzeiler { margin: 0; font-size: 14.5px; }
.ablauf-leiste { list-style: none; display: flex; margin: 0; padding: 0; gap: 3px; overflow-x: auto; }
.ablauf-leiste li { flex: 1; min-width: 92px; }
.ablauf-leiste li span { display: block; padding: 6px 10px 6px 16px; font-size: 12.5px; font-weight: 600; background: var(--chip-bg); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%, 9px 50%); }
.ablauf-leiste li:first-child span { clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%); border-radius: 6px 0 0 6px; padding-left: 10px; }
.ablauf-leiste li:last-child span { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 9px 50%); border-radius: 0 6px 6px 0; }
.ablauf-leiste li.erledigt span { background: var(--ok-soft); color: var(--ok); }
.ablauf-leiste li.jetzt span { background: var(--btn-grad); color: var(--on-gold); }
.ablauf-knopf { align-self: flex-start; font-size: 15px; padding: 10px 18px; }
.lk-zusagen { border-top: 1px solid var(--line); padding-top: 8px; }
.zusagen-liste { list-style: none; margin: 6px 0 0; padding: 0; }
.zusagen-liste li { display: flex; align-items: center; gap: 8px; padding: 4px 0; min-width: 0; }
.zusagen-liste li .grow { min-width: 0; overflow-wrap: anywhere; }

/* Startseite: Meine Lage heute */
.meine-lage { grid-column: 1 / -1; }
.meine-lage .einfache-liste li a.grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-lage { flex: 0 1 45%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }

@media (max-width: 1180px) {
  .lz-haupt { grid-template-columns: 70px minmax(150px, 1.2fr) 140px minmax(150px, 1.5fr) 80px auto; }
  .lz-haupt .lz-naechster { display: none; }
}
@media (max-width: 760px) {
  .lz-haupt, .lz-haupt.lz-ticket { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "termin titel zeichen" "termin zug geld" "letztes letztes letztes" "naechster naechster naechster"; padding: 9px 12px; }
  .lz-haupt.lz-ticket { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titel" "zug" "letztes" "naechster"; }
  .lz-haupt .lz-termin { grid-area: termin; align-self: start; }
  .lz-haupt .lz-titel { grid-area: titel; }
  .lz-haupt .lz-zug { grid-area: zug; }
  .lz-haupt .lz-letztes { grid-area: letztes; }
  .lz-haupt .lz-naechster { grid-area: naechster; display: -webkit-box; }
  .lz-haupt .lz-naechster:empty { display: none; }
  .lz-haupt .lz-geld { grid-area: geld; }
  .lz-haupt .lz-zeichen { grid-area: zeichen; align-self: start; }
  .lz-details { padding: 4px 12px 12px; }
  .lz-spalten { grid-template-columns: minmax(0, 1fr); }
  .neu-liste { grid-template-columns: minmax(0, 1fr); }
  .ablauf-knopf { align-self: stretch; justify-content: center; }
  .ml-lage { display: none; }
}

/* ---------- Wissen am Ort des Gebrauchs, Beziehungsnetz (Etappe 7) ---------- */
.fakten-liste, .bekannte-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.fakten-liste li, .bekannte-liste li { overflow-wrap: anywhere; }
.bekannte-liste li { color: var(--info); }
.lk-wissen { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; background: var(--surface-2); border-radius: var(--radius-s); }
.fakten-karte h3 { display: flex; align-items: center; gap: 6px; }
.wi-korrektur { margin-top: 6px; }
.wi-korrektur input { min-width: 0; }
.netz-tabelle td, .netz-tabelle th { vertical-align: top; }
.netz-tabelle .zahl { text-align: right; white-space: nowrap; }
.netz-schalter { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 18px; }
.wechsel-karte { display: flex; flex-direction: column; gap: 6px; }

/* Etappe 8: WhatsApp-Koexistenz */
.koex-nummer { border: 1px solid var(--line, #e5e0dc); border-radius: 10px; padding: 10px 12px; margin: 10px 0; }
.koex-stand { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; }
.koex-stand li { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.koex-hinweise { margin: 8px 0; padding-left: 1.2em; display: grid; gap: 6px; }
.koex-adressbuch { list-style: none; padding: 0; margin: 8px 0; max-height: 50vh; overflow: auto; display: grid; gap: 2px; }