/* Das folgende Element stellt sicher, dass die Angaben zu width and hight stets padding und border miteinschließen, und diese nicht zu den Größenangaben eines <div> hinzugezählt werden: */
* {
  box-sizing: border-box;
}

/* Dieser Code plaziert ein Hintergrundbild. Falls dieses durchscheinend sein soll, ist es am einfachsten, zuvor mit Photoshop ein transparentes Hintergrundbild zu erzeugen. Allerdings scrollt das Bild am Handy trotzdem ein wenig, hängt wahrscheinlich mit der Bildgröße zusammen. */
body {
	background-image: url("images/hintergrund20.jpg");
	background-repeat: no-repeat;
  	background-attachment: fixed;
  	background-size: cover;
	text-align:center;
	/*align-content: center;*/
	font-family:Verdana;
	max-width:960px;
	margin:0px auto 0px;
}

button {
  background-color:lightgreen;
  border: none;
  /*padding: 10px 20px;*/
  text-align: center;
  display: inline-block;
  font-size: inherit;
  width: 30%;
  height: 40px;
  border-radius: 12px;
  cursor: pointer;
}

/*Die Bilder sollen immer 100% ausfüllen.
	die Anweisung .fill sorgt dafür, dass die Bilder dynamisch verkleinert werden.*/
img {
	width:100%;
	height:auto;
}
.fill {
	object-fit: fill;
}

.menuleft {
  background-color: lightgreen;
  float: left;
  width: 25%;
}

.mitte {
  float: left;
  width: 48%;
  padding-top: 0px;
  padding-right: 8px;
  padding-bottom: 0px;
  padding-left: 8px;
}

.menuright {
  background-color: lightgreen;
  float: right;
  width: 25%;
}

.menukopf {
	font-weight: bold;
	background-color: white;
}

.main {

  float: right;
  width: 73%;
  padding-top: 0px;
  padding-right: 6px;
  padding-bottom: 10px;
  padding-left: 2px;
}

.abschn2left {
  float: left;
  width: 49%;
  padding-top: 4px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 4px; 

  }
  
.abschn2right {
  float: right;
  width: 49%;
  padding-top: 4px;
  padding-right: 4px;
  padding-bottom: 0px;
  padding-left: 0px; 

  }

.text {
	padding: 6px;
	/*clear: left;*/
}

/* Kann full vielleicht durch .text ersetzt werden?*/
.full {
  float: left;
  width: 100%;
  margin-top: 1px;
}

.menuitem {
  padding: 8px 0px 8px 2px;
  margin-top: 3px;
  border-bottom: 2px solid #f1f1f1;
  border-bottom-color:white;
}

.menufix {
  padding: 8px 0px 8px 2px;
  font-weight: bold;
  color: red;
  margin-top: 3px;
  border-bottom: 2px solid #f1f1f1;
  border-bottom-color:white;
}

.footer {
  width: 100%;
  background-color:#f1f1f1;
  padding:10px;
  font-size:12px;
  float: left;
}

@media only screen and (max-width:800px) {
  /* iPhone und Sony Xperia Z3 horizontal, ASUS-Tablet vertikal */
  
body {
	font-size: 14px;
}

}

@media only screen and (max-width:620px) {
	
body {
	font-size: 13px;
}
	
.menuleft {
	width: 26%;
}

.mitte {
    width: 46%;
}

.main {
    width: 72%;
}

.menuright {
    width: 26%;
}

}

@media only screen and (max-width:480px) {
  /* For mobile phones: */
  body {
	font-size: 10px;
}
  
  .menuleft {
	width: 29%;
  }
  
  .main {
    width: 69%;
  }
  
  .mitte {
    width: 42%;
  }
    
  .menuright {
    width: 28%;	
  }  

}

@media only screen and (max-width:360px) {
	
	body {
	font-size: 11px;
}

.menuleft {
  width: 30%;
  font-size: 14px;
  /*margin-right: 4px;
  margin-bottom: 6px;*/
}

.main {
    width: 68%;
	padding-top: 0px;
  	padding-right: 10px;
  	padding-bottom: 10px;
  	padding-left: 2px;
}

.mitte {
    width: 38%;
	/*float: left;*/
}

.menuright {
    width: 30%;
}

.footer {
	font-size: 10px;
}

}

@media only screen and (max-width:320px) {

body {
	font-size: 10px;
}

.menuleft {
  width: 32%;
  /*margin-right: 4px;
  margin-bottom: 6px;*/
}

.menuright {
    width: 32%;
}

.mitte {
    width: 34%;
	/*float: left;*/
	/*padding-top: 0px;
  	padding-right: 2px;
  	padding-bottom: 10px;
  	padding-left: 2px;*/
}
}