/* Levinus Consulting CRM — Design System */

@import url('https://fonts.googleapis.com/css2?family=Lora:wght@500;600;700&family=Work+Sans:wght@400;500;600;700&display=swap');

:root {
    --navy: #202A3F;
    --navy-light: #2B3752;
    --cream: #F5F2EA;
    --gold: #C8A45D;
    --gold-dark: #B08D48;

    --status-neu: #5C7FA6;       --status-neu-bg: #E7EEF5;
    --status-kontakt: #C8A45D;   --status-kontakt-bg: #F6ECD9;
    --status-erstgespraech: #8B6BA8; --status-erstgespraech-bg: #EFE7F3;
    --status-angebot: #C97D4A;   --status-angebot-bg: #F5E2D3;
    --status-kunde: #4F8F63;     --status-kunde-bg: #E1EFE4;

    --success: #4F8F63;
    --success-dark: #356B45;
    --danger: #A2564F;
    --danger-dark: #8A3F38;

    --border: rgba(32, 42, 63, 0.1);
    --border-strong: rgba(32, 42, 63, 0.18);
    --text: #202A3F;
    --text-muted: #667089;

    --radius-card: 10px;
    --radius-input: 7px;
    --radius-pill: 999px;
    --shadow-modal: 0 8px 24px rgba(32, 42, 63, 0.15);

    --sidebar-width: 224px;
    /* Eine feste Breite für das Detail-Panel gibt es seit dem 02.09.2026 nicht
       mehr — es füllt beim Öffnen den ganzen Inhaltsbereich. Siehe .detail-panel
       und PROJEKTVERLAUF §42. */
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--cream);
    color: var(--text);
    font-family: 'Work Sans', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

h1, h2, h3, h4 {
    font-family: 'Lora', serif;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--navy);
}

a { color: var(--gold-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; cursor: pointer; }

.app-shell {
    display: flex;
    min-height: 100vh;
}

/* ---------- Sidebar ---------- */
.sidebar {
    width: var(--sidebar-width);
    flex: 0 0 var(--sidebar-width);
    background: var(--navy);
    color: #fff;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sidebar-brand .logo-chip {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font-family: 'Lora', serif;
    font-weight: 700;
    color: var(--navy);
    overflow: hidden;
}
.sidebar-brand .logo-chip img { width: 100%; height: 100%; object-fit: contain; }

.sidebar-brand .brand-text {
    font-family: 'Lora', serif;
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: 0.04em;
}
.sidebar-brand .brand-text strong { display: block; font-size: 14px; color: var(--gold); }

.sidebar-nav {
    flex: 1;
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Bei kleiner Fensterhöhe scrollt die Menüliste, statt die Fußzeile
       (mit dem Abmelden-Button) aus dem 100vh-hohen Bereich zu schieben.
       min-height:0 ist nötig, damit ein Flex-Kind überhaupt schrumpfen darf. */
    min-height: 0;
    overflow-y: auto;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 7px;
    color: rgba(255,255,255,0.75);
    font-weight: 500;
    font-size: 13.5px;
}
.sidebar-nav a:hover { background: rgba(255,255,255,0.06); text-decoration: none; color: #fff; }
.sidebar-nav a.active { background: var(--gold); color: var(--navy); font-weight: 600; }
.sidebar-nav a .nav-icon { width: 18px; text-align: center; }

.sidebar-footer {
    padding: 16px 18px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    gap: 10px;
}
.sidebar-footer .avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--gold); color: var(--navy);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 12.5px; flex: none;
}
.sidebar-footer .who { line-height: 1.3; }
.sidebar-footer .who strong { display: block; font-size: 13px; }
.sidebar-footer .who span { font-size: 11.5px; color: rgba(255,255,255,0.55); }
.sidebar-footer form { margin-left: auto; }
.sidebar-footer .logout-btn {
    background: none; border: none; color: rgba(255,255,255,0.5); font-size: 16px;
}
.sidebar-footer .logout-btn:hover { color: #fff; }

/* ---------- Main ---------- */
.main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    border-bottom: 1px solid var(--border);
    background: var(--cream);
    position: sticky;
    top: 0;
    z-index: 5;
}
.topbar h1 { font-size: 20px; margin: 0; }
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.hamburger-btn {
    display: none; flex: none; width: 36px; height: 36px; border: 1px solid var(--border-strong);
    border-radius: var(--radius-input); background: #fff; align-items: center; justify-content: center;
    flex-direction: column; gap: 4px; padding: 0;
}
.hamburger-btn span { display: block; width: 16px; height: 2px; background: var(--navy); border-radius: 2px; }
.sidebar-backdrop {
    position: fixed; inset: 0; background: rgba(32,42,63,0.5); z-index: 150; display: none;
}
.sidebar-backdrop.open { display: block; }
.search-wrap { position: relative; }
.search-input {
    width: 260px;
    padding: 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-input);
    background: #fff;
    font-size: 13px;
}
.bell {
    width: 34px; height: 34px; border-radius: 50%;
    background: #fff; border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    position: relative; padding: 0; font-size: 15px; cursor: pointer;
}

