.visually-hidden {
	display: none;
	visibility:  hidden;
}
input[type='checkbox']:not(:checked)+ul {
    display: none;
}
/* ----- ----- ----- */
body {
    font-family: "Arial", serif;
    background: #FF0000 ;
    background-image: url(../images/bg.jpg);    
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100% ;
    background-position: top center;
}
mylogo{
   width: 100%;
   display: block;
}
desktop{
   display:flex;  
}
mobile{
  
   background-color: red;   /* Hintergrundfarbe */
}
/* ----- ----- ----- */



/* ----- ----- ----- check device width ----- ----- ----- */
@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 input[type='checkbox'] /* ,navleft label */  {
   display: none;
}
navileft{
   border-radius: 12px;   /* Ränder abrunden */
   padding: 1em;
   color: white;                /* Schriftfarbe */
   background-color: darkgrey;  /* Hintergrundfarbe */
   display: block;
   width: 30%;
}
navileft :hover{
   color: black;                 /* Schriftfarbe */
   background-color: darkgrey;   /* Hintergrundfarbe */
   display: block;
}
navileft a {
   color: white;                 /* Schriftfarbe */
   font-weight: bold;
   text-decoration: none;
   display: block;
}
navileft a:hover {
   color: black;                 /* Schriftfarbe */
   background-color: lightgrey;       /* Hintergrundfarbe */
   display: block;
}
navileft ul {
   color: black;                 /* Schriftfarbe */
   background-color: darkgrey;   /* Hintergrundfarbe */
   list-style: none; /* Entfernt Aufzählungspunkte */
   margin-right: 1em;       /* Entfernt äußeren Abstand */
}
navileft ul:a hover {
   background-color: lightgrey;  /* Hintergrundfarbe */
}
navileft li {
   color: black;                 /* Schriftfarbe */
   background-color: darkgrey;   /* Hintergrundfarbe */
   display: block;           /* display: block; Oder display: list-item; */
   transition: background-color 0.4s;
   margin-right: 1em;       /* Entfernt äußeren Abstand */
}
navileft li:a  {
   display: block;
}
navileft li:a hover {
   background-color: lightgrey;  /* Hintergrundfarbe */
}
navileft ul > li > ul{
   display: block;           /* display: block; Oder display: list-item; */
   color: black;                 /* Schriftfarbe */
   background-color: darkgrey;   /* Hintergrundfarbe */
}
/* ----- ----- ----- navigation left ----- ----- ----- */


/* ----- ----- ----- navigation right ----- ----- ----- */
naviright input[type='checkbox'] /* ,navleft label */  {
   display: none;
}
naviright{
  border-radius: 12px;   /* Ränder abrunden */
  padding: 1em;
  color: white;                /* Schriftfarbe */
   background-color: darkgrey;  /* Hintergrundfarbe */
   display: block;
   text-align: right; /* Richtet Inline-Kindelemente rechts aus */ 
   width: 30%;
}
naviright :hover{
   color: black;                 /* Schriftfarbe */
   background-color: darkgrey;   /* Hintergrundfarbe */
   display: block;
}
naviright a {
   color: white;                 /* Schriftfarbe */
   font-weight: bold;
   text-decoration: none;
   display: block;
}
naviright a:hover {
   color: black;                 /* Schriftfarbe */
   background-color: lightgrey;       /* Hintergrundfarbe */
   display: block;
}
naviright ul {
   color: black;                 /* Schriftfarbe */
   background-color: darkgrey;   /* Hintergrundfarbe */
   list-style: none;             /* Entfernt Aufzählungspunkte */
   margin-right: 1em;            /* Entfernt äußeren Abstand */
   text-align: right;            /* Richtet Inline-Kindelemente rechts aus */ 
}
naviright ul:a hover {
   background-color: lightgrey;  /* Hintergrundfarbe */
}
naviright li {
   color: black;                 /* Schriftfarbe */
   background-color: darkgrey;   /* Hintergrundfarbe */
   display: block;           /* display: block; Oder display: list-item; */
   transition: background-color 0.4s;
   margin-right: 1em;       /* Entfernt äußeren Abstand */
   text-align: right; /* Richtet Inline-Kindelemente rechts aus */ 
}
naviright li:a  {
   display: block;
}
naviright li:a hover {
   background-color: lightgrey;  /* Hintergrundfarbe */
}
naviright ul > li > ul{
   display: block;           /* display: block; Oder display: list-item; */
   color: black;                 /* Schriftfarbe */
   background-color: darkgrey;   /* Hintergrundfarbe */
}
/* ----- ----- ----- navigation right ----- ----- ----- */


/* ----- ----- ----- navigation mobile ----- ----- ----- */
navmobile input[type='checkbox'] /* ,navleft label */  {
   display: none;
}
navmobile{
  border-radius: 12px;   /* Ränder abrunden */
  padding: 1em;
  color: white;                /* Schriftfarbe */
   background-color: darkgrey;  /* Hintergrundfarbe */
   display: block;
   text-align: center; /* Richtet Inline-Kindelemente rechts aus */ 
   width: 30%;
}
navmobile :hover{
   color: black;                 /* Schriftfarbe */
   background-color: darkgrey;   /* Hintergrundfarbe */
   display: block;
}
navmobile a {
   color: white;                 /* Schriftfarbe */
   font-weight: bold;
   text-decoration: none;
   display: block;
}
navmobile a:hover {
   color: black;                 /* Schriftfarbe */
   background-color: lightgrey;       /* Hintergrundfarbe */
   display: block;
}
navmobile ul {
   color: black;                 /* Schriftfarbe */
   background-color: darkgrey;   /* Hintergrundfarbe */
   list-style: none;             /* Entfernt Aufzählungspunkte */
   text-align: center;            /* Richtet Inline-Kindelemente rechts aus */ 
}
navmobile ul:a hover {
   background-color: lightgrey;  /* Hintergrundfarbe */
}
navmobile li {
   color: black;                 /* Schriftfarbe */
   background-color: darkgrey;   /* Hintergrundfarbe */
   display: block;           /* display: block; Oder display: list-item; */
   transition: background-color 0.4s;
   text-align: center; /* Richtet Inline-Kindelemente rechts aus */ 
}
navmobile li:a  {
   display: block;
}
navmobile li:a hover {
   background-color: lightgrey;  /* Hintergrundfarbe */
}
navmobile ul > li > ul{
   display: block;           /* display: block; Oder display: list-item; */
   color: black;                 /* Schriftfarbe */
   background-color: darkgrey;   /* Hintergrundfarbe */
}
/* ----- ----- ----- navigation mobile ----- ----- ----- */