/* =========================================================
   FARBEN
========================================================= */

:root {

    --cream: #efdfc5;
    --pink: #e5a6c1;

    --light-lilac: #d3d3ef;
    --lilac: #b7b6e1;

    --mint: #bfe2cc;
    --blue: #bad5f2;

    --mauve: #d6b8d2;

    --yellow: #fdce59;

    --white: #fffdf9;

    --dark: #514b57;
    --soft-dark: #756e78;

    --page-width: 1300px;

    --shadow:
        0 18px 55px
        rgba(81, 75, 87, 0.13);

    --shadow-soft:
        0 8px 28px
        rgba(81, 75, 87, 0.08);

    --radius-large: 30px;
    --radius-card: 28px;

}

/* =========================================================
   RESET
========================================================= */

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    min-height: 100vh;

    color: var(--dark);

    background-color:
        var(--mint);

    background-image:
        url("../images/Hintergrund.svg");

    background-repeat:
        no-repeat;

    background-size:
        cover;

    background-position:
        top center;

    background-attachment:
        fixed;

    line-height: 1.6;

    overflow-x: hidden;

}

/* =========================================================
   SCROLLBAR
========================================================= */

html {

    scrollbar-width:
        thin;

    scrollbar-color:
        var(--pink)
        var(--lilac);

}

::-webkit-scrollbar-thumb {

    border:
        3px solid
        var(--light-lilac);

}

::-webkit-scrollbar-thumb:hover {

    background:
        var(--mauve);

}

img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}

a {

    color: inherit;

    text-decoration: none;

}

button,
input {

    font: inherit;

}

/* =========================================================
   ZENTRALE WEBSITE-FLÄCHE
========================================================= */

.page {

    width:
        min(
            calc(100% - 40px),
            var(--page-width)
        );

    margin:
        25px auto;

    background:
        var(--white);

    border-radius:
        var(--radius-large);

    overflow:
        hidden;

    box-shadow:
        var(--shadow);

}

/* =========================================================
   TYPOGRAFIE
========================================================= */

h1,
h2,
h3 {

    font-weight:
        600;

    line-height:
        1.1;

}

h1 {

    font-size:
        clamp(
            3rem,
            6vw,
            5rem
        );

}

h2 {

    font-size:
        clamp(
            1.9rem,
            3vw,
            2.7rem
        );

}

h3 {

    font-size:
        1.55rem;

}

h1 span,
h2 span {

    display:
        block;

}

.small-title {

    margin-bottom:
        10px;

    color:
        var(--soft-dark);

    font-size:
        0.7rem;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        0.17em;

}

/* Animation */
@keyframes decor-float {

    0% {

        transform:
            translateY(0);

    }

    25% {

        transform:
            translateY(-12px);

    }

    50% {

        transform:
            translateY(4px);

    }

    75% {

        transform:
            translateY(-8px);

    }

    100% {

        transform:
            translateY(0);

    }

}

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

@media (max-width: 700px) {

* {

        scrollbar-width:
            none;

    }

*::-webkit-scrollbar {

        display:
            none;

    }

body {

        background-color:
            var(--white);

        background-attachment:
            scroll;

    }

.page {

        width:
            100%;

        margin:
            0;

        border-radius:
            0;

        overflow:
            visible;

        box-shadow:
            none;

    }

}

/* =========================================================
REDUZIERTE BEWEGUNG
========================================================= */

@media (prefers-reduced-motion: reduce) {

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

        scroll-behavior:
            auto !important;

        transition:
            none !important;

    }

}