/*
         Landingpage CSS
         Gestaltung: Kreativagentur Freudenschrei UG
*/

/* Einstellungen */
:root {
         --main-font: 'Lexend Deca';

         /* Links */
         --link-color: #27debe;
         --link-color-dark: #13252f;

         --main-color: #27debe;
         --main-color-dark: #009d82;
         --main-color-light: #effdfa;

         --bg-color: #DFDFDF;
         --bg-color-white: #ffffff;
         --bg-color-black: #000000;
         --bg-color-grey: #EFEFEF;
         --bg-color-dark: rgba(0,0,0,0.2);
         --bg-color-light: rgba(255,255,255,0.1);

         --font-color: #13252f;
         --font-color-light: #74919e;
         --font-color-dark: #455a63;
}



/* Links */
a:link, a:visited {
         font-family: var(--main-font);
         font-size: 1.0em;
         color: var(--link-color);
         font-weight: normal;
         text-decoration:underline;
         transition: all 0.3s ease-in-out;
}

a:hover {
         font-weight: normal;
         color: var(--link-color-dark);
         text-decoration:none;
}

a.button:link, a.button:visited, .button {
         display: inline-block;
         padding: 8px 20px 8px 20px;
         margin: 0px 0px;

         background-image: linear-gradient(to bottom, var(--main-color) 0%, var(--main-color) 100%);
         background-repeat: repeat;
         background-position: center center;

         text-align: center;
         font-size: 1.1em;
         font-weight: 600;
         text-shadow: rgba(0,0,0,0.2) 2px 2px 1px;
         color: #FFFFFF;
         text-decoration:none;

         -webkit-border-radius: 50px;
         -moz-border-radius: 50px;
         border-radius: 50px;

         border-bottom: 0px var(--main-color) solid;

         -webkit-box-shadow: 0px 15px 10px -10px rgba(0,0,0,0.0);
         -moz-box-shadow: 0px 15px 10px -10px rgba(0,0,0,0.0);
         box-shadow: 0px 15px 10px -10px rgba(0,0,0,0.0);

         cursor: pointer;
         transition: all 0.3s ease-in-out;
}

a.button:hover, .button:hover {
         color: #FFFFFF;
         background-image: linear-gradient(to bottom, var(--main-color) 0%, var(--main-color-dark) 100%);
         text-decoration:none;
}


/* Überschriften */
h1 {
         font-family: var(--main-font);
         font-size: 2.0em;
         font-weight: bold;
         text-align: center;
         color: var(--font-color);
         margin: 10px 0px 10px 0px;
         padding: 0px 0px 0px 0px;
         vertical-align:top;
         line-height: 1.3em;
}

h2 {
         font-family: var(--main-font);
         font-size: 1.6em;
         font-weight: 600;
         text-align:center;
         color:var(--font-color-dark);
         margin: 10px 0px 10px 0px;
         padding: 0px 0px 0px 0px;
         vertical-align:top;
         text-decoration:none;
         line-height: 1.3em;
}

h3 {
         font-family: var(--main-font);
         font-size: 1.4em;
         font-weight: 600;
         text-align:left;
         color:var(--font-color-dark);
         margin: 0px 0px 10px 0px;
         padding: 0px 0px 0px 0px;
         vertical-align:top;
         line-height: 1.3em;
}

h4 {
         font-family: var(--main-font);
         font-size: 2.2em;
         font-weight: 900;
         text-align:center;
         color: var(--font-color-light);
         margin: 0px 0px 10px 0px;
         padding: 10px 0px 10px 0px;
         vertical-align:top;
         text-transform: uppercase;
         line-height: 1.3em;
}

h5 {
         font-family: var(--main-font);
         font-size: 1.1em;
         font-weight: normal;
         text-align:left;
         color:var(--font-color);

         margin: 0px 0px 10px 0px;
         padding: 5px 20px 5px 20px;

         vertical-align:top;
         background: #FFFFFF;
         line-height: 1.3em;

         border: 2px var(--font-color) solid;
         -webkit-border-radius: 50px;
         -moz-border-radius: 50px;
         border-radius: 50px;
}

