/* cf-profil.css — Das erweiterte Kundenprofil im zweistufigen Slide-out.

   Kein zweites Slide-out. Getragen wird die bestehende Regie window.CF_SIDE aus
   cf-vorhaben.js: dasselbe .sidep, dieselben zwei Stufen, dieselbe Knopfleiste
   (.cfs-tabs / .cfs-sec / .cfs-kv / .cfs-zwei / .cfs-nur2 stehen in cf-vorhaben.css).
   Hier steht ausschliesslich, was das Profil zusaetzlich braucht — die Datenflaeche.

   Zwei Traeger, nicht einer: ein privater Haushalt und ein Unternehmen sind nicht
   dasselbe Gegenueber. Der Umschalter wechselt deshalb nicht die Beschriftung,
   sondern den ganzen Feldsatz. */

/* ------------------------------------------------------- Kopf der Akte */
.pf-kopf{display:flex;align-items:flex-start;gap:14px;padding:16px 17px;margin-bottom:14px;
  border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.pf-kopf .pf-av{width:52px;height:52px;flex:none;border-radius:14px;display:grid;place-items:center;
  background:var(--lime);color:var(--on-lime);font-family:var(--disp);font-size:1.15rem;font-weight:800}
.pf-kopf .pf-id{min-width:0;flex:1}
.pf-kopf .pf-id b{display:block;font-family:var(--disp);font-size:1.15rem;line-height:1.25}
.pf-kopf .pf-id span{display:block;font-size:.85rem;color:var(--ink-soft);margin-top:2px}
.pf-kopf .pf-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}

/* ------------------------------------------------- Privat / Geschaeftlich */
/* Der Umschalter traegt die Folge mit: darunter steht, was der Wechsel bedeutet.
   Ein Schalter ohne Folgesatz laesst den Nutzer raten, ob Daten verloren gehen. */
.pf-typ{display:flex;gap:8px;margin-bottom:6px}
.pf-typ button{flex:1;display:flex;align-items:center;gap:9px;padding:12px 13px;cursor:pointer;
  border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);
  color:var(--ink-soft);font-size:.9rem;font-weight:700;text-align:left;transition:.15s var(--ease)}
.pf-typ button .ic{width:19px;height:19px;flex:none}
.pf-typ button:hover{color:var(--ink);border-color:var(--lime)}
.pf-typ button.on{background:var(--lime);color:var(--on-lime);border-color:transparent}
.pf-typ button small{display:block;font-weight:600;font-size:.75rem;opacity:.8;margin-top:1px}
.pf-typhin{font-size:.8rem;color:var(--ink-faint);line-height:1.5;margin:0 0 14px}

/* ------------------------------------------------------------ Feldflaeche */
.pf-grid{display:grid;grid-template-columns:1fr;gap:11px 14px}
.sidep.stufe2 .pf-grid,.sidep.stufe3 .pf-grid{grid-template-columns:1fr 1fr}
/* Stufe 3 traegt die Feldflaeche dreispaltig — dafuer ist die dritte Stufe da. */
.sidep.stufe3 .pf-drei .pf-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.pf-f{min-width:0}
.pf-f label{display:block;font-size:.78rem;color:var(--ink-soft);font-weight:700;margin-bottom:4px}
.pf-f label .pf-pf{color:var(--lime);margin-left:3px}
.pf-f input,.pf-f select,.pf-f textarea{width:100%;box-sizing:border-box;padding:9px 11px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);
  font:inherit;font-size:.88rem;transition:.15s var(--ease)}
.pf-f textarea{resize:vertical;min-height:64px;line-height:1.5}
.pf-f input:focus,.pf-f select:focus,.pf-f textarea:focus{outline:none;border-color:var(--lime)}
.pf-f input::placeholder,.pf-f textarea::placeholder{color:var(--ink-faint)}
.pf-f.leer input,.pf-f.leer select,.pf-f.leer textarea{background:var(--surface-2)}
.pf-f.weit{grid-column:1/-1}
.pf-f .pf-hin{font-size:.74rem;color:var(--ink-faint);margin-top:4px;line-height:1.45}

