/* ============================================================
   Globales Layout
   ============================================================ */


/* ------------------------------------------------------------
   Hauptstruktur der Anwendung
   ------------------------------------------------------------ */

.hauptbereich {
    min-height: 100vh;

    display: flex;
    flex-direction: column;
}


/* ------------------------------------------------------------
   Hauptinhalt
   ------------------------------------------------------------ */

.inhalt {
    flex: 1;

    width: 100%;
    padding:
        var(--abstand-6) var(--seitenrand-desktop) var(--abstand-7);
}


/* ============================================================
   Seitencontainer
   ============================================================ */


/* ------------------------------------------------------------
   Standardbreite
   ------------------------------------------------------------ */

.container {
    width: 100%;
    max-width: var(--seitenbreite);
    margin: 0 auto;
}


/* ------------------------------------------------------------
   Schmaler Container
   ------------------------------------------------------------ */

.container-schmal {
    width: 100%;
    max-width: var(--seitenbreite-schmal);
    margin: 0 auto;
}


/* ------------------------------------------------------------
   Breiter Container
   ------------------------------------------------------------ */

.container-breit {
    width: 100%;
    max-width: var(--seitenbreite-breit);
    margin: 0 auto;
}


/* ============================================================
   Globale Seitenabschnitte
   ============================================================ */

.abschnitt {
    margin-bottom: var(--abstand-7);
}

.abschnitt:last-child {
    margin-bottom: 0;
}


/* ============================================================
   Responsive Anpassungen
   ============================================================ */


/* ------------------------------------------------------------
   Tablet
   ------------------------------------------------------------ */

@media (max-width: 900px) {

    .inhalt {
        padding-left: var(--seitenrand-tablet);
        padding-right: var(--seitenrand-tablet);
    }
}


/* ------------------------------------------------------------
   Mobilgeräte
   ------------------------------------------------------------ */

@media (max-width: 600px) {

    .inhalt {
        padding:
            var(--abstand-5) var(--seitenrand-mobil) var(--abstand-6);
    }

    .abschnitt {
        margin-bottom: var(--abstand-6);
    }
}