/* campingferien.ch · Kopfzeile final ausgerichtet · 2026-10-21 */

/* Desktop: mehr Platz, Navigation mittig, gleichmässige Abstände */
.site-header .header{
  width:100%;
  max-width:1500px!important;
  min-height:82px;
  height:auto!important;
  margin:0 auto;
  padding:12px 24px!important;
  display:grid!important;
  grid-template-columns:max-content minmax(0,1fr) max-content;
  align-items:center!important;
  column-gap:30px!important;
}

.site-header .brand{
  align-self:center;
  flex:none;
  margin:0;
}

.site-header .mainnav{
  min-width:0;
  align-self:stretch;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:20px!important;
  padding:10px 0 0;
  margin:0;
}

.site-header .mainnav a{
  display:block;
  flex:0 0 auto;
  margin:0;
  padding:0!important;
  color:#4d5651;
  font-size:13px!important;
  font-weight:600;
  line-height:1.28;
  text-align:center;
  text-decoration:none;
  white-space:nowrap!important;
}

/* Nur die beiden langen Punkte zweizeilig; erste Zeile überall oben bündig */
.site-header .mainnav a:nth-child(3){
  width:126px;
  white-space:normal!important;
}
.site-header .mainnav a:nth-child(7){
  width:116px;
  white-space:normal!important;
}

.site-header .mainnav a:hover{
  color:#1c5745;
}

.site-header .header-cta{
  align-self:center;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:11px 20px!important;
  margin:0;
  white-space:nowrap!important;
  line-height:1.25;
  text-align:center;
}

/* Auf kleineren Desktops zuerst CTA ausblenden, Navigation bleibt sauber */
@media(max-width:1320px) and (min-width:1121px){
  .site-header .header{
    max-width:1232px!important;
    grid-template-columns:max-content minmax(0,1fr);
    column-gap:24px!important;
  }
  .site-header .header-cta{
    display:none!important;
  }
  .site-header .mainnav{
    gap:15px!important;
  }
  .site-header .mainnav a{
    font-size:12.5px!important;
  }
}

/* Ab 1120px Tablet/Mobile-Menü statt gequetschter Desktopnavigation */
@media(max-width:1120px){
  .site-header .header{
    max-width:100%!important;
    min-height:64px;
    height:64px!important;
    padding:0 16px!important;
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
  }
  .site-header .brand{
    align-self:center;
  }
  .site-header .mainnav,
  .site-header .header-cta{
    display:none!important;
  }
  .site-header .mobile-toggle{
    display:flex!important;
    margin-left:auto;
  }
}

@media(max-width:560px){
  .site-header .header{
    height:58px!important;
    min-height:58px;
    padding:0 14px!important;
  }
}