/* ============================================
   Liquid Glass Pill Menu
   Kompakt, ohne Glas-Effekt, vereinfacht
   ============================================ */

.liquid-glass-test-menu {
    /* Component Tokens */
    --pill-h: calc(var(--touch-target-min) + var(--spacing-sm)); /* 60px */
    --pill-r: calc(var(--pill-h) / 2);
    --pill-w: min(calc(var(--container-max-width) * 0.45), calc(100vw - (var(--container-padding-mobile) * 2)));
    --btn-h: calc(var(--touch-target-min) + 1px); /* 45px */
    --btn-r: calc(var(--btn-h) / 2);
    --expanded-compact-h: calc(var(--pill-h) * 2.5); /* ~150px - Platz für gleiche Abstände */
    --expanded-services-h: calc(var(--pill-h) * 5); /* 300px */

    /* Theme - default: light menu */
    --pill-tint-color: var(--color-bg-light);
    --pill-tint-opacity: 0.82;

    position: absolute;
    top: calc(50% - (var(--pill-h) / 2)) !important;
    left: 50% !important;
    transform: translate(-50%, 0) !important;
    z-index: var(--z-mobile-menu);
    display: none;
    width: var(--pill-w);
    max-width: var(--pill-w);
    height: var(--pill-h);
    min-height: var(--pill-h);
    max-height: var(--pill-h);
    border-radius: var(--pill-r);
    background: transparent;
    pointer-events: auto;
    overflow: hidden;
    /* Blur direkt auf dem Container - funktioniert zuverlässig in allen States */
    backdrop-filter: blur(24px) saturate(120%);
    -webkit-backdrop-filter: blur(24px) saturate(120%);
    transition: height 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
                max-height 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Dark theme */
.liquid-glass-test-menu.menu-theme-dark {
    --pill-tint-color: var(--color-primary);
    --pill-tint-opacity: 0.72;
}

/* Desktop: sichtbar */
@media (min-width: 1024px) {
    .liquid-glass-test-menu {
        display: block;
        --pill-w: min(calc(var(--container-max-width) * 0.45), calc(100vw - (var(--container-padding-desktop) * 2)));
    }
}

/* ============================================
   Wrapper (ohne Glas-Effekt)
   ============================================ */

.liquid-glass-test-menu .liquidGlass-wrapper {
    width: 100%;
    height: 100%;
    border-radius: var(--pill-r);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* Effect, Shine und Gradient-Border deaktiviert (Blur ist auf dem Container) */
.liquid-glass-test-menu > .liquidGlass-wrapper > .liquidGlass-effect,
.liquid-glass-test-menu > .liquidGlass-wrapper > .liquidGlass-shine,
.liquid-glass-test-menu > .liquidGlass-wrapper::after {
    display: none !important;
}

/* Tint = Hintergrundfarbe der Pille (reduzierte Opacity, Blur übernimmt Lesbarkeit) */
.liquid-glass-test-menu > .liquidGlass-wrapper > .liquidGlass-tint {
    inset: 0;
    border-radius: var(--pill-r);
    background-color: var(--pill-tint-color);
    opacity: var(--pill-tint-opacity);
}

/* ============================================
   Button Grid (3 gleich breite Buttons)
   ============================================ */

.liquid-glass-test-menu > .liquidGlass-wrapper > .liquidGlass-button {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0 var(--spacing-xs);
    width: 100%;
    height: var(--pill-h);
    min-height: var(--pill-h);
    position: relative;
}

/* Einzelner Button */
.liquid-glass-menu-button-container {
    width: 100%;
    height: var(--btn-h);
    min-height: var(--btn-h);
    border-radius: var(--btn-r);
    cursor: pointer;
    position: relative;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
    display: block;
}

/* Button LiquidGlass: alles deaktiviert außer Tint für Hover */
.liquid-glass-menu-button-container .liquidGlass-effect,
.liquid-glass-menu-button-container .liquidGlass-shine,
.liquid-glass-menu-button-container .liquidGlass-wrapper::after {
    display: none !important;
}

.liquid-glass-menu-button-container .liquidGlass-tint {
    background: transparent !important;
    transition: background-color var(--transition-base);
}

/* Hover: Türkis-Tint auf Button-Hintergrund (kein Textfarben-Wechsel!) */
.liquid-glass-test-menu .liquid-glass-menu-button-container:hover .liquidGlass-tint {
    background: color-mix(in srgb, var(--color-secondary) 30%, transparent) !important;
}

.liquid-glass-menu-button-container .liquidGlass-wrapper {
    border-radius: var(--btn-r);
    width: 100%;
    height: 100%;
}

.liquid-glass-menu-button-container .liquidGlass-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 var(--spacing-sm);
    min-width: 0;
}

.liquid-glass-menu-button-container:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: var(--btn-r);
}

/* ============================================
   Button Text (keine Farbänderung beim Hover)
   ============================================ */

.liquid-glass-button-text {
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-align: center;
    white-space: nowrap;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-width: 0;
}

