/*
 Theme Name:     Divi Child-Theme
 Theme URI:      http://www.elegantthemes.com
 Description:    Divi Child-Theme
 Author:         MM
 Author URI:     https://michel-edv.de
 Template:       Divi
 Version:        1.0.0
*/
 
/* =Ab hier kannst du deine CSS-Anpassungen eintragen
------------------------------------------------------- */

/*
body.et_boxed_layout #page-container {
    background: transparent !important;
}

body.et_boxed_layout {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
*/
/* =========================================================
   Startseite / Baustellenseite – nur für page-id-16
   ========================================================= */

/* 1) Globales Hintergrundbild nur auf der Startseite 

    background-image: url('/wp-content/uploads/2026/03/PinselTonkrugHintergrund01.jpg');
*/
/* Nur Startseite */
/* Nur auf der Startseite */
body.page-id-16 {
    position: relative;
}

/* Menü links formatieren */
.desktop-side-menu .et-menu-nav ul,
.desktop-side-menu .et-menu-nav > ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.desktop-side-menu .et-menu-nav li {
    display: block;
    width: 100%;

	font-size: 20px;
    line-height: 1.1em;
}

.desktop-side-menu .et-menu-nav li a {
    display: block;
    width: 100%;
}

.desktop-side-menu .et-menu-nav a,
.desktop-side-menu .et_mobile_menu a {
    transition: color 0.2s ease;
}

/* Festes Hintergrund-Layer hinter allem */
body.page-id-16::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;

    background-image:
        /*linear-gradient(rgba(255,255,255,0.58), rgba(255,255,255,0.32)),  */
        url('/wp-content/uploads/2026/03/PinselTonkrugHintergrund01.jpg');
    background-size: cover;
    /* background-position: center top;  
	background-position: right  top;*/
	background-position: calc(50% + 400px) top;
    background-repeat: no-repeat;
}

@media (max-width: 980px) {
    body.page-id-16::before {
        position: absolute;
        inset: 0;
        min-height: 100%;
        background-position: calc(50% + 230px) top;
    }
}

@media (max-width: 767px) {
    body.page-id-16::before {
        background-position: calc(50% + 390px) top;
    }
}

/* Mobil stabiler 
@media (max-width: 980px) {
    body.page-id-16::before {
        position: absolute;
        inset: 0;
        min-height: 100%;
    }
}
*/

.et_pb_text ul li,
.et_pb_text ol li {
    line-height: 1.8em;
}

/* Falls Divi irgendwo Standard-Footerfarbe zieht */
body.page-id-16 #main-footer,
body.page-id-16 #footer-bottom,
body.page-id-16 .footer-widget {
    background: transparent !important;
}



/* Fußzeile formatieren */ 
.footer-compact-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.footer-compact-row .et_pb_column {
    width: auto !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    margin-right: 0 !important;
}

/* Link-Menü kompakter */
.footer-compact-row .widget_nav_menu ul {
    margin: 0;
    padding: 0;
}

.footer-compact-row .widget_nav_menu li {
    margin-bottom: 8px;
}

/* Tablet */
@media (max-width: 980px) {
    .footer-compact-row {
        width: 100%;
        gap: 24px;
    }
}

/* Smartphone */
@media (max-width: 767px) {
    .footer-compact-row {
        flex-direction: column;
        width: 100%;
        gap: 20px;
    }

    .footer-compact-row .et_pb_column {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
}

/* =========================================================
   STICKY HEADER – bereinigt
   ========================================================= */

/* Sticky-Section immer sauber auf volle Viewportbreite */
.header-sticky-section.et_pb_sticky,
.header-sticky-section.et_pb_sticky.et_pb_sticky--top {
    left: 50% !important;
    right: auto !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;
}

/* Inhalt der Kopfzeile bleibt zentriert und begrenzt */
.header-sticky-section .header-center-row {
    width: 100% !important;
    max-width: 1080px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.header-sticky-section .header-center-row .et_pb_column {
    margin-left: auto !important;
    margin-right: auto !important;
}

.header-sticky-section .header-center-row .et_pb_image,
.header-sticky-section .header-center-row .et_pb_text {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Placeholder auf die sticky Höhe schrumpfen */
.et_pb_sticky_placeholder {
    height: 260px !important;
    min-height: 260px !important;
    max-height: 260px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}


@media (max-width: 1100px) {
    .header-sticky-section,
    .header-sticky-section.et_pb_sticky,
    .header-sticky-section.et_pb_sticky.et_pb_sticky--top {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: none !important;
        transform: none !important;
        margin: 0 !important;
        z-index: auto !important;
    }

    .et_pb_sticky_placeholder {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
}

/* =========================================================
   Footer
   ========================================================= */

.footer-compact-row .et_pb_sidebar_0_tb_footer,
.footer-compact-row .et_pb_widget_area,
.footer-compact-row .et_pb_widget,
.footer-compact-row .widget_nav_menu {
    width: 100% !important;
    max-width: 100% !important;
}