:root {
    --mc: #121998;
    --mci: #daebe8;
    --c1: #cfe0e8;
    --c2: #b7d7e8;
    --c3: #87bdd8;
    --c4: #daebe8;
    --c1bg: #cfe0e833;
    --c2bg: #b7d7e833;
    --c3bg: #87bdd833;
    --c4bg: #daebe833;

    --ki4m: var(--c1);
    --beratung: var(--c2);
    --erfahrung: var(--c3);
    --legal: var(--c4);


    --ki4mbg: var(--c1bg);
    --beratungbg: var(--c2bg);
    --erfahrungbg: var(--c3bg);
    --legalbg: var(--c4bg);
}

.body {
    background-color: var(--mci);
    font-size: 12px;
}

.nocookiesymbol {
    width: 25px;
    display: inline-grid;
    place-items: center;
    grid-template-areas: "inner-div";
    i {
        grid-area: inner-div;
    }
}

.navbar {
    font-weight: bold;
    background-color: var(--mc);
    * {
        color: var(--mci);
    }
}

a {
    text-decoration: underline;
    text-decoration-style: dotted;
    color: var(--mc);
}

.nav-link {
    color: var(--mci);
    text-decoration: underline;
    text-decoration-style: dotted;
}

.nav-link:hover {
    color: red;
}

.particles-js-canvas-el {
    height: 75px !important;
}

.section {
    border: 0px dashed var(--structurecolort);
    border-radius: 15px;
    margin-top: 1.5rem;
    padding: 1.5rem !important;

    h1 {
        font-size: xx-large;
        color: var(--mc);
        border-bottom: 3px solid var(--mc);
    }

    h2 {
        color: var(--mc);
        font-size: x-large;
    }

    h3 {
        color: var(--mc);
        font-size: larger;
    }

    h4 {
        color: var(--mc);
        font-size: large;
    }
}

#ki4m {
    background-color: var(--ki4mbg);
}

#beratung {
    background-color: var(--beratungbg);
}

#erfahrung {
    background-color: var(--erfahrungbg);
}

.card {
    border: 0px;
    margin: 0px;
    background-color: transparent;
}

.card-header {
    background-color: transparent;
    border: 0px;
    padding: 0px;

    a {
        color: var(--mc);
        font-weight: bold;
    }
}

.card-body {
    background-color: transparent;
}

#kontakt {
    background-color: var(--kontaktbg);
}

#legal {
    background-color: var(--legalbg);
    .nav-link {
        font-size: x-large;
        color: var(--mc);
    }
    .nav-tabs {
        margin-bottom: 0px;
        --bs-nav-tabs-link-active-border-color: var(--legalbg);
        --bs-nav-tabs-link-hover-border-color: var(--mc);
        --bs-nav-tabs-link-active-bg: var(--legalbg);
    }
    .nav {
        border-bottom: 3px solid var(--mc);
    }
}