/* ============================================================
   EGH Gebaeudeservice / 04 - CHROM
   Kopfzeile, Menue, Rufleiste.

   Die Kopfzeile klebt oben statt fest ueber der Seite zu
   liegen, und sie traegt immer denselben hellen Grund. Damit
   entfaellt die ganze Mechanik, die sonst die Schriftfarbe
   nach der Sektion darunter umschalten muss. Weniger Code,
   weniger, was schiefgehen kann, und die Navigation ist auf
   jedem Untergrund lesbar.
   ============================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2vw, 2rem);
  min-height: 68px;
  padding-inline: var(--gutter);
  background: color-mix(in srgb, var(--grund) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: var(--hair) solid transparent;
  transition: border-color var(--d-mittel) var(--e-weich),
              background-color var(--d-mittel) var(--e-weich);
}
/* Erst beim Scrollen bekommt die Leiste eine Kante. Am
   Seitenanfang soll sie nicht als Balken vor dem Hero sitzen. */
html[data-gescrollt] .nav {
  border-bottom-color: var(--regel);
  background: color-mix(in srgb, var(--grund) 94%, transparent);
}
@supports not (backdrop-filter: blur(1px)) { .nav { background: var(--grund); } }

/* --- Marke -------------------------------------------------
   Das Logo im Original: Marineblau und Gold auf Papier, so wie
   es gezeichnet wurde. Auf dunklem Grund liegt daneben eine
   helle Fassung, siehe Fuss. */
.nav__marke { display: flex; align-items: center; gap: 0.7rem; flex: none; }
.nav__marke img {
  /* Nach Hoehe bemessen, nicht nach Breite: Das Zeichen ist
     quer, und in einer 68 Pixel hohen Leiste entscheidet die
     Hoehe darueber, ob es passt. */
  height: 32px;
  width: auto;
}
.nav__wort { display: flex; flex-direction: column; line-height: 1; font-family: var(--font-kopf); }
.nav__wort b { font-weight: 700; font-size: 1.0625rem; letter-spacing: 0.01em; color: var(--auf-grund); }
.nav__wort span {
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 0.3rem;
}
@media (max-width: 380px) { .nav__wort { display: none; } }

/* --- Links -------------------------------------------------
   Sichtbar statt im Hamburger. Wer "Fensterreinigung Hameln"
   sucht, soll in einer Sekunde sehen, dass es eine Seite dazu
   gibt. Ein zugeklapptes Menue verbirgt genau das. */
.nav__links { display: flex; align-items: center; gap: clamp(0.9rem, 1.9vw, 1.9rem); margin-left: auto; }
.nav__link {
  position: relative;
  font-family: var(--font-kopf);
  font-size: 0.9375rem;
  color: var(--auf-grund);
  padding-block: 0.45rem;
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--d-mittel) var(--e-aus);
}
@media (hover: hover) and (pointer: fine) { .nav__link:hover::after { transform: scaleX(1); } }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__rechts { display: flex; align-items: center; gap: clamp(0.65rem, 1.4vw, 1.25rem); }

.nav__tel {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-kopf);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--auf-grund);
  white-space: nowrap;
}
.nav__tel svg { width: 16px; height: 16px; color: var(--gold); flex: none; }
@media (hover: hover) and (pointer: fine) { .nav__tel:hover { color: var(--gold); } }

.nav__cta {
  font-family: var(--font-kopf);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.65rem 1.15rem;
  border-radius: var(--r-1);
  background: var(--gold);
  color: var(--grund);
  white-space: nowrap;
  transition: background-color var(--d-schnell) var(--e-weich);
}
@media (hover: hover) and (pointer: fine) { .nav__cta:hover { background: var(--navy-2); } }

.menu-btn {
  display: none;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-kopf);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--auf-grund);
  padding: 0.5rem 0.25rem;
}
.menu-btn__striche { position: relative; width: 20px; height: 12px; }
.menu-btn__striche i {
  position: absolute; left: 0;
  display: block; width: 100%; height: 2px;
  background: var(--auf-grund);
  border-radius: 2px;
  transition: transform var(--d-mittel) var(--e-aus), opacity 0.15s linear;
}
.menu-btn__striche i:nth-child(1) { top: 0; }
.menu-btn__striche i:nth-child(2) { top: 5px; }
.menu-btn__striche i:nth-child(3) { top: 10px; }
html[data-menu="offen"] .menu-btn__striche i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
html[data-menu="offen"] .menu-btn__striche i:nth-child(2) { opacity: 0; }
html[data-menu="offen"] .menu-btn__striche i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 1140px) { .nav__tel span { display: none; } }
@media (max-width: 1000px) {
  .nav__links { display: none; }
  .menu-btn { display: flex; }
}
@media (max-width: 560px) { .nav__cta { display: none; } }

