/*  CSS edermconsult.com, wind 2026  */

/*
---------------------------------------------- 
---- edc.css -------------------------------- 
---------------------------------------------- 

---------------------------------------------- 
---- # a1 global definitions ----------------- 
---------------------------------------------- 
*/

@import url('https://fonts.googleapis.com/css2?family=Livvic:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=TikTok+Sans:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

:root { interpolate-size: allow-keywords; }

*, *::before, *::after { box-sizing: border-box }

html, body {
    overflow-x: hidden;
    height: 100%;
    margin: 0;
    font-size: 16px;
    background-color: var(--page-background);
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    font-family: var(--tiktok);
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    color: var(--text-std-color);
}

main {

    width: 100%;
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content: flex-start;
    flex: 1;   

    section  { background-color: var(--card-on-page); }

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

    .wrapper_col  {
        display: flex;
        flex-direction: column;
    }

    .ac  { align-items: center }
    .as  { align-items: flex-start; }
    .jc  { justify-content: center; }
    .js  { justify-content: start; }
    .spacebetween  { justify-content: space-between; }

    a { text-decoration: none; }
    .spacer_div  { height: 1.5rem; }
    .nobr { white-space: nowrap; }

    h1, h2, h3, h4, .h3-subheader {
        margin: 0;
        padding: 0;
        font-family: var(--livvic);
    }

    h1 { font-size: 2.5rem; }

    .divider  {
        width: 100%;
        height: 0; 
        border-top: 1px solid var(--page-divider);
        margin:0;
        margin-bottom: 2rem;
    }

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

    .eyebrow { 
        margin-bottom: 0.5rem;
        font-family: var(--baloo);
        text-transform: uppercase;
        letter-spacing: .08em;
        font-size: .74rem;
        font-weight: 600;
        color: var(--taupe);
    }
}


/* 
---------------------------------------------- 
--# a1 HEADER, FOOTER, NAV ------------------- 
---------------------------------------------- 
-- # c2 NAV ---------------------------------- 
---------------------------------------------- 
*/


footer, header  {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    background-color: var(--footer-bg);

    nav {
        display: flex;

        ul {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            margin: 0;
            padding: 0;
            list-style: none;
            gap: 0 0.8rem;

            /* --- TYPOGRAPHY --- */
            font-family: var(--baloo);
            text-transform: uppercase;
            font-optical-sizing: auto;
            font-kerning: normal;
            color: var(--text-darkbg);
            font-weight: 500;
            font-size: 0.875rem;

            a { 
                text-decoration: none; 
                padding: 0 4px;
                letter-spacing: 0.04rem;
                color: var(--a-nav-inactive);  
            }

            .active {
                color: var(--a-nav-active);   
            }

            a:hover {
                border-radius: 4px;
                padding: 0 4px;
                color: var(--a-nav-hover);
                background-color: var(--a-nav-hover-bg); 
                font-weight: 500;  
            }

            li.break { 
                flex-basis: 100%; 
                height: 0; 
            } 
        }
    }
}

/* 
---------------------------------------------- 
--# a3 HEADER, NAV --------------------------- 
---------------------------------------------- 
*/

header {  
    align-items: center; 
    border-bottom: 1px solid black;

    nav {
        justify-content: space-between;
        align-items: center;
        margin: 0.5rem 0;

        .logo {
            font-size: 1.5rem;
            color: var(--white-ink-900);

            a  {
                color: var(--white-ink-900);
                text-decoration: none;
            }

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

        ul  { margin-right: 0.5rem; }
    }
}

/* 
---------------------------------------------- 
--# a3 FOOTER, NAV --------------------------- 
---------------------------------------------- 
*/

footer {  
    flex: 0 0 5rem; 
    margin-top: auto;   
    color: var(--white-ink-500); 
    align-items: flex-start;

    nav  {
        justify-content: center;

        ul {
            display: flex;
            justify-content: center;
        }
    }
}

/*
------------------------------------------
--- # c1 BADGES & BUTTONS ----------------
------------------------------------------
*/ 

.badge { 
    display: inline-block;
    margin-bottom: .7rem;
    padding: .38rem .64rem;
    border-radius: 0.375rem;
    box-shadow: var(--shadow-badge);
    font-family: var(--livvic);
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: 0.04rem;
    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;
    justify-content: center;
    border-radius: 0.7rem;
    padding: 0.95rem 1.5rem 1.05rem;
    background-color: transparent;
    width: fit-content;
    font-size: 1rem;
    font-weight: 530;
    letter-spacing: 1px;
    font-optical-sizing: auto;
    font-family: var(--source);
    transition: background-color .2s var(--ease-in-out);
}

.button.td {
    border: 1px solid var(--button-border-blue);
    color: var(--button-text-blue);
}

.button.d2p {
    border: 1px solid var(--button-border-green);
    color: var(--button-text-green);
}

.button.td:hover, #bottomcards .link-wrapper .button.td:hover  {
    background-color: var(--button-blue);
    color: var(--button-text-white);
}

.button.d2p:hover, #bottomcards .link-wrapper .button.d2p:hover   {
    background-color: var(--button-green);
    color: var(--button-text-white);
}

