/*
=====================================================
 EF22 FRAMEWORK
 FRAMEWORK.CSS
 Version 2.1
=====================================================
*/

/* ==========================================
   HTML
========================================== */

html {

    scroll-behavior: smooth;

    box-sizing: border-box;

}

*,
*::before,
*::after {

    box-sizing: inherit;

}

/* ==========================================
   BODY
========================================== */

body {

    margin: 0;

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    background: var(--color-background-dark);

    color: var(--color-text-on-dark);

    font-family: var(--font-family);

    font-size: var(--font-size-md);

    line-height: var(--line-height);

}

/* ==========================================
   MEDIEN
========================================== */

img {

    display: block;

    max-width: 100%;

    height: auto;

}

a {

    color: inherit;

    text-decoration: none;

    transition: var(--transition-fast);

}

button {

    font: inherit;

    cursor: pointer;

}

/* ==========================================
   CONTAINER
========================================== */

.container {

    width: min(
        100% - (2 * var(--space-xl)),
        var(--container-width)
    );

    margin-inline: auto;

}

/* ==========================================
   MAIN
========================================== */

main {

    flex: 1;

    display: flex;

    flex-direction: column;

}


/* ==========================================
   KOMPONENTENBEREICH
========================================== */

.component-section {

    position: relative;

    width: 100%;

    padding:
        var(--space-xl)
        0;

    background:
        var(--color-background-medium);

    color:
        var(--color-text-on-dark);

}


/* ==========================================
   HELLER INHALTSBEREICH
========================================== */

.content-section {

    position: relative;

    width: 100%;

    padding:
        var(--space-3xl)
        0;

    background:
        var(--color-background-light);

    color:
        var(--color-text-on-light);

}


/* ==========================================
   SECTION HEADER
========================================== */

.section-header {

    display: flex;

    flex-direction: column;

    gap: var(--space-md);

}

.section-header h2 {

    margin: 0;

    color: inherit;

    font-size:
        var(--font-size-2xl);

    line-height: 1.25;

}

.section-header p {

    max-width: 760px;

    margin: 0;

    color: inherit;

}


/* ==========================================
   SECTION KICKER
========================================== */

.section-kicker {

    color:
        var(--color-primary);

    font-size:
        var(--font-size-sm);

    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;

}


/* ==========================================
   HELLER INHALTSBEREICH
========================================== */

.content-section .section-header p {

    color:
        var(--color-text-muted-on-light);

}


/* ==========================================
   DUNKLER KOMPONENTENBEREICH
========================================== */

.component-section .section-header p {

    color:
        var(--color-text-muted-on-dark);

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 480px) {

    .container {

        width: min(
            100% - (2 * var(--space-lg)),
            var(--container-width)
        );

    }

    .component-section {

        padding:
            var(--space-lg)
            0;

    }

    .content-section {

        padding:
            var(--space-2xl)
            0;

    }

    .section-header h2 {

        font-size:
            var(--font-size-xl);

    }

}