/* ============================================
   Liquid Glass Test Menu
   Ovales Menü mit drei Test-Buttons
   ============================================ */

.liquid-glass-test-menu {
    /* Component Tokens (no hardcoded px) */
    --liquid-glass-menu-collapsed-height: calc(var(--touch-target-min) + var(--spacing-sm)); /* 44px + 16px = 60px */
    --liquid-glass-menu-expanded-compact-height: calc((var(--touch-target-min) * 3) + var(--spacing-xs)); /* 44px * 3 + 8px = 140px */
    --liquid-glass-menu-expanded-services-height: calc(var(--liquid-glass-menu-collapsed-height) * 5); /* 60px * 5 = 300px */
    --liquid-glass-menu-pill-radius: calc(var(--liquid-glass-menu-collapsed-height) / 2);
    --liquid-glass-menu-button-height: calc(var(--touch-target-min) + (var(--spacing-xs) * 0.125)); /* 44px + 1px = 45px */
    --liquid-glass-menu-button-radius: calc(var(--liquid-glass-menu-button-height) / 2);
    /* Harmonisierung: gleicher Abstand zum Pillen-Rand wie zwischen den Buttons */
    --liquid-glass-menu-edge-padding: var(--spacing-xs);

    /* Menu Transparency (tint layer)
       Use token color + opacity (more robust than color-mix across browsers). */
    /* Default to LIGHT menu (menu-theme-light is applied on dark page backgrounds via JS) */
    --liquid-glass-menu-tint-color: var(--color-bg-light);
    --liquid-glass-menu-tint-opacity: 0.84;
    --liquid-glass-menu-tint-opacity-hover: 0.88;

    /* Menu Border (gradient overlay) */
    --liquid-glass-menu-border-strong: color-mix(in srgb, var(--color-white) 30%, transparent);
    --liquid-glass-menu-border-soft: color-mix(in srgb, var(--color-white) 14%, transparent);

    position: absolute; /* Identisch zur Navigationsleisten-Pille (position: absolute im Header) */
    /* Position identisch zur Navigationsleisten-Pille */
    /* menu2: obere Kante soll gleich bleiben, also top: calc(50% - 30px) für min-height 60px */
    top: calc(50% - (var(--liquid-glass-menu-collapsed-height) / 2)) !important; /* Obere Kante bleibt stabil - identisch zur Nav-Pille */
    left: 50% !important;
    transform: translate(-50%, 0) !important; /* Nur horizontal zentriert, vertikal oben fixiert - identisch zur Nav-Pille */
    z-index: var(--z-mobile-menu);
    display: none;
    width: min(calc(var(--container-max-width) * 0.45), calc(100vw - (var(--container-padding-mobile) * 2)));
    min-height: var(--liquid-glass-menu-collapsed-height);
    height: var(--liquid-glass-menu-collapsed-height); /* Feste Höhe für Animation */
    max-height: var(--liquid-glass-menu-collapsed-height); /* Start: zusammengeklappt - wichtig für Animation */
    border-radius: var(--liquid-glass-menu-pill-radius);
    background: transparent;
    pointer-events: auto;
    overflow: hidden; /* Wichtig: Damit Inhalt während Animation verborgen bleibt */
    /* Transition für smooth Animation zwischen Oval und Squircle - langsamer und smoother */
    /* height und max-height immer animieren */
    /* border-radius wird nur beim Einklappen animiert (siehe :not(.services-hovered) Regel) */
    transition: height 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
                max-height 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* On light backgrounds: JS applies menu-theme-dark (dark menu + light text) */
.liquid-glass-test-menu.menu-theme-dark {
    --liquid-glass-menu-tint-color: var(--color-primary);
    --liquid-glass-menu-tint-opacity: 0.72;
    --liquid-glass-menu-tint-opacity-hover: 0.76;
}

/* Browser-agnostic stability:
   Some Chromium engines can show intermittent bright seams at the right edge when combining
   backdrop-filter + SVG displacement + border-radius. We fix this by slightly overscanning
   the visual layers (≈1px) so no seam can appear, while keeping the full glass effect. */

/* Border-radius Animation nur beim Einklappen (nicht beim Ausklappen) */
.liquid-glass-test-menu:not(.services-hovered) {
    /* Beim Einklappen: border-radius animiert synchron mit Höhen-Animation - schneller */
    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);
}

