/*  CSS edermconsult.com, wind 2026  */
/* 
--------------------------------------- 
-- PRINT CSS -------------------------- 
---------------------------------------
-- # a1 Global Definitions ------------ 
---------------------------------------
*/

@page {
    size: A4 portrait;
    margin: 2cm;
}

*  {
    font-family: var(--tiktok);
    font-size: 12pt;
    color: var(--ink-500);
    -webkit-print-color-adjust: exact;  
    print-color-adjust: exact;

    h1, h2, h3, h4, h5, h6  {
        margin: 0;
        padding: 0;
    }
}


.print_pagebreak  {
    break-before: page; 
    break-after: avoid;
 }


header, footer  { display: none; }

i {
    color: var(--text-highlight-color);
    font-family: var(--source);
    letter-spacing: 0.2mm;
    font-weight: 480;
    font-style: italic;
}

.folding { 
    display: flex;
    flex-direction: row;
}

.eyebrow { 
    margin-top: 3mm;
    margin-bottom: 3mm;
    font-family: var(--baloo);
    text-transform: uppercase;
    letter-spacing: 0.5pt;
    font-size: 9pt;
    font-weight: 600;
    color: var(--taupe);
}


/*
--------------------------------------- 
-- # a2 LINKS ------------------------- 
---------------------------------------
*/


a  {
    color: var(--ederm-logo-blue);
    font-style: italic;
    text-decoration: none;
}

section:not(.feat-panel)  {
    a[href]::after {
        content: " ("attr(href)")";
        color: var(--ink-500);
        font-size: 80%;
        margin-left: 1mm;
    }
}

/*
--------------------------------------- 
-- # a1 FEAT PANEL -------------------- 
---------------------------------------
*/

.wrapper#feat-panel  {

    /* margin-bottom: 1cm;  */

    .breadcrumbs { 
        font-family: var(--baloo);
        font-size: 3pt;
        color: var(--ink-500);
        display: flex;
        gap: 0.7mm;
        align-items: center;

        .sep { opacity: .5;}

        a, span, .sep { 
            font-size: 9pt;
            color: var(--ink-500);
            text-decoration: none;
        }
    }

    .badge  {
        margin-top: 4mm;
    }

    .eyebrow { 
        margin-top: 3mm;
        margin-bottom: 3mm;
        font-family: var(--baloo);
        text-transform: uppercase;
        letter-spacing: 0.5pt;
        font-size: 9pt;
        font-weight: 600;
        color: var(--taupe);
    }

    h1  {
        font-family: var(--livvic);
        font-size: 23pt;
        font-weight: 600;
        color: var(--ink-700)
    }

    h2  {
        font-family: var(--source);
        font-size: 12pt;
        font-weight: 500;
        font-style: italic;
        color: var(--ink-400);
        letter-spacing: 0.4pt;
    }

    b { 
        font-weight: 500;
        color: var(--ink-600) 
    }

    p  { 
        
        padding: 0;
        margin: 0;
        margin-top: 2mm;
        font-weight: 500;
        font-size: 11pt;
    }

    .spacer_03  { display: none; }
}


/* 
--------------------------------------- 
-- # a1 CONTENT ----------------------- 
---------------------------------------
*/


section:not(.feat-panel)  {
    margin-top: 1cm;
}

section h3  {
    margin-bottom: 3mm;
}


.wrapper:not(.feat-panel)  {
    
    h2, h2 span:not(.badge)  {
        font-family: var(--livvic);
        font-size: 19pt;
        font-weight: 600;
        color: var(--ink-700);
        letter-spacing: 0.4pt;

        .blue  {
            color: var(--blue-ink-500); 
            font-weight: 700;
        }
    }

    h3  {
        font-family: var(--source);
        font-size: 12pt;
        font-weight: 500;
        font-style: italic;
        color: var(--ink-400);
        letter-spacing: 0.4pt;
    }
}


p { 
    orphans: 3; 
    widows: 4; 
}


/*
--------------------------------------- 
-- # a2 INDEX ------------------------- 
---------------------------------------
*/

.hero .logo  {
    img.logo_img  { width: 12cm; height: auto; }
}

.textbox_hero  {
    margin-top: 5mm;
    font-size: 16pt;
    font-weight: 600;
}

