/* ==== FONTS ==== */
@font-face {
    font-family: "Fraunces";
    src: url("../fonts/fraunces.woff2") format("woff2");
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Fraunces Fallback";
    src: local("Georgia");
    descent-override: 24.60%;
    size-adjust: 105.68%;
    ascent-override: 92.70%;
}
@font-face {
    font-family: "Albert Sans";
    src: url("../fonts/albert-sans.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Albert Sans Fallback";
    src: local("Arial");
    descent-override: 24.10%;
    size-adjust: 103.87%;
    ascent-override: 91.50%;
}

/* ==== TOKENS ==== */
:root {
    --vlies-0: #16161B;
    --vlies-1: #202028;
    --vlies-2: #34343F;

    --faden: #ECECF1;
    --faden-matt: #A6A6B3;

    --brombeere: #9E4A63;
    --brombeere-oklch: oklch(49% 0.12 0);
    --masche: #E59AB0;

    --koralle: #FF6B5A;
    --koralle-oklch: oklch(70% 0.19 30);
    --koralle-text: #16161B;

    --garn-farbe: #45586a;

    --wasserzeichen: rgba(236, 236, 241, 0.06);

    --schrift-text: "Albert Sans", "Albert Sans Fallback", Arial, sans-serif;
    --schrift-titel: "Fraunces", "Fraunces Fallback", Georgia, serif;

    --spur-breit: 1200px;
    --kante: 10px;
    --kante-klein: 8px;
    --knopf-rund: 8px;
}

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

html {
    scroll-padding-top: 86px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: var(--vlies-0);
    color: var(--faden);
    font-family: var(--schrift-text);
    font-size: 17px;
    line-height: 1.65;
    font-weight: 400;
}

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

a {
    color: var(--masche);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--faden);
}

/* ==== TYPOGRAPHY ==== */
h1,
h2,
h3 {
    font-family: var(--schrift-titel);
    font-weight: 500;
    line-height: 1.08;
    margin: 0 0 0.5em;
    color: var(--faden);
    overflow-wrap: break-word;
    hyphens: auto;
}

h2 {
    text-transform: uppercase;
    font-size: clamp(1.7rem, 1rem + 2.4vw, 2.6rem);
    letter-spacing: 0.01em;
}

h3 {
    font-size: 1.25rem;
    font-weight: 500;
}

p {
    margin: 0 0 1.1em;
}

ul,
ol {
    margin: 0 0 1.1em;
    padding-left: 1.2em;
}

li {
    margin-bottom: 0.4em;
}

strong {
    font-weight: 600;
    color: var(--faden);
}

:focus-visible {
    outline: 2px solid var(--koralle);
    outline-offset: 3px;
}

.eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--masche);
    margin-bottom: 0.9rem;
}

.abschnitt-nummer {
    font-family: var(--schrift-text);
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
    letter-spacing: 0.18em;
    color: var(--brombeere);
}