@charset "utf-8";

@font-face {
	font-family:"open sans";
	src:url(../fonts/source-sans-pro/SourceSansPro-Light.otf);
}
@font-face {
	font-family:"open sans semibold";
	src:url(../fonts/source-sans-pro/SourceSansPro-Semibold.otf);
}

body, html { 
	font-family:"open sans", Helvetica, Arial, sans-serif;
	font-size: 100%; 
	padding: 0; margin: 0;
}

/* Reset */
*, *:after, *:before { box-sizing: border-box; }

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

.main img, .main video { max-width:100%; }
h1, h2, h3 { color:rgba(76,134,178,1);}
h1 { font-size:1.8rem; margin-top:2.5rem;}
h2 { font-size:1.5rem; margin: 2rem 0 1rem 0; }
h3 { font-size:1.2rem; }

a { color: rgba(76,134,178,1); text-decoration: none; }
a:hover { color: #000; }
.pic_right { width:90%; }
.meldung {
	display:inline-block; /* flex aufheben */
	float:right;
	margin:1rem 0 1rem 2rem;
	background:rgba(76,134,178,1);
	color:white;
	border-radius:3px;
	padding:1rem;
}
.meldung h3 { color:white; }
.fa { width:1.5em; text-align:center; }

/* -------------- Header -------------- */
header {
	width:100%;
	height:60vh;
	color:#fff;
	position:relative; /* um den Inhalt darin absolut zu positionieren */
	margin:0;
	padding:0;
}
/* -------------- Logo -------------- */
figure.logo {
	position:absolute;
	top:1.5rem;
	right:1.5rem;
	width:25%;
	margin:0; padding:0;
	z-index: 1;
}
figure.logo img{ 
	width:100%;
	border-radius:3px;
	box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.7);
}
/* -------------- Telefonnummer -------------- */
figure.telefon {
	position:absolute;
	z-index:2;
	bottom:1rem;
	left:0; right:0;
	width:14rem;
	margin:0 auto;
	padding:.4rem 1rem;
	text-align:center;
	font-size:1.0rem;
	font-variant: small-caps;
	letter-spacing:0.1rem;
	color:rgba(76,134,178,1);
	background:rgba(255,255,255,1);
	border-radius:3px;
	box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.7);
}
.cbp-bislideshow h1 { 
	color:white;
	position:absolute;
	width:100%;
	bottom:0;
	margin:0 auto;
	text-align:center;
	animation:fadein 2s normal forwards;
}
@keyframes fadein {
    from { transform: translateY(0px); }
    to   { transform: translateY(-80px); }
}
/* -------------- Navi - zunächst die gemeinsamen Sachen für Mobile- und Desktop-Navi -----*/
nav {
	font-size:1.1rem;
	font-variant: small-caps;
	letter-spacing:0.1rem;
	margin:0;
	padding:0;
	color:rgba(76,134,178,1);
	background:rgba(255,255,255,1);
	border-radius:0 3px 3px 0;
	box-shadow: 3px 3px 8px 0px rgba(0,0,0,0.7);
}
nav li {
	border-radius:3px;
}
nav a { 
	color:rgba(76,134,178,1);
	white-space:nowrap;
	text-decoration:none;
}
nav a:hover {
	color: rgba(59,184,255,1.00);
  transition:.15s ease-in-out;
	-moz-transition:.15s ease-in-out;
  -webkit-transition:.15s ease-in-out;
}
nav ul {
	list-style: none;
	margin:0;
}
nav .fa { font-size:1.5rem; } /* der Home-Button für die Startseite */
/*---------------------------- MOBIL NAVI --------------------*/
.toggleMobile {
	width:60px; height:45px;
	position:absolute;
	top:1.5rem; left:1.5rem;
	transform: rotate(0deg);
	transition:.5s ease-in-out;
	cursor:pointer;
	z-index: 99;
}
.toggleMobile span {
	display:block;
	position:absolute;
	left:0;
	height:9px; width:100%;
	background: rgba(255,255,255,1);
	border-radius:9px;
	opacity:1;
	transform:rotate(0deg);
	transition:.25s ease-in-out;
}
.toggleMobile span:nth-child(1) { top:0px; }
.toggleMobile span:nth-child(2) { top:18px; }
.toggleMobile span:nth-child(3) { top:36px; }
.toggleMobile.open span:nth-child(1) { background: rgba(76,134,178,1); top:18px; transform:rotate(135deg);}
.toggleMobile.open span:nth-child(2) { background: rgba(76,134,178,1); opacity:0; left:-60px;}
.toggleMobile.open span:nth-child(3) { background: rgba(76,134,178,1); top:18px; transform:rotate(-135deg);}

