@charset "UTF-8";
/* Einfache fließende Medien
   Hinweis: Für fließende Medien müssen Sie die Attribute 'height' und 'width' des Medium aus dem HTML-Code entfernen
   http://www.alistapart.com/articles/fluid-images/ 
*/
/* asap-regular - latin */
/* asap-regular - latin */
/* asap-regular - latin */

/* asap-400 - latin */
@font-face {
  font-family: 'Asap';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/asap-v24-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/asap-v24-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/asap-v24-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/asap-v24-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/asap-v24-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/asap-v24-latin-regular.svg#Asap') format('svg'); /* Legacy iOS */
}

/* asap-700 - latin */
@font-face {
  font-family: 'Asap';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/asap-v24-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/asap-v24-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/asap-v24-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/asap-v24-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/asap-v24-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/asap-v24-latin-700.svg#Asap') format('svg'); /* Legacy iOS */
}

img, object, embed, video {
	max-width: 100%;
}
/* IE 6 unterstützt keine maximale Breite, verwenden Sie daher eine Standardbreite von 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver-Eigenschaften für fließende Raster
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		6;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Idee durch den Artikel "Responsive Web Design" von Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	und "Golden Grid System" von Joni Korpi
	http://goldengridsystem.com/
*/

/* Layout für Mobilgeräte: 480 px oder weniger. */

#header {
	position: relative;
	z-index: 4;
	background-size: 100%;
	background-repeat: repeat-y;
	background-image: url(bilder/VerlaufRot.jpg);
	background-color: #C00D0D;
}
.gridContainer {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 86.45%;
	padding-left: 2.275%;
	padding-right: 2.275%;
	z-index: 1;
}
#navi {
	position: relative;
	float: none;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.navilogo {
	width: 250px;
	padding-top: 20px;
	padding-bottom: 5px;
	margin-top: 0;
	margin-bottom: 0;
	margin-right: auto;
	margin-left: auto;
	float: none;
}
.navitext {
	font-family: 'Asap', sans-serif;
	font-size: 1.2em;
	font-weight: 700;
	color: #FFF;
	text-shadow: none;
	text-align: center;
	padding-top: 0;
	margin-bottom: 0.8em;
	margin-top: 0;
	transition: text-shadow 0.4s ease-in-out, transform 0.5s ease-in-out;
}
.navitext:hover {
	font-family: 'Asap', sans-serif;
	font-size: 1.2em;
	font-weight: 700;
	color: #FFF;
	text-shadow: 0.2em 0.3em 0.4em rgba(0,0,0,0.4);
	text-align: center;
	padding-top: 0;
	margin-bottom: 0.8em;
	margin-top: 0;
	transition: text-shadow 0.4s ease-in-out, transform 0.5s ease-in-out;
	transform: scale(1.2, 1.2);
}
.navibutton {
	width: 100%;
	margin-left: -20px;
	margin-right: 0;
	float: none;
}
.welcometext {
	margin-top: 2%;
	margin-left: auto;
	margin-right: auto;
	min-width: 0;
	width: 80%;
	max-width: 21em;
	background-color: rgba(255,255,255,0.7);
	padding-top: 1em;
	padding-bottom: 1em;
	padding-left: 1em;
	padding-right: 1em;
}
.motto {
	font-family: 'Asap', sans-serif;
	font-size: 1.2em;
	font-weight: 500;
	color: #C00D0D;
	margin: 0;
	z-index: 3;
	text-align: center;
}
.block {
	width: 100%;
	margin-left: 0;
	float: none;
	margin-bottom: 0;
}
.bigblock {
	width: 100%;
	padding-left: 0;
}
.maps_image {
	right: -37px;
	bottom: 2%;
	margin-right: 97.5%;
	float: left;
	position: absolute;
	z-index: 5;
	visibility: hidden;
}
.bigbox_maps {
	float: left;
	margin-left: 0;
	margin-bottom: 5%;
	width: 100%;
	display: block;
}
.Hinweis {
	width: 92.5%;
	margin-top: 10%;
	margin-bottom: 5%;
	padding: 2.5%;
	text-align: center;
    border: 0.4em solid rgba(255,255,255,1);
    border-radius: 1em;
	font-weight: 400;
	background-color: rgba(23,127,229,0.01);
	box-shadow: 0px 0px 10px 5px rgba(23,127,229,0.1);
	transition: 0.4s ease-in-out, transform 0.5s ease-in-out;
}
.footerbutton {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	float: none;
}
.desktop {
	width: 0;
	float: left;
}
.tablet {
	width: 0;
	float: left;
}

