/**
 * Finance Branch — Custom CSS
 * Ergänzt das globale Theme (CSS Variables werden per layout.php injected).
 * Finance-Gold (Dark) nutzt Gold-Akzente auf dunklem Hintergrund.
 */

/* ── Finance-spezifische Badge-Farben ───────────────────── */
.badge-finance-interessent { background: rgba(59,130,246,0.12); color: #3b82f6; }
.badge-finance-aktiv       { background: rgba(45,206,137,0.12); color: #2dce89; }
.badge-finance-inaktiv     { background: rgba(253,126,20,0.12); color: #fd7e14; }
.badge-finance-archiviert  { background: rgba(107,114,128,0.1); color: #6b7280; }

/* Vertrags-Status */
.badge-contract-aktiv      { background: rgba(45,206,137,0.12); color: #2dce89; }
.badge-contract-ruhend     { background: rgba(253,126,20,0.12); color: #fd7e14; }
.badge-contract-gekuendigt { background: rgba(239,68,68,0.12);  color: #ef4444; }
.badge-contract-abgelaufen { background: rgba(107,114,128,0.1); color: #6b7280; }
.badge-contract-beantragt  { background: rgba(59,130,246,0.12); color: #3b82f6; }

/* Risiko-Klassen */
.badge-risk-konservativ    { background: rgba(45,206,137,0.12); color: #2dce89; }
.badge-risk-ausgewogen     { background: rgba(59,130,246,0.12); color: #3b82f6; }
.badge-risk-wachstum       { background: rgba(253,126,20,0.12); color: #fd7e14; }
.badge-risk-spekulativ     { background: rgba(239,68,68,0.12);  color: #ef4444; }

/* Time Tracking Kategorien */
.badge-time-beratung       { background: rgba(197,165,90,0.12); color: #C5A55A; }
.badge-time-recherche      { background: rgba(59,130,246,0.12); color: #3b82f6; }
.badge-time-verwaltung     { background: rgba(107,114,128,0.12);color: #9ca3af; }
.badge-time-telefon        { background: rgba(45,206,137,0.12); color: #2dce89; }
.badge-time-sonstiges      { background: rgba(167,139,250,0.12);color: #a78bfa; }

/* ── Blau Direkt Integration ────────────────────────────── */
.bd-container .btn-outline-secondary {
    border-color: var(--branch-border, rgba(255,255,255,0.07));
    color: var(--branch-text-secondary, rgba(255,255,255,0.6));
}
.bd-container .btn-outline-secondary:hover {
    background: var(--branch-accent-glow, rgba(197,165,90,0.15));
    color: var(--branch-accent, #C5A55A);
    border-color: var(--branch-accent, #C5A55A);
}

/* ── Finance Cards Gold Accent ──────────────────────────── */
.finance-highlight {
    border-left: 3px solid var(--branch-accent, #C5A55A);
}

/* ── Timer Display ──────────────────────────────────────── */
.timer-display {
    font-family: 'Rajdhani', monospace;
    letter-spacing: 3px;
}

/* ── CRM Pipeline ───────────────────────────────────────── */
.crm-pipeline { display: flex; flex-wrap: nowrap; flex-direction: row; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; min-height: 60vh; align-items: flex-start; }
.crm-column { min-width: 240px; flex: 0 0 240px; width: 240px; }
.crm-column-header { padding: 0.6rem 0.8rem; border-radius: 8px 8px 0 0; font-size: 0.8rem; font-weight: 600; }
.crm-column-body { background: rgba(255,255,255,0.04); border-radius: 0 0 8px 8px; min-height: 200px; padding: 0.5rem; }
.crm-column-body.drag-over { background: rgba(255,255,255,0.1); border: 2px dashed rgba(255,255,255,0.3); }
.crm-card { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 0.7rem; margin-bottom: 0.5rem; cursor: grab; transition: transform 0.15s, box-shadow 0.15s; }
.crm-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.crm-card.dragging { opacity: 0.5; cursor: grabbing; }
.dynos-badge-neukunde { background: rgba(13,110,253,0.2); color: #6ea8fe; }
.dynos-badge-kooperation { background: rgba(111,66,193,0.2); color: #d0a9f5; }

/* Ziel-Tag auf der Pipeline-Karte — eigene Zeile ueber dem Namen.
   Bewusst KEIN .dynos-badge: kein Kaesten, kein Fettdruck, keine feste
   Mindestbreite. Der Tag ordnet ein, der Name ist die Nachricht. Als Kasten
   neben dem Namen hat er ihn bei "Kundengewinnung" aus der Karte gedraengt. */
.crm-card-ziel {
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 3px;
    /* Laeuft der Text doch einmal ueber (langes Wort, schmale Spalte), wird er
       gekuerzt statt die Karte zu sprengen. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.crm-card-ziel.is-neukunde   { color: rgba(110,168,254,0.75); }
.crm-card-ziel.is-kooperation{ color: rgba(208,169,245,0.75); }
body:not(.dark-mode) .crm-card-ziel.is-neukunde    { color: rgba(13,110,253,0.75); }
body:not(.dark-mode) .crm-card-ziel.is-kooperation { color: rgba(90,45,156,0.75); }

/* CRM Pipeline Status-Badges */
.badge-crm-neu                    { background: rgba(108,117,125,0.2); color: #adb5bd; }
.badge-crm-kontakt_hergestellt    { background: rgba(13,110,253,0.2);  color: #6ea8fe; }
.badge-crm-termin_vereinbart      { background: rgba(253,126,20,0.2);  color: #fda96a; }
.badge-crm-beratung_durchgefuehrt { background: rgba(111,66,193,0.2);  color: #d0a9f5; }
.badge-crm-uebergabe_blaudirekt   { background: rgba(25,135,84,0.2);   color: #75b798; }
.badge-crm-kein_interesse         { background: rgba(220,53,69,0.2);   color: #ea868f; }

/* CRM Priorität-Badges */
/* Ampel statt Farbverlauf (PO 2026-08-20): gruen, gelb, rot. Wer eine Liste
   ueberfliegt, soll die Dringlichkeit sehen, ohne die Beschriftung zu lesen —
   das leistet nur eine Skala, die jeder ohne Erklaerung kennt.
   'kritisch' bleibt stehen und rot: Die Stufe ist per Migration nach 'hoch'
   umgehaengt, aber eine CSS-Klasse zu loeschen, deren letzte Verwendung man
   nur glaubt zu kennen, spart nichts und kann eine Anzeige farblos machen. */
.badge-prio-niedrig  { background: rgba(25,135,84,0.20);  color: #75d1a0; }
.badge-prio-mittel   { background: rgba(255,193,7,0.20);  color: #ffda6a; }
.badge-prio-hoch     { background: rgba(220,53,69,0.20);  color: #ea868f; }
.badge-prio-kritisch { background: rgba(220,53,69,0.20);  color: #ea868f; }

/* Kein-Interesse Collapse-Sektion */
.crm-kein-interesse-wrapper { margin-top: 1.5rem; }
.crm-kein-interesse-toggle { cursor: pointer; user-select: none; }

/* List view table */
.crm-list-row { cursor: pointer; }
.crm-list-row:hover td { background: rgba(255,255,255,0.04); }

/* Task row highlights */
.task-overdue td { background: rgba(220,53,69,0.08) !important; }
.task-today td   { background: rgba(253,126,20,0.08) !important; }

/* ── Drag & Drop Zones (global) ───────────────────────────────────────── */
.dnd-zone {
    border: 2px dashed rgba(197,165,90,0.35);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: rgba(197,165,90,0.04);
    position: relative;
}
.dnd-zone:hover, .dnd-zone.dnd-over {
    border-color: var(--branch-accent, #C5A55A);
    background: rgba(197,165,90,0.10);
}
.dnd-zone.dnd-over { transform: scale(1.01); }
.dnd-zone-icon { font-size: 2rem; color: var(--branch-accent, #C5A55A); opacity: 0.7; margin-bottom: 0.5rem; }
.dnd-zone-text { font-size: 0.875rem; color: rgba(255,255,255,0.7); }
.dnd-zone-link { color: var(--branch-accent, #C5A55A); text-decoration: underline; }
.dnd-zone-hint { font-size: 0.72rem; color: rgba(255,255,255,0.3); margin-top: 0.25rem; }

/* ── Light Mode Overrides ─────────────────────────────────────────────── */
body:not(.dark-mode) .crm-column-body {
    background: rgba(0,0,0,0.04) !important;
    border-radius: 0 0 8px 8px;
}
body:not(.dark-mode) .crm-column-body.drag-over {
    background: rgba(0,0,0,0.08) !important;
    border-color: rgba(0,0,0,0.25) !important;
}
body:not(.dark-mode) .crm-card {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.12) !important;
    color: #212529 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
body:not(.dark-mode) .crm-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}
body:not(.dark-mode) .crm-card strong,
body:not(.dark-mode) .crm-card .text-white {
    color: #212529 !important;
}
body:not(.dark-mode) .crm-list-row:hover td {
    background: rgba(0,0,0,0.04) !important;
}
/* Pipeline Status-Badges — dunklere Farben für hellen Hintergrund */
body:not(.dark-mode) .badge-crm-neu                    { background: rgba(108,117,125,0.15) !important; color: #495057 !important; }
body:not(.dark-mode) .badge-crm-kontakt_hergestellt    { background: rgba(13,110,253,0.12)  !important; color: #0d6efd !important; }
body:not(.dark-mode) .badge-crm-termin_vereinbart      { background: rgba(220,100,0,0.12)   !important; color: #b85500 !important; }
body:not(.dark-mode) .badge-crm-beratung_durchgefuehrt { background: rgba(111,66,193,0.12)  !important; color: #5a2d9c !important; }
body:not(.dark-mode) .badge-crm-uebergabe_blaudirekt   { background: rgba(25,135,84,0.12)   !important; color: #0a6641 !important; }
body:not(.dark-mode) .badge-crm-kein_interesse         { background: rgba(220,53,69,0.12)   !important; color: #b02a37 !important; }
body:not(.dark-mode) .badge-prio-niedrig               { background: rgba(25,135,84,0.13)  !important; color: #146c43 !important; }
body:not(.dark-mode) .badge-prio-mittel                { background: rgba(255,193,7,0.20)  !important; color: #8a6100 !important; }
body:not(.dark-mode) .badge-prio-hoch                  { background: rgba(220,53,69,0.12)  !important; color: #b02a37 !important; }
body:not(.dark-mode) .badge-prio-kritisch              { background: rgba(220,53,69,0.12)  !important; color: #b02a37 !important; }
body:not(.dark-mode) .dynos-badge-neukunde             { background: rgba(13,110,253,0.12)  !important; color: #0d6efd !important; }
body:not(.dark-mode) .dynos-badge-kooperation          { background: rgba(111,66,193,0.12)  !important; color: #5a2d9c !important; }
/* Finance Client-Badges */
body:not(.dark-mode) .badge-finance-interessent { color: #0d6efd !important; }
body:not(.dark-mode) .badge-finance-aktiv       { color: #0a6641 !important; }
body:not(.dark-mode) .badge-finance-inaktiv     { color: #b85500 !important; }
body:not(.dark-mode) .badge-finance-archiviert  { color: #495057 !important; }
/* DnD Zone Text */
body:not(.dark-mode) .dnd-zone-text { color: rgba(0,0,0,0.6) !important; }
body:not(.dark-mode) .dnd-zone-hint { color: rgba(0,0,0,0.4) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   Aus dem Master nachgezogen (Herausloesung)
   ══════════════════════════════════════════════════════════════════════════
   Diese Klassen standen in master/assets/css/master.css — dem Stylesheet des
   Master-Panels, das die Branch-Seiten miterbten. Beim Herausloesen kam der
   Code mit, das Stylesheet nicht, und das gemeinsame Universe-Stylesheet kennt
   sie ebenfalls nicht.

   Die Wirkung war unauffaellig und darum boesartig: .btn-gradient ist in 43
   Templates die primaere Aktion — "Speichern", "Neue Praesentation", "Neuer
   Einwand". Ohne Definition rendert Bootstrap einen Knopf ohne Hintergrund mit
   fast unsichtbarer Schrift. Er funktioniert, man sieht ihn nur nicht, und das
   liest sich wie "deaktiviert". Deshalb konnte die Universe-Anbindung nicht
   gespeichert werden.

   Definitionen 1:1 aus master.css uebernommen. --indigo gibt es im
   Universe-Stylesheet nicht (mehr) — daher ein Rueckfall auf den Gold-Akzent
   von Finance, damit der Verlauf auch ohne die Variable trägt.
   ══════════════════════════════════════════════════════════════════════════ */

.btn-gradient {
    background: linear-gradient(135deg,
        var(--brand-color, #C5A55A),
        var(--indigo, var(--branch-accent, #8B7335)));
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.25s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.btn-gradient:hover {
    filter: brightness(1.12);
    box-shadow: 0 4px 15px var(--accent-glow, rgba(197,165,90,0.25));
    color: #fff;
}
.btn-gradient:disabled,
.btn-gradient.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: none;
    box-shadow: none;
}

.btn-link-accent {
    border: 1px solid var(--accent-glow, rgba(197,165,90,0.3));
    color: var(--brand-color, #C5A55A);
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 6px;
    padding: 0.35rem 0.75rem;
    transition: all 0.2s;
}
.btn-link-accent:hover {
    background: var(--brand-color, #C5A55A);
    color: #fff;
    border-color: var(--brand-color, #C5A55A);
}

.btn-link-danger {
    border: 1px solid rgba(220, 53, 69, 0.3);
    color: var(--red, #dc3545);
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    font-weight: 500;
    border-radius: 6px;
    padding: 0.35rem 0.75rem;
    transition: all 0.2s;
}
.btn-link-danger:hover {
    background: var(--red, #dc3545);
    color: #fff;
    border-color: var(--red, #dc3545);
}

/* Modals: ohne diese Regeln steht ein weisser Bootstrap-Dialog im dunklen Theme. */
.dynos-modal .modal-content {
    background: var(--card-bg, #1a1d24);
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 12px;
    color: var(--text, #e5e7eb);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.dynos-modal .modal-header { border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)); padding: 1rem 1.25rem; }
.dynos-modal .modal-footer { border-top: 1px solid var(--border, rgba(255,255,255,0.08)); padding: 0.75rem 1.25rem; }
.dynos-modal .btn-close-white { filter: invert(1) grayscale(100%) brightness(200%); }

body:not(.dark-mode) .dynos-modal .modal-content { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); }
body:not(.dark-mode) .dynos-modal .btn-close-white { filter: none; }

/**
 * Light Mode: .text-dim war unlesbar.
 *
 * Die Klasse kommt aus der zentralen jarvis.css von Universe und steht dort auf
 * #ADB5BD. Am 2026-08-15 im Browser nachgemessen: auf dem weissen Modal-Grund
 * sind das 2,07:1 — lesbar waere ab 4,5:1. Aufgefallen am Ergebnisfenster der
 * KI-Analyse (v1.0.59), wo in eben dieser Farbe die Begruendung der Bewertung
 * und die Quelle jedes Kontakts stehen: nicht Beiwerk, sondern der Inhalt.
 *
 * #6C757D bringt 4,73:1 und ist damit die kleinste Aenderung, die reicht.
 * Der Dunkelmodus bleibt unberuehrt — dort setzt dark-mode.css die Variable
 * auf #64748B, und die Regel hier greift wegen :not() nicht.
 *
 * Dieselbe Fehlerklasse wie die Einstellungs-Reiter (v1.0.41) und die
 * Anmeldeseite (v1.0.44): eine auf dunklen Grund gerechnete Farbe auf einer
 * Flaeche, die auch hell sein kann.
 *
 * ES MUSS DIE VARIABLE SEIN, NICHT DIE KLASSE. Der erste Versuch schrieb
 * `body:not(.dark-mode) .text-dim { color: … }` — wirkungslos, weil Universe
 * die Klasse als `.text-dim { color: var(--text-dim) !important; }` fuehrt.
 * Gegen !important hilft keine Spezifitaet. Ueber die Variable greift es,
 * ohne dass hier irgendwo ein zweites !important entsteht.
 */
body:not(.dark-mode) { --text-dim: #6c757d; }

/**
 * NICHT ANFASSEN: der Block oben (.dynos-modal .modal-content) ist ein
 * Nachfahren-Selektor, aber alle 48 Modale tragen beide Klassen auf DEMSELBEN
 * Element. Er greift also nirgends.
 *
 * Er sieht nach einem Einzeiler aus ("einfach .dynos-modal.modal-content
 * schreiben") — und genau das waere ein Rueckschritt: --card-bg steht auch im
 * Dunkelmodus auf #fff, die Regel wuerde die heute dunklen Dialoge weiss
 * faerben. Dass die Modale im Dunkeln richtig aussehen, macht dark-mode.css
 * aus Universe, nicht dieser Block. Wer hier aufraeumt, loescht ihn.
 */

/**
 * Abstand der Dialoge zur Universe-Modulleiste.
 *
 * Universe legt eine feste Leiste ueber jede Seite (#universModulesBar,
 * 42px hoch, z-index 9997). Bootstrap-Modale liegen auf 1055 — die Leiste
 * gewinnt also und deckt die obere Kante des Dialogs zu. Bootstrap gibt dem
 * Dialog nur 1.75rem = 28px Abstand nach oben; am 2026-08-19 im Browser
 * gemessen: Dialogkante bei 28px, Leistenunterkante bei 42px. Die obersten
 * 14 Pixel des Dialogkopfes lagen also hinter der Leiste. Aufgefallen an der
 * CRM-Pipeline, betrifft aber jedes Modal der App.
 *
 * Der Abstand sitzt auf .modal, nicht auf .modal-dialog: Nur so ruecken auch
 * zentrierte Dialoge (.modal-dialog-centered) mit, ohne dass ihre
 * min-height-Rechnung ueberlaeuft und einen Rollbalken erzeugt. .modal steht
 * auf border-box, das Innenmass schrumpft also mit — auch .modal-fullscreen
 * (templates/presentations.php) bleibt dadurch genau passend.
 *
 * 40px sind bewusst mehr als die 42px hohe Leiste minus der 28px Grundabstand
 * verlangen wuerden: buendig darunter sieht der Dialog geklemmt aus, und genau
 * das war die Meldung. Ergebnis: Oberkante bei 68px, 26px Luft unter der Leiste.
 *
 * Kein !important noetig — die Regel steht spaeter als bootstrap.min.css und
 * die Universe-Stylesheets und setzt eine Eigenschaft, die dort niemand belegt.
 */
:root { --modal-abstand-oben: 2.5rem; }
.modal { padding-top: var(--modal-abstand-oben); }

/* ──────────────────────────────────────────────────────────────────────────
 * <code> in einem Hinweiskasten war unsichtbar
 *
 * Gemessen am 2026-08-23 auf Einstellungen → Affiliate-Einbau: Schrift
 * rgb(226,232,240) auf Hintergrund rgb(226,227,229). Kontrast 1,04 — die
 * Zeichen sind da, man sieht sie nur nicht.
 *
 * Die Ursache liegt in zwei Stylesheets, die einzeln stimmen: Die Universe-
 * jarvis.css faerbt `code` fast weiss, weil der Seitenhintergrund dunkel ist.
 * Bootstrap gibt `.alert-*` einen HELLEN Kasten. Wer beides kombiniert —
 * naheliegend, wenn in einem Hinweis ein Feldname vorkommt — schreibt weiss
 * auf weiss.
 *
 * Deshalb hier und nicht im Markup der einen Stelle: Es ist keine vergessene
 * Klasse, sondern eine Falle, in die der Naechste genauso laeuft.
 *
 * `.alert-dark` ausgenommen: Das ist die einzige Bootstrap-Variante mit
 * dunklem Kasten, dort waere dunkle Schrift derselbe Fehler andersherum.
 *
 * Feste Farbe statt Variable ist hier richtig: Der Kastenhintergrund kommt von
 * Bootstrap und ist in BEIDEN Themen hell. Eine Variable, die mit dem Thema
 * umschlaegt, wuerde die Schrift im dunklen Thema wieder unlesbar machen.
 */
.alert:not(.alert-dark) code,
.alert:not(.alert-dark) kbd,
.alert:not(.alert-dark) samp {
    color: #1f2937;
    background: rgba(0, 0, 0, .07);
}

/* ──────────────────────────────────────────────────────────────────────────
 * Partnerseiten (.ak-*) — Konto UND Start
 *
 * Lag bis v1.0.203 im <style>-Block von templates/affiliate-konto.php. Als
 * templates/affiliate-start.php dazukam und dieselben Klassen benutzte,
 * standen dort nackte Zahlen untereinander: Klassen ohne Regeln melden sich
 * nicht, sie sehen nur kaputt aus.
 */
/* ══ Partnerkonto ═══════════════════════════════════════════════════════ */
.ak-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }

.ak-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .8rem; margin-bottom: 1.5rem; }
.ak-kachel {
    border: 1px solid rgba(255,255,255,0.08); border-radius: 12px;
    background: rgba(255,255,255,0.02); padding: 1rem 1.1rem;
}
.ak-kachel-wert { font-size: 1.7rem; font-weight: 600; line-height: 1.1; }
.ak-kachel-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim, #adb5bd); margin-top: .3rem; }
.ak-kachel-zusatz { font-size: .74rem; color: var(--text-dim, #adb5bd); margin-top: .45rem; }
.ak-kachel-gold .ak-kachel-wert { color: var(--accent, #C4AC7F); }

.ak-link-zeile { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.ak-link-feld {
    flex-grow: 1; min-width: 240px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: .55rem .7rem; color: inherit;
    font-family: ui-monospace, Consolas, monospace; font-size: .8rem;
}
.ak-knopf {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    color: inherit; border-radius: 8px; padding: .55rem .85rem;
    font-size: .8rem; cursor: pointer; white-space: nowrap;
}
.ak-knopf:hover { border-color: var(--accent, #C4AC7F); color: var(--accent, #C4AC7F); }
.ak-knopf.ak-gut { border-color: #2dce89; color: #2dce89; }

.ak-verlauf { border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; overflow: hidden; }
.ak-zeile {
    display: flex; align-items: center; gap: .8rem;
    padding: .65rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: .84rem;
}
.ak-zeile:last-child { border-bottom: none; }
.ak-art {
    width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: .8rem;
}
.ak-art-klick { background: rgba(56,189,248,.12); color: #38bdf8; }
.ak-art-lead  { background: rgba(45,206,137,.12); color: #2dce89; }
.ak-zeit { margin-left: auto; color: var(--text-dim, #adb5bd); font-size: .74rem; white-space: nowrap; }
.ak-leer {
    padding: 2.5rem 1.5rem; text-align: center; color: var(--text-dim, #adb5bd);
    border: 1px dashed rgba(255,255,255,0.12); border-radius: 12px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Kopfleiste: Begruessung und Tagesspruch
   Markup und Begruendung: templates/partials/header.php

   Sitzt als drittes Kind zwischen .header-left und .header-right. `.app-header`
   ist im Universe-CSS ein Flexbox mit `justify-content: space-between` — diese
   Zeile nimmt also den freien Raum in der Mitte, ohne dass Titel oder Knoepfe
   verrutschen. `min-width: 0` ist die Bedingung dafuer, dass `text-overflow`
   in einem Flex-Kind ueberhaupt greift: ohne sie waechst der Kasten ueber die
   Leiste hinaus, statt den Text zu kuerzen.

   Unter 1200 px vollstaendig ausgeblendet. Der Kopf laeuft auf schmalen
   Geraeten ohnehin schon ueber (bekannt und dokumentiert, DIV.header-right);
   ein weiterer Text waere dort keine Verbesserung, sondern eine zweite Ursache
   fuer dasselbe Problem.
   ══════════════════════════════════════════════════════════════════════════ */
.header-gruss {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    padding: 0 1.25rem;
    line-height: 1.25;
}
.header-gruss-text {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: .92rem;
    letter-spacing: .3px;
    color: var(--brand-color, #C5A55A);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Leer, solange das Skript nicht gelaufen ist — dann sollen auch die
   Anfuehrungszeichen nicht erscheinen. `:not(:empty)` erledigt das ohne
   zusaetzliche Klasse im JavaScript. */
.header-gruss-spruch:not(:empty)::before { content: '\201E'; }
.header-gruss-spruch:not(:empty)::after  { content: '\201C'; }
.header-gruss-spruch {
    font-size: .74rem;
    font-style: italic;
    color: var(--text-dim, #adb5bd);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1199.98px) {
    .header-gruss { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Passive Bestandskunden — die gelbe CRM-Spalte (SPEC P)
   Markup: templates/crm.php, Funktionen mit Praefix `pb`.

   KEINE neue Designsprache. Gelb ist #ffc107 — dieselbe Farbe, die die
   Prioritaets-Ampel als "mittel" benutzt (siehe .badge-prio-mittel weiter
   oben). Kartenrahmen, Radien und Abstaende stammen unveraendert von
   .crm-card; hier stehen nur die Ergaenzungen, die es dort noch nicht gibt.

   Jede Regel hat ihre Entsprechung fuer den hellen Modus. Das ist kein
   Beiwerk: #ffc107 auf Weiss hat einen Kontrast von 1.6:1 und ist als
   Textfarbe unlesbar. Im hellen Modus traegt deshalb der Kasten die Farbe
   und der Text wird dunkler.
   ══════════════════════════════════════════════════════════════════════════ */

/* Plus im Spaltenkopf — nur diese eine Spalte hat es. */
.crm-spalte-plus {
    background: rgba(255,193,7,0.18);
    border: 1px solid rgba(255,193,7,0.45);
    color: #ffc107;
    border-radius: 6px;
    line-height: 1;
    padding: 2px 6px;
    font-size: .8rem;
    cursor: pointer;
}
.crm-spalte-plus:hover { background: rgba(255,193,7,0.32); }

/* Werkzeugleiste zwischen Kopf und Karten */
.pb-leiste {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    padding: .4rem .5rem;
    background: rgba(255,193,7,0.07);
    border-bottom: 1px solid rgba(255,193,7,0.2);
    font-size: .72rem;
}
.pb-alle { display: flex; align-items: center; gap: .3rem; color: var(--text-dim, #adb5bd); cursor: pointer; margin: 0; }
.pb-zuordnen {
    background: rgba(255,193,7,0.16);
    border: 1px solid rgba(255,193,7,0.4);
    color: #ffc107;
    border-radius: 6px; padding: 2px 8px; font-size: .72rem; cursor: pointer;
    margin-left: auto;
}
.pb-zuordnen:hover:not(:disabled) { background: rgba(255,193,7,0.3); }
.pb-zuordnen:disabled { opacity: .45; cursor: default; }

/* Karte */
.pb-card { border-left: 3px solid rgba(255,193,7,0.55); }
.pb-card.ist-gewaehlt {
    border-color: rgba(255,193,7,0.9);
    background: rgba(255,193,7,0.10);
}
.pb-kopf { display: flex; align-items: center; gap: .35rem; margin-bottom: .35rem; }
.pb-haken { margin: 0; cursor: pointer; display: flex; }
.pb-frei { color: #ffc107; }

/* Telefon-Kennzeichnung.

   `fehlt` ist orange, nicht rot: Eine fehlende Nummer ist Arbeit, kein
   Fehler. Rot ist in diesem System fuer "kein Interesse" und "Gefahr"
   vergeben, und eine dritte Bedeutung derselben Farbe macht alle drei
   unschaerfer. */
.pb-tel-fehlt {
    display: inline-flex; align-items: center;
    color: #fd7e14; font-size: .72rem; margin-bottom: .25rem;
    font-weight: 600;
}
.pb-tel-offen {
    display: flex; align-items: center; gap: .3rem;
    font-size: .72rem; color: #ffc107; margin-bottom: .25rem;
}
/* Hoerer + Fragezeichen. Das Fragezeichen sitzt hochgestellt am Icon —
   die Icon-Schrift des Projekts hat keinen eigenen Glyph dafuer, und eine
   zweite Bibliothek nur fuer ein Zeichen waere unverhaeltnismaessig. */
.pb-tel-zeichen { position: relative; display: inline-block; padding-right: .35rem; }
.pb-frage { position: absolute; top: -.35em; right: 0; font-size: .8em; font-weight: 700; }
.pb-tel-info { color: var(--text-dim, #adb5bd); cursor: help; }
.pb-tel-ok   { color: #2dce89; }
.pb-tel-stand {
    font-size: .7rem; padding: 1px 6px; border-radius: 4px; margin-left: .4rem;
}
.pb-tel-stand.ist-bestand      { background: rgba(255,255,255,0.08); color: var(--text-dim, #adb5bd); }
.pb-tel-stand.ist-validiert    { background: rgba(45,206,137,0.18);  color: #2dce89; }
.pb-tel-stand.ist-recherchiert { background: rgba(255,193,7,0.18);   color: #ffc107; }

/* Kontaktfenster */
.pb-frist { font-size: .7rem; margin-top: .25rem; }
.pb-frist.ist-offen { color: var(--text-dim, #adb5bd); }
.pb-frist.ist-knapp { color: #ffc107; font-weight: 600; }
.pb-frist.ist-ab    { color: #fd7e14; font-weight: 600; }

/* Dialog: Vorbereitung Ersttermin */
.pb-warnung {
    background: rgba(253,126,20,0.10);
    border: 1px solid rgba(253,126,20,0.45);
    border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1rem;
    color: #fd7e14;
}
.pb-warnung ul { padding-left: 1.1rem; }
.pb-luecken {
    background: rgba(255,193,7,0.08);
    border: 1px solid rgba(255,193,7,0.35);
    border-radius: 8px; padding: .6rem .9rem; margin-bottom: 1rem;
    color: #ffc107;
}
.pb-luecken ul { padding-left: 1.1rem; }
.pb-vollstaendig { color: #2dce89; margin-bottom: 1rem; }
.pb-block { margin-bottom: 1rem; }
.pb-block-titel {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .4px;
    color: var(--text-dim, #adb5bd); margin-bottom: .35rem;
    border-bottom: 1px solid rgba(255,255,255,0.07); padding-bottom: .2rem;
}
.pb-feld { display: flex; gap: .75rem; padding: .18rem 0; font-size: .82rem; align-items: baseline; }
.pb-feld-k { flex: 0 0 8.5rem; color: var(--text-dim, #adb5bd); font-size: .76rem; }
.pb-feld-w { flex: 1 1 auto; min-width: 0; }
.pb-verlauf-zeile {
    display: flex; gap: .6rem; padding: .2rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.pb-verlauf-zeile > :first-child { flex: 0 0 8.5rem; }
.pb-verlauf-zeile > :nth-child(2) { flex: 1 1 auto; min-width: 0; }
.pb-telform {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,193,7,0.3);
    border-radius: 8px; padding: .6rem .75rem; margin-top: .5rem;
}

/* ── Heller Modus ──────────────────────────────────────────────────────── */
body:not(.dark-mode) .crm-spalte-plus     { background: rgba(255,193,7,0.22); border-color: rgba(184,133,0,0.5); color: #8a6100; }
body:not(.dark-mode) .pb-leiste           { background: rgba(255,193,7,0.12); border-bottom-color: rgba(184,133,0,0.3); }
body:not(.dark-mode) .pb-zuordnen         { background: rgba(255,193,7,0.22); border-color: rgba(184,133,0,0.45); color: #8a6100; }
body:not(.dark-mode) .pb-card             { border-left-color: rgba(184,133,0,0.6); }
body:not(.dark-mode) .pb-card.ist-gewaehlt{ background: rgba(255,193,7,0.14); border-color: rgba(184,133,0,0.7); }
body:not(.dark-mode) .pb-frei             { color: #8a6100; }
body:not(.dark-mode) .pb-tel-fehlt        { color: #b85500; }
body:not(.dark-mode) .pb-tel-offen        { color: #8a6100; }
body:not(.dark-mode) .pb-tel-ok           { color: #0a6641; }
body:not(.dark-mode) .pb-tel-stand.ist-bestand      { background: rgba(0,0,0,0.06);       color: #495057; }
body:not(.dark-mode) .pb-tel-stand.ist-validiert    { background: rgba(25,135,84,0.13);   color: #0a6641; }
body:not(.dark-mode) .pb-tel-stand.ist-recherchiert { background: rgba(255,193,7,0.22);   color: #8a6100; }
body:not(.dark-mode) .pb-frist.ist-knapp  { color: #8a6100; }
body:not(.dark-mode) .pb-frist.ist-ab     { color: #b85500; }
body:not(.dark-mode) .pb-warnung          { background: rgba(253,126,20,0.10); border-color: rgba(184,85,0,0.5);  color: #b85500; }
body:not(.dark-mode) .pb-luecken          { background: rgba(255,193,7,0.14);  border-color: rgba(184,133,0,0.45); color: #8a6100; }
body:not(.dark-mode) .pb-vollstaendig     { color: #0a6641; }
body:not(.dark-mode) .pb-block-titel      { border-bottom-color: rgba(0,0,0,0.08); }
body:not(.dark-mode) .pb-verlauf-zeile    { border-bottom-color: rgba(0,0,0,0.06); }
body:not(.dark-mode) .pb-telform          { background: rgba(0,0,0,0.03); border-color: rgba(184,133,0,0.35); }