/* ============================================================
   DP-PERFORM – GEMEINSAMER HEADER & FOOTER
   ============================================================ */

.site-header{
  position:sticky!important;
  top:0!important;
  z-index:1000!important;
  width:100%!important;
  background:rgba(255,255,255,.97)!important;
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line,#e2e5df)!important;
}

.site-header .header-inner{
  width:100%!important;
  min-height:82px!important;
  padding:0 clamp(18px,3vw,54px)!important;
  margin:0!important;
  display:grid!important;
  grid-template-columns:minmax(135px,175px) minmax(0,1fr)!important;
  align-items:center!important;
  column-gap:clamp(14px,1.8vw,28px)!important;
  box-sizing:border-box!important;
}

.site-header .header-logo{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  min-width:0!important;
}

.site-header .header-logo img{
  display:block!important;
  width:clamp(120px,10vw,155px)!important;
  max-width:100%!important;
  height:auto!important;
}

.site-header .main-nav{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(2px,.45vw,8px)!important;
  width:100%!important;
}

.site-header .main-nav>a,
.site-header .main-nav>details>summary{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:44px!important;
  padding:10px clamp(7px,.65vw,12px)!important;
  margin:0!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  color:inherit!important;
  font-size:clamp(13px,.92vw,16px)!important;
  font-weight:850!important;
  line-height:1.2!important;
  letter-spacing:.02em!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  box-sizing:border-box!important;
  transition:.2s ease!important;
}

.site-header .main-nav>a:hover,
.site-header .main-nav>a:focus-visible,
.site-header .main-nav>a.active,
.site-header .main-nav>details>summary:hover,
.site-header .main-nav>details>summary:focus-visible,
.site-header .main-nav>details[open]>summary{
  color:var(--green,#5a851c)!important;
  background:#f1f5ea!important;
  outline:none!important;
}

.site-header .nav-highlight{
  color:var(--green,#5a851c)!important;
  font-weight:900!important;
}

.site-header .main-nav>details{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  min-height:42px!important;
  margin:0!important;
}

.site-header .main-nav>details>summary{
  list-style:none!important;
}

.site-header .main-nav>details>summary::-webkit-details-marker{
  display:none!important;
}

.site-header .main-nav>details>summary::after{
  content:"⌄";
  margin-left:7px;
  font-size:.8em;
  transition:transform .2s ease;
}

.site-header .main-nav>details[open]>summary::after{
  transform:rotate(180deg);
}

.site-header .main-nav .dropdown{
  position:absolute!important;
  top:calc(100% + 9px)!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  width:230px!important;
  padding:8px!important;
  margin:0!important;
  background:#fff!important;
  border:1px solid var(--line,#e2e5df)!important;
  border-radius:14px!important;
  box-shadow:0 16px 40px rgba(18,28,10,.12)!important;
  box-sizing:border-box!important;
}

.site-header .main-nav .dropdown a{
  display:block!important;
  width:100%!important;
  padding:11px 13px!important;
  border-radius:9px!important;
  color:inherit!important;
  font-size:13px!important;
  font-weight:700!important;
  line-height:1.25!important;
  text-decoration:none!important;
  box-sizing:border-box!important;
}

.site-header .main-nav .dropdown a:hover,
.site-header .main-nav .dropdown a:focus-visible{
  color:var(--green,#5a851c)!important;
  background:#f1f5ea!important;
  outline:none!important;
}





/* ============================================================
   FOOTER – exakt gleiche HTML-Struktur wie index(2).html
   ============================================================ */
.footer{
  color:#fff;
  width:100%;
  min-height:8.6vw;
  padding:0.5vw 2.7vw;
  display:grid;
  grid-template-columns:1.2fr 1.25fr .75fr 1.8fr;
  gap:2vw;
  align-items:center;
  background:#000;
  border-top:1px solid #ddd;
  box-sizing:border-box;
}

.footer > div{
  min-width:0;
}

.footer-logo{
  width:10vw;
  margin-left:40px;
  height:auto;
  display:block;
}

.footer h3{
  margin:0 0 .5vw;
  font-size:1.05vw;
}

.footer p{
  margin:.18vw 0;
  font-size:.75vw;
  line-height:1.3;
}

.footer a{
  color:inherit;
  text-decoration:none;
}

.footer a:hover{
    color: #FFFCFC;
}

.footer-callout{
  padding:1vw 1.3vw;
  background:var(--green,#5a851c);
  color:#fff;
  border-radius:.4vw;
  box-sizing:border-box;
}

.footer-callout h3{
  margin:0 0 .35vw;
  font-size:1.15vw;
}

.footer-callout p{
  margin:0 0 .7vw;
  font-size:.68vw;
}

.footer-callout a{
  display:inline-block;
  background:#fff;
  color:var(--green,#5a851c);
  padding:.42vw .75vw;
  border-radius:.2vw;
  font-size:.7vw;
  font-weight:900;
}

@media (max-width:820px){
  .footer{
    grid-template-columns:1fr 1fr;
    gap:2vw;
    padding:2vw 4vw;
  }
  .footer-logo{
    width:20vw;
    margin-left:0;
  }
  .footer h3{font-size:2.2vw}
  .footer p{font-size:1.7vw}
  .footer-callout h3{font-size:2.4vw}
  .footer-callout p{font-size:1.6vw}
  .footer-callout a{font-size:1.7vw}
}

@media (max-width:560px){
  .footer{
    grid-template-columns:1fr;
    padding:6vw 5vw;
    gap:5vw;
  }
  .footer-logo{width:34vw}
  .footer h3{font-size:4vw}
  .footer p{font-size:3.1vw}
  .footer-callout h3{font-size:4.2vw}
  .footer-callout p{font-size:3vw}
  .footer-callout a{font-size:3.1vw}
}


/* Footer: Slogan bündig unter der linken Kante des Logos */
.footer > div:first-child p{
  margin-left:40px !important;
}