/* ==========================================================================
   Menü-Overlay (.menu nav) – Zonen wie in special13.css:

       Mobile   max-width: 999px
       Tablet   min-width: 1000px and max-width: 1600px (u. a. iPad Air 11"
                quer, CSS-Breite ~1180–1194px)
       Desktop  min-width: 1601px  → deckt sich mit den ungestylten
                Basis-Regeln weiter unten, die ohne @media gelten

   Die Basis-Regeln (ohne Media Query) sind der Desktop-Stand. Die Zonen-
   Blöcke am Dateiende überschreiben nur die Abweichungen für die jeweils
   schmalere Zone.
   ========================================================================== */

:root {
    --nav-underline-offset: 5px;
    --nav-underline-offset-sub: 4px;
    --nav-underline-thickness:.5pt;
    --nav-active-color: var(--brand-olive);
}

.menu nav {
position:relative;
display:block;
}

.menu nav ul {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1rem;
    text-align: center;
    width:90%;
    display:block;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}
.menu nav > ul > li {
margin-bottom:20px;
    display:block;
    position:relative;
}

.menu nav > ul > li > ul {
margin-bottom:20px;
    display:block;
    position:relative;
}

.menu nav ul > li > ul > li {
	display:inline-block;
}

.menu nav ul > li > ul > li:after {
	display:inline-block;
	content:" I ";
	margin-left:6px;
	margin-right:6px;
}
.menu nav ul > li > ul > li:last-child:after {
	display:inline-block;
	content:"";
}
.menu nav ul > li > a {
    display: inline-block;
    font-family: var(--font-heading-messi);
    font-size: var(--font-size-heading-messi);
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: var(--letter-spacing-h-m);
    color: var(--brand-h);
    margin-bottom:10px;
}

.menu nav ul > li > a:hover,
.menu nav ul > li > a.active {
    text-decoration: underline;
    text-underline-offset: var(--nav-underline-offset);
    text-decoration-thickness: var(--nav-underline-thickness);
}

.menu nav ul > li.current > a,
.menu nav ul > li > a.active {
    color: var(--nav-active-color);
    text-decoration: underline;
        text-underline-offset: var(--nav-underline-offset);
    text-decoration-thickness: var(--nav-underline-thickness);
}

.menu nav ul li ul > li > a {
    display: inline-block;
    font-family: var(--font-body);
    text-transform: none;
    text-decoration: none;
    font-size: var(--font-size-a);
    letter-spacing: var(--letter-spacing-a);
    color: var(--brand-text);
}

.menu nav ul li ul > li > a:hover,
.menu nav ul li ul > li > a.active {
    text-decoration: none;
    text-underline-offset: var(--nav-underline-offset-sub);
    text-decoration-thickness: var(--nav-underline-thickness);
    color: var(--nav-active-color);
}

.menu nav ul li ul > li.current > a,
.menu nav ul li ul > li > a.active {
    color: var(--nav-active-color);
}

/* "Dein Yoga": Zeilenumbrüche werden in nav.php über echte Break-<li> gesetzt (nav-subitem-break),
   dadurch keine Lücken durch Prozent-/Grid-Spaltenbreiten mehr. */
.menu nav ul > li > ul.submenu-dein-yoga > li.nav-subitem-break {
    display: block;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.menu nav ul > li > ul.submenu-dein-yoga > li.no-separator:after,
.menu nav ul > li > ul.submenu-dein-yoga > li.nav-subitem-break:after {
    content: "";
}

/* =============================================================
   Menu-Items: nacheinander von rechts einblenden (staggered),
   sobald .menu.open aktiv ist. Annahme: die oberste <ul> in nav
   traegt die Klasse "nav-level-1" (ggf. in nav.php pruefen/anpassen).
   ============================================================= */
nav > .nav-level-1 li {
    opacity: 0;
    transform: translateX(50px);
}

.menu.open nav > .nav-level-1 li {
    animation: navItemIn 0.5s ease forwards;
}

.menu.open nav > .nav-level-1 li:nth-child(1)  { animation-delay: 0.1s; }
.menu.open nav > .nav-level-1 li:nth-child(2)  { animation-delay: 0.2s; }
.menu.open nav > .nav-level-1 li:nth-child(3)  { animation-delay: 0.3s; }
.menu.open nav > .nav-level-1 li:nth-child(4)  { animation-delay: 0.4s; }
.menu.open nav > .nav-level-1 li:nth-child(5)  { animation-delay: 0.5s; }
.menu.open nav > .nav-level-1 li:nth-child(6)  { animation-delay: 0.6s; }
.menu.open nav > .nav-level-1 li:nth-child(7)  { animation-delay: 0.7s; }
.menu.open nav > .nav-level-1 li:nth-child(8)  { animation-delay: 0.8s; }

@keyframes navItemIn {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    nav > .nav-level-1 li {
        animation: none;
        opacity: 1;
        transform: none;
    }
}


/* ==========================================================================
   ZONE MOBILE – max-width: 999px (einspaltig, kompakter)
   ========================================================================== */

@media (max-width: 999px) {

   	.menu nav ul {
        list-style: none;
        margin: 0 auto;
        padding: 0 0 0 0rem;
    }

	.menu nav > ul > li > ul {
		margin-bottom: 8px;
		display: block;
		position: relative;
	}

	.menu nav > ul > li {
		margin-bottom: 10px;
	}
}


/* ==========================================================================
   ZONE TABLET – 1000 bis 1600px (u. a. iPad Air 11" quer, CSS-Breite
   ca. 1180–1194px)

   Nur Abweichungen zum Desktop-Basis-Block oben. Die <ul> bekommt mehr
   Breite (90% → 97%) und weniger seitliches Padding, damit auf der
   schmaleren Tablet-Breite mehr Platz für die Menüpunkte bleibt – vor
   allem die längeren Zeilen wie "Private Lesson/Group & Business Yoga"
   brechen dadurch seltener um. Die äußere Breite des Menü-Panels
   (.menu selbst, das beige Feld) wird hier NICHT gesetzt – die kommt aus
   einer anderen CSS-Datei und müsste dort für diese Zone ergänzt werden,
   falls das Panel insgesamt breiter werden soll. */

@media (min-width: 1000px) and (max-width: 1600px) {

    .menu nav ul {
        width: 97%;
        padding-left: 0;
    }

    .menu nav > ul > li {
        margin-bottom: 16px;
    }

    .menu nav > ul > li > ul {
        margin-bottom: 16px;
    }
}


/* ==========================================================================
   ZONE DESKTOP – ab 1601px
   Keine Abweichungen nötig: entspricht den Basis-Regeln ganz oben in
   dieser Datei (width: 90% etc.). Platzhalter für künftige Desktop-
   spezifische Nachjustierungen.
   ========================================================================== */

@media (min-width: 1601px) {

}


@media (min-width: 1000px) and (max-width: 1600px) and (max-height:800px){
.menu.open h2 {
text-align: center;
margin-bottom: clamp(20px, 2vw, 50px);
line-height: 1rem;
padding-left: 1rem;
}

}