/* Layout für Tablet-PCs: 561 bis 800 px. Erbt Stile vom: Layout für Mobilgeräte. */

@media only screen and (min-width: 561px) {
#header {
	position: relative;
	z-index: 4;
	background-size: 100%;
	background-repeat: repeat-y;
	background-image: url(bilder/VerlaufRot.jpg);
	background-color: #C00D0D;
}
.gridContainer {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	padding-left: 0%;
	padding-right: 0%;
	z-index: 1;
}
#navi {
	position: relative;
	float: none;
	width: 70%;
	margin-left: auto;
	margin-right: auto;
}
.navilogo {
	width: 300px;
	padding-top: 20px;
	padding-bottom: 5px;
	margin-top: 0;
	margin-bottom: 0;
	margin-right: auto;
	margin-left: auto;
	float: none;
}
.navitext {
	font-family: 'Asap', sans-serif;
	font-size: 1.3em;
	font-weight: 700;
	color: #FFF;
	text-shadow: none;
	text-align: center;
	padding-top: 0;
	margin-bottom: 0.8em;
	margin-top: 0;
	transition: text-shadow 0.4s ease-in-out, transform 0.5s ease-in-out;
}
.navitext:hover {
	font-family: 'Asap', sans-serif;
	font-size: 1.3em;
	font-weight: 700;
	color: #FFF;
	text-shadow: 0.2em 0.3em 0.4em rgba(0,0,0,0.4);
	text-align: center;
	padding-top: 0;
	margin-bottom: 0.8em;
	margin-top: 0;
	transition: text-shadow 0.4s ease-in-out, transform 0.5s ease-in-out;
	transform: scale(1.2, 1.2);
}
.navibutton {
	width: 33.3333%;
	margin-left: -20px;
	margin-right: 20px;
	float: left;
}
.welcometext {
	margin-top: 5%;
	margin-left: auto;
	margin-right: auto;
	min-width: 21em;
	width: 70%;
	max-width: 26em;
	background-color: rgba(255,255,255,0.7);
	padding-top: 1em;
	padding-bottom: 1em;
	padding-left: 1em;
	padding-right: 1em;
}
.motto {
	font-family: 'Asap', sans-serif;
	font-size: 1.5em;
	font-weight: 500;
	color: #C00D0D;
	margin: 0;
	z-index: 3;
	text-align: center;
}
.block {
	width: 45%;
	margin-left: 3.3333%;
	float: left;
	margin-bottom: 5%;
}
.bigblock {
	width: 93.3333%;
	padding-left: 3.3333%;
}
.maps_image {
	right: -37px;
	bottom: 2%;
	margin-right: 97.5%;
	float: left;
	position: absolute;
	z-index: 5;
	visibility: hidden;
}
.bigbox_maps {
	float: left;
	margin-left: 3.3333%;
	margin-bottom: 5%;
	width: 93.3333%;
	display: block;
}
.Hinweis {
	width: 93.3333%;
	margin-top: 2.5%;
	margin-bottom: 5%;
	padding: 2.5%;
	text-align: center;
    border: 0.4em solid rgba(255,255,255,1);
    border-radius: 1em;
	font-weight: 400;
	background-color: rgba(23,127,229,0.01);
	box-shadow: 0px 0px 10px 5px rgba(23,127,229,0.1);
	transition: 0.4s ease-in-out, transform 0.5s ease-in-out;
}
.footerbutton {
	width: 32.3333%;
	margin-left: 0.5%;
	margin-right: 0.5%;
	float: left;
}
.desktop {
	width: 0;
	float: left;
}
.tablet {
	width: 100%;
	float: left;
}
}

/* Desktoplayout: 801 bis maximal 1232 px.  Erbt Stile von: den Layouts für Mobilgeräte und Tablet-PCs. */

