/* WGRCMS-Step-0050 Header Final Compact */

/* Header immer kompakt wie Scroll-Zustand */
:root{
  --wgr-fixed-header-height:78px!important;
  --wgr-blue:#015da8;
}

.site-header,
.site-header.wgr-scrolled{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  height:78px!important;
  min-height:78px!important;
  max-height:78px!important;
  background:#015da8!important;
  box-shadow:0 3px 16px rgba(0,42,86,.22)!important;
  z-index:2147483000!important;
  overflow:visible!important;
}

/* Body-Abstand passend zum kompakten Header */
body{
  padding-top:78px!important;
}

/* Header-Inhalt mittig, nicht gequetscht/leer */
.header-inner,
.site-header.wgr-scrolled .header-inner{
  height:78px!important;
  max-height:78px!important;
  max-width:1500px!important;
  margin:0 auto!important;
  padding:0 34px!important;
  display:flex!important;
  align-items:center!important;
}

/* Logo kleiner, damit kein leerer Headerbereich entsteht */
.brand,
.site-header.wgr-scrolled .brand{
  height:78px!important;
  max-height:78px!important;
  flex:0 0 300px!important;
  width:300px!important;
  max-width:300px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
}

.brand img,
.site-header.wgr-scrolled .brand img{
  width:260px!important;
  max-width:260px!important;
  max-height:64px!important;
  object-fit:contain!important;
  object-position:left center!important;
  display:block!important;
}

/* Menü: Effekt behalten, aber keine großen aktiven Flächen */
.main-nav,
.site-header.wgr-scrolled .main-nav{
  height:78px!important;
  min-height:78px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:12px!important;
  margin-left:auto!important;
  padding:0!important;
}

.main-nav a,
.site-header.wgr-scrolled .main-nav a{
  position:relative!important;
  height:78px!important;
  min-height:78px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 8px!important;
  margin:0!important;
  color:#fff!important;
  background:transparent!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;
  opacity:.98!important;
}

/* keine alte Startseitenfläche */
.main-nav a:first-child,
.main-nav a.active,
.main-nav a[aria-current="page"],
.site-header.wgr-scrolled .main-nav a.active,
.site-header.wgr-scrolled .main-nav a[aria-current="page"]{
  background:transparent!important;
  color:#fff!important;
  box-shadow:none!important;
  border:0!important;
}

/* Hover nur dezent */
.main-nav a:hover{
  background:rgba(255,255,255,.08)!important;
}

/* Unterstrich-Effekt sauber */
.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;
  border-radius:4px 4px 0 0!important;
  background:#fff!important;
  display:block!important;
  transform:scaleX(0)!important;
  transform-origin:center!important;
  transition:transform .18s ease!important;
}

/* first-child nicht automatisch markieren */
.main-nav a:first-child:after{
  transform:scaleX(0)!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;
}

/* Kontakt rechts kompakt */
.header-contact,
.site-header.wgr-scrolled .header-contact{
  height:78px!important;
  min-height:78px!important;
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  margin-left:18px!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:700!important;
  white-space:nowrap!important;
}

/* Hero startet direkt unter Fixed Header */
.hero{
  margin-top:0!important;
}

/* Falls JS aus 0047b andere Variable setzt, gewinnt diese Regel */
html{
  scroll-padding-top:92px!important;
}

/* Quickcards dürfen nicht leer wirken */
.quick-card{
  background:rgba(255,255,255,.98)!important;
}

.quick-card > div:not(.quick-icon){
  min-width:0!important;
}

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

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

  body{
    padding-top:140px!important;
  }

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

  .brand,
  .site-header.wgr-scrolled .brand{
    height:auto!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:62px!important;
  }

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

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

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