.visually-hidden {
 display: none;
 visibility:  hidden;
}
input[type='checkbox']:not(:checked)+ul {
 display: none;
}
*{
 margin: 0;
 padding: 0;
}
/* ----- ----- ----- */
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 */
}
.rechtsbuendig { text-align: right; }
.linkssbuendig { text-align: left; }
.mittig { text-align: center; }
.container {
  display: flex; /* Aktiviert Flexbox */
  justify-content: space-between; /* Verteilt Boxen gleichmäßig mit Abstand dazwischen */
  gap: 10px; /* Abstand zwischen den Boxen */
}
/* ----- ----- ----- 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; /* Versteckt das Menü */
  position: absolute; /* Aus dem Fluss nehmen */
}
navileft{
    z-index: 100;
  text-align:left; /* richtet den Text links aus */
  border-radius: 6px;   /* Ränder abrunden */
}
navileft ul {
  list-style: none; /* Entfernt Aufzählungspunkte */
  text-align:left; /* richtet den Text links aus */
}
navileft li{
  text-align:left; /* richtet den Text links aus */
}
navileft ul li ul{
  display: block; /* display: block; Oder display: list-item; */
}
navileft a  {
  background: red;
  padding: 0.1em;
  border-radius: 6px;   /* Ränder abrunden */
}
navileft a:hover  {
    background: green;
    padding: 0.1em;
  border-radius: 6px;   /* Ränder abrunden */
}
/* ----- ----- ----- navigation left ----- ----- ----- */

/* ----- ----- ----- navigation right ----- ----- ----- */
naviright input[type='checkbox'] /* ,navleft label */  {
  display: none; /* Versteckt das Menü */
}
naviright{
  position: relative;
    z-index: 1000;
  text-align:right; /* richtet den Text rechts aus */
}
naviright ul {
  list-style: none; /* Entfernt Aufzählungspunkte */
  text-align:right; /* richtet den Text rechts aus */
}
naviright li{
    position: relative; /* Wichtig: Bezieht sich auf das Submenu */
  text-align:right; /* richtet den Text rechts aus */
}
naviright ul li ul{
  display: block; /* display: block; Oder display: list-item; */
}
/* ----- ----- ----- navigation right ----- ----- ----- */

/* ----- ----- ----- navigation mobile ----- ----- ----- */
navmobile input[type='checkbox'] /* ,navleft label */  {
   display: none;
}
navmobile {
  text-align:center; /* zentriert den Text */
}
navmobile ul {
  list-style: none; /* Entfernt Aufzählungspunkte */
  text-align:center; /* zentriert den Text */
}
navmobile li{
  text-align:center; /* zentriert den Text */
}
navmobile ul li ul{
  display: block; /* display: block; Oder display: list-item; */
}
/* ----- ----- ----- navigation mobile ----- ----- ----- */

/* ----- ----- ----- TEST ----- ----- ----- */
.sticky { 
	position: sticky; 
	top: 0; 
	display:flex; 
	margin-top: 0;
}
.stickylogo { 
	position: sticky; 
	top: 0; 
	margin-top: 0;
}