/* =========================================================
   SGK/Vobis – Menü (modernisiert)
   - Top-Level zentriert
   - Header-Leiste schwarz
   - Akzentfarbe: #52bfd3 (ersetzt Orange)
   - Submenüs linksbündig, ohne Unterstreichung
   - 2. & 3. Ebene zuverlässig per Hover
   - Pfeil ">" an Items mit Untermenü
   ========================================================= */

/* ===== Variablen ===== */
:root{
  --header-bg: #000000;     /* schwarze Headerleiste */
  --accent:    #52bfd3;     /* ehem. Orange -> Türkis */
  --text-on-accent: #ffffff;
  --submenu-bg: #55565a;    /* ruhiger Grauton für Basis der Dropdowns */
  --submenu-sep: rgba(255,255,255,.18);
  --submenu-hover: #5f6167; /* leicht heller beim Hover */
  --top-font-size: 1.2rem;  /* du hattest 1.2rem */
}

/* ===== Rahmen / Container ===== */
.mainmenu{
  background: var(--header-bg);
}
.exo-menu.menu{
  text-align: center;                  /* zentriert den UL-Block */
  padding: 0;
}

/* ===== Top-Level (UL.navilo) zentrieren ===== */
.exo-menu.menu .navilo{
  display: inline-flex;                /* UL als "Block" in der Mitte */
  gap: .25rem;                         /* kleiner Abstand zwischen Items */
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  align-items: stretch;
}

/* ===== Top-Level LI + A ===== */
.menu .navilo > li{
  position: relative;                  /* Referenz für Submenüs */
  list-style: none;
}

.menu .navilo > li > a,
.exo-menu > li > a{
  display: block;
  padding: .6rem .8rem;
  font-size: var(--top-font-size);
  font-weight: 600;
  letter-spacing: .1em;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  color: #fff;
  background: transparent;             /* Leiste ist schwarz, Links transparent */
  transition: background-color .15s ease, color .15s ease;
}

/* Hover/Active oben – Akzent */
.menu .navilo > li:hover > a,
.menu .navilo > li:focus-within > a,
.menu .navilo > li.active > a,
.navilo .active a,
.exo-menu ul .active a{
  background: var(--accent);
  color: var(--text-on-accent) !important;
}

/* ===== Erste Dropdown-Ebene (.sub2) ===== */
.menu .navilo .sub2{
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  margin: 0; padding: 0;
  list-style: none;
  background: var(--submenu-bg);
  z-index: 9998;
  border-top: 0;
}

/* Öffnen per Hover */
.menu .navilo li:hover > .sub2{ display: block; }

/* Items in Sub2 */
.menu .navilo .sub2 li{
  position: relative;                  /* Referenz für .sub3 */
  border-bottom: 1px solid var(--submenu-sep);
}
.menu .navilo .sub2 li:last-child{ border-bottom: none; }

.menu .navilo .sub2 a{
  display: block;
  padding: 12px 16px;
  font-size: 1.05rem;
  color: #fff;
  background: transparent;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}

/* Hover in Sub2 */
.menu .navilo .sub2 a:hover{
  background: var(--submenu-hover);
  color: #fff !important;
}

/* Pfeil ">" für Punkte mit Untermenü */
.menu .navilo .sub2 .subitem > a::after{
  content: ">";
  float: right;
  margin-left: 8px;
  opacity: .9;
  font-size: 1.1em;
  line-height: 1;
}

/* ===== Zweite Dropdown-Ebene (.sub3) ===== */
.menu .navilo .sub3{
  display: none;
  position: absolute;
  top: 0;                 /* bündig mit übergeordnetem LI */
  left: 100%;             /* rechts daneben */
  margin-left: -1px;      /* 1px-Überlappung -> kein Hover-Gap */
  min-width: 230px;
  background: var(--accent);   /* hier bewusst Akzent statt Orange */
  list-style: none;
  padding: 0; margin-top: 0;
  z-index: 10000;         /* über allem */
}

