/*
         ==============================================================
         Landingpage V2.1 CSS
         Gestaltung / Programmierung: Kreativagentur Freudenschrei UG
         ==============================================================
         Grundfarben: #127eeb (Blau), #03217f (Blau dunkel), #fd5300 (Orange), #feb60e (Gelb), #e7f4fd (Grau-Blau BG), #c9e4fd (Grau-Blau BG 2), #f2f2f2 (Grau Hell)
*/

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

         --main-color: #127eeb;
         --main-color-light: #e7f4fd;
         --main-color-dark: #03217f;

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

         --bg-color: #e7f4fd;
         --bg-color2: #c9e4fd;
         --bg-color3: #f2f2f2;
         --bg-dark: #127eeb;

         --font-color: #03217f;
         --font-color2: #03217f;
         --font-color3: #2b2d2c;
         --font-color-highlight: #127eeb;
         --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(--second-color) url(../images/icon_dot_next.png) calc(100% - 10px) center no-repeat;
         background-size: auto 50%;

         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: 60px;
         -moz-border-radius: 60px;
         border-radius: 60px;
}
a.button.r:link, a.button.r:visited { background: var(--main-color) url(../images/icon_dot_next.png) calc(100% - 5px) center no-repeat; background-size: auto 70%; color: var(--font-color-light); font-size: 1.0em; padding: 5px 40px 5px 10px; }
a.button.l:link, a.button.l:visited { background: var(--main-color-light) url(../images/icon_arrow_2_r_hover.png) calc(100% - 5px) center no-repeat; background-size: auto 50%; color: var(--main-color); font-size: 1.0em; padding: 5px 30px 5px 10px; }

a.button:hover, a.button.r:hover { color: #FFFFFF; background-color: var(--main-color-dark); text-decoration:none; }
a.button.l:hover { background-image: url(../images/icon_dot_next.png); background-color: var(--main-color-dark); color: #FFFFFF; }


/* Überschriften */
h1 {
         font-size: 2.4em;
         font-weight: bold;
         text-align: left;
         color: var(--main-color-dark);
}

h2 {
         font-size: 2.0em;
         font-weight: 600;
         text-align: left;
         color: var(--main-color-dark);
}

h3 {
         font-size: 1.8em;
         font-weight: bold;
         text-align:left;
         color: var(--main-color-dark);
         text-transform: uppercase;
}

h4 {
         font-size: 1.6em;
         font-weight: bold;
         text-align:left;
         color: var(--main-color-dark);
}

h5 {
         font-size: 1.3em;
         font-weight: bold;
         text-align:left;
         color: var(--main-color-dark);
}

h1, h2, h3, h4, h5 { font-family: var(--main-font); letter-spacing: 0px; 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) !important; }
h3.start { color: var(--main-color); font-size: 1.2em; margin: 5px 0px 5px 0px; }
h4.start { color: var(--main-color-dark); font-size: 1.8em; margin: 5px 0px 15px 0px; }


/* 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     { 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: 20px 0px !important; }

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

.f_small   { font-size: 0.8em !important; }
.f_smaller { font-size: 0.6em !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: 10px; -moz-border-radius: 10px; border-radius: 10px; }

.shadow { -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 65, 120, 0.25); -moz-box-shadow: 0px 0px 15px 0px rgba(0, 65, 120, 0.25); box-shadow: 0px 0px 15px 0px rgba(0, 65, 120, 0.25); }
.shadow_dark { -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 65, 120, 0.55); -moz-box-shadow: 0px 0px 15px 0px rgba(0, 65, 120, 0.55); box-shadow: 0px 0px 15px 0px rgba(0, 65, 120, 0.55); }
.shadow_small { -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 65, 120, 0.25); -moz-box-shadow: 0px 0px 8px 0px rgba(0, 65, 120, 0.25); box-shadow: 0px 0px 8px 0px rgba(0, 65, 120, 0.25); }

.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); }
.bg_w     { background-color: #FFFFFF; }

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

hr { display: block; width:100%; border: 0px; border-bottom: 2px rgba(0,0,0,0.1) solid; margin: 10px 0px 20px 0px; padding: 0px 0px 10px 0px; }
/* 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; }
*/

/* Listen */
ul.list { margin: 10px 0px 0px 0px; padding: 0px; }
ul.list li { background: transparent url(../images/icon_check.png) center left no-repeat; background-size: 20px; margin: 5px 0px; padding: 0px 0px 0px 30px; list-style: none; font-size: 1.0em; line-height:22px; color: var(--main-color-dark); }


/* Hotline */
.hotline { width: 250px; }
.hotline a { display: block; height: 50px; padding: 0px 5px 5px 5px; font-size: 1.5em; font-weight: 700; color: var(--main-color-dark); text-decoration: none; text-align: left; }
.hotline a:hover { color: var(--main-color-dark); }
.hotline a.phone { background: transparent url(../images/icon_0.png) center left no-repeat; background-size: 55px 55px; padding: 0px 5px 5px 75px; }
.hotline a.mail { background: transparent url(../images/icon_1.png) center left no-repeat; background-size: 55px 55px; padding: 0px 5px 5px 75px; }
.hotline a span { font-size: 0.50em; display: block; color: var(--font-color3); }


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

#header .logo {
         display: block;
         float: left;
         width: 300px;
         height: auto;
         margin: 0px 0px;
         text-align: left;
}
#header .logo a { text-decoration: none; }
#header .logo img { width: calc(100% - 20px); max-width: 300px; height: auto; }