.button:active, .link-wrapper .button:active  {
    transform: translateY(1px);
}

/* 
----------------------------------------------
--# c1 FEAT PANEL ----------------------------
---------------------------------------------- 
*/

.wrapper#feat-panel  {
    margin-top: 1rem;
}

section.feat-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding-left: 0.5rem;
    border: 0;
    max-width: 700px;
    background-color: var(--page-background);

    h1 {
        position: relative; left: -0.2rem;
        font-size: 2.75rem;
        font-weight: 700;
        font-size: clamp(2.4rem, 6.2vw, 3rem)
    }

    h3, .h3-subheader  {
        margin-top: 0.5rem;
        margin-bottom: 0.9rem;
    }

    h2  {
        display: block;
        margin-top: 0.5rem;
        margin-bottom: 0.9rem;
        color: var(--ink-500);
        font-family: var(--source);
        font-style: italic;
        font-size: 1.1rem;
        font-weight: 500;
        font-optical-sizing: auto;
    }

    p {
        margin: 0;
        padding: 0;
        font-size: 1.1rem;
        line-height: 1.62rem;
        color: var(--ink-900);
    }

    .breadcrumbs { 
        margin-bottom: 0.8rem;
        font-family: var(--baloo);
        font-size: .82rem;
        color: var(--ink-500);
        display: flex;
        gap: .4rem;
        align-items: center;

        a { 
            color: var(--ink-500);
            text-decoration: none;
        }

        a:hover { color: var(--blue-ink-500);}
        .sep { opacity: .5;}
    }
}

/* 
----------------------------------------------
--# c1 BAND ----------------------------------
---------------------------------------------- 
*/

.band { 
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    padding: 2rem 0;
    border-top: 1px solid var(--band-border-200);
    background-color: var(--bg-band);

    section  {
        background-color: var(--card-on-band);
        border: 1px solid var(--section-on-band-border);
    }
}

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

.band.picture  {
    border: 1px solid var(--border-500);
}

.band.alpha  {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0;
    margin: 0;
    border: none;
    background-color: var(--page-background);

    section  {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
        margin: 0;
        border: none;
        background-color: var(--page-background);
    }
}

.band.beta  {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0;
    margin: 0;
    background-color: var(--bg-band);

    section  {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 2rem 0;
        margin: 0;
        border: none;
        background-color: var(--page-band);
    }
}


/* 
-------------------------------------
--# c1 CARD -------------------------
-------------------------------------
 */

.card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: center;
    border-radius: 0.5rem;
}

/*  
-------------------------------------
-- # a1 section container -----------
------------------------------------- 
*/

section {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    min-width: 70%;
    margin: 0;
    padding: 0;
    border-radius: 0.8rem;
    border: 1px solid var(--section-border);

    .card_container {
        margin: 0;
        padding: 2rem;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }
}

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

.containerR {
    display: flex;
    flex: 1 0 auto;
    min-width: 500px; 
    flex-direction: column;
    align-self: flex-end; 
    align-items: flex-end;
    justify-content: flex-end;
    padding: 4rem 3rem;
}  

