/* Mobile navigation styles extracted for clarity. */

/* Mobile fixed top bar (80px) */
@media (max-width: 991.98px) {
    /* Global blur overlay for mobile when any panel is open */
    body.open-overlay::before {
        content: '';
        position: fixed;
        left: 0; right: 0; bottom: 0;
        top: 60px; /* align with mobile header top */
        /* background: var(--dark-2-70); */
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        pointer-events: none;
        z-index: 1000; /* below header (9999), above page */
    }
  /* Hide desktop header logo in mobile view */
  header .header-content a.logo-link { display: none !important; }
  section.mobile-topbar {
    position: fixed;
    top: 0;
    left: 0px;
    right: 0px;
    height: 62px;
    padding-left: 40px;
    padding-right: 40px;
    width: auto;
    background: var(--darkbg);
    z-index: 1001;
    display: flex;
    align-items: center;
  }

  .topbar-shadow {
      position: fixed;
      top: 52px;
      left: 0px;
      right: 0px;
      height: 18px;
      padding-left: 0px;
      padding-right: 0px;
      width: 100%;
      z-index: 1001;
      align-items: center;
    }

  section.mobile-topbar .topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
  }

  section.mobile-topbar .menu-placeholder {
    width: 30px;
    height: 16px;
    margin-top: 10px;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
  }

  section.mobile-topbar .menu-placeholder span {
    display: block;
    height: 2px;
    background: var(--bright);
    border-radius: 0px;
    line-height: 80px;
    transition: transform 220ms ease, opacity 180ms ease, background-color 180ms ease;
  }

  section.mobile-topbar .topbar-logo {
    height: 73px;
    padding-top: 17px;
    line-height: 80px;
    width: auto;
  }

  section.mobile-topbar .topbar-logo .logo,
  section.mobile-topbar .topbar-logo svg {
    height: 38px;
    width: auto;
  }

  /* Burger -> Close (X) animation */
  section.mobile-topbar .menu-placeholder.is-active span { background: #D11010; }
  section.mobile-topbar .menu-placeholder.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  section.mobile-topbar .menu-placeholder.is-active span:nth-child(2) { opacity: 0; }
  section.mobile-topbar .menu-placeholder.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  section.mobile-topbar .logo-link { display: inline-flex; align-items: center; }

  /* Offset page content by bar height */
  main { padding-top: 80px; }
}

