/*
 Theme Name:   Divi Child
 Description:  !!Enter Project Name Here!!
 Author:       Tobias Both
 Template:     Divi
 Version:      1.0
*/

/****************************************************************
************************ 1. BASE RULES **************************
****************************************************************/

@media (min-width:981px) and (max-width:1024px) {
    :root, body {
        font-size:15px !important;
    }
    .et_pb_module_header {
        font-size:155% !important;
    }
    .et_pb_button {
        font-size:13px !important;
    }
}

/*
** Body 
*/

body p, body input, body ul, body li, body span, body .et_pb_module {
    font-weight:300 !important;
}

h1,h2,h3,h4,h5,h6 {
    font-weight:300 !important;
}

/****************************************************************
************************ 2. LAYOUT RULES ************************
****************************************************************/

/* 
****************************
body border 
****************************
*/

#top, #bottom, #left, #right {
    background: #fff;	
    position: fixed; 
    z-index:9999;
}
#left, #right {
    top: 0; bottom: 0; 
    width: 16px;
}
#left {left: 0;}
#right {right: 0;}
#top, #bottom {
    left: 0; right: 0; 
    height: 16px;
}
#top { top: 0; }
#bottom { bottom: 0;}


/* 
****************************
Header & Navigation
****************************
*/


/* Jumping Header Fix */
@media (min-width:981px){
    #page-container {
        padding-top: 130px !important;
    }
    #main-header {
        top: 35px !important;
    }
    body.admin-bar.et_fixed_nav.et_secondary_nav_enabled #main-header {
        top: 67px !important;
    }
}

/* Schriftstärke anpassen */
#top-header .container, #top-menu li a {
    font-weight:400;
}

/* Aktuellen Hauptmenü-Link unterstreichen */
#top-menu li.current-menu-item>a:before, #top-menu li.current-menu-ancestor>a:before {
content:"";
background: #81ac70;
width:100%; 
height:4px; /* Hier Linienhöhe wie gewünscht ändern */
position:absolute;
left:0; bottom:0;
}
#top-menu .sub-menu li.current-menu-item>a:before {
    display: none;
}

/* Aktuellen Hauptmenülink Farbe ändern */
#top-menu li.current-menu-ancestor>a, #top-menu li.current-menu-item>a {
    color: #81ac70;
}

/* Hauptmenü-Link als Button anzeigen */
@media (min-width:1221px) {
    .bf-menu-cta a, .et-fixed-header #top-menu .bf-menu-cta a {
         background: #81ac70;
         color: #fff !important; 
         padding: .7em 1em !important; 
         border-radius: 4px;
        box-shadow: 0 1px 2px rgba(0,0,0,.35);
    }
    .et-fixed-header #top-menu li.current-menu-item.bf-menu-cta a {
        color: #fff!important;
    }
}

@media (min-width: 981px) {
    .et_header_style_left #et-top-navigation {
         padding-top:calc(40px - .7rem) !important;
    }
    .et_header_style_left .et-fixed-header #et-top-navigation {
         padding-top:calc(30px - .7rem) !important;
    }
    .et_header_style_left .et-fixed-header #et-top-navigation nav>ul>li>a, 
    .et_header_style_split .et-fixed-header #et-top-navigation nav>ul>li>a {
         padding-bottom: 40px;
    }
}

/* Dropdown Menu Styles */
.nav li ul {
    padding:0 !important;
    width:240px;
}
#top-menu li li {
    padding: 0;
    width:100%;
    border-bottom:1px solid #222;
}
#top-menu li li a {
    padding: 6px 12px;
    width: 100%;
}
#top-menu li li a:after {
    content: '5';
    font-family: ETmodules!important;
    speak: none;
    font-size: 1.5em;
    color: inherit;
    position: absolute;
    right: .5rem;
}
#main-header .nav li ul a {
    color:#fff !important;
    font-size:.9rem;
}

/* Mobile Menu Styling */ 
.et_mobile_menu {
    background: #0D0D0D;
}
.et_mobile_menu a {
    color:#fff !important;
}

