/* ============================================================
   global.css – Finoxsoft.com
   Typografie-System: Syne + Inter Tight + JetBrains Mono
   Siehe Docs/02_DESIGN-SYSTEM.md für vollständige Regeln.
   ============================================================ */

/* ── Schriften laden (temporär via Google Fonts – vor Go-Live auf lokal umstellen!) ── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Inter+Tight:ital,wght@0,400;0,500;1,400&family=JetBrains+Mono:wght@400&display=swap');

/* ── CSS-Variablen (Design-Token) ─────────────────────────── */
:root {
    /* ── Farben: Darkroom-Palette ── (Docs/02_DESIGN-SYSTEM.md) */
    --farbe-bg-1:             #0A0A0B;  /* Haupt-Hintergrund */
    --farbe-bg-2:             #111113;  /* Karten, erhöhte Flächen */
    --farbe-bg-3:             #1C1C1F;  /* Hover-States, Abschnittswechsel */
    --farbe-rahmen:           #2A2A2E;  /* Kanten, Trennlinien */
    --farbe-text:             #F0F0F0;  /* Primärtext */
    --farbe-text-2:           #8A8A8E;  /* Untertitel, sekundärer Text */
    --farbe-text-3:           #555558;  /* Meta-Infos, Mono-Labels */
    --farbe-akzent:           #D4FF5E;  /* Logo-Grün-Gelb – sparsam! */
    --farbe-akzent-hover:     #9DB82E;  /* Akzent Hover */
    /* Aliasse für Abwärtskompatibilität */
    --farbe-hintergrund:      var(--farbe-bg-1);
    --farbe-hintergrund-2:    var(--farbe-bg-2);
    --farbe-text-sekundaer:   var(--farbe-text-2);

    /* ── Typografie-Variablen ── */
    /* Schriftfamilien */
    --schrift-display:  'Syne', sans-serif;       /* Überschriften / Hero */
    --schrift-body:     'Inter Tight', sans-serif; /* Fließtext / UI */
    --schrift-mono:     'JetBrains Mono', monospace; /* Labels / Code / Tags */

    /* Schriftgewichte */
    --gewicht-display:  800;  /* Syne ExtraBold – Hero-Überschriften */
    --gewicht-h1:       700;  /* Syne Bold – Seitenüberschriften */
    --gewicht-h2:       600;  /* Syne SemiBold – Abschnittsüberschriften */
    --gewicht-body:     500;  /* Inter Tight Medium – Fließtext */
    --gewicht-caption:  400;  /* Inter Tight Regular – Bildunterschriften, Metainfo */

    /* Abstände (4px Raster) */
    --abstand-xs:   4px;
    --abstand-s:    8px;
    --abstand-m:    16px;
    --abstand-l:    24px;
    --abstand-xl:   40px;
    --abstand-xxl:  80px;

    /* Layout */
    --max-breite:       1200px;
    --nav-hoehe:        64px;
    --rahmen-radius:    12px;
    --schatten:         0 2px 16px rgba(0, 0, 0, 0.08);
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    /* Inter Tight Medium als Standard-Fließtext */
    font-family: var(--schrift-body);
    font-weight: var(--gewicht-body);
    color: var(--farbe-text);
    background-color: var(--farbe-hintergrund);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a {
    color: var(--farbe-primaer);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ── Layout-Helfer ────────────────────────────────────────── */
.container {
    max-width: var(--max-breite);
    margin: 0 auto;
    padding: 0 var(--abstand-l);
}

.abschnitt {
    padding: var(--abstand-xxl) 0;
}

.abschnitt--grau {
    background-color: var(--farbe-hintergrund-2);
}

/* ── Typografie ───────────────────────────────────────────── */

/* Alle Überschriften: Syne */
h1, h2, h3, h4 {
    font-family: var(--schrift-display);
    line-height: 1.15;
    word-break: break-word; /* Absicherung für lange deutsche Wörter */
}

/* Display / Hero – Syne ExtraBold – nur für allererste Überschrift im Hero-Bereich */
.display {
    font-family: var(--schrift-display);
    font-weight: var(--gewicht-display);
    font-size: clamp(3rem, 7vw, 5.5rem);
    letter-spacing: -0.03em;
    line-height: 1.05;
}

/* H1 – Syne Bold – Seitenüberschriften */
h1 {
    font-weight: var(--gewicht-h1);
    font-size: clamp(2rem, 5vw, 3.5rem);
    letter-spacing: -0.025em;
}

/* H2 – Syne SemiBold – Abschnitts-Überschriften */
h2 {
    font-weight: var(--gewicht-h2);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    letter-spacing: -0.02em;
}

/* H3 – Syne SemiBold – Unter-Abschnitte */
h3 {
    font-weight: var(--gewicht-h2);
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    letter-spacing: -0.01em;
}

/* Body Text – Inter Tight Medium (Standard via body, hier zur Klarheit) */
p {
    font-family: var(--schrift-body);
    font-weight: var(--gewicht-body);
    font-size: 1rem;
    line-height: 1.65;
}

/* Caption / Subtext – Inter Tight Regular */
.caption,
figcaption,
small {
    font-family: var(--schrift-body);
    font-weight: var(--gewicht-caption);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--farbe-text-sekundaer);
}

/* Mono / Labels / Tags / Code – JetBrains Mono */
code,
pre,
.mono,
.label,
.tag,
.badge {
    font-family: var(--schrift-mono);
    font-weight: 400;
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
}

/* Untertitel unter Hero/Überschriften */
.untertitel {
    font-family: var(--schrift-body);
    font-weight: var(--gewicht-body);
    font-size: 1.125rem;
    color: var(--farbe-text-2);
    max-width: 580px;
    line-height: 1.6;
}

/* Abschnitts-Label – JetBrains Mono, redaktioneller Charakter */
.abschnitts-label {
    font-family: var(--schrift-mono);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    color: var(--farbe-text-3);
    text-transform: uppercase;
    display: block;
    margin-bottom: 16px;
}

/* Akzent-Text – für Keyword in Hero-Heading */
.akzent {
    color: var(--farbe-akzent);
}

/* ── Navigation ───────────────────────────────────────────── */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-hoehe);
    /* Startet transparent, wird per JS auf --nav-scroll gesetzt */
    background: transparent;
    transition: background 0.3s, border-color 0.3s;
    border-bottom: 1px solid transparent;
    z-index: 100;
    display: flex;
    align-items: center;
}