#header .navi {
         display: block;
         float: left;
         width: calc(100% - 300px - 265px - 2px);
         height: auto;
         margin: 15px 0px 15px 0px;
         text-align: right;
         border-right: 2px rgba(0,0,0,0.1) solid;
}

#header .navi a {
         display: inline-block;
         padding: 3px 10px;
         margin-left: 5px;
         font-size: 1.2em;
         color: var(--main-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(--font-color);  }
#header .navi a { display: none; }


#header .navi .dropdown { display: inline-block; overflow: hidden; }
#header .navi .dropdown .dropbtn {
         border: none;
         outline: none;
         cursor: pointer;

         position: relative;
         z-index: 151;

         font-size: 1.2em;
         color: var(--main-color);

          border: 2px transparent solid;
         -webkit-border-radius: 50px;
         -moz-border-radius: 50px;
         border-radius: 50px;

         display: block;
         float: right;
         width: 60px;
         height: 60px;
         text-indent: -9999px;
         background: #FFFFFF url(../images/icon_navi.png) center center no-repeat;
         background-size: 60px 60px;
         padding: 0px 0px 0px 0px;
         margin: 0px 10px 0px 0px;

}
#header .navi .dropdown:hover .dropbtn, #header .navi .dropdown.active .dropbtn { background-color: var(--bg-color2); color: var(--font-color); border: 2px #FFF solid; }

#header .navi .dropdown-content {
         display: none;
         position: absolute;
         z-index: 151;
         background-color: #f9f9f9;

         width: auto;
         margin: 60px auto 0px auto;

         min-width: 160px;
         padding: 10px 10px;
         box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.2);

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

#header .navi .dropdown-content a {
         display: block;
         float: none;
         max-width: 280px;
         padding: 6px 12px;
         margin-bottom: 5px;

         text-decoration: none;
         text-align: left;

         background: var(--bg-color);
         font-size: 0.9em;
         border: 2px rgba(0,0,0,0.05) solid;
}
#header .navi .dropdown-content a:hover { background-color: var(--main-color); color: #FFFFFF; }
#header .navi .dropdown.active .dropdown-content { display: block !important; }
#header .navi .dropdown:hover .dropdown-content { display: block; }
#header .navi .dropdown-content b { display: block; padding: 5px 0px 5px 5px; }

#header .hotline { float: right; width: 250px; border: 0px #000 solid; margin-top: 16px; }
#header .hotline a { padding: 0px 5px 5px 65px; }
#header .hotline a span { color: var(--font-color); }

#hero_header { display: block; background-color: var(--main-color-dark); height: 0px; width: 100%; margin-bottom: 10px; }

#hero {
         display: block;
         width: 100%;
         height: 410px;
         background: var(--bg-color);
}
#hero .in { background: var(--bg-color) url(../images/hero2.jpg) top right no-repeat; background-size: auto 100%; min-height: 410px; }   /*820x410 Pixel*/

#hero .info { display: block; float: left; width: calc(50% - 0px); padding: 10px 0px 20px 0px; }
#hero .info h1 { font-size: 2.2em; color: var(--font-color2) !important; font-weight: 900; }
#hero .info h1 span { font-size: 1.0em; color: var(--font-color-highlight) !important; }
#hero .info ul { margin: 15px 0px 10px 0px; padding: 0px; }
#hero .info ul li { background: transparent url(../images/icon_check.png) center left no-repeat; background-size: 26px; margin: 5px 0px; padding: 0px 0px 0px 40px; list-style: none; font-size: 1.2em; line-height:26px; color: var(--main-color-dark); }
#hero .info .mobile { display: none; font-size: 1.1em; font-weight: bold; text-align:left; color: var(--main-color); text-transform: uppercase; }

