/* HEADER */
/* HEADER */
header {
    top:0;
    width:100%;
    height:auto;
    background-color: white;
    transition: all 1s;
    position:-webkit-sticky;
    position:sticky;
    z-index:10;
    border-bottom: 1px solid #efefef;
    padding:25px 10px;
    }
.headerbox {
    display:flex;
    align-items: center;
    width:100%;
    margin:0 auto;
}
.logobox {width:15%;display:flex;justify-content:flex-start;align-items:center;}
.logo {max-width:100%;height:auto;display:block;}
.skip-link {
    position: absolute;
    left: -9999px; /* Versteckt */
    top: 100px; /* Unter dem Logo */
    padding: 10px;
    background-color: #3d7e2d;
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    white-space: nowrap;
    z-index: 10000;
}
.skip-link:focus {
    left: 0; /* Erscheint bei Fokus */
    outline: 3px solid #5bc72b;
    outline-offset: 2px;
}
.navbox {width:85%;display:flex;justify-content:flex-end;align-items: center;}
#mainlogo {transition:0.75s;}
#hb {width:80px;transition:0.75s;}
.iconundlink {display:flex;align-items:center;}
/* Scrollback-Button */
#scrollBtn {
  display: none;
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: #4ABC36;
  color: #3d7e2d;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 3px;
  animation: einblenden 2s;
}
#scrollBtn:hover {
  background-color: #3d7e2d;
  color:whitesmoke;
  animation: einblenden 2s;
}

