.visually-hidden {
	display: none;
	visibility:  hidden;
} 
input[type='checkbox']:not(:checked)+ul {
    display: none;
}
/* ----- ----- ----- */
body {
    font-family: "Arial", serif;
    line-height: 150%;
    background: #000000 ;
    background-image: url(../images/bg.jpg);    
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100% ;
    background-position: top center;
}
/* ----- ----- ----- */



/* ----- ----- ----- check device width ----- ----- ----- */
/* #content-desktop {display: block;} */
/* #content-mobile {display: none;} */
@media screen and (min-width: 1024px /* 768px */) {
 #content-desktop {display: block;}
 #content-mobile {display: none;}
}
@media screen and (max-width: 1023px /* 768px */) {
 #content-desktop {display: none;}
 #content-mobile {display: block;}
}
/* ----- ----- ----- check device width ----- ----- ----- */



/* ----- ----- ----- navigation left ----- ----- ----- */
navileft{
 color: white;
 background-color: darkgrey;
 display: block;
 width: 250px;
 float: left;
 text-align: left;
 padding: 0.5em; /* Raum zwischen dem Inhalt eines Elements und seinem Rahmen */
 margin: 0.4em; /* definiert den Außenabstand um das Element */
}
navileft :hover{
 color: black;
 background-color: lightgrey;
 padding: 0.5em;
}
navileft a {
/* background-color: black; */
 color: white;
 text-decoration: none;
}
navileft a:hover {
 color: black;
 background-color: grey;
 padding: 0.5em;
}
navileft input[type='checkbox'] /* ,navleft label */  {
 display: none;
}
navileft ul {
 list-style-type: none; /* Entfernt Punkte */
 padding: 0.0em;
 margin: 0.0em 0.0em;
}
navileft li {
 display: block; /* display: block; Oder display: list-item; */
 margin: 0.2em 0.0em;
 padding: 0.2em;
}
navileft ul > li > ul{
 display: block; /* display: block; Oder display: list-item; */
 margin: 0.2em 0.0em;
 padding: 0.2em;
}
/* ----- ----- ----- navigation left ----- ----- ----- */



/* ----- ----- ----- navigation right ----- ----- ----- */
naviright{
 color: white;
 background-color: darkgrey;
 display: absolute;
 width: 250px;
    float: right;
 text-align: right;
 padding: 0.5em; /* Raum zwischen dem Inhalt eines Elements und seinem Rahmen */
 margin: 0.4em; /* definiert den Außenabstand um das Element */
}
naviright :hover{
 color: black;
 background-color: lightgrey;
 padding: 0.5em;
}
naviright a {
/* background-color: black; */
 color: white;
 text-decoration: none;
}
naviright a:hover {
 color: black;
 background-color: grey;
 padding: 0.5em;
}
naviright input[type='checkbox'] /* ,navleft label */  {
 display: none;
}
naviright ul {
 list-style-type: none; /* Entfernt Punkte */
 padding: 0.0em;
 margin: 0.0em 0.0em;
}
naviright li {
 display: block; /* display: block; Oder display: list-item; */
 margin: 0.2em 0.0em;
 padding: 0.2em;
}
naviright ul > li > ul{
 display: block; /* display: block; Oder display: list-item; */
 margin: 0.2em 0.0em;
 padding: 0.2em;
}
/* ----- ----- ----- navigation right ----- ----- ----- */




/* ----- ----- ----- navigation mobile ----- ----- ----- */
navmobile{
 color: white;
 background-color: darkgrey;
 display: block;
 /* width: 250px; */
    float: left;
  position: relative;
  z-index: 1000;
  left: 50%;
    transform: translateX(-50%);
 text-align: center;
 padding: 0.5em; /* Raum zwischen dem Inhalt eines Elements und seinem Rahmen */
 margin: 0.4em; /* definiert den Außenabstand um das Element */
}
navmobile :hover{
 color: black;
 background-color: lightgrey;
 padding: 0.5em;
}
navmobile a {
/* background-color: black; */
 color: white;
 text-decoration: none;
}
navmobile a:hover {
 color: black;
 background-color: grey;
 padding: 0.5em;
}
navmobile input[type='checkbox'] /* ,navleft label */  {
 display: none;
}
navmobile ul {
 list-style-type: none; /* Entfernt Punkte */
 padding: 0.0em;
 margin: 0.0em 0.0em;
}
navmobile li {
 display: block; /* display: block; Oder display: list-item; */
 margin: 0.2em 0.0em;
 padding: 0.2em;
}
navmobile ul > li > ul{
 display: block; /* display: block; Oder display: list-item; */
 margin: 0.2em 0.0em;
 padding: 0.2em;
}
/* ----- ----- ----- navigation mobile ----- ----- ----- */




/* ----- ----- ----- TEST ----- ----- ----- */
.sticky-position {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 1000;
}