.elementor-1692 .elementor-element.elementor-element-0b14c22{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for html, class: .elementor-element-773067b *//* ============================================================================
   Header — MyBoost
   Location: 03-pages/_shared/header/header.css

   Elementor-Einbau:
     Inhalt in "Advanced → Custom CSS"-Feld des Header-HTML-Widgets.
     Markup (header.html) ins HTML-Feld. JS in Elementor → Site Settings
     → Custom Code (Location: </body>).

   Design: Floating Pill (Figma 460:1315 Desktop / 479:918 Mobile)
     Mobile (<1440px): Logo + Hamburger. Nav als Fullscreen-Overlay.
     Desktop (≥1440px): Logo links + Nav rechts.

   Scoping: alle Regeln unter .mb-header.
   ============================================================================ */

/* Component-level height vars (Figma-spezifisch, nicht im globalen Token-Scale) */
.mb-header {
  --_pill-h-mobile:  3.5rem;   /* 56px — Figma mobile */
  --_pill-h-desktop: 5.5rem;   /* 88px — Figma desktop */
}

/* -- Outer wrapper ---------------------------------------------------------- */
.mb-header {
  position: sticky;
  top: 0;
  z-index: var(--mb-z-header);
  width: 100%;
  padding: var(--mb-space-2) var(--mb-space-4);   /* 8px 16px */
}

@media (min-width: 1440px) {
  .mb-header {
    padding-block: var(--mb-space-3);   /* 12px oben/unten auf Desktop */
  }
}

/* -- Pill ------------------------------------------------------------------ */
.mb-header__pill {
  max-width: 87.5rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--_pill-h-mobile);
  padding-inline: var(--mb-space-5);
  border-radius: var(--mb-radius-80);
  border: none;
  position: relative;
  isolation: isolate;

  /* Hintergrund: oben dunkel → unten leicht hell */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.11) 100%
  );

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Border-Gradient: oben hell → Seiten/unten transparent */
.mb-header__pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0.10) 35%,
    rgba(255, 255, 255, 0.00) 60%,
    rgba(255, 255, 255, 0.08) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

@media (min-width: 1440px) {
  .mb-header__pill {
    height: var(--_pill-h-desktop);
    padding-inline: var(--mb-space-9);
  }
}

/* -- Logo ------------------------------------------------------------------ */
.mb-header__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--mb-color-white);
  transition: opacity var(--mb-transition-fast);
}

.mb-header__logo:hover {
  opacity: 0.85;
}

.mb-header__logo:focus-visible {
  outline: none;
  box-shadow: var(--mb-shadow-focus);
  border-radius: var(--mb-radius-sm);
}

/* -- Desktop navigation ---------------------------------------------------- */
.mb-header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--mb-space-6);   /* 32px — Figma-Spec */
  list-style: none;
  padding: 0;
  margin: 0;
}

.mb-header__nav-link {
  position: relative;
  display: inline-block;
  padding-block: var(--mb-space-2);
  color: var(--mb-color-text-primary);
  transition: color var(--mb-transition-fast);
}

.mb-header__nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--mb-gradient-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--mb-transition-base);
}

.mb-header__nav-link:hover::after,
.mb-header__nav-link:focus-visible::after,
.mb-header__nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}

.mb-header__nav-link:focus-visible {
  outline: none;
}

/* -- Mobile toggle (hamburger) --------------------------------------------- */
.mb-header__toggle {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.mb-header__toggle:focus-visible {
  outline: none;
  box-shadow: var(--mb-shadow-focus);
  border-radius: var(--mb-radius-sm);
}

.mb-header__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--mb-color-white);
  border-radius: 2px;
  transition:
    transform var(--mb-transition-base),
    opacity var(--mb-transition-fast);
}

/* Open state — morpht zu X */
.mb-header__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mb-header__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.mb-header__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* -- Mobile overlay navigation --------------------------------------------- */
.mb-header__mobile-nav {
  position: fixed;
  inset: 0;
  /* Top-Offset = Pill-Höhe + obere padding-block (2× --mb-space-2) */
  top: calc(var(--_pill-h-mobile) + var(--mb-space-2) * 2);
  padding: var(--mb-space-6) var(--mb-space-5);
  background-color: var(--mb-color-bg);
  z-index: calc(var(--mb-z-header) - 1);
  overflow-y: auto;
}

.mb-header__mobile-nav[hidden] {
  display: none;
}

.mb-header__mobile-list {
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.mb-header__mobile-list a {
  display: block;
  padding-block: var(--mb-space-3);
  color: var(--mb-color-text-primary);
  border-bottom: var(--mb-border-width-thin) solid var(--mb-color-border-subtle);
  transition: color var(--mb-transition-fast);
}

.mb-header__mobile-list a:hover {
  color: var(--mb-color-text-secondary);
}

/* Hintergrund-Scroll sperren wenn mobile Nav offen ist */
body.mb-scroll-locked {
  overflow: hidden;
}/* End custom CSS */