/* ==========================================================================
   fonts.css
   Lokales Hosting für Inter + IBM Plex Sans
   Annahme:
   - diese Datei liegt in /css/fonts.css
   - die Fontdateien liegen in /fonts/
   ========================================================================== */

/* --------------------------------------------------------------------------
   Inter Variable – normal
   -------------------------------------------------------------------------- */

@font-face {
    font-family: "Inter";
    src: local("Inter Variable"), local("Inter"), local("Inter Regular"), local("Inter-Regular"), url("../fonts/InterVariable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   Inter Variable – italic
   -------------------------------------------------------------------------- */

@font-face {
    font-family: "Inter";
    src: local("Inter Variable Italic"), local("Inter Italic"), local("Inter-Italic"), url("../fonts/InterVariable-Italic.woff2") format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   IBM Plex Sans – regular (400)
   -------------------------------------------------------------------------- */

@font-face {
    font-family: "IBM Plex Sans";
    src: local("IBM Plex Sans"), local("IBM Plex Sans Regular"), local("IBMPlexSans"), local("IBMPlexSans-Regular"), url("../fonts/ibm-plex-sans-v23-latin_latin-ext-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   IBM Plex Sans – italic (400)
   -------------------------------------------------------------------------- */

@font-face {
    font-family: "IBM Plex Sans";
    src: local("IBM Plex Sans Italic"), local("IBMPlexSans-Italic"), url("../fonts/ibm-plex-sans-v23-latin_latin-ext-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   IBM Plex Sans – medium (500)
   -------------------------------------------------------------------------- */

@font-face {
    font-family: "IBM Plex Sans";
    src: local("IBM Plex Sans Medium"), local("IBMPlexSans-Medium"), url("../fonts/ibm-plex-sans-v23-latin_latin-ext-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   IBM Plex Sans – medium italic (500)
   -------------------------------------------------------------------------- */

@font-face {
    font-family: "IBM Plex Sans";
    src: local("IBM Plex Sans Medium Italic"), local("IBMPlexSans-MediumItalic"), url("../fonts/ibm-plex-sans-v23-latin_latin-ext-500italic.woff2") format("woff2");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   IBM Plex Sans – semibold (600)
   -------------------------------------------------------------------------- */

@font-face {
    font-family: "IBM Plex Sans";
    src: local("IBM Plex Sans SemiBold"), local("IBM Plex Sans Semibold"), local("IBMPlexSans-SemiBold"), local("IBMPlexSans-Semibold"), url("../fonts/ibm-plex-sans-v23-latin_latin-ext-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   IBM Plex Sans – semibold italic (600)
   -------------------------------------------------------------------------- */

@font-face {
    font-family: "IBM Plex Sans";
    src: local("IBM Plex Sans SemiBold Italic"), local("IBM Plex Sans Semibold Italic"), local("IBMPlexSans-SemiBoldItalic"), local("IBMPlexSans-SemiboldItalic"), url("../fonts/ibm-plex-sans-v23-latin_latin-ext-600italic.woff2") format("woff2");
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   IBM Plex Sans – bold (700)
   -------------------------------------------------------------------------- */

@font-face {
    font-family: "IBM Plex Sans";
    src: local("IBM Plex Sans Bold"), local("IBMPlexSans-Bold"), url("../fonts/ibm-plex-sans-v23-latin_latin-ext-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   IBM Plex Sans – bold italic (700)
   -------------------------------------------------------------------------- */

@font-face {
    font-family: "IBM Plex Sans";
    src: local("IBM Plex Sans Bold Italic"), local("IBMPlexSans-BoldItalic"), url("../fonts/ibm-plex-sans-v23-latin_latin-ext-700italic.woff2") format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* ==========================================================================
   Font-Stacks als Variablen
   ========================================================================== */
:root {
    --font-body: "Inter", "IBM Plex Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-heading: "IBM Plex Sans", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-ui: "Inter", "IBM Plex Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   Grundzuweisung
   ========================================================================== */
html {
    font-family: var(--font-body);
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    font-style: normal;
}

h1, h2, h3, h4, h5, h6, .brand-name, .site-title, .hero-title {
    font-family: var(--font-heading);
    font-weight: 600;
}

button, input, select, textarea, nav, .button {
    font-family: var(--font-ui);
}