/* Blog – Übersicht (home.php) und Einzelbeitrag (single.php)

   Kein Block, sondern Template-CSS: Beides sind eigene Templates, keine
   ACF-Blöcke, deshalb steht die Datei mit `editor => false` im Manifest.

   ⚠️ Die Filterpillen sind seit dem Entwurf vom 2026-09-09 BEWUSST ANDERS als
   die des FAQ-Blocks (vom User am 2026-09-09 bestätigt). Gemeinsam bleiben
   nur Radius (8px) und Innenabstand (20px). Höhe, Schrift und aktiver
   Zustand unterscheiden sich: hier 14px SemiBold auf dunkelblauem Grund mit
   weißer Schrift, im FAQ-Block 16px auf grünem Grund. Wer sie wieder
   angleicht, macht den Entwurf kaputt; blocks/faq-list.css NICHT mitziehen.

   ⚠️ Die Karten unter einem Beitrag („Weitere Beiträge") sind eine KLEINERE
   Fassung derselben Karte: 12/18 Meta, 18/22,5 Titel, und der Knopf ist dort
   ein Textlink statt einer gefüllten Fläche. Die Übersicht ist die Bühne,
   die Karten unter dem Artikel sind Nachlese. Beide Sätze stehen unten. */

/* ── Filter ──────────────────────────────────────────────── */

.blog-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 12px;
    margin-bottom: 32px;
}

.blog-pill {
    display: inline-flex;
    align-items: center;
    min-height: 43px;
    padding: 0 20px;
    background-color: var(--color-white);
    border: 1px solid var(--color-dark);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    /* 14/21 statt --fs-copy-s (16/24): Vorgabe des Users vom 2026-09-09.
       Damit weichen die Pillen auch in der Größe von den FAQ-Pillen ab –
       das ist so gewollt, siehe Dateikopf. */
    font-size: 14px;
    line-height: 21px;
    color: var(--color-dark);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.blog-pill:hover {
    background-color: var(--color-surface);
}

/* Aktiv: dunkelblauer Grund, weiße Schrift. Der Rahmen bleibt transparent
   stehen, damit die Pille beim Umschalten nicht um 2px springt. */
.blog-pill.is-active,
.blog-pill.is-active:hover {
    background-color: var(--color-dark);
    border-color: transparent;
    color: var(--color-white);
}

.blog-pill:focus-visible {
    outline: 2px solid var(--color-dark);
    outline-offset: 2px;
}

/* Trefferzahl („6 Beiträge"). Seit dem Entwurf vom 2026-09-09 sichtbar –
   vorher nur für Screenreader. Bleibt role="status": Wer filtert, bekommt
   die neue Zahl angesagt UND sieht sie. */
.blog-status {
    margin: 0 0 24px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 21px;
    color: var(--color-text-muted);
}

/* ── Raster ──────────────────────────────────────────────── */

.blog-list {
    padding-block: var(--space-section);
}

/* Spaltenabstand 32px statt --grid-gutter (24px): am Entwurf ausgemessen
   sitzen die Karten 470,5 breit mit 31px Zwischenraum. Der Zeilenabstand
   war schon 32. */
.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

@media (min-width: 768px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
    .blog-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Vom Filter ausgeblendet. home.php setzt die Klasse schon serverseitig auf
   alles über der Startmenge, damit die Liste nicht erst lang aufblitzt und
   dann zusammenspringt. Ohne JavaScript hebt ein <noscript> sie wieder auf. */
.blog-archive .blog-item.is-hidden,
.blog-item.is-hidden {
    display: none;
}

/* ── Karte ───────────────────────────────────────────────── */

/* ⚠️ Die Karte ist ein <div>, kein <a> – der „Mehr erfahren"-Knopf im Entwurf
   verträgt keinen umschließenden Link. Klickbar wird sie über den
   Stretched-Link am Titel (.blog-card-link::after weiter unten).
   `overflow: hidden` NICHT setzen: Es würde die Fokus-Umrandung des
   Stretched-Links an den Kartenrändern abschneiden. Die Bildecken rundet
   deshalb .blog-card-img-wrap selbst. */
.blog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition), transform var(--transition);
}

/* :focus-within statt :focus-visible – der Fokus sitzt jetzt auf dem Link
   INNERHALB der Karte, nicht mehr auf der Karte selbst. */
.blog-card:hover,
.blog-card:focus-within {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-4px);
}

