/** Shopify CDN: Minification failed

Line 153:0 Expected "}" to go with "{"

**/
/* =========================================================
   ANIMATION – Logo Spin (optional, aktuell nicht genutzt)
========================================================= */

@keyframes mobile-logo-jump-rotate {
  0% {
    transform: scale(1) rotate(0deg);
  }
  100% {
    transform: scale(1) rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  @keyframes mobile-logo-jump-rotate {
    0%, 100% {
      transform: scale(1) rotate(0deg);
    }
  }
}


/* =========================================================
   MOBILE HEADER – CLEAN & SAFE
   (Keine Scroll-Locks, iOS-freundlich)
========================================================= */

@media (max-width: 989px) {

  /* ---------------------------------
     1) Desktop-Menüs ausblenden
  ---------------------------------- */

  header .header__inline-menu,
  header .header__meta-links {
    display: none !important;
  }


  /* ---------------------------------
     2) HEADER-LAYOUT – Burger / Logo / Icons
  ---------------------------------- */

  header.header--mobile-center {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    /* weiche Höhe-Transition (für Shrink-Effekt) – nur Optik */
    transition: padding 0.8s cubic-bezier(0.25, 0.1, 0.1, 1);
  }

  /* Linke Seite: Burger / Drawer */
  header.header--mobile-center header-drawer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 0 0 auto !important;
  }

  /* Mitte: Logo (flexibler Bereich) */
  header.header--mobile-center .header__heading {
    flex: 1 1 auto !important;
    margin: 0 !important;
    text-align: center !important;
  }

  header.header--mobile-center .header__heading a,
  header.header--mobile-center .header__heading-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Rechte Seite: Icons (Suche / Warenkorb) */
  header.header--mobile-center .header__icons,
  header.header--mobile-center .header__right-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
  }


  /* ---------------------------------
     3) LOGO – Größe + Shrink beim Scrollen
  ---------------------------------- */

  /* Basiszustand Logo */
  header.header--mobile-center .header__heading-logo {
    display: block !important;
    height: auto !important;
    max-height: 56px !important;
    transition:
      max-height 0.8s cubic-bezier(0.25, 0.1, 0.1, 1),
      transform   0.8s cubic-bezier(0.25, 0.1, 0.1, 1);
  }

  /* GANZ OBEN – Logo größer (Klasse aktiv) */
  .header-wrapper--border-bottom header.header--mobile-center {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .header-wrapper--border-bottom header.header--mobile-center .header__heading-logo {
    max-height: 70px !important;
    transform: scale(1.05);
  }

  /* GESCROLLT – Logo kleiner (Klasse fehlt) */
  .header-wrapper:not(.header-wrapper--border-bottom)
  header.header--mobile-center {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .header-wrapper:not(.header-wrapper--border-bottom)
  header.header--mobile-center .header__heading-logo {
    max-height: 32px !important;
    transform: scale(0.75);
  }

  /* Feintuning – Logo optisch nach rechts schieben */
  a.header__heading-link {
    transform: translateX(55px) !important;
  }


  /* ---------------------------------
     4) TAP-HIGHLIGHT / FOKUS BEIM LOGO ENTFERNEN
  ---------------------------------- */

  .header__heading a,
  .header__heading-link {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    background: transparent !important;
  }

  .header__heading a:focus,
  .header__heading a:active,
  .header__heading-link:focus,
  .header__heading-link:active {
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }