/* Kommentar in CSS */


/* Anfang Fonts einbinden */
/* carter-one-regular - latin */
@font-face {
  font-family: 'Carter One';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/carter1/carter-one-v10-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Carter One'), local('CarterOne'),
       url('../fonts/carter1/carter-one-v10-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/carter1/carter-one-v10-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/carter1/carter-one-v10-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/carter1/carter-one-v10-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/carter1/carter-one-v10-latin-regular.svg#CarterOne') format('svg'); /* Legacy iOS */
}
/* Ende Fonts einbinden */
/* Anfang Fonts einbinden */
/* goeschen-fraktur-regular - latin */
@font-face {
  font-family: 'Bickley Script';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/bickley-script/BickleyScript.eot'); /* IE9 Compat Modes */
  src: local('BickleyScript'), local('bickleyscript'),
       url('../fonts/bickley-script/BickleyScript.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/bickley-script/BickleyScript.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/bickley-script/BickleyScript.woff') format('woff'), /* Modern Browsers */
       url('../fonts/bickley-script/BickleyScript.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/bickley-script/BickleyScript.svg#CarterOne') format('svg'); /* Legacy iOS */
}
/* Ende Fonts einbinden */

@font-face {
  font-family: 'Libre_Baskerville';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Libre_Baskerville/LibreBaskerville-Regular.eot'); /* IE9 Compat Modes */
  src: local('Libre_Baskerville'), local('libre_baskerville'),
       url('../fonts/Libre_Baskerville/LibreBaskerville-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/Libre_Baskerville/LibreBaskerville-Regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/Libre_Baskerville/LibreBaskerville-Regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/Libre_Baskerville/LibreBaskerville-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/Libre_Baskerville/LibreBaskerville-Regular.svg#CarterOne') format('svg'); /* Legacy iOS */
}
/* Ende Fonts einbinden */

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* MEDIA QUERY 1380px*/

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (min-width:1380px) {

}
/* ENDE MEDIA QUERY */

html 
{
    -background-color: #000000;
}

body
{
	position:absolute;
	height:100%;
	width:100%;
	margin:auto;
	background:rgba(99, 99, 99, 0.4);
	-display: none;
}

#mama
{
	position:absolute;
	height:100%;
	width:100%;
	top:0%;
	background-image:url(../images/modelle/1.jpg), url(../images/modelle/2.jpg), url(../images/modelle/5.jpg), url(../images/modelle/4.jpg), url(../images/modelle/1.jpg);
	background-repeat:no-repeat;
	background-size:100%;
	background-position:center;
	-moz-animation: none;
	-webkit-animation: none;
	-o-animation: none;
	-ms-animation: none;
	animation: none;
}
@keyframes bgfade {
	
0%, 8% {
-moz-background-position: -2100px, 2100px, -2100px, 2100px, center;
-webkit-background-position: -2100px, 2100px, -2100px, 2100px, center;
-o-background-position: -2100px, 2100px, -2100px, 2100px, center;
-ms-background-position: -2100px, 2100px, -2100px, 2100px, center;
background-position: -2100px, 2100px, -2100px, 2100px, center;
-moz-background-size:100%;
-webkit-background-size:100%;
-o-background-size:100%;
-ms-background-size:100%;
background-size:100%;
}
11%{
-moz-background-size:400%;
-webkit-background-size:400%;
-o-background-size:400%;
-ms-background-size:400%;
background-size:400%;
}
16%, 33%{
-moz-background-position: -2100px, 2100px, -2100px, center, center;
-webkit-background-position: -2100px, 2100px, -2100px, center, center;
-o-background-position: -2100px, 2100px, -2100px, center, center;
-ms-background-position: -2100px, 2100px, -2100px, center, center;
background-position: -2100px, 2100px, -2100px, center, center;
-moz-background-size:100%;
-webkit-background-size:100%;
-o-background-size:100%;
-ms-background-size:100%;
background-size:100%;
}
40%{
-moz-background-size:200%;
-webkit-background-size:200%;
-o-background-size:200%;
-ms-background-size:200%;
background-size:200%;
}
41%, 58% {
-moz-background-position: -2100px, 2100px, center, center, center;
-webkit-background-position: -2100px, 2100px, center, center, center;
-o-background-position: -2100px, 2100px, center, center, center;
-ms-background-position: -2100px, 2100px, center, center, center;
background-position: -2100px, 2100px, center, center, center;
-moz-background-size:100%;
-webkit-background-size:100%;
-o-background-size:100%;
-ms-background-size:100%;
background-size:100%;
}
65%{
-moz-background-size:1400%;
-webkit-background-size:1400%;
-o-background-size:1400%;
-ms-background-size:1400%;
background-size:1400%;
}
66%, 83%{
-moz-background-position: -2100px, center, center, center, center;
-webkit-background-position: -2100px, center, center, center, center;
-o-background-position: -2100px, center, center, center, center;
-ms-background-position: -2100px, center, center, center, center;
background-position: -2100px, center, center, center, center;
-moz-background-size:100%;
-webkit-background-size:100%;
-o-background-size:100%;
-ms-background-size:100%;
background-size:100%;
}
91%{
-moz-background-size:600%;
-webkit-background-size:600%;
-o-background-size:600%;
-ms-background-size:600%;
background-size:600%;
}
92%, 100% {
-moz-background-position: -center, center, center, center, center;
-webkit-background-position: -center, center, center, center, center;
-o-background-position: -center, center, center, center, center;
-ms-background-position: -center, center, center, center, center;
background-position: -center, center, center, center, center;
-moz-background-size:100%;
-webkit-background-size:100%;
-o-background-size:100%;
-ms-background-size:100%;
background-size:100%;
}

}


