/*
         ==============================================================
         Landingpage V2.1 CSS
         Gestaltung / Programmierung: Kreativagentur Freudenschrei UG
         ==============================================================
         Grundfarben: #6a9b24 (Grün), #7ec01f (Grün hell), #f39500 (Orange), #fa6918 (Orange dunkel), #f2f2f2 (Grau Hell)
*/

/* Einstellungen */
:root {
         --main-font: 'Roboto';

         --main-color: #4e7950;
         --main-color-light: #90b292;
         --main-color-dark: #3c613e;

         --second-color: #f38400;
         --second-color-light: #f38400;
         --second-color-dark: #f38400;

         --bg-color: #f9f9f8;
         --bg-color2: #dfe3dd;
         --bg-color3: #90b292;
         --bg-dark: #2b2d2c;

         --font-color: #2b2d2c;
         --font-color2: #4e7950;
         --font-color-hightlight: #70a072;
         --font-color-light: #FFFFFF;
         --font-color-dark: #000000;

         --max-width: 1200px;
}


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

a:hover {
         color: #000000;
         text-decoration:none;
}

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

         background: var(--main-color) url(../images/icon_dot_next.png) calc(100% - 10px) center no-repeat;
         background-size: auto 70%;

         font-family: var(--main-font);
         text-align: left;
         font-size: 1.2em;
         font-weight: 600;
         text-shadow: rgba(0,0,0,0.0) 2px 2px 1px;
         color: #FFFFFF;
         text-decoration:none;

         -webkit-border-radius: 6px;
         -moz-border-radius: 6px;
         border-radius: 6px;
}

a.button:hover {
         font-family: var(--main-font);
         color: #FFFFFF;
         background-color: var(--second-color-light);
         text-decoration:none;
}


/* Überschriften */
h1 {
         font-size: 2.0em;
         font-weight: 500;
         text-align: left;
         color: var(--font-color);
}

h2 {
         font-size: 1.8em;
         font-weight: 500;
         text-align: left;
         color: var(--font-color);
}

h3 {
         font-size: 1.6em;
         font-weight: 400;
         text-align:left;
         color: var(--font-color);
}

h4 {
         font-size: 1.5em;
         font-weight: 400;
         text-align:left;
         color: var(--font-color);
}

h1, h2, h3, h4, h5 { font-family: var(--main-font); letter-spacing: -1px; vertical-align: top; text-decoration:none; margin: 10px 0px 10px 0px; padding: 0px 0px 0px 0px; }
h1 span, h2 span, h3 span, h4 span, h5 span { color: var(--main-color-light) !important; }


/* Standarts */
body {
         background:#f9f9f8;
         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       { float:left; }
.r       { 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_small     { padding: 2px 5px; }
.pad     { padding: 10px; }
.pad_top { padding: 40px 0px !important; }

.white   { color: #FFFFFF; }
.black   { color: #000000; }

.f_smaller   { font-size: 0.7em !important; }
.f_small   { font-size: 0.8em !important; }
.f_big     { font-size: 1.2em !important; }
.f_bigger  { font-size: 1.4em !important; }

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

.hide    { display: none; }
.show    { display: block !important; }
.none    { opacity: 0.0; filter: alpha(opacity=0); }

.round_big { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; }
.round { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }

.shadow { -webkit-box-shadow: 0px 0px 15px 0px rgba(50, 70, 50, 0.35); -moz-box-shadow: 0px 0px 15px 0px rgba(50, 70, 50, 0.35); box-shadow: 0px 0px 15px 0px rgba(50, 70, 50, 0.35); }
.shadow_dark { -webkit-box-shadow: 0px 0px 15px 0px rgba(50, 70, 50, 0.65); -moz-box-shadow: 0px 0px 15px 0px rgba(50, 70, 50, 0.65); box-shadow: 0px 0px 15px 0px rgba(50, 70, 50, 0.65); }

.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); }

.bg1     { background-color: var(--bg-color); }
.bg2     { background-color: var(--bg-color2); }
.bg3     { background-color: var(--main-color); }
.bg4     { background-color: var(--second-color); }

.dot_check { display: inline-block; background: transparent url(../images/check.png) left center no-repeat; padding: 2px 10px 0px 30px; }

/* Tabellen */
td:nth-child(odd) { background: var(--bg-color); color: var(--font-color); padding: 3px 10px; border-bottom: 1px rgba(0,0,0,0.05) solid; border-top: 1px rgba(255,255,255,0.75) solid; }
td:nth-child(even) { background: var(--bg-color2); color: var(--font-color); padding: 3px 10px; border-bottom: 1px rgba(0,0,0,0.05) solid; border-top: 1px rgba(255,255,255,0.75) solid; }
td.head { background: var(--main-color); color: var(--font-color-light); padding: 5px 10px; font-weight: bold; font-size: 1.1em; }
td.head2 { background: var(--second-color); color: var(--font-color-light); padding: 5px 10px; font-weight: bold; font-size: 1.0em; }


.badge {
         display: inline-block;
         padding: 4px 15px;
         margin: 5px 0px;
         background: transparent url(../images/bg_gold2.png) top right no-repeat;
         background-size: 100% auto;

         font-size: 1.1em;
         color: var(--font-color);
         text-shadow: 1px 1px 0px rgba(255,255,255,0.3);
         -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;
}

span {  color: var(--main-color); }

/* Seite */
#wrapper {
         width: 100%;
         margin: 0px;
         padding: 0px;
         min-width: 320px;
}

.in {
         width: var(--max-width);
         margin: 0px auto;
         padding: 0px 0px;
}

#header {
         display: block;
         width: 100%;
         height: auto;
}

