/* =========================================================
   GCGF MOBILE NAVIGATION
   Moderner Enfold Burger / Sidebar Flyout
   ========================================================= */


/* =========================================================
   1. FARBEN & GRUNDWERTE
   ========================================================= */

@media only screen and (max-width: 989px) {

  #top {
    --gcgf-menu-bg: #f8f8f4;
    --gcgf-menu-sub-bg: #f1f3ed;
    --gcgf-menu-text: #232d33;
    --gcgf-menu-muted: #66706b;
    --gcgf-menu-green: #679938;
    --gcgf-menu-bordeaux: #841d5b;
    --gcgf-menu-line: rgba(35, 45, 51, 0.12);
  }

}


/* =========================================================
   2. FLYOUT – BREITE, HINTERGRUND & SCHATTEN
   ========================================================= */

@media only screen and (max-width: 989px) {

  /* -----------------------------------------
     Eigentliches mobiles Menü
     ----------------------------------------- */

  .html_av-overlay-side .av-burger-overlay-scroll {
    width: min(94vw, 460px) !important;

    background: #f8f8f4 !important;

    box-shadow:
      -18px 0 45px rgba(25, 35, 30, 0.18) !important;
  }


  /* -----------------------------------------
     Abdunklung des Seiteninhalts hinter dem Menü
     Dunkles Graphit mit leichtem Bordeaux-Unterton
     ----------------------------------------- */

  .av-burger-overlay-bg {
    background: rgba(43, 35, 40, 0.66) !important;
  }


  /* -----------------------------------------
     Innenfläche des Menüs
     ----------------------------------------- */

  .av-burger-overlay-inner {
    background: #f8f8f4 !important;
  }

}


/* =========================================================
   3. MENÜ-CONTAINER
   ========================================================= */

@media only screen and (max-width: 989px) {

  #av-burger-menu-ul {
    margin: 0 !important;
    padding: 0 0 32px !important;

    background: #f8f8f4 !important;
  }

}


/* =========================================================
   4. LOGO-BEREICH OBEN
   ========================================================= */

@media only screen and (max-width: 989px) {

  #av-burger-menu-ul::before {
    content: "";

    display: block;

    width: 100%;
    height: 108px;

    box-sizing: border-box;

    background-image:
      url("https://golfclub-gifhorn.de/wp-content/uploads/2026/01/GCGF-LOGO-mobil-fuer-APP.png");

    background-repeat: no-repeat;
    background-position: 26px center;
    background-size: 104px auto;

    border-bottom: 1px solid rgba(35, 45, 51, 0.10);
  }

  /* alten Logo-Trick sicher deaktivieren */
  #av-burger-menu-ul::after {
    content: none !important;
    display: none !important;
  }

}

/* =========================================================
   5. BURGER-ICON & SCHLIESSEN-SYMBOL
   Smartphone + Tablet getrennt gesteuert
   ========================================================= */


/* =====================================================
   5.1 ALLGEMEIN – SCHLIESSEN-SYMBOL ÜBER DEM OVERLAY
   ===================================================== */

@media only screen and (max-width: 989px) {

  #top .av-burger-menu-main,
  #top .av-burger-menu-main > a,
  #top .av-hamburger {
    z-index: 100001 !important;
  }


  /* X bei geöffnetem Menü dunkel */
  .av-burger-overlay-active #top .av-hamburger-inner,
  .av-burger-overlay-active #top .av-hamburger-inner::before,
  .av-burger-overlay-active #top .av-hamburger-inner::after {
    background-color: #232d33 !important;
  }

}


/* =====================================================
   5.2 TABLET HOCHFORMAT
   768–989 px

   Geschlossen:
   Burger bleibt links im grünen Header und wird weiß.

   Geöffnet:
   X wandert oben rechts IN den Menü-Slider.
   ===================================================== */

@media only screen and (min-width: 768px) and (max-width: 989px) {

  /* -----------------------------------------
     Geschlossener Burger: weiß
     ----------------------------------------- */

  #top .av-burger-menu-main .av-hamburger-inner,
  #top .av-burger-menu-main .av-hamburger-inner::before,
  #top .av-burger-menu-main .av-hamburger-inner::after {
    background-color: #ffffff !important;
  }


  /* -----------------------------------------
     Bei geöffnetem Menü:
     kompletten Burger-/Close-Button aus dem
     Header lösen und oben rechts positionieren
     ----------------------------------------- */

  .av-burger-overlay-active #top .av-burger-menu-main {
    position: fixed !important;

    top: 20px !important;
    right: 24px !important;
    left: auto !important;

    width: 50px !important;
    height: 50px !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;

    z-index: 100002 !important;
  }


  /* Klickfläche des X */
  .av-burger-overlay-active #top .av-burger-menu-main > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    position: relative !important;

    width: 50px !important;
    height: 50px !important;

    padding: 0 !important;
    margin: 0 !important;

    z-index: 100002 !important;
  }


  /* Hamburger selbst */
  .av-burger-overlay-active #top .av-hamburger {
    position: relative !important;

    width: 34px !important;
    height: 34px !important;

    padding: 0 !important;
    margin: 0 !important;

    z-index: 100003 !important;
  }


  /* geöffnetes X wieder dunkel */
  .av-burger-overlay-active #top .av-hamburger-inner,
  .av-burger-overlay-active #top .av-hamburger-inner::before,
  .av-burger-overlay-active #top .av-hamburger-inner::after {
    background-color: #232d33 !important;
  }

}


