header {
	display: flex;
	padding-top: 30px;
	min-height: 190px; 
	font-family: var(--font-family-navi);
	font-size: 30px;
	letter-spacing: 20px;

/*margin-bottom: 20px; */
	/* color: #CBCBCB;*/
    background-color: var(--header-farbe);
	/*background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(1,4,19,1) 42%, rgba(1,28,113,1) 100%); ex torbit */
	background-image: var(--header-verlauf);
	}
.sidebar ul li{
	display: inline;
	margin-right: 20px;
	margin-bottom: 0px;
} 
.zeige-seite {
	display: none;
}
.zeige-oben {
	display: contents;
}

.ausrichtung{
	margin-left: 20px;
}
.menu a {
	font-size: 24px;
	letter-spacing: 0.075em;
	padding: 10px 10px 10px 10px;
	color: #0FB98E; /* cyan hell */
	text-decoration: none;
}
/* tab-navi - dropdown geht aber nicht */		
.menu a:focus {
	background-color: #000;
	padding: 10px 10px 10px 10px;
	color:  #FFF;	
}
.menu a:hover {
	background-color: #FFF;
	padding: 10px 10px 10px 10px;
	color:  #000;
	/*box-shadow: 0 0 10px rgb(0 191 255 / 0.9);*/
}
.logo a:hover{
background-color: transparent; /* damit PNG bei hover transparent !!! */
}
.sidebar li a {
  display: block;
  padding-left: 10px;
  width: 200px;
  /* this is the width of the menu items */
  line-height: 25px;
  /* this is the hieght of the menu items */
}
.topbar ul li{
	display: inline;
	margin-right: 20px;
	margin-bottom: 0px;	
}
/* ---------- subnavi ------------- */
nav li {
  display: block;
  position: relative;
  float: left;
 /* background: #24af15;
   menu background color */
}
/* war ausversehen sidemenu */
.menu_komisch li a {
  display: block;
  padding-left: 10px;
  width: 200px;
  /* this is the width of the menu items */
  line-height: 35px;
  /* this is the hieght of the menu items */
}

.menu li li a {
  font-size: 66%;
  background-color: #037976; /* cyan dunkel */

 clear: both; /* damit breite übernommen wird */
 text-align: left; /* text sonst mittig */
    min-width: 130px;
    display: inline-block;
  /* transition: all 0.5s ease; geht nix */
  /* line-height: 3;*/
  /*margin: 0px 5px 5px 0px;*/
}
/* ---------- end subnav ------------- */

.menu ul {
  position: absolute;
  padding: 0;
  left: 0;
  display: none;
  /* hides sublists */
}
.menu li:hover ul ul {
   display: none;
}
/* hides sub-sublists */

.menu li:hover ul {
  display: block;
  z-index: 100; /* damit über - z.b. editor */
}
/* shows sublist on hover */

.menu li li:hover ul {
  display: block;
  /* shows sub-sublist on hover */
  margin-left: 200px;
  /* this should be the same width as the parent list item */
  margin-top: -35px;
  /* aligns top of sub menu with top of list item */
}
/* tablet gross quer */
@media all and (max-width: 1200px) and (min-width: 1051px)  {
.menu{
margin-top: -30px;
}
.logo{
	margin-top: 15px;
}	
}
/* tablet klein quer */
@media all and (max-width: 1050px) and (min-width: 921px)  {
.menu{
margin-top: -25px;
}
.logo{
	margin-top: 20px;
}	
}
@media all and (min-width: 920px) {
.menu{
	
display: flex;
align-items: center;
/*align-items: flex-start / flex-end / center / baseline / stretch;*/
justify-content: center;
white-space: nowrap;

}
}
@media all and (max-width: 1150px) and (min-width: 1100px) {
header {
	min-height: 160px; 	
}
}
@media all and (max-width: 1100px) and (min-width: 921px) {
header {
	min-height: 120px; 	
}
}
@media all and (max-width: 920px) {
	
.zeige-seite {
	display: contents;
}
.zeige-oben {
	display: none;
}
.ausrichtung{
	text-align: left; 
	line-height: 2;
}
header {
	min-height: 190px; 
	}
.sidebar ul li{
	display: list-item;
} 

.hamburger-checkbox {
  position: absolute;
  opacity: 0;
}

.hamburger-label {
  position: absolute;
  top: 32px; /* hamburger: abstand oben */
  left: 32px;
  z-index: 1;
  display: block;
  width: 42px; /*  hamburger: abstand links */
  height: 42px;
  font: 42px/16px fontawesome; /* hamburger: grösse / von oben */
  text-align: center;
  color: orange; /* farbe hamburger */
  cursor: pointer;
}
.hamburger-checkbox:checked ~ .hamburger-label{
  color: transparent;
}
.hamburger-checkbox:checked ~ .hamburger-label:before {
  content: '\f00d';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 42px; /*  kreuz: abstand links */
  height: 42px;
  font: 42px/16px fontawesome;  /* kreuz: grösse / von oben */
  text-align: center;
  color: orange;
}

.sidebar {
  flex: 1 500 auto; /* wenn 1 gelöscht, bleibt menu offen HIER EIGENTLICH OHNE 1, dann offen*/
  overflow: hidden;
  background-color: #EEE; /* hintergrund sidebar */
  /*color: #EEE;*/
  transition: all .4s;
}

.hamburger-checkbox:checked ~ .sidebar {
  flex-shrink: 1; /* wenn statt 1 -> 500 wird menu auf klick geschlossen HIER EIGENTLICH 500, kein padd*/
  padding-top: 0.1 em; /* link-liste im menu unter top, war 2.5em*/
  min-width: 140px;
}

.menu {
  list-style: none;
  width: 180px;  /* sidebar-breite im grossen */
  padding-left: 10px;
  padding-top: 2.5em; /* link-liste im menu */
  line-height: 2;	/* abstand list-menue-punkte */
}
.menu a {
	font-size: 18px;
	padding-left: 10px;
	color:  #0FB98E; /* cyan */   
	text-decoration: none; /* farbe listeneinträge */
}

.menu a:hover {
	background-color: #FFF;
	padding: 10px 10px 10px 10px;
	color:  #000;
}
}
@media all and (max-width: 680px) { 
	.sidebar {
	  flex: 1 500 auto; /* flex: 1 500 auto; wenn 1 gelöscht, bleibt menu offen */
	  overflow: hidden;
	  transition: all .2s;
	  max-width: 140px; 
	}

	.hamburger-checkbox:checked ~ .sidebar {
	  flex-shrink: 1; /* wenn statt 1 -> 500 wird menu auf klick geschlossen */
	  padding-top: 0.1em; /* link-liste im menu unter top, war 2.5em*/
	  height: 120%;
	  border-bottom: 50px orange dashed;
	}
} 

@media all and (max-width: 500px) { 
	.sidebar {
	  flex-basis: 100%;
	}		
}