/* ============================================================
   03-TYPOGRAPHY.CSS
   Headlines, Fließtext, Links, Listen
   ------------------------------------------------------------
   Urbanist (ersetzt CODEC Pro; Rollen laut CD):
     H1  → Semibold (600)
     H2  → Regular, in VERSALIEN (uppercase)
     Copy → Regular
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   1. HEADLINES
   ──────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--cd-font-heading);
    line-height: var(--cd-lh-tight);
    color: var(--cd-color-text);
    margin-bottom: var(--cd-space-md);
}

/* H1 → Bold */
h1 {
    font-size: var(--cd-fs-h1);
    font-weight: var(--cd-fw-semibold);
    text-transform: none;
    letter-spacing: 0;
}

/* H2 → Regular, VERSALIEN (CD) */
h2 {
    font-size: var(--cd-fs-h2);
    font-weight: var(--cd-fw-medium);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* H3–H6 → Bold (Sub-Überschriften) */
h3 { font-size: var(--cd-fs-h3); font-weight: var(--cd-fw-semibold); }
h4 { font-size: var(--cd-fs-h4); font-weight: var(--cd-fw-semibold); }
h5 { font-size: var(--cd-fs-h5); font-weight: var(--cd-fw-semibold); }
h6 { font-size: var(--cd-fs-h6); font-weight: var(--cd-fw-semibold); }


/* ────────────────────────────────────────────────────────────
   2. RESPONSIVE HEADLINES
   ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 1.875rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
}


/* ────────────────────────────────────────────────────────────
   3. FLIESSTEXT — Regular
   ──────────────────────────────────────────────────────────── */

p {
    font-family: var(--cd-font-body);
    font-weight: var(--cd-fw-medium);
    font-size: var(--cd-fs-body);
    line-height: var(--cd-lh-relaxed);
    color: var(--cd-color-text);
    margin-bottom: var(--cd-space-sm);
}

p:last-child { margin-bottom: 0; }


/* ────────────────────────────────────────────────────────────
   4. LINKS — Grün
   ──────────────────────────────────────────────────────────── */

a {
    color: var(--cd-color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color var(--cd-transition-fast);
}

a:hover,
a:focus-visible { color: var(--cd-color-primary-soft); }


/* ────────────────────────────────────────────────────────────
   5. LISTEN
   ──────────────────────────────────────────────────────────── */

ul, ol {
    margin-bottom: var(--cd-space-sm);
    padding-left: var(--cd-space-lg);
    line-height: var(--cd-lh-relaxed);
}

li + li { margin-top: var(--cd-space-2xs); }


/* ────────────────────────────────────────────────────────────
   6. ZITATE
   ──────────────────────────────────────────────────────────── */

blockquote {
    font-size: var(--cd-fs-h5);
    line-height: var(--cd-lh-normal);
    color: var(--cd-color-text-muted);
    margin: var(--cd-space-lg) 0;
    padding-left: var(--cd-space-md);
    border-left: 4px solid var(--cd-color-primary);
}


/* ────────────────────────────────────────────────────────────
   7. INLINE-ELEMENTE
   ──────────────────────────────────────────────────────────── */

strong, b {
    font-weight: var(--cd-fw-semibold);
    color: var(--cd-color-text);
}

em, i { font-style: italic; }

small {
    font-size: var(--cd-fs-small);
    color: var(--cd-color-text-muted);
}


/* ────────────────────────────────────────────────────────────
   8. HORIZONTALE LINIE
   ──────────────────────────────────────────────────────────── */

hr {
    border: none;
    border-top: 1px solid var(--cd-color-border);
    margin: var(--cd-space-xl) 0;
}


/* ────────────────────────────────────────────────────────────
   9. UTILITY-KLASSEN — TYPOGRAFISCHE SONDERFORMATE
   ──────────────────────────────────────────────────────────── */

.cd-lead {
    font-size: var(--cd-fs-h6);
    line-height: var(--cd-lh-normal);
    color: var(--cd-color-text);
}

.cd-caption {
    font-size: var(--cd-fs-small);
    color: var(--cd-color-text-muted);
    line-height: var(--cd-lh-normal);
}

/* Eyebrow: Vorzeile (Grün, uppercase, gesperrt) */
.cd-eyebrow {
    font-size: var(--cd-fs-small);
    font-weight: var(--cd-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cd-color-primary);
    margin-bottom: var(--cd-space-xs);
}


/* ────────────────────────────────────────────────────────────
   10. MARKEN-HIGHLIGHT — Grün
   ──────────────────────────────────────────────────────────── */

.cd-dot { color: var(--cd-color-primary); }
.cd-highlight { color: var(--cd-color-primary); }