/* Theme-basierte Textfarben (auch für selected/active States, überschreibt inherit aus liquid-glass.css) */
.liquid-glass-test-menu:not(.menu-theme-dark) .liquid-glass-button-text,
.liquid-glass-test-menu:not(.menu-theme-dark) .liquid-glass-menu-button-container .liquidGlass-button {
    color: var(--color-primary) !important;
}

.liquid-glass-test-menu.menu-theme-dark .liquid-glass-button-text,
.liquid-glass-test-menu.menu-theme-dark .liquid-glass-menu-button-container .liquidGlass-button {
    color: var(--color-white) !important;
}

/* ============================================
   Expanded States (gemeinsame Regeln)
   ============================================ */

.liquid-glass-test-menu.services-hovered,
.liquid-glass-test-menu.unternehmen-hovered,
.liquid-glass-test-menu.karriere-hovered {
    border-radius: var(--pill-r);
    overflow: hidden;
    transition: none;
}

.liquid-glass-test-menu.services-hovered .liquidGlass-wrapper,
.liquid-glass-test-menu.unternehmen-hovered .liquidGlass-wrapper,
.liquid-glass-test-menu.karriere-hovered .liquidGlass-wrapper {
    border-radius: var(--pill-r);
    transition: none;
    position: relative;
    z-index: 1;
}

/* Buttons bleiben oben fixiert */
.liquid-glass-test-menu.services-hovered > .liquidGlass-wrapper > .liquidGlass-button,
.liquid-glass-test-menu.unternehmen-hovered > .liquidGlass-wrapper > .liquidGlass-button,
.liquid-glass-test-menu.karriere-hovered > .liquidGlass-wrapper > .liquidGlass-button {
    height: var(--pill-h);
    min-height: var(--pill-h);
    align-items: center;
}

/* Gradient-Border im expanded State ausblenden */
.liquidGlass-wrapper.squircle-gradient-active::after,
.liquidGlass-wrapper.squircle-gradient-active-unternehmen::after {
    display: none !important;
}

/* Services expanded: groß */
.liquid-glass-test-menu.services-hovered {
    height: var(--expanded-services-h);
    min-height: var(--expanded-services-h);
    max-height: var(--expanded-services-h);
}

/* Unternehmen & Karriere expanded: kompakt */
.liquid-glass-test-menu.unternehmen-hovered,
.liquid-glass-test-menu.karriere-hovered {
    height: var(--expanded-compact-h);
    min-height: var(--expanded-compact-h);
    max-height: var(--expanded-compact-h);
}

/* ============================================
   Services Content (Dropdown)
   ============================================ */

.liquid-glass-services-content {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--spacing-xs) * 0.5) var(--spacing-2xl);
    padding: var(--spacing-lg);
    margin-top: 0;
    width: 100%;
    max-width: 100%;
    flex: 1;
    align-items: start;
    position: relative;
    z-index: 10;
}

.liquid-glass-test-menu.services-hovered .liquid-glass-services-content {
    display: grid;
}

/* Grid-Positionierung */
.liquid-glass-services-content > .liquid-glass-service-title-container:first-child {
    grid-row: 1;
    grid-column: 1;
}

.liquid-glass-services-content > .liquid-glass-service-title-container:nth-child(5) {
    grid-row: 1;
    grid-column: 2;
}

.liquid-glass-services-content > .liquid-glass-sub-menu-button-container:nth-child(2) { grid-row: 2; grid-column: 1; }
.liquid-glass-services-content > .liquid-glass-sub-menu-button-container:nth-child(3) { grid-row: 3; grid-column: 1; }
.liquid-glass-services-content > .liquid-glass-sub-menu-button-container:nth-child(4) { grid-row: 4; grid-column: 1; }
.liquid-glass-services-content > .liquid-glass-sub-menu-button-container:nth-child(6) { grid-row: 2; grid-column: 2; }
.liquid-glass-services-content > .liquid-glass-sub-menu-button-container:nth-child(7) { grid-row: 3; grid-column: 2; }
.liquid-glass-services-content > .liquid-glass-sub-menu-button-container:nth-child(8) { grid-row: 4; grid-column: 2; }

/* Sub-Menu-Items im Services-Dropdown: zweizeilig erzwingen */
.liquid-glass-services-content .liquid-glass-sub-menu-button-container .liquidGlass-text,
.liquid-glass-services-content .liquid-glass-sub-menu-button {
    max-width: 12em;
}

/* ============================================
   Service Titles
   ============================================ */

.liquid-glass-service-title-container {
    width: 100%;
    margin-bottom: var(--radius-xs);
    position: relative;
    z-index: 10;
}

/* LiquidGlass-Struktur auf Titeln neutralisieren */
.liquid-glass-service-title-container .liquidGlass-shine,
.liquid-glass-service-title-container .liquidGlass-tint,
.liquid-glass-service-title-container .liquidGlass-effect,
.liquid-glass-service-title-container .liquidGlass-wrapper::after {
    display: none !important;
}

