/* ============================================================================= * nav-dropdown.css — Whitestone Immobilien Luxemburg * ----------------------------------------------------------------------------- * Dropdown-Untermenü "Leistungen" für die Hauptnavigation. * Geteiltes Stylesheet — auf allen Seiten als LETZTES im * eingebunden, damit es die seiteneigenen Inline-Styles sauber überschreibt. * * Markup-Muster (identisch auf jeder Seite): *
* Leistungen ← Trigger (bestehender Link) * … * *
* * Funktionsweise: reines CSS, kein JS. Panel öffnet bei :hover und * :focus-within (Tastatur). Alle Links liegen statisch im DOM → crawlbar. * ===========================================================================*/ /* --- Wrapper: ersetzt den einzelnen "Leistungen"-Link in der Linkleiste --- */ .ws-dd { position: relative; display: inline-flex; align-items: center; gap: 0.34rem; } /* Trigger-Link erbt das normale Nav-Link-Aussehen der jeweiligen Seite. */ .ws-dd > a { white-space: nowrap; } /* --- Caret (Pfeil) neben dem Leistungen-Link --- */ .ws-dd__caret { width: 9px; height: 9px; flex-shrink: 0; color: currentColor; opacity: 0.7; pointer-events: none; transition: transform 0.25s ease; } .ws-dd:hover .ws-dd__caret, .ws-dd:focus-within .ws-dd__caret { transform: rotate(180deg); opacity: 1; } /* --- Flyout-Panel --- */ .ws-dd__panel { position: absolute; top: 100%; left: 0; min-width: 244px; padding: 0.5rem; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 14px; box-shadow: 0 22px 48px -16px rgba(0, 0, 0, 0.28), 0 2px 8px -2px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; gap: 1px; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s; z-index: 1000; } /* Unsichtbare "Brücke" über dem Panel — hält den Hover beim Übergang von Trigger zu Panel stabil (überbrückt den sichtbaren Abstand). */ .ws-dd__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } .ws-dd:hover .ws-dd__panel, .ws-dd:focus-within .ws-dd__panel { opacity: 1; visibility: visible; transform: translateY(12px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s; } /* --- Panel-Links: überschreiben das geerbte Nav-Link-Styling --- */ .ws-dd__panel a { display: block; padding: 0.6rem 0.8rem; border-radius: 9px; font-family: "Jost", "Inter", system-ui, sans-serif; font-size: 0.84rem; font-weight: 500; line-height: 1.2; letter-spacing: 0.01em; text-transform: none; text-decoration: none; white-space: nowrap; color: #1a1a1a; transition: background 0.15s ease, color 0.15s ease; } /* Den animierten Unterstrich der Nav-Links im Panel deaktivieren. */ .ws-dd__panel a::after { display: none !important; } .ws-dd__panel a:hover, .ws-dd__panel a:focus-visible { background: #f4f2ec; color: #000000; opacity: 1; outline: none; } .ws-dd__panel a:focus-visible { box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.35); } /* --- Mobile: Untermenü im Voll­bild-Menü von index.html --- */ .mobile-menu__subgroup { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; margin-top: -1.25rem; } .mobile-menu .mobile-menu__subgroup a { font-size: 1.1rem; font-weight: 400; opacity: 0.55; } .mobile-menu .mobile-menu__subgroup a:hover { opacity: 0.9; } /* Auf kleinen Viewports wird die Linkleiste ausgeblendet — damit verschwindet auch das Dropdown automatisch (kein Sonderfall nötig). */ @media (prefers-reduced-motion: reduce) { .ws-dd__caret, .ws-dd__panel { transition: opacity 0.15s ease; } }