#firma-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: 10% 80% 10%;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas: 
    "headline headline headline"
    "f1 inhalt f2"
    "halle halle halle"
    "box box box"
    "kunden kunden kunden";
    }

.f1 {
    background-color: #232228;
    width: 100%;
    height: auto;
    grid-area: f1;
}

.f2 {
    background-color: #232228;
    width: 100%;
    height: auto;
    grid-area: f2;
}

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

.inhalt {
    width: 100%;
    grid-area: inhalt;
    background-color: #232228;
    padding-bottom: 1.5rem;
}

.inhalt p {
    padding: 0 1rem;
    margin: 0;
    line-height: 150%;
    word-spacing: 1px;
    font-weight: 300;
    font-size: 90%;
}

strong {
    font-weight: 500;
    font-size: 103%;
    color: #e93544;
}

#halle {
    grid-area: halle;
    width: 100%;
    height: auto;
    justify-self: center;
    margin: 0;
}

.boxen {
    grid-area: box;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: repeat(5, auto);
    gap: 0;
}

.boxen div {
    border-bottom: 2px solid #ffffffcc;
}

.boxen div:last-child {
    border-bottom: 0;
}

.boxen p {
    padding: 0 1rem 1rem 1rem;
    font-size: 90%;
}

.boxen h2 {
    padding: 1rem 1rem 0 1rem;
    font-size: 105%;
    margin-bottom: 0;
}

#b1 {
    grid-area: b1;
    background-color: #232228;
    grid-column: 1;
    grid-row: 1;
}

#b2 {
    grid-area: b1;
    background-color: #232228;
    grid-column: 1;
    grid-row: 2;
}

#b3 {
    grid-area: b1;
    background-color: #232228;
    grid-column: 1;
    grid-row: 3;
}

#b4{
    grid-area: b1;
    background-color: #232228;
    grid-column: 1;
    grid-row: 4;
}

#b5 {
    grid-area: b1;
    background-color: #232228;
    grid-column: 1;
    grid-row: 5;
}

.kundenbereich {
    grid-area: kunden;
}

.kunden {
        display: grid;
        grid-template-columns: repeat(3, auto);
        gap: 0.5rem;
        align-items: center;
        justify-content: center;
}

.kunden img {
        width: 4rem;
        border-radius: 1rem;
        padding: 0.5rem 0.9rem;
        background-color: white;
        box-shadow: 0.063em 0.75em 1.563em rgb(0 0 0 / 78%);
        justify-self: center;
        align-items: center;
}

.kundenbereich h2 {
    margin: 3rem 0 2rem 0;
    text-align: center;
    color: whitesmoke;
    font-size: 1.5rem;
    font-weight: 300;
}
    


@media screen and (min-width: 768px) {
main {
    grid-template-areas: 
    "headline headline headline"
    "f1 inhalt f2"
    " . halle . "
    " . box . "
    " . kunden . ";
}

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

.inhalt{
    padding-bottom: 2rem;
}

.inhalt p {
    padding: 1rem 0;
    font-size: 110%;
    margin: 0;
}

.inhalt strong {
    font-weight: 500;
    font-size: 113%;
}

#halle {
    border-radius: 1rem;
    width: 90%;
    box-shadow: 0.063em 0.75em 1.563em rgb(0 0 0 / 78%);
    margin: 2rem 0;
}

.boxen {
    margin-top: 3rem;
    gap: 1rem; 
}

.boxen div:last-child { 
    border: 2px solid #ffffffcc;
}

.boxen div {
    padding: 1rem;
    align-content: center;

    border-radius: 0.625rem; 
    border: 2px solid #ffffffcc;
}

.boxen p {
    line-height: 150%;
    word-spacing: 1px;
    font-weight: 300;
    font-size: 110%;
}


.kunden {
    gap: 1.5rem;
}

.kunden img {
        width: 6rem;
    }

.kundenbereich h2 {
    font-size: 2.4rem;
    font-weight: 350;
    margin: 4rem 0 4rem 0;
    }

}

@media screen and (min-width: 1024px) {
.boxen {
    gap: 2rem;
}

h1 {
    font-size: 350%;
}


.kunden {
    grid-template-columns: repeat(4,auto);
    gap: 1.8rem;

    animation:  appear 5s linear;
                animation-timeline: view();
                animation-range: entry 0;
}

.kunden img {
        width: 8rem;
    }

.kundenbereich h2 {
    font-size: 2.8rem;
    font-weight: 400;
    margin-top: 7rem;
    }
}

@media screen and (min-width: 1440px) {

}

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

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

.inhalt {
    font-size: 240%;
    padding-bottom: 4rem;
}

#halle{
    margin: 5rem 0;
}

.boxen {
    font-size: 240%;
}

.kundenbereich h2 {
    font-size: 4rem;
    font-weight: 500;
}

.kunden {
    gap: 2rem;
}

.kunden img {
    width: 15rem;
}     
}