/* Hauptmenü-Container */
.hauptmenu {
  background: transparent;
  font-family: "Segoe UI", sans-serif;
  padding: 0;
  margin: 0;
}

/* Menü-Liste */
.hauptmenu ul {
  display: flex;
  list-style: none;
  margin: 0;

  /* horizontale + untere Abstände dynamisch */
  padding: clamp(0.5rem, 0.25rem + 0.8vw, 1rem)
           clamp(1rem, 0.5rem + 1.6vw, 2rem);

  /* oberer Abstand bleibt fix */
  padding-top: 3rem;

  justify-content: center;
  align-items: center;
  height: 100%;
  gap: clamp(0.75rem, 0.5rem + 0.8vw, 2rem);
}

.hauptmenu li { margin: 0; padding: 0; }

/* Menü-Links */
.hauptmenu a {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.25rem, 0.15rem + 0.3vw, 0.75rem);

  padding:
    clamp(0.25rem, 0.2rem + 0.2vw, 0.75rem)
    clamp(0.5rem, 0.4rem + 0.4vw, 1.5rem);

  font-size: clamp(1rem, 0.8rem + 0.5vw, 1.4rem);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
  color: #222;
  background: transparent;
  border-radius: 0.5rem;
  transition: transform .25s ease, color .25s ease, background-color .25s ease;
}

/* Laptop & iPad quer (768px–1366px) → ~50% weniger Abstände */
@media screen and (min-width: 768px) and (max-width: 1366px) {
  .hauptmenu ul {
    gap: clamp(0.375rem, 0.25rem + 0.4vw, 1rem);

    padding: clamp(0.25rem, 0.125rem + 0.4vw, 0.5rem)
             clamp(0.5rem, 0.25rem + 0.8vw, 1rem);

    /* oberer Abstand bleibt auch hier fix */
    padding-top: 3rem;
  }

  .hauptmenu a {
    gap: clamp(0.125rem, 0.08rem + 0.15vw, 0.375rem);
    padding:
      clamp(0.125rem, 0.1rem + 0.1vw, 0.375rem)
      clamp(0.25rem, 0.2rem + 0.2vw, 0.75rem);
  }
}






/* Hover-Effekt */
.hauptmenu a:hover,
.hauptmenu a:focus {
  background-color: #f3f3f3; /* dezentes hellgrau wie im Screenshot */
  color: #111;
  transform: scale(1.05);
}

/* Aktiver Menüpunkt */
.hauptmenu .active > a {
  background-color: #e9e9e9;
  font-weight: 600;
  color: #000;
}

/* Optional: Dropdown-Pfeil (wenn nötig) */
.hauptmenu .has-dropdown > a::after {
  content: "▾"; /* oder ein SVG/Icon */
  font-size: 0.8rem;
}




/* Mobiles Men� - inspiriert von mmenu.js */


#hamburger {

    opacity: .95;
    display: block;
    width: auto;
    height: 45px;
    position: absolute;
    top: -4px;
    left: 0;
    z-index: 15;
}


