@charset "utf-8";
/* CSS DOKUMENT */

/* BODY KONFIGURATIONEN */
html, body {
    scroll-behavior: smooth;
    font-size: 15px;
}

body {
    background-color: var(--body-color);
    background-image: url('../media/hintergrund/hintergrund-l.jpg');
    background-repeat: repeat-y;
    background-position: center;
    overflow-x: hidden;
}

/* CONTAINER */
.container {
    margin: 0 auto;
    max-width: 100%;
}

.container-full {
    margin: 0 auto;
    max-width: var(--max-width);
}

.main-container {
    margin: 0 auto;
    max-width: calc(var(--max-body-width) + 60px);
    padding: 0 30px;
}

/* FLEXBOX */
.flex-row {
    display: flex;
    gap: var(--space-grid);
}

.flex-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-grid);
}

.col-small {
    max-width: 32%;
}

.col-medium {
    width: 32%;
}

.gap-xl {
    gap: var(--space-xl);
}

.gap-l {
    gap: var(--space-l);
}

.gap-m {
    gap: var(--space-m);
}

.gap-s {
    gap: var(--space-s);
}

.gap-xs {
    gap: var(--space-xs);
}

.justify-between {
    justify-content: space-between;
}

.align-center {
    align-items: center;
}

/* MARGINS */
.m-80-top {
    margin-top: 80px;
}

.m-80-bottom {
    margin-bottom: 80px;
}

.m-140-top {
    margin-top: 140px;
}

.m-140-bottom {
    margin-bottom: 140px;
}

.m-90-bottom {
    margin-bottom: 90px;
}

/* <= 1400 px */
@media screen and (max-width: 1400px) {
    body {
        background-image: url('../media/hintergrund/hintergrund-m.jpg');
        background-repeat: repeat-y;
        background-position: center;
    }
}

/* <= 992 px */
@media screen and (max-width: 992px) {
    body {
        background-image: url('../media/hintergrund/hintergrund-s.jpg');
        background-repeat: repeat-y;
        background-position: center;
    }
    
    .col-small {
        padding-right: 30px;
        max-width: 40%;
    }
}

/* <= 576 px */
@media screen and (max-width: 576px) {
    body {
        background-image: url('../media/hintergrund/hintergrund-xs.jpg');
        background-repeat: repeat-y;
        background-position: center;
    }

    .slider-container {
        margin: 0 auto;
        max-width: calc(var(--max-body-width) + 60px);
        padding: 0;
    }

    .slider-container .main-container {
        padding: 0;
    }

    .flex-row {
        flex-wrap: wrap;
    }
}