#hero .form { display: inline-block; background: #FFFFFF; font-size: 0.9em; color: var(--main-color-dark); padding: 8px 25px; margin-top: 15px; }
#hero .form b { font-size: 1.4em; }
#hero .form form { display: block; margin: 8px 0px; }
#hero .form form input { border: 2px rgba(0,0,0,0.2) solid; font-size: 1.4em; }
#hero .form form input[type="number"] { width: 120px; }
#hero .form form input[type="submit"] { border: 2px var(--second-color) solid; font-weight: bold; }
#hero .form form input[type="submit"]:hover { border: 2px var(--second-color-dark) solid; }

#hero .form img { float: left; }
#hero .form i { float: left; display: block; padding: 0px 0px; margin: 2px 10px 0px 2px; text-align: left; color: var(--main-color-dark); font-size: 0.9em; }

#hero img.testsieger { float: right; width: auto; height: 310px; margin-top: 50px; }


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

/* Footer */
#footer { display: block; background-color: var(--main-color-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.rechner { padding-bottom: 80px; }
#footer a { color: var(--font-color-light); text-decoration: none; font-weight: bold; }
#footer a:hover { color: var(--second-color-light); text-decoration: none; }

#footer .logo { float: left; display: block; width: 300px; margin: 0px; padding: 10px 20px 10px 30px; border-right: 3px rgba(255,255,255,0.2) solid; text-align: center; }
#footer .logo span img { width: 100%; height: auto; }
#footer .info { float: right; display: block; width: calc(100% - 350px - 3px - 0px - 30px); margin: 0px; padding: 30px 0px 10px 0px; 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 - 4px);
         margin: 20px 0px 10px 0px;
         padding: 15px 15px 15px 15px;
         background: var(--bg-color);

         border: 2px var(--bg-color2) solid;
         -webkit-border-radius: 10px;
         -moz-border-radius: 10px;
         border-radius: 10px;
}
.box.w { background: #FFFFFF; border: 2px #FFFFFF solid;  }

/* Content */
#versicherer { display: block; width: calc(100% - 0px); height: 60px; margin: 10px auto 30px auto; padding: 10px 0px 10px 0px; background: #FFFFFF; }
#versicherer { background: #FFFFFF url(../upload/versicherer/komplett.jpg) center center no-repeat; background-size: 100% auto; max-width: var(--max-width); }
#versicherer a { display: block; width: calc(100% - 0px); height: 60px; }

#versicherer_show { margin: 40px auto 40px auto; }
#versicherer_show .items { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
#versicherer_show .item { display: block; width: calc(100% - 20px - 4px); margin: 0px 0px; padding: 10px 10px 8px 10px; background: #FFFFFF; border: 2px #FFFFFF solid; }
#versicherer_show .item img { width: 100%; height: auto; }

div[id^="vorteile-"] { display: block; width: calc(100% - 0px); margin: 20px 0px 20px 0px; padding: 10px 0px 10px 0px; }
div[id^="vorteile-"] .item { float: left; width: calc(100% / 4 - 20px - 2px); margin: 10px; border-right: 2px rgba(0,0,0,0.1) solid; }
div[id^="vorteile-"] .item:nth-last-child(2) { width: calc(100% / 4 - 20px - 0px); border-right: 0px var(--bg-color) solid !important; }
div[id^="vorteile-"] .item img { float: left; width: 60px; height: auto; }
div[id^="vorteile-"] .item img.icon { float: none; width: 18px; height: auto; }
div[id^="vorteile-"] .item span { float: right; width: calc(100% - 80px); text-align: left; color: var(--font-color); font-size: 0.9em; padding-right: 10px; }
div[id^="vorteile-"] .item span b { display: block; padding: 0px 10px 5px 0px; color: var(--font-color2); font-size: 1.1em; }

#vorteile-zahnselect h2 { color: #FFFFFF; }
#vorteile-zahnselect .item span b { height: 40px; overflow:hidden; padding-bottom: 5px; }

#vorteile-zahnselect.dark { background-color: var(--main-color-dark); margin: 0px 0px 20px 0px; padding: 20px 0px 30px 0px; }
#vorteile-zahnselect.dark .item { border-right: 2px rgba(255,255,255,0.2) solid; }
#vorteile-zahnselect.dark .item span, #vorteile-zahnselect.dark h1 { color: #FFFFFF; }
#vorteile-zahnselect.dark h1 span { color: var(--main-color) !important; }
#vorteile-zahnselect.dark .item span b { color: var(--main-color-light); }

#vorteile-tarif { padding: 10px; width: calc(100% - 20px); }
#vorteile-tarif .item span { line-height: 20px; padding: 5px 0px; color: #FFFFFF; }
#vorteile-tarif .item span b { padding-bottom: 0px; color: #FFFFFF; }

#vergleich { margin: 40px 0px; }
#vergleich .f_bigger { margin: 20px 0px; }
#vergleich div[class^="item"] { float: left; width: calc(100% / 3 - 150px - 20px - 30px); background-size: 135px 95px; background-repeat: no-repeat; background-position: left top; padding: 10px 0px 20px 150px; margin: 10px; font-size: 0.9em;color: var(--main-color-dark); }
#vergleich div[class^="item"] b { display: block; padding: 0px 0px 5px 0px; color: var(--font-color2); font-size: 1.0em; }
#vergleich .item_1 { background-image: url(../images/flow_1.png); }
#vergleich .item_2 { background-image: url(../images/flow_2.png); }
#vergleich .item_3 { background-image: url(../images/flow_3.png); }
#vergleich .arrow { float: left; width: 40px; height: 100px; background: transparent url(../images/flow_arrow.png) center center no-repeat; }

#leistungen { margin: 20px 0px 0px 0px; padding: 10px 0px 40px 0px; }
#leistungen h4 { font-size: 1.8em; margin-bottom: 10px; }

#leistungen .auswahl { display: block; width: calc(100% - 0px); height: auto; margin-bottom: 10px; }
#leistungen .auswahl [data-auswahl],
#leistungen .s_items [data-auswahl] { display: block; float: left; width: calc(100% / 5 - 20px - 20px - 4px); padding: 10px 10px 0px 10px; margin: 10px; background-color: #FFFFFF; background-position: top center; background-repeat: no-repeat; border: 2px #FFFFFF solid; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; cursor:pointer; opacity: 0.9; }
#leistungen .auswahl [data-auswahl] { height: calc((var(--max-width) / 5) - 60px) !important; background-size: 90% auto; }
#leistungen .s_items [data-auswahl] { height: 140px !important; background-size: auto 140px; }
#leistungen .auswahl [data-auswahl="1"], #leistungen .s_items [data-auswahl="1"]{ background-image: url(../images/zahnselect_2_1.jpg); }
#leistungen .auswahl [data-auswahl="2"], #leistungen .s_items [data-auswahl="2"]{ background-image: url(../images/zahnselect_2_2.jpg); }
#leistungen .auswahl [data-auswahl="3"], #leistungen .s_items [data-auswahl="3"]{ background-image: url(../images/zahnselect_2_3.jpg); }
#leistungen .auswahl [data-auswahl="4"], #leistungen .s_items [data-auswahl="4"]{ background-image: url(../images/zahnselect_2_4.jpg); }
#leistungen .auswahl [data-auswahl="5"], #leistungen .s_items [data-auswahl="5"]{ background-image: url(../images/zahnselect_2_5.jpg); }
#leistungen .auswahl [data-auswahl].active, #leistungen .auswahl [data-auswahl]:hover, #leistungen .s_items [data-auswahl].active, #leistungen .s_items [data-auswahl]:hover { border: 2px var(--main-color) solid; opacity: 1.0; }

#leistungen .auswahl .x {
         display: none;
         position: absolute;
         margin-top: -16px;
         margin-left: -16px;

         background: var(--main-color);

         width: 26px;
         line-height: 26px;

         font-weight: bold;
         text-align: center;
         color: #FFFFFF;

         -webkit-border-radius: 20px;
         -moz-border-radius: 20px;
         border-radius: 20px;
}
#leistungen .auswahl [data-auswahl].active .x { display: block; }