.mburger:hover {color:#454545 !important;}
.mburger {
 --mb-button-size:60px;
 --mb-bar-width:0.6;
 --mb-bar-height:4px;
 --mb-bar-spacing:10px;
 --mb-cross-timeout:0.4s;
 background:0 0;
 border:none;
 border-radius:0;
 color:inherit;
 display:inline-block;
 position:relative;
 box-sizing:border-box;
 height:var(--mb-button-size);
 padding:0 0 0 var(--mb-button-size);
 margin:0;
 line-height:var(--mb-button-size);
 vertical-align:middle;
 appearance:none;
 outline:0;
 cursor:pointer;
	color:#0077ba;
	}
.mburger b {
 display:block;
 position:absolute;
 left:calc(var(--mb-button-size) * ((1 - var(--mb-bar-width))/ 2));
 width:calc(var(--mb-button-size) * var(--mb-bar-width));
 height:var(--mb-bar-height);
 border-radius:calc(var(--mb-bar-height)/ 2);
 background:currentColor;
 color:inherit;
 opacity:1
}
.mburger b:nth-of-type(1) {
 bottom:calc(50% + var(--mb-bar-spacing));
 transition:bottom .2s ease,transform .2s ease
}
.mburger b:nth-of-type(2) {
 top:calc(50% - (var(--mb-bar-height)/ 2));
 transition:opacity .2s ease
}
.mburger b:nth-of-type(3) {
 top:calc(50% + var(--mb-bar-spacing));
 transition:top .2s ease,transform .2s ease
}
.mburger span:not(:empty) {
 padding-right:calc(var(--mb-button-size) * ((1 - var(--mb-bar-width))/ 2))
}
.mm-wrapper_opened .mburger b:nth-of-type(1) {
 bottom:calc(50% - (var(--mb-bar-height)/ 2));
 transform:rotate(45deg)
}
.mm-wrapper_opened .mburger b:nth-of-type(2) {
 opacity:0
}
.mm-wrapper_opened .mburger b:nth-of-type(3) {
 top:calc(50% - (var(--mb-bar-height)/ 2));
 transform:rotate(-45deg)
}
.mburger--collapse b:nth-of-type(1) {
 transition:bottom .2s ease,margin .2s ease,transform .2s ease;
 transition-delay:.2s,0s,0s
}
.mburger--collapse b:nth-of-type(2) {
 transition:top .2s ease,opacity 0s ease;
 transition-delay:.3s,.3s
}
.mburger--collapse b:nth-of-type(3) {
 transition:top .2s ease,transform .2s ease
}
.mm-wrapper_opened .mburger--collapse b:nth-of-type(1) {
 bottom:calc(50% - var(--mb-bar-spacing) - var(--mb-bar-height));
 margin-bottom:calc(var(--mb-bar-spacing) + (var(--mb-bar-height)/ 2));
 transform:rotate(45deg);
 transition-delay:calc(var(--mb-cross-timeout) + .1s),calc(var(--mb-cross-timeout) + .3s),calc(var(--mb-cross-timeout) + .3s)
}
.mm-wrapper_opened .mburger--collapse b:nth-of-type(2) {
 top:calc(50% + var(--mb-bar-spacing));
 opacity:0;
 transition-delay:calc(var(--mb-cross-timeout) + 0s),calc(var(--mb-cross-timeout) + .2s)
}
.mm-wrapper_opened .mburger--collapse b:nth-of-type(3) {
 top:calc(50% - (var(--mb-bar-height)/ 2));
 transform:rotate(-45deg);
 transition-delay:calc(var(--mb-cross-timeout) + .3s),calc(var(--mb-cross-timeout) + .3s)
}
.mburger--spin b:nth-of-type(1) {
 transition-delay:.2s,0s
}
.mburger--spin b:nth-of-type(2) {
 transition-duration:0s;
 transition-delay:.2s
}
.mburger--spin b:nth-of-type(3) {
 transition-delay:.2s,0s
}
.mm-wrapper_opened .mburger--spin b:nth-of-type(1) {
 transform:rotate(135deg);
 transition-delay:calc(var(--mb-cross-timeout) + 0s),calc(var(--mb-cross-timeout) + .2s)
}
.mm-wrapper_opened .mburger--spin b:nth-of-type(2) {
 transition-delay:calc(var(--mb-cross-timeout) + 0s)
}
.mm-wrapper_opened .mburger--spin b:nth-of-type(3) {
 transform:rotate(225deg);
 transition-delay:calc(var(--mb-cross-timeout) + 0s),calc(var(--mb-cross-timeout) + .2s)
}
.mburger--squeeze b:nth-of-type(1) {
 transition-delay:.1s,0s
}
.mburger--squeeze b:nth-of-type(2) {
 transition-delay:.1s
}
.mburger--squeeze b:nth-of-type(3) {
 transition-delay:.1s,0s
}
.mm-wrapper_opened .mburger--squeeze b:nth-of-type(1) {
 transition-delay:calc(var(--mb-cross-timeout) + 0s),calc(var(--mb-cross-timeout) + .1s)
}
.mm-wrapper_opened .mburger--squeeze b:nth-of-type(2) {
 transition-delay:calc(var(--mb-cross-timeout) + 0s)
}
.mm-wrapper_opened .mburger--squeeze b:nth-of-type(3) {
 transition-delay:calc(var(--mb-cross-timeout) + 0s),calc(var(--mb-cross-timeout) + .1s)
}
.mburger--tornado b:nth-of-type(1) {
 transition:bottom .2s ease,transform .2s ease;
 transition-delay:.2s
}
.mburger--tornado b:nth-of-type(2) {
 transition:opacity 0s ease,transform .2s ease;
 transition-delay:.1s,.1s
}
.mburger--tornado b:nth-of-type(3) {
 transition:top .2s ease,transform .2s ease;
 transition-delay:0s
}
.mm-wrapper_opened .mburger--tornado b:nth-of-type(1) {
 transform:rotate(-135deg);
 transition-delay:calc(var(--mb-cross-timeout) + 0s)
}
.mm-wrapper_opened .mburger--tornado b:nth-of-type(2) {
 opacity:0;
 transform:rotate(-135deg);
 transition-delay:calc(var(--mb-cross-timeout) + .4s),calc(var(--mb-cross-timeout) + .1s)
}
.mm-wrapper_opened .mburger--tornado b:nth-of-type(3) {
 transform:rotate(-225deg);
 transition-delay:calc(var(--mb-cross-timeout) + .2s)
}