.notif-wrap { position: relative; }
.notif-badge {
    position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; line-height: 1;
}
.notif-dropdown {
    position: absolute; top: 44px; right: 0; width: 320px; max-width: calc(100vw - 32px);
    max-height: 400px; overflow-y: auto; background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius-card); box-shadow: var(--shadow-modal); z-index: 60;
}
.notif-dropdown-header {
    padding: 12px 16px; font-weight: 700; font-size: 13px; color: var(--navy);
    border-bottom: 1px solid var(--border);
}
.notif-item {
    display: block; padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: 13px;
    color: var(--text);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--cream); text-decoration: none; }
.notif-item .notif-title { font-weight: 600; color: var(--navy); display: block; }
.notif-item .notif-meta { font-size: 11.5px; color: var(--text-muted); }
#search-dropdown { left: 0; right: auto; width: 100%; min-width: 280px; top: 40px; }

.content {
    flex: 1;
    display: flex;
    gap: 22px;
    padding: 24px 28px;
    align-items: flex-start;
}
.content-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

/* ---------- Cards ---------- */
.card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 18px;
}

.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
/* Mehrere Seiten geben die Spaltenzahl per style-Attribut fest vor (2, 3, 4).
   Auf dem Handy passen vier Kacheln aber nicht nebeneinander — die Inhalte
   schrumpfen nicht mit und schieben die ganze Seite seitlich raus. Ein
   Inline-Stil lässt sich nur mit !important überstimmen; das ist hier der
   richtige Einsatz dafür, weil die Vorgabe selbst die flexible ist. */
@media (max-width: 700px) {
    .kpi-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; }
}
.kpi-card { display: flex; align-items: center; gap: 14px; }
.kpi-icon {
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex: none;
}
.kpi-icon.hue-1 { background: var(--status-neu-bg); color: var(--status-neu); }
.kpi-icon.hue-2 { background: var(--status-angebot-bg); color: var(--status-angebot); }
.kpi-icon.hue-3 { background: var(--status-erstgespraech-bg); color: var(--status-erstgespraech); }
.kpi-value { font-family: 'Lora', serif; font-size: 26px; font-weight: 700; color: var(--navy); line-height: 1.1; }
.kpi-label { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.kpi-delta { font-size: 11.5px; color: var(--success-dark); margin-top: 4px; }

/* ---------- Tables ---------- */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
    text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-muted); padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.data-table th.sortable-th { cursor: pointer; user-select: none; white-space: nowrap; }
.data-table th.sortable-th:hover { color: var(--navy); }
.data-table th.sortable-th::after { content: ''; display: inline-block; width: 8px; }
.data-table th.sort-asc::after { content: '▲'; font-size: 8px; margin-left: 2px; color: var(--gold-dark); }
.data-table th.sort-desc::after { content: '▼'; font-size: 8px; margin-left: 2px; color: var(--gold-dark); }
.data-table td { padding: 12px; border-bottom: 1px solid var(--border); font-size: 13.5px; vertical-align: middle; }
.data-table tr.clickable { cursor: pointer; }
.data-table tr.clickable:hover { background: rgba(200,164,93,0.06); }
.data-table tr.selected { background: rgba(200,164,93,0.12); }
.cell-name { font-weight: 600; color: var(--navy); }
/* font-weight ausdrücklich: Steht die Unterzeile INNERHALB einer .cell-name
   (Akquise-Arbeitsliste: Betrieb oben, Aktion darunter), erbte sie sonst
   deren Fettdruck und sah aus wie ein zweiter Name. */
.cell-sub { color: var(--text-muted); font-size: 12px; font-weight: 400; }

.pill {
    display: inline-block; padding: 4px 11px; border-radius: var(--radius-pill);
    font-size: 12px; font-weight: 600;
}

