@charset "UTF-8";
html {
  scroll-behavior: smooth;
}
body {
	font-family: 'Open Sans', sans-serif;
	background-color: #ace148;
	background-image:url(img/siteback.png);
	background-position: bottom;
	background-repeat:no-repeat;
	margin: 0;
	padding: 0;
	color: #4f641f;
	line-height:135%;
}
/* ~~ Element-/Tag-Selektoren ~~ */
ul, ol, dl, li { /* Aufgrund von Abweichungen zwischen verschiedenen Browsern empfiehlt es sich, die Auffüllung und den Rand in Listen auf 0 einzustellen. Zu Konsistenzzwecken können Sie die gewünschten Werte entweder hier oder in den enthaltenen Listenelementen (LI, DT, DD) eingeben. Beachten Sie, dass die hier eingegebenen Werte hierarchisch auf die .nav-Liste angewendet werden, sofern Sie keinen spezifischeren Selektor festlegen. */
	padding: 0;
	margin: 0;
}
h3 {
	margin-left:24px;

}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
	 /* Durch Verschieben des oberen Rands wird das Problem behoben, dass Ränder aus dem zugehörigen div-Tag geraten können. Der übrig gebliebene untere Rand hält ihn getrennt von allen folgenden Elementen. */
}
a img {
	border: none;
}
a:link {
	color: #27887f;
	text-decoration: underline; 
	transition: all 0.3s 0.0s ease-in-out;
}
a:visited {
	color: #27887f!important;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* Durch diese Gruppe von Selektoren wird bei Verwendung der Tastatur der gleiche Hover-Effekt wie beim Verwenden der Maus erzielt. */
	text-decoration: none; 
	color:#ce0b00; 	transition: all 0.3s 0.0s ease-in-out;

}
.container {
	width: 1100px;
	margin: 0 auto; 
}
.header {
	height:200px;
	background-image:url(img/headerback.png);
	background-position:center top;
	background-repeat:no-repeat;
	transition: all 0.3s 0.0s ease-in-out;
	background-size:1400px;
}
.header:hover {
	height:210px;
	transition: all 0.3s 0.0s ease-in-out;
	background-size:1420px;
}
.content {
	background-color: #efffbd;
	min-height: 450px;
	border-radius: 12px;
	font-size: 100%;
	line-height: 140%;
	background-image: url(img/contentback.png);
	background-repeat: no-repeat;
	background-position: left bottom;
}
.content p {
	padding-top: 20px; padding-left:35px; padding-right:35px; padding-bottom:35px;
}
.content p li {
	margin-top: -10px; margin-left:35px;
}
.content a {
	padding:0px!important; margin:0!important;
}
.logo{
	margin-top: 10px;
	margin-left: -6px;
	margin-right: 60px;
	float: left;
	transition: all 0.3s 0.0s ease-in-out;
}
.logo:hover {
	transform:scale(1.03);
	transition: all 0.3s 0.0s ease-in-out;
	opacity:0.9;
	border:none!important;
}
.navi {
	font-size:17px; font-weight:bold; font-style:italic;
	-moz-transition: all 0.3s 0.0s ease-in-out;
	-webkit-transition: all 0.3s 0.0s ease-in-out;
	-o-transition: all 0.3s 0.0s ease-in-out;
	-ms-transition: all 0.3s 0.0s ease-in-out;
	transition: all 0.3s 0.0s ease-in-out;
	padding-top:67px;
}
.naviimg {
	padding-left:14px; padding-right:14px; display:inline-block; padding-bottom:5px;
}
.navi a:link{
	text-decoration: none!important;
	-moz-transition: all 0.3s 0.0s ease-in-out;
	-webkit-transition: all 0.3s 0.0s ease-in-out;
	-o-transition: all 0.3s 0.0s ease-in-out;
	-ms-transition: all 0.3s 0.0s ease-in-out;
	transition: all 0.3s 0.0s ease-in-out;
	border-bottom: 0px solid;
	color: #29877d;
}
.navi a:visited {
	color:#27887f!important;
}
.navi a:hover {
	color: #ce0b00;
	-moz-transition: all 0.3s 0.0s ease-in-out;
	-webkit-transition: all 0.3s 0.0s ease-in-out;
	-o-transition: all 0.3s 0.0s ease-in-out;
	-ms-transition: all 0.3s 0.0s ease-in-out;
	transition: all 0.3s 0.0s ease-in-out;
	border-bottom: 2px solid rgba(204,0,0,1.0);
	letter-spacing:0.1em;
}
.selected{
	color: #ce0b00
}
.footer {
	margin: 0 auto;
	padding: 10px 0;
	font-size:13px;
	clear:both!important;
	text-align:center;
}
.footer a:link {
	color:#FFF; font-weight:bold;
}
.footer a:visited {
	color:#FFF!important; font-weight:bold;
}
.footer a:hover {
	color:#ce0b00;
}
.start {
	width:166px;
	border:1px solid rgba(255,255,255,0.9);
	-moz-transition: all 0.3s 0.0s ease-in-out;
	-webkit-transition: all 0.3s 0.0s ease-in-out;
	-o-transition: all 0.3s 0.0s ease-in-out;
	-ms-transition: all 0.3s 0.0s ease-in-out;
	transition: all 0.3s 0.0s ease-in-out;
	margin-right:-1px!important; margin-bottom:-1px!important;
}
.start:hover {
	border:1px solid rgba(255,255,255,0.6);
	box-shadow:1px 2px 6px rgba(0,0,0,0.2), 0px 1px 2px rgba(0,0,0,0.4);
	transition: all 0.3s 0.0s ease-in-out;
	border-radius:6px;
	opacity:0.7;
}
.headline {
	font-size: 36px!important;
	line-height: 48px;
	font-weight: bold;
	font-style: italic;
	color: #29877d;
	text-shadow: 0px 0px 3px #FFF,0px 0px 3px #FFF, 0px 0px 3px #FFF;
}
.subline {
	font-size: 20px!important;
	line-height: 29px;
	font-weight: bold;
	font-style: italic;
	color: #29877d;
}
.portrait {
	float:right;
	border: 10px solid #FFF;
	transform:rotate(2deg);
	box-shadow: 1px 1px 2px rgba(0,0,0,0.2), 2px 3px 7px rgba(0,0,0,0.2);
}
.kontakt {
	float:right;
	width:420px; height:90px;
	background-image:url(img/kontaktback.png); background-repeat:no-repeat;
	margin-top:0px; padding-top:20px; padding-left:12px;
	color:#27887f; font-style:italic; font-weight:600;
}
.kontakt a:link, a:visited {
	color:#000;
	transition: all 0.3s 0.0s ease-in-out;
}
.kontakt a:hover {
	color:#27887f;
	transition: all 0.3s 0.0s ease-in-out;
}
.spalte_l {
	float:left; max-width:850px;
}
.spalte {
	float: left;
	max-width: 242px;
	margin-top: -27px;
	font-size: 88%;
	padding-right: 8px;
	z-index: 300!important;
}
.zeugnis {
	max-width:250px; transform:rotate(2deg); 
	box-shadow:2px 3px 4px rgba(0,0,0,0.4); 
	margin-right:-20px; margin-left:10px; margin-bottom:8px;
	transition: all 0.3s 0.0s ease-in-out;
}
.zeugnis:hover {
	max-width:250px; 
	transform:rotate(0deg); box-shadow:3px 4px 6px rgba(0,0,0,0.5); 
	transition: all 0.3s 0.0s ease-in-out;

}
.menu {
    display:none;
}
.dropdown {
	float: left;
	overflow: hidden;
	z-index: +200!important;
	margin-right: 17px;
}
.dropdown .dropbtn {
	background-color: rgba(0,0,0,0.8);
	border: none;
	outline: none;
	font-family: inherit;
	font-size: inherit;
	margin: 0;
	z-index: +200!important;
}
.navbar a:hover, .dropdown:hover .dropbtn {
	box-shadow: 2px 6px 12px 0px rgba(0,0,0,0.3);
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #000;
    min-width: 160px;
    box-shadow: 2px 6px 12px 0px rgba(0,0,0,0.3);
    z-index: +200;
	border-radius:5px;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 8px 10px;
    text-decoration: none;
    display: block;
    text-align: left;
	border-radius:5px;

}

