/* Basisregeln. Gilt fuer alle Varianten. */

/* Alle Elemente rechnen Padding und Border in die Breite ein. */
* {
    box-sizing: border-box;
}

/* Entfernt Standardabstände des Browsers. */
html,
body {
    margin: 0;
    padding: 0;
}

/* Scrollen zu Ankern wird weich animiert. */
html {
    scroll-behavior: smooth;
}

/* Grundschrift, Grundfarbe und Seitenhintergrund. */
body {
    color: #314139;
    background: #fbfaf2;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    word-wrap: break-word;
}

/* Bilder werden responsiv begrenzt. */
img {
    max-width: 100%;
    height: auto;
    border: 0;
}

/* SVGs sollen nicht über ihren Container hinauslaufen. */
svg {
    max-width: 100%;
}

/* Links erben zunächst die Textfarbe. */
a {
    color: inherit;
}

/* Entfernt obere Standardabstände bei Textelementen. */
h1,
h2,
h3,
p {
    margin-top: 0;
}

/* Große Hauptüberschrift, vor allem für Hero-Bereiche. */
h1 {
    margin-bottom: 0;
    font-size: 56px;
    line-height: 1.05;
    font-weight: 700;
}

/* Optionaler zweiter Teil in einer h1. */
h1 span {
    display: block;
    margin-top: 10px;
    font-size: 28px;
    font-weight: 400;
}

/* Abschnittsüberschrift. */
h2 {
    margin-bottom: 18px;
    color: #314139;
    font-size: 34px;
    line-height: 1.18;
    font-weight: 700;
}

/* Kleine Überschrift, z. B. in Karten. */
h3 {
    margin-bottom: 10px;
    color: #314139;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 700;
}

/* Standardabstand unter Absätzen. */
p {
    margin-bottom: 18px;
}

/* Zentraler Inhaltscontainer. */
.inner,
.wrapperWidth {
    width: 1360px;
    max-width: 94%;
    margin-right: auto;
    margin-left: auto;
}

/* Äußerer Seitenwrapper mit Hintergrund. */
#superwrapper,
.superwrapper {
    min-height: 100%;
    background: #fbfaf2;
}

/* Kleine Oberzeile über Überschriften. */
.eyebrow {
    margin-bottom: 8px;
    color: #5f7f45;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

/* Standardbutton der Website. */
.button {
    display: inline-block;
    margin: 4px 8px 4px 0;
    padding: 10px 18px;
    color: #ffffff;
    background: #5f7f45;
    border: 1px solid #5f7f45;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color var(--greenlab-hover-duration) ease, border-color var(--greenlab-hover-duration) ease, color var(--greenlab-hover-duration) ease;
}

/* Hover-Zustand des Buttons. */
.button:hover {
    background: #6b4f32;
    border-color: #6b4f32;
}

/* Icon im Button. */
.button .icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 7px;
    vertical-align: -2px;
}

/* Hilfsklasse für Flexbox. */
.nkFlexBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

/* Verteilt Flex-Elemente mit Abstand dazwischen. */
.spcBtwn {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

/* Zentriert Flex-Elemente vertikal. */
.alignCenter {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* Breiten-Hilfsklassen. */
.basis30p {
    width: 30%;
}

.basis40p {
    width: 40%;
}

.basis60p {
    width: 60%;
}

/* Kleine rechte Innenabstände. */
.padR2 {
    padding-right: 2em;
}

/* Großer vertikaler Innenabstand. */
.padTB5 {
    padding-top: 5em;
    padding-bottom: 5em;
}

/* Text links ausrichten. */
.alignLeft {
    text-align: left;
}

/* Anpassungen für kleinere Bildschirme. */
@media (max-width: 60rem) {
    h1 {
        font-size: 40px;
    }

    h1 span {
        font-size: 22px;
    }

    h2 {
        font-size: 28px;
    }

    /* Mehrspaltige Bereiche werden untereinander gesetzt. */
    .rowAt60r,
    .footer-grid,
    .card-grid,
    .tile-row,
    .info-section__images {
        display: block;
    }

    /* Feste Prozentbreiten werden mobil aufgehoben. */
    .basis30p,
    .basis40p,
    .basis60p {
        width: auto;
    }

    /* Rechter Zusatzabstand fällt mobil weg. */
    .padR2 {
        padding-right: 0;
    }
}