/* Desktop-Navigation */
/* Desktop-Navigation */
nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}
nav ul li {
    display: inline-block;
    line-height: 1.75em;
    text-align: left;
    padding:0 5px;
    margin:0 15px;
}
nav ul li a {
    cursor: pointer;
    text-decoration: none;
    line-height: 1.75em;
    font-size:1.2em;
    font-weight:300;
    color:#3d7e2d;
}
nav ul li.navi a:hover {
    color: #5BC72B;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}
/* besuchte und aktive Links */
nav ul li a:visited {
    padding: 5px;
    cursor: pointer;
    text-decoration: none;
    color: #3d7e2d;
}
nav ul li a:active {
    padding: 5px;
    cursor: pointer;
    text-decoration: none;
    color: #3d7e2d;
}
nav ul li:hover {
    background: #fff;
}
nav ul li ul {
    display: flex;
    flex-direction: column;
    position: absolute;
    margin:0 0 0 0;
}
nav ul li ul li {
    width: 250px;
    background-color: #efefef;
    display: none;
    border-top: 1px solid #3d7e2d;
    border-left: 1px solid #3d7e2d;
    border-right: 1px solid #3d7e2d;
    margin:0;
}
.last-item {border-bottom: 1px solid #3d7e2d;}
.leer {border:0;background-color:white;height:10px;}
nav ul li ul li a {
    cursor: pointer;
    text-decoration: none;
    color: #3d7e2d;
}  
nav ul li ul li a:hover {
    color: #5bc72b;
} 
nav ul li ul li:hover a {
    cursor: pointer;
    text-decoration: none;
    color: whitesmoke;
}
nav ul li ul li a:visited {
    cursor: pointer;
    text-decoration: none;
    color: #5bc72b;
}
nav ul li:hover ul li {
    display: block;
    background-color: #fff;
    box-shadow: 6px 6px -4px #888;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}
nav ul li ul li:hover {
    display: block;
    background-color: #3d7e2d;
}
/* Untermenü-ITEMS bei Fokus anzeigen */
nav ul li a:focus ~ ul li,
nav ul li a[aria-expanded="true"] ~ ul li {
    display: block !important;
}
/* Untermenü-ITEMS offen halten wenn Fokus drin ist */
nav ul li ul:focus-within li {
    display: block !important;
}
/* Zusätzlich: Fokus-Styling verbessern */
nav ul li a:focus {
    outline: 2px solid #5bc72b;
    outline-offset: 2px;
}
nav ul li ul li a:focus {
    background-color: #3d7e2d;
    color: whitesmoke;
    outline: 2px solid #5bc72b;
}
*:focus {
    outline: 1px dotted #5bc72b !important;
}
/* Menü bei geöffnetem Status anzeigen - SEHR WICHTIG! */
nav ul li.navi.menu-open ul li {
    display: block !important;
    background-color: #fff;
    box-shadow: 6px 6px -4px #888;
}
/* Auch bei aria-expanded */
nav ul li.navi a[aria-expanded="true"] ~ ul li {
    display: block !important;
    background-color: #fff;
    box-shadow: 6px 6px -4px #888;
}
/* Untermenü sichtbar halten während Navigation mit Tab */
nav ul li.navi ul:focus-within li {
    display: block !important;
}
/* Safari-Fix: Links in Untermenüs fokussierbar machen */
nav ul li ul li a {
    -webkit-user-select: auto;
    user-select: auto;
}
/* Safari braucht explizites tabindex oder pointer-events */
nav ul li.navi.menu-open ul li a,
nav ul li.navi a[aria-expanded="true"] ~ ul li a {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Mobile Navigation */
/* Mobile Navigation */
.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #222;
    overflow-x: hidden;
    transition: 0.5s;
}
.overlay-content {
    position: relative;
    top: 10%;
    width: 90%;
    font-size: 1em;
    font-weight: 300;
    text-align: left;
}
.overlay-content ul {
    list-style: none;
}
.overlay-content li {
    padding: 0.5rem;
    border-bottom: .5px solid silver;
}
.overlay-content ul li ul li {
    border-bottom: .03em dashed #aaa;
    background-color: #333;
} 
.overlay a {
    text-decoration: none;
    color: whitesmoke;
    transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
    color: #4ABC36;
}
.overlay .closebtn {
    position: absolute;
    top: 2.5%;
    right: 2.5%;
    font-size: 3em;
    border:0;
    background-color:#222;
    color:whitesmoke;
    cursor: pointer;
}
.hamburger {
    color: #312635;
    cursor: pointer;
    font-size: 3em;
    border:0;
    background-color:transparent;
}
.hb {
    cursor: pointer;
    border:0;
    background-color:transparent;
    padding:10px 10px 0 0;
}
/* Der Checkbox-Hack zum Öffnen des Untermenüs */
.dropdown > input {
    display: none;
    } 
.submenu {
    display: none;
    margin: 15px 0 15px -40px;
    }
input[type=checkbox]:checked ~ .submenu {
    display: block
    } 
label {
    cursor:pointer;
    } 
label:hover {
    color: #fff;    
    }
/* Mobile Navigation Ende */
.logoweiss {max-width:200px; height:auto; margin:0 50px;}
.last-item-mobile {border-bottom: none;}
/* Mobile Navigation komplett aus dem Tab-Flow nehmen wenn geschlossen */
.overlay {
    display: none; /* oder visibility: hidden */
}
.overlay.active {
    display: block; /* wird beim Öffnen gesetzt */
}
/* Alle Links in geschlossener Mobile-Nav nicht fokussierbar */
#myNav:not(.active) a,
#myNav:not(.active) input,
#myNav:not(.active) label {
    pointer-events: none;
    visibility: hidden;
}
/* Mobile Navigation - Labels mit Tastatur fokussierbar */
.overlay .dropdown label {
    display: block;
    cursor: pointer;
    padding: 10px 0;
    outline: none;
}
.overlay .dropdown label:focus {
    outline: 2px solid #5bc72b;
    outline-offset: 2px;
    background-color: rgba(91, 199, 43, 0.1);
}
/* Checkbox mit Tastatur bedienbar */
.overlay .dropdown input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.overlay .dropdown input[type="checkbox"]:focus + label {
    outline: 2px solid #5bc72b;
    outline-offset: 2px;
    background-color: rgba(91, 199, 43, 0.1);
}

/* Media queries Navigation */
/* Media queries Navigation */
/* Media queries Navigation */
@media screen and (max-width: 1700px) {
    nav ul li a {font-size:1em;}
    .iconundlink img {width:30px;height:30px;}
    }
@media screen and (max-width: 1500px) {
    nav ul li {margin:0;}
}
@media screen and (min-width: 1201px) {
    .hb {display: none;}
}
@media screen and (max-width: 1200px) {
    .navi {display: none;}
    .logobox {width:50%;}
    .navbox {width:50%;}
}
/* HEADER */  
/* HEADER */