/*
------------------------------------------------------------
DINGETHAL.DESIGN

Projekt:
arsvenditio · INKE HAGEN · Monster & Kreaturen

Komponente:
Global Footer

Datei:
footer.css

Beschreibung:
Enthält das eigenständige Layout und Styling des globalen Footers.

Version:
1.0.1

Entwicklung:
Mario Dingethal

© DINGETHAL.DESIGN
------------------------------------------------------------
*/


/* =========================================================
   SCHRIFTEN
========================================================= */

@font-face {
    font-family: "PTSans-Narrow";
    src:
        url("../../fonts/PTSans-Narrow/PTSansNarrow-Regular.woff2") format("woff2"),
        url("../../fonts/PTSans-Narrow/PTSansNarrow-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "RubikDirt-Regular";
    src:
        url("../../fonts/RubikDirt-Regular/RubikDirt-Regular.woff2") format("woff2"),
        url("../../fonts/RubikDirt-Regular/RubikDirt-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* =========================================================
   GRUNDLAYOUT
========================================================= */

.globalFooter {
    width: 100%;
    margin: 0;
    padding: 20px;

    background: #000000;
    color: rgba(255, 255, 255, 0.7);

    font-family:
        "PTSans-Narrow",
        "Arial Narrow",
        Arial,
        sans-serif;
}

.globalFooter *,
.globalFooter *::before,
.globalFooter *::after {
    box-sizing: border-box;
}

.globalFooter__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;

    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
}

.globalFooter__bereich {
    min-width: 0;
}


/* =========================================================
   ÜBERSCHRIFTEN
========================================================= */

.globalFooter__headline {
    margin: 0 0 10px;

    color: #cf0e12;

    font-family:
        "RubikDirt-Regular",
        sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.1;
    text-align: left;
}


/* =========================================================
   NAVIGATION UND LINKS
========================================================= */

.globalFooter__navigation {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.globalFooter a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;

    transition: color 0.25s ease;
}

.globalFooter a:hover,
.globalFooter a:focus {
    color: #ffffff;
    text-decoration: none;
}

.globalFooter__navigation a {
    display: block;
    width: 100%;

    line-height: 1.35;
}

.globalFooter .globalFooter__link--rot {
    color: #cf0e12;
}

.globalFooter .globalFooter__link--rot:hover,
.globalFooter .globalFooter__link--rot:focus {
    color: #ffffff;
}


/* =========================================================
   TEXTE
========================================================= */

.globalFooter p {
    margin: 0 0 16px;

    font-size: 1rem;
    line-height: 1.25;
}

.globalFooter__rechtshinweis {
    margin-bottom: 0;
    line-height: 1.25;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 575px) {

    .globalFooter__inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }

}