.containerL {
    margin: 0;
    padding: 0;
    display: flex;
    flex: 0 1 auto;
    width: 100%;
    background-repeat: no-repeat; 
    background-attachment: local;
    background-position: left center;
    background-size: cover; 
    border-top-left-radius: 0.8rem;
    border-bottom-left-radius: 0.8rem;
    contain: size;
    overflow: hidden;
} 

.containerR  { max-width: 605px; }

.containerL  { max-width: 495px; }

/*  
-------------------------------------
------- # a1 TYPOGRAPHY -------------
------------------------------------- 
*/

section  {
    h2 { color: var(--ink-600); }

    h3, .h3-subheader  {
        font-family: var(--source);
        font-style: italic;
        color: var(--ink-500);
        font-size: 1.1rem;
        display: block;
        font-weight: 500;
    }

    p {
        margin: 0;
        padding: 0;
        text-align: justify;
        line-height: 1.5rem;  
    }
}

/* 
-------------------------------------
------- # a1 STEPS ------------------
------------------------------------- 
*/

section {
    .stepsheader  {
        width: 100%;

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

    .steps  {
        display: flex;
        flex-direction: row;
        gap: 5rem;

        .step  { width: 33%; }

        .stepNR  {
            font-family: var(--livvic);
            font-size: 3rem;
            font-weight: 900;
            line-height: .9;
        }

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

        h4  {
            margin: .8rem 0 .8rem;
            font-family: var(--livvic);
            font-style: normal;
            font-weight: 600;
            font-size: 1.1rem;
            color: var(--ink-900);
        }
    
        p  {
            margin: 0;
            font-size: .98rem;
            line-height: 1.55;
            hyphenate-limit-chars: 4 5 5; 
        }
    }
}

/*
---------------------------------
# a1 Ordis ----------------------
---------------------------------
# a3 Ordis CARDS ----------------
---------------------------------
*/

section .ordis .card {
    position: relative;
    display: flex;
    flex-direction: row;
    flex: 0 0 auto;
    width: fit-content;
    padding: 0.4rem 1.4rem;
    margin-top: 0.8rem;
    box-shadow: var(--shadow-s);
    background-color: var(--card-on-page);
    border: 1px solid var(--border-100);

    .name  {
        font-family: var(--livvic);
        color: var(--ink-700);
        font-size: 1rem;
        font-weight: 500;
    }

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

    .location {
        font-family: var(--source);
        color: var(--ink-500);
        font-weight: 300;
        display: inline-flex;
        align-items: center;
        gap: .25rem;
        font-size: .85rem;

        svg  {
            width: .82rem;
            height: .82rem;
            flex-shrink: 0;
        }
    }

    .gt  {
        color: var(--ink-500);
        margin-left: 2rem;

        svg  {
            width: 1.05rem;
            height: 1.05rem;
            display: block;
            color: var(--ink-300);
        }
    }
}

.wrapper#ordis section .ordis {

    a.card:hover {
        background-color: var(--paper-hover);
        transition: background-color .2s ease-in-out;
    }

    a.card:active {
        background-color: var(--paper-hover);
        transform: translateY(1px);
    }
}

/*
---------------------------------
# a3 Kosten CARD ----------------
---------------------------------
*/

.card.costs {  
    padding: 3rem;
    margin-right: 3rem;
    font-family: var(--livvic);
    font-size: 3rem;
    font-weight: 700;
    border: 1px solid var(--card-border);
    background-color: var(--card-on-band);
    line-height: .9;
}

.card.costs.d2p  {
    color: var(--green-ink-500);
}

.card.costs.td  {
    color: var(--blue-ink-500);
    padding: 3rem 2rem 2.5rem;
}

.folding .card .note  {
    font-size: 0.8rem;
    color: var(--ink-500);
    font-weight: 450;
    line-height: 1rem;
    letter-spacing: 1px;
    text-align: center;
    padding-top: 1rem;
}