/* Base mobile nav (under 992px) */
@media (max-width: 991.98px) {

  .two-thumbs-range-container .thumb {
    width: 30px;
    height: 30px;
  }

    /* mobile menu */

    .mobile-toggle .left,
    .mobile-toggle .right {
        opacity: 0;
        height: 0;
        width: 0;
        overflow: hidden;
        transform: translateY(20px);
        transition: opacity 0.6s ease, transform 0.6s ease, height 0.6s ease;
    }

    /* Sichtbar wird ?ber Klasse 'visible' gesteuert */
    .mobile-toggle .left.visible,
    .mobile-toggle .right.visible {
        opacity: 1;
        height: auto;
        width: auto;
        transform: translateY(0);
    }

    body.page-template-template-fahrzeugsuche .mobile-toggle .left,
    body.single-standorte .mobile-toggle .left,
    .mobile-toggle .left.visible {
        margin-right: 10px;
    }

    body.page-template-template-fahrzeugsuche .mobile-toggle .right,
    body.single-standorte .mobile-toggle .right,
    .mobile-toggle .right.visible {
        margin-left: 10px;
    }

    section.mobile-toggle {
        position: fixed;
        z-index: 999;
        bottom: 15px;
        left: 0;
        right: 0;
        margin: auto;
        /* Fix width to viewport to avoid width jumps; animate via transform */
        width: calc(100% - 20px);
        height: auto;
        max-width: calc(100% - 20px);
        flex-wrap: wrap;

        padding: 20px;
        backdrop-filter: blur(12px);
        background: var(--dark-2-50);
        border-radius: 4px;
        border: 1px solid var(--bright-20);
        align-items: center;
        gap: 10px;
        width: fit-content;

        /* Smoother height transition to match open animation */
        transition: height 0.6s cubic-bezier(.22,1,.36,1);
        will-change: height;
    }

    /* Animated border accent for open state */
    section.mobile-toggle::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        border: 1px solid var(--bright-20);
        transform: scale(0.92);
        opacity: 0;
    }

    /* merged into unified glow animation further below */

    /* width/height moved to unified .active-menu block below */

    body.open-mobile-submenu .mobile-toggle {
        border: none;
        background: none;
        backdrop-filter: none;
    }

    body.single-standorte section.mobile-toggle .right,
    body.single-standorte section.mobile-toggle .left,
    body.page-template-template-fahrzeugsuche section.mobile-toggle .right,
    body.page-template-template-fahrzeugsuche section.mobile-toggle .left {
        min-width: 141px;
    }

    section.mobile-toggle .bar-btn {
        height: 100%;
        background-color: var(--blue);
        padding: 8px 21px;
        border-radius: 4px;
        min-height: 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2px;
        text-align: center;
    }

    section.mobile-toggle .bar-btn.active {
        background-color: var(--green);
    }

    section.mobile-toggle .bar-btn.dark {
        background-color: var(--dark-2-36);
    }

    section.mobile-toggle .left,
    section.mobile-toggle .right,
    section.mobile-toggle .group {
        height: 100%;
    }

    section.mobile-toggle svg {
        width: 60px;
        height: 60px;
    }

    /* Inline main menu container (shown when center button opens) */
    section.mobile-toggle .mobile-menu-main {
        display: none; /* revealed by .active-main-menu + .is-visible */
        opacity: 0;    /* avoid one-frame flash on mount */
        visibility: hidden;
        margin-bottom: 70px; /* leave room for bottom button */
        position: relative; /* ensure above morph/glow layers */
        z-index: 1;
        transition: opacity 200ms ease, transform 200ms ease;
        transform: translateY(8px);
        pointer-events: none;
        }

    /* reveal only once the panel is fully open */
    section.mobile-toggle.active-menu.active-main-menu.open-complete .mobile-menu-main.is-visible {
        display: block;
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        position: absolute;
        top: 20px; /* default spacing */
    }

    /* Ensure filter inside panel uses full width and not fixed overlay styles (only on Fahrzeugsuche) */
    body.page-template-template-fahrzeugsuche section.mobile-toggle .mobile-menu-main .filter-container {
        position: static;
        width: 100%;
        max-width: 100%;
        background: transparent;
        border: 0;
        padding: 0 10px 10px 10px;
        margin: 0;
    }

    section.mobile-toggle a {
      display: inline-block;
      text-decoration: none;
      color: var(--white);
    }

    /* Two-column button grid */
    section.mobile-toggle .mobile-menu-sub-wrapper-1 {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 25px;
        text-align: center;
    }
    section.mobile-toggle .mobile-menu-sub-wrapper-1 > div {
        flex: 0 0 calc((100% - 30px) / 2);
        font-size: 16px;
        text-align: center;
    }

    /* Full-width stacked buttons */
    section.mobile-toggle .mobile-menu-sub-wrapper-2 {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    section.mobile-toggle .mobile-menu-sub-wrapper-2 > div {
        width: calc(100% - 20px);
        font-size: 16px;
        text-align: center;
    }

        /* CORRECT A FIELD FOR BOTH */
        section.mobile-toggle .mobile-menu-sub-wrapper-1 > div a, section.mobile-toggle .mobile-menu-sub-wrapper-2 > div a {
          padding: 9px 10px 10px 10px;
          width: 100%;
          border-radius: 4px;
          -webkit-tap-highlight-color: rgba(255,255,255,0.2);
        }
        
        section.mobile-toggle .mobile-menu-sub-wrapper-2 > div a {
          border-radius: 20px;
        }
        

          section.mobile-toggle .mobile-menu-sub-wrapper-1 > div a:active, section.mobile-toggle .mobile-menu-sub-wrapper-2 > div a:active {
            background: white;
          }

        /* NORMALISE SVG FOR MENU */
        section.mobile-toggle .mobile-menu-sub-wrapper-1 > div img, section.mobile-toggle .mobile-menu-sub-wrapper-2 > div img {
          height: 24px;
          width: auto;
          padding-bottom: 3px;
        }


    /* Button styles inside the mobile main submenu */
    section.mobile-toggle .mobile-menu-main .mobile-menu-sub-wrapper-1 > div,
    section.mobile-toggle .mobile-menu-main .mobile-menu-sub-wrapper-2 > div {
        border-radius: 4px;
        background: var(--color_bright_1_raster20, rgba(255, 255, 255, 0.40));
    }

    /* Override for stacked buttons (sub-wrapper-2) */
    section.mobile-toggle .mobile-menu-main .mobile-menu-sub-wrapper-2 > div {
        border-radius: 20px;
        backdrop-filter: blur(12.5px);
    }

    /* Keep center toggle button visually fixed at bottom during open/close */
    section.mobile-toggle .mobile-toggle-wrap { position: relative; z-index: 1; }
    section.mobile-toggle.active-menu .mobile-toggle-wrap,
    section.mobile-toggle.closing .mobile-toggle-wrap {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0px; /* matches section padding for consistent baseline */
    }
    /* Ensure whole bar remains anchored during close (prevents content jump) */
    section.mobile-toggle.active-menu .mobile-menu-bar,
    section.mobile-toggle.closing .mobile-menu-bar {
        position: absolute;
        bottom: 20px;
        left: 0;
        right: 0;
        justify-content: center;
    }

    /* Fullscreen submenu overlay in mobile */
    header .submenu {
        position: fixed;
        width: 100%;
        height: calc(100vh - 40px);
        left: 0px !important;
        top: 60px;
        bottom: 0;
        right: 10px;
        bottom: 0;
        background: transparent;
        backdrop-filter: unset;
        /* Important: prevent scroll on the container so ::before backdrop-filter can render reliably on mobile.
           We move scrolling to the inner content wrapper below. */
        overflow: hidden;
        max-height: 100vh;
        padding-bottom: 0;
        padding-top: 40px;
        transform-origin: center center;
        will-change: transform, opacity;
        border-radius: 0;
        /* Ensure overlay stacks above topbar (z:1001) and isolates backdrop compositing */
        z-index: 1002;
        isolation: isolate;
        animation: submenuCollapse 0.3s ease-in-out forwards;
    }

    /* Submenu open animation with soft overshoot */
    /* Ensure submenu is mounted but visually hidden until animated */
    header .submenu {
        opacity: 0;
        visibility: hidden;
    }

    /* Container motion (scale/position) */
    body.open-overlay header .submenu.is-visible {
        animation: mobileSubmenuIn 10ms cubic-bezier(.22,1,.36,1) both;
        opacity: 1; /* fade container in */
        visibility: visible;
        animation: submenuExpand 0.3s ease-in-out forwards;
        overflow-y: scroll;
    }

    @keyframes submenuExpand {
      0% {  opacity: 0; }
      100% {  opacity: 1; }
    }

    @keyframes submenuCollapse {
      0% {  opacity: 1; }
      100% {  opacity: 0; }
    }

    /* Defer submenu inner content reveal to near end of the motion */
    body.open-overlay header .submenu.is-visible > * {
        opacity: 0;
        transition: opacity 10ms ease;
        transition-delay: var(--submenu-content-delay, 300ms);
    }

    body.open-overlay header .submenu.is-visible.show-content > * {
        opacity: 1;
    }

    section.standort-sales .standorte-filter,
    section.standort-filter .standorte,
    body.page-template-template-fahrzeugsuche section.fahrzeugsuche .filter-container {
        position: fixed;
        left: 10px;
        display: block;
        overflow: auto;
        background-color: var(--dark-2-70); /* muss RGBA oder transparentes var() sein */
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px); /* für Safari */
        padding-bottom: 400px;
        width: calc(100% - 20px);
        z-index: 99;
        border-radius: 4px;
    }

    body.page-template-template-fahrzeugsuche section.fahrzeugsuche .filter-container {
        height: 100vh;
        padding-top: 90px;
        top: 0;
    }

    section.standort-sales .standorte-filter,
    section.standort-filter .standorte {
        padding-bottom: 140px;
        bottom: 20px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        border: 1px solid var(--bright-20);
        border-radius: 4px;
    }

    section.standort-filter .standorte {
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 20px;
        margin: 0;
    }

    section.standort-sales .standorte-filter {
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
    }

    section.standort-sales .standorte-filter h3 {
        display: none;
    }

    section .sticky-filters .filter-box {
        padding: 0;
        background: none;
    }


    section.standort-filter .standorte a {
        width: calc(50% - 5px);
    }

    header .submenu.main-submenu {
      width: 100%;
      height: 100%;
    }

    header .submenu.main-submenu>.menu-elements {
        border-bottom: none;
        width: auto;
        height: auto;
        /* Enable scrolling inside, so the outer container can stay non-scrollable for backdrop-filter. */
        overflow: auto;
        /* viewport minus top offset (60px) and bottom margin (40px) and padding-top (~20px) */
        /* max-height: calc(100vh - 90px); */
    }

    /* Mobile overlay: mirror bottom bar blur layer setup */
    header .submenu.main-submenu::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 4px;
        background: var(--dark-2-70);
        border: 1px solid var(--bright-20);
        pointer-events: none;
        z-index: 0;
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border: 0px;
        border-radius: 0;
        top: 0;
        height: auto;
    }

    header .logo-link svg {
        max-width: 121px;
    }

    section.mobile-toggle svg rect {
        fill: var(--blue);
        stroke: none;
        /* fill-opacity: 0.75; */
        fill-opacity: 1;
    }

    section.mobile-toggle .contact-links svg rect {
        fill: var(--dark-2-36);
    }

    section.mobile-toggle .contact-links .contact-links-mail svg rect {
        fill: var(--green) !important;
    }

    section.mobile-toggle .fahrzeuge-menu svg rect {
        fill: var(--green) !important;
    }

    section.mobile-toggle svg path {
        fill: var(--bright);
    }

    section.mobile-toggle.active-main-menu .mobile-toggle-wrap svg rect,
    section.mobile-toggle span.active svg rect {
        fill: #D11010BF;
    }

        section.mobile-toggle.active-main-menu .close-icon.green svg rect {
          fill: var(--green);
        }

    section.mobile-toggle .close-icon { display: none; }
    section.mobile-toggle .open-icon { display: block; }
    section.mobile-toggle.active-main-menu .close-icon { display: block; }
    section.mobile-toggle.active-main-menu .open-icon { display: none; }
    section.mobile-toggle .open-icon.icon-wobble { animation: iconWobble 420ms ease-out; }

    header .submenu .menu-elements ul.sub-menu {
        left: unset;
        top: unset;
        width: 100%;
        position: relative;
        margin-left: 0;
        margin-top: 20px;
        margin-bottom: 20px;
    }
}

