/* ============================================================
   FONTS — Neue Haas Grotesk Display
   ============================================================ */

@font-face {
    font-family: 'Neue Haas Grotesk';
    src: url('../assets/fonts/neuehaasdisplaybold.ttf') format('truetype');
    font-weight: 700;
    font-style:  normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Haas Grotesk';
    src: url('../assets/fonts/neuehaasdisplaymediu.ttf') format('truetype');
    font-weight: 500;
    font-style:  normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Haas Grotesk';
    src: url('../assets/fonts/neuehaasdisplaylight.ttf') format('truetype');
    font-weight: 300;
    font-style:  normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Haas Grotesk';
    src: url('../assets/fonts/neuehaasdisplaylightitalic.ttf') format('truetype');
    font-weight: 300;
    font-style:  italic;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Haas Grotesk';
    src: url('../assets/fonts/neuehaasdisplayxxthin.ttf') format('truetype');
    font-weight: 100;
    font-style:  normal;
    font-display: swap;
}


/* ── VARIABLEN ──────────────────────────────────────────────*/

:root {
    --font-heading: 'Neue Haas Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-body:    'Neue Haas Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}


/* ── ANWENDUNG ──────────────────────────────────────────────*/

body {
    font-family: var(--font-body);
    font-weight: 300;
}

/* Bold — Überschriften */
h1, h2, h3,
.hero-name,
.category-title,
.about-name,
.marquee-track span {
    font-family: var(--font-heading);
    font-weight: 700;
}

/* Light — Fließtext & UI */
.about-bio p,
.nav-link,
.nav-cta,
.mobile-link,
.subnav-link,
.contact-pill,
.swipe-hint {
    font-weight: 300;
}

/* Light als Ultra Thin — Texte direkt unter Überschriften */
.category-desc {
    font-weight: 300;
}

/* Light Italic — nur für Rollen-Text */
.about-role {
    font-weight: 300;
    font-style: italic;
}