/* Klasse die per JS beim Scrollen hinzukommt */
.nav--gescrollt {
    background: rgba(10, 10, 11, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom-color: var(--farbe-rahmen);
}

.nav__inhalt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--max-breite);
    margin: 0 auto;
    padding: 0 var(--abstand-xl);
}

/* Logo: SVG-Icon + Textname */
.nav__logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.nav__logo-text {
    font-family: var(--schrift-display);
    font-weight: var(--gewicht-h1);
    font-size: 1.0625rem;
    color: var(--farbe-text);
    letter-spacing: -0.01em;
}

.nav__logo-icon {
    width: 28px;
    height: 28px;
}

.nav__links {
    display: flex;
    gap: 32px;
    list-style: none;
    align-items: center;
}

/* Links mit Mono-Nummern-Präfix */
.nav__links a {
    font-family: var(--schrift-body);
    font-weight: var(--gewicht-caption);
    font-size: 0.875rem;
    color: var(--farbe-text-2);
    transition: color 0.2s;
    text-decoration: none;
}

.nav__links a:hover {
    color: var(--farbe-text);
}

.nav__links a.aktiv {
    color: var(--farbe-akzent);
}

.nav__links .nav__num {
    font-family: var(--schrift-mono);
    font-size: 0.6875rem;
    color: var(--farbe-text-3);
    margin-right: 5px;
}

/* ── Footer ───────────────────────────────────────────────── */
.footer {
    background-color: var(--farbe-bg-1);
    border-top: 1px solid var(--farbe-rahmen);
    padding: 64px 0 32px;
}

.footer__inhalt {
    max-width: var(--max-breite);
    margin: 0 auto;
    padding: 0 var(--abstand-xl);
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--abstand-xl);
}

.footer__titel {
    font-family: var(--schrift-display);
    font-weight: var(--gewicht-h2);
    font-size: 0.9375rem;
    color: var(--farbe-text);
    margin-bottom: 16px;
}

.footer__links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer__links a {
    font-size: 0.875rem;
    color: var(--farbe-text-2);
    text-decoration: none;
    transition: color 0.2s;
}

