/*
Theme Name:     deutronic_V03
Description:    
Author:         Thomas Vonier
Template:       Divi
Version:        3.0.2
(optional values you can add: Theme URI, Author URI, Version, License, License URI, Tags, Text Domain)
*/


/* =====================================================================
   1. CONTACT FORM 7 – FORMULAR-LAYOUT & STYLING
   ===================================================================== */

/* Border-Box überall im Formular erzwingen, damit Padding/Border
   die deklarierte Breite nicht mehr verfälschen */
.wpcf7-form,
.wpcf7-form *,
.wpcf7-form *::before,
.wpcf7-form *::after {
    box-sizing: border-box;
}

/* --- Spalten-Layout (one-half / one-third) --- */
.wpcf7-form .one-half,
.wpcf7-form .one-third {
    position: relative;
    margin-right: 4%;
    float: left;
    margin-bottom: 20px;
}
.wpcf7-form .one-half { width: 48%; }
.wpcf7-form .one-third { width: 30.66%; }

.wpcf7-form .last {
    margin-right: 0 !important;
    clear: right;
}

/* --- Formular-Rahmen (Hintergrundfarbe/Textfarbe der ganzen Box) --- */
div.wpcf7 {
    margin: 0;
    padding: 40px 20px;
    color: #fff;
}
div.wpcf7 h5 {
    color: #fff;
    font-weight: bold;
}
div.wpcf7 a {
    color: #fff;
    text-decoration: underline;
}

/* --- Zeilen: Label + Feld nebeneinander, vertikal zentriert --- */
.wpcf7-form .wpcf7_row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
}
.wpcf7-form .wpcf7_row label {
    flex: 0 0 180px;
    max-width: 180px;
    padding-right: 15px;
}

/* Feld selbst UND den von CF7 automatisch erzeugten Wrapper-Span
   auf block + 100% zwingen -> behebt unterschiedliche Feldbreiten */
.wpcf7-form .wpcf7_row .formfield {
    flex: 1 1 220px;
}
.wpcf7-form .wpcf7_row .formfield,
.wpcf7-form .wpcf7_row .formfield .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* --- Zwischenüberschriften (Ansprechpartner / Kontaktdaten / Nachricht) --- */
.wpcf7-form .wpcf7_row h5 {
    flex: 1 0 100%;
    margin: 22px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, .25);
}
.wpcf7-form .wpcf7_row:first-child h5 {
    margin-top: 0;
}

/* --- Zustimmungs-Zeile (Checkbox + Fließtext) nicht wie Label/Feld behandeln --- */
.wpcf7-form .wpcf7_row:has(.wpcf7-acceptance) {
    display: block;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* --- Mobile: Label über statt neben dem Feld --- */
@media only screen and (max-width: 970px) {
    .wpcf7-form .one-half,
    .wpcf7-form .one-third {
        width: 100%;
        margin-right: 0;
        float: none;
    }
    .wpcf7-form .wpcf7_row {
        flex-direction: column;
        align-items: stretch;
    }
    .wpcf7-form .wpcf7_row label {
        max-width: 100%;
        margin-bottom: 4px;
    }
}

/* --- Eingabefelder einheitlich --- */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="password"],
.wpcf7-form textarea,
.wpcf7-form select {
    font-size: inherit;
    width: 100%;
    min-height: 38px;
    padding: 6px 10px;
    border-radius: 3px;
    border: 2px solid transparent;
    box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.1) inset;
    background: #ccc;
}
.wpcf7-form textarea {
    min-height: auto;
}

/* --- Submit-Button --- */
.wpcf7-form .wpcf7-form-control.wpcf7-submit {
    background: #db1037;
    border: medium none;
    border-radius: 3px;
    color: #ffffff;
    font-size: 100%;
    font-weight: 900;
    padding: 8px 20px;
    line-height: 1.7em;
    cursor: pointer;
}
.wpcf7-form .btn_submit {
    clear: both;
    text-align: right;
    margin-top: 10px;
}

/* --- Hover / Focus --- */
.wpcf7-form input:hover,
.wpcf7-form textarea:hover,
.wpcf7-form select:hover {
    background: #fff;
    transition: background .2s ease-in-out;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
    background: #fff;
    border-color: #db1037;
    outline: none;
}