.pagination { display: flex; justify-content: flex-end; gap: 6px; padding: 12px; }
.pagination a, .pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 30px; border-radius: 6px; font-size: 12.5px;
    border: 1px solid var(--border); color: var(--text);
}
.pagination a:hover { background: var(--cream); text-decoration: none; }
.pagination .current { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 16px; border-radius: 7px; border: 1px solid transparent;
    font-size: 13.5px; font-weight: 600;
}
.btn-primary { background: var(--gold); color: var(--navy); }
.btn-primary:hover { background: var(--gold-dark); text-decoration: none; }
.btn-secondary { background: #fff; border-color: var(--border-strong); color: var(--text); }
.btn-secondary:hover { background: var(--cream); text-decoration: none; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-dark); text-decoration: none; }
.btn-text { background: none; border: none; color: var(--gold-dark); font-weight: 600; padding: 4px 6px; }
.btn-sm { padding: 6px 11px; font-size: 12.5px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Forms ---------- */
label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; }
/* input[type=number] fehlte hier bis zum 06.10.2026. Zahlenfelder blieben
   dadurch völlig ungestaltet — ohne Rahmenstil, ohne Innenabstand und nur rund
   56 px breit, also sichtbar anders als alle Felder daneben. Betroffen waren
   neben den Akquise-Einstellungen auch der Auftragswert und das Zahlungsziel im
   Dialog „Kunde anlegen" und im Detailbereich; das Kunden-Dashboard hat eine
   eigene Stilvorlage und ist nicht betroffen. */
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], input[type=search],
input[type=number], textarea, select {
    width: 100%; padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: var(--radius-input);
    font-size: 13.5px; font-family: inherit; background: #fff; color: var(--text);
}
textarea { resize: vertical; min-height: 80px; }
.field { margin-bottom: 14px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-error { color: var(--danger-dark); font-size: 12px; margin-top: 4px; }
/* font-weight ausdrücklich: `label` setzt 600, und ein Hinweis INNERHALB eines
   label (etwa neben einem Haken) erbte das — er stand dann genauso fett da wie
   die Beschriftung selbst und war von ihr nicht zu unterscheiden. */
.field-hint { color: var(--text-muted); font-size: 11.5px; font-weight: 400; margin-top: 4px; }

/* ---------- Status filter pills ---------- */
.filter-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-pill {
    padding: 7px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong);
    background: #fff; font-size: 12.5px; font-weight: 600; color: var(--text-muted);
}
.filter-pill.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.filter-pill .count { opacity: 0.7; margin-left: 4px; }

.segmented { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-input); overflow: hidden; }
.segmented a { padding: 7px 16px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); background: #fff; }
.segmented a.active { background: var(--navy); color: #fff; }
.segmented a:hover { text-decoration: none; }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- Kanban ---------- */
.kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
.kanban-col { background: rgba(32,42,63,0.03); border-radius: var(--radius-card); padding: 12px; min-height: 120px; }
.kanban-col-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 12.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.kanban-col.drag-over { background: rgba(200,164,93,0.12); outline: 2px dashed var(--gold); }
.kanban-card {
    background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px;
    cursor: grab; font-size: 13px;
}
.kanban-card:active { cursor: grabbing; }
.kanban-card.dragging { opacity: 0.4; }
.kanban-card .cell-name { display: block; }
.kanban-card .cell-sub { display: block; margin-top: 2px; }

/* ---------- Detail Panel ---------- */
/* Das Panel füllt seit dem 02.09.2026 den ganzen Inhaltsbereich: beim Öffnen
   eines Kontakts weicht die Liste (siehe .content.detail-offen weiter unten).
   Vorher stand es als schmale Spalte daneben — zu eng, und die restlichen
   Kunden lenkten ab. */
.detail-panel {
    flex: 1; min-width: 0; background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius-card);
}
.detail-panel.empty {
    display: flex; align-items: center; justify-content: center; color: var(--text-muted);
    min-height: 200px; text-align: center; padding: 30px;
}
/* Solange nichts ausgewählt ist, hat das leere Panel nichts zu sagen — es
   nähme der Liste nur Platz weg. */
.content:not(.detail-offen) .detail-panel.empty { display: none; }
.content.detail-offen .content-main { display: none; }

/* Die Kopfzeile bleibt beim Scrollen stehen — sie trägt den Weg zurück zur
   Liste, und der darf nicht wegscrollen, solange die Liste ausgeblendet ist.
   Sie klebt unterhalb der Topbar, die selbst sticky mit top:0 ist; ohne den
   Versatz läge sie exakt darüber und verdeckte Seitentitel und Suchfeld.
   --topbar-h setzt app.js, weil die Topbar je nach Fensterbreite unterschiedlich
   hoch ist (gemessen: 70px / 62px / 98px). Der Vorgabewert greift, falls kein
   JavaScript läuft. */