.blog-card-img-wrap {
    aspect-ratio: 4 / 3;
    background-color: var(--color-surface);
    overflow: hidden;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.blog-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* flex:1 – die Körper aller Karten einer Zeile werden gleich hoch, damit die
   Knöpfe unten auf einer Linie sitzen (siehe margin-top:auto am Knopf). */
.blog-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
    flex: 1 1 auto;
}

/* Reihenfolge im Entwurf: Datum, Trennstrich, Kategorie. */
/* 13/19,5 – Vorgabe des Users vom 2026-09-09. Gilt für Datum UND Kategorie,
   deshalb hier am Elternelement und nicht zweimal. */
.blog-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 19.5px;
    color: var(--color-text-muted);
}

/* Kategorie als Text mit senkrechtem Strich davor – die grüne Pille von
   vorher ist mit dem Entwurf vom 2026-09-09 entfallen. Der Strich ist ein
   Pseudoelement und kein Zeichen, damit er beim Umbruch nicht allein in der
   neuen Zeile steht. */
.blog-card-cat {
    position: relative;
    padding-left: 13px;
    font-weight: var(--fw-semibold);
    color: var(--color-dark);
}

.blog-card-cat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background-color: var(--color-border);
}

.blog-card-title {
    /* h3 – die Vorgaben aus typography.css zurücksetzen.
       22/27,5 SemiBold – Vorgabe des Users vom 2026-09-09. --fs-h4 (18px)
       wäre zu klein; die Karte ist im Entwurf der Blickfang der Übersicht. */
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    font-size: 22px;
    line-height: 27.5px;
    color: var(--color-heading);
}

/* Der einzige echte Link der Karte. Sein ::after legt sich über die ganze
   Karte – dadurch ist die Fläche klickbar, ohne dass ein Link den Knopf
   umschließt. z-index bleibt unter dem Text, damit sich Text weiter
   markieren lässt. */
.blog-card-link {
    color: inherit;
    text-decoration: none;
}

.blog-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-md);
}

.blog-card-link:focus-visible {
    outline: none;
}

.blog-card-link:focus-visible::after {
    outline: 2px solid var(--color-dark);
    outline-offset: 2px;
}

/* 15/24,4 – Vorgabe des Users vom 2026-09-09, eine Stufe unter dem
   Fließtext (--fs-copy-s = 16). */
.blog-card-text {
    margin: 0;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 24.4px;
    color: var(--color-text);
}

/* „Mehr erfahren →". Eigene Farben statt .btn-blue: dessen Schrift ist per
   Token grün (--color-cta-text-accent), im Entwurf ist sie hier weiß.
   margin-top:auto drückt ihn an den unteren Rand, damit die Knöpfe einer
   Zeile trotz unterschiedlich langer Teaser auf einer Linie stehen.
   Es ist ein <span>, kein Link – geklickt wird der Stretched-Link. */
.blog-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: auto;
    padding: 10px 22px;
    background-color: var(--color-dark);
    border-color: var(--color-dark);
    border-radius: var(--radius-sm);
    /* 14/21 SemiBold – Vorgabe des Users vom 2026-09-09. Der Theme-Knopf
       steht sonst auf --fw-normal; hier ist er halbfett. */
    font-size: 14px;
    line-height: 21px;
    font-weight: var(--fw-semibold);
    color: var(--color-white);
    transition: background-color var(--transition);
}

.blog-card:hover .blog-card-btn,
.blog-card:focus-within .blog-card-btn {
    background-color: var(--color-dark-hover);
    border-color: var(--color-dark-hover);
    color: var(--color-white);
}

.blog-card-btn-icon {
    flex: 0 0 auto;
}

/* ⚠️ In „Weitere Beiträge" ist es KEIN gefüllter Knopf, sondern ein Textlink.
   Am Entwurf ausgemessen: auf der Übersicht sind die Knöpfe 40px hohe
   gefüllte Flächen, unter dem Beitrag steht dort nur Text (höchster
   Farbblock 12px). Bewusste Abstufung – die Übersicht ist die Bühne, die
   Karten unter dem Artikel sind Nachlese. */
.blog-weitere .blog-card-btn {
    padding: 0;
    background-color: transparent;
    border-color: transparent;
    color: var(--color-dark);
    font-weight: var(--fw-semibold);
}

.blog-weitere .blog-card:hover .blog-card-btn,
.blog-weitere .blog-card:focus-within .blog-card-btn {
    background-color: transparent;
    border-color: transparent;
    color: var(--color-dark);
    text-decoration: underline;
}

/* Kleinere Schriftstufen der Nachlese-Karten – Vorgaben des Users
   vom 2026-09-09. Einen Anrisstext gibt es dort nicht; card.php lässt ihn
   über `ohne_text` weg, statt ihn hier zu verstecken. */
