/* Lead verstehen: Zusammenfassung (KI, nur auf Klick) und Verlauf in der Lead-Karte.
   Nur Variablen aus style.css, Farbe nur in den Symbolen. */

/* Zusammenfassung */
.zf-erkl { margin: 0 0 var(--abst-8); line-height: 1.45; }
.zf-abschnitt { padding: var(--abst-8) 0; }
.zf-abschnitt + .zf-abschnitt { border-top: var(--haar) solid var(--linie); }
.zf-titel { display: flex; align-items: center; gap: var(--abst-8); font-size: var(--sg-12); font-weight: 500; color: var(--text-3); margin-bottom: var(--abst-4); }
.zf-titel .zf-ic { width: 14px; height: 14px; flex: none; color: var(--text-3); }
.zf-sorgen .zf-ic { color: var(--koralle-p); }
.zf-reise .zf-ic, .zf-mit_wem .zf-ic, .zf-alter .zf-ic { color: var(--meer-p); }
.zf-zitate .zf-ic { color: var(--lavendel-p); }
.zf-warnzeichen .zf-ic { color: var(--sonne-p); }
.zf-naechster_schritt .zf-ic { color: var(--salbei-p); }
.zf-abschnitt ul { list-style: none; margin: 0; padding: 0 0 0 var(--abst-20); display: grid; gap: var(--abst-2); font-size: var(--sg-14); line-height: 1.45; }
.zf-abschnitt li { overflow-wrap: anywhere; }
.zf-zitate li { color: var(--text-2); }
.zf-naechster_schritt li { font-weight: 500; }
.zf-fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--abst-8); margin-top: var(--abst-8); }
.lead-teil .zf-fuss .text-knopf { margin: 0 -8px 0 0; flex: none; }
.zf-fehler { margin: 0 0 var(--abst-8); padding: var(--abst-8) var(--abst-12); border-radius: var(--rund); background: var(--flaeche); color: var(--text-2); font-size: var(--sg-13); line-height: 1.45; }
.zf-laedt p { margin: 0 0 var(--abst-8); }
.zf-laedt i, .zl-laedt i { display: block; height: 10px; border-radius: var(--rund-mini); margin: var(--abst-8) 0; background: var(--flaeche-2); animation: puls 1.4s ease-in-out infinite; }

/* Verlauf: senkrechte Zeitleiste, älteste oben, Haarlinie als Verbindung */
.zl { list-style: none; margin: 0; padding: 0; }
.zl-punkt { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--abst-8); padding-bottom: var(--abst-12); }
.zl-punkt:last-child { padding-bottom: 0; }
.zl-punkt:not(:last-child)::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: 2px; border-left: var(--haar) solid var(--linie-stark); }
.zl-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--rund-klein); background: var(--g); color: var(--t); }
.zl-ic .ic { width: 13px; height: 13px; }
.zl-text { min-width: 0; padding-top: var(--abst-2); }
.zl-titel { font-size: var(--sg-14); font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.zl-titel a { color: inherit; }
.zl-zeit { margin-top: var(--abst-2); line-height: 1.4; overflow-wrap: anywhere; }
.zl-kommt .zl-ic { background: transparent; box-shadow: inset 0 0 0 1px var(--p); }
.zl-kommt .zl-titel { color: var(--text-2); }