#kopf1
{
	position:absolute;
	width:10%;
	height:auto;
	top:0%;
	left:0%;
	margin:auto;
	padding-left:1%;
	padding-right:1%;
	box-shadow:0 0 0.2em #ffffff, 0 0 1.2em #ffffff, 0 0 1.2em #ffffff;
	color:red;
	-font-size:10%;
	font-size:0.6vw;
	font-weight:bold;
	text-align:center;
	font-family: 'Carter One';
	text-shadow:0.2em 0.2em 0.2em #ffffff, 0.4em 0.3em 0.2em #ffffff, 0.2em 0.2em 0.2em #ffffff;
	z-index:9999;
	border-right:5px solid gray;
	border-bottom:5px solid gray;
	cursor:pointer;
	background:rgba(99, 99, 99, 0.8);
	-background-size: 350% 350%;
    -background-image: repeating-linear-gradient(
		-45deg,
		hsl(6,87%,57%,0.9) 0%,  /* blau */
		hsl(120,30%,90%,0.9) 15%, /* grün */
		hsl(30,50%,90%,0.9) 30%,  /* rosa */
		hsl(6,87%,57%,0.9) 45%  /* blau */
	);
    -animation: diagonal alternate 10s infinite;
	
	
}
/*
@keyframes diagonal {
    0% {background-position: 0% 50%}
    100% {background-position: 100% 50%}
}
*/
#kopf1
{
	border-right:5px solid gray;
	animation: bordersw alternate 5s 4;
	;
}
@keyframes bordersw {
    0% {border-right:5px solid gray;}
	0% {border-bottom:5px solid gray;}
	15% {border-right:5px solid red;}
	15% {border-bottom:5px solid red;}
	40% {border-right:5px solid gray;}
	40% {border-bottom:5px solid gray;}
	60% {border-right:5px solid white;}
	60% {border-bottom:5px solid white;}
    80% {border-right:5px solid red;}
	 80% {border-bottom:5px solid red;}
	100% {border-right:5px solid gray;}
	100% {border-bottom:5px solid gray;}
}

#kopf13
{
	display:none;
}
#kopf1:hover #kopf12
{
	display:none;
}
#kopf1:hover #kopf13
{
	display:block;
	font-size:0.8vw;
}
#kopf1:hover
{
	width:25%;
	background:rgba(99, 99, 99, 0.95);
}

#logo01
{
	position:relative;
	margin-top:5%;
	width:100%;
	cursor:pointer;
	z-index:111;
}
.kopf01
{
	position:relative;
	margin-top:2%;
	z-index:111;
}

