/*
 Theme Name:   Infratouch Divi Child
 Theme URI:    http://www.elegantthemes.com
 Description:  Infratouch Divi Child Theme
 Author:       Sabrina Schulz
 Author URI:   https://infratouch.de
 Template:     Divi
 Version:      1.0
*/

:root {
  	--creme:#FFF0C3;
	--orange:#E84E0F;
	--progress-background: #f3f3f3;
	--active-color: #fff;
	--inactive-color: #ccc;
	--step-number-border: #f2df2f;
	--headerfont:'Ubuntu',Helvetica,Arial,Lucida,sans-serif;
	--bodyfont:Open Sans,Arial,sans-serif;

}

body {hyphens:auto; white-space: normal;}


/* Globaler Flex Container */
.flex-container {display: -ms-flex;display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;}
.flex-container-row {display: -ms-flex;display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; flex-wrap: nowrap;-ms-flex-wrap: nowrap;flex-wrap: nowrap;}
.flex-container-row-wrap {display: -ms-flex;display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;}
.flex-item {-ms-flex-order: 0; -webkit-box-ordinal-group: 1; order: 0; -ms-flex: 0 1 auto; -webkit-box-flex: 0; flex: 0 1 auto; -webkit-align-self: auto; -ms-flex-item-align: auto; -ms-grid-row-align: auto; align-self: auto;}

/* Fonts */
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5 {font-family: var(--headerfont)}
body {font-family: var(--bodyfont)}

.et_pb_module.et_pb_text h1{font-size:calc(40px + (50 - 40)*((100vw - 300px)/(1600 - 300)));font-weight:900}
.et_pb_module.et_pb_text h2{font-size:calc(20px + (30 - 20)*((100vw - 300px)/(1600 - 300)));font-weight:600}
.et_pb_module.et_pb_text h3{font-size:calc(18px + (20 - 18)*((100vw - 300px)/(1600 - 300)))}
.et_pb_module.et_pb_text h4{font-size:calc(16px + (18 - 16)*((100vw - 300px)/(1600 - 300)))}
.et_pb_module.et_pb_text h5{font-size:calc(14px + (16 - 14)*((100vw - 300px)/(1600 - 300)));font-weight:900}
.et_pb_module.et_pb_text h6{font-size:calc(12px + (14 - 12)*((100vw - 300px)/(1600 - 300)))}


/* MENÜ */
.et_mobile_menu li a{font-size:12px!important; padding: 2px!important}


