/* layout.css
 *
 * Hier kommen Layout-bezogene Stile hin, z. B. Grid-Systeme, Container-Breiten,
 * Spacing-Helferklassen oder spezielle Strukturierungs-Styles.
 *
 * Aktuell leer – vorbereitet für zukünftige Layoutstrukturen.
 */


:root :where(.editor-styles-wrapper) .is-root-container>* {
  margin-block-start: 0 !important;
  margin-block-end: 0;
}

/* Header-Offset */

.logoWrapper {

  img,
  svg {
    height: auto;
    /* Figma 80:3592 Container = 69x43 (Mobile) */
    width: 69px;
    transition: 0.3s ease-in-out;
  }
}

@media (min-width: 1280px) {

  :root {
    /* Figma 52:2540 Frame 30 = 1440x88 – Sticky ist gleich hoch wie der Ausgangszustand */
    --header-height-fixed: 88px;
  }

  .logoWrapper {

    img,
    svg {
      /* Figma 20:3156 Container = 80x50 (Desktop) */
      width: 80px;
    }
  }
}

/* Der Hintergrund soll beim Scrollen überblenden statt umzuspringen. Zwei
   Dinge standen dem im Weg:

   1. Der Ausgangszustand hatte background-image: none. Gegen "none" lässt
      sich ein Verlauf nicht interpolieren – er erscheint schlagartig.
      Deshalb steht hier derselbe Verlauf mit Alpha 0 als Startwert; sichtbar
      ist das genauso wenig wie vorher, überblenden lässt es sich aber.
   2. Die transition hing an den Zustandsklassen und war damit beim Entfernen
      der Klasse (zurück nach ganz oben) selbst schon weg – der Rückweg
      sprang. An der Kopfzeile selbst läuft sie in beide Richtungen.

   Der Selektor schliesst die Zustandsklassen ausdrücklich aus: über die ID
   wiegt er schwerer als .is-header-visible / .is-header-hidden und würde
   deren backdrop-filter sonst überstimmen. So gilt er nur, solange keine
   der beiden Klassen gesetzt ist – die Regeln kommen sich nicht ins
   Gehege. */
#site-header:not(.is-header-visible):not(.is-header-hidden) {
  background-image: linear-gradient(180deg, rgba(200, 226, 247, 0) 0%, rgba(200, 226, 247, 0) 100%);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition:
    background-image 0.3s ease-in-out,
    backdrop-filter 0.3s ease-in-out,
    -webkit-backdrop-filter 0.3s ease-in-out,
    color 0.3s ease-in-out;
}

.is-header-visible,
.is-header-hidden {
  transition: 0.3s ease-in-out;
}

/* Das Theme schiebt die Kopfzeile beim Runterscrollen mit translateY(-100%)
   aus dem Bild. Der Entwurf kennt keinen versteckten Zustand – die Kopfzeile
   bleibt beim Scrollen sichtbar. Die ID erhöht die Spezifität gegenüber
   der gleichnamigen Regel aus dem Parent-Theme. */
#site-header.is-header-hidden {
  transform: none;
}

/* Beide Scroll-Zustände sehen gleich aus (Figma 52:2540 / 80:3609). */
.is-header-visible,
.is-header-hidden {
  /* linearer Verlauf #C8E2F7 100% -> 0% plus Background-Blur 4 */
  background: linear-gradient(180deg, #C8E2F7 0%, rgba(200, 226, 247, 0) 100%) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--color-black);

  .header-height {
    transition: all 0.3s ease-in-out;
    height: var(--header-height-fixed);
  }

  /* Figma 52:2552/2556/2558 – Navigation im Sticky-Zustand ist schwarz.
     !important ist nötig, weil die Navigation über textColor die Klasse
     has-white-color mitbringt, die ihrerseits mit !important arbeitet. */
  .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
    color: var(--color-black) !important;
  }

  /* Chevron folgt der Navigationsfarbe */
  .wp-block-navigation__submenu-icon {
    color: var(--color-black);
  }

  /* Figma 52:2546/2548 – Logo im Sticky-Zustand ist schwarz */
  .logoWrapper svg path {
    fill: var(--color-black);
  }
}

/* Seiten ohne dunkles Hero-Bild (Figma 80:5497 Team, 80:5541 Kontakt): die
   Kopfzeile steht direkt auf der Seitenfarbe #C8E2F7, deshalb sind Logo,
   Navigation und Chevron dort von Anfang an schwarz – nicht erst im
   Sticky-Zustand. Startseite und /invisalign-luzern/ starten mit einem
   dunklen Hero und behalten ihr weisses Logo.
   Markiert wird das im Template über <main class="header-dark">. */