/* ------------------------------
-- # c2 section CONTENT---------- 
--------------------------------- 
-- # 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: 1.25rem;
    padding: .62rem 0;
    border-bottom: 1px solid var(--dl-border-light);
}

dl { 
    border-top:1px solid var(--dl-border-light); 
    margin-right: 1rem;

    dt {
        padding-right: 2rem;
        font-family: var(--baloo);
        text-transform: uppercase;
        letter-spacing: .05em;
        font-size: .7rem;
        font-weight: 600;
        color: var(--taupe);
        white-space: nowrap;
    }
   dd {
        margin: 0;
        font-family: var(--livvic);
        font-weight: 600;
        font-size: 1rem;
        color: var(--ink-600);
        text-align: right;
    }
    dd small { 
        font-family: var(--tiktok);
        font-weight: 400;
        color: var(--ink-400);
    }
}

/* ------------------------ */
/* -- # c3 LINKS ---------- */
/* ------------------------ */

section, .section-wrapper {
    li a, p a, dd a, .crow a, .card a {
        padding: 0 2px; 
        background-color: var(--a-std-bg);
        border-radius: 4px;
        letter-spacing: 0.03rem;
        color: var(--a-std);
        font-family: var(--source);
        font-weight: 400;
        text-decoration: dotted underline 1px; 
        text-decoration-color: var(--a-std-underline);
        text-underline-offset: 3px;
    }

    li a:hover, p a:hover, dd a:hover, .crow a:hover, .card a:hover {
        padding: 0 2px; 
        background-color: var(--a-std-hover-bg);
        border-radius: 4px;
        color: var(--a-std-hover);
        text-decoration-color: var(--a-std-underline-hover);
    }
}

/* 
-----------------------------
--- # c1 other --------------
----------------------------- 
*/

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

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

    i {
        color: var(--text-highlight-color);
        font-family: var(--source);
        letter-spacing: 0.03rem;
        font-weight: 480;
    }

    li u  {
        font-size: 0.9rem;
        text-decoration: none;
        font-weight: 500;
    }

    .R { text-align: right; }

    p.note  {
        font-size: .95rem;
        color: var(--ink-500);
    }

    .stretch { width: 100%; }

}

/* 
--------------------------
-# c3 LISTS (ul, li) ----- 
-------------------------- 
*/

section {

    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;
        }
    }
}

/* 
-------------------------- 
-- # c3 HEADER  ---------- 
--------------------------
*/

section {
    h4 {
        font-weight: 500;
        font-style: italic;
    }

    h4.quote {
        width: 65%; 
        text-align: right;
        color: var(--blue-ink-500);
        line-height: 1.6rem;
    }

    h4.subheader {
        font-weight: 500;
        font-style: italic;
        font-size: 1rem;
    }
}

/* 
-------------------------- 
-- # c1 SPACES  ---------- 
--------------------------
*/

.spacer_01 { height: 0.1rem; }
.spacer_02 { height: 0.2rem; }
.spacer_03 { height: 0.3rem; }
.spacer_04 { height: 0.4rem; }
.spacer_05 { height: 0.5rem; }
.spacer_06 { height: 0.6rem; }
.spacer_07 { height: 0.7rem; }
.spacer_08 { height: 0.8rem; }
.spacer_09 { height: 0.9rem; }
.spacer_10 { height: 1.0rem; }
.spacer_11 { height: 1.1rem; }
.spacer_12 { height: 1.2rem; }
.spacer_13 { height: 1.3rem; }
.spacer_14 { height: 1.4rem; }
.spacer_15 { height: 1.5rem; }
.spacer_16 { height: 1.6rem; }
.spacer_17 { height: 1.7rem; }
.spacer_18 { height: 1.8rem; }
.spacer_19 { height: 1.9rem; }
.spacer_20 { height: 2.0rem; }
.spacer_21 { height: 2.1rem; }
.spacer_22 { height: 2.2rem; }
.spacer_23 { height: 2.3rem; }
.spacer_24 { height: 2.4rem; }
.spacer_25 { height: 2.5rem; }
.spacer_26 { height: 2.6rem; }
.spacer_27 { height: 2.7rem; }
.spacer_28 { height: 2.8rem; }
.spacer_29 { height: 2.9rem; }
.spacer_30 { height: 3.0rem; }
.spacer_35 { height: 3.5rem; }
.spacer_40 { height: 4.0rem; }
.spacer_45 { height: 4.5rem; }
.spacer_50 { height: 5.0rem; }
.spacer_55 { height: 5.5rem; }
.spacer_60 { height: 6.0rem; }
.spacer_65 { height: 6.5rem; }
.spacer_70 { height: 7.0rem; }