/**
 * Global Typography
 * Fluid Type Scale — Mobile → Desktop
 * Referenziert Variablen aus global-variables.css (DRY)
 *
 * Verwendung: Klassen direkt auf HTML-Elementen oder
 * als Basis fuer BEM-Komponenten-Styles
 */

/* ============================================
   TEXT — Fließtext & UI-Labels
   ============================================ */

.ksm-text-small {
    font-size: var(--ksm-font-size-xs);
    line-height: var(--ksm-line-height-normal);
}

.ksm-text-default {
    font-size: var(--ksm-font-size-sm);
    line-height: 1.6;
}

.ksm-text-large {
    font-size: var(--ksm-font-size-base);
    line-height: 1.6;
}

/* ============================================
   HEADINGS
   ============================================ */

h6, .ksm-h6 {
    font-size: clamp(0.688rem, 0.63rem + 0.27vw, 0.875rem); /* 11→14px */
    line-height: 1.4;
}

h5, .ksm-h5 {
    font-size: clamp(0.813rem, 0.74rem + 0.36vw, 1.063rem); /* 13→17px */
    line-height: 1.4;
}

h4, .ksm-h4 {
    font-size: var(--ksm-font-size-lg);
    line-height: 1.35;
}

h3, .ksm-h3 {
    font-size: var(--ksm-font-size-xl);
    line-height: 1.3;
}

h2, .ksm-h2 {
    font-size: var(--ksm-font-size-2xl);
    line-height: 1.25;
}

h1, .ksm-h1 {
    font-size: clamp(1.688rem, 1.53rem + 0.8vw, 2.25rem); /* 27→36px */
    line-height: var(--ksm-line-height-tight);
}

/* ============================================
   HEADLINES — Hero / Display
   ============================================ */

.ksm-headline-l {
    font-size: clamp(1.875rem, 1.73rem + 0.71vw, 2.375rem); /* 30→38px */
    line-height: 1.15;
}

.ksm-headline-xl {
    font-size: clamp(2.5rem, 2.29rem + 1.07vw, 3.25rem); /* 40→52px */
    line-height: 1.1;
}

.ksm-headline-xxl {
    font-size: clamp(2.75rem, 2.5rem + 1.25vw, 3.75rem); /* 44→60px */
    line-height: 1.05;
}

/* ============================================
   Headings: echter Bold-Schnitt (Body bleibt Regular)
   ============================================ */
h1, h2, h3, h4, h5, h6,
.ksm-h1, .ksm-h2, .ksm-h3, .ksm-h4, .ksm-h5, .ksm-h6,
.ksm-headline-l, .ksm-headline-xl, .ksm-headline-xxl {
    font-family: var(--ksm-font-bold);
}