body:has(main.header-dark) #site-header {

  .logoWrapper svg path {
    fill: var(--color-black);
  }

  /* !important, weil die Navigation über textColor die Klasse has-white-color
     mitbringt, die selbst mit !important arbeitet. */
  .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
    color: var(--color-black) !important;
  }

  .wp-block-navigation__submenu-icon {
    color: var(--color-black);
  }
}

/* Navigation-Indikator */
.nav-indicator {
  position: absolute;
  bottom: -6px;
  width: 6px;
  height: 6px;
  background: var(--color-black);
  border-radius: 50%;
  transition: left 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
  opacity: 0;
}

body.home {
  .nav-indicator {
    background: var(--color-secondary);
  }
}


body:not(.home) {

  header-page {

    .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
      color: var(--color-black);
    }

    .wp-block-button.is-style-white-secondary>.wp-block-button__link,
    .wp-block-button.is-style-white-secondary>.wp-block-button__link:not(.has-text-color) {
      background-color: var(--color-secondary);
      color: var(--color-white);

      &:before {
        background-color: var(--color-primary) !important;
      }
    }

    .logoWrapper svg path {
      fill: var(--color-black);
    }

  }

  .is-header-visible {

    .wp-block-button.is-style-white-secondary>.wp-block-button__link,
    .wp-block-button.is-style-white-secondary>.wp-block-button__link:not(.has-text-color) {
      &:hover {
        color: var(--color-secondary);
      }

      &:before {
        background-color: var(--color-white) !important;
      }
    }

    /* Figma 52:2540 – Navigation und Logo bleiben im Sticky-Zustand schwarz
       (früher wurden sie hier auf Weiss gesetzt, passend zum blauen Balken). */
    .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
      color: var(--color-black);
    }

    .logoWrapper svg path {
      fill: var(--color-black);
    }

  }

}

/* Hamburger-Menü */
body:not(.home) #mobileToggle span {
  background-color: var(--hamburger-color-notHomeTemplate);
}

body:not(.home).menuOpen #mobileToggle span,
body:not(.home) .is-header-hidden #mobileToggle span,
body:not(.home) .is-header-visible #mobileToggle span {
  background-color: var(--hamburger-color);
}

.menuOpen #site-header {
  box-shadow: none !important;
}

.menuOpen .wp-block-site-title,
.menuOpen .wp-block-site-title a:hover {
  color: var(--color-white);
}

/* Der Header nutzt dieselbe Inhaltsbreite wie die Seiten: 1340px,
   darunter volle Breite mit 15px Rand (Figma 20:3155). */
#site-header .header-height {
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* ===================================================================== */
/* Header – Aktionen rechts (Navigation + WhatsApp + Burger)             */
/* Figma 20:3155 (Hero) · 52:2540 (Sticky) · 80:3591 / 80:3609 (Mobile)  */
/* ===================================================================== */

.header-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  /* Figma 80:3600 Frame 2147238821 gap 8 (Mobile) */
  gap: 8px;
}

.header-nav-cta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  /* Figma 20:3164 Container gap 30 (Desktop) */
  gap: 30px;
}

/* Seitlicher Rand des Headers auf dem Handy – Figma 80:2033 = padding 8/16,
   also 16 pro Seite. Ohne diese Regel greift der Standard des Eltern-Themes
   (--theme-spacing-responsive-gutter = clamp(30px, 5vw, 50px)) und Logo,
   WhatsApp-Knopf und Schliessen stehen 30 statt 16 vom Rand – im offenen
   Menü fallen sie dadurch aus der Flucht der Menüpunkte (die stehen bei 16). */
@media (max-width: 781.98px) {

  #site-header {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Darüber derselbe Seitenrand wie in den überarbeiteten Abschnitten.

   Der Theme-Wert (--theme-spacing-responsive-gutter = clamp(30px, 5vw, 50px))
   trifft bei 1440 zwar genau die 50 aus Figma 20:3155, bleibt wegen des
   clamp-Maximums aber bis hinunter zu 1000px auf 50 stehen – während jeder
   überarbeitete Abschnitt darunter längst auf --content-gutter (15) steht.
   Logo und Navigation rückten dadurch gegenüber dem Seiteninhalt ein.

   Mit dem Gutter bleibt bei 1440 alles wie gehabt: der innere Container ist
   auf 1340 begrenzt und zentriert sich, das Logo steht also weiterhin bei
   15 + (1410 - 1340) / 2 = 50. Erst unterhalb von 1370 wirkt sich die
   Änderung überhaupt aus – und dort ist sie ja gerade erwünscht. */
@media (min-width: 782px) {

  #site-header {
    padding-left: var(--content-gutter);
    padding-right: var(--content-gutter);
  }
}