.detail-header {
    display: flex; align-items: center; gap: 12px; padding: 18px;
    border-bottom: 1px solid var(--border); background: #fff; z-index: 5;
    position: sticky; top: var(--topbar-h, 70px);
}
.btn-zurueck {
    flex: none; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-btn);
    padding: 7px 13px; font-size: 13px; font-weight: 600; color: var(--navy); cursor: pointer;
    font-family: inherit; white-space: nowrap;
}
.btn-zurueck:hover { background: #fff; border-color: var(--gold); color: var(--gold-dark); }

/* Drei Spalten:
     links  (fakten) — Stammdaten: Kontakt, Pipeline
     mitte  (inhalt) — woran man arbeitet: Notizen, Angebote, Umsätze, Dokumente
     rechts (status) — was ansteht und was war: Nächste Schritte, Zahlen, Verlauf
   Ohne diese Aufteilung zieht die volle Breite den Inhalt auseinander, statt
   mehr davon zu zeigen — die kv-Zeilen setzen Beschriftung und Wert an die
   Zeilenenden, und die Formularfelder sind auf width:100%.
   Kein align-items:start: Die Spalten sollen sich auf volle Höhe strecken,
   damit ihre Trennlinien nicht auf halber Strecke abbrechen. */
.detail-body {
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) minmax(300px, 400px);
}
.detail-col { min-width: 0; }
.detail-col-fakten { border-right: 1px solid var(--border); }
.detail-col-status { border-left: 1px solid var(--border); }
.detail-col-fakten .detail-section:last-child,
.detail-col-status .detail-section:last-child { border-bottom: none; }
/* Lange Fließtexte brauchen keine 1000px Zeilenlänge. */
.detail-col-inhalt .detail-section > p { max-width: 78ch; }

/* Ab hier ist für drei Spalten zu wenig Platz: Die Statusspalte rutscht unter
   die beiden anderen und nimmt die volle Breite ein. */
@media (max-width: 1500px) {
    .detail-body { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
    .detail-col-status {
        grid-column: 1 / -1;
        border-left: none;
        border-top: 1px solid var(--border);
    }
}

@media (max-width: 900px) {
    .detail-body { grid-template-columns: 1fr; }
    .detail-col-fakten { border-right: none; }
    .detail-col-fakten .detail-section:last-child { border-bottom: 1px solid var(--border); }
}

/* Formularfelder stehen auf width:100% und füllten damit die ganze Spalte —
   ein Notizfeld von 1660px Breite, und 830px für ein achtstelliges Datum.
   Die Deckel gelten nur im Detail-Panel; Modals und Einstellungen haben ihre
   eigene, engere Umgebung. */
.detail-panel textarea,
.detail-panel select,
.detail-panel input[type=text],
.detail-panel input[type=email],
.detail-panel input[type=tel],
.detail-panel input[type=search] { max-width: 560px; }
.detail-panel input[type=date] { max-width: 200px; }
/* Die zweispaltige Feldzeile bekommt denselben Deckel, sonst stünde sie
   quer unter dem Notizfeld statt bündig darunter. */
.detail-panel .field-row { max-width: 560px; }
/* In der Bearbeiten-Ansicht der Stammdaten sitzen die Felder in schmalen
   kv-Zeilen — dort ist der Deckel schon durch die Spalte gegeben. */
.detail-panel .kv-edit { max-width: none; }
.detail-header .avatar {
    width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: var(--gold);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex: none;
}
.detail-header .who { flex: 1; min-width: 0; }
.detail-header .who strong { display: block; font-size: 15px; color: var(--navy); }
.detail-header .who span { font-size: 12px; color: var(--text-muted); }
.icon-btn { background: none; border: none; font-size: 16px; color: var(--text-muted); padding: 4px; }
.icon-btn:hover { color: var(--danger); }
.icon-btn.close-btn:hover { color: var(--navy); }
.icon-btn.success:hover { color: var(--success-dark); }

.detail-section { padding: 16px 18px; border-bottom: 1px solid var(--border); }
.detail-section:last-child { border-bottom: none; }
.detail-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.detail-section-header h4 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); font-family: 'Work Sans', sans-serif; font-weight: 700; }
/* max-width: Beschriftung und Wert stehen an den beiden Enden der Zeile. Ohne
   Deckel driften sie auf breiten Fenstern so weit auseinander, dass man die
   Zuordnung verliert — sichtbar auf Tablets, wo das Panel einspaltig über die
   volle Breite läuft. Nur im Detail-Panel verwendet. */
.kv-row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 13px; max-width: 620px; }
.kv-row .k { color: var(--text-muted); flex: none; padding-top: 4px; }
.kv-row .v { text-align: right; font-weight: 500; flex: 1; }
.detail-section .kv-edit { display: none; }
.detail-section.editing .kv-view { display: none; }
.detail-section.editing .kv-edit { display: inline-block; width: 100%; text-align: left; }
.addr-edit-fields { display: flex; flex-direction: column; gap: 4px; }
.detail-section.editing .kv-edit.addr-edit-fields { display: flex; }

.note-signature { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; }

