/* CRM Innendienst – Oberfläche (Funktion 1:1 wie die Power App „CRM Innendienst 3-Gallery Umbau“, Optik modernisiert 10.10.2026)
   Ruhige Flächen, klare Hierarchie: dunkle Kopfleiste mit Reitern, Kopfzeile mit Status und JSB, Karten für Liste und Kundenakte. */
:root {
  --nav: #8e0038;          /* Kopfleiste – ERGO-Weinrot (Thomas 13.10.2026: „es soll mehr weinrot sein wie ergo“) */
  --nav-dunkel: #6b002a;
  --nav-soft: #f6e3ec;
  --nav-aktiv: #7a0030;
  --nav-hover: #a6134a;
  --flaeche: #eef1f6;      /* Seitenhintergrund */
  --karte: #ffffff;
  --text: #1e293b;
  --text-leise: #64748b;
  --warn-text: #b91c1c;
  --blau: #2563eb;         /* Akzent / Knöpfe */
  --blau-dunkel: #1d4ed8;
  --navy-text: #1e3a5f;
  --tab-aktiv: #e8eef8;
  --orange-feld: #fed7aa;  /* V3: markiert ohne Versandbeleg */
  --feldrand: #d5dbe5;
  --kopf: #f8fafc;
  --linie: #e5e9f0;        /* feine Trennlinien */
  --schatten: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.07);
  --schrift: 'Segoe UI Variable Text', 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}
html, body { height: 100%; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--flaeche); color: var(--text); font: 13px/1.35 var(--schrift); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--blau); outline-offset: 1px; }