@keyframes mobileSubmenuIn {
    0%   { transform: scale(0.94); opacity: 0; }
    60%  { transform: scale(1.04); opacity: 1; }
    85%  { transform: scale(0.99); }
    100% { transform: scale(1);    opacity: 1; }
}

/* Micro wobble for icon swap */
@keyframes iconWobble {
  0%   { transform: translateZ(0) scale(1) rotate(0); }
  40%  { transform: translateZ(0) scale(1.08) rotate(-1deg); }
  70%  { transform: translateZ(0) scale(0.98) rotate(0.6deg); }
  100% { transform: translateZ(0) scale(1) rotate(0); }
}

/* Tiny tweaks */
@media (max-width: 475.98px) {
    /* Example (kept for quick reference):
    section.mobile-toggle .bar-btn span { display: none; } */
}

@media(max-width: 400px) {
    body.single-standorte section.mobile-toggle .right,
    body.single-standorte section.mobile-toggle .left,
    body.page-template-template-fahrzeugsuche section.mobile-toggle .right,
    body.page-template-template-fahrzeugsuche section.mobile-toggle .left {
        min-width: 122px;
    }
    body.single-standorte section.mobile-toggle,
    body.page-template-template-fahrzeugsuche section.mobile-toggle{
        padding: 10px;
    }

    section.mobile-toggle { max-width: 100%; }
    section.mobile-toggle .bar-btn { padding: 8px 10px; }
}