section.intro .title_container  {
    h1 {
        font-family: var(--livvic);
        font-size: 23pt;
        font-weight: 600;
        color: var(--ink-700)
    }

    .h3-subheader  {
        font-family: var(--source);
        font-size: 14pt;
        font-weight: 500;
        font-style: italic;
        color: var(--ink-400);
        letter-spacing: 0.4pt;
        margin-bottom: 5mm;
    }
}

section.intro {
    .grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(6cm, 1fr));
        gap: 6mm 3mm;
    }

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

    .cards_wrapper {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 2mm;
    }

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

        span  {
            font-family: unset;
            font-size: unset;
            color: unset;
        }

        img.audience {
            margin-top: 6mm;
            width: 4.6cm;
            border-radius: 2mm;
            border: 1px solid var(--card-img-border-light);
        }

        .card-header {
            text-align:center;
            margin: 0;
            padding: 1mm;
            margin-top: 2mm;
            line-height: 16pt;
            font-family: var(--livvic);
            font-size: 16pt;
            font-weight: 700;
            font-style: normal;
            color: var(--ink-600);
            letter-spacing: 0;
            hyphens: auto;
            hyphenate-limit-chars: 6 5 5; 
        }

        p {
            margin: 0;
            margin: 2mm 0;
            font-size: 10pt;
            text-align: center;
            letter-spacing: 0;
            line-height: 13pt;
            hyphens: auto;
            hyphenate-limit-chars: 8 5 5; 
        }
    }
}


section.ideen  {

    li.L1.spacer_02  {
        margin-top: 3mm;
    }
    ul li i {
        font-weight: 400;
    }

    ul.left {
        align-self: flex-start;
    }

    ul.indent {
        align-self: flex-start;
        margin-left: 2rem;
    }

    ul li.smaller { font-size: smaller; }

    ul {
        margin-left: 1rem;
        padding-left: 0;
        list-style: square;
        list-style-position: outside;

        li {
            margin-bottom: 0.3rem;
            padding-left: 0.3rem;
        }

        ::marker  { color: var(--blue-ink-500); }

        li.L1 {
            margin-bottom: 0.3rem;
            list-style: none;
        }

        li.L2 {
            margin-left: 2rem;
            margin-bottom: 0.3rem;
        }
    }
}


/*
------------------------------------------
--- # a1 BADGES & BUTTONS ----------------
------------------------------------------
*/ 

.badge { 
    display: inline-block;
    margin-bottom: 1.2mm;
    padding: 1.3mm 1.8mm;
    border-radius: 1mm;
    box-shadow: var(--shadow-badge);
    font-family: var(--livvic);
    font-weight: 700;
    font-size: 11pt;
    letter-spacing: 0.3mm;
    color: var(--button-text-white);
}

.badge.d2p { 
    background: var(--button-green); /* fallback */
    background: var(--gradient-d2p); 
}

.badge.td { 
    background: var(--button-blue-td); /* fallback */
    background: var(--gradient-td); 
}

.button, #bottomcards .link-wrapper .button {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: transparent;
    width: fit-content;
    font-size: 12pt;
    font-weight: 530;
    letter-spacing: 1px;
    font-optical-sizing: auto;
    font-family: var(--source);
    text-decoration: none;

    align-self: flex-start;
    justify-content: flex-start;
    align-content: flex-start;
    padding: 0;

    a  { 
        text-decoration: none; 
        padding: 0; 
        align-self: flex-start;
    }

}

.button.td {
    color: var(--button-text-blue);
}

.button.d2p {
    color: var(--button-text-green);
}


/* 
--------------------------------------- 
-- # a1 telederm --------------------- 
---------------------------------------
*/

.card.costs  { display: none; }


/* 
-------------------------------------
------- # c2 STEPS ------------------ 
------------------------------------- 
*/