/* Mobile Menu Collapse */ 
#main-header .et_mobile_menu li ul.hide {
display: none !important;
}
 
#mobile_menu .menu-item-has-children {
    position: relative;
}
#mobile_menu .menu-item-has-children > a {
    background: transparent;
}
 
#mobile_menu .menu-item-has-children > a + span {
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px 20px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    z-index: 3;
}
 
span.menu-closed:before {
    content: "\4c";
    display: block;
    color: inherit;
    font-size: 16px;
    font-family: ETmodules;
}
 
span.menu-closed.menu-open:before {
    content: "\4d";
}

/* Hauptmenü mobilen Breakpoint ändern */
@media (max-width: 1300px) {
     #et_mobile_nav_menu {display: block;} 
     #top-menu {display: none;}
}

/* Hauptmenü auf Tablets und kleinen Laptops verkleinern */
@media (min-width:768px) and (max-width:1220px) {
    
    .et_mobile_menu {
        width:300px;
        padding:1rem;
        left:inherit;
        right: 0;
    }
}

/* 
****************************
Body
****************************
*/

.et_pb_row, .container {
    width:calc(90% - 30px);
}

/* Anpassung Breakpoint - Startseite Technologie Kacheln */
@media (max-width:1290px){
    .bf-technologie-tiles {
        flex-wrap: wrap;
    }
    .bf-technologie-tiles .et_pb_column_1_4 {
        min-width:50% !important;
    }    
}
@media (min-width:981px) and (max-width:1290px) {
    .bf-technologie-tiles .et_pb_column_1_4 {
        margin-bottom:10px;
    }
}


/* 
****************************
Footer & Infoline
****************************
*/

/* Logo Divider */
#logo-divider {
    padding:4% 0 0;
}
#logo-divider .container {
    display: flex;
    flex-direction: row;
    align-items:center;
    justify-content: space-between;
    border-bottom:2px solid #222;
    padding:.5rem 0;
}
#footer-widgets {
    padding: 4% 0;
}
#social-media-container {
    width:100px;
    color:#fff;
    font-size:1.7rem;
    text-align: right;
}
#social-media-container a {
    color:#fff;
    margin-left:5px;
}
@media (max-width:425px) {
    #logo-divider {
        padding:10% 0 0;
    }
    #logo-divider .container {
        flex-direction: column;
        margin-bottom:1rem;
    }
    #social-media-container {
        text-align: center;
        margin:1rem 0;
    }
}

/* Footer Menu Styles */
#footer-widgets .footer-widget li {
    border-bottom:1px solid #222;
    margin:0;
    padding:.5em 0;
    width:100%;
}
#main-footer .et_pb_widget {
    min-width:100%;
}
#footer-widgets .footer-widget li:before {
    display: none;
}
#footer-widgets .footer-widget li:after {
    content:'5';
    font-family: ETmodules!important;
    speak: none;
    font-size:1.5em;
    color:#fff;
    position:absolute;
    right:0;
}
/* Footer-Widget Titel Unterstrich */
#main-footer .title {
    position: relative; 
    margin-bottom:1rem;
    padding-bottom:1em;
}
#main-footer .title:before {
    background: #81ac70;
    content:"";
    width:34px; height:2px;
    position:absolute;
    left:0; bottom:0;    
}

/* Footer Widgets Breakpoint Fix */
@media (min-width:981px) and (max-width: 1024px) {
    .footer-widget:nth-child(n) {
        width: 45%!important;
        margin: 0 5% 7.5% 0!important;
    }
}

/* Infoline Styles */
#footer-bottom {
    font-size:1rem;
    background: #000 !important;
}
@media (max-width:425px) {
    #footer-bottom {
        font-size:.8rem;
    }
}
#footer-bottom .container {
    padding:1rem 0 0;
}
.bf-footer-credentials, .bf-legal-footer-menu {
    padding-bottom:1.2rem;
}
.bf-footer-credentials a {
    display: inline-block;
}