/* ==========================================================
   MOBILE NAV – ANIMATION CONFIG (CSS variables)
   Cross-ref JS: wp-content/themes/riess/assets/js/nav-mobile.js (startManualClose)
   - Tweak durations/ease here; edit keyframes below for shape/motion.
   ========================================================== */
:root {
  --nav-open-duration: 0.50s;
  --nav-close-duration: 0.90s;
  --nav-glow-duration: 0.76s;
  --nav-ease: cubic-bezier(0.25, 1, 0.5, 1);
}

/* ==========================================================
   MODERN MORPH OPEN/CLOSE ? Smooth side squeeze + wobble
   (GPU: transform; optional clip-path:path() morph on capable browsers)
   ========================================================== */

/* Performance hints for the panel itself */
section.mobile-toggle {
  transform-origin: bottom center;
  overflow: hidden;
  will-change: transform, border-radius, box-shadow, clip-path;
}

/* Transform timeline: soft rise + elastic settle (expands/shrinks X & Y) */
@keyframes navPanelOpenTransform {
  0%   { transform: translateY(0px) scale(0.90, 0.86); height: auto; min-height: 120px; width: auto; }
  30%  { transform: translateY(-6px) scale(1.04, 1.03); height: auto; min-height: 550px;}
  60%  { transform: translateY(2px)  scale(0.995, 0.992); height: auto; width: calc(100% - 20px);}
  100% { transform: translateY(0)   scale(1, 1); height: auto; min-height: 550px; width: calc(100% - 20px);}
}

