/* ---------------------------------------------
   BANNER FUER ZUSTAENDIGKEIT
   ---------------------------------------------
   Wird ueberhalb des Footers angezeigt. beinhaltet Kontaktdaten und Bild zu zustaendiger Person.
------------------------------------------------ */

.zustaendigkeit-banner {
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
        url(https://aoel.wimmer-it-services.de/wp-content/uploads/AoeL-Hintergrund-Blaetter-scaled.jpg);
    background-position: left bottom;
    background-repeat: no-repeat;
    padding: 60px 0 40px 0 !important; 
}

.zustaendigkeit-banner  .column_container .wpb_content_element {
    margin-top: 10px;
}

.zustaendigkeit-banner,
.zustaendigkeit-banner a {
    color: white !important;
}

.zustaendigkeit-banner a:hover {
    color: #323232 !important;
}

.zustaendigkeit-banner p {
    line-height: 1.3 !important;
}

.zustaendigkeit-banner .zustaendigkeit-fragen p {
    padding-bottom: 10px !important;
    font-size: clamp(1rem, 3vw, 1.1em) !important;
}

.zustaendigkeit-banner .zustaendigkeit-name p {
    font-size: clamp(1.5rem, 5vw, 2em) !important;
    font-weight: 700;
    margin-bottom: 25px;
    line-height: 1.3;
}

.zustaendigkeit-banner .zustaendigkeit-titel p {
    font-size: clamp(0.8rem, 3vw, 1em) !important;
    padding-bottom: 20px !important;
    font-style: italic !important;
}

.zustaendigkeit-banner .zustaendigkeit-mail p,
.zustaendigkeit-banner .zustaendigkeit-tel p {
    font-size: clamp(1rem, 3vw, 1.1em) !important;
}

.zustaendigkeit-banner .zustaendigkeit-mail p strong,
.zustaendigkeit-banner .zustaendigkeit-tel p strong {
    width: 90px !important;
    display: inline-block;
}

/* ---------------------------------------------
   VERTIKALE ZENTRIERUNG
   --------------------------------------------- */

/* Spalten-Container als Flexbox */
.zustaendigkeit-banner .row_col_wrap_12 {
    display: flex !important;
    align-items: center !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* Bild-Spalte - rechtsbündig */
.zustaendigkeit-banner .vc_col-sm-4 {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding-right: 30px !important;
}

/* Text-Spalte */
.zustaendigkeit-banner .vc_col-sm-8 {
    display: flex !important;
    align-items: center !important;
    padding-left: 0 !important;
}

.zustaendigkeit-banner .vc_column-inner {
    width: 100% !important;
}

.zustaendigkeit-banner .img-with-aniamtion-wrap {
    padding: 0px !important;
}

.zustaendigkeit-banner img {
    border-radius: 50% !important;
    width: 300px !important;
    height: 300px !important;
    object-fit: cover !important;
    object-position: center top !important;
    overflow: hidden;
}

@media screen and (max-width: 1300px) {
    
    /* Flexbox-Row für bessere Kontrolle */
    .zustaendigkeit-banner .row_col_wrap_12 {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }
    
    /* Bildspalte: Feste Breite, kein Schrumpfen */
    .zustaendigkeit-banner .vc_col-sm-4 {
        flex: 0 0 350px !important;
        min-width: 350px !important;
        max-width: 350px !important;
        padding-left: 80px !important;
        padding-right: 20px !important;
    }
    
    /* Textspalte: Nimmt verbleibenden Platz */
    .zustaendigkeit-banner .vc_col-sm-8 {
        flex: 1 1 auto !important;
        padding-left: 60px !important;
    }
    
    /* Bild-Container: Feste Breite + Zentrierung */
    .zustaendigkeit-banner .img-with-aniamtion-wrap {
        width: 300px !important;
        min-width: 300px !important;
        max-width: 300px !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        flex-shrink: 0 !important;
    }
    
    /* Alle inneren Wrapper: Feste 300px Breite */
    .zustaendigkeit-banner .img-with-aniamtion-wrap .inner,
    .zustaendigkeit-banner .img-with-aniamtion-wrap .hover-wrap,
    .zustaendigkeit-banner .img-with-aniamtion-wrap .hover-wrap-inner {
        width: 300px !important;
        min-width: 300px !important;
        max-width: 300px !important;
    }
    
    /* Bild selbst: Feste Maße erzwingen */
    .zustaendigkeit-banner img {
        width: 300px !important;
        height: 300px !important;
        min-width: 300px !important;
        min-height: 300px !important;
        flex-shrink: 0 !important;
    }
}

@media screen and (max-width: 999px) {
    
    /* Row wird zur Spalte */
    .zustaendigkeit-banner .row_col_wrap_12 {
        flex-direction: column !important;
        align-items: center !important;
    }
    
    /* Bildspalte: Zentriert, ohne seitliche Paddings */
    .zustaendigkeit-banner .vc_col-sm-4 {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 350px !important;
        min-width: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 30px !important;
    }
    
    /* Textspalte: Zentriert, ohne linkes Padding */
    .zustaendigkeit-banner .vc_col-sm-8 {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 600px !important;
        padding-left: 0 !important;
        text-align: center !important;
    }
    
    /* Bild zentrieren */
    .zustaendigkeit-banner .img-with-aniamtion-wrap {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Text-Container zentrieren */
    .zustaendigkeit-banner .wpb_text_column {
        text-align: center !important;
    }
    
    /* Absätze selbst zentrieren */
    .zustaendigkeit-banner .column_container p {
        text-align: center !important;
    }
}