#header .logo {
         display: block;
         float: left;
         width: 320px;
         height: auto;
         margin: 20px 0px;
         text-align: left;
}
#header .logo a { text-decoration: none; }

#header .logo img {
         width: calc(100% - 20px);
         max-width: 320px;
         height: auto;
}

#header .navi {
         display: block;
         float: right;
         width: calc(100% - 320px);
         height: auto;
         margin: 30px 0px;
         text-align: right;
}

#header .navi a {
         display: inline-block;
         padding: 3px 10px;
         margin-left: 5px;
         font-size: 1.4em;
         color: var(--font-color);
         font-weight: 400;
         text-decoration: none;
         -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;
}

#header .navi a:hover, #header .navi a.active { background-color: var(--bg-color2); color: var(--main-color);  }

#hero {
         display: block;
         width: 100%;
         height: 350px;
         background: transparent url(../images/header.jpg) top right no-repeat;
         border: 0px #000 solid;
}
#hero .info { display: block; width: calc(50% - 50px); padding: 25px; }
#hero .info .badge { font-size: 1.4em; color: var(--font-color-dark); margin-bottom: 20px; }
#hero .info h1 { font-size: 2.8em; color: var(--font-color); font-weight: 600; }
#hero img { float: right; }
#hero .info ul { margin: 10px 0px 0px 0px; padding: 0px; }
#hero .info ul li { background: transparent url(../images/icon_dot.png) center left no-repeat; background-size: 30px; margin: 10px 0px; padding: 0px 0px 0px 50px; list-style: none; font-size: 1.5em; color: var(--main-color-dark); font-weight: 600; }

#hero_header {
         display: block;
         width: 100%;
         height: 200px;
         background: transparent url(../images/hero_header.jpg) top right no-repeat;
}
#hero_header.testing { background-image: url(../images/hero_header_testing.jpg);  }

#site {
         padding: 0px 0px 0px 0px;
         min-height: 150px;
         font-size: 1.0em;
}

/* Footer */
#footer { display: block; background-color: var(--bg-dark); width: 100%; padding: 20px 0px 20px 0px; margin: 0px 0px 0px 0px; font-family: var(--main-font); font-size: 1.0em; color: var(--font-color-light); }
#footer a { color: var(--font-color-light); text-decoration: none; font-weight: bold; }
#footer a:hover { color: var(--main-color); text-decoration: none; }

#footer .logo { float: left; display: block; width: 300px; margin: 0px; padding: 10px 30px 10px 20px; border-right: 3px var(--main-color) solid; text-align: center; }
#footer .logo span img { width: 100%; height: auto; }
#footer .info { float: right; display: block; width: calc(100% - 350px - 3px - 0px - 50px); margin: 0px; padding: 10px 0px 10px 50px; color: var(--font-color-light); font-size: 0.9em; }
#footer .info span { color: var(--main-color-light); }