#kopf2
{
	position:absolute;
	-display:none;
	width:100%;
	height:100%;
	top:0%;
	margin:auto;
	color:red;
	font-size:7vh;
	font-weight:bold;
	text-align:center;
	font-family: 'Bickley Script';
	text-decoration:none;
	text-shadow:0 0.1em 0.1em #ffffff, 0 0.1em 0.1em #ffffff, 0 0.1em 0.1em #ffffff;
	z-index:111;
	background:url(../images/home/was91.png);
	background-repeat:no-repeat;
	background-size:22%;
	background-position:center;
}
.kopf02
{
	position:relative;
	top:35%;
}


#content
{
	position:relative;
	-display: flex;
	height:100%;
	width:100%;
	overflow:hidden;
	-border:1px solid red;
	-background:url(../images/modelle/1.jpg);
	
}
#content01
{
	position:relative;
	display:none;
	top:0%;
	left:3%;
	height:100%;
	width:94%;
	-margin:auto;
	color:red;
	font-size:9vh;
	font-weight:bold;
	text-align:center;
	font-family: 'Bickley Script';
	text-shadow:0 0.1em 0.1em #ffffff, 0 0.1em 0.1em #ffffff, 0 0.1em 0.1em #ffffff;
	overflow:auto;
	z-index:99;
	background:rgba(66, 66, 66, 0.95);
	-border:3px yellow solid;
}
#content02
{
	position:relative;
	-display:none;
	top:20%;
	left:3%;
	height:70%;
	width:94%;
	-margin:auto;
	color:red;
	font-size:9vh;
	font-weight:bold;
	text-align:center;
	font-family: 'Bickley Script';
	text-shadow:0 0.1em 0.1em #ffffff, 0 0.1em 0.1em #ffffff, 0 0.1em 0.1em #ffffff;
	overflow:hidden;
	z-index:99;
	background:rgba(66, 66, 66, 0.95);
	-border:3px yellow solid;
}
#content03
{
	position:relative;
	display:none;
	top:0%;
	left:3%;
	height:100%;
	width:94%;
	-margin:auto;
	color:red;
	font-size:9vh;
	font-weight:bold;
	text-align:center;
	font-family: 'Bickley Script';
	text-shadow:0 0.1em 0.1em #ffffff, 0 0.1em 0.1em #ffffff, 0 0.1em 0.1em #ffffff;
	overflow:auto;
	z-index:99;
	background:rgba(66, 66, 66, 0.95);
	-border:3px yellow solid;
}
#datens
{
	position:relative;
	top:0%;
	left:3%;
	height:100%;
	width:94%;
	-margin:auto;
	color:red;
	font-size:9vh;
	font-weight:bold;
	text-align:center;
	font-family: 'Bickley Script';
	text-shadow:0 0.1em 0.1em #ffffff, 0 0.1em 0.1em #ffffff, 0 0.1em 0.1em #ffffff;
	overflow:auto;
	z-index:99;
	background:rgba(66, 66, 66, 0.95);
	-border:3px yellow solid;
}

#menu
{
	position:absolute;
	display:flex;
	width:87%;
	left:13%;
	margin:auto;
	height:9%;
	top:3%;
	z-index:111;
	background:rgba(99, 99, 99, 0.4);
}
#home
{
	position:relative;
	left:0%;
	width:29%;
	background:rgba(99, 99, 99, 0.8);
	cursor:pointer;
}
#referenzen
{
	position:relative;
	left:0%;
	width:29%;
	background:rgba(99, 99, 99, 0.6);
	cursor:pointer;
}

#kontakt
{
	position:relative;
	left:0%;
	width:29%;
	background:rgba(99, 99, 99, 0.4);
	cursor:pointer;
}
h3.home02
{
	position:relative;
	top:11%;
	margin:auto;
	margin-left:2%;
	width:100%;
	color:white;
	font-size:6.1vh;
	font-weight:bold;
	text-align:left;
	font-family: 'Bickley Script';
	text-shadow:-1px 2px 1px black;
}
#home:hover
{
	background:rgba(99, 99, 99, 1.0);
}
h3.home02:hover
{
	color:red;
	text-shadow:0 0 0.1em #ffffff, 0 0 0.1em #ffffff, 0 0 0.1em #ffffff;
}
h3.referenzen02
{
	position:relative;
	top:11%;
	margin:auto;
	margin-left:2%;
	width:100%;
	color:white;
	font-size:6.1vh;
	font-weight:bold;
	text-align:left;
	font-family: 'Bickley Script';
	text-shadow:-1px 2px 1px black;
}
#referenzen:hover
{
	background:rgba(99, 99, 99, 1.0);
}
h3.referenzen02:hover
{
	color:red;
	text-shadow:0 0 0.1em #ffffff, 0 0 0.1em #ffffff, 0 0 0.1em #ffffff;
}