#mobileMenu {
	display: block;
	z-index:98;
	position:absolute;
	top: 0;
	left: 0;
	margin:0; padding:1rem 2rem 1rem 0rem;
	background:rgba(255,255,255,1);
	box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
	text-align:right;
}
#mobileMenu ul li {
	display:block;
	padding: 1rem 0 1rem 0;
	margin:0;
	border-bottom: 1px solid rgba(76,134,178,1);
}
#mobileMenu ul li ul li{
	padding:.7rem 0 0 0;
	border:none;
}
#mobileMenu ul li ul li:before{
	content:"- ";
}
#mobileMenu ul li:last-child {
	border-bottom: none;
}
#mobileMenu .dropdown > a:hover { /* falls ein Dropdown-Menü-Punkt, dann soll kein Hover-Effekt angezeigt werden */
	color:rgba(76,134,178,1);
	cursor:default;
}
/* -------------- Deskktop-Navi -------------- */
#desktopNavi {
	display:none;
	position:fixed;
	left:0rem;
	top:1.5rem;
	z-index: 99;
	padding:.8rem 0;
}
#desktopNavi ul {
	margin:0; padding:0;
}
#desktopNavi li{
	position:relative;
	padding:0.4rem .8rem .4rem .2rem;
	margin:0 0 0 1rem;
}
#desktopNavi a {
	display:block; /* damit der ganze Button und nicht nur der Text anklickbar ist */
	padding:0.0rem;
}
#desktopNavi .dropdown { /* für den Pfeil des  Dropdown-Menü Platz schaffen*/
	padding-right:28px; 
}
#desktopNavi .dropdown > a:after { /* der Pfeil für das Dropdown-Menü */
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	right: 12px;
	top: 50%;
	margin-top: -0px;
	border-width: 6px 6px 0 6px;
	border-style: solid;
	border-color: rgba(76,134,178,1) transparent; 
}
#desktopNavi .dropdown > a:hover { /* falls ein Dropdown-Menü-Punkt, dann soll kein Hover-Effekt angezeigt werden */
	color:rgba(76,134,178,1);
	background:white;
	cursor:default;
}
#desktopNavi .dropdown ul { /* Drop-Down Menü */
	display:none;
	position:absolute;
	right: 0rem; /* damit das ganz rechte Pull-Down-Menü nicht über den rechten Rand flutscht */
	top:2.8rem;
	min-width:6rem;
	background:white;
	box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
}
#desktopNavi .dropdown:hover ul {
	display:block;
}
/*---------------------------- Main -------------*/
.main { /* der IE11 kennt das <main>-Tag noch nicht!!!! */
	width:90%; /* content-Block hat je nach Screen-Größe ne andere Breite */
	margin:3rem auto;
}
/* ---------------------------- Preise ------------- */
table.preise { 
	border:0.1rem solid #8db2e0;
	margin:0 0 1rem 0;
}
table.preise tr:nth-child(even) { background-color:#dce7fb; }
table.preise td { padding:0.7rem; text-align:right;}

/* ---------------------------- Bildergalerie ------------- */
.galerie {
	display:flex;
	flex-flow:row wrap;
	width:100%;
	list-style: none;
	padding: 0; margin: 0;
}
.galerie li {
	flex:0 0 98%;
	padding: 0; margin: .3rem 1%;
}
.galerie li img {
	transition: all .5s ease-out;
}
.galerie li img:hover {
	transform: rotate(2deg) scale(1.1);
}
@media only screen and (min-width:600px) { .galerie li { flex:0 0 48%; } }
@media only screen and (min-width:800px) { .galerie li { flex:0 0 31%; } }
@media only screen and (min-width:1200px) { .galerie li { flex:0 0 23%; } }

.galerie-desc {
	display:flex;
	flex-flow:row wrap;
	width:100%;
	padding: 0; margin:0 0 1rem 1rem;
}
.galerie-desc li {
	flex:0 0 98%;
	padding: 0; margin: .3rem 1%;
	white-space:normal;
}
@media only screen and (min-width:600px) { .galerie-desc li { flex:0 0 48%; } }
@media only screen and (min-width:800px) { .galerie-desc li { flex:0 0 31%; } }

/* ---------------------------- Texte ------------- */
article section { 
	display:inline-block; 
	width:100%; 
	margin:0 0 0 4rem;
	vertical-align:top;
}
article section:first-child { margin:0; }
/*---------------------------- Formular -------------*/
form table {
	width:80%;
	margin:0 auto;
}
form table td { padding:.5rem; }
form table td:nth-child(1) { width:30%; }

label { display:block; } /* dadurch wird ein Zeilenumbruch danach generiert, analog <br> */
input, select, textarea{ 
	width:100%;
	padding:.3rem;
	border-radius:4px;
	border:1px solid rgba(0,0,0,.8);
	box-shadow: inset 2px 2px 4px rgba(0,0,0,.2);
}
textarea { height:5rem; }
input:focus { 
	border: 1px solid blue;
	box-shadow: inset 2px 2px 4px rgba(76,134,178,.4);
}
button {
/*	flex:0 auto; */
	border:none;
	background:rgba(76,134,178,1);
	color:#fff;
	padding:.5rem 2rem;
	border-radius:3px;
}
/* ---------------------------- Footer ------------- */
footer {
	display:flex; 
	flex-flow:row wrap;
	background:rgba(76,134,178,1);
	color:#fff;
	padding:0;
}
footer section {
	flex:0 0 98%;	
	margin:0 0 0 1%;
	white-space:nowrap;
	padding:1rem;
	vertical-align:top;
	border-top:1px solid rgba(255,255,255,.5);
}
footer a { color:#dce7fb; }
footer section:last-child {
	flex:0 0 98%; 
	white-space:normal;
	border-top:1px solid rgba(255,255,255,.5);
	font-size:80%;
	text-align:center;
	margin:0 auto; padding:0.5;
}
@media only screen and (min-width:600px) { footer section { flex:0 0 48%; } }
@media only screen and (min-width:840px) { footer section { flex:0 0 31%; border:none; } }


@media only screen and (min-width:520px) {
	body, html { font-size: 110%; }
	figure.telefon {
		font-size:1.2rem;
		width:16rem;
	}
	article section, .pic_right { width:31%; }
	.pic_right { float:right; }
}
@media only screen and (min-width:960px) {
	figure.logo { width:10%; }
	article section, .pic_right { width:23%; }
	article section { width:46%; }
}
@media only screen and (min-width:1180px) {
	#mobileNavi { display:none; }
	#desktopNavi { display:block; }
	.main { width:75%; }
}