#slider_leistungen { display: none; width: 100%; max-width: 400px; }
#slider_leistungen .s_items { display: block; float: left; width: calc(100% - 50px - 50px - 20px); margin: 0px 10px; }
#slider_leistungen .s_l, #slider_leistungen .s_r { float: left; display: block; width: 50px; height: 60px; padding: 60px 0px 0px 0px; text-align: center; }
#slider_leistungen .s_r { float: right; }
#slider_leistungen .s_l span, #slider_leistungen .s_r span { display: block; cursor: pointer; width: 40px; height: 40px; background-color: #FFFFFF; background-position: center center; background-repeat: no-repeat; background-size: 14px auto; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; }
#slider_leistungen .s_l span { background-image: url(../images/arrow_l_hover.png); }
#slider_leistungen .s_l span:hover {  background-image: url(../images/arrow_l.png); background-color: var(--main-color); }
#slider_leistungen .s_r span { background-image: url(../images/arrow_r_hover.png); }
#slider_leistungen .s_r span:hover {  background-image: url(../images/arrow_r.png); background-color: var(--main-color); }
#slider_leistungen .s_dots { text-align: center; padding: 0px; margin: 0px; }


#leistungen .info { float: left; display: block; width: 260px; border: 0px #000000 solid; margin-left: 10px; padding: 15px 15px 15px 15px; font-size: 1.0em; background:#FFFFFF; }
#leistungen .info h5 { font-size: 1.4em; margin-bottom: 20px; }
#leistungen .tariflink { font-size: 1.0em; margin: 20px 0px 8px 0px; background: var(--second-color) url(../images/icon_arrow_r.png) 97% center no-repeat; background-size: auto 60%; }
#leistungen .tariflink.mobile { display: none; }

