@font-face {
    font-family: "Anton Local";
    src: url("/assets/fonts/anton-regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter Local";
    src: url("/assets/fonts/inter-light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter Local";
    src: url("/assets/fonts/inter-regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter Local";
    src: url("/assets/fonts/inter-black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Phase-2 assumptions:
   - Farb- und Typo-Tokens sind aus den Designreferenzen visuell angenähert.
   - Finale Pixelwerte/Farbwerte werden nach finalem Design-Spec präzisiert.
   - Aktuell stehen nur TTF-Fonts zur Verfügung; WOFF2 ist für Production weiterhin empfohlen. */
:root {
    --color-bg: #090b10;
    --color-surface: #121521;
    --color-surface-2: #181d2a;
    --color-text: #f5f7ff;
    --color-muted: #b7bfd3;
    --color-border: #2e3446;
    --color-accent: #ef3535;
    --color-accent-contrast: #100f16;
    --color-success: #55cc95;
    --color-error: #ff6f79;
    /* Phase-2.1 assumption from XD 2-HOME.png: yellow-green separator tone + bright work area surface */
    --color-home-claim: #d8ff02;
    --color-home-work-surface: #ffffff;
    --color-home-work-text: #0a0d14;

    --font-body: "Inter Local", "Helvetica Neue", Arial, sans-serif;
    --font-heading: "Anton Local", "Inter Local", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SFMono-Regular", Menlo, Monaco, Consolas, monospace;

    --fs-100: 0.8125rem;
    --fs-200: 0.9375rem;
    --fs-300: 1rem;
    --fs-400: 1.125rem;
    --fs-500: 1.375rem;
    --fs-600: 1.875rem;
    --fs-700: 2.5rem;
    --fs-800: clamp(2.75rem, 6vw, 4.5rem);
    --type-display-xl: clamp(76px, 10.8vw, 240px);
    --type-display-lg: clamp(58px, 8.6vw, 172px);
    --type-headline: clamp(40px, 5.5vw, 104px);
    --type-subheadline: clamp(24px, 3.2vw, 52px);
    --type-kicker: clamp(14px, 1.25vw, 21px);
    --type-menu: clamp(64px, 8.8vw, 156px);
    --type-claim: clamp(56px, 9.2vw, 198px);
    --type-work-title: clamp(48px, 7.4vw, 148px);
    --type-meta: clamp(15px, 1.18vw, 19px);
    --type-small: clamp(17px, 1.3vw, 23px);
    --type-body: clamp(20px, 1.58vw, 28px);
    --type-button: clamp(17px, 1.3vw, 23px);
    --type-footer: clamp(18px, 1.4vw, 25px);
    --type-legal: clamp(15px, 1.12vw, 19px);
    --logo-size-header: clamp(82px, 7.8vw, 142px);
    --logo-size-menu: clamp(96px, 9.4vw, 176px);
    --logo-size-footer: clamp(7.2rem, 13vw, 10.8rem);
    --badge-size-header: clamp(78px, 7.4vw, 152px);
    --badge-size-cta: clamp(110px, 12vw, 220px);

    --lh-tight: 1.1;
    --lh-heading: 1.18;
    --lh-body: 1.55;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4.5rem;
    --space-9: 6rem;

    --radius-s: 0.375rem;
    --radius-m: 0.75rem;
    --radius-l: 1.25rem;
    --radius-xl: 2rem;

    --site-max: 1920px;
    --container-wide: 1440px;
    --container-default: 1280px;
    --container-narrow: 960px;
    --case-gap: clamp(12px, 1.4vw, 32px);
    --edge-x: clamp(20px, 5vw, 140px);
    --edge-y: clamp(24px, 7vh, 120px);
    --immersive-min-height: 94svh;
    --page-padding-desktop: clamp(32px, 5vw, 96px);
    --page-padding-tablet: 40px;
    --page-padding-mobile: 20px;
    --container-max: var(--container-default);

    --shadow-soft: 0 20px 40px rgba(0, 0, 0, 0.22);

    --breakpoint-sm: 36rem;
    --breakpoint-md: 48rem;
    --breakpoint-lg: 64rem;
    --breakpoint-xl: 80rem;
}

[data-theme="dark"] {
    color-scheme: dark;
}

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

html,
body {
    min-height: 100%;
    max-width: 100%;
    overflow-x: clip;
}

/* Fallback for browsers without overflow: clip support */
@supports not (overflow: clip) {
    html,
    body {
        overflow-x: hidden;
    }
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--type-body);
    line-height: var(--lh-body);
    background: radial-gradient(circle at top right, #181a2b 0%, var(--color-bg) 45%);
    color: var(--color-text);
}

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

h1,
h2,
h3 {
    margin-top: 0;
    font-family: var(--font-heading);
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: var(--lh-heading);
}

h1 {
    font-size: var(--fs-800);
}

h2 {
    font-size: clamp(1.875rem, 4vw, 2.75rem);
}

h3 {
    font-size: var(--fs-500);
}

p {
    margin: 0 0 var(--space-4);
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover,
a:focus-visible {
    text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid rgba(255, 95, 122, 0.75);
    outline-offset: 2px;
}

code {
    font-family: var(--font-mono);
    font-size: 0.92em;
    background: rgba(255, 255, 255, 0.08);
    padding: 0.1em 0.35em;
    border-radius: 0.25rem;
}

.skip-link {
    position: absolute;
    left: 0;
    top: -100%;
    z-index: 1000;
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    padding: var(--space-2) var(--space-4);
}

.skip-link:focus {
    top: 0;
}

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

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}