.footer__links a:hover {
    color: var(--farbe-text);
}

.footer__unten {
    max-width: var(--max-breite);
    margin: 40px auto 0;
    padding: 24px var(--abstand-xl) 0;
    border-top: 1px solid var(--farbe-rahmen);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--farbe-text-3);
    font-family: var(--schrift-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-s);
    padding: 11px 24px;
    border-radius: 6px;
    font-family: var(--schrift-body);
    font-weight: var(--gewicht-body);
    font-size: 0.9375rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    border: 1px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

/* Primär: Akzentfarbe mit schwarzem Text */
.btn--primaer {
    background: var(--farbe-akzent);
    color: #0A0A0B;
    border-color: var(--farbe-akzent);
}

.btn--primaer:hover {
    background: var(--farbe-akzent-hover);
    border-color: var(--farbe-akzent-hover);
    text-decoration: none;
    color: #0A0A0B;
}

/* Sekundär: transparent mit Rahmen */
.btn--sekundaer {
    background: transparent;
    color: var(--farbe-text-2);
    border-color: var(--farbe-rahmen);
}

.btn--sekundaer:hover {
    background: var(--farbe-bg-3);
    color: var(--farbe-text);
    text-decoration: none;
}

/* ── App-Card ─────────────────────────────────────────────── */
.app-karte {
    background: var(--farbe-bg-2);
    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--rahmen-radius);
    padding: var(--abstand-l);
    transition: border-color 0.25s, transform 0.25s;
    display: flex;
    flex-direction: column;
    gap: var(--abstand-m);
    text-decoration: none;
}

.app-karte:hover {
    border-color: var(--farbe-akzent);
    transform: translateY(-4px);
    text-decoration: none;
}

.app-karte__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.app-karte__icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}

.app-karte__version {
    font-family: var(--schrift-mono);
    font-size: 0.6875rem;
    color: var(--farbe-text-3);
    letter-spacing: 0.06em;
    margin-top: 4px;
}

.app-karte__name {
    font-family: var(--schrift-display);
    font-weight: var(--gewicht-h2);
    font-size: 1.125rem;
    color: var(--farbe-text);
    letter-spacing: -0.01em;
}

.app-karte__beschreibung {
    font-family: var(--schrift-body);
    font-weight: var(--gewicht-caption);
    color: var(--farbe-text-2);
    font-size: 0.9375rem;
    line-height: 1.55;
    flex-grow: 1;
}

/* ── Formular ─────────────────────────────────────────────── */
.formular__gruppe {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--abstand-m);
}

.formular__label {
    font-family: var(--schrift-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--farbe-text-3);
    text-transform: uppercase;
}

.formular__feld {
    padding: 11px 14px;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 6px;
    font-family: var(--schrift-body);
    font-size: 0.9375rem;
    color: var(--farbe-text);
    background: var(--farbe-bg-2);
    transition: border-color 0.2s;
}

.formular__feld::placeholder {
    color: var(--farbe-text-3);
}

.formular__feld:focus {
    outline: none;
    border-color: var(--farbe-akzent);
}

textarea.formular__feld {
    resize: vertical;
    min-height: 140px;
}

/* ── Meldungen ────────────────────────────────────────────── */
.meldung {
    padding: var(--abstand-m);
    border-radius: 6px;
    font-family: var(--schrift-body);
    font-weight: var(--gewicht-body);
    font-size: 0.9375rem;
    display: none;
}

.meldung--erfolg {
    background: rgba(212, 255, 94, 0.08);
    color: var(--farbe-akzent);
    border: 1px solid rgba(212, 255, 94, 0.25);
}

.meldung--fehler {
    background: rgba(255, 80, 80, 0.08);
    color: #FF8080;
    border: 1px solid rgba(255, 80, 80, 0.25);
}

/* ── Reveal-Animation ─────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal--sichtbar {
    opacity: 1;
    transform: translateY(0);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .nav__inhalt {
        padding: 0 var(--abstand-m);
    }

    .footer__inhalt {
        grid-template-columns: 1fr;
        gap: var(--abstand-l);
    }

    .footer__unten {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .nav__links {
        display: none; /* Mobile-Menü folgt später */
    }
}