.liquid-glass-service-title-container .liquidGlass-wrapper {
    overflow: visible !important;
    height: auto;
    transform: none;
    background: transparent;
    contain: none;
    isolation: auto;
}

.liquid-glass-service-title-container .liquidGlass-text {
    width: 100%;
    height: auto;
    padding: 0;
}

.liquid-glass-service-title-container .liquidGlass-text,
.liquid-glass-service-title {
    color: rgba(255, 255, 255, 1.0) !important;
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-bold);
    line-height: 1 !important;
    text-align: left;
    opacity: 1.0 !important;
    margin: 0;
}

/* ============================================
   Sub-Menu Buttons (für alle Dropdowns)
   ============================================ */

.liquid-glass-sub-menu-button-container {
    width: 100%;
    margin-bottom: var(--radius-xs);
    position: relative;
    z-index: 10;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.liquid-glass-sub-menu-button-container * {
    cursor: pointer;
}

/* LiquidGlass-Struktur auf Sub-Menu-Items neutralisieren */
.liquid-glass-sub-menu-button-container .liquidGlass-shine,
.liquid-glass-sub-menu-button-container .liquidGlass-tint,
.liquid-glass-sub-menu-button-container .liquidGlass-effect,
.liquid-glass-sub-menu-button-container .liquidGlass-wrapper::after {
    display: none !important;
}

/* Wrapper: kein Clipping, keine feste Höhe, kein Layout-Einfluss */
.liquid-glass-sub-menu-button-container .liquidGlass-wrapper {
    overflow: visible !important;
    height: auto;
    transform: none;
    background: transparent;
    contain: none;
    isolation: auto;
}

/* Text: kein Padding vom Base, automatische Breite, Umbruch erlaubt */
.liquid-glass-sub-menu-button-container .liquidGlass-text {
    width: auto;
    height: auto;
    padding: 0;
    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    pointer-events: auto;
}

.liquid-glass-sub-menu-button-container .liquidGlass-text,
.liquid-glass-sub-menu-button {
    color: var(--submenu-text-color, rgba(255, 255, 255, 1.0)) !important;
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-medium) !important;
    line-height: 1.3 !important;
    text-align: left;
    opacity: 1.0 !important;
    margin: 0;
    transition: color var(--transition-base);
}

/* Hover: nur Textfarbe ändert sich (Türkis) */
.liquid-glass-sub-menu-button-container:hover .liquidGlass-text,
.liquid-glass-sub-menu-button-container:hover .liquid-glass-sub-menu-button {
    color: var(--color-hover) !important;
}

/* Active/Selected: Türkis + Bold */
.liquid-glass-sub-menu-button-container:active .liquidGlass-text,
.liquid-glass-sub-menu-button-container.active .liquidGlass-text,
.liquid-glass-sub-menu-button-container.selected .liquidGlass-text,
.liquid-glass-sub-menu-button-container:active .liquid-glass-sub-menu-button,
.liquid-glass-sub-menu-button-container.active .liquid-glass-sub-menu-button,
.liquid-glass-sub-menu-button-container.selected .liquid-glass-sub-menu-button {
    color: var(--color-hover) !important;
    font-weight: var(--font-weight-bold) !important;
}

.liquid-glass-sub-menu-button-container:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: calc(var(--spacing-xs) * 0.5);
}

/* ============================================
   Unternehmen Content (Dropdown)
   ============================================ */

.liquid-glass-unternehmen-content {
    display: none;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    justify-content: center;
    column-gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    margin-top: 0;
    width: 100%;
    align-items: center;
    position: relative;
    z-index: 10;
}

.liquid-glass-test-menu.unternehmen-hovered .liquid-glass-unternehmen-content {
    display: grid;
}

.liquid-glass-unternehmen-content .liquid-glass-sub-menu-button-container {
    width: auto;
    max-width: 100%;
    flex: 0 0 auto;
    margin: 0;
}

.liquid-glass-unternehmen-content .liquidGlass-wrapper {
    width: auto;
}

.liquid-glass-unternehmen-content .liquidGlass-text {
    width: auto;
    justify-content: center;
    padding: 0 var(--spacing-sm);
}

/* ============================================
   Karriere Content (Dropdown)
   ============================================ */

.liquid-glass-karriere-content {
    display: none;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    justify-content: center;
    column-gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    margin-top: 0;
    width: 100%;
    align-items: center;
    position: relative;
    z-index: 10;
}

.liquid-glass-test-menu.karriere-hovered .liquid-glass-karriere-content {
    display: grid;
}

.liquid-glass-karriere-content .liquid-glass-sub-menu-button-container {
    width: auto;
    max-width: 100%;
    flex: 0 0 auto;
    margin: 0;
}

.liquid-glass-karriere-content .liquidGlass-wrapper {
    width: auto;
}

.liquid-glass-karriere-content .liquidGlass-text {
    width: auto;
    justify-content: center;
    padding: 0 var(--spacing-sm);
}