@charset "utf-8";

/* ------------------------------------------------------------------------- Fonts ----------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

* {	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

html { height:100%; min-height: 100%; }
body { margin: 0; padding: 0; overflow-y:scroll; position: relative; width: 100%; height: 100%; min-height: 100%; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-family: 'Roboto', sans-serif; font-size: 14px; line-height: 1.5em; color: #646a6b; background: #fff; font-weight: 400; }

h1, h2, h3, h4, h5, h6, p, a, b, strong, i, blockquote, ul, ol, li, input, textarea, div, img, hr, span, section, header, hgroup, address, main, nav, article, aside, footer { transition: 300ms; -webkit-transition: 300ms; }

section { display: block; clear: both; }
header { display: block; }
hgroup { display: block; }
address { display: block; }
main { display: block; }
nav { display: block; }
article { display: block; }
aside { display: block; }
footer { display: block; }
video { background: #fdc702; }

h1 { margin: 0 0 0 0; font-size: 40px; line-height: 60px; font-weight: 100; color: #b7d267; }
h1 span { display: block; font-size: 24px; line-height: 36px; font-weight: 500; }
h2 { margin: 0 0 30px 0; padding: 0px 0 0 0; font-size: 28px; line-height: 0.9em; font-weight: 700; }
h2 span { font-weight: 300; }
h3 { margin: 0 0 1.5em 0; font-size: 16px; line-height: 22px; font-weight: 700; }
h4 { margin: 0 0 65px 0; font-weight: 100; font-size: 1.68em; line-height: 1.2em; }
h5 { margin: 0 0 0.8em 0; font-size: 0.6em; font-weight: 100; letter-spacing: 4px; text-transform: uppercase; }
h6 { margin: 0 0 0 0; font-size: 1em; line-height: 1.5em; font-weight: 100; letter-spacing: 4px; color: rgb(255,255,255); position: relative; transition: 600ms 0ms; -webkit-transition: 600ms 0ms; top: 80px; visibility: hidden; opacity: 0.0; }

p { margin: 0 0 0 0; padding: 0 0 1.5em 0; -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
p span { font-size: 0.8em; }

a { text-decoration: none; color: #646a6b; text-transform: uppercase; }
a:hover { border-bottom: none; }

label a { text-decoration: underline; text-transform: none; }
label a:hover { text-decoration: none; }

b, strong { font-weight: 700; }
i { }
blockquote { margin: 0 44px; }

ul { margin: 0 0 20px 0; padding: 0 0 0 17px; display: inline-block; }
ol { margin: 0 0 0 0; padding: 0 0 0 17px; }
li { /*list-style: none;*/ }

form { text-align: center; }
form br { clear: both; }
form h2 { font-weight: 300; font-size: 34px; line-height: 42px; }
form .intro.setup { padding: 10px 0 0 10px; font-size: 15px; line-height: 20px; }

form .intro.setup span { font-size: 30px; margin: 0 0 0 -16px; }
form .intro.setup span.setuppreis { font-size: 16px; }
form .intro.setup span.setuppreis span { font-size: 13px; margin: 0; }



label { margin: 0 20px 0 0; line-height: 1.7em;  padding: 5px 0; font-size: 20px; font-weight: 300; }
label.agb { font-size: 16px; }