/* Hauptnavigation im Header – Figma 20:3167/3169/3171 = Manrope 400 16/22.4.
   Das Parent-Theme setzt die Grösse über --navigation-font-size; die Variable
   wird hier nur innerhalb von #site-header überschrieben, damit die
   Footer-Navigation ihre bisherige Grösse behält. */
#site-header {
  --navigation-font-size: 16px;
}

#site-header .wp-block-navigation a:not(.wp-element-button),
#site-header .wp-block-navigation .wp-block-navigation-item__content {
  line-height: 22.4px;
}

/* Untermenü der Hauptnavigation: das Elternthema setzt es 20 px unter den
   Menüpunkt. Dazwischen liegt eine tote Zone – wer mit der Maus vom Punkt
   zum Untermenü fährt, verliert :hover und das Menü klappt zu, bevor man
   klicken kann. Einen Entwurf für dieses Aufklappmenü gibt es nicht (in Figma
   existiert nur das mobile Menü 80:2091), deshalb hier rein funktional:
   Panel etwas höher (8 statt 20) und der Rest des Abstands wird mit einer
   unsichtbaren Brücke überbrückt, damit :hover nie abreisst. */
#site-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
  top: calc(100% + 8px);
}

#site-header .wp-block-navigation .has-child > .wp-block-navigation__submenu-container::before {
  content: "";
  position: absolute;
  top: -8px;
  right: 0;
  left: 0;
  height: 8px;
}

/* Figma 20:3165 Navigation gap 20 */
#site-header .wp-block-navigation .wp-block-navigation__container {
  gap: 20px;
}

/* WhatsApp-Button im Header – Figma 20:3174 / 80:3601 */
.header-actions .wp-block-button__link {
  /* Figma 80:3601 Link padding 8/16, radius 100 */
  padding: 8px 16px;
  border-radius: 100px;
  /* Figma 80:3602 WhatsApp = Manrope 500 16/24 */
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

@media (min-width: 1280px) {

  .header-actions {
    gap: 30px;
  }

  .header-actions .wp-block-button__link {
    /* Figma 20:3174 Link padding 12/16 -> 48px hoch */
    padding: 12px 16px;
  }
}

/* Burger als Kreis – Figma 80:3603 (Hero, weiss) / 80:3621 (Sticky, schwarz) */
.header-actions hamburger .wp-block-rocket-burger>.wp-block-group {
  /* Figma 80:3603 Frame 2147238820 = 40x40, radius 1000 */
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  transition: background-color 0.3s ease-in-out;
}

.header-actions #mobileToggle {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-actions #mobileToggle>div {
  /* Figma I80:3604 Icon = 12x5, stroke 1.5 -> zwei Linien */
  width: 12px;
  height: 5px;
}

.header-actions #mobileToggle span {
  height: 1.5px;
}

/* Mittleres Linienpaar entfällt im geschlossenen Zustand (Figma zeigt zwei Linien) */
.header-actions #mobileToggle span:nth-child(3),
.header-actions #mobileToggle span:nth-child(4) {
  opacity: 0;
}

.header-actions #mobileToggle span:nth-child(5),
.header-actions #mobileToggle span:nth-child(6) {
  top: 3.5px;
}

/* Linienfarbe je Zustand */
.header-actions #mobileToggle span {
  background-color: var(--color-black);
}

.is-header-visible .header-actions hamburger .wp-block-rocket-burger>.wp-block-group,
.is-header-hidden .header-actions hamburger .wp-block-rocket-burger>.wp-block-group {
  /* Figma 80:3621 – Sticky: schwarzer Kreis, weisse Linien */
  background-color: var(--color-black);
}

.is-header-visible .header-actions #mobileToggle span,
.is-header-hidden .header-actions #mobileToggle span {
  background-color: var(--color-white);
}

.menuOpen .header-actions hamburger .wp-block-rocket-burger>.wp-block-group {
  /* Figma 80:2045 – Menü offen: blauer Kreis, weisses X */
  background-color: var(--theme-color-primary);
}

.menuOpen .header-actions #mobileToggle span {
  background-color: var(--color-white);
}

/* X-Zustand an die kleinere Icon-Box anpassen (Basis-Werte gelten für 30x24) */
.menuOpen .header-actions #mobileToggle>div {
  width: 12px;
  height: 12px;
}

