/* ================= Variablen ============= */

:root {
    /*---Schriften---*/
    --font-body: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --font-heading: 'Roboto Serif', Georgia, 'Times New Roman', serif;
    --font-light: 300;
    --font-regular: 400;
    --font-semibold: 600;
    --font-black: 900;


/* -- Schrifgrößen --*

/* Basierend auf 16px */
    --font-h1: clamp(2rem, 7vw, 3.5rem); 
    --font-h2: clamp(1.75rem, 4vw, 2.5rem); 
    --font-h3: clamp(1.25rem, 2.5vw, 1.75rem); 
    --font-h4: clamp(1rem, 0.75vw, 1.125rem);


/* Abstände und Radien */

    --padding-8-16: clamp(0.5rem, 0.75vw, 1rem);
    --padding-16-32: clamp(1rem ,2.5vw, 3rem);

    --radius: 9px;

    /*---Farben---*/

    /* Grundfarben */

    --black: #000000;
    --white: #ffffff;
    --offwhite:#Fdfefc;

    /* --Primärfarben-- */

    --primary-1: #1f3768;
    /* Dunkelblau */

    --primary-2: #49484a;
    /* Dunkelgrau */

    --primary-3: #4ba2d6;
    /* Hellblau */


    /* -- Sekundärfarben-- */
    --secondary-1: #eb7218;
    /* Orange */

    --secondary-2: #75b752;
    /* Grün */

    --secondary-3: #7a7ab7;
    /* Lila */


    /* --Mittlere Varianten 50%-- */

    --primary-1-medium: #8F9BB4;
    /* Dunkelblau 50% */

    --primary-2-medium: #A4A4A4;
    /* Dunkelgrau 50% */

    --primary-3-medium: #A5D0EA;
    /* Hellblau 50% */



    /* --Helle Varianten 75%-- */

    --primary-1-light: #C7CDD9;
    /* Dunkelblau 75% */

    --primary-2-light: #D0D3D0;
    /* Dunkelgrau 75% */

    --primary-3-light: #D2E8F5;
    /* Hellblau 75% */
    --primary-4-light:#f3fdff;
    /* -- Shatten -- */

    --shadow: rgba(73, 72, 74, 0.4);
    --shadow-blue:rgba(31, 55, 104, 0.4);

}



/* ================= Base-Style ============= */

body {
    font-family: var(--font-body);
    font-weight: var(--font-regular);
    background-color: var(--offwhite);

}

/* --- Überschriften-Styling --- */


h1 {
    font-family: var(--font-body);
    /* Roboto */
    font-size: var(--font-h1);
    font-weight: var(--font-black);
    /* Black */
    color: var(--primary-1);
}


h2 {
    font-family: var(--font-heading);
    /* Roboto Serif */
    font-size: var(--font-h2);
    font-weight: var(--font-black);
    /* Black */
    text-align: center;
    color: var(--primary-1);
}
h2+p{
  text-align: center;
}


h3 {
    font-family: var(--font-heading);
    /* Roboto Serif */
    font-size: var(--font-h3);
    font-weight: var(--font-semibold);
    /* SemiBold */
    color: var(--primary-1);
}


h4,
.lookslike_h4 {
    font-family: var(--font-body);
    /* Roboto */
    font-size: var(--font-h4);
    font-weight: var(--font-semibold);
    /* SemiBold */
    color: var(--primary-1);
}


h1,
h2,
h3,
h4 {
    margin-block-start: 1.5em;
    margin-block-end: 0.5em;
}

.lookslike_h4+p{
    margin-top: 0.1rem;
}

/* ================= Base-Layout ============= */


.container {
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;

    /* horizontalen Innenabstand hinzu*/
    padding-left: clamp(1rem, 0.75vw, 1.5rem);
    padding-right: clamp(1rem, 0.75vw, 1.5rem);
}


.flex{
  display: flex;
}

.padding-small{
    padding: var(--padding-8-16);
}