/* ==========================================================================
   ARI/WE/SO — base.css
   Design-Tokens, Schriften, Reset, Basis-Typografie, Utilities
   ========================================================================== */

/* --- 1. Schriften (self-hosted, kein Google Fonts) ----------------------- */

/* Zur Schreibweise von format():
   'woff2-variations' war ein früher Vorschlag und wurde nie standardisiert.
   Erkennt ein Browser den Bezeichner nicht, überspringt er die Quelle
   kommentarlos — die Schrift fällt dann still auf die Systemschrift zurück
   und die Seite sieht auf jedem Gerät anders aus. Deshalb steht die heute
   gültige Schreibweise zuerst und die alte nur als Rückfallebene.

   Die Dateipfade tragen bewusst KEINE Versionskennung (?v=...). Sie müssen
   exakt mit dem preload-Verweis im <head> übereinstimmen, sonst hält der
   Browser das für zwei verschiedene Dateien und lädt 48 KB doppelt. */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2') tech(variations),
         url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
    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+2074, U+20AC,
                   U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('/assets/fonts/inter-latin-ext-wght-normal.woff2') format('woff2') tech(variations),
         url('/assets/fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- 2. Design-Tokens --------------------------------------------------- */

:root {
    /* Flächen */
    --bg-main: #0a0a0c;
    --bg-surface: #131318;
    --bg-elevated: #1a1a21;
    --bg-glass: rgba(19, 19, 24, 0.75);

    /* Text */
    --text-main: #e0e0e0;
    --text-strong: #ffffff;
    --text-muted: #9ca3af;

    /* Neon-Akzente */
    --neon-blue: #00f3ff;
    --neon-green: #00ff87;
    --neon-purple: #b500ff;
    --neon-red: #ff3366;
    --gradient-accent: linear-gradient(90deg, var(--neon-green), var(--neon-purple));

    /* Neon als RGB-Tripel — erlaubt rgb(var(--x) / <alpha>) ohne Hardcoding */
    --rgb-blue: 0 243 255;
    --rgb-green: 0 255 135;
    --rgb-purple: 181 0 255;

    /* Linien & Ränder */
    --line-subtle: rgba(255, 255, 255, 0.05);
    --line-soft: rgba(255, 255, 255, 0.1);
    --line-strong: rgba(255, 255, 255, 0.2);

    /* Typografie */
    --font-primary: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --fs-h1: clamp(2.25rem, 1.2rem + 4.2vw, 4.5rem);
    --fs-h2: clamp(1.85rem, 1.2rem + 2.6vw, 3rem);
    --fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
    --fs-lead: clamp(1.05rem, 1rem + 0.5vw, 1.25rem);
    --fs-small: 0.875rem;

    /* Abstände (fluid — verhindert das Auseinanderfallen auf Tablets) */
    --section-spacing: clamp(72px, 9vw, 140px);
    --gap-sm: 12px;
    --gap-md: 24px;
    --gap-lg: clamp(32px, 5vw, 64px);
    --container-width: 1200px;
    --container-pad: clamp(20px, 5vw, 24px);
    --header-h: 76px;

    /* Form */
    --border-radius: 12px;
    --radius-sm: 8px;
    --radius-pill: 999px;

    /* Bewegung */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 0.2s;
    --dur-base: 0.3s;

    /* Ebenen */
    --z-header: 1000;
    --z-nav-panel: 1100;
    --z-floating: 500;
    --z-modal: 2000;
    --z-preloader: 9999;
    --z-progress: 9000;
}

/* --- 3. Reset ------------------------------------------------------------ */

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

html {
    scroll-behavior: smooth;
    /* Verhindert, dass Anker-Ziele unter dem fixierten Header verschwinden */
    scroll-padding-top: calc(var(--header-h) + 16px);
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: 1.65;
    /* clip statt hidden: kappt Überläufe, ohne position:sticky zu zerstören */
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

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

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

button { background: none; border: none; cursor: pointer; }

ul, ol { list-style: none; }

:focus-visible {
    outline: 2px solid var(--neon-blue);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Sichtbar nur für Tastatur- und Screenreader-Nutzer */
.skip-link {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: calc(var(--z-preloader) + 1);
    padding: 12px 20px;
    background: var(--neon-blue);
    color: #000;
    font-weight: 700;
    border-radius: var(--radius-sm);
    transform: translateY(-200%);
    transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

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

/* --- 4. Typografie ------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    line-height: 1.15;
    font-weight: 700;
    color: var(--text-strong);
    text-wrap: balance;
    margin-bottom: 1rem;
}

h1 { font-size: var(--fs-h1); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.015em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: 1.1rem; }

p { text-wrap: pretty; }
p + p { margin-top: 1rem; }

a {
    color: var(--neon-blue);
    text-decoration: none;
    transition: color var(--dur-base) ease, opacity var(--dur-base) ease;
}

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

/* --- 5. Scrollbar -------------------------------------------------------- */

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-main); }
::-webkit-scrollbar-thumb {
    background: rgb(var(--rgb-blue) / 0.5);
    border-radius: var(--radius-pill);
    border: 2px solid var(--bg-main);
}
::-webkit-scrollbar-thumb:hover { background: var(--neon-blue); }

html { scrollbar-color: rgb(var(--rgb-blue) / 0.5) var(--bg-main); }

::selection { background: rgb(var(--rgb-blue) / 0.3); color: #fff; }

/* --- 6. Layout-Utilities ------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.container-narrow {
    width: 100%;
    max-width: 820px;
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.section-padding { padding-block: var(--section-spacing); }
.bg-surface { background-color: var(--bg-surface); }

.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-small { font-size: var(--fs-small); }
.text-lead { font-size: var(--fs-lead); color: var(--text-muted); }

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mt-4 { margin-top: 4rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.w-100 { width: 100%; }

.is-hidden { display: none !important; }

/* --- 7. Verlaufstext ----------------------------------------------------- */

.gradient-text {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* verhindert das Abschneiden von Unterlängen (g, y, ß) */
    padding-bottom: 0.08em;
    display: inline-block;
}

/* Fallback: wenn background-clip:text nicht unterstützt wird, bleibt Text lesbar */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .gradient-text {
        background: none;
        color: var(--neon-green);
        -webkit-text-fill-color: currentColor;
    }
}

/* --- 8. Sektions-Köpfe --------------------------------------------------- */

.section-kicker {
    display: inline-block;
    color: var(--neon-blue);
    font-weight: 600;
    font-size: var(--fs-small);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.section-title { font-size: var(--fs-h2); margin-bottom: 1.25rem; }

.section-subtitle {
    font-size: var(--fs-lead);
    color: var(--text-muted);
    max-width: 62ch;
    margin-bottom: 3rem;
}

.text-center .section-subtitle,
.section-subtitle.text-center { margin-inline: auto; }