/* ==========================================================================
   TFC Holland – Vue WordPress Navigation

   Diese Datei nach menu.css laden.

   Das Styling wird direkt über #vue-wordpress-menu gekapselt und benötigt
   keine von Vue erzeugte menuStyle-Klasse.

   Optionale Konfiguration des Dropdown-Typs am Vue-Mountpoint:

   data-settings='{"subNavigationStyle":"megamenu"}'

   Für den Kontakt-Button im WordPress-Menü unter
   "Ansicht anpassen" -> "CSS-Klassen" am Menüpunkt diese Klasse eintragen:

   tfc-menu-contact

   Für das dreispaltige Megamenü mit Bild links, H3-Überpunkt und
   Unterpunkten rechts diese Klasse am übergeordneten Menüpunkt eintragen:

   tfc-megamenu-title

   Für Menüpunkte, die ausschließlich auf Tablet und Mobile bis 1100px
   sichtbar sein sollen, im WordPress-Menü diese Klasse eintragen:

   tfc-mobile-only

   Voraussetzung: Die Menü-API/Vue-Komponente muss WordPress-CSS-Klassen an
   das gerenderte Menüelement oder dessen Link weiterreichen.
   ========================================================================== */


/* ==========================================================================
   Design Tokens der Navigation
   ========================================================================== */

#vue-wordpress-menu .main-menu-container {
  --tfc-menu-pill-radius: 999px;
  --tfc-menu-card-radius: 20px;
  --tfc-menu-height: 80px;
  --tfc-menu-inline-gap: clamp(0.4rem, 0.8vw, 1rem);

  font-family: var(--font-family-base);
  font-synthesis: none;
}

#vue-wordpress-menu .main-menu-container,
#vue-wordpress-menu .main-menu-container *,
#vue-wordpress-menu .main-menu-container *::before,
#vue-wordpress-menu .main-menu-container *::after {
  box-sizing: border-box;
}


/* ==========================================================================
   Hauptnavigation / Desktop-Pill
   ========================================================================== */

#vue-wordpress-menu .main-menu-container {
  background: transparent;
  pointer-events: none;
}

#vue-wordpress-menu .main-menu-container > .main-menu {
  position: relative;
  width: fit-content;
  max-width: calc(100% - 40px);
  min-height: var(--tfc-menu-height);
  margin: 16px auto 0;
  padding: 20px 30px 20px 30px;

  gap: 0;
  grid-template-columns: auto auto min-content;
  overflow: visible;

  background: var(--color-bg-inverted);
  color: var(--color-fg-inverted);
  border-radius: var(--tfc-menu-pill-radius);
  box-shadow: 0 10px 32px rgb(0 0 0 / 16%);

  pointer-events: auto;
}

#vue-wordpress-menu .main-menu-container > .main-menu .menu-brand {
  width: 5rem;
  min-width: 5rem;
  min-height: 40px;
  background-position: left center;
}

#vue-wordpress-menu .main-menu-container > .main-menu .menu-items {
  align-items: center;
  justify-content: flex-start;
  gap: clamp(0.1rem, 0.35vw, 0.45rem);
  padding-inline: 0;
}

/* 50px Abstand: Logo -> normale Menüpunkte. */
#vue-wordpress-menu
  .main-menu-container
  > .main-menu
  .menu-items
  > .main-menu-item:first-child {
  margin-left: 3.125rem;
}

/* Kontakt gehört wieder unmittelbar zur Gruppe der Menüpunkte. */
#vue-wordpress-menu
  .main-menu-container
  > .main-menu
  .menu-items
  > .main-menu-item.tfc-menu-contact {
  margin-left: 0;
}

#vue-wordpress-menu .main-menu-container .main-menu-item {
  position: relative;
}

