/* ============================================================
   tauch-auf: schwebende Kopfzeile
   Gestaltung vollstaendig auf den Variablen des Design-Systems.
   ============================================================ */

/* Der Traeger darf keinen Platz belegen. Die Pille liegt fixiert
   darueber, damit der Hero ganz oben beginnt. */
.elementor-location-header {
    position: relative;
    z-index: 999;
}

.elementor-location-header > .e-con,
.elementor-location-header > .elementor-section {
    padding: 0;
    min-height: 0;
}

/* ---------- Die Pille ---------- */

.pill-nav-container-65d888e4 {
    position: fixed;
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    width: min(calc(100% - 3rem), 76rem);
    z-index: 999;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;

    padding: 0.8rem 1rem 0.8rem 1.35rem;
    border-radius: var(--radius-pill, 999px);

    background-color: color-mix(in srgb, var(--color-surface-deep) 72%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-highlight) 38%, transparent);
    box-shadow: 0 18px 50px rgba(16, 26, 32, 0.28);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    transition: transform 0.6s ease, opacity 0.6s ease;
}

/* Zustand aus dem Nav-Skript: abwaerts weg, aufwaerts wieder da.
   Die Verschiebung muss die Zentrierung mittragen. */
.pill-nav-container-65d888e4.is-hidden {
    transform: translateX(-50%) translateY(calc(-100% - 2rem));
    opacity: 0;
}

/* ---------- Platz fuer die Pille ---------- */
/* Die Kopfzeile belegt keinen Platz mehr, also muss der erste
   Abschnitt ihn selbst mitbringen. Die Regel steht hier und nicht
   in der Klasse tauch-hero-quiet, weil der Abstand nur existiert,
   solange die Kopfzeile schwebt. */

.elementor .elementor-element.tauch-hero-quiet {
    padding-top: clamp(4.5rem, 7vh, 6rem);
}

@media (max-width: 767px) {
    .elementor .elementor-element.tauch-hero-quiet {
        padding-top: clamp(3rem, 5vh, 4rem);
    }
}

/* ---------- Logo und rechte Gruppe ---------- */

