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

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

         --main-color: #6a9b24;
         --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.15);

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

         --hero-bg: #E2E2E2;
         --hero-image: url(../images/hero_7_siegel.jpg);
         --hero-image-ohne: url(../images/hero_7.jpg);
         --hero-image-mobile: url(../images/hero_7_mobile.jpg);
}


/* Links */
a:link, a:visited {
         font-family: var(--second-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 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(--main-color);
         margin: 0px 0px 5px 0px;
         padding: 0px 0px 0px 0px;
         vertical-align:top;
}
h1.dm_h1_header { margin: 40px 0px 20px 0px; }


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:#FFFFFF;
         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; }


/* 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; }

#impressum td:nth-child(odd), #impressum td:nth-child(even) { background: #FFFFFF; border-bottom: 0px rgba(0,0,0,0.05) solid; border-top: 0px rgba(255,255,255,0.75) solid; }


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

#wrapper.content #header { height: 270px; }
#wrapper.content #site { padding: 30px 0px 30px 0px; }

.in {
         width: calc(100% - 40px);
         max-width: calc(1600px - 40px);
         margin: 0px auto;
         padding: 0px 20px;
}

#header {
         background-color: var(--hero-bg);

         background-image: var(--hero-image);
         background-position: bottom center;
         background-repeat: no-repeat;
         background-size: auto calc(100% - 100px);

         display: block;
         width: 100%;
         /*height: calc(100vw / 3); */
         min-height: 800px;
}

#header.low {
         background-color: var(--main-color);
         background-image: none !important;
         display: block;
         width: 100%;
         height: 100px;
         min-height: 100px;
}

#header .top {
         display: block;
         width: 100%;
         height: 100px;
         padding: 0px 0px 0px 0px;
         background-color: #FFFFFF;
         border-bottom: 3px var(--main-color) solid;
         -webkit-box-shadow: 0px -10px 10px 10px rgba(0,0,0,0.2);
         -moz-box-shadow: 0px -10px 10px 10px rgba(0,0,0,0.2);
         box-shadow: 0px -10px 10px 10px rgba(0,0,0,0.2);
}

#header .logo {
         display: block;
         width: 300px;
         height: auto;
         margin-top: 30px;
}

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

#header .title {
         display: block;
         width: calc(100% - 300px - 20px);

         margin-top: 15px;
         text-align: right;
         font-size: 0.7em;
}
#header h1, #header h2 { font-family: var(--second-font); text-align: right; font-weight: 400; }


#hero_rechner {
         display: block;
         float: right;

         background-color: #f6f6f6;
         width: calc(50% - 40px - 20px);
         max-width: calc(1600px/2 - 40px - 20px);
         /*min-height: 500px;
         height: calc(100vw / 3 - 200px); */

         height: 600px;

         position: absolute;
         left: calc(50% + 40px);
         z-index: 2;

         padding: 0px 0px 0px 0px;
         margin: 50px 0px 0px 0px;

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

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

}

#hero_rechner .headline {
         display: block;
         width: calc(100% - 60px);
         height: 70px;
         padding: 10px 30px 0px 30px;

         background: rgb(255,255,255);
         background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(228,228,228,1) 100%);

         font-family: var(--second-font);
         font-size: 1.4em;
         font-weight: normal;
         text-align: center;
         color: #000000;
}

#hero_rechner .banderole {
         display: block;
         float: right;
         position: relative;
         width: 140px;
         height: 85px;
         background: transparent url(../images/banderole_save.png) top left no-repeat;
         background-size: 100% auto;
         margin: -85px -5px 0px 0px;
}

#hero_rechner .fortschritt {
         display: block;
         width: calc(100% - 0px);
         height: 10px;
         background: rgba(0,0,0,0.1);
         margin: 0px;
         padding: 0px;
}

#hero_rechner .fortschritt span {
         display: inline-block;
         float: left;
         width: 0%;
         height: 10px;
         margin: 0px;
         padding: 0px;

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

#rechner_datenschutz_label {
         display: block;
         position: absolute;
         left: calc(50% - 20px);

         z-index: 1;
         width: 270px;
         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: 550px 0px 0px -250px;
         padding: 5px 0px 0px 60px;

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

         font-family: var(--second-font);
         font-size: 0.7em;
         font-weight: normal;
         text-align: left;
         color: var(--font-color);
         text-shadow: #ffffff 1px 1px 0px;
}
#rechner_datenschutz_label b { display: block; font-size: 1.5em; padding-top: 3px;}


#versicherer {
         display: block;
         width: 100%;
         background: var(--main-color);
         background: linear-gradient(to right, var(--main-color) 0%, var(--main-color2) 100%);
         background: -moz-linear-gradient(left, var(--main-color) 0%, var(--main-color2) 100%);
         background: -webkit-linear-gradient(left, var(--main-color) 0%, var(--main-color2) 100%);
         padding: 10px 0px;
}
#versicherer .slide_logo { display: block; width: calc(180px * 6); margin: 0px auto; text-align: center; }
#versicherer .slide_logo img { margin: 5px 10px; opacity: 0.6; width: 160px; }
#versicherer .slide_logo img:hover { opacity: 1; }


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

#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 #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; }


#site .tarifvergleich { font-size: 1.3em; }
#site .tarifvergleich b { font-size: 1.2em; }
#site .tarifvergleich .button { background-color: var(--second-color); font-size: 1.4em; padding: 10px 70px 10px 30px; }
#site .tarifvergleich .button:hover { background-color: var(--font-color); }

/* bewertungen */
#bewertungen {
         display: block;
}

#bewertungen .item {
         float: left;
         display: block;
         width: calc(50% - 40px - 0px - 3px);
         padding: 0px;
         margin: 20px;
         background:#FFFFFF;
         -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
         -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
         box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
         border-left: 3px var(--second-color) solid;
}
#bewertungen .item .sterne { display: block; width: calc(100% - 40px); padding: 20px 20px 10px 20px; }
#bewertungen .item .sterne img { float: left; width: 30px; height: 30px; }
#bewertungen .item .stimme { padding: 10px 20px; font-size: 1.0em; }
#bewertungen .item .name { display: block; background: rgba(0,0,0,0.05); padding: 10px 20px; font-size: 0.9em; text-align: right; }


/* Footer */
#footer {
         background: var(--main-color);
         width: 100%;
         padding: 30px 0px;
         margin: 0px 0px;

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

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

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

#footer .r span { color: var(--main-color); }

/* Content Boxen */

#content, .content {
         margin: 20px auto;
}

.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: rgba(0,0,0,0.1) url(../images/pfeil-unten.png) no-repeat right center;
         border: 1px rgba(0,0,0,0.1) 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: #fcfcfc 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(0,0,0,0.1);
        border: 1px rgba(0,0,0,0.1) 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(--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; }