/* Content Boxen */
.box {
         display: block;
         width: calc(100% - 30px);
         margin: 10px 0px 10px 0px;
         padding: 10px 15px 10px 15px;
         background: #FFFFFF;

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

         -webkit-box-shadow: 0px 0px 15px 0px rgba(50, 70, 50, 0.35);
         -moz-box-shadow:    0px 0px 15px 0px rgba(50, 70, 50, 0.35);
         box-shadow:         0px 0px 15px 0px rgba(50, 70, 50, 0.35);
}

/* Content */
#experts { margin-top: 40px; background: transparent url(../images/bg_green2.jpg) 0px 0px; }
#experts img { margin-top: -35px !important; position: relative; float: left; }
#experts .box { background-color: #fbfbfb; margin-top: -25px !important; margin-bottom: 30px; position: relative; float: left; }
#experts .info { float: right; display: block; width: calc(100% - 190px); font-size: 1.25em; }
#experts .info b { display: block; color: var(--main-color); margin-bottom: 10px; font-size: 1.3em; }
#experts .info .updated {
         display: inline-block;
         padding: 4px 10px 4px 35px;
         margin: 20px 0px 0px 0px;
         background: var(--main-color) url(../images/icon_check.png) 5px center no-repeat;
         background-size: 20px;

         font-size: 0.8em;
         color: var(--font-color-light);
         -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
}

#experts #hilfe_frage_experts { display: inline-block; cursor: pointer; padding: 1px 8px; }
#experts #hilfe_info_experts { display: none; margin-top: 10px; font-size: 0.9em; }

#testsieger { background: transparent url(../images/bg_green.jpg) 0px 0px; padding: 20px 0px; }
#testsieger h2 { text-align: center; color: var(--font-color-light); font-size: 2.2em; text-shadow: 1px 1px 5px rgba(0,0,0,0.3); }
#testsieger h3 { text-align: center; color: var(--font-color); font-size: 1.6em; }

#testsieger .anzeige { display: none; text-align: center; font-weight: bold; padding: 5px 0px; }
#testsieger .anzeige b { display: inline-block; padding: 4px 10px 2px 10px; background-color: rgba(0,0,0,0.1); font-size: 1.4em; line-height: 0.8em; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }

#testsieger .items { display: table; width: 100%; max-width: var(--max-width); border-collapse:separate; border-spacing:20px; }
#testsieger .items .item { display: table-cell; background-color: #FFFFFF; width: calc(100% / 5) !important; padding: 0px 0px; border: 2px rgba(255,255,255,0.2) solid;
-webkit-box-shadow: 0px 0px 15px 0px rgba(50, 70, 50, 0.35), inset 0px 0px 25px 0px rgba(50, 70, 50, 0.25); -moz-box-shadow: 0px 0px 15px 0px rgba(50, 70, 50, 0.35), inset 0px 0px 25px 0px rgba(50, 70, 50, 0.25); box-shadow: 0px 0px 15px 0px rgba(50, 70, 50, 0.35), inset 0px 0px 25px 0px rgba(50, 70, 50, 0.25); }

#testsieger .items .item .head { display: block;background: #D7DED8; background: linear-gradient(0deg,rgba(215, 222, 216, 1) 0%, rgba(233, 242, 235, 1) 35%); height: 30px; text-align: center; font-size: 1.5em; font-weight: bold; color: var(--main-color); padding: 5px 10px; }
#testsieger .items .item .title { display: block; height: 40px; padding: 10px 10px; text-align: center; font-size: 0.9em; font-weight: bold; padding: 10px 0px; overflow: hidden; }
#testsieger .items .item .title span { display: block; text-align: center; font-size: 0.9em; font-weight: 400; color: var(--font-color); }
#testsieger .items .item .product, #testsieger .items .item .voting { text-align: center; padding-bottom: 10px; }
#testsieger .items .item .product img { max-width: 350px; width: 80%; height: auto; }
#testsieger .items .item .voting img { width: 80%; max-width: 150px; height: auto; }
#testsieger .items .item div[class^="usp_"] { padding: 10px 10px; border-bottom: 1px var(--bg-color2) solid; text-align: center; height: 20px; overflow: hidden; }
#testsieger .items .item div[class^="usp_"] span { display: none; padding: 2px 10px; font-size: 0.7em; text-align: center; height: 12px; overflow: hidden; }
#testsieger .items .item .usp_5 { border-bottom: 0px var(--bg-color2) solid !important; }

