/* =========================================================
   Sefilex - Konsolidierung 2026
   Buttons vereinheitlichen, Mobile-Bugs beheben, Politur.
   Laedt NACH site.css und fx.css und ueberschreibt gezielt.
   ========================================================= */

/* =========================================================
   1) BUTTONS - ein einheitliches System ueber alle Seiten
   Primaer   = gefuellter blauer Pill (.btn, .btn.ix-next, .fixcta)
   Sekundaer = Outline-Pill (gleiche Geometrie) -> .ix-ghost
   Tertiaer  = Textlink mit Strich/Pfeil (.btn-line, .ws-go, .lf-cta, .sek-plink)
   ========================================================= */

/* Primaer-Pill: Geometrie absichern (rund, einheitliche Hoehe) */
.btn{border-radius:46px}
.fixcta{border-radius:46px}
.cta-mini{border-radius:46px}

/* Instrumente: eckiger Ghost-Button -> runder Outline-Pill, passend zum Primaer-Pill */
.ix-ghost{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 30px;border-radius:46px;
  border:1px solid var(--blue);background:transparent;
  color:var(--beige);font:500 14px/1 var(--font-body,Inter);letter-spacing:.02em;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.ix-ghost:hover{background:var(--blue);color:var(--ink);border-color:var(--blue)}

/* Tertiaer-Links: konsistentes Markenblau und Strich-/Unterstrich-Verhalten */
.ws-go,.lf-cta,.sek-plink,.btn-line{font-weight:500;letter-spacing:.02em}
.ws-go:hover,.lf-cta:hover,.sek-plink:hover{color:var(--blue)}

/* Instrumente: Quiz-Optionen und Karten sanft runden statt eckig (Look an Pills angleichen) */
.ix-opt{border-radius:14px}
.ix-opt .k{border-radius:9px}
.ix-card,.ix-mod{border-radius:14px}
.ix-prog{border-radius:3px}

/* =========================================================
   2) KENNZAHLEN (.facts) - Mobile-Umbruch statt vertikalem Text-Salat
   Der 4er-Block traegt einen Inline-Style repeat(4,1fr); per Attribut-
   Selektor responsiv ueberschrieben (deckt index & team ab).
   ========================================================= */
@media (max-width:900px){
  .facts[style*="repeat(4"]{grid-template-columns:repeat(2,1fr)!important}
}
@media (max-width:560px){
  .facts[style*="repeat(4"]{grid-template-columns:1fr!important}
  .facts[style*="repeat(4"] .fact{padding:18px 0!important}
  .facts[style*="repeat(4"] .fact+.fact{border-left:none!important;border-top:1px solid var(--line)!important}
}
/* Zahlen und Captions nie zeichenweise umbrechen */
.fact-num,.fact-cap{overflow-wrap:normal;word-break:keep-all;hyphens:none}

/* =========================================================
   3) PRAXIS-STRECKE (.cs-phases/.csp) - Mobile: Linie links neben dem Text
   ========================================================= */
@media (max-width:760px){
  .cs-phases::before{display:none!important}
  .csp{
    grid-template-columns:1fr!important;gap:4px!important;
    padding-left:40px!important;position:relative;
  }
  .csp-no{
    position:absolute!important;left:0!important;top:0!important;
    width:auto!important;min-width:26px;text-align:left!important;
    background:transparent!important;padding:0!important;
  }
  .csp:not(:last-child)::after{
    left:12px!important;top:44px!important;bottom:2px!important;
  }
}

/* =========================================================
   4) ABLAUF-TIMELINE (.tl) - Strich baut sich beim Scrollen auf
   (JS uebernimmt die scroll-gekoppelte Fuellung; hier nur Glaettung)
   ========================================================= */
.tl-line span{transition:width .25s linear,height .25s linear}
@media (max-width:760px){
  .tl-line span{transition:height .2s linear}
}

/* =========================================================
   5) FLOATING CTA (.fixcta) - Mobile dezenter, weniger Overlap
   ========================================================= */
@media (max-width:560px){
  .fixcta{right:14px;bottom:14px;padding:12px 18px;font-size:12px}
}

/* =========================================================
   6) Allgemeine Mobile-Robustheit
   ========================================================= */
@media (max-width:560px){
  /* Buttons brechen nicht aus dem Viewport */
  .btn,.ix-ghost{max-width:100%;white-space:normal;text-align:center}
}

/* =========================================================
   7) Beige Sektionen (Startseite) - Lesbarkeit auf hellem Grund
   Erfahrung-Kennzahlen + Team als band-light
   ========================================================= */
.band-light .fact-num,.band-light .count{color:var(--navy)}
.band-light .fact-num u{color:var(--blue-d)}
.band-light .fact-cap{color:var(--navy-2)}
.band-light .fact::after{color:rgba(11,37,69,.06)}
.band-light .fact+.fact{border-left-color:var(--line-dk)}
.band-light .fact-bars i{background:var(--blue-d)}
.band-light .member .m-name{color:var(--navy)}
.band-light .member .m-role{color:var(--mute-d)}
.band-light .member .portrait{border-color:var(--line-dk);background:var(--paper-2)}

/* =========================================================
   8) Insights: Briefing-Archiv als Cover-Galerie statt Textliste
   ========================================================= */
.bh-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,28px);margin-top:34px}
.bh-yh{grid-column:1/-1;font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin:16px 0 0}
.bh-card{display:flex;flex-direction:column;color:inherit;text-decoration:none}
.bh-cover{position:relative;display:flex;flex-direction:column;justify-content:space-between;
  aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line);background:var(--navy);border-radius:12px;
  padding:clamp(14px,1.4vw,20px);transition:border-color .4s var(--ease),transform .5s var(--ease)}
.bh-cover::after{content:"";position:absolute;right:-14px;bottom:-14px;width:78px;height:78px;
  background:url(sefilex-glyph.svg) no-repeat center/contain;opacity:.18}
.bh-lbl{font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);position:relative;z-index:1}
.bh-big{font-family:var(--font-display,Inter);font-weight:200;font-size:clamp(2rem,3.4vw,3rem);
  letter-spacing:-.03em;color:var(--beige);line-height:1;position:relative;z-index:1}
.bh-card:hover .bh-cover{border-color:var(--blue);transform:translateY(-3px)}
.bh-iss{margin-top:14px;font-weight:500;font-size:1.02rem}
.bh-th{font-size:.82rem;color:var(--beige-2);margin-top:5px;line-height:1.5}
.bh-read{margin-top:10px;font-size:.78rem;letter-spacing:.04em;color:var(--blue);display:inline-flex;gap:6px;align-items:center}
.bh-read i{font-style:normal}
.bh-card:hover .bh-read{color:var(--beige)}
@media (max-width:760px){.bh-gal{grid-template-columns:repeat(2,1fr);gap:18px}}

/* =========================================================
   9) Kundenzitate (Referenzen): hellgraue Querstriche entfernen
   ========================================================= */
.hsz-logo{border-bottom:none}
.hsz-who{border-top:none}