/* --- Fehler-Status --- */
.wpcf7-form .wpcf7-validation-errors {
    background: #ff0000 none repeat scroll 0 0;
    color: #ffffff;
    border: none !important;
}
.wpcf7-form .wpcf7-not-valid {
    border-color: red !important;
}
.wpcf7-form .wpcf7-not-valid-tip {
    display: none !important;
}

/* --- Erfolgs-Status --- */
.wpcf7-form .wpcf7-mail-sent-ok {
    background: #8fc106;
    color: #ffffff;
    border: none !important;
}

/* --- Überschriften innerhalb des Formulars --- */
.wpcf7-form h3,
.wpcf7-form h4 {
    color: #fff;
}


/* =====================================================================
   2. HEADER & NAVIGATION
   ===================================================================== */

/* --- In-Page-Navigation: Untermenü-Breite --- */
@media screen and (min-width: 981px) {
    .inpage-nav .sub-menu {
        min-width: 300px;
    }
    .inpage-nav .et-menu li li a {
        width: 300px !important;
    }
}

/* --- In-Page-Navigation: Section/Row-Padding & Stacking --- */
.et_pb_section.inpage-nav,
.inpage-nav .et_pb_row {
    padding: 0 !important;
}
.et_pb_section.et_pb_section_1_tb_body.inpage-nav.more-nav.et_pb_with_background.et_section_regular {
    z-index: 110 !important;
}

/* --- In-Page-Navigation: Link-/Item-Optik --- */
.inpage-nav a {
    color: #fff !important;
}
.inpage-nav li {
    padding: 30px 20px 25px !important;
    margin-top: 0 !important;
}

/* --- In-Page-Navigation: aktiver Menüpunkt, je nach Bereich andere Akzentfarbe --- */
.inpage-nav li.current-menu-item,
.inpage-nav li.current-menu-ancestor,
.page-produktsuche .inpage-nav .product-search,
.term-produktion .inpage-nav .menu-item-12764 {
    background-color: #db1037;
    text-decoration: none;
}
.inpage-nav.more-nav li.current-menu-item {
    background-color: #cbd100;
}
.inpage-nav.dssystem-nav li.current-menu-item {
    background-color: #39a53f;
}

/* --- Dropdown-Menüs (Haupt-/Sekundärnavigation) --- */
.nav li ul {
    width: 240px;
    padding: 0;
}
#top-menu li ul,
#et-secondary-menu li ul,
.et-db #et-boc .et-l .inpage-nav .et-menu li ul {
    padding: 0 !important;
    margin: 0 !important;
}
#top-menu li li,
#et-secondary-menu li li,
.et-db #et-boc .et-l .inpage-nav .et-menu li li {
    padding: 0 !important;
    margin: 0 !important;
}
#top-menu li li a,
.et-db #et-boc .et-l .inpage-nav .et-menu li li a {
    width: 240px;
    margin-bottom: 5px;
    border-top: 1px solid #ccc;
    font-size: 100%;
    color: #707a7e !important;
}
.et-db #et-boc .et-l .inpage-nav .et-menu li li.current-menu-item a {
    color: #fff !important;
}

/* --- Top-Header (Kontaktleiste über der Hauptnavigation) --- */
div#top-header {
    border-bottom: 1px solid #cfcfcf;
}
#top-header,
#top-header a,
#et-secondary-nav li li a,
#top-header .et-social-icon a:before {
    font-size: 14px;
    font-weight: 300;
}

/* --- WPML-Sprachumschalter: aktive Sprache hervorheben --- */
.wpml-ls-current-language span.wpml-ls-native {
    color: #000;
    font-weight: bold;
}


/* =====================================================================
   3. BUTTONS / CALL-TO-ACTION
   ===================================================================== */

/* --- Rotes, abgerundetes Standard-Button-Styling (Header-Kontakt-Button,
       generische .btn-Klasse, diverse Formular-Submit-Buttons) --- */
#top-menu .btn-contact a,
#top-menu .btn-contact.current-menu-item a,
.et-fixed-header #top-menu .btn-contact a,
.et-fixed-header #top-menu .btn-contact.current-menu-item a,
a.search-filter-reset,
.popmake-content .btn.red.large,
.wpc_form input[type="submit"].wpc_submit,
.btn {
    background: #db1037 !important;
    padding: 8px 20px 11px !important;
    color: #fff !important;
    -webkit-border-radius: 10px !important;
    -moz-border-radius: 10px !important;
    border-radius: 10px !important;
    border: none !important;
}

