/**** pph ****/
:root {--corporateBlue: #3f64f6;}
.CB {color:var(--corporateBlue);}
header{
    font-size:30px;
    /* font-family: "Inter-Bold", Arial, sans-serif; */
}
main p {
    margin-top: 40px;
    font-size: 15px;
}
footer {
    margin-top: 40px;
    font-size: 11px;
}

a:hover {
    text-decoration: none;
}
/* ========================================
   Schriftart
   ======================================== */

@font-face {
    font-family: "Inter";
    src: url("fonts/Inter-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter-Bold";
    src: url("fonts/Inter-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ========================================
   Mobile First – Basis-Styles
   ======================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;

    font-family: "Inter", Arial, sans-serif;
    font-weight: 400;
    line-height: 1.5;

    background-color: #ffffff;
    color: #222222;

    text-align: center;
}


/* ========================================
   Zentraler Inhaltsbereich
   ======================================== */

header,
main,
footer {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 1rem;
}


/* ========================================
   Text
   ======================================== */

p {
    font-weight: 400;
}

strong,
b {
    font-weight: 700;
}


/* ========================================
   Bilder und Medien
   ======================================== */

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
}


/* ========================================
   Formulare
   ======================================== */

input,
button,
textarea,
select {
    font: inherit;
}


/* ========================================
   Tablet
   ======================================== */

@media (min-width: 768px) {

    header,
    main,
    footer {
        padding-inline: 2rem;
    }

}


/* ========================================
   Desktop
   ======================================== */

@media (min-width: 1024px) {

    header,
    main,
    footer {
        padding-inline: 3rem;
    }

}


/* ========================================
   Große Bildschirme
   ======================================== */

@media (min-width: 1440px) {

    header,
    main,
    footer {
        padding-inline: 4rem;
    }

}