#vue-wordpress-menu
  .main-menu-container
  .main-menu-item
  .menu-item-link-wrapper
  > .menu-item-link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0.5rem 0.6rem;

  color: var(--color-fg-inverted);
  border-radius: var(--tfc-menu-pill-radius);

  font-family: var(--font-family-base);
  font-size: 1.25rem;
  font-weight: var(--font-weight-book);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;

  transition:
    color 200ms ease,
    background-color 200ms ease;
}

/* Chevron nur an Menüpunkten, die tatsächlich Unterpunkte besitzen. */
#vue-wordpress-menu
  .main-menu-container
  .menu-item-link-wrapper.has-children
  > .menu-item-link::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 180ms ease;
}

#vue-wordpress-menu
  .main-menu-container
  .main-menu-item--subnav-visible
  .menu-item-link-wrapper.has-children
  > .menu-item-link::after {
  transform: translateY(2px) rotate(225deg);
}

#vue-wordpress-menu
  .main-menu-container
  .main-menu-item
  .menu-item-link:hover,
#vue-wordpress-menu
  .main-menu-container
  .main-menu-item
  .menu-item-link:focus-visible,
#vue-wordpress-menu
  .main-menu-container
  .main-menu-item.current-menu-item
  .menu-item-link,
#vue-wordpress-menu
  .main-menu-container
  .main-menu-item.current-menu-ancestor
  .menu-item-link,
#vue-wordpress-menu
  .main-menu-container
  .main-menu-item--subnav-visible
  .menu-item-link-wrapper
  > .menu-item-link {
  color: var(--color-fg-brand);
}

#vue-wordpress-menu
  .main-menu-container
  .main-menu-item
  .menu-item-link:focus-visible,
#vue-wordpress-menu .main-menu-container .language-dropdown .active-language:focus-visible,
#vue-wordpress-menu .main-menu-container .menu-button-wrapper:focus-visible {
  outline: 3px solid var(--color-border-focus);
  outline-offset: 3px;
}


/* ==========================================================================
   Kontakt-Button

   Robust für drei mögliche Ausgaben der WordPress-CSS-Klasse:
   - auf .main-menu-item
   - auf einem Wrapper
   - direkt auf dem Link
   ========================================================================== */

#vue-wordpress-menu
  .main-menu-container
  .main-menu-item.tfc-menu-contact
  .menu-item-link-wrapper
  > .menu-item-link,
#vue-wordpress-menu .main-menu-container .tfc-menu-contact .menu-item-link,
#vue-wordpress-menu .main-menu-container a.tfc-menu-contact {
  min-height: 40px;
  padding: 0.55rem 1rem;

  background: var(--color-bg-brand);
  color: var(--color-white);
  border-radius: var(--tfc-menu-pill-radius);

  font-weight: var(--font-weight-medium);
}

#vue-wordpress-menu
  .main-menu-container
  .main-menu-item.tfc-menu-contact
  .menu-item-link:hover,
#vue-wordpress-menu
  .main-menu-container
  .main-menu-item.tfc-menu-contact
  .menu-item-link:focus-visible,
#vue-wordpress-menu .main-menu-container .tfc-menu-contact .menu-item-link:hover,
#vue-wordpress-menu
  .main-menu-container
  .tfc-menu-contact
  .menu-item-link:focus-visible,
#vue-wordpress-menu .main-menu-container a.tfc-menu-contact:hover,
#vue-wordpress-menu .main-menu-container a.tfc-menu-contact:focus-visible {
  background: var(--color-white);
  color: var(--color-darkgrey);
}


/* ========================================================================== 
   Nur Tablet / Mobile

   WordPress-Klasse am gewünschten Menüpunkt: tfc-mobile-only
   ========================================================================== */

@media (min-width: 1100.02px) {
  #vue-wordpress-menu .main-menu-container
    .main-menu-item.tfc-mobile-only,
  #vue-wordpress-menu .main-menu-container
    .main-menu-item:has(> .menu-item-link-wrapper > .menu-item-link.tfc-mobile-only),
  #vue-wordpress-menu .main-menu-container
    .sub-nav-item.tfc-mobile-only,
  #vue-wordpress-menu .main-menu-container
    .sub-nav-item:has(> a.tfc-mobile-only) {
    display: none !important;
  }
}


