/* Statistik (fst): nachgebaut aus der echten Statistik-Seite im Dashboard (kunde.js statistikSeite, dash.css: .kachel, .bar-row, .zwei)
   und den Kontakten (Start: „Neue Kontakte“, Kontakt: „Kam über LinkedIn“). S1 zeigt die Kessler-Seite, wie sie das Dashboard ausliefert. */

/* Balken-Zeile wie .bar-row: Name, grauer Balken, Zahl */
.fst-liste{display:grid;gap:calc(2 * var(--e));padding:calc(8 * var(--e)) calc(12 * var(--e))}
.fst-q{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) calc(34 * var(--e));align-items:center;gap:calc(9 * var(--e));min-height:calc(22 * var(--e));margin:0 calc(-6 * var(--e));padding:0 calc(6 * var(--e));border-radius:calc(6 * var(--e));transition:background .4s ease}
.fst-q span{font-size:calc(10 * var(--e));color:#D6D4CE;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fst-q i{display:block;height:calc(6.5 * var(--e));border-radius:999px;background:#1C1C1F;overflow:hidden}
.fst-q u{display:block;width:var(--w);height:100%;border-radius:inherit;background:rgba(244,243,240,.32);transition:width .9s var(--ease) calc(var(--i,0) * 70ms),background .4s ease}
.fst-q b{font-size:calc(10.5 * var(--e));font-weight:600;color:#F4F3F0;text-align:right;font-variant-numeric:tabular-nums;transition:color .4s ease}
.fst-q.hell{background:rgba(255,72,0,.1)}
.fst-q.hell span{color:#F4F3F0}
.fst-q.hell u{background:#FF6A2A}
.fst-q .neu,.fst-q b.neu{color:#FF6A2A}
.fst-null .fst-q u{width:0;transition:none}

/* Kontakt-Zeilen: Zeile kommt oben dazu, Liste läuft unten weiter wie in der App */
.fst-kontakte{overflow:hidden}
.fst-kontakte .d-r{height:calc(40 * var(--e));min-height:0;padding:calc(6 * var(--e)) calc(11 * var(--e))}
.fst-kontakte>.fst-neu+.d-r{border-top:0}
.fst-neu .d-r{box-shadow:inset 0 -1px 0 rgba(244,243,240,.09);background:rgba(255,72,0,.05)}
.fst-kontakte .d-rm span em{font-style:normal;color:#F4F3F0}
.fst-neu .d-rm span em{color:#FF6A2A}
.fst-punkt{width:calc(6 * var(--e));height:calc(6 * var(--e));border-radius:50%;background:#FF4800;flex:none;box-shadow:0 0 0 calc(3 * var(--e)) rgba(255,72,0,.16)}

/* ---------- HERO ---------- */
.fst-hero .fn-kz{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr)}
.fst-hero .fn-kz span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fst-zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(12 * var(--e))}
.fst-hero .d-tit{margin-top:calc(16 * var(--e))}
.fst-hero .fst-quellen{padding-top:calc(7 * var(--e));padding-bottom:calc(7 * var(--e))}
.fst-zwei>div{display:flex;flex-direction:column}
.fst-zwei .d-box{flex:1}
.fst-hero .fst-kontakte{flex:1 1 0;min-height:0}
.fst-hero .fst-kontakte .d-r{height:calc(45 * var(--e))}
.fst-anf b{transition:color .4s ease}
.fst-anf b.neu{color:#FF6A2A}

/* ---------- S1: Besuch über einen LinkedIn-Link, Kessler-Seite ohne Banner ---------- */
.fst-s1{padding:calc(16 * var(--e)) calc(16 * var(--e)) calc(14 * var(--e))}
.fst-br{position:relative;height:calc(196 * var(--e));border-radius:calc(10 * var(--e));background:#F4EFE7;overflow:hidden;box-shadow:0 0 0 1px rgba(244,243,240,.14),0 calc(12 * var(--e)) calc(30 * var(--e)) rgba(0,0,0,.45)}
.fst-br-bar{position:relative;display:flex;align-items:center;gap:calc(10 * var(--e));height:calc(26 * var(--e));padding:0 calc(9 * var(--e));background:#E9E5DE;border-bottom:1px solid rgba(11,11,12,.08)}
.fst-dots{display:flex;gap:calc(4 * var(--e));flex:none}
.fst-dots i{width:calc(6.5 * var(--e));height:calc(6.5 * var(--e));border-radius:50%;background:rgba(11,11,12,.16)}
.fst-adr{display:flex;align-items:center;gap:calc(4 * var(--e));flex:1;min-width:0;height:calc(17 * var(--e));padding:0 calc(8 * var(--e));border-radius:calc(6 * var(--e));background:#F8F6F2;box-shadow:inset 0 0 0 1px rgba(11,11,12,.07);font-size:calc(9 * var(--e));color:#2B2A28;white-space:nowrap;overflow:hidden}
.fst-adr svg{width:calc(9 * var(--e));height:calc(9 * var(--e));color:#8F8D87}
.fst-adr-t{overflow:hidden;text-overflow:ellipsis;transition:opacity .25s ease}
.fst-adr-t em{font-style:normal;color:#8F8D87}
.fst-lade{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:#17857D;transform:scaleX(0);transform-origin:left;opacity:0}
.fst-s1.laedt .fst-lade{opacity:1;transform:scaleX(1);transition:transform .8s cubic-bezier(.3,.7,.3,1),opacity .3s ease .6s}
.fst-s1.laedt.fertig .fst-lade{opacity:0}
.fst-seite{font-family:-apple-system,"SF Pro Text","Helvetica Neue",Arial,sans-serif;color:#132523;transition:opacity .4s ease}
.fst-s1.ohne-seite .fst-seite{opacity:0}
.fst-s1.ohne-adr .fst-adr-t{opacity:0}
.fst-k-nav{display:flex;align-items:center;gap:calc(8 * var(--e));height:calc(26 * var(--e));padding:0 calc(12 * var(--e));border-bottom:1px solid rgba(19,37,35,.07)}
.fst-k-logo{display:flex;align-items:center;gap:calc(3 * var(--e));font-size:calc(9.5 * var(--e));letter-spacing:-.01em;white-space:nowrap}
.fst-k-logo svg{width:calc(11 * var(--e));height:calc(10 * var(--e))}
.fst-k-logo b{font-weight:700}
.fst-k-logo span{color:#5A6663}
.fst-k-links{display:flex;gap:calc(9 * var(--e));margin-left:auto;font-size:calc(7.5 * var(--e));color:#3D4B49}
.fst-k-btn{padding:calc(4 * var(--e)) calc(8 * var(--e));border-radius:999px;background:#17857D;font-size:calc(7.5 * var(--e));font-weight:600;color:#fff;white-space:nowrap}
.fst-k-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:calc(12 * var(--e));align-items:center;padding:calc(12 * var(--e)) calc(12 * var(--e)) 0}
.fst-k-ey{font-size:calc(7.5 * var(--e));font-weight:600;color:#17857D}
.fst-k-h{margin-top:calc(5 * var(--e));font-size:calc(18.5 * var(--e));font-weight:700;line-height:1.02;letter-spacing:-.035em;color:#132523}
.fst-k-cta{display:inline-flex;margin-top:calc(10 * var(--e));padding:calc(6 * var(--e)) calc(10 * var(--e));border-radius:999px;background:#17857D;font-size:calc(8 * var(--e));font-weight:600;color:#fff;box-shadow:0 calc(4 * var(--e)) calc(10 * var(--e)) rgba(23,133,125,.3)}
.fst-k-bild{display:block;width:100%;height:calc(132 * var(--e));border-radius:calc(8 * var(--e));object-fit:cover;object-position:64% 30%}
.fst-s1-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:calc(10 * var(--e));margin:calc(12 * var(--e)) 0 calc(6 * var(--e))}
.fst-s1-kopf .d-tit{margin:0;font-size:calc(9.5 * var(--e))}
.fst-s1-kopf span{font-size:calc(9 * var(--e));color:#6F6D68;white-space:nowrap}
.fst-s1 .fst-liste{padding-top:calc(6 * var(--e));padding-bottom:calc(6 * var(--e))}
.fst-s1 .d-tip{white-space:nowrap}

/* ---------- S2: Seiten, Klicks, neuer Kontakt mit Quelle ---------- */
.fst-s2{padding:calc(14 * var(--e)) calc(16 * var(--e)) calc(14 * var(--e))}
.fst-s2 .d-tit{margin:calc(11 * var(--e)) 0 calc(6 * var(--e));font-size:calc(9.5 * var(--e))}
.fst-s2 .d-tit.fst-t1{margin-top:0}
.fst-s2 .fst-liste{padding:calc(5 * var(--e)) calc(12 * var(--e))}
.fst-s2 .fst-q{min-height:calc(21 * var(--e))}
.fst-k1{height:calc(2 * calc(40 * var(--e)) + 2px)}

/* ---------- S3: Quellen (echte Balken) und die letzten Kontakte mit „Kam über …“ wie im Kontakt-Kopf ---------- */
.fst-s3{padding:calc(16 * var(--e)) calc(16 * var(--e)) calc(14 * var(--e))}
.fst-s3-kopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:calc(8 * var(--e))}
.fst-s3-kopf .d-tit{margin:0;font-size:calc(9.5 * var(--e))}
.fst-s3-kopf .fn-pills span{height:calc(20 * var(--e));padding:0 calc(9 * var(--e));font-size:calc(9 * var(--e))}
.fst-s3 .fst-s3-q{padding-top:calc(6 * var(--e));padding-bottom:calc(6 * var(--e))}
.fst-s3 .d-tit.fst-s3-t{margin:calc(12 * var(--e)) 0 calc(7 * var(--e));font-size:calc(9.5 * var(--e))}
.fst-koepfe .d-r{height:calc(40 * var(--e));min-height:0;padding:calc(6 * var(--e)) calc(11 * var(--e));transition:background .4s ease}
.fst-koepfe .d-rm span em{font-style:normal;color:#D6D4CE;transition:color .4s ease}
.fst-s3.hell .fst-li-k .d-r{background:rgba(255,72,0,.07)}
.fst-s3.hell .fst-li-k .d-rm span em{color:#FF6A2A}
.fst-s3 .d-tip{white-space:nowrap}

@container (max-width:460px){
  .fst-zwei{grid-template-columns:minmax(0,1fr);gap:0}
  .fst-hero .fn-kz{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)}
  .fst-hero .fn-kz>.d-box:nth-child(2){display:none}
  .fst-hero .fst-mehr{display:none}
  .fst-hero .d-tit{margin-top:calc(14 * var(--e))}
  .fst-hero .fst-kontakte{flex:none;height:calc(3 * calc(42 * var(--e)) + 2px)}
  .fst-hero .fst-kontakte .d-r{height:calc(42 * var(--e))}
}
@media (prefers-reduced-motion:reduce){.fst-q,.fst-q u,.fst-koepfe .d-r,.fst-koepfe em,.fst-lade,.fst-seite,.fst-adr-t{transition:none!important}}