/* Variant for Fahrzeugsuche/Standorte: panel fills viewport height minus 90px */
@keyframes navPanelOpenTransformFull {
  0%   { transform: translateY(0px) scale(0.90, 0.86); height: auto; min-height: 120px; width: auto; }
  30%  { transform: translateY(-6px) scale(1.04, 1.03); height: auto; min-height: calc(100% - 90px); }
  60%  { transform: translateY(2px)  scale(0.995, 0.992); height: auto; width: calc(100% - 20px); min-height: calc(100% - 90px); }
  100% { transform: translateY(0)   scale(1, 1); height: auto; min-height: calc(100% - 90px); width: calc(100% - 20px); }
}

@keyframes navPanelCloseTransform {
  0%   { transform: translateY(0)    scale(1, 1); }
  45%  { transform: translateY(12px) scale(0.92, 0.90); }
  100% { transform: translateY(20px) scale(0.88, 0.86); }
}

/* Clip-path morph: sides start pinched inward, then relax to rectangle */
@keyframes navPanelOpenClip {
  0% {
    /* Stronger concave sides (pinched) */
    clip-path: path('M0% 12% C 14% 12%, 12% 14%, 14% 20% C 9% 48%, 9% 52%, 14% 80% C 12% 86%, 14% 88%, 0% 88% L 100% 88% C 86% 88%, 88% 86%, 86% 80% C 91% 52%, 91% 48%, 86% 20% C 88% 14%, 86% 12%, 100% 12% L 0% 12% Z');
  }
  35% {
    /* Overshoot to almost full rectangle */
    clip-path: path('M0% 0% C 4% 0%, 8% 2%, 10% 10% C 8% 48%, 8% 52%, 10% 90% C 8% 98%, 4% 100%, 0% 100% L 100% 100% C 96% 100%, 92% 98%, 90% 90% C 92% 52%, 92% 48%, 90% 10% C 92% 2%, 96% 0%, 100% 0% L 0% 0% Z');
  }
  65% {
    /* Settle with very subtle indentation */
    clip-path: path('M0% 2% C 6% 2%, 8% 3%, 10% 8% C 8% 48%, 8% 52%, 10% 92% C 8% 97%, 6% 98%, 0% 98% L 100% 98% C 94% 98%, 92% 97%, 90% 92% C 92% 52%, 92% 48%, 90% 8% C 92% 3%, 94% 2%, 100% 2% L 0% 2% Z');
  }
  100% { clip-path: path('M0% 0% H100% V100% H0% Z'); }
}