@media only screen and (min-width: 801px) {
#header {
	position: relative;
	z-index: 4;
	background-size: 100%;
	background-repeat: repeat-y;
	background-image: url(bilder/VerlaufRot.jpg);
	background-color: #C00D0D;
}
.gridContainer {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 1232px;
	padding-left: 0%;
	padding-right: 0%;
	z-index: 1;
}
#navi {
	position: relative;
	float: none;
	width: 50%;
	margin-left: auto;
	margin-right: auto;
}
.navilogo {
	width: 350px;
	padding-top: 20px;
	padding-bottom: 5px;
	margin-top: 0;
	margin-bottom: 0;
	margin-right: auto;
	margin-left: auto;
	float: none;
}
.navitext {
	font-family: 'Asap', sans-serif;
	font-size: 1.4em;
	font-weight: 700;
	color: #FFF;
	text-shadow: none;
	text-align: center;
	padding-top: 0;
	margin-bottom: 0.8em;
	margin-top: 0;
	transition: text-shadow 0.4s ease-in-out, transform 0.5s ease-in-out;
}
.navitext:hover {
	font-family: 'Asap', sans-serif;
	font-size: 1.4em;
	font-weight: 700;
	color: #FFF;
	text-shadow: 0.2em 0.3em 0.4em rgba(0,0,0,0.4);
	text-align: center;
	padding-top: 0;
	margin-bottom: 0.8em;
	margin-top: 0;
	transition: text-shadow 0.4s ease-in-out, transform 0.5s ease-in-out;
	transform: scale(1.2, 1.2);
}
.navibutton {
	width: 33.3333%;
	margin-left: -20px;
	margin-right: 20px;
	float: left;
}
.welcometext {
	margin-top: 5%;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
	max-width: 28em;
	background-color: rgba(255,255,255,0.6);
	padding-top: 1em;
	padding-bottom: 1em;
	padding-left: 1em;
	padding-right: 1em;
}
.motto {
	font-family: 'Asap', sans-serif;
	font-size: 1.6em;
	font-weight: 500;
	color: #C00D0D;
	margin: 0;
	z-index: 3;
	text-align: center;
}
.block {
	width: 30%;
	margin-left: 2.5%;
	float: left;
	margin-bottom: 5%;
}
.bigblock {
	width: 95%;
	padding-left: 2.5%;
}
.maps_image {
	right: -37px;
	bottom: 2%;
	margin-right: 97.5%;
	float: left;
	position: absolute;
	z-index: 5;
	visibility: visible;
}
.bigbox_maps {
	float: left;
	margin-left: 2.5%;
	margin-bottom: 5%;
	width: 95%;
	display: block;
}
.Hinweis {
	width: 94%;
	margin-top: 0%;
	margin-bottom: 5%;
	padding: 2.5%;
	text-align: center;
    border: 0.4em solid rgba(255,255,255,1);
    border-radius: 1em;
	font-weight: 400;
	background-color: rgba(23,127,229,0.01);
	box-shadow: 0px 0px 10px 5px rgba(23,127,229,0.1);
	transition: 0.4s ease-in-out, transform 0.5s ease-in-out;
}
.footerbutton {
	width: 32.3333%;
	margin-left: 0.5%;
	margin-right: 0.5%;
	float: left;
}
.desktop {
	width: 100%;
	float: left;
}
.tablet {
	width: 0;
	float: left;
}
}

