/*
         ==============================================================
         PVK Landingpage V3.0 CSS
         Gestaltung / Programmierung: Hear My Name UG Internetagentur
         ==============================================================
         Grundfarben: #82b33b (Grün), #7ec01f (Grün hell), #f39500 (Orange), #fa6918 (Orange dunkel), #f2f2f2 (Grau Hell)
*/

/* Einstellungen */
:root {
         --main-font: 'Ubuntu';
         --second-font: 'Open Sans';

         --main-color: #82b33b;
         --main-color2: #7ebf20;

         --second-color: #f39500;
         --second-color2: #fa6918;
         --bg-color: #f2f2f2;
         --bg-color2: rgba(0,0,0,0.05);
         --bg-color3: rgba(0,0,0,0.10);

         --font-color: #333333;
         --font-color2: #000000;
         --font-color-light: #FFFFFF;
         --font-color-hover: #333333;

         --formular-white: #FFFFFF;
         --formular-black: #000000;
         --formular-font-color: #000000;
         --formular-font-color-hover: #FFFFFF;
}


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

a:hover {
         color: var(--font-color-hover);
         text-decoration:none;
}

a.button:link, a.button:visited {
         display: inline-block;
         padding: 10px 50px 10px 20px;
         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.2em;
         font-weight: 600;
         text-shadow: rgba(0,0,0,0.2) 2px 2px 1px;
         color: #FFFFFF;
         text-decoration:none;

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

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


/* Überschriften */
h1 {
         font-family: var(--main-font);
         font-size: 2.2em;
         font-weight: bold;
         text-align: center;
         color: var(--font-color-light);
         margin: 0px 0px 5px 0px;
         padding: 0px 0px 0px 0px;
         vertical-align:top;
}

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

h3 {
         font-family: var(--main-font);
         font-size: 1.6em;
         font-weight: bold;
         text-align:left;
         color: var(--font-color);
         margin: 0px 0px 5px 0px;
         padding: 0px 0px 0px 0px;
         vertical-align:top;
}

h4 {
         font-family: var(--main-font);
         font-size: 1.4em;
         font-weight: bold;
         text-align:left;
         color: var(--main-color);
         margin: 0px 0px 5px 0px;
         padding: 0px 0px 0px 0px;
         vertical-align:top;
}


/* Standarts */
body {
         background: var(--main-color);
         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, .right     { 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; }

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

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

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

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

.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; }
.diver { display: block; width: 100%; border-bottom: 4px #FFFFFF dotted; }


/* Tabellen */
td:nth-child(odd) { 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(0,0,0,0.08) solid; }
td:nth-child(even) { background: var(--bg-color3); color: var(--font-color); padding: 3px 10px; border-bottom: 1px rgba(0,0,0,0.05) solid; border-top: 1px rgba(0,0,0,0.08) 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; }


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

.in {
         width: 80%;
         margin: 0px auto;
         padding: 0px 0px;
}

#logo {
         position: absolute;
         z-index: 100;

         top: 50px;
         left: 10%;

         width: 240px;
         height: 150px;
}

#logo a {
         display: block;
         width: 100%;
         height: 100%;
         background: transparent url(../images/pkvsparpreise_logo_sw.png) left top no-repeat;
         background-size: 100% auto;
}
#logo.show { text-align: center; width: 100%; left: 0%; top: 20px; }
#logo.show a { background: transparent url(../images/pkvsparpreise_logo.png) center top no-repeat; background-size: auto 100%; }

#rechner_datenschutz_label {
         display: block;
         position: absolute;
         right: 20px;
         top: 20px;

         z-index: 100;
         width: 200px;
         height: 50px;
         cursor: pointer;

         background: rgb(255,255,255);
         background-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.1) 100%), url(../images/security.png);
         background-position: left center;
         background-size: 100%, 50px;
         background-repeat: no-repeat;

         margin: 0px 0px 0px 0px;
         padding: 0px 0px 0px 50px;
         overflow: hidden;

         -webkit-border-radius: 50px;
         -moz-border-radius: 50px;
         border-radius: 50px;
         font-size: 0.9em;
}
#rechner_datenschutz_label span { display: block; width: 220px; font-family: var(--second-font); font-size: 0.65em; font-weight: normal; text-align: left; color: var(--font-color); text-shadow: #ffffff 1px 1px 0px; padding-top: 5px; }
#rechner_datenschutz_label b { display: block; font-size: 1.5em; padding-top: 3px; }


