/* ========================================
   GLOBAL
   ======================================== */

:root {
    --blau: #003366;
    --blau-dunkel: #0b3d68;
    --gold: #FFB21A;
    --orange: #FFB21A;

    --hell: #F8FAFC;
    --weiss: #FFFFFF;
    --text: #444444;
    --text-hell: #5f6b76;

    --border: #E3E9EE;

    --radius: 18px;
    --radius-gross: 30px;

    --shadow: 0 10px 25px rgba(0,0,0,.06);

    --abstand: 80px;

    --h1: 88px;
    --h2: 42px;
    --h3: 28px;

    --content-width: 1350px;
    --abstand: 80px;
    --section-abstand: 90px;
--karten-abstand: 30px;
--text-abstand: 20px;
}


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

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    width: 100%;
    margin: 0;

    font-family: Arial, Helvetica, sans-serif;

    background: linear-gradient(
        180deg,
        #FFFFFF 0%,
        #F8FAFC 45%,
        #F3F8FD 100%
    );

    color: var(--text);

    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    transition: .3s;
}

button {
    cursor: pointer;
    font: inherit;
}

main {
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 50px;
}

section {
    scroll-margin-top: 120px;
}
/* ========================================
   GEMEINSAME UNTERSEITEN-ABSTÄNDE
   ======================================== */

.page-section {
    margin-bottom: var(--section-abstand);
}

.page-section h2 {
    margin-bottom: var(--text-abstand);
}

.page-section > p {
    margin-bottom: 35px;
}