.imagebox {
	text-align: center;
	margin-bottom: -4.4em;
}
#footer {
	position: relative;
	width: 60%;
	height: 2.5em;
	margin-top: 30px;
	margin-bottom: 20px;
	margin-left: -1.5em;
	padding-left: 20%;
}
body {
	postion: relative;
	width: 100%;
	background-color: rgba(102,102,102,1);
}
.logo {
	transition: transform 0.7s;
}
.logo:hover {
	transform: scale(1.15, 1.15);
}
.liststyle {
	list-style: none;
}
h1 {
	font-family: 'Asap', sans-serif;
	font-size: 0px;
	font-weight: 400;
	text-align: center;
}
h2 {
	position: relative;
	z-index: 3;
	font-family: 'Asap', sans-serif;
	font-size: 2.8em;
	font-weight: 700;
	color: #c00d0d;
}
h5 {
	font-family: 'Asap', sans-serif;
	font-size: 1.5em;
	font-weight: 700;
	color: #C00D0D;
	margin: 0;
}
#h5-red {
	color: #C00D0D;
}
p {
	position: relative;
	z-index: 3;
	font-family: 'Asap', sans-serif;
	font-size: 1.2em;
	font-weight: 400;
	color: #C00D0D;
}
#details1 {
	position: relative;
	z-index: 3;
	margin-left: -0.5em;
	font-family: 'Asap', sans-serif;
	font-size: 1.2em;
	font-weight: 400;
	color: #C00D0D;
	overflow: hidden;
	transition: height 0.5s ease-in-out;
}
#details1:not([open]) {
	height: 4em;
}
#details1[open] {
	height: 13em;
}
#details2 {
	position: relative;
	z-index: 3;
	margin-left: -0.5em;
	font-family: 'Asap', sans-serif;
	font-size: 1.2em;
	font-weight: 400;
	color: #C00D0D;
	overflow: hidden;
	transition: height 1s ease-in-out;
}
#details2:not([open]) {
	height: 4em;
}
#details2[open] {
	height: 26em;
}
summary {
	margin: 0.5em;
	color: #FFF;
    background-color: #FFC80A;
    display: inline-block;
    padding: 0.6em 0.9em;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    /* Verzögerung beim Klicken entfernen */
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    /* Text soll nicht auswählbar sein */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 2px solid #FFF;
    border-radius: 100px;
	box-shadow:			0px 0px 0px 0px rgba(0,0,0,0) inset, 0px 0px 1px 1px rgba(255,255,255,0.5);
	-webkit-box-shadow:	0px 0px 0px 0px rgba(0,0,0,0) inset, 0px 0px 1px 1px rgba(255,255,255,0.5);
	-moz-box-shadow:	0px 0px 0px 0px rgba(0,0,0,0) inset, 0px 0px 1px 1px rgba(255,255,255,0.5);
	transition: box-shadow 0.4s ease-in-out;
}
summary:hover {
	box-shadow: 		0px 0px 0px 0px rgba(0,0,0,0) inset, 0px 0px 5px 5px rgba(255,200,10,0.2);
	-webkit-box-shadow:	0px 0px 0px 0px rgba(0,0,0,0) inset, 0px 0px 5px 5px rgba(255,200,10,0.2);
	-moz-box-shadow:	0px 0px 0px 0px rgba(0,0,0,0) inset, 0px 0px 5px 5px rgba(255,200,10,0.2);
	transition: box-shadow 0.4s ease-in-out;
}
.summaryAdd {
	font-size: 0.78em;
	font-style: italic;
	margin-left: 1em;
	color: #FFC80A;
}
.image {
	transition: transform 0.7s;
}
.image:hover {
	transform: rotate(-2deg) scale(1.05, 1.05);
}
.whitecarpet {
	width: 100%;
	background-color: rgba(255,255,255,1);
	padding-bottom: 2%;
	z-index: 2;
}
.shaddow {
	position: relative;
	background-image: url(bilder/Schatten.png);
	background-repeat: repeat-x;
	height: 20px;
	margin-bottom: -20px;
	z-index: 4;
}
.bigbox {
	position: relative;
	clear: both;
	float: left;
	margin-left: 0;
	margin-bottom: 2%;
	width: 100%;
	display: block;
	padding-left: 0;
	z-index: 3;
}
.bigbox_16_9 {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
	width: 100%;
}
.foto {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	background-image: url(bilder/Bild01.jpg);
	background-repeat: no-repeat;
	background-size: 100% auto;
	z-index: 2;
}
.bigbox_maps_16_9 {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
	width: 100%;
}
.maps {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	z-index: 2;
}
#text-align-center {
	text-align: center;
}
.Hinweis:hover {
    border: 0.4em solid rgba(255,255,255,1);
	background-color: rgba(147,198,50,0.01);
	box-shadow: 0px 0px 10px 5px rgba(147,198,50,0.2);
	transition: 0.4s ease-in-out, transform 0.5s ease-in-out;
}
.btn {
	font-weight: 400;
	color: #FFF;
    background-color: #93C632;
    display: inline-block;
    padding: 0.6em 0.9em;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    /* Verzögerung beim Klicken entfernen */
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    /* Text soll nicht auswählbar sein */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 2px solid #FFF;
    border-radius: 100px;
	box-shadow:			0px 0px 0px 0px rgba(0,0,0,0) inset, 0px 0px 1px 1px rgba(255,255,255,0.5);
	-webkit-box-shadow:	0px 0px 0px 0px rgba(0,0,0,0) inset, 0px 0px 1px 1px rgba(255,255,255,0.5);
	-moz-box-shadow:	0px 0px 0px 0px rgba(0,0,0,0) inset, 0px 0px 1px 1px rgba(255,255,255,0.5);
	transition: box-shadow 0.4s ease-in-out;
}
.btn:hover {
	box-shadow: 		0px 0px 0px 0px rgba(0,0,0,0) inset, 0px 0px 5px 5px rgba(147,198,50,0.2);
	-webkit-box-shadow:	0px 0px 0px 0px rgba(0,0,0,0) inset, 0px 0px 5px 5px rgba(147,198,50,0.2);
	-moz-box-shadow:	0px 0px 0px 0px rgba(0,0,0,0) inset, 0px 0px 5px 5px rgba(147,198,50,0.2);
	transition: box-shadow 0.4s ease-in-out;
}