/* CSS Document */

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXX       webEdition HACK       XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

a[href="https://www.webEdition.org"],
a[title="This page was created with webEdition CMS"]{display:none;font-size:0px;}

@media (max-width: 767px) { ... }
@media (min-width: 768px) and (max-width: 991px) { ... }
@media (min-width: 992px) and (max-width: 1199px) { ... }
@media (min-width: 1200px) { ... }

@import url("../css/iconSprite.css");

/******  Import Special TTF Fonts from folder ../fonts  ******/
@font-face {font-family: 'TastelessCandy';src: url('../fonts/TastelessCandy.ttf') format('truetype');}
@font-face {font-family: 'Raleway';src: url('../fonts/raleway/Raleway-VariableFont_wght.ttf') format('truetype');}
@font-face {font-family: 'Prompt';src: url('../fonts/Prompt/Prompt-Thin.ttf') format('truetype');}
@font-face {font-family: 'RubikVinyl';src: url('../fonts/Rubik_Vinyl/RubikVinyl-Regular.ttf') format('truetype');}
@font-face {font-family:'AdvertRegular';src: url('../fonts/AdvertRegular.ttf') format('truetype');}
@font-face {font-family: 'Univers';src: url('../fonts/UniversLTPro-Condensed.otf') format('truetype');}
@font-face {font-family: 'Roboto';src: url('../fonts/roboto/RobotoFlex-VariableFont.ttf') format('truetype');}
/******  END Import Special TTF Fonts from folder ../fonts  ******/

:root{

	/* FORMS
	-------------------------------------------------- */	
	--btn-inputstyle:#ddd; /*  */
	--btn-inputstyle-bg:#fff; /*  */
	--btn-inputstyle-border:#ccc; /*  */

	--input:#777; /* input */
	--input-h:#777; /* input */
	--input-border:#f1f1f1; /* input */
	--input-border-h:#eee; /* input */
	--input-bg:#f1f1f1; /* input */
	--input-bg-h:#fff; /* input */

	--input-border-err:#CC0000; /* input */
	--input-border-err-h:#CC0000; /* input */
	--input-bg-err:#FFF; /* input */
	--input-bg-err-h:#FFF; /* input */
	--color28:RGBA(183, 88, 104, 0.20); /* .form-control.error box shadow */

	--input-border-val:#fafafa; /* input */
	--input-border-val-h:#ccc; /* input */
	--input-bg-val:#fafafa; /* input */
	--input-bg-val-h:#FFF; /* input */

	--placeholder:#ccc; /* placeholder */
	--placeholder-h:transparent; /* placeholder */
	--placeholder-border:transparent; /* placeholder */
	--placeholder-err:#FFF; /* placeholder */
	--placeholder-err-h:#FFF; /* placeholder */
}

/******  Reset and common styles ******/

::-webkit-scrollbar {
	display: none;
}

