/* ============ NAV-DROPDOWN „Services“ — alle Seiten (Figma 318:174), Verhalten: /nav.js ============ */
/* Zeiten nach Skinn vermessen: Ein-/Ausblenden 0,2 s ease-out mit 10 px Hub, Creme-Fläche gleitet 0,45 s cubic-bezier(.22,1,.36,1), blendet in 0,25 s ein/aus */

/* ============ NAVIGATION — EINE für alle Seiten (src/components/Nav.astro), 12.10. ============
   Fixe Leiste, Creme 92 % + Unschärfe. Oben sitzt die Zeile wie im Seitenframe (Desktop: Wortmarke y=45 bei 1440, Leiste 90 hoch),
   beim Scrollen rückt sie in die Leistenmitte (Klasse .gescrollt, Skript in Nav.astro). Desktop in Design-Pixeln --u (wächst wie die Schrift),
   mobil nach M-1 v3 (Wortmarke 17/22 auf y=38, MENU rechts, Rand 20). Seiten haben KEINE eigenen Nav-Stile mehr. */
.sub-nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;align-items:center;height:calc(90 * var(--u));padding:calc(19 * var(--u)) var(--rand) 0;background:rgba(247,244,240,.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);transition:padding .3s ease,transform .35s ease}
.sub-nav.gescrollt{padding-top:0;padding-bottom:calc(9 * var(--u))}
.sub-nav .wortmarke{font-size:calc(19.28 * var(--u))}
.sub-nav .nav-links{gap:calc(32 * var(--u))}
.sub-nav .nav-links a{color:var(--ink)}
.sub-nav .nav-links a.aktiv{text-decoration:underline;text-decoration-thickness:auto;text-underline-offset:auto}
.sub-nav .lang{margin-left:calc(4 * var(--u));gap:calc(5 * var(--u))}
.sub-nav .lang svg{width:calc(10 * var(--u));height:calc(10 * var(--u))}
@media (max-width:1100px){.sub-nav .nav-links{gap:18px}}
@media (max-width:760px){
  .sub-nav{height:auto;align-items:flex-start;padding:38px var(--rand) 0}
  .sub-nav.gescrollt{padding:12px var(--rand)}
  .sub-nav .wortmarke{font-size:17px;line-height:22px}
  .sub-nav .menu-auf{margin-top:2px}
}
@media (prefers-reduced-motion:reduce){.sub-nav{transition:none}}

/* Wrapper ist das Flex-Element in .nav-links (Abstände bleiben 32), der Link darin sitzt wie vorher */
.nav-dd{position:relative;display:flex}
/* offen: „Services“ bleibt im Hover-Zustand */
.nav-links .nav-dd.offen > .nav-dd-ausloeser{color:var(--ink)}

/* Panel mittig unter dem Wort; Karte 16 unter der Textunterkante (Text 15 hoch, mittig in der Zeile). padding-top = unsichtbare Brücke.
   --dd-x schiebt bei schmalen Viewports nach links, --dd-max = Viewport ohne Scrollleiste minus 2×16, --dd-h begrenzt die Höhe bei niedrigen (alles aus nav.js)
   Panel selbst bewegt sich nicht (Brücke liegt ab dem ersten Frame, --dd-x springt statt zu gleiten), den 10-px-Hub macht nur die Karte */
.nav-dd-panel{position:absolute;top:calc(50% + 7.5px);left:50%;z-index:1;width:350px;max-width:var(--dd-max,calc(100vw - 32px));padding-top:16px;opacity:0;visibility:hidden;pointer-events:none;transform:translateX(calc(-50% + var(--dd-x,0px)));transition:opacity .2s ease-out,visibility 0s linear .2s}
.nav-dd.offen .nav-dd-panel{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .2s ease-out}

/* Karte: Weiß, Radius 5, Innenabstand 8, Schatten wie Skinn. Mausrad über der Karte scrollt die Seite (wie Skinn); nur bei begrenzter Höhe erst die Karte, dann die Seite */
.nav-dd-karte{position:relative;padding:8px;border-radius:var(--radius);background:var(--weiss);box-shadow:0 0 12px rgba(0,0,0,.06),0 18px 18px rgba(0,0,0,.02),0 4px 98px rgba(0,0,0,.04);max-height:var(--dd-h,none);overflow-y:auto;scrollbar-width:none;transform:translateY(10px);transition:transform .2s ease-out}
.nav-dd.offen .nav-dd-karte{transform:translateY(0)}
.nav-dd-karte::-webkit-scrollbar{display:none}

/* EINE Creme-Fläche unter dem Eintrag mit Maus/Fokus: erstes Betreten springt und blendet ein, danach gleitet sie */
.nav-dd-flaeche{position:absolute;top:8px;left:8px;right:8px;height:139px;border-radius:var(--radius);background:var(--creme);opacity:0;pointer-events:none;transition:transform .45s cubic-bezier(.22,1,.36,1),height .45s cubic-bezier(.22,1,.36,1),opacity .25s cubic-bezier(.33,1,.68,1)}
.nav-dd-flaeche.springt{transition:opacity .25s cubic-bezier(.33,1,.68,1)}
.nav-dd-flaeche.an{opacity:1}

/* Einträge: ganzer Eintrag ist der Link, 16 Innenabstand, Bild 80×107, Text 206 breit, mittig zur Bildmitte */
.nav-dd-liste{position:relative;z-index:1;list-style:none}
.nav-links .nav-dd a.nav-dd-eintrag{display:flex;align-items:center;gap:16px;padding:16px;border-radius:var(--radius);font:500 14px/17px var(--font-b);letter-spacing:-.02em;text-transform:none;color:var(--gedaempft)}
.nav-dd-eintrag img{flex:none;width:80px;height:107px;border-radius:var(--radius);object-fit:cover}
/* V1 (Artur 14.10.): Assortment = 2×2 Produktfotos (Zellen 39 × 52, 2 Abstand), Performance = Ad im Telefon auf Saum (44 × 95, mittig) */
.nav-dd-raster,.nav-dd-telefon{flex:none;width:80px;height:107px;border-radius:var(--radius);overflow:hidden}
.nav-dd-raster{display:grid;grid-template:1fr 1fr / 1fr 1fr;gap:2px;background:var(--creme)}
.nav-dd-telefon{display:flex;align-items:center;justify-content:center;background:var(--saum)}
.nav-dd-eintrag .nav-dd-raster img{width:100%;height:100%;border-radius:0}
.nav-dd-eintrag .nav-dd-telefon img{width:auto;height:95px;border-radius:0;object-fit:contain}
.nav-dd-text{flex:1;min-width:0}
.nav-dd-titel{display:block;font-weight:600;line-height:13px;color:var(--ink)}
.nav-dd-satz{display:block;margin-top:4px}
.nav-dd-eintrag:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}

/* Bewegung reduziert: Karte nur ein-/ausblenden, Fläche springt statt zu gleiten */
@media (prefers-reduced-motion:reduce){
  .nav-dd-karte{transform:none;transition:none}
  .nav-dd-flaeche{transition:opacity .25s cubic-bezier(.33,1,.68,1)}
}