/* CLAUDE: Einzelbeitrag - Artikelkopf, Direktantwort, Fliesstext, CTA, Weiterlesen */
/* CLAUDE: Warum: Getrennt von blog.css, damit beide Dateien unter 200 Zeilen bleiben. */
/* CLAUDE: Anpassen: Alle Werte stammen aus den Tokens in base.css - keine festen Farben. */

/* CLAUDE: Aussenabstand des Artikelbereichs */
.lhi-article-main {
    padding-block: var(--lhi-space-lg) var(--lhi-space-xl);
}

/* CLAUDE: Lesecontainer - 750px ist die in base.css definierte optimale Lesebreite */
.lhi-article {
    max-width: var(--lhi-content-size);
    margin-inline: auto;
    padding-inline: var(--lhi-container-padding);
}

/* CLAUDE: Kategorie-Label ueber der Ueberschrift */
.lhi-article__cat {
    display: inline-block;
    font-family: var(--lhi-font-sans);
    font-size: var(--lhi-font-size-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lhi-color-gold);
    text-decoration: none;
    margin-block-end: var(--lhi-space-xs);
}

/* CLAUDE: Artikelueberschrift - fluid, damit lange Titel auf Mobil nicht ueberlaufen */
.lhi-article__title {
    font-family: var(--lhi-font-serif);
    font-size: clamp(1.75rem, 5vw, var(--lhi-font-size-3xl));
    line-height: var(--lhi-line-height-tight);
    color: var(--lhi-color-text);
    margin: 0 0 var(--lhi-space-sm);
}

/* CLAUDE: Datum, Lesezeit, Aktualisierung */
.lhi-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lhi-space-xs);
    font-family: var(--lhi-font-sans);
    font-size: var(--lhi-font-size-xs);
    color: var(--lhi-color-graphite);
    margin: 0 0 var(--lhi-space-md);
}

/* CLAUDE: Direktantwort - der zitierfaehige Block. Visuell abgesetzt, damit Leser UND */
/* CLAUDE: Sprachmodelle ihn als eigenstaendige Antwort erkennen. */
.lhi-article__answer {
    border-inline-start: 4px solid var(--lhi-color-gold);
    background: var(--lhi-color-bg);
    border-radius: var(--lhi-radius-md);
    padding: var(--lhi-space-md);
    margin-block-end: var(--lhi-space-lg);
}

.lhi-article__answer p {
    font-family: var(--lhi-font-sans);
    font-size: var(--lhi-font-size-lg);
    line-height: var(--lhi-line-height);
    color: var(--lhi-color-text);
    margin: 0;
}

/* CLAUDE: Aufmacherbild - festes Seitenverhaeltnis reserviert Platz gegen CLS */
.lhi-article__figure {
    margin: 0 0 var(--lhi-space-lg);
}

.lhi-article__img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--lhi-radius-lg);
    display: block;
}

/* CLAUDE: Bildunterschrift */
.lhi-article__caption {
    font-family: var(--lhi-font-sans);
    font-size: var(--lhi-font-size-xs);
    color: var(--lhi-color-graphite);
    margin-block-start: var(--lhi-space-xs);
}

/* CLAUDE: Fliesstext - grosszuegige Zeilenhoehe fuer lange Lesetexte */
.lhi-article__content {
    font-family: var(--lhi-font-sans);
    font-size: var(--lhi-font-size-lg);
    line-height: var(--lhi-line-height-relaxed);
    color: var(--lhi-color-text);
}

.lhi-article__content > * + * {
    margin-block-start: var(--lhi-space-md);
}

/* CLAUDE: Zwischenueberschriften - Serifenschrift, klare Abstufung zur h1 */
.lhi-article__content h2,
.lhi-article__faq h2,
.lhi-article__related h2 {
    font-family: var(--lhi-font-serif);
    font-size: var(--lhi-font-size-2xl);
    line-height: var(--lhi-line-height-snug);
    color: var(--lhi-color-text);
    margin-block-start: var(--lhi-space-lg);
}

.lhi-article__content h3 {
    font-family: var(--lhi-font-serif);
    font-size: var(--lhi-font-size-xl);
    line-height: var(--lhi-line-height-snug);
    margin-block-start: var(--lhi-space-md);
}

/* CLAUDE: Listen - Einzug, damit die Punkte nicht am Rand kleben */
.lhi-article__content ul,
.lhi-article__content ol {
    padding-inline-start: var(--lhi-space-md);
}

.lhi-article__content li + li {
    margin-block-start: var(--lhi-space-xs);
}

/* CLAUDE: Inline-Links im Fliesstext - unterstrichen, damit sie ohne Farbe erkennbar sind */
.lhi-article__content a {
    color: var(--lhi-color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* CLAUDE: FAQ-Abschnitt - Abstand; das Akkordeon selbst stylt faq-accordion.css */
.lhi-article__faq {
    margin-block-start: var(--lhi-space-xl);
}

/* CLAUDE: Handlungsaufforderung und Weiterlesen-Liste liegen in components/blog-cta.css */
/* CLAUDE: Grund: Projektregel max. 200 Zeilen je Datei. */