#leistungen-link {
    color: #bb0d1b;
    box-shadow: 0 4px 3px 1px #FCFCFC, 0 6px 8px #D6D7D9, 0 -4px 4px #e2e3e6, 0 -6px 4px #FEFEFE, inset 0 0 5px 3px #c7c7c7, inset 0 0 30px #e0e0e0;
}

main {
    color: whitesmoke;
    display: grid;
    grid-template-columns: 5% 45% 45% 5%;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas: 
    "headline headline headline headline"
    "h h h h"
    "prozess prozess prozess prozess"
    " . a a . "
     " . b b . ";
    }

.leistungen {
    padding: 0 1rem;
    margin-top: 2rem;
    background-color: #232228;
    box-shadow: 0.063em 0.75em 1.563em rgb(0 0 0 / 78%);
    border-radius: 0.625rem;
    line-height: 150%;
    word-spacing: 1px;
    font-weight: 300;
}

.box {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    margin-top: 1.5rem;
    padding: 0;
}

#sonder {
    grid-area: a;
    
}

#profil {
    grid-area: b;
}

.n {
    grid-area: n;
    padding-bottom: 1rem;
    
}

.hintergrund-n {
grid-template-columns: 10% 80% 10%;
grid-template-rows: auto;
grid-template-areas: " . n . ";
background-color: #232228;
width: 100%;
grid-area: h;
display: grid;
}

h3 {
    margin: 0 0 0.4rem 0;
    font-size: 110%;
    font-weight: 440;
}

.zeilenabstand {
    margin: 0 0 1rem 0;
}
.absatz {
    margin: 0 0 3rem 0;
}

ul {
    margin-block: 0;
}

h1 {
    grid-area: headline; 
    font-size: 170%;
    font-weight: 700;
    letter-spacing: 0.1rem;
    display: flex;
    margin: 0;
    padding: 1rem 0 0 0;
    justify-content: center;
    background-color: #232228;
    font-family: Nunito Sans, sans-serif;
    }

h2 {
    display: flex;
    margin: 1.5rem 0 0 0;
    font-size: 97%;
    font-weight: 300;
    letter-spacing: 2px;
}

.n h4 {
    display: flex;
    margin: 0 0 0.4rem 0;
    font-weight: 300;
    font-size: 80%;
}

.n li {
    font-weight: 300;
    font-size: 100%;
    letter-spacing: 2px;
    list-style: circle;
    margin-bottom: 0.5rem;
}

li a:hover {
    color: #bb0d1b;
}

li a:active {
    color: #bb0d1b;
}

li a {
    text-decoration: none;
    color: whitesmoke;
}


.wele-prozess {
    grid-area: prozess;
    width: 100%;
    height: auto;
    border-bottom-right-radius: 0.625rem;
    border-bottom-left-radius: 0.625rem;   
    opacity: 80%;
}

.leistungen li {
    list-style-position: inside;
}

@media screen and (min-width: 768px) {
main {
    grid-template-areas: 
    "headline headline headline headline"
    "h h h h"
    " . prozess prozess . "
    " . a  a . "
    " . b b . ";
    
}

.leistungen{
    padding: 0 2rem;
    font-size: 110%;
    margin-top: 4.5rem;
}

.box {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding-bottom: 2rem;
}

h2 {
    font-size: 120%;
    font-weight: 600;
    letter-spacing: 3px;
}

h3 {
    margin: 0 0 0.5rem 0;
    font-weight: 500;
}

h1 {
    font-size: 250%;
    padding-top: 2rem;
}

.n h4 {
    font-size: 110%;
}

.n li {
    font-size: 130%;
}

.absatz {
    margin: 0 0 2rem 0;
}

.hintergrund-n {
    border-bottom-right-radius: 0.625rem;
    border-bottom-left-radius: 0.625rem;   
}

.wele-prozess {
    margin: 1.6rem 0;
    border-radius: 0.625rem;  
    width: 100%;
    justify-self: center;
}
}





@media screen and (min-width: 1024px) {
main {
    z-index: 2;
    grid-template-columns: 10% 40% 40% 10%;
}

.leistungen{
    padding: 0 2.5rem;
}

.hintergrund-n {
grid-template-columns: 15% 70% 15%;
}

h2 {
    margin-bottom: 2rem;
}

h3 {
 font-size: 137%;
}

.n li {
    font-size: 180%;
}

.box {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.wele-prozess {
    margin-top: 3rem;
}

h1 {
    font-size: 350%;
}
}

@media screen and (min-width: 1440px) {
h3 {
 font-size: 155%;
}

.n li {
    font-size: 200%;
}

.leistungen {
    font-size: 105%;
}
}

@media screen and (min-width: 2560px) {
h1 {
        font-size: 550%;
        padding-top: 6rem;
    }

.n li {
        font-size: 350%;
    }

.n {
    padding-bottom: 3rem;
}

.wele-prozess {
    border-radius: 1.3rem;
}

.leistungen {
    border-radius: 1.3rem;
    font-size: 240%;
}

h2 {
        font-size: 130%;
        font-weight: 650;
        letter-spacing: 6px;
        margin: 3rem 0;
}


.n h4 {
        font-size: 250%;
    }
}