/* ================================================================
   BSF Shared Shell — site.css
   Extrahiert aus index-v4.html (FROZEN Quelle). Für Unterseiten
   ohne GSAP. Reveals laufen hier über IntersectionObserver + .vis.
   ================================================================ */

/* ================= DESIGN SYSTEM — Tokens & Basis ================= */
:root{
  --navy:#0a1628; --void:#060d18; --surface:#0c1524; --elevated:#122038;
  --blue:#0d47a1; --blue-dark:#0a3a87;
  --green-logo:#9ccc65; --green-sys:#2e7d32; --green-surface:#e8f5e9;
  --n50:#f5f7fa; --n100:#e8ecf0; --n200:#d1d8e0; --n300:#b0bac4;
  --n400:#8896a4; --n500:#64748b; --n600:#475569; --n700:#334155;
  --dm-border:#1a2e4a;
  --font:'Manrope',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono','Fira Code',Consolas,monospace;
  --diag:135deg;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{font-family:var(--font);background:var(--void);color:var(--n100);
  font-size:16px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--blue);color:#fff}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* grain overlay */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:120;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E")}

/* type utilities */
.overline{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--green-logo)}
.mono-label{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.5px;color:var(--n400)}
.display{font-weight:300;letter-spacing:-1.5px;line-height:1.05}

/* buttons */
.btn-primary{display:inline-block;background:var(--blue);color:#fff;padding:14px 28px;
  border-radius:4px;font-size:14px;font-weight:500;letter-spacing:.2px;
  transition:transform .2s,box-shadow .2s,background .2s;
  box-shadow:0 2px 8px rgba(13,71,161,.18)}
.btn-primary:hover{transform:translateY(-1px);background:var(--blue-dark);
  box-shadow:0 6px 20px rgba(13,71,161,.3)}
.btn-ghost{display:inline-block;color:var(--n100);padding:13px 24px;border-radius:4px;
  border:1px solid var(--dm-border);font-size:14px;font-weight:500;transition:border-color .2s}
.btn-ghost:hover{border-color:var(--n400)}

/* ================= NAV ================= */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;
  justify-content:space-between;padding:20px 48px;
  transition:background .4s,padding .4s,box-shadow .4s}
.nav.scrolled{background:rgba(6,13,24,.88);backdrop-filter:blur(14px);padding:14px 48px;
  box-shadow:0 1px 0 var(--dm-border)}
