/* biosafety4u.berlin – Ergänzungen für die statische Version (ersetzt Slideshow CK, Tabs & Accordions, Visforms) */

/* Skip-Link */
.b4u-skip{position:absolute;left:-9999px;top:0;z-index:10001;background:#252525;color:#fff;padding:8px 14px;border-radius:0 0 6px 0}
.b4u-skip:focus{left:0;color:#fff}

/* Statisches Titelbild statt Slider (gleiches Seitenverhältnis wie bisher: 1440 x 432) */
#sp-slider .b4u-static-hero{position:relative;width:100%;aspect-ratio:10/3;overflow:hidden;background:#e9ece4}
#sp-slider .b4u-static-hero img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center}

/* Sprachumschalter */
#sp-header .header-modules{margin-left:14px}
.b4u-lang{display:flex;gap:2px;list-style:none;margin:0;padding:0;align-items:center}
.b4u-lang a{display:inline-block;padding:4px 7px;font-size:13px;font-weight:500;letter-spacing:.04em;color:#6b6b6b;border-radius:4px;line-height:1.2}
.b4u-lang li+li:before{content:"|";color:#c9c9c9;margin-right:2px}
.b4u-lang a:hover,.b4u-lang a:focus-visible{color:#f68e13}
.b4u-lang a.is-active{color:#252525;font-weight:700}
@media (max-width:991.98px){#sp-header .header-modules{margin-left:auto}}
@media (max-width:420px){#sp-header .header-modules .b4u-lang a{padding:4px 4px;font-size:12px}}

/* Offcanvas: Untermenüs per JS */
.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent-open>ul.menu-child{display:block}
.offcanvas-menu .b4u-client-btn{margin:12px 10px 0}
body.offcanvas-active{overflow:hidden}

/* Akkordeon (ersetzt Regular Labs Tabs & Accordions) */
details.b4u-acc{border:1px solid #e3e6dc;border-radius:8px;margin:0 0 12px;background:#fff;overflow:hidden}
details.b4u-acc>summary{list-style:none;cursor:pointer;padding:14px 48px 14px 18px;font-weight:500;font-size:1.05rem;line-height:1.4;color:#252525;background:#f4f6f0;position:relative}
details.b4u-acc>summary::-webkit-details-marker{display:none}
details.b4u-acc>summary:after{content:"";position:absolute;right:18px;top:50%;width:10px;height:10px;border-right:2px solid #f68e13;border-bottom:2px solid #f68e13;transform:translateY(-70%) rotate(45deg);transition:transform .2s}
details.b4u-acc[open]>summary:after{transform:translateY(-30%) rotate(-135deg)}
details.b4u-acc>summary:hover{background:#eef1e8}
details.b4u-acc>summary:focus-visible{outline:2px solid #f68e13;outline-offset:-2px}
.b4u-acc__body{padding:16px 18px 6px}
.b4u-acc__body>*:last-child{margin-bottom:12px}

/* Kontaktformular (ersetzt Visforms) */
.b4u-form{max-width:760px}
.b4u-form .form-group{margin-bottom:16px}
.b4u-form label{font-weight:500}
.b4u-form .b4u-hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.b4u-form .form-check{margin:6px 0 4px}
.b4u-form .b4u-form__note{font-size:.9rem;color:#5d5d5d}
.b4u-form .btn-primary{min-width:180px}
.b4u-alert{border-radius:8px;padding:14px 18px;margin:0 0 20px}
.b4u-alert--ok{background:#eef6e6;border:1px solid #b9d79c;color:#2d4a14}
.b4u-alert--err{background:#fdf0ea;border:1px solid #f2b79b;color:#7a2d0c}

/* Rechtstexte */
.b4u-legal h2{font-size:1.5rem;margin-top:2rem}
.b4u-legal h3{font-size:1.2rem;margin-top:1.5rem}
.b4u-legal .b4u-legal__meta{color:#6b6b6b;font-size:.9rem}

/* Neue Leistungsseiten */
.b4u-page-lead{font-size:1.15rem;line-height:1.6;max-width:62rem}
.b4u-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:24px 0 28px;padding:0;list-style:none}
.b4u-facts li{background:#f4f6f0;border-radius:10px;padding:16px 18px;line-height:1.5}
.b4u-facts li strong{display:block;margin-bottom:4px;color:#252525}
.b4u-note{border-left:4px solid #f68e13;background:#fff8ef;padding:12px 16px;border-radius:0 8px 8px 0;margin:20px 0}

/* Druck */
@media print{#sp-header,#sp-slider,#sp-feature,#sp-bottom,.offcanvas-menu,.sp-scroll-up{display:none!important}}

/* Logo-Höhe (bisher Helix-Template-Einstellung) */
.logo-image{height:100px}
.logo-image-phone{height:100px}
.b4u-quote{border-left:4px solid #f68e13;background:#f4f6f0;margin:20px 0;padding:16px 20px;border-radius:0 8px 8px 0}
.b4u-quote p{font-style:italic;margin-bottom:8px}
.b4u-quote footer{font-size:.92rem;color:#5d5d5d}

/* =========================================================================
   Einheitlicher CTA-Button (Stil wie "Explore the App Family" / .b4u-campus__btn)
   Verwendung: <a class="b4u-ctabtn" href="…"><span>Text</span></a>
   ========================================================================= */
a.b4u-ctabtn,#sp-feature a.b4u-ctabtn{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;background:#f7a200;border:2px solid #f7a200;border-radius:10px;color:#fff;font-family:'Roboto',arial,sans-serif;font-size:15px;font-weight:500;letter-spacing:.6px;line-height:1.2;text-transform:uppercase;text-decoration:none;transition:ease-in-out all .3s;box-shadow:0 8px 20px -8px rgba(247,162,0,.6)}
a.b4u-ctabtn::after{content:"";flex:0 0 18px;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center/contain;transition:ease-in-out all .3s}
a.b4u-ctabtn:hover,a.b4u-ctabtn:focus-visible,#sp-feature a.b4u-ctabtn:hover,#sp-feature a.b4u-ctabtn:focus-visible{background:#cc8500;border-color:#cc8500;color:#fff;text-decoration:none;padding:15px 28px;font-size:16px;box-shadow:0 0 0 4px rgba(247,162,0,.35),0 16px 30px -10px rgba(247,162,0,.65)}
a.b4u-ctabtn:hover::after,a.b4u-ctabtn:focus-visible::after{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){a.b4u-ctabtn,a.b4u-ctabtn::after{transition:none}a.b4u-ctabtn:hover,a.b4u-ctabtn:focus-visible{padding:13px 24px;font-size:15px}a.b4u-ctabtn:hover::after{transform:none}}

/* =========================================================================
   Header-Button "Client Area": hellgrüner Glow (wie "Servicebereich" auf sicherheitsfachkraft.berlin)
   ========================================================================= */
.sp-megamenu-parent>li>a.b4u-client-btn{box-shadow:0 0 0 0 rgba(155,198,102,0),0 0 10px 1px rgba(155,198,102,.45)}
.sp-megamenu-parent>li>a.b4u-client-btn:hover,.sp-megamenu-parent>li>a.b4u-client-btn:focus-visible{box-shadow:0 0 0 3px rgba(155,198,102,.55),0 0 18px 4px rgba(155,198,102,.75)!important}
.offcanvas-menu a.b4u-client-btn{box-shadow:0 0 10px 1px rgba(155,198,102,.45)}
.offcanvas-menu a.b4u-client-btn:hover,.offcanvas-menu a.b4u-client-btn:focus-visible{box-shadow:0 0 0 3px rgba(155,198,102,.55),0 0 16px 3px rgba(155,198,102,.7)!important}

/* =========================================================================
   Sprachumschalter: größer und auffälliger (Segment-Schalter)
   ========================================================================= */
#sp-header .header-modules{margin-left:18px}
.b4u-lang{gap:0;border:2px solid #5f6e45;border-radius:999px;padding:2px;background:#fff}
.b4u-lang li+li:before{content:none}
.b4u-lang a,#sp-header .header-modules .b4u-lang a{display:inline-flex;align-items:center;justify-content:center;min-width:42px;min-height:32px;padding:5px 12px;font-size:15px;font-weight:600;letter-spacing:.06em;color:#4f5a3a;border-radius:999px;line-height:1;text-decoration:none;transition:background .2s ease,color .2s ease}
.b4u-lang a:hover,.b4u-lang a:focus-visible{color:#252525;background:#eef2e6;text-decoration:none}
.b4u-lang a.is-active,.b4u-lang a.is-active:hover,#sp-header .header-modules .b4u-lang a.is-active{color:#fff;background:#5f6e45;font-weight:700}
@media (max-width:420px){#sp-header .header-modules .b4u-lang a{min-width:36px;min-height:30px;padding:4px 9px;font-size:14px}#sp-header .header-modules{margin-left:auto;margin-right:6px}}
/* Header 992–1399 px: unter 1200 px Burger-Menü (d-xl-*), 1200–1399 px kompakte Hauptnavigation, damit Logo + Menü + Sprachumschalter einzeilig bleiben */
@media (min-width:1200px) and (max-width:1399.98px){
#sp-logo.has-border{padding-right:24px}
.sp-megamenu-parent>li>a,.sp-megamenu-parent>li>span{padding-left:6px!important;padding-right:6px!important;margin:5px 2px!important;font-size:16px}
html[lang^="de"] .sp-megamenu-parent>li>a,html[lang^="de"] .sp-megamenu-parent>li>span{font-size:15.5px}
html[lang^="fr"] .sp-megamenu-parent>li>a,html[lang^="fr"] .sp-megamenu-parent>li>span{font-size:14.5px}
.sp-megamenu-parent>li>a.b4u-client-btn{margin-left:6px!important;padding:0 12px!important;font-size:14px}
}
@media (min-width:1400px){html[lang^="fr"] .sp-megamenu-parent>li:not(:last-child)>a,html[lang^="fr"] .sp-megamenu-parent>li>span{padding-left:8px!important;padding-right:8px!important;font-size:16px}}