/* mobile-fix-header.css — nur Mobile (max-width:1024px), Desktop unverändert
 *
 * Header + Burger-Navigation auf allen Seiten.
 * Desktop-Vorbild: schwarzer Balken (.con-kit-organism-background = #000),
 * weißes Logo links, Montserrat-Navigation, aktiver Punkt mit oranger Linie
 * (#F27E00 = rgb(242,126,0), Markenfarbe aus --color-bg der CTA-Buttons).
 */

@media (max-width: 1024px) {
  :root {
    --bmx-hdr-h: 72px;
    --bmx-hdr-gutter: 20px;
    --bmx-orange: #f27e00;
    --bmx-orange-dark: #d96f00;
  }

  /* ---------- Sticky funktioniert wieder ----------
     mobile-overrides.css setzt html+body { overflow-x:hidden }. Weil BEIDE
     hidden sind, wird body selbst zum Scroll-Container (overflow-y: auto),
     der aber nie scrollt → position:sticky des Headers greift nicht, der
     Header scrollt weg und nur der fixe Burger schwebt über dem Inhalt.
     overflow-x:clip schneidet genauso ab, erzeugt aber keinen Scroll-Container.
     (Browser ohne clip-Support verwerfen die Zeile → altes Verhalten.) */
  html,
  html body { /* "html body": schlägt das spätere inline body{overflow-x:hidden} der Startseite */
    overflow-x: clip;
  }
  /* Anker (#eurocomach …) nicht unter dem jetzt klebenden Header verstecken */
  html {
    scroll-padding-top: calc(var(--bmx-hdr-h) + 8px);
  }
  /* Scroll-Sperre bei offenem Menü auf <html> (= Viewport), NICHT auf body:
     overflow:hidden am body macht ihn wieder zum Scroll-Container, der sticky
     Header verliert den Bezug und springt nach oben aus dem Bild. */
  html:has(> body.mobile-nav-locked) {
    overflow: hidden;
  }
  html body.mobile-nav-locked {
    overflow-x: clip;
    overflow-y: visible;
  }

  /* ---------- Header-Balken ---------- */
  .con-kit-section--type-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9990 !important;
  }
  /* Schwarzen Hintergrund des Original-Layers sicherstellen (durchgehend, volle Breite) */
  .con-kit-section--type-header .con-kit-organism-background {
    background-color: #000 !important;
  }
  /* Container rechnet sonst mit 100vw - 2×24px (Startseite) → Logo-Flucht 24 statt 20px */
  section.con-kit-section--type-header .con-kit-container {
    width: 100% !important;
  }
  section.con-kit-section--type-header .con-kit-layer > .con-kit-organism-background1 {
    padding-left: var(--bmx-hdr-gutter) !important;
    padding-right: var(--bmx-hdr-gutter) !important;
  }
  /* mobile-overrides.css machte daraus eine weiße Karte (background:#fff) →
     weißes Logo unsichtbar, schwarze Ränder links/rechts/oben. */
  .con-kit-section--type-header .con-kit-molecule-header-v2 {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .con-kit-section--type-header .con-kit-molecule-header-v2__atoms {
    min-height: var(--bmx-hdr-h) !important;
    height: var(--bmx-hdr-h) !important;
    align-items: center !important;
  }
  .con-kit-section--type-header .con-kit-molecule-header-v2__atoms > .con-kit-animation__atom {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center !important;
    max-width: calc(100% - 64px) !important; /* Platz für den Burger */
  }

  /* Logo: 1000×291 px → 46 px hoch ≈ 158 px breit, gut lesbar */
  .con-kit-section--type-header .con-kit-component-logo {
    display: flex !important;
    align-items: center !important;
  }
  .con-kit-section--type-header .con-kit-component-logo .con-kit-fade-box {
    width: auto !important;
    height: auto !important;
  }
  section.con-kit-section--type-header .con-kit-component-logo .con-kit-component-logo__image {
    height: 46px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* ---------- Burger-Button: im schwarzen Balken, vertikal zentriert ---------- */
  .mobile-burger-btn {
    top: calc((var(--bmx-hdr-h) - 48px) / 2) !important;
    right: 7px !important; /* Icon-Kante liegt so auf der 20px-Fluchtlinie */
    width: 48px !important;
    height: 48px !important;
    background: transparent !important;
    border-radius: 8px !important;
    color: #fff !important;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease;
  }
  .mobile-burger-btn:focus-visible {
    outline: 2px solid var(--bmx-orange);
    outline-offset: 2px;
  }
  .mobile-burger-btn__lines {
    width: 24px !important;
    height: 16px !important;
  }
  .mobile-burger-btn__lines::before,
  .mobile-burger-btn__lines::after,
  .mobile-burger-btn__lines span {
    background: #fff !important;
    height: 2px !important;
    border-radius: 2px !important;
  }
  .mobile-burger-btn__lines span { top: 7px !important; }
  .mobile-burger-btn.is-open .mobile-burger-btn__lines::before { transform: translateY(7px) rotate(45deg) !important; }
  .mobile-burger-btn.is-open .mobile-burger-btn__lines::after { transform: translateY(-7px) rotate(-45deg) !important; }
  .mobile-burger-btn.is-open .mobile-burger-btn__lines::before,
  .mobile-burger-btn.is-open .mobile-burger-btn__lines::after {
    background: var(--bmx-orange) !important;
  }

  /* ---------- Menü-Overlay ----------
     top setzt interactions.js inline auf die Header-Unterkante. */
  .mobile-nav-overlay {
    top: var(--bmx-hdr-h);
    background: #000 !important;
    color: #fff;
    font-family: "Montserrat", var(--font-kit-text-font, sans-serif), sans-serif !important;
    padding: 8px var(--bmx-hdr-gutter) calc(32px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    overscroll-behavior: contain;
  }
  .mobile-nav-overlay__close { display: none !important; } /* Burger wird zum X */

  /* Rentware-Warenkorb (rtr-checkout, fixed unten rechts, Shadow-DOM) lag über
     dem offenen Menü → solange das Menü offen ist ausblenden. */
  body.mobile-nav-locked rtr-checkout {
    display: none !important; /* visibility reicht nicht: Shadow-DOM setzt visible */
  }

  .mobile-nav-list {
    display: flex;
    flex-direction: column;
  }
  .mobile-nav-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  }
  .mobile-nav-link {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    min-height: 60px !important;
    padding: 0 4px 0 0 !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    line-height: 1.2;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease;
  }
  .mobile-nav-link:active,
  .mobile-nav-sub-link:active {
    color: var(--bmx-orange) !important;
  }
  .mobile-nav-link:focus-visible,
  .mobile-nav-sub-link:focus-visible {
    outline: 2px solid var(--bmx-orange);
    outline-offset: 2px;
  }

  /* Aufklapp-Pfeil (Kaufen) als Chevron rechts, dreht beim Öffnen */
  .mobile-nav-link__arrow {
    width: 10px !important;
    height: 10px !important;
    margin: 0 6px 0 16px !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    transform: rotate(45deg) translate(-2px, -2px) !important;
  }
  .mobile-nav-item.is-open .mobile-nav-link__arrow {
    transform: rotate(-135deg) translate(-2px, -2px) !important;
  }
  .mobile-nav-item.is-open > .mobile-nav-link {
    color: var(--bmx-orange) !important;
  }

  /* Unterpunkte (Marken-Anker) */
  .mobile-nav-sub {
    padding: 0 0 12px 0 !important;
    margin: 0 !important;
  }
  .mobile-nav-sub-item { border: none !important; }
  .mobile-nav-sub-link {
    display: flex !important;
    align-items: center;
    min-height: 48px !important;
    line-height: 1.3 !important;
    padding: 0 0 0 16px !important;
    border-left: 2px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.85) !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
  }
  .mobile-nav-sub-item:first-child .mobile-nav-sub-link {
    color: #fff !important;
    font-weight: 600 !important;
  }

  /* Aktive Seite: aus der (versteckten) Desktop-Navigation ableiten — dort trägt
     der aktive Punkt .con-kit-atom-menu-v2-item-inside--active, das Overlay wird
     in derselben Reihenfolge aufgebaut. */
  body:has(.con-kit-molecule-header-v2 .con-kit-atom-menu-v2 > ul > li:nth-child(1) > .con-kit-atom-menu-v2-item-inside--active) .mobile-nav-list > .mobile-nav-item:nth-child(1) > .mobile-nav-link,
  body:has(.con-kit-molecule-header-v2 .con-kit-atom-menu-v2 > ul > li:nth-child(2) > .con-kit-atom-menu-v2-item-inside--active) .mobile-nav-list > .mobile-nav-item:nth-child(2) > .mobile-nav-link,
  body:has(.con-kit-molecule-header-v2 .con-kit-atom-menu-v2 > ul > li:nth-child(3) > .con-kit-atom-menu-v2-item-inside--active) .mobile-nav-list > .mobile-nav-item:nth-child(3) > .mobile-nav-link,
  body:has(.con-kit-molecule-header-v2 .con-kit-atom-menu-v2 > ul > li:nth-child(4) > .con-kit-atom-menu-v2-item-inside--active) .mobile-nav-list > .mobile-nav-item:nth-child(4) > .mobile-nav-link,
  body:has(.con-kit-molecule-header-v2 .con-kit-atom-menu-v2 > ul > li:nth-child(5) > .con-kit-atom-menu-v2-item-inside--active) .mobile-nav-list > .mobile-nav-item:nth-child(5) > .mobile-nav-link,
  body:has(.con-kit-molecule-header-v2 .con-kit-atom-menu-v2 > ul > li:nth-child(6) > .con-kit-atom-menu-v2-item-inside--active) .mobile-nav-list > .mobile-nav-item:nth-child(6) > .mobile-nav-link,
  .mobile-nav-link[aria-current="page"] {
    color: var(--bmx-orange) !important;
    padding-left: 14px !important;
  }
  body:has(.con-kit-molecule-header-v2 .con-kit-atom-menu-v2 > ul > li:nth-child(1) > .con-kit-atom-menu-v2-item-inside--active) .mobile-nav-list > .mobile-nav-item:nth-child(1) > .mobile-nav-link::before,
  body:has(.con-kit-molecule-header-v2 .con-kit-atom-menu-v2 > ul > li:nth-child(2) > .con-kit-atom-menu-v2-item-inside--active) .mobile-nav-list > .mobile-nav-item:nth-child(2) > .mobile-nav-link::before,
  body:has(.con-kit-molecule-header-v2 .con-kit-atom-menu-v2 > ul > li:nth-child(3) > .con-kit-atom-menu-v2-item-inside--active) .mobile-nav-list > .mobile-nav-item:nth-child(3) > .mobile-nav-link::before,
  body:has(.con-kit-molecule-header-v2 .con-kit-atom-menu-v2 > ul > li:nth-child(4) > .con-kit-atom-menu-v2-item-inside--active) .mobile-nav-list > .mobile-nav-item:nth-child(4) > .mobile-nav-link::before,
  body:has(.con-kit-molecule-header-v2 .con-kit-atom-menu-v2 > ul > li:nth-child(5) > .con-kit-atom-menu-v2-item-inside--active) .mobile-nav-list > .mobile-nav-item:nth-child(5) > .mobile-nav-link::before,
  body:has(.con-kit-molecule-header-v2 .con-kit-atom-menu-v2 > ul > li:nth-child(6) > .con-kit-atom-menu-v2-item-inside--active) .mobile-nav-list > .mobile-nav-item:nth-child(6) > .mobile-nav-link::before,
  .mobile-nav-link[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 24px;
    margin-top: -12px;
    border-radius: 2px;
    background: var(--bmx-orange);
  }

  /* CTA-Einträge (falls interactions.js welche einhängt, z.B. Telefon) */
  .mobile-nav-item--cta {
    border-bottom: none !important;
    margin-top: 24px !important;
  }
  .mobile-nav-item--cta + .mobile-nav-item--cta { margin-top: 12px !important; }
  .mobile-nav-item--cta .mobile-nav-link {
    justify-content: center !important;
    min-height: 54px !important;
    padding: 0 24px !important;
    background: var(--bmx-orange) !important;
    color: #fff !important;
    border-radius: 100px !important; /* wie die Hero-Buttons */
    font-size: 17px !important;
    font-weight: 700 !important;
  }
  .mobile-nav-item--cta .mobile-nav-link:active {
    background: var(--bmx-orange-dark) !important;
    color: #fff !important;
  }
}

/* Sehr schmale Geräte: Logo minimal kleiner, damit es nie an den Burger stößt */
@media (max-width: 359px) {
  section.con-kit-section--type-header .con-kit-component-logo .con-kit-component-logo__image {
    height: 40px !important;
  }
}