/* Infoline Breakpoint */
@media (min-width:1200px) {
    .bf-footer-credentials, .bf-legal-footer-menu {
        display: inline-block;
        width: auto;
    }    
    .bf-footer-credentials {
        float: left;
    }
    .bf-legal-footer-menu {
        float: right;
    } 
}

/* Infoline rechtliches Menü */
.bf-legal-footer-menu li {
    display: inline-block;
    padding:0 .5rem 30px .5rem;
    position: relative;
    line-height: 1rem;
    margin-left:-4px;
}
.bf-legal-footer-menu li:first-child {
    padding-left:0;
    margin-left:0;
}
.bf-legal-footer-menu li:last-child {
    padding-right: 0;
}
.bf-legal-footer-menu li:after {
    content: "";
    width: 1px; height:1rem;
    background: #555;
    position: absolute;
    right: 0; top: 0;
}
.bf-legal-footer-menu li:last-child:after {
    display: none;
}


/****************************************************************
********************** 3. MODULES RULES *************************
****************************************************************/

/* Akkordeon */
.et_pb_toggle_title:before {
    content:"3";
    font-size:1.5em;
}
.et_pb_toggle_open .et_pb_toggle_title:before {
	display: block !important;
	content: "2";
}

/* Slider */
.bf-main-slider {
    width:calc(100% - 30px);
    margin: 0 auto;
}
.bf-main-slider .et_pb_slide:before {
    content: "";
    width: 100%;
    height: 500px;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+100 */
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    position: absolute;
    left: 0;
    bottom: 0;
    z-index:1;
}

@media (min-width:981px) {
    .bf-main-slider .et_pb_slide_description {
        width: 50%;
        max-width:750px;
        margin-left:0;
    }
}

/* Slider Tablet Fix */
@media (min-width:426px) and (max-width:980px) {
    .bf-main-slider .et_pb_slide {
        background-size: contain;
        background-position:top left !important;
        height: 65vw;
        padding:0;
    }
    .bf-main-slider .et_pb_slide_description {
        position: absolute;
        bottom:0; left:0;
        background:#0D0D0D;
        padding:1.3rem calc(1.3rem + 15px) 1.3rem calc(1.3rem + 15px) !important;
        height:45%;
        animation: none;
    }
    .bf-main-slider .et_pb_slide_description .et_pb_button {
        margin-top:.5rem;
    }
    .bf-main-slider .et-pb-controllers {
        bottom:.5rem;
    }
}

/* Smartphones */
@media (max-width:425px) {
    .bf-main-slider .et_pb_slide:before {
        display: none;
    }
    .bf-main-slider .et_pb_slide {
        background-size: contain;
        background-position:top left !important;
        height: 75vw;
        padding:0;
    }
    .bf-main-slider .et_pb_slide_description {
        position: absolute;
        bottom:0; left:0;
        background:#0D0D0D;
        padding:1.3rem 1rem !important;
        height:55%;
        animation: none;
    }
    .bf-main-slider .et_pb_slide_description .et_pb_button {
        margin-top:0;
    }
    .bf-main-slider .et-pb-controllers {
        text-align:right !important;
        padding-right: 1.3rem !important;
    }
    .bf-main-slider .et-pb-controllers a {
        text-indent: 9999px !important;
    }
    
    .bf-main-slider .et-pb-arrow-prev, .bf-main-slider .et-pb-arrow-next {
        top:24%;
        font-size:2.4rem;
    }
}

.et-pb-controllers a {
    border-radius:0;
    width:20px;
    height:3px;
}
@media (max-width:980px){
    .et_pb_slide_description h2.et_pb_slide_title {
        font-weight: 300;
    }
}

/* Sidebar */
.et_pb_widget_area ul .current_page_item a {
    color:#81ac70 !important;
}
.et_pb_widget_area ul li {
    border-bottom:1px solid #eee;
    padding:.4rem 0;
    margin:0;
}
.et_pb_widget_area ul a:after {
    content: '5';
    font-family: ETmodules!important;
    speak: none;
    font-size: 1.5em;
    color: inherit;
    position: absolute;
    right: 1rem;
}