/* --------------------------------------------------------- Vollstaendigkeit */
/* Der Balken misst nur Felder, die auch etwas entscheiden — Gewicht 0 zaehlt nicht mit.
   Sonst belohnt die Anzeige das Ausfuellen von Beiwerk. */
.pf-voll{border:1px solid var(--line);border-radius:14px;background:var(--surface-2);
  padding:14px 16px;margin-bottom:14px}
.pf-voll .pf-vk{display:flex;align-items:baseline;gap:10px;margin-bottom:9px}
.pf-voll .pf-vk b{font-family:var(--disp);font-size:1.6rem;line-height:1}
.pf-voll .pf-vk span{font-size:.82rem;color:var(--ink-soft)}
.pf-track{height:9px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.pf-track i{display:block;height:100%;border-radius:99px;background:var(--lime);transition:width .3s var(--ease)}
.pf-track.gut i{background:var(--good)}
.pf-track.schwach i{background:var(--bad)}
.pf-voll .pf-vh{font-size:.8rem;color:var(--ink-faint);margin-top:8px;line-height:1.5}

/* Was zuerst fehlt — nach Gewicht, mit Begruendung. Eine Liste ohne Begruendung
   ist eine Aufgabenliste; mit Begruendung ist sie ein Argument. */
.pf-fehlt{display:flex;flex-direction:column;gap:8px}
.pf-fehlt .pf-fz{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;
  border:1px solid var(--line);border-radius:11px;background:var(--surface)}
.pf-fehlt .pf-fn{width:22px;height:22px;flex:none;border-radius:7px;display:grid;place-items:center;
  background:var(--bad-bg);color:var(--bad);font-size:.72rem;font-weight:800}
.pf-fehlt b{display:block;font-size:.87rem}
.pf-fehlt span{display:block;font-size:.78rem;color:var(--ink-faint);line-height:1.45;margin-top:1px}

/* ------------------------------------------------------------- Zeitstrahl */
.pf-tl{position:relative;padding-left:20px}
.pf-tl::before{content:"";position:absolute;left:6px;top:5px;bottom:5px;width:2px;background:var(--line)}
.pf-tl .pf-tz{position:relative;padding:0 0 14px}
.pf-tl .pf-tz::before{content:"";position:absolute;left:-18px;top:4px;width:10px;height:10px;
  border-radius:99px;background:var(--surface);border:2px solid var(--line-strong)}
.pf-tl .pf-tz.stark::before{background:var(--lime);border-color:var(--lime)}
.pf-tl .pf-tz b{display:block;font-size:.88rem}
.pf-tl .pf-tz span{display:block;font-size:.78rem;color:var(--ink-faint);margin-top:1px;line-height:1.45}

/* --------------------------------------------------------- Kennzahl-Reihe */
.pf-zahlen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
.sidep.stufe2 .pf-zahlen,.sidep.stufe3 .pf-zahlen{grid-template-columns:repeat(4,minmax(0,1fr))}
.pf-z{border:1px solid var(--line);border-radius:12px;background:var(--surface-2);padding:12px 13px}
.pf-z b{display:block;font-family:var(--disp);font-size:1.35rem;line-height:1.1}
.pf-z span{display:block;font-size:.76rem;color:var(--ink-soft);margin-top:3px;line-height:1.35}

/* ------------------------------------------------------------ Datenspiegel */
/* Erst in Stufe 2: was von dieser Akte tatsaechlich nach draussen geht. */
.pf-spiegel{margin:0;padding:13px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface-3);font-size:.76rem;line-height:1.6;overflow:auto;max-height:340px}
.pf-spiegel .pf-sk{color:var(--ink-faint)}
.pf-spiegel .pf-sv{color:var(--ink);font-weight:700}
.pf-spiegel .pf-sn{color:var(--bad)}

/* ------------------------------------------------------------- Kleinkram */
.pf-tr{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.pf-quelle{font-size:.74rem;color:var(--ink-faint);margin-top:10px;line-height:1.5}
.pf-leer{padding:16px;border:1px dashed var(--line-strong);border-radius:12px;
  color:var(--ink-faint);font-size:.86rem;text-align:center;line-height:1.5}