/* =========================================
   IUNIXX – GLOBAL DESIGN SYSTEM
========================================= */

/* =========================================
   1. LOKALE SCHRIFTARTEN
========================================= */

@font-face {
    font-family: 'Made Evolve Sans';
    src: url('../fonts/made_evolve_sans_thin-webfont.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Made Evolve Sans';
    src: url('../fonts/made_evolve_sans_light-webfont.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Made Evolve Sans';
    src: url('../fonts/made_evolve_sans_regular-webfont.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Made Evolve Sans';
    src: url('../fonts/made_evolve_sans_medium-webfont.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Made Evolve Sans';
    src: url('../fonts/made_evolve_sans_bold-webfont.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* =========================================
   2. GLOBALE DESIGNVARIABLEN
========================================= */

:root {

    /* -------------------------------------
       MARKENFARBEN
    ------------------------------------- */

    --color-primary: #1499FE;
    --color-primary-dark: #0665AD;
    --color-primary-light: #EAF6FF;

    --color-navy: #071725;
    --color-white: #FFFFFF;

    /* -------------------------------------
       QUATTROFARBEN – TETRADISCHER VIERKLANG
    ------------------------------------- */

    --color-quattro-blue: #1499FE;
    --color-quattro-violet: #7914FE;
    --color-quattro-orange: #FE7914;
    --color-quattro-lime: #99FE14;

    /* -------------------------------------
       TEXTFARBEN
    ------------------------------------- */

    --color-text: #172B3A;
    --color-muted: #64748B;

    /* -------------------------------------
       HINTERGRÜNDE
    ------------------------------------- */

    --color-background: #FFFFFF;
    --color-background-light: #F5F8FC;
    --color-card: #F4F9FF;

    /* -------------------------------------
       RAHMEN
    ------------------------------------- */

    --color-border: #E3EDF5;

    /* -------------------------------------
       FARBVERLÄUFE
    ------------------------------------- */

    /* IUNIXX-Blau */

    --gradient-primary: linear-gradient(
        110deg,
        #1499FE 0%,
        #118DEB 55%,
        #0665AD 100%
    );

    /* IUNIXX-Lime */

    --gradient-lime: linear-gradient(
        110deg,
        #C4FF61 0%,
        #99FE14 55%,
        #69C900 100%
    );

    /* -------------------------------------
       SCHRIFT
    ------------------------------------- */

    --font-primary: 'Made Evolve Sans', sans-serif;

    --font-weight-thin: 100;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /* -------------------------------------
       SCHRIFTGRÖSSEN
    ------------------------------------- */

    --font-h1: clamp(2.5rem, 5vw, 5rem);
    --font-h2: clamp(2rem, 3.5vw, 3.5rem);
    --font-h3: 1.5rem;

    /* -------------------------------------
       BUCHSTABENABSTÄNDE
    ------------------------------------- */

    --letter-spacing-body: 0.025em;
    --letter-spacing-heading: 0.005em;
    --letter-spacing-button: 0.025em;
    --letter-spacing-label: 0.12em;

    /* -------------------------------------
       LAYOUT
    ------------------------------------- */

    --container-width: 1280px;
    --section-spacing: 100px;

    /* -------------------------------------
       ABSTÄNDE
    ------------------------------------- */

    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 40px;
    --spacing-xl: 64px;

    /* -------------------------------------
       ECKEN
    ------------------------------------- */

    --radius-small: 8px;
    --radius-medium: 16px;
    --radius-large: 24px;

    /* -------------------------------------
       SCHATTEN
    ------------------------------------- */

    --shadow-card: 0 6px 24px rgba(7, 23, 37, 0.07);
    --shadow-button: 0 4px 14px rgba(20, 153, 254, 0.20);

    /* -------------------------------------
       ANIMATIONEN
    ------------------------------------- */

    --transition-default: 0.25s ease;
}

/* =========================================
   3. CSS RESET
========================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-regular);
    font-size: 16px;
    letter-spacing: var(--letter-spacing-body);
    color: var(--color-text);
    background: var(--color-background);
    line-height: 1.6;
}

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

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

/* =========================================
   4. TYPOGRAFIE
========================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    letter-spacing: var(--letter-spacing-heading);
}

h1,
h2,
h3 {
    line-height: 1.15;
    font-weight: var(--font-weight-bold);
}

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

h2 {
    font-size: var(--font-h2);
}

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

p {
    font-weight: var(--font-weight-regular);
}

/* -------------------------------------
   BUTTON-TYPOGRAFIE
------------------------------------- */

.btn {
    letter-spacing: var(--letter-spacing-button);
}

/* -------------------------------------
   TEXT-HILFSKLASSEN
------------------------------------- */

.text-primary {
    color: var(--color-primary);
}

/* =========================================
   5. LAYOUT
========================================= */

.container {
    width: min(100% - 40px, var(--container-width));
    margin-inline: auto;
}

.section {
    padding-block: var(--section-spacing);
}

.section-light {
    background: var(--color-background-light);
}

/* =========================================
   6. RESPONSIVE DESIGN
========================================= */

@media (max-width: 768px) {

    :root {
        --section-spacing: 60px;
    }

    .container {
        width: min(100% - 32px, var(--container-width));
    }

}

/* =========================================
   7. BARRIEREFREIHEIT
========================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

}