/*Floating Menü*/
.menu-flottant{width:280px;float:right;position:fixed;z-index:998;top:35%;font-size:18px;line-height:2px;color:var(--orange);font-weight:700;right:-240px}.menu-flottant ul{list-style:none;margin:0;padding:0}.menu-flottant ul li{display:block;background-color:var(--orange);height:2em;position:relative;-webkit-transition:-webkit-transform 0.5s;-webkit-transition:-webkit-transform .5s;transition:-webkit-transform .5s;-o-transition:transform .5s;transition:transform .5s;transition:transform .5s,-webkit-transform .5s;-webkit-box-shadow:0 0 6px 1px rgba(0,0,0,.5);box-shadow:0 0 6px 1px rgba(0,0,0,.5);margin:15px 0}.menu-flottant ul li:hover{-webkit-transform:translateX(-240px);-ms-transform:translateX(-240px);transform:translateX(-240px)}.menu-flottant ul li a{display:block;color:#fff;text-decoration:none;position:absolute;top:0;bottom:0;margin:0 auto;padding:.2em .8em}.menu-flottant ul li a:hover{color:#fff!important}.menu-flottant ul li span{float:left;line-height:1.5em;height:2em;padding-bottom:1em}.menu-flottant .svg-inline--fa{margin-right:20px;font-size:18px}

/*Leistungen*/

#leistungen .et_pb_module_header {background-color: var(--orange); margin:0; display:flex;justify-content: center;align-items: center;min-height:60px}
@media (min-width: 981px) {#leistungen .et_pb_portfolio_item {width: 24%; margin-right: 1%; margin-bottom:1%}}

/* Flip Cards */
.flip_cards_3d {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 1980px;
  width: 80%;
	padding:0;
	background-color: var(--creme);
	gap:20px
}

.flip_cards_3d .row_flip_box {
  background-color: transparent;
  flex: 0 1 32%;
  min-width: 300px;
  height: 300px;
  perspective: 1000px;
	padding:0
	
}

.flip_cards_3d .column_flip_box {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 1.2s cubic-bezier(0.5, 1.3, 0.5, 1.3);
  transform-style: preserve-3d;
}

.flip_cards_3d .row_flip_box:hover .column_flip_box {
  transform: rotateY(180deg);
}

.flip_cards_3d .flip_front_text,
.flip_cards_3d .flip_back_text {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  backface-visibility: hidden;
  box-shadow: 0 12px 18px -6px rgba(0, 0, 0, 0.2);
  transform-style: preserve-3d;
}

.flip_cards_3d .flip_front_text {
  background-blend-mode: overlay;
    background-size: cover!important;
	background-position: center!important;
}


.flip_cards_3d .flip_front_text .et_pb_blurb_content{height:100%}
.flip_cards_3d .flip_front_text .et_pb_module_header {background-color:var(--orange)}
.flip_cards_3d .flip_back_text {background-color: var(--orange);transform: rotateY(180deg); color:#fff}
.flip_cards_3d .flip_front_text .et_pb_text_inner,
.flip_cards_3d .flip_back_text .et_pb_text_inner {
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transform: translateZ(50px);
  font-size: 16px}
.flip_cards_3d .flip_back_text .et_pb_text_inner p{margin-bottom:20px}
.flip_front_text .et_pb_blurb_container {display: flex;flex-direction: column;justify-content: flex-end;height: 100%}
.flip_cards_3d .flip_front_text .et_pb_module_header {color: #fff;font-size: 18px!important;line-height: 1.2em!important;font-weight: 500;text-align: center;padding-top: 10px}

.flip_cards_3d .flip_front_text .et_pb_blurb_description {position: absolute;bottom: 0;right: 0;color: #fff;background-color: var(--red);width: 40px;height: 40px;padding: 10px}

@media only screen and (max-width: 980px) {
  .flip_cards_3d {width: 90%;flex-wrap: wrap;flex-direction: row}
  .flip_cards_3d .row_flip_box {min-width: 300px;width: 90%;height: 300px}
  .flip_cards_3d .flip_back_text .et_pb_text_inner {font-size: 14px}
}

/* Button Style */
.mehrerfahren {background-color: #fff;color: var(--orange);padding: 10px 15px;border: 2px solid var(--orange);border-radius: 0;font-size: 16px}
.mehrerfahren:hover {cursor: pointer}

/*Slick slider*/
.slick-list{position:relative;display:block;overflow-x:hidden;margin:0;padding:0 0 0}
.slick-track:before,.slick-track:after{display:table;content:''}
.slick-slide{position:relative;float:left;height:100%;min-height:1px}.slick-arrow,.slick-arrow:hover,.slick-arrow:focus{position:absolute;font-size:0;line-height:0;padding:0;color:transparent;outline:none;background:rgba(0,0,0,.06);border:none;cursor:pointer;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);z-index:100;height:40px;vertical-align:middle;border-radius:50%;width:40px}

.slick-arrow,.slick-arrow:hover,.slick-arrow:focus{top:40%}.slick-prev{left:-5%}.slick-next{right:-5%}
.slick-arrow:before{font-family:ETmodules;color:#000;background:transparent;opacity:1;font-size:40px;vertical-align:middle;color:var(--orange);text-align:center}
.slick-arrow:hover:before{opacity:.8}.slick-prev:before{content:'\34'}.slick-next:before{content:'\35'}
ul.slick-dots{position:absolute;bottom:0;display:block;width:100%;padding:0;margin:0;list-style:none;text-align:center}
.slick-dots{text-align:center}.slick-dots li{position:relative;display:inline-block;margin:0 5px;padding:0;cursor:pointer}
.slick-dots li button{font-size:0;line-height:0;display:block;width:10px;height:10px;padding:0;cursor:pointer;color:transparent;border:0;outline:none;background-color:rgba(0,0,0,.06);border-radius:10px}
.slick-dots li.slick-active button{background-color:var(--orange)}

.slick-dot-title{display:none!important}
.slider-blurb .et_pb_blurb_content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-line-pack:center;align-content:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}
.slider-blurb .et_pb_blurb_container{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.slider-blurb .et_pb_main_blurb_image{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}

.slider-blurb{margin-bottom:0!important; padding:0 10px 20px 10px}


/* ==========================================================================
 Kontaktformular
========================================================================== */
.wpcf7-text, .wpcf7-textarea, wpcf7-list-item, .wpcf7-captchar {background-color: #ebebeb !important;border: none;width: 100% !important;-moz-border-radius: 0 !important;-webkit-border-radius: 0 !important;border-radius: 0 !important;font-size: 14px;color: #090000 !important;padding: 8px !important;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}

.wpcf7-submit {margin: 15px auto;font-size: 16px;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;padding: 6px 20px;line-height: 1.7em;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;-moz-transition: all 0.2s;-webkit-transition: all 0.2s;transition: all 0.2s;}
.wpcf7-submit:hover {padding: 6px 20px !important}

.wpcf7-form-control-wrap input[type="text"], .wpcf7-form-control-wrap textarea, .wpcf7-form-control-wrap select {background-color: #ebebeb;color: #090000;border-radius: 0px;margin: 0px;	border-top:none;border-left:none;border-right:none;border-bottom: 2px solid var(--orange)}

.wpcf7-form-control-wrap input[type="text"],.wps-form input[type=tel], .wps-form input[type=email]{padding: 20px 5px!important}
.wpcf7-form-control-wrap select {padding: 8px 5px!important}

.wps-form input[type=tel], .wps-form input[type=email]{border-top:none;border-left:none;border-right:none;border-bottom: 2px solid var(--orange)!important}

.wpcf7-form-control-wrap select {background: #eee !important;}
span.kontakt.wpcf7-list-item {display: block;background: #eee !important;}

.wps-form {width: 100%;margin: 10px auto;}
.wps-form-row .wpcf7-form-control {width: 100%;}
.wps-anrede {margin-top:1em}
.wps-produkte {flex: 1; -webkit-flex: 1; -ms-flex:1; width: 100%;margin-bottom:1em}

.wps-form input.text, .wps-form input.title, .wps-form input[type=email], .wps-form input[type=password], .wps-form input[type=tel], .wps-form input[type=text], select, .wps-form textarea {font-size:1em;overflow: hidden;}

span.wpcf7-list-item {margin: 0 1em 0 0}

.wps-form input {width:20px; height:20px}
input[type=submit] {background:var(--orange)!important;color:#fff!important; border:none; float: right;font-weight:600}
.wpcf7 form .wpcf7-response-output, .wpcf7 form.sent .wpcf7-response-output {border: 2px solid var(--orange)}

.wps-form-row {margin-bottom:1em;gap:20px}


@media (min-width:767px) and (max-width: 1024px) {.two-columns-left,.two-columns-right, .two-columns-right-kon, .three-columns-left, .three-columns-center, .three-columns-right   {flex: 0 1 100%!important; -webkit-flex: 0 1 100%!important;-ms-flex: 0 1 100%!important}
.two-columns-right-kon, .two-columns-left-kon  {flex: 0 1 100%!important; -webkit-flex: 0 1 100%!important;-ms-flex: 0 1 100%!important;}
.wps-form-row {display: flex;display: -ms-flexbox;display: -webkit-flex;width: 100%;flex-direction: column;-webkit-flex-direction: column;-ms-flex-direction: column;}	 
.two-columns-right img {justify-content: center;-ms-flex-pack: center;justify-content: center}
}

.abstandhalter {height:30px}

@media (min-width: 1025px) {
.wps-form-row {display: flex;display: -ms-flexbox;display: -webkit-flex;width: 100%;flex-direction: row;-webkit-flex-direction: row;-ms-flex-direction: row;}
.two-columns-left,.two-columns-right, .three-columns-left, .three-columns-center, .three-columns-right  {flex: 0 1 50%;-webkit-flex: 0 1 50%; -ms-flex: 0 1 50%} 
.two-columns-right-kon, .two-columns-left-kon {flex: 0 1 50%;-webkit-flex: 0 1 50%; -ms-flex: 0 1 50%}}

.form-step{margin:40px 0.5em 0.5em 0.5em }
.form-step h2 {margin-bottom:0; font-size:24px}
.cf7mls_next.action-button, .cf7mls_back.action-button {background-color: var(--orange)!important;color:#fff!important}
.cf7mls_next {float:right}

.wpcf7-list-item-label {font-size:18px}
.wps-form-column div {margin:20px 0}
.wps-form-column {width:100%}
.formularinfo{font-size:12px}

/* Container für den Fortschrittsindikator */
.progress-container {background-color: var(--beige);padding: 20px;border-radius: 10px}

/* Flexbox für die Steps */
.progress-steps {display: flex;justify-content: space-between;margin-top: 10px;position: relative; border-bottom: 2px solid var(--orange)}

/* Einzelne Step-Klasse */
.step {flex: 1 1 20%;text-align: center;position: relative;}

@media (max-width:767px){
	.progress-container {padding:0}
	.step {display:none}
	.step.active {display:block}
}

/* Keine Linie vor dem ersten Step */
.step:first-child::before {content: none}

/* Aktive Step-Linie */
.step.active::before {background: var(--orange)}

/* Nummer des Steps */
.step-number {
    background-image: url('https://smile.infratouch-webdesign.de/wp-content/uploads/cropped-4smile_Splash_V2.png');
    background-size: contain; 
    color: #fff;
	text-align:center;
    font-weight: bold;
    font-size: 18px;
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 70px;
    margin-bottom: 10px;
	padding-left: 9px;
}

/* Stil für aktiven Step */

@media (min-width:768px){
	.step.active .step-number {color: #fff; width: 70px;height: 70px;padding-top: 4px; }
	.step.active .step-titel {padding: 10px 20px }
}

/* Zusätzliche Beschriftung im Step */
.step .step-titel {background-color: var(--orange);padding: 5px 10px;border-radius: 5px;font-weight: bold; color: #fff}

.step p {margin: 0}

footer #nav_menu-2{margin:0; width:100%}
.et_pb_widget ol li, .et_pb_widget ul li {margin:0}

#menu-footer {display: grid;grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));gap: 8px; list-style: none;padding: 0; margin: 0}
#menu-footer li {text-align: left}
#menu-footer li a {display: block}
@media (max-width: 600px) {#menu-footer {grid-template-columns: repeat(auto-fill, minmax(120px, 1fr))}}

#my-popup {transform: scale(0.95);transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),opacity 0.5s ease,background-color 0.5s ease;pointer-events: none}

/* Fullscreen aktiv */
#my-popup.fullscreen {position: fixed !important;top: 0;left: 0;width: 100vw !important;height: 100vh !important;z-index: 9999;background-color: rgba(232, 78, 15, 0.95);display: flex;justify-content: center;align-items: center;opacity: 1;transform: scale(1);pointer-events: auto}
#my-popup .et_pb_module {transition: background-color 0.5s ease, color 0.5s ease}

/* SMILE */
#faktoren {display:flex; flex-direction: row;flex-wrap: nowrap;align-items: center;gap:12px;justify-content: space-around;}
#faktoren .et_pb_text {min-width: 150px}
#faktoren .et_pb_text, #faktoren .et_pb_icon{  flex: 1 1 auto;   max-width:250px; min-height:150px; margin:0!important}
#faktoren .et_pb_text .faktor {font-size: calc(12px + (20 - 12)*((100vw - 300px)/(1600 - 300)));font-weight: 800}
#faktoren .et-pb-icon, #faktoren .versalie {font-weight: 800; color: var(--orange); font-size: calc(20px + (40 - 20)*((100vw - 300px)/(1600 - 300)))!important}

@media (max-width:1023px) {
#faktoren .fliesstext{display:none}
#faktoren .et_pb_text, #faktoren .et_pb_icon{ min-width: inherit;}
#faktoren .et_pb_text .faktor{position: absolute;bottom:0;transform: rotateZ(90deg); white-space: nowrap;}
#faktoren .et_pb_text .et_pb_text_inner {display:flex;justify-content: flex-start; align-items: center; flex-direction: column; flex-wrap: wrap; align-content: center;height:90px}}


.ctanumber {font-weight: 600; font-size:calc(20px + (40 - 20)*((100vw - 300px)/(1600 - 300)))}

#smileflex {scroll-behavior: smooth;-webkit-overflow-scrolling: touch}
#smileflex {display:flex; overflow-x: auto;gap: 1rem; padding-bottom: 0.5rem}
.smile {flex: 0 0 200px}
.smile .et_pb_module_header{margin-bottom: .7em}
.smile .et_pb_module_header span {display: block}
.smile .et_pb_module_header span::first-letter {
    font-size: 2em;    
    font-weight: bold;     
    float: left;          
    line-height: 1;      
    margin-right: 0.1em;   
    color: var(--orange);       
}

#menu-hauptmenue .sub-menu {width: 335px !important}


#iconlist, #logolist{display:flex; gap:20px}
.iconlistitem, .logolistitem {flex: 1 1 200px}
.iconlistitem .et_pb_module_header{font-size:calc(10px + (16 - 10)*((100vw - 300px)/(1600 - 300)))!important; line-height:14px!important}

.zone-check h3{color:#000;}
.zone-check{margin-bottom:15px;color:#000;}
#zone-check-form{display:flex;gap:10px;flex-wrap:wrap;}
#customer-address{flex:1;padding:10px 12px;border:1px solid #ccc;border-radius:6px;font-size:14px;}
#zone-check-form button{background:#E84E0F;color:#fff;border:none;padding:10px 16px;border-radius:6px;cursor:pointer;font-weight:600;transition:background .2s;}
#zone-check-form button:hover{background:#c9410c;}
#zone-result{margin-top:15px;font-weight:600;font-size:16px;}
.zone-check-description{margin-bottom:20px}
.zone1{color:#E84E0F;}
.zone2{color:#2e9f2e;}
.zone3{color:#888;}
.loading{color:#666;}

.zone-result-container{display:flex; gap:20px}