section {
    .stepsheader  {
        width: 100%;

        h3, .h3-subheader  { font-weight: 400; }
    }

    .steps  {
        display: flex;
        flex-direction: row;
        gap: 2cm;

        .step  { width: 33%; }

        .stepNR  {
            font-family: var(--livvic);
            font-weight: 900;
            font-size: 32pt;
            line-height: 28pt;
        }

        .stepNR.d2p  { color: var(--green-ink-500); }
        .stepNR.td  { color: var(--blue-ink-500); }

        h4  {
            margin: 1.6mm;
            margin-left: 0;
            font-family: var(--livvic);
            font-style: normal;
            font-weight: 600;
            font-size: 14pt;
            color: var(--ink-900);
        }
    
        p  {
            margin: 0;
            font-size: 12pt;
            line-height: 15pt;
            hyphenate-limit-chars: 4 5 5; 
        }
    }
}

/*
---------------------------------
# c2 td Project Section Header -- 
---------------------------------
*/

section .section-header-L  {
    border-top: 1px dotted var(--taupe);
    padding-top: 0.5cm;
    margin-bottom: 1cm;
}

/*
---------------------------------
# c2 td Project medium header --- 
---------------------------------
*/

#ordis .section-header-M  {
    display: flex;
    flex-direction: column;
    margin-bottom: 2mm;
    margin-top: 1cm;

    .accent  { 
        height: 1.6mm;
        width: 1.2cm;
        margin-bottom: 1mm;
    }

    h2  { 
        font-size: 17pt;
        letter-spacing: 0.5mm; 
    }

    h3  { 
        margin-top: 1mm;
        font-size: 11pt;
        font-optical-sizing: auto;
        color: var(--ink-400);
    }

    .accent.red  { background-color: var(--red-surface); }
    .accent.blue  { background-color: var(--blue-surface); }
}



/*
---------------------------------
# c2 td project card header ----- 
---------------------------------
*/

.ordis .ordi-card  {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    margin-bottom: 0.45cm;
    border-radius: 2mm;

    box-shadow: var(--shadow-s);
    border: 1px solid var(--border-100);


    .head  {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 4mm;
        font-family: var(--livvic);
        font-weight: 600;
        border-top-left-radius: 2mm;
        border-top-right-radius: 2mm;
        border-bottom: 1px solid var(--border-100);
        color: var(--ink-700);

        .left  {
            margin: 0;
            padding: 0;
            align-self: center;
        }

        .right {
            display: flex;
            flex-direction: row;
            align-items: center;
            padding-top: 1mm;


            .text  {
                font-size: 10pt;
                padding-right: 2mm;
                
            }

            .text:not(a.button *) {
                font-weight: 400;
                padding-top: 0;
            }

            svg  {
                width: 4mm;
                height: 4mm;
                flex-shrink: 0;
            }
        }
    }
}

/*
---------------------------------
# c2 td project card body ------- 
---------------------------------
*/

.ordis.td .ordi-card  {
    .body  {
        display: flex;
        flex-direction: row;
        gap: 0 0.5cm;
    }

    .description  {
        padding: 0.5cm;
        font-size: 11pt;
        width: 60%;
        text-align: justify;
        line-height: 15pt;
    }

    .experts  {
        padding: 0.5cm;

        /* # c3 td expert card   */
        > div:not(.experts-wrapper) {    
            display: flex;
            width: fit-content;
            white-space: nowrap;
            padding: 1mm 2mm;
            border-radius: 1.5mm;
            border: 1px solid var(--border-100);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.04);
        }

        > div + div  { margin-top: 2mm; } 

        h4  { 
            margin-bottom: 2mm;
            font-family: var(--baloo);
            text-transform: uppercase;
            letter-spacing: 0.3mm;
            font-size: 10pt;
            font-weight: 600;
            font-style: normal;
        }

        h4.blue  { color: var(--blue-ink-500); }
        h4.red  { color: var(--red-ink-500); }
    }
}

/*
--------------------------------------
# c3 card body Steiermark only ------- 
--------------------------------------
*/
.ordis.td .ordi-card .column {
    display: flex;
    flex-direction: column;
    padding: 0.5cm;
    padding-top: 0;

    h4  { 
        width: 100%; 
        padding-left: 0.5mm;
        padding-bottom: 0.5mm;
    }

    .experts-wrapper {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2mm;

        div  {
            display: flex;
            width: fit-content;
            white-space: nowrap;
            padding: 1mm 2mm;
            border-radius: 1.5mm;
            border: 1px solid var(--border-100);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.04);
        }

        > div  {
            margin: 0;
        } 
    }
}