/* ---------- Kopfleiste: Marke · Gruppen-Reiter mit Anzahl · Wer ist da · angemeldeter Nutzer (weinrot, bleibt beim Scrollen oben) ---------- */
.kopfleiste { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 16px; background: linear-gradient(180deg, #98003c 0%, #7a0030 100%); color: #fff; }
.marke { display: flex; align-items: baseline; gap: 6px; flex: 0 0 auto; font-weight: 700; font-size: 16px; letter-spacing: .01em; white-space: nowrap; }
.marke-klein { font-weight: 400; font-size: 12px; opacity: .85; }
.nav { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: nowrap; gap: 2px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav button { flex: 0 0 auto; height: 36px; padding: 0 11px; border: 0; border-radius: 10px; background: transparent; color: rgba(255,255,255,.88); font-weight: 600; font-size: 13.5px;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; transition: background .12s, color .12s; }
.nav button:hover { background: rgba(255,255,255,.14); color: #fff; }
.nav button[aria-pressed="true"] { background: #fff; color: var(--nav); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.nav .n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: rgba(255,255,255,.2); color: #fff; font-size: 11.5px; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }
.nav button[aria-pressed="true"] .n { background: var(--nav-soft); color: var(--nav); }
.nav .n.heiss { background: #ffd166; color: #3a2600; }
.nav .n.rot { background: #fff; color: var(--nav); box-shadow: inset 0 0 0 2px #e6a6c3; }
.nav button[aria-pressed="true"] .n.rot { background: #fde3e1; color: #b3261e; box-shadow: none; }
/* Wer ist gerade im CRM: Kürzel-Kreise, grüner Punkt = da, grau = nicht da; dazu die Zahl wartender Freigaben (Chef) */
.werda { display: flex; gap: 5px; align-items: center; flex: 0 0 auto; }
.werda-chip { width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); color: #fff; font-size: 11px; font-weight: 700; position: relative; cursor: pointer; padding: 0; }
.werda-chip:hover { background: rgba(255,255,255,.3); }
.werda-chip.off { opacity: .55; }
.werda-chip .dot { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #86003a; background: #b7bcc3; box-sizing: border-box; }
.werda-chip .dot.on { background: #35d07f; }
.werda-badge { min-width: 24px; height: 24px; margin-left: 6px; border-radius: 999px; background: #fff; color: var(--nav); font-weight: 800; font-size: 12.5px; display: inline-grid; place-content: center; padding: 0 6px; border: 0; cursor: pointer; box-shadow: 0 0 0 2px #e6a6c3; flex: 0 0 auto; }
/* Unterleiste: Unterreiter (Alle · Zahn · RS · Gewerbe / Abschluss · Keine Abschlüsse · Storno) bzw. die Aufgaben-Leiste – bleibt unter der Kopfleiste stehen */
.unter { position: sticky; top: 56px; z-index: 40; background: #fff; border-bottom: 1px solid var(--linie); padding: 0 16px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; align-items: center; min-height: 42px; }
.unter::-webkit-scrollbar { display: none; }
.unter button { flex: 0 0 auto; height: 30px; padding: 0 11px; border: 1px solid transparent; border-radius: 999px; background: transparent; font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; color: var(--text); }
.unter button:hover { background: #f6f2f3; }
.unter button[aria-pressed="true"] { background: var(--nav-soft); color: var(--nav-dunkel); border-color: var(--nav-soft); }
.unter button .z { background: #e8e4e5; color: var(--text); border-radius: 999px; min-width: 20px; padding: 0 6px; font-size: 11.5px; font-variant-numeric: tabular-nums; text-align: center; }
.unter button .z.rot { background: #fde3e1; color: #b3261e; }
.unter select.af-person { flex: 0 0 auto; height: 30px; border-radius: 999px; border: 1px solid var(--linie); background: #faf7f8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23777' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 9px center; padding: 0 24px 0 11px; font-weight: 600; font-size: 13px; appearance: none; -webkit-appearance: none; cursor: pointer; color: var(--text); }
.unter select.af-person.aktiv { background-color: var(--nav-soft); color: var(--nav-dunkel); border-color: var(--nav-soft); }
.nutzer-box { position: relative; flex: 0 0 auto; }
.nutzer { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; font: inherit; font-size: 12.5px; color: rgba(255,255,255,.75); white-space: nowrap; background: transparent; border: 0; padding: 4px 6px; border-radius: 10px; cursor: pointer; }
.nutzer:hover, .nutzer[aria-expanded="true"] { background: rgba(255,255,255,.09); color: #fff; }
.nutzer-pfeil { font-size: 10px; opacity: .7; }
.nutzer-menue { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 230px; background: #fff; color: #0f172a; border: 1px solid #e3e8ef; border-radius: 10px; box-shadow: 0 10px 30px rgba(15,23,42,.18); padding: 6px; display: grid; gap: 2px; }
.nutzer-menue[hidden] { display: none; }
.nm-wer { display: grid; gap: 1px; padding: 8px 10px 10px; border-bottom: 1px solid #eef1f5; margin-bottom: 4px; } .nm-wer small { color: #64748b; }
.nutzer-menue button { all: unset; cursor: pointer; padding: 8px 10px; border-radius: 6px; font-size: 13px; }
.nutzer-menue button:hover, .nutzer-menue button:focus-visible { background: #f1f5f9; }
.nutzer-menue .nm-ab { color: #b91c1c; font-weight: 600; }
.nutzer-kz { width: 32px; height: 32px; border-radius: 50%; display: grid; place-content: center; background: rgba(255,255,255,.14); color: #fff; font-weight: 700; font-size: 12px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
@media (max-width: 1480px) { .nutzer-name { display: none; } }
/* 12.10.2026: Reiter wurden bei 1280–1440 px rechts abgeschnitten – seit den Gruppen-Reitern (13.10.) reicht der Platz; schmal: Marke kürzer, Reiter enger */
@media (max-width: 1340px) { .nav button { padding: 0 8px; gap: 5px; } .marke-klein { display: none; } }
@media (max-width: 1240px) { .nav button { padding: 0 7px; font-size: 12.5px; } }
@media (max-width: 1000px) { .werda { display: none; } }
@media (max-width: 860px) { .marke-text { display: none; } }

/* ---------- Kopfzeile: Speicher-/Wochenstatus links, Team-JSB rechts ---------- */
.kopfzeile { display: flex; align-items: center; gap: 16px; padding: 10px 18px 0; min-height: 58px; }
/* Statuszeile in Teilen (Erinnerungen | Leads | Leadquote): jeder Teil als Block in der Zeile – Umbruch zwischen den Teilen, ein zu langer
   Teil bricht in sich um; höchstens 3 Zeilen (schmal 5). Erklärung jeder Zahl im Tooltip */
.statuszeile { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 12.5px; line-height: 1.5; max-height: 4.5em; color: var(--text-leise); overflow: hidden; cursor: help; }
.st-teil { display: inline-block; position: relative; margin-right: 22px; }
.st-trenner { color: #94a3b8; margin: 0 8px 0 -14px; } /* echter Trenner zwischen den Teilen (24.10.2026) */
.st-teil.warn { color: var(--warn-text); }
.statuszeile button { all: unset; cursor: pointer; }
.jsb { display: flex; gap: 10px; flex: 0 0 auto; }
.jsb-monat { width: 252px; padding: 7px 12px 7px; border-radius: 12px; background: #fff; box-shadow: var(--schatten); border: 1px solid #e3e8ef; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.jsb-monat:hover { border-color: #9db8ec; }
.jsb-monat:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.jsb-monat.aktuell { border-color: #c7d7f7; }
/* Monat gesperrt (fehlende Vertragsangaben): vorläufiger Wert, gestreifter Balken, Hinweis in voller Länge (umbrechend, nie abgeschnitten) */
.jsb-monat.pruefen { width: 288px; background: #fffbf3; border-color: #f3d9a4; } /* breiter: „vorläufig 12.345 € / 20.000 €“ passt in eine Zeile */
.jsb-monat.pruefen:hover { border-color: #e0b35c; }
.jsb-wert em { font-style: normal; font-size: 11px; font-weight: 600; color: #b45309; }
.jsb-wert.fehlt { color: #b45309; font-weight: 600; }
.jsb-monat.pruefen .jsb-balken i { background: repeating-linear-gradient(135deg, #f59e0b 0 5px, #fcd34d 5px 10px); }
.jsb-hinweis { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; font-size: 11.5px; line-height: 1.35; color: #92400e; font-weight: 600; }
.jsb-luecke { display: block; }
.jsb-link { margin-left: auto; color: var(--blau); white-space: nowrap; }
.jsb-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; white-space: nowrap; }
.jsb-titel { font-weight: 600; color: var(--text-leise); }
.jsb-wert { color: var(--text-leise); font-variant-numeric: tabular-nums; }
.jsb-wert b { color: var(--text); font-size: 13.5px; font-weight: 700; }
.jsb-balken { height: 6px; margin: 5px 0 4px; border-radius: 3px; background: #e8edf4; overflow: hidden; }
.jsb-balken i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #60a5fa, var(--blau)); transition: width .4s ease; }
.jsb-monat.erreicht .jsb-balken i { background: linear-gradient(90deg, #4ade80, #16a34a); }
.jsb-info { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--text-leise); white-space: nowrap; overflow: hidden; }
.jsb-info span { overflow: hidden; text-overflow: ellipsis; }
.jsb-monat.erreicht .jsb-info span:first-child { color: #15803d; font-weight: 600; }
.jsb-namen { color: #94a3b8; }
@media (max-width: 1100px) { .kopfzeile { flex-wrap: wrap; } .statuszeile { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) { .jsb-balken i { transition: none; } }

/* ---------- Abschluss-Leiste (conVMCAbschlussLeisteV292) ---------- */
.abschluss-leiste { margin: 2px 18px 0; height: 42px; display: flex; gap: 14px; align-items: center; overflow-x: auto; }
.abschluss-leiste button { height: 32px; flex: 0 0 auto; border: 0; border-radius: 4px; background: var(--blau); color: #fff; font-weight: 600; font-size: 13.33px; padding: 0 12px; }
.abschluss-leiste button:nth-child(1) { width: 220px; } .abschluss-leiste button:nth-child(2) { width: 310px; } .abschluss-leiste button:nth-child(3) { width: 274px; }

/* ---------- Arbeitsbereich ---------- */
.arbeit { display: flex; gap: 12px; padding: 10px 18px 16px; height: calc(100vh - 124px); min-height: 480px; }
.arbeit.mit-leiste { height: calc(100vh - 170px); }
.karte { background: var(--karte); border-radius: 12px; min-width: 0; border: 1px solid #e3e8ef; box-shadow: var(--schatten); }
.zur-liste { display: none; margin: 8px 18px 0; height: 34px; border: 0; border-radius: 9px; background: var(--blau); color: #fff; font-weight: 600; padding: 0 14px; }

.leads { flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; }
.suchzeile { flex: 0 0 auto; display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--linie); }
.suchfeld { position: relative; display: flex; align-items: center; flex: 0 1 340px; min-width: 180px; }
.suchfeld .i { position: absolute; left: 10px; width: 16px; height: 16px; color: #94a3b8; pointer-events: none; }
.suche { width: 100%; height: 34px; border: 1px solid var(--feldrand); border-radius: 9px; padding: 0 10px 0 33px; background: #f8fafc; font-size: 13px; transition: border-color .12s, box-shadow .12s, background .12s; }
.suche::placeholder { color: #98a2b3; }
.suche:hover { border-color: #c3ccd9; }
.suche:focus { outline: none; background: #fff; border-color: #93b4f5; box-shadow: 0 0 0 3px rgba(37,99,235,.14); }
.treffer { font-size: 12px; color: var(--text-leise); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tarif-offen { margin-left: auto; height: 32px; padding: 0 12px; border: 1px solid #fcd34d; border-radius: 9px; background: #fffbeb; color: #92400e; font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.tarif-offen:hover { background: #fef3c7; }

.tabelle-rahmen { flex: 1 1 auto; overflow: auto; min-height: 120px; position: relative; }
.mehr-laden { position: sticky; left: 0; display: block; width: 100%; max-width: 100vw; height: 40px; border: 0; background: transparent; color: var(--text-leise); font-size: 12px; }
.mehr-laden:hover { color: var(--blau); }
.tabelle-rahmen.leer::after { content: attr(data-leer); position: absolute; top: 70px; left: 0; right: 0; text-align: center; color: var(--text-leise); font-size: 13px; }
table.leadtab { font-size: 13px; border-collapse: separate; border-spacing: 0; table-layout: fixed; width: max(1520px, 100%); font-variant-numeric: tabular-nums; }
.leadtab thead th { position: sticky; top: 0; z-index: 2; background: var(--kopf); color: #5b6678; font-size: 11.5px; font-weight: 600; text-align: left; padding: 0 2px; height: 34px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--linie); }
.leadtab thead th.z, .leadtab td.z { text-align: center; }
.leadtab td { padding: 0 1px; height: 34px; white-space: nowrap; vertical-align: middle; overflow: hidden; border-bottom: 1px solid rgba(15,23,42,.06); }
.leadtab tr.zeile:hover td { background-image: linear-gradient(rgba(15,23,42,.035), rgba(15,23,42,.035)); }
.leadtab tr.zeile.gewaehlt td { background-image: linear-gradient(rgba(37,99,235,.09), rgba(37,99,235,.09)); box-shadow: inset 0 1px 0 #9dbcf6, inset 0 -1px 0 #9dbcf6; }
.leadtab tr.zeile.gewaehlt td:first-child { box-shadow: inset 3px 0 0 var(--blau), inset 0 1px 0 #9dbcf6, inset 0 -1px 0 #9dbcf6; }
.leadtab tr.zeile.gewaehlt td:last-child { box-shadow: inset 0 1px 0 #9dbcf6, inset 0 -1px 0 #9dbcf6; }
.leadtab .txt { display: block; overflow: hidden; text-overflow: ellipsis; padding: 0 3px; }
.leadtab .eingang { cursor: pointer; color: #475569; }
.leadtab .produkt { padding-left: 3px; white-space: normal; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Eingabefelder in der Tabelle: ruhig ohne Rahmen, Rahmen erst bei Maus/Fokus */
.feld { width: 100%; height: 26px; border: 1px solid transparent; border-radius: 6px; background: transparent; padding: 0 5px; font-size: 13px; color: var(--text); transition: border-color .12s, background .12s, box-shadow .12s; }
.feld:hover:not([readonly]):not(:disabled) { border-color: #c3ccd9; background: rgba(255,255,255,.75); }
.feld:focus:not([readonly]) { outline: none; border-color: #93b4f5; background: #fff; box-shadow: 0 0 0 2px rgba(37,99,235,.15); }
.feld[readonly], .feld:disabled { border-color: transparent; background: transparent; }
.feld::placeholder { color: #a3acb9; }
select.feld { padding: 0 2px; }
/* Stift oben rechts im Feld (Thomas 31.10.2026: „damit man nicht ausversehen etwas löscht“) – Vorname, Nachname, Bday, Telefon, E-Mail:
   nur lesbar, Klick auf den Stift gibt das Feld frei (Häkchen = speichern, Esc = abbrechen) */
.stift-feld { position: relative; min-width: 0; flex: 1 1 auto; }
.stift-feld > .feld { padding-right: 18px; }
.stift-knopf { position: absolute; top: 1px; right: 1px; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 4px; background: transparent;
  color: #94a3b8; display: inline-grid; place-content: center; cursor: pointer; opacity: .55; font: 700 11px/1 inherit; transition: opacity .12s, background .12s, color .12s; }
.stift-knopf .i { width: 11px; height: 11px; }
tr:hover .stift-knopf, .stift-feld:hover .stift-knopf, .stift-knopf:focus-visible { opacity: 1; color: var(--blau); }
.stift-knopf:hover { background: rgba(37,99,235,.12); }
.stift-feld.offen .stift-knopf { opacity: 1; color: #fff; background: #16a34a; }
.stift-feld.offen .stift-knopf:hover { background: #15803d; }
.feld[readonly][data-stift-sperre] { cursor: default; }
.details .stift-feld > .feld { padding-right: 28px; }
.details .stift-knopf { top: 3px; right: 3px; width: 20px; height: 20px; font-size: 13px; }
.details .stift-knopf .i { width: 13px; height: 13px; }
.details .stift-feld:not(.offen) > input.feld[readonly][data-stift-sperre] { background: #f8fafc; border-color: var(--feldrand); color: var(--text); }
/* Hörer neben der Telefonnummer (Thomas 12.10.2026): Klick ruft an */
.tel-zelle { display: flex; align-items: center; gap: 0; min-width: 0; }
.tel-zelle .feld { flex: 1 1 auto; min-width: 0; }
.tel-knopf { flex: 0 0 24px; width: 24px; height: 24px; display: inline-grid; place-content: center; border-radius: 6px; color: var(--blau); text-decoration: none; transition: background .12s, color .12s; }
.tel-knopf .i { width: 15px; height: 15px; display: block; }
.tel-knopf:hover { background: #e0ebff; color: var(--blau-dunkel); }
.tel-knopf:focus-visible { outline: 2px solid var(--blau); outline-offset: 1px; }

/* Klickfläche mit ▾ wie btnCRMAnredeOpen / btnCRMTarifOpen…V339 */
.wahl { width: 100%; height: 28px; max-height: 28px; overflow: hidden; border: 0; border-radius: 6px; background: transparent; text-align: left; font-weight: 600; font-size: 12.5px; padding: 0 4px; line-height: 13px; white-space: normal; color: var(--text); display: block; }
.wahl:hover:not(:disabled) { background: rgba(37,99,235,.09); }
.wahl:disabled { cursor: default; }
/* direkte Auswahllisten in der Zeile (Anrede, Zahnersatz, Zahnerhalt, SB, Ö.D.) – speichern sofort */
.zellwahl { width: 100%; height: 28px; border: 1px solid transparent; border-radius: 6px; padding: 0 16px 0 4px; font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer;
  appearance: none; -webkit-appearance: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 4px center / 9px 6px; }
.zellwahl:hover:not(:disabled) { background-color: rgba(37,99,235,.09); }
.zellwahl:focus { outline: none; border-color: #93b4f5; background-color: #fff; }
.zellwahl.leer { color: #8a94a6; font-weight: 500; }
.zellwahl option { font-weight: 400; color: var(--text); }
.zellwahl:disabled { cursor: default; background-image: none; opacity: 1; color: var(--text); }

/* Häkchen wie Classic/CheckBox (CheckboxSize 14); V3: orange = markiert ohne Versandbeleg */
.haken { appearance: none; width: 14px; height: 14px; margin: 0; border: 1px solid #605e5c; border-radius: 0; background: #fff; display: inline-grid; place-content: center; vertical-align: middle; cursor: pointer; }
.haken::after { content: ''; width: 8px; height: 4px; border: solid transparent; border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px); }
.haken:checked::after { border-color: var(--blau); }
.haken.orange { background: var(--orange-feld); }
.haken.orange::after { border-color: transparent !important; }
.haken.aus { border-color: #c8c6c4; cursor: default; }
.haken.aus:checked::after { border-color: #a19f9d; }
.haken.ansicht { cursor: default; }
td.rot { box-shadow: inset 0 0 0 2px #dc2626; }

/* Statusfeld (conCRMStatusField…V336) */
.statusfeld { position: relative; width: 140px; height: 24px; border: 1px solid #f5f5f5; display: flex; align-items: center; } /* 140: Kurzformen der Status-Anzeigenamen (24.10.2026) */
.statusfeld button { all: unset; box-sizing: border-box; width: 100%; height: 100%; padding: 0 16px 0 21px; font-size: 13.33px; color: var(--text); cursor: pointer; border-radius: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.statusfeld button:hover:not([aria-disabled="true"]) { background: rgba(59,130,246,.10); }
.statusfeld button[aria-disabled="true"] { cursor: default; }
.statusfeld .punkt { position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; pointer-events: none; }
.statusfeld .chev { position: absolute; right: 0; top: 0; width: 16px; height: 22px; display: grid; place-content: center; font-size: 16px; pointer-events: none; }
.punkt-i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 1px solid; }

.chef { width: 130px; height: 28px; border: 0; background: #f8fafc; padding-left: 12px; font-size: 13.33px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, #323130 50%), linear-gradient(135deg, #323130 50%, transparent 50%); background-position: calc(100% - 18px) 12px, calc(100% - 12px) 12px; background-size: 6px 6px; background-repeat: no-repeat; }
.chef:disabled { background-image: none; opacity: 1; color: var(--text); }

/* Legende als ruhige Fußzeile der Liste (ohne Namenskürzel) */
.legende { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 6px 14px 7px; border-top: 1px solid var(--linie); background: #fafbfd; border-radius: 0 0 12px 12px; }
.legende summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.legende summary::-webkit-details-marker { display: none; }
.legende summary .punkte { flex: 1; min-width: 0; flex-wrap: wrap; } /* alle Statusfarben sichtbar (bricht bei Bedarf um) */
.legende[open] summary .punkte { flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; }
.lg-mehr { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--blau); white-space: nowrap; }
.legende:not([open]) { padding-top: 3px; padding-bottom: 3px; } /* zugeklappt nur eine kleine Zeile (24.10.2026) */
.lg-mehr::after { content: ' ▸'; } .legende[open] .lg-mehr::after { content: ' ▾'; }
.punkte, .legende .zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin: 0; font-family: var(--schrift); font-size: 11px; line-height: 18px; color: #64748b; }
.punkte span { display: inline-flex; align-items: center; white-space: nowrap; }
.punkte i { display: inline-block; width: 8px; height: 8px; border: 1px solid; border-radius: 50%; margin-right: 5px; }
.lg-titel { font-weight: 600; color: #475569; }
.lg-k { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.legende .lg-box { pointer-events: none; margin-right: 2px; } .legende .lg-box .haken { width: 12px; height: 12px; }
.legende .lg-abk { color: #8a94a6; }
.leadtab .feld { padding: 0 2px; }

/* ---------- Rechte Spalte / Kundenakte (conKundenakte) ---------- */
.akte { flex: 0 0 auto; display: flex; flex-direction: column; overflow: hidden; padding: 14px 14px 12px; gap: 10px; }
.akte-kopf { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; min-height: 44px; }
.akte-avatar { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-content: center; color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .02em; }
.akte-avatar.leer { background: #e2e8f0; }
.akte-name { flex: 1; min-width: 0; }
.akte-kopf h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; }
/* 12.10.2026: ohne Unterzeile – lange Namen dürfen zweizeilig werden statt abgeschnitten */
.akte-kopf:not(.leer) h2 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.akte-unter { font-size: 12px; color: var(--text-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.akte-aktionen { display: flex; gap: 2px; flex: 0 0 auto; }
.ikon { width: 32px; height: 32px; border: 0; padding: 0; border-radius: 8px; background: transparent; color: #475569; display: inline-grid; place-content: center; flex: 0 0 32px; transition: background .12s, color .12s; }
.ikon .i { width: 18px; height: 18px; display: block; }
.ikon.wa { color: #25d366; } .ikon.wa .i { width: 20px; height: 20px; }
.ikon.mail { color: #dc2626; }
.ikon:hover:not(:disabled) { background: #eef2f7; color: var(--blau); }
.ikon.wa:hover:not(:disabled) { color: #1da851; } .ikon.mail:hover:not(:disabled) { color: #b91c1c; }
.ikon[aria-pressed="true"] { background: #dbe7ff; box-shadow: inset 0 0 0 1.5px #3b6fd8; }
/* Thomas 27.10.2026: Filter links, Trennstrich, Aktionen rechts */
.akte-filter, .akte-tun { display: flex; gap: 2px; align-items: center; }
.akte-trenner { width: 1px; align-self: stretch; margin: 6px 6px; background: #d5dbe5; }
.ikon:disabled { opacity: .35; cursor: default; }
.akte-reiter { flex: 0 0 auto; display: flex; gap: 2px; padding: 3px; background: #f1f4f8; border-radius: 10px; }
.akte-reiter button { flex: 1; height: 30px; border: 0; border-radius: 8px; background: transparent; color: #475569; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.akte-reiter button:hover { color: var(--text); }
.akte-reiter button[aria-pressed="true"] { background: #fff; color: var(--text); box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 1px 3px rgba(15,23,42,.06); }
.akte-reiter .zahl { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e2e8f0; color: #475569; font-size: 11px; line-height: 18px; font-weight: 600; }
.akte-reiter button[aria-pressed="true"] .zahl { background: #dbe7fe; color: #1d4ed8; }
.akte-inhalt { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.verlauf-liste { flex: 1 1 auto; overflow: auto; min-height: 60px; padding: 2px 2px 6px; position: relative; }
.akte-leer { color: var(--text-leise); padding: 18px 4px; font-size: 13px; line-height: 1.5; }
.verlauf-filter { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; padding: 6px 10px; border-radius: 8px; background: #eef4ff; color: #1e3a8a; font-size: 12px; font-weight: 600; }
.verlauf-filter button { border: 0; background: transparent; color: var(--blau); font-weight: 600; font-size: 12px; padding: 2px 4px; }
/* Zeitleiste: farbiger Kreis je Kanal, feine Linie, Einträge als ruhige Karten */
.verlauf-eintrag { position: relative; display: grid; grid-template-columns: 30px 1fr; font-family: var(--schrift); padding-bottom: 2px; }
.verlauf-eintrag::before { content: ''; position: absolute; left: 13px; top: 30px; bottom: -2px; width: 2px; background: #edf1f6; }
.verlauf-eintrag:last-child::before { display: none; }
.verlauf-eintrag .vk { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%; color: #fff; display: grid; place-content: center; margin: 6px 0 0 1px; box-shadow: 0 0 0 3px #fff; }
.verlauf-eintrag .vk .i { width: 14px; height: 14px; }
.verlauf-eintrag.typ-wa .vk .i { width: 16px; height: 16px; }
.verlauf-eintrag .vt { margin: 0 0 6px 6px; padding: 7px 64px 8px 10px; border-radius: 10px; min-width: 0; transition: background .12s; }
.verlauf-eintrag:hover .vt { background: #f7f9fc; }
.verlauf-eintrag.eingehend .vt { background: #f2fbf5; box-shadow: inset 3px 0 0 #22c55e; }
.verlauf-eintrag.in-arbeit .vt { background: #f5f9ff; box-shadow: inset 0 0 0 1px #bfd3fb; padding-right: 10px; }
.verlauf-eintrag.auftrag .vt { padding-right: 10px; }
.v-kopf { font-size: 12px; display: flex; align-items: baseline; gap: 8px; }
.v-kopf b { flex: 1; min-width: 0; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-zeit { flex: 0 0 auto; color: #8a94a6; font-size: 11px; font-variant-numeric: tabular-nums; }
.v-sub { font-size: 11.5px; color: var(--text-leise); margin-top: 2px; }
.v-text { font-size: 12.5px; line-height: 1.45; color: #1f2937; margin-top: 3px; white-space: pre-wrap; word-break: break-word; }
.badge { display: inline-block; margin-top: 4px; font-size: 10.5px; font-weight: 600; background: #dbeafe; color: #1e40af; padding: 2px 7px; border-radius: 999px; }
.badge.wartet { background: #ffedd5; color: #9a3412; }
.badge.unterschrieben { background: #dcfce7; color: #166534; } /* 0330: Unterschrift fertig, zählt nicht unter Heute fällig */
/* 02.11.2026: Angebot aus Kunden-Unterlagen wartet auf Thomas – roter Knopf am Namen, Lead steht unter Heute fällig ganz oben */
.badge.angebot-offen { display: block; width: max-content; max-width: 100%; margin-top: 2px; border: 0; cursor: pointer; background: #dc2626; color: #fff;
  font: 600 10.5px/1.3 inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge.angebot-offen:hover { background: #b91c1c; }
.badge.angebot-offen.gross { font-size: 13px; padding: 5px 12px; margin-top: 6px; }
.angebot-karte { border-color: #fca5a5; background: #fef2f2; }
.badge.name-pruefen { display: block; width: max-content; margin-top: 2px; background: #b91c1c; color: #fff; } /* 02.11.2026: Vorname = Nachname o. ä. */
/* 0171: Mail ohne Versandbestätigung (> 15 Min.) – rot mit „Ist raus“ / „Nochmal senden“ */
.badge.unbestaetigt { background: #fee2e2; color: #991b1b; white-space: normal; }
.verlauf-eintrag.auftrag.unbestaetigt .vt { background: #fef2f2; box-shadow: inset 3px 0 0 #dc2626; }
.v-unb-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 7px; }
.v-unb-knoepfe .knopf { height: 28px; font-size: 12.5px; }
.v-ikonen { position: absolute; top: 4px; right: 4px; display: flex; gap: 0; }
.v-ikonen button { width: 28px; height: 28px; border: 0; border-radius: 7px; background: transparent; padding: 0; display: grid; place-content: center; color: #94a3b8; }
.v-ikonen button .i { width: 15px; height: 15px; }
.v-ikonen .bearbeiten:hover { color: var(--blau); background: #e8f0fe; }
.v-ikonen .loeschen:hover { color: #dc2626; background: #fdecec; }
.v-edit { margin-top: 6px; display: grid; gap: 6px; }
.v-edit textarea { width: 100%; min-height: 60px; resize: none; border: 1px solid #bfd3fb; border-radius: 8px; padding: 7px 9px; font-size: 12.5px; line-height: 1.45; background: #fff; outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.v-edit-fuss, .v-frage { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-leise); }
.v-edit-fuss span, .v-frage span { flex: 1; min-width: 0; }
.v-frage { margin-top: 8px; padding: 6px 8px; border-radius: 8px; background: #fef2f2; color: #991b1b; font-size: 12px; font-weight: 600; }
.mini { height: 26px; padding: 0 10px; border: 1px solid #d5dbe5; border-radius: 7px; background: #fff; color: var(--text); font-size: 12px; font-weight: 600; }
.mini:hover { background: #f4f6fa; }
.mini.primaer { background: var(--blau); border-color: var(--blau); color: #fff; } .mini.primaer:hover { background: var(--blau-dunkel); }
.mini.rot { background: #dc2626; border-color: #dc2626; color: #fff; } .mini.rot:hover { background: #b91c1c; }
.am1-neu { height: 34px; border: 0; border-radius: 8px; background: var(--blau); color: #fff; font-weight: 600; font-size: 13px; }
/* Notiz: Enter speichert, kein Knopf */
.notiz-eingabe { flex: 0 0 auto; position: relative; }
.notiz-eingabe textarea { display: block; width: 100%; min-height: 42px; max-height: 160px; resize: none; border: 1px solid #d5dbe5; border-radius: 12px; padding: 11px 36px 11px 12px;
  font-size: 13px; line-height: 1.4; background: #fff; color: var(--text); transition: border-color .12s, box-shadow .12s; }
.notiz-eingabe textarea::placeholder { color: #98a2b3; }
.notiz-eingabe textarea:focus { outline: none; border-color: #93b4f5; box-shadow: 0 0 0 3px rgba(37,99,235,.14); }
.notiz-eingabe textarea:disabled { background: #f6f7f9; }
.notiz-hinweis { position: absolute; right: 12px; bottom: 11px; font-size: 14px; color: #b0b8c6; pointer-events: none; }
.knopf { border: 0; height: 32px; padding: 0 12px; border-radius: 8px; background: var(--blau); color: #fff; font-weight: 600; font-size: 13.33px; }
.knopf:hover:not(:disabled) { background: var(--blau-dunkel); }
.knopf:disabled { background: #eef0f3; color: #a0a8b5; cursor: default; }
.knopf.hell { background: var(--tab-aktiv); color: var(--navy-text); }
.knopf.grau { background: #64748b; }
.knopf.rot { background: #991b1b; }

/* Details (frmLeadDetails) */
.details-rahmen { flex: 1 1 auto; overflow: auto; min-height: 0; padding-right: 2px; }
.details { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; row-gap: 10px; padding: 4px 2px; }
.details .karte-feld { display: grid; gap: 4px; align-content: start; }
.details .voll { grid-column: 1 / -1; }
.details .neu { grid-column: 1; }
.details label, .details .lbl { font-size: 11.5px; font-weight: 600; color: var(--text-leise); letter-spacing: .01em; }
.details .feld, .details .df { height: 34px; border: 1px solid var(--feldrand); border-radius: 8px; background: #fff; padding: 0 10px; font-size: 13px; width: 100%; }
.details .feld:hover:not([readonly]):not(:disabled) { border-color: #b8c3d3; background: #fff; }
.details .feld:focus:not([readonly]) { outline: none; border-color: #93b4f5; box-shadow: 0 0 0 3px rgba(37,99,235,.14); }
.details input.feld[type="text"], .details input.feld[type="email"], .details input.feld[type="tel"] { background: #fff; border-color: var(--feldrand); }

.details .feld[readonly], .details .feld:disabled, .details input.feld[readonly] { background: #f6f7f9; border-color: transparent; color: var(--text); opacity: 1; }
.details .uhr { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 4px; color: var(--text-leise); }
.details .uhr select { width: 64px; height: 32px; background: #fff; border: 1px solid var(--feldrand); border-radius: 8px; padding: 0 6px; }
.details .chips { min-height: 34px; height: auto; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; text-align: left; cursor: pointer; }
.details .chips span { background: #e8f0fe; color: #1d4ed8; border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 600; }
.details .chips { position: relative; padding-right: 30px; }
.details .chips .chev-g { position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; border: solid #64748b; border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg); }
.details .uhr select:disabled { color: #a19f9d; background: #f6f7f9; }
.speicherleiste { flex: 0 0 auto; display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--linie); }
.monatsbeitrag { font-size: 13px; font-weight: 600; color: var(--navy-text); padding: 8px 10px; border: 1px solid var(--linie); border-radius: 10px; background: #f8fafc; }
.monatsbeitrag a { color: var(--blau); cursor: pointer; text-decoration: underline; }
.preisfehler { font-size: 12px; color: #9a3412; }
.speicherknoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.speicherknoepfe .knopf { height: 36px; }
/* Kundenakte speichert selbst (11.10.2026): dezente Anzeige statt Speichern/Verwerfen */
.details-stand { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-height: 22px; font-size: 12px; color: var(--text-leise); padding: 0 2px; }
.details-stand .stand-punkt { width: 7px; height: 7px; border-radius: 50%; background: #cbd5e1; flex: 0 0 auto; }
.details-stand .stand-text { flex: 1 1 auto; min-width: 0; }
.details-stand.ok .stand-punkt { background: #22c55e; }
.details-stand.laeuft .stand-punkt { background: #f59e0b; animation: stand-puls 1s ease-in-out infinite; }
.details-stand.wartet .stand-punkt { background: #3b82f6; }
.details-stand.hinweis { color: #9a3412; } .details-stand.hinweis .stand-punkt { background: #f97316; }
.details-stand.fehler { color: #b91c1c; font-weight: 600; } .details-stand.fehler .stand-punkt { background: #dc2626; }
.details-stand .stand-knopf { border: 0; background: transparent; color: var(--blau); font-size: 12px; font-weight: 600; padding: 2px 4px; text-decoration: underline; cursor: pointer; }
@keyframes stand-puls { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .details-stand.laeuft .stand-punkt { animation: none; } }
.details .feld.ungueltig, .details .feld.ungueltig:hover { border-color: #f97316; box-shadow: 0 0 0 3px rgba(249,115,22,.14); }
.details .chips .chips-leer { font-style: normal; font-size: 12.5px; color: #8a94a6; font-weight: 500; }
.wahl.leer { color: #8a94a6; font-weight: 500; }
.dateien-liste { overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; padding: 2px; }
/* Thomas 27.10.2026: „kann hier rechts nicht runter scrollen“ – Antrags-Kasten + Dateien in einem scrollbaren Rahmen */
.dateien-rahmen { flex: 1 1 auto; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; padding: 2px 4px 8px 2px; }
.dateien-rahmen .dateien-liste { overflow: visible; }
.datei-gruppe { border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; background: #fff; }
.datei-kopf { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.datei-kopf .t { font-weight: 600; font-size: 13px; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.datei-kopf .s { font-size: 11.5px; color: var(--text-leise); white-space: nowrap; }
.datei-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.datei-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px 4px 4px; border: 1px solid var(--linie); border-radius: 8px; background: #fff;
  color: var(--text); font-size: 12px; text-decoration: none; }
.datei-chip .pdf { flex: 0 0 auto; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; color: #fff; background: #dc2626; border-radius: 5px; padding: 3px 5px; }
.datei-chip .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.datei-chip:hover { border-color: var(--blau); color: var(--blau); background: #f5f9ff; }
.datei-chip.ohne-link { color: var(--text-leise); }
/* Kunden-Anhänge (01.11.2026): Knopf statt Link, Bilder blau, sonstige Dateien grau */
button.datei-chip.kunde { font: inherit; color: inherit; cursor: pointer; text-align: left; }
button.datei-chip.kunde:hover { border-color: var(--blau); color: var(--blau); background: #f5f9ff; }
.datei-chip .pdf.typ-bild { background: #2563eb; }
.datei-chip .pdf.typ-datei { background: #6b7280; }

/* ---------- Übersicht (conCRMBonusUebersicht) ---------- */
.uebersicht { margin: 10px 18px 18px; padding: 12px 24px 24px; min-height: calc(100vh - 92px); }
.uebersicht h1 { margin: 0; font-size: 26.67px; font-weight: 400; color: #0f172a; line-height: 38px; }
.ue-monat { margin-top: 14px; font-size: 14.67px; color: #0f172a; }
.ue-reihe { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin-top: 4px; }
.ue-wahl { display: flex; gap: 12px; width: 300px; max-width: 100%; }
.ue-wahl select { height: 36px; border: 1px solid var(--feldrand); background: #fff; font-size: 14.67px; color: #0f172a; padding: 0 6px; }
.ue-wahl select:first-child { flex: 1; } .ue-wahl select:last-child { width: 90px; }
.ue-reihe .knopf { width: 150px; height: 34px; font-size: 13.33px; }
.ue-basis { font-size: 14.67px; color: #0f172a; flex: 1 1 300px; }
.ue-vorgaenge { margin-top: 18px; font-size: 14.67px; color: #0f172a; white-space: pre-line; }
.ue-ma { margin-top: 4px; width: 260px; max-width: 100%; height: 36px; font-size: 14.67px; }
.ue-html { margin-top: 24px; font-family: var(--schrift); color: #0f172a; font-size: 13px; line-height: 1.45; }
.ue-monate { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.ue-monate > div { flex: 1 1 280px; background: #f1f5f9; border-radius: 8px; padding: 14px; }
.ue-kacheln { display: flex; flex-wrap: wrap; gap: 10px; }
.ue-kacheln > div { padding: 12px; background: #f1f5f9; border-radius: 6px; flex: 1 1 170px; }
.ue-kacheln strong { font-size: 21px; }
.ue-html table { width: 100%; border-collapse: collapse; margin-top: 14px; }
.ue-html td { padding: 6px 0; } .ue-html td:last-child { text-align: right; }

/* ---------- Offene Vertragsprüfungen (conCRMVertraege) ---------- */
.vertraege { margin: 10px 18px 18px; overflow: auto; height: calc(100vh - 150px); }
.vertraege-innen { min-width: 1212px; position: relative; padding-bottom: 12px; }
.vertraege h2 { margin: 0; position: absolute; left: 12px; top: 8px; font-size: 24px; font-weight: 400; color: #0f172a; }
.vertraege .neu { position: absolute; right: 24px; top: 10px; height: 30px; font-size: 12px; }
.v5-tab { position: relative; top: 52px; font-size: 12px; color: #0f172a; }
.v5-zeile { position: relative; height: 32px; border-bottom: 1px solid #eef0f4; }
.v5-zeile > * { position: absolute; top: 0; height: 30px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; }
.v5-zeile.kopf { height: 26px; font-weight: 600; } .v5-zeile.kopf > * { height: 26px; }
.v5-zeile .knopf { height: 30px; font-size: 12px; padding: 0 8px; justify-content: center; }
.v5-zeile .chefzelle { background: #f8fafc; padding-left: 8px; }

/* ---------- Dialoge / Menüs ---------- */
.schleier { position: fixed; inset: 0; background: rgba(15,23,42,.38); display: grid; place-items: center; z-index: 50; padding: 12px; }
.schleier.hell { background: rgba(0,0,0,.22); }
.schleier.klar { background: transparent; }
.dlg { background: #fff; position: relative; border-radius: 14px; box-shadow: 0 20px 50px rgba(15,23,42,.25), 0 2px 6px rgba(15,23,42,.08); max-width: 100%; max-height: calc(100vh - 24px); overflow: auto; }
.dlg h3 { margin: 0; font-weight: 600; }
.feld-g { height: 36px; width: 100%; border: 0; background: #f5f5f5; padding: 0 8px; font-size: 13.33px; }
textarea.feld-g { height: 80px; padding: 6px 8px; resize: vertical; }
.dlg .lbl { font-size: 13.33px; }
/* Auswahlliste am Feld (Status, Bereiche, RS-Optionen; Kundenakte: Bereiche/RS-Optionen) – Dropdown statt Fenster in der Mitte (Thomas 10.10.2026) */
.dd { position: fixed; z-index: 80; display: flex; flex-direction: column; width: max-content; max-width: min(360px, calc(100vw - 16px)); overflow: hidden;
  background: #fff; border: 1px solid var(--feldrand); border-radius: 8px; box-shadow: 0 12px 28px rgba(15,23,42,.16), 0 2px 6px rgba(15,23,42,.08); animation: dd-auf .12s ease-out; }
.dd.oben { animation-name: dd-auf-oben; }
@keyframes dd-auf { from { opacity: 0; transform: translateY(-4px); } }
@keyframes dd-auf-oben { from { opacity: 0; transform: translateY(4px); } }
.dd-titel { display: none; }
.dd-liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px; display: flex; flex-direction: column; gap: 1px; }
.dd-eintrag { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 12px 4px 8px; border: 0; border-radius: 5px; background: transparent;
  color: var(--text); font-size: 13px; line-height: 1.25; text-align: left; white-space: nowrap; }
.dd-eintrag:hover { background: #f1f5fb; }
.dd-eintrag:focus-visible { outline: none; background: #e8f0fe; box-shadow: inset 0 0 0 1px #9dbcf6; }
.dd-eintrag[aria-selected="true"] { font-weight: 600; }
.dd-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dd-mark { flex: 0 0 16px; width: 16px; height: 16px; display: grid; place-items: center; color: var(--blau); }
.dd-mark .punkt { width: 16px; height: 16px; display: block; }
.dd-mark::before { content: ''; display: none; width: 9px; height: 5px; border: solid currentColor; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.dd:not(.mehr):not(.status) .dd-eintrag[aria-selected="true"] { color: var(--blau-dunkel); }
.dd:not(.mehr):not(.status) .dd-eintrag[aria-selected="true"] .dd-mark::before { display: block; }
/* Mehrfachauswahl: Kästchen; bleibt offen, gespeichert wird beim Schließen */
.dd.mehr .dd-mark { flex-basis: 15px; width: 15px; height: 15px; border: 1.5px solid #94a3b8; border-radius: 4px; background: #fff; color: #fff; }
.dd.mehr .dd-eintrag[aria-selected="true"] .dd-mark { background: var(--blau); border-color: var(--blau); }
.dd.mehr .dd-eintrag[aria-selected="true"] .dd-mark::before { display: block; width: 8px; height: 4px; }
.dd-fuss { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 5px 5px 12px; border-top: 1px solid var(--linie); background: var(--kopf); }
.dd-fuss span { font-size: 11.5px; color: var(--text-leise); white-space: nowrap; }
.dd-fertig { height: 26px; padding: 0 12px; border: 0; border-radius: 6px; background: var(--blau); color: #fff; font-size: 12.5px; font-weight: 600; }
.dd-fertig:hover { background: var(--blau-dunkel); }
/* Status: Farbpunkt vorn, aktueller Status hinterlegt mit Haken */
.dd.status .dd-eintrag[aria-selected="true"] { background: #eef4ff; }
.dd.status .dd-eintrag[aria-selected="true"]::after { content: ''; flex: 0 0 auto; width: 9px; height: 5px; margin-left: 6px; border: solid var(--blau); border-width: 0 0 2px 2px; transform: translateY(-2px) rotate(-45deg); }
/* Feld, an dem die Liste gerade hängt */
.statusfeld button[aria-expanded="true"], .wahl[aria-expanded="true"] { background: rgba(37,99,235,.12); }
.details .chips[aria-expanded="true"] { border-color: #93b4f5; box-shadow: 0 0 0 3px rgba(37,99,235,.14); }
/* schmale Bildschirme: Blatt von unten */
.dd-schleier { position: fixed; inset: 0; z-index: 79; background: rgba(15,23,42,.32); }
.dd.blatt { left: 50%; bottom: 0; top: auto; width: min(520px, 100vw); max-width: none; max-height: 75vh; transform: translateX(-50%); border-radius: 14px 14px 0 0; padding-bottom: env(safe-area-inset-bottom); animation-name: dd-blatt; animation-duration: .16s; }
@keyframes dd-blatt { from { opacity: 0; transform: translate(-50%, 16px); } }
.dd.blatt .dd-titel { display: block; padding: 14px 16px 6px; font-size: 15px; font-weight: 700; color: var(--text); }
.dd.blatt .dd-liste { padding: 4px 8px 8px; }
.dd.blatt .dd-eintrag { min-height: 44px; font-size: 15px; padding: 6px 12px; }
.dd.blatt .dd-fuss { padding: 8px 12px; }
.dd.blatt .dd-fertig { height: 36px; padding: 0 18px; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .dd, .dd.blatt { animation: none; } }

.anruf { width: 420px; padding: 22px 20px 20px; display: grid; gap: 10px; }
.anruf .zu { position: absolute; right: 12px; top: 12px; width: 28px; height: 28px; border: 0; background: transparent; font-size: 20px; color: #071932; }
.anruf h3 { font-size: 13.33px; }
.anruf .reihe { display: flex; gap: 16px; } .anruf .reihe > :first-child { flex: 0 0 238px; } .anruf .reihe > :last-child { flex: 1; }
.anruf .wvl { font-size: 14.67px; color: #071932; }
.anruf .knopf { justify-self: center; width: 160px; height: 40px; }
.anruf .woche4 { font-size: 12.67px; line-height: 1.4; color: #9a3412; background: #fff7ed; border: 1px solid var(--orange-feld); border-radius: 6px; padding: 8px 10px; }

.notizdlg { width: min(520px, calc(100vw - 32px)); height: min(420px, calc(100vh - 32px)); padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 12px; }
.notizdlg h3 { font-size: 21.33px; font-weight: 400; color: var(--text); white-space: pre-line; line-height: 1.2; }
.notizdlg textarea { flex: 1; font-size: 16px; padding: 8px; border: 1px solid var(--feldrand); resize: none; }
.notizdlg .fuss { display: flex; justify-content: space-between; } .notizdlg .fuss .knopf { min-width: 110px; height: 36px; }
/* Kundenantwort / manuelle Absage prüfen (conCRMAntwortPruefung: 850 breit, 380–660 hoch, oben 60) */
.schleier .antwortpruefung { width: min(850px, calc(100vw - 24px)); height: max(380px, min(660px, calc(100vh - 90px))); align-self: flex-start; margin-top: 60px;
  padding: 12px 20px 16px; display: flex; flex-direction: column; gap: 8px; }
.antwortpruefung .ap-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.antwortpruefung .ap-kopf h3 { font-size: 21.33px; font-weight: 600; color: var(--text); margin: 0; }
.antwortpruefung .ap-kopf .knopf { width: 100px; height: 32px; }
.antwortpruefung .ap-meta { font-size: 13.33px; white-space: pre-line; min-height: 40px; color: var(--text); }
.antwortpruefung textarea { flex: 1 1 auto; min-height: 70px; font-size: 14.67px; padding: 6px 8px; border: 1px solid var(--feldrand); resize: none; background: #f8fafc; }
.antwortpruefung .ap-meldung { font-size: 13.33px; min-height: 36px; color: var(--text-leise); }
.antwortpruefung .ap-fuss { display: flex; flex-wrap: wrap; gap: 10px; }
.antwortpruefung .ap-fuss .knopf { height: 32px; width: 165px; font-size: 13.33px; }
.antwortpruefung .ap-fuss .knopf:first-child { width: 140px; }
@media (max-width: 760px) { .antwortpruefung .ap-fuss .knopf, .antwortpruefung .ap-fuss .knopf:first-child { width: calc(50% - 5px); } }

.immo { width: min(720px, calc(100vw - 24px)); min-height: 380px; padding: 0 40px 24px; }
.immo .kopf { display: flex; align-items: center; height: 50px; margin-top: 20px; font-size: 18.67px; }
.immo .kopf span { flex: 1; } .immo .kopf button { width: 40px; border: 0; background: transparent; font-size: 18.67px; }
.immo .reihe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 55px; }
.immo .reihe input { height: 32px; border: 1px solid var(--feldrand); padding: 0 6px; font-size: 13.33px; }
.immo .reihe .lbl { font-size: 13.33px; }
.immo .objekte { margin-top: 10px; }
.immo .objekt { position: relative; min-height: 64px; border-bottom: 1px solid #edebe9; padding: 8px 40px 8px 16px; cursor: pointer; }
.immo .objekt.gewaehlt { font-weight: 600; background: #f3f8fd; }
.immo .objekt .t { font-size: 18.67px; } .immo .objekt .s { font-size: 16px; color: #605e5c; }
.immo .objekt button { position: absolute; right: 10px; top: 20px; border: 0; background: transparent; font-size: 13.33px; }
/* 0161: mehrere vermietete Objekte, Bezeichnung optional, Beitrag je Objekt */
.immo .immo-titel { font-size: 14px; font-weight: 600; color: #323130; margin: 4px 0 0; }
.immo .objekte:empty { display: none; }
.immo .objekt:focus-visible { outline: 2px solid #0078d4; outline-offset: -2px; }
.immo .immo-summe { font-size: 14px; font-weight: 600; padding: 8px 16px; background: #f3f2f1; border-radius: 6px; margin: 6px 0 2px; }
.immo .immo-summe[hidden], .immo .immo-edit[hidden] { display: none; }
.immo .immo-edit { font-size: 13px; color: #0b5cad; margin-top: 10px; }
.immo .immo-eingabe { margin-top: 6px; align-items: flex-end; }
.immo .immo-f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.immo .immo-f span { font-size: 12px; color: #605e5c; }
.immo .immo-f input { width: 100%; }
.immo .immo-f-objekt { flex: 2 1 220px; }
.immo .immo-f-einheiten { flex: 0 1 100px; }
.immo .immo-f-bwm { flex: 1 1 150px; }
.immo .immo-preis { font-size: 13.33px; color: #605e5c; min-height: 18px; margin: 2px 0 10px; }
.immo .immo-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.immo .immo-knoepfe .knopf[hidden] { display: none; }
@media (max-width: 560px) {
  .immo { padding: 0 16px 16px; min-height: 0; }
  .immo .kopf { margin-top: 8px; }
  .immo .objekt { padding: 8px 36px 8px 10px; min-height: 0; }
  .immo .objekt .t { font-size: 16px; } .immo .objekt .s { font-size: 13.5px; }
  .immo .objekt button { top: 10px; }
  .immo .immo-f-objekt { flex-basis: 100%; }
  .immo .immo-knoepfe .knopf { flex: 1 1 auto; }
}

.storno { width: min(560px, calc(100vw - 24px)); padding: 14px 20px 20px; display: grid; gap: 8px; font-size: 14.67px; }
.storno .fuss { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; } .storno .fuss .knopf { height: 36px; font-size: 13.33px; }

.v5 { width: min(930px, calc(100vw - 32px)); height: min(590px, calc(100vh - 32px)); }
.v5-innen { position: relative; width: max(880px, 100%); height: 640px; }
.v5-innen > * { position: absolute; font-size: 13.33px; }
.v5-innen .lbl { height: 22px; }
.v5-innen input, .v5-innen select { height: 30px; border: 1px solid var(--feldrand); background: #fff; padding: 0 6px; font-size: 13.33px; }
.v5-innen input:disabled, .v5-innen select:disabled { background: #f3f2f1; color: #605e5c; }
.v5-innen label.chk { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.v5-innen .info { font-size: 12px; color: var(--text-leise); }
.v5-innen .knopf { height: 30px; font-size: 12px; }

.bonusma { width: min(620px, calc(100vw - 24px)); min-height: 380px; padding: 16px 20px 20px; display: grid; gap: 8px; align-content: start; }
.bonusma h3 { font-size: 22.67px; color: #0f172a; }
.bonusma .hinweis { font-size: 14.67px; color: var(--text-leise); }
.bonusma .wahl-liste { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14.67px; }
.bonusma .fuss { display: flex; gap: 20px; } .bonusma .fuss .knopf { height: 36px; } .bonusma .fuss .knopf:first-child { flex: 1; } .bonusma .fuss .knopf:last-child { width: 110px; }
/* ---------- Vertrag-Dialog, Abschluss melden, offene Vertragsprüfungen, Übersicht (neu 10.10.2026) ---------- */
.knopf.gruen { background: #107c10; }
.dlg.vt { width: min(880px, calc(100vw - 24px)); max-height: calc(100vh - 24px); border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.dlg.vt.melden { width: min(620px, calc(100vw - 24px)); }
.vt-kopf { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid #e5e9f0; }
.vt-kopf > div { flex: 1; min-width: 0; }
.vt-kopf h3 { font-size: 20px; font-weight: 600; color: #0f172a; }
.vt-sub { margin-top: 2px; font-size: 13.33px; color: var(--text-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-zu { border: 0; background: transparent; width: 32px; height: 32px; border-radius: 6px; font-size: 16px; color: var(--text-leise); }
.vt-zu:hover { background: #eef2f7; color: #0f172a; }
.vt-inhalt { overflow: auto; padding: 4px 20px 16px; display: grid; gap: 4px; }
.vt-abschnitt { padding: 10px 0 8px; border-bottom: 1px solid #f0f2f6; display: grid; gap: 8px; }
.vt-abschnitt h4 { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #64748b; }
.vt-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 14px; }
.vt-raster .breit { grid-column: span 2; }
@media (max-width: 560px) { .vt-raster .breit { grid-column: auto; } }
.vt-feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vt-feld[hidden] { display: none !important; }
.vt-lbl { font-size: 12.5px; font-weight: 600; color: #334155; }
.vt-feld small { font-size: 11.5px; color: #64748b; }
.vt input[type=text], .vt input[type=date], .vt select { height: 36px; border: 1px solid #cfd6e0; border-radius: 6px; background: #fff; padding: 0 10px; font-size: 14px; color: #0f172a; min-width: 0; width: 100%; }
.vt input:focus, .vt select:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 3px rgba(0,120,212,.15); }
.vt input:disabled, .vt select:disabled { background: #f4f6f9; color: #64748b; }
.vt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vt-chip { height: 34px; padding: 0 12px; border: 1px solid #cfd6e0; border-radius: 17px; background: #fff; color: #334155; font-size: 13.33px; white-space: nowrap; }
.vt-chip b { color: #0f172a; }
.vt-chip:hover:not(:disabled) { border-color: var(--blau); }
.vt-chip[aria-checked="true"] { background: var(--blau); border-color: var(--blau); color: #fff; }
.vt-chip[aria-checked="true"] b { color: #fff; }
.vt-chip:disabled { cursor: default; opacity: .55; }
.vt-chip:disabled[aria-checked="true"] { opacity: 1; background: #475569; border-color: #475569; }
.vt-seg { display: inline-flex; border: 1px solid #cfd6e0; border-radius: 6px; overflow: hidden; height: 36px; align-self: start; max-width: 100%; }
.vt-seg button { border: 0; background: #fff; padding: 0 14px; font-size: 13.33px; color: #334155; white-space: nowrap; }
.vt-seg button + button { border-left: 1px solid #cfd6e0; }
.vt-seg button[aria-checked="true"] { background: #e8f1fb; color: #0b4f8a; font-weight: 600; }
.vt-seg button:disabled { cursor: default; color: #64748b; }
.vt-chk { display: flex; align-items: center; gap: 8px; font-size: 13.33px; color: #334155; cursor: pointer; }
.vt-chk input { width: 16px; height: 16px; accent-color: var(--blau); }
.vt-chk.aus { cursor: default; color: #64748b; }
.vt-zeile[hidden] { display: none !important; }
.vt-ergebnis { margin: 10px 0 4px; display: grid; grid-template-columns: minmax(200px, 1fr) minmax(240px, 1.4fr); gap: 12px; }
@media (max-width: 640px) { .vt-ergebnis { grid-template-columns: 1fr; } }
.vt-erg-jsb { background: #f1f6fc; border: 1px solid #d6e4f5; border-radius: 8px; padding: 12px 14px; display: grid; gap: 2px; }
.vt-erg-jsb span { font-size: 12px; font-weight: 600; color: #0b4f8a; text-transform: uppercase; letter-spacing: .05em; }
.vt-erg-jsb strong { font-size: 24px; color: #0f172a; font-variant-numeric: tabular-nums; }
.vt-erg-jsb small { font-size: 12px; color: #475569; }
.vt-erg-prov { border-radius: 8px; padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start; border: 1px solid; }
.vt-erg-prov div { display: grid; gap: 2px; } .vt-erg-prov b { font-size: 14px; } .vt-erg-prov small { font-size: 12.5px; color: #475569; }
.vt-punkt { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: 0 0 10px; }
.vt-erg-prov.team { background: #effaf1; border-color: #c7ebcd; } .vt-erg-prov.team .vt-punkt { background: #16a34a; } .vt-erg-prov.team b { color: #166534; }
.vt-erg-prov.kfz { background: #fff7ed; border-color: #fed7aa; } .vt-erg-prov.kfz .vt-punkt { background: #ea580c; } .vt-erg-prov.kfz b { color: #9a3412; }
.vt-erg-prov.keine { background: #f8fafc; border-color: #e2e8f0; } .vt-erg-prov.keine .vt-punkt { background: #94a3b8; } .vt-erg-prov.keine b { color: #334155; }
.vt-info { font-size: 12px; color: var(--text-leise); }
.vt-fuss { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid #e5e9f0; background: #fafbfc; flex-wrap: wrap; }
.vt-fuss .vt-info { flex: 1 1 200px; }
.vt-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.vt-knoepfe .knopf { height: 36px; min-width: 104px; border-radius: 6px; font-size: 13.33px; padding: 0 16px; }
.notify.mit-knopf span { flex: 0 1 auto; }
.notify-knopf { border: 1px solid rgba(255,255,255,.7); background: transparent; color: #fff; border-radius: 4px; height: 28px; padding: 0 12px; font-weight: 600; }
.notify-knopf:hover { background: rgba(255,255,255,.15); }

/* offene Vertragsprüfungen */
.vertraege .vp-innen { padding: 14px 18px 18px; }
.vertraege .vp-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.vertraege .vp-kopf h2 { position: static; margin: 0; font-size: 22px; font-weight: 400; color: #0f172a; }
.vertraege .vp-kopf .neu { position: static; margin-left: auto; height: 34px; font-size: 13.33px; border-radius: 6px; padding: 0 14px; }
.vp-anzahl { min-width: 24px; height: 22px; padding: 0 7px; border-radius: 11px; background: #e8f1fb; color: #0b4f8a; font-weight: 700; font-size: 12px; display: inline-grid; place-items: center; }
.vp-tab { width: 100%; min-width: 1000px; border-collapse: collapse; font-size: 13.33px; color: #0f172a; }
.vp-tab th { text-align: left; font-size: 12px; font-weight: 600; color: #64748b; padding: 8px 10px; border-bottom: 1px solid #e5e9f0; white-space: nowrap; }
.vp-tab td { padding: 6px 10px; border-bottom: 1px solid #f0f2f6; height: 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.vp-tab .r { text-align: right; font-variant-numeric: tabular-nums; }
.vp-zeile { cursor: pointer; } .vp-zeile:hover td { background: #f6f9fd; } .vp-zeile:focus-visible { outline: 2px solid var(--blau); outline-offset: -2px; }
.vp-sparte { display: inline-block; min-width: 40px; text-align: center; padding: 2px 8px; border-radius: 4px; background: #eef2f7; font-weight: 700; font-size: 12px; }
.vp-kunde { font-weight: 600; }
.vp-chefzelle { width: 190px; }
.vp-chef { width: 180px; border-radius: 6px; border: 1px solid #cfd6e0; }
.vp-offen { color: #92400e; background: #fef3c7; border-radius: 4px; padding: 3px 8px; font-size: 12px; }
.vp-leer { padding: 40px 0; text-align: center; color: var(--text-leise); font-size: 14.67px; }

/* Übersicht */
.ue2-kopf { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ue2-kopf h1 { flex: 0 0 auto; }
.ue2-wahl { display: flex; gap: 6px; align-items: center; }
.ue2-wahl select { height: 36px; border: 1px solid #cfd6e0; border-radius: 6px; background: #fff; font-size: 14.67px; color: #0f172a; padding: 0 8px; }
.ue2-pfeil { width: 36px; height: 36px; border: 1px solid #cfd6e0; border-radius: 6px; background: #fff; font-size: 20px; line-height: 1; color: #334155; }
.ue2-pfeil:hover { border-color: var(--blau); color: var(--blau); }
.ue2-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #475569; }
.ue2-live i { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
.ue2-kacheln { margin-top: 12px; display: grid; grid-template-columns: minmax(280px, 1.6fr) repeat(3, minmax(180px, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .ue2-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ue2-kacheln { grid-template-columns: 1fr; } }
.ue2-kachel { background: #f4f7fb; border: 1px solid #e3e9f2; border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ue2-k-titel { font-size: 12px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: .05em; }
.ue2-kachel strong { font-size: 24px; color: #0f172a; font-variant-numeric: tabular-nums; }
.ue2-kachel.gross strong { font-size: 30px; }
.ue2-kachel small { font-size: 12.5px; color: #475569; }
.ue2-balken { height: 10px; border-radius: 5px; background: #dfe7f1; overflow: hidden; margin-top: 6px; }
.ue2-balken i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #0078d4, #16a34a); }
.ue2-link { align-self: flex-start; margin-top: 4px; border: 0; background: transparent; padding: 0; color: var(--blau); font-weight: 600; font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px; }
.ue2-fehler { grid-column: 1 / -1; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 10px; padding: 14px 16px; font-size: 14px; }
.ue2-fehler { display: grid; gap: 6px; }
.ue2-fehler .ue2-link { justify-self: start; margin-top: 0; }
.ue2-kachel.vorlaeufig { background: #fffbf3; border: 1px dashed #e0b35c; }
.ue2-kachel.vorlaeufig strong { color: #92400e; }
.ue2-kachel.vorlaeufig .ue2-balken i { background: repeating-linear-gradient(135deg, #f59e0b 0 6px, #fcd34d 6px 12px); }
/* Fenster „Fehlende Vertragsangaben“ */
.dlg.luecken .vt-sub { white-space: normal; }
.lk-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.lk-kopf > div { min-width: 0; display: grid; gap: 2px; }
.lk-kopf b { font-size: 14.5px; color: #0f172a; }
.lk-kopf small { font-size: 12px; color: var(--text-leise); }
.lk-kopf .ue2-link { margin-top: 2px; white-space: nowrap; }
.ue2-spalten { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .ue2-spalten { grid-template-columns: 1fr; } }
.ue2-karte { border: 1px solid #e3e9f2; border-radius: 10px; padding: 14px 16px; min-width: 0; overflow-x: auto; }
.ue2-karte h2 { margin: 0; font-size: 17px; font-weight: 600; color: #0f172a; }
.ue2-karte h2 span { font-weight: 400; color: #64748b; }
.ue2-summe { font-size: 12.5px; color: #475569; margin: 2px 0 8px; }
.ue2-rang { width: 100%; border-collapse: collapse; font-size: 13.33px; min-width: 520px; }
.ue2-rang th { text-align: left; font-size: 12px; font-weight: 600; color: #64748b; padding: 6px 8px; border-bottom: 1px solid #e5e9f0; }
.ue2-rang td { padding: 8px; border-bottom: 1px solid #f0f2f6; vertical-align: middle; }
.ue2-rang .r { text-align: right; font-variant-numeric: tabular-nums; } .ue2-rang .b { font-weight: 700; } .ue2-rang .leise { color: #64748b; }
.ue2-rang tr.leer td { color: #94a3b8; } .ue2-rang tr.leer .ue2-name b { color: #64748b; font-weight: 500; }
.ue2-platz { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #eef2f7; color: #475569; font-weight: 700; font-size: 12.5px; }
.ue2-platz.p1 { background: #fde68a; color: #78350f; } .ue2-platz.p2 { background: #e2e8f0; color: #334155; } .ue2-platz.p3 { background: #fed7aa; color: #7c2d12; }
.ue2-name { display: flex; gap: 6px; align-items: baseline; } .ue2-name small { color: #64748b; font-size: 11.5px; }
.ue2-mini { height: 4px; border-radius: 2px; background: #eef2f7; margin-top: 5px; overflow: hidden; max-width: 220px; }
.ue2-mini i { display: block; height: 100%; background: var(--blau); border-radius: 2px; }
.ue2-tag { display: inline-block; margin: 1px 4px 1px 0; padding: 1px 7px; border-radius: 10px; background: #eef2f7; font-size: 11.5px; color: #334155; white-space: nowrap; }
.ue2-sparten { display: grid; gap: 10px; margin-top: 10px; }
.ue2-sp-kopf { display: flex; align-items: baseline; gap: 8px; font-size: 13.33px; }
.ue2-sp-kopf b { min-width: 38px; } .ue2-sp-kopf span { color: #64748b; flex: 1; } .ue2-sp-kopf em { font-style: normal; color: #475569; } .ue2-sp-kopf strong { min-width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
.ue2-sp .ue2-mini { max-width: none; height: 6px; }
.ue2-sp.leer { opacity: .55; }
.ue2-bestand { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.33px; color: #475569; padding: 10px 14px; background: #f8fafc; border-radius: 8px; }
.ue2-bestand b { color: #0f172a; }
.ue2-details { margin-top: 14px; font-size: 13px; color: #334155; }
.ue2-details summary { cursor: pointer; font-weight: 600; color: #0f172a; padding: 6px 0; }
.ue2-details table { width: 100%; max-width: 760px; border-collapse: collapse; margin: 6px 0 10px; }
.ue2-details td { padding: 5px 0; border-bottom: 1px solid #f0f2f6; } .ue2-details td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.ue2-details p { max-width: 980px; color: #475569; margin: 6px 0; }
.ue2-warn { color: #92400e !important; }
.ue2-basis { margin-top: 8px; font-size: 13.33px; color: #475569; }
.ue2-karte .ue2-warn { font-size: 12.5px; margin: 8px 0 0; }
.vt-erg-prov small.vt-monat { margin-top: 4px; color: #0b4f8a; font-weight: 600; }
.vt-erg-prov small.vt-monat.fehlt { color: #92400e; font-weight: 400; }

.am1neu { width: min(640px, calc(100vw - 32px)); height: 280px; padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.am1neu h3 { font-size: 21.33px; } .am1neu p { margin: 0; font-size: 16px; flex: 1; }
.am1neu .fuss { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .am1neu .fuss .knopf { height: 36px; font-size: 13.33px; }

/* Hinweisleiste wie Notify() */
.notify { position: fixed; top: 12px; left: 50%; z-index: 90; width: max-content; max-width: min(760px, calc(100vw - 32px)); padding: 11px 18px; border-radius: 12px; font-size: 13px; line-height: 1.4; color: #fff;
  display: flex; gap: 12px; align-items: center; justify-content: center; box-shadow: 0 12px 32px rgba(15,23,42,.28); transform: translate(-50%, -160%); transition: transform .2s ease; }
.notify.zeigen { transform: translate(-50%, 0); }
.notify.info { background: #1e3a8a; } .notify.ok { background: #15803d; } .notify.warn { background: #b45309; } .notify.fehler { background: #b91c1c; }
@media (prefers-reduced-motion: reduce) { .notify { transition: none; } }
.demo-band { background: #fff7ed; color: #9a3412; border-bottom: 1px solid #fed7aa; padding: 5px 16px; font-size: 12px; }

/* ---------- Anmeldung ---------- */
.anmeldung { min-height: 100%; display: grid; place-items: center; padding: 16px; }
.anmeldung form { width: min(360px, 100%); display: grid; gap: 10px; }
.anmeldung h1 { margin: 0 0 6px; font-size: 18px; }
.anmeldung .feld { height: 36px; border: 1px solid var(--feldrand); background: #fff; padding: 0 8px; }
.anmeldung .knopf { height: 36px; }
.anmeldung .knopf.leise { background: #eef1f5; color: var(--text); }
.speicher { font-size: 11px; color: var(--text-leise); }

/* ---------- schmale Fenster (Parent.Width < 800): Liste ODER Kundenakte ---------- */
@media (max-width: 799px) {
  .arbeit { padding: 8px 18px 18px; height: auto; min-height: 0; }
  .arbeit .leads { height: calc(100vh - 290px); min-height: 420px; }
  body.mit-kunde .arbeit .leads { display: none; }
  body:not(.mit-kunde) .arbeit .akte { display: none; }
  body.mit-kunde .zur-liste { display: inline-block; }
  .arbeit .akte { flex: 1 1 auto; width: auto !important; height: calc(100vh - 290px); min-height: 480px; }
  .kopfzeile { flex-wrap: wrap; padding: 8px 12px 0; }
  .jsb { width: 100%; } .jsb-monat, .jsb-monat.pruefen { flex: 1 1 0; width: auto; min-width: 0; }
  .jsb-zeile { flex-wrap: wrap; row-gap: 0; }
  .statuszeile { max-height: 7.5em; }
  .jsb-wert em { display: block; } /* „vorläufig“ über dem Betrag, damit „12.345 € / 20.000 €“ nicht abgeschnitten wird */
  .kopfleiste { gap: 8px; padding: 0 10px; } .nutzer-name, .nutzer-pfeil { display: none; } .nutzer { padding: 2px; }
  .suchzeile { flex-wrap: nowrap; overflow-x: auto; }
  .suchfeld { flex: 1 1 200px; }
  .lg-mehr { display: none; }
}

/* ---------- Versand-Kästchen: Zustände (Thomas 10.10.2026) ----------
   orange pulsierend = angefordert / wird gesendet · normaler Haken = gesendet · rot mit „!“ = fehlgeschlagen oder hängt
   grau mit Haken = entfällt (WA ohne Handynummer, AM1/EM/LEM ohne E-Mail-Adresse) · grüner/blauer Punkt = Kunde hat per WhatsApp/E-Mail geantwortet */
.haken.laeuft { background: var(--orange-feld); border-color: #f97316; animation: haken-puls 1.4s ease-out infinite; }
.haken.laeuft::after { border-color: transparent !important; }
@keyframes haken-puls { 0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, .7); } 70% { box-shadow: 0 0 0 6px rgba(249, 115, 22, 0); } 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); } }
@media (prefers-reduced-motion: reduce) { .haken.laeuft { animation: none; box-shadow: 0 0 0 2px rgba(249, 115, 22, .55); } }
.haken.fehler { background: #fee2e2; border-color: #dc2626; }
.haken.fehler::after { content: '!'; width: auto; height: auto; border: 0; transform: none; color: #b91c1c; font: 700 11px/1 var(--schrift); }
.haken.entfaellt { background: #eef0f3; border-color: #c4c9d2; cursor: not-allowed; }
.haken.entfaellt::after { border-color: #a3aab5 !important; }
/* „Anruf heute“ bei Wiedervorlage in mehr als 2 Tagen (Thomas 20.10.2026): grau angehakt + WV-Datum, nicht klickbar */
.anruf-wv { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; vertical-align: middle; cursor: not-allowed; }
.anruf-wv-tag { font-size: 10.5px; line-height: 1; color: var(--text-leise); font-variant-numeric: tabular-nums; }
/* Besetzt-Rückruf (20.10.2026): Kästchen offen + „Rückruf HH:MM“, orange sobald er dran ist */
.anruf-wv.anruf-rr { cursor: default; gap: 3px; }
.anruf-rr .anruf-wv-tag { color: #9a3412; letter-spacing: -.1px; }
.anruf-rr.faellig .anruf-wv-tag { font-weight: 700; color: #c2410c; }
.anruf-rr.faellig .haken { border-color: #f97316; box-shadow: 0 0 0 2px rgba(249, 115, 22, .35); }
/* Im Gespräch: Kunde schreibt per WhatsApp/SMS/E-Mail (Thomas 20.10.2026): „WA läuft“ / „SMS läuft“ / „Mail läuft“ / „WA mit MD“ – drängt nicht, Klick trägt trotzdem einen Anruf ein */
.anruf-schreibt { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; height: 20px; padding: 0 5px 0 3px; box-sizing: border-box; border: 1px solid #86efac;
  border-radius: 999px; background: #ecfdf5; color: #166534; font: 600 10px/1 var(--schrift); white-space: nowrap; vertical-align: middle; cursor: pointer; }
.anruf-schreibt .i { width: 11px; height: 11px; flex: 0 0 auto; color: #16a34a; }
.anruf-schreibt-tag { overflow: hidden; text-overflow: ellipsis; letter-spacing: -.15px; }
.anruf-schreibt.mail { border-color: #93c5fd; background: #eff6ff; color: #1e3a8a; }
.anruf-schreibt.mail .i { color: #2563eb; }
.anruf-schreibt.sms { border-color: #67e8f9; background: #ecfeff; color: #155e75; } /* SMS wie der SMS-Knopf (cyan, 0143) */
.anruf-schreibt.sms .i { color: #0891b2; }
.anruf-schreibt.ma { border-style: dashed; }
.anruf-schreibt:hover:not(.ansicht) { box-shadow: 0 0 0 2px rgba(22, 163, 74, .2); }
.anruf-schreibt.mail:hover:not(.ansicht) { box-shadow: 0 0 0 2px rgba(37, 99, 235, .2); }
.anruf-schreibt.sms:hover:not(.ansicht) { box-shadow: 0 0 0 2px rgba(8, 145, 178, .2); }
.anruf-schreibt:focus-visible { outline: 2px solid #16a34a; outline-offset: 1px; }
.anruf-schreibt.ansicht { cursor: default; }
.lg-schreibt + .lg-schreibt { margin-left: -1px; }
/* Chip „Im Gespräch (n)“ unter Heute fällig: nur diese Leads anzeigen bzw. wieder alle fälligen */
.schreibt-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 8px; border: 1px solid #86efac; border-radius: 999px; background: #f0fdf4;
  color: #166534; font: 600 12.5px/1 var(--schrift); white-space: nowrap; cursor: pointer; }
.schreibt-chip[hidden] { display: none; }
.schreibt-chip .i { width: 14px; height: 14px; flex: 0 0 auto; color: #16a34a; }
.schreibt-chip b { font-variant-numeric: tabular-nums; }
.schreibt-chip.leer { border-color: var(--linie); background: #fff; color: var(--text-leise); }
.schreibt-chip.leer .i { color: #94a3b8; }
.schreibt-chip[aria-pressed="true"] { border-color: #16a34a; background: #16a34a; color: #fff; }
.schreibt-chip[aria-pressed="true"] .i { color: #fff; }
.schreibt-chip .sc-weg { margin-left: 2px; font-weight: 700; }
.schreibt-chip .sc-proz { font-size: 11px; font-weight: 500; opacity: .8; margin-left: 2px; } /* Thomas 28.10.2026: % bei Im Gespräch / Kurz vor Abschluss */
.schreibt-chip:hover { box-shadow: 0 0 0 2px rgba(22, 163, 74, .18); }
.schreibt-chip:focus-visible { outline: 2px solid #16a34a; outline-offset: 2px; }
.anruf .besetzt-frage { display: grid; gap: 6px; }
.anruf .besetzt-frage[hidden], .anruf .anruf-hinweis[hidden], .anruf .knopf[hidden] { display: none; }
.anruf .besetzt-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.anruf .besetzt-knoepfe .knopf { flex: 1 1 64px; }
.anruf .besetzt-knoepfe .knopf.hell { flex-basis: 100%; }
.anruf .anruf-hinweis { font-size: 12.67px; line-height: 1.4; color: #1e3a5f; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 6px; padding: 8px 10px; }
.haken-box { position: relative; display: inline-block; line-height: 0; vertical-align: middle; }
.antwort-punkt { position: absolute; top: -4px; right: -5px; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #fff; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .12); }
.antwort-punkt.wa { background: #25d366; }
.antwort-punkt.mail { background: #2563eb; }

/* Mehrere Angebote (Zahn-Tarife / RS-Varianten) */
.dlg.vt.angebote { width: min(760px, calc(100vw - 24px)); }
.ang-hinweis { font-size: 12px; color: var(--text-leise); }
.ang-scroll { overflow-x: auto; }
.ang-raster { border-collapse: separate; border-spacing: 6px; min-width: 520px; }
.ang-raster th { font-size: 12px; font-weight: 600; color: #475569; text-align: center; padding: 0 4px; white-space: nowrap; }
.ang-raster tbody th { text-align: left; font-size: 13.33px; color: #0f172a; padding-right: 10px; }
.ang-raster td { text-align: center; }
.ang-raster td.aus { color: #cbd5e1; font-size: 13px; }
.ang-zelle { width: 100%; min-width: 120px; height: 44px; border: 1px solid #cfd6e0; border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13.33px; color: #334155; font-variant-numeric: tabular-nums; }
.ang-zelle:hover { border-color: var(--blau); }
.ang-zelle[aria-checked="true"] { background: var(--blau); border-color: var(--blau); color: #fff; font-weight: 600; }
.ang-haken { width: 12px; }
.ang-varianten { display: grid; gap: 10px; }
.ang-karte { border: 1px solid #dbe2ea; border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; background: #fbfcfe; }
.ang-karte-kopf { display: flex; align-items: center; gap: 10px; }
.ang-karte-kopf b { font-size: 14px; color: #0f172a; }
.ang-preis-gross { margin-left: auto; font-weight: 700; color: #0b4f8a; font-variant-numeric: tabular-nums; }
.ang-preis-gross.offen { color: #b45309; font-weight: 600; }
.ang-zeile { display: grid; grid-template-columns: 130px 1fr; gap: 8px; align-items: center; }
@media (max-width: 560px) { .ang-zeile { grid-template-columns: 1fr; } }
.ang-plus { justify-self: start; height: 34px; }
.ang-warn { background: #fff7e6; border: 1px solid #fcd34d; color: #7c4a03; border-radius: 8px; padding: 8px 10px; font-size: 12.5px; }
.knopf.gruen:disabled { background: #eef0f3; color: #a0a8b5; }

/* Wer hat was abgeschlossen (Mitarbeiter × Sparte) */
.ue2-matrix-karte { margin-top: 16px; }
.ue2-matrix-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ue2-matrix-kopf h2 { margin: 0; }
.ue2-seg { height: 32px; }
.ue2-seg button[aria-checked="true"] { background: #0f172a; color: #fff; }
.ue2-matrix-box { overflow-x: auto; margin-top: 8px; }
.ue2-matrix { min-width: 0; }
.ue2-matrix td.r b { display: block; font-weight: 700; }
.ue2-matrix td.r small { display: block; color: #64748b; font-size: 12px; white-space: nowrap; }
.ue2-matrix tfoot td { border-top: 2px solid #e5e9f0; font-weight: 600; background: #f8fafc; }
.ue2-leer { color: #64748b; margin: 10px 0 0; }

/* ---------- KI-Vorschlag (Migration 0046): Karte über dem Verlauf, Reiter „KI-Vorschläge“, lila Rand an der Zeile ---------- */
.ki-karte { flex: 0 0 auto; max-height: 64%; min-height: 0; display: flex; flex-direction: column; gap: 7px; padding: 10px 12px 11px; overflow: hidden;
  border: 1px solid #ddd6fe; border-radius: 12px; background: linear-gradient(180deg, #faf7ff 0%, #ffffff 80px); box-shadow: inset 3px 0 0 #8b5cf6; }
.ki-koerper { flex: 0 1 auto; min-height: 0; overflow-y: auto; display: grid; gap: 7px; align-content: start; padding: 1px 2px 1px 1px; margin: 0 -2px 0 -1px; }
@media (max-width: 799px) { .ki-karte { max-height: 78%; } }
.ki-kopf { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.ki-kopf b { color: #4c1d95; font-weight: 700; white-space: nowrap; }
.ki-ikon { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: #7c3aed; color: #fff; display: grid; place-content: center; }
.ki-ikon .i { width: 14px; height: 14px; }
.ki-art { font-size: 11px; font-weight: 600; color: #6d28d9; background: #ede9fe; border-radius: 999px; padding: 2px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ki-zeit { margin-left: auto; flex: 0 0 auto; font-size: 11px; color: #8a94a6; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ki-lbl { font-size: 11px; font-weight: 600; color: var(--text-leise); }
.ki-kunde { display: grid; gap: 2px; font-size: 12px; line-height: 1.4; color: #334155; background: #f2fbf5; border-radius: 8px; padding: 6px 9px; box-shadow: inset 3px 0 0 #22c55e; }
.ki-kunde div { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; word-break: break-word; }
.ki-warn { font-size: 12px; color: #92400e; background: #fff7e6; border: 1px solid #fcd34d; border-radius: 8px; padding: 6px 9px; }
.ki-feld { display: grid; gap: 3px; min-width: 0; }
.ki-betreff { width: 100%; min-width: 0; height: 32px; border: 1px solid var(--feldrand); border-radius: 8px; padding: 0 9px; font-size: 13px; background: #fff; }
.ki-an { font-size: 11.5px; color: var(--text-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ki-mail { display: grid; gap: 4px; padding: 8px 9px; border: 1px solid var(--feldrand); border-radius: 10px; background: #fff; }
.ki-anrede { font-size: 12.5px; color: #475569; padding: 0 1px; }
.ki-text { display: block; width: 100%; min-height: 76px; max-height: 200px; resize: none; border: 1px solid #e2e8f0; border-radius: 7px; padding: 6px 8px; font-size: 12.5px; line-height: 1.45; background: #fcfcfe; color: var(--text); }
.ki-betreff:focus, .ki-text:focus { outline: none; border-color: #a78bfa; background: #fff; box-shadow: 0 0 0 3px rgba(139, 92, 246, .16); }
.ki-betreff:disabled, .ki-text:disabled { background: #f6f7f9; color: var(--text-leise); }
.ki-hinweis { font-size: 11px; color: var(--text-leise); line-height: 1.4; }
.ki-angebot { display: grid; gap: 3px; padding: 8px 10px; border-radius: 10px; background: #f5f3ff; border: 1px solid #e9e5ff; }
.ki-wert { font-size: 12.5px; color: var(--text); overflow-wrap: anywhere; }
.ki-wert.stark { font-weight: 600; color: #3b0764; }
.ki-grund { font-size: 11px; color: #6b7280; font-style: italic; line-height: 1.4; }
.ki-knoepfe { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.ki-knoepfe .knopf { height: 34px; }
.ki-frage { flex: 0 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 7px 9px; border-radius: 8px; background: #effaf1; color: #14532d; font-size: 12px; font-weight: 600; }
.ki-frage.rot { background: #fef2f2; color: #991b1b; }
.ki-frage span { flex: 1 1 150px; min-width: 0; overflow-wrap: anywhere; }
.mini.gruen { background: #107c10; border-color: #107c10; color: #fff; } .mini.gruen:hover { background: #0b5e0b; }
.mini:disabled { opacity: .55; cursor: default; }
.nav .n.ki { background: #8b5cf6; color: #fff; }
.nav button[aria-pressed="true"] .n.ki { background: #ede9fe; color: #6d28d9; }
.leadtab tr.zeile.ki td:first-child { box-shadow: inset 3px 0 0 #8b5cf6; }
.lg-ki { display: inline-block; width: 4px; height: 13px; border-radius: 2px; background: #8b5cf6; }

/* „Mail kam zurück“ am neuesten ausgehenden Mail-Eintrag (Thomas 11.10.2026, Migration 0065) */
.v-zurueck-zeile { margin-top: 4px; display: flex; justify-content: flex-end; }
.v-zurueck-knopf { border: 0; background: transparent; padding: 2px 6px; border-radius: 6px; font-size: 11.5px; font-weight: 600; color: #94a3b8; cursor: pointer; }
.v-zurueck-knopf:hover, .v-zurueck-knopf:focus-visible { color: #b45309; background: #fef3c7; outline: none; }
/* 0105: „Per E-Mail antworten“ am eingegangenen Eintrag – deutlicher als „Mail kam zurück?“, weil es die Hauptaktion ist */
.v-antwort-knopf { color: var(--blau); background: #eef4ff; }
.v-antwort-knopf:hover, .v-antwort-knopf:focus-visible { color: #1d4ed8; background: #dbe7ff; }
.dlg.mail-schreiben { width: min(680px, calc(100vw - 24px)); }
.dlg.mail-schreiben .ki-text { width: 100%; box-sizing: border-box; font: inherit; font-size: 13.5px; line-height: 1.45; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 8px; resize: vertical; }
.dlg.mail-schreiben .ki-betreff { width: 100%; box-sizing: border-box; font: inherit; padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 8px; }
.dlg.mail-schreiben .ki-mail { display: grid; gap: 6px; margin-top: 8px; }
.dlg.mail-schreiben .ki-anrede { font-size: 13.5px; color: #334155; }
.dlg.mail-schreiben .ki-hinweis, .dlg.mail-schreiben .ki-an { font-size: 12px; color: var(--text-leise); }
.dlg.mail-schreiben .ki-kunde { max-height: 180px; overflow: auto; }
.v-zurueck { scroll-margin-bottom: 4px; margin-top: 8px; padding: 9px 10px; border-radius: 8px; background: #fffbeb; border: 1px solid #fde68a; display: grid; gap: 7px; font-size: 12px; }
.v-zurueck-titel { font-weight: 700; color: #92400e; overflow-wrap: anywhere; }
.v-zurueck .feld { height: 30px; border-color: #e5d9b6; background: #fff; }
.v-zurueck-hinweis { color: var(--text-leise); font-size: 11px; line-height: 1.4; }
.v-zurueck-tipp { display: flex; align-items: center; gap: 8px; color: #92400e; font-weight: 600; }
.v-zurueck-tipp span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.v-zurueck-fuss { display: flex; justify-content: flex-end; gap: 6px; }

/* KI-Vorschlag für saubere Notizen (Thomas 10.10.2026, Migration 0069): dezenter Hinweis am Notizfeld + Vorschau alt/neu */
.ki-notiz-hinweis { flex: 0 0 auto; align-self: flex-start; max-width: 100%; display: inline-flex; align-items: center; gap: 6px; margin-bottom: -2px; padding: 4px 11px 4px 8px;
  border: 1px solid #e9e5ff; border-radius: 999px; background: #f5f3ff; color: #5b21b6; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ki-notiz-hinweis .i { width: 14px; height: 14px; flex: 0 0 14px; color: #7c3aed; }
.ki-notiz-hinweis:hover, .ki-notiz-hinweis:focus-visible { background: #ede9fe; border-color: #c4b5fd; outline: none; }
.dlg.vt.kinotiz { width: min(1040px, calc(100vw - 24px)); }
.kn-grund { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: #f5f3ff; color: #4c1d95; font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }
.kn-vergleich { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 10px 0 4px; }
.kn-spalte { display: grid; grid-template-rows: auto 1fr; gap: 6px; min-width: 0; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 10px; background: #fff; }
.kn-spalte.alt { background: #fafbfc; }
.kn-spalte.neu { border-color: #ddd6fe; box-shadow: inset 3px 0 0 #8b5cf6; }
.kn-kopf { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.kn-kopf b { color: var(--text); }
.kn-kopf span { margin-left: auto; color: var(--text-leise); font-size: 11.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kn-text { max-height: min(52vh, 520px); overflow: auto; white-space: pre-wrap; word-break: break-word; font-size: 12.5px; line-height: 1.5; color: #1f2937; }
.kn-text:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 640px) {
  .kn-vergleich { grid-template-columns: minmax(0, 1fr); }
  .kn-text { max-height: 30vh; }
}
.v-bisher { margin-top: 4px; white-space: normal; }
.v-bisher summary { cursor: pointer; color: var(--blau); font-size: 11.5px; font-weight: 600; }
.v-bisher-text { margin-top: 4px; padding: 6px 8px; border-radius: 6px; background: #f6f7f9; color: #475569; font-size: 12px; white-space: pre-wrap; word-break: break-word; }

/* Vertragsfenster 12.10.2026 (Thomas: „hübscher machen“): Sparten in Gruppen, Herkunft als Karten, Pflichtfelder/Fehler am Feld,
   Sonderfälle zugeklappt, „Gehört zu Lead“. Nur .vt-vertrag – die übrigen Fenster mit .vt bleiben unverändert. */
.vt-vertrag .vt-abschnitt { padding: 12px 0 10px; }
.vt-abschnitt-kopf { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.vt-abschnitt-hilfe { font-size: 12px; color: var(--text-leise); }
.vt-pflicht { font-style: normal; color: #b91c1c; }
.vt-hilfe { font-size: 11.5px; color: #64748b; }
.vt-sparten-gruppen { display: grid; grid-template-columns: max-content 1fr; gap: 8px 12px; align-items: center; }
.vt-gruppe { display: contents; }
.vt-gruppe-t { font-size: 11.5px; font-weight: 600; color: #64748b; white-space: nowrap; }
.vt-gruppe-t.team { color: #166534; }
.vt-vertrag .vt-chip small { margin-left: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; color: #94a3b8; }
.vt-vertrag .vt-chip[aria-checked="true"] small { color: rgba(255,255,255,.75); }
.vt-herkunft { display: grid; gap: 10px; }
.vt-herk-gruppe { display: grid; gap: 6px; }
.vt-herk-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.vt-herk { text-align: left; border: 1px solid #cfd6e0; border-radius: 8px; background: #fff; padding: 8px 12px; display: grid; gap: 2px; color: #0f172a; cursor: pointer; }
.vt-herk b { font-size: 13.5px; font-weight: 600; }
.vt-herk small { font-size: 12px; color: #64748b; line-height: 1.35; }
.vt-herk:hover:not(:disabled) { border-color: var(--blau); }
.vt-herk[aria-checked="true"] { border-color: #64748b; background: #f1f5f9; box-shadow: inset 0 0 0 1px #64748b; }
.vt-herk.team[aria-checked="true"] { border-color: #16a34a; background: #effaf1; box-shadow: inset 0 0 0 1px #16a34a; }
.vt-herk:disabled { cursor: default; opacity: .55; } .vt-herk:disabled[aria-checked="true"] { opacity: 1; }
.vt-herk-fest { display: flex; gap: 10px; align-items: flex-start; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px; background: #f8fafc; }
.vt-herk-fest > div { display: grid; gap: 2px; } .vt-herk-fest b { font-size: 14px; } .vt-herk-fest small { font-size: 12px; color: #475569; }
.vt-herk-fest.team { background: #effaf1; border-color: #c7ebcd; } .vt-herk-fest.team .vt-punkt { background: #16a34a; } .vt-herk-fest.keine .vt-punkt { background: #94a3b8; }
.vt-feld.fehler input { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220,38,38,.12) !important; }
.vt-feld.fehler .vt-herk, .vt-feld.fehler .vt-chip { border-color: #f0a3a3; }
.vt-feld .vt-fehltext { color: #b91c1c; font-weight: 600; font-size: 12px; }
.vt-sonder { border: 1px solid #e5e9f0; border-radius: 8px; padding: 8px 12px; background: #fff; }
.vt-sonder summary { cursor: pointer; font-size: 13px; font-weight: 600; color: #334155; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.vt-sonder-an { font-weight: 400; color: #64748b; font-size: 12.5px; } .vt-sonder-an.aktiv { color: #9a3412; font-weight: 600; }
.vt-sonder-inhalt { display: grid; gap: 8px; padding: 8px 0 2px; }
.vt-bezug { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vt-bezug[hidden] { display: none; }
.vt-bezug-t { font-size: 12px; font-weight: 600; color: #475569; margin-right: 2px; }
.vt-bezug-vorschlag { border: 1px dashed #93b4dc; background: #f5f9ff; border-radius: 8px; padding: 5px 10px; display: grid; text-align: left; color: #0b4f8a; cursor: pointer; }
.vt-bezug-vorschlag:hover { border-style: solid; border-color: var(--blau); }
.vt-bezug-vorschlag small, .vt-bezug-an small { font-size: 11.5px; color: #64748b; }
.vt-bezug-an { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; background: #eef5fd; border: 1px solid #c9dcf3; border-radius: 8px; padding: 7px 10px; }
.vt-link { border: 0; background: transparent; color: var(--blau); text-decoration: underline; font-size: 12px; margin-left: auto; cursor: pointer; padding: 0; }
@media (max-width: 560px) {
  .vt-sparten-gruppen { grid-template-columns: 1fr; gap: 4px; }
  .vt-gruppe-t { margin-top: 4px; }
  .vt-herk-raster { grid-template-columns: 1fr; }
  .vt-vertrag .vt-kopf { padding: 12px 14px 10px; } .vt-vertrag .vt-inhalt { padding: 0 14px 12px; } .vt-vertrag .vt-fuss { padding: 10px 14px; }
  .vt-vertrag .vt-fuss .vt-info { flex-basis: 100%; }
  .vt-vertrag .vt-knoepfe { width: 100%; } .vt-vertrag .vt-knoepfe .knopf { flex: 1 1 0; min-width: 0; padding: 0 8px; }
}
/* Kundenakte Details: Monatsbeitrag und „+ Weiterer Vertrag“ in einer Zeile */
.mb-zeile { display: flex; gap: 8px; align-items: stretch; }
.mb-zeile .monatsbeitrag { flex: 1; min-width: 0; }
.mb-knopf { height: auto; min-height: 34px; white-space: nowrap; border-radius: 10px; }
.vt-raster-fest { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
/* 12.10.2026: Abschluss-Leiste lief auf dem Handy rechts aus dem Bild (feste Breiten 220/310/274 px) – schmal umbrechen */
@media (max-width: 800px) {
  .abschluss-leiste { height: auto; margin: 2px 12px 0; gap: 8px; flex-wrap: wrap; overflow: visible; }
  .abschluss-leiste button:nth-child(n) { width: auto; flex: 1 1 auto; }
}

/* Idee 2 (12.10.2026): klickbare Zahlen in der Statuszeile + Filter-Chip über der Liste */
.statuszeile button.st-zahl { color: #2563eb; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; border-radius: 4px; padding: 0 2px; }
.statuszeile button.st-zahl:hover, .statuszeile button.st-zahl:focus-visible { background: #dbeafe; }
.statuszeile button.st-zahl.an { background: #2563eb; color: #fff; text-decoration: none; padding: 0 5px; }
.statusfilter { display: inline-flex; align-items: center; gap: 4px; background: #dbeafe; color: #1e3a8a; border-radius: 999px; padding: 3px 6px 3px 12px; font-size: 12.5px; white-space: nowrap; }
.statusfilter[hidden] { display: none; }
.statusfilter .sf-weg { all: unset; cursor: pointer; font-weight: 700; padding: 0 7px; border-radius: 999px; }
.statusfilter .sf-weg:hover { background: #bfdbfe; }
/* Idee 3: Wettbewerb in der Übersicht */
.ue2-wettbewerb { margin-bottom: 16px; }
.ue2-wettbewerb .ue2-matrix-kopf { align-items: flex-start; }
.ue2-wettbewerb tr.erster td { background: #fefce8; }
.ue2-medaille { font-size: 16px; display: inline-block; min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.leadtab .txt.kunde { font-weight: 600; }

/* Reiter „Chef“ (nur Thomas, 0079) */
.nav .reiter-chef { border: 1px dashed rgba(255,255,255,.35); }
.chefseite .ue2-karte + .ue2-karte { margin-top: 16px; }
.chefseite .ue2-kacheln { margin-bottom: 16px; }
.chef-schloss { font-size: 13px; font-weight: 500; color: #64748b; background: #f1f5f9; border-radius: 999px; padding: 3px 10px; vertical-align: middle; }
.chef-tab td, .chef-saetze td { vertical-align: middle; }
.chef-betrag { width: 96px; text-align: right; font: inherit; font-variant-numeric: tabular-nums; padding: 4px 8px; border: 1px solid #d5dce6; border-radius: 6px; background: #fff; }
.chef-betrag:focus { outline: 2px solid #93c5fd; border-color: #3b82f6; }
.chef-saetze select { font: inherit; padding: 4px 6px; border: 1px solid #d5dce6; border-radius: 6px; background: #fff; max-width: 260px; }
.chef-storno td { background: #fff7ed; }
.chef-tag { margin-left: 6px; font-size: 11px; color: #c2410c; background: #ffedd5; border-radius: 4px; padding: 1px 6px; }
.chef-minus { color: #b91c1c; font-weight: 600; } .chef-plus { color: #15803d; font-weight: 600; }

/* Reiter „Chef“: Kalkulation – Bilanz, Rechner, Personal, Meta-Werbekosten (0090) */
.chef-kacheln { grid-template-columns: minmax(240px, 1.3fr) repeat(3, minmax(170px, 1fr)); }
.chef-kacheln.klein strong { font-size: 20px; }
.ue2-kachel.chef-k-minus { background: #fef2f2; border-color: #fecaca; } .ue2-kachel.chef-k-minus strong { color: #b91c1c; }
.ue2-kachel.chef-k-plus { background: #f0fdf4; border-color: #bbf7d0; } .ue2-kachel.chef-k-plus strong { color: #15803d; }
.chef-h3 { font-size: 14px; margin: 16px 0 6px; color: #0f172a; }
.chef-bilanz tr.chef-summe td { border-top: 2px solid #e2e8f0; background: #f8fafc; }
.chef-bilanz tr.chef-spaeter td { background: #f8fafc; font-style: italic; }
.chef-bilanz tr.chef-jetzt td { background: #eff6ff; }
.chef-bilanz tr.chef-schwelle td { background: #fefce8; }
.chef-bilanz tr.chef-inaktiv td, .chef-personal tr.chef-inaktiv td { color: #94a3b8; }
.chef-tag.blau { color: #1d4ed8; background: #dbeafe; }
.chef-rechner-felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 16px; margin: 8px 0 14px; }
.chef-feld { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: #334155; min-width: 0; }
.chef-feld-wert { display: flex; align-items: center; gap: 6px; }
.chef-feld-wert .chef-betrag { width: 120px; }
.chef-feld em { font-style: normal; color: #64748b; }
.chef-feld small { color: #64748b; font-size: 11.5px; }
.chef-satz { font-size: 14px; font-weight: 600; margin: 10px 0 2px; }
.chef-personal .chef-eingabe { font: inherit; padding: 4px 6px; border: 1px solid #d5dce6; border-radius: 6px; background: #fff; width: 100%; min-width: 80px; box-sizing: border-box; }
.chef-personal .chef-eingabe.r { text-align: right; }
.chef-personal .chef-eingabe.kurz { min-width: 56px; width: 64px; }
.chef-personal input[type=month] { min-width: 130px; }
.chef-personal td.mitte { text-align: center; }
.chef-loeschen { color: #b91c1c; white-space: nowrap; }
.chef-saetze tr.chef-ohne td:last-child { color: #b45309; }
@media (max-width: 1100px) { .chef-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .chef-kacheln { grid-template-columns: 1fr; } .chef-rechner-felder { grid-template-columns: 1fr 1fr; } }
.chef-bilanz td.r, .chef-bilanz th.r { white-space: nowrap; }
.chef-mini { width: 54px !important; padding: 2px 6px; }
.chef-mini-label { white-space: nowrap; }
.chef-einst { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 4px 0 12px; font-size: 12.5px; color: #334155; align-items: center; }
.chef-einst .chef-mini-label { white-space: normal; }
.chef-eingabe.mail { min-width: 170px; }
.chef-teilung td:first-child { min-width: 220px; }
.chef-teilung { max-width: 760px; }

/* Gewerbe (0094): Formularantworten in der Kundenakte, fällige Wiedervorlage in der Gewerbe-Liste */
:is(.gewerbe-angaben, .gewerbe-risiko) .g-angaben { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 0; padding: 8px 10px;
  border: 1px solid var(--linie); border-radius: 10px; background: #f8fafc; }
:is(.gewerbe-angaben, .gewerbe-risiko) .g-angaben > div { min-width: 0; }
:is(.gewerbe-angaben, .gewerbe-risiko) .g-angaben dt { margin: 0; font-size: 11px; font-weight: 600; color: var(--text-leise); }
:is(.gewerbe-angaben, .gewerbe-risiko) .g-angaben dd { margin: 1px 0 0; font-size: 13px; color: var(--text); overflow-wrap: anywhere; white-space: pre-line; }
.gewerbe-angaben.im-verlauf { flex: 0 0 auto; }
.gewerbe-angaben.im-verlauf > label { display: block; margin: 0 0 4px; font-size: 11.5px; font-weight: 600; color: var(--text-leise); }
/* Gewerbe-Risiko (0138–0141): Betriebsart, Beiträge je Versicherungssumme, Risikofrage – Kasten in der Kundenakte, Spalte in der Liste */
.gewerbe-risiko { gap: 8px !important; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 10px; background: #fff; }
.gewerbe-risiko .g-angaben { background: #f8fafc; }
.gr-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.gr-status { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: #dbeafe; color: #1e40af; }
.gr-status.ok { background: #dcfce7; color: #166534; } .gr-status.warn { background: #ffedd5; color: #9a3412; }
.gr-hinweis { font-size: 12.5px; color: #334155; }
.gr-frage { font-size: 12.5px; color: #1e293b; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 6px 9px; }
.gr-klein { font-size: 11.5px; color: var(--text-leise); line-height: 1.4; }
.gr-preise { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.gr-preise th { text-align: left; font-size: 11px; font-weight: 600; color: var(--text-leise); padding: 4px 6px; border-bottom: 1px solid var(--linie); }
.gr-preise td { padding: 5px 6px; border-bottom: 1px solid #f0f2f6; white-space: nowrap; }
.gr-preise th:nth-child(n+2), .gr-preise td:nth-child(n+2) { text-align: right; }
.gr-preise .gr-quelle { display: block; font-size: 10.5px; font-weight: 600; }
.gr-preise tr.wunsch td { font-weight: 700; background: #f1f6fc; }
.gr-preise .gr-quelle.ok { color: #166534; } .gr-preise .gr-quelle.rw { color: #9a3412; }
.gr-antworten { display: grid; gap: 4px; }
.gr-lbl { font-size: 11px; font-weight: 600; color: var(--text-leise); }
.gr-antwort { font-size: 12.5px; background: #f8fafc; border-radius: 8px; padding: 5px 8px; overflow-wrap: anywhere; white-space: pre-line; }
.gr-zeit { display: block; font-size: 11px; color: var(--text-leise); }
.gr-tipps summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--navy-text); }
.gr-tipps ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: #334155; display: grid; gap: 3px; }
.gr-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.gr-knoepfe .knopf { height: 32px; font-size: 12.5px; }
.gr-schalter { height: 26px; border: 1px solid var(--feldrand); border-radius: 6px; background: #fff; font-size: 12px; padding: 0 4px; }
.txt.g-risiko.warn { color: #9a3412; } .txt.g-risiko.ok { color: #166534; }
.gr-zeile { margin-top: 6px; padding: 7px 10px; border-radius: 10px; border: 1px solid #d6e4f5; background: #f1f6fc; font-size: 12.5px; display: grid; gap: 3px; overflow-wrap: anywhere; }
.gr-zeile.warn { border-color: #fed7aa; background: #fff7ed; } .gr-zeile.ok { border-color: #c7ebcd; background: #effaf1; }
.gr-link { font-size: 11.5px; color: var(--blau); cursor: pointer; justify-self: start; }
@media (max-width: 640px) { .gr-knoepfe .knopf { flex: 1 1 calc(50% - 6px); } }
/* Gewerbe-Kästchen in den Listen (RF/AM1/WA1, Thomas 20.10.2026): gestreift = Gewerbe-Versand aus, Klick sendet nicht; WA/Mail neben RF = Weg der Rückfrage */
.haken.gw-aus { border: 1px dashed #d97706; cursor: not-allowed; background: repeating-linear-gradient(135deg, #fffbeb 0 2px, #fcd34d 2px 3.5px); }
.haken.gw-aus::after { border-color: transparent !important; }
.gw-rf { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; }
.gw-kanal { font-size: 9.5px; line-height: 1; font-weight: 600; color: #64748b; letter-spacing: .01em; }
/* WA-Kästchen bei „kein WhatsApp“ (Thomas 21.10.2026): das Kästchen schickt die SMS – klein „SMS“ daneben (wie früher „WA“ neben RF) */
.gw-kanal.sms { color: #0e7490; }
.gw-hinweis { flex: 0 0 auto; font-size: 11.5px; font-weight: 600; color: #92400e; background: #fef3c7; border: 1px solid #fde68a; border-radius: 999px; padding: 2px 9px; white-space: nowrap; cursor: help; }
.gw-hinweis[hidden] { display: none; }
/* Gewerbe: Beitrag mtl./JSB netto aus der Einschätzung (nur Anzeige) – EASY-Wert normal, Richtwert/„ab“/0 dezent grau */
input.gw-vorschlag::placeholder { color: var(--text); opacity: 1; }
input.gw-vorschlag.rw::placeholder { color: #9aa3b2; }
.txt.gw-vorschlag.rw { color: #8a94a6; }

/* ---------- Aufgaben (0102, aufgaben.js): Listen je Person, Büro-Routine, Zeitplan, Infos/Vorlagen/Bürodienst – Entwurf v13 (Thomas 13.10.2026) ----------
   Eigene Klassen mit Vorsilbe af- (stören den Lead-Teil nicht). Weinrot als Akzent, Ampel rot/gelb/grün, alles direkt an der Stelle bearbeitbar. */
.aufgaben { --af-rot: #8e0038; --af-rot-dunkel: #6b002a; --af-rot-soft: #f6e3ec; --af-card: #ffffff; --af-card2: #faf7f8; --af-line: #dedad9; --af-mute: #6b7079;
  --af-ok: #1f7a3a; --af-ok-soft: #e1f3e6; --af-warn: #9a5a00; --af-warn-soft: #fff1d6; --af-crit: #b3261e; --af-crit-soft: #fde3e1; font-size: 14px; line-height: 1.4; color: #1f2328; }
.aufgaben button:focus-visible, .aufgaben input:focus-visible, .aufgaben select:focus-visible, .aufgaben textarea:focus-visible, .aufgaben .af-edit:focus-visible { outline: 3px solid var(--af-rot-soft); outline-offset: 2px; }
.af-wrap { max-width: 1100px; margin: 0 auto; padding: 14px 18px 60px; }
.aufgaben h1 { font-size: 22px; margin: 0 0 8px; font-weight: 700; text-wrap: balance; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.aufgaben h1 small { font-weight: 400; color: var(--af-mute); font-size: 13px; }
.af-ki { font-size: 12.5px; color: var(--af-mute); margin: 0 0 12px; }
.af-ki b { color: var(--af-rot-dunkel); }
.af-leise { font-size: 12.5px; color: var(--af-mute); }
.af-leer { color: var(--af-mute); font-size: 14px; padding: 6px 2px; }
h2.af-sek { font-size: 19px; margin: 22px 0 8px; padding-top: 14px; border-top: 1px solid var(--af-line); font-weight: 700; }
h2.af-sek small { font-weight: 400; color: var(--af-mute); font-size: 13px; margin-left: 8px; }
/* Bereiche (Arten): Überschrift mit ▾/▸, „+“, Zeitfenster, Stand – einklappbar */
.af-block { margin-bottom: 16px; }
.af-block.oben { margin-top: 16px; }
.af-block h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .05em; color: var(--af-mute); margin: 0 0 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 700; }
.af-block h2 .af-stand { margin-left: auto; font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.af-block h2 .af-titel { cursor: pointer; }
.af-block h2 .af-auf { width: 24px; height: 24px; border: 0; background: transparent; color: var(--af-mute); font-size: 13px; cursor: pointer; border-radius: 6px; padding: 0; margin-left: -4px; }
.af-block h2 .af-auf:hover { background: var(--af-rot-soft); color: var(--af-rot-dunkel); }
.af-block h2 .af-plus { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--af-rot); background: var(--af-card); color: var(--af-rot-dunkel); font-size: 17px; line-height: 1; font-weight: 700; cursor: pointer; padding: 0; }
.af-block h2 .af-plus:hover { background: var(--af-rot); color: #fff; }
.af-block h2 .af-kurz { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.af-block h2 .af-fenster { font-size: 11.5px; text-transform: none; letter-spacing: 0; color: var(--af-mute); font-weight: 600; }
.af-block h2 .af-fenster.ueber { color: var(--af-crit); }
.af-block.zu { margin-bottom: 6px; }
.af-block.zu h2 { padding: 6px 10px; background: var(--af-card); border: 1px solid var(--af-line); border-radius: 8px; margin: 0; }
.af-block form.af-form { margin-bottom: 6px; border-left: 4px solid var(--af-rot); }
.af-klappen { display: inline-flex; gap: 4px; margin-left: 4px; vertical-align: middle; }
.af-heutedran { background: var(--af-rot-soft); color: var(--af-rot-dunkel); border-radius: 8px; padding: 6px 10px; font-size: 13px; margin-bottom: 8px; font-weight: 600; }
/* Zeilen */
.af-liste { display: flex; flex-direction: column; gap: 4px; }
.af-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; background: var(--af-card); border: 1px solid var(--af-line); border-left: 4px solid var(--af-line); border-radius: 8px; padding: 6px 10px; }
.af-zeile.rot { border-left-color: var(--af-crit); } .af-zeile.gelb { border-left-color: #f0b253; } .af-zeile.fertig { opacity: .55; border-left-color: var(--af-ok); }
.af-zeile.anfrage { border-left-color: var(--af-warn); background: var(--af-card2); }
.af-zeile.fertig .af-t { text-decoration: line-through; }
.af-zeile input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--af-rot); cursor: pointer; margin: 0; }
.af-zeile .af-inh { min-width: 0; }
.af-zeile .af-t { font-weight: 600; }
.af-zeile .af-t button, .af-zeile button.af-d { background: none; border: 0; padding: 0; cursor: text; text-align: left; color: inherit; font: inherit; border-radius: 3px; }
.af-zeile .af-t button { font-weight: 600; }
.af-zeile .af-t button:hover, .af-zeile button.af-d:hover { background: var(--af-rot-soft); box-shadow: 0 0 0 3px var(--af-rot-soft); }
.af-zeile .af-d { color: var(--af-mute); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; white-space: pre-line; display: block; width: 100%; margin-top: 1px; }
.af-zeile .af-zusatz { color: var(--af-mute); font-size: 12px; font-variant-numeric: tabular-nums; }
.af-zeile .af-r { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 380px; }
.af-zeile .af-r .af-pill { white-space: normal; text-align: left; }
.af-zeile.bearb { display: block; border-left-color: var(--af-rot); }
.af-zeile.bearb form.af-form { margin: 0; border: 0; padding: 4px 0 2px; background: transparent; }
.af-anfragebox { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; background: var(--af-warn-soft); border-radius: 8px; padding: 6px 8px; font-size: 13px; }
.af-anfragebox input { flex: 1 1 200px; padding: 5px 8px; border: 1px solid var(--af-line); border-radius: 6px; background: var(--af-card); min-width: 0; }
.af-pill { font-size: 11px; font-weight: 700; letter-spacing: .02em; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.af-pill.ok { background: var(--af-ok-soft); color: var(--af-ok); } .af-pill.warn { background: var(--af-warn-soft); color: var(--af-warn); }
.af-pill.crit { background: var(--af-crit-soft); color: var(--af-crit); } .af-pill.neutral { background: #e8e4e5; color: #1f2328; }
.af-wer { font-size: 12px; color: var(--af-mute); white-space: nowrap; }
.af-x { background: none; border: 0; color: var(--af-mute); font-size: 19px; line-height: 1; padding: 0 5px; cursor: pointer; border-radius: 6px; }
.af-x:hover { color: var(--af-crit); background: var(--af-crit-soft); }
/* Knöpfe */
.af-knopf { font-weight: 600; font-size: 14px; border-radius: 8px; padding: 8px 14px; border: 1px solid var(--af-line); background: var(--af-card); color: #1f2328; cursor: pointer; }
.af-knopf:hover { background: var(--af-card2); }
.af-knopf.rot { background: var(--af-rot); color: #fff; border-color: var(--af-rot); } .af-knopf.rot:hover { background: var(--af-rot-dunkel); }
.af-knopf.klein { padding: 4px 9px; font-size: 13px; }
.af-knopf.weg { color: var(--af-crit); margin-right: auto; }
.af-knopf.neu { border-color: var(--af-rot); color: var(--af-rot-dunkel); }
.af-knoepfe { display: flex; gap: 8px; justify-content: flex-end; grid-column: 1 / -1; flex-wrap: wrap; }
/* Formular */
form.af-form { background: var(--af-card); border: 1px solid var(--af-line); border-radius: 10px; padding: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-bottom: 16px; }
form.af-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--af-mute); min-width: 0; }
form.af-form input, form.af-form select, form.af-form textarea { padding: 7px 9px; border: 1px solid var(--af-line); border-radius: 7px; background: #f7f5f5; color: #1f2328; min-width: 0; font-size: 14px; }
form.af-form input:focus, form.af-form select:focus, form.af-form textarea:focus { background: #fff; border-color: var(--af-rot); outline: none; }
form.af-form .af-breit { grid-column: 1 / -1; }
form.af-form .af-formtitel { font-weight: 700; }
form.af-form .af-zweier { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
form.af-form .af-wenkopf { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--af-mute); margin-bottom: 5px; }
form.af-form .af-wen { display: flex; flex-wrap: wrap; gap: 6px; }
form.af-form .af-wen label { flex-direction: row; align-items: center; gap: 5px; background: #f7f5f5; border: 1px solid var(--af-line); border-radius: 999px; padding: 4px 10px; color: #1f2328; cursor: pointer; }
form.af-form .af-wen input { width: 16px; height: 16px; accent-color: var(--af-rot); margin: 0; padding: 0; }
form.af-form .af-artzeile { display: flex; gap: 6px; align-items: flex-end; }
form.af-form .af-artzeile label { flex: 1 1 auto; }
form.af-form .af-artneu { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
form.af-form .af-artneu input { flex: 1 1 200px; }
form.af-form .af-kihinweis { font-size: 12px; color: var(--af-rot-dunkel); min-height: 1.2em; }
.af-kihinweis-zeile { margin: 2px 0 4px; padding: 3px 8px; border-radius: 6px; background: var(--af-warn-soft); color: var(--af-warn); font-size: 12px; font-weight: 600; line-height: 1.35; }
form.af-form .af-nr { font-size: 13px; font-weight: 600; padding: 6px 10px; background: var(--af-rot-soft); border-radius: 8px; }
form.af-form .af-nr[hidden] { display: none; }
/* Direkt bearbeitbarer Text */
.af-edit { cursor: text; border-bottom: 1px dashed transparent; border-radius: 3px; padding: 0 2px; margin: 0 -2px; white-space: pre-line; }
.af-edit:hover { border-bottom-color: var(--af-rot); background: var(--af-rot-soft); }
.af-edit.leer { color: var(--af-mute); font-style: italic; }
.af-edit-feld { width: 100%; padding: 4px 6px; border: 1px solid var(--af-rot); border-radius: 6px; background: #fff; color: #1f2328; min-width: 0; box-sizing: border-box; font: inherit; }
textarea.af-edit-feld { resize: vertical; line-height: 1.4; }
.af-zeilenknoepfe { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.af-zeilenknoepfe.oben { margin: 0 0 10px; }
/* Infos, Vorlagen, Bürodienst */
.af-sprung { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.af-sprung a { font-size: 13px; font-weight: 600; color: var(--af-rot-dunkel); background: var(--af-rot-soft); border-radius: 999px; padding: 4px 11px; text-decoration: none; }
.af-vorlagen { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.af-vorlage { background: var(--af-card); border: 1px solid var(--af-line); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.af-vorlage header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.af-vorlage header b { flex: 1 1 auto; min-width: 0; }
.af-vorlage pre { white-space: pre-wrap; font: 13px/1.45 var(--schrift); color: var(--af-mute); margin: 0; max-height: 7.3em; overflow: hidden; }
.af-vorlage.auf pre { max-height: none; }
.af-infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.af-info { background: var(--af-card); border: 1px solid var(--af-line); border-radius: 10px; padding: 12px; min-width: 0; }
.af-info h3 { margin: 0 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--af-mute); display: flex; gap: 6px; align-items: center; }
.af-info h3 .af-edit { flex: 1 1 auto; }
.af-info ul { margin: 0; padding-left: 18px; } .af-info li { margin-bottom: 3px; }
.af-info dl { margin: 0; display: grid; grid-template-columns: fit-content(42%) minmax(0, 1fr); gap: 4px 10px; } .af-info dt { font-weight: 600; } .af-info dd { margin: 0; color: var(--af-mute); overflow-wrap: anywhere; display: flex; gap: 4px; align-items: flex-start; }
.af-info dd .af-edit { flex: 1 1 auto; }
.af-tabwrap { overflow-x: auto; }
table.af-t { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--af-card); border: 1px solid var(--af-line); border-radius: 8px; overflow: hidden; }
table.af-t th, table.af-t td { padding: 7px 9px; text-align: left; border-top: 1px solid var(--af-line); vertical-align: top; }
table.af-t th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--af-mute); border-top: 0; background: var(--af-card2); }
table.af-t td.n { font-variant-numeric: tabular-nums; text-align: right; }
table.af-t button.af-link { background: none; border: 0; padding: 0; color: var(--af-rot-dunkel); font-weight: 600; cursor: pointer; font: inherit; }
/* Übersicht: Kacheln je Person, Suche, Protokoll */
.af-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 16px; }
.af-kachel { background: var(--af-card); border: 1px solid var(--af-line); border-radius: 10px; padding: 10px 12px; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.af-kachel:hover { border-color: var(--af-rot); }
.af-kachel b { font-size: 17px; display: block; }
.af-kachel .af-zahlen { display: flex; gap: 8px; margin-top: 4px; font-size: 13px; color: var(--af-mute); font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.af-kachel .af-zahlen .rot { color: var(--af-crit); font-weight: 700; }
.af-suchbox { position: relative; margin-bottom: 14px; }
.af-suchbox input { width: 100%; box-sizing: border-box; padding: 11px 14px 11px 40px; border: 2px solid var(--af-line); border-radius: 12px; background: var(--af-card); color: #1f2328; font-size: 16px; }
.af-suchbox input:focus { border-color: var(--af-rot); outline: 0; }
.af-suchbox .af-lupe { position: absolute; left: 13px; top: 12px; font-size: 16px; color: var(--af-mute); pointer-events: none; }
.af-treffer { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.af-treffer button { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; text-align: left; background: var(--af-card); border: 1px solid var(--af-line); border-radius: 8px; padding: 7px 10px; cursor: pointer; color: inherit; font: inherit; }
.af-treffer button:hover { border-color: var(--af-rot); }
.af-treffer .af-typ { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--af-rot-dunkel); }
.af-treffer .af-tt { font-weight: 600; } .af-treffer .af-s { color: var(--af-mute); font-size: 13px; overflow-wrap: anywhere; }
.af-treffer mark { background: #ffe58a; color: #3a2600; border-radius: 2px; padding: 0 1px; }
.af-blitz { animation: af-blitz 2.4s ease-out; }
@keyframes af-blitz { 0%, 40% { box-shadow: 0 0 0 3px var(--af-rot); background: var(--af-rot-soft); } 100% { box-shadow: none; } }
.af-protokoll { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.af-protokoll .af-info ul { list-style: none; padding: 0; margin: 0; } .af-protokoll .af-info li { display: grid; grid-template-columns: 40px auto minmax(0, 1fr); gap: 8px; align-items: start; font-size: 13px; padding: 5px 0; border-top: 1px solid var(--af-linie, #ece9ea); } .af-protokoll .af-info li:first-child { border-top: 0; } .af-protokoll .af-info li .af-u { color: var(--af-mute); font-variant-numeric: tabular-nums; padding-top: 2px; }
.af-protokoll .af-info li .af-pill { align-self: start; margin-top: 1px; }
.af-protokoll .af-prot-was { min-width: 0; } .af-protokoll .af-prot-was b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-protokoll .af-prot-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--af-mute); font-size: 12px; line-height: 1.35; }
.af-protokoll .af-prot-bilanz { margin: -4px 0 6px; font-size: 12px; }
/* Tagesbilanz (Chef) */
.af-bilanz { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; margin-bottom: 14px; }
.af-bil-karte.af-bil-achtung { border-left: 4px solid var(--af-crit); }
.af-bil-summe { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.af-bil-gruppe { margin-top: 8px; } .af-bil-gruppe h4 { margin: 0 0 4px; font-size: 12px; font-weight: 600; }
.af-bil-gruppe ul { list-style: none; margin: 0; padding: 0; }
.af-bil-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 6px 8px; margin-bottom: 4px; border-radius: 8px; background: #f7f5f6; font-size: 13px; }
.af-bil-zeile.rot { background: var(--af-crit-soft); } .af-bil-zeile.gelb { background: var(--af-warn-soft); } .af-bil-zeile.gruen { background: var(--af-ok-soft); }
.af-bil-titel { grid-column: 1; text-align: left; background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: inherit; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-bil-titel:hover { text-decoration: underline; }
.af-bil-art { grid-column: 2; grid-row: 1; font-size: 11px; color: var(--af-mute); white-space: nowrap; }
.af-bil-stand, .af-bil-hinweise, .af-bil-ki { grid-column: 1 / -1; font-size: 12px; line-height: 1.35; }
.af-bil-stand { color: #1f2328; } .af-bil-stand.af-bil-leer { color: var(--af-crit); font-style: italic; }
.af-bil-hinweise { color: var(--af-mute); }
.af-bil-ki { color: #3b2f6b; } .af-bil-ki.fraglich, .af-bil-ki.nicht_versucht { color: var(--af-crit); } .af-bil-ki.duenn { color: var(--af-warn); } .af-bil-ki.gut { color: var(--af-ok); }
.af-bil-ki.tag { margin: 0 0 8px; font-size: 13px; }
.af-kachel-bilanz { margin-top: 6px; text-align: left; } .af-kachel-bilanz-zahlen { display: flex; gap: 8px; font-size: 12px; } .af-kachel-bilanz-zahlen .ok { color: var(--af-ok); } .af-kachel-bilanz-zahlen .warn { color: var(--af-warn); font-weight: 700; } .af-kachel-bilanz-zahlen .crit { color: var(--af-crit); font-weight: 700; }
.af-pill-knopf { border: 0; cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; } .af-termin-namen { font-size: 12px; line-height: 1.5; padding: 4px 8px; background: var(--af-ok-soft); border-radius: 6px; }
.af-kachel-ki { margin-top: 4px; font-size: 12px; line-height: 1.3; color: #3b2f6b; white-space: normal; }
/* Büro-Routine: auffällig, einzeln abhakbar; fertig = schmale grüne Zeile */
.af-routine { border: 2px solid var(--af-rot); border-radius: 12px; background: var(--af-card); margin-bottom: 14px; overflow: hidden; }
.af-routine header { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--af-rot); color: #fff; font-weight: 700; font-size: 15px; flex-wrap: wrap; }
.af-routine header .af-r-stand { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; opacity: .9; }
.af-routine header .af-r-wer { font-weight: 500; opacity: .9; }
.af-routine header button { background: rgba(255,255,255,.18); color: #fff; border: 0; border-radius: 999px; padding: 3px 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.af-routine .af-r-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; padding: 10px 12px; }
.af-routine .af-r { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--af-line); border-radius: 8px; font-size: 15px; font-weight: 600; background: var(--af-card2); min-width: 0; }
.af-routine .af-r input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--af-rot); flex: 0 0 auto; margin: 0; cursor: pointer; }
.af-routine .af-r .af-edit { flex: 1 1 auto; }
.af-routine .af-r .af-r-zeit { font-size: 11.5px; font-weight: 500; color: var(--af-mute); white-space: nowrap; }
.af-routine .af-r.ok { opacity: .55; text-decoration: line-through; }
.af-routine.fertig { border-color: var(--af-ok); } .af-routine.fertig header { background: var(--af-ok-soft); color: var(--af-ok); } .af-routine.fertig header button { background: var(--af-ok); }
.af-routine .af-r-fuss { display: flex; gap: 8px; padding: 0 12px 10px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--af-mute); }
.af-routine-klein { font-size: 13px; color: var(--af-mute); margin: 0 0 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (prefers-reduced-motion: no-preference) { .af-routine.dringend header { animation: af-puls 1.3s ease-in-out infinite; } @keyframes af-puls { 0%, 100% { box-shadow: inset 0 0 0 0 rgba(255,255,255,0); } 50% { box-shadow: inset 0 0 0 4px rgba(255,255,255,.45); } } }
/* Zeitplan des Tages */
.af-zeitplan { display: flex; gap: 6px; flex-wrap: wrap; align-items: stretch; margin: 0 0 14px; }
.af-zp { display: flex; flex-direction: column; gap: 2px; min-width: 130px; flex: 1 1 130px; padding: 7px 10px; border: 1px solid var(--af-line); border-radius: 10px; background: var(--af-card); font-size: 13px; }
.af-zp b { font-size: 13.5px; }
.af-zp .af-z-zeit { color: var(--af-mute); font-variant-numeric: tabular-nums; }
.af-zp .af-z-rest { font-weight: 700; font-variant-numeric: tabular-nums; }
.af-zp.jetzt { border-color: var(--af-rot); background: var(--af-rot-soft); box-shadow: inset 0 0 0 1px var(--af-rot); }
.af-zp.jetzt .af-z-rest { color: var(--af-rot-dunkel); }
.af-zp.vorbei { opacity: .55; }
.af-zp.ueber { border-color: var(--af-crit); background: var(--af-crit-soft); } .af-zp.ueber .af-z-rest { color: var(--af-crit); }
.af-zp-kopf { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; font-size: 13px; color: var(--af-mute); flex-wrap: wrap; }
/* Widerrufsliste / Stornos einfügen */
.af-mailbox { background: var(--af-card2); border: 1px solid var(--af-line); border-left: 4px solid var(--af-rot); border-radius: 8px; padding: 10px 12px; display: grid; gap: 6px; font-size: 13.5px; margin-bottom: 8px; }
.af-mailbox label { display: flex; gap: 8px; align-items: center; color: var(--af-mute); font-size: 13px; }
.af-mailbox input { flex: 1 1 auto; padding: 5px 8px; border: 1px solid var(--af-line); border-radius: 6px; background: var(--af-card); min-width: 0; }
.af-mailbox textarea { width: 100%; box-sizing: border-box; padding: 7px 9px; border: 1px solid var(--af-line); border-radius: 7px; background: var(--af-card); font: 13.5px/1.4 var(--schrift); min-height: 8em; }
/* Nummernsuche (Storno ohne Nummer): Links ins Örtliche / Telefonbuch / 11880 */
.af-nrsuche { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.af-storno-kontakt { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; margin: 5px 0; }
.af-aufnahmedatum { color: var(--af-mute); font-size: 12px; font-variant-numeric: tabular-nums; }
.af-anruf { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.af-anruf-lesend { cursor: default; background: transparent; }
.af-anruf:focus-visible, .af-nrsuche a:focus-visible { outline: 2px solid var(--af-rot); outline-offset: 2px; }
.af-nrsuche-zeile { display: flex; gap: 5px 8px; margin: 5px 0; padding: 7px 9px; border-radius: 7px; background: var(--af-warn-soft); }
.af-nrsuche-titel { font-weight: 600; font-size: 12px; color: var(--af-warn); }
.af-nrsuche-zeile > .af-leise { flex-basis: 100%; font-size: 12px; }
.af-importstand { font-size: 12px; color: var(--af-mute); margin: -2px 0 8px; font-variant-numeric: tabular-nums; }
.af-link-aussen { font-size: 11.5px; font-weight: 700; color: var(--af-rot-dunkel); background: var(--af-card); border: 1px solid var(--af-rot); border-radius: 999px; padding: 2px 8px; text-decoration: none; white-space: nowrap; }
.af-link-aussen:hover { background: var(--af-rot); color: #fff; }
form.af-form .af-nr { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* WhatsApp-Kasten am Storno */
.af-knopf.wa { border-color: #25d366; color: #0b7a3b; }
.af-knopf.wa:hover { background: #25d366; color: #fff; }
.af-storno-nummer { display: inline-flex; align-items: center; gap: 4px; }
.af-knopf.af-wa-symbol { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 26px; min-height: 26px; padding: 3px; border-color: transparent; background: transparent; }
.af-knopf.af-wa-symbol img { display: block; width: 18px; height: 18px; }
.af-knopf.af-wa-symbol:hover { background: #e6f8ed; border-color: #25d366; }
.af-kontakt-status-details { margin: 4px 0 6px; }
.af-wabox { grid-column: 1 / -1; display: grid; gap: 8px; background: #effaf3; border: 1px solid #b7e8c8; border-left: 4px solid #25d366; border-radius: 8px; padding: 10px 12px; font-size: 13.5px; }
.af-wabox .af-wakopf { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.af-wabox .af-wakopf label, .af-wabox .af-wanummer { display: flex; gap: 6px; align-items: center; color: var(--af-mute); font-size: 13px; }
.af-wabox select, .af-wabox input { padding: 5px 8px; border: 1px solid var(--af-line); border-radius: 6px; background: var(--af-card); color: #1f2328; font-size: 13.5px; min-width: 0; }
.af-wabox .af-wanummer input { flex: 1 1 200px; max-width: 320px; }
.af-wabox .af-anrede { display: inline-flex; gap: 4px; align-items: center; color: var(--af-mute); font-size: 13px; }
.af-wabox textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--af-line); border-radius: 7px; background: var(--af-card); font: 13.5px/1.45 var(--schrift); color: #1f2328; }
/* Meine Notizen */
.af-notizen textarea.af-notiz { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--af-line); border-left: 4px solid #f0b253; border-radius: 10px; background: #fffbea; font: 14px/1.45 var(--schrift); color: #1f2328; resize: vertical; }
.af-notizen textarea.af-notiz:focus { outline: none; border-color: #f0b253; box-shadow: 0 0 0 3px #fdecc8; }
.af-notizen .af-notiztext { white-space: pre-line; background: #fffbea; border: 1px solid var(--af-line); border-left: 4px solid #f0b253; border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.af-notizen .af-notizfuss { font-size: 12px; color: var(--af-mute); text-align: right; min-height: 1.2em; margin-top: 2px; }
/* Bestätigungen heute: je Zuordnung eine Spalte, Termin 1–6 */
.af-bestspalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.af-bestspalte { background: var(--af-card); border: 1px solid var(--af-line); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.af-bestspalte h3 { margin: 0 0 8px; font-size: 14px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.af-bestzeile { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 4px 8px; align-items: center; padding: 5px 0; border-top: 1px solid var(--af-line); font-size: 14px; }
.af-bestzeile input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--af-rot); margin: 0; cursor: pointer; }
.af-bestzeile label { font-weight: 700; cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; }
.af-bestzeile .af-bestnotiz { color: var(--af-mute); overflow-wrap: anywhere; }
.af-bestzeile .af-r-zeit, .af-bestzeile .af-pill { grid-column: 3; justify-self: start; font-size: 11.5px; color: var(--af-mute); }
.af-bestzeile.ok label { color: var(--af-ok); }
.af-bestzeile.ok .af-bestnotiz:not(.leer) { text-decoration: line-through; opacity: .7; }
/* Uhrzeit-Popup in der Mitte des Bildschirms */
.af-popup { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; background: rgba(31, 35, 40, .55); padding: 16px; }
.af-popup-box { background: var(--af-card, #fff); color: #1f2328; border: 4px solid var(--af-rot); border-radius: 16px; padding: 22px 26px; max-width: 560px; width: 100%; box-shadow: 0 18px 60px rgba(0,0,0,.35); display: grid; gap: 8px; animation: af-popup-auf .35s ease-out; }
@keyframes af-popup-auf { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.af-popup-zeit { font-size: 16px; font-weight: 800; color: var(--af-rot-dunkel); letter-spacing: .04em; text-transform: uppercase; }
.af-popup-titel { font-size: 28px; font-weight: 900; line-height: 1.15; text-wrap: balance; }
.af-popup-art { font-size: 14px; color: var(--af-mute); font-weight: 600; }
.af-popup-details { white-space: pre-line; font-size: 14px; color: var(--af-mute); max-height: 6em; overflow: hidden; }
.af-popup-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.af-popup-schlummer { display: inline-flex; gap: 4px; align-items: center; font-size: 13px; color: var(--af-mute); margin-right: auto; flex-wrap: wrap; }
@media (max-width: 560px) { .af-zeile { grid-template-columns: auto 1fr; } .af-zeile .af-r { grid-column: 2; justify-content: flex-start; max-width: none; } .af-wrap { padding: 10px 12px 60px; } .af-popup-titel { font-size: 22px; } }


/* Kompakte Aufgaben: Notizen und Suche bleiben pro Karte zunächst eingeklappt. */
.af-wrap { max-width: 1280px; padding-top: 10px; }
.af-block h2 { font-size: 13px; letter-spacing: .025em; gap: 6px; }
.af-block.zu h2 { padding: 4px 9px; }
.af-block { margin-bottom: 10px; }
.af-zeile { gap: 3px 8px; padding: 5px 8px; align-items: start; }
.af-zeile > input[type=checkbox] { margin-top: 3px; }
.af-zeile .af-t { font-size: 13px; }
.af-zeile .af-r { max-width: 310px; gap: 4px; padding-top: 1px; }
.af-zeile .af-r .af-knopf.klein { font-size: 12px; padding: 3px 7px; }
.af-zeile .af-storno-kontakt { gap: 4px 6px; margin: 3px 0; }
.af-zeile .af-anruf { font-size: 12px; padding: 2px 6px; }
.af-aufgabendetails { margin-top: 3px; min-width: 0; }
.af-aufgabendetails > summary { display: flex; align-items: baseline; gap: 7px; cursor: pointer; font-size: 12px; color: var(--af-mute); min-width: 0; list-style: none; }
.af-aufgabendetails > summary::-webkit-details-marker { display: none; }
.af-aufgabendetails > summary::before { content: '▸'; color: var(--af-rot-dunkel); }
.af-aufgabendetails[open] > summary::before { content: '▾'; }
.af-aufgabendetails > summary:focus-visible { outline: 2px solid var(--af-rot); outline-offset: 2px; }
.af-details-label { flex: 0 0 auto; font-weight: 600; color: var(--af-rot-dunkel); }
.af-notizvorschau { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.af-aufgabendetails[open] .af-notizvorschau { display: none; }
.af-detail-inhalt { padding: 6px 0 2px; display: grid; gap: 4px; }
.af-bearbeiten-aktion { display: flex; justify-content: flex-start; margin-top: 7px; }
/* Eigene To-Dos (Thomas/Erika/Mladen) einzeln zuklappbar – zugeklappt nur Titel, Uhrzeit, von wem (Thomas 20.10.2026) */
.af-zeile.af-zeile-zu { padding-top: 4px; padding-bottom: 4px; }
.af-zeile .af-t .af-zeile-klapp { width: 22px; height: 22px; margin: 0 2px 0 -4px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--af-rot-dunkel); font-size: 12px; cursor: pointer; vertical-align: 1px; }
.af-zeile .af-t .af-zeile-klapp:hover { background: var(--af-rot-soft); box-shadow: none; }
.af-zeile .af-t .af-zeile-titel { cursor: pointer; }
.af-bestaetigt-von { font-size: 11.5px; color: var(--af-ok); margin-top: 3px; }
.af-zeile.fertig { opacity: .82; }
@media (max-width: 760px) { .af-zeile { grid-template-columns: auto minmax(0, 1fr); } .af-zeile .af-r { grid-column: 2; justify-content: flex-start; max-width: none; } }

/* Abschlussdialog: die Kopiervorschau bleibt bis zur ausdrücklichen EASY-Bestätigung offen. */
.af-abschluss-overlay { z-index: 9100; }
.af-abschluss-box { max-width: 670px; max-height: calc(100dvh - 32px); overflow-y: auto; padding: 18px 20px; border-width: 2px; box-sizing: border-box; }
.af-ansehen-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 12px 0; line-height: 1.5; }
.af-abschluss-form { display: grid; gap: 8px; min-width: 0; }
.af-abschluss-form h2 { margin: 0; font-size: 19px; }
.af-abschluss-kunde { font-size: 14px; font-weight: 600; }
.af-abschluss-form label { font-size: 13px; font-weight: 600; }
.af-abschluss-form textarea { width: 100%; min-width: 0; box-sizing: border-box; resize: vertical; padding: 8px 10px; border: 1px solid var(--af-line); border-radius: 7px; font: 13px/1.4 var(--schrift); color: #1f2328; background: #fff; }
.af-abschluss-hinweis { background: var(--af-warn-soft); padding: 8px 10px; border-radius: 6px; font-size: 13px; margin: 0; }
.af-abschluss-alt { font-size: 12px; color: var(--af-mute); }
.af-abschluss-alt summary { cursor: pointer; }
.af-abschluss-alt .af-d { white-space: pre-line; padding-top: 5px; }
.af-abschluss-meldung { font-size: 13px; color: var(--af-rot-dunkel); }
.af-abschluss-meldung:empty { display: none; }
.af-abschluss-ausgabe { display: grid; gap: 7px; background: #fffbea; border: 1px solid #e2c978; padding: 12px; border-radius: 8px; }
.af-abschluss-ausgabe[hidden] { display: none; }
.af-abschluss-ausgabe p { margin: 0; }
.af-abschluss-checkbox { display: flex; align-items: start; gap: 8px; font-weight: 500 !important; }
.af-abschluss-checkbox input { margin: 2px 0 0; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--af-rot); }
.af-abschluss-form button:disabled { opacity: .5; cursor: not-allowed; }
/* Terminierung: Namen jederzeit eintragen und ergänzen (Thomas 20.10.2026) */
.af-termin-box { background: var(--af-card); border: 1px solid var(--af-line); border-left: 4px solid var(--af-rot); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; display: grid; gap: 8px; }
.af-termin-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.af-termin-liste { margin: 0; padding-left: 26px; columns: 3 170px; column-gap: 26px; font-size: 14px; }
.af-termin-liste li { break-inside: avoid; padding: 1px 0; overflow-wrap: anywhere; }
.af-termin-form { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.af-termin-form input { flex: 1 1 220px; min-width: 0; padding: 7px 9px; border: 1px solid var(--af-line); border-radius: 7px; background: #f7f5f5; font-size: 14px; color: #1f2328; }
.af-termin-form input:focus { background: #fff; border-color: var(--af-rot); outline: none; }
.af-termin-meldung { margin: 0; font-size: 13px; color: var(--af-ok); }
.af-termin-meldung.fehler { color: var(--af-crit); }
.af-termin-meldung:empty { display: none; }
.af-termin-fuss { display: flex; align-items: center; gap: 8px; justify-content: space-between; flex-wrap: wrap; }
.af-termin-fuss .af-leise { flex: 1 1 260px; }
.af-termin-dialogliste { display: grid; gap: 6px; }
.af-termin-zeile { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.af-termin-zeile input { min-width: 0; padding: 7px 9px; border: 1px solid var(--af-line); border-radius: 7px; font-size: 14px; color: #1f2328; background: #fff; }
.af-termin-nr { font-variant-numeric: tabular-nums; color: var(--af-mute); text-align: right; font-size: 13px; }
.af-termin-dialogfuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.af-termin-zaehler { margin: 0; font-size: 13px; color: var(--af-mute); }

.af-widerrufbox { padding: 6px 9px; font-size: 12.5px; }
.af-widerrufkopf { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }

/* Rubriken verwalten (TK/EK): dieselben Namen und dieselbe Reihenfolge für alle. */
.af-rubrik-aktionen { display: inline-flex; gap: 4px; align-items: center; }
.af-rubrik-menue { width: 170px; max-width: 100%; padding: 6px 8px; border: 1px solid var(--af-line); border-radius: 7px; background: var(--af-card); color: var(--af-text, #172b4d); font: 500 12px/1.3 system-ui, sans-serif; text-transform: none; letter-spacing: 0; cursor: pointer; }
.af-rubrik-menue:focus-visible { outline: 2px solid var(--af-rot); outline-offset: 2px; }
.af-rubrik-editor { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px; margin: 6px 0; background: var(--af-card); border: 1px solid var(--af-line); border-radius: 8px; }
.af-rubrik-editor input { flex: 1 1 200px; min-width: 120px; max-width: 420px; padding: 7px 9px; border: 1px solid var(--af-line); border-radius: 7px; font-size: 14px; }
.af-rubrik-editor [role="status"] { flex-basis: 100%; }
.af-rubrik-neu { margin: 12px 0 20px; }
/* Zeitplanverwaltung: nur Thomas/Erika sehen die Bedienelemente. */
.af-zp-kopf .af-zp-plus { margin-left: auto; }
.af-zp-edit { appearance: none; border: 0; padding: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.af-zp-edit:hover { text-decoration: underline; }
.af-zp-edit:focus-visible { outline: 2px solid var(--af-rot); outline-offset: 3px; }
.af-zp-edit.af-z-zeit { font-weight: 400; }
.af-zp-ordnung { display: flex; justify-content: flex-end; gap: 4px; margin-top: auto; padding-top: 4px; }
.af-zeitplan-form { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; padding: 12px; border: 1px solid var(--af-line); border-radius: 10px; background: var(--af-card); }
.af-zeitplan-form > b, .af-zeitplan-form > .af-leise, .af-zeitplan-fehler { flex-basis: 100%; }
.af-zeitplan-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.af-zeitplan-form input { box-sizing: border-box; min-height: 36px; padding: 6px 8px; border: 1px solid var(--af-line); border-radius: 6px; font: inherit; max-width: 100%; }
.af-zeitplan-form input[type="text"] { width: 280px; }
.af-zeitplan-fehler { margin: 0; color: var(--af-crit); }
.af-block.af-komplett { border-color: var(--af-ok); }
.af-block.af-komplett > h2 { background: var(--af-ok-soft); color: var(--af-ok); }
.af-hakenkuerzel, .af-hakenstempel { color: var(--af-ok); font-weight: 700; font-variant-numeric: tabular-nums; text-decoration: none; }
.af-t .af-hakenkuerzel { margin-right: .35em; }
.af-zeile.fertig { background: var(--af-ok-soft); opacity: 1; }
.af-zeile.fertig .af-t { text-decoration: none; }
.af-routine .af-r.ok { background: var(--af-ok-soft); color: var(--af-ok); opacity: 1; text-decoration: none; }
.af-bestzeile.ok { background: var(--af-ok-soft); border-radius: 6px; }
.af-bestzeile.ok .af-bestnotiz:not(.leer) { text-decoration: none; opacity: 1; }
.af-zeile.fertig input[type="checkbox"], .af-routine .af-r.ok input[type="checkbox"], .af-bestzeile.ok input[type="checkbox"] { accent-color: var(--af-ok); }
.af-zp.fertig { background: var(--af-ok-soft); border-color: var(--af-ok); color: var(--af-ok); opacity: 1; box-shadow: none; }
.af-zp.fertig .af-z-rest { color: var(--af-ok); }

.af-editor-titel { appearance: none; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; padding: 0; text-align: left; cursor: pointer; }
.af-editor-titel:hover { text-decoration: underline; }
.af-editor-titel:focus-visible { outline: 2px solid var(--af-rot); outline-offset: 3px; }

.af-zustaendigkuerzel { color: var(--af-mute); font-weight: 600; text-decoration: none; }
.af-t .af-zustaendigkuerzel, .af-formtitel .af-zustaendigkuerzel, .af-formtitel .af-hakenkuerzel { margin-right: .35em; }

/* Entfernte eigene Zeitblöcke bleiben wiederherstellbar. */
.af-zeitplan-entfernte { margin: 8px 0 12px; }
.af-zeitplan-entfernte summary { cursor: pointer; }
.af-zeitplan-entfernt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; }

#af-sek-zahlung label { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
#af-sek-zahlung input, #af-sek-zahlung textarea { width: 100%; box-sizing: border-box; }
#af-sek-zahlung textarea { resize: vertical; }
#af-sek-zahlung button { margin: 4px 8px 4px 0; }


/* Protokoll (Chef): Datum + Mitarbeiter wählen – 19.10.2026 */
.af-prot-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; }
.af-prot-leiste .af-prot-datum, .af-prot-leiste .af-prot-ma { font: inherit; font-size: 13px; padding: 4px 8px; border: 1px solid var(--af-line); border-radius: 8px; background: var(--af-card); color: inherit; }
.af-prot-leiste .af-knopf.klein { min-width: 30px; }
/* Übersicht mit Datum (0148, 20.10.2026): Tagesleiste, Hinweis „Ansicht vom …“, Kurzzeile je Mitarbeiter, frühere Tage nur lesend */
.af-tag-leiste { margin: 0 0 8px; }
.af-tag-leiste .af-tag-we { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; font-size: 13px; color: var(--af-mute); cursor: pointer; }
.af-tag-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 12px; padding: 10px 12px; border: 2px solid var(--af-warn); border-radius: 10px; background: var(--af-warn-soft); color: #3a2600; font-size: 14px; line-height: 1.4; }
.af-tag-banner b { color: var(--af-warn); }
.af-tag-luecke { margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: var(--af-warn-soft); color: #3a2600; font-size: 13px; line-height: 1.4; }
.af-kacheln.af-kacheln-chef { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.af-kachel-akt { margin-top: 5px; font-size: 11.5px; line-height: 1.35; color: var(--af-mute); overflow-wrap: anywhere; }
.af-kachel.gewaehlt { border-color: var(--af-rot); box-shadow: 0 0 0 2px var(--af-rot-soft); }
.af-bil-titel.nur-lesen { cursor: default; } .af-bil-titel.nur-lesen:hover { text-decoration: none; }
.af-bil-zeile.grau { background: #f1eff0; }
/* Kündigung/Widerruf: Satzvorschlag im Dialog und KI-Vorschlag auf der Karte – 19.10.2026 (0119) */
.af-grund-vorschlag, .af-ki-grund { margin: 8px 0; padding: 8px 10px; border: 1px dashed var(--af-rot); border-radius: 10px; background: var(--af-rot-soft); font-size: 13px; }
.af-grund-vorschlag b, .af-ki-grund b { display: block; margin-bottom: 4px; }
.af-grund-vorschlag-text { white-space: pre-wrap; margin: 2px 0 6px; }
.af-zusatz .af-knopf.klein { margin-left: 8px; vertical-align: middle; }
/* Automatik-Einträge im Verlauf kompakt (Thomas 19.10.2026: „die Infos vom CRM sind etwas zu viel“) */
.verlauf-eintrag.kompakt .vk { width: 20px; height: 20px; margin-top: 2px; }
.verlauf-eintrag.kompakt .vk .i { width: 11px; height: 11px; }
.verlauf-eintrag.kompakt .vk { margin-left: 4px; }
.verlauf-eintrag.kompakt::before { left: 13px; }
.verlauf-eintrag.kompakt .vt { padding: 3px 64px 4px 10px; margin-bottom: 2px; }
.verlauf-eintrag.kompakt .v-kopf b { font-size: 11.5px; color: #64748b; font-weight: 600; }
.verlauf-eintrag.kompakt .v-text, .verlauf-eintrag.kompakt .v-kompakt summary { font-size: 12px; color: #475569; line-height: 1.35; }
.verlauf-eintrag.kompakt .v-kompakt summary { cursor: pointer; list-style: none; }
.verlauf-eintrag.kompakt .v-kompakt summary::-webkit-details-marker { display: none; }
.verlauf-eintrag.kompakt .v-kompakt summary::after { content: ' mehr'; color: var(--blau); font-size: 11px; font-weight: 600; }
.verlauf-eintrag.kompakt .v-kompakt[open] summary::after { content: ' weniger'; }
.verlauf-eintrag.kompakt .badge { font-size: 10px; padding: 1px 6px; }
.verlauf-eintrag.kompakt::before { top: 22px; }
.v-bisher-alt { margin-top: 6px; }
.af-ki-rueckfrage { border-style: solid; background: #fff7e6; border-color: #d97706; }
.ue2-aktionen { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Wer hat welchen Lead gerade offen (Thomas 19./20.10.2026: „da soll stehen, wer den Lead gerade anklickt, mit dem Kürzel“) ----------
   Farbe je Mitarbeiter (app.js ANW_FARBEN): Kürzel am Namen, Linien über die ganze Zeile (auch seitlich gescrollt sichtbar), Kundenakte,
   oben „EK · Graepler“ (schmal: Leiste über der Liste), Aufgaben-Zeile */
.anw-kz { display: inline-grid; place-content: center; flex: 0 0 auto; min-width: 22px; height: 18px; padding: 0 4px; border-radius: 9px; background: #475569; color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em; line-height: 1; box-shadow: 0 0 0 1.5px #fff; }
.leadtab .name-zelle { display: flex; align-items: center; gap: 3px; min-width: 0; padding-left: 2px; }
.leadtab .name-zelle .feld, .leadtab .name-zelle .txt { flex: 1 1 auto; min-width: 0; }
.leadtab tr.zeile.anw td { box-shadow: inset 0 2px 0 var(--anw), inset 0 -2px 0 var(--anw); }
.leadtab tr.zeile.anw td:first-child { box-shadow: inset 4px 0 0 var(--anw), inset 0 2px 0 var(--anw), inset 0 -2px 0 var(--anw); }
.leadtab tr.zeile.anw td:last-child { box-shadow: inset -4px 0 0 var(--anw), inset 0 2px 0 var(--anw), inset 0 -2px 0 var(--anw); }
.akte-kopf.mit-anw { flex-wrap: wrap; row-gap: 8px; }
.anw-akte { flex: 1 0 100%; display: flex; align-items: center; gap: 6px; box-sizing: border-box; padding: 5px 10px 5px 5px; border: 1.5px solid #f59e0b; border-radius: 10px;
  background: #fffbeb; color: #78350f; font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.anw-akte > span:last-child { min-width: 0; }
/* Kürzel oben, darunter klein der Nachname (braucht kaum mehr Breite, die Reiter bleiben sichtbar) */
.werda-offen { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; max-width: 70px; }
.werda-offen .werda-chip { width: 26px; height: 26px; font-size: 10.5px; background: rgba(255,255,255,.28); }
.werda-lead { display: block; max-width: 70px; height: 15px; padding: 0 5px; border: 0; border-radius: 8px; background: #fff; font-size: 10px; font-weight: 700; line-height: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.werda-lead:hover { text-decoration: underline; }
@media (max-width: 1500px) { .werda-offen, .werda-lead { max-width: 54px; } .werda { gap: 3px; } }
@media (max-width: 1340px) { .werda-offen, .werda-lead { max-width: 46px; } .werda-lead { padding: 0 3px; } }
.anw-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 12px; border-bottom: 1px solid var(--linie); background: #fffbeb; font-size: 12.5px; }
.anw-leiste[hidden] { display: none; }
.anw-leiste-titel { color: #92400e; font-weight: 600; }
.anw-leiste-eintrag { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 26px; padding: 0 10px 0 3px; border: 1px solid #fcd34d; border-radius: 999px;
  background: #fff; color: #0f172a; font-weight: 600; }
.anw-leiste-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
@media (min-width: 1001px) { .anw-leiste { display: none; } }
.af-anw { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 7px 1px 2px; border: 1px solid #fcd34d; border-radius: 999px; background: #fef3c7;
  color: #92400e; font-size: 11px; font-weight: 700; vertical-align: middle; white-space: nowrap; text-decoration: none; }

/* ---------------------------------------------------------------- Thomas 21.10.2026
   Statusfarben der Legende als Tokens: „im gespräch ist blau also in bearbeitung und kurz vor abschluss ist gute chancen“ */
:root {
  --st-bearbeitung: #3b82f6; --st-bearbeitung-hell: #dbeafe; --st-bearbeitung-text: #1e40af;   /* Legende „In Bearbeitung“ */
  --st-chancen: #ffd800; --st-chancen-hell: #fff4b3; --st-chancen-text: #4a3b00;                /* Legende „Gute Chancen“ */
}
/* Pille „Anruf heute“: Im Gespräch blau, Kurz vor Abschluss gelb – das Symbol behält die Kanalfarbe (WA grün, SMS cyan, Mail blau) */
.anruf-schreibt { border-color: var(--st-bearbeitung); background: var(--st-bearbeitung-hell); color: var(--st-bearbeitung-text); }
.anruf-schreibt.mail, .anruf-schreibt.sms { border-color: var(--st-bearbeitung); background: var(--st-bearbeitung-hell); color: var(--st-bearbeitung-text); }
.anruf-schreibt.kva, .anruf-schreibt.kva.mail, .anruf-schreibt.kva.sms { border-color: #e6c200; background: var(--st-chancen-hell); color: var(--st-chancen-text); }
.anruf-schreibt:hover:not(.ansicht), .anruf-schreibt.mail:hover:not(.ansicht), .anruf-schreibt.sms:hover:not(.ansicht) { box-shadow: 0 0 0 2px rgba(59, 130, 246, .22); }
.anruf-schreibt.kva:hover:not(.ansicht) { box-shadow: 0 0 0 2px rgba(230, 194, 0, .35); }
.anruf-schreibt:focus-visible { outline-color: var(--st-bearbeitung); }
/* Chips unter Heute fällig: „Im Gespräch“ blau, „Kurz vor Abschluss“ gelb */
.schreibt-chip { border-color: #93c5fd; background: var(--st-bearbeitung-hell); color: var(--st-bearbeitung-text); }
.schreibt-chip .i { color: var(--st-bearbeitung); }
.schreibt-chip[aria-pressed="true"] { border-color: var(--st-bearbeitung); background: var(--st-bearbeitung); color: #fff; }
.schreibt-chip:hover { box-shadow: 0 0 0 2px rgba(59, 130, 246, .2); }
.schreibt-chip:focus-visible { outline-color: var(--st-bearbeitung); }
.schreibt-chip.kva-chip { border-color: #e6c200; background: var(--st-chancen-hell); color: var(--st-chancen-text); margin-left: 6px; }
.schreibt-chip.kva-chip .i { color: #a68a00; }
.schreibt-chip.kva-chip[aria-pressed="true"] { border-color: #e6c200; background: var(--st-chancen); color: var(--st-chancen-text); }
.schreibt-chip.kva-chip[aria-pressed="true"] .i { color: var(--st-chancen-text); }
.schreibt-chip.kva-chip:hover { box-shadow: 0 0 0 2px rgba(230, 194, 0, .3); }
.schreibt-chip.leer, .schreibt-chip.kva-chip.leer { border-color: var(--linie); background: #fff; color: var(--text-leise); }
.schreibt-chip.leer .i { color: #94a3b8; }
.lg-schreibt.kva { border-color: #e6c200; background: var(--st-chancen-hell); color: var(--st-chancen-text); }
/* „Anruf heute“ mit Wiedervorlage an einem späteren Tag: „WV 02.11.“ neben dem normalen Kästchen (in allen Listen) */
.anruf-wv.anruf-wv-info { cursor: default; }
/* HelloMateo am Lead (Kopf der Kundenakte) und an WhatsApp-Einträgen im Verlauf */
.ikon.mateo { color: #4f46e5; }
.ikon.mateo:hover:not(:disabled) { color: #3730a3; }
.v-mateo { flex: 0 0 auto; display: inline-grid; place-content: center; width: 22px; height: 18px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #6366f1; cursor: pointer; }
.v-mateo .i { width: 14px; height: 14px; }
.v-mateo:hover, .v-mateo:focus-visible { background: #eef2ff; color: #3730a3; outline: none; }
/* E-Mail-Ansicht: „Antworten“ / „Neue E-Mail“ in der Filterzeile */
.verlauf-filter .vf-knoepfe { display: inline-flex; align-items: center; gap: 4px; }
.verlauf-filter .vf-mail { background: #fff; border: 1px solid #bfd3fb; border-radius: 6px; padding: 2px 8px; }
.verlauf-filter .vf-mail:hover { background: #dbe7ff; }
/* Gewerbe: rot = nicht selbst zeichenbar (Mail an Lüders), zeichenbar = schwarz (Thomas 21.10.2026) */
.txt.g-risiko.zeichenbar { color: var(--text); }
.txt.g-risiko.rot { color: #dc2626; font-weight: 600; }
.gr-zeile.rot { border-color: #fca5a5; background: #fef2f2; color: #991b1b; }
.gr-zeile .gr-lueders { justify-self: start; margin-top: 2px; }
.gewerbe-risiko .g-angaben dd.gr-rot { color: #dc2626; font-weight: 600; }
.gewerbe-risiko .g-angaben dd.gr-zeichenbar { color: var(--text); }
.gr-spezi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 7px 10px; border: 1px solid #fca5a5; border-radius: 8px; background: #fef2f2; color: #991b1b; font-size: 12.5px; }
.gr-quelle + .gr-quelle { margin-left: 4px; }
.gw-jahr-zelle { display: inline-flex; align-items: center; gap: 3px; width: 100%; padding-right: 8px; box-sizing: border-box; }
.gw-jahr-zelle .feld { min-width: 0; }
.gw-jahr { font-size: 11.5px; color: var(--text-leise); flex: 0 0 auto; white-space: nowrap; }
.dlg.lueders-dlg { width: min(760px, calc(100vw - 24px)); }
.dlg.lueders-dlg .vt-feld input { width: 100%; box-sizing: border-box; height: 32px; border: 1px solid #cbd5e1; border-radius: 8px; padding: 0 9px; font: inherit; font-size: 13px; }
.dlg.lueders-dlg .vt-feld input.fehlt { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .1); }
.dlg.lueders-dlg .vt-abschnitt { display: grid; gap: 8px; }
.dlg.lueders-dlg .lueders-sperre { color: #b91c1c; font-weight: 600; }
/* Kästchen bleiben in einer Linie (Thomas 22.10.2026: „ich finde es nicht gut, dass die kreuze so hin und her gehen weil da iwie steht wv oder sms“):
   „SMS“/„WA“ steht klein über dem Kästchen statt daneben; in „Anruf heute“ stehen alle Kästchen links an derselben Stelle, WV/Rückruf rechts daneben */
.leadtab .gw-rf { position: relative; display: inline-block; line-height: 0; vertical-align: middle; }
.leadtab .gw-rf .gw-kanal { position: absolute; left: 50%; bottom: calc(100% + 1px); transform: translateX(-50%); font-size: 8px; line-height: 1; white-space: nowrap; pointer-events: none; }
.leadtab td[data-s="anruf"], .leadtab thead th[data-s="anruf"] { text-align: left; padding-left: 14px; }
.leadtab td[data-s="anruf"] .anruf-wv { position: relative; display: inline-block; line-height: 0; }
.leadtab td[data-s="anruf"] .anruf-wv-tag { position: absolute; left: calc(100% + 5px); top: 50%; transform: translateY(-50%); }
.leadtab td[data-s="anruf"] .anruf-schreibt { margin-left: -3px; max-width: calc(100% + 3px); }
/* Übersicht 22.10.2026: eine Rangliste statt Wettbewerb + Rangliste, sortierte Spalte sichtbar markiert */
.ue2-sortwahl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.ue2-rang th.ue2-sortbar { cursor: pointer; user-select: none; white-space: nowrap; }
.ue2-rang th.ue2-sortbar:hover { color: #0f172a; }
.ue2-rang th.sortiert { color: #1d4ed8; background: #eef4ff; border-bottom-color: #93b4f5; }
.ue2-rang td.sortiert { background: #f3f7ff; color: #0f172a; }
.ue2-rang .ue2-trenn { border-left: 1px solid #e5e9f0; }
.ue2-fuss { margin: 8px 0 0; font-size: 12px; color: #64748b; }
/* Verlauf: eingeklappte Systemeinträge (22.10.2026) */
.verlauf-system { display: block; margin: 6px auto 4px; padding: 4px 10px; border: 1px dashed #cbd5e1; border-radius: 999px; background: transparent; color: var(--text-leise); font-size: 12px; cursor: pointer; }
.verlauf-system:hover { background: #f1f5f9; color: var(--text); }
select.von-wahl { padding: 0 2px; cursor: pointer; }
/* Chef: „Lohnt es sich?“ oben, Rest eingeklappt (22.10.2026) */
.chef-lohnt { border-left: 6px solid #16a34a; }
.chef-lohnt.minus { border-left-color: #dc2626; }
.chef-urteil { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.chef-urteil-frage { font-size: 13px; color: var(--text-leise); }
.chef-urteil-antwort { font-size: 30px; line-height: 1.15; }
.chef-lohnt.plus .chef-urteil-antwort { color: #15803d; }
.chef-lohnt.minus .chef-urteil-antwort { color: #b91c1c; }
.chef-urteil-teil { font-size: 15px; font-weight: 600; }
.chef-rechnung { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 10px; }
.chef-rechnung > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
.chef-rechnung > div span { font-size: 12px; color: var(--text-leise); }
.chef-rechnung > div b { font-size: 20px; }
.chef-rechnung > div small { font-size: 11.5px; color: var(--text-leise); }
.chef-rechnung b.plus { color: #15803d; } .chef-rechnung b.minus { color: #b91c1c; }
.chef-rechnung .chef-gleich { background: #f8fafc; border-color: #cbd5e1; }
.chef-klapp { margin: 10px 0; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
.chef-klapp > summary { cursor: pointer; padding: 12px 16px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; list-style: none; }
.chef-klapp > summary::before { content: '▸'; color: var(--text-leise); }
.chef-klapp[open] > summary::before { content: '▾'; }
.chef-klapp > summary b { font-size: 15px; }
.chef-klapp > summary small { color: var(--text-leise); font-size: 12.5px; }
.chef-klapp > .ue2-karte { margin: 0; border: 0; box-shadow: none; }

/* ---------- Kompakte Kopfzeile (Thomas 24.10.2026: „4. ja“ – Infozeilen und JSB in eine Zeile) ---------- */
.kopfzeile { min-height: 0; padding-top: 6px; gap: 12px; }
.statuszeile { line-height: 1.45; max-height: 2.9em; }
.jsb { gap: 8px; }
.jsb-monat, .jsb-monat.pruefen { width: auto; display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 10px; }
.jsb-monat .jsb-zeile { gap: 6px; }
.jsb-monat .jsb-balken { flex: 0 0 56px; margin: 0; height: 5px; }
.jsb-monat .jsb-info { font-size: 11px; }
.jsb-monat .jsb-info .jsb-namen { display: none; }
.jsb-monat .jsb-hinweis { flex-wrap: nowrap; white-space: nowrap; }
.jsb-monat .jsb-hinweis .jsb-luecke:not(:first-child) { display: none; }
.jsb-monat:not(.erreicht) .jsb-info { display: none; } /* „noch … bis Bonus“ steht im Tooltip und im Balken */
.statuszeile { max-height: 4.4em; }


/* 0340 Rückruf: unbekannte Nummer einem Kunden zuordnen (Fenster beim Erledigen) */
.af-nz-box { max-width: 620px; }
.af-nz-inhalt { display: grid; gap: 10px; }
.af-nz-nummer { font-size: 22px; font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.af-nz-suche { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 2px solid var(--af-linie, #d0d7de); border-radius: 10px; }
.af-nz-suche:focus { outline: none; border-color: var(--af-rot); }
.af-nz-liste { display: grid; gap: 6px; max-height: 46vh; overflow-y: auto; }
.af-nz-treffer { display: grid; gap: 2px; text-align: left; font: inherit; padding: 9px 12px; border: 1px solid var(--af-linie, #d0d7de); border-radius: 10px; background: transparent; color: inherit; cursor: pointer; }
.af-nz-treffer:hover, .af-nz-treffer:focus-visible { border-color: var(--af-rot); background: rgba(207, 34, 46, .06); outline: none; }
.af-nz-treffer strong { font-size: 15px; }
.af-nz-treffer span { font-size: 13px; color: var(--af-mute); }
.af-nz-meldung { font-size: 14px; color: var(--af-rot-dunkel); min-height: 1em; }
.af-nz-meldung:empty { display: none; }

/* Thomas 28.10.2026: Antrags-Link im Verlauf als kurzer Text statt langer Adresse */
.v-link-text { font-weight: 600; color: #1a7f37; white-space: nowrap; }
a.v-link-text { text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
a.v-link-text:hover { color: #11602a; }
/* 0401 „Heute zuerst“ (Thomas 29.10.2026): Reihenfolge und Überfälliges oben in der eigenen Liste */
.af-zuerst { margin: 10px 0 14px; padding: 10px 14px; border: 1px solid var(--af-warn, #d97706); border-left-width: 5px; border-radius: 8px; background: var(--af-warn-soft, #fff7ed); }
.af-zuerst h2 { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.af-zuerst-reihe { margin: 0 0 6px; padding-left: 22px; }
.af-zuerst-reihe li { margin: 2px 0; }
.af-zuerst-reihe li.jetzt { font-weight: 600; }
.af-zuerst-unbedingt ul { margin: 4px 0 0; padding-left: 18px; }
.af-zuerst-unbedingt li { margin: 2px 0; }
/* 0402 Vertrag entfernen */
.vp-chefzelle { white-space: nowrap; }
.vp-weg { margin-left: 6px; border: 1px solid #e5c4c4; background: #fff; border-radius: 6px; padding: 2px 6px; cursor: pointer; font-size: 13px; }
.vp-weg:hover { background: #fde3e1; }

/* 0410 Tagesbericht oben in der Übersicht (nur Thomas/Erika) */
.af-bericht { margin: 10px 0 16px; padding: 12px 14px; border: 1px solid #93c5fd; border-left-width: 5px; border-radius: 8px; background: #f0f7ff; }
.af-bericht h2 { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.af-bericht-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.af-bericht-karte { background: #fff; border: 1px solid #d8dce2; border-radius: 8px; padding: 10px 12px; }
.af-bericht-karte.achtung { border-color: #f59e0b; }
.af-bericht-karte h3 { margin: 0 0 4px; font-size: 1.05em; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.af-bericht-karte h3 small { font-weight: normal; color: #475569; }
.af-bericht-kurz { margin: 4px 0 6px; line-height: 1.4; }
.af-bericht-gut, .af-bericht-ansprechen ul { margin: 4px 0; padding-left: 20px; line-height: 1.4; }
.af-bericht-gut li::marker { content: '✓  '; color: #15803d; }
.af-bericht-ansprechen { margin-top: 6px; padding: 6px 8px; border-radius: 6px; background: #fff7ed; }
.af-bericht-ansprechen ul li { margin: 2px 0; }

/* Thomas 01.11.2026: KI-Klärungshinweis bei Rückrufen „nicht erreicht“ – für Erika/Thomas auf einen Blick */
.af-notizvorschau.af-klaerung-ok { color: #1f7a3a; font-weight: 600; }
.af-notizvorschau.af-klaerung-offen { color: #b45309; font-weight: 600; }
@media (prefers-color-scheme: dark) {
  .af-notizvorschau.af-klaerung-ok { color: #6fd08c; }
  .af-notizvorschau.af-klaerung-offen { color: #f5a54a; }
}
.aufgaben .af-rr-text { width: 100%; box-sizing: border-box; margin: 8px 0 4px; font: inherit; padding: 6px 8px; border-radius: 6px; border: 1px solid currentColor; opacity: .9; }

/* Terminabsage (Thomas 02.11.2026): rot und ganz oben, Pflicht-Haken „Außendienst informiert und Kalender ausgetragen“ */
.af-block.af-block-terminabsage { border: 2px solid var(--af-crit); background: color-mix(in srgb, var(--af-crit) 7%, transparent); }
.af-block.af-block-terminabsage > h2 .af-titel { color: var(--af-crit); font-weight: 800; letter-spacing: .02em; }
.af-zeile.af-terminabsage { border-left: 6px solid var(--af-crit); background: color-mix(in srgb, var(--af-crit) 12%, transparent); }
.af-zeile.af-terminabsage .af-t { color: var(--af-crit); font-weight: 800; }
.af-ta-aktion { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.af-knopf.af-ta-haken { background: var(--af-crit); border-color: var(--af-crit); color: #fff; font-weight: 700; white-space: normal; text-align: left; }
.af-knopf.af-ta-haken:hover { filter: brightness(1.08); }
.af-bestzeile.abgesagt { background: color-mix(in srgb, var(--af-crit) 14%, transparent); border-top-color: var(--af-crit); }
.af-bestzeile.abgesagt label, .af-bestzeile.abgesagt .af-bestnotiz { color: var(--af-crit); text-decoration: line-through; opacity: 1; }
.af-bestzeile .af-pill.af-best-abgesagt { color: #fff; background: var(--af-crit); font-weight: 700; }

/* 0413 Mein Tag (Mitarbeiter) */
.af-meintag { margin: 10px 0 12px; padding: 12px 14px; border: 1px solid #c7d2fe; border-left-width: 5px; border-radius: 8px; background: #f5f7ff; }
.af-meintag h2 { margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.af-mt-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-bottom: 10px; }
.af-mt-kachel { background: #fff; border: 1px solid #d8dce2; border-radius: 8px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.af-mt-kachel b { font-size: 1.5em; }
.af-mt-kachel.warn b { color: #c2410c; }
.af-mt-label, .af-mt-sub { font-size: .85em; color: #475569; }
.af-mt-jetzt { background: #1e4fb8; color: #fff; border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; }
.af-mt-spalten { display: flex; flex-wrap: wrap; gap: 10px; }
.af-mt-fehlt, .af-mt-ablauf { flex: 1 1 320px; min-width: 0; background: #fff; border: 1px solid #d8dce2; border-radius: 8px; padding: 8px 12px; }
.af-mt-fehlt { border-color: #f1c9ae; background: #fff6f0; }
.af-mt-fehlt ul, .af-mt-ablauf ul { margin: 4px 0; padding-left: 18px; line-height: 1.45; }
.af-mt-um { display: inline-block; min-width: 3.2em; color: #475569; }
.af-mt-hinweis { display: inline-block; margin: 6px 0 10px; padding: 6px 12px; border: 1px solid #f1c9ae; border-radius: 8px; background: #fff6f0; color: #8a3a10; font-weight: 600; cursor: pointer; min-height: 36px; }
.af-mt-hinweis:hover { background: #ffedd5; }