/* --- Generischer Link-Button mit Farbvarianten --- */
a.link-btn {
    padding: 8px 20px;
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 20px;
    color: #fff;
}
a.link-btn.green {
    background: #cbd100;
}
a.link-btn.red,
.wpc_form button.wpc_submit,
.wpc_form input[type="button"].wpc_submit,
.wpc_form input[type="submit"].wpc_submit {
    background: #db1037;
}


/* =====================================================================
   4. STARTSEITE: HEADER-SLIDER
   ===================================================================== */

.home .et_pb_post_title.et_pb_featured_bg {
    padding: 0% 8% 0 0 !important;
}
.home-slider .et_pb_slider_container_inner .et_pb_slide_description,
.et_pb_slider_container_inner .et_pb_slide_description {
    padding: 8% !important;
}
.et_pb_post_title.et_pb_featured_bg {
    padding: 15% 8% 10% 0 !important;
}
.home .et_pb_slide_content h1,
.et_pb_slide_description h2.et_pb_slide_title,
.et_pb_featured_bg h1.entry-title {
    font-size: 40px !important;
    font-weight: 600 !important;
    color: #fff !important;
    width: auto;
    background: rgba(10, 10, 10, 0.5);
    text-align: left;
    float: right;
    padding: 30px;
}
.home-slider .et_pb_slide_content p,
.home-slider .et_pb_slide_content {
    text-align: right !important;
    display: block;
    padding-bottom: 10px;
}

/* --- Mobile: Slider niedriger, Text zentriert statt rechtsbündig --- */
@media only screen and (max-width: 979px) {
    .home-slider .et_pb_slide,
    .home-slider.et_pb_slider {
        height: 300px !important;
        max-height: 300px !important;
    }
    .home-slider .et_pb_slide_content h1,
    .et_pb_slide_description h2.et_pb_slide_title,
    .et_pb_featured_bg h1.entry-title {
        text-align: center !important;
        background: rgba(10, 10, 10, 0.5) !important;
        padding: 10px;
        float: none;
        font-size: 25px !important;
    }
    .home-slider .et_pb_slide_content p {
        text-align: center !important;
        display: block;
        padding-bottom: 10px;
    }
}


/* =====================================================================
   5. BUSINESS-UNIT-SEITEN: ICON IM SEITENTITEL
   ===================================================================== */

@media only screen and (min-width: 979px) {
    .page-charging-technology .et_pb_post_title .et_pb_title_container:after,
    .page-transportation .et_pb_post_title .et_pb_title_container:after,
    .page-logistics .et_pb_post_title .et_pb_title_container:after,
    .page-test-automation .et_pb_post_title .et_pb_title_container:after,
    .page-alles-aus-einer-hand .et_pb_post_title_0_tb_body .et_pb_title_container:after,
    .page-service-weltweit .et_pb_post_title_0_tb_body .et_pb_title_container:after,
    .page-nachhaltigkeit .et_pb_post_title_0_tb_body .et_pb_title_container:after,
    .page-mehrwert-firmenverbund .et_pb_post_title_0_tb_body .et_pb_title_container:after,
    .page-everything-from-a-single-source .et_pb_post_title_0_tb_body .et_pb_title_container:after,
    .page-service-worldwide .et_pb_post_title_0_tb_body .et_pb_title_container:after,
    .page-sustainability .et_pb_post_title_0_tb_body .et_pb_title_container:after,
    .page-added-value-of-our-company-group .et_pb_post_title_0_tb_body .et_pb_title_container:after,
    .page-deutronicsystems .et_pb_post_title .et_pb_title_container:after,
    .page-systemlieferant .et_pb_post_title .et_pb_title_container:after,
    .page-lohnfertigung-pcb .et_pb_post_title .et_pb_title_container:after {
        color: #fff;
        text-align: right;
        display: block;
        position: absolute;
        right: 30px;
        bottom: 20px;
    }

    .page-charging-technology .et_pb_post_title .et_pb_title_container:after {
        content: url('/wp-content/uploads/2021/01/Charging-Icon-1.png');
    }
    .page-transportation .et_pb_post_title .et_pb_title_container:after {
        content: url('/wp-content/uploads/2021/01/Transportation-Icon-1.png');
    }
    .page-logistics .et_pb_post_title .et_pb_title_container:after {
        content: url('/wp-content/uploads/2021/01/Logistics-Icon-1.png');
    }
    .page-test-automation .et_pb_post_title .et_pb_title_container:after {
        content: url('/wp-content/uploads/2021/01/Test-Automation-Icon-1.png');
    }
    .page-alles-aus-einer-hand .et_pb_post_title_0_tb_body .et_pb_title_container:after,
    .page-service-weltweit .et_pb_post_title_0_tb_body .et_pb_title_container:after,
    .page-nachhaltigkeit .et_pb_post_title_0_tb_body .et_pb_title_container:after,
    .page-mehrwert-firmenverbund .et_pb_post_title_0_tb_body .et_pb_title_container:after,
    .page-everything-from-a-single-source .et_pb_title_container:after,
    .page-service-worldwide .et_pb_post_title_0_tb_body .et_pb_title_container:after,
    .page-sustainability .et_pb_post_title_0_tb_body .et_pb_title_container:after,
    .page-added-value-of-our-company-group .et_pb_post_title_0_tb_body .et_pb_title_container:after {
        content: url('/wp-content/uploads/2021/01/more-1.png');
    }
    .page-deutronicsystems .et_pb_post_title .et_pb_title_container:after,
    .page-systemlieferant .et_pb_post_title .et_pb_title_container:after,
    .page-lohnfertigung-pcb .et_pb_post_title .et_pb_title_container:after {
        content: url('/wp-content/uploads/2024/06/DEUTRONICsystems_110x110.png');
    }
}


