:root {
   --nav-h: 4vh; /* Höhe der NAV-Bar */
   --nav-bg: #5F8755; /* Hintergrund der NAV-Bar */
   
   --nav-main-button-h: 5vh;
   --nav-main-button-h-desktop: calc(var(--nav-main-button-h) - 1vh);
   --nav-sub-button-h: 5vh;
   --nav-sub-button-h-desktop: calc(var(--nav-main-button-h) - 1vh);
}

/* Header */
/*.nav_main_button:hover {background: var(--nav-bg);}*/
nav{height: var(--nav-h);width: 100%;position: fixed;display: flex;justify-content: space-between;align-items: center;background-color: var(--bg-c);border-bottom: black solid 1px;}
.kopf a{text-decoration:none;}
.kopf li a{color:black;}
nav ul{height: 100%;display: flex;flex-direction: row;justify-content: flex-end;align-items: center;list-style: none; /* Stichpunkte entfernen */}
nav li{width: 9vw;text-align: center;position: relative;}
nav ul a{height: 100%;width: 100%;display: flex;color: var(--link-c);align-items: center;justify-content: center;text-decoration: none;cursor: pointer;}
.dropdown{height: min-content;min-width: 150px;width: 200px;background-color: lightgreen;display: none;flex-direction: column;position: absolute;top: var(--nav-main-button-h-desktop);}
nav li:hover .dropdown{display: flex;}
nav li:hover{background-color: green;}
nav input[type="checkbox"]{display: none;}
.dropdown li{width: 100%;border: 1px solid black;}
.dropdown li a{color: var(--nav-c);width: 100%; height: 100%;cursor: pointer;}
.dropdown li a:hover{background-color: green;}
.hide-onDesktop{display: none;}
.expandable_li{ /* Kategorien im Header */display: flex;justify-content: center;align-items: center;}
.header_switch{ /* button zum umschalten des headers */height: 1vh;background: var(--link-c);}
.versteckt_durch_passwort{display: none;}
.nav_main_button {height: var(--nav-main-button-h-desktop); background: unset; align-content: center;}
.nav_sub_button {height: var(--nav-main-button-h-desktop); background: var(--footer-bg);}

/* Header Ende */
/*#####################################*/

/* Seitendesign */


@media screen and (max-width: 1081px) { /* Alles BIS 1081 Pixel breite */
   nav ul{height: min-content;width: 100%;background-color: var(--bg-c);display: none;position: absolute;top: var(--nav-h);}
   nav ul a{padding: 5px 0;}
   .mobile_header{height: var(--nav-h);width: 100%;}
   nav li{width: 100%;}
   .expandable_li{display: block;padding: 0;align-content: center;}
   .expandable_li label{cursor: pointer;display: block;padding: 5px 0;}
   .expandable_li:hover .dropdown{display: none;}
   .expandable_li input[type="checkbox"]:checked ~ .dropdown{display: block;}
   .dropdown{position: static;width: 100%;height: 100%;}
   .dropdown li{position: static;display: block;}
   .dropdown li a{height: 100%;width: 100%;padding: 0;justify-content: center;}
   header .knopf{margin-bottom: 0;}
   .nav_main_button {background: var(--bg-c); height: var(--nav-sub-button-h);}
   .nav_sub_button {background: var(--bg-c); height: var(--nav-sub-button-h);}
}
@media screen and (min-width: 1999px) { /* Alles AB 1999 Pixel breite */
   ul{font-size:100%;}
}
@media screen and (max-width: 500px) { /* Alles BIS 480 Pixel breite */
}