/* ============================================================
   03-TYPOGRAPHY.CSS
   Headlines, Fließtext, Links, Listen
   ------------------------------------------------------------
   Setzt die typografische Hierarchie der Marke um.
   Alle Werte stammen aus 01-tokens.css.
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   1. HEADLINES — DM Sans Bold, Navy
   ──────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--cd-font-family);
    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); }
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
   ──────────────────────────────────────────────────────────── */

p {
    font-family: var(--cd-font-family);
    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 — Koral, 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
   ──────────────────────────────────────────────────────────── */

blockquote {
    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
   ──────────────────────────────────────────────────────────── */

/* — Lead/Intro-Text — */
.cd-lead {
    font-size: var(--cd-fs-h6);
    line-height: var(--cd-lh-normal);
    color: var(--cd-color-text);
}

/* — Caption/Label — */
.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.
     Laut CD-Mockup in GOLD (Akzentfarbe), 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-accent);
    margin-bottom: var(--cd-space-xs);
}


/* ────────────────────────────────────────────────────────────
   10. MARKEN-HIGHLIGHT
   ────────────────────────────────────────────────────────────
   Schlüsselwörter in Koral hervorheben.
   Beispiel: <h2>Die <span class="cd-highlight">pflege.cloud</span></h2>
   ──────────────────────────────────────────────────────────── */

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

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