/* ==========================================================================
   Desktop-Reparatur für den alten 1600px-Breakpoint

   menu.css blendet die Desktop-Navigation bereits unter 1600px aus. TFC
   verwendet die Desktop-Pill bis 1100px und übernimmt darunter die bereits
   vorhandene mobile Vue-Navigation.
   ========================================================================== */

@media (min-width: 1100.02px) and (max-width: 1600px) {
  #vue-wordpress-menu .main-menu-container > .main-menu,
  #vue-wordpress-menu
    .main-menu-container
    > .main-menu.default-language-switch-dropdown,
  #vue-wordpress-menu
    .main-menu-container
    > .main-menu.default-language-switch-default,
  #vue-wordpress-menu
    .main-menu-container
    > .main-menu.default-language-switch-hidden {
    height: var(--tfc-menu-height);
    min-height: var(--tfc-menu-height);
    padding: 20px 30px 20px 30px;
    grid-template-columns: auto auto min-content;
  }

  #vue-wordpress-menu
    .main-menu-container
    > .main-menu
    .menu-brand {
    height: 40px;
    min-height: 40px;
  }

  #vue-wordpress-menu
    .main-menu-container
    > .main-menu
    .menu-items {
    display: flex !important;
    flex-wrap: nowrap;
  }

  #vue-wordpress-menu
    .main-menu-container
    > .main-menu
    .menu-button-wrapper,
  #vue-wordpress-menu
    .main-menu-container
    > .main-menu
    .mobile-menu {
    display: none !important;
  }

  #vue-wordpress-menu
    .main-menu-container
    > .main-menu
    .main-menu__extras
    .language-switch {
    display: flex !important;
  }
}


/* ==========================================================================
   Dropdowns – schwebende Cards/Pills (Variante B)

   Die Sichtbarkeit steuert weiterhin menu.css über
   .main-menu-item--subnav-visible.
   ========================================================================== */