/* Video */

video::-internal-media-controls-download-button {
    display:none !important;
}

video::-webkit-media-controls-enclosure {
    overflow:hidden !important;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Adjust as needed */
}


/* Kontaktformular */

.form-row {width: 100%; padding:10px 0;}
.form-row p {
    margin-bottom:12px;
    padding-bottom:0px;
    text-transform: uppercase;
    color:#1A222F;
    font-weight:600;
}
.column-half, .column-quarter {
    float: left;
	position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.column-half {width:100%;}
.column-quarter {width:50%;}

.form-col-left {padding:0 10px 0px 0;}
.form-col-right {padding:0 0 0px 10px;}

span.wpcf7-list-item {margin-left:0 !important;}
.clearfix:after {content: "";display: table;clear: both;}

.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea, .wpcf7 input[type="tel"], .wpcf7 select {
	width: 100%;
    font-size:1rem;
	padding: 14px;
	background:#fff;
    border:1px solid #DCE3E7;
	-webkit-box-sizing: border-box;
	 -moz-box-sizing: border-box;
	      box-sizing: border-box;
}

label .wpcf7-list-item-label {font-size: 16px; color:#666 !important;}

.wpcf7 input:focus, .wpcf7 textarea:focus{
    -webkit-box-shadow:inset 0px 0px 0px 3px #81ac70;
    -moz-box-shadow:inset 0px 0px 0px 3px #81ac70;
    box-shadow:inset 0px 0px 0px 3px #81ac70;
}

.wpcf7 textarea {height:256px;}

.wpcf7-submit{
	display:block !important;
    font-size:1rem;
	background: #81ac70;
	color: #fff;
	border: none;
    border-radius: 4px;
    padding:.7rem 1.4rem;
	cursor: pointer;
    font-weight:600;
}

.wpcf7-submit:hover{
	background:#bf5630;
    -webkit-transition: background 200ms ease-in-out; /* Firefox */
    -moz-transition: background 200ms ease-in-out; /* WebKit */
    -o-transition: background 200ms ease-in-out; /* Opera */
    transition: background 200ms ease-in-out; /* Standard */
}

span.wpcf7-not-valid-tip{
	text-shadow: none;
	font-size: 14px;
	color: #D24335;
	background: transparent;
	padding: 5px;
}

div.wpcf7-validation-errors { 
	text-shadow: none;
	border: transparent;
	background: #FFE29E;
	padding: 20px;
	color: #9C6533;
	text-align: center;
	margin-top: 50px !important;
	font-size: 16px;
}

div.wpcf7-mail-sent-ok{
	text-align: center;
	text-shadow: none;
	padding: 20px;
	font-size: 16px;
	background: #8EDA89;
	border-color: #8EDA89;
	color: #fff;
	margin-top: 50px !important;
}

.ssl-info {font-size:16px;}
.ssl-info .lnr {color:#0D8A74;}

/* Responsive Styles - Local Kontaktformular */

@media (max-width:1500px) { 
    .form-column-half {width:100% !important;}
}

@media (max-width:660px) {
    .et_pb_text .form-row column-quarter.form-col-right.senden-button {width:100% !important;}
}

@media (max-width:425px) {
    .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea, .wpcf7 input[type="tel"], .wpcf7 select {font-size:16px;}
}


/****************************************************************
********************** 4. HOVER EFFECTS *************************
****************************************************************/

@media (min-width:980px) {    
    .image-hover.et_pb_image {position: relative; overflow: hidden;}
 
    .image-hover img {
        margin-bottom: -5px;
        -webkit-transition: -webkit-transform 0.3s;
        transition: transform 0.5s;
        -webkit-transform: scale(1.0);
        transform: scale(1.0);}
 
    .image-hover img:hover {
        -webkit-transform: scale(1.05);
        transform: scale(1.05);}
    }
}