.nav-logo{height:36px;width:auto}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{font-size:14px;font-weight:500;color:var(--n300);transition:color .2s}
.nav-links a:hover{color:#fff}
.nav-cta{background:var(--blue);color:#fff;padding:9px 18px;border-radius:4px;font-size:13px}
.nav-cta:hover{background:var(--blue-dark);color:#fff}

/* ================= ZONE B — DIE LESEZONE (hell) ================= */
/* margin-top:-1px + ::before-Überlappung: schließt die Subpixel-Haarlinie am Übergang zur dunklen Sektion */
.zoneb{position:relative;background:var(--n50);color:var(--navy);margin-top:-1px}
.zoneb::before{content:'';position:absolute;top:-1px;left:0;right:0;height:92px;
  background:var(--navy);clip-path:polygon(0 0,100% 0,100% 30%,0 100%)}
.zb-sec{padding:110px 0;position:relative}
.zb-sec.alt{background:#fff}
.zb-inner{max-width:1240px;margin:0 auto;padding:0 48px}
.zb-overline{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--blue)}
.zb-h{font-size:clamp(26px,3.2vw,38px);font-weight:600;letter-spacing:-.5px;
  color:var(--navy);margin-top:12px;max-width:760px}
.zb-lead{font-size:17px;color:var(--n600);max-width:660px;margin-top:16px}

/* Reveal — kein GSAP: IntersectionObserver setzt .vis */
.zb-r{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.zb-r.vis{opacity:1;transform:none}

/* Trust-Cards */
.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;
  margin-top:52px}
.tcard{background:#fff;border:1px solid var(--n200);border-radius:6px;padding:28px;
  box-shadow:0 2px 10px rgba(13,71,161,.06);position:relative;overflow:hidden}
.tcard::before{content:'';position:absolute;top:0;right:0;width:22px;height:22px;
  background:var(--blue);clip-path:polygon(100% 0,0 0,100% 100%)}
.tcard .tn{font-family:var(--mono);font-size:12px;color:var(--blue);letter-spacing:1px}
.tcard h3{font-size:19px;font-weight:600;color:var(--navy);margin:10px 0 8px;letter-spacing:-.2px}
.tcard p{font-size:15px;color:var(--n600)}
.zb-checks{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}
.zb-check{background:var(--green-surface);color:var(--green-sys);padding:10px 18px;
  border-radius:4px;font-size:14px;font-weight:500}
.zb-stats{display:flex;margin-top:56px;border-top:1px solid var(--n200);
  border-bottom:1px solid var(--n200);flex-wrap:wrap}
.zbstat{flex:1;min-width:180px;padding:28px 24px;border-left:1px solid var(--n200)}
.zbstat:first-child{border-left:none}
.zbstat .n{font-size:34px;font-weight:700;letter-spacing:-1px;color:var(--navy);
  font-variant-numeric:tabular-nums}
.zbstat .c{font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;
  color:var(--n500);margin-top:6px}

/* Angebot-Block (dunkle Karte in heller Zone) */
.offer{background:var(--navy);border-radius:6px;padding:56px;margin-top:52px;
  display:grid;grid-template-columns:1.4fr 1fr;gap:44px;align-items:center;
  color:var(--n100);position:relative;overflow:hidden;
  box-shadow:0 16px 48px rgba(13,71,161,.18)}
.offer::after{content:'';position:absolute;bottom:0;right:0;width:180px;height:180px;
  background:rgba(156,204,101,.08);clip-path:polygon(100% 0,0 100%,100% 100%)}
.offer h3{font-size:clamp(22px,2.4vw,30px);font-weight:300;letter-spacing:-.5px;color:#fff}
.offer p{font-size:15px;color:var(--n300);margin-top:14px;max-width:480px}
.offer-cta{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.offer-flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:26px;
  font-family:var(--mono);font-size:12px;letter-spacing:.8px;text-transform:uppercase;color:var(--n300)}
.offer-flow b{color:var(--green-sys);font-weight:700;margin-right:7px}
.offer-flow em{font-style:normal;color:var(--n500)}

/* Anspruch */
.claims{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.claim{border-top:2px solid var(--blue);padding-top:20px}
.claim .arrow{font-size:26px;color:var(--green-sys);line-height:1}
.claim h3{font-size:21px;font-weight:600;color:var(--navy);margin:10px 0 6px;letter-spacing:-.3px}
.claim p{font-size:15px;color:var(--n600)}

/* Team */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.member{background:#fff;border:1px solid var(--n200);border-radius:6px;overflow:hidden;
  box-shadow:0 2px 10px rgba(13,71,161,.06)}
.member .ph{aspect-ratio:4/5;background:var(--n100);display:flex;align-items:center;
  justify-content:center;font-family:var(--mono);font-size:11px;letter-spacing:2px;
  color:var(--n400)}
.member .mi{padding:22px}
.member .mn{font-size:18px;font-weight:600;color:var(--navy)}
.member .mr{font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;
  color:var(--n500);margin-top:4px}
.member p{font-size:14px;color:var(--n600);margin-top:12px}
/* CBF-Partner-Karte (Team-Sektion) */
.member.partner .ph.partner-ph{background:#fff;border-bottom:1px solid var(--n200);
  transition:background .2s}
.member.partner .ph.partner-ph:hover{background:var(--n50)}
.partner-ph img{max-width:68%;height:auto}
.member.partner{border-color:var(--navy)}
.partner-link{display:inline-block;margin-top:14px;font-size:14px;font-weight:600;
  color:var(--blue);transition:color .2s}
.partner-link:hover{color:var(--blue-dark)}

/* Jobs-Teaser (Team-Sektion) — auffällig */
.jobs-teaser{margin-top:52px;padding:44px 48px;background:var(--navy);border-radius:6px;
  display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;
  position:relative;overflow:hidden;box-shadow:0 16px 48px rgba(13,71,161,.18)}
.jobs-teaser::after{content:'';position:absolute;top:0;right:0;width:160px;height:100%;
  background:rgba(156,204,101,.09);clip-path:polygon(100% 0,35% 0,100% 100%)}
.jobs-overline{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:2.5px;
  color:var(--green-logo)}
.jobs-teaser h3{font-size:clamp(26px,3vw,38px);font-weight:300;letter-spacing:-1px;
  color:#fff;margin-top:10px}
.jobs-teaser p{font-size:16px;color:var(--n300);margin-top:8px}
.jobs-teaser .btn-primary{position:relative;z-index:2;white-space:nowrap}

/* FAQ */
.faq{margin-top:48px;max-width:860px}
.faq-item{border-top:1px solid var(--n200)}
.faq-item:last-child{border-bottom:1px solid var(--n200)}
.faq-head{width:100%;display:flex;align-items:center;gap:22px;padding:24px 0;text-align:left}
.faq-q{flex:1;font-size:17px;font-weight:600;color:var(--navy);letter-spacing:-.2px}
.faq-plus{font-size:24px;font-weight:300;color:var(--blue);transition:transform .35s;line-height:1}
.faq-item.open .faq-plus{transform:rotate(45deg)}
/* CSS-getriebenes Öffnen: die Shell-JS toggelt nur .open (kein inline max-height wie v4).
   Großzügiger Wert deckt lange Antworten ab. */
.faq-body{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.65,0,.35,1)}
.faq-item.open .faq-body{max-height:600px}
.faq-body p{padding:0 0 24px;max-width:700px;font-size:15px;color:var(--n600)}

/* ================= FOOTER (Zone B) ================= */
.zfoot{background:var(--void);color:var(--n300);padding:80px 48px 0;position:relative;margin-top:-1px}
.zfoot::before{content:'';position:absolute;top:-1px;left:0;right:0;height:72px;
  background:var(--n50);clip-path:polygon(0 0,100% 0,0 100%)}
.zfoot-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
  gap:44px;padding:40px 0 50px}
.zfoot img{height:72px;margin-bottom:16px}
.zfoot .fclaim{font-size:14px;color:var(--n500);max-width:280px}
.zfoot h4{font-family:var(--mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--n500);margin-bottom:16px;font-weight:500}
.zfoot a{display:block;font-size:14px;color:var(--n300);padding:5px 0;transition:color .2s}
.zfoot .zfoot-addr{display:block;font-size:14px;color:var(--n300);padding:5px 0}
.zfoot a:hover{color:#fff}
.zfoot-bar{border-top:1px solid var(--dm-border);padding:22px 0;max-width:1240px;margin:0 auto;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--n600)}

/* ================= RESPONSIVE ================= */
@media(max-width:900px){
  .nav{padding:14px 18px;gap:14px}.nav-links a:not(.nav-cta){display:none}
  .nav-logo{height:24px;flex-shrink:0}.nav-links{gap:12px}
  .nav-cta{padding:8px 12px;font-size:12px;white-space:nowrap}
  .zb-inner{padding:0 22px}
  .zb-sec{padding:70px 0}
  /* wie Homepage-Bug 6: flachere Diagonale + mehr Luft, damit die Overline nicht im Übergang liegt */
  .zoneb::before{height:56px;clip-path:polygon(0 0,100% 0,100% 55%,0 100%)}
  .zoneb .zb-sec:first-of-type{padding-top:100px}
  .claims,.team{grid-template-columns:1fr}
  .offer{grid-template-columns:1fr;padding:34px}
  .zfoot{padding:60px 22px 0}
  .zfoot-grid{grid-template-columns:1fr;gap:30px}
}
@media(prefers-reduced-motion:reduce){
  .zb-r{opacity:1;transform:none;transition:none}
}

/* ================= PAGE-HERO — kompaktes Navy-Band für Unterseiten ================= */
/* Neu — gibt es in v4 nicht. Kompaktes Hero-Band statt Vollbild-Video-Hero. */
.page-hero{background:var(--navy);color:#fff;padding:170px 48px 90px;position:relative;overflow:hidden}
.page-hero::after{content:'';position:absolute;top:0;right:0;width:38vw;height:100%;
  background:linear-gradient(315deg,rgba(13,71,161,.25),transparent 60%);
  clip-path:polygon(35% 0,100% 0,100% 100%,0 100%)}
.page-hero-inner{max-width:1240px;margin:0 auto;position:relative;z-index:1}
.page-hero .overline{font-family:var(--mono);font-size:12px;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--green-sys)}
.page-hero h1{font-weight:300;font-size:clamp(34px,4.6vw,62px);letter-spacing:-1.5px;
  line-height:1.08;margin-top:18px;max-width:820px}
.page-hero .sub{font-size:17px;color:var(--n300);margin-top:20px;max-width:560px}
@media(max-width:760px){.page-hero{padding:130px 22px 60px}}

/* ── Mobile-Menü: Burger + Vollbild-Overlay ── */
.nav-burger{display:none;background:none;border:0;width:36px;height:36px;padding:11px 7px;cursor:pointer;
  flex-direction:column;justify-content:space-between;z-index:101}
.nav-burger span{display:block;height:1.5px;width:100%;background:rgba(255,255,255,.85);border-radius:2px;
  transition:transform .3s,opacity .3s}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:99;background:rgba(6,13,24,.96);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  display:flex;flex-direction:column;justify-content:center;gap:28px;padding:0 36px;
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease}
.mnav.open{opacity:1;visibility:visible}
.mnav a{font-size:27px;font-weight:600;letter-spacing:-.5px;color:#fff}
.mnav a.mnav-cta{display:inline-block;align-self:flex-start;margin-top:10px;background:var(--blue);color:#fff;
  font-size:17px;font-weight:600;letter-spacing:0;padding:15px 26px;border-radius:4px}
@media(max-width:900px){.nav-burger{display:flex}}