/* ==========================================================================
   1. LOKALE SCHRIFTEN (4 Schnitte)
   Stelle sicher, dass die Dateien im Ordner /fonts/ deines Themes liegen.
   ========================================================================== */

/* Light */
@font-face {
    font-family: 'NuSa';
    src: url('../fonts/Nunito-Sans-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Medium */
@font-face {
    font-family: 'NuSa';
    src: url('../fonts/Nunito-Sans-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Semi-Bold */
@font-face {
    font-family: 'NuSa';
    src: url('../fonts/Nunito-Sans-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Extra-Bold */
@font-face {
    font-family: 'NuSa';
    src: url('../fonts/Nunito-Sans-800.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   2. ZENTRALE VARIABLEN (Farben & Typografie-Logik)
   Hier steuerst du dein gesamtes Design an einem Ort.
   ========================================================================== */
:root {
    /* Farbpalette */
    --primary-color: #0044cc;
    --secondary-color: #f4f4f4;
    --accent-color: #ff9900;
    --text-color: #333333;
    --link-hover: #002a80;

    /* Schrift-Zuweisung */
    --body-font: 'NuSa', sans-serif;

    /* Font-Weights (Zuweisung der Schnitte) */
    --w-light: 300;
    --w-medium: 500;
    --w-semibold: 600;
    --w-bold: 800;

    /* Fluid Typography (Deine Clamp-Werte) */
    --h1-size: clamp(3rem, 2.6rem + 2vw, 4rem);
    --h2-size: clamp(2.5rem, 2.3rem + 1vw, 3rem);
    --h3-size: clamp(2.2rem, 2.04rem + 0.8vw, 2.6rem);
    --h4-size: clamp(1.9rem, 1.78rem + 0.6vw, 2.2rem);
    --h5-size: clamp(1.6rem, 1.52rem + 0.4vw, 1.8rem);
    --h6-size: clamp(1.3rem, 1.26rem + 0.2vw, 1.4rem);

    /* Fließtext-Größen */
    --text-base: 1rem;       /* 16px */
    --text-large: 1.2rem;    /* ~19px */
    --text-small: 0.8rem;    /* ~13px */
}

/* ==========================================================================
   3. ANPASSUNGEN FÜR DAS QUARK THEME
   Hier werden die Variablen auf die HTML-Elemente angewendet.
   ========================================================================== */

/* Globaler Body */
body {
    font-family: var(--body-font);
    font-size: var(--text-base);
    font-weight: var(--w-light); /* Standard ist der 300er Schnitt */
    color: var(--text-color);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Überschriften */
h1 { font-size: var(--h1-size); font-weight: var(--w-bold); color: var(--primary-color); }
h2 { font-size: var(--h2-size); font-weight: var(--w-semibold); color: var(--primary-color); }
h3 { font-size: var(--h3-size); font-weight: var(--w-light); color: var(--primary-color); }
h4 { font-size: var(--h4-size); font-weight: var(--w-bold); }
h5 { font-size: var(--h5-size); font-weight: var(--w-semibold); }
h6 { font-size: var(--h6-size); font-weight: var(--w-light); }

/* Wichtige Textstellen */
strong, b {
    font-weight: var(--w-semibold);
}

/* Links */
a, a:visited {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--link-hover);
}

/* Quark Header & Navigation */
#header {
    background: var(--secondary-color);
    border-bottom: 1px solid #ddd;
}

.navbar-section a {
    font-weight: var(--w-medium);
}

/* Buttons (Spectre.css Overrides) */
.button, button, .btn {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
    font-weight: var(--w-semibold) !important;
    border-radius: 4px;
}

.button:hover, button:hover, .btn:hover {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

/* Hilfsklassen für Fließtext-Varianten */
.text-large { font-size: var(--text-large); }
.text-small { font-size: var(--text-small); }

/* ==========================================================================
   4. MOBILE FEINJUSTIERUNG (Optional)
   Hier kannst du spezifische Gewichte für Mobile ändern, falls nötig.
   ========================================================================== */
@media (max-width: 840px) {
    h1, h2 {
        font-weight: var(--w-semibold); /* Auf Mobile etwas leichter */
    }
}