:root {
    /* Neue Farbvariablen */
    --main-brand-color: #faa001;
    --primary-color: #85aff9; /* Sekundäre Farbe */
    --secondary-color: #ffe3db; /* Hintergrundfarbe */
    --accent-color: #0658df; /* Akzentfarbe */
    --text-color: #303030; /* Textfarbe */
    --secondary-text-color: white;
}

/* quicksand-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/quicksand-v36-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/quicksand-v36-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    min-height: 100vh;
    font-family: 'Quicksand', sans-serif;
    font-size: 20px;
    /* background-color: var(--primary-color); */
    color: var(--text-color);
}
h1 {
    padding: 1.6em 0 1em 0;
    color: var(--accent-color);
    font-size: clamp(1.4rem, 1.8vw, 2.4rem);
}
h2 {
    padding-bottom: 1em;
    color: var(--main-brand-color);
    font-size: clamp(1.1rem, 1.3vw, 2rem);
    font-weight: normal;
}
h3 {
    padding-bottom: 0.5em;
    color: var(--accent-color);
    font-size: clamp(1rem, 1.2vw, 1.8rem);
}
h4 {
    padding: 1em 0 0.6em 0;
    font-size: clamp(1rem, 1vw, 1.5rem);
}
p {
    font-size: clamp(0.95rem, 1vw, 1.4rem);
    line-height: 1.4;
}

@media (max-width: 799px) {
    h1 {
        padding: 1.2em 0 0.8em 0;
        font-size: clamp(1.8rem, 4vw, 3.2rem);
    }
    h2 {
        font-size: clamp(1.2rem, 2.4vw, 2.1rem);
    }
    h3 {
        padding-bottom: 1em;
        font-size: clamp(1.1rem, 2.2vw, 2rem);
    }
    h4 {
        font-size: clamp(1.1rem, 2.1vw, 1.9rem);
    }
    p {
        font-size: clamp(0.95rem, 2vw, 1.8rem);
        line-height: 1.6;
    }
}

@media (max-width: 480px) {
    h1 {
        padding: 1em 0 0.5em 0;
        font-size: clamp(1.8rem, 6vw, 2.6rem);
    }
    h2 {
        font-size: clamp(1.4rem, 4vw, 2rem);
    }
    h3 {
        font-size: clamp(1.2rem, 3.8vw, 2rem);
    }
    h4 {
        padding: 0.8em 0 0.6em 0;
        font-size: clamp(1rem, 3.6vw, 1.9rem);
    }
    p {
        font-size: clamp(0.95rem, 3.6vw, 1.8rem);
    }
}