#testsieger .items .item .cta { padding: 5px 10px 10px 10px; }
#testsieger .items .item .cta a { display: block; padding: 5px 10px 5px 10px; margin: 2px 0px; background-color: var(--main-color-light); text-align: center; font-size: 1.1em; font-weight: 600; text-shadow: rgba(0,0,0,0.0) 2px 2px 1px; color: #FFFFFF; text-decoration:none; text-shadow: 1px 1px 0px rgba(0,0,0,0.3); border: 1px rgba(0,0,0,0.05) solid; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
#testsieger .items .item .cta a:hover { color: #FFFFFF; background-color: var(--main-color-dark) !important; text-decoration:none; }
#testsieger .items .item.highlight { border: 3px #f1e0b0 solid; -webkit-box-shadow: 0px 0px 15px 0px rgba(50, 70, 50, 0.35), inset 0px 0px 35px 0px #f1e0b0; -moz-box-shadow: 0px 0px 15px 0px rgba(50, 70, 50, 0.35), inset 0px 0px 35px 0px #f1e0b0; box-shadow: 0px 0px 15px 0px rgba(50, 70, 50, 0.35), inset 0px 0px 35px 0px #f1e0b0; }
#testsieger .items .item.highlight .head { background: transparent url(../images/bg_gold.png) top right no-repeat; background-size: 100% auto; color: var(--font-color); text-shadow: 1px 1px 0px rgba(255,255,255,0.3); }
#testsieger .items .item.highlight .cta a { background: transparent url(../images/bg_gold2.png) center center no-repeat; background-size: 100% auto; font-size: 1.2em; color: var(--font-color); text-shadow: 1px 1px 0px rgba(255,255,255,0.3); }
#testsieger .items .item.highlight .cta a:hover { background-size: 125% auto !important; }

#testsieger_info { position: absolute; margin-top: -295px; margin-left: calc(50% - (var(--max-width) / 2) - 180px); display: block; width: 180px; height: auto; }
#testsieger_info div[class^="usp_"] { padding: 10px 20px 10px 0px; height: 19px; overflow: hidden; border-bottom: 2px var(--font-color) dotted; text-align: left; color: var(--font-color); font-weight: bold; }
#testsieger_info div[class^="usp_"]:last-child { border-bottom: 0px var(--font-color) dotted; height: 40px; }

#testsieger .items .item .usp_2 { height: 35px !important; }
#testsieger_info .usp_2 { height: 35px !important; }

/* Ranking */
#ranking { margin: 40px auto 40px auto; }
#ranking h2 { color: var(--font-color); }
#ranking h3 { color: var(--font-color); }

#ranking .item { display: block; background-color: #FFFFFF; width: calc(100% - 10px - 0px); padding: 0px 0px; margin: 20px 0px 20px 0px; border: 5px #FFFFFF solid; }
#ranking .item .head_bar { background: #FFFFFF; height: 60px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
#ranking .item .head_bar .pos { display: inline-block; background: #a9a9a9; float: left; width: 60px; height: 60px; line-height: 60px; text-align: center; color: #FFFFFF; font-size: 1.6em; font-weight: bold; -webkit-border-top-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomright: 5px; border-top-left-radius: 5px; border-bottom-right-radius: 5px; }
#ranking .item .head_bar .title { display: inline-block; float: left; width: calc(100% - 30px - 60px - 180px); padding: 10px 15px; font-size: 1.1em; }
#ranking .item .head_bar .title span { display: block; font-size: 0.8em; }
#ranking .item .head_bar .voting { display: inline-block; float: left; width: 180px; padding: 10px 0px; }
#ranking .item .head_bar .voting img { width: 95%; height: auto; }

