/*  CSS edermconsult.com, wind 2026  */

/* 
---------------------------------------------- 
---- about.css ------------------------------- 
---------------------------------------------- 
*/

.wrapper#A section {
    .containerL  {
        background-image: url("../pix/vibe_about_graz.png"); 
        min-width: 295px;
    }
}

/* 
------------------------------------------
-- # a1 container L+R --------------------
------------------------------------------
*/

.wrapper#A .containerR {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    align-self: flex-end; 
    align-items: flex-end;
    justify-content: flex-end;
    max-width: 605px;
    padding: 4rem;
    padding-left: 3rem;
}  

.wrapper#A .containerL {
    margin: 0;
    padding: 0;
    display: flex;
    flex: 0 1 auto;
    width: 100%;
    max-width: 495px;
    background-repeat: no-repeat; 
    background-attachment: local;
    background-position: left center;
    background-size: cover; 
    border-right: 1px solid var(--border-300);
    border-top-left-radius: 0.8rem;
    border-bottom-left-radius: 0.8rem;
    contain: size;
    overflow: hidden;
} 

/* 
------------------------------------
# a1 Section #B
------------------------------------
*/

.wrapper#B  {

    .containerR  {
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
            max-width: 605px;
            padding: 4rem;
            padding-left: 3rem;
    }

    /* CEO-container! */
    .containerL {
        display: flex;
        max-width: 370px;
        flex: 1 1 auto;
        padding: 2rem;
        max-width: 495px;
        border-right: 1px solid var(--section-border);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        contain: unset;

        > h2  { font-size: 1.2rem; }
    }
}  

.mobile_only, .mobile_inline  { display: none; }

/* 
------------------------------------
# c2 Team Card
------------------------------------
*/

.team_card {   
    display: flex;
    flex-direction: column;
    padding: 1rem 0.5rem;
    border: 1px dashed var(--card-border);
    border-radius: 0.5rem;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    color: var(--text-std-color);
    background-color: var(--card-bg);

    img.team {
        width: 90%;
        border-radius: 0.4rem;
        border: 1px solid var(--card-img-border-dark);
    }

    .eyebrow  {
        margin: 0;
        padding: 0;
    }

    h2  {
        font-family: var(--livvic);
        font-weight:600;
        font-size:1.1rem;
        color:var(--ink-900);
        margin: 0;
        padding: 0;
    }
}

/* 
------------------------------------------ 
# b1 QUERY wrapper to hide pics
------------------------------------------ 
*/

.wrapper {
    container-type: inline-size; 
    container-name: wrapper; 
}

@container wrapper (width <= 870px) {
    .wrapper#A  {
        .containerR {   
            width: 100%;
            flex: 0 1 auto;
            min-width: unset;
            max-width: unset;
            margin: 0;
            overflow: hidden;
            align-self: center; 
            align-items: flex-end;
            justify-content: center;
            padding: 3rem 2rem;
        }

        .containerL { display: none; }
    }

    .wrapper#B  {
        .containerR  {
            max-width: unset;
            flex: 1 1 auto;
            width: 100%;
            padding: 2rem;
            margin: 0;
        }

        .team_card h2  {
            max-width: 100%;
            white-space: nowrap;
        }
    }
}

@container wrapper (width <= 700px) {    
    .wrapper#B  {
    
        .containerR  {
            max-width: unset;
            padding: 2rem;
            margin: 0;

            .mobile_inline  { display: inline; }

            .mobile_only {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                justify-content: flex-start;
            }
        }

        .containerL  { display: none; }
    }
}