.blog-weitere .blog-card-meta {
    font-size: 12px;
    line-height: 18px;
}

.blog-weitere .blog-card-title {
    font-size: 18px;
    line-height: 22.5px;
}

.blog-weitere .blog-card-btn {
    font-size: 13px;
    line-height: 19.5px;
}

/* ── „Weitere Beiträge" ──────────────────────────────────── */

.blog-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}

.blog-leer {
    font-family: var(--font-body);
    font-size: var(--fs-copy-m);
    color: var(--color-text-muted);
}

/* ── Einzelbeitrag ───────────────────────────────────────── */

/* Der Untertitel im Hero benutzt .hero-subline aus blocks/hero.css – die
   Regel, die ihn über die Akzent-Klammer hebt, steht dort schon
   (.hero-content--subpage > .hero-subline). Hier ist deshalb nichts nötig.
   Kategorie und Datum standen bis zum 2026-09-09 im Hero; sie sind mit dem
   neuen Entwurf in die Randspalte gewandert. */

/* ── „Zurück zum Blog" ───────────────────────────────────── */

.blog-back {
    border-bottom: 1px solid var(--color-border);
}

.blog-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-block: 20px;
    font-family: var(--font-body);
    /* 16/24 SemiBold – Vorgabe des Users vom 2026-09-09. */
    font-size: 16px;
    line-height: 24px;
    font-weight: var(--fw-semibold);
    color: var(--color-dark);
    text-decoration: none;
}

.blog-back-link:hover {
    color: var(--color-dark);
    text-decoration: underline;
}

.blog-back-link:focus-visible {
    outline: 2px solid var(--color-dark);
    outline-offset: 2px;
}

.blog-back-icon {
    flex: 0 0 auto;
}

/* ── Zweispalter ─────────────────────────────────────────── */

.blog-content {
    padding-block: var(--space-section);
}

/* Luft zwischen Text und Randspalte, wenn sie auf Mobil untereinander
   stehen. Auf Desktop trägt der Abstand aus den Spaltenbreiten. */
.blog-layout {
    row-gap: 48px;
}

/* ⚠️ Unterhalb von 992px steht die Randspalte VOR dem Text.
   Auf Desktop sitzt sie oben rechts, also im Blickfeld, bevor man liest –
   untereinander heißt dieselbe Aussage: erst die Eckdaten, dann der Artikel.
   Ein Kasten hinter dem Text würde von den meisten nie gesehen.
   (Mit dem User am 2026-09-09 so besprochen.) */
@media (max-width: 991.98px) {
    .blog-layout > .blog-col-aside {
        order: -1;
    }
}

/* Spaltenaufteilung, am Entwurf ausgemessen (Frame 1728, Export 2×):
   Textspalte 1048 · Abstand 62 · Randspalte 354, Summe 1464 = Inhaltsbreite.
   Das ist KEIN Bootstrap-Zwölftel (col-8 ergäbe 976), deshalb eigene Werte.

   Gerechnet wird auf die Zeilenbreite, also Inhaltsbreite + 24px
   Gutter-Ausgleich = 1492:
     Textspalte   (1048 + 24) / 1492 = 71.85 %
     Randspalte   ( 354 + 24) / 1492 = 25.34 %
     Rest 2.81 % verteilt `space-between` als Spalte dazwischen.
   In Prozent statt Pixeln, damit es unterhalb von 1728 mitskaliert. */
@media (min-width: 992px) {
    .blog-layout {
        justify-content: space-between;
    }

    .blog-layout > .blog-col-text,
    .blog-layout > .blog-col-aside {
        max-width: none;
    }

    .blog-layout > .blog-col-text {
        flex: 0 0 71.85%;
        width: 71.85%;
    }

    .blog-layout > .blog-col-aside {
        flex: 0 0 25.34%;
        width: 25.34%;
    }
}

/* Fließtext des Beitrags. Beiträge sind Gutenberg-Inhalte, hier landen also
   auch Absätze, Listen und Zitate ohne eigene Blockklassen. */
/* Fließtext 16/26, Zwischenüberschriften 32/40 Bold – Vorgaben des Users
   vom 2026-09-09. Die H2-Regel steht auf dem DIREKTEN Kind: Gutenberg setzt
   Kern-Blöcke als direkte Kinder, Weser-Blöcke bringen eigene Überschriften
   tiefer im Baum mit – die dürfen davon nicht getroffen werden. */
.blog-content-body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 26px;
}

