/* WGRCMS-Step-0051 Hard Header Offset Fix */

/*
  Ziel:
  - kein optischer Versatz mehr unter dem Header
  - Logo darf nicht nach unten aus dem Header laufen
  - Header ist eine saubere feste blaue Leiste
  - Hero beginnt exakt darunter
*/

:root{
  --wgr-header-h:76px!important;
  --wgr-blue:#015da8!important;
}

html,
body{
  margin:0!important;
  padding-left:0!important;
  padding-right:0!important;
  overflow-x:hidden!important;
}

/* Fixed Header exakt und ohne Überstand */
.site-header,
.site-header.wgr-scrolled{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  height:var(--wgr-header-h)!important;
  min-height:var(--wgr-header-h)!important;
  max-height:var(--wgr-header-h)!important;
  margin:0!important;
  padding:0!important;
  background:#015da8!important;
  background-color:#015da8!important;
  box-shadow:0 3px 14px rgba(0,42,86,.22)!important;
  z-index:2147483000!important;
  overflow:hidden!important;
  border:0!important;
}

/* Body exakt unter fixed Header starten */
body{
  padding-top:var(--wgr-header-h)!important;
}

/* Header-Inhalt: keine negative Margins, keine extra Höhen */
.header-inner,
.site-header.wgr-scrolled .header-inner{
  height:var(--wgr-header-h)!important;
  min-height:var(--wgr-header-h)!important;
  max-height:var(--wgr-header-h)!important;
  margin:0 auto!important;
  padding:0 34px!important;
  max-width:1500px!important;
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  background:transparent!important;
  overflow:hidden!important;
  box-shadow:none!important;
  border:0!important;
}

/* Logo-Container darf nicht größer sein als Header */
.brand,
.site-header.wgr-scrolled .brand{
  height:var(--wgr-header-h)!important;
  min-height:var(--wgr-header-h)!important;
  max-height:var(--wgr-header-h)!important;
  flex:0 0 300px!important;
  width:300px!important;
  max-width:300px!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  overflow:hidden!important;
  background:transparent!important;
  border:0!important;
}

/* Logo selbst kleiner und vertikal sauber */
.brand img,
.site-header.wgr-scrolled .brand img{
  display:block!important;
  width:250px!important;
  max-width:250px!important;
  height:auto!important;
  max-height:58px!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:left center!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* falls Logo-Datei selbst ein farbiges Rechteck hat: nicht aus Header herausragen lassen */
.brand picture,
.brand svg{
  max-height:58px!important;
  display:block!important;
}

/* Navigation mittig in der Headerhöhe */
.main-nav,
.site-header.wgr-scrolled .main-nav{
  height:var(--wgr-header-h)!important;
  min-height:var(--wgr-header-h)!important;
  max-height:var(--wgr-header-h)!important;
  margin:0 0 0 auto!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:12px!important;
  overflow:hidden!important;
}

.main-nav a,
.site-header.wgr-scrolled .main-nav a{
  height:var(--wgr-header-h)!important;
  min-height:var(--wgr-header-h)!important;
  max-height:var(--wgr-header-h)!important;
  margin:0!important;
  padding:0 8px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:relative!important;
  background:transparent!important;
  color:#fff!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  transform:none!important;
  text-decoration:none!important;
  font-size:14px!important;
  font-weight:850!important;
  line-height:1!important;
  white-space:nowrap!important;
}

/* Aktiver Balken bleibt, aber verursacht keinen Versatz */
.main-nav a:before{
  display:none!important;
  content:none!important;
}

.main-nav a:after{
  content:""!important;
  position:absolute!important;
  left:6px!important;
  right:6px!important;
  bottom:0!important;
  height:4px!important;
  background:#fff!important;
  border-radius:4px 4px 0 0!important;
  display:block!important;
  transform:scaleX(0)!important;
  transform-origin:center!important;
  transition:transform .18s ease!important;
}

.main-nav a:hover:after{
  transform:scaleX(.55)!important;
}

.main-nav a.active:after,
.main-nav a[aria-current="page"]:after{
  transform:scaleX(1)!important;
}

.main-nav a:first-child,
.main-nav a.active,
.main-nav a[aria-current="page"]{
  background:transparent!important;
  color:#fff!important;
  box-shadow:none!important;
}

/* Kontaktbereich */
.header-contact,
.site-header.wgr-scrolled .header-contact{
  height:var(--wgr-header-h)!important;
  min-height:var(--wgr-header-h)!important;
  max-height:var(--wgr-header-h)!important;
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  margin:0 0 0 18px!important;
  padding:0!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:700!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}

/* Hero beginnt exakt unter Header */
.hero{
  margin-top:0!important;
  padding-top:0!important;
  border-top:0!important;
}

/* alte Header-Abstandshalter vollständig killen */
.header-spacer,
.top-spacer,
.site-header + .header-spacer,
.site-header + .top-spacer{
  display:none!important;
  height:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
}

/* falls erstes Element nach Header einen negativen/positiven Offset hat */
.site-header + *{
  margin-top:0!important;
}

/* Mobile */
@media(max-width:980px){
  :root{
    --wgr-header-h:136px!important;
  }

  .site-header,
  .site-header.wgr-scrolled{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }

  .header-inner,
  .site-header.wgr-scrolled .header-inner{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:14px 22px!important;
    flex-wrap:wrap!important;
    overflow:visible!important;
  }

  .brand,
  .site-header.wgr-scrolled .brand{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    flex:0 0 100%!important;
    width:100%!important;
    max-width:100%!important;
  }

  .brand img,
  .site-header.wgr-scrolled .brand img{
    width:250px!important;
    max-height:58px!important;
  }

  .main-nav,
  .site-header.wgr-scrolled .main-nav{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:12px 0 0!important;
    justify-content:flex-start!important;
    flex-wrap:wrap!important;
    overflow:visible!important;
  }

  .main-nav a,
  .site-header.wgr-scrolled .main-nav a{
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
  }

  .header-contact,
  .site-header.wgr-scrolled .header-contact{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:10px 0 0!important;
    flex-wrap:wrap!important;
    overflow:visible!important;
  }
}