/* Grundlayout */
.hauptmenu {
    position: relative;
    font-family: 'Ubuntu', sans-serif;
}

/* Desktop Navigation */
.main-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 40px;
}

.main-menu > li {
    position: relative;
}

.main-menu > li + li::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 28px;
    background: #28a3ac;
    border-radius: 20px;
}

/* Link Style */
.main-menu > li > a {
    text-decoration: none;
    font-size: 2rem;
    font-weight: 700;
    color: #000;
    position: relative;
    padding: 4px 0;
    transition: color .3s ease;
}

/* Cooler Hover Effekt */
.main-menu > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0%;
    height: 3px;
    background: #28a3ac;
    transition: width .3s ease;
    border-radius: 10px;
}

.main-menu > li > a:hover {
    color: #28a3ac;
}

.main-menu > li > a:hover::after {
    width: 100%;
}

/* Burger Button */
.menu-toggle-checkbox {
    display: none;
}

.menu-toggle {
    display: none;
    width: 32px;
    height: 24px;
    cursor: pointer;
    position: relative;
}

.menu-toggle::before,
.menu-toggle::after,
.menu-toggle span {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background: #000;
    border-radius: 5px;
}

.menu-toggle::before {
    top: 0;
}
.menu-toggle::after {
    bottom: 0;
}
.menu-toggle span {
    top: 50%;
    transform: translateY(-50%);
}

/* Checkbox aktiv => Menü offen */
.menu-toggle-checkbox:checked + .menu-toggle::before {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
.menu-toggle-checkbox:checked + .menu-toggle::after {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}
.menu-toggle-checkbox:checked + .menu-toggle span {
    opacity: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .main-menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        background: #fff;
        padding: 20px;
        display: none;
        width: 100%;
        box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    }

    .menu-toggle {
        display: block;
        margin-left: auto;
    }

    #mainmenu {
        width: 100%;
    }

    .main-menu > li + li::before {
        display: none;
    }

    /* Menü öffnen wenn Checkbox gechecked */
    .menu-toggle-checkbox:checked ~ nav .main-menu {
        display: flex;
        animation: fadeIn .3s ease;
    }
}

/* Fade-in Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}



/* 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:#01803d;
	}
.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)
}