/* 1. Schriftart Poppins global für das Popup laden (falls nicht schon im Theme aktiv) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

/* 2. Apple Liquid / Glassmorphism Hintergrund für das Popup */
#elementor-popup-modal-312 .dialog-widget-content {
    background-color: #1C3C50bf !important; /* Dein Weiß (#FCFCFC), aber 75% transparent */
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%); /* Für Safari / Apple Geräte */
    border-radius: 0 24px 24px 0 !important; /* Abgerundete Ecken rechts, da es von links reinfährt */
    box-shadow: 4px 0 30px rgba(28, 61, 79, 0.08) !important; /* Sehr weicher Schatten in deiner Hauptfarbe */
    border-right: 1px solid #1C3C50; /* Leichter Glas-Rand */
}

/* 3. Menü-Typografie & Container */
#elementor-popup-modal-312 .elementor-nav-menu {
    font-family: 'Poppins', sans-serif !important;
    padding-top: 20px;
}

/* 4. Haupt-Menüpunkte (Ebene 1) */
#elementor-popup-modal-312 .elementor-nav-menu a.elementor-item {
    color: #fff !important; /* Deine Hauptfarbe */
    font-size: 24px !important;
    font-weight: 600 !important;
    padding: 15px 20px !important;
    border-radius: 12px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; /* Apple-typische, softe Transition */
}

/* 5. Hover & Aktiver Zustand für Ebene 1 */
#elementor-popup-modal-312 .elementor-sub-item.elementor-item-active,
#elementor-popup-modal-312 .elementor-nav-menu a.elementor-item:hover,
#elementor-popup-modal-312 .elementor-nav-menu a.elementor-item.elementor-item-active {
    background-color: #1C3C50 !important; /* Sanfter Highlight-Effekt in deiner Farbe */
    transform: translateX(5px); /* Bewegt sich beim Hover leicht nach rechts */
}

/* 6. Untermenüpunkte (Ebene 2) */
#elementor-popup-modal-312 .elementor-nav-menu .sub-menu {
    background: transparent !important; /* Kein eigener Hintergrund, soll durchsichtig bleiben */
    box-shadow: none !important;
    border: none !important;
    padding-left: 15px !important; /* Leichte Einrückung für die visuelle Hierarchie */
    margin-top: 5px !important;
}

#elementor-popup-modal-312 .elementor-nav-menu .sub-menu a.elementor-sub-item {
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
}

#elementor-popup-modal-312 .elementor-nav-menu .sub-menu a.elementor-sub-item:hover {
    background-color: rgba(28, 61, 79, 0.05) !important;
}

/* 7. Dropdown-Pfeil anpassen */
#elementor-popup-modal-312 .elementor-nav-menu .sub-arrow svg {
    fill: #fff !important;
    width: 14px !important;
}

/* 8. Schließen-Button (X) im Apple-Style */
#elementor-popup-modal-312 .dialog-close-button {
    top: 20px !important;
    right: 20px !important;
    background-color: rgba(28, 61, 79, 0.05) !important;
    border-radius: 50% !important;
    padding: 12px !important;
    transition: all 0.3s ease !important;
}

#elementor-popup-modal-312 .dialog-close-button:hover {
    background-color: rgba(28, 61, 79, 0.15) !important;
    transform: rotate(90deg); /* Schöner Apple-Spielerei-Effekt */
}

#elementor-popup-modal-312 .dialog-close-button svg {
    fill: #1C3D4F !important;
    width: 16px !important;
    height: 16px !important;
}