/* ------------------------------------------------------------
   MENUE

   Kein Vollbild. Eine Tafel, die unter der Kopfzeile
   herunterfaehrt und den Rest der Seite abdunkelt. Das ist
   naeher an dem, was Besucher von einer Firmenseite erwarten,
   und es macht sichtbar, dass man weiterhin auf derselben
   Seite ist.
   ------------------------------------------------------------ */
.menu {
  position: fixed;
  inset: 68px 0 auto 0;
  z-index: var(--z-menu);
  background: var(--grund);
  border-bottom: var(--hair) solid var(--regel);
  padding: var(--stack-3) var(--gutter) var(--stack-4);
  transform: translateY(-100%);
  visibility: hidden;
  /* pointer-events zusaetzlich zu visibility: Faellt der
     Uebergang aus, etwa weil der Tab im Hintergrund lag, bliebe
     die Tafel sonst unsichtbar ueber der Seite liegen und finge
     Klicks ab, die niemand ihr zugedacht hat. */
  pointer-events: none;
  transition: transform 0.36s var(--e-aus), visibility 0s linear 0.36s;
  max-height: calc(100dvh - 68px);
  overflow-y: auto;
}
html[data-menu="offen"] .menu {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.4s var(--e-aus), visibility 0s;
}

.menu__liste { display: grid; gap: 2px; }
.menu__link {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.95rem 0.25rem;
  border-bottom: var(--hair) solid var(--regel);
  font-family: var(--font-kopf);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--auf-grund);
}
.menu__link span:first-child {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.1em;
  flex: none;
  width: 1.75rem;
}
.menu__fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 2rem;
  margin-top: var(--stack-3);
}
.menu__fuss a { font-family: var(--font-kopf); font-size: var(--t-sm); color: var(--auf-grund); }
.menu__fuss a svg { width: 15px; height: 15px; color: var(--gold); vertical-align: -2px; margin-right: 0.35rem; }

/* Der Schleier unter der Tafel. Er schliesst das Menue beim
   Antippen und macht klar, dass alles darunter gerade nicht
   bedienbar ist. */
.schleier {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-menu) - 1);
  background: rgba(10, 20, 29, 0.42);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d-mittel) var(--e-weich), visibility 0s linear var(--d-mittel);
}
html[data-menu="offen"] .schleier { opacity: 1; visibility: visible; transition: opacity var(--d-mittel) var(--e-weich), visibility 0s; }

/* ------------------------------------------------------------
   RUFLEISTE

   Nur am Telefon, erst nach dem ersten Bildschirm. Drei Wege
   zum selben Ziel, alle auf dem Geraet gebaut, auf dem sie
   stehen: waehlen, schreiben, rechnen. Wer im Treppenhaus
   steht, tippt keine E-Mail-Adresse ab.
   ------------------------------------------------------------ */
.ruf {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-ruf);
  display: none;
  background: color-mix(in srgb, var(--flaeche) 94%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: var(--hair) solid var(--regel);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(102%);
  transition: transform 0.36s var(--e-aus);
}
html[data-gescrollt] .ruf { transform: translateY(0); }
html[data-menu="offen"] .ruf { transform: translateY(102%); }

.ruf__innen { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 0; }
.ruf a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 58px;
  padding: 0.5rem 0.35rem;
  font-family: var(--font-kopf);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--auf-grund);
  border-left: var(--hair) solid var(--regel);
}
.ruf a:first-child { border-left: 0; }
.ruf a svg { width: 19px; height: 19px; color: var(--gold); }
.ruf a.ruf--voll { background: var(--gold); color: var(--grund); }
.ruf a.ruf--voll svg { color: var(--gold); }

@media (max-width: 760px) { .ruf { display: block; } }

/* ------------------------------------------------------------
   WHATSAPP
   Am Schreibtisch unten rechts, am Telefon uebernimmt die
   Rufleiste. Nur ein Link, kein eingebettetes Widget: sonst
   laedt eine fremde Domain mit, bevor jemand ihn angefasst hat.
   ------------------------------------------------------------ */
.wa {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: var(--z-ruf);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.1rem;
  background: var(--flaeche);
  border: var(--hair) solid var(--regel);
  border-radius: var(--r-pille);
  box-shadow: var(--schatten-hoch);
  font-family: var(--font-kopf);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--auf-grund);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--d-mittel) var(--e-aus), transform var(--d-mittel) var(--e-aus), border-color var(--d-schnell) var(--e-weich);
}
html[data-gescrollt] .wa { opacity: 1; transform: translateY(0); pointer-events: auto; }
.wa svg { width: 18px; height: 18px; color: var(--gold); }
@media (hover: hover) and (pointer: fine) { .wa:hover { border-color: var(--regel-satt); } }
@media (max-width: 760px) { .wa { display: none; } }