@font-face {
    font-family: "Poppins";
    src: url("fonts/Poppins-Regular.woff2") format("woff2");
    font-weight: 400;
}
@font-face {
    font-family: "PoppinsBold";
    src: url("fonts/Poppins-Bold.woff2") format("woff2");
    font-weight: 700;
}

:root {
    --cl-primary-900: hsl(324, 91%, 10%);
    --cl-primary-500: hsl(324, 91%, 25%);
    --cl-primary-200: hsl(324, 91%, 80%);
    --cl-primary-100: hsl(324, 91%, 90%);

    --cl-accent-900: hsl(35, 93%, 20%);
    --cl-accent-500: hsl(35, 93%, 55%);
    --cl-accent-200: hsl(35, 93%, 80%);
    --cl-accent-100: hsl(35, 93%, 90%);

    --cl-neutral-900: hsl(0, 0%, 10%);
    --cl-neutral-500: hsl(0, 0%, 60%);
    --cl-neutral-200: hsl(0, 0%, 90%);
    --cl-neutral-100: hsl(0, 0%, 100%);

    --maxWidth: 80rem; /* 1280px */

    --spacing-100: 0.5rem;
    --spacing-200: 1rem;
    --spacing-300: 2rem;
    --spacing-400: 4rem;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Poppins";
    font-size: 1rem;
    line-height: 1.6;
    color: var(--cl-neutral-900);
    hyphens: auto; /* Worttrennung lang=de */
}

.wrapper {
    max-width: var(--maxWidth);
    padding-inline: var(
        --spacing-300
    ); /* Kurzform für: padding-left und padding-right */
    margin-inline: auto; /* Kurzform für: margin-left und margin-right */
}

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

h1,
h2,
h3,
h4,
h5,
h6,
strong,
b {
    font-family: "PoppinsBold";
}

input,
textarea,
select,
button {
    font: inherit; /* wird vererbt aus den Einstellungen im body */
}

.flex {
    display: flex;
    gap: var(--spacing-200);
}

.grid {
    display: grid;
    gap: var(--spacing-200);
}

.btn {
    background-color: var(--cl-primary-500);
    color: var(--cl-neutral-100);
    display: block;
    padding: 8px 16px;
    width: fit-content;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 5px;

    border: 0;
    cursor: pointer;
}

.uppercase {
    text-transform: uppercase;
}

/* Utility Klassen */
/* Typescale 1.2 */

.fs-xxxl {
    font-size: 2.986rem;
    line-height: 1.1;
}

.fs-xxl {
    font-size: 2.488rem;
    line-height: 1.2;
}

.fs-xl {
    font-size: 2.074rem;
    line-height: 1.2;
}

.fs-l {
    font-size: 1.728rem;
    line-height: 1.3;
}

.fs-m {
    font-size: 1.44rem;
    line-height: 1.4;
}

.fs-s {
    font-size: 0.833rem;
}

.fc-primary-900 {
    color: var(--cl-primary-900);
}

.fc-primary-500 {
    color: var(--cl-primary-500);
}

.fc-primary-200 {
    color: var(--cl-primary-200);
}

.fc-primary-100 {
    color: var(--cl-primary-100);
}

.fc-accent-900 {
    color: var(--cl-accent-900);
}

.fc-accent-500 {
    color: var(--cl-accent-500);
}

.fc-accent-200 {
    color: var(--cl-accent-200);
}

.fc-accent-100 {
    color: var(--cl-accent-100);
}

.fc-neutral-900 {
    color: var(--cl-neutral-900);
}

.fc-neutral-500 {
    color: var(--cl-neutral-500);
}

.fc-neutral-200 {
    color: var(--cl-neutral-200);
}

.fc-neutral-100 {
    color: var(--cl-neutral-100);
}

.bg-primary-900 {
    background-color: var(--cl-primary-900);
}

.bg-primary-500 {
    background-color: var(--cl-primary-500);
}

.bg-primary-200 {
    background-color: var(--cl-primary-200);
}

.bg-primary-100 {
    background-color: var(--cl-primary-100);
}

.bg-accent-900 {
    background-color: var(--cl-accent-900);
}

.bg-accent-500 {
    background-color: var(--cl-accent-500);
}

.bg-accent-200 {
    background-color: var(--cl-accent-200);
}

.bg-accent-100 {
    background-color: var(--cl-accent-100);
}

.bg-neutral-900 {
    background-color: var(--cl-neutral-900);
}

.bg-neutral-500 {
    background-color: var(--cl-neutral-500);
}

.bg-neutral-200 {
    background-color: var(--cl-neutral-200);
}

.bg-neutral-100 {
    background-color: var(--cl-neutral-100);
}

.padding-100 {
    padding-block: var(--spacing-100);
}

.padding-200 {
    padding-block: var(--spacing-200);
}

.padding-300 {
    padding-block: var(--spacing-300);
}

.padding-400 {
    padding-block: var(--spacing-400);
}

@media (width > 60rem) {
    /* TypeScale Golden Schnitt halben Increment 1.309 */

    .fs-xxxl {
        font-size: 5rem;
    }

    .fs-xxl {
        font-size: 3.813rem;
    }

    .fs-xl {
        font-size: 2.938rem;
    }

    .fs-l {
        font-size: 2.25rem;
    }

    .fs-m {
        font-size: 1.688rem;
    }

    .fs-s {
        font-size: 0.75rem;
    }
}