/*  CSS edermconsult.com, wind 2026  */

/* 
---------------------------------------------- 
-- # a1 HERO - index.php  -------------------- 
---------------------------------------------- 
*/

.hero {
    display: flex;
    flex: 0 0 457px; 
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    width: 100%;
    background-image: url('../pix/hero_chairs.png');   
    background-position: left top;
    background-repeat: no-repeat; 
    background-size: 1400px 457px; 
    background-attachment: scroll;
    overflow: hidden;
    background-color: var(--hero-bg);
    border-bottom: 2px solid var(--hero-border);    

    a { color: var(--a-hero-txtcolor); } 

    a:hover {
        background-color: var(--a-hero-hover-bg);
    }

    .container_top {
        display:flex;
        flex-direction: row;
        justify-content: flex-end;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        width: 100%;

        .logo {
            margin-top: 3rem;
            padding: 15px; 
            border: 1px solid var(--logo-border);
            background-color: var(--logo-bg);
            border-radius: 12px;
        }
    }

    /* digital vor ambulant */
    .container_bottom {
        display:flex;
        flex-direction: row;
        justify-content: flex-start;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        margin-top: 1.4rem;
        width: 100%;

        .textbox_hero {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-end;
            margin-right: 2rem;
            margin-bottom: 2rem;
            padding: 1.5rem; 
            padding-bottom: 1.1rem;
            width: 17rem;
            border-radius: 12px;
            border: 3px solid var(--hero-header-border);
            background-color: #E0DEDCC0;  /* fallback */
            background: var(--gradient-hero-textbox);
        
            .text_wrap {
                margin: 0;
                padding-right: 1.3rem; 
                font-weight: 700;
                font-size: 2rem;
                color: var(--hero-header); 
                line-height: 2.2rem;
            }

            .keyword {
                text-align: right;
            }

            .small {
                font-size: 1.2rem; 
                font-weight: 500;
            }
        }
    }
}


/* 
---------------------------------------------- 
-- # b2 MEDIA QUERY -------------------------- 
---------------------------------------------- 
*/

@media (min-width: 671px)  {

    .hero {
        .container_top {
            max-width: 1520px;

            .logo {
                margin-right: 5rem;  
                img.logo_img { width: 300px; }
            }
        }    

        .container_bottom {
            justify-content: flex-start;
            margin-left: 3rem;
            padding: 0;

            .textbox_hero {
                margin-right: 2rem;
                margin-bottom: 2rem;
            }
        }
    }
}


@media (max-width: 670px) {

    .hero {
        .container_top {
            justify-content: center;

            .logo {
                img.logo_img { width: 300px; }
            }
        }

        .container_bottom {
            justify-content: center;

            .textbox_hero {
                margin:0;
            }
        }
    }
}

/* 
----------------------------------
--- # a1 General -----------------
---------------------------------- 
*/

.wrapper#A .h3-subheader  {
    font-size: 1.38rem;
}

.wrapper section {
    h2  {
        color: var(--ink-700);
    }
}


/* 
----------------------------------
--- # a1 section A ---------------
---------------------------------- 
*/

.title_container  {
    display:flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    margin: 0 2rem;
    h1  { color: var(--blue-ink-500); }
}

/* 
----------------------------------
--- # a1 cards -------------------
---------------------------------- 
*/

.grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(170px, 1fr));
    gap: 0.8rem;
}

a.audience, a.experts {  
    color: var(--text-std-color);
    background-color: var(--card-bg);
}

a.audience:hover, a.experts:hover, a.team_card:hover {   
    background-color: var(--card-hover-bg);
}

.cards_wrapper {
    container: cards / inline-size;  /* # a3 CONTAINER: cards_wrapper */
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    gap: 0.7rem;
}

.card {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%; 
    border: 1px dashed var(--card-border);
    border-radius: 0.5rem;
    justify-content: flex-start;
    align-items: center;

    img.audience {
        margin-top: 0.7rem;
        border-radius: 0.4rem;
        border: 1px solid var(--card-img-border-light);
    }

    img.audience {
        width: 160px;
        margin-top: 1.2rem;
    }

    h3, .card-header {
        text-align:center;
        margin: 0;
        padding: 0.7rem;
        margin-top: 0.8rem;
        line-height: 1.3rem;
        font-family: var(--livvic);
        font-size: 1.3rem;
        font-weight: 700;
        font-style: normal;
        color: var(--ink-600);
        letter-spacing: 0;
        hyphens: auto;
        hyphenate-limit-chars: 6 5 5; 
    }

    p {
        margin: 1rem 1.5rem;
        margin-top: 0;
        font-size: 0.9rem;
        text-align: center;
        letter-spacing: 0;
        line-height: 1.2rem;
        hyphens: auto;
        hyphenate-limit-chars: 8 5 5; 
    }
}


/* 
----------------------------------------------
--- # b2 CONTAINER query cards ---------------
---------------------------------------------- 
*/


@container cards (width > 780px) {
    .grid {
        .card {
            h3, .card-header {
                hyphens: manual;
                font-weight: 700;
            }

            p { hyphens: manual; }
        }
    }
}

@container cards (600px < width <= 780px) {
    .grid {
        grid-template-columns: repeat(2, minmax(170px, 1fr));
        .card {

            h3, .card-header {
                hyphens: auto;
                hyphenate-limit-chars: 6 5 5; 
            }

            p {
                hyphens: auto;
                hyphenate-limit-chars: 6 5 5; 
            }
        }
    }
}

@container cards (width <= 600px) {
    .grid {
        grid-template-columns: repeat(1, minmax(170px, 1fr));

        a.card {

            h3, .card-header {
                hyphens: auto;
                hyphenate-limit-chars: 6 5 5; 
            }

            p {
                hyphens: auto;
                hyphenate-limit-chars: 6 5 5; 
            }
        }
    }
}

/* 
---------------------------------- 
-- # a1 section B ---------------- 
---------------------------------- 
*/

.band  {
    border-bottom: 1px solid var(--band-border-200);
}

.containerL_text {
    display: flex;
    max-width: 500px; 
    flex: 1 0 auto;
    padding: 2rem;
    padding-top: 9rem;
    padding-bottom: 7rem;
    border-right: 1px solid var(--ink-900);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    contain: unset;

    .title_container  {
        display:flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        margin: 0 1.5rem;
    }
}

.containerR_pic  {
    margin: 0;
    padding: 0;
    display: flex;
    flex: 0 1 auto;
    background-image: url("../pix/vibe_index_journal.png");
    width: 100%;
    background-repeat: no-repeat; 
    background-attachment: local;
    background-position: left center;
    background-size: cover; 
    border-top-right-radius: 0.8rem;
    border-bottom-right-radius: 0.8rem;
    overflow: hidden;
}

/* 
---------------------------------- 
-- # a1 section C ---------------- 
---------------------------------- 
*/

.containerL {
    background-image: url("../pix/vibe_index_bergsee.png"); 
}

.containerR  {
    padding: 3rem;
    padding-top: 7rem;
    padding-bottom: 5rem;
    
}