h3.kontakt02
{
	position:absolute;
	top:11%;
	margin:auto;
	margin-left:2%;
	width:100%;
	color:white;
	font-size:6.1vh;
	font-weight:bold;
	text-align:left;
	font-family: 'Bickley Script';
	text-shadow:-1px 2px 1px black;
}
#kontakt:hover
{
	background:rgba(99, 99, 99, 1.0);
}
h3.kontakt02:hover
{
	color:red;
	text-shadow:0 0 0.1em #ffffff, 0 0 0.1em #ffffff, 0 0 0.1em #ffffff;
}

#fusszeile
{
	position:absolute;
	display:flex;
	width:100%;
	margin:auto;
	height:5%;
	bottom:3%;
	z-index:111;
	-border:1px blue solid;
	background:rgba(99, 99, 99, 0.4);
}

#datenschutz
{
	position:relative;
	left:50%;
	width:25%;
	background:rgba(99, 99, 99, 0.4);
	cursor:pointer;
}
#datenschutz:hover .datenschutz02
{
	color:blue;
	text-shadow:0 0 0.1em #ffffff, 0 0 0.1em #ffffff, 0 0 0.1em #ffffff;
}

#impressum
{
	position:relative;
	left:50%;
	width:25%;
	background:rgba(99, 99, 99, 0.8);
	cursor:pointer;
}
#impressum:hover .impressum02
{
	color:blue;
	text-shadow:0 0 0.1em #ffffff, 0 0 0.1em #ffffff, 0 0 0.1em #ffffff;
}

h3.datenschutz02
{
	position:relative;
	top:11%;
	margin:auto;
	margin-left:2%;
	width:100%;
	color:white;
	font-size:2.1vh;
	font-weight:bold;
	text-align:left;
	font-family: 'Carter One';
	text-shadow:-1px 2px 1px black;
}

h3.impressum02
{
	position:absolute;
	top:11%;
	margin:auto;
	margin-left:2%;
	width:100%;
	color:white;
	font-size:2.1vh;
	font-weight:bold;
	text-align:left;
	font-family: 'Carter One';
	text-shadow:-1px 2px 1px black;
}











/* Anfang Viewports einbinden berechnen Anfang Viewports einbinden berechnen Anfang Viewports einbinden berechnen*/
@media (max-aspect-ratio: 16/9) and (max-height:1080px){



}

@media (min-aspect-ratio:16/9) and (max-height:1080px){



}
/* Ende Viewports einbinden berechnen Ende Viewports einbinden berechnen Anfang Viewports einbinden berechnen*/
@media (max-aspect-ratio: 16/9) and (max-height:980px){



}

@media (min-aspect-ratio:16/9) and (max-height:980px){



}
/* Ende Viewports einbinden berechnen Ende Viewports einbinden berechnen Anfang Viewports einbinden berechnen*/
@media (max-aspect-ratio: 16/9) and (max-height:880px){




}

@media (min-aspect-ratio:16/9) and (max-height:880px){



}
/* Ende Viewports einbinden berechnen Ende Viewports einbinden berechnen Anfang Viewports einbinden berechnen*/
@media (max-aspect-ratio: 16/9) and (max-height:780px){



}

@media (min-aspect-ratio:16/9) and (max-height:780px){



}
/* Ende Viewports einbinden berechnen Ende Viewports einbinden berechnen Anfang Viewports einbinden berechnen*/
@media (max-aspect-ratio: 16/9) and (max-height:680px){



}

@media (min-aspect-ratio:16/9) and (max-height:680px){



}
/* Ende Viewports einbinden berechnen Ende Viewports einbinden berechnen Anfang Viewports einbinden berechnen*/
@media (max-aspect-ratio: 16/9) and (max-height:580px){



}