.doc-item { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; font-size: 13px; border-bottom: 1px dashed var(--border); }
.doc-item:last-child { border-bottom: none; }
.doc-item .doc-meta { color: var(--text-muted); font-size: 11.5px; }
.upload-drop {
    margin-top: 10px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-input);
    padding: 16px; text-align: center; font-size: 12.5px; color: var(--text-muted); position: relative;
}
.upload-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.verlauf-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.verlauf-item:last-child { border-bottom: none; }
.verlauf-icon { flex: none; }
.verlauf-item .meta { color: var(--text-muted); font-size: 11.5px; }
/* Anklickbar: öffnet den Eintrag in voller Größe im Modal. Der Text wird hier auf
   drei Zeilen gekürzt, damit lange Notizen die schmale Seitenspalte nicht sprengen —
   vollständig lesbar ist er dann im Modal. */
.verlauf-item.verlauf-open { cursor: pointer; border-radius: 6px; padding-left: 6px; padding-right: 6px; }
.verlauf-item.verlauf-open:hover { background: rgba(200, 164, 93, 0.10); }
.verlauf-item.verlauf-open:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.verlauf-notiz { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Gespeicherte interne Notizen ----------
   Anders als der Verlauf wird hier NICHT gekürzt: Die Notizen stehen in der
   breiten Inhaltsspalte, und wer eine Notiz ändern will, muss sie ganz sehen. */
.notiz-liste { margin-top: 18px; border-top: 1px solid var(--border); }
.notiz-item { padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.notiz-item:last-child { border-bottom: none; }
.notiz-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.notiz-kopf > span { color: var(--text-muted); font-size: 12px; }
.notiz-inhalt { white-space: pre-wrap; margin: 4px 0 4px; }
.notiz-item .meta { color: var(--text-muted); font-size: 11.5px; }
.notiz-item textarea { width: 100%; max-width: 560px; min-height: 110px; }
.notiz-bearbeiten { margin: 6px 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.notiz-bearbeiten .field-row { margin: 0; }

/* ---------- Ansprechpartner (09.10.2026) ----------
   Eine Karte je Person im Detailbereich. Die erste ist der Hauptansprechpartner
   und sitzt auf dem Kundensatz selbst; die übrigen stehen in der Tabelle
   `ansprechpartner`. Optisch ist es trotzdem EINE Liste — die Trennung
   dahinter geht den Benutzer nichts an. */
.ap-karte {
    padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-input);
    margin-top: 8px; font-size: 13px;
}
.ap-haupt { border-left: 3px solid var(--gold); background: rgba(32, 42, 63, 0.02); }
.ap-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ap-pill-haupt { color: #6B5420; background: #F5ECD7; }
.ap-pill-rolle { color: #3C4A63; background: #E7ECF4; }
.ap-funktion { color: var(--text-muted); font-size: 12px; margin-top: 2px; }
.ap-zeilen { margin-top: 5px; display: flex; flex-direction: column; gap: 2px; }
/* Lange Adressen dürfen die Karte nicht aufspannen — auf Handybreite schöbe
   das sonst den ganzen Detailbereich seitlich raus (dieser Fehler ist in
   diesem Projekt schon dreimal passiert). */
.ap-zeilen a { word-break: break-word; }
.ap-notiz { margin-top: 5px; color: var(--text-muted); font-size: 12px; font-style: italic; }
/* row-gap klein, column-gap gross: Die Spalte des Detailbereichs ist rund
   340 px breit, die drei Links passen dort nicht nebeneinander und brechen um.
   Mit einem einheitlichen gap von 12px stand jeder Link mit zwoelf Pixeln Luft
   unter dem naechsten — bei fuenf Personen eine halbe Bildschirmhoehe nur fuer
   Links. Nebeneinander bleiben sie trotzdem lesbar getrennt. */
.ap-aktionen { margin-top: 8px; display: flex; row-gap: 2px; column-gap: 14px; flex-wrap: wrap; }
.ap-aktionen .btn-text { font-size: 12px; }
.ap-form {
    margin-top: 12px; padding: 12px; border: 1px dashed var(--border-strong);
    border-radius: var(--radius-input);
}
.ap-form .field:last-of-type { margin-bottom: 10px; }

/* ---------- Infos ----------
   Allgemeine Notizen ohne Kundenbezug. Die Karten sind zugeklappt eine
   Kurzfassung und klappen beim Klick auf den vollen Text auf. */
.filter-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-pill {
    background: #fff; border: 1px solid var(--border); border-radius: 999px;
    padding: 7px 14px; font-size: 13px; font-family: inherit; cursor: pointer;
    color: var(--text);
}
.filter-pill:hover { background: rgba(200, 164, 93, 0.08); }
.filter-pill.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.pill-count { opacity: 0.6; font-size: 12px; margin-left: 3px; }

.info-liste { display: flex; flex-direction: column; gap: 12px; }
.info-card { padding: 16px 18px; cursor: pointer; }
.info-card:hover { background: rgba(200, 164, 93, 0.05); }
.info-card.offen { cursor: default; border-left: 3px solid var(--gold); }
.info-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.info-titel { font-family: 'Lora', serif; font-size: 16px; margin: 0 0 5px; color: var(--navy); }
.info-meta { font-size: 12px; }
.info-kat { background: rgba(200, 164, 93, 0.16); color: #8a6d33; font-size: 11px; }
/* Die Aktionen erscheinen erst, wenn die Karte offen ist — zugeklappt wäre
   ein „Löschen" neben jeder Zeile zu nah am versehentlichen Klick. */
.info-aktionen { white-space: nowrap; visibility: hidden; }
.info-card.offen .info-aktionen { visibility: visible; }
.info-kurz { margin-top: 10px; font-size: 13.5px; line-height: 1.65; color: var(--text-muted); }
.info-voll { display: none; margin-top: 10px; font-size: 13.5px; line-height: 1.65; }
.info-card.offen .info-kurz { display: none; }
.info-card.offen .info-voll { display: block; }
.info-voll h4 { font-family: 'Lora', serif; font-size: 14.5px; margin: 14px 0 6px; color: var(--navy); }
.info-voll h4:first-child { margin-top: 0; }
.info-voll p { margin: 0 0 10px; }
.info-voll ul { margin: 0 0 10px; padding-left: 20px; }
.info-voll li { margin-bottom: 3px; }

.info-editor-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 12px; }
#info-text { min-height: 280px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.info-vorschau {
    border: 1px solid var(--border); border-radius: 8px; background: #fff;
    padding: 16px 18px; min-height: 280px; font-size: 13.5px; line-height: 1.65;
    overflow-wrap: anywhere;
}
.info-vorschau h4 { font-family: 'Lora', serif; font-size: 14.5px; margin: 14px 0 6px; color: var(--navy); }
.info-vorschau h4:first-child { margin-top: 0; }
.info-vorschau p { margin: 0 0 10px; }
.info-vorschau ul { margin: 0 0 10px; padding-left: 20px; }
@media (max-width: 900px) { .info-editor-felder { grid-template-columns: 1fr; } }

.detail-footer { padding: 14px 18px; font-size: 11.5px; color: var(--text-muted); }

/* ---------- Wiedervorlagen due labels ---------- */
.due-overdue { color: var(--danger-dark); font-weight: 600; }
.due-today { color: var(--gold-dark); font-weight: 600; }
.due-future { color: var(--text-muted); font-weight: 500; }

/* ---------- Verlauf feed ---------- */
.feed-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.feed-item:last-child { border-bottom: none; }
.feed-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--cream); display: flex; align-items: center; justify-content: center; flex: none; font-size: 15px; }
.feed-title { font-weight: 600; color: var(--navy); }
.feed-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.feed-note { margin-top: 4px; font-size: 13px; }

/* ---------- Connection status cards ---------- */
.status-card { display: flex; align-items: center; gap: 12px; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--success); flex: none; }
.status-dot.off { background: var(--text-muted); }
.status-dot.stub { background: var(--gold); }
.status-card .info strong { display: block; font-size: 13.5px; color: var(--navy); }
.status-card .info span { font-size: 12px; color: var(--text-muted); }