/* =========================================================
   6. HAUPTMENÜPUNKTE
   ========================================================= */

@media only screen and (max-width: 989px) {

  #av-burger-menu-ul > li > a {
    display: flex !important;
    align-items: center;

    min-height: 60px;

    box-sizing: border-box;

    padding: 18px 28px !important;

    background: transparent !important;
    color: #232d33 !important;

    border: 0 !important;
    border-bottom: 1px solid rgba(35, 45, 51, 0.12) !important;

    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;

    letter-spacing: -0.01em;

    transition:
      color 0.18s ease,
      background-color 0.18s ease;
  }

}


/* =========================================================
   7. HAUPTMENÜ – HOVER / AKTIV
   ========================================================= */

@media only screen and (max-width: 989px) {

  #av-burger-menu-ul > li > a:hover,
  #av-burger-menu-ul > li > a:focus {
    background: rgba(103, 153, 56, 0.055) !important;
    color: #679938 !important;
  }

  #av-burger-menu-ul > li.current-menu-item > a,
  #av-burger-menu-ul > li.current-menu-ancestor > a {
    color: #679938 !important;
  }

}


/* =========================================================
   8. AUFKLAPP-PFEILE
   ========================================================= */

@media only screen and (max-width: 989px) {

  #av-burger-menu-ul .av-submenu-indicator {
    margin-left: auto !important;

    color: #679938 !important;
    opacity: 1 !important;
  }

}


/* =========================================================
   9. UNTERMENÜ – GRUNDFLÄCHE
   ========================================================= */

@media only screen and (max-width: 989px) {

  #av-burger-menu-ul .sub-menu {
    margin: 0 !important;
    padding: 8px 0 10px !important;

    background: #f1f3ed !important;

    border: 0 !important;

box-shadow:
  inset 4px 0 0 rgba(132, 29, 91, 0.72);
  }

}


/* =========================================================
   10. UNTERMENÜPUNKTE
   ========================================================= */

@media only screen and (max-width: 989px) {

  #av-burger-menu-ul .sub-menu li a {
    display: block !important;

    padding: 12px 30px 12px 46px !important;

    background: transparent !important;
    color: #2d3733 !important;

    border: 0 !important;

    font-size: 15.5px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;

    transition:
      color 0.18s ease,
      background-color 0.18s ease;
  }

  #av-burger-menu-ul .sub-menu li a:hover,
  #av-burger-menu-ul .sub-menu li a:focus {
    background: rgba(103, 153, 56, 0.06) !important;
    color: #527c2d !important;
  }

}


/* =========================================================
   11. ENFOLD-MENÜBULLETS ENTFERNEN
   ========================================================= */

@media only screen and (max-width: 989px) {

  #av-burger-menu-ul .avia-bullet {
    display: none !important;
  }

}


/* =========================================================
   12. KLEINE SMARTPHONES
   ========================================================= */

@media only screen and (max-width: 479px) {

  .html_av-overlay-side .av-burger-overlay-scroll {
    width: 94vw !important;
  }

#av-burger-menu-ul::before {
  height: 108px;

  background-position: 22px center;
  background-size: 96px auto;
}

  #av-burger-menu-ul > li > a {
    min-height: 55px;

    padding: 16px 24px !important;

    font-size: 17px !important;
  }

  #av-burger-menu-ul .sub-menu li a {
    padding-left: 40px !important;
  }

}

/* =========================================================
   13. SCHNELLZUGRIFF / SERVICE-BEREICH
   ========================================================= */

@media only screen and (max-width: 989px) {


  /* =====================================================
     13.1 HINTERGRUND DES GESAMTEN SCHNELLZUGRIFFS
     ===================================================== */

  #av-burger-menu-ul > li.gcgf-mobile-service-title,
  #av-burger-menu-ul > li.gcgf-mobile-status,
  #av-burger-menu-ul > li.gcgf-mobile-cta-primary,
  #av-burger-menu-ul > li.gcgf-mobile-cta-secondary {
    background: rgba(132, 29, 91, 0.045) !important;
  }


  /* =====================================================
     13.2 ÜBERSCHRIFT "SCHNELLZUGRIFF"
     ===================================================== */

  #av-burger-menu-ul > li.gcgf-mobile-service-title {
    margin-top: 28px !important;
    padding-top: 18px !important;
  }

  #av-burger-menu-ul > li.gcgf-mobile-service-title > a {
    min-height: auto !important;

    padding: 10px 28px 16px !important;

    background: transparent !important;
    color: #841d5b !important;

    border: 0 !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;

    pointer-events: none;
    cursor: default;
  }


  /* =====================================================
     13.3 PLATZSTATUS
     Reduzierter Service-Link
     ===================================================== */

  #av-burger-menu-ul > li.gcgf-mobile-status {
    padding: 2px 28px 18px !important;
  }

  #av-burger-menu-ul > li.gcgf-mobile-status > a {
    display: flex !important;
    align-items: center !important;

    min-height: 44px !important;

    padding: 8px 4px !important;

    background: transparent !important;
    color: #46504b !important;

    border: 0 !important;

    font-size: 15.5px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
  }