@keyframes navPanelCloseClip {
  0% {
    /* start as rectangle */
    clip-path: path('M0% 0% H100% V100% H0% Z');
  }
  20% {
    /* begin gentle inward bend */
    clip-path: path('M0% 3% C 6% 3%, 7% 5%, 9% 10% C 7% 48%, 7% 52%, 9% 90% C 7% 95%, 6% 97%, 0% 97% L 100% 97% C 94% 97%, 93% 95%, 91% 90% C 93% 52%, 93% 48%, 91% 10% C 93% 5%, 94% 3%, 100% 3% L 0% 3% Z');
  }
  60% {
    /* medium pinch */
    clip-path: path('M0% 7% C 10% 7%, 10% 9%, 12% 15% C 8% 48%, 8% 52%, 12% 85% C 10% 91%, 10% 93%, 0% 93% L 100% 93% C 90% 93%, 90% 91%, 88% 85% C 92% 52%, 92% 48%, 88% 15% C 90% 9%, 90% 7%, 100% 7% L 0% 7% Z');
  }
  100% {
    /* strong pinch end state */
    clip-path: path('M0% 12% C 14% 12%, 12% 14%, 14% 20% C 9% 48%, 9% 52%, 14% 80% C 12% 86%, 14% 88%, 0% 88% L 100% 88% C 86% 88%, 88% 86%, 86% 80% C 91% 52%, 91% 48%, 86% 20% C 88% 14%, 86% 12%, 100% 12% L 0% 12% Z');
  }
}

/* Edge light/glow when opening for a subtle premium feel */
@keyframes navPanelGlow {
  0%   { opacity: 0; transform: scale(0.94); filter: blur(0.4px); }
  35%  { opacity: 0.55; transform: scale(1.03); filter: blur(0.8px); }
  70%  { opacity: 0.25; transform: scale(0.995); filter: blur(0.6px); }
  100% { opacity: 0; transform: scale(1); filter: blur(0.4px); }
}

/* Don?t block interactions (close button) */
section.mobile-toggle::before,
section.mobile-toggle::after { pointer-events: none; }

/* Background morph layer (sits under content) */
section.mobile-toggle::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 0;
  background: var(--dark-2-36);
  border: 1px solid var(--bright-20);
  opacity: 0; /* shown only during open/close */
  clip-path: path('M0% 0% H100% V100% H0% Z'); /* rectangle */
  z-index: 0;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Glow layer during open */
section.mobile-toggle::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--bright-20);
  box-shadow: 0 0 22px rgba(255,255,255,0.12);
  opacity: 0;
  transform: scale(0.94);
}