input { border: none; padding: 0; font-weight: 300; background: #f3f3f3; margin: 0 0 5px 0; font-size: 20px; border: solid 1px #f3f3f3; width: 350px; line-height: 1.2em; padding: 5px 10px; border-radius: 3px; font-family: 'Roboto', sans-serif; }
input:focus { background: #fff; border: solid 1px #b7d267; }
textarea { border: none; padding: 13px 4% 16px; display: block; }

input.plz { width: 100px; margin: 0 5px 0 0; }
input.ort { width: 245px; }


input[type="radio"] { margin: 0 5px 0 0; width: auto; }
input[type="checkbox"] { margin: 0 5px 0 0; width: auto; }
input[type="submit"] { margin: 0 5px 0 0; width: auto; font-size: 18px; background: #b7d267; border: solid 1px #b7d267; color: #fff; padding: 5px 30px; }
input[type="submit"]:hover { background: #9bb354; cursor: pointer; }


input[type="submit"]:focus { background: #b7d267; color: #fff; }

label.error { color: #C00; }
input.error { border: solid 1px #C00; }


select { border: none; background: #f3f3f3; border: solid 1px #f3f3f3; width: 350px; font-size: 20px; padding: 5px 10px; margin: 0 0 5px 0; border-radius: 3px; font-weight: 300; font-family: 'Roboto', sans-serif; } 


input, textarea, select { outline: 0 none; }
input:focus, textarea:focus, select:focus  { background: #fff; border: solid 1px #b7d267; }






.formbox { padding: 0 0 60px 0; }


div, section, header, footer { position: relative; }
img { border: 0; height: auto; width: 100%; }
hr { margin: 9px 0 12px 0; border: 0 none; background-color: rgba(0,0,0,1); height: 1px; }

table {}
tr {}
th {}
td {}

.clear { height: 0; clear: both; }

.form_bestaetigung { margin: 30px 0 0 0; border: solid 3px #b7d267; display: inline-block; padding: 20px; border-radius: 3px; font-size: 18px; font-weight: 300; }

/* -------------------------------------------------------------------------- Rastereinheiten -------------------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.width1200 { max-width: 1200px; padding: 0 20px; margin: 0 auto; }

.span10 { width: 10%; float: left; }
.span20 { width: 20%; float: left; }
.span25 { width: 25%; float: left; }
.span30 { width: 30%; float: left; }
.span33 { width: 33.33%; float: left; }
.span35 { width: 35%; float: left; text-align: right; }
.span40 { width: 40%; float: left; }
.span50 { width: 50%; float: left; }
.span60 { width: 60%; float: left; }
.span65 { width: 60%; float: left; text-align: left; }
.span66 { width: 66.66%; float: left; }
.span70 { width: 70%; float: left; }
.span75 { width: 75%; float: left; }
.span80 { width: 80%; float: left; }
.span90 { width: 90%; float: left; }
.span100 { width: 100%; float: left; }

.content .span75 { padding: 0 30px 0 0; }

@media only screen and (max-width: 640px) {
	.span35 { width: 100%; text-align: left; }
	.span65 { width: 100%; }
	input { width: 100%; }
	select { width: 100%; }
	input.plz { width: 28%; margin: 0 2% 0 0; }
	input.ort { width: 70%; }
	.form_bestaetigung { display: block; text-align: center; }
}
/* ------------------------------------------------------------------------------- Main -------------------------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#logo { position: absolute; left: 40px; top: -52px; transition: all 0.7s cubic-bezier(0.5, 0, 0.19, 1); }
#logo.show { top: 0;  }


#logo img { width: 180px; }
#logo a { border: none; }

header { width: 100%; height: 100%; background: url(../_img/headerbild.jpg) no-repeat center; background-size: cover; overflow: hidden; opacity: 0.0; visibility: hidden; transition: 1000ms 0ms; }
header.show { opacity: 1.0; visibility: visible; }


.headline { background: rgba(255,255,255,0.9); padding: 30px 70px; font-size: 40px; position: absolute; left: 40px; bottom: 40px; -webkit-transform: translateX(712px); transform: translateX(712px); transition: all 0.7s 0.3s cubic-bezier(0.5, 0, 0.19, 1); }
.headline.show { -webkit-transform: translateX(0px); transform: translateX(0px); }


main { width: 100%; z-index: 10; opacity: 0.0; visibility: hidden; -webkit-transform: translateY(100px); transform: translateY(100px); transition: 800ms 200ms; }
main.show { opacity: 1.0; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); }
.content { padding: 80px 0; }

.mainnav { float: left; }
.mainnav ul { display: inline-block; margin: 40px 0 0 0; padding: 0; }
.mainnav ul li { list-style: none; float: left; }
.mainnav ul li a { font-size: 26px; display: block; text-transform: uppercase; padding: 0 20px 0 0; border: none; font-weight: 100; }
.mainnav ul li:hover a { color: #ed1556; }
.mainnav ul li.aktiv a { color: #ed1556; }

.subnav { float: right; }
.subnav ul { display: inline-block; margin: 42px 0 0 0; padding: 0; }
.subnav ul li { list-style: none; float: left; }
.subnav ul li a { font-size: 15px; display: block; text-transform: uppercase; padding: 0 0 0 20px; border: none; font-weight: 700; }
.subnav ul li:hover a { color: #ed1556; }
.subnav ul li.aktiv a { color: #ed1556; }

/*.menuicon { display: none; position: absolute; right: 40px; top: 22px; }*/

/* --------------------------------------------------------------------------- Startseite ------------------------------------------------------------------------------------------ */

/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.intro { text-align: center; font-size: 24px; line-height: 32px; font-weight: 300; margin: 0 0 100px 0; }
.intro h2 { font-weight: 300; font-size: 34px; line-height: 42px; }
.intro p { padding: 0 120px; }


.teasercenter { text-align: center; }
.startteaser { width: 30%;  padding: 0 20px; margin: 0 0 80px 0; display: inline-block; text-align: left; }
.startteaser h2 { background: #b7d267; padding: 10px; margin: 0 0 25px 0; color: #FFF; position: relative;  border-radius: 3px; line-height: 1.2em; }
.startteaser .pfeil { position: absolute; bottom: -12px; width: 0; height: 0; border-style: solid; border-width: 12px 12px 0 12px; border-color: #b7d267 transparent transparent transparent; }

.teasercontent { height: 168px; }
.preis { border-top: solid 1px #b7d267; border-bottom: solid 3px #b7d267; color: #b7d267; font-weight: 100; font-size: 60px; padding: 30px 0 2px 0; margin: 0 0 20px 0;  }
.preis span { font-weight: 400; font-size: 14px; }
.datenmenge { color: #b7d267; margin: 0 0 2px 0; }
.datenmenge span { color: #b7d267; font-size: 18px; font-weight: 700; }

.hardware { height: 385px; background: #b7d267; }
.hardware_zusatz { height: 240px; background: #f3f3f3; }
.hardware_zusatz img { width: auto; margin: -40px 0 0 40px; }


.hardware .span50 { height: 385px; }
.hardwarebeschreib { border-left: solid 1px rgba(255,255,255,0.4); padding: 0 0 0 20px; color: #FFF; font-size: 16px; line-height: 26px; height: 335px; position: absolute; left: 20px; bottom: 0; }
.hardwarebeschreib h2 { font-size: 30px; color: #FFF; font-weight: 700px; margin: 0 0 20px 0; }
.hardwarebeschreib .preis { color: #FFF; font-size: 32px; padding: 20px 0 3px 0; line-height: 14px; font-weight: 400; border-top: solid 1px #fff; border-bottom: solid 3px #fff; display: inline-block; }

.hardware_bg { height: 240px; width: 240px; border-radius: 50%; box-shadow: 0px -120px 240px #e3f8a6; position: absolute; bottom: -240px; left: 50%; margin: 0 0 0 -120px; }

.scrollpfeil { position: absolute; left: 50%; bottom: 21px; margin: 0 0 0 -9px; animation: pfeilscroll 500ms alternate infinite; -webkit-animation: pfeilscroll 500ms alternate infinite; opacity: 0.0; visibility: hidden; -webkit-transform: translateY(-20px); transform: translateY(-20px); transition: all 0.7s 1s cubic-bezier(0.5, 0, 0.19, 1); }
.scrollpfeil.show { opacity: 1.0; visibility: visible; -webkit-transform: translateY(0px); transform: translateY(0px); }

.hardware_mobil { display: none; background: #f3f3f3; padding: 40px 0; font-size: 16px; line-height: 28px; }
.hardware_mobil h2 { font-size: 30px; color: #b7d267; font-weight: 700px; margin: 0 0 20px 0; }
.hardware_mobil .preis { color: #646a6b; font-size: 40px; line-height: 14px; padding: 20px 0 3px 0; font-weight: 300; border-top: solid 1px #646a6b; border-bottom: solid 3px #646a6b; display: inline-block; }

.intro.setup { margin: 0 0 0px 0; text-align: left; font-size: 20px; line-height: 24px; font-weight: 300; padding: 0 20px; }
.intro.setup p { padding: 0; }
.intro.setup span { color: #b7d267; font-size: 36px; margin: 0 0 0 -16px; }
.intro.setup span.setuppreis { color: #b7d267; font-size: 20px; font-weight: 500; margin: 0; }
.intro.setup span.setuppreis span { font-size: 15px; margin: 0; }

/* ----------------------------------------------------------------------------- Teaser -------------------------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */



/* ----------------------------------------------------------------------------- Listen -------------------------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */



/* ----------------------------------------------------------------------------- Detail -------------------------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

a.button { display: block; width: 100%; text-align: center; background: #f3f3f3; padding: 7px 0; border-radius: 3px; color: #b7d267; font-weight: 500; cursor: pointer; font-size: 16px; }
a.button:hover { background: #707070; color: #FFF; }


/* ---------------------------------------------------------------------------- Animation -------------------------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@keyframes pfeilscroll
{
0% { bottom: 21px; }
100% { bottom: 12px; }
}

@-webkit-keyframes pfeilscroll
{
0% { bottom: 21px; }
100% { bottom: 12px; }
}

/* --------------------------------------------------------------------------- Media Queries --------------------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


@media only screen and (max-width: 1140px) {
	/*.menuicon { display: block; }*/
	.startteaser { width: 50%; margin: 0 0 80px 0; float: left; }
	.teasercontent { height: 100px; }
	.hardwarebeschreib { left: 20px; }
	.teasercenter { text-align: left; }
	
	.hardware_zusatz img { display: block; margin: -30px auto 0; }
	
	.intro { text-align: left; font-size: 24px; line-height: 32px; padding: 0 20px; margin: 0 0 100px 0; }
	.intro h2 { font-size: 34px; line-height: 42px; }
	.intro p { padding: 0 40px 0 0; }
}

@media only screen and (max-width: 980px) {
	.hardware { height: 415px; }
	.hardware .span50 { height: 415px; }
	.hardwarebeschreib { height: 365px; }
}

@media only screen and (max-width: 900px) {
	.hardware_zusatz img { width: 80%; }
	.teasercontent { height: 140px; }
}

@media only screen and (max-width: 760px) {
	.width1200 { padding: 0 20px; }
	.hardwarebeschreib { left: 20px; }
	.hardware_zusatz img { width: 70%; }
	
	.headline { padding: 30px 40px; font-size: 40px; left: 30px; }
	h1 { font-size: 40px; line-height: 50px; }
	h1 span { font-size: 20px; line-height: 50px; }

}

@media only screen and (max-width: 640px) {
	.width1200 { padding: 0 15px; }
	#logo { left: 15px; }
	#logo img { width: 120px; }
	.startteaser { width: 100%; padding: 0px; }
	
	.content { padding: 60px 0 60px; }
	.teasercontent { height: auto; padding: 0 0 20px 0; }
	
	.hardware { display: none; }
	.hardware_zusatz { display: none; }
	.hardware_mobil { display: block; }
	
	.headline { padding: 30px 20px; font-size: 60px; left: 15px; right: 15px; bottom: 50px; }
	h1 { font-size: 40px; line-height: 50px; }
	h1 span { font-size: 18px; line-height: 38px; }
	
	.intro { text-align: left; font-size: 18px; line-height: 26px; padding: 0px; margin: 0 0 60px 0; }
	.intro h2 { font-size: 20px; line-height: 29px; }
	.intro p { padding: 0 0px 0 0; }
	
	.intro.setup { padding: 0 15px; font-size: 16px; line-height: 20px; }
	.intro.setup span { font-size: 36px; }
	.intro.setup span.setuppreis { font-size: 16px; }
	.intro.setup span.setuppreis span { font-size: 12px; }
}

@media only screen and (max-width: 470px) {
	h1 { font-size: 26px; line-height: 36px; }
	h1 span { font-size: 14px; line-height: 34px; }
}

@media only screen and (max-width: 640px) and (orientation : landscape) {
	html { /* -webkit-text-size-adjust: none; */ }
}

/* ------------------------------------------------------------------------------ Print -------------------------------------------------------------------------------------------- */

@media print {
	#main { width: 100%; }
}