/* Liquid Glass Wrapper für das Oval */
.liquid-glass-test-menu .liquidGlass-wrapper {
    width: 100%;
    height: 100%;
    border-radius: var(--liquid-glass-menu-pill-radius);
    /* border-radius wird nur beim Einklappen animiert (siehe :not(.services-hovered) Regel) */
    transition: none;
    display: flex;
    flex-direction: column;
    position: relative;
    /* Edge/Chromium stability: ensure blur/filter layers are clipped to the pill */
    overflow: hidden;
    isolation: isolate;
    contain: paint;

    /* ~1px overscan, derived from spacing token (8px / 8 = 1px) */
    --liquid-glass-menu-overscan: calc(var(--spacing-xs) / 8);
}

/* Menü soll NICHT den Content dahinter sichtbar verzerren:
   - eigener, softer SVG-Filter (separat von anderen LiquidGlass-Elementen)
   - stärkerer Blur für den „expanded“ Look auch im collapsed state */
.liquid-glass-test-menu .liquidGlass-effect {
    /* Overscan the effect layer to avoid edge seams */
    inset: calc(0px - var(--liquid-glass-menu-overscan));
    border-radius: calc(var(--liquid-glass-menu-pill-radius) + var(--liquid-glass-menu-overscan));
    filter: url(#glass-distortion-menu);
    -webkit-filter: url(#glass-distortion-menu);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.liquid-glass-test-menu > .liquidGlass-wrapper > .liquidGlass-tint {
    inset: calc(0px - var(--liquid-glass-menu-overscan));
    border-radius: calc(var(--liquid-glass-menu-pill-radius) + var(--liquid-glass-menu-overscan));
    background-color: var(--liquid-glass-menu-tint-color);
    opacity: var(--liquid-glass-menu-tint-opacity);
}

.liquid-glass-test-menu > .liquidGlass-wrapper:hover > .liquidGlass-tint {
    opacity: var(--liquid-glass-menu-tint-opacity-hover);
}

.liquid-glass-test-menu > .liquidGlass-wrapper > .liquidGlass-shine {
    inset: calc(0px - var(--liquid-glass-menu-overscan));
    border-radius: calc(var(--liquid-glass-menu-pill-radius) + var(--liquid-glass-menu-overscan));
    --shine-opacity: 0.18;
}

/* Dark-Menü: Entferne die helle Gradient-Border (wirkt wie „komischer Rand“) */
.liquid-glass-test-menu.menu-theme-dark .liquidGlass-wrapper::after {
    display: none;
}

/* Optional: falls noch ein Rand durch Shine entsteht, ebenfalls neutralisieren */
.liquid-glass-test-menu.menu-theme-dark .liquidGlass-shine {
    box-shadow: none;
}

/* Border-radius Animation nur beim Einklappen (nicht beim Ausklappen) */
.liquid-glass-test-menu:not(.services-hovered) .liquidGlass-wrapper {
    /* Beim Einklappen: border-radius animiert synchron mit Höhen-Animation - schneller */
    transition: none;
}

/* Button-Container innerhalb des Ovals */
.liquid-glass-test-menu .liquidGlass-button {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center; /* Buttons vertikal zentrieren in der ursprünglichen Höhe */
    justify-content: center;
    gap: var(--spacing-xs);
    padding: 0 var(--liquid-glass-menu-edge-padding);
    width: 100%;
    height: var(--liquid-glass-menu-collapsed-height); /* Fixe Höhe für Button-Container, damit Buttons zentriert bleiben */
    min-height: var(--liquid-glass-menu-collapsed-height);
    /* Position fixieren, damit Buttons nicht rutschen */
    position: relative;
    top: 0;
    /* Transition für smooth Animation */
    transition: padding var(--transition-base);
}

/* Button Container innerhalb des Ovals */
.liquid-glass-menu-button-container {
    width: 100%;
    min-width: var(--touch-target-min);
    height: var(--liquid-glass-menu-button-height);
    min-height: var(--liquid-glass-menu-button-height);
    border-radius: var(--liquid-glass-menu-button-radius);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    flex-grow: 0;
    padding: 0;
    box-sizing: border-box;
    /* Für <a> Tags: Entferne Standard-Link-Styles */
    text-decoration: none;
    color: inherit;
    display: block;
    /* Position fixieren, damit Buttons nicht rutschen */
    align-self: center;
    margin: 0;
}

.liquid-glass-menu-button-container {
    flex: 1;
    min-width: var(--touch-target-min);
}

/* Desktop */
@media (min-width: 1024px) {
    .liquid-glass-test-menu {
        display: block;
        /* etwas breiter: mehr Platz pro Menüpunkt (z.B. "Unternehmen") */
        width: min(
            calc(var(--container-max-width) * 0.55),
            calc(100vw - (var(--container-padding-desktop) * 2))
        );
    }

    /* Unternehmen-Menü Höhe auf Desktop */
    .liquid-glass-test-menu.unternehmen-hovered {
        height: var(--liquid-glass-menu-expanded-compact-height);
        min-height: var(--liquid-glass-menu-expanded-compact-height);
        max-height: var(--liquid-glass-menu-expanded-compact-height);
    }

    /* Karriere-Menü Höhe auf Desktop (2 Buttons) */
    .liquid-glass-test-menu.karriere-hovered {
        height: var(--liquid-glass-menu-expanded-compact-height);
        min-height: var(--liquid-glass-menu-expanded-compact-height);
        max-height: var(--liquid-glass-menu-expanded-compact-height);
    }
    
    .liquid-glass-menu-button-container {
        height: var(--liquid-glass-menu-button-height);
        min-height: var(--liquid-glass-menu-button-height);
    }
    
    .liquid-glass-menu-button-container:hover {
        height: var(--liquid-glass-menu-button-height);
        min-height: var(--liquid-glass-menu-button-height);
    }
    
    .liquid-glass-menu-button-container .liquidGlass-button {
        padding-left: var(--spacing-xs);
        padding-right: var(--spacing-xs);
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        height: var(--liquid-glass-menu-button-height) !important;
        min-height: var(--liquid-glass-menu-button-height) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* Button Text */
.liquid-glass-menu-button-text {
    font-family: 'Gilroy', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: color-mix(in srgb, var(--color-white) 95%, transparent);
    text-align: center;
    white-space: nowrap;
    /* Position fixieren, damit Text nicht rutscht */
    position: relative;
    line-height: 1;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-width: 0;
}

.liquid-glass-menu-button-container .liquidGlass-button {
    min-width: 0;
}

/* Text-Position beim Erweitern fixieren */
.liquid-glass-test-menu.services-hovered .liquid-glass-menu-button-text {
    position: relative !important;
    top: 0 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

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

.liquid-glass-menu-button-container .liquidGlass-shine {
    display: none;
}

.liquid-glass-menu-button-container .liquidGlass-wrapper::after {
    display: none;
}

/* Gradient-Border für Squircle-Zustand anpassen - dünner Rand bei größerer Fläche */
/* Wird per JavaScript-Klasse gesteuert, damit Timing kontrolliert werden kann */
.liquidGlass-wrapper.squircle-gradient-active::after {
    display: block !important;
    /* Angepasste Gradient-Stops für größere Fläche (300px Höhe für Services) */
    /* Dünner Rand: 0.5% statt 2% für proportional dünnen Rand */
    opacity: 0.55;
    background: linear-gradient(
        180deg,
        var(--liquid-glass-menu-border-strong) 0%,
        var(--liquid-glass-menu-border-soft) 0.25%,
        transparent 0.5%,
        transparent 99.5%,
        var(--liquid-glass-menu-border-soft) 99.75%,
        var(--liquid-glass-menu-border-strong) 100%
    ) !important;
    /* Transition für smooth Animation beim Entfernen der Klasse (Einklappen) */
    /* Dauer entspricht der Höhen-Transition (0.4s) damit Gradient-Stops erst zurückgesetzt werden, wenn Animation abgeschlossen ist */
    transition: background 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Gradient-Border für Unternehmen-Menü (140px Höhe statt 300px) */
/* Angepasste Gradient-Stops für kleinere Fläche */
.liquidGlass-wrapper.squircle-gradient-active-unternehmen::after {
    display: block !important;
    /* Angepasste Gradient-Stops für kleinere Fläche (140px Höhe für Unternehmen) */
    /* Etwas dickere Ränder, da die Fläche kleiner ist */
    opacity: 0.55;
    background: linear-gradient(
        180deg,
        var(--liquid-glass-menu-border-strong) 0%,
        var(--liquid-glass-menu-border-soft) 0.5%,
        transparent 1%,
        transparent 99%,
        var(--liquid-glass-menu-border-soft) 99.5%,
        var(--liquid-glass-menu-border-strong) 100%
    ) !important;
    /* Transition für smooth Animation beim Entfernen der Klasse (Einklappen) */
    /* Dauer entspricht der Höhen-Transition (0.4s) damit Gradient-Stops erst zurückgesetzt werden, wenn Animation abgeschlossen ist */
    transition: background 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* (No browser-specific overrides needed) */

/* Standard: Ursprüngliche Gradient-Stops (für 60px Höhe) werden von liquid-glass.css geerbt */
/* Werden per JavaScript-Klasse .squircle-gradient-active überschrieben wenn Squircle aktiv */

.liquid-glass-menu-button-container .liquidGlass-effect {
    filter: none;
    -webkit-filter: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.liquid-glass-menu-button-container .liquidGlass-tint {
    background: transparent !important;
}

/* Focus States für Links (Home, Karriere) */
.liquid-glass-menu-button-container:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: var(--liquid-glass-menu-button-radius);
}

/* Squircle-Zustand bei Hover über Services */
.liquid-glass-test-menu.services-hovered {
    height: var(--liquid-glass-menu-expanded-services-height); /* Minimale Höhe für alle 3 Level-2 Buttons pro Überschrift */
    min-height: var(--liquid-glass-menu-expanded-services-height);
    max-height: var(--liquid-glass-menu-expanded-services-height); /* Erweitert auf 60% der Breite */
    /* Obere Ecken bei 30px, untere Ecken bei 30px - sofortige Änderung beim Ausklappen */
    border-radius: var(--liquid-glass-menu-pill-radius); /* oben-links, oben-rechts, unten-rechts, unten-links */
    overflow: hidden; /* Stabileres Clipping (verhindert Edge Licht-Artefakte am Rand) */
    /* Keine Transition beim Ausklappen - sofortige Änderung */
    transition: none;
}

/* Buttons bleiben in der oberen Hälfte zentriert, auch wenn Menü erweitert wird */
.liquid-glass-test-menu.services-hovered .liquidGlass-button {
    height: var(--liquid-glass-menu-collapsed-height) !important; /* Buttons bleiben in der ursprünglichen Höhe zentriert */
    min-height: var(--liquid-glass-menu-collapsed-height) !important;
    align-items: center !important; /* Vertikal zentriert */
    position: relative !important;
    top: 0 !important; /* Position absolut fix */
    padding-top: 0 !important; /* Kein Padding oben, damit Position fix bleibt */
    padding-bottom: 0 !important;
}

/* Button-Container Position fixieren beim Erweitern */
.liquid-glass-test-menu.services-hovered .liquid-glass-menu-button-container {
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    position: relative !important;
    top: 0 !important;
}

/* Innere Liquid Glass Button-Elemente Position fixieren */
.liquid-glass-test-menu.services-hovered .liquid-glass-menu-button-container .liquidGlass-button {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: var(--liquid-glass-menu-button-height) !important;
    min-height: var(--liquid-glass-menu-button-height) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    top: 0 !important;
}

.liquid-glass-test-menu.services-hovered .liquidGlass-wrapper {
    /* Obere Ecken bei 30px, untere Ecken bei 30px - sofortige Änderung beim Ausklappen */
    border-radius: var(--liquid-glass-menu-pill-radius); /* oben-links, oben-rechts, unten-rechts, unten-links */
    /* Keine Transition beim Ausklappen - sofortige Änderung */
    transition: none;
}

/* Squircle-Zustand bei Hover über Unternehmen */
.liquid-glass-test-menu.unternehmen-hovered {
    height: var(--liquid-glass-menu-expanded-compact-height); /* Kleinere Höhe für 3 Buttons nebeneinander (ohne Überschriften) */
    min-height: var(--liquid-glass-menu-expanded-compact-height);
    max-height: var(--liquid-glass-menu-expanded-compact-height);
    /* Obere Ecken bei 30px, untere Ecken bei 30px - sofortige Änderung beim Ausklappen */
    border-radius: var(--liquid-glass-menu-pill-radius); /* oben-links, oben-rechts, unten-rechts, unten-links */
    overflow: hidden; /* Stabileres Clipping (verhindert Edge Licht-Artefakte am Rand) */
    /* Keine Transition beim Ausklappen - sofortige Änderung */
    transition: none;
}

/* Squircle-Zustand bei Hover über Karriere */
.liquid-glass-test-menu.karriere-hovered {
    height: var(--liquid-glass-menu-expanded-compact-height); /* Höhe für 2 Buttons nebeneinander */
    min-height: var(--liquid-glass-menu-expanded-compact-height);
    max-height: var(--liquid-glass-menu-expanded-compact-height);
    border-radius: var(--liquid-glass-menu-pill-radius);
    overflow: hidden; /* Stabileres Clipping (verhindert Edge Licht-Artefakte am Rand) */
    transition: none;
}

/* Buttons bleiben in der oberen Hälfte zentriert, auch wenn Menü erweitert wird */
.liquid-glass-test-menu.unternehmen-hovered .liquidGlass-button {
    height: var(--liquid-glass-menu-collapsed-height) !important; /* Buttons bleiben in der ursprünglichen Höhe zentriert */
    min-height: var(--liquid-glass-menu-collapsed-height) !important;
    align-items: center !important; /* Vertikal zentriert */
    position: relative !important;
    top: 0 !important; /* Position absolut fix */
    padding-top: 0 !important; /* Kein Padding oben, damit Position fix bleibt */
    padding-bottom: 0 !important;
}

/* Button-Container Position fixieren beim Erweitern */
.liquid-glass-test-menu.unternehmen-hovered .liquid-glass-menu-button-container {
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    position: relative !important;
    top: 0 !important;
}

/* Innere Liquid Glass Button-Elemente Position fixieren */
.liquid-glass-test-menu.unternehmen-hovered .liquid-glass-menu-button-container .liquidGlass-button {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: var(--liquid-glass-menu-button-height) !important;
    min-height: var(--liquid-glass-menu-button-height) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    top: 0 !important;
}

.liquid-glass-test-menu.unternehmen-hovered .liquidGlass-wrapper {
    /* Obere Ecken bei 30px, untere Ecken bei 30px - sofortige Änderung beim Ausklappen */
    border-radius: var(--liquid-glass-menu-pill-radius); /* oben-links, oben-rechts, unten-rechts, unten-links */
    /* Keine Transition beim Ausklappen - sofortige Änderung */
    transition: none;
}

/* ============================================
   Services Content (nur im ausgeklappten Zustand)
   ============================================ */

/* Services-Content-Container - Positionierung unterhalb der Buttons */
.liquid-glass-services-content {
    display: none; /* Standard: verborgen */
    grid-template-columns: 1.15fr 1.15fr; /* 2 Spalten: Links und Rechts gleich breit, leicht erhöhte Breite */
    gap: calc(var(--spacing-xs) * 0.5) var(--spacing-xl); /* Weniger horizontaler Abstand, damit Links einzeilig passen */
    padding: calc(var(--spacing-xs) * 0.5) var(--spacing-lg); /* Minimales Padding oben/unten (4px) */
    margin-top: var(--spacing-sm); /* Erhöhter Abstand zu Level 1 Buttons (16px) */
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%; /* Verhindert Überlauf */
    flex: 1;
    align-items: start; /* Überschriften oben ausrichten */
    position: relative;
    z-index: 10; /* Über der Tint (z-index: 1) */
}

/* Services-Content sichtbar im ausgeklappten Zustand */
.liquid-glass-test-menu.services-hovered .liquid-glass-services-content {
    display: grid;
}

/* Service-Title-Container - Überschriften */
.liquid-glass-service-title-container {
    width: 100%;
    margin-bottom: 2px; /* Reduzierter Abstand zu Level 2 Buttons (2px) */
    position: relative;
    z-index: 10; /* Über der Tint (z-index: 1) */
}

/* Erste Überschrift (Strategischer Weitblick) - Links, Zeile 1 */
.liquid-glass-services-content > .liquid-glass-service-title-container:first-child {
    grid-row: 1;
    grid-column: 1;
}

/* Zweite Überschrift (Operative Exzellenz) - Rechts, Zeile 1 */
/* Nach der ersten Überschrift (1) und 3 Kopien (2, 3, 4) = 5. Element */
.liquid-glass-services-content > .liquid-glass-service-title-container:nth-child(5) {
    grid-row: 1;
    grid-column: 2;
    justify-self: start;
    margin-right: 0;
}

/* Entferne Shine, Tint und Gradient von Liquid Glass Text-Elementen */
.liquid-glass-service-title-container .liquidGlass-shine {
    display: none !important;
}

.liquid-glass-service-title-container .liquidGlass-tint {
    display: none !important;
}

.liquid-glass-service-title-container .liquidGlass-effect {
    display: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.liquid-glass-service-title-container .liquidGlass-wrapper::after {
    display: none !important;
}

.liquid-glass-service-title-container .liquidGlass-text {
    color: rgba(255, 255, 255, 1.0) !important;
    font-family: 'Gilroy', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px !important;
    font-weight: 700;
    line-height: 1 !important;
    text-align: left;
    opacity: 1.0 !important;
    white-space: nowrap !important; /* Verhindert Zeilenumbruch */
}

/* Überschreibe auch alle möglichen Kind-Elemente */
.liquid-glass-service-title-container .liquidGlass-text * {
    color: rgba(255, 255, 255, 1.0) !important;
    opacity: 1.0 !important;
}

.liquid-glass-service-title {
    color: rgba(255, 255, 255, 1.0) !important;
    font-family: 'Gilroy', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px !important;
    font-weight: 700;
    line-height: 1 !important;
    margin: 0;
    padding: 0;
    opacity: 1.0 !important;
}

/* Sub-Menu-Buttons für Services */
.liquid-glass-sub-menu-button-container {
    width: 100%;
    margin-bottom: 2px; /* Reduzierter Abstand zwischen Buttons (2px) */
    position: relative;
    z-index: 10; /* Über der Tint (z-index: 1) */
}

/* Sub-Menu-Buttons im Unternehmen-Menü: Zentrierte Ausrichtung mit gleichmäßigen Abständen */
.liquid-glass-unternehmen-content .liquid-glass-sub-menu-button-container {
    width: auto; /* Auto-Breite für zentrierte Ausrichtung */
    max-width: 100%; /* Verhindert Überlauf */
    flex-shrink: 0; /* Verhindert, dass Buttons schrumpfen */
}

/* Erste 3 Sub-Menu-Buttons (Strategischer Weitblick) - Links, Zeilen 2-4 */
.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;
}

/* Zweite 3 Sub-Menu-Buttons (Operative Exzellenz) - Rechts, Zeilen 2-4 */
.liquid-glass-services-content > .liquid-glass-sub-menu-button-container:nth-child(6) {
    grid-row: 2;
    grid-column: 2;
    justify-self: start;
    margin-right: 0;
}

.liquid-glass-services-content > .liquid-glass-sub-menu-button-container:nth-child(7) {
    grid-row: 3;
    grid-column: 2;
    justify-self: start;
    margin-right: 0;
}

.liquid-glass-services-content > .liquid-glass-sub-menu-button-container:nth-child(8) {
    grid-row: 4;
    grid-column: 2;
    justify-self: start;
    margin-right: 0;
}

/* Services Links: auf Desktop einzeilig, ohne Layout zu sprengen */
@media (min-width: 1024px) {
    .liquid-glass-services-content .liquidGlass-text,
    .liquid-glass-services-content .liquid-glass-sub-menu-button {
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Entferne Shine, Tint und Gradient von Liquid Glass Text-Elementen (Sub-Menu-Buttons) */
.liquid-glass-sub-menu-button-container .liquidGlass-shine {
    display: none !important;
}

.liquid-glass-sub-menu-button-container .liquidGlass-tint {
    display: none !important;
}

.liquid-glass-sub-menu-button-container .liquidGlass-effect {
    display: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.liquid-glass-sub-menu-button-container .liquidGlass-wrapper::after {
    display: none !important;
}

.liquid-glass-sub-menu-button-container {
    cursor: pointer !important;
    text-decoration: none;
    color: inherit;
}

/* Stelle sicher, dass alle Kindelemente ebenfalls pointer Cursor haben */
.liquid-glass-sub-menu-button-container * {
    cursor: pointer !important;
}

.liquid-glass-sub-menu-button-container .liquidGlass-text {
    color: var(--submenu-text-color, rgba(255, 255, 255, 1.0)) !important;
    font-family: 'Gilroy', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    text-align: left;
    opacity: 1.0 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    transition: color var(--transition-base), font-weight var(--transition-base);
}

/* Hover: Türkis-Farbe */
.liquid-glass-sub-menu-button-container:hover .liquidGlass-text {
    color: rgba(0, 164, 152, 1.0) !important; /* Style Guide Türkis #00A498 */
    font-weight: 500 !important;
}

.liquid-glass-sub-menu-button-container:hover .liquid-glass-sub-menu-button {
    color: rgba(0, 164, 152, 1.0) !important; /* Style Guide Türkis #00A498 */
    font-weight: 500 !important;
}

/* Active/Clicked: Türkis-Farbe + font-weight 700 */
.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 {
    color: rgba(0, 164, 152, 1.0) !important; /* Style Guide Türkis #00A498 */
    font-weight: 700 !important;
}

.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: rgba(0, 164, 152, 1.0) !important; /* Style Guide Türkis #00A498 */
    font-weight: 700 !important;
}

.liquid-glass-sub-menu-button-container .liquidGlass-text * {
    color: var(--submenu-text-color, rgba(255, 255, 255, 1.0)) !important;
    opacity: 1.0 !important;
}

.liquid-glass-sub-menu-button {
    color: var(--submenu-text-color, rgba(255, 255, 255, 1.0)) !important;
    font-family: 'Gilroy', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    margin: 0;
    padding: 0;
    opacity: 1.0 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    transition: color var(--transition-base), font-weight var(--transition-base);
}

/* Focus States für Sub-Menu-Buttons */
.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 (nur im ausgeklappten Zustand)
   ============================================ */

/* Unternehmen-Content-Container - Positionierung unterhalb der Buttons */
.liquid-glass-unternehmen-content {
    display: none; /* Standard: verborgen */
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    justify-content: center; /* Gruppe mittig */
    justify-items: center;
    column-gap: var(--spacing-lg);
    padding: calc(var(--spacing-xs) * 0.5) var(--spacing-lg); /* Minimales Padding oben/unten (4px) */
    margin-top: var(--spacing-sm); /* Abstand zu Level 1 Buttons (16px) */
    width: 100%;
    align-items: center;
    position: relative;
    z-index: 10; /* Über der Tint (z-index: 1) */
}

/* Unternehmen-Content sichtbar im ausgeklappten Zustand */
.liquid-glass-test-menu.unternehmen-hovered .liquid-glass-unternehmen-content {
    display: grid;
}

/* ============================================
   Karriere Content (nur im ausgeklappten Zustand)
   ============================================ */

.liquid-glass-karriere-content {
    display: none;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    justify-content: center; /* Gruppe mittig */
    justify-items: center;
    column-gap: var(--spacing-lg);
    padding: calc(var(--spacing-xs) * 0.5) var(--spacing-lg);
    margin-top: var(--spacing-sm);
    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%;
    /* Harmonisierung: keine Auto-Margins auf Flex-Items,
       sonst „ziehen“ sie die Items auseinander und Abstände wirken inkonsistent */
    margin: 0;
}

/* Karriere/Unternehmen: Submenu-Items wirklich als „shrink-to-content“ behandeln
   (LiquidGlass setzt intern width: 100% auf .liquidGlass-text, was sonst die Flex-Items auseinanderzieht) */
.liquid-glass-unternehmen-content .liquid-glass-sub-menu-button-container,
.liquid-glass-karriere-content .liquid-glass-sub-menu-button-container {
    flex: 0 0 auto;
}

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

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

/* Note: Karriere/Unternehmen Submenus are laid out via grid-auto-flow above to keep items optically centered. */

/* Tablet: Anpassung der Höhe für Unternehmen-Menü */
@media (min-width: 768px) {
    .liquid-glass-test-menu.unternehmen-hovered {
        height: var(--liquid-glass-menu-expanded-compact-height);
        min-height: var(--liquid-glass-menu-expanded-compact-height);
        max-height: var(--liquid-glass-menu-expanded-compact-height);
    }
}

/* Desktop: Anpassung der Höhe für Unternehmen-Menü */
@media (min-width: 1024px) {
    .liquid-glass-test-menu.unternehmen-hovered {
        height: var(--liquid-glass-menu-expanded-compact-height);
        min-height: var(--liquid-glass-menu-expanded-compact-height);
        max-height: var(--liquid-glass-menu-expanded-compact-height);
    }
}

/* Entferne Shine, Tint und Gradient von Liquid Glass Text-Elementen (Unternehmen Sub-Menu-Buttons) */
.liquid-glass-unternehmen-content .liquid-glass-sub-menu-button-container .liquidGlass-shine {
    display: none !important;
}

.liquid-glass-unternehmen-content .liquid-glass-sub-menu-button-container .liquidGlass-tint {
    display: none !important;
}

.liquid-glass-unternehmen-content .liquid-glass-sub-menu-button-container .liquidGlass-effect {
    display: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.liquid-glass-unternehmen-content .liquid-glass-sub-menu-button-container .liquidGlass-wrapper::after {
    display: none !important;
}