:root{ --hero-min-h:100svh; --hero-overlay:rgba(0,0,0,.45); --hero-text:#fff; --gap:2rem; --nav-gap-multiplier:4; }
html,body{height:100%}
body{background:#000}

/* Hero */
.hero{position:relative;min-height:var(--hero-min-h);color:var(--hero-text);display:grid;place-items:center;text-align:center;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background:url("/images/bg/bg5.webp") center/cover no-repeat;transform:scale(1.02);filter:saturate(.9) contrast(.95) brightness(.9);z-index:-2}
.hero::after{content:"";position:absolute;inset:0;background:var(--hero-overlay);z-index:-1}
.hero-inner{width:100%;max-width:920px;padding-top:10rem}
.hero-line,.hero-line-bottom{height:1px;background:rgba(255,255,255,.5);width:min(78%,640px);margin:0 auto}
.hero-line{margin-bottom:var(--gap)}
.hero-title{letter-spacing:.25rem;font-weight:700;margin:0 0 var(--gap)}
.hero-subtitle{letter-spacing:.35rem;font-weight:700;margin:0 0 var(--gap)}
.hero-claim{letter-spacing:.3rem;font-weight:600;opacity:.9;margin:0 0 var(--gap)}
.hero-nav-wrap{border:none;padding:1rem .5rem 2rem;margin-top:calc(var(--gap)*var(--nav-gap-multiplier));width:min(78%,640px);margin-left:auto;margin-right:auto}

/* Button Rails */
.btn-rail .btn{border:1px solid rgba(255,255,255,.65);background:rgba(0,0,0,.18);color:#fff;text-transform:uppercase;letter-spacing:.22rem;font-size:.65rem;padding:.7rem 1.1rem;border-radius:0;margin:0;border-right-width:0}
.btn-rail .btn:first-child{border-top-left-radius:.6rem;border-bottom-left-radius:.6rem}
.btn-rail .btn:last-child{border-top-right-radius:.6rem;border-bottom-right-radius:.6rem;border-right-width:1px}
.btn-rail .btn:hover,.btn-rail .btn:focus{background:rgba(255,255,255,.12);border-color:#fff}

/* Brand-Mark */
.brand-mark{position:fixed;right:2.2rem;bottom:4.5rem;z-index:100;width:150px;height:auto;opacity:.99;pointer-events:none}
@media (min-width:576px){.brand-mark{width:180px}}
@media (min-width:768px){.brand-mark{width:220px}}
@media (min-width:992px){.brand-mark{width:250px}}
@media (min-width:1400px){.brand-mark{width:300px}}

/* Legal-Bar */
.legal-bar{position:fixed;left:0;right:0;bottom:0;z-index:10;background:#1779c6;color:#fff;font-size:.9rem}
.legal-bar .btn-rail .btn{font-size:.75rem;border-color:#1779c6;background:transparent;padding:.1rem .9rem}
.legal-bar .btn-rail .btn:hover,.legal-bar .btn-rail .btn:focus{background:transparent;border-color:#1779c6}

/* Menu-FAB / Offcanvas */
.menu-fab{display:none;z-index:1048}
@media (max-width:991.98px){
  .hero-title{font-size:1.6rem}
  .hero-subtitle{font-size:1.05rem}
  .hero-claim{font-size:.72rem;letter-spacing:.22rem}
  .hero-nav{display:none!important}
  .menu-fab{display:inline-flex!important;position:fixed;right:1rem;top:1rem;z-index:1048}
  .menu-fab .btn{border-radius:999px;padding:.75rem .9rem;box-shadow:0 8px 24px rgba(0,0,0,.25);background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.35);color:#fff}
  .menu-fab .bar{display:block;width:24px;height:2px;background:#fff}
  .menu-fab .bar+.bar{margin-top:4px}
}
@media (min-width:992px){
  .hero-title{font-size:2rem}
  .hero-subtitle{font-size:1.2rem}
  .hero-claim{font-size:.75rem}
}

/* Offcanvas Overlay */
.offcanvas.menu-overlay{height:70vh;width:360px;max-width:86vw;--bs-offcanvas-bg:rgba(0,0,0,.85);--bs-offcanvas-box-shadow:none;border:0;opacity:0;transform:translateX(100%);transition:opacity .35s ease,transform .35s ease;z-index:1045}
.offcanvas.menu-overlay.show{opacity:1;transform:translateX(0)}
.menu-overlay .offcanvas-header{border-bottom:1px solid rgba(255,255,255,.15)}
.menu-overlay .offcanvas-title{letter-spacing:.2rem}
.menu-overlay .offcanvas-body{display:flex;align-items:center;justify-content:center;padding:4rem 1.25rem}
.menu-overlay nav .nav-link{color:#fff;text-transform:uppercase;letter-spacing:.3rem;font-weight:700;font-size:clamp(1rem,2.6vw,1.75rem);padding:.75rem 1rem;text-align:center;border-radius:.375rem}
.menu-overlay nav .nav-link:hover,.menu-overlay nav .nav-link:focus{background:rgba(255,255,255,.08);color:#fff}
body.modal-open .menu-fab{z-index:1040;pointer-events:none;opacity:.8}

/* Modal */
.modal-backdrop.show{opacity:.6}
@supports (backdrop-filter:blur(6px)){.modal-backdrop.show{backdrop-filter:blur(6px)}}
@media (min-width:576px){.modal-dialog.fe-dialog{max-width:820px}}
@media (min-width:992px){.modal-dialog.fe-dialog{max-width:900px}}
.fe-modal{border:1px solid #e9edf2;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:hidden}
.fe-modal .modal-header{padding:.9rem 1.1rem;border-bottom:1px solid #eef1f6}
.fe-modal .modal-title{letter-spacing:.18rem;text-transform:uppercase;font-weight:800;font-size:.95rem;color:#0b1726}
.fe-modal .modal-body{padding:1.2rem 1.4rem 1.2rem;color:#111}
.fe-section-title{text-transform:uppercase;letter-spacing:.18rem;font-weight:800;font-size:1.05rem;margin:.5rem 0 .25rem;color:#0b1726}
.fe-rule{width:92px;height:3px;background:#1779c6;border-radius:3px;margin:.25rem 0 1.25rem;opacity:.9}
.h-xl{font-weight:700;line-height:1.25;margin:.75rem 0 1rem;color:#0b1726;font-size:clamp(1.15rem,2.2vw + .6rem,1.8rem)}
.fe-modal p.lead{font-size:1.05rem;color:#2d3748}
.fe-modal .modal-body ul{margin:.6rem 0 0 1.1rem}
.fe-modal .modal-body li{margin-bottom:.45rem}
.fe-modal .row.g-3>[class^="col-"]{padding-top:.2rem;padding-bottom:.2rem}

/* Modal-Header Branding (für Gestalten & Co) */
.fe-modal .modal-header.fe-brand{background:#167EC2;color:#fff;border-bottom:none}
.fe-modal .modal-header.fe-brand .modal-title{color:#fff}
.fe-modal .modal-header.fe-brand .btn-close{filter:invert(1);opacity:1}