/* ============ Navigation der Gruppe — 1:1 von nordic-sanierung.de ============
   Zwei Teile, auf allen Seiten gleich:
   1. Schwarze Leiste oben (.vnav), scrollt mit (wie drueben).
   2. Schwebendes Glas-Dock unten (.dock): Schnellnavigation durch die Abschnitte
      der jeweiligen Seite + Anruf-Button; erscheint, sobald der erste Bildschirm
      verlassen ist. Seiten ohne Abschnitte (Impressum, Datenschutz) haben kein Dock.
   Masse, Farben, Uebergaenge sind aus nordic-sanierung/style.css uebernommen.

   Selbsttragend, weil solar/ und waerme/ eigene Stylesheets ohne Gruppen-Tokens
   haben: Schrift und Farben werden hier geladen bzw. mit Rueckfall gesetzt.

   ⚠️ Bewusste Abweichungen:
   - Dock-Einblendung: drueben 85 % der Hero-Hoehe — dort ist der Hero EIN Bildschirm.
     Unser Startseiten-Hero ist 5,6 Bildschirme lang (Sinkflug); dieselbe Formel liesse
     fuenf Bildschirme ohne Navigation. Uebernommen ist das Verhalten: 85 % EINES
     Bildschirms (nav.js).
   - Anruf-Button im Dock: drueben Weiss auf Notruf-Rot. Weiss auf unserem Sonnengelb
     haette nur 1,9:1 Kontrast -> hier Schwarz auf Gelb (11:1). */
@import url("../fonts/montserrat/font.css");

.vnav, .dock {
  --vn-signal: var(--nv-signal, #f2b01e);
  --vn-signal-dunkel: var(--nv-signal-dunkel, #d99406);
  --vn-radius: var(--nv-radius, 2px);
}

/* ---------- 1. Schwarzer Balken ---------- */
.vnav { position: relative; z-index: 90; background: #000; color: #fff;
  font-family: "Montserrat", system-ui, sans-serif; }
.vnav-inner { max-width: 1140px; margin: 0 auto; display: flex; align-items: center;
  justify-content: space-between; gap: 30px; padding: 18px 20px; box-sizing: border-box; }
.vlogo { display: block; line-height: 0; text-decoration: none; }
.vlogo img { height: 34px; width: auto; display: block; }
.vnav-links { display: flex; align-items: center; }
/* Seitlicher Abstand 11 statt 14 px (drüben 14): seit dem Menüpunkt „Ratgeber“ (06.10.2026) sind es sieben
   Punkte plus Anruf-Knopf. Mit 14 px ragte die Leiste 12 px über die 1140-px-Spalte hinaus (waagerechter
   Scrollbalken zwischen 1141 und 1162 px, auf /solar/ wurde das Logo gestaucht); mit 11 px bleiben ~10 px Luft. */
.vnav-links a { font-size: 15px; font-weight: 500; line-height: 20px; letter-spacing: 1px;
  color: #fff; text-decoration: none; padding: 0 11px; white-space: nowrap; }
.vnav-links a:hover { opacity: .75; }
.vnav-cta { display: inline-flex; align-items: center; font-weight: 700 !important; padding: 10px 28px !important;
  border: 1px solid #fff; border-radius: 2px; margin-left: 12px;
  box-shadow: 1px 1px 20px rgba(0,0,0,.3); transition: background .2s, color .2s; }
.vnav-cta:hover { background: #fff; color: #000 !important; opacity: 1 !important; }

/* ---------- 2. Schwebendes Glas-Dock ---------- */
.dock a { text-decoration: none; }
.dock { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 90px); z-index: 90;
  display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 20px; border-radius: var(--vn-radius);
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(32px) saturate(1.3); -webkit-backdrop-filter: blur(32px) saturate(1.3);
  box-shadow: 0 18px 50px rgba(4,12,20,.45); opacity: 0; box-sizing: border-box;
  font-family: "Instrument Sans", system-ui, sans-serif; line-height: 1.55;   /* Zeilenhoehe erbt drueben vom body -> Dock 64 px */
  transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .45s; pointer-events: none; }
.dock.on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.dock-brand { font-weight: 700; font-size: 15px; color: #fff; letter-spacing: -.01em; margin-right: 8px; white-space: nowrap; }
.dock-brand span { font-weight: 400; color: #fff; }
.dock-links { display: flex; }
.dock-links a { padding: 10px 14px; border-radius: var(--vn-radius); font-family: ui-monospace, monospace;   /* exakt wie drueben: Safari = SF Mono, Chrome = Courier */
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.75);
  transition: background .25s, color .25s; white-space: nowrap; }
.dock-links a:hover { color: #fff; background: rgba(255,255,255,.1); }
.dock-links a.on { color: #fff; background: rgba(255,255,255,.16); }
.dock-call { display: inline-flex; align-items: center; padding: 12px 20px; border-radius: var(--vn-radius);
  background: var(--vn-signal); color: #000; font-weight: 700; font-size: 14px; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(242,176,30,.4); transition: background .2s; }
.dock-call:hover { background: var(--vn-signal-dunkel); }

/* ---------- Telefon-Symbol vor beiden Anruf-Buttons (wie drueben: CSS-Maske in currentColor) ---------- */
.vnav-cta::before, .dock-call::before {
  content: ""; display: inline-block; flex: 0 0 auto; width: 1.05em; height: 1.05em; margin-right: .5em;
  vertical-align: -.15em; background: currentColor;
  -webkit-mask-image: url("tel.svg"); mask-image: url("tel.svg");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain; }

/* ---------- Responsive (Grenzen wie drueben) ---------- */
@media (max-width: 1140px) {
  .vnav-links a:not(.vnav-cta) { display: none; }
}
@media (max-width: 700px) {
  .vnav-inner { padding: 14px 16px; gap: 12px; }
  .vnav-cta { padding: 9px 14px !important; font-size: 12px !important; letter-spacing: .4px;
    margin-left: 0; white-space: normal; text-align: center; }
}
@media (max-width: 640px) {
  .dock { left: 12px; right: 12px; transform: translateY(90px); width: auto; padding-left: 16px; }
  .dock.on { transform: translateY(0); }
  .dock-links { display: none; }
  .dock-brand { margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) { .vnav-cta, .dock { transition: none; } }