/* CLAUDE: Artikel-Abschluss - Handlungsaufforderung und Weiterlesen-Liste */
/* CLAUDE: Warum getrennt von pages/blog-single.css: Projektregel max. 200 Zeilen je Datei. */
/* CLAUDE: Anpassen: Alle Werte stammen aus den Tokens in base.css - keine festen Farben. */

/* CLAUDE: Handlungsaufforderung - abgesetzter Block am Artikelende */
.lhi-article__cta {
    margin-block-start: var(--lhi-space-xl);
    padding: var(--lhi-space-lg);
    background: var(--lhi-color-bg);
    border: 1px solid var(--lhi-color-border);
    border-radius: var(--lhi-radius-lg);
    text-align: center;
}

.lhi-article__cta-title {
    font-family: var(--lhi-font-serif);
    font-size: var(--lhi-font-size-xl);
    line-height: var(--lhi-line-height-snug);
    margin: 0 0 var(--lhi-space-xs);
}

.lhi-article__cta-text {
    font-family: var(--lhi-font-sans);
    color: var(--lhi-color-graphite);
    margin: 0 0 var(--lhi-space-md);
}

/* CLAUDE: Schaltflaeche - 44px Mindesthoehe nach WCAG 2.5.8 (Target Size) */
.lhi-article__cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--lhi-btn-padding-y) var(--lhi-btn-padding-x);
    background: var(--lhi-color-accent);
    color: var(--lhi-color-white);
    font-family: var(--lhi-font-sans);
    font-weight: 600;
    border-radius: var(--lhi-radius-sm);
    text-decoration: none;
    transition: background var(--lhi-transition-fast);
}

.lhi-article__cta-button:hover {
    background: var(--lhi-color-secondary);
}

/* CLAUDE: Weiterlesen-Liste - auto-fit bricht auf Mobil ohne Media Query um */
.lhi-related-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: var(--lhi-space-md);
    list-style: none;
    margin: var(--lhi-space-md) 0 0;
    padding: 0;
}

/* CLAUDE: Ganze Kachel ist ein Link - grosse Klickflaeche, ein Tabstopp */
.lhi-related-link {
    display: block;
    color: var(--lhi-color-text);
    text-decoration: none;
}

/* CLAUDE: Festes Seitenverhaeltnis reserviert Platz und verhindert CLS */
.lhi-related-img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--lhi-radius-md);
    display: block;
    margin-block-end: var(--lhi-space-xs);
}

.lhi-related-title {
    font-family: var(--lhi-font-serif);
    font-size: var(--lhi-font-size-base);
    line-height: var(--lhi-line-height-snug);
}

.lhi-related-link:hover .lhi-related-title {
    color: var(--lhi-color-accent);
    text-decoration: underline;
}

/* CLAUDE: Bewegungsreduzierung respektieren - Pflicht fuer WCAG 2.1 */
@media (prefers-reduced-motion: reduce) {
    .lhi-article__cta-button {
        transition: none;
    }
}