/*
---------------------------------
-- # a1 d2p --------------------- 
---------------------------------
# c2 d2p Ordis Header ----------- 
---------------------------------
*/

.ordis.d2p section {
    border: 0;
}

.ordis.d2p {
    .BL-header  {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-end;
        margin: 0.5cm 0 0.4cm;
        width: 100%;

        .NR  {
            padding-bottom: 1px;
            font-family: var(--livvic);
            font-size: 36pt;
            font-weight: 600;
            line-height: 36pt;
            
        }
            
        .name  {
            margin-left: 0;
            padding-left: 0;
            font-family: var(--livvic);
            font-size: 22pt;
            color: var(--ink-600);
            font-weight: 500;
        }
    }
}

.ordis.d2p {
    .BL-header  {
        border-bottom: 2px solid var(--border-green);
        .NR  { color: var(--green-ink-500); }
    }
}

.ordis.d2p a.card .wrapperL {
    .location svg  { color: var(--green-ink-500); }
}


/*
---------------------------------
# c2 d2p Ordis Cards ------------ 
---------------------------------
*/

.card-container  {
    display: flex;
    flex-direction: column;
    width: fit-content;
    gap: 2mm;
    
}

.ordis.d2p a.card {
    text-decoration: none; 
}

.ordis.d2p a.card[href]::after {
    content: " "attr(href)"";
    color: var(--ink-500);
    padding-right: 2mm;
    display: inline-flex;
    align-items: center;
    font-size: 10pt;
}

.ordis.d2p .card {
    position: relative;
    display: flex;
    flex-direction: row;
    flex: 0 0 auto;
    width: fit-content;
    padding: 2mm 3mm;
    border: 1px solid var(--border-100);
    box-shadow: var(--shadow-s);
    border-radius: 1.5mm;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.04);

    .name  {
        font-family: var(--livvic);
        color: var(--ink-700);
        font-size: 11pt;
        font-weight: 500;
        font-style: normal;
    }

    .wrapperL {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .location {
        display: inline-flex;
        align-items: center;
        gap: 1mm;
        font-style: normal;
        font-size: 10pt;
        color: var(--ink-500);

        svg  {
            width: 4mm;
            height: 4mm;
            flex-shrink: 0;
            margin-left: 2mm;
        }
    }

    .gt  {
        display: inline-flex;
        align-items: center;
        margin-left: 2mm;
        color: var(--ink-500);

        svg  {
            width: 5mm;
            height: 5mm;
            flex-shrink: 0;
            display: block;
            color: var(--ink-300);
        }
    }
}



/* 
--------------------------------------- 
-- # a1 GP and pat --------------------
---------------------------------------
-- # c2 asides ------------------------
---------------------------------------
*/


.wrapper#td section, .wrapper#d2p section  {
    display: grid;
    grid-template-areas:
        "text aside";
    grid-template-columns: 2.3fr 0.9fr;
    gap: 1cm;
    

    h2  { 
        display: flex;
        flex-direction: row;
        align-items: flex-start; 
    }

    .badge  {
        padding: 1mm;
        align-items: flex-start;
        justify-content: flex-start;
        margin-left: 5px;
        font-size: 10pt;
        line-height: 12pt;
    }

    aside  {
        padding-left: 1cm;

        .bold  {
            font-weight: 600;
            color: var(--ink-700);
        }

        p  {
            margin-top: 1mm;
            color: var(--ink-500);
            line-height: 13pt;
            font-size: 11pt;
            text-align: left;
        }

        .block + .block  {
            margin-top: 1rem;
        }
    }

    aside.d2p  { margin-top: 1rem; }
}


/* 
--------------------------------------- 
-- # c2 bottomcards -------------------
---------------------------------------
*/