/* Sub3 sichtbar halten beim Hover auf dem Parent in Sub2 */
.menu .navilo .sub2 li:hover > .sub3{ display: block; }

/* Items in Sub3 */
.menu .navilo .sub3 li{
  border-bottom: 1px solid rgba(255,255,255,.25);
}
.menu .navilo .sub3 li:last-child{ border-bottom: none; }

.menu .navilo .sub3 a{
  display: block;
  padding: 12px 16px;
  font-size: 1rem;
  color: #fff !important;
  text-align: left;
  text-decoration: none;
  background: transparent;
}
.menu .navilo .sub3 a:hover{
  background: rgba(0,0,0,.12);
}

/* ===== Globale Bereinigungen / Modernisierung ===== */

/* Alle ULs des Menüs entbulleten & reset */
.menu ul, .menu .navilo ul{
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}

/* Keine alten Floats/IE-Reste */
.menu .navilo li{ float: none; }
.lt-ie9, .ie8{ display:none !important; } /* Altlasten ausblenden */

/* Farbschemata, die du erwähnt hast */
.mm-menu_theme-dark{
  background: #55565a !important;
  --mm-color-background: #55565a !important;
}

/* Aktive Sub2-Reihe (deine Klasse) */
.navilo .sub2 .active{ background: #e0e2e9; }

/* Unnötige ältere Regeln neutralisieren */
.menu .navilo ul{ background: var(--accent); }   /* ehem. #e96c07 */
.menu .navilo ul li ul{ background: var(--accent); }
.menu .navilo .sub2{ margin-top: 0 !important; } /* kein Off-Set nach unten */

/* Tooltips/Unterstreichungen vermeiden */
.menu .navilo a:hover{ text-decoration: none; }

/* Für Sicherheit: nichts verdecken */
.mainmenu, .mainmenu *{ overflow: visible !important; }

/* ===== Responsive – optional feineres Spacing auf kleineren Screens ===== */
@media (max-width: 992px){
  .exo-menu.menu .navilo{ gap: 0; }
  .menu .navilo > li > a{ padding: .6rem .6rem; }
}






/* --- Klickbar + zentriert unter dem Button --- */
.topmenu { position: relative; z-index: 10000; }       /* über dem Header-Inhalt */

.topmenu ul.navilo {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin: 0; padding: 0; list-style: none;
}

.topmenu li { position: relative; list-style: none; overflow: visible; }
.topmenu a  { display: inline-block; padding: 4px 12px; border: 1px solid #52bfd3; border-radius: 6px; color:#fff; text-decoration:none; transition:.2s; }
.topmenu a:hover,
.topmenu li:hover > a { background:#52bfd3; color:#fff; }

/* Dropdown */
.topmenu .sub2{
  display: none;
  position: absolute;
  top: 100%;                          /* KEINE Lücke mehr */
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  margin: 0; padding: 0; list-style: none;
  background: #55565a;
  border-radius: 6px;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
  z-index: 10001;                     /* sicher ganz oben */
  text-align: center;
  pointer-events: auto;               /* Klicks durchlassen */
}

/* Sichtbar halten – auch wenn Maus schon über dem Dropdown ist */
.topmenu li:hover > .sub2,
.topmenu .sub2:hover { display: block; }

.topmenu .sub2 li{ border-bottom:1px solid rgba(255,255,255,.18); }
.topmenu .sub2 li:last-child{ border-bottom:none; }

.topmenu .sub2 a{
  display:block; padding:10px 16px; font-size:1rem;
  background:transparent; color:#fff; text-decoration:none;
}
.topmenu .sub2 a:hover{ background:#52bfd3; color:#fff; }

/* Schutz am rechten Rand: letzte 2 Menüpunkte docken links an */
.topmenu ul.navilo > li:nth-last-child(-n+2) > .sub2{
  left:auto; right:0; transform:none; text-align:center;
}





.exo-menu{
	
	
	list-style: none;
	position:relative;
	background: none;
}
.exo-menu > li {	display: inline-block;float:left;}



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