body{
    margin: 0;
    font-family: var(--font-inter-regular);
    background-color: var(--background-body);
}

.wrapper {
    background-color: var(--background-wrapper);
    width: min(var(--wrapper-width), 100% - (var(--gutter) * 2));
    margin: auto;

    @media (min-width: 700px){
        /*padding: var(--gutter);*/
    }
}

section {
    margin: var(--gap) 0;

    .dn-container {
        padding: 1.5rem;

        @media (min-width: 700px){
            padding: 3rem;
        }
    }

    &.section-white {
        background-color: var(--section-white);
        p { color: var(--color-dark) }
    }
    &.section-primary {
        background-color: var(--section-primary);
        p { color: var(--color-white) }
    }
    &.section-secondary {
        background-color: var(--section-secondary);
        p { color: var(--color-white) }
    }
    &.section-tertiary {
        background-color: var(--section-tertiary);
        p { color: var(--color-white) }
    }
    &.section-quaternary {
        background-color: var(--section-quaternary);
        p { color: var(--color-white) }
    }
    &.section-footer {
        background-color: var(--section-footer);
        p { color: var(--color-white) }
    }

    h2, h3, h4 {
        color: var(--color-primary);
        font-family: var(--font-worksans-black);
        font-weight: var(--fw-black);
        line-height: 1.1;
    }

    h2 {
        font-size: clamp(var(--h3), 1.5rem + 2vw, var(--h1));
        margin-bottom: var(--gutter-h2);
    }

    h3 {
        font-size: clamp(var(--h5), 1.1rem + 1vw, var(--h3));
    }
    h4 {
        /*color: var(--color-linke-dunkelrot  );*/
        font-size: clamp(var(--h7), 0.3rem + 1vw, var(--h6));
        font-weight: normal;
    }
    p {
        font-size: var(--h5);
    }
}