/* ---------- Modal ---------- */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(32,42,63,0.45); display: none;
    align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal {
    background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-modal);
    width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
}
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.modal-body { padding: 20px 22px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--border); }
.mapping-table { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
.mapping-table td { padding: 8px 0; font-size: 13px; border-bottom: 1px dashed var(--border); }
.mapping-table td.arrow { color: var(--text-muted); text-align: center; width: 30px; }
.mapping-table td.lex-field { color: var(--gold-dark); font-weight: 600; text-align: right; }
.export-spinner { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 30px 0; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--gold); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.export-success { text-align: center; padding: 10px 0; }
.export-success .check { width: 52px; height: 52px; border-radius: 50%; background: var(--status-kunde-bg); color: var(--success-dark); display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 0 auto 14px; }
.confirm-line { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 13px; margin-top: 6px; color: var(--text); }

/* ---------- Login ---------- */
.login-shell { min-height: 100vh; background: var(--navy); display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { width: 340px; background: #fff; border-radius: var(--radius-card); padding: 30px 26px; box-shadow: var(--shadow-modal); }
.login-logo { display: block; max-width: 100%; margin: 0 auto 22px; }
.login-card .field { margin-bottom: 16px; }
.login-links { text-align: center; margin-top: 16px; font-size: 12.5px; }
.login-error { background: var(--status-angebot-bg); color: var(--danger-dark); border-radius: var(--radius-input); padding: 9px 12px; font-size: 12.5px; margin-bottom: 14px; }
.login-info { background: var(--status-kunde-bg); color: var(--success-dark); border-radius: var(--radius-input); padding: 9px 12px; font-size: 12.5px; margin-bottom: 14px; }

/* ---------- Utility ---------- */
.text-muted { color: var(--text-muted); }
.mt-0 { margin-top: 0; }
.flex-gap { display: flex; gap: 8px; align-items: center; }
.hidden { display: none !important; }
.empty-state { text-align: center; padding: 40px 20px; color: var(--text-muted); }

@media (max-width: 1100px) {
    .kpi-row { grid-template-columns: 1fr 1fr; }
    .kanban { grid-template-columns: 1fr 1fr; }

    /* Auf Tablet/Handy deckt das Panel zusätzlich die Seitenleiste ab, sonst
       bliebe für den Kunden zu wenig übrig. Auf dem Desktop füllt es den
       Inhaltsbereich (siehe .content.detail-offen weiter oben). */
    .content { position: relative; }
    .detail-panel:not(.empty) {
        position: fixed; inset: 0; top: 0; border-radius: 0; border: none;
        z-index: 120; overflow-y: auto;
    }
    /* Im Overlay liegt die Topbar darunter — die Kopfzeile klebt hier oben
       am Panel selbst, nicht unterhalb der Topbar. */
    .detail-header { top: 0; }
}

@media (max-width: 900px) {
    .hamburger-btn { display: flex; }

    .sidebar {
        position: fixed; top: 0; left: 0; height: 100vh; z-index: 200; width: 260px;
        transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: 6px 0 24px rgba(32,42,63,0.3);
    }
    .sidebar.open { transform: translateX(0); }
    body.sidebar-open-lock { overflow: hidden; }

    .content { flex-direction: column; align-items: stretch; padding: 18px 16px; }
    .topbar { padding: 14px 16px; }
    .topbar h1 { font-size: 17px; }
    .search-input { width: 160px; }
}

@media (max-width: 640px) {
    .kpi-row { grid-template-columns: 1fr 1fr; gap: 10px; }
    .kpi-card { padding: 14px; gap: 10px; }
    .kpi-icon { width: 38px; height: 38px; font-size: 16px; }
    .kpi-value { font-size: 21px; }

    .kanban { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; -webkit-overflow-scrolling: touch; }
    .kanban-col { min-width: 82vw; scroll-snap-align: start; }

    .toolbar { flex-direction: column; align-items: stretch; }
    .topbar { flex-wrap: wrap; row-gap: 10px; }
    .topbar-left, .topbar-right { width: 100%; }
    .topbar-right { justify-content: flex-end; }
    .search-input { width: 100%; }
    .field-row { grid-template-columns: 1fr; }

    .modal { max-width: 100%; width: 100%; max-height: 100dvh; border-radius: 0; }
    .modal-overlay { padding: 0; }
    .modal-header, .modal-body, .modal-footer { padding-left: 16px; padding-right: 16px; }

    .login-card { width: 100%; padding: 26px 20px; }

    .data-table th, .data-table td { padding: 9px 10px; font-size: 12.5px; white-space: nowrap; }

    .btn { min-height: 40px; }
    input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date], input[type=search],
    textarea, select { font-size: 16px; } /* verhindert Auto-Zoom beim Fokussieren auf iOS */
}

/* --- Deutlicher Warnhinweis im Export-Modal ------------------------------
   Der bisherige dezente Kasten (.login-error) ging in der Feldliste unter,
   obwohl die Aussage folgenreich ist: Die gespeicherte Lexware-Verknüpfung
   zeigt ins Leere. Daher kräftiger Rahmen, Warnsymbol und Fettung. */
.modal-warnung {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--status-angebot-bg);
    border: 1px solid var(--status-angebot);
    border-left: 5px solid var(--danger);
    border-radius: var(--radius-input);
    padding: 14px 16px;
    margin-bottom: 16px;
}
.modal-warnung .warn-icon {
    font-size: 20px;
    line-height: 1.1;
    flex-shrink: 0;
}
.modal-warnung .warn-titel {
    display: block;
    font-weight: 700;
    color: var(--danger-dark);
    margin-bottom: 3px;
}
.modal-warnung .warn-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--danger-dark);
}