/* Startpage */
#startpage {
         display: block;
         position: absolute;
         z-index: 100;
         width: 100vw;
         height: 100vh;

         background-position: right top;
         background-repeat: no-repeat;
         background-size: auto 100%;
}
#startpage.img1 { background-image: url(../images/bg_image_1.jpg) !important; }
#startpage.img2 { background-image: url(../images/bg_image_2.jpg) !important;  }
#startpage.img3 { background-image: url(../images/bg_image_3.jpg) !important; }
#startpage.img4 { background-image: url(../images/bg_image_4.jpg) !important; }

#startpage div[class^="layer"] {
         display: block;
         position: absolute;
         height: 100vh;
         background: rgba(130,179,59,0.5);
         clip-path: polygon(0 0, 90% 0%, 100% 100%, 0% 100%);
}
#startpage .layer1 { z-index: 51; width: calc(50vw + 100px); }
#startpage .layer2 { z-index: 52; width: calc(50vw + 50px); }
#startpage .layer3 { z-index: 53; width: calc(50vw + 0px); background: rgba(130,179,59,1.0) !important; }

#startpage .logo {
         position: absolute;
         z-index: 100;

         top: 30px;
         left: 10%;

         width: 240px;
         height: 150px;
}

#startpage .logo a {
         display: block;
         width: 100%;
         height: 100%;
         background: transparent url(../images/pkvsparpreise_logo_sw.png) left top no-repeat;
         background-size: 100% auto;
}

#startpage .logo span {
         display: block;
         margin-top: -30px;
         margin-left: 3px;
         width: 100%;
         font-size: 0.90em;
         opacity: 0.7;
}

#startpage .footer {
         position: absolute;
         z-index: 100;

         bottom: 50px;
         left: 10%;

         width: auto;
         padding: 0px 0px;
         margin: 0px 0px;

         font-family: var(--second-font);
         font-size: 1.1em;
         color: #FFFFFF;
}

#startpage .footer div, #startpage .footer a, #startpage .footer a:hover { color: #FFFFFF; font-family: var(--second-font); text-decoration: none; }
#startpage .footer a:hover { color: #000000; }
#startpage .footer span { color: var(--main-color); }

#startpage .footer .hotline { display: inline-block; border-bottom: 2px #000000 solid; padding-bottom: 8px; margin-bottom: 10px; }
#startpage .footer .hotline a { color: #000000;}

#startpage .text {
         display: block;
         position: absolute;
         z-index: 55;

         top: calc(55% - (400px / 2));
         width: calc(50% - 15%);

         border: 0px #000000 solid;
         padding: 0px;

         color: #000000;
         font-size: 1.3em;
}

#startpage .text h1 { font-size: 2.0em; color: #FFFFFF; text-shadow: 3px 3px 5px rgba(0,0,0,0.2); margin-bottom: 30px; text-align: left; line-height: 1.5em; }
#startpage .text h1 b { display: block; color: #FFFFFF; font-size: 2.2em; }
#startpage .text ul { margin: 20px 0px; padding: 0px; }
#startpage .text li {
         display: inline-block;
         list-style: none;
         width: calc((100% / 3) - 50px - 20px);
         margin: 5px 5px;
         padding: 0px 0px 0px 50px;
         line-height: 35px;
         background: transparent url(../images/dot_start.png) left center no-repeat;
         background-size: 35px 35px;

         color: #ffffff;
         font-size: 1.4em;
         font-weight: bold;
}

#startpage .text button {
         display: inline-block;
         background: var(--second-color);
         padding: 12px 30px;
         margin: 20px 0px 0px 0px;
         cursor: pointer;

         line-height: 50px;

         border: 0px;
         border-bottom: 5px var(--second-color) solid;
         -webkit-border-radius: 8px;
         -moz-border-radius: 8px;
         border-radius: 8px;

         -webkit-box-shadow: 0px 20px 15px -15px rgba(0,0,0,0.5);
         -moz-box-shadow: 0px 20px 15px -15px rgba(0,0,0,0.5);
         box-shadow: 0px 20px 15px -15px rgba(0,0,0,0.5);

         transition: all 0.3s ease-in-out;
}
#startpage .text button:hover { border-bottom: 5px #ffffff solid; background: #000000; color: #000000; }