/* =====================================================================
   6. ANWENDUNGSBEREICH-BILDERLEISTE (.anwendung-balken)
   ===================================================================== */

.anwendung-balken img {
    border: 4px solid #fff;
    border-top-left-radius: 20px;
    width: 19%;
    margin-right: 1%;
    margin-bottom: 10px;
}
.anwendung-balken h2 {
    padding-top: 50px;
}
.anwendung-balken p img {
    margin-bottom: 100px !important;
}
@media only screen and (max-width: 979px) {
    .anwendung-balken p img {
        width: 100%;
        margin-bottom: 20px !important;
    }
}


/* =====================================================================
   7. BLOG-ARCHIV: ALTERNIERENDES LAYOUT (.ds-alternating-blog)
   ===================================================================== */

@media only screen and (min-width: 980px) {
    .ds-alternating-blog .et_pb_post {
        background-color: #fff;
        margin-top: 0;
        margin-bottom: 0;
        padding: 30px;
    }

    /* Hidden Clearfix, damit Beiträge sauber auf eigener Zeile stehen */
    .ds-alternating-blog .et_pb_post:after {
        content: ".";
        visibility: hidden;
        display: block;
        height: 0;
        clear: both;
    }

    .ds-alternating-blog .et_pb_post h2 {
        margin-top: 0;
    }

    /* Ungerade Beiträge: Bild links */
    .ds-alternating-blog .et_pb_post:nth-child(odd) img {
        float: left !important;
        overflow: hidden;
        width: calc(50% + 60px);
        height: auto;
        padding-right: 30px;
        margin: -30px 0 -30px -30px;
    }

    /* Gerade Beiträge: Bild rechts */
    .ds-alternating-blog .et_pb_post:nth-child(even) img {
        float: right;
        overflow: hidden;
        width: calc(50% + 60px);
        height: auto;
        padding-left: 30px;
        margin: -30px -30px -30px 0;
    }

    /* Bild-Hover-Effekt (Aufhellung) */
    .ds-alternating-blog .et_pb_post img {
        background: rgba(255, 255, 255, .75);
        opacity: 1;
        transition: opacity .25s ease;
    }
    .ds-alternating-blog .et_pb_post img:hover {
        opacity: .5;
    }

    /* Gerade Beiträge: Text rechtsbündig */
    .ds-alternating-blog .et_pb_post:nth-child(even) {
        text-align: right;
    }

    /* "Weiterlesen"-Link-Position je nach gerade/ungerade */
    .ds-alternating-blog .et_pb_post:nth-child(odd) a.more-link {
        display: block;
        clear: none;
        margin-left: calc(50% + 30px);
    }
    .ds-alternating-blog .et_pb_post:nth-child(even) a.more-link {
        display: block;
        clear: none;
        margin-left: calc(50% - 180px);
    }
}