/* Kennzahlen der Datensicherung (Einstellungen). Zweispaltig, damit
   Aufbewahrungsfrist, ältester Stand und Ablageort auf einen Blick
   nebeneinander lesbar sind. */
.backup-fakten {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
    margin: 14px 0 10px;
    font-size: 12.5px;
    line-height: 1.5;
}
.backup-fakten dt {
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
}
.backup-fakten dd {
    margin: 0;
    color: var(--text-muted);
}
.backup-fakten dd code {
    word-break: break-all;
}

@media (max-width: 560px) {
    .backup-fakten {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    .backup-fakten dd {
        margin-bottom: 8px;
    }
}

/* Der Ziehgriff zwischen Liste und Panel (§41) ist am 02.09.2026 wieder
   entfallen: Das Panel füllt jetzt ohnehin die volle Breite, es gibt keine
   Trennlinie mehr zu verschieben. Siehe PROJEKTVERLAUF §42. */

/* ---------- Akquise: Arbeitsliste „Heute zu tun" ---------- */
/* Liste links, Gesprächsleitfaden rechts; der Leitfaden bleibt beim Scrollen
   stehen, weil man ihn während des ganzen Telefonats sieht. */
.akq-arbeit {
    display: grid;
    /* Dritte Spalte ist der Ziehgriff. Die Breite des Leitfadens steht in
       einer eigenen Variablen, damit JavaScript nur diesen einen Wert setzt. */
    grid-template-columns: minmax(0, 1fr) 5px var(--akq-leitfaden-breite, 320px);
    gap: 16px;
    align-items: start;
}
/* min-width: 0 ist hier nicht kosmetisch: Ohne diese Zeile nimmt ein
   Grid-Kind die volle Breite seines Inhalts an (Vorgabe `auto`). Die breite
   Tabelle schiebt dann die gesamte Seite seitlich raus, statt dass die
   Tabelle in ihrem eigenen Rahmen scrollt. */
.akq-arbeit > * { min-width: 0; }
@media (max-width: 1100px) {
    /* Schmaler Bildschirm: untereinander, und der Griff hat nichts zu tun. */
    .akq-arbeit { grid-template-columns: 1fr; }
    .akq-griff { display: none; }
}

/* Der Griff selbst: sichtbar ein schmaler Strich, anfassbar deutlich breiter.
   Pixelgenau treffen zu müssen wäre eine Zumutung (Lehre aus §41). */
.akq-griff {
    position: relative;
    align-self: stretch;
    min-height: 120px;
    cursor: col-resize;
    background: var(--border);
    border-radius: 3px;
    transition: background .15s;
}
.akq-griff::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: -7px; right: -7px;   /* Trefferfläche ~19 px */
}
.akq-griff:hover, .akq-griff:focus-visible, .akq-griff.zieht { background: var(--gold); outline: none; }
/* Während des Ziehens darf der Text nicht markiert werden und der Zeiger
   nicht wechseln, sonst flackert es. */
