/* =============================================================================
   BLOG - Übersicht (pages/blog.php) und Beitragsseite (pages/blog-beitrag.php).
   Die Beitragskarte teilt sich die Bauform mit der Anlasskarte, der Fließtext nutzt .rechtstext
   aus components.css; hier steht nur, was darüber hinaus nötig ist.
   ============================================================================= */

/* Lesebreite für den Beitrag: schmaler als der normale Container, damit Zeilen nicht zu lang werden */
.container--schmal {
    max-width: 58rem;
}

/* ---------- Übersicht ---------- */

.blog__themen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
    margin-bottom: var(--space-xl);
}

.blog__themen a {
    display: inline-flex;
    gap: var(--space-xs);
    align-items: center;
    padding: 0.4rem 0.9rem;
    font-size: var(--text-sm);
    color: var(--farbe-text);
    text-decoration: none;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-linie);
    border-radius: var(--radius-full);
    transition: color var(--transition-schnell), background-color var(--transition-schnell), border-color var(--transition-schnell);
}

.blog__themen a:hover { color: var(--farbe-rot); border-color: var(--farbe-rot); }
.blog__themen a[aria-current="page"] { color: var(--farbe-weiss); background: var(--farbe-rot); border-color: var(--farbe-rot); }
.blog__themen span { color: inherit; opacity: 0.6; font-variant-numeric: tabular-nums; }

.blog__stand {
    margin-bottom: var(--space-md);
    font-size: var(--text-sm);
    color: var(--farbe-grau);
    text-align: center;
}


/* ---------- Beitragsseite ---------- */

.beitrag { padding-top: var(--space-2xl); }

/* Steht im .container der Seite, deshalb hier keine eigene Breite */
.beitrag__vorschau {
    margin: 0 0 var(--space-xl);
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--text-sm);
    color: var(--farbe-weiss);
    text-align: center;
    background: var(--farbe-nacht);
    border-radius: var(--radius-sm);
}

.beitrag__kopf { margin-bottom: var(--space-xl); text-align: center; }
.beitrag__kopf .pfad { justify-content: center; margin-bottom: var(--space-md); }

.beitrag__kopf h1 {
    margin: 0 0 var(--space-md);
    font-size: clamp(var(--text-2xl), 4.5vw, var(--text-4xl));
    line-height: var(--lh-tight);
}

.beitrag__teaser {
    margin: 0 auto var(--space-lg);
    max-width: 44rem;
    font-size: var(--text-lg);
    color: var(--farbe-grau);
}

.beitrag__kopf .beitrag__stand { justify-content: center; }

.beitrag__themen { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; margin: var(--space-md) 0 0; }

.beitrag__themen a {
    padding: 0.25rem 0.8rem;
    font-size: var(--text-xs);
    color: var(--farbe-rot);
    text-decoration: none;
    background: rgb(var(--farbe-rot-rgb) / 0.08);
    border-radius: var(--radius-full);
}

.beitrag__themen a:hover { color: var(--farbe-weiss); background: var(--farbe-rot); }

.beitrag__aufmacher { margin-bottom: var(--space-2xl); }
.beitrag__aufmacher-bild { width: 100%; height: auto; border-radius: var(--radius-xl); }   /* wie .willkommen__bild */

.beitrag__gliederung {
    margin-bottom: var(--space-2xl);
    padding: var(--space-lg);
    background: var(--farbe-creme);
    border-radius: var(--radius-md);
}

.beitrag__gliederung h2 { margin: 0 0 var(--space-sm); font-size: var(--text-base); text-transform: uppercase; letter-spacing: var(--ls-wide); }
.beitrag__gliederung ol { margin: 0; padding-left: 1.2rem; }
.beitrag__gliederung li + li { margin-top: var(--space-xs); }
.beitrag__gliederung a { color: var(--farbe-text); text-decoration: none; }
.beitrag__gliederung a:hover { color: var(--farbe-rot); text-decoration: underline; text-underline-offset: 0.15em; }

/* Bilder im Fließtext: Platzhalter [bild:ID] wird zu dieser Abbildung */
.beitrag__abbildung { margin: var(--space-2xl) 0; }
.beitrag__bild { width: 100%; height: auto; border-radius: var(--radius-xl); }

.beitrag__abbildung figcaption {
    margin-top: var(--space-sm);
    font-size: var(--text-sm);
    color: var(--farbe-grau);
    text-align: center;
}

.beitrag__text { margin-bottom: var(--space-3xl); }
.beitrag__text h2 { margin-top: var(--space-2xl); }
.beitrag__text h3 { margin-top: var(--space-xl); }

@media (max-width: 40em) {
    .beitrag { padding-top: var(--space-xl); }
    .beitrag__gliederung { padding: var(--space-md); }
}