@media (min-width: 1100.02px) {
  #vue-wordpress-menu .main-menu-container .main-menu-item > .main-menu-sub-nav {
    top: calc(100% + 28px);
    right: auto;
    left: 50%;
    width: max-content;
    min-width: min(320px, calc(100vw - 40px));
    max-width: min(820px, calc(100vw - 40px));
    overflow: visible;

    background: var(--color-white);
    color: var(--color-darkgrey);
    border-radius: var(--tfc-menu-card-radius);
    z-index: 2;
    box-shadow: 0 16px 44px rgb(0 0 0 / 18%);

    transform: translateX(-50%) translateY(8px);
    transition:
      opacity 180ms ease,
      visibility 180ms ease,
      transform 180ms ease;
  }

  /* Schließt den optischen Abstand, ohne die Card sichtbar anzubinden. */
  #vue-wordpress-menu
    .main-menu-container
    .main-menu-item
    > .main-menu-sub-nav::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: 28px;
  }

  #vue-wordpress-menu .main-menu-container
    .main-menu-item.main-menu-item--subnav-visible
    > .main-menu-sub-nav {
    transform: translateX(-50%) translateY(0);
  }

  #vue-wordpress-menu .main-menu-container
    .main-menu-item
    > .main-menu-sub-nav
    > .main-menu-sub-nav__content {
    width: min(760px, calc(100vw - 40px));
    min-width: 0;
    min-height: 0;
    padding: 1rem;
    overflow: hidden;

    background: var(--color-white);
    border-radius: inherit;
  }

  #vue-wordpress-menu .main-menu-container
    .main-menu-item
    > .main-menu-sub-nav
    > .main-menu-sub-nav__content::before,
  #vue-wordpress-menu .main-menu-container
    .main-menu-item
    > .main-menu-sub-nav
    > .main-menu-sub-nav__content::after {
    display: none;
  }

  #vue-wordpress-menu .main-menu-container .main-menu-sub-nav .sub-nav-items {
    gap: 0.35rem;
    padding: 0;
  }

  /*
     Optionales TFC-Megamenü. Die Klasse "tfc-megamenu-title" wird in
     WordPress am übergeordneten Menüpunkt (z. B. "Sortiment") eingetragen.

     Die DOM-Reihenfolge der Vue-Komponente bleibt unverändert. Grid ordnet
     die vorhandenen Bereiche nur optisch neu an:
     Bild links | Überpunkt im H3-Stil | Unterpunkte rechts.
  */
  #vue-wordpress-menu .main-menu-container
    .main-menu-item.tfc-megamenu-title
    > .main-menu-sub-nav
    > .main-menu-sub-nav__content {
    display: grid;
    grid-template-areas: "preview title items";
    grid-template-columns:
      minmax(13rem, 1.2fr)
      minmax(8.75rem, 0.65fr)
      minmax(12rem, 1fr);
    align-items: start;
    column-gap: clamp(1.5rem, 2.5vw, 2.5rem);
  }

  #vue-wordpress-menu .main-menu-container
    .main-menu-item.tfc-megamenu-title
    .sub-nav-preview-wrapper {
    grid-area: preview;
    min-width: 0;
  }

  #vue-wordpress-menu .main-menu-container
    .main-menu-item.tfc-megamenu-title
    .sub-nav-title {
    grid-area: title;
    align-self: center;
    min-width: 0;
  }

  #vue-wordpress-menu .main-menu-container
    .main-menu-item.tfc-megamenu-title
    .sub-nav-title
    .megamenu-title-wrapper {
    width: 100%;
  }

  #vue-wordpress-menu .main-menu-container
    .main-menu-item.tfc-megamenu-title
    .sub-nav-items {
    display: grid;
    grid-area: items;
    min-width: 0;
    align-content: start;
  }

  #vue-wordpress-menu .main-menu-container
    .main-menu-item.tfc-megamenu-title
    .sub-nav-preview-item {
    width: 100%;
    min-height: 11rem;
    aspect-ratio: 4 / 3;
    background-position: center;
    background-size: cover;
  }

  #vue-wordpress-menu .main-menu-container .main-menu-sub-nav a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0.5rem 0.75rem;

    color: var(--color-darkgrey);
    border-radius: var(--tfc-menu-pill-radius);

    font-family: var(--font-family-base);
    font-size: 1rem;
    font-weight: var(--font-weight-book);
    line-height: 1.3;
    text-decoration: none;

    transition:
      color 180ms ease,
      background-color 180ms ease;
  }

  #vue-wordpress-menu .main-menu-container .main-menu-sub-nav a:hover,
  #vue-wordpress-menu .main-menu-container .main-menu-sub-nav a:focus-visible,
  #vue-wordpress-menu .main-menu-container .main-menu-sub-nav a.active,
  #vue-wordpress-menu .main-menu-container .main-menu-sub-nav .current-menu-item > a {
    background: var(--color-bg-brand);
    color: var(--color-white);
  }

  /* H3-Darstellung des Überpunkts; der Link bleibt weiterhin klickbar. */
  #vue-wordpress-menu .main-menu-container
    .main-menu-item.tfc-megamenu-title
    .sub-nav-title
    .megamenu-title-wrapper
    > a {
    min-height: 0;
    padding: 0;

    background: transparent;
    color: var(--color-darkgrey);
    border-radius: 0;

    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-h3);
  }

  #vue-wordpress-menu .main-menu-container
    .main-menu-item.tfc-megamenu-title
    .sub-nav-title
    .megamenu-title-wrapper
    > a:hover,
  #vue-wordpress-menu .main-menu-container
    .main-menu-item.tfc-megamenu-title
    .sub-nav-title
    .megamenu-title-wrapper
    > a:focus-visible {
    background: transparent;
    color: var(--color-fg-brand);
  }

  #vue-wordpress-menu .main-menu-container .main-menu-sub-nav a:focus-visible {
    outline: 3px solid var(--color-border-focus);
    outline-offset: 2px;
  }

  #vue-wordpress-menu .main-menu-container
    .main-menu-sub-nav
    .sub-nav-preview-item {
    border-radius: calc(var(--tfc-menu-card-radius) - 8px);
  }
}


