:root {
    --font-color: #000;
    --background-color: #b9c2c6;
    --font-family: 'Arial, sans-serif';
    --gap-xs: 0.81rem;
    --gap-s: 1.62rem;
    --gap-m: 2.62rem;
    --gap-l: 4.24rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
}

body {
    background: var(--background-color);
    font-family: cofo-sans-mono-variable, sans-serif;
}

header {
    margin-bottom: -15px;
}

.logo-header {
    grid-column: span 21;
    max-width: 475px;
    padding-bottom: var(--gap-l);
}

.wrapper {
    margin: auto;
    background: var(--background-color);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}

.grid {
    display: grid;
    grid-template-columns: repeat(21, 1fr);
    gap: var(--gap-s);
    padding: var(--gap-s)
}

.grid:not(:first-child):not(:last-child) {
    padding-top: 0;
}



.wrapper-img {
    grid-column: 9 / span 13;
    padding-bottom: var(--gap-s);
    max-width: 1024px;
}

.angebot {
    font-family: neulis-sans, sans-serif;
    font-weight: 700;
    grid-column: 3 / span 5;
    grid-row: span 2;
    text-transform: uppercase;
    line-height: 1.15;
    font-size: 2.3rem;
    align-self: center;
    justify-self: left;

}



.about {
    max-width: 800px;
    grid-column: 9 / span 11;
    line-height: 1.3;
    padding-bottom: var(--gap-l);
}

footer.grid {
    background: #2E3534;
    align-items: center;
    color: var(--background-color);
    font-size: 1rem;
}

.adresse-footer {
    grid-column: 9 / span 5;
}

.contact-footer {
    grid-column: 14 / span 5;
}

.logo-footer {
    max-width: 150px;
    grid-column: span 2;
}

@media (max-width: 1920px) {
    .angebot {
        grid-column: 1 / span 5;
    }

}

@media (max-width: 1440px) {
    .logo-header {
        grid-column: 1 / span 21;
    }

    .wrapper-img {
        grid-row: 1;
        grid-column: 1 / span 21;
    }

    .wrapper-img {
        max-width: unset;
    }

    .logo-header {
        padding-bottom: 0;
    }

    .adresse-contact {
        grid-column: 1 / span 5;

    }
}

@media (max-width: 1280px) {
    .grid {
        gap: var(--gap-m);
    }

    .angebot {
        grid-column: 1 / span 10;
    }

    .about {
        grid-column: 12 / span 10;
    }

    .logo-footer {
        grid-row: 1 / span 2;
        grid-column: 1 / span 7;
    }

    .contact-footer {
        grid-row: 2;
        grid-column: 9 / span 13;
    }

    .adresse-footer {
        grid-row: 1;
        grid-column: 9 / span 13;
    }
}

@media screen and (max-width: 1024px) {


    .grid {
        grid-template-columns: 1fr 1fr;
    }

    .wrapper-img {
        grid-column: 1 / span 2;
        padding-bottom: 0;
    }

    .logo-header {
        grid-column: 1 / span 2;
    }

    .about {
        grid-column: 1 / span 2;
        padding-bottom: var(--gap-m);
    }

    .angebot {
        grid-column: 1 / span 2;
    }

    .logo-footer {
        grid-column: 1 / span 1;
    }

    .adresse-footer {
        grid-column: 2 / span 1;

    }

    .contact-footer {
        grid-column: 2 / span 1;
    }
}

@media screen and (max-width: 768px) {
    .grid {
        padding: var(--gap-xs);
        gap: var(--gap-s);
    }

    .about {
        padding-bottom: var(--gap-m);
    }
}

@media screen and (max-width: 554px) {
    .angebot {
        font-size: 2rem;
    }

    .wrapper-img {
        padding-bottom: var(--gap-xs);
    }
}

@media screen and (max-width: 420px) {
    .angebot {
        font-size: 1.8rem;
    }

    .logo-footer {

        grid-row: 1;
    }

    .adresse-footer {
        grid-row: 2;
        grid-column: 1 / span 2;
    }

    .contact-footer {
        grid-row: 3;
        grid-column: 1 / span 2;
    }
}

@media screen and (max-width: 375px) {
    .grid {
        gap: var(--gap-xs);
    }

    .angebot {
        font-size: 1.5rem;
    }
}

@media screen and (min-width: 3840px) {
    body {
        font-size: 1.2rem;
    }

    .angebot {
        font-size: 3rem;
    }
}