@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/werkregister/assets/fonts/IBMPlexSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/werkregister/assets/fonts/IBMPlexSans-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url('/werkregister/assets/fonts/IBMPlexSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans Fallback';
    src: url('/werkregister/assets/fonts/NotoSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Junicode Old Norse';
    src: url('/assets/fonts/altnordisch/JunicodeVF-Roman.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Junicode Old Norse';
    src: url('/assets/fonts/altnordisch/JunicodeVF-Italic.woff2') format('woff2');
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gentium Old Norse';
    src: url('/assets/fonts/altnordisch/Gentium-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --vs-bg: #0a0a0a;
    --vs-bg-elevated: #111111;
    --vs-line: #262626;
    --vs-bone-rgb: 232, 224, 208;
    --vs-bone-strong-rgb: 240, 233, 220;
    --vs-text: #d8d0c2;
    --vs-text-strong: #ebe4d6;
    --vs-text-muted: #9b9387;
    --vs-link: #ded6c9;
    --vs-link-hover: #f0e9dc;
    --vs-max-width: 1200px;
    --vs-gap: 24px;
    --vs-radius: 0;
    --vs-header-height: 72px;
    --vs-font-sans: 'IBM Plex Sans', 'Noto Sans Fallback', Arial, Helvetica, sans-serif;
    --vs-font-oldnorse: 'Gentium Old Norse', 'Junicode Old Norse', 'Noto Sans Fallback', serif;
}

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

html {
    font-size: 16px;
}

body {
    margin: 0;
    background: var(--vs-bg);
    color: var(--vs-text);
    font-family: var(--vs-font-sans);
    line-height: 1.5;
}


.vs-oldnorse {
    font-family: var(--vs-font-oldnorse);
    font-variant-ligatures: none;
    font-synthesis: none;
    -webkit-font-feature-settings: "liga" 0, "clig" 0;
    font-feature-settings: "liga" 0, "clig" 0;
}

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

svg {
    display: block;
}

a {
    color: var(--vs-link);
    text-decoration: none;
}

a:hover,
a:focus-visible {
    color: var(--vs-link-hover);
}

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

button {
    cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 0.75em;
    color: var(--vs-text-strong);
    font-weight: 500;
    line-height: 1.2;
}

p {
    margin: 0 0 1rem;
}

ul,
ol {
    margin: 0;
    padding: 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* =========================================================
   GRAIN — ROOT-OBERFLÄCHE NEU GESETZT
   Ziel:
   - sichtbare matte Zerfallswirkung behalten
   - vertikale Bänderung der Dual-Layer-Blendlogik entfernen
   - Mobil nicht mehr neutralisieren, sondern stabil mitführen
   ========================================================= */

:root {
    --vs-grain-url: url('/assets/img/textures/grain_matte_isotropic_2048.png');
    --vs-grain-size: 2048px 2048px;
    --vs-grain-opacity: 1;
}

body {
    position: relative;
    background-color: var(--vs-bg);
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--vs-grain-url);
    background-repeat: repeat;
    background-position: center top;
    background-size: var(--vs-grain-size);
    opacity: var(--vs-grain-opacity);
}

@media (max-width: 900px) {
    :root {
        --vs-grain-size: 1600px 1600px;
    }
}


/* =========================================================
   GRAIN-HIERARCHIE — ROOT-LESEZONEN / RUHIGERE INHALTSNÄHE
   Ziel:
   - freie Grundfläche bleibt tragender Texture-Layer
   - textnahe Zonen werden nur minimal beruhigt
   - keine sichtbaren Kästen, sondern weiche Flächenberuhigung
   ========================================================= */

:root {
    --vs-grain-calm-root: rgba(10, 10, 10, 0.16);
    --vs-grain-calm-root-soft: rgba(10, 10, 10, 0.10);
    --vs-grain-calm-root-fade: rgba(10, 10, 10, 0);
}

.start-setzung__text,
.legal-page,
.legal-page__section {
    position: relative;
    z-index: 1;
}

.start-setzung__text::before,
.legal-page::before {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: -1;
    background: linear-gradient(
        90deg,
        var(--vs-grain-calm-root) 0%,
        var(--vs-grain-calm-root-soft) 68%,
        var(--vs-grain-calm-root-fade) 100%
    );
}

.start-setzung__text::before {
    inset: -12px -72px -16px -14px;
}

.legal-page::before {
    inset: -8px -92px -12px -14px;
}

.legal-page__section {
    background: linear-gradient(
        90deg,
        rgba(10, 10, 10, 0.09) 0%,
        rgba(10, 10, 10, 0.05) 72%,
        rgba(10, 10, 10, 0) 100%
    );
}

@media (max-width: 900px) {
    :root {
        --vs-grain-calm-root: rgba(10, 10, 10, 0.20);
        --vs-grain-calm-root-soft: rgba(10, 10, 10, 0.12);
    }

    .start-setzung__text::before {
        inset: -10px -18px -12px -10px;
    }

    .legal-page::before {
        inset: -8px -20px -12px -10px;
    }
}