/* ============================================================
   03-TYPOGRAPHY.CSS
   Headlines, Fließtext, Links, Listen (Dark-Theme)
   ------------------------------------------------------------
   Libre Baskerville für alles (laut CD):
     Italic  → H1 / Display
     Regular → H2, Fließtext
     Bold    → H3, kleinere Überschriften
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   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);
    text-transform: none;
    letter-spacing: 0;
}

/* H1 / Display → Libre Baskerville Italic (CD) */
h1 {
    font-size: var(--cd-fs-h1);
    font-weight: var(--cd-fw-medium);
    font-style: italic;
}

/* H2 / Section → Regular */
h2 {
    font-size: var(--cd-fs-h2);
    font-weight: var(--cd-fw-medium);
    font-style: normal;
}

/* H3 → Bold */
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
   ──────────────────────────────────────────────────────────── */

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 — Gold
   ──────────────────────────────────────────────────────────── */

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 — Italic (Display-Charakter, CD)
   ──────────────────────────────────────────────────────────── */

blockquote {
    font-family: var(--cd-font-heading);
    font-size: var(--cd-fs-h4);
    line-height: var(--cd-lh-normal);
    font-style: italic;
    color: var(--cd-color-text);
    margin: var(--cd-space-lg) 0;
    padding-left: var(--cd-space-md);
    border-left: 3px solid var(--cd-color-primary);
}


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

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

/* Kursiv-Hervorhebung im Fließtext (CD: Italic für Akzente) */
em, i {
    font-style: italic;
    color: var(--cd-color-primary);
}

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-h5);
    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: kleine Vorzeile über einer Headline (Gold, gesperrt) */
.cd-eyebrow {
    font-size: var(--cd-fs-small);
    font-weight: var(--cd-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--cd-color-primary);
    margin-bottom: var(--cd-space-xs);
}


/* ────────────────────────────────────────────────────────────
   10. MARKEN-HIGHLIGHT — Gold
   ────────────────────────────────────────────────────────────
   Beispiel: <h2>Feinkost, die <span class="cd-highlight">verbindet</span></h2>
   Für den emotionalen Display-Charakter zusätzlich kursiv möglich
   via <em> oder .cd-highlight--italic.
   ──────────────────────────────────────────────────────────── */

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

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

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