/* Apply opening animation */
section.mobile-toggle.active-menu {
  /* Maintain full-width active layout */
  height: auto;
  min-height: 120px;
  width: calc(100% - 20px);
  overflow: hidden;
  /* Opening transform animation */
  animation-name: navPanelOpenTransform;
  animation-duration: var(--nav-open-duration);
  animation-timing-function: var(--nav-ease);
  animation-fill-mode: both;
  /* keep button from visually sliding as height changes */
  transition: height 0.2s linear, width 0.2s linear;
}

/* Open glow */
section.mobile-toggle.active-menu::after,
section.mobile-toggle.active-main-menu::after {
  animation: navPanelGlow var(--nav-glow-duration) var(--nav-ease) forwards;
}

/* Apply closing animation */
section.mobile-toggle.closing {
  animation-name: navPanelCloseTransform;
  animation-duration: var(--nav-close-duration);
  animation-timing-function: var(--nav-ease);
  animation-fill-mode: both;
  /* keep button from visually sliding as height changes */
  transition: height 0.2s linear, width 0.3s linear;
}

/* While animating, let ::before draw shape; keep base transparent */
/* Only hide base fill/border when clip-path morph is available */

/* Upgrade: layer clip-path morph where supported */
@supports (clip-path: path('M0% 0% H100% V100% H0% Z')) {
  section.mobile-toggle.active-menu,
  section.mobile-toggle.closing {
    background: transparent;
    border-color: transparent;
  }
  section.mobile-toggle.active-menu::before {
    animation: navPanelOpenClip var(--nav-open-duration) var(--nav-ease) both;
    opacity: 1;
  }
  section.mobile-toggle.closing::before {
    animation: navPanelCloseClip var(--nav-close-duration) var(--nav-ease) both;
    opacity: 1;
  }
}





/* Standorte list inside panel */
section.mobile-toggle .mobile-menu-main .standorte {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px;
}

/* Two-column layout for Standorte items inside the mobile panel */
section.mobile-toggle .mobile-menu-main .standorte > a {
  display: block;
  flex: 0 0 calc((100% - 10px) / 2);
  max-width: calc((100% - 10px) / 2);
  margin-bottom: -10px;
  padding-top: 3px;
}
section.mobile-toggle .mobile-menu-main .standorte > a .standort,
section.mobile-toggle .mobile-menu-main .standorte > .standort {
  width: 100%;
}

.mobile-standorte-content {
  top: -15px;
}

.mobile-standorte-content .standort-text h3 {
  font-size: 14px;
  text-align: center;
}

/* Prevent initial flash of the legacy mobile overlay on Standorte pages */
@media (max-width: 991.98px) {
  body.single-standorte section.standort-filter .standorte,
  body.page-template-template-alle-standorte section.standort-filter .standorte {
    display: none !important;
  }

  body.page-template-template-fahrzeugsuche section.mobile-toggle.active-menu.active-main-menu.open-complete .mobile-menu-main.is-visible,
  body.single-standorte section.mobile-toggle.active-menu.active-main-menu.open-complete .mobile-menu-main.is-visible,
  body.page-template-template-alle-standorte section.mobile-toggle.active-menu.active-main-menu.open-complete .mobile-menu-main.is-visible {
    top: 15px;    /* requested top spacing for these pages */
    bottom: 40px; /* match existing bottom spacing */
    left: 0;
    right: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.page-template-template-fahrzeugsuche .global-counts-text .left {
      display: none;
    }

    body.page-template-template-fahrzeugsuche .checkbox-brands.brands {
      gap: 15px;
    }

    body.page-template-template-fahrzeugsuche .filter-box {
      padding: 10px;
      background: none;
    }

    body.page-template-template-fahrzeugsuche .filter-container > h3 {
      display: none;
    }
}


/* Use the full-height open animation on Fahrzeugsuche and Standorte pages only */
body.page-template-template-fahrzeugsuche section.mobile-toggle.active-menu,
body.single-standorte section.mobile-toggle.active-menu,
body.page-template-template-alle-standorte section.mobile-toggle.active-menu {
  animation-name: navPanelOpenTransformFull;
}