.wrapper#bottomcards  {
    h2.header, h3.header  { align-self: center; }

    .folding  { gap: 1rem; }

    .card {  
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        align-self: unset;
        border-radius: 1mm;
        padding: 0;
        width: 50%;
        font-family: var(--tiktok);
        font-size: 1rem;
        font-weight: 400;
        line-height: .9;

        .eyebrow  { margin: 1.5rem 2.7rem 0.6rem; }

        h2  {
            display: flex;
            flex-direction: row;
            align-items: flex-end;
            margin: 0 2.5rem;
            font-size: 1.5rem;

            .badge  {
                align-items: flex-start;
                justify-content: flex-start;
                padding: .22rem .34rem .27rem;
                margin: 0;
                margin-left: 8px;
                font-size: .77rem;
                line-height: .8rem;
            }
        }

        .p-wrapper  {
            width: 100%;
            flex: 1 1 auto;
            margin-top: 0.8rem;

            p  {
                text-align: justify;
                padding: 1rem 0;
                margin: 0 2.5rem;
                line-height: 1.2rem;
            }
        }

        .link-wrapper  {
            display: flex;
            align-self: flex-start;
            justify-content: flex-start;
            align-content: flex-start;
            margin: 0 2.5rem;
            padding: 0;
            

            a  { 
                text-decoration: none; 
                padding: 0; 
                align-self: flex-start;
            }

            a.button.d2p  { color: var(--green-ink-500); }
            a.button.d2p:hover  { color: var(--white-ink-900); }
        }
    }
}



/* 
--------------------------------------- 
-- # a1 edu --------------------------- 
---------------------------------------
-- # c3  description list -------
---------------------------------
*/

.dl-container  {
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

dl > div { 
    display: flex;
    flex-direction: row; 
    justify-content: space-between;
    align-items: baseline;
    gap: 7mm;
    padding: 2.7mm 0;
    border-bottom: 1px solid var(--dl-border-light);
}

dl { 
    border-top: 1px solid var(--dl-border-light); 
    margin-right: 0.8mm;
    margin-bottom: 12mm;

    dt {
        padding-right: 2rem;
        font-family: var(--baloo);
        text-transform: uppercase;
        letter-spacing: 0.3mm;
        font-size: 9pt;
        font-weight: 600;
        color: var(--taupe);
        white-space: nowrap;
    }
   dd {
        margin: 0;
        font-family: var(--livvic);
        font-weight: 600;
        font-size: 11pt;
        color: var(--ink-600);
        text-align: right;
    }
    dd small { 
        font-family: var(--tiktok);
        font-weight: 400;
        color: var(--ink-400);
    }
}

.dl-container   {

    a.button.td[href]::after {
        content: ": "attr(href)"";
        color: var(--ink-500);
        font-size: 80%;
        margin-left: 1mm;
    }

    a.button.td  {
        display: flex;
        font-size: 16pt;
        font-weight: 500;
        width: 100%;
        text-align: center;
        align-items: center;
        justify-content: center;
    }
}



/* 
--------------------------------------- 
-- # a1 about ------------------------- 
---------------------------------------
*/

.team_card img.team  {
    border-radius: 3mm;
    width: 8cm;
    height: auto;
}

.mobile_only, .mobile_inline  {
    display: none;
}



/* 
--------------------------------------- 
-- # a1 contact ----------------------- 
---------------------------------------
*/

section.contact {
    display: flex;
    flex-direction: row;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5cm;
    border: none;
    width: 100%;

    .card {
        display: flex;
        flex: 1 1 20rem; min-width: 0;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        align-self: flex-start;
        margin: 0;
        padding: 0.8cm;
        border-radius: 3mm;
        border: 1px solid var(--section-border);

        .crow  {
            display: flex;
            gap: 0 3mm;
            align-items: flex-start;
            padding: 2mm 0;
            border-top: 1px solid var(--beige-100);

            svg  {
                width: 5mm;
                height: 5mm;
                color: var(--taupe);
                flex-shrink: 0;
            }

            .wrap  {
                .eyebrow  {
                    padding-top: 0;
                    margin-top: 0;
                }
            }

            .v {
                font-size: 12pt;
                line-height: 15pt;
                color: var(--ink-900);
            }
        }

        .first  {
            border-top: none;
            padding-top: 0;

            .wrap  {
                .eyebrow  {
                    padding-top: 0;
                    margin-top: 0;
                }
            }
        }
    }
}     

/* 
--------------------------------------- 
-- # a1 datenschutz ------------------- 
---------------------------------------
*/

section.datenschutz  {
    h2:last-of-type {  
        margin: 8mm 0 5mm;
    } 
}