/* ==========================================================================
   Sprachumschalter
   ========================================================================== */

#vue-wordpress-menu .main-menu-container .main-menu__extras {
  align-items: center;
  gap: 0.5rem;
  margin-left: 0;
}

#vue-wordpress-menu
  .main-menu-container
  .main-menu__extras:not(:empty) {
  margin-left: 3.125rem;
}

#vue-wordpress-menu .main-menu-container .language-dropdown .active-language {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
  padding: 0.4rem 0.55rem;
  color: var(--color-fg-inverted);
  border-radius: var(--tfc-menu-pill-radius);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-medium);
}

#vue-wordpress-menu .main-menu-container .language-dropdown .active-language:hover,
#vue-wordpress-menu .main-menu-container .language-dropdown .active-language:focus-visible {
  color: var(--color-fg-brand);
}

@media (min-width: 1100.02px) {
  /* 50px Abstand: Menügruppe inklusive Kontakt -> Sprach-Dropdown. */
  #vue-wordpress-menu .main-menu-container
    > .main-menu
    .menu-items
    > .language-dropdown {
    margin-left: 3.125rem;
  }

  #vue-wordpress-menu .main-menu-container
    .language-dropdown
    > .main-menu-sub-nav,
  #vue-wordpress-menu .main-menu-container
    .language-dropdown
    > .main-menu-sub-nav--alternative {
    display: block;
    grid-template-columns: none;
    top: calc(100% + 28px);
    right: 0;
    left: auto;
    width: 13rem;
    max-width: calc(100vw - 40px);
    min-width: 13rem;
    min-height: 0;
    padding: 0.75rem;
    overflow: visible;

    background: var(--color-white);
    color: var(--color-darkgrey);
    border-radius: var(--tfc-menu-card-radius);
    box-shadow: 0 18px 50px rgb(0 0 0 / 18%);
  }

  /*
     Unsichtbare Hover-Brücke zwischen Schalter und Card. Dadurch bleibt
     das Vue-Dropdown beim Bewegen des Mauszeigers durch den Abstand offen.
  */
  #vue-wordpress-menu .main-menu-container
    .language-dropdown
    > .main-menu-sub-nav--alternative::before {
    content: "";
    position: absolute;
    top: auto;
    right: 0;
    bottom: 100%;
    left: 0;
    display: block;
    width: auto;
    height: 28px;
    background: transparent;
  }

  #vue-wordpress-menu .main-menu-container
    .language-dropdown
    > .main-menu-sub-nav--alternative::after {
    display: none;
  }

  /* Im Dropdown nur eine eindeutige Gruppe beschrifteter Sprach-Buttons. */
  #vue-wordpress-menu .main-menu-container
    .language-dropdown
    > .main-menu-sub-nav--alternative
    > .language-switch {
    display: none;
  }

  #vue-wordpress-menu .main-menu-container
    .language-dropdown
    .language-fulltext-items {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
    width: 100%;
    min-width: 11.5rem;
  }

  #vue-wordpress-menu .main-menu-container
    .language-dropdown
    .language-fulltext-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 40px;
    padding: 0.6rem 0.85rem;
    background: rgb(0 0 0 / 5%);
    color: var(--color-darkgrey);
    border-radius: var(--tfc-menu-pill-radius);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-book);
    line-height: 1.2;
    text-decoration: none;
  }

  #vue-wordpress-menu .main-menu-container
    .language-dropdown
    .language-fulltext-item:hover,
  #vue-wordpress-menu .main-menu-container
    .language-dropdown
    .language-fulltext-item:focus-visible,
  #vue-wordpress-menu .main-menu-container
    .language-dropdown
    .language-fulltext-item.active {
    background: var(--color-bg-brand);
    color: var(--color-white);
  }
}


