/*  CSS edermconsult.com, wind 2026  */
/* 
------------------------------- 
-- MEDIA + CONTAINER QUERIES --
------------------------------- 

------------------------------------------ 
# b1 QUERY wrapper: hide pictures etc
------------------------------------------ 
*/

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

@container wrapper (width <= 700px)  {
    section  {
        .containerL_text {
            border: 0;
            width: 100%;
            max-width: unset;
            padding: 2rem;
            margin: 0;
        }

        .containerR_pic { display: none; }
    }
}

@container wrapper (width <= 750px)  {
    section  {
        .containerR {
            width: 100%;
            max-width: unset;
            min-width: 0;
            padding: 2rem;
            margin: 0;
        }

        .containerL { display: none; }
    }
}

@container wrapper (width <= 700px) {

    section.feat-panel h1  { font-size: 1.5rem; }

    .wrapper .folding {
        flex-direction: column;
        padding-top: 2.2rem;
        padding-bottom: 1rem;
        .paragraph-right  { margin-top: 2.5rem; }
        .card  { margin: 0; }
    }

    /* 
    -----------------------------
    telederm.php und doc2pat.php 
    -----------------------------
    */

    .wrapper .folding-td  {
        align-items: center;
        justify-content: center;
        width: 100%;

        .cost-container  {
            flex-direction: column;
            align-items: center;
            flex: 0 1 25rem;

            .card.costs  {
                margin: 0;
                margin-bottom: 1.6rem; 
                width: unset;
            }

            h2, h3  { text-align: center; }
        }
    }

    .wrapper .folding-d2p  {
        .paragraph-right  { max-width: unset; }
    }

    .wrapper section .steps {
        .step {
            margin: 0;
            padding: 0;
            padding-top: 2rem;
            width: 90%;
            align-self: center;
        }
    }

    .wrapper .title_container {
        margin: 0;
        margin-right: 0.5rem;
        h1  { font-size: 2rem; }
    }

    .wrapper#ordis .BL-header {
        .NR  {
            display: flex;
            font-size: 2.5rem;   
            line-height: 2.8rem;
            margin-right: 0;
        }
        .name  {
            font-size: 1.5rem;
            padding-bottom: 2px;
            margin-left: 0;
        }
    }
} 

/* 
------------------------------------------ 
# b1 QUERY wrapper width
------------------------------------------ 
*/

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

@container wrapper (width > 570px) {
    section .containerL {
        display: flex;
    }
}

@container wrapper (width <= 570px) {

    .wrapper#ordis .ordi-card .body  {
        display: flex;
        flex-direction: column;
        gap: 0 2rem;

        .description  { width: 100%; }

        h4  { 
            width: 100%; 
            padding-left: 0.3rem;
            padding-bottom: 0.3rem;
        }

        .experts  {
            padding: 1.1rem;
            padding-top: 0;
        }
    }

    section {
        .stepsheader  { padding: 0 2rem; }

        .steps  {
            flex-direction: column;
            gap: 2rem;

            .step  {
                border-top: 1px solid var(--page-divider);
                padding: 2rem 4rem 0;
            }
        }
    }
}

/* 
------------------------------------------ 
# a1 QUERY page width
------------------------------------------ 
*/

/* # a3 media-query > 1000x */
@media only screen and (width > 1000px) {

    .wrapper, nav {
        min-width: 900px;
        max-width: 1100px;
    }

    .band .wrapper {
        min-width: 900px;
        max-width: 1100px;
    }
}

/* # a3 media-query 600px - 1000px */
@media only screen and (600px <= width <= 1000px) {
    .wrapper, nav  { width: 90%; }

    .spacer_40.nomobile  { height: 1.4rem; }
}

/* # a3 media-query < 600px */
@media only screen and (width < 600px) {

    .wrapper, nav {
        width: 90%;
        margin-right:2px;
    }
    
    main .divider  {
        border: 0;
        padding: 0;
        margin: 0;
    }

    .spacer_40.nomobile  { height: 0.4rem; }
}

/* 
------------------------------------------ 
# b1 QUERY image band
------------------------------------------ 
*/


@media only screen and (600px < width <= 1000px) {
    .band#pictureband  {
        .bg-pic  {
            background-image: url("../pix/vibe_pat_red-hair_2000x554.png");
            max-height: unset;
            width: 100%;
            height: 100%;
        }
    }
}

/* # b3 media-query < 600px */
@media only screen and (width <= 600px) {

    .band#pictureband  {
        .bg-pic  {
            background-image: url("../pix/vibe_pat_red-hair_1000x536.png");
            max-height: unset;
            width: 100%;
            height: 100%;
        }
    }
} 

/* 
--------------------------------------- 
-- # b1 QUERY nav width --------------- 
---------------------------------------
*/

nav  {
    container-type: inline-size;
    container-name: nav;
}

@container nav (width > 600px) {
    header nav  {
        .logo { display: inline; }
    }

    header nav, footer nav  {
        ul li.break  { display: none; } 
    }

    footer nav ul { margin-top: 1rem; }  
}

@container nav (width <= 600px) {
    nav {
        justify-content: center;
        .logo { display: none; }

        ul { 
            display: flex; 
            width: 100%;
            justify-content: center; 

            li.break  { display: block; } 
        }
    }

    footer nav ul { margin-top: 1rem; }
}