/* ==========================================================================
   Nav-Korrekturen (Testversion 2026-09-20)
   Eigene Datei, damit yolenn-main.min.css unangetastet bleibt.
   Eingebunden von header.php, nach yolenn-main.min.css/yolenn-tour.css.

   1) Dropdown-Pfeilchen neben Menuepunkten mit Untermenue (has-submenu).
   2) Schriftgroesse nur im engen Bereich verkleinern: Die Desktop-Nav ist ab
      1200px sichtbar, dort reicht der Platz fuer 1rem nicht. Ab 1420px ist
      wieder genug Platz, also dort zurueck auf die urspruengliche Groesse.
      Die Submenue-Eintraege ziehen mit, damit Haupt- und Unterpunkte im
      engen Bereich nicht unterschiedlich gross wirken.
   3) Dropdowns laufen bei rechten Menuepunkten aus dem Viewport. Loesung:
      alle Dropdowns oeffnen rechtsbuendig zu ihrem Menuepunkt (right: 0).
      Einheitliches System, kein Sonderfall pro Punkt, kein JavaScript.
      Die Menuepunkte sitzen alle in der rechten Haelfte der Nav, nach links
      ist immer genug Platz.
   ========================================================================== */

/* --- 1) Dropdown-Pfeilchen --- */

/* Ein Menuepunkt bricht nie in sich um ("Yolenn on / Tour"). Seit dem
   Geschenk-Icon am Gutschein (2026-09-21) war der Platz auf 0-2px genau
   aufgebraucht; Rundungen haben dann einzelne Punkte zweizeilig gemacht. */
.desktop-menu .desktop-menu-right .menu > li > a {
  white-space: nowrap;
}

.desktop-menu .desktop-menu-right .menu li a.top-menu-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}

.submenu-caret {
  flex: none;
  width: 0.55em;
  height: 0.4em;
  margin-top: 0.1em;
  color: currentColor;
  opacity: 0.7;
}

/* --- 2) Enger Bereich 1200-1499px: kompakter, damit die Zeile nicht umbricht ---
   (bis 2026-09-23: 1419px und 6px; erweitert, damit ueberall Luft bleibt) */

@media (min-width: 1200px) and (max-width: 1499.98px) {
  .desktop-menu .desktop-menu-right .menu li a {
    padding-left: 5px;
    padding-right: 5px;
    font-size: 0.9rem;
  }

  /* Submenue-Eintraege im gleichen Verhaeltnis, damit die Groessen zusammenpassen */
  .submenu-wrapper ul.submenu li.submenu-item a {
    font-size: 0.9rem;
  }
  .submenu-wrapper ul.submenu li.submenu-item {
    min-width: 18rem;
    max-width: 540px;
  }
}

/* --- 3) Dropdowns rechtsbuendig oeffnen, damit sie nicht aus dem Viewport laufen --- */

.desktop-menu .desktop-menu-right .submenu-wrapper ul.submenu {
  left: auto;
  right: 0;
}
.desktop-menu .desktop-menu-right .submenu-wrapper ul.submenu:after {
  left: auto;
  right: 0;
}

/* Der linkeste Menuepunkt hat nach links zu wenig Platz: dort linksbuendig
   oeffnen, damit das Dropdown nicht ueber den linken Viewportrand hinausgeht.
   Einheitliche Regel: rechtsbuendig, ausser beim ersten Punkt mit Untermenue. */
.desktop-menu .desktop-menu-right .menu > li.has-submenu:first-of-type .submenu-wrapper ul.submenu {
  left: 0;
  right: auto;
}
.desktop-menu .desktop-menu-right .menu > li.has-submenu:first-of-type .submenu-wrapper ul.submenu:after {
  left: 0;
  right: auto;
}

/* --- 4) Menuepunkt bleibt hervorgehoben, solange sein Dropdown offen ist ---
   Der Hover-Effekt (#f2ebdc) haengt an a.top-menu-item:hover und faellt damit
   weg, sobald die Maus vom Menuepunkt nach unten ins Dropdown wandert - obwohl
   man sich inhaltlich noch in diesem Menuepunkt befindet.

   Anker ist .submenu-wrapper.is-active (das JS setzt die Klasse beim Betreten
   des li und entfernt sie beim Verlassen) statt li:hover: So bleibt die
   Hervorhebung exakt so lange, wie das Dropdown tatsaechlich offen ist.
   Das :has() greift auf den Menuepunkt darueber zurueck.

   Ein Sonderfall fuer den Buchen-Button ist nicht noetig: der hat kein
   Untermenue, die Regel kann dort also gar nicht greifen. */

.desktop-menu .desktop-menu-right .menu li.has-submenu:has(.submenu-wrapper.is-active) > a.top-menu-item {
  background-color: #f2ebdc;
  color: #2a2622;
}

/* --- 5) Dropdown-Breite: so breit wie der laengste Eintrag -------------
   Seit 2026-09-24 mit Kurztiteln (Feld menu_title): Die Dropdowns sind
   nicht mehr fest breit, sondern passen sich dem laengsten Eintrag an -
   mindestens 18rem, hoechstens 540px bzw. 610px (Werte unten). Laengere
   Titel brechen weiterhin um.
   Frueher: feste min-width, siehe Begruendung: */
/* ---    Dropdowns breiter, damit lange Angebotstitel nicht umbrechen ---
   Standard aus yolenn-main.min.css: 480px. Gemessen 2026-09-23: der laengste
   deutsche Eintrag braucht einzeilig ~586px (FR ~604px, ein FR-Titel ~657px). 610px
   reicht dafuer; im engen Bereich (siehe 2) gelten 540px bei 0.9rem.
   Breiter geht nicht: das Massagen-Dropdown oeffnet rechtsbuendig und
   wuerde bei 1200px sonst links aus dem Viewport laufen.
   Noch laengere Titel duerfen weiterhin umbrechen. */

@media (min-width: 1500px) {
  .submenu-wrapper ul.submenu li.submenu-item {
    min-width: 18rem;
    max-width: 610px;
  }
}