/* =========================
   FIX: Header nach vorne + nichts abschneiden
   ========================= */
.header-row{
  position: relative;
  z-index: 5000;
  overflow: visible;
}

.header-menu.menu,
.header-menu{
  position: relative;
  z-index: 6000;
  overflow: visible;
}

/* =========================
   LEVEL 1: Punkte nebeneinander
   ========================= */

.header-menu .navilo{
  list-style:none;
  margin:0 !important;
  padding:0 !important;

  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap: clamp(1.2rem, 3vw, 2.8rem);
}

/* WICHTIG: li muss relative sein, damit submenu zuverlässig ankoppelt
   (die breite Leiste bleibt trotzdem über left/right:0 am nav sauber) */
.header-menu .navilo > li{
  list-style:none;
  position: relative;
}

/* Hover-Brücke (verhindert zuklappen beim runterfahren) */
.header-menu .navilo > li::after{
  content:"";
  position:absolute;
  left:0;
  top:100%;
  width:100%;
  height:14px;
}

/* Level 1 Links */
.header-menu .navilo > li > a {
  font-size: clamp(0.875rem, 0.85vw, 1.05rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 0.4rem 0;
  display: inline-block;
  color: #fff;
  position: relative;
  white-space: nowrap;
}

.header-menu .navilo > li > a:hover{
  color:#000;
}

/* Underline Animation */
.header-menu .navilo > li > a::before{
  content:'';
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:2px;
  background:#000;
  transition: width .35s ease;
}

.header-menu .navilo > li:hover > a::before,
.header-menu .navilo > li.active > a::before,
.header-menu .navilo > li > a:focus-visible::before{
  width:100%;
}


/* =========================
   DROPDOWN: weisse Leiste + Grid
   ========================= */
.header-menu .navilo > li > ul.sub2{
  list-style: none;
  margin: 8px 0 0;
  padding: 8px 0;

  position: absolute;
  top: 100%;
  left: 0;

  min-width: 240px;

  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  z-index: 99999;

  display: none;
}


/* Aufklappen bei Hover / Keyboard */
.header-menu .navilo > li:hover > ul.sub2,
.header-menu .navilo > li:focus-within > ul.sub2{
  display:grid;
}

/* Dropdown Links */
.header-menu .navilo > li > ul.sub2 a {
  display: block;
  padding: 10px 25px;
  color: #222;
  text-decoration: none;
  border-bottom: 1px solid #e6e6e6;
  font-size: 0.8rem;
}

.header-menu .navilo > li > ul.sub2 a:hover{
  background:#f4f4f4;
  color:#000;
}


/* =========================
   ACCESSIBILITY
   ========================= */

.header-menu .navilo a:focus-visible{
  outline: 3px solid currentColor;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce){
  .header-menu .navilo > li > a::before{ transition:none; }
}


/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 900px){
  .header-row{
    flex-wrap:wrap;
    row-gap: .75rem;
  }

  .header-menu.menu{
    justify-content:center;
  }

  .header-menu .navilo{
    flex-wrap:wrap;
    justify-content:center;
    gap: 1rem 1.5rem;
  }

  /* Mobile: Hover-Brücke aus */
  .header-menu .navilo > li::after{
    display:none;
  }

  /* Mobile: Dropdown untereinander, nicht absolute */
  .header-menu .navilo > li > ul.sub2{
    position: static;
    left:auto;
    right:auto;
    top:auto;

    margin: 10px 0 0;
    box-shadow:none;
    padding: 12px 0;
    grid-template-columns: 1fr;
    display:none;
  }

  .header-menu .navilo > li:hover > ul.sub2,
  .header-menu .navilo > li:focus-within > ul.sub2{
    display:grid;
  }
}



#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;
	}
.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)
}



.mobieposition {font-size: 30px; }
.mobieposition a {float: left; color:#404040; }
.mobieposition p {position: absolute; left: 39px; top: 9px;}


.mobieposition {
z-index: 1000000;
position: absolute;
margin: 0px 6px 1px 13px;
 
}