body.akq-zieht { user-select: none; cursor: col-resize; }
.akq-leitfaden { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.akq-leitfaden h4 { font-family: 'Lora', serif; font-size: 15px; color: var(--navy); }
.akq-leitfaden .lf-text { font-size: 12.5px; line-height: 1.55; }
.akq-leitfaden .lf-text h4 { margin: 12px 0 4px; font-size: 12.5px; font-family: 'Work Sans', sans-serif; }
.akq-leitfaden .lf-text ul { margin: 0 0 8px; padding-left: 18px; }
.akq-leitfaden .lf-text li { margin-bottom: 3px; }
.akq-leitfaden .lf-text p { margin: 0 0 8px; }

.akq-ergebnis { display: flex; flex-wrap: wrap; gap: 4px; }
.akq-ergebnis button {
    font: 600 11px/1 'Work Sans', sans-serif; padding: 6px 8px; cursor: pointer;
    border: 1px solid var(--border-strong); background: #fff;
    border-radius: var(--radius-input); color: var(--text);
}
.akq-ergebnis button:hover { background: var(--creme); }
.akq-ergebnis button[disabled] { opacity: .5; cursor: default; }
.akq-ergebnis .ja { border-color: #9EC2A8; color: #3C6B4A; }
.akq-ergebnis .nein { border-color: #D8B4AF; color: #8E463E; }
.akq-ergebnis .nie { border-color: var(--border); color: var(--text-muted); }
.akq-tel { white-space: nowrap; font-variant-numeric: tabular-nums; }
.akq-versuche { text-align: center; font-variant-numeric: tabular-nums; }
.akq-warn { color: #8E463E; font-weight: 600; }
.akq-letzte { font-size: 11.5px; color: var(--text-muted); max-width: 260px; }
/* Die Namensspalte bekommt Luft, damit Betrieb und Aktion nicht über vier
   Zeilen umbrechen. */
#akquise-arbeitsliste td.cell-name { min-width: 190px; }
#akquise-arbeitsliste .cell-sub { margin-top: 2px; }
.akq-erledigt { opacity: .45; }
/* Fundstelle eines recherchierten Kaltkontakts, unter der letzten Zeile. */
.akq-quelle { font-size: 11px; color: var(--text-muted); margin-top: 3px; opacity: .85; }
/* Sperrliste: ein Betrieb, der nicht mehr kontaktiert werden will. */
.akq-sperrliste { border-left: 3px solid #A2564F; }
.akq-sperrliste .data-table td { color: var(--text-muted); }
.akq-sperrliste .cell-name { color: var(--navy); }