h1 span, h2, span, h3 span {
         display: block;
         font-size: 20px;
         color: var(--main-color);
         text-transform: uppercase;
         font-weight: normal;
}


/* Standarts */
body {
         background-color: var(--bg-color-white);
         background-image: url(../images/bg.png);
         width: 100%;
         height: 100%;
         margin: 0;
         padding: 0;
}

body, td, div {
         font-family: var(--main-font);
         font-size: 1.0em;
         color: var(--font-color);
         vertical-align:top;
         text-align:left;
}

.l, .links       { float:left; }
.r, .rechts       { float:right; }
.a_l     { text-align: left; }
.a_c     { text-align: center; }
.a_r     { text-align: right; }

img      { border: 0px; }
.clear   { clear:both; line-height:0.0em; height: 0px; display: block; background-color: #FFDF00; }
.pad     { padding: 10px; }
.pad_top { padding: 40px 0px !important; }

.font-small   { font-size: 0.8em !important; }
.font-big     { font-size: 1.2em !important; }
.font-bigger  { font-size: 1.5em !important; }

.font_main { font-family: var(--main-font); }
.font-color { color: var(--font-color); }
.font-color-dark { color: var(--font-color-light); }
.font-color-light { color: var(--font-color-dark); }

.block   { display:block; }
.inline-block   { display:inline-block; }
.inline   { display:inline; }

.w50     { width: calc(100% / 2); }
.w33     { width: calc(100% / 3); }
.w25     { width: calc(100% / 4); }
.w50.pad { width: calc((100% / 2) - 20px); }
.w33.pad     { width: calc((100% / 3) - 20px); }
.w25.pad     { width: calc((100% / 4) - 20px); }

.bg-white     { background-color: var(--bg-color-white); }
.bg-black     { background-color: var(--bg-color-black); }
.bg-grey     { background-color: var(--bg-color-grey); }
.bg-light     { background-color: var(--bg-color-light); }
.bg-dark     { background-color: var(--bg-color-dark); }
.bg-color     { background-color: var(--main-color); }
.bg-color-light     { background-color: var(--main-color-light); }
.bg-color-dark     { background-color: var(--main-color-dark); }

.border { border: 1px #000000 solid; }

.mail { direction: rtl; unicode-bidi: bidi-override; }

hr, hr.white { display: block; width: 100%; border: 0px; border-top: 5px var(--bg-color-white) dotted; width: 100%; margin: 15px 0px 10px 0px; padding: 0px; }
hr.dark { border-top: 5px var(--bg-color-white) dotted; }
hr.color { border-top: 5px var(--main-color) solid; }


ul { margin: 10px 0px; padding: 0px; }
li { display: inline-block; width: calc(100% / 3 - 10px - 60px - 4px); border: 2px var(--main-color) solid; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; margin: 5px 10px 5px 0px; padding: 10px 10px 10px 50px;
background: transparent url(../images/dot_hover.png) 6px center no-repeat; background-size: 34px; text-align: left; }
li.grey { border: 2px #000000 solid; color: #000000; background: transparent url(../images/dot.png) 6px center no-repeat; background-size: 34px; opacity: 0.4; }

/* Seite */
#wrapper { width: 100%; margin: 0px; padding: 0px; }
.in { width: calc(100% - 40px); max-width: 1200px; margin: 0px auto; padding: 0px 20px; border: 0px solid #000000; }

#header { display: block; width: 100%; height: 900px; background: transparent url(../images/header2.png) center top no-repeat; }
#header.ohne { display: block; width: 100%; height: 900px; background: transparent url(../images/header.png) center top no-repeat; }
#header.small { display: block; width: 100%; height: 400px; background: transparent url(../images/header_mobile.png) center top no-repeat; }
#header .hero { display: block; width: calc(100% - 30px); max-height: 400px; padding: 380px 0px 0px 30px; }
#header .hero .headline { display: block; width: 50% !important; font-size: 1.2em; line-height: 1.2em; vertical-align: middle; border: 0px #000000 solid; }

#header .hero .headline a.button:link, #header .hero .headline a.button:visited, #header .hero .headline .button { padding: 20px 20px 20px 20px; background-image: none; background: #FFFFFF; font-size: 1.1em; text-shadow: rgba(0,0,0,0.0) 2px 2px 1px; color: var(--font-color); -webkit-box-shadow: 0px 15px 10px -10px rgba(0,0,0,0.0); -moz-box-shadow: 0px 15px 10px -10px rgba(0,0,0,0.0); box-shadow: 0px 15px 10px -10px rgba(0,0,0,0.0); }
#header .hero .headline a.button:hover, #header .hero .headline .button:hover { color: #FFFFFF; background: var(--font-color); }


#site { padding: 20px 0px 0px 0px; min-height: 50px; font-size: 1.2em; }

#footer { background: var(--bg-color-white); width: 100%; padding: 0px 0px 0px 0px; margin: 0px 0px; }
#footer .info { width: calc(100% - 40px); padding: 20px; background: var(--main-color); text-align: center; }
#footer .info a, #footer .info a:link, #footer .info a:visited { display: inline-block; padding: 5px 15px; color: var(--font-color); font-size: 1.1em; text-decoration: none; }
#footer .info a:hover { font-weight: normal; color: var(--font-color-dark); }
#footer .imprint { padding: 20px 0px; background: var(--bg-color-white); text-align: center; color: var(--font-color-light); }


/* Content */
.box { display: block; margin: 10px 0px 10px 0px; padding: 10px 10px 10px 10px; background: #FFFFFF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.10); -moz-box-shadow:    0px 0px 3px 0px rgba(0, 0, 0, 0.10); box-shadow:         0px 0px 3px 0px rgba(0, 0, 0, 0.10); }

.content { line-height: 1.5em; }
.content b { text-decoration-line: underline; text-decoration-thickness: 5px; text-decoration-color: var(--main-color); }
.content img, .img_left img { float: left; margin: 0px 25px 25px 0px; }
.img_right img { float: right; margin: 0px 0px 25px 25px; }


.refs b { text-align: left; display: block; font-size: 1.1em; margin: 30px 0px 20px 0px; }
.refs img { width: calc(40% - 50px); max-width: 400px; height: auto; }
.refs .img_left img { float: left; margin-right: 50px !important; }
.refs .img_right img { float: right; margin-left: 50px; }

/* Status */
#status { display: block; z-index: 100; position:absolute; top: 0; width: calc(100% - 20px); padding: 10px 10px; background-color: #FFFFFF; -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.50); -moz-box-shadow:    0px 0px 6px 0px rgba(0, 0, 0, 0.50); box-shadow:         0px 0px 6px 0px rgba(0, 0, 0, 0.50); text-align: center; color: var(--font-color-dark); text-transform: uppercase; font-size: 1.0em; text-shadow: 1px 1px 1px rgba(0,0,0,0.2); cursor: pointer; }

#status.green {  color: #FFFFFF;  background-color: #29d355; }
#status.orange {  color: #FFFFFF;  background-color: #fb9c14; }
#status.red {  color: #FFFFFF;  background-color: #cc163d; }

/* FAQ */
#faq .item { position:relative; padding-bottom:10px; }
#faq .item h5 { display: block; cursor: pointer; width: calc(100% - 60px - 2px); padding: 5px 40px 5px 20px; margin: 0px; background: transparent url(../images/faq_open.png) no-repeat calc(100% - 20px) center; line-height: 32px; }
#faq .item h5:hover { background-color: #FFFFFF; }
#faq .item h5.show { background: transparent url(../images/faq_close.png) no-repeat calc(100% - 20px) center; }
#faq .item .faqtext { display: none; position: relative; background: rgba(40,220,190,0.3); width: calc(100% - 40px); padding: 10px 20px; margin-bottom: 10px; margin-top: 10px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; font-size: 0.9em; font-weight: 200 !important; }
#faq .item.show .faqtext { display: block; }
#faq .item a { color: var(--font-color-dark); }

/* Sonstiges */
#w { display: none; z-index: 100; left: 0; top: 0px; padding: 5px 10px; color: #FFFFFF; position: fixed; background: #000000; }


/* Referenzen*/
#referenzen  { display: none; z-index: 100; height: 100vh; left: 0; top: 0px; padding: 5px 10px; color: #FFFFFF; position: fixed; background-color: var(--main-color); }
#referenzen .item { display: table-cell; text-align: center; vertical-align: middle; width: 100vw; height: 100vh; }
#referenzen .item img  { width: auto; max-height: 80vh; -webkit-box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.50); -moz-box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.50); box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.50); }
#referenzen .item video  { height: 80%; width: auto; -webkit-box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.50); -moz-box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.50); box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.50); }
#referenzen .navi span { display: block; position: absolute; z-index: 101; background-color: #FFFFFF; width: 48px; height: 48px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; background-size: 80%; background-repeat: no-repeat; background-position: center center; opacity: 0.5; cursor: pointer; }
#referenzen .navi span:hover { opacity: 1.0; }
#referenzen .navi span.p { left: 10px; top: calc(50vh - 25px); background-image: url(../images/arrow_l_2.png); }
#referenzen .navi span.n { right: 10px; top: calc(50vh - 25px); background-image: url(../images/arrow_r_2.png); }
#referenzen .navi span.c { right: 10px; top: 10px; background-image: url(../images/icon_close.png); }

.noScroll { overflow: hidden; position: fixed; }


/* Formulare */
input[type="text"], input[type="number"], input[type="password"], select, textarea {
         width: calc(100% - 20px);
         background: #ffffff;

         font-family: 'Lexend Deca';
         font-size: 1.0em;
         font-weight: 200;
         color: #000000;

         padding: 6px 12px;
         margin: 2px 0px;

         border: transparent 0px solid;
         -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;

                 -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
        -moz-box-shadow:    0px 0px 10px 0px rgba(0, 0, 0, 0.1);
        box-shadow:         0px 0px 10px 0px rgba(0, 0, 0, 0.1);

}

select {
         width: calc(100% - 26px);
         padding-right: 25px;
         -webkit-appearance: none;
           -moz-appearance: none;
           appearance: none;
           background: #f6f6f6 url(../images/select_arrow2.png) center right no-repeat !important;
}
select::-ms-expand { display: none; }
input.error, select.error, textarea.error, .checkbox_error, .datenschutz.error, .kontakt_ok.error { border: #DF0000 2px solid !important; }

input[type="submit"] {
        background: var(--main-color);
        background-image: linear-gradient(to bottom, var(--main-color) 0%, var(--main-color-dark) 100%);


         font-family: 'Lexend Deca';
         color: #FFFFFF;
         font-size: 1.1em;
         font-weight: normal;
         text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
         padding: 6px 15px 6px 15px;

         cursor: pointer;

         border: #FFFFFF 0px solid;
         -webkit-border-radius: 50px;
         -moz-border-radius: 50px;
         border-radius: 50px;

         -webkit-box-shadow: inset 0px 0px 6px 0px rgba(0, 0, 0, 0.0);
        -moz-box-shadow:    inset 0px 0px 6px 0px rgba(0, 0, 0, 0.0);
        box-shadow:         inset 0px 0px 6px 0px rgba(0, 0, 0, 0.0);
}

input[type="submit"]:hover {
        background-image: linear-gradient(to bottom, var(--main-color-dark) 0%, var(--main-color) 100%);
}