/* Golfpin-Icon */
#av-burger-menu-ul > li.gcgf-mobile-status > a::before {
  content: "";

  width: 30px;
  height: 30px;

  margin-right: 10px;

  flex: 0 0 30px;

  background-image:
    url("https://golfclub-gifhorn.de/wp-content/uploads/2025/03/Golfpin_darkgrey_icon35.png");

  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px 30px;

  border-radius: 0;
}

  /* Pfeil rechts */
  #av-burger-menu-ul > li.gcgf-mobile-status > a::after {
    content: "→";

    margin-left: auto;

    color: #679938;

    font-size: 19px;
    font-weight: 400;
    line-height: 1;
  }

  #av-burger-menu-ul > li.gcgf-mobile-status > a:hover,
  #av-burger-menu-ul > li.gcgf-mobile-status > a:focus {
    color: #527c2d !important;
  }


  /* =====================================================
     13.4 PRIMÄRER CTA
     STARTZEIT RESERVIEREN
     ===================================================== */

  #av-burger-menu-ul > li.gcgf-mobile-cta-primary {
    padding: 0 28px 10px !important;
  }

  #av-burger-menu-ul > li.gcgf-mobile-cta-primary > a {
    display: flex !important;
    align-items: center !important;

    min-height: 52px !important;

    padding: 14px 18px !important;

    background: #679938 !important;
    color: #ffffff !important;

    border: 0 !important;
    border-radius: 10px !important;

    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;

    box-shadow: none !important;

    transition:
      background-color 0.18s ease,
      color 0.18s ease;
  }

  #av-burger-menu-ul > li.gcgf-mobile-cta-primary > a::after {
    content: "→";

    margin-left: auto;

    color: #ffffff;

    font-size: 20px;
    font-weight: 400;
    line-height: 1;
  }

  #av-burger-menu-ul > li.gcgf-mobile-cta-primary > a:hover,
  #av-burger-menu-ul > li.gcgf-mobile-cta-primary > a:focus {
    background: #5b892f !important;
    color: #ffffff !important;
  }


  /* =====================================================
     13.5 SEKUNDÄRE CTA-BUTTONS
     Greenfee / Schnupperkurs / Trackman usw.
     ===================================================== */

  #av-burger-menu-ul > li.gcgf-mobile-cta-secondary {
    padding: 0 28px 10px !important;
  }

  #av-burger-menu-ul > li.gcgf-mobile-cta-secondary > a {
    display: flex !important;
    align-items: center !important;

    min-height: 50px !important;

    padding: 13px 17px !important;

    /* bewusst hell auf dem leicht bordeauxfarbenen Bereich */
    background: #f8f8f4 !important;
    color: #2d3733 !important;

    border: 1px solid rgba(103, 153, 56, 0.55) !important;
    border-radius: 10px !important;

    font-size: 15.5px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;

    transition:
      background-color 0.18s ease,
      border-color 0.18s ease,
      color 0.18s ease;
  }

  #av-burger-menu-ul > li.gcgf-mobile-cta-secondary > a::after {
    content: "→";

    margin-left: auto;
    padding-left: 12px;

    color: #679938;

    font-size: 19px;
    font-weight: 400;
    line-height: 1;
  }

  #av-burger-menu-ul > li.gcgf-mobile-cta-secondary > a:hover,
  #av-burger-menu-ul > li.gcgf-mobile-cta-secondary > a:focus {
    background: rgba(255, 255, 255, 0.72) !important;
    border-color: #679938 !important;
    color: #527c2d !important;
  }


  /* =====================================================
     13.6 UNTERER ABSCHLUSS DES SERVICEBEREICHS
     ===================================================== */

  #av-burger-menu-ul > li.gcgf-mobile-cta-secondary:last-child {
    padding-bottom: 28px !important;
  }

}

/* =========================================================
   14. FAQ-REITER BEI GEÖFFNETEM MOBILE-MENÜ
   Mobile Navigation hat Vorrang
   ========================================================= */

@media only screen and (max-width: 989px) {

  /* FAQ-Reiter während geöffnetem Burger-Menü
     hinter die Navigation legen und deaktivieren */
  .av-burger-overlay-active .gcgf-side-tab {
    z-index: 1 !important;
    pointer-events: none !important;
  }

}