@media (min-aspect-ratio:16/9) and (max-height:580px){



}
/* Ende Viewports einbinden berechnen Ende Viewports einbinden berechnen Anfang Viewports einbinden berechnen*/
@media (max-aspect-ratio: 16/9) and (max-height:480px){



}

@media (min-aspect-ratio:16/9) and (max-height:480px){



}
/* Ende Viewports einbinden berechnen Ende Viewports einbinden berechnen Anfang Viewports einbinden berechnen*/





/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* MEDIA QUERY 1080px*/

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (max-width:1080px) {

#kopf2
{
	font-size:6vh;
}
.kopf02
{
	top:35%;
}

}
/* ENDE MEDIA QUERY min-*/



/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* MEDIA QUERY 980px*/

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (max-width:980px) {


}
/* ENDE MEDIA QUERY max-*/



/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* MEDIA QUERY 880px*/

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (max-width:880px) {
	
	

}
	
	
/* ENDE MEDIA QUERY max-*/


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* MEDIA QUERY 780px*/

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (max-width:780px) {
	
#kopf2
{
	font-size:5vh;
}
.kopf02
{
	top:37%;
}

}


/* ENDE MEDIA QUERY */



/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* MEDIA QUERY 680px*/

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (max-width:680px) {
	



}
/* ENDE MEDIA QUERY */


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* MEDIA QUERY 580px*/

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (max-width:580px) {
	

#kopf2
{
	font-size:2.6vh;
	text-align:right;
	background:rgba(99, 99, 99, 0.0);
	
}
.kopf02
{
	top:0%;
	margin-right:3%;
	
}

#menu
{
	position:absolute;
	display:block;
	width:5%;
	left:0%;
	margin:auto;
	height:30%;
	top:38%;
	border:4px grey solid;
	border-radius:0 10px 10px 0;
	-background:rgba(11, 11, 11, 1.0);
	background-image:repeating-linear-gradient(135deg, white 0%, white 5%, grey 5%, grey 10%, white 10%);
	
}
#menu:hover
{
	width:5%;
	background-image:repeating-linear-gradient(135deg, yellow 0%, yellow 5%, grey 5%, grey 10%, yellow 10%);
}


#home
{
	position:relative;
	left:-200%;
	top:0%;
	height:33%;
	width:200%;
	background:rgba(99, 99, 99, 0.9);
	cursor:pointer;
	transition:0.2s;
	transition-delay:0.1s;
	
}
h3.home02
{
	font-size:0.1vh;
	transition:0.2s;
	transition-delay:0.1s;
}

#referenzen
{
	position:relative;
	left:-200%;
	top:0%;
	height:33%;
	width:200%;
	background:rgba(99, 99, 99, 0.9);
	cursor:pointer;
	transition:0.3s;
	transition-delay:0.1s;
	
}
h3.referenzen02
{
	font-size:0.1vh;
	transition:0.2s;
	transition-delay:0.1s;
}

#kontakt
{
	position:relative;
	left:0%;
	top:0%;
	height:33%;
	width:0%;
	background:rgba(99, 99, 99, 0.9);
	cursor:pointer;
	transition:0.4s;
	transition-delay:0.1s;
	
}
h3.kontakt02
{
	font-size:0.1vh;
	transition:0.2s;
	transition-delay:0.1s;
}

#menu:hover #home
{
	left:-2%;
	width:800%;
	border-radius:0 20px 120px 0;
}
#menu:hover h3.home02
{
	font-size:6.1vh;
}
#menu:hover #referenzen
{
	left:-2%;
	width:800%;
	border-radius:0 20px 120px 0;
}
#menu:hover h3.referenzen02
{
	font-size:6.1vh;
}
#menu:hover #kontakt
{
	left:-2%;
	width:800%;
	border-radius:0 20px 120px 0;
}
#menu:hover h3.kontakt02
{
	font-size:6.1vh;
}


}
/* ENDE MEDIA QUERY */


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* MEDIA QUERY 480px*/

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (max-width:480px) {

#kopf2
{
	font-size:2vh;
}
.kopf02
{
	-top:45%;
}

}
/* ENDE MEDIA QUERY */