/* --- "Weiterlesen"-Button-Optik (alle Breakpoints) --- */
.ds-alternating-blog a.more-link {
    border: 1px solid #000;
    width: 150px;
    color: #000;
    margin-top: 20px;
    padding: 10px;
    text-align: center;
}
.ds-alternating-blog a.more-link:hover {
    border: 1px solid #000;
    color: #fff !important;
    background: #000;
}

/* --- Mobile: Beiträge gestapelt statt alternierend --- */
@media only screen and (max-width: 979px) {
    .ds-alternating-blog .et_pb_post {
        margin-bottom: 0;
        padding: 30px;
    }
    .ds-alternating-blog .et_pb_post a img {
        min-width: 100%;
    }
    .ds-alternating-blog .et_pb_post .entry-featured-image-url {
        margin: -30px -30px 30px -30px;
    }
}
@media only screen and (max-width: 479px) {
    .ds-alternating-blog .et_pb_post .post-meta {
        margin-top: 10px;
    }
}


/* =====================================================================
   8. STELLENANZEIGE-ARCHIV: META-ICONS (Ort / Art / Branche / Einstieg)
   ===================================================================== */

.stellen-meta-post .dmach-cat-title::before,
.stellen-meta-post::before,
.dmach-cat-title::before {
    padding-right: 6px;
    font-family: "ETmodules";
    color: #8fc106;
}
.stellen-meta-post .dmach-cat-title {
    margin-right: 10px;
}
.ort .dmach-cat-title::before,
.clearfix.et_pb_module.firma::before {
    content: "\e081";
}
.art .dmach-cat-title::before,
.clearfix.et_pb_module.anstellungsart::before {
    content: "\e085";
}
.branche .dmach-cat-title::before,
.clearfix.et_pb_module.branche::before {
    content: "\e035";
}
.einstieg .dmach-cat-title::before,
.clearfix.et_pb_module.einstieg::before {
    content: "\e108";
}


/* =====================================================================
   9. MEHRSPRACHIGKEIT (WPML): SPRACHABHÄNGIGE INHALTE
   ===================================================================== */

/* Zeigt jeweils nur den zur Seitensprache passenden Content-Block an
   (.content-de / .content-en-Wrapper, z.B. in den Divi-Machine-Repeatern) */
:lang(en-GB) .content-de { display: none; }
:lang(de) .content-en { display: none; }


/* =====================================================================
   10. PDF-DOWNLOAD-LINKS: ICON VOR DEM LINK
   (inkl. Kompatibilität mit Divi-Machine-Repeater-Tabellen)
   ===================================================================== */

/* Divi Machine blendet :before/:after in seinen Repeater-Tabellen per
   display:none !important aus - hier gezielt für PDF-Buttons wieder an,
   unabhängig von der Repeater-Instanz-Nummer (0, 1, 2, 3, ...) */
.et-db #et-boc .et-l [class*="de_machine_repeater_"] .et_pb_button[href$=".pdf"]:before {
    display: inline-block !important;
}

/* Eigentliches Icon: gilt für normale Links UND Divi-Machine-Buttons.
   opacity/position/transform werden explizit gesetzt, weil Divis
   generische .et_pb_button:before-Regel sonst opacity:0 und
   position:absolute vererbt und das Icon unsichtbar/verschoben macht. */
a[href$=".pdf"]:before,
a.et_pb_button[href$=".pdf"]:before {
    font-family: "FontAwesome" !important;
    content: "\f1c1" !important;
    color: #db1037 !important;
    opacity: 1 !important;
    position: static !important;
    transform: none !important;
    display: inline-block !important;
    font-size: 16px !important;
    line-height: normal !important;
    padding-right: 5px;
    vertical-align: middle;
}

/* --- Ausnahme: PDF-Icon im Service-Formular-Bereich bewusst unterdrücken --- */
.service-form a[href$=".pdf"]:before {
    content: none !important;
}

/* --- Datei-Download-Tabelle (Divi-Machine-Repeater): Kopfzeile ausblenden,
       Standard-Zellrahmen weg, stattdessen dezente Zeilentrennlinie --- */
.download-pdf table.dmach-repeater-table thead {
    display: none;
}
.download-pdf table.dmach-repeater-table td,
.download-pdf table.dmach-repeater-table tr {
    border: none !important;
}
.download-pdf table.dmach-repeater-table tr {
    border-bottom: 1px solid #ccc !important;
}