
/* =========================================================
   SECTION 3C – BSO II / BODENSEE FULL-WIDTH VISUAL ROW
========================================================= */

.oct-section-3c-bso-v1{
    position:relative !important;
    z-index:4 !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background:#02070d !important;
    font-family:'Roboto', Arial, sans-serif !important;
}

.oct-section-3c-bso-v1,
.oct-section-3c-bso-v1 *{
    box-sizing:border-box !important;
}

.oct-3c-bso-wrap-v1{
    position:relative !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background:#02070d !important;
}

.oct-3c-bso-image-v1{
    position:relative !important;
    width:100% !important;
    min-height:720px !important;
    height:100vh !important;
    overflow:hidden !important;
    background:#02070d !important;
    isolation:isolate !important;
}

.oct-3c-bso-image-v1 img{
    position:absolute !important;
    inset:0 !important;
    z-index:1 !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    transform:scale(1.015) !important;
    transition:transform 1.15s cubic-bezier(.16,1,.3,1), filter .65s ease !important;
    filter:saturate(1.04) contrast(1.04) brightness(.94) !important;
}

.oct-3c-bso-image-v1:hover img{
    transform:scale(1.045) !important;
    filter:saturate(1.08) contrast(1.08) brightness(1) !important;
}

/* dezente Integration ins Seitendesign */
.oct-3c-bso-image-v1::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:2 !important;
    pointer-events:none !important;

    background:
        radial-gradient(ellipse at 62% 48%, rgba(255,226,0,.095) 0%, rgba(255,226,0,.030) 30%, transparent 62%),
        radial-gradient(ellipse at 34% 42%, rgba(255,255,255,.060) 0%, rgba(255,255,255,.016) 34%, transparent 70%),
        linear-gradient(
            to bottom,
            rgba(0,0,0,.20) 0%,
            rgba(0,0,0,0) 18%,
            rgba(0,0,0,0) 74%,
            rgba(0,0,0,.34) 100%
        ),
        linear-gradient(
            90deg,
            rgba(0,0,0,.40) 0%,
            rgba(0,0,0,.10) 18%,
            rgba(0,0,0,0) 48%,
            rgba(0,0,0,.16) 78%,
            rgba(0,0,0,.46) 100%
        ) !important;
}

/* feine technische Linien über dem Bild */
.oct-3c-bso-tech-v1{
    position:absolute !important;
    inset:0 !important;
    z-index:3 !important;
    pointer-events:none !important;
    overflow:hidden !important;
}

.oct-3c-bso-tech-line-v1{
    position:absolute !important;
    display:block !important;
    height:1px !important;
    border-radius:40px !important;
    transform:rotate(-15deg) translateX(0) !important;
    will-change:transform, opacity !important;
    animation:oct3cBsoLineMoveV1 8.4s ease-in-out infinite alternate !important;
}

.oct-3c-bso-tech-line-v1.l1{
    left:-24% !important;
    top:18% !important;
    width:1220px !important;
    background:linear-gradient(90deg, transparent, rgba(255,226,0,.28), rgba(255,255,255,.13), transparent) !important;
    opacity:.30 !important;
}

.oct-3c-bso-tech-line-v1.l2{
    right:-26% !important;
    top:52% !important;
    width:1350px !important;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.13), rgba(255,226,0,.22), transparent) !important;
    opacity:.26 !important;
    animation-delay:1.7s !important;
}

.oct-3c-bso-tech-line-v1.l3{
    left:-10% !important;
    bottom:20% !important;
    width:900px !important;
    background:linear-gradient(90deg, transparent, rgba(255,226,0,.20), transparent) !important;
    opacity:.28 !important;
    transform:rotate(13deg) translateX(0) !important;
    animation:oct3cBsoLineMoveOppV1 9.2s ease-in-out infinite alternate !important;
    animation-delay:2.4s !important;
}

@keyframes oct3cBsoLineMoveV1{
    0%{
        transform:rotate(-15deg) translateX(-54px) translateY(9px);
        opacity:.10;
    }
    100%{
        transform:rotate(-15deg) translateX(66px) translateY(-9px);
        opacity:.42;
    }
}

@keyframes oct3cBsoLineMoveOppV1{
    0%{
        transform:rotate(13deg) translateX(48px) translateY(-8px);
        opacity:.10;
    }
    100%{
        transform:rotate(13deg) translateX(-62px) translateY(10px);
        opacity:.38;
    }
}

/* feiner gelb/weißer Licht-Sweep beim Hover */
.oct-3c-bso-image-v1::after{
    content:"" !important;
    position:absolute !important;
    left:-120% !important;
    top:0 !important;
    width:65% !important;
    height:100% !important;
    z-index:5 !important;
    pointer-events:none !important;

    background:
        linear-gradient(
            105deg,
            transparent 0%,
            rgba(255,255,255,0) 25%,
            rgba(255,255,255,.16) 48%,
            rgba(255,226,0,.10) 56%,
            rgba(255,255,255,0) 75%,
            transparent 100%
        ) !important;

    transform:skewX(-18deg) !important;
    opacity:0 !important;
}

.oct-3c-bso-image-v1:hover::after{
    animation:oct3cBsoFullSweepV1 .95s ease-out forwards !important;
}

@keyframes oct3cBsoFullSweepV1{
    0%{ left:-120%; opacity:0; }
    20%{ opacity:.45; }
    100%{ left:145%; opacity:0; }
}

/* obere/untere Trennung zur nächsten Section */
.oct-3c-bso-line-top-v1,
.oct-3c-bso-line-bottom-v1{
    position:absolute !important;
    left:0 !important;
    width:100% !important;
    height:1px !important;
    z-index:6 !important;
    pointer-events:none !important;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,255,255,.12) 18%,
            rgba(255,226,0,.24) 50%,
            rgba(255,255,255,.12) 82%,
            transparent 100%
        ) !important;
}

.oct-3c-bso-line-top-v1{ top:0 !important; }
.oct-3c-bso-line-bottom-v1{ bottom:0 !important; }

.oct-3c-bso-glow-v1{
    position:absolute !important;
    right:12% !important;
    top:50% !important;
    width:460px !important;
    height:460px !important;
    border-radius:50% !important;
    transform:translateY(-50%) !important;
    z-index:4 !important;
    pointer-events:none !important;

    background:
        radial-gradient(
            circle,
            rgba(255,226,0,.095) 0%,
            rgba(255,226,0,.034) 34%,
            rgba(255,255,255,.020) 54%,
            rgba(255,255,255,0) 75%
        ) !important;

    filter:blur(30px) !important;
    opacity:.66 !important;
    animation:oct3cBsoFullGlowV1 6.5s ease-in-out infinite alternate !important;
}

@keyframes oct3cBsoFullGlowV1{
    0%{ transform:translateY(-50%) scale(.96); opacity:.42; }
    100%{ transform:translateY(-50%) scale(1.06); opacity:.78; }
}

@media(max-width:1199px){
    .oct-3c-bso-image-v1{
        min-height:620px !important;
        height:86vh !important;
    }
}

@media(max-width:991px){
    .oct-3c-bso-image-v1{
        min-height:520px !important;
        height:75vh !important;
    }

    .oct-3c-bso-image-v1 img{
        object-position:center center !important;
    }
}

@media(max-width:767px){
    .oct-3c-bso-image-v1{
        min-height:430px !important;
        height:68vh !important;
    }

    .oct-3c-bso-glow-v1{
        width:300px !important;
        height:300px !important;
        right:-60px !important;
    }
}