/* Das Theme baut sein X aus vier halbbreiten Linien, die auf 30x24 abgestimmt
   sind. In der 12x12-Box der Kreisvariante ergäbe das zwei kleine Kreuze
   nebeneinander. Darum: nur zwei durchgehende Linien über die Diagonalen,
   passend zu Figma 80:2048 (x-close, Striche 8x8). */
.menuOpen .header-actions #mobileToggle span {
  opacity: 0;
}

.menuOpen .header-actions #mobileToggle span:first-child,
.menuOpen .header-actions #mobileToggle span:nth-child(5) {
  opacity: 1;
  width: 11.3px;
  left: 0.35px;
  top: 5.25px;
}

.menuOpen .header-actions #mobileToggle span:first-child {
  transform: rotate(45deg);
}

.menuOpen .header-actions #mobileToggle span:nth-child(5) {
  transform: rotate(-45deg);
}


/* ===================================================================== */
/* Header – Untermenü (Dropdown) · Figma 52:2452                         */
/* ===================================================================== */

#site-header .wp-block-navigation__submenu-container {
  /* Figma 52:2452 Frame 2147238811 = 237x130, radius 16, padding 16, gap 16 */
  box-sizing: border-box;
  width: 237px;
  padding: 16px;
  border: 0;
  border-radius: 16px;
  background-color: var(--color-white);
  /* Der Entwurf zeigt keinen Schatten */
  box-shadow: none;
  /* Figma: Panel liegt 20px unter dem Menüpunkt und 46px weiter links.
     Der Abstand steckt in top, weil margin-top vom Core-Stylesheet überschrieben wird. */
  top: calc(100% + 20px);
  left: -46px;
}

#site-header .wp-block-navigation__submenu-container>li+li {
  margin-top: 16px;
}

#site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  /* Figma 52:2447 = Manrope 500 16/22.4 */
  padding: 0;
  color: var(--color-black);
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px;
}

#site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
#site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
  /* Figma 52:2447 Hover-Zustand */
  color: var(--theme-color-secondary);
}

/* Chevron – Figma 52:2409 (16x16, stroke 1.5) */
#site-header .wp-block-navigation__submenu-icon {
  width: 16px;
  height: 16px;
  padding: 0;
  margin-left: 5px;
  transition: transform 0.3s ease-in-out;
}

#site-header .wp-block-navigation__submenu-icon svg {
  width: 16px;
  height: 16px;
  /* Das Parent-Theme dreht das SVG selbst, gibt der Drehung aber keine Dauer */
  transition: transform 0.3s ease-in-out;
}

/* Die Linie des Chevrons folgt currentColor, die Farbe wird also über
   den umgebenden Span gesteuert. */
#site-header .wp-block-navigation__submenu-icon svg path {
  stroke: currentColor;
}

/* Das Untermenü öffnet auf Hover (Desktop). Ein Klick auf den Menüpunkt selbst
   folgt weiterhin dem Link – auf der Startseite also der Sprung zum Abschnitt. */
#site-header .wp-block-navigation-item.has-child:hover>.wp-block-navigation__submenu-container,
#site-header .wp-block-navigation-item.has-child:focus-within>.wp-block-navigation__submenu-container {
  display: flex;
  opacity: 1;
  visibility: visible;
}

/* Figma 52:2435/2437 – geöffnet: Menüpunkt und Chevron in Sekundärfarbe.
   Die 180-Grad-Drehung des Chevrons liefert bereits das Parent-Theme;
   eine zweite Drehung hier würde sie aufheben. */
#site-header .wp-block-navigation-item.has-child:hover,
#site-header .wp-block-navigation-item.has-child:focus-within {

  >.wp-block-navigation-item__content {
    color: var(--theme-color-secondary);
  }

  /* Figma 52:2437 – Chevron wechselt mit dem Menüpunkt die Farbe */
  >.wp-block-navigation__submenu-icon {
    color: var(--theme-color-secondary);
  }
}

/* Hover gilt für alle Menüpunkte, nicht nur für den mit Untermenü.
   Die Farbe kommt aus --navigation-color-link-hover (= Sekundärfarbe).
   !important aus demselben Grund wie oben: has-white-color setzt !important. */
#site-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
#site-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:focus {
  color: var(--navigation-color-link-hover) !important;
}

/* Farbwechsel weich, passend zur Drehung */
#site-header .wp-block-navigation .wp-block-navigation-item__content {
  transition: color 0.3s ease-in-out;
}

#site-header .wp-block-navigation__submenu-icon {
  transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Der Hover-Bereich reicht bis zum Panel, damit es beim Mausweg nicht zuklappt */
#site-header .wp-block-navigation-item.has-child::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 20px;
}


/* ===================================================================== */
/* Mobile Navigation · Figma 80:2091                                     */
/* ===================================================================== */

