/* Kopfbereich — Header, Navigation, Marke, Burger-Symbol. */

header{
  position:sticky;top:0;z-index:50;
  /* War rgba(238,242,238,.82): ein grünstichiges Weiß aus der alten Palette,
     das direkt über dem blaustichigen --mist lag. Jetzt aus derselben Quelle */
  background:rgb(var(--mist-rgb) / .82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
header.scrolled{border-bottom-color:var(--line);background:rgb(var(--mist-rgb) / .94);}

/* ── Kopfzeilen-Raster: drei klar getrennte Gruppen ───────────────────────
   Marke (Eigenbreite) | Navigation (nimmt den Rest) | Kontakt/CTA (Eigenbreite) */
.nav{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  column-gap:clamp(30px,3.6vw,72px);
  min-height:78px;
}
/* Spalten AUSDRÜCKLICH zuweisen, nicht der automatischen Platzierung
   überlassen: Unterhalb von 1120px wird .nav-links auf display:none gesetzt und */
.nav > .brand    {grid-column:1;justify-self:start;}
.nav > .nav-links{grid-column:2;justify-self:center;}
.nav > .nav-cta  {grid-column:3;justify-self:end;}

.brand{display:flex;align-items:center;gap:.85em;}
.brand-text strong{
  font-family:"Bricolage Grotesque";font-weight:700;font-size:var(--t-base);
  letter-spacing:var(--ls-normal);line-height:1.2;display:block;color:var(--ink);white-space:nowrap;
}
.brand-text span{
  font-size:var(--t-2xs);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);white-space:nowrap;display:block;
}
.brand-logo{height:44px;width:auto;display:block;}

.nav-links{display:flex;align-items:center;gap:2px;}
.nav-links a{
  font-size:var(--t-sm);font-weight:500;color:var(--ink-soft);white-space:nowrap;
  padding:.5em .7em;border-radius:var(--r-sm);transition:color .2s, background .2s;
}

.nav-links a:hover{color:var(--petrol);background:rgb(var(--petrol-rgb) / .06);}

.nav-cta{display:flex;align-items:center;gap:14px;}

/*   Bei 1440px stehen 1108px Inhaltsbreite zur Verfügung (--maxw 1160 minus
   2x26px Innenabstand). Die natürlichen Breiten sind: */
.nav-tel{display:none;}
.nav-tel svg{width:16px;height:16px;flex:none;}

.burger{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--ink);}
.burger svg{width:26px;height:26px;}

/* ── Pill („NEU“-Marker an der Navigation) ───────────────────────────── */
.pill{
  display:inline-flex;align-items:center;background:var(--amber);color:#37260a;
  font-size:var(--t-2xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.15em .5em;border-radius:var(--r-full);margin-left:.5em;
}