/* ==========================================================================
   Burger und mobile Navigation

   Unter 1100px übernimmt wieder die vorhandene Vue-Mobile-Navigation.
   Deren Transitions und Interaktionslogik bleiben erhalten.
   ========================================================================== */

@media (max-width: 1100px) {
  #vue-wordpress-menu .main-menu-container > .main-menu {
    width: calc(60% - 24px);
    max-width: calc(100% - 24px);
    height: auto;
    min-height: 56px;
    margin-top: 12px;
    padding: 15px 30px 15px 30px;
  }

  #vue-wordpress-menu .main-menu-container > .main-menu .menu-brand {
    width: 5rem;
    min-width: 5rem;
    min-height: 36px;
    margin-right: 0;
  }

  #vue-wordpress-menu .main-menu-container .menu-button-wrapper {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--color-fg-inverted);
  }

  /*
     Den kompletten Linienblock proportional verkleinern. So bleiben die
     festen Drehpunkte des Vue-Burgers auch im X-Zustand unverändert.
  */
  #vue-wordpress-menu .main-menu-container
    > .main-menu
    .menu-button,
  #vue-wordpress-menu .main-menu-container
    > .main-menu
    .menu-button.expanded {
    flex: 0 0 auto;
    transform: scale(0.72);
    transform-origin: center;
  }

  #vue-wordpress-menu .main-menu-container
    > .main-menu
    .menu-button
    > span,
  #vue-wordpress-menu .main-menu-container
    > .main-menu
    .menu-button-duo
    span {
    background: var(--color-fg-inverted);
  }

  #vue-wordpress-menu .main-menu-container
    .mobile-menu
    .mobile-menu-container {
    top: 0;
    padding-top: 80px;
    background: var(--color-white);
    color: var(--color-darkgrey);
  }

  #vue-wordpress-menu .main-menu-container
    .mobile-menu.only-mobile
    .mobile-menu-container {
    padding-top: 80px;
    background: var(--color-white);
  }

  #vue-wordpress-menu .main-menu-container
    .mobile-menu:not(.only-mobile)
    .mobile-menu-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: auto;
    max-height: min(42rem, calc(100vh - 110px));
    padding-top: 0;
    overflow: hidden;

    background: var(--color-white);
    color: var(--color-darkgrey);
    border-radius: var(--tfc-menu-card-radius);
    box-shadow: 0 18px 48px rgb(0 0 0 / 20%);
  }

  /*
     Die mobile Vue-Navigation bleibt innerhalb der Pill und dient nur als
     Anker für die darunterliegende Dropdown-Card.
  */
  #vue-wordpress-menu .main-menu-container
    > .main-menu
    > .mobile-menu:not(.only-mobile) {
    position: absolute;
    top: calc(100% + 0.75rem);
    right: auto;
    left: 0;
    width: 100%;
    height: 0;
    overflow: visible;
    z-index: 99997;
  }

  #vue-wordpress-menu .main-menu-container
    .mobile-menu:not(.only-mobile)
    .mobile-menu-content {
    width: 100%;
    max-height: inherit;
    padding: 3rem 2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    flex-grow: 0;
  }

  #vue-wordpress-menu .main-menu-container
    .mobile-menu:not(.only-mobile)
    .mobile-menu-content
    > .language-switch {
    justify-content: center;
    margin: 0 0 2rem;
  }

  #vue-wordpress-menu .main-menu-container
    .mobile-menu:not(.only-mobile)
    .mobile-nav-items {
    align-items: stretch;
    gap: 0.75rem;
    height: auto;
    max-height: none;
    margin-bottom: 0;
    overflow: visible;
    flex-grow: 0;
  }

  #vue-wordpress-menu .main-menu-container
    .mobile-menu:not(.only-mobile)
    .mobile-nav-item {
    width: 100%;
    text-align: center;
  }

  /*
     Im mobilen Vue-Markup liegt tfc-menu-contact auf dem Link, nicht auf
     .mobile-nav-item. Der Elterncontainer muss deshalb selbst eine echte
     Flex-Zeile sein, damit der Button inklusive Innenabstand in die
     Abstandsberechnung von .mobile-nav-items eingeht.
  */
  #vue-wordpress-menu .main-menu-container
    .mobile-menu:not(.only-mobile)
    .mobile-nav-item:has(> a.tfc-menu-contact) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    margin-top: 0.75rem;
  }

  #vue-wordpress-menu .main-menu-container
    .mobile-menu:not(.only-mobile)
    .mobile-nav-item
    > a.tfc-menu-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 40px;
    font-size: 1.125rem;
    line-height: 1.2;
    outline: 1px solid transparent;
    outline-offset: 2px;
    transition:
      background-color 240ms ease,
      color 240ms ease,
      outline-color 240ms ease;
  }

  #vue-wordpress-menu .main-menu-container
    .mobile-menu:not(.only-mobile)
    .mobile-nav-item
    > a.tfc-menu-contact:hover,
  #vue-wordpress-menu .main-menu-container
    .mobile-menu:not(.only-mobile)
    .mobile-nav-item
    > a.tfc-menu-contact:focus-visible {
    outline-color: var(--color-fg-brand);
  }

  #vue-wordpress-menu .main-menu-container
    .mobile-menu:not(.only-mobile)
    .mobile-nav-item
    > a:not(.tfc-menu-contact),
  #vue-wordpress-menu .main-menu-container
    .mobile-menu:not(.only-mobile)
    .mobile-nav-item
    > .mobile-main-item {
    width: 100%;
    text-align: center;
  }

  /* Pfeil für mobile Menüpunkte mit Untermenü. */
  #vue-wordpress-menu .main-menu-container
    .mobile-menu:not(.only-mobile)
    .mobile-main-item.has-children {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    transition: color 360ms ease;
  }

  #vue-wordpress-menu .main-menu-container
    .mobile-menu:not(.only-mobile)
    .mobile-main-item.has-children::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    flex: 0 0 auto;

    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.15rem) rotate(45deg);
    transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  #vue-wordpress-menu .main-menu-container
    .mobile-menu:not(.only-mobile)
    .mobile-main-item.has-children.expanded::after {
    transform: translateY(0.15rem) rotate(-135deg);
  }

  #vue-wordpress-menu .main-menu-container
    .mobile-menu:not(.only-mobile)
    .mobile-nav-sub-items {
    overflow: hidden;
    transform-origin: top center;
    will-change: height, opacity, transform;
  }

  /* Vorhandene Vue-Transition als kurze Dropdown-Animation verwenden. */
  #vue-wordpress-menu .main-menu-container
    .mobile-menu:not(.only-mobile)
    .slide-right-enter-active,
  #vue-wordpress-menu .main-menu-container
    .mobile-menu:not(.only-mobile)
    .slide-right-leave-active {
    transform-origin: top center;
    transition:
      opacity 240ms ease,
      transform 240ms ease;
  }

  #vue-wordpress-menu .main-menu-container
    .mobile-menu:not(.only-mobile)
    .slide-right-enter,
  #vue-wordpress-menu .main-menu-container
    .mobile-menu:not(.only-mobile)
    .slide-right-enter-from,
  #vue-wordpress-menu .main-menu-container
    .mobile-menu:not(.only-mobile)
    .slide-right-leave-to {
    opacity: 0;
    transform: translateY(-0.75rem) scale(0.98);
  }

  #vue-wordpress-menu .main-menu-container .mobile-menu-content {
    font-family: var(--font-family-base);
  }

  #vue-wordpress-menu .main-menu-container .mobile-nav-item a,
  #vue-wordpress-menu .main-menu-container .mobile-nav-item .mobile-main-item {
    color: var(--color-darkgrey);
    font-family: var(--font-family-base);
    font-size: clamp(1.25rem, 3vw, 1.6rem);
    font-weight: var(--font-weight-medium);
  }

  #vue-wordpress-menu .main-menu-container .mobile-nav-item a:hover,
  #vue-wordpress-menu .main-menu-container .mobile-nav-item a:focus-visible,
  #vue-wordpress-menu .main-menu-container .mobile-nav-item .mobile-main-item:hover,
  #vue-wordpress-menu .main-menu-container .mobile-nav-item .mobile-main-item:focus-visible,
  #vue-wordpress-menu .main-menu-container
    .mobile-nav-item
    .mobile-main-item.expanded {
    color: var(--color-fg-brand);
  }

  #vue-wordpress-menu .main-menu-container
    .mobile-menu:not(.only-mobile)
    .mobile-main-item.has-children.expanded {
    color: var(--color-fg-brand);
  }

  #vue-wordpress-menu .main-menu-container
    .mobile-menu:not(.only-mobile)
    .mobile-nav-sub-items
    .mobile-nav-sub-item {
    color: var(--color-fg-muted);
  }

  #vue-wordpress-menu .main-menu-container
    .mobile-menu:not(.only-mobile)
    .mobile-nav-sub-items
    .mobile-nav-sub-item:hover,
  #vue-wordpress-menu .main-menu-container
    .mobile-menu:not(.only-mobile)
    .mobile-nav-sub-items
    .mobile-nav-sub-item:focus-visible {
    color: var(--color-fg-brand);
  }

  #vue-wordpress-menu .main-menu-container .mobile-nav-item a:focus-visible,
  #vue-wordpress-menu .main-menu-container
    .mobile-nav-item
    .mobile-main-item:focus-visible {
    outline: 3px solid var(--color-border-focus);
    outline-offset: 3px;
  }

  #vue-wordpress-menu .main-menu-container .mobile-nav-sub-item {
    font-weight: var(--font-weight-book);
  }

  #vue-wordpress-menu .main-menu-container .only-mobile-menu__overlay {
    background: rgb(0 0 0 / 42%);
    backdrop-filter: blur(3px);
  }

}

