/* ==========================================================================
   elico.persona – Vorstellungsseite /tools/persona/
   Ergänzt style.css + site.css. Farben nur über Tokens. Aufbau wie /tools/funnel/seite.css.
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
.ps-marke{display:inline-block;margin:0 0 18px;font:700 clamp(26px,2.4vw,34px)/1 var(--font-head);letter-spacing:-.024em;color:var(--ink-text);white-space:nowrap}
.ps-marke span{color:var(--brand)}
.ps-marke b{font-weight:700;color:var(--ink-muted)}
.ps .h1-zusatz{display:block;font-size:clamp(24px,2.6vw,40px);font-weight:600;letter-spacing:-.015em;line-height:1.15;margin-top:.4em;color:var(--ink-text)}

/* Hero-Grafik: die Persona-Karte im Kleinen (Hero ist in beiden Modi dunkel → Ink-Tokens) */
.ps-svg{width:100%;height:auto;display:block;filter:drop-shadow(0 30px 60px rgba(0,0,0,.45))}
.ps-svg text{font-family:var(--font-head);font-weight:700}
.ps-svg .ps-win{fill:var(--ink-2);stroke:var(--ink-line)}
.ps-svg .ps-sep{stroke:var(--ink-line);fill:none}
.ps-svg .ps-dot{fill:rgba(255,255,255,.14)}
.ps-svg .ps-wm{font-size:14px;fill:var(--ink-text);letter-spacing:-.02em}
.ps-svg .ps-wm .p{fill:var(--brand)}
.ps-svg .ps-wm .n{fill:var(--ink-muted)}
.ps-svg .ps-title{font-size:11.5px;font-weight:500;fill:var(--ink-muted)}
.ps-svg .ps-btn{fill:var(--brand)}
.ps-svg .ps-btn-t{font-size:10px;fill:var(--on-brand)}
.ps-svg .ps-avatar{fill:var(--brand)}
.ps-svg .ps-avatar-t{font-size:24px;fill:var(--on-brand)}
.ps-svg .ps-name{font-size:20px;fill:var(--ink-text);letter-spacing:-.02em}
.ps-svg .ps-role{font-family:var(--font-body);font-weight:500;font-size:10.5px;fill:var(--ink-muted)}
.ps-svg .ps-tag{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.16)}
.ps-svg .ps-tag-t{font-size:9px;fill:var(--ink-text);letter-spacing:.02em}
.ps-svg .ps-quote{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.13)}
.ps-svg .ps-quote-t{font-family:var(--font-body);font-weight:500;font-style:italic;font-size:11.5px;fill:var(--ink-text)}
.ps-svg .ps-card{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.13)}
.ps-svg .ps-problem{fill:rgba(var(--brand-rgb),.14);stroke:rgba(var(--brand-rgb),.55)}
.ps-svg .ps-l{font-size:8.5px;fill:var(--ink-muted);letter-spacing:.12em}
.ps-svg .ps-l.is-brand{fill:var(--brand-2)}
.ps-svg .ps-v{font-family:var(--font-body);font-weight:500;font-size:10.5px;fill:var(--ink-text)}
.ps-svg .ps-v.is-leise{fill:var(--ink-muted)}
.ps-svg .ps-p{font-size:14px;fill:var(--ink-text);letter-spacing:-.01em}
.ps-svg .ps-s{font-family:var(--font-body);font-weight:500;font-size:9.5px;fill:var(--ink-muted)}
.ps-svg .ps-track{fill:rgba(255,255,255,.12)}
.ps-svg .ps-fill{fill:var(--brand);opacity:.55}
.ps-svg .ps-knob{fill:var(--ink-text);stroke:var(--brand);stroke-width:2.5}
.ps-svg .ps-chip{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.16)}
.ps-svg .ps-chip-t{font-family:var(--font-body);font-weight:500;font-size:9.5px;fill:var(--ink-text)}

html.js .lp-hero-visual .ps-node{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(.35s + var(--i,0) * .12s)}
html.js .lp-hero-visual.is-in .ps-node{opacity:1;transform:none}

/* --- Kennzahlen unter dem Hero ------------------------------------------ */
.ps-stats .stat .num em{font-size:.62em;margin-left:2px}

/* --- Nutzen / Funktionen ------------------------------------------------- */
.ps-features .card{padding:30px 28px}
.ps-features .icon-ring{margin-bottom:18px}
.ps-features .h3{font-size:21px;margin-bottom:8px}
.ps-features p{color:var(--muted);font-size:15.5px;margin:0}
.ps-extras{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:32px}
.ps-extras .pill svg{width:15px;height:15px;color:var(--brand-text)}

/* --- Bausteine der Karte -------------------------------------------------- */
.ps-cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ps-cat{padding:24px 22px;display:flex;flex-direction:column;gap:14px}
.ps-cat-head{display:flex;align-items:center;gap:12px}
.ps-cat-ic{width:42px;height:42px;flex:0 0 42px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-text)}
.ps-cat-ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ps-cat .h3{font-size:17px;line-height:1.25;margin:0}
.ps-cat .meta{display:block;margin-top:2px;line-height:1.35}
.ps-cat ul{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ps-cat li{padding:4px 10px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:12.5px;color:var(--text-soft);background:var(--surface-2)}

/* --- Für wen: Karte mit der Frage, die sich dieser Kunde stellt ----------- */
.ps-use{padding:30px 28px;display:flex;flex-direction:column}
.ps-use .icon-ring{margin-bottom:18px}
.ps-use .h3{font-size:21px;margin-bottom:8px}
.ps-use p{color:var(--muted);font-size:15.5px;margin:0 0 18px}
.ps-use .ps-frage{margin:auto 0 0;padding:12px 16px;border-radius:var(--r-md);background:var(--surface-2);font:500 14.5px/1.45 var(--font-head);color:var(--text)}

/* --- Datenschutz-Kasten -------------------------------------------------- */
.ps-privacy{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;padding:36px 40px;margin-top:48px}
.ps-privacy .icon-ring{width:64px;height:64px}
.ps-privacy .icon-ring svg{width:28px;height:28px}
.ps-privacy .h3{color:var(--ink-text);margin-bottom:6px}
.ps-privacy p{margin:0;max-width:640px}
.ps-privacy ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-family:var(--font-head);font-weight:500;font-size:14px;color:var(--ink-text)}
.ps-privacy li{display:flex;align-items:center;gap:8px;white-space:nowrap}
.ps-privacy li svg{width:16px;height:16px;color:var(--brand)}

/* --- Start-Aufruf nach dem Ablauf ---------------------------------------- */
.ps-start{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 22px;margin-top:36px}
.ps-start .meta{margin:0;color:var(--ink-muted)}

/* --- FAQ ------------------------------------------------------------------ */
.ps-faq{max-width:860px;margin:0 auto}

@media (max-width:1024px){
  .ps-cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ps-privacy{grid-template-columns:auto 1fr}
  .ps-privacy ul{grid-column:1 / -1;grid-template-columns:repeat(3,auto);justify-content:start;gap:8px 24px}
}
@media (max-width:720px){
  .ps-cats{grid-template-columns:minmax(0,1fr)}
  .ps-privacy{grid-template-columns:1fr;padding:28px 22px;gap:18px}
  .ps-privacy ul{grid-template-columns:1fr}
  .ps-features .card,.ps-use{padding:24px 22px}
}
@media (prefers-reduced-motion:reduce){
  html.js .lp-hero-visual .ps-node{transition:none;opacity:1;transform:none}
}