@import url('https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #033745; color: #CCC;
}
body {
  font-family: 'Verdana', sans-serif;
}
.wrapper {
	display: flex;
	height: 100%;
	align-self: stretch;
}
/* linx nur im formular - wenn geschickt */
.linx{
text-decoration: none;
}
.linx a{
color: yellow;
}
.linx a:hover{
	color: orange;
}	
.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: #CBCBCB;
  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;
}

.content {
  flex: 1 1 100%;
 /* padding-top: 160px 30px 10px 100px; /* text von oben */
 padding-top: 20px;
 padding-left: 120px;
  /*<!--box-shadow: 0 0 5px rgba(0,0,0,1);-->*/
  transition: all .3s;
}

.sidebar {
  flex: 1 500 auto; /* wenn 1 gelöscht, bleibt menu offen HIER EIGENTLICH OHNE 1, dann offen*/
  overflow: hidden;
  background-color: #033745;
  margin-top: 50px; /* sidemenu runter */
  /*color: #EEE;*/
  transition: all .2s;
}

.hamburger-checkbox:checked ~ .sidebar {
  flex-shrink: 1; /* wenn statt 1 -> 500 wird menu auf klick geschlossen HIER EIGENTLICH 500, kein padd*/
   padding-top: 1.5 em; /*link-liste im seiten-menu-feld 2022 delete */
}
.menu {
  list-style: none;
  width: 180px;  /* menu-breite im grossen */
  padding-left: 10px;
  padding-top: 1.5em; /*  link-liste im seiten-menu-feld */
  line-height: 2;
}

/* Decorative styles unrelated to the demo */

h1 {
	display:inline;
  margin: 32px 0;
  font-weight: 300;
  font-size: 200%;
}
h2{
	letter-spacing: 10px;
}
p {
  margin: 0 0 16px 0;
}
.menu a {
  font-size: 18px;
  padding-left: 10px;
  color:  #CBCBCB;   text-decoration: none;
}
.menu a:hover {
  background-color: #96D5DF;
  padding: 10px 10px 10px 10px;
  color:  #4F3745;
}
.menu li .mactive{
    background: var(--menu-active-bg-color); /*  var(--menu-active-bg-color); */
	color: var(--menu-active-color); 
}	
header {
	display: flex;
	/*padding-top: 25px; 2022 delete*/
	min-height: 80px; 
	background-color: #033745; /* color: #CBCBCB;*/
	}
.header-pic {
	min-height: 220px; overflow: hidden; background-color: #152703;
}	
/*
footer {
	font-size: 18px;		
	height: 30px;
	padding-top: 15px;
	overflow: hidden;
	background-color: #999; color: #EEE;
    width: 100%;  NEU FUER BOTTOM 
	position:absolute;
    bottom: 0;	
	}*/

.center-flex {
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  text-align: center;
}

.pic-style{
	max-width: 1200px;
	max-height: 900px;
	border: #EEE dashed 10px; 
}
.pic-respo {
    max-width: 100%;
    height: auto;
	/*object-fit: scale-down;
	display:block */
}
.form-left{
	padding-left: 100px;
}

.form-anzeige {
	/*left: -70px;*/
}
.form-abstand {
	margin-left: 25px;
}
@media all and (max-width: 680px) { 
	.sidebar {
	  flex: 1 500 auto; /* flex: 1 500 auto; wenn 1 gelöscht, bleibt menu offen */
	  overflow: hidden;
	 /* background-color: #444;
	  color: #EEE;*/
	  transition: all .2s;
	  max-width: 130px; 
	}
	.content {
	  padding: 15px 10px 10px 15px; /* text von oben */
	}

	.hamburger-checkbox:checked ~ .sidebar {
	  flex-shrink: 1; /* wenn statt 1 -> 500 wird menu auf klick geschlossen */
	  padding-top: 2.5em; /* link-liste im menu */
	}
	.header-pic {
		min-height: 160px; overflow: hidden; text-align: center;
	}
.form-left{
	padding-left: 0px;
}
.form-anzeige {
	display: none;
}	
.form-abstand {
	margin-left: 10px;
}
	.text-left{
		/*margin-left: 0px;*/ text-align: left;
	}	
} 

@media all and (max-width: 500px) { 
	.sidebar {
	  flex-basis: 100%;
	}
.form-anzeige {
	display: none;
}
.form-abstand {
	margin-left: 5px;
}	
}