.blog-content-body > h2 {
    font-size: 32px;
    line-height: 40px;
    font-weight: var(--fw-bold);
}

/* H3 ist ABGELEITET, nicht aus dem Entwurf – der zeigt nur H2.
   Nötig, weil die Theme-Vorgabe für h3 bei 34px liegt und die dritte Ebene
   damit GRÖSSER wäre als die zweite (32px). 24/32 hält die Staffelung
   32 → 24 → 18 (h4) ein. Wenn der Kunde einen echten Wert nennt, hier
   ersetzen; h4 braucht nichts, die 18px passen darunter. */
.blog-content-body > h3 {
    font-size: 24px;
    line-height: 32px;
    font-weight: var(--fw-bold);
}

.blog-content-body > * + * {
    margin-top: 24px;
}

.blog-content-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

.blog-content-body blockquote {
    margin: 0;
    padding-left: 24px;
    border-left: 4px solid var(--color-accent);
    font-size: var(--fs-copy-m);
}

/* ⚠️ WESER-BLÖCKE IM BEITRAGSFLUSS
   Jeder Weser-Block ist eine Vollbreite-Sektion mit eigenem .container-xl.
   In der Textspalte würde der ein zweites Mal einrücken und deckeln – der
   Block säße dann schmaler als der Text um ihn herum. Diese eine Regel
   neutralisiert ihn, danach füllt der Block die Textspalte.

   Dadurch sind Bildreihe, CTA-Box, Videokarten und die übrigen Blöcke im
   Beitrag benutzbar, OHNE dass ein einziger Block umgebaut werden musste.

   Der Sektionsabstand der Blöcke bleibt bewusst unangetastet: Er ist im
   Backend je Block wählbar, und im Entwurf steht der CTA-Banner tatsächlich
   mit Luft im Text. Wer ihn enger will, stellt am Block „kein Abstand" ein. */
.blog-content-body .container-xl {
    max-width: none;
    padding-inline: 0;
    margin-inline: 0;
    width: 100%;
}

/* ── Randspalte ──────────────────────────────────────────── */

.blog-aside {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.blog-aside-box {
    padding: 24px;
    background-color: var(--color-white);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-md);
}

.blog-aside-title {
    /* h2 – die Vorgaben aus typography.css zurücksetzen. */
    margin: 0 0 16px;
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    font-size: 18px;
    line-height: 27px;
    color: var(--color-heading);
}

/* Definitionsliste: Beschriftung links, Wert rechts. Jede Zeile ist ein
   eigenes div – das ist in HTML5 innerhalb von <dl> erlaubt und die einzige
   Art, dt und dd als Paar zu gruppieren. */
.blog-meta {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.blog-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
}

/* font-weight ausdruecklich: Bootstraps Reboot setzt dt auf 700. */
.blog-meta-label {
    margin: 0;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 21px;
    font-weight: var(--fw-normal);
    color: var(--color-text-muted);
}

.blog-meta-value {
    margin: 0;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 21px;
    font-weight: var(--fw-semibold);
    color: var(--color-dark);
    text-align: right;
}

/* Themen: Beschriftungen, keine Links – zur Begründung siehe den
   Dateikopf von template-parts/blog/sidebar.php. */
.blog-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.blog-topic {
    padding: 4px 12px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 19.5px;
    color: var(--color-dark);
}

.blog-weitere {
    padding-block: 0 var(--space-section);
}

/* Trennlinie über „Weitere Beiträge" – im Entwurf ausgemessen.
   ⚠️ Sie sitzt an der Überschrift, NICHT am .container-xl: der hat 130px
   Seitenpolster, eine Linie dort liefe über die volle Fensterbreite statt
   auf Inhaltsbreite. Die Überschrift ist das erste Element, dessen Box
   genau die Inhaltsbreite hat. */
.blog-weitere-headline {
    padding-top: var(--space-lg);          /* 64px zwischen Linie und Text */
    border-top: 1px solid var(--color-rule);
    /* 32/48 SemiBold – Vorgabe des Users vom 2026-09-09. Die Zwischen-
       ueberschriften im Text sind bei gleicher Groesse Bold mit 40er Zeile. */
    font-size: 32px;
    line-height: 48px;
    font-weight: var(--fw-semibold);
}

.blog-weitere-headline {
    margin-bottom: 40px;
}

@media (max-width: 767.98px) {
    .blog-list,
    .blog-content {
        padding-block: var(--space-section-sm);
    }
    .blog-weitere {
        padding-block: 0 var(--space-section-sm);
    }
}