#leistungen .rechnung { float: right; display: block; width: calc(100% - 300px - 20px - 30px); padding: 10px 10px 10px 10px; margin-right: 10px; background-color: #FFFFFF; border: 0px #000000 solid; cursor: pointer; }
#leistungen .rechnung img { width: 100%; max-width: 900px; height: auto; margin: 0px 0%; }

/* Blog */
#blog { margin: 40px auto 40px auto; }
#blog h3.start, #blog h4.start { display: block; float: left; width: calc(100% - 300px); margin-left: 10px; }

#blog .items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
#blog .item { display: block; width: calc(100% - 30px - 4px); margin: 0px 0px; padding: 10px 15px 0px 15px; background: #FFFFFF; border: 2px #FFFFFF solid; }
#blog .item img { float: left; width: 130px; height: auto; margin: 0px 10px 10px 0px; }
#blog .item b { display: block; }
#blog .item a.button { float: right; display: inline-block; text-align: left; margin-top: 10px; }
#blog .item span { display: block; height: 60px; line-height: 20px; overflow: hidden; border: 0px #000 solid; }

img.blog { margin: 10px 0px !important; width: 100%; height: auto; }
.blog_image { margin-top: 0px; height: 300px; background-position: center center; background-size: 100% auto; }
.blog_text { position: relative; z-index: 100; min-height: 250px; margin-top: -20px !important; }
.blog_text.box { background: #FFFFFF; border-color: #FFFFFF; }

/* FAQ */
#faq .item { position:relative; padding-bottom:10px; }
#faq .item h4 { display: block; cursor: pointer; width: calc(100% - 65px - 2px); padding: 15px 50px 15px 15px; margin: 0px; background: #FFFFFF url(../images/icon_plus.png) no-repeat calc(100% - 15px) center; background-size: 20px;  font-size: 1.1em; font-weight: 600; color: var(--main-color-dark); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 1px rgba(0,0,0,0.15) solid; }
#faq .item h4.open { background-image: url(../images/icon_minus.png); -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; border-bottom: 0px rgba(0,0,0,0.15) solid; }
#faq .item .faqtext { display: none; background-color: #FFFFFF; color: var(--font-color3); width: calc(100% - 30px - 2px); padding: 0px 15px 15px 15px; border: 1px rgba(0,0,0,0.15) solid; border-top: 0px rgba(0,0,0,0.15) solid; -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; }


/* Reviews */
#reviews { display: block; width: calc(100% - 0px); height: auto; padding: 10px 0px; margin: 20px auto; text-align: center; border: 0px #000 solid; }
#reviews .item { display: inline-block; width: calc(100% - 20px - 0px); background: #FFFFFF; font-size: 0.9em; color: var(--main-color-dark); padding: 10px; margin: 10px 0px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 65, 120, 0.35); -moz-box-shadow: 0px 0px 5px 0px rgba(0, 65, 120, 0.35); box-shadow: 0px 0px 5px 0px rgba(0, 65, 120, 0.35); }
#reviews .item img { height: 22px; width: auto; }

#reviews .item i { float: left; display: block; background: var(--bg-color) url(../images/icon_user.png) center center no-repeat; background-size: 34px; width: 50px; height: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; }
#reviews .item .info { float: right; display: block; width: calc(100% - 50px - 30px); padding: 5px 10px; margin: 0px; font-size: 1.1em; color: var(--main-color-dark); text-align: left; }
#reviews .item .info b { float: left; display: inline-block; width: calc(100% - 60px); font-weight: bold; padding-top: 0px; }
#reviews .item .info a { float: left; display: inline-block; padding-left: 10px; }
#reviews .item .info span { display: inline-block; float: right; font-weight: normal; padding-bottom: 15px; }

#reviews .bewertungen { display: block; float: left; width: calc(100% - 40px - 380px - 20px); padding: 20px 10px 20px 10px; margin: 10px 0px 10px 0px; }
#reviews .bewertungen td { padding: 0px; }
#reviews .bewertungen td:nth-child(3) { background-color: rgba(0,0,0,0.1); }
#reviews .bewertungen td:nth-child(3) span { display: block; background-color: var(--main-color); height: 20px; }
#reviews .kundenvorteile { display: block; float: right; width: 340px; font-size: 0.9em; padding: 10px; margin: 10px 0px 10px 0px; }
#reviews .kundenvorteile h3 { font-size: 1.1em; text-transform: none; }
#reviews .kundenvorteile li { background-image: url(../images/icon_check4.png); }

#slider_reviews { display: block; width: calc(100% + 40px); margin: 0% -20px; padding: 0px; }
#slider_reviews .s_items { display: block; width: calc(100% - 2px); height: auto; border: 0px #000 solid; padding: 0px 0px; margin: 10px 0px 0px 0px; text-align: center; }
#slider_reviews .s_items .item { display: inline-block; width: calc(100% - 20px); background: #FFFFFF; font-size: 0.9em; color: var(--main-color-dark); padding: 10px; margin: 15px 20px 15px 20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;  -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 65, 120, 0.35); -moz-box-shadow: 0px 0px 15px 0px rgba(0, 65, 120, 0.35); box-shadow: 0px 0px 15px 0px rgba(0, 65, 120, 0.35); }
#slider_reviews .s_items .item img { height: 22px; width: auto; }

#slider_reviews .s_items .item .info { display: block; width: calc(100% - 0px); min-height: 40px; overflow: hidden; padding: 10px 0px; margin: 0px; font-size: 1.1em; color: var(--main-color-dark); }
#slider_reviews .s_items .item i { display: inline-block; background: var(--bg-color) url(../images/icon_user.png) center center no-repeat; background-size: 34px; height: 50px; width: 50px; text-align: center; line-height: 50px; color: var(--main-color-dark); font-size: 1.2em; font-weight: bold; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; }
#slider_reviews .s_items .item b { float: right; display: inline-block; width: calc(100% - 60px); font-weight: bold; padding-top: 10px; }
#slider_reviews .s_items .item b span { display: block; font-weight: normal; }

#slider_reviews .s_dots_r { width: calc(100% - 0px - 2px); border: 0px #000 solid; text-align: center; padding: 0px; margin: 0px; }

.slick-dots li { list-style: none; display: inline-block; margin: 5px; }
.slick-dots li button { cursor: pointer; list-style-type: none; width: 16px; height: 16px; border-radius: 20px; border: 0px #bbb solid; background: #FFFFFF; color: #FFFFFF; -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 65, 120, 0.25); -moz-box-shadow: 0px 0px 15px 0px rgba(0, 65, 120, 0.25); box-shadow: 0px 0px 15px 0px rgba(0, 65, 120, 0.25); text-indent: -9999px; }
.slick-dots li.slick-active button { background: var(--main-color); color: var(--main-color); }


/* Filter + Page */
.review-filter { display: block; width: 100%; text-align: left; margin: 10px 0px; }
.review-filter button, .review-filter a, .pagination button, .pagination div {
         cursor: pointer;
         display: inline-block;
         padding: 0px 10px;
         margin: 2px;
         line-height: 26px;

         font-size: 1.0em;
         color: var(--main-color);
         font-weight: 400;
         text-decoration: none;

         background: #FFFFFF;
         border: 2px var(--bg-color2) solid;
         -webkit-border-radius: 50px;
         -moz-border-radius: 50px;
         border-radius: 50px;
}
.pagination div { cursor: not-allowed; }
.review-filter button, .review-filter a { padding: 0px 10px; line-height: 30px; text-decoration: none; }
.review-filter button b, .review-filter a b { display: block; color: #BBBBBB; padding: 0px 5px 0px 5px; font-weight: normal; background-repeat: no-repeat; background-size: auto 18px; background-position: left center; }
.review-filter button[data-sterne] { float: left; }
.review-filter button[data-sterne="5"] b {  padding: 0px 5px 0px 100px; background-image: url(../images/stars_5.png); }
.review-filter button[data-sterne="4"] b {  padding: 0px 5px 0px 100px; background-image: url(../images/stars_4.png); }
.review-filter button[data-sterne="3"] b {  padding: 0px 5px 0px 100px; background-image: url(../images/stars_3.png); }
.review-filter button[data-sterne="2"] b {  padding: 0px 5px 0px 100px; background-image: url(../images/stars_2.png); }
.review-filter button[data-sterne="1"] b {  padding: 0px 5px 0px 100px; background-image: url(../images/stars_1.png); }

.review-filter button[disabled], .review-filter a { float: right; }
.review-filter button[disabled] b, .review-filter a b { padding: 0px 25px 0px 5px; background-image: url(../images/pfeil-unten.png); background-size: auto 8px; background-position: 110% center; }

.pagination button { font-size: 0.9em; }
.review-filter button:hover, .review-filter button.aktiv, .pagination button:hover, .pagination button.aktiv { background: var(--bg-dark); border: 2px var(--bg-dark) solid; color: #FFFFFF; }
.review-filter button:hover b { color: #FFFFFF; }

.pagination { display: flex; gap: 3px; margin-top: 10px; margin-left: 20px; flex-wrap: wrap; padding: 10px 0px; text-align: left; }
.pagination { float: left; width: calc(100% - 20px - 220px); font-size: 0.8em; }
.pagination_text { display: inline-block; float: right; width: 200px; font-size: 0.8em; color: var(--main-color); margin-top: 10px; text-align: right; }


/* Socials */
#socials { display: block; float: left; width: 200px; margin-top: 10px; }
#socials a { display: inline-block; float: left; width: 40px; height: 40px; background-image: url(../images/socials_hover.png); background-size: 240px 80px; background-repeat: none; opacity: 0.5; }
#socials a:hover { opacity: 1.0; }
#socials a.youtube { background-position: 0px 40px; } #socials a.youtube:hover { background-position: 0px 0px; }
#socials a.instagram { background-position: -40px 40px; } #socials a.instagram:hover { background-position: -40px 0px; }
#socials a.facebook { background-position: -80px 40px; } #socials a.facebook:hover { background-position: -80px 0px; }
#socials a.whatsapp { background-position: -120px 40px; } #socials a.whatsapp:hover { background-position: -120px 0px; }
#socials a.linkedin { background-position: -160px 40px; } #socials a.linkedin:hover { background-position: -160px 0px; }
#socials a.tiktok { background-position: -200px 40px; } #socials a.tiktok:hover { background-position: -200px 0px; }


/* Sterne */
.sterne { display: inline-block; padding: 2px 0px 2px 0px; margin: 0px 0px 0px 0px; text-align: left; font-size: 1.0em; border: 0px #000000 solid; }
.sterne a { text-decoration: none; var(--font-color2); }
.sterne b { display: inline-block; padding: 0px 0px 0px 110px; margin: 2px 0px 0px 0px; text-align: left; color: var(--font-color2); background-repeat: no-repeat; background-size: auto 20px; background-position: left center; }
.sterne b.s5 { background-image: url(../images/stars_5.png); }
.sterne b.s4 { background-image: url(../images/stars_4.png); }
.sterne b.s45 { background-image: url(../images/stars_4-5.png); }
.sterne b.s3 { background-image: url(../images/stars_3.png); }
.sterne b.s35 { background-image: url(../images/stars_3-5.png); }
.sterne b.s2 { background-image: url(../images/stars_2.png); }
.sterne b.s25 { background-image: url(../images/stars_2-5.png); }
.sterne b.s1 { background-image: url(../images/stars_1.png); }
.sterne b.s15 { background-image: url(../images/stars_1-5.png); }
.sterne b.s05 { background-image: url(../images/stars_0-5.png); }
.sterne b span { display: inline-block; padding: 2px 0px 0px 10px; margin: 0px 0px 0px 10px; text-align: left; color: var(--font-color2); border-left: 2px var(--font-color2) solid; }

#hero .sterne { margin-top: 10px; font-size: 0.8em; }
#reviews .sterne { float: left; text-align: left; }


/* Kontakt */
#kontakt-form {}
#kontakt-form .formular { float: left; width: calc(100% - 300px - 40px - 40px); padding: 10px 20px; }
#kontakt-form .info { float: left; width: 280px; padding: 10px 20px; }

#kontakt-form .formular form { margin: 10px 0px; }
#kontakt-form .formular form label { display: block; width: calc(50% - 10px); margin: 5px 0px 10px 0px; color: var(--font-color3); }
#kontakt-form .formular form label.full { display: block; width: calc(100% - 0px); margin: 5px 0px 10px 0px; }
#kontakt-form .formular form label span { display: block; font-size: 0.8em; color: var(--font-color3); }
#kontakt-form .formular form input,
#kontakt-form .formular form textarea { display: block; width: calc(100% - 20px - 2px); font-size: 1.0em; }
#kontakt-form .formular form select { display: block; width: calc(100% - 4px); font-size: 1.0em; }
#kontakt-form .formular form input[type="checkbox"] { display: none; }
#kontakt-form .formular form input[type="submit"] { width: 100%; text-align: center; margin-top: 10px; }
#kontakt-form .formular form .error { border-color: #ff0000 !important; }

#kontakt-form .formular form #box_datenschutz { display: block; border: 2px #FFFFFF solid; margin: 10px 0px 5px 0px; padding: 3px; color: var(--font-color3); }

#kontakt-form .info { float: right; color: var(--font-color3); }
#kontakt-form .info .text { float: left; width: 300px; font-size: 0.9em; }
#kontakt-form .info .text .hotline { margin-bottom: 10px; }
#kontakt-form .info .text .hotline a { font-size: 1.3em; margin-bottom: 10px; }
#kontakt-form .info .text .hotline a span { font-size: 0.7em; }
#kontakt-form .info li { font-size: 1.0em; margin: 10px 0px; text-align: left; }


/* PU */
.info-pu { cursor: pointer; }
#pu {
         display: none;
         position: fixed;
         z-index: 500;
         top: 20%;
         left: calc(50% - 300px - 20px);
         cursor: pointer;

         width: 600px;
         height: auto;
         padding: 10px 20px;
         background: #FFFFFF;

         border: 5px var(--main-color) solid;
         -webkit-border-radius: 10px;
         -moz-border-radius: 10px;
         border-radius: 10px;

         -webkit-box-shadow: 0px 0px 50px 0px rgba(0, 65, 120, 0.5);
         -moz-box-shadow: 0px 0px 50px 0px rgba(0, 65, 120, 0.5);
         box-shadow: 0px 0px 50px 0px rgba(0, 65, 120, 0.5);


}
#pu .item { display: none; text-align: left; font-size: 0.9em; color: #000000; }
#pu .item img { width: 100%; height: auto; }
#pu .item.active { display: block; }

#pu .x {
         display: block;
         position: absolute;
         left: 628px;
         margin-top: -22px;

         background: var(--main-color-dark);

         width: 25px;
         line-height: 25px;

         font-weight: bold;
         text-align: center;
         color: #FFFFFF;

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

/* Sonstiges */
#w { display: none; z-index: 100; left: 0; bottom: 0px; padding: 5px 10px; color: #FFFFFF; position: fixed; background: #000000; }
#shadow { display: none; position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 150; background: rgba(0,0,0,0.3); width: 100%; height: 100%; cursor: pointer; }
.noScroll { overflow: hidden; position: fixed; }

/* Formulare */
#error_massage {
         display: block;
         width: calc(100% - 80px) !important;
         background: #DF0000 !important;

         margin: 20px 20px !important;
         padding: 10px 20px;

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

         text-align: center;
         color: #FFFFFF;
}
#error_massage.hide { display: none; }

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

         padding: 6px 8px 6px 8px;
         margin: 2px 5px 2px 0px;

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

         vertical-align: top;
         -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);

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

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

         background: var(--second-color) url(../images/icon_arrow_r.png) 97% center no-repeat;
         background-size: auto 60%;

         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: 6px;
         -moz-border-radius: 6px;
         border-radius: 6px;

         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(--second-color-dark) url(../images/icon_arrow_r.png) 97% center no-repeat;
        background-size: auto 60%;
}

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