@media (max-width: 782px) {
  #vue-wordpress-menu .main-menu-container > .main-menu {
    width: calc(70% - 16px);
    max-width: calc(100% - 16px);
    margin-top: 8px;
  }

  #vue-wordpress-menu .main-menu-container .mobile-menu-container {
    padding-top: 72px;
  }

  #vue-wordpress-menu .main-menu-container
    .mobile-menu:not(.only-mobile)
    .mobile-menu-container {
    top: 0;
    padding-top: 0;
  }
}

@media (max-width: 500px) {
  #vue-wordpress-menu .main-menu-container > .main-menu {
    min-height: 52px;
    height: auto;
    padding-inline: 30px 30px;
  }

  #vue-wordpress-menu .main-menu-container > .main-menu .menu-brand {
    width: 4rem;
    min-width: 4rem;
    min-height: 32px;
  }

  #vue-wordpress-menu .main-menu-container .mobile-nav-item a,
  #vue-wordpress-menu .main-menu-container .mobile-nav-item .mobile-main-item {
    font-size: 1.125rem;
  }

  #vue-wordpress-menu .main-menu-container
    .mobile-menu:not(.only-mobile)
    .mobile-nav-item
    > a.tfc-menu-contact {
    font-size: 1rem;
  }

  #vue-wordpress-menu .main-menu-container .mobile-nav-sub-item {
    font-size: 1rem;
  }
}


/* ==========================================================================
   Bewegungsreduktion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  #vue-wordpress-menu .main-menu-container *,
  #vue-wordpress-menu .main-menu-container *::before,
  #vue-wordpress-menu .main-menu-container *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}