.dropdown-content a:hover {
    background-color: #FFF;
	color:#AF822B!important;
	border-radius:5px;
}

.dropdown:hover .dropdown-content {
    display: block;
}
.galerie {
    width:180px; 
	margin-right:10px; margin-bottom:10px; border-radius:8px;
	transition: all 0.3s 0.0s ease-in-out;
}
.galerie:hover {
    width:180px; 
	transition: all 0.3s 0.0s ease-in-out;
	transform:scale(1.04);
	box-shadow:2px 4px 4px rgba(0,0,0,0.4)
}
iframe {
    width:100%; 
	height:300px; border:0!important; background-color:#FF9;
}
.up {
    float:right; display:block; margin-right:25px;
	transition: all 0.3s 0.0s ease-in-out;
}
.up:hover {
    transform:translateY(-6px);
	transition: all 0.3s 0.0s ease-in-out;
}
.navigation:hover {
	transition: all 0.3s 0.0s ease-in-out;
	opacity:0.9;
}
.bildlabel {
	font-weight: 300;  
	margin-top:13%;
	text-align:center;
	text-transform:uppercase;
	font-size:80px;
	line-height:55px;
	text-decoration:none!important;
	color:rgba(255,255,255,0.7);
	position:absolute;
	width:1000px;
	margin-left:50px;margin-right:50px;
	z-index:12;
	transition: all 0.25s ease-in-out;
	animation: morph 3s infinite;
	text-shadow:0px 0px 4px rgba(0,0,0,0.1)
}	
    @keyframes morph {
      0% { color:rgba(255,255,255,0.4);}
      50% {  color:rgba(255,255,255,0.8); }
      100% { color:rgba(255,255,255,0.4);}
    }