/* ============================================
   DESKTOPMENÜ – MODERN, DYNAMISCH & ROT
   ============================================ */

/* Grundlayout */
.desktomenu {
  background-color: #c40000;
  color: #fff;
}

/* Menü-Container */
.desktomenu .exo-menu {
  container-type: inline-size;
}

/* Hauptnavigation */
.exo-menu .navilo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: nowrap;
}

/* Hauptebene: einzelne Menüpunkte */
.exo-menu .navilo > li {
  position: relative;
}

/* Trenner zwischen Punkten */
.exo-menu .navilo > li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 25%;
  height: 50%;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.4);
  opacity: clamp(0.2, 0.6cqw, 0.6);
}

/* Links der 1. Ebene */
.exo-menu .navilo > li > a {
  display: block;
  color: #fff;
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease;
  text-transform: uppercase;

  font-size: clamp(14px, 1.6cqw, 22px);
  padding-inline: clamp(10px, 1.2cqw, 25px);
  padding-block: 14px;
}

/* Hover / Active */
.exo-menu .navilo > li > a:hover,
.exo-menu .navilo > li.active > a {
  background-color: #a00000;
  color: #fff;
}

/* Weißer Unterstrich beim Hover */
.exo-menu .navilo > li > a {
  position: relative;
}

.exo-menu .navilo > li > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 0;
  height: 2px;
  background: white;
  transition: all 0.3s ease;
}

.exo-menu .navilo > li > a:hover::after {
  left: 0;
  width: 100%;
}

/* ============================================
   OPTIMIERTE UNTERMENÜS
   ============================================ */

/* Alle Untermenüs */
.exo-menu .navilo ul {
  list-style: none; /* keine Punkte */
  margin: 0;
  padding: 0;
}

/* Untermenü (1. Ebene) */
.exo-menu .navilo li ul.sub2 {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #a00000;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  z-index: 1000;

  width: max-content;
  min-width: 100%;
}

/* Anzeigen bei Hover */
.exo-menu .navilo > li:hover > ul.sub2,
.exo-menu .navilo > li:focus-within > ul.sub2 {
  display: block;
}

/* Untermenü-Links */
.exo-menu .navilo li ul.sub2 a {
  display: block;
  text-decoration: none;
  color: #fff;
  padding: 10px 16px;
  font-size: clamp(13px, 1.2cqw, 18px);
  line-height: 1.25;
  transition: background 0.25s ease;
  min-width: 100%;
}

.exo-menu .navilo li ul.sub2 a:hover {
  background-color: #870000;
}

/* Pfeile bei Menüpunkten mit Untermenü */
.exo-menu .navilo > li:has(> ul.sub2) > a::before {
  content: "▼";
  display: inline-block;
  margin-right: 0.5em;
  font-size: 0.8em;
  transform: translateY(-1px);
}

/* Pfeile für Untermenüs der 2. Ebene */
.exo-menu .navilo li ul.sub2 > li:has(> ul) > a::after {
  content: "►";
  float: right;
  font-size: 0.85em;
}

/* Zweite Unterebene (Flyout) */
.exo-menu .navilo li ul.sub2 li {
  position: relative;
}

.exo-menu .navilo li ul.sub2 li > ul {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  background-color: #940000;
  border-radius: 0 6px 6px 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  width: max-content;
  min-width: 100%;
}

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

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

@media (max-width: 991.98px) {
  .exo-menu .navilo {
    flex-wrap: wrap;
  }
}

@supports not (font-size: 1cqw) {
  .exo-menu .navilo > li > a {
    font-size: clamp(14px, 1.6vw, 22px);
    padding-inline: clamp(10px, 1.2vw, 25px);
  }
}




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