/* ─── Seitenkopf — gilt für alle Seiten ──────────────────────────
   Zwei Zustände im selben Balken:
   · oben         Hamburger links · Logo mittig · Formulare rechts
   · abgescrollt  Logo links · Navigation · Formular-Knopf rechts

   Alle Regeln sind auf .nav-cluster beschränkt. Eine ungebundene
   nav{}-Regel hatte früher die Fußzeile mit zentriert. */

header{position:fixed;top:0;left:0;right:0;z-index:50;height:88px;
  background:rgba(250,247,241,.96);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--warm-gray);transition:height .35s,box-shadow .3s}
header.scrolled{box-shadow:0 2px 24px rgba(0,0,0,.06);height:94px}
.nav-inner{max-width:none;margin:0;padding:0 50px;height:100%;position:relative;
  display:flex;align-items:center;justify-content:space-between}

/* Zustand oben */
.logo-center{display:flex;align-items:center;opacity:1;pointer-events:auto;transition:opacity .4s ease}
.logo-center img{height:54px;width:auto;transition:height .35s}
header.scrolled .logo-center img{height:44px}
header.show-logo .hamburger-cluster,
header.show-logo .logo-center,
header.show-logo .header-cta-formulare{opacity:0;pointer-events:none}

/* Zustand abgescrollt */
.logo-left{position:absolute;left:50px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;opacity:0;pointer-events:none;transition:opacity .4s ease}
.logo-left img{height:50px;width:auto;transition:height .35s}
header.show-logo .logo-left{opacity:1;pointer-events:auto}

.nav-cluster{position:absolute;right:50px;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:26px;opacity:0;pointer-events:none;transition:opacity .4s ease}
header.show-logo .nav-cluster{opacity:1;pointer-events:auto}

.nav-cluster nav{display:flex;align-items:center;gap:30px}
.nav-cluster nav a{font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:.02em;
  color:var(--text);transition:color .2s;white-space:nowrap;text-transform:none}
.nav-cluster nav a:hover{color:var(--green)}
.nav-cluster .has-drop{position:relative;display:inline-flex;align-items:center}
.nav-cluster .drop{position:absolute;top:100%;left:-20px;background:var(--white);min-width:260px;
  border-top:2px solid var(--green);box-shadow:0 12px 36px rgba(0,0,0,.1);
  opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity .2s,transform .2s}
/* :focus-within öffnet das Untermenü auch für Tastaturnutzer */
.nav-cluster .has-drop:hover .drop,
.nav-cluster .has-drop:focus-within .drop{opacity:1;pointer-events:auto;transform:none}
.nav-cluster .drop a{display:block;padding:12px 22px;font-size:14px;font-weight:400;
  color:var(--text)!important;border-bottom:1px solid var(--warm-gray)}
.nav-cluster .drop a:last-child{border-bottom:none}
.nav-cluster .drop a:hover{background:#f7f7f7;color:var(--green)!important}

.nav-cluster .nav-cta{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.06em;
  padding:11px 20px;background:var(--green);color:var(--white)!important;transition:background .2s;
  border-radius:16px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;text-transform:none}
.nav-cluster .nav-cta:hover{background:var(--green-dark);color:var(--white)!important}
.nav-cluster .nav-cta svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;transition:transform .2s}
.nav-cluster .nav-cta:hover svg{transform:translateX(2px)}

/* Unter 1180px ist für die Navigation kein Platz (bis 1165px lag „Unser Team“
   über dem Logo, Prüfung 08.10.2026) — dann bleibt der obere Zustand stehen
   und das Off-Canvas-Menü übernimmt. Touch-Tablets bis 1400px ebenso: Dort
   gibt es kein Überfahren, die Untermenüs wären nicht erreichbar. */
@media (max-width:1180px){
  .nav-inner{padding:0 18px}
  header.show-logo .hamburger-cluster,
  header.show-logo .logo-center,
  header.show-logo .header-cta-formulare{opacity:1!important;pointer-events:auto!important}
  header.show-logo .logo-left,
  header.show-logo .nav-cluster{opacity:0!important;pointer-events:none!important}
}
@media (hover:none) and (max-width:1400px){
  header.show-logo .hamburger-cluster,
  header.show-logo .logo-center,
  header.show-logo .header-cta-formulare{opacity:1!important;pointer-events:auto!important}
  header.show-logo .logo-left,
  header.show-logo .nav-cluster{opacity:0!important;pointer-events:none!important}
}

/* Sprungziele (#anfahrt, #kontaktformular …) nicht unter dem festen Kopf */
html{scroll-padding-top:110px}

/* Fußlinks: größere Tippfläche (vorher 25 px hoch) */
body footer .footer-links{gap:0}
body footer .footer-links a{padding:6px 0}
@media (max-width:600px){
  .nav-inner{padding:0 16px}
  .logo-center img{height:38px}
  header.scrolled .logo-center img{height:34px}
  /* Formulare-Knopf wird zum runden Pfeil — vorher stand die Beschriftung
     auf sechs handgepflegten Seiten über den Knopf hinaus */
  #site-header .header-cta-formulare{padding:0;width:46px;justify-content:center;flex:none}
  #site-header .header-cta-formulare span{display:none}
}
/* Sehr schmale Geräte (320 px): Kopf-Elemente stießen ohne Abstand aneinander */
@media (max-width:360px){
  .nav-inner{padding:0 12px}
  .hamburger-cluster .cluster-half{padding:0 10px}
  .logo-center img,header.scrolled .logo-center img{height:32px}
}