.mobile-nav {
  /* Figma 80:2091 = weisser Vollbild-Layer */
  background-color: var(--color-white);
}

.mobile-nav .mobile-nav__inner {
  /* Figma 80:2100 Frame 2147239243 padding 60/16/20/16, füllt die Höhe */
  box-sizing: border-box;
  min-height: 100dvh;
  padding: calc(var(--header-height-mobile) + 60px) 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* Figma 80:2082 gap 30 zwischen Menü und unterem Bereich */
  gap: 30px;
}

/* Menüliste ------------------------------------------------------------ */

.mobile-nav .mobile-nav__menu .wp-block-navigation__container {
  /* Figma 80:2082 Frame 2147239241 gap 30 */
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}

/* Elternpunkt „Kieferorthopädie“ – Figma 80:2075 = Manrope 400 16/22.4, 60 % Schwarz */
.mobile-nav .mobile-nav__menu .wp-block-navigation-item.has-child>.wp-block-navigation-item__content {
  color: rgba(0, 0, 0, 0.6);
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
}

/* Untermenü ist im Entwurf dauerhaft ausgeklappt, kein Dropdown */
.mobile-nav .mobile-nav__menu .wp-block-navigation__submenu-container {
  position: static;
  display: flex;
  flex-direction: column;
  opacity: 1;
  visibility: visible;
  width: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  /* Figma 80:2117 gap 10 zwischen Label und erster Unterseite */
  margin-top: 10px;
  /* Figma 80:2116 gap 10 zwischen den Unterseiten */
  gap: 10px;
}

.mobile-nav .mobile-nav__menu .wp-block-navigation__submenu-icon {
  display: none;
}

/* Alle klickbaren Menüpunkte – Figma 80:2101/2079/2080 = Manrope 600 24/28.8 */
.mobile-nav .mobile-nav__menu .wp-block-navigation-item:not(.has-child)>.wp-block-navigation-item__content,
.mobile-nav .mobile-nav__menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 0;
  color: var(--color-black);
  font-size: 24px;
  font-weight: 600;
  line-height: 28.8px;
}

/* Unterer Bereich ------------------------------------------------------ */

.mobile-nav .mobile-nav__bottom {
  /* Figma 80:2139 – Kontakte links, Social rechts, beide unten bündig */
  margin-top: auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}

.mobile-nav .mobile-nav__contacts {
  display: flex;
  flex-direction: column;
  /* Figma 80:2140 gap 20 zwischen Telefon und E-Mail */
  gap: 20px;
}

.mobile-nav .mobile-nav__contact {
  display: flex;
  flex-direction: column;
  /* Figma 80:2141 gap 4 zwischen Label und Wert */
  gap: 4px;
}

.mobile-nav .mobile-nav__contact-label {
  /* Figma 80:2142 = Manrope 400 14/19.6, 60 % Schwarz */
  margin: 0;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
}

.mobile-nav .mobile-nav__contact-value {
  /* Figma 80:2144 = Manrope 600 16/22.4 */
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 22.4px;
}

.mobile-nav .mobile-nav__contact-value a {
  color: var(--color-black);
  text-decoration: none;
}

.mobile-nav .mobile-nav__social {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  /* Figma 80:2148 gap 12 */
  gap: 12px;
}

.mobile-nav .mobile-nav__social figure {
  margin: 0;
}

.mobile-nav .mobile-nav__social a {
  /* Figma 80:2149 = 40x40, radius 100, Sekundärfarbe, Icon 16x16 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  background-color: var(--theme-color-secondary);
}

.mobile-nav .mobile-nav__social img {
  display: block;
  width: 16px;
  height: 16px;
}

/* Das Theme klappt Untermenüs über height:0 zu – im mobilen Menü sind sie
   laut Entwurf dauerhaft offen. */
.mobile-nav .mobile-nav__menu .wp-block-navigation__submenu-container {
  height: auto;
  max-height: none;
  overflow: visible;
}

/* Kopfzeile bei geöffnetem Menü – Figma 80:2033 = weisser Balken, schwarzes Logo */
.menuOpen #site-header {
  background: var(--color-white) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.menuOpen .logoWrapper svg path {
  fill: var(--color-black);
}

/* Untermenü im mobilen Menü steht im Textfluss – vom Theme geerbte
   Offsets (top/left) müssen dafür zurückgesetzt werden. */
.mobile-nav .mobile-nav__menu .wp-block-navigation__submenu-container {
  position: relative;
  inset: auto;
  transform: none;
}

.menuOpen #site-header {
  background-color: var(--color-white) !important;
}