/* ============================================================
   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_8.et_pb_section_8,
.et_pb_section_9.et_pb_section_9,
.et_pb_section_11.et_pb_section_11,
.et_pb_section_12.et_pb_section_12 {
    background-image: none !important;
    position: relative;
    overflow: hidden;
}

/* ============================================================
   SECTION 8 -- Hero  (bitmap: 2560x900)
   Small lavender square top-center + Navy square left
   ============================================================ */
.et_pb_section_8::before {
    content: ''; position: absolute;
    width: 80px; height: 80px;
    top: 6%; left: 17.5%;
    background: var(--ot-shape-lavender);
    border-radius: 22px 0 22px 0;
    opacity: 0.35;
    z-index: 1; pointer-events: none;
}
.et_pb_section_8::after {
    content: ''; position: absolute;
    width: 120px; height: 120px;
    top: 25%; left: 5.5%;
    background: var(--ot-shape-navy);
    border-radius: 32px 0 32px 0;
    z-index: 1; pointer-events: none;
}

/* ============================================================
   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;
}

/* ============================================================
   SECTION 12 -- Unser Service  (bitmap: 2560x753)
   Outline center-left, Mint filled top-right
   ============================================================ */

/* Outline - center left */
.et_pb_section_12::before {
    content: ''; position: absolute;
    width: 27%; height: 63%;
    top: 37%; left: 12%;
    border: 1.5px solid var(--ot-shape-outline);
    border-radius: 75px 0 75px 0;
    z-index: 0; pointer-events: none;
}

/* Mint filled shape - top right */
.et_pb_section_12::after {
    content: ''; position: absolute;
    width: 36%; height: 83%;
    top: 0; right: 9.5%;
    background: var(--gcid-hpdtl26z0x, #e0f5f0);
    border-radius: 150px 0 150px 0;
    z-index: 0; pointer-events: none;
}

/* ============================================================
   RESPONSIVE -- Tablet (max 980px)
   ============================================================ */
@media (max-width: 980px) {
    .et_pb_section_8::before { width: 60px; height: 60px; left: 12%; border-radius: 16px 0 16px 0; }
    .et_pb_section_8::after { width: 90px; height: 90px; top: 20%; left: 3%; border-radius: 24px 0 24px 0; }
    .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; }
    .et_pb_section_12::before { width: 25%; height: 55%; border-radius: 60px 0 60px 0; }
    .et_pb_section_12::after { width: 34%; height: 75%; border-radius: 120px 0 120px 0; }
}

/* ============================================================
   RESPONSIVE -- Mobile (max 767px)
   ============================================================ */
@media (max-width: 767px) {
    .et_pb_section_8::before,
    .et_pb_section_8::after,
    .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;
    }
    .et_pb_section_12::before { display: none; }
    .et_pb_section_12::after {
        width: 50%; height: 60%;
        right: 0;
        border-radius: 80px 0 80px 0;
    }
}