#ranking .item .product_l { display: block; float: left; width: 310px; background-color: #FFFFFF; padding: 20px; text-align: center; }
#ranking .item .product_l .image {text-align: center; }
#ranking .item .product_l .image img { width: 90%; height: auto; }
#ranking .item .product_l .voting { display: none; text-align: center; }
#ranking .item .product_l .voting img { width: 90%; max-width: 250px; height: auto; }
#ranking .item .product_l .voting_details { margin-top: 20px; font-size: 1.4em; font-weight: bold; }
#ranking .item .product_l .voting_details .scale { display: block; padding: 10px 0px; margin: 10px 0px; border-top: 2px var(--bg-color2) solid; border-bottom: 2px var(--bg-color2) solid; font-size: 0.7em; font-weight: normal; }
#ranking .item .product_l .voting_details .scale b { display: inline-block; float: left; width: 150px; padding: 0px 0px 0px 0px; margin: 0px 0px; font-size: 1.0em;}
#ranking .item .product_l .voting_details .scale .fortschritt { display: block; float: right; width: calc(100% - 160px); height: 16px; background: rgba(0,0,0,0.1); margin: 0px 0px 10px 0px; padding: 0px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
#ranking .item .product_l .voting_details .scale .fortschritt span { display: inline-block; float: left; width: 0%; height: 14px; margin: 0px; padding: 1px 0px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: var(--main-color); background: linear-gradient(90deg, var(--main-color-light) 0%, var(--main-color-dark) 100%); font-size: 0.8em; text-align: center; color: #FFFFFF; }
#ranking .item .product_l .points { display: table; border-collapse:separate; border-spacing: 0px; width: 100%; font-size: 1.4em; font-weight: normal; }
#ranking .item .product_l .points b { display: table-cell; background: linear-gradient(90deg, #c8bfb0 0%, #e6dbc7 100%); height: 50px; padding-left: 10px; font-size: 1.0em; font-weight: normal; vertical-align: middle;  -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
#ranking .item .product_l .points i { display: table-cell; background: linear-gradient(0deg, var(--main-color) 0%, var(--main-color-dark) 100%); height: 50px; width: 80px; padding: 0px 10px; font-size: 1.4em; color: #FFFFFF; font-weight: bold; vertical-align: middle; text-align: center; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
#ranking .item .product_l .points i span { font-size: 0.6em; color: #FFFFFF;  }

#ranking .item .product_r { display: block; float: right; width: calc(100% - 350px - 40px); min-height: 580px; background: #e9efe7 url(../images/ranking_bg.jpg) left top no-repeat; padding: 20px; font-size: 1.0em; }
#ranking .item .product_r .box { margin: 0px 0px 20px 0px; }
#ranking .item .product_r .box.positives { float: left; width: calc(50% - 40px); border-left: 3px #2e8c5a solid; }
#ranking .item .product_r .box.nagative { float: right; width: calc(50% - 40px); border-left: 3px #ff0000 solid; }
#ranking .item .product_r .cta a { display: block; background-image: none; font-size: 1.2em; color: var(--font-color-light); text-align: center; }
#ranking .item .product_r .cta a:hover { color: #FFFFFF; background-color: var(--second-color-light) !important; text-decoration:none; }

#ranking .item .product_r ul { margin: 10px 0px 20px 15px; padding: 0px; font-size: 0.9em; }

#ranking .item .product_r .box.positives ul, #ranking .item .product_r .box.nagative ul { margin: 10px 0px 0px 0px; padding: 0px; }
#ranking .item .product_r .box.positives li { background: transparent url(../images/icon_ok.png) center left no-repeat; background-size: 16px; margin: 10px 0px; padding: 0px 0px 0px 28px; list-style: none; font-size: 1.0em; font-weight: bold; }
#ranking .item .product_r .box.nagative li { background: transparent url(../images/icon_x.png) center left no-repeat; background-size: 16px; margin: 10px 0px; padding: 0px 0px 0px 28px; list-style: none; font-size: 1.0em; font-weight: bold; }

#ranking .item.highlight { border: 5px var(--main-color) solid; }
#ranking .item.highlight .head_bar { background: #c9d6c4; }
#ranking .item.highlight .head_bar .pos { background: var(--main-color); color: #FFFFFF; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; }
#ranking .item.highlight .head_bar .title { font-weight: bold; color: var(--font-color); font-size: 1.1em; }
#ranking .item.highlight .head_bar .title span { color: var(--font-color); }
#ranking .item.highlight .product_l .voting { display: block; }
#ranking .item.highlight .product_r { background: #c9d6c4 url(../images/ranking_bg_highlight.jpg) left top no-repeat; }
#ranking .item.highlight .product_r .cta a { background: transparent url(../images/bg_gold2.png) center center no-repeat; background-size: 100% auto; font-size: 1.2em; color: var(--font-color); text-shadow: 1px 1px 0px rgba(255,255,255,0.3); }
#ranking .item.highlight .product_r .cta a:hover { background-size: 125% auto !important; }


