/* Gemeinsame Kopfleiste für ALLE Seiten (Startseite + Unterseiten) — eine Quelle, ein Aussehen.
   WICHTIG: Der Weichzeichner liegt auf einem ::before, NICHT auf header/.nav-inner —
   sonst sperrt er das fixierte Handy-Menü in die Höhe der Leiste ein (Bug 09/2026). */
header.nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:12px 14px;pointer-events:none}
.nav-inner{pointer-events:auto;position:relative;max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:8px 10px 8px 18px;border-radius:60px}
.nav-inner::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;background:rgba(255,255,255,.58);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.75);box-shadow:0 10px 34px -24px rgba(17,83,116,.5);transition:background .4s ease,box-shadow .4s ease}
header.nav.scrolled .nav-inner::before{background:rgba(255,255,255,.92);box-shadow:0 16px 40px -22px rgba(17,83,116,.55)}
.brand{display:flex;align-items:center;gap:11px;position:relative;z-index:3}
.brand img{width:38px;height:38px}
.brand .bt{display:flex;flex-direction:column;line-height:1}
.brand .bn{font-family:var(--serif);font-size:20px;color:var(--tief);font-weight:600;letter-spacing:.4px}
.brand .bs{font-size:9px;letter-spacing:2.2px;text-transform:uppercase;color:var(--mute);margin-top:3px}
.nav-links{display:flex;align-items:center;gap:24px}
.nav-links a.nl{font-size:14.5px;font-weight:500;color:var(--ink);position:relative;padding:6px 0;white-space:nowrap}
.nav-links a.nl::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--blau-hell);transition:width .3s}
.nav-links a.nl:hover::after,.nav-links a.nl[aria-current]::after{width:100%}
.nav-links a.nl[aria-current]{color:var(--tief);font-weight:700}
.nav-cta{padding:12px 22px;border-radius:30px;background:var(--tief);color:#fff;font-size:14px;font-weight:600;white-space:nowrap;transition:transform .3s,box-shadow .3s}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 14px 24px -12px rgba(17,83,116,.6)}
.nav-tel{display:none}
.burger{display:none;position:relative;z-index:3;flex-direction:column;justify-content:center;align-items:center;gap:5px;background:none;border:0;cursor:pointer;min-width:46px;min-height:46px;border-radius:50%}
.burger span{width:22px;height:2px;background:var(--tief);border-radius:2px;transition:.3s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
html.nav-open{overflow:hidden}
@media(max-width:1100px){
  html.js .burger{display:flex}
  /* Vollbild-Menü: gleitet von rechts herein, Logo + X bleiben sichtbar.
     Zentriert wird über auto-Ränder (NICHT justify-content:center) — sonst rutscht der erste Eintrag in niedrigen Fenstern
     (Handy quer) oben aus dem scrollbaren Bereich und ist nicht mehr erreichbar. */
  html.js .nav-links{position:fixed;inset:0;z-index:2;background:var(--offwhite);flex-direction:column;justify-content:flex-start;align-items:center;gap:6px;padding:0 28px 40px;overflow-y:auto;transform:translateX(100%);visibility:hidden;transition:transform .45s cubic-bezier(.4,0,.2,1),visibility 0s .45s}
  html.js .nav-links.open{transform:none;visibility:visible;transition:transform .45s cubic-bezier(.4,0,.2,1),visibility 0s 0s}
  /* Freiraum unter der Kopf-Pille; bleibt beim Scrollen oben kleben, damit Einträge nicht hinter Logo + X durchlaufen */
  html.js .nav-links::before{content:"";flex:0 0 90px;align-self:stretch;margin:0 -28px;position:-webkit-sticky;position:sticky;top:0;z-index:1;background:linear-gradient(var(--offwhite) 82%,rgba(251,246,242,0))}
  html.js .nav-links>*{flex-shrink:0}
  html.js .nav-links>:first-child{margin-top:auto}
  html.js .nav-links>:last-child{margin-bottom:auto}
  html.js .nav-links a.nl{font-family:var(--serif);font-size:27px;color:var(--tief);padding:11px 8px;min-height:48px}
  html.js .nav-links .nav-cta{margin-top:18px;font-size:16px;padding:16px 34px}
  html.js .nav-links .nav-tel{display:inline-flex;margin-top:14px;font-size:15px;font-weight:600;color:var(--tief);padding:10px}
  html:not(.js) .nav-links{flex-wrap:wrap;gap:6px 14px;justify-content:flex-end}
  html:not(.js) .nav-links a.nl{font-size:13px}
}
/* Kleine Handys (z. B. 320×640): etwas flachere Einträge, damit das ganze Menü ohne Scrollen passt */
@media(max-width:1100px) and (max-height:700px){
  html.js .nav-links a.nl{padding:8px}
}
/* Handy quer / sehr niedrige Fenster: engere Abstände, damit mehr Einträge auf einen Blick passen — der Rest ist scrollbar */
@media(max-width:1100px) and (max-height:480px){
  html.js .nav-links{gap:0;padding-bottom:22px}
  html.js .nav-links::before{flex-basis:82px}
  html.js .nav-links a.nl{font-size:22px;padding:8px;min-height:44px}
  html.js .nav-links .nav-cta{margin-top:10px;padding:13px 30px}
  html.js .nav-links .nav-tel{margin-top:4px}
}
/* Ohne JavaScript gibt es kein Aufklapp-Menü: sobald die Links nicht mehr in eine Zeile passen (bis 890px), bleibt nur der Erstgespräch-Knopf in der Pille (eine Zeile, nichts überlappt).
   Alle Seiten bleiben über die Links im Seiteninhalt und im Fuß erreichbar. */
@media(max-width:890px){
  html:not(.js) .nav-links a.nl{display:none}
  html:not(.js) .nav-inner{gap:10px}
  html:not(.js) .nav-cta{padding:11px 18px;font-size:13.5px}
}
@media(max-width:420px){.brand .bs{display:none}.brand .bn{font-size:18.5px}}
@media(prefers-reduced-motion:reduce){html.js .nav-links,html.js .nav-links.open{transition:none}}