/* alternatives Boxmodell */
html { 
  box-sizing: border-box; 
  padding: 0;
  margin: 0;	
} 

*, ::before, ::after { 
  box-sizing: inherit; 
}
.row::after {
	content: "";
	clear: both;
	display: table;
  }
  [class*="col-"] {
	float: left;
	padding: 0;
	/*border: 1px solid red;*/
  }
 
  .col-1 {width: 30%;}
  .col-2 {width: 40%;}
  .col-3 {width: 30%;}
  
  
  
body
{
	margin: 1em;
	font-family: "Trebuchet MS", Arial, Helvetica;
	background-image: url(../bilder/blegtext.gif);
	
}
h1
{
	font-family: "Trebuchet MS", Arial, Helvetica;
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	color: black;
}
h2
{
	font-family: "Trebuchet MS", Arial, Helvetica;
	font-weight: normal;
	font-style: normal;
	font: bold;
	font-size: 18px;
}
h3
{
	font-family: "Trebuchet MS", Arial, Helvetica;
	font-weight: normal;
	font-style: normal;
	font-size: 12pt;
}
h4
{
	font-family: "Trebuchet MS", Arial, Helvetica;
	font-weight: normal;
	font-style: normal;
	font-size: 12pt;
}
h5
{
	font-family: "Trebuchet MS", Arial, Helvetica;
	font-weight: normal;
	font-style: normal;
	font-size: 10pt;
}
h6
{
	font-family: "Trebuchet MS", Arial, Helvetica;
	font-weight: normal;
	font-style: normal;
	font-size: 12pt;
	font: bold;
	color: red;
}

BUTTON 
{
	border-style: solid;
	border-width: 1pt;
	font-size: 8pt;
	font-family: "Trebuchet MS", Arial, Helvetica;
	font-style: normal; 
}

.navigation {
	margin-left: 2%;	
	width: 90%;
	background: lightblue;
}

.navigation ul {
	margin: 0;
	padding: 0;
 	font: 1.3em  Arial, Helvetica, sans-serif;
	list-style-type: none;
}

.navigation li {
	display: inline;
	margin: 0;
}

.navigation a {
	position: relative;
	display: inline-block;
	text-decoration: none;
	color: black;
	padding: .5em;
	padding-right: 2em;
	text-align: center;
}
/* Für alle Bilder */
.galerie li {
	margin: 0.1em;
	padding: 0.1em;
}

li {
	display: inline-block;
	list-style-type: none;
	width: 45%;
}

img {
	padding: 1em;
	/*margin:1em auto;*/
	margin: 0;
	width: 85%;
	position: relative;
	background: #F1F3F4;
	
	/* Bild passt sich an verfügbaren Raum im li an */
}
.fewoimg {
	position: left;
	padding: 0;
	margin: 5em;
	width: 75%;
	background: #F1F3F4;
	/* Bild passt sich an verfügbaren Raum im li an */
}

a {
	padding: 0.1em;
}

a:focus,
a:hover {
	background: #09c;
}
/* Kopf darstellen*/
.kopf{
	width:100%;
	margin-top: 5px;
	text-align: center;
	border-bottom: #3983ab solid;
}
.kopf img {
	position: center;
	width: 50%;
	height: 5%; 
	background-color: lightcyan;
		
}	
	/* Bild passt sich an verfügbaren Raum im li an */


/* Large screens */

@media all and (min-width: 25em) {
	li {
		width: 25em;
	}
	/* details = Beschreibung für die einzelnen Bilder*/
	.details {
		position: absolute;
		right: 30%;
		top: 10%;
		background-color: #F1F3F4;
		border: 0.1em solid #3983ab;
		border-radius: 0 8px 8px;
		padding: 4em 1em .2em;
		width: 45em;
		max-height: 40em;
		overflow: auto;
		display: none;
	}
	.details img {
		width: 90%;
	}
	.details:target {
		display: block;
	}
	.close {
		width: 0;
		height: 0;
		border: 0;
		text-shadow: none;
		color: transparent;
	}
	.close:after {
		position: absolute;
		top: 1em;
		right: 1em;
		content: "X";
		color: white;
		background: #c32e04;
		font: bold 1em/150% Georgia, Times, serif;
		border: 0.1em solid #3983ab;
		border-radius: 0 8px 8px;
		display: block;
		text-align: center;
		width: 1.5em;
		height: 1.5em;
		padding: 0.2em 0 0 0em;
	}
	
	.clear {
                
		clear:both;
		
	}
		
	.signin-image {
                
		width: 100%;
		padding: 2px;
		border: none;
	}
	.belegung {
                
		position: left;
		width: 60%; 
		margin: 5em;
		padding: 0;
		border: none;
	}
	/* Diashow */
	.slides {
		display:none;
		width: 85%;
		max-width: 620px;
		/*margin:1em auto;*/
	  }
	  
	  .animate-top {
		display: block;
		position:relative;
		animation: animatetop 3s
	  }
	  
	  @keyframes animate-top { 
		/*from { left:0; opacity: 0 } to { top:0; opacity:2 } */
		from {transform: translateX(0%) } to {transform: translateX(100%) }
	  }
	
	/* PASSWORD
	
            
	body {

		font-family: helvetica, sans-serif;
		font-size:130%;

	}

	input {

		padding: 5px 5px 12px 5px;
		font-size: 25px;
		border-radius: 5px;
		border: 1px solid grey;
		width:320px;

		}
	
	label {
		
		position: relative;
		top:12px;
		width:200px;
		float: left;
		
	}
	
	#wrapper {
		
		width: 550px;
		margin: 0 auto;
		
		
	}
	
	.form-element {
		
		margin-bottom: 10px;
		
	}
	
	#submitButton {
		
		width: 130px;
		margin-left: 200px;
	}
	
	#errorMessage {
		
		color: red;
		font-size: 90% !important;
		
	}
	
	#successMessage {
		
		color: green;
		font-size: 90% !important;
		display:none;
		margin-bottom:20px;
		
	}
	
	/* Start anfrage */
	.container {
		width: 500px;
		margin: 25px;
		position: left;
	  }
	  
	  .container form {
		padding: 20px;
		background: lightblue;
		color: rgb(26, 2, 2);
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		border-radius: 4px;
	 }
	  .container form label,
	  .container form input,
	  .container form button {
		margin-bottom: 3px;
		display: block;
		width: 100%;
		border:0;
	  }
	  .container form input {
		height: 25px;
		line-height: 25px;
		background: none #fff;
		color: #000;
		padding: 0 6px;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		border: 1px solid black;
	  }
	  .container form button {
		height: 30px;
		line-height: 30px;
		background: #e67e22;
		color: #fff;
		margin-top: 10px;
		cursor: pointer;
	  }
	  .container form .error {
		color: #ff0000;
	  }
	  
	  .article-reference {
		margin-top: 15px;
	  }
	  .article-reference a {
		color: #e67e22;
	  }
	#AnfrageFormular{
		margin-left: 5%;

	}  
	 	  
}