/* Blog */
#blog { margin: 40px auto 40px auto !important; }
#blog h3 { color: var(--font-color); font-size: 1.2em; margin: 10px 0px 5px 10px; }
#blog h4 { color: var(--main-color); font-size: 1.8em; margin: 10px 0px 5px 10px; }
#blog .item { display: block; float: left; width: calc(100% / 3 - 20px - 30px); margin: 10px; padding: 10px 15px; }
#blog .item img { width: 100%; height: auto; margin: 5px 0px 10px 0px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }
#blog .item a.button { display: block; text-align: center; margin-top: 10px; }
img.blog { margin: 10px 0px !important; width: 100%; height: auto; }
.blog_image { margin-top: -50px !important; }
.blog_text { position: relative; z-index: 100; min-height: 250px; margin-top: -10vw !important; }


/* FAQ */
#faq .item { position:relative; padding-bottom:10px; }
#faq .item h4 { display: block; cursor: pointer; width: calc(100% - 45px - 2px); padding: 5px 35px 5px 10px; margin: 0px; background: var(--bg-color2) url(../images/pfeil-unten.png) no-repeat right center; border: 1px rgba(0,0,0,0.05) solid; font-size: 1.2em; font-weight: 600; color: var(--main-color); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
#faq .item h4.open { background: var(--main-color) url(../images/pfeil-oben.png) no-repeat right center; color: #FFFFFF; -webkit-border-radius: 5px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius: 5px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-radius: 5px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; }
#faq .item .faqtext { display: none; background: var(--bg-color2); border: 1px rgba(0,0,0,0.05) solid; width: calc(100% - 20px - 2px); padding: 10px; -webkit-border-radius: 0px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius: 0px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-radius: 0px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; }


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


/* Formulare */
input, textarea, select {
         border: 1px rgba(0,0,0,0.3) solid;
         background-color: rgba(0,0,0,0.05);

         padding: 3px 4px 2px 6px;
         margin: 2px 5px 2px 0px;

         font-family: var(--main-font);
         font-size: 0.9em;
         color: #000000;

         vertical-align: top;
         -webkit-box-shadow: inset 2px 2px 4px 0px rgba(0, 0, 0, 0.10);
         -moz-box-shadow:    inset 2px 2px 4px 0px rgba(0, 0, 0, 0.10);
         box-shadow:         inset 2px 2px 4px 0px rgba(0, 0, 0, 0.10);

         -webkit-border-radius: 0px;
         -moz-border-radius: 0px;
         border-radius: 0px;
}

input[type="submit"] {
         padding: 6px 50px 6px 15px;
         margin: 2px 0px;

         background: var(--main-color) url(../images/dot_next.png) center right no-repeat;
         background-size: auto 90%;

         font-family: var(--main-font);
         text-align: left;
         font-size: 1.0em;
         text-shadow: rgba(0,0,0,0.1) 1px 1px 1px;
         color: #FFFFFF;

         border: 0px rgba(0,0,0,0.3) solid;
         -webkit-border-radius: 30px;
         -moz-border-radius: 30px;
         border-radius: 30px;

         cursor: pointer;
         -webkit-box-shadow: inset 2px 2px 4px 0px rgba(0, 0, 0, 0.0);
         -moz-box-shadow:    inset 2px 2px 4px 0px rgba(0, 0, 0, 0.0);
         box-shadow:         inset 2px 2px 4px 0px rgba(0, 0, 0, 0.0);
}

input[type="submit"]:hover {
        background: var(--second-color) url(../images/dot_next.png) center right no-repeat;
        background-size: auto 90%;
}

form .check input[type="checkbox"] { display:none; }
form .check input[type="checkbox"] + label { width: 50px !important; height: 20px !important; padding: 1px !important; margin: 0px !important; border-radius: 20px !important; border: 2px solid rgba(0,0,0,0.1) !important; background-color: rgba(0,0,0,0.3) !important; display: inline-block; content: ""; float: left; margin-right: 10px !important; transition: background-color 0.5s linear !important; margin-top: 0px; }
form .check input[type="checkbox"] + label:hover { cursor: pointer; }
form .check input[type="checkbox"] + label::before { width: 16px; height: 16px; border-radius: 16px; background-color: #fff !important; display: block; content: ""; float: left; margin: 2px 0 0 2px; transition: margin 0.1s linear; }
form .check input[type="checkbox"]:checked+label{ background-color: var(--main-color) !important; }
form .check input[type="checkbox"]:checked+label::before { margin: 2px 0 0 32px; }