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

@font-face {
 font-family: 'MarkerFelt'; /* Gewünschter Name */
 src: url('DSMarkerFelt.ttf') 
           format('truetype');
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #CBCBCB; color: #EEE;
}
body {
  font-family: 'Verdana', sans-serif;
}
h1 {
	display:inline;
  margin: 32px 0;
  font-weight: 300;
  font-size: 200%;
}
h2{
	letter-spacing: 10px;
}
p {
  margin: 0 0 16px 0;
}
.punkt{
	border-radius: 50% 50% 50% 50%;
	background-color: red; color: red;	
	width:1px;	height:1px;
}
.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: 40px 30px 10px 100px; /* text von oben */
  font-family: Verdana, Helvetica, sans-serif;
  /*<!--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: #EEE;
  /*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: 2.5em; /* link-liste im menu */
}

.menu {
  list-style: none;
  width: 180px;  /* menu-breite im grossen */
  padding-left: 10px;
  padding-top: 2.5em; /* link-liste im menu */
  line-height: 2;
}

.menu a {
	font-size: 18px;
	padding-left: 10px;
	color:  #CBCBCB;   text-decoration: none;
}

.menu a:hover {
	background-color: #FFF;
	padding: 10px 10px 10px 10px;
	color:  #000;
}

header {
	display: flex;
	padding-top: 15px;
	min-height: 80px; 
	background-color: #EEE; color: #CBCBCB;
	font-family: MarkerFelt;
	font-size: 30px;
	letter-spacing: 20px;	
	}

.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 {
	position: relative;
    max-width: 100%;
    max-height: 80vh;
	/*object-fit: scale-down;
	display:block*/
}
.txt-respo{
	font-family: MarkerFelt;
	font-size: 100px;	
	position: absolute;
	text-align: center;
	top: 40%;
   left: 40%; /* vorher 35% */
   text-shadow: -1px 0 1px black, 0 1px 1px black, 1px 0 1px black, 0 -1px 1px black;
/*margin: auto; */
}
.txt-darunter{
	margin-top: 70px;
}
.txt-start {text-decoration: none;}
.txt-start a:link {color: #FFF;}
.txt-start a:hover {color: #000;}

.form-left{
	padding-left: 100px;
}
.form-anzeige {
	/*left: -70px;*/
}
.form-abstand {
	margin-left: 25px;
}
@media all and (max-width: 1080px) {
.txt-respo{
   	top: 30%;
}	
.txt-darunter{
	margin-top: 30px;
}

}	
@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: 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 */
	}
	.form-left{
		padding-left: 0px;
	}	

.txt-respo{
	font-size: 70px;
   left: 15%;
   	top: 20%;
}
.txt-darunter{
	margin-top: 20px;
}
.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%;
	}
header {
	/*padding-top: 15px;
	min-height: 80px; */
	font-size: 18px;	
	}
.txt-respo{
	font-size: 50px;
	text-align: left;
	top: 20%;
   left: 5%;
}

.form-anzeige {
	display: none;
}
.form-abstand {
	margin-left: 5px;
}			
}