/* ============================================================
   03-TYPOGRAPHY.CSS
   Headlines, Fließtext, Links, Listen
   ------------------------------------------------------------
   Zwei-Schriften-System:
     Headlines (h1–h6) → Source Serif 4  (--cd-font-heading)
     Fließtext         → Inter           (--cd-font-body)
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   1. HEADLINES — Source Serif 4, Anthrazit
   ──────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6{
    font-family: var(--cd-font-heading);
    font-weight: var(--cd-fw-semibold);
    line-height: var(--cd-lh-tight);
    color: var(--cd-color-text);
    margin-bottom: var(--cd-space-md);
    text-transform: none;
    letter-spacing: 0;
}

h1 { font-size: var(--cd-fs-h1); }
h2 { font-size: var(--cd-fs-h2); }
h3 { font-size: var(--cd-fs-h3) : 1.75rem; }
h4 { font-size: var(--cd-fs-h4); }
h5 { font-size: var(--cd-fs-h5); }
h6 { font-size: var(--cd-fs-h6); }


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

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


/* ────────────────────────────────────────────────────────────
   3. FLIESSTEXT — Inter
   ──────────────────────────────────────────────────────────── */

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 — Teal, Hover dunkler
   ──────────────────────────────────────────────────────────── */

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 — Serif, kursiv
   ──────────────────────────────────────────────────────────── */

blockquote {
    font-family: var(--cd-font-heading);
    font-size: var(--cd-fs-h5);
    line-height: var(--cd-lh-normal);
    font-style: italic;
    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-family: var(--cd-font-body);
    font-size: var(--cd-fs-h6);
    line-height: var(--cd-lh-normal);
    color: var(--cd-color-text);
}

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

/* — Eyebrow: kleine Vorzeile über einer Headline (Inter, gesperrt) — */
.cd-eyebrow {
    font-family: var(--cd-font-body);
    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
   ────────────────────────────────────────────────────────────
   Schlüsselwörter in Teal hervorheben (wie „gut" im Moodboard).
   Beispiel: <h2>Immer <span class="cd-highlight">gut</span> leben.</h2>
   ──────────────────────────────────────────────────────────── */

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

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