html{background-color:#fff;height:100%;scrollbar-width: none;font-smoothing:none;-webkit-font-smoothing:none;}
body {overflow-x: hidden;font-family:'Roboto';font-weight:100;font-size:1.7rem;color:#999;}

.logo{position:fixed;z-index:2;width:100%;padding:1rem 2rem;text-align:right;}
.logo a:hover{text-decoration:none;}
.logo-brand span.brand{font-size:19px;color:#fff;display:block;text-transform:uppercase;}
.logo-brand span.subtitle{font-family:'Roboto'; letter-spacing: 0px;font-size:11px;color:#fff;margin-top:-5px;display:block;padding-right:4px;}
.brand{font-family: 'Prompt';letter-spacing: -.9px;font-weight: 500;text-transform:uppercase;}

h1{font-family:'Roboto';font-size: 3.5rem;font-weight:200;text-transform:uppercase;margin-top:15rem;margin-bottom:5rem;}
h1.small{line-height:1;font-size:24px;margin-bottom:10px;}
h1.first,
.first h1{margin-top:2rem;}

.wrapper{width:100%;position:relative;overflow:hidden;padding-top:300px;padding-bottom:10rem;}
.content {position:relative;}

p{margin:0 0 2rem;}
.ani{animation-name: fadeIn;animation-duration: 3s;animation-delay: 0s;/*animation-iteration-count: infinite;*/animation-fill-mode: both;display: block;backface-visibility: visible !important;}
a{outline:none;}
a:hover{outline:none;}
hr{border-width:0px;}
ul,li{list-style:none;}
img,fieldset{border:none;}
legend{display:none;}

.floatLeft{float:left;}
.floatRight{float:right;}
.displayNone{display:none;}
.floatTerminator{clear:both;}
.upper{font-size:60%;vertical-align:super;}
.lower{font-size:60%;vertical-align:sub;}
.center-block {display: block;margin-left: auto;margin-right: auto;}
.trennlinie{border-top:1px solid #dcdde2;height:1px;clear:both;}
.img-responsive{width:100%;height:auto;}
.agb .row div{margin-bottom:40px;}

/*  BTN-CTA
-------------------------------------------------- */

.btn-cta {font-size:19px;color:#fff;text-align: left;background: transparent url(../img/layout/background/bg_farbverlauf_small.jpg) repeat-x left top;background-position: 0px 0px;}
.btn-cta:hover,
.btn-cta:active,
.btn-cta:focus{color:#fff;}

/******  Background SZENE ******/

.scroll.horizontal{width:100%;overflow-y:hidden;overflow-x:auto;scrollbar-width: none;-ms-overflow-style: none;-webkit-perspective: 1px;perspective: 1px;}

#bgFarbverlauf { position:fixed;z-index:1;left:0;height:290px;background: url(../img/layout/background/bg_farbverlauf_small.jpg) repeat-x;background-position: 0px -0px;}
#bgSzeneHg { position:absolute; bottom:0px;width:778800px; height:250px; background:url(../img/layout/background/bg_szene_hg.png) 180px 0px repeat-x;}
#bgSzeneVg{ position:absolute;bottom:0;width:431100px;height:250px;background:url(../img/layout/background/bg_szene_vg.png) 0px 0px repeat-x;}

/*keyframe animations*/
.bannermoveVG {
	-webkit-animation: bannermoveVG 40s linear infinite;
	-moz-animation: bannermoveVG 40s linear infinite;
	-ms-animation: bannermoveVG 40s linear infinite;
	-o-animation: bannermoveVG 40s linear infinite;
	animation: bannermoveVG 40s linear infinite;
}
@keyframes "bannermoveVG" {
	0% {margin-left: 0;}
	100% {margin-left: -4311px;}
}
@-moz-keyframes bannermoveVG {
	0% {margin-left: 0;}
	100% {margin-left: -4311px;}
}
@-webkit-keyframes "bannermoveVG" {
	0% {margin-left: 0;}
	100% {margin-left: -4311px;}
}
@-ms-keyframes "bannermoveVG" {
	0% {margin-left: 0;}
	100% {margin-left: -4311px;}
}
@-o-keyframes "bannermoveVG" {
	0% {margin-left: 0;}
	100% {margin-left: -4311px;}
}
.bannermoveHG {
	-webkit-animation: bannermoveHG 60s linear infinite;
	-moz-animation: bannermoveHG 60s linear infinite;
	-ms-animation: bannermoveHG 60s linear infinite;
	-o-animation: bannermoveHG 60s linear infinite;
	animation: bannermoveHG 60s linear infinite;
}
@keyframes "bannermoveHG" {
	0% {margin-left: 0;}
	100% {margin-left: -7788px;}
}
@-moz-keyframes bannermoveHG {
	0% {margin-left: 0;}
	100% {margin-left: -7788px;}
}
@-webkit-keyframes "bannermoveHG" {
	0% {margin-left: 0;}
	100% {margin-left: -7788px;}
}
@-ms-keyframes "bannermoveHG" {
	0% {margin-left: 0;}
	100% {margin-left: -7788px;}
}
@-o-keyframes "bannermoveHG" {
	0% {margin-left: 0;}
	100% {margin-left: -7788px;}
}

/******  END Background SZENE ******/

/***  KONTAKT ***/

.kontakt h1{margin-top:0px;}
.kontakt{padding-bottom:10rem;}
.kontakt form div{position:relative;padding-bottom:1.5rem;}
.kontakt form label{width:100%;font-size:1.4rem;cursor:pointer;font-weight:100;font-style:italic;}
.kontakt form label.error{color:#CC0000;width:100%;font-size:1.1rem;position:absolute;top:1.8rem;left:0;}
.kontakt form .label{width:100%;}
.kontakt form #Anrede{width:170px;}
.kontakt form #PLZ{width:20%;float:left;}
.kontakt form #Ort{width:75%;float:right;}
.kontakt form #Nachricht{height:200px;}
.kontakt form .btn.submit{margin-top:5rem;}

.kontakt form .captcha{margin-top:20px}
.kontakt form .captcha label{}
.kontakt form .captcha .label{}
.kontakt form .captcha #Code{}
.kontakt form .captcha .textCaptcha{font-size:80%;display:block;width:100%;float:left;margin-bottom: 2rem;}
.kontakt form .captcha .imgCaptcha{width:auto;border:1px solid;height:27px;float:left;}
.kontakt form .captcha .btn.refreshCaptcha{width:49%;float:right;font-size:90%;}

/***  END Kontakt Form ***/

/***  konfig Kontaktform & webapp Kontaktform  ***/
.kontaktform  input[type=checkbox]{float:left;cursor: pointer;}
.kontaktform  input[type=checkbox]{position: absolute; clip: rect(0,0,0,0);}
.kontaktform  input[type=checkbox] + label{margin-left:-8px;height:35px;background: transparent url(../img/layout/iconSprite.png) -362px -4px no-repeat;padding-left: 56px;}
.kontaktform  input[type=checkbox]:checked + label  {background-position:  -362px -59px;}

.kontaktform .agree label{font-weight:normal;padding-top:7px;}

.kontaktform p.captcha{margin-top:20px}
.kontaktform .textCaptcha{font-size:80%;display:inline-block;}

.kontaktform p.captcha .imgCaptcha{height:27px;}
.kontaktform p.captcha .btn.refreshCaptcha{font-size:90%;}

/* FORM-CONTROL
-------------------------------------------------- */
.form-control{border-radius:0;font-family:'Roboto';font-size:1.7rem;height: auto;padding: 1rem;font-weight: 100;color:#888;}

form label{cursor:pointer;}
form label.error{position:absolute;z-index:0;top:-10px;left:0;margin:0;color:var(--error);font-size: .7rem;}

form select,
.form-control,
.text.form-control{cursor:pointer;color: var(--input);background-color: var(--input-bg);border:0;border-bottom:1px solid var(--input-border);outline: 0;box-shadow:none;transition:none;}

form select:focus,
.form-control:focus,
.text.form-control:focus{color: var(--input-h);background-color: var(--input-bg-h);border-color: var(--input-border-h);outline: 0;box-shadow:none;transition:none;}

form select.active,
.form-control.active,
.text.form-control.active{color: var(--fa);background-color: var(--input-bg-val);}

form select.valid,
.form-control.valid{color: var(--input-val);border-color: var(--input-border-val);background:var(--input-bg-val);}
.form-control.valid:focus{border-color: var(--input-border-val-h);background:var(--input-bg-val-h);}
form select.error,
.form-control.error{color:var(--dates);background:var(--input-bg-err);border-color:var(--input-border-err);/*box-shadow: 0px 0px 3px 3px var(--color28);-webkit-box-shadow: 0px 0px 3px 3px var(--color28);-moz-box-shadow: 0px 0px 3px 3px var(--color28);*/}
.form-control.error:focus{background:var(--input-bg-err-h);border-color:var(--input-border-err-h)}

select.form-control{width:50%;}

form select.inactive,
.form-control.inactive{background:var(--input-inactive-bg);color:var(--input-inactive);border: 1px solid var(--input-inactive-bg);}

form input.radio{float:left;margin-right:7px;}

@media (max-width: 575px) { 
	form label.error{top:0;left:0;}
}

/* PLACEHOLDER
-------------------------------------------------- */
/* CSS Trick: Wenn der Placeholder nicht zu sehen sein soll, dann die font-color auf background-color setzen */

.placeholder.form-control{border-color:var(--placeholder-border);width:50%;float:left;background:inherit;}

.placeholder.form-control{color:var(--placeholder);}
.form-control::-moz-placeholder{color:var(--placeholder);}
.form-control::-webkit-input-placeholder{color:var(--placeholder);}
.form-control:-moz-placeholder{color:var(--placeholder);}
.form-control:-ms-input-placeholder{color:var(--placeholder);}

.form-control:focus::-moz-placeholder{color:var(--placeholder-h);}
.form-control:focus::-webkit-input-placeholder{color:var(--placeholder-h);}
.form-control:focus:-moz-placeholder{color:var(--placeholder-h);}
.form-control:focus:-ms-input-placeholder{color:var(--placeholder-h);}

.form-control.error::-moz-placeholder{color:var(--placeholder-err);}
.form-control.error::-webkit-input-placeholder{color:var(--placeholder-err);}
.form-control.error:-moz-placeholder{color:var(--placeholder-err);}
.form-control.error:-ms-input-placeholder{color:var(--placeholder-err);}

.form-control.error:focus::-moz-placeholder{color:var(--placeholder-err-h);}
.form-control.error:focus::-webkit-input-placeholder{color:var(--placeholder-err-h);}
.form-control.error:focus:-moz-placeholder{color:var(--placeholder-err-h);}
.form-control.error:focus:-ms-input-placeholder{color:var(--placeholder-err-h);}


/*** POPUP SHADOWBOX ***/
body.shadowbox{padding:10px 40px 60px 40px;scrollbar-width: none;}

@media (max-width: 767px) {
	body.shadowbox{padding:10px 10px 30px 10px;}
}
body.shadowbox ul{padding-left:24px}
body.shadowbox li{list-style-type:disc;padding-left:10px;}
body.shadowbox .container{position:relative;padding-top:100px;}
body.shadowbox .statikheader{position:absolute;top:0px;left:0px;}
body.shadowbox .navbar-brand{position:absolute;top:20px;right:15px;z-index:2;padding:0px;margin-top:0px;}
body.shadowbox .navbar-brand span.advert{display:none;}

body.shadowbox .onlyImage img{width:100%;}
/*** END POPUP SHADOWBOX ***/

/*** FOOTER ***/
#footer {position:fixed;bottom:0;width:100%;float:left;border-top:70px solid #fff;color:#fff;text-align: left;background: transparent url(../img/layout/background/bg_farbverlauf_small.jpg) repeat-x left top;background-position: 0px -0px;}
.footer a {color:#fff; text-decoration:none; }
.footer a:hover {color: #fff;}

.footer .fusszeile{font-size:12px;text-align:center;padding:15px 0px;}
.footer p.fusszeile{margin:0px;}

@media (max-width: 575px) {
	body {color:#333;}
	.logo{padding:.5rem 1rem;text-align:right;}
	.logo-brand span.brand{font-size:17px;}
	h1{font-size:3rem;}
	.wrapper{padding-top:150px;}
	.btn-cta{width:100%;}
	#footer {border-top:0px solid #fff;}
	#bgFarbverlauf {height:155px;background: transparent url(../img/layout/background/bg_farbverlauf_small.jpg) repeat-x left top;background-position: 0px -1025px;}
	#bgSzeneHg {height:125px; background:url(../img/layout/background/bg_szene_hg.png) 0px 0px repeat-x;background-size:.5% 100%;}
	#bgSzeneVg{height:125px;background:url(../img/layout/background/bg_szene_vg.png) -0px 0px repeat-x;background-size:.5% 100%;}
}