#startpage .text button b {
         display: inline-block;
         float: left;
         padding: 0px;
         margin: 0px;
         line-height: 50px;

         font-family: var(--main-font);
         font-size: 2.0em;
         color: #FFFFFF;
         font-weight: bold;
         vertical-align: middle;
}

#startpage .text button img {
         display: inline-block;
         float: right;
         width: 50px;
         height: 50px;
         margin-left: 20px;
         margin-top: 0px;
}

#startpage .testsieger {
         display: block;
         position: absolute;
         z-index: 55;

         right: 50px;
         bottom: 50px;
         width: 291px;
         height: 291px;
}

#startpage .testsieger.ds { bottom: 80px; }

/* Abfrage Fenster */
#site {
         display: none;
         background: var(--main-color);
         width: 100%;
         height: calc(100vh - 10px);
         margin: 0px 0px 0px 0px;
         padding: 0px 0px 0px 0px;
}
#site.show { display: block !important; }

#site .header {
         background: #FFFFFF;
         width: 100%;
         height: 140px;
         padding: 0px 0px;
         margin: 0px 0px 50px 0px;

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

         font-family: var(--second-font);
         font-size: 1.1em;
         color: #FFFFFF;
}

#site .logo {
         padding-top: 10px;
         width: 240px;
         height: 140px;
}

#site .logo a {
         display: block;
         width: 100%;
         height: 100%;
         background: transparent url(../images/pkvsparpreise_logo.png) left top no-repeat;
         background-size: 100% auto;
}

#site .logo span { display: none; }



#site .footer {
         position: absolute;
         bottom: 10px;
         width: 100%;
         padding: 10px 0px;
         margin: 0px 0px;

         font-family: var(--second-font);
         font-size: 1.1em;
         color: #FFFFFF;
}
#site.show .footer { position: relative; margin-top: 50px; }

#site .footer div, #site .footer a, #site .footer a:hover { color: #FFFFFF; font-family: var(--second-font); text-decoration: none; }
#site .footer a:hover { color: #000000; }
#site .footer span { color: var(--main-color); }
#site .footer .hotline { display: none; }

#site ul li, ul.vorteile li {
         list-style: none;
         display: block;

         background: transparent url(../images/dot_check.png) top left no-repeat;
         background-size: 60px;
         padding: 5px 0px 0px 80px;
         margin: 10px 0px 20px 0px;
         text-align: left;

         font-size: 1.6em;
         font-weight: bold;
}

#site .vorteil {
         display: block;
         background: transparent url(../images/dot_check.png) top left no-repeat;
         background-size: 40px;
         line-height: 40px;
         padding: 0px 0px 0px 50px;
         margin: 0px 0px 0px 0px;
         text-align: left;
         color: #FFFFFF;
         font-size: 1.4em;
         font-weight: bold;
}

#site #datenschutz ul li, #site #content ul li, ul.vorteile li { background-size: 30px; padding: 5px 0px 0px 40px; margin: 5px 0px 5px 0px; font-size: 1.1em; }
#site ul li i { display: block; font-size: 0.65em; font-weight: normal; margin: 5px 0px 10px 0px; }


/* Scala */

#scala {
         display: block;
         width: 80%;
         position: absolute;
         z-index: 50;

         bottom: 120px;
         left: 10%;
}

#scala .fortschritt {
         display: block;
         width: calc(100% - 6px);
         height: 4px !important;
         background: rgba(0,0,0,0.2);
         margin: 0px 3px;
         padding: 0px;

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

#scala .fortschritt span {
         display: inline-block;
         float: left;
         width: calc((100% / 11) * 0);
         width: 1%;
         height: 14px;
         margin: -5px 0px 0px -2px;
         padding: 0px;

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

         background: var(--second-color);
         background: linear-gradient(to right, var(--second-color) 0%, var(--second-color2) 100%);
         background: -moz-linear-gradient(left, var(--second-color) 0%, var(--second-color2) 100%);
         background: -webkit-linear-gradient(left, var(--second-color) 0%, var(--second-color2) 100%);
}

