/* ===== PIPELINES (24.10.2026, v3 25.10.2026) =====
   Calm, neutral surfaces; one accent (var(--primary)) for the primary action and the active state.
   Radius rule: var(--radius) 4px, var(--radius-sm) 2px, real circles stay round. */

/* ---- Navigation: area segments, one dropdown, filter, settings, primary action ---- */
#pf-leiste { padding: 0 1.5rem; margin-bottom: 1rem; }
.pf-navzeile { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pf-segmente { display: inline-flex; padding: 2px; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
.pf-segment { height: 30px; padding: 0 .85rem; border: 0; border-radius: var(--radius-sm); background: none; color: var(--muted); font: inherit; font-size: .82rem; font-weight: 500; cursor: pointer; transition: color .15s, background-color .15s, box-shadow .15s; }
.pf-segment:hover { color: var(--text); }
.pf-segment.aktiv { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.pf-segment:focus-visible, .pf-ddknopf:focus-visible, .pf-iconbtn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pf-ddknopf { display: inline-flex; align-items: center; gap: .4rem; height: 34px; padding: 0 .7rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; font-size: .82rem; font-weight: 500; cursor: pointer; white-space: nowrap; }
.pf-ddknopf:hover { border-color: var(--border-strong, #c4ccd9); }
.pf-ddknopf .fa-chevron-down { font-size: .6rem; color: var(--muted); margin-left: .1rem; }
.pf-ddknopf .fa-sliders { font-size: .72rem; color: var(--muted); }
.pf-ddknopf.an { border-color: var(--primary); }
.pf-ddlabel { color: var(--muted); }
.pf-navrechts { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; }
.pf-iconbtn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--muted); cursor: pointer; font-size: .8rem; }
.pf-iconbtn:hover { color: var(--text); border-color: var(--border-strong, #c4ccd9); }

/* Dropdown menus */
.pf-dropdown { position: fixed; z-index: 10070; min-width: 220px; max-height: 70vh; overflow-y: auto; padding: 4px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(15, 23, 42, .12); }
.pf-ddzeile { display: flex; align-items: center; gap: .55rem; width: 100%; min-height: 32px; padding: 0 .6rem; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text); font: inherit; font-size: .84rem; text-align: left; cursor: pointer; }
.pf-ddzeile > span:first-child, .pf-ddzeile > span:nth-child(2):last-child { flex: 1; }
.pf-ddzeile:hover, .pf-ddzeile:focus-visible { background: var(--surface-2); outline: none; }
.pf-ddzeile.aktiv { color: var(--primary); font-weight: 550; }
.pf-ddzeile:disabled { color: var(--muted); cursor: default; background: none; }
.pf-ddzahl { color: var(--muted); font-size: .76rem; font-variant-numeric: tabular-nums; font-weight: 400; }
.pf-ddtrenner { height: 1px; margin: 4px 2px; background: var(--border); }
.pf-ddtitel { padding: .4rem .6rem .3rem; font-size: .76rem; color: var(--muted); }
.pf-ddneu { color: var(--muted); }
.pf-ddneu i { font-size: .7rem; width: 12px; }
.pf-ddcheck input { width: 15px; height: 15px; margin: 0; accent-color: var(--primary); }

.pf-btn { height: 34px; padding: 0 .85rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: .82rem; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.pf-btn:hover { border-color: var(--border-strong, #c4ccd9); }
.pf-btn-primaer { background: var(--primary); border-color: var(--primary); color: #fff; }
.pf-btn-primaer:hover { background: var(--primary-dark, var(--primary)); border-color: var(--primary-dark, var(--primary)); }
.pf-btn-rot { color: #dc2626; border-color: rgba(220, 38, 38, .35); }
.pf-link { background: none; border: none; color: var(--primary); font: inherit; font-size: .8rem; font-weight: 500; cursor: pointer; padding: .3rem 0; }
.pf-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--muted)); flex-shrink: 0; }
.pf-anz { font-size: .76rem; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---- Tags: neutral outline chips, colour only as a dot ---- */
.pf-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 500; line-height: 1; padding: 3px 6px; border-radius: var(--radius-sm); color: var(--muted); background: transparent; border: 1px solid var(--border); white-space: nowrap; }
.pf-chip-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.pf-chip[onclick] { cursor: pointer; }
.pf-chip[onclick]:hover { border-color: var(--border-strong, #c4ccd9); color: var(--text); }
.pf-chip-aus { opacity: .45; }
.pf-chipzeile { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; align-items: center; }
.pf-chip-plus { border: 1px dashed var(--border); background: none; color: var(--muted); border-radius: var(--radius-sm); font-size: .62rem; padding: 2px 6px; cursor: pointer; opacity: .55; }
.kanban-card:hover .pf-chip-plus, .pf-chip-plus:focus { opacity: 1; }

/* ---- Boards ---- */
.pf-board { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; padding: 0 1.5rem 1.25rem; scroll-padding-inline: 1.5rem; overscroll-behavior-x: contain; max-width: 100%; box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--border-strong, #c4ccd9) transparent; }
.pf-board::-webkit-scrollbar { height: 10px; }
.pf-board::-webkit-scrollbar-thumb { background: var(--border-strong, #c4ccd9); border-radius: var(--radius-sm); border: 2px solid var(--bg); }
.pf-board::-webkit-scrollbar-track { background: transparent; }
.pf-col { --linie: color-mix(in srgb, var(--c) 45%, var(--border)); flex: 0 0 272px; width: 272px; min-width: 0; display: flex; flex-direction: column; background: color-mix(in srgb, var(--surface-2) 40%, var(--surface)); border: 1px solid var(--border); border-top: 2px solid var(--linie); border-radius: var(--radius); }
.pf-col-gewonnen { --linie: #16a34a; }
.pf-col-verloren { --linie: #dc2626; }
.pf-colkopf { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: .7rem .8rem; }
.pf-colname { min-width: 0; font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-colanz { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.pf-colsumme { flex-shrink: 0; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-colkarten { display: flex; flex-direction: column; gap: 8px; padding: 0 .6rem .6rem; }
.pf-colleer { font-size: .78rem; color: var(--muted); padding: .2rem .2rem .1rem; }
.pf-col-plus { margin: 0 .6rem .6rem; padding: .35rem .4rem; border: 1px solid transparent; border-radius: var(--radius); background: none; color: var(--muted); font: inherit; font-size: .78rem; font-weight: 500; cursor: pointer; text-align: left; }
.pf-col-plus:hover { color: var(--text); background: var(--surface); border-color: var(--border); }

.pf-card { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; cursor: pointer; transition: border-color .15s, box-shadow .15s, opacity .15s; }
.pf-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pf-cardkopf { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.pf-cardkunde { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 550; color: var(--text); line-height: 1.35; overflow-wrap: anywhere; }
.pf-cardtitel { margin-top: 2px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.pf-mehrfach { display: inline-block; margin-left: 2px; font-size: 11px; color: var(--muted); }
.pf-wert { flex-shrink: 0; font-weight: 500; font-size: 13px; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pf-cardmeta { display: flex; align-items: center; gap: .6rem; margin-top: 8px; }
.pf-faellig { color: var(--muted); font-size: 12px; white-space: nowrap; }
.pf-faellig.rot { color: #dc2626; }
.pf-auto { color: var(--muted); font-size: .62rem; margin-left: 4px; opacity: .7; vertical-align: 1px; }
.pf-cardaktionen { position: absolute; right: 6px; bottom: 6px; display: inline-flex; gap: 2px; padding: 2px; background: var(--card); border-radius: var(--radius); opacity: 0; transition: opacity .15s; }
.pf-card:hover .pf-cardaktionen, .pf-card:focus-within .pf-cardaktionen { opacity: 1; }
.pf-cardaktionen .pf-icon { width: 26px; height: 26px; border-color: transparent; background: none; }
.pf-cardaktionen .pf-icon:hover { border-color: var(--border); background: var(--surface-2); color: var(--text); }
@media (hover: hover) { .pf-card:hover { border-color: var(--border-strong, #c4ccd9); } }
@media (hover: none) { .pf-cardaktionen { position: static; opacity: 1; display: flex; justify-content: flex-end; margin-top: 6px; padding: 0; } }
.pf-card.pf-gezogen { opacity: .45; border-style: dashed; }
.pf-board.pf-zieht .pf-colkarten { min-height: 64px; }
.pf-col.drag-over { background: var(--primary-light, #e6eefb); border-color: var(--primary); }
body.dark-mode .pf-col.drag-over { background: color-mix(in srgb, var(--primary) 14%, var(--surface)); }

/* Lead board (Vertrieb, Alle Leads): same calm column heads */
#kanban-board .kanban-col.pf-stage-col { border-top: 2px solid color-mix(in srgb, var(--c) 45%, var(--border)); }
#view-pipeline #kanban-board .col-header { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: var(--text); }
#view-pipeline #kanban-board .col-header .col-count { color: var(--muted); font-weight: 400; background: none; padding: 0; }

/* Overlays */
.pf-overlay { z-index: 10050 !important; }
.pf-form { display: flex; flex-direction: column; gap: .85rem; }
.pf-form label, .pf-label { display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; font-weight: 700; color: var(--muted); }
.pf-form input, .pf-form select, .pf-form textarea { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: .55rem .7rem; color: var(--text); font: inherit; font-size: .88rem; font-weight: 500; outline: none; }
.pf-form input:focus, .pf-form select:focus, .pf-form textarea:focus { border-color: var(--primary); }
.pf-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.pf-fuss { display: flex; gap: .5rem; align-items: center; margin-top: .5rem; padding-top: .9rem; border-top: 1px solid var(--border); }
.pf-waehlbar .pf-chip { font-size: .78rem; padding: 5px 10px; }
.pf-leer { font-size: .8rem; color: var(--muted); }
.pf-abschnitt { font-weight: 800; font-size: .9rem; margin-top: .4rem; }
.pf-hinweis { font-size: .74rem; color: var(--muted); font-weight: 500; margin-left: .3rem; }
.pf-info { font-size: .78rem; color: var(--muted); background: var(--bg); border-radius: var(--radius); padding: .55rem .75rem; line-height: 1.45; }
.pf-liste { display: flex; flex-direction: column; gap: .4rem; }
.pf-zeile { display: flex; align-items: center; gap: .45rem; }
.pf-zeile input { flex: 1; min-width: 0; }
.pf-zeile select[data-st-gilt] { width: 150px; }
.pf-farbe { width: 46px; padding: .45rem .3rem !important; color: var(--c) !important; font-size: 1rem !important; text-align: center; }
.pf-icon { width: 30px; height: 30px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; font-size: .72rem; flex-shrink: 0; }
.pf-icon:disabled { opacity: .3; cursor: not-allowed; }
.pf-icon.rot:not(:disabled):hover { color: #ef4444; border-color: #ef4444; }
.pf-schloss { color: var(--muted); font-size: .72rem; }

/* Kuerzel-Menue */
.pf-menue { position: fixed; z-index: 10060; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .5rem; min-width: 200px; max-height: 60vh; overflow-y: auto; }
.pf-menue-titel { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: .2rem .3rem .4rem; }
.pf-menue-zeile { display: flex; align-items: center; gap: .5rem; padding: .3rem; border-radius: var(--radius); cursor: pointer; }
.pf-menue-zeile:hover { background: var(--bg); }

/* Kunden-Tabs */
#pf-tabs { display: flex; align-items: center; gap: 4px; padding: 0 1.5rem .6rem; overflow-x: auto; scrollbar-width: thin; }
#pf-tabs-modal { display: flex; gap: 4px; padding: .6rem 1rem 0; overflow-x: auto; border-bottom: 1px solid var(--border); background: var(--bg); border-radius: var(--radius) var(--radius) 0 0; }
.pf-tab { display: inline-flex; align-items: center; gap: 2px; max-width: 200px; height: 32px; padding: 0 4px 0 10px; border-radius: var(--radius) var(--radius) 0 0; border: 1px solid var(--border); border-bottom: none; background: var(--surface); font-size: .8rem; font-weight: 600; color: var(--muted); cursor: pointer; flex-shrink: 0; }
#pf-tabs .pf-tab { border-radius: var(--radius); border-bottom: 1px solid var(--border); }
.pf-tab:hover { color: var(--text); }
.pf-tab.aktiv { color: var(--text); background: var(--card); border-color: var(--primary); box-shadow: inset 0 -2px 0 var(--primary); }
.pf-tab-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-tab-x { border: none; background: none; color: var(--muted); cursor: pointer; width: 22px; height: 22px; border-radius: var(--radius); font-size: .72rem; flex-shrink: 0; }
.pf-tab-x:hover { background: var(--bg); color: #ef4444; }
.pf-tabs-zu { margin-left: .4rem; white-space: nowrap; color: var(--muted); }

/* Reiter "Pipelines" im Kundenfenster */
.pf-det-karte { border: 1px solid var(--border); border-left: 4px solid var(--c); border-radius: var(--radius); padding: .85rem 1rem; margin-bottom: .75rem; background: var(--card); }
.pf-det-kopf { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .9rem; }
.pf-det-stufe { font-size: .75rem; font-weight: 700; padding: 2px 10px; border-radius: var(--radius); color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.pf-stufenleiste { display: flex; flex-wrap: wrap; gap: 4px; margin-top: .6rem; }
.pf-stufe { font: inherit; font-size: .74rem; font-weight: 600; padding: 4px 10px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg); color: var(--muted); cursor: pointer; }
.pf-stufe:hover:not(:disabled) { border-color: var(--c); color: var(--c); }
.pf-stufe.aktiv { background: var(--c); border-color: var(--c); color: #fff; }
.pf-notiz { font-size: .8rem; color: var(--muted); margin-top: .5rem; white-space: pre-wrap; }
.pf-det-neu { display: flex; gap: .5rem; align-items: center; margin-top: .5rem; }
.pf-det-neu select { height: 34px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg); color: var(--text); padding: 0 .6rem; font: inherit; font-size: .85rem; }

@media (max-width: 700px) {
    #pf-leiste, #pf-tabs { padding-left: 1rem; padding-right: 1rem; }
    .pf-zwei { grid-template-columns: 1fr; }
    .pf-zeile select[data-st-gilt] { width: 100px; }
}
#view-pipeline[data-pf-modus="karten"] #revenue-pipeline-bar,
#view-pipeline[data-pf-modus="karten"] #weekly-summary,
#view-pipeline[data-pf-modus="karten"] #bulk-toolbar { display: none !important; }

/* Automationen & Checklisten (Phase 3) */
.pf-aufg { font-size: .7rem; font-weight: 700; color: var(--muted); }
.pf-aufg.fertig { color: #10b981; }
.pf-aufg.rot { color: #ef4444; }
.pf-checkliste { display: flex; flex-direction: column; gap: 2px; margin-top: .5rem; }
.pf-check { display: flex !important; flex-direction: row !important; align-items: center; gap: .5rem !important; font-size: .82rem !important; font-weight: 500 !important; color: var(--text) !important; padding: .25rem .3rem; border-radius: var(--radius-sm); cursor: pointer; }
.pf-check:hover { background: var(--bg); }
.pf-check > span:first-of-type { flex: 1; }
.pf-check.erledigt > span:first-of-type { text-decoration: line-through; color: var(--muted); }
.pf-check input { width: 15px; height: 15px; accent-color: var(--primary); }
.pf-check .pf-icon { width: 22px; height: 22px; }
.pf-check-neu input { width: 100%; margin-top: .3rem; }
.pf-aufg-btn { width: auto; min-width: 30px; padding: 0 6px; }
.pf-aufg-btn.aktiv { border-color: var(--primary); color: var(--primary); }
.pf-aufg-vorlage { margin: -.1rem 0 .4rem 52px; }
.pf-aufg-vorlage textarea { width: 100%; }

/* Live integration (24.10.2026): own board for deal pipelines next to #kanban-board */
#view-pipeline .kanban-board[hidden] { display: none; }
#kanban-board .kanban-card.pf-gefiltert { display: none; }
#detail-tab-pipelines[hidden] { display: none; }
.pf-board .pf-card .card-company { font-weight: 650; }

/* Phones: inputs at 16px so iOS does not zoom while typing */
@media (max-width: 767px) {
    .pf-form input, .pf-form select, .pf-form textarea, .pf-det-neu select { font-size: 16px; }
    .pf-det-neu { flex-wrap: wrap; }
    .pf-det-neu select, .pf-det-neu .pf-btn { flex: 1 1 100%; min-height: 44px; }
    .pf-pill, .pf-btn { min-height: 40px; }
}


/* ---- Customer card section: calm cards, neutral stage switcher ---- */
.pf-det-karte { border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem 1rem; margin-bottom: .6rem; background: var(--card); }
.pf-det-kopf { gap: .45rem; font-size: .88rem; }
.pf-det-kopf strong { font-weight: 550; }
.pf-det-kopf .pf-dot { display: none; }
.pf-det-stufe { font-size: .74rem; font-weight: 500; padding: 2px 8px; border-radius: var(--radius-sm); color: var(--text); background: var(--surface-2); }
.pf-stufenleiste { display: inline-flex; flex-wrap: wrap; gap: 0; margin-top: .6rem; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.pf-stufe { font: inherit; font-size: .74rem; font-weight: 500; padding: 5px 9px; border: 0; border-right: 1px solid var(--border); border-radius: 0; background: var(--surface); color: var(--muted); cursor: pointer; }
.pf-stufe:last-child { border-right: 0; }
.pf-stufe:hover:not(:disabled) { color: var(--text); background: var(--surface-2); }
.pf-stufe.aktiv { background: var(--primary); color: #fff; }

/* Phones */
@media (max-width: 767px) {
    #pf-leiste { padding: 0 1rem; }
    .pf-navzeile { gap: .45rem; }
    .pf-segmente { width: 100%; }
    .pf-segment { flex: 1; height: 34px; }
    .pf-ddknopf { flex: 1 1 auto; min-height: 40px; }
    .pf-navrechts { width: 100%; margin-left: 0; }
    .pf-navrechts .pf-ddknopf { flex: 0 1 auto; }
    .pf-navrechts .pf-btn-primaer { flex: 1; justify-content: center; min-height: 40px; }
    .pf-iconbtn { width: 40px; height: 40px; }
    .pf-board { padding: 0 1rem 1rem; gap: 10px; scroll-padding-inline: 1rem; }
    .pf-col { flex-basis: 268px; width: 268px; }
    .pf-stufenleiste { display: flex; overflow-x: auto; flex-wrap: nowrap; }
    .pf-stufe { white-space: nowrap; }
}
.pf-det-titel { color: var(--muted); }
.pf-det-kopf .pf-wert { margin-left: .25rem; }

/* ---- Card detail panel (slide-over right, 25.10.2026) ---- */
.pf-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 10040; width: 440px; max-width: 100vw; display: flex; flex-direction: column; background: var(--card); border-left: 1px solid var(--border); box-shadow: -12px 0 32px rgba(15, 23, 42, .10); transform: translateX(100%); transition: transform .18s ease; color: var(--text); }
.pf-panel.offen { transform: none; }
@media (prefers-reduced-motion: reduce) { .pf-panel { transition: none; } }
.pfp-leiste { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem 1rem; border-bottom: 1px solid var(--border); }
.pfp-leiste-rechts { display: inline-flex; gap: .35rem; }
.pfp-leiste .pf-iconbtn { width: 32px; height: 32px; border-color: transparent; }
.pfp-leiste .pf-iconbtn:hover { border-color: var(--border); }
.pfp-erledigt { display: inline-flex; align-items: center; gap: .45rem; height: 32px; padding: 0 .75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; font-size: .8rem; font-weight: 500; cursor: pointer; }
.pfp-erledigt i { font-size: .7rem; color: var(--muted); }
.pfp-erledigt:hover { border-color: #16a34a; color: #16a34a; }
.pfp-erledigt:hover i, .pfp-erledigt.an i { color: inherit; }
.pfp-erledigt.an { background: color-mix(in srgb, #16a34a 10%, var(--surface)); border-color: color-mix(in srgb, #16a34a 45%, var(--border)); color: #15803d; }
body.dark-mode .pfp-erledigt.an { color: #4ade80; }
/* v9: won and lost as the state of a card, both buttons next to each other */
.pfp-status { display: inline-flex; flex-wrap: wrap; gap: .35rem; min-width: 0; }
.pfp-verloren { display: inline-flex; align-items: center; gap: .45rem; height: 32px; padding: 0 .75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; font-size: .8rem; font-weight: 500; cursor: pointer; }
.pfp-verloren i { font-size: .7rem; color: var(--muted); }
.pfp-verloren:hover { border-color: #dc2626; color: #dc2626; }
.pfp-verloren:hover i, .pfp-verloren.an i { color: inherit; }
.pfp-verloren.an { background: color-mix(in srgb, #dc2626 10%, var(--surface)); border-color: color-mix(in srgb, #dc2626 45%, var(--border)); color: #b91c1c; }
body.dark-mode .pfp-verloren.an { color: #f87171; }
.pf-abgeschlossen.an { border-color: var(--primary); color: var(--primary); }
.pfp-inhalt { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 1.1rem 1.25rem 1.5rem; }
.pfp-titel { width: 100%; resize: none; overflow: hidden; border: 1px solid transparent; border-radius: var(--radius); background: none; color: var(--text); font: inherit; font-size: 1.3rem; font-weight: 600; line-height: 1.3; padding: .25rem .35rem; margin-left: -.35rem; }
.pfp-titel:hover { border-color: var(--border); }
.pfp-titel:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.pfp-kunde { display: inline-block; margin: .1rem 0 1rem; padding: 0; border: 0; background: none; color: var(--primary); font: inherit; font-size: .86rem; cursor: pointer; }
.pfp-kunde:hover { text-decoration: underline; }
.pfp-felder { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 2px .75rem; margin: 0 0 1.25rem; }
.pfp-felder dt { font-size: .8rem; color: var(--muted); padding: .45rem 0; align-self: start; line-height: 1.45; }
.pfp-felder dd { margin: 0; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; min-height: 34px; }
.pfp-wert { width: 100%; min-width: 0; height: 32px; padding: 0 .5rem; border: 1px solid transparent; border-radius: var(--radius); background: none; color: var(--text); font: inherit; font-size: .86rem; font-variant-numeric: tabular-nums; }
select.pfp-wert { cursor: pointer; }
.pfp-wert:hover:not(:disabled) { border-color: var(--border); }
.pfp-wert:focus { outline: none; border-color: var(--primary); background: var(--surface); }
.pfp-text { font-size: .86rem; padding: 0 .5rem; }
.pfp-euro { display: inline-flex; align-items: center; gap: .25rem; width: 140px; font-size: .86rem; color: var(--muted); }
.pfp-euro .pfp-wert { text-align: right; }
.pfp-zahl { display: inline-flex; flex-direction: column; min-width: 92px; padding: .3rem .5rem; border: 1px solid var(--border); border-radius: var(--radius); }
.pfp-zahl span { font-size: .7rem; color: var(--muted); }
.pfp-zahl strong { font-size: .88rem; font-weight: 550; font-variant-numeric: tabular-nums; }
.pfp-zahl strong.offen { color: #b45309; }
body.dark-mode .pfp-zahl strong.offen { color: #fbbf24; }
.pfp-hinweis { flex-basis: 100%; font-size: .74rem; color: var(--muted); }
.pfp-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: .3rem 0; }
.pfp-abschnitt { border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 1rem; }
.pfp-abschnitt h3 { display: flex; align-items: baseline; gap: .4rem; margin: 0 0 .5rem; font-size: .86rem; font-weight: 600; }
.pfp-notiz { width: 100%; min-height: 72px; resize: vertical; padding: .5rem .6rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; font-size: .86rem; line-height: 1.5; }
.pfp-notiz:focus, .pfp-neu:focus, .pfp-kommentar textarea:focus { outline: none; border-color: var(--primary); }
.pfp-neu { width: 100%; height: 34px; margin-top: .35rem; padding: 0 .6rem; border: 1px dashed var(--border); border-radius: var(--radius); background: none; color: var(--text); font: inherit; font-size: .84rem; }
.pfp-neu-klein { width: 130px; height: 24px; margin: 0; font-size: .74rem; border-radius: var(--radius-sm); }
.pfp-leer { margin: .2rem 0; font-size: .82rem; color: var(--muted); }
.pf-panel .pf-checkliste { margin-top: 0; }
.pfp-verlauf { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.pfp-verlauf li { position: relative; padding-left: 14px; }
.pfp-verlauf li::before { content: ''; position: absolute; left: 0; top: .5rem; width: 5px; height: 5px; border-radius: 50%; background: var(--border-strong, #c4ccd9); }
.pfp-verlauf li.kommentar { padding: .55rem .7rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.pfp-verlauf li.kommentar::before { display: none; }
.pfp-v-kopf { display: flex; gap: .5rem; align-items: baseline; font-size: .74rem; color: var(--muted); }
.pfp-v-kopf strong { font-weight: 550; color: var(--text); }
.pfp-v-text { font-size: .84rem; line-height: 1.45; margin-top: 1px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pfp-kommentar { display: flex; gap: .5rem; align-items: flex-end; padding: .75rem 1rem; border-top: 1px solid var(--border); background: var(--card); }
.pfp-kommentar textarea { flex: 1; min-height: 40px; max-height: 140px; resize: vertical; padding: .5rem .6rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; font-size: .86rem; }
.pfp-kommentar .pf-btn:disabled { opacity: .5; cursor: default; }
.pf-card.aktiv { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
@media (max-width: 767px) {
    .pf-panel { width: 100vw; border-left: 0; box-shadow: none; }
    .pfp-felder { grid-template-columns: 96px 1fr; }
    .pfp-wert, .pfp-notiz, .pfp-neu, .pfp-kommentar textarea, .pfp-titel { font-size: 16px; }
    .pfp-wert { height: 40px; }
    .pfp-leiste .pf-iconbtn { width: 40px; height: 40px; }
    .pfp-erledigt, .pfp-verloren { height: 40px; }
    .pfp-neu-klein { width: 150px; height: 32px; }
}
/* Panel fields look the same in both themes: no field boxes until hover or focus */
body.dark-mode .pf-panel .pfp-wert { color-scheme: dark; }
/* crm-style.css forces a box on every dark-mode field with !important: the panel's inline fields opt out */
body.dark-mode .pf-panel .pfp-wert, body.dark-mode .pf-panel .pfp-titel { background-color: transparent !important; border-color: transparent !important; color: var(--text) !important; }
body.dark-mode .pf-panel .pfp-wert:hover:not(:disabled), body.dark-mode .pf-panel .pfp-titel:hover { border-color: var(--border) !important; }
body.dark-mode .pf-panel .pfp-wert:focus, body.dark-mode .pf-panel .pfp-titel:focus { border-color: var(--primary) !important; background-color: var(--surface) !important; }
body.dark-mode .pf-panel .pfp-titel { background: none; }
body.dark-mode .pf-panel select.pfp-wert option { background: var(--card); color: var(--text); }

/* ---- New sales opportunity: customer search, duplicates, services on lead cards (26.10.2026) ---- */
.pf-feld { display: flex; flex-direction: column; gap: .3rem; }
.pf-feld input[type="search"] { width: 100%; height: 38px; padding: 0 .7rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; font-size: .88rem; }
.pf-feld input[type="search"]:focus { outline: none; border-color: var(--primary); }
.pf-c-gewaehlt { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.pf-c-gewaehlt strong { display: block; font-size: .9rem; font-weight: 600; color: var(--text); }
.pf-c-meta { display: block; font-size: .78rem; color: var(--muted); margin-top: 1px; }
.pf-c-treffer { display: flex; flex-direction: column; margin-top: 4px; max-height: 260px; overflow-y: auto; }
.pf-c-treffer:empty { display: none; }
.pf-c-treffer-fest { border: 1px solid var(--border); border-radius: var(--radius); margin: 0; }
.pf-c-treffer-zeile { display: grid; grid-template-columns: 1fr auto; gap: 1px .75rem; width: 100%; padding: .5rem .65rem; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.pf-c-treffer-zeile:last-child { border-bottom: 0; }
.pf-c-treffer-zeile strong { grid-column: 1; font-size: .86rem; font-weight: 600; }
.pf-c-treffer-zeile span { grid-column: 1; font-size: .76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-c-treffer-zeile em { grid-column: 2; grid-row: 1 / span 3; align-self: center; font-style: normal; font-size: .78rem; font-weight: 550; color: var(--primary); white-space: nowrap; }
.pf-c-treffer-zeile:hover, .pf-c-treffer-zeile.aktiv, .pf-c-treffer-zeile:focus-visible { background: var(--surface-2); outline: none; }
.pf-c-treffer > .pf-leer { padding: .5rem .2rem; margin: 0; }
#kanban-board .kanban-card .pf-leistungen { margin-top: 2px; font-size: 12px; color: var(--muted); line-height: 1.35; }
.pf-det-neu { flex-wrap: wrap; gap: .75rem; }
.pfp-karten { list-style: none; margin: 0 0 .4rem; padding: 0; display: flex; flex-direction: column; gap: 4px; }
/* One line per service (28.10.2026): the single cards fold out under it */
.pfp-leistung > summary { list-style: none; cursor: pointer; }
.pfp-leistung > summary::-webkit-details-marker { display: none; }
.pfp-leistung > summary .pfp-karte-meta::after { content: ' ▾'; }
.pfp-leistung[open] > summary .pfp-karte-meta::after { content: ' ▴'; }
.pfp-karten-innen { margin: 4px 0 2px 14px; padding-left: 10px; border-left: 2px solid var(--border); }
.pfp-karte { display: grid; grid-template-columns: 1fr auto; gap: 0 .75rem; width: 100%; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.pfp-karte:hover { border-color: var(--border-strong, #c4ccd9); }
.pfp-karte.aktiv { border-color: var(--primary); cursor: default; }
.pfp-karte-titel { font-size: .84rem; font-weight: 550; }
.pfp-karte-meta { grid-column: 1; font-size: .74rem; color: var(--muted); }
.pfp-karte-wert { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: .82rem; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) { .pf-feld input[type="search"] { font-size: 16px; height: 44px; } }
.pf-fuss .pf-link { white-space: nowrap; }
@media (max-width: 767px) {
    #pf-chance-modal .pf-fuss { flex-wrap: wrap; }
    #pf-chance-modal .pf-fuss .pf-btn { flex: 1 1 0; justify-content: center; min-height: 44px; }
    #pf-chance-modal .pf-fuss > span { display: none; }
    #pf-chance-modal .pf-fuss .pf-link { order: 3; flex-basis: 100%; text-align: center; }
}
/* v7: "Neu anlegen" with a clear first choice, new-lead row in the search, hint while saving is not possible */
.pf-c-modus { width: 100%; }
.pf-c-modus .pf-segment { flex: 1; height: 34px; }
.pf-c-neu strong { color: var(--primary); font-weight: 550; }
.pf-c-hinweis { margin: 0; min-height: 1.1em; font-size: .78rem; color: var(--muted); }
.pf-c-hinweis:empty { display: none; }
/* v7.1: open opportunities of a won customer on the lead board, duplicate hint in the dialog */
#kanban-board .kanban-card .pf-offen { margin-top: 2px; font-size: 12px; color: var(--primary); cursor: pointer; line-height: 1.35; }
#kanban-board .kanban-card .pf-offen:hover { text-decoration: underline; }
.pf-c-hinweis.warnung { color: #b45309; }
body.dark-mode .pf-c-hinweis.warnung { color: #fbbf24; }

/* v7.2 (26.10.2026): one card per service on "Alle Leads", hint for columns right of the screen */
#kanban-board .pf-chance { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .7rem; margin-bottom: 8px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
#kanban-board .pf-chance:hover { border-color: var(--border-strong, #c4ccd9); box-shadow: 0 2px 8px rgba(15, 23, 42, .06); }
#kanban-board .pf-chance:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
#kanban-board .pf-chance.aktiv { border-color: var(--primary); }
#kanban-board .pf-chance.pf-gezogen { opacity: .4; }
#kanban-board .pf-chance-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; }
#kanban-board .pf-chance-kunde { font-weight: 650; font-size: 13.5px; color: var(--text); min-width: 0; overflow-wrap: break-word; hyphens: auto; }
#kanban-board .pf-chance .pf-wert { font-size: 12.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
#kanban-board .pf-chance-titel { margin-top: 2px; font-size: 12px; color: var(--muted); line-height: 1.35; }
#kanban-board .kanban-col.pf-hat-chancen .empty-col { display: none; }
#kanban-board .kanban-col.pf-drop { outline: 2px dashed var(--primary); outline-offset: -2px; }
.kanban-board.pf-mehr-rechts { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
.kanban-board.pf-mehr-links.pf-mehr-rechts { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 56px), transparent); }
.kanban-board.pf-mehr-links:not(.pf-mehr-rechts) { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px); mask-image: linear-gradient(to right, transparent, #000 40px); }
.pf-weiter { position: absolute; z-index: 5; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: color-mix(in srgb, var(--card) 82%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--muted); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 10px rgba(15, 23, 42, .10); transition: color .15s ease, border-color .15s ease, transform .15s ease; }
.pf-weiter[hidden] { display: none; }
.pf-weiter:hover { color: var(--text); border-color: var(--border-strong, #c4ccd9); transform: translateX(2px); }
.pf-weiter.pf-weiter-karten { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
@media (prefers-reduced-motion: reduce) { .pf-weiter, #kanban-board .pf-chance { transition: none; } }
@media (max-width: 767px) { .pf-weiter { width: 32px; height: 32px; } }

/* Etiketten, nächster Schritt, Stillstand (01.11.2026, nach Pipedrive): ruhig, nur Text und Linie, Farbe nur bei Handlungsbedarf */
.pf-chip-mehr { color: var(--muted); }
.pf-menue-titel + .pf-menue-zeile { margin-top: 2px; }
.pf-menue-auto { margin-left: auto; font-size: .7rem; color: var(--muted); }
.pf-cardzustand { display: flex; flex-wrap: wrap; gap: .25rem .6rem; margin-top: 6px; }
.pf-cardzustand:empty { display: none; }
.pf-schritt { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-schritt i { font-size: 11px; flex-shrink: 0; }
.pf-schritt-heute { color: var(--text); font-weight: 550; }
.pf-schritt-ueber { color: #dc2626; }
.pf-schritt-leer { color: #b45309; }
.pf-still { font-size: 12px; color: #b45309; }
.pf-cardmeta .pf-schritt { flex: 1 1 auto; }
.pfp-chips-kunde { margin-top: 6px; align-items: center; }
.pfp-chips-titel { font-size: .7rem; color: var(--muted); margin-right: 4px; }
.pf-ebene { height: 30px; font-size: .78rem; }
body.dark-mode .pf-schritt-leer, body.dark-mode .pf-still { color: #f0b46a; }
body.dark-mode .pf-schritt-ueber { color: #f97066; }