/* ============================================================
   OT Homepage Decorative Shapes v2.4
   
   Colors linked to Divi 5 Global Colors:
   The bg-shapes-colorX globals in Divi reference other globals.
   Since Divi only outputs CSS vars for colors used in modules,
   we reference the TARGET variables directly:
   
   - bg-shapes-color1 (Olive/Tint) -> gcid-z200p30l7n -> gcid-xmvd3stksh (primary-tint-2)
   - bg-shapes-color2 (Navy)       -> gcid-hpdtl26z0x (= #213a8f)
   - bg-shapes-color3 (Beige/Grau) -> gcid-sezmhjxp2p -> gcid-b6monsc3g6 (Grau)
   - bg-shapes-color4 (Mint/Tint)  -> gcid-6j5uledgsd -> gcid-qz9n7vce9i (primary-tint-4)
   
   ALL shapes use diagonal corner rounding: top-left + bottom-right
   CSS shorthand: border-radius: TL TR BR BL -> Xpx 0 Xpx 0
   Corner radius ~25-30% of smaller dimension (matched to bitmaps)
   ============================================================ */

:root {
    /* Reference the TARGET variables that Divi actually outputs on the page */
    --ot-shape-olive:       var(--gcid-xmvd3stksh, var(--gcid-z200p30l7n, #c5cc6e));
    --ot-shape-navy:        var(--gcid-hpdtl26z0x, #213a8f);
    --ot-shape-beige:       var(--gcid-b6monsc3g6, var(--gcid-sezmhjxp2p, #f5e6d0));
    --ot-shape-mint:        var(--gcid-qz9n7vce9i, var(--gcid-6j5uledgsd, #e0f5f0));
    --ot-shape-outline:     #d5d5d5;
    --ot-shape-lavender:    var(--gcid-hpdtl26z0x, #213a8f);
}

/* === REMOVE OLD BACKGROUND IMAGES === */
.et_pb_section_9.et_pb_section_9,
.et_pb_section_11.et_pb_section_11 {
    background-image: none !important;
    position: relative;
    overflow: hidden;
}

/* ============================================================
   SECTION 9 -- Cards  (bitmap: 1920x415)
   Large rounded-rectangle outline left side
   ============================================================ */
.et_pb_section_9::before {
    content: ''; position: absolute;
    width: 37%; height: 80%;
    top: 10%; left: 8%;
    border: 1.5px solid var(--ot-shape-outline);
    border-radius: 90px 0 90px 0;
    z-index: 0; pointer-events: none;
}

/* ============================================================
   SECTION 11 -- Mobilitaet  (bitmap: 2560x900)
   Olive square top-right, Beige blob bottom-left, Outline right
   ============================================================ */

/* Olive small square - top right */
.et_pb_section_11::before {
    content: ''; position: absolute;
    width: 80px; height: 80px;
    top: 1.3%; right: 18.5%;
    background: var(--ot-shape-olive);
    border-radius: 22px 0 22px 0;
    z-index: 2; pointer-events: none;
}

/* Beige filled shape - bottom left */
.et_pb_section_11::after {
    content: ''; position: absolute;
    width: 30%; height: 44%;
    bottom: 0; left: 2%;
    background: var(--ot-shape-beige);
    border-radius: 165px 0 165px 0;
    z-index: 0; pointer-events: none;
}

/* Outline - right side (positioned relative to section) */
.et_pb_section_11 .et_pb_row_14 { position: static !important; }
.et_pb_section_11 .et_pb_row_14::after {
    content: ''; position: absolute;
    width: 41%; height: 60%;
    top: 9%; right: -4%;
    border: 1.5px solid var(--ot-shape-outline);
    border-radius: 90px 0 90px 0;
    z-index: 0; pointer-events: none;
}


/* ============================================================
   RESPONSIVE -- Tablet (max 980px)
   ============================================================ */
@media (max-width: 980px) {
    .et_pb_section_9::before { width: 35%; height: 75%; border-radius: 70px 0 70px 0; }
    .et_pb_section_11::before { width: 60px; height: 60px; border-radius: 16px 0 16px 0; }
    .et_pb_section_11::after { width: 28%; height: 40%; border-radius: 120px 0 120px 0; }
    .et_pb_section_11 .et_pb_row_14::after { width: 38%; height: 55%; border-radius: 70px 0 70px 0; }
}

/* ============================================================
   RESPONSIVE -- Mobile (max 767px)
   ============================================================ */
@media (max-width: 767px) {
    .et_pb_section_9::before,
    .et_pb_section_11::before,
    .et_pb_section_11 .et_pb_row_14::after {
        display: none;
    }
    .et_pb_section_11::after {
        width: 40%; height: 30%;
        bottom: 0; left: 0;
        border-radius: 100px 0 100px 0;
    }
}

/* ============================================================
   HERO SLIDE IMAGES -- responsive border-radius
   ============================================================ */
@media (max-width: 980px) {
    .hero-slide-image {
        border-radius: 50px 0 50px 0 !important;
    }
}
@media (max-width: 767px) {
    .hero-slide-image {
        border-radius: 20px 0 20px 0 !important;
        margin-top: -80px !important;
    }
}