/* PKV Abfrage Positionierung */
#pkvabfrage_pos {
         width: calc(100% - 0px);
         max-width: 800px;
         padding: 0px;
         margin: 20px auto;
}
#pkvabfrage_pos div[id^="form_step_"] .step_icon {
         display: table-cell;
         width: 300px;
         text-align: left;
         padding-top: 25px;
}

#pkvabfrage_pos div[id^="form_step_"] .step_icon img {
         width: 80%;
         height: auto;
}

#pkvabfrage_pos div[id^="form_step_"] .step_selection {
         display: table-cell;
         width: 500px;
         text-align: right;
         vertical-align: middle;
         padding-top: 25px;
         border: 0px #000 solid;
}

#pkvabfrage_pos div[id^="form_step_"] .step_icon.classic { display: none; }
#pkvabfrage_pos div[id^="form_step_"] .step_selection.classic { display: block; width: calc(100% - 2px); text-align: center; padding-top: 15px; }


/* Content Boxen */
.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);
}

/* Wiki */
#wiki {  }
#wiki, #wiki .vorteile, #wiki a {  }
#wiki .pad { padding: 15px 30px 15px 30px; }
.bg1 { background: #f7f7f7; padding:20px;}
#wiki u { text-decoration: none; border-bottom: 3px #82B600 solid; padding-bottom: 0px; font-weight: bold; }
#wiki ul { margin: 15px 0px; padding: 0px; list-style: none; }
#wiki li { margin: 5px 0px; padding: 5px 0px 5px 35px; line-height: 1.5em; list-style: none; background: transparent url(../images/grafik_pfeil.png) left 8px no-repeat; }
#wiki .wi { font-style: italic; text-align: right; font-size: 0.8em; color: #9F9F9F; }
#wiki h1 { font-size: 1.5em; color: #000000; padding: 20px 0px 10px 0px; }
#wiki h1 span { display: inline-block; font-size: 0.6em; color: #FFFFFF; padding: 5px 10px; text-shadow: #82B600 1px 1px 0px;  background-color: #82B600; margin: 10px 0px; }
#wiki h2 { font-size: 1.2em; color: #000000; padding: 0px 0px 10px 0px; }
#wiki h3 { font-size: 1.2em; color: #000000; padding: 0px 0px 10px 0px; }
#wiki h4.links { width: 100%; display: block !important; font-size: 1.2em; text-align: left; color: #000000; padding: 0px 0px 5px 0px; }
#wiki .top { text-align: left; font-size: 1.1em; color: #000000; padding: 0px 0px 20px 0px; }
#wiki .vorteile { float: right; width: calc(100% - 510px); background: none; font-size: 1.0em; }
#wiki .interne_links { margin: 15px 0px; padding: 25px; }
#wiki .interne_links a { display: block; float:left; width: calc(50% - 104px); padding: 20px 30px 20px 60px; margin: 5px; border: 2px #82B600 solid; font-size: 1.2em; text-decoration: none; background: #FFFFFF url(https://www.pkv-tarifvergleich.info/images/nextlabel.gif) left center no-repeat; -webkit-box-shadow: 0px 10px 2px -7px rgba(0, 0, 0, 0.10); -moz-box-shadow: 0px 10px 2px -7px rgba(0, 0, 0, 0.10); box-shadow: 0px 10px 2px -7px rgba(0, 0, 0, 0.10);}
#wiki .interne_links a:hover { color: #82B600; }
#wiki .checkliste {background: #f7f7f7; padding:20px; }

#wiki img.l { float:left; margin: 0px 25px 15px 0px; }
#wiki img.r { float:right; margin: 0px 0px 15px 25px; }

/* 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(--formular-black) url(../images/pfeil-unten.png) no-repeat right center;
         border: 1px rgba(0,0,0,0.0) solid;

         font-size: 1.2em;
         font-weight: 600;
         color: var(--formular-white);

         -webkit-border-radius: 5px;
         -moz-border-radius: 5px;
         border-radius: 5px;
}
#faq .item h4.open {
        background: var(--formular-black) url(../images/pfeil-oben.png) no-repeat right center;

        -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: rgba(255,255,255,0.4);
        border: 1px rgba(0,0,0,0.0) 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;
         top: 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(--second-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);
         transition: all 0.3s ease-in-out;
}

input[type="submit"]:hover {
        background: var(--formular-black) 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; }