.pill-nav-left-65d888e4,
.pill-nav-right-65d888e4 {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.pill-nav-logo-65d888e4 {
    max-height: 34px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* ---------- Menue ---------- */

.pill-nav-center-65d888e4 {
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

.pill-nav-ul-65d888e4 {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 2.2vw, 2rem);
}

/* Schnitt 400 statt 500: Der Schnitt 500 von Manrope wurde sonst nur
   fuer dieses Menue geladen, 31 kB im kritischen Pfad fuer sechs
   Woerter. 400 traegt ohnehin den gesamten Fliesstext. */
.pill-nav-menu-item-65d888e4,
.wp-menu-65d888e4 li a {
    display: inline-block;
    position: relative;
    overflow: hidden;
    line-height: 1.2;
    text-decoration: none;
    color: var(--color-text-inverse, #F7F4EE);
    font-size: 0.9375rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    transition: color 0.3s ease;
}

.pill-nav-menu-item-65d888e4:hover,
.pill-nav-menu-item-65d888e4:focus-visible,
.wp-menu-65d888e4 li a:hover,
.pill-nav-container-65d888e4 a.active {
    color: var(--color-highlight, #9DD7CF);
}

/* Der Abrolleffekt beim Ueberfahren */
.pill-nav-text-65d888e4,
.wp-menu-65d888e4 li a span.roll-text {
    display: block;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}

.pill-nav-text-65d888e4::after,
.wp-menu-65d888e4 li a span.roll-text::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
}

.pill-nav-menu-item-65d888e4:hover .pill-nav-text-65d888e4,
.pill-nav-menu-item-65d888e4:focus-visible .pill-nav-text-65d888e4,
.wp-menu-65d888e4 li a:hover span.roll-text {
    transform: translateY(-100%);
}

/* ---------- Der Knopf ---------- */

.pill-nav-cta-65d888e4 {
    display: inline-block;
    background-color: var(--color-highlight, #9DD7CF);
    color: var(--color-text, #101A20);
    padding: 0.7rem 1.4rem;
    border-radius: var(--radius-pill, 999px);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.pill-nav-cta-65d888e4:hover,
.pill-nav-cta-65d888e4:focus-visible {
    background-color: var(--color-primary, #2F6F68);
    color: var(--color-text-inverse, #F7F4EE);
}

/* ---------- Tastaturfokus ---------- */

.pill-nav-container-65d888e4 a:focus-visible,
.pill-nav-container-65d888e4 button:focus-visible {
    outline: 2px solid var(--color-highlight, #9DD7CF);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ---------- Burger ---------- */

.pill-nav-mobile-toggle-65d888e4 {
    display: none;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    width: 26px !important;
    height: 18px !important;
    position: relative;
    z-index: 101;
    box-shadow: none !important;
    min-width: unset !important;
    min-height: unset !important;
}

.pill-nav-mobile-toggle-65d888e4::before,
.pill-nav-mobile-toggle-65d888e4::after {
    display: none !important;
}

.pill-nav-mobile-toggle-65d888e4 span {
    display: block;
    height: 2px !important;
    width: 100% !important;
    background: var(--color-text-inverse, #F7F4EE);
    position: absolute;
    left: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    transition: all 0.3s ease;
}

.pill-nav-mobile-toggle-65d888e4 span:nth-child(1) { top: 0; }
.pill-nav-mobile-toggle-65d888e4 span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.pill-nav-mobile-toggle-65d888e4 span:nth-child(3) { bottom: 0; }

.pill-nav-mobile-toggle-65d888e4.active span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.pill-nav-mobile-toggle-65d888e4.active span:nth-child(2) { opacity: 0; }
.pill-nav-mobile-toggle-65d888e4.active span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

/* ---------- Handy und kleines Tablet ---------- */
/* Wichtig: Der Klappzustand haengt hier NICHT am JavaScript.
   Die Vorlage vergab die Klasse mobile-dropdown erst beim Start
   des Skripts, dadurch stand das Menue bis dahin offen ueber dem
   Hero. Geoeffnet wird ueber .active, das setzt das Skript beim
   Klick, und vorher ist nichts zu sehen. */

@media (max-width: 768px) {

    .pill-nav-container-65d888e4 {
        width: calc(100% - 2rem);
        top: 0.75rem;
        gap: 0.75rem;
        padding: 0.6rem 0.8rem 0.6rem 0.9rem;
    }

    .pill-nav-left-65d888e4 { order: 1; }
    .pill-nav-right-65d888e4 { order: 2; display: flex; margin-left: auto; }
    .pill-nav-mobile-toggle-65d888e4 { order: 3; display: block; flex-shrink: 0; }

    .pill-nav-logo-65d888e4 { max-height: 26px; }

    .pill-nav-cta-65d888e4 {
        padding: 0.5rem 0.85rem;
        font-size: 0.8125rem;
    }

    .pill-nav-center-65d888e4,
    .pill-nav-center-65d888e4.mobile-dropdown {
        position: absolute;
        top: calc(100% + 0.75rem);
        left: 0;
        right: 0;
        display: block;
        padding: 1.25rem;
        border-radius: var(--radius-lg, 2rem);
        background-color: color-mix(in srgb, var(--color-surface-deep) 94%, transparent);
        border: 1px solid color-mix(in srgb, var(--color-highlight) 30%, transparent);
        box-shadow: 0 20px 50px rgba(16, 26, 32, 0.35);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
        z-index: 99;
    }

    .pill-nav-center-65d888e4.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .pill-nav-ul-65d888e4 {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .pill-nav-menu-item-65d888e4 {
        font-size: 1.0625rem;
    }
}

/* ---------- Reduzierte Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {

    .pill-nav-container-65d888e4,
    .pill-nav-text-65d888e4,
    .pill-nav-center-65d888e4,
    .wp-menu-65d888e4 li a {
        transition: none;
    }

    .pill-nav-container-65d888e4.is-hidden {
        transform: translateX(-50%);
        opacity: 1;
    }
}