:root {
    /* Schriftfamilien */
    --font-default: "Nunito Sans", sans-serif;
    --font-alternative: "Marcellus", sans-serif;
    --font-fontawesome: "Font Awesome 6 Pro";

    /* Schriftgroessen */
    --font-size-multiplier: 1;
    --font-size-xs: calc(
        clamp(1.6rem, 1.541rem + 0.185vi, 1.8rem) * var(--font-size-multiplier)
    );
    --font-size-sm: calc(
        clamp(1.8rem, 1.741rem + 0.185vi, 2rem) * var(--font-size-multiplier)
    );
    --font-size-md: calc(
        clamp(2.2rem, 2.081rem + 0.37vi, 2.6rem) * var(--font-size-multiplier)
    );
    --font-size-lg: calc(
        clamp(2.6rem, 2.422rem + 0.556vi, 3.2rem) * var(--font-size-multiplier)
    );
    --font-size-xl: calc(
        clamp(3rem, 2.704rem + 0.926vi, 4rem) * var(--font-size-multiplier)
    );
    --font-size-xxl: calc(
        clamp(4rem, 3.407rem + 1.852vi, 6rem) * var(--font-size-multiplier)
    );

    /* flow space */
    --gutter: 3.2rem;
    --gutter-var: clamp(0rem, -0.948rem + 2.963vi, 3.2rem);
    --gutter-fluid: calc((var(--gutter) + var(--gutter-var)) / 2);

    /* Borders */
    --border-line: 0.1rem solid;
    --border-line-thick: 0.2rem solid;
    --border-dots: 0.2rem dotted;

    /* Uebergaenge */
    --transition-duration: 250ms;
    --transition-easing: cubic-bezier(0.15, 0.15, 0.3, 0.9);
    --transition: var(--transition-duration) var(--transition-easing);

    /* Dokumentbezogenes */
    --content-min: 29rem;
    --content-max-c: 84rem;
    --content-max: 110rem;
    --content-width: clamp(var(--content-min), 5rem + 75vi, var(--content-max));
    --content-width-condensed: clamp(
        var(--content-min),
        12.704rem + 50.926vi,
        var(--content-max-c)
    );
    --content-padding: max(2rem, (100vw - var(--content-width)) / 2);

    --logo-size: clamp(3.2rem, 2.133rem + 3.333vi, 6.8rem);
    --header-height: calc(
        var(--logo-size) + (var(--gutter) + var(--gutter-var) * 2) / 3 * 2 +
            0.1rem
    );
    --content-height: calc(100vb - var(--header-height, 0rem));

    /* Schrift */
    --font-main: var(--font-default);
    --font-alt: var(--font-alternative, var(--font-default));

    /* Blur */
    --bg-transparency: 12.5%;
    --blur-strength: 1rem;

    font-size: 62.5%;
}

:root:not([data-loaded="true"]) {
    --transition: none;
}

/* colors */
:root,
::selection {
    --color-canvastext: var(--color-dark);
    --color-canvas: var(--color-white);
    --color-accent: var(--color-gold);
    --color-selection: var(--color-accent);
    --color-black: black;
    --color-white: white;
    --color-ocher: #e4c467;
    --color-gold: #c9961a;
}

@supports (color: oklch(1 1 1 / 1)) {
    :root,
    ::selection {
        --color-black: oklch(0% 0 0deg);
        --color-white: oklch(100% 0 0deg);
        --color-ocher: oklch(82.91% 0.1183 90.71deg);
        --color-gold: oklch(70.34% 0.1386 82.95deg);
    }
}

/* block padding */
:root {
    --block-padding: 5rem;
}

@media (min-width: 744px) {
    :root {
        --block-padding: 10rem;
    }
}

@media (min-width: 960px) {
    :root {
        --block-padding: 15rem;
    }
}

/* selection */
::selection {
    background-color: color-mix(
        in oklch,
        transparent,
        var(--color-selection) 32.5%
    );
}

/* focus */
:focus-visible,
:any-link:focus-visible img {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    outline: var(--border-line-thick) var(--color-selection) !important;
    outline-offset: 0.15rem;
    border-radius: 0.125rem;
    background-color: color-mix(
        in oklch,
        transparent,
        var(--color-selection) var(--bg-transparency)
    );
}